From 69f08779aaf20d9be2d38eebd871b3e3efebd8dd Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@geedgenetworks.com>
Date: Tue, 9 Aug 2022 11:46:48 +0800
Subject: [PATCH] =?UTF-8?q?1.=20npm=20-=20event=20app=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4=202.=20n?=
 =?UTF-8?q?etwork=20overview=20-=20=E8=A1=A8=E6=A0=BC=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/charts2/npmAppEventTable.scss       | 28 ++++---------------
 .../charts2/charts/NetworkOverviewTabs.vue    |  6 +++-
 src/views/charts2/charts/NpmAppEventTable.vue | 14 ++++++++--
 3 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/assets/css/components/views/charts2/npmAppEventTable.scss b/src/assets/css/components/views/charts2/npmAppEventTable.scss
index e52a083e..1be6dd8c 100644
--- a/src/assets/css/components/views/charts2/npmAppEventTable.scss
+++ b/src/assets/css/components/views/charts2/npmAppEventTable.scss
@@ -56,16 +56,17 @@
     }
     .el-table__body-wrapper.is-scrolling-none {
       tr td {
-        padding: 7.5px 0;
+        padding: 8px 0 0 0;
       }
     }
   }
   .data-app-event-table{
     display: flex !important;
-    height: 20px;
+    height: auto;
     line-height: 20px;
     flex-direction: row;
     align-items: center;
+    flex-wrap: wrap;
     .data-severity {
       font-size: 12px;
       color: #353636;
@@ -87,26 +88,6 @@
       height:6px;
       margin-right:4px;
     }
-    .critical {
-      color: #E26154;
-      background: rgba(226,97,84, .18);
-    }
-    .high {
-      color: #E48E4D;
-      background: rgba(228,142,77, .18);
-    }
-    .info {
-      color: #88AF65;
-      background: rgba(136,175,101, .18);
-    }
-    .medium {
-      color: #E7B34E;
-      background: rgba(231,179,78, .18);
-    }
-    .low {
-      color: #DAC74B;
-      background: rgba(218,199,75, .18);
-    }
     .data-applications {
       font-size: 12px;
       color: $blue;
@@ -121,12 +102,15 @@
       border-radius: 4px;
       padding: 0 6px;
       margin-right:10px;
+      min-width: fit-content;
+      margin-bottom: 8px;
     }
     .data-eventCount {
       font-family: NotoSansHans-Medium;
       font-size: 12px;
       color: #046ECA;
       font-weight: 500;
+      width:200px;
     }
   }
   .el-table--group::after,.el-table--border::after, .el-table::before {
diff --git a/src/views/charts2/charts/NetworkOverviewTabs.vue b/src/views/charts2/charts/NetworkOverviewTabs.vue
index 527358a8..d6127d39 100644
--- a/src/views/charts2/charts/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/NetworkOverviewTabs.vue
@@ -45,7 +45,7 @@
                         <i class="cn-icon-decline cn-icon"></i>{{scope.row['trendValue']}}
                       </div>
                       <div v-else-if="scope.row['trend'] === 'noChange'" class="data-total-trend data-total-trend-black">
-                        <i class="cn-icon-decline cn-icon"></i>{{scope.row['trendValue']}}
+                        <i class="cn-icon-constant cn-icon"></i>{{scope.row['trendValue']}}
                       </div>
 
                     </div>
@@ -487,6 +487,10 @@ export default {
                   trend = 'noChange'
                 }
                 trendPercent = trendPercent + '%'
+                if(trendPercent==='0%'){
+                  trend = 'noChange'
+                  trendPercent = ''
+                }
               }
             }
             this.tableData.push({
diff --git a/src/views/charts2/charts/NpmAppEventTable.vue b/src/views/charts2/charts/NpmAppEventTable.vue
index 013fc4b8..1e3793a1 100644
--- a/src/views/charts2/charts/NpmAppEventTable.vue
+++ b/src/views/charts2/charts/NpmAppEventTable.vue
@@ -26,7 +26,7 @@
             height="100%"
     >
       <template v-for="(item, index) in customTableTitles" :key="index">
-        <el-table-column class="data-column">
+        <el-table-column class="data-column" :min-width="columnWidth(index)">
           <template #header>
             <span class="data-column__span">{{$t(item.label)}}</span>
           </template>
@@ -63,7 +63,6 @@
               <template v-else-if="item.prop === 'eventCount'">
                 <span class="data-eventCount">{{scope.row[item.prop]}}</span>
               </template>
-              <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
               <span v-else>-</span>
             </div>
           </template>
@@ -141,6 +140,17 @@ export default {
       ]
     }
   },
+  methods:{
+    columnWidth(index){
+      if(index===0 || index===1){
+        return "20%"
+      }else if(index===2){
+        return "35%"
+      }else if(index===3){
+        return "15%"
+      }
+    }
+  },
   computed: {
   }
 }