You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
241 lines
9.1 KiB
241 lines
9.1 KiB
<!--
|
|
* @Author: Praise-Sun 18053314396@163.com
|
|
* @Date: 2022-09-25 08:41:42
|
|
* @LastEditors: Praise-Sun 18053314396@163.com
|
|
* @LastEditTime: 2023-01-30 09:10:22
|
|
* @FilePath: \tunnel-ui\src\views\websocket.vue
|
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
-->
|
|
<template></template>
|
|
|
|
<script>
|
|
import { mapState } from "vuex";
|
|
import audioSrc from '@/assets/audio/y913.mp3';
|
|
export default {
|
|
name: "Websocket",
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
token: (state) => state.user.token,
|
|
websocket: (state) => state.user.websocket,
|
|
}),
|
|
},
|
|
watch: {
|
|
websocket({ password, path, port, interval }) {
|
|
// debugger
|
|
// console.log(path)
|
|
// console.log(port)
|
|
// console.log(location.hostname )
|
|
// 建立 websocket 连接
|
|
this.socket.initialize({
|
|
// url: 'ws://' + location.hostname + ':' + port + path,
|
|
url: 'wss://' + location.hostname + ':' + window.location.port + '/ws' || 80 + '/ws',
|
|
// url: 'wss://10.0.111.11:90/ws',
|
|
// url: "ws://10.168.66.196:7789" + path,
|
|
// url: 'ws://10.168.77.128:7789/ws',
|
|
// url: "ws://10.7.179.15" + ":" + port + path,
|
|
// url: "ws://10.168.64.171" + ":" + port + path,
|
|
// url: 'ws://10.168.78.127'+ ':' + port + path,
|
|
// url: 'ws://127.0.0.1'+ ':' + 7789 + '/ws',
|
|
password: password,
|
|
tokenSN: this.token,
|
|
heartRate: interval,
|
|
});
|
|
|
|
this.socket.onopen = () => {
|
|
|
|
};
|
|
this.socket.onmessage = (message) => {
|
|
|
|
// debugger
|
|
message = JSON.parse(message);
|
|
const method = message.method;
|
|
|
|
if (method !== "event") {
|
|
return;
|
|
}
|
|
|
|
const params = message.params;
|
|
const subEvent = params.subEvent;
|
|
const content = params.content;
|
|
let contentList;
|
|
if (_.isString(content)) {
|
|
contentList = JSON.parse(content);
|
|
} else {
|
|
contentList = content;
|
|
}
|
|
|
|
switch (subEvent) {
|
|
case "payment_webSocket_send":
|
|
this.$store.commit("PAYMENT", content);
|
|
break;
|
|
case "carList":
|
|
this.$store.commit("CARLIST", content);
|
|
break;
|
|
case "realTimeLaneTrajectory":
|
|
this.$store.commit("REALTIMELANETRAJECTORY", content);
|
|
break;
|
|
case "sdEventList":
|
|
//弹窗
|
|
this.$store.commit("SDEVENTLIST", contentList.sdEventList);
|
|
break;
|
|
case "sdSvgEventList":
|
|
//弹窗
|
|
this.$store.commit("SDSVGEVENTLIST", contentList.sdSvgEventList);
|
|
break;
|
|
case "radarDataList":
|
|
this.$store.commit("RADARDATALIST", contentList.radarDataList);
|
|
break;
|
|
case "deviceStatus":
|
|
this.$store.commit("DEVICESTATUS", contentList.deviceStatus);
|
|
break;
|
|
case "deviceStatusChangeLog":
|
|
this.$store.commit(
|
|
"DEVICESTATUSCHANGELOG",
|
|
contentList.deviceStatusChangeLog
|
|
);
|
|
break;
|
|
case "eventFlow":
|
|
this.$store.commit("EVENTFLOW", contentList.eventFlow);
|
|
break;
|
|
case "eventUntreatedNum":
|
|
this.$nextTick(() => {
|
|
this.$store.commit("EVENTUNTREATEDNUM", contentList);
|
|
});
|
|
break;
|
|
case "0":
|
|
this.$emit("newEvent", params);
|
|
this.$root.$emit('refreshMap');
|
|
break;
|
|
case "3":
|
|
case "externalPlatformOffline":
|
|
case "trafficFlowDataEarlyWarning":
|
|
this.$emit("newEvent", params);
|
|
break;
|
|
case "2":
|
|
this.triggerAlert()
|
|
this.$root.$emit('refreshMap');
|
|
setTimeout(() => {
|
|
this.$emit("newEvent", params);
|
|
}, 1000); // 1000 毫秒 = 1 秒
|
|
break;
|
|
case "1":
|
|
if(content.event.warningType==10||content.event.warningType==11){
|
|
this.triggerAlert()
|
|
setTimeout(() => {
|
|
this.$emit("newEvent", params);
|
|
}, 1000); // 1000 毫秒 = 1 秒
|
|
}else{
|
|
this.$emit("newEvent", params);
|
|
}
|
|
this.$root.$emit('refreshMap');
|
|
break;
|
|
case "deviceState":
|
|
this.EventBus.$emit("deviceState", contentList);
|
|
break;
|
|
|
|
case "eventCount":
|
|
this.$root.$emit('update-warning', content);
|
|
break;
|
|
case "eventProcess":
|
|
this.$root.$emit('update-eventProcess', content);
|
|
break;
|
|
//
|
|
default:
|
|
}
|
|
};
|
|
},
|
|
},
|
|
created() { },
|
|
methods: {
|
|
triggerAlert(){
|
|
const audio = new Audio(audioSrc);
|
|
audio.play();
|
|
}},
|
|
mounted() {
|
|
let _this = this;
|
|
if (process.env.NODE_ENV == "development") {
|
|
//测试websocket用的
|
|
return;
|
|
let deviceState = "0";
|
|
document.onkeydown = function (e) {
|
|
deviceState == "0" ? deviceState = "1" : deviceState = "0";
|
|
if (e.code == 'Space') {
|
|
// let params = {"subEvent":"eventProcess","content":{"id":3598,"eventId":"a026a03962d94089b67858d6c7e6cd42","operationTime":"2024-08-27 11:39:11","operator":"1","operatorName":"管理员","source":1,"processName":"","context":"这是处置记录","type":"text","remark":""}}
|
|
// _this.$root.$emit('update-eventProcess', params.content);
|
|
// 消息数字
|
|
// _this.$root.$emit('update-warning', Math.floor(Math.random() * 20));
|
|
// 事件弹窗
|
|
const audio = new Audio(audioSrc);
|
|
audio.play();
|
|
let params = {
|
|
"subEvent":"2","content":{"event":{"id":"ad84780896584c4ab67d034c0ab9b853","stakeMark":"K078+300","direction":"1","warningState":1,"warningTime":"2024-08-20 10:43:23","warningSource":5,"warningType":6,"warningSubclass":"6-3","warningTitle":"菏泽方向 发生障碍物(障碍物)事件","otherConfig":"","lane":"0","number":0,"longitude":"116.699758","latitude":"36.435038","duration":0,"endTime":"2024-08-20 12:00:43","createTime":"2024-08-20 11:00:43","remark":"2024年08月20日 10:43:21 K078+300 菏泽方向 发生障碍物(障碍物)事件","params":{}},"content":"菏泽方向 K078+300 发生障碍物事件"}
|
|
};
|
|
// 交通流预警
|
|
// let params = {
|
|
// "subEvent": "trafficFlowDataEarlyWarning",
|
|
// "content": {
|
|
// "id":209,
|
|
// "content":"预计2024年7月2日-7月7日，高速车流量剧增。平台预警提醒您:提前调度路管人员前往匝道等交通事故多发路段巡查，以便及时救援。"
|
|
// }
|
|
// }
|
|
// 气象预警
|
|
// let params = {
|
|
// subEvent:"3",
|
|
// content:{
|
|
// "orgName":"济南","roadId":"G003537","managerId":"YG10109","sectionId":"G00353701","managerName":"济青济南运管中心",
|
|
// "earlyWorningContent":"平阴县气象台2024年06月24日16时40分发布高温黄色预警信号。受大陆暖高压脊影响，预计25日至28日我县将出现大范围持续性高温天气，全部乡镇和街道最高气温可达35～37℃，其中28日部分地区最高气温可达40℃左右。请注意防范。",
|
|
// "earlyWorningTitle":"高温黄色","roadName":"G35济广高速","sectionName":"G35济广高速济南段","earlyWorningLevel":3,"orgCode":"370124",
|
|
// "earlyWorningContentNotic":"","stationName":"平阴","warningLevelString":"YELLOW_ALERT","earlyWarningTypeStringNumber":"6",
|
|
// "earlyWorningSignal":"6yj1","warningLevelStringNumber":"1","earlyWorningIssueDate":"2024-06-24T16:40:00","earlyWarningTypeString":"HYPERTHERMIA"}
|
|
// }
|
|
|
|
//设备故障
|
|
// let params = {
|
|
// "subEvent": "deviceOfflineRecord",
|
|
// "content": {
|
|
// "deviceOfflineRecord": {
|
|
// "id": 86,
|
|
// "deviceId": 2171,
|
|
// "iotDeviceId": "10.0.36.142-1883",
|
|
// "deviceName": "远端机(K112+037)",
|
|
// "deviceType": "16",
|
|
// "stakeMark": "K112+037",
|
|
// "direction": "1",
|
|
// "deviceIp": "10.0.36.142",
|
|
// "facilitiesType": "1",
|
|
// "longitude": "116.475787",
|
|
// "latitude": "36.221393",
|
|
// "status": "0",
|
|
// "createTime": "2024-09-21 11:05:12",
|
|
// "params": {}
|
|
// },
|
|
// "content": "K112+037菏泽方向远端机(K112+037)发生故障"
|
|
|
|
|
|
// }
|
|
// }
|
|
_this.$emit("newEvent", params);
|
|
// 测试事件变更
|
|
// let params = {
|
|
// "subEvent": "deviceState",
|
|
// "content": [
|
|
// {
|
|
// "id": 896,
|
|
// "iotDeviceId": "K67+240tynb",
|
|
// "deviceType":"2",
|
|
// deviceState
|
|
// }
|
|
// ]
|
|
// };
|
|
// _this.EventBus.$emit("deviceState", params.content );
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
};
|
|
</script>
|
|
|