将组件数据参数化

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-value">{{ percentage }}%</span>
-            </template>
-        </el-progress>
-        <el-progress type="circle" :percentage="93">
-            <template #default="{ percentage }">
-                <span class="percentage-label">车非完成率</span>
+                <span class="percentage-label">{{ ui.indicator }}</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();
 
-
-        onMounted(() =>
-        {
-
+        const ui = reactive({
+            percentage: percentage,
+            indicator: props.indicator,
         });
 
-        return {};
+        return { ui, };
     },
 };
 </script>
 
 <style lang="scss">
 .complete-rate-wrapper {
-    // width: 150px;
-    // height: 150px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    // display: flex;
+    // flex-direction: column;
+    // 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>