页面资源点可以打开电视墙+样式

src/components/supermap-2.5d.vue

@@ -975,6 +975,14 @@
     background: linear-gradient(rgba(4, 23, 62, 0.6), rgba(0, 28, 70, 0.6));
     min-width: 300px;
 
+    .sj-icon-btn {
+      display: block;
+      margin: 10px auto 15px auto;
+      padding: 0px 16px;
+      font-size: 10px;
+      height: 1.7rem;
+    }
+
     .top-tit {
       width: 100%;
       height: 28px;
@@ -986,6 +994,8 @@
       padding: 0px 10px;
       align-items: center;
 
+
+
       i {
         color: #10ccff;
         font-size: 18px;

src/views/forest.vue

@@ -118,7 +118,7 @@
       </div>
       <!-- 地图 -->
       <supermap ref="supermap" style="width: 100%;height: 100vh;" @showEventDialog="showEventDialog" :showLayer="true"
-        @fatherMethod="fatherMethod"></supermap>
+        @fatherMethod="fatherMethod" @sewageOutletClick="sewageOutletClick"></supermap>
       <!-- 右侧 -->
       <div class="rightbar rightbar-index" ref="right">
         <div class="right-item1">
@@ -365,8 +365,7 @@
               </div>
               <!--分页-->
               <div class="paging">
-                <el-button type="button"
-                  @click="getEventList(calendarDay,10,pageNum-1,eventSearch)">上一页 </el-button>
+                <el-button type="button" @click="getEventList(calendarDay,10,pageNum-1,eventSearch)">上一页 </el-button>
                 <span>第{{pageNum}}页</span>
                 <el-button type="button" :disabled="nextbutton"
                   @click="getEventList(calendarDay,10,pageNum+1,eventSearch)">下一页 </el-button>
@@ -673,28 +672,77 @@
             that.$set(that.resourcesCountList[index], 'icon', icon);
             that.$set(that.resourcesCountList[index], 'bg', getIconBg(icon));
           })
-          //数据自动落点开始
-          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
-              });
-              types.push(list[i].type);
+          if (that.eventList == undefined) that.eventList = []
+          if (that.eventList.length == 0) {
+            //数据自动落点开始
+            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
+                });
+                types.push(list[i].type);
+              }
             }
+            for (let i = 0; i < types.length; i++) {
+              that.selectResourcesByLabel(types[i], '所有');
+            }
+            //数据自动落点结束
           }
-          for (let i = 0; i < types.length; i++) {
-            that.selectResourcesByLabel(types[i], '所有');
-          }
-          //数据自动落点结束
         })
       },
+      sewageOutletClick(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: data.cameraList[i].cameraType,
+            parentLabelCode: "999",
+          });
+          labelChannels.push({
+            labelCode: data.cameraList[i].cameraCode,
+            channelDates: [{
+              channelCode: data.cameraList[i].cameraCode,
+              channelName: data.cameraList[i].cameraName,
+              channelSn: null,
+              cameraType: data.cameraList[i].cameraType,
+              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
+          );
+        }
+      },
       //点击左侧某资源，将该资源进行落点
       selectResourcesByLabel(label, name) {
         let that = this;
@@ -719,124 +767,182 @@
         })
       },
       initMarkers(list, type) {
-        console.log("list=", list)
         if (list != null && list.length > 0) {
           for (let i = 0; i < list.length; i++) {
             let markersMap = {
               lng: 124.59,
               lat: 43.02,
-              icon: 'marker',
-              bindPopupHtml: '',
-              click: '',
-              parameter: '',
+              icon: "marker",
+              bindPopupHtml: "",
+              click: "sewageOutletClick",
+              parameter: list[i],
               keepBindPopup: false,
-              isAggregation: false
-            }
+              isAggregation: false,
+            };
             if (list.length > 200) {
               markersMap.isAggregation = true;
             }
             //根据标签确定资源的图标
-            // markersMap.icon = 'traffic-resources-' + type;
-            // alert(type+"=type")
-            // alert(this.resourcesList[i].label+"=this.resourcesList[i].label")
-            markersMap.icon = 'traffic-resources-' + this.resourcesList[i].label;
-            markersMap.icon = 'traffic-resources-' + (type ? type == "sign" ? "warning_sign" : type : this
-              .resourcesList[i].label);
-            markersMap.parameter = this.resourcesList[i].id + "," + this.resourcesList[i].label;
-            markersMap.parameter = this.resourcesList[i].id + "," + (type ? type : this.resourcesList[i].label);
-            markersMap.click = '';
+            markersMap.icon =
+              "traffic-resources-" +
+              (type ?
+                type == "sign" ?
+                "warning_sign" :
+                type :
+                this.resourcesList[i].label);
             markersMap.lng = list[i].longitude;
             markersMap.lat = list[i].latitude;
             //POP的通用部分
-            markersMap.bindPopupHtml = '<div class="map-tip">' +
-              '<span>' +
+            markersMap.bindPopupHtml =
+              '<div class="map-tip">' +
+              "<span>" +
               ' <div class="d-l-con">' +
               '   <div class="d-l-l-text">' +
-              '     <h4>名称：' + (list[i].name ? list[i].name : "") + '</h4>' +
-              '   </div>' +
-              ' </div>' +
-              '</span>';
-            if (list[i].label == this.labelList[0] || this.labelList[0].indexOf(type) != -1) { //警示牌的POP
-              markersMap.bindPopupHtml += '' +
-                '<span>' +
+              "     <h4>名称：" +
+              (list[i].name ? list[i].name : "") +
+              "</h4>" +
+              "   </div>" +
+              " </div>" +
+              "</span>";
+            if (
+              list[i].label == this.labelList[0] ||
+              this.labelList[0].indexOf(type) != -1
+            ) {
+              //警示牌的POP
+              markersMap.bindPopupHtml +=
+                "" +
+                "<span>" +
                 ' <div class="d-l-con">' +
                 '   <div class="d-l-l-text">' +
-                '     <h4>设置日期：' + ((list[i].setTime ? list[i].setTime : list[i].set_time) ? (list[i].setTime ? list[i]
-                  .setTime : list[i].set_time) : "") + '</h4>' +
-                '   </div>' +
-                ' </div>' +
-                '</span>' +
-                '<span>' +
+                "     <h4>设置日期：" +
+                ((list[i].setTime ? list[i].setTime : list[i].set_time) ?
+                  list[i].setTime ?
+                  list[i].setTime :
+                  list[i].set_time :
+                  "") +
+                "</h4>" +
+                "   </div>" +
+                " </div>" +
+                "</span>" +
+                "<span>" +
                 ' <div class="d-l-con">' +
                 '   <div class="d-l-l-text">' +
-                '     <h4>用途：' + (list[i].effect ? list[i].effect : "") + '</h4>' +
-                '   </div>' +
-                ' </div>' +
-                '</span>';
+                "     <h4>用途：" +
+                (list[i].effect ? list[i].effect : "") +
+                "</h4>" +
+                "   </div>" +
+                " </div>" +
+                "</span>";
             }
-            if (list[i].label == this.labelList[1] || list[i].label == this.labelList[2] || this.labelList[1].indexOf(
-                type) != -1 || this.labelList[2].indexOf(type) != -1) { //桥梁涵洞的POP
-              markersMap.bindPopupHtml += '' +
-                '<span>' +
+            if (
+              list[i].label == this.labelList[1] ||
+              list[i].label == this.labelList[2] ||
+              this.labelList[1].indexOf(type) != -1 ||
+              this.labelList[2].indexOf(type) != -1
+            ) {
+              //桥梁涵洞的POP
+              markersMap.bindPopupHtml +=
+                "" +
+                "<span>" +
                 ' <div class="d-l-con">' +
                 '   <div class="d-l-l-text">' +
-                '     <h4>竣工日期：' + ((list[i].completionDate ? list[i].completionDate : list[i].completion_date) ? (list[
-                  i].completionDate ? list[i].completionDate : list[i].completion_date) : "") + '</h4>' +
-                '   </div>' +
-                ' </div>' +
-                '</span>' +
-                '<span>' +
-                '<span>' +
+                "     <h4>竣工日期：" +
+                ((
+                    list[i].completionDate ?
+                    list[i].completionDate :
+                    list[i].completion_date
+                  ) ?
+                  list[i].completionDate ?
+                  list[i].completionDate :
+                  list[i].completion_date :
+                  "") +
+                "</h4>" +
+                "   </div>" +
+                " </div>" +
+                "</span>" +
+                "<span>" +
+                "<span>" +
                 ' <div class="d-l-con">' +
                 '   <div class="d-l-l-text">' +
-                '     <h4>管理单位：' + ((list[i].managementUnit ? list[i].managementUnit : list[i].management_unit) ? (list[
-                  i].managementUnit ? list[i].managementUnit : list[i].management_unit) : "") + '</h4>' +
-                '   </div>' +
-                ' </div>' +
-                '</span>' +
-                '<span>' +
+                "     <h4>管理单位：" +
+                ((
+                    list[i].managementUnit ?
+                    list[i].managementUnit :
+                    list[i].management_unit
+                  ) ?
+                  list[i].managementUnit ?
+                  list[i].managementUnit :
+                  list[i].management_unit :
+                  "") +
+                "</h4>" +
+                "   </div>" +
+                " </div>" +
+                "</span>" +
+                "<span>" +
                 ' <div class="d-l-con">' +
                 '   <div class="d-l-l-text">' +
-                '     <h4>联系电话：' + ((list[i].manaTel ? list[i].manaTel : list[i].mana_tel) ? (list[i].manaTel ? list[i]
-                  .manaTel : list[i].mana_tel) : "") + '</h4>' +
-                '   </div>' +
-                ' </div>' +
-                '</span>' +
-                '<span>' +
+                "     <h4>联系电话：" +
+                ((list[i].manaTel ? list[i].manaTel : list[i].mana_tel) ?
+                  list[i].manaTel ?
+                  list[i].manaTel :
+                  list[i].mana_tel :
+                  "") +
+                "</h4>" +
+                "   </div>" +
+                " </div>" +
+                "</span>" +
+                "<span>" +
                 ' <div class="d-l-con">' +
                 '   <div class="d-l-l-text">' +
-                '     <h4>养护单位：' + ((list[i].maintenanceUnit ? list[i].maintenanceUnit : list[i].maintenance_unit) ? (
-                  list[i].maintenanceUnit ? list[i].maintenanceUnit : list[i].maintenance_unit) : "") + '</h4>' +
-                '   </div>' +
-                ' </div>' +
-                '</span>' +
-                '<span>' +
+                "     <h4>养护单位：" +
+                ((
+                    list[i].maintenanceUnit ?
+                    list[i].maintenanceUnit :
+                    list[i].maintenance_unit
+                  ) ?
+                  list[i].maintenanceUnit ?
+                  list[i].maintenanceUnit :
+                  list[i].maintenance_unit :
+                  "") +
+                "</h4>" +
+                "   </div>" +
+                " </div>" +
+                "</span>" +
+                "<span>" +
                 ' <div class="d-l-con">' +
                 '   <div class="d-l-l-text">' +
-                '     <h4>联系电话：' + ((list[i].mainTel ? list[i].mainTel : list[i].main_tel) ? (list[i].mainTel ? list[i]
-                  .mainTel : list[i].main_tel) : "") + '</h4>' +
-                '   </div>' +
-                ' </div>' +
-                '</span>';
+                "     <h4>联系电话：" +
+                ((list[i].mainTel ? list[i].mainTel : list[i].main_tel) ?
+                  list[i].mainTel ?
+                  list[i].mainTel :
+                  list[i].main_tel :
+                  "") +
+                "</h4>" +
+                "   </div>" +
+                " </div>" +
+                "</span>";
             }
-            if (list[i].remark != "" && list[i].remark != null) { //POP的备注部分
-              markersMap.bindPopupHtml += '' +
-                '<span>' +
+            if (list[i].remark != "" && list[i].remark != null) {
+              //POP的备注部分
+              markersMap.bindPopupHtml +=
+                "" +
+                "<span>" +
                 ' <div class="d-l-con">' +
                 '   <div class="d-l-l-text">' +
-                '     <h4>备注：' + (list[i].remark ? list[i].remark : "") + '</h4>' +
-                '   </div>' +
-                ' </div>' +
-                '</span>';
+                "     <h4>备注：" +
+                (list[i].remark ? list[i].remark : "") +
+                "</h4>" +
+                "   </div>" +
+                " </div>" +
+                "</span>";
             }
-            markersMap.bindPopupHtml += '</div>'
-            this.markersList.push(markersMap)
+            markersMap.bindPopupHtml += "</div>";
+            this.markersList.push(markersMap);
           }
           setTimeout(() => {
-            // return
-            // this.$refs.supermap.clearM()
-            this.$refs.supermap.setMarkers(this.markersList)
-          }, 2000)
+            this.$refs.supermap.clearM();
+            this.$refs.supermap.setMarkers(this.markersList);
+          }, 2000);
         }
       },
       getMenuEventType() {
@@ -1280,7 +1386,7 @@
           eventName: eventSearch
         }, loading).then(res => {
           this.eventList = res.data
-          if (res.data !== null && res.data.length !== 0&& res.data.length == 10) {
+          if (res.data !== null && res.data.length !== 0 && res.data.length == 10) {
             this.nextbutton = false
           } else {
             this.nextbutton = true