Merge branch 'sdp-v1'

史敦盼
Commit 049fed99 authored Apr 09, 2024 by 史敦盼
Showing with 121 additions and 24 deletions
src/api/index.js
src/config/index.js
src/router/index.js
src/views/archi-ele-list/index.vue
src/views/busi-assets-list/index.vue
--- a/src/api/index.js
+++ b/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)

--- a/src/config/index.js
+++ b/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']
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -82,7 +82,7 @@ export const routes = [
        name: 'busiAssetslist',
        component: () => import('@/views/busi-assets-list/index.vue'),
        meta: {
-          title: '业务架构资产管理',
+          title: '总体架构资产管理',
        },
      },
      // {

--- a/src/views/archi-ele-list/index.vue
+++ b/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 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 =
                  Number(svgTag.getAttribute('width').split('px')[0]) / 2
@@ -1576,15 +1581,15 @@ export default {
                item['width'] = svgWidth + 'px'
                item['height'] = svgHeight + 'px'
-                // if (path) {
+                if (path) {
-                //   path.setAttribute('fill', item.color)
+                  path.setAttribute('fill', item.color)
-                // }
+                }
-                // if (rect) {
+                if (rect) {
-                //   rect.setAttribute('fill', item.color)
+                  rect.setAttribute('fill', item.color)
-                // }
+                }
-                // if (ellipse) {
+                if (ellipse) {
-                //   ellipse.setAttribute('fill', item.color)
+                  ellipse.setAttribute('fill', item.color)
-                // }
+                }
                const svgToString = new XMLSerializer().serializeToString(
                  svgDocument,

--- a/src/views/busi-assets-list/index.vue
+++ b/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,
+                  width: selectGraphSrc ? '80px' : 0,
-                  height: selectGraphSrc.length > 0 ? '40px' : 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 {