From 022e0a3889e6510cd1bcc1ca6f18f00b3a62b638 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 25 七月 2024 14:30:01 +0800
Subject: [PATCH] 监测列表
---
src/components/chat/chatComponents/summaryCom/components/deviceLastValue/MonitorContent.vue | 56 +++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 53 insertions(+), 3 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/deviceLastValue/MonitorContent.vue b/src/components/chat/chatComponents/summaryCom/components/deviceLastValue/MonitorContent.vue
index b37996f..f0563f5 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,
@@ -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>
--
Gitblit v1.9.3