feat: 全部预测结果

src/api/prediction.js

@@ -29,6 +29,19 @@ export const getPrediction = async payload => {
     return res
 }
 
+
+/**
+ * 获取某用户的预测结果 GET
+ * @param userId
+ * @returns
+ */
+export const getPredictionAll = async payload => {
+    const{ userId } = payload;
+    const res = await axios.get(`${PREDICTION_MODULE}`, {params: {userId: userId}})
+    return res
+}
+
+
 /**
  * 获取预测结果详情 GET
  * @param modelId

src/components/Sidebar.vue

@@ -81,6 +81,12 @@ export default {
             title: "模型部署",
           },
 
+          {
+            icon: "el-icon-data-board",
+            index: "/predictionAll",
+            title: "预测结果",
+          },
+
           {
             icon: "el-icon-pie-chart",
             index: "/analysis",

src/router/index.js

@@ -140,6 +140,14 @@ const routes = [
                 },
                 component:()=>import(/*webpackChunkName:"configform" */ '../views/ml/Deployment.vue')
             },
+            {
+                path:'/predictionAll',
+                name:'predictionAll',
+                meta:{
+                    title:'预测结果'
+                },
+                component:()=>import(/*webpackChunkName:"configform" */ '../views/ml/PredictionAll.vue')
+            },
         ]
     },
     {

src/views/ml/PredictionAll.vue

@@ -0,0 +1,168 @@
+<template>
+  <div>
+    <div class="crumbs">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item>
+          <i class="el-icon-data-board"></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 label="序号">
+          <template #default="scope">
+            {{scope.$index + 1}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdTime" 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 prop="exampleData" 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>
+    </div>
+
+    <el-dialog v-model="downloadVisible" title="下载预测结果" width="30%">
+      <el-form width="300px">
+        <el-form-item label="文件名称" required>
+          <el-input v-model="fileName"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="downloadVisible = false">取消</el-button>
+            <el-button type="primary" @click="download" style="margin-left: 10px"> 下载 </el-button>
+          </span>
+      </template>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import {ref} from "vue";
+import { getPredictionAll} from "../../api/prediction";
+import {downloadFile} from "../../api/utils";
+
+export default {
+  name: "PredictionAll",
+  setup(){
+    const tableData = ref([]);
+
+    const getPage = () => {
+      const payload={
+        userId: localStorage.getItem("ms_userId")
+      }
+      getPredictionAll(payload).then(res => {
+        console.log( res.result)
+        tableData.value=res.result;
+      })
+    }
+    getPage();
+    let fileName = ref('')
+    let downloadUri = ref()
+    let downloadVisible = ref(false)
+
+    const handleDownload=(url)=>{
+      downloadVisible.value =true
+      downloadUri.value = url
+    }
+    const download = () =>{
+      const payload={
+        fileUri: downloadUri.value
+      }
+      downloadFile(payload).then(data=>{
+        downloadVisible.value = false
+        let file = new Blob(["\ufeff" + data], { type: 'text/csv'});
+        if (window.navigator.msSaveOrOpenBlob)
+            // IE10+
+          window.navigator.msSaveOrOpenBlob(file, fileName.value);
+        else {
+          // Others
+          let a = document.createElement("a"),
+              url = URL.createObjectURL(file);
+          a.href = url;
+          a.download = fileName.value;
+          document.body.appendChild(a);
+          a.click();
+          setTimeout(function() {
+            document.body.removeChild(a);
+            window.URL.revokeObjectURL(url);
+          }, 0);
+        }
+      })
+    }
+
+    return {
+      tableData,
+      fileName,
+      downloadVisible,
+      getPage,
+      handleDownload,
+      download,
+    };
+  },
+}
+</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>