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

<template>
  <div class="bigBox">
    <dv-border-box1 ref="borderRef" style="width: 1000px; height: 600px; margin: 0 auto">
      <div class="createTask-container">
        <h3 class="title">{{ title }}</h3>
        <h4 class="title2" v-if="pageIndex === 4">训练算法</h4>
        <ProForm :items-options="items" :form-options="_options" :model="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>
        <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" style="margin-left: -15px" v-if="pageIndex === 4" @click="onAdd()"> 增加 </el-button>
        <el-button class="btn next" type="success" @click="onNext()"> {{ nextBtnText }} </el-button>
      </div>
    </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 = {
  parameter1: 'yolov8n.pt',
  parameter2: 'yolov8n.yaml',
  parameter3: '100',
  parameter4: 'true',
  parame1: '0.25',
  parame2: '0.7',
  parame3: '300',
  parame4: 'false'
}
const router = useRouter()
let pageIndex = ref<number>(1)
let title = ref('目标精准捕获任务选择')
let nextBtnText = ref('下一步')
const transferImg1 = getTransferImgList1()
const transferImg2 = getTransferImgList2()

watch(
  () => pageIndex.value,
  value => {
    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
    }
  },
  { immediate: true }
)
const enumData = [
  {
    label: '选项1',
    value: '1'
  },
  {
    label: '选项2',
    value: '2'
  },
  {
    label: '选项3',
    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: 'tree',
      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: 'select',
      span: 14,
      show: () => {
        return pageIndex.value === 3 ? true : false
      }
    },
    compOptions: {
      elTagName: 'select',
      enum: enumData
    }
  },
  {
    formItemOptions: {
      label: '增强模型',
      prop: 'select',
      span: 14,
      show: () => {
        return pageIndex.value === 3 ? true : false
      }
    },
    compOptions: {
      elTagName: 'select',
      enum: enumData
    }
  },
  {
    formItemOptions: {
      label: '参数1',
      prop: 'parameter',
      span: 14,
      show: () => {
        return pageIndex.value === 3 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入参数1'
    }
  },
  {
    formItemOptions: {
      label: '参数2',
      prop: 'parameter',
      span: 14,
      show: () => {
        return pageIndex.value === 3 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入参数2'
    }
  },
  {
    formItemOptions: {
      label: '参数3',
      prop: 'parameter',
      span: 14,
      show: () => {
        return pageIndex.value === 3 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入参数3'
    }
  },
  {
    formItemOptions: {
      label: '参数4',
      prop: 'parameter',
      span: 14,
      show: () => {
        return pageIndex.value === 3 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入参数4'
    }
  },
  {
    formItemOptions: {
      label: '训练算法',
      prop: 'select',
      span: 14,
      show: () => {
        return pageIndex.value === 4 ? true : false
      }
    },
    compOptions: {
      elTagName: 'select',
      enum: enumData
    }
  },
  {
    formItemOptions: {
      label: '预训练模型权重文件路径',
      prop: 'parameter1',
      labelWidth: 180,
      span: 14,
      show: () => {
        return pageIndex.value === 4 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入参数1'
    }
  },
  {
    formItemOptions: {
      label: '模型结构配置文件路径',
      prop: 'parameter2',
      labelWidth: 180,
      span: 14,
      show: () => {
        return pageIndex.value === 4 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入参数2'
    }
  },
  {
    formItemOptions: {
      label: '训练轮数',
      prop: 'parameter3',
      labelWidth: 180,
      span: 14,
      show: () => {
        return pageIndex.value === 4 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入参数3'
    }
  },
  {
    formItemOptions: {
      label: '余弦学习率调度器',
      prop: 'parameter4',
      labelWidth: 180,
      span: 14,
      show: () => {
        return pageIndex.value === 4 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入参数4'
    }
  },
  {
    formItemOptions: {
      label: '选择推理数据',
      prop: 'transfer2',
      show: () => {
        return pageIndex.value === 5 ? true : false
      }
    },
    compOptions: {
      elTagName: 'slot',
      filterable: true
    }
  },
  {
    formItemOptions: {
      label: '预处理算法',
      prop: 'select',
      span: 14,
      show: () => {
        return pageIndex.value === 6 ? true : false
      }
    },
    compOptions: {
      elTagName: 'select',
      enum: enumData
    }
  },
  {
    formItemOptions: {
      label: '预处理模型',
      prop: 'select',
      span: 14,
      show: () => {
        return pageIndex.value === 6 ? true : false
      }
    },
    compOptions: {
      elTagName: 'select',
      enum: enumData
    }
  },
  {
    formItemOptions: {
      label: '参数1',
      prop: 'taskName',
      span: 12,
      show: () => {
        return pageIndex.value === 6 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入参数1'
    }
  },
  {
    formItemOptions: {
      label: '参数2',
      prop: 'taskName',
      span: 12,
      show: () => {
        return pageIndex.value === 6 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入参数2'
    }
  },
  {
    formItemOptions: {
      label: '参数3',
      prop: 'taskName',
      span: 12,
      show: () => {
        return pageIndex.value === 6 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入参数3'
    }
  },
  {
    formItemOptions: {
      label: '参数4',
      prop: 'taskName',
      span: 12,
      show: () => {
        return pageIndex.value === 6 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入参数4'
    }
  },
  {
    formItemOptions: {
      label: '推理算法',
      prop: 'select',
      span: 14,
      show: () => {
        return pageIndex.value === 7 ? true : false
      }
    },
    compOptions: {
      elTagName: 'select',
      enum: enumData
    }
  },
  {
    formItemOptions: {
      label: '推理模型',
      prop: 'select',
      span: 14,
      show: () => {
        return pageIndex.value === 7 ? true : false
      }
    },
    compOptions: {
      elTagName: 'select',
      enum: enumData
    }
  },
  {
    formItemOptions: {
      label: '目标置信度阈值',
      prop: 'parame1',
      labelWidth: 180,
      span: 14,
      show: () => {
        return pageIndex.value === 7 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入参数1'
    }
  },
  {
    formItemOptions: {
      label: '非极大值抑制的IoU阈值',
      prop: 'parame2',
      labelWidth: 180,
      span: 14,
      show: () => {
        return pageIndex.value === 7 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入参数2'
    }
  },
  {
    formItemOptions: {
      label: '测试图片最大检测器数',
      prop: 'parame3',
      labelWidth: 180,
      span: 14,
      show: () => {
        return pageIndex.value === 7 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入参数3'
    }
  },
  {
    formItemOptions: {
      label: '使用半精度推理(FP16)',
      prop: 'parame4',
      labelWidth: 180,
      span: 14,
      show: () => {
        return pageIndex.value === 7 ? true : false
      }
    },
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入参数4'
    }
  }
]
// 增加训练算法
const onAdd = () => {
  console.log('增加')
}
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--
}
</script>
<style scoped lang="scss">
@import './index.scss';
</style>