zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:能源流向图

This commit is contained in:
shijing 2024-12-05 09:52:48 +08:00
parent 91b8d3fc4a
commit 16f1541e42
1 changed files with 77 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/views/enm_energy/energyPicture.vue
View File

@ -1,19 +1,74 @@
<template> <template>
<!-- <el-card style="height: 100%;background-image: url('/img/elec_flow.png');background-size: contain;background-repeat: no-repeat;"> --> <el-container>
<el-card style="height: 100%; display: flex; flex-direction: column; justify-content: space-between;"> <el-main>
<img src="/media/elec_flow.png" class="flowImg" style="max-height: 100%;width:100%;height: auto; object-fit: contain;" > <div class="pictureContainer">
<!-- <img src="/media/water.png" class="flowImg" style="max-height: 100%;width:100%;height: auto; object-fit: contain;" > --> <img src="/media/elec_flow.png" class="flowImg" >
</el-card> <!-- <img src="/img/energy.png" class="flowImg" /> -->
</template> <div class="energyNumber" style="top: 80px;">{{ dataObj.烘干破碎机 }}</div>
<div class="energyNumber" style="top: 132px;">{{ dataObj.辅材立磨 }}</div>
<div class="energyNumber" style="top: 178px;">{{ dataObj.生粉循环风机 }}</div>
<div class="energyNumber" style="top: 222px;">{{ dataObj.生粉选粉机 }}</div>
<div class="energyNumber" style="top: 270px;">{{ dataObj.高温风机 }}</div>
<div class="energyNumber" style="top: 326px;">{{ dataObj.尾排风机 }}</div>
<div class="energyNumber" style="top: 379px;">{{ dataObj.回转窑 }}</div>
<div class="energyNumber" style="top: 430px;">{{ dataObj.煤立磨 }}</div>
<div class="energyNumber" style="top: 487px;">{{ dataObj.煤磨排风机 }}</div>
<div class="energyNumber" style="top: 536px;">{{ dataObj.窑头排风机 }}</div>
<div class="energyNumber" style="top: 607px;">{{ dataObj.水泥磨 }}</div>
<div class="energyNumber" style="top: 663px;">{{ dataObj.辊压机 }}</div>
<div class="energyNumber" style="top: 719px;">{{ dataObj.系统风机 }}</div>
<div class="energyNumber" style="top: 773px;">{{ dataObj.选粉机 }}</div>
<div class="energyNumber" style="top: 830px;">{{ dataObj.循环风机 }}</div>
</div>
</el-main>
</el-container>
</template>
<script> <script>
export default { export default {
data() { data() {
return { return {
imgSrc:'' imgSrc:'',
dataObj:{
烘干破碎机:0,
辅材立磨:0,
生粉循环风机:0,//生粉制备
生粉选粉机:0,//生粉制备
高温风机:0,
尾排风机:0,
回转窑:0,
煤立磨:0,
煤磨排风机:0,
窑头排风机:0,
水泥磨:0,
辊压机:0,
系统风机:0,
选粉机:0,//水泥磨
循环风机:0,//水泥磨
}
}; };
}, },
mounted() { 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'
};
this.$API.enm.mpoint.stat.req(obj).then(res => {
res.forEach(item => {
that.dataObj[item.mpoint_nickname]=item.val;
})
console.log(that.dataObj)
})
}, },
methods: { methods: {
@ -22,8 +77,21 @@
}; };
</script> </script>
<style> <style>
.pictureContainer{
position: relative;
width: 1200px;
height: 900px;
}
.flowImg{ .flowImg{
display: inline-block; display: inline-block;
width: clac(100%-210px); width: 1200px;
height: 900px;
}
.energyNumber{
position: absolute;
right: 160px;
color: #536dfe;
font-size: 15px;
font-weight: bold;
} }
</style> </style>