我的管理柱状图&详情页数据

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

 <div class="wrapper">
-  <div class="opt">
-    <select>
-      <option>全部</option>
-      <option *ngFor="let optItem of optList">
+  <div class="opt" style="margin-bottom: 10px;justify-content: flex-start;">
+    <select [(ngModel)]="mdDropOptionCode">
+      <option [value]="optItem.dropOptionCode" *ngFor="let optItem of optList">
         {{optItem.dropOptionName}}
       </option>
     </select>
-    <div>
-      2022年
+    <select [(ngModel)]="year">
+      <option value="null">全部</option>
+      <option *ngFor="let yearItem of yearList">{{yearItem}}</option>
+    </select>
+    <select [(ngModel)]="month">
+      <option *ngFor="let monthItem of monthList">{{monthItem}}</option>
+    </select>
+    <!-- <div>
+      2022年 <span class="iconfont icon-xiangxia"></span>
     </div>
     <div>
-      8月
-    </div>
+      8月 <span class="iconfont icon-xiangxia"></span>
+    </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>
+  <div echarts [options]="chartOption" class="chart" style="height: 300px;" #echarts id="main"
+  (click)="chartClick()"></div>
   <p style="color: #C1C1C1;text-align: center;">点击可查看对应数据</p>
   <div class="list_wrapper">
     <div class="title">
@@ -30,7 +37,8 @@
       <li>类型</li>
       <li>学习进度</li>
     </ul>
-    <ul class="list_content" *ngFor="let detailItem of detailList">
+    <ul class="list_content" *ngFor="let detailItem of detailList"
+    (click)="getLearnDetail(detailItem.practitionerId)">
       <li>{{detailItem.name}}</li>
       <li>{{detailItem.systemName}}</li>
       <li>{{detailItem.leaderName}}</li>
@@ -39,3 +47,30 @@
     </ul>
   </div>
 </div>
+<div class="toastWrapper toast" *ngIf="detailFlag">
+  <div *ngIf="detailFlag" (click)="detailFlag = false;">
+    X
+  </div>
+</div>
+<div id="toastContent" *ngIf="detailFlag">
+    <ul class="status">
+      <li style="border-right: 1px #F4F4F4 solid;">
+        <span>{{this.total}}</span><span>总视频数</span>
+      </li>
+      <li><span>{{this.count}}</span><span>已完成学习</span></li>
+    </ul>
+    <div class="list_wrapper">
+      <div class="title">
+       <span></span> 视频列表
+      </div>
+      <ul class="list_content">
+        <li>视频名称</li>
+        <li>学习状态</li>
+      </ul>
+      <ul *ngFor="let videoItem of videoList">
+        <li>{{videoItem.videoName}}</li>
+        <li>{{videoItem.flag}}</li>
+      </ul>
+    </div>
+</div>
+

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

 .wrapper{
     padding: 10px 15px;
+    background: #fff;
     .opt{
         display: flex;
         justify-content: space-between;
         align-items: center;
-        div{
-            margin: 10px;
+        select{
+            border: none;
+            margin-right: 15px;
         }
     }
     ul.opt{
@@ -55,5 +57,101 @@
     }
     
 }
+.toastWrapper {
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+    top: 0;
+  }
+.toast {
+    position: fixed;
+    left: 0;
+    right: 0;
+    min-width: 320px;
+    max-width: 640px;
+    width: 100%;
+    margin: 0 auto;
+    z-index: 1;
+    div{
+        position: absolute;
+        top: 0;
+        bottom: -45%;
+        left: 0;
+        right: 0;
+        margin: auto;
+        width: 35px;
+        height: 35px;
+        background: #595959;
+        line-height: 33px;
+        text-align: center;
+        color: #fff;
+        z-index: 1;
+        border-radius: 50%;
+        font-size: 24px;
+    }
+}
+#toastContent {
+    position: fixed;
+    top: 40px;
+    width: 95%;
+    height: 60%;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    background-color: #fff;
+    z-index: 2;
+    animation: wrapper-gradient .5s ease both;
+    overflow: auto;
+    border-radius: 8px;
+    padding: 15px 0;
+    .status{
+        display: flex;
+        text-align: center;
+        margin-bottom: 20px;
+        li{
+            display: flex;
+            flex-direction: column;
+            width: 50%;
+            span:nth-child(1){
+                font-size: 18px;
+                font-weight: bolder;
+            }
+            span:nth-child(2){
+                font-size: 16px;
+            }
+        }
+    }
+    .list_wrapper{
+        border-top: 1px #F4F4F4 solid;
+        padding: 15px 10px;
+        .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;
+            color: #333;
+            font-size: 14px;
+            li{
+                height: 35px;
+                line-height: 35px;
+                text-align: center;
+                width: 50%;
+                overflow: hidden;
+            }
+        }
+    }
+  }
+  
 
 

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

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit,ViewChild,ElementRef } from '@angular/core';
 import { MyService } from '../my.service';
 import { EChartOption } from 'echarts';
-import { borderBottomLeftRadius } from 'html2canvas/dist/types/css/property-descriptors/border-radius';
+import { NgxEchartsService } from 'ngx-echarts';
 
+const echarts = require('echarts');
 
 @Component({
   selector: 'ydlife-my-management',
@@ -10,21 +11,43 @@ import { borderBottomLeftRadius } from 'html2canvas/dist/types/css/property-desc
   styleUrls: ['./my-management.component.scss']
 })
 export class MyManagementComponent implements OnInit {
+  // @ViewChild('echarts') echarts: ElementRef
   optList:Array<any>;
+  mdDropOptionCode:string = null;
+  year:number = (new Date()).getFullYear();
+  month:number = (new Date()).getMonth() + 1;
   isTeam:number = 0;//0个人；1团队
   chartOption: EChartOption = {}
   personY:Array<any>;
+  teamX:Array<any>;
   detailList:Array<any>;
   zeroList:Array<any>;
   fiftyList:Array<any>;
   seventyList:Array<any>;
   ninetyNineList:Array<any>;
   hundredList:Array<any>;
-  constructor(private myService: MyService) { }
+  my_chart;
+  yearList:Array<any>;
+  monthList:Array<any>;
+  detailFlag:boolean = false;
+  systemList:Array<any>;
+  videoList:Array<any>;
+  count:number;
+  total:number;
+  constructor(private myService: MyService,private es: NgxEchartsService,private el: ElementRef) { }
 
   ngOnInit() {
     this.dropOptionsQuery('yd_trainning_file_type');
     this.changeIsTeam(0);
+    this.yearList = [2018,2019,2020,2021,2022,2023,2024,2025];
+    this.monthList = [1,2,3,4,5,6,7,8,9,10,11,12]
+    // console.log(this.echarts.nativeElement);
+    this.my_chart = echarts.init(this.el.nativeElement.querySelector('#main'));
+    this.my_chart.on('click', (params) => {
+      this.my_chart.setOption(this.chartOption);
+      console.log(params)
+  });
+
   }
 
   dropOptionsQuery(code){
@@ -33,11 +56,16 @@ export class MyManagementComponent implements OnInit {
         this.optList = res['data']['dropMasterInfoList'][0]['dropOptionsInfoList'].filter((item)=>{
           return item.dropOptionCode != 'productTraining' && item.dropOptionCode!= 'trainingVideo'
         });
+        this.optList = [{dropOptionCode:null,dropOptionName:'全部'}].concat(this.optList)
       }
       
     })
   }
 
+  selectOpt(){
+
+  }
+
   changeIsTeam(isTeam){
     this.isTeam = isTeam;
     const params = {
@@ -63,27 +91,42 @@ export class MyManagementComponent implements OnInit {
         this.chartOption = {
           xAxis: {
             type: 'category',
-            data: ['0', '1-50', '51-70', '71-99', '100']
+            name:'学习进度',
+            data: ['0', '1-50%', '51-70%', '71-99%', '100%'],
+            axisLabel: { //坐标轴刻度标签的相关设置。
+              interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
+              textStyle: {
+                  color: '#6C7293',
+                  fontStyle: 'normal',
+                  fontFamily: '微软雅黑',
+                  fontSize: 10,
+              },
+              rotate:0,
+            },
+            axisTick:{//坐标轴刻度相关设置。
+                  show: false,
+              },
           },
           yAxis: {
-            type: 'value'
+            type: 'value',
+            splitNumber: 3,
+            axisTick:{//坐标轴刻度相关设置。
+                show: false,
+              },
           },
           series: [
             {
-              data: this.personY,
+              // data: this.personY,
+              data:[8,6,4,2,0],
               type: 'bar',
-              showBackground: true,
-              barWidth: 40,
-              backgroundStyle: {
-                color: 'rgba(180, 180, 180, 0.2)'
-              },
+              showBackground: false,
+              barWidth: 30,
               itemStyle: {
-                color: '#333',
-                shadowColor: '#91cc75',
-                borderType: 'dashed',
-                opacity: 0.9,
-                barBorderRadius:2,
                 normal:{
+                  show: true,
+                  color: "#9EB4FF",
+                  barBorderRadius:5,
+                  borderWidth: 0,
                   label:{
                     formatter:"{c} 人",
                     show:true,
@@ -95,6 +138,11 @@ export class MyManagementComponent implements OnInit {
                     }
                   }
                 }
+              },
+              emphasis: {
+                itemStyle: {
+                    color:'#5F83FF'
+                }
               }
             }
           ]
@@ -106,38 +154,94 @@ export class MyManagementComponent implements OnInit {
       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'];
+          // 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'];
+          this.systemList = res['data']['systemList'];
         }else{
-          this.zeroList = this.fiftyList = this.seventyList = this.ninetyNineList =  this.hundredList = [];
+          this.systemList = [];
+        }
+        if(this.systemList.length){
+          this.teamX = this.systemList.map((item)=>{
+            return `${item.systemName}(${item.peopleRate})`
+          });
+          this.detailList = [];
+          for(let i=0;i<this.systemList.length;i++){
+            this.detailList = this.detailList.concat(this.systemList[i]['list'])
+          }
         }
-        this.detailList = this.zeroList.concat(this.fiftyList).concat(this.seventyList).concat(this.ninetyNineList).concat(this.hundredList)
         this.chartOption = {
           xAxis: {
             type: 'category',
-            data: ['天使', '冠军', '多多', '王一一']
+            data: this.teamX,
+            name:'团队/人',
+            axisTick:{show: false},
+            axisLabel: {
+              show: true,
+              interval:0,
+              formatter:function(params) {
+                  var newParamsName = "";
+                  var paramsNameNumber = params.length;
+                  var provideNumber = 4;  //一行显示几个字
+                  var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
+                  if (paramsNameNumber > provideNumber) {
+                      for (var p = 0; p < rowNumber; p++) {
+                          var tempStr = "";
+                          var start = p * provideNumber;
+                          var end = start + provideNumber;
+                          if (p == rowNumber - 1) {
+                              tempStr = params.substring(start, paramsNameNumber);
+                          } else {
+                              tempStr = params.substring(start, end) + "\n";
+                          }
+                          newParamsName += tempStr;
+                      }
+
+                  } else {
+                      newParamsName = params;
+                  }
+                  return newParamsName
+              },
+              textStyle: {
+                  color: '#6861a6' //文字颜色
+              }
+          }
           },
           yAxis: {
-            type: 'value'
+            type: 'value',
+            name:'学习进度%',
+            axisTick:{show: false},
           },
           series: [
             {
-              data: [20, 40, 60, 100],
+              data: ['20', '40', '60', '100'],
               type: 'bar',
               showBackground: false,
-              barWidth: 40,
-              backgroundStyle: {
-                color: 'rgba(180, 180, 180, 0.2)'
+              barWidth: 30,
+              itemStyle: {
+                normal:{
+                  show: true,
+                  color: "#9EB4FF",
+                  barBorderRadius:5,
+                  borderWidth: 0,
+                  label:{
+                    formatter:"{c} %",
+                    show:true,
+                    position:"top",
+                    textStyle:{
+                      fontWeight:"border",
+                      fontSize:12,
+                      color:"#333"
+                    }
+                  }
                 },
+              },
+              emphasis: {
                 itemStyle: {
-                color: '#9EB4FF',
-                shadowColor: '#91cc75',
-                borderType: 'dashed',
-                opacity: 0.9,
-                barBorderRadius:2
+                    color:'#5F83FF'
+                }
               }
             }
           ]
@@ -146,4 +250,21 @@ export class MyManagementComponent implements OnInit {
     }
   }
  
+
+  chartClick(){
+    // console.log(1)
+  }
+
+  getLearnDetail(practitionerId){
+    this.detailFlag = true;
+    this.myService.queryLearningProgressDetail({practitionerId:practitionerId}).subscribe((res)=>{
+      console.log(res)
+      if(res['success']){
+        this.videoList = res['data']['videoList'];
+        this.count = res['data']['count'];
+        this.total = res['data']['total'];
+      }
+      
+    })
+  }
 }

src/app/my/my.service.ts

@@ -936,4 +936,10 @@ export class MyService {
     const url = this.API + "/videoPlay/teamCompletionRate";
     return this.http.post(url,JSON.stringify(params))
   }
+
+  //学习明细接口
+  queryLearningProgressDetail(params){
+    const url = this.API + "/videoPlay/queryLearningProgressDetail";
+    return this.http.post(url,JSON.stringify(params))
+  }
 }

src/app/my/score-details/score-details.component.ts

@@ -32,7 +32,7 @@ export class ScoreDetailsComponent implements OnInit {
       if (res['success']) {
         this.salesScoreDetails = res['data']['detail'];
         this.chartOption ={
-          tooltip: {
+          tooltip: {//提示框组件
             trigger: 'item',
             formatter: '{a} <br/>{b}: {c} ({d}%)'
           },

src/styles.scss

@@ -301,3 +301,13 @@ footer.fixed {
   font-weight: 700;
   text-align: center;
 }
+
+@keyframes wrapper-gradient {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+
+}
\ No newline at end of file

src/tsconfig.app.json

@@ -2,7 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "types": []
+    "types": ["node"]
   },
   "exclude": [
     "test.ts",