flow-trend.component.ts

import {Component, ElementRef, OnDestroy, 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';
import {setInterval, clearInterval} from 'timers';
import {NgxEchartsModule} from 'ngx-echarts';
import {CommonService} from '../../shared/common/common.service';

@Component({
    selector: 'smart-flow-trend',
    templateUrl: './flow-trend.component.html',
    styles: []
})
export class FlowTrendComponent implements OnInit, OnDestroy {
    checkList;
    hostList;
    isLoading;
    obj = {
        hostid: null,
        itemKey: null,
        startTime: '',
        endTime: ''
    };
    echartType = 'history';
    echartObj;  //echart对象

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

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

    timeType = '1';
    timeBegin;
    timeEnd;

    //历史图表
    chartOption;
    inEchartData;
    outEchartData;

    //实时图表
    nowChartOption;
    inNowEchartData = [];
    outNowEchartData = [];

    time_;

    data = {
        now: false,
        history: false
    };

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

    ngOnInit() {
        this.obj.startTime = this.commonSer.getTimeByType('1').startTime;
        this.obj.endTime = this.commonSer.getTimeByType('1').endTime;
        this.getHost();
    }

    //获取流量
    getList() {
        this.outNowEchartData = [];
        this.inNowEchartData = [];
        this.obj.hostid = null;
    }

    onEchartInit(e) {
        this.echartObj = e;
    }

    //获取主机
    getHost() {
        const data = {
            pageNum: 1,
            pageCount: 1000,
        };
        this.overAllSer.findHostPageNew(data).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.hostList = res.data.data;
                    this.obj.hostid = this.hostList[0].hostid + '';
                    this.getCheckList();
                }
            }
        );
    }

    //切换图表类型
    changeEchartType(type) {
        this.echartType = type;
    }

    //监测点列表
    getCheckList() {
        const data = {
            pageNum: 1,
            pageCount: 10000,
            obj: {
                hostid: this.obj.hostid,
            }
        };
        this.overAllSer.findCheckByType(data).subscribe(
            (res) => {
                this.checkList = res.data.data;
                this.obj.itemKey = this.checkList[0].key;
                this.getEcharts();
            }
        );
    }

    //页面离开
    ngOnDestroy() {
        //销毁定时任务
        if (this.time_) {
            clearInterval(this.time_);
        }
    }

    //获取趋势数据
    getEcharts() {
        this.isLoading = true;
        const data = {
            key: this.obj.itemKey,
            endTime: (new Date(this.obj.endTime).getTime()) / 1000,
            startTime: (new Date(this.obj.startTime).getTime()) / 1000,
            hostId: this.obj.hostid,
        };
        this.topologySer.findTrendData(data).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    if (res.data.length > 0) {
                        this.data.history = false;
                        this.inEchartData = res.data.map(e => {
                            const a = {
                                clock: this.datePipe.transform(e.clock * 1000, 'yyyy/MM/dd HH:mm'),
                                value: e.avg,
                                unit: e.unit
                            };
                            return a;
                        });
                        this.setEacharts();
                    } else {
                        this.inEchartData = [];
                        this.isLoading = false;
                        this.data.history = true;
                    }
                }
            }
        );
    }

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

        this.chartOption = {
            title: {
                text: this.obj.itemKey,
                left: 'center',
            },
            backgroundColor: '#eee',
            tooltip: {
                // trigger: 'axis',
                formatter: (params) => {
                    let res = '';
                    res += '<br/>时间：' + params.name;
                    params.unit = params.data.unit ? params.data.unit : '';
                    res += '<br/>数值：' + Number(params.value).toFixed(2) + '' + params.unit;
                    return res;
                }
            },
            xAxis: {
                data: this.inEchartData.map(e => {
                    return e.clock;
                }),
                name: '时间',
            },
            dataZoom: [{
                startValue: this.obj.startTime
            }, {
                type: 'inside'
            }],
            yAxis: {
                type: 'value',
                axisLabel: {   //Y轴数据
                    formatter: function(value) {
                        return Math.abs(value);   //负数取绝对值变正数
                    },
                    textStyle: {
                        color: '#666'
                    }
                },
            },
            grid: {
                left: 100
            },
            series: [
                {
                    type: 'line',
                    itemStyle: itemStyle,
                    data: this.inEchartData
                }
            ]
        };
        this.isLoading = false;
    }

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

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

    //时间改变
    changeType() {
        if (this.timeType == '99') return;
        this.obj.startTime = this.commonSer.getTimeByType(this.timeType).startTime;
        this.obj.endTime = this.commonSer.getTimeByType(this.timeType).endTime;
    }

    //搜索
    search() {
        if (this.timeType == '99') {
            this.obj.startTime = this.datePipe.transform(this.timeBegin, 'yyyy/MM/dd') + ' 00:00:00';
            this.obj.endTime = this.datePipe.transform(this.timeEnd, 'yyyy/MM/dd') + ' 23:59:59';
        }
        console.log(this.obj);
        this.getEcharts();
    }

}