监控点 click事件实现

fengxiang

2018-03-27 8ba4860a97cbff9e50e7a6b5d2c05b97816755c2

监控点 click事件实现

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

@@ -18,7 +18,10 @@
                            </nz-input>
                            <ng-template #nzTemplate>
                                <div [ngStyle]="{'width': '240px', 'height': '240px', 'overflow-y' :'auto'}">
                                    <nz-tree [nzNodes]="sensorOptions" [nzCheckable]="true" (nzCheck)="onSensorSelect($event)"></nz-tree>
                                    <nz-tree [nzNodes]="sensorOptions"
                                    (nzActivate)="onTreeClickSelect($event)"
                                    (nzDeactivate)="onTreeClickSelect($event)"
                                    [nzCheckable]="true" (nzCheck)="onSensorSelect($event)"></nz-tree>
                                </div>
                            </ng-template>
                        </nz-popover>

 src/app/routes/reports/query/query.component.ts

@@ -16,6 +16,7 @@
import * as $ from 'jquery';
import { DateService } from '@business/services/util/date.service';
import { zip } from 'rxjs/observable/zip';
import { Subject } from 'rxjs/Subject';

@Component({
  selector: 'app-query',
@@ -165,6 +166,46 @@
    ) { }    
    ngOnInit() {
        this.initPage();
        // 监测项目 tree click 事件
        this.treeClickStream.debounceTime(1).subscribe( event => {
            const data = event.node.data;  
            console.log(data);    
            if (data.id === -1) {
                const children = data.children;
                // 全选状态
                if (!data.halfChecked && data.checked) {
                    // 全取消操作
                    data['checked'] = false;
                    data['halfChecked'] = false;
                    children.forEach(element => {
                        element['checked'] = false;
                    });
                    this._sensors = {};
                    // 未选 或者 半选状态
                }else {
                    // 全选操作
                    children.forEach(element => {
                        element['checked'] = true;
                        this._sensors [element.id] = element.sensorKey;
                    });
                    data['checked'] = true;
                    data['halfChecked'] = false;
                }
            }else {
                const parentData = event.node.parent.data;
                data['checked'] = !data['checked'];
                if (data['checked']) {
                    this._sensors [data.id] = data.sensorKey;
                } else {
                    delete this._sensors [data.id];
                }
                const length = Object.keys(this._sensors).length;
                parentData['halfChecked'] = length > 0 
                && this.sensorOptions[0].children.length > length;
                parentData['checked'] = !parentData['halfChecked'] && length !== 0;
            }
            this.reloadSensorNames();
        });
    }
    private initPage() {
        this.sensorsService.getPagingList(null, null).subscribe(
@@ -292,6 +333,10 @@
     * @type {string}
     * @memberof QueryComponent
     */  
    private treeClickStream: Subject<any> = new Subject<any>();
    public onTreeClickSelect(event): void {
          this.treeClickStream.next(event);
    }
    public onSensorSelect(event): void {
        const data = event.node.data;
        if (data.id === -1 && data.halfChecked === false) {
@@ -311,6 +356,9 @@
                delete this._sensors[data.id];
             }
        }
        this.reloadSensorNames();
    }
    private reloadSensorNames(): void {
        this._sensorNames = '';
        this.sensorOptions[0].children.forEach(
            sensor => {