From c2e2ce9e6e64d6d88de294afbaa09c3d6c2a2df5 Mon Sep 17 00:00:00 2001
From: 阿伏兔 <1738124622@qq.com>
Date: 星期三, 28 八月 2024 23:02:26 +0800
Subject: [PATCH] 添加尖峰平谷功能
---
energy_management_ui/src/views/index.vue | 260 +++++++++++++++++++++++++--------------------------
1 files changed, 127 insertions(+), 133 deletions(-)
diff --git a/energy_management_ui/src/views/index.vue b/energy_management_ui/src/views/index.vue
index 7e5dbd9..d8d3914 100644
--- a/energy_management_ui/src/views/index.vue
+++ b/energy_management_ui/src/views/index.vue
@@ -23,93 +23,89 @@
</div>
</div>
</el-card> -->
+ <el-card
+ class="body-left-title"
+ :bordered="false"
+ style="margin-bottom: 12px;"
+ >
+ <div slot="header" class="clearfix">
+ <span>褰撴棩鍙屾帶鏁版嵁鎸囨爣鎬昏</span>
+ </div>
+ <el-row class="double-data-show-content">
+ <el-col :span="5" class="total">
+ <img alt="" src="~@/assets/home/zonghe.svg" />
+ <div class="left-title-style">
+ <div>
+ <div>鍏ㄥ巶缁煎悎鑳借��</div>
+ <div class="unit">{{ summation }} tce</div>
+ </div>
+ </div>
+ </el-col>
+ <el-col
+ :span="5"
+ class="co2"
+ v-for="(item, index) in energyStatistic"
+ :key="index"
+ style="border-left: 1px solid #999;"
+ >
+ <img
+ v-if="item.item.includes('鐢�')"
+ src="~@/assets/home/haodian.svg"
+ alt=""
+ />
+ <img
+ v-if="item.item.includes('姘�')"
+ src="~@/assets/home/haoshui.svg"
+ alt=""
+ />
+ <img
+ v-if="item.item.includes('姘�')"
+ src="~@/assets/home/haoqi.svg"
+ alt=""
+ />
+ <img
+ v-if="item.item.includes('钂告苯')"
+ src="~@/assets/home/haozhengqi.svg"
+ alt=""
+ />
+ <div class="left-title-style">
+ <div>
+ <div>
+ 鑰梴{
+ item.item.indexOf("澶╃劧") !== -1
+ ? item.item.replace("澶╃劧", "")
+ : item.item
+ }}閲�
+ {{ item.unit ? `锛�${item.unit}锛塦 : "" }}
+ </div>
+ <div class="unit">
+ {{ item.count || 0 }}
+ </div>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="5" class="total" style="border-left: 1px solid #999;">
+ <img alt="" src="~@/assets/home/wen.png" />
+ <div class="left-title-style">
+ <div>
+ <div>瀹ゅ娓╁害</div>
+ <div class="unit">{{ temperature }}</div>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="5" class="total" style="border-left: 1px solid #999;">
+ <img alt="" src="~@/assets/home/shi.png" />
+ <div class="left-title-style">
+ <div>
+ <div>瀹ゅ婀垮害</div>
+ <div class="unit">{{ humidity }}</div>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ </el-card>
<el-row type="flex" class="data-indicator-overview">
<el-col class="home-body-left">
- <el-card class="body-left-title" :bordered="false">
- <div slot="header" class="clearfix">
- <span>褰撴棩鍙屾帶鏁版嵁鎸囨爣鎬昏</span>
- </div>
- <el-row class="double-data-show-content">
- <el-col :span="4" class="total">
- <img alt="" src="~@/assets/home/zonghe.svg" />
- <div class="left-title-style">
- <div>
- <div>鍏ㄥ巶缁煎悎鑳借��</div>
- <div class="unit">{{ summation }} tce</div>
- </div>
- </div>
- </el-col>
- <el-col
- :span="5"
- class="co2"
- v-for="(item, index) in energyStatistic"
- :key="index"
- style="border-left: 1px solid #e9e9e9;"
- >
- <img
- v-if="item.item.includes('鐢�')"
- src="~@/assets/home/haodian.svg"
- alt=""
- />
- <img
- v-if="item.item.includes('姘�')"
- src="~@/assets/home/haoshui.svg"
- alt=""
- />
- <img
- v-if="item.item.includes('姘�')"
- src="~@/assets/home/haoqi.svg"
- alt=""
- />
- <img
- v-if="item.item.includes('钂告苯')"
- src="~@/assets/home/haozhengqi.svg"
- alt=""
- />
- <div class="left-title-style">
- <div>
- <div>
- 鑰梴{
- item.item.indexOf("澶╃劧") !== -1
- ? item.item.replace("澶╃劧", "")
- : item.item
- }}閲�
- {{ item.unit ? `锛�${item.unit}锛塦 : "" }}
- </div>
- <div class="unit">
- {{ item.count || 0 }}
- </div>
- </div>
- </div>
- </el-col>
- <el-col
- :span="5"
- class="total"
- style="border-left: 1px solid #e9e9e9;"
- >
- <img alt="" src="~@/assets/home/wen.png" />
- <div class="left-title-style">
- <div>
- <div>瀹ゅ娓╁害</div>
- <div class="unit">{{ temperature }}</div>
- </div>
- </div>
- </el-col>
- <el-col
- :span="5"
- class="total"
- style="border-left: 1px solid #e9e9e9;"
- >
- <img alt="" src="~@/assets/home/shi.png" />
- <div class="left-title-style">
- <div>
- <div>瀹ゅ婀垮害</div>
- <div class="unit">{{ humidity }}</div>
- </div>
- </div>
- </el-col>
- </el-row>
- </el-card>
<el-card :bordered="false" class="body-left-title">
<div slot="header" class="clearfix">
<span>鑳芥簮瀹炴椂鐩戞祴</span>
@@ -120,7 +116,7 @@
}}</span>
<BarChart class="line-content" :chartData="chartDataObj" />
</div>
- <div class="chart-wrapper" style="border-top: 1px solid #e9e9e9">
+ <div class="chart-wrapper" style="border-top: 1px solid #999">
<span class="chart-left-unit">{{
`姘�/鍗曚綅${monitoringWaterUnit}`
}}</span>
@@ -169,6 +165,7 @@
class="second-chat"
:chartData="secondPieData"
pieTitle="鑳借�楄澶囧崰姣�"
+ height="280px"
/>
</el-card>
</el-col>
@@ -187,7 +184,6 @@
getHomeOutdoorTemperature
} from "@/api/home/home";
import mixins from "@/layout/mixin/getHeight";
-import moment from "moment";
import PieChart from "./dashboard/PieChart";
import LineChart from "./dashboard/LineChart";
import BarChart from "./dashboard/BarChart";
@@ -256,9 +252,9 @@
clearInterval(this.timer);
clearInterval(this.timer30);
this.getHomeOutdoorTemperatureData();
- this.timer = setInterval(() => {
- this.getHomeOutdoorTemperatureData();
- }, 12000);
+ // this.timer = setInterval(() => {
+ // this.getHomeOutdoorTemperatureData();
+ // }, 12000);
this.timer30 = setInterval(() => {
// this.getEnergyType();
this.getSummationData();
@@ -549,22 +545,53 @@
<style lang="scss" scoped>
.home-show {
- background: #f0f2f5;
overflow: hidden;
overflow-y: scroll;
- height: calc(100vh - 90px);
+ // height: calc(100vh - 88px);
.home-head {
display: flex;
align-items: center;
.home-select-label {
margin-right: 10px;
- color: #000;
+ color: #fff;
font-weight: 600;
}
.select-month {
margin: 0 8px;
+ }
+ }
+ .double-data-show-content {
+ display: flex;
+ align-items: center;
+ // border-bottom: 1px solid #e9e9e9;
+ // padding: 23px 0 24px 40px;
+ .el-col {
+ padding: 23px 0 24px 10px;
+ }
+
+ & > div {
+ display: flex;
+ align-items: center;
+ }
+
+ img {
+ width: 20px;
+ height: 20px;
+ }
+
+ .left-title-style {
+ display: flex;
+ align-items: center;
+ margin-left: 10px;
+ // border-right: 1px solid #e9e9e9;
+
+ .unit {
+ font-size: 22px;
+ color: #fff;
+ margin-top: 4px;
+ }
}
}
@@ -575,7 +602,7 @@
position: absolute;
top: 16px;
left: 24px;
- color: #333;
+ color: #fff;
font-size: 18px;
}
@@ -598,42 +625,9 @@
margin: 0 16px 0px 0;
}
- .double-data-show-content {
- display: flex;
- align-items: center;
- // border-bottom: 1px solid #e9e9e9;
- // padding: 23px 0 24px 40px;
- .el-col {
- padding: 23px 0 24px 10px;
- }
-
- & > div {
- display: flex;
- align-items: center;
- }
-
- img {
- width: 20px;
- height: 20px;
- }
-
- .left-title-style {
- display: flex;
- align-items: center;
- margin-left: 10px;
- // border-right: 1px solid #e9e9e9;
-
- .unit {
- font-size: 22px;
- color: #000000;
- margin-top: 4px;
- }
- }
- }
-
.left-line-style {
padding: 24px;
- color: #000000;
+ color: #fff;
.radio-list {
width: 122px;
@@ -656,7 +650,7 @@
position: absolute;
top: 16px;
left: 0;
- color: #333;
+ color: #fff;
}
.line-content {
@@ -700,7 +694,7 @@
.number {
font-size: 24px;
- color: #000000;
+ color: #fff;
}
}
}
@@ -718,7 +712,7 @@
.first-chat {
margin: 10px 0 0 0;
- height: 340px;
+ height: 300px;
}
}
@@ -727,7 +721,7 @@
.second-chat {
margin: 10px 0 0 0;
- height: 340px;
+ height: 290px;
}
.bottom-description-list {
@@ -744,7 +738,7 @@
.energy-cost-sum {
font-size: 24px;
- color: #000000;
+ color: #fff;
}
}
--
Gitblit v1.9.3