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;
        if(_.isString(content)){
          var contentList = JSON.parse(content);
        }else{
          var 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":
            this.$emit("newEvent", params);
            break;
          default:
        }
      };
    },
  },
  created() {},
  methods: {},
  mounted(){
    let _this = this;
    if (process.env.NODE_ENV == "development"){
      let et = 1;
      document.onkeydown = function (e) {
        let tp = _.sample(["0", "1", "0", "1", "0", "0", "0", "1", "0"]);
          
          if (e.code == 'Space') {
            let params = {
              "subEvent": tp,
              "content": {
                "event": {
                  "id": "1555c6599eb14e3fb68d04e512182ee7",
                  "deptId": 103,
                  "stakeMark": "K059+289",
                  "endStakeMark": "",
                  "direction": "1",
                  "userId": 1,
                  "estimatedEndTime": "2024-04-11 00:00:00",
                  "eventType": et,
                  "eventSubclass": "3-2",
                  "eventState": 0,
                  "eventSource": 1,
                  "inTunnel": 0,
                  "roadId": 1,
                  "occurrenceTime": "2024-04-10 16:56:02",
                  "warning_time": "2024-04-10 16:56:02",
                  "lang": "",
                  "dcEventTrafficControl": {
                    "controlType": 1,
                    "controlCause": 1,
                    "exitsInlets": 2,
                    "facilityId": 11,
                    "measure": 1,
                    "classify": 1,
                    "facilityIds": [
                      11
                    ]
                  },
                  "createTime": "2024-05-08 18:02:40"
                },
                "content": "菏泽方向 K059+289 发生收费站封闭和限行事件"
              }
            };
            _this.$emit("newEvent", params);
          }

          if(tp == "0"){
            et++;
            if (et >= 12) {
              et = 1;
            }
          }
        }
      }
  }
};
</script>