Merge branch 'master' of https://gitlink.org.cn/SheYuWu03/front

2024-07-05 10:29:45 +08:00 · 2024-07-05 10:29:45 +08:00 · 99cc371e7b
parent 2d34c42fbc c1581bc43f
commit 99cc371e7b
14 changed files with 361 additions and 215 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -1,10 +1,9 @@
 <template>
-  <div id="App">
-    <IndexPage></IndexPage>
-  </div>
+    <IndexPage /> 
 </template>

 <script>
+import { provide,ref } from 'vue';
 import IndexPage from './views/IndexPage.vue';

 export default {
@ -13,6 +12,15 @@ export default {
    IndexPage
  }
 }
+const siderBarWidth = ref("200px");
+const toggleMenu = ()=>{
+  if(siderBarWidth.value == "200px")
+    siderBarWidth.value = "100px";
+  else
+    siderBarWidth.value = "200px";
+}
+provide('siderBarWidth',siderBarWidth);
+provide('toggleMenu',toggleMenu);
 </script>

 <style scoped>
--- a/src/assets/css/guidinguislogen.svg
+++ b/src/assets/css/guidinguislogen.svg
--- a/src/components/AsideMenu.vue
+++ b/src/components/AsideMenu.vue
@ -0,0 +1,134 @@
+<!-- /**用于显示sidebar的页面 */ -->
+<template>
+    <!-- 这一层用来放边栏 -->
+    <el-container style="height: 100%; border: 0px; background-color: #f5f6fa; width:100%">
+      <el-header class = "containerSystemName">
+        <!-- 这里要放两个部件，一个是系统名称一个是折叠按钮 -->
+         <!-- 这里主要调整el-container的布局模式就直接写在这里了 -->
+         <el-container style = 'padding: 0'>
+          <el-container class = 'text-systemName'>
+            <el-text v-show = '!isFold' style="color: white; font-size: 16px;">线索库系统</el-text>
+          </el-container>
+          <el-button class ='btnFold' @click = 'handleFold'><el-icon><Fold /></el-icon></el-button>
+         </el-container>
+      </el-header>
+      <el-menu class = 'containerSelections' 
+        router
+        >
+        <el-menu-item index="/Home">
+          <el-icon><HomeFilled /></el-icon>
+          <span v-show = '!isFold'>首页</span>
+        </el-menu-item>
+        <el-menu-item index="/Delete">
+          <el-icon><DeleteFilled /></el-icon>
+          <span v-show = '!isFold'>回收站</span>
+        </el-menu-item>
+        <!--
+          @brief: 用于调试我设计的各种界面，相当于一个画板
+          @date: 2024年6月29日
+          @author: myz
+        -->
+        <el-menu-item index="/test">
+          <el-icon><View /></el-icon>
+          <span v-show = '!isFold'>测试专用</span>
+        </el-menu-item>
+      </el-menu>
+    </el-container>
+</template>
+
+<script>
+export default{
+  name:'AsideMenu',
+  props: {
+    isCollapse: Boolean
+  },
+  data(){
+    // 控制折叠状态变量:
+    return {
+      isFold:false,
+    }
+  },
+  methods:{
+    // 控制折叠状态
+    handleFold(){
+      this.isFold = !this.isFold;
+      // 向indexPage传递边栏的折叠状态
+      if(this.isFold)
+        this.$emit('update:isCollapse',true);
+      else
+        this.$emit('update:isCollapse',false);
+    }
+  },
+}
+</script>
+
+/**
+  @brief: CSS设计
+  @date: 2024年6月20日
+  @author: myz
+*/
+<style scoped>
+.containerSystemName{
+  color:white;    /**字体颜色为白色 */
+  background-color: #158484; /* 容器背景颜色 */
+  display: flex;
+  justify-content: center; /**水平居中 */
+  align-items: center;  /**竖直居中 */
+  font-weight: bolder; /** 字体加粗 */
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /*设置字体*/
+  font-size: 14px;  /**字体大小 */
+  height:8%;
+  width: 100%;
+  padding-left:0;
+  padding-right:3px;
+}
+.el-text{
+  color:white
+}
+.text-systemName{
+  background-color: #158484; /* 容器背景颜色 */
+  display: flex;
+  /**竖直居中 */
+  align-items: center;  
+  /**水平居中 */
+  justify-content: center; 
+  height:100%;
+  padding:0;
+}
+.containerSelections{
+  color: white;
+  background-color: #1DAFAF;
+  height: 92%;
+  width:100%;
+  border:0px;
+}
+
+.el-menu-item{
+  color:white;
+  font-weight: bold;
+  width: 100%;
+}
+/**覆写悬浮，选中等样式 */
+:deep .el-menu-item:hover{
+  background-color: #1ad4c4d4;
+  color: antiquewhite;
+}
+:deep  .el-menu-item.is-active{
+  color: #158484;
+}
+
+.btnFold{
+  display: flex;
+  align-items: center;
+  color: #0E5858;
+  font-size: 28px;
+  background-color: transparent;
+  border: 0;
+}
+
+.btnFold:hover{
+  background-color: transparent;
+  color:#1ad4c4d4;
+}
+
+</style>
--- a/src/components/HeaderPage.vue
+++ b/src/components/HeaderPage.vue
@ -1,9 +1,8 @@
 <!-- /***用于显示边栏的页面 */ -->
 <template>
-  <div class="toolbar">
-    <el-icon @click="collapse"><Fold /></el-icon>
-    <span class = "pageName">{{ pageTitle }}</span>
-  </div>
+  <el-container class = 'toolbar' >
+    <el-text class = "pageName">{{ pageTitle }}</el-text>
+  </el-container>
 </template>

 <script>
@ -20,34 +19,24 @@ export default {
    logout(){
      console.log('logout')
    },
-    collapse(){
-      this.$emit('doCollapse')
-    }
  }
 }
 </script>

 <style scoped>
 .toolbar{
-  display: flex;
  background-color: white;
  color: #6B6363;
+  display: flex;
  height:100%;
  width: 100%;
  align-items: center;
-  justify-content: space-between;
-}
-.el-icon{
-  color: #0E5858;
-  font-size: 28px;
-  margin-right: 42%;
+  justify-content: center;
 }
+
 .pageName{
-  flex-grow: 1;
  font-size: 24px;
  font-weight: bold;
 }
-.el-button:hover{
-	background-color: rgba(255, 255, 255, 0.7);
-}
+
 </style>
--- a/src/components/chart/ShowChart.vue
+++ b/src/components/chart/ShowChart.vue
@ -1,14 +0,0 @@
-<template>
-  <span>展示表的页面</span>
-</template>
-
-<script>
-  export default {
-    name: "ShowChart"
-  }
-
-</script>
-
-<style scoped>
-
-</style>
--- a/src/components/components_cluespage/AddDialog.vue
+++ b/src/components/components_cluespage/AddDialog.vue
@ -0,0 +1,84 @@
+<template>
+    <el-dialog
+        title="添加线索"
+        v-model='dialogVisible'
+        draggable
+        align-center=true
+        @close="onClose"
+    >
+        <el-container>
+            <el-form label-width="100px">
+                <el-form-item v-for="(col, index) in addClueCols" :key="index" :label="col.col_name">
+                    <el-input v-model="formData['col_'+col.col_id]" :placeholder="'输入' + col.col_name"></el-input>
+                </el-form-item>
+            </el-form>
+            <el-footer class="dialog-footer">
+                <el-button @click="clickToCloseDialog">取 消</el-button>
+                <el-button type="primary" @click="onSave">保 存</el-button>
+            </el-footer>
+        </el-container>
+    </el-dialog>
+
+</template>
+
+<script>
+
+export default {
+    name:'AddDialog',
+    props: {
+        visible:Boolean,
+        addClueCols:Array,
+        id:Number,
+        tableId:String,
+    },
+    data() {
+        return{
+            formData:{},
+            dialogVisible:false,
+        }
+    },
+    watch: {
+        visible(value){
+            this.dialogVisible = value;
+        },
+    },
+    methods: {
+        clickToCloseDialog(){
+            this.dialogVisible = false;
+        },
+        onClose(){
+            this.formData = {};
+            this.dialogVisible = false;
+        },
+        onSave(){
+            this.formData.clue_id = this.id;
+            this.formData.delete_flag = 0;
+            console.log('修改后: ',this.formData);
+            this.$axios.post('http://localhost:8000/addOneClue/',
+                {table_id:this.tableId,record:this.formData})
+            .then(response=>{
+                if(response.data.message == '插入成功'){
+                    this.$message({
+                        type:'success',
+                        message:'插入成功'
+                    });
+                    location.reload();
+                }else if(response.data.message == '插入失败'){
+                    this.$message({
+                        typeof:'error',
+                        message:'插入失败,请对应数据格式,请重试!'
+                    })
+                }
+            })
+            .catch(error=>{
+                this.$handleNetError(error);
+            })
+        }
+    },
+
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/components/components_cluespage/EditDialog.vue
+++ b/src/components/components_cluespage/EditDialog.vue
@ -87,6 +87,7 @@
                }).catch(error => {
                    this.$handleNetError(error);
                });
+                location.reload();
            },
            onOpen(){
                console.log('修改前的数据：',this.formData);
--- a/src/components/components_homepage/ShowCluesTable.vue
+++ b/src/components/components_homepage/ShowCluesTable.vue
@ -1,9 +1,10 @@
 <template>
  <!-- 父组件:HomePage -->
  <div class="card-container">
+    <!-- PS: 网络版本将替换'tableData' 为 'cluesTableData' -->
    <el-card v-for="(item, index) in tableData" :key="index" class="card-item">
      <div class="card-content">
-        <h2 class = 'cdbID'>线索库ID:{{ item.clue_id }}</h2>
+        <h2 class = 'cdbID'>线索库唯一标识:{{ item.clue_id }}</h2>
        <h1 class = 'cdbName'>线索库名:{{ item.name }}</h1>
        <el-button size="small" round @click="watchClue(item)">
          查看
@ -19,21 +20,19 @@
 <script>
  export default{
    name:'ShowCluesTable',
-    components:{
-      
-    },
-    // 接收父组件传来的参数
    props:{
      isFileUploaded: Boolean, // 声明接收的布尔型属性
    },
    data(){
+      // 测试用自定义结构
      const item = {
-        clue_id: '10',
+        id: '10',
        name: '线索库1'
      };
      return {
        // 真实数据
        cluesTableData:[],
+        // 测试数据
        tableData: Array(5).fill(item)
      }
    },
@ -54,7 +53,7 @@
        // console.log("数据记录:", row);
        // 使用动态路由，将数据记录中的id与title传递给Details页面
        // Details与index.ts中的name对应
-        this.$router.push({name:'Details',params:{id:row.clue_id,pageTitle:row.name}})
+        this.$router.push({name:'Details',params:{id:row.id,pageTitle:row.name}})
      },
      deleteClue(row){
        // 删除一个线索库
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -1,11 +1,11 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
-import IndexPage from '@/views/IndexPage.vue'
+

 const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'index',
-    component: IndexPage,
+    redirect: '/Home',
    children: [
      {
        path:'/Home',
@ -15,14 +15,9 @@ const routes: Array<RouteRecordRaw> = [
      {
        path:'/Graph/:columns/:tabledata',
        name:'Graph',
-        component:()=>import('@/components/graph/ShowGraph.vue'),
+        component:()=>import('@/views/ShowGraph.vue'),
        props:true
      },
-      {
-        path:'/Chart',
-        name:'Chart',
-        component:()=>import('@/components/chart/ShowChart.vue')
-      },
      {
        // 动态路由， 添加:id（必须添加否则传不进参数），获取点击按钮时传来的线索库id
        path:'/Details/:id/:pageTitle',
@ -38,7 +33,7 @@ const routes: Array<RouteRecordRaw> = [
      {
        path: '/test',
        name: 'test',
-        component: ()=>import('@/components/components_cluespage/ConstraintSearchDialog.vue')
+        component: ()=>import('@/components/HeaderPage.vue')
      }
    ]
  }
--- a/src/views/AsideMenu.vue
+++ b/src/views/AsideMenu.vue
@ -1,95 +0,0 @@
-<!-- /**用于显示sidebar的页面 */ -->
-<template>
-  <el-container style="height: 100%; border: 0px solid #eee">
-    <el-header class = "containerSystemName">
-      <span>Clues Database System</span>
-    </el-header>
-      <el-menu class = 'containerSelections' router>
-        <el-menu-item index="/Home">
-          <el-icon><HomeFilled /></el-icon>
-          <template #title>首页
-          </template>
-        </el-menu-item>
-        <el-menu-item index="/Delete">
-          <el-icon><DeleteFilled /></el-icon>
-          <template #title>回收站
-          </template>
-        </el-menu-item>
-        <!-- @author myz 
-         @brief : 仅仅用于我个人调试 -->
-        <el-menu-item index="/test">
-          <el-icon><View /></el-icon>
-          <template #title>editor
-          </template>
-        </el-menu-item>
-      </el-menu>
-  </el-container>
-  
-</template>
-
-<script>
-
-export default{
-  name:'AsideMenu',
-  components:{
-    
-  },
-  data(){
-    return {
-      dialogVisible:false,
-      // homeRouter:'/Home'
-    }
-  },
-  methods:{
-    handleUpload(){
-      // 关闭弹窗
-      this.dialogVisible = false;
-    }
-  },
-  props:{
-    isCollapse:Boolean,
-    // homeRouter:String
-  }
-}
-</script>
-
-/**
-  @brief: CSS设计
-  @date: 2024年6月20日
-  @author: myz
-*/
-<style scoped>
-.sub-menu-collapse .el-sub-menu__title span{
-  display: none;
-}
-.containerSystemName{
-  color:white;    /**字体颜色为白色 */
-  background-color: #158484; /** 容器背景颜色 */
-  display: flex;
-  justify-content: center; /**水平居中 */
-  align-items: center;  /**竖直居中 */
-  font-weight: bolder; /** 字体加粗 */
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /*设置字体*/
-  font-size: 14px;  /**字体大小 */
-  height:8%;
-}
-.containerSelections{
-  color: white;
-  background-color: #1DAFAF;
-  height: 100%;
-  border:0px;
-}
-
-.el-menu-item{
-  color:white;
-  font-weight: bold;
-}
-/**覆写悬浮，选中等样式 */
-::v-deep .el-menu-item:hover{
-  background-color: #1ad4c4d4;
-  color: antiquewhite;
-}
-::v-deep  .el-menu-item.is-active{
-  color: #158484;
-}
-</style>
--- a/src/views/CluesPage.vue
+++ b/src/views/CluesPage.vue
@ -43,6 +43,40 @@
                    @confirm = 'handleSearchDialogConfirm'
                    />
 				</el-button>
+
+
+                <el-button class = 'btnPlus' @click="addOneClue">
+                    <el-tooltip content = '添加'>
+                        <el-icon><Plus /></el-icon>
+                    </el-tooltip>
+				</el-button>
+                <AddDialog 
+                    ref="addDialog"
+                    :addClueCols="clueCols"
+                    :id="MaxId"
+                    :tableId="clueId"
+                >
+
+                </AddDialog>
+
+
+
+
+                <el-button class = 'btnPlus' @click="addOneClue">
+                    <el-tooltip content = '添加'>
+                        <el-icon><Plus /></el-icon>
+                    </el-tooltip>
+				</el-button>
+                <AddDialog 
+                    ref="addDialog"
+                    :addClueCols="clueCols"
+                    :id="MaxId"
+                    :tableId="clueId"
+                >
+
+                </AddDialog>
+
+
 				<el-button class = 'btnMore' @click="dochart">
                    <el-tooltip content = '更多'>
                        <el-icon><More /></el-icon>
@ -78,12 +112,25 @@
                </el-table>
 			</el-main>
 			<!-- </el-main> -->
+            <el-footer>
+                <el-button class = 'btnPlus' @click="addOneClue">
+                    <el-tooltip content = '添加'>
+                        <el-icon><Plus /></el-icon>
+                    </el-tooltip>
+				</el-button>
+                <AddDialog 
+                    ref="addDialog"
+                    :addClueCols="clueCols"
+                    :id="MaxId"
+                    :tableId="clueId"
+                >
+                </AddDialog>
+            </el-footer>
 		</el-main>
 	</el-container>
 </template>

 <script>
-const activeNames = ref(['1']);
 // 解决刷新率问题
 const debounce = (fn, delay) => {
  let timer;
@ -107,15 +154,15 @@ window.ResizeObserver = class ResizeObserver extends _ResizeObserver{

 import ConstraintSearchDialog from "@/components/components_cluespage/ConstraintSearchDialog.vue"
 import EditDialog from "@/components/components_cluespage/EditDialog.vue"
-import HeaderPage from "@/views/HeaderPage.vue"
-import {ref} from 'vue'
+import HeaderPage from "@/components/HeaderPage.vue" 
+import AddDialog from "@/components/components_cluespage/AddDialog.vue"

 export default{
 	components:{
        ConstraintSearchDialog,
 		HeaderPage,
        EditDialog,
-        
+        AddDialog,
 	},
    name:'CluesPage',
    data(){
@ -135,7 +182,7 @@ export default{
            return data;
        };

-        const clueCols = generateColumns(4); // 生成包含10列的列定义数组, 实际运行时可能需要注释掉，防止与data中的冲突
+        const clueCols = generateColumns(20); // 生成包含10列的列定义数组, 实际运行时可能需要注释掉，防止与data中的冲突

        // 生成10列的列定义数组
        function generateColumns(numCols) {
@ -152,13 +199,15 @@ export default{
            searchDialogVisible : false,
            // 查找所用变量
            "Constraints":[// 注意 用的是复数形式
-                {"merge":"AND","col_id":"3","type":"double","down":"0","up":"INF","inside":"","date":""}, // 满足第1_3列（实数），范围为大于等于0的
-                {"merge":"AND","col_id":"2","type":"date","down":"","up":"","inside":"","date":"03.06.2024,30.06.2024"}, // 同时满足第!_2列（日期），早于2024/1/1的
-                {"merge":"OR","col_id":"4","type":"string","down":"","up":"","inside":"AAA","date":""} // 或者满足第1_4列(字符串),存在“AAA”这个连续字串的
+                // {"merge":"AND","col_id":"3","type":"double","down":"0","up":"INF","inside":"","date":""}, // 满足第1_3列（实数），范围为大于等于0的
+                // {"merge":"AND","col_id":"2","type":"date","down":"","up":"","inside":"","date":"03.06.2024,30.06.2024"}, // 同时满足第!_2列（日期），早于2024/1/1的
+                // {"merge":"OR","col_id":"4","type":"string","down":"","up":"","inside":"AAA","date":""} // 或者满足第1_4列(字符串),存在“AAA”这个连续字串的
            ],
            // 显示当前页面的名称
-            pageTitle,
-            clueId,
+            pageTitle, // 标题
+            clueId, // 线索库ID
+            MaxId:Number ,// 线索的最大Id
+            addDialogVisible:false, // 添加线索库对话框是否显示
            chart:false,
            currentEditDataID: {},
            selectedColumnData :{},
@ -180,6 +229,8 @@ export default{
                "date": form.continuous_time[0] + ',' + form.continuous_time[1],
            } 
            this.Constraints.push(newConstraint);
+            this.getClueCols();
+            this.getClueData();
        },
        // 根据属性id显示属性
        search_clu_name(aa){
@ -205,7 +256,9 @@ export default{
            if(Constraint.type == "date")return "在 " + Constraint.date + "之间";
        },
        constraint_delete(index){
-            this.Constraints.splice(index, 1);  
+            this.Constraints.splice(index, 1);
+            this.getClueCols();
+            this.getClueData();  
        },
        dochart(){
            const table=JSON.stringify(this.clueData);
@ -236,8 +289,9 @@ export default{
        },
        // 获取某一线索库数据
        getClueData(){
-            this.$axios.post('http://localhost:8000/showClue/',{table_id:this.clueId}).then(response=>{
+            this.$axios.post('http://localhost:8000/showClue/',{table_id:this.clueId,Constraints:this.Constraints}).then(response=>{
                this.clueData = response.data;
+                console.log(this.clueData)
            })
        },
        mergeCols(){
@ -260,7 +314,6 @@ export default{
            }).filter(Boolean); // 过滤掉null值

            // 检查合并后的结果
-            // console.log('合并之后的表头：',mergedColumns);
            return mergedColumns;
        },
        deleteClue(row){
@ -296,12 +349,12 @@ export default{
        editClue(row){
            let editDataID = {
                table_id:this.clueId,
-                clue_id:row.col_id
+                clue_id:row.clue_id // clue_id,不要换
            };
            this.$refs.editDialog.dialogVisible = true; // 对话框是否可见
            this.$refs.editDialog.formData = this.formatFormData(row); // 表单数据
            this.currentEditDataID = editDataID;
-            console.log(editDataID);
+            console.log('editDataID',editDataID);
        },
        // 将数据格式化成表单数据
        formatFormData(row) {
@ -314,11 +367,15 @@ export default{
            
            return formData;
        },
+        // 添加一条线索记录
+        addOneClue(){
+            this.$refs.addDialog.dialogVisible = true; // 打开添加对话框
+            this.MaxId = this.clueData.length + 1;
+        },
    },
    computed: {
        cols(){
            if (this.clueCols.length && this.clueData.length) {
-                // console.log('cols: ', this.mergeCols());
                return this.mergeCols();
            }
            return []; // 或者返回一个空数组，直到数据加载完成
@ -332,15 +389,10 @@ export default{
                this.cols.forEach(col => {
                    if (col.label !== 'ID') {
                        newRow[col.label] = newRow[col.prop];
-                        // console.log('newRow：',newRow)
-                        // delete newRow[col.label]; // 如果需要，可以删除原始格式的属性，按照label会去掉id，
                    }
                });
-                // console.log('newRow: ', newRow)
                return newRow;
            });
-            // console.log('展示的数据：', Data);
-            // console.log('Data.col_id:', Data[0].col_id);
            return Data;
        }
    },
@ -349,15 +401,10 @@ export default{
        searchDialogVisible(newValue){
            console.log(newValue);
        },
-        Constraints(newv,oldv){
+        Constraints(newv){
            console.log(newv);
        },
    },
-    //加载页面的时候获取数据
-    beforeMount() {
-        // this.getClueCols();
-        // this.getClueData();
-    }
 };
 </script>

--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@ -66,9 +66,9 @@
 /** 引入所有线索库的展示部件 */
 import Clues_Database_Display from '@/components/components_homepage/ShowCluesTable.vue'
 /** 映入头栏的展示部件 */
-import HeaderPage from '@/views/HeaderPage.vue'
+import HeaderPage from "@/components/HeaderPage.vue" 
 import { ElContainer } from 'element-plus'
-import {ref} from 'vue'
+
 export default{
    components:{  
      HeaderPage,
@ -94,16 +94,6 @@ export default{
      uploadFiles(params){
        this.fileList.push(params.file);
        console.log("获取到的文件：",params.file);
-        // console.log(params.file);
-        // let file = params.file;
-        // let fileData = new FormData();
-        // fileData.append('file',file);
-        // this.$axios.post('http://localhost:8000/CSVUploadView/', fileData,
-        // {
-        //   headers:{'Content-Type':'multipart/form-data'}
-        // }).then(response=>{
-        //   console.log(fileData);
-        // })
      },
      // 文件数量超出限制的时候执行
      handleExceed() {
@ -145,9 +135,9 @@ export default{
 /** 工具栏的样式 */
 .containerAll{
  /* 只有调整父部件的高度，子部件的高度才能按照100%调控 */
-  height: 100vh;  
+  height: 100%;  
  padding:0;
-  
+  width: 100%;
 }
 /* 头栏样式表 */
 .containerHead{
--- a/src/views/IndexPage.vue
+++ b/src/views/IndexPage.vue
@ -1,8 +1,8 @@
 <template>
  <!-- 添加router属性，确保页面跳转不会嵌套 -->
-  <el-container class ='containerAll' :router="true">
-    <el-aside :width="aside_width">
-      <AsideMenu :isCollapse="isCollapse"></AsideMenu>
+  <el-container class ='containerAll' :router="true"  >
+    <el-aside class ='containerSidebar' :style = "asideMenuCss">
+      <AsideMenu v-model:isCollapse = "isCollapse"></AsideMenu>
    </el-aside>
    <el-main class = 'containerRight'>
      <router-view></router-view>
@ -12,39 +12,38 @@

 <style scoped>  
 /* 使用Vue 3的::v-deep穿透Scoped CSS */  
-::v-deep .el-header + .el-main {  
+:deep .el-header + .el-main {  
  margin-top: 0 !important;  
  padding-top: 0 !important; 
 }  
 </style>

 <script>
-import router from '@/router'; // 这个不能删，删了之后会使得页面发生嵌套
-import AsideMenu from './AsideMenu.vue'
+import AsideMenu from '@/components/AsideMenu.vue' 

-export default {
+
+export default{
  name: 'IndexPage',
  components: {
    AsideMenu,
-    // HeaderPage,
-    // MainPage
-    //UploadMenu
  },
-  data() {
-    return {
+  data(){
+    return{
+      // 接收AsideMenu传来的更新值
      isCollapse: false,
-      aside_width: '200px'
+      // 用于设置宽度
+      asideMenuCss:{
+        width: "15%"
+      },
    }
  },
-  methods: {
-    doCollapse() {
-      console.log('doCollapse')
-      this.isCollapse = !this.isCollapse
-      if(!this.isCollapse){
-        this.aside_width='200px'
-      }else{
-        this.aside_width='76px'
-      }
+  watch:{
+    isCollapse(newVal){
+      // 如果折叠
+      if(newVal)
+        this.asideMenuCss.width = "4.5%";
+      else
+        this.asideMenuCss.width = "15%";
    }
  }
 }
@ -53,8 +52,16 @@ export default {
 <style scoped>
 .containerAll{
  height:100vh;
+  width: 100%;
 }
 .containerRight{
  padding: 0;
+  width: auto;
+}
+.containerSidebar{
+  /* 平滑过渡 */
+  transition: width 0.3s ease;
+  /* 隐藏因长度调整导致的滑动条出现 */
+  overflow: hidden;
 }
 </style>
--- a/src/components/graph/ShowGraph.vue
+++ b/src/components/graph/ShowGraph.vue
@ -65,12 +65,12 @@

 import { useRouter } from 'vue-router';
 import * as echarts from 'echarts';
-import Entity1Form from './Entity1Form.vue';
-import Entity2Form from './Entity2Form.vue';
-import Entity3Form from './Entitu3Form.vue';
-import Entity4Form from './Entity4Form.vue';
-import Entity5Form from './Entity5Form.vue';
-import HeaderPage from "@/views/HeaderPage.vue"
+import Entity1Form from '@/components/graph/Entity1Form.vue';
+import Entity2Form from '@/components/graph/Entity2Form.vue';
+import Entity3Form from '@/components/graph/Entitu3Form.vue';
+import Entity4Form from '@/components/graph/Entity4Form.vue';
+import Entity5Form from '@/components/graph//Entity5Form.vue';
+import HeaderPage from "@/components/HeaderPage.vue";
 export default {

  components: {