添加实时监控，调整树的滚动条

zhangzengfei

2022-08-10 907a3504a77873a8e762adc2f684222c8946adec

 src/views/equipmentManagement/equipmentList/components/Content.vue

@@ -1,62 +1,54 @@
<template>
  <div class="whiteContent Content">
    <div class="title">设备地图</div>
    <div class="title" v-show="false">设备地图</div>

    <!-- 全屏按钮 -->
    <img
      class="zoomOut iconfont"
      src="/images/equipmentManagement/full.png"
      @click="toggleZoom('Full')"
      v-if="!isFull"
      v-show="false"
    />
    <!-- 取消全屏的按钮 -->
    <img
      class="zoomOut iconfont"
      src="/images/equipmentManagement/quit.png"
      @click="toggleZoom('')"
      v-else
    />
    <img class="zoomOut iconfont" src="/images/equipmentManagement/quit.png" @click="toggleZoom('')" v-show="false" />

    <!-- 普通地图 -->
    <div id="map" v-if="!isFull"></div>
    <div id="map" v-show="false"></div>
    <!-- 全屏地图 -->
    <div id="mapFull" v-else></div>
    <InfoCard
      @close="closeCard"
      v-if="isShowCard"
      :node="activeNode"
    ></InfoCard>
    <div id="mapFull" v-show="false"></div>
    <InfoCard @close="closeCard" v-if="isShowCard" :node="activeNode"></InfoCard>
    <FormList v-if="!isFull"></FormList>
  </div>
</template>

<script>
import { findDevList } from "@/api/device";
import AMapLoader from "@amap/amap-jsapi-loader";
import InfoCard from "@/views/equipmentManagement/equipmentList/components/InfoCard";
import FormList from "@/views/equipmentManagement/equipmentList/components/FormList";
import { findDevList } from "@/api/device"
import AMapLoader from "@amap/amap-jsapi-loader"
import InfoCard from "@/views/equipmentManagement/equipmentList/components/InfoCard"
import FormList from "@/views/equipmentManagement/equipmentList/components/FormList"

import bus from "@/plugin/bus";
import bus from "@/plugin/bus"

export default {
  created() {
    window._AMapSecurityConfig = {
      securityJsCode: "768ab79bdc4075aa082bc070c53bb3c4",
    };
      securityJsCode: "768ab79bdc4075aa082bc070c53bb3c4"
    }
  },
  mounted() {
    this.initMap("");
    this.initMap("")
    bus.$on("refleshNode", (node) => {
      this.nodes = node;
      this.initNode();
    });
      this.nodes = node
      this.initNode()
    })
  },
  beforeDestroy() {
    bus.$off("refleshNode");
    bus.$off("refleshNode")
  },

  components: {
    InfoCard, //设备信息弹层
    FormList, //表格
    FormList //表格
  },
  data() {
    return {
@@ -69,8 +61,8 @@
      center: [116.06157, 39.66157], //地图中心
      activeNode: null, //选中的地图节点
      geocoder: {},
      myMaker: null,
    };
      myMaker: null
    }
  },

  methods: {
@@ -79,39 +71,39 @@
      AMapLoader.load({
        key: "69cd7e958683e8462beab5c08e6bc21b", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geocoder", "AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        plugins: ["AMap.Geocoder", "AMap.Geolocation"] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.AMap = AMap;
          this.AMap = AMap
          this.map = new AMap.Map(`map${status}`, {
            //设置地图容器id
            zoom: this.zoom, //初始化地图级别
            center: this.center, //初始化地图中心点位置
          });
            center: this.center //初始化地图中心点位置
          })

          //初始化查询地理位置插件
          AMap.plugin("AMap.Geocoder", () => {
            this.geocoder = new AMap.Geocoder();
          });
            this.geocoder = new AMap.Geocoder()
          })

          this.initNode();
          this.initNode()
        })
        .catch((e) => {
          console.log(e);
        });
          console.log(e)
        })
    },
    //初始化节点
    initNode() {
      if (this.myMaker) {
        this.myMaker.destroy();
        this.myMaker.destroy()
      }
      this.nodes.filter((item, index) => {
        //查询行政位置
        this.geocoder.getAddress([item.lon, item.lat], (status, result) => {
          // 节点坐标
          let position = new this.AMap.LngLat(item.lon, item.lat);
          let position = new this.AMap.LngLat(item.lon, item.lat)
          // 节点地理位置
          item.province = result.regeocode.addressComponent.province;
          item.province = result.regeocode.addressComponent.province

          //信息框dom
          let markerContent =
@@ -119,48 +111,48 @@
            `<div class="nodeMarker" id="node${index}}">` +
            '<img class="normal" src="/images/equipmentManagement/default.png">' +
            '<img class="selected" src="/images/equipmentManagement/select.png">' +
            `<div class="box"> <div class="name">${item.devName}</div> <div class="property">IP地址: <span class="data">${item.devIp}</span> </div> <div class="property">设备位置: <span class="data">${item.province}</span></div><div class="property">安装时间: <span class="data">${item.installTime}</span></div></div>`;
          ("</div>");
            `<div class="box"> <div class="name">${item.devName}</div> <div class="property">IP地址: <span class="data">${item.devIp}</span> </div> <div class="property">设备位置: <span class="data">${item.province}</span></div><div class="property">安装时间: <span class="data">${item.installTime}</span></div></div>`
          ;("</div>")

          let marker = new this.AMap.Marker({
            position: position,
            // 将 html 传给 content
            content: markerContent,
            // 以 icon 的 [center bottom] 为原点
            offset: new this.AMap.Pixel(-24, -24),
          });
            offset: new this.AMap.Pixel(-24, -24)
          })

          //给节点添加的监听
          marker.on("click", () => {
            this.activeNode = item;
            this.isShowCard = true;
          });
            this.activeNode = item
            this.isShowCard = true
          })

          this.map.add(marker);
          this.myMaker = marker;
        });
      });
          this.map.add(marker)
          this.myMaker = marker
        })
      })
    },
    //关闭设备详情弹层
    closeCard() {
      this.isShowCard = false;
      this.isShowCard = false
    },
    //切换全屏地图
    toggleZoom(status) {
      //获取当前地图级别
      this.zoom = this.map.getZoom();
      this.zoom = this.map.getZoom()
      //获取当前地图中心位置
      let data = this.map.getCenter();
      this.center = [data.lng, data.lat];
      let data = this.map.getCenter()
      this.center = [data.lng, data.lat]
      if (status) {
        this.isFull = true;
        this.isFull = true
      } else {
        this.isFull = false;
        this.isFull = false
      }
      this.initMap(status);
    },
  },
};
      this.initMap(status)
    }
  }
}
</script>

<style scoped lang="scss">
@@ -264,4 +256,4 @@
    cursor: pointer;
  }
}
</style>
</style>