coding...

src/router/asyncRoutes.js

@@ -134,6 +134,14 @@ export const devPushMenuList = [
     sort: 3,
     type: 'MENU',
   },
+  {
+    id: '2004',
+    name: '项目进度监控',
+    parentId: '2000',
+    url: 'test4',
+    sort: 4,
+    type: 'MENU',
+  },
 ];
 
 export default asyncRoutes;

src/router/modules/report.js

@@ -42,5 +42,16 @@ export default {
         icon: 'notice',
       },
     },
+    {
+      name: 'ProjectAnalysis',
+      path: '/report/project-analysis',
+      component: () => import('@/views/report/project-analysis/index.vue'),
+      meta: {
+        title: '项目进度监控',
+        sort: 3,
+        alias: 'test4',
+        icon: 'notice',
+      },
+    },
   ],
 };

src/views/report/project-analysis/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="project-analysis">
+    <report-header
+      title="项目进度监控"
+      v-model:dateRange="curTimeRange"
+    ></report-header>
+    <div class="page-main">
+      <div class="scroll-content"> </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="DispatchAnalysis">
+import { ref, computed, onMounted } from 'vue';
+import { useRequest } from 'vue-request';
+import { createCakePieOption } from '@/utils/chart';
+import {} from '@/api/report';
+const curTimeRange = ref([]);
+const timeParams = computed(() => {
+  return {
+    startTime: new Date(curTimeRange.value[0]).getTime(),
+    endTime: new Date(curTimeRange.value[1]).getTime(),
+  };
+});
+</script>
+
+<style lang="less" scoped>
+.project-analysis {
+  .page-main {
+    height: calc(100vh - 57px);
+    padding: 15px;
+    overflow: auto;
+    .scroll-content {
+      height: 100%;
+      min-height: 600px;
+      min-width: 1000px;
+    }
+
+    .card {
+      padding: 10px;
+      background-color: #fff;
+      border: 1px solid #e5e5e5;
+      border-radius: 4px;
+      .title {
+        color: #262626;
+        font-size: 14px;
+        font-weight: bold;
+        height: 36px;
+      }
+      .chart-wrap {
+        height: calc(100% - 36px);
+        &.service-box {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          align-content: flex-start;
+        }
+        .service-item {
+          height: 54px;
+          width: calc(50% - 8px);
+          margin-bottom: 8px;
+          padding: 6px 8px;
+          background-color: #f7f7f7;
+          border-radius: 2px;
+
+          .head {
+            font-size: 12px;
+            color: #262626;
+          }
+          .body {
+            font-size: 12px;
+            .label {
+              color: #8c8c8c;
+            }
+            .status {
+              color: #ff7d00;
+              &.finished {
+                color: #00b42a;
+              }
+            }
+            .process-box {
+              flex: 1;
+              margin-left: 30px;
+              background-color: #d9d9d9;
+              height: 6px;
+              border-radius: 3px;
+              width: 90%;
+              overflow: hidden;
+              .process {
+                background-color: #4080ff;
+                height: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>