From 17efddc6a667670dca682bf36b51a43e99615e6d Mon Sep 17 00:00:00 2001
From: k94314517 <8417338+k94314517@user.noreply.gitee.com>
Date: 星期三, 16 十月 2024 15:59:38 +0800
Subject: [PATCH] 代码初始化
---
screen/src/views/EnergyConsum.vue | 990 +++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 736 insertions(+), 254 deletions(-)
diff --git a/screen/src/views/EnergyConsum.vue b/screen/src/views/EnergyConsum.vue
index 6df09dd..d408457 100644
--- a/screen/src/views/EnergyConsum.vue
+++ b/screen/src/views/EnergyConsum.vue
@@ -1,211 +1,252 @@
<template>
- <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=""
- />
- <div class="title">瀹夋嘲鏅烘収鐗╂祦鍥尯-缁胯壊浣庣⒊杩愯惀</div>
- <div class="time">
- <span class="date">{{ date }}</span>
- <span class="week">{{ week }}</span>
- <span class="time">{{ time }}</span>
+ <v-scale-screen width="1920" height="960" :fullScreen="true">
+ <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="" />
+ <div class="title">瀹夋嘲鏅烘収鐗╂祦鍥尯-缁胯壊浣庣⒊杩愯惀</div>
+ <div class="time_wrap">
+ <span class="date">{{ date }}</span>
+ <span class="week">{{ week }}</span>
+ <span class="time">{{ time }}</span>
+ </div>
+ </div>
+ <div class="main_content">
+ <div class="left_box">
+ <div class="left_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">
+ <div class="item">
+ <div class="lab">A鐩哥數娴�(A)</div>
+ <div class="val">60</div>
+ </div>
+ <div class="item">
+ <div class="lab">B鐩哥數娴�(A)</div>
+ <div class="val">60</div>
+ </div>
+ <div class="item">
+ <div class="lab">C鐩哥數娴�(A)</div>
+ <div class="val">60</div>
+ </div>
+ <div class="item">
+ <div class="lab">鏈夊姛鍔熺巼(KW)</div>
+ <div class="val">60</div>
+ </div>
+ <div class="item">
+ <div class="lab">鍔熺巼鍥犳暟</div>
+ <div class="val">60</div>
+ </div>
+ <div class="item">
+ <div class="lab">鏈夊姛鐢靛害(掳)</div>
+ <div class="val">60</div>
+ </div>
+ </div>
+ </div>
+ <div class="left_box_two">
+ <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="load_wrap">
+ <div class="loadRef"></div>
+ </div>
+ </div>
+ <div class="left_box_three">
+ <div class="com_header">
+ <div class="title">
+ <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
+ <div>鏈堣兘鑰楀垎鏋�</div>
+ </div>
+ <div class="tabs">
+ <div class="tab active">鐢ㄧ數</div>
+ <div class="separate"></div>
+ <div class="tab">鐢ㄦ按</div>
+ <div class="separate"></div>
+ <div class="tab">鐢ㄦ皵</div>
+ </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">
+ <div class="center_box_one">
+ <div class="list">
+ <div class="item">
+ <div class="header">
+ <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>
+ </div>
+ </div>
+ <div class="static">
+ <span class="lab">鍚屾瘮</span>
+ <img class="icon" src="@/assets/images/ic_up.webp" alt="" />
+ <span class="val">11</span>
+ <span class="lab">鐜瘮</span>
+ <img class="icon" src="@/assets/images/ic_down.webp" alt="" />
+ <span class="val">11</span>
+ </div>
+ </div>
+ <div class="item">
+ <div class="header">
+ <img class="icon" src="@/assets/images/ic_yongshui@2x.png" alt="" />
+ <div class="content">
+ <div class="name">涓婃湀鐢ㄦ按(t)</div>
+ <div class="num">450</div>
+ </div>
+ </div>
+ <div class="static">
+ <span class="lab">鍚屾瘮</span>
+ <img class="icon" src="@/assets/images/ic_up.webp" alt="" />
+ <span class="val">11</span>
+ <span class="lab">鐜瘮</span>
+ <img class="icon" src="@/assets/images/ic_down.webp" alt="" />
+ <span class="val">11</span>
+ </div>
+ </div>
+ <div class="item">
+ <div class="header">
+ <img class="icon" src="@/assets/images/ic_yongqi@2x.png" alt="" />
+ <div class="content">
+ <div class="name">涓婃湀鐢ㄦ皵(t)</div>
+ <div class="num">450</div>
+ </div>
+ </div>
+ <div class="static">
+ <span class="lab">鍚屾瘮</span>
+ <img class="icon" src="@/assets/images/ic_up.webp" alt="" />
+ <span class="val">11</span>
+ <span class="lab">鐜瘮</span>
+ <img class="icon" src="@/assets/images/ic_down.webp" alt="" />
+ <span class="val">11</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="center_box_two">
+ <img class="bg" src="@/assets/images/img_city@2x.png" alt="" />
+ <div class="item item1">
+ <div class="num fs_linear">240<span class="unit">kw路h</span></div>
+ <div class="name">鑱斿悎宸ユ埧</div>
+ <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
+ </div>
+ <div class="item item2">
+ <div class="num fs_linear">240<span class="unit">kw路h</span></div>
+ <div class="name">鑱斿悎宸ユ埧</div>
+ <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
+ </div>
+ <div class="item item3">
+ <div class="num fs_linear">240<span class="unit">kw路h</span></div>
+ <div class="name">鑱斿悎宸ユ埧</div>
+ <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
+ </div>
+ <div class="item item4">
+ <div class="num fs_linear">240<span class="unit">kw路h</span></div>
+ <div class="name">鑱斿悎宸ユ埧</div>
+ <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
+ </div>
+ <div class="item item5">
+ <div class="num fs_linear">240<span class="unit">kw路h</span></div>
+ <div class="name">鑱斿悎宸ユ埧</div>
+ <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
+ </div>
+ <div class="bottom_wrap">
+ <div class="bottom bottom1">
+ <div class="num fs_linear">240</div>
+ <div class="name">鏄ㄦ棩鐢ㄧ數</div>
+ <div class="unit">kw路h</div>
+ <img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
+ </div>
+ <div class="bottom bottom2">
+ <div class="num">240</div>
+ <div class="name">浠婃棩鐢ㄧ數</div>
+ <div class="unit">kw路h</div>
+ <img src="@/assets/images/ic_dianliang@2x.png" class="bg" alt="" />
+ </div>
+ <div class="bottom bottom3">
+ <div class="num fs_linear">240</div>
+ <div class="name">鏈湀鐢ㄧ數</div>
+ <div class="unit">kw路h</div>
+ <img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="right_box">
+ <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>
- <div class="main_content">
- <div class="left_box">
- <div class="left_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">
- <div class="item">
- <div class="lab">A鐩哥數娴�(A)</div>
- <div class="val">60</div>
- </div>
- <div class="item">
- <div class="lab">B鐩哥數娴�(A)</div>
- <div class="val">60</div>
- </div>
- <div class="item">
- <div class="lab">C鐩哥數娴�(A)</div>
- <div class="val">60</div>
- </div>
- <div class="item">
- <div class="lab">鏈夊姛鍔熺巼(KW)</div>
- <div class="val">60</div>
- </div>
- <div class="item">
- <div class="lab">鍔熺巼鍥犳暟</div>
- <div class="val">60</div>
- </div>
- <div class="item">
- <div class="lab">鏈夊姛鐢靛害(掳)</div>
- <div class="val">60</div>
- </div>
- </div>
- </div>
- <div class="left_box_two">
- <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>
- <div class="left_box_three">
- <div class="com_header">
- <div class="title">
- <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
- <div>鏈堣兘鑰楀垎鏋�</div>
- </div>
- <div class="tabs">
- <div class="tab active">鐢ㄧ數</div>
- <div class="separate"></div>
- <div class="tab">鐢ㄦ按</div>
- <div class="separate"></div>
- <div class="tab">鐢ㄦ皵</div>
- </div>
- <img src="@/assets/images/title@2x.png" class="bg" alt="" />
- </div>
- </div>
- </div>
- <div class="center_box">
- <div class="center_box_one">
- <div class="list">
- <div class="item">
- <div class="header">
- <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>
- </div>
- </div>
- <div class="static">
- <span class="lab">鍚屾瘮</span>
- <img class="icon" src="@/assets/images/ic_up.webp" alt="" />
- <span class="val">11</span>
- <span class="lab">鐜瘮</span>
- <img class="icon" src="@/assets/images/ic_down.webp" alt="" />
- <span class="val">11</span>
- </div>
- </div>
- <div class="item">
- <div class="header">
- <img
- class="icon"
- src="@/assets/images/ic_yongshui@2x.png"
- alt=""
- />
- <div class="content">
- <div class="name">涓婃湀鐢ㄦ按(t)</div>
- <div class="num">450</div>
- </div>
- </div>
- <div class="static">
- <span class="lab">鍚屾瘮</span>
- <img class="icon" src="@/assets/images/ic_up.webp" alt="" />
- <span class="val">11</span>
- <span class="lab">鐜瘮</span>
- <img class="icon" src="@/assets/images/ic_down.webp" alt="" />
- <span class="val">11</span>
- </div>
- </div>
- <div class="item">
- <div class="header">
- <img
- class="icon"
- src="@/assets/images/ic_yongqi@2x.png"
- alt=""
- />
- <div class="content">
- <div class="name">涓婃湀鐢ㄦ皵(t)</div>
- <div class="num">450</div>
- </div>
- </div>
- <div class="static">
- <span class="lab">鍚屾瘮</span>
- <img class="icon" src="@/assets/images/ic_up.webp" alt="" />
- <span class="val">11</span>
- <span class="lab">鐜瘮</span>
- <img class="icon" src="@/assets/images/ic_down.webp" alt="" />
- <span class="val">11</span>
- </div>
- </div>
- </div>
- </div>
- <div class="center_box_two">
- <img class="bg" src="@/assets/images/img_city@2x.png" alt="" />
- <div class="item item1">
- <div class="num fs_linear">240<span class="unit">kw路h</span></div>
- <div class="name">鑱斿悎宸ユ埧</div>
- <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
- </div>
- <div class="item item2">
- <div class="num fs_linear">240<span class="unit">kw路h</span></div>
- <div class="name">鑱斿悎宸ユ埧</div>
- <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
- </div>
- <div class="item item3">
- <div class="num fs_linear">240<span class="unit">kw路h</span></div>
- <div class="name">鑱斿悎宸ユ埧</div>
- <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
- </div>
- <div class="item item4">
- <div class="num fs_linear">240<span class="unit">kw路h</span></div>
- <div class="name">鑱斿悎宸ユ埧</div>
- <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
- </div>
- <div class="item item5">
- <div class="num fs_linear">240<span class="unit">kw路h</span></div>
- <div class="name">鑱斿悎宸ユ埧</div>
- <img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
- </div>
- <div class="bottom_wrap">
- <div class="bottom bottom1">
- <div class="num fs_linear">240</div>
- <div class="name">鏄ㄦ棩鐢ㄧ數</div>
- <div class="unit">kw路h</div>
- <img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
- </div>
- <div class="bottom bottom2">
- <div class="num">240</div>
- <div class="name">浠婃棩鐢ㄧ數</div>
- <div class="unit">kw路h</div>
- <img src="@/assets/images/ic_dianliang@2x.png" class="bg" alt="" />
- </div>
- <div class="bottom bottom3">
- <div class="num fs_linear">240</div>
- <div class="name">鏈湀鐢ㄧ數</div>
- <div class="unit">kw路h</div>
- <img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
- </div>
- </div>
- </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>
- </div>
- </div>
+ </v-scale-screen>
</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'
+import VScaleScreen from 'v-scale-screen'
+
const weekMap = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�',]
const date = ref(dayjs().format('YYYY.MM.DD'))
@@ -218,29 +259,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 +591,67 @@
}
}
}
+
.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 +660,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 +684,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 +805,93 @@
}
}
}
+
.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 +899,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 +948,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 +968,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 {
+
+ .time_wrap {
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 +999,12 @@
padding-bottom: 10px;
font-size: 36px;
}
+
.week {
margin-left: 36px;
}
}
+
.main_header_bg {
position: absolute;
left: 0;
@@ -534,9 +1015,10 @@
z-index: -1;
}
}
+
.main_app {
- width: 100%;
- min-height: 100vh;
+ width: 1920px;
+ height: 980px;
color: #ffffff;
position: relative;
.main_bg {
--
Gitblit v1.9.3