Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 8114cdab by liuyong
Options

修改画布

1 parent f136385c
Inline Side-by-side
Showing with 126 additions and 64 deletions
public/drawio/extention/js/exGraph.js
...@@ -46,12 +46,12 @@ ...@@ -46,12 +46,12 @@
item.eleDtos.forEach(item2 => { item.eleDtos.forEach(item2 => {
if(item2.icon) { if(item2.icon) {
if(item2.icon.includes('data')) { if(item2.icon.includes('data')) {
const item_icon = item2.icon.split("base64,")[1]; // const item_icon = item2.icon.split("base64,")[1];
const decode_item_icon = (window.atob) ? atob(item_icon) : Base64.decode(item_icon);//svg解码，为字符串 // const decode_item_icon = (window.atob) ? atob(item_icon) : Base64.decode(item_icon);//svg解码，为字符串
const svgDocument = new DOMParser().parseFromString(decode_item_icon, 'text/xml');//svg字符串转标签 // const svgDocument = new DOMParser().parseFromString(decode_item_icon, 'text/xml');//svg字符串转标签
const svgTag = svgDocument.getElementsByTagName('svg')[0]; // const svgTag = svgDocument.getElementsByTagName('svg')[0];
const width = +svgTag.getAttribute('width').split("px")[0]; // const width = +svgTag.getAttribute('width').split("px")[0];
const height = +svgTag.getAttribute('height').split("px")[0]; // const height = +svgTag.getAttribute('height').split("px")[0];
let attr_ = []; let attr_ = [];
if(item2.dicys && item2.dicys.length > 0) { if(item2.dicys && item2.dicys.length > 0) {
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
} }
fns.push( fns.push(
item2.color ? this.createVertexTemplateEntry(item2.iconName+';fillColor='+item2.color+';'+'attr='+JSON.stringify(attr_), width, height, null, item2.eleName, null, null, '封闭图形2') : this.createEdgeTemplateEntry(item2.iconName+'attr='+JSON.stringify(attr_), width, height, '', item2.elementName, null, '非封闭图形2') item2.color ? this.createVertexTemplateEntry(item2.iconName+';fillColor='+item2.color+';'+'attr='+JSON.stringify(attr_), item2.shapeWidth?item2.shapeWidth:150, item2.shapeHeight?item2.shapeHeight:75, null, item2.eleName, null, null, '封闭图形2') : this.createEdgeTemplateEntry(item2.iconName+'attr='+JSON.stringify(attr_), item2.shapeWidth?item2.shapeWidth:150, item2.shapeHeight?item2.shapeHeight:75, '', item2.elementName, null, '非封闭图形2')
) )
} }
} }
......
public/drawio/extention/js/exScratchpad.js
...@@ -55,7 +55,7 @@ function initSetScratchpad() {//左侧便签本初始化数据 ...@@ -55,7 +55,7 @@ function initSetScratchpad() {//左侧便签本初始化数据
// 若为压缩的xml,则内容是diagram的内容 // 若为压缩的xml,则内容是diagram的内容
} }
function saveScratchpad(data) { function saveScratchpad(data) {//左侧便签本保存数据
let params = []; let params = [];
if(data.length > 0) { if(data.length > 0) {
......
src/App.vue
...@@ -13,21 +13,6 @@ ...@@ -13,21 +13,6 @@
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
height: 100%; height: 100%;
} }
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style> </style>
src/views/archi-ele-list/index.vue
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
<el-table-column prop="content" label="描述" align="center"></el-table-column> <el-table-column prop="content" label="描述" align="center"></el-table-column>
<el-table-column label="图标" align="center"> <el-table-column label="图标" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<img :src="scope.row.icon" alt="" style="width: 50%;"> <img :src="scope.row.icon" alt="" :style="{ 'width': scope.row.width, 'height': scope.row.height }">
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="version" label="版本" align="center"></el-table-column> <el-table-column prop="version" label="版本" align="center"></el-table-column>
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
</el-form-item> </el-form-item>
<el-form-item label="架构归属:" prop="let3"> <el-form-item label="架构归属:" prop="let3">
<el-select clearable placeholder="请选择" v-model="ruleForm.let3" @change="dialog_selectFun"> <el-select clearable placeholder="请选择" v-model="ruleForm.let3">
<el-input placeholder="请输入内容" v-model="add_select_item2"> <el-input placeholder="请输入内容" v-model="add_select_item2">
<div slot="append" @click="add_select2"> <div slot="append" @click="add_select2">
新增 新增
...@@ -132,18 +132,16 @@ ...@@ -132,18 +132,16 @@
<div class="dialog_form_item3"> <div class="dialog_form_item3">
<div class="dialog_form_item_title">图标设置:</div> <div class="dialog_form_item_title">图标设置:</div>
<div style="width: 80%;"> <div style="">
<div class="dialog_form_item3_content1" style="margin-bottom: 10px;"> <div>
<el-radio-group v-model="ruleForm.let5"> <img :src="selectGraphSrc" alt="" />
</div>
<el-radio v-for="(item, index) in graphList" :key="item.graphId" :label="'jiaGou'+index"> <div style="display: flex;">
<img class="tu_biao_icon" :id="'jiaGou'+index" :data-shape="item.graphName" :src="'data:image/svg+xml;base64,'+item.icon" alt="" /> <el-button type="primary" @click="openGraphDialog">图形选择</el-button>
</el-radio> <el-input style="width: 80px;margin-left: 30px;" type="color" v-model="ruleForm.let6"></el-input>
</el-radio-group>
</div> </div>
<div class="dialog_form_item3_content1" style="width: 80px;"> </div>
<el-input type="color" v-model="ruleForm.let6"></el-input>
<!-- <el-radio-group v-model="ruleForm.let6"> <!-- <el-radio-group v-model="ruleForm.let6">
<el-radio label="#FF3B30"> <el-radio label="#FF3B30">
...@@ -165,8 +163,7 @@ ...@@ -165,8 +163,7 @@
<img class="tu_biao_icon2" src="@/assets/archi-ele-list/zfx6.svg" alt="" /> <img class="tu_biao_icon2" src="@/assets/archi-ele-list/zfx6.svg" alt="" />
</el-radio> </el-radio>
</el-radio-group> --> </el-radio-group> -->
</div>
</div>
</div> </div>
</div> </div>
</el-form> </el-form>
...@@ -177,6 +174,35 @@ ...@@ -177,6 +174,35 @@
<el-button @click="add_dialog = false">取消</el-button> <el-button @click="add_dialog = false">取消</el-button>
</span> </span>
</el-dialog> </el-dialog>
<el-dialog
title="选择图形"
:visible.sync="graph_dialog"
:center="false"
:before-close="closeGraphDialog"
:close-on-click-modal="false"
width="60%">
<div style="height: 400px;display: flex;align-items: center;">
<div style="width: 20%;height: 100%;border-left: 1px solid #000;border-top: 1px solid #000;border-bottom: 1px solid #000;overflow: auto;text-align: center;">
<div :style="{ 'cursor': 'pointer', 'padding': '4px', 'background-color': nameIndex == index ? 'rgb(13,134,127)' : '#fff', 'color': nameIndex == index ? '#fff' : '#000' }"
v-for="(item, index) in search_select1"
:key="item.belongId"
@click="showCurrentGraph(item.name, index)">
{{ item.name }}
</div>
</div>
<div style="width: 80%;height: 100%;border: 1px solid #000;overflow: auto;">
<div :style="{ 'display': 'inline-block','margin': '10px 20px 10px 20px','border': graphIndex == index ? '2px solid #0D867F' : 'none','padding': '8px', 'border-radius': '6px' }"
v-for="(item, index) in graphList" :key="item.graphId">
<img @click="clickGraph(index)" class="tu_biao_icon" :src="'data:image/svg+xml;base64,'+item.icon" alt="" />
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="save_graph">保存</el-button>
<el-button @click="closeGraphDialog">取消</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
...@@ -203,12 +229,12 @@ export default { ...@@ -203,12 +229,12 @@ export default {
}, },
data() { data() {
return { return {
graph_dialog: false,
ruleForm: { ruleForm: {
let1: null, let1: null,
let2: null, let2: null,
let3: null, let3: null,
let4: null, let4: null,
let5: null,
let6: '#FF3B30', let6: '#FF3B30',
}, },
rules: { rules: {
...@@ -247,7 +273,11 @@ export default { ...@@ -247,7 +273,11 @@ export default {
total: 20 //总条数 total: 20 //总条数
}, },
tableHeight: null, tableHeight: null,
graphList: [] graphList: [],
nameIndex: 0,
graphIndex: -1,
selectGraphSrc: '',
selectGraphShape: ''
}; };
}, },
mounted(){ mounted(){
...@@ -258,6 +288,45 @@ export default { ...@@ -258,6 +288,45 @@ export default {
this.get_table(); this.get_table();
}, },
methods: { methods: {
openGraphDialog() {//打开图形选择窗口
this.graph_dialog = true;
this.showCurrentGraph(this.search_select1[0].name, 0);
},
save_graph() {//图形选择窗口的保存
if(this.graphIndex == -1) {
Message({
type: 'error',
message: '请选择一种图形'
});
return;
}
this.graph_dialog = false;
this.selectGraphSrc = 'data:image/svg+xml;base64,' + this.graphList[this.graphIndex].icon;
this.selectGraphShape = this.graphList[this.graphIndex].graphName;
},
closeGraphDialog() {//图形选择窗口的取消
this.graphIndex = 0;
this.nameIndex = 0;
this.graph_dialog = false;
},
showCurrentGraph(name, idx) {//图形选择窗口的文字点击
this.nameIndex = idx;
this.graphIndex = -1;
const params = {
graphType: name
}
query_jia_gou_gui_shu_belong_icon(params).then(res => {
if(res.code == 200) {
this.graphList = res.data;
}else {
}
});
},
clickGraph(idx) {////图形选择窗口的图形点击
this.graphIndex = idx;
},
set_table_height() {//动态设置表格高度 set_table_height() {//动态设置表格高度
const table_container_height = $(".table_container").height(); const table_container_height = $(".table_container").height();
const search_menu_height = $(".search_menu").height(); const search_menu_height = $(".search_menu").height();
...@@ -337,13 +406,20 @@ export default { ...@@ -337,13 +406,20 @@ export default {
release_dialog() {//弹框的发布 release_dialog() {//弹框的发布
this.$refs.form.validate(valid => { this.$refs.form.validate(valid => {
if(valid) { if(valid) {
if(this.selectGraphSrc.length == 0) {
Message({
type: 'error',
message: '请选择图形'
});
return;
}
const params = { const params = {
elementName: this.ruleForm.let1, elementName: this.ruleForm.let1,
archiLevelId: this.ruleForm.let2, archiLevelId: this.ruleForm.let2,
archiBelongId: this.ruleForm.let3, archiBelongId: this.ruleForm.let3,
content: this.ruleForm.let4, content: this.ruleForm.let4,
icon: $(`#${this.ruleForm.let5}`)[0].src, icon: this.selectGraphSrc,
iconName: $(`#${this.ruleForm.let5}`).data('shape')+'fillColor='+this.ruleForm.let6+';', iconName: this.selectGraphShape + 'fillColor='+this.ruleForm.let6+';',
color: this.ruleForm.let6, color: this.ruleForm.let6,
state: 1, state: 1,
}; };
...@@ -389,13 +465,20 @@ export default { ...@@ -389,13 +465,20 @@ export default {
save_dialog() {//弹框的保存 save_dialog() {//弹框的保存
this.$refs.form.validate(valid => { this.$refs.form.validate(valid => {
if(valid) { if(valid) {
if(this.selectGraphSrc.length == 0) {
Message({
type: 'error',
message: '请选择图形'
});
return;
}
const params = { const params = {
elementName: this.ruleForm.let1, elementName: this.ruleForm.let1,
archiLevelId: this.ruleForm.let2, archiLevelId: this.ruleForm.let2,
archiBelongId: this.ruleForm.let3, archiBelongId: this.ruleForm.let3,
content: this.ruleForm.let4, content: this.ruleForm.let4,
icon: $(`#${this.ruleForm.let5}`)[0].src, icon: this.selectGraphSrc,
iconName: $(`#${this.ruleForm.let5}`).data('shape')+'fillColor='+this.ruleForm.let6+';', iconName: this.selectGraphShape + 'fillColor='+this.ruleForm.let6+';',
color: this.ruleForm.let6, color: this.ruleForm.let6,
state: 2, state: 2,
}; };
...@@ -454,7 +537,8 @@ export default { ...@@ -454,7 +537,8 @@ export default {
this.ruleForm.let2 = null; this.ruleForm.let2 = null;
this.ruleForm.let3 = null; this.ruleForm.let3 = null;
this.ruleForm.let4 = null; this.ruleForm.let4 = null;
this.ruleForm.let5 = null; this.selectGraphSrc = '';
this.selectGraphShape = '';
this.ruleForm.let6 = '#FF3B30'; this.ruleForm.let6 = '#FF3B30';
this.graphList = []; this.graphList = [];
}); });
...@@ -527,21 +611,6 @@ export default { ...@@ -527,21 +611,6 @@ export default {
}); });
}) })
}, },
dialog_selectFun(data) {//查询当前架构归属下的图形
const res = this.search_select1.find(item => item.belongId == data);
const params = {
graphType: res.name
}
query_jia_gou_gui_shu_belong_icon(params).then(res2 => {
if(res2.code == 200) {
this.graphList = res2.data;
this.ruleForm.let5 = 'jiaGou0';
}else {
}
});
},
search_table() {//搜索 search_table() {//搜索
this.pager.current = 1; this.pager.current = 1;
this.get_table(); this.get_table();
...@@ -581,6 +650,7 @@ export default { ...@@ -581,6 +650,7 @@ export default {
this.pager.size = result.data.size; this.pager.size = result.data.size;
if(result.data.records.length > 0) { if(result.data.records.length > 0) {
result.data.records.map(item => { result.data.records.map(item => {
if(item.icon.includes("svg+xml")) { if(item.icon.includes("svg+xml")) {
const item_icon = item.icon.split("base64,")[1]; const item_icon = item.icon.split("base64,")[1];
const decode_item_icon = window.atob(item_icon);//svg解码，为字符串 const decode_item_icon = window.atob(item_icon);//svg解码，为字符串
...@@ -588,6 +658,12 @@ export default { ...@@ -588,6 +658,12 @@ export default {
const path = svgDocument.getElementsByTagName('path')[0]; const path = svgDocument.getElementsByTagName('path')[0];
const rect = svgDocument.getElementsByTagName('rect')[0]; const rect = svgDocument.getElementsByTagName('rect')[0];
const ellipse = svgDocument.getElementsByTagName('ellipse')[0]; const ellipse = svgDocument.getElementsByTagName('ellipse')[0];
const svgTag = svgDocument.getElementsByTagName('svg')[0];
const svgWidth = svgTag.getAttribute('width');
const svgHeight = svgTag.getAttribute('height');
item['width'] = svgWidth;
item['height'] = svgHeight;
if(path) { if(path) {
path.setAttribute('fill', item.color); path.setAttribute('fill', item.color);
} }
...@@ -600,6 +676,9 @@ export default { ...@@ -600,6 +676,9 @@ export default {
const svgToString = new XMLSerializer().serializeToString(svgDocument);//svg标签转化为字符串 const svgToString = new XMLSerializer().serializeToString(svgDocument);//svg标签转化为字符串
const encode_item_icon = window.btoa(svgToString);//base64编码 const encode_item_icon = window.btoa(svgToString);//base64编码
item.icon = 'data:image/svg+xml;base64,'+ encode_item_icon; item.icon = 'data:image/svg+xml;base64,'+ encode_item_icon;
}else {
item['width'] = 0;
item['height'] = 0;
} }
}) })
Promise.all([ this.get_dialog_select1(), this.get_dialog_select2() ]).then(res2 => { Promise.all([ this.get_dialog_select1(), this.get_dialog_select2() ]).then(res2 => {
...@@ -921,10 +1000,8 @@ export default { ...@@ -921,10 +1000,8 @@ export default {
display: flex; display: flex;
} }
.tu_biao_icon{ .tu_biao_icon{
width: 30px; width: 100%;
} cursor: pointer;
.tu_biao_icon2{
width: 20px;
} }
.dialog_form_item3_content1{ .dialog_form_item3_content1{
display: flex; display: flex;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!