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) {//一进入画布显示的图形 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画布传的属性传递 window.onmessage = (e) => {
if(e.data.type == 'propertyReceive') { //监听vue页面的图形选择窗口给drawio画布传的属性传递
const receiveData = e.data.data; if (e.data.type == 'propertyReceive') {
let eaLevel = receiveData.eaLevel; const receiveData = e.data.data
let eleBelongId = receiveData.eleBelongId; let eaLevel = receiveData.eaLevel
let dicys = JSON.stringify(receiveData.dicys); let eleBelongId = receiveData.eleBelongId
that.editor.graph.getSelectionCells().forEach(item => { let dicys = JSON.stringify(receiveData.dicys)
if(item.value) { that.editor.graph.getSelectionCells().forEach((item) => {
if(that.editor.graph.getModel().isVertex(item)){ if (item.value) {
if (that.editor.graph.getModel().isVertex(item)) {
// console.log('封闭图形'); // console.log('封闭图形');
that.editor.graph.setCellStyles('attr', dicys, [item]); that.editor.graph.setCellStyles('attr', dicys, [item])
that.editor.graph.setCellStyles('eleId', eleBelongId, [item]); that.editor.graph.setCellStyles('eleId', eleBelongId, [item])
that.editor.graph.setCellStyles('eaLevel', eaLevel, [item]); that.editor.graph.setCellStyles('eaLevel', eaLevel, [item])
// console.log(item.style); // console.log(item.style);
}else if (that.editor.graph.getModel().isEdge(item)) { } else if (that.editor.graph.getModel().isEdge(item)) {
// console.log('线条') // console.log('线条')
}else { } else {
// console.log('其他类型') // console.log('其他类型')
} }
} }
}) })
} }
if(e.data.type == 'backGraph') { if (e.data.type == 'backGraph') {
const xml = localStorage.getItem('xmlData'); const xml = localStorage.getItem('xmlData')
const mockFile = { const mockFile = {
data: xml, data: xml,
title: '原始数据' 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);
} }
that.editor.setStatus('')
that.fileLoaded(null)
that.spinner.stop()
const file = new LocalFile(that, mockFile.data, mockFile.title, null)
if(e.data.type == 'saveFileSignal') { that.loadFile(`-3`, true, file)
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 } }, '*'); 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()); // console.log(that.editor.graph.getSelectionCells());
// that.editor.graph.setCellStyles('property', '属性', [cells[0]]);//设置style里面拼接属性 // that.editor.graph.setCellStyles('property', '属性', [cells[0]]);//设置style里面拼接属性
...@@ -73,89 +109,103 @@ const initDrawioGraph = function(that) {//一进入画布显示的图形 ...@@ -73,89 +109,103 @@ const initDrawioGraph = function(that) {//一进入画布显示的图形
} }
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]
const pathTag = svgDocument.getElementsByTagName('path')[0]
const ellipseTag = svgDocument.getElementsByTagName('ellipse')[0]
if (rectTag) {
if (color) {
rectTag.setAttribute('fill', color) rectTag.setAttribute('fill', color)
} }
} }
if(pathTag) { if (pathTag) {
if(color) { if (color) {
pathTag.setAttribute('fill', color) pathTag.setAttribute('fill', color)
} }
} }
if(ellipseTag) { if (ellipseTag) {
if(color) { if (color) {
ellipseTag.setAttribute('fill', color) ellipseTag.setAttribute('fill', color)
} }
} }
svgTag.style.backgroundColor = 'transparent'; svgTag.style.backgroundColor = 'transparent'
// svgTag.setAttribute('a_123', 'a_123'); // svgTag.setAttribute('a_123', 'a_123');
if(dicys && dicys.length > 0) { if (dicys && dicys.length > 0) {
dicys.forEach(function(item2) { dicys.forEach(function (item2) {
// svgTag.setAttribute(encodeURIComponent(item2.fieldName), encodeURIComponent(item2.chineseName)); // svgTag.setAttribute(encodeURIComponent(item2.fieldName), encodeURIComponent(item2.chineseName));
if(item2.propertyValue) { if (item2.propertyValue) {
svgTag.setAttribute('attr_'+item2.fieldName, 'attr_'+Base64.encode(item2.propertyValue)+'&id=' + item2.propertyId); 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;"><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", aspect: 'fixed',
//data: "data:image/svg+xml;base64,PHN2ZyB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeT0iMHB4IiB4PSIwcHgiIHZlcnNpb249IjEuMSI+JiN4YTsJPG1ldGFkYXRhPiYjeGE7CQlTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiYjeGE7CTwvbWV0YWRhdGE+JiN4YTsJPGc+JiN4YTsJCTxnPiYjeGE7CQkJPHBhdGggZD0iTTIxNS4zLDEwMS41bDEzLjksMjQuMWwtOTcuNSw1LjNsMjIuNSwzOWw0My41LDQuN2w4LDEzLjhsLTU3LjUsMjIuM0wxMDYuMiwyNDZsLTguMS0xNGwxNy45LTQwLjRsLTIyLTM4LjFsLTUzLjMsODEuN2wtMTMuOS0yNC4xbDM3LjgtMTA4LjVsLTM0LTU4LjhjLTYuMy0xMS0zLTI0LjgsNy41LTMwLjljMTAuNS02LDI0LjItMiwzMC41LDguOWwzMy42LDU4LjFMMjE1LjMsMTAxLjV6IE0yMTMuOCwxMTcuM2wtNC40LTcuNmwtMTEzLTIxLjZMNjAuOCwyNi4zYy0zLjgtNi42LTExLjktOS4xLTE4LTUuNnMtOCwxMS44LTQuMiwxOC40bDM2LjEsNjIuNEwzNi44LDIxMC4xbDQuNCw3LjZsNTMuMy04MS43bDMxLjgsNTUuMWwtMTcuOSw0MC40bDAuMywwLjVsMzQuNS0yOWwxLjMtMC42bDQ3LjktMTguNmwtMC40LTAuNmwtNDMuNS00LjdsLTMyLjMtNTUuOUwyMTMuOCwxMTcuM3oiIGZpbGw9IiMwMDAwMDAiLz4mI3hhOwkJPC9nPiYjeGE7CTwvZz4mI3hhOzwvc3ZnPg==", //data: "data:image/svg+xml;base64,PHN2ZyB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeT0iMHB4IiB4PSIwcHgiIHZlcnNpb249IjEuMSI+JiN4YTsJPG1ldGFkYXRhPiYjeGE7CQlTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiYjeGE7CTwvbWV0YWRhdGE+JiN4YTsJPGc+JiN4YTsJCTxnPiYjeGE7CQkJPHBhdGggZD0iTTIxNS4zLDEwMS41bDEzLjksMjQuMWwtOTcuNSw1LjNsMjIuNSwzOWw0My41LDQuN2w4LDEzLjhsLTU3LjUsMjIuM0wxMDYuMiwyNDZsLTguMS0xNGwxNy45LTQwLjRsLTIyLTM4LjFsLTUzLjMsODEuN2wtMTMuOS0yNC4xbDM3LjgtMTA4LjVsLTM0LTU4LjhjLTYuMy0xMS0zLTI0LjgsNy41LTMwLjljMTAuNS02LDI0LjItMiwzMC41LDguOWwzMy42LDU4LjFMMjE1LjMsMTAxLjV6IE0yMTMuOCwxMTcuM2wtNC40LTcuNmwtMTEzLTIxLjZMNjAuOCwyNi4zYy0zLjgtNi42LTExLjktOS4xLTE4LTUuNnMtOCwxMS44LTQuMiwxOC40bDM2LjEsNjIuNEwzNi44LDIxMC4xbDQuNCw3LjZsNTMuMy04MS43bDMxLjgsNTUuMWwtMTcuOSw0MC40bDAuMywwLjVsMzQuNS0yOWwxLjMtMC42bDQ3LjktMTguNmwtMC40LTAuNmwtNDMuNS00LjdsLTMyLjMtNTUuOUwyMTMuOCwxMTcuM3oiIGZpbGw9IiMwMDAwMDAiLz4mI3hhOwkJPC9nPiYjeGE7CTwvZz4mI3hhOzwvc3ZnPg==",
data: svgImage, data: svgImage,
h: 256, h: 256,
title: "svg", title: 'svg',
w: 256 w: 256,
} },
]; ]
// xml格式数据，压缩或者不压缩的都行 // xml格式数据，压缩或者不压缩的都行
// const images_ = [ // const images_ = [
// { // {
// aspect: "fixed", // aspect: "fixed",
// xml: "tZTBUoMwEIafhisDpC30qG3Vg84404NHJ4UtZAwsExahPr0JhALWjnqQC/D9uyT7bxaHbfL2XvEye8IEpBN4SeuwrRMEfriI9M2QkyXLld+TVInEshHsxQdY6FlaiwSqWSAhShLlHMZYFBDTjHGlsJmHHVHOVy15ChdgH3N5SV9EQllPoyAc+QOINBtW9lfrXsn5EGwrqTKeYDNBbOewjUKk/ilvNyCNe4Mvfd7dFfW8MQUF/SYh6BPeuaxtbXZfdBqKVVgXCZh432G3TSYI9iWPjdro/mqWUS6tfBRSblCi6nKZ5/FDtDYcC5rwY3dpXpHCN5gowTZceZ5WdO+IiwIMN+92o6AI2qvF+mcL9eEDzIHUSYfYhIC54bJPasa2hYFrYTbp2cI2iNujkp6/NrqpH6yh35vLfjbX1CP0wXrkB5DPWAkSWGjpgESY67KHgBspUiMQfnFcn6DSfCxvUzNt7oFXInZ5XBO8khK8SM1at930ebrSf3E2WvQZdqAvTR4md2qx/3eL9es4G502+cWw3Sc=", // xml: "tZTBUoMwEIafhisDpC30qG3Vg84404NHJ4UtZAwsExahPr0JhALWjnqQC/D9uyT7bxaHbfL2XvEye8IEpBN4SeuwrRMEfriI9M2QkyXLld+TVInEshHsxQdY6FlaiwSqWSAhShLlHMZYFBDTjHGlsJmHHVHOVy15ChdgH3N5SV9EQllPoyAc+QOINBtW9lfrXsn5EGwrqTKeYDNBbOewjUKk/ilvNyCNe4Mvfd7dFfW8MQUF/SYh6BPeuaxtbXZfdBqKVVgXCZh432G3TSYI9iWPjdro/mqWUS6tfBRSblCi6nKZ5/FDtDYcC5rwY3dpXpHCN5gowTZceZ5WdO+IiwIMN+92o6AI2qvF+mcL9eEDzIHUSYfYhIC54bJPasa2hYFrYTbp2cI2iNujkp6/NrqpH6yh35vLfjbX1CP0wXrkB5DPWAkSWGjpgESY67KHgBspUiMQfnFcn6DSfCxvUzNt7oFXInZ5XBO8khK8SM1at930ebrSf3E2WvQZdqAvTR4md2qx/3eL9es4G502+cWw3Sc=",
// h: 430, // h: 430,
// title: "我的图库", // title: "我的图库",
// w: 360 // w: 360
// } // }
// ]; // ];
const leftCustomGraph = function(that) {//左侧自定义图形 const leftCustomGraph = function (that) {
//左侧自定义图形
// var xml = that.createLibraryDataFromImages(images_); // var xml = that.createLibraryDataFromImages(images_);
// var file = new LocalLibrary(that, xml, '图库'); // var file = new LocalLibrary(that, xml, '图库');
// that.libraryLoaded(file, images_, null, false); // that.libraryLoaded(file, images_, null, false);
// const standardGraph = JSON.parse(localStorage.getItem('standardGraph')); // const standardGraph = JSON.parse(localStorage.getItem('standardGraph'));
// standardGraph.forEach(function(item) { // standardGraph.forEach(function(item) {
// if(item.eleDtos) { // if(item.eleDtos) {
...@@ -192,34 +242,35 @@ const leftCustomGraph = function(that) {//左侧自定义图形 ...@@ -192,34 +242,35 @@ const leftCustomGraph = function(that) {//左侧自定义图形
// } // }
// }) // })
const joinGraph_ = JSON.parse(localStorage.getItem('joinGraph')); const joinGraph_ = JSON.parse(localStorage.getItem('joinGraph'))
const joinGraph = joinGraph_.graph; const joinGraph = joinGraph_.graph
if(joinGraph_.state == 1) {
joinGraph.pop(); if (joinGraph_.state == 1) {
joinGraph.forEach(function(item) { // 标准图元
if(item.eleDtos) { joinGraph.pop()
if(item.eleDtos.length > 0) { joinGraph.forEach(function (item, index) {
const libraryName = item.arciBelongName; if (item.eleDtos) {
let images = []; if (item.eleDtos.length > 0) {
item.eleDtos.forEach(function(item2) { const libraryName = item.arciBelongName
let images = []
item.eleDtos.forEach(function (item2) {
images.unshift({ images.unshift({
aspect: "fixed", aspect: 'fixed',
xml: item2.iconName, xml: item2.iconName,
h: 41, h: 41,
title: item2.eleName, title: item2.eleName,
w: 71 w: 71,
}) })
}) })
var xml = that.createLibraryDataFromImages(images); var xml = that.createLibraryDataFromImages(images)
var file = new LocalLibrary(that, xml, libraryName);
that.libraryLoaded(file, images, null, false);
}else {
var file = new LocalLibrary(that, xml, libraryName)
that.libraryLoaded(file, images, null, false)
} else {
} }
} }
}) })
}else { } else {
// joinGraph.forEach(item => { // joinGraph.forEach(item => {
// item.eleDtos.forEach(item2 => { // item.eleDtos.forEach(item2 => {
// if(item2.eleType == '1') { // if(item2.eleType == '1') {
...@@ -231,21 +282,36 @@ const leftCustomGraph = function(that) {//左侧自定义图形 ...@@ -231,21 +282,36 @@ const leftCustomGraph = function(that) {//左侧自定义图形
} }
//二次开发，创建时不必先保存文件至本地，定义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();
...@@ -259,9 +325,6 @@ const setGraphOnlyView = function(graph) { ...@@ -259,9 +325,6 @@ const setGraphOnlyView = function(graph) {
// 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.setEnabled(false);
// graph.setCellsEditable(false); // graph.setCellsEditable(false);
// graph.setTooltips(false); // graph.setTooltips(false);
...@@ -274,11 +337,10 @@ const setGraphOnlyView = function(graph) { ...@@ -274,11 +337,10 @@ const setGraphOnlyView = function(graph) {
// return 'pointer'; // 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';
...@@ -295,27 +357,20 @@ var exToolbar = function (toolbarContainer) {//版本发布按钮 ...@@ -295,27 +357,20 @@ var exToolbar = function (toolbarContainer) {//版本发布按钮
// 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 // // Prevents focus
// mxEvent.addListener(this.toggleElement, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', // mxEvent.addListener(this.toggleElement, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown',
// mxUtils.bind(this, function (evt) { // mxUtils.bind(this, function (evt) {
// evt.preventDefault(); // evt.preventDefault();
// })); // }));
// // Toggles compact mode // // Toggles compact mode
// mxEvent.addListener(this.toggleElement, 'click', mxUtils.bind(this, function (evt) { // mxEvent.addListener(this.toggleElement, 'click', mxUtils.bind(this, function (evt) {
// window.parent.postMessage({ type: 'saveVersion' }, '*'); // window.parent.postMessage({ type: 'saveVersion' }, '*');
// })); // }));
// if (Editor.currentTheme != 'atlas') { // if (Editor.currentTheme != 'atlas') {
// toolbarContainer.appendChild(this.toggleElement); // toolbarContainer.appendChild(this.toggleElement);
// } // }
// // Enable compact mode for small screens except for Firefox where the height is wrong // // 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') { // if (!mxClient.IS_FF && screen.height <= 740 && typeof this.toggleElement.click !== 'undefined') {
// window.setTimeout(mxUtils.bind(this, function () { // window.setTimeout(mxUtils.bind(this, function () {
...@@ -324,8 +379,8 @@ var exToolbar = function (toolbarContainer) {//版本发布按钮 ...@@ -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 = document.createElement('a');
// this.toggleElement.setAttribute('title', '返回上级图形'); // this.toggleElement.setAttribute('title', '返回上级图形');
// this.toggleElement.style.position = 'absolute'; // this.toggleElement.style.position = 'absolute';
...@@ -342,13 +397,10 @@ var backGraph = function (that, toolbarContainer) {//返回上级图形按钮 ...@@ -342,13 +397,10 @@ var backGraph = function (that, toolbarContainer) {//返回上级图形按钮
// 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 // // Toggles compact mode
// mxEvent.addListener(this.toggleElement, 'click', mxUtils.bind(this, function (evt) { // mxEvent.addListener(this.toggleElement, 'click', mxUtils.bind(this, function (evt) {
// console.log('上级图形'); // console.log('上级图形');
// const xml = localStorage.getItem('xmlData'); // const xml = localStorage.getItem('xmlData');
// const mockFile = { // const mockFile = {
...@@ -359,11 +411,8 @@ var backGraph = function (that, toolbarContainer) {//返回上级图形按钮 ...@@ -359,11 +411,8 @@ var backGraph = function (that, toolbarContainer) {//返回上级图形按钮
// that.fileLoaded(null); // that.fileLoaded(null);
// that.spinner.stop(); // that.spinner.stop();
// const file = new LocalFile(that, mockFile.data, mockFile.title, null); // const file = new LocalFile(that, mockFile.data, mockFile.title, null);
// that.loadFile(`-3`, true, file); // that.loadFile(`-3`, true, file);
// })); // }));
// if (Editor.currentTheme != 'atlas') { // if (Editor.currentTheme != 'atlas') {
// toolbarContainer.appendChild(this.toggleElement); // toolbarContainer.appendChild(this.toggleElement);
// } // }
......
src/views/archi-view-manage/index.vue
...@@ -10,16 +10,33 @@ ...@@ -10,16 +10,33 @@
: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> </el-tree>
<div class="right_container"> <div class="right_container">
<el-tabs v-model="activeName" type="border-card"> <el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="暂存" name="暂存"> <el-tab-pane label="暂存" name="暂存">
<div class="card_container"> <div class="card_container">
<div class="card_body"> <div class="card_body">
<el-card class="card_item" v-for="item in zanCun" :key="item.metaModelId"> <el-card
<img class="card_image" v-if="item.metaModelSvg_" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" /> class="card_item"
<img class="card_image" v-else @click="to_current_details(item)" src="@/assets/meta-model-list/default_img.png" alt="" /> 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_info">
<div class="card_title"> <div class="card_title">
<i class="el-icon-location"></i> <i class="el-icon-location"></i>
...@@ -30,28 +47,49 @@ ...@@ -30,28 +47,49 @@
</div> </div>
</div> </div>
</el-card> </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> <i class="el-icon-plus"></i>
</div> </div>
</div> </div>
</div> </div>
<el-pagination <el-pagination
background background
@size-change="val => handleSizeChange(val, '暂存')" @size-change="(val) => handleSizeChange(val, '暂存')"
@current-change="val => handleCurrentChange(val, '暂存')" @current-change="(val) => handleCurrentChange(val, '暂存')"
:current-page="pager2.current" :current-page="pager2.current"
:page-sizes="pager2.sizes" :page-sizes="pager2.sizes"
:page-size="pager2.size" :page-size="pager2.size"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="pager2.total"> :total="pager2.total"
>
</el-pagination> </el-pagination>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="停用" name="停用"> <el-tab-pane label="停用" name="停用">
<div class="card_container"> <div class="card_container">
<div class="card_body"> <div class="card_body">
<el-card class="card_item" v-for="item in tingYong" :key="item.metaModelId"> <el-card
<img class="card_image" v-if="item.metaModelSvg_" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" /> class="card_item"
<img class="card_image" v-else @click="to_current_details(item)" src="@/assets/meta-model-list/default_img.png" alt="" /> 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_info">
<div class="card_title"> <div class="card_title">
<i class="el-icon-location"></i> <i class="el-icon-location"></i>
...@@ -62,28 +100,49 @@ ...@@ -62,28 +100,49 @@
</div> </div>
</div> </div>
</el-card> </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> <i class="el-icon-plus"></i>
</div> </div>
</div> </div>
</div> </div>
<el-pagination <el-pagination
background background
@size-change="val => handleSizeChange(val, '停用')" @size-change="(val) => handleSizeChange(val, '停用')"
@current-change="val => handleCurrentChange(val, '停用')" @current-change="(val) => handleCurrentChange(val, '停用')"
:current-page="pager3.current" :current-page="pager3.current"
:page-sizes="pager3.sizes" :page-sizes="pager3.sizes"
:page-size="pager3.size" :page-size="pager3.size"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="pager3.total"> :total="pager3.total"
>
</el-pagination> </el-pagination>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="发布" name="发布"> <el-tab-pane label="发布" name="发布">
<div class="card_container"> <div class="card_container">
<div class="card_body"> <div class="card_body">
<el-card class="card_item" v-for="item in yiFaBu" :key="item.metaModelId"> <el-card
<img class="card_image" v-if="item.metaModelSvg_" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" /> class="card_item"
<img class="card_image" v-else @click="to_current_details(item)" src="@/assets/meta-model-list/default_img.png" alt="" /> 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_info">
<div class="card_title"> <div class="card_title">
<i class="el-icon-location"></i> <i class="el-icon-location"></i>
...@@ -94,20 +153,25 @@ ...@@ -94,20 +153,25 @@
</div> --> </div> -->
</div> </div>
</el-card> </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> <i class="el-icon-plus"></i>
</div> </div>
</div> </div>
</div> </div>
<el-pagination <el-pagination
background background
@size-change="val => handleSizeChange(val, '发布')" @size-change="(val) => handleSizeChange(val, '发布')"
@current-change="val => handleCurrentChange(val, '发布')" @current-change="(val) => handleCurrentChange(val, '发布')"
:current-page="pager1.current" :current-page="pager1.current"
:page-sizes="pager1.sizes" :page-sizes="pager1.sizes"
:page-size="pager1.size" :page-size="pager1.size"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="pager1.total"> :total="pager1.total"
>
</el-pagination> </el-pagination>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
...@@ -116,11 +180,16 @@ ...@@ -116,11 +180,16 @@
title="新建架构视图" title="新建架构视图"
:visible.sync="add_dialog" :visible.sync="add_dialog"
:center="false" :center="false"
width="40%"> width="40%"
>
<div class="add_dialog_content"> <div class="add_dialog_content">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item label="版本名称" prop="name"> <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-item>
</el-form> </el-form>
</div> </div>
...@@ -141,16 +210,16 @@ import { ...@@ -141,16 +210,16 @@ import {
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 {
...@@ -159,8 +228,8 @@ export default { ...@@ -159,8 +228,8 @@ export default {
{ {
viewId: 0, viewId: 0,
viewName: '架构视图管理', viewName: '架构视图管理',
subList: [] subList: [],
} },
], ],
treeDefaultExpand: [], treeDefaultExpand: [],
currentNodekey: null, currentNodekey: null,
...@@ -169,19 +238,19 @@ export default { ...@@ -169,19 +238,19 @@ export default {
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: [],
...@@ -192,261 +261,317 @@ export default { ...@@ -192,261 +261,317 @@ export default {
name: '', name: '',
}, },
rules: { rules: {
name: [ name: [{ required: true, message: '请输入版本名称', trigger: 'blur' }],
{ required: true, message: '请输入版本名称', trigger: 'blur' },
],
}, },
addStatus: null, addStatus: null,
graphGroup: null, graphGroup: null,
archiType: null, archiType: null,
}; }
}, },
mounted(){ mounted() {
this.getData(); this.getData()
}, },
methods: { methods: {
queryDrawioGraph(id) {//查询画布左侧常规图形 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('确定删除?', '提示', { MessageBox.confirm('确定删除?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
customClass: 'messageClass', customClass: 'messageClass',
confirmButtonClass: 'confirmClass', confirmButtonClass: 'confirmClass',
type: 'warning' type: 'warning',
}).then(() => { })
.then(() => {
const params = { const params = {
ids: [item.viewDetailsId], ids: [item.viewDetailsId],
} }
deleteArchiViewManage(params).then(res => { deleteArchiViewManage(params).then((res) => {
if(res.code == 200) { if (res.code == 200) {
this.get_list1(); this.get_list1()
this.get_list2(); this.get_list2()
this.get_list3(); this.get_list3()
Message({ Message({
type: 'success', type: 'success',
message: '删除成功!', message: '删除成功!',
}); })
}else { } else {
Message({ Message({
type: 'error', type: 'error',
message: res.msg message: res.msg,
}); })
} }
}) })
}).catch(() => { })
.catch(() => {
Message({ Message({
type: 'info', type: 'info',
message: '已取消' message: '已取消',
}); })
}); })
}, },
open_dialog(status) {//打开新增对话框 open_dialog(status) {
this.addStatus = status; //打开新增对话框
this.add_dialog = true; // 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() {//弹框点击确定 ok() {
this.$refs.ruleForm.validate(valid => { //弹框点击确定
if(valid) { this.$refs.ruleForm.validate((valid) => {
let state; if (valid) {
switch(this.addStatus){ let state
switch (this.addStatus) {
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, version: this.ruleForm.name,
viewId: this.viewId, viewId: this.viewId,
state: state state: state,
}; }
addArchiViewManage(params).then(res => { addArchiViewManage(params).then((res) => {
if(res.code == 200) { if (res.code == 200) {
this.add_dialog = false; this.add_dialog = false
this.get_list1(); this.get_list1()
this.get_list2(); this.get_list2()
this.get_list3(); this.get_list3()
Message({ Message({
type: 'success', type: 'success',
message: '新增成功!' message: '新增成功!',
}); })
}else { } else {
Message({ Message({
type: 'error', type: 'error',
message: res.msg message: res.msg,
}); })
} }
}) })
} else { } else {
console.log('error submit!!'); console.log('error submit!!')
return false; return false
} }
}); })
}, },
// 每页条数改变 // 每页条数改变
handleSizeChange(val, status) { handleSizeChange(val, status) {
switch(status){ switch (status) {
case '发布': case '发布':
this.pager1.current = 1; this.pager1.current = 1
this.pager1.size = val; this.pager1.size = val
this.get_list1(); this.get_list1()
break; break
case '暂存': case '暂存':
this.pager2.current = 1; this.pager2.current = 1
this.pager2.size = val; this.pager2.size = val
this.get_list2(); this.get_list2()
break; break
case '停用': case '停用':
this.pager3.current = 1; this.pager3.current = 1
this.pager3.size = val; this.pager3.size = val
this.get_list3(); this.get_list3()
break; break
} }
}, },
//当前页码改变 //当前页码改变
handleCurrentChange(val, status) { handleCurrentChange(val, status) {
switch(status){ switch (status) {
case '发布': case '发布':
this.pager1.current = val; this.pager1.current = val
this.get_list1(); this.get_list1()
break; break
case '暂存': case '暂存':
this.pager2.current = val; this.pager2.current = val
this.get_list2(); this.get_list2()
break; break
case '停用': case '停用':
this.pager3.current = val; this.pager3.current = val
this.get_list3(); this.get_list3()
break; break
} }
}, },
get_list1(){//获取已发布数据 get_list1() {
//获取已发布数据
const params = { const params = {
current: this.pager1.current, current: this.pager1.current,
pageSize: this.pager1.size, pageSize: this.pager1.size,
viewId: this.viewId, viewId: this.viewId,
state: 1 state: 1,
} }
getArchiViewManageDetail(params).then(res => { getArchiViewManageDetail(params).then((res) => {
if(res.code == 200) { if (res.code == 200) {
res.data.records.map(item => { res.data.records.map((item) => {
if(item.metaModelSvg) { if (item.metaModelSvg) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg; item['metaModelSvg_'] =
}else { 'data:image/svg+xml;base64,' + item.metaModelSvg
item['metaModelSvg_'] = null; } else {
item['metaModelSvg_'] = null
} }
}); })
this.yiFaBu = res.data.records; this.yiFaBu = res.data.records
this.pager1.current = res.data.current; this.pager1.current = res.data.current
this.pager1.total = res.data.total; this.pager1.total = res.data.total
} }
}) })
}, },
get_list2(){//获取暂存数据 get_list2() {
//获取暂存数据
const params = { const params = {
current: this.pager2.current, current: this.pager2.current,
pageSize: this.pager2.size, pageSize: this.pager2.size,
viewId: this.viewId, viewId: this.viewId,
state: 2 state: 2,
} }
getArchiViewManageDetail(params).then(res => { getArchiViewManageDetail(params).then((res) => {
if(res.code == 200) { if (res.code == 200) {
res.data.records.map(item => { res.data.records.map((item) => {
if(item.metaModelSvg) { if (item.metaModelSvg) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg; item['metaModelSvg_'] =
}else { 'data:image/svg+xml;base64,' + item.metaModelSvg
item['metaModelSvg_'] = null; } else {
item['metaModelSvg_'] = null
} }
}); })
this.zanCun = res.data.records; this.zanCun = res.data.records
this.pager2.current = res.data.current; this.pager2.current = res.data.current
this.pager2.total = res.data.total; this.pager2.total = res.data.total
} }
}) })
}, },
get_list3(){//获取停用数据 get_list3() {
//获取停用数据
const params = { const params = {
current: this.pager3.current, current: this.pager3.current,
pageSize: this.pager3.size, pageSize: this.pager3.size,
viewId: this.viewId, viewId: this.viewId,
state: 0 state: 0,
} }
getArchiViewManageDetail(params).then(res => { getArchiViewManageDetail(params).then((res) => {
if(res.code == 200) { if (res.code == 200) {
res.data.records.map(item => { res.data.records.map((item) => {
if(item.metaModelSvg) { if (item.metaModelSvg) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg; item['metaModelSvg_'] =
}else { 'data:image/svg+xml;base64,' + item.metaModelSvg
item['metaModelSvg_'] = null; } else {
item['metaModelSvg_'] = null
} }
}); })
this.tingYong = res.data.records this.tingYong = res.data.records
this.pager3.current = res.data.current; this.pager3.current = res.data.current
this.pager3.total = res.data.total; this.pager3.total = res.data.total
} }
}) })
}, },
to_current_details(item) {//跳转到详情 to_current_details(item) {
//跳转到详情
const params = { const params = {
viewDetailsId: item.viewDetailsId viewDetailsId: item.viewDetailsId,
} }
queryArchiViewManageCardDetails(params).then(res => { queryArchiViewManageCardDetails(params).then((res) => {
if(res.code == 200) { if (res.code == 200) {
const xmlData = res.data.metaModelData; const xmlData = res.data.metaModelData
const xmlTitle = res.data.version; const xmlTitle = res.data.version
const id = res.data.viewDetailsId; 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 }),
)
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) => { return new Promise((resolve, reject) => {
const params = { const params = {
archiAssetState: 2, archiAssetState: 2,
...@@ -455,191 +580,199 @@ export default { ...@@ -455,191 +580,199 @@ export default {
state: 1, state: 1,
archiBelongId: this.graphGroup, archiBelongId: this.graphGroup,
archiType: this.archiType, archiType: this.archiType,
archiViewId: this.viewId archiViewId: this.viewId,
} }
queryArchiGraph(params).then(res => { queryArchiGraph(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)
} }
}) })
}) })
}, },
treeClick(data, node, e) {//树点击的时候 treeClick(data, node, e) {
if(!data.subList) { //树点击的时候
this.graphGroup = node.parent.data.viewId; if (!data.subList) {
this.archiType = node.parent.data.archiType; this.graphGroup = node.parent.data.viewId
this.viewId = data.viewId; this.archiType = node.parent.data.archiType
this.pager1.current = 1; this.viewId = data.viewId
this.pager2.current = 1; this.pager1.current = 1
this.pager3.current = 1; this.pager2.current = 1
this.get_list1(); this.pager3.current = 1
this.get_list2(); this.get_list1()
this.get_list3(); this.get_list2()
}else { this.get_list3()
this.viewId = null; } else {
this.yiFaBu = []; this.viewId = null
this.zanCun = []; this.yiFaBu = []
this.tingYong = []; this.zanCun = []
this.pager1.total = 0; this.tingYong = []
this.pager2.total = 0; this.pager1.total = 0
this.pager3.total = 0; this.pager2.total = 0
this.pager3.total = 0
} }
}, },
getData() {//获取树节点内容 getData() {
//获取树节点内容
const params = { const params = {
archiStage: 1 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();
} }
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
.el-tree-node.is-current
> .el-tree-node__content {
background-color: #0d867f;
color: #fff; color: #fff;
} }
/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content >.is-leaf{ /deep/
background-color: #0D867F !important; .el-tree--highlight-current
} .el-tree-node.is-current
/deep/ .el-dialog__header{ > .el-tree-node__content
background-color: #0D867F; > .is-leaf {
background-color: #0d867f !important;
}
/deep/ .el-dialog__header {
background-color: #0d867f;
text-align: left; text-align: left;
} }
/deep/ .el-dialog__title{ /deep/ .el-dialog__title {
color: #fff; color: #fff;
} }
/deep/ .el-dialog__close { /deep/ .el-dialog__close {
color: #fff; color: #fff;
} }
.el-form-item{ .el-form-item {
display: flex; display: flex;
} }
/deep/ .el-form-item__content{ /deep/ .el-form-item__content {
width: 80%; width: 80%;
} }
/deep/ .is-leaf { /deep/ .is-leaf {
background-color: #fff !important; background-color: #fff !important;
} }
.greenButton{ .greenButton {
background-color: #0D867F; background-color: #0d867f;
color: #fff; color: #fff;
} }
.archiViewManage{ .archiViewManage {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
.filter-tree{ .filter-tree {
width: 300px; width: 300px;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
// border: 1px solid pink; // border: 1px solid pink;
} }
.right_container{ .right_container {
width: calc(100% - 300px); width: calc(100% - 300px);
height: 100%; height: 100%;
// border: 1px solid blue; // border: 1px solid blue;
.el-tabs{ .el-tabs {
height: 100%; height: 100%;
} }
.el-tab-pane{ .el-tab-pane {
height: 100%; height: 100%;
position: relative; position: relative;
} }
.el-pagination{ .el-pagination {
position: absolute; position: absolute;
bottom: 5%; bottom: 5%;
left: 35%; left: 35%;
background-color: #fff; background-color: #fff;
} }
.card_container{ .card_container {
overflow-x: hidden; overflow-x: hidden;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
text-align: left; text-align: left;
.card_body{ .card_body {
height: 2000px; height: 2000px;
.add_container{ .add_container {
width: 350px; width: 350px;
height: 240px; height: 240px;
margin: 15px; margin: 15px;
background-color: #F2FFFE; background-color: #f2fffe;
cursor: pointer; cursor: pointer;
float: left; float: left;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
i{ i {
font-size: 60px; font-size: 60px;
} }
} }
.card_item{ .card_item {
width: 345px; width: 345px;
height: 240px; height: 240px;
margin: 15px; margin: 15px;
background-color: #F2FFFE; background-color: #f2fffe;
cursor: pointer; cursor: pointer;
float: left; float: left;
text-align: center; text-align: center;
.card_image{ .card_image {
width: 165px; width: 165px;
height: 127px; height: 127px;
} }
.card_info{ .card_info {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin: 30px 0 0 0; margin: 30px 0 0 0;
.card_icon{ .card_icon {
cursor: pointer; cursor: pointer;
} }
} }
} }
} }
} }
/deep/ .el-tabs__content{ /deep/ .el-tabs__content {
height: calc(100% - 38px); height: calc(100% - 38px);
padding: 0; padding: 0;
} }
.el-pagination{ .el-pagination {
margin-top: 15px; margin-top: 15px;
} }
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #0D867F; 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!