Skip to content

liangzhen / framework-tools-web

Go to a project
Commit fd1befaa by 史敦盼
Options

修改

1 parent 07dca79f
Inline Side-by-side
Showing with 292 additions and 73 deletions
public/resources/editor.txt 0 → 100644
askZoom=Enter zoom (%)
properties=Properties
outline=Outline
tasks=Tasks
help=Help
public/resources/editor_de.txt 0 → 100644
askZoom=Zoom eingeben (%)
properties=Eigenschaften
outline=Uebersicht
tasks=Aufgaben
help=Hilfe
public/resources/editor_zh.txt 0 → 100644
askZoom=进入缩放(%25)
properties=属性
outline=轮廓
tasks=任务
help=帮助
\ No newline at end of file
public/resources/graph.txt 0 → 100644
alreadyConnected=Nodes already connected
containsValidationErrors=Contains validation errors
updatingDocument=Updating Document. Please wait...
updatingSelection=Updating Selection. Please wait...
collapse-expand=Collapse/Expand
doubleClickOrientation=Doubleclick to change orientation
close=Close
error=Error
done=Done
cancel=Cancel
ok=OK
public/resources/graph_de.txt 0 → 100644
alreadyConnected=Knoten schon verbunden
containsValidationErrors=Enthält Validierungsfehler
updatingDocument=Aktualisiere Dokument. Bitte warten...
updatingSelection=Aktualisiere Markierung. Bitte warten...
collapse-expand=Einklappen/Ausklappen
doubleClickOrientation=Doppelklicken um Orientierung zu ändern
close=Schliessen
error=Fehler
done=Fertig
cancel=Abbrechen
ok=OK
public/resources/graph_zh.txt 0 → 100644
alreadyConnected=节点已经连接
containsValidationErrors=包含效验错误
updatingDocument=更新文档。请等候......
updatingSelection=更新所选项。请等候......
collapse-expand=折叠/展开
doubleClickOrientation=双击以改变方向
close=关闭
error=错误
done=完成
cancel=取消
ok=确定
\ No newline at end of file
src/api/index.js
...@@ -853,7 +853,7 @@ export function queryArchiBelongId(params) { ...@@ -853,7 +853,7 @@ export function queryArchiBelongId(params) {
} }
// 资产编号查重 // 资产编号查重
export function queryRepeatAssetByNumber(params) { export function queryRepeatAssetByNumber(params) {
return post(EADC_ARRCHITECTURE + '/assetByNumber', params) return post(EADC_ARRCHITECTURE + '/archi-asset-view/assetByNumber', params)
} }
// 查询资产详情 // 查询资产详情
export function getAssetDetail(params) { export function getAssetDetail(params) {
......
src/router/index.js
...@@ -216,14 +216,14 @@ export const routes = [ ...@@ -216,14 +216,14 @@ export const routes = [
}, },
}, },
{ // {
path: "/main/comCenterServeListOld/", //企业中台服务清单 // path: "/main/comCenterServeListOld/", //企业中台服务清单
name: "comCenterServeList", // name: "comCenterServeList",
component: () => import("@/views/comCenterServeList/index.vue"), // component: () => import("@/views/comCenterServeList/index.vue"),
meta: { // meta: {
title: "企业中台服务清单", // title: "企业中台服务清单",
}, // },
}, // },
{ {
path: "/main/comCenterServeList/", //企业中台服务清单 path: "/main/comCenterServeList/", //企业中台服务清单
name: "comCenterServeList", name: "comCenterServeList",
......
src/store/modules/graphData.js
...@@ -13,6 +13,7 @@ const state = { ...@@ -13,6 +13,7 @@ const state = {
safeMidRightData: {}, safeMidRightData: {},
safeBottomData: {}, safeBottomData: {},
}, // 安全管理体系视图 }, // 安全管理体系视图
microservicesGraphData: [], // 微服务总视图
} }
const mutations = { const mutations = {
CHANGE_GRAPH_DATA: (state, data) => { CHANGE_GRAPH_DATA: (state, data) => {
...@@ -27,6 +28,9 @@ const mutations = { ...@@ -27,6 +28,9 @@ const mutations = {
CHANGE_SAFE_MANAGEMENT_DATA: (state, data) => { CHANGE_SAFE_MANAGEMENT_DATA: (state, data) => {
state.safeManagementGraphData = data state.safeManagementGraphData = data
}, },
CHANGE_MICROSERVICES_GRAPH_DATA: (state, data) => {
state.microservicesGraphData = data
},
} }
export default { export default {
namespaced: true, namespaced: true,
......
src/views/busi-assets-list/index.vue
...@@ -400,7 +400,7 @@ ...@@ -400,7 +400,7 @@
<!-- :disabled="is_add_edit == 'view' || !ruleForm.preArc && !treeSelectData.length ? true : false" --> <!-- :disabled="is_add_edit == 'view' || !ruleForm.preArc && !treeSelectData.length ? true : false" -->
<el-form-item label="上级节点:" prop="let2"> <el-form-item label="上级节点:" prop="let2">
<el-cascader <el-cascader
v-model="cascaderValue" v-model="ruleForm.parentAsset"
:options="treeSelectData" :options="treeSelectData"
filterable filterable
:props="{ :props="{
...@@ -628,7 +628,8 @@ export default { ...@@ -628,7 +628,8 @@ export default {
dynamicForm0_: [], dynamicForm0_: [],
dynamicForm_: [], dynamicForm_: [],
preArc: '', preArc: '',
assetNumber: '' assetNumber: '',
parentAsset: []
}, },
rules: { rules: {
let1: [{ required: true, message: '请输入资产名称', trigger: 'blur' }], let1: [{ required: true, message: '请输入资产名称', trigger: 'blur' }],
...@@ -860,7 +861,8 @@ export default { ...@@ -860,7 +861,8 @@ export default {
parentElement: [this.ruleForm.preArc], parentElement: [this.ruleForm.preArc],
assetNumber: this.ruleForm.assetNumber, assetNumber: this.ruleForm.assetNumber,
graphId: this.graphId, graphId: this.graphId,
parentCode: this.selectedObject.assetCode parentCode: this.selectedObject.assetCode,
parentAsset: this.ruleForm.parentAsset
} }
const requestParams = const requestParams =
this.is_add_edit == 'add' this.is_add_edit == 'add'
...@@ -1046,7 +1048,7 @@ export default { ...@@ -1046,7 +1048,7 @@ export default {
this.selectLabel = '' this.selectLabel = ''
this.selectValue = '' this.selectValue = ''
this.selectCode = '' this.selectCode = ''
this.cascaderValue = [], this.ruleForm.parentAsset = [],
this.ruleForm.color = '' this.ruleForm.color = ''
this.ruleForm.assetNumber = '' this.ruleForm.assetNumber = ''
this.ruleForm.preArc = '' this.ruleForm.preArc = ''
...@@ -1062,7 +1064,7 @@ export default { ...@@ -1062,7 +1064,7 @@ export default {
this.ruleForm.let3 = row.archiEleId this.ruleForm.let3 = row.archiEleId
this.ruleForm.preArc = row.parentElement?.replace(/\]|\[|\/?]/g, '') this.ruleForm.preArc = row.parentElement?.replace(/\]|\[|\/?]/g, '')
this.getShangJiJieDianSelect(this.ruleForm.preArc) this.getShangJiJieDianSelect(this.ruleForm.preArc)
this.cascaderValue = [row.parentAssetId + ''] this.ruleForm.parentAsset = row.parentAsset.split(', ')
this.ruleForm.assetNumber = row.assetNumber this.ruleForm.assetNumber = row.assetNumber
this.getZuJianLeiXingSelect(null).then((res) => { this.getZuJianLeiXingSelect(null).then((res) => {
this.zuJianLeiXingSelect = res this.zuJianLeiXingSelect = res
...@@ -1121,7 +1123,7 @@ export default { ...@@ -1121,7 +1123,7 @@ export default {
this.ruleForm.let3 = row.archiEleId this.ruleForm.let3 = row.archiEleId
this.ruleForm.preArc = row.parentElement?.replace(/\]|\[|\/?]/g, '') this.ruleForm.preArc = row.parentElement?.replace(/\]|\[|\/?]/g, '')
this.getShangJiJieDianSelect(this.ruleForm.preArc) this.getShangJiJieDianSelect(this.ruleForm.preArc)
this.cascaderValue = [row.parentAssetId + ''] this.ruleForm.parentAsset = row.parentAsset.split(', ')
this.ruleForm.assetNumber = row.assetNumber this.ruleForm.assetNumber = row.assetNumber
......
src/views/dataMapping/Add.vue
...@@ -92,7 +92,7 @@ export default { ...@@ -92,7 +92,7 @@ export default {
selectGraphShape: '', selectGraphShape: '',
graphId: '', graphId: '',
// 选择的上级节点对应的详细信息 // 选择的上级节点对应的详细信息
selectedObject: {} selectedObject: {},
} }
}, },
components: { Form, ChooseSvg }, components: { Form, ChooseSvg },
...@@ -106,17 +106,17 @@ export default { ...@@ -106,17 +106,17 @@ export default {
prop: 'assetName', // 字段名 prop: 'assetName', // 字段名
element: 'el-input', // 指定elementui组件 element: 'el-input', // 指定elementui组件
placeholder: '请填写资产名称', // elementui组件属性 placeholder: '请填写资产名称', // elementui组件属性
rules: [ rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
{ required: true, trigger: 'blur', message: '不能为空' },
// { validator: this.assetNameValidator, trigger: 'blur' },
],
}, },
{ {
label: '资产编号', // label文字 label: '资产编号', // label文字
prop: 'assetNumber', // 字段名 prop: 'assetNumber', // 字段名
element: 'el-input', // 指定elementui组件 element: 'el-input', // 指定elementui组件
placeholder: '请填写资产编号', // elementui组件属性 placeholder: '请填写资产编号', // elementui组件属性
rules: [{ required: true, trigger: 'blur', message: '不能为空' }], rules: [
{ required: true, trigger: 'blur', message: '不能为空' },
{ validator: this.assetNameValidator, trigger: 'blur' },
],
}, },
{ {
label: '所属元素', // label文字 label: '所属元素', // label文字
...@@ -273,9 +273,30 @@ export default { ...@@ -273,9 +273,30 @@ export default {
}, },
methods: { methods: {
assetNameValidator(rule, value, callback) { assetNameValidator(rule, value, callback) {
const { assetNumber } = this.$refs['addForm'].getData()
// console.log('formInfo', formInfo)
if (value && value.trim().length !== null) { if (value && value.trim().length !== null) {
const params = {} const params = {
queryRepeatAssetByNumber({}) assetNumber,
archiBelongId: this.archiBelongId,
archiStage: 1,
archiAssetState: 2,
}
queryRepeatAssetByNumber(params)
.then((res) => {
if (res.code === 200) {
if (res.msg === '资产编号无重复') {
throw Error
} else {
callback(new Error(res.msg))
}
} else {
throw Error
}
})
.catch((err) => {
callback()
})
} }
}, },
getChooseSvg(svgInfo) { getChooseSvg(svgInfo) {
...@@ -444,8 +465,8 @@ export default { ...@@ -444,8 +465,8 @@ export default {
const parentId = params.superiorNode?.length const parentId = params.superiorNode?.length
? params.superiorNode[0] ? params.superiorNode[0]
: '0' : '0'
let children = undefined // let children = undefined
let name = '' // let name = ''
let emitParams = {} let emitParams = {}
if (parentId != '0') { if (parentId != '0') {
emitParams = { emitParams = {
...@@ -454,10 +475,14 @@ export default { ...@@ -454,10 +475,14 @@ export default {
id: this.selectedObject.assetId, id: this.selectedObject.assetId,
name: this.selectedObject.assetName, name: this.selectedObject.assetName,
archiAssetType: 3, archiAssetType: 3,
children: [{ children: [
{
...params, ...params,
name: params.assetName name: params.assetName,
}] parentId: params.parentAssetId,
archiAssetType: 3,
},
],
} }
// children = [] // children = []
// children.push({ // children.push({
......
src/views/dataMapping/MxGraph.vue
...@@ -59,6 +59,6 @@ export default { ...@@ -59,6 +59,6 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
#mxGraph_root { #mxGraph_root {
min-height: 1168px; min-height: 2000px;
} }
</style> </style>
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 16:26:56 * @LastEditTime: 2024-05-06 19:40:38
--> -->
<template> <template>
<div class="dataMapping w-100"> <div class="dataMapping w-100">
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
</div> </div>
</div> </div>
<div class="flex w-100 flex-1" style="min-height: 0"> <div class="flex w-100 flex-1" style="min-height: 0">
<div class="left-content"> <div class="left-content" v-loading="treeLoading">
<div class="filter-input m-10"> <div class="filter-input m-10">
<el-input placeholder="输入关键字进行过滤" v-model="filterText"> <el-input placeholder="输入关键字进行过滤" v-model="filterText">
</el-input> </el-input>
...@@ -146,6 +146,12 @@ ...@@ -146,6 +146,12 @@
</div> </div>
</transition> </transition>
<div class="graphContent flex-1"> <div class="graphContent flex-1">
<div class="flex-c legend" v-show="activeName === '1'">
<span class="legend-1 flex-c m-r-10">遵从</span>
<span class="legend-2 flex-c m-r-10">完善</span>
<span class="legend-3 flex-c">新增</span>
<SvgIcon icon-class="drag" />
</div>
<MxGraph ref="graph" /> <MxGraph ref="graph" />
</div> </div>
</div> </div>
...@@ -162,6 +168,7 @@ ...@@ -162,6 +168,7 @@
<script> <script>
import Add from './Add.vue' import Add from './Add.vue'
import MxGraph from './MxGraph.vue' import MxGraph from './MxGraph.vue'
import SvgIcon from '@/components/SvgIcon'
import { import {
getAutomaticGraphing, getAutomaticGraphing,
query_jia_gou_ceng_ci_new, query_jia_gou_ceng_ci_new,
...@@ -187,10 +194,12 @@ export default { ...@@ -187,10 +194,12 @@ export default {
checkAll: false, checkAll: false,
allKeys: [], allKeys: [],
collapse: false, collapse: false,
dataSubGraphData: [] dataSubGraphData: [],
treeLoading: false,
checkedNodes: []
} }
}, },
components: { MxGraph, Add }, components: { MxGraph, Add, SvgIcon },
created() { created() {
this.getOptions() this.getOptions()
}, },
...@@ -234,12 +243,18 @@ export default { ...@@ -234,12 +243,18 @@ export default {
}) })
}, },
handleAdd(data) { handleAdd(data) {
this.addData = []
const includeAddData = this.tableData.findIndex(v => v.id === data.id)
if(includeAddData === -1) {
this.addData.push(data) this.addData.push(data)
}
if (data.children.length) { if (data.children.length) {
this.addData.push(data.children[0]) this.addData.push(data.children[0])
} }
this.tableData = [...this.tableData, ...this.addData] this.tableData = [...this.tableData, ...this.addData]
console.log('this.tableData2', this.tableData)
console.log('addData', this.addData) console.log('addData', this.addData)
this.handleBusGraph('init')
}, },
fnPushData(row, index) { fnPushData(row, index) {
this.visible = true this.visible = true
...@@ -268,13 +283,13 @@ export default { ...@@ -268,13 +283,13 @@ export default {
if (v.id == row.parentId) { if (v.id == row.parentId) {
name = v.name name = v.name
} }
if (!v.id) {
name = v.parentAssetName
}
}) })
if (!name && row.children) { if (!name && row.children) {
name = row.children[0].name name = row.children[0].name
} }
if(!row.id) {
name = row.parentAssetName
}
return name return name
} }
}, },
...@@ -316,7 +331,7 @@ export default { ...@@ -316,7 +331,7 @@ export default {
this.handleBusGraph('init') this.handleBusGraph('init')
break break
case '2': case '2':
this.handleBusGraph('initMicroservicesGraph') this.handleMicroservicesGraph('initMicroservicesGraph')
break break
case '3': case '3':
// this.handleDataTopicGraph() // this.handleDataTopicGraph()
...@@ -332,6 +347,41 @@ export default { ...@@ -332,6 +347,41 @@ export default {
break break
} }
}, },
// 微服务总视图
handleMicroservicesGraph() {
const checkedKeys = this.$refs.tree.getCheckedKeys()
const checkedNodes = checkedKeys.map(v => {
const node = this.$refs.tree.getNode(v)
return node
})
const parentNodes = checkedNodes.filter(v => v.level === 1)?.map(v2 => v2.data) ?? []
const childNodes = checkedNodes.filter(v => v.level === 2)?.map(v2=> v2.data) ?? []
const level3Nodes = checkedNodes.filter(v => v.level === 3)?.map(v2=> v2.data) ?? []
console.log('dd', parentNodes, childNodes, level3Nodes)
const showGraphData = parentNodes.filter(v => v.name === '企业管理应用')
this.handleMicroservicesGraphData(showGraphData, childNodes, level3Nodes)
console.log('showGraphData', showGraphData)
this.$store.commit('graphData/CHANGE_MICROSERVICES_GRAPH_DATA', showGraphData)
this.$refs['graph'].initMicroservicesGraph()
},
handleMicroservicesGraphData(parentNodes, childNodes, level3Nodes) {
parentNodes.forEach((v) => {
v.checkChildren = []
childNodes.forEach((v2) => {
if (v.id === v2.parentId) {
v.checkChildren.push(v2)
}
if(v2.children) {
v2.checkChildren = []
level3Nodes.forEach(v3 => {
if(v3.parentId === v2.id) {
v2.checkChildren.push(v3)
}
})
}
})
})
},
// 安全管理体系视图 // 安全管理体系视图
handleSafeManageGraph() { handleSafeManageGraph() {
const checkedNodes = this.$refs.tree.getCheckedNodes() const checkedNodes = this.$refs.tree.getCheckedNodes()
...@@ -387,13 +437,13 @@ export default { ...@@ -387,13 +437,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[leftIdx]; techFrameLeftData = parentNodes.splice(leftIdx, 1)[0];
// 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[rightIdx]; techFrameRightData = parentNodes.splice(rightIdx, 1)[0];
// parentNodes.splice(parentNodes.length, 0, rightElement); // parentNodes.splice(parentNodes.length, 0, rightElement);
} }
// console.log('parentNodes4', parentNodes) // console.log('parentNodes4', parentNodes)
...@@ -446,14 +496,21 @@ export default { ...@@ -446,14 +496,21 @@ export default {
}, },
// 业务能力视图成图数据逻辑 // 业务能力视图成图数据逻辑
handleBusGraph(fnInitName) { handleBusGraph(fnInitName) {
const checkedNodes = this.$refs.tree.getCheckedNodes() // const checkedNodes = this.$refs.tree.getCheckedNodes()
this.graphData = checkedNodes.filter((v) => v.parentId === '0') // // console.log('checkedNodes', checkedNodes)
const addNodes = this.addData.filter((v) => v.parentId === '0') // this.graphData = checkedNodes.filter((v) => v.parentId === '0')
const childNodes = checkedNodes.filter((v) => v.parentId !== '0') // const addNodes = this.addData.filter((v) => v.parentId === '0')
const addChildNodes = this.addData.filter((v) => v.parentId !== '0') // const childNodes = checkedNodes.filter((v) => v.parentId !== '0')
const showGraphData = [...this.graphData, ...addNodes] // const addChildNodes = this.addData.filter((v) => v.parentId !== '0')
this.handleGraphData(showGraphData, [...childNodes, ...addChildNodes]) // const showGraphData = [...this.graphData, ...addNodes]
// this.handleGraphData(showGraphData, [...childNodes, ...addChildNodes])
this.graphData = this.tableData.filter((v) => v.parentId === '0')
const childNodes = this.tableData.filter((v) => v.parentId !== '0')
const showGraphData = this.graphData
this.handleGraphData(showGraphData, childNodes)
console.log('showGraphData', showGraphData) console.log('showGraphData', showGraphData)
console.log('tableData', this.tableData)
this.$store.commit('graphData/CHANGE_GRAPH_DATA', showGraphData) this.$store.commit('graphData/CHANGE_GRAPH_DATA', showGraphData)
this.$refs['graph'][fnInitName]() this.$refs['graph'][fnInitName]()
}, },
...@@ -475,10 +532,14 @@ export default { ...@@ -475,10 +532,14 @@ export default {
archiBelongId: this.activeName, archiBelongId: this.activeName,
parentAssetId: this.activeName === '3' ? '0' : undefined, parentAssetId: this.activeName === '3' ? '0' : undefined,
} }
this.treeLoading = true
getAutomaticGraphing(params).then((res) => { getAutomaticGraphing(params).then((res) => {
this.treeLoading = false
if (res.code == 200) { if (res.code == 200) {
this.treeData = res.data this.treeData = res.data
} }
}).catch(err => {
this.treeLoading = false
}) })
}, },
filterNode(value, data) { filterNode(value, data) {
...@@ -487,8 +548,9 @@ export default { ...@@ -487,8 +548,9 @@ 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)
console.log('checkedNodes', this.$refs.tree.getCheckedNodes())
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) {
...@@ -557,7 +619,26 @@ export default { ...@@ -557,7 +619,26 @@ export default {
.graphContent { .graphContent {
width: 50%; width: 50%;
overflow: auto; overflow: auto;
position: relative;
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4='); background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=');
.legend {
position: absolute;
top: 10px;
left: 20px;
& > span {
width: 80px;
height: 30px;
}
&-1 {
background-color: #527aba;
}
&-2 {
background-color: #e79f4e;
}
&-3 {
background-color: #acc756;
}
}
} }
.collapse { .collapse {
right: 50%; right: 50%;
......
src/views/dataMapping/mixins/businessCapabilityGraph.mixin.js
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Autor: pan * @Autor: pan
* @Date: 2024-04-28 11:05:28 * @Date: 2024-04-28 11:05:28
* @LastEditors: pan * @LastEditors: pan
* @LastEditTime: 2024-04-29 10:36:49 * @LastEditTime: 2024-05-06 20:35:36
*/ */
const businessCapabilityGraphMixin = { const businessCapabilityGraphMixin = {
data() { data() {
...@@ -133,14 +133,19 @@ const businessCapabilityGraphMixin = { ...@@ -133,14 +133,19 @@ const businessCapabilityGraphMixin = {
maxWidth * allCellData.length + (allCellData.length - 1) * 20 + 40 maxWidth * allCellData.length + (allCellData.length - 1) * 20 + 40
} }
const sum = maxHeightArr.reduce((a, b) => a + b, 0) const sum = maxHeightArr.reduce((a, b) => a + b, 0)
console.log('sum', sum, maxHeightArr) // console.log('sum', sum, maxHeightArr)
geometry.height = sum + maxHeightArr.length * 20 + 20 geometry.height = sum + maxHeightArr.length * 20 + 20
this.graph.fit();//自适应
this.graph.center(true,true,0.1,0.05);// 调整整体图形位于画布的位置
var sc = this.graph.getView().getScale();//获取当前的缩放比例
this.graph.zoomTo(Math.round(sc/2));//在缩放一半，否则是满屏状态，不好看
} finally { } finally {
model.endUpdate() model.endUpdate()
// 获取xml // 获取xml
var encoder = new mxCodec() // var encoder = new mxCodec()
var node = encoder.encode(model) // var node = encoder.encode(model)
console.log('node', node) // console.log('node', node)
} }
}, },
businessInsertVertex(node, list) { businessInsertVertex(node, list) {
...@@ -168,9 +173,18 @@ const businessCapabilityGraphMixin = { ...@@ -168,9 +173,18 @@ const businessCapabilityGraphMixin = {
}) })
} }
}, },
handleColor(item) {
if(item.archiAssetType == 3) {
return '#acc756'
} else if(item.archiAssetType == 2) {
return '#e79f4e'
} else {
return '#527aba'
}
},
// 计算cell的x坐标 // 计算cell的x坐标
businessGetItemX(item, idx) { businessGetItemX(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
......
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 14:14:49 * @LastEditTime: 2024-05-06 15:37:09
*/ */
const microservicesGraph = { const microservicesGraph = {
data() { data() {
...@@ -13,18 +13,19 @@ const microservicesGraph = { ...@@ -13,18 +13,19 @@ const microservicesGraph = {
} }
}, },
computed: { computed: {
mockData() { microservicesStoreData() {
return this.$store.state.graphData.graphData return this.$store.state.graphData.microservicesGraphData
}, },
}, },
methods: { methods: {
initMicroservicesGraph() { initMicroservicesGraph() {
this.microservicesGraphData = [ // this.microservicesGraphData = [
{ // {
name: '微服务总框架视图', // name: '微服务总框架视图',
children: this.mockData, // children: this.mockData,
}, // },
] // ]
this.microservicesGraphData = this.microservicesStoreData
// console.log('mockData', this.mockData) // console.log('mockData', this.mockData)
// mxgraph 被暴露在window下，所以可以直接调用 // mxgraph 被暴露在window下，所以可以直接调用
const parent = this.graph.getDefaultParent() const parent = this.graph.getDefaultParent()
...@@ -50,7 +51,7 @@ const microservicesGraph = { ...@@ -50,7 +51,7 @@ const microservicesGraph = {
null, null,
'html=1;fontColor=#000000;fillColor=#4bacc6;labelPosition=center;verticalAlign=top;align=center;strokeColor=#000000;', 'html=1;fontColor=#000000;fillColor=#4bacc6;labelPosition=center;verticalAlign=top;align=center;strokeColor=#000000;',
) )
this.microservicesInsertVertex(v1, this.microservicesGraphData[0].children) this.microservicesInsertVertex(v1, this.microservicesGraphData[0].checkChildren)
// console.log(v1) // console.log(v1)
console.log('parent', parent) console.log('parent', parent)
......
src/views/dataMapping/mixins/safeManagementGraph.mixin.js
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @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 17:53:31 * @LastEditTime: 2024-05-06 09:41:00
*/ */
const safeManagementGraph = { const safeManagementGraph = {
...@@ -108,7 +108,7 @@ const safeManagementGraph = { ...@@ -108,7 +108,7 @@ const safeManagementGraph = {
parent, parent,
null, null,
this.safeMidCenterData.name, this.safeMidCenterData.name,
20 + this.getSafeModuleGeo('width', '安全监督'), 25 + this.getSafeModuleGeo('width', '安全监督'),
20 + this.getSafeModuleGeo('height', '安全管理原则'), 20 + this.getSafeModuleGeo('height', '安全管理原则'),
100, 100,
40, 40,
...@@ -128,7 +128,7 @@ const safeManagementGraph = { ...@@ -128,7 +128,7 @@ const safeManagementGraph = {
} }
// 中右 // 中右
if(this.hasSafeMidRight) { if(this.hasSafeMidRight) {
const midRightX = 20 + this.getSafeModuleGeo('width', '安全监督') + this.getSafeModuleGeo('width', '安全管理') const midRightX = 30 + this.getSafeModuleGeo('width', '安全监督') + this.getSafeModuleGeo('width', '安全管理')
const midRightGraph = this.graph.insertVertex( const midRightGraph = this.graph.insertVertex(
parent, parent,
null, null,
...@@ -152,9 +152,9 @@ const safeManagementGraph = { ...@@ -152,9 +152,9 @@ const safeManagementGraph = {
} }
} }
// 下 // 下
if (this.hasSafeBottom) {
const maxMidHeight = Math.max(this.getSafeModuleGeo('height', '安全监督'), this.getSafeModuleGeo('height', '安全管理'), this.getSafeModuleGeo('height', '制度规范')) const maxMidHeight = Math.max(this.getSafeModuleGeo('height', '安全监督'), this.getSafeModuleGeo('height', '安全管理'), this.getSafeModuleGeo('height', '制度规范'))
const bottomY = this.getSafeModuleGeo('height', '安全管理原则') + maxMidHeight + 20 if (this.hasSafeBottom) {
const bottomY = this.getSafeModuleGeo('height', '安全管理原则') + maxMidHeight + 40
const bottomGraph = this.graph.insertVertex( const bottomGraph = this.graph.insertVertex(
parent, parent,
null, null,
...@@ -166,7 +166,7 @@ const safeManagementGraph = { ...@@ -166,7 +166,7 @@ const safeManagementGraph = {
'html=1;fontColor=#000000;spacing=10;fillColor=#fee599;labelPosition=center;verticalAlign=top;align=center;strokeColor=#000000;', 'html=1;fontColor=#000000;spacing=10;fillColor=#fee599;labelPosition=center;verticalAlign=top;align=center;strokeColor=#000000;',
) )
if (this.safeBottomData.checkChildren.length) { if (this.safeBottomData.checkChildren.length) {
this.safeTopInsertVertex( this.safeBottomInsertVertex(
bottomGraph, bottomGraph,
this.safeBottomData.checkChildren, this.safeBottomData.checkChildren,
) )
...@@ -176,6 +176,14 @@ const safeManagementGraph = { ...@@ -176,6 +176,14 @@ const safeManagementGraph = {
geometry.width += 20 geometry.width += 20
model.setGeometry(bottomGraph, geometry) model.setGeometry(bottomGraph, geometry)
} }
// 重新调整中部三个等高
const midStr = ['安全监督', '安全管理', '制度规范']
midStr.forEach(v => {
const geo = parent.children.find((v2) => v2.value == v)
let geometry = model.getGeometry(geo)
geometry.height = maxMidHeight
})
} }
} finally { } finally {
model.endUpdate() model.endUpdate()
...@@ -218,12 +226,46 @@ const safeManagementGraph = { ...@@ -218,12 +226,46 @@ const safeManagementGraph = {
`html=1;fontColor=#000000;whiteSpace=wrap;fillColor=#f7f7f7;labelPosition=center;verticalAlign=middle;align=center;strokeColor=#000000;`, `html=1;fontColor=#000000;whiteSpace=wrap;fillColor=#f7f7f7;labelPosition=center;verticalAlign=middle;align=center;strokeColor=#000000;`,
) )
// console.log('cell', cell) // console.log('cell', cell)
if (v.checkChildren && v.checkChildren.length) { // if (v.checkChildren && v.checkChildren.length) {
this.safeTopInsertVertex(cell, v.checkChildren) // this.safeTopInsertVertex(cell, v.checkChildren)
// }
})
} }
},
safeBottomInsertVertex(node, list) {
if (list && list.length) {
list.forEach((v, idx) => {
var cell = this.graph.insertVertex(
node,
null,
v.name,
this.safeBottomGetItemX(idx), // idx * 110 + 20,
this.safeBottomGetItemY(idx), // 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)
// }
}) })
} }
}, },
safeBottomGetItemX(idx) {
if(idx > 4) {
return (idx - 5) * 110 + 20
}
return idx * 110 + 20
},
safeBottomGetItemY(idx) {
const rows = Math.ceil((idx + 1) / 5)
if(rows > 1) {
return rows * 40
} else {
return 30
}
},
safeMidLeftInsertVertex(node, list) { safeMidLeftInsertVertex(node, list) {
if (list && list.length) { if (list && list.length) {
list.forEach((v, idx) => { list.forEach((v, idx) => {
...@@ -258,7 +300,7 @@ const safeManagementGraph = { ...@@ -258,7 +300,7 @@ const safeManagementGraph = {
}, },
safeMidGetItemX(item, idx) { safeMidGetItemX(item, idx) {
const col = (idx + 1) % 2 const col = (idx + 1) % 2
return col > 0 ? 20 : 140 return col > 0 ? 20 : 130
}, },
safeMidGetItemY(item, idx) { safeMidGetItemY(item, idx) {
const rows = Math.ceil((idx + 1) / 2) const rows = Math.ceil((idx + 1) / 2)
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!