延长弹出 超时弹窗的晃动时间

fengxiang

2018-06-05 d4fd81a5e4853e8e6c1f507d0765b478ceff8219

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

@@ -1,14 +1,13 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { Sensor, Device, DataCondition, MonitorPoint, Organization, LineChartCriteria } from '@business/entity/data';
import { TimeUnits, AreaRange, ResultCode } from '@business/enum/types.enum';
import { TimeUnits, AreaRange, ResultCode, DeviceDimension } from '@business/enum/types.enum';
import { SensorsService } from '@business/services/http/sensors.service';
import { PageBean, ResultBean, Grid } from '@business/entity/grid';
import { NzTreeComponent } from 'ng-tree-antd';
import * as moment from 'moment';
import { ExampleService } from '@business/services/util/example.service';
import { DeviceService } from '@business/services/http/device.service';
import { environment } from '@env/environment';
import { CascaderOption } from 'ng-zorro-antd/src/cascader/nz-cascader.component';
import { AreacodeService } from '@business/services/http/areacode.service';
import { MonitorPointService } from '@business/services/http/monitor-point.service';
@@ -24,6 +23,7 @@
  styleUrls: ['./query.component.less']
})
export class QueryComponent implements OnInit {
    
    // aqi六项排序
    private aqiSort = {
        e1: 1,
@@ -33,6 +33,7 @@
        e15: 5,
        e16: 6
    };

    public tableWidth = 2800;
    // private tableWidthOption = {
    //     'MONTH': 1400,
@@ -49,10 +50,10 @@
     * @memberof QueryComponent
     */
    public timeUnitOptions = [
        {label: '某年', value: TimeUnits.MONTH},
        {label: '某月', value: TimeUnits.DAY},
        {label: '某日', value: TimeUnits.HOUR},
        {label: '某时', value: TimeUnits.MINUTE},
        {label: '年', value: TimeUnits.MONTH},
        {label: '月', value: TimeUnits.DAY},
        {label: '日', value: TimeUnits.HOUR},
        {label: '时', value: TimeUnits.MINUTE},
    ];
    public timeUnit: {label: string, value: TimeUnits} = this.timeUnitOptions[2];
    // 默认时间为昨天，今天无数据
@@ -88,9 +89,9 @@
         this.isChartCollapse = !this.isChartCollapse;
     }
     public deviceOptions: Device[] = [];
     public dataCondition: DataCondition = {areaRangeId: 320583, areaRange: AreaRange.AREA };
     public dataCondition: DataCondition = {areaRangeId: 320583, areaRange: AreaRange.AREA, deviceDimension: DeviceDimension.NONE};

     public monitorPointOptions: MonitorPoint[] = [];
     public dimensionOptions: MonitorPoint[] = [];
    
     get actualYear(): number {
         return this.actualTime.getFullYear();
@@ -98,6 +99,23 @@
     set actualYear(year) { 
         this.actualTime.setFullYear(Number(year));
     }
     dimensionsChange(text?: string) {
        switch (this.dimensionItem.value) {
            case DeviceDimension.MONITORPOINT:
            this.monitorPointsChange(text); break;
            case DeviceDimension.PROFESSION:
            this.professionsChange(text); break;
        }
     }
     professionsChange(text?: string) {
        this.http.get<ResultBean<any[]>>('profession/getall').subscribe(
            result => {
                if (!!result.code) {
                    this.dimensionOptions = result.data;
                }
            }
        );
      }
     monitorPointsChange(text?: string) {
        const pageBean: PageBean = { pageIndex: 0, pageSize: 20 };
        const example = new ExampleService();
@@ -120,19 +138,21 @@
        this.monitorPointService.getPageByExample(pageBean, example).subscribe(
            (res: PageBean) => {
                if (!!res && !!res.data) {
                    this.monitorPointOptions = res.data;
                    this.dimensionOptions = res.data;
                }
            }
        );
    }
     devicesChange(text?: string) {
        if (!!this.monitorPoint) {
        if (!!this.deviceDimension) {
            const example = new ExampleService();
            const deviceDimensionProperty = 
            this.dimensionItem.value === DeviceDimension.MONITORPOINT ? 'monitorPointId' : 'professionId';
            if (!!text) {
                example.or().andEqualTo({ name: 'monitorPointId', value: this.monitorPoint.id })
            example.or().andEqualTo({ name: deviceDimensionProperty, value: this.deviceDimension.id })
                .andLike({name: 'text', value: text});
            }else {
                example.or().andEqualTo({ name: 'monitorPointId', value: this.monitorPoint.id });
            } else {
                example.or().andEqualTo({ name: deviceDimensionProperty, value: this.deviceDimension.id });
            }
            this.deviceService.getPageByExample(null, example).subscribe(
                (res: PageBean) => {
@@ -164,12 +184,12 @@
    private msg: NzMessageService,
    private dateService: DateService,
    ) { }    
    ngOnInit() {
    ngOnInit() { 
        this.initPage();
        // 监测项目 tree click 事件
        this.treeClickStream.debounceTime(1).subscribe( event => {
            const data = event.node.data;  
            console.log(data);    
            // console.log(data);    
            if (data.id === -1) {
                const children = data.children;
                // 全选状态
@@ -182,7 +202,7 @@
                    });
                    this._sensors = {};
                    // 未选 或者 半选状态
                }else {
                } else {
                    // 全选操作
                    children.forEach(element => {
                        element['checked'] = true;
@@ -191,7 +211,7 @@
                    data['checked'] = true;
                    data['halfChecked'] = false;
                }
            }else {
            } else {
                const parentData = event.node.parent.data;
                data['checked'] = !data['checked'];
                if (data['checked']) {
@@ -207,6 +227,7 @@
            this.reloadSensorNames();
        });
    }

    private initPage() {
        this.sensorsService.getPagingList(null, null).subscribe(
            (res: PageBean) => {
@@ -215,7 +236,7 @@
        );
        this.actualYearOptions = this.newArray(this.actualYear - 9, 10).map(item => Number(item)).reverse();
                // 省市区 初始值
                this.http.get(environment.SERVER_BASH_URL + 'organization/get-my-org').subscribe(
                this.http.get('organization/get-my-org').subscribe(
                    (res: ResultBean<Organization>) => {
                        if (res.code === ResultCode.SUCCESS) {
                            const org = res.data;
@@ -253,6 +274,14 @@
                        }
                    }
                );
                this.dimensionItem = this.dimensions[0];
                // this.dimensionsChange();
    }
    public get sensorsLength(): number {
        return this.sensorOptions.length > 0 ? this.sensorOptions[0].children.length : 0;
    }
    public  get  sensorsSelect(): number {
        return Object.keys(this._sensors).length;
    }
    public areaLazyLoad(event: { option: CascaderOption, index: number, resolve: (children: CascaderOption[]) => void, reject: () => void }) {
        const index = event['index'];
@@ -278,44 +307,66 @@
                ); break;
        }
    }
    // 第一步，省市区 赋值变 并 改变监控点选项
    // 第一步，省市区 赋值变 并 改变监控站点选项
    public  setAreasData(areas: {label: string, value: string}[] ) {
        let isChanged = false;
        isChanged = areas.some( (item , index: number) => {
            // this._areas[index] 为null 改变 监控点选项
            // this._areas[index] 为null 改变 监控站点选项
            return this._areas.length < areas.length 
            || !this._areas[index] 
            || this._areas[index].value !== item.value;
        });
        if ( isChanged ) {
            this._areas = areas;
            this.monitorPoint = null;
            this.monitorPointsChange();
            this.deviceDimension = null;
            if (this.dimensionItem.value === DeviceDimension.MONITORPOINT) {
                this.dimensionsChange();
            }
        }
    }

     // 第二步 设置 监控点, 值变 改变设备选项，值为null 置空设备选项和设备值
     public _monitorPoint: MonitorPoint;
     get monitorPoint(): MonitorPoint {
         return this._monitorPoint;
     // 第二步 设置 监控站点, 值变 改变设备选项，值为null 置空设备选项和设备值
     public dimensionItem: {label: string, value: DeviceDimension};
     public dimensions: {label: string, value: DeviceDimension}[] = [
         {label: '监控站点', value: DeviceDimension.MONITORPOINT},
         {label: '监控行业', value: DeviceDimension.PROFESSION}
     ];
     public get otherDimensions(): {label: string, value: DeviceDimension}[] {
         return  this.dimensions.filter(
             item => {
                 return item.value !== this.dimensionItem.value;
             }
         );
     }
     set monitorPoint(value) {        
     public selectDimension(option: {label: string, value: DeviceDimension}) {
         this.dimensionItem = option;
         this.dimensionsChange();
         this._deviceDimension = null;
         // 清空设备选项
         this.device = null;
         this.deviceOptions = null;
     }
     public _deviceDimension: {id: number, name: string};
     get deviceDimension(): {id: number, name: string} {
         return this._deviceDimension;
     }
     set deviceDimension(value) {        
        if (!!value) {
              // 值变 改变设备选项
             if (this._monitorPoint !== value) {
                this._monitorPoint = value; // 此处不能提前也不能放后，设备改变要调用
             if (this._deviceDimension !== value) {
                this._deviceDimension = value; // 此处不能提前也不能放后，设备改变要调用
                this._device = null; // 设备值清空
                this.devicesChange();
             }
             // 值为null 置空设备选项和设备值
        } else {
             this._monitorPoint = null;
             this._deviceDimension = null;
             this.device = null;
             this.deviceOptions = null;
        }
        
     }
    // 第三步 设置 监控点
    // 第三步 设置 监控站点
    public _device: Device;
    set device(val: Device) {
        this._device = val;
@@ -349,27 +400,29 @@
            } else {
                this._sensors = {};
            }
        }else {
        } else {
             if (!!data.checked) {
                this._sensors [data.id] = data.sensorKey;
             }else {
             } else {
                delete this._sensors[data.id];
             }
        }
        this.reloadSensorNames();
    }
    private reloadSensorNames(): void {
        this._sensorNames = '';
        this.sensorOptions[0].children.forEach(
            sensor => {
               const hasSensor = Object.keys(this._sensors).some(
                     id => Number(id) === Number(sensor.id)
                );
                if (hasSensor) {
                    this._sensorNames += sensor.name + ',';
        // 异步提升展现速度
        setTimeout(() => {
            this._sensorNames = '';
            const sensorNameList = Object.keys(this._sensors).map(
                id => {
                  const sensor =  this.sensorOptions[0].children.find(item => {
                        return Number(id) === Number(item.id)   ;
                    });
                    return sensor.name;
                }
            }
        );
            );
            this._sensorNames = sensorNameList.join(', ');
        }, 1);
    }
    public setTimeUnit(val: {label: string, value: TimeUnits} ) {       
        switch (val.value) {
@@ -438,22 +491,32 @@
       this.dataCondition['actualTime'] = null;
       this.dataCondition['timeUnits'] = this.timeUnit.value;
       // 设置区域值
       const mptValue: number = !!this._monitorPoint ? this._monitorPoint.id : null;
       const dimValue: number = !!this._deviceDimension ? this._deviceDimension.id : null;
       const devValue: number = !!this._device ? this._device.id : null;
       const areasData = [ devValue, mptValue, Number(this._areas.slice(-1).pop().value)];
       const areasData = [ devValue, dimValue, Number(this._areas.slice(-1).pop().value)];
       if (!!this.deviceDimension) {
        this.dataCondition.dimensionValue = this._deviceDimension.id;
        this.dataCondition.deviceDimension = this.dimensionItem.value;
       }
       for (let index = 0 ; index < areasData.length ; index++) {
            const item = areasData[index];
            if ( item !== null ) {
                this.dataCondition.areaRangeId = item;
                switch (index) {
                    case 0: this.dataCondition.areaRange = AreaRange.DEVICE; break;
                    case 1: this.dataCondition.areaRange = AreaRange.MONITORPOINT; break;
                    case 1:                   
                    // 维度为监控点
                    if (this.dimensionItem.value === DeviceDimension.MONITORPOINT) {
                         this.dataCondition.areaRange = AreaRange.MONITORPOINT;                        
                    // 维度为行业
                    } else {
                         // 重新标定区域范围
                         this.switchAreas();
                         // 重新设置区域值
                         this.dataCondition.areaRangeId = areasData.slice(-1).pop();                         
                    } break;
                    case 2: 
                    switch (this._areas.length ) {
                      case 1: this.dataCondition.areaRange = AreaRange.PROVINCE; break;
                      case 2: this.dataCondition.areaRange = AreaRange.CITY; break;
                      case 3: this.dataCondition.areaRange = AreaRange.AREA; break;
                    }
                        this.switchAreas();
                    break;
                }
                break;
@@ -501,7 +564,8 @@
      this.reloadChartTitle();
      // 清空数据
      this.grid.data = [];
      this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', lineChartCriteria).subscribe(
      console.log(lineChartCriteria);
      this.http.post('/report/line-chart', lineChartCriteria).subscribe(
        (res: ResultBean<{[key: string]: Array<Array<number>>}>) => {
           if (res.code === 1) {
              const data =  res.data;
@@ -524,7 +588,7 @@
                                    weight = !!value ? weight : weight + 1;
                                }
                                // 四舍五入，保留2位
                                return !!value ? String(Math.round(value * 100) / 100) : '-';
                                return value != null ? String(Math.round(value * 100) / 100) : '-';
                           }
                       );
                       this.grid.data.push({sensor: sensor, data: sensorData, weight: weight});
@@ -543,6 +607,13 @@
                this.sensorNameScrollTop =   -$('.ant-table-body').scrollTop();
            }
        );
    }
    private switchAreas(): void {
          switch (this._areas.length ) {
            case 1: this.dataCondition.areaRange = AreaRange.PROVINCE; break;
            case 2: this.dataCondition.areaRange = AreaRange.CITY; break;
            case 3: this.dataCondition.areaRange = AreaRange.AREA; break;
          }
    }
    private reloadChart(): void {
        const  timeList = this.grid.columns.map(item => item.text);  
@@ -610,22 +681,36 @@
    public _chartTitleTemp = '';
    public _tableTitleTemp = '';
    public reloadChartTitle(): void {
        const names = ['辖区', '地区', '时间', '项目'];
        const names = ['辖区', '地区', '维度', '时间', '项目'];
        switch ( this.dataCondition.areaRange ) {
            case AreaRange.MONITORPOINT :
            names[0] = '监控点';
            names[1] = this._monitorPoint.name; break;          
            names[0] = '监控站点';
            names[1] = this._deviceDimension.name; break;          
            case AreaRange.DEVICE :
              names[0] = '设备';
            names[0] = '设备';
            names[1] = this._device.name; break;
            default :
            names[0] = '';
            names[1] = this._areas.map( item => item.label).join('/'); 
            break;
        }
        names[2] = moment(this.actualTime).format(this._timeType.dateFormat);
        // 维度命名
        if (!!this._deviceDimension) {
            switch (this.dataCondition.deviceDimension) {
                case DeviceDimension.PROFESSION :
                names[2] = '[' + this._deviceDimension.name + ']';
                break;
                default :
                names[2] = '';
                break;
            }
        } else {
            names[2] = '';
        }

        names[3] = moment(this.actualTime).format(this._timeType.dateFormat);
        if ( this.grid.data.length > this.chartSelectedIndex) {
            names[3] = this.grid.data[this.chartSelectedIndex].sensor.name;
            names[4] = this.grid.data[this.chartSelectedIndex].sensor.name;
        }        
        const title = names.join('  ') + ' 报表';
        if (title.trim() !== this._chartTitleTemp.trim()) {
@@ -690,9 +775,23 @@
    public sensorTableFocus(index) {
        this.sensorTableFocusIndex = index;
    }
   
    public sensorTableBlur(index) {
        this.sensorTableFocusIndex = -1;
    }
    public sensorSelectVisible = false;
    public treeMouseOverOccur = false;
    public onTreeMouseOver(event) {
        this.treeMouseOverOccur = true;
    }
    public onTreeMouseOut(event) {
        this.treeMouseOverOccur = false;
        setTimeout(() => {
            if (!this.treeMouseOverOccur) {
                this.sensorSelectVisible =  false;
            }
        }, 900);
    }
}