Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 049fed99 by 史敦盼
Options

Merge branch 'sdp-v1'

2 parents b5f0c715 80be01f5
Inline Side-by-side
Showing with 121 additions and 24 deletions
src/api/index.js
......@@ -806,6 +806,10 @@ export function getJsonToXml(params) {
export function getQryByTree(params) {
return post(EADC_ARRCHITECTURE + '/arc-ast-info/qryByTree', params)
}
// 获取上级元素
export function getPreArc(params) {
return post(EADC_ARRCHITECTURE + '/arc-ast-info/qyLastEle', params)
}
export function postRequest(url, params) {
return post(EADC_ARRCHITECTURE + url, params)
......
src/config/index.js
// onlyoffice 文档url
export const documentServerUrl = 'http://192.168.0.120/'
export const documentServerUrl2 = 'http://192.168.0.120:18050/'
// 元素颜色配置
// '业务架构元素': '#d2edfd', '应用架构元素': '#a0ce62', '数据架构元素': '#fbe8d0', '技术架构元素': '#e4d3fc', '安全架构元素': '#fffe55'
export const archiEleColor = ['#d2edfd', '#a0ce62', '#fbe8d0', '#e4d3fc', '#fffe55']
src/router/index.js
......@@ -82,7 +82,7 @@ export const routes = [
name: 'busiAssetslist',
component: () => import('@/views/busi-assets-list/index.vue'),
meta: {
title: '业务架构资产管理',
title: '总体架构资产管理',
},
},
// {
......
src/views/archi-ele-list/index.vue
......@@ -346,6 +346,10 @@
<el-button type="primary" @click="openGraphDialog"
>图形选择</el-button
>
<el-color-picker
v-model="ruleForm.let6"
:predefine="predefineColors">
</el-color-picker>
<!-- <el-input
style="width: 80px; margin-left: 30px"
type="color"
......@@ -767,7 +771,7 @@ import {
import { MessageBox, Message } from 'element-ui'
import $ from 'jquery'
import { getDictTypeOptions, svgToBase64 } from '@/utils'
import { archiEleColor } from '@/config'
export default {
name: 'ArchiEleList',
components: {},
......@@ -803,7 +807,7 @@ export default {
let3: null,
let4: null,
// let5: null,
let6: '#FF3B30',
let6: '#d2edfd',
definition: null,
referenceRelationship: null,
example: null,
......@@ -863,7 +867,8 @@ export default {
selectGraphShape: '',
tabType: '元模型图元',
scopeApplicationOptions: [],
rowData: {}
rowData: {},
predefineColors: archiEleColor
}
},
mounted() {
......@@ -1438,7 +1443,7 @@ export default {
this.ruleForm.let5 = null
this.selectGraphSrc = ''
this.selectGraphShape = ''
this.ruleForm.let6 = '#FF3B30'
this.ruleForm.let6 = '#d2edfd'
this.graphList = []
})
},
......@@ -1565,9 +1570,9 @@ export default {
) //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
......@@ -1576,15 +1581,15 @@ 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,
......
src/views/busi-assets-list/index.vue
......@@ -169,6 +169,15 @@
align="center"
show-overflow-tooltip
></el-table-column>
<el-table-column width="100" label="图标" align="center">
<template slot-scope="scope">
<img
:src="scope.row.icon"
alt=""
:style="{ width: scope.row.width, height: scope.row.height }"
/>
</template>
</el-table-column>
<!-- <el-table-column prop="parentAssetName" label="上级资产名称" width="300" :show-overflow-tooltip="true" align="center"></el-table-column> -->
<el-table-column
prop="version"
......@@ -196,6 +205,7 @@
prop="createTime"
label="创建时间"
align="center"
width="100"
></el-table-column>
<el-table-column
prop="createMan"
......@@ -309,7 +319,9 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item label="上级元素:" v-if="ruleForm.let3 && preArcList.length">
<el-tag :class="{'m-r-10': idx!= preArcList.length-1}" v-for="(item, idx) in preArcList" :key="idx">{{ item.parentElement }}</el-tag>
</el-form-item>
<!-- <el-form-item label="关联资产:" prop="let6">
<el-select clearable @change="guanLianZiChanChange" filterable remote :remote-method="queryGuanLianZiChan" placeholder="请选择" multiple v-model="ruleForm.let6">
<el-option v-for="item in guanLianZiChanSelect" :key="String(item.assetId)" :label="item.assetName" :value="item.assetId"></el-option>
......@@ -374,8 +386,8 @@
<div class="flex">
<img
:style="{
width: selectGraphSrc.length > 0 ? '80px' : 0,
height: selectGraphSrc.length > 0 ? '40px' : 0,
width: selectGraphSrc ? '80px' : 0,
height: selectGraphSrc ? '40px' : 0,
}"
:src="selectGraphSrc"
alt=""
......@@ -387,6 +399,10 @@
<el-button type="primary" @click="openGraphDialog"
>图形选择</el-button
>
<el-color-picker
v-model="ruleForm.color"
:predefine="predefineColors">
</el-color-picker>
</div>
</div>
</div>
......@@ -546,10 +562,12 @@ import {
getDianXingAnLiSelectData,
importZhiChanJiaGou,
queryGuanLianZiChanSelect,
getPreArc
} from '@/api/index.js'
import $ from 'jquery'
import { MessageBox, Message } from 'element-ui'
import { getDictTypeOptions } from '@/utils'
import { archiEleColor } from '@/config'
export default {
name: 'BusiAssetslist',
components: {
......@@ -575,6 +593,7 @@ export default {
let4: 0,
let5: '显示',
let6: '',
color: '#d2edfd',
dynamicForm0_: [],
dynamicForm_: [],
},
......@@ -635,7 +654,9 @@ export default {
chooseSvgVisible: false,
assetsStatusOptions: [],
cascaderValue: [],
cascaderValue2: []
cascaderValue2: [],
preArcList: [],
predefineColors: archiEleColor
}
},
created() {
......@@ -718,7 +739,7 @@ export default {
//弹框保存
this.$refs.form.validate((valid) => {
if (valid) {
if (this.selectGraphSrc.length == 0) {
if (!this.selectGraphSrc) {
return this.$message.warning('请选择图形')
}
// console.log(this.ruleForm);
......@@ -763,6 +784,7 @@ export default {
} else {
targetAsset = [{}]
}
const parentElement = this.preArcList.map(v => v.parentElement) || []
const params = {
archiAssetState: this.searchParams.archiAssetState,
archiStage: this.searchParams.archiStage,
......@@ -781,6 +803,8 @@ export default {
eleName: eleName,
icon: this.selectGraphSrc,
iconName: this.selectGraphShape,
color: this.ruleForm.color,
parentElement
}
const requestParams =
this.is_add_edit == 'add'
......@@ -877,6 +901,50 @@ export default {
this.pager.current = res.data.current
this.pager.total = res.data.total
this.pager.size = res.data.size
if (res.data.records.length > 0) {
res.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解码，为字符串
const svgDocument = new DOMParser().parseFromString(
decode_item_icon,
'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 svgTag = svgDocument.getElementsByTagName('svg')[0]
const svgWidth =
Number(svgTag.getAttribute('width').split('px')[0]) / 2
const svgHeight =
Number(svgTag.getAttribute('height').split('px')[0]) / 2
item['width'] = svgWidth + 'px'
item['height'] = svgHeight + 'px'
if(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标签转化为字符串
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
}
})
}
this.tableData = res.data.records
} else {
Message({
......@@ -921,7 +989,8 @@ export default {
this.selectLabel = ''
this.selectValue = ''
this.selectCode = ''
this.cascaderValue = []
this.cascaderValue = [],
this.ruleForm.color = '#d2edfd'
})
},
viewItem(row) {
......@@ -930,12 +999,14 @@ export default {
this.zuJianLeiXingSelect = res
})
this.addDialog = true
console.log(1)
this.is_add_edit = 'view'
this.ruleForm.let1 = row.assetName
this.ruleForm.let2 = row.parentAssetName
this.ruleForm.let3 = row.archiEleId
this.ruleForm.let4 = row.sort
this.ruleForm.let5 = row.isShow == 0 ? '显示' : '隐藏'
this.ruleForm.color = row.color
this.editRow = row
let fieldsValue = row.fieldsValue
let targetAsset = row.targetAsset
......@@ -958,10 +1029,12 @@ export default {
}
this.ruleForm.let6 = targetAsset_id
}
console.log(2)
if (fieldsValue.length == 4) {
this.ruleForm.dynamicForm_ = []
} else {
let fieldsValue_ = JSON.parse(fieldsValue)
console.log(3)
fieldsValue_.map((item) => {
if (item.dictKey) {
this.get_key(item.dictKey).then((res2) => {
......@@ -982,6 +1055,7 @@ export default {
this.ruleForm.let4 = row.sort
this.ruleForm.let5 = row.isShow == 0 ? '显示' : '隐藏'
this.ruleForm.color = row.color
this.editRow = row
let fieldsValue = row.fieldsValue
let targetAsset = row.targetAsset
......@@ -996,7 +1070,7 @@ export default {
const currentItem = this.zuJianLeiXingSelect.find(
(item) => item.elementId == this.ruleForm.let3,
)
if (currentItem.eaLevel == 1) {
if (currentItem && currentItem.eaLevel == 1) {
this.disabled1 = true
} else {
this.disabled1 = false
......@@ -1146,13 +1220,23 @@ export default {
})
})
},
// 获取上级元素
getPreArc(item) {
getPreArc({eleName: item.elementName}).then(res => {
if(res.code === 200) {
this.preArcList = res.data
}
})
},
zuJianLeiXingSelectChange(data) {
//所属元素选择后
// console.log(data)
// console.log(this.zuJianLeiXingSelect)
const currentItem = this.zuJianLeiXingSelect.find(
(item) => item.elementId == data,
)
this.getPreArc(currentItem)
if (currentItem.eaLevel == 1) {
this.disabled1 = true
} else {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!