| | |
| | | import { environment } from '../../../../environments/environment'; |
| | | import { zip } from 'rxjs/observable/zip'; |
| | | import { Component, OnInit, OnDestroy } from '@angular/core'; |
| | | import { NzMessageService } from 'ng-zorro-antd'; |
| | | import { getTimeDistance, yuan, fixedZero } from '@delon/abc'; |
| | | import { _HttpClient } from '@delon/theme'; |
| | | import {HttpClient} from '@angular/common/http'; |
| | | import { HttpClient } from '@angular/common/http'; |
| | | import * as moment from 'moment'; |
| | | import { DeviceService } from '@business/services/http/device.service'; |
| | | import { ExampleService } from '@business/services/util/example.service'; |
| | | import { ResultBean } from '@business/entity/grid'; |
| | | import { TimeUnits } from '@business/enum/types.enum'; |
| | | import { ToolsService } from '@business/services/util/tools.service'; |
| | | |
| | | @Component({ |
| | | selector: 'app-dashboard-workplace', |
| | | templateUrl: './workplace.component.html', |
| | | styleUrls: ['./workplace.component.less'] |
| | | styleUrls: ['./workplace.component.less'], |
| | | providers: [DeviceService] |
| | | }) |
| | | export class DashboardWorkplaceComponent implements OnInit, OnDestroy { |
| | | |
| | | totalDeviceCountList: any[] = []; |
| | | totalDeviceCount = 0; |
| | | avgDeviceCount: string; |
| | | |
| | | totalDeviceCountList = null; |
| | | totalDeviceCount = ''; |
| | | avgDeviceCount = ''; |
| | | deviceCountLoading = true; |
| | | // 报警统计 |
| | | alarmCountList:{x: string,y: number}[] = null; |
| | | alarmCountCurrMonth = ''; |
| | | alarmCountCurrDay = '';// 单月报警次数 |
| | | alarmCountLoading = true; |
| | | operationLoading = true; |
| | | operNormalPercent = 0; |
| | | activities: any[] = []; |
| | | radarData: any[] = []; |
| | | loading = true; |
| | | |
| | | public alarmData: any = {}; |
| | | public alarmDatas = [ |
| | | { title: '所有', color: 'purple', data: [] }, |
| | | { title: '一级', color: 'yellow', data: [] }, |
| | | { title: '二级', color: 'orange', data: [] }, |
| | | { title: '三级', color: 'red', data: [] } |
| | | ]; |
| | | public alertData = [[], [], [], []]; |
| | | salesType = '0'; |
| | | salesTotal = 0; |
| | | salesPieData: any; |
| | | members = [ |
| | | { |
| | | id: 'members-1', |
| | | title: '七星官网', |
| | | logo: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', |
| | | link: '', |
| | | id: 'members-1', |
| | | title: '七星官网', |
| | | logo: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', |
| | | link: '', |
| | | }, |
| | | { |
| | | id: 'members-2', |
| | | title: '七星商城', |
| | | logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', |
| | | link: '', |
| | | id: 'members-2', |
| | | title: '七星商城', |
| | | logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', |
| | | link: '', |
| | | }, |
| | | { |
| | | id: 'members-3', |
| | | title: '外链三', |
| | | logo: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', |
| | | link: '', |
| | | id: 'members-3', |
| | | title: '外链三', |
| | | logo: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', |
| | | link: '', |
| | | }, |
| | | { |
| | | id: 'members-4', |
| | | title: '外链四', |
| | | logo: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', |
| | | link: '', |
| | | id: 'members-4', |
| | | title: '外链四', |
| | | logo: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', |
| | | link: '', |
| | | } |
| | | ]; |
| | | ]; |
| | | |
| | | data: any = {}; |
| | | |
| | |
| | | end: null |
| | | }; |
| | | |
| | | rankingListData: any[] = [ |
| | | {title: `PM 2.5`, total: 230}, |
| | | {title: `PM 10`, total: 175}, |
| | | {title: `二氧化硫`, total: 123}, |
| | | {title: `二氧化氮`, total: 92}, |
| | | {title: `甲醛`, total: 39}, |
| | | {title: `氯气`, total: 24}, |
| | | {title: `一氧化碳`, total: 8} |
| | | ]; |
| | | rankingListData: any[] = []; |
| | | |
| | | constructor( |
| | | private deviceService: DeviceService, |
| | | private http: _HttpClient, |
| | | public msg: NzMessageService, |
| | | private http2: HttpClient) { |
| | | } |
| | | |
| | | ngOnInit() { |
| | | const today = new Date().getTime(); |
| | | const fakeDC = [60, 135, 70, 112, 80, 170, 200, 140, 52, 119, 164, 230]; |
| | | for (let i = 0; i < 12; i += 1) { |
| | | this.totalDeviceCountList.push({ |
| | | x: moment(today).subtract(-1*i, 'months').format( |
| | | "YYYY-MM" |
| | | ), |
| | | y: fakeDC[i] |
| | | selectedIndexChange(index) { |
| | | this.rankingListData = []; |
| | | if (this.alarmDatas[index].data.length < 1) { |
| | | this.http2.get(environment.SERVER_BASH_URL + 'report/alarm-year', { params: { state: index > 0 ? index : null } }).subscribe((res: any) => { |
| | | const data = []; |
| | | for (let i = 0; i < res.data.length; i += 1) { |
| | | data.push({ x: `${i + 1}月`, y: !!res.data[i] ? res.data[i] : 0 }); |
| | | } |
| | | this.alarmDatas[index].data = data; |
| | | }); |
| | | this.totalDeviceCount += fakeDC[i]; |
| | | } |
| | | this.avgDeviceCount = (this.totalDeviceCount/12).toFixed(0); |
| | | if (this.alertData[index].length > 0) { |
| | | this.alertData[index].forEach(item => { |
| | | this.rankingListData.push( |
| | | { |
| | | title: item.x, |
| | | total: item.y |
| | | } |
| | | ); |
| | | }); |
| | | } else { |
| | | this.http2.get(environment.SERVER_BASH_URL + 'report/alarm-month', { params: { state: index > 0 ? index : null } }).subscribe((res: any) => { |
| | | const data = []; |
| | | for (let i = 0; i < res.data.length; i += 1) { |
| | | for (const key in res.data[i]) { |
| | | data.push({ x: key, y: res.data[i][key] }); |
| | | this.rankingListData.push( |
| | | { |
| | | title: key, |
| | | total: res.data[i][key] |
| | | } |
| | | ); |
| | | } |
| | | } |
| | | this.alertData[index] = data; |
| | | }); |
| | | } |
| | | } |
| | | |
| | | const alarmData = []; |
| | | const alarmData_1 = []; |
| | | const alarmData_2 = []; |
| | | const alarmData_3 = []; |
| | | for (let i = 0; i < 12; i += 1) { |
| | | alarmData.push({ x: `${i + 1}月`, y: Math.floor(Math.random() * 1000) + 500 }); |
| | | alarmData_1.push({ x: `${i + 1}月`, y: Math.floor(Math.random() * 1000) + 100 }); |
| | | alarmData_2.push({ x: `${i + 1}月`, y: Math.floor(Math.random() * 1000) + 200 }); |
| | | alarmData_3.push({ x: `${i + 1}月`, y: Math.floor(Math.random() * 1000) + 300 }); |
| | | changeSaleType() { |
| | | if (this.alertData[this.salesType].length > 0) { |
| | | this.salesPieData = this.alertData[this.salesType]; |
| | | this.salesTotal = this.salesPieData.reduce((pre, now) => now.y + pre, 0); |
| | | } else { |
| | | this.http2.get(environment.SERVER_BASH_URL + 'report/alarm-month', { params: { state: this.salesType === '0' ? null : this.salesType } }).subscribe((res: any) => { |
| | | const data = []; |
| | | for (let i = 0; i < res.data.length; i += 1) { |
| | | for (const key in res.data[i]) { |
| | | data.push({ x: key, y: res.data[i][key] }); |
| | | } |
| | | } |
| | | this.salesPieData = this.alertData[this.salesType] = data; |
| | | this.salesTotal = this.salesPieData.reduce((pre, now) => now.y + pre, 0); |
| | | }); |
| | | } |
| | | } |
| | | |
| | | const alertData = []; |
| | | const alertData_1 = []; |
| | | const alertData_2 = []; |
| | | const alertData_3 = []; |
| | | for (let i = 0; i < 7; i += 1) { |
| | | alertData.push({ x: this.rankingListData[i].title, y: Math.floor(Math.random() * 1000) + 500 }); |
| | | alertData_1.push({ x: this.rankingListData[i].title, y: Math.floor(Math.random() * 1000) + 100 }); |
| | | alertData_2.push({ x: this.rankingListData[i].title, y: Math.floor(Math.random() * 1000) + 200 }); |
| | | alertData_3.push({ x: this.rankingListData[i].title, y: Math.floor(Math.random() * 1000) + 300 }); |
| | | } |
| | | ngOnInit() { |
| | | this.selectedIndexChange(0); |
| | | this.changeSaleType(); |
| | | |
| | | // const today = new Date().getTime(); |
| | | // const fakeDC = [60, 135, 70, 112, 80, 170, 200, 140, 52, 119, 164, 230]; |
| | | // for (let i = 0; i < 12; i += 1) { |
| | | // this.totalDeviceCountList.push({ |
| | | // x: moment(today).subtract(-1 * i, 'months').format( |
| | | // "YYYY-MM" |
| | | // ), |
| | | // y: fakeDC[i] |
| | | // }); |
| | | // this.totalDeviceCount += fakeDC[i]; |
| | | // } |
| | | let example1 = new ExampleService(); |
| | | let mo = moment(); |
| | | example1.or().andGreaterThanOrEqualTo({ name: "createTime", value: mo.format('YYYY-MM-01 00:00:00') }); |
| | | let example2 = new ExampleService(); |
| | | let example3 = new ExampleService(); |
| | | example3.or().andNotEqualTo({name:'state',value:4}); |
| | | zip(this.deviceService.countByExample(example1), |
| | | this.deviceService.countByExample(example2), |
| | | this.http.get<ResultBean<{time: string,count: number}[]>>('device/count-by-times',{start:mo.format('YYYY-01-01 00:00:00'),end:mo.format('YYYY-12-31 23:59:59')}), |
| | | this.deviceService.countByExample(example3)).subscribe( |
| | | ([rWtihAvg, rWithToltal,rWithList,rWithNormal]) => { |
| | | if (!!rWtihAvg.code && !!rWithToltal&&!!rWithList.code) { |
| | | this.avgDeviceCount = ToolsService.toThousands(rWtihAvg.data.toString()); |
| | | this.totalDeviceCount = ToolsService.toThousands(rWithToltal.data.toString()); |
| | | this.totalDeviceCountList = rWithList.data.map(item => { |
| | | return {x:item.time,y:item.count}; |
| | | }) |
| | | this.operNormalPercent = Math.round(rWithNormal.data/rWithToltal.data*100); |
| | | this.deviceCountLoading = false; |
| | | this.operationLoading = false; |
| | | } |
| | | } |
| | | ); |
| | | zip( |
| | | this.http.get<ResultBean<{time: string,count: number}[]>>("alarm/count-by-times",{start: mo.format('YYYY-MM-01 00:00:00'),end: null,timeUnits: TimeUnits.DAY}), |
| | | this.http.get<ResultBean<{time: string,count: number}[]>>("alarm/count-by-times",{start: mo.format('YYYY-MM-01 00:00:00'),end: null}), |
| | | this.http.get<ResultBean<{time: string,count: number}[]>>("alarm/count-by-times",{start: mo.format('YYYY-MM-DD 00:00:00'),end: null}) |
| | | ).subscribe( |
| | | ([rWithList,rWithMonth,rWithDay]) => { |
| | | if(!!rWithList.code&&!!rWithMonth.code&&!!rWithDay.code){ |
| | | this.alarmCountList = rWithList.data.map( |
| | | item => { |
| | | return {x:item.time,y:item.count}; |
| | | } |
| | | ); |
| | | if(!!rWithMonth.data&&rWithMonth.data.length>0){ |
| | | this.alarmCountCurrMonth = ToolsService.toThousands(rWithMonth.data[0].count.toString()); |
| | | } |
| | | if(!!rWithDay.data&&rWithDay.data.length>0) { |
| | | this.alarmCountCurrDay = ToolsService.toThousands(rWithDay.data[0].count.toString()); |
| | | } |
| | | this.alarmCountLoading = false; |
| | | } |
| | | } |
| | | ); |
| | | // this.avgDeviceCount = (this.totalDeviceCount / 12).toFixed(0); |
| | | |
| | | |
| | | const visitData = []; |
| | | const beginDay = new Date().getTime(); |
| | |
| | | for (let i = 0; i < fakeY.length; i += 1) { |
| | | visitData.push({ |
| | | x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format( |
| | | "YYYY-MM-DD" |
| | | 'YYYY-MM-DD' |
| | | ), |
| | | y: fakeY[i] |
| | | }); |
| | |
| | | for (let i = 0; i < fakeY2.length; i += 1) { |
| | | visitData2.push({ |
| | | x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format( |
| | | "YYYY-MM-DD" |
| | | 'YYYY-MM-DD' |
| | | ), |
| | | y: fakeY2[i] |
| | | }); |
| | |
| | | status: Math.floor((Math.random() * 10) % 2) |
| | | }); |
| | | } |
| | | var res = { |
| | | alarmData: alarmData, |
| | | alarmData_1: alarmData_1, |
| | | alarmData_2: alarmData_2, |
| | | alarmData_3: alarmData_3, |
| | | |
| | | alertData: alertData, |
| | | alertData_1: alertData_1, |
| | | alertData_2: alertData_2, |
| | | alertData_3: alertData_3, |
| | | const res = { |
| | | |
| | | visitData: visitData, |
| | | visitData2: visitData2, |
| | |
| | | |
| | | this.data = res; |
| | | this.loading = false; |
| | | this.changeSaleType(); |
| | | |
| | | this.radarData = res.radarData; |
| | | |
| | | |
| | | const avatars = [ |
| | | 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay |
| | |
| | | 'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png' // Webpack |
| | | ]; |
| | | |
| | | var activities = [ |
| | | const activities = [ |
| | | { |
| | | id: 'trend-1', |
| | | updatedAt: new Date(), |
| | |
| | | sort(sortName, sortValue) { |
| | | this.data.searchData = [ |
| | | ...(<any[]>this.data.searchData).sort((a, b) => { |
| | | if (a[ sortName ] > b[ sortName ]) { |
| | | if (a[sortName] > b[sortName]) { |
| | | return (sortValue === 'ascend') ? 1 : -1; |
| | | } else if (a[ sortName ] < b[ sortName ]) { |
| | | } else if (a[sortName] < b[sortName]) { |
| | | return (sortValue === 'ascend') ? -1 : 1; |
| | | } else { |
| | | return 0; |
| | |
| | | ]; |
| | | } |
| | | |
| | | salesType = '0'; |
| | | salesPieData: any; |
| | | salesTotal = 0; |
| | | changeSaleType() { |
| | | if(this.salesType == '0') { |
| | | this.salesPieData = this.data.alertData; |
| | | } else if(this.salesType == '1') { |
| | | this.salesPieData = this.data.alertData_1; |
| | | } else if(this.salesType == '2') { |
| | | this.salesPieData = this.data.alertData_2; |
| | | } else if(this.salesType == '3') { |
| | | this.salesPieData = this.data.alertData_3; |
| | | } |
| | | if (this.salesPieData) this.salesTotal = this.salesPieData.reduce((pre, now) => now.y + pre, 0); |
| | | } |
| | | |
| | | handlePieValueFormat(value: any) { |
| | | return value + "次"; |
| | | return value + '次'; |
| | | } |
| | | } |