fix: Dashboard - network overview - 新增app， 部分样式及功能问题修复

src/assets/css/components/views/charts2/networkOverviewApps.scss

@@ -210,11 +210,16 @@
         position: relative;
         flex: 1;
         background-color: #EBF1F4;
-
+        .el-tabs__item.is-top {
+          height: 32px;
+        }
+        .el-tabs__item.is-top:nth-child(2) {
+          padding: 0;
+        }
         .body__searcher {
           position: absolute;
           right: 28px;
-          top: 15px;
+          top: 9px;
           width: 280px;
           .el-input.el-input--mini {
             .el-input__inner {
@@ -255,6 +260,16 @@
             background-color: #a0a0a0;
             border-radius: 5px;
           }
+          .body__app.app-show,
+          .body__app.provide-show {
+            background: #FFFFFF;
+            border: 1px solid #C5C5C5;
+            box-shadow: 0 2px 4px 0 rgba(51,51,51,0.10);
+            border-radius: 4px;
+            .body__app-content .body__app-left .body__app-left-title {
+              color: #046ECA;
+            }
+          }
           .body__app {
             height: 120px;
             background: #FFFFFF;
@@ -276,10 +291,7 @@
                   font-weight: 700;
                   margin-bottom: 6px;
                 }
-                .body__app-left-title.app-show,
+
-                .body__app-left-title.provide-show {
-                  color: #046ECA;
-                }
                 span {
                   i {
                     color: green;

src/views/charts2/charts/NetworkOverviewApps.vue

@@ -83,29 +83,29 @@
           <el-tabs v-model="appTypeTab" @tab-click="appTypeTabChange">
             <el-tab-pane :label="$t('networkOverview.appType.provider')" :name="0">
               <div class="body__apps">
-                <div class="body__app" v-for="app in providerOptions" :key="app.name"  @click="appCheckedChange(app, 0)">
+                <div class="body__app" :class="{'provide-show': app.provideShow}" v-for="app in providerOptions" :key="app.name"  @click="appCheckedChange(app, 0)">
                   <div class="body__app-content">
                     <div class="body__app-left">
                       <span><i class="cn-icon cn-icon-mining-pool"></i></span>
-                      <span class="body__app-left-title" :class="{'provide-show': app.provideShow}">{{app.name}},{{app.desc}}</span>
+                      <span class="body__app-left-title">{{app.name}}</span>
                     </div>
                     <div class="body__app-content-right" v-if="app.provideShow"><span><i class="cn-icon cn-icon-a-allclear"></i></span></div>
                   </div>
-                  <div class="body__app-value">This is a description this is a description this is a description this is a description</div>
+                  <div class="body__app-value">{{app.desc}}</div>
                 </div>
               </div>
             </el-tab-pane>
             <el-tab-pane :label="$t('networkOverview.appType.app')" :name="1">
               <div class="body__apps">
-                <div class="body__app" v-for="app in appOptions" :key="app.name" @click="appCheckedChange(app, 1)">
+                <div class="body__app" :class="{'app-show': app.appShow}" v-for="app in appOptions" :key="app.name" @click="appCheckedChange(app, 1)">
                   <div class="body__app-content">
                     <div class="body__app-left">
                       <span><i class="cn-icon cn-icon-mining-pool"></i></span>
-                      <span class="body__app-left-title" :class="{'app-show': app.appShow}">{{app.name}},{{app.desc}}</span>
+                      <span class="body__app-left-title">{{app.name}}</span>
                     </div>
                     <div class="body__app-content-right" v-if="app.appShow"><span><i class="cn-icon cn-icon-a-allclear"></i></span></div>
                   </div>
-                  <div class="body__app-value">This is a description this is a description this is a description this is a description</div>
+                  <div class="body__app-value">{{app.desc}}</div>
                 </div>
               </div>
             </el-tab-pane>
@@ -158,7 +158,9 @@ export default {
       appTypeTab: 0,
       appShowName: false,
       searcherApp: '',
-      appShowTypeTab: 0
+      appShowTypeTab: 0,
+      initialAppOptionsData: [],
+      initialProviderOptionsData: []
     }
   },
   methods: {
@@ -620,25 +622,22 @@ export default {
           provideShow: false
         })
       }
+      this.initialAppOptionsData = this.appOptions
+      this.initialProviderOptionsData = this.providerOptions
     },
     cancelApp () {
       this.showAddApp = false
     },
-    appTypeTabChange (val) {
+    appTypeTabChange () {
-      this.appShowTypeTab = val.index
       this.searcherApp = ''
     },
     searcherAppChange (val) {
       if (val) {
-        this.addApp()
+        this.providerOptions = this.initialProviderOptionsData.filter(t => t.name.indexOf(val) > -1)
-        if (this.appShowTypeTab == 0) {
+        this.appOptions = this.initialAppOptionsData.filter(t => t.name.indexOf(val) > -1)
-          this.providerOptions = this.providerOptions.filter((t, i) => t.name.indexOf(val) > -1 || t.desc.indexOf(val) > -1)
-        }
-        if (this.appShowTypeTab == 1) {
-          this.appOptions = this.appOptions.filter((t, i) => t.name.indexOf(val) > -1 || t.desc.indexOf(val) > -1)
-        }
       } else {
-        this.addApp()
+        this.providerOptions = this.initialProviderOptionsData
+        this.appOptions = this.initialAppOptionsData
       }
     },
     appCheckedChange (app, num) {