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

2021-07-19 16:34:24 +08:00
parent 278b48391a
commit fe594d6066
4 changed files with 130 additions and 75 deletions
--- a/nezha-fronted/package.json
+++ b/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",
--- a/nezha-fronted/src/components/common/labelFilter/clickSearch.vue
+++ b/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 v-for="(data, type, index) in titleSearchListCopy" v-cloak v-if="data.show" :key="index" ref="searchContentBox" class="search-content-box">
+  <div :style="{'height': height + 'px'}" class="search-box__container">
+    <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]">
-        <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>
+      <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>
-      </el-checkbox-group>
-      <template v-for="(item, j) in data.children" v-else-if="data.type === 'dropdownCheckBox'">
-        <dropdown
-          v-show="j < data.index || data.showMore"
-          :key="j"
-          :ref="`${type}_${item.id}_cascader`"
-          :collapse-tags="true"
-          :item="item"
-          @blur="casFocus"
-          @change="(value) => casChange(value, type, item, data.key)"
-          @focus="casFocus"
-        ></dropdown>
-      </template>
-      <span v-show="contentWidth < data.width"
-            :style="{top: `${moreBtnTop(data.type)}px`}"
-            class="search-more"
-            @click="changShowMore(type)">
+      </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`"
+            :collapse-tags="true"
+            :item="item"
+            @blur="casFocus"
+            @change="(value) => casChange(value, type, item, data.key)"
+            @focus="casFocus"
+          ></dropdown>
+        </template>
+        <span v-show="contentWidth < data.width"
+              :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) {
-          this.titleSearchListCopy = JSON.parse(JSON.stringify(n))
-          this.$nextTick(() => {
-            this.setEachCascWidth()
-            this.needMore()
-          })
-        }
+        console.info(n)
+        this.titleSearchListCopy = JSON.parse(JSON.stringify(n))
+        this.$nextTick(() => {
+          this.setEachCascWidth()
+          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 => {
-              if (this.titleSearchListCopy[type].type === 'dropdownCheckBox') {
-                const labelWidth = this.computeDistance(c.name + ':') + this.widthConstant.dropdownCheckBox.labelPadding // cascader-label总宽度
-                const width = labelWidth + this.widthConstant.dropdownCheckBox.inputOriginalWidth + this.widthConstant.dropdownCheckBox.boxMargin
-                this.$set(c, 'width', width) // 总宽
-                this.$set(c, 'originalWidth', width) // 初始总宽
-                this.$set(c, 'labelWidth', labelWidth) // label区域宽
-                this.$set(c, 'inputWidth', this.widthConstant.dropdownCheckBox.inputOriginalWidth) // 内容区域宽
-              } else if (this.titleSearchListCopy[type].type === 'checkBox') {
-                const width = this.computeDistance(c.name) + this.widthConstant.checkBox.tagBlankTotal + this.widthConstant.checkBox.boxMargin
-                this.$set(c, 'width', width) // 总宽
-              }
-            })
-          }
+          this.titleSearchListCopy[type].children.forEach(c => {
+            if (this.titleSearchListCopy[type].type === 'dropdownCheckBox') {
+              const labelWidth = this.computeDistance(c.name + ':') + this.widthConstant.dropdownCheckBox.labelPadding // cascader-label总宽度
+              const width = labelWidth + this.widthConstant.dropdownCheckBox.inputOriginalWidth + this.widthConstant.dropdownCheckBox.boxMargin
+              this.$set(c, 'width', width) // 总宽
+              this.$set(c, 'originalWidth', width) // 初始总宽
+              this.$set(c, 'labelWidth', labelWidth) // label区域宽
+              this.$set(c, 'inputWidth', this.widthConstant.dropdownCheckBox.inputOriginalWidth) // 内容区域宽
+            } else if (this.titleSearchListCopy[type].type === 'checkBox') {
+              const width = this.computeDistance(c.name) + this.widthConstant.checkBox.tagBlankTotal + this.widthConstant.checkBox.boxMargin
+              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].showMore = false
-            let showMore = false
-            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
-                }
-              }
-            })
+          this.titleSearchListCopy[type].width = 0
+          this.titleSearchListCopy[type].showMore = false
+          let showMore = false
+          this.titleSearchListCopy[type].children.forEach((item, 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;
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/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.titleSearchList.model.children = res[0]
-      this.titleSearchList.type.children = res[1]
-      this.titleSearchList.dc.children = res[2]
-      this.titleSearchList.assetLabel.children = res[3]
-      this.titleSearchList.ready = true
+    this.getModelData().then(res => {
+      this.titleSearchList.model.children = res
+      this.titleSearchList.model.show = true
+    })
+    this.getTypeData().then(res => {
+      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()
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/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) {