摄像机树样式,导出数据样式

ZZJ

2022-08-02 ed35d0b4c2051e067bd9904c4b0158257d5db0d9

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

@@ -5,14 +5,14 @@
    <!-- 全屏按钮 -->
    <img
      class="zoomOut iconfont"
      src="/images/equipmentManagement/全屏.png"
      src="/images/equipmentManagement/full.png"
      @click="toggleZoom('Full')"
      v-if="!isFull"
    />
    <!-- 取消全屏的按钮 -->
    <img
      class="zoomOut iconfont"
      src="/images/equipmentManagement/退出全屏.png"
      src="/images/equipmentManagement/quit.png"
      @click="toggleZoom('')"
      v-else
    />
@@ -34,6 +34,9 @@
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";

export default {
  created() {
    window._AMapSecurityConfig = {
@@ -41,9 +44,16 @@
    };
  },
  mounted() {
    this.searchingBtn();
    //DOM初始化完成进行地图初始化
    this.initMap("");
    bus.$on("refleshNode", (node) => {
      this.nodes = node;
      this.initNode();
    });
  },
  beforeDestroy() {
    bus.$off("refleshNode");
  },

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

@@ -91,6 +102,9 @@
    },
    //初始化节点
    initNode() {
      if (this.myMaker) {
        this.myMaker.destroy();
      }
      this.nodes.filter((item, index) => {
        //查询行政位置
        this.geocoder.getAddress([item.lon, item.lat], (status, result) => {
@@ -103,8 +117,8 @@
          let markerContent =
            "" +
            `<div class="nodeMarker" id="node${index}}">` +
            '<img class="normal" src="/images/equipmentManagement/设备默认.png">' +
            '<img class="selected" src="/images/equipmentManagement/设备选中.png">' +
            '<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>");

@@ -123,6 +137,7 @@
          });

          this.map.add(marker);
          this.myMaker = marker;
        });
      });
    },
@@ -143,25 +158,6 @@
        this.isFull = false;
      }
      this.initMap(status);
    },

    // 查询列表
    searchingBtn() {
      let param = {
        page: 1,
        size: 999,
        // startTime: this.searchTime[0],
        // endTime: this.searchTime[1],
        inputText: "",
      };
      findDevList(param)
        .then((res) => {
          this.nodes = res.data.list;
          this.initMap("");
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
@@ -198,7 +194,7 @@
        box-sizing: border-box;
        display: none;
        position: absolute;
        padding: 20px;
        padding: 20px 10px;
        top: 40px;
        left: -100px;
        width: 247px;