渲染数据。

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

@@ -8,7 +8,10 @@
  * Copyright (c) ${2022} by Kane, All Rights Reserved.
 -->
 <template>
-    <div class="view-wrapper">
+    <div
+        v-if="ui.showUI"
+        class="view-wrapper"
+    >
         <div class="center-wrapper">
             <span class="slogan">对标先进&nbsp;比学赶超</span>
             <div class="total-archievement-wrapper">
@@ -19,14 +22,16 @@
                 <div class="total-archievement-rate-wrapper">
                     <ArchievementCompleteRateComponent
                         indicator="续保完成率"
-                        percentage="95"
+                        :percentage="ui.insurance_renewal_rate"
                     />
                     <ArchievementCompleteRateComponent
                         indicator="车非渗透率"
-                        percentage="95"
+                        :percentage="ui.attaching_rate"
                     />
                 </div>
-                <div class="total-archievement-charts-wrapper">
+                <div
+                    class="total-archievement-charts-wrapper"
+                >
                     <ArchievementChart
                         :chart-data="ui.chartData"
                     />
@@ -35,8 +40,8 @@
             <div class="reward-wrapper">
                 <HonorListComponent
                     month="二"
-                    leading-reward="王炜"
-                    advance-reward="王炜"
+                    :leading-reward="ui.leading_reward_gainers"
+                    :advance-reward="ui.advance_reward_gainers"
                 />
                 <DishonorListComponent
                     month="二"
@@ -49,7 +54,7 @@
 </template>
 
 <script lang="ts">
-import { computed, reactive } from "vue";
+import { computed, reactive, onBeforeMount } from "vue";
 import { useRouter } from "vue-router";
 import { loadStaffInfo } from "@/utils/api/localStorage.js";
 import { ElMessage } from "element-plus";
@@ -72,9 +77,14 @@ export default {
         const router = useRouter();
         const staffInfo = loadStaffInfo();
         const ui = reactive({
-            chartData: [200, 230, 224, 218, 135, 147, 260, 800,],
-            totalArchievement: 120000000,
-            dishonorPersons: ["张三", "李四",],
+            chartData: [0,], // 业绩表
+            totalArchievement: 0, // 总业绩
+            attaching_rate: "", // 车非渗透率
+            insurance_renewal_rate: "", // 续保率
+            leading_reward_gainers: ["",], // 领跑奖
+            advance_reward_gainers: ["",], // 飞跃奖
+            dishonorPersons: ["",],
+            showUI: true, // 用来刷新页面的开关
         });
 
         const getTotalArchievement = computed(() =>
@@ -90,19 +100,20 @@ export default {
             return archievement;
         });
 
-        const requestArchievement = () =>
+        // 绘制数据
+        const renderData = (data:Archievement) =>
         {
-            const archievement: Archievement = {
-                success: false,
-                message: "",
-                total_archievement: 0,
-                mensual_archievement_list: [],
-                insurance_renewal_rate: "",
-                attaching_rate: "",
-                leading_reward_gainers: [],
-                advance_reward_gainers: [],
-                backward_list: [],
-            };
+            console.log("部门业绩数据", data);
+
+            ui.chartData = data.mensual_archievement_list;
+            ui.totalArchievement = data.total_archievement;
+            ui.attaching_rate = data.attaching_rate;
+            ui.insurance_renewal_rate = data.insurance_renewal_rate;
+
+            // 更新UI
+            ui.showUI = false;
+
+            setTimeout(() => { ui.showUI = true; }, 0);
         };
 
         // 检查存储的登录信息，不存在则返回登录页面
@@ -117,7 +128,12 @@ export default {
             router.push("/login");
         }
 
-        return { ui, getTotalArchievement, requestArchievement, };
+        onBeforeMount(() =>
+        {
+            queryDepartmentArchievement(renderData);
+        });
+
+        return { ui, getTotalArchievement, renderData, };
     },
 };
 </script>