|
|
|
|
@ -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(() => {});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
