From 92553a9ba9009742a0239f141296d75b0a86e3f7 Mon Sep 17 00:00:00 2001
From: Kane Wang <wangkane@qq.com>
Date: Wed, 8 Mar 2023 13:24:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E5=AD=98=E8=BF=9B=E5=BA=A6=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ArchievementChartComponent.vue | 46 +++++++-----------
 .../ArchievementCompleteRateComponent.vue     |  2 +-
 .../src/views/DesktopArchievement.vue         | 48 +++++++++++++++++--
 3 files changed, 62 insertions(+), 34 deletions(-)

diff --git a/code/web/task_schedule/src/components/ArchievementChartComponent.vue b/code/web/task_schedule/src/components/ArchievementChartComponent.vue
index c5c0315..9c92e54 100644
--- a/code/web/task_schedule/src/components/ArchievementChartComponent.vue
+++ b/code/web/task_schedule/src/components/ArchievementChartComponent.vue
@@ -9,8 +9,6 @@
 -->
 <template>
     <div class="archievement-wrapper">
-        <span>总业绩</span>
-        <span>¥&nbsp;{{ archivement_count }}</span>
         <div id="chartWrapper"></div>
     </div>
 </template>
@@ -22,10 +20,6 @@ import * as echarts from "echarts";
 export default {
     name: "ArchievementChartComponent",
     props: {
-        total_archievement: {
-            type: String,
-            require: true,
-        },
         chart_data: {
             type: Array,
             require: true,
@@ -34,15 +28,9 @@ export default {
     setup(props)
     {
         const ui = reactive({
-            total_archievement: props.total_archievement,
             chart_data: props.chart_data,
         });
 
-        const archivement_count = computed(() =>
-        {
-            return ui.total_archievement;
-        });
-
         //设置图表
         const initCharts = () => 
         {
@@ -80,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;
diff --git a/code/web/task_schedule/src/components/ArchievementCompleteRateComponent.vue b/code/web/task_schedule/src/components/ArchievementCompleteRateComponent.vue
index 648947b..aac21e3 100644
--- a/code/web/task_schedule/src/components/ArchievementCompleteRateComponent.vue
+++ b/code/web/task_schedule/src/components/ArchievementCompleteRateComponent.vue
@@ -60,7 +60,7 @@ export default {
     }
 
     .el-progress {
-        margin: 8px;
+        margin: 5px;
     }
 
     .percentage-value {
diff --git a/code/web/task_schedule/src/views/DesktopArchievement.vue b/code/web/task_schedule/src/views/DesktopArchievement.vue
index 7f45cb2..15fcc53 100644
--- a/code/web/task_schedule/src/views/DesktopArchievement.vue
+++ b/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;
         }