[完善] echarts图表统计完成,与用户管理,统计详情关联完成

angular.json

@@ -32,7 +32,8 @@
               "src/styles.scss"
             ],
             "scripts": [
-              "node_modules/echarts/dist/echarts.js"
+              "node_modules/echarts/dist/echarts.js",
+              "src/assets/echarts/echarts.common.min.js"
             ]
           },
           "configurations": {

src/app/is-login.service.ts

@@ -35,6 +35,7 @@ export class IsLoginService {
         link.click();
         this.isDownloading = false //关闭下载进度条
         this.downloadProgress = 0 //初始化进度条
+        this.handleData(e.objectName,'下载') //存储用户操作记录
       })
     } else if (file && fileSize>shardSize) { //>10MB时分块下载
       this.blockingDownload(e) //分段下载

src/app/pages/lockscreen/lockscreen.component.html

@@ -12,7 +12,7 @@
 
         <div class="input">
           <mat-icon class="icon">account_box</mat-icon>
-            <input id="name" name="name" required ngModel placeholder="请输入身份证号码" maxlength="20">
+            <input id="name" name="name" required ngModel placeholder="请输入用户名" maxlength="20">
         </div>
   
         <div class="input">

src/app/pages/login/login.component.html

@@ -7,12 +7,12 @@
 
           <div class="input">
             <mat-icon class="icon">account_box</mat-icon>
-              <input id="name" name="name" required ngModel placeholder="请输入帐号" maxlength="18">
+              <input id="name" name="name" required ngModel placeholder="请输入用户名" maxlength="18">
           </div>
     
           <div class="input">
             <mat-icon class="icon2">lock</mat-icon>
-              <input id="password" name="password" type='password' required ngModel placeholder="请输入密码" maxlength="18">
+              <input id="password" name="password" type='password' required ngModel placeholder="请输入登录密码" maxlength="18">
           </div>
 
           <div class="forget">

src/app/ui/eharts-statistics/eharts-statistics.component.html

@@ -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>

src/app/ui/eharts-statistics/eharts-statistics.component.scss

@@ -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;
+}

src/app/ui/eharts-statistics/eharts-statistics.component.spec.ts

@@ -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();
+  });
+});

src/app/ui/eharts-statistics/eharts-statistics.component.ts

@@ -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}`])
+    });
+
+  }
+
+
+
+}

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

@@ -3,10 +3,13 @@ import { NgModule } from '@angular/core';
 import { AllFileComponent } from './all-file/all-file.component';
 import { EnterpriseuserComponent } from './enterpriseuser/enterpriseuser.component';
 import { TeacherManagementComponent } from './teacherManagement/enterpriseuser.component';
+import {EhartsStatisticsComponent} from './eharts-statistics/eharts-statistics.component'
+
 const routes: Routes = [
     { path: '', component:AllFileComponent },
     { path: 'userManagement', component:EnterpriseuserComponent },
-    { path: 'teacherManagement', component:TeacherManagementComponent }
+    { path: 'teacherManagement', component:TeacherManagementComponent },
+    { path: 'statistics', component:EhartsStatisticsComponent },
 ];
 
 @NgModule({

src/app/ui/ui.module.ts

@@ -60,8 +60,9 @@ import {EnterpriseuserComponent,editenterpriseuser,seeenterpriseuser} from './en
 import { myPaginator } from "./my-paginator"
 import { TeacherManagementComponent, editTeacher, seeTeacher } from './teacherManagement/enterpriseuser.component';
 import { AddTeacher } from './teacherManagement/addenterpriseuser.component';
+import { EhartsStatisticsComponent } from './eharts-statistics/eharts-statistics.component';
 @NgModule({
-  declarations: [FolderDialog,ViewDetails,PersonaldataComponent, ChangepasswordComponent,SizePipe,NamePipe,NamePipe2,ConfirmpswDirective, AllFileComponent, ChangeuserdataComponent, LoginComponent, UploadFilesComponent,AddEnterpriserUser,EnterpriseuserComponent,editenterpriseuser,seeenterpriseuser,TeacherManagementComponent,editTeacher,AddTeacher,seeTeacher],
+  declarations: [FolderDialog,ViewDetails,PersonaldataComponent, ChangepasswordComponent,SizePipe,NamePipe,NamePipe2,ConfirmpswDirective, AllFileComponent, ChangeuserdataComponent, LoginComponent, UploadFilesComponent,AddEnterpriserUser,EnterpriseuserComponent,editenterpriseuser,seeenterpriseuser,TeacherManagementComponent,editTeacher,AddTeacher,seeTeacher, EhartsStatisticsComponent],
 
   imports: [
     CommonModule,