传感器实时数据

src/views/monitor.vue

@@ -96,7 +96,7 @@
                 :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>{{ item.cameraName }}</h4><h4 v-if="onChuan" v-html="cgqData[index]"></h4>
                 </div>
               </div>
             </div>
@@ -208,6 +208,8 @@
     },
     data() {
       return {
+
+        cgqData:[],
         //摄像头名称
         rightDeptName: undefined,
         visuForestCloudCameraBOListSearch: [],
@@ -285,7 +287,39 @@
       }
     },
     methods: {
-
+      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();
+          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>")
+          if(that.cgqData.length>that.visuForestCloudCameraBOListSearch.length){
+            console.log(that.cgqData)
+            that.cgqData.splice(0, 1)
+          }
+        }, 5000)
+      },
       /* 电视墙替换开始 */
       showTVWall(channelCode, channelName) {
         let tvListJson = [
@@ -383,12 +417,11 @@
         this.getDlblistBydeptId()
       },
       chuanClick() {
-        this.onLa = false
-        this.onShe = false
-        this.onChuan = true
+
         this.localMark = 'chuan'
         this.placeholderMsg = "请输入传感器名称"
         this.getSensorListByDeptId()
+
       },
       // 大喇叭
       getDlblistBydeptId() {
@@ -499,6 +532,7 @@
 
                 markersList.push(markersMap);
               }
+              that.setcgqValue()
               setTimeout(() => {
                 that.$refs.supermap.clearM();
               that.$refs.supermap.clearMRadius()
@@ -510,6 +544,9 @@
               that.$refs.supermap.clearMRadius()
               }, 2000);
             }
+          that.onLa = false
+          that.onShe = false
+          that.onChuan = true
           })
           .catch(function(error) {
             console.error(error);