若干BUG修复、页面字段替换、接口联调、修改报警弹窗配置项为本地存储模式，舍弃了通过接口获取与修改配置的功能、报警气泡增加临时的折叠功能。

package.json

@@ -8,6 +8,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
     "@stomp/stompjs": "^6.1.2",
     "@vue/shared": "^3.2.36",
     "animate.css": "^4.1.1",

src/components/alarmPopupa/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="alarmBox"
-    :class="alarmList?.length ? 'notEmpty' : ''"
+    :class="getAlarmBoxClass()"
     :style="`width: ${getAlarmBoxWidth()}px;`"
   >
     <div
@@ -57,10 +57,28 @@
         </template>
       </div>
     </div>
+
+    <div
+      class="collapseBtn"
+      v-if="alarmList?.[0]?.id && $store.state.alarmShowNumber > 0"
+      @click="
+        () => {
+          isCollapse = !isCollapse;
+        }
+      "
+    >
+      <el-link type="primary" href="kacvascript:;">
+        <!-- <el-icon color="#909399"><CaretBottom /></el-icon> -->
+        <span style="margin-left: 6px" v-if="!isCollapse">点此折叠报警</span>
+        <span style="margin-left: 6px; color: var(--el-color-danger)" v-else
+          >报警已折叠，点此恢复</span
+        >
+      </el-link>
+    </div>
   </div>
 </template>
 <script>
-import { confirmAlart, getAlartConfig, alarm_history } from "@api/api.js";
+import { confirmAlart, alarm_history } from "@api/api.js";
 import { ElNotification } from "element-plus";
 import dayJs from "dayjs";
 export default {
@@ -75,6 +93,7 @@ export default {
       limitConnect: 5,
       columnNumber: 2,
       showSocketLog: false,
+      isCollapse: false,
       requestAlarmHistoryParams: [
         {
           alarmType: "booststation",
@@ -140,53 +159,45 @@ export default {
   },
 
   created() {
-    getAlartConfig()
-      .then((res) => {
-        this.alarmConfigArray = res.data;
-        let requestResult = [];
-        this.requestAlarmHistoryParams.forEach(({ alarmType, deviceType }) => {
-          requestResult.push(this.getAlarmHistory(alarmType, deviceType));
+    this.getAlarmConfig();
+    let requestResult = [];
+    this.requestAlarmHistoryParams.forEach(({ alarmType, deviceType }) => {
+      requestResult.push(this.getAlarmHistory(alarmType, deviceType));
+    });
+
+    Promise.all(requestResult)
+      .then((promiseResult) => {
+        promiseResult.forEach(({ data }) => {
+          data?.ls?.forEach((ele) => {
+            this.pushALarmItem(ele);
+          });
         });
-
-        Promise.all(requestResult)
-          .then((promiseResult) => {
-            promiseResult.forEach(({ data }) => {
+        // this.webSocketInit(
+        //   `ws://10.81.3.154:6014/websocket/${this.$store.state.user.userId}_${this.$store.state.user.authToken}`
+        // );
+        this.createWebSocket();
+      })
+      .catch(() => {
+        requestResult.forEach((ele, index) => {
+          ele
+            .then(({ data }) => {
               data?.ls?.forEach((ele) => {
                 this.pushALarmItem(ele);
               });
-            });
-            // this.webSocketInit(
-            //   `ws://10.81.3.154:6014/websocket/${this.$store.state.user.userId}_${this.$store.state.user.authToken}`
-            // );
-            this.createWebSocket();
-          })
-          .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">
+            })
+            .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>`,
-                  });
-                });
+              });
             });
-          });
-      })
-      .catch(() => {
-        this.BASE.showMsg({
-          msg: "报警配置获取失败，请重试",
         });
       });
   },
@@ -406,6 +417,7 @@ export default {
         this.socketReconnect();
       }
     },
+
     // websocket事件绑定
     socketEventBind() {
       // 连接成功建立的回调
@@ -424,6 +436,7 @@ export default {
         this.socketObj.close();
       };
     },
+
     // websocket重连
     socketReconnect() {
       if (this.socketReconnectLock) {
@@ -438,20 +451,23 @@ export default {
         this.createWebSocket();
       }, 4000);
     },
+
     // 连接成功建立的回调
-    onopenCallback: function (event) {
+    onopenCallback(event) {
       this.showSocketLog && console.log("WebSocket:已连接");
       // 心跳检测重置
       this.heartCheck.reset().start();
     },
+
     // 连接发生错误的回调
-    onerrorCallback: function (event) {
+    onerrorCallback(event) {
       this.showSocketLog && console.log("WebSocket:发生错误");
       // websocket重连
       this.socketReconnect();
     },
+
     // 连接关闭的回调
-    oncloseCallback: function (event) {
+    oncloseCallback(event) {
       this.showSocketLog && console.log("WebSocket:已关闭");
       // 心跳检测重置
       this.heartCheck.reset();
@@ -463,12 +479,14 @@ export default {
         this.socketObj.close();
       }
     },
+
     // 向后端发送数据的回调
-    onsendCallback: function () {
+    onsendCallback() {
       this.showSocketLog && console.log("WebSocket:发送信息给后端");
     },
+
     // 接收到消息的回调
-    getMessageCallback: function (msg) {
+    getMessageCallback(msg) {
       //   console.log(msg);
       if (Object.keys(msg) && msg.data == "ok") {
         // 心跳回复——心跳检测重置
@@ -486,6 +504,7 @@ export default {
         }
       }
     },
+
     // webSocketInit(serveIP) {
     //   if ("WebSocket" in window) {
     //     this.ws = new WebSocket(serveIP);
@@ -587,6 +606,13 @@ export default {
       );
     },
 
+    getAlarmBoxClass() {
+      let classList = [];
+      if (this.alarmList?.length) classList.push("notEmpty");
+      if (this.isCollapse) classList.push("collapseAlarmBox");
+      return classList.join(" ");
+    },
+
     getAlarmBoxWidth() {
       const baseWIdth = 240;
       let widthStep = 0;
@@ -597,19 +623,70 @@ export default {
       }
       return widthStep * baseWIdth;
     },
+
+    getAlarmConfig() {
+      if (localStorage.getItem("alarmConfigArray")) {
+        this.alarmConfigArray = JSON.parse(
+          localStorage.getItem("alarmConfigArray")
+        );
+      } else {
+        this.alarmConfigArray = [
+          {
+            id: "1",
+            alarmLevel: 1,
+            isAlart: false,
+            isAlarmSound: false,
+            isContinuousAlarm: false,
+          },
+          {
+            id: "2",
+            alarmLevel: 2,
+            isAlart: false,
+            isAlarmSound: false,
+            isContinuousAlarm: false,
+          },
+          {
+            id: "3",
+            alarmLevel: 3,
+            isAlart: true,
+            isAlarmSound: false,
+            isContinuousAlarm: false,
+          },
+          {
+            id: "4",
+            alarmLevel: 4,
+            isAlart: true,
+            isAlarmSound: true,
+            isContinuousAlarm: false,
+          },
+          {
+            id: "5",
+            alarmLevel: 5,
+            isAlart: true,
+            isAlarmSound: true,
+            isContinuousAlarm: true,
+          },
+        ];
+        localStorage.setItem(
+          "alarmConfigArray",
+          JSON.stringify(this.alarmConfigArray)
+        );
+      }
+    },
   },
 
   watch: {
     "$store.state.alarmResetFlg"() {
-      getAlartConfig()
-        .then((res) => {
-          this.alarmConfigArray = res.data;
-        })
-        .catch(() => {
-          this.BASE.showMsg({
-            msg: "报警配置获取失败，请重试",
-          });
-        });
+      // getAlartConfig()
+      //   .then((res) => {
+      //     this.alarmConfigArray = res.data;
+      //   })
+      //   .catch(() => {
+      //     this.BASE.showMsg({
+      //       msg: "报警配置获取失败，请重试",
+      //     });
+      //   });
+      this.getAlarmConfig();
     },
   },
 };
@@ -617,7 +694,7 @@ export default {
 <style lang="scss" scoped>
 .alarmBox {
   height: calc(100% - 180px);
-  padding: 0 12px 0 30px;
+  padding: 0 12px 15px 30px;
   position: absolute;
   right: 0;
   bottom: 0;
@@ -789,11 +866,33 @@ export default {
     }
   }
 
+  .collapseBtn {
+    right: 12px;
+    bottom: 0;
+    font-size: 14px;
+    color: #909399;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+    position: absolute;
+    pointer-events: auto;
+    user-select: none;
+    cursor: pointer;
+    transition: 0.2s;
+  }
+
   &.notEmpty:hover {
     // background: rgba(0, 0, 0, 0.12);
     // box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
     transition: 0.2s;
   }
+
+  &.collapseAlarmBox {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
 }
 </style>
 <style lang="scss">

src/main.js

@@ -9,6 +9,9 @@ import "./assets/font/iconfont.css";
 import "default-passive-events";
 import dialogDrag from "/@/assets/js/dialogDrag.js"; // 地址就是dialogDrag.js在位置
 
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+
+
 import "animate.css";
 
 import "./permission";
@@ -22,7 +25,7 @@ import basicTool from "@tools/basicTool";
  * @param {String} fmt 传入一个字符串，根据所传字符串的格式返回转换后特定格式的日期。
  * 调用姿势：new Date().formatDate("yyyy-MM-dd hh:mm:ss");
  */
-Date.prototype.formatDate = function(fmt) {
+Date.prototype.formatDate = function (fmt) {
     let o = {
         "M+": this.getMonth() + 1, //月份 
         "d+": this.getDate(), //日 
@@ -46,11 +49,15 @@ Date.prototype.formatDate = function(fmt) {
 
 const app = createApp(App);
 
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component);
+}
+
 app.use(router)
     .use(store)
     .use(dialogDrag)
     .use(ElementPlus, { size: "small" })
-    // .use(Antd)
+// .use(Antd)
 
 app.config.globalProperties.BASE = basicTool; //全局注册
 

src/pages/systemManage/systemManage.vue

@@ -90,7 +90,58 @@ export default {
   created() {
     this.alarmShowNumber = this.$store.state.alarmShowNumber;
     this.columnNumber = this.$store.state.columnNumber;
-    this.getConfigArray();
+
+    if (localStorage.getItem("alarmConfigArray")) {
+      this.alarmConfigArray = JSON.parse(
+        localStorage.getItem("alarmConfigArray")
+      );
+    } else {
+      this.alarmConfigArray = [
+        {
+          id: "1",
+          alarmLevel: 1,
+          isAlart: false,
+          isAlarmSound: false,
+          isContinuousAlarm: false,
+        },
+        {
+          id: "2",
+          alarmLevel: 2,
+          isAlart: false,
+          isAlarmSound: false,
+          isContinuousAlarm: false,
+        },
+        {
+          id: "3",
+          alarmLevel: 3,
+          isAlart: true,
+          isAlarmSound: false,
+          isContinuousAlarm: false,
+        },
+        {
+          id: "4",
+          alarmLevel: 4,
+          isAlart: true,
+          isAlarmSound: true,
+          isContinuousAlarm: false,
+        },
+        {
+          id: "5",
+          alarmLevel: 5,
+          isAlart: true,
+          isAlarmSound: true,
+          isContinuousAlarm: true,
+        },
+      ];
+      localStorage.setItem(
+        "alarmConfigArray",
+        JSON.stringify(this.alarmConfigArray)
+      );
+    }
+
+    this.activeTab = this.activeTab || this.alarmConfigArray?.[0]?.id;
+
+    // this.getConfigArray();
   },
 
   methods: {
@@ -138,30 +189,45 @@ export default {
     },
 
     save() {
-      let configArray = this.BASE.deepCopy(this.alarmConfigArray);
-      let promiseArray = [];
-      configArray.forEach((ele) => {
-        for (let key in ele) {
-          if (ele[key] == true) {
-            ele[key] = 1;
-          } else if (ele[key] == false) {
-            ele[key] = 0;
-          }
-        }
-        promiseArray.push(saveAlartConfig(ele));
-      });
+      // let configArray = this.BASE.deepCopy(this.alarmConfigArray);
+      // let promiseArray = [];
+      // configArray.forEach((ele) => {
+      //   for (let key in ele) {
+      //     if (ele[key] == true) {
+      //       ele[key] = 1;
+      //     } else if (ele[key] == false) {
+      //       ele[key] = 0;
+      //     }
+      //   }
+      //   promiseArray.push(saveAlartConfig(ele));
+      // });
 
-      Promise.all(promiseArray).then(() => {
-        this.BASE.showMsg({
-          type: "success",
-          msg: "修改成功",
-        });
-        this.$store.commit("changeAlarmResetFlg");
-        this.$store.commit("changeAlarmShowNumber", this.alarmShowNumber);
-        this.$store.commit("changeColumnNumber", this.columnNumber);
-        localStorage.setItem("alarmShowNumber", this.alarmShowNumber);
-        localStorage.setItem("columnNumber", this.columnNumber);
-        this.getConfigArray();
+      // Promise.all(promiseArray).then(() => {
+      //   this.BASE.showMsg({
+      //     type: "success",
+      //     msg: "修改成功",
+      //   });
+      //   this.$store.commit("changeAlarmResetFlg");
+      //   this.$store.commit("changeAlarmShowNumber", this.alarmShowNumber);
+      //   this.$store.commit("changeColumnNumber", this.columnNumber);
+      //   localStorage.setItem("alarmShowNumber", this.alarmShowNumber);
+      //   localStorage.setItem("columnNumber", this.columnNumber);
+      //   this.getConfigArray();
+      // });
+
+      this.$store.commit("changeAlarmResetFlg");
+      this.$store.commit("changeAlarmShowNumber", this.alarmShowNumber);
+      this.$store.commit("changeColumnNumber", this.columnNumber);
+      localStorage.setItem("alarmShowNumber", this.alarmShowNumber);
+      localStorage.setItem("columnNumber", this.columnNumber);
+      localStorage.setItem(
+        "alarmConfigArray",
+        JSON.stringify(this.alarmConfigArray)
+      );
+
+      this.BASE.showMsg({
+        type: "success",
+        msg: "修改成功",
       });
     },
   },