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

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/deligoAlarmList/index.vue

@@ -1,186 +1,124 @@
 <template>
-  <div style="position: fixed; right: 0; bottom: 2px; z-index: 2">
-    <div
-      style="
-        width: 540px;
-        height: 510px;
-        border: 1px solid #00549a;
-        border-top: none;
-        background: rgba(11, 12, 12);
-        position: absolute;
-        bottom: 25px;
-        right: 17px;
-      "
-    >
-      <div
-        style="position: absolute; right: -1px; top: 1px; cursor: pointer"
-        @click="displayAlarm"
-      >
-        <!-- <img src="@assets/img/images/close.png"> -->
-      </div>
-      <div class="blge">
-        <div class="titleAlarm">
-          <div style="margin-left: 30px">
-            <!-- <img src="@assets/img/images/alarmicon.png"> -->
-          </div>
-          <div @click="handAll" style="margin-left: -20px; cursor: pointer">
-            <div style="font-size: 20px; font-family: Bicubik; color: #ffffff">
-              {{ handAlls.length }}
-            </div>
-            <div style="color: #ffffff; font-size: 14px">实时告警</div>
-          </div>
-
-          <div
-            :class="{ zhong: indexNum == 0 }"
-            @dblclick="ch()"
-            @click="handZhong(powerStation)"
-            style="margin-left: 50px; cursor: pointer"
-            class="lineList"
-          >
-            <p class="left_p"></p>
-            <p class="right_p"></p>
-            <div class="alarmNum" style="color: rgb(227, 47, 53)">
-              {{ indexNum1 }}
-            </div>
-            <div class="alarmdis">重度告警</div>
-          </div>
-          <div
-            :class="{ content: indexNum == 1 }"
-            style="cursor: pointer"
-            @dblclick="ch()"
-            @click="handContent"
-            class="lineList"
-          >
-            <p class="left_p"></p>
-            <p class="right_p"></p>
-            <div class="alarmNum" style="color: #e37b2f">
-              {{ indexNum2 }}
-            </div>
-            <div class="alarmdis">中度告警</div>
-          </div>
-          <div
-            :class="{ qing: indexNum == 2 }"
-            style="cursor: pointer"
-            @dblclick="ch()"
-            @click="handQing"
-            class="lineList"
-          >
-            <p class="left_p"></p>
-            <p class="right_p"></p>
-            <div class="alarmNum" style="color: #3681cd">
-              {{ indexNum3 }}
-            </div>
-            <div class="alarmdis">轻度告警</div>
+  <div class="warn-dialog">
+    <div class="warn-wrapper">
+      <div class="warn-top">
+        <div class="warn-title">
+          <div class="warn-icon">
+            <img src="@assets/imgs/warn-icon.png" />
           </div>
+          <div class="warn-name">实时告警</div>
+          <div class="warn-num">{{ warnNum }}</div>
+        </div>
+        <div class="warn-close" @click="displayAlarm">
+          <img src="@assets/imgs/warn-close.png" />
         </div>
-        <div class="dialog">
-          <div>
-            <el-table
-              @selection-change="handleSelectionChange"
-              select-on-indeterminate
-              ref="scrollTable"
-              :header-cell-style="handerMethod"
-              :data="powerStation"
-              size="mini"
-              stripe
-              @select="changeSelect"
-              height="322px"
-              style="width: 100%"
+      </div>
+      <div class="warn-list">
+        <div class="warn-table">
+          <el-table
+            @selection-change="handleSelectionChange"
+            select-on-indeterminate
+            :header-cell-style="handerMethod"
+            :data="warnList"
+            size="mini"
+            stripe
+            @select="changeSelect"
+            height="100%"
+            width="100%"
+          >
+            <el-table-column type="selection" width="40" align="center">
+            </el-table-column>
+            <el-table-column type="index" width="45" align="center">
+            </el-table-column>
+            <el-table-column
+              v-for="(header, index) in tableHeader"
+              :key="index"
+              :label="header.title"
+              align="center"
+              :prop="header.code"
+              show-overflow-tooltip
+              :width="header.width"
             >
-              <el-table-column
-                type="index"
-                label="序号"
-                :align="'center'"
-                width="40"
-              ></el-table-column>
-              <el-table-column label="级别" :align="'center'" width="70">
-                <template v-slot="scope">
-                  <div
-                    style="width: 50px; margin: auto; border-radius: 3px"
-                    :style="{ color: scope.row.color, border: scope.row.bor }"
-                  >
-                    {{ scope.row.alarmLevel }}
-                  </div>
-                </template>
-              </el-table-column>
-              <el-table-column
-                prop="alarmType"
-                label="告警类型"
-                :align="'center'"
-                width="65"
-              ></el-table-column>
-              <el-table-column
-                prop=""
-                label="告警名称"
-                :align="'center'"
-                width="170"
-              >
-                <template v-slot="scope">
-                  <div
-                    @click="hiddDetails(scope.row.id)"
-                    style="
-                      overflow: hidden;
-                      white-space: nowrap;
-                      width: 170px;
-                      cursor: pointer;
-                    "
-                  >
-                    {{ scope.row.alarmName }}
-                  </div>
-                </template>
-              </el-table-column>
-
-              <el-table-column
-                prop="startTime"
-                label="发生时间"
-                class-name="sssd"
-                :align="'center'"
-                width="145"
-              ></el-table-column>
-              <el-table-column type="selection" width="25" class-name="ssss">
-              </el-table-column>
-            </el-table>
-          </div>
-          <div style="margin-top: 20px">
-            <el-button @click="deleteon">删除</el-button>
-            <el-button class="determine" @click="sure">确认</el-button>
-          </div>
+              <template #default="{ row }">
+                <div v-if="header.code == ''">
+                  {{ row["stationName"] }}{{ row["deviceName"] }}设备{{
+                    row["description"]
+                  }}
+                </div>
+                <div v-else>
+                  {{ row[header.code] }}
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="warn-btns">
+          <el-button class="confirm-one" @click="confirm" :disabled="checkAll"
+            >选择确认
+          </el-button>
+          <el-button class="confirm-all" @click="confirm" :disabled="!checkAll"
+            >全部确认
+          </el-button>
+          <i class="setting svg-icon" @click="setAlarmConfig">
+            <SvgIcon svgid="svg-setting" />
+          </i>
         </div>
       </div>
-      <div class="lineLeft"></div>
     </div>
-    <el-dialog
-      width="50%"
-      top="120px"
-      v-model="displayDetails"
-      :show-close="true"
-      :destroy-on-close="true"
-    >
-      <template #title>
-        <div class="dialog-title">
-          <!-- <img class="dialog-title-img" src="@assets/img/images/dialog-title.png"/> -->
-          <div class="title" style="margin-top: 0">告警详情</div>
+  </div>
+  <div class="setting-dialog" v-if="displaySetting">
+    <div class="setting-wrapper">
+      <div class="box-title">报警配置</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="cancle" class="cancle">取消修改</el-button>
+          <el-button @click="save">保存规则</el-button>
         </div>
-      </template>
-      <!-- <img class="dialog-img" style="position:absolute;right: 0px;bottom: 40px"  src="@assets/img/images/dialog.png"/>-->
-
-      <div class="dialog-body" style="height: 58vh; padding: 0 15px">
-        <alarmMore :dareson="dareson" :lightCode="lightCode"></alarmMore>
       </div>
-      <el-row style="position: absolute; bottom: 25px; right: 25px">
-        <el-button class="searchColor" type="primary" @click="sureMut" round
-          >确认</el-button
-        >
-        <el-button class="delecolor" round @click="cancelMultiys"
-          >取消</el-button
-        >
-      </el-row>
-    </el-dialog>
+    </div>
   </div>
 </template>
 
 <script>
-// import { DateAlarmRecordsById } from "../../api/home";
+import { confirmAlart } from "@/api/zhbj/index.js";
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
 // import alarmMore from "../alarmMore";
 // import {
 //   GetRecordByAlarmId,
@@ -191,615 +129,327 @@ export default {
   name: "byPase", //首页标题栏
   //   components: { alarmMore },
   props: {
-    dareson: {
-      type: Object,
+    alarmConfigArray: {
+      type: Array,
+      required: true,
     },
   },
+  components: { SvgIcon },
   data() {
     return {
-      page: {
-        pagesize: 8,
-        currentPage: 1,
-        total: 0,
-      },
-      dareson: [],
-      displayDetails: false,
-      poverStat: [],
-      numList: 8,
-      indexNum: 3,
-      powerStation: [],
-      indexNum1: 0,
-      indexNum2: 0,
-      indexNum3: 0,
-      pageSize: 10,
-      handAlls: [],
-      de: false,
-      deCon: false,
-      deQing: false,
-      ss: "",
-      timer: null,
-      dede: [],
-      
+      displaySetting: false,
+      tableHeader: [
+        { title: "时间", code: "tsName", width: "120" },
+        { title: "描述", code: "", width: "" },
+        { title: "是否解除", code: "isCloseName", width: "80" },
+      ],
+      checkedRow: [],
+      checkAll: false,
+      activeTab: "",
+      configArray: [],
     };
   },
 
-  created() {},
-  mounted() {
-    this.$nextTick(function () {
-      this.setColSpan();
-      this.addRollListener();
-    });
+  created() {
+    this.activeTab = this.activeTab || this.alarmConfigArray?.[0]?.id;
   },
-
-  methods: {
-    setColSpan: function () {
-      var s = document.getElementsByClassName("ssss");
-      var x = document.getElementsByClassName("sssd");
-      x[0].colSpan = 2;
-      s[0].style.display = "none";
-      s[0].id = "delete";
+  mounted() {},
+  computed: {
+    warnNum() {
+      return this.$store.state.warnList.length;
+    },
+    warnList() {
+      return this.$store.state.warnList;
     },
-    addRollListener() {
-      const dom = this.$refs.scrollTable.$refs.bodyWrapper;
-      dom.addEventListener("scroll", () => {
-        const scrollTop = dom.scrollTop;
-        const offsetHeight = dom.offsetHeight;
-        const clientHeight = dom.clientHeight;
-        const scrollHeight = dom.scrollHeight;
-        if (
-          clientHeight + scrollTop + 1 > scrollHeight ||
-          offsetHeight + scrollTop >= scrollHeight
-        ) {
-          this.pageSize += 5;
-          let ss = this.deepClone(this.poverStat);
-          this.powerStation = ss.splice(0, this.pageSize);
+  },
+  watch: {
+    alarmConfigArray: {
+      handler(val) {
+        if (val.length) {
+          this.configArray = val;
         }
-      });
+      },
+      immediate: true,
+      deep: true,
     },
-    sureMut() {
-      //   this.getyPowerstationId(this.dareson.id);
+  },
+  methods: {
+    cancle() {
+      this.configArray = this.alarmConfigArray;
+      this.displaySetting = false;
     },
-
-    async getyPowerstationId(val) {
-      const data = await DateAlarmRecordsById({
-        alarmIds: val,
-        type: 0,
+    save() {
+      localStorage.setItem(
+        "alarmConfigArray",
+        JSON.stringify(this.configArray)
+      );
+      this.$emit("setConfig");
+      this.BASE.showMsg({
+        type: "success",
+        msg: "修改成功",
       });
-      if (data) {
-        this.$message({
-          type: "success",
-          offset: 200,
-          center: true,
-          message: "确认成功!",
-        });
-        this.displayDetails = false;
-      }
-
-      if (data) {
-        this.$parent.getAlarmDataByPoweStations();
-        this.getByEquipmentId();
-      }
+      this.displaySetting = false;
     },
-
     handleSelectionChange(rows) {
-      this.dede = rows;
-    },
-    checkSelectable(row, index) {
-      // return row.discount >= 0 && row.discount <= 10
+      this.checkedRow = rows;
+      if (this.checkedRow.length == this.warnNum) {
+        this.checkAll = true;
+      }
     },
-    cancelMultiys() {
-      this.displayDetails = false;
+    displayAlarm() {
+      this.$emit("close");
     },
-    deleteon() {
-      this.$confirm("确认清除?", "提示", {
+    confirm() {
+      this.$confirm("您确定要执行此操作吗？", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
-      })
-        .then(async () => {
-          this.dateAlarmRecordsById("1");
-          this.$message({
-            type: "success",
-            message: "清除成功!",
-            offset: 200,
-            center: true,
-            customClass: "s",
+      }).then(() => {
+        let 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");
+              }
+            }
           });
-        })
-        .catch(() => {});
-    },
-    sure() {
-      this.dateAlarmRecordsById("0");
-    },
-    async dateAlarmRecordsById(val) {
-      const data = await DateAlarmRecordsById({
-        alarmIds: this.ss,
-        type: val,
+        }, 500);
       });
-
-      if (data) {
-        if (val == "1") {
-        } else {
-          this.$message({
-            type: "success",
-            offset: 200,
-            center: true,
-            message: "确认成功!",
-          });
-        }
-        this.$parent.getAlarmDataByPoweStations();
-        this.getByEquipmentId();
-      }
     },
-    changeSelect(selected, row) {
-      let arr = "";
-      selected.forEach((s) => {
-        arr += s.id + ",";
-      });
-      this.ss = arr;
+    setAlarmConfig() {
+      this.displaySetting = true;
     },
-    displayAlarm() {
-      this.$parent.displayAlarm("2");
-    },
-    async hiddDetails(val) {
-      this.displayDetails = true;
-      const data = await GetRecordByAlarmId({
-        id: val,
-      });
-      if (data[0].alarmLevel == "1") {
-        data[0].alarmLevel = "重度告警";
-        data[0].color = "#E32F35";
-        data[0].bor = "1px solid #E32F35";
-      } else if (data[0].alarmLevel == "2") {
-        data[0].alarmLevel = "中度告警";
-        data[0].color = "#E37B2F";
-        data[0].bor = "1px solid #E37B2F";
-      } else if (data[0].alarmLevel == "3") {
-        data[0].alarmLevel = "轻度告警";
-        data[0].color = "#3681CD";
-        data[0].bor = "1px solid #3681CD";
-      }
-      if (data[0].alarmType == 1) {
-        data[0].names = "变位信号";
-      } else if (data[0].alarmType == 2) {
-        data[0].names = "通讯状态";
-      } else if (data[0].alarmType == 3) {
-        data[0].names = "异常报警";
-      } else if (data[0].alarmType == 4) {
-        data[0].names = "故障码报警";
-      } else if (data[0].alarmType == 5) {
-        data[0].names = "组合报警";
-      }
-      if (data[0].endTime == "") {
-        data[0].starts = "激活";
+    getAlartStatus(alartItem) {
+      if (
+        alartItem.isAlart ||
+        alartItem.isAlarmSound ||
+        alartItem.isContinuousAlarm
+      ) {
+        return "badgeWork";
       } else {
-        data[0].starts = "恢复";
-      }
-      if (data[0].conqType == "ZC") {
-        data[0].conqType = "组串式";
-      } else if (data[0].conqType == "JZ") {
-        data[0].conqType = "集中式";
+        return "badgeNotworK";
       }
-      this.dareson = data[0];
     },
 
-    getColor(state) {
-      switch (state) {
-        case "1":
-          return "colored";
-        case "2":
-          return "colororigin";
-        case "3":
-          return "colorblue";
+    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 "高级";
       }
     },
-
-    handleCurrentChange(val) {
-      this.page.currentPage = val;
-      let arr = this.deepClone(this.poverStat);
-      this.powerStation = arr.splice((val - 1) * this.numList, this.numList);
-      // this.getTableData();
-    },
-    handAll() {
-      this.indexNum = 3;
-      this.getByEquipmentId();
-    },
-    ch() {
-      clearTimeout(this.timer);
-      this.timer = null;
-      this.$refs.scrollTable.clearSelection();
-    },
-    async handZhong() {
-      this.indexNum = 0;
-
-      this.getByEquipmentId();
-      // if (arr1) {
-      //     arr1.forEach(row => {
-      //         this.$nextTick(() => {
-      //             this.$refs.scrollTable.toggleRowSelection(row);
-      //         })
-      //     });
-      // } else {
-      //     this.$refs.scrollTable.clearSelection();
-      // }
-
-      // this.changeSelect(this.powerStation)
-    },
-    toggleSelection(rows) {},
-    handContent() {
-      this.indexNum = 1;
-      this.getByEquipmentId();
-      // if (arr1) {
-      //     arr1.forEach(row => {
-      //         this.$nextTick(() => {
-      //             this.$refs.scrollTable.toggleRowSelection(row);
-      //         })
-      //     });
-      // } else {
-      //     this.$refs.scrollTable.clearSelection();
-      // }
-      //     this.changeSelect(arr1)
-    },
-    handQing() {
-      this.indexNum = 2;
-      this.getByEquipmentId();
-      // if (arr1) {
-      //     arr1.forEach(row => {
-      //         this.$nextTick(() => {
-      //             this.$refs.scrollTable.toggleRowSelection(row);
-      //         })
-      //     });
-      // } else {
-      //     this.$refs.scrollTable.clearSelection();
-      // }
-      //     this.changeSelect(arr1)
-    },
-    deepClone(ob) {
-      var obj = JSON.stringify(ob);
-      var objClone = JSON.parse(obj);
-      return objClone;
-    },
-    async getByEquipmentId() {
-      //   const data = await GetyPowerstationId({
-      //     equipment: "",
-      //     alarmName: "",
-      //     alarmType: "",
-      //     alarmLevel: "",
-      //     alarmStatus: 0,
-      //     firmStatus: 0,
-      //     startTime: "",
-      //     endTime: "",
-      //   });
-      //   if (JSON.stringify(data) != "{}") {
-      //     let arr1 = [];
-      //     let arr2 = [];
-      //     let arr3 = [];
-      //     data.forEach((s) => {
-      //       s.startTimes = s.startTime.slice(5).replace("-", "/");
-      //       if (s.levelCode == "1") {
-      //         arr1.push(s);
-      //         s.alarmLevel = "重";
-      //         s.color = "#E32F35";
-      //         s.bor = "1px solid #E32F35";
-      //       } else if (s.levelCode == "2") {
-      //         arr2.push(s);
-      //         s.alarmLevel = "中";
-      //         s.color = "#E37B2F";
-      //         s.bor = "1px solid #E37B2F";
-      //       } else if (s.levelCode == "3") {
-      //         arr3.push(s);
-      //         s.alarmLevel = "轻";
-      //         s.color = "#3681CD";
-      //         s.bor = "1px solid #3681CD";
-      //       }
-      //       if (s.endTime == "") {
-      //         s.status = "否";
-      //       } else {
-      //         s.status = "是";
-      //       }
-      //     });
-      //     if (this.indexNum == 0) {
-      //       this.poverStat = arr1;
-      //     } else if (this.indexNum == 1) {
-      //       this.poverStat = arr2;
-      //     } else if (this.indexNum == 2) {
-      //       this.poverStat = arr3;
-      //     } else if (this.indexNum == 3) {
-      //       this.poverStat = data;
-      //     }
-      //     this.indexNum1 = arr1.length;
-      //     this.indexNum2 = arr2.length;
-      //     this.indexNum3 = arr3.length;
-      //     this.handAlls = data;
-      //     let s = this.deepClone(this.poverStat);
-      //     this.poverStat = this.deepClone(data);
-      //     this.powerStation = s.splice(0, this.pageSize);
-      //   } else {
-      //     this.powerStation = [];
-      //   }
-    },
   },
 };
 </script>
 
 <style lang="less" scoped>
-.colored {
-  color: rgb(227, 47, 53);
-  border: 1px solid rgb(227, 47, 53);
-}
-
-.colororigin {
-  color: #e37b2f;
-  border: 1px solid #e37b2f;
-}
-
-.colorblue {
-  color: #3681cd;
-  border: 1px solid #3681cd;
-}
-
-.blge {
-  width: 540px;
-  height: 102px;
-  //   background: url("../../assets/img/images/xuanfu.png") no-repeat;
-  background-size: cover;
-  background-position: 0 1px;
-}
-
-::v-deep .el-pager li.active {
-  background: rgba(0, 70, 199, 0.4);
-  color: #fff;
-}
-
-::v-deep .el-pagination button:disabled {
-  background: rgba(67, 81, 107, 0.2);
-}
-
-::v-deep .el-pagination .el-input--suffix .el-input__inner {
-  width: 76px;
-}
-
-::v-deep .el-pagination .btn-next,
-.el-pagination .btn-prevP {
-  background: rgba(67, 81, 107, 0.2);
-  color: #b3b3b3;
-}
-
-::v-deep .el-pager li {
-  background: rgba(67, 81, 107, 0.2);
-  color: #b3b3b3;
-}
-
-::v-deep .el-pagination .btn-prev {
-  background: rgba(67, 81, 107, 0.2);
-  color: #b3b3b3;
-}
-
-::v-deep .el-pagination .btn-next,
-.el-pagination .btn-prevP {
-  background: rgba(67, 81, 107, 0.2);
-  color: #b3b3b3;
-}
-::v-deep .el-pagination .el-input__suffix {
-  right: 27px;
-  top: -2px;
-}
-::v-deep .el-pagination__sizes {
-  margin: 0;
-}
-.dialog {
-  width: 540px;
-  height: 420px;
-  position: absolute;
+.warn-dialog {
+  position: fixed;
   right: 0;
-  top: 101px;
-  padding: 20px 10px 0px 10px;
-  border: 1px solid #00549a;
-  background: rgba(11, 12, 12);
-
-  ul {
-    margin: 0 20px;
-    width: 85%;
-
-    li {
+  bottom: 2px;
+  z-index: 1000;
+  .warn-wrapper {
+    width: 540px;
+    height: 510px;
+    position: absolute;
+    bottom: 25px;
+    right: 17px;
+    background: url("~@/assets/imgs/warn-border.png") no-repeat;
+    background-size: 100% 100%;
+
+    .warn-top {
+      width: 100%;
+      height: 60px;
+      padding: 0 22px;
       display: flex;
-      height: 30px;
-      line-height: 30px;
-
-      div {
-        &:first-of-type {
-          width: 60px;
-          margin-left: 10px;
+      align-items: center;
+      justify-content: space-between;
+      background: url("~@/assets/imgs/warn-top.png") no-repeat;
+      background-size: 100% 100%;
+      .warn-close {
+        cursor: pointer;
+      }
+      .warn-title {
+        display: flex;
+        align-items: center;
+        position: relative;
+        &::after {
+          position: absolute;
+          bottom: 5px;
+          right: -15px;
+          content: "";
+          width: 7px;
+          height: 7px;
+          border-right: 2px solid #fd7f00;
+          border-bottom: 2px solid #fd7f00;
         }
-
-        &:nth-of-type(2) {
-          width: 190px;
-          text-align: left;
-          color: #ffffff;
-          margin-left: 20px;
+        .warn-name {
+          padding: 0 15px;
         }
-
-        &:last-of-type {
-          width: 114px;
-          overflow: hidden;
+        .warn-num {
+          font-size: 20px;
+          font-family: Bicubik;
+          font-weight: 400;
+          color: #ff8300;
         }
       }
-
-      &:nth-of-type(2n-1) {
-        background-color: rgba(83, 89, 104, 0.2);
+    }
+    .warn-list {
+      height: calc(100% - 60px);
+      padding: 10px;
+      .warn-table {
+        height: calc(100% - 48px);
+        width: 100%;
+        .el-table::v-deep {
+          background: #000;
+        }
+      }
+      .warn-btns {
+        position: relative;
+        .el-button ::v-deep {
+          //   background: url("~@/assets/imgs/warn-btn.png") no-repeat;
+          background-size: 100% 100%;
+          height: 37px;
+          border-radius: 5px;
+          border-width: 0;
+          color: #fff;
+          font-size: 16px;
+          margin-top: 10px;
+          &:hover,
+          &:focus {
+            color: #fff;
+            background-color: transparent;
+            border-width: 0;
+          }
+          &.confirm-one {
+            width: 100px;
+            background: url("~@/assets/imgs/confirmone.png") no-repeat;
+          }
+          &.confirm-all {
+            width: 160px;
+            background: url("~@/assets/imgs/confirmall.png") no-repeat;
+            transform: translateX(50%);
+          }
+        }
+        .setting {
+          position: absolute;
+          top: 55%;
+          right: 22px;
+          transform: translateY(-50%);
+          cursor: pointer;
+        }
       }
     }
   }
-
-  .title {
-    width: 90%;
-    height: 50px;
-    line-height: 50px;
-    font-size: 16px;
-    color: #ffffff;
-    margin-left: 20px;
-    border-bottom: 1px solid #3a3f43;
-  }
-}
-
-::v-deep .el-table--mini .el-table__cell {
-  padding: 0px;
-}
-::v-deep .el-table__header .el-table__cell {
-  padding: 4px 0;
-}
-.alarmdis {
-  font-size: 13px;
-  color: #ffffff;
 }
-.alarmNum {
-  font-size: 16px;
-  font-family: Bicubik;
-}
-
-.titleAlarm {
-  width: 95%;
-  display: flex;
-  position: relative;
-  padding-top: 20px;
-  justify-content: space-around;
-
-  div {
-    width: 70px;
-    text-align: center;
-    height: 24px;
-    div:first-of-type {
-      margin-top: 10px;
+.setting-dialog {
+  position: fixed;
+  right: 0;
+  bottom: 2px;
+  z-index: 1001;
+  .setting-wrapper {
+    width: 540px;
+    height: 510px;
+    position: absolute;
+    bottom: 25px;
+    right: 17px;
+    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 {
+        text-align: right;
+        .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;
+            }
+          }
+        }
+      }
     }
-  }
-  .lineList {
-    width: 70px;
-    text-align: center;
-    height: 60px;
   }
 }
-.zhong {
-  color: rgb(227, 47, 53);
-  position: relative;
-  border: 1px solid #6f6f6f;
-
-  .left_p {
-    width: 8px;
-    height: 8px;
-    border-left: 1px solid #ffffff;
-    border-top: 1px solid #ffffff;
-    position: absolute;
-    left: -1px;
-    top: -1px;
-  }
-
-  .right_p {
-    width: 8px;
-    height: 8px;
-    border-right: 1px solid #ffffff;
-    border-bottom: 1px solid #ffffff;
-    position: absolute;
-    left: 61px;
-    top: 51px;
+.el-tabs ::v-deep {
+  height: calc(100% - 80px);
+  &.el-tabs--border-card {
+    background: transparent !important;
+    border-color: transparent !important;
   }
-}
-
-.content {
-  color: #e37b2f;
-  position: relative;
-  border: 1px solid #6f6f6f;
-
-  .left_p {
-    width: 8px;
-    height: 8px;
-    border-left: 1px solid #ffffff;
-    border-top: 1px solid #ffffff;
-    position: absolute;
-    left: -1px;
-    top: -1px;
+  &.el-tabs--border-card > .el-tabs__header {
+    background: transparent !important;
+    border-color: transparent !important;
   }
 
-  .right_p {
-    width: 8px;
-    height: 8px;
-    border-right: 1px solid #ffffff;
-    border-bottom: 1px solid #ffffff;
-    position: absolute;
-    left: 61px;
-    top: 51px;
+  &.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;
   }
 }
-
-.qing {
-  color: #3681cd;
-  position: relative;
-  border: 1px solid #6f6f6f;
-
-  .left_p {
-    width: 8px;
-    height: 8px;
-    border-left: 1px solid #ffffff;
-    border-top: 1px solid #ffffff;
-    position: absolute;
-    left: -1px;
-    top: -1px;
+.el-switch::v-deep {
+  &.is-checked .el-switch__core {
+    border-color: #fd7f00;
+    background-color: #fd7f00;
   }
-
-  .right_p {
-    width: 8px;
-    height: 8px;
-    border-right: 1px solid #ffffff;
-    border-bottom: 1px solid #ffffff;
-    position: absolute;
-    left: 61px;
-    top: 51px;
-  }
-}
-::v-deep .el-button {
-  border: 1px solid #585e60;
-}
-.dialog {
-  ::v-deep .el-button {
-    margin-left: 30px;
-    width: 220px;
-    background: transparent;
-    border: 1px solid #585e60;
-    color: #ffffff;
-    font-size: 15px;
+  .el-switch__label {
+    color: #ccc;
+    &.is-active {
+      color: #fd7f00;
+    }
   }
 }
-
-.determine {
-  border: 1px solid #1c99ff;
-  color: #1c99ff;
-}
-.lineLeft {
-}
-::v-deep .el-table .cell {
-  width: 100%;
-  white-space: nowrap;
-}
-.searchColor {
-  background: rgba(0, 70, 199, 0.5) !important;
-  color: #ffffff !important;
-}
-.delecolor {
-  background: rgba(67, 81, 107, 0.2) !important;
-  border: 1px solid #2a374f;
-}
-
-::v-deep .el-message--warning {
-  background: #090e19 !important;
-  box-shadow: 0 0 22px rgba(0, 70, 199, 0.2) inset !important;
-  border: 1px solid #094493 !important;
-}
-
-::v-deep .el-message--warning .el-message__content {
-  color: #ffffff !important;
-}
-
-::v-deep .el-message .el-icon-warning {
-  font-size: 16px;
-  color: #ffd02b !important;
-}
 </style>

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) {