<template>
|
<div
|
class="flex"
|
:class="`space-x-[${THICK_BORDER_WIDTH}px]`"
|
:style="{
|
backgroundColor: BORDER_COLOR,
|
}"
|
>
|
<div
|
:class="ROW_HEADER_CELL_CLASS"
|
:style="{
|
width: `${firstColWidth}px`,
|
height: `${CELL_HEIGHT}px`,
|
}"
|
>
|
{{ title }}
|
</div>
|
<div
|
v-for="(item, index) in values"
|
:key="index"
|
:class="CONTENT_CELL_CLASS"
|
:style="{
|
width: `${restColWidth}px`,
|
height: `${CELL_HEIGHT}px`,
|
}"
|
>
|
<span class="cursor-pointer" @mouseover="valueMouseOver($event, item)" @mouseleave="valueMouseLeave" @click="emit('itemClick',item,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 { 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: {
|
type: String,
|
},
|
/** @description 类型 */
|
type: {
|
type: String,
|
},
|
/** @description 值 */
|
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>
|
