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.html | 36 +++-------- src/app/routes/dashboard/workplace/workplace.component.ts | 140 ++++++++++++---------------------------------- 2 files changed, 48 insertions(+), 128 deletions(-) diff --git a/src/app/routes/dashboard/workplace/workplace.component.html b/src/app/routes/dashboard/workplace/workplace.component.html index 027af1a..3d08c8c 100644 --- a/src/app/routes/dashboard/workplace/workplace.component.html +++ b/src/app/routes/dashboard/workplace/workplace.component.html @@ -113,7 +113,7 @@ <div nz-row> <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="16"> <div class="bar"> - <bar height="295" [title]="'2018���������������������������'" [data]="data.alarmData" color="purple"></bar> + <bar height="295" [title]="'������������������������'" [data]="data.alarmData" color="purple"></bar> </div> </div> <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8"> @@ -138,7 +138,7 @@ <div nz-row> <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="16"> <div class="bar"> - <bar height="295" [title]="'2018���������������������������'" [data]="data.alarmData" color="yellow"></bar> + <bar height="295" [title]="'������������������������'" [data]="data.alarmData_1" color="yellow"></bar> </div> </div> <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8"> @@ -163,7 +163,7 @@ <div nz-row> <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="16"> <div class="bar"> - <bar height="295" [title]="'2018���������������������������'" [data]="data.alarmData" color="orange"></bar> + <bar height="295" [title]="'������������������������'" [data]="data.alarmData_2" color="orange"></bar> </div> </div> <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8"> @@ -188,7 +188,7 @@ <div nz-row> <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="16"> <div class="bar"> - <bar height="295" [title]="'2018���������������������������'" [data]="data.alarmData" color="red"></bar> + <bar height="295" [title]="'������������������������'" [data]="data.alarmData_3" color="red"></bar> </div> </div> <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8"> @@ -272,36 +272,22 @@ </nz-card> </div> <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="12"> - <nz-card [nzLoading]="loading" [nzBordered]="false" nzTitle="���������������������" [nzBodyStyle]="{'padding.px': 24}" class="sales-card" style="min-height: 482px;"> + <nz-card [nzLoading]="loading" [nzBordered]="false" nzTitle="������������������" [nzBodyStyle]="{'padding.px': 24}" class="sales-card" style="min-height: 482px;"> <ng-template #extra> <div class="sales-card-extra"> - <nz-dropdown> - <nz-icon class="icon-group" nz-dropdown nzType="ellipsis"></nz-icon> - <ul nz-menu> - <li nz-menu-item>���������</li> - <li nz-menu-item>���������</li> - </ul> - </nz-dropdown> <div class="sales-type-radio"> <nz-radio-group [(ngModel)]="salesType" (ngModelChange)="changeSaleType()" [nzSize]="'large'"> - <label nz-radio-button [nzValue]="'all'"><span>������������</span></label> - <label nz-radio-button [nzValue]="'online'"><span>������</span></label> - <label nz-radio-button [nzValue]="'offline'"><span>������</span></label> + <label nz-radio-button [nzValue]="'0'"><span>������</span></label> + <label nz-radio-button [nzValue]="'1'"><span>������</span></label> + <label nz-radio-button [nzValue]="'2'"><span>������</span></label> + <label nz-radio-button [nzValue]="'3'"><span>������</span></label> </nz-radio-group> </div> </div> </ng-template> <ng-template #body> - <h4 class="margin:8px 0 32px 0;">���������</h4> - <pie - [hasLegend]="true" - subTitle="���������" - [height]="248" - [lineWidth]="4" - [total]="salesTotal" - [data]="salesPieData" - [valueFormat]="handlePieValueFormat"> - </pie> + <h4 class="margin:8px 0 32px 0;">������������</h4> + <pie [hasLegend]="true" subTitle="������������" [height]="248" [lineWidth]="4" [total]="salesTotal" [data]="salesPieData" [valueFormat]="handlePieValueFormat"></pie> </ng-template> </nz-card> </div> diff --git a/src/app/routes/dashboard/workplace/workplace.component.ts b/src/app/routes/dashboard/workplace/workplace.component.ts index d7e7561..a2a21a6 100644 --- a/src/app/routes/dashboard/workplace/workplace.component.ts +++ b/src/app/routes/dashboard/workplace/workplace.component.ts @@ -86,15 +86,26 @@ 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) + 200 - }); + 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(); @@ -118,84 +129,6 @@ y: fakeY2[i] }); } - - - 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) { @@ -271,12 +204,18 @@ } 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, visitData2: visitData2, - salesTypeData: salesTypeData, - salesTypeDataOnline: salesTypeDataOnline, - salesTypeDataOffline: salesTypeDataOffline, + offlineData: offlineData, offlineChartData: offlineChartData, radarOriginData: radarOriginData, @@ -292,17 +231,6 @@ this.changeSaleType(); 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 @@ -454,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