Merge remote-tracking branch 'origin/visu_environment' into visu_environment

src/api/monitor.js

@@ -52,14 +52,6 @@ export function rotation(lng,lat,list) {
     }
   })
 }
-
-//根据部门ID获取具有查看权限的摄像头
-export function getCamerasByDeptId(deptId) {
-  return request({
-    url: '/center-environment/VisuForestMonitorCenterController/getCamerasByDeptId?deptId=' + deptId,
-    method: 'get',
-  })
-}
 /***********************************和上面方法目前一样只是入参不一样以后可能有不一样的地方 start  所以下面三个方法暂时没用到**********************/
 // // 获取环保污染源设备列表
 // export function selectListDevice(param) {

src/assets/styles/base.scss

@@ -4,7 +4,7 @@ $fontLED: led;
 
 //颜色
 $white: #fff;
-$inBlue: #26cbc6;
+$inBlue: #2bacf7;
 $subtitle: #638395;
 $inBlueHover: #07ffc1;
 $inYellow: #ffd014;
@@ -12,43 +12,46 @@ $deepBlue: #0b293a;
 $listText: #1a7988;
 $textGray: #ccc;
 $grayBlue: #5685a0;
-$tipHover: #23b8ba;
+$tipHover: #2082ba;
 $eventBG: #0b284e;
 
 
 //渐变
-$GradualGreen: 180deg, rgba($color: #1a996f, $alpha: .8),
+$GradualGreen: 180deg, rgba($color: #124799, $alpha: .8),
 rgba($color: #04151e, $alpha: .8);
 
-$conBg: 180deg, rgba($color: #0f282c, $alpha: 1),
-rgba($color: #051216, $alpha: 1);
+$conBg: 180deg, rgba($color: #0f162c, $alpha: 1),
+rgba($color: #040b1f, $alpha: 1);
 
-$btmMemu: 180deg, rgba($color: #0a2011, $alpha: 1),
-rgba($color: #012a08, $alpha: 1);
+$btmMemu: 180deg, rgba($color: #0d1620, $alpha: 1),
+rgba($color: #020f2a, $alpha: 1);
 
 $boxBG: 180deg, rgba($color: #0d2760, $alpha: 1),
 rgba($color: #081a41, $alpha: 1);
 
+$popupBG:180deg, rgba($color: #1541a0, $alpha: 1),
+rgba($color: #3566d0, $alpha: 1);
+
 //内阴影
-$shadowList: 0 0 1rem 0 rgba($color: #0b2523, $alpha: .8);
-$shadowTitle: 0 -0.2rem .5rem 0.3rem rgba($color: #15dbb4, $alpha: .09) inset;
-$shadowListHover: rgba($color: #21b387, $alpha: .7) 0px 0px 50px inset;
+$shadowList: 0 0 1rem 0 rgba($color: #0b1b25, $alpha: .8);
+$shadowTitle: 0 -0.2rem .5rem 0.3rem rgba($color: #0dc0db, $alpha: .09) inset;
+$shadowListHover: rgba($color: #0567c2, $alpha: .7) 0px 0px 50px inset;
 $shadowListHoverI: 0 0 3px rgba($color: #41ff84, $alpha: .5), -0 -0 10px rgba($color: #41fff8, $alpha: .9);
-$shadowTip: 0 0 1rem 0 rgba($color: #34c7e7, $alpha: .8) inset;
+$shadowTip: 0 0 1rem 0 rgba($color: #387ee7, $alpha: .8) inset;
 $shadowCount: 0 0 .5rem 0 rgba($color: #00c8ff, $alpha: 1) inset;
 
 //可视化 数字林业
-$fBlue: #38cb9a;
+$fBlue: #03c6e2;
 $fBlueHover: #07ffc1;
 $fBlueG: #0bf3f7;
-$fListTitle: #20cbb2;
-$barBgc: rgba($color: #102127, $alpha: .9);
-$barShadow: rgba($color: #17d1bc, $alpha: .8) 0px 0px 18px inset;
+$fListTitle: #2bacf7;
+$barBgc: rgba($color: #051520, $alpha: .9);
+$barShadow: rgba($color: #078ad1, $alpha: .8) 0px 0px 18px inset;
 $barBorder: solid rgba($color: #33467f, $alpha: .7);
 $tableBorder: solid rgba($color: #33467f, $alpha: .7);
 $countBorder: solid rgba($color: #00aeff, $alpha: .9);
-$searchBorder: solid rgba($color: #327f61, $alpha: 1);
-$searchBG: #102127;
+$searchBorder: solid rgba($color: #33467f, $alpha: 1);
+$searchBG: #101527;
 $deepBG: #09192f;
 //icon
 $iconBg: #f5ad1b, #58b35d, #0FA2FF, #da8ec5, #78bfc2, #a28e52, #ff6063, #96bd5b, #f5ad1b, #da8ec5, #5f89ce, #78bfc2, #bec278, #f07779;
@@ -79,7 +82,6 @@ $date-state1: #2abc65;
 $date-state2: #e68d3f;
 $date-state3: #d6333b;
 
-
 //视频摄像头预览弹层样式
 .videoCustomWidth {
   width: 1070px !important;
@@ -91,7 +93,6 @@ $date-state3: #d6333b;
   height: 750px !important;
 }
 
-
 //公共
 body {
   height: 100%;
@@ -230,6 +231,40 @@ ul {
   height: 100vh;
 }
 
+ //超图气泡
+ .leaflet-popup-content-wrapper {
+  // padding: 15px 20px !important;
+  background-image: -moz-linear-gradient($popupBG)!important;
+  background-image: -webkit-linear-gradient($popupBG) !important;
+  background-image: linear-gradient($popupBG)!important;
+  box-shadow: $shadowTitle !important;
+  color: #3cd7ef !important;
+
+
+}
+.leaflet-popup-tip{
+  background: #3061c9 !important;
+  color: #333;
+  box-shadow:none !important;
+}
+ //超图气泡内插槽
+  .map-tip {
+    .d-l-con {
+      width: 100%;
+      box-shadow: none;
+
+      .d-l-l-text {
+        width: 100%;
+        //white-space: nowrap;
+
+        h4 {
+          // display: flex;
+          color:$white;
+        }
+      }
+    }
+  }
+
 div::-webkit-scrollbar {
   display: none;
 }
@@ -580,6 +615,7 @@ div::-webkit-scrollbar {
     height: 780px !important;
     position: absolute;
     z-index: 999;
+
     button {
       padding: 0 .3rem;
       height: 1.5rem;
@@ -823,8 +859,8 @@ div::-webkit-scrollbar {
 
           .el-collapse-item__arrow {
             color: $inBlue;
-            position: relative;
-            left: -20.5rem;
+            position: absolute;
+            left: 1rem;
             margin: 0;
           }
 
@@ -1128,8 +1164,8 @@ div::-webkit-scrollbar {
 
           .el-collapse-item__arrow {
             color: $inBlue;
-            position: relative;
-            left: -20.5rem;
+            position: absolute;
+            left: 1rem;
             margin: 0;
           }
 
@@ -1353,22 +1389,7 @@ div::-webkit-scrollbar {
     color: $inBlue;
   }
 
-  .map-tip {
-    .d-l-con {
-      width: 100%;
-      box-shadow: none;
-
-      .d-l-l-text {
-        width: 100%;
-        //white-space: nowrap;
-
-        h4 {
-          display: flex;
-          color: #04080c;
-        }
-      }
-    }
-  }
+ 
 
   //收起展开
   .mascot {
@@ -1793,8 +1814,8 @@ div::-webkit-scrollbar {
 
     .el-collapse-item__arrow {
       color: $inBlue;
-      position: relative;
-      left: -20.5rem;
+      position: absolute;
+      left: 1rem;
       margin: 0;
     }
 
@@ -1944,6 +1965,7 @@ div::-webkit-scrollbar {
 
 }
 
+
 .d-evnet-list-con {
   padding: .5rem .5rem !important;
   align-items: flex-start !important;
@@ -2160,13 +2182,16 @@ div::-webkit-scrollbar {
     max-width: 90%;
   }
 
+
   .d-l-l-text {
     display: flex;
     align-items: center;
     flex: 1;
     color: $fListTitle;
     padding: .2rem;
-
+    .el-tooltip__popper{
+		width: 100px;
+	}
     h4 {
       font-size: .7rem;
       margin: 0;
@@ -2299,7 +2324,8 @@ div::-webkit-scrollbar {
 
   //曝光台
   .bgt-state {
-    width: 35%;
+    // width: 35%;
+	width:38%;
     padding: 0.3rem 0.5rem;
     border: 2px solid rgba(0, 174, 255, 0.9);
     -webkit-box-shadow: 0 0 0.5rem 0 #00c8ff inset;
@@ -2314,9 +2340,9 @@ div::-webkit-scrollbar {
     color: $white;
 
     .bgt-state-frequency {
-      width: 1.2rem;
-      height: 1.2rem;
-      font-size: 1rem;
+      width: 1.1rem;
+      height: 1.1rem;
+      font-size: 0.8rem;
       background-color: #1294a0;
       text-align: center;
       line-height: 1.2rem;
@@ -2349,7 +2375,8 @@ div::-webkit-scrollbar {
         width: fit-content;
         background-color: $eventStateColor-sb;
         color: $white;
-        padding: .4rem;
+        // padding: .4rem;
+		padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2371,7 +2398,8 @@ div::-webkit-scrollbar {
         width: fit-content;
         background-color: $eventStateColor-cb;
         color: $white;
-        padding: .4rem;
+        // padding: .4rem;
+		padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2393,7 +2421,8 @@ div::-webkit-scrollbar {
         width: fit-content;
         background-color: $eventStateColor-qs;
         color: $white;
-        padding: .4rem;
+        // padding: .4rem;
+		padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2415,7 +2444,8 @@ div::-webkit-scrollbar {
         width: fit-content;
         background-color: $eventStateColor-wb;
         color: $white;
-        padding: .4rem;
+        // padding: .4rem;
+		padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2437,7 +2467,8 @@ div::-webkit-scrollbar {
         width: fit-content;
         background-color: $eventStateColor-cf;
         color: $white;
-        padding: .4rem;
+        // padding: .4rem;
+		padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2459,7 +2490,8 @@ div::-webkit-scrollbar {
         width: fit-content;
         background-color: $eventStateColor-bj;
         color: $white;
-        padding: .4rem;
+        // padding: .4rem;
+		padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2481,13 +2513,13 @@ div::-webkit-scrollbar {
         width: fit-content;
         background-color: $eventStateColor-gd;
         color: $white;
-        padding: .4rem;
+        // padding: .4rem;
+		padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
       }
     }
-
     //确认
     .event-state-qr {
       display: flex;
@@ -2503,7 +2535,7 @@ div::-webkit-scrollbar {
         width: fit-content;
         background-color: $eventStateColor-qr;
         color: $white;
-        padding:0.25rem 0.4rem;
+		    padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2878,7 +2910,9 @@ div::-webkit-scrollbar {
 }
 
 .el-dialog:not(.is-fullscreen) {
-  margin-top: 10vh !important;
+  // margin-top: 10vh !important;
+  margin-top: 2vh !important;
+  z-index: 9999;
 }
 
 
@@ -2948,22 +2982,22 @@ div::-webkit-scrollbar {
   background: $GradualGreen;
   margin-right: 5px;
   color: #3cd7ef;
-  background: -webkit-gradient(linear, right top, left top, from(#052b24), color-stop(#00335c), to(#052b1d));
-  background: linear-gradient(to left, #052b28, #00575c, #042b27);
+  background: -webkit-gradient(linear, right top, left top, from(#051d2b), color-stop(#00335c), to(#051d2b));
+  background: linear-gradient(to left, #051d2b, #00335c, #051d2b);
 }
 
 .el-tabs__item:hover {
   color: #fff;
-  background: linear-gradient(to left, #051d2b, #0ba9c8, #051d2b);
-  box-shadow: rgba($color: #0ca1c2, $alpha: .8) 0px 0px 15px inset;
+  background: linear-gradient(to left, #051d2b, #006ec8, #051d2b);
+  box-shadow: rgba($color: #0567c2, $alpha: .8) 0px 0px 15px inset;
 }
 
 .el-tabs__item.is-active {
   color: #fff;
   font-size: 15px;
   font-weight: bolder;
-  background: linear-gradient(to left, #051d2b, #0ba9c8, #051d2b);
-  box-shadow: rgba($color: #13c231, $alpha: .8) 0px 0px 15px inset;
+  background: linear-gradient(to left, #051d2b, #006ec8, #051d2b);
+  box-shadow: rgba($color: #0567c2, $alpha: .8) 0px 0px 15px inset;
 }
 
 
@@ -3149,3 +3183,38 @@ div::-webkit-scrollbar {
 }
 
 
+
+
+// 20220927 林业修改
+.no_hover:hover{
+	background: none!important;
+	box-shadow: initial;
+}
+.no_hover:hover h4{
+	color:#2bacf7!important;
+}
+.no_hover:hover .event-count .count-number{
+	border: 2px solid rgb(59 193 255 / 90%);
+	-webkit-box-shadow: 0 0 0.5rem 0 #2700ff inset;
+	box-shadow: 0 0 0.5rem 0 #2700ff inset;
+	background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#55b8f7), to(#8f3bff));
+}
+
+.tree_scroll::-webkit-scrollbar{
+	width: 1px;
+	height: 4px;
+	background: #00335c;
+}
+.tz_tk .el-dialog{
+	width: 20% !important;
+}
+.tz_tk .el-form-item__label{
+	color: #d2d2d2;
+}
+
+// .d-l-l-text h4{
+// 	color:#fff!important;
+// }
+.no_hover .no-weight h4{
+	color:#2bacf7!important;
+}

src/components/TVWall.vue

@@ -283,7 +283,7 @@ export default {
       }
     },
     //火点联动电视墙调用
-    showTVWall1(longitude,latitude,tvListJson) {
+    showTVWall1(longitude, latitude, tvListJson) {
       // let that=this;
       /** ----------------------------------大华摄像头预览开始------------------------------------- */
       this.ws.addEventListener('connectStateChange', data => {
@@ -411,7 +411,12 @@ export default {
       rotation(lng,lat,list).then(res => {
       })
     },
-    showTVWall() {
+    showTVWall(tvListJson, bfArray) {
+      if(tvListJson){
+        this.preview(tvListJson, bfArray);
+        this.TVWallVisible = true;
+        return;
+      }
       // let that=this;
       /** ----------------------------------大华摄像头预览开始------------------------------------- */
       this.ws.addEventListener('connectStateChange', data => {
@@ -460,7 +465,7 @@ export default {
       this.$modal.msgWarning('请重新安装客户端')
     },
     /** 预览按钮操作 */
-    preview() {
+    preview(tvListJson, bfArray) {
       getTVWallList().then(newres => {
         getDahuaVideoServer().then(newResponse => {
           this.ws.detectConnectQt().then(res => {
@@ -484,7 +489,7 @@ export default {
                 if (res) {
                   this.alertLoginSuccess()
                   this.activePanel = 'key2'
-                  this.create(newres.data)
+                  this.create(tvListJson?tvListJson:newres.data, bfArray);
                 } else {
                   this.alertLoginFailed()
                 }
@@ -497,7 +502,7 @@ export default {
       })
     },
 
-    create(tvListJson) { // 调用创建控件接口
+    create(tvListJson, bfArray) { // 调用创建控件接口
       debugger
       let _this = this
       const params = [
@@ -519,9 +524,20 @@ export default {
       ]
       this.setPos()
       this.customizeTree(tvListJson);
-      setTimeout(function () {
-        _this.ws.createCtrl(params);
-      }, 3000);
+      _this.ws.createCtrl(params);
+      _this.playRealMonitorVideo(bfArray);
+    },
+    playRealMonitorVideo(array) { // 自定义设备树自动播放指定通道编码视频
+      const config = this.ws.config
+      const { loginIp, userCode } = config
+      this.ws.postMessage('playRealMonitorVideo', {
+        loginIp,
+        userCode,
+        params: {
+          ctrlCode: "ctrl1",
+          array: array
+        }
+      })
     },
     setPos() {
       let target = document.getElementById(this.domId)

src/components/vBottomMenu.vue

@@ -394,7 +394,14 @@
 				filterchangList: [],
 				filterchangListAll: [],
 				eventId: null,
-				eventCode: null,
+        websock: '',
+        wsuri:'ws://127.0.0.1:10012/messagePush/',
+        wsuri2:'ws://127.0.0.1:10005/taskPush/',
+        setIntervalWesocketPush: null,
+        websockSid: {
+          userId: ''
+        },
+        eventCode: null,
 				longitude: null,
 				latitude: null,
 				eventLogList: [], //事件详情日志
@@ -508,8 +515,100 @@
 				this.deptOptionsLiandong = response.data
 			})
 		},
-		methods: {
-			filterbanNode(value, data) {
+    mounted() {
+      this.websockSid.userId=Cookies.get("userId")
+    },
+    methods: {
+      initWebSocket(wsurl,userId) {        //初始化weosocket
+        //const wsuri = 'ws://127.0.0.1:10003/eventPush/' + userId + '/' + eventTypeDl + '/' + eventType
+        const wsuri = wsurl+userId
+        // const wsuri = 'ws://172.28.20.82:10012/taskPush/'+userId
+        this.websock = new WebSocket(wsuri)
+        console.log('建立websocket连接'+wsuri)
+        this.websock.onopen = this.websocketonopen
+        this.websock.onmessage = this.websocketonmessage
+        this.websock.onerror = this.websocketonerror
+      },
+      websocketonopen() { //连接建立之后执行send方法发送数据
+        console.log('websocket连接成功')
+        this.weosocket = true
+        this.sendPing()
+      },
+      websocketonerror() { //连接建立失败重连
+        this.initWebSocket(this.wsuri,this.websockSid.userId)
+      },
+      websocketonmessage(e) { //数据接收
+        console.log('接收数据', e.data)
+        // let data = "{\"fromId\":\"farming\"}";
+        // 处理收到的消息
+        this.handleWebSoceketEvent(e.data)
+      },
+      handleWebSoceketEvent(val) {
+        let that = this
+        let data = JSON.parse(val)
+        console.log('数据数据数据数据',data)
+        /**
+         * that.markersList.filter( item => data.eventCode == item.parameter).length == 0 如果地图中不存在当前事件则添加
+         * eventPush: 事件列表消息
+         * */
+        let  message=data.centermessageTPushrecord
+        let message2=data.centertaskTTask
+        if (null!=message)
+        {
+          console.log(message)
+          this.messageList.push(message)
+          this.messageCount++
+        }else if (null!=message2)
+        {
+          this.taskList.push(message2)
+          this.taskCount ++
+        }
+
+
+
+        // if (data.tag == "eventPush" && that.markersList.filter( item => data.eventCode == item.parameter).length == 0) {
+        //   getEventPush({eventCode: data.eventCode}).then((res) => {
+        //     if (res.data != undefined) {
+        //       //插入到第一条
+        //       this.eventList.unshift(res.data)
+        //       // 插入后删除最后一条 保证列表中为10条数据
+        //       if (this.eventList.length > 9)
+        //         this.eventList.splice(10, 1)
+        //       // 将收到的数据在地图上添加
+        //       this.getWebSocketEvent(res.data)
+        //     }
+        //   })
+        // }
+
+        console.log(data)
+      },
+
+
+      websocketsend(Data) { //数据发送
+        this.websock.send(Data)
+      },
+      websocketclose(e) { //关闭
+        console.log('断开连接', e)
+        // clearInterval(this.setIntervalWesocketPush)
+        this.weosocket = false
+      },
+      /**发送心跳
+       * @param {number} time 心跳间隔毫秒 默认5000
+       * @param {string} ping 心跳名称 默认字符串ping
+       */
+      sendPing(time = 60000, ping = {
+        'fromId': 'farming'
+      }) {
+        clearInterval(this.setIntervalWesocketPush)
+        this.setIntervalWesocketPush = setInterval(() => {
+          if (this.weosocket) {
+            this.websock.send(JSON.stringify(ping))
+          } else {
+            // this.initWebSocket()
+          }
+        }, time)
+      },
+      filterbanNode(value, data) {
 				//树搜索
 				if (!value) return true
 				return data.label.indexOf(value) !== -1
@@ -698,6 +797,7 @@
 					this.taskList = res.data
 					this.taskCount = res.data.length
 				})
+        this.initWebSocket(this.wsuri2,this.websockSid.userId)
 			},
 
       selectMessageById(id) {
@@ -705,6 +805,7 @@
           /** 获取消息列表 */
           this.selectMessageList();
         });
+        this.initWebSocket(this.wsuri,this.websockSid.userId)
       },
       /** 获取消息列表 */
       selectMessageList(){

src/views/datacenter.vue

@@ -8,17 +8,20 @@
       <!-- 左侧 -->
       <div class="leftbar w-10" ref="left">
         <div class="forthis">
-          <dv-border-box-13 :color="['#0e7957', '#0da24c']" backgroundColor="#09140e" style="padding-bottom: 1rem;">
+          <dv-border-box-13    backgroundColor="#09140e" style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="i-list-con h-78">
               <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.resourceTable)">
+                     v-on:click="indentleftSetMarkers(item.type)">
+                     <!--v-on:click="indentleftSetMarkers(item.resourceTable)">-->
                   <div class="iconfont icon icon-normal" :class="item.icon"></div>
                   <div class="icon-text">
-                    <h6>{{ item.count }}</h6>
-                    <h5>{{ item.resourceName }}</h5>
+                    <h6>{{ item.num }}</h6>
+                    <!--<h6>{{ item.count }}</h6>-->
+                    <h5>{{ item.name }}</h5>
+                    <!--<h5>{{ item.resourceName }}</h5>-->
                   </div>
                 </div>
               </div>
@@ -34,7 +37,7 @@
       <!-- 右侧 -->
       <div class="rightbar" ref="right">
         <div class="forthis">
-          <dv-border-box-13 :color="['#0e7957', '#0da24c']" backgroundColor="#09140e" style="padding-bottom: 1rem;">
+          <dv-border-box-13    backgroundColor="#09140e" style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="this-title">
               <span>数据分布</span>
@@ -273,13 +276,13 @@ export default {
       //获取左侧菜单列表
       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
-            .resourceTable.split('_').slice(-1))
+          // that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data.resourceTable.split('_').slice(-1))
+          console.log("data.type.split('_').slice(-1)", data.type.split('_').slice(-1));
+          that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data.type.replaceAll("_", "-"));
         })
-        console.log(that.resourcesList)
-
       })
     },
     indentleftSetMarkers(resourceTable) {

src/views/eventdetailsdialog.vue

@@ -80,7 +80,7 @@
             <el-col :span="6" class="dia-right">
               <div class="e-right">
                 <div class="forthis1">
-                  <dv-border-box-7 backgroundColor="#040b1f" :color="['#0e7957', '#0da24c']"
+                  <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']"
                                    style="padding-bottom:1rem ;">
                     <div class="i-list-con">
                       <div class="this-con">

src/views/forest.vue

@@ -9,7 +9,7 @@
       <div class="leftbar" ref="left">
         <!-- 1 基本情况 -->
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']" style="padding-bottom: 1rem;">
+          <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: .4rem;"/>
             <div class="this-title">
               <span>基本情况</span>
@@ -26,7 +26,7 @@
         </div>
         <!-- 2 事件统计-->
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']" style="padding-bottom: 1rem;">
+          <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: .4rem;"/>
             <div class="i-list-con h-29-5">
               <div class="d-l-con no_hover">
@@ -81,7 +81,7 @@
         </div>
         <!-- 3 组织机构 -->
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']" style="padding-bottom: 1rem;">
+          <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: .4rem;"/>
             <div class="i-list-con h-27" style="padding-left: 1rem;">
               <el-collapse accordion>
@@ -112,7 +112,7 @@
         <div class="right-item1">
           <!-- 天气 -->
           <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']">
+            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)"  >
               <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
               <div class="i-list-con small-bottom-margin h-18">
                 <el-row :gutter="20" v-if="todatWeather">
@@ -250,7 +250,7 @@
           </div>
           <!-- 曝光台 -->
           <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']" style="padding-bottom: 1rem;">
+            <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: .4rem;"/>
               <div class="this-title">
                 <span>超期事件</span>
@@ -277,7 +277,7 @@
           </div>
           <!-- 事件列表 -->
           <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']" style="padding-bottom: 1rem;">
+            <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: .4rem;"/>
               <div class="this-title">
                 <span>事件列表</span>
@@ -377,7 +377,7 @@
         <div class="right-item2">
           <!-- 日历 -->
           <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']" style="padding-bottom: 1rem;">
+            <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: .4rem;"/>
               <div class="i-list-con small-bottom-margin h-30">
                 <dateChoose @selectDay="selectDay"></dateChoose>
@@ -386,7 +386,7 @@
           </div>
           <!-- 事件分类 -->
           <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']" style="padding-bottom: 1rem;">
+            <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: .4rem;"/>
               <div class="this-title" style="cursor: pointer" @click="setEventTypeId({eventTypeIdDl: [], eventTypeId: []})">
                 <span>事件分类</span>
@@ -400,7 +400,7 @@
           </div>
           <!-- 上报排行 -->
           <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']" style="padding-bottom: 1rem;">
+            <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: .4rem;"/>
               <div class="this-title">
                 <span>上报排行</span>

src/views/monitor.vue

@@ -284,6 +284,44 @@ export default {
     }
   },
   methods: {
+    /* 电视墙替换开始 */
+    showTVWall(channelCode, channelName) {
+      // let channelCode = '6044981090191552';
+      // let channelName = '复兴大桥中段-交通事故';
+      let tvListJson = [
+        {
+          'switchTab': '1',
+          'treeLabels': [
+            {
+              'labelCode': '123456',
+              'labelName': '视频场景',
+              'parentLabelCode': null
+            },
+            {
+              'labelCode': 'd941adbbd3e64dac92cc448dec5293cd',
+              'labelName': channelName,
+              'parentLabelCode': 123456
+            }
+          ],
+          'labelChannels': [{
+            'channelDates': [{
+              'channelCode': channelCode,
+              'channelName': channelName,
+              'channelSn': null,
+              'cameraType': 1,
+              'online': 1
+            }],
+            'labelCode': 'd941adbbd3e64dac92cc448dec5293cd'
+          }]
+        }
+      ]
+      this.$refs.TVWall.showTVWall(tvListJson, [{"channelId": channelCode}]);
+      this.$refs.supermap.isEditableLayers = false;
+      this.$refs.bottomMenu.showChild = false;
+      this.$refs.bottomMenu.showBanChild = false;
+      this.$refs.bottomMenu.showChangChild = false;
+    },
+    /* 电视墙替换结束 */
     /** 部门树*/
 // 查询部门下拉树结构
     getTreeselect() {
@@ -441,8 +479,11 @@ export default {
               isAggregation: false
             }
             if (res.data.visuForestCloudCameraBOList[i].channelCode != null) {
-              markersMap.parameter = {code:res.data.visuForestCloudCameraBOList[i].cameraCode,
-                type:res.data.visuForestCloudCameraBOList[i].cameraFactory}
+              markersMap.parameter = {
+                code:res.data.visuForestCloudCameraBOList[i].cameraCode,
+                name:res.data.visuForestCloudCameraBOList[i].cameraName,
+                type:res.data.visuForestCloudCameraBOList[i].cameraFactory
+              }
             } else {
               markersMap.parameter = []
             }
@@ -535,8 +576,11 @@ export default {
               isAggregation: false
             }
             if (res.data[i].channelCode != null) {
-              markersMap.parameter = {code:res.data[i].cameraCode,
-                type:res.data[i].cameraFactory}
+              markersMap.parameter = {
+                code:res.data[i].cameraCode,
+                name:res.data[i].cameraName,
+                type:res.data[i].cameraFactory
+              }
             } else {
               markersMap.parameter = []
             }
@@ -642,6 +686,11 @@ export default {
     },
     /** 预览按钮操作 */
     preview(cameraParam) {
+      this.showTVWall(cameraParam.code, cameraParam.name);
+    },
+
+    /** 预览按钮操作 */
+    preview_废弃(cameraParam) {
       if(cameraParam.type=='1'){
         getDahuaVideoServer().then(newResponse => {
           console.log(newResponse)

vue.config.js

@@ -51,8 +51,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-         // target: `http://121.36.228.66:3031`,
-        target: `http://127.0.0.1:3031`,
+         target: `http://121.36.228.66:3031`,
+        // target: `http://127.0.0.1:3031`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''