传感器实时数据

src/views/monitor.vue

@@ -96,7 +96,8 @@
                 :class="{on:listCurrentIndex2 == index}" v-on:click="dropLocation(item.latitude,item.longitude,index)">
                 <div class="d-l-l-text">
                   <i class="iconfont sj-icon-jkzx icon-sxt"></i>
-                  <h4>{{ item.cameraName }}</h4><h4 v-html="cgqData"></h4>
+                  <h4>{{ item.cameraName }}</h4>
+                  <h4 v-if="onChuan" v-html="cgqData[index]"></h4>
                 </div>
               </div>
             </div>
@@ -201,19 +202,18 @@
       this.bottomMenuList() //获取底部公共组件消息和任务
       this.getTreeselect()
       this.deptId = Cookies.get("deptId")
-       this.getSensorListByDeptIds()
-       this.getDlblistBydeptIds()
+      this.getSensorListByDeptIds()
+      this.getDlblistBydeptIds()
       this.selectDeviceType(-1)
       // this.showTVWall();
     },
     data() {
       return {
         //摄像头名称
-        cgqData:'',
+        cgqData: [],
         rightDeptName: undefined,
         visuForestCloudCameraBOListSearch: [],
         // 部门名称
-        cgqData:'',
         deptName: undefined,
         deptId: '',
         // 部门树选项
@@ -287,8 +287,21 @@
       }
     },
     methods: {
-      setcgqValue:function(){
-        let that=this
+      setcgqValue: function() {
+        let that = this
+        for (let i = 0; i < that.visuForestCloudCameraBOListSearch.length; i++) {
+          var color = "green";
+          var value = Math.random();
+          var up = "▲";
+          var down = "▼";
+          if (value > 0.5) {
+            color = "red";
+            value = value + "" + up;
+          } else {
+            value = value + "" + down;
+          }
+          that.cgqData.push("<span style='color:" + color + "'>" + value + "</span>")
+        }
         setInterval(function() {
           var color = "green";
           var value = Math.random();
@@ -300,47 +313,44 @@
           } else {
             value = value + "" + down;
           }
-          that.cgqData =  "<span style='color:" + color + "'>" + value + "</span>";
-        }, 1000)
+          that.cgqData.push("<span style='color:" + color + "'>" + value + "</span>")
+          if (that.cgqData.length > that.visuForestCloudCameraBOListSearch.length) {
+            console.log(that.cgqData)
+            that.cgqData.splice(0, 1)
+          }
+        }, 5000)
       },
       /* 电视墙替换开始 */
       showTVWall(channelCode, channelName) {
-        let tvListJson = [
-          {
-            "switchTab": "2",
-            "treeLabels": [
-              {
-                "id": null,
-                "labelCode": "999",
-                "labelName": "电视墙",
-                "cameraType": null,
-                "parentLabelCode": ""
-              },
-              {
-                "id": "spcamera00010",
-                "labelCode": channelCode,
-                "labelName": channelName,
-                "cameraType": "1",
-                "parentLabelCode": "999"
-              }
-            ],
-            "labelChannels": [
-              {
-                "labelCode": channelCode,
-                "channelDates": [
-                  {
-                    "channelCode": channelCode,
-                    "channelName": channelName,
-                    "channelSn": null,
-                    "cameraType": "1",
-                    "online": "1",
-                    "cameraCode": "1"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
+        let tvListJson = [{
+          "switchTab": "2",
+          "treeLabels": [{
+              "id": null,
+              "labelCode": "999",
+              "labelName": "电视墙",
+              "cameraType": null,
+              "parentLabelCode": ""
+            },
+            {
+              "id": "spcamera00010",
+              "labelCode": channelCode,
+              "labelName": channelName,
+              "cameraType": "1",
+              "parentLabelCode": "999"
+            }
+          ],
+          "labelChannels": [{
+            "labelCode": channelCode,
+            "channelDates": [{
+              "channelCode": channelCode,
+              "channelName": channelName,
+              "channelSn": null,
+              "cameraType": "1",
+              "online": "1",
+              "cameraCode": "1"
+            }]
+          }]
+        }]
         this.$refs.TVWall.showTVWall(tvListJson, [{
           "channelId": channelCode
         }]);
@@ -400,9 +410,6 @@
         this.getDlblistBydeptId()
       },
       chuanClick() {
-        this.onLa = false
-        this.onShe = false
-        this.onChuan = true
         this.localMark = 'chuan'
         this.placeholderMsg = "请输入传感器名称"
         this.getSensorListByDeptId()
@@ -443,13 +450,13 @@
               }
               setTimeout(() => {
                 that.$refs.supermap.clearM();
-              that.$refs.supermap.clearMRadius()
+                that.$refs.supermap.clearMRadius()
                 that.$refs.supermap.setMarkers(markersList);
               }, 2000);
             } else {
               setTimeout(() => {
                 that.$refs.supermap.clearM();
-              that.$refs.supermap.clearMRadius()
+                that.$refs.supermap.clearMRadius()
               }, 2000);
             }
           })
@@ -461,8 +468,8 @@
         let that = this;
 
         getDlblistBydeptId(that.deptId).then(function(res) {
-          that.loudspeakerNum = res.data.length
-        })
+            that.loudspeakerNum = res.data.length
+          })
           .catch(function(error) {
             console.error(error);
           });
@@ -472,7 +479,7 @@
         let that = this;
         let markersList = [];
         getSensorListByDeptId(that.deptId).then(function(res) {
-          that.setcgqValue()
+            that.setcgqValue()
             that.visuForestCloudCameraBOListSearch = []
             // that.sensorNum = res.data.length
             if (res.data != null && res.data.length > 0) {
@@ -496,19 +503,19 @@
                   keepBindPopup: false,
                   isAggregation: false,
                 };
-                if (res.data[i].deviceType == 1) {  // 水质传感器
+                if (res.data[i].deviceType == 1) { // 水质传感器
                   markersMap.icon = "sj-icon-map-centerdata_water_quality_sensor";
-                } else if (res.data[i].deviceType == '002') {  // 水尺
+                } else if (res.data[i].deviceType == '002') { // 水尺
                   markersMap.icon = "sj-icon-map-centerdata_water_gauge";
-                } else if (res.data[i].deviceType == '003') {  // 水文监测设备
+                } else if (res.data[i].deviceType == '003') { // 水文监测设备
                   markersMap.icon = "sj-icon-map-centerdata_hydrological_monitoring_equipment";
-                } else if (res.data[i].deviceType == 2) {  // 土壤监测设备
+                } else if (res.data[i].deviceType == 2) { // 土壤监测设备
                   markersMap.icon = "sj-icon-map-centerdata_soil_monitoring_equipment";
-                } else if (res.data[i].deviceType == 4) {  // 病虫害监测站
+                } else if (res.data[i].deviceType == 4) { // 病虫害监测站
                   markersMap.icon = "sj-icon-map-centerdata_pest_and_disease_monitoring_station";
-                } else if (res.data[i].deviceType == 5) {  // 大气传感器
+                } else if (res.data[i].deviceType == 5) { // 大气传感器
                   markersMap.icon = "sj-icon-map-centerdata_atmospheric_sensor";
-                } else if (res.data[i].deviceType == 6) {  // 水压传感器
+                } else if (res.data[i].deviceType == 6) { // 水压传感器
                   markersMap.icon = "sj-icon-map-centerdata_water_pressure_sensor";
                 }
 
@@ -517,17 +524,21 @@
 
                 markersList.push(markersMap);
               }
+              that.setcgqValue()
               setTimeout(() => {
                 that.$refs.supermap.clearM();
-              that.$refs.supermap.clearMRadius()
+                that.$refs.supermap.clearMRadius()
                 that.$refs.supermap.setMarkers(markersList);
               }, 2000);
             } else {
               setTimeout(() => {
                 that.$refs.supermap.clearM();
-              that.$refs.supermap.clearMRadius()
+                that.$refs.supermap.clearMRadius()
               }, 2000);
             }
+            that.onLa = false
+            that.onShe = false
+            that.onChuan = true
           })
           .catch(function(error) {
             console.error(error);
@@ -536,9 +547,9 @@
       getSensorListByDeptIds() {
         let that = this;
         getSensorListByDeptId(that.deptId).then(function(res) {
-          that.sensorNum = res.data.length
+            that.sensorNum = res.data.length
 
-        })
+          })
           .catch(function(error) {
             console.error(error);
           });
@@ -565,7 +576,7 @@
             }
             setTimeout(() => {
               that.$refs.supermap.clearG()
-              that.$refs.supermap.setGraphicsList(this.graphicsList, 'red',0.8)
+              that.$refs.supermap.setGraphicsList(this.graphicsList, 'red', 0.8)
             }, 1000)
           } else {
             that.$refs.supermap.clearG()
@@ -737,13 +748,13 @@
               // longitude: "125.3333"
             }
             setTimeout(() => {
-                that.$refs.supermap.clearM();
+              that.$refs.supermap.clearM();
               that.$refs.supermap.clearMRadius()
               that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
             }, 3000)
           } else {
             setTimeout(() => {
-                that.$refs.supermap.clearM();
+              that.$refs.supermap.clearM();
               that.$refs.supermap.clearMRadius()
             }, 1000)
           }
@@ -825,12 +836,12 @@
             }
             setTimeout(() => {
               that.$refs.supermap.clearMRadius()
-                that.$refs.supermap.clearM();
+              that.$refs.supermap.clearM();
               that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
             }, 3000)
           } else {
             setTimeout(() => {
-                that.$refs.supermap.clearM();
+              that.$refs.supermap.clearM();
               that.$refs.supermap.clearMRadius()
             }, 1000)
           }
@@ -956,9 +967,9 @@
               })
 
               that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(
-            function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
-                that.init(newappkey, newloginIp, newsecret, newloginPort) // 创建播放实例成功后初始化
-              })
+                function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
+                  that.init(newappkey, newloginIp, newsecret, newloginPort) // 创建播放实例成功后初始化
+                })
             }, function() { // 启动插件服务失败
             })
           },
@@ -1091,4 +1102,4 @@
     height: 600px;
     border: 1px solid red;
   }
-</style>
+</style>