From e6a4ca2a324a4b5ba348c4d89b82aadc8a63513d Mon Sep 17 00:00:00 2001
From: likexuan <likexuan@geedgenetworks.com>
Date: Tue, 14 Feb 2023 11:45:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20diagnosis=20=E9=A1=B5=E9=9D=A2=20dialog?=
 =?UTF-8?q?=20=E5=85=B3=E9=97=AD=E6=97=B6=E7=94=A8=E6=97=B6=E6=B8=85?=
 =?UTF-8?q?=E7=A9=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/common/diagnosisTab.scss   | 23 +++++++++++++++----
 .../src/components/common/diagnosisTab.vue    | 13 ++++++-----
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/diagnosisTab.scss b/nezha-fronted/src/assets/css/components/common/diagnosisTab.scss
index 70f9bbef5..67d8f230b 100644
--- a/nezha-fronted/src/assets/css/components/common/diagnosisTab.scss
+++ b/nezha-fronted/src/assets/css/components/common/diagnosisTab.scss
@@ -36,10 +36,17 @@
                     margin-bottom: 4px;
                 }
                 .dialog-header-item{
+                    display: flex;
                     text-transform: uppercase;
                     color: $--color-text-secondary;
-                    span{
+                    &>div{
+                        display: flex;
+                        align-items: center;
                         margin-right: 10px;
+                        .active-icon{
+                            width: 6px;
+                            height: 6px;
+                        }
                     }
                 }
             }
@@ -61,11 +68,11 @@
                     transform: rotate(270deg);
                 }
                 td.el-table__expanded-cell {
-                    padding: 15px 0 15px 45px;
+                    padding: 15px 0 15px 34px;
                     background-color: $--background-color-empty !important;
                   }
                 td.el-table__expanded-cell:hover {
-                    padding: 15px 0 15px 45px;
+                    padding: 15px 0 15px 34px;
                     background-color: $--background-color-base !important;
                   }
                 .expand-details{
@@ -76,7 +83,15 @@
                         background: $--background-color-empty;
                         td{
                             border-color: $--border-color-light;
-                        }  
+                            i.nz-icon{
+                                font-size: 14px;
+                            }
+                            &:nth-of-type(1){
+                                .cell{
+                                    padding-right: 0;
+                                }
+                            }
+                        } 
                         &:nth-last-of-type(1){
                             td{
                                 border-color: transparent;
diff --git a/nezha-fronted/src/components/common/diagnosisTab.vue b/nezha-fronted/src/components/common/diagnosisTab.vue
index 800ab96e0..a55c9ad40 100644
--- a/nezha-fronted/src/components/common/diagnosisTab.vue
+++ b/nezha-fronted/src/components/common/diagnosisTab.vue
@@ -18,7 +18,7 @@
         <div class="dialog-header-l">
             <i class="nz-icon nz-icon-Diagnosis1"></i>
             <div>
-              <div class="dialog-header-name">{{$t('project.endpoint.endpointName')}}</div>
+              <div class="dialog-header-name">{{diagnosisTabData.row.name}}</div>
               <div v-html="suspendedStr(diagnosisTabData.row.configs[0].state)" class="dialog-header-item">
               </div>
             </div>
@@ -128,8 +128,8 @@ export default {
         {
           label: 'state',
           prop: 'state',
-          minWidth: 34,
-          width: 34
+          minWidth: 24,
+          width: 24
         }, {
           label: 'name',
           prop: 'item',
@@ -187,13 +187,13 @@ export default {
       let str = ''
       arr.forEach((item, index) => {
         if (index === 0) {
-          str += `<span><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></i> DC</span>`
+          str += `<div><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></i> DC</div>`
         }
         if (index === 1) {
-          str += `<span><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></i> ASSET</span>`
+          str += `<div><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></i> ASSET</div>`
         }
         if (index === 2) {
-          str += `<span><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></i> ENDPOINT</span>`
+          str += `<div><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></i> ENDPOINT</div>`
         }
       })
       return str
@@ -225,6 +225,7 @@ export default {
     dialogVisible (n) {
       if (!n) {
         this.$store.dispatch('dispatchShowDiagnosisTab', false)
+        this.elapsedTime = 0
       }
     }
   },