1. npm - event app事件表格样式调整

2. network overview - 表格样式调整

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 {

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({

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: {
   }
 }