<template>
  <div class="bomb">
    <div class="bomb-left">
        <div class="bomb-left1">当前策略</div>
        <div class="bomb-left2">应执行时间 13:00-13:20</div>
        <div class="bomb-left3">策略可靠度</div>
        <div id='circleEcharts' style="width:104px;height:104px"></div>
    </div>
    <div class="bomb-right">
       <water-unit></water-unit>
        <div class="bomb-right-center">
           <span>数据传输情况</span>
            <span class="bomb-span1">实际冷量 <span class="bomb-span3">2800</span>KW</span>
            <span class="bomb-span2">未来一小时预测冷量 <span class="bomb-span3">3400</span> KW</span>
        </div>
        <div class="bomb-right-bottom">
            <el-input placeholder="你可以在此处填写备注信息"> </el-input>
        </div>

    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import waterUnit from './waterUnit'
export default {
    data(){
        return{
            
        }
    },
    components:{waterUnit},
    methods:{
        drawCircle(){
            var circleEcharts  = echarts.init(document.getElementById("circleEcharts"))
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {value: 79, name: '直接访问'},
                            {value: 21, name: '邮件营销'}
                        ]
                    }
                ]
            };
            circleEcharts.setOption(option)
        }
    },
    mounted(){
       this.drawCircle()
    }

}
</script>

<style lang='scss' scoped>
.bomb{
    width:100%;
    height:300px;
    margin-top: 10px;
    display: flex;
    .bomb-left{
        width:240px;
        padding-left:30px;
        .bomb-left1{
            font-size:16px;
            margin:38px 0 16px 0
        }
        .bomb-left2{
            color: #646C73;
            font-size: 14px;
            margin-bottom:16px;
        }
        .bomb-left3{
            color:#646C73;
            font-size: 14px;
            margin-bottom:22px;
        }
    }
    .bomb-right{
        .bomb-right-center{
            color:#646C73;
            font-size:14px;
            margin:20px 0;
            .bomb-span1{
                margin-left:88px;
            }
            .bomb-span2{
                margin-left:44px;
            }
            .bomb-span3{
                font-size: 18px;
                color: #1F2429;
            }
        }
        .bomb-right-bottom{
            margin-top: 16px;
        }
    }
}

</style>