server.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 {OverAllService} from '../../overAll.service';
import {HostComponent} from '../../host.component';
import {HostFlow} from '../../../app.constants';

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

    hostId;  //主机ID
    equipmentType;  //主机类型
    server;
    noData = false;

    targetFlow = HostFlow;   //主机指标
    timeList = [
        {'label': '最近一小时', value: '0'},
        {'label': '最近一天', value: '2'},
        {'label': '最近三天', value: '3'},
        {'label': '最近一周', value: '4'},
    ];
    timeTypeTrend = '0';
    timeTypeHistory = '0';

    isTrendLoading = false;
    chartTrendOption;

    isHistoryLoading = false;
    chartHistoryOption;

    trendObj = {   //指标趋势
        type: 'total_flow',
        startTime: '',
        endTime: ''
    };

    historyObj = {
        startTime: '',
        endTime: ''
    };

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

    isDiskLoading = false;
    chartDiskOption;
    diskType;

    constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute,
                private message: NzMessageService, private overAllSer: OverAllService,
                private hostCom: HostComponent) {
        this.routerInfo.queryParams.subscribe(queryParams => {
            this.hostId = queryParams.hostId;
            this.equipmentType = queryParams.equipmentType;
        });
    }

    ngOnInit() {
        this.getDetail();
        this.changeHistory('0');
        this.changeTrend('0');
        this.getDisk();
    }

    getDetail() {
        const data = {
            hostId: this.hostId,
        };
        this.overAllSer.findDetailed(this.hostId).subscribe(
            (res) => {
                if(res.errCode == 10000){
                    this.server = res.data[0];
                }else{
                    this.message.error(res.errMsg);
                }
            }
        );
        //内存使用率
        this.overAllSer.used(data).subscribe(
            (res) => {
                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;
                }
            }
        );
    }

    // 分区
    getDisk() {
        const data = {
            hostId: this.hostId,
        };
        this.isDiskLoading = true;
        //磁盘使用率
        this.overAllSer.disks(data).subscribe(
            (res) => {
                this.hostObj.disk = res.data.disks;
                if (this.hostObj.disk.length > 0) {
                    this.diskType = 0;
                    this.setDiskChart(0);
                    this.noData = false;
                }else {
                    this.noData = true;
                }
            }
        );
    }

    setDiskChart(index) {
        const data = this.hostObj.disk[index];
        this.chartDiskOption = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            series: [
                {
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data: [
                        {value: data.used, name: '已使用'},
                        {value: data.total - data.used, name: '未使用'},
                    ]
                }
            ]
        };
        this.isDiskLoading = false;
    }

    //获取趋势数据
    getTrend() {
        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: [
                {
                    data: data.map(e => {
                        return e.val;
                    }),
                    type: 'line',
                    name: '',
                }
            ]
        };
        this.isTrendLoading = false;
    }

    //获取历史趋势
    getHistory() {
        const data = {
            type: 'icmpping',
            hostid: this.hostId,
            startTime: this.historyObj.startTime,
            endTime: this.historyObj.endTime
        };
        this.overAllSer.findChartByKey(data).subscribe(
            (res) => {
                this.setHistoryChart(res.data);
            }
        );
    }

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

    changeTrend(e) {
        this.isTrendLoading = true;
        const timeObj = this.commonSer.getTimeByType(e);
        this.trendObj.startTime = timeObj.startTime;
        this.trendObj.endTime = timeObj.endTime;
        this.getTrend();
    }

    changeHistory(e) {
        this.isHistoryLoading = true;
        const timeObj = this.commonSer.getTimeByType(e);
        this.historyObj.startTime = timeObj.startTime;
        this.historyObj.endTime = timeObj.endTime;
        this.getHistory();
    }

}