Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 4c15bbd7 by 史敦盼
Options

架构元素管理修改

1 parent 7a280f14
Inline Side-by-side
Showing with 340 additions and 93 deletions
src/utils/index.js
......@@ -51,3 +51,13 @@ export async function getDictTypeOptions(key) {
// console.log('dictTypeOptions', dictTypeOptions)
return dictTypeOptions
}
/**
* @description: svg字符串转base64
* @param {String} svgCode
* @return {String} base64
* @author: pan
*/
export function svgToBase64(svgCode) {
const utf8Bytes = new TextEncoder().encode(svgCode);
return 'data:image/svg+xml;base64,' + btoa(String.fromCharCode.apply(null, utf8Bytes));
}
src/views/archi-ele-list/index.vue
......@@ -140,7 +140,9 @@
<el-table-column
prop="version"
label="版本"
width="160"
align="center"
show-overflow-tooltip
></el-table-column>
<el-table-column label="状态" align="center">
<template slot-scope="scope">
......@@ -297,7 +299,6 @@
placeholder="请选择"
:disabled="is_add_edit == 'view' ? true : false"
v-model="ruleForm.let5"
style="width: 200px"
>
<el-option label="L1" :value="1"></el-option>
<el-option label="L2" :value="2"></el-option>
......@@ -306,6 +307,21 @@
<el-option label="L5" :value="5"></el-option>
</el-select>
</el-form-item>
<el-form-item label="适用范围:" prop="scope">
<el-select
clearable
placeholder="请选择"
:disabled="is_add_edit == 'view' ? true : false"
v-model="ruleForm.scope"
>
<el-option
:label="item.label"
:value="item.value"
v-for="item in scopeApplicationOptions"
:key="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item class="cross1" label="描述:" prop="let4">
<el-input
v-no-backslash
......@@ -319,6 +335,49 @@
v-model="ruleForm.let4"
></el-input>
</el-form-item>
<el-form-item class="cross1" label="定义:" prop="definition">
<el-input
v-no-backslash
:disabled="is_add_edit == 'view' ? true : false"
type="textarea"
:rows="3"
maxlength="200"
show-word-limit
placeholder="请输入内容"
class="dialog_form_item_content"
v-model="ruleForm.definition"
></el-input>
</el-form-item>
<el-form-item
class="cross1"
label="引用关系:"
prop="referenceRelationship"
>
<el-input
v-no-backslash
:disabled="is_add_edit == 'view' ? true : false"
type="textarea"
:rows="3"
maxlength="200"
show-word-limit
placeholder="请输入内容"
class="dialog_form_item_content"
v-model="ruleForm.referenceRelationship"
></el-input>
</el-form-item>
<el-form-item class="cross1" label="示例:" prop="example">
<el-input
v-no-backslash
:disabled="is_add_edit == 'view' ? true : false"
type="textarea"
:rows="3"
maxlength="200"
show-word-limit
placeholder="请输入内容"
class="dialog_form_item_content"
v-model="ruleForm.example"
></el-input>
</el-form-item>
<div class="dialog_form_item3">
<div class="dialog_form_item_title">图标设置:</div>
......@@ -340,11 +399,11 @@
<el-button type="primary" @click="openGraphDialog"
>图形选择</el-button
>
<el-input
<!-- <el-input
style="width: 80px; margin-left: 30px"
type="color"
v-model="ruleForm.let6"
></el-input>
></el-input> -->
</div>
</div>
......@@ -702,6 +761,7 @@ import {
} from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
import $ from 'jquery'
import { getDictTypeOptions, svgToBase64 } from '@/utils'
export default {
name: 'ArchiEleList',
......@@ -738,6 +798,10 @@ export default {
let4: null,
let5: null,
let6: '#FF3B30',
definition: null,
referenceRelationship: null,
example: null,
scope: null,
},
rules: {
let1: [{ required: true, message: '请输入元素名称', trigger: 'blur' }],
......@@ -751,6 +815,16 @@ export default {
let5: [
{ required: true, message: '请选择元素层级', trigger: 'change' },
],
scope: [
{ required: true, message: '请选择适用范围', trigger: 'change' },
],
definition: [
{ required: true, message: '请输入定义', trigger: 'blur' },
],
referenceRelationship: [
{ required: true, message: '请输入引用关系', trigger: 'blur' },
],
example: [{ required: true, message: '请输入示例', trigger: 'blur' }],
},
tableData: [],
add_dialog: false,
......@@ -782,6 +856,7 @@ export default {
selectGraphSrc: '',
selectGraphShape: '',
tabType: '元模型图元',
scopeApplicationOptions: [],
}
},
mounted() {
......@@ -790,6 +865,9 @@ export default {
})
this.set_table_height()
this.get_table()
getDictTypeOptions('scope_application').then((res) => {
this.scopeApplicationOptions = res
})
},
methods: {
indexMethod(index) {
......@@ -875,6 +953,10 @@ export default {
this.ruleForm.let4 = row.content
this.ruleForm.let5 = row.eaLevel
this.ruleForm.let6 = row.color
this.ruleForm.definition = row.definition
this.ruleForm.referenceRelationship = row.referenceRelationship
this.ruleForm.example = row.example
this.ruleForm.scope = row.scope
this.is_add_edit = 'view'
this.elementId = row.elementId
this.state = row.state
......@@ -897,6 +979,10 @@ export default {
this.ruleForm.let4 = row.content
this.ruleForm.let5 = row.eaLevel
this.ruleForm.let6 = row.color
this.ruleForm.definition = row.definition
this.ruleForm.referenceRelationship = row.referenceRelationship
this.ruleForm.example = row.example
this.ruleForm.scope = row.scope
this.is_add_edit = 'edit'
this.elementId = row.elementId
this.state = row.state
......@@ -1011,6 +1097,34 @@ export default {
'data:image/svg+xml;base64,' + this.graphList[this.graphIndex].icon
this.selectGraphShape = this.graphList[this.graphIndex].graphName
}
// 给图形添加文字
const item_icon = this.selectGraphSrc.split('base64,')[1]
const decode_item_icon = window.atob(item_icon) //svg解码，为字符串
const svgDocument = new DOMParser().parseFromString(
decode_item_icon,
'text/xml',
) //svg字符串转标签
// console.log(svgDocument)
const svgTag = svgDocument.getElementsByTagName('svg')[0]
// 图形添加文字
var svgNS = 'http://www.w3.org/2000/svg'
var text = document.createElementNS(svgNS, 'text')
text.textContent = this.ruleForm.let1
// 设置text元素的属性，例如字体大小和颜色
text.setAttribute('font-size', '12')
text.setAttribute('fill', '#000000')
// 设置text元素的位置（居中展示）
text.setAttribute('text-anchor', 'middle')
text.setAttribute('dominant-baseline', 'middle')
const svgWidth = Number(svgTag.getAttribute('width').split('px')[0]) / 2
const svgHeight = Number(svgTag.getAttribute('height').split('px')[0]) / 2
text.setAttribute('x', svgWidth) // 距离左边界
text.setAttribute('y', svgHeight) // 距离上边界
// 将text元素添加到SVG容器中
svgTag.appendChild(text)
const svgToString = new XMLSerializer().serializeToString(svgDocument) //svg标签转化为字符串
// console.log('svgToString', svgToString)
this.selectGraphSrc = svgToBase64(svgToString) // 'data:image/svg+xml;base64,' + encode_item_icon
},
closeGraphDialog() {
//图形选择窗口的取消
......@@ -1160,6 +1274,10 @@ export default {
color: this.ruleForm.let6,
state: 1,
eleType: eleType,
definition: this.ruleForm.definition,
referenceRelationship: this.ruleForm.referenceRelationship,
example: this.ruleForm.example,
scope: this.ruleForm.scope,
}
const requestParams =
this.is_add_edit == 'add'
......@@ -1234,6 +1352,10 @@ export default {
color: this.ruleForm.let6,
state: 2,
eleType: eleType,
definition: this.ruleForm.definition,
referenceRelationship: this.ruleForm.referenceRelationship,
example: this.ruleForm.example,
scope: this.ruleForm.scope,
}
const requestParams =
this.is_add_edit == 'add'
......@@ -1421,9 +1543,10 @@ export default {
'text/xml',
) //svg字符串转标签
// console.log(svgDocument)
const path = svgDocument.getElementsByTagName('path')[0]
const rect = svgDocument.getElementsByTagName('rect')[0]
const ellipse = svgDocument.getElementsByTagName('ellipse')[0]
// 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 =
Number(svgTag.getAttribute('width').split('px')[0]) / 2
......@@ -1432,15 +1555,16 @@ export default {
item['width'] = svgWidth + 'px'
item['height'] = svgHeight + 'px'
if (path) {
path.setAttribute('fill', item.color)
}
if (rect) {
rect.setAttribute('fill', item.color)
}
if (ellipse) {
ellipse.setAttribute('fill', item.color)
}
// if (path) {
// path.setAttribute('fill', item.color)
// }
// if (rect) {
// rect.setAttribute('fill', item.color)
// }
// if (ellipse) {
// ellipse.setAttribute('fill', item.color)
// }
const svgToString = new XMLSerializer().serializeToString(
svgDocument,
) //svg标签转化为字符串
......@@ -1492,6 +1616,7 @@ export default {
elementId: row.elementId,
state: 0,
version: row.version,
elementName: row.elementName
}
edit_jia_gou_yuan_su(params).then((res) => {
if (res.code == 200) {
......@@ -1529,6 +1654,7 @@ export default {
elementId: row.elementId,
state: 1,
version: row.version,
elementName: row.elementName,
}
edit_jia_gou_yuan_su(params).then((res) => {
if (res.code == 200) {
......@@ -1566,6 +1692,7 @@ export default {
elementId: row.elementId,
state: row.state,
delFlag: 1,
elementName: row.elementName
}
delete_jia_gou_gui_shu(params).then((res) => {
if (res.code == 200) {
......@@ -1636,12 +1763,16 @@ export default {
flex-wrap: wrap;
padding-left: 50px;
}
/deep/ .el-form-item__label {
width: 100px;
}
.cross1 {
width: 100% !important;
margin-left: 27px;
// margin-left: 27px;
}
/deep/ .cross1 > .el-form-item__content {
width: 89.5% !important;
// width: 89.5% !important;
flex: 1;
}
.el-form-item {
display: flex;
......
src/views/archi-view-manage/index.vue
......@@ -15,12 +15,12 @@
</el-tree>
<div class="right_container">
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="暂存" name="暂存">
<el-tab-pane label="发布" name="发布">
<div class="card_container">
<div class="card_body">
<el-card
class="card_item"
v-for="item in zanCun"
v-for="item in yiFaBu"
:key="item.metaModelId"
>
<img
......@@ -42,38 +42,38 @@
<i class="el-icon-location"></i>
{{ item.verName }}&nbsp;&nbsp;&nbsp;{{ item.version }}
</div>
<div class="card_icon" @click.stop="deleteItem(item)">
<i class="el-icon-delete"></i>
</div>
<!-- <div class="card_icon" @click.stop="deleteItem(item)">
<i class="el-icon-delete"></i>
</div> -->
</div>
</el-card>
<div
<!-- <div
v-if="viewId"
class="add_container"
@click="open_dialog('暂存')"
@click="open_dialog('发布')"
>
<i class="el-icon-plus"></i>
</div>
</div> -->
</div>
</div>
<el-pagination
background
@size-change="(val) => handleSizeChange(val, '暂存')"
@current-change="(val) => handleCurrentChange(val, '暂存')"
:current-page="pager2.current"
:page-sizes="pager2.sizes"
:page-size="pager2.size"
@size-change="(val) => handleSizeChange(val, '发布')"
@current-change="(val) => handleCurrentChange(val, '发布')"
:current-page="pager1.current"
:page-sizes="pager1.sizes"
:page-size="pager1.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pager2.total"
:total="pager1.total"
>
</el-pagination>
</el-tab-pane>
<el-tab-pane label="停用" name="停用">
<el-tab-pane label="暂存" name="暂存">
<div class="card_container">
<div class="card_body">
<el-card
class="card_item"
v-for="item in tingYong"
v-for="item in zanCun"
:key="item.metaModelId"
>
<img
......@@ -103,7 +103,7 @@
<div
v-if="viewId"
class="add_container"
@click="open_dialog('停用')"
@click="open_dialog('暂存')"
>
<i class="el-icon-plus"></i>
</div>
......@@ -111,22 +111,22 @@
</div>
<el-pagination
background
@size-change="(val) => handleSizeChange(val, '停用')"
@current-change="(val) => handleCurrentChange(val, '停用')"
:current-page="pager3.current"
:page-sizes="pager3.sizes"
:page-size="pager3.size"
@size-change="(val) => handleSizeChange(val, '暂存')"
@current-change="(val) => handleCurrentChange(val, '暂存')"
:current-page="pager2.current"
:page-sizes="pager2.sizes"
:page-size="pager2.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pager3.total"
:total="pager2.total"
>
</el-pagination>
</el-tab-pane>
<el-tab-pane label="发布" name="发布">
<el-tab-pane label="停用" name="停用">
<div class="card_container">
<div class="card_body">
<el-card
class="card_item"
v-for="item in yiFaBu"
v-for="item in tingYong"
:key="item.metaModelId"
>
<img
......@@ -148,15 +148,15 @@
<i class="el-icon-location"></i>
{{ item.verName }}&nbsp;&nbsp;&nbsp;{{ item.version }}
</div>
<!-- <div class="card_icon" @click.stop="deleteItem(item)">
<i class="el-icon-delete"></i>
</div> -->
<div class="card_icon" @click.stop="deleteItem(item)">
<i class="el-icon-delete"></i>
</div>
</div>
</el-card>
<div
v-if="viewId"
class="add_container"
@click="open_dialog('发布')"
@click="open_dialog('停用')"
>
<i class="el-icon-plus"></i>
</div>
......@@ -164,16 +164,17 @@
</div>
<el-pagination
background
@size-change="(val) => handleSizeChange(val, '发布')"
@current-change="(val) => handleCurrentChange(val, '发布')"
:current-page="pager1.current"
:page-sizes="pager1.sizes"
:page-size="pager1.size"
@size-change="(val) => handleSizeChange(val, '停用')"
@current-change="(val) => handleCurrentChange(val, '停用')"
:current-page="pager3.current"
:page-sizes="pager3.sizes"
:page-size="pager3.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pager1.total"
:total="pager3.total"
>
</el-pagination>
</el-tab-pane>
</el-tabs>
</div>
<el-dialog
......@@ -233,7 +234,7 @@ export default {
],
treeDefaultExpand: [],
currentNodekey: null,
activeName: '暂存',
activeName: '发布',
pager1: {
current: 1,
sizes: [10, 20, 50, 100, 200],
......
src/views/archiViewConfig/index.vue
......@@ -1208,40 +1208,52 @@ export default {
}
})
} else if (type == 'pushAdd') {
this.formData.state = 1
// this.formData.eleName = this.selectData1.join(",");
// this.formData.archiEleId = this.selectData2.join(",");
// this.formData.relName = this.selectData3.join(",");
// this.formData.archiEleRelId = this.selectData4.join(",");
this.$refs.viewForm.validate((valid) => {
if (valid) {
if (!this.formData.eleName) {
this.$message.error('请勾选元素范围')
return
}
if (!this.formData.relName) {
this.$message.error('请勾选元素关系范围')
return
}
this.formData.state = 1
// this.formData.eleName = this.selectData1.join(",");
// this.formData.archiEleId = this.selectData2.join(",");
// this.formData.relName = this.selectData3.join(",");
// this.formData.archiEleRelId = this.selectData4.join(",");
this.formData.archiEleId = this.transferValue1.join(',')
this.formData.archiEleRelId = this.transferValue2.join(',')
this.formData.archiEleId = this.transferValue1.join(',')
this.formData.archiEleRelId = this.transferValue2.join(',')
if (this.formData.viewId) {
// 编辑发布
getJGSTPZUpdate(this.formData).then((res) => {
if (res.code == 200) {
this.$message.success('发布成功')
this.add_dialog = false
this.getList()
} else {
this.add_dialog = false
this.$message.error(res.msg)
}
})
} else {
// 新建发布
getJGSTPZAdd(this.formData).then((res) => {
if (res.code == 200) {
this.$message.success('发布成功')
this.add_dialog = false
this.getList()
if (this.formData.viewId) {
// 编辑发布
getJGSTPZUpdate(this.formData).then((res) => {
if (res.code == 200) {
this.$message.success('发布成功')
this.add_dialog = false
this.getList()
} else {
this.add_dialog = false
this.$message.error(res.msg)
}
})
} else {
this.add_dialog = false
this.$message.error(res.msg)
// 新建发布
getJGSTPZAdd(this.formData).then((res) => {
if (res.code == 200) {
this.$message.success('发布成功')
this.add_dialog = false
this.getList()
} else {
this.add_dialog = false
this.$message.error(res.msg)
}
})
}
})
}
}
})
} else if (type == 'pushEdit') {
// 编辑发布
this.$confirm('确认发布吗', '提示', {
......
src/views/meta-model-list/DetailLegend.vue
......@@ -4,14 +4,100 @@
* @Autor: pan
* @Date: 2024-04-02 17:10:55
* @LastEditors: pan
* @LastEditTime: 2024-04-02 17:44:41
* @LastEditTime: 2024-04-03 09:28:23
-->
<template>
<div class="legend flex">
<span class="m-r-20">图例:</span>
<div class="flex-c" v-for="(item, idx) in items" :key="idx">
<span class="icon m-r-6 m-l-10" :style="{backgroundColor: item.color}"></span>
<span class="name">{{item.name}}</span>
<span
class="icon m-r-6 m-l-10"
:style="{ backgroundColor: item.color }"
></span>
<span class="name">{{ item.name }}</span>
</div>
<div class="flex-c m-r-10">
<svg
t="1712105996408"
viewBox="0 0 3736 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="8364"
width="16"
height="16"
>
<path
d="M0 595.324463h2706.21085l-182.370522 428.675537 1212.65916-511.475947L2523.840328 0l182.370522 428.675537H0v166.648926z"
p-id="8365"
></path>
</svg>
<span class="name">元素间关系</span>
</div>
<div class="flex-c m-r-10">
<svg
t="1712106373997"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="9722"
width="16"
height="16"
>
<path d="M0 0h1024v1024H0z" fill-opacity="0" p-id="9723"></path>
<path
d="M888 318.464l-9.856-17.984a439.424 439.424 0 0 0-385.152-228.416A440.448 440.448 0 0 0 53.056 512a440.32 440.32 0 0 0 439.936 439.936 441.472 441.472 0 0 0 419.264-307.712h-66.112a377.984 377.984 0 0 1-353.152 245.184c-208.064 0-377.408-169.344-377.408-377.408s169.344-377.344 377.408-377.344a375.424 375.424 0 0 1 348.544 235.904l8.384 20.736"
fill="#323333"
p-id="9724"
></path>
<path
d="M603.52 268.288l-19.136 61.056 328.064 102.784 58.496-305.152-62.912-12.032-44.928 234.624z"
fill="#333333"
p-id="9725"
></path>
</svg>
<span class="name">元素自嵌套关系</span>
</div>
<div class="flex-c m-r-10">
<span class="circle"></span>
<span class="name">总体架构元素</span>
</div>
<div class="flex-c m-r-10">
<svg
t="1712107200597"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="15801"
width="18"
height="18"
>
<path
d="M512 70.62069C268.535172 70.62069 70.62069 268.711724 70.62069 512s197.914483 441.37931 441.37931 441.37931 441.37931-197.914483 441.37931-441.37931S755.464828 70.62069 512 70.62069z m361.048276 441.37931c0 65.324138-17.478621 126.411034-47.845517 179.376552l-311.26069-540.248276c198.091034 0.882759 359.106207 162.427586 359.106207 360.871724z m-122.88 183.437241L272.41931 692.082759l236.932414-414.896552 240.816552 418.251034zM504.055172 151.128276L197.208276 688.551724C167.724138 636.292414 150.951724 576.088276 150.951724 512c0-196.325517 157.66069-356.457931 353.103448-360.871724z m7.944828 721.92c-103.635862 0-197.208276-43.961379-263.062069-114.228966l522.769655 3.707587c-65.853793 67.972414-157.837241 110.521379-259.707586 110.521379z"
p-id="15802"
data-spm-anchor-id="a313x.search_index.0.i25.41143a81MFjoUU"
class="selected"
fill="#515151"
></path>
</svg>
<span class="name">同属总体与系统架构的元素</span>
</div>
<div class="flex-c m-r-10">
<svg
t="1712107365396"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="17850"
width="14"
height="14"
>
<path
d="M469.674667 34.816L28.416 956.842667A46.933333 46.933333 0 0 0 70.826667 1024H953.173333a46.933333 46.933333 0 0 0 42.368-67.2L554.325333 34.773333a46.933333 46.933333 0 0 0-84.650666 0zM512 144l380.245333 794.624H131.712L512 144z"
fill="#191919"
p-id="17851"
></path>
</svg>
<span class="name">系统架构元素</span>
</div>
</div>
</template>
......@@ -23,25 +109,25 @@ export default {
items: [
{
name: '业务架构元素',
color: '#d2edfd'
color: '#d2edfd',
},
{
name: '应用架构元素',
color: '#a0ce62'
color: '#a0ce62',
},
{
name: '数据架构元素',
color: '#fbe8d0'
color: '#fbe8d0',
},
{
name: '技术架构元素',
color: '#e4d3fc'
color: '#e4d3fc',
},
{
name: '安全架构元素',
color: '#fffe55'
}
]
color: '#fffe55',
},
],
}
},
}
......@@ -57,6 +143,7 @@ export default {
padding: 20px 16px;
width: calc(100% - 540px);
flex-wrap: wrap;
align-items: center;
font-size: 12px;
.icon {
width: 24px;
......@@ -64,5 +151,11 @@ export default {
border-radius: 4px;
border: 1px solid #333;
}
.circle {
border: 1px solid #333;
border-radius: 50%;
width: 16px;
height: 16px;
}
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!