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 150 additions and 88 deletions
public/drawio/extention/js/exApp.js
...@@ -47,14 +47,14 @@ const setIcon = function (itemIcon, dicys, color) { ...@@ -47,14 +47,14 @@ const setIcon = function (itemIcon, dicys, color) {
if(dicys && dicys.length > 0) { if(dicys && dicys.length > 0) {
dicys.forEach(function(item2) { dicys.forEach(function(item2) {
// console.log(item2.fieldName)
// console.log(item2.chineseName)
// svgTag.setAttribute(encodeURIComponent(item2.fieldName), encodeURIComponent(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 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编码
......
public/drawio/extention/js/exFormat.js
...@@ -12,23 +12,22 @@ const initAttributePanel = function(that) { ...@@ -12,23 +12,22 @@ const initAttributePanel = function(that) {
const objectTag = cell.value; const objectTag = cell.value;
// console.log(objectTag);
//元素名称-------------------------------------------------------------------------- //元素名称--------------------------------------------------------------------------
const labelName = graph.getLabel(graph.getSelectionCell());//获取节点名称 // const labelName = graph.getLabel(graph.getSelectionCell());//获取节点名称
const nodeName = labelName.replace(/<[^>]+>/g, ''); // const nodeName = labelName.replace(/<[^>]+>/g, '');
var label_name_container = document.createElement('div'); // var label_name_container = document.createElement('div');
label_name_container.style.cssText = 'padding: 8px;display: flex;align-items: center;'; // label_name_container.style.cssText = 'padding: 8px;display: flex;align-items: center;';
const label = document.createElement('div'); // const label = document.createElement('div');
label.innerHTML = '节点名称: '; // label.innerHTML = '节点名称: ';
label_name_container.appendChild(label); // label_name_container.appendChild(label);
const name = document.createElement("div"); // const name = document.createElement("div");
name.style.marginLeft = '20px'; // name.style.marginLeft = '20px';
name.innerHTML = nodeName; // name.innerHTML = nodeName;
// graph.getModel().setValue(graph.getSelectionCell(), value_);//修改节点名称 // graph.getModel().setValue(graph.getSelectionCell(), value_);//修改节点名称
label_name_container.appendChild(name); // label_name_container.appendChild(name);
that.container.appendChild(label_name_container); // that.container.appendChild(label_name_container);
const button_container = document.createElement('div'); const button_container = document.createElement('div');
...@@ -48,53 +47,23 @@ const initAttributePanel = function(that) { ...@@ -48,53 +47,23 @@ const initAttributePanel = function(that) {
const save_button = document.createElement('button'); const save_button = document.createElement('button');
save_button.innerHTML = '保存属性'; 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);'; 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', () => { 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")); let propertyArray = [];
const attr_value_array = Array.from($(".attrValue"));
// console.log(attr_name_array)
// console.log(attr_value_array)
let attr_name_value = []; if(attrArray.length > 0) {
attr_name_array.forEach((item, index) => {
if(item.value.length > 0) { attrArray.forEach(item => {
if(attr_value_array[index].value.length > 0) { propertyArray.push({
attr_name_value.push({ propertyId: Number(item.id),
attrName: item.value, propertyValue: item.value
attrValue: attr_value_array[index].value,
}) })
}
}
}) })
attr_name_value.reverse(); window.parent.postMessage({ type: 'saveProperty', data: propertyArray }, '*');
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);
})
} }
console.log(unique_attr_name_value)
graph.getModel().setValue(cell, clone_currentNode);//更新图形界面
}); });
button_container.appendChild(save_button); button_container.appendChild(save_button);
...@@ -107,38 +76,56 @@ const initAttributePanel = function(that) { ...@@ -107,38 +76,56 @@ const initAttributePanel = function(that) {
const svgTag = svgDocument.getElementsByTagName('svg')[0]; const svgTag = svgDocument.getElementsByTagName('svg')[0];
const svgAttr = Array.from(svgTag.attributes); const svgAttr = Array.from(svgTag.attributes);
// console.log(svgAttr)
let attrArray = [];
svgAttr.forEach(item => { svgAttr.forEach(item => {
if(item.name.includes('attr_')) { if(item.name.includes('attr_')) {
const attr_name = item.name.split("attr_")[1]; 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({ attrArray.push({
id: id_,
name: attr_name, name: attr_name,
value: attr_value, value: attr_value,
}) })
} }
}) })
// console.log(attrArray);
if(attrArray.length > 0) { if(attrArray.length > 0) {
attrArray.forEach(item => { attrArray.forEach(item => {
addListPanel(that, item.name, item.value); addListPanel(that, attrArray, item.name, item.value);
}) })
} }
} }
if(objectTag) { let currentNode = graph.getModel().getValue(cell);//获取没有属性的节点，返回的是文字
if(typeof objectTag == 'object') {//意思是此节点是有属性的 if(typeof currentNode == 'string') {//此节点没有属性
const attributeArr = Array.from(objectTag.attributes); var doc = mxUtils.createXmlDocument();
attributeArr.shift();//去掉节点名称 var obj = doc.createElement('object');
attributeArr.forEach(item => { obj.setAttribute('label', currentNode || '');
addListPanel(that, item.name, item.value); 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'); const add_item_container = document.createElement('div');
add_item_container.style.cssText = 'display: flex;justify-content: space-between;padding: 4px;'; add_item_container.style.cssText = 'display: flex;justify-content: space-between;padding: 4px;';
add_item_container.className = 'add_item_container'; add_item_container.className = 'add_item_container';
...@@ -179,10 +166,8 @@ const addListPanel = function(that, attrName_, attrValue_) { ...@@ -179,10 +166,8 @@ const addListPanel = function(that, attrName_, attrValue_) {
item_right_input.style.cssText = 'width: 100%;'; item_right_input.style.cssText = 'width: 100%;';
item_right_input.className = 'attrValue'; item_right_input.className = 'attrValue';
item_right_input.oninput = function (e) { item_right_input.oninput = function (e) {
// console.log('属性值') const res = originAttr.find(item => item.name == attrName_);
// console.log(e) res.value = e.data;
// console.log(attrValue_)
} }
// var removeAttr = document.createElement('a'); // var removeAttr = document.createElement('a');
// removeAttr.style.margin = '0px 8px 0 8px'; // removeAttr.style.margin = '0px 8px 0 8px';
...@@ -207,8 +192,10 @@ const addListPanel = function(that, attrName_, attrValue_) { ...@@ -207,8 +192,10 @@ const addListPanel = function(that, attrName_, attrValue_) {
add_item_container.appendChild(item_left_container); add_item_container.appendChild(item_left_container);
add_item_container.appendChild(item_right_container); add_item_container.appendChild(item_right_container);
that.container.appendChild(add_item_container); that.container.appendChild(add_item_container);
} }
//初始化右侧属性面板控件 //初始化右侧属性面板控件
const attributeNode = function(that, label3, div, ui, addClickHandler, idx) { 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, ...@@ -4438,6 +4438,8 @@ App.prototype.saveLibrary = function(name, images, file, mode, noSpin, noReload,
if (!noReload) if (!noReload)
{ {
console.log(file);
console.log(images);
this.libraryLoaded(file, images); this.libraryLoaded(file, images);
} }
......
src/api/index.js
...@@ -7,6 +7,9 @@ export function query_jia_gou_yuan_su_guan_xi_table(params) {//查询架构元 ...@@ -7,6 +7,9 @@ export function query_jia_gou_yuan_su_guan_xi_table(params) {//查询架构元
export function getDrawioLeftGraph(params) {//查询画布左侧自定义图形 export function getDrawioLeftGraph(params) {//查询画布左侧自定义图形
return post('/network/ma-ml/archi-list', 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) { export function offlineQuery(params) {
return post(`/network/anasz-smart-screen/offlineQuery/`, params); return post(`/network/anasz-smart-screen/offlineQuery/`, params);
......
src/views/archi-view-manage/canvas/index.vue
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
import { MessageBox, Message } from 'element-ui'; import { MessageBox, Message } from 'element-ui';
import { import {
saveArchiViewManageCardDetails, saveArchiViewManageCardDetails,
saveVersionArchiViewManageCardDetails saveVersionArchiViewManageCardDetails,
save_drawio_attribute
} from '@/api/index.js'; } from '@/api/index.js';
export default { export default {
name: 'Canvas', name: 'Canvas',
...@@ -61,10 +62,29 @@ ...@@ -61,10 +62,29 @@
}); });
}); });
} }
if(e.data.type == 'saveProperty'){
this.saveAttribute(e.data.data);
}
} }
}, },
methods: { 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 = { const params = {
viewDetailsId: id, viewDetailsId: id,
metaModelData: mxGraphModel, metaModelData: mxGraphModel,
...@@ -84,7 +104,7 @@ ...@@ -84,7 +104,7 @@
} }
}) })
}, },
releaseVersion(id) { releaseVersion(id) {//版本发布
const params = { const params = {
viewDetailsId: id, viewDetailsId: id,
} }
......
src/views/archi-view-manage/index.vue
...@@ -17,7 +17,8 @@ ...@@ -17,7 +17,8 @@
<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 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_info">
<div class="card_title"> <div class="card_title">
<i class="el-icon-location"></i> <i class="el-icon-location"></i>
...@@ -48,7 +49,8 @@ ...@@ -48,7 +49,8 @@
<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 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_info">
<div class="card_title"> <div class="card_title">
<i class="el-icon-location"></i> <i class="el-icon-location"></i>
...@@ -79,7 +81,8 @@ ...@@ -79,7 +81,8 @@
<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 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_info">
<div class="card_title"> <div class="card_title">
<i class="el-icon-location"></i> <i class="el-icon-location"></i>
...@@ -351,7 +354,11 @@ export default { ...@@ -351,7 +354,11 @@ export default {
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) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg; item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
}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;
...@@ -369,7 +376,11 @@ export default { ...@@ -369,7 +376,11 @@ export default {
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) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg; item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
}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;
...@@ -387,7 +398,11 @@ export default { ...@@ -387,7 +398,11 @@ export default {
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) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg; item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
}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;
...@@ -406,6 +421,12 @@ export default { ...@@ -406,6 +421,12 @@ export default {
this.get_list3(); this.get_list3();
}else { }else {
this.viewId = null; this.viewId = null;
this.yiFaBu = [];
this.zanCun = [];
this.tingYong = [];
this.pager1.total = 0;
this.pager2.total = 0;
this.pager3.total = 0;
} }
}, },
getData() {//获取树节点内容 getData() {//获取树节点内容
......
src/views/meta-model-list/canvas/index.vue
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
import { MessageBox, Message } from 'element-ui'; import { MessageBox, Message } from 'element-ui';
import { import {
save_drawio_xml_and_svg, save_drawio_xml_and_svg,
save_drawio_version save_drawio_version,
save_drawio_attribute
} from '@/api/index.js'; } from '@/api/index.js';
export default { export default {
name: 'Canvas', name: 'Canvas',
...@@ -61,10 +62,28 @@ ...@@ -61,10 +62,28 @@
}); });
}); });
} }
if(e.data.type == 'saveProperty'){
this.saveAttribute(e.data.data);
}
} }
}, },
methods: { 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 = { const params = {
metaModelId: id, metaModelId: id,
metaModelData: mxGraphModel, metaModelData: mxGraphModel,
...@@ -84,7 +103,7 @@ ...@@ -84,7 +103,7 @@
} }
}) })
}, },
releaseVersion(id, version) { releaseVersion(id, version) {//版本发布
const params = { const params = {
metaModelId: id, metaModelId: id,
version: version, version: version,
......
src/views/meta-model-list/index.vue
...@@ -21,7 +21,8 @@ ...@@ -21,7 +21,8 @@
<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 yi_fa_bu" :key="item.metaModelId"> <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_info">
<div class="card_title"> <div class="card_title">
<i class="el-icon-location"></i> <i class="el-icon-location"></i>
...@@ -49,7 +50,8 @@ ...@@ -49,7 +50,8 @@
<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 zan_cun" :key="item.metaModelId"> <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_info">
<div class="card_title"> <div class="card_title">
<i class="el-icon-location"></i> <i class="el-icon-location"></i>
...@@ -224,7 +226,11 @@ export default { ...@@ -224,7 +226,11 @@ export default {
get_yuan_mo_xing_list(params).then(res => { get_yuan_mo_xing_list(params).then(res => {
if(res.code == 200) { if(res.code == 200) {
res.data.records.map(item => { res.data.records.map(item => {
if(item.metaModelSvg) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg; item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
}else {
item['metaModelSvg_'] = null;
}
}); });
this.pager1.current = res.data.current; this.pager1.current = res.data.current;
this.pager1.total = res.data.total; this.pager1.total = res.data.total;
...@@ -242,7 +248,11 @@ export default { ...@@ -242,7 +248,11 @@ export default {
get_yuan_mo_xing_list(params).then(res => { get_yuan_mo_xing_list(params).then(res => {
if(res.code == 200) { if(res.code == 200) {
res.data.records.map(item => { res.data.records.map(item => {
if(item.metaModelSvg) {
item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg; item['metaModelSvg_'] = 'data:image/svg+xml;base64,'+ item.metaModelSvg;
}else {
item['metaModelSvg_'] = null;
}
}); });
this.pager2.current = res.data.current; this.pager2.current = res.data.current;
this.pager2.total = res.data.total; 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!