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="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: {
color: '#9EB4FF',
shadowColor: '#91cc75',
borderType: 'dashed',
opacity: 0.9,
barBorderRadius:2
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:'#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
......@@ -300,4 +300,14 @@ footer.fixed {
font-size: 18px;
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",
......
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