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

NEZ-1029 ： topology bug修改

Browse Source
This commit is contained in:
zhangyu
2021-09-26 12:48:04 +08:00
parent 30860ce781
commit c97c26c727
2 changed files with 126 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
nezha-fronted/src/components/common/project/L5/CanvasProps.vue
View File

@@ -14,7 +14,7 @@
<el-form-item v-if="!selection.pen.type&&!fromDiagram" class="sub-box half-form-item" label="Module" <el-form-item v-if="!selection.pen.type&&!fromDiagram" class="sub-box half-form-item" label="Module"
prop="moduleId"> prop="moduleId">
<el-select v-model="selection.pen.data.moduleId" :placeholder="$t('el.select.placeholder')" <el-select v-model="selection.pen.data.moduleId" :placeholder="$t('el.select.placeholder')"
:popper-append-to-body="false" popper-class="asset-dropdown" size="small" :popper-append-to-body="true" popper-class="asset-dropdown" size="small"
@change="moduleIdChange"> @change="moduleIdChange">
<el-option <el-option
v-for="item in modules" v-for="item in modules"
@@ -80,7 +80,7 @@
</el-col> </el-col>
<el-col style="width: calc(100% - 120px)"> <el-col style="width: calc(100% - 120px)">
<el-select v-model="selection.pen.data.aggregation" :placeholder="$t('el.select.placeholder')" <el-select v-model="selection.pen.data.aggregation" :placeholder="$t('el.select.placeholder')"
:popper-append-to-body="false" class="right-box-row-with-btn" :popper-append-to-body="true" class="right-box-row-with-btn"
popper-class="chart-box-dropdown-small" popper-class="chart-box-dropdown-small"
size="mini" size="mini"
style="width: 100%" value-key="chartType"> style="width: 100%" value-key="chartType">
@@ -144,7 +144,7 @@
<!--线--> <!--线-->
<el-select v-if="selection.pen&&selection.pen.type&&item.level!==0" <el-select v-if="selection.pen&&selection.pen.type&&item.level!==0"
v-model="item.animateType" v-model="item.animateType"
:popper-append-to-body="false" :popper-append-to-body="true"
size="small"> size="small">
<el-option <el-option
v-for="(item,index) in lineAnimateOptions" v-for="(item,index) in lineAnimateOptions"
@@ -156,7 +156,7 @@
<!--点--> <!--点-->
<el-select v-if="selection.pen&&!selection.pen.type&&item.level!==0" <el-select v-if="selection.pen&&!selection.pen.type&&item.level!==0"
v-model="item.animateType" v-model="item.animateType"
:popper-append-to-body="false" :popper-append-to-body="true"
size="small"> size="small">
<el-option <el-option
v-for="(item,index) in nodeAnimateOptions" v-for="(item,index) in nodeAnimateOptions"
@@ -221,7 +221,7 @@
<el-form-item :label="$t('dashboard.panel.chartForm.type')" class="half-form-item half-form-item--end" <el-form-item :label="$t('dashboard.panel.chartForm.type')" class="half-form-item half-form-item--end"
prop="type"> prop="type">
<el-select v-model="selection.pen.data.type" :placeholder="$t('el.select.placeholder')" <el-select v-model="selection.pen.data.type" :placeholder="$t('el.select.placeholder')"
:popper-append-to-body="false" class="right-box-row-with-btn" :popper-append-to-body="true" class="right-box-row-with-btn"
popper-class="chart-box-dropdown-small" popper-class="chart-box-dropdown-small"
size="mini" value-key="chartType"> size="mini" value-key="chartType">
<el-option v-for="item in chartTypeList" :key="item.id" :label="item.name" :value="item.id"> <el-option v-for="item in chartTypeList" :key="item.id" :label="item.name" :value="item.id">
@@ -438,7 +438,7 @@
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type"> <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
<div>{{ $t('project.topology.gradient') }}</div> <div>{{ $t('project.topology.gradient') }}</div>
<div class="p10 pl0 gradient-to"> <div class="p10 pl0 gradient-to">
<el-select :popper-append-to-body="false" v-model="selection.pen.gradientType" size="small" <el-select :popper-append-to-body="true" v-model="selection.pen.gradientType" size="small"
class="color-before-select" popper-class="color-before-select" class="color-before-select" popper-class="color-before-select"
style="width: 60px;border-radius: 4px 0 0 4px;background: #F5F7FA" @change="bkTypeChange"> style="width: 60px;border-radius: 4px 0 0 4px;background: #F5F7FA" @change="bkTypeChange">
<div slot="prefix"> <div slot="prefix">
@@ -481,7 +481,7 @@
<div class="props-pen-item special-select"> <div class="props-pen-item special-select">
<div>{{ $t('project.topology.lineDash') }}</div> <div>{{ $t('project.topology.lineDash') }}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<el-select :popper-append-to-body="false" v-model="selection.pen.dash" size="small" <el-select :popper-append-to-body="true" v-model="selection.pen.dash" size="small"
@change="onChange"> @change="onChange">
<div slot="prefix"> <div slot="prefix">
<div class="icon-item"> <div class="icon-item">
@@ -511,7 +511,7 @@
<div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type"> <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
<div>{{ $t('project.topology.lineType') }}</div> <div>{{ $t('project.topology.lineType') }}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<el-select :popper-append-to-body="false" v-model="selection.pen.name" size="small" <el-select :popper-append-to-body="true" v-model="selection.pen.name" size="small"
@change="onClickName"> @change="onClickName">
<div slot="prefix"> <div slot="prefix">
<div class="icon-item"> <div class="icon-item">
@@ -541,7 +541,7 @@
<div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type"> <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
<div>{{ $t('project.topology.fromArrow') }}</div> <div>{{ $t('project.topology.fromArrow') }}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<el-select :popper-append-to-body="false" v-model="selection.pen.fromArrow" size="small" <el-select :popper-append-to-body="true" v-model="selection.pen.fromArrow" size="small"
@change="onClickFromArrow"> @change="onClickFromArrow">
<div slot="prefix"> <div slot="prefix">
<div class="icon-item"> <div class="icon-item">
@@ -590,7 +590,7 @@
<div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type"> <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
<div>{{ $t('project.topology.toArrow') }}</div> <div>{{ $t('project.topology.toArrow') }}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<el-select :popper-append-to-body="false" v-model="selection.pen.toArrow" size="small" <el-select :popper-append-to-body="true" v-model="selection.pen.toArrow" size="small"
@change="onClickToArrow"> @change="onClickToArrow">
<div slot="prefix"> <div slot="prefix">
<div class="icon-item"> <div class="icon-item">
@@ -1135,7 +1135,7 @@ export default {
{ {
id: 'stackArea', id: 'stackArea',
name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label') name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
}, }
// { // {
// id: 'bar', // id: 'bar',
// name: this.$t('dashboard.panel.chartForm.typeVal.bar.label') // name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
@@ -2471,6 +2471,7 @@ export default {
/deep/ .metric-selector-title { /deep/ .metric-selector-title {
margin-left: 10px; margin-left: 10px;
width: 98px !important;
} }
/deep/ .query-row .input-box { /deep/ .query-row .input-box {
@@ -2495,4 +2496,10 @@ export default {
/deep/ .metric-selector-title { /deep/ .metric-selector-title {
background: #fff !important; background: #fff !important;
} }
/deep/ .el-collapse-item__arrow.el-icon-arrow-right{
display: inline-block !important;
}
/deep/ .el-select--mini {
width: 100%;
}
</style> </style>

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

@@ -21,7 +21,7 @@
<el-collapse-item :title="item.group" :name="item.group"> <el-collapse-item :title="item.group" :name="item.group">
<template slot="title"> <template slot="title">
<div style="display: flex;width: 100%;"> <div style="display: flex;width: 100%;">
<i class="nz-icon nz-icon-caret-right"></i> <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click="tooltipDeleteTitle(item)"></i> <i class="nz-icon nz-icon-arrow-right"></i> <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click="tooltipDeleteTitle(item)"></i>
</div> </div>
</template> </template>
<div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons"> <div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons">
@@ -121,7 +121,7 @@
</span> </span>
</div> </div>
<div v-if="(!editTopologyFlag&&!fromOverView) && !isPreview" class="top-tools" style="padding-left: 10px"> <div v-if="(!editTopologyFlag&&!fromOverView) && !isPreview" class="top-tools" style="padding-left: 10px">
<div>{{topologyInfo.name}}</div> <div>{{obj.name}}</div>
<div v-if="!editTopologyFlag&&!fromPrev&&!fromOverView" class="top-tool-right"> <div v-if="!editTopologyFlag&&!fromPrev&&!fromOverView" class="top-tool-right">
<pick-time <pick-time
v-show="!editTopologyFlag" v-show="!editTopologyFlag"
@@ -185,7 +185,7 @@
:class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.state&&item.data.state.error&&!item.data.show,'model-error-active':item.data.state&&item.data.state.error&&item.data.show}" :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.state&&item.data.state.error&&!item.data.show,'model-error-active':item.data.state&&item.data.state.error&&item.data.show}"
@click="showNodeTools(index,item)" @click="showNodeTools(index,item)"
> >
<i class="nz-icon nz-icon-model"></i> <i style="cursor: pointer" class="nz-icon nz-icon-model"></i>
</i> </i>
<!--'selpop':selpopIs(item),'no-selPop':!selpopIs(item),'error-model-stat':modelPopError(item) @click="popClick(item.id)" --> <!--'selpop':selpopIs(item),'no-selPop':!selpopIs(item),'error-model-stat':modelPopError(item) @click="popClick(item.id)" -->
<div v-for="(item1, index) in popData" :key="index"> <div v-for="(item1, index) in popData" :key="index">
@@ -816,6 +816,7 @@ export default {
data.pens.forEach(item => { data.pens.forEach(item => {
if (item.type === 0 && item.data.imageId) { if (item.type === 0 && item.data.imageId) {
const img = this.iconArray.find(item1 => item1.id == item.data.imageId) const img = this.iconArray.find(item1 => item1.id == item.data.imageId)
console.log(img)
item.image = img ? img.image : imgDefault item.image = img ? img.image : imgDefault
} }
if (item.type === 0) { if (item.type === 0) {
@@ -849,16 +850,27 @@ export default {
Promise.all(promiseArr).then(res => { Promise.all(promiseArr).then(res => {
res.forEach((response, index) => { res.forEach((response, index) => {
const item = data.pens[index] const item = data.pens[index]
if (item.type === 0) { if (item.type === 0 && item.data.state) {
item.data.state.error = item.data.error = !res[index].data.list[0].state item.data.state.error = item.data.error = !res[index].data.list[0].state
item.data.state.asset = !!res[index].data.list[0].asset item.data.state.asset = !!res[index].data.list[0].asset
item.data.state.alert = !!res[index].data.list[0].alert item.data.state.alert = !!res[index].data.list[0].alert
item.data.state.endpoint = !!res[index].data.list[0].endpoint item.data.state.endpoint = !!res[index].data.list[0].endpoint
} else {
item.data.state = {
error: false,
asset: 0,
alert: 0,
endpoint: 0
}
} }
}) })
self.saveData = { ...data } self.saveData = { ...data }
resolve(data) resolve(data)
clearInterval(timer) clearInterval(timer)
}).catch(res => {
self.saveData = { ...data }
resolve(data)
clearInterval(timer)
}) })
}, 100) }, 100)
} }
@@ -1127,7 +1139,7 @@ export default {
onMessage (event, data, e) { onMessage (event, data, e) {
// console.log('onMessage', event, data) // console.log('onMessage', event, data)
// console.log(getTopology(this.topologyIndex)) // console.log(getTopology(this.topologyIndex))
// this.notModuleIDArr=[]; this.notModuleIDArr = []
// this.toolShow.attr = false // this.toolShow.attr = false
// this.toolShow.topTool = false // this.toolShow.topTool = false
// this.$nextTick(() => { // this.$nextTick(() => {
@@ -1311,7 +1323,7 @@ export default {
this.penId = data.id this.penId = data.id
} }
}) })
this.$refs.CanvasProps.loading = true this.$refs.CanvasProps && (this.$refs.CanvasProps.loading = true)
break break
case 'line': case 'line':
case 'addLine': case 'addLine':
@@ -1332,7 +1344,7 @@ export default {
this.penId = data.id this.penId = data.id
} }
}) })
this.$refs.CanvasProps.loading = true this.$refs.CanvasProps && (this.$refs.CanvasProps.loading = true)
break break
case 'multi': case 'multi':
this.props = { this.props = {
@@ -1572,8 +1584,14 @@ export default {
if (res.code == 200) { if (res.code == 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') }) this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
this.uploadPicShow = false this.uploadPicShow = false
this.$get('monitor/project/topo/icon', { id: res.data.id }).then(iconInfo => {
console.log(iconInfo)
this.dealImg(`monitor/project/topo/icon/${res.data.id}/1`).then((data, header) => { this.dealImg(`monitor/project/topo/icon/${res.data.id}/1`).then((data, header) => {
const group = this.tools.find(tool => tool.group === this.uploadPic.unit) const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
this.iconArray.push({
...iconInfo.data.list[0],
image: data
})
if (group) { if (group) {
group.children.push({ group.children.push({
...imageTemp, ...imageTemp,
@@ -1601,6 +1619,8 @@ export default {
}) })
} }
}) })
})
} else { } else {
this.$message.error(res.msg) this.$message.error(res.msg)
} }