database.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 {AlarmService} from '../../../alarm/alarm.service';
import {AnalysisService} from '../../../analysis/analysis.service';

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

    hostId;
    charTrendOption;
    chartDatabaseOption;
    isFlowLoading = false;
    isDatabaseLoading = false;

    databaseList;  //数据库列表
    databaseType;  // 选择的数据库类型
    databaseDetail;  //指标列表
    eventList;   //告警列表
    indexDetail;  //数据库详情指标

    obj = {
        groupid: null,
        startTime: null,
        endTime: null,
        priorityName: null,
    };

    timeTypeFlow = '4';
    flowObj = {
        startTime: null,
        endTime: null
    };

    timeTypeDatabase = '0';
    databaseObj = {
        startTime: null,
        endTime: null
    };

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

    ngOnInit() {
        this.findDatabase();
        this.findIndexDetail();
        this.eventFind();
        this.changeTypeFlow('4');
        this.changeTypeDatabase('0');
    }

    //查询所有数据库类型
    findDatabase() {
        this.overAllSer.findAllDatabaseByHost(this.hostId).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    if (res.data.length > 0) {
                        this.databaseList = res.data;
                        this.databaseType = this.databaseList[0].type;
                        this.findTarget();
                    }
                }
            }
        );
    }

    //指标列表
    findTarget() {
        const data = {
            'hostid': this.hostId,
            'databaseType': this.databaseType
        };
        this.overAllSer.findDatabaseDetailByHost(data).subscribe(
            (res) => {
                this.databaseDetail = res.data;
            }
        );
    }

    //数据库详情指标
    findIndexDetail() {
        const data = {
            hostid: this.hostId
        };
        this.overAllSer.findIndexDetail(data).subscribe(
            (res) => {
                this.indexDetail = res.data;
            }
        );
    }

    //当前告警
    eventFind() {
        const data = {
            pageCount: 10,
            pageNum: 1,
            obj: {
                isWaring: 'yes',
                hostid: this.hostId
            }
        };
        this.alarmSer.eventFind(data).subscribe(
            (res) => {
                this.eventList = res.data.data;
            }
        );
    }

    changeTypeFlow(e) {
        this.isFlowLoading = true;
        this.timeTypeFlow = e;
        this.flowObj = this.commonSer.getTimeByType(this.timeTypeFlow);
        this.getAlarmTrend();
    }

    //告警总数趋势
    getAlarmTrend() {
        const data = {
            hostid: this.hostId,
            startTime: this.flowObj.startTime,
            endTime: this.flowObj.endTime,
        };
        this.overAllSer.waringTrendByHost(data).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    if (res.data) {
                        const response = res.data;
                        this.setAlarmTrend(response);
                    }
                }
                this.isFlowLoading = false;
            }
        );
    }

    //设置告警趋势echarts图表
    setAlarmTrend(data) {
        this.charTrendOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
            },
            legend: {
                textStyle: {color: '#ffffff'},
                data: ['严重', '告警']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: '#b6d0f0',
                        }
                    },
                    data: data.map((e) => {
                        return e.date;
                    })
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    minInterval: 1,
                    axisLabel: {
                        show: true,
                        interval: 'auto',
                        formatter: '{value} 个'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#b6d0f0',
                        }
                    },
                    boundaryGap: [0, 0.1],
                }
            ],
            series: [

                {
                    name: '严重',
                    type: 'bar',
                    stack: '严重',
                    itemStyle: {
                        normal: {
                            color: '#e96545'
                        }
                    },
                    data: data.map(e => {
                        return e.errorcount;
                    })
                },
                {
                    name: '告警',
                    type: 'bar',
                    stack: '告警',
                    itemStyle: {
                        normal: {
                            color: '#eede85'
                        }
                    },
                    data: data.map(e => {
                        return e.waringcount;
                    })
                }
            ]
        };
    }

    changeTypeDatabase(e) {
        this.isDatabaseLoading = true;
        this.timeTypeDatabase = e;
        this.databaseObj = this.commonSer.getTimeByType(this.timeTypeDatabase);
        this.databaseChart();
    }

    //数据库图表
    databaseChart() {
        const data = {
            hostid: this.hostId,
            startTime: this.databaseObj.startTime,
            endTime: this.databaseObj.endTime,
        };
        this.overAllSer.findChartData(data).subscribe(
            (res) => {
                if (res.data.list) {
                    this.setDatabaseChart(res.data);
                }
                this.isDatabaseLoading = false;
            }
        );
    }

    //设置数据库图表
    setDatabaseChart(data) {
        let arr = [];
        data.databaseType.forEach(e => {
            const obj = {
                name: e,
                stack: '数据库',
                type: 'line',
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#2cfef7'
                        }
                    }
                },
                data: [],
            };
            data.list.forEach(f => {
                obj.data.push(f[e]);
            });
            arr.push(obj);
        });
        this.chartDatabaseOption = {
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#b6d0f0',
                    }
                },
                data: data.list.map(e => {
                    return e.time;
                })
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: '#b6d0f0',
                    }
                },
                type: 'value'
            },
            series: arr
        };

    }

}