gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zhangyu
2021-07-15 14:38:55 +08:00
parent 4191c8113f
commit cfccac90e7
11 changed files with 335 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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') { // 本地显示

22
nezha-fronted/src/components/common/ChartDiagram/diagram.vue
View File

@@ -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),
height: res.headers.height === -1 ? 100 : (res.headers.height > 900 ? 900 : res.headers.height)
// 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)
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)

33
nezha-fronted/src/components/common/bottomBox/bottomBox.vue
View File

@@ -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: {

258
nezha-fronted/src/components/common/bottomBox/tabs/assetSubTab.vue Normal file
View File

@@ -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>

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

@@ -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()
}
}

2
nezha-fronted/src/components/common/language/cn.js
View File

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

2
nezha-fronted/src/components/common/language/en.js
View File

@@ -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',

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

@@ -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.rect.x + node.paddingLeft,
// node.rect.y + node.rect.height + 10,
// node.rect.width - (node.paddingLeft + node.paddingRight),
// 20
// )
node.textRect = {}
node.textRect = new Rect(
node.rect.x + node.paddingLeft,
node.rect.y + node.rect.height + 10,
node.rect.width - (node.paddingLeft + node.paddingRight),
20
)
node.fullTextRect = node.rect
}
/* 自定义图片组件 */

3
nezha-fronted/src/components/common/project/topologyL5.vue
View File

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

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

@@ -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 // 原有的协议

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

@@ -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
}