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