top图字段修改完成

This commit is contained in:
clay 2021-07-20 00:34:36 +08:00
parent 4752ce1d4c
commit 5fa018f70f
3 changed files with 55 additions and 245 deletions

View File

@ -167,6 +167,7 @@ export default {
});
vm.selectedNodeParams = {
label: clickNodeModel.label || "",
attrs:clickNodeModel.attrs,
appConfig: { ...nodeAppConfig, ...clickNodeModel.appConfig }
};
}

View File

@ -49,6 +49,31 @@
<span>节点标签</span>
<el-input v-model="selectedNodeParams.label" size="mini"/>
<!-- <input class="params-input" type="text" autocomplete="off" v-model="selectedNodeParams.label" />-->
<div class="input-item">
<span>字段信息</span>
<template>
<el-table
:data="selectedNodeParams.attrs"
max-height="350px"
style="width: 100%">
<el-table-column
prop="key"
width="120"
label="字段名称">
<template slot-scope="scope">
{{ scope.row.key + ':' + scope.row.comment }}
</template>
</el-table-column>
<el-table-column
prop="isUse"
label="是否使用">
<template slot-scope="scope">
<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.isUse"></el-checkbox>
</template>
</el-table-column>
</el-table>
</template>
</div>
<div v-for="(value, key) in nodeAppConfig" :key="key">
<span>{{ value }}</span>
<el-input v-model="selectedNodeParams.appConfig[key]" size="mini"/>
@ -60,12 +85,15 @@
<div v-else-if="currentFocus === 'edge'">
<div class="pannel-title">连线</div>
<div class="block-container">
<!-- <span>连线标签</span>-->
<!-- <el-input v-model="selectedEdgeParams.label" size="mini"/>-->
<!-- <span>连线标签</span>-->
<!-- <el-input v-model="selectedEdgeParams.label" size="mini"/>-->
<div class="input-item">
<span>查询方式</span>
<div class="input-select">
<el-select v-model="selectedEdgeParams.appConfig.associated" @change="selectedEdgeParams.label = selectedEdgeParams.appConfig.associated+' join'" size="mini">
<el-select v-model="selectedEdgeParams.appConfig.associated"
@change="selectedEdgeParams.label = selectedEdgeParams.appConfig.associated+' join'"
size="mini"
>
<el-option label="left join" value="left"/>
<el-option label="right join" value="right"/>
<el-option label="inner join" value="inner"/>
@ -315,6 +343,7 @@ export default {
this.selectedNodeParamsTimeout = setTimeout(() => {
selectedNodeModel.label = newVal.label
selectedNodeModel.appConfig = newVal.appConfig
selectedNodeModel.attrs = newVal.attrs
this.selectedNode.update(selectedNodeModel)
}, 300)
}
@ -965,47 +994,56 @@ export default {
{
key: 'id',
type: 'number(6)',
comment: '主键id'
comment: '主键id',
isUse: 1
},
{
key: 'key',
type: 'varchar(255)',
comment: '关键字'
comment: '关键字',
isUse: 1
},
{
key: 'gender',
type: 'enum(M, F)',
comment: 'gender'
comment: 'gender',
isUse: 1
},
{
key: 'birthday',
type: 'date',
comment: '生日'
comment: '生日',
isUse: 1
},
{
key: 'hometown',
type: 'varchar(255)',
comment: '家乡'
comment: '家乡',
isUse: 1
},
{
key: 'country',
type: 'varchar(255)',
comment: '国家'
comment: '国家',
isUse: 1
},
{
key: 'nation',
type: 'varchar(255)',
comment: 'nation'
comment: 'nation',
isUse: 1
},
{
key: 'jobId',
type: 'number(3)',
comment: '工作id'
comment: '工作id',
isUse: 1
},
{
key: 'phone',
type: 'varchar(255)',
comment: '电话'
comment: '电话',
isUse: 1
}
],
// img: nodeType.imgSrc,
@ -1268,9 +1306,10 @@ export default {
height: calc(100% - 55px);
}
.input-item{
.input-item {
margin-top: 8px;
.input-select{
.input-select {
margin-top: 8px;
}
}

View File

@ -26,237 +26,7 @@ export default {
},
data() {
return {
graphData: {
'nodes': [{
'id': 'a72f9f56-d3b6-4f7b-a42f-bf9cc45e7c3c',
'x': 144.47865794573642,
'y': -12.739970930232559,
'labels': '服务器',
'table': 'test_table',
'type': 'dice-er-box',
'attrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, {
'key': 'key',
'type': 'varchar(255)',
'comment': '关键字'
}, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, {
'key': 'birthday',
'type': 'date',
'comment': '生日'
}, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, {
'key': 'country',
'type': 'varchar(255)',
'comment': '国家'
}, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, {
'key': 'jobId',
'type': 'number(3)',
'comment': '工作id'
}, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }],
'size': [55, 55],
'width': 250,
'height': 316,
'anchorPoints': [[0.5, 0], [1, 0.5], [0.5, 1], [0, 0.5]],
'appState': { 'alert': false },
'labelCfg': { 'position': 'bottom' },
'style': {
'default': {
'stroke': '#CED4D9',
'fill': 'transparent',
'shadowBlur': 10,
'shadowColor': 'rgba(13, 26, 38, 0.08)',
'lineWidth': 1,
'radius': 4,
'strokeOpacity': 0.7
}, 'selected': { 'shadowColor': '#ff240b', 'shadowBlur': 2 }, 'unselected': { 'shadowColor': '' }
},
'selectedIndex': null,
'label': '',
'appConfig': { 'ip': '', 'port': '', 'sysName': '' },
'depth': 0
}, {
'id': '933f5158-258e-44c9-8e1f-70aa701729a8',
'x': 494.37013081395366,
'y': 132.21506782945744,
'labels': '数据库',
'table': 'test_table',
'type': 'dice-er-box',
'attrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, {
'key': 'key',
'type': 'varchar(255)',
'comment': '关键字'
}, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, {
'key': 'birthday',
'type': 'date',
'comment': '生日'
}, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, {
'key': 'country',
'type': 'varchar(255)',
'comment': '国家'
}, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, {
'key': 'jobId',
'type': 'number(3)',
'comment': '工作id'
}, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }],
'size': [55, 55],
'width': 250,
'height': 316,
'anchorPoints': [[0.5, 0], [1, 0.5], [0.5, 1], [0, 0.5]],
'appState': { 'alert': false },
'labelCfg': { 'position': 'bottom' },
'style': {
'default': {
'stroke': '#CED4D9',
'fill': 'transparent',
'shadowBlur': 10,
'shadowColor': 'rgba(13, 26, 38, 0.08)',
'lineWidth': 1,
'radius': 4,
'strokeOpacity': 0.7
}, 'selected': { 'shadowColor': '#ff240b', 'shadowBlur': 2 }, 'unselected': { 'shadowColor': '' }
},
'selectedIndex': null,
'label': '',
'appConfig': { 'ip': '', 'port': '', 'sysName': '' },
'depth': 0
}], 'edges': [{
'id': 'b424996b-62cf-487c-bd7b-83210e8a6866',
'source': '933f5158-258e-44c9-8e1f-70aa701729a8',
'sourceAttrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, {
'key': 'key',
'type': 'varchar(255)',
'comment': '关键字'
}, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, {
'key': 'birthday',
'type': 'date',
'comment': '生日'
}, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, {
'key': 'country',
'type': 'varchar(255)',
'comment': '国家'
}, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, {
'key': 'jobId',
'type': 'number(3)',
'comment': '工作id'
}, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }],
'sourceAnchor': 3,
'target': '933f5158-258e-44c9-8e1f-70aa701729a8',
'type': 'top-cubic',
'style': {
'active': { 'stroke': 'rgb(95, 149, 255)', 'lineWidth': 1 },
'selected': {
'stroke': 'rgb(95, 149, 255)',
'lineWidth': 2,
'shadowColor': 'rgb(95, 149, 255)',
'shadowBlur': 10,
'text-shape': { 'fontWeight': 500 }
},
'highlight': { 'stroke': 'rgb(95, 149, 255)', 'lineWidth': 2, 'text-shape': { 'fontWeight': 500 } },
'inactive': { 'stroke': 'rgb(234, 234, 234)', 'lineWidth': 1 },
'disable': { 'stroke': 'rgb(245, 245, 245)', 'lineWidth': 1 },
'edgeStyle': {
'default': { 'stroke': '#e2e2e2', 'lineWidth': 3, 'lineAppendWidth': 10 },
'selected': { 'shadowColor': '#626262', 'shadowBlur': 3 }
},
'stroke': '#A3B1BF',
'lineWidth': 2,
'strokeOpacity': 0.92,
'lineAppendWidth': 10
},
'labelCfg': { 'position': 'center', 'autoRotate': false },
'startPoint': { 'x': 493.87013081395366, 'y': 290.21506782945744, 'anchorIndex': 3 },
'endPoint': { 'x': 493.87013081395366, 'y': 290.21506782945744, 'anchorIndex': 3 },
'targetAnchor': 3,
'targetAttrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, {
'key': 'key',
'type': 'varchar(255)',
'comment': '关键字'
}, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, {
'key': 'birthday',
'type': 'date',
'comment': '生日'
}, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, {
'key': 'country',
'type': 'varchar(255)',
'comment': '国家'
}, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, {
'key': 'jobId',
'type': 'number(3)',
'comment': '工作id'
}, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }],
'curveOffset': [-20, 20],
'curvePosition': [0.5, 0.5],
'depth': 0
}, {
'id': '22cefcd1-5d30-4a89-a061-81d7c111a99d',
'source': '933f5158-258e-44c9-8e1f-70aa701729a8',
'sourceAttrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, {
'key': 'key',
'type': 'varchar(255)',
'comment': '关键字'
}, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, {
'key': 'birthday',
'type': 'date',
'comment': '生日'
}, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, {
'key': 'country',
'type': 'varchar(255)',
'comment': '国家'
}, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, {
'key': 'jobId',
'type': 'number(3)',
'comment': '工作id'
}, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }],
'sourceAnchor': 3,
'target': 'a72f9f56-d3b6-4f7b-a42f-bf9cc45e7c3c',
'type': 'top-cubic',
'style': {
'active': { 'stroke': 'rgb(95, 149, 255)', 'lineWidth': 1 },
'selected': {
'stroke': 'rgb(95, 149, 255)',
'lineWidth': 2,
'shadowColor': 'rgb(95, 149, 255)',
'shadowBlur': 10,
'text-shape': { 'fontWeight': 500 }
},
'highlight': { 'stroke': 'rgb(95, 149, 255)', 'lineWidth': 2, 'text-shape': { 'fontWeight': 500 } },
'inactive': { 'stroke': 'rgb(234, 234, 234)', 'lineWidth': 1 },
'disable': { 'stroke': 'rgb(245, 245, 245)', 'lineWidth': 1 },
'edgeStyle': {
'default': { 'stroke': '#e2e2e2', 'lineWidth': 3, 'lineAppendWidth': 10 },
'selected': { 'shadowColor': '#626262', 'shadowBlur': 3 }
},
'stroke': '#A3B1BF',
'lineWidth': 2,
'strokeOpacity': 0.92,
'lineAppendWidth': 10
},
'labelCfg': { 'position': 'center', 'autoRotate': false },
'startPoint': { 'x': 493.87013081395366, 'y': 290.21506782945744, 'anchorIndex': 3 },
'endPoint': { 'x': 394.9786579457364, 'y': 145.26002906976743, 'anchorIndex': 1 },
'curveOffset': [-20, 20],
'curvePosition': [0.5, 0.5],
'targetAnchor': 1,
'targetAttrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, {
'key': 'key',
'type': 'varchar(255)',
'comment': '关键字'
}, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, {
'key': 'birthday',
'type': 'date',
'comment': '生日'
}, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, {
'key': 'country',
'type': 'varchar(255)',
'comment': '国家'
}, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, {
'key': 'jobId',
'type': 'number(3)',
'comment': '工作id'
}, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }],
'depth': 0,
'label': '',
'appConfig': { 'associated': 'left', 'tableComment': 'id', 'relComment': 'key' }
}], 'combos': []
},
graphData: {"nodes":[{"id":"305bfbdd-31cc-4028-b2b1-2f504968356d","x":304.8223042174235,"y":131.0267312661499,"label":"客户端","table":"test_table","type":"dice-er-box","attrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":0},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":0},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":0},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"size":[55,55],"width":250,"height":316,"anchorPoints":[[0.5,0],[1,0.5],[0.5,1],[0,0.5]],"appState":{"alert":false},"labelCfg":{"position":"bottom"},"style":{"default":{"stroke":"#CED4D9","fill":"transparent","shadowBlur":10,"shadowColor":"rgba(13, 26, 38, 0.08)","lineWidth":1,"radius":4,"strokeOpacity":0.7},"selected":{"shadowColor":"#ff240b","shadowBlur":2},"unselected":{"shadowColor":""}},"selectedIndex":null,"appConfig":{},"depth":0},{"id":"be9b52e5-9c2f-4e5c-990a-afbf19dcfeed","x":-94.51187075489108,"y":127.35469287559994,"label":"防火墙","table":"test_table","type":"dice-er-box","attrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":0},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":0},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":0},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"size":[55,55],"width":250,"height":316,"anchorPoints":[[0.5,0],[1,0.5],[0.5,1],[0,0.5]],"appState":{"alert":false},"labelCfg":{"position":"bottom"},"style":{"default":{"stroke":"#CED4D9","fill":"transparent","shadowBlur":10,"shadowColor":"rgba(13, 26, 38, 0.08)","lineWidth":1,"radius":4,"strokeOpacity":0.7},"selected":{"shadowColor":"#ff240b","shadowBlur":2},"unselected":{"shadowColor":""}},"selectedIndex":null,"appConfig":{},"startIndex":0,"startX":0,"depth":0}],"edges":[{"id":"8bc0249e-ee5d-4dd7-84e0-e4e32c217f2a","source":"be9b52e5-9c2f-4e5c-990a-afbf19dcfeed","sourceAttrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":1},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"sourceAnchor":1,"target":"305bfbdd-31cc-4028-b2b1-2f504968356d","type":"top-cubic","style":{"active":{"stroke":"rgb(95, 149, 255)","lineWidth":1},"selected":{"stroke":"rgb(95, 149, 255)","lineWidth":2,"shadowColor":"rgb(95, 149, 255)","shadowBlur":10,"text-shape":{"fontWeight":500}},"highlight":{"stroke":"rgb(95, 149, 255)","lineWidth":2,"text-shape":{"fontWeight":500}},"inactive":{"stroke":"rgb(234, 234, 234)","lineWidth":1},"disable":{"stroke":"rgb(245, 245, 245)","lineWidth":1},"edgeStyle":{"default":{"stroke":"#e2e2e2","lineWidth":3,"lineAppendWidth":10},"selected":{"shadowColor":"#626262","shadowBlur":3}},"stroke":"#A3B1BF","lineWidth":2,"strokeOpacity":0.92,"lineAppendWidth":10},"labelCfg":{"position":"center","autoRotate":false},"startPoint":{"x":155.98812924510892,"y":285.35469287559994,"anchorIndex":1},"endPoint":{"x":304.3223042174235,"y":289.0267312661499,"anchorIndex":3},"curveOffset":[-20,20],"curvePosition":[0.5,0.5],"targetAnchor":3,"targetAttrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":1},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"depth":0}],"combos":[]},
nodeTypeList: [
// { guid: "blue", label: "", imgSrc: require("../../assets/images/blue.svg") },
// { guid: "green", label: "绿", imgSrc: require("@/assets/images/green.svg") },