From bcff2cf9253145d0dd4b36daed70a12ecbd2ff54 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期五, 26 七月 2024 10:56:57 +0800
Subject: [PATCH] 选择宽度自适应
---
src/components/chat/chatComponents/summaryCom/components/deviceLastValue/MonitorContent.vue | 71 ++++++++++++++++++++++++++++++++---
1 files changed, 65 insertions(+), 6 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/deviceLastValue/MonitorContent.vue b/src/components/chat/chatComponents/summaryCom/components/deviceLastValue/MonitorContent.vue
index b2a2bd5..59589b1 100644
--- a/src/components/chat/chatComponents/summaryCom/components/deviceLastValue/MonitorContent.vue
+++ b/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>
--
Gitblit v1.9.3