UI-生态数据中心-icon资源

src/views/datacenter.vue

@@ -8,10 +8,15 @@
       <!-- 左侧 -->
       <div class="leftbar w-10" ref="left">
         <div class="forthis">
-          <dv-border-box-13    backgroundColor="#09140e" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
+          <dv-border-box-13
+            backgroundColor="#09140e"
+            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">
                   <el-input
@@ -27,11 +32,19 @@
               </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="indentleftSetMarkers(item.type, searchName)">
-                     <!--v-on:click="indentleftSetMarkers(item.resourceTable)">-->
-                  <div class="iconfont icon icon-normal" :class="item.icon"></div>
+                <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>-->
@@ -46,24 +59,38 @@
       </div>
       <!-- 地图 -->
       <!--<supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"-->
-                <!--:mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>-->
-      <supermap ref="supermap" @sewageOutletClick="sewageOutletClick"></supermap>
+      <!--:mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>-->
+      <supermap
+        ref="supermap"
+        @sewageOutletClick="sewageOutletClick"
+      ></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="#09140e" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
+          <dv-border-box-13
+            backgroundColor="#09140e"
+            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;"/>
+              <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-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>
@@ -71,15 +98,14 @@
                   <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 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>
@@ -90,36 +116,36 @@
 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 {initByCameras} from "@/api/forest"; //电视墙弹窗
+  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 { initByCameras } from "@/api/forest"; //电视墙弹窗
+import {getIconBg} from '@/api/components/sookaMapIcon';//资源底色控制文件
 // import echarts from 'echarts'
-let echarts = require('echarts')
+let echarts = require("echarts");
 export default {
   components: {
     supermap,
     vheader,
     vBottomMenu,
     eventLocation,
-    TVWall
+    TVWall,
   },
   created() {
     /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    window.showDialog = this.showDialog
-    window.choseLayerSwitching = this.choseLayerSwitching
-    window.choseLayerSwitchingList = this.choseLayerSwitchingList
+    window.showDialog = this.showDialog;
+    window.choseLayerSwitching = this.choseLayerSwitching;
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
     /** ----------------------------------底部按钮公用组件结束------------------------------------- */
   },
   mounted() {
-    this.getResource()
-    this.bottomMenuList() //获取底部公共组件消息和任务
+    this.getResource();
+    this.bottomMenuList(); //获取底部公共组件消息和任务
   },
   data() {
     return {
@@ -129,23 +155,22 @@ export default {
       searchName: undefined,
       // 搜索类型
       searchType: undefined,
-      iconCurrentIndex: '',
-      listCurrentIndex: '',
+      iconCurrentIndex: "",
+      listCurrentIndex: "",
       markersList: [],
       iframeBoo: true,
       open: false,
       iframeVue: null,
-      activeName: 'info',
-      radio: '1',
+      activeName: "info",
+      radio: "1",
       //类型
-      resourceTable: '',
+      resourceTable: "",
       //左侧资源
       resourcesList: [],
       //右侧资源
       deptGroupList: [],
       source: [],
-
-    }
+    };
   },
 
   methods: {
@@ -156,193 +181,204 @@ export default {
     },
     /** ----------------------------------底部按钮公用组件开始------------------------------------- */
     bottomMenuList() {
-      this.$refs.bottomMenu.selectTaskList()//获取任务列表
-      this.$refs.bottomMenu.selectMessageList()//获取消息列表
+      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 (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
+          this.$refs.supermap.isEditableLayers = true;
         } else {
-          this.$refs.supermap.isEditableLayers = false
+          this.$refs.supermap.isEditableLayers = false;
         }
-      } else if (click == 'layerSwitching') {
-        this.$refs.supermap.isEditableLayers = false
+      } else if (click == "layerSwitching") {
+        this.$refs.supermap.isEditableLayers = false;
         if (!this.$refs.bottomMenu.showChild) {
-          this.$refs.bottomMenu.showChild = true
+          this.$refs.bottomMenu.showChild = true;
         } else {
-          this.$refs.bottomMenu.showChild = false
+          this.$refs.bottomMenu.showChild = false;
         }
-      } else if (click == 'TVWall') {
-        this.$refs.TVWall.showTVWall()
-        this.$refs.supermap.isEditableLayers = false
-        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)
+      this.$refs.supermap.layerSwitching(url, isClear);
     },
     //选择图层(传递数组)
     choseLayerSwitchingList(urlList) {
-      this.$refs.supermap.layerSwitchingList(urlList)
+      this.$refs.supermap.layerSwitchingList(urlList);
     },
     /** ----------------------------------底部按钮公用组件结束------------------------------------- */
     //数据分布chart
     dataChat() {
       // 基于准备好的dom，初始化echarts实例
-      let myChart = echarts.init(document.getElementById('data-chart'))
+      let myChart = echarts.init(document.getElementById("data-chart"));
       // 绘制图表
-      const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848']
+      const dfColor = ["#92E1FF", "#0097FB", "#30ECA6", "#FFC227", "#FF4848"];
       myChart.setOption({
         dataset: {
-          source: this.source
+          source: this.source,
         },
         tooltip: {
-          trigger: 'item'
-
+          trigger: "item",
         },
-        dataZoom: [{
-          show: true,
-          type: 'slider',
-          yAxisIndex: 0,
-          left: 0,
-          start: 0,
-          end: this.source.length > 8 ? 8 : 100,
-          width: 15
-        }],
+        dataZoom: [
+          {
+            show: true,
+            type: "slider",
+            yAxisIndex: 0,
+            left: 0,
+            start: 0,
+            end: this.source.length > 8 ? 8 : 100,
+            width: 15,
+          },
+        ],
         grid: {
-          top: '5%',
-          left: '2%',
+          top: "5%",
+          left: "2%",
           // right: "4%",
-          bottom: '-15%',
-          width: '75%',
-          containLabel: true
+          bottom: "-15%",
+          width: "75%",
+          containLabel: true,
         },
         xAxis: {
           show: false,
-          type: 'value'
+          type: "value",
         },
         yAxis: {
-          type: 'category', // 不设置类目轴，抽离的dataset数据展示不出来
+          type: "category", // 不设置类目轴，抽离的dataset数据展示不出来
           inverse: true,
           axisLabel: {
             show: true,
             textStyle: {
-              color: '#5deaff',
-              fontSize: '12'
-            }
+              color: "#5deaff",
+              fontSize: "12",
+            },
           },
           splitLine: {
-            show: false
+            show: false,
           },
           axisTick: {
-            show: false
+            show: false,
           },
           axisLine: {
-            show: false
-          }
+            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: {
+        series: [
+          {
+            type: "bar",
+            animationCurve: "easeOutBack",
+            barWidth: 5,
             label: {
-              show: true
+              show: true,
+              position: "right",
+              offset: [0, 0],
+              color: "#88dfd5",
+              // fontSize: "12",
+              style: {
+                fill: "#fff",
+              },
             },
-            labelLine: {
-              show: false
+            backgroundBar: {
+              show: true,
+              style: {
+                fill: "rgba(97,152,255,0.20)",
+              },
             },
-            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-              offset: 0,
-              color: 'rgba(41,244,236,0)'
+            barStyle: {
+              stroke: "rgba(41,244,236,1)",
             },
-              {
-                offset: 1,
-                color: 'rgba(41,244,236,.5)'
-              }
-            ]),
-            borderColor: '#a2f9f7',
-            shadowBlur: 16,
-            shadowColor: '#a2f9f7'
-          }
-        }]
-      })
-
+            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
+      this.eventInfoVisible1 = true;
     },
     showEventInfo2() {
-      this.eventInfoVisible2 = true
+      this.eventInfoVisible2 = true;
     },
     getResource() {
-      let that = this
+      let that = this;
       //获取左侧菜单列表
-      getResource().then(res => {
-        that.resourcesList = res.data
-        console.log("that.resourcesList=", that.resourcesList)
+      getResource().then((res) => {
+        that.resourcesList = res.data;
+        console.log("that.resourcesList=", that.resourcesList);
         //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
-        res.data.forEach(function(data, index) {
-          that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data.type.replaceAll("_", "-"));
+        res.data.forEach(function (data, index) {
+          let icon ='sj' + '-' + 'icon' + '-' + data.type.replaceAll("_", "-").replaceAll("@", "-");
+          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 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){
+        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
+              type: list[i].type,
+              count: list[i].num,
             });
           }
         }
-        for(let i = 0; i < points.length; i++){
-          if(points[i].count == Math.max(...counts)){
+        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)){
+              if (counts[j] != Math.max(...counts)) {
                 countsTemp.push(counts[j]);
               }
             }
@@ -350,41 +386,47 @@ export default {
             break;
           }
         }
-        for(let i = 0; i < points.length; i++){
-          if(points[i].count == Math.max(...counts)){
+        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], '所有');
+        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 == '所有'){
+      if (name == "所有") {
         name = undefined;
-      }else {
+      } else {
         this.showSearch = true;
       }
       // 搜索类型
       this.searchType = resourceTable;
-      this.iconCurrentIndex = resourceTable
-      let that = this
-      that.resourceTable = resourceTable
-      that.markersList = []
-      that.source = []
+      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) {
+      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)
+            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) {
@@ -392,215 +434,263 @@ export default {
             let markersMap = {
               lng: 124.59,
               lat: 43.02,
-              icon: 'marker',
-              bindPopupHtml: '',
-              parameter:'',
-              click: '',
+              icon: "marker",
+              bindPopupHtml: "",
+              parameter: "",
+              click: "",
               keepBindPopup: false,
-              isAggregation: false
-            }
-            that.markersList.push(this.getMarkersMap(resourceTable, markersMap, res.data.resourceList[i]));
+              isAggregation: false,
+            };
+            that.markersList.push(
+              this.getMarkersMap(
+                resourceTable,
+                markersMap,
+                res.data.resourceList[i]
+              )
+            );
           }
         }
-        if(this.showSearch == true){
+        if (this.showSearch == true) {
           this.dataChat();
         }
         setTimeout(() => {
-          that.$refs.supermap.clearM()
-          that.$refs.supermap.setMarkers(that.markersList)
-        }, 3000)
-      })
+          that.$refs.supermap.clearM();
+          that.$refs.supermap.setMarkers(that.markersList);
+        }, 3000);
+      });
     },
     indentleftByDeptIdSetMarkers(deptId) {
-      this.listCurrentIndex = deptId
-      let that = this
+      this.listCurrentIndex = deptId;
+      let that = this;
       //点击左侧地图落点
-      getResourcePointByDeptId(that.resourceTable, deptId).then(res => {
-        console.log("1===============dituluodian===============", res.data.resourceList);
-        that.markersList = []
+      getResourcePointByDeptId(that.resourceTable, deptId).then((res) => {
+        console.log(
+          "1===============dituluodian===============",
+          res.data.resourceList
+        );
+        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: '',
-              parameter:'',
-              click: '',
+              icon: "marker",
+              bindPopupHtml: "",
+              parameter: "",
+              click: "",
               keepBindPopup: false,
-              isAggregation: false
-            }
-            that.markersList.push(this.getMarkersMap(that.resourceTable, markersMap, res.data.resourceList[i]));
+              isAggregation: false,
+            };
+            that.markersList.push(
+              this.getMarkersMap(
+                that.resourceTable,
+                markersMap,
+                res.data.resourceList[i]
+              )
+            );
           }
         }
         setTimeout(() => {
-          that.$refs.supermap.clearM()
-          that.$refs.supermap.setMarkers(that.markersList)
-        }, 3000)
-      })
+          that.$refs.supermap.clearM();
+          that.$refs.supermap.setMarkers(that.markersList);
+        }, 3000);
+      });
     },
-    getMarkersMap(resourceTable, markersMap, item){
-      if (resourceTable == 'centerdata_t_environment_key_enterprise') { //重点企业
-        markersMap.icon = 'sj-icon-map-centerdata-t-environment-key-enterprise'
-        markersMap.lng = (item.longitude?item.longitude:"")
-        markersMap.lat = (item.latitude?item.latitude:"")
-        markersMap.click = 'sewageOutletClick'
-        markersMap.parameter = item
-        markersMap.bindPopupHtml = '<div class="map-tip">' +
-          '<span>' +
+    getMarkersMap(resourceTable, markersMap, item) {
+      if (resourceTable == "centerdata_t_environment_key_enterprise") {
+        //重点企业
+        markersMap.icon = "sj-icon-map-centerdata-t-environment-key-enterprise";
+        markersMap.lng = item.longitude ? item.longitude : "";
+        markersMap.lat = item.latitude ? item.latitude : "";
+        markersMap.click = "sewageOutletClick";
+        markersMap.parameter = item;
+        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>' +
+          "                  <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>' +
+          "                  <h4>企业名称：" +
+          (item.name ? item.name : "") +
+          "</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>' +
+          "                  <h4>地址：" +
+          (item.address ? item.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>' +
+          "                  <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_environment_source_pollution') { //污染源
-        markersMap.icon = 'sj-icon-map-centerdata-t-environment-source-pollution'
-        markersMap.lng = (item.longitude?item.longitude:"")
-        markersMap.lat = (item.latitude?item.latitude:"")
-        markersMap.bindPopupHtml = '<div class="map-tip">' +
-          '<span>' +
+          "                  <h4>联系电话：" +
+          (item.contacts_phone ? item.contacts_phone : "") +
+          "</h4>" +
+          "                </div>" +
+          "                </div>" +
+          "                </span></div>";
+      } else if (resourceTable == "centerdata_t_environment_source_pollution") {
+        //污染源
+        markersMap.icon =
+          "sj-icon-map-centerdata-t-environment-source-pollution";
+        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>' +
+          "                  <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>' +
+          "                  <h4>污染源名称：" +
+          (item.name ? item.name : "") +
+          "</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>'
-      } else if (resourceTable == 'centerdata_t_environment_sewage_outlet') { //排污口
-        markersMap.icon = 'sj-icon-map-centerdata_t_environment_sewage_outlet'
-        markersMap.lng = (item.longitude?item.longitude:"")
-        markersMap.lat = (item.latitude?item.latitude:"")
-        markersMap.click = 'sewageOutletClick'
-        markersMap.parameter = item
-        markersMap.bindPopupHtml = '<div class="map-tip">' +
-          '<span>' +
+          "                  <h4>地址：" +
+          (item.address ? item.address : "") +
+          "</h4>" +
+          "                </div>" +
+          "                </div>" +
+          "                </span>" +
+          "<span>" +
+          "</div>";
+      } else if (resourceTable == "centerdata_t_environment_sewage_outlet") {
+        //排污口
+        markersMap.icon = "sj-icon-map-centerdata_t_environment_sewage_outlet";
+        markersMap.lng = item.longitude ? item.longitude : "";
+        markersMap.lat = item.latitude ? item.latitude : "";
+        markersMap.click = "sewageOutletClick";
+        markersMap.parameter = item;
+        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>' +
+          "                  <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>' +
+          "                  <h4>排污口名称：" +
+          (item.name ? item.name : "") +
+          "</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>'
+          "                  <h4>地址：" +
+          (item.address ? item.address : "") +
+          "</h4>" +
+          "                </div>" +
+          "                </div>" +
+          "                </span>" +
+          "<span>" +
+          "</div>";
       }
       return markersMap;
     },
     sewageOutletClick(data) {
-      const params = Object.assign({})
+      const params = Object.assign({});
       params.longitude = data.longitude;
       params.latitude = data.latitude;
 
-      const treeLabels = [{
-        "id": null,
-        "labelCode": "999",
-        "labelName": "电视墙",
-        "cameraType": null,
-        "parentLabelCode": ""
-      }];
+      const treeLabels = [
+        {
+          id: null,
+          labelCode: "999",
+          labelName: "电视墙",
+          cameraType: null,
+          parentLabelCode: "",
+        },
+      ];
       const labelChannels = [];
-      for (let i in data.cameraList){
+      for (let i in data.cameraList) {
         treeLabels.push({
-          "id": null,
-          "labelCode": data.cameraList[i].cameraCode,
-          "labelName": data.cameraList[i].cameraName,
-          "cameraType": "1",
-          "parentLabelCode": "999"
-        })
+          id: null,
+          labelCode: data.cameraList[i].cameraCode,
+          labelName: data.cameraList[i].cameraName,
+          cameraType: "1",
+          parentLabelCode: "999",
+        });
         labelChannels.push({
-          "labelCode": data.cameraList[i].cameraCode,
-          "channelDates": [
+          labelCode: data.cameraList[i].cameraCode,
+          channelDates: [
             {
-              "channelCode": data.cameraList[i].cameraCode,
-              "channelName": data.cameraList[i].cameraName,
-              "channelSn": null,
-              "cameraType": "1",
-              "online": "1",
-              "cameraCode": "1"
-            }
-          ]
-        })
+              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);
+          switchTab: "2",
+          treeLabels: treeLabels,
+          labelChannels: labelChannels,
+        },
+      ];
+      if (data.cameraList.length > 0) {
+        this.$refs.TVWall.showTVWall1(
+          data.longitude,
+          data.latitude,
+          dianshiqiang
+        );
       }
     },
-  }
-}
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-@import '@/assets/styles/base.scss';
+@import "@/assets/styles/base.scss";
 </style>