diff --git a/src/assets/css/components/views/charts2/networkOverviewApps.scss b/src/assets/css/components/views/charts2/networkOverviewApps.scss
index db95e502..0f8a1a45 100644
--- a/src/assets/css/components/views/charts2/networkOverviewApps.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewApps.scss
@@ -1,46 +1,57 @@
 .network-overview-apps {
   height: 100%;
 
-  .line-select-metric {
+  .network-overview-apps-header {
     display: flex;
-    justify-content: flex-end;
-    align-items: center;
+    justify-content: space-between;
 
-    &>span {
-      font-size: 12px;
-      color: #575757;
-      font-weight: 400;
-      margin-right: 3px;
+    .network-overview-apps-title {
+      font-size: 14px;
+      color: #353636;
+      font-weight: 600;
+      height: 32px;
     }
-    .line-select__operation {
-      height: 24px;
-      margin-left: 3px;
-      box-shadow: none;
-      border-radius: 2px;
-      .el-input__inner {
-        width: 100px;
-        height: 24px;
-        padding-left: 4px;
-        line-height: 24px;
+
+    .line-select-metric {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      &>span {
         font-size: 12px;
-        color: #2C72C6;
+        color: #575757;
         font-weight: 400;
+        margin-right: 3px;
       }
-      .el-input__suffix {
-        display: flex;
-        .el-input__suffix-inner {
+      .line-select__operation {
+        height: 24px;
+        margin-left: 3px;
+        box-shadow: none;
+        border-radius: 2px;
+        .el-input__inner {
+          width: 100px;
+          height: 24px;
+          padding-left: 4px;
           line-height: 24px;
-          .el-select__caret {
+          font-size: 12px;
+          color: #2C72C6;
+          font-weight: 400;
+        }
+        .el-input__suffix {
+          display: flex;
+          .el-input__suffix-inner {
             line-height: 24px;
-            width: 16px;
-            color: #575757;
+            .el-select__caret {
+              line-height: 24px;
+              width: 16px;
+              color: #575757;
+            }
           }
         }
       }
     }
   }
 
-
   .app-cards {
     display: grid;
     grid-template-rows: repeat(auto-fill, 100px);
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
index b2a099dc..e0dee941 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
@@ -1,20 +1,24 @@
 <template>
   <div class="network-overview-apps">
-    <div class="line-select-metric">
-      <span>{{$t('network.metric')}}:</span>
-      <div class="line-select__operation">
-        <el-select
-            size="mini"
-            v-model="metricFilter"
-            placeholder=""
-            popper-class="common-select"
-            :popper-append-to-body="false"
-            @change="metricChange"
-        >
-          <el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
-        </el-select>
+    <div class="network-overview-apps-header">
+      <div class="network-overview-apps-title">{{$t('networkOverview.appType.providerAndApp')}}</div>
+      <div class="line-select-metric">
+        <span>{{$t('network.metric')}}:</span>
+        <div class="line-select__operation">
+          <el-select
+              size="mini"
+              v-model="metricFilter"
+              placeholder=""
+              popper-class="common-select"
+              :popper-append-to-body="false"
+              @change="metricChange"
+          >
+            <el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </div>
       </div>
     </div>
+
     <div class="app-cards">
       <div class="app-card" v-for="(app, index) in appData" :key="index">
         <div class="app-card-title">
@@ -219,7 +223,7 @@ export default {
       }
     },
     timeFilter: {
-      handler (n) {
+      handler () {
         this.init()
       }
     }
@@ -463,7 +467,6 @@ export default {
     },
     addApp (pageNo, val, show) {
       this.showAddApp = true
-      const letter = 'abcdefghijklmnopqrstuvwxyz'
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
@@ -482,7 +485,7 @@ export default {
       } else {
         params.pageNo = 1
       }
-      if (this.appTypeTab == 0) {
+      if (this.appTypeTab === 0) {
         params.type = 'overviewProvide'
         get(api.dict, params).then(res => {
           if (res.code === 200) {
@@ -507,7 +510,7 @@ export default {
           this.loading = false
           this.loadingBody = false
         })
-      } else if (this.appTypeTab == 1) {
+      } else if (this.appTypeTab === 1) {
         params.type = 'overviewApp'
         get(api.dict, params).then(res => {
           res.data.list = res.data.list.filter(l => !this.appData.some(pd => pd.type === 'app' && pd.name === l.value))
@@ -547,7 +550,7 @@ export default {
     cancelApp () {
       this.showAddApp = false
     },
-    appTypeTabChange (val) {
+    appTypeTabChange () {
       this.pageObj.pageNo = 1
       this.searcherApp = ''
       this.addApp()