switch.component.ts

import {Component, OnInit} from '@angular/core';
import {CommonService} from '../../../shared/common/common.service';
import {ActivatedRoute} from '@angular/router';
import {NzMessageService} from 'ng-zorro-antd';
import {HostFlow, UnitList} from '../../../app.constants';
import {OverAllService} from '../../overAll.service';
import {timer} from 'rxjs/observable/timer';

@Component({
    selector: 'smart-switch',
    templateUrl: './switch.component.html',
    styles: []
})
export class SwitchComponent implements OnInit {

    hostId;  //主机ID
    switch;

    targetFlow = HostFlow;   //主机指标

    timeList = [
        {'label': '最近一小时', value: '0'},
        {'label': '最近一天', value: '2'},
        {'label': '最近三天', value: '3'},
        {'label': '最近一周', value: '4'},
    ];
    timeTypeTrend = '0';
    timeTypeFLow = '0';

    interfaceList = [];  //接口数组
    unitList = UnitList;  // 单位

    isNetworkLoading = false;
    chartNetworkOption;

    isTrendLoading = false;
    chartTrendOption;

    netWorkdObj = {   //网卡图表参数
        itemName: null,
        unit: 'Mbps',
        startTime: '',
        endTime: '',
    };
    noData = false;

    trendObj = {
        type: 'total_flow',
        startTime: '',
        endTime: ''
    };

    hostObj = {
        disk: null,
        used: null,
        cpu: null,
        losed: null,
        response:null
    };

    constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute,
                private message: NzMessageService, private overAllSer: OverAllService) {
        this.routerInfo.queryParams.subscribe(queryParams => {
            this.hostId = queryParams.hostId;
            this.overAllSer.findDetailed(this.hostId).subscribe(
                (res) => {
                    this.switch = res.data[0];
                }
            );
        });
    }

    ngOnInit() {
        this.overAllSer.findNetworkCard(this.hostId).subscribe(
            (res) => {
                this.interfaceList = res.data;
                if(this.interfaceList && this.interfaceList.length > 0){
                    this.netWorkdObj.itemName = this.interfaceList[0];
                    this.changeTimeFlow('0');
                    this.noData = false;
                }else{
                    this.noData = true;
                }
            }
        );
        this.changeTimeTarget('0');
        this.getDetail();
    }

    getDetail() {
        const data = {
            hostId: this.hostId,
        };
        //内存使用率
        this.overAllSer.used(data).subscribe(
            (res) => {
                if(res.errCode == 10000){
                    if (res.data) {
                        this.hostObj.used = res.data.used;
                    } else {
                        this.hostObj.used = 0;
                    }
                }

            }
        );
        //cpu使用率
        this.overAllSer.cupUsed(data).subscribe(
            (res) => {
                if (res.data) {
                    this.hostObj.cpu = res.data.cpuUsed;
                } else {
                    this.hostObj.cpu = 0;
                }
            }
        );
        //丢包率
        this.overAllSer.losed(this.hostId).subscribe(
            (res) => {
                if (res.data) {
                    this.hostObj.losed = res.data.losed;
                } else {
                    this.hostObj.losed = 0;
                }
            }
        );
        //响应时间
        this.overAllSer.responseTime(this.hostId).subscribe(
            (res)=>{
                if (res.data) {
                    this.hostObj.response = res.data.responseTime;
                } else {
                    this.hostObj.response = 0;
                }
            }
        )
    }

    //网卡流量
    findNetwork() {
        const data = {
            itemName: this.netWorkdObj.itemName,
            hostid: this.hostId,
            startTime: this.netWorkdObj.startTime,
            endTime: this.netWorkdObj.endTime,
            unit: this.netWorkdObj.unit
        };
        this.overAllSer.findNetworkFlow(data).subscribe(
            (res) => {
                this.setNetWorkChart(res.data);
            }
        );
    }

    //设置网卡流量
    setNetWorkChart(data) {
        let arr = [];
        const objSend = {
            name: '发送速率',
            stack: '网卡流量',
            type: 'line',
            itemStyle: {
                normal: {
                    lineStyle: {
                        color: '#2cfef7'
                    }
                }
            },
            data: [],
        };
        const objReceived = {
            name: '接受速率',
            stack: '网卡流量',
            type: 'line',
            itemStyle: {
                normal: {
                    lineStyle: {
                        color: '#b6d0f0'
                    }
                }
            },
            data: [],
        };
        data.forEach(e => {
            objSend.data.push(e.sentValue);
            objReceived.data.push(e.receivedValue);
        });
        arr.push(objSend, objReceived);
        this.chartNetworkOption = {
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#b6d0f0',
                    }
                },
                data: data.map(e => {
                    return e.time;
                })
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: '#b6d0f0',
                    }
                },
                type: 'value'
            },
            series: arr,
        };
        this.isNetworkLoading = false;
    }

    //指标趋势
    findChart() {
        const data = {
            type: this.trendObj.type,
            hostid: this.hostId,
            startTime: this.trendObj.startTime,
            endTime: this.trendObj.endTime
        };
        this.overAllSer.findChartByKey(data).subscribe(
            (res) => {
                this.setTrendChart(res.data);
            }
        );
    }

    //设置指标趋势
    setTrendChart(data) {
        this.chartTrendOption = {
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#b6d0f0',
                    }
                },
                data: data.map(e => {
                    return e.time;
                })
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: '#b6d0f0',
                    }
                },
                type: 'value'
            },
            series:[{
                name: '指标趋势',
                type: 'line',
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#b6d0f0'
                        }
                    }
                },
                data: data.map(e => {
                    return e.val;
                })
            },]
        };
        this.isTrendLoading= false;
    }

    /**********指标趋势**************/
    changeTimeTarget(e) {
        this.isTrendLoading = true;
        timer(500).subscribe(
            (res)=>{
                const timeObj = this.commonSer.getTimeByType(e);
                this.trendObj.startTime = timeObj.startTime;
                this.trendObj.endTime = timeObj.endTime;
                this.findChart();
            }
        )
    }

    /**********指标趋势**************/

    /**********网卡流量**************/
    changeTimeFlow(e) {
        this.isNetworkLoading = true;
        timer(500).subscribe(
            (res)=>{
                const timeObj = this.commonSer.getTimeByType(e);
                this.netWorkdObj.startTime = timeObj.startTime;
                this.netWorkdObj.endTime = timeObj.endTime;
                this.findNetwork();
            }
        )

    }
    /**********网卡流量**************/
}