230 lines
10 KiB
Vue
230 lines
10 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: 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> |