From 46d4905467aeaf1979613a156753b6625608820b Mon Sep 17 00:00:00 2001
From: xufenglei <xufenglei>
Date: Fri, 03 Aug 2018 17:24:02 +0800
Subject: [PATCH] 页面 优化
---
src/app/routes/reports/query/query.component.html | 231 ++++++++++++++++++++++-----------------------------------
1 files changed, 90 insertions(+), 141 deletions(-)
diff --git a/src/app/routes/reports/query/query.component.html b/src/app/routes/reports/query/query.component.html
index cae4d8e..636f518 100644
--- a/src/app/routes/reports/query/query.component.html
+++ b/src/app/routes/reports/query/query.component.html
@@ -4,12 +4,10 @@
<nz-card [nzBordered]="false">
<form nz-form [nzLayout]="'inline'">
<div nz-row [nzGutter]="24">
- <div nz-col [nzSpan]="8" class="mb-md">
+ <div nz-col [nzSpan]="6" class="mb-md">
<div nz-form-item class="d-flex">
<div [ngStyle]="{'width': '100px'}" nz-form-label>
- <label>
- ������({{ sensorsSelect+'/'+sensorsLength }})
- </label>
+ <label>������������</label>
</div>
<div nz-form-control class="flex-1">
<nz-popover [nzPlacement]="'bottomLeft'" [(nzVisible)]="sensorSelectVisible" [nzTrigger]="'click'">
@@ -29,20 +27,13 @@
</div>
</ng-template>
</nz-popover>
- <!-- <div style="top:0; right: -62px; position:absolute; font-size: 16px; color: #696969;">
- <span>(</span>
- <span style="display: inline-block; width: 50px; text-align: center;">
- {{ sensorsSelect+'/'+sensorsLength }}
- </span>
- <span>)</span>
- </div> -->
</div>
</div>
</div>
- <div nz-col [nzSpan]="9" class="mb-md">
+ <div nz-col [nzSpan]="4" class="mb-md">
<div nz-form-item class="d-flex">
<div [ngStyle]="{'width': '128px'}" nz-form-label>
- <label>������������</label>
+ <label>������</label>
</div>
<div nz-form-control class="flex-1">
<nz-select name="timeUnit" [(ngModel)]="timeUnit" [nzPlaceHolder]="'������ ������������'" (ngModelChange)="setTimeUnit($event)" [nzNotFoundContent]="'������������'">
@@ -54,8 +45,22 @@
</div>
<div nz-col [nzSpan]="7" class="mb-md">
<div nz-form-item class="d-flex">
+ <div [ngStyle]="{'width': '128px'}" nz-form-label>
+ <label>������������</label>
+ </div>
+ <div nz-form-control class="flex-1">
+ <nz-select name="deviceDimension" style="width: 100%;" [(ngModel)]="deviceDimension" nzAllowClear [nzPlaceHolder]="'������ '+ dimensionItem.label +'(������������������)'"
+ nzShowSearch (nzSearchChange)="dimensionsChange($event)" [nzNotFoundContent]="'������������'">
+ <nz-option *ngFor="let option of dimensionOptions" [nzLabel]="option.name" [nzValue]="option">
+ </nz-option>
+ </nz-select>
+ </div>
+ </div>
+ </div>
+ <div nz-col [nzSpan]="5" class="mb-md">
+ <div nz-form-item class="d-flex">
<div nz-form-label>
- <label>������������</label>
+ <label>������:</label>
</div>
<div *ngIf="timeUnit.value!='MONTH'; else elseBlock" nz-form-control class="flex-1">
<nz-datepicker [ngStyle]="{'width': '100%'}" name="actualTime" [(ngModel)]="actualTime" [nzAllowClear]="false" [nzShowTime]="_timeType.showTime"
@@ -72,68 +77,11 @@
</ng-template>
</div>
</div>
- </div>
- <div [ngStyle]="{'display':isCollapse ? 'none' : 'block' }" nz-row [nzGutter]="24">
- <div nz-col [nzSpan]="8" class="mb-md">
- <div nz-form-item class="d-flex">
- <div [ngStyle]="{'width': '100px'}" nz-form-label>
- <label>���������</label>
- </div>
- <div nz-form-control class="flex-1">
- <nz-cascader [class.class123]="true" (nzLoad)="areaLazyLoad($event)" [nzPlaceHolder]="'������ ���/���/���'" (nzSelectionChange)="setAreasData($event)"
- [nzAllowClear]="false" [nzChangeOnSelect]="true" [ngModel]="_areas" name="areasData">
- </nz-cascader>
- </div>
- </div>
- </div>
- <div nz-col [nzSpan]="9" class="mb-md">
- <div nz-form-item class="d-flex">
- <div [ngStyle]="{'width': '128px'}" nz-form-label>
- <label>
- <nz-dropdown>
- <button nz-button nz-dropdown ><span>{{dimensionItem.label}}</span> <i class="anticon anticon-down"></i></button>
- <ul nz-menu>
- <li *ngFor="let option of otherDimensions;let i = index;" nz-menu-item>
- <a (click)="selectDimension(option)">{{option.label}}</a>
- </li>
- </ul>
- </nz-dropdown>
- </label>
- </div>
- <div nz-form-control class="flex-1">
- <nz-select name="deviceDimension" style="width: 100%;" [(ngModel)]="deviceDimension" nzAllowClear [nzPlaceHolder]="'������ '+ dimensionItem.label +'(������������������)'"
- nzShowSearch (nzSearchChange)="dimensionsChange($event)" [nzNotFoundContent]="'������������'">
- <nz-option *ngFor="let option of dimensionOptions" [nzLabel]="option.name" [nzValue]="option">
- </nz-option>
- </nz-select>
- </div>
- </div>
- </div>
- <div nz-col [nzSpan]="7" class="mb-md">
- <div nz-form-item class="d-flex">
- <div [ngStyle]="{'width': '70px'}" nz-form-label>
- <label>��� ���</label>
- </div>
- <div nz-form-control class="flex-1">
- <nz-select name="device" style="width: 100%;" [(ngModel)]="device" nzAllowClear [nzPlaceHolder]="'��������� '+ dimensionItem.label +'(������������������������)'" nzShowSearch
- (nzSearchChange)="devicesChange($event)" [nzNotFoundContent]="'������������'">
- <nz-option *ngFor="let option of deviceOptions" [nzLabel]="option.name" [nzValue]="option">
- </nz-option>
- </nz-select>
- </div>
- </div>
- </div>
- </div>
- <div nz-row>
- <div nz-col [nzSpan]="24" class="text-right">
+ <div nz-col [nzSpan]="2" class="mb-md">
<button nz-button [nzType]="'primary'" (click)="loadGrid()">
<i class="anticon anticon-search"></i>
<span>������</span>
</button>
- <a class="pl-sm" (click)="toggleCollapse()">
- ������
- <i class="anticon" [class.anticon-down]="isCollapse" [class.anticon-up]="!isCollapse"></i>
- </a>
</div>
</div>
</form>
@@ -168,72 +116,73 @@
</a>
</div>
</nz-card>
-<nz-card>
- <div nz-row [nzGutter]="16">
- <div nz-col [nzMd]="24">
- <div style="width:100%; text-align:center;">
- <span style="font-size:18px; font-weight: bold;">{{ _tableTitleTemp }}</span>
- </div>
- </div>
- </div>
- <div nz-row [nzGutter]="16">
- <div nz-col [nzMd]="24">
- <nz-table #nzTable [nzScroll]="{ x:tableWidth,y:350 }" [nzDataSource]="grid.data" [nzIsPagination]="false" [nzLoading]="grid.loading">
- <ng-template #nzFixedHeader>
- <thead nz-thead>
- <tr>
- <th nz-th [nzWidth]="'160px'" [ngStyle]="{'position': 'relative', 'text-align':'center', 'left':sensorNameScrollLeft+'px'}">
- <span>������������</span>
- </th>
- <th nz-th [nzWidth]="'80px'" *ngFor="let col of grid.columns" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">
- <span>{{ col.text }}</span>
- </th>
- </tr>
- </thead>
- </ng-template>
- <tbody nz-tbody>
- <tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i" (click)="switchSensor(i)" (mouseover)="sensorTableFocus(i)"
- (mouseout)="sensorTableBlur(i)" [ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}">
- <td nz-td class='sensor-name' [ngStyle]="{'background-color': '#FFF'}">
- <span>
- <span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span>
- <i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></i>
- </span>
- </td>
- <td nz-td *ngFor="let col of grid.columns,index as n" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">
- <span [ngSwitch]="col.type">
- <!-- ������������������������������������ -->
- <span title="{{ row.data[n]|tyepHandle:col:row }}" style="width:100%; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"
- *ngSwitchDefault> {{ row.data[n]|tyepHandle:col:row }} </span>
- <!-- ������������������������������������ -->
- </span>
- </td>
- </tr>
- </tbody>
- </nz-table>
- <div *ngIf="grid.data.length>0" [ngClass]="{'table-scroll':true,'table-scroll-box-shadow': sensorNameScrollLeft>2 }" style="position: absolute; top:0;">
- <nz-table #nzTable [nzDataSource]="grid.data" [nzIsPagination]="false">
- <thead nz-thead>
- <tr>
- <th nz-th [nzWidth]="'160px'" style="text-align:center; position:relative; display:block; z-index:9;">
- <span>������������</span>
- </th>
- </tr>
- </thead>
- <tbody nz-tbody [ngStyle]="{'top':sensorNameScrollTop+'px'}" style="position: relative; z-index:7; display:block;">
- <tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i" (mouseover)="sensorTableFocus(i)" (mouseout)="sensorTableBlur(i)"
- [ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}"
- (click)="switchSensor(i)">
- <td nz-td class='sensor-name' [ngStyle]="{'width':'160px','text-align': 'center'}">
- <span>
- <span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span>
- <i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></i>
- </span>
- </td>
- </tr>
- </tbody>
- </nz-table>
- </div>
- </div>
- </div>
-</nz-card>
+<!--<nz-card>-->
+ <!--<div nz-row [nzGutter]="16">-->
+ <!--<div nz-col [nzMd]="24">-->
+ <!--<div style="width:100%; text-align:center;">-->
+ <!--<span style="font-size:18px; font-weight: bold;">{{ _tableTitleTemp }}</span>-->
+ <!--</div>-->
+ <!--</div>-->
+ <!--</div>-->
+ <!--<div nz-row [nzGutter]="16">-->
+ <!--<div nz-col [nzMd]="24">-->
+ <!--<nz-table #nzTable [nzScroll]="{ x:tableWidth,y:350 }" [nzDataSource]="grid.data" [nzIsPagination]="false" [nzLoading]="grid.loading">-->
+ <!--<ng-template #nzFixedHeader>-->
+ <!--<thead nz-thead>-->
+ <!--<tr>-->
+ <!--<th nz-th [nzWidth]="'160px'" [ngStyle]="{'position': 'relative', 'text-align':'center', 'left':sensorNameScrollLeft+'px'}">-->
+ <!--<span>������������</span>-->
+ <!--</th>-->
+ <!--<th nz-th [nzWidth]="'80px'" *ngFor="let col of grid.columns" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">-->
+ <!--<span>{{ col.text }}</span>-->
+ <!--</th>-->
+ <!--</tr>-->
+ <!--</thead>-->
+ <!--</ng-template>-->
+ <!--<tbody nz-tbody>-->
+ <!--<tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i" (click)="switchSensor(i)" (mouseover)="sensorTableFocus(i)"-->
+ <!--(mouseout)="sensorTableBlur(i)" [ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}">-->
+ <!--<td nz-td class='sensor-name' [ngStyle]="{'background-color': '#FFF'}">-->
+ <!--<span>-->
+ <!--<span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span> -->
+ <!--<i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></i>-->
+ <!--</span>-->
+ <!--</td>-->
+ <!--<td nz-td *ngFor="let col of grid.columns,index as n" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">-->
+ <!--<span [ngSwitch]="col.type">-->
+ <!--<!– ������������������������������������ –>-->
+ <!--<span title="{{ row.data[n]|tyepHandle:col:row }}" style="width:100%; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"-->
+ <!--*ngSwitchDefault> {{ row.data[n]|tyepHandle:col:row }} </span>-->
+ <!--<!– ������������������������������������ –>-->
+ <!--</span>-->
+ <!--</td>-->
+ <!--</tr>-->
+ <!--</tbody>-->
+ <!--</nz-table>-->
+ <!---->
+ <!--<div *ngIf="grid.data.length>0" [ngClass]="{'table-scroll':true,'table-scroll-box-shadow': sensorNameScrollLeft>2 }" style="position: absolute; top:0;">-->
+ <!--<nz-table #nzTable [nzDataSource]="grid.data" [nzIsPagination]="false">-->
+ <!--<thead nz-thead>-->
+ <!--<tr>-->
+ <!--<th nz-th [nzWidth]="'160px'" style="text-align:center; position:relative; display:block; z-index:9;">-->
+ <!--<span>������������</span>-->
+ <!--</th>-->
+ <!--</tr>-->
+ <!--</thead>-->
+ <!--<tbody nz-tbody [ngStyle]="{'top':sensorNameScrollTop+'px'}" style="position: relative; z-index:7; display:block;">-->
+ <!--<tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i" (mouseover)="sensorTableFocus(i)" (mouseout)="sensorTableBlur(i)"-->
+ <!--[ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}"-->
+ <!--(click)="switchSensor(i)">-->
+ <!--<td nz-td class='sensor-name' [ngStyle]="{'width':'160px','text-align': 'center'}">-->
+ <!--<span>-->
+ <!--<span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span> -->
+ <!--<i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></i>-->
+ <!--</span>-->
+ <!--</td>-->
+ <!--</tr>-->
+ <!--</tbody>-->
+ <!--</nz-table>-->
+ <!--</div>-->
+ <!--</div>-->
+ <!--</div>-->
+<!--</nz-card>-->
--
Gitblit v1.8.0