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) {//一进入画布显示的图形
const file = new LocalFile(that, xmlData, xmlTitle, that.mode);
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) {
......
public/drawio/extention/js/exMenus.js
......@@ -12,21 +12,24 @@ function lookCurrentDetailsMenuAction(editorUi, graph) {//下钻数据按钮点
if (!graph.isSelectionEmpty())
{
console.log('下钻数据')
const mockFile = {
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">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
</root>
</mxGraphModel>`,
title: '下钻数据'
console.log('下钻数据');
var cells = graph.getSelectionCells();
if(cells.length == 1) {
const mockFile = {
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">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
</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) {//属性传递按钮点击
if (!graph.isSelectionEmpty())
{
var cells = graph.getSelectionCells();
window.parent.postMessage({ type: 'propertyTransfer' } , '*');
// graph.setCellStyles('property', '属性', [cells[0]]);//设置style里面拼接属性
// var style = graph.getCurrentCellStyle(cells[0]);
// console.log(cells);
// console.log(style);
}
......
public/drawio/js/diagramly/App.js
......@@ -186,7 +186,6 @@ App = function(editor, container, lightbox)
const that = this;
setGraphDefault(that);
// leftCustomGraph(that);
};
/**
......
public/drawio/resources/dia_zh.txt
......@@ -485,7 +485,7 @@ links=连接
loading=加载中
lockUnlock=锁定 / 解锁
lookCurrentDetails=下钻数据
propertyTransfer=属性传递
propertyTransfer=属性关联
loggedOut=注销
logIn=登录
loveIt=我爱 {1}
......
src/components/drawio.vue
<template>
<iframe
class="drawio_show"
id="drawioGraph"
name="content_frame"
:src="'/drawio/index.html?id='+id"
frameborder=0
......@@ -31,7 +31,7 @@
}
</script>
<style scoped>
.drawio_show{
#drawioGraph{
height: 100%;
width: 100%;
}
......
src/views/archi-view-manage/canvas/index.vue
<template>
<div class="canvas">
<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>
</template>
......@@ -10,7 +49,7 @@
import {
saveArchiViewManageCardDetails,
saveVersionArchiViewManageCardDetails,
save_drawio_attribute
save_drawio_attribute,
} from '@/api/index.js';
export default {
name: 'Canvas',
......@@ -19,10 +58,18 @@
},
data() {
return {
routerId: null
routerId: null,
graph_dialog: false,
nameIndex: 0,
graphIndex: -1,
search_select1: [],
graphList: [],
eleLevel: null,
};
},
mounted(){
this.get_search_select1();
const id = window.location.href.split("id=")[1].split("&")[0];
this.routerId = {
id,
......@@ -66,9 +113,66 @@
if(e.data.type == 'saveProperty'){
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: {
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) {//保存属性
save_drawio_attribute(data).then(res => {
if(res.code == 200) {
......@@ -138,4 +242,23 @@
width: 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>
src/views/meta-model-list/canvas/index.vue
<template>
<div class="canvas">
<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>
</template>
......@@ -10,7 +49,7 @@
import {
save_drawio_xml_and_svg,
save_drawio_version,
save_drawio_attribute
save_drawio_attribute,
} from '@/api/index.js';
export default {
name: 'Canvas',
......@@ -19,10 +58,18 @@
},
data() {
return {
routerId: null
routerId: null,
graph_dialog: false,
nameIndex: 0,
graphIndex: -1,
search_select1: [],
graphList: [],
eleLevel: null,
};
},
mounted(){
this.get_search_select1();
const id = window.location.href.split("id=")[1].split("&")[0];
const version = window.location.href.split("id=")[1].split("&")[1].split("=")[1];
this.routerId = {
......@@ -46,6 +93,7 @@
});
});
}
if(e.data.type == 'saveVersion'){
MessageBox.confirm('确定发布版本?', '提示', {
confirmButtonText: '确定',
......@@ -62,12 +110,69 @@
});
});
}
if(e.data.type == 'saveProperty'){
this.saveAttribute(e.data.data);
}
if(e.data.type == 'propertyTransfer'){
this.graph_dialog = true;
this.showCurrentGraph(this.search_select1[0].arciBelongName, 0);
}
}
},
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) {//保存属性
save_drawio_attribute(data).then(res => {
if(res.code == 200) {
......@@ -143,4 +248,23 @@
padding-left: 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>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!