还在调整界面

code/web/task_schedule/sfc.d.ts

@@ -0,0 +1,10 @@
+/*
+ * @Author: Kane
+ * @Date: 2023-03-04 17:21:37
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/sfc.d.ts
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+ */
+

code/web/task_schedule/shims-vue.d.ts

@@ -0,0 +1,14 @@
+/*
+ * @Author: Kane
+ * @Date: 2023-03-04 17:23:02
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/shims-vue.d.ts
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+ */
+declare module '*.vue' {
+    import { ComponentOptions } from 'vue';
+    const componentOptions: ComponentOptions;
+    export default componentOptions;
+}

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

@@ -1,41 +0,0 @@
-<!--
- * @Author: Kane
- * @Date: 2023-03-04 16:09:31
- * @LastEditors: Kane
- * @FilePath: /task_schedule/src/components/Archievement.vue
- * @Description: 
- * 
- * Copyright (c) ${2022} by Kane, All Rights Reserved. 
--->
-<template>
-    <div class="archievement-wrapper">
-        <span>总业绩</span>
-        <span>￥&nbsp;{{ }}</span>
-    </div>
-</template>
-
-<script lang="ts">
-import { reactive } from "vue";
-import * as echarts from "echarts";
-
-export default {
-    name: "ArchievementComponent",
-    setup()
-    {
-        const ui = reactive({
-            total_archievement: 435220,
-        });
-    },
-};
-</script>
-
-<style lang="scss">
-.archievement-wrapper {
-    height: 360px;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: stretch;
-}
-</style>

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

@@ -0,0 +1,110 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-04 16:09:31
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/components/ArchievementComponent.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>
+import { reactive, computed, onMounted } from "vue";
+import * as echarts from "echarts";
+
+export default {
+    name: "ArchievementComponent",
+    setup()
+    {
+        const ui = reactive({
+            total_archievement: 435220,
+        });
+
+        const archivement_count = computed(() =>
+        {
+            return ui.total_archievement;
+        });
+
+        //设置图表
+        const initCharts = () => 
+        {
+            var chartDom = document.getElementById('chartWrapper');
+            var myChart = echarts.init(chartDom);
+            var option;
+
+            option = {
+                xAxis: {
+                    type: 'category',
+                    data: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二",],
+                },
+                yAxis: {
+                    type: 'value',
+                    data: [200, 400, 600, 800, 1000,],
+                },
+                series: [
+                    {
+                        data: [200, 230, 224, 218, 135, 147, 260,],
+                        type: 'line',
+                    },
+                ],
+            };
+
+            option && myChart.setOption(option);
+
+            window.onresize = function() 
+            {
+                //自适应大小
+                myChart.resize();
+            };
+        };
+
+        onMounted(() =>
+        {
+            initCharts();
+        });
+
+        return { ui, archivement_count, initCharts, };
+    },
+};
+</script>
+
+<style lang="scss">
+.archievement-wrapper {
+    height: 360px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
+
+    span {
+        display: block;
+        width: 100%;
+        color: #25e6e6;
+        text-align: center;
+
+        font: {
+            size: 35px;
+            family: "FZ-ZHUOHEI";
+        }
+
+        flex-grow: 0;
+    }
+
+    #chartWrapper {
+        min-height: 200px;
+        width: 100%;
+        background-color: #ffffffaf;
+        backdrop-filter: blur(10px);
+        flex-grow: 1;
+        border-radius: 5px;
+    }
+}
+</style>

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

@@ -9,12 +9,13 @@
 -->
 <template>
     <div class="view-wrapper">
-        <!-- <div class="left-wrapper"></div> -->
         <div class="center-wrapper">
             <span class="slogan">对标先进&nbsp;比学赶超</span>
             <div class="total-archievement-wrapper">
                 <div class="total-archievement-rate-wrapper"></div>
-                <div class="total-archievement-charts-wrapper"></div>
+                <div class="total-archievement-charts-wrapper">
+                    <Archievement />
+                </div>
             </div>
             <div class="reward-wrapper"></div>
         </div>
@@ -30,8 +31,11 @@ import { useRouter } from "vue-router";
 import { StaffInfo } from "@/data/cpicxim/StaffInfo";
 import { loadStaffInfo } from "@/utils/api/localStorage";
 import { ElMessage } from "element-plus";
+import Archievement from "@/components/ArchievementComponent.vue";
+
 export default {
     name: "DesktopArchievement",
+    components: { Archievement, },
     setup()
     {
         const router = useRouter();
@@ -65,11 +69,15 @@ export default {
     align-items: stretch;
 
     div {
-        border: 1px solid red;
+        // border: 1px solid red;
         box-sizing: border-box;
     }
 }
 
+.left-wrapper {
+    width: 10%;
+}
+
 .center-wrapper {
     //中间部分
     width: 50%;
@@ -88,10 +96,10 @@ export default {
         font: {
             family: "FZ-ZHUOHEI";
             weight: 100;
-            size: 70px;
+            size: 90px;
         }
 
-        color: $color-bg-05;
+        color: $color-bg-04;
         text-shadow: #feebb1 0px 0px,
         #feebb1 5px 0px,
         #feebb1 -5px -0px,

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

@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { reactive, onBeforeMount, } from "vue";
+import { reactive, onBeforeMount } from "vue";
 import { useRouter } from "vue-router";
 import { loadStaffInfo, saveStaffInfo } from "@/utils/api/localStorage";
 import { login } from "@/utils/account";
@@ -71,7 +71,7 @@ export default {
             };
 
             login(info)
-                .then((response: any) =>
+                .then((response) =>
                 {
                     const data = response.data || { success: false, };
 
@@ -110,7 +110,7 @@ export default {
 
                     console.log(data);
                 })
-                .catch((error: any) =>
+                .catch((error) =>
                 {
                     debugger;
                     console.log(`登录失败，返回信息：${error}`);

code/web/task_schedule/tsconfig.json

@@ -11,7 +11,7 @@
     "compilerOptions": {
         "forceConsistentCasingInFileNames": true,
         "useDefineForClassFields": true,
-        "target": "ES6",
+        "target": "ESNext",
         "module": "ESNext",
         "moduleResolution": "node",
         "strict": true,