保存进度！

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

@@ -12,12 +12,16 @@
         <div class="center-wrapper">
             <span class="slogan">对标先进&nbsp;比学赶超</span>
             <div class="total-archievement-wrapper">
+                <span>总业绩</span>
+                <span>¥&nbsp;{{ getTotalArchievement }}</span>
+            </div>
+            <div class="archievement-wrapper">
                 <div class="total-archievement-rate-wrapper">
                     <ArchievementCompleteRateComponent indicator="续保完成率" percentage=65 />
                     <ArchievementCompleteRateComponent indicator="车非完成率" percentage=66 />
                 </div>
                 <div class="total-archievement-charts-wrapper">
-                    <ArchievementChart total_archievement="435220" :chart_data="[200, 230, 224, 218, 135, 147, 260, 800]" />
+                    <ArchievementChart total_archievement="435220" :chart_data="ui.chartData" />
                 </div>
             </div>
             <div class="reward-wrapper"></div>
@@ -29,6 +33,7 @@
 </template>
 
 <script lang="ts">
+import { computed, reactive } from "vue";
 import { useRouter } from "vue-router";
 import { loadStaffInfo } from "@/utils/api/localStorage.js";
 import { ElMessage } from "element-plus";
@@ -37,11 +42,25 @@ import ArchievementCompleteRateComponent from "@/components/ArchievementComplete
 
 export default {
     name: "DesktopArchievement",
-    components: { ArchievementChart, ArchievementCompleteRateComponent, },
+    components: {
+        ArchievementChart,
+        ArchievementCompleteRateComponent,
+    },
     setup()
     {
         const router = useRouter();
         const staffInfo = loadStaffInfo();
+        const ui = reactive({
+            chartData: [200, 230, 224, 218, 135, 147, 260, 800,],
+            totalArchievement: 456778,
+        });
+
+        const getTotalArchievement = computed(() =>
+        {
+            const archievement = String(ui.totalArchievement).valueOf();
+
+            return archievement;
+        });
 
         //检查存储的登录信息，不存在则返回登录页面
         if (staffInfo.P13UID == "")
@@ -54,6 +73,8 @@ export default {
 
             router.push("/login");
         }
+
+        return { ui, getTotalArchievement, };
     },
 };
 </script>
@@ -94,6 +115,7 @@ export default {
         padding: 15px 0px;
         display: block;
         text-align: center;
+        flex-grow: 0;
 
         font: {
             family: "FZ-ZHUOHEI";
@@ -113,8 +135,26 @@ 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;
@@ -125,7 +165,7 @@ export default {
             min-width: 180px;
             display: flex;
             flex-direction: column;
-            justify-content: end;
+            justify-content: center;
             align-items: center;
         }