工作台数据统计页面

沈斌

2018-03-13 032ca75e238cc2f2a96b3bf27532b5a243d9a24a

工作台数据统计页面

 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>

 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;