NEZ-2236 feat : asset vsys 二级页面开发

nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss

@@ -254,11 +254,15 @@
   padding-left: 8px;
 }
 
-#processBottomTab,#networkBottomTab{
+#processBottomTab,
+#networkBottomTab,
+#vsysBottomTab {
   .sub-container .nz-table-list {
     height: 100%;
   }
-  #assetProcessTable,#assetNetworkTable{
+  #assetProcessTable,
+  #assetNetworkTable,
+  #assetVsysTable {
     height: calc(100% - 14px) !important;
   }
 }

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

@@ -45,6 +45,7 @@
         <assetSubTab v-if="from === fromRoute.asset && targetTab === 'assetSubTab' && obj.childrenNum" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" @changeTab="changeTab" :targetTab.sync="targetTab"></assetSubTab>
         <network-bottom-tab v-if="from === fromRoute.asset && targetTab === 'network' && obj.clientState == '1'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></network-bottom-tab>
         <comments-bottom-tab v-if="from === fromRoute.asset && targetTab === 'comments'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" @changeTab="changeTab" :targetTab.sync="targetTab"></comments-bottom-tab>
+        <vsys-bottom-tab v-if="from === fromRoute.asset && targetTab === 'vsys' && obj.tsgAppliance == '1'"  v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></vsys-bottom-tab>
         <!--module列表的tab-->
         <endpointTabNew v-if="from === fromRoute.module && targetTab === 'endpoint'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
         <alertMessageTabNew v-if="from === fromRoute.module && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
@@ -84,6 +85,7 @@ import issueTab from './tabs/issueTab'
 import alertRuleEvalLog from './tabs/alertRuleEvalLog'
 import assetSubTab from './tabs/assetSubTab'
 import commentsBottomTab from './tabs/commentsBottomTab'
+import vsysBottomTab from './tabs/vsysBottomTab'
 import endpointQuery from './tabs/endpointQuery'
 import endpointTab from './tabs/endpointTab'
 import endpointTabNew from './tabs/endpointTabNew'
@@ -129,7 +131,8 @@ export default {
     IpDetails,
     recordRuleEvalLog,
     issueTab,
-    commentsBottomTab
+    commentsBottomTab,
+    vsysBottomTab
   },
   props: {
     isFullScreen: Boolean, // 是否全屏
@@ -255,6 +258,7 @@ export default {
     assetTabs () {
       const hasSub = this.obj && this.obj.childrenNum
       const hasProcess = this.obj && this.obj.clientState == '1'
+      const hasVays = this.obj && this.obj.tsgAppliance == '1'
       const tabs = [
         { prop: 'panelTab', name: this.$t('overall.dashboard') },
         { prop: 'alertMessageTab', name: this.$t('overall.alert') },
@@ -268,6 +272,9 @@ export default {
         tabs.push({ prop: 'process', name: this.$t('overall.process') }, { prop: 'network', name: this.$t('overall.network') })
       }
       tabs.push({ prop: 'comments', name: this.$t('overall.comments') })
+      if (hasVays) {
+        tabs.push({ prop: 'vsys', name: this.$t('asset.vsys') })
+      }
       return tabs
     },
     endpointTabs () {

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

@@ -0,0 +1,89 @@
+<template>
+  <nz-bottom-data-list
+      :showTitle='showTitle'
+      :obj='obj'
+    id="vsysBottomTab"
+    :api="url"
+    :custom-table-title.sync="tools.customTableTitle"
+    :layout="['elementSet']"
+    :search-msg="searchMsg"
+    :tabs="tabs"
+    :targetTab="targetTab"
+    :showPagination="false"
+    @search="search"
+    @changeTab="changeTab"
+  >
+    <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
+    <template v-slot>
+      <assetVsysTable
+        ref="dataTable"
+        :orderByFa="'id'"
+        v-my-loading="tools.loading"
+        :loading="tools.loading"
+        :api="url"
+        :custom-table-title="tools.customTableTitle"
+        :height="subTableHeight"
+        :table-data="tableData"
+        :terminaLogTab="true"
+        @del="del"
+        @edit="edit"
+        @orderBy="tableDataSort"
+        @reload="getTableData"
+        @selectionChange="selectionChange"></assetVsysTable>
+    </template>
+  </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'
+import assetVsysTable from '@/components/common/table/asset/assetVsysTable'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
+
+export default {
+  name: 'vsysBottomTab',
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
+  components: {
+    nzBottomDataList,
+    assetVsysTable
+  },
+  props: {
+    obj: Object,
+    showTitle: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      url: '/vsys/asset/',
+      tableId: 'assetVsysTable', // 需要分页的table的id，用于记录每页数量
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: []
+      },
+      searchLabel: {},
+      tableData: []
+    }
+  },
+  methods: {
+    async getTableData () {
+      this.$set(this.searchLabel, 'assetId', this.obj.id)
+      this.tools.loading = true
+      this.$get(this.url, this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          this.tableData = response.data.list
+          if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>

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

@@ -87,7 +87,8 @@ export default {
             name: this.bottomBox.object.name,
             configs: this.bottomBox.object.configs ? this.bottomBox.object.configs.map(item => { return { type: item.type, enable: item.enable } }) : '',
             childrenNum: this.bottomBox.object.childrenNum || '',
-            clientState: this.bottomBox.object.clientState || ''
+            clientState: this.bottomBox.object.clientState || '',
+            tsgAppliance: this.bottomBox.object.model.tsgAppliance || ''
           })
           this.$router.replace({ path: path, query: params }).catch(err => {})
         } else if (from === 'nzDetailList' && this.detailViewRightObj) {
@@ -97,7 +98,8 @@ export default {
             name: this.detailViewRightObj.name,
             configs: this.detailViewRightObj.configs ? this.detailViewRightObj.configs.map(item => { return { type: item.type, enable: item.enable } }) : '',
             childrenNum: this.detailViewRightObj.childrenNum || '',
-            clientState: this.detailViewRightObj.clientState || ''
+            clientState: this.detailViewRightObj.clientState || '',
+            tsgAppliance: this.detailViewRightObj.model.tsgAppliance || ''
           })
           this.$router.replace({ path: path, query: params }).catch(err => {})
         } else if (from === 'bottomBox' && this.targetTab) {

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

@@ -0,0 +1,90 @@
+<template>
+  <el-table
+    id="assetVsysTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    tooltip-effect="light"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+    @row-dblclick="(row)=>{queryMessage(row)}"
+  >
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      v-if="item.show"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
+      :show-overflow-tooltip="item.prop === 'description'"
+      class="data-column"
+    >
+      <template slot="header">
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <template v-if="item.prop === 'uts'">
+           {{scope.row[item.prop] ? utcTimeToTimezoneStr(scope.row[item.prop]) : '-'}}
+        </template>
+        <template v-else-if="item.prop === 'state'">
+          <div v-if="scope.row.state === 1">{{$t('overall.result.success')}}</div>
+          <div v-else>{{$t('overall.result.failed')}}</div>
+        </template>
+        <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+        <template v-else>-</template>
+      </template>
+    </el-table-column>
+    <template slot="empty">
+      <div  v-if="!loading"  class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'assetVsysTable',
+  mixins: [table],
+  props: {
+    loading: Boolean
+  },
+  data () {
+    return {
+      tableTitle: [
+        {
+          label: this.$t('asset.vsysId'),
+          prop: 'vsysId',
+          show: true,
+          minWidth: 120
+        },
+        {
+          label: this.$t('overall.state'),
+          prop: 'state',
+          show: true,
+          minWidth: 120
+        }, {
+          label: this.$t('overall.time'),
+          prop: 'uts',
+          show: true,
+          minWidth: 120
+        }
+      ]
+    }
+  }
+}
+</script>
+<style scoped>
+</style>