统计分析 划分独立模块

fengxiang

2018-07-16 1fdd2c6fe276c5d9849c14739eaba37061264eb5

 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>