报表部分功能和token刷新

fengxiang

2018-03-12 43afaa6ad53ca4368fbc6426500f3f71f6f8b765

报表部分功能和token刷新

 .angular-cli.json

@@ -23,7 +23,8 @@
        "scripts": [
            "../node_modules/@antv/g2/dist/g2.min.js",
            "../node_modules/@antv/data-set/dist/data-set.min.js",
            "../node_modules/@antv/g2-plugin-slider/dist/g2-plugin-slider.min.js"
            "../node_modules/@antv/g2-plugin-slider/dist/g2-plugin-slider.min.js",
            "../node_modules/echarts/dist/echarts.min.js"
        ],
        "environmentSource": "environments/environment.ts",
        "environments": {

 package.json

@@ -70,6 +70,7 @@
    "ng2-img-cropper": "^0.9.0",
    "ngx-color-picker": "^5.0.0",
    "ngx-countdown": "^2.0.0",
    "ngx-echarts": "^2.0.2",
    "ngx-tinymce": "^1.0.1",
    "ngx-ueditor": "^1.1.0",
    "rxjs": "^5.5.5",

 src/app/business/business.module.ts

@@ -12,11 +12,11 @@
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/filter';
import { LocalStorageStore } from '@delon/auth';

@NgModule({
  imports: [
    CommonModule,
    
  ]
    CommonModule,    
  ],
})
export class BusinessModule { }

 src/app/business/entity/data.ts

@@ -1,4 +1,3 @@
import { LineChartCriteria } from './data';
import { Column } from '@business/entity/grid';
import { AlarmStyle, TimeUnits, AreaRange } from '@business/enum/types.enum';

@@ -134,18 +133,23 @@
  organizationId: number;
  username: string;
}
export interface TimePeriod {
  startTime: Date; // 开始时间
  endTime: Date; // 结束时间
}
export interface DataCondition {
  timeUnits?: TimeUnits; // 单位
  actualTime?: Date; // 实际时间
  areaRange?: AreaRange; // 区域范围
  areaRangeId?: number; // 区域范围的ID
}


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

export interface TimePeriod {
  endTime?: Date;
  startTime?: Date;
  timeUnits?: TimeUnits;
}

export interface DataCondition {
  actualTime?: number;
  areaRange?: AreaRange;
  areaRangeId?: number;
  timeUnits?: TimeUnits;
}

 src/app/business/entity/token.ts

@@ -1,4 +1,7 @@
export interface Authorization {
    name?: string;
    token: string;
    refreshToken: string;
    refreshToken?: string;
    time?: Date;
    expiredTime?: number;
}

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

@@ -1,7 +1,7 @@
import { _HttpClient } from '@delon/theme';
import { environment } from 'environments/environment';
import { Injectable } from '@angular/core';
import { ResultBean } from '@business/entity/grid';
import { ResultBean, PageBean } from '@business/entity/grid';
import { Observable } from 'rxjs/Observable';
import { ExampleService } from '@business/services/util/example.service';
import { Device } from '@business/entity/data';
@@ -31,4 +31,18 @@
  public save(data: Device): Observable<any> {
    return this.http.post(this.urls.save, data);
  }
  public getPageByExample(page: PageBean, example: ExampleService): Observable<PageBean> {
    let orderByClause = '';
    const _queryParams = !!example ? example.getSqlParam() : '';
    if (!!page) {
       if ( page.getOrderByClause != null && page.getOrderByClause instanceof Function) {
          orderByClause = page.getOrderByClause();
          }
    } else {
          page =  {pageIndex: 0, pageSize: 20};
    }
    const param: PageBean = {pageSize: page.pageSize, pageIndex: page.pageIndex, 
        queryParams: _queryParams, orderByClause: orderByClause};
        return this.http.get(this.urls.list, param);
 }
}

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

@@ -2,23 +2,57 @@
import { HttpClient } from '@angular/common/http';
import { environment } from 'environments/environment';
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { Injectable, Inject } from '@angular/core';
import { UserContext } from '@business/entity/data';
import { error } from 'selenium-webdriver';
import { DA_SERVICE_TOKEN, ITokenService, LocalStorageStore } from '@delon/auth';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class LoginService {
  public authorization: Authorization;

  public authorization: Authorization = {token: null};
  public userContext: UserContext;
  private urls = {
    login: environment.SERVER_BASH_URL + 'auth/login',
    refreshToken: environment.SERVER_BASH_URL + 'auth/token',
    userContext: environment.SERVER_BASH_URL + 'user-context',
  };
  constructor(private http: HttpClient) { }
  constructor(private http: HttpClient,
    @Inject(DA_SERVICE_TOKEN) private tokenService: ITokenService) { 
          // 每2秒检查一次刷新token的时间点
          setInterval(
             () => {
                 if (this.needFreshFromLocal && this.isReachRefreshTime()) {
                        // 记录刷新时间
                        this.setRefreshTime();
                        // 置空needfreshtoken
                        localStorage.setItem('needRefreshToken', 'false');
                        const _refreshToken =  this._refreshToken;                        
                        if (!!_refreshToken) {
                            this.http.get(this.urls.refreshToken, {headers: {'X-Refrsh-Token': 'Bearer ' + _refreshToken}} )
                            .subscribe(
                            res => {
                              if (res['token'] != null) {
                                  this.tokenService.set({'token': res ['token']});
                                  console.log(new Date() + localStorage._token);
                              }
                            }
                          );
                      }
                 }
             }, 2000
          );
    }
  public validate(username: string, password: string): Observable<Authorization> {
      return this.http.post(this.urls.login, {username: username, password: password, mode: 'Web'}).map(
           (res: any) => {
               this.authorization = res;
               const now = new Date();
               // expiredTime,refreshToken,refreshTime 与平台的 token 分开储存
               this.setRefreshTime();
               localStorage.setItem('expiredTime', this.authorization.expiredTime.toString());
               localStorage.setItem('refreshToken', this.authorization.refreshToken);
               return res;
           }
      );
@@ -31,4 +65,30 @@
        }
      );
  }
  get _refreshToken(){
    return !!this.authorization.refreshToken ? this.authorization.refreshToken : this.refreshTokenFromLocal;
  }
  get refreshTokenFromLocal(): string {
      return localStorage.refreshToken;
  }
  get needFreshFromLocal(): boolean {
     return localStorage.needRefreshToken === 'true';
  }
  private setRefreshTime() {
          localStorage.setItem('refreshTime', new Date().getTime().toString());
  }
  private setNeedRefreshToken() {
    localStorage.setItem('needRefreshToken', 'true');
  }
  private isReachRefreshTime(): boolean {
        const expiredTime = Number(localStorage.expiredTime);
        return !!this.refreshTime && !!expiredTime && this.refreshTime + (expiredTime / 2) * 60000 < new Date().getTime();
  }
  get refreshTime(): number  {
    return  Number(localStorage.refreshTime);
  }
  public refreshToken () {
           // 设置需要刷新token
           this.setNeedRefreshToken();
  }
}

 src/app/business/services/http/monitor-point.service.ts

@@ -45,11 +45,10 @@
      } else {
            page =  {pageIndex: 0, pageSize: 20};
      }

      const param: PageBean = {pageSize: page.pageSize, pageIndex: page.pageIndex, 
          queryParams: _queryParams, orderByClause: orderByClause};
          return this.http.get(this.urls.list, param);
      }
   }
public save(data: any): Observable<any> {
      return this.http.post(this.urls.save, data);
}

 src/app/core/net/default.interceptor.ts

@@ -10,6 +10,7 @@
import { NzMessageService } from 'ng-zorro-antd';
import { _HttpClient } from '@delon/theme';
import { environment } from '@env/environment';
import { LoginService } from '@business/services/http/login.service';

/**
 * 默认HTTP拦截器，其注册细节见 `app.module.ts`
@@ -62,7 +63,10 @@

    intercept(req: HttpRequest<any>, next: HttpHandler):
        Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {

        if (!req.headers.get('X-Refrsh-Token')) {
            const loginService = <LoginService>this.injector.get(LoginService);
            loginService.refreshToken();
        }        
        // 统一加上服务端前缀
        let url = req.url;
        if (!url.startsWith('https://') && !url.startsWith('http://')) {

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

@@ -7,6 +7,8 @@
import { QueryComponent } from './query/query.component';
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { DeviceService } from '@business/services/http/device.service';
import { NgxEchartsModule  } from 'ngx-echarts';
const routes: Routes = [
  {
    path: '',
@@ -22,9 +24,10 @@
    PipeModule,
    CommonModule,
    SharedModule,
    NgxEchartsModule,
    RouterModule.forChild(routes)    
  ],
  declarations: [QueryComponent],
  providers: [SensorsService, AreacodeService, MonitorPointService]
  providers: [SensorsService, AreacodeService, MonitorPointService, DeviceService]
})
export class AnalysisModule { }

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

@@ -39,12 +39,15 @@
        </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" [nzDisabledDate]="_disabledStartDate"
                nzShowTime="{{ !!timeType.timePickerOption?timeType.timePickerOption:false }}" [nzMode]="timeType.mode" [nzFormat]="timeType.dateFormat"
            <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"
                nzShowTime="{{ !!timeType.timePickerOption?timeType.timePickerOption:false }}" [nzMode]="timeType.mode" [nzFormat]="timeType.dateFormat"
            <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>
        <ng-template #elseBlock>
@@ -57,77 +60,97 @@
        </ng-template>
    </div>
</nz-card>
<form nz-form  [nzLayout]="'vertical'">
<nz-card [nzBordered]="true" title="数据取样">
     <form>
            <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 nzHasFeedback>
                                            <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 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-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 nzHasFeedback>
                                            <nz-select 
                                              name="_monitorPoint"
                                              style="width: 100%;" (click)="monitorPointChange(null)" 
                                              [ngModel]="_monitorPoint"
                                              nzAllowClear
                                              (ngModelChange)="setMonitorPoint($event)" 
                                              [nzPlaceHolder]="'选择 监控点(输入名称搜索)'"
                                                 nzShowSearch (nzSearchChange)="monitorPointChange($event)" [nzNotFoundContent]="'无法找到'" >
                                              <nz-option *ngFor="let option of monitorPoints" [nzLabel]="option.name" [nzValue]="option.id">
                                              </nz-option>
                                            </nz-select>
                                    </div>
                                    
                            </div>                            
                    <div nz-form-control nz-col >
                        <nz-cascader [class.class123]="true" (nzChange)="setAreaCodes($event)" (nzLoad)="areaLazyLoad($event)" [nzPlaceHolder]="'选择 省/市/区'"
                            [nzAllowClear]="false" [nzChangeOnSelect]="true" [(ngModel)]="_areas" name="_areas">
                        </nz-cascader>
                    </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 nzHasFeedback>
                                          11111111111111111
                                    </div>
                                    
                            </div>                            
                    </div>
                </div>
            </div>
            <div style="margin-top: 20px;" 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 nzHasFeedback>
                                        222222222
                                    </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-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 nzHasFeedback>
                                        2222222222
                                    </div>                                    
                            </div>                            
                    <div nz-form-control nz-col>
                        <nz-select name="_monitorPoint" style="width: 100%;" [ngModel]="_monitorPoint" (ngModelChange)="setMonitorPoint($event)"
                            nzAllowClear [nzPlaceHolder]="'选择 监控点(输入名称搜索)'" nzShowSearch (nzSearchChange)="monitorPointChange($event)"
                            [nzNotFoundContent]="'无法找到'">
                            <nz-option *ngFor="let option of monitorPoints" [nzLabel]="option.name" [nzValue]="option">
                            </nz-option>
                        </nz-select>
                    </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 nzHasFeedback>
                                        2222222222
                                    </div>                                    
                            </div>                            
                    </div>

                </div>
            </div>
     </form>
            <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="_device" style="width: 100%;" [ngModel]="_device" (ngModelChange)="setDevice($event)" nzAllowClear [nzPlaceHolder]="'选择 监控点(输入名称搜索)'"
                            nzShowSearch (nzSearchChange)="deviceChange($event)" [nzNotFoundContent]="'无法找到'">
                            <nz-option *ngFor="let option of devices" [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">
                            <i class="anticon anticon-search"></i>
                            <span>查询</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>      
</nz-card>
</form>
<div echarts [options]="chartOption" class="line-chart" (chartInit)="onChartInit($event)"></div>  

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

@@ -10,6 +10,9 @@
        right: 0;
    }
}
.demo-chart {
    height: 400px;
  }

@media screen and (max-width: 576px) {
    .header-info {

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

@@ -1,8 +1,7 @@
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 { DataCondition } from './../../../business/entity/data';
import { LineChartCriteria, TimePeriod, Organization, MonitorPoint } from '@business/entity/data';
import { LineChartCriteria, TimePeriod, Organization, MonitorPoint, DataCondition, Device } from '@business/entity/data';
import { PageBean, ResultBean } from '@business/entity/grid';
import { Sensor } from '@business/entity/data';
import { SensorsService } from '@business/services/http/sensors.service';
@@ -12,86 +11,114 @@
import * as moment from 'moment';
import { CascaderOption } from 'ng-zorro-antd/src/cascader/nz-cascader.component';
import { environment } from '@env/environment';

import { DeviceService } from '@business/services/http/device.service';
@Component({
  selector: 'app-query',
  templateUrl: './query.component.html',
  styleUrls: [ './query.component.less' ]
    selector: 'app-query',
    templateUrl: './query.component.html',
    styleUrls: ['./query.component.less']
})
export class QueryComponent implements OnInit {
    public sensorList: Sensor[];
    public timeUnits: { label: string, value: TimeUnits, disabled: boolean }[] = [];
    public lineChartCriteria: LineChartCriteria = {sensorKey: 'e1', timePeriod: {startTime: null, endTime: null}, dataConditions: []};
    _areas: {label: any, value: any};
    _monitorPoint;
    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[];

    dataConditionTemp: DataCondition = { timeUnits: TimeUnits.DAY, actualTime: null };
    get lineChartSensorName(): String {
        return !!this.sensorList ? this.sensorList.find( sensor => sensor.sensorKey === this.lineChartCriteria.sensorKey).name : null;
        return !!this.sensorList ? this.sensorList.find(sensor => sensor.sensorKey === this.lineChartCriteria.sensorKey).name : null;
    }
    public _timePeriodUnitValue: TimeUnits = TimeUnits.DAY;
    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;
            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 timeType: {dateFormat?: string, mode?: 'month'|'day', timePickerOption?: boolean}
    = {dateFormat: 'YYYY-MM-DD', mode: 'day', timePickerOption: null};
    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;
        return this.timeUnits.find(item => item.value === this._timePeriodUnitValue).label;
    }
    constructor(
        private sensorsService: SensorsService,
        private areacodeService: AreacodeService,
        private http: _HttpClient,
        private monitorPointService: MonitorPointService,
    ) {        
        private deviceService: DeviceService,
    ) {
    }

    private initPage() {
        this.sensorsService.getPagingList(null, null).subscribe(
            (res: PageBean)  => {
            (res: PageBean) => {
                this.sensorList = res.data;
            }
        );
        this.timeUnits.push(
            {label: '年', value: TimeUnits.YEAR, disabled: false},
            {label: '月', value: TimeUnits.MONTH, disabled: false},
            {label: '日', value: TimeUnits.DAY, disabled: false},
            {label: '时', value: TimeUnits.HOUR, disabled: false},
            {label: '分', value: TimeUnits.MINUTE, disabled: false}
            { 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.http.get(environment.SERVER_BASH_URL + 'organization/get-my-org').subscribe(
           ( res: ResultBean<Organization>) => {
              if (res.code === ResultCode.SUCCESS) {
            (res: ResultBean<Organization>) => {
                if (res.code === ResultCode.SUCCESS) {
                    const org = res.data;
                    if (!!org.areaNames) {
                        const areaNames = org.areaNames;
                        this._areas = {label: null, value: null};
                        this._areas = { label: null, value: null };
                        this._areas.label = Object.values(areaNames).filter(
                            val => !!val
                        ).join('/');
@@ -109,41 +136,58 @@
                            this.dataConditionTemp.areaRangeId = org.provinceCode;
                        }
                    } else {
                        this._areas = {label: '江苏省/苏州市/昆山市', value: 320583};
                        this._areas = { label: '江苏省/苏州市/昆山市', value: 320583 };
                        this.dataConditionTemp.areaRange = AreaRange.AREA;
                        this.dataConditionTemp.areaRangeId = 320583;
                      }                    
              }
           }
                    }
                }
            }
        );
        // 监控点初始化
        this.monitorPointsChange(null);
    }
    monitorPointChange(text) {
        const pageBean: PageBean = {pageIndex: 0, pageSize: 20};
    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;
                areaName = 'provinceCode'; break;
            case AreaRange.CITY:
            areaName = 'cityCode'; break;
                areaName = 'cityCode'; break;
            case AreaRange.AREA:
            areaName = 'areaCode'; break;
                areaName = 'areaCode'; break;
        }
        if (!!text) {
            example.or().andLike({name: 'name', value: '%' + text + '%'})
            .andEqualTo({name: areaName, value: this.dataConditionTemp.areaRangeId});
            example.or().andLike({ name: 'name', value: '%' + text + '%' })
                .andEqualTo({ name: areaName, value: this.dataConditionTemp.areaRangeId });
        } else {
            example.or()
            .andEqualTo({name: areaName, value: this.dataConditionTemp.areaRangeId});
                .andEqualTo({ name: areaName, value: this.dataConditionTemp.areaRangeId });
        }
        this.monitorPointService.getPageByExample(pageBean, example).subscribe(
          (res: PageBean) => {
               if (!!res && !!res.data) {
                   this.monitorPoints = res.data;
               }
          }
       );
       }
            (res: PageBean) => {
                if (!!res && !!res.data) {
                    this.monitorPoints = res.data;
                }
            }
        );
    }
    ngOnInit() {
        this.initPage();
    }
@@ -152,102 +196,144 @@
    }
    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) {
            {
                nzHideDisabledOptions: true,
                nzDisabledHours: () => {
                    const endTime = this.lineChartCriteria.timePeriod.endTime;
                    if (this._isSameDay && h === endTime.getHours()) {
                        const minutes = this.newArray(122);
                        return minutes.slice(endTime.getMinutes() + 1, 60);
                    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);
                        } else {
                            return [];
                        }
                    } else {
                        return [];
                    }                    
                } else {
                        return this.newArray(60).slice(1);
                    }

                },
                nzDisabledSeconds: () => {
                    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) {
            {
                nzHideDisabledOptions: true,
                nzDisabledHours: () => {
                    const startTime = this.lineChartCriteria.timePeriod.startTime;
                    if (this._isSameDay && h === startTime.getHours()) {
                        return this.newArray(startTime.getMinutes());
                    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 [];
                        return this.newArray(60).slice(1);
                    }
                    
                } else {
                },
                nzDisabledSeconds: () => {
                    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);
            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;
            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) => {
    }
    _disabledEndDate = (endValue: Date) => {
        if (!endValue || !this.lineChartCriteria.timePeriod.startTime) {
          return false;
            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 = (type: string) => {      
    }
    _timeChange = (value, type?: 'start'|'end') => {
        const startTime = this.lineChartCriteria.timePeriod.startTime;
        const endTime = this.lineChartCriteria.timePeriod.endTime;
        if (type === 'start') {            
            !!endTime ? '' : this.lineChartCriteria.timePeriod.endTime = startTime;
        const endTime = this.lineChartCriteria.timePeriod.endTime;     
        
        if (type === 'start') {           
            this.lineChartCriteria.timePeriod.startTime = value;
            !!endTime ? '' : this.lineChartCriteria.timePeriod.endTime = value;
        } else {
            !!startTime ? '' : this.lineChartCriteria.timePeriod.startTime === endTime;
            this.lineChartCriteria.timePeriod.endTime = value;
            !!startTime ? '' : this.lineChartCriteria.timePeriod.startTime === value;
        }
      }
      get startYear(): number {
          !!this.lineChartCriteria.timePeriod.startTime ?
          '' : this.lineChartCriteria.timePeriod.startTime = new Date();
          return this.lineChartCriteria.timePeriod.startTime.getFullYear();
      }
      set startYear(value) {

    }
    private getPeriodDate(value: Date , type?: 'start'|'end' ): Date {
        debugger;
        let month = 0 ;
        let day = 0;
        let hour = 0;
        let minute = 0;
        let second = 0; 
        if ('end' === type) {
            month = 12;
            day = 31;
            hour = 23;
            minute = 59;
            second = 59;
        }
        const mo = moment(value);
        switch ( this.lineChartCriteria.timePeriod.timeUnits ) {
            case TimeUnits.YEAR:
            mo.month(month).day(day).hour(hour).minute(minute).second(second); break;
            case TimeUnits.MONTH:
            mo.day(day).hour(hour).minute(minute).second(second); break;
            case TimeUnits.DAY:
            mo.hour(hour).minute(minute).second(second); break;
            case TimeUnits.HOUR:
            mo.minute(minute).second(second); break;
            case TimeUnits.MINUTE:
            mo.second(second); break;
        }
        return mo.toDate();
    }
    get startYear(): number {
        !!this.lineChartCriteria.timePeriod.startTime ?
        '' : this.lineChartCriteria.timePeriod.startTime = new Date();
            '' : 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(() => {
@@ -255,86 +341,155 @@
            }, 1);
        }
        this.lineChartCriteria.timePeriod.startTime.setFullYear(value);
      }
      get minStartYear(): number {
    }
    get minStartYear(): number {
        const now = new Date();
        return now.getFullYear() - 50;
      }
      get maxStartYear(): number {
    }
    get maxStartYear(): number {
        return this.endYear;
      }
      get endYear(): number {         
    }
    get endYear(): number {
        !!this.lineChartCriteria.timePeriod.endTime ?
        '' : this.lineChartCriteria.timePeriod.endTime = new Date();
            '' : this.lineChartCriteria.timePeriod.endTime = new Date();
        return this.lineChartCriteria.timePeriod.endTime.getFullYear();
     }
     
     set endYear(value) {
    }

    set endYear(value) {
        !!this.lineChartCriteria.timePeriod.endTime ?
        '' : this.lineChartCriteria.timePeriod.endTime = new Date();
        if (this.startYear === this.endYear && value > this.startYear) {    
            '' : 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 {
    }
    get minEndYear(): number {
        return this.startYear;
      }
      get maxEndYear(): number {
    }
    get maxEndYear(): number {
        const now = new Date();
        return now.getFullYear() + 50;
      }
      dataConditionTemp: DataCondition = {};
      areaLazyLoad(event: { option: CascaderOption, index: number, resolve: (children: CascaderOption[]) => void, reject: () => void }) {
    }
    areaLazyLoad(event: { option: CascaderOption, index: number, resolve: (children: CascaderOption[]) => void, reject: () => void }) {
        const index = event['index'];
        const option = event.option;  
        const option = event.option;
        switch (index) {
           case -1:
           this.areacodeService.getProvinces().subscribe(
             (res: {label: string, value: string}[]) => {
                 event.resolve( res );
             }
           ); break;
           case 0:
           this.areacodeService.getCities(option.value).subscribe(
             (res: {label: string, value: string}[]) => {
                 event.resolve( res );
             }
           ); break;
           case 1:
           this.areacodeService.getAreas(option.value).subscribe(
             (res: {label: string, value: string}[]) => {
                 event.resolve( res );
             }
           ); break;
            case -1:
                this.areacodeService.getProvinces().subscribe(
                    (res: { label: string, value: string }[]) => {
                        event.resolve(res);
                    }
                ); break;
            case 0:
                this.areacodeService.getCities(option.value).subscribe(
                    (res: { label: string, value: string }[]) => {
                        event.resolve(res);
                    }
                ); break;
            case 1:
                this.areacodeService.getAreas(option.value).subscribe(
                    (res: { label: string, value: string }[]) => {
                        event.resolve(res);
                    }
                ); break;
        }
      }
      setAreaCodes(codes: string[]) {
         if (!!codes && !!codes.length) {
             const n = codes.length;
             switch (n) {
                case 1:
                this.dataConditionTemp.areaRangeId = Number(codes[0]);
                this.dataConditionTemp.areaRange = AreaRange.PROVINCE;
                break;
                case 2:
                this.dataConditionTemp.areaRangeId = Number(codes[1]);
                this.dataConditionTemp.areaRange = AreaRange.CITY;
                break;
                case 3:
                this.dataConditionTemp.areaRangeId = Number(codes[2]);
                this.dataConditionTemp.areaRange = AreaRange.AREA;
                break;
             }
             this._monitorPoint = 1;
    }
    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;
                }
                this.monitorPointsChange(null);
                this._monitorPoint = null;
                this.devicesChange(null);
                this._device = null;
            }
            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._actualTime = null;
            this.actualTimes = null;
         }
      }
      setMonitorPoint(value) {
          console.log(value);
          this.dataConditionTemp.areaRangeId = value;
          this.dataConditionTemp.areaRange = AreaRange.MONITORPOINT;
         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.http.post(environment.SERVER_BASH_URL + '/report/line-chart', this.lineChartCriteria).subscribe(
            res => console.log(res)
       );
    }
      chartOption;
      echartsIntance;
      onChartInit(ec) {
        this.echartsIntance = ec;
      }
}

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

@@ -1,5 +1,5 @@


<div *ngFor="let i of sensorArr">

    <div id ="mydiv{{i}}" style="height: 486px; width: 1000px"></div>

    <div id ="mydiv{{i}}" style="height: 486px; width: 1000px;"></div>

</div>




 src/app/routes/report/report.component.ts

@@ -91,15 +91,15 @@
        } else {
          const option = this.echartOption;
          const datas = res.data.datas;
          const times = res.data.times
          const sensors = res.data.sensors
          const times = res.data.times;
          const sensors = res.data.sensors;
          option.xAxis.data = times;
          option.xAxis.name = query.xAxisName;
          for (let index = 0; index < sensors.length; index++) {
            let sensorKey = sensors[index];
            let split = sensorKey.split('-');
            const sensorKey = sensors[index];
            const split = sensorKey.split('-');
            option.title.text = split[1] + query.label + '历走势图';
            option.yAxis.name = split[2] && split[2] != 'null' ? split[2] : '';
            option.yAxis.name = split[2] && split[2] !== 'null' ? split[2] : '';
            option.series = [];
            option.legend.data = [];


 src/app/routes/routes-routing.module.ts

@@ -19,13 +19,9 @@
        path: '',
        component: LayoutDefaultComponent,
        children: [
            { path: '', redirectTo: 'dashboard/v1', pathMatch: 'full' },
            { path: 'dashboard', redirectTo: 'dashboard/v1', pathMatch: 'full' },
            { path: 'dashboard/v1', component: DashboardV1Component, data: { translate: 'dashboard_v1' } },
            { path: 'dashboard/analysis', component: DashboardAnalysisComponent, data: { translate: 'dashboard_analysis' } },
            { path: 'dashboard/monitor', component: DashboardMonitorComponent, data: { translate: 'dashboard_monitor' } },
            { path: '', redirectTo: 'dashboard/workplace', pathMatch: 'full' },
            { path: 'dashboard', redirectTo: 'dashboard/workplace', pathMatch: 'full' },
            { path: 'dashboard/workplace', component: DashboardWorkplaceComponent, data: { translate: 'dashboard_workplace' } },

            { path: 'users', loadChildren: './users/users.module#UsersModule' },
            { path: 'devices', loadChildren: './devices/devices.module#DevicesModule' },
            { path: 'sensors', loadChildren: './sensors/sensors.module#SensorsModule' },
@@ -44,7 +40,7 @@
    {
      path: 'report',
      component: ReportComponent,
      data:{title:'对比报表'}
      data: {title: '对比报表'}
    },
    { path: '**', redirectTo: 'passport/login' }
];

 src/assets/img/1.png

 src/assets/img/2.png

 src/assets/img/3.png

 src/assets/img/4.png

 src/assets/img/5.png

 src/assets/img/6.png

 src/assets/img/login_bg.png

Binary files differ

 yarn.lock

@@ -5109,6 +5109,10 @@
  version "2.0.4"
  resolved "http://registry.npm.taobao.org/ngx-countdown/download/ngx-countdown-2.0.4.tgz#b0c0266da4aa24efc057f99f2e19a03142133cc0"

ngx-echarts@^2.0.2:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/ngx-echarts/-/ngx-echarts-2.0.2.tgz#ec0d084220e63313a74cc6a40f2a2617a3241533"

ngx-highlight-js@^1.0.3:
  version "1.0.3"
  resolved "http://registry.npm.taobao.org/ngx-highlight-js/download/ngx-highlight-js-1.0.3.tgz#b46ef9069d443baae7a43e5e4217d64fb8049003"