NEZ-829 feat：aseet添加子集表格

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -945,7 +945,7 @@ export default {
         delete option.yAxis.maxInterval
       }
       if (this.fromTopo) {
-        option.minInterval = 20 * 60 * 1000
+        option.xAxis.minInterval = 20 * 60 * 1000
       }
       // params.series = dataArg;
       if (chartSite === 'local') { // 本地显示

nezha-fronted/src/components/common/ChartDiagram/diagram.vue

@@ -349,6 +349,7 @@ const canvasOptions = {
   disableEmptyLine: true,
   autoExpandDistance: 0,
   minScale: 0.01
+  // scaleKey: -1
 }
 export default {
   name: 'diagram',
@@ -1811,11 +1812,26 @@ export default {
           this.$axios
             .get(url)
             .then((res) => {
-              return {
+              const imageInfo = {
                 data: ('data:image/jpeg;base64,' + res.data),
-                width: res.headers.width === -1 ? 100 : (res.headers.width > 900 ? 900 : res.headers.width),
+                // width: res.headers.width === -1 ? 100 : (res.headers.width > 900 ? 900 : res.headers.width),
-                height: res.headers.height === -1 ? 100 : (res.headers.height > 900 ? 900 : res.headers.height)
+                // height: res.headers.height === -1 ? 100 : (res.headers.height > 900 ? 900 : res.headers.height)
+                width: res.headers.width === -1 ? 100 : Number(res.headers.width),
+                height: res.headers.height === -1 ? 100 : Number(res.headers.height)
               }
+              if (imageInfo.width > 900 || imageInfo.height > 900) {
+                if (imageInfo.height > imageInfo.width) {
+                  imageInfo.width = imageInfo.width * 900 / imageInfo.height
+                  imageInfo.height = 900
+                } else if (imageInfo.height < imageInfo.width) {
+                  imageInfo.height = imageInfo.height * 900 / imageInfo.width
+                  imageInfo.width = 900
+                } else {
+                  imageInfo.height = 900
+                  imageInfo.width = 900
+                }
+              }
+              return imageInfo
             })
             .then(data => {
               resolve(data)

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

@@ -40,6 +40,7 @@
         <panel-tab-new v-if="from === fromRoute.asset && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.panel" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
         <alertMessageTabNew v-if="from === fromRoute.asset && targetTab === 'alertMessageTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.alertMessage" :targetTab="targetTab" @changeTab="changeTab"></alertMessageTabNew>
         <endpointTabNew v-if="from === fromRoute.asset && targetTab === 'endpointTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.endpoint" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
+        <assetSubTab v-if="from === fromRoute.asset && targetTab === 'assetSubTab' && obj.childrenNum" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.alertMessageSub" :targetTab="targetTab" @changeTab="changeTab"></assetSubTab>
         <!--module列表的tab-->
         <endpointTabNew 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>
@@ -63,6 +64,7 @@
 import cabinetTab from './tabs/cabinetTab'
 import alertMessageTab from './tabs/alertMessageTab'
 import alertMessageTabNew from './tabs/alertMessageTabNew'
+import assetSubTab from './tabs/assetSubTab'
 import endpointQuery from './tabs/endpointQuery'
 import endpointTab from './tabs/endpointTab'
 import endpointTabNew from './tabs/endpointTabNew'
@@ -90,7 +92,8 @@ export default {
     alertMessageTabNew,
     endpointQuery,
     panelTabNew,
-    assetTab
+    assetTab,
+    assetSubTab
   },
   props: {
     isFullScreen: Boolean, // 是否全屏
@@ -98,7 +101,23 @@ export default {
     obj: Object, // 关联的实体对象
     from: String, // 来自哪个页面
     tabList: Array, // 动态页签列表
-    targetTab: String, // 展示哪个页签
+    targetTab: String // 展示哪个页签
+  },
+  watch: {
+    obj: {
+      immediate: true,
+      handler (n) {
+        console.log(n)
+        if ((this.from === fromRoute.asset) && n) {
+          if (n.childrenNum) {
+            const assetSub = { prop: 'assetSubTab', name: this.$t('overall.assetSubTab'), active: false }
+            this.tabs.asset.panel.push(assetSub)
+            this.tabs.asset.alertMessage.push(assetSub)
+            this.tabs.asset.endpoint.push(assetSub)
+          }
+        }
+      }
+    }
   },
   data () {
     return {
@@ -137,12 +156,18 @@ export default {
           alertMessage: [
             { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true },
-            { prop: 'endpointTab', name: 'Endpoint', active: false }
+            { prop: 'endpointTab', name: 'Endpoint', active: false },
           ],
           endpoint: [
             { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
-            { prop: 'endpointTab', name: 'Endpoint', active: true }
+            { prop: 'endpointTab', name: 'Endpoint', active: true },
+          ],
+          alertMessageSub: [
+            { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
+            { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
+            { prop: 'endpointTab', name: 'Endpoint', active: false },
+            { prop: 'assetSubTab', name: this.$t('overall.assetSubTab'), active: true }
           ]
         },
         module: {

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

@@ -0,0 +1,258 @@
+<template>
+  <div>
+    <nz-bottom-data-list
+      :api="url"
+      style="height: 100%"
+      :custom-table-title.sync="tools.customTableTitle"
+      :layout="['searchInput', 'elementSet']"
+      :search-msg="searchMsg"
+      :tabs="tabs"
+      @search="search"
+      @changeTab="changeTab"
+    >
+      <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
+      <template v-slot>
+        <asset-table
+          ref="dataTable"
+          :api="url"
+          v-loading="tools.loading"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          :assetTab="true"
+          @del="del"
+          @edit="edit"
+          @cli="cli"
+          @duplicate="duplicate"
+          @addSilence="addSilence"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+        ></asset-table>
+      </template>
+      <template v-slot:pagination>
+        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+      </template>
+    </nz-bottom-data-list>
+    <transition name="right-box">
+      <asset-box v-if="rightBox.show"
+                 ref="assetBox"
+                 :brand-data="brandData"
+                 :dc-data="obj"
+                 :field-group-data="fieldGroupData"
+                 :from="fromRoute.asset"
+                 :obj="object"
+                 :snmp-credential-data="snmpCredentialData"
+                 :state-data="stateData"
+                 :type-data="typeData"
+                 @close="closeRightBox"
+                 @refresh="getTableData"></asset-box>
+    </transition>
+    <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box></transition>
+  </div>
+</template>
+
+<script>
+import dataListMixin from '@/components/common/mixin/dataList'
+import subDataListMixin from '@/components/common/mixin/subDataList'
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+import assetTable from '@/components/common/table/asset/assetTable'
+import assetBox from '@/components/common/rightBox/asset/assetBox'
+import { fromRoute } from '@/components/common/js/constants'
+import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
+
+export default {
+  name: 'assetTab',
+  mixins: [dataListMixin, subDataListMixin],
+  components: {
+    nzBottomDataList,
+    assetTable,
+    assetBox,
+    alertSilenceBox
+  },
+  data () {
+    return {
+      url: '/asset/asset',
+      tableId: 'assetTabTable', // 需要分页的table的id，用于记录每页数量
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          name: 'ID',
+          type: 'input',
+          label: 'ids',
+          disabled: false
+        }, {
+          name: this.$t('overall.name'),
+          type: 'input',
+          label: 'name',
+          disabled: false
+        }, {
+          name: 'SN',
+          type: 'input',
+          label: 'sn',
+          disabled: false
+        }, {
+          name: 'IP',
+          type: 'input',
+          label: 'manageIp',
+          disabled: false
+        }, {
+          name: this.$t('asset.state'),
+          type: 'assetState',
+          label: 'stateIds',
+          disabled: false
+        }]
+      },
+      blankSilenceObject: {
+        startAt: ''
+      },
+      objectSilence: {},
+      silenceBoxShow: false,
+      searchLabel: { dcIds: this.obj.id },
+      brandData: [],
+      modelData: [],
+      stateData: [],
+      typeData: [],
+      dcData: [],
+      snmpCredentialData: [],
+      fieldGroupData: []
+    }
+  },
+  methods: {
+    duplicate (row) {
+      this.object = { ...row, id: '', name: `${row.name}-copy` }
+      this.rightBox.show = true
+    },
+    getStateData () {
+      return new Promise(resolve => {
+        this.$get('asset/stateConf').then(response => {
+          if (response.code === 200) {
+            this.stateData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    getTypeData () {
+      return new Promise(resolve => {
+        this.$get('asset/typeConf/tree').then(response => {
+          if (response.code === 200) {
+            this.typeData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    getDcData () {
+      return new Promise(resolve => {
+        this.$get('dc', { pageSize: -1 }).then(response => {
+          if (response.code === 200) {
+            this.dcData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    getSnmpCredentialData () {
+      return new Promise(resolve => {
+        this.$get('snmp/credential', { pageSize: -1 }).then(response => {
+          if (response.code === 200) {
+            this.snmpCredentialData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    getFieldGroupData () {
+      return new Promise(resolve => {
+        this.$get('asset/field/group', { pageSize: -1 }).then(response => {
+          if (response.code === 200) {
+            this.fieldGroupData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    getBrandData () {
+      return new Promise(resolve => {
+        this.$get('asset/brand').then(response => {
+          if (response.code === 200) {
+            this.brandData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    getModelData (brandId) {
+      return new Promise(resolve => {
+        this.$get('asset/model').then(response => {
+          if (response.code === 200) {
+            this.modelData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    cli (row) {
+      const consoleParam = {
+        id: row.id,
+        host: row.manageIp,
+        port: row.authProtocolPort
+      }
+      this.$store.commit('addConsole', consoleParam)
+    },
+    getTableData (params) {
+      if (params && Object.keys(params).length > 0) {
+        for (const key in params) {
+          this.$set(this.searchLabel, key, params[key])
+        }
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
+      this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).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.dataTable.$refs.dataTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    }
+  },
+  watch: {
+    obj: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        this.searchLabel.dcIds = n.id
+        if (this.from === fromRoute.model) {
+          delete this.searchLabel.dcIds
+          this.searchLabel.modelIds = n.id
+        }
+        if (this.from === fromRoute.asset) {
+          delete this.searchLabel.dcIds
+          this.searchLabel.pids = n.id
+        }
+        this.getTableData()
+      }
+    }
+  },
+  mounted () {
+    this.getBrandData()
+    this.getStateData()
+    this.getTypeData()
+    this.getDcData()
+    this.getSnmpCredentialData()
+    this.getFieldGroupData()
+  }
+}
+</script>

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

@@ -238,6 +238,10 @@ export default {
           delete this.searchLabel.dcIds
           this.searchLabel.modelIds = n.id
         }
+        if (this.from === fromRoute.asset) {
+          delete this.searchLabel.dcIds
+          this.searchLabel.pids = n.id
+        }
         this.getTableData()
       }
     }

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

@@ -124,6 +124,8 @@ const cn = {
     SyncSave: '保存同时更新 Assets',
     copySuccess: '复制成功',
     parent: '父级',
+    children: '子级',
+    assetSubTab: '子级 asset',
     moreOption: '更多选项',
     copy: '复制',
     silence: '静默',

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

@@ -128,6 +128,8 @@ const en = {
     SyncSave: 'Save&Sync',
     copySuccess: 'Copy success',
     parent: 'Parent',
+    children: 'Sub asset',
+    assetSubTab: 'Sub asset',
     dc: 'Data center',
     labels: 'Label',
     moreOption: 'More option',

nezha-fronted/src/components/common/project/L5/services/canvas.js

@@ -208,7 +208,7 @@ export const imageTemp2 = {
       width: 100,
       height: 100
     },
-    imageRatio: true,
+    imageRatio: false,
     lineWidth: 0,
     rotate: 0,
     offsetRotate: 0,
@@ -280,13 +280,12 @@ export function myIconRect2 (node) {
   node.fullIconRect = node.rect
 }
 export function myTextRect2 (node) {
-  // node.textRect = new Rect(
+  node.textRect = new Rect(
-  //   node.rect.x + node.paddingLeft,
+    node.rect.x + node.paddingLeft,
-  //   node.rect.y + node.rect.height + 10,
+    node.rect.y + node.rect.height + 10,
-  //   node.rect.width - (node.paddingLeft + node.paddingRight),
+    node.rect.width - (node.paddingLeft + node.paddingRight),
-  //   20
+    20
-  // )
+  )
-  node.textRect = {}
   node.fullTextRect = node.rect
 }
 /* 自定义图片组件 */

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

@@ -363,7 +363,8 @@ const canvasOptions = {
   translateKey: 'None',
   disableEmptyLine: true,
   autoExpandDistance: 0,
-  minScale: 0.01
+  minScale: 0.01,
+  scaleKey: -1
 }
 export default {
   name: 'topologyL5',

nezha-fronted/src/components/common/rightBox/asset/assetBox.vue

@@ -369,7 +369,7 @@ export default {
       immediate: true,
       handler (n) {
         if (n.id) {
-          this.vmLock = n.vm === 1 // vm == 1 时，锁定model和location
+          // this.vmLock = n.vm === 1 // vm == 1 时，锁定model和location
           if (this.editAsset.id) { // 有id表示是修改asset，需要注意不要覆盖掉原有的port
             const oldPort = this.obj.authProtocolPort // 原有的port
             const oldAuthProtocol = this.obj.type.authProtocol // 原有的协议

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

@@ -58,6 +58,10 @@
         </template>
         <template v-else-if="item.prop === 'model'">{{scope.row.model ? scope.row.model.name : '-'}}</template>
         <template v-else-if="item.prop === 'parent'">{{scope.row.parent ? scope.row.parent.name : '-'}}</template>
+        <template v-else-if="item.prop === 'children'">
+          <div  @click="$emit('showBottomBox', 'assetSubTab', scope.row)" v-if="scope.row.childrenNum"> {{scope.row.childrenNum}}</div>
+          <span v-else> - </span>
+        </template>
         <template v-else-if="item.prop === 'brand'">{{scope.row.brand ? scope.row.brand.name : '-'}}</template>
         <template v-else-if="item.prop === 'purchaseDate'">{{scope.row.purchaseDate ? scope.row.purchaseDate : '--'}}</template>
         <template v-else>
@@ -131,6 +135,11 @@ export default {
           show: true,
           width: 140,
           sortable: 'custom'
+        }, {
+          label: this.$t('overall.children'),
+          prop: 'children',
+          show: false,
+          width: 110
         }, {
           label: this.$t('overall.parent'),
           prop: 'parent',
@@ -208,7 +217,7 @@ export default {
     hideTableTooltip,
     tableDataSort (item) {
       let orderBy = ''
-      let str = item.prop
+      const str = item.prop
       if (str === 'dc') {
         orderBy = str
       }