diff --git a/code/web/task_schedule/src/components/RankingListComponent.vue b/code/web/task_schedule/src/components/RankingListComponent.vue
index 59dc936..769d2d2 100644
--- a/code/web/task_schedule/src/components/RankingListComponent.vue
+++ b/code/web/task_schedule/src/components/RankingListComponent.vue
@@ -9,7 +9,40 @@
 -->
 <template>
     <div class="rankinglist-wrapper">
-        排行榜组件
+        <el-table
+            :data="topFive"
+            stripe
+            style="width:100%;"
+            :header-cell-style="{background:'#fecb96'}"
+        >
+            <el-table-column
+                label="名次"
+                width="60"
+                align="center"
+            >
+                <template #default="ranking">
+                    <span class="rankinglist-index">{{ ranking.row.index }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="名次"
+                width="160"
+                align="center"
+            >
+                <template #default="ranking">
+                    <span class="rankinglist-index">{{ ranking.row.callerName }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="指标"
+                width="80"
+                align="center"
+            >
+                <template #default="ranking">
+                    <span class="rankinglist-index">{{ ranking.row.appraiseValue }}</span>
+                </template>
+            </el-table-column>
+        </el-table>
     </div>
 </template>
 
@@ -42,7 +75,7 @@ export default {
      * setup函数
      * @param props 组件的props属性。
      */
-    setup( props )
+    setup(props)
     {
         /**
          * 计算对象，用于获取top5.
@@ -51,13 +84,13 @@ export default {
         {
             const rankingList = props.rankingList; // eslint-disable-line
 
-            rankingList.sort(( a, b ) =>
+            rankingList.sort((a, b) =>
             {
                 // @ts-ignore
                 return a.index - b.index;
             });
 
-            return rankingList.slice(0,5);
+            return rankingList.slice(0, 5);
         });
 
         return { props, topFive, };
@@ -66,13 +99,34 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.rankinglist-wrapper
-{
-    border: 1px solid red;
-
+.rankinglist-wrapper {
+    // border: 1px solid red;
+    border-radius: 5px;
     width: 300px;
     height: 250px;
-
-    font-size: 12px;
 }
+
+.rankinglist-index {
+    display: block;
+    text-align: center;
+}
+
+:deep(.el-table)
+{
+    border-radius: 5px;
+}
+
+:deep(.el-table__header-wrapper) {
+  thead {
+    th{
+      div{
+        // font-family: "FZ-ZHUOHEI";
+        font-weight: 500;
+        font-size: 15px;
+        color: #da3703;
+      }
+    }
+  }
+}
+
 </style>
diff --git a/code/web/task_schedule/src/layout/components/Aside.vue b/code/web/task_schedule/src/layout/components/Aside.vue
index f6833a4..8924f9e 100644
--- a/code/web/task_schedule/src/layout/components/Aside.vue
+++ b/code/web/task_schedule/src/layout/components/Aside.vue
@@ -116,7 +116,7 @@ export default {
     width: 100%;
 }
 
-.el-menu {
+:deep(.el-menu) {
     border-right: none;
     /* border-left: 5px solid #1d74b2; */
     overflow: auto;
diff --git a/code/web/task_schedule/src/layout/components/Header.vue b/code/web/task_schedule/src/layout/components/Header.vue
index 755ec5c..44697fc 100644
--- a/code/web/task_schedule/src/layout/components/Header.vue
+++ b/code/web/task_schedule/src/layout/components/Header.vue
@@ -11,7 +11,7 @@
     <div class="header-wrapper">
         <span class="company-name">CPIC</span>
         <div class="version-wrapper">
-            <span>测试版</span>
+            <span>桌面霸屏后台管理</span>
             <span>Build-202303251257</span>
         </div>
         <div class="buttons-wrapper">
@@ -93,6 +93,10 @@ export default {
         font: {
             size: 0.5rem;
         }
+
+        > *+* {
+            margin-top: 1px;
+        }
     }
 
     .company-name {
diff --git a/code/web/task_schedule/src/test/test.ts b/code/web/task_schedule/src/test/test.ts
index 2883091..f9bf9dd 100644
--- a/code/web/task_schedule/src/test/test.ts
+++ b/code/web/task_schedule/src/test/test.ts
@@ -8,6 +8,6 @@
  * Copyright (c) ${2022} by Kane, All Rights Reserved.
  */
 
-import { testNewCitizen } from "./identify.js";
+import { testRankingListRequest } from "./testRankingListRequest.js";
 
-testNewCitizen();
+testRankingListRequest();
diff --git a/code/web/task_schedule/src/utils/api/request.ts b/code/web/task_schedule/src/utils/api/request.ts
index e989643..9113c06 100644
--- a/code/web/task_schedule/src/utils/api/request.ts
+++ b/code/web/task_schedule/src/utils/api/request.ts
@@ -13,7 +13,7 @@ import axios, { type AxiosInstance } from "axios";
 const service: AxiosInstance = axios.create(
     {
         baseURL: "",
-        timeout: 5000,
+        timeout: 10000,
     }
 );
 
diff --git a/code/web/task_schedule/src/utils/ranking.ts b/code/web/task_schedule/src/utils/ranking.ts
index a592a9c..233a7f3 100644
--- a/code/web/task_schedule/src/utils/ranking.ts
+++ b/code/web/task_schedule/src/utils/ranking.ts
@@ -28,8 +28,83 @@ interface RankingListResponse
     departmentCode: string;
     year: string;
     month: string;
-    attachingRankingList: RankingListItem[];
-    renewalRankintList: RankingListItem[];
+    attachingRateRankingList: RankingListItem[];
+    renewalRateRankingList: RankingListItem[];
 };
 
-export { type RankingListRequest, type RankingListResponse };
+/**
+ * 请求坐席排行榜。
+ * @param reqParam 请求参数
+ * @param rander 保存请求结果的回调函数
+ * @returns 返回RankingListResponse对象，里面包含请求状态和数据。
+ */
+function requestRankingList( reqParam: RankingListRequest, rander: any ): void // eslint-disable-line
+{
+    // let attachingRankingList: RankingListItem[];
+    // let renewalRankintList: RankingListItem[];
+
+    const rankingListResponse: RankingListResponse = {
+        success: false,
+        message: "",
+        departmentCode: reqParam.departmentCode,
+        year: reqParam.year,
+        month: reqParam.month,
+        attachingRateRankingList: [],
+        renewalRateRankingList: [],
+    };
+
+    instance.request(
+        {
+            method: "post",
+            url: API_URL.URL_RANKINGLIST,
+            data: reqParam,
+        })
+        .then(( response ) =>
+        {
+            const data: RankingListResponse = response.data as RankingListResponse;
+
+            rankingListResponse.success = data.success ?? false;
+            rankingListResponse.message = data.message ?? "";
+            rankingListResponse.departmentCode = data.departmentCode ?? "";
+            rankingListResponse.year = data.year ?? "";
+            rankingListResponse.month = data.month ?? "";
+
+            // 遍历排行榜元素
+            for ( const item of ( data.attachingRateRankingList ?? [] )) // eslint-disable-line
+            {
+                const index: number = item.index ?? -1;
+
+                if ( index === -1 )
+                {
+                    continue;
+                }
+
+                rankingListResponse.attachingRateRankingList.push( item );
+            }
+
+            for ( const item of ( data.renewalRateRankingList ?? [] )) // eslint-disable-line
+            {
+                const index: number = item.index ?? -1;
+
+                if ( index === -1 )
+                {
+                    continue;
+                }
+
+                rankingListResponse.renewalRateRankingList.push( item );
+            }
+
+            // 调用回调函数保存数据
+            rander( rankingListResponse );
+        })
+        .catch(( error ) =>
+        {
+            console.log( error );
+        });
+}
+
+export {
+    type RankingListRequest,
+    type RankingListResponse,
+    requestRankingList
+};
diff --git a/code/web/task_schedule/src/views/DesktopArchievement.vue b/code/web/task_schedule/src/views/DesktopArchievement.vue
index 0942247..d51e4d2 100644
--- a/code/web/task_schedule/src/views/DesktopArchievement.vue
+++ b/code/web/task_schedule/src/views/DesktopArchievement.vue
@@ -31,12 +31,8 @@
                         :percentage="ui.attaching_rate"
                     />
                 </div>
-                <div
-                    class="total-archievement-charts-wrapper"
-                >
-                    <ArchievementChart
-                        :chart-data="ui.chartData"
-                    />
+                <div class="total-archievement-charts-wrapper">
+                    <ArchievementChart :chart-data="ui.chartData" />
                 </div>
             </div>
             <div class="reward-wrapper">
@@ -52,8 +48,37 @@
             </div>
         </div>
         <div class="right-wrapper">
-            <RankingListComponent />
-            <RankingListComponent />
+            <h1>本大爷</h1>
+            <div class="carousel-item">
+                <el-carousel
+                    arrow="never"
+                    indicator-position="none"
+                    :interval="4000"
+                >
+                    <el-carousel-item
+                        :key="1"
+                    >
+                        <RankingListComponent :ranking-list="ui.attachingRankingList" />
+                    </el-carousel-item>
+                    <el-carousel-item :key="2">
+                        <RankingListComponent :ranking-list="ui.renewalRankingList" />
+                    </el-carousel-item>
+                </el-carousel>
+            </div>
+            <div class="carousel-item">
+                <el-carousel
+                    arrow="never"
+                    indicator-position="none"
+                    :interval="4000"
+                >
+                    <el-carousel-item :key="1">
+                        <RankingListComponent :ranking-list="ui.attachingRankingList" />
+                    </el-carousel-item>
+                    <el-carousel-item :key="2">
+                        <RankingListComponent :ranking-list="ui.renewalRankingList" />
+                    </el-carousel-item>
+                </el-carousel>
+            </div>
         </div>
     </div>
 </template>
@@ -64,6 +89,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 +100,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 +130,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,8 +140,10 @@ export default {
             advance_reward_gainers: ["",], // 飞跃奖
             dishonorPersons: ["",],
             showUI: true, // 用来刷新页面的开关
+            attachingRankingList: [], // 坐席车非渗透率榜单
+            renewalRankingList: [], // 坐席续保率榜单
         });
-        const timerHandler = 0;
+        let timerHandler = 0;
 
         const getTotalArchievement = computed(() =>
         {
@@ -114,8 +158,8 @@ export default {
             return archievement;
         });
 
-        // 绘制数据
-        const renderData = ( data:Archievement ) =>
+        // 保存业绩数据
+        const applyArchievementData = ( data: Archievement ) =>
         {
             console.log( "部门业绩数据", data );
 
@@ -134,6 +178,20 @@ export default {
             setTimeout(() => { ui.showUI = true; }, 0 );
         };
 
+        const applyRankingListData = ( data: RankingListResponse ): void =>
+        {
+            ui.attachingRankingList = data.attachingRateRankingList;
+            ui.renewalRankingList = data.renewalRateRankingList;
+
+            // 更新UI
+            // 先不显示界面，往队列中加入显示队列的回调，让vue刷新组件。
+            ui.showUI = false;
+
+            console.log( "获取排行榜后的ui:", data );
+
+            setTimeout(() => { ui.showUI = true; }, 0 );
+        };
+
         // 退出桌面霸屏
         const logoutDesktopArchievement = () =>
         {
@@ -155,32 +213,49 @@ export default {
             router.push( "/login" );
         }
 
+        /**
+         * 刷新页面
+         */
         const refresh = () =>
         {
-            const deparmentInfo:Department =
+            const deparmentInfo: Department =
             {
                 departmentCode: callerInfo.departmentCode,
                 departmentName: callerInfo.departmentName,
             };
 
-            queryDepartmentArchievement( deparmentInfo, renderData );
+            const rankinglistRequest: RankingListRequest =
+            {
+                departmentCode: callerInfo.departmentCode,
+                year: "2023",
+                month: "06",
+            };
+
+            queryDepartmentArchievement( deparmentInfo, applyArchievementData );
+            requestRankingList( rankinglistRequest, applyRankingListData );
         };
 
+        /**
+         * 加载前
+         */
         onBeforeMount(() =>
         {
             // 设置每10分钟刷新一次
-            // timerHandler = setInterval( refresh, 5000 );
+            timerHandler = setInterval( refresh, 600 * 1000 );
 
             refresh();
         });
 
-        onUnmounted(():void =>
+        /**
+         * 页面卸载前
+         */
+        onUnmounted((): void =>
         {
             // 退出页面前关掉定时器
             clearInterval( timerHandler );
         });
 
-        return { ui, callerInfo, timerHandler, getTotalArchievement, renderData, refresh, logoutDesktopArchievement, };
+        return { ui, callerInfo, timerHandler, getTotalArchievement, renderData: applyArchievementData, refresh, logoutDesktopArchievement, };
     },
 };
 </script>
@@ -310,8 +385,26 @@ export default {
     justify-content: center;
     align-items: flex-start;
 
-    >*+* {
-        margin-top: 15px;
+    // >*+* {
+    //     margin-top: 15px;
+    // }
+    > h1 {
+        font: {
+            family: "FZ-ZHUOHEI";
+            weight: 100;
+            size: 30px;
+        }
+        color: $color-bg-04;
+
+        text-align: center;
+
+        width: 300px;
+    }
+
+    > div {
+        display: block;
+        height: 260px;
+        width: 300px;
     }
 }
 </style>
diff --git a/code/web/task_schedule/vite.config.js b/code/web/task_schedule/vite.config.js
index c22deeb..f68f44f 100644
--- a/code/web/task_schedule/vite.config.js
+++ b/code/web/task_schedule/vite.config.js
@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-02-15 09:25:52
  * @LastEditors: Kane
- * @LastEditTime: 2023-03-30 21:09:30
+ * @LastEditTime: 2023-06-07 15:53:53
  * @FilePath: /task_schedule/vite.config.js
  * @Description: 
  * 
@@ -18,6 +18,7 @@ export default defineConfig(( command, mode ) =>
     const env = loadEnv( mode, process.cwd(), "" );
 
     return {
+        server:{ host: "localhost", port: 3000, },
         plugins: [vue(),],
         base: "./",
         resolve: {