视频监控

longyvfengyun

2023-06-30 09ab26b8df36c5ebd7cfc20a862011fb98681588

 src/components/MapPin.vue

@@ -2,6 +2,10 @@
import {computed, onMounted} from "vue";

   const props = defineProps({
      visible: {
         type: Boolean,
         default: false,
      },
      name: {
         type: String,
         default: ""
@@ -29,6 +33,16 @@
      y: {
         type: Number,
         default: 0
      },
      info: {
         type: Object,
         default() {
            return {
               tmp: 0,
               hum: 0,
               diff: 0
            }
         }
      }
   });

@@ -42,9 +56,12 @@

<template>
   <div class="map-pin" :style="posStyle">
      <el-tooltip placement="top">
      <el-tooltip placement="top" :visible="visible">
         <template #content>
            {{name}}
            <div class="home-info name">{{name}}</div>
            <div class="home-info">温度：{{ info.tmp }} ℃</div>
            <div class="home-info">湿度：{{ info.hum }} %RH</div>
            <div class="home-info">压差：{{ info.diff }} Pa</div>
         </template>
         <div class="map-pin-content">
               <div class="pin"></div>
@@ -59,6 +76,7 @@
.map-pin {
   position: absolute;
   cursor: pointer;
   z-index: 1;
   .map-pin-content {
      position: relative;
      top: -@size - @size*0.1;
@@ -97,4 +115,9 @@
      }
   }
}
.home-info {
   &.name {
      text-align: center;
   }
}
</style>