告警处理

src/App.vue

@@ -1,16 +1,43 @@
 <template>
   <div id="app">
     <router-view />
+    <!-- 只有当 warnMsgs 数组长度大于 0 时才渲染告警弹窗 -->
+    <div v-if="warnMsgs.length > 0" class="warnDialog-container">
+      <div class="warnDialog" v-for="(warn, index) in warnMsgs" :key="index">
+        <div class="warnTitle">
+          <div class="left">
+            <i class="el-icon-warning"></i>
+            告警
+          </div>
+          <div class="right">
+            <!-- 传递索引以关闭当前告警 -->
+            <i class="el-icon-close" @click="handleCloseWarn(index)"></i>
+          </div>
+        </div>
+        <div class="warnContent">
+          <p>{{ warn.content }}</p>
+          <el-button
+            v-if="warn.warningId"
+            type="primary"
+            @click="clearWarnClick(warn, index)"
+            >处理</el-button
+          >
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import socketService from "../socket/index";
+import { updateStateApi } from "@/utils/api/index";
 export default {
   data() {
     return {
       windowWidth: 0,
       htmlFontSize: 16, // 默认的html字体大小
+      warnMsgs: [], // 存储告警消息的数组
+      //warnMsg: '{"type":1,"content":"qwqdqdqd","warningId":2}',
     };
   },
 
@@ -29,16 +56,22 @@ export default {
       this.$websocket.initWebSocket();
     },
     getSocketData(res) {
-      console.log(res);
+      const newWarnMsg = JSON.parse(res.detail.data);
-      // let a = JsON.parse(res.detail);
+      // 检查告警消息是否已存在，避免重复添加
-      // console.log(a.type);
+      if (newWarnMsg.type == 1) {
-      this.$notify({
+        if (!this.warnMsgs.includes(newWarnMsg)) {
-        title: "告警",
+          this.warnMsgs.push(newWarnMsg); // 添加新的告警消息到数组中
-        message: res.detail.data,
+        }
-        position: "bottom-right",
+      }
-        type: "warning",
+      console.log("我是告警信息", newWarnMsg);
-        duration: 0,
+      //this.warnMsg = res.detail.data;
-      });
+      // this.$notify({
+      //   title: "告警",
+      //   message: res.detail.data,
+      //   position: "bottom-right",
+      //   type: "warning",
+      //   duration: 0,
+      // });
     },
     setRemUnit() {
       // 设置所有的rem单位
@@ -56,6 +89,34 @@ export default {
       // 根据窗口宽度动态设置html的字体大小
       document.documentElement.style.fontSize = `${remUnit()}px`;
     },
+    //关闭告警
+    handleCloseWarn(index) {
+      console.log("Closing warning:", index);
+      this.warnMsgs.splice(index, 1); // 根据索引移除对应的告警消息
+    },
+    //处理告警并关闭
+    clearWarnClick(item, index) {
+      this.handleCloseWarn(index);
+      updateStateApi({
+        id: item.warningId,
+        state: 0,
+      })
+        .then((res) => {
+          if (res.success) {
+            console.log(res);
+          } else {
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
   },
   destroyed() {
     this.$websocket.close();
@@ -104,4 +165,65 @@ body {
   background-color: #f0f0f0;
   border-radius: 32px;
 }
+.warnDialog-container {
+  .warnDialog {
+    right: 16px;
+    bottom: 16px;
+    width: 330px;
+    padding: 16px;
+    border-radius: 8px;
+    box-sizing: border-box;
+    border: 1px solid #ebeef5;
+    position: fixed;
+    background-color: #fff;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s,
+      bottom 0.3s;
+    overflow: hidden;
+    .warnTitle {
+      display: flex;
+      justify-content: space-between;
+      .left {
+        color: #000;
+        display: flex;
+        align-items: center;
+        height: 24px;
+        line-height: 24px;
+        i {
+          font-size: 24px;
+          color: #e6a23c;
+          margin-right: 8px;
+        }
+      }
+      .right {
+        i {
+          font-size: 24px;
+          color: #606266;
+          cursor: pointer;
+          &:hover {
+            color: #337ab7;
+          }
+        }
+      }
+    }
+    .warnContent {
+      text-align: left;
+      word-break: break-all;
+      font-size: 14px;
+      line-height: 21px;
+      margin: 6px 0 0 0;
+      color: #606266;
+      padding: 0px 12px;
+      p {
+        height: 100px;
+        margin-bottom: 12px;
+        padding: 0px 20px;
+      }
+      .el-button {
+        margin-left: auto;
+        display: flex;
+      }
+    }
+  }
+}
 </style>

src/views/homePage/warnMessage/components/warnDialog.vue

@@ -239,8 +239,12 @@ export default {
       this.page = val;
       this.tableData = [];
       let params = {};
-      params.startTime = this.formdata.starttime;
+      params.startTime = this.$moment(this.formdata.starttime).format(
-      params.endTime = this.formdata.endtime;
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      params.endTime = this.$moment(this.formdata.endtime).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
       params.pageSize = this.pageSize;
       params.pageNum = this.page;
       console.log(params);
@@ -251,8 +255,12 @@ export default {
       this.pageSize = val;
       this.tableData = [];
       let params = {};
-      params.startTime = this.formdata.starttime;
+      params.startTime = this.$moment(this.formdata.starttime).format(
-      params.endTime = this.formdata.endtime;
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      params.endTime = this.$moment(this.formdata.endtime).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
       params.pageSize = this.pageSize;
       params.pageNum = this.page;
       console.log(params);
@@ -290,8 +298,18 @@ export default {
           state: 0,
         })
           .then((res) => {
+            if (res.success) {
               console.log(res);
               row.state = 0;
+            } else {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: res.errorMsg,
+                type: "error",
+              });
+            }
+
             // this.tableData = res.data.content;
           })
           .catch((err) => {

src/views/homePage/warnMessage/index.vue

@@ -65,22 +65,22 @@
         <li>当前值</li>
         <li>触发条件</li>
         <li>告警阈值</li>
-        <li>告警等级</li>
+        <!-- <li>告警等级</li> -->
       </ul>
       <div class="marquee">
         <ul class="scrollUl" v-if="tableData.length !== 0">
           <li v-for="(item, index) in tableData" :key="index">
             <span>{{ item.warnTime }}</span>
             <span>{{ item.zsbName }}</span>
-            <span>{{ item.warnDesc }}</span>
+            <span :title="item.warnDesc">{{ item.warnDesc }}</span>
             <span>{{ item.warnValue }}</span>
             <span :title="item.triggerDesc">{{ item.triggerDesc }}</span>
             <span>{{ item.threshold }}</span>
-            <span>
+            <!-- <span>
               <span v-if="item.warnLevel == 2">高 </span>
               <span v-else-if="item.warnLevel == 1"> 中 </span>
               <span v-else-if="item.warnLevel == 0"> 低 </span></span
-            >
+            > -->
           </li>
         </ul>
         <div v-else class="empty">暂无告警</div>
@@ -163,7 +163,7 @@ export default {
     startIntervalIfNeeded() {
       // 如果定时器尚未启动，则启动它
       if (this.intervalId === null) {
-        this.intervalId = setInterval(this.getwarnList, 10000);
+        this.intervalId = setInterval(this.getwarnList, 60000);
       }
     },
     stopInterval() {
@@ -236,19 +236,19 @@ export default {
         font-size: 12px;
         text-align: center;
         &:first-child {
-          width: 11%;
+          width: 12%;
         }
         &:nth-child(2) {
           width: 15%;
         }
         &:nth-child(3) {
-          width: 20%;
+          width: 24%;
         }
         &:nth-child(4) {
           width: 10%;
         }
         &:nth-child(5) {
-          width: 9%;
+          width: 12%;
         }
         &:nth-child(6) {
           width: 8%;
@@ -281,19 +281,22 @@ export default {
           width: 100%;
           span {
             &:first-child {
-              width: 11%;
+              width: 12%;
             }
             &:nth-child(2) {
               width: 15%;
             }
             &:nth-child(3) {
-              width: 20%;
+              width: 24%;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
             }
             &:nth-child(4) {
               width: 10%;
             }
             &:nth-child(5) {
-              width: 9%;
+              width: 12%;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
@@ -301,9 +304,6 @@ export default {
             &:nth-child(6) {
               width: 8%;
             }
-            &:nth-child(7) {
-              width: 8%;
-            }
           }
         }
       }

src/views/serverIcd/index.vue

@@ -39,6 +39,8 @@
         >
           <el-table-column prop="filename" label="文件名称"> </el-table-column>
           <el-table-column prop="md5" label="md5"> </el-table-column>
+          <el-table-column prop="port" label="端口" width="100px">
+          </el-table-column>
           <el-table-column prop="start" label="是否启用">
             <template slot-scope="scope">
               <el-tag type="success" v-if="scope.row.start == 1">启用</el-tag>