保存进度！

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>
 
@@ -66,13 +99,34 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.rankinglist-wrapper
+.rankinglist-wrapper {
-{
+    // border: 1px solid red;
-    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>

code/web/task_schedule/src/utils/ranking.ts

@@ -28,8 +28,8 @@ interface RankingListResponse
     departmentCode: string;
     year: string;
     month: string;
-    attachingRankingList: RankingListItem[];
+    attachingRateRankingList: RankingListItem[];
-    renewalRankintList: RankingListItem[];
+    renewalRateRankingList: RankingListItem[];
 };
 
 /**
@@ -49,8 +49,8 @@ function requestRankingList( reqParam: RankingListRequest, rander: any ): void /
         departmentCode: reqParam.departmentCode,
         year: reqParam.year,
         month: reqParam.month,
-        attachingRankingList: [],
+        attachingRateRankingList: [],
-        renewalRankintList: [],
+        renewalRateRankingList: [],
     };
 
     instance.request(
@@ -70,7 +70,7 @@ function requestRankingList( reqParam: RankingListRequest, rander: any ): void /
             rankingListResponse.month = data.month ?? "";
 
             // 遍历排行榜元素
-            for ( const item of ( data.attachingRankingList ?? [] )) // eslint-disable-line
+            for ( const item of ( data.attachingRateRankingList ?? [] )) // eslint-disable-line
             {
                 const index: number = item.index ?? -1;
 
@@ -79,10 +79,10 @@ function requestRankingList( reqParam: RankingListRequest, rander: any ): void /
                     continue;
                 }
 
-                rankingListResponse.attachingRankingList.push( item );
+                rankingListResponse.attachingRateRankingList.push( item );
             }
 
-            for ( const item of ( data.renewalRankintList ?? [] )) // eslint-disable-line
+            for ( const item of ( data.renewalRateRankingList ?? [] )) // eslint-disable-line
             {
                 const index: number = item.index ?? -1;
 
@@ -91,13 +91,11 @@ function requestRankingList( reqParam: RankingListRequest, rander: any ): void /
                     continue;
                 }
 
-                rankingListResponse.renewalRankintList.push( item );
+                rankingListResponse.renewalRateRankingList.push( item );
             }
 
             // 调用回调函数保存数据
             rander( rankingListResponse );
-
-            console.log( data );
         })
         .catch(( error ) =>
         {

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

@@ -31,12 +31,8 @@
                         :percentage="ui.attaching_rate"
                     />
                 </div>
-                <div
+                <div class="total-archievement-charts-wrapper">
-                    class="total-archievement-charts-wrapper"
+                    <ArchievementChart :chart-data="ui.chartData" />
-                >
-                    <ArchievementChart
-                        :chart-data="ui.chartData"
-                    />
                 </div>
             </div>
             <div class="reward-wrapper">
@@ -52,8 +48,35 @@
             </div>
         </div>
         <div class="right-wrapper">
-            <RankingListComponent />
+            <h1>本大爷</h1>
-            <RankingListComponent />
+            <div class="carousel-item">
+                <el-carousel
+                    arrow="never"
+                    indicator-position="none"
+                >
+                    <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"
+                >
+                    <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>
@@ -155,13 +178,15 @@ export default {
 
         const applyRankingListData = ( data: RankingListResponse ): void =>
         {
-            ui.attachingRankingList = data.attachingRankingList;
+            ui.attachingRankingList = data.attachingRateRankingList;
-            ui.renewalRankingList = data.renewalRankintList;
+            ui.renewalRankingList = data.renewalRateRankingList;
 
             // 更新UI
             // 先不显示界面，往队列中加入显示队列的回调，让vue刷新组件。
             ui.showUI = false;
 
+            console.log( "获取排行榜后的ui:", data );
+
             setTimeout(() => { ui.showUI = true; }, 0 );
         };
 
@@ -214,7 +239,7 @@ export default {
         onBeforeMount(() =>
         {
             // 设置每10分钟刷新一次
-            timerHandler = setInterval( refresh, 5000 );
+            timerHandler = setInterval( refresh, 600 * 1000 );
 
             refresh();
         });
@@ -358,8 +383,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>