视频监控

longyvfengyun

2023-06-30 09ab26b8df36c5ebd7cfc20a862011fb98681588

 src/views/home/index.vue

@@ -1,11 +1,11 @@
<script setup>
import CardBox from "@/components/CardBox.vue";
import {onMounted, onUnmounted, watch} from "vue";
import {onMounted, onUnmounted, ref, watch} from "vue";
import MapPin from "@/components/MapPin.vue";
import slideMenu from "@/views/mainLayout/js/slideMenu";
import homeContentModule from "@/views/home/js/homeContentModule";
import homeInfoModule from "@/views/home/js/homeInfoModule";
import {Setting} from "@element-plus/icons-vue";

const isShowMapPin = ref(true);

const {
   isCollapse
@@ -20,10 +20,10 @@

const {homeInfo} = homeInfoModule();

homeInfo[0].hum = 123;

watch(isCollapse, ()=>{
   isShowMapPin.value = false;
   setTimeout(()=>{
      isShowMapPin.value = true;
      setContainerSize();
   }, 500);
});
@@ -44,11 +44,14 @@
<template>
   <div class="home-content" ref="homeContentDom">
      <map-pin
         v-if="isShowMapPin"
         v-for="(item, index) in homeInfo" :key="'key'+index"
         :visible="item.pos.visible"
         :name="item.name"
         :c-width="cWidth" :c-height="cHeight"
         :d-width="dWidth" :d-height="dHeight"
         :x="item.pos.x" :y="item.pos.y"></map-pin>
         :x="item.pos.x" :y="item.pos.y"
         :info="item.info"></map-pin>
      <div class="card-box-list">

      </div>
@@ -59,7 +62,7 @@
.home-content {
   position: relative;
   height: 100%;
   background-image: url("./images/home.png");
   background-image: url("./images/home-plus.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
}