保存进度！

2023-03-08 00:56:38 +08:00
parent 330f5fa1e4
commit 3313414c70
4 changed files with 84 additions and 9 deletions
--- a/code/web/task_schedule/src/components/ArchievementCompleteRateComponent.vue
+++ 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>