Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 2fa57e03 by 史敦盼
Options

注册元素图标

1 parent c17590d1
Inline Side-by-side
Showing with 286 additions and 95 deletions
public/drawio/extention/js/exApp.js
......@@ -6,12 +6,18 @@ const initDrawioGraph = function (that) {
that.loadFile(`-2`, true, file)
} else {
// const jsonToGraph = JSON.parse(localStorage.getItem('jsonToGraph'))
// console.log('jsonToGraph', JSON.parse(jsonToGraph))
// console.log('that', that)
const xmlData = localStorage.getItem('xmlData')
const xmlTitle = localStorage.getItem('xmlTitle')
let joinGraph_ = null;
let xmlData = ''
let xmlTitle = ''
if(urlParams.page === 'metaModelListDetails') {
joinGraph_ = JSON.parse(localStorage.getItem('metaModelJoinGraph'));
xmlData = localStorage.getItem('metamodelXmlData')
xmlTitle = localStorage.getItem('metamodelXmlTitle')
} else {
joinGraph_ = JSON.parse(localStorage.getItem('joinGraph'));
xmlData = localStorage.getItem('xmlData')
xmlTitle = localStorage.getItem('xmlTitle')
}
const file = new LocalFile(that, xmlData, xmlTitle, that.mode)
that.loadFile(`-1`, true, file)
}
......@@ -245,45 +251,38 @@ const leftCustomGraph = function (that) {
// }
// })
const joinGraph_ = JSON.parse(localStorage.getItem('joinGraph'))
const joinGraph = joinGraph_.graph
// const joinGraph_ = JSON.parse(localStorage.getItem('joinGraph'))
// const joinGraph = joinGraph_.graph
if (joinGraph_.state == 1) {
// 标准图元
joinGraph.pop()
Sidebar.prototype.sidebarTitles = true;//勾选标签
// Sidebar.prototype.createEdgeTemplateEntry
joinGraph.forEach(function (item, index) {
if (item.eleDtos) {
if (item.eleDtos.length > 0) {
const libraryName = item.arciBelongName
let images = []
item.eleDtos.forEach(function (item2) {
images.unshift({
aspect: 'fixed',
xml: item2.iconName,
h: 41,
title: item2.eleName,
w: 71,
})
})
var xml = that.createLibraryDataFromImages(images)
var file = new LocalLibrary(that, xml, libraryName)
that.libraryLoaded(file, images, null, true)
} else {
}
}
})
} else {
// joinGraph.forEach(item => {
// item.eleDtos.forEach(item2 => {
// if(item2.eleType == '1') {
// console.log(item2)
// }
// })
// })
}
// if (joinGraph_.state == 1) {
// // 标准图元
// joinGraph.pop()
// Sidebar.prototype.sidebarTitles = true;//勾选标签
// // Sidebar.prototype.createEdgeTemplateEntry
// joinGraph.forEach(function (item, index) {
// if (item.eleDtos) {
// if (item.eleDtos.length > 0) {
// const libraryName = item.arciBelongName
// let images = []
// item.eleDtos.forEach(function (item2) {
// images.unshift({
// aspect: 'fixed',
// xml: item2.iconName,
// h: 41,
// title: item2.eleName,
// w: 71,
// })
// })
// var xml = that.createLibraryDataFromImages(images)
// var file = new LocalLibrary(that, xml, libraryName)
// that.libraryLoaded(file, images, null, true)
// } else {
// }
// }
// })
// } else {
// }
}
//二次开发，创建时不必先保存文件至本地，定义Dialogs.js文件里面的createTemporaryFile函数
......
public/drawio/extention/js/exGraph.js
......@@ -39,9 +39,12 @@
{
Sidebar.prototype.addCustomGraph = function()
{
const joinGraph_ = JSON.parse(localStorage.getItem('joinGraph'));
let joinGraph_ = null;
if(urlParams.page === 'metaModelListDetails') {
joinGraph_ = JSON.parse(localStorage.getItem('metaModelJoinGraph'));
} else {
joinGraph_ = JSON.parse(localStorage.getItem('joinGraph'));
}
const joinGraph = joinGraph_.graph;
this.sidebarTitles = true;//勾选标签
if(joinGraph_.state == 1) {
......@@ -49,42 +52,76 @@
if(item.arciBelongName == '架构元素关系') {
let fns = [];
item.eleDtos.forEach(item2 => {
fns.push(
this.createEdgeTemplateEntry(
let archi = null
archi = this.createEdgeTemplateEntry(
item2.iconName + 'attr=[];assetName=[' + item2.rsName + '];',
item2.shapeWidth ? item2.shapeWidth : 150,
item2.shapeHeight ? item2.shapeHeight : 75,
'',
item2.rsName,
item2.rsName,
null,
'非封闭图形2'
'非封闭图形2'
)
)
fns.push(archi)
});
this.addPaletteFunctions(item.arciBelongId, item.arciBelongName, true, fns);
}
this.addPaletteFunctions(item.arciBelongId, item.arciBelongName, true, fns);
} else {
let fns = [];
item.eleDtos.forEach(item2 => {
// if(item2.assets && item2.dicys) {
let attr_ = [];
// item2.dicys.forEach(res => {
// if(res.fieldName) {
// attr_.push(
// {
// name: res.fieldName,
// value: res.propertyValue,
// id: res.propertyId,
// controlType: res.controlType,
// }
// )
// }
// })
fns.push(
this.createVertexTemplateEntry(
// 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#d2edfd;shape=mxgraph.archimate3.application;appType=rightTopCircleHasLeft;archiType=rounded',
item2.iconName,
item2.shapeWidth ? item2.shapeWidth : 71,
item2.shapeHeight ? item2.shapeHeight : 41,
null,
item2.eleName,
null,
null,
'封闭图形2'
)
)
// }
});
this.addPaletteFunctions(item.eleBelongId, item.arciBelongName, true, fns);
}
})
}
if(joinGraph_.state == 2) {
// console.log(joinGraph)
joinGraph.forEach(item => {
if(item.arciBelongName == '架构元素关系') {
let fns = [];
item.eleDtos.forEach(item2 => {
fns.push(
this.createEdgeTemplateEntry(
item2.iconName + 'attr=[];assetName=[' + item2.rsName + '];',
item2.shapeWidth ? item2.shapeWidth : 150,
item2.shapeHeight ? item2.shapeHeight : 75,
'',
item2.rsName,
null,
'非封闭图形2'
)
)
});
this.addPaletteFunctions(item.arciBelongId, item.arciBelongName, true, fns);
}else {
// if(item.arciBelongName == '架构元素关系') {
// let fns = [];
// item.eleDtos.forEach(item2 => {
// fns.push(
// this.createEdgeTemplateEntry(
// // 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ffff;shape=mxgraph.archimate3.application;appType=rightTopCircle;archiType=rounded',
// item2.iconName + 'attr=[];assetName=[' + item2.rsName + '];',
// item2.shapeWidth ? item2.shapeWidth : 150,
// item2.shapeHeight ? item2.shapeHeight : 75,
// '',
// item2.rsName,
// null,
// '非封闭图形2'
// )
// )
// });
// this.addPaletteFunctions(item.arciBelongId, item.arciBelongName, true, fns);
// }else {
item.eleDtos.forEach(item2 => {
if(item2.assets && item2.dicys) {
let fns = [];
......@@ -106,9 +143,10 @@
// console.log(item3.fieldsValue)
fns.push(
this.createVertexTemplateEntry(
// 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ffff;shape=mxgraph.archimate3.application;appType=rightTopTriangle;archiType=rounded',
item2.iconName + ';fillColor=' + item2.color + ';' + 'attr=' + JSON.stringify(attr_) + ';assetId=' + item3.assetId + ';archiBelongId=' + item3.archiBelongId + ';assetName=[' + item3.assetName + '];eleName=' + item2.eleName +';elementId=' + item2.elementId + ';eaLevel=' + item2.eaLevel + ';',
item2.shapeWidth ? item2.shapeWidth : 150,
item2.shapeHeight ? item2.shapeHeight : 75,
item2.shapeWidth ? item2.shapeWidth : 80,
item2.shapeHeight ? item2.shapeHeight : 40,
null,
item3.assetName,
null,
......@@ -120,7 +158,7 @@
this.addPaletteFunctions(item2.eleBelongId, item2.eleName, true, fns);
}
});
}
// }
});
}
};
......
public/drawio/images/archiRightTopTriangle.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713148019040" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3261" width="64" height="64" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M905.216 895.488H119.808c-11.264 0-22.016-6.144-27.648-15.872-5.632-9.728-5.632-22.016 0-31.744L484.864 167.424c5.632-9.728 16.384-15.872 27.648-15.872s22.016 6.144 27.648 15.872l392.704 679.936c5.632 9.728 5.632 22.016 0 31.744s-16.384 16.384-27.648 16.384zM175.104 831.488H849.92L512.512 247.296 175.104 831.488z" fill="#2c2c2c" p-id="3262"></path></svg>
\ No newline at end of file
public/drawio/index.html
......@@ -454,6 +454,9 @@
background-color: #fff;
display: none;
}
.geFormatContainer .geToolbarContainer {
display: block;
}
/* 二次开发，设置左右侧工具栏位置 */
.geSidebarContainer{
top: 3px !important;
......
public/drawio/js/diagramly/sidebar/Sidebar.js
......@@ -1043,7 +1043,7 @@
}
// 二次开发-画布只保留五大架构元素关系图标
const joinGraph_ = JSON.parse(localStorage.getItem('joinGraph'));
if(joinGraph_.state == 2) {
if(joinGraph_ && joinGraph_.state == 2) {
this.addGeneralPalette(this.customEntries == null);//通用图形
}
// this.addMiscPalette(false); //杂项图形
......
public/drawio/shapes/mxArchiMate3.js
......@@ -60,7 +60,13 @@ mxArchiMate3Application.prototype.cst = {
ARCHI_TYPE : 'archiType',
TYPE_SQUARE : 'square',
TYPE_ROUNDED : 'rounded',
TYPE_OCT : 'oct'
TYPE_OCT : 'oct',
// 二次开发自定义右上角角标图形
rightTopCircle: 'rightTopCircle',
rightTopTriangle: 'rightTopTriangle',
circleAndTriangle: 'circleAndTriangle',
rightTopCircleHasLeft: 'rightTopCircleHasLeft',
rightTopCircleAndTriangleHasLeft: 'rightTopCircleAndTriangleHasLeft'
};
mxArchiMate3Application.prototype.customProperties = [
......@@ -123,7 +129,7 @@ mxArchiMate3Application.prototype.background = function(c, x, y, w, h)
if (archiType === 'rounded')
{
c.roundrect(0, 0, w, h, 10, 10);
c.roundrect(0, 0, w, h, 6, 6);
}
else if ((archiType === 'oct') && w >= 20 && h >= 20)
{
......@@ -480,6 +486,37 @@ mxArchiMate3Application.prototype.foreground = function(c, x, y, w, h)
mxArchiMate3Path.prototype.background(c, x, y, w, h);
}
// 二次开发- 添加矩形图（右上角圆形角标）
else if (type === mxArchiMate3Application.prototype.cst.rightTopCircle)
{
c.translate(0, 3);
h = h - 6;
mxArchiMateRightTopCircle.prototype.background(c, x, y, w, h);
}
else if (type === mxArchiMate3Application.prototype.cst.rightTopTriangle)
{
c.translate(0, 3);
h = h - 6;
mxArchiMateRightTopTriangle.prototype.background(c, x, y, w, h);
}
else if (type === mxArchiMate3Application.prototype.cst.circleAndTriangle)
{
c.translate(0, 3);
h = h - 6;
mxArchiMateRightTopCircleAndTriangle.prototype.background(c, x, y, w, h);
}
else if (type === mxArchiMate3Application.prototype.cst.rightTopCircleHasLeft)
{
c.translate(0, 3);
h = h - 6;
mxArchiMateRightTopCircleHasLeft.prototype.background(c, x, y, w, h);
}
else if (type === mxArchiMate3Application.prototype.cst.rightTopCircleAndTriangleHasLeft)
{
c.translate(0, 3);
h = h - 6;
mxArchiMateRightTopCircleAndTriangleHasLeft.prototype.background(c, x, y, w, h);
}
};
mxCellRenderer.registerShape(mxArchiMate3Application.prototype.cst.APPLICATION, mxArchiMate3Application);
......@@ -975,7 +1012,110 @@ mxArchiMate3Service.prototype.background = function(c, x, y, w, h)
};
mxCellRenderer.registerShape(mxArchiMate3Service.prototype.cst.SERVICE, mxArchiMate3Service);
// 二次开发自定义右上角圆形右角标
// 右上角圆形
function mxArchiMateRightTopCircle(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
mxUtils.extend(mxArchiMateRightTopCircle, mxArchiMate3Service);
mxArchiMateRightTopCircle.prototype.cst = {
rightTopCircle : 'mxgraph.archimate3.rightTopCircle'
};
mxArchiMateRightTopCircle.prototype.background = function(c, x, y, w, h) {
c.ellipse(4, -6, 10, 10);
c.fillAndStroke();
}
mxCellRenderer.registerShape(mxArchiMateRightTopCircle.prototype.cst.rightTopCircle, mxArchiMateRightTopCircle);
// 右上角三角形
function mxArchiMateRightTopTriangle(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
mxUtils.extend(mxArchiMateRightTopTriangle, mxArchiMate3Service);
mxArchiMateRightTopTriangle.prototype.cst = {
rightTopTriangle : 'mxgraph.archimate3.rightTopTriangle'
};
mxArchiMateRightTopTriangle.prototype.background = function(c, x, y, w, h) {
c.image(4, -6, 12, 12, 'images/archiRightTopTriangle.svg');
c.fillAndStroke();
}
mxCellRenderer.registerShape(mxArchiMateRightTopTriangle.prototype.cst.rightTopCircle, mxArchiMateRightTopTriangle);
// 右上角圆圈套三角
function mxArchiMateRightTopCircleAndTriangle(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
mxUtils.extend(mxArchiMateRightTopCircleAndTriangle, mxArchiMate3Service);
mxArchiMateRightTopCircleAndTriangle.prototype.cst = {
circleAndTriangle : 'mxgraph.archimate3.circleAndTriangle'
};
mxArchiMateRightTopCircleAndTriangle.prototype.background = function(c, x, y, w, h) {
// console.log('w', w, 'h', h, c)
c.ellipse(4, -5, 12, 12);
c.fillAndStroke();
c.image(4, -6, 12, 12, 'images/archiRightTopTriangle.svg');
c.fillAndStroke();
}
mxCellRenderer.registerShape(mxArchiMateRightTopCircleAndTriangle.prototype.cst.circleAndTriangle, mxArchiMateRightTopCircleAndTriangle);
// 左刷新 右圆圈
function mxArchiMateRightTopCircleHasLeft(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
mxUtils.extend(mxArchiMateRightTopCircleHasLeft, mxArchiMate3Service);
mxArchiMateRightTopCircleHasLeft.prototype.cst = {
rightTopCircleHasLeft : 'mxgraph.archimate3.rightTopCircleHasLeft'
};
mxArchiMateRightTopCircleHasLeft.prototype.background = function(c, x, y, w, h) {
c.image(-x + 6, -6, 12, 12, 'images/archiLeftRefresh.svg');
c.ellipse(4, -5, 10, 10);
c.fillAndStroke();
}
mxCellRenderer.registerShape(mxArchiMateRightTopCircleHasLeft.prototype.cst.rightTopCircleHasLeft, mxArchiMateRightTopCircleHasLeft);
// 左刷新，右圆圈套三角
function mxArchiMateRightTopCircleAndTriangleHasLeft(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
mxUtils.extend(mxArchiMateRightTopCircleAndTriangleHasLeft, mxArchiMate3Service);
mxArchiMateRightTopCircleAndTriangleHasLeft.prototype.cst = {
rightTopCircleAndTriangleHasLeft : 'mxgraph.archimate3.rightTopCircleAndTriangleHasLeft'
};
mxArchiMateRightTopCircleAndTriangleHasLeft.prototype.background = function(c, x, y, w, h) {
c.ellipse(4, -5, 12, 12);
c.fillAndStroke();
c.image(4, -6, 12, 12, 'images/archiRightTopTriangle.svg');
c.fillAndStroke();
c.image(-x + 6, -5, 12, 12, 'images/archiLeftRefresh.svg');
c.fillAndStroke();
}
mxCellRenderer.registerShape(mxArchiMateRightTopCircleAndTriangleHasLeft.prototype.cst.rightTopCircleAndTriangleHasLeft, mxArchiMateRightTopCircleAndTriangleHasLeft);
// end------
mxArchiMate3Service.prototype.getConstraints = function(style, w, h)
{
var constr = [];
......
src/components/drawio.vue
......@@ -2,7 +2,7 @@
<iframe
id="drawioGraph"
name="content_frame"
:src="'/drawio/index.html?id='+id+'&info='+info"
:src="'/drawio/index.html?id='+id+'&info='+info+'&page='+page"
frameborder=0
scrolling="no">
</iframe>
......@@ -15,7 +15,8 @@
data() {
return {
id: null,
info: null
info: null,
page: null
};
},
watch: {
......@@ -23,6 +24,7 @@
handler(newVal, oldVal) {
this.id = newVal.id;
this.info = newVal.info;
this.page = newVal.page;
},
}
},
......
src/views/archi-ele-list/index.vue
......@@ -156,7 +156,7 @@
width="200"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column label="图标" align="center">
<el-table-column width="100" label="图标" align="center">
<template slot-scope="scope">
<img
:src="scope.row.icon"
......
src/views/busi-assets-list/index.vue
......@@ -180,6 +180,7 @@
prop="parentElement"
label="上级元素"
align="center"
:formatter="formatParentElement"
show-overflow-tooltip
></el-table-column>
<el-table-column
......@@ -637,7 +638,7 @@ export default {
let4: 0,
let5: '显示',
let6: '',
color: '#d2edfd',
color: '',
dynamicForm0_: [],
dynamicForm_: [],
preArc: '',
......@@ -718,6 +719,9 @@ export default {
this.set_table_height()
},
methods: {
formatParentElement(row, column, cellValue, index) {
return cellValue?.replace(/\]|\[|\/?]/g, '')
},
// 所属元素下拉
getArchiEleList(){
this.getZuJianLeiXingSelect(null).then((res) => {
......@@ -1049,7 +1053,7 @@ export default {
this.selectValue = ''
this.selectCode = ''
this.cascaderValue = [],
this.ruleForm.color = '#d2edfd'
this.ruleForm.color = ''
this.ruleForm.assetNumber = ''
this.ruleForm.preArc = ''
})
......@@ -1096,9 +1100,10 @@ export default {
this.ruleForm.let6 = targetAsset_id
}
console.log(2)
if (fieldsValue.length == 4) {
if (fieldsValue && fieldsValue.length == 4) {
this.ruleForm.dynamicForm_ = []
} else {
if(!fieldsValue) return
let fieldsValue_ = JSON.parse(fieldsValue)
console.log(3)
fieldsValue_.map((item) => {
......@@ -1163,9 +1168,10 @@ export default {
this.ruleForm.let6 = targetAsset_id
}
if (fieldsValue.length == 4) {
if (fieldsValue && fieldsValue.length == 4) {
this.ruleForm.dynamicForm_ = []
} else {
if(!fieldsValue) return
let fieldsValue_ = JSON.parse(fieldsValue)
fieldsValue_.map((item) => {
if (item.dictKey) {
......@@ -1178,7 +1184,7 @@ export default {
}
},
handleChange(value) {
// console.log('data', data)
console.log('data', data)
// 当选中值变化时，更新绑定的对象
let selectedObject = {}
if (value && value.length) {
......
src/views/meta-model-list/canvas/index.vue
......@@ -71,12 +71,13 @@
},
mounted(){
this.get_search_select1();
const id = this.$route.query.id;
const version = this.$route.query.info;
// const id = this.$route.query.id;
// const version = this.$route.query.info;
const {id, info, page } = this.$route.query
this.routerId = {
id: id,
info: version
id,
info,
page
}
window.onmessage = e => {
......
src/views/meta-model-list/index.vue
......@@ -311,14 +311,14 @@ export default {
if(res.code == 200) {
const xmlData = res.data.metaModelData;
const xmlTitle = res.data.verName;
localStorage.setItem('xmlData', xmlData);
localStorage.setItem('xmlTitle', xmlTitle);
localStorage.setItem('metamodelXmlData', xmlData);
localStorage.setItem('metamodelXmlTitle', xmlTitle);
// this.queryDrawioGraph(item.metaModelId),
Promise.all([ this.queryDrawioGraph2(item.metaModelId) ]).then(res2 => {
// localStorage.setItem('commonGraph', JSON.stringify({ show: false, graph: res2[0].dataEle }));
localStorage.setItem('commonGraph', JSON.stringify({ show: false, graph: res2[0].dataEle }));
localStorage.setItem('standardGraph', JSON.stringify({ show: true, graph: res2[0].dataEle }));
localStorage.setItem('joinGraph', JSON.stringify({ state: 1, graph: res2[0].dataEle }));
this.$router.push( `/main/metaModelListDetails?id=${item.metaModelId}&info=${item.version}`, () => {}, () => {} );
localStorage.setItem('metaModelJoinGraph', JSON.stringify({ state: 1, graph: res2[0].dataEle }));
this.$router.push( `/main/metaModelListDetails?id=${item.metaModelId}&info=${item.version}&page=metaModelListDetails`);
});
}
});
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!