设备管理小样

mark

2022-10-21 1fe240406526b9b6256664559d3d2bec9250135c

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

@@ -1,62 +1,57 @@
<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
    />
    <!-- 普通地图 -->
    <div id="map" v-if="!isFull"></div>
    <img class="zoomOut iconfont" src="/images/equipmentManagement/quit.png" @click="toggleZoom('')" v-show="false" />

    <!-- 普通地图  v-show="false" -->
    <div class="map-box">
      <div class="map-txt">设备地图</div>
      <div id="map"></div>
    </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 +64,8 @@
      center: [116.06157, 39.66157], //地图中心
      activeNode: null, //选中的地图节点
      geocoder: {},
      myMaker: null,
    };
      myMaker: null
    }
  },

  methods: {
@@ -79,39 +74,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,57 +114,57 @@
            `<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">
.whiteContent {
  position: relative;
  box-sizing: border-box;
  padding: 20px;
  // padding: 20px;
  width: 1280px;
  background-color: #fff;
  // background-color: #34405a;
  margin: 0 auto;

  .title {
@@ -177,11 +172,25 @@
    font-weight: bold;
    font-size: 16px;
  }

  .map-box {
    background-color: #1f2a3e;
    border-radius: 18px;
    // width: 100%;
    padding: 24px;
    margin-bottom: 24px;
    .map-txt {
      font-family: PingFang SC Heavy;
      font-size: 16px;
      font-weight: normal;
      line-height: 24px;
      letter-spacing: 0px;
      color: #ffffff;
      margin-bottom: 16px;
    }
  #map,
  #mapFull {
    width: 100%;
    height: 500px;
      width: 1232px;
      height: 496px;
    border-radius: 8px;

    ::v-deep .nodeMarker {
@@ -243,6 +252,7 @@
      }
    }
  }
  }

  #mapFull {
    height: 872px;
@@ -250,8 +260,8 @@

  .InfoCard {
    position: absolute;
    top: 58px;
    right: 26px;
    top: 68px;
    right: 28px;
    z-index: 2;
  }