From 926097f9307e13aa224538dc263d78d84613e98e Mon Sep 17 00:00:00 2001 From: fengxiang <110431245@qq.com> Date: Fri, 03 Aug 2018 17:11:48 +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