src/components/chat/chatComponents/summaryCom/components/deviceLastValue/DeviceLastValueCom.vue
@@ -8,6 +8,9 @@ backgroundColor: BORDER_COLOR, }" > <div class="flex-center font-bold text-base bg-[#8db4e2]" :style="{ height: `${CELL_HEIGHT}px` }"> {{ data.title }} </div> <div v-for="(rowChunk, index) in currentRowChunkList" :key="index" @@ -162,12 +165,15 @@ const restColWidth = ref(colHeaderCellContentWidth.value); const calcMaxRowsNum = (groupCount: number, height, extraHeight = 0) => { return Math.floor( (height - THICK_BORDER_WIDTH - extraHeight) / (height - 2 * THICK_BORDER_WIDTH - CELL_HEIGHT - extraHeight) / (CELL_HEIGHT * groupCount + 2 * THICK_BORDER_WIDTH + THIN_BORDER_WIDTH * (groupCount - 2)) ); }; let maxColsNum = ref<number>(null); const resizeEvent = ({ width, height }) => { if (width === 0 || height === 0) { return; } // 按最大宽度算最大列数 maxColsNum.value = Math.floor( (width - THICK_BORDER_WIDTH + colHeaderCellContentWidth.value - rowHeaderCellContentWidth.value) / @@ -262,7 +268,7 @@ // const groupCount = (TEST_DATA?.rows?.length ?? 0) + 1; // 计算最大行数 // y * (cellHeight * groupCount) + // (y - 1) * (2 * thickBorderWidth) + // (y - 1) * (2 * thickBorderWidth) +cellHeight+thickBorderWidth // thickBorderWidth + // thickBorderWidth * 2 + // y * (groupCount - 2) * thinBorderWidth <= @@ -273,13 +279,6 @@ // y<= (height-thickBorderWidth)/(cellHeight * groupCount + 2 * thickBorderWidth + thinBorderWidth(groupCount - 2) ) onMounted(() => { resizeEvent({ width: containerRef.value.clientWidth, height: 0.7 * document.body.clientHeight, }); }); onActivated(() => { resizeEvent({ width: containerRef.value.clientWidth, height: 0.7 * document.body.clientHeight, 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, @@ -24,15 +24,44 @@ height: `${CELL_HEIGHT}px`, }" > <span> <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-16">类型</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-16">名称</div> <div class="before:content-[':'] before:pr-1.5">{{ hoverState.data?.ONAME }}</div> </div> <div v-if="hoverState.data?.[type]" class="flex"> <div class="w-16">监测值</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-16">数据时间</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 { 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({ @@ -56,5 +85,26 @@ 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> src/components/chat/chatComponents/summaryCom/components/deviceLastValue/constants.ts
@@ -1,8 +1,8 @@ export const CONTENT_CELL_CLASS = 'bg-white flex-center flex-0 text-[#7331a5] cursor-pointer'; export const ROW_HEADER_CELL_CLASS = 'bg-white flex-center flex-0'; export const CONTENT_CELL_CLASS = 'bg-white flex-center flex-0 text-[#7331a5] cursor-default'; export const ROW_HEADER_CELL_CLASS = 'bg-white flex-center flex-0 cursor-default'; export const ROW_HEADER_CELL_MAX_WIDTH = 198; export const COL_HEADER_CELL_CLASS = 'font-bold flex-center flex-0'; export const COL_HEADER_CELL_CLASS = 'font-bold flex-center flex-0 cursor-default'; export const COL_HEADER_CELL_BG_COLOR = '#c5d9f1' export const CELL_MAX_WIDTH = 198; export const CELL_HEIGHT = 32; @@ -11,7 +11,7 @@ export const PAGE_HEIGHT = 39; export const rowCount = 5; export const BORDER_COLOR = '#90b6e2'; export const BORDER_COLOR = 'rgb(115 168 231)'; export const FIRST_COL_MAX_OFFSET = 4; src/components/chat/chatComponents/summaryCom/components/deviceLastValue/types.ts
@@ -14,6 +14,7 @@ YL: number; }; export type Monitor = { title:string; type: SummaryAnswerType.DeviceLastValue; rows: MonitorRow[]; values: MonitorValue[];
