src/components/CluesPage.vue

@@ -0,0 +1,247 @@
+<template>
+	<el-container style="height:100%">
+		<el-header class = 'containerHead'>
+			<HeaderPage :pageTitle></HeaderPage>
+		</el-header>
+		<el-main class ='container_Tools_Main'>
+			<!-- <el-main class = 'container123'> -->
+			<el-header class ='containerTools'>
+				<el-button class = 'btnDelete'>
+					<el-icon><Delete /></el-icon>
+				</el-button>
+				<el-button>
+					<el-icon><Search /></el-icon>
+				</el-button>
+				<el-button>
+					<el-icon><More /></el-icon>
+				</el-button>
+			</el-header>
+			<el-main class = 'containerMain'>
+				<el-table :data="formattedTableData" height="100%" style="width: 100%">
+                    <el-table-column type="selection" width="55" />
+                    <!-- 手动添加ID列 -->
+                    <!-- <el-table-column prop="id" label="ID" width="180" /> -->
+
+                    <!-- 动态生成其他列 -->
+                    <el-table-column 
+                        v-for="(column, index) in cols" 
+                        :key="index" 
+                        :prop="column.prop" 
+                        :label="column.label" 
+                    />
+                    <el-table-column align="right">
+                        <template #header>
+                            <!-- <el-input v-model="search" size="small" placeholder="Type to search" /> -->
+                        </template>
+                        <template #default="scope">
+                            <!-- 使用插槽将数据传入到方法watchClue中 -->
+                            <el-button size="small" @click="deleteClue(scope.row)"> 删除 </el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+			</el-main>
+			<!-- </el-main> -->
+		</el-main>
+	</el-container>
+</template>
+
+<script>
+import HeaderPage from "@/views/HeaderPage.vue"
+
+export default{
+	components:{
+		HeaderPage
+	},
+    name:'CluesDetails',
+    data(){
+        // 接收传入的id
+        const clueId = this.$route.params.id;
+        console.log("接收到的线索库ID：", clueId)
+
+        const item = {
+            date: '2016-05-06',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+        };
+        return {
+			// 显示表头
+			pageTitle: "test_线索库名称",
+            // 模拟数据
+            tableData: Array(18).fill(item),
+            // 将id存在data中，方便后续使用
+            clueId,
+
+            // 存放所有列名 clueCols: [{id:'',name:''},{},{}...]
+            // clueCols:[],
+            // 某一线索库的数据 clueData: [{id:'', col_1:'',col_2:'',..},{},{}...]
+            // clueData:[]
+
+            // 模拟数据
+            clueCols:[
+                {
+                    col_id:'1',
+                    col_name:'fsd'
+                },
+                {
+                    col_id:'2',
+                    col_name:'grw'
+                },
+                {
+                    col_id:'3',
+                    col_name:'vsf'
+                },
+                {
+                    col_id:'4',
+                    col_name:'hfd'
+                }
+            ],
+            clueData:[
+                {
+                    col_id:'1',
+                    col_1:'1534',
+                    col_2:'681351',
+                    col_3:'03512',
+                    col_4:'867615'
+                },
+                {
+                    col_id:'2',
+                    col_1:'252',
+                    col_2:'82',
+                    col_3:'2454',
+                    col_4:'5455'
+                },
+                {
+                    col_id:'3',
+                    col_1:'212',
+                    col_2:'421',
+                    col_3:'120',
+                    col_4:'540'
+                }
+            ]
+        }
+    },
+    methods:{
+        // 获取所有列名
+        getClueCols(){
+            this.$axios.post('http://localhost:8000/showClueCol/', {table_id:this.clueId}).then(response=>{
+                this.clueCols = response.data;
+            })
+        },
+        // 获取某一线索库数据
+        getClueData(){
+            this.$axios.post('http://localhost:8000/showClue/',{table_id:this.clueId}).then(response=>{
+                this.clueData = response.data;
+            })
+        },
+        mergeCols(){
+            // 创建一个映射表，便于查找列名
+            const colMap = this.clueCols.reduce((acc, col) => {
+                acc[col.col_id] = col.col_name;
+                return acc;
+            }, {});
+
+            // 遍历clueData的第一个元素，构造新数组
+            // 注意：这里假设所有对象的结构一致，且至少有一个元素
+            const mergedColumns = Object.keys(this.clueData[0]).map(key => {
+                if (key.startsWith('col_')) {
+                    const colId = key.replace('col_', ''); // 提取数字部分
+                    if(colId != 'id'){//排除id列
+                        return { prop: key, label: colMap[colId] || '未知列名' };
+                    }
+                }
+                return null; // 或者忽略非col_开头的键
+            }).filter(Boolean); // 过滤掉null值
+
+            // 检查合并后的结果
+            console.log('合并之后的表头：',mergedColumns);
+            return mergedColumns;
+        },
+        deleteClue(row){
+            console.log(row);
+        }
+    },
+    computed: {
+        cols(){
+            if (this.clueCols.length && this.clueData.length) {
+                console.log('cols: ', this.mergeCols());
+                return this.mergeCols();
+            }
+            return []; // 或者返回一个空数组，直到数据加载完成
+        },
+        
+        formattedTableData() {
+            // 保留原始ID，同时格式化其他数据以匹配动态表头
+            const Data =  this.clueData.map(row => {
+                const newRow = { ...row }; // 复制row以避免修改原始数据
+                // 根据动态列，重新组织数据对象
+                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;
+        }
+    },
+    //加载页面的时候获取数据
+    beforeMount() {
+        // this.getClueCols();
+        // this.getClueData();
+    }
+};
+</script>
+
+<style scoped>
+.el-container{
+	padding: 0;
+}
+.containerTools{
+	height:6%;
+	padding:0;
+	display:flex;
+	justify-content: flex-end;
+	align-items: center;
+	background-color: #f5f6fa;
+}
+.containerHead{
+	padding:0;
+	height:8%;
+	padding :0;
+}
+.container_Tools_Main{
+	padding:0;
+	background-color: #f5f6fa
+}
+.el-button{
+	background-color: transparent;
+	margin:5;
+	padding:3;
+	border: 0;
+	color: #0e5858;
+	font-size: 24px;
+}
+.el-button:hover{
+	background-color: rgba(255, 255, 255, 0.7);
+}
+/* 文字悬浮 */
+.textDelete{
+	/* 初始状态为透明 */
+	color: black;
+	opacity: 0;
+}
+
+.btnDelete:hover .textDelete{
+	opacity: 1;
+}
+/* 设置表格 */
+.containerMain{
+	background-color: #f5f6fa;
+	padding: 10px;
+}
+</style>

src/components/ShowCluesTable.vue

@@ -3,17 +3,17 @@
   <div class="card-container">
     <el-card v-for="(item, index) in tableData" :key="index" class="card-item">
       <div class="card-content">
-        <h3>线索库ID:{{ item.id }}</h3>
+        <h2 class = 'cdbID'>线索库ID:{{ item.id }}</h2>
-        <p>线索库名:{{ item.name }}</p>
+        <h1 class = 'cdbName'>线索库名:{{ item.name }}</h1>
-        <el-button size="small" @click="watchClue(item)">
+        <el-button size="small" round @click="watchClue(item)">
           查看
         </el-button>
-        <el-button size="small" @click="deleteClue(item)">
+        <el-button size="small" round @click="deleteClue(item)">
           删除
         </el-button>
       </div>
     </el-card>
-</div>
+  </div>
 </template>
 
 <script>
@@ -27,10 +27,10 @@
       isFileUploaded: Boolean, // 声明接收的布尔型属性
     },
     data(){
-      const item = {
+      const item = [{
         id: '10',
         name: '线索库1'
-      };
+      }];
       return {
         cluesTableData:[],
         tableData: Array(18).fill(item)
@@ -50,14 +50,14 @@
         console.log("数据记录", row.id);
         // 使用动态路由，将数据记录中的id传递给Details页面
         // Details与index.ts中的name对应
-        this.$router.push({name:'Details',params:{id:row.id}})
+        this.$router.push({name:'Details',params:{id:1}})
       },
       deleteClue(row){
         // 删除一个线索库
         // 使用动态路由，将数据记录中的id传递给Delete页面
         // Delete与index.ts中的name对应
         console.log('rowData:',row);
-        this.$router.push({name:'Delete',params:{id:row.id}})
+        this.$router.push({name:'Delete',params:{id:1}})
       }
     },
     //加载页面的时候获取数据
@@ -72,20 +72,41 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  padding: 0;
 }
 
 .card-item {
-  margin-bottom: 20px;
+  margin-bottom: 10px; /* 控制卡片上下距离 */
+  padding-top: 0;
   width: calc(33.33% - 20px); /* 为了适应三张卡片一行，但还需调整高度以确保方形 */
   height: 200px; /* 示例高度，根据内容自适应调整 */
   display: flex;
-  flex-direction: column;
+  justify-content: center; /* 确保内容垂直居中 */
-  justify-content: space-between; /* 确保内容垂直居中 */
   align-items: center; /* 水平居中内容 */
 }
 
 .card-content {
   text-align: center; /* 使文本居中 */
+  height:100%;
+}
+
+.cdbID{
+  margin-bottom: 20px;
+}
+
+.cdbName{
+  margin-bottom: 10px;
+}
+.el-button{
+  size: large;
+  background-color: #1DAFAF;
+  color:white;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: bold;
+}
+.el-button:hover{
+  background-color: rgb(14, 150, 150);
+  width:60px;
 }
 
 </style>

src/router/index.ts

@@ -26,7 +26,7 @@ const routes: Array<RouteRecordRaw> = [
         // 动态路由， 添加:id（必须添加否则传不进参数），获取点击按钮时传来的线索库id
         path:'/Details/:id',
         name:'Details',
-        component:()=>import('@/components/CluesDetails.vue')
+        component:()=>import('@/components/CluesPage.vue')
       },
       {
         path:'/Delete/:id',

src/views/AsideMenu.vue

@@ -1,3 +1,4 @@
+<!-- /**用于显示sidebar的页面 */ -->
 <template>
   <el-container style="height: 100%; border: 0px solid #eee">
     <el-header class = "containerSystemName">
@@ -63,6 +64,7 @@ export default{
   font-weight: bolder; /** 字体加粗 */
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /*设置字体*/
   font-size: 14px;  /**字体大小 */
+  height:8%;
 }
 .containerSelections{
   color: white;
@@ -70,15 +72,7 @@ export default{
   height: 100%;
   border:0px;
 }
-.containerUploadBtn{
+
-  color: white;
-  background-color: #1DAFAF;
-  height: 20%;
-  display: flex;  /** 采用flex布局方式 */
-  flex-direction: column; /**垂直堆叠子元素 */
-  justify-content: flex-end;
-  align-items: center;
-}
 .el-menu-item{
   color:white;
   font-weight: bold;

src/views/HeaderPage.vue

@@ -1,23 +1,8 @@
+<!-- /***用于显示边栏的页面 */ -->
 <template>
-  <div class="toolbar" style="display: flex;line-height: 60px;">
+  <div class="toolbar">
-    <div style="margin-top: 12px;">
+    <el-icon @click="collapse"><Fold /></el-icon>
-      <el-icon :size="20" @click="collapse"><Fold /></el-icon>
+    <span class = "pageName">{{ pageTitle }}</span>
-    </div>
-    <div style="flex: 1;text-align: center;font-size: 20px;">
-      <span>线索库前端界面</span>
-    </div>
-    <el-dropdown>
-      <el-icon style="margin-right: 8px; margin-top: 1px">
-        <ArrowDownBold />
-      </el-icon>
-      <template #dropdown>
-        <el-dropdown-menu >
-        <el-dropdown-item @click="toUser">个人中心</el-dropdown-item>
-        <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
-      </el-dropdown-menu>
-      </template>
-    </el-dropdown>
-    <span>系统管理</span>
   </div>
 </template>
 
@@ -25,6 +10,7 @@
 export default {
   name: 'HeaderPage',
   props:{
+    pageTitle: String,
     icon:String
   },
   methods:{
@@ -42,11 +28,22 @@ export default {
 </script>
 
 <style scoped>
-.toolbar {
+.toolbar{
-  display: inline-flex;
+  display: flex;
+  background-color: white;
+  color: #6B6363;
+  height:100%;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
-  height: 100%;
+}
-  right: 20px;
+.el-icon{
+  color: #0E5858;
+  font-size: 28px;
+  margin-right: 40%;
+}
+.pageName{
+  flex-grow: 1;
+  font-size: 24px;
+  font-weight: bold;
 }
 </style>

src/views/HomePage.vue

@@ -1,100 +1,81 @@
 <template>
-  <div>
+  <el-container class = "containerAll">
-    <el-container>
+    <!--这是头栏部件-->
-      <el-header style="line-height: 40px;padding: 0;display: flex;justify-content: space-between;">
+    <el-header class = 'containerHead'>
-        <div style="flex: 1;text-align: center;font-size: 20px;margin-right: auto;margin-left: 60px;"
+      <HeaderPage :pageTitle = 'pageTitle'>
-        >
+      </HeaderPage>
-          <span>线索库总览</span>
+    </el-header>
-        </div>
+    <el-main style="padding:0; height:92%" >
-        <div style=" margin-right: 5px;margin-top: 5px;">
+      <el-container class = "container_Tools_Main" >
-          <el-button type="primary" @click="openDialog">
+        <!--这是主体的头栏用于防止工具等-->
-            上传文档<el-icon><DocumentAdd /></el-icon>
+        <el-header class = 'containerTools'>
+          <!--这是上传文档按钮-->
+          <el-button class = 'uploadBtn' type = 'primary' @click='openDialog'>
+              <el-icon><DocumentAdd/></el-icon>
           </el-button>
           <el-dialog
-            v-model="dialogVisible"
+          v-model="dialogVisible"
-            title="上传文档"
+          title="上传文档"
-            width="500"
+          width="500"
-            align-center
+          align-center
           >
-            <!-- 打开的弹窗中包含上传页面，没做组件分离 -->
+          <div>
-            <div>
+            <el-form>
-              <!-- 
+              <el-form-item>
-
+                <el-input v-model="fileName" style="width: 240px" placeholder="输入文件名" />
-               -->
+              </el-form-item>
-              <!-- <el-upload
+              <el-form-item >
-                class="upload-demo"
+                <el-upload
-                drag
+                  class="upload-demo"
-                :limit="limit"
+                  ref="upload"
-                multiple
+                  :http-request="uploadFiles"
-                :http-request="uploadFiles"
+                  :on-exceed="handleExceed"
-              >
+                  :limit="1"
-                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+                  accept=".csv"
-                <div class="el-upload__text">
+                >
-                  拖拽文件到这里或者 <em>点击上传</em>
+                  <template #trigger>
-                </div>
+                    <el-button type="primary">选取文件</el-button>
-                <template #tip>
+                  </template>
-                  <div class="el-upload__tip">
+                  
-                    上传csv文档
+                  <template #tip>上传.csv文件</template>
-                  </div>
+                </el-upload>
-                </template>
+              </el-form-item>
-              </el-upload> -->
+            </el-form>
-              <el-form>
+          </div>
-                <el-form-item>
+          <template #footer>
-                  <el-input v-model="fileName" style="width: 240px" placeholder="输入文件名" />
+            <div class="dialog-footer">
-                </el-form-item>
+              <el-button @click="dialogVisible = false">取消</el-button>
-                <el-form-item >
+              <el-button type="primary" @click="submitImportForm">
-                  <el-upload
+                确认上传
-                    class="upload-demo"
+              </el-button>
-                    ref="upload"
-                    :http-request="uploadFiles"
-                    :on-exceed="handleExceed"
-                    :limit="1"
-                    accept=".csv"
-                  >
-                    <template #trigger>
-                      <el-button type="primary">选取文件</el-button>
-                    </template>
-                    
-                    <template #tip>上传.csv文件</template>
-                  </el-upload>
-                </el-form-item>
-              </el-form>
             </div>
-            <template #footer>
+          </template>
-              <div class="dialog-footer">
-                <el-button @click="dialogVisible = false">取消</el-button>
-                <el-button type="primary" @click="submitImportForm">
-                  确认上传
-                </el-button>
-              </div>
-            </template>
           </el-dialog>
-        </div>
-      </el-header>
 
-      <el-main style="padding: 0; border-top: 1px solid #ccc">
+        </el-header>
-        <!-- 显示所有数据库表的界面 -->
+        <el-main class = 'containerMain'>
-        <ShowCluesTable 
+            <Clues_Database_Display />
-          :is-file-uploaded="isFileUploaded" 
+        </el-main>
-        >
+      </el-container>
-        </ShowCluesTable>
+    </el-main>
-      </el-main>
+  </el-container>
-    </el-container>
-  </div>
 </template>
 
 <script>
-  import router from '@/router';
+/** 引入所有线索库的展示部件 */
-  import { ref } from 'vue'
+import Clues_Database_Display from '@/components/ShowCluesTable.vue'
-
+/** 映入头栏的展示部件 */
-  import ShowCluesTable from '@/components/ShowCluesTable.vue'
+import HeaderPage from '@/views/HeaderPage.vue'
-
+import { ElContainer } from 'element-plus'
-  export default{
+import {ref} from 'vue'
-    components:{
+export default{
-      ShowCluesTable
+    components:{  
+      HeaderPage,
+      Clues_Database_Display
     },
     data(){
       return{
+        pageTitle: '线索库总览',
         dialogVisible:false,
         limit:1,
         fileList:[],
@@ -173,6 +154,41 @@
   let limit = 1;
 </script>
 
-<style>
+<style scoped>
+/** 工具栏的样式 */
+.containerAll{
+  /* 只有调整父部件的高度，子部件的高度才能按照100%调控 */
+  height: 100vh;  
+  padding:0;
+  
+}
+/* 头栏样式表 */
+.containerHead{
+  width: 100%;
+  padding: 0; 
+  height: 8%;
+}
+.containerTools{
+  padding-right: 1; /**让按钮与卡片最左侧对齐 */
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 
+}
+/* 工具栏和主体样式 */
+.container_Tools_Main{
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  height:100%;
+  background-color: #f5f6fa;  
+}
+/* 上传按钮样式 */
+.uploadBtn{
+  color: #0E5858;
+  background-color: transparent;
+  border: 0;
+  font-size:30px;
+}
 </style>

src/views/IndexPage.vue

@@ -4,33 +4,31 @@
     <el-aside :width="aside_width">
       <AsideMenu :isCollapse="isCollapse"></AsideMenu>
     </el-aside>
-    
+    <el-main class = 'containerRight'>
-    <el-container>
+      <router-view></router-view>
-      <el-header>
+    </el-main>
-        <HeaderPage @doCollapse="doCollapse"></HeaderPage>
-      </el-header>
-      
-      <el-main>
-        <!-- <MainPage></MainPage> -->
-        <!-- 设置为路由的父组件 -->
-        <router-view></router-view>
-      </el-main>
-    </el-container>
   </el-container>
 </template>
 
+<style scoped>  
+/* 使用Vue 3的::v-deep穿透Scoped CSS */  
+::v-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 HeaderPage from './HeaderPage.vue'
+import MainPage from './MainPage.vue'
-// import MainPage from './MainPage.vue'
 //import UploadMenu from './UploadMenu.vue'
 
 export default {
   name: 'IndexPage',
   components: {
     AsideMenu,
-    HeaderPage,
+    // HeaderPage,
     // MainPage
     //UploadMenu
   },
@@ -58,7 +56,7 @@ export default {
 .containerAll{
   height:100vh;
 }
-.el-main{
+.containerRight{
-  background-color: #F5F6FA;
+  padding: 0;
 }
 </style>