Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 1c4be59f by 史敦盼
Options

修改数据成图

1 parent d7c45f81
Inline Side-by-side
Showing with 97 additions and 47 deletions
public/drawio/extention/js/exSideBar.js
......@@ -89,6 +89,15 @@
element: "tree",
},
];
const saveDataParams = {
assetId: val.assetId,
archiBelongId: val.archiBelongId,
state: val.state,
version: val.version,
archiAssetState: val.archiAssetState,
graphId: val.graphId,
state: val.state
}
let params = [
`${val.iconName};${val.color ? `fillColor=${val.color}` : ''};attr=${JSON.stringify(
_attrs
......@@ -98,7 +107,7 @@
val.assetName
}];eleName=${item.eleName};elementId=${item.elementId};eaLevel=${
item.eaLevel
};`,
};saveDataParams=${JSON.stringify(saveDataParams)};`,
val.shapeWidth ? val.shapeWidth : 150,
val.shapeHeight ? val.shapeHeight : 75,
null,
......@@ -347,6 +356,15 @@
element: "tree",
},
];
const saveDataParams = {
assetId: val.assetId,
archiBelongId: val.archiBelongId,
state: val.state,
version: val.version,
archiAssetState: val.archiAssetState,
graphId: val.graphId,
state: val.state
}
let params = [
`${val.iconName};${val.color ? `fillColor=${val.color}` : ''};attr=${JSON.stringify(
_attrs
......@@ -356,7 +374,7 @@
val.assetName
}];eleName=${item.eleName};elementId=${
item.elementId
};eaLevel=${item.eaLevel};`,
};eaLevel=${item.eaLevel};saveDataParams=${JSON.stringify(saveDataParams)};`,
val.shapeWidth ? val.shapeWidth : 150,
val.shapeHeight ? val.shapeHeight : 75,
null,
......
src/views/archi-view-manage/canvas/index.vue
......@@ -99,7 +99,7 @@
};
},
mounted(){
this.getQingDanTable();
// this.getQingDanTable();
this.get_search_select1();
// const id = this.$route.query.id;
......@@ -220,6 +220,7 @@
if(this.status == 1) {
$(".right_graph_container").animate({ right: "0%" }, 200, 'linear');
this.status = 2;
this.getQingDanTable()
}else{
$(".right_graph_container").animate({ right: "-45%" }, 200, 'linear');
this.status = 1;
......
src/views/dataMapping/MxGraph.vue
......@@ -58,50 +58,64 @@ export default {
this.insertVertex(v1, this.graphData[0].children)
// console.log(v1)
console.log('parent', parent)
// 调整父节点宽高
var geometry = model.getGeometry(parent.children[0])
geometry.height += 40
geometry.width += 40
model.setGeometry(v1, geometry)
// 子节点宽高调整
this.setGeometry(parent.children[0].children)
return
// 重新调整整体布局
const allCellData = parent.children[0].children
// 获取最大宽度
// 获取业务域最大宽度
let maxWidthArr = []
let maxHeight = 0
allCellData.forEach(v => {
const currentItem = model.getGeometry(v)
maxWidthArr.push(currentItem.width)
})
const maxWidth = Math.max(...maxWidthArr)
var geometry = model.getGeometry(parent.children[0])
let maxHeightArr = []
allCellData.forEach((v, i) => {
// 每个宽度统一成最大宽度的那一个
let currentMiddleItemGeometry = model.getGeometry(v)
// let lastMiddleItemGeometry = model.getGeometry(allCellData[i - 1])
if(i > 2) {
// 计算中间每条的坐标值
let lastGeoArr = allCellData.filter((v, i2) => i2 < i && i2 > 2 )
let y = 20
lastGeoArr.forEach(val => {
const cur = model.getGeometry(val)
y += cur.height + 20
})
currentMiddleItemGeometry.y = y
// console.log('currentMiddleItemGeometry', currentMiddleItemGeometry.y)
currentMiddleItemGeometry.width = maxWidth
currentMiddleItemGeometry.width = maxWidth
// 当前所属行
const row = Math.ceil((i + 1) / 3)
// 当前行的高度统一
const currentRowCol3 = allCellData[row * 3 - 1] ? model.getGeometry(allCellData[row * 3 - 1]).height : 0
const currentRowCol2 = allCellData[row * 3 - 2] ? model.getGeometry(allCellData[row * 3 - 2]).height : 0
const currentRowCol1 = allCellData[row * 3 - 3] ? model.getGeometry(allCellData[row * 3 - 3]).height : 0
const currentRowMaxHeight = Math.max(...[currentRowCol3, currentRowCol2, currentRowCol1])
// console.log('currentRowMaxHeight', currentRowMaxHeight)
currentMiddleItemGeometry.height = currentRowMaxHeight || 80
if((i + 1) % 3 === 1) {
maxHeightArr.push(currentRowMaxHeight || 80)
}
// 右侧
if(i == 1) {
const lastMiddleItemGeometry = model.getGeometry(allCellData[i - 1])
// console.log(maxWidth, maxWidthArr, lastMiddleItemGeometry)
currentMiddleItemGeometry.x = maxWidth + lastMiddleItemGeometry.width + 60
// currentMiddleItemGeometry.height = maxHeight
}
if(i === 0) {
// currentMiddleItemGeometry.height = maxHeight
if(i > 2) {
// 取当前所属行的上一行的3个，取最大高度，来设置y
const lastRowCol3 = model.getGeometry(allCellData[(row - 1) * 3 - 1]).height
const lastRowCol2 = model.getGeometry(allCellData[(row - 1) * 3 - 2]).height
const lastRowCol1 = model.getGeometry(allCellData[(row - 1) * 3 - 3]).height
const lastRowMaxHeight = Math.max(...[lastRowCol3, lastRowCol2, lastRowCol1])
// 上一行的y
const lastRowY = model.getGeometry(allCellData[(row - 1) * 3 - 3]).y
currentMiddleItemGeometry.y = lastRowY + lastRowMaxHeight + 20
// console.log('currentMiddleItemGeometry.y', currentMiddleItemGeometry.y)
}
// geometry.height += 40
})
// 调整父节点宽高
if(allCellData.length > 2) {
geometry.width = maxWidth * 3 + 60
} else {
geometry.width = maxWidth * allCellData.length + (allCellData.length - 1) * 20 + 40
}
const sum = maxHeightArr.reduce((a, b) => a + b, 0);
// console.log('sum', sum, maxHeightArr)
geometry.height = sum + maxHeightArr.length * 20 + 20
// geometry.height += 40
// geometry.width += 40
// model.setGeometry(v1, geometry)
} finally {
model.endUpdate()
// 获取xml
......@@ -138,7 +152,7 @@ export default {
// 计算cell的x坐标
getItemX(item, idx) {
if (item.children) {
return idx * (130 * 3) + 20
// return idx * (130 * 3) + 20
const col = (idx + 1) % 3
// console.log('col', idx, col)
// console.log('---', col > 0 ? col * (110 * 3) + 20 : 3 * (110 * 3) + 20 )
......@@ -148,9 +162,19 @@ export default {
if ((idx + 1) % 3 === 1) {
return 20
} else if ((idx + 1) % 3 === 2) {
return 140
if(Array.isArray(item.checkChildren)) {
return 410
} else {
return 140
}
// return 140 // 410
} else {
return 2 * 120 + 20
if(Array.isArray(item.checkChildren)) {
return 380 * 2 + 40
} else {
return 2 * 100 + 60
}
// return 2 * 140 + 20 // 380 * 2 + 40
}
} else {
return idx * 120 + 20
......@@ -161,15 +185,14 @@ export default {
const rows = Math.ceil((idx + 1) / 3)
if (item.children) {
return 20
const h = Math.ceil(item.children.length / 3)
if (idx > 2) {
return rows * (h * 50) + 20
} else {
return 30
}
// const h = Math.ceil(item.children.length / 3)
// if (idx > 2) {
// return rows * (h * 50) + 20
// } else {
// return 30
// }
} else {
if (idx > 2) {
console.log('rows', rows)
if (rows > 2) {
return rows * 40 + (rows - 2) * 20
} else {
......@@ -183,12 +206,17 @@ export default {
setGeometry(list) {
for (let index = 0; index < list.length; index++) {
const v = list[index]
if (!v.children) return
if (!v.children) {
let geometry = this.model.getGeometry(v)
geometry.height = 60
// geometry.width = 20
return
}
// console.log('v', v)
let geometry = this.model.getGeometry(v)
geometry.height += 20
geometry.width += 20
this.model.setGeometry(v, geometry)
// this.model.setGeometry(v, geometry)
// if (!v.children) {
// return this.setGeometry(v.children)
// }
......
src/views/dataMapping/index.vue
......@@ -4,7 +4,7 @@
* @Autor: pan
* @Date: 2024-04-23 11:30:05
* @LastEditors: pan
* @LastEditTime: 2024-04-24 15:42:01
* @LastEditTime: 2024-04-24 20:05:34
-->
<template>
<div class="dataMapping w-100">
......@@ -90,6 +90,9 @@ export default {
this.$refs.tree.filter(val)
},
},
mounted() {
// this.$refs.tree.setCheckedKeys(["176", '1775128878519729929', '1775128878519729938', '1775128878519729939', '177', '180', '1062', '1775128878519729932', '1775128878519729925', '1775128878519729933', '1775128878519729934', '1775128878519729926', '1775128878519729935', '1775128878519730025', '1775128878519730026']);
},
methods: {
handleClick() {
this.$refs['graph'].clear()
......@@ -145,8 +148,8 @@ export default {
},
handleNodeClick(data) {
const node = this.$refs.tree.getNode(data.id)
// console.log('data', data)
// console.log('node',node)
console.log('data', data)
console.log('node',node)
this.setNode(node)
},
setNode(node) {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!