style: 统一部分下拉列表样式

src/assets/css/common/index.scss

@@ -1,5 +1,6 @@
 @import 'right-box-common';
 @import 'table-common';
+@import 'part-select';
 
 /* 通用css */
 .panel-chart__no-data {

src/assets/css/common/part-select.scss

@@ -0,0 +1,7 @@
+// 部分 select 通用样式
+.common-select.el-select__popper {
+  top: 27px !important;
+  .el-popper__arrow {
+    display: none;
+  }
+}

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

@@ -365,12 +365,6 @@
     }
   }
 }
-.el-select__popper.app-metric {
-  top: 27px !important;
-  .el-popper__arrow {
-    display: none;
-  }
-}
 .app-dropdown.el-popper.is-pure {
   .el-scrollbar {
     .el-scrollbar__wrap {

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

@@ -154,13 +154,6 @@
       }
     }
   }
-
-}
-.metric.el-select__popper,.reference-line.el-select__popper {
-  top: 221px !important;
-  .el-popper__arrow {
-    display: none;
-  }
 }
 .el-select-dropdown {
   .el-scrollbar {

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

@@ -270,9 +270,3 @@
   right:200px !important;
   transform: translateY(126px) !important;*/
 }
-.metric-select.el-select__popper {
-  top: 27px !important;
-  .el-popper__arrow {
-    display: none;
-  }
-}

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

@@ -14,7 +14,12 @@
     position: absolute;
     right: 10px;
     top: 10px;
-
+    .el-select__popper.map-select-down {
+      top: 32px !important;
+      .el-popper__arrow {
+        display: none;
+      }
+    }
     .map-select {
       margin-left: 10px;
 

src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue

@@ -7,7 +7,7 @@
             size="mini"
             v-model="metricFilter"
             placeholder=""
-            popper-class="app-metric"
+            popper-class="common-select"
             :popper-append-to-body="false"
             @change="metricChange"
         >

src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue

@@ -34,7 +34,8 @@
               <el-select
                   size="mini"
                   v-model="value1"
-                  popper-class="metric"
+                  popper-class="common-select"
+                  :popper-append-to-body="false"
                   @change="metricSelectChange"
               >
                 <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
@@ -48,7 +49,8 @@
                   size="mini"
                   v-model="value2"
                   :disabled="!activeShow"
-                  popper-class="reference-line"
+                  popper-class="common-select"
+                  :popper-append-to-body="false"
                   @change="referenceSelectChange"
               >
                 <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>

src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue

@@ -70,7 +70,7 @@
         <span>{{$t('network.metric')}}:</span>
         <el-select v-model="metric"
                    class="option__select select-column"
-                   popper-class="option-popper metric-select"
+                   popper-class="option-popper common-select"
                    :popper-append-to-body="false"
                    key="tabMetric"
                    @change="changeMetric"

src/views/charts2/charts/npm/NpmAppEventTable.vue

@@ -3,7 +3,7 @@
     <div class="metric-select" >
       <el-select v-model="metric"
                  class="option__select select-column"
-                 popper-class="option-popper metric-select"
+                 popper-class="option-popper common-select"
                  :popper-append-to-body="false"
                  key="tabMetric"
                  @change="changeMetric"
@@ -24,6 +24,7 @@
             :data="tableData"
             class="npm-app-event-table"
             height="100%"
+            empty-text=" "
     >
       <template v-for="(item, index) in customTableTitles" :key="index">
         <el-table-column class="data-column" :min-width="columnWidth(index)">
@@ -73,8 +74,11 @@
 </template>
 
 <script>
+import chartMixin from '@/views/charts2/chart-mixin'
+
 export default {
   name: 'NpmAppEventTable',
+  mixins: [chartMixin],
   data () {
     return {
       metric: 'Application',
@@ -152,6 +156,9 @@ export default {
     }
   },
   computed: {
+  },
+  mounted () {
+    this.$emit('toggleLoading', false)
   }
 }
 </script>

src/views/charts2/charts/npm/NpmMap.vue

@@ -6,6 +6,8 @@
           size="mini"
           v-model="trafficDirection"
           class="map-select map-select__direction"
+          popper-class="map-select-down"
+          :popper-append-to-body="false"
       >
         <el-option value="Server">Server</el-option>
         <el-option value="Client">Client</el-option>
@@ -17,6 +19,8 @@
           clearable
           placeholder="All"
           filterable
+          popper-class="map-select-down"
+          :popper-append-to-body="false"
       >
         <template #prefix><i class="cn-icon cn-icon-location" style="color: #575757;"></i></template>
         <el-option v-for="(country, index) in locationOptions" :key="index" :value="country.value">{{country.label}}</el-option>