websocket实时获取设备状态

src/layout/components/Device/index.vue

@@ -162,17 +162,19 @@ export default {
   },
   created() {
     this.getList();
-    this.initWebSocket();
   },
   methods: {
-    initWebSocket() {
+    initWebSocket(deviceData) {
       if (typeof WebSocket == "undefined") {
-        console.log("您的浏览器不支持WebSocket");
+        this.$message({
+          message: "您的浏览器不支持WebSocket",
+          type: "warning"
+        });
       } else {
-        console.log("您的浏览器支持WebSocket");
+        this.$message({
-        const a = "123:0";
+          message: "您的浏览器支持WebSocket",
-        const arr = a.split(":");
+          type: "success"
-        console.log(arr[0]);
+        });
         if (this.socket != null) {
           this.socket.close();
           this.socket = null;
@@ -186,20 +188,12 @@ export default {
           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;
-          
+          deviceData.forEach(element => {
-          console.log(999)
+            if (element.deviceId == deviceMsg[0]) {
-          this.deviceData.forEach(element => {
-            if (element.deviceId === deviceMsg[0]) {
               element.status = deviceMsg[1];
             }
           });
@@ -224,6 +218,7 @@ export default {
       listMusic(this.queryParams).then(result => {
         this.deviceData = result.rows;
         this.loading = false;
+        this.initWebSocket(this.deviceData);
       });
     },
     //新增按钮

src/layout/components/MusicManage/index.vue

@@ -269,6 +269,9 @@ export default {
 .pagination-container[data-v-72233bcd] {
   background: #111658;
 }
+.pagination-container{
+  margin-top:4px;
+}
 .userManagement {
   margin: 0.125rem 0 0.125rem;
 }

src/layout/components/TrackManagement/index.vue

@@ -119,7 +119,6 @@ export default {
       open: false
     };
   },
-
   //绘制音频波形图
   mounted() {
     this.$nextTick(() => {
@@ -130,7 +129,7 @@ export default {
         cursorColor: "transparent",
         barWidth: 3
       });
-       this.wavesurfer.load(require('./一吻天荒.mp3'));
+       this.wavesurfer.load(require('./不再犹豫.mp3'));
     });
   },
   methods: {

src/layout/components/User/index.vue

@@ -152,7 +152,11 @@
   font-size: 14px !important;
   color: gray !important;
 }
-
+ /* ::v-deep .el-message-box .el-input__inner{
+  background-color: #1c257f !important;
+  border: 1px solid rgba(25, 186, 139, 0.17) !important;
+  color: white;
+}  */
 </style>
 <script>
 import flexible from "@/layout/flexible.js";

src/layout/index.vue

@@ -115,16 +115,6 @@ li {
 .el-message-box__content {
   color: white;
 }
-
-/* .el-button--small {
-  background: #3835a0;
-  color: white;
-  border: none;
-}
-.el-button--small:hover {
-  background: #3835a0;
-  color: white;
-} */
 .el-button--mini{
   padding:7px 8px;
 }
@@ -343,7 +333,8 @@ header h1 {
 .el-message-box__input input.invalid{
   border-color:transparent !important;
 }
-.el-input__inner{
+
+ .el-message-box .el-input__inner{
   background-color: #1c257f ;
   border: 1px solid rgba(25, 186, 139, 0.17) ;
   color: white;