feat： asset详细视图基本功能实现

2021-10-13 18:24:09 +08:00
parent 3029a0db41
commit cfca72366c
35 changed files with 264 additions and 65 deletions
--- a/nezha-fronted/src/assets/css/font/iconfont.css
+++ b/nezha-fronted/src/assets/css/font/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
  font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('iconfont.woff2?t=1631239483571') format('woff2'),
-       url('iconfont.woff?t=1631239483571') format('woff'),
-       url('iconfont.ttf?t=1631239483571') format('truetype');
+  src: url('iconfont.woff2?t=1634120008778') format('woff2'),
+       url('iconfont.woff?t=1634120008778') format('woff'),
+       url('iconfont.ttf?t=1634120008778') format('truetype');
 }

 .nz-icon {
@@ -13,6 +13,22 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.nz-icon-guide1:before {
+  content: "\e744";
+}
+
+.nz-icon-wailian:before {
+  content: "\e745";
+}
+
+.nz-icon-liebiao:before {
+  content: "\e742";
+}
+
+.nz-icon-xiangxishitu:before {
+  content: "\e743";
+}
+
 .nz-icon-dingshishijian:before {
  content: "\e73f";
 }
@@ -109,10 +125,6 @@
  content: "\e63e";
 }

-.nz-icon-guide:before {
-  content: "\e669";
-}
-
 .nz-icon-more3:before {
  content: "\e725";
 }
--- a/nezha-fronted/src/assets/css/font/iconfont.ttf
+++ b/nezha-fronted/src/assets/css/font/iconfont.ttf
--- a/nezha-fronted/src/assets/css/font/iconfont.woff
+++ b/nezha-fronted/src/assets/css/font/iconfont.woff
--- a/nezha-fronted/src/assets/css/font/iconfont.woff2
+++ b/nezha-fronted/src/assets/css/font/iconfont.woff2
--- a/nezha-fronted/src/assets/css/nzIcon.css
+++ b/nezha-fronted/src/assets/css/nzIcon.css
@@ -1,8 +1,8 @@
@font-face {
  font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('./font/iconfont.woff2?t=1631239483571') format('woff2'),
-  url('./font/iconfont.woff?t=1631239483571') format('woff'),
-  url('./font/iconfont.ttf?t=1631239483571') format('truetype');
+  src: url('./font/iconfont.woff2?t=1634120008778') format('woff2'),
+  url('./font/iconfont.woff?t=1634120008778') format('woff'),
+  url('./font/iconfont.ttf?t=1634120008778') format('truetype');
 }

 .nz-icon {
@@ -13,6 +13,22 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.nz-icon-guide1:before {
+  content: "\e744";
+}
+
+.nz-icon-wailian:before {
+  content: "\e745";
+}
+
+.nz-icon-liebiao:before {
+  content: "\e742";
+}
+
+.nz-icon-xiangxishitu:before {
+  content: "\e743";
+}
+
 .nz-icon-dingshishijian:before {
  content: "\e73f";
 }
@@ -109,10 +125,6 @@
  content: "\e63e";
 }

-.nz-icon-guide:before {
-  content: "\e669";
-}
-
 .nz-icon-more3:before {
  content: "\e725";
 }
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
@@ -359,6 +359,9 @@ export default {
      if (state) {
        this.state = state
      }
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      this.$set(this.searchLabel, 'state', this.state)
--- a/nezha-fronted/src/components/common/bottomBox/tabs/assetSubTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/assetSubTab.vue
@@ -218,6 +218,9 @@ export default {
          this.$set(this.searchLabel, key, params[key])
        }
      }
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      this.$set(this.searchLabel, 'pids', this.obj.id)
--- a/nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue
@@ -218,6 +218,9 @@ export default {
          this.$set(this.searchLabel, key, params[key])
        }
      }
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      if (this.from === fromRoute.model) {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
@@ -125,6 +125,9 @@ export default {
          this.$set(this.searchLabel, key, params[key])
        }
      }
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      this.tools.loading = true
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTabNew.vue
@@ -112,6 +112,9 @@ export default {
  },
  methods: {
    getTableData () {
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      const params = {
        ...this.searchLabel,
        pageNo: this.pageObj.pageNo,
--- a/nezha-fronted/src/components/common/bottomBox/tabs/operationLogTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/operationLogTab.vue
@@ -120,6 +120,9 @@ export default {
          this.$set(this.searchLabel, key, params[key])
        }
      }
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      this.tools.loading = true
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogTab.vue
@@ -124,6 +124,9 @@ export default {
          this.$set(this.searchLabel, key, params[key])
        }
      }
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      this.tools.loading = true
--- a/nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue
+++ b/nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue
@@ -22,7 +22,7 @@
                <i class="nz-icon nz-icon-arrow-down search-value"/>
              </div>
              <el-dropdown-menu slot="dropdown" class="detail-top-search-dropdown">
-                <div><el-input size="small" v-model="searchStr" @input="(val)=>{searchStrChange(val,key)}"/></div>
+                <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" :title="item3.name">
                      <el-checkbox :label="item3.id">{{item3.name}}</el-checkbox>
@@ -51,10 +51,10 @@
                <i class="nz-icon nz-icon-arrow-down search-value"/>
              </div>
              <el-dropdown-menu slot="dropdown" class="detail-top-search-dropdown">
-                <div><el-input size="small" v-model="searchStr" @input="(val)=>{searchStrChange(val,key)}"/></div>
+                <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"> {{item3.name}}</span>
+                      <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">{{item4.name}}</el-checkbox>
                    </el-dropdown-item>
                 </el-checkbox-group>
@@ -109,8 +109,20 @@ export default {
  },
  methods: {
    searchStrChange (val, key) {
+      if (this.detailSearchListCopy[key].type === 'checkBox') {
        this.detailSearchListCopy[key].searchStr = val
        this.detailSearchListCopy[key].children = this.detailSearchListCopy[key].oldChildren.filter(children => children.name.indexOf(val) !== -1)
+      } else {
+        this.detailSearchListCopy[key].searchStr = val
+        const arr = []
+        this.detailSearchListCopy[key].oldChildren.forEach(item => {
+          const children = item.children.filter(children => children.name.indexOf(val) !== -1)
+          if (children && children.length) {
+            arr.push({ ...item, children: children })
+          }
+        })
+        this.detailSearchListCopy[key].children = arr
+      }
    },
    getSearchStr (oldChildren, label) {
      const arr = label.split('-')
@@ -179,6 +191,7 @@ export default {
    max-height: 300px;
    overflow-y: auto;
    .el-dropdown-menu__item{
+      background: #fff !important;
      padding: 0;
      max-width: 200px;
      overflow: hidden;
@@ -197,6 +210,22 @@ export default {
          white-space: nowrap;
        }
      }
+      .el-checkbox:hover{
+        color: #fa901c;
+        background-color: #fafafa !important;
+      }
+      .children-title-name{
+        width: calc(100% - 20px);
+        height: 36px;
+        padding-left: 20px;
+        font-size: 12px;
+        color: #909399;
+        line-height: 30px;
+      }
+    }
+    .el-dropdown-menu__item:not(.is-disabled):hover{
+      color: #606266;
+      background: #fff !important;
    }
  }
  .clear-all-select{
--- a/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
@@ -1,16 +1,21 @@
 <template>
  <div class="detail-left-box">
    <div class="order-box">
-      <el-select v-model="orderBy" placeholder="请选择">
+      <el-select v-model="orderBy" size="small" clearable placeholder="排序方式">
        <el-option
          v-for="item in tableTitle"
+          v-if="item.sortable==='custom'"
          :key="item.prop"
          :label="item.label"
          :value="item.prop">
        </el-option>
      </el-select>
+      <el-button @click="orderTypeChange" size="small" style="height: 32px;padding: 0 5px 0 5px">
+        <i class="nz-icon nz-icon-jiantou-top" v-if="orderType=='ascending'" />
+        <i class="nz-icon nz-icon-jiantou-down" v-if="orderType=='descending'" />
+      </el-button>
    </div>
-    <ul class="detail-row-box">
+    <ul class="detail-row-box" ref="dataTable">
      <li v-for="(item,index) in tableData" :key="index" class="detail-row" @click="detailViewRightShow(item)" :class="item.id === detailViewRightObj.id ? 'selected' : ''">
        <div class="detail-row-info">
          <div class="asset-manageIp" :title="item.name">
@@ -37,9 +42,6 @@ import detailViewLeftMixin from '@/components/common/mixin/detailViewLeftMixin'
 export default {
  name: 'assetDetail',
  mixins: [detailViewLeftMixin],
-  props: {
-    detailViewRightObj: {}
-  },
  data () {
    return {
      tableTitle: [
@@ -141,26 +143,7 @@ export default {
          show: false,
          minWidth: 120
        }
-      ],
-      orderBy: '',
-      orderType: 'ascending'
-    }
-  },
-  methods: {
-    detailViewRightShow (item) {
-      this.$emit('detailViewRightShow', item)
-    }
-  },
-  watch: {
-    orderBy: {
-      handler (n) {
-        this.$emit('orderDetail', n, this.orderType)
-      }
-    },
-    orderType: {
-      handler (n) {
-        this.$emit('orderDetail', this.orderBy, n)
-      }
+      ]
    }
  }
 }
@@ -168,9 +151,11 @@ export default {

 <style scoped lang="scss">
  .order-box{
+    display: flex;
    height:40px;
    padding: 0 15px;
-    line-height: 40px
+    line-height: 40px;
+    align-items: center;
  }
  .detail-row-box{
    height: calc(100% - 40px);
--- a/nezha-fronted/src/components/common/detailView/nzDetailView.vue
+++ b/nezha-fronted/src/components/common/detailView/nzDetailView.vue
@@ -20,7 +20,7 @@
              @command="changeDetailType">
              <button class="top-tool-btn table-column-setting"
                      type="button">
-                <i class="nz-icon nz-icon-guzhangshuju" />
+                <i class="nz-icon nz-icon-xiangxishitu" />
              </button>
              <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item :command="'list'" :class="detailType === 'list' ? 'active' : ''">列表</el-dropdown-item>
--- a/nezha-fronted/src/components/common/detailView/view/detailRightTop/detailRightTop.vue
+++ b/nezha-fronted/src/components/common/detailView/view/detailRightTop/detailRightTop.vue
@@ -2,25 +2,25 @@
  <div style="height: 100%">
    <div v-if="from === fromRoute.asset" class="detail-title-box">
      <div>
-        <span class="detail-title-key">Data center :</span> <span class="detail-title-value">{{obj.dc.name}}</span>
+        <span class="detail-title-key">Data center :</span> <span class="detail-title-value">{{obj.dc?obj.dc.name:'-'}}</span>
      </div>
      <div>
-        <span class="detail-title-key">Cabinet :</span> <span class="detail-title-value">{{obj.cabinet.name}}</span>
+        <span class="detail-title-key">Cabinet :</span> <span class="detail-title-value">{{obj.cabinet?obj.cabinet.name:'-'}}</span>
      </div>
      <div>
-        <span class="detail-title-key">Alert :</span> <span class="detail-title-value"><i :class="obj.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i> {{obj.alertNum}}</span>
+        <span class="detail-title-key">Alert :</span> <span class="detail-title-value"><i :class="obj.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i> {{obj.alertNum?obj.alertNum:'-'}}</span>
      </div>
      <div>
-        <span class="detail-title-key">Endpoint :</span> <span class="detail-title-value"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> {{obj.endpointNum}}</span>
+        <span class="detail-title-key">Endpoint :</span> <span class="detail-title-value"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> {{obj.endpointNum?obj.endpointNum:'-'}}</span>
      </div>
      <div>
-        <span class="detail-title-key">Brand :</span> <span class="detail-title-value">{{obj.brand.name}}</span>
+        <span class="detail-title-key">Brand :</span> <span class="detail-title-value">{{obj.brand?obj.brand.name:'-'}}</span>
      </div>
      <div>
-        <span class="detail-title-key">Brand :</span> <span class="detail-title-value">{{obj.model.name}}</span>
+        <span class="detail-title-key">Brand :</span> <span class="detail-title-value">{{obj.model?obj.model.name:'-'}}</span>
      </div>
      <div>
-        <span class="detail-title-key">SN :</span> <span class="detail-title-value">{{obj.sn}}</span>
+        <span class="detail-title-key">SN :</span> <span class="detail-title-value">{{obj.sn?obj.sn:'-'}}</span>
      </div>
    </div>
  </div>
--- a/nezha-fronted/src/components/common/labelFilter/dropdown.vue
+++ b/nezha-fronted/src/components/common/labelFilter/dropdown.vue
@@ -44,7 +44,9 @@ export default {
          n.forEach(item => {
            if (this.item.children.find(children => children.id == item)) {
              this.cascaderData.push([item])
+              setTimeout(() => {
                this.$emit('resize', [item])
+              })
            }
          })
        } else if (n && this.type === 'fields') {
@@ -52,8 +54,10 @@ export default {
          if (obj[this.item.id]) {
            obj[this.item.id].forEach(item => {
              this.cascaderData.push([item])
+              setTimeout(() => {
                this.$emit('resize', [item])
              })
+            })
          }
        }
      }
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/nezha-fronted/src/components/common/mixin/dataList.js
@@ -15,6 +15,7 @@ export default {
        pages: 1,
        total: 0
      },
+      orderBy: '',
      /* 工具参数 */
      tools: {
        loading: true, // 是否显示table加载动画
@@ -70,6 +71,11 @@ export default {
          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)
      this.tools.loading = true
@@ -89,6 +95,9 @@ export default {
              this.toTopBtnHandler(this.scrollbarWrap)
            })
          }
+          if (this.detailType === 'view') {
+            this.$refs.dataTable.$refs.dataTable.scrollTop = 0
+          }
        }
      })
    },
@@ -173,13 +182,10 @@ export default {
          this.$set(this.searchLabel, item, searchObj[item])
        }
      }
-      if (this.$refs.dataTable) {
-        this.$refs.dataTable.$refs.dataTable.bodyWrapper.scrollTop = 0
-      }
      this.getTableData()
    },
    tableDataSort (orderBy) {
-      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.orderBy = orderBy
      this.getTableData()
    },
    tableTitleReset (src, dist) {
--- a/nezha-fronted/src/components/common/mixin/detailViewLeftMixin.js
+++ b/nezha-fronted/src/components/common/mixin/detailViewLeftMixin.js
@@ -8,12 +8,62 @@ export default {
    },
    tableId: {
      type: String
-    }
+    },
+    detailViewRightObj: {},
+    orderByFa: {}
  },
  data () {
    return {
+      orderBy: '',
+      orderType: 'ascending',
+      renderFirst: ''
    }
  },
  methods: {
+    detailViewRightShow (item) {
+      this.$emit('detailViewRightShow', item)
+    },
+    orderTypeChange () {
+      if (this.orderType === 'ascending') {
+        this.orderType = 'descending'
+      } else {
+        this.orderType = 'ascending'
+      }
+    }
+  },
+  watch: {
+    orderByFa: {
+      immediate: true,
+      handler (n) {
+        console.log(n)
+        const index = n.indexOf('-')
+        this.renderFirst = false
+        if (index !== -1) {
+          this.orderBy = n.slice(index + 1)
+          this.orderType = 'descending'
+        } else {
+          this.orderBy = n
+          this.orderType = 'ascending'
+        }
+        setTimeout(() => {
+          this.renderFirst = true
+        })
+      }
+    },
+    orderBy: {
+      handler (n) {
+        console.log(n)
+        if (this.renderFirst) {
+          this.$emit('orderDetail', this.orderBy, this.orderType)
+        }
+      }
+    },
+    orderType: {
+      handler (n) {
+        if (this.renderFirst) {
+          this.$emit('orderDetail', this.orderBy, n)
+        }
+      }
+    }
  }
 }
--- a/nezha-fronted/src/components/common/mixin/detailViewMixin.js
+++ b/nezha-fronted/src/components/common/mixin/detailViewMixin.js
@@ -59,10 +59,30 @@ export default {
      setTimeout(() => {
        this.detailViewLoading = false
        this.$refs.clickSearch && this.$refs.clickSearch.needMore()
+        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({
+              ...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)
+          }
+        })
      }, 100)
    },
    detailViewRightShow (item) {
      this.detailViewRightObj = item
+    },
+    orderDetail (order, orderType) {
+      if (orderType === 'ascending') {
+        this.orderBy = order
+      } else {
+        this.orderBy = '-' + order
+      }
+      this.getTableData()
    }
  }
 }
--- a/nezha-fronted/src/components/common/mixin/table.js
+++ b/nezha-fronted/src/components/common/mixin/table.js
@@ -15,11 +15,13 @@ export default {
    },
    tableId: {
      type: String
-    }
+    },
+    orderByFa: {}
  },
  data () {
    return {
-      operationWidth: '165' // 操作列宽
+      operationWidth: '165', // 操作列宽
+      orderBy: {}
    }
  },
  methods: {
@@ -80,5 +82,20 @@ export default {
      }
      this.$emit('orderBy', orderBy)
    }
+  },
+  watch: {
+    orderByFa: {
+      immediate: true,
+      handler (n) {
+        if (n) {
+          const index = n.indexOf('-')
+          if (index !== -1) {
+            this.orderBy[n.slice(index + 1)] = 'descending'
+          } else {
+            this.orderBy[n] = 'descending'
+          }
+        }
+      }
+    }
  }
 }
--- a/nezha-fronted/src/components/common/table/asset/assetTable.vue
+++ b/nezha-fronted/src/components/common/table/asset/assetTable.vue
@@ -4,6 +4,7 @@
    ref="dataTable"
    :data="tableData"
    :height="height"
+    :default-sort="orderBy"
    border
    @header-dragend="dragend"
    @sort-change="tableDataSort"
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/nezha-fronted/src/components/common/table/nzDataList.vue
@@ -25,7 +25,7 @@
              @command="changeDetailType">
              <button class="top-tool-btn table-column-setting"
                      type="button">
-                <i class="nz-icon nz-icon-alert-list" />
+                <i class="nz-icon nz-icon-liebiao" />
              </button>
              <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item :command="'list'" :class="detailType === 'list' ? 'active' : ''">列表</el-dropdown-item>
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -595,6 +595,9 @@ export default {
      if (state) {
        this.state = state
      }
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      this.$set(this.searchLabel, 'state', this.state)
--- a/nezha-fronted/src/components/page/alert/alertRule.vue
+++ b/nezha-fronted/src/components/page/alert/alertRule.vue
@@ -176,6 +176,9 @@ export default {
      this.$refs.dataList.showBottomBox('alertRuleAlertMessage', alertRule)
    },
    getTableData () {
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      this.tools.loading = true
--- a/nezha-fronted/src/components/page/alert/alertSilence.vue
+++ b/nezha-fronted/src/components/page/alert/alertSilence.vue
@@ -154,6 +154,9 @@ export default {
          this.$set(this.searchLabel, key, params[key])
        }
      }
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      this.tools.loading = true
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -2,7 +2,7 @@
  <div>
    <nz-data-list
      v-loading="detailViewLoading"
-      v-show="detailType === 'list'"
+      v-if="detailType === 'list'"
      ref="dataList"
      :api="url"
      :custom-table-title.sync="tools.customTableTitle"
@@ -55,6 +55,7 @@
      <template v-slot:default="slotProps">
        <asset-table
          ref="dataTable"
+          :orderByFa="orderBy"
          v-loading="tools.loading"
          :api="url"
          :custom-table-title="tools.customTableTitle"
@@ -115,12 +116,14 @@
      <template v-slot:nz-detail-view-list>
        <asset-detail
          class="data-detail"
-          ref="dataDetail"
+          ref="dataTable"
+          :orderByFa="orderBy"
          v-loading="tools.loading"
          :detailViewRightObj="detailViewRightObj"
          :api="url"
          :table-data="tableData"
          @detailViewRightShow = 'detailViewRightShow'
+          @orderDetail="orderDetail"
        >
        </asset-detail>
      </template>
@@ -256,6 +259,7 @@ export default {
      tableId: 'assetTable', // 需要分页的table的id，用于记录每页数量
      searchMsg: { // 给搜索框子组件传递的信息
        searchLabelList: [{
+          id: 'ids',
          name: 'ID',
          type: 'input',
          label: 'ids',
@@ -264,21 +268,25 @@ export default {
          name: this.$t('overall.name'),
          type: 'input',
          label: 'name',
+          id: 'name',
          disabled: false
        }, {
          name: 'SN',
          type: 'input',
          label: 'sn',
+          id: 'sn',
          disabled: false
        }, {
          name: 'IP',
          type: 'input',
          label: 'manageIp',
+          id: 'manageIp',
          disabled: false
        }, {
          name: this.$t('asset.state'),
          type: 'assetState',
          label: 'stateIds',
+          id: 'stateIds',
          readonly: true,
          disabled: false
        }]
--- a/nezha-fronted/src/components/page/config/assetMeta.vue
+++ b/nezha-fronted/src/components/page/config/assetMeta.vue
@@ -177,6 +177,9 @@ export default {
      })
    },
    getTableData () {
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      this.tools.loading = true
--- a/nezha-fronted/src/components/page/config/assetState.vue
+++ b/nezha-fronted/src/components/page/config/assetState.vue
@@ -197,6 +197,9 @@ export default {
      })
    },
    getTableData () {
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      if (!this.scrollbarWrap) {
--- a/nezha-fronted/src/components/page/config/operationRecord.vue
+++ b/nezha-fronted/src/components/page/config/operationRecord.vue
@@ -113,6 +113,9 @@ export default {
      this.layout = []
    },
    getTableData () {
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      // 获取 userId 作为过滤条件传给后台
--- a/nezha-fronted/src/components/page/config/template/chartTemp.vue
+++ b/nezha-fronted/src/components/page/config/template/chartTemp.vue
@@ -208,6 +208,9 @@ export default {
          this.$set(this.searchLabel, key, params[key])
        }
      }
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      this.tools.loading = true
--- a/nezha-fronted/src/components/page/config/terminalLog.vue
+++ b/nezha-fronted/src/components/page/config/terminalLog.vue
@@ -103,6 +103,9 @@ export default {
  },
  methods: {
    getTableData () {
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      const params = {
        ...this.searchLabel,
        pageNo: this.pageObj.pageNo,
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -46,6 +46,7 @@
 <!--                type="button" @click="batchModify">-->
 <!--          <i class="nz-icon-batch-edit nz-icon"></i>-->
 <!--        </button>-->
+
      </template>
      <template v-slot:search>
        <click-search :select-value.sync="selectValue" :title-search-list="titleSearchList" @reload="reloadTable"></click-search>
@@ -443,6 +444,9 @@ export default {
      }
    },
    getTableData () {
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      const params = {
--- a/nezha-fronted/src/components/page/monitor/module/moduleList.vue
+++ b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
@@ -299,6 +299,9 @@ export default {
      this.edit(u, true)
    },
    getTableData () {
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      if (this.searchLabel.projectIds) {
--- a/nezha-fronted/src/components/page/monitor/project/projectList.vue
+++ b/nezha-fronted/src/components/page/monitor/project/projectList.vue
@@ -122,6 +122,9 @@ export default {
          this.$set(this.searchLabel, key, params[key])
        }
      }
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      this.tools.loading = true