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

NEZ-2034 feat： topology js插件升级到最新版本

Browse Source
This commit is contained in:
zhangyu
2022-08-10 11:28:07 +08:00
parent 7a837b8f47
commit 50ec4a6680
8 changed files with 595 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/assets/css/index.scss
View File

@@ -16,7 +16,7 @@ body {
min-width: 1024px; min-width: 1024px;
margin:0 !important; margin:0 !important;
padding: 0 !important; padding: 0 !important;
cursor: default !important; cursor: default;
} }
html { html {
height: 100%; height: 100%;

38
nezha-fronted/src/assets/css/themes/src/input-number.scss
View File

@@ -19,7 +19,32 @@
} }
} }
@include e((increase, decrease)) { @include e(increase) {
position: absolute;
z-index: 1;
top: 1px;
width: $--input-height;
height: auto;
text-align: center;
background: $--background-color-base;
color: $--color-text-regular;
cursor: pointer;
font-size: 13px;
&:hover {
color: $--color-primary;
&:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
border-color: $--input-focus-border;
}
}
&.is-disabled {
color: $--disabled-color-base;
cursor: not-allowed;
}
}
@include e(decrease) {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 1px; top: 1px;
@@ -58,7 +83,16 @@
} }
@include when(disabled) { @include when(disabled) {
@include e((increase, decrease)) { @include e(increase) {
border-color: $--disabled-border-base;
color: $--disabled-border-base;
&:hover {
color: $--disabled-border-base;
cursor: not-allowed;
}
}
@include e(decrease) {
border-color: $--disabled-border-base; border-color: $--disabled-border-base;
color: $--disabled-border-base; color: $--disabled-border-base;

48
nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue
View File

@@ -1,14 +1,14 @@
<template> <template>
<div class="menus"> <div class="menus">
<div> <div>
<a :class="{disabled:!props.node && !props.nodes}" @click="onTop()">{{$t('project.topology.top')}}</a> <a :class="{disabled:!props.pen && !props.pens}" @click="onTop()">{{$t('project.topology.top')}}</a>
</div> </div>
<div> <div>
<a :class="{disabled:!props.node && !props.nodes}" @click="onBottom()">{{$t('project.topology.bottom')}}</a> <a :class="{disabled:!props.pen && !props.pens}" @click="onBottom()">{{$t('project.topology.bottom')}}</a>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div> <div>
<a :class="{disabled:!props.node && !props.nodes && !props.line}" @click="onDel()">{{$t('overall.delete')}}</a> <a :class="{disabled:!props.pen && !props.pens && !props.line}" @click="onDel()">{{$t('overall.delete')}}</a>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div> <div>
@@ -49,58 +49,54 @@ export default {
}, },
methods: { methods: {
onTop () { onTop () {
if (this.props.node) { if (this.props.pens) {
getTopology(this.index).top(this.props.node) for (const item of this.props.pens) {
}
if (this.props.nodes) {
for (const item of this.props.nodes) {
getTopology(this.index).top(item) getTopology(this.index).top(item)
} }
} else if (this.props.pen) {
getTopology(this.index).top(this.props.pen)
} }
getTopology(this.index).render() getTopology(this.index).render()
}, },
onBottom () { onBottom () {
if (this.props.node) { if (this.props.pens) {
getTopology(this.index).bottom(this.props.node) for (const item of this.props.pens) {
}
if (this.props.nodes) {
for (const item of this.props.nodes) {
getTopology(this.index).bottom(item) getTopology(this.index).bottom(item)
} }
} else if (this.props.pen) {
getTopology(this.index).bottom(this.props.pen)
} }
getTopology(this.index).render() getTopology(this.index).render()
}, },
onCombine (stand) { onCombine (stand) {
if (!this.props.nodes) { if (!this.props.pens) {
return return
} }
getTopology(this.index).combine(this.props.nodes, stand) getTopology(this.index).combine(this.props.pens, stand)
getTopology(this.index).render() getTopology(this.index).render()
}, },
onUncombine () { onUncombine () {
if (!this.props.node) { if (!this.props.pen) {
return return
} }
getTopology(this.index).uncombine(this.props.node) getTopology(this.index).uncombine(this.props.pen)
getTopology(this.index).render() getTopology(this.index).render()
}, },
onLock () { onLock () {
// eslint-disable-next-line vue/no-mutating-props // eslint-disable-next-line vue/no-mutating-props
this.props.locked = !this.props.locked this.props.locked = !this.props.locked
if (this.props.node) { if (this.props.pen) {
// eslint-disable-next-line vue/no-mutating-props // eslint-disable-next-line vue/no-mutating-props
this.props.node.locked = this.props.locked this.props.pen.locked = this.props.locked
} }
if (this.props.nodes) { if (this.props.pens) {
for (const item of this.props.nodes) { for (const item of this.props.pens) {
item.locked = this.props.locked item.locked = this.props.locked
} }
} }
@@ -113,13 +109,13 @@ export default {
}, },
onDel () { onDel () {
getTopology(this.index).delete() getTopology(this.index).delete(this.props.pens || [this.props.pen])
}, },
canvascut () { canvascut () {
getTopology(this.index).cut() getTopology(this.index).cut(this.props.pens || [this.props.pen])
}, },
canvascopy () { canvascopy () {
getTopology(this.index).copy() getTopology(this.index).copy(this.props.pens || [this.props.pen])
}, },
canvaspaste () { canvaspaste () {
getTopology(this.index).paste() getTopology(this.index).paste()

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

@@ -405,7 +405,7 @@
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type&&!selection.pen.iconFamily"> <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type&&!selection.pen.iconFamily">
<div>{{ $t('project.topology.bac') }}</div> <div>{{ $t('project.topology.bac') }}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<nezhaColor :isTopo="true" :value-arr="[{name:'fillStyle',value:selection.pen.fillStyle}]" <nezhaColor :isTopo="true" :value-arr="[{name:'background',value:selection.pen.background}]"
@colorChange="colorChange"/> @colorChange="colorChange"/>
</div> </div>
</div> </div>
@@ -465,7 +465,7 @@
<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="true" v-model="selection.pen.dash" size="small" popper-class="right-box-select-top right-public-box-dropdown-top" <el-select :popper-append-to-body="true" v-model="selection.pen.dash" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
@change="onChange"> @change="(val)=>{onChange('lineDash', val)}">
<div slot="prefix"> <div slot="prefix">
<div class="icon-item"> <div class="icon-item">
<svg> <svg>
@@ -494,14 +494,14 @@
<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="true" v-model="selection.pen.name" size="small" popper-class="right-box-select-top right-public-box-dropdown-top" <el-select :popper-append-to-body="true" v-model="selection.pen.lineName" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
@change="onClickName"> @change="onClickName">
<div slot="prefix"> <div slot="prefix">
<div class="icon-item"> <div class="icon-item">
<svg> <svg>
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1"> <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
<path <path
:d="penLineType.find((item,i)=>item.name==selection.pen.name).d" :d="penLineType.find((item,i)=>item.name==selection.pen.lineName).d"
> >
</path> </path>
</g> </g>
@@ -511,7 +511,7 @@
<el-option v-for="(item,index) in penLineType" :value="item.name" :key="index"> <el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
<div class="icon-item"> <div class="icon-item">
<svg> <svg>
<g fill="none" :stroke="(selection.pen.name==item.name)?'#ee9d3f':item.strokeColor" stroke-width="1"> <g fill="none" :stroke="(selection.pen.lineName==item.name)?'#ee9d3f':item.strokeColor" stroke-width="1">
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path> <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
</g> </g>
</svg> </svg>
@@ -641,7 +641,7 @@
<div class="props-pen-item"> <div class="props-pen-item">
<div>{{ $t('project.topology.lineColor') }}</div> <div>{{ $t('project.topology.lineColor') }}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<nezhaColor :isTopo="true" :value-arr="[{name:'strokeStyle',value:selection.pen.strokeStyle}]" <nezhaColor :isTopo="true" :value-arr="[{name:'color',value:selection.pen.color}]"
@colorChange="colorChange"/> @colorChange="colorChange"/>
</div> </div>
</div> </div>
@@ -683,7 +683,7 @@
<div class="props-pen-item"> <div class="props-pen-item">
<div>{{ $t('project.topology.fontColor') }}</div> <div>{{ $t('project.topology.fontColor') }}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<nezhaColor :isTopo="true" :value-arr="[{name:'fontColor',value:selection.pen.fontColor}]" <nezhaColor :isTopo="true" :value-arr="[{name:'textColor',value:selection.pen.textColor}]"
@colorChange="colorChange"/> @colorChange="colorChange"/>
</div> </div>
</div> </div>
@@ -716,39 +716,39 @@
</div> </div>
</div> </div>
<div class="props-pen-item"> <!-- <div class="props-pen-item">-->
<div>{{ $t('project.topology.textOffsetX') }}</div> <!-- <div>{{ $t('project.topology.textOffsetX') }}</div>-->
<div class="p10 pl0"> <!-- <div class="p10 pl0">-->
<el-input-number <!-- <el-input-number-->
@focus="inputFocus" <!-- @focus="inputFocus"-->
@blur="inputBlur" <!-- @blur="inputBlur"-->
:precision="0" <!-- :precision="0"-->
controls-position="right" <!-- controls-position="right"-->
size="small" name="x" <!-- size="small" name="x"-->
class="input" <!-- class="input"-->
v-model.number="selection.pen.textOffsetX" <!-- v-model.number="selection.pen.textLeft"-->
:readonly="readonly" <!-- :readonly="readonly"-->
required <!-- required-->
@change="onChange()"></el-input-number> <!-- @change="onChange()"></el-input-number>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="props-pen-item"> <!-- <div class="props-pen-item">-->
<div>{{ $t('project.topology.textOffsetY') }}</div> <!-- <div>{{ $t('project.topology.textOffsetY') }}</div>-->
<div class="p10 pl0"> <!-- <div class="p10 pl0">-->
<el-input-number <!-- <el-input-number-->
@focus="inputFocus" <!-- @focus="inputFocus"-->
@blur="inputBlur" <!-- @blur="inputBlur"-->
:precision="0" <!-- :precision="0"-->
controls-position="right" <!-- controls-position="right"-->
size="small" name="x" <!-- size="small" name="x"-->
class="input" <!-- class="input"-->
v-model.number="selection.pen.textOffsetY" <!-- v-model.number="selection.pen.textTop"-->
:readonly="readonly" <!-- :readonly="readonly"-->
required <!-- required-->
@change="onChange()"></el-input-number> <!-- @change="onChange()"></el-input-number>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> </div>
</el-collapse-item> </el-collapse-item>
@@ -865,9 +865,9 @@
<!-- </div>--> <!-- </div>-->
<!-- <div class="project-content-item half">--> <!-- <div class="project-content-item half">-->
<!-- <label>{{$t('project.topology.fontColor')}}</label>--> <!-- <label>{{$t('project.topology.textColor')}}</label>-->
<!-- <div class="full pr10 h32">--> <!-- <div class="full pr10 h32">-->
<!-- <nezhaColor :isTopo=true :value-arr="[{name:'fontColor',value:topologyData.data.fontColor}]" @colorChange="(val,key)=>{--> <!-- <nezhaColor :isTopo=true :value-arr="[{name:'textColor',value:topologyData.data.textColor}]" @colorChange="(val,key)=>{-->
<!-- changeTopologyOpt(val,key,true)--> <!-- changeTopologyOpt(val,key,true)-->
<!-- }"/>--> <!-- }"/>-->
<!-- </div>--> <!-- </div>-->
@@ -1102,6 +1102,7 @@ import chartDataFormat from '../../../chart/chartDataFormat'
import promqlInput from '../../../page/dashboard/explore/promqlInput' import promqlInput from '../../../page/dashboard/explore/promqlInput'
import nezhaColor from '../../nezhaColor' import nezhaColor from '../../nezhaColor'
import promqlInputMixin from '@/components/common/mixin/promqlInput' import promqlInputMixin from '@/components/common/mixin/promqlInput'
import { s8 } from '@topology/core'
const rz = { const rz = {
methods: { methods: {
@@ -1184,7 +1185,7 @@ export default {
url: '', url: '',
fontSize: 14, fontSize: 14,
align: 'left', align: 'left',
fontColor: '#000000', textColor: '#000000',
opacity: 1 opacity: 1
} }
}, },
@@ -1192,10 +1193,10 @@ export default {
dash: '', dash: '',
font: '', font: '',
lineWidth: '', lineWidth: '',
strokeStyle: '', color: '',
textMaxLine: '', textMaxLine: '',
textOffsetX: '', textLeft: '',
textOffsetY: '', textTop: '',
globalAlpha: '' globalAlpha: ''
}, },
penNumber: '', penNumber: '',
@@ -1323,10 +1324,10 @@ export default {
} }
], ],
lineAnimateOptions: [ lineAnimateOptions: [
{ id: 1, name: this.$t('project.topology.flow') }, { id: 'flow', name: this.$t('project.topology.flow') },
{ id: 'beads', name: this.$t('project.topology.beads') }, { id: 'beads', name: this.$t('project.topology.beads') },
{ id: 'dot', name: this.$t('project.topology.dot') }, { id: 'dot', name: this.$t('project.topology.dot') },
{ id: 'comet', name: this.$t('project.topology.comet') }, // { id: 'comet', name: this.$t('project.topology.comet') },
{ id: 'custom', name: this.$t('project.topology.none') } { id: 'custom', name: this.$t('project.topology.none') }
], ],
nodeAnimateOptions: [ nodeAnimateOptions: [
@@ -1446,9 +1447,9 @@ export default {
immediate: true immediate: true
}, },
'selection.pen.data': { 'selection.pen.data': {
handler (n) { handler (n, o) {
// this.loading = false // this.loading = false
if (this.selection.pen && JSON.stringify(this.selection.pen.type)) { if (this.selection.pen && JSON.stringify(this.selection.pen.type) && (JSON.stringify(n) !== JSON.stringify(o)) && o) {
this.$emit('change', this.selection.pen) this.$emit('change', this.selection.pen)
} }
} }
@@ -1477,7 +1478,7 @@ export default {
dataOption.data = {} dataOption.data = {}
} }
Object.keys(this.topologyData.data).forEach((key) => { Object.keys(this.topologyData.data).forEach((key) => {
if (key === 'projectInfo' || key === 'alertInfo' || key === 'fontSize' || key === 'align' || key === 'fontColor' || key === 'opacity') { if (key === 'projectInfo' || key === 'alertInfo' || key === 'fontSize' || key === 'align' || key === 'textColor' || key === 'opacity') {
this.topologyData.data[key] = (JSON.stringify(dataOption.data[key]) ? dataOption.data[key] : this.topologyData.data[key]) this.topologyData.data[key] = (JSON.stringify(dataOption.data[key]) ? dataOption.data[key] : this.topologyData.data[key])
} else { } else {
this.topologyData.data[key] = (JSON.stringify(dataOption[key]) ? dataOption[key] : this.topologyData.data[key]) this.topologyData.data[key] = (JSON.stringify(dataOption[key]) ? dataOption[key] : this.topologyData.data[key])
@@ -1539,10 +1540,13 @@ export default {
} }
this.onChange() this.onChange()
}, },
onChange (value) { onChange (value, val) {
if (value === 'lineWidth') { if (value === 'lineWidth') {
this.selection.pen.lineWidth = this.selection.pen.data.lineWidth this.selection.pen.lineWidth = this.selection.pen.data.lineWidth
} }
if (value === 'lineDash') {
this.selection.pen.lineDash = val ? (val == 1 ? [5, 5] : ((val == 2 ? [10, 10] : [10, 10, 2, 10]))) : []
}
this.$emit('change', this.selection.pen) this.$emit('change', this.selection.pen)
// if(!this.selection.pen.type||this.selection.pens){ // if(!this.selection.pen.type||this.selection.pens){
// this.$emit('change',this.selection.pen||this.selection.pens); // this.$emit('change',this.selection.pen||this.selection.pens);
@@ -1580,13 +1584,18 @@ export default {
this.onChange() this.onChange()
}, },
onClickName (name) { onClickName (name) {
this.pen.name = name this.pen.lineName = name
this.selection.pen.calcControlPoints() // this.selection.pen.calcControlPoints()
this.drowdown = 0 this.drowdown = 0
if (this.selection.pen) { if (this.selection.pen) {
this.selection.pen.name = name this.selection.pen.lineName = name
this.selection.pen.anchors = [
this.selection.pen.anchors[0],
this.selection.pen.anchors[this.selection.pen.anchors.length - 1]
]
getTopology(this.index).updateLineType(this.selection.pen, name)
this.onChange()
} }
this.onChange()
}, },
bkTypeChange (val) { bkTypeChange (val) {
this.selection.pen.data.gradientType = val this.selection.pen.data.gradientType = val
@@ -1606,11 +1615,11 @@ export default {
if (val === 1 || val === 2) { if (val === 1 || val === 2) {
this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientFromColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff' this.selection.pen.gradientFromColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
} }
if (val === 3 || val === 4) { if (val === 3 || val === 4) {
this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientToColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff' this.selection.pen.gradientToColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
} }
this.onChange() this.onChange()
}, },
@@ -1639,25 +1648,25 @@ export default {
this.selection.pen.data.gradientColor = this.colorRGBtoHex(val) this.selection.pen.data.gradientColor = this.colorRGBtoHex(val)
if (bktype === 1 || bktype === 2) { if (bktype === 1 || bktype === 2) {
this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientFromColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff' this.selection.pen.gradientFromColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
} }
if (bktype === 3 || bktype === 4) { if (bktype === 3 || bktype === 4) {
this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientToColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff' this.selection.pen.gradientToColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
} }
} }
if (name === 'fillStyle') { if (name === 'background') {
if (bktype === 1 || bktype === 2) { if (bktype === 1 || bktype === 2) {
this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientFromColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff' this.selection.pen.gradientFromColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
} }
if (bktype === 3 || bktype === 4) { if (bktype === 3 || bktype === 4) {
this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientToColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff' this.selection.pen.gradientToColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
} }
} }
if (name === 'fontColor') { if (name === 'textColor') {
// this.selection.pen.font.color = this.colorRGBtoHex(val) // this.selection.pen.font.color = this.colorRGBtoHex(val)
} }
this.selection.pen.data[name] = this.colorRGBtoHex(val) this.selection.pen.data[name] = this.colorRGBtoHex(val)
@@ -1694,7 +1703,7 @@ export default {
this.topologyData.data[key] = val this.topologyData.data[key] = val
} }
Object.keys(this.topologyData.data).forEach((key1) => { Object.keys(this.topologyData.data).forEach((key1) => {
if (key1 === 'projectInfo' || key1 === 'alertInfo' || key1 === 'fontSize' || key1 === 'align' || key1 === 'fontColor' || key1 === 'opacity') { if (key1 === 'projectInfo' || key1 === 'alertInfo' || key1 === 'fontSize' || key1 === 'align' || key1 === 'textColor' || key1 === 'opacity') {
getTopology(this.index).data().data[key1] = this.topologyData.data[key1] getTopology(this.index).data().data[key1] = this.topologyData.data[key1]
} else { } else {
getTopology(this.index).data()[key1] = this.topologyData.data[key1] getTopology(this.index).data()[key1] = this.topologyData.data[key1]

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

@@ -1,4 +1,4 @@
import { s16 } from '@topology/core' import { s16, s8 } from '@topology/core'
export let canvas export let canvas
export const Tools = [ export const Tools = [
@@ -235,12 +235,13 @@ export function rectangleImg (ctx, pen) {
ctx.beginPath() ctx.beginPath()
ctx.rect(pen.x, pen.y, pen.width, pen.height) ctx.rect(pen.x, pen.y, pen.width, pen.height)
if (pen.data && pen.data.lineWidth <= 0) { if (pen.data && !pen.data.animateNeedLine) {
ctx.strokeStyle = 'rgba(0,0,0,0)' if (pen.data && pen.data.lineWidth <= 0) {
ctx.strokeStyle = 'rgba(0,0,0,0)'
}
} }
// 必须判空再填充 // 必须判空再填充
(pen.fillStyle || pen.bkType) && ctx.fill() (pen.background || pen.bkType) && ctx.fill()
console.log(pen, pen.calculative.worldIconRect)
pen.calculative.worldIconRect = { pen.calculative.worldIconRect = {
height: pen.height - 10 - 20, height: pen.height - 10 - 20,
rotate: 0, rotate: 0,
@@ -324,6 +325,7 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
color: pen.strokeStyle, color: pen.strokeStyle,
lineWidth: pen.lineWidth, lineWidth: pen.lineWidth,
borderWidth: null, borderWidth: null,
borderColor: pen.strokeStyle,
rotate: pen.rotate, rotate: pen.rotate,
visible: true, visible: true,
background: pen.fillStyle, background: pen.fillStyle,
@@ -337,7 +339,9 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
textAlign: pen.textAlign, textAlign: pen.textAlign,
textBaseline: pen.textBaseline, textBaseline: pen.textBaseline,
textBackground: pen.textBackground, textBackground: pen.textBackground,
lineAnimateType: 0, lineAnimateType: pen.lineAnimateType,
textLeft: pen.textOffsetX,
textTop: pen.textOffsetY,
animateType: '', animateType: '',
frames: [ frames: [
@@ -398,6 +402,7 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
name: 'line', name: 'line',
lineName: pen.name, lineName: pen.name,
type: pen.type, type: pen.type,
autoPolyline: true,
fromArrow: pen.fromArrow, fromArrow: pen.fromArrow,
toArrow: pen.toArrow, toArrow: pen.toArrow,
x: width > 0 ? pen.to.x : pen.from.x, x: width > 0 ? pen.to.x : pen.from.x,
@@ -408,10 +413,11 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
valueMapping: pen.valueMapping, valueMapping: pen.valueMapping,
anchors: [ anchors: [
{ {
anchorId: pen.id + '-0', anchorId: pen.from.anchorIndex + '',
id: pen.id + '-0', id: pen.id + '-0',
penId: pen.id, penId: pen.id,
connectTo: pen.from.id, connectTo: pen.from.id,
prevNextType: undefined,
x: 0, x: 0,
y: 0, y: 0,
prev: { prev: {
@@ -428,10 +434,12 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
} }
}, },
{ {
anchorId: pen.id + '-1', anchorId: pen.to.anchorIndex + '',
id: pen.id + '-1', id: pen.id + '-1',
penId: pen.id, penId: pen.id,
connectTo: pen.to.id, connectTo: pen.to.id,
prevNextType: undefined,
hidden: undefined,
x: 1, x: 1,
y: 1, y: 1,
prev: { prev: {
@@ -448,30 +456,30 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
} }
} }
], ],
color: '#222222', color: pen.strokeStyle,
lineWidth: 1, lineWidth: pen.lineWidth,
lineDash: [ lineDashOffset: pen.lineDashOffset,
5, lineDash: pen.dash ? (pen.dash == 1 ? [5, 5] : ((pen.dash == 2 ? [10, 10] : [10, 10, 2, 10]))) : [],
5 borderColor: pen.borderColor,
], borderWidth: pen.borderWidth,
borderColor: '#000000', rotate: pen.rotate,
borderWidth: 0,
rotate: 0,
visible: true, visible: true,
background: '', background: '',
lineHeight: 1.5, lineHeight: pen.lineHeight,
fontSize: 12, fontSize: pen.fontSize,
fontFamily: '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial', fontFamily: pen.fontFamily,
fontStyle: 'normal', fontStyle: pen.fontStyle,
fontWeight: 'normal', fontWeight: pen.fontWeight,
textColor: '', textColor: '',
textAlign: 'center', textAlign: pen.textAlign,
textBaseline: 'middle', textBaseline: pen.textBaseline,
textBackground: '#ffffff', textBackground: pen.textBackground,
animateSpan: 1, textLeft: pen.textOffsetX,
animateColor: '#FA901C', textTop: pen.textOffsetY,
animateSpan: pen.animateSpan,
animateColor: pen.animateColor,
lineAnimateType: 0, lineAnimateType: 0,
animateDotSize: 3, animateDotSize: pen.animateDotSize,
frames: [ frames: [
], ],
@@ -504,18 +512,37 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
} }
if (pen.name === 'polyline') { if (pen.name === 'polyline') {
obj.anchors.splice(1, 0, { obj.anchors.splice(1, 0, {
id: pen.id + '-0.33', id: s8(),
penId: pen.id, penId: pen.id,
x: obj.anchors[0].x + 0.3, x: 0.1,
y: obj.anchors[0].y y: 0
}, {
id: s8(),
penId: pen.id,
x: 0.5,
y: 0
}, },
{ {
id: pen.id + '-0.66', id: s8(),
penId: pen.id, penId: pen.id,
x: obj.anchors[1].x - 0.3, x: 0.5,
y: obj.anchors[1].y y: 1
}) },
{
id: s8(),
penId: pen.id,
x: 0.9,
y: 1
}
)
} }
pen.data.valueMapping.forEach(item => {
if (item.animateType == 1) {
item.animateType = 'flow'
} else if (item.animateType == 'comet') {
item.animateType = 'dot'
}
})
} }
return obj return obj
} }
@@ -620,231 +647,186 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
// } // }
// /* 自定义立方体 */ // /* 自定义立方体 */
// //
// export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) { export function onChangeAnimate (pen, animateType, fillStyle, strokeStyle) {
// pen.animateType = animateType pen.animateType = animateType
// if (pen.animateType === 'custom') { if (pen.animateType === 'custom') {
// return return
// } }
//
// pen.animateFrames = [] pen.animateFrames = []
// const state = Node.cloneState(node) // const state = Node.cloneState(pen)
// switch (animateType) { const state = {}
// case 'upDown': switch (animateType) {
// state.rect.y -= 10 case 'upDown':
// state.rect.ey -= 10 pen.frames = [
// pen.animateFrames.push({ {
// duration: 100, duration: 200,
// linear: true, y: 20
// state },
// }) {
// pen.animateFrames.push({ duration: 200,
// duration: 100, y: 0
// linear: true, },
// state: Node.cloneState(node) {
// }) duration: 200,
// pen.animateFrames.push({ y: -20
// duration: 200, }
// linear: true, ]
// state: Node.cloneState(state) break
// }) case 'leftRight':
// break pen.frames = [
// case 'leftRight': {
// state.rect.x -= 10 duration: 200,
// state.rect.ex -= 10 x: 20
// pen.animateFrames.push({ },
// duration: 100, {
// linear: true, duration: 200,
// state: Node.cloneState(state) x: 0
// }) },
// state.rect.x += 20 {
// state.rect.ex += 20 duration: 200,
// pen.animateFrames.push({ x: -20
// duration: 80, }
// linear: true, ]
// state: Node.cloneState(state) break
// }) case 'heart':
// state.rect.x -= 20 pen.frames = [
// state.rect.ex -= 20 {
// pen.animateFrames.push({ duration: 300,
// duration: 50, scale: 1.2
// linear: true, },
// state: Node.cloneState(state) // {
// }) // duration: 300,
// state.rect.x += 20 // x: 0,
// state.rect.ex += 20 // y: 0,
// pen.animateFrames.push({ // width: 0,
// duration: 30, // height: 0
// linear: true, // },
// state: Node.cloneState(state) {
// }) duration: 300,
// pen.animateFrames.push({ scale: 0.8
// duration: 300, },
// linear: true, {
// state: Node.cloneState(node) duration: 300,
// }) scale: 1
// break }
// case 'heart': ]
// state.rect.x -= 5 break
// state.rect.ex += 5 case 'success':
// state.rect.y -= 5 pen.frames = [
// state.rect.ey += 5 {
// state.rect.width += 5 duration: 200,
// state.rect.height += 10 color: strokeStyle || '#237804'
// pen.animateFrames.push({ },
// duration: 100, {
// linear: true, duration: 200,
// state color: strokeStyle || '#237804',
// }) backGround: fillStyle || '#389e0d22'
// pen.animateFrames.push({ }
// duration: 400, ]
// linear: true, break
// state: Node.cloneState(node) case 'warning':
// }) pen.data.animateNeedLine = true
// break pen.frames = [
// case 'success': {
// state.strokeStyle = strokeStyle || '#237804' duration: 500,
// pen.animateFrames.push({ color: strokeStyle || '#fa8c16',
// duration: 100, background: fillStyle || '#fa8c16',
// linear: true, lineWidth: 5,
// state lineDash: [5, 5]
// }) },
// pen.animateFrames.push({ {
// duration: 100, duration: 500,
// linear: true, color: strokeStyle || '#fa8c16',
// state: Node.cloneState(node) background: '#ffffff',
// }) lineWidth: 1,
// state.strokeStyle = '#237804' lineDash: []
// pen.animateFrames.push({ }
// duration: 100, ]
// linear: true, break
// state case 'error':
// }) state.strokeStyle = strokeStyle || '#cf1322'
// pen.animateFrames.push({ state.fillStyle = fillStyle || '#cf132222'
// duration: 100, state.lineWidth = 5
// linear: true, state.dash = 2
// state: Node.cloneState(node) pen.animateFrames.push({
// }) duration: 100,
// state.strokeStyle = strokeStyle || '#237804' linear: true,
// state.fillStyle = fillStyle || '#389e0d22' state
// pen.animateFrames.push({ })
// duration: 3000, state.strokeStyle = strokeStyle || '#cf1322'
// linear: true, state.fillStyle = '#ffffff'
// state state.dash = 0
// }) state.lineWidth = 1
// break pen.animateFrames.push({
// case 'warning': duration: 500,
// state.strokeStyle = strokeStyle || '#fa8c16' linear: true,
// state.fillStyle = fillStyle || '#fa8c16' state: Node.cloneState(state)
// state.lineWidth = 5 })
// state.dash = 2 state.strokeStyle = strokeStyle || '#cf1322'
// pen.animateFrames.push({ state.fillStyle = fillStyle || '#cf132222'
// duration: 500, state.dash = 2
// linear: true, state.lineWidth = 5
// state pen.animateFrames.push({
// }) duration: 300,
// state.strokeStyle = strokeStyle || '#fa8c16' linear: true,
// state.dash = 0 state: Node.cloneState(state)
// state.lineWidth = 1 })
// state.fillStyle = '#ffffff' break
// pen.animateFrames.push({ case 'show':
// duration: 500, pen.frames = [
// linear: true, {
// state: Node.cloneState(state) duration: 100,
// }) rotate: -5
// state.strokeStyle = strokeStyle || '#fa8c16' },
// state.dash = 2 {
// state.lineWidth = 5 duration: 100,
// state.fillStyle = fillStyle || '#fa8c16' rotate: 0
// pen.animateFrames.push({ },
// duration: 300, {
// linear: true, duration: 100,
// state: Node.cloneState(state) rotate: 5
// }) },
// break {
// case 'error': duration: 100,
// state.strokeStyle = strokeStyle || '#cf1322' rotate: 0
// state.fillStyle = fillStyle || '#cf132222' }
// state.lineWidth = 5 ]
// state.dash = 2 break
// pen.animateFrames.push({ case 'fade':
// duration: 100, state.globalAlpha = 0.3
// linear: true, pen.frames = [
// state {
// }) duration: 500,
// state.strokeStyle = strokeStyle || '#cf1322' globalAlpha: 0.3
// state.fillStyle = '#ffffff' },
// state.dash = 0 {
// state.lineWidth = 1 duration: 500,
// pen.animateFrames.push({ globalAlpha: 1
// duration: 500, }
// linear: true, ]
// state: Node.cloneState(state) break
// }) }
// state.strokeStyle = strokeStyle || '#cf1322' pen.animatePlay = true
// state.fillStyle = fillStyle || '#cf132222' }
// state.dash = 2 export function onChangeAnimateLine (line, type, isOldData) {
// state.lineWidth = 5 // { id: 'flow', name: this.$t('project.topology.flow') },
// pen.animateFrames.push({ // { id: 'beads', name: this.$t('project.topology.beads') },
// duration: 300, // { id: 'dot', name: this.$t('project.topology.dot') },
// linear: true, let animateType = type
// state: Node.cloneState(state) if (type === 'dot') {
// }) animateType = 2
// break }
// case 'show': if (type === 'beads') {
// state.strokeStyle = strokeStyle || '#fa541c' animateType = 1
// state.rotate = -5 }
// pen.animateFrames.push({ if (type === 'custom') {
// duration: 100, delete line.lineAnimateType
// linear: true, return
// state: Node.cloneState(state) }
// }) line.lineAnimateType = animateType
// state.rotate = 5 line.animatePlay = true
// pen.animateFrames.push({ }
// duration: 100,
// linear: true,
// state: Node.cloneState(state)
// })
// state.rotate = 0
// pen.animateFrames.push({
// duration: 100,
// linear: true,
// state: Node.cloneState(state)
// })
// break
// case 'fade':
// state.strokeStyle = strokeStyle || '#fa541c'
// state.globalAlpha = 0.3
// pen.animateFrames.push({
// duration: 300,
// linear: true,
// state: Node.cloneState(state)
// })
// state.globalAlpha = 0.5
// pen.animateFrames.push({
// duration: 300,
// linear: true,
// state: Node.cloneState(state)
// })
// state.globalAlpha = 0.8
// pen.animateFrames.push({
// duration: 300,
// linear: true,
// state: Node.cloneState(state)
// })
// state.globalAlpha = 1
// pen.animateFrames.push({
// duration: 300,
// linear: true,
// state: Node.cloneState(state)
// })
// break
// }
// pen.animatePlay = true
// }
// export function onChangeAnimateLine (line, type) {
// line.animateType = type
// line.animatePlay = true
// }
// export function changeImage (dataImg, callback) { // export function changeImage (dataImg, callback) {
// // const base64Img = document.createElement('base64Img') // // const base64Img = document.createElement('base64Img')
// const canvas = document.createElement('canvas') // const canvas = document.createElement('canvas')

12
nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
View File

@@ -109,7 +109,15 @@ export default {
}, },
methods: { methods: {
changeOption (key) { changeOption (key) {
getTopology(this.index).data[key] = this.option[key] // getTopology(this.index).data[key] = this.option[key]
const obj = {}
obj[key] = this.option[key]
console.log(obj)
if (key === 'grid') {
getTopology(this.index).setGrid(obj)
} else {
getTopology(this.index).setRule(obj)
}
getTopology(this.index).render() getTopology(this.index).render()
}, },
undo () { // 撤销 undo () { // 撤销
@@ -139,7 +147,7 @@ export default {
getTopology(this.index).scaleTo(val / 100) getTopology(this.index).scaleTo(val / 100)
}, },
del () { del () {
const delObj = this.selection.pen ? this.selection.pen.id : this.selection.pens const delObj = this.selection.pen ? [this.selection.pen] : this.selection.pens
this.$emit('del', delObj) this.$emit('del', delObj)
}, },
clear () { clear () {

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

@@ -170,7 +170,7 @@
@notModuleIDArrChange="notModuleIDArrChange"> @notModuleIDArrChange="notModuleIDArrChange">
</canvas-props> </canvas-props>
</div> </div>
<div class="context-menu" v-if="contextmenu.left && editTopologyFlag && 0 && !fromOverView" :style="this.contextmenu"> <div class="context-menu" v-if="contextmenu.left && editTopologyFlag && !fromOverView" :style="this.contextmenu">
<CanvasContextMenu :index="topologyIndexF" :props.sync="props"></CanvasContextMenu> <CanvasContextMenu :index="topologyIndexF" :props.sync="props"></CanvasContextMenu>
</div> </div>
<!--所有节点上的小图标--> <!--所有节点上的小图标-->
@@ -359,13 +359,13 @@ import {
imageTemp, imageTemp,
rectangleImg, rectangleImg,
rectangleImgAnchors, rectangleImgAnchors,
disposeTopoOldData disposeTopoOldData,
// myShape, // myShape,
// myAnchors, // myAnchors,
// myIconRect, // myIconRect,
// myTextRect, // myTextRect,
// onChangeAnimate, onChangeAnimate,
// onChangeAnimateLine, onChangeAnimateLine,
// myCubec, // myCubec,
// myCubeAnchors // myCubeAnchors
} from './L5/services/canvas.js' } from './L5/services/canvas.js'
@@ -388,16 +388,6 @@ import topologyMixin from '@/components/common/project/topologyMixin'
// registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect) // registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
// registerNode('myCube', myCubec, myCubeAnchors, null, null) // registerNode('myCube', myCubec, myCubeAnchors, null, null)
const canvasOptions = {
rotateCursor: '/img/rotate.cur',
translateKey: 'None',
disableEmptyLine: true,
autoExpandDistance: 0,
minScale: 0.2,
scaleKey: -1,
keydown: 1,
autoPolyline: true
}
export default { export default {
name: 'topologyL5', name: 'topologyL5',
mixins: [topologyMixin], mixins: [topologyMixin],
@@ -670,7 +660,7 @@ export default {
}, },
methods: { methods: {
init () { init () {
canvasOptions.on = this.onMessage // canvasOptions.on = this.onMessage
this.reload() this.reload()
}, },
@@ -692,7 +682,7 @@ export default {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
Promise.all(arr).then((res) => { Promise.all(arr).then((res) => {
this.chartGetData[index].res = JSON.parse(JSON.stringify(this.computeData(res, pen.data.aggregation, pen))) this.chartGetData[index].res = JSON.parse(JSON.stringify(this.computeData(res, pen.data.aggregation, pen)))
this.setAnimation(pen, this.chartGetData[index].res) this.setAnimation(pen, this.chartGetData[index].res, data.oldData)
resolve() resolve()
}) })
}) })
@@ -723,10 +713,7 @@ export default {
if (!getTopology(this.topologyIndex)) { if (!getTopology(this.topologyIndex)) {
return return
} }
le5leStore.set('file', this.data) console.log(data)
le5leStore.set('lineName', data.lineName)
le5leStore.set('fromArrow', data.fromArrow)
le5leStore.set('toArrow', data.toArrow)
getTopology(this.topologyIndex).open(data) getTopology(this.topologyIndex).open(data)
getTopology(this.topologyIndex).lock(1) getTopology(this.topologyIndex).lock(1)
this.objChange = false this.objChange = false
@@ -755,9 +742,9 @@ export default {
const timer = setTimeout(() => { const timer = setTimeout(() => {
getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data().pens.forEach(item => { getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data().pens.forEach(item => {
if (item.animatePlay) { if (item.animatePlay) {
item.stopAnimate() getTopology(this.topologyIndex).stopAnimate(item.id)
const timer1 = setTimeout(() => { const timer1 = setTimeout(() => {
item.startAnimate() getTopology(this.topologyIndex).startAnimate(item.id)
clearTimeout(timer1) clearTimeout(timer1)
}) })
} }
@@ -806,6 +793,18 @@ export default {
return return
} }
data = this.$loadsh.cloneDeep(data) data = this.$loadsh.cloneDeep(data)
console.log(Option)
const canvasOptions = {
rotateCursor: '/static/roteCursor.cur',
disableEmptyLine: true,
autoExpandDistance: 0,
minScale: 0.2,
scaleKey: -1,
keydown: 1,
gridSize: 40
}
canvasOptions.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#f6f6f6'
canvasOptions.gridColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
if (!getTopology(this.topologyIndex)) { if (!getTopology(this.topologyIndex)) {
let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions) let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
// canvas.open(data) // canvas.open(data)
@@ -815,25 +814,23 @@ export default {
// getTopology(this.topologyIndex).open(data) // getTopology(this.topologyIndex).open(data)
} }
this.topologyLoading = false this.topologyLoading = false
if (!getTopology(this.topologyIndex).data().name) { // getTopology(this.topologyIndex).register(flowPens())
// getTopology(this.topologyIndex).data().name = this.obj.name // getTopology(this.topologyIndex).register(activityDiagram())
} // getTopology(this.topologyIndex).register(classPens())
// getTopology(this.topologyIndex).data().projectId = this.obj.id // getTopology(this.topologyIndex).register(sequencePens())
// getTopology(this.topologyIndex).lock(1) // getTopology(this.topologyIndex).registerCanvasDraw(sequencePensbyCtx())
getTopology(this.topologyIndex).register(flowPens()) // getTopology(this.topologyIndex).registerCanvasDraw(formPens())
getTopology(this.topologyIndex).register(activityDiagram())
getTopology(this.topologyIndex).register(classPens())
getTopology(this.topologyIndex).register(sequencePens())
getTopology(this.topologyIndex).registerCanvasDraw(sequencePensbyCtx())
getTopology(this.topologyIndex).registerCanvasDraw(formPens())
getTopology(this.topologyIndex).registerCanvasDraw({ rectangleImg: rectangleImg }) getTopology(this.topologyIndex).registerCanvasDraw({ rectangleImg: rectangleImg })
getTopology(this.topologyIndex).registerAnchors({ rectangleImg: rectangleImgAnchors }) // getTopology(this.topologyIndex).registerAnchors({ rectangleImg: rectangleImgAnchors })
getTopology(this.topologyIndex).on('translate', this.topTranslate) // 平移· getTopology(this.topologyIndex).on('translate', this.topTranslate) // 平移·
getTopology(this.topologyIndex).on('active', this.pensActive) // 选中· getTopology(this.topologyIndex).on('active', this.pensActive) // 选中·
getTopology(this.topologyIndex).on('scale', () => {}) // 缩放· getTopology(this.topologyIndex).on('scale', () => {}) // 缩放·
getTopology(this.topologyIndex).on('translatePens', () => {}) // 移动画笔结束· getTopology(this.topologyIndex).on('translatePens', () => {}) // 移动画笔结束·
getTopology(this.topologyIndex).on('translatingPens', () => {}) // 移动画笔进行中· getTopology(this.topologyIndex).on('translatingPens', () => {}) // 移动画笔进行中·
getTopology(this.topologyIndex).on('add', () => {}) // 添加新画笔· getTopology(this.topologyIndex).on('add', this.appPen) // 添加新画笔·
getTopology(this.topologyIndex).on('click', this.topoClick) // click画笔·
getTopology(this.topologyIndex).store.options.autoAnchor = true
// getTopology(this.topologyIndex).on('contextmenu', this.onContextMenu) // 添加新画笔·
this.getModule()// 获取module this.getModule()// 获取module
resolve() resolve()
}) })
@@ -846,10 +843,10 @@ export default {
} }
this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => { this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
console.log(JSON.stringify(res.data.topo)) console.log(JSON.stringify(res.data.topo))
res.data.topo.oldData = 1
if (!res.data) { if (!res.data) {
return return
} }
res.data.topo && (res.data.topo.oldData = 0)
let data = JSON.parse(JSON.stringify(res.data.topo)) let data = JSON.parse(JSON.stringify(res.data.topo))
if (!res.data.topo || !res.data.topo.pens.length) { if (!res.data.topo || !res.data.topo.pens.length) {
this.showNoData = true this.showNoData = true
@@ -872,11 +869,17 @@ export default {
this.projectAlertShow = true this.projectAlertShow = true
this.saveData = JSON.parse(JSON.stringify(data)) this.saveData = JSON.parse(JSON.stringify(data))
this.topologyInfo.name = this.obj.name this.topologyInfo.name = this.obj.name
data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE' data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#f9f9f9'
data.gridColor = this.theme == 'light' ? '#ededed' : '#090909'
data.grid = false
data.rule = false
resolve(data) resolve(data)
data = null data = null
} else { } else {
data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE' data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#f9f9f9'
data.gridColor = this.theme == 'light' ? '#ededed' : '#090909'
data.grid = false
data.rule = false
if (data.data) { if (data.data) {
this.topologyInfo = { this.topologyInfo = {
fontSize: data.data.fontSize, fontSize: data.data.fontSize,
@@ -906,10 +909,10 @@ export default {
for (let i = 0; i < data.pens.length; i++) { for (let i = 0; i < data.pens.length; i++) {
const line = data.pens[i] const line = data.pens[i]
if (line.type === 1) { if (line.type === 1) {
if (!data.pens.find(item => item.id === line.from.id) || !data.pens.find(item => item.id === line.to.id)) { // if (!data.pens.find(item => item.id === line.from.id) || !data.pens.find(item => item.id === line.to.id)) {
data.pens.splice(i, 1) // data.pens.splice(i, 1)
i-- // i--
} // }
} }
} }
data.pens.forEach(item => { data.pens.forEach(item => {
@@ -1020,7 +1023,7 @@ export default {
}) })
}, },
// 赋值动画 // 赋值动画
setAnimation (pen, res) { // 根据所有res的状态 赋值动画 setAnimation (pen, res, isOldData) { // 根据所有res的状态 赋值动画
let maxLevel = 0 let maxLevel = 0
if (res.length > 0) { if (res.length > 0) {
res.forEach((response, innerPos) => { res.forEach((response, innerPos) => {
@@ -1046,27 +1049,27 @@ export default {
if (pen.type === 0) { // 判断valueMapping 给相应的状态 if (pen.type === 0) { // 判断valueMapping 给相应的状态
const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel) const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
if (selLevel) { if (selLevel) {
pen.fontColor = selLevel.color.text pen.textColor = selLevel.color.text
pen.fillStyle = selLevel.color.fill pen.background = selLevel.color.fill
pen.strokeStyle = selLevel.color.line pen.color = selLevel.color.line
pen.bkType = 0 pen.bkType = 0
} }
// onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line) onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line, selLevel.color.text)
} else if (pen.type === 1) { // 判断valueMapping 给相应的状态 } else if (pen.type === 1) { // 判断valueMapping 给相应的状态
const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel) const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
if (selLevel) { if (selLevel) {
pen.animateColor = selLevel.color.fill pen.animateColor = selLevel.color.fill
pen.strokeStyle = selLevel.color.line pen.color = selLevel.color.line
pen.animateType = selLevel.animateType pen.lineAnimateType = selLevel.animateType
pen.fontColor = selLevel.color.text pen.fontColor = selLevel.color.text
} }
// onChangeAnimateLine(pen, pen.animateType) onChangeAnimateLine(pen, selLevel.animateType, isOldData)
} }
} else { } else {
if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态 if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态
// onChangeAnimate(pen, pen.animateType) onChangeAnimate(pen, pen.animateType)
} else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态 } else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态
// onChangeAnimateLine(pen, pen.animateType) onChangeAnimateLine(pen, pen.animateType, isOldData)
} }
} }
}, },
@@ -1650,8 +1653,7 @@ export default {
}, },
onUpdateProps (node) { onUpdateProps (node) {
// 如果是node属性改变，需要传入node，重新计算node相关属性值 console.log(node)
// 如果是line属性改变，无需传参
getTopology(this.topologyIndex).setValue(node) getTopology(this.topologyIndex).setValue(node)
}, },
@@ -1984,9 +1986,9 @@ export default {
this.$store.commit('setShowTopoScreen', true) this.$store.commit('setShowTopoScreen', true)
const timer = setTimeout(() => { const timer = setTimeout(() => {
getTopology(this.topologyIndex).lock(0) getTopology(this.topologyIndex).lock(0)
getTopology(this.topologyIndex).data().pens.forEach((item, index) => { // 停止动画 以及赋值默认data getTopology(this.topologyIndex).store.data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data
if (item.animatePlay) { if (item.animatePlay) {
item.stopAnimate() getTopology(this.topologyIndex).stopAnimate(item.id)
} }
if (!item.data.expressArr.length) { if (!item.data.expressArr.length) {
item.data.expressArr = [''] item.data.expressArr = ['']
@@ -1998,8 +2000,8 @@ export default {
} }
item.animateType = item.data.animateType item.animateType = item.data.animateType
if (item.type === 0) { if (item.type === 0) {
item.fillStyle = item.data.fillStyle item.background = item.data.background || item.data.fillStyle
item.strokeStyle = item.data.strokeStyle item.color = item.data.color || item.data.strokeStyle
item.animatePlay = false item.animatePlay = false
item.fontColor = item.data.fontColor || '#222222' item.fontColor = item.data.fontColor || '#222222'
item.gradientType = item.data.gradientType ? item.data.gradientType : 0 item.gradientType = item.data.gradientType ? item.data.gradientType : 0
@@ -2012,20 +2014,23 @@ export default {
} else { } else {
item.bkType = 1 item.bkType = 1
} }
item.data.animateNeedLine = false
} else if (item.type === 1) { } else if (item.type === 1) {
item.animateColor = item.data.animateColor item.animateColor = item.data.animateColor
item.strokeStyle = item.data.strokeStyle item.color = item.data.color || item.data.strokeStyle
item.arrowColor = item.data.arrowColor item.arrowColor = item.data.arrowColor
item.fromArrowColor = item.data.arrowColor item.fromArrowColor = item.data.arrowColor
item.toArrowColor = item.data.arrowColor item.toArrowColor = item.data.arrowColor
item.animatePlay = false item.animatePlay = false
item.fontColor = item.data.fontColor || '#222222' item.fontColor = item.data.fontColor || '#222222'
} }
getTopology(this.topologyIndex)._setValue(item)
}) })
getTopology(this.topologyIndex).caches = { getTopology(this.topologyIndex).caches = {
index: 0, index: 0,
list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data()))] list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data()))]
} }
getTopology(this.topologyIndex).render()
const dom = document.getElementById('topology-canvas' + this.topologyIndexF) const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
const domRect = dom ? dom.getBoundingClientRect() : {} const domRect = dom ? dom.getBoundingClientRect() : {}
getTopology(this.topologyIndex).canvasPos = domRect getTopology(this.topologyIndex).canvasPos = domRect
@@ -2050,9 +2055,7 @@ export default {
// this.topologyData.data[key]=this.colorRGBtoHex(val); // this.topologyData.data[key]=this.colorRGBtoHex(val);
// getTopology(this.index).data[key]=val; // getTopology(this.index).data[key]=val;
// getTopology(this.index).render(); // getTopology(this.index).render();
const dataOption = getTopology(this.topologyIndex).data() getTopology(this.topologyIndex).setOptions({ drawingLineName: val })
dataOption[key] = this.lineName
getTopology(this.topologyIndex).render()
}, },
notModuleIDArrChange (id) { notModuleIDArrChange (id) {
this.notModuleIDArr = this.notModuleIDArr.filter(item => item.id !== id) this.notModuleIDArr = this.notModuleIDArr.filter(item => item.id !== id)
@@ -2063,7 +2066,8 @@ export default {
this.isPreview = false this.isPreview = false
this.editTopologyFlag = true this.editTopologyFlag = true
this.showNoData = false this.showNoData = false
const topologyData = getTopology(this.topologyIndex).pureData() const topologyData = getTopology(this.topologyIndex).data()
topologyData.oldData = 0
let flag = true let flag = true
const arr = [] const arr = []
this.notModuleIDArr = [] this.notModuleIDArr = []

152
nezha-fronted/src/components/common/project/topologyMixin.js
View File

@@ -1,19 +1,134 @@
import { getTopology } from '@/components/common/js/common' import { getTopology } from '@/components/common/js/common'
export default { export default {
data () {
return {}
},
methods: { methods: {
appPen (pen) {
const data = pen[0]
if (data.type === 0 && !data.data.moduleId) {
data.background = '#FFFFFF00'
data.color = '#333333'
data.borderColor = '#333333'
data.textColor = '#333333'
data.fontSize = 12
data.data = {
moduleId: '',
moduleName: '',
show: false,
error: false,
animatePlay: false,
fillStyle: data.fillStyle || '#ffffff',
strokeStyle: data.strokeStyle || '#ffffff',
gradientColor: '#bae7ff',
gradientType: 0,
lineWidth: this.nodeDefaultWidth(data.name),
iconToolState: true,
// chart 配置项
valueMapping: [{
color: {
line: '#000000',
fill: '#ffffff',
text: '#000000'
},
value: 'base',
animateType: 'base',
level: 0,
base: true
}],
valueMappingSort: 'asc',
expressArr: [''],
expressAllArr: [''],
legends: [''],
legendsAll: [''],
tooltipShow: true,
valueMappingShow: true,
panelName: 'topologyName',
unit: 2,
type: 'line',
displayChart: true,
aggregation: 'last',
title: '',
url: ''
}
} else if (data.type == 1) {
// 连线是否自动计算锚点
// data.manualCps=true;
data.background = '#FFFFFF00'
data.color = '#333333'
data.borderColor = '#333333'
data.textColor = '#333333'
data.fontSize = 12
data.autoPolyline = true
data.animateColor = '#FA901C'
data.toArrowColor = '#000000'
data.data = {
animatePlay: false,
strokeStyle: data.strokeStyle,
animateColor: data.animateColor,
arrowColor: '#000000',
fromArrowColor: '#000000',
toArrowColor: '#000000',
lineWidth: 1,
// chart 配置项
valueMapping: [{
color: {
line: '#000000',
fill: '#ffffff',
text: '#000000'
},
value: 'base',
animateType: 'base',
level: 0,
base: true
}],
valueMappingSort: 'asc', /* desc */
expressArr: [''],
expressAllArr: [''],
legends: [''],
legendsAll: [''],
tooltipShow: true,
valueMappingShow: true,
panelName: 'topologyName',
unit: 2,
type: 'line',
displayChart: true,
aggregation: 'last',
title: '',
moduleName: '',
url: ''
}
}
if (data.type === 0 || data.type === 1) {
data.lineWidth = data.data.lineWidth
}
},
pensActive (pens) { pensActive (pens) {
console.log(pens) console.log(pens)
if (!pens.length) return if (!pens.length) return
this.props = { if (pens.length == 1) {
line: null, this.props = {
multi: false, line: null,
expand: this.props.expand, multi: false,
nodes: null, expand: this.props.expand,
locked: pens[0].locked, nodes: null,
pen: pens[0], locked: pens[0].locked,
pens: null pen: pens[0],
pens: pens
}
} else {
this.props = {
line: null,
multi: false,
expand: this.props.expand,
nodes: null,
locked: false,
pen: null,
pens: pens
}
} }
return pens
}, },
topTranslate () { topTranslate () {
this.moduleId = '' this.moduleId = ''
@@ -23,6 +138,27 @@ export default {
getTopology(this.topologyIndex) getTopology(this.topologyIndex)
} }
this.getNodesArr() this.getNodesArr()
},
topoClick (pointAndPen) {
this.showNodeTools('')
if (!pointAndPen.pen) {
this.props = {
node: null,
line: null,
multi: false,
expand: null,
nodes: null,
locked: null,
pen: null,
pens: null
}
}
console.log(pointAndPen, 'click')
},
toCenter () {
if (getTopology(this.topologyIndex)) {
getTopology(this.topologyIndex).resize()
}
} }
} }
} }