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 @@ ...@@ -89,6 +89,15 @@
element: "tree", 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 = [ let params = [
`${val.iconName};${val.color ? `fillColor=${val.color}` : ''};attr=${JSON.stringify( `${val.iconName};${val.color ? `fillColor=${val.color}` : ''};attr=${JSON.stringify(
_attrs _attrs
...@@ -98,7 +107,7 @@ ...@@ -98,7 +107,7 @@
val.assetName val.assetName
}];eleName=${item.eleName};elementId=${item.elementId};eaLevel=${ }];eleName=${item.eleName};elementId=${item.elementId};eaLevel=${
item.eaLevel item.eaLevel
};`, };saveDataParams=${JSON.stringify(saveDataParams)};`,
val.shapeWidth ? val.shapeWidth : 150, val.shapeWidth ? val.shapeWidth : 150,
val.shapeHeight ? val.shapeHeight : 75, val.shapeHeight ? val.shapeHeight : 75,
null, null,
...@@ -347,6 +356,15 @@ ...@@ -347,6 +356,15 @@
element: "tree", 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 = [ let params = [
`${val.iconName};${val.color ? `fillColor=${val.color}` : ''};attr=${JSON.stringify( `${val.iconName};${val.color ? `fillColor=${val.color}` : ''};attr=${JSON.stringify(
_attrs _attrs
...@@ -356,7 +374,7 @@ ...@@ -356,7 +374,7 @@
val.assetName val.assetName
}];eleName=${item.eleName};elementId=${ }];eleName=${item.eleName};elementId=${
item.elementId item.elementId
};eaLevel=${item.eaLevel};`, };eaLevel=${item.eaLevel};saveDataParams=${JSON.stringify(saveDataParams)};`,
val.shapeWidth ? val.shapeWidth : 150, val.shapeWidth ? val.shapeWidth : 150,
val.shapeHeight ? val.shapeHeight : 75, val.shapeHeight ? val.shapeHeight : 75,
null, null,
......
src/views/archi-view-manage/canvas/index.vue
...@@ -99,7 +99,7 @@ ...@@ -99,7 +99,7 @@
}; };
}, },
mounted(){ mounted(){
this.getQingDanTable(); // this.getQingDanTable();
this.get_search_select1(); this.get_search_select1();
// const id = this.$route.query.id; // const id = this.$route.query.id;
...@@ -220,6 +220,7 @@ ...@@ -220,6 +220,7 @@
if(this.status == 1) { if(this.status == 1) {
$(".right_graph_container").animate({ right: "0%" }, 200, 'linear'); $(".right_graph_container").animate({ right: "0%" }, 200, 'linear');
this.status = 2; this.status = 2;
this.getQingDanTable()
}else{ }else{
$(".right_graph_container").animate({ right: "-45%" }, 200, 'linear'); $(".right_graph_container").animate({ right: "-45%" }, 200, 'linear');
this.status = 1; this.status = 1;
......
src/views/dataMapping/MxGraph.vue
...@@ -58,50 +58,64 @@ export default { ...@@ -58,50 +58,64 @@ export default {
this.insertVertex(v1, this.graphData[0].children) this.insertVertex(v1, this.graphData[0].children)
// console.log(v1) // console.log(v1)
console.log('parent', parent) 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) this.setGeometry(parent.children[0].children)
return
// 重新调整整体布局 // 重新调整整体布局
const allCellData = parent.children[0].children const allCellData = parent.children[0].children
// 获取最大宽度 // 获取业务域最大宽度
let maxWidthArr = [] let maxWidthArr = []
let maxHeight = 0
allCellData.forEach(v => { allCellData.forEach(v => {
const currentItem = model.getGeometry(v) const currentItem = model.getGeometry(v)
maxWidthArr.push(currentItem.width) maxWidthArr.push(currentItem.width)
}) })
const maxWidth = Math.max(...maxWidthArr) const maxWidth = Math.max(...maxWidthArr)
var geometry = model.getGeometry(parent.children[0])
let maxHeightArr = []
allCellData.forEach((v, i) => { allCellData.forEach((v, i) => {
// 每个宽度统一成最大宽度的那一个
let currentMiddleItemGeometry = model.getGeometry(v) let currentMiddleItemGeometry = model.getGeometry(v)
// let lastMiddleItemGeometry = model.getGeometry(allCellData[i - 1]) currentMiddleItemGeometry.width = maxWidth
if(i > 2) { // 当前所属行
// 计算中间每条的坐标值 const row = Math.ceil((i + 1) / 3)
let lastGeoArr = allCellData.filter((v, i2) => i2 < i && i2 > 2 ) // 当前行的高度统一
let y = 20 const currentRowCol3 = allCellData[row * 3 - 1] ? model.getGeometry(allCellData[row * 3 - 1]).height : 0
lastGeoArr.forEach(val => { const currentRowCol2 = allCellData[row * 3 - 2] ? model.getGeometry(allCellData[row * 3 - 2]).height : 0
const cur = model.getGeometry(val) const currentRowCol1 = allCellData[row * 3 - 3] ? model.getGeometry(allCellData[row * 3 - 3]).height : 0
y += cur.height + 20 const currentRowMaxHeight = Math.max(...[currentRowCol3, currentRowCol2, currentRowCol1])
}) // console.log('currentRowMaxHeight', currentRowMaxHeight)
currentMiddleItemGeometry.y = y currentMiddleItemGeometry.height = currentRowMaxHeight || 80
// console.log('currentMiddleItemGeometry', currentMiddleItemGeometry.y) if((i + 1) % 3 === 1) {
currentMiddleItemGeometry.width = maxWidth maxHeightArr.push(currentRowMaxHeight || 80)
} }
// 右侧 if(i > 2) {
if(i == 1) { // 取当前所属行的上一行的3个，取最大高度，来设置y
const lastMiddleItemGeometry = model.getGeometry(allCellData[i - 1]) const lastRowCol3 = model.getGeometry(allCellData[(row - 1) * 3 - 1]).height
// console.log(maxWidth, maxWidthArr, lastMiddleItemGeometry) const lastRowCol2 = model.getGeometry(allCellData[(row - 1) * 3 - 2]).height
currentMiddleItemGeometry.x = maxWidth + lastMiddleItemGeometry.width + 60 const lastRowCol1 = model.getGeometry(allCellData[(row - 1) * 3 - 3]).height
// currentMiddleItemGeometry.height = maxHeight const lastRowMaxHeight = Math.max(...[lastRowCol3, lastRowCol2, lastRowCol1])
} // 上一行的y
if(i === 0) { const lastRowY = model.getGeometry(allCellData[(row - 1) * 3 - 3]).y
// currentMiddleItemGeometry.height = maxHeight 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 { } finally {
model.endUpdate() model.endUpdate()
// 获取xml // 获取xml
...@@ -138,7 +152,7 @@ export default { ...@@ -138,7 +152,7 @@ export default {
// 计算cell的x坐标 // 计算cell的x坐标
getItemX(item, idx) { getItemX(item, idx) {
if (item.children) { if (item.children) {
return idx * (130 * 3) + 20 // return idx * (130 * 3) + 20
const col = (idx + 1) % 3 const col = (idx + 1) % 3
// console.log('col', idx, col) // console.log('col', idx, col)
// console.log('---', col > 0 ? col * (110 * 3) + 20 : 3 * (110 * 3) + 20 ) // console.log('---', col > 0 ? col * (110 * 3) + 20 : 3 * (110 * 3) + 20 )
...@@ -148,9 +162,19 @@ export default { ...@@ -148,9 +162,19 @@ export default {
if ((idx + 1) % 3 === 1) { if ((idx + 1) % 3 === 1) {
return 20 return 20
} else if ((idx + 1) % 3 === 2) { } else if ((idx + 1) % 3 === 2) {
return 140 if(Array.isArray(item.checkChildren)) {
return 410
} else {
return 140
}
// return 140 // 410
} else { } 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 { } else {
return idx * 120 + 20 return idx * 120 + 20
...@@ -161,15 +185,14 @@ export default { ...@@ -161,15 +185,14 @@ export default {
const rows = Math.ceil((idx + 1) / 3) const rows = Math.ceil((idx + 1) / 3)
if (item.children) { if (item.children) {
return 20 return 20
const h = Math.ceil(item.children.length / 3) // const h = Math.ceil(item.children.length / 3)
if (idx > 2) { // if (idx > 2) {
return rows * (h * 50) + 20 // return rows * (h * 50) + 20
} else { // } else {
return 30 // return 30
} // }
} else { } else {
if (idx > 2) { if (idx > 2) {
console.log('rows', rows)
if (rows > 2) { if (rows > 2) {
return rows * 40 + (rows - 2) * 20 return rows * 40 + (rows - 2) * 20
} else { } else {
...@@ -183,12 +206,17 @@ export default { ...@@ -183,12 +206,17 @@ export default {
setGeometry(list) { setGeometry(list) {
for (let index = 0; index < list.length; index++) { for (let index = 0; index < list.length; index++) {
const v = list[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) // console.log('v', v)
let geometry = this.model.getGeometry(v) let geometry = this.model.getGeometry(v)
geometry.height += 20 geometry.height += 20
geometry.width += 20 geometry.width += 20
this.model.setGeometry(v, geometry) // this.model.setGeometry(v, geometry)
// if (!v.children) { // if (!v.children) {
// return this.setGeometry(v.children) // return this.setGeometry(v.children)
// } // }
......
src/views/dataMapping/index.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Autor: pan * @Autor: pan
* @Date: 2024-04-23 11:30:05 * @Date: 2024-04-23 11:30:05
* @LastEditors: pan * @LastEditors: pan
* @LastEditTime: 2024-04-24 15:42:01 * @LastEditTime: 2024-04-24 20:05:34
--> -->
<template> <template>
<div class="dataMapping w-100"> <div class="dataMapping w-100">
...@@ -90,6 +90,9 @@ export default { ...@@ -90,6 +90,9 @@ export default {
this.$refs.tree.filter(val) 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: { methods: {
handleClick() { handleClick() {
this.$refs['graph'].clear() this.$refs['graph'].clear()
...@@ -145,8 +148,8 @@ export default { ...@@ -145,8 +148,8 @@ export default {
}, },
handleNodeClick(data) { handleNodeClick(data) {
const node = this.$refs.tree.getNode(data.id) const node = this.$refs.tree.getNode(data.id)
// console.log('data', data) console.log('data', data)
// console.log('node',node) console.log('node',node)
this.setNode(node) this.setNode(node)
}, },
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!