From a791a033d892fb08f5acdcba915b98a863866e99 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期五, 08 十一月 2024 13:47:29 +0800
Subject: [PATCH] 分享对话为空的情况
---
src/components/chat/chatComponents/summaryCom/components/deviceLastValue/MonitorContent.vue | 63 ++++++++++++++++++++++++++++++-
1 files changed, 60 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..23721e6 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,17 +24,53 @@
height: `${CELL_HEIGHT}px`,
}"
>
- <span>
+ <span
+ class="cursor-pointer"
+ @mouseover="valueMouseOver($event, item)"
+ @mouseleave="valueMouseLeave"
+ @click="emit('itemClick', item, type)"
+ >
{{ 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 { 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 emit = defineEmits(['itemClick']);
const props = defineProps({
/** @description 鏍囬 */
title: {
@@ -56,5 +92,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