修改页面

src/layout/components/Device/index.vue

@@ -52,7 +52,7 @@
                 <img src="../../../assets/images/设置.png" class="iconImg" alt />
               </div>
               <span class="span1">设备状态</span>
-              <span class="span1">{{item.status==0?'正常':'异常'}}</span>
+              <span class="span1">{{item.status==1?'正常':'异常'}}</span>
               <!-- <template slot-scope="scope">
                 <span class="span1" v-if="scope.row.stasus == '1'">不正常</span>
                 <span class="span1" v-else-if="scope.row.status == '0'">正常</span>
@@ -78,12 +78,12 @@
             </el-col>
           </el-row>
 
-          <div :class="item.status==0?'shadows':'active'" slot="reference"></div>
+          <div :class="item.status==1?'shadows':'active'" slot="reference"></div>
         </el-popover>
         <div class="deleteIcon" @click="removeItem(index,deviceData)">
           <img src="../../../assets/images/删除.png" class="deleteImg" alt />
         </div>
-        <span class="deviceStatus">{{item.status==0?'正常':'异常'}}</span>
+        <span class="deviceStatus">{{item.status==1?'正常':'异常'}}</span>
         <span class="deviceNumber">{{item.deviceId}}</span>
 
         <img src="../../../assets/images/喇叭.png" class="deviceImg" alt />
@@ -151,11 +151,10 @@ export default {
       addDevice: false,
 
       form: {
-      
         location: null,
         deviceIp: null,
         note: null,
-        volume:null,
+        volume: null
       },
       rules: {},
       deviceData: []
@@ -163,8 +162,62 @@ export default {
   },
   created() {
     this.getList();
+    this.initWebSocket();
   },
   methods: {
+    initWebSocket() {
+      if (typeof WebSocket == "undefined") {
+        console.log("您的浏览器不支持WebSocket");
+      } else {
+        console.log("您的浏览器支持WebSocket");
+        const a = "123:0";
+        const arr = a.split(":");
+        console.log(arr[0]);
+        if (this.socket != null) {
+          this.socket.close();
+          this.socket = null;
+        }
+        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
+        this.socket = new WebSocket(
+          "ws://192.168.31.27:8080/websocket/message"
+        );
+        //打开事件
+        this.socket.onopen = function() {
+          console.log("websocket已打开");
+        };
+        //获得消息事件
+       listMusic(this.queryParams).then(result => {
+        this.deviceData = result.rows;
+        this.loading = false;
+        console.log(this.deviceData,888)
+      });
+       this.socket.onmessage = function(msg) {
+          // deviceId:0 status:'1'
+          console.log(msg.data);
+          const deviceMsg = msg.data.split(":");
+          // this.deviceData = msg.data;
+          
+          console.log(999)
+          this.deviceData.forEach(element => {
+            if (element.deviceId === deviceMsg[0]) {
+              element.status = deviceMsg[1];
+            }
+          });
+          //发现消息进入    开始处理前端触发逻辑
+        };
+        //  console.log(this.deviceData,888)
+
+        //关闭事件
+        this.socket.onclose = function() {
+          console.log("websocket已关闭");
+        };
+        //发生了错误事件
+        this.socket.onerror = function() {
+          console.log("websocket发生了错误");
+        };
+      }
+    },
+
     //查询设备数据
     getList() {
       this.loading = true;
@@ -189,9 +242,7 @@ export default {
       // this.deviceData.push({location});
     },
     //
-    deleteDevice(){
+    deleteDevice() {},
-
-    },
     //删除对应的喇叭
     removeItem(index, deviceData) {
       this.$modal
@@ -202,9 +253,7 @@ export default {
         .then(() => {
           this.$modal.msgSuccess("删除成功");
         })
-        .catch(() => {
+        .catch(() => {});
-         
-        });
     }
   }
 };

src/layout/components/MusicManage/index.vue

@@ -37,8 +37,8 @@
         <el-table-column prop="deviceIp" label="IP地址" width="130" height="25" align="center"></el-table-column>
         <el-table-column prop="status" label="设备状态" height="25" width="80" align="center">
           <template slot-scope="scope">
-            <span v-if="scope.row.status == '0'">正常</span>
+            <span v-if="scope.row.status == '1'">正常</span>
-            <span v-else-if="scope.row.status == '1'">异常</span>
+            <span v-else-if="scope.row.status == '0'">异常</span>
           </template>
         </el-table-column>
         <el-table-column prop="note" label="音符" width="70" height="25" align="center"></el-table-column>

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.31.97:8080`,
+        target: `http://192.168.31.27:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''