b-overview.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {BusinessService} from '../business.service';
import {NzMessageService} from 'ng-zorro-antd';
import {color} from '../../app.constants';
import {WorkReportComponent} from '../modal/work-report/work-report.component';

@Component({
    selector: 'smart-b-overview',
    templateUrl: './b-overview.component.html',
    styles: [
        `            
            p{
                margin: 0;
            }
            .flex-center {
                display: flex;
                justify-content: center;
                align-items: center
            }
            .flex-item > p{
                margin: 10px 0;
            }

            .leftDiv {
                padding-right: 10px
            }

            .leftDiv-container {
                border: 1px solid #ddd;
            }

            .rightDiv {
                border: 1px solid #ddd;
                padding: 10px !important;
            }

            .rightDiv > p {
                padding: 10px;
            }

            .rightDiv > p > span {
                float: right;
            }
            .main-color-font {
                color: #6097b7;
                font-size: 20px
            }
            .follow {
                padding: 5px;
                position: relative;
            }

            .follow-container {
                border: 1px solid #ddd;
            }

            .follow-title {
                border-bottom: 1px solid #ddd;
                padding: 10px 5px;
                background-color: #eee;
            }

            .height-150 {
                height: 150px;
            }

            .container-top {
                height: 75px;
                padding: 10px;
                border-bottom: 1px solid #dddddd;
                border-right: 1px solid #dddddd;
            }

            .container-bottom {
                height: 75px;
                padding: 10px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #dddddd;
                border-right: 1px solid #dddddd;
            }
            .margin-0-10{
                margin: 0 10px;
            }
            .calcle-follow{
                position: absolute;
                top: 15px;
                right: 15px;
            }
            .chart-font{
                padding-left: 20px;
                font-size: 12px;
                position: absolute;
                top: 50%;
                right: 5%;
                transform: translate(10%,-50%);
            }
            :host ::ng-deep  .ant-tag{
                height: 16px;
                vertical-align: middle;
            }
        `
    ]
})
export class BOverviewComponent implements OnInit {
    @ViewChild('smartWorkReport') smartWorkReport: WorkReportComponent;

    color = color;
    list;

    constructor(private busineSer: BusinessService, private message: NzMessageService) {
    }

    ngOnInit() {
        this.getList();
    }

    getList() {
        this.busineSer.itserviceOverview().subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.list = res.data;
                    this.echartView();
                } else {
                    this.message.error(res.errMsg);
                }
            }
        );
    }

    echartView(){
        this.list.forEach(e=>{
            e.available = e.available.split("%")[0];
            e.optionLeft = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                series: [
                    {
                        name:'可用性',
                        type:'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: true,
                                position: 'center'
                            },
                        },
                        color:['#80ba78','#dddddd'],
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:[
                            {
                                value:e.available,
                                name:'可用性',
                            },
                            {
                                value:100 - e.available,
                                name:'',
                            }
                        ]
                    }
                ]
            };
            e.optionRight = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                color:['#5dd2d2','#dddddd'],
                series: [
                    {
                        name:'重要用户',
                        type:'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: true,
                                position: 'center'
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:[
                            {value:e.available, name:'重要用户'},
                            {value:100 - e.available, name:''}
                        ]
                    }
                ]
            };
        })
    }

    // 查看运行报告
    reportDetail(item){
        this.smartWorkReport.showModal(item);
    }

}