From fe594d6066ce2059dc4c95b4c6a1a2cd29f02ad0 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 19 Jul 2021 16:34:24 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-819=20fix:=20=E4=BF=AE=E5=A4=8Dasset?=
 =?UTF-8?q?=E9=A1=B6=E9=83=A8=E8=BF=87=E6=BB=A4=E5=8A=A0=E8=BD=BD=E6=85=A2?=
 =?UTF-8?q?=E3=80=81=E6=8A=96=E5=8A=A8=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/package.json                    |   2 +-
 .../common/labelFilter/clickSearch.vue        | 141 +++++++++++-------
 .../src/components/page/asset/asset.vue       |  30 ++--
 .../page/monitor/endpoint/endpointList.vue    |  32 +++-
 4 files changed, 130 insertions(+), 75 deletions(-)

diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json
index 32caa6ba6..81214c7c9 100644
--- 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",
diff --git a/nezha-fronted/src/components/common/labelFilter/clickSearch.vue b/nezha-fronted/src/components/common/labelFilter/clickSearch.vue
index 8b9f2610a..05f3c9d49 100644
--- 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;
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 07f697a6d..110b47f7d 100644
--- 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()
diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index 40fe4a670..5b22eabba 100644
--- 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) {