src/api/file.js

@@ -19,152 +19,161 @@ export const UploadFile = payload => {
 
 /**
  *  获得文件列表 GET /get/all
- * @param {*} payload
+ * @param {*} userId 用户Id
  * @returns
  */
-export const GetAllFile = payload => {
-    console.log(payload);
-    const {userId} = payload;
-    // return axios.get(`${FILE_MODULE}/get/all`, {params:{userId:userId}}).then(res => {
-    //     return res.data;
-    // });
-
-    return Promise.resolve({
-        "timestamp": 1649397417317,
-        "status": 200,
-        "data": [
-            {
-                "fileId": "1",
-                "fileName": "event_data"
-            }
-        ]
-    })
+export const GetAllFile = userId => {
+    return axios.get(`${FILE_MODULE}/get/all`, {
+        params:{
+            userId: userId
+        }
+    }).then( res => {
+        return res.data;
+    });
 }
 
+// 直接返回数据
+// return Promise.resolve({
+//     "timestamp": 1649397417317,
+//     "status": 200,
+//     "data": [
+//         {
+//             "fileId": "1",
+//             "fileName": "event_data"
+//         }
+//     ]
+// })
+
 /**
  *  获得文件具体信息 GET /get/detail
- * @param {*} payload
+ * @param {*} fileId 文件Id
  * @returns
  */
-export const getFileDetail = payload => {
-    // console.log(payload);
-    // const {fileId} = payload;
-    // 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\"]"
-                }
-            ]
+export const getFileDetail = 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\"]"
+//             }
+//         ]
+//     }
+// })
+
 /**
  *  删除文件 GET /delete
- * @param {*} payload
+ * @param {*} fileId
  * @returns
  */
-export const deleteFile = payload => {
-    console.log(payload);
-    const {fileId} = payload;
-    return axios.get(`${FILE_MODULE}/delete`, {params:{fields:fields}}).then(res => {
-        return res.data;
+export const deleteFile = fileId => {
+    return axios.get(`${FILE_MODULE}/delete`, {
+        params:{
+            fileId: fileId
+        }
+    }).then( res => {
+            return res.data;
     });
 }
 

src/components/Header.vue

@@ -11,7 +11,7 @@
                 <!-- 消息中心 -->
                 <div class="btn-bell">
                     <el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">
-                        <router-link to="/tabs">
+                        <router-link to="/message">
                             <i class="el-icon-bell"></i>
                         </router-link>
                     </el-tooltip>

src/components/Sidebar.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import { computed, watch } from "vue";
+import { computed } from "vue";
 import { useStore } from "vuex";
 import { useRoute } from "vue-router";
 export default {
@@ -75,9 +75,14 @@ export default {
           },
           {
               icon: "el-icon-lx-copy",
-              index: "/tabs",
+              index: "/message",
               title: "我的消息",
           },
+          {
+              icon: "el-icon-user",
+              index: "/user",
+              title: "个人中心",
+          },
           //  无用组件
           // {
           //   icon: "el-icon-lx-calendar",

src/router/index.js

@@ -16,9 +16,9 @@ const routes = [
                 path: "/fileList",
                 name: "fileList",
                 meta: {
-                    title: '文件列表'
+                    title: '我的文件'
                 },
-                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/fileList.vue")
+                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/file/FileList.vue")
             },
             {
                 path: "/modelList",
@@ -34,14 +34,14 @@ const routes = [
                 meta: {
                     title: '文件详情'
                 },
-                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/FileDetail.vue")
+                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/file/FileDetail.vue")
             },{
                 path: "/FileAnalysis",
                 name: "FileAnalysis",
                 meta: {
                     title: '文件分析结果'
                 },
-                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/FileAnalysis.vue")
+                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/file/FileAnalysis.vue")
             },
             {
                 path: "/config",
@@ -68,12 +68,12 @@ const routes = [
                 component: () => import ( /* webpackChunkName: "form" */ "../views/BaseForm.vue")
             },
             {
-                path: "/tabs",
-                name: "tabs",
+                path: "/message",
+                name: "message",
                 meta: {
-                    title: 'tab标签'
+                    title: '我的消息'
                 },
-                component: () => import ( /* webpackChunkName: "tabs" */ "../views/Tabs.vue")
+                component: () => import ( /* webpackChunkName: "message" */ "../views/user/Message.vue")
             },
             {
                 path: "/upload",
@@ -81,7 +81,7 @@ const routes = [
                 meta: {
                     title: '上传插件'
                 },
-                component: () => import ( /* webpackChunkName: "upload" */ "../views/Upload.vue")
+                component: () => import ( /* webpackChunkName: "upload" */ "../views/file/Upload.vue")
             },
             {
                 path: '/user',
@@ -89,7 +89,7 @@ const routes = [
                 meta: {
                     title: '个人中心'
                 },
-                component: () => import (/* webpackChunkName: "user" */ '../views/User.vue')
+                component: () => import (/* webpackChunkName: "user" */ '../views/user/User.vue')
             },
             {
                 path:'/dllearning',

src/views/dlform.vue → src/views/DLForm.vue

@@ -95,7 +95,7 @@
 import { reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
 export default {
-  name: "baseform",
+  name: "DLForm",
   setup() {
     const options = [
       {

src/views/FileList.vue

@@ -1,209 +0,0 @@
-<!--<template>-->
-<!--<div className="home-page">-->
-<!--<div className="sub-menu">-->
-<!--  <button class="el-button el-button&#45;&#45;primary" type="button" data-v-4eda24fc="">&lt;!&ndash;v-if&ndash;&gt;<i class="el-icon-upload"></i><span>上传</span></button>-->
-
-
-<!--  <button class="el-button el-button&#45;&#45;primary" type="button" data-v-4eda24fc="">&lt;!&ndash;v-if&ndash;&gt;<i class="el-icon-s-home"></i><span>模型</span></button>-->
-<!--</div>-->
-<!--<div className="carousel-page">-->
-<!--  <h3 className="img-list-title">图片文件列表</h3>-->
-
-
-
-
-<!--    <el-table  :show-header="false" style="width: 100%">-->
-<!--      <div>1</div>>-->
-<!--    </el-table>-->
-
-
-
-
-
-
-<!--</div>-->
-<!--</div>-->
-<!--</template>-->
-
-
-<template>
-  <div class="">
-    <div class="crumbs">
-      <el-breadcrumb separator="/">
-        <el-breadcrumb-item><i class="el-icon-lx-file"></i> 我的文件</el-breadcrumb-item>
-      </el-breadcrumb>
-    </div>
-    <div class="container">
-      <el-tabs v-model="message">
-        <el-tab-pane :label="`我的文件列表`" name="first">
-          <el-table :data="state.fileList" :show-header="false" style="width: 100%">
-            <el-table-column>
-              <template #default="scope">
-                <span class="message-title">{{scope.row.fileName}}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="date" width="180"></el-table-column>
-            <el-table-column width="120">
-              <template #default="scope">
-                <!----------------------------todo------------------------------->
-                <!----------------------------获取文件详细信息、跳转到响应页面；删除文件------------------------------->
-                <router-link :to="{path:'/fileDetail',query:{fileId:scope.row.fileId}}">
-                <!--<router-link to="/dashboard">-->
-                <el-button size="small" @click="handleFileGet(scope.row.fileId)">获取详情</el-button>
-                </router-link>
-                <el-button size="small" @click="handleFileDel(scope.$index)">删除文件</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-<!--          <div class="handle-row">-->
-<!--            <el-button type="primary">全部标为已读</el-button>-->
-<!--          </div>-->
-
-<!--            <button class="el-button el-button&#45;&#45;primary" type="button" data-v-4eda24fc="">&lt;!&ndash;v-if&ndash;&gt;<i class="el-icon-upload"></i><span>上传</span></button>-->
-
-<!--            <router-link to="/config">-->
-<!--&lt;!&ndash;            <button class="el-button el-button&#45;&#45;primary" type="button" data-v-4eda24fc="">&lt;!&ndash;v-if&ndash;&gt;<i class="el-icon-s-home"></i><span>添加模型</span></button>&ndash;&gt;-->
-<!--              <el-button type="primary" size="large">配置模型</el-button>-->
-<!--            </router-link>-->
-
-
-        </el-tab-pane>
-        <el-tab-pane :label="`我的图片列表`" name="second">
-          <el-table :data="state.picList" :show-header="false" style="width: 100%">
-            <el-table-column>
-              <template #default="scope">
-                <span class="message-title">{{scope.row.picName}}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="date" width="180"></el-table-column>
-            <el-table-column width="120">
-              <template #default="scope">
-                <el-button size="small" @click="handlePicDel(scope.$index)">删除图片</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-tab-pane>
-        <router-link to="/upload">
-          <el-button type="primary" size="large">文件上传</el-button>
-        </router-link>
-
-
-      </el-tabs>
-    </div>
-  </div>
-</template>
-
-<script>
-import {ref, reactive, onMounted} from "vue";
-import{GetAllFile,getFileDetail} from "../api/file";
-import router from "../router";
-
-export default {
-  name: "tabs",
-  setup() {
-    const message = ref("first");
-    let userId=1;
-    let state = reactive({
-      fileList: [
-        {
-          date: "2018-04-19 20:00:00",
-          fileId: "1",
-          fileName:"文件1"
-        },
-        {
-          date: "2018-04-19 21:00:00",
-          fileId: "2",
-          fileName:"文件2"
-        },
-      ],
-      picList:[
-        {
-          date: "2018-04-19 20:00:00",
-          picId: "1",
-          picName:"图片1"
-        }
-      ],
-      // read: [
-      //   {
-      //     date: "2018-04-19 20:00:00",
-      //     title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
-      //   },
-      // ],
-      // recycle: [
-      //   {
-      //     date: "2018-04-19 20:00:00",
-      //     title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
-      //   },
-      // ],
-    });
-
-    // const handleRead = (index) => {
-    //   const item = state.unread.splice(index, 1);
-    //   console.log(item);
-    //   state.read = item.concat(state.read);
-    // };
-    let getFileList=(userId)=>{
-      //todo: 调用getall接口，将数据复制给fileList
-    GetAllFile(userId).then(res=>{
-      state.fileList=res.data;
-    })
-    };
-    getFileList(userId);
-    const handleFileDel = (index) => {
-      console.log("handleFileDel")
-      console.log(index)
-      state.fileList.splice(index, 1);
-      //todo:调用删除接口
-    };
-    // const handleRestore = (index) => {
-    //   const item = state.recycle.splice(index, 1);
-    //   state.read = item.concat(state.read);
-    // };
-    const handleFileGet=(index)=>{
-      console.log("handleFileGet")
-      console.log(index)
-      // this.router.push({
-      //     path:'fileDetail',
-      //   query:{
-      //     fileId:index
-      //   }
-      // })
-
-      //todo:吧要查看的文件id传参
-    }
-
-    const handlePicDel = (index) => {
-      console.log("handlePicDel")
-      console.log(index)
-      state.fileList.splice(index, 1);
-      //todo:调用删除接口
-    };
-    const handlePicGet=(index)=>{
-      console.log("handlePicGet")
-      console.log(index)
-
-      //todo:吧要查看的图片id传参
-    }
-
-    return {
-      message,
-      state,
-      handleFileGet,
-      handleFileDel,
-      handlePicGet,
-      handlePicDel,
-      getFileList,
-    };
-  },
-};
-</script>
-
-<style>
-.message-title {
-  cursor: pointer;
-}
-.handle-row {
-  margin-top: 30px;
-}
-</style>
-

src/views/ModelList.vue

@@ -104,8 +104,5 @@ export default {
 .message-title {
   cursor: pointer;
 }
-.handle-row {
-  margin-top: 30px;
-}
 </style>
 

src/views/FileAnalysis.vue → src/views/file/FileAnalysis.vue

@@ -1,190 +1,190 @@
-<template>
-  <div>
-  <div class="crumbs">
-    <el-breadcrumb separator="/">
-      <el-breadcrumb-item>
-        <i class="el-icon-lx-cascades"></i> 文件分析结果
-      </el-breadcrumb-item>
-    </el-breadcrumb>
-    </div>
-    <div class="container" style="width: 900px;height:900px;">
-      <div class="handle-box" v-show="distributionVisible">
-        <el-table :data="distributionData" border class="table"  header-cell-class-name="table-header">
-          <el-table-column label="字段值">
-            <template #default="scope"><span>{{ scope.row.key }}</span></template>
-          </el-table-column>
-          <el-table-column label="统计值">
-            <template #default="scope"><span>{{ scope.row.statistical }}</span></template>
-          </el-table-column>
-          <el-table-column label="分布">
-            <template #default="scope"><span>{{ scope.row.distribution }}</span></template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div class="handle-box" v-show="ScatterVisible" id="echarts_box" style="width: 100%;height:100%;">
-
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import {ref} from "vue";
-import {analysisFile} from "../api/file";
-import {ElMessageBox} from "element-plus";
-import {useRoute} from "vue-router";
-import {useRouter} from "vue-router";
-import * as echarts from 'echarts';
-import 'echarts-gl';
-
-export default {
-  name: "FileAnalysis",
-  setup(){
-    let fieldIds="";
-    let funcId="";
-    let distributionData=[];
-    let distributionVisible=false;
-    let ScatterVisible=false;
-
-    const transferData=(res,d)=>{
-      let ans=[];
-      let size=0;
-      for (var key in res){
-        size=res[key].length;
-        break;
-      }
-      for (var i=0;i<size;i++){
-        let list=[];
-        for (var key in res){
-          list.push((res[key])[i]);
-        }
-        ans.push(list);
-      }
-      return ans;
-    };
-
-    const paint_2d=(res,fields)=>{
-      var data=transferData(res,2);
-      console.log(data);
-
-      var chartDom = document.getElementById('echarts_box');
-      var myChart = echarts.init(chartDom);
-      var option = {
-        xAxis: {},
-        yAxis: {},
-        series: [
-          {
-            symbolSize: 10,
-            data: data,
-            type: 'scatter'
-          }
-        ]
-      };
-      option && myChart.setOption(option);
-    };
-
-    const paint_3d=(res,fields)=> {
-      var data=transferData(res,3);
-      console.log(data);
-      var chartDom = document.getElementById('echarts_box');
-      var myChart = echarts.init(chartDom,'light');
-      var option = {
-        grid3D: {},
-        xAxis3D: {},
-        yAxis3D: {},
-        zAxis3D: {},
-        series: [{
-          symbolSize: 10,
-          type: 'scatter3D',
-          data: data
-        }]
-      };
-      option && myChart.setOption(option);
-    };
-
-    const getAnalysisData = () =>{
-      const route=useRoute();
-      if (route.query.fieldIds!=null) fieldIds=route.query.fieldIds;
-      if (route.query.funcId!=null) funcId=route.query.funcId;
-
-      console.log(fieldIds)
-      console.log(funcId)
-      if (funcId=="1") {
-        distributionVisible=true;
-      }else {
-        ScatterVisible=true;
-      }
-
-      analysisFile(fieldIds,funcId).then(res=>{
-          console.log(res.data)
-          if (res.status!=200){
-            ElMessageBox.confirm("分析产生错误，请检查您的分析方法和字段选择是否合理", "错误", {
-              type: "error",
-            }).then(()=>{
-                //todo:回到上一界面
-              router.back();
-              })
-              .catch(() => {});
-          }else {
-            //todo:
-            var fieldArr=(JSON.parse(fieldIds));
-            switch(funcId){
-              case "1":
-                var id=fieldArr[0];
-                var str1=id+"_distribution";
-                var str2=id+"_statistical";
-                //console.log(str1);
-                //console.log(str2);
-                var distr=res.data[str1];
-                var statis=res.data[str2];
-                console.log(distr);
-                console.log(statis);
-                for (var key in statis){
-                  var value1=statis[key];
-                  var value2=distr[key];
-                  distributionData.push({key:key,statistical:value1,distribution:value2});
-                }
-                console.log(distributionData);
-                break;
-              case "2":
-                var size=fieldArr.length;
-                console.log(size);
-                switch (size){
-                  case 1:
-                    break;
-                  case 2:
-                    paint_2d(res.data,fieldArr);
-                    break;
-                  case 3:
-                    paint_3d(res.data,fieldArr);
-                    break;
-                }
-                break;
-            }
-          }
-      });
-    };
-
-    getAnalysisData();
-
-    return {
-      fieldIds,
-      funcId,
-      ScatterVisible,
-      distributionVisible,
-      distributionData,
-      getAnalysisData,
-    }
-  },
-};
-</script>
-
-<style scoped>
-.container{
-  margin-top: 10px;
-  margin: 0 auto;
-}
-.handle-box {
-  margin-bottom: 20px;
-}
-</style>
+<template>
+  <div>
+  <div class="crumbs">
+    <el-breadcrumb separator="/">
+      <el-breadcrumb-item>
+        <i class="el-icon-lx-cascades"></i> 文件分析结果
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+    </div>
+    <div class="container" style="width: 900px;height:900px;">
+      <div class="handle-box" v-show="distributionVisible">
+        <el-table :data="distributionData" border class="table"  header-cell-class-name="table-header">
+          <el-table-column label="字段值">
+            <template #default="scope"><span>{{ scope.row.key }}</span></template>
+          </el-table-column>
+          <el-table-column label="统计值">
+            <template #default="scope"><span>{{ scope.row.statistical }}</span></template>
+          </el-table-column>
+          <el-table-column label="分布">
+            <template #default="scope"><span>{{ scope.row.distribution }}</span></template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="handle-box" v-show="ScatterVisible" id="echarts_box" style="width: 100%;height:100%;">
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {ref} from "vue";
+import {analysisFile} from "../../api/file";
+import {ElMessageBox} from "element-plus";
+import {useRoute} from "vue-router";
+import {useRouter} from "vue-router";
+import * as echarts from 'echarts';
+import 'echarts-gl';
+
+export default {
+  name: "FileAnalysis",
+  setup(){
+    let fieldIds="";
+    let funcId="";
+    let distributionData=[];
+    let distributionVisible=false;
+    let ScatterVisible=false;
+
+    const transferData=(res,d)=>{
+      let ans=[];
+      let size=0;
+      for (var key in res){
+        size=res[key].length;
+        break;
+      }
+      for (var i=0;i<size;i++){
+        let list=[];
+        for (var key in res){
+          list.push((res[key])[i]);
+        }
+        ans.push(list);
+      }
+      return ans;
+    };
+
+    const paint_2d=(res,fields)=>{
+      var data=transferData(res,2);
+      console.log(data);
+
+      var chartDom = document.getElementById('echarts_box');
+      var myChart = echarts.init(chartDom);
+      var option = {
+        xAxis: {},
+        yAxis: {},
+        series: [
+          {
+            symbolSize: 10,
+            data: data,
+            type: 'scatter'
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    };
+
+    const paint_3d=(res,fields)=> {
+      var data=transferData(res,3);
+      console.log(data);
+      var chartDom = document.getElementById('echarts_box');
+      var myChart = echarts.init(chartDom,'light');
+      var option = {
+        grid3D: {},
+        xAxis3D: {},
+        yAxis3D: {},
+        zAxis3D: {},
+        series: [{
+          symbolSize: 10,
+          type: 'scatter3D',
+          data: data
+        }]
+      };
+      option && myChart.setOption(option);
+    };
+
+    const getAnalysisData = () =>{
+      const route=useRoute();
+      if (route.query.fieldIds!=null) fieldIds=route.query.fieldIds;
+      if (route.query.funcId!=null) funcId=route.query.funcId;
+
+      console.log(fieldIds)
+      console.log(funcId)
+      if (funcId=="1") {
+        distributionVisible=true;
+      }else {
+        ScatterVisible=true;
+      }
+
+      analysisFile(fieldIds,funcId).then(res=>{
+          console.log(res.data)
+          if (res.status!=200){
+            ElMessageBox.confirm("分析产生错误，请检查您的分析方法和字段选择是否合理", "错误", {
+              type: "error",
+            }).then(()=>{
+                //todo:回到上一界面
+              router.back();
+              })
+              .catch(() => {});
+          }else {
+            //todo:
+            var fieldArr=(JSON.parse(fieldIds));
+            switch(funcId){
+              case "1":
+                var id=fieldArr[0];
+                var str1=id+"_distribution";
+                var str2=id+"_statistical";
+                //console.log(str1);
+                //console.log(str2);
+                var distr=res.data[str1];
+                var statis=res.data[str2];
+                console.log(distr);
+                console.log(statis);
+                for (var key in statis){
+                  var value1=statis[key];
+                  var value2=distr[key];
+                  distributionData.push({key:key,statistical:value1,distribution:value2});
+                }
+                console.log(distributionData);
+                break;
+              case "2":
+                var size=fieldArr.length;
+                console.log(size);
+                switch (size){
+                  case 1:
+                    break;
+                  case 2:
+                    paint_2d(res.data,fieldArr);
+                    break;
+                  case 3:
+                    paint_3d(res.data,fieldArr);
+                    break;
+                }
+                break;
+            }
+          }
+      });
+    };
+
+    getAnalysisData();
+
+    return {
+      fieldIds,
+      funcId,
+      ScatterVisible,
+      distributionVisible,
+      distributionData,
+      getAnalysisData,
+    }
+  },
+};
+</script>
+
+<style scoped>
+.container{
+  margin-top: 10px;
+  margin: 0 auto;
+}
+.handle-box {
+  margin-bottom: 20px;
+}
+</style>

src/views/FileDetail.vue → src/views/file/FileDetail.vue

@@ -150,8 +150,8 @@
 <script>
 import {ref, reactive, getCurrentInstance, onMounted} from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { fetchData } from "../api/index";
-import {getFileDetail,analysisFile} from "../api/file";
+import { fetchData } from "../../api";
+import {getFileDetail,analysisFile} from "../../api/file";
 import {useRoute}from "vue-router";
 import {useRouter}from "vue-router";
 import { toRaw } from '@vue/reactivity'

src/views/file/FileList.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="">
+    <div class="crumbs">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item><i class="el-icon-lx-file"></i> 我的文件</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <div class="container">
+
+      <el-tabs v-model="currentTab">
+
+        <el-tab-pane :label="`我的文件`" name="first">
+          <el-table :data="state.fileList" :show-header="true" style="width: 100%">
+
+            <el-table-column label="文件名">
+              <template #default="scope">
+                <span class="message-title">{{scope.row.fileName}}</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column width="240" label="操作">
+              <template #default="scope">
+                <!----------------------------todo------------------------------->
+                <!----------------------------获取文件详细信息、跳转到响应页面；删除文件------------------------------->
+                <div style="display:flex;width: 100%;justify-content:space-around;">
+                  <el-button size="small" @click="handleFileDetail(scope.row.fileId)">查看详情</el-button>
+
+                <!--  scope.$index 是数组下标,这里再传一个fileId             handleFileDelete(scope.$index,scope.row.fileId)   -->
+                  <el-button size="small" type="danger"  @click="handleDeleteDialog(scope.row.fileId);dialogVisible=true">
+                    删除文件
+                  </el-button>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+
+        <el-tab-pane :label="`我的图片`" name="second">
+          <el-table :data="state.picList" :show-header="true" style="width: 100%">
+            <el-table-column label="图片名">
+              <template #default="scope">
+                <span class="message-title">{{scope.row.picName}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="date" label="上传日期"></el-table-column>
+            <el-table-column width="240" label="操作">
+              <template #default="scope">
+                <div style="display:flex;width: 100%;justify-content:space-around;">
+                  <el-button size="small" type="primary" @click="handlePicDetail(scope.row.picId)">查看详情</el-button>
+
+                  <el-button size="small" @click="handlePicDelete(scope.$index)">删除图片</el-button>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+
+        <router-link to="/upload">
+          <el-button type="primary" size="large">文件上传</el-button>
+        </router-link>
+      </el-tabs>
+    </div>
+
+    <!--  对话框  -->
+    <el-dialog
+        v-model="dialogVisible"
+        title="确认删除"
+        width="30%"
+    >
+      <span>确认要删除该文件吗?</span>
+      <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false;toDeleteFileId=0;">
+          取消
+        </el-button>
+        <el-button type="danger" @click="dialogVisible = false;toDeleteFileId=0;handleFileDelete()">
+          确认
+        </el-button>
+      </span>
+      </template>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import {ref, reactive} from "vue";
+import {deleteFile, GetAllFile} from "../../api/file";
+import {useRouter} from "vue-router";
+import {ElMessage} from "element-plus";
+
+export default {
+  name: "fileList",
+  setup() {
+    const currentTab = ref("first");
+    const router = useRouter();
+
+    let userId=1;
+    let state = reactive({
+      fileList: [
+        {
+          fileId: "",
+          fileName:"",
+        },
+      ],
+      picList:[
+        {
+          date: "2018-04-19 20:00:00",
+          picId: "1",
+          picName:"图片1"
+        }
+      ],
+    });
+    let dialogVisible=ref(false);
+    let toDeleteFileId=ref(0);
+
+    //用户Id => 文件列表
+    const getFileList=(userId)=>{
+      GetAllFile(userId).then(res=>{
+        if(res.status===200){
+          state.fileList=res.data;
+        }
+        else{
+          console.log("getFileList Error!");
+          ElMessage.error("获取文件列表失败!")
+        }
+      })
+    };
+
+    //查看文件详情
+    const handleFileDetail=(fileId)=>{
+      router.push({
+        path:'fileDetail',
+        query:{
+          fileId:fileId,
+        }
+      })
+    }
+
+    //打开提示确认删除的对话框，将fileId保存下来
+    const handleDeleteDialog = (fileId)=>{
+      toDeleteFileId=fileId;
+      ElMessage.info("fileId:"+fileId)
+    }
+
+    //删除对应文件
+    const handleFileDelete = (fileId) => {
+      deleteFile(fileId).then(res=>{
+        if(res.code===200){
+          ElMessage.success("删除成功!")
+          getFileList(userId);
+        }
+        else{
+          ElMessage.error("删除失败!错误码:"+res.status)
+        }
+      })
+    };
+
+    //todo:调用删除图片的接口,后面再做吧
+    const handlePicDelete = (index) => {
+      console.log("handlePicDelete")
+      console.log(index)
+      state.fileList.splice(index, 1);
+    };
+    //获取图片详情
+    //todo:把要查看的图片id传参
+    const handlePicDetail=(index)=>{
+      console.log("handlePicDetail")
+      console.log(index)
+    }
+
+    //初始化
+    getFileList(userId);
+
+    return {
+      currentTab,
+      state,
+
+      dialogVisible,
+      toDeleteFileId,
+      handleDeleteDialog,
+
+      handleFileDetail,
+      handleFileDelete,
+      handlePicDetail,
+      handlePicDelete,
+      getFileList,
+    };
+  },
+};
+</script>
+
+<style>
+.message-title {
+  cursor: pointer;
+}
+.handle-row {
+  margin-top: 30px;
+}
+</style>
+

src/views/Upload.vue → src/views/file/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/views/Tabs.vue → src/views/user/Message.vue

@@ -73,7 +73,7 @@
 <script>
 import { ref, reactive } from "vue";
 export default {
-    name: "tabs",
+    name: "message",
     setup() {
         const message = ref("first");
         const state = reactive({

src/views/User.vue → src/views/user/User.vue

@@ -65,7 +65,7 @@
 import { reactive, ref } from "vue";
 import VueCropper from "vue-cropperjs";
 import "cropperjs/dist/cropper.css";
-import avatar from "../assets/img/img.jpg";
+import avatar from "../../assets/img/img.jpg";
 export default {
     name: "user",
     components: {

vite.config.js

@@ -9,8 +9,6 @@ export default {
 
     server:{
         proxy: {
-
-
             '/api': 'http://114.212.245.120:7788/',
             // '/api': {
             //     target: 'http://114.212.245.120:7788/',