Skip to content

Y
ydLife
Commit 8e238d10 by Chao Sun
Options

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

parent 0a24ed8c
Showing with 320 additions and 49 deletions
src/app/my/my-management/my-management.component.html
<div class="wrapper"> <div class="wrapper">
<div class="opt"> <div class="opt" style="margin-bottom: 10px;justify-content: flex-start;">
<select> <select [(ngModel)]="mdDropOptionCode">
<option>全部</option> <option [value]="optItem.dropOptionCode" *ngFor="let optItem of optList">
<option *ngFor="let optItem of optList">
{{optItem.dropOptionName}} {{optItem.dropOptionName}}
</option> </option>
</select> </select>
<div> <select [(ngModel)]="year">
2022年 <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>
<div> <div>
8月 8月 <span class="iconfont icon-xiangxia"></span>
</div> </div> -->
</div> </div>
<ul class="opt"> <ul class="opt">
<li [ngClass]="{selected:isTeam==0}" (click)="changeIsTeam(0)">团队个人完成率</li> <li [ngClass]="{selected:isTeam==0}" (click)="changeIsTeam(0)">团队个人完成率</li>
<li [ngClass]="{selected:isTeam==1}" (click)="changeIsTeam(1)">团队总完成率</li> <li [ngClass]="{selected:isTeam==1}" (click)="changeIsTeam(1)">团队总完成率</li>
</ul> </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> <p style="color: #C1C1C1;text-align: center;">点击可查看对应数据</p>
<div class="list_wrapper"> <div class="list_wrapper">
<div class="title"> <div class="title">
...@@ -30,7 +37,8 @@ ...@@ -30,7 +37,8 @@
<li>类型</li> <li>类型</li>
<li>学习进度</li> <li>学习进度</li>
</ul> </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.name}}</li>
<li>{{detailItem.systemName}}</li> <li>{{detailItem.systemName}}</li>
<li>{{detailItem.leaderName}}</li> <li>{{detailItem.leaderName}}</li>
...@@ -39,3 +47,30 @@ ...@@ -39,3 +47,30 @@
</ul> </ul>
</div> </div>
</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{ .wrapper{
padding: 10px 15px; padding: 10px 15px;
background: #fff;
.opt{ .opt{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
div{ select{
margin: 10px; border: none;
margin-right: 15px;
} }
} }
ul.opt{ ul.opt{
...@@ -55,5 +57,101 @@ ...@@ -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 { MyService } from '../my.service';
import { EChartOption } from 'echarts'; 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({ @Component({
selector: 'ydlife-my-management', selector: 'ydlife-my-management',
...@@ -10,21 +11,43 @@ import { borderBottomLeftRadius } from 'html2canvas/dist/types/css/property-desc ...@@ -10,21 +11,43 @@ import { borderBottomLeftRadius } from 'html2canvas/dist/types/css/property-desc
styleUrls: ['./my-management.component.scss'] styleUrls: ['./my-management.component.scss']
}) })
export class MyManagementComponent implements OnInit { export class MyManagementComponent implements OnInit {
// @ViewChild('echarts') echarts: ElementRef
optList:Array<any>; optList:Array<any>;
mdDropOptionCode:string = null;
year:number = (new Date()).getFullYear();
month:number = (new Date()).getMonth() + 1;
isTeam:number = 0;//0个人；1团队 isTeam:number = 0;//0个人；1团队
chartOption: EChartOption = {} chartOption: EChartOption = {}
personY:Array<any>; personY:Array<any>;
teamX:Array<any>;
detailList:Array<any>; detailList:Array<any>;
zeroList:Array<any>; zeroList:Array<any>;
fiftyList:Array<any>; fiftyList:Array<any>;
seventyList:Array<any>; seventyList:Array<any>;
ninetyNineList:Array<any>; ninetyNineList:Array<any>;
hundredList: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() { ngOnInit() {
this.dropOptionsQuery('yd_trainning_file_type'); this.dropOptionsQuery('yd_trainning_file_type');
this.changeIsTeam(0); 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){ dropOptionsQuery(code){
...@@ -33,11 +56,16 @@ export class MyManagementComponent implements OnInit { ...@@ -33,11 +56,16 @@ export class MyManagementComponent implements OnInit {
this.optList = res['data']['dropMasterInfoList'][0]['dropOptionsInfoList'].filter((item)=>{ this.optList = res['data']['dropMasterInfoList'][0]['dropOptionsInfoList'].filter((item)=>{
return item.dropOptionCode != 'productTraining' && item.dropOptionCode!= 'trainingVideo' return item.dropOptionCode != 'productTraining' && item.dropOptionCode!= 'trainingVideo'
}); });
this.optList = [{dropOptionCode:null,dropOptionName:'全部'}].concat(this.optList)
} }
}) })
} }
selectOpt(){
}
changeIsTeam(isTeam){ changeIsTeam(isTeam){
this.isTeam = isTeam; this.isTeam = isTeam;
const params = { const params = {
...@@ -63,27 +91,42 @@ export class MyManagementComponent implements OnInit { ...@@ -63,27 +91,42 @@ export class MyManagementComponent implements OnInit {
this.chartOption = { this.chartOption = {
xAxis: { xAxis: {
type: 'category', 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: { yAxis: {
type: 'value' type: 'value',
splitNumber: 3,
axisTick:{//坐标轴刻度相关设置。
show: false,
},
}, },
series: [ series: [
{ {
data: this.personY, // data: this.personY,
data:[8,6,4,2,0],
type: 'bar', type: 'bar',
showBackground: true, showBackground: false,
barWidth: 40, barWidth: 30,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
itemStyle: { itemStyle: {
color: '#333',
shadowColor: '#91cc75',
borderType: 'dashed',
opacity: 0.9,
barBorderRadius:2,
normal:{ normal:{
show: true,
color: "#9EB4FF",
barBorderRadius:5,
borderWidth: 0,
label:{ label:{
formatter:"{c} 人", formatter:"{c} 人",
show:true, show:true,
...@@ -95,6 +138,11 @@ export class MyManagementComponent implements OnInit { ...@@ -95,6 +138,11 @@ export class MyManagementComponent implements OnInit {
} }
} }
} }
},
emphasis: {
itemStyle: {
color:'#5F83FF'
}
} }
} }
] ]
...@@ -106,38 +154,94 @@ export class MyManagementComponent implements OnInit { ...@@ -106,38 +154,94 @@ export class MyManagementComponent implements OnInit {
this.myService.teamCompletionRate(params).subscribe((res)=>{ this.myService.teamCompletionRate(params).subscribe((res)=>{
console.log(res) console.log(res)
if(res['success']){ if(res['success']){
this.zeroList = res['data']['zeroList']; // this.zeroList = res['data']['zeroList'];
this.fiftyList = res['data']['fiftyList']; // this.fiftyList = res['data']['fiftyList'];
this.seventyList = res['data']['seventyList']; // this.seventyList = res['data']['seventyList'];
this.ninetyNineList = res['data']['ninetyNineList']; // this.ninetyNineList = res['data']['ninetyNineList'];
this.hundredList = res['data']['hundredList']; // this.hundredList = res['data']['hundredList'];
this.systemList = res['data']['systemList'];
}else{ }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 = { this.chartOption = {
xAxis: { xAxis: {
type: 'category', 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: { yAxis: {
type: 'value' type: 'value',
name:'学习进度%',
axisTick:{show: false},
}, },
series: [ series: [
{ {
data: [20, 40, 60, 100], data: ['20', '40', '60', '100'],
type: 'bar', type: 'bar',
showBackground: false, showBackground: false,
barWidth: 40, barWidth: 30,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
itemStyle: { itemStyle: {
color: '#9EB4FF', normal:{
shadowColor: '#91cc75', show: true,
borderType: 'dashed', color: "#9EB4FF",
opacity: 0.9, barBorderRadius:5,
barBorderRadius:2 borderWidth: 0,
label:{
formatter:"{c} %",
show:true,
position:"top",
textStyle:{
fontWeight:"border",
fontSize:12,
color:"#333"
}
}
},
},
emphasis: {
itemStyle: {
color:'#5F83FF'
}
} }
} }
] ]
...@@ -146,4 +250,21 @@ export class MyManagementComponent implements OnInit { ...@@ -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 { ...@@ -936,4 +936,10 @@ export class MyService {
const url = this.API + "/videoPlay/teamCompletionRate"; const url = this.API + "/videoPlay/teamCompletionRate";
return this.http.post(url,JSON.stringify(params)) 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 { ...@@ -32,7 +32,7 @@ export class ScoreDetailsComponent implements OnInit {
if (res['success']) { if (res['success']) {
this.salesScoreDetails = res['data']['detail']; this.salesScoreDetails = res['data']['detail'];
this.chartOption ={ this.chartOption ={
tooltip: { tooltip: {//提示框组件
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)' formatter: '{a} <br/>{b}: {c} ({d}%)'
}, },
......
src/styles.scss
...@@ -300,4 +300,14 @@ footer.fixed { ...@@ -300,4 +300,14 @@ footer.fixed {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
text-align: center; 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 @@ ...@@ -2,7 +2,7 @@
"extends": "../tsconfig.json", "extends": "../tsconfig.json",
"compilerOptions": { "compilerOptions": {
"outDir": "../out-tsc/app", "outDir": "../out-tsc/app",
"types": [] "types": ["node"]
}, },
"exclude": [ "exclude": [
"test.ts", "test.ts",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment