NEZ-597 perf: 列表页面排序细分设置

nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue

@@ -56,7 +56,7 @@ export default {
   },
   data () {
     return {
-      url: '/cabinet',
+      url: 'dc/cabinet',
       tableId: 'cabinetTable',
       blankObject: {
         id: '',
@@ -92,6 +92,9 @@ export default {
       }
     }
   },
+  created() {
+    console.log(this.$route);
+  },
   methods: {
     // 切换tab
     changeTab (tab) {

nezha-fronted/src/components/common/language/en.js

@@ -722,8 +722,8 @@ const en = {
       model: 'Asset model',
       brand: 'Brand',
       name: 'Name',
-      ChartTemplate: 'ChartTemplate',
+      ChartTemplate: 'Chart template',
-      assetNum: 'AssetNum',
+      assetNum: 'Asset',
       editModel: 'Edit model',
       createModel: 'New model',
       remark: 'Description',

nezha-fronted/src/components/common/mixin/table.js

@@ -64,6 +64,7 @@ export default {
       this.$emit('showBottomBox', targetTab, JSON.parse(JSON.stringify(row)))
     },
     tableDataSort (item) {
+      console.log(item)
       let orderBy = ''
       if (item.order === 'ascending') {
         orderBy = item.prop
@@ -71,6 +72,7 @@ export default {
       if (item.order === 'descending') {
         orderBy = '-' + item.prop
       }
+      console.log(orderBy)
       this.$emit('orderBy', orderBy)
     }
   }

nezha-fronted/src/components/common/table/alert/alertMessageTable.vue

@@ -31,7 +31,7 @@
         :prop="item.prop"
         :resizable="true"
         :sort-orders="['ascending', 'descending']"
-        :sortable="$tableSet.sortableShow(item.prop,'alertMessage')"
+        :sortable="item.sortable"
         :width="`${item.width}`"
       >
         <template slot-scope="scope" :column="item">
@@ -166,23 +166,28 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('alert.alertName'),
           prop: 'alertRule',
           show: true,
-          width: 180
+          width: 180,
+          sortable:false,
+          sortable:'custom'
         }, {
           label: this.$t('alert.list.labels'),
           prop: 'labels',
           show: true,
           NotSet: true,
-          minWidth: 250
+          minWidth: 250,
+          sortable:'custom'
         }, {
           label: this.$t('alert.severity'),
           prop: 'severity',
           show: true,
-          width: 110
+          width: 110,
+          sortable:'custom'
         }, {
           label: this.$t('alert.summary'),
           prop: 'summary',
@@ -207,7 +212,8 @@ export default {
           label: this.$t('alert.startAt'),
           prop: 'startAt',
           show: true,
-          width: 150
+          width: 150,
+          sortable:'custom'
         }, {
           label: this.$t('config.terminallog.duration'),
           prop: 'duration',

nezha-fronted/src/components/common/table/alert/alertRuleTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -83,11 +84,13 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('alert.alertName'),
           prop: 'name',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('alert.config.expr'),
           prop: 'expr',
@@ -107,7 +110,8 @@ export default {
         }, {
           label: this.$t('alert.severity'),
           prop: 'severity',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('alert.summary'),
           prop: 'summary',
@@ -120,7 +124,8 @@ export default {
           label: this.$t('alert.message'),
           prop: 'alertNum',
           show: true,
-          width: 90
+          width: 90,
+          sortable:'custom'
         }, {
           label: this.$t('alert.config.receiver'),
           prop: 'receivers',

nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -102,16 +103,19 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: 'matchers',
           prop: 'matchers',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: 'Start time',
           prop: 'startAt',
           show: true,
-          width: 300
+          width: 300,
+          sortable:'custom'
         }, {
           label: this.$t('config.terminallog.duration'),
           prop: 'duration',

nezha-fronted/src/components/common/table/asset/assetMetaTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -93,20 +94,24 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('config.assetLabel.name'),
           prop: 'name',
           show: true,
-          width: 100
+          width: 100,
+          sortable:'custom'
         }, {
           label: this.$t('config.assetLabel.key'),
           prop: 'metaKey',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.assetLabel.group'),
           prop: 'group',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.assetLabel.search'),
           prop: 'search',

nezha-fronted/src/components/common/table/asset/assetTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -92,16 +93,19 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 110
+          width: 110,
+          sortable:'custom'
         }, {
           label: this.$t('overall.name'),
           prop: 'name',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('asset.manageIp'),
           prop: 'manageIp',
           show: true,
-          width: 120
+          width: 120,
+          sortable:'custom'
         }, {
           label: this.$t('overall.parent'),
           prop: 'parent',
@@ -111,42 +115,50 @@ export default {
           label: this.$t('overall.type'),
           prop: 'type',
           show: true,
-          width: 140
+          width: 140,
+          sortable:'custom'
         }, {
           label: this.$t('asset.state'),
           prop: 'state',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('overall.dc'),
           prop: 'dc',
           show: true,
-          width: 110
+          width: 110,
+          sortable:'custom'
         }, {
           label: this.$t('asset.cabinet'),
           prop: 'cabinet',
           show: true,
-          width: 110
+          width: 110,
+          sortable:'custom'
         }, {
           label: this.$t('asset.alertNum'),
           prop: 'alertNum',
           show: true,
-          width: 140
+          width: 140,
+          sortable:'custom'
         }, {
           label: this.$t('asset.endpointNum2'),
           prop: 'endpointNum',
           show: true,
-          width: 140
+          width: 140,
+          sortable:'custom'
         }, {
           label: this.$t('asset.brand'),
           prop: 'brand',
           show: true,
-          width: 120
+          width: 120,
+          sortable:'custom'
         }, {
           label: this.$t('asset.model'),
           prop: 'model',
           show: true,
-          width: 110
+          width: 110,
+          sortable:'custom'
         }, {
           label: 'SN',
           prop: 'sn',

nezha-fronted/src/components/common/table/settings/agentTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -84,11 +85,13 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('config.agent.name'),
           prop: 'dc',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: 'Host',
           prop: 'host',
@@ -100,11 +103,13 @@ export default {
         }, {
           label: this.$t('config.agent.type'),
           prop: 'type',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('asset.state'),
           prop: 'status',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.agent.checkTime'),
           prop: 'checkTime',

nezha-fronted/src/components/common/table/settings/assetTypeTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
     >
       <template slot="header">
@@ -97,12 +98,14 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('config.assetType.name'),
           prop: 'name',
           show: true,
-          width: 120
+          width: 120,
+          sortable:'custom'
         }, {
           label: this.$t('config.assetType.vm'),
           prop: 'vm',

nezha-fronted/src/components/common/table/settings/chartTmplTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -75,19 +76,23 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('config.exprTemp.name'),
           prop: 'name',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.exprTemp.type'),
           prop: 'type',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.exprTemp.varType'),
           prop: 'varType',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.exprTemp.remark'),
           prop: 'remark',

nezha-fronted/src/components/common/table/settings/credentialsTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -96,15 +97,18 @@ export default {
         label: 'ID',
         prop: 'id',
         show: true,
-        width: 80
+        width: 80,
+        sortable:'custom'
       }, {
         label: this.$t('overall.name'),
         prop: 'name',
-        show: true
+        show: true,
+        sortable:'custom'
       }, {
         label: this.$t('config.mib.credential.type'),
         prop: 'type',
-        show: true
+        show: true,
+        sortable:'custom'
       }, {
         label: this.$t('config.mib.credential.port'),
         prop: 'port',

nezha-fronted/src/components/common/table/settings/dcTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -116,11 +117,13 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('overall.name'),
           prop: 'name',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('asset.location'),
           prop: 'location',
@@ -128,11 +131,13 @@ export default {
         }, {
           label: this.$t('config.dc.cabinetNum'),
           prop: 'cabinetNum',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.dc.assets'),
           prop: 'assetNum',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.dc.alert'),
           prop: 'alertNum',
@@ -156,7 +161,8 @@ export default {
         }, {
           label: this.$t('config.dc.state'),
           prop: 'state',
-          show: true
+          show: true,
+          sortable:'custom'
         }
       ]
     }

nezha-fronted/src/components/common/table/settings/endpointTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -120,11 +121,13 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('project.endpoint.name'),
           prop: 'name',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('project.module.type'),
           prop: 'type',
@@ -132,12 +135,14 @@ export default {
         }, {
           label: this.$t('project.project.project'),
           prop: 'project',
-          show: true
+          show: true,
+          sortable:'custom'
         },
         {
           label: this.$t('project.endpoint.asset'),
           prop: 'asset',
-          show: true
+          show: true,
+          sortable:'custom'
         },
         {
           label: this.$t('project.module.module'),
@@ -152,12 +157,14 @@ export default {
         {
           label: this.$t('project.endpoint.alerts'),
           prop: 'alerts',
-          show: true
+          show: true,
+          sortable:'custom'
         },
         {
           label: this.$t('project.endpoint.state'),
           prop: 'state',
-          show: true
+          show: true,
+          sortable:'custom'
         }
       ]
     }

nezha-fronted/src/components/common/table/settings/exprTmplTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -70,15 +71,18 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('config.exprTemp.name'),
           prop: 'name',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.exprTemp.gname'),
           prop: 'gname',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.exprTemp.expression'),
           prop: 'expression',

nezha-fronted/src/components/common/table/settings/mibTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -104,11 +105,13 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('overall.name'),
           prop: 'name',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.mib.fileName'),
           prop: 'fileName',

nezha-fronted/src/components/common/table/settings/modelTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
     >
       <template slot="header">
@@ -44,6 +45,12 @@
              {{scope.row.brand.name}}
          </template>
         <span v-else-if="item.prop === 'createTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
+        <template v-else-if="item.prop === 'assetNum'">
+          <span class="endpoint-num"  @click="showBottomBox('asset', scope.row)">
+             <i class="nz-icon nz-icon-overview-project monitorColor" :class="scope.row[item.prop]>0?'color23BF9A':'color23BF9A'"/>
+          {{scope.row[item.prop]}}
+          </span>
+        </template>
         <span v-else>{{scope.row[item.prop]}}</span>
       </template>
     </el-table-column>
@@ -80,17 +87,20 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('config.model.name'),
           prop: 'name',
           show: true,
-          width: 160
+          width: 160,
+          sortable:'custom'
         }, {
           label: this.$t('config.model.brand'),
           prop: 'brand',
           show: true,
           width: 160
+          ,sortable:'custom'
         }, {
           label: this.$t('config.model.remark'),
           prop: 'remark',
@@ -99,7 +109,8 @@ export default {
           label: this.$t('config.model.assetNum'),
           prop: 'assetNum',
           show: true,
-          width: 200
+          width: 200,
+          sortable:'custom'
         }
       ]
     }

nezha-fronted/src/components/common/table/settings/moduleTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -90,12 +91,14 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('project.module.moduleName'),
           prop: 'name',
           show: true,
-          minWidth: 200
+          minWidth: 200,
+          sortable:'custom'
         }, {
           label: this.$t('project.module.type'),
           prop: 'type',
@@ -105,18 +108,21 @@ export default {
           label: this.$t('project.project.project'),
           prop: 'project',
           show: true,
-          width: 150
+          width: 150,
+          sortable:'custom'
         },
         {
           label: this.$t('project.endpoint.endpoint'),
           prop: 'endpointNum',
           show: true,
-          width: 150
+          width: 150,
+          sortable:'custom'
         }, {
           label: this.$t('project.module.alerts'),
           prop: 'alertNum',
           show: true,
-          width: 150
+          width: 150,
+          sortable:'custom'
         },
         {
           label: this.$t('overall.remark'),

nezha-fronted/src/components/common/table/settings/projectTable.vue

@@ -26,6 +26,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -93,27 +94,32 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('project.project.project'),
           prop: 'name',
           show: true,
-          minWidth: 150
+          minWidth: 150,
+          sortable:'custom'
         }, {
           label: this.$t('project.module.module'),
           prop: 'moduleNum',
           show: true,
-          width: 150
+          width: 150,
+          sortable:'custom'
         }, {
           label: this.$t('project.endpoint.endpoint'),
           prop: 'endpointNum',
           show: true,
-          width: 150
+          width: 150,
+          sortable:'custom'
         }, {
           label: this.$t('project.endpoint.alerts'),
           prop: 'alertNum',
           show: true,
-          width: 150
+          width: 150,
+          sortable:'custom'
         },
         {
           label: this.$t('overall.remark'),

nezha-fronted/src/components/common/table/settings/roleTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -79,11 +80,13 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('config.roles.name'),
           prop: 'name',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.roles.description'),
           prop: 'remark',

nezha-fronted/src/components/common/table/settings/userTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
     >
       <template slot="header">
@@ -87,12 +88,14 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('config.user.name'),
           prop: 'name',
           show: true,
-          width: 150
+          width: 150,
+          sortable:'custom'
         }, {
           label: this.$t('config.user.username'),
           prop: 'username',

nezha-fronted/src/components/layout/header.vue

@@ -23,14 +23,15 @@
         </div>
       </el-dropdown>
       <el-dropdown>
-        <div class="header-menu__item"><i class="nz-icon nz-icon-create-square"></i></div>
+        <div class="header-menu__item" @click="centerDialogVisible = true"><i class="nz-icon nz-icon-guide"></i></div>
-        <el-dropdown-menu slot="dropdown">
+        <!-- <el-dialog
-          <el-dropdown-item v-for="(item, createIndex) in createMenu" :key="createIndex" v-has="item.permission" :index="`${createIndex}`">
+          title="Get started in 6 steps"
-            <div :id="'create-box-'+createIndex">
+          :visible.sync="centerDialogVisible"
-              <span>{{item.label}}</span>
+          :show="centerDialogVisible"
-            </div>
+          center>
-          </el-dropdown-item>
+          <path-navigation></path-navigation>
-        </el-dropdown-menu>
+        </el-dialog> -->
+        <path-navigation :show.sync="centerDialogVisible"></path-navigation>
       </el-dropdown>
     </div>
     <!--个人操作-->
@@ -68,10 +69,12 @@
 import bus from '../../libs/bus'
 import { mapActions } from 'vuex'
 import changePin from '../page/config/changePin'
+import PathNavigation from './path_navigation/PathNavigation'
 export default {
   name: 'Header',
   components: {
     'change-password': changePin,
+    PathNavigation
   },
   data () {
     return {
@@ -111,7 +114,8 @@ export default {
           permission: 'header_add_rule'
         }
       ],
-      showChangePin: false
+      showChangePin: false,
+      centerDialogVisible: false
     }
   },
   methods: {
@@ -239,6 +243,22 @@ export default {
       text-align: center;
       height: 36px;
       line-height: 50px;
+      .el-dialog{
+        width: 1000px;
+        height: 70px;
+        .el-dialog__header{
+          background-color: orange;
+          .el-dialog__title{
+            color: #fff;
+          }
+          .el-dialog__close{
+            color: #fff;
+            line-height: 50px;
+            font-size: 30px;
+          }
+        }
+      }
+      
     }
   }
   .header-menu--item {

nezha-fronted/src/components/layout/path_navigation/PathNavigation.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="navigation">
+    <el-dialog title="Get started in 6 steps" :visible.sync="show" center>
+      <el-tabs type="border-card">
+        <el-tab-pane>
+          <span slot="label"
+            ><i class="nz-icon nz-icon-datacenter1"></i> 我的行程</span
+          >
+          <div style="margin-top: 0">
+            1sadssssssssssssssssssssssasddddddddddddddddddddddddddddddddddddsdsadasdasdasdasdasdasdasdassssssssssssssssssssssssssssssssssssssssssddddd
+          </div>
+          <div style="margin-top: 0">
+            1sadssssssssssssssssssssssasddddddddddddddddddddddddddddddddddddsdasdassssssssssssssssssssssssssssssssssssssssssddddd
+          </div>
+          <el-button @click="addDatacenter">add a</el-button>
+          <el-button @click="addCabinet">add b</el-button>
+        </el-tab-pane>
+        <el-tab-pane>
+          <span slot="label"
+            ><i class="nz-icon nz-icon-agent"></i> 我的行程</span
+          >
+          <div>1</div>
+          <el-button @click="addAgent">add a</el-button>
+          <el-button @click="downloadAgent">add b</el-button>
+        </el-tab-pane>
+        <el-tab-pane>
+          <span slot="label"
+            ><i class="nz-icon nz-icon-menu-assets"></i> 我的行程</span
+          >
+          <div>1</div>
+          <el-button @click="addAsset">add a</el-button>
+          <el-button @click="importAsset">add b</el-button>
+          <el-button @click="webTerminal">add c</el-button>
+        </el-tab-pane>
+        <el-tab-pane>
+          <span slot="label"
+            ><i class="nz-icon nz-icon-menu-project"></i> 我的行程</span
+          >
+          <div>1</div>
+          <el-button @click="addPeoject">add a</el-button>
+          <el-button @click="addModule">add b</el-button>
+          <el-button @click="addEndpoint">add c</el-button>
+          <el-button @click="importEndpoint">add d</el-button>
+        </el-tab-pane>
+        <el-tab-pane>
+          <span slot="label"
+            ><i class="nz-icon nz-icon-visualization"></i> 我的行程</span
+          >
+          <div>1</div>
+          <el-button @click="addPanel">add a</el-button>
+          <el-button @click="addChart">add b</el-button>
+        </el-tab-pane>
+        <el-tab-pane>
+          <span slot="label"
+            ><i class="nz-icon nz-icon-terminal-log"></i> 我的行程</span
+          >
+          <div>1</div>
+          <el-button @click="addAlertRule">add a</el-button>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import DcBox from "@/components/common/rightBox/dcBox";
+export default {
+  props: {
+    show: Boolean,
+  },
+  components: {
+    DcBox
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    // Datacenter
+    addDatacenter() {
+      this.$router.push({
+        path: "/dc",
+      });
+      this.$emit("update:show", false);
+    },
+    addCabinet() {
+      console.log(2);
+      console.log(this.$route);
+      this.$router.push({
+        path: "/dc/cabinet",
+      });
+      this.$emit("update:show", false);
+    },
+    // Angebt
+    addAgent() {
+      this.$router.push({
+        path: "/agent",
+      });
+      this.$emit("update:show", false);
+    },
+    downloadAgent() {
+      console.log(4);
+    },
+    // Asset
+    addAsset() {
+      this.$router.push({
+        path: "/asset",
+      });
+      this.$emit("update:show", false);
+    },
+    importAsset() {
+      console.log(6);
+    },
+    webTerminal() {
+      console.log(7);
+    },
+    // Monitor
+    addPeoject() {
+      this.$router.push({
+        path: "/monitor/project",
+      });
+      this.$emit("update:show", false);
+    },
+    addModule() {
+      console.log(9);
+    },
+    addEndpoint() {
+      console.log(10);
+    },
+    importEndpoint() {
+      console.log(11);
+    },
+    // Visualization
+    addPanel() {
+      this.$router.push({
+        path: "/panel",
+      });
+      this.$emit("update:show", false);
+    },
+    addChart() {
+      console.log(13);
+    },
+    // Alert
+    addAlertRule() {
+      this.$router.push({
+        path: "/alertRule",
+      });
+      this.$emit("update:show", false);
+    },
+  },
+  computed: {},
+};
+</script>
+<style lang="scss">
+.el-dialog__body {
+  background-color: #fff;
+  .el-tab-pane {
+    text-align: center;
+    div {
+      text-align: left;
+      line-height: 20px;
+    }
+    .el-button {
+      width: 156px;
+      height: 46px;
+      border-radius: 2px;
+      background-color: #666;
+      span {
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

nezha-fronted/src/components/page/alert/alertMessage.vue

@@ -363,6 +363,7 @@ export default {
         delete this.searchLabel.endAt
       }
       this.tools.loading = true
+      console.log(this.searchLabel)
       this.$get(this.url, this.searchLabel).then(response => {
         this.tools.loading = false
         if (response.code == 200) {
@@ -579,19 +580,6 @@ export default {
       }
       this.getTableData()
     },
-    // 数据排序
-    tableDataSort (item) {
-      let orderBy = ''
-      if (item.order === 'ascending') {
-        orderBy = item.prop
-      }
-      if (item.order === 'descending') {
-        orderBy = '-' + item.prop
-      }
-      this.pageObj.orderBy = orderBy
-      this.$set(this.searchLabel, 'orderBy', orderBy)
-      this.getTableData()
-    }
   }
 }
 </script>