Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 07dca79f by 史敦盼
Options

Merge branch 'sdp-v1'

2 parents ea7fd6c3 a6e63745
Inline Side-by-side
Showing with 306 additions and 11 deletions
src/store/modules/graphData.js
...@@ -6,6 +6,13 @@ const state = { ...@@ -6,6 +6,13 @@ const state = {
techFrameMiddleData: [], techFrameMiddleData: [],
techFrameRightData: {}, techFrameRightData: {},
}, // 技术框架视图数据 }, // 技术框架视图数据
safeManagementGraphData: {
safeTopData: {},
safeMidLeftData: {},
safeMidCenterData: {},
safeMidRightData: {},
safeBottomData: {},
}, // 安全管理体系视图
} }
const mutations = { const mutations = {
CHANGE_GRAPH_DATA: (state, data) => { CHANGE_GRAPH_DATA: (state, data) => {
...@@ -17,6 +24,9 @@ const mutations = { ...@@ -17,6 +24,9 @@ const mutations = {
CHANGE_TECH_FRAME_DATA: (state, data) => { CHANGE_TECH_FRAME_DATA: (state, data) => {
state.technicalFrameworkGraphData = data state.technicalFrameworkGraphData = data
}, },
CHANGE_SAFE_MANAGEMENT_DATA: (state, data) => {
state.safeManagementGraphData = data
},
} }
export default { export default {
namespaced: true, namespaced: true,
......
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-30 11:19:44 * @LastEditTime: 2024-04-30 16:26:56
--> -->
<template> <template>
<div class="dataMapping w-100"> <div class="dataMapping w-100">
...@@ -325,10 +325,53 @@ export default { ...@@ -325,10 +325,53 @@ export default {
case '4': case '4':
this.handleTechFrameGraph() this.handleTechFrameGraph()
break break
case '5':
this.handleSafeManageGraph()
break
default: default:
break break
} }
}, },
// 安全管理体系视图
handleSafeManageGraph() {
const checkedNodes = this.$refs.tree.getCheckedNodes()
let parentNodes = checkedNodes.filter((v) => v.parentId === '0')
console.log('e', parentNodes)
const childNodes = checkedNodes.filter((v) => v.parentId !== '0')
this.handleGraphData(parentNodes, childNodes)
const layoutList = [{
name: '安全管理原则',
key: 'safeTopData'
},{
name: '安全监督',
key: 'safeMidLeftData'
},{
name: '安全管理',
key: 'safeMidCenterData'
}, {
name: '制度规范',
key: 'safeMidRightData'
},{
name: '工作机制',
key: 'safeBottomData'
}]
let graphData = {
safeTopData: {},
safeMidLeftData: {},
safeMidCenterData: {},
safeMidRightData: {},
safeBottomData: {}
}
layoutList.forEach(v => {
const idx = parentNodes.findIndex(v2 => v2.assetName === v.name)
if(idx !== -1) {
graphData[v.key] = parentNodes[idx];
}
})
this.$store.commit('graphData/CHANGE_SAFE_MANAGEMENT_DATA', graphData)
this.$refs['graph'].initSafeManagementGraph()
console.log('graphData', graphData, parentNodes)
},
// 数据主题视图 // 数据主题视图
handleDataTopicGraph() { handleDataTopicGraph() {
const checkedNodes = this.$refs.tree.getCheckedNodes() const checkedNodes = this.$refs.tree.getCheckedNodes()
...@@ -344,13 +387,13 @@ export default { ...@@ -344,13 +387,13 @@ export default {
const leftIdx = parentNodes.findIndex(v => v.assetName === '安全防护') const leftIdx = parentNodes.findIndex(v => v.assetName === '安全防护')
let techFrameLeftData = {} let techFrameLeftData = {}
if(leftIdx !== -1) { if(leftIdx !== -1) {
techFrameLeftData = parentNodes.splice(leftIdx, 1)[0]; techFrameLeftData = parentNodes[leftIdx];
// parentNodes.splice(0, 0, leftElement); // parentNodes.splice(0, 0, leftElement);
} }
const rightIdx = parentNodes.findIndex(v => v.assetName === '运行维护') const rightIdx = parentNodes.findIndex(v => v.assetName === '运行维护')
let techFrameRightData = {} let techFrameRightData = {}
if(rightIdx !== -1) { if(rightIdx !== -1) {
techFrameRightData = parentNodes.splice(rightIdx, 1)[0]; techFrameRightData = parentNodes[rightIdx];
// parentNodes.splice(parentNodes.length, 0, rightElement); // parentNodes.splice(parentNodes.length, 0, rightElement);
} }
// console.log('parentNodes4', parentNodes) // console.log('parentNodes4', parentNodes)
...@@ -430,7 +473,7 @@ export default { ...@@ -430,7 +473,7 @@ export default {
fnGetAutomaticGraphing() { fnGetAutomaticGraphing() {
const params = { const params = {
archiBelongId: this.activeName, archiBelongId: this.activeName,
// parentAssetId: this.activeName === '3' ? '0' : undefined, parentAssetId: this.activeName === '3' ? '0' : undefined,
} }
getAutomaticGraphing(params).then((res) => { getAutomaticGraphing(params).then((res) => {
if (res.code == 200) { if (res.code == 200) {
...@@ -444,8 +487,8 @@ export default { ...@@ -444,8 +487,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)
this.tableData = [...this.$refs.tree.getCheckedNodes(), ...this.addData] this.tableData = [...this.$refs.tree.getCheckedNodes(), ...this.addData]
if (!this.tableData.length) { if (!this.tableData.length) {
......
src/views/dataMapping/mixins/microservicesGraph.mixin.js
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Autor: pan * @Autor: pan
* @Date: 2024-04-30 11:07:22 * @Date: 2024-04-30 11:07:22
* @LastEditors: pan * @LastEditors: pan
* @LastEditTime: 2024-04-30 11:29:41 * @LastEditTime: 2024-04-30 14:14:49
*/ */
const microservicesGraph = { const microservicesGraph = {
data() { data() {
...@@ -66,6 +66,7 @@ const microservicesGraph = { ...@@ -66,6 +66,7 @@ const microservicesGraph = {
maxWidthArr.push(currentItem.width || 100) maxWidthArr.push(currentItem.width || 100)
}) })
const maxWidth = Math.max(...maxWidthArr) const maxWidth = Math.max(...maxWidthArr)
console.log('maxWidth', maxWidth)
var geometry = model.getGeometry(parent.children[0]) var geometry = model.getGeometry(parent.children[0])
let maxHeightArr = [] let maxHeightArr = []
allCellData.forEach((v, i) => { allCellData.forEach((v, i) => {
...@@ -170,7 +171,7 @@ const microservicesGraph = { ...@@ -170,7 +171,7 @@ const microservicesGraph = {
}, },
// 计算cell的x坐标 // 计算cell的x坐标
microservicesGetItemX(item, idx) { microservicesGetItemX(item, idx) {
console.log('item', item, idx) // console.log('item', 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
...@@ -231,9 +232,11 @@ const microservicesGraph = { ...@@ -231,9 +232,11 @@ const microservicesGraph = {
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) { if (!v.children) {
// console.log('v', v)
let geometry = this.model.getGeometry(v) let geometry = this.model.getGeometry(v)
geometry.height = 60 geometry.height = 60
return geometry.width += 20
// return
} }
// console.log('v', v) // console.log('v', v)
let geometry = this.model.getGeometry(v) let geometry = this.model.getGeometry(v)
......
src/views/dataMapping/mixins/safeManagementGraph.mixin.js
...@@ -4,12 +4,47 @@ ...@@ -4,12 +4,47 @@
* @Autor: pan * @Autor: pan
* @Date: 2024-04-30 10:55:48 * @Date: 2024-04-30 10:55:48
* @LastEditors: pan * @LastEditors: pan
* @LastEditTime: 2024-04-30 10:56:28 * @LastEditTime: 2024-04-30 17:53:31
*/ */
const safeManagementGraph = { const safeManagementGraph = {
computed: {
safeManagementData() {
return this.$store.state.graphData.safeManagementGraphData
},
safeTopData() {
return this.safeManagementData.safeTopData
},
safeMidLeftData() {
return this.safeManagementData.safeMidLeftData
},
safeMidCenterData() {
return this.safeManagementData.safeMidCenterData
},
safeMidRightData() {
return this.safeManagementData.safeMidRightData
},
safeBottomData() {
return this.safeManagementData.safeBottomData
},
hasSafeTop() {
return Object.keys(this.safeTopData).length
},
hasSafeMidLeft() {
return Object.keys(this.safeMidLeftData).length
},
hasSafeMidCenter() {
return Object.keys(this.safeMidCenterData).length
},
hasSafeMidRight() {
return Object.keys(this.safeMidRightData).length
},
hasSafeBottom() {
return Object.keys(this.safeBottomData).length
},
},
methods: { methods: {
initDataTopicGraph() { initSafeManagementGraph() {
const parent = this.graph.getDefaultParent() const parent = this.graph.getDefaultParent()
this.graph.removeCells(this.graph.getChildVertices(parent)) //清空画布 this.graph.removeCells(this.graph.getChildVertices(parent)) //清空画布
const model = this.graph.getModel() const model = this.graph.getModel()
...@@ -21,6 +56,127 @@ const safeManagementGraph = { ...@@ -21,6 +56,127 @@ const safeManagementGraph = {
try { try {
//设置元素可编辑,不然无法自动布局 //设置元素可编辑,不然无法自动布局
this.graph.setCellsLocked(false) this.graph.setCellsLocked(false)
// 顶部
if (this.hasSafeTop) {
const topGraph = this.graph.insertVertex(
parent,
null,
this.safeTopData.name,
20,
20,
100,
40,
'html=1;fontColor=#000000;spacing=10;fillColor=#bdd7ee;labelPosition=center;verticalAlign=top;align=center;strokeColor=#000000;',
)
if (this.safeTopData.checkChildren.length) {
this.safeTopInsertVertex(topGraph, this.safeTopData.checkChildren)
// 调整父节点宽高
let geometry = model.getGeometry(topGraph)
geometry.height += 20
geometry.width += 20
model.setGeometry(topGraph, geometry)
}
}
// 中左
if (this.hasSafeMidLeft) {
let midLeftY = 20 + this.getSafeModuleGeo('height', '安全管理原则')
const midLeftGraph = this.graph.insertVertex(
parent,
null,
this.safeMidLeftData.name,
20,
midLeftY,
100,
40,
'html=1;fontColor=#000000;spacing=10;fillColor=#cbd4a8;labelPosition=center;verticalAlign=top;align=center;strokeColor=#000000;',
)
if (this.safeMidLeftData.checkChildren.length) {
this.safeMidLeftInsertVertex(
midLeftGraph,
this.safeMidLeftData.checkChildren,
)
// 调整父节点宽高
let geometry = model.getGeometry(midLeftGraph)
geometry.height += 20
geometry.width += 20
model.setGeometry(midLeftGraph, geometry)
}
}
// 中中
if (this.hasSafeMidCenter) {
const midGraph = this.graph.insertVertex(
parent,
null,
this.safeMidCenterData.name,
20 + this.getSafeModuleGeo('width', '安全监督'),
20 + this.getSafeModuleGeo('height', '安全管理原则'),
100,
40,
'html=1;fontColor=#000000;spacing=10;fillColor=#f4ceae;labelPosition=center;verticalAlign=top;align=center;strokeColor=#000000;',
)
if (this.safeMidCenterData.checkChildren.length) {
this.safeMidInsertVertex(
midGraph,
this.safeMidCenterData.checkChildren,
)
// 调整父节点宽高
let geometry = model.getGeometry(midGraph)
geometry.height += 20
geometry.width += 20
model.setGeometry(midGraph, geometry)
}
}
// 中右
if(this.hasSafeMidRight) {
const midRightX = 20 + this.getSafeModuleGeo('width', '安全监督') + this.getSafeModuleGeo('width', '安全管理')
const midRightGraph = this.graph.insertVertex(
parent,
null,
this.safeMidRightData.name,
midRightX,
20 + this.getSafeModuleGeo('height', '安全管理原则'),
100,
40,
'html=1;fontColor=#000000;spacing=10;fillColor=#cbd4a8;labelPosition=center;verticalAlign=top;align=center;strokeColor=#000000;',
)
if (this.safeMidRightData.checkChildren.length) {
this.safeMidLeftInsertVertex(
midRightGraph,
this.safeMidRightData.checkChildren,
)
// 调整父节点宽高
let geometry = model.getGeometry(midRightGraph)
geometry.height += 20
geometry.width += 20
model.setGeometry(midRightGraph, geometry)
}
}
// 下
if (this.hasSafeBottom) {
const maxMidHeight = Math.max(this.getSafeModuleGeo('height', '安全监督'), this.getSafeModuleGeo('height', '安全管理'), this.getSafeModuleGeo('height', '制度规范'))
const bottomY = this.getSafeModuleGeo('height', '安全管理原则') + maxMidHeight + 20
const bottomGraph = this.graph.insertVertex(
parent,
null,
this.safeBottomData.name,
20,
bottomY,
100,
40,
'html=1;fontColor=#000000;spacing=10;fillColor=#fee599;labelPosition=center;verticalAlign=top;align=center;strokeColor=#000000;',
)
if (this.safeBottomData.checkChildren.length) {
this.safeTopInsertVertex(
bottomGraph,
this.safeBottomData.checkChildren,
)
// 调整父节点宽高
let geometry = model.getGeometry(bottomGraph)
geometry.height += 20
geometry.width += 20
model.setGeometry(bottomGraph, geometry)
}
}
} finally { } finally {
model.endUpdate() model.endUpdate()
// 获取xml // 获取xml
...@@ -29,6 +185,89 @@ const safeManagementGraph = { ...@@ -29,6 +185,89 @@ const safeManagementGraph = {
// console.log('node', node) // console.log('node', node)
} }
}, },
/**
* @description: 获取上/中左/中右...宽度/高度
* @param {String} type 'width' or 'height'
* @param {String} moduleName '安全管理原则', '安全监督', '安全管理', '制度规范'
* @return {Number} 宽高值（加上了间距20）
* @author: pan
*/
getSafeModuleGeo(type, moduleName) {
const parent = this.graph.getDefaultParent()
const midLeftGeo = parent.children?.find(
(v) => v.value == moduleName,
) ?? {}
if(Object.keys(midLeftGeo).length) {
const midLeftGeometry = this.model.getGeometry(midLeftGeo)
return midLeftGeometry[type] + 20
} else {
return 0
}
},
safeTopInsertVertex(node, list) {
if (list && list.length) {
list.forEach((v, idx) => {
var cell = this.graph.insertVertex(
node,
null,
v.name,
idx * 110 + 20,
30,
v.checkChildren ? null : 100,
v.checkChildren ? null : 40,
`html=1;fontColor=#000000;whiteSpace=wrap;fillColor=#f7f7f7;labelPosition=center;verticalAlign=middle;align=center;strokeColor=#000000;`,
)
// console.log('cell', cell)
if (v.checkChildren && v.checkChildren.length) {
this.safeTopInsertVertex(cell, v.checkChildren)
}
})
}
},
safeMidLeftInsertVertex(node, list) {
if (list && list.length) {
list.forEach((v, idx) => {
this.graph.insertVertex(
node,
null,
v.name,
20,
(idx + 1) * 50,
v.checkChildren ? null : 100,
v.checkChildren ? null : 40,
`html=1;fontColor=#000000;whiteSpace=wrap;fillColor=#f7f7f7;labelPosition=center;verticalAlign=middle;align=center;strokeColor=#000000;`,
)
})
}
},
safeMidInsertVertex(node, list) {
if (list && list.length) {
list.forEach((v, idx) => {
this.graph.insertVertex(
node,
null,
v.name,
this.safeMidGetItemX(v, idx),
this.safeMidGetItemY(v, idx),
100,
40,
`html=1;fontColor=#000000;fillColor=#f7f7f7;labelPosition=center;verticalAlign=middle;align=center;strokeColor=#000000;`,
)
})
}
},
safeMidGetItemX(item, idx) {
const col = (idx + 1) % 2
return col > 0 ? 20 : 140
},
safeMidGetItemY(item, idx) {
const rows = Math.ceil((idx + 1) / 2)
if (rows > 1) {
return rows * 40 + (rows - 1) * 20
} else {
return 40
}
},
}, },
} }
export default safeManagementGraph export default safeManagementGraph
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!