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 { _HttpClient } from '@delon/theme';
|
import { TimeUnits, AreaRange, ResultCode } from '@business/enum/types.enum';
|
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';
|
import { DateService } from '@business/services/util/date.service';
|
import { NzMessageService } from 'ng-zorro-antd';
|
@Component({
|
selector: 'app-query',
|
templateUrl: './query.component.html',
|
styleUrls: ['./query.component.less']
|
})
|
export class QueryComponent implements OnInit {
|
public sensorList: Sensor[];
|
public timeUnits: { label: string, value: TimeUnits }[] = [];
|
public lineChartCriteria: LineChartCriteria = { sensorKey: 'e1', timePeriod: { startTime: null, endTime: null }, dataConditions: [] };
|
_areas: { label: any, value: any };
|
_monitorPoint: MonitorPoint;
|
_device: Device;
|
_dataTimeUnits: { label: string, value: TimeUnits } = { label: '日', value: TimeUnits.DAY };
|
_actualTime: number;
|
actualTimes: number[];
|
public _timePeriodUnitValue: TimeUnits = TimeUnits.DAY; // 横坐标时间单位
|
dataTimeUnitsList: { label: string, value: TimeUnits }[] = [];
|
public monitorPoints: MonitorPoint[];
|
public devices: Device[];
|
|
dataConditionTemp: DataCondition = { timeUnits: TimeUnits.DAY, actualTime: null };
|
get lineChartSensorName(): String {
|
return !!this.sensorList ? this.sensorList.find(sensor => sensor.sensorKey === this.lineChartCriteria.sensorKey).name : null;
|
}
|
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) {
|
const pageBean: PageBean = { pageIndex: 0, pageSize: 20 };
|
const example = new ExampleService();
|
let areaName = '';
|
switch (this.dataConditionTemp.areaRange) {
|
case AreaRange.PROVINCE:
|
areaName = 'provinceCode'; break;
|
case AreaRange.CITY:
|
areaName = 'cityCode'; break;
|
case AreaRange.AREA:
|
areaName = 'areaCode'; break;
|
}
|
if (!!text) {
|
example.or().andLike({ name: 'name', value: '%' + text + '%' })
|
.andEqualTo({ name: areaName, value: this.dataConditionTemp.areaRangeId });
|
} else {
|
example.or()
|
.andEqualTo({ name: areaName, value: this.dataConditionTemp.areaRangeId });
|
}
|
this.monitorPointService.getPageByExample(pageBean, example).subscribe(
|
(res: PageBean) => {
|
if (!!res && !!res.data) {
|
this.monitorPoints = res.data;
|
}
|
}
|
);
|
}
|
ngOnInit() {
|
this.initPage();
|
}
|
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 [];
|
}
|
} else {
|
return this.newArray(60).slice(1);
|
}
|
|
},
|
nzDisabledSeconds: () => {
|
return this.newArray(60).slice(1);
|
}
|
} : false;
|
}
|
get _endShowTime() {
|
return this.timeType.timePickerOption ?
|
{
|
nzHideDisabledOptions: true,
|
nzDisabledHours: () => {
|
const startTime = this.lineChartCriteria.timePeriod.startTime;
|
return this._isSameDay && !!startTime ? this.newArray(startTime.getHours()) : [];
|
},
|
nzDisabledMinutes: (h) => {
|
if (this._timePeriodUnitValue === TimeUnits.MINUTE) {
|
const startTime = this.lineChartCriteria.timePeriod.startTime;
|
if (this._isSameDay && h === startTime.getHours()) {
|
return this.newArray(startTime.getMinutes());
|
} else {
|
return [];
|
}
|
|
} else {
|
return this.newArray(60).slice(1);
|
}
|
},
|
nzDisabledSeconds: () => {
|
return this.newArray(60).slice(1);
|
}
|
} : false;
|
}
|
newArray = (len) => {
|
const result = [];
|
for (let i = 0; i < len; i++) {
|
result.push(i);
|
}
|
return result;
|
}
|
newArray2 = (start, len) => {
|
const result = [];
|
for (let i = start; i <= len; i++) {
|
result.push(i);
|
}
|
return result;
|
}
|
_disabledStartDate = (startValue: Date) => {
|
if (!startValue || !this.lineChartCriteria.timePeriod.endTime) {
|
return false;
|
}
|
let format = this.timeType.dateFormat;
|
// 单位为时，开始日期中 日默认时间设置为 00.00.00
|
if (format.indexOf('H', 11)) {
|
format = format.replace(/HH.*/, '');
|
}
|
const _startValue = moment(moment(startValue).format(format), format);
|
return _startValue.valueOf() > this.lineChartCriteria.timePeriod.endTime.getTime();
|
}
|
_disabledEndDate = (endValue: Date) => {
|
if (!endValue || !this.lineChartCriteria.timePeriod.startTime) {
|
return false;
|
}
|
const _endValue: Date = new Date(endValue.getTime());
|
_endValue.setHours(23);
|
_endValue.setMinutes(59);
|
_endValue.setSeconds(59);
|
return _endValue.getTime() < this.lineChartCriteria.timePeriod.startTime.getTime();
|
}
|
_timeChange = (value, type?: 'start'|'end') => {
|
const startTime = this.lineChartCriteria.timePeriod.startTime;
|
const endTime = this.lineChartCriteria.timePeriod.endTime;
|
|
if (type === 'start') {
|
this.lineChartCriteria.timePeriod.startTime = value;
|
!!endTime ? '' : this.lineChartCriteria.timePeriod.endTime = value;
|
} else {
|
this.lineChartCriteria.timePeriod.endTime = value;
|
!!startTime ? '' : this.lineChartCriteria.timePeriod.startTime === value;
|
}
|
|
}
|
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.lineChartCriteria.timePeriod.timeUnits ) {
|
case TimeUnits.YEAR:
|
mo.month(month).date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
|
case TimeUnits.MONTH:
|
mo.date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
|
case TimeUnits.DAY:
|
mo.hour(hour).minute(minute).second(second).millisecond(millisecond); break;
|
case TimeUnits.HOUR:
|
mo.minute(minute).second(second).millisecond(millisecond); break;
|
case TimeUnits.MINUTE:
|
mo.second(second).millisecond(millisecond); 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 }) {
|
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;
|
}
|
}
|
setAreaCodes(codes: string[]) {
|
if (!!codes && !!codes.length) {
|
const n = codes.length;
|
if (this.dataConditionTemp.areaRangeId !== Number(codes[n - 1])) {
|
this.dataConditionTemp.areaRangeId = Number(codes[n - 1]);
|
switch (n) {
|
case 1:
|
this.dataConditionTemp.areaRange = AreaRange.PROVINCE;
|
break;
|
case 2:
|
this.dataConditionTemp.areaRange = AreaRange.CITY;
|
break;
|
case 3:
|
this.dataConditionTemp.areaRange = AreaRange.AREA;
|
break;
|
}
|
this.monitorPointsChange(null);
|
this._monitorPoint = null;
|
this.devicesChange(null);
|
this._device = null;
|
}
|
this._areas.value = codes;
|
}
|
}
|
// 下拉框设置监控点事件
|
setMonitorPoint(value: MonitorPoint) {
|
if (!!value) {
|
this.dataConditionTemp.areaRangeId = value.id;
|
this.dataConditionTemp.areaRange = AreaRange.MONITORPOINT;
|
} else {
|
this.setAreaCodes(this._areas.value);
|
}
|
if (value !== this._monitorPoint) {
|
this._device = null;
|
this.devicesChange(!!value ? value.id : null);
|
}
|
this._monitorPoint = value;
|
}
|
// 设置设备的值
|
setDevice(value: Device) {
|
if (!!value) {
|
this._device = value;
|
this.dataConditionTemp.areaRangeId = value.id;
|
this.dataConditionTemp.areaRange = AreaRange.DEVICE;
|
} else {
|
this.setMonitorPoint(this._monitorPoint);
|
}
|
}
|
setDataTimeUnits(item) {
|
this._dataTimeUnits = item;
|
this.dataConditionTemp.timeUnits = item.value;
|
if (!this.actualTimeDisabled) {
|
this._actualTime = 1;
|
switch (item.value) {
|
case TimeUnits.MONTH:
|
this.actualTimes = this.newArray2(1, 12); break;
|
case TimeUnits.DAY:
|
this.actualTimes = this.newArray2(1, 31); break;
|
case TimeUnits.HOUR:
|
this.actualTimes = this.newArray2(0, 23); break;
|
case TimeUnits.MINUTE:
|
this.actualTimes = this.newArray2(1, 59); break;
|
}
|
}
|
}
|
// 实际时间是否可用 actualTimeDisabled
|
get actualTimeDisabled() {
|
if (!!this.dataTimeUnitsList && this._dataTimeUnits === this.dataTimeUnitsList[0]) {
|
this.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);
|
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;
|
}
|
}
|
}
|
);
|
}
|
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'
|
}
|
}
|
},
|
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;
|
}
|
}
|
