调整首页websocket 返回字段对接table

src/views/index.vue

@@ -33,24 +33,18 @@
                 </div>
                 <div class="contain">
                   <el-table :data="index4Data"  style="margin-top:10px" height="calc(100vh - 54vh - 100px)">
-                    <!-- <el-table-column label="告警id" align="center" prop="devIdx" />
-                    <el-table-column label="告警时间" align="center" prop="time" show-overflow-tooltip />
-                    <el-table-column label="告警设备" align="center" prop="devicename" show-overflow-tooltip />
-                    <el-table-column label="设备类型" align="center" prop="dwtype" show-overflow-tooltip >
-                      <template slot-scope="scope">
-                        <span>{{ scope.row.dwtype == 2 ? '喷淋水压': scope.row.dwtype == 5 ? '消防水箱液位':  scope.row.dwtype == 6 ?
-                          'RTU': scope.row.dwtype == 16 ? '消防视频监控': scope.row.dwtype == 1 ? '用户传输装置' : '其它' }}</span>
-                      </template>
-                    </el-table-column>
-                    <el-table-column label="告警内容" align="center" prop="evtname" show-overflow-tooltip /> -->
                     <el-table-column label="告警时间" align="center" prop="alarmTime"  show-overflow-tooltip />
-                    <el-table-column label="告警内容" align="center" prop="alarmContent"  show-overflow-tooltip />
-                    <el-table-column label="告警类型" align="center" prop="deviceType"  show-overflow-tooltip />
-                    <el-table-column label="状态" align="center" prop="evt"  show-overflow-tooltip >
+                    <el-table-column label="告警内容" align="center" prop="property"  show-overflow-tooltip />
+                    <el-table-column label="设备名称" align="center" prop="deviceName"  show-overflow-tooltip />
+                    <el-table-column label="设备编号" align="center" prop="deviceId"  show-overflow-tooltip />
+                    <el-table-column label="设备类型" align="center" prop="deviceTypeName"  show-overflow-tooltip />
+                    
+                    <!-- <el-table-column label="状态" align="center" prop="evt"  show-overflow-tooltip >
                       <template slot-scope="scope">
                         <span :class="scope.row.alarmStatus == '1' ? 'handle2' : 'untreated2'">{{scope.row.alarmStatus == "1"  ? "已处理" : "未处理"}}</span>
                       </template>
-                    </el-table-column>
+                    </el-table-column> -->
+                    
                   </el-table>
                 </div>
               </el-card>
@@ -243,34 +237,50 @@ export default {
       })
     },
     initWebSocket() {
-      let arrData = [];
       let that = this
-      //let wsUri = "wss://iot.usky.cn:55120";
-      let wsUri = "wss://10.21.39.1:8083/dm/alarmPush";
-      try {
-              let websocket = new WebSocket(wsUri);
-              websocket.onopen = function(evt) {
-                var json = {};
-                json.agentid = 'admin';
-                websocket.send(JSON.stringify(json));
-              };
-          websocket.onclose = function(evt) {
-              this.initWebSocket();
-          };
-          websocket.onmessage = function(evt) {
-              let warningInfo = eval('(' + evt.data + ')');
-              if(warningInfo.dwtype){
-                that.index4Data.push(warningInfo)
-              }
-
-          };
-          websocket.onerror = function(evt) {
-              (function() {})()
-          };
-      } catch (exception) {
-          (function() {})()
-      }
+      let num = 0
+      if ("WebSocket" in window) {
+				this.ws = new WebSocket("ws://10.21.39.1:8084/dm/alarmPush");
+				console.log(this.ws)
+				this.ws.onopen = ()=> {
+				console.log("websocket连接成功");
+				this.sendWs({agentid:'admin'});
+				};
+				this.ws.onmessage = (res) => { //接收websocket消息
+					console.log(res)
+					let warningInfo = JSON.parse(res.data)
+          that.index4Data.push(warningInfo)
+          if(num == '0'){
+            if(that.initList.length>2){
+              that.dataScrolling();
+              num = 1
+            }
+          }
+				};
+				this.ws.onclose = ()=> { //关闭websocket
+					// 关闭 websocket
+					//console.log("连接已关闭...");
+					//断线重新连接
+					setTimeout(() => {
+						this.initWebSocket();
+					}, 2000);
+				}
+			} else {
+				// 浏览器不支持 WebSocket
+				alert("您的浏览器不支持 WebSocket!");
+			}
+      
     },
+    sendWs(val){
+			if (this.ws && this.ws.readyState == 1) {
+				this.ws.send(JSON.stringify(val));
+				// console.log('发送成功')
+			} else {
+				setTimeout(() => {
+				  this.sendWs(val);
+				}, 100);
+			}
+		},
 
   }
 }