<template>
<div class="an-content">
      <div class="an-box">
            <div class="an-box-1">
                <span class="span2">数据传输情况</span>
                 <el-tag
                    v-for="item in items"
                    :key="item.label"
                    :type="item.type"
                    closable
                    effect="dark">
                    {{ item.label }}
                </el-tag>
            </div>
            <div class="an-box-1">
                <span class="span2">实际冷量</span> 2800kw <span class="span1"><span class="span2">未来1小时预测冷量 </span>3400 kw</span>
            </div>
      </div>
      <div class="an-center">
          <bom-box></bom-box>
      </div>
      <div class="an-bottom">
          <div id="leftLine" style="width:574px;height:350px;margin-right:;24px;">
          </div>
          <div id="rightLine" style="width:573px;height:350px;"></div>
      </div>
</div>
  
</template>

<script>
import echarts from 'echarts'
import bomBox from './bomBox'
export default {
    data(){
        return{
            items: [
                { type: 'success', label: '能耗' },
                { type: 'success', label: '环境' },
                { type: 'danger', label: 'BA' },
               
            ]
        }
    },
    components:{bomBox},
    methods:{
        drawLeft(){
             var leftLine = echarts.init(document.getElementById('leftLine'))
             let option = {  
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['室外温度', '室内平均温度', '室内最高温度']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
               
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '室外温度',
                        type: 'line',
                        stack: '总量',
                        data: [120, 132, 101, 134, 90, 230, 210,112,150,]
                    },
                    {
                        name: '室内平均温度',
                        type: 'line',
                        stack: '总量',
                        data: [220, 182, 191, 234, 290, 330, 310,220,280]
                    },
                    {
                        name: '室内最高温度',
                        type: 'line',
                        stack: '总量',
                        data: [150, 232, 201, 154, 190, 330, 410,300,340]
                    },
                
                ]
            };
            leftLine.setOption(option)
        },
        drawRight(){
                var rightLine = echarts.init(document.getElementById('rightLine'))
                rightLine.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        animation: false,
                        label: {
                            backgroundColor: '#ccc',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            shadowBlur: 0,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            color: '#222'
                        }
                    },
                    formatter: function (params) {
                        return params[2].name + '<br />' + params[2].value;
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
                    
                },
                yAxis: {
                    
                   
                    splitNumber: 3,
                    splitLine: {
                        show: false
                    }
                },
                series: [{
                    name: 'L',
                    type: 'line',
                    data: [20,30,40,50,60,50,40,30,20],
                    lineStyle: {
                        opacity: 0
                    },
                    stack: 'confidence-band',
                    symbol: 'none'
                }, {
                    name: 'U',
                    type: 'line',
                    data: [20,30,50,60,50,40,30,20,40],
                    lineStyle: {
                        opacity: 0
                    },
                    areaStyle: {
                        color: '#ccc'
                    },
                    stack: 'confidence-band',
                    symbol: 'none'
                }, {
                    type: 'line',
                    data: [20,30,40,50,60,40,30,20,50],
                    hoverAnimation: false,
                    symbolSize: 6,
                    itemStyle: {
                        color: '#c23531'
                    },
                    showSymbol: false
                }]
            });
            },
    },
    mounted(){
        this.drawLeft()
        this.drawRight()
    }
}
</script>

<style lang='scss' scoped>
.an-content{
    .an-box{
        display:flex;
        justify-content:space-between;
        margin-top: 20px;
        .an-box-1{
            min-width:544px;
            border:1px dashed #ccc;
            padding-top: 30px;
            padding-left: 24px;
            padding-bottom:30px;
            background: #F8F9FA;
            margin-right: 12px;
            .span2{
                color: #646C73;
                margin-right: 10px;
            }
            .span1{
                margin-left:64px;
            }
        }  
    }
    .an-center{
        display: none;
    }
    .an-bottom{
        margin-top: 45px;
        display: flex;
    }
}
</style>
<style lang="scss" scoped>
.an-content{
    .el-tag{
        margin-right: 10px;
    }
}
</style>