Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 77d063d1 by liuyong
Options

修改代码

1 parent 183d15b9
Inline Side-by-side
Showing with 159 additions and 97 deletions
public/drawio/extention/js/exApp.js
......@@ -47,14 +47,14 @@ const setIcon = function (itemIcon, dicys, color) {
if(dicys && dicys.length > 0) {
dicys.forEach(function(item2) {
// console.log(item2.fieldName)
// console.log(item2.chineseName)
// svgTag.setAttribute(encodeURIComponent(item2.fieldName), encodeURIComponent(item2.chineseName));
svgTag.setAttribute('attr_'+item2.fieldName, 'attr_'+Base64.encode(item2.chineseName));
if(item2.propertyValue) {
svgTag.setAttribute('attr_'+item2.fieldName, 'attr_'+Base64.encode(item2.propertyValue)+'&id=' + item2.propertyId);
}
})
}
console.log(svgTag)
const svgToString = new XMLSerializer().serializeToString(svgDocument);//svg标签转化为字符串
const encode_item_icon = (window.btoa)? btoa(svgToString) : Base64.encode(svgToString);//base64编码
......
public/drawio/extention/js/exFormat.js
......@@ -12,23 +12,22 @@ const initAttributePanel = function(that) {
const objectTag = cell.value;
// console.log(objectTag);
//元素名称--------------------------------------------------------------------------
const labelName = graph.getLabel(graph.getSelectionCell());//获取节点名称
const nodeName = labelName.replace(/<[^>]+>/g, '');
var label_name_container = document.createElement('div');
label_name_container.style.cssText = 'padding: 8px;display: flex;align-items: center;';
const label = document.createElement('div');
label.innerHTML = '节点名称: ';
label_name_container.appendChild(label);
const name = document.createElement("div");
name.style.marginLeft = '20px';
name.innerHTML = nodeName;
// const labelName = graph.getLabel(graph.getSelectionCell());//获取节点名称
// const nodeName = labelName.replace(/<[^>]+>/g, '');
// var label_name_container = document.createElement('div');
// label_name_container.style.cssText = 'padding: 8px;display: flex;align-items: center;';
// const label = document.createElement('div');
// label.innerHTML = '节点名称: ';
// label_name_container.appendChild(label);
// const name = document.createElement("div");
// name.style.marginLeft = '20px';
// name.innerHTML = nodeName;
// graph.getModel().setValue(graph.getSelectionCell(), value_);//修改节点名称
label_name_container.appendChild(name);
that.container.appendChild(label_name_container);
// label_name_container.appendChild(name);
// that.container.appendChild(label_name_container);
const button_container = document.createElement('div');
......@@ -48,53 +47,23 @@ const initAttributePanel = function(that) {
const save_button = document.createElement('button');
save_button.innerHTML = '保存属性';
save_button.style.cssText = 'padding: 4px;text-align: center;cursor: pointer;background-color: rgb(228,228,228);color: rgb(97, 97, 97);';
let attrArray = [];
save_button.addEventListener('click', () => {
console.log('保存属性')
let currentNode = graph.getModel().getValue(cell);//获取没有属性的节点，返回的是文字
if(typeof currentNode == 'string') {//此节点没有属性
var doc = mxUtils.createXmlDocument();
var obj = doc.createElement('object');
obj.setAttribute('label', currentNode || '');
currentNode = obj;//文字节点转化为 object标签，属性label值为文字
}
var clone_currentNode = currentNode.cloneNode(false);
console.log(currentNode)
const attr_name_array = Array.from($(".attrName"));
const attr_value_array = Array.from($(".attrValue"));
// console.log(attr_name_array)
// console.log(attr_value_array)
let attr_name_value = [];
attr_name_array.forEach((item, index) => {
if(item.value.length > 0) {
if(attr_value_array[index].value.length > 0) {
attr_name_value.push({
attrName: item.value,
attrValue: attr_value_array[index].value,
})
}
}
})
let propertyArray = [];
attr_name_value.reverse();
if(attrArray.length > 0) {
let hash = {};
var unique_attr_name_value = attr_name_value.reduce((curr, next) => {
hash[next.attrName] ? '' : hash[next.attrName] = curr.push(next);
return curr;
}, []);
if(unique_attr_name_value.length > 0) {
unique_attr_name_value.forEach(item => {
clone_currentNode.setAttribute(item.attrName, item.attrValue);
attrArray.forEach(item => {
propertyArray.push({
propertyId: Number(item.id),
propertyValue: item.value
})
})
}
console.log(unique_attr_name_value)
graph.getModel().setValue(cell, clone_currentNode);//更新图形界面
window.parent.postMessage({ type: 'saveProperty', data: propertyArray }, '*');
}
});
button_container.appendChild(save_button);
......@@ -107,38 +76,56 @@ const initAttributePanel = function(that) {
const svgTag = svgDocument.getElementsByTagName('svg')[0];
const svgAttr = Array.from(svgTag.attributes);
// console.log(svgAttr)
let attrArray = [];
svgAttr.forEach(item => {
if(item.name.includes('attr_')) {
const attr_name = item.name.split("attr_")[1];
const attr_value = Base64.decode(item.value.split("attr_")[1]);
const value_ = item.value.split("attr_")[1].split('&')[0];
const id_ = item.value.split("attr_")[1].split('&')[1].split("=")[1];
const attr_value = Base64.decode(value_);
attrArray.push({
id: id_,
name: attr_name,
value: attr_value,
})
}
})
// console.log(attrArray);
if(attrArray.length > 0) {
attrArray.forEach(item => {
addListPanel(that, item.name, item.value);
addListPanel(that, attrArray, item.name, item.value);
})
}
}
if(objectTag) {
if(typeof objectTag == 'object') {//意思是此节点是有属性的
const attributeArr = Array.from(objectTag.attributes);
attributeArr.shift();//去掉节点名称
attributeArr.forEach(item => {
addListPanel(that, item.name, item.value);
})
}
let currentNode = graph.getModel().getValue(cell);//获取没有属性的节点，返回的是文字
if(typeof currentNode == 'string') {//此节点没有属性
var doc = mxUtils.createXmlDocument();
var obj = doc.createElement('object');
obj.setAttribute('label', currentNode || '');
currentNode = obj;//文字节点转化为 object标签，属性label值为文字
}
var clone_currentNode = currentNode.cloneNode(false);
if(attrArray.length > 0) {
attrArray.forEach(item => {
clone_currentNode.setAttribute(item.name, item.value);
})
}
// graph.getModel().setValue(cell, clone_currentNode);//更新图形界面
// if(objectTag) {
// if(typeof objectTag == 'object') {//意思是此节点是有属性的
// console.log(12)
// const attributeArr = Array.from(objectTag.attributes);
// attributeArr.shift();//去掉节点名称
// attributeArr.forEach(item => {
// addListPanel(that, item.name, item.value);
// })
// }
// }
}
const addListPanel = function(that, attrName_, attrValue_) {
const addListPanel = function(that, originAttr, attrName_, attrValue_) {
const add_item_container = document.createElement('div');
add_item_container.style.cssText = 'display: flex;justify-content: space-between;padding: 4px;';
add_item_container.className = 'add_item_container';
......@@ -179,10 +166,8 @@ const addListPanel = function(that, attrName_, attrValue_) {
item_right_input.style.cssText = 'width: 100%;';
item_right_input.className = 'attrValue';
item_right_input.oninput = function (e) {
// console.log('属性值')
// console.log(e)
// console.log(attrValue_)
const res = originAttr.find(item => item.name == attrName_);
res.value = e.data;
}
// var removeAttr = document.createElement('a');
// removeAttr.style.margin = '0px 8px 0 8px';
......@@ -207,8 +192,10 @@ const addListPanel = function(that, attrName_, attrValue_) {
add_item_container.appendChild(item_left_container);
add_item_container.appendChild(item_right_container);
that.container.appendChild(add_item_container);
}
//初始化右侧属性面板控件
const attributeNode = function(that, label3, div, ui, addClickHandler, idx) {
......
public/drawio/js/diagramly/App.js
......@@ -4438,6 +4438,8 @@ App.prototype.saveLibrary = function(name, images, file, mode, noSpin, noReload,
if (!noReload)
{
console.log(file);
console.log(images);
this.libraryLoaded(file, images);
}
......
src/api/index.js
......@@ -7,6 +7,9 @@ export function query_jia_gou_yuan_su_guan_xi_table(params) {//查询架构元
export function getDrawioLeftGraph(params) {//查询画布左侧自定义图形
return post('/network/ma-ml/archi-list', params);
}
export function save_drawio_attribute(params) {//保存画布属性
return post('/network/ma-ml/updateEleRelBatch', params);
}
// 导入列表
export function offlineQuery(params) {
return post(`/network/anasz-smart-screen/offlineQuery/`, params);
......
src/views/archi-view-manage/canvas/index.vue
......@@ -9,7 +9,8 @@
import { MessageBox, Message } from 'element-ui';
import {
saveArchiViewManageCardDetails,
saveVersionArchiViewManageCardDetails
saveVersionArchiViewManageCardDetails,
save_drawio_attribute
} from '@/api/index.js';
export default {
name: 'Canvas',
......@@ -61,10 +62,29 @@
});
});
}
if(e.data.type == 'saveProperty'){
this.saveAttribute(e.data.data);
}
}
},
methods: {
saveCanvas(id, mxGraphModel, base64SvgToString) {
saveAttribute(data) {//保存属性
save_drawio_attribute(data).then(res => {
if(res.code == 200) {
Message({
type: 'success',
message: '保存成功!',
});
}else {
Message({
type: 'error',
message: res.msg
});
}
});
},
saveCanvas(id, mxGraphModel, base64SvgToString) {//保存文件
const params = {
viewDetailsId: id,
metaModelData: mxGraphModel,
......@@ -84,7 +104,7 @@
}
})
},
releaseVersion(id) {
releaseVersion(id) {//版本发布
const params = {
viewDetailsId: id,
}
......
src/views/archi-view-manage/index.vue
......@@ -17,7 +17,8 @@
<div class="card_container">
<div class="card_body">
<el-card class="card_item" v-for="item in zanCun" :key="item.metaModelId">
<img class="card_image" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" />
<img class="card_image" v-if="item.metaModelSvg_" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" />
<img class="card_image" v-else @click="to_current_details(item)" src="@/assets/meta-model-list/default_img.png" alt="" />
<div class="card_info">
<div class="card_title">
<i class="el-icon-location"></i>
......@@ -48,7 +49,8 @@
<div class="card_container">
<div class="card_body">
<el-card class="card_item" v-for="item in tingYong" :key="item.metaModelId">
<img class="card_image" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" />
<img class="card_image" v-if="item.metaModelSvg_" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" />
<img class="card_image" v-else @click="to_current_details(item)" src="@/assets/meta-model-list/default_img.png" alt="" />
<div class="card_info">
<div class="card_title">
<i class="el-icon-location"></i>
......@@ -79,7 +81,8 @@
<div class="card_container">
<div class="card_body">
<el-card class="card_item" v-for="item in yiFaBu" :key="item.metaModelId">
<img class="card_image" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" />
<img class="card_image" v-if="item.metaModelSvg_" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" />
<img class="card_image" v-else @click="to_current_details(item)" src="@/assets/meta-model-list/default_img.png" alt="" />
<div class="card_info">
<div class="card_title">
<i class="el-icon-location"></i>
......@@ -351,7 +354,11 @@ export default {
getArchiViewManageDetail(params).then(res => {
if(res.code == 200) {
res.data.records.map(item => {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
if(item.metaModelSvg) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
}else {
item['metaModelSvg_'] = null;
}
});
this.yiFaBu = res.data.records;
this.pager1.current = res.data.current;
......@@ -369,7 +376,11 @@ export default {
getArchiViewManageDetail(params).then(res => {
if(res.code == 200) {
res.data.records.map(item => {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
if(item.metaModelSvg) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
}else {
item['metaModelSvg_'] = null;
}
});
this.zanCun = res.data.records;
this.pager2.current = res.data.current;
......@@ -387,7 +398,11 @@ export default {
getArchiViewManageDetail(params).then(res => {
if(res.code == 200) {
res.data.records.map(item => {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
if(item.metaModelSvg) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
}else {
item['metaModelSvg_'] = null;
}
});
this.tingYong = res.data.records
this.pager3.current = res.data.current;
......@@ -406,6 +421,12 @@ export default {
this.get_list3();
}else {
this.viewId = null;
this.yiFaBu = [];
this.zanCun = [];
this.tingYong = [];
this.pager1.total = 0;
this.pager2.total = 0;
this.pager3.total = 0;
}
},
getData() {//获取树节点内容
......
src/views/meta-model-list/canvas/index.vue
......@@ -9,7 +9,8 @@
import { MessageBox, Message } from 'element-ui';
import {
save_drawio_xml_and_svg,
save_drawio_version
save_drawio_version,
save_drawio_attribute
} from '@/api/index.js';
export default {
name: 'Canvas',
......@@ -61,10 +62,28 @@
});
});
}
if(e.data.type == 'saveProperty'){
this.saveAttribute(e.data.data);
}
}
},
methods: {
saveCanvas(id, mxGraphModel, base64SvgToString) {
saveAttribute(data) {//保存属性
save_drawio_attribute(data).then(res => {
if(res.code == 200) {
Message({
type: 'success',
message: '保存成功!',
});
}else {
Message({
type: 'error',
message: res.msg
});
}
});
},
saveCanvas(id, mxGraphModel, base64SvgToString) {//保存文件
const params = {
metaModelId: id,
metaModelData: mxGraphModel,
......@@ -84,7 +103,7 @@
}
})
},
releaseVersion(id, version) {
releaseVersion(id, version) {//版本发布
const params = {
metaModelId: id,
version: version,
......
src/views/meta-model-list/index.vue
......@@ -21,7 +21,8 @@
<div class="card_container">
<div class="card_body">
<el-card class="card_item" v-for="item in yi_fa_bu" :key="item.metaModelId">
<img class="card_image" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" />
<img class="card_image" v-if="item.metaModelSvg_" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" />
<img class="card_image" v-else @click="to_current_details(item)" src="@/assets/meta-model-list/default_img.png" alt="" />
<div class="card_info">
<div class="card_title">
<i class="el-icon-location"></i>
......@@ -49,7 +50,8 @@
<div class="card_container">
<div class="card_body">
<el-card class="card_item" v-for="item in zan_cun" :key="item.metaModelId">
<img class="card_image" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" />
<img class="card_image" v-if="item.metaModelSvg_" @click="to_current_details(item)" :src="item.metaModelSvg_" alt="" />
<img class="card_image" v-else @click="to_current_details(item)" src="@/assets/meta-model-list/default_img.png" alt="" />
<div class="card_info">
<div class="card_title">
<i class="el-icon-location"></i>
......@@ -224,7 +226,11 @@ export default {
get_yuan_mo_xing_list(params).then(res => {
if(res.code == 200) {
res.data.records.map(item => {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
if(item.metaModelSvg) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
}else {
item['metaModelSvg_'] = null;
}
});
this.pager1.current = res.data.current;
this.pager1.total = res.data.total;
......@@ -242,7 +248,11 @@ export default {
get_yuan_mo_xing_list(params).then(res => {
if(res.code == 200) {
res.data.records.map(item => {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
if(item.metaModelSvg) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
}else {
item['metaModelSvg_'] = null;
}
});
this.pager2.current = res.data.current;
this.pager2.total = res.data.total;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!