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