laws-sinotruk-client/src/views/businessSupport/standardizationActivity/StandardizationActivityPage.vue

<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 ref="mindMap" 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: [], // 查询的下拉数据
      defaultNodeNameList: [], // 查询的下拉数据
      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.defaultNodeNameList)
  },
  methods: {
    handleSearch (value) {
      this.nodeNameList = this.defaultNodeNameList.filter(tt => tt.name.indexOf(value) !== -1)
    },
    handleChange () {

    },
    searchReset () {

    },
    searchQuery () {
      this.$refs.mindMap.searchNode(this.queryParam.nodeName)
    },
    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: calc(100% - 56px);
}

</style>