yyky_web/src/views/equBigData/index.vue

<template>
  <div id="data-view-container">
    <top-header />
    <div class="main">
      <div class="left">
        <div class="left-top">
          <dv-border-box-13>
            <Border-Item title="设备总览">
              <equTotal v-if="equDataFlag" :data="equTotalData" />
            </Border-Item>
          </dv-border-box-13>
        </div>
        <div class="left-content">
          <dv-border-box-13>
            <Border-Item title="设备型号总览"
              ><Left-Chart-1 v-if="deviceTypeflag" :datalist="deviceTypeList"
            /></Border-Item>
          </dv-border-box-13>
        </div>
        <div class="left-under">
          <dv-border-box-13>
            <Border-Item title="用户年龄总览"
              ><Left-chart-under v-if="userAgeFlag" :dataList="userAgeList"
            /></Border-Item>
          </dv-border-box-13>
        </div>
      </div>
      <div class="content">
        <!-- 22 -->
        <equ-map v-loading="mapLoading" @callback="initMap" />
        <div class="left-under">
          <dv-border-box-13>
            <Border-Item title="报警列表"
              ><Right-Bottom v-if="alarmListFlag" :data="alarmList"
            /></Border-Item>
          </dv-border-box-13>
        </div>
      </div>
      <div class="right">
        <div class="left-top">
          <dv-border-box-13>
            <Border-Item title="设备总览">
              <bbb
                v-if="userTotalFlag && userDataFlag"
                :number="userTotalData"
                :data="userData"
            /></Border-Item>
          </dv-border-box-13>
        </div>
        <div class="left-content">
          <dv-border-box-13>
            <Border-Item title="月新增设备"
              ><Left-Chart-2
                v-if="xylistFlag"
                :xlist="xDataList"
                :ylist="yDataList"
            /></Border-Item>
          </dv-border-box-13>
        </div>
        <div class="left-under">
          <dv-border-box-13>
            <Border-Item title="月新增用户">
              <Middle-Chart
                v-if="xyUserFlag"
                :xlist="xUserList"
                :ylist="yUserList"
            /></Border-Item>
          </dv-border-box-13>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topHeader from "./topHeader";
import LeftChart1 from "./LeftChart1";
import LeftChart2 from "./LeftChart2";
import LeftChartUnder from "./LeftChartUnder";
import equMap from "./Maps";

import BorderItem from "./BottomCharts";
import equTotal from "./equTotal";
import bbb from "./bbb";

import RightBottom from "./RightBottom";
import MiddleChart from "./MiddleChart";

import {
  deviceView,
  userAgeAll,
  count,
  deviceOver,
  alarmStatusList,
  addDevice,
  addUser,
  mapGpsView,
  deviceType,
} from "@/api/system/equdata";

export default {
  name: "DataView",
  components: {
    topHeader,
    LeftChart1,
    LeftChart2,
    BorderItem,
    equMap,
    equTotal,
    bbb,
    RightBottom,
    LeftChartUnder,
    MiddleChart,
  },
  data() {
    return {
      mapLoading: false,
      equTotalData: {},
      equDataFlag: false,
      userAgeFlag: false,
      userTotalFlag: false,
      userDataFlag: false,
      alarmListFlag: false,
      xylistFlag: false,
      xyUserFlag: false,
      deviceTypeflag: false,
      userAgeList: [],
      alarmList: [],
      xDataList: [],
      yDataList: [],
      xUserList: [],
      yUserList: [],
      userTotalData: 0,
    };
  },
  mounted() {
    this.deviceView();
    this.userAgeAll();
    this.userTotal();
    this.getUserData();
    this.getAlarmStatusList();
    this.getEquData();
    this.getAddUser();
    this.getDeviceType();
  },
  methods: {
    toggleFullscreen() {
      if (this.isFullscreen) {
        // 退出全屏模式
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
        this.isFullscreen = false;
      } else {
        // 进入全屏模式
        const content = document.querySelector("#data-view-container");
        // console.log(content,888);
        // return
        if (content.requestFullscreen) {
          content.requestFullscreen();
        } else if (content.mozRequestFullScreen) {
          content.mozRequestFullScreen();
        } else if (content.webkitRequestFullscreen) {
          content.webkitRequestFullscreen();
        }
        this.isFullscreen = true;
      }
    },
    getDeviceType() {
      deviceType().then((res) => {
        this.deviceTypeList = res.data.list;
        this.deviceTypeflag = true;
      });
    },
    getAddUser() {
      addUser().then((res) => {
        let xlist = res.data.map((item) => item.month);
        let ylist = res.data.map((item) => item.count);
        this.xUserList = xlist;
        this.yUserList = ylist;
        this.xyUserFlag = true;
      });
    },
    getEquData() {
      addDevice().then((res) => {
        let xlist = res.data.map((item) => item.month);
        let ylist = res.data.map((item) => item.count);
        this.xDataList = xlist;
        this.yDataList = ylist;
        this.xylistFlag = true;
      });
    },
    deviceView() {
      deviceView().then((res) => {
        this.equTotalData = res.data;
        this.equDataFlag = true;
      });
    },
    userTotal() {
      count().then((res) => {
        this.userTotalData = res.data;
        this.userTotalFlag = true;
      });
    },
    getUserData() {
      deviceOver().then((res) => {
        this.userData = res.data;
        this.userDataFlag = true;
      });
    },
    userAgeAll() {
      userAgeAll().then((res) => {
        this.userAgeList = res.data.list;
        this.userAgeFlag = true;
      });
    },
    getAlarmStatusList() {
      alarmStatusList().then((res) => {
        this.alarmList = res.data
        // .map((item) => {
        //   let hideName = "";
        //   if (item.name.length >= 2) {
        //     hideName = item.name[0] + "*" + item.name.substring(2);
        //   }
        //   return {
        //     ...item,
        //     name: hideName,
        //   };
        // });
        this.alarmListFlag = true;
      });
    },
    initMap(AMap) {
      this.AMap = AMap;
      this.map = new AMap.Map("map", {
        resizeEnable: true,
        // viewMode: "3D", // 是否为3D地图模式
        zoom: 3.85, // 初始化地图级别
        center: [101.835078, 42.90488], // 初始化地图中心点位置
        mapStyle: "amap://styles/darkblue", //地图样式
      });
      var cluster;
      const gridSize = 60;
      // 数据中需包含经纬度信息字段 lnglat
      var points = [
        // { lnglat: ["116.86846822500229", "33.904682432073166"] },
        // { lnglat: ["116.85693472623825", "33.88754011287255"] },
        // { lnglat: ["116.85693472623825", "33.88754011287255"] },
        // { lnglat: ["116.85668259859085", "33.88756039064183"] },
        // { lnglat: ["116.8569615483284", "33.887618689228496"] },
        // { lnglat: ["116.85713320970535", "33.887466605958934"] },
        // { lnglat: ["116.85698837041855", "33.88756546008415"] },
        // { lnglat: ["116.85688644647598", "33.88763389755545"] },
        // { lnglat: ["108.7104383111", "34.03344626696758"] },
        // { lnglat: ["108.70837301015854", "34.03073918476941"] },
        // { lnglat: ["108.70164602994919", "34.00430204307751"] },
        // { lnglat: ["108.70918840169907", "34.02465331926583"] },
        // { lnglat: ["108.70991796255112", "34.02430859718817"] },
        // { lnglat: ["108.70207518339157", "34.00304228666131"] },
        // { lnglat: ["108.70090574026108", "34.00421586255809"] },
        // { lnglat: ["108.70879143476486", "34.0323538021479"] },
      ];
      mapGpsView().then((res) => {
        points = res.data;
        if (cluster) {
          cluster.setMap(null);
        }
        //默认样式
        cluster = new AMap.MarkerCluster(this.map, points, {
          gridSize: gridSize,
        });
      });

      // this.mapLoading = false;
      // this.secherPlace(AMap);
      // this.districtSearch(AMap);
      // this.ruler(AMap);
      // this.mapZoomChange();
      // this.aaa();
    },
    // initMap(AMap) {
    //   this.AMap = AMap;
    //   this.map = new AMap.Map("map", {
    //     resizeEnable: true,
    //     // viewMode: "3D", // 是否为3D地图模式
    //     zoom: 3.85, // 初始化地图级别
    //     center: [101.835078, 42.90488], // 初始化地图中心点位置
    //   });
    //   // this.mapLoading = false;
    //   // this.secherPlace(AMap);
    //   // this.districtSearch(AMap);
    //   // this.ruler(AMap);
    //   this.mapZoomChange();
    //   this.aaa();
    // },
    // 索引点聚合
    // drawCluster(isCheck, isCheck2) {
    //   // console.log(this.$refs.tree.getCheckedKeys(true));
    //   if (this.cluster) {
    //     this.cluster.setMap(null);
    //   }
    //   let points = [
    //     {
    //       code: 862607059021807,
    //       equNo: "SHX-JG05276GS1932",
    //       onlineState: 0,
    //       storeName: "第1营业店（上海嘉定）",
    //       storeErpCode: "03-01-01",
    //       deptName: "通用设备二部",
    //       lnglat: ["121.81513906780002", "30.89272014115498"],
    //     },
    //     {
    //       code: 866041042138963,
    //       equNo: "SHX-SG01142860SJ",
    //       onlineState: 0,
    //       storeName: "上海维修组",
    //       storeErpCode: "08-01-01",
    //       deptName: "资产中心",
    //       lnglat: ["120.61801385657444", "31.977446558941004"],
    //     },
    //     {
    //       code: 867383057214142,
    //       equNo: "SHX-SG08898S-65XC",
    //       onlineState: 0,
    //       storeName: "第1营业店（上海嘉定）",
    //       storeErpCode: "03-01-01",
    //       deptName: "通用设备二部",
    //       lnglat: ["121.03558147655212", "31.126224206828198"],
    //     },
    //     {
    //       code: 864513041445245,
    //       equNo: "SHX-JG37778JCPT1412DC",
    //       onlineState: 0,
    //       storeName: "第5营业店（上海闵行）",
    //       storeErpCode: "03-03-08",
    //       deptName: "通用设备二部",
    //       lnglat: ["121.82208391421668", "30.85699004008208"],
    //     },
    //     {
    //       code: 867032059016076,
    //       equNo: "SHX-SG07695BT28ERT",
    //       onlineState: 0,
    //       storeName: "第3营业店（上海浦东）",
    //       storeErpCode: "03-01-40",
    //       deptName: "通用设备二部",
    //       lnglat: ["121.5704633089994", "29.894328624226418"],
    //     },
    //     {
    //       code: 868142047179180,
    //       equNo: "SHX-JG46091S0812E",
    //       onlineState: 0,
    //       storeName: "第1营业店（上海嘉定）",
    //       storeErpCode: "03-01-01",
    //       deptName: "通用设备二部",
    //       lnglat: ["121.31930274336634", "31.245171826552806"],
    //     },
    //     {
    //       code: 867383057182588,
    //       equNo: "SHX-JG55617S0607",
    //       onlineState: 0,
    //       storeName: "第1营业店（上海嘉定）",
    //       storeErpCode: "03-01-01",
    //       deptName: "通用设备二部",
    //       lnglat: ["121.02616661110348", "31.22516500695246"],
    //     },
    //   ];;
    //   // this.mapLoading = true;
    //   // 写接口
    //   // const equInfo2 = await this.getMapInfo(checkNodeKey, 0);
    //   // const equInfo1 = await this.getMapInfo(checkNodeKey, 1);
    //   // const { terminalList, data } = equInfo1.data;
    //   this.map.setZoomAndCenter(3.85, [101.835078, 42.90488]);
    //   const getNodes = (context) => {
    //     console.log('context',context);
    //     const clusterData = context.clusterData; // 聚合中包含数据
    //     console.log('clusterData',clusterData);
    //     const index = context.index; // 聚合的条件
    //     console.log("index:", index);
    //     const indexs = ["deptName", "storeErpCode", "equNo"];
    //     const i = indexs.indexOf(index.mainKey);
    //     let text =
    //       i === 0 ? clusterData[0][index.mainKey] : clusterData[0].storeName;
    //     if (i <= 1) {
    //       const extra = '<p class="showCount">' + context.count + "</p>";
    //       text = '<p class="showName">' + text + "</p>";
    //       text += extra;
    //     }
    //     const style = {
    //       index: i,
    //       text,
    //     };
    //     return style;
    //   };

    //   const getPosition = (context) => {
    //     console.log(context);
    //     const key = context.index.mainKey;
    //     const dataItem = context.clusterData && context.clusterData[0];
    //     const clusterName = dataItem[key];
    //     if (!clusterObj[clusterName]) {
    //       return null;
    //     }
    //     const point = clusterObj[clusterName].point;
    //     const centerLnglat = new this.AMap.LngLat(point[0], point[1]);
    //     return centerLnglat;
    //   };
    //   // 自定义聚合点样式
    //   const renderClusterMarker = (context) => {
    //     const marker = context.marker; // 聚合点标记对象
    //     const nodesObj = getNodes(context);
    //     // 自定义点标记样式
    //     const div = document.createElement("div");
    //     if (nodesObj.index === 0) {
    //       div.className = "amap-cluster amap-cluster-dep";
    //     }
    //     if (nodesObj.index === 1) {
    //       div.className = "amap-cluster amap-cluster-shop";
    //     }
    //     if (nodesObj.index <= 1) {
    //       // 聚合点自定义点击事件
    //       marker.on("click", (e) => {
    //         // console.log(e);
    //         /* let curZoom = this.map.getZoom();
    //         if (curZoom < 12) {
    //           curZoom += 1;
    //         } */
    //         let curZoom = this.map.getZoom();
    //         if (nodesObj.index === 0) {
    //           curZoom = 4.9;
    //         } else {
    //           curZoom += 1;
    //         }
    //         this.map.setZoomAndCenter(curZoom, e.lnglat);
    //       });

    //       div.innerHTML = nodesObj.text;
    //       marker.setContent(div);
    //     } else {
    //       // 非聚合点
    //       const dataItem = context.clusterData[0];
    //       marker.setIcon(require(`./img/online-${dataItem.onlineState}.png`));
    //     }

    //     // 自定义聚合点标记显示位置
    //     const position = getPosition(context);
    //     if (position) {
    //       marker.setPosition(position);
    //     }
    //     marker.setAnchor("center");
    //   };
    //   const clusterIndexSet = {
    //     equNo: {
    //       minZoom: 9,
    //       maxZoom: 22,
    //     },
    //   };
    //   /* eslint-disable no-new */
    //   this.cluster = new this.AMap.IndexCluster(this.map, points, {
    //     renderClusterMarker,
    //     clusterIndexSet,
    //   });
    //   this.mapLoading = false;
    // },
    // 监听地图缩放
    mapZoomChange() {
      this.map.on("zoomchange", () => {
        const curZoom = this.map.getZoom();
        console.log(curZoom);
        if (curZoom < 12) {
          this.map.clearInfoWindow();
        }
      });
    },

    aaa(data, isCheck, isCheck2) {
      if (this.cluster) {
        this.cluster.setMap(null);
      }
      let points = [];
      let clusterObj = {};

      points = [
        {
          code: 862607059021807,
          equNo: "SHX-JG05276GS1932",
          onlineState: 0,
          storeName: "第1营业店（上海嘉定）",
          storeErpCode: "03-01-01",
          deptName: "通用设备二部",
          lnglat: ["121.81513906780002", "30.89272014115498"],
        },
        {
          code: 866041042138963,
          equNo: "SHX-SG01142860SJ",
          onlineState: 0,
          storeName: "上海维修组",
          storeErpCode: "08-01-01",
          deptName: "资产中心",
          lnglat: ["120.61801385657444", "31.977446558941004"],
        },
        {
          code: 867383057214142,
          equNo: "SHX-SG08898S-65XC",
          onlineState: 0,
          storeName: "第1营业店（上海嘉定）",
          storeErpCode: "03-01-01",
          deptName: "通用设备二部",
          lnglat: ["121.03558147655212", "31.126224206828198"],
        },
        {
          code: 864513041445245,
          equNo: "SHX-JG37778JCPT1412DC",
          onlineState: 0,
          storeName: "第5营业店（上海闵行）",
          storeErpCode: "03-03-08",
          deptName: "通用设备二部",
          lnglat: ["121.82208391421668", "30.85699004008208"],
        },
        {
          code: 867032059016076,
          equNo: "SHX-SG07695BT28ERT",
          onlineState: 0,
          storeName: "第3营业店（上海浦东）",
          storeErpCode: "03-01-40",
          deptName: "通用设备二部",
          lnglat: ["121.5704633089994", "29.894328624226418"],
        },
        {
          code: 868142047179180,
          equNo: "SHX-JG46091S0812E",
          onlineState: 0,
          storeName: "第1营业店（上海嘉定）",
          storeErpCode: "03-01-01",
          deptName: "通用设备二部",
          lnglat: ["121.31930274336634", "31.245171826552806"],
        },
        {
          code: 867383057182588,
          equNo: "SHX-JG55617S0607",
          onlineState: 0,
          storeName: "第1营业店（上海嘉定）",
          storeErpCode: "03-01-01",
          deptName: "通用设备二部",
          lnglat: ["121.02616661110348", "31.22516500695246"],
        },
      ];
      clusterObj = {
        "03-04-40": {
          nodeId: 200408003032,
          nodeName: "第12营业店（苏州昆山）",
          nodeErpCode: "03-04-40",
          point: ["121.01714", "31.35137"],
        },
      };
      console.log(clusterObj, "clusterObj");
      this.map.setZoomAndCenter(3.85, [101.835078, 42.90488]);
      const getNodes = (context) => {
        console.log("context", context);
        const clusterData = context.clusterData; // 聚合中包含数据
        const index = context.index; // 聚合的条件
        console.log("index:", index);
        const indexs = ["deptName", "storeErpCode", "equNo"];
        const i = indexs.indexOf(index.mainKey);
        let text =
          i === 0 ? clusterData[0][index.mainKey] : clusterData[0].storeName;
        if (i <= 1) {
          const extra = '<p class="showCount">' + context.count + "</p>";
          text = '<p class="showName">' + text + "</p>";
          text += extra;
        }
        const style = {
          index: i,
          text,
        };
        return style;
      };

      const getPosition = (context) => {
        console.log(context, "121212");
        const key = context.index.mainKey;
        const dataItem = context.clusterData && context.clusterData[0];
        const clusterName = dataItem[key];
        if (!clusterObj[clusterName]) {
          return null;
        }
        const point = clusterObj[clusterName].point;
        const centerLnglat = new this.AMap.LngLat(point[0], point[1]);
        return centerLnglat;
      };
      // 自定义聚合点样式
      const renderClusterMarker = (context) => {
        const marker = context.marker; // 聚合点标记对象
        console.log(marker, "45566");
        const nodesObj = getNodes(context);
        console.log(nodesObj, "nodesObj");
        // 自定义点标记样式
        const div = document.createElement("div");
        if (nodesObj.index === 0) {
          div.className = "amap-cluster amap-cluster-dep";
        }
        if (nodesObj.index === 1) {
          div.className = "amap-cluster amap-cluster-shop";
        }
        if (nodesObj.index <= 1) {
          // 聚合点自定义点击事件
          marker.on("click", (e) => {
            // console.log(e);
            /* let curZoom = this.map.getZoom();
            if (curZoom < 12) {
              curZoom += 1;
            } */
            let curZoom = this.map.getZoom();
            if (nodesObj.index === 0) {
              curZoom = 4.9;
            } else {
              curZoom += 1;
            }
            this.map.setZoomAndCenter(curZoom, e.lnglat);
          });
          if (nodesObj.index === 1) {
            marker.on("mouseover", () => {
              this.marker = marker;
              const key = context.index.mainKey;
              const dataItem = context.clusterData && context.clusterData[0];
              const clusterName = dataItem[key];
              if (!clusterObj[clusterName]) {
                return null;
              }
              const nodeId = clusterObj[clusterName].nodeId;
              let showStatus = false;
              if (this.shopInfoWindow) {
                showStatus = this.shopInfoWindow.getIsOpen();
              }
              if (!showStatus) {
                // 请求数据
                getMapStoreInfo({ nodeId }).then((res) => {
                  if (res) {
                    const data = res.data;
                    this.openShopInfoWindow(data);
                  }
                });
              }
            });
          }
          div.innerHTML = nodesObj.text;
          marker.setContent(div);
        } else {
          // 非聚合点
          const dataItem = context.clusterData[0];
          console.log(dataItem, "2323");
          marker.setIcon(require(`./img/online-${dataItem.onlineState}.png`));

          // 自定义点击事件
          marker.on("click", (e) => {
            this.marker = marker;
            const dataItem = context.clusterData[0];
            const code = context.clusterData[0].code;

            // 数据请求
            getEquInfo(code).then(async (res) => {
              if (res) {
                this.equData = res.data;
                this.equAddress = "根据经纬度查询地址失败";
                this.equAddress = await this.getAddress(dataItem.lnglat);
                this.openEquInfoWindow(this.equData, this.equAddress);
              }
            });
          });
        }

        // 自定义聚合点标记显示位置
        const position = getPosition(context);
        if (position) {
          marker.setPosition(position);
        }
        marker.setAnchor("center");
      };
      const clusterIndexSet = {
        deptName: {
          minZoom: 2,
          maxZoom: 4.8,
        },
        storeErpCode: {
          minZoom: 4.8,
          maxZoom: 9,
        },
        equNo: {
          minZoom: 9,
          maxZoom: 22,
        },
      };
      /* eslint-disable no-new */
      this.cluster = new this.AMap.IndexCluster(this.map, points, {
        renderClusterMarker,
        clusterIndexSet,
      });
      this.mapLoading = false;
      console.log(this.cluster, 777777);
    },
    // initMap(AMap) {
    //   this.AMap = AMap;
    //   this.map = new AMap.Map("map", {
    //     // 设置地图容器id
    //     // viewMode: "3D", // 是否为3D地图模式
    //     zoom: 5, // 初始化地图级别
    //     center: [105.602725, 37.076636], // 初始化地图中心点位置
    //     mapStyle: "amap://styles/darkblue",
    //   });
    //   this.clickMarker = new this.AMap.Marker();
    //   this.addMapMarkers(this.AMap, {
    //     equList: [
    //       { lng: 105.602725, lat: 37.076636 },
    //       { lng: 105.622725, lat: 37.75219686835205 },
    //       // { lng: 154.8098755478859, lat: 18.75219686835205 },
    //       // { lng: 183.8098755478859, lat: 34.75219686835205 },
    //       // { lng: 178.8098755478859, lat: 3.75219686835205 },
    //     ],
    //   });
    //   // this.getEquMap();
    //   // 暂时放这里
    //   this.map.on("click", (e) => {
    //     console.log(e, "e");
    //     this.regeoCode(e.lnglat);
    //   });
    // },
    // // 地图覆盖物
    // addMapMarkers(AMap, data) {
    //   // console.log(data,'data');
    //   // // 项目中心点
    //   // const centerMarker = new AMap.Marker({
    //   //   position: new AMap.LngLat(data.projectLng, data.projectLat),
    //   //   offset: new AMap.Pixel(-20, -20),
    //   //   icon: require(`@/assets/map-icon/center.png`),
    //   // });
    //   // 设备分布点
    //   this.markers = [];
    //   data.equList.forEach((item) => {
    //     const marker = new AMap.Marker({
    //       position: new AMap.LngLat(item.lng, item.lat),
    //       offset: new AMap.Pixel(-13, -30),
    //       // icon: require(`@/assets/map-icon/${item.classifyCode}-${
    //       //   item.online === 0 ? "GRAY" : item.flag ? "DEFAULT" : "DANGER"
    //       //   }.png`),
    //       icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
    //       anchor: "bottom-center",
    //       extData: {
    //         id: item.id,
    //         equNo: item.equNo,
    //         netCode: data.netCode,
    //         classifyCode: item.classifyCode,
    //         flag: item.flag,
    //         online: item.online,
    //       },
    //     });
    //     this.markers.push(marker);
    //     this.map.add(marker);
    //   });
    //   // console.log('this.markers',this.markers);
    //   // const overlayGroups = new AMap.OverlayGroup(this.markers);
    //   // // 比例尺
    //   // // const scale = new AMap.Scale();

    //   // this.map.add(overlayGroups);
    //   // this.map.add(centerMarker);
    //   // this.map.addControl(scale);

    //   // // 鼠标点击marker弹出自定义的信息窗体
    //   // overlayGroups.eachOverlay((overlay, index, collections) => {
    //   //   const extData = overlay.getExtData();
    //   //   overlay.on("click", () => {
    //   //     const params = {
    //   //       netCode: extData.netCode,
    //   //       equNo: extData.equNo,
    //   //     };
    //   //     getEquInfo(params).then((res) => {
    //   //       const info = res.data;
    //   //       const id = extData.id;
    //   //       const currentMarker = this.markers.find(
    //   //         (item) => item._opts.extData.id === id
    //   //       );
    //   //       currentMarker.setIcon(
    //   //         require(`@/assets/map-icon/${extData.classifyCode}-${
    //   //           info.online === 0 ? "GRAY" : extData.flag ? "DEFAULT" : "DANGER"
    //   //         }.png`)
    //   //       );
    //   //       const onlineEnum = {
    //   //         0: "离线",
    //   //         1: "在线",
    //   //       };
    //   //       info.projectName = data.projectName;
    //   //       const infoWindow = new AMap.InfoWindow({
    //   //         content: `<div class="equ-info-box">
    //   //               <p class="equ-info-item"><span class="label">设备编号</span><span class="value" id="equNo">${
    //   //                 info.equNo
    //   //               }</span></p>
    //   //               <p class="equ-info-item"><span class="label">当前设备状态</span><span class="value tag">${
    //   //                 onlineEnum[info.online]
    //   //               }</span></p>
    //   //               <p class="equ-info-item"><span class="label">累计报警次数</span><span class="value link" onclick="goNextPage(this, 'alarmStat')" data-equNo="${
    //   //                 info.equNo
    //   //               }" data-name="${info.projectName}">${
    //   //           info.alarmTotal
    //   //         }</span></p>
    //   //               <p class="equ-info-item"><span class="label">最近定位时间</span><span class="value">${
    //   //                 info.positionTime
    //   //               }</span></p>
    //   //               <p class="equ-info-item"><span class="label">TBox品牌</span><span class="value">${
    //   //                 info.brand
    //   //               }</span></p>
    //   //               <p class="equ-info-item"><span class="label">TBox编号</span><span class="value">${
    //   //                 info.gpsId
    //   //               }</span></p>
    //   //               </div>`,
    //   //         anchor: "top-center",
    //   //       });
    //   //       infoWindow.open(this.map, overlay.getPosition());
    //   //     });
    //   //   });
    //   // });

    //   // // 地图的3km圆
    //   // const circle = new AMap.Circle({
    //   //   center: new AMap.LngLat(data.projectLng, data.projectLat), // 圆心位置
    //   //   radius: data.radius * 1000, // 半径
    //   //   strokeColor: "#367EF5", // 线颜色
    //   //   strokeOpacity: 0.8, // 线透明度
    //   //   strokeWeight: 1, // 线粗细度
    //   //   fillColor: "#18FFFC", // 填充颜色
    //   //   fillOpacity: 0.1, // 填充透明度
    //   // });
    //   // this.map.add(circle);
    //   // this.map.setFitView();
    //   /* this.map.on("click", (e) => {
    //     this.regeoCode(e.lnglat);
    //   }); */
    // },
  },
};
</script>

<style lang="scss">
#data-view-container {
  width: 100%;
  // height: 100%;
  min-height: calc(100vh - 84px);
  background-color: #030409;
  color: #fff;
  overflow: hidden;
  background-image: url("./img/bg.png");
  background-size: 100%;
  background-repeat: no-repeat;

  .main {
    display: flex;
    padding: 0 10px 10px 10px;
    box-sizing: border-box;
    min-height: 85vh;
    .left {
      width: 30%;
      // box-sizing: border-box;
      .left-top {
        height: 30%;
        margin-top: 10px;
      }
      .left-content {
        height: 30%;
        margin-top: 10px;
        .left-border {
        }
      }
      .left-under {
        margin-top: 10px;
        height: 30%;
        .left-border {
        }
      }
    }

    // .content {
    //   flex: 1;
    // }
    .content {
      // width: 30%;
      flex: 1;

      // box-sizing: border-box;

      .left-under {
        height: 40%;
        // margin-top: 10px;
      }
    }
    .right {
      width: 30%;
      // box-sizing: border-box;
      .left-top {
        height: 30%;
        margin-top: 10px;
      }
      .left-content {
        height: 30%;
        margin-top: 10px;
        .left-border {
        }
      }
      .left-under {
        margin-top: 10px;
        height: 30%;
        .left-border {
        }
      }
    }
  }
  ::v-deep.amap-cluster {
    position: relative;
    color: #fff;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    text-align: center;
    &::after {
      content: "";
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: 6px;
      border-bottom-width: 0;
      left: 50%;
      bottom: -6px;
      transform: translate(-50%, 0);
    }
  }
  ::v-deep.amap-cluster-dep {
    width: 140px;
    background: #d11128;
    &::after {
      border-top-color: #d11128;
    }
  }
  ::v-deep.amap-cluster-shop {
    width: 170px;
    background: #f25668;
    &::after {
      border-top-color: #f25668;
    }
  }
}
</style>