taais-web/src/views/taais/homePage/task/index.vue

<template>
  <div class="createTask-bigBox">
    <dv-border-box1 ref="borderRef" style="width: 80%; height: calc(100% - 20px); margin: 0 auto">
      <el-container style="height: 30px"></el-container>
      <el-container>
        <span class="span_class">任务名称</span>
        <el-input
          style="width: 300px"
          type="text"
          placeholder="请输入任务名称"
          v-model="formData.taskName"
        >
        </el-input>
      </el-container>

      <el-container style="height: 10px"></el-container>
      <el-container>
        <span class="span_class">任务类型</span>
        <el-radio v-model="formData.taskType" label="1">单数据多算法任务</el-radio>
        <el-radio v-model="formData.taskType" label="2">多数据单算法任务</el-radio>
      </el-container>

      <el-container style="height: 10px"></el-container>
      <el-container>
        <span class="span_class">算法任务</span>
        <el-checkbox-group v-model="formData.tasks">
          <el-checkbox label="1">训练</el-checkbox>
          <el-checkbox label="2">测试</el-checkbox>
        </el-checkbox-group>
      </el-container>

      <el-container style="height: 10px"></el-container>
      <el-container>
        <span class="span_class">选择算法</span>
        <el-container style="display: flex; flex-direction: column">
          <el-container v-for="(item, index) in formData.algorithms" :key="index" style="margin-top: 5px">
            <el-select style="width: 200px" v-model="formData.algoIdx[index]" placeholder="请选择" @change="onModelSelect(index)">
              <el-option
                v-for="(item1,index) in algorithms"
                :key="item1.id"
                :label="item1.name"
                :value="index"
              >
              </el-option>
            </el-select>
            <el-button style="margin-left: 20px" @click="showSuperParameterConfig(item, index)">
              超参配置
            </el-button>
            <el-button @click="showAddModelDialog">
              导入模型
            </el-button>
            <el-button v-show="formData.algorithms.length>1" @click="removeItem(index)">
              删除算法
            </el-button>
            <el-button v-show="formData.taskType === '1' && index + 1 === formData.algorithms.length" @click="appendNewItem">
              添加算法
            </el-button>
          </el-container>
        </el-container>
      </el-container>

      <el-container style="height: 10px"></el-container>
      <el-container>
        <span class="span_class">选择训练数据</span>
        <el-container style="display: flex; flex-direction: column">
          <el-container v-for="(item, index) in formData.data" :key="index" style="margin-top: 5px">
            <el-button v-show="formData.data" @click="showDataSelectionDialog(index, true)">
              选择批次
            </el-button>
            <span v-if="!item || item.length === 0" class="span_class" style="color: red; font-size: 15px">未完成</span>
            <span v-else class="span_class" style="color: greenyellow; font-size: 15px">已选择</span>
            <el-button v-show="formData.data.length>1" style="margin-left: 20px" @click="removeDataItem(index, true)">
              删除数据
            </el-button>
            <el-button v-show="formData.taskType === '2' && index + 1 === formData.data.length" style="margin-left: 20px" @click="appendNewDataItem(true)">
              添加数据
            </el-button>
          </el-container>
        </el-container>
      </el-container>

      <el-container style="height: 10px"></el-container>
      <el-container>
        <span class="span_class">选择测试数据</span>
        <el-container style="display: flex; flex-direction: column">
          <el-container v-for="(item, index) in formData.testData" :key="index" style="margin-top: 5px">
            <el-button v-show="formData.testData" @click="showDataSelectionDialog(index, false)">
              选择批次
            </el-button>
            <span v-if="!item || item.length === 0" class="span_class" style="color: red; font-size: 15px">未完成</span>
            <span v-else class="span_class" style="color: greenyellow; font-size: 15px">已选择</span>
            <el-button v-show="formData.testData.length>1" style="margin-left: 20px" @click="removeDataItem(index, false)">
              删除数据
            </el-button>
            <el-button v-show="formData.taskType === '2' && index + 1 === formData.testData.length" style="margin-left: 20px" @click="appendNewDataItem(false)">
              添加数据
            </el-button>
          </el-container>
        </el-container>
      </el-container>

      <el-container style="height: 10px"></el-container>
      <el-container>
        <span class="span_class">是否训练扩增</span>
        <el-checkbox v-model="formData.expandData">扩增</el-checkbox>
        <el-button v-show="formData.expandData" style="margin-left: 20px" @click="showExpandDataSuperParameterConfig">
          超参配置
        </el-button>
      </el-container>

      <el-form-item style="margin-left: 30px; margin-top: 20px">
        <el-button type="primary" @click="submit">
          提交
        </el-button>

        <el-button @click="cancel">
          取消
        </el-button>
      </el-form-item>
    </dv-border-box1>

    <FormDialog ref="formDialogRef" />

    <el-dialog
      v-model="expandDataDialogVisible"
      title="数据扩增超参配置"
    >
<!--      <span style="font-size: 16px; color: darkorange; font-weight: bold"> 数据扩增超参 </span>-->
      <el-container v-for="(item, index) in expandDataConfig" :key="index" style="margin-top: 5px">
        <span class="span_class"> {{ item.name }}</span>
        <el-input
          style="width: 300px"
          type="text"
          :placeholder="'请输入'+item.name"
          v-model="item.defaultValue"
        >
        </el-input>
      </el-container>
      <el-container style="height: 10px"></el-container>

      <span class="dialog-footer" >
        <el-button type="primary" @click="submitExpandDataConfigDialog">确 定</el-button>
        <el-button @click="expandDataDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      v-model="dialogVisible"
      :title="superParameterFormData.title"
    >
      <span style="font-size: 16px; color: darkorange; font-weight: bold"> 训练超参 </span>
      <el-container v-for="(item, index) in superParameterFormData.trainParams" :key="index">
        <span class="span_class"> {{ item.name }}</span>
        <el-input
          style="width: 300px"
          type="text"
          :placeholder="'请输入'+item.name"
          v-model="item.defaultValue"
        >
        </el-input>
      </el-container>
      <el-container style="height: 10px"></el-container>

      <span style="font-size: 16px; color: darkorange; font-weight: bold"> 验证超参 </span>
      <el-container v-for="(item, index) in superParameterFormData.verifyParams" :key="index">
        <span class="span_class"> {{ item.name }}</span>
        <el-input
          style="width: 300px"
          type="text"
          :placeholder="'请输入'+item.name"
          v-model="item.defaultValue"
        >
        </el-input>
      </el-container>
      <el-container style="height: 10px"></el-container>

      <span style="font-size: 16px; color: darkorange; font-weight: bold"> 测试超参 </span>
      <el-container v-for="(item, index) in superParameterFormData.testParams" :key="index">
        <span class="span_class"> {{ item.name }}</span>
        <el-input
          style="width: 300px"
          type="text"
          :placeholder="'请输入'+item.name"
          v-model="item.defaultValue"
        >
        </el-input>
      </el-container>
      <el-container style="height: 10px"></el-container>

      <span class="dialog-footer" >
        <el-button type="primary" @click="submitConfigDialog">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      v-model="dataDialogVisible"
      title="选择数据批次"
      style="width: 70vw"
    >
      <el-container>
        <el-table
          :data="batchDataList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column
            prop="batchNum"
            label="所有批次"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="batchSize"
            label="数量"
            width="80"
          >
          </el-table-column>
        </el-table>

        <el-container style="margin-left: 10px; margin-right: 10px; display: flex; flex-direction: column; justify-content: center">
          <el-button type="primary" :disabled="!canSelect" @click="clickSelectData"> {{ '=>' }} </el-button>
          <el-container style="height: 10px"></el-container>
          <el-button type="primary" :disabled="!canDeselect" @click="clickDeselectData"> {{ '<=' }} </el-button>
        </el-container>

        <el-table
          :data="selectedBatchDataList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleDeselectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column
            prop="batchNum"
            label="已选批次"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="batchSize"
            label="数量"
            width="80"
          >
          </el-table-column>
        </el-table>
      </el-container>

      <el-container style="height: 10px"></el-container>
      <span class="dialog-footer" >
        <el-button type="primary" @click="submitDataDialog">确 定</el-button>
        <el-button @click="dataDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref, onMounted, computed} from "vue";
import {addModelApi} from "@/api/modules/ag/model";
import {createTaskApi, getAlgorithmOptionApi} from "@/api/modules/task/task";
import FormDialog from "@/components/FormDialog/index.vue";
import { useRouter } from 'vue-router'
import {listTaskConfigurationApi} from "@/api/modules/task/taskConfiguration";
import {batchListDataApi} from "@/api/modules/demo/data";
import {listDataApi} from "@/api/modules/system/dictData";
import {ElMessage} from "element-plus";
const valid = data => {
  let ret = {
    code: 400,
    message: 'OK'
  }
  if (!data.taskName || data.taskName.length === 0) {
    ret.message = '任务名称不能为空'
    return ret
  }
  if (!data.taskItemList || data.taskItemList.length === 0) {
    ret.message = '请选择算法任务'
    return ret
  }
  data.algTaskList.forEach(obj => {
    if (!obj || !obj.id) {
      ret.message = '请选择算法模型'
    }
  })
  if (ret.message !== 'OK') {
    return ret
  }
  if (data.taskItemList.includes('1')) {
    data.trainBatchNumList.forEach(obj => {
      if (!obj) {
        ret.message = '请选择训练数据集'
      }
    })
    if (ret.message !== 'OK') {
      return ret
    }
  }
  if (data.taskItemList.includes('2')) {
    data.testBatchNumList.forEach(obj => {
      if (!obj) {
        ret.message = '请选择测试数据集'
      }
    })
    if (ret.message !== 'OK') {
      return ret
    }
  }
  if (data.hasTrainAugmentation) {
    if (!data.trainAugmentationParams || data.trainAugmentationParams.length === 0) {
      ret.message = '请配置扩增参数'
      return ret
    }
  }
  ret.code = 200
  return ret
}

const submit = () => {
  const params = {
    taskName: formData.taskName,
    taskType: formData.taskType,
    taskItemList: formData.tasks,
    algTaskList: formData.algorithms,
    trainBatchNumList: formData.data,
    testBatchNumList: formData.testData,
    hasTrainAugmentation: formData.expandData,
    trainAugmentationParams: formData.expandConfig
  }
  let result = valid(params)
  // console.log(result)
  if (result.code !== 200) {
    ElMessage.error(result.message)
    return
  }

  params.algTaskList.forEach(obj => {
    obj.algorithmId = obj.id;
    // if (!obj.trainParams) {
    //   return
    // }
    obj.params = JSON.stringify(JSON.parse(obj.trainParams)) + ";;;" +
      JSON.stringify(JSON.parse(obj.verifyParams)) + ";;;" +
      JSON.stringify(JSON.parse(obj.testParams))
  })
  // console.log('submit', params)

  createTaskApi(params)
    .then(res => {
      // console.log(res)
      if (res.code !== 200) {
        ElMessage.error(res.msg)
      } else {
        router.push(`/index`)
      }
    })
    .catch(err => {
      console.log(err)
    })
}

const loadExpandDataParams = () => {
  listDataApi({
    dictType: 'expand_data_params',
    pageNum: 1,
    pageSize: 10000
  })
    .then(res => {
      // console.log(res)
      expandDataConfig.value = reactive([])
      res.data.list.forEach(obj => {
        expandDataConfig.value.push({
          name: obj.dictLabel,
          defaultValue: obj.dictValue
        })
      })
      expandDataDialogVisible.value = true
    })
    .catch(err => {
      console.log(err)
    })
}

const showExpandDataSuperParameterConfig = () => {
  loadExpandDataParams()
}
// 数据扩增超参修改保存
const submitExpandDataConfigDialog = () => {
  // console.log(expandDataConfig)
  formData.expandConfig = JSON.stringify(expandDataConfig.value)
  expandDataDialogVisible.value = false
}

const expandDataDialogVisible = ref(false)

let expandDataConfig = ref(reactive([
  // {
  //   name: 'config1',
  //   defaultValue: 'a'
  // }
]))

const submitConfigDialog = () => {
  dialogVisible.value = false
  formData.algorithms[superParameterFormData.index].trainParams = JSON.stringify(superParameterFormData.trainParams)
  formData.algorithms[superParameterFormData.index].verifyParams = JSON.stringify(superParameterFormData.verifyParams)
  formData.algorithms[superParameterFormData.index].testParams = JSON.stringify(superParameterFormData.testParams)
}
// 选择批次的数据结果
const submitDataDialog = () => {
  // console.log(selectedBatchDataList.value)
  let val = ''
  for (let i = 0; i < selectedBatchDataList.value.length; i++) {
    val += selectedBatchDataList.value[i].batchNum + ','
  }
  if (bIsTrainData.value) {
    formData.data[selectDataIndex] = val.substring(0, val.length - 1)
  } else {
    formData.testData[selectDataIndex] = val.substring(0, val.length - 1)
  }
  dataDialogVisible.value = false
}
const canSelect = computed(() => {
  // console.log(tempSelectedBatchDataList)
  return tempSelectedBatchDataList.value.length > 0
})
const canDeselect = computed(() => {
  return tempDeselectedBatchDataList.value.length > 0
})

onMounted(() => {
  listTaskConfigurationApi({ pageNum: 1, pageSize: 10000 })
    .then(res => {
      // console.log(res)
      algorithms = reactive(res.data.list)
    })
  batchListDataApi()
    .then(res => {
      // console.log(res)
      queryBatchData.value = reactive(res.data)
    })
})
let queryBatchData = ref(reactive([]))
const handleSelectionChange = data => {
  tempSelectedBatchDataList.value = reactive(data)
  // console.log(data)
}
const handleDeselectionChange = data => {
  tempDeselectedBatchDataList.value = reactive(data)
  // console.log(data)
}
const clickSelectData = () => {
  let set = new Set
  for (let i = 0; i < tempSelectedBatchDataList.value.length; i++) {
    set.add(tempSelectedBatchDataList.value[i].batchNum)
    selectedBatchDataList.value.push(tempSelectedBatchDataList.value[i])
  }
  let newArray = []
  for (let i = 0; i < batchDataList.value.length; i++) {
    if (!set.has(batchDataList.value[i].batchNum)) {
      newArray.push(batchDataList.value[i])
    }
  }
  batchDataList.value = reactive(newArray)
  // console.log(batchDataList)
}
const clickDeselectData = () => {
  let set = new Set
  for (let i = 0; i < tempDeselectedBatchDataList.value.length; i++) {
    set.add(tempDeselectedBatchDataList.value[i].batchNum)
    batchDataList.value.push(tempDeselectedBatchDataList.value[i])
  }
  let newArray = []
  for (let i = 0; i < selectedBatchDataList.value.length; i++) {
    if (!set.has(selectedBatchDataList.value[i].batchNum)) {
      newArray.push(selectedBatchDataList.value[i])
    }
  }
  selectedBatchDataList.value = reactive(newArray)
}
const router = useRouter()
let bIsTrainData = ref(false)
let dialogVisible = ref(false)
let batchDataList = ref(reactive([]))
let selectedBatchDataList = ref(reactive([]))
let tempSelectedBatchDataList = ref(reactive([]))
let tempDeselectedBatchDataList = ref(reactive([]))

const formData = reactive({
  taskName: null,
  taskType: '1',
  tasks: [],
  algorithms: [
    {}
  ],
  algoIdx: [
    null
  ],
  // 训练数据
  data: [
    null
  ],
  // 测试数据
  testData: [
    null
  ],
  expandData: false,
  expandConfig: ''
})
let selectDataIndex = null
const dataDialogVisible = ref(false)
const showDataSelectionDialog = (index, isTrainData) => {
  bIsTrainData.value = isTrainData
  batchDataList.value = queryBatchData.value
  selectedBatchDataList.value = reactive([])
  tempSelectedBatchDataList.value = reactive([])
  tempDeselectedBatchDataList.value = reactive([])
  selectDataIndex = index
  dataDialogVisible.value = true
}

let superParameterFormData = reactive({})

const showSuperParameterConfig = (item, index) => {
  superParameterFormData = reactive({
    index: index,
    trainParams: JSON.parse(item.trainParams),
    testParams: JSON.parse(item.testParams),
    verifyParams: JSON.parse(item.verifyParams),
    title: '超参配置'
  })
  // console.log(superParameterFormData)
  dialogVisible.value = true
}

let algorithms = reactive([])

const onModelSelect = (index) => {
  formData.algorithms[index] = algorithms[formData.algoIdx[index]]
}

const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)

const showAddModelDialog = () => {
  getAlgorithmOptionApi().then(res => {
    let allAgloData = {
      value: res.data
    }
    const params = {
      title: '算法模型配置',
      width: 580,
      isEdit: true,
      itemsOptions: [
        {
          label: '算法',
          prop: 'algorithmId',
          rules: [{ required: true, message: '算法不能为空', trigger: 'blur' }],
          compOptions: {
            elTagName: 'select',
            labelKey: 'name',
            valueKey: 'id',
            enum: allAgloData.value,
            placeholder: '请选择算法'
          }
        },
        {
          label: '模型名称',
          prop: 'modelName',
          rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
          compOptions: {
            placeholder: '请输入模型名称'
          }
        },
        {
          label: '模型',
          prop: 'modelAddress',
          rules: [{ required: true, message: '模型不能为空', trigger: 'blur' }],
          compOptions: {
            elTagName: 'slot'
          }
        },
        {
          label: '训练样本数',
          prop: 'sampleNumber',
          compOptions: {
            placeholder: '请输入训练样本数'
          }
        },
        {
          label: '训练循环次数',
          prop: 'cycleEpoch',
          compOptions: {
            placeholder: '请输入训练循环次数'
          }
        },
        {
          label: '备注',
          prop: 'remarks',
          compOptions: {
            placeholder: '请输入备注'
          }
        }
      ],
      model: {},
      api: addModelApi
    }

    formDialogRef.value?.openDialog(params)
  })
}

const appendNewItem = () => {
  formData.algorithms.push({})
  formData.algoIdx.push(null)
}
const appendNewDataItem = isTrainData => {
  if (isTrainData) {
    formData.data.push([])
  } else {
    formData.testData.push([])
  }
}
const removeItem = idx => {
  formData.algorithms.splice(idx, 1)
  formData.algoIdx.splice(idx, 1)
}
const removeDataItem = (idx, isTrainData) => {
  if (isTrainData) {
    formData.data.splice(idx, 1)
  } else {
    formData.testData.splice(idx, 1)
  }
}
const cancel = () => {
  // console.log('cancel')
  router.push(`/index`)
}

</script>

<style scoped>
.createTask-bigBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url('../../../assets/taaisImg/53bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.span_class {
  width: 120px;
  font-size: 13px;
  display: flex;
  align-self: center;
  justify-content: center
}
</style>