jihe-hs/ruoyi-ui/src/views/websocket.vue

<!--
 * @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";
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: '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,

        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":
          case "1":
          case "2":
          case "3":
          case "trafficFlowDataEarlyWarning":
            this.$emit("newEvent", params);
            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: {},
  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)); 
          // 事件弹窗
          // 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"}  
          // }
          // _this.$emit("newEvent", params);

          // 测试事件变更
          // let params = {
          //   "subEvent": "deviceState",
          //   "content": [
          //     {
          //       "id": 896, 
          //       "iotDeviceId": "K67+240tynb", 
          //       "deviceType":"2",
          //       deviceState
          //     }
          //   ]
          // };
          // _this.EventBus.$emit("deviceState", params.content );
        }

      }
    }
  }
};
</script>