保存进度！

code/web/task_schedule/src/components/ArchievementCompleteRateComponent.vue

@@ -0,0 +1,76 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-07 23:22:13
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/components/ArchievementCompleteRateComponent.vue
+ * @Description: 业绩完成率组件
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+    <div class="complete-rate-wrapper">
+        <el-progress type="circle" :percentage="72">
+            <template #default="{ percentage }">
+                <span class="percentage-label">续保完成率</span>
+                <span class="percentage-value">{{ percentage }}%</span>
+            </template>
+        </el-progress>
+        <el-progress type="circle" :percentage="93">
+            <template #default="{ percentage }">
+                <span class="percentage-label">车非完成率</span>
+                <span class="percentage-value">{{ percentage }}%</span>
+            </template>
+        </el-progress>
+    </div>
+</template>
+
+<script lang="ts">
+import { onMounted } from "vue";
+export default {
+    name: "ArchievementCompleteRateComponent",
+    setup()
+    {
+
+
+        onMounted(() =>
+        {
+
+        });
+
+        return {};
+    },
+};
+</script>
+
+<style lang="scss">
+.complete-rate-wrapper {
+    // width: 150px;
+    // height: 150px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    span {
+        display: block;
+        width: 100%;
+        color: #fff;
+    }
+
+    .percentage-value {
+        display: block;
+        margin-top: 10px;
+        font-size: 28px;
+    }
+
+    .percentage-label {
+        display: block;
+        margin-top: 10px;
+        font-size: 12px;
+    }
+
+    .el-progress {
+        margin-bottom: 15px;
+    }
+}
+</style>

code/web/task_schedule/src/test/tsconfig.json

@@ -3,7 +3,7 @@
  * @Date: 2023-03-01 23:38:12
  * @LastEditors: Kane
  * @FilePath: /task_schedule/src/test/tsconfig.json
- * @Description: 运行测试代码用的tsconfig
+ * @Description: 运行测试代码用的tsconfig，使用单独的配置
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
  */

code/web/task_schedule/src/views/DesktopArchievement.vue

@@ -12,7 +12,9 @@
         <div class="center-wrapper">
             <span class="slogan">对标先进&nbsp;比学赶超</span>
             <div class="total-archievement-wrapper">
-                <div class="total-archievement-rate-wrapper"></div>
+                <div class="total-archievement-rate-wrapper">
+                    <ArchievementCompleteRateComponent />
+                </div>
                 <div class="total-archievement-charts-wrapper">
                     <Archievement />
                 </div>
@@ -26,16 +28,15 @@
 </template>
 
 <script lang="ts">
-// import { reactive, onBeforeMount } from "vue";
 import { useRouter } from "vue-router";
-// import { StaffInfo } from "@/data/cpicxim/StaffInfo";
 import { loadStaffInfo } from "@/utils/api/localStorage.js";
 import { ElMessage } from "element-plus";
 import Archievement from "@/components/ArchievementComponent.vue";
+import ArchievementCompleteRateComponent from "@/components/ArchievementCompleteRateComponent.vue";
 
 export default {
     name: "DesktopArchievement",
-    components: { Archievement, },
+    components: { Archievement, ArchievementCompleteRateComponent, },
     setup()
     {
         const router = useRouter();
@@ -120,10 +121,10 @@ export default {
         .total-archievement-rate-wrapper {
             //业绩比例
             width: 25%;
-
+            min-width: 180px;
             display: flex;
             justify-content: center;
-            align-items: center;
+            align-items: end;
         }
 
         .total-archievement-charts-wrapper {