feat: terminalog添加详细视图

2021-10-21 14:04:07 +08:00
parent d29a3dd3c9
commit b3c4fc50ed
6 changed files with 347 additions and 24 deletions
--- a/nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue
@@ -57,7 +57,7 @@ export default {
  },
  data () {
    return {
-      tableTitle: [ // 原始table列
+      tableTitle: [
        {
          label: 'ID',
          prop: 'id',
@@ -65,36 +65,57 @@ export default {
          width: 80,
          sortable: 'custom'
        }, {
-          label: this.$t('project.module.moduleName'),
+          label: this.$t('overall.name'),
          prop: 'name',
          show: true,
          minWidth: 200,
          sortable: 'custom'
        }, {
-          label: this.$t('project.project.projectName'),
-          prop: 'project',
+          label: this.$t('asset.location'),
+          prop: 'location',
+          show: true
+        }, {
+          label: this.$t('config.dc.cabinetNum'),
+          prop: 'cabinetNum',
          show: true,
-          width: 200,
-          sortable: 'custom'
-        },
-        {
-          label: this.$t('project.endpoint.endpoint'),
-          prop: 'endpointNum',
-          show: true,
-          width: 200,
+          minWidth: 100,
          sortable: 'custom'
        }, {
-          label: this.$t('project.module.alerts'),
-          prop: 'alertNum',
+          label: this.$t('config.dc.assets'),
+          prop: 'assetNum',
          show: true,
-          width: 200,
+          minWidth: 90,
          sortable: 'custom'
-        },
-        {
-          label: this.$t('overall.remark'),
-          prop: 'remark',
+        }, {
+          label: this.$t('config.dc.alert'),
+          prop: 'alertNum',
+          show: true
+        }, {
+          label: this.$t('asset.tel'),
+          prop: 'tel',
+          show: false,
+          minWidth: 100
+        }, {
+          label: this.$t('asset.principal'),
+          prop: 'principal',
+          show: false,
+          minWidth: 120
+        }, {
+          label: this.$t('config.dc.longitude'),
+          prop: 'longitude',
+          show: false,
+          minWidth: 100
+        }, {
+          label: this.$t('config.dc.latitude'),
+          prop: 'latitude',
+          show: false,
+          minWidth: 100
+        }, {
+          label: this.$t('config.dc.state'),
+          prop: 'state',
          show: true,
-          minWidth: 150
+          minWidth: 100,
+          sortable: 'custom'
        }
      ]
    }
--- a/nezha-fronted/src/components/common/detailView/list/terminalLogDetail/terminalLogDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/terminalLogDetail/terminalLogDetail.vue
@@ -0,0 +1,234 @@
+<template>
+  <div class="detail-left-box">
+    <div class="order-box">
+      <el-select v-model="orderBy" size="small" :placeholder="$t('asset.detail.orderBy')" popper-class="right-box-select-top" class="detail-select">
+        <el-option
+          v-for="item in tableTitle"
+          v-if="item.sortable==='custom'"
+          :key="item.prop"
+          :label="$t('asset.detail.orderByLabel',{label:item.label})"
+          :value="item.prop">
+          {{item.label}}
+        </el-option>
+      </el-select>
+      <button @click="orderTypeChange" size="small" class="detail-button top-tool-btn table-column-setting margin-l-10">
+        <i class="nz-icon nz-icon-arrow-up1" v-if="orderType=='ascending'" />
+        <i class="nz-icon nz-icon-arrow-down2" v-if="orderType=='descending'" />
+      </button>
+    </div>
+    <ul class="detail-row-box" ref="dataTable">
+      <li
+        v-for="(item,index) in tableData"
+        :key="index"
+        class="detail-row"
+        :class="item.id === detailViewRightObj.id ? 'selected' : ''"
+        @click="detailViewRightShow(item)"
+      >
+        <div class="detail-row-info">
+          <div class="asset-manageIp">
+            <span :class="{'active-icon green-bg':item.status === 0,'active-icon red-bg':item.status !== 0}"></span>
+            <span>{{item.remoteAddr?item.remoteAddr:'-'}}</span>
+          </div>
+          <div class="asset-name">
+            <span>{{item.username?item.username:'-'}}</span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+
+import detailViewLeftMixin from '@/components/common/mixin/detailViewLeftMixin'
+import alertLabel from '@/components/common/alert/alertLabel'
+import { terminalLog } from '@/components/common/js/constants'
+export default {
+  name: 'terminalLogDetail',
+  mixins: [detailViewLeftMixin],
+  components: {
+    alertLabel
+  },
+  data () {
+    return {
+      tableTitle: [
+        {
+          label: this.$t('config.terminallog.id'),
+          prop: 'id',
+          show: true,
+          width: 80,
+          sortable: 'custom'
+        }, {
+          label: this.$t('config.terminallog.SessionID'),
+          prop: 'uuid',
+          minWidth: 200,
+          show: true
+        }, {
+          label: this.$t('config.terminallog.username'),
+          prop: 'username',
+          minWidth: 200,
+          show: true
+        },
+        {
+          label: this.$t('config.terminallog.source'),
+          prop: 'sourceIp',
+          minWidth: 115,
+          show: true,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('config.terminallog.remote'),
+          prop: 'remote',
+          show: true
+        },
+        {
+          label: this.$t('config.terminallog.protocol'),
+          prop: 'protocol',
+          show: true
+        },
+        {
+          label: this.$t('config.terminallog.startTime'),
+          prop: 'startTime',
+          minWidth: 100,
+          show: true
+        },
+        {
+          label: this.$t('config.terminallog.duration'),
+          prop: 'duration',
+          show: true
+        },
+        {
+          label: this.$t('config.terminallog.authtype'),
+          prop: 'authType',
+          minWidth: 100,
+          show: false
+        },
+        {
+          label: this.$t('config.terminallog.status'), // killusername鼠标悬停形式
+          prop: 'state',
+          show: true,
+          width: 150,
+          sortable: 'custom'
+        }
+      ]
+    }
+  },
+  methods: {
+    // label 鼠标划入
+    labelHover (item, type, loading, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.$set(item, 'position', position)
+      }
+      this.$set(item, 'loading', loading)
+      // this.$set(this.tableData,index,item);// 调用父组件
+    },
+    getStatusText () {
+      return function (status) {
+        return terminalLog.status[status]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .order-box{
+    display: flex;
+    height:40px;
+    padding: 0 15px;
+    line-height: 40px;
+    align-items: center;
+    /*.detail-select{*/
+    /*  height: 30px;*/
+    /*  line-height: 30px;*/
+    /*  flex: 1;*/
+    /*  /deep/ .el-input--small{*/
+    /*    height: 30px;*/
+    /*    line-height: 30px;*/
+    /*    background-color: rgba(9,30,66,0.08);*/
+    /*    border: none;*/
+    /*    color: #344563;*/
+    /*    input{*/
+    /*      height: 30px;*/
+    /*      line-height: 30px;*/
+    /*      background-color: rgba(9,30,66,0.08);*/
+    /*      border: none;*/
+    /*      color: #344563;*/
+    /*    }*/
+    /*  }*/
+    /*}*/
+    /*.detail-select:hover{*/
+    /*  /deep/ .el-input--small{*/
+    /*    input{*/
+    /*      background-color: rgba(9,30,66,0.13);*/
+    /*    }*/
+    /*  }*/
+    /*}*/
+    /*.detail-button{*/
+    /*  height: 28px;*/
+    /*  line-height: 28px;*/
+    /*  background-color: rgba(9,30,66,0.08);*/
+    /*  border: none;*/
+    /*  .nz-icon{*/
+    /*    color: #344563;*/
+    /*  }*/
+    /*}*/
+    /*.detail-button:hover{*/
+    /*  background-color: rgba(9,30,66,0.13);*/
+    /*}*/
+  }
+  .detail-row-box{
+    height: calc(100% - 40px);
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .detail-row{
+    width: 245px;
+    padding: 0px 0 0px 15px;
+    height: 60px;
+    border-bottom: 1px solid #E7EAED;
+    cursor: pointer;
+  }
+  .detail-row:last-of-type{
+    border-bottom: none
+  }
+  .detail-row-info{
+    display: flex;
+    height: 100%;
+    width: calc(100% - 15px);
+    justify-content:center;
+    flex-direction: column;
+    > div{
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  .asset-manageIp{
+    font-size: 16px;
+    color: #333333;
+    font-weight: 400;
+  }
+    .asset-name {
+      padding-left: 22px;
+      width: calc(100% - 22px);
+      font-size: 14px;
+      color: #999999;
+      font-weight: 400;
+    }
+  }
+  .selected{
+    background: #FFFBF6;
+  }
+  .colorEF7458{
+    color: #EF7458;
+  }
+  .color23BF9A{
+    color: #23BF9A;
+  }
+  .colorFA901C{
+    color: #fa901c;
+  }
+</style>
--- a/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
+++ b/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
@@ -299,6 +299,8 @@ export default {
        this.targetTab = 'alertRuleAlertMessage'
      } else if (this.from === fromRoute.dc) {
        this.targetTab = 'cabinet'
+      } else if (this.from === fromRoute.terminalLog) {
+        this.targetTab = 'cmdTab'
      }
    }
  }
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -72,6 +72,7 @@
    <nz-data-list
      ref="dataList"
      :api="url"
+      v-show="detailType === 'list'"
      :layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"
      :custom-table-title.sync="tools.customTableTitle"
      :from="fromRoute.dc"
--- a/nezha-fronted/src/components/page/config/terminalLog.vue
+++ b/nezha-fronted/src/components/page/config/terminalLog.vue
@@ -1,13 +1,68 @@
 <template>
  <div>
+    <nzDetailView
+      v-loading="detailViewLoading || tools.loading"
+      v-if="detailType !== 'list'"
+      :api="url"
+      ref="detailList"
+      :layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"
+      :from="fromRoute.terminalLog"
+      :search-msg="searchMsg"
+      :detailType="detailType"
+      :detailViewRightObj="detailViewRightObj"
+      :dataLength="tableData.length"
+      @search="search"
+      @changeDetailType="changeDetailType"
+    >
+      <template v-slot:top-tool-left>
+        <!--        <detailViewTopSearch :selectValue.sync="selectValue" :detailSearchList="detailSearchList" @reload="reloadTable" />-->
+      </template>
+      <template v-slot:top-tool-right>
+      </template>
+      <template v-slot:nz-detail-view-list>
+        <terminalLogDetail
+          class="data-detail"
+          ref="dataDetail"
+          :orderByFa="orderBy"
+          v-loading="tools.loading"
+          :detailViewRightObj="detailViewRightObj"
+          :api="url"
+          :table-data="tableData"
+          @detailViewRightShow = 'detailViewRightShow'
+          @orderDetail="orderDetail"
+        >
+        </terminalLogDetail>
+      </template>
+      <!-- 分页组件 -->
+      <template v-slot:pagination>
+        <el-pagination
+          @current-change="pageNo"
+          :current-page.sync="pageObj.pageNo"
+          :page-size="20"
+          :total="pageObj.total"
+          layout="prev, slot, next"
+          small
+        >
+          <template>
+            <el-input-number ref="jumpInput" v-model="pageObj.pageNo" :controls="false" :min="1" :max="pageObj.pages" class="jump-input" @change="getTableData" @keyup.enter.native="getTableData" size="mini"/>
+            <span class="jump-pages">/&nbsp{{pageObj.pages}}</span>
+          </template>
+        </el-pagination>
+      </template>
+    </nzDetailView>
    <nz-data-list
      ref="dataList"
      :api="url"
-      :layout="['searchInput', 'elementSet', 'pagination']"
+      v-show="detailType === 'list'"
+      :layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"
      :custom-table-title.sync="tools.customTableTitle"
      :from="fromRoute.terminalLog"
      @search="search"
-      :search-msg="searchMsg">
+      :search-msg="searchMsg"
+      :detailType="detailType"
+      @changeDetailType="changeDetailType"
+      @getTableData="getTableData"
+    >
      <template v-slot:default="slotProps">
        <terminal-log-table
          ref="dataTable"
@@ -37,14 +92,21 @@
 import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import terminalLogTable from '@/components/common/table/settings/terminalLogTable'
+import nzDetailView from '@/components/common/detailView/nzDetailView'
+import detailViewMixin from '@/components/common/mixin/detailViewMixin'
+import terminalLogDetail from '@/components/common/detailView/list/terminalLogDetail/terminalLogDetail'
+import detailViewTopSearch from '@/components/common/detailView/detailViewTopSearch'

 export default {
  name: 'terminalLog',
  components: {
    nzDataList,
-    terminalLogTable
+    terminalLogTable,
+    nzDetailView,
+    terminalLogDetail,
+    detailViewTopSearch
  },
-  mixins: [dataListMixin],
+  mixins: [dataListMixin, detailViewMixin],
  data () {
    return {
      url: 'terminal/session',
@@ -117,7 +179,9 @@ export default {
        if (response.code === 200) {
          this.tableData = response.data.list
          this.nowTime = this.utcTimeToTimezoneStr(response.time)
+          this.detailViewRightObj = this.tableData[0]
          this.pageObj.total = response.data.total
+          this.pageObj.pages = response.data.pages
          if (!this.scrollbarWrap) {
            this.$nextTick(() => {
              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
--- a/nezha-fronted/src/components/page/monitor/module/moduleList.vue
+++ b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
@@ -73,6 +73,7 @@
      ref="dataList"
      :api="url"
      :tableId="tableId"
+      v-show="detailType === 'list'"
      :custom-table-title.sync="tools.customTableTitle"
      :from="fromRoute.module"
      :layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"