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 127 additions and 65 deletions
public/drawio/extention/js/exGraph.js
......@@ -46,12 +46,12 @@
item.eleDtos.forEach(item2 => {
if(item2.icon) {
if(item2.icon.includes('data')) {
const item_icon = item2.icon.split("base64,")[1];
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 svgTag = svgDocument.getElementsByTagName('svg')[0];
const width = +svgTag.getAttribute('width').split("px")[0];
const height = +svgTag.getAttribute('height').split("px")[0];
// const item_icon = item2.icon.split("base64,")[1];
// 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 svgTag = svgDocument.getElementsByTagName('svg')[0];
// const width = +svgTag.getAttribute('width').split("px")[0];
// const height = +svgTag.getAttribute('height').split("px")[0];
let attr_ = [];
if(item2.dicys && item2.dicys.length > 0) {
......@@ -70,7 +70,7 @@
}
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() {//左侧便签本初始化数据
// 若为压缩的xml,则内容是diagram的内容
}
function saveScratchpad(data) {
function saveScratchpad(data) {//左侧便签本保存数据
let params = [];
if(data.length > 0) {
......
src/App.vue
......@@ -13,21 +13,6 @@
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
height: 100%;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
src/views/archi-ele-list/index.vue
......@@ -52,7 +52,7 @@
<el-table-column prop="content" label="描述" align="center"></el-table-column>
<el-table-column label="图标" align="center">
<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>
</el-table-column>
<el-table-column prop="version" label="版本" align="center"></el-table-column>
......@@ -116,7 +116,7 @@
</el-form-item>
<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">
<div slot="append" @click="add_select2">
新增
......@@ -132,18 +132,16 @@
<div class="dialog_form_item3">
<div class="dialog_form_item_title">图标设置:</div>
<div style="width: 80%;">
<div class="dialog_form_item3_content1" style="margin-bottom: 10px;">
<el-radio-group v-model="ruleForm.let5">
<el-radio v-for="(item, index) in graphList" :key="item.graphId" :label="'jiaGou'+index">
<img class="tu_biao_icon" :id="'jiaGou'+index" :data-shape="item.graphName" :src="'data:image/svg+xml;base64,'+item.icon" alt="" />
</el-radio>
</el-radio-group>
</div>
<div class="dialog_form_item3_content1" style="width: 80px;">
<el-input type="color" v-model="ruleForm.let6"></el-input>
<div style="">
<div>
<img :src="selectGraphSrc" alt="" />
</div>
<div style="display: flex;">
<el-button type="primary" @click="openGraphDialog">图形选择</el-button>
<el-input style="width: 80px;margin-left: 30px;" type="color" v-model="ruleForm.let6"></el-input>
</div>
</div>
<!-- <el-radio-group v-model="ruleForm.let6">
<el-radio label="#FF3B30">
......@@ -165,8 +163,7 @@
<img class="tu_biao_icon2" src="@/assets/archi-ele-list/zfx6.svg" alt="" />
</el-radio>
</el-radio-group> -->
</div>
</div>
</div>
</div>
</el-form>
......@@ -177,6 +174,35 @@
<el-button @click="add_dialog = false">取消</el-button>
</span>
</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>
</template>
......@@ -203,12 +229,12 @@ export default {
},
data() {
return {
graph_dialog: false,
ruleForm: {
let1: null,
let2: null,
let3: null,
let4: null,
let5: null,
let6: '#FF3B30',
},
rules: {
......@@ -247,7 +273,11 @@ export default {
total: 20 //总条数
},
tableHeight: null,
graphList: []
graphList: [],
nameIndex: 0,
graphIndex: -1,
selectGraphSrc: '',
selectGraphShape: ''
};
},
mounted(){
......@@ -258,6 +288,45 @@ export default {
this.get_table();
},
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() {//动态设置表格高度
const table_container_height = $(".table_container").height();
const search_menu_height = $(".search_menu").height();
......@@ -337,13 +406,20 @@ export default {
release_dialog() {//弹框的发布
this.$refs.form.validate(valid => {
if(valid) {
if(this.selectGraphSrc.length == 0) {
Message({
type: 'error',
message: '请选择图形'
});
return;
}
const params = {
elementName: this.ruleForm.let1,
archiLevelId: this.ruleForm.let2,
archiBelongId: this.ruleForm.let3,
content: this.ruleForm.let4,
icon: $(`#${this.ruleForm.let5}`)[0].src,
iconName: $(`#${this.ruleForm.let5}`).data('shape')+'fillColor='+this.ruleForm.let6+';',
icon: this.selectGraphSrc,
iconName: this.selectGraphShape + 'fillColor='+this.ruleForm.let6+';',
color: this.ruleForm.let6,
state: 1,
};
......@@ -389,13 +465,20 @@ export default {
save_dialog() {//弹框的保存
this.$refs.form.validate(valid => {
if(valid) {
if(this.selectGraphSrc.length == 0) {
Message({
type: 'error',
message: '请选择图形'
});
return;
}
const params = {
elementName: this.ruleForm.let1,
archiLevelId: this.ruleForm.let2,
archiBelongId: this.ruleForm.let3,
content: this.ruleForm.let4,
icon: $(`#${this.ruleForm.let5}`)[0].src,
iconName: $(`#${this.ruleForm.let5}`).data('shape')+'fillColor='+this.ruleForm.let6+';',
icon: this.selectGraphSrc,
iconName: this.selectGraphShape + 'fillColor='+this.ruleForm.let6+';',
color: this.ruleForm.let6,
state: 2,
};
......@@ -454,7 +537,8 @@ export default {
this.ruleForm.let2 = null;
this.ruleForm.let3 = null;
this.ruleForm.let4 = null;
this.ruleForm.let5 = null;
this.selectGraphSrc = '';
this.selectGraphShape = '';
this.ruleForm.let6 = '#FF3B30';
this.graphList = [];
});
......@@ -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() {//搜索
this.pager.current = 1;
this.get_table();
......@@ -581,6 +650,7 @@ export default {
this.pager.size = result.data.size;
if(result.data.records.length > 0) {
result.data.records.map(item => {
if(item.icon.includes("svg+xml")) {
const item_icon = item.icon.split("base64,")[1];
const decode_item_icon = window.atob(item_icon);//svg解码，为字符串
......@@ -588,6 +658,12 @@ export default {
const path = svgDocument.getElementsByTagName('path')[0];
const rect = svgDocument.getElementsByTagName('rect')[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) {
path.setAttribute('fill', item.color);
}
......@@ -600,6 +676,9 @@ export default {
const svgToString = new XMLSerializer().serializeToString(svgDocument);//svg标签转化为字符串
const encode_item_icon = window.btoa(svgToString);//base64编码
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 => {
......@@ -921,10 +1000,8 @@ export default {
display: flex;
}
.tu_biao_icon{
width: 30px;
}
.tu_biao_icon2{
width: 20px;
width: 100%;
cursor: pointer;
}
.dialog_form_item3_content1{
display: flex;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!