实现报警弹窗、报警设置、报警声音功能

src/App.vue

@@ -83,23 +83,35 @@
       >
         <router-view />
       </div>
-      <!-- <div
-        @mousedown="startDrag"
+      <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="data1" class="item">
-          <div class="alarmDeligo" @click.stop="displayAlarm('1')">
-            <img src="@assets/imgs/gjfc.png" class="trans" />
-            <img src="@assets/imgs/gjfcl.png" />
+        <el-badge
+          :value="warnLength"
+          :class="{ active: warnLength ? false : true }"
+          @click="displayAlarm('1')"
+        >
+          <div class="alarmDeligo">
+            <img src="@assets/imgs/ygj.png" v-if="warnLength" class="trans" />
+            <img src="@assets/imgs/ygj1.png" v-if="warnLength" />
+            <img src="@assets/imgs/wgj.png" v-if="!warnLength" class="trans" />
+            <img src="@assets/imgs/wgj1.png" v-if="!warnLength" />
           </div>
         </el-badge>
       </div>
       <deligo-alarm-list
+        :alarmConfigArray="alarmConfigArray"
+        @setConfig="getAlarmConfig"
+        @confirm="playAudioEffect"
         ref="deligoChild"
         :displayAlarms="displayAlarms"
+        @close="displayAlarm('2')"
         v-if="displayAlarms == true"
-      ></deligo-alarm-list> -->
+      ></deligo-alarm-list>
     </div>
     <div v-else class="login"><login-page @onLogin="login" /></div>
   </div>
@@ -115,6 +127,9 @@ 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";
 export default {
   components: {
@@ -144,8 +159,8 @@ export default {
         transform: "scaleY(1) scaleX(1) translate(-50%, -50%)",
       },
       // websocket相关
+      //升压站报警ws
       socketObj: "", // websocket实例对象
-      socketObj1: "", // websocket实例对象
       //心跳检测
       heartCheck: {
         vueThis: this, // vue实例
@@ -178,6 +193,8 @@ export default {
       socketReconnectTimer: null, // 计时器对象——重连
       socketReconnectLock: false, // WebSocket重连的锁
       socketLeaveFlag: false, // 离开标记（解决 退出登录再登录 时出现的 多次相同推送 问题，出现的本质是多次建立了WebSocket连接）
+      //实时报警弹窗ws
+      socketObj1: "", // websocket实例对象
       //心跳检测
       heartCheck1: {
         vueThis1: this, // vue实例
@@ -210,23 +227,42 @@ export default {
       socketReconnectTimer1: null, // 计时器对象——重连
       socketReconnectLock1: false, // WebSocket重连的锁
       socketLeaveFlag1: false, // 离开标记（解决 退出登录再登录 时出现的 多次相同推送 问题，出现的本质是多次建立了WebSocket连接）
-      alarmList: {},
+      alarmList: [],
       dialogList: [],
-      //报警弹窗相关
+      //实时报警图标相关
       x: null,
       y: null,
+      currentX: 0,
+      currentY: 0,
       displayAlarms: false,
       indexNum: 0,
       data1: 0,
       dragging: false,
-      currentX: 0,
-      currentY: 0,
+
       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: {
@@ -239,11 +275,12 @@ export default {
     menuLength() {
       return this.$store.state.menuData.length;
     },
+    warnLength() {
+      return this.$store.state.warnList.length;
+    },
   },
   created() {
-    // var windowElement = document.getElementById("screen");
-    // var viewportWidth = windowElement.clientWidth;
-    // var viewportHeight = windowElement.clientHeight;
+    this.getAlarmConfig();
     this.x = this.style.width - 82;
     this.y = this.style.height - 82;
     let that = this;
@@ -252,6 +289,48 @@ export default {
       "class",
       themeName === "dark" || themeName === "light" ? themeName : "dark"
     );
+    let requestResult = [];
+    this.requestAlarmHistoryParams.forEach(({ alarmType, deviceType }) => {
+      requestResult.push(this.getAlarmHistory(alarmType, deviceType));
+    });
+
+    Promise.all(requestResult)
+      .then((promiseResult) => {
+        promiseResult.forEach(({ data }) => {
+          data?.records?.forEach((ele) => {
+            this.pushALarmItem(ele);
+          });
+        });
+        this.dialogList.sort((a, b) => {
+          return b.lv - a.lv;
+        });
+        this.$store.commit("changeAlarmlist", this.alarmList);
+        this.$store.commit("setWarning", this.dialogList);
+        this.socketReconnect1();
+      })
+      .catch(() => {
+        requestResult.forEach((ele, index) => {
+          ele
+            .then(({ data }) => {
+              data?.ls?.forEach((ele) => {
+                this.pushALarmItem(ele);
+              });
+            })
+            .catch((error) => {
+              ElNotification({
+                type: "error",
+                title: "查询历史未处理报警请求出错！",
+                dangerouslyUseHTMLString: true,
+                message: `<div class="currentRequestErrorNotification">
+                                <p><span>主要参数：</p>
+                                <p style="color:var(--el-color-primary)"><span class="errorTitle">alarmType:</span><span class="errorDesc">"${this.requestAlarmHistoryParams[index].alarmType}"</span></p>
+                                <p style="color:var(--el-color-primary)"><span class="errorTitle">deviceType:</span><span class="errorDesc">"${this.requestAlarmHistoryParams[index].deviceType}"</span></p>
+                                <p style="color:var(--el-color-danger)"><span class="errorTitle">错误正文:</span><span class="errorDesc">${error}</span></p>
+                             </div>`,
+              });
+            });
+        });
+      });
   },
   mounted() {
     let that = this;
@@ -263,61 +342,296 @@ export default {
     if (!this.socketLeaveFlag) {
       // 没有离开——重连
       // websocket重连
-      this.socketReconnect();
-      //   this.socketReconnect1();
+      //   this.socketReconnect();
     }
   },
   unmounted() {
     console.log("离开标记", this.socketLeaveFlag);
   },
   methods: {
-    // 拖拽
-    startDrag(event) {
-      this.key = false;
-      this.firstTime = new Date().getTime();
-      event.preventDefault();
-      this.initialX = event.clientX - this.x;
-      this.initialY = event.clientY - this.y;
-      this.dragging = true;
-      document.addEventListener("mousemove", this.drag);
-      document.addEventListener("mouseup", this.stopDrag);
-    },
-    drag(event) {
-      if (!this.dragging) return;
-      this.currentX = event.clientX - this.initialX;
+    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;
+        });
+      }
 
-      if (event.clientY - this.initialY < 0) {
-        this.currentY = 0;
+      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 {
-        this.currentY = event.clientY - this.initialY;
+        if (!this.seriousWarning) {
+          this.stopPlayAudioEffect();
+        }
       }
-      this.x = this.currentX;
-      this.y = this.currentY;
     },
-    stopDrag() {
-      // 根据时间差判断click
-      this.lastTime = new Date().getTime();
-      if (this.lastTime - this.firstTime < 90) {
-        this.key = true;
+
+    stopPlayAudioEffect() {
+      this.seriousWarning = false;
+      if (this.audioElement) {
+        this.audioElement.pause();
+        this.audioElement.currentTime = 0;
+        this.audioElement.loop = false;
       }
-      if (this.currentX != 0 && this.currentY != 0) {
-        this.dragging = false;
-        document.removeEventListener("mouseup", this.stopDrag);
-        document.removeEventListener("mousemove", this.drag);
+      this.audioElement = null;
+    },
+    //获取报警配置
+    getAlarmConfig() {
+      if (localStorage.getItem("alarmConfigArray")) {
+        this.alarmConfigArray = JSON.parse(
+          localStorage.getItem("alarmConfigArray")
+        );
       } else {
-        return;
+        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,
+        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) {
-      if (this.key) {
-        this.displayAlarms = !this.displayAlarms;
-        if (val == "1") {
-          setTimeout(() => {
-            this.$refs.deligoChild.getByEquipmentId();
-          }, 15);
+      if (this.warnLength) {
+        if (val == 2) {
+          this.displayAlarms = false;
+        } else if (val == 1) {
+          this.displayAlarms = !this.displayAlarms;
         }
-        document.removeEventListener("mouseup", this.stopDrag);
-        document.removeEventListener("mousemove", this.drag);
       }
     },
     getScale() {
@@ -372,108 +686,114 @@ export default {
       this.getBooster();
       this.getCftlist();
       // websocket启动
-      this.createWebSocket();
+      //   this.createWebSocket();
     },
     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启动
+    // 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);
-        this.alarmList = data;
-        this.$store.commit("changeAlarmlist", data);
-      }
-    },
+    //   //监听窗口关闭事件，当窗口关闭时，主动去关闭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/websocketBt/${this.$store.state.user.userId}_${this.$store.state.user.authToken}`;
+      //   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) {
@@ -548,7 +868,7 @@ export default {
     },
     // 接收到消息的回调
     getMessageCallback1: function (msg) {
-      console.log(msg);
+      //   console.log(msg);
       if (Object.keys(msg) && msg.data == "ok") {
         // 心跳回复——心跳检测重置
         // 收到心跳检测回复就说明连接正常
@@ -558,46 +878,22 @@ export default {
       } else {
         // 普通推送——正常处理
         console.log("收到推送消息1");
+
         let data = JSON.parse(msg.data);
         // 相关处理
-        console.log(data);
-        // this.alarmList = data;
-        // this.$store.commit("changeAlarmlist", 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: {
-    $route(res) {
-      this.showSisView = res.fullPath === "/sisView";
-
-      this.hideHeard = res.query.hideheard || "0";
-      this.hideMenus = res.query.hidemenus || "0";
-      if (res.query.theme) {
-        const theme = res.query.theme === "dark" ? "dark" : "light";
-        this.$store.dispatch("changeTheme", theme);
-        $("#appBody").attr("class", theme);
-      }
-
-      if (res.query.fn) {
-        this[res.query.fn] && this[res.query.fn]();
-      }
-
-      let ActiveModule = null;
-      this.menuData.forEach((pEle) => {
-        if (pEle.path === res.fullPath) {
-          ActiveModule = pEle;
-        }
-        pEle?.children?.forEach((cEle) => {
-          if (cEle.path === res.fullPath) {
-            ActiveModule = cEle;
-          }
-        });
-      });
-      if (ActiveModule) {
-        this.$store.dispatch("changeModuleName", ActiveModule.text);
-      }
-    },
     "$store.state.menuData"(res) {
       this.menuData = res;
     },
@@ -636,7 +932,7 @@ export default {
   transition: 0.3s;
 }
 .alarmDeligo {
-  z-index: 999;
+  z-index: 2003;
   position: relative;
 
   img {
@@ -648,9 +944,9 @@ export default {
 
   img:first-child {
     width: 53px;
-    height: 53px;
+    height: 57px;
     max-width: 53px;
-    top: -5px;
+    top: -7px;
     left: -5px;
     position: absolute;
     z-index: 3;
@@ -801,7 +1097,13 @@ body {
   background-size: cover;
   position: relative;
 }
-
+.el-badge {
+  &.active {
+    .el-badge__content--danger {
+      opacity: 0 !important;
+    }
+  }
+}
 .el-badge__content--danger {
   background: #ff4e00 !important;
   border: none !important;
@@ -809,7 +1111,7 @@ body {
 .el-badge__content.is-fixed {
   top: 7px !important;
   right: 14px !important;
-  z-index: 999 !important;
+  z-index: 2003 !important;
 }
 
 .trans {

src/api/zhbj/index.js

@@ -1,7 +1,7 @@
 import request from "@/tools/request";
 
 //获取设备报警列表数据
-export function GetDeviceTableData(data) {
+export function GetDeviceTableData(data, timeout = 5000) {
   return request({
     baseURL: process.env.VUE_APP_ALARM,
     url: `/alarminfo/findAlarmlist?begin=${data.begin}&end=${
@@ -14,6 +14,7 @@ export function GetDeviceTableData(data) {
       data.description
     }&isclose=${data.isclose}`,
     method: "get",
+    timeout,
   });
 }
 //获取报警列表数据
@@ -32,3 +33,22 @@ export function GetTableData(data) {
     method: "get",
   });
 }
+//查询历史报警记录
+export const alarm_history = (params, timeout = 9000) => {
+  return request({
+    url: `alarm/history/findAlarmlist`,
+    params: params,
+    baseURL: process.env.VUE_APP_ALARM,
+    timeout,
+  });
+};
+
+export const confirmAlart = (data) => {
+  return request({
+    method: "post",
+    baseURL: process.env.VUE_APP_ALARM,
+    url: "alarm/history/updateAlarms",
+    data,
+    timeout: 60000,
+  });
+};

src/assets/styles/el-override/el-input.less

@@ -5,7 +5,7 @@ body {
     background: fade(@gray, 20);
     color: @gray-l;
   }
-  
+
   .el-input {
     &.is-disabled .el-input__inner {
       background-color: fade(@gray-l, 20);
@@ -151,7 +151,21 @@ body {
       border-color: @green;
     }
   }
+  .warn-table {
+    .el-checkbox__input.is-checked + .el-checkbox__label {
+      color: #d35400;
+    }
+
+    .el-checkbox__input.is-checked .el-checkbox__inner,
+    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+      background-color: #d35400;
+      border-color: #d35400;
+    }
 
+    .el-checkbox__input.is-focus .el-checkbox__inner {
+      border-color: #d35400;
+    }
+  }
   // 树组件
   .el-tree {
     color: @gray-l;

src/assets/styles/el-override/el-table.less

@@ -1,5 +1,6 @@
 // el-table
 .main-body,
+.warn-table,
 .df-table {
   .el-table,
   .custom-table.el-table {
@@ -119,11 +120,29 @@
   .el-table__footer-wrapper tbody td {
     background: #1a1f2fcc;
   }
+  //   .el-table__body tr.hover-row.current-row > td,
+  //   .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
+  //   .el-table__body tr.hover-row.el-table__row--striped > td,
+  //   .el-table__body tr.hover-row > td {
+  //     background: transparent;
+  //     color: @green;
+  //   }
 }
-.el-table__body tr.hover-row.current-row > td,
-.el-table__body tr.hover-row.el-table__row--striped.current-row > td,
-.el-table__body tr.hover-row.el-table__row--striped > td,
-.el-table__body tr.hover-row > td {
-  background: transparent;
-  color: @green;
+.warn-table {
+  .el-table {
+    thead th.el-table__cell {
+      background: rgba(83, 89, 104, 0.3);
+    }
+    &.el-table--striped .el-table__body tr.el-table__row--striped td {
+      background-color: #161415;
+    }
+    tr {
+      &:hover {
+        td {
+          color: #d35400 !important;
+          background-color: transparent !important;
+        }
+      }
+    }
+  }
 }

src/components/windDetail/index.vue

@@ -124,92 +124,103 @@
       </div>
     </div>
     <div class="parts">
-      <div class="part-title">
-        <div
-          class="title-item part-left"
-          :class="{ active: current === 'fdj' }"
-          @click="handleClick('fdj')"
-        >
-          发电机
-        </div>
-        <div
-          class="title-item"
-          :class="{ active: current === 'clx' }"
-          @click="handleClick('clx')"
-        >
-          齿轮箱
-        </div>
-        <div
-          class="title-item"
-          :class="{ active: current === 'bj' }"
-          @click="handleClick('bj')"
-        >
-          变桨
-        </div>
-        <div
-          class="title-item"
-          :class="{ active: current === 'ph' }"
-          @click="handleClick('ph')"
-        >
-          偏航
-        </div>
-        <div
-          class="title-item"
-          :class="{ active: current === 'yy' }"
-          @click="handleClick('yy')"
-        >
-          液压
-        </div>
-        <div
-          class="title-item"
-          :class="{ active: current === 'jc' }"
-          @click="handleClick('jc')"
-        >
-          机舱信息
+      <div class="part-top">
+        <div class="part-title">
+          <div
+            class="title-item part-left"
+            :class="{ active: current === 'fdj' }"
+            @click="handleClick('fdj')"
+          >
+            发电机
+          </div>
+          <div
+            class="title-item"
+            :class="{ active: current === 'clx' }"
+            @click="handleClick('clx')"
+          >
+            齿轮箱
+          </div>
+          <div
+            class="title-item"
+            :class="{ active: current === 'bj' }"
+            @click="handleClick('bj')"
+          >
+            变桨
+          </div>
+          <div
+            class="title-item"
+            :class="{ active: current === 'ph' }"
+            @click="handleClick('ph')"
+          >
+            偏航
+          </div>
+          <div
+            class="title-item"
+            :class="{ active: current === 'yy' }"
+            @click="handleClick('yy')"
+          >
+            液压
+          </div>
+          <div
+            class="title-item"
+            :class="{ active: current === 'jc' }"
+            @click="handleClick('jc')"
+          >
+            机舱信息
+          </div>
+          <div
+            class="title-item part-right"
+            :class="{ active: current === 'qt' }"
+            @click="handleClick('qt')"
+          >
+            其他
+          </div>
         </div>
-        <div
-          class="title-item part-right"
-          :class="{ active: current === 'qt' }"
-          @click="handleClick('qt')"
-        >
-          其他
+        <div class="part-imgs">
+          <img
+            v-if="current === 'fdj'"
+            class="wind-part"
+            :style="{ width: flag ? '650px' : '800px' }"
+            src="@assets/imgs/fdj.png"
+          />
+          <img
+            v-if="current === 'clx'"
+            class="wind-part"
+            :style="{ width: flag ? '650px' : '800px' }"
+            src="@assets/imgs/clx.png"
+          />
+          <img
+            v-if="current === 'bj'"
+            class="wind-part"
+            :style="{ width: flag ? '650px' : '800px' }"
+            src="@assets/imgs/bj.png"
+          />
+          <img
+            v-if="current === 'ph'"
+            class="wind-part"
+            :style="{ width: flag ? '650px' : '800px' }"
+            src="@assets/imgs/ph.png"
+          />
+          <img
+            v-if="current === 'yy'"
+            class="wind-part"
+            :style="{ width: flag ? '650px' : '800px' }"
+            src="@assets/imgs/yy.png"
+          />
+          <img
+            v-if="current === 'jc'"
+            class="wind-part"
+            :style="{ width: flag ? '650px' : '800px' }"
+            src="@assets/imgs/jc.png"
+          />
+          <img
+            v-if="current === 'qt'"
+            class="wind-part"
+            :style="{ width: flag ? '650px' : '800px' }"
+            src="@assets/imgs/qt.png"
+          />
         </div>
       </div>
-      <img
-        v-if="current === 'fdj'"
-        class="wind-part"
-        src="@assets/imgs/fdj.png"
-      />
-      <img
-        v-if="current === 'clx'"
-        class="wind-part"
-        src="@assets/imgs/clx.png"
-      />
-      <img
-        v-if="current === 'bj'"
-        class="wind-part"
-        src="@assets/imgs/bj.png"
-      />
-      <img
-        v-if="current === 'ph'"
-        class="wind-part"
-        src="@assets/imgs/ph.png"
-      />
-      <img
-        v-if="current === 'yy'"
-        class="wind-part"
-        src="@assets/imgs/yy.png"
-      />
-      <img
-        v-if="current === 'jc'"
-        class="wind-part"
-        src="@assets/imgs/jc.png"
-      />
-      <img
-        v-if="current === 'qt'"
-        class="wind-part"
-        src="@assets/imgs/qt.png"
-      />
       <div class="part-info">
         <div
           class="part-body"
@@ -320,14 +331,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    showHeight: {
-      type: String,
-      default: "87vh",
-    },
-    partHeight: {
-      type: String,
-      default: "15vh",
-    },
   },
   computed: {
     windSpeedRota() {
@@ -797,14 +800,20 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
-    position: relative;
-
+    justify-content: space-between;
+    // position: relative;
+    .part-top {
+      flex: 1;
+      width: 100%;
+      text-align: center;
+    }
     .part-title {
       width: 100%;
       height: 30px;
       display: flex;
+      align-items: center;
       flex-direction: row;
-
+      justify-content: center;
       .title-item {
         width: 140px;
         height: 100%;
@@ -834,16 +843,20 @@ export default {
         }
       }
     }
-
+    .part-imgs {
+      min-height: calc(100% - 30px);
+      position: relative;
+    }
     .wind-part {
-      width: 700px;
-      margin-top: 100px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
     }
 
     .part-info {
       width: 100%;
-      // height: 30vh;
-      position: absolute;
+      max-height: 440px;
       bottom: 0px;
       display: flex;
       flex-direction: column-reverse;

src/store/index.js

@@ -18,7 +18,9 @@ const state = {
   cftList: JSON.parse(localStorage.getItem("cftList")) || [],
   boosterAlarm: JSON.parse(localStorage.getItem("boosterAlarm")) || 0,
   drawer: JSON.parse(localStorage.getItem("drawer")) || false,
-  alarmList: JSON.parse(localStorage.getItem("alarmList")) || {},
+  alarmList: JSON.parse(localStorage.getItem("alarmList")) || [],
+  warnList: [],
+  setConfig: 1,
 };
 
 //改变状态的方法`
@@ -60,11 +62,45 @@ const mutations = {
   },
   changeAlarmlist(state, data) {
     state.alarmList = data;
-    localStorage.setItem("alarmList", JSON.stringify(data));
+    localStorage.setItem("alarmList", JSON.stringify(state.alarmList));
+  },
+  setWarning(state, data) {
+    state.warnList = data;
+    // localStorage.setItem("warnList", JSON.stringify(state.warnList));
+  },
+  changeWarning(state, data) {
+    state.warnList.unshift(data);
+    // localStorage.setItem("warnList", JSON.stringify(state.warnList));
+  },
+  removeWarning(state, data) {
+    if (Array.isArray(data)) {
+      data.forEach((ele) => {
+        for (let i = 0; i < state.warnList.length; i++) {
+          if (
+            `${ele.id}${ele.ts}` ===
+            `${state.warnList[i].id}${state.warnList[i].ts}`
+          ) {
+            setTimeout(() => {
+              state.warnList.splice(i, 1);
+            }, 0);
+            break;
+          }
+        }
+      });
+    }
+  },
+  emptyWarning(state) {
+    state.warnList = [];
+  },
+  changeSetConfig(state, data) {
+    state.setConfig += 1;
   },
 };
 
 const actions = {
+  actionAlarmList(context, newData) {
+    context.commit("changeAlarmlist", newData);
+  },
   getupdate(context, newData) {
     context.commit("update", newData);
   },
@@ -91,6 +127,6 @@ export default createStore({
   actions,
   getters,
 
-  strict: debug,
+  strict: false,
   plugins: debug ? [createLogger()] : [],
 });

src/views/stateMonitor/DetailMatrix/index.vue

@@ -291,7 +291,7 @@
             <div class="title">设备详情</div>
           </div>
         </template>
-        <div class="dialog-body" style="height: 800px">
+        <div class="dialog-body" style="height: 900px">
           <img class="dialog-img" src="@assets/imgs/dialog.png" />
           <windDetail
             v-show="wtType == -1"

src/views/stateMonitor/LightMatrix/index.vue

@@ -388,7 +388,7 @@
         <div class="title">设备详情</div>
       </div>
     </template>
-    <div class="dialog-body" style="height: 800px">
+    <div class="dialog-body" style="height: 900px">
       <img class="dialog-img" src="@assets/imgs/dialog.png" />
       <windDetail
         v-show="wtType == -1"

src/views/stateMonitor/factoryMonitor/windPowerPlant/boosterStation/index.vue

@@ -133,7 +133,7 @@ import YLZ from "./components/YLZ.vue";
 import YF from "./components/YF.vue";
 import ZK from "./components/ZK.vue";
 import MLJ from "./components/MLJ.vue";
-import { GetTableData } from "@/api/zhbj/index.js";
+import { GetDeviceTableData } from "@/api/zhbj/index.js";
 import dayjs from "dayjs";
 export default {
   name: "boosterStation",
@@ -238,7 +238,7 @@ export default {
         pageSize: this.page.pagesize,
         isclose: false,
       };
-      GetTableData(params).then(({ data }) => {
+      GetDeviceTableData(params).then(({ data }) => {
         if (data.records.length) {
           this.drawerList = data.records.map((item) => {
             return {

src/views/stateMonitor/factoryMonitor/windPowerPlant/draughtFan/index.vue

@@ -12,7 +12,7 @@
         />
       </div>
       <div class="detail">
-        <windDetail ref="windDetail" partHeight="20vh"></windDetail>
+        <windDetail ref="windDetail"></windDetail>
       </div>
     </div>
   </div>

src/views/stateMonitor/factoryMonitor/windPowerPlant/matrixMonitor/index.vue

@@ -285,7 +285,7 @@
         <div class="title">设备详情</div>
       </div>
     </template>
-    <div class="dialog-body" style="height: 800px">
+    <div class="dialog-body" style="height: 900px">
       <img class="dialog-img" src="@assets/imgs/dialog.png" />
       <windDetail :wind="wind" :flag="flag"></windDetail>
     </div>

src/views/stateMonitor/focus/syzDetails.vue

@@ -506,10 +506,16 @@ export default {
       this.allHeight = type;
     },
     getAlarm(key) {
-      if (this.alarmList && Object.keys(this.alarmList)) {
-        for (let a in this.alarmList) {
-          if (a.includes(key)) return this.alarmList[a];
-        }
+      if (this.alarmList && this.alarmList.length) {
+        // for (let a in this.alarmList) {
+        //   if (a.includes(key)) return this.alarmList[a];
+        // }
+        let a = this.alarmList.find((item) => {
+          for (let b in item) {
+            if (b.includes(key)) return item;
+          }
+        });
+        return a ? Object.values(a)[0] : false;
       }
     },
     getStationName(key, type = "") {

src/views/stateMonitor/powerPredictMatrix/components/multiple-line-chart.vue

@@ -42,7 +42,11 @@ export default {
   computed: {
     series() {
       let series = [];
-      if (this.chartData && this.chartData.xAxis.length) {
+      if (
+        this.chartData &&
+        this.chartData.xAxis &&
+        this.chartData.xAxis.length
+      ) {
         for (let key in this.chartData) {
           this.chartName.forEach((ele) => {
             if (ele.code == key) {