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-22 16:07:06 +08:00
parent 3907f39b7f
commit 43c4aaa21d
7 changed files with 74 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,23 @@
<template>
<div id="used-ele" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }" @click="handleOpenChart">
<div class="content" >
<div class="content">
<div class="item">
<div></div>
<span>当月用电量：{{ electricityConsumptionMonthly }}v</span>
<div class="container" ref="length">
<div class="value" ref="valueA"></div>
</div>
<div>
<div class="icon"></div>
<span>当月用电量：{{ electricityConsumptionMonthly }}v</span>
</div>
</div>
<div class="item">
<div></div>
<span>当月节省量：{{ monthlySavings }}v</span>
<div class="container" ref="length">
<div class="value" ref="valueB"></div>
</div>
<div>
<div class="icon"></div>
<span>当月节省量：{{ monthlySavings }}v</span>
</div>
</div>
</div>
<div class="digital-tunnel">
@@ -28,10 +38,10 @@
<div class="value">345v</div>
</div>
</div>
<div class="chat-dialog">
<div id="containerEle"></div>
<div style="width: 1px;"></div>
</div>
<div class="chat-dialog">
<div id="containerEle"></div>
<div style="width: 1px;"></div>
</div>
<div class="left-bottom-icon"></div>
<div class="right-bottom-icon"></div>
</el-dialog>
@@ -51,6 +61,8 @@ const isVisited = ref(false);
const eleData = ref([])
const electricityConsumptionMonthly = ref()
const monthlySavings = ref(55555)
const valueA = ref(electricityConsumptionMonthly.value);
const valueB = ref(monthlySavings.value);
const bgImage = computed(() =>
isVisited.value
? "bpq_active.png"
@@ -112,7 +124,7 @@ const initChart = () => {
fontSize: 45
},
itemWidth: 30,
itemHeight:30,
itemHeight: 30,
icon: "circle",
},
//离容器四侧的距离
@@ -179,13 +191,13 @@ const initChart = () => {
//配置项
series: [
{
name:'日用电量',
name: '日用电量',
data: [120, 200, 150, 80, 70, 110, 130, 100, 140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50],
type: 'bar'
},
{
name:'日节省量',
data: [140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50,120, 200, 150, 80, 70, 110, 130, 100, ],
name: '日节省量',
data: [140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50, 120, 200, 150, 80, 70, 110, 130, 100,],
type: 'bar'
},
]
@@ -202,17 +214,35 @@ const getImageUrl = (name) => {
</script>
<style lang="scss" scoped>
:deep(.el-dialog__header) {
padding: 0!important;
.container {
width: 60px;
height: 210px;
border-radius: 31px;
border: 1px solid #0f82af;
position: relative;
margin-bottom: 20px;
.value {
width: 60px;
height: inherit;
background: #60ddde;
border-radius: 31px;
transition: width 0.5s linear 0s;
}
}
:deep(.el-dialog__header) {
padding: 0 !important;
}
#used-ele {
cursor: pointer;
width: 830px;
height: 90px;
height: 373px;
color: aliceblue;
position: absolute;
//top: 1980px;
top: 1420px;
top: 1680px;
left: 68px;
background-image: url(../../../assets/images/usedEle/bg.png);
padding: 21px 62px 35px 62px;
@@ -233,94 +263,28 @@ const getImageUrl = (name) => {
align-items: center;
justify-content: space-between;
cursor: pointer;
.item {
margin-top: 44px;
height: 37px;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #38CAFB;
line-height: 37px;
display: flex;
flex-direction: column;
align-items: center;
> div {
margin-right: 10px;
width: 29px;
height: 33px;
background-image: url(../../../assets/images/usedEle/white-ele.png);
> div:nth-child(2) {
display: flex;
.icon {
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;
// 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);
//}
}
}
</style>