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 @@
// };
// })();
(function()
{
Sidebar.prototype.addCustomGraph = function()
{
(function () {
Sidebar.prototype.addCustomGraph = function () {
let joinGraph_ = null;
if(urlParams.page === 'metaModelListDetails') {
joinGraph_ = JSON.parse(localStorage.getItem('metaModelJoinGraph'));
if (urlParams.page === "metaModelListDetails") {
joinGraph_ = JSON.parse(localStorage.getItem("metaModelJoinGraph"));
} else {
joinGraph_ = JSON.parse(localStorage.getItem('joinGraph'));
joinGraph_ = JSON.parse(localStorage.getItem("joinGraph"));
}
const joinGraph = joinGraph_.graph;
this.sidebarTitles = true;//勾选标签
if(joinGraph_.state == 1) {
joinGraph.forEach(item => {
if(item.arciBelongName == '架构元素关系') {
this.sidebarTitles = true; //勾选标签
if (joinGraph_.state == 1) {
joinGraph.forEach((item) => {
if (item.arciBelongName == "架构元素关系") {
let fns = [];
item.eleDtos.forEach(item2 => {
let archi = null
item.eleDtos.forEach((item2) => {
let archi = null;
archi = this.createEdgeTemplateEntry(
item2.iconName + 'attr=[];assetName=[' + item2.rsName + '];',
item2.iconName + "attr=[];assetName=[" + item2.rsName + "];",
item2.shapeWidth ? item2.shapeWidth : 150,
item2.shapeHeight ? item2.shapeHeight : 75,
'',
"",
item2.rsName,
null,
'非封闭图形2'
)
fns.push(archi)
"非封闭图形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 => {
item.eleDtos.forEach((item2) => {
// if(item2.assets && item2.dicys) {
let attr_ = [];
item2.dicys && item2.dicys.forEach(res => {
if(res.cnName) {
attr_.push(
{
cnName: res.cnName,
value_: res.propertyValue,
item2.dicys &&
item2.dicys.forEach((res) => {
if (res.cnName) {
attr_.push({
name: res.cnName,
value: res.propertyValue,
id: res.propertyId,
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(
this.createVertexTemplateEntry(
// '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.shapeHeight ? item2.shapeHeight : 41,
null,
item2.eleName,
null,
null,
'封闭图形2'
)
"封闭图形2"
)
);
// }
});
this.addPaletteFunctions(item.eleBelongId, item.arciBelongName, true, fns);
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(
// // '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 = [];
// let attr_ = [];
// item2.dicys && item2.dicys.forEach(res => {
// if(res.cnName) {
// attr_.push(
// {
// name: res.cnName,
// value: res.propertyValue,
// id: res.propertyId,
// controlType: res.controlType,
// }
// )
// }
// })
item2.assets.forEach(item3 => {
let info__ = [{
name: '资产名称',
value: item3.assetName || '',
element: 'input'
},{
name: '资产编号',
value: item3.assetNumber || '',
element: 'input'
},{
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
if (joinGraph_.state == 2) {
// 远程获取数据,不再在本地获取
try {
let urlParams1 = window.top.location.href.split("?")[1].split("&");
let updateParams = {};
urlParams1 = urlParams1.filter(
(i) =>
i.includes("assetConstant") ||
i.includes("viewId") ||
i.includes("page")
);
urlParams1.forEach((i) => {
let [key, value] = i.split("=");
updateParams[key] = value;
});
console.error("updateParams", updateParams);
var that = this;
$.ajax({
async: false,
type: "POST",
dataType: "json",
contentType: "application/json",
timeout: 3000, //设置超时时间为8s
url: `${ajaxUrl}/eadc-architecture/ma-ml/archi-asset-list`,
data: JSON.stringify({
archiAssetState: 2,
archiStage: 1,
delFlag: 0,
state: 1,
archiBelongId: "1", // 不应该写死-----------TODO:
archiType: updateParams.assetConstant,
archiViewId: updateParams.viewId,
assetName: "",
current: 1,
pageSize: 10,
}), //需要确认formData如何获取
async: false,
headers: {
tkv: "yMCwNqQ9yRQ37K3h2UVw56gwzWpzPxcs50w7nfsmyFGKuUp-LGB_M0sSgCzGqs8xMkXck0CMDupY_5T6My0bt2p4SEHsibGhMsdoNT55-2s-0bGUm_UIZliqXnCJwZJtOUavqh4OrAWgLBEV82RhEJbGuRY-pIrsGtM0jouSkhRyxpek91B0URTRFitm_A_-",
},
success: function (res) {
loading = false;
if (res.code == 200) {
const { dataEle } = res.data;
console.log("dataEle=======>", dataEle);
dataEle.forEach((item) => {
that.createEXSideBarRows({ page: updateParams.page, ...item });
});
}
// console.log(item3.fieldsValue)
fns.push(
this.createVertexTemplateEntry(
// '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)+ ';',
item2.shapeWidth ? item2.shapeWidth : 150,
item2.shapeHeight ? item2.shapeHeight : 75,
null,
item3.assetName,
null,
null,
'封闭图形2'
)
)
})
this.addPaletteFunctions(item2.eleBelongId, item2.eleName, true, fns);
},
complete: function (XHR, TextStatus) {
if (TextStatus == "timeout") {
//超时执行的程序
console.log("请求超时！");
}
},
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 = '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 @@
<link rel="shortcut icon" href="favicon.ico">
<!-- 二次开发, 引入jquery插件 -->
<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>
......
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!