soc_web/src/views/iot/board/components/deviceMap.vue

<!--  -->
<template>
  <div class="component_box">
    <h1 class="t_title">设备分布</h1>
    <div ref="chart" style="height: 100%"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getMap, mapInfo } from "@/api/board/cockpit.js";
import { deviceCountOfChildren } from "@/api/iot/board";
export default {
  props: ["orgId", "orgName"],
  data() {
    return {
      map: {},
      deviceCount: {},
      coordinates: [],
      icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAUCAYAAABvVQZ0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF3SURBVDhPvZTBK4RBGIe/z56UklDay+6JkhM3RYo/wVlOrg4uTtyc3JSrg6Lc2CQHp5U7RyVylBBJXD7PO/PO7M43Y3OQp57mfd/fzOz6dlf2LxRFMYLr2hro63io7e/gQI53uKwjA303Cr06CujStcwV1rCHg3Kpgf4E1/CBtsraGTbN4wv24Q0K2/hsy2IFN/FJj6Rhw4zshg2ctGVxodkcfmET+/EVd8zBFISXKH+O1HtSQ92EQD2Bo1rfSggLJmyHoQvNZYK27nKXm3fDGu030I/ZsecDh/DIdCHy9Ti1peceK+6yFGeaLaE8q1UcxllMYR8HxYHtI4IHTO8+oDJvOOA2VfFTpgm2zCagfrejiIZuaaFBhGb+gZfYNYfLEKQeuFDBny7zX50IwvIn1emdTZlDSuq3ua+r41rX8jzL87ypZQyvVLMvGDCoseTuV+EI/kUFEB7bPZ5FjTw6b2dcoxYMGzbznGsUwHzaxp5Hjf6SLPsG2jnZyz2k38wAAAAASUVORK5CYII=",
    };
  },

  components: {},

  computed: {},

  watch: {
    orgId: {
      deep: true,
      handler(val) {
        //   this.resetTimer();
        this.getData();
      },
    },
    // map: {
    //   deep: true,
    //   handler() {
    //     this.$nextTick(() => {
    //       this.initMap();
    //     });
    //   },
    // },
  },

  created() {
    //   this.types = types;
    //   this.maxDisplay = 16;
    //   this.refreshTime = 1 * 10 * 1000;
    this.isMouseOver = false;
  },

  async mounted() {
    // console.info(this.fjMap)

    window.addEventListener("resize", this.windowResize);
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer);
    this.timer = null;

    window.removeEventListener("resize", this.windowResize);
  },

  methods: {
    // handleClick() {
    //   this.resetTimer();
    //   this.getData();
    // },
    handleMouseEnter() {
      this.isMouseOver = true;
    },
    handleMouseLeave() {
      this.isMouseOver = false;
    },
    async getData() {
      let mapinfo = await mapInfo(this.orgId);
      let deviceCount = (await deviceCountOfChildren(this.orgId)).data;
      let orgIdsHasDevice = deviceCount.map((d) => d.orgId);

      let map = mapinfo.data.map;
      let coordinates = mapinfo.data.sites
        .filter((s) => orgIdsHasDevice.includes(s.orgId))
        .map((s) => ({
          name: s.orgName,
          id: s.orgId,
          value: [s.longitude, s.latitude, 10],
        }));

      this.map = map;
      this.coordinates = coordinates;
      this.deviceCount = deviceCount;
      this.$nextTick(() => {
        this.initMap();
      });
    },
    initMap() {
      this.myChart && this.myChart.dispose();

      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(this.$refs["chart"]);
      let t = this;

      getMap(this.map).then((data) => {
        echarts.registerMap("map", data);

        let option = {
          tooltip: {
            trigger: "item",
          },
          geo: {
            show: true,
            map: "map",
            zoom: 1.25,

            showLegendSymbol: false, // 存在legend时显示
            emphasis: {
              show: false,
              color: "#fff", //悬浮字体颜色
              label: {
                show: false,
                color: "#c1b496", //控制地图省市文字颜色
                fontSize: 14,
              },
              emphasis: {
                borderWidth: 1,
                borderColor: "#fff",
                areaColor: "#2B91B7",
              },
            },
            roam: true,
            selectedMode: "single", //选择模式，单选，只能选中一个地市
            select: {
              //这个就是鼠标点击后，地图想要展示的配置
              disabled: false, //可以被选中
              itemStyle: {
                //相关配置项很多，可以参考echarts官网
                borderWidth: 1, //区域边框宽度
                borderColor: "#2B91B7ff", //区域边框颜色
                areaColor: "#2B91B730", //选中
              },
              label: {
                show: false,
                color: "#fff", //悬浮字体颜色
              },
            },
            itemStyle: {
              borderWidth: 1, //区域边框宽度
              borderColor: "#3fdaffff", //区域边框颜色
              areaColor: "#3fdaff55", //区域颜色"rgba(23,107,221,0.7)",//
            },
          },
          legend: [
            {
              selectedMode: true, //取消图例上的点击事件
            },
          ],
          series: [
            {
              map: "map",
              type: "effectScatter",
              // silent: true,
              coordinateSystem: "geo",
              // datasetIndex: 0,
              // geoIndex: 0,
              // selectedMode: false,
              // focusNodeAdjacency: false,
              // label: {
              // 	show: true,
              // 	width: 13,
              // 	height: 15,
              // 	fontSize: 0,
              // 	color: "#1DF9FC",
              // 	backgroundColor: {
              // 		image: iconRQ
              // 	},
              // },
              label: {
                formatter: (param) => {
                  return param.name;
                },
                position: "top",
                fontSize: "10",
                color: "#fff",
                show: true,
              },
              tooltip: {
                show: false,
              },
              tooltip: {
                position: "right",
                textStyle: {
                  // color:'#fff',
                },
                // backgroundColor:'rgba(184,189,192,1)',
                formatter: function (param) {
                  // debugger
                  let deviceCount = t.deviceCount.find(
                    (d) => d.orgId == param.data.id
                  );
                  // console.info(deviceCount)
                  if (deviceCount) {
                    return `<div >
                  <div> ${param.data.name} </div>
                  <div>视频监控设备：${
                    deviceCount.monitorCount ? deviceCount.monitorCount : 0
                  } </div>
                  <div>消防预警设备：${
                    deviceCount.fireCount ? deviceCount.fireCount : 0
                  } </div>
                  <div>环境监测设备：${
                    deviceCount.environmentCount
                      ? deviceCount.environmentCount
                      : 0
                  } </div>
                  </div>`;
                  } else {
                    return param.data.name;
                  }
                },
              },
              itemStyle: {
                color: "#ddb926",
              },
              symbol: this.icon, //自定义图标
              symbolSize: [10, 10],
              // encode: {
              //   value: 2,
              // },
              // showEffectOn: "emphasis", //关闭涟漪
              // hoverEffectOn: true,
              rippleEffect: {
                brushType: "fill",
                period: 0,
                number: 0,
              },
              data: this.coordinates,
            },
          ],
        };
        if (option && typeof option === "object") {
          this.myChart.setOption(option);
        }
      });
    },
    windowResize() {
      this.myChart && this.myChart.resize();
    },
  },
};
</script>
<style scoped src="./../css/index.css"></style>
<style lang="scss" scoped>
.content {
  display: flex;

  margin-bottom: 20px;
  margin-left: 5px;
  margin-right: 5px;
  border: solid 1px #b8bdc088;

  & > span {
    margin-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 30px;
    color: rgb(245, 245, 245);
    font-size: 14px;
  }

  & > span:first-child {
    width: 100px;
    background-color: #b8bdc088;
    text-align: center;
  }
}
.t_title {
  position: absolute;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-left: 5%;
  margin-top: calc(5% + 18px);
}
</style>