完成业绩部分的布局。

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

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

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

@@ -2,34 +2,33 @@
  * @Author: Kane
  * @Date: 2023-03-04 16:09:31
  * @LastEditors: Kane
- * @FilePath: /task_schedule/src/components/ArchievementComponent.vue
- * @Description: 
+ * @FilePath: /task_schedule/src/components/ArchievementChartComponent.vue
+ * @Description: 业绩图表组件
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
 -->
 <template>
     <div class="archievement-wrapper">
-        <span>总业绩</span>
-        <span>¥&nbsp;{{ archivement_count }}</span>
         <div id="chartWrapper"></div>
     </div>
 </template>
 
 <script lang="ts">
-import { reactive, computed, onMounted } from "vue";
+import { reactive, onMounted } from "vue";
 import * as echarts from "echarts";
 
 export default {
-    name: "ArchievementComponent",
-    setup()
+    name: "ArchievementChartComponent",
+    props: {
+        chart_data: {
+            type: Array,
+            require: true,
+        },
+    },
+    setup(props)
     {
         const ui = reactive({
-            total_archievement: 435220,
-        });
-
-        const archivement_count = computed(() =>
-        {
-            return ui.total_archievement;
+            chart_data: props.chart_data,
         });
 
         //设置图表
@@ -49,7 +48,7 @@ export default {
                 },
                 series: [
                     {
-                        data: [200, 230, 224, 218, 135, 147, 260,],
+                        data: props.chart_data,
                         type: "line",
                     },
                 ],
@@ -69,33 +68,33 @@ export default {
             initCharts();
         });
 
-        return { ui, archivement_count, initCharts, };
+        return { ui, initCharts, };
     },
 };
 </script>
 
 <style lang="scss">
 .archievement-wrapper {
-    height: 360px;
+    height: 100%;
     width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: stretch;
+    // display: flex;
+    // flex-direction: column;
+    // justify-content: center;
+    // align-items: stretch;
 
-    span {
-        display: block;
-        width: 100%;
-        color: #25e6e6;
-        text-align: center;
+    // span {
+    //     display: block;
+    //     width: 100%;
+    //     color: #25e6e6;
+    //     text-align: center;
 
-        font: {
-            size: 35px;
-            family: "FZ-ZHUOHEI";
-        }
+    //     font: {
+    //         size: 35px;
+    //         family: "FZ-ZHUOHEI";
+    //     }
 
-        flex-grow: 0;
-    }
+    //     flex-grow: 0;
+    // }
 
     #chartWrapper {
         min-height: 200px;

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

@@ -0,0 +1,80 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-07 23:22:13
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/components/ArchievementCompleteRateComponent.vue
+ * @Description: 业绩完成率组件
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+    <div class="complete-rate-wrapper">
+        <el-progress type="circle" :percentage="ui.percentage">
+            <template #default="{ percentage }">
+                <span class="percentage-label">{{ ui.indicator }}</span>
+                <span class="percentage-value">{{ percentage }}%</span>
+            </template>
+        </el-progress>
+    </div>
+</template>
+
+<script lang="ts">
+import { reactive } from "vue";
+export default {
+    name: "ArchievementCompleteRateComponent",
+    props: {
+        percentage: {
+            type: String,
+            require: true,
+        },
+        indicator: {
+            type: String,
+            default: "",
+        },
+    },
+    setup(props)
+    {
+        const percentage = Number(props.percentage).valueOf();
+
+        const ui = reactive({
+            percentage: percentage,
+            indicator: props.indicator,
+        });
+
+        return { ui, };
+    },
+};
+</script>
+
+<style lang="scss">
+.complete-rate-wrapper {
+    // display: flex;
+    // flex-direction: column;
+    // justify-content: center;
+    // align-items: center;
+
+    span {
+        display: block;
+        width: 100%;
+        color: #fff;
+    }
+
+    .el-progress {
+        margin: 5px;
+    }
+
+    .percentage-value {
+        display: block;
+        margin-top: 10px;
+        font-size: 28px;
+    }
+
+    .percentage-label {
+        display: block;
+        margin-top: 10px;
+        font-size: 12px;
+    }
+
+
+}
+</style>

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

@@ -0,0 +1,128 @@
+<!--
+ * @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 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>
+
+<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: 10px;
+
+    >*+* {
+        margin-top: 10px;
+    }
+
+    .title {
+        display: block;
+        text-align: center;
+
+        font: {
+            family: "FZ-ZHUOHEI";
+            size: 1.4rem;
+        }
+
+        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/test/test.ts

@@ -0,0 +1,28 @@
+/*
+ * @Author: Kane
+ * @Date: 2023-03-02 15:48:44
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/test/test.ts
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
+ */
+
+import { type LoginInfo, login } from "../utils/account.js";
+
+const loginInfo: LoginInfo = {
+    p13account: "wangwei-202",
+    password: "Kane@1983",
+};
+
+login(loginInfo)
+    .then((response: any) =>
+    {
+        const data = response.data ?? {};
+
+        console.log(data);
+    })
+    .catch((error: any) =>
+    {
+        console.log(error);
+    });

code/web/task_schedule/src/test/tsconfig.json

@@ -0,0 +1,50 @@
+/*
+ * @Author: Kane
+ * @Date: 2023-03-01 23:38:12
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/test/tsconfig.json
+ * @Description: 运行测试代码用的tsconfig，使用单独的配置
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+ */
+{
+    "compilerOptions": {
+        "forceConsistentCasingInFileNames": true,
+        "useDefineForClassFields": true,
+        "target": "ESNext",
+        "module": "ESNext",
+        // "module": "CommonJS",
+        // "moduleResolution": "node",
+        "moduleResolution": "nodenext",
+        "strict": true,
+        "jsx": "preserve",
+        "sourceMap": true,
+        "resolveJsonModule": true,
+        "esModuleInterop": false,
+        "baseUrl": "./", // paths 路径解析起点
+        "paths": { // 别名路径设置
+            "@/*": [
+                "src/*"
+            ],
+        },
+        "lib": [
+            "ESNext",
+            "DOM"
+        ],
+        "types": [
+            "vite/client"
+        ]
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "src/**/*.vue",
+        "*.d.ts",
+        "src/router/index.js",
+        "src/router/index.js",
+        "./**/*.ts",
+    ],
+    "exclude": [
+        "./node_modules",
+    ]
+}

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

@@ -12,12 +12,22 @@
         <div class="center-wrapper">
             <span class="slogan">对标先进&nbsp;比学赶超</span>
             <div class="total-archievement-wrapper">
-                <div class="total-archievement-rate-wrapper"></div>
+                <span>总业绩</span>
+                <span>{{ getTotalArchievement }}</span>
+            </div>
+            <div class="archievement-wrapper">
+                <div class="total-archievement-rate-wrapper">
+                    <ArchievementCompleteRateComponent indicator="续保完成率" percentage=95 />
+                    <ArchievementCompleteRateComponent indicator="车非完成率" percentage=95 />
+                </div>
                 <div class="total-archievement-charts-wrapper">
-                    <Archievement />
+                    <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="王炜" />
+                <DishonorListComponent month="二" :dishonorPersons="ui.dishonorPersons" />
+            </div>
         </div>
         <div class="right-wrapper">
 
@@ -26,20 +36,45 @@
 </template>
 
 <script lang="ts">
-// import { reactive, onBeforeMount } from "vue";
+import { computed, reactive } from "vue";
 import { useRouter } from "vue-router";
-// import { StaffInfo } from "@/data/cpicxim/StaffInfo";
-import { loadStaffInfo } from "@/utils/api/localStorage";
+import { loadStaffInfo } from "@/utils/api/localStorage.js";
 import { ElMessage } from "element-plus";
-import Archievement from "@/components/ArchievementComponent.vue";
+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",
-    components: { Archievement, },
+    components: {
+        ArchievementChart,
+        ArchievementCompleteRateComponent,
+        HonorListComponent,
+        DishonorListComponent,
+    },
     setup()
     {
         const router = useRouter();
         const staffInfo = loadStaffInfo();
+        const ui = reactive({
+            chartData: [200, 230, 224, 218, 135, 147, 260, 800,],
+            totalArchievement: 120000000,
+            dishonorPersons: ["张三", "李四",],
+        });
+
+        const getTotalArchievement = computed(() =>
+        {
+            const cnyFormat = new Intl.NumberFormat("zh-cn",
+                {
+                    style: "currency",
+                    currency: "CNY",
+                    minimumFractionDigits: 0,
+                });
+            const archievement = cnyFormat.format(ui.totalArchievement);
+
+            return archievement;
+        });
 
         //检查存储的登录信息，不存在则返回登录页面
         if (staffInfo.P13UID == "")
@@ -52,6 +87,8 @@ export default {
 
             router.push("/login");
         }
+
+        return { ui, getTotalArchievement, };
     },
 };
 </script>
@@ -67,11 +104,6 @@ export default {
     display: flex;
     justify-content: end;
     align-items: stretch;
-
-    div {
-        // border: 1px solid red;
-        box-sizing: border-box;
-    }
 }
 
 .left-wrapper {
@@ -92,6 +124,7 @@ export default {
         padding: 15px 0px;
         display: block;
         text-align: center;
+        flex-grow: 0;
 
         font: {
             family: "FZ-ZHUOHEI";
@@ -111,24 +144,48 @@ export default {
     }
 
     .total-archievement-wrapper {
+        height: 80px;
+
+        span {
+            display: block;
+            width: 100%;
+            color: #25e6e6;
+            text-align: center;
+
+            font: {
+                size: 35px;
+                family: "FZ-ZHUOHEI";
+            }
+
+            flex-grow: 0;
+        }
+    }
+
+    .archievement-wrapper {
         //业绩部分
-        height: 360px;
+        height: 280px;
         display: flex;
         justify-content: center;
         align-items: stretch;
 
+        >*+* {
+            margin-left: 15px;
+        }
+
         .total-archievement-rate-wrapper {
             //业绩比例
-            width: 25%;
-
+            // width: 20%;
+            width: 140px;
+            min-width: 140px;
             display: flex;
+            flex-direction: column;
             justify-content: center;
             align-items: center;
         }
 
         .total-archievement-charts-wrapper {
             //业绩图表
-            width: 75%;
+            width: 70%;
 
             display: flex;
             justify-content: center;
@@ -138,7 +195,16 @@ export default {
 
     .reward-wrapper {
         //奖励部分
-        height: 240px;
+        // height: 280px;
+        padding: 15px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        >*+* {
+            margin-left: 15px;
+        }
     }
 }
 
@@ -157,4 +223,9 @@ body {
             $color-bg-05,
             $color-bg-05);
 }
+
+div {
+    // border: 1px solid red;
+    box-sizing: border-box;
+}
 </style>

code/web/task_schedule/tsconfig.json

@@ -12,8 +12,8 @@
         "forceConsistentCasingInFileNames": true,
         "useDefineForClassFields": true,
         "target": "ESNext",
-        "module": "ESNext",
-        "moduleResolution": "nodenext",
+        "module": "CommonJS",
+        "moduleResolution": "node",
         "strict": true,
         "jsx": "preserve",
         "sourceMap": true,