仪表盘页面
This commit is contained in:
@@ -0,0 +1,41 @@
|
|||||||
|
<div nz-row>
|
||||||
|
<nz-card nzTitle="统计" nz-col nzSpan="12" nzSize="small">
|
||||||
|
<nz-row [nzGutter]="24">
|
||||||
|
<nz-col [nzSpan]="6">
|
||||||
|
<nz-statistic [nzValue]="(counts.articleCount | number)!" nzTitle="文章数量"></nz-statistic>
|
||||||
|
</nz-col>
|
||||||
|
<nz-col [nzSpan]="6">
|
||||||
|
<nz-statistic [nzValue]="(counts.tagCount | number)!" nzTitle="标签量"></nz-statistic>
|
||||||
|
</nz-col>
|
||||||
|
<nz-col [nzSpan]="6">
|
||||||
|
<nz-statistic [nzValue]="(counts.categoryCount | number)!" nzTitle="分类数量"></nz-statistic>
|
||||||
|
</nz-col>
|
||||||
|
<nz-col [nzSpan]="6">
|
||||||
|
<nz-statistic [nzValue]="(counts.commentCount | number)!" nzTitle="评论量"></nz-statistic>
|
||||||
|
</nz-col>
|
||||||
|
</nz-row>
|
||||||
|
</nz-card>
|
||||||
|
<nz-card nzTitle="信息" nz-col nzSpan="11" nzOffset="1" nzSize="small">
|
||||||
|
<nz-row [nzGutter]="24">
|
||||||
|
<nz-col [nzSpan]="8">
|
||||||
|
<nz-statistic [nzValue]="(counts.visitorCount | number)!" nzTitle="总访问量"></nz-statistic>
|
||||||
|
</nz-col>
|
||||||
|
<nz-col [nzSpan]="8">
|
||||||
|
<nz-statistic [nzValue]="(dayVisitCount | number)!" nzTitle="日访问量"></nz-statistic>
|
||||||
|
</nz-col>
|
||||||
|
<nz-col [nzSpan]="8">
|
||||||
|
<nz-statistic [nzValue]="userInfo.recentlyLandedDate" nzTitle="上次登录"></nz-statistic>
|
||||||
|
</nz-col>
|
||||||
|
</nz-row>
|
||||||
|
</nz-card>
|
||||||
|
</div>
|
||||||
|
<div nz-row style="margin-top: 30px">
|
||||||
|
<nz-card style="width:100%;" nzSize="small" nzTitle="日志" [nzExtra]="reload">
|
||||||
|
<ng-template #reload>
|
||||||
|
<a (click)="getLog()" title="刷新"><i nz-icon nzType="reload" nzTheme="outline"></i></a>
|
||||||
|
</ng-template>
|
||||||
|
<nz-spin [nzSpinning]="logLoading" style="width: 100%;">
|
||||||
|
<pre style="width: 100%;max-height: 500px;overflow: auto;">{{logText}}</pre>
|
||||||
|
</nz-spin>
|
||||||
|
</nz-card>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import {Component, OnInit} from '@angular/core';
|
||||||
|
import {HttpClient} from '@angular/common/http';
|
||||||
|
import {ApiService} from '../../../api/api.service';
|
||||||
|
import {GlobalUserService} from '../../../services/global-user.service';
|
||||||
|
import {User} from '../../../class/User';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-admin-dashboard',
|
||||||
|
templateUrl: './admin-dashboard.component.html',
|
||||||
|
styleUrls: ['./admin-dashboard.component.less']
|
||||||
|
})
|
||||||
|
export class AdminDashboardComponent implements OnInit {
|
||||||
|
constructor(private apiService: ApiService, private userService: GlobalUserService, private http: HttpClient) {
|
||||||
|
this.getLog();
|
||||||
|
this.getCounts();
|
||||||
|
this.getDayVisitCount();
|
||||||
|
this.getUserInfo();
|
||||||
|
}
|
||||||
|
|
||||||
|
logLoading: true;
|
||||||
|
logText: string;
|
||||||
|
counts: {
|
||||||
|
articleCount: number,
|
||||||
|
visitorCount: number,
|
||||||
|
categoryCount: number,
|
||||||
|
leaveMsgCount: number,
|
||||||
|
tagCount: number,
|
||||||
|
commentCount: number
|
||||||
|
}
|
||||||
|
dayVisitCount: number
|
||||||
|
userInfo: User;
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
getLog() {
|
||||||
|
this.http.get('https://api.celess.cn/blog.log', {responseType: 'text'}).subscribe(data => {
|
||||||
|
this.logText = data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getCounts = () => this.apiService.counts().subscribe({
|
||||||
|
next: data => this.counts = data.result
|
||||||
|
})
|
||||||
|
|
||||||
|
getDayVisitCount = () => this.apiService.dayVisitCount().subscribe({
|
||||||
|
next: data => this.dayVisitCount = data.result
|
||||||
|
})
|
||||||
|
|
||||||
|
getUserInfo = () => this.userService.watchUserInfo({
|
||||||
|
next: data => this.userInfo = data.result,
|
||||||
|
error: null,
|
||||||
|
complete: null
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import {NgModule} from '@angular/core';
|
||||||
|
import {CommonModule} from '@angular/common';
|
||||||
|
import {AdminDashboardComponent} from './admin-dashboard.component';
|
||||||
|
import {RouterModule} from '@angular/router';
|
||||||
|
import {NzButtonModule, NzCardModule, NzGridModule, NzIconModule, NzSpinModule, NzStatisticModule} from 'ng-zorro-antd';
|
||||||
|
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [AdminDashboardComponent],
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
RouterModule.forChild([{path: '', component: AdminDashboardComponent}]),
|
||||||
|
NzGridModule,
|
||||||
|
NzCardModule,
|
||||||
|
NzButtonModule,
|
||||||
|
NzSpinModule,
|
||||||
|
NzIconModule,
|
||||||
|
NzStatisticModule
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class AdminDashboardModule {
|
||||||
|
}
|
||||||
@@ -47,7 +47,7 @@ const routes: Routes = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '**',
|
path: '**',
|
||||||
loadChildren: () => import('./admin-index/admin-index.module').then(mod => mod.AdminIndexModule),
|
loadChildren: () => import('./admin-dashboard/admin-dashboard.module').then(mod => mod.AdminDashboardModule),
|
||||||
canActivate: [AuthGuard]
|
canActivate: [AuthGuard]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
Reference in New Issue
Block a user