add 思维导图demo

2023-09-05 18:08:28 +08:00
parent 7b44d3ed5a
commit ff11f74725
7 changed files with 485 additions and 2 deletions
@@ -0,0 +1,6 @@
+module.exports = {
+  // 标准化活动
+  standardizationActivity: {
+    nodeName: 'Node name' // 节点名称
+  }
+}
@@ -0,0 +1,6 @@
+module.exports = {
+  // 标准化活动
+  standardizationActivity: {
+    nodeName: '节点名称', // 节点名称
+  }
+}
@@ -2,6 +2,7 @@ const system = require('./system/en.js')
 const personalCenter = require('./personalCenter/en.js')
 const standardRegulationLibrary = require('./standardRegulationLibrary/en-us')
 const enterpriseStandardLibrary = require('./enterpriseStandardLibrary/en.js')
+const businessSupport = require('./businessSupport/en')

 module.exports = {
  // 共用
@@ -521,5 +522,7 @@ module.exports = {
  // 标准法规库
  standardRegulationLibrary,
  // 企标库
-  enterpriseStandardLibrary
+  enterpriseStandardLibrary,
+  // 业务支持
+  businessSupport
 }
@@ -2,6 +2,7 @@ const system = require('./system/zh.js')
 const personalCenter = require('./personalCenter/zh.js')
 const standardRegulationLibrary = require('./standardRegulationLibrary/zh-cn')
 const enterpriseStandardLibrary = require('./enterpriseStandardLibrary/zh.js')
+const businessSupport = require('./businessSupport/zh')

 module.exports = {
  // 共用
@@ -521,5 +522,7 @@ module.exports = {
  // 标准法规库
  standardRegulationLibrary,
  // 企标库
-  enterpriseStandardLibrary
+  enterpriseStandardLibrary,
+  // 业务支持
+  businessSupport
 }
@@ -0,0 +1,252 @@
+<template>
+  <div :id="domId" class="mind-map"></div>
+</template>
+
+<script>
+import G6 from '@antv/g6'
+
+// 收起图标
+const COLLAPSE_ICON = function COLLAPSE_ICON (x, y, r) {
+  return [['M', x, y], ['a', r, r, 0, 1, 0, r * 2, 0], ['a', r, r, 0, 1, 0, -r * 2, 0], ['M', x + 2, y], ['L', x + 2 * r - 2, y]]
+}
+// 展开图标
+const EXPAND_ICON = function EXPAND_ICON (x, y, r) {
+  return [['M', x, y], ['a', r, r, 0, 1, 0, r * 2, 0], ['a', r, r, 0, 1, 0, -r * 2, 0], ['M', x + 2, y], ['L', x + 2 * r - 2, y], ['M', x + r, y - r + 2], ['L', x + r, y + r - 2]]
+}
+// 节点的颜色
+const NODE_COLOR = [
+  {
+    bg: '#E9ECF0',
+    stroke: '#3D557B',
+    color: '#2F466B'
+  },
+  {
+    bg: '#EEF4F8',
+    stroke: '#739FC8',
+    color: '#227CCF'
+  },
+  {
+    bg: '#FEF1EA',
+    stroke: '#F9964F',
+    color: '#DF7426'
+  },
+  {
+    bg: '#E5F2F4',
+    stroke: '#2596A1',
+    color: '#2596A1'
+  }
+]
+// 节点和收起展开之间的间距
+const NODE_ICON_MARGIN = 8
+
+export default {
+  name: 'MindMap',
+  props: {
+    // 页面元素的id
+    domId: {
+      type: String,
+      required: false,
+      default: 'mountNode'
+    },
+    // 图表的数据
+    mapData: {
+      type: Object,
+      required: false,
+      default: () => {
+        return {}
+      }
+    },
+    // 图数据的key字段
+    mapDataKeyField: {
+      type: String,
+      required: false,
+      default: 'id'
+    },
+    // 回显文本取的字段
+    labelField: {
+      type: String,
+      required: false,
+      default: 'name'
+    },
+    // 节点的宽度
+    nodeWidth: {
+      type: Number,
+      required: false,
+      default: 300
+    },
+    // 节点高度
+    nodeHeight: {
+      type: Number,
+      required: false,
+      default: 46
+    },
+    // 收起展开节点图标的半径
+    expendCollapseIconR: {
+      type: Number,
+      required: false,
+      default: 8
+    }
+  },
+  data () {
+    return {
+      data: {}
+    }
+  },
+  watch: {
+    mapData: {
+      handler () {
+        this.data = JSON.parse(JSON.stringify(this.mapData))
+        this.$nextTick(() => {
+          this.initMindMap()
+        })
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    initMindMap () {
+      G6.registerNode('tree-node', {
+        drawShape: (cfg, group) => {
+          const nodeColorIndex = cfg.depth % NODE_COLOR.length
+          const nodeStyle = NODE_COLOR[nodeColorIndex]
+          // 节点整体的内容
+          const nodeContainer = group.addShape('rect', {})
+          // 实际显示的边框，由三部分组成，左右两侧是两个圆，中间用两个矩形覆盖，一个有边框，另一个没有边框，没有边框这个高小一点，宽大一点
+          group.addShape('circle', {
+            attrs: {
+              x: this.nodeHeight / 2,
+              y: this.nodeHeight / 2,
+              r: this.nodeHeight / 2,
+              stroke: nodeStyle.stroke,
+              fill: nodeStyle.bg
+            }
+          })
+          group.addShape('circle', {
+            attrs: {
+              x: this.nodeWidth - this.nodeHeight / 2,
+              y: this.nodeHeight / 2,
+              r: this.nodeHeight / 2,
+              stroke: nodeStyle.stroke,
+              fill: nodeStyle.bg
+            }
+          })
+          group.addShape('rect', {
+            attrs: {
+              x: this.nodeHeight / 2,
+              y: 0,
+              width: this.nodeWidth - this.nodeHeight,
+              height: this.nodeHeight,
+              stroke: nodeStyle.stroke,
+              fill: nodeStyle.bg
+            }
+          })
+          group.addShape('rect', {
+            attrs: {
+              x: this.nodeHeight / 2 - 3,
+              y: 0.5,
+              width: this.nodeWidth - this.nodeHeight + 6,
+              height: this.nodeHeight - 1,
+              fill: nodeStyle.bg
+            }
+          })
+          // 文本的部分
+          let textContent = cfg.name || ''
+          if (textContent.length > 40) {
+            textContent = textContent.slice(0, 20) + '\n' + textContent.slice(20, 40) + '\n' + textContent.slice(40)
+          } else if (textContent.length > 20) {
+            textContent = textContent.slice(0, 20) + '\n' + textContent.slice(20)
+          }
+          group.addShape('text', {
+            attrs: {
+              text: textContent,
+              x: this.nodeWidth / 2,
+              y: this.nodeHeight / 2,
+              textAlign: 'center',
+              textBaseline: 'middle',
+              fill: nodeStyle.color
+            }
+          })
+          const hasChildren = cfg.children && cfg.children.length > 0
+          if (hasChildren) {
+            // 展开收起
+            group.addShape('marker', {
+              attrs: {
+                x: this.nodeWidth + NODE_ICON_MARGIN,
+                y: this.nodeHeight / 2,
+                r: this.expendCollapseIconR,
+                symbol: COLLAPSE_ICON,
+                stroke: '#666',
+                lineWidth: 2
+              },
+              className: 'collapse-icon'
+            })
+          }
+          nodeContainer.attr({
+            x: 0,
+            y: 0,
+            width: this.nodeWidth + this.expendCollapseIconR + NODE_ICON_MARGIN,
+            height: this.nodeHeight,
+          })
+          return nodeContainer
+        }
+      }, 'single-shape')
+      const graph = new G6.TreeGraph({
+        container: this.domId,
+        modes: {
+          default: [{
+            type: 'collapse-expand',
+            onChange: function onChange (item, collapsed) {
+              const data = item.get('model')
+              const icon = item.get('group').findByClassName('collapse-icon')
+              if (collapsed) {
+                icon.attr('symbol', EXPAND_ICON)
+              } else {
+                icon.attr('symbol', COLLAPSE_ICON)
+              }
+              data.collapsed = collapsed
+              return true
+            }
+          }, 'drag-canvas', 'zoom-canvas']
+        },
+        defaultNode: {
+          type: 'tree-node',
+          anchorPoints: [[0, 0.5], [1, 0.5]]
+        },
+        defaultEdge: {
+          type: 'cubic-horizontal',
+          style: {
+            stroke: '#A3B1BF'
+          }
+        },
+        layout: {
+          type: 'compactBox',
+          direction: 'LR',
+          getId: (d) => {
+            return d.id
+          },
+          getVGap: () => {
+            return 20
+          },
+          getHGap: () => {
+            return 300
+          }
+        }
+      })
+      G6.Util.traverseTree(this.data, (item) => {
+        item.id = item[this.mapDataKeyField]
+      })
+      graph.data(this.data)
+      graph.render()
+      graph.fitView()
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.mind-map {
+  width: 100%;
+  height: 100%;
+}
+</style>
@@ -0,0 +1,212 @@
+<template>
+  <a-card :bordered="false" class="page-box">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <!--编号-->
+            <a-form-item :label="$t('businessSupport.standardizationActivity.nodeName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-select
+                show-search
+                v-model="queryParam.nodeName"
+                :placeholder="$t('pleaseEnter') + $t('businessSupport.standardizationActivity.nodeName')"
+                style="width: 100%"
+                :default-active-first-option="false"
+                :show-arrow="false"
+                :filter-option="false"
+                :not-found-content="null"
+                @search="handleSearch"
+                @change="handleChange"
+              >
+                <a-select-option v-for="d in nodeNameList" :key="d.id">
+                  {{ d.name }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="3" :sm="8">
+            <div style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
+              <a-button class="box-button" @click="searchReset">{{ $t('reset') }}</a-button>
+              <a-button class="box-button" style="margin-left: 8px" type="primary" @click="searchQuery">{{ $t('query') }}</a-button>
+            </div>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <mind-map dom-id="mountNode" :map-data="data" map-data-key-field="name" />
+  </a-card>
+</template>
+
+<script>
+import '@assets/less/common.less'
+import MindMap from '../../../components/MindMap.vue'
+
+export default {
+  name: 'StandardizationActivityPage',
+  components: { MindMap },
+  data () {
+    return {
+      labelCol: {
+        span: 6
+      },
+      wrapperCol: {
+        span: 14
+      },
+      queryParam: {},
+      nodeNameList: [], // 查询的下拉数据
+      data: {
+        name: '五十个字啊五十个字啊五十个字啊五十个字啊五十个字啊',
+        children: [
+          {
+            name: 'Classification',
+            children: [
+              {
+                name: 'Logistic regression'
+              },
+              {
+                name: 'Linear discriminant analysis'
+              },
+              {
+                name: 'Rules'
+              },
+              {
+                name: 'Decision trees'
+              },
+              {
+                name: 'Naive Bayes'
+              },
+              {
+                name: 'K nearest neighbor'
+              },
+              {
+                name: 'Probabilistic neural network'
+              },
+              {
+                name: 'Support vector machine'
+              }
+            ]
+          },
+          {
+            name: 'Consensus',
+            children: [
+              {
+                name: 'Models diversity',
+                children: [
+                  {
+                    name: 'Different initializations'
+                  },
+                  {
+                    name: 'Different parameter choices'
+                  },
+                  {
+                    name: 'Different architectures'
+                  },
+                  {
+                    name: 'Different modeling methods'
+                  },
+                  {
+                    name: 'Different training sets'
+                  },
+                  {
+                    name: 'Different feature sets'
+                  }
+                ]
+              },
+              {
+                name: 'Methods',
+                children: [
+                  {
+                    name: 'Classifier selection'
+                  },
+                  {
+                    name: 'Classifier fusion'
+                  }
+                ]
+              },
+              {
+                name: 'Common',
+                children: [
+                  {
+                    name: 'Bagging'
+                  },
+                  {
+                    name: 'Boosting'
+                  },
+                  {
+                    name: 'AdaBoost'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            name: 'Regression',
+            children: [
+              {
+                name: 'Multiple linear regression'
+              },
+              {
+                name: 'Partial least squares'
+              },
+              {
+                name: 'Multi-layer feedforward neural network'
+              },
+              {
+                name: 'General regression neural network'
+              },
+              {
+                name: 'Support vector regression'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  },
+  created () {
+    this.treeToArr([this.data], null, this.nodeNameList)
+    console.log(this.nodeNameList)
+  },
+  methods: {
+    handleSearch () {
+
+    },
+    handleChange () {
+
+    },
+    searchReset () {
+
+    },
+    searchQuery () {
+
+    },
+    treeToArr (data, pid = null, res) {
+      data.forEach(item => {
+        res.push({ name: item.name, id: item.name })
+        if (item.children && item.children.length !== 0) {
+          this.treeToArr(item.children, item.id, res)
+        }
+      })
+      return res
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.page-box {
+  height: calc(100vh - 135px);
+
+  /deep/ .ant-card-body {
+    height: 100%;
+    box-sizing: border-box;
+    width: 100%;
+  }
+}
+
+#mountNode {
+  width: 100%;
+  height: 100%;
+}
+
+</style>