Skip to content

liangzhen / framework-tools-web

Go to a project
Commit e33fc5d5 by 史敦盼
Options

数据主题关系视图及其他问题修复

1 parent bb5c1e3e
Expand all
Inline Side-by-side
Showing with 550 additions and 227 deletions
public/drawio/extention/js/exFormat.js
//二次开发，自定义属性面板 //二次开发，自定义属性面板
const initAttributePanel = function(that) { const initAttributePanel = function(that) {
var graph = that.editorUi.editor.graph; var graph = that.editorUi.editor.graph;
const cell = graph.getSelectionCell(); const cell = graph.getSelectionCell();
let str = cell.style let str = cell.style
let startChar = "saveDataParams="; let startChar = "saveDataParams=";
...@@ -238,9 +238,9 @@ const initAttributePanel = function(that) { ...@@ -238,9 +238,9 @@ const initAttributePanel = function(that) {
}) })
} }
} }
propertyList.forEach(item => { propertyList.forEach((item, index) => {
if(Object.keys(item).length) { if(Object.keys(item).length) {
addListPanel(that, propertyList, item.cnName || item.name, item.value_ || item.value, item.controlType, item.dictKey); addListPanel(that, propertyList, item.cnName || item.name, item.value_ || item.value, item.controlType, item.dictKey, index);
} }
}) })
} }
...@@ -320,24 +320,31 @@ const initAttributePanel = function(that) { ...@@ -320,24 +320,31 @@ const initAttributePanel = function(that) {
const currentItem = archiData.find( const currentItem = archiData.find(
(item) => item.elementId == e.target.value, (item) => item.elementId == e.target.value,
) )
$('#parentElement').val('')
// this.getShangJiJieDianSelect(currentItem) // this.getShangJiJieDianSelect(currentItem)
getPreArc(currentItem, valueSelect2) getPreArc(currentItem, valueSelect2)
} }
console.log('valueSelect2', valueSelect2)
infoItemContain.appendChild(valueSelect); infoItemContain.appendChild(valueSelect);
break break
case '上级元素': case '上级元素':
valueSelect2.style.cssText = baseEleStyle; valueSelect2.style.cssText = baseEleStyle;
valueSelect2.value = value valueSelect2.value = value
valueSelect2.onchange = function (e) { valueSelect2.onchange = function (e) {
parentElementChange(e.target.value) parentElementChange(e.target.value)
} }
infoItemContain.appendChild(valueSelect2); infoItemContain.appendChild(valueSelect2);
break break
case '上级资产': case '上级资产':
const valueSelect3 = document.createElement('select'); const valueTree = document.createElement('input');
valueSelect3.style.cssText = 'width: 100%;background: #ffffff;'; valueTree.style.cssText = 'width: 100%;background: #ffffff;';
infoItemContain.appendChild(valueSelect3); valueTree.id = 'selectree'
// $("#selectree").selectTree({
// isSimpleNode: true,
// debug: true,
// data: this.treeSelectData // 后台查询的数据 返回为data
// });
infoItemContain.appendChild(valueTree);
break break
default: default:
break; break;
...@@ -361,16 +368,15 @@ const initAttributePanel = function(that) { ...@@ -361,16 +368,15 @@ const initAttributePanel = function(that) {
success: function (res) { success: function (res) {
if(res.code === 200) { if(res.code === 200) {
const archiData = res.data; const archiData = res.data;
archiData.forEach((v, i) => { $.each(archiData, function(i, option) {
var option1 = document.createElement("option"); $('#parentElement').append($('<option>', {
option1.value = v.parentElement; value: option.parentElement,
option1.text = v.parentElement; text: option.parentElement
if(v.parentElement == c.value) { }));
c.text = v.parentElement });
c.options[i].selected = true $('#parentElement').val('')
}
c.appendChild(option1); console.log(c)
})
} }
// console.log('result', res) // console.log('result', res)
}, },
...@@ -412,8 +418,9 @@ const initAttributePanel = function(that) { ...@@ -412,8 +418,9 @@ const initAttributePanel = function(that) {
// } // }
// } // }
} }
const addListPanel = function(that, originAttr, attrName_, attrValue_, controlType, dictKey) { const addListPanel = function(that, originAttr, attrName_, attrValue_, controlType, dictKey, $index) {
const add_item_container = document.createElement('div'); const add_item_container = document.createElement('div');
add_item_container.id = `item_container_id_${$index}`
add_item_container.style.cssText = 'display: flex;justify-content: space-between;padding: 4px 0 4px 10px;'; add_item_container.style.cssText = 'display: flex;justify-content: space-between;padding: 4px 0 4px 10px;';
add_item_container.className = 'add_item_container'; add_item_container.className = 'add_item_container';
...@@ -431,8 +438,6 @@ const addListPanel = function(that, originAttr, attrName_, attrValue_, controlTy ...@@ -431,8 +438,6 @@ const addListPanel = function(that, originAttr, attrName_, attrValue_, controlTy
//属性值-------------------------------------------------------------------- //属性值--------------------------------------------------------------------
const item_right_container = document.createElement('div'); const item_right_container = document.createElement('div');
item_right_container.style.cssText = 'display: flex;justify-content: space-between;width: 70%;'; item_right_container.style.cssText = 'display: flex;justify-content: space-between;width: 70%;';
// const valueSpan = document.createElement('span'); // const valueSpan = document.createElement('span');
// valueSpan.style.cssText = 'white-space: normal;' // valueSpan.style.cssText = 'white-space: normal;'
// valueSpan.innerHTML = attrValue_ // valueSpan.innerHTML = attrValue_
...@@ -452,8 +457,12 @@ const addListPanel = function(that, originAttr, attrName_, attrValue_, controlTy ...@@ -452,8 +457,12 @@ const addListPanel = function(that, originAttr, attrName_, attrValue_, controlTy
item_right_container.appendChild(item_right_input); item_right_container.appendChild(item_right_input);
break; break;
case 1: case 1:
const item_right_textarea = document.createElement('textarea'); var item_right_textarea = document.createElement('input');
item_right_textarea.rows = "4"; // 设置显示的行数为2行
item_right_textarea.style.pointerEvents = 'auto'
item_right_textarea.style.userSelect = 'text'
// item_right_textarea.id = `textarea_id_${$index}`
// item_right_textarea.rows = "4"; // 设置显示的行数为2行
// item_right_textarea.cols = "4"; // item_right_textarea.cols = "4";
item_right_textarea.value = attrValue_ || ''; item_right_textarea.value = attrValue_ || '';
item_right_textarea.style.cssText = 'width: 100%;background: #ffffff;'; item_right_textarea.style.cssText = 'width: 100%;background: #ffffff;';
...@@ -463,12 +472,11 @@ const addListPanel = function(that, originAttr, attrName_, attrValue_, controlTy ...@@ -463,12 +472,11 @@ const addListPanel = function(that, originAttr, attrName_, attrValue_, controlTy
res.value_ = e.target.value; res.value_ = e.target.value;
} }
item_right_container.appendChild(item_right_textarea); item_right_container.appendChild(item_right_textarea);
item_right_textarea.focus() // item_right_textarea.focus()
break; break;
case 2: case 2:
const item_right_select = document.createElement('select'); const item_right_select = document.createElement('select');
item_right_select.value = attrValue_; item_right_select.value = attrValue_;
// item_right_select.text = // item_right_select.text =
item_right_select.style.cssText = 'width: 100%;background: #ffffff;'; item_right_select.style.cssText = 'width: 100%;background: #ffffff;';
$.ajax({ $.ajax({
...@@ -565,7 +573,7 @@ function parentElementChange(eleName) { ...@@ -565,7 +573,7 @@ function parentElementChange(eleName) {
} }
$.ajax({ $.ajax({
method: 'post', method: 'post',
url: `http://${ajaxUrl}/eadc-shared-ability/arc-ast-info/qryByTree`, url: `http://${ajaxUrl}/eadc-architecture/arc-ast-info/qryByTree`,
data: JSON.stringify(params), data: JSON.stringify(params),
contentType: 'application/json', contentType: 'application/json',
success: function (res) { success: function (res) {
......
src/api/index.js
...@@ -850,4 +850,12 @@ export function postRequestShared(url, params){ ...@@ -850,4 +850,12 @@ export function postRequestShared(url, params){
// 获取ArchiBelongId // 获取ArchiBelongId
export function queryArchiBelongId(params) { export function queryArchiBelongId(params) {
return post(EADC_ARRCHITECTURE + '/archi-model-dict-detail/gDictByKey', params) return post(EADC_ARRCHITECTURE + '/archi-model-dict-detail/gDictByKey', params)
}
// 资产编号查重
export function queryRepeatAssetByNumber(params) {
return post(EADC_ARRCHITECTURE + '/assetByNumber', params)
}
// 查询资产详情
export function getAssetDetail(params) {
return post(EADC_ARRCHITECTURE + '/archi-asset-view/assetTickInfo', params)
} }
\ No newline at end of file
src/store/modules/graphData.js
const state = { const state = {
graphData: [] graphData: [], // 业务能力视图数据
dataSubjectRelationshipGraphData: [], // 数据主题关系视图数据
} }
const mutations = { const mutations = {
CHANGE_GRAPH_DATA: (state, data) => { CHANGE_GRAPH_DATA: (state, data) => {
state.graphData = data state.graphData = data
},
CHANGE_DATA_SUB_GRAPH_DATA: (state, data) => {
state.dataSubjectRelationshipGraphData = data
} }
} }
export default { export default {
......
src/styles/transition.scss
...@@ -32,3 +32,13 @@ ...@@ -32,3 +32,13 @@
opacity: 0; opacity: 0;
transform: translateX(30px); transform: translateX(30px);
} }
/*
进入和离开动画可以使用不同
持续时间和速度曲线。
*/
.slide-enter-active, .slide-leave-active {
transition: transform 0.3s;
}
.slide-enter, .slide-leave-to /* .slide-leave-active for <2.1.8 */ {
transform: translateX(-100%);
}
\ No newline at end of file
src/utils/index.js
...@@ -75,4 +75,15 @@ export function deepClone(source) { ...@@ -75,4 +75,15 @@ export function deepClone(source) {
} }
}) })
return targetObj return targetObj
}
/**
* @description: 数组对象去重
* @param {Array} list
* @param {String} key
* @return {Array}
* @author: pan
*/
export function deduplication(list, key) {
let map = new Map()
return list.filter((item) => !map.has(item[key].toString()) && map.set(item[key].toString()))
} }
\ No newline at end of file
src/views/busi-assets-list/index.vue
...@@ -1176,7 +1176,7 @@ export default { ...@@ -1176,7 +1176,7 @@ export default {
} }
}, },
handleChange(value) { handleChange(value) {
// console.log('value', value) console.log('value', value)
// 当选中值变化时，更新绑定的对象 // 当选中值变化时，更新绑定的对象
let selectedObject = {} let selectedObject = {}
if (value && value.length) { if (value && value.length) {
...@@ -1308,7 +1308,8 @@ export default { ...@@ -1308,7 +1308,8 @@ export default {
this.getShangJiJieDianSelect(data) this.getShangJiJieDianSelect(data)
}, },
zuJianLeiXingSelectChange(data, flag) { zuJianLeiXingSelectChange(data, flag) {
this.preArcList = []
this.treeSelectData = []
//所属元素选择后 //所属元素选择后
// console.log(data) // console.log(data)
// console.log(this.zuJianLeiXingSelect) // console.log(this.zuJianLeiXingSelect)
...@@ -1770,11 +1771,19 @@ export default { ...@@ -1770,11 +1771,19 @@ export default {
padding-bottom: 20px; */ padding-bottom: 20px; */
} }
.left_container { .left_container {
width: 20%; width: 200px;
border-right: 1px solid #ccc;
margin-right: 20px; margin-right: 20px;
/deep/ .filter-tree {
width: 100%;
padding: 10px 0 10px 10px;
box-sizing: border-box;
}
} }
.right_container { .right_container {
width: calc(80% - 20px); // width: calc(80% - 20px);
flex: 1;
min-width: 0;
} }
.el-button.is-disabled { .el-button.is-disabled {
color: #c0c4cc !important; color: #c0c4cc !important;
......
src/views/dataMapping/MxGraph.vue
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
</template> </template>
<script> <script>
import businessCapabilityGraphMixin from './mixins/businessCapabilityGraph.mixin.js'
import dataSubjectRelationshipGraphMixin from './mixins/dataSubjectRelationshipGraph.mixin.js'
export default { export default {
data() { data() {
return { return {
...@@ -11,11 +13,10 @@ export default { ...@@ -11,11 +13,10 @@ export default {
graphData: [] graphData: []
} }
}, },
mixins: [businessCapabilityGraphMixin, dataSubjectRelationshipGraphMixin],
components: {}, components: {},
computed: { computed: {
mockData() {
return this.$store.state.graphData.graphData
},
}, },
mounted() { mounted() {
this.graph = new mxGraph(document.getElementById('mxGraph_root')) this.graph = new mxGraph(document.getElementById('mxGraph_root'))
...@@ -28,200 +29,7 @@ export default { ...@@ -28,200 +29,7 @@ export default {
clear() { clear() {
this.model.clear() this.model.clear()
}, },
init() {
this.graphData = [{
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()
// 启动一次更新会话
model.beginUpdate()
try {
//设置元素可编辑,不然无法自动布局
this.graph.setCellsLocked(false)
// 插入一个矩形
const v1 = this.graph.insertVertex(
parent,
null,
this.graphData[0].name,
20,
20,
null,
null,
'html=1;fontColor=#000000;fillColor=#dcf8e5;labelPosition=center;verticalAlign=top;align=center;strokeColor=#7fc2a0;',
)
this.insertVertex(v1, this.graphData[0].children)
// console.log(v1)
console.log('parent', parent)
// 子节点宽高调整
this.setGeometry(parent.children[0].children)
// 重新调整整体布局
const allCellData = parent.children[0].children
// 获取业务域最大宽度
let maxWidthArr = []
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)
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]).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
var encoder = new mxCodec()
var node = encoder.encode(model)
console.log('node', node)
}
},
insertVertex(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),
// idx > 2 ? getItemY(idx, v.children) + 20 : 20,
v.checkChildren ? null : 100,
v.checkChildren ? null : 40,
`html=1;fontColor=#000000;fillColor=${
v.checkChildren ? '#dcf8e5' : '#f2fcf5'
};labelPosition=center;verticalAlign=${
v.checkChildren ? 'top' : 'middle'
};align=center;strokeColor=#7fc2a0;`,
)
// console.log('cell', cell)
if (v.checkChildren && v.checkChildren.length) {
this.insertVertex(cell, v.checkChildren)
}
})
}
},
// 计算cell的x坐标
getItemX(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 {
return idx * 120 + 20
}
}
},
getItemY(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
}
}
},
setGeometry(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
// 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)
// if (!v.children) {
// return this.setGeometry(v.children)
// }
}
},
}, },
} }
</script> </script>
......
src/views/dataMapping/mixins/businessCapabilityGraph.mixin.js 0 → 100644
/*
* @Description: 业务能力视图逻辑
* @Version: 2.0
* @Autor: pan
* @Date: 2024-04-28 11:05:28
* @LastEditors: pan
* @LastEditTime: 2024-04-28 16:01:35
*/
const businessCapabilityGraphMixin = {
computed: {
mockData() {
return this.$store.state.graphData.graphData
},
},
methods: {
init() {
this.graphData = [
{
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()
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.graphData[0].name,
20,
20,
null,
null,
'html=1;fontColor=#000000;fillColor=#dcf8e5;labelPosition=center;verticalAlign=top;align=center;strokeColor=#7fc2a0;',
)
this.insertVertex(v1, this.graphData[0].children)
// console.log(v1)
console.log('parent', parent)
// 子节点宽高调整
this.setGeometry(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)
}
},
insertVertex(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),
// idx > 2 ? getItemY(idx, v.children) + 20 : 20,
v.checkChildren ? null : 100,
v.checkChildren ? null : 40,
`html=1;fontColor=#000000;fillColor=${
v.checkChildren ? '#dcf8e5' : '#f2fcf5'
};labelPosition=center;verticalAlign=${
v.checkChildren ? 'top' : 'middle'
};align=center;strokeColor=#7fc2a0;`,
)
// console.log('cell', cell)
if (v.checkChildren && v.checkChildren.length) {
this.insertVertex(cell, v.checkChildren)
}
})
}
},
// 计算cell的x坐标
getItemX(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
// }
}
}
},
getItemY(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
}
}
},
setGeometry(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 businessCapabilityGraphMixin
src/views/dataMapping/mixins/dataSubjectRelationshipGraph.mixin.js 0 → 100644
/*
* @Description: 数据主题关系视图逻辑
* @Version: 2.0
* @Autor: pan
* @Date: 2024-04-28 11:10:26
* @LastEditors: pan
* @LastEditTime: 2024-04-28 17:02:34
*/
// const items = [
// '财务',
// '人员',
// '项目',
// '物资',
// '资产',
// '市场',
// '客户',
// '电网',
// '综合',
// '安全',
// ]
// const mockData = [
// {
// sourceName: '财务',
// targetName: '人员',
// lineName: '经营管理费用',
// },
// {
// sourceName: '财务',
// targetName: '项目',
// lineName: '项目成本控制',
// },
// {
// sourceName: '财务',
// targetName: '物资',
// lineName: '物资核算',
// },
// {
// sourceName: '财务',
// targetName: '资产',
// lineName: '资产核算',
// },
// {
// sourceName: '财务',
// targetName: '市场',
// lineName: '交易结算',
// },
// {
// sourceName: '财务',
// targetName: '客户',
// lineName: '电费结算',
// },
// {
// sourceName: '人员',
// targetName: '项目',
// lineName: '项目执行',
// },
// {
// sourceName: '人员',
// targetName: '资产',
// lineName: '归属、运维、操作',
// },
// {
// sourceName: '人员',
// targetName: '电网',
// lineName: '调控',
// },
// {
// sourceName: '人员',
// targetName: '安全',
// lineName: '人身安全',
// },
// {
// sourceName: '项目',
// targetName: '物资',
// lineName: '项目物资',
// },
// {
// sourceName: '项目',
// targetName: '资产',
// lineName: '项目资产',
// },
// {
// sourceName: '项目',
// targetName: '综合',
// lineName: '规划',
// },
// {
// sourceName: '物资',
// targetName: '资产',
// lineName: '库存',
// },
// {
// sourceName: '资产',
// targetName: '客户',
// lineName: '协议',
// },
// {
// sourceName: '资产',
// targetName: '电网',
// lineName: '运行',
// },
// {
// sourceName: '市场',
// targetName: '客户',
// lineName: '电力需求',
// },
// {
// sourceName: '客户',
// targetName: '电网',
// lineName: '电能服务',
// },
// {
// sourceName: '电网',
// targetName: '安全',
// lineName: '电网结构、运行安全',
// },
// ]
const dataSubjectRelationshipGraphMixin = {
data() {
return {
// dataSubjectRelationshipData: []
}
},
computed: {
items() {
const arr = this.dataSubGraphData || []
let itemArr = []
if(arr.length) {
arr.forEach(v => {
itemArr.push(v.sourceName)
itemArr.push(v.targetName)
})
return Array.from(new Set(itemArr))
} else {
return []
}
},
dataSubGraphData() {
return this.$store.state.graphData.dataSubjectRelationshipGraphData
},
},
methods: {
initDataSubjectRelationshipGraph() {
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
console.log('model', model)
// 启动一次更新会话
model.beginUpdate()
var shapeList = {}
try {
//设置元素可编辑,不然无法自动布局
this.graph.setCellsLocked(false)
// graph.setTooltips(true)
// graph.setAllowDanglingEdges(false)
// graph.setMultigraph(true)
this.items.forEach((item, i) => {
shapeList['v' + i] = this.graph.insertVertex(
parent,
null,
item,
20,
20,
120,
40,
'html=1;fontColor=#000000;fillColor=#ffff00;labelPosition=center;verticalAlign=middle;align=center;strokeColor=#000;',
)
})
console.log('shapeList', shapeList)
this.dataSubGraphData.forEach((v) => {
let [source, target] = [null, null]
for (const key in shapeList) {
if (Object.hasOwnProperty.call(shapeList, key)) {
const element = shapeList[key]
if (element.value === v.sourceName) {
source = element
}
if (element.value === v.targetName) {
target = element
}
}
}
// 连接矩形
this.graph.insertEdge(
parent,
null,
v.lineName,
source,
target,
'endArrow=none;fontColor=#666;strokeColor=#666;rounded=0',
)
})
var layout = new mxHierarchicalLayout(this.graph, mxConstants.DIRECTION_WEST) //水平流
// var layout = new mxFastOrganicLayout(this.graph, false)
// layout.forceConstant = 100
// console.info(mxHierarchicalLayout)
// var layout = new mxHierarchicalLayout(graph,mxConstants.DIRECTION_NORTH); //垂直流
// var layout = new mxCircleLayout(this.graph); // 圆形
// var layout = new mxCompactTreeLayout(this.graph);
// layout.levelDistance = 330;
// layout.nodeDistance = 150
// layout.edgeRouting = false;
layout.execute(this.graph.getDefaultParent())
this.graph.fit();//自适应
this.graph.center(true,true,0.2,0.3);// 调整整体图形位于画布的位置
var sc = this.graph.getView().getScale();//获取当前的缩放比例
this.graph.zoomTo(Math.round(sc/2));//在缩放一半，否则是满屏状态，不好看
} finally {
model.endUpdate()
// 获取xml
var encoder = new mxCodec()
var node = encoder.encode(model)
console.log('node', node)
}
},
},
}
export default dataSubjectRelationshipGraphMixin
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!