odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

邓洁 : 首屏修改

Browse Source
This commit is contained in:
邓洁
2023-12-13 23:02:01 +08:00
parent 0360c8c928
commit ecead4aa09
8 changed files with 415 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/components/content/usedEle/UsedEle.vue
View File

@@ -1,23 +1,13 @@
<template>
<div id="used-ele">
<div class="title">用电量</div>
<div class="content">
<div class="item" v-for="item in eleData" :key="item.equipmentId">
<div class="name">{{ item.equipmentName }}</div>
<ul>
<li>
<div></div>
<span>总用电量：{{ item.electricityConsumptionTotal }}v</span>
</li>
<li>
<div></div>
<span>月用电量：{{ item.electricityConsumptionMonthly }}v</span>
</li>
<li>
<div></div>
<span>日用电量：{{ item.electricityConsumptionDay }}v</span>
</li>
</ul>
<div class="item">
<div></div>
<span>当月用电量：{{ electricityConsumptionMonthly }}v</span>
</div>
<div class="item">
<div></div>
<span>当月节省量：{{ monthlySavings }}v</span>
</div>
</div>
</div>
@@ -29,6 +19,8 @@ const props = defineProps({
eleData: Array
});
const eleData = ref([])
const electricityConsumptionMonthly=ref()
const monthlySavings=ref(55555)
watch(() => props.eleData, (now) => {
getBasicData(now.frequencyChangerList)
}, {deep: true});
@@ -37,9 +29,10 @@ watch(() => props.list, (now) => {
now.forEach(newItem => {
if (item.equipmentId === newItem.equipmentId) {
if (newItem.electricityConsumptionDay) {
item.electricityConsumptionDay = newItem.electricityConsumptionDay
item.electricityConsumptionMonthly = newItem.electricityConsumptionMonthly
item.electricityConsumptionTotal = newItem.electricityConsumptionTotal
electricityConsumptionMonthly.value=newItem.electricityConsumptionMonthly
// item.electricityConsumptionDay = newItem.electricityConsumptionDay
// item.electricityConsumptionMonthly = newItem.electricityConsumptionMonthly
// item.electricityConsumptionTotal = newItem.electricityConsumptionTotal
}
}
})
@@ -49,12 +42,13 @@ const getBasicData = (data) => {
let tranObj = {}
let tranArr = []
data.map(item => {
electricityConsumptionMonthly.value=item.electricityConsumptionMonthly,
tranObj = {
equipmentId: item.equipmentId,
equipmentName: item.equipmentName,
electricityConsumptionDay: item.electricityConsumptionDay,
electricityConsumptionMonthly: item.electricityConsumptionMonthly,
electricityConsumptionTotal: item.electricityConsumptionTotal,
// equipmentName: item.equipmentName,
// electricityConsumptionDay: item.electricityConsumptionDay,
// electricityConsumptionMonthly: item.electricityConsumptionMonthly,
// electricityConsumptionTotal: item.electricityConsumptionTotal,
}
tranArr.push(tranObj)
})
@@ -65,10 +59,10 @@ const getBasicData = (data) => {
<style lang="scss" scoped>
#used-ele {
width: 830px;
height: 351px;
height: 90px;
color: aliceblue;
position: absolute;
top: 1711px;
top: 1980px;
left: 68px;
background-image: url(../../../assets/images/usedEle/bg.png);
padding: 21px 62px 35px 62px;
@@ -84,99 +78,99 @@ const getBasicData = (data) => {
}
.content {
//border: white solid 1px;
height: calc(100% - 30px);
margin-top: 4px;
display: flex;
align-items: center;
justify-content: space-between;
.item {
flex: 1;
font-size: 12px;
height: 37px;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #38CAFB;
line-height: 37px;
display: flex;
align-items: center;
.name {
width: 150px;
height: 40px;
font-size: 30px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
line-height: 40px;
margin: 24px 0px 28px 0px;
> div {
margin-right: 10px;
width: 29px;
height: 33px;
background-image: url(../../../assets/images/usedEle/white-ele.png);
}
ul {
font-size: 14px;
li {
display: flex;
align-items: center;
//width: 270px;
height: 37px;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #cb7c4b;
line-height: 37px;
margin-bottom: 25px;
padding-left: 5px;
&:hover {
cursor: pointer;
width: 280px;
//height: 46px;
background: #2E5589;
border-radius: 7px;
color: #FBF7F4;
> div {
background-image: url(../../../assets/images/usedEle/white-ele.png);
}
}
> div {
width: 29px;
height: 33px;
background-image: url(../../../assets/images/usedEle/icon-all.png);
margin-right: 14px;
}
&:nth-child(2) {
> div {
background-image: url(../../../assets/images/usedEle/icon-month.png);
}
&:hover {
> div {
background-image: url(../../../assets/images/usedEle/white-ele.png);
}
}
}
&:nth-child(3) {
> div {
background-image: url(../../../assets/images/usedEle/icon-day.png);
}
&:hover {
> div {
background-image: url(../../../assets/images/usedEle/white-ele.png);
}
}
}
}
& > :nth-child(2) {
color: #4bcb6b;
}
& > :nth-child(3) {
color: #4bcbbc;
}
}
//ul {
// font-size: 14px;
//
// li {
// display: flex;
// align-items: center;
// //width: 270px;
// height: 37px;
// font-size: 28px;
// color: #38CAFB;
// line-height: 37px;
// margin-bottom: 25px;
// padding-left: 5px;
//
// &:hover {
// cursor: pointer;
// width: 280px;
// //height: 46px;
// background: #2E5589;
// border-radius: 7px;
// color: #FBF7F4;
//
// > div {
// background-image: url(../../../assets/images/usedEle/white-ele.png);
// }
// }
//
// > div {
// width: 29px;
// height: 33px;
// background-image: url(../../../assets/images/usedEle/white-ele.png);
// margin-right: 14px;
// }
//
// &:nth-child(2) {
// > div {
// background-image: url(../../../assets/images/usedEle/icon-month.png);
// }
//
// &:hover {
// > div {
// background-image: url(../../../assets/images/usedEle/white-ele.png);
// }
// }
// }
//
// &:nth-child(3) {
// > div {
// background-image: url(../../../assets/images/usedEle/icon-day.png);
// }
//
// &:hover {
// > div {
// background-image: url(../../../assets/images/usedEle/white-ele.png);
// }
// }
// }
// }
//
// & > :nth-child(2) {
// color: #4bcb6b;
// }
//
// & > :nth-child(3) {
// color: #4bcbbc;
// }
//}
}
& > :nth-child(2) {
transform: translateX(25px);
}
//& > :nth-child(2) {
// transform: translateX(25px);
//}
}
}
</style>