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,30 +1,37 @@
 <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-checkbox-group v-if="data.type === 'checkBox'" ref="searchContent" v-model="selectValueOut[data.key]">
+      <el-skeleton v-if="data.type === 'checkBox'" :class="skeletonClass(data)" :loading="!data.show" :rows="1" class="search-items">
-        <template v-for="(item, j) in data.children">
+        <template>
-          <el-checkbox v-show="j < data.index || data.showMore" :key="j" :label="item.value">{{item.key || item.name || item.label}}</el-checkbox>
+          <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>
-      </el-checkbox-group>
+      </el-skeleton>
-      <template v-for="(item, j) in data.children" v-else-if="data.type === 'dropdownCheckBox'">
+      <el-skeleton v-else-if="data.type === 'dropdownCheckBox'" :loading="!data.show" :rows="1" class="search-items">
-        <dropdown
+        <template>
-          v-show="j < data.index || data.showMore"
+          <dropdown
-          :key="j"
+            v-for="(item, j) in data.children"
-          :ref="`${type}_${item.id}_cascader`"
+            v-show="j < data.index || data.showMore"
-          :collapse-tags="true"
+            :key="j"
-          :item="item"
+            :ref="`${type}_${item.id}_cascader`"
-          @blur="casFocus"
+            :collapse-tags="true"
-          @change="(value) => casChange(value, type, item, data.key)"
+            :item="item"
-          @focus="casFocus"
+            @blur="casFocus"
-        ></dropdown>
+            @change="(value) => casChange(value, type, item, data.key)"
-      </template>
+            @focus="casFocus"
-      <span v-show="contentWidth < data.width"
+          ></dropdown>
-            :style="{top: `${moreBtnTop(data.type)}px`}"
+        </template>
-            class="search-more"
+        <span v-show="contentWidth < data.width"
-            @click="changShowMore(type)">
+              :style="{top: `${moreBtnTop(data.type)}px`}"
+              class="search-more"
+              @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,13 +124,12 @@ export default {
       immediate: true,
       deep: true,
       handler (n) {
-        if (n.ready) {
+        console.info(n)
-          this.titleSearchListCopy = JSON.parse(JSON.stringify(n))
+        this.titleSearchListCopy = JSON.parse(JSON.stringify(n))
-          this.$nextTick(() => {
+        this.$nextTick(() => {
-            this.setEachCascWidth()
+          this.setEachCascWidth()
-            this.needMore()
+          this.needMore()
-          })
+        })
-        }
       }
     },
     selectValue: {
@@ -231,21 +248,19 @@ export default {
         }
       } else { // 初始
         Object.keys(this.titleSearchListCopy).forEach(type => {
-          if (type !== 'ready') {
+          this.titleSearchListCopy[type].children.forEach(c => {
-            this.titleSearchListCopy[type].children.forEach(c => {
+            if (this.titleSearchListCopy[type].type === 'dropdownCheckBox') {
-              if (this.titleSearchListCopy[type].type === 'dropdownCheckBox') {
+              const labelWidth = this.computeDistance(c.name + ':') + this.widthConstant.dropdownCheckBox.labelPadding // cascader-label总宽度
-                const labelWidth = this.computeDistance(c.name + ':') + this.widthConstant.dropdownCheckBox.labelPadding // cascader-label总宽度
+              const width = labelWidth + this.widthConstant.dropdownCheckBox.inputOriginalWidth + this.widthConstant.dropdownCheckBox.boxMargin
-                const width = labelWidth + this.widthConstant.dropdownCheckBox.inputOriginalWidth + this.widthConstant.dropdownCheckBox.boxMargin
+              this.$set(c, 'width', width) // 总宽
-                this.$set(c, 'width', width) // 总宽
+              this.$set(c, 'originalWidth', width) // 初始总宽
-                this.$set(c, 'originalWidth', width) // 初始总宽
+              this.$set(c, 'labelWidth', labelWidth) // label区域宽
-                this.$set(c, 'labelWidth', labelWidth) // label区域宽
+              this.$set(c, 'inputWidth', this.widthConstant.dropdownCheckBox.inputOriginalWidth) // 内容区域宽
-                this.$set(c, 'inputWidth', this.widthConstant.dropdownCheckBox.inputOriginalWidth) // 内容区域宽
+            } else if (this.titleSearchListCopy[type].type === 'checkBox') {
-              } else if (this.titleSearchListCopy[type].type === 'checkBox') {
+              const width = this.computeDistance(c.name) + this.widthConstant.checkBox.tagBlankTotal + this.widthConstant.checkBox.boxMargin
-                const width = this.computeDistance(c.name) + this.widthConstant.checkBox.tagBlankTotal + this.widthConstant.checkBox.boxMargin
+              this.$set(c, 'width', width) // 总宽
-                this.$set(c, 'width', width) // 总宽
+            }
-              }
+          })
-            })
-          }
         })
       }
     },
@@ -273,22 +288,20 @@ export default {
       } else { // 全体重排
         this.contentWidth = contentWidth
         Object.keys(this.titleSearchListCopy).forEach(type => {
-          if (type !== 'ready') {
+          this.titleSearchListCopy[type].width = 0
-            this.titleSearchListCopy[type].width = 0
+          this.titleSearchListCopy[type].showMore = false
-            this.titleSearchListCopy[type].showMore = false
+          let showMore = false
-            let showMore = false
+          this.titleSearchListCopy[type].children.forEach((item, i) => {
-            this.titleSearchListCopy[type].children.forEach((item, i) => {
-              if (!showMore) {
-                this.titleSearchListCopy[type].width += item.width
-                if (this.titleSearchListCopy[type].width > this.contentWidth) {
-                  showMore = true
-                  this.titleSearchListCopy[type].index = i
-                }
-              }
-            })
             if (!showMore) {
-              this.titleSearchListCopy[type].index = this.titleSearchListCopy[type].children.length
+              this.titleSearchListCopy[type].width += item.width
+              if (this.titleSearchListCopy[type].width > this.contentWidth) {
+                showMore = true
+                this.titleSearchListCopy[type].index = i
+              }
             }
+          })
+          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) {