Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 7cbe7423 by 史敦盼
Options

中台及成图修改

1 parent 5ef96d0f
Inline Side-by-side
Showing with 277 additions and 183 deletions
src/config/index.js
......@@ -5,3 +5,5 @@ export const documentServerUrl2 = 'http://192.168.0.120:18050/'
// 元素颜色配置
// '业务架构元素': '#d2edfd', '应用架构元素': '#a0ce62', '数据架构元素': '#fbe8d0', '技术架构元素': '#e4d3fc', '安全架构元素': '#fffe55'
export const archiEleColor = ['#d2edfd', '#a0ce62', '#fbe8d0', '#e4d3fc', '#fffe55']
// 自动成图图例颜色 遵从： #527aba 完善： #e79f4e 新增： #acc756
export const dataMappingLegendColor = ['#527aba', '#e79f4e', '#acc756']
src/newComponents/ETable/tableColumnSlot.vue
......@@ -3,7 +3,7 @@
<span v-if="!item.T && !item.render">{{ row[item.prop] || '--' }}</span>
<div :class="row[item.prop] ? 'defaultLink' : ''" v-else-if="item.T == 'a'" :style="item.style"
@click="handlerClick(item.click, row)">{{
row[item.prop] ||
row[item.prop] || item.defaultText ||
'--' }}</div>
<FuncCom v-else-if="item.render" :item="item" :row="row" />
<el-switch v-else-if="item.T === 'switch'" :value="row[item.prop]" :active-color="item.activeColor || '#13ce66'"
......
src/views/archi-view-manage/canvas/Add.vue
......@@ -367,7 +367,9 @@ export default {
if (value[0] === '无') {
return (this.assetNumberDis = false)
}
this.assetNumberDis = true
this.$nextTick(() => {
this.assetNumberDis = true
})
// 当选中值变化时，更新绑定的对象
if (value && value.length) {
// 假设我们根据id来查询对象
......
src/views/comCenterServeListNew/components/dataEntity.vue
......@@ -3,48 +3,17 @@
<ETable ref="ETableRef" title="数据实体信息列表" :tableRef.sync="tableRef" height="100%" tableKey="dataEntity" :data="data"
:columns="columns" :indexMethod="true" v-loading="loading" :operateList="operateList"
@sizeChange="handlerSizeChange" @currentChange="handlerCurrentChange" :pager="pager">
<el-form class="search" :model="form" slot="header">
<el-row>
<el-col :span="6">
<el-form class="search flex" :model="form" slot="header">
<el-form-item label="物理实体名称" class="flex">
<el-input class="w180" type="text" placeholder="请输入" v-model="form.abilityName"
maxlength="50"></el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="4">
<el-form-item label="中台类型">
<el-select class="w180" size="mini" v-model="form.midGroundType" placeholder="中台类型">
<el-option v-for="item in midGroundTypeOptions" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="中台名称">
<el-select class="w180" size="mini" v-model="form.midGroundName" placeholder="中台名称">
<el-option v-for="item in midGroundNameOptions" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="发布时间">
<el-date-picker class="w180" size="mini" v-model="form.statTime" value-format="yyyy-MM-dd" type="date"
placeholder="发布时间">
</el-date-picker>
</el-form-item>
</el-col> -->
<el-col :span="4">
<div class="btn-box">
<div class="btn-box m-l-10">
<el-button type="primary" class="btn-search" icon="el-icon-search" @click="search"
v-preventReClick>查询</el-button>
<el-button type="default" class="btn-reset" icon="el-icon-refresh"
@click="reset">重置</el-button>
</div>
</el-col>
</el-row>
</el-form>
</ETable>
</div>
......@@ -242,7 +211,7 @@ export default {
height: 100%;
.w180 {
width: 180px !important;
width: 220px !important;
}
.search {
margin-top: 25px;
......@@ -251,7 +220,7 @@ export default {
.btn-box {
height: 38px;
display: flex;
justify-content: flex-end;
// justify-content: flex-end;
align-items: center;
}
}
......
src/views/comCenterServeListNew/components/editService.vue
......@@ -102,7 +102,7 @@ export default {
abilityType: {
required: true,
message: '资源类型不能为空',
trigger: 'blur'
trigger: 'change'
},
module: {
required: true,
......@@ -112,12 +112,12 @@ export default {
midGroundType: {
required: true,
message: '中台类型不能为空',
trigger: 'blur'
trigger: 'change'
},
midPlatformId: {
required: true,
message: '中台名称不能为空',
trigger: 'blur'
trigger: 'change'
}
},
};
......
src/views/comCenterServeListNew/components/serviceList.vue
......@@ -6,13 +6,13 @@
@currentChange="handlerCurrentChange" :pager="pager">
<el-form class="search" :model="form" slot="header">
<el-row>
<el-col :span="4">
<el-col :span="5">
<el-form-item label="中台服务名称">
<el-input class="w180" type="text" placeholder="中台服务名称" v-model="form.abilityName"
maxlength="50"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<!-- <el-col :span="4">
<el-form-item label="资源类型">
<el-select class="w180" v-model="form.abilitySource" placeholder="资源类型">
<el-option v-for="item in abilitySourceOptions" :key="item.value" :label="item.label"
......@@ -20,40 +20,40 @@
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
</el-col> -->
<el-col :span="5">
<el-form-item label="中台类型">
<el-select class="w180" v-model="form.midGroundType" placeholder="中台类型">
<el-select class="w180" v-model="form.midGroundId" placeholder="中台类型">
<el-option v-for="item in midGroundTypeOptions" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-col :span="5">
<el-form-item label="中台名称">
<el-select class="w180" v-model="form.midGroundName" placeholder="中台名称">
<el-select class="w180" v-model="form.midPlatformId" placeholder="中台名称">
<el-option v-for="item in midGroundNameOptions" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-col :span="5">
<el-form-item label="发布时间">
<el-date-picker class="w180" v-model="form.startTime" value-format="yyyy-MM-dd" type="date"
<el-date-picker class="w180" v-model="form.publishTime" value-format="yyyy-MM-dd" type="date"
placeholder="发布时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<div class="btn-box">
<!-- <el-col :span="4"> -->
<div class="btn-box m-l-10">
<el-button type="primary" class="btn-search" icon="el-icon-search" @click="search"
v-preventReClick>查询</el-button>
<el-button type="default" class="btn-reset" icon="el-icon-refresh"
@click="reset">重置</el-button>
</div>
</el-col>
<!-- </el-col> -->
</el-row>
</el-form>
<el-table-column slot="end" fixed="right" label="操作" align="center" :width="200">
......@@ -120,9 +120,9 @@ export default {
form: {
abilityName: '',// 中台服务名称 false
abilitySource: '',// 资源类型 1 中台服务清单 2 业务信息 3 应用服务信息 4 数据实体信息 5 技术组件信息 false
midGroundName: '',// 中台名称 false
midGroundType: '',// 中台类型 false
statTime: '',// 统计时间 false
midPlatformId: '',// 中台名称 false
midGroundId: '',// 中台类型 false
publishTime: '',// 统计时间 false
},
selectionList: [],
operateList: [
......@@ -231,12 +231,12 @@ export default {
},
{
label: "中台名称",
prop: "midGroundName",
minWidth: 120,
prop: "midPlatformName",
minWidth: 140,
showOverflowTooltip: true,
align: "center",
render: (h, params) => {
return h("span", {}, params.midGroundName ? params.midGroundName : '--');
return h("span", {}, params.midPlatformName ? params.midPlatformName : '--');
},
},
// {
......@@ -253,6 +253,7 @@ export default {
{
label: "服务调用方数量",
T: 'a',
defaultText: '0',
prop: "serviceInvNum",
minWidth: 120,
align: "center",
......@@ -264,6 +265,7 @@ export default {
{
label: "操作实体数量",
T: 'a',
defaultText: '0',
prop: "oprEntityNum",
minWidth: 120,
align: "center",
......@@ -275,6 +277,7 @@ export default {
{
label: "支撑技术组件数量",
T: 'a',
defaultText: '0',
prop: "supportTecModNum",
minWidth: 140,
align: "center",
......@@ -290,6 +293,7 @@ export default {
minWidth: 120,
align: "center",
T: 'a',
defaultText: '0',
style: { color: '#0b8680', cursor: 'pointer' },
click: (row) => {
this.$emit('dialog', '支撑的业务活动', row)
......@@ -300,6 +304,7 @@ export default {
prop: "relMidServiceNum",
minWidth: 120,
T: 'a',
defaultText: '0',
style: { color: '#0b8680', cursor: 'pointer' },
align: "center",
click: (row) => {
......@@ -398,7 +403,7 @@ export default {
},{
url: require('@/assets/comCenterServe/btn5.png'),
archiType: 6,
text: '关联清单'
text: '关联中台服务'
}],
operationArchiType: null
};
......@@ -675,9 +680,9 @@ export default {
this.form = {
abilityName: '',// 中台服务名称 false
abilitySource: '',// 资源类型 1 中台服务清单 2 业务信息 3 应用服务信息 4 数据实体信息 5 技术组件信息 false
midGroundName: '',// 中台名称 false
midGroundType: '',// 中台类型 false
statTime: '',// 统计时间 false
midPlatformId: '',// 中台名称 false
midGroundId: '',// 中台类型 false
publishTime: '',// 统计时间 false
}
this.getList()
},
......@@ -698,6 +703,7 @@ export default {
margin-bottom: 15px;
/deep/.el-form-item {
margin-bottom: 0 !important;
display: flex;
}
}
......@@ -708,7 +714,7 @@ export default {
.btn-box {
height: 38px;
display: flex;
justify-content: flex-end;
// justify-content: flex-end;
align-items: center;
height: 38px;
}
......
src/views/comCenterServeListNew/components/technicalCom.vue
......@@ -3,30 +3,24 @@
<ETable ref="ETableRef" title="技术组件信息列表" :tableRef.sync="tableRef" height="100%" tableKey="technicalCom"
:data="data" :columns="columns" :indexMethod="true" v-loading="loading" :operateList="operateList"
@sizeChange="handlerSizeChange" @currentChange="handlerCurrentChange" :pager="pager">
<el-form class="search" :model="form" slot="header">
<el-row>
<el-col :span="6">
<el-form-item label="基础组件名称" class="flex">
<el-input class="w180" type="text" placeholder="基础组件名称" v-model="form.assetName"
maxlength="50"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发布时间" class="flex">
<el-date-picker style="width:300px" v-model="form.time" value-format="yyyy-MM-dd"
type="datetimerange" placeholder="发布时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<div class="btn-box">
<el-button type="primary" class="btn-search" icon="el-icon-search" @click="search"
v-preventReClick>查询</el-button>
<el-button type="default" class="btn-reset" icon="el-icon-refresh"
@click="reset">重置</el-button>
</div>
</el-col>
</el-row>
<el-form class="search flex" :model="form" slot="header">
<el-form-item label="基础组件名称" class="flex">
<el-input class="w180" type="text" placeholder="基础组件名称" v-model="form.assetName"
maxlength="50"></el-input>
</el-form-item>
<el-form-item label="发布时间" class="flex">
<el-date-picker style="width:300px" v-model="form.time" value-format="yyyy-MM-dd"
type="datetimerange" placeholder="发布时间">
</el-date-picker>
</el-form-item>
<div class="btn-box m-l-10">
<el-button type="primary" class="btn-search" icon="el-icon-search" @click="search"
v-preventReClick>查询</el-button>
<el-button type="default" class="btn-reset" icon="el-icon-refresh"
@click="reset">重置</el-button>
</div>
</el-form>
</ETable>
</div>
......
src/views/comCenterServeListNew/options.js
......@@ -85,15 +85,15 @@ export const midGroundNameOptions = [
export const midGroundTypeOptions = [
{
label: "业务中台",
value: "业务中台",
value: "1",
},
{
label: "数据中台",
value: "数据中台",
value: "2",
},
{
label: "技术中台",
value: "技术中台",
value: "3",
},
];
export const stateOptions = [
......
src/views/dataMapping/Add.vue
......@@ -483,7 +483,7 @@ export default {
handleOpen() {
if (this.title === '完善') {
this.getArchiEleOptions(() => {
if (this.id) {
if (this.addRowData.archiAssetType === 1) {
this.fnSetFormData()
} else {
this.handleAssign(this.addRowData)
......
src/views/dataMapping/MxGraph.vue
......@@ -24,12 +24,14 @@ export default {
technicalFrameworkGraph,
dataTopicGraph,
safeManagementGraph,
microservicesGraph
microservicesGraph,
],
components: {},
computed: {},
mounted() {
this.graph = new mxGraph(document.getElementById('mxGraph_root'))
this.graph.centerZoom = false // 是否居中缩放
this.graph.setEnabled(false) // 设置启用,就是允不允许你改变CELL的形状内容。
this.model = this.graph.getModel()
// console.log('this.model', this.model)
// 测试撤销功能
......@@ -50,10 +52,52 @@ export default {
clear() {
this.model.clear()
},
// 放大
fnZoomIn() {
this.graph.zoomIn()
},
// 缩小
fnZoomOut() {
this.graph.zoomOut()
},
/**
* @description: 高亮处理（这里用的是方法是，把需要高亮的透明度不变，其他变淡）
* @param {String} color 需要高亮的颜色
* @return {void}
* @author: pan
*/
highlightCells(color) {
const parent = this.graph.getDefaultParent()
this.handleCellStyle(parent.children[0].children, color)
},
handleCellStyle(cells, color) {
console.log('color', color)
cells.forEach((v) => {
if (v.children) {
this.handleCellStyle(v.children, color)
} else {
let style = ''
if (!v.style.includes(color)) {
style = v.style.replace(/opacity=100;/g, '') + 'opacity=30;'
// console.log('1', style)
this.model.setStyle(v, style)
} else {
style = v.style.replace(/opacity=30;/g, '') + 'opacity=100;'
// console.log('3', style)
this.model.setStyle(v, style)
}
if (!color) {
style = v.style.replace(/opacity=30;/g, '') + 'opacity=100;'
// console.log('2', style)
this.model.setStyle(v, style)
}
}
})
},
},
beforeDestroy() {
this.graph.getModel().removeListener(mxEvent.UNDO, this.undoListener)
this.graph.getView().removeListener(mxEvent.UNDO, this.undoListener)
// this.graph.getModel().removeListener(mxEvent.UNDO, this.undoListener)
// this.graph.getView().removeListener(mxEvent.UNDO, this.undoListener)
},
}
</script>
......
src/views/dataMapping/index.vue
......@@ -4,7 +4,7 @@
* @Autor: pan
* @Date: 2024-04-23 11:30:05
* @LastEditors: pan
* @LastEditTime: 2024-05-07 19:04:17
* @LastEditTime: 2024-05-09 18:00:33
-->
<template>
<div class="dataMapping w-100">
......@@ -29,6 +29,20 @@
<el-button icon="el-icon-document-checked" type="primary" plain
>保存</el-button
>
<el-button
icon="el-icon-zoom-out"
@click="graphTool('fnZoomOut')"
type="primary"
plain
>缩小</el-button
>
<el-button
icon="el-icon-zoom-in"
@click="graphTool('fnZoomIn')"
type="primary"
plain
>放大</el-button
>
<!-- <el-button
v-preventReClick
@click="fnGraph()"
......@@ -109,10 +123,10 @@
label="状态"
>
</el-table-column>
<el-table-column align="center" label="操作">
<el-table-column width="160" align="center" label="操作">
<template #default="{ row, $index }">
<el-button
v-if="row.archiAssetType!=2"
v-if="row.archiAssetType != 2"
type="primary"
size="mini"
plain
......@@ -134,9 +148,15 @@
</transition>
<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>
<span :class="{ active: legendActive === 1 }" class="m-r-10">
<span @click="legendClick(1)" class="legend-1 flex-c">遵从</span>
</span>
<span :class="{ active: legendActive === 2 }" class="m-r-10">
<span @click="legendClick(2)" class="legend-2 flex-c">完善</span>
</span>
<span :class="{ active: legendActive === 3 }">
<span @click="legendClick(3)" class="legend-3 flex-c">新增</span>
</span>
</div>
<MxGraph ref="graph" />
</div>
......@@ -164,6 +184,7 @@ import {
getAssetDetail,
} from '@/api'
import { deduplication } from '@/utils'
import { dataMappingLegendColor } from '@/config/index'
export default {
name: 'dataMapping',
data() {
......@@ -189,7 +210,8 @@ export default {
title: '',
assetId: '',
addRowData: {},
rowIndex: 0
rowIndex: 0,
legendActive: 0,
}
},
components: { MxGraph, Add, SvgIcon },
......@@ -209,6 +231,21 @@ export default {
// this.$refs.tree.setCheckedKeys(["176", '1775128878519729929', '1775128878519729938', '1775128878519729939', '177', '180', '1062', '1775128878519729932', '1775128878519729925', '1775128878519729933', '1775128878519729934', '1775128878519729926', '1775128878519729935', '1775128878519730025', '1775128878519730026']);
},
methods: {
legendClick(type) {
if (this.legendActive === type) {
this.legendActive = 0
} else {
this.legendActive = type
}
if(this.legendActive) {
this.graphTool('highlightCells', dataMappingLegendColor[this.legendActive - 1])
} else {
this.graphTool('highlightCells', null)
}
},
graphTool(operate, color) {
this.$refs['graph'][operate](color)
},
fnCheckAll(v) {
// console.log(v)
if (v) {
......@@ -239,15 +276,17 @@ export default {
// this.tableData[this.rowIndex] = data
const repData = {
...this.tableData[this.rowIndex],
archiAssetType: 2
archiAssetType: 2,
}
this.tableData.splice(this.rowIndex, 1, repData);
const node = this.$refs.tree.getNode(repData.id)
node.data.archiAssetType = 2
this.tableData.splice(this.rowIndex, 1, repData)
this.handleBusGraph('init')
},
handleAdd(data) {
this.addData = []
const includeAddData = this.tableData.findIndex(v => v.id === data.id)
if(includeAddData === -1) {
const includeAddData = this.tableData.findIndex((v) => v.id === data.id)
if (includeAddData === -1) {
this.addData.push(data)
}
if (data.children.length) {
......@@ -263,18 +302,18 @@ export default {
this.title = '添加行'
},
fnDel(row, index) {
if(row.id) {
if (row.id) {
this.$refs.tree.setChecked(row.id, false)
if(row.checkChildren) {
row.checkChildren.forEach(v => {
if (row.checkChildren) {
row.checkChildren.forEach((v) => {
this.$refs.tree.setChecked(v.id, false)
})
}
}
this.tableData.splice(index, 1)
// 有子级，对应删除子级
if(row.checkChildren) {
this.tableData = this.tableData.filter(v => v.parentId != row.id)
if (row.checkChildren) {
this.tableData = this.tableData.filter((v) => v.parentId != row.id)
}
this.handleBusGraph('init')
},
......@@ -298,19 +337,20 @@ export default {
if (row.parentId === '0') {
return cellValue
} else {
let name = ''
this.tableData.forEach((v) => {
if (v.id == row.parentId) {
name = v.name
}
})
if (!name && row.children) {
name = row.children[0].name
}
if(!row.id) {
name = row.parentAssetName
}
return name
// let name = ''
// this.tableData.forEach((v) => {
// if (v.id == row.parentId) {
// name = v.name
// }
// })
// if (!name && row.children) {
// name = row.children[0].name
// }
// if (!row.id) {
// name = row.parentAssetName
// }
// return name
return row.parentAssetName
}
},
formatter2(row, column, cellValue, index) {
......@@ -321,9 +361,9 @@ export default {
}
},
formatterStatus(row, column, cellValue, index) {
if(cellValue == '3') {
if (cellValue == '3') {
return '新增'
} else if(cellValue == '2') {
} else if (cellValue == '2') {
return '完善'
} else {
return '遵从'
......@@ -379,18 +419,24 @@ export default {
// 微服务总视图
handleMicroservicesGraph() {
const checkedKeys = this.$refs.tree.getCheckedKeys()
const checkedNodes = checkedKeys.map(v => {
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) ?? []
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 === '企业管理应用')
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.$store.commit(
'graphData/CHANGE_MICROSERVICES_GRAPH_DATA',
showGraphData,
)
this.$refs['graph'].initMicroservicesGraph()
},
handleMicroservicesGraphData(parentNodes, childNodes, level3Nodes) {
......@@ -400,10 +446,10 @@ export default {
if (v.id === v2.parentId) {
v.checkChildren.push(v2)
}
if(v2.children) {
if (v2.children) {
v2.checkChildren = []
level3Nodes.forEach(v3 => {
if(v3.parentId === v2.id) {
level3Nodes.forEach((v3) => {
if (v3.parentId === v2.id) {
v2.checkChildren.push(v3)
}
})
......@@ -418,33 +464,39 @@ export default {
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'
}]
const layoutList = [
{
name: '安全管理原则',
key: 'safeTopData',
},
{
name: '安全监督',
key: 'safeMidLeftData',
},
{
name: '安全管理',
key: 'safeMidCenterData',
},
{
name: '制度规范',
key: 'safeMidRightData',
},
{
name: '工作机制',
key: 'safeBottomData',
},
]
let graphData = {
safeTopData: {},
safeMidLeftData: {},
safeMidCenterData: {},
safeMidRightData: {},
safeBottomData: {}
safeBottomData: {},
}
layoutList.forEach(v => {
const idx = parentNodes.findIndex(v2 => v2.assetName === v.name)
if(idx !== -1) {
graphData[v.key] = parentNodes[idx];
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)
......@@ -462,24 +514,24 @@ export default {
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 === '安全防护')
const leftIdx = parentNodes.findIndex((v) => v.assetName === '安全防护')
let techFrameLeftData = {}
if(leftIdx !== -1) {
techFrameLeftData = parentNodes.splice(leftIdx, 1)[0];
if (leftIdx !== -1) {
techFrameLeftData = parentNodes.splice(leftIdx, 1)[0]
// parentNodes.splice(0, 0, leftElement);
}
const rightIdx = parentNodes.findIndex(v => v.assetName === '运行维护')
const rightIdx = parentNodes.findIndex((v) => v.assetName === '运行维护')
let techFrameRightData = {}
if(rightIdx !== -1) {
techFrameRightData = parentNodes.splice(rightIdx, 1)[0];
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
techFrameMiddleData: parentNodes,
}
// console.log('graphData4', graphData)
this.$store.commit('graphData/CHANGE_TECH_FRAME_DATA', graphData)
......@@ -487,7 +539,7 @@ export default {
},
// 数据主题关系视图成图逻辑
handleDataSubGraph(data, node) {
if(node.checked) {
if (node.checked) {
getAssetDetail({ assetId: data.id }).then((res) => {
if (res.code === 200) {
this.dataSubGraphData.push(res.data)
......@@ -495,11 +547,14 @@ export default {
arr = deduplication(arr, 'lineName')
this.$store.commit('graphData/CHANGE_DATA_SUB_GRAPH_DATA', arr)
console.log('arr', arr)
console.log('sd', this.dataSubGraphData)
this.$refs['graph'].initDataSubjectRelationshipGraph()
}
})
} else {
this.dataSubGraphData = this.dataSubGraphData.filter(v => v.id != data.id)
this.dataSubGraphData = this.dataSubGraphData.filter(
(v) => v.id != data.id,
)
let arr = this.fnHandleToSubData()
arr = deduplication(arr, 'lineName')
this.$store.commit('graphData/CHANGE_DATA_SUB_GRAPH_DATA', arr)
......@@ -509,14 +564,14 @@ export default {
fnHandleToSubData() {
const checkedNodeKeys = this.getCheckedKeys()
let arr = []
this.dataSubGraphData.forEach(v => {
this.dataSubGraphData.forEach((v) => {
const targetList = JSON.parse(v.targetAsset)
targetList.forEach(t => {
if(checkedNodeKeys.includes(t.asset_id)) {
targetList.forEach((t) => {
if (checkedNodeKeys.includes(t.asset_id)) {
arr.push({
lineName: t.rela_name,
targetName: t.asset_name,
sourceName: v.assetName
sourceName: v.assetName,
})
}
})
......@@ -562,14 +617,16 @@ export default {
parentAssetId: this.activeName === '3' ? '0' : undefined,
}
this.treeLoading = true
getAutomaticGraphing(params).then((res) => {
this.treeLoading = false
if (res.code == 200) {
this.treeData = res.data
}
}).catch(err => {
this.treeLoading = false
})
getAutomaticGraphing(params)
.then((res) => {
this.treeLoading = false
if (res.code == 200) {
this.treeData = res.data
}
})
.catch((err) => {
this.treeLoading = false
})
},
filterNode(value, data) {
if (!value) return true
......@@ -577,11 +634,17 @@ export default {
},
handleNodeClick(data) {
const node = this.$refs.tree.getNode(data.id)
data.parentAssetName = node.parent.data.name
if(node.checked) {
data.archiAssetType = 1
}
console.log('data', data)
console.log('node', node)
console.log('checkedNodes', this.$refs.tree.getCheckedNodes())
this.setNode(node)
console.log('this.tableData', this.tableData)
this.tableData = [...this.$refs.tree.getCheckedNodes(), ...this.addData]
console.log('this.tableData', this.$refs.tree.getCheckedNodes(), this.addData)
if (!this.tableData.length) {
this.$refs['graph'].clear()
} else {
......@@ -619,6 +682,12 @@ export default {
</script>
<style scoped lang="scss">
@import '@/styles/transition.scss';
@import '@/styles/elementui.scss';
@mixin legendBg($color) {
background-color: $color;
width: 80px;
height: 30px;
}
.dataMapping {
margin: 16px;
flex-direction: column;
......@@ -654,18 +723,24 @@ export default {
position: absolute;
top: 10px;
left: 20px;
z-index: 99;
.active {
border: 5px solid $color-primary;
padding: 2px;
}
& > span {
width: 80px;
height: 30px;
cursor: pointer;
border: 5px solid transparent;
padding: 2px;
}
&-1 {
background-color: #527aba;
@include legendBg(#527aba);
}
&-2 {
background-color: #e79f4e;
@include legendBg(#e79f4e);
}
&-3 {
background-color: #acc756;
@include legendBg(#acc756);
}
}
}
......
src/views/dataMapping/mixins/businessCapabilityGraph.mixin.js
......@@ -4,7 +4,7 @@
* @Autor: pan
* @Date: 2024-04-28 11:05:28
* @LastEditors: pan
* @LastEditTime: 2024-05-07 09:53:27
* @LastEditTime: 2024-05-09 11:23:05
*/
const businessCapabilityGraphMixin = {
data() {
......@@ -28,7 +28,9 @@ const businessCapabilityGraphMixin = {
// console.log('mockData', this.mockData)
// mxgraph 被暴露在window下，所以可以直接调用
const parent = this.graph.getDefaultParent()
this.graph.removeCells(this.graph.getChildVertices(parent)) //清空画布
if(!this.mockData.length) return
const model = this.graph.getModel()
// mxGraphHandler.prototype.guidesEnabled = true
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!