From bbb247f87a39f66b1a90e1663cdcc41daaf6ab0e Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Tue, 28 Nov 2023 18:04:19 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=E5=BC=B9=E7=AA=97=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/css/common.scss      | 31 +++++++++++++++----
 .../src/components/layout/header.vue          |  1 -
 nezha-fronted/src/libs/bus.js                 | 30 ++++++++++++------
 3 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 0671b5f27..fcd0e6ac1 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -833,12 +833,26 @@ input::placeholder{
 }
 
 .operationTutorial-dialog{
-  .el-dialog__title{
-    font-size: 14px;
-    font-weight: 600;
+  .el-dialog{
+    width: 85%;
+    height: 90%;
+  }
+  .el-dialog__header{
+    box-sizing: border-box;
+    padding: 20px;
+    padding-bottom: 15px;
+    line-height: 25px;
+    height: 55px;
+    .el-dialog__title{
+      font-size: 14px;
+      font-weight: 600;
+    }
   }
   .dialog-header {
-    margin-bottom: 15px;
+    box-sizing: border-box;
+    padding-bottom: 15px;
+    line-height: 25px;
+    height: 40px;
     word-wrap: break-word;
     color: $--color-text-primary;
     span{
@@ -849,11 +863,13 @@ input::placeholder{
     }
   }
   .el-dialog__body {
+    box-sizing: border-box;
     padding: 30px;
     padding-top: 0;
+    height: calc(100% - 55px);    
     .operationTutorial-img{
       width: 100%;
-      height: 390px;
+      height: calc(100% - 70px);    
       display: block;
       box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
     }
@@ -863,7 +879,10 @@ input::placeholder{
       color: $--color-text-regular;
       font-weight: 400;
       text-align: center;
-      margin-top: 12px;
+      box-sizing: border-box;
+      padding-top: 12px;
+      line-height: 18px;
+      height: 30px;
     }
   }
 }
\ No newline at end of file
diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index 9315945d3..5e74d5c61 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -91,7 +91,6 @@
       :title="$t('overall.tip')"
       :visible.sync="dialogVisible"
       @close='handleClose'
-      width="772px"
       :append-to-body="true"
     >
       <div class="dialog-header">
diff --git a/nezha-fronted/src/libs/bus.js b/nezha-fronted/src/libs/bus.js
index bc1041f66..8d5d0af22 100644
--- a/nezha-fronted/src/libs/bus.js
+++ b/nezha-fronted/src/libs/bus.js
@@ -31,7 +31,9 @@ export default new Vue({
       // 创建图表信息
       chartAddInfo: {
         metricTarget: []
-      }
+      },
+      newAlertTimer: undefined,
+      lastId: -1
     }
   },
   methods: {
@@ -350,24 +352,33 @@ export default new Vue({
         pageSize: 1,
         orderBy: '-id'
       }
+      this.newAlertTimer = true
       const response = await get('/alert/message/query', queryParams, { headers: { notCancel: true } })
-      const lastId = this.$lodash.get(response, 'data.list[0].id', -1)
+      this.lastId = this.$lodash.get(response, 'data.list[0].id', -1)
       const interval = store.state.nzDefaultConfig.interval
-      this.getNewAlert(lastId, interval || 10)
+      // 防止正在请求时关闭 此时不再执行
+      if (this.newAlertTimer === null) {
+        return
+      }
+      this.getNewAlert(interval || 10)
     },
     // 查询告警消息
-    getNewAlert (lastId, interval = 10) {
+    getNewAlert (interval = 10) {
+      if (this.newAlertTimer && this.newAlertTimer !== true) {
+        return
+      }
       const ms = parseInt(interval) * 1000
-      this.newAlertTimer = setTimeout(async () => {
+      this.newAlertTimer = setInterval(async () => {
         const queryParams = {
           body: encodeURIComponent(JSON.stringify({
-            id: ['>' + lastId],
+            id: ['>' + this.lastId],
             state: 1
           })),
           orderBy: '-id'
         }
         const response = await get('/alert/message/query', queryParams, { headers: { notCancel: true } })
-        if (!this.newAlertTimer) {
+        // 防止正在请求时关闭 此时不再执行
+        if (this.newAlertTimer === null) {
           return
         }
         if (response.code == 200) {
@@ -375,7 +386,7 @@ export default new Vue({
             this.audio = new Audio(audioUrl)
           }
           if (response.data.list && response.data.list.length) {
-            lastId = response.data.list.reduce(function (max, obj) {
+            this.lastId = response.data.list.reduce(function (max, obj) {
               return obj.id > max ? obj.id : max
             }, -1)
             const h = this.$createElement
@@ -410,7 +421,6 @@ export default new Vue({
             this.audio.play()
           }
         }
-        this.getNewAlert(lastId, interval)
       }, ms)
     },
     toAlertPage () {
@@ -420,7 +430,7 @@ export default new Vue({
       this.$notify.closeAll()
     },
     closeNotification () {
-      clearTimeout(this.newAlertTimer)
+      clearInterval(this.newAlertTimer)
       this.newAlertTimer = null
     }
   },