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

NEZ-744 fix:project topo 图中各个module 的图标颜色实现 与 module 异常信息关联

Browse Source
This commit is contained in:
zhangyu
2021-06-15 10:05:18 +08:00
parent ce13476e35
commit 41ec6a84d2
3 changed files with 1704 additions and 1684 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/common/project/popData/alertTable.vue
View File

@@ -208,7 +208,7 @@ export default {
delete this.searchLabel.startAt
delete this.searchLabel.endAt
}
this.$get(this.url + '?state=' + this.state, { ...this.searchLabel }).then(response => {
this.$get(this.url, { state: this.state, ...this.searchLabel }).then(response => {
this.tools.loading = false
if (response.code == 200) {
this.nowTime = this.utcTimeToTimezoneStr(response.time)

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

@@ -1029,6 +1029,7 @@ export default {
},
getNodesArr () {
const arr = []
if (!getTopology(this.topologyIndex)) return
this.nodesArr = getTopology(this.topologyIndex).data.pens.filter(item => {
if (!item.data) {
@@ -1037,26 +1038,35 @@ export default {
moduleName: '',
show: false,
error: false,
expressArr: []
expressArr: [],
state:{}
}
}
return item.type === 0
})
// this.nodesArr=this.nodesArr.map(item=>{
// if(!item.data){
// item.data={
// moduleId:'',
// moduleName:'',
// show:false,
// error:false,
// expressArr:[],
// }
// }
// return {
// rect:item.rect,
// data:item.data
// }
// });
this.nodesArr.forEach(item=>{
item.data.error = false
item.data.state = {
endpoint: false,
asset: false,
total: false,
other: false,
info: false,
alert: false,
main: false,
error: false
}
arr.push(this.$get('stat/module/abnormal',{moduleId: item.data.moduleId}))
});
Promise.all(arr).then(res => {
this.nodesArr.forEach( (item, index) => {
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.alert = !!res[index].data.list[0].alert
item.data.state.endpoint = !!res[index].data.list[0].endpoint
})
this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
})
// 打开动画 是否更新顶部图标
this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
},

88
nezha-fronted/src/components/common/project/topologyPrev.vue
View File

@@ -335,9 +335,9 @@
</template>
<script>
import { Topology, registerNode } from '@topology/core'
import imgDefault from '@/components/common/project/L5/services/img'
import {
import { Topology, registerNode } from '@topology/core'
import imgDefault from '@/components/common/project/L5/services/img'
import {
Tools,
canvasRegister,
imageTemp,
@@ -349,31 +349,31 @@ import {
onChangeAnimateLine,
myCubec,
myCubeAnchors
} from './L5/services/canvas.js'
import { getTopology, setTopology } from '../js/common'
import CanvasProps from './L5/CanvasProps'
import topologyTopTool from './L5//topologyTopTool'
import popDataMain from './popData/Main'
import popDataInfo from './popData/Info'
import alertTable from './popData/alertTable'
import assetTable from './popData/assetTable'
import endpointTable from './popData/endpointTable'
import topoTooltip from './L5/topoTooltip'
import { getMetricTypeValue } from '../js/tools'
import bus from '../../../libs/bus'
import topologyPrev from './topologyPrev'
// 注册到画布
registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
registerNode('myCube', myCubec, myCubeAnchors, null, null)
} from './L5/services/canvas.js'
import { getTopology, setTopology } from '../js/common'
import CanvasProps from './L5/CanvasProps'
import topologyTopTool from './L5//topologyTopTool'
import popDataMain from './popData/Main'
import popDataInfo from './popData/Info'
import alertTable from './popData/alertTable'
import assetTable from './popData/assetTable'
import endpointTable from './popData/endpointTable'
import topoTooltip from './L5/topoTooltip'
import { getMetricTypeValue } from '../js/tools'
import bus from '../../../libs/bus'
import topologyPrev from './topologyPrev'
// 注册到画布
registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
registerNode('myCube', myCubec, myCubeAnchors, null, null)
const canvasOptions = {
const canvasOptions = {
rotateCursor: '/img/rotate.cur',
translateKey: 'None',
disableEmptyLine: true,
autoExpandDistance: 0,
minScale: 0.01
}
export default {
}
export default {
name: 'topologyL5',
data () {
return {
@@ -1029,6 +1029,7 @@ export default {
},
getNodesArr () {
const arr = []
if (!getTopology(this.topologyIndex)) return
this.nodesArr = getTopology(this.topologyIndex).data.pens.filter(item => {
if (!item.data) {
@@ -1037,26 +1038,35 @@ export default {
moduleName: '',
show: false,
error: false,
expressArr: []
expressArr: [],
state:{}
}
}
return item.type === 0
})
// this.nodesArr=this.nodesArr.map(item=>{
// if(!item.data){
// item.data={
// moduleId:'',
// moduleName:'',
// show:false,
// error:false,
// expressArr:[],
// }
// }
// return {
// rect:item.rect,
// data:item.data
// }
// });
this.nodesArr.forEach(item=>{
item.data.error = false
item.data.state = {
endpoint: false,
asset: false,
total: false,
other: false,
info: false,
alert: false,
main: false,
error: false
}
arr.push(this.$get('stat/module/abnormal',{moduleId: item.data.moduleId}))
});
Promise.all(arr).then(res => {
this.nodesArr.forEach( (item, index) => {
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.alert = !!res[index].data.list[0].alert
item.data.state.endpoint = !!res[index].data.list[0].endpoint
})
this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
})
// 打开动画 是否更新顶部图标
this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
},
@@ -2090,7 +2100,7 @@ export default {
}
window.removeEventListener('resize', this.winResize)
}
}
}
</script>
<style lang="scss">
.el-dropdown-menu {