Skip to content

liangzhen / framework-tools-web

Go to a project
Commit ecaea731 by ‘july-fu’
Options

feat: 画布左侧搜索栏和分页添加完成

1 parent c7cd055f
Expand all
Inline Side-by-side
Showing with 450 additions and 137 deletions
public/drawio/extention/js/exGraph.js
...@@ -35,177 +35,144 @@ ...@@ -35,177 +35,144 @@
// }; // };
// })(); // })();
(function() (function () {
{ Sidebar.prototype.addCustomGraph = function () {
Sidebar.prototype.addCustomGraph = function()
{
let joinGraph_ = null; let joinGraph_ = null;
if(urlParams.page === 'metaModelListDetails') { if (urlParams.page === "metaModelListDetails") {
joinGraph_ = JSON.parse(localStorage.getItem('metaModelJoinGraph')); joinGraph_ = JSON.parse(localStorage.getItem("metaModelJoinGraph"));
} else { } else {
joinGraph_ = JSON.parse(localStorage.getItem('joinGraph')); joinGraph_ = JSON.parse(localStorage.getItem("joinGraph"));
} }
const joinGraph = joinGraph_.graph; const joinGraph = joinGraph_.graph;
this.sidebarTitles = true;//勾选标签 this.sidebarTitles = true; //勾选标签
if(joinGraph_.state == 1) { if (joinGraph_.state == 1) {
joinGraph.forEach(item => { joinGraph.forEach((item) => {
if(item.arciBelongName == '架构元素关系') { if (item.arciBelongName == "架构元素关系") {
let fns = []; let fns = [];
item.eleDtos.forEach(item2 => { item.eleDtos.forEach((item2) => {
let archi = null let archi = null;
archi = this.createEdgeTemplateEntry( archi = this.createEdgeTemplateEntry(
item2.iconName + 'attr=[];assetName=[' + item2.rsName + '];', item2.iconName + "attr=[];assetName=[" + item2.rsName + "];",
item2.shapeWidth ? item2.shapeWidth : 150, item2.shapeWidth ? item2.shapeWidth : 150,
item2.shapeHeight ? item2.shapeHeight : 75, item2.shapeHeight ? item2.shapeHeight : 75,
'', "",
item2.rsName, item2.rsName,
null, null,
'非封闭图形2' "非封闭图形2"
) );
fns.push(archi) fns.push(archi);
}); });
this.addPaletteFunctions(item.arciBelongId, item.arciBelongName, true, fns); this.addPaletteFunctions(
item.arciBelongId,
item.arciBelongName,
true,
fns
);
} else { } else {
let fns = []; let fns = [];
item.eleDtos.forEach(item2 => { item.eleDtos.forEach((item2) => {
// if(item2.assets && item2.dicys) { // if(item2.assets && item2.dicys) {
let attr_ = []; let attr_ = [];
item2.dicys && item2.dicys.forEach(res => { item2.dicys &&
if(res.cnName) { item2.dicys.forEach((res) => {
attr_.push( if (res.cnName) {
{ attr_.push({
cnName: res.cnName, name: res.cnName,
value_: res.propertyValue, value: res.propertyValue,
id: res.propertyId, id: res.propertyId,
controlType: res.controlType, controlType: res.controlType,
dataType: res.dataType, });
dictKey: res.dictKey,
}
)
} }
}) });
let info__ = [{
name: '元素名称',
value: item2.eleName || ''
},{
name: '定义',
value: item2.definition || ''
},{
name: '引用关系',
value: item2.referenceRelationship || ''
},{
name: '示例',
value: item2.example || ''
}];
fns.push( fns.push(
this.createVertexTemplateEntry( this.createVertexTemplateEntry(
// 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#d2edfd;shape=mxgraph.archimate3.application;appType=rightTopCircleHasLeft;archiType=rounded', // 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#d2edfd;shape=mxgraph.archimate3.application;appType=rightTopCircleHasLeft;archiType=rounded',
item2.iconName + ';attr=' + JSON.stringify(attr_) + ';info__=' + JSON.stringify(info__) + ';', item2.iconName + ";attr=" + JSON.stringify(attr_),
item2.shapeWidth ? item2.shapeWidth : 71, item2.shapeWidth ? item2.shapeWidth : 71,
item2.shapeHeight ? item2.shapeHeight : 41, item2.shapeHeight ? item2.shapeHeight : 41,
null, null,
item2.eleName, item2.eleName,
null, null,
null, null,
'封闭图形2' "封闭图形2"
)
) )
);
// } // }
}); });
this.addPaletteFunctions(item.eleBelongId, item.arciBelongName, true, fns); this.addPaletteFunctions(
item.eleBelongId,
item.arciBelongName,
true,
fns
);
} }
}) });
} }
if(joinGraph_.state == 2) { if (joinGraph_.state == 2) {
// console.log(joinGraph) // 远程获取数据,不再在本地获取
joinGraph.forEach(item => { try {
// if(item.arciBelongName == '架构元素关系') { let urlParams1 = window.top.location.href.split("?")[1].split("&");
// let fns = []; let updateParams = {};
// item.eleDtos.forEach(item2 => { urlParams1 = urlParams1.filter(
// fns.push( (i) =>
// this.createEdgeTemplateEntry( i.includes("assetConstant") ||
// // 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ffff;shape=mxgraph.archimate3.application;appType=rightTopCircle;archiType=rounded', i.includes("viewId") ||
// item2.iconName + 'attr=[];assetName=[' + item2.rsName + '];', i.includes("page")
// item2.shapeWidth ? item2.shapeWidth : 150, );
// item2.shapeHeight ? item2.shapeHeight : 75, urlParams1.forEach((i) => {
// '', let [key, value] = i.split("=");
// item2.rsName, updateParams[key] = value;
// null, });
// '非封闭图形2' console.error("updateParams", updateParams);
// ) var that = this;
// ) $.ajax({
// }); async: false,
// this.addPaletteFunctions(item.arciBelongId, item.arciBelongName, true, fns); type: "POST",
// }else { dataType: "json",
item.eleDtos.forEach(item2 => { contentType: "application/json",
if(item2.assets) { // && item2.dicys timeout: 3000, //设置超时时间为8s
let fns = []; url: `${ajaxUrl}/eadc-architecture/ma-ml/archi-asset-list`,
// let attr_ = []; data: JSON.stringify({
// item2.dicys && item2.dicys.forEach(res => { archiAssetState: 2,
// if(res.cnName) { archiStage: 1,
// attr_.push( delFlag: 0,
// { state: 1,
// name: res.cnName, archiBelongId: "1", // 不应该写死-----------TODO:
// value: res.propertyValue, archiType: updateParams.assetConstant,
// id: res.propertyId, archiViewId: updateParams.viewId,
// controlType: res.controlType, assetName: "",
// } current: 1,
// ) pageSize: 10,
// } }), //需要确认formData如何获取
// }) async: false,
headers: {
item2.assets.forEach(item3 => { tkv: "yMCwNqQ9yRQ37K3h2UVw56gwzWpzPxcs50w7nfsmyFGKuUp-LGB_M0sSgCzGqs8xMkXck0CMDupY_5T6My0bt2p4SEHsibGhMsdoNT55-2s-0bGUm_UIZliqXnCJwZJtOUavqh4OrAWgLBEV82RhEJbGuRY-pIrsGtM0jouSkhRyxpek91B0URTRFitm_A_-",
let info__ = [{ },
name: '资产名称', success: function (res) {
value: item3.assetName || '', loading = false;
element: 'input' if (res.code == 200) {
},{ const { dataEle } = res.data;
name: '资产编号', console.log("dataEle=======>", dataEle);
value: item3.assetNumber || '', dataEle.forEach((item) => {
element: 'input' that.createEXSideBarRows({ page: updateParams.page, ...item });
},{ });
name: '所属元素',
value: item3.archiEleId || '',
element: 'select'
},{
name: '上级元素',
value: item3.parentElement && item3.parentElement.replace(/\]|\[|\/?]/g, '').replace('null', '') || '',
element: 'select'
},{
name: '上级资产',
value: item3.parentAssetName || '',
element: 'tree'
}];
const saveDataParams = {
assetId: item3.assetId,
archiBelongId: item3.archiBelongId,
state: item3.state,
version: item3.version,
archiAssetState: item3.archiAssetState,
graphId: item3.graphId,
state: item3.state
} }
// console.log(item3.fieldsValue) },
fns.push( complete: function (XHR, TextStatus) {
this.createVertexTemplateEntry( if (TextStatus == "timeout") {
// 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ffff;shape=mxgraph.archimate3.application;appType=rightTopTriangle;archiType=rounded', //超时执行的程序
item3.iconName + (item3.color ? `;fillColor=${item3.color};` : '') + 'attr=' + (item3.fieldsValue && item3.fieldsValue != 'null' ? item3.fieldsValue : '[]') + ';info__=' + JSON.stringify(info__) + ';assetName=[' + item3.assetName + '];eleName=' + item2.eleName +';elementId=' + item2.elementId + ';eaLevel=' + item2.eaLevel + ';' + 'saveDataParams=' + JSON.stringify(saveDataParams)+ ';', console.log("请求超时！");
item2.shapeWidth ? item2.shapeWidth : 150,
item2.shapeHeight ? item2.shapeHeight : 75,
null,
item3.assetName,
null,
null,
'封闭图形2'
)
)
})
this.addPaletteFunctions(item2.eleBelongId, item2.eleName, true, fns);
} }
},
error: function (error) {
loading = false;
console.log(error);
},
}); });
// } } catch {}
}); // joinGraph.forEach((item) => {
// this.createEXSideBarRows({ page: joinGraph_.page, ...item });
// });
} }
}; };
})(); })();
public/drawio/extention/js/url.js
// const ajaxUrl = '172.20.10.3:7003'; // const ajaxUrl = '172.20.10.3:7003';
// const ajaxUrl = '43.143.211.42'; // const ajaxUrl = '43.143.211.42';
const ajaxUrl = '192.168.0.120:80' // const ajaxUrl = "http://172.20.10.7:19000";
const ajaxUrl = "http://192.168.0.102:80";
public/drawio/index.html
...@@ -389,6 +389,15 @@ ...@@ -389,6 +389,15 @@
<link rel="shortcut icon" href="favicon.ico"> <link rel="shortcut icon" href="favicon.ico">
<!-- 二次开发, 引入jquery插件 --> <!-- 二次开发, 引入jquery插件 -->
<script src="plugins/jquery-3.7.1.min.js"></script> <script src="plugins/jquery-3.7.1.min.js"></script>
<!-- pagination -->
<link rel="stylesheet" type="text/css" href="./pagination/common/reset.css" media="screen">
<link rel="stylesheet" type="text/css" href="./pagination/common/highlight.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="./pagination/common/common.css" media="screen">
<link rel="stylesheet" type="text/css" href="./pagination/common/common.css" media="screen">
<link rel="stylesheet" type="text/css" href="./pagination/pagination.css" media="screen">
<script src="./pagination/common/highlight.min.js"></script>
<!-- <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> -->
<script src="./pagination/jquery.pagination.js"></script>
<!-- 二次开发, 引入加密插件 --> <!-- 二次开发, 引入加密插件 -->
<script src="plugins/crypto-js-4.2.0/crypto-js.js"></script> <script src="plugins/crypto-js-4.2.0/crypto-js.js"></script>
......
public/drawio/pagination/common/common.css 0 → 100644
/* @charset "UTF-8";
body {
word-wrap: break-word;
background: #fff;
}
h1 {
font-size: 40px;
}
p,
pre {
margin: 10px 0;
}
::selection {
background: #000;
color: #fff;
}
.wrapper {
margin: 0 auto;
width: 960px;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
/*底部版权*/
footer {
margin: 100px 0 50px 300px;
padding: 0 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
footer p {
border-top: 1px solid #ebebeb;
opacity: .5;
filter: alpha(opacity=50);
text-align: right;
font-size: 12px;
line-height: 3;
font-family: "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", tahoma, arial, simsun, "\5B8B\4F53";
}
footer p a {
color: #000;
}
footer p .spe {
padding: 0 5px;
}
.right-bg {
position: fixed;
right: 0;
top: 50%;
margin-top: -215px;
width: 215px;
height: 430px;
background: url('../../image/right_bg.png') no-repeat;
}
/*组件样式*/
table {
width: 100%;
border: 1px solid #CAD3DA;
}
table td {
padding: 10px;
width: 150px;
border: 1px solid #CAD3DA;
}
table thead tr {
height: 40px;
line-height: 40px;
text-align: center;
border-bottom: 1px solid #CAD3DA;
}
table thead td {
padding: 0;
border-left: 1px solid #CAD3DA;
background: #DFEBFB;
}
table .explain {
width: 500px;
}
table tbody tr:nth-child(even) {
background: #E7EFF9;
}
.hljs, .hljs-subst {
padding: 10px;
font-family: Monaco, Consolas, "Courier New";
}
.method {
font-family: Monaco, Consolas, "Courier New";
}
.eg {
margin: 20px 0;
padding: 10px;
border: 1px dashed #bdbdbd;
background: #f9f9f9;
}
.update-log .title {
margin: 0;
font-size: 20px;
}
.update-log ul li {
margin: 5px 0;
}
.bad {
padding: 0 0 0 10px;
border: 1px dashed #bdbdbd;
color: #757575;
background: #f9f9f9;
font-family: Monaco, Consolas, "Courier New";
} */
\ No newline at end of file
public/drawio/pagination/common/highlight.min.css 0 → 100644
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #f0f0f0;
}
.hljs,
.hljs-subst {
color: #444;
}
.hljs-comment {
color: #888888;
}
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
font-weight: bold;
}
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
color: #880000;
}
.hljs-title,
.hljs-section {
color: #880000;
font-weight: bold;
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #bc6060;
}
.hljs-literal {
color: #78a960;
}
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
color: #397300;
}
.hljs-meta {
color: #1f7199;
}
.hljs-meta-string {
color: #4d99bf;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
public/drawio/pagination/common/reset.css 0 → 100644
/* @charset "utf-8";
/**
reset css
*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
img{
border:0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
abbr,acronym {
border: 0;
font-variant: normal;
} */
\ No newline at end of file
public/drawio/pagination/pagination.css 0 → 100644
@charset "UTF-8";
.m-style {
position: relative;
text-align: center;
zoom: 1;
}
.m-style:before,
.m-style:after {
content: "";
display: table;
}
.m-style:after {
clear: both;
overflow: hidden;
}
.m-style span {
float: left;
margin: 0 3px;
width: 12px;
height: 12px;
line-height: 12px;
color: #3d3c3c;
font-size: 12px;
}
.m-style .active {
float: left;
margin: 0 3px;
width: 12px;
height: 12px;
line-height: 12px;
background: rgb(65, 65, 178);
color: #fff;
font-size: 12px;
border: 1px solid rgb(65, 65, 178);
}
.m-style a {
float: left;
margin: 0 3px;
width: 12px;
height: 12px;
line-height: 12px;
background: #fff;
border: 1px solid #ebebeb;
color: #bdbdbd;
font-size: 12px;
}
.m-style a:hover {
color: #fff;
background: #0d867f;
}
.m-style .next,
.m-style .prev {
font-family: "Simsun";
font-size: 12px;
font-weight: bold;
}
.now,
.count {
padding: 0 3px;
color: #0d867f;
}
.eg img {
max-width: 800px;
min-height: 500px;
}
.m-style input {
float: left;
margin: 0 3px;
width: 12px;
height: 12px;
line-height: 12px;
text-align: center;
background: #fff;
border: 1px solid #ebebeb;
outline: none;
color: #bdbdbd;
font-size: 12px;
}
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!