Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 3eea2603 by liuyong
Options

修改左侧菜单加载

1 parent ba09454c
Inline Side-by-side
Showing with 175 additions and 73 deletions
public/drawio/js/diagramly/App.js
......@@ -188,15 +188,15 @@ App = function(editor, container, lightbox)
this.toggleShapesPanel(true);//二次开发，默认全屏，显示左侧图形面板
this.toggleFormatPanel(true);//二次开发，默认全屏，显示右侧样式和属性面板
const images_ = [
{
aspect: "fixed",
data: "data:image/svg+xml;base64,PHN2ZyB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeT0iMHB4IiB4PSIwcHgiIHZlcnNpb249IjEuMSI+JiN4YTsJPG1ldGFkYXRhPiYjeGE7CQlTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiYjeGE7CTwvbWV0YWRhdGE+JiN4YTsJPGc+JiN4YTsJCTxnPiYjeGE7CQkJPHBhdGggZD0iTTIxNS4zLDEwMS41bDEzLjksMjQuMWwtOTcuNSw1LjNsMjIuNSwzOWw0My41LDQuN2w4LDEzLjhsLTU3LjUsMjIuM0wxMDYuMiwyNDZsLTguMS0xNGwxNy45LTQwLjRsLTIyLTM4LjFsLTUzLjMsODEuN2wtMTMuOS0yNC4xbDM3LjgtMTA4LjVsLTM0LTU4LjhjLTYuMy0xMS0zLTI0LjgsNy41LTMwLjljMTAuNS02LDI0LjItMiwzMC41LDguOWwzMy42LDU4LjFMMjE1LjMsMTAxLjV6IE0yMTMuOCwxMTcuM2wtNC40LTcuNmwtMTEzLTIxLjZMNjAuOCwyNi4zYy0zLjgtNi42LTExLjktOS4xLTE4LTUuNnMtOCwxMS44LTQuMiwxOC40bDM2LjEsNjIuNEwzNi44LDIxMC4xbDQuNCw3LjZsNTMuMy04MS43bDMxLjgsNTUuMWwtMTcuOSw0MC40bDAuMywwLjVsMzQuNS0yOWwxLjMtMC42bDQ3LjktMTguNmwtMC40LTAuNmwtNDMuNS00LjdsLTMyLjMtNTUuOUwyMTMuOCwxMTcuM3oiIGZpbGw9IiMwMDAwMDAiLz4mI3hhOwkJPC9nPiYjeGE7CTwvZz4mI3hhOzwvc3ZnPg==",
h: 256,
title: "svg",
w: 256
}
];
// const images_ = [
// {
// aspect: "fixed",
// data: "data:image/svg+xml;base64,PHN2ZyB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeT0iMHB4IiB4PSIwcHgiIHZlcnNpb249IjEuMSI+JiN4YTsJPG1ldGFkYXRhPiYjeGE7CQlTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiYjeGE7CTwvbWV0YWRhdGE+JiN4YTsJPGc+JiN4YTsJCTxnPiYjeGE7CQkJPHBhdGggZD0iTTIxNS4zLDEwMS41bDEzLjksMjQuMWwtOTcuNSw1LjNsMjIuNSwzOWw0My41LDQuN2w4LDEzLjhsLTU3LjUsMjIuM0wxMDYuMiwyNDZsLTguMS0xNGwxNy45LTQwLjRsLTIyLTM4LjFsLTUzLjMsODEuN2wtMTMuOS0yNC4xbDM3LjgtMTA4LjVsLTM0LTU4LjhjLTYuMy0xMS0zLTI0LjgsNy41LTMwLjljMTAuNS02LDI0LjItMiwzMC41LDguOWwzMy42LDU4LjFMMjE1LjMsMTAxLjV6IE0yMTMuOCwxMTcuM2wtNC40LTcuNmwtMTEzLTIxLjZMNjAuOCwyNi4zYy0zLjgtNi42LTExLjktOS4xLTE4LTUuNnMtOCwxMS44LTQuMiwxOC40bDM2LjEsNjIuNEwzNi44LDIxMC4xbDQuNCw3LjZsNTMuMy04MS43bDMxLjgsNTUuMWwtMTcuOSw0MC40bDAuMywwLjVsMzQuNS0yOWwxLjMtMC42bDQ3LjktMTguNmwtMC40LTAuNmwtNDMuNS00LjdsLTMyLjMtNTUuOUwyMTMuOCwxMTcuM3oiIGZpbGw9IiMwMDAwMDAiLz4mI3hhOwkJPC9nPiYjeGE7CTwvZz4mI3hhOzwvc3ZnPg==",
// h: 256,
// title: "svg",
// w: 256
// }
// ];
//xml格式数据，压缩或者不压缩的都行
// const images_ = [
// {
......@@ -207,8 +207,85 @@ App = function(editor, container, lightbox)
// w: 360
// }
// ];
$.ajax({
method: "post",
url: 'http://43.143.211.42:7003/ynMol/gtArcAllList',
data: JSON.stringify({
metaModelId: urlParams['id']
}),
contentType: "application/json",
success: result => {
const yeWuLiuCheng = result.data.filter(item => item.elementName == '业务流程');
const yeWuZhiNeng = result.data.filter(item => item.elementName == '业务职能');
const yeWuYu = result.data.filter(item => item.elementName == '业务域');
const yeWuYu1 = result.data.filter(item => item.elementName == '业务域1');
let images_yeWuLiuCheng = [];
let images_yeWuZhiNeng = [];
let images_yeWuYu = [];
let images_yeWuYu1 = [];
yeWuLiuCheng.forEach(item => {
if(item.icon) {
if(item.icon.includes('data')) {
images_yeWuLiuCheng.push({
aspect: "fixed",
data: item.icon,
h: 256,
title: item.iconRel,
w: 256
})
}
}
})
yeWuZhiNeng.forEach(item => {
if(item.icon) {
if(item.icon.includes('data')) {
images_yeWuZhiNeng.push({
aspect: "fixed",
data: item.icon,
h: 256,
title: item.iconRel,
w: 256
})
}
}
})
yeWuYu.forEach(item => {
if(item.icon) {
if(item.icon.includes('data')) {
images_yeWuYu.push({
aspect: "fixed",
data: item.icon,
h: 256,
title: item.iconRel,
w: 256
})
}
}
})
yeWuYu1.forEach(item => {
if(item.icon) {
if(item.icon.includes('data')) {
images_yeWuYu1.push({
aspect: "fixed",
data: item.icon,
h: 256,
title: item.iconRel,
w: 256
})
}
}
})
this.saveLibrary('业务流程', images_yeWuLiuCheng, null, 'ajax', undefined, undefined, undefined);
this.saveLibrary('业务职能', images_yeWuZhiNeng, null, 'ajax', undefined, undefined, undefined);
this.saveLibrary('业务域', images_yeWuYu, null, 'ajax', undefined, undefined, undefined);
this.saveLibrary('业务域1', images_yeWuYu1, null, 'ajax', undefined, undefined, undefined);
},
error: error => {
this.saveLibrary('测试.xml', images_, null, 'ajax', undefined, undefined, undefined);
}
});
// var ui = this.editorUi;
// var editor = ui.editor;
......@@ -3775,13 +3852,11 @@ App.prototype.showSplash = function(force)
}else {
$.ajax({
method: "post",
url: 'http://43.143.211.42:7003/ynMol/getByMetaModelId',
data: {
url: 'http://43.143.211.42:7003/ynMol/gBMMId',
data: JSON.stringify({
metaModelId: urlParams['id']
},
// dataType: "xml",
// contentType: "application/xml",
// crossDomain: true,
}),
contentType: "application/json",
success: result => {
// console.log(result)
const xmlData = result.data.metaModelData;
......
public/drawio/js/diagramly/Menus.js
......@@ -4713,7 +4713,11 @@
window.parent.postMessage({ type: 'saveData', data: { mxGraphModel, base64SvgToString } }, '*');
// this.editorUi.editor.graph.destroy();
// this.editorUi.editor.graph.getModel().beginUpdate();
// this.editorUi.editor.graph.getModel().endUpdate();
// console.log(this.editorUi.editor.graph.destroy)
// this.addMenuItems(menu, ['customSubMenu1', 'customSubMenu2']);
// editorUi.menus.addSubmenu(['customSubMenu1', 'customSubMenu2'], menu, parent);
// menu.addSeparator(parent);
......
public/drawio/js/grapheditor/Format.js
......@@ -1551,7 +1551,7 @@ AttributePanel.prototype.init = function()//二次开发，属性面板内容
{
var graph = this.editorUi.editor.graph;
const cell = graph.getSelectionCell();
// console.log('属性面板');
console.log(graph.getModel().getValue(cell));
// var ss = this.editorUi.getSelectionState();
......@@ -1574,26 +1574,26 @@ AttributePanel.prototype.init = function()//二次开发，属性面板内容
label_name_container.appendChild(name);
this.container.appendChild(label_name_container);
//新增属性按钮--------------------------------------------------------------------------
const button_container = document.createElement('div');
button_container.style.cssText = 'padding: 8px;display: flex;justify-content: space-between;';
const add_button = document.createElement('button');
add_button.innerHTML = '新增属性';
add_button.style.cssText = 'padding: 4px;text-align: center;cursor: pointer;background-color: rgb(228,228,228);color: rgb(97, 97, 97);';
add_button.addEventListener('click', () => {
this.addListPanel('', '');
});
button_container.appendChild(add_button);
//新增属性按钮--------------------------------------------------------------------------
// const add_button = document.createElement('button');
// add_button.innerHTML = '新增属性';
// add_button.style.cssText = 'padding: 4px;text-align: center;cursor: pointer;background-color: rgb(228,228,228);color: rgb(97, 97, 97);';
// add_button.addEventListener('click', () => {
// this.addListPanel('', '');
// });
// button_container.appendChild(add_button);
//保存属性按钮--------------------------------------------------------------------------
const save_button = document.createElement('button');
save_button.innerHTML = '保存属性';
save_button.style.cssText = 'padding: 4px;text-align: center;cursor: pointer;background-color: rgb(228,228,228);color: rgb(97, 97, 97);';
save_button.addEventListener('click', () => {
console.log('保存属性')
let currentNode = graph.getModel().getValue(cell);//获取没有属性的节点，返回的是文字
if(typeof currentNode == 'string') {//此节点没有属性
var doc = mxUtils.createXmlDocument();
......@@ -1660,36 +1660,37 @@ AttributePanel.prototype.addListPanel = function(attrName_, attrValue_)
//属性名--------------------------------------------------------------------
const item_left_container = document.createElement('div');
item_left_container.style.cssText = 'display: flex;justify-content: space-between;';
item_left_container.style.cssText = 'display: flex;justify-content: center;width: 30%;';
const item_left_span = document.createElement('span');
item_left_span.innerHTML = '属性名: ';
const item_left_input = document.createElement('input');
item_left_input.type = "text";
item_left_input.value = attrName_;
item_left_input.style.cssText = 'width: 50px;margin-left: 5px;';
item_left_input.className = 'attrName';
item_left_input.oninput = function (e) {
// console.log('属性名')
// console.log(e)
// console.log(attrName_)
}
item_left_span.innerHTML = attrName_ + ': ';
// const item_left_input = document.createElement('input');
// item_left_input.type = "text";
// item_left_input.value = attrName_;
// item_left_input.style.cssText = 'width: 50px;margin-left: 5px;';
// item_left_input.className = 'attrName';
// item_left_input.setAttribute('readonly', true);
// item_left_input.oninput = function (e) {
// // console.log('属性名')
// // console.log(e)
// // console.log(attrName_)
// }
item_left_container.appendChild(item_left_span);
item_left_container.appendChild(item_left_input);
// item_left_container.appendChild(item_left_input);
//属性值--------------------------------------------------------------------
const item_right_container = document.createElement('div');
item_right_container.style.cssText = 'display: flex;justify-content: space-between;';
item_right_container.style.cssText = 'margin-right: 15px;;margin-left: 5px;display: flex;justify-content: space-between;width: 70%;';
const item_right_span = document.createElement('span');
item_right_span.innerHTML = '属性值: ';
// const item_right_span = document.createElement('span');
// item_right_span.innerHTML = '属性值: ';
const item_right_input = document.createElement('input');
item_right_input.type = "text";
item_right_input.value = attrValue_;
item_right_input.style.cssText = 'width: 50px;margin-left: 5px;';
item_right_input.style.cssText = 'width: 100%;';
item_right_input.className = 'attrValue';
item_right_input.oninput = function (e) {
// console.log('属性值')
......@@ -1697,23 +1698,24 @@ AttributePanel.prototype.addListPanel = function(attrName_, attrValue_)
// console.log(attrValue_)
}
var removeAttr = document.createElement('a');
removeAttr.style.margin = '0px 8px 0 8px';
removeAttr.style.width = '9px';
removeAttr.style.height = '9px';
removeAttr.style.cursor = 'pointer';
var img = mxUtils.createImage(Dialog.prototype.closeImage);
img.style.height = '9px';
img.style.fontSize = '9px';
removeAttr.setAttribute('title', mxResources.get('delete'));
removeAttr.appendChild(img);
removeAttr.onclick = function() {
$(this).parents(".add_item_container").remove();
// console.log($(this).parents(".add_item_container"))
}
item_right_container.appendChild(item_right_span);
// var removeAttr = document.createElement('a');
// removeAttr.style.margin = '0px 8px 0 8px';
// removeAttr.style.width = '9px';
// removeAttr.style.height = '9px';
// removeAttr.style.cursor = 'pointer';
// var img = mxUtils.createImage(Dialog.prototype.closeImage);
// img.style.height = '9px';
// img.style.fontSize = '9px';
// removeAttr.setAttribute('title', mxResources.get('delete'));
// removeAttr.appendChild(img);
// removeAttr.onclick = function() {
// $(this).parents(".add_item_container").remove();
// // console.log($(this).parents(".add_item_container"))
// }
// item_right_container.appendChild(item_right_span);
item_right_container.appendChild(item_right_input);
item_right_container.appendChild(removeAttr);
// item_right_container.appendChild(removeAttr);
add_item_container.appendChild(item_left_container);
......
src/assets/菱形.svg
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than draw.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="151px" height="91px" viewBox="-0.5 -0.5 151 91" content="&lt;mxfile host=&quot;localhost&quot; modified=&quot;2023-12-06T10:01:11.833Z&quot; agent=&quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36&quot; etag=&quot;YfGvWuLyFXa1aStUZ0TI&quot; version=&quot;@DRAWIO-VERSION@&quot; type=&quot;device&quot;&gt;&lt;diagram name=&quot;第 1 页&quot; id=&quot;T3SLXpASqCSmrz4Ut6n_&quot;&gt;jZJNT4QwEIZ/DUcToCrLUXDRizHKwXMDs7SxUCzDAv56iwxf2WyyJ4ZnvjrvjMPisn8xvBZvOgfl+G7eO+zZ8X2PBaH9jGSYSHDPJlAYmVPQClL5CwRdoq3ModkFotYKZb2Hma4qyHDHuDG624edtNp3rXkBFyDNuLqkXzJHMdGDH6z8FWQh5s7eIw1c8jmYJmkEz3W3QezosNhojZNV9jGoUbxZlykvueJdHmagwlsSsP3A8OA+JVECP+/fmerPzR1VOXPV0sD0WBxmBQSWylqew6JOSIS05tno6uzCLeNNPel+kj3YVpGdsx79stGf1sOrYqwUUSMwCP3VCbxFF3tQoEtAM9gQSmCMtKVbYgFJ262b8R6Iic1WQmKcjqFYSq96WYMkm3/X1fz7NgfOjn8=&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><path d="M 0 45 L 75 1.7 L 150 45 L 75 88.3 L 0 45 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="151px" height="91px" viewBox="-0.5 -0.5 151 91" content="&lt;mxfile host=&quot;localhost&quot; modified=&quot;2023-12-06T10:01:11.833Z&quot; agent=&quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36&quot; etag=&quot;YfGvWuLyFXa1aStUZ0TI&quot; version=&quot;@DRAWIO-VERSION@&quot; type=&quot;device&quot;&gt;&lt;diagram name=&quot;第 1 页&quot; id=&quot;T3SLXpASqCSmrz4Ut6n_&quot;&gt;jZJNT4QwEIZ/DUcToCrLUXDRizHKwXMDs7SxUCzDAv56iwxf2WyyJ4ZnvjrvjMPisn8xvBZvOgfl+G7eO+zZ8X2PBaH9jGSYSHDPJlAYmVPQClL5CwRdoq3ModkFotYKZb2Hma4qyHDHuDG624edtNp3rXkBFyDNuLqkXzJHMdGDH6z8FWQh5s7eIw1c8jmYJmkEz3W3QezosNhojZNV9jGoUbxZlykvueJdHmagwlsSsP3A8OA+JVECP+/fmerPzR1VOXPV0sD0WBxmBQSWylqew6JOSIS05tno6uzCLeNNPel+kj3YVpGdsx79stGf1sOrYqwUUSMwCP3VCbxFF3tQoEtAM9gQSmCMtKVbYgFJ262b8R6Iic1WQmKcjqFYSq96WYMkm3/X1fz7NgfOjn8=&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><path d="M 0 45 L 75 1.7 L 150 45 L 75 88.3 L 0 45 Z" fill="red" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g></svg>
\ No newline at end of file
src/views/archi-ele-list/index.vue
......@@ -153,22 +153,22 @@
</el-radio>
</div>
<div class="dialog_form_item3_content1">
<el-radio v-model="radio2" label="red">
<el-radio v-model="radio2" label="#FF3B30">
<img class="tu_biao_icon2" src="@/assets/正方形1.svg" alt="" />
</el-radio>
<el-radio v-model="radio2" label="yellow">
<el-radio v-model="radio2" label="#FF9500">
<img class="tu_biao_icon2" src="@/assets/正方形2.svg" alt="" />
</el-radio>
<el-radio v-model="radio2" label="green">
<el-radio v-model="radio2" label="#4CD964">
<img class="tu_biao_icon2" src="@/assets/正方形3.svg" alt="" />
</el-radio>
<el-radio v-model="radio2" label="lightyellow">
<el-radio v-model="radio2" label="#FFCC00">
<img class="tu_biao_icon2" src="@/assets/正方形4.svg" alt="" />
</el-radio>
<el-radio v-model="radio2" label="blue">
<el-radio v-model="radio2" label="#007AFF">
<img class="tu_biao_icon2" src="@/assets/正方形5.svg" alt="" />
</el-radio>
<el-radio v-model="radio2" label="purple">
<el-radio v-model="radio2" label="#5856D6">
<img class="tu_biao_icon2" src="@/assets/正方形6.svg" alt="" />
</el-radio>
</div>
......@@ -216,7 +216,7 @@ export default {
dialog_let3: '',
dialog_let4: '',
radio: 'cfx',
radio2: 'red',
radio2: '#FF3B30',
add_select_item: '',
add_select_item2: '',
search_select1: [],
......@@ -408,7 +408,7 @@ export default {
this.dialog_let3 = '';
this.dialog_let4 = '';
this.radio = 'cfx';
this.radio2 = 'red';
this.radio2 = '#FF3B30';
},
add_select1() {//新增架构层次
const params = {
......@@ -476,6 +476,7 @@ export default {
},
// 每页条数改变
handleSizeChange(val) {
this.pager.current = 1;
this.pager.size = val;
this.get_table();
},
......@@ -502,6 +503,26 @@ export default {
this.pager.total = result.data.total;
this.pager.size = result.data.size;
if(result.data.records.length > 0) {
result.data.records.map(item => {
const item_icon = item.icon.split("base64,")[1];
const decode_item_icon = window.atob(item_icon);//svg解码，为字符串
const svgDocument = new DOMParser().parseFromString(decode_item_icon, 'text/xml');//svg字符串转标签
const path = svgDocument.getElementsByTagName('path')[0];
const rect = svgDocument.getElementsByTagName('rect')[0];
const ellipse = svgDocument.getElementsByTagName('ellipse')[0];
if(path) {
path.setAttribute('fill', item.color);
}
if(rect) {
rect.setAttribute('fill', item.color);
}
if(ellipse) {
ellipse.setAttribute('fill', item.color);
}
const svgToString = new XMLSerializer().serializeToString(svgDocument);//svg标签转化为字符串
const encode_item_icon = window.btoa(svgToString);//base64编码
item.icon = 'data:image/svg+xml;base64,'+ encode_item_icon;
})
Promise.all([ this.get_dialog_select1(), this.get_dialog_select2() ]).then(res2 => {
this.dialog_select1 = res2[0];
this.search_select1 = res2[1];
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!