From b7aa850069d53ca1cc2aea791e7401216f5b795c Mon Sep 17 00:00:00 2001
From: fengxiang <110431245@qq.com>
Date: Mon, 19 Mar 2018 16:44:07 +0800
Subject: [PATCH] 数据查看
---
src/app/business/entity/data.ts | 2
/dev/null | 24 -
src/app/routes/report/report.component.html | 4
src/app/routes/analysis/query/query.component.ts | 895 ++++++++++++++++++------------------------
yarn.lock | 14
src/app/routes/analysis/analysis.module.ts | 2
src/app/routes/passport/login/login.component.ts | 2
src/app/business/services/http/login.service.ts | 3
src/app/routes/analysis/query/query.component.html | 271 ++++++------
src/app/business/services/util/date.service.ts | 28
10 files changed, 549 insertions(+), 696 deletions(-)
diff --git a/src/app/business/entity/data.ts b/src/app/business/entity/data.ts
index c2458bb..06e1770 100644
--- a/src/app/business/entity/data.ts
+++ b/src/app/business/entity/data.ts
@@ -137,7 +137,7 @@
export interface LineChartCriteria {
dataConditions?: DataCondition[];
- sensorKey?: string;
+ sensorKeys?: string[];
timePeriod?: TimePeriod;
}
diff --git a/src/app/business/services/http/login.service.ts b/src/app/business/services/http/login.service.ts
index 5b3cfa4..1889d2b 100644
--- a/src/app/business/services/http/login.service.ts
+++ b/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;
}
diff --git a/src/app/business/services/util/date.service.ts b/src/app/business/services/util/date.service.ts
index 3454603..da31118 100644
--- a/src/app/business/services/util/date.service.ts
+++ b/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;
}
}
diff --git a/src/app/routes/analysis/analysis.module.ts b/src/app/routes/analysis/analysis.module.ts
index efe9ed3..ac2b40e 100644
--- a/src/app/routes/analysis/analysis.module.ts
+++ b/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)
],
diff --git a/src/app/routes/analysis/query/query.component.html b/src/app/routes/analysis/query/query.component.html
index ba25972..95712d0 100644
--- a/src/app/routes/analysis/query/query.component.html
+++ b/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>
- <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>
- </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>
- <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 class="content__title">
+ <h1>������������</h1>
+</div>
+<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 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>
- </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 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-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>
+ </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>
- <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="_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>
- </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="_device" style="width: 100%;" [ngModel]="_device" (ngModelChange)="setDevice($event)" 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 monitorPointOptions" [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>
+ <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 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 deviceOptions" [nzLabel]="option.name" [nzValue]="option">
+ </nz-option>
</nz-select>
+ </div>
</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> </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 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>
+ </form>
</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>
diff --git a/src/app/routes/analysis/query/query.component.less b/src/app/routes/analysis/query/query.component.less
deleted file mode 100644
index 9300133..0000000
--- a/src/app/routes/analysis/query/query.component.less
+++ /dev/null
@@ -1,24 +0,0 @@
-.header-info {
- position: relative;
- text-align: center;
- > em {
- background-color: #e8e8e8;
- position: absolute;
- height: 56px;
- width: 1px;
- top: 0;
- right: 0;
- }
-}
-.line-chart {
- height: 400px;
- }
-
-@media screen and (max-width: 576px) {
- .header-info {
- margin-bottom: 16px;
- > em {
- display: none;
- }
- }
-}
diff --git a/src/app/routes/analysis/query/query.component.ts b/src/app/routes/analysis/query/query.component.ts
index ee131b9..3a2eb57 100644
--- a/src/app/routes/analysis/query/query.component.ts
+++ b/src/app/routes/analysis/query/query.component.ts
@@ -1,175 +1,74 @@
-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']
+ selector: 'app-query',
+ 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 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;
- }
- constructor(
- private sensorsService: SensorsService,
- private areacodeService: AreacodeService,
- private http: _HttpClient,
- private monitorPointService: MonitorPointService,
- private deviceService: DeviceService,
- private dateService: DateService,
- private msg: NzMessageService
- ) {
- }
-
- private initPage() {
- this.sensorsService.getPagingList(null, null).subscribe(
- (res: PageBean) => {
- this.sensorList = 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.http.get(environment.SERVER_BASH_URL + 'organization/get-my-org').subscribe(
- (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 = Object.values(areaNames).filter(
- val => !!val
- ).join('/');
- if (areaNames.areaName != null) {
- this._areas.value = org.areaCode;
- this.dataConditionTemp.areaRange = AreaRange.AREA;
- this.dataConditionTemp.areaRangeId = org.areaCode;
- } else if (areaNames.cityName != null) {
- this._areas.value = org.cityCode;
- this.dataConditionTemp.areaRange = AreaRange.CITY;
- this.dataConditionTemp.areaRangeId = org.cityCode;
- } else {
- this._areas.value = org.provinceCode;
- this.dataConditionTemp.areaRange = AreaRange.PROVINCE;
- this.dataConditionTemp.areaRangeId = org.provinceCode;
- }
- } else {
- this._areas = { label: '���������/���������/���������', value: 320583 };
- this.dataConditionTemp.areaRange = AreaRange.AREA;
- this.dataConditionTemp.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) {
+ public monitorPointOptions: MonitorPoint[] = [];
+
+ get actualYear(): number {
+ return this.actualTime.getFullYear();
+ }
+ 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.dataConditionTemp.areaRange) {
+ switch (this.dataCondition.areaRange) {
case AreaRange.PROVINCE:
areaName = 'provinceCode'; break;
case AreaRange.CITY:
@@ -179,206 +78,254 @@
}
if (!!text) {
example.or().andLike({ name: 'name', value: '%' + text + '%' })
- .andEqualTo({ name: areaName, value: this.dataConditionTemp.areaRangeId });
+ .andEqualTo({ name: areaName, value: this.dataCondition.areaRangeId });
} else {
example.or()
- .andEqualTo({ name: areaName, value: this.dataConditionTemp.areaRangeId });
+ .andEqualTo({ name: areaName, value: this.dataCondition.areaRangeId });
}
this.monitorPointService.getPageByExample(pageBean, example).subscribe(
(res: PageBean) => {
if (!!res && !!res.data) {
- this.monitorPoints = 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 http: _HttpClient,
+ private sensorsService: SensorsService,
+ private deviceService: DeviceService,
+ 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());
+ }
+ );
}
- get _isSameDay() {
- return this.lineChartCriteria.timePeriod.startTime && this.lineChartCriteria.timePeriod.endTime && moment(this.lineChartCriteria.timePeriod.startTime).isSame(this.lineChartCriteria.timePeriod.endTime, 'day');
- }
- 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);
- } else {
- return [];
+ private initPage() {
+ this.sensorsService.getPagingList(null, null).subscribe(
+ (res: PageBean) => {
+ this.sensorOptions.push({id: -1, name: '������', isExpanded: true, children: res.data});
+ }
+ );
+ 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>) => {
+ 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 = Object.values(areaNames).filter(
+ val => !!val
+ ).join('/');
+ if (areaNames.areaName != null) {
+ this._areas.value = org.areaCode;
+ this.dataCondition.areaRange = AreaRange.AREA;
+ this.dataCondition.areaRangeId = org.areaCode;
+ } else if (areaNames.cityName != null) {
+ this._areas.value = org.cityCode;
+ this.dataCondition.areaRange = AreaRange.CITY;
+ this.dataCondition.areaRangeId = org.cityCode;
+ } else {
+ this._areas.value = org.provinceCode;
+ this.dataCondition.areaRange = AreaRange.PROVINCE;
+ this.dataCondition.areaRangeId = org.provinceCode;
+ }
+ } else {
+ this._areas = { label: '���������/���������/���������', value: [ 320000, 320500, 320583]};
+ this.dataCondition.areaRange = AreaRange.AREA;
+ this.dataCondition.areaRangeId = 320583;
+ }
+ // ������������������
+ this.monitorPointsChange();
}
- } 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 [];
+ // ��������������������� ������
+ 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;
}
-
- } else {
- return this.newArray(60).slice(1);
- }
- },
- nzDisabledSeconds: () => {
- return this.newArray(60).slice(1);
+ break;
+ case 2:
+ this.dataCondition.areaRange = AreaRange.CITY;
+ if (!this.monitorPoint || this.monitorPoint.cityCode !== this.dataCondition.areaRangeId) {
+ changeMonitorPoint = true;
+ }
+ break;
+ case 3:
+ this.dataCondition.areaRange = AreaRange.AREA;
+ if (!this.monitorPoint || this.monitorPoint.areaCode !== this.dataCondition.areaRangeId) {
+ changeMonitorPoint = true;
+ }
+ break;
}
- } : false;
- }
- newArray = (len) => {
- const result = [];
- for (let i = 0; i < len; i++) {
- result.push(i);
+ if ( this.actualYearOptions.length === 0 || changeMonitorPoint) {
+ this.monitorPointsChange();
+ this.monitorPoint = null;
+ }
+ }
}
- 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;
+ // ��������� ������ ���������
+ 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 {
+ // ���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 {
- 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;
+ }
+
+
+ /**
+ * ������ ���������������
+ *
+ * @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];
+ }
}
- 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;
+ 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)
+ );
+ }
+ };
+ break;
}
- return mo.toDate();
}
- 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;
- }
- this.monitorPointsChange(null);
- this._monitorPoint = null;
- this.devicesChange(null);
- this._device = null;
- }
- this._areas.value = codes;
+ 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);
}
+ return result;
}
- // ������������������������������
- 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.initOpton({data: timeList});
- this.chartLoading = true;
- this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', this.lineChartCriteria).subscribe(
- (res: ResultBean<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;
- });
- series.push({type: 'line', data: outData});
- }
- );
- this.echartsIntance.setOption({
- series: series
- });
- this.chartLoading = false;
- }
+ 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};
}
+ ); 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};
}
- );
- }
- private reloadGrid() {
- const timePeriod = this.lineChartCriteria.timePeriod;
- }
- private initOpton(opt: {data: string[]}) {
-
- this.chartOption = {
- title: {
- text: ''
- },
- tooltip : {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- label: {
- backgroundColor: '#6a7985'
+ ); 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 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;
+ });
+ this.gridSensorNames.push(sensor.name);
+ const sensorData = data[key][0].map(
+ pair => {
+ return !!pair.value ? pair.value : '-';
+ }
+ );
+ this.grid.data.push(sensorData);
}
- }
- },
- 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;
- }
+ );
+ }
+ this.grid.loading = false;
+ }
+ }
+ );
+ }
+ 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;
+ }
+ 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();
+ }
}
+
+
diff --git a/src/app/routes/passport/login/login.component.ts b/src/app/routes/passport/login/login.component.ts
index a793455..70a508e 100644
--- a/src/app/routes/passport/login/login.component.ts
+++ b/src/app/routes/passport/login/login.component.ts
@@ -99,7 +99,7 @@
this.router.navigate(['/']);
}
},
- (err: HttpErrorResponse) => {
+ (err: HttpErrorResponse) => {
if (!!err) {
const errMsg = err.error;
console.log(errMsg);
diff --git a/src/app/routes/report/report.component.html b/src/app/routes/report/report.component.html
index 5644aae..94fb4d1 100644
--- a/src/app/routes/report/report.component.html
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index 87d5aba..7a61b2b 100644
--- a/yarn.lock
+++ b/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"
--
Gitblit v1.8.0