统计分析 划分独立模块

fengxiang

2018-07-16 1fdd2c6fe276c5d9849c14739eaba37061264eb5

统计分析 划分独立模块

 .gitignore

@@ -37,7 +37,6 @@
.DS_Store
Thumbs.db
.angulardoc.json
yarn.lock
/_nginx/*
.github/*


 _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
    }
];


 _mock/_demo.ts

@@ -1,7 +1,7 @@
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;

 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>

 src/app/routes/home-page/home-page/home-page.component.ts

@@ -29,15 +29,7 @@
            this.cardData.temperature = conRes.data.condition.temp;
            this.cardData.api = aqiRes.data.aqi.value;
            this.cardData.pm25 = aqiRes.data.aqi.pm25;
          }
        }
     );
     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(
            this.http.get('/aqi/forecast24hours',{base: this.cardData.pm25,range: 10}).subscribe(
         (res: any) => {
             this.aqiEchartsIntance.setOption(
                 {
@@ -46,7 +38,7 @@
             )
         }
     );
     this.http.get('/aqi/forecast24hours',{base: 30,range: 8}).subscribe(
            this.http.get('/aqi/forecast24hours',{base: this.cardData.temperature,range: 5}).subscribe(
        (res: any) => {
            this.meteEchartsIntance.setOption(
                {
@@ -55,6 +47,19 @@
            )
        }
    );
          }
        }
     );
     this.http.get('/chart').subscribe((res: any) => {
        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);
    }
}

 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

 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: [

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

 src/app/routes/statistics/statistics.module.ts

New file
@@ -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 { }