完成在途项目、已结项项目列表，待与后端对接

src/router/index.js

@@ -4,6 +4,7 @@ import {createWebHistory} from "vue-router/dist/vue-router.esm-browser"
 import Login from "@/views/Login.vue"
 import Project from "@/views/Project.vue";
 import OngoingProject from "../views/OngoingProject";
+import ClosedProject from "../views/ClosedProject";
 const routes = [
   {
     path: '/',
@@ -14,6 +15,10 @@ const routes = [
         path: '',
         component: OngoingProject,
       },
+      {
+        path: '/ClosedProject',
+        component: ClosedProject,
+      },
     ],
   },
   {

src/views/ClosedProject.vue

@@ -0,0 +1,141 @@
+<template>
+  <div style="width: 100%;height: 100%;display: flex;flex-direction: column;align-items: stretch">
+
+    <p style="margin-left: 40px;font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;">已结项项目</p>
+
+    <div style="flex: 1; margin: 30px 30px 10px 30px; background-color: white; border-radius: 10px;padding: 20px;
+              display: flex;flex-direction: column;justify-content: space-between">
+
+      <el-table
+          ref="tableRef"
+          class="projectTable"
+          :height="tableHeight"
+          :data="tableData">
+        <el-table-column prop="name" label="项目名称" min-width="15%"/>
+        <el-table-column prop="price" label="合同额（万）" min-width="10%"/>
+        <el-table-column prop="important" label="重要程度" min-width="10%"/>
+        <el-table-column prop="classification" label="项目分类" min-width="10%"/>
+        <el-table-column prop="type" label="项目类型" min-width="10%"/>
+        <el-table-column label="项目进度" min-width="35%">
+          <template #default="scope">
+            <el-progress :text-inside="true" :stroke-width="18" :status="scope.row.schedule === 100 ? 'success' : ''"
+                         :percentage="scope.row.schedule"></el-progress>
+          </template>
+        </el-table-column>
+        <el-table-column prop="closeDate" label="结项日期" min-width="10%" align="right"/>
+      </el-table>
+
+      <!-- 分页 -->
+      <el-pagination
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+          v-model:currentPage ="currentPage"
+          :page-sizes="[5, 10, 15, 20]"
+          :page-size="perPage"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="count"
+          style="float: right;margin-top: 20px;">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script setup>
+// table元素
+import {onMounted, ref} from "vue";
+
+const tableRef = ref(null);
+// table高度
+const tableHeight = ref();
+
+onMounted(() => {
+  // 设置表格初始高度为innerHeight-offsetTop-表格底部与浏览器底部距离85
+  tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
+  // 监听浏览器高度变化
+  window.onresize = () => {
+    tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
+  };
+});
+
+</script>
+<script>
+export default {
+  name: "OngoingProject",
+  data() {
+    return {
+
+      count: 100,
+      currentPage: 1,
+      perPage: 10,
+
+      tableData: [{
+        name: 'OTC研发项目',
+        price: 100,
+        important: '非A类',
+        classification: '外包项目',
+        type: '工作量结算类',
+        schedule: 0,
+        closeDate: '2022-6-30'
+      },
+        {
+          name: 'OTC研发项目',
+          price: 100,
+          important: '非A类',
+          classification: '研发项目',
+          type: '纯研发类',
+          schedule: 50,
+          closeDate: '2022-6-30'
+
+        },
+        {
+          name: 'OTC研发项目',
+          price: 100,
+          important: '非A类',
+          classification: '研发项目',
+          type: '纯研发类',
+          schedule: 100,
+          closeDate: '2022-6-30'
+        },
+        {
+          name: 'OTC研发项目',
+          price: 100,
+          important: '非A类',
+          classification: '研发项目',
+          type: '纯研发类',
+          schedule: 100,
+          closeDate: '2022-6-30'
+        },
+
+        {
+          name: '教育电商项目',
+          price: 100,
+          important: '非A类',
+          classification: '研发项目',
+          type: '纯研发类',
+          schedule: 100,
+          closeDate: '2022-6-30'
+        },
+
+
+      ]
+    }
+  },
+  methods: {
+    // 选择一页显示多少条数据
+    handleSizeChange(val) {
+
+    },
+    // 选择当前的是第几页
+    handleCurrentChange(val) {
+
+    },
+    onCloseProject(row) {}
+  }
+}
+</script>
+
+<style scoped>
+.projectTable {
+  width: 100%;
+}
+
+</style>

src/views/Home.vue

@@ -3,6 +3,7 @@
     <el-aside width="260px"
               style="display: flex;flex-direction: column;align-items: stretch;overflow: unset">
       <el-menu
+          router
           style="height: 100%"
           default-active="1">
         <div
@@ -10,10 +11,10 @@
           <svg-icon style="width: 52px;height: 52px;margin: 10px" icon-class="logo"></svg-icon>
           <p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">项目<br/>管理系统</p>
         </div>
-        <el-menu-item index="1">
+        <el-menu-item index="1" route="/">
           <span>在途项目</span>
         </el-menu-item>
-        <el-menu-item index="2">
+        <el-menu-item index="2" route="/ClosedProject">
           <span>已结项项目</span>
         </el-menu-item>
       </el-menu>

src/views/OngoingProject.vue

@@ -1,34 +1,41 @@
 <template>
   <div style="width: 100%;height: 100%;display: flex;flex-direction: column;align-items: stretch">
-    <div style="flex: 1; margin: 30px 30px 30px 30px; background-color: white; border-radius: 10px;padding: 20px;
+
-              display: flex;flex-direction: column">
+    <div style="margin: 0 40px 0 40px;
+                display: flex;flex-direction: row;justify-content: space-between">
+      <p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;">在途项目</p>
+      <el-button type="primary" >新增项目</el-button>
+    </div>
+    <div style="flex: 1; margin: 30px 30px 10px 30px; background-color: white; border-radius: 10px;padding: 20px;
+              display: flex;flex-direction: column;justify-content: space-between">
 
       <el-table
+          ref="tableRef"
           class="projectTable"
+          :height="tableHeight"
           :data="tableData">
-        <el-table-column prop="name" label="项目名称" />
+        <el-table-column prop="name" label="项目名称" min-width="15%"/>
-        <el-table-column prop="price" label="合同额（万）" />
+        <el-table-column prop="price" label="合同额（万）" min-width="10%"/>
-        <el-table-column prop="important" label="重要程度"/>
+        <el-table-column prop="important" label="重要程度" min-width="10%"/>
-        <el-table-column prop="classification" label="项目分类"/>
+        <el-table-column prop="classification" label="项目分类" min-width="10%"/>
-        <el-table-column prop="type" label="项目类型" />
+        <el-table-column prop="type" label="项目类型" min-width="10%"/>
-        <el-table-column label="项目进度" >
+        <el-table-column label="项目进度" min-width="35%">
           <template #default="scope">
             <el-progress :text-inside="true" :stroke-width="18" :status="scope.row.schedule === 100 ? 'success' : ''"
                          :percentage="scope.row.schedule"></el-progress>
           </template>
         </el-table-column>
-        <el-table-column>
+        <el-table-column min-width="10%" align="right">
           <template #default="scope">
-            <el-button type="primary" @click="onCloseProject(scope.row)">结项</el-button>
+            <el-button type="primary" plain @click="onCloseProject(scope.row)">结项</el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <!-- 分页 -->
       <el-pagination
           @current-change="handleCurrentChange"
           @size-change="handleSizeChange"
-          :current-page="currentPage"
+          v-model:currentPage ="currentPage"
           :page-sizes="[5, 10, 15, 20]"
           :page-size="perPage"
           layout="total, sizes, prev, pager, next, jumper"
@@ -38,13 +45,29 @@
     </div>
   </div>
 </template>
+<script setup>
+// table元素
+import {onMounted, ref} from "vue";
 
+const tableRef = ref(null);
+// table高度
+const tableHeight = ref();
+
+onMounted(() => {
+  // 设置表格初始高度为innerHeight-offsetTop-表格底部与浏览器底部距离85
+  tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
+  // 监听浏览器高度变化
+  window.onresize = () => {
+    tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
+  };
+});
+
+</script>
 <script>
 export default {
   name: "OngoingProject",
   data() {
     return {
-
       count: 100,
       currentPage: 1,
       perPage: 10,
@@ -90,8 +113,54 @@ export default {
           type: '纯研发类',
           schedule: 100
         },
-
+        {
-
+          name: '教育电商项目',
+          price: 100,
+          important: '非A类',
+          classification: '研发项目',
+          type: '纯研发类',
+          schedule: 100
+        },
+        {
+          name: '教育电商项目',
+          price: 100,
+          important: '非A类',
+          classification: '研发项目',
+          type: '纯研发类',
+          schedule: 100
+        },
+        {
+          name: '教育电商项目',
+          price: 100,
+          important: '非A类',
+          classification: '研发项目',
+          type: '纯研发类',
+          schedule: 100
+        },
+        {
+          name: '教育电商项目',
+          price: 100,
+          important: '非A类',
+          classification: '研发项目',
+          type: '纯研发类',
+          schedule: 100
+        },
+        {
+          name: '教育电商项目',
+          price: 100,
+          important: '非A类',
+          classification: '研发项目',
+          type: '纯研发类',
+          schedule: 100
+        },
+        {
+          name: '教育电商项目',
+          price: 100,
+          important: '非A类',
+          classification: '研发项目',
+          type: '纯研发类',
+          schedule: 100
+        },
       ]
     }
   },