From cd353024f3a0d260c5cc7d97857951efbf6642b7 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Mon, 8 Aug 2022 15:47:16 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E5=A4=84=E7=90=86=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=9B=BE=E5=BD=A2=20=EF=BC=8C=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E4=B8=8E=E6=96=87=E5=AD=97=EF=BC=8C=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E7=9B=B8=E5=85=B3=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/project/L5/CanvasProps.vue | 10 ++-- .../common/project/L5/services/canvas.js | 49 ++++++++----------- .../components/common/project/topologyL5.vue | 26 +++++----- 3 files changed, 39 insertions(+), 46 deletions(-) diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue index f09e613e6..cfe678750 100644 --- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue +++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue @@ -1424,7 +1424,7 @@ export default { // 'topologyData.data':{ // handler(n){ // setTimeout(()=>{ - // let dataOption=getTopology(this.index).data; + // let dataOption=getTopology(this.index).data(); // Object.keys(this.topologyData.data).forEach((key)=>{ // dataOption[key]=this.topologyData.data[key]; // }); @@ -1472,7 +1472,7 @@ export default { } }, created () { - const dataOption = this.index == -2 ? getTopology(-1).data : getTopology(this.index).data + const dataOption = this.index == -2 ? getTopology(-1).data : getTopology(this.index).data() if (!dataOption.data) { dataOption.data = {} } @@ -1686,7 +1686,7 @@ export default { }, changeTopologyOpt (val, key, isColor) { // - // getTopology(this.index).data[key]=val; + // getTopology(this.index).data()[key]=val; // getTopology(this.index).render(); if (isColor) { this.topologyData.data[key] = this.colorRGBtoHex(val) @@ -1695,9 +1695,9 @@ export default { } Object.keys(this.topologyData.data).forEach((key1) => { if (key1 === 'projectInfo' || key1 === 'alertInfo' || key1 === 'fontSize' || key1 === 'align' || key1 === 'fontColor' || key1 === 'opacity') { - getTopology(this.index).data.data[key1] = this.topologyData.data[key1] + getTopology(this.index).data().data[key1] = this.topologyData.data[key1] } else { - getTopology(this.index).data[key1] = this.topologyData.data[key1] + getTopology(this.index).data()[key1] = this.topologyData.data[key1] } }) getTopology(this.index).render() 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 de34df834..8437a7bcf 100644 --- a/nezha-fronted/src/components/common/project/L5/services/canvas.js +++ b/nezha-fronted/src/components/common/project/L5/services/canvas.js @@ -240,8 +240,20 @@ export function rectangleImg (ctx, pen) { } // 必须判空再填充 (pen.fillStyle || pen.bkType) && ctx.fill() - pen.iconHeight = pen.height - 30 - console.log(pen) + console.log(pen, pen.calculative.worldIconRect) + pen.calculative.worldIconRect = { + height: pen.height - 10 - 20, + rotate: 0, + width: pen.width - 10, + x: pen.x + 5, + y: pen.y + 5 + } + pen.calculative.worldTextRect = { + height: 20, + width: pen.width - 10, + x: pen.x + 5, + y: pen.y + pen.height - 5 - 20 + } // pen.iconRect = new Rect(pen.x + pen.paddingLeft, pen.y + pen.paddingTop, pen.width - (pen.paddingLeft + pen.paddingRight), pen.height - 20 - (pen.paddingTop + pen.paddingBottom)) // pen.fullIconRect = { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 } ctx.stroke() @@ -253,7 +265,7 @@ export function rectangleImgAnchors (pen) { id: '0', penId: pen.id, x: pen.x, - y: pen.y + pen.height / 4 + y: pen.y + pen.height / 2 }) anchors.push({ id: '1', @@ -273,6 +285,12 @@ export function rectangleImgAnchors (pen) { x: pen.x + pen.width / 2, y: pen.y + pen.height }) + anchors.push({ + id: '4', + penId: pen.id, + x: pen.x, + y: pen.y + pen.height / 8 + }) return anchors // pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left)) // pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up)) @@ -369,34 +387,9 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据 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: [ diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue index f179a7544..729ea2fcc 100644 --- a/nezha-fronted/src/components/common/project/topologyL5.vue +++ b/nezha-fronted/src/components/common/project/topologyL5.vue @@ -728,7 +728,7 @@ export default { getTopology(this.topologyIndex).open(data) // getTopology(this.topologyIndex).lock(1) this.objChange = false - let flag = false + const flag = false const position = { x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth, y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight @@ -736,7 +736,7 @@ export default { this.oldScale = getTopology(this.topologyIndex).data().scale getTopology(this.topologyIndex).data().pens.forEach(item => { if (flag) { - return + } // if (item.ex > position.x || item.ey > position.y) { // if (this.fromOverView) { @@ -826,7 +826,7 @@ export default { getTopology(this.topologyIndex).register(sequencePens()) getTopology(this.topologyIndex).registerCanvasDraw(sequencePensbyCtx()) getTopology(this.topologyIndex).registerCanvasDraw(formPens()) - getTopology(this.topologyIndex).registerCanvasDraw({ rectangleImg }) + getTopology(this.topologyIndex).registerCanvasDraw({ rectangleImg: rectangleImg }) getTopology(this.topologyIndex).registerAnchors({ rectangleImg: rectangleImgAnchors }) this.getModule()// 获取module resolve() @@ -840,7 +840,7 @@ export default { } this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => { console.log(JSON.stringify(res.data.topo)) - + res.data.topo.oldData = 1 if (!res.data) { return } @@ -1152,6 +1152,7 @@ export default { let arr = [] this.offsetX = getTopology(this.topologyIndex).data().x this.offsetY = getTopology(this.topologyIndex).data().y + console.log(this.offsetX, this.offsetY) arr = getTopology(this.topologyIndex).data().pens.filter(item => { if (!item.data) { item.data = { @@ -1169,8 +1170,8 @@ export default { // 打开动画 是否更新顶部图标 this.nodesArr = arr.map(item => { return { - x:item.x, - y:item.y, + x: item.x, + y: item.y, width: item.width, data: item.data } @@ -1250,17 +1251,16 @@ export default { this.dragFlag = true clearTimeout(timer) }, 100) - event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, data: { imageId: node.data.imageId } })) + console.log(node) + event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, ...node.data.rect, data: { imageId: node.data.imageId } })) }, dragFlagChange (node) { - getTopology(this.topologyIndex).addNode( + getTopology(this.topologyIndex).addPen( { ...node.data, - rect: { - ...node.data.rect, - x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth / 2 - 50, - y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight / 2 - 50 - }, + ...node.data.rect, + x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth / 2 - 50, + y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight / 2 - 50, data: { imageId: node.data.imageId } }) const timer = setTimeout(() => {