home.component.ts

import {AfterViewInit, Component, ElementRef, OnInit, Renderer2, ViewChild} from '@angular/core';
import { JhiEventManager } from 'ng-jhipster';
import { Account, Principal } from '../shared';
import {OverAllService} from '../overAll/overAll.service';
import {color, pageSize} from '../app.constants';
import {AlarmService} from '../alarm/alarm.service';
import {NzMessageService} from 'ng-zorro-antd';
import {LayoutService} from '../layouts/layout.service';
import {SelectGroupComponent} from '../modal/select-group/select-group.component';

@Component({
    selector: 'jhi-home',
    templateUrl: './home.component.html',
    styleUrls: [
        'home.css'
    ]

})
export class HomeComponent implements OnInit,AfterViewInit {
    @ViewChild('smartSelectGroup') smartSelectGroup:SelectGroupComponent;
    @ViewChild("leftDiv") leftDiv:ElementRef;
    @ViewChild("rightDiv") rightDiv:ElementRef;

    color = color;
    leftOneChart;
    leftTwoChart;
    rightOneChart;
    rightTwoChart;

    warnList= [];

    totalNum;
    groupList;

    pageNum = 1;
    pageCount = 10;
    loading = false;

    obj = {
        leftGroupId:null,
        alarmGroupId:null
    };

    leftOneData = {
        high:0,
        warning:0,
        normal:0,
        disabled:0,
    };
    leftOneDataPre = {
        highPer:0,
        warningPer:0,
        normalPer:0,
        disabledPer:0,
    };

    leftOneTotal = 0;
    leftTwoData  ={
        high:0,
        warning:0,
        normal:0,
        disabled:0,
    };
    leftTwoDataPre = {
        highPer:0,
        warningPer:0,
        normalPer:0,
        disabledPer:0,
    };

    leftTwoTotal = 0;

    rightTotal = 0;

    //我的关注
    followList;

    //资源设备数量
    deviceNo;

    constructor(
        private overAllSer:OverAllService,private message:NzMessageService,
        private alarmSer:AlarmService,private renderer:Renderer2,
        private layoutSer:LayoutService,
        private principal: Principal,
        private eventManager: JhiEventManager
    ) {
    }

    ngOnInit() {
        this.getAlarmList();

        this.findGroupCount();
        this.findHostCount();

        this.getGroup();

        this.getMyFollow();

        this.findSize();
    }

    ngAfterViewInit(){
       let rightHeight = this.rightDiv.nativeElement.clientHeight;
        this.renderer.setStyle(this.leftDiv.nativeElement,"height",rightHeight +"px");
    }

    //我的关注
    getMyFollow(){
        this.layoutSer.myFollow().subscribe(
            (res)=>{
                this.followList = res.data;
                if(this.followList.length > 0 ){
                    let dataStyle = {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            shadowBlur: 40,
                            borderWidth: 10,
                            shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                        }
                    };
                    let placeHolderStyle = {
                        normal: {
                            color: '#eee',
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        },
                        emphasis: {
                            color: '#393d50'
                        }
                    };
                    this.followList.forEach(e=>{
                        e.option = {
                            backgroundColor: '#fff',
                            title: {
                                text: '',
                                x: 'center',
                                y: 'center',
                                textStyle: {
                                    fontWeight: 'normal',
                                    fontSize: 24,
                                    color: "red",
                                }
                            },
                            tooltip: {
                                trigger: 'item',
                                show: true,
                                formatter: "{b} : <br/>{d}%",
                                backgroundColor: 'rgba(0,0,0,0.7)', // 背景
                                padding: [8, 10], //内边距
                                extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
                            },

                            series: [{
                                name: 'CPU使用率',
                                type: 'pie',
                                clockWise: false,
                                radius: [50, 58],
                                center:['30%','50%'],
                                itemStyle: dataStyle,
                                hoverAnimation: false,
                                startAngle: 90,
                                label:{
                                    borderRadius:'10',
                                },
                                data: [{
                                    value: e.cpu,
                                    name: 'CPU使用率',
                                    itemStyle: {
                                        normal: {
                                            color: "#f09363"
                                        }
                                    }
                                },
                                    {
                                        value: 100 - e.cpu,
                                        name: '',
                                        tooltip: {
                                            show: false
                                        },
                                        itemStyle: placeHolderStyle
                                    },
                                ]
                            },
                                {
                                    name: '内存使用率',
                                    type: 'pie',
                                    clockWise: false,
                                    radius: [35, 43],
                                    center:['30%','50%'],
                                    itemStyle: dataStyle,
                                    hoverAnimation: false,
                                    startAngle: 90,
                                    data: [{
                                        value: e.memory,
                                        name: '内存使用率',
                                        itemStyle: {
                                            normal: {
                                                color: "#80ba78"
                                            }
                                        }
                                    },
                                        {
                                            value: 100 - e.memory,
                                            name: '',
                                            tooltip: {
                                                show: false
                                            },
                                            itemStyle: placeHolderStyle
                                        },
                                    ]
                                },
                                // {
                                //     name: '带宽使用率',
                                //     type: 'pie',
                                //     clockWise: false,
                                //     radius: [20, 28],
                                //     center:['30%','50%'],
                                //     itemStyle: dataStyle,
                                //     hoverAnimation: false,
                                //     startAngle: 90,
                                //     data: [{
                                //         value: e.lose,
                                //         name: '带宽使用率',
                                //         itemStyle: {
                                //             normal: {
                                //                 color: "#73b6e4"
                                //             }
                                //         }
                                //     },
                                //         {
                                //             value: 100 - e.lose,
                                //             name: '',
                                //             tooltip: {
                                //                 show: false
                                //             },
                                //             itemStyle: placeHolderStyle
                                //         },
                                //     ]
                                // }
                            ]
                        };
                    })
                }
            }
        )
    }

    //获取分组
    getGroup() {
        this.overAllSer.findGroup().subscribe(
            (res) => {
                if(res.data){
                    this.groupList = res.data;
                    this.obj.leftGroupId = this.groupList[0].groupid;
                    this.countGroupItem();
                }
            }
        );
    }

    //主机组中统计
    countGroupItem(){
        this.layoutSer.findHostCountByStatusByGroup(this.obj.leftGroupId).subscribe(
            (res)=>{
                this.leftOneData = res.data;
                this.setLeftOne(res.data);
            }
        );
        this.layoutSer.findItemStatisticsByGroupid(this.obj.leftGroupId).subscribe(
            (res)=>{
                this.leftTwoData = res.data;
                this.setLeftTwo(res.data);
            }
        )
    }

    setLeftOne(data){
        this.leftOneDataPre = {
            highPer:0,
            warningPer:0,
            normalPer:0,
            disabledPer:0,
        };
        this.leftOneTotal = data.disabled + data.high + data.normal + data.warning;

        if(this.leftOneData.high > 0){
            let a:any = (this.leftOneData.high / this.leftOneTotal)* 100;
            this.leftOneDataPre.highPer = a.toFixed(2);
        }

        if(this.leftOneData.warning > 0){
            let b:any = ( (this.leftOneData.warning / this.leftOneTotal)* 100 );
            this.leftOneDataPre.warningPer = b .toFixed(2);
        }

        if(this.leftOneData.normal > 0){
            let c:any = ( (this.leftOneData.normal / this.leftOneTotal)* 100);
            this.leftOneDataPre.normalPer = c .toFixed(2);
        }

        if(this.leftOneData.disabled > 0){
            let d:any = ( (this.leftOneData.disabled / this.leftOneTotal)* 100 );
            this.leftOneDataPre.disabledPer = d .toFixed(2);
        }

        this.leftOneChart =
            {
                title: {
                    text: "" +this.leftOneTotal+' 台\n设备',
                    x: '41%',
                    y: '40%',
                    itemGap: 50,
                    textStyle: {
                        color: '#333',
                        fontSize: 18,
                        fontWeight: 'normal',
                    },
                    subtextStyle: {
                        color: '#de4751',
                        fontSize: 12
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },

                series: [
                    {
                        name:"设备",
                        type: 'pie',
                        clockWise: true,
                        center: ["46%", "50%"],
                        radius: ['40%', '60%'],
                        color: ['#f93215', '#ff8400', '#2fb35b', '#a0a0a0'],
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {value: data.high, name: '严重'},
                            {value: data.warning, name: '告警'},
                            {value: data.normal, name: '正常'},
                            {value: data.disabled, name: '禁止'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
    }

    setLeftTwo(data){
        this.leftTwoDataPre = {
            highPer:0,
            warningPer:0,
            normalPer:0,
            disabledPer:0,
        };
        this.leftTwoTotal = data.disabled + data.high + data.normal + data.warning;
        if(this.leftTwoData.high > 0){
            let w:any = ( (this.leftTwoData.high / this.leftTwoTotal)*100 );
            this.leftTwoDataPre.highPer = w.toFixed(2);
        }

        if(this.leftTwoData.warning > 0){
            let x:any = ( (this.leftTwoData.warning / this.leftTwoTotal)*100 );
            this.leftTwoDataPre.warningPer = x .toFixed(2);
        }

        if(this.leftTwoData.normal > 0){
            let y:any = ( (this.leftTwoData.normal / this.leftTwoTotal)*100 );
            this.leftTwoDataPre.normalPer = y.toFixed(2);
        }

        if(this.leftTwoData.disabled > 0){
            let z:any = ( (this.leftTwoData.disabled / this.leftTwoTotal)*100);
            this.leftTwoDataPre.disabledPer = z.toFixed(2);
        }

        this.leftTwoChart =
            {
                title: {
                    text: this.leftTwoTotal+'个\n监测点',
                    x: '41%',
                    y: '40%',
                    itemGap: 50,
                    textStyle: {
                        color: '#333',
                        fontSize: 18,
                        fontWeight: 'normal',
                    },
                    subtextStyle: {
                        color: '#de4751',
                        fontSize: 12
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },

                series: [
                    {
                        name:"监测点",
                        type: 'pie',
                        clockWise: true,
                        center: ["47%", "50%"],
                        radius: ['40%', '60%'],
                        color: ['#f93215', '#ff8400', '#2fb35b', '#a0a0a0'],
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {value: data.high, name: '严重'},
                            {value: data.warning, name: '告警'},
                            {value: data.normal, name: '正常'},
                            {value: data.disabled, name: '禁止'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
    }

    findGroupCount(){
        this.layoutSer.findGroupCount().subscribe(
            (res)=>{
                if(res.data.length > 0){
                    this.rightTotal = res.data.length;
                    this.rightOneChart = {
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },

                        series : [
                            {
                                name: '',
                                type: 'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                data:res.data.map(e=>{
                                    const arr = {
                                        value:e.count,
                                        name:e.name
                                    };
                                    return arr;
                                }),
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                }
            }
        )
    }

    findHostCount(){
        this.layoutSer.findHostCount().subscribe(
            (res)=>{
                if(res.data && res.data.length > 0){
                    this.rightTwoChart = {
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },

                        series : [
                            {
                                name: '',
                                type: 'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                data:res.data.map(e=>{
                                    const arr = {
                                        value:e.count,
                                        name:e.name
                                    }
                                    return arr;
                                }),
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                }
            }
        )
    }

    //监控设备数
    findSize() {
        this.overAllSer.findSize().subscribe(
            (res) => {
                this.deviceNo = res.data.size;
            }
        );
    }

    //获取告警分组
    getAlarmList(){
        const data = {
            pageNum: this.pageNum,
            pageCount: this.pageCount,
            obj:{
                isWaring:'yes',
                groupid: this.obj.alarmGroupId,
            }
        };
        this.alarmSer.eventFind(data).subscribe(
            (res) => {
                if(res.errCode == 10000){
                    if(res.data){
                        this.warnList = res.data.data;
                        this.totalNum = res.data.totalNum;
                    }
                }else{
                    this.message.error(res.errMsg);
                }
            }
        );
    }

    showAddFollow(){
        this.smartSelectGroup.showAddModal("选择资源")
    }

    change(e){
        this.pageNum = e;
        this.getAlarmList();
    }

    //设置关注
    getItem(e){
        const data = {
            resourceIds:e.map(res=>{
                return res+"";
            })
        };
        this.layoutSer.addFollow(data).subscribe(
            (res)=>{
                if(res.errCode == 10000){
                    this.message.success("添加关注成功");
                    this.getMyFollow();
                }else{
                    this.message.error(res.errMsg);
                }
            }
        )
    }

    //取消关注
    cancel(index,item){
        this.followList.splice(index,1);
        const data = {
            resourceIds:[item.hostId+""]
        };
        this.layoutSer.unFollow(data).subscribe(
            (res)=>{
                if(res.errCode == 10000){
                    this.getMyFollow();
                    this.message.success('取消关注成功');
                }else{
                    this.message.error(res.errMsg);
                }
            }
        )
    }
}