<div class="content__title">
|
<h1>实时数据概览</h1>
|
</div>
|
<div nz-row [nzGutter]="24" class="pt-lg">
|
<div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
|
<div nz-row nzType="flex" nzAlign="middle" class="bg-primary rounded-md">
|
<div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
|
<div style="height: 40px;" class="h2 mt0">{{ cardData.api }}</div>
|
<p class="text-nowrap mb0">AQI</p>
|
</div>
|
</div>
|
</div>
|
<div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
|
<div nz-row nzType="flex" nzAlign="middle" class="bg-success rounded-md">
|
<div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
|
<div style="height: 40px;" class="h2 mt0">{{ cardData.temperature }} ℃</div>
|
<p class="text-nowrap mb0">温度</p>
|
</div>
|
</div>
|
</div>
|
<div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
|
<div nz-row nzType="flex" nzAlign="middle" class="bg-orange rounded-md">
|
<div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
|
<div style="height: 40px;" class="h2 mt0">{{ cardData.windDirection }}</div>
|
<p class="text-nowrap mb0">风向</p>
|
</div>
|
</div>
|
</div>
|
<div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
|
<div nz-row nzType="flex" nzAlign="middle" class="bg-pink rounded-md">
|
<div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
|
<div style="height: 40px;" class="h2 mt0">{{ cardData.pm25 }} mg/m³</div>
|
<p class="text-nowrap">PM2.5</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div nz-row [nzGutter]="24" class="pt-lg">
|
<div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8">
|
<chart-card [title]="'API优良天数'" total="216天" contentHeight="46px">
|
<mini-progress height="46" percent="60" target="60" strokeWidth="8" color="#13C2C2"></mini-progress>
|
</chart-card>
|
</div>
|
<div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8">
|
<chart-card [title]="'PM2.5优良天数'" total="158天" contentHeight="46px">
|
<mini-progress height="46" percent="50" target="50" strokeWidth="8" color="#108ee9"></mini-progress>
|
</chart-card>
|
</div>
|
<div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8">
|
<chart-card [title]="'PM10优良天数'" total="112天" contentHeight="46px">
|
<mini-progress height="46" percent="40" target="40" strokeWidth="8" color="#00a854"></mini-progress>
|
</chart-card>
|
</div>
|
</div>
|
<div nz-row [nzGutter]="24" class="pt-lg">
|
<div nz-col nzXs="24" nzMd="24">
|
<nz-card [nzBordered]="false">
|
<ng-template #title>
|
AQI因子柱形图
|
<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>
|
<bar height="275" [data]="salesData"></bar>
|
</nz-card>
|
</div>
|
</div>
|
<div nz-row [nzGutter]="24" class="pt-lg">
|
<div nz-col nzXs="24" nzMd="24">
|
<nz-card [nzBordered]="false">
|
<ng-template #title>
|
监控站点GIS分布
|
<small class="text-sm font-weight-normal">总共: 128</small>
|
</ng-template>
|
<iframe style="width: 100%; height: 500px;" target="_top" src="http://monitor-api2.7drlb.com/screen/map-page?areaCode=320583&accountId=1" frameborder="0"></iframe>
|
</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>
|
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]="'online2'"><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>
|
