保存进度！

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

@@ -64,6 +64,8 @@ import { useRouter } from "vue-router";
 import { getCallerInfo } from "@/utils/api/localStorage.js";
 import { ElMessage } from "element-plus";
 import { type Archievement, queryDepartmentArchievement } from "@/utils/archievement.js";
+import { RankingListItem } from "@/types/cpicxim/RankingListItem.js";
+import { type RankingListRequest, type RankingListResponse, requestRankingList } from "@/utils/ranking.js";
 import { type Department } from "@/types/cpicxim/Department";
 import ArchievementChart from "@/components/ArchievementChartComponent.vue";
 import ArchievementCompleteRateComponent from "@/components/ArchievementCompleteRateComponent.vue";
@@ -73,6 +75,21 @@ import RankingListComponent from "@/components/RankingListComponent.vue";
 import { logout } from "@/utils/account.js";
 import { type TelSaler } from "@/types/cpicxim/TelSaler";
 
+interface ui
+{
+    currentMonth: string;
+    chartData: number[];
+    totalArchievement: number;
+    attaching_rate: string;
+    insurance_renewal_rate: string; // 续保率
+    leading_reward_gainers: string[]; // 领跑奖
+    advance_reward_gainers: string[]; // 飞跃奖
+    dishonorPersons: string[];
+    showUI: boolean; // 用来刷新页面的开关
+    attachingRankingList: RankingListItem[]; // 坐席车非渗透率榜单
+    renewalRankingList: RankingListItem[];
+};
+
 export default {
     name: "DesktopArchievement",
     components: {
@@ -88,7 +105,7 @@ export default {
         const numInChinese = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二",];
         const router = useRouter();
         const callerInfo: TelSaler = getCallerInfo();
-        const ui = reactive({
+        const ui: ui = reactive({
             currentMonth: numInChinese[monthIndex.getMonth() - 1],
             chartData: [0,], // 业绩表
             totalArchievement: 0, // 总业绩
@@ -98,6 +115,8 @@ export default {
             advance_reward_gainers: ["",], // 飞跃奖
             dishonorPersons: ["",],
             showUI: true, // 用来刷新页面的开关
+            attachingRankingList: [], // 坐席车非渗透率榜单
+            renewalRankingList: [], // 坐席续保率榜单
         });
         const timerHandler = 0;
 
@@ -114,8 +133,8 @@ export default {
             return archievement;
         });
 
-        // 绘制数据
-        const renderData = ( data:Archievement ) =>
+        // 保存业绩数据
+        const applyArchievementData = ( data:Archievement ) =>
         {
             console.log( "部门业绩数据", data );
 
@@ -134,6 +153,18 @@ export default {
             setTimeout(() => { ui.showUI = true; }, 0 );
         };
 
+        const applyRankingListData = ( data: RankingListResponse ): void =>
+        {
+            ui.attachingRankingList = data.attachingRankingList;
+            ui.renewalRankingList = data.renewalRankintList;
+
+            // 更新UI
+            // 先不显示界面，往队列中加入显示队列的回调，让vue刷新组件。
+            ui.showUI = false;
+
+            setTimeout(() => { ui.showUI = true; }, 0 );
+        };
+
         // 退出桌面霸屏
         const logoutDesktopArchievement = () =>
         {
@@ -155,6 +186,9 @@ export default {
             router.push( "/login" );
         }
 
+        /**
+         * 刷新页面
+         */
         const refresh = () =>
         {
             const deparmentInfo:Department =
@@ -163,9 +197,20 @@ export default {
                 departmentName: callerInfo.departmentName,
             };
 
-            queryDepartmentArchievement( deparmentInfo, renderData );
+            const rankinglistRequest: RankingListRequest =
+            {
+                departmentCode: callerInfo.departmentCode,
+                year: "2023",
+                month: "06",
+            };
+
+            queryDepartmentArchievement( deparmentInfo, applyArchievementData );
+            requestRankingList( rankinglistRequest, applyRankingListData );
         };
 
+        /**
+         * 加载前
+         */
         onBeforeMount(() =>
         {
             // 设置每10分钟刷新一次
@@ -174,13 +219,16 @@ export default {
             refresh();
         });
 
+        /**
+         * 页面卸载前
+         */
         onUnmounted(():void =>
         {
             // 退出页面前关掉定时器
             clearInterval( timerHandler );
         });
 
-        return { ui, callerInfo, timerHandler, getTotalArchievement, renderData, refresh, logoutDesktopArchievement, };
+        return { ui, callerInfo, timerHandler, getTotalArchievement, renderData: applyArchievementData, refresh, logoutDesktopArchievement, };
     },
 };
 </script>