我的管理页面

src/app/my/my-management/my-management.component.html

+<div class="wrapper">
+  <div class="opt">
+    <select>
+      <option>全部</option>
+      <option *ngFor="let optItem of optList">
+        {{optItem.dropOptionName}}
+      </option>
+    </select>
+    <div>
+      2022年
+    </div>
+    <div>
+      8月
+    </div>
+  </div>
+  <ul class="opt">
+    <li [ngClass]="{selected:isTeam==0}" (click)="changeIsTeam(0)">团队个人完成率</li>
+    <li [ngClass]="{selected:isTeam==1}" (click)="changeIsTeam(1)">团队总完成率</li>
+  </ul>
+  <div echarts [options]="chartOption" class="chart" style="height: 300px;"></div>
+  <p style="color: #C1C1C1;text-align: center;">点击可查看对应数据</p>
+  <div class="list_wrapper">
+    <div class="title">
+     <span></span> 学习明细
+    </div>
+    <ul class="list_content">
+      <li>经纪人</li>
+      <li>直接团队</li>
+      <li>团队长</li>
+      <li>类型</li>
+      <li>学习进度</li>
+    </ul>
+    <ul class="list_content" *ngFor="let detailItem of detailList">
+      <li>{{detailItem.name}}</li>
+      <li>{{detailItem.systemName}}</li>
+      <li>{{detailItem.leaderName}}</li>
+      <li>{{detailItem.dropOptionName}}</li>
+      <li>{{detailItem.progress}}</li>
+    </ul>
+  </div>
+</div>

src/app/my/my-management/my-management.component.scss

+.wrapper{
+    padding: 10px 15px;
+    .opt{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        div{
+            margin: 10px;
+        }
+    }
+    ul.opt{
+        li{
+            height: 35px;
+            border: 1px #5F83FF solid;
+            color: #5F83FF;
+            border-radius: 5px;
+            line-height: 35px;
+            width: 45%;
+            text-align: center;
+        }
+        li.selected{
+            color: #fff;
+            background: #5F83FF;
+        }
+    }
+    .list_wrapper{
+        .title{
+            font-size: 18px;
+            align-items: center;
+            display: flex;
+            color: #333;
+            span{
+                display: inline-block;
+                width: 3px;
+                height: 15px;
+                background: #5F83FF;
+                margin-right: 10px;
+            }
+        }
+        .list_content{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            li{
+                height: 35px;
+                line-height: 35px;
+                text-align: center;
+                width: 20%;
+                overflow: hidden;
+            }
+            li:nth-child(1){
+                text-align: left;
+            }
+        }
+    }
+    
+}
+
+

src/app/my/my-management/my-management.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MyManagementComponent } from './my-management.component';
+
+describe('MyManagementComponent', () => {
+  let component: MyManagementComponent;
+  let fixture: ComponentFixture<MyManagementComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MyManagementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MyManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/my/my-management/my-management.component.ts

+import { Component, OnInit } from '@angular/core';
+import { MyService } from '../my.service';
+import { EChartOption } from 'echarts';
+import { borderBottomLeftRadius } from 'html2canvas/dist/types/css/property-descriptors/border-radius';
+
+
+@Component({
+  selector: 'ydlife-my-management',
+  templateUrl: './my-management.component.html',
+  styleUrls: ['./my-management.component.scss']
+})
+export class MyManagementComponent implements OnInit {
+  optList:Array<any>;
+  isTeam:number = 0;//0个人；1团队
+  chartOption: EChartOption = {}
+  personY:Array<any>;
+  detailList:Array<any>;
+  zeroList:Array<any>;
+  fiftyList:Array<any>;
+  seventyList:Array<any>;
+  ninetyNineList:Array<any>;
+  hundredList:Array<any>;
+  constructor(private myService: MyService) { }
+
+  ngOnInit() {
+    this.dropOptionsQuery('yd_trainning_file_type');
+    this.changeIsTeam(0);
+  }
+
+  dropOptionsQuery(code){
+    this.myService.dropOptionsQuery({code:code}).subscribe((res)=>{
+      if(res['success']){
+        this.optList = res['data']['dropMasterInfoList'][0]['dropOptionsInfoList'].filter((item)=>{
+          return item.dropOptionCode != 'productTraining' && item.dropOptionCode!= 'trainingVideo'
+        });
+      }
+      
+    })
+  }
+
+  changeIsTeam(isTeam){
+    this.isTeam = isTeam;
+    const params = {
+      dateSpan:'2022-08-31 23:59:59',
+      practitionerId:25,
+      // practitionerId:JSON.parse(localStorage.getItem('lifeCustomerInfo'))['practitionerId'],
+      mdDropOptionCode:null
+    }
+    if(this.isTeam == 0){
+      this.myService.personalCompletionRate(params).subscribe((res)=>{
+        console.log(res)
+        if(res['success']){
+          this.zeroList = res['data']['zeroList'];
+          this.fiftyList = res['data']['fiftyList'];
+          this.seventyList = res['data']['seventyList'];
+          this.ninetyNineList = res['data']['ninetyNineList'];
+          this.hundredList = res['data']['hundredList'];
+        }else{
+          this.zeroList = this.fiftyList = this.seventyList = this.ninetyNineList =  this.hundredList = [];
+        }
+        this.detailList = this.zeroList.concat(this.fiftyList).concat(this.seventyList).concat(this.ninetyNineList).concat(this.hundredList)
+        this.personY = [].concat(this.zeroList.length).concat(this.fiftyList.length).concat(this.seventyList.length).concat(this.ninetyNineList.length).concat(this.hundredList.length)
+        this.chartOption = {
+          xAxis: {
+            type: 'category',
+            data: ['0', '1-50', '51-70', '71-99', '100']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [
+            {
+              data: this.personY,
+              type: 'bar',
+              showBackground: true,
+              barWidth: 40,
+              backgroundStyle: {
+                color: 'rgba(180, 180, 180, 0.2)'
+              },
+              itemStyle: {
+                color: '#333',
+                shadowColor: '#91cc75',
+                borderType: 'dashed',
+                opacity: 0.9,
+                barBorderRadius:2,
+                normal:{
+                  label:{
+                    formatter:"{c} 人",
+                    show:true,
+                    position:"top",
+                    textStyle:{
+                      fontWeight:"border",
+                      fontSize:12,
+                      color:"#333"
+                    }
+                  }
+                }
+              }
+            }
+          ]
+        };
+      })
+      
+    }
+    if(this.isTeam == 1){
+      this.myService.teamCompletionRate(params).subscribe((res)=>{
+        console.log(res)
+        if(res['success']){
+          this.zeroList = res['data']['zeroList'];
+          this.fiftyList = res['data']['fiftyList'];
+          this.seventyList = res['data']['seventyList'];
+          this.ninetyNineList = res['data']['ninetyNineList'];
+          this.hundredList = res['data']['hundredList'];
+        }else{
+          this.zeroList = this.fiftyList = this.seventyList = this.ninetyNineList =  this.hundredList = [];
+        }
+        this.detailList = this.zeroList.concat(this.fiftyList).concat(this.seventyList).concat(this.ninetyNineList).concat(this.hundredList)
+        this.chartOption = {
+          xAxis: {
+            type: 'category',
+            data: ['天使', '冠军', '多多', '王一一']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [
+            {
+              data: [20, 40, 60, 100],
+              type: 'bar',
+              showBackground: false,
+              barWidth: 40,
+              backgroundStyle: {
+                color: 'rgba(180, 180, 180, 0.2)'
+              },
+              itemStyle: {
+                color: '#9EB4FF',
+                shadowColor: '#91cc75',
+                borderType: 'dashed',
+                opacity: 0.9,
+                barBorderRadius:2
+              }
+            }
+          ]
+        };
+      })
+    }
+  }
+ 
+}

src/app/my/my-routing.module.ts

@@ -83,7 +83,7 @@ import { YdCollegeComponent } from './yd-college/yd-college.component';
 import { MyTrainingComponent } from './my-training/my-training.component';
 import { TrainingRecordsComponent } from './training-records/training-records.component';
 import { CourseDetailComponent } from './course-detail/course-detail.component';
-
+import { MyManagementComponent } from './my-management/my-management.component';
 
 const myRoutes: Routes = [
   { path: '', component: MyCenterHomeComponent, canActivate: [AuthGuard], data: [{ title: '银盾保险经纪 - 工作台' }] },
@@ -191,6 +191,7 @@ const myRoutes: Routes = [
   { path: 'myTraining',component:MyTrainingComponent,canActivate:[AuthGuard],data:[{title: '我的培训'}]},
   { path: 'trainingRecords/:status',component:TrainingRecordsComponent,canActivate:[AuthGuard],data:[{title: '培训课程'}]},
   { path: 'courseDetail/:status/:fileId',component:CourseDetailComponent,canActivate:[AuthGuard],data:[{title: '课程介绍'}]},
+  { path: 'trainingManagement',component:MyManagementComponent,canActivate:[AuthGuard],data:[{title:'我的管理'}]}
 
 ];
 

src/app/my/my.module.ts

@@ -99,9 +99,10 @@ import { MyTrainingComponent } from './my-training/my-training.component';
 import { TrainingRecordsComponent } from './training-records/training-records.component';
 import { CourseDetailComponent } from './course-detail/course-detail.component';
 import { SecondsTransferPipe } from '../seconds-transfer.pipe';
+import { MyManagementComponent } from './my-management/my-management.component';
 
 @NgModule({
-  declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, MyToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe,SafeResourceUrlPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent, TodoListComponent, AddTaskComponent, MedicalServiceComponent, InvitationComponent, RegisterComponent, EmployeeInfoComponent, EmployeeBasicInfoComponent, WorkExperienceComponent, PersonalPhotosComponent, EmployeeIdCardComponent, EmployeeEducationComponent, PersonalStatementComponent, SignatureComponent, EmployeeSubmitComponent, BankCardComponent, MemberDetailComponent, ApprovalListComponent, ApprovalCommentsComponent, ApprovalResultListComponent, MyApplicationComponent, SuggestionComponent, EmployeeSalaryComponent, HistoricalRankComponent, TeamAreaPanelComponent, ArticleComponent, ArticleDetailComponent, ArticleReadComponent,SalaryDetailComponent,SalaryFirstYearComponent,DetailModalComponent, ProductComponent, ProductDataComponent, CommissionComponent, FileListComponent,MyCustomerComponent, CustomerRelationComponent, MyCustomerPolicyComponent, UnderwritingKnowledgeComponent, MyQuestionComponent, AskComponent, MenuItemComponent, MemberListComponent, ENoticeComponent, ENoticeSignComponent, RenewalReminderComponent, RenewalReminderDetailComponent, JointSalesComponent, JointSaleDetailComponent, IntegrationComponent, IntegrationDetailComponent, IntegrationRuleComponent, VideoComponent, QrcodeUploadComponent, NewsDetailComponent, MoreFeaturesComponent, MineComponent, YdCollegeComponent, MyTrainingComponent, TrainingRecordsComponent, CourseDetailComponent,SecondsTransferPipe],
+  declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, MyToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe,SafeResourceUrlPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent, TodoListComponent, AddTaskComponent, MedicalServiceComponent, InvitationComponent, RegisterComponent, EmployeeInfoComponent, EmployeeBasicInfoComponent, WorkExperienceComponent, PersonalPhotosComponent, EmployeeIdCardComponent, EmployeeEducationComponent, PersonalStatementComponent, SignatureComponent, EmployeeSubmitComponent, BankCardComponent, MemberDetailComponent, ApprovalListComponent, ApprovalCommentsComponent, ApprovalResultListComponent, MyApplicationComponent, SuggestionComponent, EmployeeSalaryComponent, HistoricalRankComponent, TeamAreaPanelComponent, ArticleComponent, ArticleDetailComponent, ArticleReadComponent,SalaryDetailComponent,SalaryFirstYearComponent,DetailModalComponent, ProductComponent, ProductDataComponent, CommissionComponent, FileListComponent,MyCustomerComponent, CustomerRelationComponent, MyCustomerPolicyComponent, UnderwritingKnowledgeComponent, MyQuestionComponent, AskComponent, MenuItemComponent, MemberListComponent, ENoticeComponent, ENoticeSignComponent, RenewalReminderComponent, RenewalReminderDetailComponent, JointSalesComponent, JointSaleDetailComponent, IntegrationComponent, IntegrationDetailComponent, IntegrationRuleComponent, VideoComponent, QrcodeUploadComponent, NewsDetailComponent, MoreFeaturesComponent, MineComponent, YdCollegeComponent, MyTrainingComponent, TrainingRecordsComponent, CourseDetailComponent,SecondsTransferPipe, MyManagementComponent],
   imports: [
     CommonModule,
     LifeCommonModule,

src/app/my/my.service.ts

@@ -924,4 +924,16 @@ export class MyService {
     const url = this.API + "/systemMessage/oneKeyRead";
     return this.http.post(url,JSON.stringify(params))
   }
+
+  //我的管理个人数据
+  personalCompletionRate(params){
+    const url = this.API + "/videoPlay/personalCompletionRate";
+    return this.http.post(url,JSON.stringify(params))
+  }
+
+  //我的管理团队数据
+  teamCompletionRate(params){
+    const url = this.API + "/videoPlay/teamCompletionRate";
+    return this.http.post(url,JSON.stringify(params))
+  }
 }