瀏覽代碼

feat: 训练、使用模型状态显示优化

icenaked 3 年之前
父節點
當前提交
dfd6d5b323
共有 5 個文件被更改,包括 68 次插入55 次删除
  1. 3 6
      src/api/config.js
  2. 3 3
      src/api/model.js
  3. 7 9
      src/api/pipeline.js
  4. 34 35
      src/views/ml/ModelList.vue
  5. 21 2
      src/views/ml/PredictionList.vue

+ 3 - 6
src/api/config.js

@@ -66,12 +66,9 @@ export const getAllNew = payload => {
  */
 export const getOneConfig = payload => {
   const { configId, userId } = payload;
-  return axios.get(`${CONFIG_MODULE}/${configId}`,{
-    params:{
-      userId: userId
-    }
-  }).then(res => {
-    return res;});
+  return axios.get(`${CONFIG_MODULE}/${configId}?userId=${userId}`).then(res => {
+    return res;
+  });
   // return axios.get(`${MOCK}/ml/configs/:configId`).then(res => {
   //   return res;});
 }

+ 3 - 3
src/api/model.js

@@ -77,9 +77,9 @@ export const getModelByConfigId = async payload => {
  * @returns
  */
 export const getOneModel = async payload => {
-    const{ modelId } = payload;
-    // const res = await axios.get(`${MODEL_MODULE}/get/all`, {params: {userId: userId}})
-    const res = await axios.get(`${MOCK}/ml/models/:modelId`)
+    const{ modelId, userId } = payload;
+    const res = await axios.get(`${MODEL_MODULE}/${modelId}?userId=${userId}`)
+    // const res = await axios.get(`${MOCK}/ml/models/:modelId`)
     return res
 }
 

+ 7 - 9
src/api/pipeline.js

@@ -9,7 +9,7 @@ import {MOCK} from "./_prefix";
  */
 export const addPipeline = async payload => {
     const {userId, pipelineName, features, label, machineLearningAlgorithm, trainParams} = payload;
-    const res = await axios.post(`${MOCK}/ml/pipelines`, {
+    const res = await axios.post(`${PIPELINE_MODULE}`, {
         userId,
         pipelineName,
         features,
@@ -27,9 +27,8 @@ export const addPipeline = async payload => {
  */
 export const getAllPipeline = payload => {
     const {userId} = payload;
-    // return axios.get(`${CONFIG_MODULE}/get/all?userId=${uid}`).then(res => {
-    //   return res;
-    return axios.get(`${MOCK}/ml/pipelines/all/:userId`).then(res => {
+    return axios.get(`${PIPELINE_MODULE}/all/${userId}`).then(res => {
+    // return axios.get(`${MOCK}/ml/pipelines/all/:userId`).then(res => {
         return res;
     });
 }
@@ -40,9 +39,8 @@ export const getAllPipeline = payload => {
  */
 export const usePipeline = payload => {
     const {pipelineId, fileId} = payload;
-    // return axios.get(`${CONFIG_MODULE}/get/all?userId=${uid}`).then(res => {
-    //   return res;
-    return axios.post(`${MOCK}/ml/pipelines/:pipelineId`).then(res => {
+    return axios.get(`${PIPELINE_MODULE}/${pipelineId}?fileId=${fileId}`).then(res => {
+    // return axios.post(`${MOCK}/ml/pipelines/:pipelineId`).then(res => {
         return res;
     });
 }
@@ -54,8 +52,8 @@ export const usePipeline = payload => {
  */
 export const deletePipeline = payload => {
     const {pipelineId} = payload;
-    // return axios.get(`${CONFIG_MODULE}/delete?configId=${configId}`).then(res => {
-    return axios.delete(`${MOCK}/ml/pipelines/:pipelineId`).then(res => {
+    return axios.delete(`${PIPELINE_MODULE}/${pipelineId}`).then(res => {
+    // return axios.delete(`${MOCK}/ml/pipelines/:pipelineId`).then(res => {
         return res;
     });
 }

+ 34 - 35
src/views/ml/ModelList.vue

@@ -45,15 +45,27 @@
             <div v-if="scope.row.trainingState==='SUCCESS'" >
               <el-button type="text" icon="el-icon-circle-check" class="yellow"
                          @click="handleTrainRes(scope.$index, scope.row)">查看训练结果</el-button>
-              <br/>
-              <el-button type="text" icon="el-icon-data-board" class="orange"
-                         @click="handlePreList(scope.row.id)">查看预测结果</el-button>
+            </div>
+            <div v-else-if="scope.row.trainingState==='ON_GOING'">
+              <el-button type="text" icon="el-icon-video-play" class="green" >训练中</el-button>
+            </div>
+            <div v-else-if="scope.row.trainingState==='FAIL'">
+              <el-button type="text" icon="el-icon-video-play" class="red" >训练失败</el-button>
             </div>
             <div v-else>
               <el-button type="text" icon="el-icon-video-play" class="green"
                        @click="handleTrain(scope.row.id)">模型训练</el-button>
-              <br/>
-              <el-button type="text" icon="el-icon-lock" style="color: gray">暂未成功训练</el-button>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="预测结果">
+          <template #default="scope">
+            <div v-if="scope.row.trainingState==='SUCCESS'" >
+              <el-button type="text" icon="el-icon-data-board" class="orange"
+                         @click="handlePreList(scope.row.id)">查看预测结果</el-button>
+            </div>
+            <div v-else>
+              <el-button type="text" icon="el-icon-lock" style="color: gray">查看预测结果</el-button>
             </div>
           </template>
         </el-table-column>
@@ -121,7 +133,7 @@
           <el-input v-model="pplForm.pipelineName"></el-input>
         </el-form-item>
         <el-form-item label="机器学习算法:" >
-          {{pplForm.machineLearningAlgorithm.algorithmName}}
+          {{pplForm.machineLearningAlgorithm}}
         </el-form-item>
         <el-form-item label="训练参数:" >
           {{pplForm.trainParams}}
@@ -171,12 +183,7 @@ export default {
     });
 
     const fileList=ref();
-
-    const typeList=["所有","分类","聚类","回归","自动分类器"];
-    const featureList=["所有","手动选择","自动选择"];
     const multipleSelection =ref([]);
-
-    // const tableData = ref([]);
     const tableData = ref();
 
     const pageTotal = ref(0);
@@ -191,19 +198,25 @@ export default {
     })
     const handlePipeline = (modelId) => {
       pipelineVisible.value = true
-      getOneModel({modelId}).then(res =>{
+      const payload = {
+        userId: 1,
+        modelId: modelId
+      }
+      getOneModel(payload).then(res =>{
         pplForm.configId = res.result.configId
         pplForm.machineLearningAlgorithm = res.result.machineLearningAlgorithm
         pplForm.trainParams = res.result.trainParams
-      })
-      const cId=pplForm.configId
-      getOneConfig({cId}).then(res =>{
-        pplForm.features = res.result.features
-        pplForm.label = res.result.label
+        const data = {
+          userId: 1,
+          configId: pplForm.configId
+        }
+        getOneConfig(data).then(resConfig =>{
+          pplForm.features = resConfig.result.features
+          pplForm.label = resConfig.result.label
+        })
       })
     }
     const pipeline = () => {
-      console.log(pplForm)
       const payload = {
         userId: 1,
         pipelineName: pplForm.pipelineName,
@@ -220,7 +233,7 @@ export default {
         if (res.msg === '成功'){
           pipelineVisible.value = false
           ElMessageBox({
-            title: '模型训练',
+            title: '流水线',
             message: `加入流水线成功`,
             confirmButtonText: '确定',
           })
@@ -295,12 +308,7 @@ export default {
               console.log("train_res: ",res);
               if (res.msg === '成功')
               {
-                ElMessageBox({
-                  title: '模型训练',
-                  message: `模型训练成功`,
-                  confirmButtonText: '确定',
-                })
-                //location.reload();
+                ElMessage.success("模型已经开始训练!")
                 getpage();
                 done()
               }
@@ -318,13 +326,8 @@ export default {
           }
         },
       })
-      // setTimeout(() => {
-      //   ElMessageBox.close()  //重要
-      //   ElMessage.error("超时!")
-      // }, 100000);
     };
     const modelRes=ref();
-    const resVisible = ref(false);
     const handleTrainRes = (index) => {
       const reg=new RegExp("\"","g");
      modelRes.value= ((JSON.stringify(tableData.value[index].trainResults)+"")
@@ -373,11 +376,7 @@ export default {
                console.log("predic_res: ",res);
                if (res.msg === '成功')
                {
-                 ElMessageBox({
-                   title: '模型使用',
-                   message: `模型使用成功`,
-                   confirmButtonText: '确定',
-                 })
+                 ElMessage.success("已经使用该模型开始预测")
                  getpage();
                  done()
                }

+ 21 - 2
src/views/ml/PredictionList.vue

@@ -15,14 +15,33 @@
     >
       <el-table-column prop="modelId" label="模型id"></el-table-column>
       <el-table-column prop="createdTime" label="创建时间"></el-table-column>
-      <el-table-column prop="predictionState" label="预测状态"></el-table-column>
+      <el-table-column label="预测状态">
+        <template #default="scope">
+          <div v-if="scope.row.predictionState === 'SUCCESS'">
+            预测成功
+          </div>
+          <div v-else-if="scope.row.predictionState === 'WAITING'">
+            未预测
+          </div>
+          <div v-else-if="scope.row.predictionState === 'ON_GOING'">
+            预测中
+          </div>
+          <div v-else>
+            预测失败
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column prop="finishTime" label="完成时间"></el-table-column>
-
       <el-table-column label="操作" width="180" align="center">
         <template #default="scope">
+          <div v-if="scope.row.predictionState === 'SUCCESS'">
             <el-button type="text" icon="el-icon-download"
                        @click="handleDownload(scope.row.predictionFileDownloadingUri)">下载
             </el-button>
+          </div>
+          <div v-else>
+            还未预测成功
+          </div>
         </template>
       </el-table-column>
     </el-table>