taais-web/src/views/taais/homePage/createTask.vue

<template>
  <div class="createTask-bigBox">
    <dv-border-box1 ref="borderRef" style="width: 1000px; height: 650px; margin: 0 auto">
      <div class="createTask-container">
        <h3 class="title">{{ title }}</h3>
        <h4 class="title2" v-if="pageIndex === 4">训练算法</h4>
        <div v-for="(item, index) in formItems" :key="index">
          <ProForm :items-options="item.items" :form-options="_options" :model="item.model" class="proform">
            <template #transfer1="{ formModel }">
              <el-transfer filterable v-model="formModel.transfer1" :data="transferImg1">
                <template #default="{ option }">
                  <el-image
                    style="width: 50px; height: 50px"
                    :preview-src-list="[getImageUrl(option.label)]"
                    :src="getImageUrl(option.label)"
                  ></el-image>
                </template>
              </el-transfer>
            </template>
            <template #transfer2="{ formModel }">
              <el-transfer filterable v-model="formModel.transfer2" :data="transferImg2">
                <template #default="{ option }">
                  <el-image
                    style="width: 50px; height: 50px"
                    :preview-src-list="[getImageUrl(option.label)]"
                    :src="getImageUrl(option.label)"
                  ></el-image>
                </template>
              </el-transfer>
            </template>
            <template #username1="{ formModel }">
              <el-input v-model="formModel.username1" />
            </template>
          </ProForm>
        </div>
      </div>
      <el-button class="btn back" v-if="pageIndex === 1" @click="onReturn()"> 返回 </el-button>
      <el-button class="btn back" v-else @click="onBack()"> 上一步 </el-button>
      <el-button class="btn add" style="margin-left: -15px" v-if="pageIndex === 4 || pageIndex === 7" @click="onAdd()">
        增加
      </el-button>
      <el-button class="btn next" type="success" @click="onNext()"> {{ nextBtnText }} </el-button>
    </dv-border-box1>
  </div>
</template>
<script setup lang="tsx" name="createTask">
import { ref, ComputedRef, computed, watch } from 'vue'
import ProForm from '@/components/ProForm/index.vue'
import { useRouter } from 'vue-router'
import { getTransferImgList1, getTransferImgList2 } from '@/api/modules/taais/task'
let model = ref({
  enhanceModel: '',
  pretreatmentModel: ''
})
const router = useRouter()
let pageIndex = ref<number>(1)
let title = ref('目标精准捕获任务选择')
let nextBtnText = ref('下一步')
const transferImg1 = getTransferImgList1()
const transferImg2 = getTransferImgList2()
const enumData = [
  {
    label: 'rtdetr',
    value: '1'
  },
  {
    label: 'yolov5',
    value: '2'
  },
  {
    label: 'yolov8',
    value: '3'
  }
]
const enumDataModel = [
  {
    label: 'rtdetrModel',
    value: '1'
  },
  {
    label: 'yolov5Model',
    value: '2'
  },
  {
    label: 'yolov8Model',
    value: '3'
  }
]
const data1 = [
  {
    label: '训练',
    children: [
      {
        label: '训练数据选择',
        children: []
      },
      {
        label: '训练数据预处理',
        children: []
      },
      {
        label: '训练',
        children: []
      }
    ]
  },
  {
    label: '推理',
    children: [
      {
        label: '推理数据选择',
        children: []
      },
      {
        label: '推理数据预处理',
        children: []
      },
      {
        label: '推理',
        children: []
      }
    ]
  }
]
const defaultProps = {
  children: 'children',
  label: 'label'
}
const _options: ComputedRef<ProForm.FormOptions> = computed(() => {
  const form = {
    labelWidth: 120,
    hasFooter: true,
    disabled: false,
    showSubmitButton: false
  }
  return Object.assign(form)
})

let items: ProForm.ItemsOptions[] = [
  {
    formItemOptions: {
      label: '任务名称',
      prop: 'taskName',
      span: 12,
      show: () => {
        return pageIndex.value === 1 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入任务名称'
    }
  },
  {
    formItemOptions: {
      label: '任务选择',
      prop: 'treeName',
      show: () => {
        return pageIndex.value === 1 ? true : false
      }
    },
    compOptions: {
      elTagName: 'tree',
      enum: data1,
      props: defaultProps,
      style: 'max-width: 600px',
      defaultExpandAll: true,
      showCheckbox: true
    }
  },
  {
    formItemOptions: {
      label: '选择训练数据',
      prop: 'transfer1',
      show: () => {
        return pageIndex.value === 2 ? true : false
      }
    },
    compOptions: {
      elTagName: 'slot',
      filterable: true
    }
  },
  {
    formItemOptions: {
      label: '增强算法',
      prop: 'enhanceAlgo',
      span: 14,
      show: () => {
        return pageIndex.value === 3 ? true : false
      }
    },
    compOptions: {
      elTagName: 'select',
      enum: enumData,
      onChange: val => {
        model.value.enhanceModel = val
      }
    }
  },
  {
    formItemOptions: {
      label: '增强模型',
      prop: 'enhanceModel',
      span: 14,
      show: () => {
        return pageIndex.value === 3 ? true : false
      }
    },
    compOptions: {
      elTagName: 'select',
      enum: enumDataModel
    }
  },
  {
    formItemOptions: {
      label: '参数1',
      prop: 'threeParameter1',
      span: 14,
      show: () => {
        return pageIndex.value === 3 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入...'
    }
  },
  {
    formItemOptions: {
      label: '参数2',
      prop: 'threeParameter2',
      span: 14,
      show: () => {
        return pageIndex.value === 3 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入...'
    }
  },
  {
    formItemOptions: {
      label: '参数3',
      prop: 'threeParameter3',
      span: 14,
      show: () => {
        return pageIndex.value === 3 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入...'
    }
  },
  {
    formItemOptions: {
      label: '参数4',
      prop: 'threeParameter4',
      span: 14,
      show: () => {
        return pageIndex.value === 3 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入...'
    }
  },
  {
    formItemOptions: {
      label: '训练算法',
      prop: 'trainAlgo',
      span: 14,
      show: () => {
        return pageIndex.value === 4 ? true : false
      }
    },
    compOptions: {
      elTagName: 'select',
      enum: enumData
    }
  },
  {
    formItemOptions: {
      label: '预训练模型权重文件路径',
      prop: 'fourParameter1',
      labelWidth: 180,
      span: 14,
      show: () => {
        return pageIndex.value === 4 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入...'
    }
  },
  {
    formItemOptions: {
      label: '模型结构配置文件路径',
      prop: 'fourParameter2',
      labelWidth: 180,
      span: 14,
      show: () => {
        return pageIndex.value === 4 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入...'
    }
  },
  {
    formItemOptions: {
      label: '训练轮数',
      prop: 'fourParameter3',
      labelWidth: 180,
      span: 14,
      show: () => {
        return pageIndex.value === 4 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入...'
    }
  },
  {
    formItemOptions: {
      label: '余弦学习率调度器',
      prop: 'fourParameter4',
      labelWidth: 180,
      span: 14,
      show: () => {
        return pageIndex.value === 4 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入...'
    }
  },
  {
    formItemOptions: {
      label: '选择推理数据',
      prop: 'transfer2',
      show: () => {
        return pageIndex.value === 5 ? true : false
      }
    },
    compOptions: {
      elTagName: 'slot',
      filterable: true
    }
  },
  {
    formItemOptions: {
      label: '预处理算法',
      prop: 'pretreatmentAlgo',
      span: 14,
      show: () => {
        return pageIndex.value === 6 ? true : false
      }
    },
    compOptions: {
      elTagName: 'select',
      enum: enumData,
      onChange: val => {
        model.value.pretreatmentModel = val
      }
    }
  },
  {
    formItemOptions: {
      label: '预处理模型',
      prop: 'pretreatmentModel',
      span: 14,
      show: () => {
        return pageIndex.value === 6 ? true : false
      }
    },
    compOptions: {
      elTagName: 'select',
      enum: enumDataModel
    }
  },
  {
    formItemOptions: {
      label: '参数1',
      prop: 'sixParameter1',
      span: 12,
      show: () => {
        return pageIndex.value === 6 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入...'
    }
  },
  {
    formItemOptions: {
      label: '参数2',
      prop: 'sixParameter2',
      span: 12,
      show: () => {
        return pageIndex.value === 6 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入...'
    }
  },
  {
    formItemOptions: {
      label: '参数3',
      prop: 'sixParameter3',
      span: 12,
      show: () => {
        return pageIndex.value === 6 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入...'
    }
  },
  {
    formItemOptions: {
      label: '参数4',
      prop: 'sixParameter4',
      span: 12,
      show: () => {
        return pageIndex.value === 6 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入...'
    }
  },
  {
    formItemOptions: {
      label: '推理算法',
      prop: 'inferAlgo',
      span: 14,
      show: () => {
        return pageIndex.value === 7 ? true : false
      }
    },
    compOptions: {
      elTagName: 'select',
      enum: enumData
    }
  },
  {
    formItemOptions: {
      label: '目标置信度阈值',
      prop: 'sevenParameter1',
      labelWidth: 180,
      span: 14,
      show: () => {
        return pageIndex.value === 7 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入...'
    }
  },
  {
    formItemOptions: {
      label: '非极大值抑制的IoU阈值',
      prop: 'sevenParameter2',
      labelWidth: 180,
      span: 14,
      show: () => {
        return pageIndex.value === 7 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入...'
    }
  },
  {
    formItemOptions: {
      label: '测试图片最大检测器数',
      prop: 'sevenParameter3',
      labelWidth: 180,
      span: 14,
      show: () => {
        return pageIndex.value === 7 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入...'
    }
  },
  {
    formItemOptions: {
      label: '使用半精度推理(FP16)',
      prop: 'sevenParameter4',
      labelWidth: 180,
      span: 14,
      show: () => {
        return pageIndex.value === 7 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入...'
    }
  }
]
let formItemsTemp4 = ref([
  {
    items,
    model: model.value
  }
])
let formItemsTemp7 = ref([
  {
    items,
    model: model.value
  }
])
let formItems = ref([
  {
    items,
    model: model.value
  }
])
// 增加训练算法
const onAdd = () => {
  const data = {
    enhanceModel: '',
    pretreatmentModel: ''
  }
  formItems.value.push({
    items,
    model: data
  })
}
const getImageUrl = name => {
  return new URL(`../../../assets/taaisImg/${name}`, import.meta.url).href
}
const onReturn = () => {
  router.push(`/index`)
}
let flag = ref<number>(0) //跳转到日志页面的flag,0为训练日志、1为推理日志
const onNext = () => {
  if (pageIndex.value === 7) {
    pageIndex.value = 1
    router.push({ path: `/logPage/${flag.value}`, query: { type: 1 } })
  } else {
    pageIndex.value++
  }
}
const onBack = () => {
  if (pageIndex.value === 1) return
  pageIndex.value--
}
watch(
  () => pageIndex.value,
  (value, oldValue) => {
    if (oldValue === 4) formItemsTemp4.value = formItems.value
    if (oldValue === 7) formItemsTemp7.value = formItems.value
    if (value === 4) formItems.value = formItemsTemp4.value
    if (value === 7) formItems.value = formItemsTemp7.value
    else {
      formItems.value = [
        {
          items,
          model: model.value
        }
      ]
    }
    0

    switch (value) {
      case 1:
        title.value = '任务创建：目标精准捕获任务选择'
        nextBtnText.value = '下一步'
        break
      case 2:
        title.value = '任务创建：训练数据选择'
        break
      case 3:
        title.value = '任务创建：训练数据预处理'
        break
      case 4:
        title.value = '任务创建：训练参数设置'
        break
      case 5:
        title.value = '任务创建：推理数据选择'
        break
      case 6:
        title.value = '任务创建：推理数据预处理'
        nextBtnText.value = '下一步'
        break
      case 7:
        title.value = '任务创建：推理参数设置'
        nextBtnText.value = '提交'
        break
      default:
        break
    }
  }
)
</script>
<style scoped lang="scss">
@import './index.scss';
</style>