| | |
| | | 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 * 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 { |
| | | notice: any[] = []; |
| | | |
| | | 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; |
| | | |
| | | // region: mock data |
| | | links = [ |
| | | { |
| | | title: '操作一', |
| | | href: '', |
| | | }, |
| | | { |
| | | title: '操作二', |
| | | href: '', |
| | | }, |
| | | { |
| | | title: '操作三', |
| | | href: '', |
| | | }, |
| | | { |
| | | title: '操作四', |
| | | href: '', |
| | | }, |
| | | { |
| | | title: '操作五', |
| | | href: '', |
| | | }, |
| | | { |
| | | title: '操作六', |
| | | href: '', |
| | | }, |
| | | 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-5', |
| | | title: '骗你学计算机', |
| | | logo: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', |
| | | link: '', |
| | | }, |
| | | ]; |
| | | // endregion |
| | | id: 'members-4', |
| | | title: '外链四', |
| | | logo: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', |
| | | link: '', |
| | | } |
| | | ]; |
| | | |
| | | constructor(private http: _HttpClient, public msg: NzMessageService) {} |
| | | data: any = {}; |
| | | |
| | | q: any = { |
| | | start: null, |
| | | end: null |
| | | }; |
| | | |
| | | rankingListData: any[] = []; |
| | | |
| | | constructor( |
| | | private deviceService: DeviceService, |
| | | private http: _HttpClient, |
| | | public msg: NzMessageService, |
| | | private http2: HttpClient) { |
| | | } |
| | | |
| | | 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; |
| | | }); |
| | | } |
| | | 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; |
| | | }); |
| | | } |
| | | } |
| | | |
| | | 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); |
| | | }); |
| | | } |
| | | } |
| | | |
| | | ngOnInit() { |
| | | // zip( |
| | | // this.http.get('/chart'), |
| | | // this.http.get('/api/notice'), |
| | | // this.http.get('/api/activities') |
| | | // ).subscribe(([ chart, notice, activities ]) => { |
| | | // this.radarData = chart['radarData']; |
| | | // this.notice = <any []>notice; |
| | | // this.activities = (<any []>activities).map((item: any) => { |
| | | // item.template = item.template.split(/@\{([^{}]*)\}/gi).map((key: string) => { |
| | | // if (item[key]) return `<a>${item[key].name}</a>`; |
| | | // return key; |
| | | // }); |
| | | // return item; |
| | | 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.loading = false; |
| | | // }); |
| | | // 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(); |
| | | |
| | | const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]; |
| | | 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' |
| | | ), |
| | | y: fakeY[i] |
| | | }); |
| | | } |
| | | const visitData2 = []; |
| | | const fakeY2 = [1, 6, 4, 8, 3, 7, 2]; |
| | | 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' |
| | | ), |
| | | y: fakeY2[i] |
| | | }); |
| | | } |
| | | |
| | | const radarOriginData = [ |
| | | { |
| | | name: '个人', |
| | | ref: 10, |
| | | koubei: 8, |
| | | output: 4, |
| | | contribute: 5, |
| | | hot: 7 |
| | | }, |
| | | { |
| | | name: '团队', |
| | | ref: 3, |
| | | koubei: 9, |
| | | output: 6, |
| | | contribute: 3, |
| | | hot: 1 |
| | | }, |
| | | { |
| | | name: '部门', |
| | | ref: 4, |
| | | koubei: 1, |
| | | output: 6, |
| | | contribute: 5, |
| | | hot: 7 |
| | | } |
| | | ]; |
| | | |
| | | const radarData = []; |
| | | const radarTitleMap = { |
| | | ref: '引用', |
| | | koubei: '口碑', |
| | | output: '产量', |
| | | contribute: '贡献', |
| | | hot: '热度' |
| | | }; |
| | | radarOriginData.forEach(item => { |
| | | Object.keys(item).forEach(key => { |
| | | if (key !== 'name') { |
| | | radarData.push({ |
| | | name: item.name, |
| | | label: radarTitleMap[key], |
| | | value: item[key] |
| | | }); |
| | | } |
| | | }); |
| | | }); |
| | | const searchData = []; |
| | | for (let i = 0; i < 50; i += 1) { |
| | | searchData.push({ |
| | | index: i + 1, |
| | | keyword: `搜索关键词-${i}`, |
| | | count: Math.floor(Math.random() * 1000), |
| | | range: Math.floor(Math.random() * 100), |
| | | status: Math.floor((Math.random() * 10) % 2) |
| | | }); |
| | | } |
| | | const res = { |
| | | |
| | | visitData: visitData, |
| | | visitData2: visitData2, |
| | | |
| | | radarOriginData: radarOriginData, |
| | | radarData: radarData, |
| | | searchData: searchData |
| | | }; |
| | | |
| | | this.data = res; |
| | | this.loading = false; |
| | | |
| | | this.radarData = res.radarData; |
| | | |
| | | |
| | | const avatars = [ |
| | | 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay |
| | | 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular |
| | | 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design |
| | | 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro |
| | | 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap |
| | | 'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React |
| | | 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue |
| | | 'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png' // Webpack |
| | | ]; |
| | | |
| | | const activities = [ |
| | | { |
| | | id: 'trend-1', |
| | | updatedAt: new Date(), |
| | | user: { |
| | | name: '林东东', |
| | | avatar: avatars[0], |
| | | }, |
| | | group: { |
| | | name: '高逼格设计天团', |
| | | link: 'http://github.com/', |
| | | }, |
| | | project: { |
| | | name: '六月迭代', |
| | | link: 'http://github.com/', |
| | | }, |
| | | template: '在 @{group} 新建项目 @{project}', |
| | | }, |
| | | { |
| | | id: 'trend-2', |
| | | updatedAt: new Date(), |
| | | user: { |
| | | name: '付小小', |
| | | avatar: avatars[1], |
| | | }, |
| | | group: { |
| | | name: '高逼格设计天团', |
| | | link: 'http://github.com/', |
| | | }, |
| | | project: { |
| | | name: '六月迭代', |
| | | link: 'http://github.com/', |
| | | }, |
| | | template: '在 @{group} 新建项目 @{project}', |
| | | }, |
| | | { |
| | | id: 'trend-3', |
| | | updatedAt: new Date(), |
| | | user: { |
| | | name: '曲丽丽', |
| | | avatar: avatars[2], |
| | | }, |
| | | group: { |
| | | name: '中二少女团', |
| | | link: 'http://github.com/', |
| | | }, |
| | | project: { |
| | | name: '六月迭代', |
| | | link: 'http://github.com/', |
| | | }, |
| | | template: '在 @{group} 新建项目 @{project}', |
| | | }, |
| | | { |
| | | id: 'trend-4', |
| | | updatedAt: new Date(), |
| | | user: { |
| | | name: '周星星', |
| | | avatar: avatars[3], |
| | | }, |
| | | project: { |
| | | name: '5 月日常迭代', |
| | | link: 'http://github.com/', |
| | | }, |
| | | template: '将 @{project} 更新至已发布状态', |
| | | }, |
| | | { |
| | | id: 'trend-5', |
| | | updatedAt: new Date(), |
| | | user: { |
| | | name: '朱偏右', |
| | | avatar: avatars[4], |
| | | }, |
| | | project: { |
| | | name: '工程效能', |
| | | link: 'http://github.com/', |
| | | }, |
| | | comment: { |
| | | name: '留言', |
| | | link: 'http://github.com/', |
| | | }, |
| | | template: '在 @{project} 发布了 @{comment}', |
| | | }, |
| | | { |
| | | id: 'trend-6', |
| | | updatedAt: new Date(), |
| | | user: { |
| | | name: '乐哥', |
| | | avatar: avatars[5], |
| | | }, |
| | | group: { |
| | | name: '程序员日常', |
| | | link: 'http://github.com/', |
| | | }, |
| | | project: { |
| | | name: '品牌迭代', |
| | | link: 'http://github.com/', |
| | | }, |
| | | template: '在 @{group} 新建项目 @{project}', |
| | | }, |
| | | { |
| | | id: 'trend-7', |
| | | updatedAt: new Date(), |
| | | user: { |
| | | name: '周星星', |
| | | avatar: avatars[3], |
| | | }, |
| | | project: { |
| | | name: '程序员日常', |
| | | link: 'http://github.com/', |
| | | }, |
| | | template: '将 @{project} 更新至上线状态', |
| | | } |
| | | ]; |
| | | this.activities = activities.map((item: any) => { |
| | | item.template = item.template.split(/@\{([^{}]*)\}/gi).map((key: string) => { |
| | | if (item[key]) return `<a>${item[key].name}</a>`; |
| | | return key; |
| | | }); |
| | | return item; |
| | | }); |
| | | } |
| | | |
| | | ngOnDestroy(): void { |
| | | } |
| | | |
| | | sort(sortName, sortValue) { |
| | | this.data.searchData = [ |
| | | ...(<any[]>this.data.searchData).sort((a, b) => { |
| | | if (a[sortName] > b[sortName]) { |
| | | return (sortValue === 'ascend') ? 1 : -1; |
| | | } else if (a[sortName] < b[sortName]) { |
| | | return (sortValue === 'ascend') ? -1 : 1; |
| | | } else { |
| | | return 0; |
| | | } |
| | | }) |
| | | ]; |
| | | } |
| | | |
| | | handlePieValueFormat(value: any) { |
| | | return value + '次'; |
| | | } |
| | | } |