三级警报数据

xufenglei

2018-05-07 b05438694c2fb9d4c8b1b22f4481639ff0f35963

 src/app/routes/dashboard/workplace/workplace.component.ts

@@ -1,98 +1,458 @@
import { environment } from '../../../../environments/environment';
import { zip } from 'rxjs/observable/zip';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
import { getTimeDistance, yuan, fixedZero } from '@delon/abc';
import { getNotice, getActivities } from '../../../../../_mock/api.service';
import { getFakeChartData } from '../../../../../_mock/chart.service';
import { _HttpClient } from '@delon/theme';
import { HttpClient } from '@angular/common/http';
import * as moment from 'moment';
import { DeviceService } from '@business/services/http/device.service';
import { ExampleService } from '@business/services/util/example.service';
import { ResultBean } from '@business/entity/grid';
import { TimeUnits } from '@business/enum/types.enum';
import { ToolsService } from '@business/services/util/tools.service';

@Component({
    selector: 'app-dashboard-workplace',
    templateUrl: './workplace.component.html',
    styleUrls: ['./workplace.component.less']
    styleUrls: ['./workplace.component.less'],
    providers: [DeviceService]
})
export class DashboardWorkplaceComponent implements OnInit, OnDestroy {
    notice: any[] = [];

    totalDeviceCountList: any[] = [];
    totalDeviceCount = '';
    avgDeviceCount = '';
    deviceCountLoading = true;
    // 报警统计
    alarmCountList:{x: string,y: number}[] = null;
    alarmCountCurrMonth = '';
    alarmCountCurrDay = '';// 单月报警次数
    alarmCountLoading = true;
    operationLoading = true;
    operNormalPercent = 0;
    activities: any[] = [];
    radarData: any[] = [];
    loading = true;

    // region: mock data
    links = [
        {
          title: '操作一',
          href: '',
        },
        {
          title: '操作二',
          href: '',
        },
        {
          title: '操作三',
          href: '',
        },
        {
          title: '操作四',
          href: '',
        },
        {
          title: '操作五',
          href: '',
        },
        {
          title: '操作六',
          href: '',
        },
    ];
    public alarmData: any = {};
    public alertData = [[], [], [], []];
    salesType = '0';
    salesTotal = 0;
    salesPieData: any;
    members = [
        {
          id: 'members-1',
          title: '科学搬砖组',
          logo: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
          link: '',
            id: 'members-1',
            title: '七星官网',
            logo: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
            link: '',
        },
        {
          id: 'members-2',
          title: '程序员日常',
          logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
          link: '',
            id: 'members-2',
            title: '七星商城',
            logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
            link: '',
        },
        {
          id: 'members-3',
          title: '设计天团',
          logo: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
          link: '',
            id: 'members-3',
            title: '外链三',
            logo: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
            link: '',
        },
        {
          id: 'members-4',
          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
            id: 'members-4',
            title: '外链四',
            logo: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
            link: '',
        }
    ];

    constructor(public msg: NzMessageService) {}
    data: any = {};

    q: any = {
        start: null,
        end: null
    };

    rankingListData: any[] = [];

    constructor(
        private deviceService: DeviceService,
        private http: _HttpClient,
        public msg: NzMessageService,
        private http2: HttpClient) {
    }

    selectedIndexChange(index) {
        this.rankingListData = [];
        if (!this.alarmData['_' + index]) {
            this.http2.get(environment.SERVER_BASH_URL + 'report/alarm-year', { params: { state: index > 0 ? index : null } }).subscribe((res: any) => {
                const data = [];
                for (let i = 0; i < res.data.length; i += 1) {
                    data.push({ x: `${i + 1}月`, y: !!res.data[i] ? res.data[i] : 0 });
                }
                this.alarmData['_' + index] = data;
            });
        }
        if (this.alertData[index].length > 0) {
            this.alertData[index].forEach(item => {
                this.rankingListData.push(
                    {
                        title: item.x,
                        total: item.y
                    }
                );
            });
        } else {
            this.http2.get(environment.SERVER_BASH_URL + 'report/alarm-month', { params: { state: index > 0 ? index : null } }).subscribe((res: any) => {
                const data = [];
                for (let i = 0; i < res.data.length; i += 1) {
                    for (const key in res.data[i]) {
                        data.push({ x: key, y: res.data[i][key] });
                        this.rankingListData.push(
                            {
                                title: key,
                                total: res.data[i][key]
                            }
                        );
                    }
                }
                this.alertData[index] = data;
            });
        }
    }

    changeSaleType() {
        if (this.alertData[this.salesType].length > 0) {
            this.salesPieData = this.alertData[this.salesType];
            this.salesTotal = this.salesPieData.reduce((pre, now) => now.y + pre, 0);
        } else {
            this.http2.get(environment.SERVER_BASH_URL + 'report/alarm-month', { params: { state: this.salesType === '0' ? null : this.salesType } }).subscribe((res: any) => {
                const data = [];
                for (let i = 0; i < res.data.length; i += 1) {
                    for (const key in res.data[i]) {
                        data.push({ x: key, y: res.data[i][key] });
                    }
                }
                this.salesPieData = this.alertData[this.salesType] = data;
                this.salesTotal = this.salesPieData.reduce((pre, now) => now.y + pre, 0);
            });
        }
    }

    ngOnInit() {
        setTimeout(() => {
            this.notice = getNotice();
            this.activities = getActivities().map((item: any) => {
                item.template = item.template.split(/@\{([^{}]*)\}/gi).map((key: string) => {
                    if (item[key]) return `<a>${item[key].name}</a>`;
                    return key;
                });
                return item;
        this.selectedIndexChange(0);
        this.changeSaleType();

        // 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) {
        //     this.totalDeviceCountList.push({
        //         x: moment(today).subtract(-1 * i, 'months').format(
        //             "YYYY-MM"
        //         ),
        //         y: fakeDC[i]
        //     });
        //     this.totalDeviceCount += fakeDC[i];
        // }
        let example1 = new ExampleService();
        let mo = moment();
        example1.or().andGreaterThanOrEqualTo({ name: "createTime", value: mo.format('YYYY-MM-01 00:00:00') });
        let example2 = new ExampleService();
        let example3 = new ExampleService();
        example3.or().andNotEqualTo({name:'state',value:4});
        zip(this.deviceService.countByExample(example1),
            this.deviceService.countByExample(example2),
            this.http.get<ResultBean<{time: string,count: number}[]>>('device/count-by-times',{start:mo.format('YYYY-01-01 00:00:00'),end:mo.format('YYYY-12-31 23:59:59')}),
            this.deviceService.countByExample(example3)).subscribe(
                ([rWtihAvg, rWithToltal,rWithList,rWithNormal]) => {
                    if (!!rWtihAvg.code && !!rWithToltal&&!!rWithList.code) {
                        this.avgDeviceCount = ToolsService.toThousands(rWtihAvg.data.toString());
                        this.totalDeviceCount = ToolsService.toThousands(rWithToltal.data.toString());
                        rWithList.data.forEach( item =>{
                            this.totalDeviceCountList.push(
                                {
                                    x:item.time,
                                    y:item.count
                                }
                            );
                        });
                        this.operNormalPercent = Math.round(rWithNormal.data/rWithToltal.data*100);
                        this.deviceCountLoading = false;
                        this.operationLoading = false;
                    }
                }
            );
        zip(
            this.http.get<ResultBean<{time: string,count: number}[]>>("alarm/count-by-times",{start: mo.format('YYYY-MM-01 00:00:00'),end: null,timeUnits: TimeUnits.DAY}),
            this.http.get<ResultBean<{time: string,count: number}[]>>("alarm/count-by-times",{start: mo.format('YYYY-MM-01 00:00:00'),end: null}),
            this.http.get<ResultBean<{time: string,count: number}[]>>("alarm/count-by-times",{start: mo.format('YYYY-MM-DD 00:00:00'),end: null})
        ).subscribe(
            ([rWithList,rWithMonth,rWithDay]) => {
                 if(!!rWithList.code&&!!rWithMonth.code&&!!rWithDay.code){
                    this.alarmCountList = rWithList.data.map(
                        item => {
                            return {x:item.time,y:item.count};
                        }
                    );
                    if(!!rWithMonth.data&&rWithMonth.data.length>0){
                        this.alarmCountCurrMonth = ToolsService.toThousands(rWithMonth.data[0].count.toString());
                    }    
                    if(!!rWithDay.data&&rWithDay.data.length>0) {
                        this.alarmCountCurrDay =  ToolsService.toThousands(rWithDay.data[0].count.toString());
                    }
                    this.alarmCountLoading = false;
                 }
            }
        );
        // this.avgDeviceCount = (this.totalDeviceCount / 12).toFixed(0);


        const visitData = [];
        const beginDay = new Date().getTime();

        const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5];
        for (let i = 0; i < fakeY.length; i += 1) {
            visitData.push({
                x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format(
                    'YYYY-MM-DD'
                ),
                y: fakeY[i]
            });
            this.radarData = getFakeChartData.radarData;
            this.loading = false;
        }, 500);
        }
        const visitData2 = [];
        const fakeY2 = [1, 6, 4, 8, 3, 7, 2];
        for (let i = 0; i < fakeY2.length; i += 1) {
            visitData2.push({
                x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format(
                    'YYYY-MM-DD'
                ),
                y: fakeY2[i]
            });
        }

        const radarOriginData = [
            {
                name: '个人',
                ref: 10,
                koubei: 8,
                output: 4,
                contribute: 5,
                hot: 7
            },
            {
                name: '团队',
                ref: 3,
                koubei: 9,
                output: 6,
                contribute: 3,
                hot: 1
            },
            {
                name: '部门',
                ref: 4,
                koubei: 1,
                output: 6,
                contribute: 5,
                hot: 7
            }
        ];

        const radarData = [];
        const radarTitleMap = {
            ref: '引用',
            koubei: '口碑',
            output: '产量',
            contribute: '贡献',
            hot: '热度'
        };
        radarOriginData.forEach(item => {
            Object.keys(item).forEach(key => {
                if (key !== 'name') {
                    radarData.push({
                        name: item.name,
                        label: radarTitleMap[key],
                        value: item[key]
                    });
                }
            });
        });
        const searchData = [];
        for (let i = 0; i < 50; i += 1) {
            searchData.push({
                index: i + 1,
                keyword: `搜索关键词-${i}`,
                count: Math.floor(Math.random() * 1000),
                range: Math.floor(Math.random() * 100),
                status: Math.floor((Math.random() * 10) % 2)
            });
        }
        const res = {

            visitData: visitData,
            visitData2: visitData2,

            radarOriginData: radarOriginData,
            radarData: radarData,
            searchData: searchData
        };

        this.data = res;
        this.loading = false;

        this.radarData = res.radarData;


        const avatars = [
            'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
            'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
            'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
            'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
            'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
            'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
            'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
            'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png'  // Webpack
        ];

        const activities = [
            {
                id: 'trend-1',
                updatedAt: new Date(),
                user: {
                    name: '林东东',
                    avatar: avatars[0],
                },
                group: {
                    name: '高逼格设计天团',
                    link: 'http://github.com/',
                },
                project: {
                    name: '六月迭代',
                    link: 'http://github.com/',
                },
                template: '在 @{group} 新建项目 @{project}',
            },
            {
                id: 'trend-2',
                updatedAt: new Date(),
                user: {
                    name: '付小小',
                    avatar: avatars[1],
                },
                group: {
                    name: '高逼格设计天团',
                    link: 'http://github.com/',
                },
                project: {
                    name: '六月迭代',
                    link: 'http://github.com/',
                },
                template: '在 @{group} 新建项目 @{project}',
            },
            {
                id: 'trend-3',
                updatedAt: new Date(),
                user: {
                    name: '曲丽丽',
                    avatar: avatars[2],
                },
                group: {
                    name: '中二少女团',
                    link: 'http://github.com/',
                },
                project: {
                    name: '六月迭代',
                    link: 'http://github.com/',
                },
                template: '在 @{group} 新建项目 @{project}',
            },
            {
                id: 'trend-4',
                updatedAt: new Date(),
                user: {
                    name: '周星星',
                    avatar: avatars[3],
                },
                project: {
                    name: '5 月日常迭代',
                    link: 'http://github.com/',
                },
                template: '将 @{project} 更新至已发布状态',
            },
            {
                id: 'trend-5',
                updatedAt: new Date(),
                user: {
                    name: '朱偏右',
                    avatar: avatars[4],
                },
                project: {
                    name: '工程效能',
                    link: 'http://github.com/',
                },
                comment: {
                    name: '留言',
                    link: 'http://github.com/',
                },
                template: '在 @{project} 发布了 @{comment}',
            },
            {
                id: 'trend-6',
                updatedAt: new Date(),
                user: {
                    name: '乐哥',
                    avatar: avatars[5],
                },
                group: {
                    name: '程序员日常',
                    link: 'http://github.com/',
                },
                project: {
                    name: '品牌迭代',
                    link: 'http://github.com/',
                },
                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) => {
                if (item[key]) return `<a>${item[key].name}</a>`;
                return key;
            });
            return item;
        });
    }

    ngOnDestroy(): void {
    }

    sort(sortName, sortValue) {
        this.data.searchData = [
            ...(<any[]>this.data.searchData).sort((a, b) => {
                if (a[sortName] > b[sortName]) {
                    return (sortValue === 'ascend') ? 1 : -1;
                } else if (a[sortName] < b[sortName]) {
                    return (sortValue === 'ascend') ? -1 : 1;
                } else {
                    return 0;
                }
            })
        ];
    }

    handlePieValueFormat(value: any) {
        return value + '次';
    }
}