Project_yhfu/src/views/datacenter.vue

<!--信息中心-->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div class="leftbar w-10" ref="left" style="width: 13rem !important">
        <div class="forthis">
          <dv-border-box-13
            backgroundColor="rgba(12, 19, 38, .90)"
            style="padding-bottom: 1rem"
          >
            <img
              src="../assets/images/integrated/light.png"
              style="width: 100%; margin-top: 0.4rem"
            />

            <div class="i-list-con h-78">
              <div class="i-list-con h-65" v-show="showSearch == true">
                <div class="head-container" v-show="showSearch == true">
                <el-input
                  v-model="searchName"
                  placeholder="请输入名称"
                  @blur="searchByName()"
                  clearable
                  size="small"
                  prefix-icon="el-icon-search"
                  style="margin-bottom: 20px"
                />
              </div>
              </div>
              <div class="d-l-con-icon">
                <div
                  class="icon-con"
                  :class="{ on: iconCurrentIndex == item.resourceTable }"
                  v-for="(item, index) in resourcesList"
                  v-on:click="fireControlViewPoint(item.type, searchName)"
                >
                  <div
                    class="iconfont icon icon-normal"
                    :class="item.icon"
                    :style="'background:' + item.bg"
                  ></div>
                  <div class="icon-text">
                    <h6>{{ item.num }}</h6>
                    <h5>{{ item.name }}</h5>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
      </div>
      <!-- 地图 -->
      <supermap ref="supermap" style="width: 100%; height: 100vh"></supermap>
      <!--      <button @click="showEventInfo1" style="position: absolute; right: 50%;top: 45%;z-index: 1000;">弹层事件演示用按钮-->
      <!--      </button>-->
      <!-- 右侧 -->
      <div class="rightbar" ref="right" v-if="showSearch == true">
        <div class="forthis">
          <dv-border-box-13
            backgroundColor="rgba(12, 19, 38, .90)"
            style="padding-bottom: 1rem"
          >
            <img
              src="../assets/images/integrated/light.png"
              style="width: 100%; margin-top: 0.4rem"
            />
            <div class="this-title">
              <span>数据分布</span>
              <dv-decoration-3
                style="width: 150px; height: 15px; margin-right: 1rem"
              />
            </div>
            <div class="i-list-con h-73">
              <div class="overflow-y" style="height: 39vh">
                <div
                  class="d-l-con"
                  :class="{ on: listCurrentIndex == item.deptId }"
                  v-for="(item, index) in deptGroupList"
                  v-on:click="indentleftByDeptIdSetMarkers(item.deptId)"
                >
                  <div class="d-l-l-text">
                    <i class="i-small"></i>
                    <h4>{{ item.deptName }}</h4>
                  </div>
                  <div class="d-l-l-count">{{ item.count }}</div>
                </div>
              </div>
              <div class="overflow-y" style="height: 34vh">
                <div id="data-chart" style="width: 100%; height: 34vh"></div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
      </div>
      <vBottomMenu ref="bottomMenu"></vBottomMenu>
    </div>
    <eventLocation ref="eventLocation"></eventLocation>
    <TVWall ref="TVWall"></TVWall>
  </div>
</template>

<script>
import {
  getResource,
  fireControlViewList,
  getResourcePoint,
  fireControlViewPoint,
  getResourcePointByDeptId,
  getPointByDeptId,
} from "@/api/datacenter";

import supermap from "@/components/supermap-2.5d"; //超图
import vheader from "@/components/v-header.vue"; //一体化共用头部
import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
import TVWall from "@/components/TVWall.vue"; //电视墙弹窗
import { getIconBg } from "@/api/components/sookaMapIcon"; //资源底色控制文件

// import echarts from 'echarts'
let echarts = require("echarts");
export default {
  components: {
    supermap,
    vheader,
    vBottomMenu,
    eventLocation,
    TVWall,
  },
  created() {
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    window.showDialog = this.showDialog;
    window.choseLayerSwitching = this.choseLayerSwitching;
    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  },
  mounted() {
    // this.getResource()
    this.fireControlViewList();
    this.bottomMenuList(); //获取底部公共组件消息和任务
  },
  data() {
    return {
      // 搜索框
      showSearch: false,
      // 搜索名称
      searchName: undefined,
      // 搜索类型
      searchType: undefined,
      iconCurrentIndex: "",
      listCurrentIndex: "",
      markersList: [],
      iframeBoo: true,
      open: false,
      iframeVue: null,
      activeName: "info",
      radio: "1",
      //类型
      resourceTable: "",
      //左侧资源
      resourcesList: [],
      //右侧资源
      deptGroupList: [],
      source: [],
    };
  },
  watch: {
    // // 根据名称筛选资源点位
    // searchName(searchName) {
    //   // alert(val)
    //   this.fireControlViewPoint(this.searchType, searchName);
    // },
  },
  methods: {
    // 根据名称筛选资源点位
    searchByName() {
      this.$modal.msgSuccess("正在查询，请稍后...");
      this.fireControlViewPoint(this.searchType, this.searchName);
    },
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    bottomMenuList() {
      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
    },
    showDialog(click) {
      if (click == "eventLocation") {
        this.$refs.eventLocation.showEventLocation();
        this.$refs.supermap.isEditableLayers = false;
        this.$refs.bottomMenu.showChild = false;
      } else if (click == "editableLayers") {
        this.$refs.bottomMenu.showChild = false;
        if (!this.$refs.supermap.isEditableLayers) {
          this.$refs.supermap.isEditableLayers = true;
        } else {
          this.$refs.supermap.isEditableLayers = false;
        }
      } else if (click == "layerSwitching") {
        this.$refs.supermap.isEditableLayers = false;
        if (!this.$refs.bottomMenu.showChild) {
          this.$refs.bottomMenu.showChild = true;
        } else {
          this.$refs.bottomMenu.showChild = false;
        }
      } else if (click == "TVWall") {
        this.$refs.TVWall.showTVWall();
        this.$refs.supermap.isEditableLayers = false;
        this.$refs.bottomMenu.showChild = false;
      }
    },
    //选择图层
    choseLayerSwitching(url, isClear) {
      this.$refs.supermap.layerSwitching(url, isClear);
    },
    //选择图层(传递数组)
    choseLayerSwitchingList(urlList) {
      this.$refs.supermap.layerSwitchingList(urlList);
    },
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    //数据分布chart
    dataChat() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("data-chart"));
      // 绘制图表
      const dfColor = ["#92E1FF", "#0097FB", "#30ECA6", "#FFC227", "#FF4848"];
      myChart.setOption({
        dataset: {
          source: this.source,
        },
        tooltip: {
          trigger: "item",
        },
        grid: {
          top: "5%",
          left: "2%",
          // right: "4%",
          bottom: "-15%",
          width: "75%",
          containLabel: true,
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: {
          type: "category", // 不设置类目轴，抽离的dataset数据展示不出来
          inverse: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#5deaff",
              fontSize: "12",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },

        series: [
          {
            type: "bar",
            animationCurve: "easeOutBack",
            barWidth: 5,
            label: {
              show: true,
              position: "right",
              offset: [0, 0],
              color: "#88dfd5",
              // fontSize: "12",
              style: {
                fill: "#fff",
              },
            },
            backgroundBar: {
              show: true,
              style: {
                fill: "rgba(97,152,255,0.20)",
              },
            },
            barStyle: {
              stroke: "rgba(41,244,236,1)",
            },
            gradient: {
              color: ["rgba(41,244,236,1)", "rgba(41,244,236,0)"],
            },
            itemStyle: {
              label: {
                show: true,
              },
              labelLine: {
                show: false,
              },
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(41,244,236,0)",
                },
                {
                  offset: 1,
                  color: "rgba(41,244,236,.5)",
                },
              ]),
              borderColor: "#a2f9f7",
              shadowBlur: 16,
              shadowColor: "#a2f9f7",
            },
          },
        ],
      });
    },
    // 弹层方法
    showEventInfo1() {
      this.eventInfoVisible1 = true;
    },
    showEventInfo2() {
      this.eventInfoVisible2 = true;
    },
    fireControlViewList() {
      let that = this;
      fireControlViewList().then(function (res) {
        that.resourcesList = res.data;
        //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
        res.data.forEach(function (data, index) {
          let icon =
            "sj" +
            "-" +
            "icon" +
            "-" +
            data.type.replaceAll("_", "-").replaceAll("@", "-");
          console.log("icon_" + (index + 1) + "=", icon);
          that.$set(that.resourcesList[index], "icon", icon);

          //每个图标对应固定颜色
          that.$set(that.resourcesList[index], "bg", getIconBg(icon));

          // if(index < 5){
          //   // that.fireControlViewPoint(data.type, 'undefined');
          //   that.fireControlViewPoint(data.type, '所有');
          // }
        });

        //数据自动落点开始
        let maxCount = 100; //落点数超过这个数的资源不落点
        let list = res.data;
        let counts = [];
        let points = [];
        let types = [];
        for (let i = 0; i < list.length; i++) {
          //获取符合要求的类型及数量
          if (list[i].num <= maxCount) {
            counts.push(list[i].num);
            points.push({
              type: list[i].type,
              count: list[i].num,
            });
          }
        }
        for (let i = 0; i < points.length; i++) {
          if (points[i].count == Math.max(...counts)) {
            types.push(points[i].type);
            let countsTemp = [];
            for (let j = 0; j < counts.length; j++) {
              if (counts[j] != Math.max(...counts)) {
                countsTemp.push(counts[j]);
              }
            }
            counts = countsTemp;
            break;
          }
        }
        for (let i = 0; i < points.length; i++) {
          if (points[i].count == Math.max(...counts)) {
            types.push(points[i].type);
            break;
          }
        }
        for (let i = 0; i < types.length; i++) {
          that.fireControlViewPoint(types[i], "所有");
        }
        //数据自动落点结束
      });
    },
    /*    getResource() {
          let that = this
          //获取左侧菜单列表
          getResource().then(res => {
            that.resourcesList = res.data
            //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
            res.data.forEach(function(data, index) {
              that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data.icon.split('_').slice(-1))
            })

          })
        },*/
    fireControlViewPoint(resourceTable, name) {
      // 搜索框
      // if(name == 'undefined' && this.showSearch == false){
      // if(name == '所有' && this.showSearch == false){
      if (name == "所有") {
        name = undefined;
      } else {
        this.showSearch = true;
      }
      // console.log("name=", name = "111111111235464")
      console.log("name=", name);
      console.log("this.showSearch=", this.showSearch);
      // 搜索类型
      this.searchType = resourceTable;
      let that = this;
      that.resourceTable = resourceTable;
      that.markersList = [];
      that.source = [];
      fireControlViewPoint(resourceTable, name).then((res) => {
        let pointList = res.data.pointList;
        that.deptGroupList = res.data.deptList;
        if (res.data.deptList != null && res.data.deptList.length > 0) {
          for (let i = 0; i < res.data.deptList.length; i++) {
            let aa = [
              res.data.deptList[i].deptName,
              res.data.deptList[i].count,
            ];
            that.source.push(aa);
          }
        }

        if (res.data.pointList != null && res.data.pointList.length > 0) {
          for (let i = 0; i < res.data.pointList.length; i++) {
            let markersMap = {
              lng: res.data.pointList[i].longitude,
              lat: res.data.pointList[i].latitude,
              icon: "marker",
              bindPopupHtml: "",
              click: "",
              name: i,
              keepBindPopup: false,
              isAggregation: false,
            };
            that.markersList.push(
              this.getMarkersMap(
                resourceTable,
                markersMap,
                res.data.pointList[i]
              )
            );
            // that.markersList.push(markersMap)
          }
        }
        if (this.showSearch == true) {
          this.dataChat();
        }
        that.$refs.supermap.clearM(false);
        that.$refs.supermap.setMarkers(that.markersList);
      });
    },
    getMarkersMap(resourceTable, markersMap, item) {
      if (resourceTable == "centerdata_t_firecontrol_basic_linkage_force") {
        //基本联动力量
        markersMap.icon =
          "sj-icon-map-centerdata-t-firecontrol-basic-linkage-force";
        markersMap.lng = item.longitude;
        markersMap.lat = item.latitude;
        markersMap.bindPopupHtml =
          '<div class="map-tip">' +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>经纬度：" +
          (item.longitude ? item.longitude : "") +
          "," +
          (item.latitude ? item.latitude : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>单位名称：" +
          (item.company ? item.company : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "</div>";
      } else if (resourceTable == "centerdata_t_firecontrol_fire_force") {
        //消防力量
        markersMap.icon = "sj-icon-map-centerdata-t-firecontrol-fire-force";
        markersMap.lng = item.longitude;
        markersMap.lat = item.latitude;
        markersMap.bindPopupHtml =
          '<div class="map-tip">' +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>经纬度：" +
          (item.longitude ? item.longitude : "") +
          "," +
          (item.latitude ? item.latitude : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>地址：" +
          (item.address ? item.address : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>负责人：" +
          (item.principal ? item.principal : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>联系电话：" +
          (item.contact ? item.contact : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span></div>";
      } else if (resourceTable == "centerdata_t_forest_waterintake") {
        //取水口
        markersMap.icon = "sj-icon-map-centerdata-t-forest-waterintake";
        markersMap.lng = item.longitude;
        markersMap.lat = item.latitude;
        markersMap.bindPopupHtml =
          '<div class="map-tip">' +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>经纬度：" +
          (item.longitude ? item.longitude : "") +
          "," +
          (item.latitude ? item.latitude : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>取水口名称：" +
          (item.name ? item.name : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>负责人：" +
          (item.contacts ? item.contacts : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          (item.phone
            ? "<span>" +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              "                  <h4>联系电话：" +
              item.phone +
              "</h4>" +
              "                </div>" +
              "                </div>" +
              "                </span></div>"
            : "");
      } else if (resourceTable == "centerdata_t_forest_watercrane") {
        //水鹤
        markersMap.icon = "sj-icon-map-centerdata-t-forest-watercrane";
        markersMap.lng = item.longitude;
        markersMap.lat = item.latitude;
        markersMap.bindPopupHtml =
          '<div class="map-tip">' +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>经纬度：" +
          (item.longitude ? item.longitude : "") +
          "," +
          (item.latitude ? item.latitude : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>水鹤名称：" +
          (item.name ? item.name : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>负责人：" +
          (item.contacts ? item.contacts : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>联系电话：" +
          (item.phone ? item.phone : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span></div>";
      } else if (
        resourceTable == "centerdata_t_forest_firehydrant@1" ||
        resourceTable == "centerdata_t_forest_firehydrant@2" ||
        resourceTable == "centerdata_t_forest_firehydrant@3"
      ) {
        //消火栓
        // markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-foam-liquid'
        let icon =
          "sj-icon-map-centerdata-t-forest-firehydrant-" +
          resourceTable.slice(-1);
        // sj-icon-map-centerdata-t-forest-firehydrant-1
        console.log("icon=", icon);
        markersMap.icon = icon;
        markersMap.lng = item.longitude;
        markersMap.lat = item.latitude;
        markersMap.bindPopupHtml =
          '<div class="map-tip">' +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>经纬度：" +
          (item.longitude ? item.longitude : "") +
          "," +
          (item.latitude ? item.latitude : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>消火栓名称：" +
          (item.name ? item.name : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>负责人：" +
          (item.contacts ? item.contacts : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>联系电话：" +
          (item.phone ? item.phone : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span></div>";
      } else if (resourceTable == "centerdata_t_firecontrol_fire_key_places") {
        //重点场所
        markersMap.icon =
          "sj-icon-map-centerdata-t-firecontrol-fire-key-places";
        markersMap.lng = item.longitude;
        markersMap.lat = item.latitude;
        markersMap.bindPopupHtml =
          '<div class="map-tip">' +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>经纬度：" +
          (item.longitude ? item.longitude : "") +
          "," +
          (item.latitude ? item.latitude : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>重点场所名称：" +
          (item.name ? item.name : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>负责人：" +
          (item.person ? item.person : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>联系电话：" +
          (item.phone ? item.phone : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span></div>";
      } else if (
        resourceTable == "centerdata_t_firecontrol_fire_pressure_sensor"
      ) {
        //压力传感器
        markersMap.icon =
          "sj-icon-map-centerdata-t-firecontrol-fire-pressure-sensor";
        markersMap.lng = item.longitude;
        markersMap.lat = item.latitude;
        markersMap.bindPopupHtml =
          '<div class="map-tip">' +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>经纬度：" +
          (item.longitude ? item.longitude : "") +
          "," +
          (item.latitude ? item.latitude : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>压力传感器名称：" +
          (item.name ? item.name : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>数量：" +
          (item.number ? item.number : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>参数：" +
          (item.parameters ? item.parameters : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span></div>";
      } else if (resourceTable == "centerdata_t_firecontrol_foam_liquid") {
        //泡沫液
        markersMap.icon = "sj-icon-map-centerdata-t-firecontrol-foam-liquid";
        markersMap.lng = item.longitude;
        markersMap.lat = item.latitude;
        markersMap.bindPopupHtml =
          '<div class="map-tip">' +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>经纬度：" +
          (item.longitude ? item.longitude : "") +
          "," +
          (item.latitude ? item.latitude : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>单位名称：" +
          (item.company ? item.company : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>联系人：" +
          (item.contacts ? item.contacts : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>联系电话：" +
          (item.contacts_phone ? item.contacts_phone : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span></div>";
      } else if (resourceTable == "centerdata_t_firecontrol_fulltime_station") {
        //专职站
        markersMap.icon =
          "sj-icon-map-centerdata-t-firecontrol-fulltime-station";
        markersMap.lng = item.longitude;
        markersMap.lat = item.latitude;
        markersMap.bindPopupHtml =
          '<div class="map-tip">' +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>经纬度：" +
          (item.longitude ? item.longitude : "") +
          "," +
          (item.latitude ? item.latitude : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>地址：" +
          (item.address ? item.address : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>负责人：" +
          (item.principal ? item.principal : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>电话：" +
          (item.contacts_phone ? item.contacts_phone : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "</div>";
      } else if (
        resourceTable == "centerdata_t_firecontrol_other_linkage_force"
      ) {
        //其他联动力量
        markersMap.icon =
          "sj-icon-map-centerdata-t-firecontrol-other-linkage-force";
        markersMap.lng = item.longitude;
        markersMap.lat = item.latitude;
        markersMap.bindPopupHtml =
          '<div class="map-tip">' +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>经纬度：" +
          (item.longitude ? item.longitude : "") +
          "," +
          (item.latitude ? item.latitude : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>单位名称：" +
          (item.company ? item.company : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>单位电话：" +
          (item.company_phone ? item.company_phone : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>联系人：" +
          (item.contacts ? item.contacts : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>联系电话：" +
          (item.contacts_phone ? item.contacts_phone : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span></div>";
      }
      return markersMap;
    },
    indentleftSetMarkers(resourceTable) {
      this.iconCurrentIndex = resourceTable;
      let that = this;
      that.resourceTable = resourceTable;
      that.markersList = [];
      that.source = [];
      //点击左侧地图落点
      getResourcePoint(resourceTable).then((res) => {
        that.deptGroupList = res.data.deptGroupList;
        if (
          res.data.deptGroupList != null &&
          res.data.deptGroupList.length > 0
        ) {
          for (let i = 0; i < res.data.deptGroupList.length; i++) {
            let aa = [
              res.data.deptGroupList[i].deptName,
              res.data.deptGroupList[i].count,
            ];
            that.source.push(aa);
          }
        }
        if (res.data.resourceList != null && res.data.resourceList.length > 0) {
          for (let i = 0; i < res.data.resourceList.length; i++) {
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: "marker",
              name: i,
              bindPopupHtml: "",
              click: "",
              keepBindPopup: false,
              isAggregation: false,
            };
            // if (resourceTable == 'centerdata_t_firecontrol_basic_linkage_force') { //基本联动力量
            //   markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-basic-linkage-force'
            //   markersMap.lng = res.data.resourceList[i].longitude
            //   markersMap.lat = res.data.resourceList[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
            //       .data.resourceList[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>单位名称：' + res.data.resourceList[i].company +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '</div>'
            // } else if (resourceTable == 'centerdata_t_firecontrol_fire_force') { //消防力量
            //   markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-fire-force'
            //   markersMap.lng = res.data.resourceList[i].longitude
            //   markersMap.lat = res.data.resourceList[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
            //       .data.resourceList[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>地址：' + res.data.resourceList[i].address + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>负责人：' + res.data.resourceList[i].principal + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系电话：' + res.data.resourceList[i].contact + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span></div>'
            // } else if (resourceTable == 'centerdata_t_firecontrol_foam_liquid') { //泡沫液
            //   markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-foam-liquid'
            //   markersMap.lng = res.data.resourceList[i].longitude
            //   markersMap.lat = res.data.resourceList[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
            //       .data.resourceList[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>单位名称：' + res.data.resourceList[i].company +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系人：' + res.data.resourceList[i].contacts +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系电话：' + res.data.resourceList[i].contactsPhone + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span></div>'
            // } else if (resourceTable == 'centerdata_t_firecontrol_fulltime_station') { //专职站
            //   markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-fulltime-station'
            //   markersMap.lng = res.data.resourceList[i].longitude
            //   markersMap.lat = res.data.resourceList[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
            //       .data.resourceList[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>地址：' + res.data.resourceList[i].address +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>负责人：' + res.data.resourceList[i].principal + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>电话：' + res.data.resourceList[i].contactsPhone + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '</div>'
            // } else if (resourceTable == 'centerdata_t_firecontrol_other_linkage_force') { //其他联动力量
            //   markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-other-linkage-force'
            //   markersMap.lng = res.data.resourceList[i].longitude
            //   markersMap.lat = res.data.resourceList[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
            //       .data.resourceList[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>单位名称：' + res.data.resourceList[i].company +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>单位电话：' + res.data.resourceList[i].companyPhone +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系人：' + res.data.resourceList[i].contacts +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系电话：' + res.data.resourceList[i].contactsPhone +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span></div>'
            // }
            that.markersList.push(markersMap);
          }
        }
        this.dataChat();
        that.$refs.supermap.clearM();
        that.$refs.supermap.setMarkers(that.markersList);
      });
    },
    indentleftByDeptIdSetMarkers(deptId) {
      this.listCurrentIndex = deptId;
      let that = this;
      //点击左侧地图落点
      getPointByDeptId(that.resourceTable, deptId).then((res) => {
        that.markersList = [];
        if (res.data != null && res.data.length > 0) {
          for (let i = 0; i < res.data.length; i++) {
            let markersMap = {
              lng: res.data[i].longitude,
              lat: res.data[i].latitude,
              icon: "marker",
              bindPopupHtml: "",
              click: "",
              name: i,
              keepBindPopup: false,
              isAggregation: false,
            };
            console.log("resourceTable=", that.resourceTable);
            console.log("res.data[i]=", res.data[i]);
            // if (that.resourceTable == 'centerdata_t_firecontrol_basic_linkage_force') { //基本联动力量
            //   markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-basic-linkage-force'
            //   markersMap.lng = res.data[i].longitude
            //   markersMap.lat = res.data[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data[i].longitude + ',' + res
            //       .data[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>单位名称：' + res.data[i].company +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '</div>'
            // } else if (that.resourceTable == 'centerdata_t_firecontrol_fire_force') { //消防力量
            //   markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-fire-force'
            //   markersMap.lng = res.data[i].longitude
            //   markersMap.lat = res.data[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data[i].longitude + ',' + res
            //       .data[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>地址：' + res.data[i].address + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>负责人：' + res.data[i].principal + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系电话：' + res.data[i].contact + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span></div>'
            // } else if (that.resourceTable == 'centerdata_t_forest_waterintake') { //取水口
            //   // markersMap.icon = 'sj-icon-centerdata-t-forest-waterintake'
            //   // markersMap.icon = 'sj-icon-map-centerdata-t-forest-waterintake'
            //   markersMap.lng = res.data[i].longitude
            //   markersMap.lat = res.data[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data[i].longitude + ',' + res
            //       .data[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>取水口名称：' + res.data[i].name + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>负责人：' + res.data[i].contacts + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系电话：' + res.data[i].phone + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span></div>'
            // } else if (that.resourceTable == 'centerdata_t_firecontrol_foam_liquid') { //泡沫液
            //   markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-foam-liquid'
            //   markersMap.lng = res.data[i].longitude
            //   markersMap.lat = res.data[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data[i].longitude + ',' + res
            //       .data[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>单位名称：' + res.data[i].company +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系人：' + res.data[i].contacts +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系电话：' + res.data[i].contactsPhone + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span></div>'
            // } else if (that.resourceTable == 'centerdata_t_firecontrol_fulltime_station') { //专职站
            //   markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-fulltime-station'
            //   markersMap.lng = res.data[i].longitude
            //   markersMap.lat = res.data[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data[i].longitude + ',' + res
            //       .data[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>地址：' + res.data[i].address +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>负责人：' + res.data[i].principal + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>电话：' + res.data[i].contactsPhone + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '</div>'
            // } else if (that.resourceTable == 'centerdata_t_firecontrol_other_linkage_force') { //其他联动力量
            //   markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-other-linkage-force'
            //   markersMap.lng = res.data[i].longitude
            //   markersMap.lat = res.data[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data[i].longitude + ',' + res
            //       .data[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>单位名称：' + res.data[i].company +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>单位电话：' + res.data[i].companyPhone +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系人：' + res.data[i].contacts +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系电话：' + res.data[i].contactsPhone +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span></div>'
            // }
            that.markersList.push(
              this.getMarkersMap(that.resourceTable, markersMap, res.data[i])
            );
            // that.markersList.push(markersMap)
          }
        }
        that.$refs.supermap.clearM();
        that.$refs.supermap.setMarkers(that.markersList);
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "@/assets/styles/base.scss";
</style>