完成业绩部分的布局。

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

@@ -0,0 +1,75 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-08 18:32:13
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/components/DishonorListComponent.vue
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+    <div class="dishonorlist-wrapper">
+        <div class="banner-wrapper">
+            <img src="@/assets/img/ranking/stop.png" alt="">
+            <div class="title-wrapper">
+                <span>"消7灭6"突围战</span>
+                <span>二月入营坐席</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "DishonorListComponent",
+    props: {
+        month: {
+            type: String,
+            require: true,
+        },
+        dishonorPersons: {
+            type: Array,
+            require: true,
+        },
+    },
+    setup() { },
+};
+</script>
+
+<style scoped lang="scss">
+.dishonorlist-wrapper {
+    height: 240px;
+    width: 360px;
+    border-radius: 5px;
+
+    background-color: $color-honorlist-bg;
+    backdrop-filter: blur(10px);
+
+    padding: 10px;
+
+    .banner-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: stretch;
+
+        img {
+            // width: 70px;
+            height: 60px;
+        }
+
+        span {
+            display: block;
+            width: 100%;
+            text-align: center;
+
+            font: {
+                family: "fz-zhuohei";
+                size: 1.7rem;
+                weight: 100;
+            }
+
+            color: #fff;
+        }
+    }
+}
+</style>

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

@@ -10,6 +10,20 @@
 <template>
     <div class="honorlist-wrapper">
         <span class="title">“90俱乐部”{{ $props.month }}月入围坐席</span>
+        <div class="reward-wrapper">
+            <div class="leading-reward-wrapper">
+                <div class="banner-wrapper">
+                    <img src="@/assets/img/ranking/medal.png" alt="领跑奖">
+                    <span>领跑奖</span>
+                </div>
+            </div>
+            <div class="advance-reward-wrapper">
+                <div class="banner-wrapper">
+                    <img src="@/assets/img/ranking/copper_medal.png" alt="飞跃奖">
+                    <span>飞跃奖</span>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -46,10 +60,10 @@ export default {
     background-color: $color-honorlist-bg;
     backdrop-filter: blur(10px);
 
-    padding: 15px;
+    padding: 10px;
 
     >*+* {
-        margin-top: 15px;
+        margin-top: 10px;
     }
 
     .title {
@@ -63,5 +77,52 @@ export default {
 
         color: goldenrod;
     }
+
+    .reward-wrapper {
+        width: 100%;
+
+        display: flex;
+        justify-content: center;
+        align-items: stretch;
+
+        >*+* {
+            margin-left: 10px;
+        }
+
+        .leading-reward-wrapper {
+            width: 165px;
+            height: 100%;
+
+
+        }
+
+        .advance-reward-wrapper {
+            width: 165px;
+            height: 100%;
+        }
+
+        .banner-wrapper {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            img {
+                width: 30px;
+                height: 30px;
+            }
+
+            span {
+                display: inline-block;
+                text-align: center;
+                color: #fff;
+
+                font: {
+                    size: 1.5rem;
+                    family: "FZ-ZHUOHEI";
+                    weight: 100;
+                }
+            }
+        }
+    }
 }
 </style>

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

@@ -17,8 +17,8 @@
             </div>
             <div class="archievement-wrapper">
                 <div class="total-archievement-rate-wrapper">
-                    <ArchievementCompleteRateComponent indicator="续保完成率" percentage=65 />
+                    <ArchievementCompleteRateComponent indicator="续保完成率" percentage=95 />
-                    <ArchievementCompleteRateComponent indicator="车非完成率" percentage=66 />
+                    <ArchievementCompleteRateComponent indicator="车非完成率" percentage=95 />
                 </div>
                 <div class="total-archievement-charts-wrapper">
                     <ArchievementChart total_archievement="435220" :chart_data="ui.chartData" />
@@ -26,6 +26,7 @@
             </div>
             <div class="reward-wrapper">
                 <HonorListComponent month="二" leading-reward="王炜" advance-reward="王炜" />
+                <DishonorListComponent month="二" :dishonorPersons="ui.dishonorPersons" />
             </div>
         </div>
         <div class="right-wrapper">
@@ -42,6 +43,7 @@ import { ElMessage } from "element-plus";
 import ArchievementChart from "@/components/ArchievementChartComponent.vue";
 import ArchievementCompleteRateComponent from "@/components/ArchievementCompleteRateComponent.vue";
 import HonorListComponent from "@/components/HonorListComponent.vue";
+import DishonorListComponent from "@/components/DishonorListComponent.vue";
 
 export default {
     name: "DesktopArchievement",
@@ -49,6 +51,7 @@ export default {
         ArchievementChart,
         ArchievementCompleteRateComponent,
         HonorListComponent,
+        DishonorListComponent,
     },
     setup()
     {
@@ -56,7 +59,8 @@ export default {
         const staffInfo = loadStaffInfo();
         const ui = reactive({
             chartData: [200, 230, 224, 218, 135, 147, 260, 800,],
-            totalArchievement: 456778,
+            totalArchievement: 120000000,
+            dishonorPersons: ["张三", "李四",],
         });
 
         const getTotalArchievement = computed(() =>
@@ -100,11 +104,6 @@ export default {
     display: flex;
     justify-content: end;
     align-items: stretch;
-
-    div {
-        // border: 1px solid red;
-        box-sizing: border-box;
-    }
 }
 
 .left-wrapper {
@@ -198,6 +197,14 @@ export default {
         //奖励部分
         // height: 280px;
         padding: 15px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        >*+* {
+            margin-left: 15px;
+        }
     }
 }
 
@@ -216,4 +223,9 @@ body {
             $color-bg-05,
             $color-bg-05);
 }
+
+div {
+    // border: 1px solid red;
+    box-sizing: border-box;
+}
 </style>