保存进度！

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

@@ -48,7 +48,12 @@
             </div>
         </div>
         <div class="right-wrapper">
-            <CallerArchievementComponent :this-month-premium="ui.totalArchievement" />
+            <CallerArchievementComponent
+                :caller-name="callerInfo.telSalerName"
+                :this-month-premium="ui.callerPersentMonthPremium"
+                :attaching-rate="ui.callerAttachingRate"
+                :renewal-rate="ui.callerRenewalRate"
+            />
             <div class="carousel-item">
                 <el-carousel
                     arrow="never"
@@ -123,6 +128,9 @@ interface ui
     showUI: boolean; // 用来刷新页面的开关
     attachingRankingList: RankingListItem[]; // 坐席车非渗透率榜单
     renewalRankingList: RankingListItem[];
+    callerAttachingRate: string;
+    callerRenewalRate: string;
+    callerPersentMonthPremium: number;
 }
 
 export default {
@@ -138,7 +146,7 @@ export default {
     setup()
     {
         const monthIndex = new Date();
-        const thisMonth: number = monthIndex.getMonth() + 1; // getMonth返回值从0开始。
+        const thisMonth: number = monthIndex.getMonth(); // getMonth返回值从0开始。
         const thisMonthString = thisMonth > 10 ? String( thisMonth ) : "0" + String( thisMonth );
         const thisYear: number = monthIndex.getFullYear();
         const thisYearString: string = String( thisYear );
@@ -170,6 +178,9 @@ export default {
             showUI: true, // 用来刷新页面的开关
             attachingRankingList: [], // 坐席车非渗透率榜单
             renewalRankingList: [], // 坐席续保率榜单
+            callerAttachingRate: "0.0",
+            callerRenewalRate: "0.0",
+            callerPersentMonthPremium: 0,
         });
         let timerHandler = 0;
 
@@ -223,6 +234,10 @@ export default {
             }, 0 );
         };
 
+        /**
+         * 将请求的坐席业绩数据渲染到页面
+         * @param data 
+         */
         const applyCallerArchievementData = ( data: CallerArchievement ): void =>
         {
             // 检查请求是否成功
@@ -239,9 +254,12 @@ export default {
 
             ui.chartData = data.mensual_archievement_list.slice( 0, thisMonth );
             ui.totalArchievement = data.total_archievement;
+            ui.callerAttachingRate = data.attaching_rate;
+            ui.callerRenewalRate = data.insurance_renewal_rate;
+            ui.callerPersentMonthPremium = data.mensual_archievement_list[thisMonth];
 
-            console.log( "业绩清单", ui.chartData );
-            console.log( "当月", data.mensual_archievement_list );
+            // console.log( "业绩清单", ui.chartData );
+            // console.log( "当月", data.mensual_archievement_list );
 
             ui.showUI = false;
             setTimeout(() =>
@@ -486,11 +504,19 @@ export default {
         width: 300px;
     }
 
-    >div {
+    .carousel-item {
+        // 为了限制走马灯组件的高度
         display: block;
         height: 260px;
         width: 300px;
     }
+
+    // >div {
+    //     // 为了限制走马灯组件的高度
+    //     display: block;
+    //     height: 260px;
+    //     width: 300px;
+    // }
 }
 </style>
 <style lang="scss">