保存进度！

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

@@ -12,18 +12,18 @@
         <el-progress
             type="circle"
             :percentage="ui.percentage"
-            :status="ui.color"
+            :status="ui.warningLevel"
         >
             <template #default>
                 <span class="percentage-label">{{ ui.indicator }}</span>
-                <span class="percentage-value">{{ percentage }}%</span>
+                <span :class="warningLevelClass">{{ percentage }}%</span>
             </template>
         </el-progress>
     </div>
 </template>
 
 <script lang="ts">
-import { reactive } from "vue";
+import { reactive, computed } from "vue";
 export default {
     name: "ArchievementCompleteRateComponent",
     props: {
@@ -36,7 +36,7 @@ export default {
             type: String,
             default: "",
         },
-        color: {
+        warningLevel: { // 警告等级
             type: String,
             default: "success",
         },
@@ -45,13 +45,33 @@ export default {
     {
         const percentage = Number( props.percentage ).valueOf();
 
+        const warningLevelClass = computed((): string =>
+        {
+            let textClass = "";
+
+            if ( props.warningLevel === "success" )
+            {
+                textClass = "percentage-value";
+            }
+            else if ( props.warningLevel === "warning" )
+            {
+                textClass = "percentage-value-warning";
+            }
+            else if ( props.warningLevel === "exception" )
+            {
+                textClass = "percentage-value-exception";
+            }
+
+            return textClass;
+        });
+
         const ui = reactive({
             percentage,
             indicator: props.indicator,
-            color: props.color,
+            warningLevel: props.warningLevel,
         });
 
-        return { ui, };
+        return { ui, warningLevelClass, };
     },
 };
 </script>
@@ -79,6 +99,20 @@ export default {
         font-size: 28px;
     }
 
+    .percentage-value-warning {
+        display: block;
+        margin-top: 10px;
+        font-size: 28px;
+        color: orange;
+    }
+
+    .percentage-value-exception {
+        display: block;
+        margin-top: 10px;
+        font-size: 28px;
+        color: red;
+    }
+
     .percentage-label {
         display: block;
         margin-top: 10px;