选择宽度自适应

wujingjing

2024-07-26 bcff2cf9253145d0dd4b36daed70a12ecbd2ff54

 src/components/chat/chatComponents/summaryCom/components/deviceLastValue/MonitorContent.vue

@@ -1,6 +1,6 @@
<template>
   <div
      class="flex cursor-none"
      class="flex"
      :class="`space-x-[${THICK_BORDER_WIDTH}px]`"
      :style="{
         backgroundColor: BORDER_COLOR,
@@ -9,7 +9,7 @@
      <div
         :class="ROW_HEADER_CELL_CLASS"
         :style="{
            width: `${CELL_WIDTH}px`,
            width: `${firstColWidth}px`,
            height: `${CELL_HEIGHT}px`,
         }"
      >
@@ -20,18 +20,49 @@
         :key="index"
         :class="CONTENT_CELL_CLASS"
         :style="{
            width: `${CELL_WIDTH}px`,
            width: `${restColWidth}px`,
            height: `${CELL_HEIGHT}px`,
         }"
      >
         {{ item[type] }}
         <span class="cursor-pointer" @mouseover="valueMouseOver($event, item)" @mouseleave="valueMouseLeave">
            {{ item[type] }}
         </span>
      </div>
      <div
         v-show="hoverState.show && hoverState.data"
         class="z-40 fixed p-2 bg-white"
         style="transform-origin: center top"
         :style="{
            left: hoverState.left + 'px',
            top: hoverState.top + 'px',
         }"
      >
         <div v-if="hoverState.data?.OTITLE" class="font-bold mb-1">{{ hoverState.data?.OTITLE }}</div>
         <div class="w-full space-y-1">
            <div v-if="hoverState.data?.OTYPE" class="flex">
               <div class="w-8">类型</div>
               <div class="before:content-[':'] before:pr-1.5">{{ hoverState.data?.OTYPE }}</div>
            </div>
            <div v-if="hoverState.data?.ONAME" class="flex">
               <div class="w-8">编号</div>
               <div class="before:content-[':'] before:pr-1.5">{{ hoverState.data?.ONAME }}</div>
            </div>
            <div v-if="hoverState.data?.[type] || hoverState.data?.[type] === 0" class="flex">
               <div class="w-8">监测</div>
               <div class="before:content-[':'] before:pr-1.5">{{ hoverState.data?.[type] }}</div>
            </div>
            <div class="flex" v-if="hoverState.data?.OTIME">
               <div class="w-8">时间</div>
               <div class="before:content-[':'] before:pr-1.5">{{ hoverState.data?.OTIME }}</div>
            </div>
         </div>
      </div>
   </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import { BORDER_COLOR, CELL_HEIGHT, CELL_WIDTH, CONTENT_CELL_CLASS, ROW_HEADER_CELL_CLASS, THICK_BORDER_WIDTH } from './constants';
import { reactive, type PropType } from 'vue';
import { BORDER_COLOR, CELL_HEIGHT, CONTENT_CELL_CLASS, ROW_HEADER_CELL_CLASS, THICK_BORDER_WIDTH } from './constants';
import type { MonitorValue } from './types';
const props = defineProps({
   /** @description 标题 */
@@ -46,6 +77,34 @@
   values: {
      type: Object as PropType<MonitorValue[]>,
   },
   firstColWidth: {
      type: Number,
   },

   restColWidth: {
      type: Number,
   },
});

const hoverState = reactive({
   left: 0,
   top: 0,
   show: false,
   data: null as MonitorValue,
});

const TIP_OFFSET = 10;
const valueMouseOver = (e, item: MonitorValue) => {
   hoverState.show = true;
   const { pageX, pageY } = e;
   hoverState.left = pageX + TIP_OFFSET;
   hoverState.top = pageY + TIP_OFFSET;
   hoverState.data = item;
};

const valueMouseLeave = () => {
   hoverState.show = false;
   hoverState.data = null;
};
</script>
<style scoped lang="scss"></style>