factory_web/src/views/enm_energy/energyPicture.vue

172 lines
7.5 KiB
Vue

<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: 187px;">
<img v-if="dataObj.全厂电量_电" class="iconImg" src="img/elec.png">{{ dataObj.全厂电量_电 }} kWh
</div>
<div class="energyNumber energyNumberLeft2" style="top: 91px;">
<img v-if="dataObj.电石渣配电室用电_电" class="iconImg" src="img/elec.png">{{ dataObj.电石渣配电室用电_电 }} kWh
</div>
<!-- 窑头配电室用电_电 -->
<div class="energyNumber energyNumberLeft2" style="top: 188px;">
<img v-if="dataObj.回转窑_电" class="iconImg" src="img/elec.png">{{ dataObj.回转窑_电 }} kWh
</div>
<div class="energyNumber energyNumberLeft2" style="top: 335px;">
<img v-if="dataObj.水泥配电室用电_电" class="iconImg" src="img/elec.png">{{ dataObj.水泥配电室用电_电 }} kWh
</div>
<div class="energyNumber" style="top: 84px;">
<img v-if="dataObj.烘干破碎机_电" class="iconImg" src="img/elec.png"> {{ dataObj.烘干破碎机_电 }} kWh
</div>
<div class="energyNumber" style="top: 138px;">
<img v-if="dataObj.辅材立磨_电" class="iconImg" src="img/elec.png">{{ dataObj.辅材立磨_电 }}
</div>
<div class="energyNumber" style="top: 181px;">
<img v-if="dataObj.生粉制备_循环风机_电" class="iconImg" src="img/elec.png">{{ dataObj.生粉制备_循环风机_电 }} kWh
</div>
<div class="energyNumber" style="top: 225px;">
<img v-if="dataObj.生粉制备_选粉机_电" class="iconImg" src="img/elec.png">{{ dataObj.生粉制备_选粉机_电 }} kWh
</div>
<div class="energyNumber" style="top: 275px;">
<img v-if="dataObj.高温风机_电" class="iconImg" src="img/elec.png">{{ dataObj.高温风机_电 }} kWh
</div>
<div class="energyNumber" style="top: 330px;">
<img v-if="dataObj.尾排风机_电" class="iconImg" src="img/elec.png">{{ dataObj.尾排风机_电 }} kWh
</div>
<div class="energyNumber" style="top: 383px;">
<img v-if="dataObj.回转窑_电" class="iconImg" src="img/elec.png">{{ dataObj.回转窑_电 }} kWh
</div>
<div class="energyNumber" style="top: 433px;">
<img v-if="dataObj.原料立磨主电机" class="iconImg" src="img/elec.png">{{ dataObj.原料立磨主电机}} kWh
</div>
<div class="energyNumber" style="top: 490px;">
<img v-if="dataObj.煤磨排风机_电" class="iconImg" src="img/elec.png">{{ dataObj.煤磨排风机_电 }} kWh
</div>
<div class="energyNumber" style="top: 539px;">
<img v-if="dataObj.窑头排风机_电" class="iconImg" src="img/elec.png">{{ dataObj.窑头排风机_电 }} kWh
</div>
<div class="energyNumber" style="top: 609px;">
<img v-if="dataObj.水泥磨_电" class="iconImg" src="img/elec.png">{{ dataObj.水泥磨_电 }} kWh
</div>
<div class="energyNumber" style="top: 665px;">
<img v-if="dataObj.辊压机动_电||dataObj.辊压机定_电" class="iconImg" src="img/elec.png">{{ (Number(dataObj.辊压机动_电) + Number(dataObj.辊压机定_电)).toFixed(2) }} kWh
</div>
<div class="energyNumber" style="top: 720px;">
<img v-if="dataObj.系统风机_电" class="iconImg" src="img/elec.png">{{ dataObj.系统风机_电 }} kWh
</div>
<div class="energyNumber" style="top: 775px;">
<img v-if="dataObj.水泥磨_选粉机_电" class="iconImg" src="img/elec.png">{{ dataObj.水泥磨_选粉机_电 }} kWh
</div>
<div class="energyNumber" style="top: 831px;">
<img v-if="dataObj.水泥磨_循环风机_电" class="iconImg" src="img/elec.png">{{ dataObj.水泥磨_循环风机_电 }} kWh
</div>
<!-- 煤 -->
<div class="energyNumberLeft coalNumber" style="top: 460px;">
<img v-if="dataObj.原煤累计量" class="iconImg" src="img/coal.png">{{ dataObj.原煤累计量 }} t
</div>
<!-- 头煤 -->
<div class="energyNumberRight coalNumber" style="top: 463px;">
<img v-if="dataObj.头煤_煤" class="iconImg" src="img/coal.png">{{ dataObj.头煤_煤 }} t
</div>
<!-- 尾煤 -->
<div class="energyNumberRight coalNumber" style="top: 552px;">
<img v-if="dataObj.尾煤_煤" class="iconImg" src="img/coal.png">{{ dataObj.尾煤_煤 }} t
</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'
};
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: rgb(20, 244, 23);
font-size: 15px;
font-weight: bold;
}
.coalNumber{
position: absolute;
right: 10px;
color: rgb(212, 35, 122);
font-size: 15px;
font-weight: bold;
}
.energyNumberLeft{
left: 5px;
}
.energyNumberLeft2{
right: 600px;
}
.energyNumberRight{
right: 328px;
}
.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>