11 changed files with 346 additions and 6 deletions
@ -0,0 +1,38 @@
|
||||
<div class="content"> |
||||
|
||||
<div class="header"> |
||||
<form #form="ngForm"> |
||||
<div class="queryBox"> |
||||
|
||||
<div class="queryField" style="margin-right: 90px;"> |
||||
<button type="button" mat-raised-button color="primary" style="margin-right: 10px;"><mat-icon style="vertical-align: middle; font-size: 20px;">reply</mat-icon>返回</button> |
||||
<button type="button" mat-raised-button color="primary">查看全部详情</button> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">开始时间:</label> |
||||
<input matInput [matDatepicker]="start" placeholder="请选择开始时间" readonly (dateChange)="startEvent($event)" [formControl]='startTime'> |
||||
<mat-datepicker-toggle matSuffix [for]="start"></mat-datepicker-toggle> |
||||
<mat-datepicker #start></mat-datepicker> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">结束时间:</label> |
||||
<input matInput [matDatepicker]="end" placeholder="请选择结束时间" readonly (dateChange)="endEvent($event)" [formControl]='endTime'> |
||||
<mat-datepicker-toggle matSuffix [for]="end"></mat-datepicker-toggle> |
||||
<mat-datepicker #end></mat-datepicker> |
||||
</div> |
||||
|
||||
<div class="btnbox" style="margin-left: 90px;"> |
||||
<button mat-raised-button color="primary" (click)='query()'>查询</button> |
||||
<button mat-raised-button style="margin-left: 10px;" type="button" (click)='getList()'>重置</button> |
||||
</div> |
||||
</div> |
||||
|
||||
</form> |
||||
</div> |
||||
|
||||
<div class="center" id="center"></div> |
||||
<div style="position: fixed; top: 30%; left: 50%;" *ngIf="!echartsData.length">暂无学习记录</div> |
||||
|
||||
</div> |
||||
@ -0,0 +1,40 @@
|
||||
.content{ |
||||
width: 100%; |
||||
height: 93%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.header { |
||||
padding: 10px; |
||||
box-sizing: border-box; |
||||
border-bottom: 1px solid #999; |
||||
.queryBox { |
||||
box-sizing: border-box; |
||||
padding: 5px 15px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
align-items:center; |
||||
justify-content:center; |
||||
.queryField { |
||||
margin: 0 15px; |
||||
font-size: 14px; |
||||
input { |
||||
width: 180px; |
||||
height: 22px; |
||||
line-height: 22px; |
||||
} |
||||
} |
||||
.btnbox{ |
||||
float: right; |
||||
} |
||||
|
||||
} //queryBox |
||||
} |
||||
|
||||
.center { |
||||
flex: 1; |
||||
box-sizing: border-box; |
||||
padding: 10px; |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { EhartsStatisticsComponent } from './eharts-statistics.component'; |
||||
|
||||
describe('EhartsStatisticsComponent', () => { |
||||
let component: EhartsStatisticsComponent; |
||||
let fixture: ComponentFixture<EhartsStatisticsComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ EhartsStatisticsComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(EhartsStatisticsComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,209 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core'; |
||||
import {MatDatepickerInputEvent} from '@angular/material/datepicker'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { FormControl } from '@angular/forms'; |
||||
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; |
||||
import { ActivatedRoute, Router } from '@angular/router'; |
||||
declare var echarts : any; |
||||
|
||||
@Component({ |
||||
selector: 'app-eharts-statistics', |
||||
templateUrl: './eharts-statistics.component.html', |
||||
styleUrls: ['./eharts-statistics.component.scss'], |
||||
}) |
||||
export class EhartsStatisticsComponent implements OnInit { |
||||
|
||||
constructor(private adapter: DateAdapter<any>,private http:HttpClient,public snackBar: MatSnackBar,private route:ActivatedRoute,private router:Router) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.idCard = this.route.snapshot.queryParams.id || '370304199609261910' |
||||
this.idName = this.route.snapshot.queryParams.name || '' |
||||
this.adapter.setLocale('CH') |
||||
this.getList() |
||||
} |
||||
|
||||
ngAfterViewInit(): void { |
||||
|
||||
} |
||||
|
||||
startTime:any; //查询开始时间
|
||||
endTime:any; //查询结束时间
|
||||
oneMonthDate:number = 30*24*60*60*1000; //一个月的时间戳
|
||||
|
||||
echartsData:any = []; //图表数据
|
||||
|
||||
idCard:string; //用户身份证
|
||||
idName:string; //用户姓名
|
||||
|
||||
//初始化 + 重置
|
||||
getList () { |
||||
this.startTime = new FormControl( new Date((new Date(new Date().getTime()-this.oneMonthDate)).toLocaleDateString()) ) |
||||
this.endTime = new FormControl( new Date() ) |
||||
let msg = { |
||||
Name: this.idCard, |
||||
// StartTime: new Date(new Date().getTime()-this.oneMonthDate).toLocaleDateString(),
|
||||
// EndTime: new Date().toLocaleDateString(),
|
||||
} |
||||
this.http.get('/api/StudyRecords/Statistics',{params:msg}).subscribe((data:any)=>{ |
||||
this.echartsData = data |
||||
if (data.length) { |
||||
this.handleData(data) |
||||
} else { //数据为空时销毁图表
|
||||
let chartHynyxf = echarts.init(document.getElementById('center'), 'skinUpp'); |
||||
chartHynyxf.dispose(); |
||||
} |
||||
}) |
||||
} |
||||
|
||||
//查询
|
||||
query () { |
||||
let msg = { |
||||
Name: this.idCard, |
||||
StartTime: this.getTime(this.startTime.value), //开始时间
|
||||
EndTime: this.getTime(this.endTime.value), //结束时间
|
||||
} |
||||
this.http.get('/api/StudyRecords/Statistics',{params:msg}).subscribe((data:any)=>{ |
||||
this.echartsData = data |
||||
if (data.length) { |
||||
this.handleData(data) |
||||
} else { //数据为空时销毁图表
|
||||
let chartHynyxf = echarts.init(document.getElementById('center'), 'skinUpp'); |
||||
chartHynyxf.dispose(); |
||||
} |
||||
}) |
||||
} |
||||
|
||||
//处理时间 传入 new Date()格式
|
||||
getTime(date){ |
||||
let year = date.getFullYear(); //年
|
||||
let month = date.getMonth() + 1; //月
|
||||
let day = date.getDate(); //日
|
||||
let hour = date.getHours() //时
|
||||
let min = date.getMinutes(); //分
|
||||
let seconds = date.getSeconds(); //秒
|
||||
return year+'-'+month+'-'+ day + " "+ hour +':'+ min +':'+ seconds; |
||||
} |
||||
|
||||
//选择开始时间
|
||||
startEvent (e: MatDatepickerInputEvent<Date>) { |
||||
let nowTime = new Date() |
||||
if (nowTime < e.value) { |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('选择时间不能大于现在时间段','确定',config); |
||||
this.startTime = new FormControl( new Date() ) |
||||
} else { |
||||
this.startTime = new FormControl(e.value) |
||||
} |
||||
} |
||||
|
||||
//选择结束时间
|
||||
endEvent (e: MatDatepickerInputEvent<Date>) { |
||||
let oneDay:number = 86399000; //一天的毫秒数
|
||||
let selectDay = (e.value).toLocaleDateString() //选择的年月日
|
||||
let newDay = (new Date()).toLocaleDateString() //现在的年月日
|
||||
let nowTime = new Date() //现在的时间
|
||||
|
||||
if (nowTime < e.value && selectDay!=newDay) { //选择时间段大于现在时间段时
|
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('选择时间不能大于现在时间段','确定',config); |
||||
this.endTime = new FormControl( new Date() ) |
||||
} else if (nowTime > e.value && selectDay!=newDay) { //正常情况下 时间+1天
|
||||
this.endTime = new FormControl( new Date(e.value.getTime()+oneDay) ) |
||||
} else if ( selectDay == newDay ) { //选择时间段是今天时
|
||||
this.endTime = new FormControl( new Date() ) |
||||
} |
||||
} |
||||
|
||||
//处理图表数据
|
||||
handleData (data) { |
||||
let postNames = [] //y轴坐标
|
||||
let catalogs = [] //学习目标
|
||||
let counts = [] //统计次数
|
||||
let newData = data.sort( function (a,b) { |
||||
return a.count - b.count |
||||
} ) |
||||
newData.forEach(element => { |
||||
postNames.push(element.postName) |
||||
catalogs.push(element.catalog) |
||||
counts.push(element.count) |
||||
}); |
||||
this.echartsInit(postNames,catalogs,counts) |
||||
} |
||||
|
||||
//图表初始化
|
||||
echartsInit (postNames,catalogs,counts) { |
||||
let that = this |
||||
let chartHynyxf = echarts.init(document.getElementById('center'), 'skinUpp'); |
||||
let option = { |
||||
title: { text: that.idName }, |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: {type: 'shadow'} |
||||
}, |
||||
grid: { |
||||
left: '3%', |
||||
right: '4%', |
||||
bottom: '3%', |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
show: false, |
||||
type: 'value', |
||||
boundaryGap: [0, 0.01] |
||||
}, |
||||
yAxis: { |
||||
"axisLine":{ //y轴
|
||||
"show":false |
||||
}, |
||||
"axisTick":{ //y轴刻度线
|
||||
"show":false |
||||
}, |
||||
"splitLine": { //网格线
|
||||
"show": false |
||||
}, |
||||
type: 'category', |
||||
data: postNames |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: 'bar', |
||||
data: counts, |
||||
itemStyle:{ |
||||
normal:{ |
||||
color:'#40B4E8', |
||||
barBorderRadius:[10, 10, 10, 10], |
||||
label: { |
||||
formatter: function (e) { |
||||
return `${catalogs[e.dataIndex]}`+` (统计次数: ${e.value})` |
||||
}, |
||||
show: true, |
||||
position: 'insideLeft', |
||||
textStyle: { color: '#555'}, |
||||
fontSize: 14, |
||||
fontWeight: 550 |
||||
}, |
||||
}, |
||||
} //itemStyle
|
||||
}, |
||||
|
||||
] //series
|
||||
|
||||
}; |
||||
|
||||
chartHynyxf.setOption(option); |
||||
|
||||
//柱状图点击事件
|
||||
chartHynyxf.on('click', function(e) { |
||||
that.router.navigate([`/home/learningrecorddetails?Catalog=${catalogs[e.dataIndex]}&id=${that.idCard}`]) |
||||
}); |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue