.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, ] ], }) 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,7 +45,6 @@ } 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/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,35 +60,32 @@ </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"> <div nz-form-label nz-col> <label>省市区</label> </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> </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"> <div nz-form-label nz-col> <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)="monitorPointChange($event)" [nzNotFoundContent]="'无法找到'"> <nz-option *ngFor="let option of monitorPoints" [nzLabel]="option.name" [nzValue]="option"> </nz-option> </nz-select> </div> @@ -94,40 +94,63 @@ </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 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 style="margin-top: 20px;" nz-row [nzGutter]="16"> </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 nzHasFeedback> 222222222 <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 nzHasFeedback> 2222222222 <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><label>设备</label></div> <div nz-form-control nz-col nzHasFeedback> 2222222222 <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> </div> </form> </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,7 +11,7 @@ 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', @@ -20,17 +19,26 @@ }) export class QueryComponent implements OnInit { public sensorList: Sensor[]; public timeUnits: { label: string, value: TimeUnits, disabled: boolean }[] = []; public timeUnits: { label: string, value: TimeUnits }[] = []; public lineChartCriteria: LineChartCriteria = {sensorKey: 'e1', timePeriod: {startTime: null, endTime: null}, dataConditions: []}; _areas: {label: any, value: any}; _monitorPoint; _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; } 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: @@ -54,6 +62,21 @@ 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}; @@ -65,6 +88,7 @@ private areacodeService: AreacodeService, private http: _HttpClient, private monitorPointService: MonitorPointService, private deviceService: DeviceService, ) { } @@ -75,13 +99,16 @@ } ); 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()); // 省市区 初始值 @@ -116,8 +143,25 @@ } } ); // 监控点初始化 this.monitorPointsChange(null); } monitorPointChange(text) { 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 = ''; @@ -152,7 +196,8 @@ } get _startShowTime() { return this.timeType.timePickerOption ? {nzHideDisabledOptions: true, { nzHideDisabledOptions: true, nzDisabledHours: () => { const endTime = this.lineChartCriteria.timePeriod.endTime; const hours = this.newArray(50); @@ -179,7 +224,8 @@ } get _endShowTime() { return this.timeType.timePickerOption ? {nzHideDisabledOptions: true, { nzHideDisabledOptions: true, nzDisabledHours: () => { const startTime = this.lineChartCriteria.timePeriod.startTime; return this._isSameDay && !!startTime ? this.newArray(startTime.getHours()) : []; @@ -209,6 +255,13 @@ } 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; @@ -231,14 +284,47 @@ _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; 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; } } 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 ? @@ -287,7 +373,6 @@ const now = new Date(); return now.getFullYear() + 50; } dataConditionTemp: DataCondition = {}; areaLazyLoad(event: { option: CascaderOption, index: number, resolve: (children: CascaderOption[]) => void, reject: () => void }) { const index = event['index']; const option = event.option; @@ -315,26 +400,96 @@ 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.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; this.monitorPointsChange(null); this._monitorPoint = null; this.devicesChange(null); this._device = null; } this._areas.value = codes; } } setMonitorPoint(value) { console.log(value); this.dataConditionTemp.areaRangeId = value; // 下拉框设置监控点事件 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; } 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>
@@ -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 = [];
@@ -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' }, src/assets/img/1.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"
