Project_yhfu/src/views/datacenter.vue

<!--信息中心-->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div
        class="leftbar"
        :class="indentleft"
        ref="left"

      >
        <div class="forthis" style="width:12rem !important;height: 80vh;overflow-y: hidden;">
          <dv-border-box-13
            backgroundColor="rgba(12, 19, 38, .90)"
            style="padding-bottom: 1rem；height: 80vh"
          >
            <img
              src="../assets/images/integrated/light.png"
              style="width: 100%; margin-top: 0.4rem"
            />
            <div class="sj-search" v-show="showSearch">
              <el-input
                v-model="searchName"
                placeholder="请输入名称"
                @blur="searchByName()"
                clearable
                size="small"
                prefix-icon="el-icon-search"
              />
            </div>
            <div class="i-list-con" style="height: 71vh">
              <div class="d-l-con-icon">
                <div
                  class="icon-con"
                  :class="{ on: iconCurrentIndex == item.resourceTable }"
                  v-for="(item, index) in resourcesList"
                  v-on:click="indentleftSetMarkers(item.type, searchName)"
                >
                  <!--v-on:click="indentleftSetMarkers(item.resourceTable)">-->
                  <div
                    class="iconfont icon icon-normal"
                    :class="item.icon"
                    :style="'background:' + item.bg"
                  ></div>
                  <div class="icon-text">
                    <h6>{{ item.num }}</h6>
                    <!--<h6>{{ item.count }}</h6>-->
                    <h5>{{ item.name }}</h5>
                    <!--<h5>{{ item.resourceName }}</h5>-->
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
      </div>
      <!-- 地图 -->
      <supermap
        ref="supermap"
        style="width: 100%; height: 100vh"
        @sewageOutletClick="sewageOutletClick"
      ></supermap>
      <!--      <button @click="showEventInfo1" style="position: absolute; right: 50%;top: 45%;z-index: 1000;">弹层事件演示用按钮-->
      <!--      </button>-->
      <vBottomMenu ref="bottomMenu"></vBottomMenu>
      <!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
      <!--        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img-->
      <!--          src="@/assets/images/mascot.png"/>-->
      <!--        </div>-->
      <!--      </el-tooltip>-->
    </div>
    <eventLocation ref="eventLocation"></eventLocation>
    <TVWall ref="TVWall"></TVWall>
  </div>
</template>

<script>
import { getResource, getResourcePoint } 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");
import {getUserProfile} from "@/api/system/user";
export default {
  components: {
    supermap,
    vheader,
    vBottomMenu,
    eventLocation,
    TVWall,
  },
  created() {
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    window.showDialog = this.showDialog;
    window.choseLayerSwitching = this.choseLayerSwitching;
    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  },
  mounted() {
    // 初始化地图数据
    this.getSuperMapUrl();
    setTimeout(() => {
      this.getResource();
    }, 2000)
    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: [],
      //左右缩进
      indentStyle: "",
      indentleft: "",
      indentright: "",
      indentText: "收起左右栏",
      indentdisabled: false,
    };
  },

  methods: {
    //初始化地图数据
    getSuperMapUrl(){
      getUserProfile().then(response => {
        let mapDeptId=response.mapDeptId
        let num = 0;
        if (mapDeptId == "365") {
          num = 0;
        } else if (mapDeptId == "369") {
          num = 1;
        } else if (mapDeptId == "371") {
          num = 2;
        } else if (mapDeptId == "373") {
          num = 3;
        } else if (mapDeptId == "372") {
          num = 4;
        } else if (mapDeptId == "370") {
          num = 5;
        }
        this.$refs.supermap.removeAllviewer(num, -1);
      });
    },
    // 根据名称筛选资源点位
    searchByName() {
      this.$modal.msgSuccess("正在查询，请稍后...");
      this.indentleftSetMarkers(this.searchType, this.searchName);
    },
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    bottomMenuList() {
      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
    },
    showDialog(click) {
      if (click == "eventLocation") {
        this.$refs.eventLocation.showEventLocation();
        this.$refs.bottomMenu.showMeasure = false;
        this.$refs.bottomMenu.showChild = false;
        this.$refs.bottomMenu.showBanChild = false;
        this.$refs.bottomMenu.showChangChild = false;
      } else if (click == "editableLayers") {
        this.$refs.bottomMenu.showChild = false;
        this.$refs.bottomMenu.showBanChild = false;
        this.$refs.bottomMenu.showChangChild = false;
        if (!this.$refs.bottomMenu.showMeasure) {
          this.$refs.bottomMenu.showMeasure = true;
        } else {
          this.$refs.bottomMenu.showMeasure = false;
        }
      } else if (click == "layerSwitching") {
        this.$refs.bottomMenu.showMeasure = false;
        this.$refs.bottomMenu.showBanChild = false;
        this.$refs.bottomMenu.showChangChild = 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.bottomMenu.showMeasure = false;
        this.$refs.bottomMenu.showChild = false;
        this.$refs.bottomMenu.showBanChild = false;
        this.$refs.bottomMenu.showChangChild = false;
      } else if (click == "forestban") {
        this.$refs.bottomMenu.showMeasure = false;
        this.$refs.bottomMenu.showChild = false;
        this.$refs.bottomMenu.showChangChild = false;
        if (!this.$refs.bottomMenu.showBanChild) {
          this.$refs.bottomMenu.showBanChild = true;
        } else {
          this.$refs.bottomMenu.showBanChild = false;
        }
      } else if (click == "forestchang") {
        this.$refs.bottomMenu.showMeasure = false;
        this.$refs.bottomMenu.showBanChild = false;
        this.$refs.bottomMenu.showChild = false;
        if (!this.$refs.bottomMenu.showChangChild) {
          this.$refs.bottomMenu.showChangChild = true;
        } else {
          this.$refs.bottomMenu.showChangChild = false;
        }
      }
    },
    //选择图层
    choseLayerSwitching(url, isClear) {
      this.$refs.supermap.layerSwitching(url, isClear);
    },
    //选择图层(传递数组)
    choseLayerSwitchingList(urlList) {
      this.$refs.supermap.layerSwitchingList(urlList);
    },
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */

    //吉祥物收起左右框
    indent() {
      let list = document.getElementsByClassName("el-tooltip__popper");
      list[list.length - 1].style.display = "none";
      if (this.indentStyle == "") {
        this.indentStyle = "indent-style";
        this.indentleft = "indent-left";
        this.indentright = "indent-right";
        this.indentText = "展开左右栏";
      } else if (this.indentText == "展开左右栏") {
        this.indentStyle = "";
        this.indentleft = "";
        this.indentright = "";
        this.indentText = "收起左右栏";
      }
    },

    // 弹层方法
    // 弹层方法
    showEventInfo1() {
      this.eventInfoVisible1 = true;
    },
    showEventInfo2() {
      this.eventInfoVisible2 = true;
    },
    getResource() {
      let that = this;
      //获取左侧菜单列表
      getResource().then((res) => {
        console.log("res.data=", res.data);
        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.resourceTable.split('_').slice(-1))
          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.indentleftSetMarkers(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.indentleftSetMarkers(types[i], "所有");
        }
        //数据自动落点结束
      });
    },
    indentleftSetMarkers(resourceTable, name) {
      // 搜索框
      // if(name == 'undefined' && this.showSearch == false){
      // if(name == '所有' && this.showSearch == false){
      if (name == "所有") {
        name = undefined;
      } else {
        this.showSearch = true;
      }
      // 搜索类型
      this.searchType = resourceTable;
      this.iconCurrentIndex = resourceTable;
      let that = this;
      that.resourceTable = resourceTable;
      that.markersList = [];
      that.source = [];
      //点击左侧地图落点
      getResourcePoint(resourceTable, name).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",
              bindPopupHtml: "",
              click: "",
              keepBindPopup: false,
              isAggregation: false,
            };
            console.log("res.data.resourceList[i]=", res.data.resourceList[i]);
            that.markersList.push(
              this.getMarkersMap(
                resourceTable,
                markersMap,
                res.data.resourceList[i]
              )
            );
            // that.markersList.push(markersMap)
          }
        }
        that.$refs.supermap.clearM();
        that.$refs.supermap.setMarkers(that.markersList);
      });
    },
    sewageOutletClick(data) {
      console.log(data);
      const params = Object.assign({});
      params.longitude = data.longitude;
      params.latitude = data.latitude;

      const treeLabels = [
        {
          id: null,
          labelCode: "999",
          labelName: "电视墙",
          cameraType: null,
          parentLabelCode: "",
        },
      ];
      const labelChannels = [];
      for (let i in data.cameraList) {
        treeLabels.push({
          id: null,
          labelCode: data.cameraList[i].cameraCode,
          labelName: data.cameraList[i].cameraName,
          cameraType: "1",
          parentLabelCode: "999",
        });
        labelChannels.push({
          labelCode: data.cameraList[i].cameraCode,
          channelDates: [
            {
              channelCode: data.cameraList[i].cameraCode,
              channelName: data.cameraList[i].cameraName,
              channelSn: null,
              cameraType: "1",
              online: "1",
              cameraCode: "1",
            },
          ],
        });
      }
      const dianshiqiang = [
        {
          switchTab: "2",
          treeLabels: treeLabels,
          labelChannels: labelChannels,
        },
      ];
      if (data.cameraList.length > 0) {
        this.$refs.TVWall.showTVWall1(
          data.longitude,
          data.latitude,
          dianshiqiang
        );
      }
    },
    getMarkersMap(resourceTable, markersMap, item) {
      markersMap.click = "sewageOutletClick";
      markersMap.parameter = 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_emergency_warehouse") {
        //应急仓库
        markersMap.icon = "sj-icon-map-centerdata-t-emergency-warehouse";
        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.dept_name ? item.dept_name : "") +
          "</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_emergency_team") {
        //应急队伍
        markersMap.icon = "sj-icon-map-centerdata-t-emergency-team";
        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.charger ? item.charger : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          (item.emergency_phone
            ? "<span>" +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              "                  <h4>联系电话：" +
              item.emergency_phone +
              "</h4>" +
              "                </div>" +
              "                </div>" +
              "                </span>"
            : "") +
          (item.equipment
            ? "<span>" +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              "                  <h4>核心装备及数量：" +
              item.equipment +
              "</h4>" +
              "                </div>" +
              "                </div>" +
              "                </span>"
            : "") +
          "</div>";
      } else if (resourceTable == "centerdata_t_forest_fireteam") {
        //防火队
        markersMap.icon = "sj-icon-map-centerdata-t-forest-fireteam";
        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.fireteam_person ? item.fireteam_person : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          (item.fireteam_tel
            ? "<span>" +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              "                  <h4>联系电话：" +
              item.fireteam_tel +
              "</h4>" +
              "                </div>" +
              "                </div>" +
              "                </span>"
            : "") +
          (item.equipment
            ? "<span>" +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              "                  <h4>设备数量：" +
              item.equipment +
              "</h4>" +
              "                </div>" +
              "                </div>" +
              "                </span>"
            : "") +
          "</div>";
      } else if (resourceTable == "centerdata_t_emergency_enterprise") {
        //应急企业
        markersMap.icon = "sj-icon-map-centerdata-t-emergency-enterprise";
        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_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.firehydrant_address ? item.firehydrant_address : "") +
          "</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;
    },
  },
};
</script>

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