<template>
    <el-container>
        <el-main style="background: #fff;">
            <div class="pictureContainer">
                 <img src="/media/elec_flow.png" class="flowImg" >
                <!-- <img src="/img/energy.png" class="flowImg" /> -->
                <div class="pictureHeader" style="top: 35px;">
                    本日数据  时间段 00:00--24:00
                </div>
                <div class="energyNumber energyNumberLeft" style="top: 183px;">
                    <img v-if="dataObj.全厂用电合计" class="iconImg" src="img/tkx_e.png">
                    {{ dataObj.全厂用电合计 }} 
                    <span v-if="dataObj.全厂用电合计">kWh</span>
                </div>
                <div class="energyNumber energyNumberLeft2" style="top: 84px;">
                    <img v-if="dataObj.电石渣配电室用电_电" class="iconImg" src="img/tkx_e.png">
                    {{ dataObj.电石渣配电室用电_电 }} 
                    <span v-if="dataObj.电石渣配电室用电_电">kWh</span>
                </div>
                <!-- 窑头配电室用电_电 -->
                <div class="energyNumber energyNumberLeft2" style="top: 181px;">
                    <img v-if="dataObj.回转窑_电" class="iconImg" src="img/tkx_e.png">
                    {{ dataObj.回转窑_电 }} 
                    <span v-if="dataObj.回转窑_电">kWh</span>
                </div>
                <div class="energyNumber energyNumberLeft2" style="top: 331px;">
                    <img v-if="dataObj.水泥配电室用电_电" class="iconImg" src="img/tkx_e.png">
                    {{ dataObj.水泥配电室用电_电 }} 
                    <span v-if="dataObj.水泥配电室用电_电">kWh</span>
                </div>

                <div class="energyNumber" style="top: 77px;">
                    <img v-if="dataObj.烘干破碎机_电" class="iconImg" src="img/tkx_e.png"> 
                    {{ dataObj.烘干破碎机_电 }} 
                    <span v-if="dataObj.烘干破碎机_电">kWh</span>
                </div>
                <div class="energyNumber" style="top: 131px;">
                    <img v-if="dataObj.原料立磨主电机" class="iconImg" src="img/tkx_e.png">
                    {{ dataObj.原料立磨主电机 }}
                    <span v-if="dataObj.原料立磨主电机">kWh</span>
                </div>
                <div class="energyNumber" style="top: 175px;">
                    <img v-if="dataObj.生粉制备_循环风机_电" class="iconImg" src="img/tkx_e.png">
                    {{ dataObj.生粉制备_循环风机_电 }} 
                    <span v-if="dataObj.生粉制备_循环风机_电">kWh</span>
                </div>
                <div class="energyNumber" style="top: 219px;">
                    <img v-if="dataObj.生粉制备_选粉机_电" class="iconImg" src="img/tkx_e.png">
                    {{ dataObj.生粉制备_选粉机_电 }} 
                    <span v-if="dataObj.生粉制备_选粉机_电">kWh</span>
                </div>
                <div class="energyNumber" style="top: 269px;">
                    <img v-if="dataObj.高温风机_电" class="iconImg" src="img/tkx_e.png">
                    {{ dataObj.高温风机_电 }} 
                    <span v-if="dataObj.高温风机_电">kWh</span>
                </div>
                <div class="energyNumber" style="top: 325px;">
                    <img v-if="dataObj.尾排风机_电" class="iconImg" src="img/tkx_e.png">
                    {{ dataObj.尾排风机_电 }} 
                    <span v-if="dataObj.尾排风机_电">kWh</span>
                </div>
                <div class="energyNumber" style="top: 379px;">
                    <img v-if="dataObj.烧成工序用电合计" class="iconImg" src="img/tkx_e.png">
                    {{ dataObj.烧成工序用电合计 }} 
                    <span v-if="dataObj.烧成工序用电合计">kWh</span>
                </div>
                <div class="energyNumber" style="top: 430px;">
                    <img v-if="dataObj.原料立磨主电机" class="iconImg" src="img/tkx_e.png">
                    {{ dataObj.原料立磨主电机}} 
                    <span v-if="dataObj.原料立磨主电机">kWh</span>
                </div>
                <div class="energyNumber" style="top: 488px;">
                    <img v-if="dataObj.煤磨排风机_电" class="iconImg" src="img/tkx_e.png">
                    {{ dataObj.煤磨排风机_电 }} 
                    <span v-if="dataObj.煤磨排风机_电">kWh</span>
                </div>
                <div class="energyNumber" style="top: 538px;">
                    <img v-if="dataObj.窑头排风机_电" class="iconImg" src="img/tkx_e.png">
                    {{ dataObj.窑头排风机_电 }} 
                    <span v-if="dataObj.窑头排风机_电">kWh</span>
                </div>
                <div class="energyNumber" style="top: 608px;">
                    <img v-if="dataObj.水泥磨用电合计" class="iconImg" src="img/tkx_e.png">
                    {{ dataObj.水泥磨用电合计 }} 
                    <span v-if="dataObj.水泥磨用电合计">kWh</span>
                </div>
                <div class="energyNumber" style="top: 665px;">
                    <img v-if="dataObj.辊压机动_电||dataObj.辊压机定_电" class="iconImg" src="img/tkx_e.png">
                    {{ (Number(dataObj.辊压机动_电) + Number(dataObj.辊压机定_电)).toFixed(2) }} 
                    <span v-if="dataObj.辊压机动_电||dataObj.辊压机定_电">kWh</span>
                </div>
                <div class="energyNumber" style="top: 721px;">
                    <img v-if="dataObj.系统风机_电" class="iconImg" src="img/tkx_e.png">
                    {{ dataObj.系统风机_电 }} 
                    <span v-if="dataObj.系统风机_电">kWh</span>
                </div>
                <div class="energyNumber" style="top: 776px;">
                    <img v-if="dataObj.水泥磨_选粉机_电" class="iconImg" src="img/tkx_e.png">
                    {{ dataObj.水泥磨_选粉机_电 }} 
                    <span v-if="dataObj.水泥磨_选粉机_电">kWh</span>
                </div>
                <div class="energyNumber" style="top: 833px;">
                    <img v-if="dataObj.水泥磨_循环风机_电" class="iconImg" src="img/tkx_e.png">
                    {{ dataObj.水泥磨_循环风机_电 }} 
                    <span v-if="dataObj.水泥磨_循环风机_电">kWh</span>
                </div>
                <!-- 煤 -->
                <div class="energyNumberLeft coalNumber" style="top: 478px;">
                    <img v-if="dataObj.原煤累计量" class="iconImg" src="img/tkx_c.png">
                    {{ dataObj.原煤累计量 }} 
                    <span v-if="dataObj.水泥磨_循环风机_电">t</span>
                </div>
                <!-- 头煤 -->
                <div class="energyNumberRight coalNumber" style="top: 482px;">
                    <img v-if="dataObj.头煤_煤" class="iconImg" src="img/tkx_c.png">
                    {{ dataObj.头煤_煤 }} 
                    <span v-if="dataObj.头煤_煤">t</span>
                </div>
                <!-- 尾煤 -->
                <div class="energyNumberRight coalNumber" style="top: 566px;">
                    <img v-if="dataObj.尾煤_煤" class="iconImg" src="img/tkx_c.png">
                    {{ dataObj.尾煤_煤 }} 
                    <span v-if="dataObj.尾煤_煤">t</span>
                </div>

                <!-- 工业水 -->
                <div class="energyNumberLeft waterNumber" style="top: 638px;">
                    <img v-if="dataObj.尾煤_煤" class="iconImg" src="img/tkx_w.png">
                    {{ dataObj.工业水 }} 
                    <span v-if="dataObj.工业水">t</span>
                </div>
            </div> 
        </el-main>
    </el-container>
</template>
<script>
    export default {
        data() {
            return { 
                imgSrc:'',
                dataObj:{ }
            };
        },
        mounted() {
            let that = this;
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let hour = date.getHours();
            let obj = {
                year: year,
                month: month,
                day: day,
                type: 'day',
                page:0,
                mpoint__material__code__in:'elec,coal,pcoal,water'
            };
            this.$API.enm.mpoint.stat.req(obj).then(res => {
                res.forEach(item => {
                    that.dataObj[item.mpoint_nickname]=item.val;
                })
                console.log(that.dataObj)
            })

        },
        methods: {
           
        }
    };
</script>
<style>
    .pictureContainer{
        position: relative;
        width: 900px;
        height: 900px;
    }
    .flowImg{
        display: inline-block;
        width: 900px;
        height: 900px;
    }
    .iconImg{
        width: 18px;
        height: 18px;
        vertical-align: bottom;
    }
    .energyNumber{
        position: absolute;
        right: 10px;
        color: #d4237a;
        font-size: 14px;
        font-weight: bold;
    }
    .coalNumber{
        position: absolute;
        right: 10px;
        color: #dfd516;
        font-size: 14px;
        font-weight: bold;
    }
    .waterNumber{
        position: absolute;
        color: #2b2bdf;
        font-size: 14px;
        font-weight: bold;
    }
    .energyNumberLeft{
        left: 5px;
    }
    .energyNumberLeft2{
        right: 611px;
    }
    .energyNumberRight{
        right: 333px;
    }
    .pictureHeader {
    position: absolute;
    top: -30px; /* 调整表头距离图片的高度 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #f8f9fa; /* 表头背景颜色 */
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}
</style>