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,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>