冲突合并，代码marge提交

.gitignore

@@ -3,4 +3,6 @@ node_modules/
 .vscode
 dist
 dist_electron
-dist.zip
+.zip
+.rar
+.7z

README.md

@@ -1 +1,28 @@
 # 报警管理系统 - 晋能版
+
+晋能所用的报警管理后台管理系统，分支 yx 。
+
+## 当前分支修改点 (以当前系统菜单为准) ：
+- 安全运行
+    - 实时报警
+        - 重构页面由原来的三个报警区域改为六个报警区域，新增功能每个报警区域点击后显示弹出层以便更详尽显示报警列表信息。
+    - 报警记录
+        - 无
+    - 数据查询
+        - 无
+- 状态检修
+    - 原始报警分析
+        - 无
+- 预警配置
+    - 自定义预警
+        - 无
+    - 风机报警
+        - 无
+    - 规则修改日志
+        - 无
+- 基础数据
+    - 字典维护
+        - 修改部分页面样式与BUG
+- 其他
+    - 全局报警提醒
+        - 新增全局窗口提醒功能，实时监听 WS 获取报警状态并于系统右下角排列展示，其中危险等级达到要求的部分报警会以播放声音的形式告知用户。

src/components/alarmPopupa/index.vue

@@ -1,36 +1,37 @@
 <template>
   <div class="alarmBox" :class="alarmList?.length ? 'notEmpty' : ''">
     <div
-      class="alarmItem animate__animated"
-      :class="item.class"
+      :class="`${index < 6 ? item.class + ' alarmItem animate__animated' : ''}`"
       v-for="(item, index) in alarmList"
       :key="index"
     >
-      <div class="alarmTitle">{{ item.alarmName }}</div>
-      <div class="alarmContent">
-        <div class="contentItem">报警描述: {{ item.description }}</div>
-        <div class="contentItem">报警时间: {{ item.tsName }}</div>
-      </div>
-      <div class="btntBox" :class="`lv${item.lv}BdColor`">
-        <div class="btnItem" :class="`lv${item.lv}BdColor`">
-          <el-button
-            class="comfirmAll"
-            size="small"
-            type="text"
-            @click="comfirm(item)"
-            >确认本条</el-button
-          >
+      <template v-if="index < 6">
+        <div class="alarmTitle">{{ item.alarmName }}</div>
+        <div class="alarmContent">
+          <div class="contentItem">报警描述: {{ item.description }}</div>
+          <div class="contentItem">报警时间: {{ item.tsName }}</div>
         </div>
-        <div class="btnItem">
-          <el-button
-            class="comfirmAll"
-            size="small"
-            type="text"
-            @click="comfirmAll"
-            >全部确认</el-button
-          >
+        <div class="btnBox" :class="`lv${item.lv}BdColor`">
+          <div class="btnItem" :class="`lv${item.lv}BdColor lv${item.lv}`">
+            <el-button
+              class="comfirmBtn"
+              size="small"
+              type="text"
+              @click="comfirm(item)"
+              >确认本条</el-button
+            >
+          </div>
+          <div class="btnItem" :class="`lv${item.lv}`">
+            <el-button
+              class="comfirmBtn"
+              size="small"
+              type="text"
+              @click="comfirmAll"
+              >全部确认</el-button
+            >
+          </div>
         </div>
-      </div>
+      </template>
     </div>
   </div>
 </template>
@@ -75,6 +76,20 @@ export default {
       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 "高级";
+      }
+    },
+
     comfirm(item) {
       this.$confirm("您确定要执行此操作吗？", "提示", {
         confirmButtonText: "确定",
@@ -186,8 +201,10 @@ export default {
           let alarmItem = JSON.parse(res.data);
           if (alarmItem) {
             const alarmOption = {
-              lv: alarmItem.rank,
               id: alarmItem.id,
+              lv: alarmItem.rank,
+              lvName: this.getLvName(alarmItem),
+              rank: alarmItem.rank,
               class: `animate__bounceInRight lv${alarmItem.rank}`,
               confirm: alarmItem.isClose,
               alarmType: alarmItem.alarmType,
@@ -248,8 +265,8 @@ export default {
 </script>
 <style lang="scss" scoped>
 .alarmBox {
-  width: 200px;
-  height: 100%;
+  width: 240px;
+  height: calc(100% - 85px);
   padding: 0 12px 0 30px;
   position: absolute;
   right: 0;
@@ -261,6 +278,7 @@ export default {
   font-size: 12px;
   overflow-y: scroll;
   pointer-events: none;
+  border-radius: 8px;
   transition: 0.2s;
 
   .alarmItem {
@@ -269,7 +287,7 @@ export default {
     border-radius: 8px;
     border: 1px solid #ebeef5;
     background: #1890ff;
-    margin-bottom: 12px;
+    margin-bottom: 4px;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
     color: #fff;
     pointer-events: auto;
@@ -278,7 +296,7 @@ export default {
       display: flex;
       justify-content: flex-start;
       align-content: center;
-      width: 100%;
+      width: calc(100% - 16px);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -309,7 +327,7 @@ export default {
       }
     }
 
-    .btntBox {
+    .btnBox {
       display: flex;
       width: 100%;
       justify-content: center;
@@ -331,11 +349,18 @@ export default {
           min-height: 20px;
         }
 
-        .confirmCurrent {
-          color: #67c23a;
+        &.lv1 .el-button,
+        &.lv2 .el-button,
+        &.lv3 .el-button {
+          color: var(--el-color-info) !important;
         }
-        .confirmAll {
-          color: #e6a23c;
+
+        &.lv4 .el-button {
+          color: rgb(50, 65, 87) !important;
+        }
+
+        &.lv5 .el-button {
+          color: #242f42;
         }
 
         &:first-child {
@@ -345,36 +370,36 @@ export default {
     }
     &.lv5 {
       background: #fef0f0;
-      border: 1px solid #f56c6c;
-      color: #f56c6c;
+      border: 1px solid #242f42;
+      color: #242f42;
     }
 
     &.lv4 {
       background: #f0f9eb;
-      border: 1px solid #e6a23c;
-      color: #e6a23c;
+      border: 1px solid rgb(50, 65, 87);
+      color: rgb(50, 65, 87);
     }
 
     &.lv1,
     &.lv2,
     &.lv3 {
       background: #fdf6ec;
-      border: 1px solid #67c23a;
-      color: #67c23a;
+      border: 1px solid var(--el-color-info);
+      color: var(--el-color-info);
     }
 
     .lv1BdColor,
     .lv2BdColor,
     .lv3BdColor {
-      border-color: #67c23a !important;
+      border-color: var(--el-color-info) !important;
     }
 
     .lv4BdColor {
-      border-color: #e6a23c !important;
+      border-color: rgb(50, 65, 87) !important;
     }
 
     .lv5BdColor {
-      border-color: #f56c6c !important;
+      border-color: #242f42 !important;
     }
 
     &.hidden {

src/pages/safe/safecomponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="safeCom">
+  <div class="safeCom" @click="clickAlarmItem">
     <div class="safeCom_head">
       <i
         :class="['iconfont', iconfonts()]"
@@ -10,7 +10,7 @@
         <div
           style="font-size: 14px; position: relative; right: 35px; top: 15px"
         >
-          共{{ alarmList.length }}条
+          共{{ alarmList.length }}/{{ fullTableData.length }}条
         </div>
       </div>
     </div>
@@ -38,6 +38,62 @@
         show-overflow-tooltip
       />
     </el-table>
+    <el-dialog
+      v-model="showDialog"
+      :title="title"
+      top="50px"
+      width="75%"
+      modal-class="alarmDialog"
+      :show-close="false"
+      draggable
+      @closed="
+        () => {
+          stopUpdate = false;
+        }
+      "
+    >
+      <el-card>
+        <el-table
+          :data="dialogTableData"
+          style="width: 100%"
+          height="420px"
+          border
+        >
+          <el-table-column
+            prop="tsName"
+            label="报警时间"
+            width="150"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            prop="lv"
+            label="级别"
+            width="50"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            prop="alarmName"
+            label="报警类型"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            prop="description"
+            label="报警信息"
+            show-overflow-tooltip
+          />
+          <el-table-column label="操作">
+            <template #default="scope">
+              <el-button type="text" size="small" @click="confirm(scope.row)"
+                >确认本条</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+      <el-button class="confirmAllBtn" type="info" plain @click="confirmAll"
+        >确认所有报警</el-button
+      >
+    </el-dialog>
   </div>
 </template>
 
@@ -73,6 +129,10 @@ export default {
         custom: "iconzidingyi",
         inverter: "iconzidingyi",
       },
+      showDialog: false,
+      dialogTableData: [],
+      fullTableData: [],
+      stopUpdate: false,
     };
   },
 
@@ -87,39 +147,87 @@ export default {
 
     initWarningList() {
       let alarmList = [];
+      let fullTableData = [];
+      let dialogTableData = [];
       this.$store.state.warningList.forEach((ele) => {
         if (
           this.deviceType === ele.deviceType &&
           this.alarmType === ele.alarmType
         ) {
-          const someRes = alarmList.some((someEle) => {
-            return `${someEle.id}${someEle.ts}` === `${ele.id}${ele.ts}`;
-          });
-          !someRes && alarmList.push(ele);
+          alarmList?.length < this.$store.state.warningListLimitLength &&
+            alarmList.push(ele);
+          dialogTableData?.length < 50 && dialogTableData.push(ele);
+          fullTableData.push(ele);
         }
       });
       alarmList.sort((a, b) => {
         return b.ts - a.ts;
       });
-      this.trimAlarmList(alarmList);
+      dialogTableData.sort((a, b) => {
+        return b.ts - a.ts;
+      });
+      fullTableData.sort((a, b) => {
+        return b.ts - a.ts;
+      });
       this.alarmList = alarmList;
+      if (!this.stopUpdate) {
+        this.dialogTableData = dialogTableData;
+      }
+      this.fullTableData = fullTableData;
     },
 
-    trimAlarmList(arr) {
-      if (arr?.length > this.$store.state.warningListLimitLength) {
-        let subNum = arr.length - this.$store.state.warningListLimitLength;
-        for (let i = arr.length - 1; i >= 0; i--) {
-          if (subNum) {
-            arr.splice(i, 1);
-            subNum--;
-            i--;
-          }
-        }
-      }
+    clickAlarmItem() {
+      this.showDialog = true;
     },
 
-    reverseArray(arr) {
-      return arr.reverse();
+    confirm(alarmItem) {
+      this.stopUpdate = true;
+      this.$confirm("您确定要执行此操作吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          confirmAlart([alarmItem]).then((res) => {
+            if (res.code === 200) {
+              this.BASE.showMsg({
+                type: "success",
+                msg: `${this.title}确认成功`,
+              });
+              this.$store.commit("removeWarning", alarmItem);
+              this.playAudioEffect();
+            }
+            this.stopUpdate = false;
+          });
+        })
+        .catch(() => {
+          this.stopUpdate = false;
+        });
+    },
+
+    confirmAll() {
+      this.stopUpdate = true;
+      this.$confirm("您确定要执行此操作吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          confirmAlart(this.dialogTableData).then((res) => {
+            if (res.code === 200) {
+              this.BASE.showMsg({
+                type: "success",
+                msg: `全部${this.title}确认成功`,
+              });
+              this.$store.commit("removeWarning", this.dialogTableData);
+              this.playAudioEffect();
+            }
+            this.stopUpdate = false;
+          });
+        })
+        .catch(() => {
+          this.stopUpdate = false;
+        });
     },
   },
 
@@ -135,6 +243,7 @@ export default {
 .safeCom {
   width: 100%;
   height: calc(100% - 20px);
+  cursor: pointer;
   .safeCom_head {
     height: 50px;
     display: flex;
@@ -149,4 +258,36 @@ export default {
     }
   }
 }
+
+.currentAlartDialogHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 </style>
+<style lang="scss">
+.alarmDialog {
+  .el-dialog__body {
+    height: 500px;
+    max-height: 500px;
+    padding: 0;
+    overflow: hidden;
+    .el-card {
+      width: calc(100% - 40px);
+      height: calc(100% - 40px);
+      margin: 20px;
+    }
+
+    .confirmAllBtn {
+      position: absolute;
+      right: 20px;
+      top: 20px;
+    }
+  }
+}
+</style>
+<style lang="scss" >
+.alarmDialog {
+  z-index: 5100 !important;
+}
+</style>