Browse Source

版本页面

wangyi 2 years ago
parent
commit
046bf8ccc1
3 changed files with 466 additions and 11 deletions
  1. 1 0
      src/router/index.js
  2. 458 0
      src/views/modules/version/start-train.vue
  3. 7 11
      src/views/modules/version/version.vue

+ 1 - 0
src/router/index.js

@@ -54,6 +54,7 @@ const mainRoutes = {
     // 查看算法版本的路由
     { path: '/versions', component: _import('modules/version/version'), name: 'version', meta: { title: '查看算法版本', isTab: false } },
     { path: '/versions-edit', component: _import('modules/version/version-edit'), name: 'versionedit', meta: { title: '编辑算法版本', isTab: false } },
+    { path: '/start-train', component: _import('modules/version/start-train'), name: 'starttrain', meta: { title: '创建训练任务', isTab: false } },
     // 查看文件列表的路由
     { path: '/versions-filetest', component: _import('modules/version/filetest'), name: 'filetest', meta: { title: '查看文件列表', isTab: false } },
     // 查看传统算法文件列表的路由

+ 458 - 0
src/views/modules/version/start-train.vue

@@ -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>

+ 7 - 11
src/views/modules/version/version.vue

@@ -30,12 +30,7 @@
       </el-table-column>
       <el-table-column prop="creationTime" header-align="center" align="center" label="创建日期">
       </el-table-column>
-      <el-table-column prop="versionStatus" header-align="center" align="center" label="训练状态">
-          <template slot-scope="scope">
-          <el-tag v-if="scope.row.versionStatus === 0" size="small">未训练</el-tag>
-          <el-tag v-else size="small" type="success">已训练</el-tag>
-        </template>
-      </el-table-column>
+      
       <el-table-column fixed="right" header-align="center" align="center" width="250" label="操作">
         <template slot-scope="scope">
           <el-button v-if="isAuth('version:info')" type="text" size="small" @click="userwatch(scope.row.versionId)">查看
@@ -44,11 +39,8 @@
           <el-button v-if="isAuth('version:edit')" type="text" size="small" @click="versionsList(scope.row.versionId)">编辑
           </el-button>
 
-          <el-button v-if="isAuth('version:train')" type="text" size="small" :disabled=true
-            @click="addOrUpdateHandle(scope.row.versionId)">开始训练</el-button>
-
-          <el-button v-if="isAuth('version:publish')" type="text" size="small" :disabled=true
-            @click="addOrUpdateHandle(scope.row.versionId)">发布</el-button>
+          <el-button v-if="isAuth('version:train')" type="text" size="small"
+            @click="startTrain(scope.row.versionId)">开始训练</el-button>
 
           <el-button v-if="isAuth('version:delete')" type="text" size="small" @click="deleteHandle(scope.row.versionId)">
             删除</el-button>
@@ -192,6 +184,10 @@ export default {
         this.$refs.addOrUpdate.init(id);
       });
     },
+    // 开始训练
+    startTrain(id){
+      this.$router.replace({ name: 'starttrain',query:{algorithmId:this.algorithmNameToVersion,versionId:id} });
+    },
     // 这里处理新建
     addHandle() {
       this.addVisible = true;