技术框架视图, 资产节点修改

史敦盼
Commit 48a26f84 authored Apr 30, 2024 by 史敦盼
Showing with 178 additions and 50 deletions
src/api/index.js
src/store/modules/graphData.js
src/views/archi-view-manage/canvas/Add.vue
src/views/busi-assets-list/index.vue
src/views/dataMapping/MxGraph.vue
src/views/dataMapping/index.vue
src/views/dataMapping/mixins/businessCapabilityGraph.mixin.js
src/views/dataMapping/mixins/technicalFrameworkGraph.mixin.js
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -859,3 +859,7 @@ export function queryRepeatAssetByNumber(params) {
 export function getAssetDetail(params) {
  return post(EADC_ARRCHITECTURE + '/archi-asset-view/assetTickInfo', params)
 }
+// 根据上级节点查询资产编号
+export function getAssetCode(params) {
+  return post(EADC_ARRCHITECTURE + '/arc-ast-info/getAssetCode', params)
+}
\ No newline at end of file
--- a/src/store/modules/graphData.js
+++ b/src/store/modules/graphData.js
 const state = {
  graphData: [], // 业务能力视图数据
  dataSubjectRelationshipGraphData: [], // 数据主题关系视图数据
+  technicalFrameworkGraphData: {
+    techFrameLeftData: {},
+    techFrameMiddleData: [],
+    techFrameRightData: {},
+  }, // 技术框架视图数据
 }
 const mutations = {
  CHANGE_GRAPH_DATA: (state, data) => {
@@ -8,7 +13,10 @@ const mutations = {
  },
  CHANGE_DATA_SUB_GRAPH_DATA: (state, data) => {
    state.dataSubjectRelationshipGraphData = data
-  }
+  },
+  CHANGE_TECH_FRAME_DATA: (state, data) => {
+    state.technicalFrameworkGraphData = data
+  },
 }
 export default {
  namespaced: true,

--- a/src/views/archi-view-manage/canvas/Add.vue
+++ b/src/views/archi-view-manage/canvas/Add.vue
@@ -52,7 +52,8 @@ import {
  getDianXingAnLiSelectData,
  getQryByTree,
  addMoreZiChanJiaGouTable,
-  queryArchiGraph
+  queryArchiGraph,
+  getAssetCode,
 } from '@/api/index'
 import { archiEleColor } from '@/config'
 export default {
@@ -68,7 +69,7 @@ export default {
    assetName: {
      type: String,
      default: '',
-    }
+    },
  },
  data() {
    return {
@@ -90,6 +91,8 @@ export default {
      selectGraphSrc: '',
      selectGraphShape: '',
      graphId: '',
+      selectedObject: {},
+      assetNumberDis: false,
    }
  },
  components: { Form, ChooseSvg },
@@ -112,6 +115,7 @@ export default {
          element: 'el-input', // 指定elementui组件
          placeholder: '请填写资产编号', // elementui组件属性
          rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
+          readonly: this.assetNumberDis,
        },
        {
          label: '所属元素', // label文字
@@ -337,7 +341,10 @@ export default {
      }
      getQryByTree(params).then((res) => {
        if (res.code == 200) {
-          this.treeSelectData = res.data
+          this.treeSelectData = [
+            { assetName: '无', assetId: '无' },
+            ...res.data,
+          ]
        }
      })
    },
@@ -355,17 +362,41 @@ export default {
    },
    // 上级节点change
    superiorNodeChange(value) {
+      this.selectedObject = {}
+      if (value[0] === '无') {
+        return (this.assetNumberDis = false)
+      }
+      this.assetNumberDis = true
      // 当选中值变化时，更新绑定的对象
-      let selectedObject = {}
      if (value && value.length) {
        // 假设我们根据id来查询对象
-        selectedObject = this.findObjectById(this.treeSelectData, value[0])
+        this.selectedObject = this.findObjectById(
+          this.treeSelectData,
+          value[value.length - 1],
+        )
      } else {
-        selectedObject = null
+        this.selectedObject = null
      }
-      this.superiorNodeValue = selectedObject.assetId
+      // this.superiorNodeValue = selectedObject.assetId
-      this.superiorNodeLabel = selectedObject.assetName
+      // this.superiorNodeLabel = selectedObject.assetName
-      this.selectCode = selectedObject.assetCode
+      // this.selectCode = selectedObject.assetCode
+      getAssetCode({
+        archiType: this.getArchiType,
+        superiorAssetCode: this.selectedObject.assetNumber,
+      }).then((res) => {
+        if (res.code === 200) {
+          this.selectCode = res.msg
+          this.$nextTick(() => {
+            this.$set(
+              this.$refs['addForm'].formData,
+              'assetNumber',
+              res.msg,
+            )
+            this.$refs['addForm'].$refs['formRef'].clearValidate('assetNumber')
+          })
+          // this.ruleForm.assetNumber = res.msg
+        }
+      })
    },
    findObjectById(items, id) {
      for (let i = 0; i < items.length; i++) {
@@ -411,6 +442,7 @@ export default {
      this.selectGraphShape = ''
      this.graphId = ''
      this.dynamicForm_ = []
+      this.selectedObject = {}
      this.formOptions.forEach((v) => {
        if (v.prop === 'superiorNode') {
          v.initValue = []
@@ -468,7 +500,13 @@ export default {
          // 通知画布更新
          document
            .getElementById('drawioGraph')
-            .contentWindow.postMessage({ type: 'attributeAssociation' , data: { archiBelongId, elementId, assetNumber }}, '*')
+            .contentWindow.postMessage(
+              {
+                type: 'attributeAssociation',
+                data: { archiBelongId, elementId, assetNumber },
+              },
+              '*',
+            )
        } else {
          this.$message.error(res.msg)
        }
@@ -502,8 +540,8 @@ export default {
        archiStage: 1,
        archiBelongId,
        archiType: this.getArchiType,
-        parentAssetId: this.superiorNodeValue,
+        parentAssetId: this.selectedObject.assetId,
-        parentAssetName: this.superiorNodeLabel,
+        parentAssetName: this.selectedObject.assetName,
        assetCode: this.selectCode,
        fieldsValue,
        eleName: currentItem.elementName,
@@ -512,6 +550,7 @@ export default {
        parentElement: [formInfo.parentElement || ''],
        graphId: this.graphId,
        state: 1,
+        parentCode: this.selectedObject.assetCode,
      }
      return params
    },

--- a/src/views/busi-assets-list/index.vue
+++ b/src/views/busi-assets-list/index.vue
@@ -333,6 +333,7 @@
              v-no-backslash
              v-model="ruleForm.assetNumber"
              :disabled="is_add_edit == 'view' ? true : false"
+              :readonly="assetNumberDis"
              maxlength="100"
            ></el-input>
          </el-form-item>
@@ -396,9 +397,9 @@
              <el-radio label="隐藏"></el-radio>
            </el-radio-group>
          </el-form-item> -->
+          <!-- :disabled="is_add_edit == 'view' || !ruleForm.preArc && !treeSelectData.length ? true : false" -->
          <el-form-item label="上级节点:" prop="let2">
            <el-cascader
-              :disabled="is_add_edit == 'view' || !ruleForm.preArc && !treeSelectData.length ? true : false"
              v-model="cascaderValue"
              :options="treeSelectData"
              filterable
@@ -591,7 +592,8 @@ import {
  getDianXingAnLiSelectData,
  importZhiChanJiaGou,
  queryGuanLianZiChanSelect,
-  getPreArc
+  getPreArc,
+  getAssetCode
 } from '@/api/index.js'
 import $ from 'jquery'
 import { MessageBox, Message } from 'element-ui'
@@ -689,7 +691,9 @@ export default {
      cascaderValue2: [],
      preArcList: [],
      predefineColors: archiEleColor,
-      graphId: ''
+      graphId: '',
+      selectedObject: {},
+      assetNumberDis: false
    }
  },
  created() {
@@ -840,8 +844,8 @@ export default {
            archiEleId: this.ruleForm.let3,
            assetName: this.ruleForm.let1,
            sort: this.ruleForm.let4,
-            parentAssetId: this.selectValue,
+            parentAssetId: this.selectedObject.assetId,
-            parentAssetName: this.selectLabel,
+            parentAssetName: this.selectedObject.assetName,
            isShow: this.ruleForm.let5 == '显示' ? 0 : 1,
            fieldsValue: fieldsValue,
            targetAsset: targetAsset,
@@ -853,6 +857,7 @@ export default {
            parentElement: [this.ruleForm.preArc],
            assetNumber: this.ruleForm.assetNumber,
            graphId: this.graphId,
+            parentCode: this.selectedObject.assetCode
          }
          const requestParams =
            this.is_add_edit == 'add'
@@ -1177,18 +1182,32 @@ export default {
    },
    handleChange(value) {
      console.log('value', value)
+      this.selectedObject = {}
+      if(value[0] === '无') {
+        return this.assetNumberDis = false
+      }
+      this.assetNumberDis = true
      // 当选中值变化时，更新绑定的对象
-      let selectedObject = {}
      if (value && value.length) {
        // 假设我们根据id来查询对象
-        selectedObject = this.findObjectById(this.treeSelectData, value[0]);
+        this.selectedObject = this.findObjectById(this.treeSelectData, value[value.length - 1]);
      } else {
-        selectedObject = null;
+        this.selectedObject = null;
      }
-      this.selectValue = selectedObject.assetId
+      // this.selectValue = selectedObject.assetId
-      this.selectLabel = selectedObject.assetName
+      // this.selectLabel = selectedObject.assetName
-      this.selectCode = selectedObject.assetCode
+      // this.selectCode = selectedObject.assetCode
-      this.ruleForm.let2 = selectedObject.assetName
+      this.ruleForm.let2 = this.selectedObject.assetName
+      getAssetCode({
+        archiType: this.archiType,
+        superiorAssetCode: this.selectedObject.assetNumber
+      }).then(res => {
+        if(res.code === 200) {
+          this.selectCode = res.msg
+          this.ruleForm.assetNumber = res.msg
+          this.$refs.form.clearValidate('let2')
+        }
+      })
      // console.log('selectedObject', this.selectedObject, value)
    },
    findObjectById(items, id) {
@@ -1261,6 +1280,7 @@ export default {
    },
    getShangJiJieDianSelect(eleName) {
+      this.treeSelectData = []
      //上级节点下拉框值
      const params = {
        archiType: this.archiType,
@@ -1275,7 +1295,7 @@ export default {
          // console.log('上级节点')
          // console.log(res.data)
          this.shangJiJieDianSelect = res.data
-          this.treeSelectData = res.data
+          this.treeSelectData = [...this.treeSelectData, ...res.data]
        }
      })
    },
@@ -1656,8 +1676,8 @@ export default {
          this.archiType = res.data[0].archiType
          this.getArchiEleList() // 所属元素下拉
          // this.archiAssetTypeId = res.data[0].viewId;
-          this.getShangJiJieDianSelect()
+          // this.getShangJiJieDianSelect()
-          this.getGuanLianZiChanSelectData(null)
+          // this.getGuanLianZiChanSelectData(null)
          this.get_table()
        } else {
          Message({

--- a/src/views/dataMapping/MxGraph.vue
+++ b/src/views/dataMapping/MxGraph.vue
@@ -5,32 +5,51 @@
 <script>
 import businessCapabilityGraphMixin from './mixins/businessCapabilityGraph.mixin.js'
 import dataSubjectRelationshipGraphMixin from './mixins/dataSubjectRelationshipGraph.mixin.js'
+import technicalFrameworkGraph from './mixins/technicalFrameworkGraph.mixin.js'
 export default {
  data() {
    return {
      graph: null,
      model: null,
-      graphData: []
+      undoMng: null,
+      undoListener: null,
    }
  },
-  mixins: [businessCapabilityGraphMixin, dataSubjectRelationshipGraphMixin],
+  mixins: [businessCapabilityGraphMixin, dataSubjectRelationshipGraphMixin, technicalFrameworkGraph],
  components: {},
-  computed: {
+  computed: {},
-  },
  mounted() {
    this.graph = new mxGraph(document.getElementById('mxGraph_root'))
    this.model = this.graph.getModel()
-    console.log('this.model', this.model)
+    // console.log('this.model', this.model)
+    // 测试撤销功能
+    // this.undoMng = new mxUndoManager()
+    // const that = this
+    // this.undoListener = function (sender, evt) {
+    //   that.undoMng.undoableEditHappened(evt.getProperty('edit'))
+    // }
+    // this.graph.getModel().addListener(mxEvent.UNDO, this.undoListener)
+    // this.graph.getView().addListener(mxEvent.UNDO, this.undoListener)
    // console.log('this.graph', this.graph)
  },
  methods: {
+    fnUndo() {
+      this.undoMng.undo()
+    },
    clear() {
      this.model.clear()
    },
+  },
+  beforeDestroy() {
+    this.graph.getModel().removeListener(mxEvent.UNDO, this.undoListener)
+    this.graph.getView().removeListener(mxEvent.UNDO, this.undoListener)
  },
 }
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+#mxGraph_root {
+  min-height: 1168px;
+}
+</style>
--- a/src/views/dataMapping/index.vue
+++ b/src/views/dataMapping/index.vue
@@ -4,7 +4,7 @@
 * @Autor: pan
 * @Date: 2024-04-23 11:30:05
 * @LastEditors: pan
- * @LastEditTime: 2024-04-28 17:05:14
+ * @LastEditTime: 2024-04-29 11:12:28
 -->
 <template>
  <div class="dataMapping w-100">
@@ -310,7 +310,7 @@ export default {
      this.handleDataToGraph()
    },
    handleDataToGraph(data, node) {
-      console.log(this.$refs.tree.getCheckedNodes())
+      // console.log(this.$refs.tree.getCheckedNodes())
      switch (this.activeName) {
        case '1':
          this.handleBusGraph()
@@ -320,10 +320,42 @@ export default {
        case '3':
          this.handleDataSubGraph(data, node)
          break
+        case '4':
+          this.handleTechFrameGraph()
+          break
        default:
          break
      }
    },
+    // 技术框架视图
+    handleTechFrameGraph() {
+      const checkedNodes = this.$refs.tree.getCheckedNodes()
+      let parentNodes = checkedNodes.filter((v) => v.parentId === '0')
+      const childNodes = checkedNodes.filter((v) => v.parentId !== '0')
+      this.handleGraphData(parentNodes, childNodes)
+      const leftIdx = parentNodes.findIndex(v => v.assetName === '安全防护')
+      let techFrameLeftData = {}
+      if(leftIdx !== -1) {
+        techFrameLeftData = parentNodes.splice(leftIdx, 1)[0];
+        // parentNodes.splice(0, 0, leftElement);
+      }
+      const rightIdx = parentNodes.findIndex(v => v.assetName === '运行维护')
+      let techFrameRightData = {}
+      if(rightIdx !== -1) {
+        techFrameRightData = parentNodes.splice(rightIdx, 1)[0];
+        // parentNodes.splice(parentNodes.length, 0, rightElement);
+      }
+      // console.log('parentNodes4', parentNodes)
+      let graphData = {
+        techFrameLeftData,
+        techFrameRightData,
+        techFrameMiddleData: parentNodes
+      }
+      // console.log('graphData4', graphData)
+      this.$store.commit('graphData/CHANGE_TECH_FRAME_DATA', graphData)
+      this.$refs['graph'].initTechnicalFrameworkGraph()
+    },
    // 数据主题关系视图成图逻辑
    handleDataSubGraph(data, node) {
      if(node.checked) {

--- a/src/views/dataMapping/mixins/businessCapabilityGraph.mixin.js
+++ b/src/views/dataMapping/mixins/businessCapabilityGraph.mixin.js
@@ -4,9 +4,14 @@
 * @Autor: pan
 * @Date: 2024-04-28 11:05:28
 * @LastEditors: pan
- * @LastEditTime: 2024-04-28 16:01:35
+ * @LastEditTime: 2024-04-29 10:36:49
 */
 const businessCapabilityGraphMixin = {
+  data() {
+    return {
+      graphData: [],
+    }
+  },
  computed: {
    mockData() {
      return this.$store.state.graphData.graphData
@@ -20,12 +25,12 @@ const businessCapabilityGraphMixin = {
          children: this.mockData,
        },
      ]
-      console.log('mockData', this.mockData)
+      // console.log('mockData', this.mockData)
      // mxgraph 被暴露在window下，所以可以直接调用
      const parent = this.graph.getDefaultParent()
      this.graph.removeCells(this.graph.getChildVertices(parent)) //清空画布
      const model = this.graph.getModel()
+      // mxGraphHandler.prototype.guidesEnabled = true
      var style = this.graph.getStylesheet().getDefaultVertexStyle()
      // 禁止编辑文本
      style[mxConstants.STYLE_EDITABLE] = false
@@ -45,12 +50,12 @@ const businessCapabilityGraphMixin = {
          null,
          'html=1;fontColor=#000000;fillColor=#dcf8e5;labelPosition=center;verticalAlign=top;align=center;strokeColor=#7fc2a0;',
        )
-        this.insertVertex(v1, this.graphData[0].children)
+        this.businessInsertVertex(v1, this.graphData[0].children)
        // console.log(v1)
        console.log('parent', parent)
        // 子节点宽高调整
-        this.setGeometry(parent.children[0].children)
+        this.businessSetGeometry(parent.children[0].children)
        // 重新调整整体布局
        const allCellData = parent.children[0].children
@@ -138,15 +143,15 @@ const businessCapabilityGraphMixin = {
        console.log('node', node)
      }
    },
-    insertVertex(node, list) {
+    businessInsertVertex(node, list) {
      if (list && list.length) {
        list.forEach((v, idx) => {
          var cell = this.graph.insertVertex(
            node,
            null,
            v.name,
-            this.getItemX(v, idx),
+            this.businessGetItemX(v, idx),
-            this.getItemY(v, idx),
+            this.businessGetItemY(v, idx),
            // idx > 2 ? getItemY(idx, v.children) + 20 : 20,
            v.checkChildren ? null : 100,
            v.checkChildren ? null : 40,
@@ -158,13 +163,13 @@ const businessCapabilityGraphMixin = {
          )
          // console.log('cell', cell)
          if (v.checkChildren && v.checkChildren.length) {
-            this.insertVertex(cell, v.checkChildren)
+            this.businessInsertVertex(cell, v.checkChildren)
          }
        })
      }
    },
    // 计算cell的x坐标
-    getItemX(item, idx) {
+    businessGetItemX(item, idx) {
      console.log('item', item, idx)
      if (item.children) {
        // return idx * (130 * 3) + 20
@@ -200,7 +205,7 @@ const businessCapabilityGraphMixin = {
        }
      }
    },
-    getItemY(item, idx) {
+    businessGetItemY(item, idx) {
      const rows = Math.ceil((idx + 1) / 3)
      if (item.children) {
        return 20
@@ -222,7 +227,7 @@ const businessCapabilityGraphMixin = {
        }
      }
    },
-    setGeometry(list) {
+    businessSetGeometry(list) {
      for (let index = 0; index < list.length; index++) {
        const v = list[index]
        if (!v.children) {

--- a/src/views/dataMapping/mixins/technicalFrameworkGraph.mixin.js
+++ b/src/views/dataMapping/mixins/technicalFrameworkGraph.mixin.js