首页实时报警六个子模块增鼠标点击弹窗功能、六个子模块修改表格数据长度限制为30条、弹窗表格长度设置为50条、全局报警弹窗样式修改、报警上限显示条数修改为6条、修改 .gitignore 文件

.gitignore

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

README.md

@@ -1 +1 @@
-# 报警管理系统 - 晋能版
+# alarm-config GYEE ZM

src/api/api.js

@@ -1,6 +1,6 @@
 import request from "./axios.js";
-export const baseURL = "http://10.81.3.154:6015/";
-// export const baseURL = "http://192.168.1.109:6015/";
+// export const baseURL = "http://10.81.3.154:6015/";
+export const baseURL = "http://192.168.1.109:6015/";
 import JSONBIG from "json-bigint";
 
 // 获取场站数据

src/components/Header.vue

@@ -5,7 +5,7 @@
       <i v-if="!collapse" class="el-icon-s-fold"></i>
       <i v-else class="el-icon-s-unfold"></i>
     </div>
-    <div class="logo">综合报警系统</div>
+    <div class="logo">智能报警及预警系统</div>
     <div class="header-right">
       <div class="header-user-con">
         <el-dropdown class="user-name" trigger="click" @command="handleCommand">

src/components/alarmPopupa/index.vue

@@ -6,31 +6,33 @@
       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 +77,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 +202,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 +266,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 +279,7 @@ export default {
   font-size: 12px;
   overflow-y: scroll;
   pointer-events: none;
+  border-radius: 8px;
   transition: 0.2s;
 
   .alarmItem {
@@ -269,7 +288,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 +297,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 +328,7 @@ export default {
       }
     }
 
-    .btntBox {
+    .btnBox {
       display: flex;
       width: 100%;
       justify-content: center;
@@ -331,11 +350,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 +371,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/Login.vue

@@ -6,10 +6,17 @@
       draggable="false"
     /> -->
     <div class="login-content">
+      <!-- <div class="ms-title">
+        <div style="margin-bottom: 20px">智能预警系统</div>
+        <div style="padding-bottom: 40px; font-size: 30px">
+          Intelligent Early Warning
+        </div>
+      </div> -->
       <div class="ms-title">
-        <div style="margin-bottom: 20px">综合报警系统</div>
+        <div style="margin-bottom: 20px">智能报警及预警系统</div>
         <div style="padding-bottom: 40px; font-size: 24px">
-          Integrated alarm system
+          <!-- Equipment Hidden Hazard Awareness System -->
+          Intelligent Alarms and Early Warnings System
         </div>
       </div>
       <div class="ms-login">

src/pages/check/check.vue

@@ -1,15 +1,13 @@
 <template>
   <div>
-    <!-- <el-upload></el-upload> -->
+    <el-upload></el-upload>
   </div>
 </template>
 
 <script>
-import { decrypt } from "@/utils/jsencrypt.js";
-import { loginRequest, Login } from "/@/api/api.js";
+import { JSEncrypt } from "jsencrypt";
+import { loginRequest, getPublickey } from "/@/api/api.js";
 import { ElMessage } from "element-plus";
-import store from "@/store/index.js";
-import router from "@/router/index.js";
 export default {
   data() {
     return {
@@ -19,67 +17,57 @@ export default {
     };
   },
   created() {
-    this.checkUser();
+    this.getKey();
   },
   methods: {
     //先获取密钥，再去认证username和mark
-    // async getKey() {
-    //   this.publickey = await getPublickey();
-    //   sessionStorage.setItem("publicKey", this.publickey);
-    //   this.checkUser();
-    // },
+    async getKey() {
+      this.publickey = await getPublickey();
+      sessionStorage.setItem("publicKey", this.publickey);
+      this.checkUser();
+    },
 
-    async checkUser() {
-      const username = this.$route.query.username;
-      const a = decodeURIComponent(this.$route.query.jiami).replace(/\s/g, "+");
-      //   console.log(a);
-      const password = decrypt(a);
+    checkUser() {
+      const userName = this.$route.query.userName;
+      const mark = this.$route.query.mark;
       //判断传过来的username和mark是否为空值，如果是，则弹出身份验证不合法
-      if (username == null || password == null) {
+      if (userName == null || mark == null){
         ElMessage.error("身份验证不合法！");
       } else {
-        const {
-          data: res,
-          msg,
-          code,
-        } = await loginRequest({ username, password });
-        if (code == 0) {
-          store.commit("user/SET_TOKEN", res);
+        const params = {
+          publicKey: this.publickey,
+          data: this.encryptionByPublickey({
+            //   mark: "80a7916eef8f096d4d8b64f14b99c697",
+            userName,
+            mark,
+          }),
+        };
 
-          Login({ userId: res.userId, token: res.accessToken }).then((res) => {
-            if (res.code == 200) {
-              ElMessage.success("登录成功");
-              router.push("/");
-            }
-          });
-        } else {
-          ElMessage.error(msg);
-        }
+        loginRequest(params).then((res) => {
+          if (res.status !== 20000) {
+            ElMessage.error("单点登录错误：" + res.msg);
+          } else {
+            ElMessage.success("登录成功");
+            sessionStorage.setItem("ms_username", res.data.userName);
+            sessionStorage.setItem("ms_chinesename", res.data.chineseName);
+            sessionStorage.setItem("ms_id", res.data.id);
+            sessionStorage.setItem("token", res.token);
+            sessionStorage.setItem("identity", res.data.identity);
+            this.$router.replace("/");
+          }
+        });
+      }
+    },
 
-        // const params = {
-        //   publicKey: this.publickey,
-        //   data: this.encryptionByPublickey({
-        //     //   mark: "80a7916eef8f096d4d8b64f14b99c697",
-        //     userName,
-        //     mark,
-        //   }),
-        // };
+    // 利用jsencrypt.js进行RSA加密
+    encryptionByPublickey(formData) {
+      let key = sessionStorage.getItem("publicKey");
+      var encrypt = new JSEncrypt();
+      encrypt.setPublicKey(key);
 
-        // loginRequest(params).then((res) => {
-        //   if (res.status !== 20000) {
-        //     ElMessage.error("单点登录错误：" + res.msg);
-        //   } else {
-        //     ElMessage.success("登录成功");
-        //     sessionStorage.setItem("ms_username", res.data.userName);
-        //     sessionStorage.setItem("ms_chinesename", res.data.chineseName);
-        //     sessionStorage.setItem("ms_id", res.data.id);
-        //     sessionStorage.setItem("token", res.token);
-        //     sessionStorage.setItem("identity", res.data.identity);
-        //     this.$router.replace("/");
-        //   }
-        // });
-      }
+      var result = encrypt.encrypt(JSON.stringify(formData));
+      return result;
     },
   },
 };
-</script>
+</script> 

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;
+    },
+
+    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;
+        });
     },
 
-    reverseArray(arr) {
-      return arr.reverse();
+    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,31 @@ 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>

src/permission.js

@@ -1,6 +1,6 @@
 import router from "./router";
 import { getCookie } from "@/utils/auth"; // getToken from cookie
-const whiteList = ["/login", "/logout",'/check']; // 不重定向白名单
+const whiteList = ["/login", "/logout"]; // 不重定向白名单
 import store from "@/store";
 // router.beforeEach((to, from, next) => {
 //   if (getCookie("authToken")) {

src/router/index.js

@@ -378,13 +378,13 @@ const routes = [
     {
         icon: "iconfont iconxitongcaidan",
         path: "/check",
-        // isshow: "admin",
+        isshow: "admin",
         name: "check",
         meta: {
             title: "单点登录",
         },
         component: () =>
-            import ("@/pages/check/check.vue"),
+            import ("../pages/check/check.vue"),
     },
 ];
 const constantRoutes = [];

src/store/index.js

@@ -71,10 +71,21 @@ export default createStore({
         },
 
         removeWarning(state, data) {
-            for (let i = 0; i < state.warningList.length; i++) {
-                if (`${state.warningList[i].id}${state.warningList[i].ts}` === `${data.id}${data.ts}`) {
-                    state.warningList.splice(i, 1);
-                    break;
+            if (Array.isArray(data)) {
+                data.forEach(ele => {
+                    for (let i = 0; i < state.warningList.length; i++) {
+                        if (`${ele.id}${ele.ts}` === `${data.id}${data.ts}`) {
+                            state.warningList.splice(i, 1);
+                            break;
+                        }
+                    }
+                })
+            } else {
+                for (let i = 0; i < state.warningList.length; i++) {
+                    if (`${state.warningList[i].id}${state.warningList[i].ts}` === `${data.id}${data.ts}`) {
+                        state.warningList.splice(i, 1);
+                        break;
+                    }
                 }
             }
         },

src/store/modules/user.js

@@ -11,7 +11,7 @@ import {
 import { Login, loginRequest, getUserinfo, logout } from "@/api/api";
 const state = {
   authToken: getCookie("accessToken") || "", //
-  username: getCookie("userName") || "",
+  username: getCookie("username") || "",
   userId: getCookie("userId") || "",
   roles: [],
   permissions: [],

src/utils/auth.js

@@ -4,7 +4,7 @@ const timeKey = "hrsaas-timestamp-key";
 // 设置时间戳的存储变量
 const TokenKey = "accessToken";
 const UserIdKey = "userId";
-const Username = "userName";
+const Username = "username";
 
 export function getCookie(name) {
   return Cookies.get(name);