|
@@ -0,0 +1,458 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class='' v-loading="loading" element-loading-text="正在创建训练任务">
|
|
|
+ <el-breadcrumb class="divi2" separator-class="el-icon-arrow-right">
|
|
|
+ <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item :to="{ path: '/alg-train'}">算法训练</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item>新建训练任务</el-breadcrumb-item>
|
|
|
+ </el-breadcrumb>
|
|
|
+ <el-divider class="divi"></el-divider>
|
|
|
+
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="信息选择" name="first">
|
|
|
+
|
|
|
+ <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="180px">
|
|
|
+
|
|
|
+ <el-form-item label="训练任务名称" prop="missName">
|
|
|
+ <el-input v-model="dataForm.missName" placeholder="请输入训练任务名称" @change="missNameChange()"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="选择算法" prop="algSelected">
|
|
|
+ <el-input v-model="algorithmName" :disabled="true"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="选择版本" prop="versionSelected">
|
|
|
+ <el-input v-model="versionName" :disabled="true"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="指定主运行文件" prop="fileSelected">
|
|
|
+ <el-select v-model="dataForm.fileSelected" placeholder="选择主运行文件" @change="fileChange()">
|
|
|
+ <el-option v-for="data in fileList" :key="data.filename" :label="data.filename" :value="data.filename">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="描述信息" prop="remark">
|
|
|
+ <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" placeholder="请输入内容"
|
|
|
+ v-model="dataForm.remark">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item style="float:right">
|
|
|
+ <el-button type="primary" @click="activeName='second'">下一步</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane label="资源设置" name="second">
|
|
|
+ <el-form :model="dataForm2" :rules="dataRule" ref="dataset" label-width="180px">
|
|
|
+
|
|
|
+ <el-form-item label="指定cpu">
|
|
|
+ <el-select v-model="cpuSelected" multiple placeholder="选择容器运行在哪些cpu上">
|
|
|
+ <el-option v-for="data in cpus" :key="data.value" :label="data.value" :value="data.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="内存大小" prop="memorySelected">
|
|
|
+ <el-select v-model="dataForm.memorySelected" placeholder="选择内存大小" @change="memoryChange()">
|
|
|
+ <el-option v-for="data in memorys" :key="data.value" :label="data.label" :value="data.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item style="float:right">
|
|
|
+ <el-button @click="activeName='first'">返回</el-button>
|
|
|
+ <el-button type="primary" @click="activeName='third'">下一步</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane label="完成" name="third">
|
|
|
+
|
|
|
+ <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="180px" :disabled="true">
|
|
|
+
|
|
|
+ <el-form-item label="训练任务名称名称" prop="missName">
|
|
|
+ <el-input v-model="dataForm.missName" placeholder="请输入训练任务名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="选择算法" prop="algSelected">
|
|
|
+ <el-input v-model="algorithmName"></el-input>
|
|
|
+ <!-- <el-select v-model="dataForm.algSelected" placeholder="选择算法">
|
|
|
+ <el-option v-for="data in algs" :key="data.algorithmId" :label="data.algorithmName" :value="data.algorithmId">
|
|
|
+ </el-option>
|
|
|
+ </el-select> -->
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="选择版本" prop="versionSelected">
|
|
|
+ <el-input v-model="versionName"></el-input>
|
|
|
+ <!-- <el-select v-model="dataForm.versionSelected" placeholder="选择版本">
|
|
|
+ <el-option v-for="data in versions" :key="data.versionId" :label="data.versionName" :value="data.versionId">
|
|
|
+ </el-option>
|
|
|
+ </el-select> -->
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="指定主运行文件" prop="fileSelected">
|
|
|
+ <el-select v-model="dataForm.fileSelected" placeholder="选择主运行文件">
|
|
|
+ <el-option v-for="data in fileList" :key="data.filename" :label="data.filename" :value="data.filename">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="描述信息" prop="remark">
|
|
|
+ <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" placeholder="请输入内容"
|
|
|
+ v-model="dataForm.remark">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item label="指定cpu">
|
|
|
+ <el-select v-model="cpuSelected" multiple placeholder="选择容器运行在那些cpu上">
|
|
|
+ <el-option v-for="data in cpus" :key="data.value" :label="data.value" :value="data.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="内存大小" prop="memorySelected">
|
|
|
+ <el-select v-model="dataForm.memorySelected" placeholder="选择内存大小">
|
|
|
+ <el-option v-for="data in memorys" :key="data.value" :label="data.label" :value="data.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ <el-form>
|
|
|
+ <el-form-item style="float:right">
|
|
|
+ <el-button @click="activeName='second'">返回</el-button>
|
|
|
+ <el-button type="primary" @click="dataFormSubmit()">完成</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
|
|
|
+//例如:import 《组件名称》 from '《组件路径》';
|
|
|
+import { MessageBox } from 'element-ui'
|
|
|
+import { Message } from "element-ui"
|
|
|
+export default {
|
|
|
+ created() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading:false,
|
|
|
+ categoryName:"",
|
|
|
+ algorithmName:"",
|
|
|
+ versionName:"",
|
|
|
+ classification: [],
|
|
|
+ algs:[],
|
|
|
+ value1: [],
|
|
|
+ value2: [],
|
|
|
+
|
|
|
+ fileList: [
|
|
|
+
|
|
|
+ ],
|
|
|
+
|
|
|
+ activeName: "first",
|
|
|
+ versions: [],
|
|
|
+ cpuSelected:[],
|
|
|
+ cpus:[
|
|
|
+ {
|
|
|
+ value:0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:1,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ memorys:[
|
|
|
+ {
|
|
|
+ value: 512,
|
|
|
+ label: "512MB",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1024,
|
|
|
+ label: "1GB",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2048,
|
|
|
+ label: "2GB",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 4096,
|
|
|
+ label: "4GB",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 8192,
|
|
|
+ label: "8GB",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ visible: false,
|
|
|
+ dataForm: {
|
|
|
+ id: 0,
|
|
|
+ missName: "",
|
|
|
+ remark: "",
|
|
|
+ calssSelected:null,
|
|
|
+ fileSelected:'',
|
|
|
+ algSelected: null,
|
|
|
+ versionSelected:null,
|
|
|
+ memorySelected:null,
|
|
|
+ },
|
|
|
+ textarea2: "",
|
|
|
+ dataRule: {
|
|
|
+ missName: [
|
|
|
+ { required: true, message: "名称不能为空", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ calssSelected: [
|
|
|
+ { required: true, message: "类别不能为空", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ algSelected: [
|
|
|
+ { required: true, message: "算法不能为空", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ versionSelected: [
|
|
|
+ { required: true, message: "版本不能为空", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ memorySelected: [
|
|
|
+ { required: true, message: "内存不能为空", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ fileSelected: [
|
|
|
+ { required: true, message: "主运行文件不能为空", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ this.activeName="first";
|
|
|
+ this.dataForm.missName='';
|
|
|
+ this.dataForm.algSelected=this.$route.query.algorithmId;
|
|
|
+ this.dataForm.versionSelected=this.$route.query.versionId;
|
|
|
+ this.dataForm.calssSelected=null,
|
|
|
+ this.dataForm.fileSelected='',
|
|
|
+ this.dataForm.memorySelected=null,
|
|
|
+ this.dataForm.remark='',
|
|
|
+ this.value1= [];
|
|
|
+ this.value2= [];
|
|
|
+ this.cpuSelected=[];
|
|
|
+ this.dataForm.id = 0;
|
|
|
+
|
|
|
+ //获取所有类别选项
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl("/category/select"),
|
|
|
+ method: "get",
|
|
|
+ }).then(({ data }) => {
|
|
|
+ this.classification = data.list;
|
|
|
+ });
|
|
|
+
|
|
|
+ //获得算法名称、版本名称信息
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl("/version/getStartTrainInfo/"),
|
|
|
+ method: "get",
|
|
|
+ params: this.$http.adornParams({
|
|
|
+ algId:this.dataForm.algSelected,
|
|
|
+ versionId:this.dataForm.versionSelected
|
|
|
+ }),
|
|
|
+ }).then(({ data }) => {
|
|
|
+ if (data && data.code === 0) {
|
|
|
+ this.algorithmName=data.algorithmName;
|
|
|
+ this.dataForm.calssSelected=data.categoryName;
|
|
|
+ this.versionName=data.versionName;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.getFiles();
|
|
|
+
|
|
|
+ },
|
|
|
+ redirectHandle() {
|
|
|
+ this.$router.replace({ path: "/alg-train" });
|
|
|
+ },
|
|
|
+ // 表单提交
|
|
|
+ dataFormSubmit() {
|
|
|
+ this.$refs["dataForm"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.loading=true;
|
|
|
+ let cpus=this.cpuSelected.join(',');
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/algstrain/save'),
|
|
|
+ method: "post",
|
|
|
+ data: this.$http.adornData({
|
|
|
+ missName: this.dataForm.missName,
|
|
|
+ classificationtag: this.dataForm.calssSelected,
|
|
|
+ remark: this.dataForm.remark,
|
|
|
+ uid: this.$store.state.user.id,
|
|
|
+ algorithmId:this.dataForm.algSelected,
|
|
|
+ versionId:this.dataForm.versionSelected,
|
|
|
+ fileSelected:this.dataForm.fileSelected,
|
|
|
+ memory:this.dataForm.memorySelected,
|
|
|
+ setCpus:cpus
|
|
|
+ }),
|
|
|
+ }).then(({ data }) => {
|
|
|
+ if (data && data.code === 0) {
|
|
|
+ Message({
|
|
|
+ message: "操作成功",
|
|
|
+ type: "success",
|
|
|
+ duration: 1500,
|
|
|
+ onClose: () => {
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.loading=false;
|
|
|
+ this.$router.replace({ path: "/alg-train" });
|
|
|
+ } else {
|
|
|
+ Message.error(data.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //当选择的类别改变时,先清空所选算法,再重新获得所选新类别对应的算法
|
|
|
+ getAlgs(){
|
|
|
+ console.log(this.dataForm.calssSelected);
|
|
|
+ this.$refs["dataForm"].validate();
|
|
|
+ this.dataForm.algSelected=null;
|
|
|
+ this.dataForm.versionSelected=null;
|
|
|
+ this.dataForm.fileSelected=null;
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl("/algs/selectOnCreateMission"),
|
|
|
+ method: "get",
|
|
|
+ params: this.$http.adornParams({
|
|
|
+ classificationtag: this.dataForm.calssSelected,
|
|
|
+ frameId:1
|
|
|
+ }),
|
|
|
+ }).then(({ data }) => {
|
|
|
+ if (data && data.code === 0) {
|
|
|
+ this.algs = data.list;
|
|
|
+ } else {
|
|
|
+ this.algs = [];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ //当选择的算法改变时,先清空所选版本,再重新获得所选新算法对应的版本
|
|
|
+ getVersions(){
|
|
|
+ this.$refs["dataForm"].validate();
|
|
|
+ this.dataForm.versionSelected=null;
|
|
|
+ this.dataForm.fileSelected=null;
|
|
|
+ var algId=this.dataForm.algSelected;
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl("/version/select/"+algId),
|
|
|
+ method: "get",
|
|
|
+ params: this.$http.adornParams({
|
|
|
+ algId:this.dataForm.algSelected,
|
|
|
+ }),
|
|
|
+ }).then(({ data }) => {
|
|
|
+
|
|
|
+ this.versions = data.versions;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ //当选择的版本改变时,先清空所选文件,再重新获得所选新版本对应的文件
|
|
|
+ getFiles(){
|
|
|
+ this.$refs["dataForm"].validate();
|
|
|
+ this.dataForm.fileSelected=null;
|
|
|
+
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl("/version/listFiles/"),
|
|
|
+ method: "get",
|
|
|
+ params: this.$http.adornParams({
|
|
|
+ algorithmNameToVersion:this.dataForm.algSelected,
|
|
|
+ verisionToFile:this.dataForm.versionSelected
|
|
|
+ }),
|
|
|
+ }).then(({ data }) => {
|
|
|
+ if (data && data.code === 0) {
|
|
|
+ this.fileList = data.fileList;
|
|
|
+ } else {
|
|
|
+ this.fileList = [];
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ /* this.$http({
|
|
|
+ url: this.$http.adornUrl("/version/select/"+algId),
|
|
|
+ method: "get",
|
|
|
+ params: this.$http.adornParams({
|
|
|
+ algId:this.algSelected,
|
|
|
+ }),
|
|
|
+ }).then(({ data }) => {
|
|
|
+
|
|
|
+ this.versions = data.versions;
|
|
|
+ }); */
|
|
|
+ },
|
|
|
+
|
|
|
+ //当训练任务名称改变时,对表单进行验证
|
|
|
+ missNameChange(){
|
|
|
+ this.$refs["dataForm"].validate();
|
|
|
+ },
|
|
|
+ //当选择的文件改变时,对表单进行验证
|
|
|
+ fileChange(){
|
|
|
+ this.$refs["dataForm"].validate();
|
|
|
+ },
|
|
|
+ //当选择的内存改变时,对表单进行验证
|
|
|
+ memoryChange(){
|
|
|
+ this.$refs["dataForm"].validate();
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ //去重
|
|
|
+ unique(arr) {
|
|
|
+ var ss = [];
|
|
|
+ for (var i = 0; i < arr.length; i++) {
|
|
|
+ ss[i] = arr[i].categoryName;
|
|
|
+ }
|
|
|
+ return Array.from(new Set(ss));
|
|
|
+ },
|
|
|
+
|
|
|
+ // 以下4个函数是文件上传功能的
|
|
|
+ handleRemove(file, fileList) {
|
|
|
+ console.log(file, fileList);
|
|
|
+ },
|
|
|
+ handlePreview(file) {
|
|
|
+ console.log(file);
|
|
|
+ },
|
|
|
+ handleExceed(files, fileList) {
|
|
|
+ Message.warning(
|
|
|
+ `当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${
|
|
|
+ files.length + fileList.length
|
|
|
+ } 个文件`
|
|
|
+ );
|
|
|
+ },
|
|
|
+ beforeRemove(file, fileList) {
|
|
|
+ return MessageBox.confirm(`确定移除 ${file.name}?`);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.divi {
|
|
|
+ display: block;
|
|
|
+ height: 1px;
|
|
|
+ width: 100%;
|
|
|
+ margin: 24px 0;
|
|
|
+ background-color: #dcdfe6;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.divi2 {
|
|
|
+ display: block;
|
|
|
+ height: 1px;
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.sele {
|
|
|
+ border: 1px solid #409eff;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5px 0px;
|
|
|
+ margin: 10px;
|
|
|
+}
|
|
|
+</style>
|