添加返回按钮

fengxiang

2018-07-31 76cbed01cef406f686c2349e8fc8c01de00a4868

 src/app/routes/statistics/calendar/calendar.component.html

@@ -1,45 +1,87 @@

<div nz-row [nzGutter]="24">
    <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24">
        <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]="'1'"><span>PM2.5</span></label>
                            <label nz-radio-button [nzValue]="'2'"><span>PM10</span></label>
                            <label nz-radio-button [nzValue]="'3'"><span>SO2</span></label>
                            <label nz-radio-button [nzValue]="'4'"><span>NO3</span></label>
                            <label nz-radio-button [nzValue]="'5'"><span>O3</span></label>
                            <label nz-radio-button [nzValue]="'6'"><span>CO</span></label>
                        </nz-radio-group>
                    </div>
<div nz-row [nzGutter]="24" style="padding: 20px">
    <div nz-col nzXs="24"   nzMd="24">
        <div nz-form-control nz-col [nzSm]="20">
            <nz-card [nzBordered]="false">
                <nz-calendar [nzLocale]="'zh-cn'" >
                    <ng-template #dateCell let-day>
                        <div *ngIf="!isExpire(day.date)" style="width: 80px;height: 80px;display: block;position: absolute;" (click)="calendarClick(day.date)">
                                <nz-badge [nzStatus]="calendarDayCells[day.date|date:'dd']['status']" [nzText]="calendarDayCells[day.date|date:'dd']['statusName']" ></nz-badge>
                                <!-- <nz-badge [nzStatus]="'success'" [nzText]="'Sunday'" *ngIf="(day.date|date:'EEE')==='Sun'"></nz-badge>
                                {{day.date|date:'EEE'}}
                                {{day.date|date:'dd'}}
                                {{calendarDayCells[day.date|date:'dd']['status']}} -->
                        </div>
                    </ng-template>
                </nz-calendar>
            </nz-card>
        </div>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="24" nzLg="15">
        <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">100</div>
                    <p class="text-nowrap mb0">AQI</p>
                </div>
            </ng-template>
            <ng-template #body>
                <h4 class="margin:8px 0 32px 0;">站点排序结果</h4>

                <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>因子数值 mg/m3</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.point)">{{i.point}}</a></td>
                        <td nz-td class="text-right">{{i.value}}</td>
                    </tr>
                    </tbody>
                </nz-table>
            </ng-template>
        </nz-card>
            </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">30 ℃</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">2.5</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">78 mg/m³</div>
                    <p class="text-nowrap">PM2.5</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-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">100</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">30 ℃</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">2.5</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">78 mg/m³</div>
                    <p class="text-nowrap">PM2.5</p>
                </div>
            </div>
        </div>
    </div>
</div>