From 1fdd2c6fe276c5d9849c14739eaba37061264eb5 Mon Sep 17 00:00:00 2001
From: fengxiang <110431245@qq.com>
Date: Mon, 16 Jul 2018 11:36:33 +0800
Subject: [PATCH] 统计分析 划分独立模块
---
src/app/routes/home-page/home-page/home-page.component.ts | 77 +++++++++++----
src/app/routes/routes.module.ts | 12 +-
.gitignore | 1
src/app/routes/statistics/statistics.module.ts | 45 +++++++++
src/app/routes/routes-routing.module.ts | 9 -
src/app/routes/statistics/calendar/calendar.component.html | 3
_mock/_chart.ts | 54 +++++++---
_mock/_demo.ts | 4
src/app/routes/home-page/home-page/home-page.component.html | 82 ++++++++++++++++
9 files changed, 227 insertions(+), 60 deletions(-)
diff --git a/.gitignore b/.gitignore
index 4fbf46a..54ef483 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,7 +37,6 @@
.DS_Store
Thumbs.db
.angulardoc.json
-yarn.lock
/_nginx/*
.github/*
diff --git a/_mock/_chart.ts b/_mock/_chart.ts
index 974bcbc..f59a20e 100644
--- a/_mock/_chart.ts
+++ b/_mock/_chart.ts
@@ -45,86 +45,102 @@
for (let i = 0; i < 50; i += 1) {
searchData.push({
index: i + 1,
- keyword: `���������������-${i}`,
- count: Math.floor(Math.random() * 1000),
+ keyword: `������������-${i}`,
+ count: Math.floor(Math.random() * 100),
range: Math.floor(Math.random() * 100),
status: Math.floor((Math.random() * 10) % 2)
});
}
const salesTypeData = [
{
- x: "������������",
+ x: "PM2.5",
y: 4544
},
{
- x: "������������",
+ x: "PM10",
y: 3321
},
{
- x: "������������",
+ x: "������������",
y: 3113
},
{
- x: "������������",
+ x: "������������",
y: 2341
},
{
- x: "������������",
+ x: "������",
y: 1231
},
{
- x: "������",
+ x: "������������",
+ y: 1231
+ },
+ {
+ x: "���������0.3",
y: 1231
}
];
const salesTypeDataOnline = [
{
- x: "������������",
+ x: "PM2.5",
y: 244
},
{
- x: "������������",
+ x: "PM10",
y: 321
},
{
- x: "������������",
+ x: "������������",
y: 311
},
{
- x: "������������",
+ x: "������������",
y: 41
},
{
- x: "������������",
+ x: "������",
y: 121
},
{
- x: '������',
+ x: '������������',
y: 111
+ },
+ {
+ x: "���������0.3",
+ y: 1231
}
];
const salesTypeDataOffline = [
{
- x: '������������',
+ x: 'PM2.5',
y: 99
},
{
- x: '������������',
+ x: 'PM10',
y: 188
},
{
- x: '������������',
+ x: '������������',
y: 344
},
{
- x: '������������',
+ x: '������������',
y: 255
},
{
- x: '������',
+ x: '������',
y: 65
+ },
+ {
+ x: '������������',
+ y: 100
+ },
+ {
+ x: "���������0.3",
+ y: 500
}
];
diff --git a/_mock/_demo.ts b/_mock/_demo.ts
index a188994..734764f 100644
--- a/_mock/_demo.ts
+++ b/_mock/_demo.ts
@@ -1,11 +1,11 @@
import { MockRequest } from "@delon/mock";
function getRandomNumber(base: number, range: number) {
- return base + Math.ceil(Math.random()*range*10) % range;
+ return Number(base) + Math.ceil(Math.random()*Number(range)*10) % Number(range);
}
function getForecast24List(req: MockRequest) {
const base = req.queryString.base;
- const range = req.queryString.range;
+ const range = req.queryString.range;
const array = new Array(24);
for(let n = 0 ; n < array.length ; n++) {
array[n] = getRandomNumber(base,range);
diff --git a/src/app/routes/home-page/home-page/home-page.component.html b/src/app/routes/home-page/home-page/home-page.component.html
index 7c145d7..ca221fc 100644
--- a/src/app/routes/home-page/home-page/home-page.component.html
+++ b/src/app/routes/home-page/home-page/home-page.component.html
@@ -156,4 +156,84 @@
</nz-card>
</div>
</div>
-
+ <div nz-row [nzGutter]="24">
+ <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="12">
+ <nz-card [nzLoading]="loading" [nzBordered]="false" nzTitle="������������������">
+ <ng-template #extra>
+ <nz-dropdown>
+ <nz-dropdown>
+ <a class="ant-dropdown-link" nz-dropdown>
+ PM2.5 <i class="anticon anticon-down"></i>
+ </a>
+ <ul nz-menu>
+ <li nz-menu-item>
+ PM10
+ </li>
+ <li nz-menu-item>
+ ������������
+ </li>
+ <li nz-menu-item>
+ ������������
+ </li>
+ <li nz-menu-item>
+ ������������
+ </li>
+ <li nz-menu-item>
+ ������
+ </li>
+ </ul>
+ </nz-dropdown>
+ </nz-dropdown>
+ </ng-template>
+ <ng-template #body>
+ <nz-table #keyTable [nzDataSource]="data.searchData" [nzPageSize]="5" nzSize="small">
+ <thead nz-thead>
+ <tr>
+ <th nz-th><span>������</span></th>
+ <th nz-th><span>������������������</span></th>
+ <th nz-th class="text-right">
+ <span>������������������</span>
+ <nz-table-sort (nzValueChange)="sort('count',$event)"></nz-table-sort>
+ </th>
+ </tr>
+ </thead>
+ <tbody nz-tbody>
+ <tr nz-tbody-tr *ngFor="let i of keyTable.data">
+ <td nz-td>{{i.index}}</td>
+ <td nz-td><a (click)="msg.success(i.keyword)">{{i.keyword}}</a></td>
+ <td nz-td class="text-right">{{i.count}}</td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </ng-template>
+ </nz-card>
+ </div>
+ <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="12">
+ <nz-card [nzLoading]="loading" [nzBordered]="false" nzTitle="������������������" [nzBodyStyle]="{'padding.px': 24}" class="sales-card" style="min-height: 482px;">
+ <ng-template #extra>
+ <div class="sales-card-extra">
+ <div class="sales-type-radio">
+ <nz-radio-group [(ngModel)]="salesType" (ngModelChange)="changeSaleType()" [nzSize]="'large'">
+ <label nz-radio-button [nzValue]="'all'"><span>������</span></label>
+ <label nz-radio-button [nzValue]="'online'"><span>������</span></label>
+ <label nz-radio-button [nzValue]="'offline'"><span>������</span></label>
+ <label nz-radio-button [nzValue]="'online'"><span>������</span></label>
+ </nz-radio-group>
+ </div>
+ </div>
+ </ng-template>
+ <ng-template #body>
+ <h4 class="margin:8px 0 32px 0;">������������</h4>
+ <pie
+ [hasLegend]="true"
+ subTitle="������������"
+ [height]="248"
+ [lineWidth]="4"
+ [total]="salesTotal"
+ [data]="salesPieData"
+ [valueFormat]="handlePieValueFormat">
+ </pie>
+ </ng-template>
+ </nz-card>
+ </div>
+ </div>
diff --git a/src/app/routes/home-page/home-page/home-page.component.ts b/src/app/routes/home-page/home-page/home-page.component.ts
index 5333df9..49e739f 100644
--- a/src/app/routes/home-page/home-page/home-page.component.ts
+++ b/src/app/routes/home-page/home-page/home-page.component.ts
@@ -29,32 +29,37 @@
this.cardData.temperature = conRes.data.condition.temp;
this.cardData.api = aqiRes.data.aqi.value;
this.cardData.pm25 = aqiRes.data.aqi.pm25;
+ this.http.get('/aqi/forecast24hours',{base: this.cardData.pm25,range: 10}).subscribe(
+ (res: any) => {
+ this.aqiEchartsIntance.setOption(
+ {
+ series: [{type: 'line', data: res}]
+ }
+ )
+ }
+ );
+ this.http.get('/aqi/forecast24hours',{base: this.cardData.temperature,range: 5}).subscribe(
+ (res: any) => {
+ this.meteEchartsIntance.setOption(
+ {
+ series: [{type: 'line', data: res}]
+ }
+ )
+ }
+ );
}
}
);
this.http.get('/chart').subscribe((res: any) => {
- // this.webSite = res.visitData.slice(0, 10);
- this.salesData = res.salesData;
- // this.offlineChartData = res.offlineChartData;
- });
- this.http.get('/aqi/forecast24hours',{base: 25,range: 10}).subscribe(
- (res: any) => {
- this.aqiEchartsIntance.setOption(
- {
- series: [{type: 'line', data: res}]
- }
- )
- }
- );
- this.http.get('/aqi/forecast24hours',{base: 30,range: 8}).subscribe(
- (res: any) => {
- this.meteEchartsIntance.setOption(
- {
- series: [{type: 'line', data: res}]
- }
- )
- }
- );
+ res.offlineData.forEach((item: any) => {
+ item.chart = Object.assign([], res.offlineChartData);
+ });
+ this.data = res;
+ this.salesData = res.salesData;
+ this.loading = false;
+ this.changeSaleType();
+ });
+
}
public aqiChartOption = {};
@@ -147,4 +152,32 @@
Object.assign( defaultOption, opt);
Object.assign(chartOption, defaultOption);
}
+ //---------mock-------------------
+ data: any = {
+ salesData: [],
+ offlineData: []
+ };
+ sort(sortName, sortValue) {
+ this.data.searchData = [
+ ...(<any[]>this.data.searchData).sort((a, b) => {
+ if (a[ sortName ] > b[ sortName ]) {
+ return (sortValue === 'ascend') ? 1 : -1;
+ } else if (a[ sortName ] < b[ sortName ]) {
+ return (sortValue === 'ascend') ? -1 : 1;
+ } else {
+ return 0;
+ }
+ })
+ ];
+ }
+ loading = true;
+ salesType = 'all';
+ salesPieData: any;
+ salesTotal = 0;
+ changeSaleType() {
+ this.salesPieData = this.salesType === 'all' ? this.data.salesTypeData : (
+ this.salesType === 'online' ? this.data.salesTypeDataOnline : this.data.salesTypeDataOffline
+ );
+ if (this.salesPieData) this.salesTotal = this.salesPieData.reduce((pre, now) => now.y + pre, 0);
+ }
}
diff --git a/src/app/routes/routes-routing.module.ts b/src/app/routes/routes-routing.module.ts
index 549b3bc..c2ea91b 100644
--- a/src/app/routes/routes-routing.module.ts
+++ b/src/app/routes/routes-routing.module.ts
@@ -15,9 +15,6 @@
import { ForecastingWarningComponent } from './forecasting-warning/forecasting-warning.component';
import { PollutionManagementComponent } from 'app/routes/pollution/management/management.component';
-import { MonitorpointComponent } from 'app/routes/statistics/monitorpoint/monitorpoint.component';
-import { CalendarComponent } from 'app/routes/statistics/calendar/calendar.component';
-import { AnalysisComponent } from 'app/routes/statistics/analysis/analysis.component';
import { EnvironmentManagementComponent } from 'app/routes/environment/management/management.component';
const routes: Routes = [
@@ -30,6 +27,7 @@
path: "home-page",
loadChildren: "./home-page/home-page.module#HomePageModule"
},
+ { path: 'statistics', loadChildren: './statistics/statistics.module#StatisticsModule' },
{ path: 'dashboard', redirectTo: 'dashboard/v1', pathMatch: 'full' },
{ path: 'dashboard/v1', component: DashboardV1Component, data: { translate: 'dashboard_v1' } },
{ path: 'dashboard/analysis', component: DashboardAnalysisComponent, data: { translate: 'dashboard_analysis' } },
@@ -43,11 +41,6 @@
{ path: 'forecasting-warning', component: ForecastingWarningComponent },
{ path: 'pollution/management', component: PollutionManagementComponent },
-
- { path: 'statistics/monitorpoint', component: MonitorpointComponent },
- { path: 'statistics/calendar', component: CalendarComponent },
- { path: 'statistics/analysis', component: AnalysisComponent },
-
{ path: 'environment/management', component: EnvironmentManagementComponent }
]
}, // passport
diff --git a/src/app/routes/routes.module.ts b/src/app/routes/routes.module.ts
index d405319..1f08295 100644
--- a/src/app/routes/routes.module.ts
+++ b/src/app/routes/routes.module.ts
@@ -15,9 +15,9 @@
import { ForecastingWarningComponent } from './forecasting-warning/forecasting-warning.component';
import { ReportComponent } from './report/report.component';
import { PollutionManagementComponent } from './pollution/management/management.component';
-import { MonitorpointComponent } from './statistics/monitorpoint/monitorpoint.component';
-import { CalendarComponent } from './statistics/calendar/calendar.component';
-import { AnalysisComponent } from './statistics/analysis/analysis.component';
+// import { MonitorpointComponent } from './statistics/monitorpoint/monitorpoint.component';
+// import { CalendarComponent } from './statistics/calendar/calendar.component';
+// import { AnalysisComponent } from './statistics/analysis/analysis.component';
import { EnvironmentManagementComponent } from './environment/management/management.component';
// Statics
@@ -45,9 +45,9 @@
ReportComponent,
ForecastingWarningComponent,
PollutionManagementComponent,
- MonitorpointComponent,
- CalendarComponent,
- AnalysisComponent,
+ // MonitorpointComponent,
+ // CalendarComponent,
+ // AnalysisComponent,
EnvironmentManagementComponent
],
providers: [
diff --git a/src/app/routes/statistics/calendar/calendar.component.html b/src/app/routes/statistics/calendar/calendar.component.html
index 121743b..2e202a3 100644
--- a/src/app/routes/statistics/calendar/calendar.component.html
+++ b/src/app/routes/statistics/calendar/calendar.component.html
@@ -2,7 +2,8 @@
<div nz-row [nzGutter]="24" style="padding: 20px">
<div nz-col nzXs="24" nzSm="12" nzMd="24" nzLg="9">
<div nz-form-control nz-col [nzSm]="20">
- <nz-datepicker></nz-datepicker>
+ <nz-calendar [nzLocale]="'zh-cn'" [nzFullScreen]="false" style="width: 290px; border: 1px solid rgb(217, 217, 217); border-radius: 4px;">
+ </nz-calendar>
</div>
</div>
<div nz-col nzXs="24" nzSm="12" nzMd="24" nzLg="15">
diff --git a/src/app/routes/statistics/statistics.module.ts b/src/app/routes/statistics/statistics.module.ts
new file mode 100644
index 0000000..1b617b1
--- /dev/null
+++ b/src/app/routes/statistics/statistics.module.ts
@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '@shared/shared.module';
+import { PipeModule } from '@business/pipe/pipe.module';
+import { NzTreeModule } from 'ng-tree-antd';
+import { NgxEchartsModule } from 'ngx-echarts';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { AnalysisComponent } from './analysis/analysis.component';
+import { CalendarComponent } from './calendar/calendar.component';
+import { MonitorpointComponent } from './monitorpoint/monitorpoint.component';
+import { NzCalendarModule } from 'ng-zorro-antd';
+
+const routes: Routes = [
+ {
+ path: '',
+ children: [
+ { path: 'analysis', component: AnalysisComponent},
+ { path: 'calendar', component: CalendarComponent },
+ { path: 'monitorpoint', component: MonitorpointComponent }
+ ]
+ }
+];
+
+const COMPONENT_NOROUNT = [];
+
+@NgModule({
+ imports: [
+ // ������������������������������������
+ PipeModule,
+ NzTreeModule,
+ NgxEchartsModule,
+ CommonModule,
+ SharedModule,
+ NzCalendarModule,
+ RouterModule.forChild(routes)
+ ],
+ declarations: [
+ ...COMPONENT_NOROUNT,
+ AnalysisComponent,
+ CalendarComponent,
+ MonitorpointComponent
+ ],
+ entryComponents: COMPONENT_NOROUNT
+})
+export class StatisticsModule { }
--
Gitblit v1.8.0