开发排行榜组件

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>