NEZ-1048 feat：asset详细视图右侧内容区域以及部分优化

2021-10-11 14:05:07 +08:00
parent 46930a8878
commit 13bd9a0d8d
26 changed files with 482 additions and 71 deletions
--- a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
+++ b/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
@@ -2,7 +2,7 @@
  <div class="bottom-data-list">
    <div class="top-tools top-tools--sub">
      <div class="top-tool-left">
-        <div class="sub-list-title">{{bottomHeaderTitle}}：<slot name="title"></slot></div>
+        <div class="sub-list-title" v-if="showTitle">{{bottomHeaderTitle}}：<slot name="title"></slot></div>
        <div class="sub-list-tabs">
          <div v-for="tab in tabs" :key="tab.prop" :class="{'sub-list-tab--active': tab.active || tab.prop=== targetTab}" class="sub-list-tab" @click="changeTab(tab.prop)">{{tab.name}}</div>
        </div>
@@ -83,6 +83,10 @@ export default {
      type: Boolean,
      default: true
    },
+    showTitle: {
+      type: Boolean,
+      default: true
+    },
    title: {
      type: String
    }
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
@@ -97,12 +97,15 @@ import bus from '../../../../libs/bus'
 import alertMessageTable from '@/components/common/table/alert/alertMessageTable.vue'
 import deleteButton from '../../deleteButton'
 import { fromRoute } from '@/components/common/js/constants'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
+
 export default {
  name: 'alertMessageTab',
  components: {
    alertMessageTable,
    deleteButton
  },
+  mixin: [detailViewRightMixin],
  props: {
    from: String, // 来自哪个主页面，有："asset"、"alertRule"
    obj: Object // 关联的实体对象
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
@@ -1,6 +1,7 @@
 <template>
  <div class="full-width-height">
    <nz-bottom-data-list
+      :showTitle='showTitle'
      :api="url"
      :custom-table-title.sync="tools.customTableTitle"
      :layout="['searchInput', 'elementSet']"
@@ -93,10 +94,11 @@ import chartDataFormat from '@/components/charts/chartDataFormat'
 import chart from '@/components/page/dashboard/overview/chart'
 import { alertMessage as alertMessageConstant, fromRoute } from '@/components/common/js/constants'
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'

 export default {
  name: 'alertMessageTab',
-  mixins: [dataListMixin, subDataListMixin],
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
  components: {
    nzBottomDataList,
    alertMessageTable,
--- a/nezha-fronted/src/components/common/bottomBox/tabs/assetSubTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/assetSubTab.vue
@@ -1,6 +1,7 @@
 <template>
  <div>
    <nz-bottom-data-list
+      :showTitle='showTitle'
      :api="url"
      style="height: 100%"
      :custom-table-title.sync="tools.customTableTitle"
@@ -60,10 +61,11 @@ import assetTable from '@/components/common/table/asset/assetTable'
 import assetBox from '@/components/common/rightBox/asset/assetBox'
 import { fromRoute } from '@/components/common/js/constants'
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'

 export default {
  name: 'assetTab',
-  mixins: [dataListMixin, subDataListMixin],
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
  components: {
    nzBottomDataList,
    assetTable,
--- a/nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue
@@ -1,6 +1,7 @@
 <template>
  <div>
    <nz-bottom-data-list
+      :showTitle='showTitle'
      :api="url"
      style="height: 100%"
      :custom-table-title.sync="tools.customTableTitle"
@@ -60,10 +61,11 @@ import assetTable from '@/components/common/table/asset/assetTable'
 import assetBox from '@/components/common/rightBox/asset/assetBox'
 import { fromRoute } from '@/components/common/js/constants'
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'

 export default {
  name: 'assetTab',
-  mixins: [dataListMixin, subDataListMixin],
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
  components: {
    nzBottomDataList,
    assetTable,
--- a/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
@@ -1,12 +1,14 @@
 <template>
  <div>
    <nz-bottom-data-list
+      :showTitle='showTitle'
      :api="url"
      style="height: 100%"
      :custom-table-title.sync="tools.customTableTitle"
      :layout="['searchInput', 'elementSet']"
      :search-msg="searchMsg"
      :tabs="tabs"
+      :show-title="showTtile"
      @search="search"
      @changeTab="changeTab"
    >
@@ -68,13 +70,14 @@
 import cabinetBox from '../../rightBox/setting/cabinetBox'
 import deleteButton from '../../deleteButton'
 import dataListMixin from '@/components/common/mixin/dataList'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
 import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import cabinetTable from '@/components/common/table/settings/cabinetTable'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 export default {
  name: 'cabinetTab',
-  mixins: [dataListMixin, subDataListMixin],
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
  components: {
    nzBottomDataList,
    'cabinet-box': cabinetBox,
--- a/nezha-fronted/src/components/common/bottomBox/tabs/chartTempPreview.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/chartTempPreview.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="full-width-height">
-    <nz-bottom-data-list
+   <nz-bottom-data-lis
      :layout="[]"
      :tabs="tabs"
      :targetTab="targetTab"
@@ -25,7 +25,7 @@
          </transition>
        </div>
      </template>
-    </nz-bottom-data-list>
+    </nz-bottom-data-lis>
  </div>
 </template>

--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
@@ -1,6 +1,7 @@
 <template>
  <div class="full-width-height">
   <nz-bottom-data-list
+      :showTitle='showTitle'
      :api="url"
      :layout="['searchInput', 'elementSet']"
      :search-msg="searchMsg"
@@ -70,9 +71,10 @@ import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import endpointQueryTab from '@/components/common/table/special/endpointQueryTab'
 import bus from '@/libs/bus'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
 export default {
  name: 'endpointTab',
-  mixins: [subDataListMixin],
+  mixins: [subDataListMixin, detailViewRightMixin],
  props: {
    from: {}
  },
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
@@ -158,6 +158,7 @@ import exportXLSX from '../../exportXLSX'
 import bus from '@/libs/bus'
 import deleteButton from '../../deleteButton'
 import { fromRoute } from '@/components/common/js/constants'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
 export default {
  name: 'endpointTab',
  components: {
@@ -168,6 +169,7 @@ export default {
    obj: Object, // 关联的实体对象
    from: { type: String }
  },
+  mixin: [detailViewRightMixin],
  data () {
    return {
      fromRoute: fromRoute,
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTabNew.vue
@@ -1,6 +1,7 @@
 <template>
  <div class="full-width-height">
   <nz-bottom-data-list
+      :showTitle='showTitle'
      :api="url"
      :custom-table-title.sync="tools.customTableTitle"
      :layout="['searchInput', 'elementSet']"
@@ -53,10 +54,11 @@ import endpointTable from '@/components/common/table/settings/endpointTable'
 import EditEndpointBoxNew from '@/components/common/rightBox/editEndpointBoxNew'
 import { fromRoute } from '@/components/common/js/constants'
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'

 export default {
  name: 'terminalLogTab',
-  mixins: [dataListMixin, subDataListMixin],
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
  components: {
    nzBottomDataList,
    endpointTable,
--- a/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
@@ -1,5 +1,6 @@
 <template>
 <nz-bottom-data-list
+      :showTitle='showTitle'
    :custom-tool="true"
    :layout="[]"
    :show-pagination="false"
@@ -35,10 +36,11 @@ import subDataListMixin from '@/components/common/mixin/subDataList'
 import axios from 'axios'
 import bus from '@/libs/bus'
 import { fromRoute } from '@/components/common/js/constants'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'

 export default {
  name: 'logBottomTab',
-  mixins: [subDataListMixin],
+  mixins: [subDataListMixin, detailViewRightMixin],
  components: {
    nzBottomDataList,
    logTab
--- a/nezha-fronted/src/components/common/bottomBox/tabs/operationLogTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/operationLogTab.vue
@@ -1,5 +1,6 @@
 <template>
 <nz-bottom-data-list
+      :showTitle='showTitle'
    :api="url"
    :custom-table-title.sync="tools.customTableTitle"
    :layout="['searchInput', 'elementSet']"
@@ -34,9 +35,10 @@ import dataListMixin from '@/components/common/mixin/dataList'
 import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import operationLogTable from '@/components/common/table/settings/operationLogTable'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
 export default {
  name: 'operationLogTab',
-  mixins: [dataListMixin, subDataListMixin],
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
  components: {
    nzBottomDataList,
    operationLogTable
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -1,6 +1,7 @@
 <template>
  <div class="full-width-height chart-list">
   <nz-bottom-data-list
+      :showTitle='showTitle'
      :layout="[]"
      :tabs="tabs"
      :targetTab="targetTab"
@@ -118,9 +119,10 @@ import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import { fromRoute } from '@/components/common/js/constants'
 import chartTempBox from '@/components/common/rightBox/chartTempBox'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
 export default {
  name: 'panelTabNew',
-  mixins: [subDataListMixin],
+  mixins: [subDataListMixin, detailViewRightMixin],
  props: {
    from: String,
    obj: Object,
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogCMDTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogCMDTab.vue
@@ -1,5 +1,6 @@
 <template>
 <nz-bottom-data-list
+    :showTitle='showTitle'
    :layout="[]"
    :tabs="tabs"
    @changeTab="changeTab"
@@ -35,10 +36,11 @@
 import dataListMixin from '@/components/common/mixin/dataList'
 import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'

 export default {
  name: 'terminalLogRecordTab',
-  mixins: [dataListMixin, subDataListMixin],
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
  components: {
    nzBottomDataList
  },
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
@@ -1,5 +1,6 @@
 <template>
 <nz-bottom-data-list
+    :showTitle='showTitle'
    :layout="[]"
    :tabs="tabs"
    @changeTab="changeTab"
@@ -30,9 +31,10 @@ import bus from '../../../../libs/bus'
 import dataListMixin from '@/components/common/mixin/dataList'
 import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
 export default {
  name: 'terminalLogReplayTab',
-  mixins: [dataListMixin, subDataListMixin],
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
  components: {
    nzBottomDataList
  },
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogRecordTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogRecordTab.vue
@@ -1,5 +1,6 @@
 <template>
 <nz-bottom-data-list
+    :showTitle='showTitle'
    :layout="[]"
    :tabs="tabs"
    @changeTab="changeTab"
@@ -36,10 +37,11 @@ import bus from '../../../../libs/bus'
 import dataListMixin from '@/components/common/mixin/dataList'
 import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'

 export default {
  name: 'terminalLogReplayTab',
-  mixins: [dataListMixin, subDataListMixin],
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
  components: {
    nzBottomDataList
  },
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogTab.vue
@@ -1,5 +1,6 @@
 <template>
 <nz-bottom-data-list
+    :showTitle='showTitle'
    :api="url"
    :custom-table-title.sync="tools.customTableTitle"
    :layout="['searchInput', 'elementSet']"
@@ -36,16 +37,21 @@ import dataListMixin from '@/components/common/mixin/dataList'
 import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import terminalLogTable from '@/components/common/table/settings/terminalLogTable'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'

 export default {
  name: 'terminalLogTab',
-  mixins: [dataListMixin, subDataListMixin],
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
  components: {
    nzBottomDataList,
    terminalLogTable
  },
  props: {
-    obj: Object
+    obj: Object,
+    showTitle: {
+      type: Boolean,
+      default: true
+    }
  },
  watch: {
    obj (n) {
--- a/nezha-fronted/src/components/common/detailView/detailView.scss
+++ b/nezha-fronted/src/components/common/detailView/detailView.scss
@@ -19,6 +19,11 @@
      margin-top: 10px;
    }
  }
+  .nz-detail-view-right{
+    flex: 1;
+    overflow: hidden;
+    padding-right: 10px;
+  }
  /deep/ .el-pagination .btn-next,  /deep/ .el-pagination .btn-prev {
    border: none;
    background: none;
@@ -55,3 +60,4 @@

  width: calc(100% - 20px);
 }
+
--- a/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
@@ -1,6 +1,6 @@
 <template>
  <ul class="detail-row-box">
-    <li v-for="(item,index) in tableData" :key="index" class="detail-row" @click="detailViewRightShow(item)">
+    <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">
          <el-popover :content="$t('asset.assetStatPre')+(item.pingInfo.lastUpdate?utcTimeToTimezoneStr(item.pingInfo.lastUpdate):$t('asset.assetStatDown'))" v-if="item.pingInfo" placement="right" trigger="hover">
@@ -23,9 +23,12 @@ import detailViewLeftMixin from '@/components/common/mixin/detailViewLeftMixin'
 export default {
  name: 'assetDetail',
  mixins: [detailViewLeftMixin],
+  props: {
+    detailViewRightObj: {}
+  },
  methods: {
    detailViewRightShow (item) {
-      this.$emit('detailViewRightShow')
+      this.$emit('detailViewRightShow', item)
    }
  }
 }
@@ -68,4 +71,7 @@ export default {
      font-weight: 400;
    }
  }
+  .selected{
+    background: #FFFBF6;
+  }
 </style>
--- a/nezha-fronted/src/components/common/detailView/nzDetailView.vue
+++ b/nezha-fronted/src/components/common/detailView/nzDetailView.vue
@@ -14,12 +14,15 @@
            <el-dropdown
              type="primary"
              v-if="showLayout.indexOf('detailViewSet') > -1"
-              class="margin-l-10"
+              class="margin-l-5"
              @command="changeDetailType">
+              <button class="top-tool-btn table-column-setting"
+                      type="button">
                <i class="nz-icon nz-icon-alert-list" />
+              </button>
              <el-dropdown-menu slot="dropdown" >
-                <el-dropdown-item :command="'list'">列表</el-dropdown-item>
-                <el-dropdown-item :command="'view'">详细</el-dropdown-item>
+                <el-dropdown-item :command="'list'" :class="detailType === 'list' ? 'active' : ''">列表</el-dropdown-item>
+                <el-dropdown-item :command="'view'" :class="detailType === 'view' ? 'active' : ''">详细</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
@@ -33,6 +36,16 @@
              <slot name="pagination"></slot>
            </div>
          </div>
+          <div class="nz-detail-view-right">
+            <detailViewRight
+              @getTableData = 'getDetail'
+              ref="detailViewRight"
+              v-if="detailViewRightObj"
+              :from="from"
+              :obj="detailViewRightObj"
+              :target-tab="'panelTab'"
+            />
+          </div>
        </div>
      </div>
    </div>
@@ -42,11 +55,12 @@
 <script>
 import { fromRoute } from '@/components/common/js/constants'
 import { bottomBoxWindow } from '@/components/common/js/tools'
+import detailViewRight from '@/components/common/detailView/view/detailViewRight'

 export default {
  name: 'nzDataList',
  components: {
-
+    detailViewRight
  },
  props: {
    from: {
@@ -72,7 +86,8 @@ export default {
    },
    nzTableHeightOffset: Number,
    searchRight: Boolean,
-    operationRecord: Boolean
+    operationRecord: Boolean,
+    detailViewRightObj: {}
  },
  computed: {
    nzTableHeight () {
@@ -158,4 +173,7 @@ export default {
 </script>
 <style lang="scss" scoped>
  @import './detailView.scss';
+  .active{
+    color: #fa901c;
+  }
 </style>
--- a/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
+++ b/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
@@ -0,0 +1,334 @@
+<template>
+  <div class="sub-box">
+      <div style="height: 60px;background: #FFFFFF;border: 1px solid #E7EAED;margin-bottom: 10px">
+
+      </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>
+      <alertMessageTabNew :showTitle="false" v-if="from === fromRoute.dc && targetTab === 'alertMessageTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.dc.alertMessage" :targetTab="targetTab" @changeTab="changeTab"></alertMessageTabNew>
+      <!--告警信息-->
+      <alert-message-tab :showTitle="false" v-if="((from === fromRoute.alertRule || from === fromRoute.asset || from === fromRoute.endpoint || from === fromRoute.project ) && targetTab === 'alertMessage')" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
+      <!--asset页的endpoint列表-->
+      <endpoint-tab :showTitle="false" v-if="from === fromRoute.asset && targetTab === fromRoute.endpoint" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab>
+
+      <!--terminal-log的记录和回放-->
+      <terminal-log-cmd-tab :showTitle="false" v-if="from === fromRoute.terminalLog && targetTab === 'cmdTab'" :from="from" :obj="obj" :tabs="tabs.terminalLog.cmd" @changeTab="changeTab"></terminal-log-cmd-tab>
+      <terminal-log-record-tab :showTitle="false" v-if="from === fromRoute.terminalLog && targetTab === 'recordTab'" :from="from" :obj="obj" :tabs="tabs.terminalLog.record" @changeTab="changeTab"></terminal-log-record-tab>
+      <terminal-log-monitor-tab :showTitle="false" v-if="from === fromRoute.terminalLog && targetTab === 'monitorTab'" :from="from" :obj="obj" :tabs="tabs.terminalLog.monitor" @changeTab="changeTab" @exit="closeSubList"></terminal-log-monitor-tab>
+
+      <asset-tab :showTitle="false" v-if="from === fromRoute.dc && targetTab === 'asset'" :tabs="tabs.dc.asset" ref="assetTab" :from="from" :obj="obj" @changeTab="changeTab" @exit="closeSubList"></asset-tab>
+
+      <!--user列表的两个日志-->
+      <operation-log-tab :showTitle="false" v-if="from === fromRoute.user && targetTab === 'operationLogTab'" :from="from" :obj="obj" :tabs="tabs.user.operationLog" @changeTab="changeTab"></operation-log-tab>
+      <terminal-log-tab :showTitle="false" v-if="from === fromRoute.user && targetTab === 'terminalLogTab'" :from="from" :obj="obj" :tabs="tabs.user.terminalLog" @changeTab="changeTab"></terminal-log-tab>
+      <!-- asset列表的3个 -->
+      <panel-tab-new @getTableData="getTableData" :paramsType="'asset'" :showTitle="false" v-if="from === fromRoute.asset && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.panel" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
+      <alertMessageTabNew :showTitle="false" v-if="from === fromRoute.asset && targetTab === 'alertMessageTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.alertMessage" :targetTab="targetTab" @changeTab="changeTab"></alertMessageTabNew>
+      <endpointTabNew :showTitle="false" v-if="from === fromRoute.asset && targetTab === 'endpointTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.endpoint" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
+      <log-bottom-tab :showTitle="false" v-if="from === fromRoute.asset && targetTab === 'log'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.log" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
+      <assetSubTab :showTitle="false" v-if="from === fromRoute.asset && targetTab === 'assetSubTab' && obj.childrenNum" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.alertMessageSub" :targetTab="targetTab" @changeTab="changeTab"></assetSubTab>
+      <!--module列表的tab-->
+      <endpointTabNew :showTitle="false" v-if="from === fromRoute.module && targetTab === 'endpoint'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
+      <alertMessageTabNew :showTitle="false" v-if="from === fromRoute.module && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
+      <panel-tab-new @getTableData="getTableData" :paramsType="'module'" :showTitle="false" v-if="from === fromRoute.module && targetTab === 'panel'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
+      <!--endpoint列表的tab-->
+      <panel-tab-new :showTitle="false" v-if="from === fromRoute.endpoint && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :paramsType="'endpoint'" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab" @getTableData="getTableData"></panel-tab-new>
+      <endpointQuery :showTitle="false" v-if="from === fromRoute.endpoint && targetTab === 'endpointQuery'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></endpointQuery>
+      <log-bottom-tab :showTitle="false" v-if="from === fromRoute.endpoint && targetTab === 'log' && hasLogConfig" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
+      <alertMessageTabNew  :showTitle="false" v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab="targetTab" @changeTab="changeTab"></alertMessageTabNew>
+      <!--chartTemp的Tab-->
+      <panel-tab-new @getTableData="getTableData"  :paramsType="'template'" :showTitle="false" v-if="from === fromRoute.chartTemp && targetTab === 'panel'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.chartTemp.chartTempTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
+      <!--alertRule Tab-->
+      <alertMessageTabNew :showTitle="false" v-if="from === fromRoute.alertRule && targetTab === 'alertRuleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertRule.alertRule" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
+      <!--model 下滑-->
+      <asset-tab :showTitle="false" v-if="(from === fromRoute.model) && targetTab === 'asset'" :tabs="tabs.model" ref="assetTab" :from="from" :obj="obj" @changeTab="changeTab" @exit="closeSubList"></asset-tab>
+    </div>
+  </div>
+</template>
+
+<script>
+import cabinetTab from '@/components/common/bottomBox/tabs/cabinetTab'
+import alertMessageTab from '@/components/common/bottomBox/tabs/alertMessageTab'
+import alertMessageTabNew from '@/components/common/bottomBox/tabs/alertMessageTabNew'
+import assetSubTab from '@/components/common/bottomBox/tabs/assetSubTab'
+import endpointQuery from '@/components/common/bottomBox/tabs/endpointQuery'
+import endpointTab from '@/components/common/bottomBox/tabs/endpointTab'
+import endpointTabNew from '@/components/common/bottomBox/tabs/endpointTabNew'
+import panelTabNew from '@/components/common/bottomBox/tabs/panelTabNew'
+import terminalLogRecordTab from '@/components/common/bottomBox/tabs/terminalLogRecordTab'
+import terminalLogMonitorTab from '@/components/common/bottomBox/tabs/terminalLogMonitorTab'
+import terminalLogCMDTab from '@/components/common/bottomBox/tabs/terminalLogCMDTab'
+import operationLogTab from '@/components/common/bottomBox/tabs/operationLogTab'
+import terminalLogTab from '@/components/common/bottomBox/tabs/terminalLogTab'
+import assetTab from '@/components/common/bottomBox/tabs/assetTab'
+import { fromRoute } from '@/components/common/js/constants'
+import LogBottomTab from '@/components/common/bottomBox/tabs/logBottomTab'
+
+export default {
+  name: 'detailViewRight',
+  components: {
+    LogBottomTab,
+    cabinetTab,
+    alertMessageTab,
+    endpointTab,
+    terminalLogRecordTab,
+    terminalLogMonitorTab,
+    operationLogTab,
+    terminalLogTab,
+    'terminal-log-cmd-tab': terminalLogCMDTab,
+    endpointTabNew,
+    alertMessageTabNew,
+    endpointQuery,
+    panelTabNew,
+    assetTab,
+    assetSubTab
+  },
+  props: {
+    isFullScreen: Boolean, // 是否全屏
+    subResizeShow: {
+      type: Boolean,
+      default: true
+    }, // resize时，用v-show="subResizeShow"控制页面内容是否显示
+    obj: Object, // 关联的实体对象
+    from: String, // 来自哪个页面
+    tabList: Array, // 动态页签列表
+    targetTab: String // 展示哪个页签
+  },
+  watch: {
+    obj: {
+      immediate: true,
+      handler (n) {
+        console.log(n)
+        if ((this.from === fromRoute.asset) && n) {
+          const assetSub = { prop: 'assetSubTab', name: this.$t('overall.assetSubTab'), active: false }
+          if (n.childrenNum) {
+            if (!this.tabs.asset.panel.find(item => item.prop === assetSub.prop)) {
+              this.tabs.asset.panel.push(assetSub)
+              this.tabs.asset.alertMessage.push(assetSub)
+              this.tabs.asset.endpoint.push(assetSub)
+              this.tabs.asset.log.push(assetSub)
+            }
+          } else if (this.tabs.asset.panel.find(item => item.prop === assetSub.prop)) {
+            this.tabs.asset.panel = this.tabs.asset.panel.filter(item => item.prop !== assetSub.prop)
+            this.tabs.asset.alertMessage = this.tabs.asset.alertMessage.filter(item => item.prop !== assetSub.prop)
+            this.tabs.asset.endpoint = this.tabs.asset.endpoint.filter(item => item.prop !== assetSub.prop)
+            this.tabs.asset.log = this.tabs.asset.log.filter(item => item.prop !== assetSub.prop)
+          }
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      fromRoute: fromRoute,
+      tabs: {
+        terminalLog: {
+          monitor: [
+            { prop: 'monitorTab', name: this.$t('config.terminallog.monitor.monitor'), active: true }
+          ],
+          cmd: [
+            { prop: 'cmdTab', name: this.$t('config.terminallog.cmd.cmd'), active: true },
+            { prop: 'recordTab', name: this.$t('config.terminallog.record.record'), active: false }
+          ],
+          record: [
+            { prop: 'cmdTab', name: this.$t('config.terminallog.cmd.cmd'), active: false },
+            { prop: 'recordTab', name: this.$t('config.terminallog.record.record'), active: true }
+          ]
+        },
+        user: {
+          operationLog: [
+            { prop: 'operationLogTab', name: this.$t('config.operationlog.operationlog'), active: true },
+            { prop: 'terminalLogTab', name: this.$t('config.terminallog.terminallog'), active: false }
+          ],
+          terminalLog: [
+            { prop: 'operationLogTab', name: this.$t('config.operationlog.operationlog'), active: false },
+            { prop: 'terminalLogTab', name: this.$t('config.terminallog.terminallog'), active: true }
+          ]
+          // module tab
+        },
+        asset: {
+          panel: [
+            { prop: 'panelTab', name: this.$t('overall.detail'), active: true },
+            { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
+            { prop: 'endpointTab', name: 'Endpoint', active: false },
+            { prop: 'log', name: 'Log', active: false }
+          ],
+          alertMessage: [
+            { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
+            { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true },
+            { prop: 'endpointTab', name: 'Endpoint', active: false },
+            { prop: 'log', name: 'Log', active: false }
+          ],
+          endpoint: [
+            { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
+            { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
+            { prop: 'endpointTab', name: 'Endpoint', active: true },
+            { prop: 'log', name: 'Log', active: false }
+          ],
+          log: [
+            { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
+            { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
+            { prop: 'endpointTab', name: 'Endpoint', active: false },
+            { prop: 'log', name: 'Log', active: true }
+          ],
+          alertMessageSub: [
+            { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
+            { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
+            { prop: 'endpointTab', name: 'Endpoint', active: false },
+            { prop: 'log', name: 'Log', active: false },
+            { prop: 'assetSubTab', name: this.$t('overall.assetSubTab'), active: true }
+          ]
+        },
+        module: {
+          moduleTabTitle: [
+            // { prop: 'panel', name: 'Detail' },
+            { prop: 'endpoint', name: this.$t('asset.endpoint') },
+            { prop: 'moduleAlertMessage', name: this.$t('overall.alert') }
+          ]
+        },
+        endpoint: {
+          endpointTabTitle: [
+            { prop: 'panelTab', name: this.$t('overall.detail') },
+            { prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
+            { prop: 'endpointQuery', name: 'Metrics' },
+            { prop: 'log', name: 'Log' }
+          ]
+        },
+        chartTemp: {
+          chartTempTabTitle: [
+            { prop: 'panel', name: this.$t('overall.tempPrev') }
+          ]
+        },
+        alertRule: {
+          alertRule: [
+            { prop: 'alertRuleAlertMessage', name: this.$t('overall.alert') }
+          ]
+        },
+        model: [
+          { prop: 'asset', name: this.$t('asset.assets'), active: true }
+        ],
+        dc: {
+          cabinet: [
+            { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: true },
+            { prop: 'asset', name: this.$t('asset.assets'), active: false },
+            { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }
+          ],
+          asset: [
+            { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false },
+            { prop: 'asset', name: this.$t('asset.assets'), active: true },
+            { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }
+          ],
+          alertMessage: [
+            { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false },
+            { prop: 'asset', name: this.$t('asset.assets'), active: false },
+            { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }
+          ]
+        }
+
+      }
+    }
+  },
+  computed: {
+    hasLogConfig () {
+      const config = this.obj.configs.find(c => c.type === 'logs')
+      return config && config.enable === 1
+    },
+    endpointTabs () {
+      const config = this.obj.configs.find(c => c.type === 'logs')
+      const hasLog = config && config.enable === 1
+      const tabs = [
+        { prop: 'panelTab', name: this.$t('overall.detail') },
+        { prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
+        { prop: 'endpointQuery', name: 'Metrics' }
+      ]
+      if (hasLog) {
+        tabs.push({ prop: 'log', name: 'Log' })
+      }
+      return tabs
+    }
+  },
+  methods: {
+    exitFullScreen () {
+      this.$emit('exitFullScreen')
+      this.$nextTick(() => { this.afterResize() })
+    },
+    fullScreen () {
+      this.$emit('fullScreen')
+      this.$nextTick(() => { this.afterResize() })
+    },
+    closeSubList () {
+      this.$emit('closeSubList')
+    },
+    listResize (e) {
+      this.$emit('listResize', e)
+      this.$nextTick(() => { this.afterResize() })
+    },
+    changeTab (tab) {
+      this.targetTab = tab
+    },
+    afterResize () {
+      if (this.from === this.fromRoute.endpoint && this.targetTab === 'endpointQuery') {
+        this.$refs.endpointQuery.tableReload()
+      } else if (this.from === this.fromRoute.terminalLog && this.targetTab === 'record') {
+        setTimeout(() => {
+          this.$refs.reminalLogRecordTab.consoleResize()
+        }, 600)
+      }
+    },
+    getTableData () {
+      this.$emit('getTableData')
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+  .sub-box{
+    height: 100%;
+    flex-direction: column;
+  }
+  .sub-list__tabs {
+    flex: 1;
+    background-color: white;
+    height: calc(100% - 82px);
+    border: 1px solid #E7EAED;
+    &>div {
+      height: 100%;
+      &>.nz-table2 {
+        height: calc(100% - 92px);
+        padding: 20px 20px 0;
+      }
+    }
+    .chart-list{
+      .nz-table2 {
+        box-sizing: border-box;
+        padding: 0;
+      }
+    }
+  }
+  /deep/ .sub-container{
+    height: calc(100% - 45px);
+    position: relative;
+  }
+  .sub-box /deep/ .top-tools.top-tools--sub{
+    border: none;
+    padding: 0 15px 0px 0px;
+    margin-right: 15px;
+    margin-left: 20px;
+    border-bottom: 1px solid #E7EAED;
+  }
+  .sub-box /deep/ .list-width {
+    padding: 0;
+  }
+  .sub-box /deep/ .nz-table2{
+    padding: 20px;
+    height: 100%;
+  }
+  .sub-box /deep/ .table-list{
+    padding: 0;
+    height: 100%;
+  }
+  .sub-box /deep/ .pagination-bottom {
+    bottom: -3px;
+  }
+</style>
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/nezha-fronted/src/components/common/mixin/dataList.js
@@ -303,11 +303,16 @@ export default {
      this.tools.customTableTitle = this.tools.customTableTitle.concat(arr)
    }
    if (!this.fromBottom) {
+      if (this.detailType !== 'view') {
        this.getTableData()
+      } else {
+        this.getDetail()
+      }
      this.$nextTick(() => {
        this.$refs.dataTable.$refs.dataTable.doLayout()
      })
    }
+
  },
  beforeDestroy () {
    if (this.scrollbarWrap) {
--- a/nezha-fronted/src/components/common/mixin/detailViewMixin.js
+++ b/nezha-fronted/src/components/common/mixin/detailViewMixin.js
@@ -3,21 +3,32 @@ export default {
  data () {
    return {
      detailType: 'list',
-      detailViewRightObj: {}
+      detailViewRightObj: '',
+      detailViewLoading: false
    }
  },
+  created () {
+    this.detailType = localStorage.getItem('detail-view-' + this.tableId) || 'list'
+  },
  methods: {
    changeDetailType (flag) {
      if (this.detailType === flag) {
        return
      }
      this.detailType = flag
+      localStorage.setItem('detail-view-' + this.tableId, this.detailType)
      this.pageObj.pageNo = 1
+      this.detailViewLoading = true
      if (flag === 'list') {
+        this.searchLabel = {}
+        this.searchCheckBox = {}
        this.getTableData()
      } else {
        this.getDetail()
      }
+      setTimeout(() => {
+        this.detailViewLoading = false
+      }, 100)
    },
    searchDetail (params) {
      this.getDetail()
@@ -25,7 +36,7 @@ export default {
    getDetail () {
      const params = {
        pageNo: this.pageObj.pageNo,
-        pageSize: 50
+        pageSize: this.pageObj.pageSize
      }
      this.tools.loading = true
      this.$get(this.url, { ...params }).then(response => {
--- a/nezha-fronted/src/components/common/mixin/detailViewRightMixin.js
+++ b/nezha-fronted/src/components/common/mixin/detailViewRightMixin.js
@@ -1,6 +1,9 @@
 export default {
  props: {
-    fromListObj:{}
+    showTitle: {
+      type: Boolean,
+      default: true
+    }
  },
  data () {
    return {
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/nezha-fronted/src/components/common/table/nzDataList.vue
@@ -21,9 +21,12 @@
            <el-dropdown
              type="primary"
              v-if="showLayout.indexOf('detailViewSet') > -1"
-              class="margin-l-10"
+              class="margin-l-5"
              @command="changeDetailType">
+              <button class="top-tool-btn table-column-setting"
+                      type="button">
                <i class="nz-icon nz-icon-alert-list" />
+              </button>
              <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item :command="'list'" :class="detailType === 'list' ? 'active' : ''">列表</el-dropdown-item>
                <el-dropdown-item :command="'view'" :class="detailType === 'view' ? 'active' : ''">详细</el-dropdown-item>
@@ -191,3 +194,8 @@ export default {
  }
 }
 </script>
+<style scoped>
+  .active{
+    color: #fa901c;
+  }
+</style>
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -1,6 +1,8 @@
 <template>
-  <div v-if="detailType === 'list'">
+  <div>
    <nz-data-list
+      v-loading="detailViewLoading"
+      v-show="detailType === 'list'"
      ref="dataList"
      :api="url"
      :custom-table-title.sync="tools.customTableTitle"
@@ -9,7 +11,7 @@
      :search-msg="searchMsg"
      :nz-table-height-offset="assetNzTableHeightOffset"
      @search="search"
-      @detailType="detailType"
+      :detailType="detailType"
      @changeDetailType="changeDetailType"
      @getTableData="getTableData"
      @getDetail="getDetail"
@@ -49,7 +51,7 @@
        </top-tool-more-options>
      </template>
      <template v-slot:search >
-        <click-search ref="clickSearch" :select-value.sync="selectValue" :title-search-list="titleSearchList" @reload="reloadTable"/>
+        <click-search ref="clickSearch" v-if="detailType === 'list'" :select-value.sync="selectValue" :title-search-list="titleSearchList" @reload="reloadTable"/>
      </template>
      <template v-slot:default="slotProps">
        <asset-table
@@ -74,36 +76,13 @@
        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
      </template>
    </nz-data-list>
-    <transition name="right-box">
-      <asset-box v-if="rightBox.show"
-                 ref="assetBox"
-                 :dc-data="dcData"
-                 :field-group-data="fieldGroupData"
-                 :from="fromRoute.asset"
-                 :obj="object"
-                 :snmp-credential-data="snmpCredentialData"
-                 :state-data="stateData"
-                 :type-data="typeData"
-                 @close="closeRightBox"
-                 @refresh="getTableData"></asset-box>
-    </transition>
-    <transition name="right-box">
-      <asset-batch-edit-box v-if="rightBox.batchShow"
-                            :field-group-data="fieldGroupData"
-                            :snmp-credential-data="snmpCredentialData"
-                            :state-data="stateData"
-                            @close="closeRightBox"
-                            @refresh="getTableData"></asset-batch-edit-box>
-    </transition>
-    <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
-    </transition>
-  </div>
-  <div v-else>
    <nzDetailView
+      v-loading="detailViewLoading"
+      v-show="detailType !== 'list'"
      :api="url"
      :layout="dataListLayout"
      :from="fromRoute.asset"
-      @detailType="detailType"
+      :detailType="detailType"
      :detailViewRightObj="detailViewRightObj"
      @search="searchDetail"
      @changeDetailType="changeDetailType"
@@ -134,6 +113,7 @@
          class="data-detail"
          ref="dataDetail"
          v-loading="tools.loading"
+          :detailViewRightObj="detailViewRightObj"
          :api="url"
          :table-data="tableData"
          @detailViewRightShow = 'detailViewRightShow'