feat: 项目详情页新版设计:项目概况

package-lock.json

@@ -5237,6 +5237,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.2.2",
+      "resolved": "http://192.168.1.90:4873/echarts/-/echarts-5.2.2.tgz",
+      "integrity": "sha1-7DyLKhUcu6cbo8LHz5svIEfOQ3A=",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.2.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "http://192.168.1.90:4873/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "http://192.168.1.90:4873/ee-first/-/ee-first-1.1.1.tgz",
@@ -15417,6 +15433,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.2.1",
+      "resolved": "http://192.168.1.90:4873/zrender/-/zrender-5.2.1.tgz",
+      "integrity": "sha1-X0u9qRW6bUErCxncJDG+qtBUF7s=",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "http://192.168.1.90:4873/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4="
+        }
+      }
     }
   }
 }

package.json

@@ -16,6 +16,7 @@
     "@midwayjs/koa": "^2.11.0",
     "animate.css": "^4.1.1",
     "animejs": "^3.2.1",
+    "echarts": "^5.2.2",
     "element-plus": "^1.1.0-beta.24",
     "koa-bodyparser": "^4.3.0",
     "vue": "^3.2.16",

src/router/index.ts

@@ -4,80 +4,57 @@ const routes: Array<RouteRecordRaw> = [
     {
         path: '/login',
         name: 'Login',
-        component: () => import(/* webpackChunkName: "login" */ '@/views/login/Login.vue'),
+        component: () => import('@/views/login/Login.vue'),
     },
     {
         path: '/',
         name: 'MainFrame',
-        component: () => import(/* webpackChunkName: "main-frame" */ '@/views/main-frame/MainFrame.vue'),
+        component: () => import('@/views/main-frame/MainFrame.vue'),
         children: [
             {
                 path: '',
                 name: 'Workbench',
-                component: () => import(/* webpackChunkName: "workbench" */ '@/views/workbench/Workbench.vue'),
+                component: () => import('@/views/workbench/Workbench.vue'),
             },
             {
-                path: 'project',
+                path: 'project-list',
                 name: 'ProjectList',
-                component: () => import(/* webpackChunkName: "project-list" */ '@/views/project-list/ProjectList.vue'),
+                component: () => import('@/views/project-list/ProjectList.vue'),
             },
             {
                 path: 'ration',
                 name: 'Ration',
-                component: () => import(/* webpackChunkName: "project-list" */ '@/views/ration/Ration.vue'),
-            },
-        ]
-    },
-    /*
-    {
-        path: '/old',
-        name: 'Main',
-        component: () => import(/!* webpackChunkName: "main" *!/ '@/views/main/Main.vue'),
-        children: [
-            {
-                path: '',
-                name: 'Dashboard',
-                component: () => import(/!* webpackChunkName: "dashboard" *!/ '@/views/main/dashboard/Dashboard.vue'),
-            },
-            {
-                path: 'projects',
-                name: 'ProjectList',
-                component: () => import(/!* webpackChunkName: "projects" *!/ '@/views/main/project-list/ProjectList.vue'),
-            },
-            {
-                path: 'ration',
-                name: 'Ration',
-                component: () => import(/!* webpackChunkName: "ration" *!/ '@/views/main/ration/Ration.vue'),
+                component: () => import('@/views/ration/Ration.vue'),
             },
             {
                 path: 'project',
                 name: 'Project',
-                component: () => import(/!* webpackChunkName: "project" *!/ '@/views/project/Project.vue'),
+                component: () => import('@/views/project/Project.vue'),
                 children: [
                     {
                         path: '',
                         name: 'Overview',
-                        component: () => import(/!* webpackChunkName: "overview" *!/ '@/views/project/overview/Overview.vue'),
+                        component: () => import('@/views/project/overview/Overview.vue')
                     },
                     {
                         path: 'process',
                         name: 'Process',
-                        component: () => import(/!* webpackChunkName: "overview" *!/ '@/views/project/process/Process.vue'),
+                        component: () => import('@/views/project/process/Process.vue')
                     },
                     {
                         path: 'summary',
                         name: 'Summary',
-                        component: () => import(/!* webpackChunkName: "overview" *!/ '@/views/project/summary/Summary.vue'),
+                        component: () => import('@/views/project/summary/Summary.vue')
                     },
                     {
                         path: 'report',
                         name: 'Report',
-                        component: () => import(/!* webpackChunkName: "overview" *!/ '@/views/project/report/Report.vue'),
-                    },
+                        component: () => import('@/views/project/report/Report.vue')
+                    }
                 ]
             }
         ]
-    },*/
+    },
 ];
 
 const router = createRouter({

src/styles/_element_plus.scss

@@ -38,3 +38,9 @@
   }
 }
 
+.el-card {
+  .el-card__header {
+    border-bottom: 1px solid #e8eaec;
+  }
+}
+

src/views/main-frame/MainFrame.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import {onMounted, ref} from "vue";
+import {useRoute} from 'vue-router'
+
+const route = useRoute()
 </script>
 
 <template>
@@ -38,8 +41,8 @@ import {onMounted, ref} from "vue";
           </li>
         </router-link>
 
-        <router-link custom to="/project" v-slot="{ navigate, isExactActive }">
-          <li class="item" @click="navigate" :class="{ 'active': isExactActive }">
+        <router-link custom to="/project-list" v-slot="{ navigate, isExactActive }">
+          <li class="item" @click="navigate" :class="{ 'active': route.fullPath.startsWith('/project') }">
             <iconfont class="icon dsk-city-one"/>
           </li>
         </router-link>

src/views/main/Main.vue

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-</script>
-
-<template>
-  <article class="main-page">
-    <aside class="aside">
-      <section class="logo"></section>
-      <ul class="menu">
-        <router-link custom to="/" v-slot="{ navigate, isExactActive }">
-          <li
-            class="item dashboard"
-            :class="{ 'exact-active': isExactActive }"
-          >
-            <iconfont class="icon dsk-dashboard-one" />
-          </li>
-        </router-link>
-        <router-link custom to="/projects" v-slot="{ navigate, isExactActive }">
-          <li
-            class="item projects"
-            @click="navigate"
-            :class="{ 'exact-active': isExactActive }"
-          >
-            <iconfont class="icon dsk-city-one" />
-          </li>
-        </router-link>
-        <router-link custom to="/ration" v-slot="{ navigate, isExactActive }">
-          <li
-            class="item ration"
-            :class="{ 'exact-active': isExactActive }"
-          >
-            <iconfont class="icon dsk-data" />
-          </li>
-        </router-link>
-        <li class="item message">
-          <iconfont class="icon dsk-remind" />
-        </li>
-      </ul>
-      <ul class="tools">
-        <li class="item help">
-          <iconfont class="icon dsk-help" />
-        </li>
-        <li class="item avatar">
-          <iconfont class="icon dsk-me" />
-        </li>
-      </ul>
-    </aside>
-    <main class="main">
-      <router-view></router-view>
-    </main>
-  </article>
-</template>
-
-<style lang="scss" src="./style.scss" scoped></style>

src/views/main/dashboard/Dashboard.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-router.back();
-</script>
-
-<template>
-  <article class="dashboard-page">仪表盘</article>
-</template>
-
-<style lang="scss" src="./style.scss" scoped></style>

src/views/main/project-list/ProjectList.vue

@@ -1,159 +0,0 @@
-<script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
-const searchKey = ref("");
-const projectType = ref("");
-const projectTypeOptions = reactive([
-  {
-    label: "房建",
-    value: "house",
-  },
-  {
-    label: "市政",
-    value: "city",
-  },
-]);
-
-const projectList = reactive([
-  {
-    name: "市妇幼保健医院新址配套市政道路工程",
-    process: "预算",
-    step: "(2) 收件员预审项目",
-    submit: "0.00",
-    increase: "0.00",
-    decrease: "0.00",
-    offset: "0.00",
-  },
-  {
-    name: "梧桐路（石花西路）电力改迁工程",
-    process: "结算",
-    step: "(1) 建设单位报审项目",
-    submit: "0.00",
-    increase: "0.00",
-    decrease: "0.00",
-    offset: "0.00",
-  },
-  {
-    name: "珠海城市职业技术学院机电学院、航空与海洋工程珠海城市职业技术学院机电学院、航空与海洋工程",
-    process: "预算",
-    step: "(1) 建设单位报审项目",
-    submit: "0.00",
-    increase: "0.00",
-    decrease: "0.00",
-    offset: "0.00",
-  },
-  {
-    name: "珠海城市职业技术学院机电学院、航空与海洋工程",
-    process: "预算",
-    step: "(5) 主审人编制审核方案",
-    submit: "0.00",
-    increase: "0.00",
-    decrease: "0.00",
-    offset: "0.00",
-  },
-]);
-</script>
-
-<template>
-  <article class="project-list-page">
-    <header class="header">投资项目</header>
-
-    <!-- 过滤栏 -->
-    <ul class="filter-bar">
-      <li class="item search">
-        <el-input v-model="searchKey" placeholder="搜索项目">
-          <template #prefix>
-            <iconfont class="dsk-search" />
-          </template>
-        </el-input>
-      </li>
-      <li class="item">
-        <el-select v-model="projectType" placeholder="工程类型">
-          <el-option
-            v-for="item in projectTypeOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-          </el-option>
-        </el-select>
-      </li>
-      <li class="item">
-        <el-select v-model="process" placeholder="项目流程">
-          <el-option
-            v-for="item in processOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-          </el-option>
-        </el-select>
-      </li>
-      <li class="item check-step">
-        <el-select v-model="checkStep" placeholder="审核步骤">
-          <el-option
-            v-for="item in checkStepOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-          </el-option>
-        </el-select>
-      </li>
-
-      <li class="item time-order">
-        <el-select v-model="timeOrder" placeholder="按流程时间排序">
-          <el-option
-            v-for="item in timeOrderOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-          </el-option>
-        </el-select>
-      </li>
-      <li class="item setting">
-        <iconfont class="dsk-config" />
-      </li>
-    </ul>
-
-    <!-- 列表 -->
-    <el-table :data="projectList">
-      <el-table-column prop="name" label="项目名称" :min-width="310">
-        <template #default="scope">
-          <span>{{ scope.row.name }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="process" label="项目流程" :min-width="85" />
-      <el-table-column prop="step" label="当前步骤" :min-width="160" />
-      <el-table-column
-        prop="submit"
-        label="送审金额(元)"
-        align="center"
-        :min-width="128"
-      />
-      <el-table-column
-        prop="increase"
-        label="审增金额(元)"
-        align="center"
-        :min-width="128"
-      />
-      <el-table-column
-        prop="decrease"
-        label="审减金额(元)"
-        align="center"
-        :min-width="128"
-      />
-      <el-table-column
-        prop="offset"
-        label="品迭金额(元)"
-        align="center"
-        :min-width="128"
-      />
-      <template #empty>
-        <el-empty :image-size="120" description="暂无项目" />
-      </template>
-    </el-table>
-  </article>
-</template>
-
-<style lang="scss" src="./style.scss" scoped></style>

src/views/main/project-list/style.scss

@@ -1,109 +0,0 @@
-.project-list-page {
-    .header {
-        @apply flex items-center font-bold;
-        height: 50px;
-        font-size: 20px;
-        padding-left: 10px;
-        border-bottom: 1px solid $border-gray;
-        background-color: #fff;
-    }
-
-    .filter-bar {
-        @apply flex items-center;
-        height: 50px;
-        padding: 0 11px;
-        background-color: #fff;
-
-        .item {
-            width: 102px;
-            margin-left: 10px;
-
-            &.search {
-                width: 150px;
-            }
-            &.check-step {
-                flex: 1;
-                .el-select {
-                    width: 102px;
-                }
-            }
-            &:first-child,
-            &.time-order {
-                margin-left: 0;
-                width: 140px;
-            }
-            &.setting {
-                @apply text-center cursor-pointer;
-                width: 28px;
-                .iconfont {
-                    font-size: 18px;
-                }
-            }
-
-            ::v-deep .el-input__inner {
-                &::-ms-input-placeholder {
-                    color: #535a5d;
-                }
-
-                &::-moz-placeholder {
-                    color: #535a5d;
-                }
-
-                &::-webkit-input-placeholder {
-                    color: #535a5d;
-                }
-            }
-        }
-    }
-
-    ::v-deep .el-table {
-        width: 100%;
-        background-color: #fff;
-        border: 1px solid $border-gray;
-        border-left: none;
-        border-right: none;
-
-        &::before {
-            display: none;
-        }
-
-        .el-table__header-wrapper {
-            .el-table__header {
-                height: 48px;
-
-                th {
-                    .cell {
-                        font-weight: 600;
-                        color: #535a5d;
-                        padding: 0 17px;
-                    }
-                }
-            }
-        }
-
-        .el-table__body-wrapper {
-            &::-webkit-scrollbar {
-                width: 3px;
-            }
-
-            td {
-                padding: 0;
-                border-bottom: 1px solid #f4f4f4 !important;
-
-                .cell {
-                    line-height: 13px;
-                    color: #535a5d;
-                    padding: 18px 17px 16px;
-                    font-size: 13px;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                }
-            }
-        }
-
-        .el-empty {
-            @apply select-none;
-        }
-    }
-}

src/views/main/ration/Ration.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-router.back();
-</script>
-
-<template>
-  <article class="ration-page">定额库</article>
-</template>
-
-<style lang="scss" src="./style.scss" scoped></style>

src/views/main/style.scss

@@ -1,48 +0,0 @@
-.main-page {
-    @apply flex w-full h-full;
-    min-width: $small-screen;
-    background: $backdrop;
-
-    .aside {
-        @apply flex flex-col items-center;
-        width: 49px;
-        border-right: 1px solid $border-gray;
-        background-color: #fff;
-
-        .logo {
-            width: 49px;
-            height: 49px;
-            background: url("@/assets/logo.png") no-repeat center;
-            background-size: 34px 34px;
-        }
-        .menu {
-            @apply w-full;
-            flex: 1;
-            .item {
-                @apply flex justify-center items-center cursor-pointer;
-                height: 42px;
-                margin-top: 20px;
-                &.exact-active {
-                    background: #e6e6e6;
-                }
-                .icon {
-                    font-size: 18px;
-                }
-            }
-        }
-        .tools {
-            @apply w-full;
-            .item {
-                @apply flex justify-center items-center cursor-pointer;
-                margin-bottom: 10px;
-                .icon {
-                    font-size: 18px;
-                }
-            }
-        }
-    }
-
-    .main {
-        width: calc(100% - 49px);
-    }
-}

src/views/project-list/ProjectList.vue

@@ -112,7 +112,7 @@ const projectList = reactive(list);
       <el-table :data="projectList">
         <el-table-column prop="name" label="项目名称" :min-width="300">
           <template #default="scope">
-            <router-link to="/project/overview" class="link">{{ scope.row.name }}</router-link>
+            <router-link to="/project" class="link">{{ scope.row.name }}</router-link>
           </template>
         </el-table-column>
         <el-table-column prop="process" label="项目流程" :min-width="80"/>

src/views/project-old/Project.vue

@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-</script>
-
-<template>
-  <article class="project-page">
-    <header class="header">
-      <span class="project-name">市妇幼保健医院新址配套市政道路工程</span>
-      <ul class="nav">
-        <router-link custom to="/project" v-slot="{ navigate, isExactActive }">
-          <li
-            class="item overview"
-            @click="navigate"
-            :class="{ 'exact-active': isExactActive }"
-          >
-            项目概况
-          </li>
-        </router-link>
-        <router-link
-          custom
-          to="/project/process"
-          v-slot="{ navigate, isExactActive }"
-        >
-          <li
-            class="item process"
-            @click="navigate"
-            :class="{ 'exact-active': isExactActive }"
-          >
-            项目流程
-          </li>
-        </router-link>
-        <router-link
-          custom
-          to="/project/summary"
-          v-slot="{ navigate, isExactActive }"
-        >
-          <li
-            class="item summary"
-            @click="navigate"
-            :class="{ 'exact-active': isExactActive }"
-          >
-            项目流汇总
-          </li>
-        </router-link>
-        <router-link
-          custom
-          to="/project/report"
-          v-slot="{ navigate, isExactActive }"
-        >
-          <li
-            class="item report"
-            @click="navigate"
-            :class="{ 'exact-active': isExactActive }"
-          >
-            报表
-          </li>
-        </router-link>
-      </ul>
-    </header>
-    <router-view></router-view>
-  </article>
-</template>
-
-<style lang="scss" src="./style.scss" scoped></style>

src/views/project-old/overview/Overview.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
-</script>
-
-<template>
-  <article class="overview-page">项目概况</article>
-</template>
-
-<style lang="scss" src="./style.scss" scoped></style>

src/views/project-old/style.scss

@@ -1,29 +0,0 @@
-.project-page {
-    .header {
-        @apply flex items-center;
-        height: 50px;
-        padding: 0 10px;
-        border-bottom: 1px solid $border-gray;
-        background-color: #fff;
-
-        .project-name {
-            @apply flex-1 font-bold;
-            font-size: 20px;
-        }
-        .nav {
-            @apply flex h-full items-center;
-            font-size: 18px;
-
-            .item {
-                @apply h-full cursor-pointer;
-                line-height: 50px;
-                margin: 0 10px;
-
-                &.exact-active {
-                    border-bottom: 3px solid #409eff;
-                    color: #409eff;
-                }
-            }
-        }
-    }
-}

src/views/project/Project.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import {onMounted, ref} from "vue";
+</script>
+
+<template>
+  <article class="project-page">
+    <header class="header">
+      <h1 class="name">莲花路电力迁改项目</h1>
+      <el-descriptions :column="4" size="mini">
+        <el-descriptions-item label="申请单位：">某某建筑公司</el-descriptions-item>
+        <el-descriptions-item label="审批单位：">某某审批单位</el-descriptions-item>
+        <el-descriptions-item label="工程类型：">某某类型</el-descriptions-item>
+        <el-descriptions-item label="项目编号：">100000</el-descriptions-item>
+        <el-descriptions-item label="工程时间：">2022-01-01 至 2023-12-31</el-descriptions-item>
+        <el-descriptions-item label="状态：">
+          <el-tag size="small">待审批</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="当前流程：">
+          <el-tag size="small" type="success">某某步骤</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="工程地址：">
+          珠海市香洲区某某街道某某路100号
+        </el-descriptions-item>
+      </el-descriptions>
+      <ul class="nav">
+        <router-link custom to="/project" v-slot="{ navigate, isExactActive }">
+          <li
+              class="item overview"
+              @click="navigate"
+              :class="{ 'exact-active': isExactActive }"
+          >
+            项目概况
+          </li>
+        </router-link>
+        <router-link
+            custom
+            to="/project/process"
+            v-slot="{ navigate, isExactActive }"
+        >
+          <li
+              class="item process"
+              @click="navigate"
+              :class="{ 'exact-active': isExactActive }"
+          >
+            项目流程
+          </li>
+        </router-link>
+        <router-link
+            custom
+            to="/project/summary"
+            v-slot="{ navigate, isExactActive }"
+        >
+          <li
+              class="item summary"
+              @click="navigate"
+              :class="{ 'exact-active': isExactActive }"
+          >
+            项目流汇总
+          </li>
+        </router-link>
+        <router-link
+            custom
+            to="/project/report"
+            v-slot="{ navigate, isExactActive }"
+        >
+          <li
+              class="item report"
+              @click="navigate"
+              :class="{ 'exact-active': isExactActive }"
+          >
+            报表
+          </li>
+        </router-link>
+      </ul>
+    </header>
+    <main class="main">
+      <router-view></router-view>
+    </main>
+  </article>
+</template>
+
+<style lang="scss" src="./style.scss" scoped></style>

src/views/project/overview/Overview.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import {onMounted, reactive, ref} from "vue";
+
+import * as echarts from 'echarts';
+
+const chart1Ref = ref<HTMLDivElement>()
+const chart2Ref = ref<HTMLDivElement>()
+
+onMounted(() => {
+
+  if (chart1Ref.value && chart2Ref.value) {
+    // 基于准备好的dom，初始化echarts实例
+    const myChart1 = echarts.init(chart1Ref.value);
+    const option1 = {
+      xAxis: {
+        type: 'category',
+        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: [
+        {
+          data: [120, 200, 150, 80, 70, 110, 130, 140, 210, 100, 80, 20],
+          type: 'bar'
+        }
+      ]
+    };
+    myChart1.setOption(option1);
+
+    const myChart2 = echarts.init(chart2Ref.value);
+    const option2 = {
+      tooltip: {
+        trigger: 'item'
+      },
+      legend: {
+        top: '5%',
+        left: 'center'
+      },
+      series: [
+        {
+          name: 'Access From',
+          legend: {
+            orient: 'vertical',
+            left: 10,
+            show: false
+          },
+          type: 'pie',
+          radius: ['50%', '70%'],
+          avoidLabelOverlap: true,
+          label: {
+            show: false,
+            position: 'center'
+          },
+          emphasis: {
+            label: {
+              show: false,
+              fontSize: '40',
+              fontWeight: 'bold'
+            }
+          },
+          labelLine: {
+            show: false
+          },
+          data: [
+            {value: 1048, name: 'Search Engine'},
+            {value: 735, name: 'Direct'},
+            {value: 580, name: 'Email'},
+            {value: 484, name: 'Union Ads'},
+            {value: 300, name: 'Video Ads'}
+          ]
+        }
+      ]
+    };
+    myChart2.setOption(option2);
+
+
+    // 基于准备好的dom，初始化echarts实例
+    // const myChart3 = echarts.init(chart1Ref.value);
+    // const option3 = ''
+    // myChart3.setOption(option3);
+  }
+})
+
+const list = [
+  {
+    type: '财务审核',
+    who: '张三',
+    result: '成功',
+    time: '2022-07-28 09:41:00',
+    remark: '通过',
+  },
+  {
+    type: '财务审核',
+    who: '张三',
+    result: '成功',
+    time: '2022-07-28 09:41:00',
+    remark: '通过',
+  },
+  {
+    type: '财务审核',
+    who: '张三',
+    result: '成功',
+    time: '2022-07-28 09:41:00',
+    remark: '通过',
+  },
+  {
+    type: '财务审核',
+    who: '张三',
+    result: '成功',
+    time: '2022-07-28 09:41:00',
+    remark: '通过',
+  },
+]
+list.push(...list)
+const logList = reactive(list);
+</script>
+
+<template>
+  <article class="overview-page">
+    <el-row :gutter="24" class="first-row">
+      <el-col :span="6">
+        <el-card shadow="never">
+          <img src="@/assets/icon1.svg" class="icon" alt="">
+          <span class="number">21.2 k</span>
+          <span class="index">指标1</span>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <img src="@/assets/icon2.svg" class="icon" alt="">
+          <span class="number">1.6 k</span>
+          <span class="index">指标2</span>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <img src="@/assets/icon3.svg" class="icon" alt="">
+          <span class="number">826.0</span>
+          <span class="index">指标3</span>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <img src="@/assets/icon4.svg" class="icon" alt="">
+          <span class="number">28.8 %</span>
+          <span class="index">指标4</span>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="24" class="second-row">
+      <el-col :span="18">
+        <el-card shadow="never" class="card-chart1">
+          <div class="chart1" ref="chart1Ref"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never" class="card-chart2">
+          <div class="chart2" ref="chart2Ref"></div>
+        </el-card>
+        <el-card shadow="never" class="card-chart3">
+          <div class="chart3" ref="chart3Ref" style="display: flex; justify-content: center; align-items: center">
+            <el-progress type="circle" :percentage="25"/>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-card shadow="never" header="审核流程">
+      <el-steps :active="4" finish-status="success">
+        <el-step title="申请" description="申请单位：某某单位"></el-step>
+        <el-step title="审批1" description="审批人：张三"></el-step>
+        <el-step title="审批2" description="审批人：李四"></el-step>
+        <el-step title="审批3" description="审批人：王五"></el-step>
+        <el-step title="审批4" description="审批人：赵六"></el-step>
+        <el-step title="审批5" description="审批人：钱七"></el-step>
+        <el-step title="审批6" description="审批人：孙八"></el-step>
+        <el-step title="财务审批" description="审批人：周九"></el-step>
+      </el-steps>
+    </el-card>
+
+    <el-card shadow="never" header="项目信息">
+      <el-descriptions :column="4" size="small">
+        <el-descriptions-item label="申请单位：">某某建筑公司</el-descriptions-item>
+        <el-descriptions-item label="单位编号：">11111111</el-descriptions-item>
+        <el-descriptions-item label="负责人：">张三</el-descriptions-item>
+        <el-descriptions-item label="评估单位：">某某建筑公司</el-descriptions-item>
+        <el-descriptions-item label="审批单位：">某某审批单位</el-descriptions-item>
+        <el-descriptions-item label="工程类型：">某某类型</el-descriptions-item>
+        <el-descriptions-item label="项目编号：">100000</el-descriptions-item>
+        <el-descriptions-item label="项目规模：">100000</el-descriptions-item>
+        <el-descriptions-item label="紧急程度：">
+          <el-tag size="small" type="danger">紧急</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="预计报价：">100000</el-descriptions-item>
+        <el-descriptions-item label="工程时间：">2022-01-01 至 2023-12-31</el-descriptions-item>
+        <el-descriptions-item label="工程周期：">2年</el-descriptions-item>
+        <el-descriptions-item label="人员规模：">200</el-descriptions-item>
+        <el-descriptions-item label="备注：">没有备注</el-descriptions-item>
+        <el-descriptions-item label="状态：">
+          <el-tag size="small">待审批</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="当前流程：">
+          <el-tag size="small" type="success">某某步骤</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="工程地址：">
+          珠海市香洲区某某街道某某路100号
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+
+    <el-card shadow="never" header="操作日志">
+      <!-- 列表 -->
+      <el-table :data="logList">
+        <el-table-column prop="type" label="操作类型"/>
+        <el-table-column prop="who" label="操作人"/>
+        <el-table-column prop="result" label="执行结果">
+          <template #default="scope">
+            <el-tag effect="dark" type="success">
+              {{ scope.row.result }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="time" label="操作时间"/>
+        <el-table-column prop="remark" label="备注"/>
+        <template #empty>
+          <el-empty :image-size="120" description="暂无项目"/>
+        </template>
+      </el-table>
+    </el-card>
+  </article>
+</template>
+
+<style lang="scss" src="./style.scss" scoped></style>

src/views/project/overview/style.scss

@@ -0,0 +1,117 @@
+.overview-page {
+  margin: 16px 24px 60px;
+  padding-bottom: 60px;
+
+  .el-card {
+    border: none;
+    margin-bottom: 16px;
+  }
+
+  ::v-deep .el-descriptions {
+    .el-descriptions__label {
+      margin-right: 0;
+    }
+  }
+
+
+  .el-row {
+    &.first-row {
+      ::v-deep .el-card {
+        .el-card__body {
+          @apply flex flex-col items-center;
+          .icon {
+            width: 28px;
+          }
+
+          .number {
+            font-size: 28px;
+            font-weight: 600;
+          }
+
+          .index {
+            color: #808695;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+
+    &.second-row {
+      .chart1 {
+        height: 400px;
+      }
+
+      .card-chart2 {
+        ::v-deep .el-card__body {
+          padding: 0;
+        }
+      }
+
+      .chart2 {
+        height: 230px;
+      }
+
+      .chart3 {
+        height: 154px;
+      }
+    }
+  }
+
+  ::v-deep .el-table {
+    width: 100%;
+    background-color: #fff;
+    border: none;
+
+    &::before {
+      display: none;
+    }
+
+    .el-table__header-wrapper {
+      .el-table__header {
+        height: 48px;
+
+        th {
+          .cell {
+            font-weight: 600;
+            color: #535a5d;
+            padding: 0 17px;
+          }
+        }
+      }
+    }
+
+    .el-table__body-wrapper {
+      &::-webkit-scrollbar {
+        width: 3px;
+      }
+
+      tr {
+        &:last-child {
+          td {
+            border-bottom: none !important;
+          }
+        }
+
+        td {
+          padding: 0;
+          border-bottom: 1px solid #f4f4f4 !important;
+
+          .cell {
+            line-height: 13px;
+            color: #535a5d;
+            padding: 13px 17px;
+            font-size: 13px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+
+    }
+
+    .el-empty {
+      @apply select-none;
+    }
+  }
+}

src/views/project/style.scss

@@ -0,0 +1,40 @@
+.project-page {
+  .header {
+    padding: 16px 32px 0 32px;
+    border-bottom: 1px solid #e8eaec;
+    background: #fff;
+
+    .name {
+      font-size: 20px;
+      font-weight: 500;
+      color: #17233d;
+      margin-bottom: 16px;
+    }
+
+    ::v-deep .el-descriptions {
+      .el-descriptions__label {
+        margin-right: 0;
+      }
+    }
+
+    .nav {
+      @apply flex h-full items-center select-none;
+      margin-top: 8px;
+
+      .item {
+        @apply h-full cursor-pointer;
+        margin: 0 16px;
+        padding: 8px 16px;
+
+        &:first-child {
+          margin-left: 0;
+        }
+
+        &.exact-active {
+          border-bottom: 2px solid #409eff;
+          color: #409eff;
+        }
+      }
+    }
+  }
+}