修改后台报警信息的提示信息

src/layouts/default.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { syncSendCmd } from 'apis/system'
 import WifiConnSvg from 'assets/images/wifi-conn.svg'
 import WifiUnconnSvg from 'assets/images/wifi-unconn.svg'
-import ErrorEventsModal from 'components/system/ErrorEventsModal.vue'
 import NetReconnection from 'components/system/NetReconnection.vue'
 import { delToken } from 'libs/token'
 import { formatDateTime } from 'libs/utils'
@@ -17,6 +17,8 @@ import { useHomeStore } from '@/stores/homeStore'
 import { useLiquidStore } from '@/stores/liquidStore'
 import { useSealStore } from '@/stores/sealStore'
 import { useSystemStore } from '@/stores/systemStore'
+import SystemLog = System.SystemLog
+import { ElMessageBox } from 'element-plus'
 
 // const routes = generateRoutes()
 // const childrenRoutes = routes.find(r => r.path === '/')?.children || []
@@ -166,7 +168,6 @@ const toggleLanguage = () => {
   locale.value = locale.value === 'zh' ? 'en' : 'zh'
   localStorage.setItem('locale', locale.value) // 保存到本地存储
 }
-
 const statusMap = {
   info: {
     type: 'info',
@@ -185,6 +186,43 @@ const statusMap = {
     name: '设备告警信息',
   },
 }
+const handleClose = async (item: SystemLog, key: number) => {
+  console.log('item === ', item)
+  const evenid = item.uuid
+  const params = {
+    className: 'AppCore',
+    fnName: 'appEventConfirm',
+    params: {
+      evenid,
+    },
+  }
+  await syncSendCmd(params)
+  systemStore.systemLogList.splice(key, 1)
+}
+const handleCloseAll = async () => {
+  await ElMessageBox.confirm(
+    '确认关闭所有？',
+    'Warning',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  )
+  for (let i = 0; i < systemStore.systemLogList.length; i++) {
+    const item = systemStore.systemLogList[i]
+    const evenid = item.uuid
+    const params = {
+      className: 'AppCore',
+      fnName: 'appEventConfirm',
+      params: {
+        evenid,
+      },
+    }
+    await syncSendCmd(params)
+  }
+  systemStore.systemLogList = []
+}
 </script>
 
 <template>
@@ -260,7 +298,7 @@ const statusMap = {
             IP : {{ deviceInfo.ip }}
           </div>
         </el-col>
-        <el-col :span="12" class="warning-border">
+        <el-col :span="12" :class="systemStore?.systemLogList.length > 0 ? 'warning-border' : ''">
           <div class="footer-left">
             <img src="../assets/images/run.svg" alt="" style="padding-right: 5px">
             <span v-if="!systemStore.systemLogList.length" class="text">设备运行状态</span>
@@ -277,19 +315,28 @@ const statusMap = {
               </template>
               <template #default>
                 <div class="log-box">
-                  <el-tag
-                    v-for="(item, key) in systemStore.systemLogList"
-                    :key
-                    :type="statusMap[item?.status as keyof typeof statusMap].type"
-                  >
-                    <div style="display: flex; justify-content: space-between; width: 100%">
-                      <span>
-                        <span>{{ statusMap[item.status as keyof typeof statusMap].name }}: </span>
-                        <span>{{ item.name }}</span>
-                      </span>
-                      <span>{{ item.time }}</span>
-                    </div>
-                  </el-tag>
+                  <div class="tag-box">
+                    <el-tag
+                      v-for="(item, key) in systemStore.systemLogList"
+                      :key
+                      :type="statusMap[item?.status as keyof typeof statusMap].type"
+                      closable
+                      @close="handleClose(item, key)"
+                    >
+                      <div style="display: flex; justify-content: space-between; width: 100%">
+                        <span>
+                          <span>{{ statusMap[item.status as keyof typeof statusMap].name }}: </span>
+                          <span>{{ item.name }}</span>
+                        </span>
+                        <span>{{ item.time }}</span>
+                      </div>
+                    </el-tag>
+                  </div>
+                  <div class="close-btn">
+                    <el-button type="primary" @click="handleCloseAll">
+                      关闭所有
+                    </el-button>
+                  </div>
                 </div>
               </template>
             </el-popover>
@@ -303,7 +350,7 @@ const statusMap = {
       </el-row>
     </el-footer>
     <NetReconnection />
-    <ErrorEventsModal />
+    <!--    <ErrorEventsModal /> -->
   </el-container>
 </template>
 
@@ -408,6 +455,19 @@ const statusMap = {
       width: 100%;
     }
   }
+  .close-btn{
+   display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    margin-top: 12px;
+  }
+  .tag-box{
+    height: 350px;
+    overflow: auto;
+  }
+}
+:deep(.el-popover) {
+  padding: 10px!important;
 }
 .aside {
   overflow: hidden;

src/stores/systemStore.ts

@@ -15,48 +15,43 @@ export const useSystemStore = defineStore(
       systemLogList.value.unshift(log)
       systemLogList.value = systemLogList.value.slice(0, 200)
     }
-    const uuids: Set<string> = new Set()
     const insertLogs = (appEvents: System.appEvent[]) => {
       appEvents.forEach((item) => {
-        if (uuids.has(item.uuid)) {
-          return
-        }
-        if (uuids.size > 500) {
-          uuids.clear()
-        }
-        uuids.add(item.uuid)
-        if (item.type === 'AppCheckPointCheckFailEvent' && item.errCheckPoints) {
+        const log = systemLogList.value.find(log => log.uuid === item.uuid)
+        if (!log) {
+          if (item.type === 'AppCheckPointCheckFailEvent' && item.errCheckPoints) {
           // 传感器检测失败弹窗事件
-          item.errCheckPoints.forEach((errCheckPoint) => {
+            item.errCheckPoints.forEach((errCheckPoint) => {
+              const log: System.SystemLog = {
+                name: `${errCheckPoint.ecodeInfo}(${errCheckPoint.ecode})`,
+                status: 'check',
+                time: formatDateTime('YYYY-MM-DD HH:mm:ss', Date.now()),
+                uuid: item.uuid,
+              }
+              insertLog(log)
+            })
+          }
+          if (item.type === 'AppWarningPromoptEvent') {
+          // 报警事件
             const log: System.SystemLog = {
-              name: `${errCheckPoint.ecodeInfo}(${errCheckPoint.ecode})`,
-              status: 'check',
+              name: item.description || '',
+              status: 'warn',
               time: formatDateTime('YYYY-MM-DD HH:mm:ss', Date.now()),
               uuid: item.uuid,
             }
+            ElMessage.warning(item.description)
             insertLog(log)
-          })
-        }
-        if (item.type === 'AppWarningPromoptEvent') {
-          // 报警事件
-          const log: System.SystemLog = {
-            name: item.description || '',
-            status: 'warn',
-            time: formatDateTime('YYYY-MM-DD HH:mm:ss', Date.now()),
-            uuid: item.uuid,
           }
-          ElMessage.warning(item.description)
-          insertLog(log)
-        }
-        if (item.type === 'AppPromoptEvent') {
+          if (item.type === 'AppPromoptEvent') {
           // 普通弹窗事件
-          const log: System.SystemLog = {
-            name: item.message || '',
-            status: 'info',
-            time: formatDateTime('YYYY-MM-DD HH:mm:ss', Date.now()),
-            uuid: item.uuid,
+            const log: System.SystemLog = {
+              name: item.message || '',
+              status: 'check',
+              time: formatDateTime('YYYY-MM-DD HH:mm:ss', Date.now()),
+              uuid: item.uuid,
+            }
+            insertLog(log)
           }
-          insertLog(log)
         }
       })
     }