dz2.1/src/views/dataAccessPage/components/nodeClass.vue

<template>
  <div class="nodeClass">
    <div class="nodeClass-sf">
      <div class="manageTitle">请选择算法类型</div>
      <el-radio-group style="width: 100%;margin-top: 20px;" @change="changeSelect('algorithmtype',formInline.algorithmtype)" v-model="formInline.algorithmtype" size="small">
        <el-row :gutter="20">
          <el-col style="margin-bottom: 20px;" v-for="(item,index) in selectType" :key="index" :span="8">
            <el-radio :label="item.code" border>
              <el-tooltip class="item" effect="dark" :content="item.name" placement="right">
                <span>{{ item.name }}</span>
              </el-tooltip>
            </el-radio>
          </el-col>
        </el-row>
      </el-radio-group>
    </div>
    <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" style="margin-top: 60px">
      <div class="manageTitle">请选择算法模板</div>
      <template v-if="selectAlgorithm.length">
        <el-radio-group style="width: 100%;margin-top: 20px;" @change="groupChange" v-model="algorithmid" size="small">
          <el-row :gutter="20">
            <el-col style="margin-bottom: 20px;" v-for="(item,index) in selectAlgorithm" :key="index" :span="8">
              <el-radio :label="item.id" border>
                <el-tooltip class="item" effect="dark" :content="item.name" placement="right">
                  <span>{{ item.name }}</span>
                </el-tooltip>
              </el-radio>
            </el-col>
          </el-row>
        </el-radio-group>
      </template>
      <template v-else>
        <el-empty description="暂无数据"></el-empty>
      </template>
    </div>
  </div>
</template>

<script>
import { getQueryData } from '../utils/index'
export default {
  name: 'NodeClass',
  data () {
    return {
      loading: false,
      selectAlgorithm: [],
      selectType: [],
      formInline: {
        algorithmtype: '',
      },
      algorithmid: ''
    }
  },
  mounted () {
    this.getSelectData('algorithmtype', 20, { type: 'category' })
  },
  methods: {
    async getSelectData (pagecode, serviceid, datacontent) {
      if (pagecode != 'algorithmtype') {
        this.loading = true
      }
      const { code, returnData } = await getQueryData(serviceid, datacontent)
      if (code == 0) this.setFormSelectData(pagecode, returnData)
      this.loading = false
    },
    setFormSelectData (name, returnData) {
      switch (name) {
        case 'algorithmtype':
          this.selectType = [...returnData]
          break;
        case 'algorithmname':
          this.selectAlgorithm = [...returnData]
          break;
        case 'datasourceid':
          sessionStorage.setItem('nodeDatasource', JSON.stringify([...returnData]))
          break
        default:
          break;
      }
    },
    //获取表单下拉数据
    changeSelect (name, code) {
      this.$emit('changeSelect', code)
      switch (name) {
        case 'algorithmtype':
          const item = this.selectType.filter(item => item.code == code)
          if (!item.length) return
          const id = item[0].id
          this.getSelectData('algorithmname', 20, { superiorid: id })
          this.getSelectData('datasourceid', 12, { datasourcetype: code })
          break;
        default:
          break;
      }
    },
    groupChange (val) {
      this.$emit('groupChange', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.nodeClass {
  .el-radio.is-bordered {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>