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/'
// 元素颜色配置
// '业务架构元素': '#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.$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 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-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">
<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>
......
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/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!