From 9200567a17b5a567ed14529fa0208618b4867938 Mon Sep 17 00:00:00 2001
From: fengxiang <110431245@qq.com>
Date: Thu, 05 Jul 2018 16:03:25 +0800
Subject: [PATCH] 设备型号配置优化
---
src/app/routes/devices/version/version-sensor-config/version-sensor-config.component.html | 86 +++++++++++++++++-----------
src/app/routes/devices/version/version-sensor-config/version-sensor-config.component.ts | 88 +++++++++++++++++++++++++----
2 files changed, 126 insertions(+), 48 deletions(-)
diff --git a/src/app/routes/devices/version/version-sensor-config/version-sensor-config.component.html b/src/app/routes/devices/version/version-sensor-config/version-sensor-config.component.html
index b12c73c..39170e9 100644
--- a/src/app/routes/devices/version/version-sensor-config/version-sensor-config.component.html
+++ b/src/app/routes/devices/version/version-sensor-config/version-sensor-config.component.html
@@ -1,39 +1,55 @@
<div class="modal-header">
- <div class="modal-title">���������������</div>
+ <div class="modal-title">���������������</div>
</div>
-<nz-table #nzTable [nzDataSource]="grid.data" [nzPageSize]="8"
- [nzLoading]="grid.loading" [nzShowTotal]="true">
- <thead nz-thead>
- <tr>
- <th nz-th [nzCheckbox]="true">
- <label nz-checkbox [(ngModel)]="grid.allChecked" [nzIndeterminate]="grid.indeterminate" (ngModelChange)="grid.checkAll($event)"></label>
- </th>
- <th nz-th *ngFor="let col of grid.columns" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">
- <span>{{ col.text }}</span>
- <nz-table-sort *ngIf="col.isSort" [(nzValue)]="col.sort" (nzValueChange)="sort(col.name,$event)"></nz-table-sort>
- </th>
- </tr>
- </thead>
- <tbody nz-tbody>
- <tr nz-tbody-tr *ngFor="let row of nzTable.data">
- <td nz-td [nzCheckbox]="true">
- <label nz-checkbox [(ngModel)]="row.checked" (ngModelChange)="grid.refreshStatus($event)"></label>
- </td>
- <td nz-td *ngFor="let col of grid.columns" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">
- <span [ngSwitch]="col.type">
- <!-- ������������������������������������ -->
- <span *ngSwitchDefault> {{ row[col.name]|tyepHandle:col:row }} </span>
- <!-- ������������������������������������ -->
- </span>
- </td>
- </tr>
- </tbody>
-</nz-table>
+<nz-row nzGutter="0">
+ <nz-col nzSpan="24" style="height: 520px;">
+ <nz-table #nzTable [nzDataSource]="gridDataImage" [nzPageSize]="8" [nzLoading]="grid.loading" [nzShowTotal]="true">
+ <thead nz-thead>
+ <tr>
+ <th nz-th>
+ </th>
+ <th nz-th *ngFor="let col of grid.columns;let i = index;" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">
+ <span>{{ col.text }}</span>
+ <ng-container *ngIf="i === 0">
+ <span>
+ {{ '('+selectedCount+'/'+grid.data.length+')' }}
+ </span>
+ <nz-table-sort [(nzValue)]="col.sort" (nzValueChange)="sort(col.name,$event)"></nz-table-sort>
+ <nz-dropdown [nzTrigger]="'click'" [nzClickHide]="false">
+ <i class="anticon anticon-search ant-table-filter-icon" nz-dropdown></i>
+ <div nz-dropdown-custom class="custom-filter-dropdown">
+ <nz-input [nzPlaceHolder]="'������������'" [ngModel]="searchValue" (ngModelChange)="setSearchValue($event)"></nz-input>
+ </div>
+ </nz-dropdown>
+ </ng-container>
+ </th>
+ </tr>
+ </thead>
+ <tbody nz-tbody>
+ <ng-container *ngFor="let row of nzTable.data">
+ <tr nz-tbody-tr>
+ <td nz-td [nzCheckbox]="true">
+ <label nz-checkbox [(ngModel)]="row.checked" (ngModelChange)="grid.refreshStatus($event)"></label>
+ </td>
+ <td nz-td *ngFor="let col of grid.columns" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">
+ <span [ngSwitch]="col.type">
+ <!-- ������������������������������������ -->
+ <span *ngSwitchDefault> {{ row[col.name]|tyepHandle:col:row }} </span>
+ <!-- ������������������������������������ -->
+ </span>
+ </td>
+ </tr>
+ </ng-container>
+ </tbody>
+ </nz-table>
+ </nz-col>
+</nz-row>
<div class="modal-footer">
- <button nz-button type="button" (click)="close()">������</button>
- <button nz-button [nzType]="'primary'" (click)="save($event,null,null)" [nzLoading]="isSaving">
- <span >
- ������<span *ngIf="isSaving" >���</span>
- </span>
- </button>
+ <button nz-button type="button" (click)="close()">������</button>
+ <button nz-button [nzType]="'primary'" (click)="save($event,null,null)" [nzLoading]="isSaving">
+ <span>
+ ������
+ <span *ngIf="isSaving">���</span>
+ </span>
+ </button>
</div>
diff --git a/src/app/routes/devices/version/version-sensor-config/version-sensor-config.component.ts b/src/app/routes/devices/version/version-sensor-config/version-sensor-config.component.ts
index 600dd37..793d971 100644
--- a/src/app/routes/devices/version/version-sensor-config/version-sensor-config.component.ts
+++ b/src/app/routes/devices/version/version-sensor-config/version-sensor-config.component.ts
@@ -4,6 +4,8 @@
import { PageBean, Grid } from '@business/entity/grid';
import { Sensor } from '@business/entity/data';
import { Subject } from 'rxjs/Subject';
+import { count } from 'rxjs/operator/count';
+import { debounce } from 'rxjs/operators';
@Component({
selector: 'app-version-sensor-config',
@@ -13,8 +15,10 @@
export class VersionSensorConfigComponent implements OnInit {
deviceVersionId: number;
selectedSensorIds: number[];
+ originalOrder: { [key: string]: number} = {};
isSaving = false;
grid: Grid<Sensor> = new Grid(null);
+ public searchValue = '';
private initPage() {
const sensor: Sensor = {
name: {
@@ -44,6 +48,24 @@
this.grid.title = '���������';
this.grid.setColumns(sensor);
this.grid.pageSize = 0;
+ this.subjectStream.debounceTime(500).distinctUntilChanged().subscribe(
+ name => {
+ if (!name || !name.trim()) {
+ this.gridDataImage = this.grid.data;
+ } else {
+ this.gridDataImage = this.grid.data.filter(
+ item => {
+ name = name.trim().toLowerCase();
+ if (!!item.name.toLowerCase().match(name)) {
+ return true;
+ } else {
+ return false;
+ }
+ }
+ );
+ }
+ }
+ );
}
constructor(
private subject: NzModalSubject,
@@ -54,6 +76,7 @@
this.initPage();
this.load();
}
+ public gridDataImage = [];
load() {
// ������������������ExpressionChangedAfterItHasBeenCheckedError
setTimeout(() => {
@@ -64,6 +87,7 @@
this.grid.loading = true;
if (res != null && res.data != null) {
this.grid.initData(res);
+ this.gridDataImage = this.grid.data;
this.grid.data.map(
(row: any) => {
row['checked'] = this.selectedSensorIds.filter(
@@ -77,6 +101,9 @@
setTimeout(() => {
this.grid.loading = false;
}, 1);
+ this.grid.data.forEach((item, index) => {
+ this.originalOrder[item.id] = index;
+ });
}
}
);
@@ -88,18 +115,53 @@
$event.preventDefault();
this.subject.next( this );
}
-
- sort(field: string, value: string) {
- // ������������field
- this.grid.sorts = this.grid.sorts.filter(
- (fn: string) => {
- return fn !== field;
- }
- );
- // ������value������null������������������������������filed
- if (value != null) {
- this.grid.sorts.push(field);
- }
- this.load();
+ public get selectedCount(): number {
+ let selectedCount = 0;
+ this.grid.data.forEach(
+ item => {
+ if (item['checked']) {
+ selectedCount++;
+ }
+ }
+ );
+ return selectedCount;
}
+ sort(field: string, value: string) {
+ const data = this.grid.data.sort(
+ (a, b) => {
+ let aWeight = 0;
+ let bWeight = 0;
+ // debugger;
+ if (!!value) {
+ if (value === 'ascend') {
+ aWeight = a['checked'] ? 1 : 0;
+ bWeight = b['checked'] ? 1 : 0;
+ } else {
+ aWeight = a['checked'] ? 0 : 1;
+ bWeight = b['checked'] ? 0 : 1;
+ }
+ } else {
+ const idMap = this.originalOrder;
+ aWeight = idMap[a.id];
+ bWeight = idMap[b.id];
+ }
+ return aWeight - bWeight;
+ }
+ );
+ this.grid.data = data;
+ this.gridDataImage = [];
+ setTimeout(() => {
+ this.gridDataImage = data;
+ }, 1);
+ // this.subjectStream.next(null);
+ // setTimeout(() => {
+ // this.grid.data = data;
+ // this.grid.refreshStatus();
+ // }, 1);
+ }
+ private subjectStream: Subject<string> = new Subject<string> ();
+ public setSearchValue(name) {
+ this.searchValue = name;
+ this.subjectStream.next(name);
+ }
}
--
Gitblit v1.8.0