Skip to content

liangzhen / framework-tools-web

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

中台及成图修改

1 parent 5ef96d0f
Expand all
Inline Side-by-side
Showing with 99 additions and 80 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.$nextTick(() => {
this.assetNumberDis = true 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-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.assetName" <el-input class="w180" type="text" placeholder="基础组件名称" v-model="form.assetName"
maxlength="50"></el-input> maxlength="50"></el-input>
</el-form-item> </el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发布时间" class="flex"> <el-form-item label="发布时间" class="flex">
<el-date-picker style="width:300px" v-model="form.time" value-format="yyyy-MM-dd" <el-date-picker style="width:300px" v-model="form.time" value-format="yyyy-MM-dd"
type="datetimerange" placeholder="发布时间"> type="datetimerange" placeholder="发布时间">
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
</el-col>
<el-col :span="6"> <div class="btn-box m-l-10">
<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>
......
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/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!