添加教程功能

src/api/_prefix.js

@@ -5,7 +5,9 @@ export const API_MODULE = '/api'
 export const USER_MODULE= `${API_MODULE}/user`
 //文件模块
 export const FILE_MODULE= `${API_MODULE}/files`
+//广场模块
 export const SQUARE_MODULE= `${API_MODULE}/squares`
+export const INTRODUCTION_MODULE = `${API_MODULE}/instructions`
 //ml模块
 export const ML_MODULE= `${API_MODULE}/ml`
 export const CONFIG_MODULE = `${ML_MODULE}/configs`

src/api/introduction.js

@@ -0,0 +1,16 @@
+import {axios} from '../utils/request'
+import {INTRODUCTION_MODULE} from "./_prefix";
+
+export const setAnswer = payload => {
+    const {origin, answer} = payload;
+    return axios.post(`${INTRODUCTION_MODULE}/answer?origin=${origin}&answer=${answer}`).then( res => {
+        return res;
+    });
+}
+
+export const checkAnswer = payload => {
+    const {predictionId} = payload;
+    return axios.post(`${INTRODUCTION_MODULE}/check?predictionId=${predictionId}`).then( res => {
+        return res;
+    });
+}

src/api/square.js

@@ -1,7 +1,7 @@
 import {axios} from '../utils/request'
-import {FILE_MODULE, SQUARE_MODULE} from "./_prefix";
+import {SQUARE_MODULE} from "./_prefix";
 
-export const sharedFileList = userId => {
+export const getSharedFileList = userId => {
     return axios.get(`${SQUARE_MODULE}/sharedFileList`, {
         params: {
             userId: userId
@@ -12,7 +12,18 @@ export const sharedFileList = userId => {
     )
 }
 
-export const sharedModelList = userId => {
+export const getCollectFileList = userId => {
+    return axios.get(`${SQUARE_MODULE}/collectFileList`, {
+        params: {
+            userId: userId
+        }
+    }).then(res => {
+            return res;
+        }
+    )
+}
+
+export const getSharedModelList = userId => {
     return axios.get(`${SQUARE_MODULE}/sharedModelList`, {
         params: {
             userId: userId
@@ -23,9 +34,20 @@ export const sharedModelList = userId => {
     )
 }
 
+export const getCollectModelList = userId => {
+    return axios.get(`${SQUARE_MODULE}/collectModelList`, {
+        params: {
+            userId: userId
+        }
+    }).then(res => {
+            return res;
+        }
+    )
+}
+
+
 export const shareFile = payload => {
     const {userId, fileId} = payload;
-    console.log(typeof payload.userId)
     return axios.post(`${SQUARE_MODULE}/shareFile?userId=${userId}&fileId=${fileId}`).then( res => {
         return res;
     });
@@ -33,7 +55,21 @@ export const shareFile = payload => {
 
 export const shareModel = payload => {
     const {userId, modelId} = payload;
-    return axios.post(`${SQUARE_MODULE}/shareFile?userId=${userId}&fileId=${modelId}`).then( res => {
+    return axios.post(`${SQUARE_MODULE}/shareModel?userId=${userId}&modelId=${modelId}`).then( res => {
+        return res;
+    });
+}
+
+export const collectFile = payload => {
+    const {userId, fileId} = payload;
+    return axios.post(`${SQUARE_MODULE}/collectFile?userId=${userId}&fileId=${fileId}`).then( res => {
+        return res;
+    });
+}
+
+export const collectModel = payload => {
+    const {userId, modelId} = payload;
+    return axios.post(`${SQUARE_MODULE}/collectModel?userId=${userId}&modelId=${modelId}`).then( res => {
         return res;
     });
 }

src/components/Header.vue

@@ -5,13 +5,15 @@
             <i v-if="!collapse" class="el-icon-s-fold"></i>
             <i v-else class="el-icon-s-unfold"></i>
         </div>
+        <div class="user-avator">
+            <img src="../assets/img/seecoderLogo.png" />
+        </div>
         <div class="logo">轻量级AI平台</div>
         <div class="header-right">
             <div class="header-user-con">
-                <!-- 用户头像 -->
-                <div class="user-avator">
-                    <img src="../assets/img/user.png" />
-                </div>
+                <el-button icon="el-icon-thumb" circle type="primary" style="margin-right: 20px"
+                @click="openInstruction1"
+                ></el-button>
                 <!-- 用户名下拉菜单 -->
                 <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                     <span class="el-dropdown-link">
@@ -20,19 +22,228 @@
                     </span>
                     <template #dropdown>
                         <el-dropdown-menu>
-                            <a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
-                                <el-dropdown-item>项目仓库</el-dropdown-item>
-                            </a>
                             <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
                         </el-dropdown-menu>
                     </template>
                 </el-dropdown>
             </div>
         </div>
+
+        <el-dialog
+            title="第一步"
+            v-model="instruction1visible"
+            width="30%"
+            top="15%"
+            :modal="false"
+            >
+            <span style="margin-bottom: 20px; line-height: 30px">
+                查看我的文件列表<br>添加文件，支持本地.csv文件与数据库表文件
+                <br>可选择分享文件，分享时可选择对应结果文件
+            </span>
+            <div style="text-align: right">
+                <el-button type="primary" @click="openInstruction2"
+                           size="medium" style="margin-top: 20px">下一步</el-button>
+            </div>
+        </el-dialog>
+
+        <el-dialog
+                title="第二步"
+                v-model="instruction2visible"
+                width="30%"
+                top="15%"
+                :modal="false"
+        >
+            <span style="margin-bottom: 20px; line-height: 30px">进入文件，选择特征字段，新建AI模型配置或数据统计配置</span>
+            <div style="text-align: right">
+                <el-button type="primary" @click="openInstruction1From2"
+                           size="medium" style="margin-top: 20px">上一步</el-button>
+                <el-button type="primary" @click="openInstruction3"
+                           size="medium" style="margin-top: 20px">下一步</el-button>
+            </div>
+        </el-dialog>
+
+        <el-dialog
+                title="第三步"
+                v-model="instruction3visible"
+                width="30%"
+                top="15%"
+                :modal="false"
+        >
+            <span style="margin-bottom: 20px; line-height: 30px">查看AI模型配置列表</span>
+            <div style="text-align: right">
+                <el-button type="primary" @click="openInstruction2From3"
+                           size="medium" style="margin-top: 20px">上一步</el-button>
+                <el-button type="primary" @click="openInstruction4"
+                           size="medium" style="margin-top: 20px">下一步</el-button>
+            </div>
+        </el-dialog>
+
+        <el-dialog
+                title="第四步"
+                v-model="instruction4visible"
+                width="30%"
+                top="15%"
+                :modal="false"
+        >
+            <span style="margin-bottom: 20px; line-height: 30px">进入AI模型配置，选择算法，设定参数，生成AI模型</span>
+            <div style="text-align: right">
+                <el-button type="primary" @click="openInstruction3From4"
+                           size="medium" style="margin-top: 20px">上一步</el-button>
+                <el-button type="primary" @click="openInstruction5"
+                           size="medium" style="margin-top: 20px">下一步</el-button>
+            </div>
+        </el-dialog>
+
+        <el-dialog
+                title="第五步"
+                v-model="instruction5visible"
+                width="30%"
+                top="15%"
+                :modal="false"
+        >
+            <span style="margin-bottom: 20px; line-height: 30px">查看AI模型列表<br>训练模型，查看训练结果<br>
+            选择文件，使用模型进行预测，查看预测结果<br>可选择部署模型或新建机器学习流水线<br>可选择分享模型</span>
+            <div style="text-align: right">
+                <el-button type="primary" @click="openInstruction4From5"
+                           size="medium" style="margin-top: 20px">上一步</el-button>
+                <el-button type="primary" @click="openInstruction6"
+                           size="medium" style="margin-top: 20px">下一步</el-button>
+            </div>
+        </el-dialog>
+
+        <el-dialog
+                title="第六步"
+                v-model="instruction6visible"
+                width="30%"
+                top="15%"
+                :modal="false"
+        >
+            <span style="margin-bottom: 20px; line-height: 30px">查看预测结果，可下载结果文件<br>可选择计算作业分数</span>
+            <div style="text-align: right">
+                <el-button type="primary" @click="openInstruction5From6"
+                           size="medium" style="margin-top: 20px">上一步</el-button>
+                <el-button type="primary" @click="openInstruction7"
+                           size="medium" style="margin-top: 20px">下一步</el-button>
+            </div>
+        </el-dialog>
+
+        <el-dialog
+                title="第七步"
+                v-model="instruction7visible"
+                width="30%"
+                top="15%"
+                :modal="false"
+        >
+            <span style="margin-bottom: 20px; line-height: 30px">查看模型部署情况</span>
+            <div style="text-align: right">
+                <el-button type="primary" @click="openInstruction6From7"
+                           size="medium" style="margin-top: 20px">上一步</el-button>
+                <el-button type="primary" @click="openInstruction8"
+                           size="medium" style="margin-top: 20px">下一步</el-button>
+            </div>
+        </el-dialog>
+
+        <el-dialog
+                title="第八步"
+                v-model="instruction8visible"
+                width="30%"
+                top="15%"
+                :modal="false"
+        >
+            <span style="margin-bottom: 20px; line-height: 30px">查看机器学习流水线</span>
+            <div style="text-align: right">
+                <el-button type="primary" @click="openInstruction7From8"
+                           size="medium" style="margin-top: 20px">上一步</el-button>
+                <el-button type="primary" @click="openInstruction9"
+                           size="medium" style="margin-top: 20px">下一步</el-button>
+            </div>
+        </el-dialog>
+
+        <el-dialog
+                title="第九步"
+                v-model="instruction9visible"
+                width="30%"
+                top="15%"
+                :modal="false"
+        >
+            <span style="margin-bottom: 20px; line-height: 30px">查看数据统计配置列表</span>
+            <div style="text-align: right">
+                <el-button type="primary" @click="openInstruction8From9"
+                           size="medium" style="margin-top: 20px">上一步</el-button>
+                <el-button type="primary" @click="openInstruction10"
+                           size="medium" style="margin-top: 20px">下一步</el-button>
+            </div>
+        </el-dialog>
+
+        <el-dialog
+                title="第十步"
+                v-model="instruction10visible"
+                width="30%"
+                top="15%"
+                :modal="false"
+        >
+            <span style="margin-bottom: 20px; line-height: 30px">进入数据统计配置，选择分析方法，新建数据统计分析</span>
+            <div style="text-align: right">
+                <el-button type="primary" @click="openInstruction9From10"
+                           size="medium" style="margin-top: 20px">上一步</el-button>
+                <el-button type="primary" @click="openInstruction11"
+                           size="medium" style="margin-top: 20px">下一步</el-button>
+            </div>
+        </el-dialog>
+
+        <el-dialog
+                title="第十一步"
+                v-model="instruction11visible"
+                width="30%"
+                top="15%"
+                :modal="false"
+        >
+            <span style="margin-bottom: 20px; line-height: 30px">查看数据统计分析列表，查看历史分析结果<br>
+            可再次进行数据统计分析<br>可新建数据分析流水线</span>
+            <div style="text-align: right">
+                <el-button type="primary" @click="openInstruction10From11"
+                           size="medium" style="margin-top: 20px">上一步</el-button>
+                <el-button type="primary" @click="openInstruction12"
+                           size="medium" style="margin-top: 20px">下一步</el-button>
+            </div>
+        </el-dialog>
+
+        <el-dialog
+                title="第十二步"
+                v-model="instruction12visible"
+                width="30%"
+                top="15%"
+                :modal="false"
+        >
+            <span style="margin-bottom: 20px; line-height: 30px">查看数据分析流水线列表<br>
+            选择文件，使用流水线</span>
+            <div style="text-align: right">
+                <el-button type="primary" @click="openInstruction11From12"
+                           size="medium" style="margin-top: 20px">上一步</el-button>
+                <el-button type="primary" @click="openInstruction13"
+                           size="medium" style="margin-top: 20px">下一步</el-button>
+            </div>
+        </el-dialog>
+
+        <el-dialog
+                title="第十三步"
+                v-model="instruction13visible"
+                width="30%"
+                top="15%"
+                :modal="false"
+        >
+            <span style="margin-bottom: 20px; line-height: 30px">查看数据广场<br>
+            可进入文件广场，查看并收藏文件<br>可进入模型广场，查看并收藏模型<br>
+            可查看已收藏文件列表，新建配置并使用<br>可查看已收藏模型列表，使用模型</span>
+            <div style="text-align: right">
+                <el-button type="primary" @click="openInstruction12From13"
+                           size="medium" style="margin-top: 20px">上一步</el-button>
+            </div>
+        </el-dialog>
     </div>
 </template>
 <script>
-import { computed, onMounted } from "vue";
+import { ref, computed, onMounted } from "vue";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 export default {
@@ -56,20 +267,224 @@ export default {
         // 用户名下拉菜单选择事件
         const router = useRouter();
         const handleCommand = (command) => {
-            if (command == "loginout") {
+            if (command === "loginout") {
                 localStorage.removeItem("ms_username");
                 router.push("/login");
-            } else if (command == "user") {
-                router.push("/user");
             }
         };
 
+        let instruction1visible = ref(false);
+        let instruction2visible = ref(false);
+        let instruction3visible = ref(false);
+        let instruction4visible = ref(false);
+        let instruction5visible = ref(false);
+        let instruction6visible = ref(false);
+        let instruction7visible = ref(false);
+        let instruction8visible = ref(false);
+        let instruction9visible = ref(false);
+        let instruction10visible = ref(false);
+        let instruction11visible = ref(false);
+        let instruction12visible = ref(false);
+        let instruction13visible = ref(false);
+
+        //0
+        const openInstruction1=()=>{
+            router.push("/fileList");
+            instruction1visible.value = true;
+        };
+
+        //1
+        const openInstruction2=()=>{
+            instruction1visible.value = false;
+            router.push("/fileDetail?fileId=0");
+            instruction2visible.value = true;
+        };
+
+        //2
+        const openInstruction1From2=()=>{
+            instruction2visible.value = false;
+            router.push("/fileList");
+            instruction1visible.value = true;
+        };
+        const openInstruction3=()=>{
+            instruction2visible.value = false;
+            router.push("/config");
+            instruction3visible.value = true;
+        };
+
+        //3
+        const openInstruction2From3=()=>{
+            instruction3visible.value = false;
+            router.push("/fileDetail?fileId=0");
+            instruction2visible.value = true;
+        };
+        const openInstruction4=()=>{
+            instruction3visible.value = false;
+            router.push("/ConfigDetail?configId=0");
+            instruction4visible.value = true;
+        };
+
+        //4
+        const openInstruction3From4=()=>{
+            instruction4visible.value = false;
+            router.push("/config");
+            instruction3visible.value = true;
+        };
+        const openInstruction5=()=>{
+            instruction4visible.value = false;
+            router.push("/modelList");
+            instruction5visible.value = true;
+            console.log(instruction5visible.value)
+        };
+
+        //5
+        const openInstruction4From5=()=>{
+            instruction5visible.value = false;
+            router.push("/ConfigDetail?configId=0");
+            instruction4visible.value = true;
+        };
+        const openInstruction6=()=>{
+            instruction5visible.value = false;
+            router.push("/predictionList?modelId=0");
+            instruction6visible.value = true;
+        };
+
+        //6
+        const openInstruction5From6=()=>{
+            instruction6visible.value = false;
+            router.push("/modelList");
+            instruction5visible.value = true;
+        };
+        const openInstruction7=()=>{
+            instruction6visible.value = false;
+            router.push("/Deployment");
+            instruction7visible.value = true;
+        };
+
+        //7
+        const openInstruction6From7=()=>{
+            instruction7visible.value = false;
+            router.push("/predictionList?modelId=0");
+            instruction6visible.value = true;
+        };
+        const openInstruction8=()=>{
+            instruction7visible.value = false;
+            router.push("/mlPipeline");
+            instruction8visible.value = true;
+        };
+
+        //8
+        const openInstruction7From8=()=>{
+            instruction8visible.value = false;
+            router.push("/Deployment");
+            instruction7visible.value = true;
+        };
+        const openInstruction9=()=>{
+            instruction8visible.value = false;
+            router.push("/analysisConfig");
+            instruction9visible.value = true;
+        };
+
+        //9
+        const openInstruction8From9=()=>{
+            instruction9visible.value = false;
+            router.push("/mlPipeline");
+            instruction8visible.value = true;
+        };
+        const openInstruction10=()=>{
+            instruction9visible.value = false;
+            router.push("/analysisConfigDetail?configId=0");
+            instruction10visible.value = true;
+        };
+
+        //10
+        const openInstruction9From10=()=>{
+            instruction10visible.value = false;
+            router.push("/analysisConfig");
+            instruction9visible.value = true;
+        };
+        const openInstruction11=()=>{
+            instruction10visible.value = false;
+            router.push("/analysis");
+            instruction11visible.value = true;
+        };
+
+        //11
+        const openInstruction10From11=()=>{
+            instruction11visible.value = false;
+            router.push("/analysisConfigDetail?configId=0");
+            instruction10visible.value = true;
+        };
+        const openInstruction12=()=>{
+            instruction11visible.value = false;
+            router.push("/analysisPipeline");
+            instruction12visible.value = true;
+        };
+
+        //12
+        const openInstruction11From12=()=>{
+            instruction12visible.value = false;
+            router.push("/analysis");
+            instruction11visible.value = true;
+        };
+        const openInstruction13=()=>{
+            instruction12visible.value = false;
+            router.push("/square");
+            instruction13visible.value = true;
+        };
+
+        //13
+        const openInstruction12From13=()=>{
+            instruction13visible.value = false;
+            router.push("/analysisPipeline");
+            instruction12visible.value = true;
+        };
+
         return {
             username,
             message,
             collapse,
             collapseChage,
             handleCommand,
+
+            instruction1visible,
+            instruction2visible,
+            instruction3visible,
+            instruction4visible,
+            instruction5visible,
+            instruction6visible,
+            instruction7visible,
+            instruction8visible,
+            instruction9visible,
+            instruction10visible,
+            instruction11visible,
+            instruction12visible,
+            instruction13visible,
+            openInstruction1,
+            openInstruction2,
+            openInstruction1From2,
+            openInstruction3,
+            openInstruction2From3,
+            openInstruction4,
+            openInstruction3From4,
+            openInstruction5,
+            openInstruction4From5,
+            openInstruction6,
+            openInstruction5From6,
+            openInstruction7,
+            openInstruction6From7,
+            openInstruction8,
+            openInstruction7From8,
+            openInstruction9,
+            openInstruction8From9,
+            openInstruction10,
+            openInstruction9From10,
+            openInstruction11,
+            openInstruction10From11,
+            openInstruction12,
+            openInstruction11From12,
+            openInstruction13,
+            openInstruction12From13,
         };
     },
 };
@@ -81,19 +496,30 @@ export default {
     width: 100%;
     height: 70px;
     font-size: 30px;
-    color: #fff;
-  background-color: #000000;
+    color: #000000;
+    background-color: #fff;
+    font-weight: bold;
 }
 .collapse-btn {
     float: left;
     padding: 0 21px;
     cursor: pointer;
     line-height: 70px;
+    background-color: #ffffff;
+
 }
+
+.user-avator img {
+    float: left;
+    width: 50px;
+    margin-top: 15px;
+}
+
 .header .logo {
     float: left;
     width: 250px;
     line-height: 70px;
+    margin-left: 15px;
 }
 .header-right {
     float: right;
@@ -136,15 +562,9 @@ export default {
 .user-avator {
     margin-left: 20px;
 }
-.user-avator img {
-    display: block;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    margin-right: 10px;
-}
+
 .el-dropdown-link {
-    color: #fff;
+    color: #606266;
     cursor: pointer;
 }
 .el-dropdown-menu__item {

src/components/Sidebar.vue

@@ -4,13 +4,9 @@
             class="sidebar-el-menu"
             :default-active="onRoutes"
             :collapse="collapse"
-            background-color="#000000"
-            text-color="#bfcbd9"
-            active-text-color="#20a0ff"
             unique-opened
             router
         >
-
             <template v-for="item in items">
                 <template v-if="item.subs">
                     <el-submenu :index="item.index" :key="item.index">
@@ -58,14 +54,14 @@ export default {
                 title: "配置",
                 index: 1,
                 subs: [
-                    {
-                        index: "/analysisConfig",
-                        title: "数据统计配置",
-                    },
                     {
                         index: "/config",
                         title: "AI模型配置"
                     },
+                    {
+                        index: "/analysisConfig",
+                        title: "数据统计配置",
+                    },
                 ]
             },
 

src/router/index.js

@@ -122,7 +122,23 @@ const routes = [
                 meta: {
                     title: '数据广场'
                 },
-                component: () => import ( /* webpackChunkName: "upload" */ "../views/Square.vue")
+                component: () => import ( /* webpackChunkName: "upload" */ "../views/square/Square.vue")
+            },
+            {
+                path: "/shareFileDetail",
+                name: "shareFileDetail",
+                meta: {
+                    title: '共享文件详情'
+                },
+                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/square/ShareFileDetail.vue")
+            },
+            {
+                path: "/collectFileDetail",
+                name: "collectFileDetail",
+                meta: {
+                    title: '收藏文件详情'
+                },
+                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/square/CollectFileDetail.vue")
             },
             {
                 path:'/ConfigDetail',

src/views/Square.vue

@@ -1,321 +0,0 @@
-<template>
-    <div>
-        <div class="crumbs">
-            <el-breadcrumb separator="/">
-                <el-breadcrumb-item><i class="el-icon-office-building"></i> 数据广场</el-breadcrumb-item>
-            </el-breadcrumb>
-        </div>
-
-        <el-tabs type="border-card" class="main">
-            <el-tab-pane label="文件广场">
-                <div v-for="index in sharedFileList" :key="index.id">
-                    <el-card shadow="hover"
-                             style="margin-bottom: 10px; border-radius: 5px; border-color: #606266; color: #606266">
-                        <el-row style="align-items: center">
-                            <el-col :span="12">
-                                <div>
-                                    <span style="font-size: 18px; font-weight: bold">{{ index.fileName }}</span>
-                                </div>
-                                <div style="align-items: center">
-                                    <div style="font-size: 5px; float: left; margin-top: 10px; margin-bottom: 10px">
-                                        <i class="el-icon-thumb"></i>
-                                        {{ index.fileUri }}
-                                        <i class="el-icon-user" style="margin-left: 5px"></i>
-                                        {{ index.userId }}
-                                        <i class="el-icon-time" style="margin-left: 5px"></i>
-                                        {{ index.uploadTime }}
-                                    </div>
-                                </div>
-                            </el-col>
-                            <el-col :span="12" style="text-align: right">
-                                <el-button style="margin-left: 10px" type="warning" size="small" @click="handleCollectFile(index.id)"
-                                >收藏文件
-                                </el-button>
-                            </el-col>
-                        </el-row>
-                        <el-table :data="index.fileFieldList" border size="small">
-                            <el-table-column label="序号">
-                                <template #default="scope">{{ scope.row.id}}</template>
-                            </el-table-column>
-                            <el-table-column label="字段名">
-                                <template #default="scope">{{ scope.row.fieldName}}</template>
-                            </el-table-column>
-                            <el-table-column label="空值率">
-                                <template #default="scope">{{ scope.row.nullRate }}</template>
-                            </el-table-column>
-                            <el-table-column label="数据类型">
-                                <template #default="scope">{{ scope.row.dataType }}</template>
-                            </el-table-column>
-                            <el-table-column label="众数">
-                                <template #default="scope">{{ scope.row.majority }}</template>
-                            </el-table-column>
-                        </el-table>
-                    </el-card>
-                </div>
-            </el-tab-pane>
-
-            <el-tab-pane label="模型广场">
-                <div v-for="index in sharedModelList" :key="index.id">
-                    <el-card shadow="hover"
-                             style="margin-bottom: 10px; border-radius: 5px; border-color: #606266; color: #606266">
-                        <el-row style="align-items: center">
-                            <el-col :span="12">
-                                <div>
-                                    <span style="font-size: 18px; font-weight: bold">{{ index.modelName }}</span>
-                                </div>
-                                <div style="align-items: center">
-                                    <div style="font-size: 5px; float: left; margin-top: 10px; margin-bottom: 10px">
-                                        <i class="el-icon-thumb"></i>
-                                        {{ index.modelUri }}
-                                        <i class="el-icon-user" style="margin-left: 5px"></i>
-                                        {{ index.userId }}
-                                    </div>
-                                </div>
-                            </el-col>
-                            <el-col :span="12" style="text-align: right">
-                                <el-button style="margin-left: 10px" type="warning" size="small" @click="handleCollectModel(index.id)"
-                                >收藏模型
-                                </el-button>
-                            </el-col>
-                        </el-row>
-                        <el-descriptions border size="small" :column="2">
-                            <el-descriptions-item label="配置名">{{index.configId}}</el-descriptions-item>
-                            <el-descriptions-item label="机器学习算法">{{index.machineLearningAlgorithm}}</el-descriptions-item>
-                            <el-descriptions-item label="训练参数">{{transTrainParams(index.trainParams)}}</el-descriptions-item>
-                            <el-descriptions-item label="训练状态">{{index.trainingState}}</el-descriptions-item>
-                            <el-descriptions-item label="训练结果">{{transTrainParams(index.trainResultMap)}}</el-descriptions-item>
-                        </el-descriptions>
-                    </el-card>
-                </div>
-            </el-tab-pane>
-
-            <el-tab-pane label="已收藏文件">
-                <div v-for="index in collectFileList" :key="index.id">
-                    <el-card shadow="hover"
-                             style="margin-bottom: 10px; border-radius: 5px; border-color: #606266; color: #606266">
-                        <el-row style="align-items: center">
-                            <el-col :span="12">
-                                <div>
-                                    <span style="font-size: 18px; font-weight: bold">{{ index.fileName }}</span>
-                                </div>
-                                <div style="align-items: center">
-                                    <div style="font-size: 5px; float: left; margin-top: 10px; margin-bottom: 10px">
-                                        <i class="el-icon-thumb"></i>
-                                        {{ index.fileUri }}
-                                        <i class="el-icon-user" style="margin-left: 5px"></i>
-                                        {{ index.userId }}
-                                        <i class="el-icon-time" style="margin-left: 5px"></i>
-                                        {{ index.uploadTime }}
-                                    </div>
-                                </div>
-                            </el-col>
-                            <el-col :span="12" style="text-align: right">
-                            </el-col>
-                        </el-row>
-                        <el-table :data="index.fileFieldList" border size="small">
-                            <el-table-column label="序号">
-                                <template #default="scope">{{ scope.row.id}}</template>
-                            </el-table-column>
-                            <el-table-column label="字段名">
-                                <template #default="scope">{{ scope.row.fieldName}}</template>
-                            </el-table-column>
-                            <el-table-column label="空值率">
-                                <template #default="scope">{{ scope.row.nullRate }}</template>
-                            </el-table-column>
-                            <el-table-column label="数据类型">
-                                <template #default="scope">{{ scope.row.dataType }}</template>
-                            </el-table-column>
-                            <el-table-column label="众数">
-                                <template #default="scope">{{ scope.row.majority }}</template>
-                            </el-table-column>
-                        </el-table>
-                    </el-card>
-                </div>
-            </el-tab-pane>
-
-            <el-tab-pane label="已收藏模型">
-                <div v-for="index in collectModelList" :key="index.id">
-                    <el-card shadow="hover"
-                             style="margin-bottom: 10px; border-radius: 5px; border-color: #606266; color: #606266">
-                        <el-row style="align-items: center">
-                            <el-col :span="12">
-                                <div>
-                                    <span style="font-size: 18px; font-weight: bold">{{ index.modelName }}</span>
-                                </div>
-                                <div style="align-items: center">
-                                    <div style="font-size: 5px; float: left; margin-top: 10px; margin-bottom: 10px">
-                                        <i class="el-icon-thumb"></i>
-                                        {{ index.modelUri }}
-                                        <i class="el-icon-user" style="margin-left: 5px"></i>
-                                        {{ index.userId }}
-                                    </div>
-                                </div>
-                            </el-col>
-                            <el-col :span="12" style="text-align: right">
-                            </el-col>
-                        </el-row>
-                        <el-descriptions border size="small" :column="2">
-                            <el-descriptions-item label="配置名">{{index.configId}}</el-descriptions-item>
-                            <el-descriptions-item label="机器学习算法">{{index.machineLearningAlgorithm}}</el-descriptions-item>
-                            <el-descriptions-item label="训练参数">{{transTrainParams(index.trainParams)}}</el-descriptions-item>
-                            <el-descriptions-item label="训练状态">{{index.trainingState}}</el-descriptions-item>
-                            <el-descriptions-item label="训练结果">{{transTrainParams(index.trainResultMap)}}</el-descriptions-item>
-                        </el-descriptions>
-                    </el-card>
-                </div>
-            </el-tab-pane>
-        </el-tabs>
-    </div>
-</template>
-
-<script>
-    import {sharedFileList, sharedModelList} from "../api/square";
-
-    export default {
-        name: "newSquare",
-
-        mounted() {
-            this.getSharedFileList();
-            this.getSharedModelList();
-        },
-
-        data() {
-            return {
-                sharedFileList: [
-                    {
-                        id: 1,
-                        fileName: '123',
-                        uploadTime: '2023/4/19',
-                        userId: 1,
-                        fileUri: 'http://www.ai.com',
-                        fileFieldList: [
-                            {
-                                id: 1,
-                                fieldName: '1',
-                                nullRate: '2%',
-                                majority: '1',
-                                dataType: 'Number',
-                            }
-                        ]
-                    }
-                ],
-
-                sharedModelList: [
-                    {
-                        id: 1,
-                        modelName: 'abc',
-                        userId: 1,
-                        modelUri: 'http://www.ai.com',
-                        configId: 1,
-                        machineLearningAlgorithm: 'DECISION_TREE_CLASSIFICATION',
-                        trainParams: [
-                            {
-                                key: 'abc',
-                                value: 'int'
-                            },
-                            {
-                                key: 'abc1',
-                                value: 'int1'
-                            }
-                        ],
-                        trainingState: '未训练',
-                        trainResultMap: [
-                            {
-                                key: 'abc',
-                                value: 'int'
-                            }
-                        ],
-                    }
-                ],
-
-                collectFileList: [
-                    {
-                        id: 1,
-                        fileName: '123',
-                        uploadTime: '2023/4/19',
-                        userId: 1,
-                        fileUri: 'http://www.ai.com',
-                        fileFieldList: [
-                            {
-                                id: 1,
-                                fieldName: '1',
-                                nullRate: '2%',
-                                dataType: 'Number',
-                            }
-                        ]
-                    }
-                ],
-
-                collectModelList: [
-                    {
-                        id: 1,
-                        modelName: 'abc',
-                        userId: 1,
-                        modelUri: 'http://www.ai.com',
-                        configId: 1,
-                        machineLearningAlgorithm: 'DECISION_TREE_CLASSIFICATION',
-                        trainParams: [
-                            {
-                                key: 'abc',
-                                value: 'int'
-                            },
-                            {
-                                key: 'abc1',
-                                value: 'int1'
-                            }
-                        ],
-                        trainingState: '未训练',
-                        trainResultMap: [
-                            {
-                                key: 'abc',
-                                value: 'int'
-                            }
-                        ],
-                    }
-                ],
-            };
-        },
-
-        methods: {
-            getSharedFileList() {
-                sharedFileList({
-                    "userId": localStorage.getItem("userId")
-                }).then(res => {
-                    this.sharedFileList = res.list;
-                })
-            },
-
-            getSharedModelList() {
-                sharedModelList({
-                    "userId": localStorage.getItem("userId")
-                }).then(res => {
-                    this.sharedModelList = res.list;
-                })
-            },
-
-
-
-            handleCollectFile(fileId) {
-
-            },
-            handleCollectModel(fileId) {
-
-            },
-            transTrainParams(trainParams) {
-                let result = '';
-                for (let i of trainParams) {
-                    result += (i.key + ': ' + i.value + ', ');
-                }
-                result = result.substring(0, result.length - 2);
-                return result;
-            }
-
-        }
-    }
-</script>
-
-<style scoped>
-.dialogClass {
-    width: 80%;
-}
-</style>

src/views/analysis/AnalysisConfigDetail.vue

@@ -1,6 +1,5 @@
 <template>
-  <div>
-
+  <div v-if="configIdFlag">
     <div class="crumbs">
       <el-breadcrumb separator="/">
         <el-breadcrumb-item :to="{ path: '/analysisConfig' }">
@@ -29,7 +28,7 @@
       </div>
     </div>
 
-    <el-dialog title="新建统计分析配置" v-model="analysisVisible" width="50%">
+    <el-dialog title="新建统计分析" v-model="analysisVisible" width="50%">
       <el-form label-width="150px" label-position="left">
         <el-form-item label="分析方法：" required>
           <el-select v-model="analysisType" placeholder="请选择" class="handle-select mr10" @change="changeMethodMsg">
@@ -100,6 +99,7 @@ export default {
     let selectConfigCol = ref([]);
     let methodMsg=ref("不同方法仅适用于特定特征字段");
     let selectConfigLen = ref();
+    let configIdFlag=ref(false);
 
 
     let form = reactive({
@@ -125,13 +125,22 @@ export default {
     }
 
     const getData = () => {
-      if(route.query.configId!=null) {
+      if(route.query.configId!=='') {
         getOneAnalysisConfig({configId:route.query.configId}).then(res => {
-          config.value=res.result;
-          fileId.value=res.result.fileId;
-          form.fileInfoId=(String)(fileId.value)
-          selectConfigCol.value=res.result.chosenColumns
-          selectConfigLen.value=res.result.chosenColumns.length
+          if (route.query.configId === '0') {
+            configIdFlag.value = true;
+            config.value={
+              configName: "模板配置名",
+              chosenColumns: '["模板字段1","模板字段2"]'
+            }
+          } else if (res.msg === "成功") {
+            configIdFlag.value = true;
+            config.value=res.result;
+            fileId.value=res.result.fileId;
+            form.fileInfoId=(String)(fileId.value)
+            selectConfigCol.value=res.result.chosenColumns
+            selectConfigLen.value=res.result.chosenColumns.length
+          }
         })
       }
     };
@@ -199,7 +208,8 @@ export default {
       getData,
       startAnalysis,
       changeMethodMsg,
-      analysisGoodResultVisible
+      analysisGoodResultVisible,
+      configIdFlag
     };
   }
 }

src/views/analysis/AnalysisHistory.vue

@@ -40,9 +40,6 @@
     </el-table>
   </div>
 
-
-
-
   <el-dialog v-model="visualizeVisible" title="可视化" @open="open(chart.analysisFunction)" width="700px">
     <el-form :model="chart" width="400px">
       <el-form-item label="分析函数: " >

src/views/analysis/AnalysisPipeline.vue

@@ -14,12 +14,15 @@
           header-cell-class-name="table-header"
       >
         <el-table-column prop="pipelineName" label="流水线名"></el-table-column>
-        <el-table-column prop="analysisFunction" label="分析方法"></el-table-column>
+        <el-table-column prop="analysisFunction" label="分析方法">
+          <template #default="scope">
+            {{handleAlgorithmName(scope.row.analysisFunction)}}
+          </template>
+        </el-table-column>
         <el-table-column prop="chosenColumns" label="选中字段" :show-overflow-tooltip="true"></el-table-column>
         <el-table-column label="操作" width="180" align="center">
           <template #default="scope">
             <el-button type="text" @click="handleUsePipeline(scope.row.id)">使用</el-button>
-            <br/>
             <el-button type="text" class="red" @click="handleDelete(scope.row.id)">删除</el-button>
           </template>
         </el-table-column>
@@ -344,6 +347,20 @@ export default {
       }
     }
 
+    const handleAlgorithmName=(name)=>{
+      if (name === "DATA_DISTRIBUTION") {
+        return "数据分布";
+      } else if (name === "SCATTER_PLOT") {
+        return "散点图";
+      } else if (name === "STATISTICS") {
+        return "数据统计";
+      } else if (name === "SKEWNESS_KURTOSI") {
+        return "偏度-峰度";
+      } else if (name === "PEARSON") {
+        return "皮尔森相关系数";
+      }
+    }
+
     return{
       query,
       pageTotal,
@@ -367,6 +384,7 @@ export default {
       drawChart,
       drawScatter,
       open,
+      handleAlgorithmName
     }
   }
 
@@ -408,4 +426,4 @@ export default {
   width: 40px;
   height: 40px;
 }
-</style>
+</style>

src/views/file/FileDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="fileInfoIdFlag">
     <div class="crumbs">
       <el-breadcrumb separator="/">
         <el-breadcrumb-item  :to="{ path: '/fileList' }">
@@ -122,7 +122,7 @@
 </template>
 
 <script>
-import {ref, reactive} from "vue";
+import {ref, reactive, onMounted} from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import {getFileDescribe, getFileDetail} from "../../api/file";
 import {useRoute}from "vue-router";
@@ -141,7 +141,9 @@ export default {
       pageIndex: 1,
       pageSize: 10,
     });
-    let fileInfoId;
+    const route=useRoute()
+    let fileInfoId = route.query.fileId;
+    let fileInfoIdFlag = ref(false);
     let AnalysisMethodName=["数据分布","散点图","数据统计","偏度-峰度","皮尔森相关系数"];
 
     const tableData = ref([]);
@@ -152,20 +154,43 @@ export default {
     // 获取表格数据
     const getData = () => {
       const route=useRoute()
-      console.log(route.query)
-      if(route.query.fileId!=null) {
+      if(fileInfoId!=='') {
         const payload ={
-          fileInfoId: route.query.fileId,
+          fileInfoId: fileInfoId,
           userId: localStorage.getItem("ms_userId")
         }
         getFileDetail(payload).then(res => {
-          tableData.value = res.result.fileFields;
-          pageTotal.value = tableData.value.length
-          fileInfoId=route.query.fileId
+          if (fileInfoId === '0') {
+            fileInfoIdFlag.value = true;
+            tableData.value = [
+              {
+                dataType: "integer",
+                fieldName: "模板编号",
+                fileInfoId: 1,
+                id: 177,
+                mode: 12,
+                nullRate: 0
+              },
+              {
+                dataType: "integer",
+                fieldName: "模板字段",
+                fileInfoId: 1,
+                id: 177,
+                mode: 12,
+                nullRate: 0
+              }
+            ];
+          }
+          else if (res.msg === "成功") {
+            console.log(res.result.fileFields)
+            tableData.value = res.result.fileFields;
+            pageTotal.value = tableData.value.length;
+            fileInfoId=route.query.fileId;
+            fileInfoIdFlag.value = true;
+          }
         })
       }
     };
-    getData();
 
     // 查询操作
     const handleSearch = () => {
@@ -313,8 +338,14 @@ export default {
       }
     };
 
+    onMounted(()=>{
+      getData();
+    })
+
     return {
       query,
+      fileInfoId,
+      fileInfoIdFlag,
       AnalysisMethodName,
       tableData,
       pageTotal,

src/views/file/FileList.vue

@@ -44,10 +44,23 @@
             width="30%"
             top="30vh"
     >
-      <span>确认要共享该文件到广场吗?</span>
+      <span>确认要共享该文件到广场吗?</span><br>
+      <el-checkbox v-model="checked" style="margin-top: 15px; margin-bottom: 10px">添加答案文件</el-checkbox>
+      <el-form  :model="useform" width="300px" v-if="checked === true">
+        <el-form-item label="选择文件">
+          <el-select v-model="useform.answerFileId" :label-width="120" placeholder="请选择您要使用的文件">
+            <el-option
+                    v-for="item in state.fileList.valueOf()"
+                    :key="item.id"
+                    :label="item.fileName"
+                    :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
       <template #footer>
       <span class="dialog-footer">
-        <el-button @click="shareDialogVisible = false;" size="medium">
+        <el-button @click="shareDialogVisible = false" size="medium">
           再想想
         </el-button>
         <el-button type="warning" @click="shareDialogVisible = false;handleFileShare()" size="medium">
@@ -85,6 +98,7 @@ import {deleteFile, GetAllFile} from "../../api/file";
 import {shareFile} from "../../api/square";
 import {useRouter} from "vue-router";
 import {ElMessage} from "element-plus";
+import {setAnswer} from "../../api/introduction";
 
 export default {
   name: "fileList",
@@ -103,6 +117,12 @@ export default {
     let deleteDialogVisible=ref(false);
     let toDeleteFileId=ref(0);
 
+    let answerFileId=ref(0);
+    let checked=ref(false);
+    let useform = reactive({
+      answerFileId: "",
+    });
+
     //用户Id => 文件列表
     const getFileList=(userId)=>{
       GetAllFile(userId).then(res=>{
@@ -121,7 +141,7 @@ export default {
       router.push({
         path:'fileDetail',
         query:{
-          fileId:fileId,
+          fileId: fileId,
         }
       })
     }
@@ -129,7 +149,6 @@ export default {
     //打开提示确认删除的对话框，将fileId保存下来
     const handleShareDialog = (fileId)=>{
       toShareFileId=fileId;
-      console.log("handleShareDialog:"+fileId)
     }
 
     const handleFileShare = ()=>{
@@ -138,13 +157,23 @@ export default {
         fileId: toShareFileId
       }
       shareFile(payload).then(res=>{
-        console.log(res);
         if(res.msg === '成功'){
-          ElMessage.success("分享成功!")
+          ElMessage.success("分享成功！")
           getFileList(userId);
+          const payload ={
+            origin: toShareFileId,
+            answer: useform.answerFileId
+          };
+          setAnswer(payload).then(res=>{
+            if(res.msg === '成功') {
+              ElMessage.success("答案文件设置成功！")
+            } else{
+              ElMessage.error("答案文件设置失败！错误码:"+res.status)
+            }
+          })
         }
         else{
-          ElMessage.error("分享失败!错误码:"+res.status)
+          ElMessage.error("分享失败！错误码:"+res.status)
         }
       })
     }
@@ -190,6 +219,10 @@ export default {
       handleFileShare,
       handleFileDelete,
       getFileList,
+
+      answerFileId,
+      checked,
+      useform,
     };
   },
 };

src/views/ml/ConfigDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="configIdFlag">
     <div class="crumbs">
       <el-breadcrumb separator="/">
         <el-breadcrumb-item :to="{ path: '/config' }">
@@ -152,6 +152,8 @@ export default {
     const showTrainingDataSetOccupy=ref(false);
     const showNumOfCluster=ref(false);
     const showSeed=ref(false);
+    let configId=route.query.configId;
+    let configIdFlag = ref(false);
 
     let enumList = ref([])
 
@@ -164,32 +166,47 @@ export default {
     // 获取表格数据
 
     const getData = () => {
-      if(route.query.configId!=null) {
+      if(route.query.configId!=='') {
         const payload ={
           configId: route.query.configId,
           userId: localStorage.getItem("ms_userId")
         }
         getOneConfig(payload).then(res => {
-          config.value=res.result;
-          tableData.value = res.result.features;
-          getEnum().then(resEnum=>{
-            if (res.result.learningType === 'SUPERVISED_LEARNING'){
-              const tempArr = resEnum.result[0]
-              for (let j =0; j<tempArr.machineLearningAlgorithmTypeEnum.length;j++){
-                for (let k =0; k<tempArr.machineLearningAlgorithmTypeEnum[j].machineLearningAlgorithmEnums.length;k++){
-                  enumList.value.push(tempArr.machineLearningAlgorithmTypeEnum[j].machineLearningAlgorithmEnums[k])
+          if (configId === '0') {
+            configIdFlag.value = true;
+            config.value={
+              learningType: "SUPERVISED_LEARNING",
+              features:{
+                0:"模板字段1",
+                1:"模板字段2"
+              },
+              label:"模板字段2"
+            }
+            console.log(config.value)
+          } else if (res.msg === "成功") {
+            configIdFlag.value = true;
+            console.log(res.result)
+            config.value=res.result;
+            tableData.value = res.result.features;
+            getEnum().then(resEnum=>{
+              if (res.result.learningType === 'SUPERVISED_LEARNING'){
+                const tempArr = resEnum.result[0]
+                for (let j =0; j<tempArr.machineLearningAlgorithmTypeEnum.length;j++){
+                  for (let k =0; k<tempArr.machineLearningAlgorithmTypeEnum[j].machineLearningAlgorithmEnums.length;k++){
+                    enumList.value.push(tempArr.machineLearningAlgorithmTypeEnum[j].machineLearningAlgorithmEnums[k])
+                  }
                 }
               }
-            }
-            else {
-              const tempArr = resEnum.result[1]
-              for (let j =0; j<tempArr.machineLearningAlgorithmTypeEnum.length;j++){
-                for (let k =0; k<tempArr.machineLearningAlgorithmTypeEnum[j].machineLearningAlgorithmEnums.length;k++){
-                  enumList.value.push(tempArr.machineLearningAlgorithmTypeEnum[j].machineLearningAlgorithmEnums[k])
+              else {
+                const tempArr = resEnum.result[1]
+                for (let j =0; j<tempArr.machineLearningAlgorithmTypeEnum.length;j++){
+                  for (let k =0; k<tempArr.machineLearningAlgorithmTypeEnum[j].machineLearningAlgorithmEnums.length;k++){
+                    enumList.value.push(tempArr.machineLearningAlgorithmTypeEnum[j].machineLearningAlgorithmEnums[k])
+                  }
                 }
               }
-            }
-          })
+            })
+          }
         })
         const payloadModel={
           configId:route.query.configId,
@@ -311,6 +328,8 @@ export default {
       editVisible,
       form,
       fileId,
+      configId,
+      configIdFlag,
       showMaxIter,
       enumList,
       saveModel,

src/views/ml/ModelList.vue

@@ -47,7 +47,7 @@
               <el-button type="text" class="orange" @click="handlePreList(scope.row.id)">查看预测结果</el-button>
             </div>
             <div v-else>
-              <el-button type="text" style="color: gray">查看预测结果</el-button>
+              <el-button type="text" style="color: gray" disabled>查看预测结果</el-button>
             </div>
           </template>
         </el-table-column>
@@ -60,7 +60,7 @@
               </el-button>
             </div>
             <div v-else>
-              <el-button type="text" style="color: gray">暂未成功训练</el-button>
+              <el-button type="text" style="color: gray" disabled>暂未成功训练</el-button>
             </div>
             <el-button type="text" class="yellow" @click="handleShare(scope.$index, scope.row)">分享</el-button>
             <el-button type="text" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
@@ -163,7 +163,7 @@ import {useRoute, useRouter} from "vue-router";
 import {deleteModel} from "../../api/model";
 import {getOneConfig} from "../../api/config";
 import {addPipeline} from "../../api/pipeline";
-import {shareModel} from "../../api/square";
+import {getCollectFileList, shareModel} from "../../api/square";
 
 export default {
   name: "model",
@@ -247,7 +247,10 @@ export default {
     const getpage=()=> {
       const userId=localStorage.getItem("ms_userId");
       GetAllFile(userId).then(res=>{
-        fileList.value=res.result;
+        let myfile = res;
+        getCollectFileList(userId).then(res=>{
+          fileList.value = myfile.result.concat(res.result);
+        })
       })
       getAllModel({
          userId: userId
@@ -387,11 +390,11 @@ export default {
        }
       useModelVisible.value=false;
        let payload={
-        modelId:usemodelId.value,
+         modelId:usemodelId.value,
          fileInfoId:fileId,
          userId: localStorage.getItem("ms_userId"),
        }
-       console.log(payload.fileInfoId )
+       console.log(payload.fileInfoId)
        ElMessageBox( {
          title: "确定要预测吗？",
          showCancelButton: true,
@@ -436,22 +439,21 @@ export default {
       ElMessageBox.confirm("确定要分享到广场吗？", "提示", {
         type: "warning",
       })
-              .then(() => {
-                // ElMessage.success("删除成功");
-                // tableData.value.splice(index, 1);
-                console.log("分享");
-                let idx=tableData.value[index].modelId;
-                console.log(idx);
-                shareModel(idx
-                ).then(res=>{
-                  //console.log("deleteres",res);
-                  if(res.status===200){
-                    location.reload();
-                  }
-                });
+        .then(() => {
+          const payload ={
+            userId: localStorage.getItem("ms_userId"),
+            modelId: tableData.value[index].id
+          }
+          shareModel(payload).then(res=>{
+            if(res.msg === '成功'){
+              ElMessage.success("分享成功!")
+            } else {
+              ElMessage.error("分享失败!错误码:"+res.status)
+            }
+          });
 
-              })
-              .catch(() => {});
+        })
+        .catch(() => {});
     };
 
 
@@ -579,6 +581,7 @@ export default {
       handleTrain,
       editUseModel,
       useModel,
+      handleShare,
       handleDelete,
       handleSelectionChange,
       handleBatchDelete,

src/views/ml/PredictionAll.vue

@@ -44,12 +44,13 @@
         <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"
+              <el-button type="text" style="color: #67C23A"
                          @click="handleDownload(scope.row.predictionFileDownloadingUri)">下载
               </el-button>
+              <el-button @click="handleCheckAnswer(scope.row.id)" type="text">分数审核</el-button>
             </div>
             <div v-else>
-              还未预测成功
+              尚未预测成功
             </div>
           </template>
         </el-table-column>
@@ -96,6 +97,8 @@
 import {ref} from "vue";
 import { getPredictionAll} from "../../api/prediction";
 import {downloadFile} from "../../api/utils";
+import {checkAnswer} from "../../api/introduction";
+import {ElMessage, ElMessageBox} from "element-plus";
 
 export default {
   name: "PredictionAll",
@@ -134,6 +137,7 @@ export default {
         userId: localStorage.getItem("ms_userId")
       }
       getPredictionAll(payload).then(res => {
+        console.log(res)
         tableData.value=res.result;
       })
     }
@@ -170,6 +174,25 @@ export default {
           }, 0);
         }
       })
+    };
+
+    const handleCheckAnswer=(predictionId)=>{
+      console.log(predictionId)
+      const payload = {
+        predictionId: predictionId
+      };
+      checkAnswer(payload).then(res=>{
+        if(res.msg === '成功') {
+          ElMessageBox( {
+            title: "分析结果",
+            message: '你的分数是：'+res.result+' 分',
+            confirmButtonText: '确定',
+          });
+          return res.result;
+        } else{
+          ElMessage.error("分数计算失败！错误码:"+res.status)
+        }
+      })
     }
 
     return {
@@ -183,6 +206,7 @@ export default {
       getPage,
       handleDownload,
       download,
+      handleCheckAnswer,
     };
   },
 }
@@ -218,4 +242,4 @@ export default {
   width: 40px;
   height: 40px;
 }
-</style>
+</style>

src/views/ml/PredictionList.vue

@@ -2,6 +2,9 @@
 <div>
   <div class="crumbs">
     <el-breadcrumb separator="/">
+      <el-breadcrumb-item :to="{ path: '/modelList' }">
+        <i class="el-icon-lx-cascades"></i> 模型列表
+      </el-breadcrumb-item>
       <el-breadcrumb-item>
         <i class="el-icon-lx-cascades"></i> 预测结果列表
       </el-breadcrumb-item>
@@ -44,12 +47,13 @@
       <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"
+            <el-button type="text" style="color: #67C23A"
                        @click="handleDownload(scope.row.predictionFileDownloadingUri)">下载
             </el-button>
+            <el-button @click="handleCheckAnswer(scope.row.id)" type="text">分数审核</el-button>
           </div>
           <div v-else>
-            还未预测成功
+            尚未预测成功
           </div>
         </template>
       </el-table-column>
@@ -97,6 +101,8 @@ import {getPrediction} from "../../api/prediction";
 import {useRoute} from "vue-router";
 import {ref} from "vue";
 import {downloadFile} from "../../api/utils";
+import {checkAnswer} from "../../api/introduction";
+import {ElMessage, ElMessageBox} from "element-plus";
 
 export default {
   name: "PredictionList",
@@ -113,8 +119,15 @@ export default {
         userId: localStorage.getItem("ms_userId")
       }
       getPrediction(payload).then(res => {
-        console.log( res.result)
-        tableData.value=res.result;
+        if (route.query.modelId === '0') {
+          tableData.value = [{
+            createdTime: "模板时间",
+            finishTime: "模板时间"
+          }]
+        }else {
+          console.log( res.result)
+          tableData.value=res.result;
+        }
       })
     }
     getPage();
@@ -173,6 +186,25 @@ export default {
       arrValue.push(['...'])
       exampleArr.value = arrValue
       exampleVisible.value = true
+    };
+
+    const handleCheckAnswer=(predictionId)=>{
+      console.log(predictionId)
+      const payload = {
+        predictionId: predictionId
+      };
+      checkAnswer(payload).then(res=>{
+        if(res.msg === '成功') {
+          ElMessageBox( {
+            title: "分析结果",
+            message: '你的分数是：'+res.result+' 分',
+            confirmButtonText: '确定',
+          });
+          return res.result;
+        } else{
+          ElMessage.error("分数计算失败！错误码:"+res.status)
+        }
+      })
     }
 
     return {
@@ -187,6 +219,7 @@ export default {
       getPage,
       handleDownload,
       download,
+      handleCheckAnswer
     };
   },
 }
@@ -222,4 +255,4 @@ export default {
   width: 40px;
   height: 40px;
 }
-</style>
+</style>

src/views/square/CollectFileDetail.vue

@@ -0,0 +1,381 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item  :to="{ path: '/square' }">
+                    <i class="el-icon-lx-file"></i> 数据广场
+                </el-breadcrumb-item>
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-cascades"></i> 收藏文件详情
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <div class="handle-box">
+                <el-button type="success" size="medium" icon="el-icon-plus" @click="handleAnalysis">数据统计配置</el-button>
+
+                <el-button type="primary" size="medium" icon="el-icon-plus" @click="createConfig">AI模型配置</el-button>
+
+                <el-button type="primary" size="medium" @click="handleAnalysisByHand">重新分析</el-button>
+            </div>
+
+            <el-table :data="tableData"
+                      border class="table"
+                      ref="fieldTable"
+                      header-cell-class-name="table-header"
+                      @selection-change="handleSelectChange"
+                      :row-style="tableRowStyle"
+            >
+                <el-table-column width="50" type="selection"></el-table-column>
+                <el-table-column label="序号">
+                    <template #default="scope"><span>{{ scope.$index + 1 }}</span></template>
+                </el-table-column>
+                <el-table-column label="字段名">
+                    <template #default="scope"><span>{{ scope.row.fieldName }}</span></template>
+                </el-table-column>
+                <el-table-column label="取值类型">
+                    <template #default="scope">{{ scope.row.dataType }}</template>
+                </el-table-column>
+                <el-table-column label="空值率">
+                    <template #default="scope">{{ handleNullRate(scope.row.nullRate) }}</template>
+                </el-table-column>
+                <el-table-column label="众数">
+                    <template #default="scope">{{ scope.row.majority }}</template>
+                </el-table-column>
+            </el-table>
+            <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>
+
+        <el-dialog title="新建数据统计配置" v-model="analysisVisible" width="50%">
+            <el-form label-position="left">
+                <el-form-item label="配置名" required>
+                    <el-input v-model="analysisConfName"></el-input>
+                </el-form-item>
+                <el-alert type="info"
+                          show-icon style="line-height: 20px; margin-bottom: 20px">不同方法仅适用于特定特征字段。<br>
+                    皮尔森相关系数需要2个int/double字段，散点图可以传入2个字段，其他的方法只需一个字段。<br>除了数据分布可以传入string字段，其他方法请传入int/double字段。</el-alert>
+            </el-form>
+            <el-table :data="selectData" border class="table" size="small" header-cell-class-name="table-header">
+                <el-table-column label="已选字段名">
+                    <template #default="scope"><span>{{ scope.row.fieldName }}</span></template>
+                </el-table-column>
+                <el-table-column label="字段类型">
+                    <template #default="scope"><span>{{ scope.row.dataType }}</span></template>
+                </el-table-column>
+            </el-table>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="analysisVisible = false" size="medium">再想想</el-button>
+                    <el-button type="primary" @click="createAnalysisConfig()" size="medium">确定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+
+        <el-dialog title="新建AI模型配置" v-model="configCreate" width="50%">
+            <el-form label-width="90px" label-position="left">
+                <el-form-item label="配置名" required>
+                    <el-input v-model="form.name"></el-input>
+                </el-form-item>
+
+                <el-form-item label="模型类别" required>
+                    <el-select v-model="form.type" placeholder="学习类型" class="handle-select mr10">
+                        <el-option key="1" label="监督学习" value="SUPERVISED_LEARNING"></el-option>
+                        <el-option key="2" label="非监督学习" value="UNSUPERVISED_LEARNING"></el-option>
+                    </el-select>
+                    <el-alert type="info" description="您选择的最后一个字段为标签字段" v-if="form.type === 'SUPERVISED_LEARNING'"
+                              show-icon style="height: 40px; margin-top: 10px"></el-alert>
+                    <el-alert type="info" description="没有目标字段,适用于k-means模型" v-if="form.type === 'UNSUPERVISED_LEARNING'"
+                              show-icon style="height: 40px; margin-top: 10px"></el-alert>
+                </el-form-item>
+
+                <el-table :data="selectData" border class="table" header-cell-class-name="table-header" size="small"
+                          v-if="form.type !== 'SUPERVISED_LEARNING'">
+                    <el-table-column label="已选字段名">
+                        <template #default="scope"><span>{{ scope.row.fieldName }}</span></template>
+                    </el-table-column>
+                    <el-table-column label="字段类型">
+                        <template #default="scope"><span>{{ scope.row.dataType }}</span></template>
+                    </el-table-column>
+                </el-table>
+
+                <el-table :data="selectData" border class="table" header-cell-class-name="table-header" size="small"
+                          :row-style="AITableRowStyle" v-if="form.type === 'SUPERVISED_LEARNING'">
+                    <el-table-column label="已选字段名">
+                        <template #default="scope"><span>{{ scope.row.fieldName }}</span></template>
+                    </el-table-column>
+                    <el-table-column label="字段类型">
+                        <template #default="scope"><span>{{ scope.row.dataType }}</span></template>
+                    </el-table-column>
+                </el-table>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="configCreate = false" size="medium">再想想</el-button>
+                    <el-button type="primary" @click="saveConfig" size="medium">确定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+    import {ref, reactive} from "vue";
+    import { ElMessage, ElMessageBox } from "element-plus";
+    import {getFileDescribe, getFileDetail} from "../../api/file";
+    import {useRoute}from "vue-router";
+    import {useRouter}from "vue-router";
+    import {addConfig} from "../../api/config";
+    import {addAnalysisConfig} from "../../api/analysisConfig";
+
+    export default {
+        name: "CollectFileDetail",
+        //训练特征
+        setup() {
+            const router=useRouter();
+            const query = reactive({
+                address: "",
+                name: "",
+                pageIndex: 1,
+                pageSize: 10,
+            });
+            let fileInfoId;
+            let AnalysisMethodName=["数据分布","散点图","数据统计","偏度-峰度","皮尔森相关系数"];
+
+            const tableData = ref([]);
+            const selectData = ref([]);
+            let analysisData=reactive([])
+            const pageTotal = ref(0);
+
+            // 获取表格数据
+            const getData = () => {
+                const route=useRoute()
+                console.log(route.query)
+                if(route.query.fileId!=null) {
+                    const payload ={
+                        fileInfoId: route.query.fileId,
+                        userId: localStorage.getItem("ms_userId")
+                    }
+                    getFileDetail(payload).then(res => {
+                        tableData.value = res.result.fileFields;
+                        pageTotal.value = tableData.value.length
+                        fileInfoId=route.query.fileId
+                    })
+                }
+            };
+            getData();
+
+            // 查询操作
+            const handleSearch = () => {
+                query.pageIndex = 1;
+                getData();
+            };
+            // 分页导航
+            const handlePageChange = (val) => {
+                query.pageIndex = val;
+                getData();
+            };
+
+            // 表格编辑时弹窗和保存
+            let analysisVisible = ref(false);
+            let form = reactive({
+                name: "",
+                type: "",
+                needLabel: "",
+            });
+            let analysisConfName = ref();
+
+            const handleAnalysis = () => {
+                if (selectData.value.length<1){
+                    ElMessage.warning("请选择需要的字段！");
+                    return ;
+                }
+                analysisVisible.value = true;
+            };
+            const createAnalysisConfig = () => {
+                const payload={
+                    fileInfoId:selectData.value[0].fileInfoId,
+                    userId: localStorage.getItem("ms_userId"),
+                    configName:analysisConfName.value,
+                    chosenColumns:[],
+                }
+                if(payload.configName === undefined){
+                    ElMessage.warning("请输入配置名！")
+                    return
+                }
+                for(let i=0;i<selectData.value.length;i++){
+                    payload.chosenColumns.push(selectData.value[i].fieldName);
+                }
+                console.log("p"+JSON.stringify(payload))
+                addAnalysisConfig(payload).then(res=>{
+                    console.log("r"+JSON.stringify(res))
+                    if(res.msg === '成功') {
+                        ElMessage.success(`已成功生成数据统计配置`);
+                        analysisVisible.value = false;
+                    }
+                    else ElMessage.error(`生成数据统计配置失败:`+res.msg);
+                })
+            };
+
+            let resultVisible= ref(false);
+            let featureTip=ref(0);
+            let labelTip = ref(0);
+
+            const configCreate = ref(false);
+            const createConfig =() => {
+                if (selectData.value.length<=1){
+                    ElMessage.warning("请选择至少两个字段！若为监督学习，最后选择的字段将作为标签");
+                    return ;
+                }
+                configCreate.value = true;
+            };
+            const saveConfig=()=>{
+                const payload={
+                    fileInfoId:selectData.value[0].fileInfoId,
+                    userId: localStorage.getItem("ms_userId"),
+                    learningType:form.type,
+                    configName:form.name,
+                    features:[],
+                    label: ''
+                }
+                if(payload.configName === "" || payload.learningType === "" ){
+                    ElMessage.warning("请输入必要信息！")
+                    return
+                }
+                if (form.type === 'UNSUPERVISED_LEARNING'){
+                    for(let i=0;i<selectData.value.length;i++){
+                        payload.features.push(selectData.value[i].fieldName);
+                    }
+                }
+                else{
+                    for(let i=0;i<selectData.value.length-1;i++){
+                        payload.features.push(selectData.value[i].fieldName);
+                    }
+                    payload.label = selectData.value[selectData.value.length-1].fieldName
+                }
+                addConfig(payload).then(res=>{
+                    console.log(res)
+                    if(res.msg === '成功') {
+                        ElMessage.success(`已成功生成AI模型配置`);
+                        configCreate.value = false;
+                    }
+                    else ElMessage.error(`生成AI模型配置失败`+res.msg);
+                })
+            }
+
+            let ids=ref([]);
+
+            const handleSelectChange=val=>{
+                selectData.value=val;
+                ids = val.map(item => item.id);
+                //console.log(ids)
+            };
+
+            const handleAnalysisByHand=()=>{
+                ElMessage.warning(`重新分析文件中，请稍候`);
+                const payload ={
+                    fileInfoId: fileInfoId,
+                    userId: localStorage.getItem("ms_userId")
+                }
+                getFileDescribe(payload)
+                    .then(res=>{
+                        ElMessage.success(`已成功重新分析文件`);
+                        setTimeout(() => {
+                            // 方法区
+                            location.reload();
+                        }, 2000);
+
+                    })
+            };
+
+            const handleNullRate=(val)=>{
+                return val + "%";
+            };
+
+            const AITableRowStyle=(row)=> {
+                let rowFont = {};
+                if (row.rowIndex === selectData.value.length - 1) {
+                    rowFont.color = "red";
+                    return rowFont;
+                } else {
+                    return '';
+                }
+            };
+
+            const tableRowStyle=(row)=>{
+                let arr = ids;
+                let rowFont = {};
+                if(row.row.id === arr[arr.length - 1]){
+                    rowFont.color = "red";
+                    return rowFont;
+                }
+            };
+
+            return {
+                query,
+                AnalysisMethodName,
+                tableData,
+                pageTotal,
+                analysisVisible,
+                resultVisible,
+                form,
+                analysisConfName,
+                configCreate,
+                createConfig,
+                saveConfig,
+                selectData,
+                analysisData,
+                featureTip,
+                labelTip,
+                getData,
+                createAnalysisConfig,
+                handleSelectChange,
+                handleSearch,
+                handlePageChange,
+                handleAnalysis,
+                handleNullRate,
+                handleAnalysisByHand,
+                AITableRowStyle,
+
+                ids,
+                tableRowStyle
+            };
+        },
+    };
+
+
+</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: skyblue;
+    }
+    .mr10 {
+        margin-right: 10px;
+    }
+    .table-td-thumb {
+        display: block;
+        margin: auto;
+        width: 40px;
+        height: 40px;
+    }
+
+</style>

src/views/square/ShareFileDetail.vue

@@ -0,0 +1,185 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item  :to="{ path: '/square' }">
+                    <i class="el-icon-lx-file"></i> 数据广场
+                </el-breadcrumb-item>
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-cascades"></i> 共享文件详情
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <el-button type="warning" size="medium"  @click="handleCollect">收藏文件</el-button>
+
+            <el-table :data="tableData"
+                      border class="table"
+                      ref="fieldTable"
+                      header-cell-class-name="table-header"
+                      style="margin-top: 20px"
+            >
+                <el-table-column label="序号">
+                    <template #default="scope"><span>{{ scope.$index + 1 }}</span></template>
+                </el-table-column>
+                <el-table-column label="字段名">
+                    <template #default="scope"><span>{{ scope.row.fieldName }}</span></template>
+                </el-table-column>
+                <el-table-column label="取值类型">
+                    <template #default="scope">{{ scope.row.dataType }}</template>
+                </el-table-column>
+                <el-table-column label="空值率">
+                    <template #default="scope">{{ handleNullRate(scope.row.nullRate) }}</template>
+                </el-table-column>
+                <el-table-column label="众数">
+                    <template #default="scope">{{ scope.row.majority }}</template>
+                </el-table-column>
+            </el-table>
+            <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 {getFileDescribe, getFileDetail} from "../../api/file";
+    import {useRoute}from "vue-router";
+    import {useRouter}from "vue-router";
+    import {collectFile} from "../../api/square";
+
+    export default {
+        name: "ShareFileDetail",
+        //训练特征
+        setup() {
+            const router = useRouter();
+            const query = reactive({
+                address: "",
+                name: "",
+                pageIndex: 1,
+                pageSize: 10,
+            });
+            let fileInfoId;
+            let AnalysisMethodName = ["数据分布", "散点图", "数据统计", "偏度-峰度", "皮尔森相关系数"];
+
+            const tableData = ref([]);
+            const pageTotal = ref(0);
+
+            // 获取表格数据
+            const getData = () => {
+                const route = useRoute()
+                console.log(route.query)
+                if (route.query.fileId != null) {
+                    const payload = {
+                        fileInfoId: route.query.fileId,
+                        userId: localStorage.getItem("ms_userId")
+                    }
+                    getFileDetail(payload).then(res => {
+                        tableData.value = res.result.fileFields;
+                        pageTotal.value = tableData.value.length
+                        fileInfoId = route.query.fileId
+                    })
+                }
+            };
+            getData();
+
+            // 查询操作
+            const handleSearch = () => {
+                query.pageIndex = 1;
+                getData();
+            };
+            // 分页导航
+            const handlePageChange = (val) => {
+                query.pageIndex = val;
+                getData();
+            };
+
+            // 表格编辑时弹窗和保存
+            let analysisVisible = ref(false);
+            let form = reactive({
+                name: "",
+                type: "",
+                needLabel: "",
+            });
+            let analysisConfName = ref();
+
+            let resultVisible = ref(false);
+            let featureTip = ref(0);
+            let labelTip = ref(0);
+
+            const handleNullRate = (val) => {
+                return val + "%";
+            };
+
+            const route = useRoute();
+            const handleCollect = () => {
+                const payload = {
+                    userId: localStorage.getItem("ms_userId"),
+                    fileId: route.query.fileId,
+                };
+                collectFile(payload).then(res => {
+                    if (res.msg === "成功") {
+                        ElMessage.success("已成功收藏文件！");
+                    } else {
+                        ElMessage.error("收藏文件失败！" + res.msg);
+                    }
+                })
+            }
+
+            return {
+                query,
+                route,
+                AnalysisMethodName,
+                tableData,
+                pageTotal,
+                analysisVisible,
+                resultVisible,
+                form,
+                analysisConfName,
+                featureTip,
+                labelTip,
+                getData,
+
+                handleSearch,
+                handlePageChange,
+                handleNullRate,
+                handleCollect
+            };
+        },
+    }
+</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: skyblue;
+    }
+    .mr10 {
+        margin-right: 10px;
+    }
+    .table-td-thumb {
+        display: block;
+        margin: auto;
+        width: 40px;
+        height: 40px;
+    }
+
+</style>

src/views/square/Square.vue

@@ -0,0 +1,375 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item><i class="el-icon-office-building"></i> 数据广场</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+
+        <el-tabs type="border-card" class="main">
+            <el-tab-pane label="文件广场">
+                <el-table :data="state.sharedFileList">
+                    <el-table-column label="文件名">
+                        <template #default="scope">
+                            {{scope.row.fileName}}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="发布者">
+                        <template #default="scope">
+                            {{scope.row.username}}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="发布时间">
+                        <template #default="scope">
+                            {{scope.row.uploadTime}}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="文件地址">
+                        <template #default="scope">
+                            {{scope.row.fileUri}}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作">
+                        <template #default="scope">
+                            <el-button type="text" style="margin-right: 10px"
+                                       @click="handleFileDetail(scope.row.id)">查看详情</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-tab-pane>
+
+            <el-tab-pane label="模型广场">
+                <el-table :data="state.sharedModelList">
+                    <el-table-column label="模型名">
+                        <template #default="scope">
+                            {{scope.row.modelName}}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="发布者">
+                        <template #default="scope">
+                            {{scope.row.username}}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="模型地址">
+                        <template #default="scope">
+                            {{scope.row.modelUri}}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="模型算法">
+                        <template #default="scope">{{ handleAlgorithmName(scope.row.machineLearningAlgorithm) }}</template>
+                    </el-table-column>
+                    <el-table-column prop="arguments" label="参数值" :show-overflow-tooltip="true">
+                        <template #default="scope">
+                            <div v-for="(item,index) in scope.row.trainParams" :key="index">{{index}}: {{item}}</div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作">
+                        <template #default="scope">
+                            <el-button type="text" style="margin-right: 10px; color: #e6a23c"
+                                       @click="handleCollectModel(scope.row.id)">收藏</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-tab-pane>
+
+            <el-tab-pane label="已收藏文件">
+                <el-table :data="state.collectFileList">
+                    <el-table-column label="文件名">
+                        <template #default="scope">
+                            {{scope.row.fileName}}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作">
+                        <template #default="scope">
+                            <el-button type="text" style="margin-right: 10px"
+                                       @click="handleCollectFileDetail(scope.row.id)">查看</el-button>
+                            <el-button type="text" style="margin-right: 10px; color: red"
+                                       @click="handleCollectFileDelete(scope.row.id)">删除</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-tab-pane>
+
+            <el-tab-pane label="已收藏模型">
+                <el-table :data="state.collectModelList">
+                    <el-table-column label="模型名">
+                        <template #default="scope">
+                            {{scope.row.modelName}}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="模型算法">
+                        <template #default="scope">{{ handleAlgorithmName(scope.row.machineLearningAlgorithm) }}</template>
+                    </el-table-column>
+                    <el-table-column prop="arguments" label="参数值" :show-overflow-tooltip="true">
+                        <template #default="scope">
+                            <div v-for="(item,index) in scope.row.trainParams" :key="index">{{index}}: {{item}}</div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作">
+                        <template #default="scope">
+                            <el-button type="text" style="margin-right: 10px"
+                                       @click="handleCollectModelUse(scope.row.id)">使用</el-button>
+                            <el-button type="text" style="margin-right: 10px; color: red"
+                                       @click="handleCollectModelDelete(scope.row.id)">删除</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-tab-pane>
+
+            <el-dialog
+                    v-model="useModelVisible"
+                    title="模型使用"
+                    width="30%"
+                    :before-close="handleClose"
+            >
+                <el-form :model="useform" width="300px">
+                    <el-form-item label="选择文件" >
+                        <el-select v-model="useform.file" :label-width="120" placeholder="请选择您要使用的文件">
+                            <el-option
+                                    v-for="item in fileList.valueOf()"
+                                    :key="item.id"
+                                    :label="item.fileName"
+                                    :value="item.id"
+                            />
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="useModelVisible = false">取消</el-button>
+            <el-button type="primary" @click="useModel(useform.file)" style="margin-left: 10px"> 使用模型 </el-button>
+          </span>
+                </template>
+            </el-dialog>
+        </el-tabs>
+    </div>
+</template>
+
+<script>
+    import {reactive, ref, onMounted} from "vue";
+    import {useRouter} from "vue-router";
+    import {
+        collectModel,
+        getCollectFileList, getCollectModelList,
+        getSharedFileList,
+        getSharedModelList
+    } from "../../api/square";
+    import {ElMessage, ElMessageBox} from "element-plus";
+    import {useStore} from "vuex";
+    import {use} from "../../api/prediction";
+    import {GetAllFile} from "../../api/file";
+
+    export default {
+        name: "newSquare",
+        setup() {
+            const ms_username = localStorage.getItem('ms_username');
+            const router = useRouter();
+            let userId = localStorage.getItem("ms_userId");
+
+            let collectModelDialogVisible = false;
+
+            let state = reactive({
+                sharedFileList: [],
+                sharedModelList: [],
+                collectFileList: [],
+                collectModelList: []
+            });
+
+            const handleSharedFileList=()=>{
+                getSharedFileList(userId).then(res => {
+                    state.sharedFileList = res.result;
+                })
+            };
+
+            const handleSharedModelList=()=>{
+                getSharedModelList(userId).then(res => {
+                    console.log(res)
+                    state.sharedModelList = res.result;
+                })
+            };
+
+            const handleCollectFileList=()=>{
+                getCollectFileList(userId).then(res => {
+                    state.collectFileList = res.result;
+                })
+            };
+
+            const handleCollectModelList=()=>{
+                getCollectModelList(userId).then(res => {
+                    state.collectModelList = res.result;
+                });
+                GetAllFile(userId).then(res=>{
+                    let myfile = res;
+                    getCollectFileList(userId).then(res=>{
+                        fileList.value = myfile.result.concat(res.result);
+                    })
+                })
+            };
+
+            const handleCollectModel=(modelId)=>{
+                const payload = {
+                    userId: localStorage.getItem("ms_userId"),
+                    modelId: modelId,
+                };
+                collectModel(payload).then(res => {
+                    if (res.msg === "成功") {
+                        ElMessage.success("已成功收藏模型！");
+                        handleCollectModelList();
+                    } else {
+                        ElMessage.error("收藏模型失败！" + res.msg);
+                    }
+                })
+
+            };
+
+            const handleFileDetail=(fileId)=>{
+                router.push({
+                    path:'shareFileDetail',
+                    query:{
+                        fileId:fileId,
+                    }
+                })
+            };
+
+            const handleCollectFileDetail=(fileId)=>{
+                router.push({
+                    path:'collectFileDetail',
+                    query:{
+                        fileId:fileId,
+                    }
+                })
+            };
+
+            const handleCollectFileDelete=(fileId)=>{
+
+            };
+
+            let fileList=ref();
+            let useform = reactive({
+                file: "",
+            });
+            const useModelVisible = ref(false);
+            const usemodelId=ref();
+
+            const handleCollectModelUse=(modelId)=>{
+                useModelVisible.value=true;
+                usemodelId.value=modelId;
+            };
+
+            const useModel = (fileId) => {
+                if (fileId === ""){
+                    alert("请填写信息！")
+                    return
+                }
+                useModelVisible.value=false;
+                let payload={
+                    modelId:usemodelId.value,
+                    fileInfoId:fileId,
+                    userId: localStorage.getItem("ms_userId"),
+                }
+                console.log(payload.fileInfoId )
+                ElMessageBox( {
+                    title: "确定要预测吗？",
+                    showCancelButton: true,
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    beforeClose: (action, instance, done) => {
+                        if (action === 'confirm') {
+                            instance.confirmButtonLoading = true
+                            instance.confirmButtonText = '预测中...'
+                            use(payload).then(res=>{
+                                instance.confirmButtonLoading = false
+                                console.log("predic_res: ",res);
+                                if (res.msg === '成功')
+                                {
+                                    ElMessage.success("已成功预测，请移至预测结果查看")
+                                    done()
+                                }
+                                else
+                                {
+                                    console.log(res);
+                                    ElMessage.error("预测失败!失败码:"+res.msg);
+                                    done()
+                                }
+                            }).catch(err=>{
+                                console.log(err)
+                            });
+                        } else {
+                            done()
+                        }
+                    },
+                })
+            };
+
+            const handleCollectModelDelete=(modelId)=>{
+
+            };
+
+            const handleAlgorithmName=(name)=>{
+                if (name === "DECISION_TREE_CLASSIFICATION") {
+                    return "决策树分类";
+                } else if (name === "GRADIENT_BOOSTED_TREE_CLASSIFICATION") {
+                    return "梯度提升树分类";
+                } else if (name === "LOGISTIC_REGRESSION_CLASSIFICATION") {
+                    return "对数几率回归分类";
+                } else if (name === "MULTILAYER_PERCEPTRON_CLASSIFICATION") {
+                    return "多层感知器分类";
+                } else if (name === "NAIVE_BAYES_CLASSIFICATION") {
+                    return "朴素贝叶斯分类";
+                } else if (name === "XGBOOST_CLASSIFICATION") {
+                    return "XGBOOST分类";
+                } else if (name === "RANDOM_FOREST_CLASSIFICATION") {
+                    return "随机森林分类";
+                } else if (name === "K_MEANS_CLUSTERING") {
+                    return "K均值聚类";
+                } else if (name === "DECISION_TREE_REGRESSION") {
+                    return "决策树回归算法";
+                } else if (name === "RANDOM_FOREST_REGRESSION") {
+                    return "随机森林回归";
+                }
+            };
+
+            onMounted(()=>{
+                handleSharedFileList(userId);
+                handleSharedModelList(userId);
+                handleCollectFileList(userId);
+                handleCollectModelList(userId);
+            })
+
+            return {
+                ms_username,
+                router,
+                userId,
+                state,
+
+                handleSharedFileList,
+                handleSharedModelList,
+                handleCollectFileList,
+                handleCollectModelList,
+
+                handleFileDetail,
+                handleCollectModel,
+                handleCollectFileDetail,
+                handleCollectFileDelete,
+                handleCollectModelUse,
+                handleCollectModelDelete,
+
+                fileList,
+                useform,
+                useModel,
+                usemodelId,
+                useModelVisible,
+
+                collectModelDialogVisible,
+                handleAlgorithmName
+            }
+
+        },
+    }
+</script>
+
+<style scoped>
+.dialogClass {
+    width: 80%;
+}
+</style>