Project_yhfu/src/views/datacenter.vue

<!--信息中心-->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div
        class="leftbar w-10"
        :class="indentleft"
        ref="left"
        style="width: 12rem !important; height: 80vh; overflow-y: hidden"
      >
        <div class="forthis">
          <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, item.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;" :mapDiv="'forestMap'" class="indexSupermapClass"-->
      <!--                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>-->
      <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>-->
      <!-- 右侧 -->
      <div
        class="rightbar"
        :class="indentright"
        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>
      <!--      <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,
  getResourcePointByDeptId,
} 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.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: {
    // 根据名称筛选资源点位
    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;
      } else if (click == "editableLayers") {
        this.$refs.bottomMenu.showChild = 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;
        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;
      }
    },
    //选择图层
    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",
        },
        dataZoom: [
          {
            show: this.source.length > 8 ? true : false,
            type: "slider",
            yAxisIndex: 0,
            left: 0,
            start: 0,
            end: this.source.length > 8 ? 8 : 100,
            width: 15,
          },
        ],
        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",
            },
          },
        ],
      });
    },

    //吉祥物收起左右框
    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) => {
        that.resourcesList = res.data;
        console.log("数据中心", that.resourcesList);
        //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
        res.data.forEach(function (data, index) {
          // console.log("data.type.split('_').slice(-1)", data.type.split('_').slice(-1));
          // that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data.type.replaceAll("_", "-"));
          // // 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,
            });
          }
        }
        // alert(counts)//5,1,2,2,3,3,24,17,3
        for (let i = 0; i < points.length; i++) {
          if (points[i].count == Math.max(...counts)) {
            // alert(points[i].count +"==Math.max(...counts)==" + Math.max(...counts))
            types.push(points[i].type);
            let countsTemp = [];
            let pointsTemp = [];
            for (let j = 0; j < counts.length; j++) {
              // alert("aaa="+counts[j] +"=="+ Math.max(...counts))
              if (counts[j] != Math.max(...counts)) {
                countsTemp.push(counts[j]);
              }
            }
            // for (let j = 0; j < points.length && points[i].count != counts[j]; j++) {
            //   pointsTemp.push({
            //     "type": list[i].type,
            //     "count": list[i].num
            //   });
            // }
            // alert(countsTemp)//5,1,2,2,3,3,24,17,3
            // alert(pointsTemp)
            // return
            counts = countsTemp;
            // points = pointsTemp;
            // let tail = counts.splice(i+1, counts.length);
            // counts = counts.splice(0, i);
            // counts.push(tail);
            // alert(Math.max(...countsTemp)+"max")
            break;
          }
        }
        for (let i = 0; i < points.length; i++) {
          // alert(points[i].count +"=="+ Math.max(...counts))
          if (points[i].count == Math.max(...counts)) {
            types.push(points[i].type);
            break;
          }
        }
        for (let i = 0; i < types.length; i++) {
          // console.log("if(i < 5){types[i]=", types[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,
            };
            that.markersList.push(
              this.getMarkersMap(
                resourceTable,
                markersMap,
                res.data.resourceList[i]
              )
            );
            // that.markersList.push(markersMap)
          }
        }
        if (this.showSearch == true) {
          this.dataChat();
        }
        that.$refs.supermap.clearM();
        that.$refs.supermap.setMarkers(that.markersList);
      });
    },
    indentleftByDeptIdSetMarkers(deptId) {
      this.listCurrentIndex = deptId;
      let that = this;
      //点击左侧地图落点
      getResourcePointByDeptId(that.resourceTable, deptId).then((res) => {
        console.log("res.data.resourceList=", res.data.resourceList);
        // alert(that.resourceTable)
        that.markersList = [];
        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,
            };
            that.markersList.push(
              this.getMarkersMap(
                that.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_resources_illegal_construction") {
        //违建信息
        markersMap.icon =
          "sj-icon-map-centerdata-t-resources-illegal-constructionon";
        markersMap.lng = item.longitude ? item.longitude : "";
        markersMap.lat = item.latitude ? 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_resources_deposit") {
        //矿产资源
        markersMap.icon = "sj-icon-map-centerdata-t-resources-deposit";
        markersMap.lng = item.longitude ? item.longitude : "";
        markersMap.lat = item.latitude ? 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_resources_forest") {
        //森林资源管理信息
        markersMap.icon = "sj-icon-map-centerdata-t-forest-landing";
        markersMap.lng = item.longitude ? item.longitude : "";
        markersMap.lat = item.latitude ? 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.zdfw ? item.zdfw : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>占地面积(万公顷)：" +
          (item.landArea ? item.landArea : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span></div>";
      } else if (resourceTable == "centerdata_t_resources_geologic_hazard") {
        //地质灾害易发区
        markersMap.icon = "sj-icon-map-centerdata-t-resources-geologic-hazard";
        markersMap.lng = item.longitude ? item.longitude : "";
        markersMap.lat = item.latitude ? 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_resources_hydroenergy") {
        //水能资源
        markersMap.icon = "sj-icon-map-centerdata-t-forest-checkpoint";
        markersMap.lng = item.longitude ? item.longitude : "";
        markersMap.lat = item.latitude ? 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.address ? item.address : "") +
          "</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_resources_land") {
        //土地资源管理信息
        markersMap.icon = "sj-icon-map-centerdata-t-forest-waterintake";
        markersMap.lng = item.longitude ? item.longitude : "";
        markersMap.lat = item.latitude ? 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.landArea ? item.landArea : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span></div>";
      }
      return markersMap;
    },
  },
};
</script>

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