| | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div nz-row [nzGutter]="24" class="pt-lg"> |
|---|
| | | <div nz-col nzXs="24" nzMd="12"> |
|---|
| | | <nz-card [nzBordered]="false"> |
|---|
| | | <div echarts style="margin-top: 12px;" [options]="chartOption" [loading]="aqiChartLoading" class="line-chart" (chartInit)="onApiChartInit($event)"></div> |
|---|
| | | </nz-card> |
|---|
| | | </div> |
|---|
| | | <div nz-col nzXs="24" nzMd="12"> |
|---|
| | | <nz-card [nzBordered]="false"> |
|---|
| | | 22222222222 |
|---|
| | | </nz-card> |
|---|
| | | </div> |
|---|
| | | <div nz-col style="display: block;" nzXs="24" nzMd="24"> |
|---|
| | | <nz-card [nzBordered]="false"> |
|---|
| | | <ng-template #title> |
|---|
| | | 空气质量预报 |
|---|
| | | <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> |
|---|
| | | </ng-template> |
|---|
| | | <div echarts style="margin-top: 12px;" class="line-chart" [options]="aqiChartOption" [loading]="aqiChartLoading" (chartInit)="onApiChartInit($event)"></div> |
|---|
| | | </nz-card> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div nz-row [nzGutter]="24" class="pt-lg"> |
|---|
| | | <div nz-col style="display: block;" nzXs="24" nzMd="24"> |
|---|
| | | <nz-card [nzBordered]="false"> |
|---|
| | | <ng-template #title> |
|---|
| | | 气象预报 |
|---|
| | | <nz-dropdown> |
|---|
| | | <a class="ant-dropdown-link" nz-dropdown> |
|---|
| | | 温度<i class="anticon anticon-down"></i> |
|---|
| | | </a> |
|---|
| | | <ul nz-menu> |
|---|
| | | <li nz-menu-item> |
|---|
| | | 气压 |
|---|
| | | </li> |
|---|
| | | <li nz-menu-item> |
|---|
| | | 湿度 |
|---|
| | | </li> |
|---|
| | | <li nz-menu-item> |
|---|
| | | 风向 |
|---|
| | | </li> |
|---|
| | | <li nz-menu-item> |
|---|
| | | 风速 |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </nz-dropdown> |
|---|
| | | </ng-template> |
|---|
| | | <div echarts style="margin-top: 12px;" class="line-chart" [options]="meteChartOption" [loading]="meteChartLoading" (chartInit)="onMeteChartInit($event)"></div> |
|---|
| | | </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> |
|---|
