feat: 预测部分

src/api/model.js

@@ -123,7 +123,8 @@ export const getModelByConfigId = async payload => {
      */
     export const use = async data=>{
         const {modelId,fileId}=data;
-        const res=await axios.get(`${MODEL_MODULE}/use?fileId=${fileId}&modelId=${modelId}`);
+        // const res=await axios.get(`${MODEL_MODULE}/use?fileId=${fileId}&modelId=${modelId}`);
+        const res=await axios.post(`${MOCK}/ml/predictions/predict:modelId=1&fileInfoId=2`);
         return res;
     }
 

src/api/prediction.js

@@ -0,0 +1,27 @@
+import {axios} from '../utils/request'
+import {MODEL_MODULE, PREDICTION_MODULE} from "./_prefix";
+import {MOCK} from "./_prefix";
+
+/**
+ * 获取某一个模型下的预测结果 GET
+ * @param userId
+ * @returns
+ */
+export const getPrediction = async payload => {
+    const{ modelId } = payload;
+    // const res = await axios.get(`${MODEL_MODULE}/get/all`, {params: {userId: userId}})
+    const res = await axios.get(`${MOCK}/ml/predictions/models/:modelId`)
+    return res
+}
+
+/**
+ * 获取预测结果详情 GET
+ * @param modelId
+ * @returns
+ */
+export const getPredictionDetail = async payload => {
+    const{ predictionId } = payload;
+    // const res = await axios.get(`${MODEL_MODULE}/get/all/dl`, {params: {modelId: modelId}})
+    const res = await axios.get(`${MOCK}/ml/predictions/:predictionId`)
+    return res
+}

src/api/utils.js

@@ -0,0 +1,8 @@
+import {axios} from '../utils/request'
+import {API_MODULE} from "./_prefix";
+import {MOCK} from "./_prefix";
+
+export const getEnum = () => {
+    const res = axios.get(`${API_MODULE}/hello/enum`)
+    return res
+}

src/components/Sidebar.vue

@@ -106,12 +106,6 @@ export default {
           //   title:"深度学习模型",
           // },
 
-          {
-            icon: "el-icon-data-board",
-            index: "/charts",
-            title: "预测结果",
-          },
-
           {
             icon: "el-icon-pie-chart",
             index: "/analysis",

src/router/index.js

@@ -75,12 +75,20 @@ const routes = [
                 component: () => import ( /* webpackChunkName: "table" */ "../views/ml/ConfigList.vue")
             },
             {
-                path: "/charts",
-                name: "basecharts",
+                path: "/predictionList",
+                name: "predictionList",
                 meta: {
-                    title: '训练结果'
+                    title: '预测结果列表'
                 },
-                component: () => import ( /* webpackChunkName: "charts" */ "../views/ml/BaseCharts.vue")
+                component: () => import ( /* webpackChunkName: "charts" */ "../views/ml/PredictionList.vue")
+            },
+            {
+                path: "/predictionDetail",
+                name: "predictionDetail",
+                meta: {
+                    title: '预测结果详情'
+                },
+                component: () => import ( /* webpackChunkName: "charts" */ "../views/ml/PredictionDetail.vue")
             },
             {
                 path: "/analysisConfig",

src/views/ml/BaseCharts.vue

@@ -1,171 +0,0 @@
-<template>
-    <div>
-              <!-- 历史记录，面包屑 -->
-        <div class="crumbs">
-            <el-breadcrumb separator="/">
-                <el-breadcrumb-item>
-                    <i class="el-icon-lx-cascades"></i> 基础表格
-                </el-breadcrumb-item>
-            </el-breadcrumb>
-        </div>
-
-    <div class="container">
-
-    <!-- 详情页 -->
-
-
-    <div class="mytTable">
-         <el-table :data="tableData" border style="width: 100%">
-<!--         <el-table-column prop="event_type" label="目标字段" width="180" />-->
-           <el-table-column label="预测结果">
-             <template #default="scope">{{ scope.row }}</template>
-           </el-table-column>
-        </el-table>
-    </div>
-            <div class="pagination">
-                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
-                    :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
-            </div>
-    </div>
-
-    </div>
-</template>
-
-<script>
-import { ref, reactive } from "vue";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { fetchData,fetchModuleDetail } from "../../api";
-import {useRoute} from "vue-router";
-import {use}from "../../api/model"
-
-export default {
-    
-    name:"basecharts",
-    setup() {
-        const query = reactive({
-            address: "",
-            name: "",
-            pageIndex: 1,
-            pageSize: 10,
-        });
-        const tableData = ref([]);
-        const moduleData = ref([]);
-        const pageTotal = ref(0);
-        let userId=ref(1);
-        const  dialogTableVisible = ref(false)
-        // 获取表格数据
-        //  插入获取数据的api，可以引入第三方文件
-        const getData = () => {
-          const route=useRoute()
-          const fileId=route.query.fileId
-          const modelId=route.query.modelId
-          console.log(fileId)
-          var data={
-            modelId:modelId,
-            fileId:fileId
-          }
-          ElMessageBox({
-            title: "正在拼命预测！",
-            beforeClose: (action, instance, done) => {
-              instance.confirmButtonLoading = true
-              instance.confirmButtonText = '预测中...'
-              use(data).then(res=>{
-                instance.confirmButtonLoading = false
-                if (res.status === 200)
-                {
-                  ElMessageBox({
-                    title: '模型使用',
-                    message: `模型预测成功`,
-                    confirmButtonText: '确定',
-                  })
-                  done()
-                }
-                else
-                {
-                  console.log(res);
-                  ElMessage.error("预测失败!失败码:"+res.status);
-                  done()
-                }
-                console.log(res.data);
-                tableData.value=res.data
-              }).catch(err=>{
-                console.log(err)
-              });
-              //超时自动关闭
-              setTimeout(() => {
-                ElMessageBox.close();
-                ElMessageBox('timeout');
-              }, 30000);
-
-              //console.log("getData被调用了")
-            }
-          })
-        };
-
-        // 相当于beforeCreated生命周期中调用了getData（）函数
-        getData();
-
-       
-        // 分页导航
-        const handlePageChange = (val) => {
-            query.pageIndex = val;
-            getData();
-        };
-
-        const  handleDetail=({configId})=>{
-            
-            fetchModuleDetail(configId).
-            then((res)=>{
-                moduleData.value=res.data.list
-                dialogTableVisible.value=true
-                
-            })
-            // console.log(configId)
-        }
-
-        
-
-        return {
-            query,
-            tableData,
-            pageTotal,
-            userId,
-            handlePageChange,
-            handleDetail,
-            dialogTableVisible,
-            moduleData,
-        };
-    },
-};
-</script>
-
-<style scoped>
-.handle-box {
-    margin-bottom: 20px;
-}
-
-.handle-select {
-    width: 120px;
-}
-
-.handle-input {
-    width: 300px;
-    display: inline-block;
-}
-.table {
-    width: 100%;
-    font-size: 14px;
-}
-.red {
-    color: #ff0000;
-}
-.mr10 {
-    margin-right: 10px;
-}
-.table-td-thumb {
-    display: block;
-    margin: auto;
-    width: 40px;
-    height: 40px;
-}
-</style>

src/views/ml/ConfigDetail.vue

@@ -138,6 +138,7 @@ import {getFileDetail} from "../../api/file";
 import {getOneConfig} from "../../api/config";
 import {useRoute}from "vue-router";
 import {addModel, getModelByConfigId} from "../../api/model";
+import {getEnum} from "../../api/utils";
 export default {
   name: "configDetail",
   //训练特征
@@ -219,6 +220,9 @@ export default {
         getModelByConfigId({configId:route.query.configId}).then(res =>{
           modelData.value=res.result.modelVOList;
         })
+        // getEnum().then(res=>{
+        //   console.log("enum: "+res)
+        // })
       }
 
     };

src/views/ml/ModelList.vue

@@ -45,10 +45,15 @@
             <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>
               <el-button type="text" icon="el-icon-video-play" class="green"
-                       @click="handleTrain(scope.row.modelId)">模型训练</el-button>
+                       @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>
@@ -56,7 +61,7 @@
           <template #default="scope">
             <div v-if="scope.row.trainingState==='SUCCESS'">
               <el-button type="text" icon="el-icon-mouse"
-                         @click="editUseModel(scope.$index, scope.row)">模型使用
+                         @click="editUseModel(scope.row.id)">模型使用
               </el-button>
             </div>
             <div v-else>
@@ -85,9 +90,9 @@
                 <el-select v-model="useform.file" :label-width="formLabelWidth" placeholder="请选择您要使用的文件">
                   <el-option
                     v-for="item in fileList.valueOf()"
-                    :key="item.fileId"
+                    :key="item.id"
                     :label="item.fileName"
-                    :value="item.fileId"
+                    :value="item.id"
                   />
                 </el-select>
               </el-form-item>
@@ -95,9 +100,9 @@
         <template #footer>
           <span class="dialog-footer">
             <el-button @click="useModelVisible = false">取消</el-button>
-            <router-link :to="{path:'/charts',query:{fileId:useform.file,modelId:usemodelId}}">
-            <el-button type="primary" @click="useModel()" style="margin-left: 10px"> 使用模型 </el-button>
-            </router-link>
+<!--            <router-link :to="{path:'/charts',query:{fileId:useform.file,modelId:usemodelId}}">-->
+            <el-button type="primary" @click="useModel(useform.file)" style="margin-left: 10px"> 使用模型 </el-button>
+<!--            </router-link>-->
           </span>
         </template>
       </el-dialog>
@@ -117,6 +122,7 @@ import {deleteModel} from "../../api/model";
 export default {
   name: "model",
   setup() {
+    const router = useRouter();
     const useModelVisible = ref(false)
     const formLabelWidth='120px';
     const featureSty = reactive({
@@ -158,7 +164,6 @@ export default {
       }).then(res => {
         tableData.value = res.result.modelVOList;
         pageTotal.value=tableData.value.length
-        console.log(tableData.value[0].trainParams)
         for(let i=0;i<tableData.value.length;i++) {
           const reg=new RegExp("\"","g");
           tableData.value[i].trainParams = ((JSON.stringify(tableData.value[i].trainParams))+"")
@@ -181,6 +186,14 @@ export default {
       query.pageIndex = val;
       getData();
     };
+    const handlePreList=(modelId)=>{
+      router.push({
+        path:'predictionList',
+        query:{
+          modelId:modelId,
+        }
+      })
+    }
     //todo模型训练
     const handleTrain =(modelId) => {
       ElMessageBox( {
@@ -247,33 +260,64 @@ export default {
 
     const usemodelId=ref();
     //todo模型使用
-     const editUseModel = (index) => {
+     const editUseModel = (id) => {
       useModelVisible.value=true;
-      usemodelId.value=tableData.value[index].modelId
+      usemodelId.value=id
     };
 
     let useform = reactive({
       file: "",
     });
         //todo模型使用
-     const useModel = () => {
-      console.log("模型使用")
+     const useModel = (fileId) => {
       useModelVisible.value=false;
-      //console.log(useform.file+" "+usemodelId.value)
-      // use() todo
-       var data={
+       let data={
         modelId:usemodelId.value,
-         fileId:useform.file
+         fileId:fileId
        }
-       console.log(data)
+       ElMessageBox( {
+         title: "确定要预测吗？",
+         showCancelButton: true,
+         confirmButtonText: '确定',
+         cancelButtonText: '取消',
+         beforeClose: (action, instance, done) => {
+           if (action === 'confirm') {
+             instance.confirmButtonLoading = true
+             instance.confirmButtonText = '预测中...'
+             use(data).then(res=>{
+               instance.confirmButtonLoading = false
+               console.log("predic_res: ",res);
+               if (res.msg === '成功')
+               {
+                 ElMessageBox({
+                   title: '模型使用',
+                   message: `模型使用成功`,
+                   confirmButtonText: '确定',
+                 })
+                 //location.reload();
+                 getpage();
+                 done()
+               }
+               else
+               {
+                 console.log(res);
+                 ElMessage.error("预测失败!失败码:"+res.msg);
+                 done()
+               }
+             }).catch(err=>{
+               console.log(err)
+             });
+           } else {
+             done()
+           }
+         },
+       })
        // use(data).then(res=>{
        //   console.log(res.data);
        // })
-       const router=useRouter()
-       const fileId=useform.file
-
-      //ElMessageBox.alert("成功使用模型,快去查看结果吧",{type:"success"})
-    };
+       // const router=useRouter()
+       // const fileId=useform.file
+     };
 
     // 删除操作(单个)
     const handleDelete = (index) => {
@@ -349,6 +393,7 @@ export default {
     };
 
     return {
+      router,
       usemodelId,
       query,
       tableData,
@@ -359,6 +404,7 @@ export default {
       editVisible,
       form,
       useform,
+      handlePreList,
       handleSearch,
       handlePageChange,
       handleTrain,
@@ -403,6 +449,9 @@ export default {
 .yellow{
   color:yellowgreen;
 }
+.orange{
+  color: orange;
+}
 .mr10 {
   margin-right: 10px;
 }

src/views/ml/PredictionDetail.vue

@@ -0,0 +1,13 @@
+<template>
+<div>detail</div>
+</template>
+
+<script>
+export default {
+  name: "PredictionDetail"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/ml/PredictionList.vue

@@ -0,0 +1,104 @@
+<template>
+<div>
+  <div class="crumbs">
+    <el-breadcrumb separator="/">
+      <el-breadcrumb-item>
+        <i class="el-icon-lx-cascades"></i> 预测结果列表
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
+
+  <div class="container">
+    <el-table
+        :data="tableData" border class="table" ref="multipleTable"
+        header-cell-class-name="table-header"
+    >
+      <el-table-column prop="modelId" label="模型id"></el-table-column>
+      <el-table-column prop="createdTime" label="创建时间"></el-table-column>
+      <el-table-column prop="precitionState" label="预测状态"></el-table-column>
+      <el-table-column prop="finishTime" label="完成时间"></el-table-column>
+
+      <el-table-column label="操作" width="180" align="center">
+        <template #default="scope">
+            <el-button type="text" icon="el-icon-download"
+                       @click="handleDownload(scope.row.predictedFileDownloadingUri)">下载
+            </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+
+
+</div>
+</template>
+
+<script>
+import {getPrediction} from "../../api/prediction";
+import {useRoute} from "vue-router";
+import {ref} from "vue";
+
+export default {
+  name: "PredictionList",
+  setup(){
+    const route=useRoute()
+    const tableData = ref([]);
+
+    const getPage = () => {
+      getPrediction({modelId: route.query.modelId}).then(res => {
+        tableData.value=res.result.PredictionVOList;
+      })
+    }
+    getPage();
+
+    const handleDownload=(url)=>{
+      const a = document.createElement('a')
+      a.href = url
+      //a.download = res.success.fileName // 下载后文件名
+      a.style.display = 'none'
+      document.body.appendChild(a)
+      a.click() // 点击下载
+      document.body.removeChild(a)
+    }
+
+
+    return {
+      route,
+      tableData,
+      getPage,
+      handleDownload,
+    };
+  },
+}
+</script>
+
+<style scoped>
+.handle-box {
+  margin-bottom: 20px;
+}
+
+.handle-select {
+  width: 120px;
+}
+
+.handle-input {
+  width: 300px;
+  display: inline-block;
+}
+.table {
+  width: 100%;
+  font-size: 14px;
+}
+.red {
+  color: #ff0000;
+  margin-left: 10px;
+}
+.mr10 {
+  margin-right: 10px;
+}
+.table-td-thumb {
+  display: block;
+  margin: auto;
+  width: 40px;
+  height: 40px;
+}
+</style>