[完善]首页年度完成情况

src/app/statistic-analysis/home/home.component.html

@@ -19,18 +19,20 @@
             <div class="progress-item">
               <div class="progress-name">当月完成情况</div>
               <div class="progress">
-                  <div class="progress-num">0%</div>
+                <div class="progress-num" style="color: white;">{{completeProgress.monthlyCompleteProgress}}%</div>
                 <div class="progress-bar">
-                    <div style="width: 12%;" class="progress-bar-inner progress-bar-gradient"></div>
+                  <div [style]="integrity(completeProgress.monthlyCompleteProgress)"
+                    class="progress-bar-inner progress-bar-gradient"></div>
                 </div>
               </div>
             </div>
             <div class="progress-item">
               <div class="progress-name">年计划完成率</div>
               <div class="progress">
-                  <div class="progress-num">0%</div>
+                <div class="progress-num" style="color: white;">{{completeProgress.yearlyCompleteProgress}}%</div>
                 <div class="progress-bar">
-                    <div style="width: 12%;" class="progress-bar-inner progress-bar-gradient"></div>
+                  <div [style]="integrity(completeProgress.yearlyCompleteProgress)" class=" progress-bar-inner
+                    progress-bar-gradient"></div>
                 </div>
               </div>
             </div>

src/app/statistic-analysis/home/home.component.ts

@@ -19,6 +19,7 @@ export class HomeComponent implements OnInit {
     yuandata
     ngOnInit() {
         this.getechartsdata()
+        this.getYearlyCompleteProgress()
         window.setTimeout(() => {
             /* this.unitType()
             this.unitData()
@@ -27,6 +28,25 @@ export class HomeComponent implements OnInit {
         }, 0)
     }
 
+
+
+    //获得年度完成情况 
+    completeProgress: any = {
+        monthlyCompleteProgress: '',
+        yearlyCompleteProgress: ''
+    }
+    getYearlyCompleteProgress() {
+        this.http.get('/api/StatisticsAnalysis/Companies/YearlyCompleteProgress').subscribe((data) => {
+            // console.log('获得年度完成情况', data)
+            this.completeProgress = data
+        })
+    }
+    integrity(width) {
+        let style: any = {}
+        style.width = width + '%';
+        return style
+    }
+
     //更新echarts视图
     /* updateEcharts(){
       this.planState.resize()

src/assets/css/newStyle.css

@@ -317,7 +317,7 @@ iframe { display: block; }
 
 .progress-list .progress-item { height: 44px; line-height: 36px; padding-top: 4px; display: flex; }
 .progress-list .progress-name { width: 120px; padding-right: 10px; overflow: hidden; white-space: nowrap; font-size: 16px; color: rgba(255, 255, 255, 0.5); }
-.progress-list .progress-num { position: absolute; width: 0px; overflow: hidden; left: 5px; top: 0; width: 42px; white-space: nowrap; z-index: 100; font-weight: 500; font-size: 18px; line-height: 34px; }
+.progress-list .progress-num { position: absolute; width: 0px; overflow: hidden; left: 5px; top: 0; width: 62px; white-space: nowrap; z-index: 100; font-weight: 500; font-size: 18px; line-height: 34px; }
 .progress-list .progress { border: 1px solid #fff; border-radius: 2px; position: relative; flex: 1; }
 .progress-list .progress:before { content: ""; width: 4px; height: 34px; border-radius: 100px; border: 1px solid #fff; position: absolute; left: -8px; top: 0; }