diff --git a/nezha-fronted/src/components/common/project/L5/services/canvas.js b/nezha-fronted/src/components/common/project/L5/services/canvas.js
index 17dee6b79..7aa6b05ab 100644
--- a/nezha-fronted/src/components/common/project/L5/services/canvas.js
+++ b/nezha-fronted/src/components/common/project/L5/services/canvas.js
@@ -1,4 +1,4 @@
-import { rectInRect } from '@topology/core'
+import { s16 } from '@topology/core'
export let canvas
export const Tools = [
@@ -279,6 +279,250 @@ export function rectangleImgAnchors (pen) {
// pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
// pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
}
+export function disposeTopoOldData (pen, allPen) { // 处理旧数据
+ let obj = {}
+ if (pen.type === 0) {
+ obj = {
+ id: pen.id,
+ data: pen.data,
+ valueMapping: pen.valueMapping,
+ tags: [
+
+ ],
+ type: 0,
+ name: pen.name,
+ icon: pen.icon,
+ iconSize: null,
+ x: pen.rect.x,
+ y: pen.rect.y,
+ ex: pen.rect.ex,
+ ey: pen.rect.ey,
+ width: pen.rect.width,
+ height: pen.rect.height,
+ paddingLeft: pen.paddingLeft,
+ paddingRight: pen.paddingRight,
+ paddingTop: pen.paddingTop,
+ paddingBottom: pen.paddingBottom,
+ color: pen.strokeStyle,
+ lineWidth: pen.lineWidth,
+ borderWidth: null,
+ rotate: pen.rotate,
+ visible: true,
+ background: pen.fillStyle,
+ lineHeight: pen.lineHeight,
+ fontSize: pen.fontSize,
+ fontFamily: pen.fontFamily,
+ fontStyle: pen.fontStyle,
+ fontWeight: pen.fontWeight,
+ text: pen.text,
+ textColor: pen.fontColor,
+ textAlign: pen.textAlign,
+ textBaseline: pen.textBaseline,
+ textBackground: pen.textBackground,
+ lineAnimateType: 0,
+ animateType: '',
+ frames: [
+
+ ],
+ autoPlay: pen.autoPlay,
+ globalAlpha: pen.globalAlpha,
+ bkType: pen.bkType,
+ gradientAngle: pen.gradientAngle,
+ gradientRadius: pen.gradientRadius,
+ borderRadius: pen.borderRadius,
+ events: [
+
+ ],
+ anchors: [
+ {
+ id: '0',
+ penId: pen.id,
+ x: 0,
+ y: 0.5
+ },
+ {
+ id: '1',
+ penId: pen.id,
+ x: 0.5,
+ y: 0
+ },
+ {
+ id: '2',
+ penId: pen.id,
+ x: 1,
+ y: 0.5
+ },
+ {
+ id: '3',
+ penId: pen.id,
+ x: 0.5,
+ y: 1
+ }
+ ],
+ // connectedLines: [
+ // {
+ // anchor: '1',
+ // lineAnchor: '9a5fccf',
+ // lineId: '3e3a3d'
+ // }
+ // ]
+ connectedLines: pen.connectedLines || [],
+ image: pen.image
+ }
+ console.log(pen.connectedLines)
+ } else {
+ const anchors = [s16(), s16()]
+ const width = pen.from.x - pen.to.x
+ const height = pen.from.y - pen.to.y
+ // if (pen.from) {
+ // console.log('from')
+ // const find = allPen.find(item => item.id == pen.from.id)
+ // if (!find.connectedLines) {
+ // find.connectedLines = []
+ // }
+ // find.connectedLines.push({
+ // anchor: pen.from.anchorIndex,
+ // lineAnchor: pen.id + '-0',
+ // lineId: pen.id
+ // })
+ // }
+ // if (pen.to) {
+ // const find = allPen.find(item => item.id == pen.to.id)
+ // if (!find.connectedLines) {
+ // find.connectedLines = []
+ // }
+ // find.connectedLines.push({
+ // anchor: pen.to.anchorIndex,
+ // lineAnchor: pen.id + '-1',
+ // lineId: pen.id
+ // })
+ // }
+ obj = {
+ id: pen.id,
+ tags: [
+
+ ],
+ name: 'line',
+ type: pen.type,
+ fromArrow: pen.fromArrow,
+ toArrow: pen.toArrow,
+ x: width > 0 ? pen.to.x : pen.from.x,
+ y: height > 0 ? pen.to.y : pen.from.y,
+ width: Math.abs(pen.to.x - pen.from.x),
+ height: Math.abs(pen.to.y - pen.from.y),
+ data: pen.data,
+ valueMapping: pen.valueMapping,
+ anchors: [
+ {
+ anchorId: pen.id + '-0',
+ id: pen.id + '-0',
+ penId: pen.id,
+ connectTo: pen.from.id,
+ x: 0,
+ y: 0,
+ prev: {
+ penId: pen.id,
+ connectTo: pen.from.id,
+ x: -0.2,
+ y: 0
+ },
+ next: {
+ penId: pen.id,
+ connectTo: pen.from.id,
+ x: 0.2,
+ y: 0
+ }
+ },
+ {
+ anchorId: pen.id + '-1',
+ id: pen.id + '-1',
+ penId: pen.id,
+ connectTo: pen.to.id,
+ x: 1,
+ y: 1,
+ prev: {
+ penId: pen.id,
+ connectTo: pen.to.id,
+ x: 0.8,
+ y: 1
+ },
+ next: {
+ penId: pen.id,
+ connectTo: pen.to.id,
+ x: 1.2,
+ y: 1
+ }
+ }
+ ],
+ color: '#222222',
+ lineWidth: 1,
+ lineDash: [
+ 5,
+ 5
+ ],
+ borderColor: '#000000',
+ borderWidth: 0,
+ rotate: 0,
+ visible: true,
+ background: '',
+ lineHeight: 1.5,
+ fontSize: 12,
+ fontFamily: '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial',
+ fontStyle: 'normal',
+ fontWeight: 'normal',
+ textColor: '',
+ textAlign: 'center',
+ textBaseline: 'middle',
+ textBackground: '#ffffff',
+ animateSpan: 1,
+ animateColor: '#FA901C',
+ lineAnimateType: 0,
+ animateDotSize: 3,
+ frames: [
+
+ ],
+ autoPlay: false,
+ globalAlpha: 1,
+ events: [
+
+ ]
+ }
+ if (width > 0 && height > 0) {
+ obj.anchors[0].x = 1
+ obj.anchors[0].y = 1
+ obj.anchors[1].x = 0
+ obj.anchors[1].y = 0
+ } else if (width > 0 && height < 0) {
+ obj.anchors[0].x = 1
+ obj.anchors[0].y = 0
+ obj.anchors[1].x = 0
+ obj.anchors[1].y = 1
+ } else if (width < 0 && height > 0) {
+ obj.anchors[0].x = 0
+ obj.anchors[0].y = 1
+ obj.anchors[1].x = 1
+ obj.anchors[1].y = 0
+ } else if (width < 0 && height < 0) {
+ obj.anchors[0].x = 0
+ obj.anchors[0].y = 0
+ obj.anchors[1].x = 1
+ obj.anchors[1].y = 1
+ }
+ obj.anchors.forEach(item => {
+ item.prev = {
+ ...item.prev,
+ x: item.x - 0.3,
+ y: item.y
+ }
+ item.next = {
+ ...item.prev,
+ x: item.x + 0.3,
+ y: item.y
+ }
+ })
+ }
+ return obj
+}
/* 自定义图片组件 */
// export function myShape (ctx, node) { // 自定义图片组件
// ctx.beginPath()
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 252744398..ba341b0f3 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -176,8 +176,8 @@
@@ -209,15 +209,15 @@
:key="index"
:style="{
position: 'absolute',
- top:item.rect.y + offsetY - 10 +'px',
- left:item.rect.x + offsetX - 10+'px',
+ top:item.y + offsetY - 10 +'px',
+ left:item.x + offsetX - 10+'px',
transform:'scale('+(fromOverView?penToolTipScale:1)+')',
}"
>
-
-
-
-
+
+
+
+
position.x || item.rect.ey > position.y) {
- if (this.fromOverView) {
- getTopology(this.topologyIndex).fitView(20)
- }
- flag = true
- }
+ // if (item.ex > position.x || item.ey > position.y) {
+ // if (this.fromOverView) {
+ // getTopology(this.topologyIndex).fitView(20)
+ // }
+ // flag = true
+ // }
})
getTopology(this.topologyIndex).resize()
getTopology(this.topologyIndex).centerView()
@@ -839,6 +839,8 @@ export default {
resolve(this.topoPrevDataS)
}
this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
+ console.log(JSON.stringify(res.data.topo))
+
if (!res.data) {
return
}
@@ -923,98 +925,44 @@ export default {
item.data.state.alert = false
}
})
- data.pens = data.pens.map(item => {
- if (item.type === 0) {
- item = {
- ...item,
- ...item.rect
- }
- } else {
- // promiseArr.push({ type: 1 })
- console.log(item)
- item = {
- data: item.data,
- rect: item.rect,
- ...item.rect,
- id: item.id,
- tags: [
-
- ],
- name: 'line',
- type: 1,
- fromArrow: '',
- toArrow: 'triangleSolid',
- anchors: [
- {
- id: 'd3b9bb5',
- penId: 'fdde44f',
- x: 0,
- y: 1,
- prev: {
- penId: 'fdde44f',
- x: -0.28768449363179044,
- y: 1
- },
- next: {
- penId: 'fdde44f',
- x: 0.28768449363179044,
- y: 1
- }
- },
- {
- id: '5c7f698f',
- penId: 'fdde44f',
- connectTo: 'f10e596',
- x: 1,
- y: 0,
- prev: {
- penId: 'fdde44f',
- connectTo: 'f10e596',
- x: 0.7123155063682084,
- y: 0
- },
- next: {
- penId: 'fdde44f',
- connectTo: 'f10e596',
- x: 1.2876844936317902,
- y: 0
- }
+ if (res.data.topo.oldData == 1) {
+ data.pens = this.$loadsh.orderBy(data.pens, 'type', 'desc') // 先处理线 再处理点 因为新版本 将连线开始结束放在的 点上控制
+ console.log(data.pens[0])
+ data.pens = data.pens.map(item => {
+ if (item.type === 0) {
+ item = disposeTopoOldData(item, data.pens)
+ } else {
+ // promiseArr.push({ type: 1 })
+ if (item.from) {
+ console.log('from')
+ const find = data.pens.find(item1 => item1.id == item.from.id)
+ if (!find.connectedLines) {
+ find.connectedLines = []
}
- ],
- color: '#000000',
- lineWidth: 2.4390243902439024,
- borderColor: '#000000',
- borderWidth: 0,
- rotate: 0,
- visible: true,
- background: '',
- lineHeight: 1.5,
- fontSize: 12,
- fontFamily: '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial',
- fontStyle: 'normal',
- fontWeight: 'normal',
- textColor: '#000000',
- textAlign: 'center',
- textBaseline: 'middle',
- textBackground: '#ffffff',
- animateSpan: 1,
- animateColor: '#ffffff',
- animateCycle: null,
- lineAnimateType: 1,
- animateDotSize: 3,
- animateType: 'beads',
- frames: [
-
- ],
- autoPlay: false,
- globalAlpha: 1,
- events: [
-
- ]
+ find.connectedLines.push({
+ anchor: item.from.anchorIndex + '',
+ lineAnchor: item.id + '-0',
+ lineId: item.id
+ })
+ }
+ if (item.to) {
+ console.log('from')
+ const find = data.pens.find(item1 => item1.id == item.to.id)
+ if (!find.connectedLines) {
+ find.connectedLines = []
+ }
+ find.connectedLines.push({
+ anchor: item.to.anchorIndex + '',
+ lineAnchor: item.id + '-1',
+ lineId: item.id
+ })
+ }
+ item = disposeTopoOldData(item, data.pens)
}
- }
- return item
- })
+ return item
+ })
+ data.pens = this.$loadsh.orderBy(data.pens, 'type', 'asc')
+ }
console.log(data.pens)
if (!data.data) {
this.projectInfoShow = true
@@ -2294,7 +2242,7 @@ export default {
if (flag) {
return
}
- if (item.rect.ex > position.x || item.rect.ey > position.y) {
+ if (item.ex > position.x || item.ey > position.y) {
// getTopology(this.topologyIndex).fitView(20)
flag = true
}