feat: label搜索开关、asset-label列等

nezha-fronted/src/assets/css/common/tableCommon.scss

@@ -76,12 +76,17 @@
         color: $--button-gray-color;
       }
     }
+    .top-tool-btn.top-tool-btn--text {
+      padding: 0 8px;
+      width: unset;
+      color: #666;
+    }
     .top-tool-btn:hover:not(.nz-btn-disabled) {
       background-color: $--button-gray-hover-background-color;
     }
-    .top-tool-btn:focus:not(.nz-btn-disabled) {
+    .top-tool-btn:focus:not(.nz-btn-disabled), .top-tool-btn.is-focus {
       background-color: $--button-gray-hover-background-color;
-      border-color: #FBCEA4;
+      border: 1px solid #FBCEA4 !important;
       i {
         color: $--button-gray-active-color;
       }

nezha-fronted/src/assets/css/main.scss

@@ -2,4 +2,5 @@
 @import './theme.scss';
 @import './common.scss';
 @import '../stylus/index.scss';
+@import './common/tableCommon.scss';
 @import './common/rightBoxCommon.scss';

nezha-fronted/src/assets/stylus/main.scss

@@ -359,11 +359,9 @@ li{
   font-weight: 500;
   white-space: nowrap;
 }
-.nz-btn.nz-btn-disabled {
+.nz-btn-disabled {
   background-image: none;
-  color: #e5e5e5;
+  opacity: .6;
-  background-color: #ffffff;
-  border-color: #e5e5e5 ;
   cursor: default;
 }
 .nz-btn-group {

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

@@ -32,10 +32,9 @@
 <!--                   :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab>-->
 
         <!--terminal-log的记录和回放-->
-        <terminal-log-cmd-tab v-if="from === fromRoute.terminalLog && targetTab === 'cmd'" ref="reminalLogCMDTab" :from="from" :obj="obj" @changeTab="changeTab"></terminal-log-cmd-tab>
+        <terminal-log-cmd-tab 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 v-if="from === fromRoute.terminalLog && targetTab === 'record'" ref="reminalLogRecordTab" :from="from" :obj="obj" @changeTab="changeTab"></terminal-log-record-tab>
+        <terminal-log-record-tab 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 v-if="from === fromRoute.terminalLog && targetTab === 'monitorTab'" :from="from" :obj="obj" :tabs="tabs.terminalLog.monitor" @changeTab="changeTab" @exit="closeSubList"></terminal-log-monitor-tab>
-        <terminal-log-monitor-tab v-if="from === fromRoute.terminalLog && targetTab === 'monitor'" ref="reminalLogRecordTab" :from="from" :obj="obj" @changeTab="changeTab" @exit="closeSubList"></terminal-log-monitor-tab>
 
         <asset-tab v-if="from === fromRoute.dc && targetTab === 'asset'" :tabs="tabs.dc.asset" ref="assetTab" :from="from" :obj="obj" @changeTab="changeTab" @exit="closeSubList"></asset-tab>
 
@@ -110,6 +109,19 @@ export default {
     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 },
@@ -202,3 +214,100 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+/* begin--二级顶部工具栏*/
+.sub-top-tools {
+  display: flex;
+  height: 32px;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid #DCDFE6;
+  border-bottom: 1px solid #E4E7ED;
+  margin: 0 -6px;
+  padding-right: 80px;
+  background-color: $content-right-background-color;
+  margin-bottom: 10px;
+}
+.sub-top-tools>div {
+  margin-top: 2px;
+}
+.sub-top-tools .top-tool-search {
+  width: 260px;
+  margin: -1px 0 0 0;
+  .select_input input {
+    background-color: white;
+  }
+}
+.sub-container {
+  padding: 10px;
+  height: 100%;
+  background-color: #f6f6f6;
+  overflow-y: auto;
+  &>div {
+    background-color: white;
+  }
+}
+.sub-top-tools .top-tool-btn-txt .nz-icon{
+  display: inline-block;
+  font-size: 12px;
+  margin-right: 6px;
+}
+.sub-top-tool-right {
+  display: flex;
+  align-content: center;
+}
+.has-sub-popper {
+  color: $danger-color;
+}
+.sub-box {
+  height: 50%;
+  position: relative;
+}
+.sub-list {
+  height: calc(100% - 9px);
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  top: 9px;
+
+  .sub-list__tabs {
+    height: 100%;
+    background-color: white;
+
+    &>div {
+      height: 100%;
+      background-color: #f6f6f6;
+
+      .nz-table2 {
+        height: calc(100% - 92px);
+        padding: 20px 20px 0;
+      }
+    }
+  }
+}
+.main-and-sub-transition {
+  transition: .4s height;
+}
+
+.bottom-panel {
+  padding-top: 15px;
+  background-color: white;
+  padding-bottom: 50px;
+}
+
+.resize-modal {
+  width: calc(100% - 240px);
+  opacity: 0.6;
+  background-color: #f5f9ff;
+  border: 1px solid #a7d0f7;
+  box-sizing: border-box;
+  position: fixed;
+  cursor: ns-resize;
+  display: none;
+  z-index: 20;
+  vertical-align: bottom;
+  bottom: 0;
+}
+
+/* end--二级顶部工具栏*/
+</style>

nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue

@@ -22,9 +22,9 @@
       </div>
     </div>
     <!-- 自定义table列 -->
-    <transition name="el-zoom-in-top" v-if="targetTab!=='endpointQuery'">
+    <transition name="el-zoom-in-top">
       <element-set
-        v-if="tools.showCustomTableTitle"
+        v-if="tools.showCustomTableTitle && layout.indexOf('elementSet') > -1"
         ref="customTableTitle"
         :custom-table-title="customTableTitle"
         :original-table-title="tableTitle"
@@ -105,102 +105,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-@import '@/assets/css/common/tableCommon.scss';
-/* begin--二级顶部工具栏*/
-.sub-top-tools {
-  display: flex;
-  height: 32px;
-  align-items: center;
-  justify-content: space-between;
-  border-top: 1px solid #DCDFE6;
-  border-bottom: 1px solid #E4E7ED;
-  margin: 0 -6px;
-  padding-right: 80px;
-  background-color: $content-right-background-color;
-  margin-bottom: 10px;
-}
-.sub-top-tools>div {
-  margin-top: 2px;
-}
-.sub-top-tools .top-tool-search {
-  width: 260px;
-  margin: -1px 0 0 0;
-  .select_input input {
-    background-color: white;
-  }
-}
-.sub-container {
-  padding: 10px;
-  height: 100%;
-  background-color: #f6f6f6;
-  overflow-y: auto;
-  &>div {
-    background-color: white;
-  }
-}
-.sub-top-tools .top-tool-btn-txt .nz-icon{
-  display: inline-block;
-  font-size: 12px;
-  margin-right: 6px;
-}
-.sub-top-tool-right {
-  display: flex;
-  align-content: center;
-}
-.has-sub-popper {
-  color: $danger-color;
-}
-.sub-box {
-  height: 50%;
-  position: relative;
-}
-.sub-list {
-  height: calc(100% - 9px);
-  position: absolute;
-  width: 100%;
-  z-index: 1;
-  top: 9px;
-
-  .sub-list__tabs {
-    height: 100%;
-    background-color: white;
-
-    &>div {
-      height: 100%;
-      background-color: #f6f6f6;
-
-      .nz-table2 {
-        height: calc(100% - 92px);
-        padding: 20px 20px 0;
-      }
-    }
-  }
-}
-.main-and-sub-transition {
-  transition: .4s height;
-}
-
-.bottom-panel {
-  padding-top: 15px;
-  background-color: white;
-  padding-bottom: 50px;
-}
-
-.resize-modal {
-  width: calc(100% - 240px);
-  opacity: 0.6;
-  background-color: #f5f9ff;
-  border: 1px solid #a7d0f7;
-  box-sizing: border-box;
-  position: fixed;
-  cursor: ns-resize;
-  display: none;
-  z-index: 20;
-  vertical-align: bottom;
-  bottom: 0;
-}
-
-/* end--二级顶部工具栏*/
-</style>

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

@@ -103,7 +103,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import '@/assets/css/common/tableCommon.scss';
 /* begin--二级顶部工具栏*/
 .sub-top-tools {
   display: flex;

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

@@ -1,42 +1,45 @@
 <template>
-  <div style="height: 100%;">
+  <nz-bottom-data-list
-    <div class="sub-top-tools">
+    :layout="[]"
-      <div class="sub-list-tabs">
+    :tabs="tabs"
-        <div class="sub-list-tab-title">ID：{{obj.id}}</div><div
+    @changeTab="changeTab"
-        @click="changeTab('record')" class="sub-list-tab">{{$t("config.terminallog.record.record")}}</div><div
+  >
-        class="sub-list-tab sub-list-tab-active">{{$t("config.terminallog.cmd.cmd")}}</div>
+    <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
-      </div>
+    <template v-slot>
-    </div>
+      <div class="record-container">
-    <div class="record-container">
+        <div class="record-container--record-tip">
-      <div class="record-container--record-tip">
+          <span class="record--title">{{$t('config.terminallog.cmd.legendTip')}}:</span>
-        <span class="record--title">{{$t('config.terminallog.cmd.legendTip')}}:</span>
+          <span class="detail--cmd"><span class="detail--cmd__red"><i class="nz-icon nz-icon-jinggao" style="color: #f35844; margin-right: 8px"></i>{{$t("config.terminallog.cmd.dangerTip")}}</span></span>
-        <span class="detail--cmd"><span class="detail--cmd__red"><i class="nz-icon nz-icon-jinggao" style="color: #f35844; margin-right: 8px"></i>{{$t("config.terminallog.cmd.dangerTip")}}</span></span>
+        </div>
-      </div>
+        <div class="record-container--record">
-      <div class="record-container--record">
+          <div class="record--title">{{$t('config.terminallog.cmd.history')}}</div>
-        <div class="record--title">{{$t('config.terminallog.cmd.history')}}</div>
+          <div class="record--list">
-        <div class="record--list">
+            <template v-for="record in records">
-          <template v-for="record in records">
+              <template v-for="(item, index) in record.list">
-            <template v-for="(item, index) in record.list">
+                <div :key="index" class="detail--time"><span>{{calcTime(item.time)}}</span></div>
-              <div :key="index" class="detail--time"><span>{{calcTime(item.time)}}</span></div>
+                <div :key="index" class="detail--cmd"><span :class="matchBgColor(item.cmd)">{{item.cmd}}</span></div>
-              <div :key="index" class="detail--cmd"><span :class="matchBgColor(item.cmd)">{{item.cmd}}</span></div>
+              </template>
             </template>
-          </template>
+          </div>
-        </div>
+          <div :style="{visibility: hasNext ? 'visible' : 'hidden'}" class="record--more">
-        <div :style="{visibility: hasNext ? 'visible' : 'hidden'}" class="record--more">
+            <span class="more-btn" @click="loadMore"><i class="nz-icon nz-icon-drop-down"></i></span>
-          <span @click="loadMore" class="more-btn"><i class="nz-icon nz-icon-drop-down"></i></span>
+          </div>
         </div>
       </div>
-    </div>
+    </template>
-  </div>
+  </nz-bottom-data-list>
 </template>
 
 <script>
+import dataListMixin from '@/components/common/mixin/dataList'
+import subDataListMixin from '@/components/common/mixin/subDataList'
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+
 export default {
   name: 'terminalLogRecordTab',
+  mixins: [dataListMixin, subDataListMixin],
   components: {
-  },
+    nzBottomDataList
-  props: {
-    obj: Object // 关联的实体对象
   },
   computed: {
     calcTime () {

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

@@ -1,27 +1,39 @@
 <template>
-  <div class="replay-tab" ref="replayTab">
+  <nz-bottom-data-list
-    <div class="sub-top-tools">
+    :layout="[]"
-      <div class="sub-list-tabs">
+    :tabs="tabs"
-        <div class="sub-list-tab-title">ID：{{obj.id}}</div>
+    @changeTab="changeTab"
-        <div class="sub-list-tab sub-list-tab-active">{{$t("config.terminallog.monitor.monitor")}}</div>
+  >
+    <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
+    <template v-slot>
+      <div ref="replayTab" class="replay-tab">
+        <div class="sub-top-tools">
+          <div class="sub-list-tabs">
+            <div class="sub-list-tab-title">ID：{{obj.id}}</div>
+            <div class="sub-list-tab sub-list-tab-active">{{$t("config.terminallog.monitor.monitor")}}</div>
+          </div>
+        </div>
+        <div class="replay-container">
+          <div ref="recordConsole" class="record-console">
+            <div :id="obj.uuid" class="record-terminal"></div>
+          </div>
+        </div>
       </div>
-    </div>
+    </template>
-    <div class="replay-container">
+  </nz-bottom-data-list>
-      <div class="record-console" ref="recordConsole">
-        <div :id="obj.uuid" class="record-terminal"></div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
 import Terminal from '../../js/Xterm'
 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'
 export default {
   name: 'terminalLogReplayTab',
-  props: {
+  mixins: [dataListMixin, subDataListMixin],
-    obj: Object // 关联的实体对象
+  components: {
+    nzBottomDataList
   },
   data () {
     return {

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

@@ -1,42 +1,46 @@
 <template>
-  <div class="replay-tab" ref="replayTab">
+  <nz-bottom-data-list
-    <div class="sub-top-tools">
+    :layout="[]"
-      <div class="sub-list-tabs">
+    :tabs="tabs"
-        <div class="sub-list-tab-title">ID：{{obj.id}}</div><div
+    @changeTab="changeTab"
-        class="sub-list-tab sub-list-tab-active">{{$t("config.terminallog.record.record")}}</div><div
+  >
-        @click="changeTab('cmd')" class="sub-list-tab">{{$t("config.terminallog.cmd.cmd")}}</div>
+    <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
-      </div>
+    <template v-slot>
-    </div>
+      <div class="replay-container">
-    <div class="replay-container">
+        <div class="replay-operate">
-      <div class="replay-operate">
+          <div>
-        <div>
+            <button v-show="isPlaying" id="terminal-replay-pause" :title="$t('config.terminallog.record.pause')" class="nz-btn nz-btn-style-light nz-btn-size-large" @click="pause"><i class="nz-icon nz-icon-suspend"></i></button>
-          <button :title="$t('config.terminallog.record.pause')" @click="pause" class="nz-btn nz-btn-style-light nz-btn-size-large" id="terminal-replay-pause" v-show="isPlaying"><i class="nz-icon nz-icon-suspend"></i></button>
+            <button v-show="isFinish || !isPlaying" id="terminal-replay-play" :title="$t('config.terminallog.record.play')" class="nz-btn nz-btn-style-light nz-btn-size-large" @click="play"><i class="nz-icon nz-icon-play"></i></button>
-          <button :title="$t('config.terminallog.record.play')" @click="play" class="nz-btn nz-btn-style-light nz-btn-size-large" id="terminal-replay-play" v-show="isFinish || !isPlaying"><i class="nz-icon nz-icon-play"></i></button>
+            <button id="terminal-replay-restart" :title="$t('config.terminallog.record.replay')" class="nz-btn nz-btn-style-light nz-btn-size-large" @click="restart"><i class="nz-icon nz-icon-replay"></i></button>
-          <button :title="$t('config.terminallog.record.replay')" @click="restart" class="nz-btn nz-btn-style-light nz-btn-size-large" id="terminal-replay-restart"><i class="nz-icon nz-icon-replay"></i></button>
+            <button id="terminal-replay-speed-change" class="nz-btn nz-btn-style-light nz-btn-size-large" @click="speedChange"><i class="nz-icon nz-icon-fast-forward"></i>&nbsp;{{speedTable[speedOffset].name}}</button>
-          <button @click="speedChange" class="nz-btn nz-btn-style-light nz-btn-size-large" id="terminal-replay-speed-change"><i class="nz-icon nz-icon-fast-forward"></i>&nbsp;{{speedTable[speedOffset].name}}</button>
+            <el-checkbox id="terminal-replay-skip" v-model="needSkip" class="operate-skip">{{$t("config.terminallog.record.skipTip")}}</el-checkbox>
-          <el-checkbox class="operate-skip" id="terminal-replay-skip" v-model="needSkip">{{$t("config.terminallog.record.skipTip")}}</el-checkbox>
+            <el-tag class="time-box" color="#23bf9a" effect="dark" size="medium">{{parseCurrentTime}}&nbsp;s</el-tag>
-          <el-tag class="time-box" color="#23bf9a" effect="dark" size="medium">{{parseCurrentTime}}&nbsp;s</el-tag>
+          </div>
+          <div class="terminal-replay-progress" @click="jumpProgress">
+            <el-progress ref="terminalProgress" :percentage="progress" :show-text="false" class="terminal-replay-progress-bar"></el-progress>
+            <div id="progressController" ref="progressController" class="progress-controller" @mousedown="startDragging"></div>
+          </div>
         </div>
-        <div @click="jumpProgress" class="terminal-replay-progress">
+        <div ref="recordConsole" class="record-console">
-          <el-progress :percentage="progress" :show-text="false" class="terminal-replay-progress-bar" ref="terminalProgress"></el-progress>
+          <div :id="obj.uuid" class="record-terminal"></div>
-          <div @mousedown="startDragging" class="progress-controller" id="progressController" ref="progressController"></div>
         </div>
       </div>
-      <div class="record-console" ref="recordConsole">
+    </template>
-        <div :id="obj.uuid" class="record-terminal"></div>
+  </nz-bottom-data-list>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
 import Terminal from '../../js/Xterm'
 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'
 
 export default {
   name: 'terminalLogReplayTab',
-  props: {
+  mixins: [dataListMixin, subDataListMixin],
-    obj: Object // 关联的实体对象
+  components: {
+    nzBottomDataList
   },
   data () {
     return {

nezha-fronted/src/components/common/chartUnit.vue

@@ -1,18 +1,24 @@
 <template>
-    <div style="display: flex;justify-content: flex-start">
+  <div class="top-tool-btn-group">
-      <button class="input-prepend nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="openSeletor" :id="id+'-open-select'">{{$t('dashboard.panel.chartForm.unit')}}</button>
+    <button
-      <el-cascader placeholder="" popper-class="no-style-class unit-pop-class" size="mini"
+      :id="id+'-open-select'"
-                   :id="id+'-unit-input'"
+      class="top-tool-btn top-tool-btn--text"
-                   :options="chartUnits"
+      style="border-radius: 2px 0 0 2px; border-right: none;"
-                   class="chart-unit"
+      @click="openSeletor"
-                   :props="{ expandTrigger: 'click' ,emitPath:false}"
+    >{{$t('dashboard.panel.chartForm.unit')}}</button>
-                   :show-all-levels="false"
+    <el-cascader :id="id+'-unit-input'" ref="unitSelector" v-model="unit"
-                   v-model="unit"
+                 :options="chartUnits"
-                   @change="unitSelected"
+                 :props="{ expandTrigger: 'click' ,emitPath:false}"
-                   ref="unitSelector"
+                 :show-all-levels="false"
-      >
+                 class="chart-unit"
-      </el-cascader>
+                 placeholder=""
-    </div>
+                 popper-class="prevent-clickoutside unit-pop-class"
+                 size="small"
+                 style="border-radius: 0 2px 2px 0;"
+                 @change="unitSelected"
+    >
+    </el-cascader>
+  </div>
 </template>
 
 <script>
@@ -49,11 +55,15 @@ export default {
 }
 </script>
 
-<style >
+<style lang="scss">
+
   .chart-unit{
     width: 100px;
     margin: 0 20px 0 0;
   }
+  .chart-unit.el-cascader .el-input.is-focus .el-input__inner {
+    border-color: #FBCEA4;
+  }
   .chart-unit .el-input__suffix-inner {
     color: #aaa;
   }

nezha-fronted/src/components/common/deleteButton.vue

@@ -56,9 +56,6 @@ export default {
     opacity: 0.7;
     border-radius: 2px;
   }
-  .delete-button .nz-btn-disabled .nz-icon-delete{
-    opacity: 0.5;
-  }
   .delete-button-light.delete-button{
     border-radius: 2px;
   }

nezha-fronted/src/components/common/js/constants.js

@@ -156,7 +156,8 @@ export const alertMessage = {
   ],
   states: [
     { value: '1', label: i18n.t('alert.list.pending') },
-    { value: '2', label: i18n.t('alert.list.expired') }
+    { value: '2', label: i18n.t('overall.silence') },
+    { value: '3', label: i18n.t('alert.list.expired') }
   ]
 }
 

nezha-fronted/src/components/common/labelFilter/clickSearch.vue

@@ -101,7 +101,6 @@ export default {
       immediate: true,
       deep: true,
       handler (n) {
-        console.log(n)
         this.$emit('reload', n)
       }
     }

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

@@ -101,7 +101,8 @@ const cn = {
     },
     SyncSave: '保存同时更新 Assets',
     copySuccess: '复制成功',
-    moreOption: '更多选项'
+    moreOption: '更多选项',
+    silence: '静默'
   },
   setup: {
     step0: '欢迎',

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

@@ -108,7 +108,8 @@ const en = {
     copySuccess: 'Copy success',
     parent: 'Parent',
     dc: 'Data center',
-    labels: 'Labels'
+    labels: 'Labels',
+    silence: 'Silence'
   },
   pageSize: '/page',
   setup: {

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

@@ -17,10 +17,10 @@ export default {
       /* 工具参数 */
       tools: {
         loading: false, // 是否显示table加载动画
-        customTableTitle: [] // 自定义列工具的数据
+        customTableTitle: [], // 自定义列工具的数据
+        extraTableTitle: [] // 特殊页面（asset）额外的列
       },
       mainTableHeight: this.$tableHeight.normal, // 主列表table高度
-      searchTableHeight: this.$tableHeight.search, // 主列表table高度
       batchDeleteObjs: [],
       object: {},
 
@@ -188,6 +188,14 @@ export default {
         vm.tools.showTopBtn = wrap.scrollTop > 50
         vm.tools.tableHover = wrap.scrollTop > 50
       }, 100))
+    },
+    showClickSearch () {
+      const index = this.dataListLayout.indexOf('clickSearch')
+      if (index > -1) {
+        this.dataListLayout.splice(index, 1)
+      } else {
+        this.dataListLayout.push('clickSearch')
+      }
     }
   },
   watch: {
@@ -217,11 +225,9 @@ export default {
     if (pageSize && pageSize !== 'undefined') {
       this.pageObj.pageSize = pageSize
     }
-    console.log(this.$refs.dataTable)
     this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId)
       ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId))
       : this.$refs.dataTable.tableTitle
-    console.log(this.fromBottom)
     if (!this.fromBottom) {
       this.getTableData()
     }

nezha-fronted/src/components/common/nzTransfer.vue

@@ -220,7 +220,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import '@/assets/css/common/tableCommon.scss';
 .nz-transfer {
   display: flex;
   justify-content: space-between;

nezha-fronted/src/components/common/pagination.vue

@@ -158,9 +158,6 @@ export default {
 </script>
 
 <style lang="scss">
-  .el-pagination__total {
-    float: left;
-  }
   .pagination {
     padding-top: 8px;
     text-align: center;

nezha-fronted/src/components/common/pickTime.vue

@@ -4,9 +4,9 @@
     <multipleTime ref="multipleTime" v-if="showMultiple" :stepSearchTime="searchTime" @change="dateChange(searchTime)" class="multiple-time"/>
     <chart-unit v-model="unit" v-if="useChartUnit"></chart-unit>
     <div v-show="useRefresh" class="top-tool-btn-group margin-r-10">
-      <button :id="id+'-refresh'" class="top-tool-btn" @click="refreshDataFunc">
+      <button :id="id+'-refresh'" class="top-tool-btn top-tool-btn--text" @click="refreshDataFunc">
         <i class="global-active-color nz-icon nz-icon-refresh" style="font-size: 14px"></i>&nbsp;
-        <span class="nz-btn nz-btn-text" ><slot name="added-text"></slot></span>
+        <span><slot name="added-text"></slot></span>
       </button>
       <button id="browser-go" class="top-tool-btn top-tool-btn--dropdown" @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)">
         <span class="select-refresh-time-label" v-if="interval !== -1">{{interLabel}}</span>

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -4,11 +4,11 @@
 </style>
 <template>
   <div class="project-box list-page" v-loading="topologyLoading" v-has="'topo_list'">
-    <!--project主要信息-->
+    <div class="main-list">
-    <div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
+      <div class="main-container">
-      <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px;width: calc(100% - 20px);position: absolute;top: 9px;padding-right: 20px">
+        <div v-if="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px;width: calc(100% - 20px);position: absolute;top: 9px;padding-right: 20px">
-        <!--工具栏-->
+          <!--工具栏-->
-        <span class="project-topology-tool">
+          <span class="project-topology-tool">
           <el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'">
             <span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i
               class="nz-icon nz-icon-arrow-down"></i></span>
@@ -93,7 +93,7 @@
           </topology-top-tool>
 
         </span>
-        <span class="float-right">
+          <span class="float-right">
           <button @click="previewTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
                   style="margin-right: 20px"
           >
@@ -109,31 +109,48 @@
              {{$t('project.topology.exit')}}
            </button>
          </span>
-      </div>
+        </div>
-      <div style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px;padding-top: 10px" v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right top-tools">
+        <div v-if="!editTopologyFlag&&!fromOverView" class="top-tools">
-        <div>{{topologyInfo.name}}</div>
+          <div>{{topologyInfo.name}}</div>
-        <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
+          <div v-if="!editTopologyFlag&&!fromPrev&&!fromOverView" class="top-tool-right">
-<button @click="changeScreen" class="top-tool-btn float-right"
+            <pick-time
-        style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button"
+              v-show="!editTopologyFlag"
->
+              ref="pickTime"
-                  <i class="nz-icon" :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'"></i>
+              v-model="searchTime"
-        </button>
+              :refresh-data-func="dateChange"
-        <button @click="editTopology" class="top-tool-btn float-right"
+              :showTimePicker="false"
-                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button" v-has="'project_topo_update'"
+              :use-chart-unit="false"
-        >
+              class="pickTime margin-r-10">
-                  <i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
+            </pick-time>
-        </button>
+            <button v-has="'project_topo_update'" class="top-tool-btn margin-r-10" type="button" @click="editTopology">
-          <pick-time
+              <i :title="$t('project.topology.edit')" class="nz-icon nz-icon-edit"></i>
-            v-show="!editTopologyFlag"
+            </button>
-            class="float-right pickTime top-tool-btn-group"
+            <button class="top-tool-btn" type="button" @click="changeScreen">
-            :refresh-data-func="dateChange"
+              <i :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'" class="nz-icon"></i>
-            v-model="searchTime"
+            </button>
-            :use-chart-unit="false"
+          </div>
-            :showTimePicker="false"
+        </div>
-            ref="pickTime">
+        <div class="nz-table2">
-          </pick-time>
+          <!--悬浮network部分-->
-
+          <div class="network-info">
-      </span>
+            <div v-if="popDataShow.main">
+              <popDataMain :moduleId="moduleId" :projectId="projectInfo.id"></popDataMain>
+            </div>
+            <div v-if="popDataShow.info">
+              <popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
+            </div>
+          </div>
+          <!--endpoint-->
+          <transition name="right-box">
+            <endpointTable v-if="popDataShow.endpoint" :moduleId="moduleId" :projectId="projectInfo.id"
+                           @close="popDataShowUpdate('',true)">endpoint
+            </endpointTable>
+          </transition>
+          <div v-if="!fromOverView&&!editTopologyFlag&&!fromPrev" class="right-bottom-zoom">
+            <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
+            <div class="zoom-option" @click="zoomMap(-0.25)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
+          </div>
+        </div>
       </div>
     </div>
     <div :class="['page',fromOverView?'overview-page':'']" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
@@ -216,21 +233,6 @@
     <!--<li>3.选中元素 按下Delete键或者Backspace可以删除元素</li>-->
     <!--</ul>-->
     <!--</div>-->
-    <!--悬浮network部分-->
-    <div class="network-info">
-      <div v-if="popDataShow.main">
-        <popDataMain :moduleId="moduleId" :projectId="projectInfo.id"></popDataMain>
-      </div>
-      <div v-if="popDataShow.info">
-        <popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
-      </div>
-    </div>
-    <!--endpoint-->
-    <transition name="right-box">
-      <endpointTable v-if="popDataShow.endpoint" :moduleId="moduleId" :projectId="projectInfo.id"
-                     @close="popDataShowUpdate('',true)">endpoint
-      </endpointTable>
-    </transition>
     <!--asset-->
     <transition name="right-box">
       <assetTable v-if="popDataShow.asset" :moduleId="moduleId" :projectId="projectInfo.id"
@@ -322,10 +324,6 @@
       </div>
 
     </el-dialog>
-    <div class="right-bottom-zoom" v-if="!fromOverView&&!editTopologyFlag&&!fromPrev">
-      <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
-      <div class="zoom-option" @click="zoomMap(-0.25)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
-    </div>
   </div>
 </template>
 
@@ -2470,8 +2468,6 @@ export default {
 
   .project-box {
     width: 100%;
-    height: calc(100% - 20px);
-    margin-top: 10px;
     position: relative;
     border-radius: 2px;
     overflow: hidden;

nezha-fronted/src/components/common/project/topologyPrev.vue

@@ -113,12 +113,12 @@
       <div style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px;padding-top: 10px" v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right top-tools">
         <div>{{topologyInfo.name}}</div>
         <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
-<button @click="changeScreen" class="top-tool-btn float-right"
+<button class="top-tool-btn" @click="changeScreen"
         style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button"
 >
                   <i class="nz-icon" :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'"></i>
         </button>
-        <button @click="editTopology" class="top-tool-btn float-right"
+        <button class="top-tool-btn" @click="editTopology"
                 style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button" v-has="'project_topo_update'"
         >
                   <i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>

nezha-fronted/src/components/common/searchInput.vue

@@ -501,7 +501,7 @@ export default {
       }
     },
     getDcData () {
-      this.$get('idc', { pageNo: 1, pageSize: -1 }).then(response => {
+      this.$get('dc', { pageNo: 1, pageSize: -1 }).then(response => {
         if (response.code === 200) {
           this.dcSelect = response.data.list
           this.dcSelect.forEach((item, index) => {
@@ -772,7 +772,7 @@ export default {
             objectInfo[val.label] = val.val
           }
         }
-        console.log('search obj', objectInfo)
+        // console.log('search obj', objectInfo)
       })
       this.getHeight()
       // 搜索完成后存储在本地历史记录中
@@ -1329,13 +1329,13 @@ export default {
       if (this.$route.path == '/Objects_Objects') {
         this.schelistget()
       }
-      if (this.$route.path == '/promServer') {
+      if (this.$route.path == '/agent') {
         this.getDcData()
       }
-      if (this.$route.path == '/project' || this.$route.path == '/alertList' || this.$route.path == '/alertConfig') {
+      if (this.$route.path == '/monitor/project' || this.$route.path == '/alertMessage' || this.$route.path == '/alertRule') {
         this.getAssetData()
       }
-      if (this.$route.path == '/alertList') {
+      if (this.$route.path == '/alertMessage') {
         this.getProjectData()
         this.getModuleData()
       }

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

@@ -36,13 +36,13 @@
         <template v-if="item.prop === 'type'">{{scope.row.type ? scope.row.type.name : '-'}}</template>
         <template v-else-if="item.prop === 'state'">{{scope.row.state ? scope.row.state.name : '-'}}</template>
         <template v-else-if="item.prop === 'endpointNum'">
-          <span style="cursor: pointer" @click="$emit('showBottomBox', 'endpointTab', scope.row)"><i class="nz-icon nz-icon-endpoint" style="color: #969dea; padding-right: 8px;"></i><span>{{scope.row.endpointNum ? scope.row.endpointNum : 0}}</span></span>
+          <span style="cursor: pointer" @click="$emit('showBottomBox', 'endpointTab', scope.row)"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> <span>{{scope.row.endpointNum ? scope.row.endpointNum : 0}}</span></span>
 <!--          <div :class="messageStyle(item, scope.row)" @mouseenter="showTableTooltip(`${$t('asset.down')} / ${$t('asset.suspended')} / ${$t('asset.total')}`, true, $event)" @mouseleave="hideTableTooltip">
             <span class="link" style="padding: 2px 8px" @click="showEndpoint(scope.row)">{{scope.row.endpointDownNum}}/{{scope.row.endpointSuspendedNum}}/{{scope.row.endpointNum}}</span>
           </div>-->
         </template>
         <template v-else-if="item.prop === 'alertNum'">
-          <span style="cursor: pointer" @click="$emit('showBottomBox', 'alertMessageTab', scope.row)"><i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert" style="padding-right: 8px;"></i><span>{{scope.row.alertNum ? scope.row.alertNum : 0}}</span></span>
+          <span style="cursor: pointer" @click="$emit('showBottomBox', 'alertMessageTab', scope.row)"><i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i> <span>{{scope.row.alertNum ? scope.row.alertNum : 0}}</span></span>
         </template>
         <template v-else-if="item.prop === 'dc'">{{scope.row.dc ? scope.row.dc.name : '-'}}</template>
         <template v-else-if="item.prop === 'cabinet'">

nezha-fronted/src/components/common/table/nzDataList.vue

@@ -10,19 +10,19 @@
             <slot name="top-tool-left"></slot>
           </div>
           <div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-right">
-            <div v-if="layout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20">
+            <div v-if="showLayout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20">
               <search-input ref="searchInput" :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-input>
             </div>
             <slot name="top-tool-right"></slot>
-            <button v-if="layout.indexOf('elementSet') > -1"  class="top-tool-btn table-column-setting"
+            <button v-if="showLayout.indexOf('elementSet') > -1"  class="top-tool-btn table-column-setting"
                     type="button" @click="tools.showCustomTableTitle = true">
               <i class="nz-icon-gear nz-icon"></i>
             </button>
           </div>
           <!-- 顶部分页组件，当打开底部上滑框时出现 -->
-          <!-- <div v-if="layout.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>-->
+          <!-- <div v-if="showLayout.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>-->
         </div>
-        <div v-if="hasSearch" class="search-box">
+        <div v-if="showLayout.indexOf('clickSearch') > -1" class="search-box">
           <slot name="search"></slot>
         </div>
         <div v-show="bottomBox.mainResizeShow" class="nz-table2">
@@ -87,10 +87,6 @@ export default {
     },
     searchMsg: {
       type: Object
-    },
-    hasSearch: {
-      type: Boolean,
-      default: false
     }
   },
   data () {
@@ -109,7 +105,8 @@ export default {
         toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
         tableHover: false, // 控制滚动条和top按钮同时出现
         showCustomTableTitle: false // 自定义列弹框是否显示
-      }
+      },
+      showLayout: []
     }
   },
   methods: {
@@ -145,10 +142,14 @@ export default {
     'bottomBox.showSubList': function (n) {
       const vm = this
       bottomBoxWindow.showSubListWatch(vm, n)
+    },
+    layout: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.showLayout = [...n]
+      }
     }
   }
 }
 </script>
-<style lang="scss">
-@import '@/assets/css/common/tableCommon.scss';
-</style>

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

@@ -66,7 +66,7 @@
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
         <template v-if="scope.row.status == 0">
-          <button :title="$t('config.terminallog.monitor.monitor')" class="table-operation-item" @click="$refs.dataList.showBottomBox('monitor', scope.row)"><i class="nz-icon nz-icon-JC"></i></button>
+          <button :title="$t('config.terminallog.monitor.monitor')" class="table-operation-item" @click="$refs.dataList.showBottomBox('monitorTab', scope.row)"><i class="nz-icon nz-icon-JC"></i></button>
           <el-dropdown size="medium" trigger="hover" @command="tableOperation">
             <div class="table-operation-item table-operation-item--more">
               <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
@@ -77,13 +77,13 @@
           </el-dropdown>
         </template>
         <template v-else>
-          <button class="table-operation-item" @click="showBottomBox('cmd', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
+          <button class="table-operation-item" @click="showBottomBox('cmdTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
           <el-dropdown size="medium" trigger="hover" @command="tableOperation">
             <div class="table-operation-item table-operation-item--more">
               <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
             </div>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item :command="['record', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('config.terminallog.record.record')}}</span></el-dropdown-item>
+              <el-dropdown-item :command="['recordTab', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('config.terminallog.record.record')}}</span></el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </template>

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

@@ -9,7 +9,9 @@
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.alertMessage"
       :layout="['searchInput', 'elementSet']"
-      :search-msg="searchMsg">
+      :search-msg="searchMsg"
+      @search="search"
+    >
       <template v-slot:top-tool-right>
         <pick-time v-model="searchTime" :default-pick="12" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
         <button id="roles-add" v-has="'alertMessage_view'" :title="$t('overall.exportExcelLower')" class="top-tool-btn margin-r-10"
@@ -445,8 +447,8 @@ export default {
     },
     openDelMessageBox () {
       if (this.batchDeleteObjs.length < 1) return
-      if (this.$refs.alertMessageTable) {
+      if (this.$refs.dataTable) {
-        this.$refs.alertMessageTable.toDeleteMessage(false)
+        this.$refs.dataTable.toDeleteMessage(false)
       }
     },
     toDeleteMessage (obj) {
@@ -471,14 +473,6 @@ export default {
         }
       })
     },
-    selectChange (s) {
-      const ids = []
-      this.deleteBox.ids = ''
-      s.forEach(item => {
-        ids.push(item.id)
-      })
-      this.deleteBox.ids = ids.join(',')
-    },
     showExportDialog () {
       this.importBox.show = true
     },
@@ -561,24 +555,6 @@ export default {
         reader.readAsText(error.response.data)
       })
     },
-    showTagDetail (data, key) {
-      let open = false
-      if (key == 'asset' || key == 'project' || key == 'module' || key == 'endpoint' || key == 'datacenter') {
-        open = true
-      }
-      if (open) {
-        const labelList = []
-        const detailList = []
-        for (const item in data) {
-          if (item == 'asset' || item == 'project' || item == 'module' || item == 'endpoint' || item == 'dc') {
-            labelList.push(item)
-            detailList.push(data[item])
-          }
-        }
-        this.bottomBox.showSubList = true
-        this.tabList = labelList
-      }
-    },
     search (searchObj) {
       let orderBy = ''
       if (this.searchLabel.orderBy) {
@@ -598,22 +574,11 @@ export default {
       if (orderBy) {
         this.$set(this.searchLabel, 'orderBy', orderBy)
       }
-      this.$refs.alertMessageTable.$refs.alertListTable.bodyWrapper.scrollTop = 0
+      if (this.$refs.dataTable) {
+        this.$refs.dataTable.$refs.dataTable.bodyWrapper.scrollTop = 0
+      }
       this.getTableData()
     },
-    fillProject (module) {
-      this.$get('project', { id: module.projectId }).then(response => {
-        if (response.code == 200) {
-          module.project = response.data.list[0]
-        }
-      })
-    },
-    closeViews () {
-      this.$refs.alertConfigBox.show(false, false)
-      this.$refs.projectBox.show(false, false)
-      this.$refs.moduleBox.show(false, false)
-      this.viewAssetState = false
-    },
     // 数据排序
     tableDataSort (item) {
       let orderBy = ''

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

@@ -6,7 +6,9 @@
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.alertRule"
       :layout="['searchInput', 'elementSet']"
-      :search-msg="searchMsg">
+      :search-msg="searchMsg"
+      @search="search"
+    >
       <template v-slot:top-tool-right>
         <export-excel
           id="alert-rule"

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

@@ -6,7 +6,9 @@
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.alertSilence"
       :layout="['searchInput', 'elementSet']"
-      :search-msg="searchMsg">
+      :search-msg="searchMsg"
+      @search="search"
+    >
       <template v-slot:top-tool-right>
         <button id="roles-add" v-has="'alertSilence_add'" :title="$t('overall.create')" class="top-tool-btn margin-r-10"
                 type="button" @click="add">

nezha-fronted/src/components/page/asset/asset.vue

@@ -4,10 +4,15 @@
       ref="dataList"
       :api="url"
       :custom-table-title.sync="tools.customTableTitle"
-      :has-search="true"
+      :from="fromRoute.asset"
-      :layout="['searchInput', 'elementSet', 'clickSearch']"
+      :layout="dataListLayout"
-      :search-msg="searchMsg">
+      :search-msg="searchMsg"
+      @search="search"
+    >
       <template v-slot:top-tool-right>
+        <button id="asset-filter" :class="{ 'is-focus': dataListLayout.indexOf('clickSearch') > -1 }" class="top-tool-btn margin-r-10" @click.stop="showClickSearch">
+          <i class="nz-icon nz-icon-funnel"></i>
+        </button>
         <export-excel
           id="asset-list"
           :params="searchLabel"
@@ -37,7 +42,7 @@
           v-loading="slotProps.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
-          :height="assetTableHeight"
+          :height="dataListLayout.indexOf('clickSearch') > -1 ? assetTableHeight : mainTableHeight"
           :table-data="tableData"
           @cli="cli"
           @del="del"
@@ -106,6 +111,7 @@ export default {
       rightBox: {
         batchShow: false
       },
+      dataListLayout: ['searchInput', 'elementSet'],
       assetTableHeight: `calc(100% - ${48 + 201 + 20}px)`,
       blankObject: {
         id: '',
@@ -333,10 +339,14 @@ export default {
     },
     getSearchableMetaData () {
       return new Promise(resolve => {
-        this.$get('asset/field/meta', { pageSize: -1, search: 1 }).then(response => {
+        this.$get('asset/field/meta', { pageSize: -1 }).then(response => {
           if (response.code === 200) {
             const data = []
-            response.data.list.forEach(m => {
+            const searchableData = response.data.list.filter(d => d.search === 1)
+            const showData = response.data.list.filter(d => d.display === 1).map(item => {
+              return { label: item.name, prop: 'Label', show: false, allowed: true, type: 'label' }
+            })
+            searchableData.forEach(m => {
               if (m.param) {
                 const param = JSON.parse(m.param)
                 if (param.items) {
@@ -345,6 +355,19 @@ export default {
               }
             })
             this.titleSearchList.assetLabel.children = data
+            setTimeout(() => {
+              const title = this.tools.customTableTitle
+              const originalTitle = title.slice(0, this.$refs.dataTable.tableTitle.length) // 原title
+              const oldLabelTitle = title.slice(this.$refs.dataTable.tableTitle.length, title.length) // 旧labelTitle
+
+              const newLabel = showData.filter(item => { return !oldLabelTitle.find(t => { return item.label === t.label }) })
+              const keepLabel = oldLabelTitle.filter(item => showData.find(t => item.label === t.label))
+
+              let result = originalTitle.concat([{ label: 'Label', show: false, NotSet: true, type: 'title', prop: 'table-label' }])
+
+              result = result.concat(keepLabel).concat(newLabel)
+              this.tools.customTableTitle = JSON.parse(JSON.stringify(result))
+            }, 200)
           }
           resolve()
         })

nezha-fronted/src/components/page/config/account.vue

@@ -1,502 +0,0 @@
-<style scoped>
-  .account {
-    height: 100%;
-  }
-  .account .account-role-item{
-    background-color: #409eff;
-    border: 1px solid #409eff;
-    display: inline-block;
-    height: 20px;
-    line-height: 18px;
-    padding: 0 5px;
-    color: white;
-    border-radius: 4px;
-    box-sizing: border-box;
-  }
-</style>
-<template>
-  <div class="account">
-    <!-- 主页面 -->
-    <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
-      <!-- 顶部工具栏 -->
-      <div class="main-modal"></div>
-      <div class="top-tools" v-show="bottomBox.mainResizeShow">
-        <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
-          <div class="top-tool-search">
-            <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
-          </div>
-          <button :title="$t('overall.createAccount')" @click="add" type="button" v-has="'account_toAdd'"
-                  class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="account-add">
-            <i class="nz-icon-create-square nz-icon"></i>
-          </button>
-          <delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?userIds='+arr.map(t=>t.userId).join(',')}" @after="getTableData" api="sys/user/delete" v-has="'account_delete'" @before="delFlag=true" id="account-list-batch-delete"></delete-button>
-        </div>
-        <!-- 顶部分页组件，当打开底部上滑框时出现 -->
-        <div class="pagination-top pagination-top-hide display-none"></div>
-      </div>
-      <!-- 自定义table列 -->
-      <transition name="el-zoom-in-top">
-        <element-set
-          id="account-list"
-          v-if="tools.showCustomTableTitle"
-          @close="tools.showCustomTableTitle = false"
-          :custom-table-title.sync="tools.customTableTitle"
-          :original-table-title="tableTitle"
-          ref="customTableTitle"
-        ></element-set>
-      </transition>
-      <el-table
-        id="account-list-table"
-        class="nz-table"
-        :data="tableData"
-        border
-        v-show="bottomBox.mainResizeShow"
-        ref="accountTable"
-        :height="mainTableHeight"
-        v-loading="tools.loading"
-        style="width: 100%;"
-        @sort-change="tableDataSort"
-        @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
-      >
-        <el-table-column
-          :resizable="false"
-          type="selection"
-          width="40"
-          align="center">
-        </el-table-column>
-        <el-table-column
-          :resizable="true"
-          v-for="(item, index) in tools.customTableTitle"
-          v-if="item.show"
-          :key="`col-${index}`"
-          :fixed="item.fixed"
-          :label="item.label"
-          :prop="item.prop"
-          :sort-orders="['ascending', 'descending']"
-        >
-          <template slot="header">
-            <span v-if="item.type == 'tag'" class="tag-header" :title="item.label"><span class="tag-value">{{item.label}}</span><span style="color:orange;">&nbsp;[Notification]</span></span>
-            <span v-else><span>{{item.label}}</span></span>
-          </template>
-          <template slot-scope="scope" :column="item">
-            <div v-if="item.prop == 'option'" class="content-right-options">
-              <span :id="'account-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'account_toEdit'"><i class="nz-icon nz-icon-edit"></i></span>
-              &nbsp;
-              <span :id="'account-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'account_delete'"><i class="nz-icon nz-icon-delete" :class="{'gray-filter':(scope.row.username==='admin' || scope.row.userId==1 )}"></i></span>
-            </div>
-            <template v-if="item.prop == 'roles'">
-              <template v-if="scope.row[item.prop]">
-                <template v-for="(role, index) in scope.row[item.prop]">
-                  <span v-if="role" :key="index" class="account-role-item">{{role.i18n?$t(role.i18n):role.name}}</span>
-                </template>
-              </template>
-              <template v-else>
-                <span>-</span>
-              </template>
-            </template>
-            <template v-else-if="item.prop == 'status'">
-                <el-switch
-                  v-model="scope.row.status"
-                  active-value="1"
-                  inactive-value="0"
-                  active-color="#ee9d3f"
-                  :disabled="isCurrentUser(scope.row.username) || !hasButton('account_toEdit') || !hasButton('account_toAdd') || (scope.row.username==='admin' && scope.row.userId==1)"
-                  @change="(val)=>{statusChange(scope.row)}">
-                </el-switch>
-            </template>
-            <span v-else-if="item.prop == 'tags'">{{filterTags(item, scope)}}</span>
-            <span v-else-if="item.prop == 'createTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
-            <span v-else>{{scope.row[item.prop]}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column width="28" fixed="right">
-          <template slot="header" :resizable="false">
-            <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
-              <i class="nz-icon nz-icon-gear"></i>
-            </span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow" id="account-list-totop"><i class="nz-icon nz-icon-top"></i></button>
-      <div class="pagination-bottom" v-show="!bottomBox.showSubList">
-        <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      </div>
-    </div>
-    <!-- 底部上滑框 -->
-    <transition name="el-zoom-in-bottom">
-      <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.user" :is-full-screen="bottomBox.isFullScreen" :from="'account'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.userDetail"
-                  @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
-    </transition>
-    <transition name="right-box">
-      <account-box v-if="rightBox.show" :user="user" :roles="roles" @close="closeRightBox"></account-box>
-    </transition>
-  </div>
-</template>
-<script>
-import deleteButton from '../../common/deleteButton'
-import accountBox from '../../common/rightBox/userBox'
-import bus from '../../../libs/bus'
-
-export default {
-  name: 'account',
-  components: {
-    'account-box': accountBox,
-    'delete-button': deleteButton
-  },
-  data () {
-    return {
-      // 侧滑
-      rightBox: {
-        show: false
-      },
-      /* 二级页面相关 */
-      bottomBox: {
-        userDetail: {},
-        user: {},
-        mainResizeShow: true, // dom高度改变时是否展示|隐藏
-        subResizeShow: true,
-        isFullScreen: false, // 全屏状态
-        showSubList: false, // 是否显示二级列表
-        targetTab: '', // 显示二级列表中的哪个页签
-        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
-      },
-
-      /* 工具参数 */
-      tools: {
-        loading: false, // 是否显示table加载动画
-        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
-        tableHover: false, // 控制滚动条和top按钮同时出现
-        showTopBtn: false, // 显示To top按钮
-        showCustomTableTitle: false, // 自定义列弹框是否显示
-        customTableTitle: [] // 自定义列工具的数据
-      },
-      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
-      batchDeleteObjs: [],
-      user: {},
-
-      tableId: 'accountTable', // 需要分页的table的id，用于记录每页数量
-      blankUser: { // 空白对象
-        userId: '',
-        username: '',
-        email: '',
-        status: '1',
-        createTime: '',
-        receiver: [],
-        roleIds: 0,
-        roles: [],
-        lang: '',
-        notifications: []
-      },
-      pageObj: { // 分页对象
-        pageNo: 1,
-        pageSize: this.$CONSTANTS.defaultPageSize,
-        total: 0
-      },
-      tableTitle: [ // 原table列
-        {
-          label: 'ID',
-          prop: 'userId',
-          show: true,
-          width: 80
-        }, {
-          label: this.$t('config.account.account'),
-          prop: 'username',
-          show: true
-        }, {
-          label: this.$t('config.account.roles'),
-          prop: 'roles',
-          show: true
-        }, {
-          label: 'E-mail',
-          prop: 'email',
-          show: true
-        }, {
-          label: this.$t('config.account.createTime'),
-          prop: 'createTime',
-          show: true
-        }, {
-          label: this.$t('config.account.enable'),
-          prop: 'status',
-          show: true,
-          width: 100
-        }, {
-          label: this.$t('config.account.option'),
-          prop: 'option',
-          show: true,
-          width: 120,
-          fixed: 'right'
-        }
-      ],
-      tableData: [],
-      searchMsg: { // 给搜索框子组件传递的信息
-        zheze_none: true,
-        searchLabelList: [{
-          id: 10,
-          name: this.$t('config.account.account'),
-          type: 'input',
-          label: 'username',
-          disabled: false
-        }]
-      },
-      searchLabel: {}, // 搜索参数
-      scrollbarWrap: null,
-      delFlag: false,
-      roles: []
-    }
-  },
-  methods: {
-    // 全屏
-    fullScreen () {
-      const vm = this
-      this.$bottomBoxWindow.fullScreen(vm)
-    },
-    // 退出全屏
-    exitFullScreen () {
-      const vm = this
-      this.$bottomBoxWindow.exitFullScreen(vm)
-    },
-    // 鼠标拖动二级列表
-    listResize (e) {
-      const vm = this
-      this.$bottomBoxWindow.listResize(vm, e)
-    },
-    convertToDetail (obj) {
-      const detail = []
-      detail.push({ label: this.$t('config.account.account'), value: obj.username })
-      detail.push({ label: 'E-mail', value: obj.email })
-      const available = obj.status == 1 ? this.$t('tip.yes') : this.$t('tip.no')
-      detail.push({ label: this.$t('config.account.enable'), value: available })
-      detail.push({ label: this.$t('config.account.createTime'), value: obj.createTime })
-      return detail
-    },
-    closeRightBox (refresh) {
-      this.rightBox.show = false
-      if (refresh) {
-        this.delFlag = true
-        this.delFlag = true
-        this.getTableData()
-      }
-    },
-    edit (u) {
-      this.user = JSON.parse(JSON.stringify(u))
-      if (!this.user.userId) {
-        this.user.roleIds = this.roles.find(t => t.name == 'common').id
-      }
-      this.rightBox.show = true
-    },
-    detail (u) {
-      this.bottomBox.user = JSON.parse(JSON.stringify(u))
-      this.bottomBox.targetTab = 'detail'
-      this.bottomBox.showSubList = true
-    },
-    del (u) {
-      if (u.userId == 1 && u.username === 'admin') { return }
-      this.$confirm(this.$t('tip.confirmDelete'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.$delete('sys/user/delete?userIds=' + u.userId).then(response => {
-          if (response.code === 200) {
-            this.delFlag = true
-            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-            this.getTableData()
-          } else {
-            this.$message.error(response.msg)
-          }
-        })
-      })
-    },
-    getTableData () {
-      if (!this.hasButton('account_view')) {
-        this.$message.error(this.$t('tip.noAccess'))
-        return
-      }
-      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
-      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
-      this.tools.loading = true
-      this.$get('sys/user/list', this.searchLabel).then(response => {
-        this.tools.loading = false
-        if (response.code === 200) {
-          for (let i = 0; i < response.data.list.length; i++) {
-            response.data.list[i].status = response.data.list[i].status + ''
-          }
-          this.tableData = response.data.list
-          this.pageObj.total = response.data.total
-          if (!this.scrollbarWrap) {
-            this.$nextTick(() => {
-              this.scrollbarWrap = this.$refs.accountTable.bodyWrapper
-              this.toTopBtnHandler(this.scrollbarWrap)
-            })
-          }
-        }
-      })
-    },
-    add () {
-      this.user = this.newUser()
-      if (!this.user.userId) {
-        this.user.roleIds = this.roles.find(t => t.name == 'common').id
-      }
-      this.rightBox.show = true
-    },
-    statusChange (user) {
-      if (user.roles) {
-        user.roleIds = user.roles.map(t => t.id)
-      }
-      this.$put('sys/user/update', user).then(response => {
-        if (response.code === 200) {
-          this.rightBox.show = false
-          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-        } else {
-          this.$message.error(response.msg)
-        }
-        this.getTableData()
-      })
-    },
-    esc () {
-      this.rightBox.show = false
-    },
-    newUser () {
-      return JSON.parse(JSON.stringify(this.blankUser))
-    },
-    getRoles: function () {
-      this.roles = []
-      this.$get('sys/role?pageSize=-1').then(response => {
-        if (response.code == 200) {
-          this.roles = response.data.list
-        } else {
-          this.$message.error('load roles faild')
-        }
-      })
-    },
-    pageNo (val) {
-      this.pageObj.pageNo = val
-      this.getTableData()
-    },
-    pageSize (val) {
-      this.pageObj.pageSize = val
-      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
-      this.getTableData()
-    },
-    search (searchObj) {
-      this.searchLabel = {}
-      this.pageObj.pageNo = 1
-      for (const item in searchObj) {
-        if (searchObj[item]) {
-          this.$set(this.searchLabel, item, searchObj[item])
-        }
-      }
-      if (this.$refs.accountTable) {
-        this.$refs.accountTable.bodyWrapper.scrollTop = 0
-      }
-      this.getTableData()
-    },
-    // 数据排序
-    tableDataSort (item) {
-      let orderBy = ''
-      if (item.order === 'ascending') {
-        orderBy = item.prop
-      }
-      if (item.order === 'descending') {
-        orderBy = '-' + item.prop
-      }
-      this.$set(this.searchLabel, 'orderBy', orderBy)
-      this.getTableData()
-    },
-    resetTableTitle: function () {
-      const title = this.tools.customTableTitle
-      const tableTitle = title.slice(0, this.tableTitle.length)
-      const tagTitle = title.slice(this.tableTitle.length, title.length)
-      this.$get('/alert/script?pageNo=1&pageSize=-1').then(response => {
-        let scripts = response.data.list
-        scripts = scripts.map(item => {
-          return { label: item.name, prop: 'tags', show: false, allowed: true, scriptId: item.id, type: 'tag' }
-        })
-        const newTags = scripts.filter(item => { return !tagTitle.find(t => { return item.label == t.label }) })
-        const keepTags = tagTitle.filter(item => { return scripts.find(t => { return item.label == t.label }) })
-        keepTags.forEach(item => {
-          const script = scripts.find(t => { return item.label == t.label })
-          item.scriptId = script.scriptId
-        })
-        let result = tableTitle.concat([{ label: this.$t('config.account.notification'), show: false, NotSet: true, type: 'title', prop: 'table-tag' }])
-
-        result = result.concat(keepTags).concat(newTags)
-        this.tools.customTableTitle = JSON.parse(JSON.stringify(result))
-      })
-      /* let scripts = [
-          {id: 1, name: "DOLBY"},
-          {id: 2, name: "IMAX"},
-          {id: 3, name: "CGS"},
-          {id: 4, name: "LUXE"},
-          {id: 5, name: "DST:X"},
-        ]; */
-    },
-    filterTags (head, scope) {
-      if (scope.row.notifications) {
-        const notification = scope.row.notifications.find(item => {
-          return head.scriptId === item.scriptId
-        })
-        if (notification) {
-          return notification.account
-        }
-      }
-    }
-  },
-  beforeDestroy () {
-    if (this.scrollbarWrap) {
-      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
-    }
-  },
-  computed: {
-    isCurrentUser () {
-      return function (username) {
-        return localStorage.getItem('nz-username') == username
-      }
-    }
-  },
-  watch: {
-    'bottomBox.user': {
-      deep: true,
-      handler (n) {
-        this.bottomBox.userDetail = this.convertToDetail(n)
-      }
-    },
-    'bottomBox.showSubList': function (n) {
-      const vm = this
-      this.$bottomBoxWindow.showSubListWatch(vm, n)
-    },
-    tableData: {
-      deep: true,
-      handler (n) {
-        if (n.length === 0 && this.pageObj.pageNo > 1) {
-          this.pageNo(this.pageObj.pageNo - 1)
-        }
-
-        if (!this.delFlag) { // 不是删除时回到顶部
-          this.$refs.accountTable.bodyWrapper.scrollTop = 0
-        } else {
-          this.delFlag = false
-        }
-      }
-    }
-  },
-  created () {
-    // 是否存在分页缓存
-    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
-    if (pageSize != 'undefined' && pageSize != null) {
-      this.pageObj.pageSize = pageSize
-    }
-    this.getRoles()
-  },
-  mounted () {
-    // 初始化表头
-    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
-      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
-      : this.tableTitle
-    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
-
-    this.resetTableTitle()
-    this.getTableData()
-  }
-}
-</script>

nezha-fronted/src/components/page/config/agent.vue

@@ -6,7 +6,9 @@
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.agent"
       :layout="['searchInput', 'elementSet']"
-      :search-msg="searchMsg">
+      :search-msg="searchMsg"
+      @search="search"
+    >
       <template v-slot:top-tool-right>
         <button id="prom-add" v-has="'agent_add'" :title="$t('overall.createPrometheusServer')" class="top-tool-btn margin-r-10"
                 type="button" @click="add">

nezha-fronted/src/components/page/config/assetMeta.vue

@@ -6,7 +6,9 @@
       :from="fromRoute.assetLabel"
       :custom-table-title.sync="tools.customTableTitle"
       :layout="['searchInput', 'elementSet']"
-      :search-msg="searchMsg">
+      :search-msg="searchMsg"
+      @search="search"
+    >
       <template v-slot:top-tool-left>
         <select-group ref="selectGroup" :filter-object="filterGroup" :object-data="groupData" :placement="'bottom-start'"
                       :show-object="showGroup" style="width: 300px;" @del="delGroup" @edit="editGroup" @selectObject="groupChange">

nezha-fronted/src/components/page/config/assetState.vue

@@ -7,7 +7,9 @@
       :from="fromRoute.assetState"
       :search-msg="searchMsg"
       :table-id="tableId"
-      :table-title="tableTitle">
+      :table-title="tableTitle"
+      @search="search"
+    >
       <template v-slot:top-tool-right>
         <button id="assetState-add" v-has="'assetState_toAdd'" :title="$t('overall.createAssetState')" class="top-tool-btn margin-l-20"
                 type="button" @click="add">

nezha-fronted/src/components/page/config/dc.vue

@@ -6,7 +6,9 @@
       :layout="['searchInput', 'elementSet']"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.dc"
-      :search-msg="searchMsg">
+      :search-msg="searchMsg"
+      @search="search"
+    >
       <template v-slot:top-tool-right>
         <button id="dc-add" v-has="'dc_add'" :title="$t('overall.createDatacenter')" class="top-tool-btn margin-r-10"
                 type="button" @click="add">

nezha-fronted/src/components/page/config/menus.vue

@@ -4,7 +4,9 @@
       ref="dataList"
       :api="url"
       :custom-table-title.sync="tools.customTableTitle"
-      :from="fromRoute.menus">
+      :from="fromRoute.menus"
+      @search="search"
+    >
       <template v-slot:top-tool-right>
         <button id="menus-add" class="top-tool-btn margin-l-20"
                 type="button" @click="add">

nezha-fronted/src/components/page/config/mib.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 100%">
+  <div>
     <nz-data-list
       v-if="showTab === 'file'"
       ref="dataList"
@@ -7,7 +7,9 @@
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.mib"
       :layout="['searchInput', 'elementSet']"
-      :search-msg="searchMsg">
+      :search-msg="searchMsg"
+      @search="search"
+    >
       <template v-slot:top-tool-left>
         <div id="module-type-1" class="nz-tab-item-box">
           <div class="nz-tab-item nz-tab-item-active">{{$t("config.mib.mibFiles")}}</div>

nezha-fronted/src/components/page/config/roles.vue

@@ -6,7 +6,9 @@
       :layout="['searchInput', 'elementSet']"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.role"
-      :search-msg="searchMsg">
+      :search-msg="searchMsg"
+      @search="search"
+    >
       <template v-slot:top-tool-right>
         <button id="roles-add" v-has="'role_add'" :title="$t('overall.createRole')" class="top-tool-btn margin-r-10"
                 type="button" @click="add">

nezha-fronted/src/components/page/config/template/chartTemp.vue

@@ -6,7 +6,9 @@
       :layout="['searchInput', 'elementSet']"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.chartTemp"
-      :search-msg="searchMsg">
+      :search-msg="searchMsg"
+      @search="search"
+    >
       <template v-slot:top-tool-left>
         <div id="module-type-1"  class="nz-tab-item-box" @click="clickTab([],'exprTemp')"><!--v-has="'snmp_browser_view'"-->
           <div class="nz-tab-item">{{$t("config.exprTemp.exprTemp")}}</div>

nezha-fronted/src/components/page/config/template/exprTemp.vue

@@ -6,7 +6,9 @@
       :layout="['searchInput', 'elementSet']"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.expressionTemplate"
-      :search-msg="searchMsg">
+      :search-msg="searchMsg"
+      @search="search"
+    >
       <template v-slot:top-tool-left>
         <div id="module-type-1" class="nz-tab-item-box">
           <div class="nz-tab-item nz-tab-item-active">{{$t("config.exprTemp.exprTemp")}}</div>

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -38,6 +38,9 @@
 
     &:first-of-type {
       padding-top: 0;
+      .nz-icon-minus-position {
+        padding-top: 4px;
+      }
     }
     padding: 20px 0;
     width: 100%;

nezha-fronted/src/components/page/dashboard/explore/explore.vue

@@ -1,54 +1,41 @@
 <template>
-  <div class="explore" v-has="'explore_view'">
+  <div class="explore list-page">
-    <div class="main-list main-and-sub-transition">
+    <div class="main-list">
+      <div class="main-container">
         <!-- 顶部工具栏 -->
         <div class="top-tools" style="z-index: 1">
-          <div class="top-tool-main-right">
+          <div class="top-tool-left"></div>
+          <div class="top-tool-right">
             <pick-time :refresh-data-func="expressionChange" v-model="filterTime" @unitChange="chartUnitChange" ref="pickTime" id="explore">
               <template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
             </pick-time>
-            <button :disabled="saveDisabled" @click="saveChart" type="button" v-has="'explore_chart_toAdd'" id="explore-save-chart"
+            <button id="explore-save-chart" v-has="'panel_chart_add'" :disabled="saveDisabled" class="top-tool-btn top-tool-btn--text" type="button"
-                    class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"
+                    @click="saveChart"
                     :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}">
               {{$t('dashboard.metric.saveChart')}}
             </button>
           </div>
         </div>
-        <div style="height: calc(100% - 50px);width: 100%;" >
+        <div class="top-tools" style="width: 100%;box-sizing: border-box; padding-left: 10px;">
-          <div ref="scrollWrap" style="height: 100%; overflow: auto;">
+          <div id="explore-promql-box" class="expression-room">
-            <div class="expression-room right-margin" style="padding-top: 5px" id="explore-promql-box">
+            <!--坑，这个index居然是从1开始-->
-              <!--坑，这个index居然是从1开始-->
-              <promql-input
-                v-for="index of promqlKeys.length"
-                :ref="'promql-'+(index-1)"
-                :id="promqlKeys[index-1]"
-                :key="promqlKeys[index-1]"
-                :expression-list="expressions"
-                :index="index-1"
-                :styleType="1"
-                :plugins="['metric-selector', 'metric-input', 'add', 'remove', 'copy']"
-                @change="expressionChange"
-                @addExpression="addExpression"
-                @copyExpression="copyExpression"
-                @removeExpression="removeExpression"
-              ></promql-input>
-<!--
             <promql-input
               v-for="index of promqlKeys.length"
-              :ref="'promql-'+(index-1)"
               :id="promqlKeys[index-1]"
               :key="promqlKeys[index-1]"
+              :ref="'promql-'+(index-1)"
               :expression-list="expressions"
               :index="index-1"
+              :plugins="['metric-selector', 'metric-input', 'add', 'remove', 'copy']"
               :styleType="1"
-              :history-param="historyParam"
-              :plugins="['metric-selector', 'metric-input', 'add', 'remove']"
-              @change="expressionChange"
               @addExpression="addExpression"
+              @change="expressionChange"
+              @copyExpression="copyExpression"
               @removeExpression="removeExpression"
             ></promql-input>
--->
           </div>
+        </div>
+        <div ref="scrollWrap" style="height: 100%; overflow: auto;">
           <div class="chart-view right-margin" v-show="!showIntroduce"
                :class="{'shrink-view':!chartVisible || !defaultChartVisible}" style="position:relative;">
             <div class="view-title" @click="changeChartVisible" style="position:absolute;z-index: 1000;top:10px;"><i class="nz-icon nz-icon-caret-top" ></i>&nbsp;graph</div>
@@ -196,9 +183,8 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
               </div>
             </div>
           </div>
-      </div>
         </div>
-
+      </div>
     </div>
     <transition name="right-box">
       <chart-box :chart="chart" :from="$CONSTANTS.fromRoute.explore" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'explore'}" @close="handleBox(false)" @on-create-success="createSuccess" ref="addChartModal" v-if="rightBox.show"></chart-box>
@@ -764,9 +750,6 @@ export default {
     border: 1px solid #c7d0d9;
     border-radius: 4px;
   }
-  .right-margin{
-    margin-right: 15px;
-  }
   /*外部引用 样式start*/
   .doc-content {
     font-size: 16px;
@@ -930,7 +913,7 @@ export default {
 
   /*外部引用 样式end*/
 </style>
-<style>
+<style lang="scss">
   .explore-table tr td .cell {
     overflow: hidden;
     text-overflow: ellipsis;

nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="promqlInput" :style="{height:(errorMsg || appendMsg)?'auto':'auto','margin-bottom':required?'0':'18px'}">
+  <div class="promqlInput">
     <div class="query-row">
       <div class="query-input">
         <!--explore页面的样式-->
         <template v-if="styleType == 1">
-          <div class="metric-btn" v-if="plugins.indexOf('metric-selector') > -1">
+          <div v-if="plugins.indexOf('metric-selector') > -1">
             <el-dropdown class="metric-selector">
               <el-dropdown-menu style="display: none"></el-dropdown-menu>
-              <el-button class="metric-btn nz-btn nz-btn-size-normal nz-btn-style-light" @click="toggleDropdown">Metric
+              <button class="top-tool-btn" type="button" @click="toggleDropdown">Metric
-                &nbsp;<i class="nz-icon nz-icon-arrow-down"></i></el-button>
+                &nbsp;<i class="nz-icon nz-icon-arrow-down"></i></button>
               <el-cascader-panel v-loading="tempBoxShowLoading" v-show="dropDownVisible" v-model="cascaderValue" v-clickoutside="closeDropdown"
                                  slot="dropdown" ref="metricSelector" :props="{emitPath:false,}" :loading="loading"
                                  :options="metricOptions" @change="metricChange">
@@ -24,8 +24,6 @@
             </el-dropdown>
           </div>
           <div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
-            <!--            <el-autocomplete :placeholder="$t('dashboard.metricPreview.inputTip')" :fetch-suggestions="filterInput" clearable @clear="clearExpression" :trigger-on-focus="false" v-model="expressionList[index]" @blur="expressionChange" style="width: 100%;height:36px"></el-autocomplete>-->
-            <!--<editor :styleType="styleType" :metric-list="metricStore" :history-param="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>?-->
             <el-input @keyup.enter.native="expressionChange" v-model="expressionList[index]" :id="inputId"
                       @input="metricKeyDown" type="textarea"
                       :autosize="{ minRows: 1, maxRows: 6}" class="not-fixed-height no-resize"></el-input>
@@ -566,7 +564,6 @@ export default {
   .input-box .error {
     color: #F56C6C;
   }
-
   .query-row .query-input {
     display: flex;
     justify-content: flex-start;
@@ -703,7 +700,6 @@ export default {
     position: relative;
     z-index: 2100;
   }
-
   .input-box .el-input__inner {
     height: 30px;
   }

nezha-fronted/src/components/page/dashboard/overview/overview.vue

@@ -451,7 +451,6 @@ export default {
                 !severityData.P3 && (severityData.P3 = 0)
                 assetStateData.push({ ...alertTopAssets[i], alert: [severityData] })
               })
-              console.info(assetStateData)
               this.messageAssetData = assetStateData
             })
           }
@@ -465,7 +464,7 @@ export default {
         this.$get('stat/asset/type').then(response => {
           this.assetTypeLoading = false
           if (response.code === 200) {
-            this.assetTypeData = response.data
+            this.assetTypeData = response.data.list
             /* 饼图 */
             const legendData = []
             const typeSeriesData = []
@@ -768,10 +767,10 @@ export default {
         }
       ]
       return new Promise(resolve => {
-        const requests = [axios.get('dc?pageSize=-1')/* , axios.get('stat/overview/map') */]
+        const requests = [axios.get('dc?pageSize=-1'), axios.get('stat/overview/map')]
         axios.all(requests).then(result => {
           const dcInfos = result[0].data.data.list
-          const dcStats = testData
+          const dcStats = result[1].data.data.list
           dcStats.sort((a, b) => {
             return a.asset.total - b.asset.total
           })
@@ -1178,7 +1177,6 @@ export default {
 
 <style lang="scss">
 @import './overview2.scss';
-@import '@/assets/css/common/tableCommon.scss';
 .leaflet-control-zoom{
   border: 1px solid #E7EAED !important;
   box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77) !important;

nezha-fronted/src/components/page/dashboard/overview/overview2.scss

@@ -5,8 +5,11 @@
 }
 .overview-content-header{
   display: flex;
-  padding: 0 0 2px 0;
   justify-content: space-between;
+  margin-top: 10px;
+  padding: 5px 0 0 0;
+  background-color: white;
+  box-sizing: border-box;
 }
 .overview-content-header .header-title{
   height: 35px;
@@ -21,11 +24,12 @@
   display: flex;
   padding: 5px;
 }
-.header-tool .tool-container{
+.overview .header-tool .tool-container{
   display: flex;
   text-align: center;
   justify-content: space-between;
   min-width: 310px;
+  padding-right: 7px !important;
 }
 .tool-container .pickTime{
   margin-right: -20px;
@@ -66,7 +70,10 @@
   cursor: pointer;
   color: #666666;
 }
-.overview-content{
+.overview-content {
+  padding: 0 10px 15px;
+  background-color: white;
+  box-sizing: border-box;
   height: calc(100% - 42px);
   width: 100%;
 }

nezha-fronted/src/http.js

@@ -10,9 +10,12 @@ axios.interceptors.request.use(config => {
 err => Promise.reject(err)
 )
 const accountErrorCode = [518003, 518004, 518005, 518006, 518007, 518008] // 账号锁定等
+const licenceErrorCode = [711001]
 axios.interceptors.response.use(
   response => {
-    if (response.status === 200) {
+    if (licenceErrorCode.indexOf(response.data.code) !== -1) {
+      window.location.href = '/'
+    } else if (response.status === 200) {
       if (accountErrorCode.indexOf(response.data.code) !== -1) {
         window.location.href = '/'
       }

nezha-fronted/src/main.js

@@ -56,7 +56,6 @@ Vue.prototype.$chartResizeTool = chartResizeTool
 Vue.prototype.$tableSet = tableSet
 Vue.prototype.$tableHeight = { // 列表页表格的高度
   normal: 'calc(100% - 48px)', // 常规高度，特例在下方定义
-  search: 'calc(100% - 240px)', // 常规高度，特例在下方定义
   openSubList: { // 打开二级列表后的高度
     mainList: 'calc(100% - 60px)',
     subList: 'calc(100% - 38px)',

nezha-fronted/src/router/index.js

@@ -30,7 +30,7 @@ export default new Router({
           component: resolve => require(['../components/page/dashboard/explore/explore.vue'], resolve)
         },
         {
-          path: 'overview',
+          path: '/overview',
           component: resolve => require(['../components/page/dashboard/overview/overview.vue'], resolve)
         },
         {