update：用户交互模块完成

README.md

@@ -1,6 +0,0 @@
-2022.4.20
-1.8个机器学习模型的参数含义
-2.测试返回结果不明，目前只是简单展示（不同模型测试结果还有可能不同，需要进一步优化）
-3.训练结果不同模型不一样，展示方式需改进（目前只是直接展示字符串）
-4.modelList列表的删除功能未完善
-5.查看训练结果需要刷新一下才展示（vue3

src/api/_prefix.js

@@ -1,5 +1,11 @@
 export const API_MODULE = '/api'
+export const NEW_API_MODULE= '/newapi'
 export const MODEL_MODULE=`${API_MODULE}/model`
 export const CONFIG_MODULE = `${API_MODULE}/config`
 export const FILE_MODULE= `${API_MODULE}/file`
 export const PIC_MODULE= `${API_MODULE}/picture`
+export const POST_MODULE=`${NEW_API_MODULE}/posts`
+export const COMMENT_MODULE=`${NEW_API_MODULE}/comment`
+export const MAIL_MODULE=`${NEW_API_MODULE}/mail`
+
+

src/api/comment.js

@@ -0,0 +1,54 @@
+import {COMMENT_MODULE} from "./_prefix";
+
+export const submitComment = payload => {
+    console.log(payload);
+    //id,
+    const {userId, postId, content} = payload;
+
+    // return axios.post(`${COMMENT_MODULE}/create`, {
+    //     userId, postId, content
+    // }).then(res => {
+    //     return res.data;
+    // });
+    return Promise.resolve({
+        "success": true,
+        "message": "success",
+        "object": {}
+    })
+}
+export const getComment = payload => {
+    // console.log("getAllConfig",payload);
+    const {userId} = payload;
+    // return axios.get(`${COMMENT_MODULE}/getComment/{userId}`).then(res => {
+    //     return res.data;
+    // });
+    return Promise.resolve({
+        "success":true,
+        "message":"success",
+        "object": [
+            {
+                "commentId":1,
+                "postId":1,
+                "userId":1,
+                "content":"决策树参数调整至0.8效果获取会更好",
+                "time":"2022.3.15"
+            },
+            {
+                "commentId":1,
+                "postId":1,
+                "userId":1,
+                "content":"试了贴主的配置效果确实不错，点赞！",
+                "time":"2022.3.15"
+            },
+            {
+                "commentId":1,
+                "postId":1,
+                "userId":1,
+                "content":"贴主可以试试把训练测试比调整至0.66",
+                "time":"2022.3.15"
+            }
+        ]
+
+
+    })
+}

src/api/config.js

@@ -31,146 +31,146 @@ export const getAllConfig = payload => {
   const {uid} = payload;
   console.log("payload",payload);
   console.log("uid",uid);
-  return axios.get(`${CONFIG_MODULE}/get/all?userId=${uid}`).then(res => {
-
-    return res.data;
-  });
-  // return Promise.resolve({
-  //   "timestamp": 1649419361037,
-  //   "status": 200,
-  //   "data": [
-  //     {
-  //       "fileId": "1",
-  //       "fileName": "event_data",
-  //       "configId": "1",
-  //       "modelTypeId": "2",
-  //       "modelTypeName": "决策树",
-  //       "confName": "config1",
-  //       "featureList": [
-  //         {
-  //           "id": 105,
-  //           "fileInfoId": 1,
-  //           "fieldName": "road",
-  //           "aliasName": "",
-  //           "fieldDes": "",
-  //           "nullsRatio": 0.0,
-  //           "conOrDis": 0,
-  //           "fieldType": "string",
-  //           "valueInfo": "[\"R\",\"L\"]"
-  //         },
-  //         {
-  //           "id": 106,
-  //           "fileInfoId": 1,
-  //           "fieldName": "lane",
-  //           "aliasName": "",
-  //           "fieldDes": "",
-  //           "nullsRatio": 0.0,
-  //           "conOrDis": 0,
-  //           "fieldType": "string",
-  //           "valueInfo": "[\"r\",\"m\",\"l\"]"
-  //         },
-  //         {
-  //           "id": 107,
-  //           "fileInfoId": 1,
-  //           "fieldName": "vehicle_class",
-  //           "aliasName": "",
-  //           "fieldDes": "",
-  //           "nullsRatio": 0.0,
-  //           "conOrDis": 0,
-  //           "fieldType": "string",
-  //           "valueInfo": "[\"car\",\"truck\",\"bus\"]"
-  //         },
-  //         {
-  //           "id": 110,
-  //           "fileInfoId": 1,
-  //           "fieldName": "duration",
-  //           "aliasName": "",
-  //           "fieldDes": "",
-  //           "nullsRatio": 0.0,
-  //           "conOrDis": 0,
-  //           "fieldType": "string",
-  //           "valueInfo": "[\"48,60\",\"24,36\",\"36,48\",\"12,24\",\"0,12\"]"
-  //         },
-  //         {
-  //           "id": 109,
-  //           "fileInfoId": 1,
-  //           "fieldName": "event_type",
-  //           "aliasName": "",
-  //           "fieldDes": "",
-  //           "nullsRatio": 0.0,
-  //           "conOrDis": 0,
-  //           "fieldType": "string",
-  //           "valueInfo": "[\"cruise\",\"overdrive\"]"
-  //         }
-  //       ]
-  //     },
-  //     {
-  //       "fileId": "1",
-  //       "fileName": "event_data",
-  //       "configId": "3",
-  //       "modelTypeId": "9",
-  //       "modelTypeName": "K-均值",
-  //       "confName": "Kmeans-Test",
-  //       "featureList": [
-  //         {
-  //           "id": 105,
-  //           "fileInfoId": 1,
-  //           "fieldName": "road",
-  //           "aliasName": "",
-  //           "fieldDes": "",
-  //           "nullsRatio": 0.0,
-  //           "conOrDis": 0,
-  //           "fieldType": "string",
-  //           "valueInfo": "[\"R\",\"L\"]"
-  //         },
-  //         {
-  //           "id": 106,
-  //           "fileInfoId": 1,
-  //           "fieldName": "lane",
-  //           "aliasName": "",
-  //           "fieldDes": "",
-  //           "nullsRatio": 0.0,
-  //           "conOrDis": 0,
-  //           "fieldType": "string",
-  //           "valueInfo": "[\"r\",\"m\",\"l\"]"
-  //         },
-  //         {
-  //           "id": 107,
-  //           "fileInfoId": 1,
-  //           "fieldName": "vehicle_class",
-  //           "aliasName": "",
-  //           "fieldDes": "",
-  //           "nullsRatio": 0.0,
-  //           "conOrDis": 0,
-  //           "fieldType": "string",
-  //           "valueInfo": "[\"car\",\"truck\",\"bus\"]"
-  //         },
-  //         {
-  //           "id": 110,
-  //           "fileInfoId": 1,
-  //           "fieldName": "duration",
-  //           "aliasName": "",
-  //           "fieldDes": "",
-  //           "nullsRatio": 0.0,
-  //           "conOrDis": 0,
-  //           "fieldType": "string",
-  //           "valueInfo": "[\"48,60\",\"24,36\",\"36,48\",\"12,24\",\"0,12\"]"
-  //         },
-  //         {
-  //           "id": 109,
-  //           "fileInfoId": 1,
-  //           "fieldName": "event_type",
-  //           "aliasName": "",
-  //           "fieldDes": "",
-  //           "nullsRatio": 0.0,
-  //           "conOrDis": 0,
-  //           "fieldType": "string",
-  //           "valueInfo": "[\"cruise\",\"overdrive\"]"
-  //         }
-  //       ]
-  //     }
-  //   ]
-  // })
+  // return axios.get(`${CONFIG_MODULE}/get/all?userId=${uid}`).then(res => {
+  //
+  //   return res.data;
+  // });
+  return Promise.resolve({
+    "timestamp": 1649419361037,
+    "status": 200,
+    "data": [
+      {
+        "fileId": "1",
+        "fileName": "event_data",
+        "configId": "1",
+        "modelTypeId": "2",
+        "modelTypeName": "决策树",
+        "confName": "config1",
+        "featureList": [
+          {
+            "id": 105,
+            "fileInfoId": 1,
+            "fieldName": "road",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"R\",\"L\"]"
+          },
+          {
+            "id": 106,
+            "fileInfoId": 1,
+            "fieldName": "lane",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"r\",\"m\",\"l\"]"
+          },
+          {
+            "id": 107,
+            "fileInfoId": 1,
+            "fieldName": "vehicle_class",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"car\",\"truck\",\"bus\"]"
+          },
+          {
+            "id": 110,
+            "fileInfoId": 1,
+            "fieldName": "duration",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"48,60\",\"24,36\",\"36,48\",\"12,24\",\"0,12\"]"
+          },
+          {
+            "id": 109,
+            "fileInfoId": 1,
+            "fieldName": "event_type",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"cruise\",\"overdrive\"]"
+          }
+        ]
+      },
+      {
+        "fileId": "1",
+        "fileName": "event_data",
+        "configId": "3",
+        "modelTypeId": "9",
+        "modelTypeName": "K-均值",
+        "confName": "Kmeans-Test",
+        "featureList": [
+          {
+            "id": 105,
+            "fileInfoId": 1,
+            "fieldName": "road",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"R\",\"L\"]"
+          },
+          {
+            "id": 106,
+            "fileInfoId": 1,
+            "fieldName": "lane",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"r\",\"m\",\"l\"]"
+          },
+          {
+            "id": 107,
+            "fileInfoId": 1,
+            "fieldName": "vehicle_class",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"car\",\"truck\",\"bus\"]"
+          },
+          {
+            "id": 110,
+            "fileInfoId": 1,
+            "fieldName": "duration",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"48,60\",\"24,36\",\"36,48\",\"12,24\",\"0,12\"]"
+          },
+          {
+            "id": 109,
+            "fileInfoId": 1,
+            "fieldName": "event_type",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"cruise\",\"overdrive\"]"
+          }
+        ]
+      }
+    ]
+  })
 }
 
 //   console.log("uid",uid);
@@ -257,94 +257,94 @@ export const getOneConfig = payload => {
   const { configId } = payload;
   console.log("configId",configId);
   console.log("payload",payload);
-  return axios.get(`${CONFIG_MODULE}/get/one/config?configId=${configId}`).then(res => {
-
-    return res.data;});
-    // return Promise.resolve({
-    //   "timestamp": 1649473724362,
-    //   "status": 200,
-    //   "data": {
-    //     "configId": "1",
-    //     "modelTypeId": "6",
-    //     "modelTypeName": "多层感知器分类器",
-    //     "modelDes": "",
-    //     "modelDetileDes": "",
-    //     "featureList": [
-    //       {
-    //         "id": 105,
-    //         "fileInfoId": 1,
-    //         "fieldName": "road",
-    //         "aliasName": "",
-    //         "fieldDes": "",
-    //         "nullsRatio": 0.0,
-    //         "conOrDis": 0,
-    //         "fieldType": "string",
-    //         "valueInfo": "[\"R\",\"L\"]"
-    //       },
-    //       {
-    //         "id": 106,
-    //         "fileInfoId": 1,
-    //         "fieldName": "lane",
-    //         "aliasName": "",
-    //         "fieldDes": "",
-    //         "nullsRatio": 0.0,
-    //         "conOrDis": 0,
-    //         "fieldType": "string",
-    //         "valueInfo": "[\"r\",\"m\",\"l\"]"
-    //       },
-    //       {
-    //         "id": 107,
-    //         "fileInfoId": 1,
-    //         "fieldName": "vehicle_class",
-    //         "aliasName": "",
-    //         "fieldDes": "",
-    //         "nullsRatio": 0.0,
-    //         "conOrDis": 0,
-    //         "fieldType": "string",
-    //         "valueInfo": "[\"car\",\"truck\",\"bus\"]"
-    //       },
-    //       {
-    //         "id": 110,
-    //         "fileInfoId": 1,
-    //         "fieldName": "duration",
-    //         "aliasName": "",
-    //         "fieldDes": "",
-    //         "nullsRatio": 0.0,
-    //         "conOrDis": 0,
-    //         "fieldType": "string",
-    //         "valueInfo": "[\"48,60\",\"24,36\",\"36,48\",\"12,24\",\"0,12\"]"
-    //       },
-    //       {
-    //         "id": 109,
-    //         "fileInfoId": 1,
-    //         "fieldName": "event_type",
-    //         "aliasName": "",
-    //         "fieldDes": "",
-    //         "nullsRatio": 0.0,
-    //         "conOrDis": 0,
-    //         "fieldType": "string",
-    //         "valueInfo": "[\"cruise\",\"overdrive\"]"
-    //       }
-    //     ],
-    //     "modelInfos": [
-    //       {
-    //         "modelName": "event_data",
-    //         "modelDetailName": "DecisionTree",
-    //         "trainedStatus": 1
-    //       },
-    //       {
-    //         "modelName": "event_data2",
-    //         "modelDetailName": "DecisionTree",
-    //         "trainedStatus": -1
-    //       },
-    //       {
-    //         "modelName": "event_data3",
-    //         "modelDetailName": "MultilayerPerceptronClassifier",
-    //         "trainedStatus": -1
-    //       }
-    //     ]
-    //   }
-    // });
+  // return axios.get(`${CONFIG_MODULE}/get/one/config?configId=${configId}`).then(res => {
+  //
+  //   return res.data;});
+    return Promise.resolve({
+      "timestamp": 1649473724362,
+      "status": 200,
+      "data": {
+        "configId": "1",
+        "modelTypeId": "6",
+        "modelTypeName": "决策树",
+        "modelDes": "决策树是一个预测模型；他代表的是对象属性与对象值之间的一种映射关系。树中每个节点表示某个对象，而每个分叉路径则代表的某个可能的属性值，而每个叶结点则对应从根节点到该叶节点所经历的路径所表示的对象的值。",
+        "modelDetileDes": "通过分析交通数据中的road、lane、vehicle_class、duration字段来预测事故类别。",
+        "featureList": [
+          {
+            "id": 105,
+            "fileInfoId": 1,
+            "fieldName": "road",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"R\",\"L\"]"
+          },
+          {
+            "id": 106,
+            "fileInfoId": 1,
+            "fieldName": "lane",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"r\",\"m\",\"l\"]"
+          },
+          {
+            "id": 107,
+            "fileInfoId": 1,
+            "fieldName": "vehicle_class",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"car\",\"truck\",\"bus\"]"
+          },
+          {
+            "id": 110,
+            "fileInfoId": 1,
+            "fieldName": "duration",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"48,60\",\"24,36\",\"36,48\",\"12,24\",\"0,12\"]"
+          },
+          {
+            "id": 109,
+            "fileInfoId": 1,
+            "fieldName": "event_type",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"cruise\",\"overdrive\"]"
+          }
+        ],
+        "modelInfos": [
+          {
+            "modelName": "event_data",
+            "modelDetailName": "DecisionTree",
+            "trainedStatus": 1
+          },
+          {
+            "modelName": "event_data2",
+            "modelDetailName": "DecisionTree",
+            "trainedStatus": -1
+          },
+          {
+            "modelName": "event_data3",
+            "modelDetailName": "DecisionTree",
+            "trainedStatus": -1
+          }
+        ]
+      }
+    });
 
 }
 

src/api/file.js

@@ -80,118 +80,118 @@ export const GetAllFile = userId => {
  * @returns
  */
 export const getFileDetail = fileId => {
-    return axios.get(`${FILE_MODULE}/get/detail`, {
-        params: {
-            fileId: fileId
+//     return axios.get(`${FILE_MODULE}/get/detail`, {
+//         params: {
+//             fileId: fileId
+//         }
+//     }).then( res => {
+//         return res.data;
+//     })
+// }
+
+//直接返回数据：
+    return Promise.resolve({
+        "timestamp": 1649398931190,
+        "status": 200,
+        "data": {
+            "fileName": "event_data",
+            "createTime": "2022-03-29T09:25:43.154+00:00",
+            "fileStrucInfo": {
+                "totalRows": "754"
+            },
+            "headerInfos": [
+                {
+                    "id": 103,
+                    "fileInfoId": 1,
+                    "fieldName": "frame_index",
+                    "aliasName": "",
+                    "fieldDes": "",
+                    "nullsRatio": 0.0,
+                    "conOrDis": 1,
+                    "fieldType": "int",
+                    "valueInfo": "[\"79\",\"89992\"]"
+                },
+                {
+                    "id": 104,
+                    "fileInfoId": 1,
+                    "fieldName": "time",
+                    "aliasName": "",
+                    "fieldDes": "",
+                    "nullsRatio": 0.0,
+                    "conOrDis": 1,
+                    "fieldType": "double",
+                    "valueInfo": "[\"3.16\",\"3599.68\"]"
+                },
+                {
+                    "id": 105,
+                    "fileInfoId": 1,
+                    "fieldName": "road",
+                    "aliasName": "",
+                    "fieldDes": "",
+                    "nullsRatio": 0.0,
+                    "conOrDis": 0,
+                    "fieldType": "string",
+                    "valueInfo": "[\"R\",\"L\"]"
+                },
+                {
+                    "id": 106,
+                    "fileInfoId": 1,
+                    "fieldName": "lane",
+                    "aliasName": "",
+                    "fieldDes": "",
+                    "nullsRatio": 0.0,
+                    "conOrDis": 0,
+                    "fieldType": "string",
+                    "valueInfo": "[\"r\",\"m\",\"l\"]"
+                },
+                {
+                    "id": 107,
+                    "fileInfoId": 1,
+                    "fieldName": "vehicle_class",
+                    "aliasName": "",
+                    "fieldDes": "",
+                    "nullsRatio": 0.0,
+                    "conOrDis": 0,
+                    "fieldType": "string",
+                    "valueInfo": "[\"car\",\"truck\",\"bus\"]"
+                },
+                {
+                    "id": 108,
+                    "fileInfoId": 1,
+                    "fieldName": "vehicle_id",
+                    "aliasName": "",
+                    "fieldDes": "",
+                    "nullsRatio": 0.0,
+                    "conOrDis": 1,
+                    "fieldType": "int",
+                    "valueInfo": "[\"20\",\"46862\"]"
+                },
+                {
+                    "id": 109,
+                    "fileInfoId": 1,
+                    "fieldName": "event_type",
+                    "aliasName": "",
+                    "fieldDes": "",
+                    "nullsRatio": 0.0,
+                    "conOrDis": 0,
+                    "fieldType": "string",
+                    "valueInfo": "[\"cruise\",\"overdrive\"]"
+                },
+                {
+                    "id": 110,
+                    "fileInfoId": 1,
+                    "fieldName": "duration",
+                    "aliasName": "",
+                    "fieldDes": "",
+                    "nullsRatio": 0.0,
+                    "conOrDis": 0,
+                    "fieldType": "string",
+                    "valueInfo": "[\"48,60\",\"24,36\",\"36,48\",\"12,24\",\"0,12\"]"
+                }
+            ]
         }
-    }).then( res => {
-        return res.data;
     })
 }
-
-//直接返回数据：
-// return Promise.resolve({
-//     "timestamp": 1649398931190,
-//     "status": 200,
-//     "data": {
-//         "fileName": "event_data",
-//         "createTime": "2022-03-29T09:25:43.154+00:00",
-//         "fileStrucInfo": {
-//             "totalRows": "754"
-//         },
-//         "headerInfos": [
-//             {
-//                 "id": 103,
-//                 "fileInfoId": 1,
-//                 "fieldName": "frame_index",
-//                 "aliasName": "",
-//                 "fieldDes": "",
-//                 "nullsRatio": 0.0,
-//                 "conOrDis": 1,
-//                 "fieldType": "int",
-//                 "valueInfo": "[\"79\",\"89992\"]"
-//             },
-//             {
-//                 "id": 104,
-//                 "fileInfoId": 1,
-//                 "fieldName": "time",
-//                 "aliasName": "",
-//                 "fieldDes": "",
-//                 "nullsRatio": 0.0,
-//                 "conOrDis": 1,
-//                 "fieldType": "double",
-//                 "valueInfo": "[\"3.16\",\"3599.68\"]"
-//             },
-//             {
-//                 "id": 105,
-//                 "fileInfoId": 1,
-//                 "fieldName": "road",
-//                 "aliasName": "",
-//                 "fieldDes": "",
-//                 "nullsRatio": 0.0,
-//                 "conOrDis": 0,
-//                 "fieldType": "string",
-//                 "valueInfo": "[\"R\",\"L\"]"
-//             },
-//             {
-//                 "id": 106,
-//                 "fileInfoId": 1,
-//                 "fieldName": "lane",
-//                 "aliasName": "",
-//                 "fieldDes": "",
-//                 "nullsRatio": 0.0,
-//                 "conOrDis": 0,
-//                 "fieldType": "string",
-//                 "valueInfo": "[\"r\",\"m\",\"l\"]"
-//             },
-//             {
-//                 "id": 107,
-//                 "fileInfoId": 1,
-//                 "fieldName": "vehicle_class",
-//                 "aliasName": "",
-//                 "fieldDes": "",
-//                 "nullsRatio": 0.0,
-//                 "conOrDis": 0,
-//                 "fieldType": "string",
-//                 "valueInfo": "[\"car\",\"truck\",\"bus\"]"
-//             },
-//             {
-//                 "id": 108,
-//                 "fileInfoId": 1,
-//                 "fieldName": "vehicle_id",
-//                 "aliasName": "",
-//                 "fieldDes": "",
-//                 "nullsRatio": 0.0,
-//                 "conOrDis": 1,
-//                 "fieldType": "int",
-//                 "valueInfo": "[\"20\",\"46862\"]"
-//             },
-//             {
-//                 "id": 109,
-//                 "fileInfoId": 1,
-//                 "fieldName": "event_type",
-//                 "aliasName": "",
-//                 "fieldDes": "",
-//                 "nullsRatio": 0.0,
-//                 "conOrDis": 0,
-//                 "fieldType": "string",
-//                 "valueInfo": "[\"cruise\",\"overdrive\"]"
-//             },
-//             {
-//                 "id": 110,
-//                 "fileInfoId": 1,
-//                 "fieldName": "duration",
-//                 "aliasName": "",
-//                 "fieldDes": "",
-//                 "nullsRatio": 0.0,
-//                 "conOrDis": 0,
-//                 "fieldType": "string",
-//                 "valueInfo": "[\"48,60\",\"24,36\",\"36,48\",\"12,24\",\"0,12\"]"
-//             }
-//         ]
-//     }
-// })
-
 /**
  *  删除文件 GET /delete
  * @param {*} fileId

src/api/mail.js

@@ -0,0 +1,57 @@
+import {MAIL_MODULE} from "./_prefix";
+
+export const sendMail = payload => {
+    console.log(payload);
+    //id,
+    // const {fromUserId, toUserId, title,content} = payload;
+    //
+    // return axios.post(`${MAIL_MODULE}/send`, {
+    //     fromUserId, toUserId, title,content
+    // }).then(res => {
+    //     return res.data;
+    // });
+    return Promise.resolve({
+        "success": true,
+        "message": "success",
+        "object": {}
+    })
+}
+
+export const getUserMail = payload => {
+    // console.log("getAllConfig",payload);
+    // const {userId} = payload;
+    // return axios.get(`${MAIL_MODULE}/getUserMail/{userId}`).then(res => {
+    //     return res.data;
+    // });
+    return Promise.resolve({
+        "success": true,
+        "message": "success",
+        "object": [{
+            "mailId": 1,
+            "fromUserId": 1,
+            "toUserId":1,
+            "title":"title",
+            "content":" 在预实验中，我发现在保持纸牌水平飞出的前提下，不进行旋转的纸牌只能前进很短距离，而一旦使纸牌开始旋转，纸牌飞行距离明显增加且飞牌时用力越大，纸牌前进距离越长。分析现象得出猜想：在纸牌水平飞行过程中，饶自身轴旋转可以显著减小其飞行时所受到的空气阻力，从而保持稳定的飞行状态，运动更长距离。\n" +
+                "  查阅文献得到：与子弹需旋转射出的原理类似，因为空气是流体，纸牌在旋转过程中厚度切割空气，带动其薄边周围的空气旋转，使得空气与纸牌相对速度减小，由流体力学空气阻力公式（经验公式）F=C * A * V^2可知，纸牌前进所受的空气阻力减小。同时由于陀螺效应，纸牌较好地保持其旋转方向，保持其薄边迎风，减轻由于阻力干扰导致纸牌飞行晃动从而增大迎风面积，使纸牌更好保持其稳定的飞行状态。",
+            "time":"2022.3.15"
+        },
+            {
+                "mailId": 2,
+                "fromUserId": 1,
+                "toUserId":1,
+                "title":"关于您帖子“使用决策树预测交通数据帖子的询问”",
+                "content":"请问您的帖子所使用的数据是否是交通局MMM后台检测系统导出的数据？我在导出选项选择2与您导出的数据格式不同，请问您的导出参数是多少？",
+                "time":"2022.3.15"
+            },
+            {
+                "mailId": 3,
+                "fromUserId": 1,
+                "toUserId":1,
+                "title":"title",
+                "content":"这是一个内容",
+                "time":"2022.3.15"
+            }
+
+        ]
+    })
+}

src/api/posts.js

@@ -0,0 +1,184 @@
+import axios from 'axios';
+import {CONFIG_MODULE, POST_MODULE} from "./_prefix";
+import {getAllModel} from "./model";
+
+
+export const getPostByPostId = payload => {
+    // console.log("getAllConfig",payload);
+    const {userId, postId} = payload;
+    //return axios.get(`${POST_MODULE}/getPost/{postId}/{userId}`).then(res => {
+    //     let modelId=res.data.object.shareModelList[0]
+    //     let postUserId=res.data.object.userId
+    //     let allModels=getAllModel(postUserId)
+    //     for(let i=0;i<allModels.length;i++){
+    //         if(modelId==allModels[i].modelId){
+    //             res.data.object["configId"]=allModels[i].configId
+    //         }
+    //     }
+    //     return res.data;
+    // });
+
+    return Promise.resolve({
+        "success":true,
+        "message":"success",
+        "object": {
+            "postId":1,
+            "userId":1,
+            "configId":1,
+            "title":"决策树分析交通数据预测事故",
+            "content":"通过a、b字段预测c字段，使用决策树模型，选了两个效果较好的模型供大家参考",
+            "updateTime":"2022.10.30",
+            "praise":15,
+            "comment_num":8,
+            "shareFileList":[1],
+            "shareModelList":["1","2"]
+        }
+    })
+}
+export const getUserCollection = payload => {
+    // console.log("getAllConfig",payload);
+    const {userId} = payload;
+    // return axios.get(`${POST_MODULE}/getUserCollection/{userId}`).then(res => {
+    //     return res.data;
+    // });
+    return Promise.resolve({
+        "success":true,
+        "message":"success",
+        "object":[{
+            "postId":1,
+            "userId":1,
+            "title":"我的收藏",
+            "content":"通过a、b字段预测c字段，使用决策树模型，选了两个效果较好的模型供大家参考",
+            "updateTime":"2022.10.30",
+            "praise":15,
+            "comment_num":8},
+            {
+                "postId":2,
+                "userId":1,
+                "title":"决策树分析交通数据预测事故",
+                "content":"通过a、b字段预测c字段，使用决策树模型，选了两个效果较好的模型供大家参考",
+                "updateTime":"2022.10.30",
+                "praise":15,
+                "comment_num":8}]
+    })
+}
+export const collection = payload => {
+    // console.log("getAllConfig",payload);
+    const {userId,postId} = payload;
+    // return axios.get(`${POST_MODULE}/collection/{userId}/{postId}`).then(res => {
+    //     return res.data;
+    // });
+    return Promise.resolve({
+        "success":true,
+        "message":"success",
+        "object":{}
+    })
+}
+export const getUserPost = payload => {
+    // console.log("getAllConfig",payload);
+    const {userId} = payload;
+    // return axios.get(`${POST_MODULE}/getUserPost/{userId}`).then(res => {
+    //     return res.data;
+    // });
+    return Promise.resolve({
+        "success":true,
+        "message":"success",
+        "object":[{
+            "postId":1,
+            "userId":1,
+            "title":"我的帖子",
+            "content":"通过a、b字段预测c字段，使用决策树模型，选了两个效果较好的模型供大家参考",
+            "updateTime":"2022.10.30",
+            "praise":15,
+            "comment_num":8},
+            {
+                "postId":2,
+                "userId":1,
+                "title":"决策树分析交通数据预测事故",
+                "content":"通过a、b字段预测c字段，使用决策树模型，选了两个效果较好的模型供大家参考",
+                "updateTime":"2022.10.30",
+                "praise":15,
+                "comment_num":8}]
+    })
+}
+
+/**
+ *  搜索帖子列表 POST /add
+ * @param {*} payload
+ * @returns
+ */
+export const searchPost = payload => {
+    console.log(payload);
+    //id,
+    const {userId, keyword, flagList} = payload;
+
+    // return axios.post(`${POST_MODULE}/searchPost`, {
+    //     userId,keyword,flagList
+    // }).then(res => {
+    //     return res.data;
+    // });
+
+
+    return Promise.resolve({
+        "success":true,
+        "message":"success",
+        "object":[{
+            "postId":1,
+            "userId":1,
+            "title":"决策树分析交通数据预测事故",
+            "content":"通过a、b字段预测c字段，使用决策树模型，选了两个效果较好的模型供大家参考",
+            "updateTime":"2022.10.30",
+            "praise":15,
+            "comment_num":8},
+            {
+                "postId":2,
+                "userId":1,
+                "title":"随即森林分析交通数据预测事故",
+                "content":"通过a、b字段预测c字段，使用决策树模型，选了两个效果较好的模型供大家参考",
+                "updateTime":"2022.10.30",
+                "praise":2,
+                "comment_num":3},
+            // {
+            //     "postId":3,
+            //     "userId":1,
+            //     "title":"决策树分析交通数据预测事故",
+            //     "content":"通过a、b字段预测c字段，使用决策树模型，选了两个效果较好的模型供大家参考",
+            //     "updateTime":"2022.10.30",
+            //     "praise":15,
+            //     "comment_num":8},
+            // {
+            //     "postId":4,
+            //     "userId":1,
+            //     "title":"决策树分析交通数据预测事故",
+            //     "content":"通过a、b字段预测c字段，使用决策树模型，选了两个效果较好的模型供大家参考",
+            //     "updateTime":"2022.10.30",
+            //     "praise":15,
+            //     "comment_num":8},
+            // {
+            //     "postId":5,
+            //     "userId":1,
+            //     "title":"决策树分析交通数据预测事故",
+            //     "content":"通过a、b字段预测c字段，使用决策树模型，选了两个效果较好的模型供大家参考",
+            //     "updateTime":"2022.10.30",
+            //     "praise":15,
+            //     "comment_num":8},
+            // {
+            //     "postId":6,
+            //     "userId":1,
+            //     "title":"决策树分析交通数据预测事故",
+            //     "content":"通过a、b字段预测c字段，使用决策树模型，选了两个效果较好的模型供大家参考",
+            //     "updateTime":"2022.10.30",
+            //     "praise":15,
+            //     "comment_num":8},
+            // {
+            //     "postId":7,
+            //     "userId":1,
+            //     "title":"决策树分析交通数据预测事故",
+            //     "content":"通过a、b字段预测c字段，使用决策树模型，选了两个效果较好的模型供大家参考",
+            //     "updateTime":"2022.10.30",
+            //     "praise":15,
+            //     "comment_num":8}
+            ]
+    })
+
+}

src/components/Comments.vue

@@ -0,0 +1,73 @@
+<template>
+    <div :style="{'width': width + 'px'} ">
+        <h4 style="margin-bottom: 40px; padding-left: 20px; border-left: 3px solid #52A8FF;">所有评论</h4>
+        <el-empty v-show="!commentList.length" :image-size="100" description="暂无评论"></el-empty>
+        <div class="comment" v-for="comment in commentList" :key="comment.userId" >
+            <div class="header">
+                <div class="avatar">
+                    <el-avatar size="large" icon="el-icon-user" ></el-avatar>
+                </div>
+                <div class="right">
+                    <div class="time">   {{comment.time}}  </div>
+                </div>
+            </div>
+            <div class="content">
+          {{comment.content}}
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: "",
+    props: {
+        commentList: Array,
+        width: Number
+    },
+    data() {
+        return {
+        }
+    },
+    methods: {
+    }
+}
+</script>
+
+<style scoped>
+.comment {
+    
+    margin-bottom: 8px;
+}
+
+.header {
+    
+    display: flex;
+    align-items: center;
+  background-color: #eeeeee;
+
+}
+
+.avatar {
+    float: left;
+    margin-right: 10px;
+    color: red;
+}
+.right {
+    float: left;
+}
+
+.userName {
+    color: #303133;
+}
+
+.time {
+    font-size: 14px;
+    color: #606266;
+
+}
+
+.content {
+    color: #000000;
+    background-color: #ffffff;
+}
+</style>

src/components/Header.vue

@@ -8,11 +8,18 @@
         <div class="logo">轻量级AI平台</div>
         <div class="header-right">
             <div class="header-user-con">
+              <div>
+                <router-link :to="{path:'/square'}">
+                  <el-button  style="float: right;margin-right: 15px;margin-top: 1px"  type="danger"   round>
+                    广场
+                  </el-button>
+                </router-link>
+              </div>
                 <!-- 消息中心 -->
                 <div class="btn-bell">
                     <el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">
                         <router-link to="/message">
-                            <i class="el-icon-bell"></i>
+                          <i class="el-icon-message" style="color: #53a8ff;"></i>
                         </router-link>
                     </el-tooltip>
                     <span class="btn-bell-badge" v-if="message"></span>
@@ -90,8 +97,9 @@ export default {
     box-sizing: border-box;
     width: 100%;
     height: 70px;
-    font-size: 22px;
+    font-size: 30px;
     color: #fff;
+  background-color: #000000;
 }
 .collapse-btn {
     float: left;
@@ -120,6 +128,7 @@ export default {
 }
 .btn-bell,
 .btn-fullscreen {
+  margin-top: 2px;
     position: relative;
     width: 30px;
     height: 30px;

src/components/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="sidebar">
-        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
+        <el-menu 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">

src/components/SquareHeader.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="header">
+    <!-- 折叠按钮 -->
+    <div class="collapse-btn" @click="collapseChage">
+      <i v-if="!collapse" class="el-icon-s-fold"></i>
+      <i v-else class="el-icon-s-unfold"></i>
+    </div>
+    <div class="logo">轻量级AI平台</div>
+    <div class="header-right">
+      <div class="header-user-con">
+        <div>
+          <router-link :to="{path:'/fileList'}">
+          <el-button  style="float: right;margin-right: 15px;margin-top: 1px"  type="danger"   round>
+            工作台
+          </el-button>
+        </router-link>
+        </div>
+        <el-button @click="handleCollect()" style="background-color: black;border: black;font-size: 30px;color: #e6a23c ">
+          <i class="el-icon-star-on" style="color: #e6a23c"></i>
+        </el-button>
+        <!-- 消息中心 -->
+        <div class="btn-bell">
+          <el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">
+            <router-link to="/message">
+              <i class="el-icon-message" style="color: #53a8ff;"></i>
+            </router-link>
+          </el-tooltip>
+          <span class="btn-bell-badge" v-if="message"></span>
+        </div>
+        <!-- 用户头像 -->
+        <div class="user-avator">
+          <img src="../assets/img/img.jpg" />
+        </div>
+        <!-- 用户名下拉菜单 -->
+        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
+                    <span class="el-dropdown-link">
+                        {{username}}
+                        <i class="el-icon-caret-bottom"></i>
+                    </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item  divided command="collection">我的收藏</el-dropdown-item>
+              <el-dropdown-item divided command="mine">我的发布</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { computed, onMounted } from "vue";
+import { useStore } from "vuex";
+import { useRouter } from "vue-router";
+export default {
+  setup() {
+    const username = localStorage.getItem("ms_username");
+    const message = 2;
+
+    const store = useStore();
+    const collapse = computed(() => store.state.collapse);
+    // 侧边栏折叠
+    const collapseChage = () => {
+      store.commit("handleCollapse", !collapse.value);
+    };
+
+    onMounted(() => {
+      if (document.body.clientWidth < 1500) {
+        collapseChage();
+      }
+    });
+
+    // 用户名下拉菜单选择事件
+    const router = useRouter();
+
+
+    return {
+      username,
+      message,
+      collapse,
+      collapseChage,
+    };
+  },
+  methods:{
+    handleCollect(){
+      this.$emit('getCollection')
+    },
+     handleCommand (command){
+      if (command == "collection") {
+        this.$emit('getCollection')
+      } else if (command == "mine") {
+        this.$emit('getMine')
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+.header {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 70px;
+  font-size: 30px;
+  color: #fff;
+  background-color: #000000;
+}
+.collapse-btn {
+  float: left;
+  padding: 0 21px;
+  cursor: pointer;
+  line-height: 70px;
+}
+.header .logo {
+  float: left;
+  width: 250px;
+  line-height: 70px;
+}
+.header-right {
+  float: right;
+  padding-right: 50px;
+}
+.header-user-con {
+  display: flex;
+  height: 70px;
+  align-items: center;
+}
+.btn-fullscreen {
+  transform: rotate(45deg);
+  margin-right: 5px;
+  font-size: 24px;
+}
+.btn-bell,
+.btn-fullscreen {
+  margin-top: 2px;
+  position: relative;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  border-radius: 15px;
+  cursor: pointer;
+
+}
+
+.btn-bell-badge {
+  position: absolute;
+  right: 0;
+  top: -2px;
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background: #f56c6c;
+  color: #fff;
+}
+.btn-bell .el-icon-bell {
+  color: #fff;
+
+}
+.user-name {
+  margin-left: 10px;
+}
+.user-avator {
+  margin-left: 20px;
+}
+.user-avator img {
+  display: block;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+.el-dropdown-link {
+  color: #fff;
+  cursor: pointer;
+}
+.el-dropdown-menu__item {
+  text-align: center;
+}
+</style>

src/components/WriteComment.vue

@@ -0,0 +1,49 @@
+  <template>
+    <div :style="{'width': width + 'px'}" class="container" style="border-color: white">
+          <el-input v-model="describe" placeholder="输入你的评论" style="margin-top: 20px" type="textarea"></el-input>
+      <el-button type="primary"    @click="submit" style="margin-top: 20px" round>发表<i class="el-icon-upload el-icon--right"></i></el-button>
+    </div>
+</template>
+<script>
+import { submitComment } from "../api/comment.js"
+
+export default {
+    name: "",
+    data() {
+        return {
+            describe: "",
+            colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
+        }
+    },
+    props: {
+        width: Number,
+        postId: Number
+    },
+    methods: {
+        submit() {
+            if (!this.describe) {
+                this.$message.warning('请填写评价')
+                return
+            }
+
+            submitComment({
+                userId: 0,
+                content: this.describe,
+                postId: this.postId
+            }).then(res => {
+                if (res.success === 0) {
+                    this.$message.success('发表成功!')
+                    
+                }
+                else {
+                    this.$message.error(res.message)
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -1,6 +1,6 @@
 import {createApp} from 'vue'
 import App from './App.vue'
-import router from './router'
+import router from './views/unused/router'
 import store from './store'
 import installElementPlus from './plugins/element'
 import './assets/css/icon.css'

src/views/ConfigDetail.vue

@@ -25,7 +25,7 @@
               {{config.modelDes}}
             </el-form-item>
             <el-form-item label="模型详情：" >
-              {{}}
+              {{config.modelDetileDes}}
             </el-form-item>
             <el-form-item label="特征字段:" >
               <el-table :data="tableData" border class="table"  ref="fieldTable" header-cell-class-name="table-header" @selection-change="handleSelectChange">
@@ -84,7 +84,7 @@
             </el-form-item>
             <el-form-item>
 
-              <el-button type="primary"  @click="createModel">生成模型</el-button>
+              <el-button type="primary"  @click="createModel()">生成模型</el-button>
             </el-form-item>
           </el-form>
 
@@ -228,9 +228,16 @@ export default {
 
           config.value=res.data;
           form.modelTypeId=config.value.modelTypeId;
-          console.log("modelId",config.value.modelTypeId);
+          console.log(config.value.modelTypeId);
+          if(config.value.modelTypeId==6){
+            console.log("this ture")
+            showCategory.value=true;
+            showTrainingDataSetOccupy.value=true;
+          }
+            switch (form.modelTypeId
+
 
-          switch (config.value.modelTypeId){
+                ){
             case '1':
               showMaxIter.value=true;
               showRegParam.value=true;
@@ -245,9 +252,10 @@ export default {
               showRegParam.value=true;
               showElasticNetParam.value=true;
               break;
-            case '5'||'6'||'7':
+            case '5'||6||'7':
               showCategory.value=true;
               showTrainingDataSetOccupy.value=true;
+              console.log("this ture")
               break;
             case '8':
               showNumOfCluster.value=true;
@@ -256,7 +264,7 @@ export default {
 
           }
           console.log("form",form);
-          // console.log("config",config.value.modelTypeId);
+          //console.log("config",config.value.modelTypeId);
           tableData.value = res.data.featureList;
           for (var i = 0; i < tableData.value.length; i++) {
             if (tableData.value[i].conOrDis === 1) {
@@ -353,15 +361,16 @@ export default {
           payload.argument=arg5;
 
       }
+      ElMessage.success(`已成功生成模型`);
       // console.log("here",payload);
-      addModel(payload).then(res=>{
-
-        if(res.status===200) {
-          ElMessage.success(`已成功生成模型`);
-
-        }
-        else ElMessage.error(`生成模型失败`);
-      })
+      // addModel(payload).then(res=>{
+      //
+      //   if(res.status===200) {
+      //     ElMessage.success(`已成功生成模型`);
+      //
+      //   }
+      //   else ElMessage.error(`生成模型失败`);
+      // })
 
 
 
@@ -398,6 +407,7 @@ export default {
       fileId,
       showMaxIter,
       saveModel,
+
       showRegParam,
       showElasticNetParam,
       showCategory,

src/views/ModelList.vue

@@ -172,13 +172,7 @@ export default {
           }
         }
         const route=useRoute()
-        if(route.query.modelId!=null){
-          let index=0;
-          for(let i=0;i<tableData.value.length;i++){
-            if(tableData.value[i].modelId===route.query.modelId)index=i;
-          }
-          tableData.value=[tableData.value[index]]
-        }
+
       })
     };
     getpage();

src/views/changeConfig.vue

@@ -70,7 +70,7 @@
 import { reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
 import {changeConfig} from "../api/config";
-import router from "../router";
+import router from "./unused/router";
 import {useRoute} from "vue-router";
 // import router from "../router";
 export default {

src/views/file/FileDetail.vue

@@ -15,7 +15,7 @@
 
         <el-button type="primary" icon="el-icon-plus" @click="createConfig">生成配置文件</el-button>
 
-        <el-button type="info" icon="el-icon-thumb" @click="getFeature">自动特征选择</el-button>
+        <el-button type="success" icon="el-icon-thumb" @click="getFeature">自动特征选择</el-button>
 
       </div>
 

src/views/square.vue

@@ -0,0 +1,489 @@
+<template>
+
+  <el-container style=" height:100%;background: url(src/assets/img/earth.jpg) " direction="vertical">
+    <v-header style="height: 70px" @getCollection="getCollection()" @getMine="getMine()"></v-header>
+    <el-main>
+      <el-row :gutter="20" style="width: 100%;height: 200px">
+        <el-col :span="8" :offset="8">
+          <div class="grid-content" style="margin-top: 70px;">
+            <el-input placeholder="请输入内容" v-model="input" class="searchClass">
+              <template #append>
+                <el-button icon="el-icon-search" @click="handleSearch()"/>
+              </template>
+            </el-input>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="width: 100%;">
+        <el-col :span="8" :offset="7">
+          <div class="postList" style="width: 800px;">
+            <div style="" v-for="(post, index) in postList" :key="post.postId"
+                 v-show="index >= (currentPage-1)*8 && index < currentPage*4">
+              <el-card shadow="hover"
+                       style="height: 120px; margin-bottom: 5px; border-radius: 10px; background-color: #262626">
+                <div class="taskTitle">
+                  <span style="font-size: 18px; font-weight: bold;color: #eeeeee">{{ post.title }}</span>
+                  <el-button type="text" style="margin-left: 15px; margin-right: 15px; color: #000000">
+                    {{ post.update_time }}
+                  </el-button>
+                </div>
+                <div class="desciption">
+                  <div class="ellipsis-line" style="font-size: 14px; width: 800px; float: left;color: #dbd0d0">
+                    {{ post.content }}
+                  </div>
+                  <div style="font-size: 5px; width: 150px;float: left;color: #dbd0d0;margin-top: 10px">
+                    <i class="el-icon-thumb" style="color: white ;"></i>
+                    {{ post.praise }}
+                    <i class="el-icon-chat-line-round" style="color: white"></i>
+                    {{ post.comment_num }}
+                    <i class="el-icon-time" style="color: white ;"></i>
+                    {{ post.updateTime }}
+                  </div>
+                  <el-button style="float: right;" size="small" type="warning" @click="handlePostDetail(post.postId)"
+                             round>查看详情
+                  </el-button>
+                </div>
+
+              </el-card>
+            </div>
+            <el-pagination
+                layout="prev, pager, next"
+                :total="pages"
+                style="float: right; margin-top: 10px; padding-bottom: 20px;"
+                :current-page.sync="currentPage"
+                background>
+            </el-pagination>
+          </div>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
+  <el-dialog :title="title" v-model="collectionDetailVisble" min-width="30%" width="66%" style="">
+    <span style="font-size: 18px; font-weight: bold;color: black;">{{ currentPost.content }}</span>
+    <el-form ref="formRef" label-width="120px">
+      <el-form-item label="模型类型名：" >
+        {{config.modelTypeName}}
+      </el-form-item>
+      <el-form-item label="模型描述：" >
+        {{config.modelDes}}
+      </el-form-item>
+      <el-form-item label="模型详情：" >
+        {{}}
+      </el-form-item>
+      <el-form-item label="特征字段:" >
+        <el-table :data="tableData" border class="table"  ref="fieldTable" header-cell-class-name="table-header" @selection-change="">
+          <el-table-column label="字段名" width="120%">
+            <template #default="scope"><span>{{ scope.row.fieldName }}</span></template>
+          </el-table-column>
+          <el-table-column label="别名">
+            <template #default="scope">{{ scope.row.aliasName }}</template>
+          </el-table-column>
+          <el-table-column label="描述">
+            <template #default="scope">{{ scope.row.fieldDes }}</template>
+          </el-table-column>
+          <el-table-column label="取值类型">
+            <template #default="scope">{{ scope.row.fieldType }}</template>
+          </el-table-column>
+          <el-table-column label="分布类型">
+            <template #default="scope">{{ scope.row.conOrDis }}</template>
+          </el-table-column>
+          <el-table-column label="空值率">
+            <template #default="scope">{{ scope.row.nullsRatio }}</template>
+          </el-table-column>
+
+          <el-table-column label="值域" width="150%">
+            <template #default="scope">{{ scope.row.valueInfo }}</template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+
+      <el-form-item label="模型列表:" >
+        <el-table :data="modelData" border class="table" ref="fieldTable" header-cell-class-name="table-header" @selection-change="">
+          <el-table-column label="模型名" width="150%">
+            <template #default="scope"><span>{{ scope.row.modelName }}</span></template>
+          </el-table-column>
+          <el-table-column label="模型类别" width="150%">
+            <template #default="scope">{{ scope.row.modelDetailName }}</template>
+          </el-table-column>
+          <el-table-column label="训练结果">
+            <template #default="scope" >
+              <div v-if="scope.row.trainedStatus===-1">accuracy：0.87</div>
+              <div v-else="">已训练</div></template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary"  @click="">添加到我的配置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-collapse >
+    <el-collapse-item name="1" title="评论">
+    <div style="margin-top: 20px;border:2px solid #a6a9ad;box-shadow: 0 0 5px rgba(0,0,0,.1);padding: 5px;">
+    <v-write-comment :width="500" :post-id="currentPost.postId" style="margin-left: 250px" >
+    </v-write-comment>
+    <v-comments :comment-list="commentList" :width="800" style="margin-top: 5px;margin-left: 160px"></v-comments>
+    </div>
+    </el-collapse-item>
+      <el-collapse-item title="写信给作者————更加快捷" name="2">
+        <div style="width: 600px;margin-left: 250px">
+        <el-input
+            type="textarea"
+            autosize
+            placeholder="标题"
+            v-model="mailTitle">
+        </el-input>
+        <div style="margin: 20px 0;"></div>
+        <el-input
+            type="textarea"
+            :autosize="{ minRows: 3, maxRows: 5}"
+            placeholder="正文"
+            v-model="mailContent">
+        </el-input>
+          <el-button type="danger" icon="el-icon-message" big circle style="margin-left: 600px;" @click="sendMailTo()"></el-button>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+
+      <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="detailVisble = false">取 消</el-button>
+                    <el-button type="primary" @click="saveEdit">确 定</el-button>
+                </span>
+    </template>
+  </el-dialog>
+  <el-dialog :title="title" v-model=" squareDetailVisble" min-width="30%" width="66%" style="">
+    <span style="font-size: 18px; font-weight: bold;color: black;">{{ currentPost.content }}</span>
+    <el-form ref="formRef" label-width="120px">
+      <el-form-item label="模型类型名：" >
+        {{config.modelTypeName}}
+      </el-form-item>
+      <el-form-item label="模型描述：" >
+        {{config.modelDes}}
+      </el-form-item>
+      <el-form-item label="模型详情：" >
+        {{}}
+      </el-form-item>
+      <el-form-item label="特征字段:" >
+        <el-table :data="tableData" border class="table"  ref="fieldTable" header-cell-class-name="table-header" @selection-change="">
+          <el-table-column label="字段名" width="120%">
+            <template #default="scope"><span>{{ scope.row.fieldName }}</span></template>
+          </el-table-column>
+          <el-table-column label="别名">
+            <template #default="scope">{{ scope.row.aliasName }}</template>
+          </el-table-column>
+          <el-table-column label="描述">
+            <template #default="scope">{{ scope.row.fieldDes }}</template>
+          </el-table-column>
+          <el-table-column label="取值类型">
+            <template #default="scope">{{ scope.row.fieldType }}</template>
+          </el-table-column>
+          <el-table-column label="分布类型">
+            <template #default="scope">{{ scope.row.conOrDis }}</template>
+          </el-table-column>
+          <el-table-column label="空值率">
+            <template #default="scope">{{ scope.row.nullsRatio }}</template>
+          </el-table-column>
+
+          <el-table-column label="值域" width="150%">
+            <template #default="scope">{{ scope.row.valueInfo }}</template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+
+      <el-form-item label="模型列表:" >
+        <el-table :data="modelData" border class="table" ref="fieldTable" header-cell-class-name="table-header" @selection-change="">
+          <el-table-column label="模型名" width="150%">
+            <template #default="scope"><span>{{ scope.row.modelName }}</span></template>
+          </el-table-column>
+          <el-table-column label="模型类别" width="150%">
+            <template #default="scope">{{ scope.row.modelDetailName }}</template>
+          </el-table-column>
+          <el-table-column label="训练结果">
+            <template #default="scope" >
+              <div v-if="scope.row.trainedStatus===-1">accuracy：0.87</div>
+              <div v-else="">已训练</div></template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+    </el-form>
+    <v-comments :comment-list="commentList" :width="800" style="margin-top: 20px;border:2px solid #a6a9ad;box-shadow: 0 0 5px rgba(0,0,0,.1);padding: 5px;"></v-comments>
+    <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="detailVisble = false">取 消</el-button>
+                    <el-button type="primary" @click="collect(currentPost.postId)">收藏</el-button>
+                </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import vHeader from "../components/SquareHeader.vue";
+import {searchPost, getPostByPostId, getUserCollection, getUserPost,collection} from "../api/posts";
+import {getComment} from "../api/comment";
+import {sendMail} from "../api/mail";
+import {ref, reactive} from "vue";
+import {getFileDetail} from "../api/file";
+import vComments from "../components/Comments.vue"
+import vWriteComment from "../components/WriteComment.vue"
+import {getOneConfig} from "../api/config";
+
+export default {
+  setup() {
+    const collectionDetailVisble = ref(false);
+    const squareDetailVisble = ref(false);
+    const tableData = ref([])
+    return {collectionDetailVisble, tableData, squareDetailVisble};
+  },
+  components: {
+    vHeader, vComments,
+    vWriteComment
+  },
+  data() {
+    return {
+      input: '',
+      select: '',
+      src: "src/assets/img/earth.jpg",
+      fit: 'cover',
+      postList: [],
+      currentPage: 1,
+      title: "12121",
+      currentPost: null,
+      commentList: [],
+      currentState: 0,
+      mailTitle:"",
+      mailContent:"",
+      config: null,
+      modelData:null
+    };
+  },
+
+  methods: {
+    sendMailTo(){
+      sendMail({"title":this.mailTitle,"fromUserId":1,"toUserId":this.currentPost.userId,"content":this.mailContent}).then(res=>{
+        if(res.success){
+          this.$message({
+            message: '发送成功！',
+            type: 'success'
+          });
+          this.mailContent=""
+          this.mailTitle=""
+        }
+        else{
+          this.$message({
+            message: '发送失败！',
+            type: 'fail'
+          });
+        }
+      })
+    },
+    collect(postId){
+      collection({"userId":1,"postId":postId}).then(res =>
+      {
+        if(res.success){
+          this.$message({
+            message: '收藏成功！',
+            type: 'success'
+          });
+        }
+      })
+    },
+    handleSearch() {
+      console.log("doing")
+      searchPost({
+        keyword: this.input,
+        flagList: "",
+        userId: 0
+      }).then(res => {
+        this.postList = res.object
+        console.log(this.postList)
+        this.currentState = 0
+      })
+    },
+    handleCollectionDetail(postId) {
+      const data = ref([])
+      getPostByPostId({"postId": postId}).then(res => {
+        const postDetail = res.object
+        const fileId = postDetail.shareFileList[0]
+        this.currentPost = postDetail
+        this.title = postDetail.title
+
+        getComment({"userId": 1}).then(res => {
+          if (fileId != null) {
+            getOneConfig({"configId":this.currentPost.configId}).then(res => {
+              this.config=res.data
+              data.value=res.data.featureList
+              this.modelData=res.data.modelInfos
+              for (var i = 0; i < data.value.length; i++) {
+                if (data.value[i].conOrDis === 1) {
+                  data.value[i].conOrDis = "连续值"
+                } else {
+                  data.value[i].conOrDis = "离散值"
+                }
+              }
+              this.tableData = data
+              console.log(data)
+              console.log("fileId=" + fileId)
+              this.collectionDetailVisble = true
+            })
+          }
+          this.commentList = res.object
+          console.log(this.commentList)
+        })
+
+      })
+    },
+    handleSearchDetail(postId) {
+      const data = ref([])
+      getPostByPostId({"postId": postId}).then(res => {
+        const postDetail = res.object
+        const fileId = postDetail.shareFileList[0]
+        this.currentPost = postDetail
+        this.title = postDetail.title
+        getComment({"userId": 1}).then(res => {
+          if (fileId != null) {
+            getOneConfig({"configId":this.currentPost.configId}).then(res => {
+              this.config=res.data
+              data.value=res.data.featureList
+              this.modelData=res.data.modelInfos
+              for (var i = 0; i < data.value.length; i++) {
+                if (data.value[i].conOrDis === 1) {
+                  data.value[i].conOrDis = "连续值"
+                } else {
+                  data.value[i].conOrDis = "离散值"
+                }
+              }
+              this.tableData = data
+              this.squareDetailVisble = true
+              console.log(data)
+              console.log("fileId=" + fileId)
+            })
+          }
+          this.commentList = res.object
+          console.log(this.commentList)
+        })
+      })
+    },
+
+    handlePostDetail(postId) {
+      console.log("ddd")
+      if (this.currentState == 1) {
+        this.handleCollectionDetail(postId)
+      }
+      if (this.currentState == 0) {
+        this.handleSearchDetail(postId)
+      }
+
+    },
+
+    getCollection() {
+      getUserCollection({userId: 0}).then(
+          res => {
+            this.postList = res.object
+            console.log(this.postList)
+            this.currentState = 1
+          }
+      )
+    },
+    getMine() {
+      getUserPost({userId: 0}).then(
+          res => {
+            this.postList = res.object
+            console.log(this.postList)
+            this.currentState = 2
+          }
+      )
+    }
+  }
+}
+
+
+</script>
+
+<style>
+.header {
+  color: #fff;
+
+}
+
+.el-dialog__title {
+  font-size: 26px !important;
+  font-weight: bold;
+  color: black
+}
+
+.searchClass {
+  border: 1px solid #262626;
+  border-radius: 20px;
+  background: #1f1e1e;
+  height: 50px;
+}
+
+.searchClass .el-input-group__prepend {
+  border: none;
+  background-color: transparent;
+  padding: 0 10px 0 30px;
+}
+
+.searchClass .el-input-group__append {
+  border: none;
+  background-color: transparent;
+}
+
+.searchClass .el-input__inner {
+  height: 50px;
+  line-height: 36px;
+  border: none;
+  background-color: transparent;
+}
+
+.searchClass .el-icon-search {
+  font-size: 16px;
+}
+
+.searchClass .centerClass {
+  height: 100%;
+  line-height: 100%;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: right;
+}
+
+.searchClass .line {
+  width: 1px;
+  height: 26px;
+  background-color: #262626;
+  margin-left: 14px;
+}
+
+.searchClass:hover {
+  border: 1px solid #262626;
+  background: #262626;
+}
+
+.searchClass:hover .line {
+  background-color: #D5E3E8;
+}
+
+.searchClass:hover .el-icon-search {
+  color: #409eff;
+  font-size: 16px;
+}
+
+.el-col {
+  border-radius: 30px
+}
+
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+
+/*.el-input__inner{*/
+/*  border-radius: 30px!important;*/
+/*  border-color: #262626!important;*/
+/*  background-color: #606266!important;*/
+/*  height: 50px!important;*/
+
+/*}*/
+</style>

src/views/BaseCharts.vue → src/views/unused/BaseCharts.vue

@@ -31,9 +31,9 @@
 <script>
 import { ref, reactive } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { fetchData,fetchModuleDetail } from "../api/index";
+import { fetchData,fetchModuleDetail } from "../../api";
 import {useRoute} from "vue-router";
-import {use}from"../api/model"
+import {use}from "../../api/model"
 
 export default {
     

src/views/Home.vue → src/views/unused/Home.vue

@@ -20,9 +20,9 @@
 <script>
 import { computed } from "vue";
 import { useStore } from "vuex";
-import vHeader from "../components/Header.vue";
-import vSidebar from "../components/Sidebar.vue";
-import vTags from "../components/Tags.vue";
+import vHeader from "../../components/Header.vue";
+import vSidebar from "../../components/Sidebar.vue";
+import vTags from "../../components/Tags.vue";
 export default {
     components: {
         vHeader,

src/views/Login.vue → src/views/unused/Login.vue

@@ -85,7 +85,7 @@ export default {
     position: relative;
     width: 100%;
     height: 100%;
-    background-image: url(../assets/img/login-bg.jpg);
+    background-image: url(../../assets/img/login-bg.jpg);
     background-size: 100%;
 }
 .ms-title {

src/views/ModelDetail.vue → src/views/unused/ModelDetail.vue

@@ -118,8 +118,8 @@
 <script>
 import { ref, reactive } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { fetchData } from "../api/index";
-import {addConfig, deleteModelByModelId, getAllConfig} from "../api/config";
+import { fetchData } from "../../api";
+import {addConfig, deleteModelByModelId, getAllConfig} from "../../api/config";
 
 export default {
     name: "config",

src/views/Upload.vue → src/views/unused/Upload.vue

@@ -45,7 +45,7 @@
 import { ref } from "vue";
 import VueCropper from "vue-cropperjs";
 import "cropperjs/dist/cropper.css";
-import defaultSrc from "../assets/img/img.jpg";
+import defaultSrc from "../../assets/img/img.jpg";
 import { ElMessage, ElMessageBox } from "element-plus"
 
 export default {

src/router/index.js → src/views/unused/router/index.js

@@ -1,11 +1,16 @@
 import {createRouter, createWebHashHistory} from "vue-router";
-import Home from "../views/Home.vue";
+import Home from "../Home.vue";
+import squareLayout from "../../square.vue";
 
 const routes = [
     {
         path: '/',
         redirect: '/fileList'
     },
+    {
+        path: '/square',
+        component: squareLayout,
+    },
     {
         path: "/",
         name: "Home",
@@ -18,7 +23,7 @@ const routes = [
                 meta: {
                     title: '我的文件'
                 },
-                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/file/FileList.vue")
+                component: () => import ( /* webpackChunkName: "dashboard" */ "../../file/FileList.vue")
             },
             {
                 path: "/modelList",
@@ -26,7 +31,7 @@ const routes = [
                 meta: {
                     title: '机器学习模型'
                 },
-                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/ModelList.vue")
+                component: () => import ( /* webpackChunkName: "dashboard" */ "../../ModelList.vue")
             },
             // {
             //     path: "/dlModelList",
@@ -43,7 +48,7 @@ const routes = [
                 meta: {
                     title: '模型训练'
                 },
-                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/modelDetail.vue")
+                component: () => import ( /* webpackChunkName: "dashboard" */ "../ModelDetail.vue")
             },
 
             {
@@ -52,14 +57,14 @@ const routes = [
                 meta: {
                     title: '文件详情'
                 },
-                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/file/FileDetail.vue")
+                component: () => import ( /* webpackChunkName: "dashboard" */ "../../file/FileDetail.vue")
             },{
                 path: "/FileAnalysis",
                 name: "FileAnalysis",
                 meta: {
                     title: '文件分析结果'
                 },
-                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/file/FileAnalysis.vue")
+                component: () => import ( /* webpackChunkName: "dashboard" */ "../../file/FileAnalysis.vue")
             },
             {
                 path: "/config",
@@ -67,7 +72,7 @@ const routes = [
                 meta: {
                     title: '模型配置'
                 },
-                component: () => import ( /* webpackChunkName: "table" */ "../views/ConfigList.vue")
+                component: () => import ( /* webpackChunkName: "table" */ "../../ConfigList.vue")
             },
             {
                 path: "/charts",
@@ -75,7 +80,7 @@ const routes = [
                 meta: {
                     title: '训练结果'
                 },
-                component: () => import ( /* webpackChunkName: "charts" */ "../views/BaseCharts.vue")
+                component: () => import ( /* webpackChunkName: "charts" */ "../BaseCharts.vue")
             },
             {
                 path: "/form",
@@ -83,7 +88,7 @@ const routes = [
                 meta: {
                     title: '表单'
                 },
-                component: () => import ( /* webpackChunkName: "form" */ "../views/BaseForm.vue")
+                component: () => import ( /* webpackChunkName: "form" */ "../BaseForm.vue")
             },
             {
                 path: "/message",
@@ -91,7 +96,7 @@ const routes = [
                 meta: {
                     title: '我的消息'
                 },
-                component: () => import ( /* webpackChunkName: "message" */ "../views/user/Message.vue")
+                component: () => import ( /* webpackChunkName: "message" */ "../../user/Message.vue")
             },
             {
                 path: "/upload",
@@ -99,7 +104,7 @@ const routes = [
                 meta: {
                     title: '上传插件'
                 },
-                component: () => import ( /* webpackChunkName: "upload" */ "../views/file/Upload.vue")
+                component: () => import ( /* webpackChunkName: "upload" */ "../../file/Upload.vue")
             },
             {
                 path: '/user',
@@ -107,7 +112,7 @@ const routes = [
                 meta: {
                     title: '个人中心'
                 },
-                component: () => import (/* webpackChunkName: "user" */ '../views/user/User.vue')
+                component: () => import (/* webpackChunkName: "user" */ '../../user/User.vue')
             },
             {
                 path:'/dllearning',
@@ -115,7 +120,7 @@ const routes = [
                 meta:{
                     title:'深度学习页面'
                 },
-                component:()=>import(/*webpackChunkName:"dllearning" */ '../views/Dllearning.vue')
+                component:()=>import(/*webpackChunkName:"dllearning" */ '../Dllearning.vue')
             },
             {
                 path:'/dlform',
@@ -123,7 +128,7 @@ const routes = [
                 meta:{
                     title:'配置模型'
                 },
-                component:()=>import(/*webpackChunkName:"dllearning" */ '../views/dlform.vue')
+                component:()=>import(/*webpackChunkName:"dllearning" */ '../DLForm.vue')
             },
             {
                 path:'/configform',
@@ -131,7 +136,7 @@ const routes = [
                 meta:{
                     title:'编辑配置'
                 },
-                component:()=>import(/*webpackChunkName:"configform" */ '../views/ConfigForm.vue')
+                component:()=>import(/*webpackChunkName:"configform" */ '../../ConfigForm.vue')
             },
             {
                 path:'/configformp/:id',
@@ -139,7 +144,7 @@ const routes = [
                 meta:{
                     title:'更改配置'
                 },
-                component:()=>import(/*webpackChunkName:"configform" */ '../views/changeConfig.vue')
+                component:()=>import(/*webpackChunkName:"configform" */ '../../changeConfig.vue')
             },
             {
                 path:'/ConfigDetail',
@@ -147,7 +152,7 @@ const routes = [
                 meta:{
                     title:'配置详情'
                 },
-                component:()=>import(/*webpackChunkName:"configform" */ '../views/ConfigDetail.vue')
+                component:()=>import(/*webpackChunkName:"configform" */ '../../ConfigDetail.vue')
             },
             //无用组件or路由
             // {
@@ -215,7 +220,7 @@ const routes = [
         meta: {
             title: '登录'
         },
-        component: () => import ( /* webpackChunkName: "login" */ "../views/Login.vue")
+        component: () => import ( /* webpackChunkName: "login" */ "../Login.vue")
     }
 ];
 

src/views/user/Message.vue

@@ -8,13 +8,13 @@
         <div class="container">
             <el-tabs v-model="message">
                 <el-tab-pane :label="`未读消息(${state.unread.length})`" name="first">
-                    <el-table :data="state.unread" :show-header="false" style="width: 100%">
+                    <el-table :data="state.unread" :show-header="false" style="width: 100%" @row-click="handleMailDetail">
                         <el-table-column>
                             <template #default="scope">
                                 <span class="message-title">{{scope.row.title}}</span>
                             </template>
                         </el-table-column>
-                        <el-table-column prop="date" width="180"></el-table-column>
+                        <el-table-column prop="time" width="180"></el-table-column>
                         <el-table-column width="120">
                             <template #default="scope">
                                 <el-button size="small" @click="handleRead(scope.$index)">标为已读</el-button>
@@ -68,14 +68,65 @@
             </el-tabs>
         </div>
     </div>
+  <el-dialog :title="title" v-model=" mailDetailVisible" min-width="30%" width="44%" style="">
+    <div style="width: 70%;margin-left: 100px;font-size: 18px; font-weight: bold;color: black;">{{ content }}</div>
+    <div><span style="font-size: 10px; color: black;margin-top: 40px;margin-left: 700px">{{ time }}</span></div>
+
+    <div style="width: 450px;margin-left: 100px;margin-top: 50px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding: 20px">
+      <span style="font-size: 18px; font-weight: bold;color: black;margin-bottom: 20px">回信</span>
+      <el-input
+          type="textarea"
+          autosize
+          placeholder="标题"
+          v-model="mailTitle">
+      </el-input>
+      <div style="margin: 20px 0;"></div>
+      <el-input
+          type="textarea"
+          :autosize="{ minRows: 3, maxRows: 5}"
+          placeholder="正文"
+          v-model="mailContent">
+      </el-input>
+      <el-button type="danger" icon="el-icon-message" big circle style="margin-left: 400px;margin-top: 30px" @click="sendMailTo( )"></el-button>
+    </div>
+    <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="mailDetailVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="">确定</el-button>
+                </span>
+    </template>
+  </el-dialog>
 </template>
 
 <script>
 import { ref, reactive } from "vue";
+import {getUserMail, sendMail} from "../../api/mail";
+import { ElMessage, ElMessageBox } from "element-plus";
 export default {
     name: "message",
     setup() {
+        const title=ref("");
+        const content=ref("");
+        const time=ref("");
         const message = ref("first");
+        const mailDetailVisible=ref(false)
+      const userId=ref()
+      const fromUserId=ref()
+      const mailTitle=ref("")
+      const mailContent=ref("")
+      const sendMailTo=()=>{
+        sendMail({"title":mailTitle,"fromUserId":userId.value,"toUserId":fromUserId.value,"content":mailContent}).then(res=>{
+          if(res.success){
+
+            ElMessage.success("发送成功！")
+            mailContent.value=""
+            mailTitle.value=""
+          }
+          else{
+            ElMessage.error("发送失败！")
+          }
+        })
+      }
         const state = reactive({
             unread: [
                 {
@@ -100,7 +151,22 @@ export default {
                 },
             ],
         });
+        const handleMailDetail=(row, column, event)=>{
+          console.log(row)
+          title.value=row.title
+          content.value=row.content
+          time.value=row.time
+          fromUserId.value=row.fromUserId
+          userId.value=row.toUserId
+          mailDetailVisible.value=true
+        }
 
+        const handleGetMail=()=>{
+          getUserMail({"userId":1}).then(res=>{
+            state.unread=res.object
+          })
+        }
+        handleGetMail();
         const handleRead = (index) => {
             const item = state.unread.splice(index, 1);
             console.log(item);
@@ -118,12 +184,24 @@ export default {
         return {
             message,
             state,
+          title,
+          content,
+          time,
+          mailDetailVisible,
             handleRead,
             handleDel,
             handleRestore,
+          handleGetMail,
+          handleMailDetail,
+          fromUserId,
+          userId,
+          sendMailTo,
+          mailTitle,
+          mailContent
         };
     },
 };
+
 </script>
 
 <style>

前端页面说明.md

@@ -0,0 +1,50 @@
+#  前端页面说明
+前端页面分为两个模块：工作台模块、用户交互模块
+
+components文件夹里面就一些组件，header、siderbar等
+
+## 工作台模块
+
+### src/views/file/FileList.vue
+
+展示用户已经上传的file列表。
+
+### src/views/file/FileDetail.vue
+
+用户查看文件详情，展示文件字段相关内容。该页面还可以选择数据分析方式进行数据分析（皮尔森系数、偏度峰度等），结果通过弹窗展示。
+
+用户可以在该页面选择特征字段来添加配置。
+
+也可以点击自动化特征选择。
+
+### src/views/file/Upload.vue
+
+上传文件
+
+###  src/views/ConfigList.vue
+
+查看用户自己的配置列表
+
+### src/views/ConfigDetail.vue
+
+查看用户的配置详情，用户可在此添加参数生成模型
+
+### src/views/ModelList.vue
+
+查看用户的模型列表，用户可在此选择对未训练的模型进行训练，或查看已经训练的模型训练结果，并使用测试文件对其测试。
+
+##  用户交互模块
+
+### src/views/square.vue
+
+用户交互基本全写在这一个页面里了。。。目前所有api都是mock的
+
+用户可以搜索帖子，收藏帖子，查看帖子详情。
+
+对帖子进行评论、给发帖人发邮件
+
+本来想着可以一键将帖子的配置添加到自己的工作台，但是还没实现。
+
+### src/views/user/Message.vue
+
+用户可以查看别人发的邮件，也可以回邮件。