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,14 +1,20 @@
 <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-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;
--- 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) {