From 1bcf13eb0dfa25600f0140ea5b78eef171e00ffe Mon Sep 17 00:00:00 2001 From: fengxiang <110431245@qq.com> Date: Tue, 17 Jul 2018 14:22:49 +0800 Subject: [PATCH] 所有页面建好 --- src/app/routes/routes.module.ts | 8 src/app/routes/operation/device-status/device-status.component.ts | 17 src/app/routes/raise-dust/raise-dust.component.ts | 17 src/app/routes/sand-table/sand-table.component.ts | 17 src/app/routes/grid-trace/grid-trace.component.html | 4 src/assets/app-data.json | 12 src/app/routes/sand-table/sand-table.component.html | 4 src/app/routes/operation/data-audit/data-audit.component.html | 188 ++++++++ src/app/routes/operation/device-maintenance/device-maintenance.component.ts | 17 src/app/routes/operation/data-audit/data-audit.component.ts | 814 ++++++++++++++++++++++++++++++++++++++ src/app/routes/operation/device-status/device-status.component.html | 4 src/app/routes/routes-routing.module.ts | 24 src/app/routes/raise-dust/raise-dust.component.html | 4 src/app/routes/operation/device-maintenance/device-maintenance.component.html | 4 src/app/routes/reports/reports.module.ts | 2 src/app/routes/grid-trace/grid-trace.component.ts | 17 src/app/routes/operation/data-audit/data-audit.component.less | 24 + src/app/routes/operation/operation.module.ts | 52 ++ 18 files changed, 1,209 insertions(+), 20 deletions(-) diff --git a/src/app/routes/grid-trace/grid-trace.component.html b/src/app/routes/grid-trace/grid-trace.component.html new file mode 100644 index 0000000..4e431c6 --- /dev/null +++ b/src/app/routes/grid-trace/grid-trace.component.html @@ -0,0 +1,4 @@ +<div class="content__title"> + <h1>������������</h1> +</div> +<pro-header [title]="'Page Name'"></pro-header> diff --git a/src/app/routes/grid-trace/grid-trace.component.ts b/src/app/routes/grid-trace/grid-trace.component.ts new file mode 100644 index 0000000..10972ac --- /dev/null +++ b/src/app/routes/grid-trace/grid-trace.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit } from '@angular/core'; +import { _HttpClient } from '@delon/theme'; + +@Component({ + selector: 'app-grid-trace', + templateUrl: './grid-trace.component.html', +}) +export class GridTraceComponent implements OnInit { + + constructor( + private http: _HttpClient + ) { } + + ngOnInit() { + } + +} diff --git a/src/app/routes/operation/data-audit/data-audit.component.html b/src/app/routes/operation/data-audit/data-audit.component.html new file mode 100644 index 0000000..636f518 --- /dev/null +++ b/src/app/routes/operation/data-audit/data-audit.component.html @@ -0,0 +1,188 @@ +<div class="content__title"> + <h1>������������</h1> +</div> +<nz-card [nzBordered]="false"> + <form nz-form [nzLayout]="'inline'"> + <div nz-row [nzGutter]="24"> + <div nz-col [nzSpan]="6" class="mb-md"> + <div nz-form-item class="d-flex"> + <div [ngStyle]="{'width': '100px'}" nz-form-label> + <label>������������</label> + </div> + <div nz-form-control class="flex-1"> + <nz-popover [nzPlacement]="'bottomLeft'" [(nzVisible)]="sensorSelectVisible" [nzTrigger]="'click'"> + <nz-input [nzType]="'input'" nz-popover [ngModel]="sensorNames" style="cursor:pointer;" + name="sensorNames" [nzReadonly]="true" + [nzPlaceHolder]="'���������������������'"> + <ng-template #suffix> + <i class="anticon anticon-down ng-star-inserted ant-cascader-picker-arrow" style="right: 1px;"></i> + </ng-template> + </nz-input> + <ng-template #nzTemplate> + <div style="position: relative; width: 240px; height: 240px;" (mouseover) = "onTreeMouseOver($event)" (mouseout) = "onTreeMouseOut($event)"> + <div style="position: absolute; left: -16px; width: 272px; height: 256px; overflow-y :auto; top: -8px;"> + <nz-tree [nzNodes]="sensorOptions" (nzActivate)="onTreeClickSelect($event)" + (nzDeactivate)="onTreeClickSelect($event)" [nzCheckable]="true" (nzCheck)="onSensorSelect($event)"></nz-tree> + </div> + </div> + </ng-template> + </nz-popover> + </div> + </div> + </div> + <div nz-col [nzSpan]="4" class="mb-md"> + <div nz-form-item class="d-flex"> + <div [ngStyle]="{'width': '128px'}" 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]="7" class="mb-md"> + <div nz-form-item class="d-flex"> + <div [ngStyle]="{'width': '128px'}" nz-form-label> + <label>������������</label> + </div> + <div nz-form-control class="flex-1"> + <nz-select name="deviceDimension" style="width: 100%;" [(ngModel)]="deviceDimension" nzAllowClear [nzPlaceHolder]="'������ '+ dimensionItem.label +'(������������������)'" + nzShowSearch (nzSearchChange)="dimensionsChange($event)" [nzNotFoundContent]="'������������'"> + <nz-option *ngFor="let option of dimensionOptions" [nzLabel]="option.name" [nzValue]="option"> + </nz-option> + </nz-select> + </div> + </div> + </div> + <div nz-col [nzSpan]="5" 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 nz-col [nzSpan]="2" class="mb-md"> + <button nz-button [nzType]="'primary'" (click)="loadGrid()"> + <i class="anticon anticon-search"></i> + <span>������</span> + </button> + </div> + </div> + </form> +</nz-card> +<nz-card> + <div nz-row [nzGutter]="16"> + <div nz-col [ngStyle]="{'display':isChartCollapse ? 'none' : 'block' }" [nzMd]="24"> + <div echarts style="margin-top: 12px;" [options]="chartOption" [loading]="chartLoading" class="line-chart" (chartInit)="onChartInit($event)"></div> + </div> + <div *ngIf="isChartCollapse" style="width:100%; text-align:center;"> + <span style="font-size:18px; font-weight: bold;">{{ _chartTitleTemp }}</span> + </div> + <div *ngIf="!!echartsIntance&&!isChartCollapse" class="chart-switch-select"> + <nz-dropdown> + <a class="ant-dropdown-link" nz-dropdown> + <p class="display-3 text-primary">������������ + <i class="anticon anticon-down"></i> + </p> + </a> + <ul style="cursor:pointer; max-height: 260px; overflow:auto;" nz-menu> + <li [ngClass]="{'ant-dropdown-menu-item-selected':chartSelectedIndex==m}" *ngFor="let item of grid.data,index as m" (click)="switchSensor(m)" + nz-menu-item> + {{item.sensor.name}} + <i *ngIf="chartSelectedIndex==m" class="anticon anticon-check-circle-o"></i> + </li> + </ul> + </nz-dropdown> + </div> + <a *ngIf="!!echartsIntance" style="position: absolute; right: 0; top: -10px;" class="pl-sm" (click)="toggleChartCollapse()"> + ������ + <i class="anticon" [class.anticon-down]="isChartCollapse" [class.anticon-up]="!isChartCollapse"></i> + </a> + </div> +</nz-card> +<!--<nz-card>--> + <!--<div nz-row [nzGutter]="16">--> + <!--<div nz-col [nzMd]="24">--> + <!--<div style="width:100%; text-align:center;">--> + <!--<span style="font-size:18px; font-weight: bold;">{{ _tableTitleTemp }}</span>--> + <!--</div>--> + <!--</div>--> + <!--</div>--> + <!--<div nz-row [nzGutter]="16">--> + <!--<div nz-col [nzMd]="24">--> + <!--<nz-table #nzTable [nzScroll]="{ x:tableWidth,y:350 }" [nzDataSource]="grid.data" [nzIsPagination]="false" [nzLoading]="grid.loading">--> + <!--<ng-template #nzFixedHeader>--> + <!--<thead nz-thead>--> + <!--<tr>--> + <!--<th nz-th [nzWidth]="'160px'" [ngStyle]="{'position': 'relative', 'text-align':'center', 'left':sensorNameScrollLeft+'px'}">--> + <!--<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 style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i" (click)="switchSensor(i)" (mouseover)="sensorTableFocus(i)"--> + <!--(mouseout)="sensorTableBlur(i)" [ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}">--> + <!--<td nz-td class='sensor-name' [ngStyle]="{'background-color': '#FFF'}">--> + <!--<span>--> + <!--<span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span> --> + <!--<i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></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.data[n]|tyepHandle:col:row }}" style="width:100%; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"--> + <!--*ngSwitchDefault> {{ row.data[n]|tyepHandle:col:row }} </span>--> + <!--<!– ������������������������������������ –>--> + <!--</span>--> + <!--</td>--> + <!--</tr>--> + <!--</tbody>--> + <!--</nz-table>--> + <!----> + <!--<div *ngIf="grid.data.length>0" [ngClass]="{'table-scroll':true,'table-scroll-box-shadow': sensorNameScrollLeft>2 }" style="position: absolute; top:0;">--> + <!--<nz-table #nzTable [nzDataSource]="grid.data" [nzIsPagination]="false">--> + <!--<thead nz-thead>--> + <!--<tr>--> + <!--<th nz-th [nzWidth]="'160px'" style="text-align:center; position:relative; display:block; z-index:9;">--> + <!--<span>������������</span>--> + <!--</th>--> + <!--</tr>--> + <!--</thead>--> + <!--<tbody nz-tbody [ngStyle]="{'top':sensorNameScrollTop+'px'}" style="position: relative; z-index:7; display:block;">--> + <!--<tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i" (mouseover)="sensorTableFocus(i)" (mouseout)="sensorTableBlur(i)"--> + <!--[ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}"--> + <!--(click)="switchSensor(i)">--> + <!--<td nz-td class='sensor-name' [ngStyle]="{'width':'160px','text-align': 'center'}">--> + <!--<span>--> + <!--<span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span> --> + <!--<i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></i>--> + <!--</span>--> + <!--</td>--> + <!--</tr>--> + <!--</tbody>--> + <!--</nz-table>--> + <!--</div>--> + <!--</div>--> + <!--</div>--> +<!--</nz-card>--> diff --git a/src/app/routes/operation/data-audit/data-audit.component.less b/src/app/routes/operation/data-audit/data-audit.component.less new file mode 100644 index 0000000..537adcb --- /dev/null +++ b/src/app/routes/operation/data-audit/data-audit.component.less @@ -0,0 +1,24 @@ +.line-chart { + height: 100%; +} +.table-tr-bgcolor-focus { + background-color: #ecf6fd; +} +.table-tr-bgcolor-blur { + background-color: #fff; +} +.table-scroll { + z-index: 9; + height: auto; + max-height: 388px; + overflow: hidden; +} +.table-scroll-box-shadow { + -moz-box-shadow: 4px 0 2px rgba(0, 0, 0, 0.1); /* ������ Firefox */ + box-shadow: 4px 0 2px rgba(0, 0, 0, 0.1); +} +.chart-switch-select { + position: absolute; + right: 8%; + top: 2%; +} \ No newline at end of file diff --git a/src/app/routes/operation/data-audit/data-audit.component.ts b/src/app/routes/operation/data-audit/data-audit.component.ts new file mode 100644 index 0000000..6c4227f --- /dev/null +++ b/src/app/routes/operation/data-audit/data-audit.component.ts @@ -0,0 +1,814 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { _HttpClient } from '@delon/theme'; +import { Sensor, Device, DataCondition, MonitorPoint, Organization, LineChartCriteria } from '@business/entity/data'; +import { TimeUnits, AreaRange, ResultCode, DeviceDimension } from '@business/enum/types.enum'; +import { SensorsService } from '@business/services/http/sensors.service'; +import { PageBean, ResultBean, Grid } from '@business/entity/grid'; +import { NzTreeComponent } from 'ng-tree-antd'; +import * as moment from 'moment'; +import { ExampleService } from '@business/services/util/example.service'; +import { DeviceService } from '@business/services/http/device.service'; +import { 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'; +import { DateService } from '@business/services/util/date.service'; +import { Subject } from 'rxjs/Subject'; + +@Component({ + selector: 'app-data-audit', + templateUrl: './data-audit.component.html', + styleUrls: ['./data-audit.component.less'], +}) +export class DataAuditComponent implements OnInit { + + // aqi������������ + private aqiSort = { + e1: 1, + e2: 2, + e10: 3, + e11: 4, + e15: 5, + e16: 6 + }; + + public tableWidth = 2800; + // private tableWidthOption = { + // 'MONTH': 1400, + // 'DAY': 2800, + // 'HOUR': 2100, + // 'MINUTE': 5000 + // }; + 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 = moment().subtract(1, 'days').toDate(); + public actualYearOptions: number []; + public isCollapse = false; + public isChartCollapse = false; + // ������������ + public _areas: { label: string, value: string }[] = new Array(); + public grid: Grid<{sensor: Sensor, data: string [], weight?: number}> = new Grid(); + // public grid.data: {sensor: Sensor, data: string [], weight?: number} [] = []; + // ������������������������������������������ + public sensorNameScrollLeft = 0; + public sensorNameScrollTop = 0; + @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 toggleChartCollapse() { + // ��������������� + if (this.isChartCollapse && !!this.echartsIntance) { + this.reloadChart(); + this.switchSensor(this.chartSelectedIndex); + // this.chartLoading = false; + } + this.isChartCollapse = !this.isChartCollapse; + } + public deviceOptions: Device[] = []; + public dataCondition: DataCondition = {areaRangeId: 320583, areaRange: AreaRange.AREA, deviceDimension: DeviceDimension.NONE}; + + public dimensionOptions: MonitorPoint[] = []; + + get actualYear(): number { + return this.actualTime.getFullYear(); + } + set actualYear(year) { + this.actualTime.setFullYear(Number(year)); + } + dimensionsChange(text?: string) { + switch (this.dimensionItem.value) { + case DeviceDimension.MONITORPOINT: + this.monitorPointsChange(text); break; + case DeviceDimension.PROFESSION: + this.professionsChange(text); break; + } + } + professionsChange(text?: string) { + this.http.get<ResultBean<any[]>>('profession/getall').subscribe( + result => { + if (!!result.code) { + this.dimensionOptions = result.data; + } + } + ); + } + monitorPointsChange(text?: string) { + const pageBean: PageBean = { pageIndex: 0, pageSize: 20 }; + const example = new ExampleService(); + let areaName = ''; + switch (this._areas.length) { + case 1: + areaName = 'provinceCode'; break; + case 2: + areaName = 'cityCode'; break; + case 3: + areaName = 'areaCode'; break; + } + if (!!text) { + example.or().andLike({ name: 'name', value: '%' + text + '%' }) + .andEqualTo({ name: areaName, value: Number(this._areas.slice(-1).pop().value) }); + } else { + example.or() + .andEqualTo({ name: areaName, value: Number(this._areas.slice(-1).pop().value) }); + } + this.monitorPointService.getPageByExample(pageBean, example).subscribe( + (res: PageBean) => { + if (!!res && !!res.data) { + this.dimensionOptions = res.data; + } + } + ); + } + devicesChange(text?: string) { + if (!!this.deviceDimension) { + const example = new ExampleService(); + const deviceDimensionProperty = + this.dimensionItem.value === DeviceDimension.MONITORPOINT ? 'monitorPointId' : 'professionId'; + if (!!text) { + example.or().andEqualTo({ name: deviceDimensionProperty, value: this.deviceDimension.id }) + .andLike({name: 'text', value: text}); + } else { + example.or().andEqualTo({ name: deviceDimensionProperty, value: this.deviceDimension.id }); + } + this.deviceService.getPageByExample(null, example).subscribe( + (res: PageBean) => { + if (!!res && !!res.data) { + this.deviceOptions = res.data; + } + } + ); + } else { + this.deviceOptions = []; + } + } + /** + * ������������ + */ + public chartLoading: boolean; + public chartOption; + public echartsIntance; + public chartSelectedIndex = 0; + public onChartInit(e): void { + this.echartsIntance = e; + } + /** + * ������ sensor ������������������������ + * @param sensorKeys + */ + private mockSelectSensors(sensorKeys: string[]) { + // ������������ aqi 6��������� + // Object.keys(this.aqiSort) + sensorKeys.forEach( key => { + const sensor = this.sensorOptions[0].children.find( + sen => sen.sensorKey === key + ) + if (!!sensor) { + sensor['halfChecked'] = false; + sensor['checked'] = true; + const event = {node: {data: sensor}}; + this.onSensorSelect(event); + } + }); + } + constructor( + private http: _HttpClient, + private sensorsService: SensorsService, + private deviceService: DeviceService, + private areacodeService: AreacodeService, + private monitorPointService: MonitorPointService, + private msg: NzMessageService, + private dateService: DateService, + ) { } + ngOnInit() { + this.initPage(); + // ������������ tree click ������ + this.treeClickStream.debounceTime(1).subscribe( event => { + const data = event.node.data; + // console.log(data); + if (data.id === -1) { + const children = data.children; + // ������������ + if (!data.halfChecked && data.checked) { + // ��������������� + data['checked'] = false; + data['halfChecked'] = false; + children.forEach(element => { + element['checked'] = false; + }); + this._sensors = {}; + // ������ ������ ������������ + } else { + // ������������ + children.forEach(element => { + element['checked'] = true; + this._sensors [element.id] = element.sensorKey; + }); + data['checked'] = true; + data['halfChecked'] = false; + } + } else { + const parentData = event.node.parent.data; + data['checked'] = !data['checked']; + if (data['checked']) { + this._sensors [data.id] = data.sensorKey; + } else { + delete this._sensors [data.id]; + } + const length = Object.keys(this._sensors).length; + parentData['halfChecked'] = length > 0 + && this.sensorOptions[0].children.length > length; + parentData['checked'] = !parentData['halfChecked'] && length !== 0; + } + this.reloadSensorNames(); + }); + } + + private initPage() { + this.sensorsService.getPagingList(null, null).subscribe( + (res: PageBean) => { + this.sensorOptions.push({id: -1, name: '������', isExpanded: true, children: res.data}); + this.mockSelectSensors(Object.keys(this.aqiSort)); + } + ); + this.actualYearOptions = this.newArray(this.actualYear - 9, 10).map(item => Number(item)).reverse(); + // ��������� ��������� + this.http.get('organization/get-my-org').subscribe( + (res: ResultBean<Organization>) => { + if (res.code === ResultCode.SUCCESS) { + const org = res.data; + const areas = new Array(3); + if (!!org.areaNames) { + const areaNames = org.areaNames; + Object.keys(areaNames).forEach( + key => { + const value = areaNames[key]; + if ( value != null) { + switch (key) { + case 'provinceName' : + areas[0] = {label : value, value: org.provinceCode }; break; + case 'cityName' : + areas[1] = {label : value, value: org.cityCode }; break; + case 'areaName' : + areas[2] = {label : value, value: org.areaCode }; break; + } + } + } + ); + } else { + for (let i = 0; i < areas.length; i++) { + switch (i) { + case 0: + areas[0] = {label : '���������', value: 320000 }; break; + case 1: + areas[1] = {label : '���������', value: 320500 }; break; + case 2: + areas[2] = {label : '���������', value: 320583 }; break; + } + } + } + this.setAreasData(areas); + } + } + ); + this.dimensionItem = this.dimensions[0]; + // this.dimensionsChange(); + } + public get sensorsLength(): number { + return this.sensorOptions.length > 0 ? this.sensorOptions[0].children.length : 0; + } + public get sensorsSelect(): number { + return Object.keys(this._sensors).length; + } + public areaLazyLoad(event: { option: CascaderOption, index: number, resolve: (children: CascaderOption[]) => void, reject: () => void }) { + const index = event['index']; + 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; + } + } + // ��������������������� ��������� ��� ������������������������ + public setAreasData(areas: {label: string, value: string}[] ) { + let isChanged = false; + isChanged = areas.some( (item , index: number) => { + // this._areas[index] ���null ������ ������������������ + return this._areas.length < areas.length + || !this._areas[index] + || this._areas[index].value !== item.value; + }); + if ( isChanged ) { + this._areas = areas; + this.deviceDimension = null; + if (this.dimensionItem.value === DeviceDimension.MONITORPOINT) { + this.dimensionsChange(); + } + } + } + + // ��������� ������ ������������, ������ ���������������������������null ������������������������������ + public dimensionItem: {label: string, value: DeviceDimension}; + public dimensions: {label: string, value: DeviceDimension}[] = [ + {label: '������������', value: DeviceDimension.MONITORPOINT}, + {label: '������������', value: DeviceDimension.PROFESSION} + ]; + public get otherDimensions(): {label: string, value: DeviceDimension}[] { + return this.dimensions.filter( + item => { + return item.value !== this.dimensionItem.value; + } + ); + } + public selectDimension(option: {label: string, value: DeviceDimension}) { + this.dimensionItem = option; + this.dimensionsChange(); + this._deviceDimension = null; + // ������������������ + this.device = null; + this.deviceOptions = null; + } + public _deviceDimension: {id: number, name: string}; + get deviceDimension(): {id: number, name: string} { + return this._deviceDimension; + } + set deviceDimension(value) { + if (!!value) { + // ������ ������������������ + if (this._deviceDimension !== value) { + this._deviceDimension = value; // ��������������������������������������������������������� + this._device = null; // ��������������� + this.devicesChange(); + } + // ������null ������������������������������ + } else { + this._deviceDimension = null; + this.device = null; + this.deviceOptions = null; + } + + } + // ��������� ������ ������������ + public _device: Device; + set device(val: Device) { + this._device = val; + + } + get device(): Device { + return this._device; + } + + + /** + * ������ ��������������� + * + * @readonly + * @type {string} + * @memberof QueryComponent + */ + private treeClickStream: Subject<any> = new Subject<any>(); + public onTreeClickSelect(event): void { + this.treeClickStream.next(event); + } + public onSensorSelect(event): void { + const data = event.node.data; + if (data.id === -1 && data.halfChecked === false) { + if (!!data.checked) { + this.sensorOptions[0].children.forEach( + sensor => { + this._sensors [sensor.id] = sensor.sensorKey; + } + ); + } else { + this._sensors = {}; + } + } else { + if (!!data.checked) { + this._sensors [data.id] = data.sensorKey; + } else { + delete this._sensors[data.id]; + } + } + this.reloadSensorNames(); + } + private reloadSensorNames(): void { + // ������������������������ + setTimeout(() => { + this._sensorNames = ''; + const sensorNameList = Object.keys(this._sensors).map( + id => { + const sensor = this.sensorOptions[0].children.find(item => { + return Number(id) === Number(item.id) ; + }); + return sensor.name; + } + ); + this._sensorNames = sensorNameList.join(', '); + }, 1); + } + public setTimeUnit(val: {label: string, value: TimeUnits} ) { + switch (val.value) { + // YYYY-MM-DD HH:mm:ss + case TimeUnits.MONTH: + this._timeType.dateFormat = 'YYYY���'; + // this._timeType.dateFormat = 'YYYY-MM'; + // this._timeType.mode = 'month'; + // this._timeType.endShowTime = null; + break; + case TimeUnits.DAY: + this._timeType.dateFormat = 'YYYY���MM���'; + this._timeType.mode = 'month'; + this._timeType.showTime = false; + break; + case TimeUnits.HOUR: + this._timeType.dateFormat = 'YYYY���MM���DD���'; + this._timeType.mode = 'day'; + this._timeType.showTime = false; + break; + case TimeUnits.MINUTE: + 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; + } + } + 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; + } + public loadGrid(): void { + // ������������ + const sensors = Object.values(this._sensors); + if ( sensors.length === 0 ) { + this.msg.error(' ������������ ������������'); + return ; + } + this.grid.loading = true; + this.sensorNameScrollLeft = 0; + this.grid.data = []; + 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 dimValue: number = !!this._deviceDimension ? this._deviceDimension.id : null; + const devValue: number = !!this._device ? this._device.id : null; + const areasData = [ devValue, dimValue, Number(this._areas.slice(-1).pop().value)]; + if (!!this.deviceDimension) { + this.dataCondition.dimensionValue = this._deviceDimension.id; + this.dataCondition.deviceDimension = this.dimensionItem.value; + } + for (let index = 0 ; index < areasData.length ; index++) { + const item = areasData[index]; + if ( item !== null ) { + this.dataCondition.areaRangeId = item; + switch (index) { + case 0: this.dataCondition.areaRange = AreaRange.DEVICE; break; + case 1: + // ������������������ + if (this.dimensionItem.value === DeviceDimension.MONITORPOINT) { + this.dataCondition.areaRange = AreaRange.MONITORPOINT; + // ��������������� + } else { + // ������������������������ + this.switchAreas(); + // ��������������������� + this.dataCondition.areaRangeId = areasData.slice(-1).pop(); + } break; + case 2: + this.switchAreas(); + break; + } + break; + } + } + 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}; + } + ); break; + case TimeUnits.MINUTE: + this.grid.columns = this.newArray(0, 60, null, '���').map( + item => { + return {text: item}; + } + ); break; + } + // ��������������������������������� + this.tableWidth = this.grid.columns.length * 80 + 160; + this.reloadChart(); + // ������������������ + this.reloadChartTitle(); + // ������������ + this.grid.data = []; + console.log(lineChartCriteria); + this.http.post('/report/line-chart', lineChartCriteria).subscribe( + (res: ResultBean<{[key: string]: Array<Array<number>>}>) => { + if (res.code === 1) { + const data = res.data; + if (!!data) { + const sensorKeys = Object.keys(data); + // aqi������������������������������������ ��������� + sensorKeys.forEach( + key => { + const sensor = (<Array<Sensor>>this.sensorOptions[0].children). + find(item => { + return item.sensorKey === key; + }); + let weight = this.aqiSort[key]; + weight = !!weight ? weight : 101; + // this.gridSensors.push(sensor); + const sensorData = data[key][0].map( + value => { + if (weight > 100) { + // pair.value ���null,������������ + weight = !!value ? weight : weight + 1; + } + // ���������������������2��� + return value != null ? String(Math.round(value * 100) / 100) : '-'; + } + ); + this.grid.data.push({sensor: sensor, data: sensorData, weight: weight}); + } + ); + } + this.grid.data.sort( (a, b) => a.weight - b.weight ); + this.grid.loading = false; + this.switchSensor(0); + } + } + ); + $('.ant-table-body').scroll( + () => { + this.sensorNameScrollLeft = $('.ant-table-body').scrollLeft(); + this.sensorNameScrollTop = -$('.ant-table-body').scrollTop(); + } + ); + } + private switchAreas(): void { + switch (this._areas.length ) { + case 1: this.dataCondition.areaRange = AreaRange.PROVINCE; break; + case 2: this.dataCondition.areaRange = AreaRange.CITY; break; + case 3: this.dataCondition.areaRange = AreaRange.AREA; break; + } + } + private reloadChart(): void { + const timeList = this.grid.columns.map(item => item.text); + if (!!this.echartsIntance) { + this.chartOption = null; + this.echartsIntance.clear(); + } + // let series = null; + // if ( this.chartSelectedIndex < this.grid.data.length ) { + // series = [{type: 'line', data: this.grid.data[this.chartSelectedIndex]}]; + // } + + this.initOpton({ xAxis : [{data : timeList}]}); + this.chartLoading = true; + } + private initOpton(opt: {[key: string]: object}) { + const defaultOption = { + title: { + left: 'center' + }, + tooltip : { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#6a7985' + } + } + }, + legend: { + data: [] + }, + toolbox: { + feature: { + saveAsImage: {} + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis : [ + { + type : 'category', + boundaryGap : false + } + ], + yAxis : [ + { + type : 'value' + } + ], + series : [ + ] + }; + $.extend(true, defaultOption, opt); + this.chartOption = defaultOption; + } + public get sensorUnit() { + return this.grid.data[this.chartSelectedIndex].sensor.unit; + } + // ������������������ ������������ + public _chartTitleTemp = ''; + public _tableTitleTemp = ''; + public reloadChartTitle(): void { + const names = ['������', '������', '������', '������', '������']; + switch ( this.dataCondition.areaRange ) { + case AreaRange.MONITORPOINT : + names[0] = '������������'; + names[1] = this._deviceDimension.name; break; + case AreaRange.DEVICE : + names[0] = '������'; + names[1] = this._device.name; break; + default : + names[0] = ''; + names[1] = this._areas.map( item => item.label).join('/'); + break; + } + // ������������ + if (!!this._deviceDimension) { + switch (this.dataCondition.deviceDimension) { + case DeviceDimension.PROFESSION : + names[2] = '[' + this._deviceDimension.name + ']'; + break; + default : + names[2] = ''; + break; + } + } else { + names[2] = ''; + } + + names[3] = moment(this.actualTime).format(this._timeType.dateFormat); + if ( this.grid.data.length > this.chartSelectedIndex) { + names[4] = this.grid.data[this.chartSelectedIndex].sensor.name; + } + const title = names.join(' ') + ' ������'; + if (title.trim() !== this._chartTitleTemp.trim()) { + this._chartTitleTemp = title; + } + const tableTile = names.slice(0, -1).join(' ') + ' ������������'; + if (tableTile.trim() !== this._tableTitleTemp.trim()) { + this._tableTitleTemp = tableTile; + } + } + public switchSensor(index: number): void { + this.chartSelectedIndex = index; + this.chartLoading = true; + this.reloadChartTitle(); + setTimeout(() => { + const series = [{type: 'line', data: this.grid.data[index].data}]; + this.echartsIntance.setOption({ + title: { + text: this._chartTitleTemp + }, + yAxis : [ + { + name : '���������' + this.sensorUnit + } + ], + series: series + }); + this.chartLoading = false; + }, 600); + } + 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(); + } + public sensorTableFocusIndex = -1; + public sensorTableFocus(index) { + this.sensorTableFocusIndex = index; + } + + public sensorTableBlur(index) { + this.sensorTableFocusIndex = -1; + } + public sensorSelectVisible = false; + public treeMouseOverOccur = false; + public onTreeMouseOver(event) { + this.treeMouseOverOccur = true; + } + public onTreeMouseOut(event) { + this.treeMouseOverOccur = false; + setTimeout(() => { + if (!this.treeMouseOverOccur) { + this.sensorSelectVisible = false; + } + }, 900); + } +} diff --git a/src/app/routes/operation/device-maintenance/device-maintenance.component.html b/src/app/routes/operation/device-maintenance/device-maintenance.component.html new file mode 100644 index 0000000..d775f47 --- /dev/null +++ b/src/app/routes/operation/device-maintenance/device-maintenance.component.html @@ -0,0 +1,4 @@ +<div class="content__title"> + <h1>Page Name</h1> +</div> +<pro-header [title]="'Page Name'"></pro-header> diff --git a/src/app/routes/operation/device-maintenance/device-maintenance.component.ts b/src/app/routes/operation/device-maintenance/device-maintenance.component.ts new file mode 100644 index 0000000..5d946eb --- /dev/null +++ b/src/app/routes/operation/device-maintenance/device-maintenance.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit } from '@angular/core'; +import { _HttpClient } from '@delon/theme'; + +@Component({ + selector: 'app-device-maintenance', + templateUrl: './device-maintenance.component.html', +}) +export class DeviceMaintenanceComponent implements OnInit { + + constructor( + private http: _HttpClient + ) { } + + ngOnInit() { + } + +} diff --git a/src/app/routes/operation/device-status/device-status.component.html b/src/app/routes/operation/device-status/device-status.component.html new file mode 100644 index 0000000..d775f47 --- /dev/null +++ b/src/app/routes/operation/device-status/device-status.component.html @@ -0,0 +1,4 @@ +<div class="content__title"> + <h1>Page Name</h1> +</div> +<pro-header [title]="'Page Name'"></pro-header> diff --git a/src/app/routes/operation/device-status/device-status.component.ts b/src/app/routes/operation/device-status/device-status.component.ts new file mode 100644 index 0000000..2e709f1 --- /dev/null +++ b/src/app/routes/operation/device-status/device-status.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit } from '@angular/core'; +import { _HttpClient } from '@delon/theme'; + +@Component({ + selector: 'app-device-status', + templateUrl: './device-status.component.html', +}) +export class DeviceStatusComponent implements OnInit { + + constructor( + private http: _HttpClient + ) { } + + ngOnInit() { + } + +} diff --git a/src/app/routes/operation/operation.module.ts b/src/app/routes/operation/operation.module.ts new file mode 100644 index 0000000..d0be61d --- /dev/null +++ b/src/app/routes/operation/operation.module.ts @@ -0,0 +1,52 @@ +import { NgModule } from '@angular/core'; +import { SharedModule } from '@shared/shared.module'; +import { DataAuditComponent } from './data-audit/data-audit.component'; +import { DeviceStatusComponent } from './device-status/device-status.component'; +import { DeviceMaintenanceComponent } from './device-maintenance/device-maintenance.component'; +import { PipeModule } from '@business/pipe/pipe.module'; +import { CommonModule } from '@angular/common'; +import { RouterModule, Routes } from '@angular/router'; +import { NgxEchartsModule } from 'ngx-echarts'; +import { NzTreeModule } from 'ng-tree-antd'; +import { SensorsService } from '@business/services/http/sensors.service'; +import { NzMessageService } from 'ng-zorro-antd'; +import { AreacodeService } from '@business/services/http/areacode.service'; +import { MonitorPointService } from '@business/services/http/monitor-point.service'; +import { DeviceService } from '@business/services/http/device.service'; +import { DateService } from '@business/services/util/date.service'; + + +const COMPONENT_NOROUNT = []; + +const routes: Routes = [ + { + path: '', + children: [ + { path: 'data-audit', component: DataAuditComponent }, + { path: 'device-status', component: DeviceStatusComponent }, + { path: 'device-maintenance', component: DeviceMaintenanceComponent } + ] + } +]; + +@NgModule({ + imports: [ + // ������������������������������������ + PipeModule, + NzTreeModule, + NgxEchartsModule, + CommonModule, + SharedModule, + RouterModule.forChild(routes) + ], + declarations: [ + ...COMPONENT_NOROUNT, + DataAuditComponent, + DeviceStatusComponent, + DeviceMaintenanceComponent, + ], + entryComponents: COMPONENT_NOROUNT, + providers: [SensorsService, NzMessageService, AreacodeService, + MonitorPointService, DeviceService, DateService], +}) +export class OperationModule { } diff --git a/src/app/routes/raise-dust/raise-dust.component.html b/src/app/routes/raise-dust/raise-dust.component.html new file mode 100644 index 0000000..d775f47 --- /dev/null +++ b/src/app/routes/raise-dust/raise-dust.component.html @@ -0,0 +1,4 @@ +<div class="content__title"> + <h1>Page Name</h1> +</div> +<pro-header [title]="'Page Name'"></pro-header> diff --git a/src/app/routes/raise-dust/raise-dust.component.ts b/src/app/routes/raise-dust/raise-dust.component.ts new file mode 100644 index 0000000..f988f55 --- /dev/null +++ b/src/app/routes/raise-dust/raise-dust.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit } from '@angular/core'; +import { _HttpClient } from '@delon/theme'; + +@Component({ + selector: 'app-raise-dust', + templateUrl: './raise-dust.component.html', +}) +export class RaiseDustComponent implements OnInit { + + constructor( + private http: _HttpClient + ) { } + + ngOnInit() { + } + +} diff --git a/src/app/routes/reports/reports.module.ts b/src/app/routes/reports/reports.module.ts index 9116760..9714baa 100644 --- a/src/app/routes/reports/reports.module.ts +++ b/src/app/routes/reports/reports.module.ts @@ -27,7 +27,7 @@ { path: 'demo', component: DemoComponent }, { path: 'excel', component: ExcelComponent }, { path: 'alarm', component: AlarmComponent }, - { path: 'query2', component: Query2Component }, + { path: 'query2', component: Query2Component }, ] } ]; diff --git a/src/app/routes/routes-routing.module.ts b/src/app/routes/routes-routing.module.ts index 2a66c5d..0304e52 100644 --- a/src/app/routes/routes-routing.module.ts +++ b/src/app/routes/routes-routing.module.ts @@ -16,6 +16,9 @@ import { ForecastingWarningComponent } from './forecasting-warning/forecasting-warning.component'; import { PollutionManagementComponent } from 'app/routes/pollution/management/management.component'; import { EnvironmentManagementComponent } from 'app/routes/environment/management/management.component'; +import { GridTraceComponent } from './grid-trace/grid-trace.component'; +import { SandTableComponent } from './sand-table/sand-table.component'; +import { RaiseDustComponent } from './raise-dust/raise-dust.component'; const routes: Routes = [ { @@ -32,20 +35,17 @@ loadChildren: "./enterprise-management/enterprise-management.module#EnterpriseManagementModule" }, { path: 'statistics', loadChildren: './statistics/statistics.module#StatisticsModule' }, - { 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: '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' }, - { path: 'systems', loadChildren: './systems/systems.module#SystemsModule' }, - { path: 'reports', loadChildren: './reports/reports.module#ReportsModule' }, - { path: 'forecasting-warning', component: ForecastingWarningComponent }, { path: 'pollution/management', component: PollutionManagementComponent }, - { path: 'environment/management', component: EnvironmentManagementComponent } + { path: 'environment/management', component: EnvironmentManagementComponent }, + { path: 'grid-trace', component: GridTraceComponent }, + { path: 'reports', loadChildren: './reports/reports.module#ReportsModule' }, + { + path: "operation", + loadChildren: "./operation/operation.module#OperationModule" + }, + { path: 'sand-table', component: SandTableComponent }, + { path: 'raise-dust', component: RaiseDustComponent }, ] }, // passport { diff --git a/src/app/routes/routes.module.ts b/src/app/routes/routes.module.ts index 1f08295..16a911d 100644 --- a/src/app/routes/routes.module.ts +++ b/src/app/routes/routes.module.ts @@ -33,6 +33,9 @@ import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/last'; import 'rxjs/add/operator/delay'; +import { GridTraceComponent } from './grid-trace/grid-trace.component'; +import { RaiseDustComponent } from './raise-dust/raise-dust.component'; +import { SandTableComponent } from './sand-table/sand-table.component'; @NgModule({ imports: [ SharedModule, RouteRoutingModule ], @@ -48,7 +51,10 @@ // MonitorpointComponent, // CalendarComponent, // AnalysisComponent, - EnvironmentManagementComponent + EnvironmentManagementComponent, + GridTraceComponent, + RaiseDustComponent, + SandTableComponent ], providers: [ _HttpClient, diff --git a/src/app/routes/sand-table/sand-table.component.html b/src/app/routes/sand-table/sand-table.component.html new file mode 100644 index 0000000..d775f47 --- /dev/null +++ b/src/app/routes/sand-table/sand-table.component.html @@ -0,0 +1,4 @@ +<div class="content__title"> + <h1>Page Name</h1> +</div> +<pro-header [title]="'Page Name'"></pro-header> diff --git a/src/app/routes/sand-table/sand-table.component.ts b/src/app/routes/sand-table/sand-table.component.ts new file mode 100644 index 0000000..bb30bb4 --- /dev/null +++ b/src/app/routes/sand-table/sand-table.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit } from '@angular/core'; +import { _HttpClient } from '@delon/theme'; + +@Component({ + selector: 'app-sand-table', + templateUrl: './sand-table.component.html', +}) +export class SandTableComponent implements OnInit { + + constructor( + private http: _HttpClient + ) { } + + ngOnInit() { + } + +} diff --git a/src/assets/app-data.json b/src/assets/app-data.json index 874920b..3e82812 100644 --- a/src/assets/app-data.json +++ b/src/assets/app-data.json @@ -72,7 +72,7 @@ { "text": "������������", "icon": "icon-support", - "link": "/" + "link": "/grid-trace" }, { "text": "������������", @@ -80,29 +80,29 @@ "children": [ { "text": "������������", - "link": "/reports/query" + "link": "/operation/data-audit" } , { "text": "������������", - "link": "/" + "link": "/operation/device-status" } , { "text": "������������", - "link": "/" + "link": "/operation/device-maintenance" } ] }, { "text": "������������", "icon": "icon-flag", - "link": "/" + "link": "/sand-table" }, { "text": "������������", "icon": "icon-people", - "link": "/" + "link": "/raise-dust" } ] } -- Gitblit v1.8.0