Skip to content

liangzhen / framework-tools-web

Go to a project
Commit f08b0f44 by 史敦盼
Options

数据架构-关系维护

1 parent 7cbe7423
Inline Side-by-side
Showing with 644 additions and 26 deletions
src/api/dataMapping.js 0 → 100644
import { post } from '@/utils/http'
import {
EADC_ARRCHITECTURE,
EADC_KNOWLEDGE_POOL,
EADC_SHARED_ABILITY,
} from '@/config/micromodule'
// 查询所属资产关系
export function queryEleRela(params) {
return post(EADC_ARRCHITECTURE + '/ele-rel/qEleRela', params)
}
\ No newline at end of file
src/components/PropTable.vue 0 → 100644
<!--
* @Description: 普通表格，传入数据，非查询
* @Version: 2.0
* @Autor: pan
* @Date: 2024-05-10 09:08:36
* @LastEditors: pan
* @LastEditTime: 2024-05-10 15:06:08
-->
<template>
<el-table
ref="tableConfig"
class="config-table"
v-bind="$attrs"
v-on="$listeners"
:data="tableData"
:row-key="idKey"
stripe
border
height="100%"
>
<template v-for="item in columns">
<el-table-column
v-if="item.type === 'index'"
v-bind="item"
align="center"
:key="item.type"
></el-table-column>
<!-- 操作列 -->
<el-table-column
v-else-if="item.type === 'operation'"
:key="item.prop"
v-bind="item"
align="center"
>
<template #default="scope">
<el-button
class="btn"
v-for="items in item.actionButtons"
:key="items.title"
v-bind="items"
:disabled="
items.disabledCallback
? items.disabledCallback(scope.row, items.title)
: false
"
@click="item.callback(scope.row, items.title, scope.$index)"
><span v-if="!items.circle">{{ items.title }}</span></el-button
>
</template>
</el-table-column>
<!-- 普通渲染 -->
<el-table-column
v-else
:key="item.prop"
v-bind="item"
show-overflow-tooltip
align="center"
>
<!-- 自定义插槽 -->
<template v-if="item.__slotName" #default="scope">
<slot :name="item.__slotName" :data="scope"></slot>
</template>
<!-- 字典值匹配 如后端给state: 0 页面要渲染成已停用-->
<template v-else-if="item.collectionType" #default="scope">
<span
:class="item.class ? item.class(scope.row) : null"
@click="item?.callback(scope.row)"
>
{{ handleToText(item, scope.row[item.prop]) }}</span
>
</template>
</el-table-column>
</template>
</el-table>
</template>
<script>
export default {
props: {
columns: {
type: Array,
default: () => [],
required: true,
},
tableData: {
type: Array,
default: () => [],
required: true,
},
idKey: {
type: String,
default: 'id',
},
},
data() {
return {}
},
methods: {
handleToText(item, state) {
let val = state
if (!val) {
val = item.emptyToNum || 0
}
const obj = item.options?.find((v) => v.value == val) || {}
return obj['label']
},
},
}
</script>
<style scoped lang="scss"></style>
src/config/index.js
// onlyoffice 文档url
export const documentServerUrl = 'http://192.168.0.120/'
export const documentServerUrl2 = 'http://192.168.0.120:18050/'
export const documentServerUrl = 'http://192.168.0.102/'
export const documentServerUrl2 = 'http://192.168.0.102:18050/'
// 元素颜色配置
// '业务架构元素': '#d2edfd', '应用架构元素': '#a0ce62', '数据架构元素': '#fbe8d0', '技术架构元素': '#e4d3fc', '安全架构元素': '#fffe55'
......
src/utils/dictionary.js
......@@ -124,3 +124,8 @@ export const rectificationState = [
{ label: '整改未通过', value: 2 },
{ label: '已关闭', value: 3 },
]
export const archiAssetTypeOptions = [
{ label: '遵从', value: 1 },
{ label: '完善', value: 2 },
{ label: '新增', value: 3 },
]
src/views/comCenterServeListNew/components/businessMsg.vue
......@@ -272,7 +272,14 @@ export default {
.businessMsgWrapper {
width: 100%;
height: 100%;
/deep/ .el-form {
width: 100%;
.el-form-item:last-child {
flex: 1;
justify-content: flex-end;
margin-right: 0;
}
}
.w180 {
width: 180px !important;
}
......
src/views/comCenterServeListNew/components/dataEntity.vue
......@@ -220,7 +220,8 @@ export default {
.btn-box {
height: 38px;
display: flex;
// justify-content: flex-end;
justify-content: flex-end;
flex: 1;
align-items: center;
}
}
......
src/views/comCenterServeListNew/components/serviceList.vue
......@@ -46,14 +46,14 @@
</el-date-picker>
</el-form-item>
</el-col>
<!-- <el-col :span="4"> -->
<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">
......@@ -714,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
......@@ -251,6 +251,7 @@ export default {
display: flex;
justify-content: flex-end;
align-items: center;
flex: 1;
}
}
</style>
\ No newline at end of file
src/views/comCenterServeListNew/components/usiingService.vue
......@@ -323,7 +323,14 @@ export default {
.usiingServiceWrapper {
width: 100%;
height: 100%;
/deep/ .el-form {
width: 100%;
.el-form-item:last-child {
flex: 1;
justify-content: flex-end;
margin-right: 0;
}
}
.w180 {
width: 180px !important;
}
......
src/views/dataMapping/RelationMaintenance.vue 0 → 100644
<!--
* @Description: 关系维护弹窗
* @Version: 2.0
* @Autor: pan
* @Date: 2024-05-10 09:33:41
* @LastEditors: pan
* @LastEditTime: 2024-05-10 15:14:10
-->
<template>
<div>
<el-dialog
title="关系维护"
:visible.sync="showDialog"
:close-on-click-modal="false"
width="60%"
@open="handleOpen()"
@close="handleClose()"
>
<div class="w-100 flex-e-c m-b-10">
<el-button
type="primary"
plain
icon="el-icon-circle-plus-outline"
@click="fnPushData()"
>添加行</el-button
>
</div>
<div style="height: 500px" v-loading="loading">
<PropTable :columns="dataSubColumn" :table-data="tableData" />
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" v-preventReClick @click="fnSave()"
>确定</el-button
>
<el-button @click="handleClose()">取消</el-button>
</span>
</el-dialog>
<RelationMaintenanceAddRow
@emitItem="addItem"
:visible.sync="addRowDiaVisible"
/>
</div>
</template>
<script>
import RelationMaintenanceAddRow from './RelationMaintenanceAddRow.vue'
import PropTable from '@/components/PropTable.vue'
import { getAssetDetail } from '@/api'
export default {
props: {
visible: {
type: Boolean,
default: false,
required: true,
},
rowData: {
type: Object,
default: () => {},
required: true,
},
},
data() {
return {
tableData: [],
loading: false,
addRowDiaVisible: false,
}
},
components: {
PropTable,
RelationMaintenanceAddRow,
},
computed: {
dataSubColumn() {
return [
{ label: '序号', type: 'index', width: '80px' },
{ label: '源资产', prop: 'sourceName' },
{ label: '目标资产', prop: 'asset_name' },
{ label: '关系', prop: 'rela_name' },
{
label: '操作',
type: 'operation',
width: '180px',
actionButtons: [
{
title: '移除',
type: 'danger',
size: 'mini',
plain: true,
icon: 'el-icon-delete',
},
],
callback: (row, title, rowIndex) => {
this.fnDataSubOperation(row, title, rowIndex)
},
},
]
},
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
},
},
mounted() {},
methods: {
addItem(item) {
this.tableData.push({ ...item, sourceName: this.rowData.assetName })
},
// 添加行
fnPushData() {
this.addRowDiaVisible = true
},
fnDataSubOperation(row, title, rowIndex) {
this.tableData.splice(rowIndex, 1)
},
handleOpen() {
this.fnGetDetail()
},
handleClose() {
this.showDialog = false
this.tableData = []
},
fnGetDetail() {
let data = this.rowData.targetAsset
? JSON.parse(this.rowData.targetAsset)
: []
if(data.length) {
this.tableData = data.map(v => {
return {
...v,
sourceName: this.rowData.assetName,
}
})
}
// this.loading = true
// getAssetDetail({ assetId: this.rowData.id })
// .then((res) => {
// this.loading = false
// if (res.code === 200) {
// const data = res.data.targetAsset
// ? JSON.parse(res.data.targetAsset)
// : []
// if (data.length) {
// this.tableData = data.map((v) => {
// return {
// ...v,
// sourceName: this.rowData.assetName,
// }
// })
// }
// } else {
// this.tableData = []
// }
// })
// .catch((err) => {
// this.loading = false
// this.tableData = []
// })
},
fnSave() {
this.$emit('updateData', this.tableData)
},
},
}
</script>
<style scoped lang="scss"></style>
src/views/dataMapping/RelationMaintenanceAddRow.vue 0 → 100644
<!--
* @Description: 关系维护-添加行
* @Version: 2.0
* @Autor: pan
* @Date: 2024-05-10 10:22:25
* @LastEditors: pan
* @LastEditTime: 2024-05-10 15:49:47
-->
<template>
<el-dialog
title="添加行"
:visible.sync="showDialog"
:close-on-click-modal="false"
width="40%"
@open="handleOpen()"
@close="handleClose()"
>
<div>
<Form
ref="addForm"
:form-options="formOptions"
label-width="120px"
></Form>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" v-preventReClick @click="fnSave()"
>确定</el-button
>
<el-button @click="handleClose()">取消</el-button>
</span>
</el-dialog>
</template>
<script>
import Form from '@/components/Form.vue'
import { queryEleRela } from '@/api/dataMapping'
import { getAutomaticGraphing } from '@/api'
export default {
props: {
visible: {
type: Boolean,
default: false,
required: true,
},
},
data() {
return {
relaOptions: [],
treeSelectData: [],
}
},
components: {
Form,
},
computed: {
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
},
formOptions() {
const that = this
return [
{
label: '遵从元素关系', // label文字
prop: 'ele_rela_id', // 字段名
element: 'el-select', // 指定elementui组件
placeholder: '请选择', // elementui组件属性
options: this.relaOptions,
keyOption: {
label: 'rsName',
value: 'eleRelaId',
},
filterable: true,
span: 12,
rules: [{ required: true, trigger: 'change', message: '不能为空' }],
},
{
label: '目标资产', // label文字
prop: 'asset_id', // 字段名
element: 'el-cascader', // 指定elementui组件
initValue: undefined, // 字段初始值
placeholder: '请选择', // elementui组件属性
filterable: true,
options: this.treeSelectData,
span: 12,
rules: [{ required: true, trigger: 'change', message: '不能为空' }],
props: {
children: 'children',
label: 'assetName',
value: 'id',
checkStrictly: true,
},
events: {
change(e) {
that.targetNodeChange(e)
},
},
},
{
label: '资产关系名称', // label文字
prop: 'rela_name', // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入', // elementui组件属性
span: 12,
rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
},
]
},
},
mounted() {},
methods: {
handleOpen() {
this.$nextTick(() => {
this.$refs['addForm'].addInitValue()
this.$refs['addForm'].onReset()
})
queryEleRela().then((res) => {
if (res.code === 200) {
this.relaOptions = res.data
} else {
this.relaOptions = []
}
})
const params = {
archiBelongId: '3',
}
getAutomaticGraphing(params)
.then((res) => {
if (res.code === 200) {
this.treeSelectData = res.data
}
})
.catch((err) => {})
},
targetNodeChange(value) {
this.selectedObject = {}
if (value && value.length) {
// 假设我们根据id来查询对象
this.selectedObject = this.findObjectById(
this.treeSelectData,
value[value.length - 1],
)
} else {
this.selectedObject = null
}
console.log('selectedObject', this.selectedObject)
},
findObjectById(items, id) {
for (let i = 0; i < items.length; i++) {
if (items[i].id === id) {
return items[i]
}
if (items[i].children) {
const found = this.findObjectById(items[i].children, id)
if (found) {
return found
}
}
}
return null
},
fnSave() {
this.$refs['addForm'].onValidate(() => {
const { ele_rela_id, asset_id, rela_name } = this.$refs['addForm'].getData()
const relaObj =
this.relaOptions.find((v) => v.eleRelaId === ele_rela_id) || {}
const item = {
rela_name,
asset_id: asset_id[asset_id.length - 1],
asset_name: this.selectedObject.assetName,
ele_rela_name: relaObj.eleRelaId,
ele_rela_id
}
console.log('info', item)
this.handleClose()
this.$emit('emitItem', item)
})
},
handleClose() {
this.showDialog = false
this.selectedObject = {}
this.formOptions.forEach((v) => {
if (v.prop === 'asset_id') {
v.initValue = []
} else {
v.initValue = null
}
})
this.$refs['addForm'].addInitValue()
this.$refs['addForm'].onReset()
},
},
}
</script>
<style scoped lang="scss"></style>
src/views/dataMapping/index.vue
......@@ -4,7 +4,7 @@
* @Autor: pan
* @Date: 2024-04-23 11:30:05
* @LastEditors: pan
* @LastEditTime: 2024-05-09 18:00:33
* @LastEditTime: 2024-05-10 15:39:56
-->
<template>
<div class="dataMapping w-100">
......@@ -88,7 +88,9 @@
</div>
<transition name="slide">
<div style="width: 50%" v-show="!collapse">
<PropTable v-if="activeName === '3'" :columns="dataSubColumn" :table-data="dataSubGraphData" />
<el-table
v-else
:data="tableData"
border
stripe
......@@ -134,6 +136,14 @@
>完善</el-button
>
<el-button
v-if="activeName === '3'"
type="primary"
size="mini"
plain
@click="fnRelationM(row, $index)"
>关系维护</el-button
>
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
......@@ -144,6 +154,7 @@
</template>
</el-table-column>
</el-table>
</div>
</transition>
<div class="graphContent flex-1">
......@@ -171,6 +182,8 @@
:id="assetId"
:add-row-data="addRowData"
/>
<!-- 关系维护 -->
<RelationMaintenance @updateData="updateRelationData" :row-data="rowData" :visible.sync="relationVisible" />
</div>
</template>
......@@ -178,6 +191,8 @@
import Add from './Add.vue'
import MxGraph from './MxGraph.vue'
import SvgIcon from '@/components/SvgIcon'
import RelationMaintenance from './RelationMaintenance.vue'
import PropTable from '@/components/PropTable.vue'
import {
getAutomaticGraphing,
query_jia_gou_ceng_ci_new,
......@@ -185,6 +200,7 @@ import {
} from '@/api'
import { deduplication } from '@/utils'
import { dataMappingLegendColor } from '@/config/index'
import { archiAssetTypeOptions } from '@/utils/dictionary'
export default {
name: 'dataMapping',
data() {
......@@ -212,9 +228,11 @@ export default {
addRowData: {},
rowIndex: 0,
legendActive: 0,
relationVisible: false,
rowData: {}
}
},
components: { MxGraph, Add, SvgIcon },
components: { MxGraph, Add, SvgIcon, RelationMaintenance, PropTable },
created() {
this.getOptions()
},
......@@ -226,7 +244,46 @@ export default {
this.$refs.tree.filter(val)
},
},
computed: {},
computed: {
dataSubColumn() {
return [
{ label: '序号', type: 'index', width: '80px' },
{ label: '业务域', prop: 'assetName' },
{ label: '一级业务职能', prop: 'name' },
{ label: '状态', prop: 'archiAssetType', collectionType: 'archiAssetType',
options: archiAssetTypeOptions, },
{
label: '操作',
type: 'operation',
width: '260px',
actionButtons: [
{
title: '完善',
type: 'primary',
size: 'mini',
plain: true,
},
{
title: '关系维护',
type: 'primary',
size: 'mini',
plain: true,
},
{
title: '移除',
type: 'danger',
size: 'mini',
plain: true,
icon: 'el-icon-delete',
},
],
callback: (row, title, rowIndex) => {
this.fnDataSubOperation(row, title, rowIndex)
},
},
]
}
},
mounted() {
// this.$refs.tree.setCheckedKeys(["176", '1775128878519729929', '1775128878519729938', '1775128878519729939', '177', '180', '1062', '1775128878519729932', '1775128878519729925', '1775128878519729933', '1775128878519729934', '1775128878519729926', '1775128878519729935', '1775128878519730025', '1775128878519730026']);
},
......@@ -237,8 +294,11 @@ export default {
} else {
this.legendActive = type
}
if(this.legendActive) {
this.graphTool('highlightCells', dataMappingLegendColor[this.legendActive - 1])
if (this.legendActive) {
this.graphTool(
'highlightCells',
dataMappingLegendColor[this.legendActive - 1],
)
} else {
this.graphTool('highlightCells', null)
}
......@@ -315,7 +375,52 @@ export default {
if (row.checkChildren) {
this.tableData = this.tableData.filter((v) => v.parentId != row.id)
}
this.handleBusGraph('init')
if(this.activeName === '1') {
this.handleBusGraph('init')
}
},
// 关系维护
fnRelationM(row) {
this.rowData = row
this.relationVisible = true
},
fnDataSubOperation(row, title, rowIndex) {
switch (title) {
case '完善':
break;
case '关系维护':
this.fnRelationM(row)
break;
case '移除':
this.fnRelationRemove(row, rowIndex)
break;
default:
break;
}
},
//
fnRelationRemove(row, rowIndex) {
this.$refs.tree.setChecked(row.id, false)
this.dataSubGraphData.splice(rowIndex, 1)
this.fnUpdateRelationGraph()
},
// 关系更新
updateRelationData(data) {
const idx = this.dataSubGraphData.findIndex(v => v.id === this.rowData.id)
if(idx != -1) {
this.dataSubGraphData[idx].targetAsset = JSON.stringify(data)
this.fnUpdateRelationGraph()
}
this.relationVisible = false
console.log('dataSubGraphData', this.dataSubGraphData)
},
// 更新关系的图形
fnUpdateRelationGraph() {
let arr = this.fnHandleToSubData()
arr = deduplication(arr, 'lineName')
this.$store.commit('graphData/CHANGE_DATA_SUB_GRAPH_DATA', arr)
this.$refs['graph'].initDataSubjectRelationshipGraph()
},
fnPerfect(row, index) {
this.visible = true
......@@ -543,22 +648,16 @@ export default {
getAssetDetail({ assetId: data.id }).then((res) => {
if (res.code === 200) {
this.dataSubGraphData.push(res.data)
let arr = this.fnHandleToSubData()
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()
this.fnUpdateRelationGraph()
// console.log('arr', arr)
// console.log('sd', this.dataSubGraphData)
}
})
} else {
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)
this.$refs['graph'].initDataSubjectRelationshipGraph()
this.fnUpdateRelationGraph()
}
},
fnHandleToSubData() {
......@@ -635,7 +734,7 @@ export default {
handleNodeClick(data) {
const node = this.$refs.tree.getNode(data.id)
data.parentAssetName = node.parent.data.name
if(node.checked) {
if (node.checked) {
data.archiAssetType = 1
}
console.log('data', data)
......@@ -644,7 +743,11 @@ export default {
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)
console.log(
'this.tableData',
this.$refs.tree.getCheckedNodes(),
this.addData,
)
if (!this.tableData.length) {
this.$refs['graph'].clear()
} else {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!