From 032ca75e238cc2f2a96b3bf27532b5a243d9a24a Mon Sep 17 00:00:00 2001 From: 沈斌 <bluelazysb@hotmail.com> Date: Tue, 13 Mar 2018 16:00:41 +0800 Subject: [PATCH] 工作台数据统计页面 --- src/app/routes/dashboard/workplace/workplace.component.ts | 310 +++++++++++++-------------------------------------- 1 files changed, 78 insertions(+), 232 deletions(-) diff --git a/src/app/routes/dashboard/workplace/workplace.component.ts b/src/app/routes/dashboard/workplace/workplace.component.ts index 7698053..a2a21a6 100644 --- a/src/app/routes/dashboard/workplace/workplace.component.ts +++ b/src/app/routes/dashboard/workplace/workplace.component.ts @@ -17,97 +17,61 @@ totalDeviceCount = 0; avgDeviceCount: string; - notice: any[] = []; activities: any[] = []; radarData: any[] = []; loading = true; - // region: mock data - links = [ - { - title: '���������', - href: '', - }, - { - title: '���������', - href: '', - }, - { - title: '���������', - href: '', - }, - { - title: '���������', - href: '', - }, - { - title: '���������', - href: '', - }, - { - title: '���������', - href: '', - }, - ]; members = [ { id: 'members-1', - title: '���������������', + title: '������������', logo: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', link: '', }, { id: 'members-2', - title: '���������������', + title: '������������', logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', link: '', }, { id: 'members-3', - title: '������������', + title: '���������', logo: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', link: '', }, { id: 'members-4', - title: '���������������', + 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 - ngOnDestroy(): void { - } - - - data: any = { - salesData: [], - offlineData: [] - }; + data: any = {}; q: any = { start: null, end: null }; - rankingListData: any[] = Array(7).fill({}).map((item, i) => { - return { - title: `��������� ${i} ������`, - total: 323234 - }; - }); - constructor(private http: _HttpClient, public msg: NzMessageService, - private http2: HttpClient) {} + 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} + ]; + + constructor( + 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) { @@ -121,6 +85,27 @@ } this.avgDeviceCount = (this.totalDeviceCount/12).toFixed(0); + 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 }); + } + + 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 }); + } const visitData = []; const beginDay = new Date().getTime(); @@ -144,90 +129,6 @@ y: fakeY2[i] }); } - const salesData = []; - for (let i = 0; i < 12; i += 1) { - salesData.push({ - x: `${i + 1}���`, - y: Math.floor(Math.random() * 1000) + 200 - }); - } - - const salesTypeData = [ - { - x: "������������", - y: 4544 - }, - { - x: "������������", - y: 3321 - }, - { - x: "������������", - y: 3113 - }, - { - x: "������������", - y: 2341 - }, - { - x: "������������", - y: 1231 - }, - { - x: "������", - y: 1231 - } - ]; - - const salesTypeDataOnline = [ - { - x: "������������", - y: 244 - }, - { - x: "������������", - y: 321 - }, - { - x: "������������", - y: 311 - }, - { - x: "������������", - y: 41 - }, - { - x: "������������", - y: 121 - }, - { - x: '������', - y: 111 - } - ]; - - const salesTypeDataOffline = [ - { - x: '������������', - y: 99 - }, - { - x: '������������', - y: 188 - }, - { - x: '������������', - y: 344 - }, - { - x: '������������', - y: 255 - }, - { - x: '������', - y: 65 - } - ]; const offlineData = []; for (let i = 0; i < 10; i += 1) { @@ -302,12 +203,19 @@ }); } 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, + visitData: visitData, - salesData: salesData, visitData2: visitData2, - salesTypeData: salesTypeData, - salesTypeDataOnline: salesTypeDataOnline, - salesTypeDataOffline: salesTypeDataOffline, + offlineData: offlineData, offlineChartData: offlineChartData, radarOriginData: radarOriginData, @@ -324,17 +232,6 @@ this.radarData = res.radarData; - const titles = [ - 'Alipay', - 'Angular', - 'Ant Design', - 'Ant Design Pro', - 'Bootstrap', - 'React', - 'Vue', - 'Webpack' - ]; - const avatars = [ 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular @@ -345,70 +242,6 @@ 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue 'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png' // Webpack ]; - - var notice = [ - { - id: 'xxx1', - title: titles[0], - logo: avatars[0], - description: '������������������������������ ���������������������������������������', - updatedAt: new Date(), - member: '���������������', - href: '', - memberLink: '', - }, - { - id: 'xxx2', - title: titles[1], - logo: avatars[1], - description: '���������������������������������������������������������������������������', - updatedAt: new Date('2017-07-24'), - member: '���������������������', - href: '', - memberLink: '', - }, - { - id: 'xxx3', - title: titles[2], - logo: avatars[2], - description: '������������������������������������������������������������������', - updatedAt: new Date(), - member: '���������������', - href: '', - memberLink: '', - }, - { - id: 'xxx4', - title: titles[3], - logo: avatars[3], - description: '���������������������������������������������������������������������', - updatedAt: new Date('2017-07-23'), - member: '���������������', - href: '', - memberLink: '', - }, - { - id: 'xxx5', - title: titles[4], - logo: avatars[4], - description: '������������', - updatedAt: new Date('2017-07-23'), - member: '���������������������', - href: '', - memberLink: '', - }, - { - id: 'xxx6', - title: titles[5], - logo: avatars[5], - description: '������������������������������������������������������', - updatedAt: new Date('2017-07-23'), - member: '���������������������', - href: '', - memberLink: '', - }, - ]; - this.notice = notice; var activities = [ { @@ -509,6 +342,19 @@ }, 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) => { @@ -517,15 +363,9 @@ }); return item; }); - - - } - setDate(type: any) { - const rank = getTimeDistance(type); - this.q.start = rank[0]; - this.q.end = rank[1]; + ngOnDestroy(): void { } sort(sortName, sortValue) { @@ -542,18 +382,24 @@ ]; } - salesType = 'all'; + salesType = '0'; salesPieData: any; salesTotal = 0; changeSaleType() { - this.salesPieData = this.salesType === 'all' ? this.data.salesTypeData : ( - this.salesType === 'online' ? this.data.salesTypeDataOnline : this.data.salesTypeDataOffline - ); + 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 yuan(value); + return value + "���"; } _activeTab = 0; -- Gitblit v1.8.0