fix：样式调整

2021-10-15 15:59:46 +08:00
parent 07c8acf92f
commit f635c87740
6 changed files with 195 additions and 65 deletions
--- 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 = []
--- 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
--- 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;
--- 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;
  }
--- 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)
    },
--- 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()