数据查看

fengxiang

2018-03-19 b7aa850069d53ca1cc2aea791e7401216f5b795c

数据查看

 src/app/business/entity/data.ts

@@ -137,7 +137,7 @@

export interface LineChartCriteria {
  dataConditions?: DataCondition[];
  sensorKey?: string;
  sensorKeys?: string[];
  timePeriod?: TimePeriod;
}


 src/app/business/services/http/login.service.ts

@@ -50,9 +50,8 @@
               this.authorization = res;
               const now = new Date();
               // expiredTime,refreshToken,refreshTime 与平台的 token 分开储存
               const expiredTime  = !!this.authorization.expiredTime ? this.authorization.expiredTime.toString() : null;
               this.setRefreshTime();
               localStorage.setItem('expiredTime', expiredTime);
               localStorage.setItem('expiredTime', String(this.authorization.expiredTime));
               localStorage.setItem('refreshToken', this.authorization.refreshToken);
               return res;
           }

 src/app/business/services/util/date.service.ts

@@ -4,9 +4,10 @@
import { TimePeriod } from '@business/entity/data';
import { TimeUnits } from '@business/enum/types.enum';


type baseUnitOfMoment = moment.unitOfTime.Base;
@Injectable()
export class DateService {

  date_format(date: string, format: string) {
    return moment(date).format(format);
  }
@@ -18,26 +19,17 @@
   *  获取时间区间,粒度数值
   */   
   countTimeRange(timePeriod: TimePeriod): number {
      let timeUnit = 0;
      switch (timePeriod.timeUnits) {
        case TimeUnits.YEAR: 
        timeUnit = 1000 * 60 * 60 * 24 * 30 * 12; break;
        case TimeUnits.MONTH: 
        timeUnit = 1000 * 60 * 60 * 24 * 30; break;
        case TimeUnits.DAY: 
        timeUnit = 1000 * 60 * 60 * 24; break;
        case TimeUnits.HOUR: 
        timeUnit = 1000 * 60 * 60; break;
        case TimeUnits.MINUTE: 
        timeUnit = 1000 * 60; break;
      }
      return Math.floor((timePeriod.endTime.getTime() - timePeriod.startTime.getTime()) / timeUnit);
      let timeUnit: baseUnitOfMoment = 'day';
      timeUnit = <baseUnitOfMoment>timePeriod.timeUnits.toLowerCase();
      const start = moment(timePeriod.startTime);
      const end = moment(timePeriod.endTime);
      return end.diff(start, timeUnit) + 1;
   }
   makeTimeList(timePeriod: TimePeriod): string [] {
    const start = moment(timePeriod.startTime);
    const end = moment(timePeriod.endTime);
    const timeList: string[] = [];
    let timeUnit: moment.DurationInputArg2 = 'day';
    let timeUnit: baseUnitOfMoment = 'day';
    let formatStyle = '';
    switch (timePeriod.timeUnits) {
      case TimeUnits.YEAR: 
@@ -56,11 +48,11 @@
      formatStyle = 'YYYY-MM-DD HH:mm';
      timeUnit = 'minute'; break;
    }
    do {
    while (start.valueOf() < end.valueOf()) {
     const outTime = start.format(formatStyle);
     timeList.push(outTime);
     start.add(1, timeUnit);
    }while (start.valueOf() < end.valueOf());
    }
    return timeList;
   }
}

 src/app/routes/analysis/analysis.module.ts

@@ -1,6 +1,7 @@
import { MonitorPointService } from '@business/services/http/monitor-point.service';
import { AreacodeService } from '@business/services/http/areacode.service';
import { SensorsService } from '@business/services/http/sensors.service';
import { NzTreeModule } from 'ng-tree-antd';
import { PipeModule } from '@business/pipe/pipe.module';
import { NgModule } from '@angular/core';
import { SharedModule } from '@shared/shared.module';
@@ -26,6 +27,7 @@
    PipeModule,
    CommonModule,
    SharedModule,
    NzTreeModule,
    NgxEchartsModule,
    RouterModule.forChild(routes)    
  ],

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

@@ -1,156 +1,157 @@
<nz-card [nzBordered]="true">
    <div nz-row>
        <div nz-col [nzXs]="20" [nzSm]="8" class="header-info">
            <p class="text-grey-dark">当前监控项目</p>
            <nz-dropdown>
                <a class="ant-dropdown-link" nz-dropdown>
                    <p class="display-2">{{ lineChartSensorName }}
                        <i class="anticon anticon-down"></i>
                    </p>
                </a>
                <ul style="height:280px; overflow:auto;" nz-menu>
                    <li style="width:200px; cursor:pointer;" *ngFor="let sensor of sensorList" (click)="lineChartCriteria.sensorKey=sensor.sensorKey"
                        nz-menu-item>
                        <p>
                            {{sensor.name}}
                        </p>
                    </li>
                </ul>
            </nz-dropdown>
            <em></em>
<div class="content__title">
    <h1>数据查询</h1>
        </div>
        <div nz-col [nzXs]="20" [nzSm]="8" class="header-info">
            <p class="text-grey-dark">横坐标时间单位</p>
            <nz-dropdown>
                <a class="ant-dropdown-link" nz-dropdown>
                    <p class="display-2">{{ timePeriodUnitName }}
                        <i class="anticon anticon-down"></i>
                    </p>
                </a>
                <ul nz-menu>
                    <li style="width:60px; cursor:pointer;" *ngFor="let item of timeUnits" (click)="timePeriodUnitValue = item.value" nz-menu-item>
                        <p>
                            {{item.label}}
                        </p>
                    </li>
                </ul>
            </nz-dropdown>
            <em></em>
<nz-card [nzBordered]="false">
    <form nz-form (ngSubmit)="loadGrid()" [nzLayout]="'inline'">
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label>监测项目</label>
        </div>
        <div *ngIf="_timePeriodUnitValue!='YEAR'; else elseBlock" nz-col [nzSm]="8" class="header-info">
            <p class="text-grey-dark">横坐标时间区间</p>
            <nz-datepicker style="width: 42%;" [ngModel]="lineChartCriteria.timePeriod.startTime" 
                (ngModelChange) ="_timeChange($event,'start')"
                [nzDisabledDate]="_disabledStartDate"
                [nzShowTime]="_startShowTime" [nzMode]="timeType.mode" [nzFormat]="timeType.dateFormat"
                [nzPlaceHolder]="'Start date'"></nz-datepicker>
            <span>-</span>
            <nz-datepicker style="width: 42%;" [nzDisabledDate]="_disabledEndDate" [ngModel]="lineChartCriteria.timePeriod.endTime"
            (ngModelChange) ="_timeChange($event,'end')"
                 [nzShowTime]="_endShowTime" [nzMode]="timeType.mode" [nzFormat]="timeType.dateFormat"
                [nzPlaceHolder]="'End date'"></nz-datepicker>
                    <div nz-form-control class="flex-1">
                        <nz-popover [nzTitle]="'请选择'" [(nzVisible)]="visible" [nzPlacement]="'bottomLeft'" [nzTrigger]="'hover'">
                            <nz-input [nzType]="'input'" nz-popover [ngModel]="sensorNames" name="sensorNames" [nzReadonly]="true" [nzPlaceHolder]="'请选择监控类型'">
                                <ng-template #suffix>
                                    <i class="anticon anticon-plus ant-input-search-icon"></i>
                                </ng-template>
                            </nz-input>
                            <ng-template #nzTemplate>
                                <div [ngStyle]="{'width': '200px', 'height': '300px', 'overflow-y' :'auto'}">
                                    <nz-tree [nzNodes]="sensorOptions" [nzCheckable]="true" (nzCheck)="onSensorSelect($event)"></nz-tree>
                                </div>
                            </ng-template>
                        </nz-popover>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label>时间类型</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select name="timeUnit"  [(ngModel)]="timeUnit" [nzPlaceHolder]="'选择 数据类型'"
                        (ngModelChange)="setTimeUnit($event)"    [nzNotFoundContent]="'无法找到'">
                            <nz-option *ngFor="let option of timeUnitOptions" [nzLabel]="option.label" [nzValue]="option">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="8" class="mb-md">
                 <div nz-form-item class="d-flex">
                        <div nz-form-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" [nzMode]="_timeType.mode"
                           [nzFormat]="_timeType.dateFormat" [nzPlaceHolder]="'具体日期'">
                          </nz-datepicker>
        </div>
        <ng-template #elseBlock>
            <div nz-col [nzSm]="8" class="header-info">
                <p class="text-grey-dark">横坐标时间区间</p>
                <nz-input-number style="width: 42%;" [(ngModel)]="startYear" [nzMin]="minStartYear" [nzMax]="maxStartYear" [nzStep]="1" [nzAllowClear]="false"></nz-input-number>
                <span>-</span>
                <nz-input-number style="width: 42%;" [(ngModel)]="endYear" [nzMin]="minEndYear" [nzMax]="maxEndYear" [nzStep]="1" [nzAllowClear]="false"></nz-input-number>
                            <div nz-form-control class="flex-1">
                                <nz-select name="actualYear"  [(ngModel)]="actualYear" [nzPlaceHolder]="'选择 数据类型'"
                                (ngModelChange)="setTimeUnit($event)"    [nzNotFoundContent]="'无法找到'">
                                    <nz-option *ngFor="let option of actualYearOptions" [nzLabel]="option" [nzValue]="option">
                                    </nz-option>
                                </nz-select>
            </div>
        </ng-template>
    </div>
</nz-card>
<form nz-form  [nzLayout]="'vertical'">
<nz-card [nzBordered]="true" title="数据取样">
        <div nz-row [nzGutter]="16">
            <div nz-col nzMd="6" nzSm="12" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col>
                </div>
        </div>
        <div *ngIf="!isCollapse" nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div [ngStyle]="{'width': '70px'}" nz-form-label>
                        <label>省市区</label>
                    </div>
                    <div nz-form-control nz-col >
                        <nz-cascader [class.class123]="true" (nzChange)="setAreaCodes($event)" (nzLoad)="areaLazyLoad($event)" [nzPlaceHolder]="'选择 省/市/区'"
                    <div nz-form-control class="flex-1">
                        <nz-cascader [class.class123]="true" (nzChange)="setAreaCodes($event)"
                            (nzLoad)="areaLazyLoad($event)" [nzPlaceHolder]="'选择 省/市/区'"
                            [nzAllowClear]="false" [nzChangeOnSelect]="true" [(ngModel)]="_areas" name="_areas">
                        </nz-cascader>
                    </div>
                </div>
            </div>
            <div nz-col [nzMd]="{span:6, offset:3}" nzSm="12" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col>
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div [ngStyle]="{'width': '70px'}" nz-form-label>
                        <label>监控点</label>
                    </div>
                    <div nz-form-control nz-col>
                        <nz-select name="_monitorPoint" style="width: 100%;" [ngModel]="_monitorPoint" (ngModelChange)="setMonitorPoint($event)"
                            nzAllowClear [nzPlaceHolder]="'选择 监控点(输入名称搜索)'" nzShowSearch (nzSearchChange)="monitorPointsChange($event)"
                    <div nz-form-control class="flex-1">
                        <nz-select name="monitorPoint" style="width: 100%;" [(ngModel)]="monitorPoint"
                            nzAllowClear [nzPlaceHolder]="'选择 监控点(输入名称搜索)'"
                            nzShowSearch (nzSearchChange)="monitorPointsChange($event)"
                            [nzNotFoundContent]="'无法找到'">
                            <nz-option *ngFor="let option of monitorPoints" [nzLabel]="option.name" [nzValue]="option">
                            <nz-option *ngFor="let option of monitorPointOptions" [nzLabel]="option.name" [nzValue]="option">
                            </nz-option>
                        </nz-select>
                    </div>

                </div>
            </div>
            <div nz-col [nzMd]="{span:6, offset:3}" nzSm="12" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col>
                        <label>设备 ( 先选择监控点 )</label>
            <div nz-col [nzSpan]="8" class="mb-md">
                 <div  nz-form-item class="d-flex">
                        <div [ngStyle]="{'width': '70px'}" nz-form-label>
                            <label>设 备</label>
                    </div>
                    <div nz-form-control nz-col>
                        <nz-select name="_device" style="width: 100%;" [ngModel]="_device" (ngModelChange)="setDevice($event)" nzAllowClear [nzPlaceHolder]="'选择 监控点(输入名称搜索)'"
                        <div nz-form-control class="flex-1">
                            <nz-select name="device" style="width: 100%;" [(ngModel)]="device" nzAllowClear [nzPlaceHolder]="'先选择 监控点(输入名称搜索)'"
                            nzShowSearch (nzSearchChange)="devicesChange($event)" [nzNotFoundContent]="'无法找到'">
                            <nz-option *ngFor="let option of devices" [nzLabel]="option.name" [nzValue]="option">
                                <nz-option *ngFor="let option of deviceOptions" [nzLabel]="option.name" [nzValue]="option">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
        </div>
        <div nz-row [nzGutter]="16">
            <div nz-col nzMd="6" nzSm="12" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col>
                        <label>时间单位</label>
                    </div>
                    <div nz-form-control nz-col >
                        <nz-select name="_dataTimeUnits" style="width: 100%;" [ngModel]="_dataTimeUnits" (ngModelChange)="setDataTimeUnits($event)" [nzPlaceHolder]="'选择 时间单位'">
                            <nz-option *ngFor="let option of dataTimeUnitsList" [nzLabel]="option.label" [nzValue]="option">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzMd]="{span:6, offset:3}" nzSm="12" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col>
                        <label>具体时间</label>
                    </div>
                    <div nz-form-control nz-col >
                            <nz-select name="_actualTime" style="width: 100%;" [ngModel]="_actualTime" (ngModelChange)="setActualTime($event)"  [nzPlaceHolder]="'默认取 当前单位平均值'"
                            [nzDisabled]="actualTimeDisabled">
                                    <nz-option *ngFor="let option of actualTimes" [nzLabel]="option" [nzValue]="option">
                                    </nz-option>
                            </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzMd]="{span:6, offset:3}" nzSm="12" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col>
                            <span>&nbsp;</span>
                    </div>
                    <div nz-form-control nz-col >                  
                        <button nz-button [nzType]="'primary'"
                        (click) = "search($event)" [disabled]="false" class="mr-sm">
        <div nz-row>
                <div nz-col [nzSpan]="24" class="text-right">
                    <button nz-button [nzType]="'primary'">
                            <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>
            </div>
        </div>      
</nz-card>
</form>
<nz-card [nzBordered]="true">
<div echarts [options]="chartOption" [loading]="chartLoading" class="line-chart" (chartInit)="onChartInit($event)"></div>
</nz-card>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card>
            <nz-table #nzTable [nzScroll]="{ x:5000,y:400 }" [nzDataSource]="grid.data" [nzIsPagination]="false" [nzLoading]="grid.loading">
                <ng-template #nzFixedHeader>
                <thead nz-thead>
                    <tr>
                        <th nz-th [nzWidth]="'80px'" >
                            <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 *ngFor="let row of nzTable.data,index as i">
                        <td  nz-td>
                            <span>{{ gridSensorNames[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[n]|tyepHandle:col:row }}" style="width:100%; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;" *ngSwitchDefault> {{ row[n]|tyepHandle:col:row }} </span>
                                <!-- 要使用管道，无法自动生成 -->
                            </span>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
        </nz-card>
    </div>
</div>

 src/app/routes/analysis/query/query.component.less

File was deleted

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

@@ -1,120 +1,141 @@
import { ExampleService } from '@business/services/util/example.service';
import { MonitorPointService } from '@business/services/http/monitor-point.service';
import { AreacodeService } from '@business/services/http/areacode.service';
import { LineChartCriteria, TimePeriod, Organization, MonitorPoint, DataCondition, Device, PairData } from '@business/entity/data';
import { PageBean, ResultBean, Grid } from '@business/entity/grid';
import { Sensor } from '@business/entity/data';
import { SensorsService } from '@business/services/http/sensors.service';
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { Sensor, Device, DataCondition, MonitorPoint, Organization, LineChartCriteria, PairData } from '@business/entity/data';
import { TimeUnits, AreaRange, ResultCode } 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 { CascaderOption } from 'ng-zorro-antd/src/cascader/nz-cascader.component';
import { environment } from '@env/environment';
import { ExampleService } from '@business/services/util/example.service';
import { DeviceService } from '@business/services/http/device.service';
import { DateService } from '@business/services/util/date.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';
import { NzMessageService } from 'ng-zorro-antd';
import * as $ from 'jquery';

@Component({
    selector: 'app-query',
    templateUrl: './query.component.html',
    styleUrls: ['./query.component.less']
  templateUrl: './query.component.html'
})
export class QueryComponent implements OnInit {
    public sensorList: Sensor[];
    public timeUnits: { label: string, value: TimeUnits }[] = [];
    public lineChartCriteria: LineChartCriteria = { sensorKey: 'e1', timePeriod: { startTime: null, endTime: null }, dataConditions: [] };
    _areas: { label: any, value: any };
    _monitorPoint: MonitorPoint;
    _device: Device;
    _dataTimeUnits: { label: string, value: TimeUnits } = { label: '日', value: TimeUnits.DAY };
    _actualTime: number;
    actualTimes: number[];
    public _timePeriodUnitValue: TimeUnits = TimeUnits.DAY; // 横坐标时间单位
    dataTimeUnitsList: { label: string, value: TimeUnits }[] = [];
    public monitorPoints: MonitorPoint[];
    public devices: Device[];
    public expandForm: boolean; // 搜索区 展开控制
    // public sensors: any[] = [];
    public sensorOptions: any[] = [];    
    /**
     * 数据类型，下拉列表数据
     * 注意，年度类型，对应查询数据单位为月，以此类推
     * @memberof QueryComponent
     */
    public timeUnitOptions = [
        {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];
    public actualTime: Date = new Date();
    public actualYearOptions: number [];
    public isCollapse = false;
    // 显示使用
    public _areas: { label: any, value: any[] };
    public  grid: Grid<any> = new Grid();
    public gridSensorNames: string[] = [];
     @ViewChild(NzTreeComponent)  private tree: NzTreeComponent;
     private _timeType: {showTime: boolean|{[key: string]: Function|boolean}, mode:  'month' | 'day', dateFormat: string  } = {showTime: false, mode: 'day', dateFormat: 'YYYY-MM-DD'};
     // 用key-value方式,暂存监测项目
     private _sensors: {[key: string]: string} = {};
     private _sensorNames: string;     
     get sensorNames(): string {
         return this._sensorNames;
     }
     public toggleCollapse() {
         this.isCollapse = !this.isCollapse;
     }
     public deviceOptions: Device[] = [];
     public dataCondition: DataCondition = {areaRangeId: 320583, areaRange: AreaRange.AREA };

    dataConditionTemp: DataCondition = { timeUnits: TimeUnits.DAY, actualTime: null };
    get lineChartSensorName(): String {
        return !!this.sensorList ? this.sensorList.find(sensor => sensor.sensorKey === this.lineChartCriteria.sensorKey).name : null;
    }
    public set timePeriodUnitValue(value: TimeUnits) {
        this._timePeriodUnitValue = value;
        this.lineChartCriteria.timePeriod.timeUnits = value;
        switch (value) {
            // YYYY-MM-DD HH:mm:ss
            case TimeUnits.MONTH:
                this.timeType.dateFormat = 'YYYY-MM';
                this.timeType.mode = 'month';                
                this.timeType.timePickerOption = null;
                break;
            case TimeUnits.DAY:
                this.timeType.dateFormat = 'YYYY-MM-DD';
                this.timeType.mode = 'day';
                this.timeType.timePickerOption = null;
                break;
            case TimeUnits.HOUR:
                this.timeType.dateFormat = 'YYYY-MM-DD HH 时';
                this.timeType.mode = 'day';
                this.timeType.timePickerOption = true;
                break;
            case TimeUnits.MINUTE:
                this.timeType.dateFormat = 'YYYY-MM-DD HH:mm';
                this.timeType.mode = 'day';
                this.timeType.timePickerOption = true;
                break;
        }
        const index = this.timeUnits.findIndex(item => {
            return item.value === value;
        });
        // 为了保持顺序 按以下操作
        this.dataTimeUnitsList = this.timeUnits;
        const length = this.timeUnits.length;
        const end = index < length - 1 ? index + 2 : length - 1;
        this._dataTimeUnits =  this.timeUnits.find( item => item.value === value);
        setTimeout(() => {
            this.dataTimeUnitsList = null;            
        }, 1);
        setTimeout(() => {
            this.dataTimeUnitsList = this.timeUnits.slice( index, end );            
        }, 1);
     public monitorPointOptions: MonitorPoint[] = [];
        
     get actualYear(): number {
         return this.actualTime.getFullYear();
    }
    public timeType: { dateFormat?: string, mode?: 'month' | 'day', timePickerOption?: boolean }
        = { dateFormat: 'YYYY-MM-DD', mode: 'day', timePickerOption: null };
    get timePeriodUnitName(): String {
        return this.timeUnits.find(item => item.value === this._timePeriodUnitValue).label;
     set actualYear(year) { 
         this.actualTime.setFullYear(Number(year));
     }
     monitorPointsChange(text?: string) {
        const pageBean: PageBean = { pageIndex: 0, pageSize: 20 };
        const example = new ExampleService();
        let areaName = '';
        switch (this.dataCondition.areaRange) {
            case AreaRange.PROVINCE:
                areaName = 'provinceCode'; break;
            case AreaRange.CITY:
                areaName = 'cityCode'; break;
            case AreaRange.AREA:
                areaName = 'areaCode'; break;
        }
        if (!!text) {
            example.or().andLike({ name: 'name', value: '%' + text + '%' })
                .andEqualTo({ name: areaName, value: this.dataCondition.areaRangeId });
        } else {
            example.or()
                .andEqualTo({ name: areaName, value: this.dataCondition.areaRangeId });
        }
        this.monitorPointService.getPageByExample(pageBean, example).subscribe(
            (res: PageBean) => {
                if (!!res && !!res.data) {
                    this.monitorPointOptions = res.data;
                }
            }
        );
    }
     devicesChange(text?: string) {
        if (!!this.monitorPoint) {
            const example = new ExampleService();
            if (!!text) {
                example.or().andEqualTo({ name: 'monitorPointId', value: this.monitorPoint.id })
                .andLike({name: 'text', value: text});
            }else {
                example.or().andEqualTo({ name: 'monitorPointId', value: this.monitorPoint.id });
            }
            this.deviceService.getPageByExample(null, example).subscribe(
                (res: PageBean) => {
                    if (!!res && !!res.data) {
                        this.deviceOptions = res.data;
                    }
                }
            );
        } else {
            this.deviceOptions = [];
        }
    }
    constructor(
        private sensorsService: SensorsService,
        private areacodeService: AreacodeService,
        private http: _HttpClient,
        private monitorPointService: MonitorPointService,
    private sensorsService: SensorsService,
        private deviceService: DeviceService,
        private dateService: DateService,
        private msg: NzMessageService
    ) {
    private areacodeService: AreacodeService,
    private monitorPointService: MonitorPointService,
    private msg: NzMessageService,
    ) { }    
    ngOnInit() {
        this.initPage();
        $('.ant-table-body').on(
            'click', 
            function() {
                alert();
                console.log( $('.ant-table-body').scrollLeft());
    }

        );
    }
    private initPage() {
        this.sensorsService.getPagingList(null, null).subscribe(
            (res: PageBean) => {
                this.sensorList = res.data;
                this.sensorOptions.push({id: -1, name: '全部', isExpanded: true, children: res.data});
            }
        );
        this.timeUnits.push(
            { label: '年', value: TimeUnits.YEAR },
            { label: '月', value: TimeUnits.MONTH },
            { label: '日', value: TimeUnits.DAY },
            { label: '时', value: TimeUnits.HOUR },
            { label: '分', value: TimeUnits.MINUTE }
        );
        this.dataTimeUnitsList = this.timeUnits.slice(2, 4);
        this._dataTimeUnits = this.dataTimeUnitsList[0];
        const now = new Date();
        this.lineChartCriteria.timePeriod.timeUnits = TimeUnits.DAY;
        this.lineChartCriteria.timePeriod.startTime = now;
        this.lineChartCriteria.timePeriod.endTime = new Date(now.getTime());
        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(
            (res: ResultBean<Organization>) => {
@@ -128,257 +149,183 @@
                        ).join('/');
                        if (areaNames.areaName != null) {
                            this._areas.value = org.areaCode;
                            this.dataConditionTemp.areaRange = AreaRange.AREA;
                            this.dataConditionTemp.areaRangeId = org.areaCode;
                                    this.dataCondition.areaRange = AreaRange.AREA;
                                    this.dataCondition.areaRangeId = org.areaCode;
                        } else if (areaNames.cityName != null) {
                            this._areas.value = org.cityCode;
                            this.dataConditionTemp.areaRange = AreaRange.CITY;
                            this.dataConditionTemp.areaRangeId = org.cityCode;
                                    this.dataCondition.areaRange = AreaRange.CITY;
                                    this.dataCondition.areaRangeId = org.cityCode;
                        } else {
                            this._areas.value = org.provinceCode;
                            this.dataConditionTemp.areaRange = AreaRange.PROVINCE;
                            this.dataConditionTemp.areaRangeId = org.provinceCode;
                                    this.dataCondition.areaRange = AreaRange.PROVINCE;
                                    this.dataCondition.areaRangeId = org.provinceCode;
                        }
                    } else {
                        this._areas = { label: '江苏省/苏州市/昆山市', value: 320583 };
                        this.dataConditionTemp.areaRange = AreaRange.AREA;
                        this.dataConditionTemp.areaRangeId = 320583;
                                this._areas = { label: '江苏省/苏州市/昆山市', value: [ 320000, 320500, 320583]};
                                this.dataCondition.areaRange = AreaRange.AREA;
                                this.dataCondition.areaRangeId = 320583;
                    }
                }
            }
        );
        // 监控点初始化
        this.monitorPointsChange(null);
    }
    devicesChange(mpId) {
        if (!!mpId) {
            const example = new ExampleService();
            example.or().andEqualTo({ name: 'monitorPointId', value: mpId });
            this.deviceService.getPageByExample(null, example).subscribe(
                (res: PageBean) => {
                    if (!!res && !!res.data) {
                        this.devices = res.data;
                    }
                }
            );
        } else {
            this.devices = null;
        }
    }
    monitorPointsChange(text) {
        const pageBean: PageBean = { pageIndex: 0, pageSize: 20 };
        const example = new ExampleService();
        let areaName = '';
        switch (this.dataConditionTemp.areaRange) {
            case AreaRange.PROVINCE:
                areaName = 'provinceCode'; break;
            case AreaRange.CITY:
                areaName = 'cityCode'; break;
            case AreaRange.AREA:
                areaName = 'areaCode'; break;
        }
        if (!!text) {
            example.or().andLike({ name: 'name', value: '%' + text + '%' })
                .andEqualTo({ name: areaName, value: this.dataConditionTemp.areaRangeId });
        } else {
            example.or()
                .andEqualTo({ name: areaName, value: this.dataConditionTemp.areaRangeId });
        }
        this.monitorPointService.getPageByExample(pageBean, example).subscribe(
            (res: PageBean) => {
                if (!!res && !!res.data) {
                    this.monitorPoints = res.data;
                            this.monitorPointsChange();
                }
            }
        );
    }
    ngOnInit() {
        this.initPage();
    // 第一步，省市区 赋值
    public setAreaCodes(codes: string[]) {
        this._areas.value = codes;
        if (!!codes && !!codes.length) {
            const n = codes.length;
            if (this.dataCondition.areaRangeId !== Number(codes[n - 1])) {
                this.dataCondition.areaRangeId = Number(codes[n - 1]);
                let changeMonitorPoint = false;
                switch (n) {
                    case 1:
                        this.dataCondition.areaRange = AreaRange.PROVINCE;
                        if (!this.monitorPoint || this.monitorPoint.provinceCode !== this.dataCondition.areaRangeId) {
                            changeMonitorPoint = true;
    }
    get _isSameDay() {
        return this.lineChartCriteria.timePeriod.startTime && this.lineChartCriteria.timePeriod.endTime && moment(this.lineChartCriteria.timePeriod.startTime).isSame(this.lineChartCriteria.timePeriod.endTime, 'day');
                        break;
                    case 2:
                        this.dataCondition.areaRange = AreaRange.CITY;
                        if (!this.monitorPoint || this.monitorPoint.cityCode !== this.dataCondition.areaRangeId) {
                            changeMonitorPoint = true;
    }
    get _startShowTime() {
        return this.timeType.timePickerOption ?
            {
                nzHideDisabledOptions: true,
                nzDisabledHours: () => {
                    const endTime = this.lineChartCriteria.timePeriod.endTime;
                    const hours = this.newArray(50);
                    return this._isSameDay && !!endTime ? hours.slice(endTime.getHours() + 1, 24) : [];
                },
                nzDisabledMinutes: (h) => {
                    if (this._timePeriodUnitValue === TimeUnits.MINUTE) {
                        const endTime = this.lineChartCriteria.timePeriod.endTime;
                        if (this._isSameDay && h === endTime.getHours()) {
                            const minutes = this.newArray(122);
                            return minutes.slice(endTime.getMinutes() + 1, 60);
                        break;
                    case 3:
                        this.dataCondition.areaRange = AreaRange.AREA;
                        if (!this.monitorPoint || this.monitorPoint.areaCode !== this.dataCondition.areaRangeId) {
                            changeMonitorPoint = true;
                        }
                        break;
                }
                if ( this.actualYearOptions.length === 0 || changeMonitorPoint) {
                    this.monitorPointsChange();
                    this.monitorPoint = null;
                }
            }          
        }
    }
     // 第二步 设置 监控点
     public _monitorPoint: MonitorPoint;
     get monitorPoint(): MonitorPoint {
         return this._monitorPoint;
     }
     set monitorPoint(value) {
        if (!value || value !== this._monitorPoint ) {
            this._monitorPoint = value;
            if (!!value) {
                this.dataCondition.areaRangeId = value.id;
                this.dataCondition.areaRange = AreaRange.MONITORPOINT;                
                // 清空设备下拉选项
                this._device = null;
                this.devicesChange();
                        } else {
                            return [];
                // 为null 设置 上一个层级
                this.setAreaCodes(this._areas.value);
                this._device = null;
                this.deviceOptions = [];
                        }
        }    
     }
    // 第三步 设置 监控点
    public _device: Device;
    set device(val: Device) {
        this._device = val;
        if (!!val) {
           this.dataCondition.areaRange = AreaRange.DEVICE;
           this.dataCondition.areaRangeId = val.id;
                    } else {
                        return this.newArray(60).slice(1);
                    }

                },
                nzDisabledSeconds: () => {
                    return this.newArray(60).slice(1);
                }
            } : false;
    }
    get _endShowTime() {
        return this.timeType.timePickerOption ?
            {
                nzHideDisabledOptions: true,
                nzDisabledHours: () => {
                    const startTime = this.lineChartCriteria.timePeriod.startTime;
                    return this._isSameDay && !!startTime ? this.newArray(startTime.getHours()) : [];
                },
                nzDisabledMinutes: (h) => {
                    if (this._timePeriodUnitValue === TimeUnits.MINUTE) {
                        const startTime = this.lineChartCriteria.timePeriod.startTime;
                        if (this._isSameDay && h === startTime.getHours()) {
                            return this.newArray(startTime.getMinutes());
                        } else {
                            return [];
                        }

                    } else {
                        return this.newArray(60).slice(1);
                    }
                },
                nzDisabledSeconds: () => {
                    return this.newArray(60).slice(1);
                }
            } : false;
    }
    newArray = (len) => {
        const result = [];
        for (let i = 0; i < len; i++) {
            result.push(i);
        }
        return result;
    }
    newArray2 = (start, len) => {
        const result = [];
        for (let i = start; i <= len; i++) {
            result.push(i);
        }
        return result;
    }
    _disabledStartDate = (startValue: Date) => {
        if (!startValue || !this.lineChartCriteria.timePeriod.endTime) {
            return false;
        }
        let format = this.timeType.dateFormat;
        // 单位为时，开始日期中 日默认时间设置为 00.00.00
        if (format.indexOf('H', 11)) {
            format = format.replace(/HH.*/, '');
        }
        const _startValue = moment(moment(startValue).format(format), format);
        return _startValue.valueOf() > this.lineChartCriteria.timePeriod.endTime.getTime();
    }
    _disabledEndDate = (endValue: Date) => {
        if (!endValue || !this.lineChartCriteria.timePeriod.startTime) {
            return false;
        }
        const _endValue: Date = new Date(endValue.getTime());
        _endValue.setHours(23);
        _endValue.setMinutes(59);
        _endValue.setSeconds(59);
        return _endValue.getTime() < this.lineChartCriteria.timePeriod.startTime.getTime();
    }
    _timeChange = (value, type?: 'start'|'end') => {
        const startTime = this.lineChartCriteria.timePeriod.startTime;
        const endTime = this.lineChartCriteria.timePeriod.endTime;     
        
        if (type === 'start') {           
            this.lineChartCriteria.timePeriod.startTime = value;
            !!endTime ? '' : this.lineChartCriteria.timePeriod.endTime = value;
        } else {
            this.lineChartCriteria.timePeriod.endTime = value;
            !!startTime ? '' : this.lineChartCriteria.timePeriod.startTime === value;
           // 如果为null 当前区域级别为监控点
           this.monitorPoint = this._monitorPoint;
        }

    }
    private getPeriodDate(value: Date , type?: 'start'|'end' ): Date {
        let month = 0;
        let day = 1;
        let hour = 0;
        let minute = 0;
        let second = 0; 
        let millisecond = 0;
        if ('end' === type) {
            month = 11;
            day = 31;
            hour = 23;
            minute = 59;
            second = 59;
            millisecond = 999;
    get device(): Device {
        return this._device;
        }
        const mo = moment(value);
        switch ( this.lineChartCriteria.timePeriod.timeUnits ) {
            case TimeUnits.YEAR:
            mo.month(month).date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
   

    /**
     * 获取 传感器名称
     * 
     * @readonly
     * @type {string}
     * @memberof QueryComponent
     */  
    public onSensorSelect(event): void {
        const data = event.node.data;
        if (data.id === -1 && data.halfChecked === false) {
            if (!!data.checked) {
                this.sensorOptions[0].children.forEach(
                    sensor => {
                        this._sensors [sensor.id] = sensor.sensorKey;
                    }
                );
            } else {
                this._sensors = {};
            }
        }else {
             if (!!data.checked) {
                this._sensors [data.id] = data.sensorKey;
             }else {
                delete this._sensors[data.id];
             }
        }
        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 + ',';
                }
            }
        );
    }
    public setTimeUnit(val: {label: string, value: TimeUnits} ) {
        switch (val.value) {
            // YYYY-MM-DD HH:mm:ss
            case TimeUnits.MONTH:
            mo.date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
            this._timeType.dateFormat = 'YYYY';
                // this._timeType.dateFormat = 'YYYY-MM';
                // this._timeType.mode = 'month';                
                // this._timeType.endShowTime = null;
                break;
            case TimeUnits.DAY:
            mo.hour(hour).minute(minute).second(second).millisecond(millisecond); break;
                this._timeType.dateFormat = 'YYYY-MM';
                this._timeType.mode = 'month';
                this._timeType.showTime = false;
                break;
            case TimeUnits.HOUR:
            mo.minute(minute).second(second).millisecond(millisecond); break;
                this._timeType.dateFormat = 'YYYY-MM-DD';
                this._timeType.mode = 'day';
                this._timeType.showTime = false;
                break;
            case TimeUnits.MINUTE:
            mo.second(second).millisecond(millisecond); break;
                this._timeType.dateFormat = 'YYYY-MM-DD HH';
                this._timeType.mode = 'day';
                this._timeType.showTime = {
                    nzHideDisabledOptions: true,
                    nzDisabledHours: () => {
                        return [];
                    },
                    nzDisabledMinutes: (h) => {
                        return this.newArray(60).slice(1).map(
                            item => Number(item)
                        );
                    },
                    nzDisabledSeconds: () => {
                        return this.newArray(60).slice(1).map(
                            item => Number(item)
                        );
        }
        return mo.toDate();
                };
                break;
    }
    get startYear(): number {
        !!this.lineChartCriteria.timePeriod.startTime ?
            '' : this.lineChartCriteria.timePeriod.startTime = new Date();
        return this.lineChartCriteria.timePeriod.startTime.getFullYear();
    }
    set startYear(value) {
        !!this.lineChartCriteria.timePeriod.startTime ?
            '' : this.lineChartCriteria.timePeriod.startTime = new Date();
        if (this.startYear === this.endYear && value < this.startYear) {
            // 异步调用防止循环          
            setTimeout(() => {
                this.endYear += 1;
            }, 1);
        }
        this.lineChartCriteria.timePeriod.startTime.setFullYear(value);
    }
    get minStartYear(): number {
        const now = new Date();
        return now.getFullYear() - 50;
    }
    get maxStartYear(): number {
        return this.endYear;
    }
    get endYear(): number {
        !!this.lineChartCriteria.timePeriod.endTime ?
            '' : this.lineChartCriteria.timePeriod.endTime = new Date();
        return this.lineChartCriteria.timePeriod.endTime.getFullYear();
    }

    set endYear(value) {
        !!this.lineChartCriteria.timePeriod.endTime ?
            '' : this.lineChartCriteria.timePeriod.endTime = new Date();
        if (this.startYear === this.endYear && value > this.startYear) {
            // 异步调用防止循环        
            setTimeout(() => {
                this.startYear -= 1;
            }, 1);
        }
        this.lineChartCriteria.timePeriod.endTime.setFullYear(value);
    }
    get minEndYear(): number {
        return this.startYear;
    }
    get maxEndYear(): number {
        const now = new Date();
        return now.getFullYear() + 50;
    }
    areaLazyLoad(event: { option: CascaderOption, index: number, resolve: (children: CascaderOption[]) => void, reject: () => void }) {
    public areaLazyLoad(event: { option: CascaderOption, index: number, resolve: (children: CascaderOption[]) => void, reject: () => void }) {
        const index = event['index'];
        const option = event.option;
        switch (index) {
@@ -402,188 +349,124 @@
                ); break;
        }
    }
    setAreaCodes(codes: string[]) {
        if (!!codes && !!codes.length) {
            const n = codes.length;
            if (this.dataConditionTemp.areaRangeId !== Number(codes[n - 1])) {
                this.dataConditionTemp.areaRangeId = Number(codes[n - 1]);
                switch (n) {
                    case 1:
                        this.dataConditionTemp.areaRange = AreaRange.PROVINCE;
                        break;
                    case 2:
                        this.dataConditionTemp.areaRange = AreaRange.CITY;
                        break;
                    case 3:
                        this.dataConditionTemp.areaRange = AreaRange.AREA;
                        break;
   private newArray = (startOrLen: number, len?: number, prefix?: string, suffix?: string) => {
        const result = [];
        const s = !!len ? startOrLen : 0;
        len = !!len ? len : startOrLen;
        suffix = !!suffix ? suffix : '';
        prefix = !!prefix ? prefix :  '';
        for (let i = s; result.length < len; i++) {
            result.push(prefix + i + suffix);
                }
                this.monitorPointsChange(null);
                this._monitorPoint = null;
                this.devicesChange(null);
                this._device = null;
        return result;
            }
            this._areas.value = codes;
        }
    }
    // 下拉框设置监控点事件
    setMonitorPoint(value: MonitorPoint) {
        if (!!value) {
            this.dataConditionTemp.areaRangeId = value.id;
            this.dataConditionTemp.areaRange = AreaRange.MONITORPOINT;
        } else {
            this.setAreaCodes(this._areas.value);
        }
        if (value !== this._monitorPoint) {
            this._device = null;
            this.devicesChange(!!value ? value.id : null);
        }
        this._monitorPoint = value;
    }
    // 设置设备的值
    setDevice(value: Device) {
        if (!!value) {
            this._device = value;
            this.dataConditionTemp.areaRangeId = value.id;
            this.dataConditionTemp.areaRange = AreaRange.DEVICE;
        } else {
            this.setMonitorPoint(this._monitorPoint);
        }
    }
    setDataTimeUnits(item) {
        this._dataTimeUnits = item;
        this.dataConditionTemp.timeUnits = item.value;
        if (!this.actualTimeDisabled) {
        this._actualTime = 1;   
        switch (item.value) {
           case TimeUnits.MONTH:          
           this.actualTimes = this.newArray2(1, 12); break;
           case TimeUnits.DAY:
           this.actualTimes = this.newArray2(1, 31); break;
           case TimeUnits.HOUR:
           this.actualTimes = this.newArray2(0, 23); break;
           case TimeUnits.MINUTE:
           this.actualTimes = this.newArray2(1, 59); break;
        }
        }
    }
    // 实际时间是否可用 actualTimeDisabled
    get actualTimeDisabled() {
      if (!!this.dataTimeUnitsList && this._dataTimeUnits === this.dataTimeUnitsList[0]) {
            this.setActualTime(null);
            // 实际时间下拉选项数组
            this.actualTimes = null;
         }
         return  !!this.dataTimeUnitsList && this._dataTimeUnits === this.dataTimeUnitsList[0];
    }

    setActualTime(val) {
         this.dataConditionTemp.actualTime = val;
         this._actualTime = val;
    }
    search(event) {        
       // 刷新时间格式
       const startTime = this.lineChartCriteria.timePeriod.startTime;
       const endTime = this.lineChartCriteria.timePeriod.endTime;
       this.lineChartCriteria.timePeriod.startTime = this.getPeriodDate(startTime);
       this.lineChartCriteria.timePeriod.endTime = this.getPeriodDate(endTime, 'end');
       this.lineChartCriteria.dataConditions.pop();
       this.lineChartCriteria.dataConditions.push(this.dataConditionTemp);
       this.reloadChart();
    }
      private reloadChart(): void {
        const countTimeRange = this.dateService.countTimeRange(this.lineChartCriteria.timePeriod);
        let timeList: string[];
        const maxTimeRange = 5000;
        if (countTimeRange < maxTimeRange ) {
            timeList = this.dateService.makeTimeList(this.lineChartCriteria.timePeriod);
        } else {
            this.msg.error('时间跨度不能超过' + maxTimeRange + '，当前时间跨度为' + countTimeRange);
    public loadGrid(): void {        
        // 数据检查
        const sensors = Object.values(this._sensors);
        if ( sensors.length === 0 ) {
            this.msg.error(' 监测项目 不能为空');
            return ;
        }
    
         if (!!this.echartsIntance) {
             this.chartOption = null;
             this.echartsIntance.clear();
       this.grid.loading = true;
       this.grid.data = [];
       this.gridSensorNames = [];
       const start: Date = this.getPeriodDate(this.actualTime , 'start');
       const end: Date = this.getPeriodDate(this.actualTime , 'end');
       this.dataCondition['actualTime'] = null;
       this.dataCondition['timeUnits'] = this.timeUnit.value;
       const dataConditions = [this.dataCondition];
       const lineChartCriteria: LineChartCriteria = {
        sensorKeys: sensors,
        timePeriod: {startTime: start , endTime: end, timeUnits: this.timeUnit.value },
        dataConditions: dataConditions
      };
      const timePeriod = lineChartCriteria.timePeriod;
      switch (timePeriod.timeUnits) {
          case TimeUnits.MONTH:
          this.grid.columns = this.newArray(1, 12, null, '月').map(
               item => {
                   return {text: item};
         }
         this.initOpton({data: timeList});
         this.chartLoading = true;
         this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', this.lineChartCriteria).subscribe(
            (res: ResultBean<Array<Array<PairData>>>) => {
          ); break;
          case TimeUnits.DAY:
          const mo = moment(lineChartCriteria.timePeriod.startTime);
          const days = mo.endOf('month').date();
          this.grid.columns = this.newArray(1, days, null, '日').map(
               item => {
                   return {text: item};
               }
          ); break;
          case TimeUnits.HOUR:
          this.grid.columns = this.newArray(0, 24, null, '时').map(
            item => {
                return {text: item};
            }
          ); break;
          case TimeUnits.MINUTE:
          this.grid.columns = this.newArray(0, 60, null, '分').map(
            item => {
                return {text: item};
            }
          ); break;
      }      
      this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', lineChartCriteria).subscribe(
        (res: ResultBean<{[key: string]: Array<Array<PairData>>}>) => {
               if (res.code === 1) {
                  const series = [];
                  const dataList =  res.data;
                  if (!!dataList && !!dataList.length) {
                    dataList.forEach(
                         data => {
                            const outData =  data.map( item => {
                                return item.value;
              const data =  res.data;
              if (!!data) {
                const sensorKeys = Object.keys(data);
                sensorKeys.forEach(
                    key => {
                       const sensor = (<Array<Sensor>>this.sensorOptions[0].children).
                       find(item => {
                           return item.sensorKey === key;
                            });
                            series.push({type: 'line', data: outData});
                       this.gridSensorNames.push(sensor.name);
                       const sensorData = data[key][0].map(
                           pair => {
                                return !!pair.value ? pair.value : '-';
                        }
                    );
                    this.echartsIntance.setOption({
                        series: series
                    });
                    this.chartLoading = false;
                       this.grid.data.push(sensorData);
                  }
               );
              }
              this.grid.loading = false;
               }
            }
       );
      }
      private reloadGrid() {
        const timePeriod = this.lineChartCriteria.timePeriod;
    private getPeriodDate(value: Date , type?: 'start'|'end' ): Date {
        let month = 0;
        let day = 1;
        let hour = 0;
        let minute = 0;
        let second = 0; 
        let millisecond = 0;
        if ('end' === type) {
            month = 11;
            day = 31;
            hour = 23;
            minute = 59;
            second = 59;
            millisecond = 999;
      }
      private initOpton(opt: {data: string[]}) {
        const mo = moment(value);
        switch ( this.timeUnit.value ) {
            case TimeUnits.MONTH:
            mo.month(month).date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
            case TimeUnits.DAY:
            mo.date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
            case TimeUnits.HOUR:
            mo.hour(hour).minute(minute).second(second).millisecond(millisecond); break;
            case TimeUnits.MINUTE:
            mo.minute(minute).second(second).millisecond(millisecond); break;
            // case TimeUnits.MINUTE:
            // mo.second(second).millisecond(millisecond); break;
        }
        return mo.toDate();
    }
}
          
          this.chartOption = {
            title: {
                text: ''
            },
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: []
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : opt.data
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
            ]
        };
      }
      chartLoading: boolean;
      chartOption;
      echartsIntance;
      grid: Grid<any> = new Grid();
      onChartInit(ec) {
        this.echartsIntance = ec;
      }
}


 src/app/routes/passport/login/login.component.ts

 src/app/routes/report/report.component.html

@@ -26,14 +26,14 @@
                </div>

                

                <div class="content">

                    <!-- <div *ngFor="let item of items;let i = index">

                    <div *ngFor="let item of items;let i = index">

                        <div class="left">

                            <h2>{{item.monitorPointName}}</h2>

                            <p class="text1">公司地址：{{item.monitorPointAddress}}</p>

                            <p class="text1">该公司拥有设备{{item.deviceCount}}台</p>

                            <div class="clear_fix"></div>

                        </div> 

                    </div> -->

                    </div>

                    <div class="clear_fix"></div>

                </div>

            </div>


 yarn.lock

@@ -2250,11 +2250,11 @@
  dependencies:
    jsbn "~0.1.0"

echarts@^3.8.5:
  version "3.8.5"
  resolved "https://registry.yarnpkg.com/echarts/-/echarts-3.8.5.tgz#58e4a51d2743c6fb75257b0dc0a9cf9f5378ac0e"
echarts@^4.0.4:
  version "4.0.4"
  resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.0.4.tgz#36aa8a47d33543d3dfe6a7bc1228ddc3a1e41157"
  dependencies:
    zrender "3.7.4"
    zrender "4.0.3"

ee-first@1.1.1:
  version "1.1.1"
@@ -8448,6 +8448,6 @@
  version "0.8.19"
  resolved "http://registry.npm.taobao.org/zone.js/download/zone.js-0.8.19.tgz#a4b522cd9e8b7b616a638c297d720d4c7f292f71"

zrender@3.7.4:
  version "3.7.4"
  resolved "https://registry.yarnpkg.com/zrender/-/zrender-3.7.4.tgz#f847d53948481ef6d42906d1ea9aeec7acbefdf2"
zrender@4.0.3:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.0.3.tgz#801ef001101750a61857f84e64c4d5fb3c88cca7"