From f635c877409075b23b5e14eddcf6bbde21b152ca Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 15 Oct 2021 15:59:46 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=20=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/bottomBox/tabs/logBottomTab.vue    |   2 +-
 .../common/detailView/detailViewTopSearch.vue |  40 ++++-
 .../detailView/view/detailViewRight.vue       |  13 +-
 .../common/labelFilter/clickSearch.vue        |  31 +++-
 .../common/mixin/detailViewMixin.js           |  18 +-
 .../src/components/page/asset/asset.vue       | 156 +++++++++++++-----
 6 files changed, 195 insertions(+), 65 deletions(-)

diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
index e4ebc6004..abfe66f8e 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
@@ -97,7 +97,7 @@ export default {
         reader.readAsText(error.response.data)
       })
     },
-    queryLogData (limit = 1000) { // log的chart和table是一个请求
+    queryLogData (limit = 100) { // log的chart和table是一个请求
       this.loading = true
       if (this.expressions.length > 0) {
         const requestArr = []
diff --git a/nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue b/nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue
index e2dfbd793..bb21b8645 100644
--- a/nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue
+++ b/nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue
@@ -31,7 +31,7 @@
               </el-dropdown-menu>
             </el-dropdown>
           </span>
-      <span v-else-if="item.type === 'dropdownCheckBox'">
+      <span v-else-if="item.type === 'dropdownCheckBox'&& key !== 'assetLabel'">
             <el-dropdown
               class="detail-dropdown"
               type="primary"
@@ -61,6 +61,36 @@
               </el-dropdown-menu>
             </el-dropdown>
           </span>
+      <span v-else-if="item.type === 'dropdownCheckBox'&& key === 'assetLabel'">
+            <el-dropdown
+              class="detail-dropdown"
+              type="primary"
+              :trigger="'click'"
+              :hide-on-click="false"
+              @visible-change="searchStr = detailSearchListCopy[key].searchStr"
+            >
+              <div>
+                <div class="detail-top-search" v-if="selectValue[item.key].length">
+                   <span v-for="(item2,index2) in selectValue[item.key]" :key="item2" class="search-value">
+                  {{getSearchStr(item.oldChildren,item2,key)}}<span v-if="index2+1 !== selectValue[item.key].length">,</span>
+                </span>
+                </div>
+                <div class="detail-top-search" style="text-align: center" v-else>
+                  All
+                </div>
+                <i class="nz-icon nz-icon-arrow-down search-value"/>
+              </div>
+              <el-dropdown-menu slot="dropdown" class="detail-top-search-dropdown">
+                <div style="text-align: center;"><el-input style="width: calc(100% - 40px)" size="small" v-model="searchStr" @input="(val)=>{searchStrChange(val,key)}"  suffix-icon="el-icon-search"/></div>
+                 <el-checkbox-group v-model="selectValue[item.key]">
+                    <el-dropdown-item v-for="(item3,index3) in item.children" :key="index3" >
+                      <span :title="item3.name" class="children-title-name"> {{item3.name}}</span>
+                      <el-checkbox :label="item3.id+'-'+item4.id" :key="index4"  v-for="(item4,index4) in item3.children" :title="item4.name">{{item4.name}}</el-checkbox>
+                    </el-dropdown-item>
+                 </el-checkbox-group>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </span>
     </div>
   </div>
 </template>
@@ -124,11 +154,15 @@ export default {
         this.detailSearchListCopy[key].children = arr
       }
     },
-    getSearchStr (oldChildren, label) {
+    getSearchStr (oldChildren, label, key) {
       const arr = label.split('-')
       const obj = oldChildren.find(item => item.id == arr[0])
       const children = obj.children.find(item => item.id == arr[1])
-      return obj.name + '/' + children.name
+      if (key !== 'assetLabel') {
+        return obj.name + '/' + children.name
+      } else {
+        return children.name
+      }
     },
     showDropDown (val, key) {
       this.searchStr = this.detailSearchListCopy[key].searchStr
diff --git a/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue b/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
index bc7aff73f..11286b002 100644
--- a/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
+++ b/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="sub-box">
-      <div class="detail-view-right-top">
-        <detail-right-top :obj="obj" :from="from"></detail-right-top>
-      </div>
+<!--      <div class="detail-view-right-top">-->
+<!--        <detail-right-top :obj="obj" :from="from"></detail-right-top>-->
+<!--      </div>-->
       <div class="sub-list__tabs">
       <!--机柜-->
       <cabinet-tab :showTitle="false" v-if="from === fromRoute.dc && targetTab === 'cabinet'" :tabs="tabs.dc.cabinet" v-show="subResizeShow" :obj="obj" @changeTab="changeTab"></cabinet-tab>
@@ -306,7 +306,8 @@ export default {
   .sub-list__tabs {
     flex: 1;
     background-color: white;
-    height: calc(100% - 82px);
+    /*height: calc(100% - 82px);*/
+    height: calc(100% - 12px);
     border: 1px solid #E7EAED;
     &>div {
       height: 100%;
@@ -322,9 +323,11 @@ export default {
       }
     }
   }
-  /deep/ .sub-container{
+  /deep/ .bottom-data-list .sub-container{
     height: calc(100% - 45px);
     position: relative;
+    padding: 0;
+    background-color: #fff;
   }
   .sub-box /deep/ .top-tools.top-tools--sub{
     border: none;
diff --git a/nezha-fronted/src/components/common/labelFilter/clickSearch.vue b/nezha-fronted/src/components/common/labelFilter/clickSearch.vue
index bdef24de8..3ec6fbea8 100644
--- a/nezha-fronted/src/components/common/labelFilter/clickSearch.vue
+++ b/nezha-fronted/src/components/common/labelFilter/clickSearch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{'height': height + 'px'}" class="search-box__container">
+  <div :style="{'min-height': height + 'px',height:getHeight + 'px'}" class="search-box__container">
     <div v-for="(data, type, index) in titleSearchListCopy" v-cloak :key="index" ref="searchContentBox" :class="{'search-content-box-height': data.length == 0}" class="search-content-box">
       <div class="search-title">{{data.label}}:</div>
       <el-skeleton v-if="data.type === 'checkBox'" :class="skeletonClass(data)" :loading="!data.show" :rows="1" class="search-items">
@@ -114,8 +114,8 @@ export default {
     },
     height () {
       const paddingHeight = 30
-      const checkBoxRowHeight = 31
-      const labelRowHeight = 38
+      const checkBoxRowHeight = 32
+      const labelRowHeight = 39
       let checkBoxRowCount = 0
       let labelRowCount = 0
       Object.keys(this.titleSearchListCopy).forEach(type => {
@@ -126,6 +126,18 @@ export default {
         }
       })
       return paddingHeight + checkBoxRowHeight * checkBoxRowCount + labelRowHeight * labelRowCount + 2
+    },
+    getHeight () {
+      if (this.changeMoreNum) {
+        let height = 2
+        this.$refs.searchContentBox.forEach(item => {
+          console.log(item.offsetHeight)
+          height += item.offsetHeight
+        })
+        return height
+      } else {
+        return 0
+      }
     }
   },
   watch: {
@@ -177,7 +189,8 @@ export default {
           moreNumberWidth: 42, // 选中选项时右侧的+1、+2...数字提示内容的宽度
           arrowDownWidth: 30 // 输入框右端箭头区域的宽度
         }
-      }
+      },
+      changeMoreNum: 0
     }
   },
   mounted () {
@@ -339,7 +352,11 @@ export default {
       return width
     },
     changShowMore (type) {
+      // this.changeMoreNum = 0
       this.titleSearchListCopy[type].showMore = !this.titleSearchListCopy[type].showMore
+      // this.$nextTick(() => {
+      //   this.changeMoreNum++
+      // })
     }
   },
   destroyed () {
@@ -357,6 +374,8 @@ export default {
   transform: rotate(180deg);
 }
 .nz-label-search {
+  line-height: 40px;
+  margin: 6px 0;
   .el-input__inner {
     width: 60px;
   }
@@ -394,14 +413,12 @@ export default {
 }
 .search-content-box,.search-content-box-height {
   border-bottom: 1px solid $--primary-border-color;
-  flex: 1;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   position: relative;
   padding: 0px 80px 0px 0px;
   box-sizing: border-box;
-  height: 100%;
   /*line-height: 40px;*/
 
   /deep/ .el-checkbox__label {
@@ -420,7 +437,7 @@ export default {
   flex: 1;
   flex-wrap: wrap;
   box-sizing: border-box;
-  line-height: 40px;
+  margin-left: 15px;
   &.search-items--checkbox .el-skeleton {
     height: 21px;
   }
diff --git a/nezha-fronted/src/components/common/mixin/detailViewMixin.js b/nezha-fronted/src/components/common/mixin/detailViewMixin.js
index deac45d8a..e53d62079 100644
--- a/nezha-fronted/src/components/common/mixin/detailViewMixin.js
+++ b/nezha-fronted/src/components/common/mixin/detailViewMixin.js
@@ -16,10 +16,15 @@ export default {
       if (this.detailType === flag) {
         return
       }
+      if (this.$refs.dataList) {
+        this.$refs.dataList.bottomBox.showSubList = false
+      }
       this.detailType = flag
+      let dataList = ''
       localStorage.setItem('detail-view-' + this.tableId, this.detailType)
       if (this.detailType === 'view') {
         // modelIdsDetail
+        dataList = 'detailList'
         this.selectValue.modelIdsDetail = []
         this.selectValue.modelIds.forEach(modelId => {
           this.titleSearchList.model.children.forEach(model => {
@@ -39,6 +44,7 @@ export default {
           })
         }
       } else {
+        dataList = 'dataList'
         const obj = {}
         this.selectValue.modelIds = this.selectValue.modelIdsDetail.map(item => item.split('-')[1])
         this.selectValue.fieldsDetail.forEach(item => {
@@ -58,19 +64,19 @@ export default {
       setTimeout(() => {
         this.detailViewLoading = false
         this.$refs.clickSearch && this.$refs.clickSearch.needMore()
-        this.$refs.dataList.$refs.searchInput.sreach_num = 0
+        this.$refs[dataList].$refs.searchInput.sreach_num = 0
         this.searchMsg.searchLabelList.forEach(searchLabel => {
           if (this.searchLabel[searchLabel.label]) {
             console.log(searchLabel.label, this.searchLabel[searchLabel.label])
-            this.$refs.dataList.$refs.searchInput.select_list.push({
+            this.$refs[dataList].$refs.searchInput.select_list.push({
               ...searchLabel,
               val: this.searchLabel[searchLabel.label]
             })
-            this.$refs.dataList.$refs.searchInput.sreach_num++
-            this.$refs.dataList.$refs.searchInput.searchLabelList = this.$refs.dataList.$refs.searchInput.searchLabelList.filter(item => searchLabel.label !== item.label)
+            this.$refs[dataList].$refs.searchInput.sreach_num++
+            this.$refs[dataList].$refs.searchInput.searchLabelList = this.$refs.dataList.$refs.searchInput.searchLabelList.filter(item => searchLabel.label !== item.label)
           }
         })
-        if (this.orderBy &&  this.$refs.dataTable.$refs.dataTable) {
+        if (this.orderBy && this.$refs.dataTable.$refs.dataTable) {
           const index = this.orderBy.indexOf('-')
           let orderBy = ''
           let orderType = ''
@@ -82,7 +88,7 @@ export default {
             orderBy = this.orderBy
             orderType = 'ascending'
           }
-          this.$refs.dataTable.$refs.dataTable.sort(orderBy, orderType)
+          // this.$refs.dataTable.$refs.dataTable.sort(orderBy, orderType)
         }
       }, 100)
     },
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index e80de69d7..59c57a5dc 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -80,7 +80,7 @@
       v-loading="detailViewLoading || tools.loading"
       v-if="detailType !== 'list'"
       :api="url"
-      ref="dataList"
+      ref="detailList"
       :layout="dataListLayout"
       :from="fromRoute.asset"
       :search-msg="searchMsg"
@@ -589,25 +589,25 @@ export default {
         })
       })
     },
-    getModelData () {
+    getModelData (data) {
       return new Promise(resolve => {
-        this.$get('asset/model?pageSize=-1').then(response => {
-          if (response.code === 200) {
-            this.modelData = response.data.list
-            const titleSearchData = {}
-            this.modelData.forEach(m => {
-              m.value = []
-              if (titleSearchData[m.brand.name]) {
-                titleSearchData[m.brand.name].children.push(m)
-              } else {
-                titleSearchData[m.brand.name] = { ...m.brand, children: [m] }
-              }
-            })
-            resolve(Object.keys(titleSearchData).map(b => titleSearchData[b]))
-            // this.titleSearchList.model.children = Object.keys(titleSearchData).map(b => titleSearchData[b])
-          }
-          resolve()
-        })
+        // this.$get('asset/model?pageSize=-1').then(response => {
+        if (data) {
+          this.modelData = data
+          const titleSearchData = {}
+          this.modelData.forEach(m => {
+            m.value = []
+            if (titleSearchData[m.brand.name]) {
+              titleSearchData[m.brand.name].children.push(m)
+            } else {
+              titleSearchData[m.brand.name] = { ...m.brand, children: [m] }
+            }
+          })
+          resolve(Object.keys(titleSearchData).map(b => titleSearchData[b]))
+          // this.titleSearchList.model.children = Object.keys(titleSearchData).map(b => titleSearchData[b])
+        }
+        resolve()
+        // })
       })
     },
     showEndpoint (asset) {
@@ -636,34 +636,104 @@ export default {
           return this.userData[item].username
         }
       }
+    },
+    getTableData (params) {
+      if (params && Object.keys(params).length > 0) {
+        for (const key in params) {
+          this.$set(this.searchLabel, key, params[key])
+        }
+      }
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      } else {
+        delete this.searchLabel.orderBy
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      if (this.$route.path === '/asset' && !this.titleSearchList.model.children.length) {
+        this.$set(this.searchLabel, 'statistics', 1)
+      } else {
+        delete this.searchLabel.statistics
+      }
+      this.tools.loading = true
+      this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          console.log(response)
+          if (response.statistics && this.$route.path === '/asset') {
+            this.setSearchData(response.statistics)
+          }
+          for (let i = 0; i < response.data.list.length; i++) {
+            response.data.list[i].status = response.data.list[i].status + ''
+          }
+          this.tableData = response.data.list
+          this.detailViewRightObj = this.tableData[0]
+          this.pageObj.total = response.data.total
+          this.pageObj.pages = response.data.pages
+          if (!this.scrollbarWrap && this.$refs.dataTable.$refs.dataTable) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+          if (this.detailType === 'view') {
+            this.$refs.dataDetail.$refs.dataTable.scrollTop = 0
+          }
+        }
+      })
+    },
+    setSearchData (statistics) {
+      Object.keys(this.titleSearchList).forEach(key => {
+        const keys = key === 'assetLabel' ? 'meta' : key
+        if (key === 'assetLabel') {
+          this.getSearchableMetaData(statistics[keys]).then(res => {
+            this.titleSearchList.assetLabel.children = res
+            this.detailSearchList.assetLabel.children = res
+            this.titleSearchList.assetLabel.show = true
+            this.detailSearchList.assetLabel.show = true
+          })
+        } else if (key === 'model') {
+          this.getModelData(statistics[keys]).then(res => {
+            this.titleSearchList.model.children = res
+            this.detailSearchList.model.children = res
+            this.titleSearchList.model.show = true
+            this.detailSearchList.model.show = true
+          })
+        } else {
+          this.titleSearchList[key].children = statistics[keys]
+          this.detailSearchList[key].children = statistics[keys]
+        }
+        this.titleSearchList[key].show = true
+        this.detailSearchList[key].show = true
+      })
     }
   },
   mounted () {
     // 初始化数据
-    this.getModelData().then(res => {
-      this.titleSearchList.model.children = res
-      this.detailSearchList.model.children = res
-      this.titleSearchList.model.show = true
-      this.detailSearchList.model.show = true
-    })
-    this.getTypeData().then(res => {
-      this.titleSearchList.type.children = res
-      this.detailSearchList.type.children = res
-      this.titleSearchList.type.show = true
-      this.detailSearchList.type.show = true
-    })
-    this.getDcData().then(res => {
-      this.titleSearchList.dc.children = res
-      this.detailSearchList.dc.children = res
-      this.titleSearchList.dc.show = true
-      this.detailSearchList.dc.show = true
-    })
-    this.getSearchableMetaData().then(res => {
-      this.titleSearchList.assetLabel.children = res
-      this.detailSearchList.assetLabel.children = res
-      this.titleSearchList.assetLabel.show = true
-      this.detailSearchList.assetLabel.show = true
-    })
+    // this.getModelData().then(res => {
+    //   this.titleSearchList.model.children = res
+    //   this.detailSearchList.model.children = res
+    //   this.titleSearchList.model.show = true
+    //   this.detailSearchList.model.show = true
+    // })
+    // this.getTypeData().then(res => {
+    //   this.titleSearchList.type.children = res
+    //   this.detailSearchList.type.children = res
+    //   this.titleSearchList.type.show = true
+    //   this.detailSearchList.type.show = true
+    // })
+    // this.getDcData().then(res => {
+    //   this.titleSearchList.dc.children = res
+    //   this.detailSearchList.dc.children = res
+    //   this.titleSearchList.dc.show = true
+    //   this.detailSearchList.dc.show = true
+    // })
+    // this.getSearchableMetaData().then(res => {
+    //   this.titleSearchList.assetLabel.children = res
+    //   this.detailSearchList.assetLabel.children = res
+    //   this.titleSearchList.assetLabel.show = true
+    //   this.detailSearchList.assetLabel.show = true
+    // })
     this.getStateData()
     this.getTypeTreeData()
     this.getSnmpCredentialData()