报警配置及报警确认功能修改

src/App.vue

@@ -84,36 +84,6 @@
         <router-view />
       </div>
       <alarmBadge />
-      <!-- <div
-        draggable="true"
-        @dragstart="startDrag"
-        @dragend="stopDrag"
-        :style="{ left: x + 'px', top: y + 'px' }"
-        style="cursor: pointer; position: absolute; z-index: 999"
-      > 
-        <el-badge
-          :value="warnLength"
-          :class="{ active: warnLength ? false : true }"
-        >
-          <div class="alarmDeligo" @click="displayAlarm" v-if="warnLength">
-            <img src="@assets/imgs/ygj.png" class="trans" />
-            <img src="@assets/imgs/ygj1.png" />
-          </div>
-          <div class="alarmDeligo" v-if="!warnLength">
-            <img src="@assets/imgs/wgj.png" class="trans" />
-            <img src="@assets/imgs/wgj1.png" />
-          </div>
-        </el-badge>
-      </div>
-      <deligo-alarm-list
-        :dialogList="dialogList.slice(0, 12)"
-        :alarmConfigArray="alarmConfigArray"
-        @setConfig="getAlarmConfig"
-        @confirm="playAudioEffect"
-        ref="deligoChild"
-        @close="displayClose"
-        v-if="displayAlarms == true"
-      ></deligo-alarm-list> -->
     </div>
     <div v-else class="login"><login-page @onLogin="login" /></div>
   </div>
@@ -125,12 +95,9 @@ import alarmBadge from "@/components/alarm-badge/index.vue";
 import Menu from "@/views/layout/Menu.vue";
 import Header from "@/views/layout/Header.vue";
 import LoginPage from "./views/layout/login-page.vue";
-import sisView from "./views/sisView/index.vue";
 import { GetBoosterlist } from "@/api/factoryMonitor/index.js";
 import { getApiWeatherstation } from "@/api/monthlyPerformanceAnalysis";
-import deligoAlarmList from "@/components/deligoAlarmList";
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
-import { ElNotification } from "element-plus";
 import { GetDeviceTableData } from "@/api/zhbj/index.js";
 import dayjs from "dayjs";
 import $ from "jquery";
@@ -141,7 +108,6 @@ export default {
     LoginPage,
     alarmBadge,
     SvgIcon,
-    deligoAlarmList,
   },
 
   data() {
@@ -161,111 +127,8 @@ export default {
         fontsize: "16px",
         transform: "scaleY(1) scaleX(1) translate(-50%, -50%)",
       },
-      // websocket相关
-      //升压站报警ws
-      //   socketObj: "", // websocket实例对象
-      //   //心跳检测
-      //   heartCheck: {
-      //     vueThis: this, // vue实例
-      //     timeout: 30000, // 超时时间
-      //     timeoutObj: null, // 计时器对象——向后端发送心跳检测
-      //     serverTimeoutObj: null, // 计时器对象——等待后端心跳检测的回复
-      //     // 心跳检测重置
-      //     reset: function () {
-      //       clearTimeout(this.timeoutObj);
-      //       clearTimeout(this.serverTimeoutObj);
-      //       return this;
-      //     },
-      //     // 心跳检测启动
-      //     start: function () {
-      //       this.timeoutObj && clearTimeout(this.timeoutObj);
-      //       this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
-      //       this.timeoutObj = setTimeout(() => {
-      //         // 这里向后端发送一个心跳检测，后端收到后，会返回一个心跳回复
-      //         this.vueThis.socketObj.send("HeartBeat");
-      //         console.log("发送心跳检测");
-      //         this.serverTimeoutObj = setTimeout(() => {
-      //           // 如果超过一定时间还没重置计时器，说明websocket与后端断开了
-      //           console.log("未收到心跳检测回复");
-      //           // 关闭WebSocket
-      //           this.vueThis.socketObj.close();
-      //         }, this.timeout);
-      //       }, this.timeout);
-      //     },
-      //   },
-      //   socketReconnectTimer: null, // 计时器对象——重连
-      //   socketReconnectLock: false, // WebSocket重连的锁
-      //   socketLeaveFlag: false, // 离开标记（解决 退出登录再登录 时出现的 多次相同推送 问题，出现的本质是多次建立了WebSocket连接）
-      //实时报警弹窗ws
-      socketObj1: "", // websocket实例对象
-      //心跳检测
-      heartCheck1: {
-        vueThis1: this, // vue实例
-        timeout1: 30000, // 超时时间
-        timeoutObj1: null, // 计时器对象——向后端发送心跳检测
-        serverTimeoutObj1: null, // 计时器对象——等待后端心跳检测的回复
-        // 心跳检测重置
-        reset: function () {
-          clearTimeout(this.timeoutObj1);
-          clearTimeout(this.serverTimeoutObj1);
-          return this;
-        },
-        // 心跳检测启动
-        start: function () {
-          this.timeoutObj1 && clearTimeout(this.timeoutObj1);
-          this.serverTimeoutObj1 && clearTimeout(this.serverTimeoutObj1);
-          this.timeoutObj1 = setTimeout(() => {
-            // 这里向后端发送一个心跳检测，后端收到后，会返回一个心跳回复
-            this.vueThis1.socketObj1.send("HeartBeat");
-            console.log("发送心跳检测1");
-            this.serverTimeoutObj1 = setTimeout(() => {
-              // 如果超过一定时间还没重置计时器，说明websocket与后端断开了
-              console.log("未收到心跳检测回复1");
-              // 关闭WebSocket
-              this.vueThis1.socketObj1.close();
-            }, this.timeout1);
-          }, this.timeout1);
-        },
-      },
-      socketReconnectTimer1: null, // 计时器对象——重连
-      socketReconnectLock1: false, // WebSocket重连的锁
-      socketLeaveFlag1: false, // 离开标记（解决 退出登录再登录 时出现的 多次相同推送 问题，出现的本质是多次建立了WebSocket连接）
-      alarmList: [],
-      dialogList: [],
-      //实时报警图标相关
-      x: null,
-      y: null,
-      currentX: 0,
-      currentY: 0,
-      displayAlarms: false,
-      indexNum: 0,
-      data1: 0,
-      dragging: false,
 
-      initialX: 0,
-      initialY: 0,
-      timer: null,
-      firstTime: null,
-      lastTime: null,
-      key: false,
-      //请求参数
-      requestAlarmHistoryParams: [
-        {
-          alarmType: "booststation",
-          deviceType: "",
-        },
-        {
-          alarmType: "inverter",
-          deviceType: "",
-        },
-        {
-          alarmType: "windturbine",
-          deviceType: "",
-        },
-      ],
-      alarmConfigArray: [],
-      seriousWarning: false,
-      audioElement: null,
+ 
     };
   },
   computed: {
@@ -278,9 +141,7 @@ export default {
     menuLength() {
       return this.$store.state.menuData.length;
     },
-    warnLength() {
-      return this.$store.state.warnList.length;
-    },
+  
   },
   created() {},
   mounted() {
@@ -295,298 +156,7 @@ export default {
     console.log("离开标记", this.socketLeaveFlag);
   },
   methods: {
-    playAudioEffect() {
-      const lv1Config = this.getConfigItem(1);
-      let lv1Play = false;
-      if (lv1Config.isAlarmSound) {
-        lv1Play = this.dialogList.some((ele) => {
-          return ele.lv === 1 && !ele.confirm;
-        });
-      }
-
-      const lv2Config = this.getConfigItem(2);
-      let lv2Play = false;
-      if (lv2Config.isAlarmSound) {
-        lv2Play = this.dialogList.some((ele) => {
-          return ele.lv === 2 && !ele.confirm;
-        });
-      }
-
-      const lv3Config = this.getConfigItem(3);
-      let lv3Play = false;
-      if (lv3Config.isAlarmSound) {
-        lv3Play = this.dialogList.some((ele) => {
-          return ele.lv === 3 && !ele.confirm;
-        });
-      }
-
-      const lv4Config = this.getConfigItem(4);
-      let lv4Play = false;
-      if (lv4Config.isAlarmSound) {
-        lv4Play = this.dialogList.some((ele) => {
-          return ele.lv === 4 && !ele.confirm;
-        });
-      }
-
-      const lv5Config = this.getConfigItem(5);
-      let lv5Play = false;
-      if (lv5Config.isAlarmSound) {
-        lv5Play = this.dialogList.some((ele) => {
-          return ele.lv === 5 && !ele.confirm;
-        });
-      }
-      //   console.log(lv1Play, lv2Play, lv3Play, lv4Play, lv5Play);
-      if (lv5Play && !this.seriousWarning) {
-        this.seriousWarning = true;
-        this.audioElement = new Audio();
-        this.audioElement.src = "./static/sound/lv5.mp3";
-        this.audioElement.loop = true;
-        this.audioElement?.play();
-      } else if (
-        (lv1Play || lv2Play || lv3Play || lv4Play) &&
-        !this.seriousWarning
-      ) {
-        this.audioElement = new Audio();
-        this.audioElement.src = "./static/sound/lv4.mp3";
-        this.audioElement.addEventListener("ended", () => {
-          this.audioElement?.removeEventListener(
-            "ended",
-            this.stopPlayAudioEffect
-          );
-        });
-        this.audioElement?.play();
-      } else {
-        if (!this.seriousWarning) {
-          this.stopPlayAudioEffect();
-        }
-      }
-    },
-
-    stopPlayAudioEffect() {
-      this.seriousWarning = false;
-      if (this.audioElement) {
-        this.audioElement.pause();
-        this.audioElement.currentTime = 0;
-        this.audioElement.loop = false;
-      }
-      this.audioElement = null;
-    },
-    //获取报警配置
-    getAlarmConfig() {
-      if (localStorage.getItem("alarmConfigArray")) {
-        this.alarmConfigArray = JSON.parse(
-          localStorage.getItem("alarmConfigArray")
-        );
-      } else {
-        this.alarmConfigArray = [
-          {
-            id: "1",
-            alarmLevel: 1,
-            isAlart: false,
-            isAlarmSound: false,
-            isContinuousAlarm: false,
-          },
-          {
-            id: "2",
-            alarmLevel: 2,
-            isAlart: false,
-            isAlarmSound: false,
-            isContinuousAlarm: false,
-          },
-          {
-            id: "3",
-            alarmLevel: 3,
-            isAlart: true,
-            isAlarmSound: false,
-            isContinuousAlarm: false,
-          },
-          {
-            id: "4",
-            alarmLevel: 4,
-            isAlart: true,
-            isAlarmSound: true,
-            isContinuousAlarm: false,
-          },
-          {
-            id: "5",
-            alarmLevel: 5,
-            isAlart: true,
-            isAlarmSound: true,
-            isContinuousAlarm: true,
-          },
-        ];
-        localStorage.setItem(
-          "alarmConfigArray",
-          JSON.stringify(this.alarmConfigArray)
-        );
-      }
-    },
-    getAlarmName(alarmItem) {
-      let alarmName = "";
-      if (alarmItem.deviceType === "booststation") {
-        alarmName = "升压站报警";
-      } else if (alarmItem.deviceType === "inverter") {
-        alarmName = "光伏报警";
-      } else if (alarmItem.deviceType === "windturbine") {
-        alarmName = "设备报警";
-      } else if (alarmItem.deviceType === "station") {
-        alarmName = "场站";
-      }
-
-      if (alarmItem.alarmType === "custom") {
-        alarmName = "自定义报警";
-      }
-      return alarmName;
-    },
-
-    getLvName(alarmItem) {
-      if (alarmItem.rank === 1) {
-        return "低级";
-      } else if (alarmItem.rank === 2) {
-        return "低中级";
-      } else if (alarmItem.rank === 3) {
-        return "中级";
-      } else if (alarmItem.rank === 4) {
-        return "中高级";
-      } else if (alarmItem.rank === 5) {
-        return "高级";
-      }
-    },
-    //查历史报警
-    getAlarmHistory(alarmType, deviceType) {
-      let params = {
-        pageNum: 1,
-        pageSize: 5000,
-        alarmId: "",
-        alarmType,
-        stationid: "",
-        deviceid: "",
-        modelId: "",
-        components: "",
-        description: "",
-        isclose: false,
-        begin: "",
-        end: "",
-      };
-      if (params.alarmType == "windturbine") {
-        params.stationid = "SXJ_KGDL_DJY_FDC_STA";
-      } else if (params.alarmType == "inverter") {
-        params.stationid = "SXJ_KGDL_JR_GDC_STA";
-      }
-      return GetDeviceTableData(params, 12000);
-    },
-    pushALarmItem(alarmItem, type) {
-      const configItem = this.getConfigItem(alarmItem.rank);
-      const alarmOption = {
-        id: alarmItem.id ? alarmItem.id : alarmItem.tbname,
-        lv: alarmItem.rank,
-        lvName: this.getLvName(alarmItem),
-        rank: alarmItem.rank,
-        class: `animate__bounceInRight lv${alarmItem.rank}`,
-        deviceId: alarmItem.deviceId,
-        faultCause: alarmItem.faultCause,
-        resolvent: alarmItem.resolvent,
-        characteristic: alarmItem.characteristic,
-        code: alarmItem.code,
-        wpName: alarmItem.stationName
-          ? alarmItem.stationName
-          : alarmItem.wpName,
-        isClose: alarmItem.isClose
-          ? alarmItem.isClose
-          : alarmItem.closeTime
-          ? true
-          : false,
-        isCloseName:
-          alarmItem.closeTime || alarmItem.isClose ? "已解除" : "未解除",
-        alarmId: alarmItem.alarmId,
-        alarmType: alarmItem.alarmType,
-        alarmName: this.getAlarmName(alarmItem),
-        description: alarmItem.description,
-        deviceType: alarmItem.deviceType,
-        oval: alarmItem.oval,
-        triggerType: alarmItem.triggerType,
-        ts: alarmItem.ts
-          ? dayjs(alarmItem.ts).valueOf()
-          : dayjs(alarmItem.lastUpdateTime).valueOf(),
-        deviceName: alarmItem.deviceName,
-        tsName: alarmItem.ts
-          ? new Date(alarmItem.ts).formatDate("MM-dd hh:mm:ss")
-          : new Date(alarmItem.lastUpdateTime).formatDate("MM-dd hh:mm:ss"),
-        fullTsName: alarmItem.ts
-          ? new Date(alarmItem.ts).formatDate("yyyy-MM-dd hh:mm:ss")
-          : new Date(alarmItem.lastUpdateTime).formatDate(
-              "yyyy-MM-dd hh:mm:ss"
-            ),
-      };
-      if (alarmItem.alarmType == "booststation") {
-        if (
-          configItem.isAlarmSound ||
-          configItem.isAlart ||
-          configItem.isContinuousAlarm
-        ) {
-          let a = {};
-          a[`${alarmItem.stationId}`] = alarmItem.closeTime ? false : true;
-          this.alarmList.push(a);
-          this.alarmList = [
-            ...new Set(this.alarmList.map((t) => JSON.stringify(t))),
-          ].map((s) => JSON.parse(s));
-        }
-      }
-      if (
-        configItem.isAlarmSound ||
-        configItem.isAlart ||
-        configItem.isContinuousAlarm
-      ) {
-        if (type && type == "ws") {
-          this.dialogList.unshift(alarmOption);
-        } else {
-          this.dialogList.push(alarmOption);
-        }
-      }
-      this.playAudioEffect();
-    },
-    getConfigItem(lv) {
-      return (
-        this.alarmConfigArray.find((ele) => {
-          return ele.alarmLevel === lv;
-        }) || {}
-      );
-    },
-
-    // 拖拽相关
-    startDrag(event) {
-      this.currentX = event.clientX;
-      this.currentY = event.clientY;
-    },
-    stopDrag(event) {
-      let x = event.clientX - this.currentX;
-      let y = event.clientY - this.currentY;
-      this.x += x;
-      if (this.x < 60) {
-        this.x = 60;
-      } else if (this.x > window.innerWidth - 20) {
-        this.x = window.innerWidth - 82;
-      }
-      this.y += y;
-      if (this.y > window.innerHeight - 20) {
-        this.y = window.innerHeight - 82;
-      } else if (this.y < 0) {
-        this.y = 0;
-      }
-    },
-    //开关列表
-    displayAlarm(val) {
-      this.displayAlarms = !this.displayAlarms;
-      if (this.displayAlarms == true) {
-        setTimeout(() => {
-          this.$refs.deligoChild &&
-            this.$refs.deligoChild.init(this.dialogList);
-        }, 0);
-      }
-    },
-    displayClose() {
-      this.displayAlarms = false;
-    },
+ 
     getScale() {
       const w = window.innerWidth / this.style.width;
       const h = window.innerHeight / this.style.height;
@@ -642,206 +212,6 @@ export default {
     selectMenu(menuIndex) {
       this.menuIndex = menuIndex;
     },
-    // // websocket启动
-    // createWebSocket() {
-    //   //   let webSocketLink = `ws://192.168.1.102:6014/websocketBt/${this.$store.state.user.userId}_${this.$store.state.user.authToken}`;
-    //   let webSocketLink = `ws://10.81.3.154:6014/websocketBt/${this.$store.state.user.userId}_${this.$store.state.user.authToken}`; // webSocket地址
-    //   try {
-    //     if ("WebSocket" in window) {
-    //       this.socketObj = new WebSocket(webSocketLink);
-    //     }
-    //     // websocket事件绑定
-    //     this.socketEventBind();
-    //   } catch (e) {
-    //     console.log("catch" + e);
-    //     // websocket重连
-    //     this.socketReconnect();
-    //   }
-    // },
-    // // websocket事件绑定
-    // socketEventBind() {
-    //   // 连接成功建立的回调
-    //   this.socketObj.onopen = this.onopenCallback;
-    //   // 连接发生错误的回调
-    //   this.socketObj.onerror = this.onerrorCallback;
-    //   // 连接关闭的回调
-    //   this.socketObj.onclose = this.oncloseCallback;
-    //   // 向后端发送数据的回调
-    //   this.socketObj.onsend = this.onsendCallback;
-    //   // 接收到消息的回调
-    //   this.socketObj.onmessage = this.getMessageCallback;
-
-    //   //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
-    //   window.onbeforeunload = () => {
-    //     this.socketObj.close();
-    //   };
-    // },
-    // // websocket重连
-    // socketReconnect() {
-    //   if (this.socketReconnectLock) {
-    //     return;
-    //   }
-    //   this.socketReconnectLock = true;
-    //   this.socketReconnectTimer && clearTimeout(this.socketReconnectTimer);
-    //   this.socketReconnectTimer = setTimeout(() => {
-    //     // console.log("WebSocket:重连中...");
-    //     this.socketReconnectLock = false;
-    //     // websocket启动
-    //     this.createWebSocket();
-    //   }, 4000);
-    // },
-    // // 连接成功建立的回调
-    // onopenCallback: function (event) {
-    //   //   console.log("WebSocket:已连接");
-    //   // 心跳检测重置
-    //   this.heartCheck.reset().start();
-    // },
-    // // 连接发生错误的回调
-    // onerrorCallback: function (event) {
-    //   //   console.log("WebSocket:发生错误");
-    //   // websocket重连
-    //   this.socketReconnect();
-    // },
-    // // 连接关闭的回调
-    // oncloseCallback: function (event) {
-    //   //   console.log("WebSocket:已关闭");
-    //   // 心跳检测重置
-    //   this.heartCheck.reset();
-    //   if (!this.socketLeaveFlag) {
-    //     // 没有离开——重连
-    //     // websocket重连
-    //     this.socketReconnect();
-    //   }
-    // },
-    // // 向后端发送数据的回调
-    // onsendCallback: function () {
-    //   //   console.log("WebSocket:发送信息给后端");
-    // },
-    // // 接收到消息的回调
-    // getMessageCallback: function (msg) {
-    //   //   console.log(msg);
-    //   if (Object.keys(msg) && msg.data == "ok") {
-    //     // 心跳回复——心跳检测重置
-    //     // 收到心跳检测回复就说明连接正常
-    //     console.log("收到心跳检测回复");
-    //     // 心跳检测重置
-    //     this.heartCheck.reset().start();
-    //   } else {
-    //     // 普通推送——正常处理
-    //     // console.log("收到推送消息");
-    //     let data = JSON.parse(msg.data);
-    //     // 相关处理
-    //     // console.log(data);
-    //     if (data) {
-    //       this.alarmList.push(data);
-    //       this.alarmList = [
-    //         ...new Set(this.alarmList.map((t) => JSON.stringify(t))),
-    //       ].map((s) => JSON.parse(s));
-    //       this.$store.commit("changeAlarmlist", this.alarmList);
-    //     }
-    //     // localStorage.setItem("alarmList", JSON.stringify(this.alarmList));
-    //   }
-    // },
-    // websocket启动
-    createWebSocket1() {
-      //   let webSocketLink = `ws://192.168.1.102:6014/websocket/${this.$store.state.user.userId}_${this.$store.state.user.authToken}`;
-      let webSocketLink1 = `ws://10.81.3.154:6014/websocket/${this.$store.state.user.userId}_${this.$store.state.user.authToken}`; // webSocket地址
-      try {
-        if ("WebSocket" in window) {
-          this.socketObj1 = new WebSocket(webSocketLink1);
-        }
-        // websocket事件绑定
-        this.socketEventBind1();
-      } catch (e) {
-        console.log("catch" + e);
-        // websocket重连
-        this.socketReconnect1();
-      }
-    },
-    // websocket事件绑定
-    socketEventBind1() {
-      // 连接成功建立的回调
-      this.socketObj1.onopen = this.onopenCallback1;
-      // 连接发生错误的回调
-      this.socketObj1.onerror = this.onerrorCallback1;
-      // 连接关闭的回调
-      this.socketObj1.onclose = this.oncloseCallback1;
-      // 向后端发送数据的回调
-      this.socketObj1.onsend = this.onsendCallback1;
-      // 接收到消息的回调
-      this.socketObj1.onmessage = this.getMessageCallback1;
-
-      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
-      window.onbeforeunload = () => {
-        this.socketObj1.close();
-      };
-    },
-    // websocket重连
-    socketReconnect1() {
-      if (this.socketReconnectLock1) {
-        return;
-      }
-      this.socketReconnectLock1 = true;
-      this.socketReconnectTimer1 && clearTimeout(this.socketReconnectTimer1);
-      this.socketReconnectTimer1 = setTimeout(() => {
-        console.log("WebSocket1:重连中...");
-        this.socketReconnectLock1 = false;
-        // websocket启动
-        this.createWebSocket1();
-      }, 4000);
-    },
-    // 连接成功建立的回调
-    onopenCallback1: function (event) {
-      console.log("WebSocket1:已连接");
-      // 心跳检测重置
-      this.heartCheck1.reset().start();
-    },
-    // 连接发生错误的回调
-    onerrorCallback1: function (event) {
-      console.log("WebSocket1:发生错误");
-      // websocket重连
-      this.socketReconnect1();
-    },
-    // 连接关闭的回调
-    oncloseCallback1: function (event) {
-      console.log("WebSocket1:已关闭");
-      // 心跳检测重置
-      this.heartCheck1.reset();
-      if (!this.socketLeaveFlag1) {
-        // 没有离开——重连
-        // websocket重连
-        this.socketReconnect1();
-      }
-    },
-    // 向后端发送数据的回调
-    onsendCallback1: function () {
-      console.log("WebSocket1:发送信息给后端");
-    },
-    // 接收到消息的回调
-    getMessageCallback1: function (msg) {
-      //   console.log(msg);
-      if (Object.keys(msg) && msg.data == "ok") {
-        // 心跳回复——心跳检测重置
-        // 收到心跳检测回复就说明连接正常
-        console.log("收到心跳检测回复1");
-        // 心跳检测重置
-        this.heartCheck1.reset().start();
-      } else {
-        // 普通推送——正常处理
-        console.log("收到推送消息1");
-
-        let data = JSON.parse(msg.data);
-        // 相关处理
-        if (data) {
-          this.pushALarmItem(data, "ws");
-          //   this.dialogList.sort((a, b) => {
-          //     return b.lv - a.lv;
-          //   });
-          this.$store.commit("changeAlarmlist", this.alarmList);
-          this.$store.commit("setWarning", this.dialogList);
-        }
-      }
-    },
   },
 
   watch: {

src/api/zhbj/index.js

@@ -29,7 +29,7 @@ export function GetTableData(data) {
         : ""
     }&pageNum=${data.pageNum}&pageSize=${data.pageSize}&description=${
       data.description
-    }`,
+    }${data.id ? `&id=${data.id}` : ""}`,
     method: "get",
   });
 }
@@ -51,4 +51,4 @@ export const confirmAlart = (data) => {
     data,
     timeout: 60000,
   });
-};
+};

src/components/alarm-badge/alarm-setting.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="setting-dialog">
+    <div class="setting-wrapper">
+      <div class="box-title">
+        <div class="box-name">报警配置</div>
+        <div class="box-close" @click="cancle">
+          <img src="@assets/imgs/warn-close.png" />
+        </div>
+      </div>
+      <div class="box-content">
+        <el-tabs type="border-card" v-model="activeTab">
+          <el-tab-pane
+            v-for="(item, index) in configArray"
+            :key="index"
+            :name="item.id"
+          >
+            <template #label>
+              <div class="alartPaneLabel">
+                <span>{{ getAlartLevelName(item.alarmLevel) }}</span>
+                <div class="alartBadge" :class="getAlartStatus(item)"></div>
+              </div>
+            </template>
+            <el-form label-width="120px">
+              <el-form-item label="报警弹窗:">
+                <el-switch
+                  v-model="item.isAlart"
+                  active-text="弹出"
+                  inactive-text="不弹出"
+                />
+              </el-form-item>
+              <el-form-item label="播放声音:">
+                <el-switch
+                  v-model="item.isAlarmSound"
+                  active-text="播放"
+                  inactive-text="不播放"
+                />
+              </el-form-item>
+              <el-form-item label="必须确认:">
+                <el-switch
+                  v-model="item.isContinuousAlarm"
+                  active-text="是"
+                  inactive-text="否"
+                />
+              </el-form-item>
+            </el-form>
+          </el-tab-pane>
+        </el-tabs>
+        <div class="btnBox">
+          <el-button @click="save">保存配置</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { confirmAlart } from "@/api/zhbj/index.js";
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
+import dayjs from "dayjs";
+
+export default {
+  name: "alarmSetting", //首页标题栏
+  props: {
+    alarmConfigArray: {
+      type: Array,
+      required: true,
+    },
+    dialogList: {
+      type: Array,
+    },
+  },
+  components: { SvgIcon },
+  data() {
+    return {
+      displaySetting: false,
+      activeTab: "",
+      configArray: [],
+    };
+  },
+
+  created() {
+    this.activeTab = this.activeTab || this.alarmConfigArray?.[0]?.id;
+  },
+  mounted() {},
+  computed: {},
+  watch: {
+    alarmConfigArray: {
+      handler(val) {
+        if (val.length) {
+          this.configArray = JSON.parse(JSON.stringify(val));
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {
+    cancle() {
+      this.configArray = this.alarmConfigArray;
+      this.$emit("cancleConfig");
+    },
+    save() {
+      localStorage.setItem(
+        "alarmConfigArray",
+        JSON.stringify(this.configArray)
+      );
+      this.$emit("saveConfig");
+      this.BASE.showMsg({
+        type: "success",
+        msg: "修改成功",
+      });
+      this.$emit("cancleConfig");
+    },
+    getAlartStatus(alartItem) {
+      if (
+        alartItem.isAlart ||
+        alartItem.isAlarmSound ||
+        alartItem.isContinuousAlarm
+      ) {
+        return "badgeWork";
+      } else {
+        return "badgeNotworK";
+      }
+    },
+
+    getAlartLevelName(lv) {
+      if (lv === 1) {
+        return "低级";
+      } else if (lv === 2) {
+        return "低中级";
+      } else if (lv === 3) {
+        return "中级";
+      } else if (lv === 4) {
+        return "中高级";
+      } else if (lv === 5) {
+        return "高级";
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.setting-dialog {
+  position: absolute;
+  right: -12px;
+  bottom: -6px;
+  z-index: 1001;
+  width: 540px;
+  height: 510px;
+  .setting-wrapper {
+    width: 100%;
+    height: 100%;
+    border-radius: 6px;
+    background: #000;
+    background: url("~@/assets/imgs/warn-border.png") no-repeat;
+    background-size: 100% 100%;
+    .box-title {
+      width: 100%;
+      height: 60px;
+      padding: 0 22px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url("~@/assets/imgs/warn-top.png") no-repeat;
+      background-size: 100% 100%;
+      .warn-close {
+        cursor: pointer;
+      }
+    }
+    .box-content {
+      height: calc(100% - 60px);
+      padding: 0 10px;
+      .btnBox {
+        .el-button ::v-deep {
+          width: 100px;
+          background: url("~@/assets/imgs/confirmone.png") no-repeat;
+          background-size: 100% 100%;
+          height: 37px;
+          border-radius: 5px;
+          border-width: 0;
+          color: #b6afaf;
+          font-size: 16px;
+          margin-top: 10px;
+          opacity: 0.8;
+          &:hover,
+          &:focus {
+            color: #fff;
+            opacity: 1;
+            background-color: transparent;
+            border-width: 0;
+          }
+          &.cancle {
+            background: #ccc;
+            color: #3a3838;
+            &:hover,
+            &:focus {
+              color: #000;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.el-tabs ::v-deep {
+  height: calc(100% - 80px);
+  &.el-tabs--border-card {
+    background: transparent !important;
+    border-color: transparent !important;
+  }
+  &.el-tabs--border-card > .el-tabs__header {
+    background: transparent !important;
+    border-color: transparent !important;
+  }
+
+  &.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active,
+  &.el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
+    color: #fd7f00 !important;
+    background: transparent !important;
+    border-right-color: transparent !important;
+    border-left-color: transparent !important;
+  }
+}
+.el-form::v-deep {
+  .el-form-item__label {
+    color: #ccc;
+  }
+}
+.el-switch::v-deep {
+  &.is-checked .el-switch__core {
+    border-color: #fd7f00;
+    background-color: #fd7f00;
+  }
+  .el-switch__label {
+    color: #ccc;
+    &.is-active {
+      color: #fd7f00;
+    }
+  }
+}
+</style>

src/components/alarm-badge/index.vue

@@ -14,25 +14,31 @@
         <img src="@assets/imgs/ygj.png" class="trans" />
         <img src="@assets/imgs/ygj1.png" />
       </div>
-      <div class="alarmDeligo" v-if="!warnLength">
+      <div class="alarmDeligo" @dblclick="setting" v-if="!warnLength">
         <img src="@assets/imgs/wgj.png" class="trans" />
         <img src="@assets/imgs/wgj1.png" />
       </div>
     </el-badge>
     <deligo-alarm-list
-      :dialogList="dialogList.slice(0, 12)"
-      :alarmConfigArray="alarmConfigArray"
-      @setConfig="getAlarmConfig"
-      @confirm="playAudioEffect"
+      :dialogList="warnList.slice(0, 12)"
+      @setConfig="displaySetting = true"
+      @confirmed="handleConfirm"
       ref="deligoChild"
       @close="displayClose"
       v-if="displayAlarms == true"
     ></deligo-alarm-list>
+    <alarmSetting
+      v-if="displaySetting"
+      @saveConfig="getAlarmConfig"
+      @cancleConfig="displaySetting = false"
+      :alarmConfigArray="alarmConfigArray"
+    />
   </div>
 </template>
 
 <script>
 import deligoAlarmList from "@/components/deligoAlarmList";
+import alarmSetting from "@/components/alarm-badge/alarm-setting.vue";
 import { ElNotification } from "element-plus";
 import { GetDeviceTableData } from "@/api/zhbj/index.js";
 import dayjs from "dayjs";
@@ -40,6 +46,7 @@ export default {
   name: "alarmBadge",
   components: {
     deligoAlarmList,
+    alarmSetting,
   },
 
   data() {
@@ -112,6 +119,7 @@ export default {
         },
       ],
       alarmConfigArray: [],
+      displaySetting: false,
       seriousWarning: false,
       audioElement: null,
     };
@@ -120,6 +128,9 @@ export default {
     warnLength() {
       return this.$store.state.warnList.length;
     },
+    warnList() {
+      return this.$store.state.warnList;
+    },
     isLogined() {
       return this.$store.state.user?.loginState;
     },
@@ -129,8 +140,8 @@ export default {
     this.x = window.innerWidth - 82;
     this.y = window.innerHeight - 32;
     let requestResult = [];
-    this.requestAlarmHistoryParams.forEach(({ alarmType, deviceType }) => {
-      requestResult.push(this.getAlarmHistory(alarmType, deviceType));
+    this.requestAlarmHistoryParams.forEach(({ alarmType }) => {
+      requestResult.push(this.getAlarmHistory(alarmType));
     });
 
     Promise.all(requestResult)
@@ -180,6 +191,20 @@ export default {
     console.log("离开标记", this.socketLeaveFlag);
   },
   methods: {
+    setting() {
+      this.displaySetting = true;
+    },
+
+    handleConfirm(flag) {
+      this.playAudioEffect();
+      if (flag) {
+        this.dialogList = [];
+        this.$store.commit("setWarning", this.dialogList);
+        setTimeout(() => {
+          this.$refs.deligoChild && this.$refs.deligoChild.init(this.warnList);
+        }, 0);
+      }
+    },
     playAudioEffect() {
       const lv1Config = this.getConfigItem(1);
       let lv1Play = false;
@@ -338,7 +363,7 @@ export default {
       }
     },
     //查历史报警
-    getAlarmHistory(alarmType, deviceType) {
+    getAlarmHistory(alarmType) {
       let params = {
         pageNum: 1,
         pageSize: 5000,
@@ -376,13 +401,13 @@ export default {
         wpName: alarmItem.stationName
           ? alarmItem.stationName
           : alarmItem.wpName,
-        isClose: alarmItem.isClose
-          ? alarmItem.isClose
-          : alarmItem.closeTime
-          ? true
-          : false,
-        isCloseName:
-          alarmItem.closeTime || alarmItem.isClose ? "已解除" : "未解除",
+        stationId: alarmItem.stationId ? alarmItem.stationId : alarmItem.wpId,
+        isClose: alarmItem.closeTime ? true : alarmItem.endts ? true : false,
+        isCloseName: alarmItem.closeTime
+          ? "已解除"
+          : alarmItem.endts
+          ? "已解除"
+          : "未解除",
         alarmId: alarmItem.alarmId,
         alarmType: alarmItem.alarmType,
         alarmName: this.getAlarmName(alarmItem),
@@ -392,18 +417,27 @@ export default {
         triggerType: alarmItem.triggerType,
         ts: alarmItem.ts
           ? dayjs(alarmItem.ts).valueOf()
-          : dayjs(alarmItem.lastUpdateTime).valueOf(),
-        deviceName: alarmItem.deviceName,
+          : dayjs(alarmItem.updateTime).valueOf(),
+        endts: alarmItem.endts
+          ? dayjs(alarmItem.endts).format("YYYY-MM-DD HH:mm:ss")
+          : null,
+        closeTime: alarmItem.closeTime
+          ? dayjs(alarmItem.closeTime).format("YYYY-MM-DD HH:mm:ss")
+          : null,
+        deviceName: alarmItem.deviceName
+          ? alarmItem.deviceName
+          : alarmItem.code,
         tsName: alarmItem.ts
           ? new Date(alarmItem.ts).formatDate("MM-dd hh:mm:ss")
-          : new Date(alarmItem.lastUpdateTime).formatDate("MM-dd hh:mm:ss"),
+          : new Date(alarmItem.updateTime).formatDate("MM-dd hh:mm:ss"),
         fullTsName: alarmItem.ts
           ? new Date(alarmItem.ts).formatDate("yyyy-MM-dd hh:mm:ss")
-          : new Date(alarmItem.lastUpdateTime).formatDate(
-              "yyyy-MM-dd hh:mm:ss"
-            ),
+          : new Date(alarmItem.updateTime).formatDate("yyyy-MM-dd hh:mm:ss"),
       };
-      if (alarmItem.alarmType == "booststation") {
+      if (
+        alarmItem.alarmType == "booststation" &&
+        alarmItem.deviceType != "custom"
+      ) {
         if (
           configItem.isAlarmSound ||
           configItem.isAlart ||
@@ -418,9 +452,10 @@ export default {
         }
       }
       if (
-        configItem.isAlarmSound ||
-        configItem.isAlart ||
-        configItem.isContinuousAlarm
+        (configItem.isAlarmSound ||
+          configItem.isAlart ||
+          configItem.isContinuousAlarm) &&
+        alarmItem.deviceType != "custom"
       ) {
         if (type && type == "ws") {
           this.dialogList.unshift(alarmOption);
@@ -464,8 +499,7 @@ export default {
       this.displayAlarms = !this.displayAlarms;
       if (this.displayAlarms == true) {
         setTimeout(() => {
-          this.$refs.deligoChild &&
-            this.$refs.deligoChild.init(this.dialogList);
+          this.$refs.deligoChild && this.$refs.deligoChild.init(this.warnList);
         }, 0);
       }
     },

src/components/deligoAlarmList/index.vue

@@ -36,7 +36,7 @@
               :width="header.width"
             >
               <template #default="{ row }">
-                <div v-if="header.code == ''">
+                <div v-if="header.code == ''" @dblclick="handleTo(row)">
                   {{ row["wpName"] }}{{ row["deviceName"] }}设备{{
                     row["description"]
                   }}
@@ -58,17 +58,15 @@
           <div class="setting svg-icon" @click="setAlarmConfig">
             <SvgIcon svgid="svg-setting" />
           </div>
-          <el-button class="confirm-one" @click="confirm" :disabled="checkAll"
-            >选择确认
-          </el-button>
-          <el-button class="confirm-all" @click="confirm" :disabled="!checkAll"
+          <el-button class="confirm-one" @click="confirm">选择确认 </el-button>
+          <el-button class="confirm-all" @click="confirmAll"
             >全部确认
           </el-button>
         </div>
       </div>
     </div>
   </div>
-  <div class="setting-dialog" v-if="displaySetting">
+  <!-- <div class="setting-dialog" v-if="displaySetting">
     <div class="setting-wrapper">
       <div class="box-title">
         <div class="box-name">报警配置</div>
@@ -119,13 +117,13 @@
         </div>
       </div>
     </div>
-  </div>
+  </div> -->
 </template>
 
 <script>
 import { confirmAlart } from "@/api/zhbj/index.js";
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
-import { nextTick } from "vue";
+import dayjs from "dayjs";
 
 export default {
   name: "byPase", //首页标题栏
@@ -141,22 +139,17 @@ export default {
   components: { SvgIcon },
   data() {
     return {
-      displaySetting: false,
       tableHeader: [
         { title: "时间", code: "tsName", width: "120" },
         { title: "描述", code: "", width: "" },
         { title: "是否解除", code: "isCloseName", width: "80" },
       ],
       checkedRow: [],
-      checkAll: false,
-      activeTab: "",
-      configArray: [],
       warnList: [],
     };
   },
 
   created() {
-    this.activeTab = this.activeTab || this.alarmConfigArray?.[0]?.id;
     this.warnList = this.dialogList;
   },
   mounted() {},
@@ -164,22 +157,43 @@ export default {
     warnNum() {
       return this.$store.state.warnList.length;
     },
-    // warnList() {
-    //   return this.$store.state.warnList;
-    // },
-  },
-  watch: {
-    alarmConfigArray: {
-      handler(val) {
-        if (val.length) {
-          this.configArray = val;
-        }
-      },
-      immediate: true,
-      deep: true,
+    list() {
+      return this.$store.state.warnList;
     },
   },
+
   methods: {
+    handleTo(row) {
+      console.log(row);
+      if (row.alarmType == "booststation") {
+        this.$router.push({
+          path: "/stateMonitor/alarmCenter",
+          query: {
+            id: row.id,
+            stationId: row.stationId,
+            alarmType: row.alarmType,
+            ts: row.ts,
+            endts: row.isClose
+              ? dayjs(row.endts).valueOf() || dayjs(row.closeTime).valueOf()
+              : "",
+          },
+        });
+      } else {
+        this.$router.push({
+          path: "/stateMonitor/alarmCenter",
+          query: {
+            id: row.id,
+            stationId: row.stationId,
+            deviceId: row.deviceId,
+            alarmType: row.alarmType,
+            ts: row.ts,
+            endts: row.isClose
+              ? dayjs(row.endts).valueOf() || dayjs(row.closeTime).valueOf()
+              : "",
+          },
+        });
+      }
+    },
     init(list) {
       this.warnList = list;
     },
@@ -194,25 +208,9 @@ export default {
       this.configArray = this.alarmConfigArray;
       this.displaySetting = false;
     },
-    save() {
-      localStorage.setItem(
-        "alarmConfigArray",
-        JSON.stringify(this.configArray)
-      );
-      this.$emit("setConfig");
-      this.BASE.showMsg({
-        type: "success",
-        msg: "修改成功",
-      });
-      this.displaySetting = false;
-    },
+
     handleSelectionChange(rows) {
       this.checkedRow = rows;
-      if (this.checkedRow.length == this.warnNum) {
-        this.checkAll = true;
-      } else {
-        this.checkAll = false;
-      }
     },
     displayAlarm() {
       this.$emit("close");
@@ -223,55 +221,62 @@ export default {
         cancelButtonText: "取消",
         type: "warning",
       }).then(() => {
-        let arr = this.checkedRow.map((item) => {
+        let arr = [];
+
+        arr = this.checkedRow.map((item) => {
           return { alarmType: item.alarmType, id: item.id };
         });
-        setTimeout(() => {
-          confirmAlart(arr).then((res) => {
-            if (res.code === 200) {
-              this.BASE.showMsg({
-                type: "success",
-                msg: "确认成功",
-              });
-              if (this.checkAll) {
-                this.$store.commit("emptyWarning");
-                this.$emit("confirm");
-              } else {
-                this.$store.commit("removeWarning", this.checkedRow);
-                this.$emit("confirm");
+
+        confirmAlart(arr).then((res) => {
+          if (res.code === 200) {
+            this.BASE.showMsg({
+              type: "success",
+              msg: "确认成功",
+            });
+            this.checkedRow.forEach((ele) => {
+              for (let i = 0; i < this.warnList.length; i++) {
+                if (
+                  `${ele.id}${ele.ts}` ===
+                  `${this.warnList[i].id}${this.warnList[i].ts}`
+                ) {
+                  setTimeout(() => {
+                    this.warnList.splice(i, 1);
+                  }, 0);
+                  break;
+                }
               }
-            }
-          });
-        }, 500);
+            });
+            this.$store.commit("setWarning", this.warnList);
+            this.$emit("confirmed");
+          }
+        });
       });
     },
-    setAlarmConfig() {
-      this.displaySetting = true;
-    },
-    getAlartStatus(alartItem) {
-      if (
-        alartItem.isAlart ||
-        alartItem.isAlarmSound ||
-        alartItem.isContinuousAlarm
-      ) {
-        return "badgeWork";
-      } else {
-        return "badgeNotworK";
-      }
+    confirmAll() {
+      this.$confirm("您确定要执行此操作吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        let arr = [];
+        let oldList = this.warnList;
+        arr = oldList.map((item) => {
+          return { alarmType: item.alarmType, id: item.id };
+        });
+        confirmAlart(arr).then((res) => {
+          if (res.code === 200) {
+            this.BASE.showMsg({
+              type: "success",
+              msg: "确认成功",
+            });
+            this.warnList = [];
+            this.$emit("confirmed", true);
+          }
+        });
+      });
     },
-
-    getAlartLevelName(lv) {
-      if (lv === 1) {
-        return "低级";
-      } else if (lv === 2) {
-        return "低中级";
-      } else if (lv === 3) {
-        return "中级";
-      } else if (lv === 4) {
-        return "中高级";
-      } else if (lv === 5) {
-        return "高级";
-      }
+    setAlarmConfig() {
+      this.$emit("setConfig");
     },
   },
 };
@@ -382,101 +387,8 @@ export default {
     }
   }
 }
-.setting-dialog {
-  position: absolute;
-  right: -12px;
-  bottom: -6px;
-  z-index: 1001;
-  width: 540px;
-  height: 510px;
-  .setting-wrapper {
-    width: 100%;
-    height: 100%;
-    border-radius: 6px;
-    background: url("~@/assets/imgs/warn-border.png") no-repeat;
-    background-size: 100% 100%;
-    .box-title {
-      width: 100%;
-      height: 60px;
-      padding: 0 22px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      background: url("~@/assets/imgs/warn-top.png") no-repeat;
-      background-size: 100% 100%;
-      .warn-close {
-        cursor: pointer;
-      }
-    }
-    .box-content {
-      height: calc(100% - 60px);
-      padding: 0 10px;
-      .btnBox {
-        .el-button ::v-deep {
-          width: 100px;
-          background: url("~@/assets/imgs/confirmone.png") no-repeat;
-          background-size: 100% 100%;
-          height: 37px;
-          border-radius: 5px;
-          border-width: 0;
-          color: #b6afaf;
-          font-size: 16px;
-          margin-top: 10px;
-          opacity: 0.8;
-          &:hover,
-          &:focus {
-            color: #fff;
-            opacity: 1;
-            background-color: transparent;
-            border-width: 0;
-          }
-          &.cancle {
-            background: #ccc;
-            color: #3a3838;
-            &:hover,
-            &:focus {
-              color: #000;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-.el-tabs ::v-deep {
-  height: calc(100% - 80px);
-  &.el-tabs--border-card {
-    background: transparent !important;
-    border-color: transparent !important;
-  }
-  &.el-tabs--border-card > .el-tabs__header {
-    background: transparent !important;
-    border-color: transparent !important;
-  }
-
-  &.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active,
-  &.el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
-    color: #fd7f00 !important;
-    background: transparent !important;
-    border-right-color: transparent !important;
-    border-left-color: transparent !important;
-  }
-}
-.el-form::v-deep {
-  .el-form-item__label {
-    color: #ccc;
-  }
-}
-.el-switch::v-deep {
-  &.is-checked .el-switch__core {
-    border-color: #fd7f00;
-    background-color: #fd7f00;
-  }
-  .el-switch__label {
-    color: #ccc;
-    &.is-active {
-      color: #fd7f00;
-    }
-  }
+::v-deep .el-table__header-wrapper .el-checkbox {
+  // display: none;//设置不成功，页面卡顿
+  visibility: hidden;
 }
 </style>

src/store/index.js

@@ -92,9 +92,7 @@ const mutations = {
   emptyWarning(state) {
     state.warnList = [];
   },
-  changeSetConfig(state, data) {
-    state.setConfig += 1;
-  },
+
 };
 
 const actions = {

src/views/stateMonitor/alarmCenter/commonAlarm/index.vue

@@ -37,7 +37,7 @@
             </el-option>
           </el-select>
         </div>
-        <div class="select-item" v-if="alarmType == 'windturbine'">
+        <div class="select-item" v-if="alarmType != 'booststation'">
           场站：
           <el-select
             size="mini"
@@ -55,7 +55,7 @@
             </el-option>
           </el-select>
         </div>
-        <div class="select-item" v-if="alarmType == 'windturbine'">
+        <div class="select-item" v-if="alarmType != 'booststation'">
           设备：
           <el-select
             size="mini"
@@ -105,7 +105,7 @@
         </div>
       </div>
       <div class="btns">
-        <el-button round size="mini" class="buttons" @click="getTableData"
+        <el-button round size="mini" class="buttons" @click="getTableData(0)"
           >搜索</el-button
         >
       </div>
@@ -172,6 +172,8 @@ export default {
   components: {},
   data() {
     return {
+      route: { id: "", station: "", wind: "", ts: "", endts: "" },
+      routeFlag: 0,
       station: "",
       wpOptions: [],
       wind: "",
@@ -186,7 +188,11 @@ export default {
         },
         {
           code: "windturbine",
-          name: "设备报警",
+          name: "风机报警",
+        },
+        {
+          code: "inverter",
+          name: "逆变器报警",
         },
       ],
       booststation: "",
@@ -218,7 +224,7 @@ export default {
     };
   },
   created() {
-    this.GetWpOptions();
+    // this.GetWpOptions();
   },
   methods: {
     getTime(endts) {
@@ -237,34 +243,41 @@ export default {
         return "高级";
       }
     },
-    GetWpOptions() {
+    GetWpOptions(flag) {
+      this.routeFlag = flag;
       getWpList({ type: 0 }).then(({ data }) => {
         if (data && data.data.length) {
           this.wpOptions = data.data;
-          this.station = data.data[0].id;
-          this.GetWtOptions();
-          this.getTableData();
+          this.station = flag ? this.route.station : data.data[0].id;
+          if (!flag) {
+            this.getTableData(flag);
+          }
+          this.GetWtOptions(flag);
         } else {
           this.wpOptions = [];
           this.station = "";
         }
       });
     },
-    GetWtOptions() {
+    GetWtOptions(flag) {
       getApiequipmentListByWp({ wpid: this.station }).then(({ data }) => {
         if (data && data.data.length) {
           this.wtOptions = data.data;
+          this.wind = flag ? this.route.wind : "";
+          if (flag) {
+            this.getTableData(1);
+          }
         } else {
           this.wtOptions = [];
           this.wind = "";
         }
       });
     },
-    GetSubOptions() {
+    GetSubOptions(flag) {
       getSubList({ type: 0 }).then(({ data }) => {
         if (data && data.data.length) {
           this.subOptions = data.data;
-          this.sub = this.subOptions[0].id;
+          this.sub = flag ? this.route.station : this.subOptions[0].id;
           this.getTableData();
         } else {
           this.subOptions = [];
@@ -272,10 +285,10 @@ export default {
         }
       });
     },
-    getTableData() {
+    getTableData(flag) {
       this.loading = true;
       let params = {};
-      if (this.alarmType == "windturbine") {
+      if (!flag) {
         params = {
           begin: this.begin,
           end: this.end,
@@ -286,16 +299,28 @@ export default {
           pageNum: this.page.currentPage,
           pageSize: this.page.pagesize,
         };
+        if (this.alarmType != "booststation") {
+          params.deviceid = this.wind;
+        }
       } else {
         params = {
-          begin: this.begin,
-          end: this.end,
-          alarmType: this.alarmType,
-          stationid: this.sub,
+          id: this.route.id,
+          begin: this.route.ts ? this.route.ts : this.begin,
+          end: this.route.endts ? this.route.endts : this.end,
+          alarmType: this.route.alarmType
+            ? this.route.alarmType
+            : this.alarmType,
+          stationid: this.station,
           description: this.description,
           pageNum: this.page.currentPage,
           pageSize: this.page.pagesize,
         };
+        if (this.alarmType != "booststation") {
+          params.deviceid = this.wind;
+          params.stationid = this.station;
+        } else {
+          params.stationid = this.sub;
+        }
       }
       GetTableData(params).then(({ data }) => {
         this.loading = false;
@@ -317,33 +342,65 @@ export default {
     alarmTypeChanged(val) {
       this.alarmType = val;
       this.page.currentPage = 1;
-      if (val == "windturbine") {
-        this.GetWpOptions();
+      if (val != "booststation") {
+        this.GetWpOptions(0);
       } else {
-        this.GetSubOptions();
+        this.GetSubOptions(0);
       }
     },
     subChanged(val) {
       this.sub = val;
       this.page.currentPage = 1;
-      this.getTableData();
+      this.getTableData(0);
     },
     stationChanged(val) {
       this.station = val;
       this.page.currentPage = 1;
-      this.GetWtOptions();
-      this.getTableData();
+      this.GetWtOptions(0);
+      this.getTableData(0);
     },
     windChanged(val) {
       this.wind = val;
       this.page.currentPage = 1;
-      this.getTableData();
+      this.getTableData(0);
     },
     handleCurrentChange(val) {
       this.page.currentPage = val;
+      console.log(this.routeFlag);
       this.getTableData();
     },
   },
+  watch: {
+    $route: {
+      handler(val) {
+        if (val.query && Object.keys(val.query).length) {
+          this.route.id = val.query.id;
+          this.route.station = val.query.stationId;
+          this.route.wind = val.query.deviceId;
+          this.route.ts = dayjs(Number(val.query.ts)).format(
+            "YYYY-MM-DD HH:mm:ss"
+          );
+
+          this.route.endts = val.query.endts
+            ? dayjs(Number(val.query.endts)).format("YYYY-MM-DD HH:mm:ss")
+            : "";
+          this.alarmType = val.query.alarmType;
+          this.begin = this.route.ts;
+          this.end = this.route.endts ? this.route.endts : this.end;
+          if (!val.query.deviceId) {
+            this.GetSubOptions(1);
+          } else {
+            this.GetWpOptions(1);
+          }
+        } else {
+          this.route = { station: "", wind: "", ts: "", endts: "" };
+          this.GetWpOptions(0);
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
 };
 </script>
 <style scoped lang="less">