Skip to content

liangzhen / framework-tools-web

Go to a project
Commit d25372e5 by 史敦盼
Options

修改

1 parent 0184cd28
Inline Side-by-side
Showing with 390 additions and 37 deletions
src/components/Form.vue
......@@ -4,7 +4,7 @@
* @Autor: pan
* @Date: 2024-03-12 14:55:59
* @LastEditors: pan
* @LastEditTime: 2024-04-22 14:38:00
* @LastEditTime: 2024-04-30 09:52:55
-->
<template>
<div class="form-box">
......@@ -99,6 +99,23 @@ export default {
},
methods: {
/**
* @description: 修改单个表单的值
* @param {String} prop 修改的字段
* @param {any} value 修改的值
* @return {void}
* @author: pan
*/
changeFormItemData(prop, value) {
this.$nextTick(() => {
this.$set(
this.$refs['addForm'].formData,
prop,
value,
)
this.$refs['addForm'].$refs['formRef'].clearValidate(prop)
})
},
createUniqueString() {
const timestamp = +new Date() + ''
const randomNum = parseInt((1 + Math.random()) * 65536) + ''
......
src/views/archi-view-manage/canvas/Add.vue
......@@ -162,6 +162,7 @@ export default {
placeholder: '请选择', // elementui组件属性
filterable: true,
options: this.treeSelectData,
rules: [{ required: true, trigger: 'change', message: '不能为空' }],
props: {
children: 'children',
label: 'assetName',
......@@ -386,14 +387,7 @@ export default {
}).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.$refs['addForm'].changeFormItemData('assetNumber', res.msg)
// this.ruleForm.assetNumber = res.msg
}
})
......@@ -445,7 +439,7 @@ export default {
this.selectedObject = {}
this.formOptions.forEach((v) => {
if (v.prop === 'superiorNode') {
v.initValue = []
v.initValue = [{ assetName: '无', assetId: '无' }]
} else {
v.initValue = null
}
......@@ -498,15 +492,13 @@ export default {
JSON.stringify({ state: 2, graph: res.data.dataEle }),
)
// 通知画布更新
document
.getElementById('drawioGraph')
.contentWindow.postMessage(
{
type: 'attributeAssociation',
data: { archiBelongId, elementId, assetNumber },
},
'*',
)
document.getElementById('drawioGraph').contentWindow.postMessage(
{
type: 'attributeAssociation',
data: { archiBelongId, elementId, assetNumber },
},
'*',
)
} else {
this.$message.error(res.msg)
}
......@@ -542,7 +534,7 @@ export default {
archiType: this.getArchiType,
parentAssetId: this.selectedObject.assetId,
parentAssetName: this.selectedObject.assetName,
assetCode: this.selectCode,
assetCode: formInfo.assetNumber,
fieldsValue,
eleName: currentItem.elementName,
icon: this.selectGraphSrc,
......
src/views/busi-assets-list/index.vue
......@@ -636,6 +636,9 @@ export default {
let3: [
{ required: true, message: '请选择所属元素', trigger: 'change' },
],
let2: [
{ required: true, message: '请选择上级节点', trigger: 'change' },
],
},
rules2: {
let1: [
......@@ -681,7 +684,7 @@ export default {
archiBelongId: null,
archiType: null,
// archiAssetTypeId: null,
treeSelectData: [],
treeSelectData: [{assetName: '无', assetId: '无'}],
disabled1: false,
selectGraphSrc: '',
selectGraphShape: '',
......@@ -730,7 +733,7 @@ export default {
this.selectGraphShape = ''
this.addDialog = false
this.graphId = ''
this.treeSelectData = []
this.treeSelectData = [{assetName: '无', assetId: '无'}]
this.preArcList = []
},
getChooseSvg(svgInfo) {
......@@ -849,7 +852,7 @@ export default {
isShow: this.ruleForm.let5 == '显示' ? 0 : 1,
fieldsValue: fieldsValue,
targetAsset: targetAsset,
assetCode: this.selectCode,
assetCode: this.ruleForm.assetNumber,
eleName: eleName,
icon: this.selectGraphSrc,
iconName: this.selectGraphShape,
......@@ -1184,6 +1187,7 @@ export default {
console.log('value', value)
this.selectedObject = {}
if(value[0] === '无') {
this.ruleForm.let2 = value[0]
return this.assetNumberDis = false
}
this.assetNumberDis = true
......@@ -1280,7 +1284,7 @@ export default {
},
getShangJiJieDianSelect(eleName) {
this.treeSelectData = []
this.treeSelectData = [{assetName: '无', assetId: '无'}]
//上级节点下拉框值
const params = {
archiType: this.archiType,
......@@ -1329,7 +1333,7 @@ export default {
},
zuJianLeiXingSelectChange(data, flag) {
this.preArcList = []
this.treeSelectData = []
this.treeSelectData = [{assetName: '无', assetId: '无'}]
//所属元素选择后
// console.log(data)
// console.log(this.zuJianLeiXingSelect)
......
src/views/dataMapping/MxGraph.vue
......@@ -6,6 +6,9 @@
import businessCapabilityGraphMixin from './mixins/businessCapabilityGraph.mixin.js'
import dataSubjectRelationshipGraphMixin from './mixins/dataSubjectRelationshipGraph.mixin.js'
import technicalFrameworkGraph from './mixins/technicalFrameworkGraph.mixin.js'
import dataTopicGraph from './mixins/dataTopicGraph.mixin.js'
import safeManagementGraph from './mixins/safeManagementGraph.mixin.js'
import microservicesGraph from './mixins/microservicesGraph.mixin.js'
export default {
data() {
return {
......@@ -15,7 +18,14 @@ export default {
undoListener: null,
}
},
mixins: [businessCapabilityGraphMixin, dataSubjectRelationshipGraphMixin, technicalFrameworkGraph],
mixins: [
businessCapabilityGraphMixin,
dataSubjectRelationshipGraphMixin,
technicalFrameworkGraph,
dataTopicGraph,
safeManagementGraph,
microservicesGraph
],
components: {},
computed: {},
mounted() {
......@@ -51,5 +61,4 @@ export default {
#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-29 11:12:28
* @LastEditTime: 2024-04-30 11:19:44
-->
<template>
<div class="dataMapping w-100">
......@@ -313,11 +313,13 @@ export default {
// console.log(this.$refs.tree.getCheckedNodes())
switch (this.activeName) {
case '1':
this.handleBusGraph()
this.handleBusGraph('init')
break
case '2':
this.handleBusGraph('initMicroservicesGraph')
break
case '3':
// this.handleDataTopicGraph()
this.handleDataSubGraph(data, node)
break
case '4':
......@@ -327,6 +329,11 @@ export default {
break
}
},
// 数据主题视图
handleDataTopicGraph() {
const checkedNodes = this.$refs.tree.getCheckedNodes()
console.log('checkedNodes', checkedNodes)
},
// 技术框架视图
handleTechFrameGraph() {
const checkedNodes = this.$refs.tree.getCheckedNodes()
......@@ -395,7 +402,7 @@ export default {
return arr
},
// 业务能力视图成图数据逻辑
handleBusGraph() {
handleBusGraph(fnInitName) {
const checkedNodes = this.$refs.tree.getCheckedNodes()
this.graphData = checkedNodes.filter((v) => v.parentId === '0')
const addNodes = this.addData.filter((v) => v.parentId === '0')
......@@ -405,7 +412,7 @@ export default {
this.handleGraphData(showGraphData, [...childNodes, ...addChildNodes])
console.log('showGraphData', showGraphData)
this.$store.commit('graphData/CHANGE_GRAPH_DATA', showGraphData)
this.$refs['graph'].init()
this.$refs['graph'][fnInitName]()
},
handleGraphData(parentNodes, childNodes) {
parentNodes.forEach((v) => {
......@@ -423,7 +430,7 @@ export default {
fnGetAutomaticGraphing() {
const params = {
archiBelongId: this.activeName,
parentAssetId: this.activeName === '3' ? '0' : undefined,
// parentAssetId: this.activeName === '3' ? '0' : undefined,
}
getAutomaticGraphing(params).then((res) => {
if (res.code == 200) {
......
src/views/dataMapping/mixins/dataTopicGraph.mixin.js 0 → 100644
/*
* @Description: 数据主题视图逻辑
* @Version: 2.0
* @Autor: pan
* @Date: 2024-04-30 10:14:16
* @LastEditors: pan
* @LastEditTime: 2024-04-30 10:24:27
*/
const dataTopicGraph = {
methods: {
initDataTopicGraph() {
const parent = this.graph.getDefaultParent()
this.graph.removeCells(this.graph.getChildVertices(parent)) //清空画布
const model = this.graph.getModel()
var style = this.graph.getStylesheet().getDefaultVertexStyle()
// 禁止编辑文本
style[mxConstants.STYLE_EDITABLE] = false
// 启动一次更新会话
model.beginUpdate()
try {
//设置元素可编辑,不然无法自动布局
this.graph.setCellsLocked(false)
} finally {
model.endUpdate()
// 获取xml
// var encoder = new mxCodec()
// var node = encoder.encode(model)
// console.log('node', node)
}
},
},
}
export default dataTopicGraph
src/views/dataMapping/mixins/microservicesGraph.mixin.js 0 → 100644
/*
* @Description: 微服务总框架视图逻辑
* @Version: 2.0
* @Autor: pan
* @Date: 2024-04-30 11:07:22
* @LastEditors: pan
* @LastEditTime: 2024-04-30 11:29:41
*/
const microservicesGraph = {
data() {
return {
microservicesGraphData: [],
}
},
computed: {
mockData() {
return this.$store.state.graphData.graphData
},
},
methods: {
initMicroservicesGraph() {
this.microservicesGraphData = [
{
name: '微服务总框架视图',
children: 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
// 启动一次更新会话
model.beginUpdate()
try {
//设置元素可编辑,不然无法自动布局
this.graph.setCellsLocked(false)
// 插入一个矩形
const v1 = this.graph.insertVertex(
parent,
null,
this.microservicesGraphData[0].name,
20,
20,
null,
null,
'html=1;fontColor=#000000;fillColor=#4bacc6;labelPosition=center;verticalAlign=top;align=center;strokeColor=#000000;',
)
this.microservicesInsertVertex(v1, this.microservicesGraphData[0].children)
// console.log(v1)
console.log('parent', parent)
// 子节点宽高调整
this.microservicesSetGeometry(parent.children[0].children)
// 重新调整整体布局
const allCellData = parent.children[0].children
// 获取业务域最大宽度
let maxWidthArr = []
allCellData.forEach((v) => {
const currentItem = model.getGeometry(v)
maxWidthArr.push(currentItem.width || 100)
})
const maxWidth = Math.max(...maxWidthArr)
var geometry = model.getGeometry(parent.children[0])
let maxHeightArr = []
allCellData.forEach((v, i) => {
// 每个宽度统一成最大宽度的那一个
let currentMiddleItemGeometry = model.getGeometry(v)
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 > 2) {
// 取当前所属行的上一行的3个，取最大高度，来设置y
const lastRowCol3 = model.getGeometry(
allCellData[(row - 1) * 3 - 1],
)
const lastRowCol2 = model.getGeometry(
allCellData[(row - 1) * 3 - 2],
)
const lastRowCol1 = model.getGeometry(
allCellData[(row - 1) * 3 - 3],
)
const lastRowMaxHeight = Math.max(
...[lastRowCol3.height, lastRowCol2.height, lastRowCol1.height],
)
// 上一行的y
const lastRowY = model.getGeometry(allCellData[(row - 1) * 3 - 3]).y
currentMiddleItemGeometry.y = lastRowY + lastRowMaxHeight + 20
if ((i + 1) % 3 === 1) {
currentMiddleItemGeometry.x = lastRowCol1.x
} else if ((i + 1) % 3 === 2) {
currentMiddleItemGeometry.x = lastRowCol2.x
} else {
currentMiddleItemGeometry.x = lastRowCol3.x
}
// console.log('currentMiddleItemGeometry.y', currentMiddleItemGeometry.y)
} else {
if (i > 0) {
const last = model.getGeometry(allCellData[i - 1])
currentMiddleItemGeometry.x = last.x + last.width + 20
}
}
})
// 调整父节点宽高
if (allCellData.length > 2) {
geometry.width = maxWidth * 3 + 80
} 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
} finally {
model.endUpdate()
// 获取xml
// var encoder = new mxCodec()
// var node = encoder.encode(model)
// console.log('node', node)
}
},
microservicesInsertVertex(node, list) {
if (list && list.length) {
list.forEach((v, idx) => {
var cell = this.graph.insertVertex(
node,
null,
v.name,
this.microservicesGetItemX(v, idx),
this.microservicesGetItemY(v, idx),
// idx > 2 ? getItemY(idx, v.children) + 20 : 20,
v.checkChildren ? null : 100,
v.checkChildren ? null : 40,
`html=1;fontColor=#000000;fillColor=${
v.checkChildren ? '#ffffff' : '#ffd965'
};labelPosition=center;verticalAlign=${
v.checkChildren ? 'top' : 'middle'
};align=center;strokeColor=#000000;`,
)
// console.log('cell', cell)
if (v.checkChildren && v.checkChildren.length) {
this.microservicesInsertVertex(cell, v.checkChildren)
}
})
}
},
// 计算cell的x坐标
microservicesGetItemX(item, idx) {
console.log('item', item, idx)
if (item.children) {
// 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 )
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) {
if (Array.isArray(item.checkChildren)) {
return 410
} else {
return 140
}
// return 140 // 410
} else {
if (Array.isArray(item.checkChildren)) {
return 380 * 2 + 40
} else {
return 2 * 100 + 60
}
// return 2 * 140 + 20 // 380 * 2 + 40
}
} else {
// if(Array.isArray(item.checkChildren)) {
// return 380 * idx + 40
// } else {
return idx * 120 + 20
// }
}
}
},
microservicesGetItemY(item, idx) {
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
// }
} else {
if (idx > 2) {
if (rows > 2) {
return rows * 40 + (rows - 2) * 20
} else {
return rows * 40
}
} else {
return 20
}
}
},
microservicesSetGeometry(list) {
for (let index = 0; index < list.length; index++) {
const v = list[index]
if (!v.children) {
let geometry = this.model.getGeometry(v)
geometry.height = 60
return
}
// console.log('v', v)
let geometry = this.model.getGeometry(v)
geometry.height += 20
geometry.width += 20
}
},
},
}
export default microservicesGraph
\ No newline at end of file
src/views/dataMapping/mixins/safeManagementGraph.mixin.js 0 → 100644
/*
* @Description: 安全管理体系视图
* @Version: 2.0
* @Autor: pan
* @Date: 2024-04-30 10:55:48
* @LastEditors: pan
* @LastEditTime: 2024-04-30 10:56:28
*/
const safeManagementGraph = {
methods: {
initDataTopicGraph() {
const parent = this.graph.getDefaultParent()
this.graph.removeCells(this.graph.getChildVertices(parent)) //清空画布
const model = this.graph.getModel()
var style = this.graph.getStylesheet().getDefaultVertexStyle()
// 禁止编辑文本
style[mxConstants.STYLE_EDITABLE] = false
// 启动一次更新会话
model.beginUpdate()
try {
//设置元素可编辑,不然无法自动布局
this.graph.setCellsLocked(false)
} finally {
model.endUpdate()
// 获取xml
// var encoder = new mxCodec()
// var node = encoder.encode(model)
// console.log('node', node)
}
},
},
}
export default safeManagementGraph
src/views/dataMapping/mixins/technicalFrameworkGraph.mixin.js
......@@ -4,7 +4,7 @@
* @Autor: pan
* @Date: 2024-04-29 09:35:40
* @LastEditors: pan
* @LastEditTime: 2024-04-29 16:28:26
* @LastEditTime: 2024-04-30 10:12:37
*/
// const mockData = [
// {
......@@ -184,7 +184,7 @@ const technicalFrameworkGraph = {
20,
100,
40,
'html=1;fontColor=#000000;spacing=4;fillColor=#dbeef3;labelPosition=center;verticalAlign=top;align=center;strokeColor=#000000;',
'html=1;fontColor=#000000;spacing=4;whiteSpace=wrap;fillColor=#dbeef3;labelPosition=center;verticalAlign=top;align=center;strokeColor=#000000;',
)
this.middleInsertVertex(middleGraph, v.checkChildren)
......@@ -236,12 +236,22 @@ const technicalFrameworkGraph = {
if (this.hasLeftBox) {
const leftGeo = parent.children.find((v) => v.value == '安全防护')
let leftGeometry = model.getGeometry(leftGeo)
leftGeometry.height = maxHeight ? maxHeight - 20 : 40
if(!allCellData.length) {
leftGeometry.height += leftGeo.children.length * 50
} else {
leftGeometry.height = leftGeometry.height < maxHeight - 20 ? maxHeight - 20 : leftGeometry.height
}
// 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(!allCellData.length) {
rightGeometry.height += rightGeo.children.length * 50
} else {
rightGeometry.height = rightGeometry.height < maxHeight - 20 ? maxHeight - 20 : rightGeometry.height
}
// rightGeometry.height = maxHeight ? maxHeight - 20 : 40
if (this.hasLeftBox) {
const leftGeo = parent.children.find((v) => v.value == '安全防护')
const leftGeometry = model.getGeometry(leftGeo)
......@@ -286,7 +296,7 @@ const technicalFrameworkGraph = {
// 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;`,
`html=1;fontColor=#000000;whiteSpace=wrap;fillColor=#88eedf;labelPosition=center;verticalAlign=middle;align=center;strokeColor=#7fc2a0;`,
)
// console.log('cell', cell)
if (v.checkChildren && v.checkChildren.length) {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!