保存进度！

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;

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

@@ -25,10 +25,12 @@
                     <ArchievementCompleteRateComponent
                         indicator="续保完成率"
                         :percentage="ui.insurance_renewal_rate"
+                        :warning-level="renewalRateWarningLevel(ui.insurance_renewal_rate_target)"
                     />
                     <ArchievementCompleteRateComponent
                         indicator="车非渗透率"
                         :percentage="ui.attaching_rate"
+                        :warning-level="attachingRateWarningLevel(ui.attaching_rate_target)"
                     />
                 </div>
                 <div class="total-archievement-charts-wrapper">
@@ -103,7 +105,9 @@ interface ui
     chartData: number[];
     totalArchievement: number;
     attaching_rate: string;
+    attaching_rate_target: string;
     insurance_renewal_rate: string; // 续保率
+    insurance_renewal_rate_target: string; // 续保率
     leading_reward_gainers: string[]; // 领跑奖
     advance_reward_gainers: string[]; // 飞跃奖
     dishonorPersons: string[];
@@ -153,7 +157,9 @@ export default {
             chartData: [0,], // 业绩表
             totalArchievement: 0, // 总业绩
             attaching_rate: "", // 车非渗透率
+            attaching_rate_target: "", // 车非渗透率目标值
             insurance_renewal_rate: "", // 续保率
+            insurance_renewal_rate_target: "", // 续保率目标值
             leading_reward_gainers: ["",], // 领跑奖
             advance_reward_gainers: ["",], // 飞跃奖
             dishonorPersons: ["",],
@@ -201,7 +207,9 @@ export default {
             // ui.chartData = data.mensual_archievement_list;
             // ui.totalArchievement = data.total_archievement;
             ui.attaching_rate = data.attaching_rate;
+            ui.attaching_rate_target = data.attaching_rate_target;
             ui.insurance_renewal_rate = data.insurance_renewal_rate;
+            ui.insurance_renewal_rate_target = data.insurance_renewal_rate_target;
             ui.leading_reward_gainers = data.leading_reward_gainers;
             ui.advance_reward_gainers = data.advance_reward_gainers;
             ui.dishonorPersons = data.backward_list;
@@ -331,6 +339,52 @@ export default {
             clearInterval( timerHandler );
         });
 
+        const attachingRateWarningLevel = ( attachingRateTarget: string ): string =>
+        {
+            const value: number = Number( attachingRateTarget );
+            let warningLevel = "";
+
+            console.log( "渗透率目标差值", attachingRateTarget, value );
+
+            if ( value >= 0.0 )
+            {
+                warningLevel = "success";
+            }
+            else if ( value > -0.5 && value < 0.0 )
+            {
+                warningLevel = "warning";
+            }
+            else if ( value <= -0.5 )
+            {
+                warningLevel = "exception";
+            }
+
+            return warningLevel;
+        };
+
+        const renewalRateWarningLevel = ( attachingRateTarget: string ): string =>
+        {
+            const value: number = Number( attachingRateTarget );
+            let warningLevel = "";
+
+            console.log( "续保率目标差值", attachingRateTarget, value );
+
+            if ( value >= 0.0 )
+            {
+                warningLevel = "success";
+            }
+            else if ( value >= -3 && value < 0.0 )
+            {
+                warningLevel = "warning";
+            }
+            else if ( value <= -3 )
+            {
+                warningLevel = "exception";
+            }
+
+            return warningLevel;
+        };
+
         return {
             ui,
             callerInfo,
@@ -339,6 +393,8 @@ export default {
             renderData: applyDepartmentArchievementData,
             refresh,
             logoutDesktopArchievement,
+            attachingRateWarningLevel,
+            renewalRateWarningLevel,
         };
     },
 };