flow-trend.component.ts

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {TopologyService} from '../topology.service';
import {OverAllService} from '../../overAll/overAll.service';
import {NzMessageService} from 'ng-zorro-antd';
import {pageSize} from '../../app.constants';
import {DatePipe} from '@angular/common';

declare var vis: any;

@Component({
    selector: 'smart-flow-trend',
    templateUrl: './flow-trend.component.html',
    styles: []
})
export class FlowTrendComponent implements OnInit {
    groupList;
    hostList;
    isLoading;
    obj = {
        groupid:null,
        hostid: null,
        startTime: '',
        endTime: ''
    };

    //in
    inList = [];
    inPageNum = 1;
    inPageCount = '5';
    inTotalNum;
    inLoading;

    //out
    outList = [];
    outPageNum = 1;
    outPageCount = '5';
    outTotalNum;
    outLoading;

    timeType = "1";
    timeBegin;
    timeEnd;

    //图表
    chartOption;
    inEchartData;
    outEchartData;

    constructor(private topologySer: TopologyService, private overAllSer: OverAllService,
                private message: NzMessageService,private datePipe:DatePipe) {
    }

    ngOnInit() {
        const today = new Date().getTime();
        this.obj.startTime = this.datePipe.transform(today,"yyyy-MM-dd") + " 00:00:00";
        this.obj.endTime = this.datePipe.transform(today,"yyyy-MM-dd") + " 23:59:59";
        this.getGroup();
    }

    //获取分组
    getGroup() {
        this.overAllSer.getgroups({}).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.groupList = res.data;
                    this.obj.groupid = this.groupList[0].groupid +"";
                    this.onchange();
                }
            }
        );
    }

    //查询主机
    onchange() {
        const data = {
            'groupids': [this.obj.groupid],
            'hostExtend': {
                'superiorHostid': null
            }
        };
        this.overAllSer.findDetail(data).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.hostList = res.data;
                    this.obj.hostid = this.hostList[0].hostid +"";
                    this.getEcharts(null);
                }
            }
        );
    }

    //获取图标数据
    getEcharts(itemid) {
        this.isLoading = true;
        const  data= {
            itemid: itemid,
            endTime: this.obj.endTime,
            startTime: this.obj.startTime,
            hostid:this.obj.hostid,
            groupid:this.obj.groupid,
            type:'in',
            limit:'1000'
        };
        this.topologySer.findTrendData(data).subscribe(
            (res) => {
                if(res.errCode == 10000){
                    if(res.data.length > 0){
                        this.inEchartData = res.data;
                    }else{
                        this.message.info("图表暂无数据");
                        this.isLoading = false;
                    }
                    data.type = "out";
                    this.topologySer.findTrendData(data).subscribe(
                        (res)=>{
                            if(res.data.length > 0){
                                this.outEchartData = res.data;
                                this.setEacharts();
                            }else{
                                this.message.info("图表暂无数据");
                                this.isLoading = false;
                            }
                        }
                    )
                }else{
                    this.message.warning(res.errMsg);
                }
            }
        );
    }

    setEacharts(){
        let itemStyle = {
            normal: {
            },
            emphasis: {
                barBorderWidth: 1,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0,0,0,0.5)'
            }
        };

        this.chartOption = {
            backgroundColor: '#eee',
            tooltip: {
                // trigger: 'axis',
                formatter: (params)=> {
                    console.log(params);
                    let res = params.seriesName;
                    res += '<br/>时间：'  + params.name;
                    let Mbps = 1000*1000;
                    let kbps = 1000;
                    let size = Math.abs(params.data);
                    if(size/Mbps > 1){
                        res += '<br/>流量：' + (size/Mbps).toFixed(2) + 'Mbps';
                    }else if(size/kbps >1){
                        res += '<br/>流量：' +(size/kbps).toFixed(2) + 'kbps';
                    }else{
                        res += '<br/>流量：' + (size)+ 'bbps';
                    }

                    return res;
                }
            },
            xAxis: {
                data: this.inEchartData.map(e=>{
                    return e.clock;
                }),
                name: '时间',
            },
            dataZoom: [{
                startValue: this.obj.startTime
            }, {
                type: 'inside'
            }],
            yAxis: {
                inverse: true,
                splitArea: {show: false},
                type : 'value',
                axisLabel:{   //Y轴数据
                    formatter:function(value){
                        return Math.abs(value)/10000;   //负数取绝对值变正数
                    },
                    textStyle: {
                        color: '#666'
                    }
                },
            },
            grid: {
                left: 100
            },
            series: [
                {
                    name: '进口流量',
                    type: 'bar',
                    stack: 'one',
                    itemStyle: itemStyle,
                    data: this.inEchartData.map(e=>{
                        return e.avg;
                    })
                },
                {
                    name: '出口流量',
                    type: 'bar',
                    stack: 'one',
                    itemStyle: itemStyle,
                    data: this.outEchartData.map(e=>{
                        return -e.avg;
                    })
                }
            ]
        };
        this.isLoading = false;
    }

    //获取流量
    getList() {
        this.obj.hostid = null;
        this.onchange();
        this.getInList();
        this.getOutList();
    }

    getListIO(){
        this.getInList();
        this.getOutList();
    }

    //in改变页数
    inChnagePage(e){
        this.inPageNum = e;
        this.getInList();
    }

    //out改变页数
    outChnagePage(e){
        this.outPageNum = e;
        this.getOutList();
    }

    //进口流量
    getInList() {
        this.inLoading = true;
        const data = {
            obj:{
                type: 'in',
                hostid: this.obj.hostid,
                startTime: this.obj.startTime,
                endTime: this.obj.endTime,
                groupid:this.obj.groupid
            },
            pageNum: this.inPageNum,
            pageCount: this.inPageCount,
        };
        this.topologySer.findTrend(data).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.inList = res.data.data;
                    this.inTotalNum = res.data.totalNum;
                } else {
                    this.message.warning(res.errMsg);
                }
                this.inLoading = false;
            }
        );
    }

    //出口流量
    getOutList() {
        this.outLoading = true;
        const data = {
            obj: {
                type:'out',
                hostid: this.obj.hostid,
                startTime: this.obj.startTime,
                endTime: this.obj.endTime,
                groupid:this.obj.groupid
            },
            pageNum: this.outPageNum,
            pageCount: this.outPageCount,

        };
        this.topologySer.findTrend(data).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.outList = res.data.data;
                    this.outTotalNum = res.data.totalNum;
                } else {
                    this.message.warning(res.errMsg);
                }
                this.outLoading = false;
            }
        );
    }

    //时间改变
    changeType(){
        const nowDate = new Date().getTime();
        let day1,day2;
        switch (this.timeType){
            case'1':{
                this.obj.startTime = this.datePipe.transform(nowDate,'yyyy-MM-dd') +' 00:00:00';
                this.obj.endTime = this.datePipe.transform(nowDate,'yyyy-MM-dd') +' 23:59:59';
                break;
            }
            case'2':{
                day1 = nowDate - 1*24*60*60*1000;
                this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00';
                this.obj.endTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 23:59:59';
                break;
            }
            case'3':{
                day1 = nowDate - 3*24*60*60*1000;
                day2 = nowDate - 1*24*60*60*1000;
                this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00';
                this.obj.endTime = this.datePipe.transform(day2,'yyyy-MM-dd') + ' 23:59:59';
                break;
            }
            case'4':{
                day1 = nowDate - 7*24*60*60*1000;
                day2 = nowDate - 1*24*60*60*1000;
                this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00';
                this.obj.endTime = this.datePipe.transform(day2,'yyyy-MM-dd') + ' 23:59:59';
                break;
            }
            case'5':{
                break;
            }
        }
    }

    //搜索
    search(){
        if(this.timeType == '5'){
            this.obj.startTime = this.datePipe.transform(this.timeBegin,'yyyy-MM-dd HH:mm:ss');
            this.obj.endTime = this.datePipe.transform(this.timeEnd,'yyyy-MM-dd HH:mm:ss');
        }
        this.getEcharts(null);
        this.getInList();
        this.getOutList();
    }

}