<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]="'运营活动效果'"
|
total="78%"
|
contentHeight="46px"
|
[action]="action4"
|
[footer]="footer4">
|
<ng-template #action4>
|
<nz-tooltip [nzTitle]="'指标说明'">
|
<nz-icon nz-tooltip nzType="info-circle-o"></nz-icon>
|
</nz-tooltip>
|
</ng-template>
|
<mini-progress
|
height="46"
|
percent="78"
|
strokeWidth="8"
|
target="80"
|
color="#13C2C2"></mini-progress>
|
<ng-template #footer4>
|
<div class="d-flex justify-content-between">
|
<trend flag="up">周同比<span class="pl-sm">12%</span></trend>
|
<trend flag="down">日环比<span class="pl-sm">11%</span></trend>
|
</div>
|
</ng-template>
|
</chart-card>
|
</div>
|
</div>
|
