保存进度！

code/web/task_schedule/src/assets/css/public/color.scss

@@ -6,3 +6,4 @@ $color-bg-04: #da3703;
 $color-bg-05: #ba1800;
 
 $color-charts-bg:#ffffff9f;
+$color-honorlist-bg: rgba(255, 255, 255, 0.3);

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

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { reactive, computed, onMounted } from "vue";
+import { reactive, onMounted } from "vue";
 import * as echarts from "echarts";
 
 export default {

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

@@ -0,0 +1,67 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-08 14:18:39
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/components/HonorListComponent.vue
+ * @Description: 光荣榜组件
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+    <div class="honorlist-wrapper">
+        <span class="title">“90俱乐部”{{ $props.month }}月入围坐席</span>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "HonorListComponent",
+    props: {
+        month: {
+            type: String,
+            require: true,
+        },
+        leadingReward: {
+            type: String,
+            require: true,
+        },
+        advanceReward: {
+            type: String,
+            require: true,
+        },
+    },
+    setup(props)
+    {
+        return {};
+    },
+};
+</script>
+
+<style scoped lang="scss">
+.honorlist-wrapper {
+    height: 240px;
+    width: 360px;
+    border-radius: 5px;
+
+    background-color: $color-honorlist-bg;
+    backdrop-filter: blur(10px);
+
+    padding: 15px;
+
+    >*+* {
+        margin-top: 15px;
+    }
+
+    .title {
+        display: block;
+        text-align: center;
+
+        font: {
+            family: "FZ-ZHUOHEI";
+            size: 1.4rem;
+        }
+
+        color: goldenrod;
+    }
+}
+</style>

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

@@ -13,7 +13,7 @@
             <span class="slogan">对标先进&nbsp;比学赶超</span>
             <div class="total-archievement-wrapper">
                 <span>总业绩</span>
-                <span>¥&nbsp;{{ getTotalArchievement }}</span>
+                <span>{{ getTotalArchievement }}</span>
             </div>
             <div class="archievement-wrapper">
                 <div class="total-archievement-rate-wrapper">
@@ -24,7 +24,9 @@
                     <ArchievementChart total_archievement="435220" :chart_data="ui.chartData" />
                 </div>
             </div>
-            <div class="reward-wrapper"></div>
+            <div class="reward-wrapper">
+                <HonorListComponent month="二" leading-reward="王炜" advance-reward="王炜" />
+            </div>
         </div>
         <div class="right-wrapper">
 
@@ -39,12 +41,14 @@ import { loadStaffInfo } from "@/utils/api/localStorage.js";
 import { ElMessage } from "element-plus";
 import ArchievementChart from "@/components/ArchievementChartComponent.vue";
 import ArchievementCompleteRateComponent from "@/components/ArchievementCompleteRateComponent.vue";
+import HonorListComponent from "@/components/HonorListComponent.vue";
 
 export default {
     name: "DesktopArchievement",
     components: {
         ArchievementChart,
         ArchievementCompleteRateComponent,
+        HonorListComponent,
     },
     setup()
     {
@@ -57,7 +61,13 @@ export default {
 
         const getTotalArchievement = computed(() =>
         {
-            const archievement = String(ui.totalArchievement).valueOf();
+            const cnyFormat = new Intl.NumberFormat("zh-cn",
+                {
+                    style: "currency",
+                    currency: "CNY",
+                    minimumFractionDigits: 0,
+                });
+            const archievement = cnyFormat.format(ui.totalArchievement);
 
             return archievement;
         });
@@ -159,10 +169,15 @@ export default {
         justify-content: center;
         align-items: stretch;
 
+        >*+* {
+            margin-left: 15px;
+        }
+
         .total-archievement-rate-wrapper {
             //业绩比例
-            width: 25%;
-            min-width: 180px;
+            // width: 20%;
+            width: 140px;
+            min-width: 140px;
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -171,7 +186,7 @@ export default {
 
         .total-archievement-charts-wrapper {
             //业绩图表
-            width: 75%;
+            width: 70%;
 
             display: flex;
             justify-content: center;
@@ -181,7 +196,8 @@ export default {
 
     .reward-wrapper {
         //奖励部分
-        height: 240px;
+        // height: 280px;
+        padding: 15px;
     }
 }