token刷新

fengxiang

2018-07-30 af9fa5a094ca652293a890f06634b59c955e1067

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

New file
@@ -0,0 +1,221 @@
<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">
        <nz-spin [nzSpinning]="firstRowLoading">
            <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.aqi }}</div>
                    <p class="text-nowrap mb0">AQI</p>
                </div>

            </div>
        </nz-spin>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
        <nz-spin [nzSpinning]="firstRowLoading">
            <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>
        </nz-spin>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
        <nz-spin [nzSpinning]="firstRowLoading">
            <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>
        </nz-spin>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
        <nz-spin [nzSpinning]="firstRowLoading">
            <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>
        </nz-spin>
    </div>
</div>
<div nz-row [nzGutter]="24" class="pt-lg">
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8">
        <chart-card [title]="'AQI优良天数'" total="112天" 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="148天" 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="156天" 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因子柱形图(过去24小时) &nbsp;
                <nz-dropdown>
                    <a class="ant-dropdown-link" nz-dropdown>
                        {{ selectedApiItem.name }}
                        <i class="anticon anticon-down"></i>
                    </a>
                    <ul nz-menu>
                        <li *ngFor="let item of aqiItems" [ngClass]="{'ant-dropdown-menu-item-selected':item.selected}" 
                            (click) ="setSelectedApiItem(item)" nz-menu-item>
                            {{ item.name }}
                        </li>
                    </ul>
                </nz-dropdown>
            </ng-template>
            <nz-spin [nzTip]="'加载中...'" [nzSpinning]="aqiDataLoading">   
                <p class="text-left text-md">单位:{{ selectedApiItem.unit }}</p>
                <bar height="275" [data]="aqiData"></bar>
            </nz-spin>
        </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>
                空气质量预报(24小时)
                <nz-dropdown>
                    <a class="ant-dropdown-link" nz-dropdown>
                        {{ selectedApiForecastItem.name }}
                        <i class="anticon anticon-down"></i>
                    </a>
                    <ul nz-menu>
                        <li *ngFor="let item of aqiForecastItems" [ngClass]="{'ant-dropdown-menu-item-selected':item.selected}" 
                            (click) ="setSelectedApiForecastItem(item)" nz-menu-item>
                            {{ item.name }}
                        </li>
                    </ul>
                </nz-dropdown>
            </ng-template>
            <p class="text-left text-md">单位:{{ selectedApiForecastItem.unit }}</p>
            <div echarts style="margin: 0;height: 300px;" class="line-chart" [options]="aqiChartOption" [loading]="aqiForecastDataLoading" (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>
                气象预报(24小时) &nbsp;
                <nz-dropdown>
                    <a class="ant-dropdown-link" nz-dropdown>
                        {{ selectedMeteItem.name }}
                        <i class="anticon anticon-down"></i>
                    </a>
                    <ul nz-menu>
                        <li *ngFor="let item of meteItems" [ngClass]="{'ant-dropdown-menu-item-selected':item.selected}" 
                            (click) ="setSelectedMeteItem(item)" nz-menu-item>
                            {{ item.name }}
                        </li>
                    </ul>
                </nz-dropdown>
            </ng-template>
            <p class="text-left text-md">单位:{{ selectedMeteItem.unit }}</p>
            <div echarts style="margin: 0;height: 300px;" 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>
                    <a class="ant-dropdown-link" nz-dropdown>
                        {{ selectedApiSortedItem.name }}
                        <i class="anticon anticon-down"></i>
                    </a>
                    <ul nz-menu>
                        <li *ngFor="let item of apiSortedItems" [ngClass]="{'ant-dropdown-menu-item-selected':item.selected}" 
                            (click) ="setSelectedApiSortedItem(item)" nz-menu-item>
                            {{ item.name }}
                        </li>
                    </ul>
                </nz-dropdown>
            </ng-template>
            <ng-template #body>
                <nz-table #keyTable [nzDataSource]="apiSortedTableList" [nzLoading]="apiSortedTableLoading" [nzPageSize]="8" 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>数值({{selectedApiSortedItem.unit}})</span>
                                <nz-table-sort (nzValueChange)="aqiSortedTableSort('sum',$event)"></nz-table-sort>
                            </th>
                        </tr>
                    </thead>
                    <tbody nz-tbody>
                        <tr nz-tbody-tr *ngFor="let i of keyTable.data;let j = index">
                            <td nz-td>{{j + 1}}</td>
                            <td nz-td><a>{{i.name}}</a></td>
                            <td nz-td class="text-right">{{i.avg}}</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>