Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 7a280f14 by 史敦盼
Options

Merge branch 'sdp-v1'

2 parents 66a22725 61e8b316
Inline Side-by-side
Showing with 689 additions and 435 deletions
public/drawio/extention/js/exApp.js
const initDrawioGraph = function(that) {//一进入画布显示的图形
if(urlParams['id'] == 2) {
var mockFile = loadDiagram(urlParams['id'],'业务架构资产管理');
const file = new LocalFile(that, mockFile.data, mockFile.title, that.mode);
that.loadFile(`-2`, true, file);
}else {
const xmlData = localStorage.getItem('xmlData');
const xmlTitle = localStorage.getItem('xmlTitle');
const file = new LocalFile(that, xmlData, xmlTitle, that.mode);
that.loadFile(`-1`, true, file);
const initDrawioGraph = function (that) {
//一进入画布显示的图形
if (urlParams['id'] == 2) {
var mockFile = loadDiagram(urlParams['id'], '业务架构资产管理')
const file = new LocalFile(that, mockFile.data, mockFile.title, that.mode)
that.loadFile(`-2`, true, file)
} else {
const xmlData = localStorage.getItem('xmlData')
const xmlTitle = localStorage.getItem('xmlTitle')
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) {
if(that.editor.graph.getModel().isVertex(item)){
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) {
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]);
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)) {
} else if (that.editor.graph.getModel().isEdge(item)) {
// console.log('线条')
}else {
} else {
// console.log('其他类型')
}
}
})
}
if(e.data.type == 'backGraph') {
const xml = localStorage.getItem('xmlData');
if (e.data.type == 'backGraph') {
const xml = localStorage.getItem('xmlData')
const mockFile = {
data: xml,
title: '原始数据'
};
that.editor.setStatus('');
that.fileLoaded(null);
that.spinner.stop();
const file = new LocalFile(that, mockFile.data, mockFile.title, null);
that.loadFile(`-3`, true, file);
title: '原始数据',
}
that.editor.setStatus('')
that.fileLoaded(null)
that.spinner.stop()
const file = new LocalFile(that, mockFile.data, mockFile.title, null)
if(e.data.type == 'saveFileSignal') {
var composedXMLData = Graph.xmlDeclaration +'\n' +that.getFileData(true, null, null, null, true, true, null, null, null, true);
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(composedXMLData, "text/xml");
const mxGraphModel = xmlDoc.getElementsByTagName('diagram')[0].innerHTML;
console.log(mxGraphModel)
var graph = that.editor.graph;
var svgImage = graph.getSvg('#fff', 1, 0, true, null, true, null, null, null, null, true, 'light', 'diagram');//当前画布的预览图，svg格式
var svgToString = new XMLSerializer().serializeToString(svgImage);
var base64SvgToString = Base64.encode(svgToString);
that.loadFile(`-3`, true, file)
}
window.parent.postMessage({ type: 'saveFileSignalXml', data: { mxGraphModel, base64SvgToString } }, '*');
if (e.data.type == 'saveFileSignal') {
var composedXMLData =
Graph.xmlDeclaration +
'\n' +
that.getFileData(
true,
null,
null,
null,
true,
true,
null,
null,
null,
true,
)
var parser = new DOMParser()
var xmlDoc = parser.parseFromString(composedXMLData, 'text/xml')
const mxGraphModel = xmlDoc.getElementsByTagName('diagram')[0].innerHTML
console.log(mxGraphModel)
var graph = that.editor.graph
var svgImage = graph.getSvg(
'#fff',
1,
0,
true,
null,
true,
null,
null,
null,
null,
true,
'light',
'diagram',
) //当前画布的预览图，svg格式
var svgToString = new XMLSerializer().serializeToString(svgImage)
var base64SvgToString = Base64.encode(svgToString)
window.parent.postMessage(
{
type: 'saveFileSignalXml',
data: { mxGraphModel, base64SvgToString },
},
'*',
)
}
// console.log(that.editor.graph.getSelectionCells());
// that.editor.graph.setCellStyles('property', '属性', [cells[0]]);//设置style里面拼接属性
......@@ -73,89 +109,103 @@ const initDrawioGraph = function(that) {//一进入画布显示的图形
}
const setIcon = function (itemIcon, dicys, color) {
const item_icon = itemIcon.split("base64,")[1];
const decode_item_icon = (window.atob) ? atob(item_icon) : Base64.decode(item_icon);//svg解码，为字符串
const svgDocument = new DOMParser().parseFromString(decode_item_icon, 'text/xml');//svg字符串转标签
const svgTag = svgDocument.getElementsByTagName('svg')[0];
const width = +svgTag.getAttribute('width').split("px")[0];
const height = +svgTag.getAttribute('height').split("px")[0];
const rectTag = svgDocument.getElementsByTagName('rect')[0];
const pathTag = svgDocument.getElementsByTagName('path')[0];
const ellipseTag = svgDocument.getElementsByTagName('ellipse')[0];
if(rectTag) {
if(color) {
const item_icon = itemIcon.split('base64,')[1]
const decode_item_icon = window.atob
? atob(item_icon)
: Base64.decode(item_icon) //svg解码，为字符串
const svgDocument = new DOMParser().parseFromString(
decode_item_icon,
'text/xml',
) //svg字符串转标签
const svgTag = svgDocument.getElementsByTagName('svg')[0]
const width = +svgTag.getAttribute('width').split('px')[0]
const height = +svgTag.getAttribute('height').split('px')[0]
const rectTag = svgDocument.getElementsByTagName('rect')[0]
const pathTag = svgDocument.getElementsByTagName('path')[0]
const ellipseTag = svgDocument.getElementsByTagName('ellipse')[0]
if (rectTag) {
if (color) {
rectTag.setAttribute('fill', color)
}
}
if(pathTag) {
if(color) {
if (pathTag) {
if (color) {
pathTag.setAttribute('fill', color)
}
}
if(ellipseTag) {
if(color) {
if (ellipseTag) {
if (color) {
ellipseTag.setAttribute('fill', color)
}
}
svgTag.style.backgroundColor = 'transparent';
svgTag.style.backgroundColor = 'transparent'
// svgTag.setAttribute('a_123', 'a_123');
if(dicys && dicys.length > 0) {
dicys.forEach(function(item2) {
if (dicys && dicys.length > 0) {
dicys.forEach(function (item2) {
// svgTag.setAttribute(encodeURIComponent(item2.fieldName), encodeURIComponent(item2.chineseName));
if(item2.propertyValue) {
svgTag.setAttribute('attr_'+item2.fieldName, 'attr_'+Base64.encode(item2.propertyValue)+'&id=' + item2.propertyId);
if (item2.propertyValue) {
svgTag.setAttribute(
'attr_' + item2.fieldName,
'attr_' +
Base64.encode(item2.propertyValue) +
'&id=' +
item2.propertyId,
)
}
})
}
const svgToString = new XMLSerializer().serializeToString(svgDocument);//svg标签转化为字符串
const svgToString = new XMLSerializer().serializeToString(svgDocument) //svg标签转化为字符串
const encode_item_icon = (window.btoa)? btoa(svgToString) : Base64.encode(svgToString);//base64编码
const encode_item_icon = window.btoa
? btoa(svgToString)
: Base64.encode(svgToString) //base64编码
icon = 'data:image/svg+xml;base64,' + encode_item_icon;
icon = 'data:image/svg+xml;base64,' + encode_item_icon
return { width, height, icon };
return { width, height, icon }
}
// const svg = '<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" style="left: 1px; top: 1px; width: 32px; height: 30px; display: block; position: relative; overflow: hidden; pointer-events: none;"><g style="pointer-events: none;"><g style="pointer-events: none;"></g><g style="pointer-events: none;"><g transform="translate(0.5,0.5)" style="visibility: visible; pointer-events: none;"><path d="M 2.48 27.98 L 28.99 1.48" fill="none" stroke="white" stroke-width="9.3" stroke-miterlimit="10" visibility="hidden" style="pointer-events: none;"></path><path d="M 2.48 27.98 L 28.99 1.48" fill="none" stroke="rgb(0, 0, 0)" stroke-width="1.3" stroke-miterlimit="10" stroke-dasharray="1.59 1.59" style="pointer-events: none;"></path></g></g><g style="pointer-events: none;"></g><g style="pointer-events: none;"></g></g></svg>';
const svg = '<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" style="left: 1px; top: 1px; width: 32px; height: 30px; display: block; position: relative; overflow: hidden; pointer-events: none;"><g style="pointer-events: none;"><g style="pointer-events: none;"></g><g style="pointer-events: none;"><g transform="translate(0.5,0.5)" style="visibility: visible; pointer-events: none;"><rect x="1.6" y="7.8" width="28.8" height="14.4" fill="rgb(241, 243, 244)" stroke="rgb(0, 0, 0)" stroke-width="1.3" style="pointer-events: none;"></rect></g></g><g style="pointer-events: none;"></g><g style="pointer-events: none;"></g></g></svg>';
const encode_item_icon = window.btoa(svg);//base64编码
let svgImage= 'data:image/svg+xml;base64,'+ encode_item_icon;
// const svg = '<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" style="left: 1px; top: 1px; width: 32px; height: 30px; display: block; position: relative; overflow: hidden; pointer-events: none;"><g style="pointer-events: none;"><g style="pointer-events: none;"></g><g style="pointer-events: none;"><g transform="translate(0.5,0.5)" style="visibility: visible; pointer-events: none;"><path d="M 2.48 27.98 L 28.99 1.48" fill="none" stroke="white" stroke-width="9.3" stroke-miterlimit="10" visibility="hidden" style="pointer-events: none;"></path><path d="M 2.48 27.98 L 28.99 1.48" fill="none" stroke="rgb(0, 0, 0)" stroke-width="1.3" stroke-miterlimit="10" stroke-dasharray="1.59 1.59" style="pointer-events: none;"></path></g></g><g style="pointer-events: none;"></g><g style="pointer-events: none;"></g></g></svg>';
const svg =
'<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" style="left: 1px; top: 1px; width: 32px; height: 30px; display: block; position: relative; overflow: hidden; pointer-events: none;"><g style="pointer-events: none;"><g style="pointer-events: none;"></g><g style="pointer-events: none;"><g transform="translate(0.5,0.5)" style="visibility: visible; pointer-events: none;"><rect x="1.6" y="7.8" width="28.8" height="14.4" fill="rgb(241, 243, 244)" stroke="rgb(0, 0, 0)" stroke-width="1.3" style="pointer-events: none;"></rect></g></g><g style="pointer-events: none;"></g><g style="pointer-events: none;"></g></g></svg>'
const encode_item_icon = window.btoa(svg) //base64编码
let svgImage = 'data:image/svg+xml;base64,' + encode_item_icon
const images_ = [
const images_ = [
{
aspect: "fixed",
aspect: 'fixed',
//data: "data:image/svg+xml;base64,PHN2ZyB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeT0iMHB4IiB4PSIwcHgiIHZlcnNpb249IjEuMSI+JiN4YTsJPG1ldGFkYXRhPiYjeGE7CQlTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiYjeGE7CTwvbWV0YWRhdGE+JiN4YTsJPGc+JiN4YTsJCTxnPiYjeGE7CQkJPHBhdGggZD0iTTIxNS4zLDEwMS41bDEzLjksMjQuMWwtOTcuNSw1LjNsMjIuNSwzOWw0My41LDQuN2w4LDEzLjhsLTU3LjUsMjIuM0wxMDYuMiwyNDZsLTguMS0xNGwxNy45LTQwLjRsLTIyLTM4LjFsLTUzLjMsODEuN2wtMTMuOS0yNC4xbDM3LjgtMTA4LjVsLTM0LTU4LjhjLTYuMy0xMS0zLTI0LjgsNy41LTMwLjljMTAuNS02LDI0LjItMiwzMC41LDguOWwzMy42LDU4LjFMMjE1LjMsMTAxLjV6IE0yMTMuOCwxMTcuM2wtNC40LTcuNmwtMTEzLTIxLjZMNjAuOCwyNi4zYy0zLjgtNi42LTExLjktOS4xLTE4LTUuNnMtOCwxMS44LTQuMiwxOC40bDM2LjEsNjIuNEwzNi44LDIxMC4xbDQuNCw3LjZsNTMuMy04MS43bDMxLjgsNTUuMWwtMTcuOSw0MC40bDAuMywwLjVsMzQuNS0yOWwxLjMtMC42bDQ3LjktMTguNmwtMC40LTAuNmwtNDMuNS00LjdsLTMyLjMtNTUuOUwyMTMuOCwxMTcuM3oiIGZpbGw9IiMwMDAwMDAiLz4mI3hhOwkJPC9nPiYjeGE7CTwvZz4mI3hhOzwvc3ZnPg==",
data: svgImage,
h: 256,
title: "svg",
w: 256
}
];
// xml格式数据，压缩或者不压缩的都行
// const images_ = [
// {
// aspect: "fixed",
// xml: "tZTBUoMwEIafhisDpC30qG3Vg84404NHJ4UtZAwsExahPr0JhALWjnqQC/D9uyT7bxaHbfL2XvEye8IEpBN4SeuwrRMEfriI9M2QkyXLld+TVInEshHsxQdY6FlaiwSqWSAhShLlHMZYFBDTjHGlsJmHHVHOVy15ChdgH3N5SV9EQllPoyAc+QOINBtW9lfrXsn5EGwrqTKeYDNBbOewjUKk/ilvNyCNe4Mvfd7dFfW8MQUF/SYh6BPeuaxtbXZfdBqKVVgXCZh432G3TSYI9iWPjdro/mqWUS6tfBRSblCi6nKZ5/FDtDYcC5rwY3dpXpHCN5gowTZceZ5WdO+IiwIMN+92o6AI2qvF+mcL9eEDzIHUSYfYhIC54bJPasa2hYFrYTbp2cI2iNujkp6/NrqpH6yh35vLfjbX1CP0wXrkB5DPWAkSWGjpgESY67KHgBspUiMQfnFcn6DSfCxvUzNt7oFXInZ5XBO8khK8SM1at930ebrSf3E2WvQZdqAvTR4md2qx/3eL9es4G502+cWw3Sc=",
// h: 430,
// title: "我的图库",
// w: 360
// }
// ];
const leftCustomGraph = function(that) {//左侧自定义图形
title: 'svg',
w: 256,
},
]
// xml格式数据，压缩或者不压缩的都行
// const images_ = [
// {
// aspect: "fixed",
// xml: "tZTBUoMwEIafhisDpC30qG3Vg84404NHJ4UtZAwsExahPr0JhALWjnqQC/D9uyT7bxaHbfL2XvEye8IEpBN4SeuwrRMEfriI9M2QkyXLld+TVInEshHsxQdY6FlaiwSqWSAhShLlHMZYFBDTjHGlsJmHHVHOVy15ChdgH3N5SV9EQllPoyAc+QOINBtW9lfrXsn5EGwrqTKeYDNBbOewjUKk/ilvNyCNe4Mvfd7dFfW8MQUF/SYh6BPeuaxtbXZfdBqKVVgXCZh432G3TSYI9iWPjdro/mqWUS6tfBRSblCi6nKZ5/FDtDYcC5rwY3dpXpHCN5gowTZceZ5WdO+IiwIMN+92o6AI2qvF+mcL9eEDzIHUSYfYhIC54bJPasa2hYFrYTbp2cI2iNujkp6/NrqpH6yh35vLfjbX1CP0wXrkB5DPWAkSWGjpgESY67KHgBspUiMQfnFcn6DSfCxvUzNt7oFXInZ5XBO8khK8SM1at930ebrSf3E2WvQZdqAvTR4md2qx/3eL9es4G502+cWw3Sc=",
// h: 430,
// title: "我的图库",
// w: 360
// }
// ];
const leftCustomGraph = function (that) {
//左侧自定义图形
// var xml = that.createLibraryDataFromImages(images_);
// var file = new LocalLibrary(that, xml, '图库');
// that.libraryLoaded(file, images_, null, false);
// const standardGraph = JSON.parse(localStorage.getItem('standardGraph'));
// standardGraph.forEach(function(item) {
// if(item.eleDtos) {
......@@ -192,34 +242,35 @@ const leftCustomGraph = function(that) {//左侧自定义图形
// }
// })
const joinGraph_ = JSON.parse(localStorage.getItem('joinGraph'));
const joinGraph = joinGraph_.graph;
if(joinGraph_.state == 1) {
joinGraph.pop();
joinGraph.forEach(function(item) {
if(item.eleDtos) {
if(item.eleDtos.length > 0) {
const libraryName = item.arciBelongName;
let images = [];
item.eleDtos.forEach(function(item2) {
const joinGraph_ = JSON.parse(localStorage.getItem('joinGraph'))
const joinGraph = joinGraph_.graph
if (joinGraph_.state == 1) {
// 标准图元
joinGraph.pop()
joinGraph.forEach(function (item, index) {
if (item.eleDtos) {
if (item.eleDtos.length > 0) {
const libraryName = item.arciBelongName
let images = []
item.eleDtos.forEach(function (item2) {
images.unshift({
aspect: "fixed",
aspect: 'fixed',
xml: item2.iconName,
h: 41,
title: item2.eleName,
w: 71
w: 71,
})
})
var xml = that.createLibraryDataFromImages(images);
var file = new LocalLibrary(that, xml, libraryName);
that.libraryLoaded(file, images, null, false);
}else {
var xml = that.createLibraryDataFromImages(images)
var file = new LocalLibrary(that, xml, libraryName)
that.libraryLoaded(file, images, null, false)
} else {
}
}
})
}else {
} else {
// joinGraph.forEach(item => {
// item.eleDtos.forEach(item2 => {
// if(item2.eleType == '1') {
......@@ -231,21 +282,36 @@ const leftCustomGraph = function(that) {//左侧自定义图形
}
//二次开发，创建时不必先保存文件至本地，定义Dialogs.js文件里面的createTemporaryFile函数
const createTemporaryFile = function() {
App.prototype.createTemporaryFile = function(title, data, libs, mode, done, replace, folderId, tempFile, clibs) {
data = (data != null) ? data : this.emptyDiagramXml;
this.fileCreated(new LocalFile(this, data, title, false), libs, replace, done, clibs);
const createTemporaryFile = function () {
App.prototype.createTemporaryFile = function (
title,
data,
libs,
mode,
done,
replace,
folderId,
tempFile,
clibs,
) {
data = data != null ? data : this.emptyDiagramXml
this.fileCreated(
new LocalFile(this, data, title, false),
libs,
replace,
done,
clibs,
)
}
}
const setGraphDefault = function(that) {
that.toggleCompactMode(false);//二次开发，默认折叠
that.toggleShapesPanel(true);//二次开发，默认全屏，显示左侧图形面板
that.toggleFormatPanel(true);//二次开发，默认全屏，显示右侧样式和属性面板
const setGraphDefault = function (that) {
that.toggleCompactMode(false) //二次开发，默认折叠
that.toggleShapesPanel(true) //二次开发，默认全屏，显示左侧图形面板
that.toggleFormatPanel(true) //二次开发，默认全屏，显示右侧样式和属性面板
}
//设置画布只能预览
const setGraphOnlyView = function(graph) {
const setGraphOnlyView = function (graph) {
// graph.selectAll(null, true);
// graph.getModel().beginUpdate();
// var cells = graph.getSelectionCells();
......@@ -259,9 +325,6 @@ const setGraphOnlyView = function(graph) {
// graph.setCellStyles('locked', 1, cells);
// graph.setCellStyles('connectable', value, cells);
// graph.getModel().endUpdate();
// graph.setEnabled(false);
// graph.setCellsEditable(false);
// graph.setTooltips(false);
......@@ -274,11 +337,10 @@ const setGraphOnlyView = function(graph) {
// return 'pointer';
// }
// };
}
var exToolbar = function (toolbarContainer) {//版本发布按钮
var exToolbar = function (toolbarContainer) {
//版本发布按钮
// this.toggleElement = document.createElement('a');
// this.toggleElement.setAttribute('title', '版本发布');
// this.toggleElement.style.position = 'absolute';
......@@ -295,27 +357,20 @@ var exToolbar = function (toolbarContainer) {//版本发布按钮
// this.toggleElement.style.marginRight = '100px';
// this.toggleElement.style.cursor = 'pointer';
// this.toggleElement.style.color = 'rgb(13,134,127)';
// this.toggleElement.style.backgroundPosition = '50% 50%';
// this.toggleElement.style.backgroundRepeat = 'no-repeat';
// // Prevents focus
// mxEvent.addListener(this.toggleElement, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown',
// mxUtils.bind(this, function (evt) {
// evt.preventDefault();
// }));
// // Toggles compact mode
// mxEvent.addListener(this.toggleElement, 'click', mxUtils.bind(this, function (evt) {
// window.parent.postMessage({ type: 'saveVersion' }, '*');
// }));
// if (Editor.currentTheme != 'atlas') {
// toolbarContainer.appendChild(this.toggleElement);
// }
// // Enable compact mode for small screens except for Firefox where the height is wrong
// if (!mxClient.IS_FF && screen.height <= 740 && typeof this.toggleElement.click !== 'undefined') {
// window.setTimeout(mxUtils.bind(this, function () {
......@@ -324,8 +379,8 @@ var exToolbar = function (toolbarContainer) {//版本发布按钮
// }
}
var backGraph = function (that, toolbarContainer) {//返回上级图形按钮
var backGraph = function (that, toolbarContainer) {
//返回上级图形按钮
// this.toggleElement = document.createElement('a');
// this.toggleElement.setAttribute('title', '返回上级图形');
// this.toggleElement.style.position = 'absolute';
......@@ -342,13 +397,10 @@ var backGraph = function (that, toolbarContainer) {//返回上级图形按钮
// this.toggleElement.style.marginRight = '100px';
// this.toggleElement.style.cursor = 'pointer';
// this.toggleElement.style.color = 'rgb(13,134,127)';
// this.toggleElement.style.backgroundPosition = '50% 50%';
// this.toggleElement.style.backgroundRepeat = 'no-repeat';
// // Toggles compact mode
// mxEvent.addListener(this.toggleElement, 'click', mxUtils.bind(this, function (evt) {
// console.log('上级图形');
// const xml = localStorage.getItem('xmlData');
// const mockFile = {
......@@ -359,11 +411,8 @@ var backGraph = function (that, toolbarContainer) {//返回上级图形按钮
// that.fileLoaded(null);
// that.spinner.stop();
// const file = new LocalFile(that, mockFile.data, mockFile.title, null);
// that.loadFile(`-3`, true, file);
// }));
// if (Editor.currentTheme != 'atlas') {
// toolbarContainer.appendChild(this.toggleElement);
// }
......
src/views/archi-view-manage/index.vue
......@@ -10,16 +10,33 @@
:props="{ children: 'subList', label: 'viewName', id: 'viewId' }"
:default-expanded-keys="treeDefaultExpand"
:current-node-key="currentNodekey"
ref="tree">
ref="tree"
>
</el-tree>
<div class="right_container">
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="暂存" name="暂存">
<div class="card_container">
<div class="card_body">
<el-card class="card_item" v-for="item in zanCun" :key="item.metaModelId">
<img class="card_image" v-if="item.metaModelSvg_" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" />
<img class="card_image" v-else @click="to_current_details(item)" src="@/assets/meta-model-list/default_img.png" alt="" />
<el-card
class="card_item"
v-for="item in zanCun"
:key="item.metaModelId"
>
<img
class="card_image"
v-if="item.metaModelSvg_"
@click="to_current_details(item)"
:src="item.metaModelSvg_"
alt=""
/>
<img
class="card_image"
v-else
@click="to_current_details(item)"
src="@/assets/meta-model-list/default_img.png"
alt=""
/>
<div class="card_info">
<div class="card_title">
<i class="el-icon-location"></i>
......@@ -30,28 +47,49 @@
</div>
</div>
</el-card>
<div v-if="viewId" class="add_container" @click="open_dialog('暂存')">
<div
v-if="viewId"
class="add_container"
@click="open_dialog('暂存')"
>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<el-pagination
background
@size-change="val => handleSizeChange(val, '暂存')"
@current-change="val => handleCurrentChange(val, '暂存')"
@size-change="(val) => handleSizeChange(val, '暂存')"
@current-change="(val) => handleCurrentChange(val, '暂存')"
:current-page="pager2.current"
:page-sizes="pager2.sizes"
:page-size="pager2.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pager2.total">
:total="pager2.total"
>
</el-pagination>
</el-tab-pane>
<el-tab-pane label="停用" name="停用">
<div class="card_container">
<div class="card_body">
<el-card class="card_item" v-for="item in tingYong" :key="item.metaModelId">
<img class="card_image" v-if="item.metaModelSvg_" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" />
<img class="card_image" v-else @click="to_current_details(item)" src="@/assets/meta-model-list/default_img.png" alt="" />
<el-card
class="card_item"
v-for="item in tingYong"
:key="item.metaModelId"
>
<img
class="card_image"
v-if="item.metaModelSvg_"
@click="to_current_details(item)"
:src="item.metaModelSvg_"
alt=""
/>
<img
class="card_image"
v-else
@click="to_current_details(item)"
src="@/assets/meta-model-list/default_img.png"
alt=""
/>
<div class="card_info">
<div class="card_title">
<i class="el-icon-location"></i>
......@@ -62,28 +100,49 @@
</div>
</div>
</el-card>
<div v-if="viewId" class="add_container" @click="open_dialog('停用')">
<div
v-if="viewId"
class="add_container"
@click="open_dialog('停用')"
>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<el-pagination
background
@size-change="val => handleSizeChange(val, '停用')"
@current-change="val => handleCurrentChange(val, '停用')"
@size-change="(val) => handleSizeChange(val, '停用')"
@current-change="(val) => handleCurrentChange(val, '停用')"
:current-page="pager3.current"
:page-sizes="pager3.sizes"
:page-size="pager3.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pager3.total">
:total="pager3.total"
>
</el-pagination>
</el-tab-pane>
<el-tab-pane label="发布" name="发布">
<div class="card_container">
<div class="card_body">
<el-card class="card_item" v-for="item in yiFaBu" :key="item.metaModelId">
<img class="card_image" v-if="item.metaModelSvg_" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" />
<img class="card_image" v-else @click="to_current_details(item)" src="@/assets/meta-model-list/default_img.png" alt="" />
<el-card
class="card_item"
v-for="item in yiFaBu"
:key="item.metaModelId"
>
<img
class="card_image"
v-if="item.metaModelSvg_"
@click="to_current_details(item)"
:src="item.metaModelSvg_"
alt=""
/>
<img
class="card_image"
v-else
@click="to_current_details(item)"
src="@/assets/meta-model-list/default_img.png"
alt=""
/>
<div class="card_info">
<div class="card_title">
<i class="el-icon-location"></i>
......@@ -94,20 +153,25 @@
</div> -->
</div>
</el-card>
<div v-if="viewId" class="add_container" @click="open_dialog('发布')">
<div
v-if="viewId"
class="add_container"
@click="open_dialog('发布')"
>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<el-pagination
background
@size-change="val => handleSizeChange(val, '发布')"
@current-change="val => handleCurrentChange(val, '发布')"
@size-change="(val) => handleSizeChange(val, '发布')"
@current-change="(val) => handleCurrentChange(val, '发布')"
:current-page="pager1.current"
:page-sizes="pager1.sizes"
:page-size="pager1.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pager1.total">
:total="pager1.total"
>
</el-pagination>
</el-tab-pane>
</el-tabs>
......@@ -116,11 +180,16 @@
title="新建架构视图"
:visible.sync="add_dialog"
:center="false"
width="40%">
width="40%"
>
<div class="add_dialog_content">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item label="版本名称" prop="name">
<el-input v-no-backslash v-model="ruleForm.name" maxlength="100"></el-input>
<el-input
v-no-backslash
v-model="ruleForm.name"
maxlength="100"
></el-input>
</el-form-item>
</el-form>
</div>
......@@ -141,16 +210,16 @@ import {
queryArchiViewManageCardDetails,
getDrawioLeftCommonGraph,
getDrawioLeftStandardGraph,
queryArchiGraph
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
import GraphGallery from '@/components/graphGallery.vue';
queryArchiGraph,
} from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
import $ from 'jquery'
import GraphGallery from '@/components/graphGallery.vue'
export default {
name: 'ArchiViewManage',
components: {
GraphGallery
GraphGallery,
},
data() {
return {
......@@ -159,8 +228,8 @@ export default {
{
viewId: 0,
viewName: '架构视图管理',
subList: []
}
subList: [],
},
],
treeDefaultExpand: [],
currentNodekey: null,
......@@ -169,19 +238,19 @@ export default {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 0 //总条数
total: 0, //总条数
},
pager2: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 0 //总条数
total: 0, //总条数
},
pager3: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 0 //总条数
total: 0, //总条数
},
viewId: null,
yiFaBu: [],
......@@ -192,261 +261,317 @@ export default {
name: '',
},
rules: {
name: [
{ required: true, message: '请输入版本名称', trigger: 'blur' },
],
name: [{ required: true, message: '请输入版本名称', trigger: 'blur' }],
},
addStatus: null,
graphGroup: null,
archiType: null,
};
}
},
mounted(){
this.getData();
mounted() {
this.getData()
},
methods: {
queryDrawioGraph(id) {//查询画布左侧常规图形
queryDrawioGraph(id) {
//查询画布左侧常规图形
const params = {
metaModelId: id
metaModelId: id,
}
return new Promise((resolve, reject) => {
getDrawioLeftCommonGraph(params).then(res => {
if(res.code == 200) {
resolve(res.data);
}else {
getDrawioLeftCommonGraph(params).then((res) => {
if (res.code == 200) {
resolve(res.data)
} else {
Message({
type: 'error',
message: res.msg
});
reject(res.msg);
message: res.msg,
})
reject(res.msg)
}
})
});
})
},
queryDrawioGraph2(id) {//查询画布左侧标准图形
queryDrawioGraph2(id) {
//查询画布左侧标准图形
const params = {
metaModelId: id
metaModelId: id,
}
return new Promise((resolve, reject) => {
getDrawioLeftStandardGraph(params).then(res => {
if(res.code == 200) {
resolve(res.data);
}else {
getDrawioLeftStandardGraph(params).then((res) => {
if (res.code == 200) {
resolve(res.data)
} else {
Message({
type: 'error',
message: res.msg
});
reject(res.msg);
message: res.msg,
})
reject(res.msg)
}
})
});
})
},
deleteItem(item) {//删除
deleteItem(item) {
//删除
MessageBox.confirm('确定删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning'
}).then(() => {
type: 'warning',
})
.then(() => {
const params = {
ids: [item.viewDetailsId],
}
deleteArchiViewManage(params).then(res => {
if(res.code == 200) {
this.get_list1();
this.get_list2();
this.get_list3();
deleteArchiViewManage(params).then((res) => {
if (res.code == 200) {
this.get_list1()
this.get_list2()
this.get_list3()
Message({
type: 'success',
message: '删除成功!',
});
}else {
})
} else {
Message({
type: 'error',
message: res.msg
});
message: res.msg,
})
}
})
}).catch(() => {
})
.catch(() => {
Message({
type: 'info',
message: '已取消'
});
});
message: '已取消',
})
})
},
open_dialog(status) {//打开新增对话框
this.addStatus = status;
this.add_dialog = true;
open_dialog(status) {
//打开新增对话框
// this.addStatus = status;
// this.add_dialog = true;
let state
switch (status) {
case '暂存':
state = 2
break
case '停用':
state = 0
break
case '发布':
state = 1
break
}
const params = {
viewId: this.viewId,
state,
}
addArchiViewManage(params).then((res) => {
if (res.code == 200) {
this.to_current_details(res.data)
} else {
Message({
type: 'error',
message: res.msg,
})
}
})
},
ok() {//弹框点击确定
this.$refs.ruleForm.validate(valid => {
if(valid) {
let state;
switch(this.addStatus){
ok() {
//弹框点击确定
this.$refs.ruleForm.validate((valid) => {
if (valid) {
let state
switch (this.addStatus) {
case '暂存':
state = 2;
break;
state = 2
break
case '停用':
state = 0;
break;
state = 0
break
case '发布':
state = 1;
break;
state = 1
break
}
const params = {
version: this.ruleForm.name,
viewId: this.viewId,
state: state
};
addArchiViewManage(params).then(res => {
if(res.code == 200) {
this.add_dialog = false;
this.get_list1();
this.get_list2();
this.get_list3();
state: state,
}
addArchiViewManage(params).then((res) => {
if (res.code == 200) {
this.add_dialog = false
this.get_list1()
this.get_list2()
this.get_list3()
Message({
type: 'success',
message: '新增成功!'
});
}else {
message: '新增成功!',
})
} else {
Message({
type: 'error',
message: res.msg
});
message: res.msg,
})
}
})
} else {
console.log('error submit!!');
return false;
console.log('error submit!!')
return false
}
});
})
},
// 每页条数改变
handleSizeChange(val, status) {
switch(status){
switch (status) {
case '发布':
this.pager1.current = 1;
this.pager1.size = val;
this.get_list1();
break;
this.pager1.current = 1
this.pager1.size = val
this.get_list1()
break
case '暂存':
this.pager2.current = 1;
this.pager2.size = val;
this.get_list2();
break;
this.pager2.current = 1
this.pager2.size = val
this.get_list2()
break
case '停用':
this.pager3.current = 1;
this.pager3.size = val;
this.get_list3();
break;
this.pager3.current = 1
this.pager3.size = val
this.get_list3()
break
}
},
//当前页码改变
handleCurrentChange(val, status) {
switch(status){
switch (status) {
case '发布':
this.pager1.current = val;
this.get_list1();
break;
this.pager1.current = val
this.get_list1()
break
case '暂存':
this.pager2.current = val;
this.get_list2();
break;
this.pager2.current = val
this.get_list2()
break
case '停用':
this.pager3.current = val;
this.get_list3();
break;
this.pager3.current = val
this.get_list3()
break
}
},
get_list1(){//获取已发布数据
get_list1() {
//获取已发布数据
const params = {
current: this.pager1.current,
pageSize: this.pager1.size,
viewId: this.viewId,
state: 1
state: 1,
}
getArchiViewManageDetail(params).then(res => {
if(res.code == 200) {
res.data.records.map(item => {
if(item.metaModelSvg) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
}else {
item['metaModelSvg_'] = null;
getArchiViewManageDetail(params).then((res) => {
if (res.code == 200) {
res.data.records.map((item) => {
if (item.metaModelSvg) {
item['metaModelSvg_'] =
'data:image/svg+xml;base64,' + item.metaModelSvg
} else {
item['metaModelSvg_'] = null
}
});
this.yiFaBu = res.data.records;
this.pager1.current = res.data.current;
this.pager1.total = res.data.total;
})
this.yiFaBu = res.data.records
this.pager1.current = res.data.current
this.pager1.total = res.data.total
}
})
},
get_list2(){//获取暂存数据
get_list2() {
//获取暂存数据
const params = {
current: this.pager2.current,
pageSize: this.pager2.size,
viewId: this.viewId,
state: 2
}
getArchiViewManageDetail(params).then(res => {
if(res.code == 200) {
res.data.records.map(item => {
if(item.metaModelSvg) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
}else {
item['metaModelSvg_'] = null;
state: 2,
}
getArchiViewManageDetail(params).then((res) => {
if (res.code == 200) {
res.data.records.map((item) => {
if (item.metaModelSvg) {
item['metaModelSvg_'] =
'data:image/svg+xml;base64,' + item.metaModelSvg
} else {
item['metaModelSvg_'] = null
}
});
this.zanCun = res.data.records;
this.pager2.current = res.data.current;
this.pager2.total = res.data.total;
})
this.zanCun = res.data.records
this.pager2.current = res.data.current
this.pager2.total = res.data.total
}
})
},
get_list3(){//获取停用数据
get_list3() {
//获取停用数据
const params = {
current: this.pager3.current,
pageSize: this.pager3.size,
viewId: this.viewId,
state: 0
}
getArchiViewManageDetail(params).then(res => {
if(res.code == 200) {
res.data.records.map(item => {
if(item.metaModelSvg) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
}else {
item['metaModelSvg_'] = null;
state: 0,
}
getArchiViewManageDetail(params).then((res) => {
if (res.code == 200) {
res.data.records.map((item) => {
if (item.metaModelSvg) {
item['metaModelSvg_'] =
'data:image/svg+xml;base64,' + item.metaModelSvg
} else {
item['metaModelSvg_'] = null
}
});
})
this.tingYong = res.data.records
this.pager3.current = res.data.current;
this.pager3.total = res.data.total;
this.pager3.current = res.data.current
this.pager3.total = res.data.total
}
})
},
to_current_details(item) {//跳转到详情
to_current_details(item) {
//跳转到详情
const params = {
viewDetailsId: item.viewDetailsId
viewDetailsId: item.viewDetailsId,
}
queryArchiViewManageCardDetails(params).then(res => {
if(res.code == 200) {
const xmlData = res.data.metaModelData;
const xmlTitle = res.data.version;
const id = res.data.viewDetailsId;
queryArchiViewManageCardDetails(params).then((res) => {
if (res.code == 200) {
const xmlData = res.data.metaModelData
const xmlTitle = res.data.version
const id = res.data.viewDetailsId
localStorage.setItem('xmlData', xmlData);
localStorage.setItem('xmlTitle', xmlTitle);
Promise.all([ this.queryDrawioGraph(id), this.queryDrawioGraph2(id), this.getArchiGraph() ]).then(res2 => {
localStorage.setItem('commonGraph', JSON.stringify({ show: true, graph: res2[0].dataEle }));
localStorage.setItem('standardGraph', JSON.stringify({ show: true, graph: res2[1].dataEle }));
localStorage.setItem('joinGraph', JSON.stringify({ state: 2, graph: res2[2].dataEle }));
this.$router.push( `/main/archiViewManageDetails?id=${id}&info=${this.graphGroup}&viewId=${this.viewId}&assetConstant=${this.archiType}`, () => {}, () => {} );
});
}
});
localStorage.setItem('xmlData', xmlData)
localStorage.setItem('xmlTitle', xmlTitle)
Promise.all([
this.queryDrawioGraph(id),
this.queryDrawioGraph2(id),
this.getArchiGraph(),
]).then((res2) => {
localStorage.setItem(
'commonGraph',
JSON.stringify({ show: true, graph: res2[0].dataEle }),
)
localStorage.setItem(
'standardGraph',
JSON.stringify({ show: true, graph: res2[1].dataEle }),
)
localStorage.setItem(
'joinGraph',
JSON.stringify({ state: 2, graph: res2[2].dataEle }),
)
this.$router.push(
`/main/archiViewManageDetails?id=${id}&info=${this.graphGroup}&viewId=${this.viewId}&assetConstant=${this.archiType}`,
() => {},
() => {},
)
})
}
})
},
getArchiGraph() {//查询综合图
getArchiGraph() {
//查询综合图
return new Promise((resolve, reject) => {
const params = {
archiAssetState: 2,
......@@ -455,191 +580,199 @@ export default {
state: 1,
archiBelongId: this.graphGroup,
archiType: this.archiType,
archiViewId: this.viewId
archiViewId: this.viewId,
}
queryArchiGraph(params).then(res => {
if(res.code == 200) {
resolve(res.data);
}else {
queryArchiGraph(params).then((res) => {
if (res.code == 200) {
resolve(res.data)
} else {
Message({
type: 'error',
message: res.msg
});
reject(res.msg);
message: res.msg,
})
reject(res.msg)
}
})
})
},
treeClick(data, node, e) {//树点击的时候
if(!data.subList) {
this.graphGroup = node.parent.data.viewId;
this.archiType = node.parent.data.archiType;
this.viewId = data.viewId;
this.pager1.current = 1;
this.pager2.current = 1;
this.pager3.current = 1;
this.get_list1();
this.get_list2();
this.get_list3();
}else {
this.viewId = null;
this.yiFaBu = [];
this.zanCun = [];
this.tingYong = [];
this.pager1.total = 0;
this.pager2.total = 0;
this.pager3.total = 0;
treeClick(data, node, e) {
//树点击的时候
if (!data.subList) {
this.graphGroup = node.parent.data.viewId
this.archiType = node.parent.data.archiType
this.viewId = data.viewId
this.pager1.current = 1
this.pager2.current = 1
this.pager3.current = 1
this.get_list1()
this.get_list2()
this.get_list3()
} else {
this.viewId = null
this.yiFaBu = []
this.zanCun = []
this.tingYong = []
this.pager1.total = 0
this.pager2.total = 0
this.pager3.total = 0
}
},
getData() {//获取树节点内容
getData() {
//获取树节点内容
const params = {
archiStage: 1
}
getArchiViewManage(params).then(res => {
if(res.code == 200) {
this.graphGroup = res.data[0].viewId;
this.archiType = res.data[0].archiType;
this.treeData[0].subList = res.data;
this.treeDefaultExpand = [res.data[0].viewId];
this.currentNodekey = res.data[0].subList[0].viewId;
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey);
});
this.viewId = res.data[0].subList[0].viewId;
this.pager1.current = 1;
this.pager2.current = 1;
this.pager3.current = 1;
this.get_list1();
this.get_list2();
this.get_list3();
archiStage: 1,
}
getArchiViewManage(params).then((res) => {
if (res.code == 200) {
this.graphGroup = res.data[0].viewId
this.archiType = res.data[0].archiType
this.treeData[0].subList = res.data
this.treeDefaultExpand = [res.data[0].viewId]
this.currentNodekey = res.data[0].subList[0].viewId
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey)
})
this.viewId = res.data[0].subList[0].viewId
this.pager1.current = 1
this.pager2.current = 1
this.pager3.current = 1
this.get_list1()
this.get_list2()
this.get_list3()
}
}
})
},
},
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
.confirmClass {
background-color: #0d867f !important;
}
.el-message-box__content {
padding: 60px 15px 60px 15px;
}
}
</style>
<style lang="scss" scoped>
/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
background-color: #0D867F;
/deep/
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
background-color: #0d867f;
color: #fff;
}
/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content >.is-leaf{
background-color: #0D867F !important;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
}
/deep/
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content
> .is-leaf {
background-color: #0d867f !important;
}
/deep/ .el-dialog__header {
background-color: #0d867f;
text-align: left;
}
/deep/ .el-dialog__title{
}
/deep/ .el-dialog__title {
color: #fff;
}
/deep/ .el-dialog__close {
}
/deep/ .el-dialog__close {
color: #fff;
}
.el-form-item{
}
.el-form-item {
display: flex;
}
/deep/ .el-form-item__content{
}
/deep/ .el-form-item__content {
width: 80%;
}
/deep/ .is-leaf {
}
/deep/ .is-leaf {
background-color: #fff !important;
}
.greenButton{
background-color: #0D867F;
}
.greenButton {
background-color: #0d867f;
color: #fff;
}
.archiViewManage{
}
.archiViewManage {
width: 100%;
height: 100%;
display: flex;
.filter-tree{
.filter-tree {
width: 300px;
height: 100%;
overflow-y: auto;
// border: 1px solid pink;
}
.right_container{
.right_container {
width: calc(100% - 300px);
height: 100%;
// border: 1px solid blue;
.el-tabs{
.el-tabs {
height: 100%;
}
.el-tab-pane{
.el-tab-pane {
height: 100%;
position: relative;
}
.el-pagination{
.el-pagination {
position: absolute;
bottom: 5%;
left: 35%;
background-color: #fff;
}
.card_container{
.card_container {
overflow-x: hidden;
height: 100%;
overflow-y: auto;
text-align: left;
.card_body{
.card_body {
height: 2000px;
.add_container{
.add_container {
width: 350px;
height: 240px;
margin: 15px;
background-color: #F2FFFE;
background-color: #f2fffe;
cursor: pointer;
float: left;
display: flex;
justify-content: center;
align-items: center;
i{
i {
font-size: 60px;
}
}
.card_item{
.card_item {
width: 345px;
height: 240px;
margin: 15px;
background-color: #F2FFFE;
background-color: #f2fffe;
cursor: pointer;
float: left;
text-align: center;
.card_image{
.card_image {
width: 165px;
height: 127px;
}
.card_info{
.card_info {
display: flex;
align-items: center;
justify-content: space-between;
margin: 30px 0 0 0;
.card_icon{
.card_icon {
cursor: pointer;
}
}
}
}
}
/deep/ .el-tabs__content{
/deep/ .el-tabs__content {
height: calc(100% - 38px);
padding: 0;
}
.el-pagination{
.el-pagination {
margin-top: 15px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #0d867f;
}
}
}
</style>
src/views/meta-model-list/DetailLegend.vue 0 → 100644
<!--
* @Description: 元模型管理详情， 图例
* @Version: 2.0
* @Autor: pan
* @Date: 2024-04-02 17:10:55
* @LastEditors: pan
* @LastEditTime: 2024-04-02 17:44:41
-->
<template>
<div class="legend flex">
<span class="m-r-20">图例:</span>
<div class="flex-c" v-for="(item, idx) in items" :key="idx">
<span class="icon m-r-6 m-l-10" :style="{backgroundColor: item.color}"></span>
<span class="name">{{item.name}}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
name: '业务架构元素',
color: '#d2edfd'
},
{
name: '应用架构元素',
color: '#a0ce62'
},
{
name: '数据架构元素',
color: '#fbe8d0'
},
{
name: '技术架构元素',
color: '#e4d3fc'
},
{
name: '安全架构元素',
color: '#fffe55'
}
]
}
},
}
</script>
<style scoped lang="scss">
@import '@/styles/common.scss';
.legend {
border: 1px solid #333;
position: absolute;
left: 240px;
bottom: 10px;
background-color: #f5f5f5;
padding: 20px 16px;
width: calc(100% - 540px);
flex-wrap: wrap;
font-size: 12px;
.icon {
width: 24px;
height: 20px;
border-radius: 4px;
border: 1px solid #333;
}
}
</style>
src/views/meta-model-list/details.vue
......@@ -16,6 +16,7 @@
<i class="el-icon-picture"></i>
</span>
<Graph></Graph>
<DetailLegend />
</el-tab-pane>
<el-tab-pane>
<span slot="label">
......@@ -37,6 +38,7 @@
import Graph from './canvas/index.vue';
import Tables from './table/index.vue';
import Mind from './mind/index.vue';
import DetailLegend from './DetailLegend.vue'
import { MessageBox, Message } from 'element-ui';
import {
save_drawio_version,
......@@ -47,7 +49,8 @@ export default {
components: {
Graph,
Tables,
Mind
Mind,
DetailLegend
},
data() {
return {
......
src/views/meta-model-list/index.vue
......@@ -306,10 +306,11 @@ export default {
const xmlTitle = res.data.verName;
localStorage.setItem('xmlData', xmlData);
localStorage.setItem('xmlTitle', xmlTitle);
Promise.all([ this.queryDrawioGraph(item.metaModelId), this.queryDrawioGraph2(item.metaModelId) ]).then(res2 => {
localStorage.setItem('commonGraph', JSON.stringify({ show: false, graph: res2[0].dataEle }));
localStorage.setItem('standardGraph', JSON.stringify({ show: true, graph: res2[1].dataEle }));
localStorage.setItem('joinGraph', JSON.stringify({ state: 1, graph: res2[1].dataEle }));
// this.queryDrawioGraph(item.metaModelId),
Promise.all([ this.queryDrawioGraph2(item.metaModelId) ]).then(res2 => {
// localStorage.setItem('commonGraph', JSON.stringify({ show: false, graph: res2[0].dataEle }));
localStorage.setItem('standardGraph', JSON.stringify({ show: true, graph: res2[0].dataEle }));
localStorage.setItem('joinGraph', JSON.stringify({ state: 1, graph: res2[0].dataEle }));
this.$router.push( `/main/metaModelListDetails?id=${item.metaModelId}&info=${item.version}`, () => {}, () => {} );
});
}
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!