开发排行榜组件

code/web/task_schedule/src/components/RankingListComponent.vue

@@ -0,0 +1,78 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-06-06 11:01:01
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/components/RankingListComponent.vue
+ * @Description: 排行榜组件
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
+-->
+<template>
+    <div class="rankinglist-wrapper">
+        排行榜组件
+    </div>
+</template>
+
+<script lang="ts">
+/* eslint-disable */
+import { computed } from "vue";
+
+interface RankingListItem
+{
+    index: number;
+    callerName: string;
+    appraiseValue: string;
+}
+
+export default {
+    name: "RankingListComponent",
+    props: {
+        title: {
+            type: String,
+            require: true,
+            default: () => "",
+        },
+        rankingList: {
+            type: Array,
+            require: true,
+            default: () => [],
+        },
+    },
+    /**
+     * setup函数
+     * @param props 组件的props属性。
+     */
+    setup( props )
+    {
+        /**
+         * 计算对象，用于获取top5.
+         */
+        const topFive = computed(() =>
+        {
+            const rankingList = props.rankingList; // eslint-disable-line
+
+            rankingList.sort(( a, b ) =>
+            {
+                // @ts-ignore
+                return a.index - b.index;
+            });
+
+            return rankingList.slice(0,5);
+        });
+
+        return { props, topFive, };
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.rankinglist-wrapper
+{
+    border: 1px solid red;
+
+    width: 300px;
+    height: 250px;
+
+    font-size: 12px;
+}
+</style>

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

@@ -51,7 +51,10 @@
                 />
             </div>
         </div>
-        <div class="right-wrapper" />
+        <div class="right-wrapper">
+            <RankingListComponent />
+            <RankingListComponent />
+        </div>
     </div>
 </template>
 
@@ -66,6 +69,7 @@ import ArchievementChart from "@/components/ArchievementChartComponent.vue";
 import ArchievementCompleteRateComponent from "@/components/ArchievementCompleteRateComponent.vue";
 import HonorListComponent from "@/components/HonorListComponent.vue";
 import DishonorListComponent from "@/components/DishonorListComponent.vue";
+import RankingListComponent from "@/components/RankingListComponent.vue";
 import { logout } from "@/utils/account.js";
 import { type TelSaler } from "@/types/cpicxim/TelSaler";
 
@@ -76,6 +80,7 @@ export default {
         ArchievementCompleteRateComponent,
         HonorListComponent,
         DishonorListComponent,
+        RankingListComponent,
     },
     setup()
     {
@@ -94,7 +99,7 @@ export default {
             dishonorPersons: ["",],
             showUI: true, // 用来刷新页面的开关
         });
-        let timerHandler = 0;
+        const timerHandler = 0;
 
         const getTotalArchievement = computed(() =>
         {
@@ -297,8 +302,17 @@ export default {
 }
 
 .right-wrapper {
-    min-width: 400px;
+    min-width: 300px;
     width: 25%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+
+    >*+* {
+        margin-top: 15px;
+    }
 }
 </style>
 <style lang="scss">