完成业绩部分的布局。

code/web/task_schedule/.eslintrc.cjs

@@ -84,7 +84,7 @@ module.exports = {
         "@typescript-eslint/quotes": ["error", "double",],
         "@typescript-eslint/space-before-function-paren": "off",
         "@typescript-eslint/strict-boolean-expressions": ["error", {
-          "allowString": true,
+          "allowString": false,
         },],
         "comma-style": ["error", "last",], //逗号在行位
         "array-bracket-spacing": ["error", "never",],

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

@@ -3,4 +3,7 @@ $color-bg-01: #fecb96;
 $color-bg-02: #f7954e;
 $color-bg-03: #f27620;
 $color-bg-04: #da3703;
-$color-bg-05: #ba1800;
+$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

@@ -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,38 +68,38 @@ 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;
         width: 100%;
-        background-color: #ffffffaf;
+        background-color: $color-charts-bg;
         backdrop-filter: blur(10px);
         flex-grow: 1;
         border-radius: 5px;

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/data/cpicxim/StaffInfo.ts

@@ -2,31 +2,31 @@
  * @Author: Kane
  * @Date: 2023-02-28 14:48:30
  * @LastEditors: Kane
- * @FilePath: /task_schedule/src/data/cpicxim/StuffInfo.ts
- * @Description: 
- * 
- * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+ * @FilePath: /task_schedule/src/data/cpicxim/StaffInfo.ts
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
  */
 
 class StaffInfo
 {
     constructor(
         p13uid: string,
-        staff_code: string,
-        staff_name: string,
-        department_code: string,
-        department_name: string,
-        section_office_code: string,
-        section_office_name: string
+        staffCode: string,
+        staffName: string,
+        departmentCode: string,
+        departmentName: string,
+        sectionOfficeCode: string,
+        sectionOfficeName: string
     )
     {
-        this._stuffCode = staff_code;
-        this._stuffName = staff_name;
+        this._stuffCode = staffCode;
+        this._stuffName = staffName;
         this._p13uid = p13uid;
-        this._department_code = department_code;
-        this._department_name = department_name;
-        this._section_office_code = section_office_code;
-        this._section_office_name = section_office_name;
+        this._departmentCode = departmentCode;
+        this._departmentName = departmentName;
+        this._sectionOfficeCode = sectionOfficeCode;
+        this._sectionOfficeName = sectionOfficeName;
     }
 
     public get stuffCode(): string
@@ -34,9 +34,9 @@ class StaffInfo
         return this._stuffCode;
     }
 
-    public set stuffCode(stuff_code: string)
+    public set stuffCode(stuffCode: string)
     {
-        this._stuffCode = stuff_code;
+        this._stuffCode = stuffCode;
     }
 
     public get stuffName(): string
@@ -44,9 +44,9 @@ class StaffInfo
         return this._stuffName;
     }
 
-    public set stuffName(stuff_name: string)
+    public set stuffName(stuffName: string)
     {
-        this._stuffName = stuff_name;
+        this._stuffName = stuffName;
     }
 
     public get P13UID(): string
@@ -59,34 +59,33 @@ class StaffInfo
         this._p13uid = p13uid;
     }
 
-    public set departmentCode(department_code: string)
+    public set departmentCode(departmentCode: string)
     {
-        this._department_code = department_code;
+        this._departmentCode = departmentCode;
     }
 
-    public get departmentCode()
+    public get departmentCode(): string
     {
-        return this._department_code;
+        return this._departmentCode;
     }
 
-    public set departmentName(department_name: string)
+    public set departmentName(departmentName: string)
     {
-        this._department_name = department_name;
+        this._departmentName = departmentName;
     }
 
-    public get departmentName()
+    public get departmentName(): string
     {
-        return this._department_name;
+        return this._departmentName;
     }
 
     private _stuffCode: string;
     private _stuffName: string;
     private _p13uid: string;
-    private _department_code: string;
-    private _department_name: string;
-    private _section_office_code: string;
-    private _section_office_name: string;
+    private _departmentCode: string;
+    private _departmentName: string;
+    private readonly _sectionOfficeCode: string;
+    private readonly _sectionOfficeName: string;
 }
 
 export { StaffInfo };
-

code/web/task_schedule/src/store/index.ts

@@ -4,8 +4,8 @@
  * @LastEditors: Kane
  * @FilePath: /task_schedule/src/store/index.ts
  * @Description: vuex配置文件
- * 
- * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
  */
 import { createStore } from "vuex";
 import app from "./modules/app";
@@ -16,4 +16,4 @@ const store = createStore({
     },
 });
 
-export default store;
+export default store;

code/web/task_schedule/src/store/modules/app.ts

@@ -3,9 +3,9 @@
  * @Date: 2023-03-01 23:03:02
  * @LastEditors: Kane
  * @FilePath: /task_schedule/src/store/modules/app.ts
- * @Description: 
- * 
- * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
  */
 const state = {
     staffInfo: null,
@@ -21,4 +21,4 @@ export default {
     getters,
     mutations,
     actions,
-};
+};

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/utils/account.ts

@@ -3,28 +3,29 @@
  * @Date: 2023-03-02 14:48:35
  * @LastEditors: Kane
  * @FilePath: /task_schedule/src/utils/account.ts
- * @Description: 
- * 
- * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
  */
 
-import { service as instance } from "./api/request";
-import { API_URL } from "./api/config";
+import { type AxiosResponse } from "axios";
+import { service as instance } from "./api/request.js";
+import { API_URL } from "./api/config.js";
 interface LoginInfo
 {
     p13account: string;
     password: string;
 }
 
-function login(data: LoginInfo)
+async function login(data: LoginInfo): Promise<AxiosResponse<any, any>>
 {
-    return instance.request(
+    return await instance.request(
         {
             method: "post",
             url: API_URL.URL_LOGIN,
-            data: data,
+            data,
         }
     );
 }
 
-export { LoginInfo, login };
+export { type LoginInfo, login };

code/web/task_schedule/src/utils/api/config.ts

@@ -8,5 +8,6 @@
  * Copyright (c) ${2022} by Kane, All Rights Reserved.
  */
 export const API_URL = {
-    URL_LOGIN: import.meta.env.VITE_URL_LOGIN,
+    // URL_LOGIN: import.meta.env.VITE_URL_LOGIN,
+    URL_LOGIN: "http://222.76.244.118:11001/admin-system/account/p13_account_check",
 };

code/web/task_schedule/src/utils/api/localStorage.ts

@@ -3,11 +3,11 @@
  * @Date: 2023-02-28 09:26:45
  * @LastEditors: Kane
  * @FilePath: /task_schedule/src/utils/api/localStorage.ts
- * @Description: 
- * 
- * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
  */
-import { StaffInfo } from "@/data/cpicxim/StaffInfo";
+import { StaffInfo } from "@/data/cpicxim/StaffInfo.js";
 
 const STUFF_ITEM = "stuff_info";
 
@@ -17,7 +17,7 @@ function loadStaffInfo(): StaffInfo
 
     try
     {
-        obj = JSON.parse(window.localStorage.getItem(STUFF_ITEM) || "{}");
+        obj = JSON.parse(window.localStorage.getItem(STUFF_ITEM) ?? "{}");
     }
     catch (error)
     {
@@ -25,23 +25,22 @@ function loadStaffInfo(): StaffInfo
     }
 
     const stuff = new StaffInfo(
-        obj._p13uid || "",
-        obj._stuffCode || "",
-        obj._stuffName || "",
-        obj._department_code || "",
-        obj._department_name || "",
-        obj._section_office_code || "",
-        obj._section_office_name || "");
-
+        obj._p13uid ?? "",
+        obj._stuffCode ?? "",
+        obj._stuffName ?? "",
+        obj._department_code ?? "",
+        obj._department_name ?? "",
+        obj._section_office_code ?? "",
+        obj._section_office_name ?? "");
 
     return stuff;
 }
 
-function saveStaffInfo(stuff: StaffInfo)
+function saveStaffInfo(stuff: StaffInfo): void
 {
     const json = JSON.stringify(stuff);
 
     window.localStorage.setItem(STUFF_ITEM, json);
 };
 
-export { loadStaffInfo, saveStaffInfo };
+export { loadStaffInfo, saveStaffInfo };

code/web/task_schedule/src/utils/api/request.ts

@@ -1,3 +1,12 @@
+/*
+ * @Author: Kane
+ * @Date: 2023-02-28 17:47:22
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/utils/api/request.ts
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
+ */
 
 import axios from "axios";
 
@@ -8,30 +17,30 @@ const service = axios.create(
     }
 );
 
-//请求拦截
+// 请求拦截
 service.interceptors.request.use(
     (config) =>
     {
         return config;
     },
-    (error) =>
+    async (error) =>
     {
         console.log(error);
 
-        return Promise.reject(error);
+        return await Promise.reject(error);
     }
 );
 
-//响应拦截
+// 响应拦截
 service.interceptors.response.use(
     (response) =>
     {
         return response;
     },
-    (error) =>
+    async (error) =>
     {
-        return Promise.reject(error);
+        return await Promise.reject(error);
     }
 );
 
-export { service };
+export { service };

code/web/task_schedule/src/utils/api/url.ts

@@ -75,7 +75,7 @@ function getParamsFromURL(url: string): stringkey
 
         const param = item.split("=");
 
-        paramObj[param[0]] = param[1] || "";
+        paramObj[param[0]] = param[1] ?? "";
     });
 
     return paramObj;

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,7 +12,7 @@
         "forceConsistentCasingInFileNames": true,
         "useDefineForClassFields": true,
         "target": "ESNext",
-        "module": "ESNext",
+        "module": "CommonJS",
         "moduleResolution": "node",
         "strict": true,
         "jsx": "preserve",
@@ -26,8 +26,8 @@
             ],
         },
         "lib": [
-            "esnext",
-            "dom"
+            "ESNext",
+            "DOM"
         ],
         "types": [
             "vite/client"
@@ -41,4 +41,7 @@
         "src/router/index.js",
         "src/router/index.js",
     ],
+    "exclude": [
+        "./node_modules",
+    ]
 }