From 50f987dba6e5cefcdf170bb6559e05229e88ae9a Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期三, 18 九月 2024 15:19:52 +0800
Subject: [PATCH] h5_meeting
---
screen/src/views/EnergyConsum.vue | 614 +++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 540 insertions(+), 74 deletions(-)
diff --git a/screen/src/views/EnergyConsum.vue b/screen/src/views/EnergyConsum.vue
index 6df09dd..475cde1 100644
--- a/screen/src/views/EnergyConsum.vue
+++ b/screen/src/views/EnergyConsum.vue
@@ -2,11 +2,7 @@
<div class="main_app">
<img src="@/assets/images/bg_main_app.png" class="main_bg" alt="" />
<div class="main_header">
- <img
- src="@/assets/images/maintitle@2x.png"
- class="main_header_bg"
- alt=""
- />
+ <img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" />
<div class="title">瀹夋嘲鏅烘収鐗╂祦鍥尯-缁胯壊浣庣⒊杩愯惀</div>
<div class="time">
<span class="date">{{ date }}</span>
@@ -59,6 +55,9 @@
</div>
<img src="@/assets/images/title@2x.png" class="bg" alt="" />
</div>
+ <div class="load_wrap">
+ <div class="loadRef"></div>
+ </div>
</div>
<div class="left_box_three">
<div class="com_header">
@@ -75,6 +74,9 @@
</div>
<img src="@/assets/images/title@2x.png" class="bg" alt="" />
</div>
+ <div class="energy_wrap">
+ <div class="energyRef"></div>
+ </div>
</div>
</div>
<div class="center_box">
@@ -82,11 +84,7 @@
<div class="list">
<div class="item">
<div class="header">
- <img
- class="icon"
- src="@/assets/images/ic_yongdian@2x.png"
- alt=""
- />
+ <img class="icon" src="@/assets/images/ic_yongdian@2x.png" alt="" />
<div class="content">
<div class="name">涓婃湀鐢ㄧ數(kw路h)</div>
<div class="num">450</div>
@@ -103,11 +101,7 @@
</div>
<div class="item">
<div class="header">
- <img
- class="icon"
- src="@/assets/images/ic_yongshui@2x.png"
- alt=""
- />
+ <img class="icon" src="@/assets/images/ic_yongshui@2x.png" alt="" />
<div class="content">
<div class="name">涓婃湀鐢ㄦ按(t)</div>
<div class="num">450</div>
@@ -124,11 +118,7 @@
</div>
<div class="item">
<div class="header">
- <img
- class="icon"
- src="@/assets/images/ic_yongqi@2x.png"
- alt=""
- />
+ <img class="icon" src="@/assets/images/ic_yongqi@2x.png" alt="" />
<div class="content">
<div class="name">涓婃湀鐢ㄦ皵(t)</div>
<div class="num">450</div>
@@ -195,17 +185,64 @@
</div>
</div>
<div class="right_box">
- <div class="right_box_one"></div>
- <div class="right_box_two"></div>
- <div class="right_box_three"></div>
+ <div class="right_box_one">
+ <div class="com_header">
+ <div class="title">
+ <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
+ <div>鏈湀纰虫帓鏀鹃噺缁熻</div>
+ </div>
+ <img src="@/assets/images/title@2x.png" class="bg" alt="" />
+ </div>
+ <div class="content">
+ <img src="@/assets/images/ic_co2@2x.png" class="co2" alt="">
+ <div>
+ <div class="name">鏈湀绱纰虫帓鏀�</div>
+ <div><span class="num">22.22</span><span>鍚�</span></div>
+ </div>
+ </div>
+ </div>
+ <div class="right_box_two">
+ <div class="com_header">
+ <div class="title">
+ <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
+ <div>涓婃湀娌硅�楁帓琛岀粺璁�</div>
+ </div>
+ <div class="tabs">娌硅�楋細L</div>
+ <img src="@/assets/images/title@2x.png" class="bg" alt="" />
+ </div>
+ <div class="list">
+ <div class="line" v-for="item,i in 6">
+ <div class="top"><span v-if="i < 3">top</span>{{ i }}</div>
+ <div class="id_card">鐨朅12313</div>
+ <div class="wrap">
+ <ChargeRate :rate="15" :color />
+ </div>
+ <div class="num">1000</div>
+ </div>
+ </div>
+ </div>
+ <div class="right_box_three">
+ <div class="com_header">
+ <div class="title">
+ <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
+ <div>鏈堟补鑰楀垎鏋�</div>
+ </div>
+ <img src="@/assets/images/title@2x.png" class="bg" alt="" />
+ </div>
+ <div class="wrap">
+ <div class="analyseRef"></div>
+ </div>
+ </div>
</div>
</div>
</div>
</template>
<script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'
+import ChargeRate from '@/components/ChargeRate.vue'
+import * as echarts from 'echarts'
const weekMap = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�',]
const date = ref(dayjs().format('YYYY.MM.DD'))
@@ -218,29 +255,329 @@
}, 1000)
+
+const initOperation = () => {
+ // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
+ var myChart = echarts.init(document.querySelector('.analyseRef'))
+ // 缁樺埗鍥捐〃
+ myChart.setOption({
+ // tooltip: {
+ // trigger: 'axis',
+ // axisPointer: {
+ // type: 'line'
+ // },
+ // formatter: function (params) {
+ // setTimeout(() => {
+ // console.log('params', params)
+ // })
+ // return `
+ // <div style="background-color: #091123;margin: -12px;padding: 14px;border: 2px solid rgba(1,217,254,0.5);color: #fff;">
+ // <div>${params[0].name}鎬婚攢鍞(涓囧厓)</div>
+ // <div style="display: flex;align-items: center;">
+ // <div style="width: 10px;height: 10px;border-radius: 50%;background-color: #ebbf40;"></div>
+ // <div style="margin: 0 4px 0 6px;">鎬婚攢鍞�</div>
+ // <span style="color: #ebbf40;">${params[0].value}</span>
+ // </div>
+ // </div>
+ // `
+ // }
+ // },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: [1,2,3,4,5,5]
+ },
+ yAxis: {
+ type: 'value',
+ name: '鍗曚綅锛歀',
+ nameTextStyle: {
+ padding: [0, 0, 0, -16] // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂�
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ //杩欓噷杈撳叆绾挎潯鐨勬牱寮�
+ color: 'rgba(255,255,255,0.14)',
+ type: 'dashed',
+ },
+ splitNumber: 4
+ }
+ },
+ grid: {
+ top: '16%',
+ left: '4%',
+ right: '2%',
+ bottom: '2%',
+ containLabel: true
+ },
+ series: [
+ {
+ data: [1,2,3,4,4,5].map(i => {
+ return {
+ name: i,
+ value: i,
+ }
+ }),
+ type: 'line',
+ areaStyle: {
+ normal: {
+ color: {
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: "rgba(192, 156, 53,.7)" // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: "#1b1b12" // 100% 澶勭殑棰滆壊
+ }],
+ globalCoord: false // 缂虹渷涓� false
+ }
+ }
+ },
+ lineStyle: { // 绾挎潯鏍峰紡
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: '#F3BD00' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1, color: '#F3BD00' // 100% 澶勭殑棰滆壊
+ }],
+ },
+ width: 2, // 绾挎潯绮楃粏
+ },
+ symbol: 'circle',
+ symbolSize: 10,
+ itemStyle: {
+ normal: {
+ color: '#F3BD00', //鎶樼嚎鐐圭殑棰滆壊
+ },
+ },
+ smooth: true
+ }
+ ]
+ })
+
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+}
+const initLoadReal = () => {
+ // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
+ var myChart = echarts.init(document.querySelector('.loadRef'))
+ // 缁樺埗鍥捐〃
+ myChart.setOption({
+ // tooltip: {
+ // trigger: 'axis',
+ // axisPointer: {
+ // type: 'line'
+ // },
+ // formatter: function (params) {
+ // setTimeout(() => {
+ // console.log('params', params)
+ // })
+ // return `
+ // <div style="background-color: #091123;margin: -12px;padding: 14px;border: 2px solid rgba(1,217,254,0.5);color: #fff;">
+ // <div>${params[0].name}鎬婚攢鍞(涓囧厓)</div>
+ // <div style="display: flex;align-items: center;">
+ // <div style="width: 10px;height: 10px;border-radius: 50%;background-color: #ebbf40;"></div>
+ // <div style="margin: 0 4px 0 6px;">鎬婚攢鍞�</div>
+ // <span style="color: #ebbf40;">${params[0].value}</span>
+ // </div>
+ // </div>
+ // `
+ // }
+ // },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: [1,2,3,4,5,5]
+ },
+ yAxis: {
+ type: 'value',
+ name: '鍗曚綅锛歬w路h',
+ nameTextStyle: {
+ padding: [0, 0, 0, -16] // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂�
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ //杩欓噷杈撳叆绾挎潯鐨勬牱寮�
+ color: 'rgba(255,255,255,0.14)',
+ type: 'dashed',
+ },
+ splitNumber: 4
+ }
+ },
+ grid: {
+ top: '16%',
+ left: '4%',
+ right: '2%',
+ bottom: '2%',
+ containLabel: true
+ },
+ series: [
+ {
+ data: [1,2,3,4,4,4000].map(i => {
+ return {
+ name: i,
+ value: i,
+ }
+ }),
+ type: 'line',
+ areaStyle: {
+ normal: {
+ color: {
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: "rgba(192, 156, 53,.7)" // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: "#1b1b12" // 100% 澶勭殑棰滆壊
+ }],
+ globalCoord: false // 缂虹渷涓� false
+ }
+ }
+ },
+ lineStyle: { // 绾挎潯鏍峰紡
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: '#F3BD00' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1, color: '#F3BD00' // 100% 澶勭殑棰滆壊
+ }],
+ },
+ width: 2, // 绾挎潯绮楃粏
+ },
+ symbol: 'circle',
+ symbolSize: 10,
+ itemStyle: {
+ normal: {
+ color: '#F3BD00', //鎶樼嚎鐐圭殑棰滆壊
+ },
+ },
+ smooth: true
+ }
+ ]
+ })
+
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+}
+const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
+const initEnergy = () => {
+ var myChart = echarts.init(document.querySelector('.energyRef'))
+ // 缁樺埗鍥捐〃
+ const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
+ myChart.setOption({
+ grid: {
+ top: '20%',
+ left: '2%',
+ right: '2%',
+ bottom: '4%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'line'
+ },
+ },
+ xAxis: {
+ type: 'category',
+ data: [1,2,3,4,4,5]
+ },
+ yAxis: {
+ type: 'value',
+ name: 'kw路h',
+ nameTextStyle: {
+ padding: [0, 0, 4, -30] // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂�
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ //杩欓噷杈撳叆绾挎潯鐨勬牱寮�
+ color: 'rgba(255,255,255,0.14)',
+ }
+ }
+ },
+ series: [
+ {
+ data: [1,2,3,4,5],
+ type: 'bar',
+ barWidth: 10,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0, 0, 0, 1,
+ [
+ { offset: 0, color: arr[1] },
+ { offset: 1, color: '#080807' }
+ ]
+ ),
+ barBorderRadius: [10, 10, 0, 0]
+ }
+ }
+ }
+ ]
+ })
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+}
+
+onMounted(() => {
+ initOperation()
+ initLoadReal()
+ initEnergy()
+})
+
+
</script>
<style lang="scss" scoped>
.main_content {
display: flex;
padding: 20px 24px 0;
+
.left_box {
flex: 4;
+
.left_box_one {
width: 100%;
margin-bottom: 20px;
+
.content {
width: 100%;
padding: 24px 5%;
display: flex;
flex-wrap: wrap;
+
.item {
width: 33.3%;
margin-bottom: 12px;
+
.lab {
font-size: 14px;
color: #ffffff;
}
+
.val {
font-weight: 600;
font-size: 20px;
@@ -250,37 +587,64 @@
}
}
}
+
.left_box_two {
margin-bottom: 20px;
+ .load_wrap{
+ width: 100%;
+ height: 210px;
+ padding: 12px 12px;
+ .loadRef{
+ width: 100%;
+ height: 100%;
+ }
+ }
}
+
.left_box_three {
+ .energy_wrap{
+ width: 100%;
+ height: 200px;
+ .energyRef{
+ width: 100%;
+ height: 100%;
+ }
+ }
}
}
+
.center_box {
flex: 9;
padding: 0 60px;
+
.center_box_one {
padding: 30px 18px;
margin-bottom: 18px;
+
.list {
display: flex;
justify-content: space-between;
align-items: center;
+
.item {
flex: 1;
+
.header {
display: flex;
margin-bottom: 14px;
+
.icon {
width: 70px;
height: 73px;
margin-right: 20px;
}
+
.content {
.name {
font-size: 16px;
color: #d2e0ff;
}
+
.num {
font-weight: bold;
font-size: 36px;
@@ -289,17 +653,21 @@
}
}
}
+
.static {
font-size: 12px;
display: flex;
align-items: center;
+
.lab {
color: #869cc9;
}
+
.val {
color: #d2e0ff;
margin-right: 20px;
}
+
.icon {
width: 12px;
height: 12px;
@@ -309,99 +677,119 @@
}
}
}
+
.center_box_two {
position: relative;
width: 100%;
height: 544px;
+
.item {
width: 120px;
height: 112px;
position: absolute;
text-align: center;
+
.num {
font-size: 35px;
line-height: 50px;
height: 50px;
font-weight: 600;
+
.unit {
font-size: 13px;
}
}
+
.name {
font-weight: 500;
font-size: 17px;
color: #ffffff;
}
+
.bg {
width: 120px;
height: 88px;
top: 24px;
}
}
- .item1{
+
+ .item1 {
left: 50%;
top: 0;
transform: translate(-50%, 0);
}
- .item2{
+
+ .item2 {
top: 112px;
left: 106px;
}
- .item3{
+
+ .item3 {
top: 112px;
right: 106px;
}
- .item4{
+
+ .item4 {
top: 291px;
left: 56px;
}
- .item5{
+
+ .item5 {
top: 291px;
right: 56px;
}
- .bottom_wrap{
+
+ .bottom_wrap {
position: absolute;
- bottom:-110px;
+ bottom: -110px;
left: 50%;
width: 600px;
height: 100px;
transform: translate(-50%, 0);
}
- .bottom{
+
+ .bottom {
width: 140px;
height: 194px;
position: absolute;
text-align: center;
padding-top: 70px;
- .num{
+
+ .num {
font-size: 24px;
color: #D0FFFA;
line-height: 33px;
}
- .name{
+
+ .name {
font-size: 15px;
color: #D0FFFA;
line-height: 21px;
}
- .unit{
+
+ .unit {
font-size: 14px;
color: #D0FFFA;
}
}
- .bottom1{
+
+ .bottom1 {
bottom: -0px;
- left: 40px;
+ left: 40px;
}
- .bottom3{
+
+ .bottom3 {
bottom: -0px;
- right: 40px;
+ right: 40px;
}
- .bottom2{
+
+ .bottom2 {
bottom: -0px;
- left: 50%;
+ left: 50%;
transform: translate(-50%, 0);
padding-top: 50px;
- .num{
+
+ .num {
font-size: 36px;
color: #01D9FE;
line-height: 54px;
@@ -410,10 +798,83 @@
}
}
}
+
.right_box {
flex: 4;
+
+ .right_box_one {
+ margin-bottom: 20px;
+ .content {
+ height: 164px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .co2 {
+ width: 102px;
+ margin-right: 30px;
+ }
+
+ .num {
+ margin-top: 10px;
+ color: #01D9FE;
+ font-weight: 600;
+ font-size: 36px;
+ margin-right: 2px;
+ }
+ }
+ }
+ .right_box_two{
+ margin-bottom: 20px;
+ .list{
+ padding: 20px 24px 4px;
+ .line{
+ display: flex;
+ align-items: center;
+ margin-bottom: 16px;
+ .top{
+ font-weight: 500;
+ font-size: 12px;
+ width: 33px;
+ height: 19px;
+ line-height: 19px;
+ text-align: center;
+ color: #DBEAEA;
+ box-shadow: inset 0px 0px 3px 0px #01D9FE;
+ margin-right: 10px;
+ }
+ .id_card{
+ color: #DBEAEA;
+ font-weight: 500;
+ margin-right: 14px;
+ font-size: 14px;
+ }
+ .num{
+ font-weight: 500;
+ font-size: 13px;
+ color: #DBEAEA;
+ margin-left: 15px;
+ }
+ .wrap{
+ flex: 1;
+ height: 20px;
+ border: 1px solid #686B6B;
+ }
+ }
+ }
+ }
+ .right_box_three{
+ .wrap{
+ padding: 8px;
+ .analyseRef{
+ width: 100%;
+ height: 210px;
+ }
+ }
+ }
}
}
+
.com_header {
height: 40px;
display: flex;
@@ -421,44 +882,46 @@
align-items: center;
padding: 0 15px 0 13px;
position: relative;
+
.title {
display: flex;
align-items: center;
font-weight: bold;
font-size: 16px;
- background-image: -webkit-linear-gradient(
- top,
- #ffffff 0%,
- #c8ddff 66%,
- #85b4ff 72%,
- #74a9ff 100%
- );
+ background-image: -webkit-linear-gradient(top,
+ #ffffff 0%,
+ #c8ddff 66%,
+ #85b4ff 72%,
+ #74a9ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
+
.icon {
width: 16px;
height: 16px;
margin-right: 14px;
}
}
+
.tabs {
display: flex;
align-items: center;
- .tab {
- font-size: 14px;
- color: #d2e0ff;
- }
+ font-size: 14px;
+ color: #d2e0ff;
+
.separate {
width: 1px;
height: 14px;
background-color: #d2e0ff;
margin: 0 6px;
}
+
.active {
color: #0094eb;
}
}
}
+
.bg {
position: absolute;
left: 0;
@@ -468,17 +931,17 @@
object-fit: cover;
z-index: -1;
}
+
.fs_linear {
- background-image: -webkit-linear-gradient(
- top,
- #ffffff 0%,
- #c8ddff 70%,
- #85b4ff 80%,
- #74a9ff 100%
- );
+ background-image: -webkit-linear-gradient(top,
+ #ffffff 0%,
+ #c8ddff 70%,
+ #85b4ff 80%,
+ #74a9ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
+
.main_header {
display: flex;
justify-content: space-between;
@@ -488,31 +951,30 @@
padding: 0px 40px 16px;
font-weight: 600;
font-size: 36px;
+
.title {
- background-image: -webkit-linear-gradient(
- top,
- #ffffff 0%,
- #c8ddff 70%,
- #85b4ff 80%,
- #74a9ff 100%
- );
+ background-image: -webkit-linear-gradient(top,
+ #ffffff 0%,
+ #c8ddff 70%,
+ #85b4ff 80%,
+ #74a9ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
+
.time {
font-size: 26px;
font-weight: 600;
- background-image: -webkit-linear-gradient(
- top,
- #ffffff 0%,
- #c8ddff 50%,
- #85b4ff 80%,
- #74a9ff 100%
- );
+ background-image: -webkit-linear-gradient(top,
+ #ffffff 0%,
+ #c8ddff 50%,
+ #85b4ff 80%,
+ #74a9ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: flex;
align-items: center;
+
.time {
width: 180px;
display: flex;
@@ -520,10 +982,12 @@
padding-bottom: 10px;
font-size: 36px;
}
+
.week {
margin-left: 36px;
}
}
+
.main_header_bg {
position: absolute;
left: 0;
@@ -534,11 +998,13 @@
z-index: -1;
}
}
+
.main_app {
width: 100%;
min-height: 100vh;
color: #ffffff;
position: relative;
+
.main_bg {
position: absolute;
left: 0;
--
Gitblit v1.9.3