修改看板

ruoyi-ui/src/views/board/index.vue

@@ -10,20 +10,20 @@
       <div class="span1" style="top: 23.5%;left: 24%;">运行速度：</div>
       <div class="span1" style="top: 29.8%;left: 24%;">升降状态：</div>
       <div class="span1" style="top: 36.2%;left: 24%;">实时位置：</div>
-      <div class="info1" style="top: 17.3%;right: 64.5%;color:#a80d1b">停止</div>
-      <div class="info1" style="top: 23.5%;right: 64.5%;">0m/s</div>
-      <div class="info1" style="top: 29.8%;right: 64.5%;">停止</div>
-      <div class="info1" style="top: 36.2%;right: 64.5%;">位置1#</div>
+      <div class="info1" style="top: 17.3%;right: 64.5%;color:#a80d1b">{{ AlarmInfo.deviceStatus }}</div>
+      <div class="info1" style="top: 23.5%;right: 64.5%;">{{ AlarmInfo.runSpeed }}m/s</div>
+      <div class="info1" style="top: 29.8%;right: 64.5%;">{{ AlarmInfo.liftStatus }}</div>
+      <div class="info1" style="top: 36.2%;right: 64.5%;">位置{{ AlarmInfo.realAddr }}#</div>
 
 
       <div class="span2" style="top: 49.6%;left: 6%;">平均温度</div>
       <div class="span2" style="top: 49.6%;left: 24.3%;">最高温度</div>
       <div class="span2" style="top: 57.6%;left: 6%;">最低温度</div>
       <div class="span2" style="top: 57.6%;left: 24.3%;">温差</div>
-      <div class="info2" style="top: 49.6%;left: 13%;"><span style="font-size: 2vw;color: #38d6d9">19 </span> ℃</div>
-      <div class="info2" style="top: 49.6%;left: 30.5%;"><span style="font-size: 2vw;color: #fe792a">39 </span> ℃</div>
-      <div class="info2" style="top: 57.6%;left: 13%;"><span style="font-size: 2vw;color: #3fb0f2">19 </span> ℃</div>
-      <div class="info2" style="top: 57.6%;left: 30.5%;"><span style="font-size: 2vw;color: #f5f5f5">0 </span> ℃</div>
+      <div class="info2" style="top: 49.6%;left: 13%;"><span style="font-size: 2vw;color: #38d6d9">{{ TemParam.tempAvg }} </span> ℃</div>
+      <div class="info2" style="top: 49.6%;left: 30.5%;"><span style="font-size: 2vw;color: #fe792a">{{ TemParam.tempMax }} </span> ℃</div>
+      <div class="info2" style="top: 57.6%;left: 13%;"><span style="font-size: 2vw;color: #3fb0f2">{{ TemParam.tempMin }} </span> ℃</div>
+      <div class="info2" style="top: 57.6%;left: 30.5%;"><span style="font-size: 2vw;color: #f5f5f5">{{ TemParam.tempDiff }} </span> ℃</div>
 
       <div class="span3">当前状态：<span style="color:#eee">巡检中</span></div>
       <Chart class="chart1" ref="chart1"/>
@@ -303,7 +303,10 @@ export default {
           top: 58.4,
           left: 89.7
         },
-      ]
+      ],
+      AlarmInfo:{},
+      DeviceInfo:{},
+      TemParam:{}
     }
   },
   components: {
@@ -311,6 +314,7 @@ export default {
     Chart
   },
   mounted() {
+    this.getData()
     this.$refs.chart1.setData({
       "color": [
         "#00ffff",
@@ -567,7 +571,37 @@ export default {
       ]
     })
   },
-  methods: {}
+  methods: {
+    getData(){
+      // 创建一个新的WebSocket实例
+      const socket = new WebSocket('ws://192.168.2.165:7181/ws');
+
+// 当WebSocket打开时触发
+      socket.onopen = function(event) {
+        console.log('WebSocket 连接已打开');
+      };
+
+// 当服务器发送消息时触发
+      socket.onmessage = function(event) {
+        console.log('收到消息:', event.data);
+        if(event.data.AlarmInfo){
+          this.AlarmInfo = event.data.AlarmInfo
+        }
+        if(event.data.DeviceInfo){
+          this.DeviceInfo = event.data.DeviceInfo
+        }
+        if(event.data.TemParam){
+          this.TemParam = event.data.TemParam
+        }
+      };
+
+// 当WebSocket关闭时触发
+      socket.onclose = function(event) {
+        console.log('WebSocket 连接已关闭');
+      };
+
+    }
+  }
 }
 </script>
 <style>