页面 优化

xufenglei

2018-08-03 46d4905467aeaf1979613a156753b6625608820b

 src/app/routes/reports/query2/query2.component.html

@@ -1,11 +1,63 @@
<div class="content__title">
    <h1>监控站点排名</h1>
</div>

<div nz-row [nzGutter]="24" style="padding-top: 25px">
<nz-card [nzBordered]="false">
   <div nz-row [nzGutter]="24">
       <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24">
           <div class="sales-card-extra">
                <div class="sales-card-extra">
                    <div class="sales-type-radio">
                        <nz-radio-group [(ngModel)]="sensorKey" (ngModelChange)="changeSensorKey($event)" [nzSize]="'large'">
                            <label nz-radio-button [nzValue]="'e1'"><span>PM2.5</span></label>
                            <label nz-radio-button [nzValue]="'e2'"><span>PM10</span></label>
                            <label nz-radio-button [nzValue]="'e11'"><span>SO2</span></label>
                            <label nz-radio-button [nzValue]="'e16'"><span>NO2</span></label>
                            <label nz-radio-button [nzValue]="'e15'"><span>O3</span></label>
                            <label nz-radio-button [nzValue]="'e10'"><span>CO</span></label>
                        </nz-radio-group>
                    </div>
                </div>
           </div>
       </div>
   </div>
</nz-card>

<nz-card [nzBordered]="false">
   <div nz-row [nzGutter]="24">
       <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24">
           <h4 class="margin:8px 0 32px 0;">站点排序结果</h4>
	
           <nz-table #keyTable [nzDataSource]="_dataSet" [nzPageSize]="5" nzSize="small" [nzLoading]="loading">
               <thead nz-thead>
               <tr>
                   <th nz-th><span>序号</span></th>
                   <th nz-th><span>站点名称</span></th>
                   <th nz-th class="text-right">
                       <span>因子数值 {{sensorKey == 'e10'?'mg/m3':'ug/m3'}}</span>
                       <nz-table-sort (nzValueChange)="sort('avg',$event)"></nz-table-sort>
                   </th>
               </tr>
               </thead>
               <tbody nz-tbody>
               <tr nz-tbody-tr *ngFor="let i of keyTable.data;let index = index">
                   <td nz-td>{{index + 1}}</td>
                   <td nz-td><a>{{i.name}}</a></td>
                   <td nz-td class="text-right">{{i.avg}}</td>
               </tr>
               </tbody>
           </nz-table>
       </div>
   </div>
</nz-card>

<!-- <div nz-row [nzGutter]="24" style="padding-top: 25px">
    <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24">
        <nz-card [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)]="sensorKey1" (ngModelChange)="changeSensorKey($event)" [nzSize]="'large'">
                        <nz-radio-group [(ngModel)]="sensorKey" (ngModelChange)="changeSensorKey($event)" [nzSize]="'large'">
                            <label nz-radio-button [nzValue]="'e1'"><span>PM2.5</span></label>
                            <label nz-radio-button [nzValue]="'e2'"><span>PM10</span></label>
                            <label nz-radio-button [nzValue]="'e11'"><span>SO2</span></label>
@@ -19,13 +71,13 @@
            <ng-template #body>
                <h4 class="margin:8px 0 32px 0;">站点排序结果</h4>

                <nz-table #keyTable [nzDataSource]="_dataSet" [nzPageSize]="5" nzSize="small">
                <nz-table #keyTable [nzDataSource]="_dataSet" [nzPageSize]="5" nzSize="small" [nzLoading]="loading">
                    <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>
                            <span>因子数值 {{sensorKey == 'e10'?'mg/m3':'ug/m3'}}</span>
                            <nz-table-sort (nzValueChange)="sort('avg',$event)"></nz-table-sort>
                        </th>
                    </tr>
@@ -42,11 +94,11 @@
        </nz-card>
    </div>
</div>

 -->
<nz-card [nzBordered]="false">
    <form nz-form  [nzLayout]="'inline'">
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="6" class="mb-md">
            <div nz-col [nzXs]="24" [nzSm]="6" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div  [ngStyle]="{'width': '100px'}" nz-form-label>
                        <label>污染因子</label>
@@ -72,7 +124,7 @@
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="4" class="mb-md">
            <div nz-col [nzXs]="24" [nzSm]="4" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div [ngStyle]="{'width': '128px'}" nz-form-label>
                        <label>类型</label>
@@ -85,7 +137,7 @@
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="7" class="mb-md">
            <div nz-col [nzXs]="24" [nzSm]="7" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div [ngStyle]="{'width': '128px'}" nz-form-label>
                        <label>监测站点</label>
@@ -99,7 +151,7 @@
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="5" class="mb-md">
            <div nz-col [nzXs]="24" [nzSm]="5" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div  nz-form-label>
                        <label>时间:</label>
@@ -119,7 +171,7 @@
                    </ng-template>
                </div>
            </div>
            <div nz-col [nzSpan]="2" class="mb-md">
            <div nz-col [nzXs]="24" [nzSm]="2" class="mb-md" style="text-align: right;">
                <button nz-button [nzType]="'primary'" (click)="loadGrid()">
                    <i class="anticon anticon-search"></i>
                    <span>查询</span>