Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 0184cd28 by 史敦盼
Options

Merge branch 'sdp-v1'

2 parents b66a9a53 48a26f84
Expand all
Inline Side-by-side
Showing with 178 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) {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!