将组件数据参数化

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

@@ -2,8 +2,8 @@
  * @Author: Kane
  * @Date: 2023-03-04 16:09:31
  * @LastEditors: Kane
- * @FilePath: /task_schedule/src/components/ArchievementComponent.vue
+ * @FilePath: /task_schedule/src/components/ArchievementChartComponent.vue
- * @Description: 
+ * @Description: 业绩图表组件
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
 -->
@@ -20,11 +20,22 @@ import { reactive, computed, onMounted } from "vue";
 import * as echarts from "echarts";
 
 export default {
-    name: "ArchievementComponent",
+    name: "ArchievementChartComponent",
-    setup()
+    props: {
+        total_archievement: {
+            type: String,
+            require: true,
+        },
+        chart_data: {
+            type: Array,
+            require: true,
+        },
+    },
+    setup(props)
     {
         const ui = reactive({
-            total_archievement: 435220,
+            total_archievement: props.total_archievement,
+            chart_data: props.chart_data,
         });
 
         const archivement_count = computed(() =>
@@ -49,7 +60,7 @@ export default {
                 },
                 series: [
                     {
-                        data: [200, 230, 224, 218, 135, 147, 260,],
+                        data: props.chart_data,
                         type: "line",
                     },
                 ],

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

@@ -9,15 +9,9 @@
 -->
 <template>
     <div class="complete-rate-wrapper">
-        <el-progress type="circle" :percentage="72">
+        <el-progress type="circle" :percentage="ui.percentage">
             <template #default="{ percentage }">
-                <span class="percentage-label">续保完成率</span>
+                <span class="percentage-label">{{ ui.indicator }}</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>
@@ -25,31 +19,39 @@
 </template>
 
 <script lang="ts">
-import { onMounted } from "vue";
+import { reactive } from "vue";
 export default {
     name: "ArchievementCompleteRateComponent",
-    setup()
+    props: {
+        percentage: {
+            type: String,
+            require: true,
+        },
+        indicator: {
+            type: String,
+            default: "",
+        },
+    },
+    setup(props)
     {
+        const percentage = Number(props.percentage).valueOf();
 
-
+        const ui = reactive({
-        onMounted(() =>
+            percentage: percentage,
-        {
+            indicator: props.indicator,
-
         });
 
-        return {};
+        return { ui, };
     },
 };
 </script>
 
 <style lang="scss">
 .complete-rate-wrapper {
-    // width: 150px;
+    // display: flex;
-    // height: 150px;
+    // flex-direction: column;
-    display: flex;
+    // justify-content: center;
-    flex-direction: column;
+    // align-items: center;
-    justify-content: center;
-    align-items: center;
 
     span {
         display: block;
@@ -57,6 +59,10 @@ export default {
         color: #fff;
     }
 
+    .el-progress {
+        margin: 8px;
+    }
+
     .percentage-value {
         display: block;
         margin-top: 10px;
@@ -69,8 +75,6 @@ export default {
         font-size: 12px;
     }
 
-    .el-progress {
+
-        margin-bottom: 15px;
-    }
 }
 </style>

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

@@ -13,10 +13,11 @@
             <span class="slogan">对标先进&nbsp;比学赶超</span>
             <div class="total-archievement-wrapper">
                 <div class="total-archievement-rate-wrapper">
-                    <ArchievementCompleteRateComponent />
+                    <ArchievementCompleteRateComponent indicator="续保完成率" percentage=65 />
+                    <ArchievementCompleteRateComponent indicator="车非完成率" percentage=66 />
                 </div>
                 <div class="total-archievement-charts-wrapper">
-                    <Archievement />
+                    <ArchievementChart total_archievement="435220" :chart_data="[200, 230, 224, 218, 135, 147, 260, 800]" />
                 </div>
             </div>
             <div class="reward-wrapper"></div>
@@ -31,12 +32,12 @@
 import { useRouter } from "vue-router";
 import { loadStaffInfo } from "@/utils/api/localStorage.js";
 import { ElMessage } from "element-plus";
-import Archievement from "@/components/ArchievementComponent.vue";
+import ArchievementChart from "@/components/ArchievementChartComponent.vue";
 import ArchievementCompleteRateComponent from "@/components/ArchievementCompleteRateComponent.vue";
 
 export default {
     name: "DesktopArchievement",
-    components: { Archievement, ArchievementCompleteRateComponent, },
+    components: { ArchievementChart, ArchievementCompleteRateComponent, },
     setup()
     {
         const router = useRouter();
@@ -123,8 +124,9 @@ export default {
             width: 25%;
             min-width: 180px;
             display: flex;
-            justify-content: center;
+            flex-direction: column;
-            align-items: end;
+            justify-content: end;
+            align-items: center;
         }
 
         .total-archievement-charts-wrapper {