Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 48a26f84 by 史敦盼
Options

技术框架视图, 资产节点修改

1 parent df448725
Inline Side-by-side
Showing with 548 additions and 50 deletions
src/api/index.js
......@@ -859,3 +859,7 @@ export function queryRepeatAssetByNumber(params) {
export function getAssetDetail(params) {
return post(EADC_ARRCHITECTURE + '/archi-asset-view/assetTickInfo', params)
}
// 根据上级节点查询资产编号
export function getAssetCode(params) {
return post(EADC_ARRCHITECTURE + '/arc-ast-info/getAssetCode', params)
}
\ No newline at end of file
src/store/modules/graphData.js
const state = {
graphData: [], // 业务能力视图数据
dataSubjectRelationshipGraphData: [], // 数据主题关系视图数据
technicalFrameworkGraphData: {
techFrameLeftData: {},
techFrameMiddleData: [],
techFrameRightData: {},
}, // 技术框架视图数据
}
const mutations = {
CHANGE_GRAPH_DATA: (state, data) => {
......@@ -8,7 +13,10 @@ const mutations = {
},
CHANGE_DATA_SUB_GRAPH_DATA: (state, data) => {
state.dataSubjectRelationshipGraphData = data
}
},
CHANGE_TECH_FRAME_DATA: (state, data) => {
state.technicalFrameworkGraphData = data
},
}
export default {
namespaced: true,
......
src/views/archi-view-manage/canvas/Add.vue
......@@ -52,7 +52,8 @@ import {
getDianXingAnLiSelectData,
getQryByTree,
addMoreZiChanJiaGouTable,
queryArchiGraph
queryArchiGraph,
getAssetCode,
} from '@/api/index'
import { archiEleColor } from '@/config'
export default {
......@@ -68,7 +69,7 @@ export default {
assetName: {
type: String,
default: '',
}
},
},
data() {
return {
......@@ -90,6 +91,8 @@ export default {
selectGraphSrc: '',
selectGraphShape: '',
graphId: '',
selectedObject: {},
assetNumberDis: false,
}
},
components: { Form, ChooseSvg },
......@@ -112,6 +115,7 @@ export default {
element: 'el-input', // 指定elementui组件
placeholder: '请填写资产编号', // elementui组件属性
rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
readonly: this.assetNumberDis,
},
{
label: '所属元素', // label文字
......@@ -337,7 +341,10 @@ export default {
}
getQryByTree(params).then((res) => {
if (res.code == 200) {
this.treeSelectData = res.data
this.treeSelectData = [
{ assetName: '无', assetId: '无' },
...res.data,
]
}
})
},
......@@ -355,17 +362,41 @@ export default {
},
// 上级节点change
superiorNodeChange(value) {
this.selectedObject = {}
if (value[0] === '无') {
return (this.assetNumberDis = false)
}
this.assetNumberDis = true
// 当选中值变化时，更新绑定的对象
let selectedObject = {}
if (value && value.length) {
// 假设我们根据id来查询对象
selectedObject = this.findObjectById(this.treeSelectData, value[0])
this.selectedObject = this.findObjectById(
this.treeSelectData,
value[value.length - 1],
)
} else {
selectedObject = null
this.selectedObject = null
}
this.superiorNodeValue = selectedObject.assetId
this.superiorNodeLabel = selectedObject.assetName
this.selectCode = selectedObject.assetCode
// this.superiorNodeValue = selectedObject.assetId
// this.superiorNodeLabel = selectedObject.assetName
// this.selectCode = selectedObject.assetCode
getAssetCode({
archiType: this.getArchiType,
superiorAssetCode: this.selectedObject.assetNumber,
}).then((res) => {
if (res.code === 200) {
this.selectCode = res.msg
this.$nextTick(() => {
this.$set(
this.$refs['addForm'].formData,
'assetNumber',
res.msg,
)
this.$refs['addForm'].$refs['formRef'].clearValidate('assetNumber')
})
// this.ruleForm.assetNumber = res.msg
}
})
},
findObjectById(items, id) {
for (let i = 0; i < items.length; i++) {
......@@ -411,6 +442,7 @@ export default {
this.selectGraphShape = ''
this.graphId = ''
this.dynamicForm_ = []
this.selectedObject = {}
this.formOptions.forEach((v) => {
if (v.prop === 'superiorNode') {
v.initValue = []
......@@ -468,7 +500,13 @@ export default {
// 通知画布更新
document
.getElementById('drawioGraph')
.contentWindow.postMessage({ type: 'attributeAssociation' , data: { archiBelongId, elementId, assetNumber }}, '*')
.contentWindow.postMessage(
{
type: 'attributeAssociation',
data: { archiBelongId, elementId, assetNumber },
},
'*',
)
} else {
this.$message.error(res.msg)
}
......@@ -502,8 +540,8 @@ export default {
archiStage: 1,
archiBelongId,
archiType: this.getArchiType,
parentAssetId: this.superiorNodeValue,
parentAssetName: this.superiorNodeLabel,
parentAssetId: this.selectedObject.assetId,
parentAssetName: this.selectedObject.assetName,
assetCode: this.selectCode,
fieldsValue,
eleName: currentItem.elementName,
......@@ -512,6 +550,7 @@ export default {
parentElement: [formInfo.parentElement || ''],
graphId: this.graphId,
state: 1,
parentCode: this.selectedObject.assetCode,
}
return params
},
......
src/views/busi-assets-list/index.vue
......@@ -333,6 +333,7 @@
v-no-backslash
v-model="ruleForm.assetNumber"
:disabled="is_add_edit == 'view' ? true : false"
:readonly="assetNumberDis"
maxlength="100"
></el-input>
</el-form-item>
......@@ -396,9 +397,9 @@
<el-radio label="隐藏"></el-radio>
</el-radio-group>
</el-form-item> -->
<!-- :disabled="is_add_edit == 'view' || !ruleForm.preArc && !treeSelectData.length ? true : false" -->
<el-form-item label="上级节点:" prop="let2">
<el-cascader
:disabled="is_add_edit == 'view' || !ruleForm.preArc && !treeSelectData.length ? true : false"
v-model="cascaderValue"
:options="treeSelectData"
filterable
......@@ -591,7 +592,8 @@ import {
getDianXingAnLiSelectData,
importZhiChanJiaGou,
queryGuanLianZiChanSelect,
getPreArc
getPreArc,
getAssetCode
} from '@/api/index.js'
import $ from 'jquery'
import { MessageBox, Message } from 'element-ui'
......@@ -689,7 +691,9 @@ export default {
cascaderValue2: [],
preArcList: [],
predefineColors: archiEleColor,
graphId: ''
graphId: '',
selectedObject: {},
assetNumberDis: false
}
},
created() {
......@@ -840,8 +844,8 @@ export default {
archiEleId: this.ruleForm.let3,
assetName: this.ruleForm.let1,
sort: this.ruleForm.let4,
parentAssetId: this.selectValue,
parentAssetName: this.selectLabel,
parentAssetId: this.selectedObject.assetId,
parentAssetName: this.selectedObject.assetName,
isShow: this.ruleForm.let5 == '显示' ? 0 : 1,
fieldsValue: fieldsValue,
targetAsset: targetAsset,
......@@ -853,6 +857,7 @@ export default {
parentElement: [this.ruleForm.preArc],
assetNumber: this.ruleForm.assetNumber,
graphId: this.graphId,
parentCode: this.selectedObject.assetCode
}
const requestParams =
this.is_add_edit == 'add'
......@@ -1177,18 +1182,32 @@ export default {
},
handleChange(value) {
console.log('value', value)
this.selectedObject = {}
if(value[0] === '无') {
return this.assetNumberDis = false
}
this.assetNumberDis = true
// 当选中值变化时，更新绑定的对象
let selectedObject = {}
if (value && value.length) {
// 假设我们根据id来查询对象
selectedObject = this.findObjectById(this.treeSelectData, value[0]);
this.selectedObject = this.findObjectById(this.treeSelectData, value[value.length - 1]);
} else {
selectedObject = null;
this.selectedObject = null;
}
this.selectValue = selectedObject.assetId
this.selectLabel = selectedObject.assetName
this.selectCode = selectedObject.assetCode
this.ruleForm.let2 = selectedObject.assetName
// this.selectValue = selectedObject.assetId
// this.selectLabel = selectedObject.assetName
// this.selectCode = selectedObject.assetCode
this.ruleForm.let2 = this.selectedObject.assetName
getAssetCode({
archiType: this.archiType,
superiorAssetCode: this.selectedObject.assetNumber
}).then(res => {
if(res.code === 200) {
this.selectCode = res.msg
this.ruleForm.assetNumber = res.msg
this.$refs.form.clearValidate('let2')
}
})
// console.log('selectedObject', this.selectedObject, value)
},
findObjectById(items, id) {
......@@ -1261,6 +1280,7 @@ export default {
},
getShangJiJieDianSelect(eleName) {
this.treeSelectData = []
//上级节点下拉框值
const params = {
archiType: this.archiType,
......@@ -1275,7 +1295,7 @@ export default {
// console.log('上级节点')
// console.log(res.data)
this.shangJiJieDianSelect = res.data
this.treeSelectData = res.data
this.treeSelectData = [...this.treeSelectData, ...res.data]
}
})
},
......@@ -1656,8 +1676,8 @@ export default {
this.archiType = res.data[0].archiType
this.getArchiEleList() // 所属元素下拉
// this.archiAssetTypeId = res.data[0].viewId;
this.getShangJiJieDianSelect()
this.getGuanLianZiChanSelectData(null)
// this.getShangJiJieDianSelect()
// this.getGuanLianZiChanSelectData(null)
this.get_table()
} else {
Message({
......
src/views/dataMapping/MxGraph.vue
......@@ -5,32 +5,51 @@
<script>
import businessCapabilityGraphMixin from './mixins/businessCapabilityGraph.mixin.js'
import dataSubjectRelationshipGraphMixin from './mixins/dataSubjectRelationshipGraph.mixin.js'
import technicalFrameworkGraph from './mixins/technicalFrameworkGraph.mixin.js'
export default {
data() {
return {
graph: null,
model: null,
graphData: []
undoMng: null,
undoListener: null,
}
},
mixins: [businessCapabilityGraphMixin, dataSubjectRelationshipGraphMixin],
mixins: [businessCapabilityGraphMixin, dataSubjectRelationshipGraphMixin, technicalFrameworkGraph],
components: {},
computed: {
},
computed: {},
mounted() {
this.graph = new mxGraph(document.getElementById('mxGraph_root'))
this.model = this.graph.getModel()
console.log('this.model', this.model)
// console.log('this.model', this.model)
// 测试撤销功能
// this.undoMng = new mxUndoManager()
// const that = this
// this.undoListener = function (sender, evt) {
// that.undoMng.undoableEditHappened(evt.getProperty('edit'))
// }
// this.graph.getModel().addListener(mxEvent.UNDO, this.undoListener)
// this.graph.getView().addListener(mxEvent.UNDO, this.undoListener)
// console.log('this.graph', this.graph)
},
methods: {
fnUndo() {
this.undoMng.undo()
},
clear() {
this.model.clear()
},
},
beforeDestroy() {
this.graph.getModel().removeListener(mxEvent.UNDO, this.undoListener)
this.graph.getView().removeListener(mxEvent.UNDO, this.undoListener)
},
}
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
#mxGraph_root {
min-height: 1168px;
}
</style>
src/views/dataMapping/index.vue
......@@ -4,7 +4,7 @@
* @Autor: pan
* @Date: 2024-04-23 11:30:05
* @LastEditors: pan
* @LastEditTime: 2024-04-28 17:05:14
* @LastEditTime: 2024-04-29 11:12:28
-->
<template>
<div class="dataMapping w-100">
......@@ -310,7 +310,7 @@ export default {
this.handleDataToGraph()
},
handleDataToGraph(data, node) {
console.log(this.$refs.tree.getCheckedNodes())
// console.log(this.$refs.tree.getCheckedNodes())
switch (this.activeName) {
case '1':
this.handleBusGraph()
......@@ -320,10 +320,42 @@ export default {
case '3':
this.handleDataSubGraph(data, node)
break
case '4':
this.handleTechFrameGraph()
break
default:
break
}
},
// 技术框架视图
handleTechFrameGraph() {
const checkedNodes = this.$refs.tree.getCheckedNodes()
let parentNodes = checkedNodes.filter((v) => v.parentId === '0')
const childNodes = checkedNodes.filter((v) => v.parentId !== '0')
this.handleGraphData(parentNodes, childNodes)
const leftIdx = parentNodes.findIndex(v => v.assetName === '安全防护')
let techFrameLeftData = {}
if(leftIdx !== -1) {
techFrameLeftData = parentNodes.splice(leftIdx, 1)[0];
// parentNodes.splice(0, 0, leftElement);
}
const rightIdx = parentNodes.findIndex(v => v.assetName === '运行维护')
let techFrameRightData = {}
if(rightIdx !== -1) {
techFrameRightData = parentNodes.splice(rightIdx, 1)[0];
// parentNodes.splice(parentNodes.length, 0, rightElement);
}
// console.log('parentNodes4', parentNodes)
let graphData = {
techFrameLeftData,
techFrameRightData,
techFrameMiddleData: parentNodes
}
// console.log('graphData4', graphData)
this.$store.commit('graphData/CHANGE_TECH_FRAME_DATA', graphData)
this.$refs['graph'].initTechnicalFrameworkGraph()
},
// 数据主题关系视图成图逻辑
handleDataSubGraph(data, node) {
if(node.checked) {
......
src/views/dataMapping/mixins/businessCapabilityGraph.mixin.js
......@@ -4,9 +4,14 @@
* @Autor: pan
* @Date: 2024-04-28 11:05:28
* @LastEditors: pan
* @LastEditTime: 2024-04-28 16:01:35
* @LastEditTime: 2024-04-29 10:36:49
*/
const businessCapabilityGraphMixin = {
data() {
return {
graphData: [],
}
},
computed: {
mockData() {
return this.$store.state.graphData.graphData
......@@ -20,12 +25,12 @@ const businessCapabilityGraphMixin = {
children: this.mockData,
},
]
console.log('mockData', this.mockData)
// console.log('mockData', this.mockData)
// mxgraph 被暴露在window下，所以可以直接调用
const parent = this.graph.getDefaultParent()
this.graph.removeCells(this.graph.getChildVertices(parent)) //清空画布
const model = this.graph.getModel()
// mxGraphHandler.prototype.guidesEnabled = true
var style = this.graph.getStylesheet().getDefaultVertexStyle()
// 禁止编辑文本
style[mxConstants.STYLE_EDITABLE] = false
......@@ -45,12 +50,12 @@ const businessCapabilityGraphMixin = {
null,
'html=1;fontColor=#000000;fillColor=#dcf8e5;labelPosition=center;verticalAlign=top;align=center;strokeColor=#7fc2a0;',
)
this.insertVertex(v1, this.graphData[0].children)
this.businessInsertVertex(v1, this.graphData[0].children)
// console.log(v1)
console.log('parent', parent)
// 子节点宽高调整
this.setGeometry(parent.children[0].children)
this.businessSetGeometry(parent.children[0].children)
// 重新调整整体布局
const allCellData = parent.children[0].children
......@@ -138,15 +143,15 @@ const businessCapabilityGraphMixin = {
console.log('node', node)
}
},
insertVertex(node, list) {
businessInsertVertex(node, list) {
if (list && list.length) {
list.forEach((v, idx) => {
var cell = this.graph.insertVertex(
node,
null,
v.name,
this.getItemX(v, idx),
this.getItemY(v, idx),
this.businessGetItemX(v, idx),
this.businessGetItemY(v, idx),
// idx > 2 ? getItemY(idx, v.children) + 20 : 20,
v.checkChildren ? null : 100,
v.checkChildren ? null : 40,
......@@ -158,13 +163,13 @@ const businessCapabilityGraphMixin = {
)
// console.log('cell', cell)
if (v.checkChildren && v.checkChildren.length) {
this.insertVertex(cell, v.checkChildren)
this.businessInsertVertex(cell, v.checkChildren)
}
})
}
},
// 计算cell的x坐标
getItemX(item, idx) {
businessGetItemX(item, idx) {
console.log('item', item, idx)
if (item.children) {
// return idx * (130 * 3) + 20
......@@ -200,7 +205,7 @@ const businessCapabilityGraphMixin = {
}
}
},
getItemY(item, idx) {
businessGetItemY(item, idx) {
const rows = Math.ceil((idx + 1) / 3)
if (item.children) {
return 20
......@@ -222,7 +227,7 @@ const businessCapabilityGraphMixin = {
}
}
},
setGeometry(list) {
businessSetGeometry(list) {
for (let index = 0; index < list.length; index++) {
const v = list[index]
if (!v.children) {
......
src/views/dataMapping/mixins/technicalFrameworkGraph.mixin.js 0 → 100644
/*
* @Description: 技术框架视图逻辑
* @Version: 2.0
* @Autor: pan
* @Date: 2024-04-29 09:35:40
* @LastEditors: pan
* @LastEditTime: 2024-04-29 16:28:26
*/
// const mockData = [
// {
// id: '1',
// name: '安全防护',
// children: [
// {name: '安全管理'},
// {name: '工作机制'},
// {name: '规范制度'},
// {name: '安全防护'},
// {name: '安全监测'},
// ]
// },
// {
// name: '渠道访问',
// children: [
// { name: '桌面门户'},
// { name: '移动应用'},
// { name: '大屏可视化'},
// ]
// },
// {
// name: '基础应用',
// children: [
// { name: '电子邮件'},
// { name: '统一视频'},
// { name: '统一搜索'},
// { name: '移动应用支撑'},
// { name: '知识管理'},
// { name: '地理信息'},
// ]
// },
// {
// name: '云平台组件',
// children: [
// { name: '信息集成'},
// { name: '数据处理'},
// { name: '应用构建'},
// ]
// },
// {
// name: '云服务中心'
// },
// {
// name: '云基础设施',
// children: [
// { name: '集中式云资源管理系统'},
// { name: '分布式云操作系统'},
// { name: '负载均衡'},
// { name: '内容分发网络'},
// { name: '基础硬件'},
// ]
// },
// {
// name: '运行维护',
// children: [
// {name: '调度管理'},
// {name: '运行监控'},
// {name: '运维服务'},
// ]
// }
// ]
const technicalFrameworkGraph = {
computed: {
technicalFraData() {
return this.$store.state.graphData.technicalFrameworkGraphData
},
techFrameLeftData() {
return this.technicalFraData.techFrameLeftData
},
techFrameMiddleData() {
return this.technicalFraData.techFrameMiddleData
},
techFrameRightData() {
return this.technicalFraData.techFrameRightData
},
hasLeftBox() {
return Object.keys(this.techFrameLeftData).length
},
hasRightBox() {
return Object.keys(this.techFrameRightData).length
},
},
methods: {
initTechnicalFrameworkGraph() {
const parent = this.graph.getDefaultParent()
this.graph.removeCells(this.graph.getChildVertices(parent)) //清空画布
const model = this.graph.getModel()
var style = this.graph.getStylesheet().getDefaultVertexStyle()
console.log('this.technicalFraData', this.technicalFraData)
// 禁止编辑文本
style[mxConstants.STYLE_EDITABLE] = false
// 启动一次更新会话
model.beginUpdate()
try {
//设置元素可编辑,不然无法自动布局
this.graph.setCellsLocked(false)
// console.log(
// 'this.technicalFraData',
// this.technicalFraData,
// this.techFrameMiddleData,
// )
// left---------------
if (this.hasLeftBox) {
// 插入一个矩形
const leftGraph = this.graph.insertVertex(
parent,
null,
this.techFrameLeftData.name,
20,
20,
100,
40,
'html=1;fontColor=#000000;spacing=20;fillColor=#00cc00;labelPosition=center;verticalAlign=top;align=center;strokeColor=#000000;',
)
if (this.techFrameLeftData.checkChildren.length) {
this.technicalInsertVertex(
leftGraph,
this.techFrameLeftData.checkChildren,
)
} else {
// model.getGeometry(leftGraph)
}
// console.log('parent', parent)
// 调整父节点宽高
let geometry = model.getGeometry(leftGraph)
geometry.height += 20
geometry.width += 20
model.setGeometry(leftGraph, geometry)
// 子节点宽高调整
this.technicalSetGeometry(leftGraph.children)
}
// right---------------
if (this.hasRightBox) {
const rightGraph = this.graph.insertVertex(
parent,
null,
this.techFrameRightData.name,
20,
20,
100,
40,
'html=1;fontColor=#000000;spacing=20;fillColor=#d60093;labelPosition=center;verticalAlign=top;align=center;strokeColor=#000000;',
)
this.technicalInsertVertex(
rightGraph,
this.techFrameRightData.checkChildren,
)
var rightGeometry = model.getGeometry(rightGraph)
rightGeometry.height += 20
rightGeometry.width += 20
model.setGeometry(rightGraph, rightGeometry)
// 子节点宽高调整
this.technicalSetGeometry(rightGraph.children)
}
// middle---------------
if (this.techFrameMiddleData.length) {
let geometryMid = null
if (this.techFrameLeftData.id) {
// console.log('parentLeft', parent)
parent.children.forEach((v) => {
if (v.value === '安全防护') {
geometryMid = v.geometry
}
})
}
const middleData = this.techFrameMiddleData // this.technicalFraData.filter((v, i) => i !=0 & i != this.technicalFraData.length - 1)
const midX = (geometryMid?.width ?? 20) + 40
middleData.forEach((v) => {
const middleGraph = this.graph.insertVertex(
parent,
null,
v.name,
midX,
20,
100,
40,
'html=1;fontColor=#000000;spacing=4;fillColor=#dbeef3;labelPosition=center;verticalAlign=top;align=center;strokeColor=#000000;',
)
this.middleInsertVertex(middleGraph, v.checkChildren)
var middleGeometry = model.getGeometry(middleGraph)
middleGeometry.height += 20
middleGeometry.width += 20
model.setGeometry(middleGraph, middleGeometry)
})
}
console.log('parent', parent)
// 重新调整中部布局
const allCellData = parent.children.filter(
(v) => v.value != '安全防护' && v.value != '运行维护',
)
// 获取最大宽度
let maxWidthArr = []
let maxHeight = 0
allCellData.forEach((v) => {
const currentItem = model.getGeometry(v)
maxWidthArr.push(currentItem.width)
})
const maxWidth = maxWidthArr.length ? Math.max(...maxWidthArr) : 0
allCellData.forEach((v, i) => {
let currentMiddleItemGeometry = model.getGeometry(v)
// let lastMiddleItemGeometry = model.getGeometry(allCellData[i - 1])
if (i > 0) {
// 计算中间每条的y坐标值
let lastGeoArr = allCellData.filter((v, i2) => i2 < i)
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
if (this.hasLeftBox) {
const leftGeo = parent.children.find((v) => v.value == '安全防护')
let leftGeometry = model.getGeometry(leftGeo)
currentMiddleItemGeometry.x = leftGeometry.width + 40
}
})
// 重新调整左右两侧高度
allCellData.forEach((v, index) => {
let currentMiddleItemGeometry = model.getGeometry(v)
maxHeight = maxHeight + currentMiddleItemGeometry.height + 20
})
if (this.hasLeftBox) {
const leftGeo = parent.children.find((v) => v.value == '安全防护')
let leftGeometry = model.getGeometry(leftGeo)
leftGeometry.height = maxHeight ? maxHeight - 20 : 40
}
if (this.hasRightBox) {
const rightGeo = parent.children.find((v) => v.value == '运行维护')
let rightGeometry = model.getGeometry(rightGeo)
rightGeometry.height = maxHeight ? maxHeight - 20 : 40
if (this.hasLeftBox) {
const leftGeo = parent.children.find((v) => v.value == '安全防护')
const leftGeometry = model.getGeometry(leftGeo)
console.log('max', maxWidth)
rightGeometry.x = maxWidth + leftGeometry.width + 60
} else {
rightGeometry.x = maxWidth + 60
}
}
} finally {
model.endUpdate()
// 获取xml
// var encoder = new mxCodec()
// var node = encoder.encode(model)
// console.log('node', node)
}
},
technicalSetGeometry(list) {
if (!list) return
for (let index = 0; index < list.length; index++) {
const v = list[index]
if (!v.children) return
// console.log('v', v)
let geometry = this.model.getGeometry(v)
// geometry.height += 20
// geometry.width += 20
this.model.setGeometry(v, geometry)
// if (!v.children) {
// return setGeometry(v.children)
// }
}
},
technicalInsertVertex(node, list) {
if (list && list.length) {
list.forEach((v, idx) => {
var cell = this.graph.insertVertex(
node,
null,
v.name,
20,
(idx + 1) * 50,
// idx > 2 ? technicalGetItemY(idx, v.children) + 20 : 20,
v.checkChildren ? null : 100,
v.checkChildren ? null : 40,
`html=1;fontColor=#000000;fillColor=#88eedf;labelPosition=center;verticalAlign=middle;align=center;strokeColor=#7fc2a0;`,
)
// console.log('cell', cell)
if (v.checkChildren && v.checkChildren.length) {
this.technicalInsertVertex(cell, v.checkChildren)
}
})
}
},
middleInsertVertex(node, list) {
if (list && list.length) {
list.forEach((v, idx) => {
var cell = this.graph.insertVertex(
node,
null,
v.name,
this.technicalGetItemX(v, idx),
this.technicalGetItemY(v, idx),
// idx > 2 ? technicalGetItemY(idx, v.children) + 20 : 20,
v.checkChildren ? null : 100,
v.checkChildren ? null : 40,
`html=1;fontColor=#000000;fillColor=#88eedf;labelPosition=center;verticalAlign=middle;align=center;strokeColor=#7fc2a0;`,
)
// console.log('cell', cell)
if (v.checkChildren && v.checkChildren.length) {
this.middleInsertVertex(cell, v.checkChildren)
}
})
}
},
// 计算cell的x坐标
technicalGetItemX(item, idx) {
console.log('item', item)
if (item.children) {
if (this.hasLeftBox) {
const leftGeo = parent.children.find((v) => v.value == '安全防护')
let leftGeometry = model.getGeometry(leftGeo)
return leftGeometry.width + 120
} else {
return 20
}
// const col = (idx + 1) % 3
// return col > 0 ? (col - 1) * (130 * 3) + 20 : 2 * (130 * 3) + 20
} else {
if (idx > 2) {
if ((idx + 1) % 3 === 1) {
return 20
} else if ((idx + 1) % 3 === 2) {
return 140
} else {
return 2 * 120 + 20
}
} else {
return idx * 120 + 20
}
}
},
technicalGetItemY(item, idx) {
const rows = Math.ceil((idx + 1) / 3)
if (item.checkChildren) {
const h = Math.ceil(item.checkChildren.length / 3)
if (idx > 2) {
return rows * (h * 50) + 20
} else {
return 30
}
} else {
if (idx > 2) {
if (rows > 2) {
return rows * 40 + (rows - 2) * 20
} else {
return rows * 40
}
} else {
return 20
}
}
},
},
}
export default technicalFrameworkGraph
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!