内容修改

longyvfengyun

2023-07-06 a3c6e3a5177b15021dad5788688294b1d863717a

 src/components/MapPin.vue

@@ -1,82 +1,95 @@
<script setup>
import {computed, onMounted} from "vue";
import {computed} from "vue";

   const props = defineProps({
      visible: {
         type: Boolean,
         default: false,
      },
      name: {
         type: String,
         default: ""
      },
      cWidth: {
         type: Number,
         default: 100
      },
      cHeight: {
         type: Number,
         default: 100,
      },
      dWidth: {
         type: Number,
         default: 100
      },
      dHeight: {
         type: Number,
         default: 100
      },
      x: {
         type: Number,
         default: 0
      },
      y: {
         type: Number,
         default: 0
      },
      info: {
         type: Object,
         default() {
            return {
               tmp: 0,
               hum: 0,
               diff: 0
            }
const props = defineProps({
   visible: {
      type: Boolean,
      default: false,
   },
   name: {
      type: String,
      default: ""
   },
   cWidth: {
      type: Number,
      default: 100
   },
   cHeight: {
      type: Number,
      default: 100,
   },
   dWidth: {
      type: Number,
      default: 100
   },
   dHeight: {
      type: Number,
      default: 100
   },
   x: {
      type: Number,
      default: 0
   },
   y: {
      type: Number,
      default: 0
   },
   info: {
      type: Object,
      default() {
         return {
            num: 99,
            tmp: 0,
            hum: 0,
            diff: 0
         }
      }
   });
   }
});

   const posStyle = computed(()=>{
      return {
         left: props.x*props.cWidth/props.dWidth+'px',
         top: props.y*props.cHeight/props.dHeight+'px'
      }
   });
const emits = defineEmits(["click"]);

const handleClick = ()=>{
   emits('click', props.info);
}

const posStyle = computed(()=>{
   return {
      left: props.x*props.cWidth/props.dWidth+'px',
      top: props.y*props.cHeight/props.dHeight+'px'
   }
});

</script>

<template>
   <div class="map-pin" :style="posStyle">
      <el-tooltip placement="top" :visible="visible">
         <template #content>
            <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="map-pin-wrapper">
         <el-tooltip placement="top" :visible="visible">
            <template #content>
               <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" @click="handleClick">
               <div class="pin"></div>
               <div class="pulse"></div>
         </div>
      </el-tooltip>
            </div>
         </el-tooltip>
      </div>
   </div>
</template>

<style lang="less" scoped>
@size: 24px;
.map-pin-wrapper {
   position: relative;
   z-index: 0;
}
.map-pin {
   position: absolute;
   cursor: pointer;
   z-index: 1;
   .map-pin-content {
      position: relative;
      top: -@size - @size*0.1;