From 3313414c7069ec413b3742767bdec90a030f99ba Mon Sep 17 00:00:00 2001
From: Kane <wangkane@qq.com>
Date: Wed, 8 Mar 2023 00:56:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E5=AD=98=E8=BF=9B=E5=BA=A6=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ArchievementCompleteRateComponent.vue     | 76 +++++++++++++++++++
 code/web/task_schedule/src/test/tsconfig.json |  2 +-
 .../src/views/DesktopArchievement.vue         | 13 ++--
 code/web/task_schedule/tsconfig.json          |  2 -
 4 files changed, 84 insertions(+), 9 deletions(-)
 create mode 100644 code/web/task_schedule/src/components/ArchievementCompleteRateComponent.vue

diff --git a/code/web/task_schedule/src/components/ArchievementCompleteRateComponent.vue b/code/web/task_schedule/src/components/ArchievementCompleteRateComponent.vue
new file mode 100644
index 0000000..f012dca
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/code/web/task_schedule/src/test/tsconfig.json b/code/web/task_schedule/src/test/tsconfig.json
index dcad63d..9fd1404 100644
--- a/code/web/task_schedule/src/test/tsconfig.json
+++ b/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. 
  */
diff --git a/code/web/task_schedule/src/views/DesktopArchievement.vue b/code/web/task_schedule/src/views/DesktopArchievement.vue
index 7300fe7..3c33a2d 100644
--- a/code/web/task_schedule/src/views/DesktopArchievement.vue
+++ b/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 {
diff --git a/code/web/task_schedule/tsconfig.json b/code/web/task_schedule/tsconfig.json
index ada7321..c42450d 100644
--- a/code/web/task_schedule/tsconfig.json
+++ b/code/web/task_schedule/tsconfig.json
@@ -12,10 +12,8 @@
         "forceConsistentCasingInFileNames": true,
         "useDefineForClassFields": true,
         "target": "ESNext",
-        // "module": "ESNext",
         "module": "CommonJS",
         "moduleResolution": "node",
-        // "moduleResolution": "nodenext",
         "strict": true,
         "jsx": "preserve",
         "sourceMap": true,