From fb0d052122fdc9f0ad83e55778d0f988bd9d2b82 Mon Sep 17 00:00:00 2001 From: 沈斌 <bluelazysb@hotmail.com> Date: Tue, 13 Mar 2018 15:18:27 +0800 Subject: [PATCH] 工作台数据统计页面 --- src/app/routes/dashboard/workplace/workplace.component.html | 150 ++++++++++-------------- src/app/routes/dashboard/workplace/workplace.component.ts | 184 ++++++++---------------------- 2 files changed, 113 insertions(+), 221 deletions(-) diff --git a/src/app/routes/dashboard/workplace/workplace.component.html b/src/app/routes/dashboard/workplace/workplace.component.html index e74510f..027af1a 100644 --- a/src/app/routes/dashboard/workplace/workplace.component.html +++ b/src/app/routes/dashboard/workplace/workplace.component.html @@ -40,12 +40,7 @@ <div nz-row [nzGutter]="24" class="pt-lg" style="margin-top: -24px"> <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6"> - <chart-card - [title]="'���������������'" - total="{{totalDeviceCount}}" - contentHeight="46px" - [action]="action1" - [footer]="footer1"> + <chart-card [title]="'���������������'" total="{{totalDeviceCount | number: '1.0'}}" contentHeight="46px" [action]="action1" [footer]="footer1"> <ng-template #action1> <nz-tooltip [nzTitle]="'���������������������������������������������������������'"> <nz-icon nz-tooltip nzType="info-circle-o"></nz-icon> @@ -62,22 +57,13 @@ </chart-card> </div> <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6"> - <chart-card [title]="'������������������'" - total="78%" - contentHeight="46px" - [action]="action2" - [footer]="footer2"> + <chart-card [title]="'������������������'" total="78%" contentHeight="46px" [action]="action2" [footer]="footer2"> <ng-template #action2> <nz-tooltip [nzTitle]="'������������������������������������������������������'"> <nz-icon nz-tooltip nzType="info-circle-o"></nz-icon> </nz-tooltip> </ng-template> - <mini-progress - height="46" - percent="78" - strokeWidth="8" - target="80" - color="#13C2C2"></mini-progress> + <mini-progress height="46" percent="78" strokeWidth="8" target="80" color="#13C2C2"></mini-progress> <ng-template #footer2> <div class="d-flex justify-content-between"> <trend flag="up">���������<span class="pl-sm">8%</span></trend> @@ -87,11 +73,7 @@ </chart-card> </div> <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6"> - <chart-card [title]="'������������'" - total="8,848" - contentHeight="46px" - [action]="action3" - [footer]="footer3"> + <chart-card [title]="'������������'" total="2,847" contentHeight="46px" [action]="action3" [footer]="footer3"> <ng-template #action3> <nz-tooltip [nzTitle]="'���������������������������������������������'"> <nz-icon nz-tooltip nzType="info-circle-o"></nz-icon> @@ -107,11 +89,7 @@ </chart-card> </div> <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6"> - <chart-card [title]="'���������������'" - total="6,560" - contentHeight="46px" - [action]="action4" - [footer]="footer4"> + <chart-card [title]="'���������������'" total="1,260" contentHeight="46px" [action]="action4" [footer]="footer4"> <ng-template #action4> <nz-tooltip [nzTitle]="'������������������������������������������������'"> <nz-icon nz-tooltip nzType="info-circle-o"></nz-icon> @@ -119,10 +97,10 @@ </ng-template> <mini-bar height="46" - color="orange" + color="gray" [data]="data.visitData"></mini-bar> <ng-template #footer4> - <p class="text-truncate">������������������:<span class="ml-sm">220</span></p> + <p class="text-truncate">������������������:<span class="ml-sm">60</span></p> </ng-template> </chart-card> </div> @@ -131,71 +109,104 @@ <ng-template #body> <nz-tabset> <nz-tab> - <ng-template #nzTabHeading>���������</ng-template> + <ng-template #nzTabHeading>������������</ng-template> <div nz-row> <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="16"> <div class="bar"> - <bar - height="295" - [title]="'���������������'" - [data]="data.salesData"></bar> + <bar height="295" [title]="'2018���������������������������'" [data]="data.alarmData" color="purple"></bar> </div> </div> <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8"> <div class="rank-list"> - <h4 class="rank-title">���������������������</h4> + <h4 class="rank-title">������������������</h4> <ul> <li *ngFor="let i of rankingListData; let idx = index"> <div> <span class="icon" [ngClass]="{'active': idx < 3}">{{idx+1}}</span> {{i.title}} </div> - <span>{{i.total | number: '3.0'}}</span> + <span>{{i.total | number: '1.0'}}</span> </li> </ul> </div> </div> </div> </nz-tab> + <nz-tab> - <ng-template #nzTabHeading>���������</ng-template> + <ng-template #nzTabHeading>������������</ng-template> <div nz-row> <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="16"> <div class="bar"> - <bar - height="295" - [title]="'���������������'" - [data]="data.salesData"></bar> + <bar height="295" [title]="'2018���������������������������'" [data]="data.alarmData" color="yellow"></bar> </div> </div> <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8"> <div class="rank-list"> - <h4 class="rank-title">���������������������</h4> + <h4 class="rank-title">������������������</h4> <ul> <li *ngFor="let i of rankingListData; let idx = index"> <div> <span class="icon" [ngClass]="{'active': idx < 3}">{{idx+1}}</span> {{i.title}} </div> - <span>{{i.total | number: '3.0'}}</span> + <span>{{i.total | number: '1.0'}}</span> </li> </ul> </div> </div> </div> </nz-tab> - <ng-template #nzTabBarExtraContent> - <div class="sales-extra-wrap"> - <div class="sales-extra"> - <a (click)="setDate('today')">������</a> - <a (click)="setDate('week')">������</a> - <a (click)="setDate('month')">������</a> - <a (click)="setDate('year')">������</a> + + <nz-tab> + <ng-template #nzTabHeading>������������</ng-template> + <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> + </div> </div> - <nz-datepicker style="width:120px" class="mr-md" [(ngModel)]="q.start" [nzFormat]="'YYYY-MM-DD'" [nzPlaceHolder]="'������������'"></nz-datepicker> - <nz-datepicker style="width:120px" [(ngModel)]="q.end" [nzFormat]="'YYYY-MM-DD'" [nzPlaceHolder]="'������������'"></nz-datepicker> + <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8"> + <div class="rank-list"> + <h4 class="rank-title">������������������</h4> + <ul> + <li *ngFor="let i of rankingListData; let idx = index"> + <div> + <span class="icon" [ngClass]="{'active': idx < 3}">{{idx+1}}</span> + {{i.title}} + </div> + <span>{{i.total | number: '1.0'}}</span> + </li> + </ul> + </div> + </div> </div> - </ng-template> + </nz-tab> + + <nz-tab> + <ng-template #nzTabHeading>������������</ng-template> + <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> + </div> + </div> + <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8"> + <div class="rank-list"> + <h4 class="rank-title">������������������</h4> + <ul> + <li *ngFor="let i of rankingListData; let idx = index"> + <div> + <span class="icon" [ngClass]="{'active': idx < 3}">{{idx+1}}</span> + {{i.title}} + </div> + <span>{{i.total | number: '1.0'}}</span> + </li> + </ul> + </div> + </div> + </div> + </nz-tab> </nz-tabset> </ng-template> </nz-card> @@ -333,29 +344,6 @@ <div nz-row [nzGutter]="24"> <div nz-col nzXs="24" nzSm="24" nzMd="16"> - <nz-card nzTitle="������������������" [nzBordered]="false" [nzLoading]="loading" nzNoPadding class="mb-lg project-list"> - <ng-template #extra> - <a (click)="msg.success('to')">������������</a> - </ng-template> - <div *ngFor="let item of notice" nz-card-grid class="project-grid"> - <nz-card nzNoPadding [nzBordered]="false" class="mb0"> - <nz-card-meta [nzTitle]="noticeTitle" [nzDescription]="item.description"> - <ng-template #noticeTitle> - <div class="card-title"> - <nz-avatar [nzSrc]="item.logo" [nzSize]="'small'"></nz-avatar> - <a (click)="msg.info('to' + item.href)">{{item.title}}</a> - </div> - </ng-template> - </nz-card-meta> - <div class="project-item"> - <a (click)="msg.info('show user: ' + item.member)">{{item.member}}</a> - <span *ngIf="item.updatedAt" class="datetime" title="{{item.updatedAt}}"> - {{item.updatedAt | _date: 'fn' }} - </span> - </div> - </nz-card> - </div> - </nz-card> <nz-card nzTitle="������" [nzBordered]="false" [nzLoading]="loading" nzNoPadding class="mb-lg active-card"> <nz-list nzSize="large"> <nz-list-item *ngFor="let item of activities" class="activities"> @@ -377,18 +365,10 @@ </nz-card> </div> <div nz-col nzXs="24" nzSm="24" nzMd="8"> - <nz-card nzTitle="������������ / ������������" [nzBordered]="false" nzNoPadding class="mb-lg"> - <div class="links"> - <a *ngFor="let item of links" (click)="msg.success(item.title)">{{item.title}}</a> - <button nz-button (click)="links.push({title: 'new titel', href: 'href'})" [nzType]="'dashed'" [nzSize]="'small'"> - <i class="anticon anticon-plus"></i><span>������</span> - </button> - </div> - </nz-card> <nz-card nzTitle="XX ������" [nzBordered]="false" [nzLoading]="loading" class="mb-lg"> <ng-template #body><radar [data]="radarData" [height]="343" [hasLegend]="true"></radar></ng-template> </nz-card> - <nz-card nzTitle="������" [nzBordered]="false" [nzBodyStyle]="{'padding-top.px': 12, 'padding-bottom.px': 12 }" class="mb-lg"> + <nz-card nzTitle="������" [nzBordered]="false" [nzBodyStyle]="{'padding-top.px': 12, 'padding-bottom.px': 12 }" class="mb-lg"> <div class="members"> <div nz-row [nzGutter]="48"> <div nz-col [nzSpan]="12" *ngFor="let i of members"> diff --git a/src/app/routes/dashboard/workplace/workplace.component.ts b/src/app/routes/dashboard/workplace/workplace.component.ts index 7698053..d7e7561 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) { @@ -120,6 +84,16 @@ this.totalDeviceCount += fakeDC[i]; } this.avgDeviceCount = (this.totalDeviceCount/12).toFixed(0); + + const alarmData = []; + for (let i = 0; i < 12; i += 1) { + alarmData.push({ + x: `${i + 1}���`, + y: Math.floor(Math.random() * 1000) + 200 + }); + } + + const visitData = []; @@ -144,13 +118,7 @@ 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 = [ { @@ -302,8 +270,9 @@ }); } var res = { + alarmData: alarmData, + visitData: visitData, - salesData: salesData, visitData2: visitData2, salesTypeData: salesTypeData, salesTypeDataOnline: salesTypeDataOnline, @@ -345,70 +314,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 +414,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 +435,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) { -- Gitblit v1.8.0