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 1241 additions and 988 deletions
public/drawio/extention/js/exApp.js
const initDrawioGraph = function(that) {//一进入画布显示的图形 const initDrawioGraph = function (that) {
if(urlParams['id'] == 2) { //一进入画布显示的图形
var mockFile = loadDiagram(urlParams['id'],'业务架构资产管理'); if (urlParams['id'] == 2) {
const file = new LocalFile(that, mockFile.data, mockFile.title, that.mode); var mockFile = loadDiagram(urlParams['id'], '业务架构资产管理')
const file = new LocalFile(that, mockFile.data, mockFile.title, that.mode)
that.loadFile(`-2`, true, file);
}else { that.loadFile(`-2`, true, file)
const xmlData = localStorage.getItem('xmlData'); } else {
const xmlTitle = localStorage.getItem('xmlTitle'); 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 file = new LocalFile(that, xmlData, xmlTitle, that.mode)
} that.loadFile(`-1`, true, file)
}
window.onmessage = e => {//监听vue页面的图形选择窗口给drawio画布传的属性传递
if(e.data.type == 'propertyReceive') { window.onmessage = (e) => {
const receiveData = e.data.data; //监听vue页面的图形选择窗口给drawio画布传的属性传递
let eaLevel = receiveData.eaLevel; if (e.data.type == 'propertyReceive') {
let eleBelongId = receiveData.eleBelongId; const receiveData = e.data.data
let dicys = JSON.stringify(receiveData.dicys); let eaLevel = receiveData.eaLevel
that.editor.graph.getSelectionCells().forEach(item => { let eleBelongId = receiveData.eleBelongId
if(item.value) { let dicys = JSON.stringify(receiveData.dicys)
if(that.editor.graph.getModel().isVertex(item)){ that.editor.graph.getSelectionCells().forEach((item) => {
// console.log('封闭图形'); if (item.value) {
that.editor.graph.setCellStyles('attr', dicys, [item]); if (that.editor.graph.getModel().isVertex(item)) {
that.editor.graph.setCellStyles('eleId', eleBelongId, [item]); // console.log('封闭图形');
that.editor.graph.setCellStyles('eaLevel', eaLevel, [item]); that.editor.graph.setCellStyles('attr', dicys, [item])
// console.log(item.style); that.editor.graph.setCellStyles('eleId', eleBelongId, [item])
}else if (that.editor.graph.getModel().isEdge(item)) { that.editor.graph.setCellStyles('eaLevel', eaLevel, [item])
// console.log('线条') // console.log(item.style);
}else { } else if (that.editor.graph.getModel().isEdge(item)) {
// console.log('其他类型') // console.log('线条')
} } else {
} // console.log('其他类型')
}) }
} }
})
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);
}
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里面拼接属性
// var style = that.editor.graph.getCurrentCellStyle(cells[0]);
// console.log(cells);
// console.log(style);
} }
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)
}
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里面拼接属性
// 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) {
const item_icon = itemIcon.split("base64,")[1]; const item_icon = itemIcon.split('base64,')[1]
const decode_item_icon = (window.atob) ? atob(item_icon) : Base64.decode(item_icon);//svg解码，为字符串 const decode_item_icon = window.atob
const svgDocument = new DOMParser().parseFromString(decode_item_icon, 'text/xml');//svg字符串转标签 ? atob(item_icon)
const svgTag = svgDocument.getElementsByTagName('svg')[0]; : Base64.decode(item_icon) //svg解码，为字符串
const width = +svgTag.getAttribute('width').split("px")[0]; const svgDocument = new DOMParser().parseFromString(
const height = +svgTag.getAttribute('height').split("px")[0]; decode_item_icon,
'text/xml',
const rectTag = svgDocument.getElementsByTagName('rect')[0]; ) //svg字符串转标签
const pathTag = svgDocument.getElementsByTagName('path')[0]; const svgTag = svgDocument.getElementsByTagName('svg')[0]
const ellipseTag = svgDocument.getElementsByTagName('ellipse')[0]; const width = +svgTag.getAttribute('width').split('px')[0]
const height = +svgTag.getAttribute('height').split('px')[0]
if(rectTag) {
if(color) { const rectTag = svgDocument.getElementsByTagName('rect')[0]
rectTag.setAttribute('fill', color) const pathTag = svgDocument.getElementsByTagName('path')[0]
} const ellipseTag = svgDocument.getElementsByTagName('ellipse')[0]
}
if(pathTag) { if (rectTag) {
if(color) { if (color) {
pathTag.setAttribute('fill', color) rectTag.setAttribute('fill', color)
} }
} }
if(ellipseTag) { if (pathTag) {
if(color) { if (color) {
ellipseTag.setAttribute('fill', color) pathTag.setAttribute('fill', color)
} }
} }
svgTag.style.backgroundColor = 'transparent'; if (ellipseTag) {
if (color) {
// svgTag.setAttribute('a_123', 'a_123'); ellipseTag.setAttribute('fill', color)
}
if(dicys && dicys.length > 0) { }
dicys.forEach(function(item2) { svgTag.style.backgroundColor = 'transparent'
// svgTag.setAttribute(encodeURIComponent(item2.fieldName), encodeURIComponent(item2.chineseName));
// svgTag.setAttribute('a_123', 'a_123');
if(item2.propertyValue) {
svgTag.setAttribute('attr_'+item2.fieldName, 'attr_'+Base64.encode(item2.propertyValue)+'&id=' + item2.propertyId); if (dicys && dicys.length > 0) {
} dicys.forEach(function (item2) {
}) // svgTag.setAttribute(encodeURIComponent(item2.fieldName), encodeURIComponent(item2.chineseName));
}
if (item2.propertyValue) {
const svgToString = new XMLSerializer().serializeToString(svgDocument);//svg标签转化为字符串 svgTag.setAttribute(
'attr_' + item2.fieldName,
const encode_item_icon = (window.btoa)? btoa(svgToString) : Base64.encode(svgToString);//base64编码 'attr_' +
Base64.encode(item2.propertyValue) +
icon = 'data:image/svg+xml;base64,' + encode_item_icon; '&id=' +
item2.propertyId,
return { width, height, icon }; )
}
})
}
const svgToString = new XMLSerializer().serializeToString(svgDocument) //svg标签转化为字符串
const encode_item_icon = window.btoa
? btoa(svgToString)
: Base64.encode(svgToString) //base64编码
icon = 'data:image/svg+xml;base64,' + encode_item_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;"><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 svg =
const encode_item_icon = window.btoa(svg);//base64编码 '<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>'
let svgImage= 'data:image/svg+xml;base64,'+ encode_item_icon; const encode_item_icon = window.btoa(svg) //base64编码
let svgImage = 'data:image/svg+xml;base64,' + encode_item_icon
const images_ = [
{ const images_ = [
aspect: "fixed", {
//data: "data:image/svg+xml;base64,PHN2ZyB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeT0iMHB4IiB4PSIwcHgiIHZlcnNpb249IjEuMSI+JiN4YTsJPG1ldGFkYXRhPiYjeGE7CQlTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiYjeGE7CTwvbWV0YWRhdGE+JiN4YTsJPGc+JiN4YTsJCTxnPiYjeGE7CQkJPHBhdGggZD0iTTIxNS4zLDEwMS41bDEzLjksMjQuMWwtOTcuNSw1LjNsMjIuNSwzOWw0My41LDQuN2w4LDEzLjhsLTU3LjUsMjIuM0wxMDYuMiwyNDZsLTguMS0xNGwxNy45LTQwLjRsLTIyLTM4LjFsLTUzLjMsODEuN2wtMTMuOS0yNC4xbDM3LjgtMTA4LjVsLTM0LTU4LjhjLTYuMy0xMS0zLTI0LjgsNy41LTMwLjljMTAuNS02LDI0LjItMiwzMC41LDguOWwzMy42LDU4LjFMMjE1LjMsMTAxLjV6IE0yMTMuOCwxMTcuM2wtNC40LTcuNmwtMTEzLTIxLjZMNjAuOCwyNi4zYy0zLjgtNi42LTExLjktOS4xLTE4LTUuNnMtOCwxMS44LTQuMiwxOC40bDM2LjEsNjIuNEwzNi44LDIxMC4xbDQuNCw3LjZsNTMuMy04MS43bDMxLjgsNTUuMWwtMTcuOSw0MC40bDAuMywwLjVsMzQuNS0yOWwxLjMtMC42bDQ3LjktMTguNmwtMC40LTAuNmwtNDMuNS00LjdsLTMyLjMtNTUuOUwyMTMuOCwxMTcuM3oiIGZpbGw9IiMwMDAwMDAiLz4mI3hhOwkJPC9nPiYjeGE7CTwvZz4mI3hhOzwvc3ZnPg==", aspect: 'fixed',
data: svgImage, //data: "data:image/svg+xml;base64,PHN2ZyB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeT0iMHB4IiB4PSIwcHgiIHZlcnNpb249IjEuMSI+JiN4YTsJPG1ldGFkYXRhPiYjeGE7CQlTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiYjeGE7CTwvbWV0YWRhdGE+JiN4YTsJPGc+JiN4YTsJCTxnPiYjeGE7CQkJPHBhdGggZD0iTTIxNS4zLDEwMS41bDEzLjksMjQuMWwtOTcuNSw1LjNsMjIuNSwzOWw0My41LDQuN2w4LDEzLjhsLTU3LjUsMjIuM0wxMDYuMiwyNDZsLTguMS0xNGwxNy45LTQwLjRsLTIyLTM4LjFsLTUzLjMsODEuN2wtMTMuOS0yNC4xbDM3LjgtMTA4LjVsLTM0LTU4LjhjLTYuMy0xMS0zLTI0LjgsNy41LTMwLjljMTAuNS02LDI0LjItMiwzMC41LDguOWwzMy42LDU4LjFMMjE1LjMsMTAxLjV6IE0yMTMuOCwxMTcuM2wtNC40LTcuNmwtMTEzLTIxLjZMNjAuOCwyNi4zYy0zLjgtNi42LTExLjktOS4xLTE4LTUuNnMtOCwxMS44LTQuMiwxOC40bDM2LjEsNjIuNEwzNi44LDIxMC4xbDQuNCw3LjZsNTMuMy04MS43bDMxLjgsNTUuMWwtMTcuOSw0MC40bDAuMywwLjVsMzQuNS0yOWwxLjMtMC42bDQ3LjktMTguNmwtMC40LTAuNmwtNDMuNS00LjdsLTMyLjMtNTUuOUwyMTMuOCwxMTcuM3oiIGZpbGw9IiMwMDAwMDAiLz4mI3hhOwkJPC9nPiYjeGE7CTwvZz4mI3hhOzwvc3ZnPg==",
h: 256, data: svgImage,
title: "svg", h: 256,
w: 256 title: 'svg',
} w: 256,
]; },
// xml格式数据，压缩或者不压缩的都行 ]
// const images_ = [ // xml格式数据，压缩或者不压缩的都行
// { // const images_ = [
// aspect: "fixed", // {
// xml: "tZTBUoMwEIafhisDpC30qG3Vg84404NHJ4UtZAwsExahPr0JhALWjnqQC/D9uyT7bxaHbfL2XvEye8IEpBN4SeuwrRMEfriI9M2QkyXLld+TVInEshHsxQdY6FlaiwSqWSAhShLlHMZYFBDTjHGlsJmHHVHOVy15ChdgH3N5SV9EQllPoyAc+QOINBtW9lfrXsn5EGwrqTKeYDNBbOewjUKk/ilvNyCNe4Mvfd7dFfW8MQUF/SYh6BPeuaxtbXZfdBqKVVgXCZh432G3TSYI9iWPjdro/mqWUS6tfBRSblCi6nKZ5/FDtDYcC5rwY3dpXpHCN5gowTZceZ5WdO+IiwIMN+92o6AI2qvF+mcL9eEDzIHUSYfYhIC54bJPasa2hYFrYTbp2cI2iNujkp6/NrqpH6yh35vLfjbX1CP0wXrkB5DPWAkSWGjpgESY67KHgBspUiMQfnFcn6DSfCxvUzNt7oFXInZ5XBO8khK8SM1at930ebrSf3E2WvQZdqAvTR4md2qx/3eL9es4G502+cWw3Sc=", // aspect: "fixed",
// h: 430, // xml: "tZTBUoMwEIafhisDpC30qG3Vg84404NHJ4UtZAwsExahPr0JhALWjnqQC/D9uyT7bxaHbfL2XvEye8IEpBN4SeuwrRMEfriI9M2QkyXLld+TVInEshHsxQdY6FlaiwSqWSAhShLlHMZYFBDTjHGlsJmHHVHOVy15ChdgH3N5SV9EQllPoyAc+QOINBtW9lfrXsn5EGwrqTKeYDNBbOewjUKk/ilvNyCNe4Mvfd7dFfW8MQUF/SYh6BPeuaxtbXZfdBqKVVgXCZh432G3TSYI9iWPjdro/mqWUS6tfBRSblCi6nKZ5/FDtDYcC5rwY3dpXpHCN5gowTZceZ5WdO+IiwIMN+92o6AI2qvF+mcL9eEDzIHUSYfYhIC54bJPasa2hYFrYTbp2cI2iNujkp6/NrqpH6yh35vLfjbX1CP0wXrkB5DPWAkSWGjpgESY67KHgBspUiMQfnFcn6DSfCxvUzNt7oFXInZ5XBO8khK8SM1at930ebrSf3E2WvQZdqAvTR4md2qx/3eL9es4G502+cWw3Sc=",
// title: "我的图库", // h: 430,
// w: 360 // title: "我的图库",
// } // w: 360
// ]; // }
// ];
const leftCustomGraph = function(that) {//左侧自定义图形
const leftCustomGraph = function (that) {
// var xml = that.createLibraryDataFromImages(images_); //左侧自定义图形
// var file = new LocalLibrary(that, xml, '图库'); // var xml = that.createLibraryDataFromImages(images_);
// that.libraryLoaded(file, images_, null, false);
// var file = new LocalLibrary(that, xml, '图库');
// that.libraryLoaded(file, images_, null, false);
// const standardGraph = JSON.parse(localStorage.getItem('standardGraph'));
// standardGraph.forEach(function(item) { // const standardGraph = JSON.parse(localStorage.getItem('standardGraph'));
// if(item.eleDtos) { // standardGraph.forEach(function(item) {
// if(item.eleDtos.length > 0) { // if(item.eleDtos) {
// const libraryName = item.arciBelongName; // if(item.eleDtos.length > 0) {
// let images = []; // const libraryName = item.arciBelongName;
// item.eleDtos.forEach(function(item2) { // let images = [];
// if(item2.icon) { // item.eleDtos.forEach(function(item2) {
// if(item2.icon.includes('data')) { // if(item2.icon) {
// images.unshift({ // if(item2.icon.includes('data')) {
// aspect: "fixed", // images.unshift({
// data: setIcon(item2.icon, item2.dicys, item2.color).icon, // aspect: "fixed",
// h: setIcon(item2.icon, item2.dicys, item2.color).height, // data: setIcon(item2.icon, item2.dicys, item2.color).icon,
// title: item2.eleName, // h: setIcon(item2.icon, item2.dicys, item2.color).height,
// w: setIcon(item2.icon, item2.dicys, item2.color).width // title: item2.eleName,
// }) // w: setIcon(item2.icon, item2.dicys, item2.color).width
// } // })
// } // }
// }) // }
// var xml = that.createLibraryDataFromImages(images); // })
// var xml = that.createLibraryDataFromImages(images);
// var file = new LocalLibrary(that, xml, libraryName);
// that.libraryLoaded(file, images, null, false); // var file = new LocalLibrary(that, xml, libraryName);
// that.libraryLoaded(file, images, null, false);
// // that.saveLibrary(libraryName, images, null, 'ajax', undefined, undefined, undefined);
// }else { // // that.saveLibrary(libraryName, images, null, 'ajax', undefined, undefined, undefined);
// const libraryName2 = item.arciBelongName; // }else {
// var xml = that.createLibraryDataFromImages([]); // const libraryName2 = item.arciBelongName;
// var file = new LocalLibrary(that, xml, libraryName2); // var xml = that.createLibraryDataFromImages([]);
// that.libraryLoaded(file, []); // var file = new LocalLibrary(that, xml, libraryName2);
// that.libraryLoaded(file, []);
// // that.saveLibrary(libraryName2, [], null, 'ajax', undefined, undefined, undefined);
// } // // that.saveLibrary(libraryName2, [], null, 'ajax', undefined, undefined, undefined);
// } // }
// }) // }
// })
const joinGraph_ = JSON.parse(localStorage.getItem('joinGraph'));
const joinGraph = joinGraph_.graph; const joinGraph_ = JSON.parse(localStorage.getItem('joinGraph'))
if(joinGraph_.state == 1) { const joinGraph = joinGraph_.graph
joinGraph.pop();
joinGraph.forEach(function(item) { if (joinGraph_.state == 1) {
if(item.eleDtos) { // 标准图元
if(item.eleDtos.length > 0) { joinGraph.pop()
const libraryName = item.arciBelongName; joinGraph.forEach(function (item, index) {
let images = []; if (item.eleDtos) {
item.eleDtos.forEach(function(item2) { if (item.eleDtos.length > 0) {
images.unshift({ const libraryName = item.arciBelongName
aspect: "fixed", let images = []
xml: item2.iconName, item.eleDtos.forEach(function (item2) {
h: 41, images.unshift({
title: item2.eleName, aspect: 'fixed',
w: 71 xml: item2.iconName,
}) h: 41,
}) title: item2.eleName,
var xml = that.createLibraryDataFromImages(images); w: 71,
})
var file = new LocalLibrary(that, xml, libraryName); })
that.libraryLoaded(file, images, null, false); var xml = that.createLibraryDataFromImages(images)
}else {
var file = new LocalLibrary(that, xml, libraryName)
} that.libraryLoaded(file, images, null, false)
} } else {
}) }
}else { }
// joinGraph.forEach(item => { })
// item.eleDtos.forEach(item2 => { } else {
// if(item2.eleType == '1') { // joinGraph.forEach(item => {
// console.log(item2) // item.eleDtos.forEach(item2 => {
// } // if(item2.eleType == '1') {
// }) // console.log(item2)
// }) // }
} // })
// })
}
} }
//二次开发，创建时不必先保存文件至本地，定义Dialogs.js文件里面的createTemporaryFile函数 //二次开发，创建时不必先保存文件至本地，定义Dialogs.js文件里面的createTemporaryFile函数
const createTemporaryFile = function() { const createTemporaryFile = function () {
App.prototype.createTemporaryFile = function(title, data, libs, mode, done, replace, folderId, tempFile, clibs) { App.prototype.createTemporaryFile = function (
data = (data != null) ? data : this.emptyDiagramXml; title,
this.fileCreated(new LocalFile(this, data, title, false), libs, replace, done, clibs); 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) { const setGraphDefault = function (that) {
that.toggleCompactMode(false);//二次开发，默认折叠 that.toggleCompactMode(false) //二次开发，默认折叠
that.toggleShapesPanel(true);//二次开发，默认全屏，显示左侧图形面板 that.toggleShapesPanel(true) //二次开发，默认全屏，显示左侧图形面板
that.toggleFormatPanel(true);//二次开发，默认全屏，显示右侧样式和属性面板 that.toggleFormatPanel(true) //二次开发，默认全屏，显示右侧样式和属性面板
} }
//设置画布只能预览 //设置画布只能预览
const setGraphOnlyView = function(graph) { const setGraphOnlyView = function (graph) {
// graph.selectAll(null, true);
// graph.selectAll(null, true); // graph.getModel().beginUpdate();
// graph.getModel().beginUpdate(); // var cells = graph.getSelectionCells();
// var cells = graph.getSelectionCells(); // var style = graph.getCurrentCellStyle(graph.getSelectionCell());
// var style = graph.getCurrentCellStyle(graph.getSelectionCell()); // var value = (mxUtils.getValue(style, mxConstants.STYLE_EDITABLE, 1)) == 1 ? 0 : 1;
// var value = (mxUtils.getValue(style, mxConstants.STYLE_EDITABLE, 1)) == 1 ? 0 : 1; // graph.setCellStyles(mxConstants.STYLE_MOVABLE, value, cells);
// graph.setCellStyles(mxConstants.STYLE_MOVABLE, value, cells); // graph.setCellStyles(mxConstants.STYLE_RESIZABLE, value, cells);
// graph.setCellStyles(mxConstants.STYLE_RESIZABLE, value, cells); // graph.setCellStyles(mxConstants.STYLE_ROTATABLE, value, cells);
// graph.setCellStyles(mxConstants.STYLE_ROTATABLE, value, cells); // graph.setCellStyles(mxConstants.STYLE_DELETABLE, value, cells);
// graph.setCellStyles(mxConstants.STYLE_DELETABLE, value, cells); // graph.setCellStyles(mxConstants.STYLE_EDITABLE, value, cells);
// graph.setCellStyles(mxConstants.STYLE_EDITABLE, value, cells); // graph.setCellStyles('locked', 1, cells);
// graph.setCellStyles('locked', 1, cells); // graph.setCellStyles('connectable', value, cells);
// graph.setCellStyles('connectable', value, cells); // graph.getModel().endUpdate();
// graph.getModel().endUpdate(); // graph.setEnabled(false);
// graph.setCellsEditable(false);
// graph.setTooltips(false);
// graph.setCellsSelectable(false);
// graph.setEnabled(false); // graph.setConnectable(false);
// graph.setCellsEditable(false); // graph.setCellsMovable(false);
// graph.setTooltips(false); // graph.getCursorForCell = function(cell){//预览时鼠标悬浮到节点时，改变鼠标样式
// graph.setCellsSelectable(false); // if (cell != null && cell.value != null && cell.vertex ==1 )
// graph.setConnectable(false); // {
// graph.setCellsMovable(false); // return 'pointer';
// graph.getCursorForCell = function(cell){//预览时鼠标悬浮到节点时，改变鼠标样式 // }
// if (cell != null && cell.value != null && cell.vertex ==1 ) // };
// {
// return 'pointer';
// }
// };
} }
var exToolbar = function (toolbarContainer) {//版本发布按钮 var exToolbar = function (toolbarContainer) {
//版本发布按钮
// this.toggleElement = document.createElement('a'); // this.toggleElement = document.createElement('a');
// this.toggleElement.setAttribute('title', '版本发布'); // this.toggleElement.setAttribute('title', '版本发布');
// this.toggleElement.style.position = 'absolute'; // this.toggleElement.style.position = 'absolute';
// this.toggleElement.style.display = 'inline-block'; // this.toggleElement.style.display = 'inline-block';
// this.toggleElement.style.width = '100px'; // this.toggleElement.style.width = '100px';
// this.toggleElement.style.height = '16px'; // this.toggleElement.style.height = '16px';
// this.toggleElement.style.color = '#666'; // this.toggleElement.style.color = '#666';
// this.toggleElement.style.top = '6px'; // this.toggleElement.style.top = '6px';
// this.toggleElement.style.right = '10px'; // this.toggleElement.style.right = '10px';
// this.toggleElement.style.padding = '2px'; // this.toggleElement.style.padding = '2px';
// this.toggleElement.style.fontSize = '14px'; // this.toggleElement.style.fontSize = '14px';
// this.toggleElement.style.textDecoration = 'none'; // this.toggleElement.style.textDecoration = 'none';
// this.toggleElement.text = '版本发布'; // this.toggleElement.text = '版本发布';
// this.toggleElement.style.marginRight = '100px'; // this.toggleElement.style.marginRight = '100px';
// this.toggleElement.style.cursor = 'pointer'; // this.toggleElement.style.cursor = 'pointer';
// this.toggleElement.style.color = 'rgb(13,134,127)'; // this.toggleElement.style.color = 'rgb(13,134,127)';
// this.toggleElement.style.backgroundPosition = '50% 50%';
// this.toggleElement.style.backgroundPosition = '50% 50%'; // this.toggleElement.style.backgroundRepeat = 'no-repeat';
// this.toggleElement.style.backgroundRepeat = 'no-repeat'; // // Prevents focus
// mxEvent.addListener(this.toggleElement, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown',
// // Prevents focus // mxUtils.bind(this, function (evt) {
// mxEvent.addListener(this.toggleElement, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', // evt.preventDefault();
// 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' }, '*');
// // Toggles compact mode // }));
// mxEvent.addListener(this.toggleElement, 'click', mxUtils.bind(this, function (evt) { // if (Editor.currentTheme != 'atlas') {
// toolbarContainer.appendChild(this.toggleElement);
// window.parent.postMessage({ type: 'saveVersion' }, '*'); // }
// // 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 () {
// if (Editor.currentTheme != 'atlas') { // this.toggleElement.click();
// toolbarContainer.appendChild(this.toggleElement); // }), 0);
// } // }
// // 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 () {
// this.toggleElement.click();
// }), 0);
// }
} }
var backGraph = function (that, toolbarContainer) {//返回上级图形按钮 var backGraph = function (that, toolbarContainer) {
//返回上级图形按钮
// this.toggleElement = document.createElement('a'); // this.toggleElement = document.createElement('a');
// this.toggleElement.setAttribute('title', '返回上级图形'); // this.toggleElement.setAttribute('title', '返回上级图形');
// this.toggleElement.style.position = 'absolute'; // this.toggleElement.style.position = 'absolute';
// this.toggleElement.style.display = 'inline-block'; // this.toggleElement.style.display = 'inline-block';
// this.toggleElement.style.width = '100px'; // this.toggleElement.style.width = '100px';
// this.toggleElement.style.height = '16px'; // this.toggleElement.style.height = '16px';
// this.toggleElement.style.color = '#666'; // this.toggleElement.style.color = '#666';
// this.toggleElement.style.top = '6px'; // this.toggleElement.style.top = '6px';
// this.toggleElement.style.right = '150px'; // this.toggleElement.style.right = '150px';
// this.toggleElement.style.padding = '2px'; // this.toggleElement.style.padding = '2px';
// this.toggleElement.style.fontSize = '14px'; // this.toggleElement.style.fontSize = '14px';
// this.toggleElement.style.textDecoration = 'none'; // this.toggleElement.style.textDecoration = 'none';
// this.toggleElement.text = '返回上级图形'; // this.toggleElement.text = '返回上级图形';
// this.toggleElement.style.marginRight = '100px'; // this.toggleElement.style.marginRight = '100px';
// this.toggleElement.style.cursor = 'pointer'; // this.toggleElement.style.cursor = 'pointer';
// this.toggleElement.style.color = 'rgb(13,134,127)'; // this.toggleElement.style.color = 'rgb(13,134,127)';
// this.toggleElement.style.backgroundPosition = '50% 50%';
// this.toggleElement.style.backgroundPosition = '50% 50%'; // this.toggleElement.style.backgroundRepeat = 'no-repeat';
// this.toggleElement.style.backgroundRepeat = 'no-repeat'; // // Toggles compact mode
// mxEvent.addListener(this.toggleElement, 'click', mxUtils.bind(this, function (evt) {
// // Toggles compact mode // console.log('上级图形');
// mxEvent.addListener(this.toggleElement, 'click', mxUtils.bind(this, function (evt) { // const xml = localStorage.getItem('xmlData');
// const mockFile = {
// console.log('上级图形'); // data: xml,
// const xml = localStorage.getItem('xmlData'); // title: '原始数据'
// const mockFile = { // };
// data: xml, // that.editor.setStatus('');
// title: '原始数据' // that.fileLoaded(null);
// }; // that.spinner.stop();
// that.editor.setStatus(''); // const file = new LocalFile(that, mockFile.data, mockFile.title, null);
// that.fileLoaded(null); // that.loadFile(`-3`, true, file);
// that.spinner.stop(); // }));
// const file = new LocalFile(that, mockFile.data, mockFile.title, null); // if (Editor.currentTheme != 'atlas') {
// toolbarContainer.appendChild(this.toggleElement);
// that.loadFile(`-3`, true, file); // }
}
// }));
// if (Editor.currentTheme != 'atlas') {
// toolbarContainer.appendChild(this.toggleElement);
// }
}
\ No newline at end of file
src/views/archi-view-manage/index.vue
<template> <template>
<div class="archiViewManage"> <div class="archiViewManage">
<el-tree <el-tree
class="filter-tree" class="filter-tree"
:data="treeData" :data="treeData"
:highlight-current="true" :highlight-current="true"
default-expand-all default-expand-all
node-key="viewId" node-key="viewId"
@node-click="treeClick" @node-click="treeClick"
:props="{ children: 'subList', label: 'viewName', id: 'viewId' }" :props="{ children: 'subList', label: 'viewName', id: 'viewId' }"
:default-expanded-keys="treeDefaultExpand" :default-expanded-keys="treeDefaultExpand"
:current-node-key="currentNodekey" :current-node-key="currentNodekey"
ref="tree"> ref="tree"
</el-tree> >
<div class="right_container"> </el-tree>
<el-tabs v-model="activeName" type="border-card"> <div class="right_container">
<el-tab-pane label="暂存" name="暂存"> <el-tabs v-model="activeName" type="border-card">
<div class="card_container"> <el-tab-pane label="暂存" name="暂存">
<div class="card_body"> <div class="card_container">
<el-card class="card_item" v-for="item in zanCun" :key="item.metaModelId"> <div class="card_body">
<img class="card_image" v-if="item.metaModelSvg_" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" /> <el-card
<img class="card_image" v-else @click="to_current_details(item)" src="@/assets/meta-model-list/default_img.png" alt="" /> class="card_item"
<div class="card_info"> v-for="item in zanCun"
<div class="card_title"> :key="item.metaModelId"
<i class="el-icon-location"></i> >
{{ item.verName }}&nbsp;&nbsp;&nbsp;{{ item.version }} <img
</div> class="card_image"
<div class="card_icon" @click.stop="deleteItem(item)"> v-if="item.metaModelSvg_"
<i class="el-icon-delete"></i> @click="to_current_details(item)"
</div> :src="item.metaModelSvg_"
</div> alt=""
</el-card> />
<div v-if="viewId" class="add_container" @click="open_dialog('暂存')"> <img
<i class="el-icon-plus"></i> class="card_image"
</div> v-else
</div> @click="to_current_details(item)"
</div> src="@/assets/meta-model-list/default_img.png"
<el-pagination alt=""
background />
@size-change="val => handleSizeChange(val, '暂存')" <div class="card_info">
@current-change="val => handleCurrentChange(val, '暂存')" <div class="card_title">
:current-page="pager2.current" <i class="el-icon-location"></i>
:page-sizes="pager2.sizes" {{ item.verName }}&nbsp;&nbsp;&nbsp;{{ item.version }}
:page-size="pager2.size" </div>
layout="total, sizes, prev, pager, next, jumper" <div class="card_icon" @click.stop="deleteItem(item)">
:total="pager2.total"> <i class="el-icon-delete"></i>
</el-pagination> </div>
</el-tab-pane> </div>
<el-tab-pane label="停用" name="停用"> </el-card>
<div class="card_container"> <div
<div class="card_body"> v-if="viewId"
<el-card class="card_item" v-for="item in tingYong" :key="item.metaModelId"> class="add_container"
<img class="card_image" v-if="item.metaModelSvg_" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" /> @click="open_dialog('暂存')"
<img class="card_image" v-else @click="to_current_details(item)" src="@/assets/meta-model-list/default_img.png" alt="" /> >
<div class="card_info"> <i class="el-icon-plus"></i>
<div class="card_title"> </div>
<i class="el-icon-location"></i> </div>
{{ item.verName }}&nbsp;&nbsp;&nbsp;{{ item.version }} </div>
</div> <el-pagination
<div class="card_icon" @click.stop="deleteItem(item)"> background
<i class="el-icon-delete"></i> @size-change="(val) => handleSizeChange(val, '暂存')"
</div> @current-change="(val) => handleCurrentChange(val, '暂存')"
</div> :current-page="pager2.current"
</el-card> :page-sizes="pager2.sizes"
<div v-if="viewId" class="add_container" @click="open_dialog('停用')"> :page-size="pager2.size"
<i class="el-icon-plus"></i> layout="total, sizes, prev, pager, next, jumper"
</div> :total="pager2.total"
</div> >
</div> </el-pagination>
<el-pagination </el-tab-pane>
background <el-tab-pane label="停用" name="停用">
@size-change="val => handleSizeChange(val, '停用')" <div class="card_container">
@current-change="val => handleCurrentChange(val, '停用')" <div class="card_body">
:current-page="pager3.current" <el-card
:page-sizes="pager3.sizes" class="card_item"
:page-size="pager3.size" v-for="item in tingYong"
layout="total, sizes, prev, pager, next, jumper" :key="item.metaModelId"
:total="pager3.total"> >
</el-pagination> <img
</el-tab-pane> class="card_image"
<el-tab-pane label="发布" name="发布"> v-if="item.metaModelSvg_"
<div class="card_container"> @click="to_current_details(item)"
<div class="card_body"> :src="item.metaModelSvg_"
<el-card class="card_item" v-for="item in yiFaBu" :key="item.metaModelId"> alt=""
<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="" /> <img
<div class="card_info"> class="card_image"
<div class="card_title"> v-else
<i class="el-icon-location"></i> @click="to_current_details(item)"
{{ item.verName }}&nbsp;&nbsp;&nbsp;{{ item.version }} src="@/assets/meta-model-list/default_img.png"
</div> alt=""
<!-- <div class="card_icon" @click.stop="deleteItem(item)"> />
<div class="card_info">
<div class="card_title">
<i class="el-icon-location"></i>
{{ item.verName }}&nbsp;&nbsp;&nbsp;{{ item.version }}
</div>
<div class="card_icon" @click.stop="deleteItem(item)">
<i class="el-icon-delete"></i>
</div>
</div>
</el-card>
<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, '停用')"
:current-page="pager3.current"
:page-sizes="pager3.sizes"
:page-size="pager3.size"
layout="total, sizes, prev, pager, next, jumper"
: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=""
/>
<div class="card_info">
<div class="card_title">
<i class="el-icon-location"></i>
{{ item.verName }}&nbsp;&nbsp;&nbsp;{{ item.version }}
</div>
<!-- <div class="card_icon" @click.stop="deleteItem(item)">
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> --> </div> -->
</div> </div>
</el-card> </el-card>
<div v-if="viewId" class="add_container" @click="open_dialog('发布')"> <div
<i class="el-icon-plus"></i> v-if="viewId"
</div> class="add_container"
</div> @click="open_dialog('发布')"
</div> >
<el-pagination <i class="el-icon-plus"></i>
background </div>
@size-change="val => handleSizeChange(val, '发布')" </div>
@current-change="val => handleCurrentChange(val, '发布')" </div>
:current-page="pager1.current" <el-pagination
:page-sizes="pager1.sizes" background
:page-size="pager1.size" @size-change="(val) => handleSizeChange(val, '发布')"
layout="total, sizes, prev, pager, next, jumper" @current-change="(val) => handleCurrentChange(val, '发布')"
:total="pager1.total"> :current-page="pager1.current"
</el-pagination> :page-sizes="pager1.sizes"
</el-tab-pane> :page-size="pager1.size"
</el-tabs> layout="total, sizes, prev, pager, next, jumper"
</div> :total="pager1.total"
<el-dialog >
title="新建架构视图" </el-pagination>
:visible.sync="add_dialog" </el-tab-pane>
:center="false" </el-tabs>
width="40%"> </div>
<div class="add_dialog_content"> <el-dialog
<el-form :model="ruleForm" :rules="rules" ref="ruleForm"> title="新建架构视图"
<el-form-item label="版本名称" prop="name"> :visible.sync="add_dialog"
<el-input v-no-backslash v-model="ruleForm.name" maxlength="100"></el-input> :center="false"
</el-form-item> width="40%"
</el-form> >
</div> <div class="add_dialog_content">
<span slot="footer" class="dialog-footer"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-button class="greenButton" v-debounce:click="ok">确定</el-button> <el-form-item label="版本名称" prop="name">
<el-button @click="add_dialog = false">取消</el-button> <el-input
</span> v-no-backslash
</el-dialog> v-model="ruleForm.name"
</div> maxlength="100"
></el-input>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" v-debounce:click="ok">确定</el-button>
<el-button @click="add_dialog = false">取消</el-button>
</span>
</el-dialog>
</div>
</template> </template>
<script> <script>
import { import {
getArchiViewManage, getArchiViewManage,
getArchiViewManageDetail, getArchiViewManageDetail,
addArchiViewManage, addArchiViewManage,
deleteArchiViewManage, deleteArchiViewManage,
queryArchiViewManageCardDetails, queryArchiViewManageCardDetails,
getDrawioLeftCommonGraph, getDrawioLeftCommonGraph,
getDrawioLeftStandardGraph, getDrawioLeftStandardGraph,
queryArchiGraph queryArchiGraph,
} from '@/api/index.js'; } from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'; import { MessageBox, Message } from 'element-ui'
import $ from 'jquery'; import $ from 'jquery'
import GraphGallery from '@/components/graphGallery.vue'; import GraphGallery from '@/components/graphGallery.vue'
export default { export default {
name: 'ArchiViewManage', name: 'ArchiViewManage',
components: { components: {
GraphGallery GraphGallery,
}, },
data() { data() {
return { return {
activeId: null, activeId: null,
treeData: [ treeData: [
{ {
viewId: 0, viewId: 0,
viewName: '架构视图管理', viewName: '架构视图管理',
subList: [] subList: [],
} },
], ],
treeDefaultExpand: [], treeDefaultExpand: [],
currentNodekey: null, currentNodekey: null,
activeName: '暂存', activeName: '暂存',
pager1: { pager1: {
current: 1, current: 1,
sizes: [10, 20, 50, 100, 200], sizes: [10, 20, 50, 100, 200],
size: 10, size: 10,
total: 0 //总条数 total: 0, //总条数
}, },
pager2: { pager2: {
current: 1, current: 1,
sizes: [10, 20, 50, 100, 200], sizes: [10, 20, 50, 100, 200],
size: 10, size: 10,
total: 0 //总条数 total: 0, //总条数
}, },
pager3: { pager3: {
current: 1, current: 1,
sizes: [10, 20, 50, 100, 200], sizes: [10, 20, 50, 100, 200],
size: 10, size: 10,
total: 0 //总条数 total: 0, //总条数
}, },
viewId: null, viewId: null,
yiFaBu: [], yiFaBu: [],
zanCun: [], zanCun: [],
tingYong: [], tingYong: [],
add_dialog: false, add_dialog: false,
ruleForm: { ruleForm: {
name: '', name: '',
}, },
rules: { rules: {
name: [ name: [{ required: true, message: '请输入版本名称', trigger: 'blur' }],
{ required: true, message: '请输入版本名称', trigger: 'blur' }, },
], addStatus: null,
}, graphGroup: null,
addStatus: null, archiType: null,
graphGroup: null, }
archiType: null, },
}; mounted() {
}, this.getData()
mounted(){ },
this.getData(); methods: {
}, queryDrawioGraph(id) {
methods: { //查询画布左侧常规图形
queryDrawioGraph(id) {//查询画布左侧常规图形 const params = {
const params = { metaModelId: id,
metaModelId: id }
} return new Promise((resolve, reject) => {
return new Promise((resolve, reject) => { getDrawioLeftCommonGraph(params).then((res) => {
getDrawioLeftCommonGraph(params).then(res => { if (res.code == 200) {
if(res.code == 200) { resolve(res.data)
resolve(res.data); } else {
}else { Message({
Message({ type: 'error',
type: 'error', message: res.msg,
message: res.msg })
}); reject(res.msg)
reject(res.msg); }
} })
}) })
}); },
}, queryDrawioGraph2(id) {
queryDrawioGraph2(id) {//查询画布左侧标准图形 //查询画布左侧标准图形
const params = { const params = {
metaModelId: id metaModelId: id,
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
getDrawioLeftStandardGraph(params).then(res => { getDrawioLeftStandardGraph(params).then((res) => {
if(res.code == 200) { if (res.code == 200) {
resolve(res.data); resolve(res.data)
}else { } else {
Message({ Message({
type: 'error', type: 'error',
message: res.msg message: res.msg,
}); })
reject(res.msg); reject(res.msg)
} }
}) })
}); })
}, },
deleteItem(item) {//删除 deleteItem(item) {
MessageBox.confirm('确定删除?', '提示', { //删除
confirmButtonText: '确定', MessageBox.confirm('确定删除?', '提示', {
cancelButtonText: '取消', confirmButtonText: '确定',
customClass: 'messageClass', cancelButtonText: '取消',
confirmButtonClass: 'confirmClass', customClass: 'messageClass',
type: 'warning' confirmButtonClass: 'confirmClass',
}).then(() => { type: 'warning',
const params = { })
ids: [item.viewDetailsId], .then(() => {
} const params = {
deleteArchiViewManage(params).then(res => { ids: [item.viewDetailsId],
if(res.code == 200) { }
this.get_list1(); deleteArchiViewManage(params).then((res) => {
this.get_list2(); if (res.code == 200) {
this.get_list3(); this.get_list1()
Message({ this.get_list2()
type: 'success', this.get_list3()
message: '删除成功!', Message({
}); type: 'success',
}else { message: '删除成功!',
Message({ })
type: 'error', } else {
message: res.msg Message({
}); type: 'error',
} message: res.msg,
}) })
}).catch(() => { }
Message({ })
type: 'info', })
message: '已取消' .catch(() => {
}); Message({
}); type: 'info',
}, message: '已取消',
open_dialog(status) {//打开新增对话框 })
this.addStatus = status; })
this.add_dialog = true; },
}, open_dialog(status) {
ok() {//弹框点击确定 //打开新增对话框
this.$refs.ruleForm.validate(valid => { // this.addStatus = status;
if(valid) { // this.add_dialog = true;
let state; let state
switch(this.addStatus){ switch (status) {
case '暂存': case '暂存':
state = 2; state = 2
break; break
case '停用': case '停用':
state = 0; state = 0
break; break
case '发布': case '发布':
state = 1; state = 1
break; break
} }
const params = { const params = {
version: this.ruleForm.name, viewId: this.viewId,
viewId: this.viewId, state,
state: state }
}; addArchiViewManage(params).then((res) => {
addArchiViewManage(params).then(res => { if (res.code == 200) {
if(res.code == 200) { this.to_current_details(res.data)
this.add_dialog = false; } else {
this.get_list1(); Message({
this.get_list2(); type: 'error',
this.get_list3(); message: res.msg,
Message({ })
type: 'success', }
message: '新增成功!' })
}); },
}else { ok() {
Message({ //弹框点击确定
type: 'error', this.$refs.ruleForm.validate((valid) => {
message: res.msg if (valid) {
}); let state
} switch (this.addStatus) {
}) case '暂存':
} else { state = 2
console.log('error submit!!'); break
return false; case '停用':
} state = 0
}); break
}, case '发布':
// 每页条数改变 state = 1
handleSizeChange(val, status) { break
switch(status){ }
case '发布': const params = {
this.pager1.current = 1; version: this.ruleForm.name,
this.pager1.size = val; viewId: this.viewId,
this.get_list1(); state: state,
break; }
case '暂存': addArchiViewManage(params).then((res) => {
this.pager2.current = 1; if (res.code == 200) {
this.pager2.size = val; this.add_dialog = false
this.get_list2(); this.get_list1()
break; this.get_list2()
case '停用': this.get_list3()
this.pager3.current = 1; Message({
this.pager3.size = val; type: 'success',
this.get_list3(); message: '新增成功!',
break; })
} } else {
}, Message({
//当前页码改变 type: 'error',
handleCurrentChange(val, status) { message: res.msg,
switch(status){ })
case '发布': }
this.pager1.current = val; })
this.get_list1(); } else {
break; console.log('error submit!!')
case '暂存': return false
this.pager2.current = val; }
this.get_list2(); })
break; },
case '停用': // 每页条数改变
this.pager3.current = val; handleSizeChange(val, status) {
this.get_list3(); switch (status) {
break; case '发布':
} this.pager1.current = 1
}, this.pager1.size = val
get_list1(){//获取已发布数据 this.get_list1()
const params = { break
current: this.pager1.current, case '暂存':
pageSize: this.pager1.size, this.pager2.current = 1
viewId: this.viewId, this.pager2.size = val
state: 1 this.get_list2()
} break
getArchiViewManageDetail(params).then(res => { case '停用':
if(res.code == 200) { this.pager3.current = 1
res.data.records.map(item => { this.pager3.size = val
if(item.metaModelSvg) { this.get_list3()
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg; break
}else { }
item['metaModelSvg_'] = null; },
} //当前页码改变
}); handleCurrentChange(val, status) {
this.yiFaBu = res.data.records; switch (status) {
this.pager1.current = res.data.current; case '发布':
this.pager1.total = res.data.total; this.pager1.current = val
} this.get_list1()
}) break
}, case '暂存':
get_list2(){//获取暂存数据 this.pager2.current = val
const params = { this.get_list2()
current: this.pager2.current, break
pageSize: this.pager2.size, case '停用':
viewId: this.viewId, this.pager3.current = val
state: 2 this.get_list3()
} break
getArchiViewManageDetail(params).then(res => { }
if(res.code == 200) { },
res.data.records.map(item => { get_list1() {
if(item.metaModelSvg) { //获取已发布数据
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg; const params = {
}else { current: this.pager1.current,
item['metaModelSvg_'] = null; pageSize: this.pager1.size,
} viewId: this.viewId,
}); state: 1,
this.zanCun = res.data.records; }
this.pager2.current = res.data.current; getArchiViewManageDetail(params).then((res) => {
this.pager2.total = res.data.total; if (res.code == 200) {
} res.data.records.map((item) => {
}) if (item.metaModelSvg) {
}, item['metaModelSvg_'] =
get_list3(){//获取停用数据 'data:image/svg+xml;base64,' + item.metaModelSvg
const params = { } else {
current: this.pager3.current, item['metaModelSvg_'] = null
pageSize: this.pager3.size, }
viewId: this.viewId, })
state: 0 this.yiFaBu = res.data.records
} this.pager1.current = res.data.current
getArchiViewManageDetail(params).then(res => { this.pager1.total = res.data.total
if(res.code == 200) { }
res.data.records.map(item => { })
if(item.metaModelSvg) { },
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg; get_list2() {
}else { //获取暂存数据
item['metaModelSvg_'] = null; const params = {
} current: this.pager2.current,
}); pageSize: this.pager2.size,
this.tingYong = res.data.records viewId: this.viewId,
this.pager3.current = res.data.current; state: 2,
this.pager3.total = res.data.total; }
} getArchiViewManageDetail(params).then((res) => {
}) if (res.code == 200) {
}, res.data.records.map((item) => {
to_current_details(item) {//跳转到详情 if (item.metaModelSvg) {
const params = { item['metaModelSvg_'] =
viewDetailsId: item.viewDetailsId 'data:image/svg+xml;base64,' + item.metaModelSvg
} } else {
queryArchiViewManageCardDetails(params).then(res => { item['metaModelSvg_'] = null
if(res.code == 200) { }
const xmlData = res.data.metaModelData; })
const xmlTitle = res.data.version; this.zanCun = res.data.records
const id = res.data.viewDetailsId; this.pager2.current = res.data.current
this.pager2.total = res.data.total
}
})
},
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
}
})
this.tingYong = res.data.records
this.pager3.current = res.data.current
this.pager3.total = res.data.total
}
})
},
to_current_details(item) {
//跳转到详情
const params = {
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
localStorage.setItem('xmlData', xmlData); localStorage.setItem('xmlData', xmlData)
localStorage.setItem('xmlTitle', xmlTitle); localStorage.setItem('xmlTitle', xmlTitle)
Promise.all([ this.queryDrawioGraph(id), this.queryDrawioGraph2(id), this.getArchiGraph() ]).then(res2 => { Promise.all([
localStorage.setItem('commonGraph', JSON.stringify({ show: true, graph: res2[0].dataEle })); this.queryDrawioGraph(id),
localStorage.setItem('standardGraph', JSON.stringify({ show: true, graph: res2[1].dataEle })); this.queryDrawioGraph2(id),
localStorage.setItem('joinGraph', JSON.stringify({ state: 2, graph: res2[2].dataEle })); this.getArchiGraph(),
this.$router.push( `/main/archiViewManageDetails?id=${id}&info=${this.graphGroup}&viewId=${this.viewId}&assetConstant=${this.archiType}`, () => {}, () => {} ); ]).then((res2) => {
}); localStorage.setItem(
} 'commonGraph',
}); JSON.stringify({ show: true, graph: res2[0].dataEle }),
}, )
getArchiGraph() {//查询综合图 localStorage.setItem(
return new Promise((resolve, reject) => { 'standardGraph',
const params = { JSON.stringify({ show: true, graph: res2[1].dataEle }),
archiAssetState: 2, )
archiStage: 1, localStorage.setItem(
delFlag: 0, 'joinGraph',
state: 1, JSON.stringify({ state: 2, graph: res2[2].dataEle }),
archiBelongId: this.graphGroup, )
archiType: this.archiType, this.$router.push(
archiViewId: this.viewId `/main/archiViewManageDetails?id=${id}&info=${this.graphGroup}&viewId=${this.viewId}&assetConstant=${this.archiType}`,
} () => {},
queryArchiGraph(params).then(res => { () => {},
if(res.code == 200) { )
resolve(res.data); })
}else { }
Message({ })
type: 'error', },
message: res.msg getArchiGraph() {
}); //查询综合图
reject(res.msg); return new Promise((resolve, reject) => {
} const params = {
}) archiAssetState: 2,
}) archiStage: 1,
}, delFlag: 0,
treeClick(data, node, e) {//树点击的时候 state: 1,
if(!data.subList) { archiBelongId: this.graphGroup,
this.graphGroup = node.parent.data.viewId; archiType: this.archiType,
this.archiType = node.parent.data.archiType; archiViewId: this.viewId,
this.viewId = data.viewId; }
this.pager1.current = 1; queryArchiGraph(params).then((res) => {
this.pager2.current = 1; if (res.code == 200) {
this.pager3.current = 1; resolve(res.data)
this.get_list1(); } else {
this.get_list2(); Message({
this.get_list3(); type: 'error',
}else { message: res.msg,
this.viewId = null; })
this.yiFaBu = []; reject(res.msg)
this.zanCun = []; }
this.tingYong = []; })
this.pager1.total = 0; })
this.pager2.total = 0; },
this.pager3.total = 0; treeClick(data, node, e) {
} //树点击的时候
}, if (!data.subList) {
getData() {//获取树节点内容 this.graphGroup = node.parent.data.viewId
const params = { this.archiType = node.parent.data.archiType
archiStage: 1 this.viewId = data.viewId
} this.pager1.current = 1
getArchiViewManage(params).then(res => { this.pager2.current = 1
if(res.code == 200) { this.pager3.current = 1
this.graphGroup = res.data[0].viewId; this.get_list1()
this.archiType = res.data[0].archiType; this.get_list2()
this.treeData[0].subList = res.data; this.get_list3()
this.treeDefaultExpand = [res.data[0].viewId]; } else {
this.currentNodekey = res.data[0].subList[0].viewId; this.viewId = null
this.$nextTick(() => { this.yiFaBu = []
this.$refs.tree.setCurrentKey(this.currentNodekey); this.zanCun = []
}); this.tingYong = []
this.viewId = res.data[0].subList[0].viewId; this.pager1.total = 0
this.pager1.current = 1; this.pager2.total = 0
this.pager2.current = 1; this.pager3.total = 0
this.pager3.current = 1; }
this.get_list1(); },
this.get_list2(); getData() {
this.get_list3(); //获取树节点内容
} 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()
}
})
},
},
} }
</script> </script>
<style> <style>
.confirmClass{ .confirmClass {
background-color: #0D867F !important; background-color: #0d867f !important;
} }
.el-message-box__content{ .el-message-box__content {
padding: 60px 15px 60px 15px; padding: 60px 15px 60px 15px;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{ /deep/
background-color: #0D867F; .el-tree--highlight-current
color: #fff; .el-tree-node.is-current
} > .el-tree-node__content {
/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content >.is-leaf{ background-color: #0d867f;
background-color: #0D867F !important; color: #fff;
} }
/deep/ .el-dialog__header{ /deep/
background-color: #0D867F; .el-tree--highlight-current
text-align: left; .el-tree-node.is-current
} > .el-tree-node__content
/deep/ .el-dialog__title{ > .is-leaf {
color: #fff; background-color: #0d867f !important;
} }
/deep/ .el-dialog__close { /deep/ .el-dialog__header {
color: #fff; background-color: #0d867f;
} text-align: left;
.el-form-item{ }
display: flex; /deep/ .el-dialog__title {
} color: #fff;
/deep/ .el-form-item__content{ }
width: 80%; /deep/ .el-dialog__close {
} color: #fff;
/deep/ .is-leaf { }
background-color: #fff !important; .el-form-item {
} display: flex;
.greenButton{ }
background-color: #0D867F; /deep/ .el-form-item__content {
color: #fff; width: 80%;
} }
.archiViewManage{ /deep/ .is-leaf {
width: 100%; background-color: #fff !important;
height: 100%; }
display: flex; .greenButton {
.filter-tree{ background-color: #0d867f;
width: 300px; color: #fff;
height: 100%; }
overflow-y: auto; .archiViewManage {
// border: 1px solid pink; width: 100%;
} height: 100%;
.right_container{ display: flex;
width: calc(100% - 300px); .filter-tree {
height: 100%; width: 300px;
// border: 1px solid blue; height: 100%;
.el-tabs{ overflow-y: auto;
height: 100%; // border: 1px solid pink;
} }
.el-tab-pane{ .right_container {
height: 100%; width: calc(100% - 300px);
position: relative; height: 100%;
} // border: 1px solid blue;
.el-pagination{ .el-tabs {
position: absolute; height: 100%;
bottom: 5%; }
left: 35%; .el-tab-pane {
background-color: #fff; height: 100%;
} position: relative;
.card_container{ }
overflow-x: hidden; .el-pagination {
height: 100%; position: absolute;
overflow-y: auto; bottom: 5%;
text-align: left; left: 35%;
.card_body{ background-color: #fff;
height: 2000px; }
.add_container{ .card_container {
width: 350px; overflow-x: hidden;
height: 240px; height: 100%;
margin: 15px; overflow-y: auto;
background-color: #F2FFFE; text-align: left;
cursor: pointer; .card_body {
float: left; height: 2000px;
display: flex; .add_container {
justify-content: center; width: 350px;
align-items: center; height: 240px;
i{ margin: 15px;
font-size: 60px; background-color: #f2fffe;
cursor: pointer;
} float: left;
} display: flex;
.card_item{ justify-content: center;
width: 345px; align-items: center;
height: 240px; i {
margin: 15px; font-size: 60px;
background-color: #F2FFFE; }
cursor: pointer; }
float: left; .card_item {
text-align: center; width: 345px;
.card_image{ height: 240px;
width: 165px; margin: 15px;
height: 127px; background-color: #f2fffe;
} cursor: pointer;
.card_info{ float: left;
display: flex; text-align: center;
align-items: center; .card_image {
justify-content: space-between; width: 165px;
margin: 30px 0 0 0; height: 127px;
.card_icon{ }
cursor: pointer; .card_info {
} display: flex;
} align-items: center;
} justify-content: space-between;
} margin: 30px 0 0 0;
} .card_icon {
/deep/ .el-tabs__content{ cursor: pointer;
height: calc(100% - 38px); }
padding: 0; }
} }
.el-pagination{ }
margin-top: 15px; }
} /deep/ .el-tabs__content {
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ height: calc(100% - 38px);
background-color: #0D867F; padding: 0;
} }
} .el-pagination {
} margin-top: 15px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #0d867f;
}
}
}
</style> </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 @@ ...@@ -16,6 +16,7 @@
<i class="el-icon-picture"></i> <i class="el-icon-picture"></i>
</span> </span>
<Graph></Graph> <Graph></Graph>
<DetailLegend />
</el-tab-pane> </el-tab-pane>
<el-tab-pane> <el-tab-pane>
<span slot="label"> <span slot="label">
...@@ -37,6 +38,7 @@ ...@@ -37,6 +38,7 @@
import Graph from './canvas/index.vue'; import Graph from './canvas/index.vue';
import Tables from './table/index.vue'; import Tables from './table/index.vue';
import Mind from './mind/index.vue'; import Mind from './mind/index.vue';
import DetailLegend from './DetailLegend.vue'
import { MessageBox, Message } from 'element-ui'; import { MessageBox, Message } from 'element-ui';
import { import {
save_drawio_version, save_drawio_version,
...@@ -47,7 +49,8 @@ export default { ...@@ -47,7 +49,8 @@ export default {
components: { components: {
Graph, Graph,
Tables, Tables,
Mind Mind,
DetailLegend
}, },
data() { data() {
return { return {
......
src/views/meta-model-list/index.vue
...@@ -306,10 +306,11 @@ export default { ...@@ -306,10 +306,11 @@ export default {
const xmlTitle = res.data.verName; const xmlTitle = res.data.verName;
localStorage.setItem('xmlData', xmlData); localStorage.setItem('xmlData', xmlData);
localStorage.setItem('xmlTitle', xmlTitle); localStorage.setItem('xmlTitle', xmlTitle);
Promise.all([ this.queryDrawioGraph(item.metaModelId), this.queryDrawioGraph2(item.metaModelId) ]).then(res2 => { // this.queryDrawioGraph(item.metaModelId),
localStorage.setItem('commonGraph', JSON.stringify({ show: false, graph: res2[0].dataEle })); Promise.all([ this.queryDrawioGraph2(item.metaModelId) ]).then(res2 => {
localStorage.setItem('standardGraph', JSON.stringify({ show: true, graph: res2[1].dataEle })); // localStorage.setItem('commonGraph', JSON.stringify({ show: false, graph: res2[0].dataEle }));
localStorage.setItem('joinGraph', JSON.stringify({ state: 1, graph: res2[1].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}`, () => {}, () => {} ); 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!