algorithm-platform-vue/src/views/modules/alg/train-create-tradition.vue

<!--  -->
<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">
      <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="calssSelected">
            <el-select v-model="dataForm.calssSelected" placeholder="选择类别" @change="getAlgs(dataForm.calssSelected)">
              <el-option v-for="data in classification" :key="data.categoryName" :label="data.categoryName" :value="data.categoryName">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="选择算法" prop="algSelected">
            <el-select v-model="dataForm.algSelected" placeholder="选择算法" @change="getFiles()">
              <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="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 :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="calssSelected">
            <el-select v-model="dataForm.calssSelected" placeholder="选择类别">
              <el-option v-for="data in classification" :key="data.categoryName" :label="data.categoryName" :value="data.categoryName">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="选择算法" prop="algSelected">
            <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="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,
      classification: [],
      algs:[],
      value1: [],
      value2: [],

      fileList: [

      ],

      activeName: "first",
      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,
        memorySelected:null,
      },
      textarea2: "",
      dataRule: {
        missName: [
          { required: true, message: "名称不能为空", trigger: "blur" },
        ],
        calssSelected: [
          { required: true, message: "类别不能为空", trigger: "blur" },
        ],
        algSelected: [
          { 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=null;
      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("/algs/list"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          limit: 10,
          algorithmName: "",
        }),
      }).then(({ data }) => {

        this.algs = data.page.list;
      }); */

    },
    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,
              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(calssSelected){
      // console.log(calssSelected);
      // this.$refs["dataForm"].validate();
      this.dataForm.algSelected=null;
      this.dataForm.fileSelected=null;
      if (calssSelected != null && calssSelected != "") {
        this.$http({
          url: this.$http.adornUrl("/algs/selectOnCreateMission"),
          method: "get",
          params: this.$http.adornParams({
            classificationtag: calssSelected,
            frameId:-1
          }),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.algs = data.list;
          } else {
            this.algs = [];
          }
        }).catch((e)=>{});
      }
    },

    //当选择的算法改变时，先清空所选文件，再重新获得所选新算法对应的文件
    getFiles(){
      // this.$refs["dataForm"].validate();
      this.dataForm.fileSelected=null;
      this.$http({
        url: this.$http.adornUrl("/algs/listFiles"),
        method: "get",
        params: this.$http.adornParams({
          algId:this.dataForm.algSelected,
        }),
      }).then(({ data }) => {

        if (data && data.code === 0) {
            this.fileList = data.fileList;
          } else {
            this.fileList = [];
          }
      });
    },

    //当训练任务名称改变时，对表单进行验证
    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>