NEZ-819 fix: 修复asset顶部过滤加载慢、抖动的问题

nezha-fronted/package.json

@@ -25,7 +25,7 @@
     "axios": "^0.19.0",
     "cytoscape": "^3.15.2",
     "echarts": "^5.0.1",
-    "element-ui": "^2.13.0",
+    "element-ui": "^2.15.3",
     "file-saver": "^2.0.2",
     "leaflet": "^1.7.1",
     "moment-timezone": "^0.5.33",

nezha-fronted/src/components/common/labelFilter/clickSearch.vue

@@ -1,14 +1,20 @@
 <template>
-  <div v-loading="!titleSearchListCopy.ready" :style="{'height': height + 'px'}" class="search-box__container">
+  <div :style="{'height': height + 'px'}" class="search-box__container">
-    <div v-for="(data, type, index) in titleSearchListCopy" v-cloak v-if="data.show" :key="index" ref="searchContentBox" class="search-content-box">
+    <div v-for="(data, type, index) in titleSearchListCopy" v-cloak :key="index" ref="searchContentBox" class="search-content-box">
       <label class="search-title">{{data.label}}:</label>
+      <el-skeleton v-if="data.type === 'checkBox'" :class="skeletonClass(data)" :loading="!data.show" :rows="1" class="search-items">
+        <template>
           <el-checkbox-group v-if="data.type === 'checkBox'" ref="searchContent" v-model="selectValueOut[data.key]">
             <template v-for="(item, j) in data.children">
               <el-checkbox v-show="j < data.index || data.showMore" :key="j" :label="item.value">{{item.key || item.name || item.label}}</el-checkbox>
             </template>
           </el-checkbox-group>
-      <template v-for="(item, j) in data.children" v-else-if="data.type === 'dropdownCheckBox'">
+        </template>
+      </el-skeleton>
+      <el-skeleton v-else-if="data.type === 'dropdownCheckBox'" :loading="!data.show" :rows="1" class="search-items">
+        <template>
           <dropdown
+            v-for="(item, j) in data.children"
             v-show="j < data.index || data.showMore"
             :key="j"
             :ref="`${type}_${item.id}_cascader`"
@@ -25,6 +31,7 @@
               @click="changShowMore(type)">
         More <i :class="data.showMore ? 'arrow-up' : ''" class="el-icon-arrow-down arrow-down"/>
       </span>
+      </el-skeleton>
     </div>
   </div>
 </template>
@@ -85,6 +92,17 @@ export default {
         return top
       }
     },
+    skeletonClass () {
+      return function (data) {
+        let className = ''
+        if (data.type === 'checkBox') {
+          className = 'search-items--checkbox'
+        } else if (data.type === 'dropdownCheckBox') {
+          className = 'search-items--dropdown'
+        }
+        return className
+      }
+    },
     height () {
       const paddingHeight = 30
       const checkBoxRowHeight = 31
@@ -106,14 +124,13 @@ export default {
       immediate: true,
       deep: true,
       handler (n) {
-        if (n.ready) {
+        console.info(n)
         this.titleSearchListCopy = JSON.parse(JSON.stringify(n))
         this.$nextTick(() => {
           this.setEachCascWidth()
           this.needMore()
         })
       }
-      }
     },
     selectValue: {
       immediate: true,
@@ -231,7 +248,6 @@ export default {
         }
       } else { // 初始
         Object.keys(this.titleSearchListCopy).forEach(type => {
-          if (type !== 'ready') {
           this.titleSearchListCopy[type].children.forEach(c => {
             if (this.titleSearchListCopy[type].type === 'dropdownCheckBox') {
               const labelWidth = this.computeDistance(c.name + ':') + this.widthConstant.dropdownCheckBox.labelPadding // cascader-label总宽度
@@ -245,7 +261,6 @@ export default {
               this.$set(c, 'width', width) // 总宽
             }
           })
-          }
         })
       }
     },
@@ -273,7 +288,6 @@ export default {
       } else { // 全体重排
         this.contentWidth = contentWidth
         Object.keys(this.titleSearchListCopy).forEach(type => {
-          if (type !== 'ready') {
           this.titleSearchListCopy[type].width = 0
           this.titleSearchListCopy[type].showMore = false
           let showMore = false
@@ -289,7 +303,6 @@ export default {
           if (!showMore) {
             this.titleSearchListCopy[type].index = this.titleSearchListCopy[type].children.length
           }
-          }
         })
       }
     },
@@ -368,6 +381,18 @@ export default {
     vertical-align: text-bottom;
   }
 }
+.search-items {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+
+  &.search-items--checkbox .el-skeleton {
+    height: 21px;
+  }
+  &.search-items--dropdown .el-skeleton {
+    height: 28px;
+  }
+}
 .search-more {
   position: absolute;
   right: 4px;

nezha-fronted/src/components/page/asset/asset.vue

@@ -209,13 +209,12 @@ export default {
       snmpCredentialData: [],
       fieldGroupData: [],
       titleSearchList: {
-        ready: false,
         dc: {
           label: this.$t('overall.dc'),
           key: 'dcIds',
           type: 'checkBox',
           children: [],
-          show: true,
+          show: false,
           showMore: false,
           width: 0,
           index: -1
@@ -225,7 +224,7 @@ export default {
           key: 'typeIds',
           type: 'checkBox',
           children: [],
-          show: true,
+          show: false,
           showMore: false,
           width: 0,
           index: -1
@@ -248,7 +247,7 @@ export default {
           key: 'modelIds',
           type: 'dropdownCheckBox',
           children: [],
-          show: true,
+          show: false,
           showMore: false,
           width: 0,
           index: -1
@@ -258,7 +257,7 @@ export default {
           key: 'fields',
           type: 'dropdownCheckBox',
           children: [],
-          show: true,
+          show: false,
           showMore: false,
           width: 0,
           index: -1
@@ -446,12 +445,21 @@ export default {
   },
   mounted () {
     // 初始化数据
-    Promise.all([this.getModelData(), this.getTypeData(), this.getDcData(), this.getSearchableMetaData()]).then(res => {
+    this.getModelData().then(res => {
-      this.titleSearchList.model.children = res[0]
+      this.titleSearchList.model.children = res
-      this.titleSearchList.type.children = res[1]
+      this.titleSearchList.model.show = true
-      this.titleSearchList.dc.children = res[2]
+    })
-      this.titleSearchList.assetLabel.children = res[3]
+    this.getTypeData().then(res => {
-      this.titleSearchList.ready = true
+      this.titleSearchList.type.children = res
+      this.titleSearchList.type.show = true
+    })
+    this.getDcData().then(res => {
+      this.titleSearchList.dc.children = res
+      this.titleSearchList.dc.show = true
+    })
+    this.getSearchableMetaData().then(res => {
+      this.titleSearchList.assetLabel.children = res
+      this.titleSearchList.assetLabel.show = true
     })
     this.getStateData()
     this.getTypeTreeData()

nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue

@@ -162,13 +162,12 @@ export default {
       },
       titleSearch: {},
       titleSearchList: {
-        ready: false,
         project: {
           label: 'Project',
           key: 'projectIds',
           type: 'checkBox',
           children: [],
-          show: true,
+          show: false,
           showMore: false,
           width: 0,
           index: -1
@@ -178,7 +177,7 @@ export default {
           key: 'moduleIds',
           type: 'checkBox',
           children: [],
-          show: true,
+          show: false,
           showMore: false,
           width: 0,
           index: -1
@@ -188,7 +187,7 @@ export default {
           key: 'states',
           type: 'checkBox',
           children: [],
-          show: true,
+          show: false,
           showMore: false,
           width: 0,
           index: -1
@@ -283,6 +282,29 @@ export default {
       this.getTableData()
     },
     getTitleSearch () {
+      this.$get('monitor/project', { pageSize: -1 }).then(res => {
+        if (res.code === 200) {
+          this.titleSearchList.project.children = res.data.list.map(item => {
+            return { key: item.name, value: item.id, name: item.name }
+          })
+          this.titleSearchList.project.show = true
+        }
+      })
+      this.$get('monitor/module', { pageSize: -1 }).then(res => {
+        if (res.code === 200) {
+          this.titleSearchList.module.children = res.data.list.map(item => {
+            return { key: item.name, value: item.id, name: item.name }
+          })
+          this.titleSearchList.module.show = true
+        }
+      })
+      this.titleSearchList.state.children = [
+        { key: 'Down', value: 0, name: 'Down' },
+        { key: 'Up', value: 1, name: 'Up' },
+        { key: 'Suspended', value: 2, name: 'Suspended' }
+      ]
+      this.titleSearchList.state.show = true
+/*
       const titleRequest = new Promise(resolve => {
         this.$get('monitor/project', { pageSize: -1 }).then(res => {
           if (res.code === 200) {
@@ -309,8 +331,8 @@ export default {
           { key: 'Up', value: 1, name: 'Up' },
           { key: 'Suspended', value: 2, name: 'Suspended' }
         ]
-        this.titleSearchList.ready = true
       })
+*/
     },
     batchModify () {
       if (!this.batchDeleteObjs.length) {