fix 态势数据

train-web/src/pages/situation/index.vue

@@ -1,11 +1,36 @@
 <template>
   <device :img-url="imageUrl" :devices="[]">
+    <template v-for="item in dataList">
+      <el-popover placement="top-start" :title="item.name" :width="80" trigger="hover">
+        <template #reference>
+          <div class="point-box" :style="{ top: item.top, left: item.left }">{{ item.name }}</div>
+        </template>
+        <div>
+          <div>
+            <span style="text-align: right;display: inline-block;min-width: 30px;margin-right: 6px;">{{ '大客流: ' }}</span>
+            <span>{{ item.people }}</span><span>{{ '人/m2' }}</span>
+          </div>
+          <div>
+            <span style="text-align: right;display: inline-block;min-width: 30px;margin-right: 6px;">{{ '水位: ' }}</span>
+            <span>{{ item.water }}</span><span>{{ 'm' }}</span>
+          </div>
+        </div>
+      </el-popover>
+    </template>
     <div class="echart-box" ref="chartDom"></div>
   </device>
 </template>
 <script lang="ts" setup>
 import imageUrl from '@/assets/images/backage-situation.png'
 import * as echarts from "echarts";
+import { ElPopover } from 'element-plus';
+
+const dataList = [
+  { name: '站厅', top: '18vh', left: '110vh', people: 10, water: 0.21 },
+  { name: '站台', top: '62vh', left: '110vh', people: 12, water: 1.01 },
+]
+
+
 let chartDom = ref(null);
 onMounted(() => {
   initChart();
@@ -16,7 +41,7 @@ const initChart = () => {
     dataset: {
       source: [
         ['站厅', 10, 0.21],
-        ['站台', 12, 1.00],
+        ['站台', 12, 1.01],
       ]
     },
     tooltip: {
@@ -100,4 +125,15 @@ const initChart = () => {
   bottom: 0px;
   border-radius: 10px;
 }
+
+.point-box {
+  width: 6vh;
+  height: 3vh;
+  text-align: center;
+  background-color: blue;
+  border-radius: 1vh;
+  color: white;
+  position: absolute;
+  cursor: pointer;
+}
 </style>

train-web/src/types/auto-imports.d.ts

@@ -309,7 +309,6 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
@@ -605,7 +604,6 @@ declare module 'vue' {
 declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>