feat: 1.移动组件 2.file这里加入router

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",
@@ -73,7 +73,7 @@ const routes = [
                 meta: {
                     title: '我的消息'
                 },
-                component: () => import ( /* webpackChunkName: "message" */ "../views/Message.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/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/FileList.vue → src/views/file/FileList.vue

@@ -10,7 +10,7 @@
 
       <el-tabs v-model="message">
 
-        <el-tab-pane :label="`我的文件列表`" name="first">
+        <el-tab-pane :label="`我的文件`" name="first">
           <el-table :data="state.fileList" :show-header="false" style="width: 100%">
 
             <el-table-column>
@@ -28,9 +28,7 @@
                 <!----------------------------todo------------------------------->
                 <!----------------------------获取文件详细信息、跳转到响应页面；删除文件------------------------------->
                 <div style="display:flex;width: 100%;justify-content:space-around;">
-                  <router-link :to="{path:'/fileDetail',query:{fileId:scope.row.fileId}}">
-                    <el-button size="small" @click="handleFileGet(scope.row.fileId)">获取详情</el-button>
-                  </router-link>
+                  <el-button size="small" type="primary" @click="handleFileDetail(scope.row.fileId)">获取详情</el-button>
 
                   <el-button size="small" @click="handleFileDel(scope.$index)">删除文件</el-button>
                 </div>
@@ -39,7 +37,7 @@
           </el-table>
         </el-tab-pane>
 
-        <el-tab-pane :label="`我的图片列表`" name="second">
+        <el-tab-pane :label="`我的图片`" name="second">
           <el-table :data="state.picList" :show-header="false" style="width: 100%">
             <el-table-column>
               <template #default="scope">
@@ -66,13 +64,16 @@
 
 <script>
 import {ref, reactive, onMounted} from "vue";
-import{GetAllFile,getFileDetail} from "../api/file";
-import router from "../router";
+import{GetAllFile,getFileDetail} from "../../api/file";
+import router from "../../router";
+import {useRouter} from "vue-router";
 
 export default {
   name: "fileList",
   setup() {
     const message = ref("first");
+    const router = useRouter();
+
     let userId=1;
     let state = reactive({
       fileList: [
@@ -119,13 +120,18 @@ export default {
     //   state.read = item.concat(state.read);
     // };
 
-    const handleFileGet=(fileId)=>{
-      console.log("handleFileGet")
-      console.log(fileId)
-      getFileDetail(fileId).then(res => {
-        console.log("getFileDetail返回")
-        console.log(res)
+    const handleFileDetail=(fileId)=>{
+      router.push({
+        path:'fileDetail',
+        query:{
+          fileId:fileId,
+        }
       })
+
+      // getFileDetail(fileId).then(res => {
+      //   console.log("getFileDetail返回")
+      //   console.log(res)
+      // })
       // getFileDetail()
       // this.router.push({
       //     path:'fileDetail',
@@ -154,7 +160,7 @@ export default {
     return {
       message,
       state,
-      handleFileGet,
+      handleFileDetail,
       handleFileDel,
       handlePicGet,
       handlePicDel,

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/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: {