Skip to content

liangzhen / framework-tools-web

Go to a project
Commit af48f36b by liuyong
Options

修改画布

1 parent 7129ffe7
Inline Side-by-side
Showing with 305 additions and 23 deletions
public/drawio/extention/js/exApp.js
...@@ -10,8 +10,38 @@ const initDrawioGraph = function(that) {//一进入画布显示的图形 ...@@ -10,8 +10,38 @@ const initDrawioGraph = function(that) {//一进入画布显示的图形
const file = new LocalFile(that, xmlData, xmlTitle, that.mode); const file = new LocalFile(that, xmlData, xmlTitle, that.mode);
that.loadFile(`-1`, true, file); that.loadFile(`-1`, true, file);
} }
window.onmessage = e => {//监听vue页面的图形选择窗口给drawio画布传的属性传递
if(e.data.type == 'propertyReceive') {
const receiveData = e.data.data;
let eaLevel = receiveData.eaLevel;
let eleBelongId = receiveData.eleBelongId;
let dicys = JSON.stringify(receiveData.dicys);
that.editor.graph.getSelectionCells().forEach(item => {
if(item.value.length > 0) {
if(that.editor.graph.getModel().isVertex(item)){
// console.log('封闭图形');
that.editor.graph.setCellStyles('attr', dicys, [item]);
that.editor.graph.setCellStyles('eleId', eleBelongId, [item]);
that.editor.graph.setCellStyles('eaLevel', eaLevel, [item]);
// console.log(item.style);
}else if (that.editor.graph.getModel().isEdge(item)) {
// console.log('线条')
}else {
// console.log('其他类型')
}
}
})
}
// console.log(that.editor.graph.getSelectionCells());
// that.editor.graph.setCellStyles('property', '属性', [cells[0]]);//设置style里面拼接属性
// var style = that.editor.graph.getCurrentCellStyle(cells[0]);
// console.log(cells);
// console.log(style);
}
} }
const setIcon = function (itemIcon, dicys, color) { const setIcon = function (itemIcon, dicys, color) {
......
public/drawio/extention/js/exMenus.js
...@@ -12,21 +12,24 @@ function lookCurrentDetailsMenuAction(editorUi, graph) {//下钻数据按钮点 ...@@ -12,21 +12,24 @@ function lookCurrentDetailsMenuAction(editorUi, graph) {//下钻数据按钮点
if (!graph.isSelectionEmpty()) if (!graph.isSelectionEmpty())
{ {
console.log('下钻数据') console.log('下钻数据');
const mockFile = { var cells = graph.getSelectionCells();
data: `<mxGraphModel dx="1177" dy="690" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0"> if(cells.length == 1) {
<root> const mockFile = {
<mxCell id="0"/> data: `<mxGraphModel dx="1177" dy="690" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<mxCell id="1" parent="0"/> <root>
</root> <mxCell id="0"/>
</mxGraphModel>`, <mxCell id="1" parent="0"/>
title: '下钻数据' </root>
</mxGraphModel>`,
title: '下钻数据'
}
editorUi.editor.setStatus('');
editorUi.fileLoaded(null);
editorUi.spinner.stop();
const file = new LocalFile(editorUi, mockFile.data, mockFile.title, null);
editorUi.fileLoaded(file);
} }
editorUi.editor.setStatus('');
editorUi.fileLoaded(null);
editorUi.spinner.stop();
const file = new LocalFile(editorUi, mockFile.data, mockFile.title, null);
editorUi.fileLoaded(file);
} }
}); });
} }
...@@ -44,10 +47,13 @@ function propertyTransferMenuAction(editorUi, graph) {//属性传递按钮点击 ...@@ -44,10 +47,13 @@ function propertyTransferMenuAction(editorUi, graph) {//属性传递按钮点击
if (!graph.isSelectionEmpty()) if (!graph.isSelectionEmpty())
{ {
var cells = graph.getSelectionCells(); var cells = graph.getSelectionCells();
window.parent.postMessage({ type: 'propertyTransfer' } , '*');
// graph.setCellStyles('property', '属性', [cells[0]]);//设置style里面拼接属性 // graph.setCellStyles('property', '属性', [cells[0]]);//设置style里面拼接属性
// var style = graph.getCurrentCellStyle(cells[0]); // var style = graph.getCurrentCellStyle(cells[0]);
// console.log(cells); // console.log(cells);
// console.log(style); // console.log(style);
} }
......
public/drawio/js/diagramly/App.js
...@@ -186,7 +186,6 @@ App = function(editor, container, lightbox) ...@@ -186,7 +186,6 @@ App = function(editor, container, lightbox)
const that = this; const that = this;
setGraphDefault(that); setGraphDefault(that);
// leftCustomGraph(that); // leftCustomGraph(that);
}; };
/** /**
......
public/drawio/resources/dia_zh.txt
...@@ -485,7 +485,7 @@ links=连接 ...@@ -485,7 +485,7 @@ links=连接
loading=加载中 loading=加载中
lockUnlock=锁定 / 解锁 lockUnlock=锁定 / 解锁
lookCurrentDetails=下钻数据 lookCurrentDetails=下钻数据
propertyTransfer=属性传递 propertyTransfer=属性关联
loggedOut=注销 loggedOut=注销
logIn=登录 logIn=登录
loveIt=我爱 {1} loveIt=我爱 {1}
......
src/components/drawio.vue
<template> <template>
<iframe <iframe
class="drawio_show" id="drawioGraph"
name="content_frame" name="content_frame"
:src="'/drawio/index.html?id='+id" :src="'/drawio/index.html?id='+id"
frameborder=0 frameborder=0
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
} }
</script> </script>
<style scoped> <style scoped>
.drawio_show{ #drawioGraph{
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
......
src/views/archi-view-manage/canvas/index.vue
<template> <template>
<div class="canvas"> <div class="canvas">
<Drawio :initGraphId="routerId"></Drawio> <Drawio :initGraphId="routerId"></Drawio>
<el-dialog
title="属性关联"
:visible.sync="graph_dialog"
:center="false"
:before-close="closeGraphDialog"
:close-on-click-modal="false"
width="60%">
<div style="display: flex;align-items: center;justify-content: flex-end;margin-bottom: 10px;">
<div style="margin-right: 10px;">元素层级</div>
<el-select clearable placeholder="请选择" v-model="eleLevel">
<el-option label="1" :value="1"></el-option>
<el-option label="2" :value="2"></el-option>
<el-option label="3" :value="3"></el-option>
<el-option label="4" :value="4"></el-option>
<el-option label="5" :value="5"></el-option>
</el-select>
</div>
<div style="height: 400px;display: flex;align-items: center;">
<div style="width: 20%;height: 100%;border-left: 1px solid #ccc;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;overflow: auto;text-align: center;">
<div :style="{ 'cursor': 'pointer', 'padding': '4px', 'background-color': nameIndex == index ? 'rgb(13,134,127)' : '#fff', 'color': nameIndex == index ? '#fff' : '#000' }"
v-for="(item, index) in search_select1"
:key="item.arciBelongId"
@click="showCurrentGraph(item.arciBelongName, index)">
{{ item.arciBelongName }}
</div>
</div>
<div style="width: 80%;height: 100%;border: 1px solid #ccc;overflow: auto;text-align: left;">
<div :style="{ 'display': 'inline-block','margin': '10px', 'border': graphIndex == index ? '2px solid #0D867F' : 'none','padding': '8px', 'border-radius': '6px' }"
v-for="(item, index) in graphList" :key="item.elementId">
<img @click="clickGraph(index)" class="tu_biao_icon" :src="item.icon" alt="" />
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="confirm">确定</el-button>
<el-button @click="closeGraphDialog">取消</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
...@@ -10,7 +49,7 @@ ...@@ -10,7 +49,7 @@
import { import {
saveArchiViewManageCardDetails, saveArchiViewManageCardDetails,
saveVersionArchiViewManageCardDetails, saveVersionArchiViewManageCardDetails,
save_drawio_attribute save_drawio_attribute,
} from '@/api/index.js'; } from '@/api/index.js';
export default { export default {
name: 'Canvas', name: 'Canvas',
...@@ -19,10 +58,18 @@ ...@@ -19,10 +58,18 @@
}, },
data() { data() {
return { return {
routerId: null routerId: null,
graph_dialog: false,
nameIndex: 0,
graphIndex: -1,
search_select1: [],
graphList: [],
eleLevel: null,
}; };
}, },
mounted(){ mounted(){
this.get_search_select1();
const id = window.location.href.split("id=")[1].split("&")[0]; const id = window.location.href.split("id=")[1].split("&")[0];
this.routerId = { this.routerId = {
id, id,
...@@ -66,9 +113,66 @@ ...@@ -66,9 +113,66 @@
if(e.data.type == 'saveProperty'){ if(e.data.type == 'saveProperty'){
this.saveAttribute(e.data.data); this.saveAttribute(e.data.data);
} }
if(e.data.type == 'propertyTransfer'){
// console.log(JSON.parse(e.data.data))
this.graph_dialog = true;
this.showCurrentGraph(this.search_select1[0].arciBelongName, 0);
}
} }
}, },
methods: { methods: {
showCurrentGraph(name, idx) {//图形选择窗口的文字点击
this.nameIndex = idx;
this.graphIndex = -1;
const res = this.search_select1.find(item => item.arciBelongName == name);
this.graphList = res.eleDtos;
},
get_search_select1() {//查询架构归属下拉框值
const leftGraph = JSON.parse(localStorage.getItem("leftGraph"));
this.search_select1 = leftGraph;
},
closeGraphDialog() {//图形选择窗口的取消
this.graphIndex = 0;
this.nameIndex = 0;
this.graph_dialog = false;
},
clickGraph(idx) {////图形选择窗口的图形点击
this.graphIndex = idx;
},
confirm() {//图形选择窗口的确定
if(this.graphIndex == -1) {
Message({
type: 'error',
message: '请选择一种图形'
});
return;
}
const currentItem = this.graphList[this.graphIndex];
let attr_ = [];
if(currentItem.dicys && currentItem.dicys.length > 0) {
currentItem.dicys.forEach(res => {
if(res.fieldName) {
attr_.push(
{
name: res.fieldName,
value: res.propertyValue,
id: res.propertyId
}
)
}
})
}else {
attr_ = [];
}
let propertyReceiveData = {
eaLevel: currentItem.eaLevel,
eleBelongId: currentItem.eleBelongId ? currentItem.eleBelongId : null,
dicys: attr_
}
document.getElementById("drawioGraph").contentWindow.postMessage({ type: 'propertyReceive', data: propertyReceiveData } , '*');
this.graph_dialog = false;
},
saveAttribute(data) {//保存属性 saveAttribute(data) {//保存属性
save_drawio_attribute(data).then(res => { save_drawio_attribute(data).then(res => {
if(res.code == 200) { if(res.code == 200) {
...@@ -138,4 +242,23 @@ ...@@ -138,4 +242,23 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.greenButton{
background-color: #0D867F;
color: #fff;
}
.tu_biao_icon{
max-width: 80px;
max-height: 40px;
cursor: pointer;
}
</style> </style>
src/views/meta-model-list/canvas/index.vue
<template> <template>
<div class="canvas"> <div class="canvas">
<Drawio :initGraphId="routerId"></Drawio> <Drawio :initGraphId="routerId"></Drawio>
<el-dialog
title="属性关联"
:visible.sync="graph_dialog"
:center="false"
:before-close="closeGraphDialog"
:close-on-click-modal="false"
width="60%">
<div style="display: flex;align-items: center;justify-content: flex-end;margin-bottom: 10px;">
<div style="margin-right: 10px;">元素层级</div>
<el-select clearable placeholder="请选择" v-model="eleLevel">
<el-option label="1" :value="1"></el-option>
<el-option label="2" :value="2"></el-option>
<el-option label="3" :value="3"></el-option>
<el-option label="4" :value="4"></el-option>
<el-option label="5" :value="5"></el-option>
</el-select>
</div>
<div style="height: 400px;display: flex;align-items: center;">
<div style="width: 20%;height: 100%;border-left: 1px solid #ccc;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;overflow: auto;text-align: center;">
<div :style="{ 'cursor': 'pointer', 'padding': '4px', 'background-color': nameIndex == index ? 'rgb(13,134,127)' : '#fff', 'color': nameIndex == index ? '#fff' : '#000' }"
v-for="(item, index) in search_select1"
:key="item.arciBelongId"
@click="showCurrentGraph(item.arciBelongName, index)">
{{ item.arciBelongName }}
</div>
</div>
<div style="width: 80%;height: 100%;border: 1px solid #ccc;overflow: auto;text-align: left;">
<div :style="{ 'display': 'inline-block','margin': '10px', 'border': graphIndex == index ? '2px solid #0D867F' : 'none','padding': '8px', 'border-radius': '6px' }"
v-for="(item, index) in graphList" :key="item.elementId">
<img @click="clickGraph(index)" class="tu_biao_icon" :src="item.icon" alt="" />
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="confirm">确定</el-button>
<el-button @click="closeGraphDialog">取消</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
...@@ -10,7 +49,7 @@ ...@@ -10,7 +49,7 @@
import { import {
save_drawio_xml_and_svg, save_drawio_xml_and_svg,
save_drawio_version, save_drawio_version,
save_drawio_attribute save_drawio_attribute,
} from '@/api/index.js'; } from '@/api/index.js';
export default { export default {
name: 'Canvas', name: 'Canvas',
...@@ -19,10 +58,18 @@ ...@@ -19,10 +58,18 @@
}, },
data() { data() {
return { return {
routerId: null routerId: null,
graph_dialog: false,
nameIndex: 0,
graphIndex: -1,
search_select1: [],
graphList: [],
eleLevel: null,
}; };
}, },
mounted(){ mounted(){
this.get_search_select1();
const id = window.location.href.split("id=")[1].split("&")[0]; const id = window.location.href.split("id=")[1].split("&")[0];
const version = window.location.href.split("id=")[1].split("&")[1].split("=")[1]; const version = window.location.href.split("id=")[1].split("&")[1].split("=")[1];
this.routerId = { this.routerId = {
...@@ -46,6 +93,7 @@ ...@@ -46,6 +93,7 @@
}); });
}); });
} }
if(e.data.type == 'saveVersion'){ if(e.data.type == 'saveVersion'){
MessageBox.confirm('确定发布版本?', '提示', { MessageBox.confirm('确定发布版本?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
...@@ -62,12 +110,69 @@ ...@@ -62,12 +110,69 @@
}); });
}); });
} }
if(e.data.type == 'saveProperty'){ if(e.data.type == 'saveProperty'){
this.saveAttribute(e.data.data); this.saveAttribute(e.data.data);
} }
if(e.data.type == 'propertyTransfer'){
this.graph_dialog = true;
this.showCurrentGraph(this.search_select1[0].arciBelongName, 0);
}
} }
}, },
methods: { methods: {
showCurrentGraph(name, idx) {//图形选择窗口的文字点击
this.nameIndex = idx;
this.graphIndex = -1;
const res = this.search_select1.find(item => item.arciBelongName == name);
this.graphList = res.eleDtos;
},
get_search_select1() {//查询架构归属下拉框值
const leftGraph = JSON.parse(localStorage.getItem("leftGraph"));
this.search_select1 = leftGraph;
},
closeGraphDialog() {//图形选择窗口的取消
this.graphIndex = 0;
this.nameIndex = 0;
this.graph_dialog = false;
},
clickGraph(idx) {////图形选择窗口的图形点击
this.graphIndex = idx;
},
confirm() {//图形选择窗口的确定
if(this.graphIndex == -1) {
Message({
type: 'error',
message: '请选择一种图形'
});
return;
}
const currentItem = this.graphList[this.graphIndex];
let attr_ = [];
if(currentItem.dicys && currentItem.dicys.length > 0) {
currentItem.dicys.forEach(res => {
if(res.fieldName) {
attr_.push(
{
name: res.fieldName,
value: res.propertyValue,
id: res.propertyId
}
)
}
})
}else {
attr_ = [];
}
let propertyReceiveData = {
eaLevel: currentItem.eaLevel,
eleBelongId: currentItem.eleBelongId ? currentItem.eleBelongId : null,
dicys: attr_
}
document.getElementById("drawioGraph").contentWindow.postMessage({ type: 'propertyReceive', data: propertyReceiveData } , '*');
this.graph_dialog = false;
},
saveAttribute(data) {//保存属性 saveAttribute(data) {//保存属性
save_drawio_attribute(data).then(res => { save_drawio_attribute(data).then(res => {
if(res.code == 200) { if(res.code == 200) {
...@@ -143,4 +248,23 @@ ...@@ -143,4 +248,23 @@
padding-left: 20px; padding-left: 20px;
padding-bottom: 20px; */ padding-bottom: 20px; */
} }
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.greenButton{
background-color: #0D867F;
color: #fff;
}
.tu_biao_icon{
max-width: 80px;
max-height: 40px;
cursor: pointer;
}
</style> </style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!