From 0ae83a895e80a4b9777a27f613d721a7e5e2ac18 Mon Sep 17 00:00:00 2001
From: ali <ali9696@163.com>
Date: 星期二, 03 九月 2024 10:18:27 +0800
Subject: [PATCH] 整体样式修改
---
energy_management_ui/src/views/index.vue | 774 +----------------------------------------------------------
1 files changed, 16 insertions(+), 758 deletions(-)
diff --git a/energy_management_ui/src/views/index.vue b/energy_management_ui/src/views/index.vue
index d8d3914..dbda76e 100644
--- a/energy_management_ui/src/views/index.vue
+++ b/energy_management_ui/src/views/index.vue
@@ -1,767 +1,25 @@
<template>
- <div class="home-show">
- <!-- <el-card :bordered="false">
- <div class="home-head">
- <div class="home-select-label">鏃ユ湡鍒囨崲</div>
- <div>
- <el-button
- :type="dateType === 'DAY' ? 'primary' : ''"
- @click="dateClickHandle('DAY')"
- >鏃�</el-button
- >
- <el-button
- :type="dateType === 'MONTH' ? 'primary' : ''"
- @click="dateClickHandle('MONTH')"
- class="select-month"
- >鏈�
- </el-button>
- <el-button
- :type="dateType === 'YEAR' ? 'primary' : ''"
- @click="dateClickHandle('YEAR')"
- >骞�</el-button
- >
- </div>
- </div>
- </el-card> -->
- <el-card
- class="body-left-title"
- :bordered="false"
- style="margin-bottom: 12px;"
+ <div class="app-container" style="padding: 0;margin: 10px;">
+ <div
+ class="dashboard-editor-container"
+ style="width: 100%;height: 100%;display: block;margin: 0 auto;"
>
- <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 :bordered="false" class="body-left-title">
- <div slot="header" class="clearfix">
- <span>鑳芥簮瀹炴椂鐩戞祴</span>
- </div>
- <div class="chart-wrapper">
- <span class="chart-left-unit">{{
- `鐢�/鍗曚綅${monitoringUnit}`
- }}</span>
- <BarChart class="line-content" :chartData="chartDataObj" />
- </div>
- <div class="chart-wrapper" style="border-top: 1px solid #999">
- <span class="chart-left-unit">{{
- `姘�/鍗曚綅${monitoringWaterUnit}`
- }}</span>
- <BarChart class="line-content" :chartData="chartDataWaterObj" />
- </div>
- </el-card>
- <!-- <div class="left-line-style">
- <div>鑳芥簮瀹炴椂鐩戞祴</div>
- <el-row type="flex" justify="space-between">
- <el-col class="radio-list">
- <div class="radio-list-content">
- <el-radio-group
- v-model="energyType"
- @change="onPowerTypeChange"
- >
- <el-radio
- :style="radioStyle"
- :label="item.value"
- v-for="item in powerTypeOptions"
- :key="item.value"
- >
- {{ item.label }}
- </el-radio>
- </el-radio-group>
- </div>
- </el-col>
- </el-row>
- </div> -->
- </el-col>
- <el-col class="home-body-right">
- <el-card :bordered="false" class="right-first-card-title">
- <div slot="header" class="clearfix">
- <span>缁煎悎鑳借�楀崰姣斿垎鏋�</span>
- </div>
- <PieChart
- class="first-chat"
- :chartData="firstPieData"
- pieTitle="缁煎悎鑳借�楀崰姣斿垎鏋�"
- />
- </el-card>
- <el-card :bordered="false" class="second-card-title">
- <div slot="header" class="clearfix">
- <span>鑳借�楄澶囧崰姣�</span>
- </div>
- <PieChart
- class="second-chat"
- :chartData="secondPieData"
- pieTitle="鑳借�楄澶囧崰姣�"
- height="280px"
- />
- </el-card>
- </el-col>
- </el-row>
+ <div class="title">娆㈣繋浣跨敤浜戣矾缁煎悎鑳芥簮绠＄悊骞冲彴</div>
+ <!-- <img src="@/assets/image/index3.png" style="width: 55%;" /> -->
+ <img src="@/assets/image/image.png" style="height: 80vh;" />
+ </div>
</div>
</template>
-<script>
-import {
- getEnergyConsumptionRatio,
- getEnergyConsumptionSummation,
- getEnergyStatistic,
- getHomeEnergyMonitoring,
- listEnergyType,
- getHomeEnergyUnitConsumptionRatio,
- getHomeOutdoorTemperature
-} from "@/api/home/home";
-import mixins from "@/layout/mixin/getHeight";
-import PieChart from "./dashboard/PieChart";
-import LineChart from "./dashboard/LineChart";
-import BarChart from "./dashboard/BarChart";
-
-export default {
- components: {
- LineChart,
- BarChart,
- PieChart
- },
- mixins: [mixins],
-
- data() {
- return {
- firstPieData: [],
- secondPieData: [],
- monitoringUnit: "kWh",
- chartDataObj: {},
- monitoringWaterUnit: "m鲁",
- chartDataWaterObj: {},
- energyType: "electric",
- energyTypeName: "鐢�",
- dateType: "DAY",
- powerTypeOptions: [
- {
- label: "鐢�",
- value: "electric",
- energyUnit: "kWh"
- },
- { label: "姘�", value: "Water", energyUnit: "m鲁" },
- { label: "钂告苯", value: "Steam", energyUnit: "鍚�" },
- { label: "澶╃劧姘�", value: "Gas", energyUnit: "Nm鲁" }
- ],
- isClick: true,
- radioStyle: {
- display: "block",
- height: "30px",
- lineHeight: "30px"
- },
- chart1: null,
- chart2: null,
- data: [],
- pieDta: [],
- pieDtatwo: [],
- energyCostSum: 0,
- energyStatistic: [],
- summation: 10776,
- totalCo2Emissions: 0,
- humidity: "",
- temperature: "",
- timer: null,
- timer30: null
- };
- },
- mounted() {
- this.getEnergyType();
- this.getSummationData();
- this.getEnergyConsumptionRatioData();
- this.getEnergyStatisticData();
- this.getHomeEnergyUnitConsumptionRatioData();
-
- const ele = document.createEvent("Event");
- ele.initEvent("resize", true, true);
- window.dispatchEvent(ele);
-
- clearInterval(this.timer);
- clearInterval(this.timer30);
- this.getHomeOutdoorTemperatureData();
- // this.timer = setInterval(() => {
- // this.getHomeOutdoorTemperatureData();
- // }, 12000);
- this.timer30 = setInterval(() => {
- // this.getEnergyType();
- this.getSummationData();
- this.getEnergyConsumptionRatioData();
- this.getEnergyStatisticData();
- this.getHomeEnergyUnitConsumptionRatioData();
- }, 180000);
- },
- beforeDestroy() {
- clearInterval(this.timer);
- clearInterval(this.timer30);
- },
- methods: {
- getHomeOutdoorTemperatureData() {
- getHomeOutdoorTemperature().then(res => {
- this.temperature = res.data.temperature;
- this.humidity = res.data.humidity;
- });
- },
- getEnergyType() {
- listEnergyType()
- .then(res => {
- if (res.code === 200) {
- this.powerTypeOptions =
- res.data.map(item => ({
- ...item,
- value: item.energy,
- label: item.energyName
- })) || [];
- this.energyType =
- this.powerTypeOptions.length > 0
- ? this.powerTypeOptions[0].value
- : "";
- this.energyTypeName =
- this.powerTypeOptions.length > 0
- ? this.powerTypeOptions[0].label
- : "";
- for (let i = 0; i < this.powerTypeOptions.length; i++) {
- this.getEnergyMonitoring(this.powerTypeOptions[i].value);
- }
- }
- })
- .catch(e => {
- console.log("鑾峰彇鑳芥簮绫诲瀷鍒楄〃", e);
- });
- },
- // 纰虫帓閲忔牳绠楁煡璇�
- getCarbonEmission() {
- getHomeCarbonEmission(this.dateType).then(res => {
- this.totalCo2Emissions = res.result.totalCo2Emissions;
- });
- },
- // 鑾峰彇鍏ㄥ巶缁煎悎鑳借��
- getSummationData() {
- getEnergyConsumptionSummation(this.dateType)
- .then(res => {
- if (res.code === 200) {
- this.summation = res.data;
- }
- })
- .catch(e => {
- console.log("鑾峰彇鍏ㄥ巶缁煎悎鑳借��", e);
- });
- },
- // 鑾峰彇缁煎悎鑳借�楀崰姣旂幆褰㈠浘鍒嗘瀽鏁版嵁
- getEnergyConsumptionRatioData() {
- getEnergyConsumptionRatio(this.dateType)
- .then(res => {
- if (res.code === 200) {
- this.firstPieData = res.data.map(item => {
- return {
- ...item,
- name: item.item,
- value: item.count || 0
- // unit: filterUint
- };
- });
- }
- })
- .catch(e => {
- console.log("鑾峰彇缁煎悎鑳借�楀崰姣旂幆褰㈠浘鍒嗘瀽鏁版嵁", e);
- });
- },
-
- // 鑳芥簮璁惧鐜舰鍥炬暟鎹暟鎹�
- getHomeEnergyUnitConsumptionRatioData() {
- getHomeEnergyUnitConsumptionRatio(this.dateType)
- .then(res => {
- if (res.code === 200) {
- this.secondPieData = res.data.map(item => {
- return {
- ...item,
- name: item.name,
- value: item.value || 0
- // unit: filterUint
- };
- });
- }
- })
- .catch(e => {
- console.log("鑳芥簮璁惧鍒嗘瀽鐜舰鍥炬暟鎹暟鎹�", e);
- });
- },
-
- // 鍒嗙被鑳芥簮缁熻鏁版嵁
- getEnergyStatisticData() {
- getEnergyStatistic(this.dateType)
- .then(res => {
- if (res.code === 200) {
- this.energyStatistic = res.data;
- }
- })
- .catch(e => {
- console.log("鍒嗙被鑳芥簮缁熻鏁版嵁", e);
- });
- },
-
- // 鑳芥簮鐩戞祴鏌辩姸鍥炬暟鎹�
- getEnergyMonitoring(energyType) {
- getHomeEnergyMonitoring(this.dateType, energyType)
- .then(res => {
- if (res.code === 200) {
- let chartData = res.data.chartData.sort((a, b) => {
- return a.date - b.date;
- });
- let nameList = Array.from(
- new Set(
- chartData.map(item => {
- return item.name;
- })
- )
- ).sort((a, b) => {
- return new Date(b.date).getTime() - new Date(a.date).getTime();
- });
- // 琛ュ叏鏁版嵁
- let oneArr = chartData.filter(item => {
- return item.name === nameList[0];
- });
- let twoArr = chartData.filter(item => {
- return item.name === nameList[1];
- });
-
- let maxDate =
- this.dateType === "DAY"
- ? 23
- : Math.max(
- ...chartData.map(item => {
- return item.date;
- })
- );
- oneArr.forEach(element => {
- if (this.dateType === "DAY") {
- let hour = new Date("2022 " + element.date).getHours() + "鏃�";
- element.date = hour;
- } else {
- element.date =
- this.dateType === "MONTH"
- ? element.date + "鏃�"
- : element.date + "鏈�";
- }
- });
- twoArr.forEach(element => {
- if (this.dateType === "DAY") {
- let hour = new Date("2022 " + element.date).getHours() + "鏃�";
- element.date = hour;
- } else {
- element.date =
- this.dateType === "MONTH"
- ? element.date + "鏃�"
- : element.date + "鏈�";
- }
- });
- if (oneArr.length < maxDate) {
- if (this.dateType === "DAY") {
- for (let d = oneArr.length; d < maxDate + 1; d++) {
- oneArr.push({
- date: d + "鏃�",
- name: nameList[0],
- count: 0,
- value: null
- });
- }
- } else {
- console.log("one111111111");
- for (let d = oneArr.length + 1; d < maxDate + 1; d++) {
- oneArr.push({
- date: this.dateType === "MONTH" ? d + "鏃�" : d + "鏈�",
- name: nameList[0],
- count: 0,
- value: null
- });
- }
- }
- }
- if (twoArr.length < maxDate) {
- if (this.dateType === "DAY") {
- for (let d = twoArr.length; d < maxDate + 1; d++) {
- twoArr.push({
- date: d + "鏃�",
- name: nameList[1],
- count: 0,
- value: 0
- });
- }
- } else {
- for (let d = twoArr.length + 1; d < maxDate + 1; d++) {
- twoArr.push({
- date: this.dateType === "MONTH" ? d + "鏃�" : d + "鏈�",
- name: nameList[1],
- count: 0,
- value: 0
- });
- }
- }
- }
-
- let chartData2 = oneArr
- .concat(twoArr)
- .map(item => {
- return {
- ...item,
- len: item.date,
- count: item.value === "--" ? null : +item.value
- };
- })
- .sort((a, b) => {
- return new Date(a.name).getTime() - new Date(b.name).getTime();
- });
- this.data = chartData2;
- if (energyType == "water") {
- this.monitoringWaterUnit = res.data.unit;
- this.chartDataWaterObj = {
- expectedData: twoArr.map(one => {
- return one.value;
- }),
- actualData: oneArr.map(e => {
- return e.value;
- }),
- xData: oneArr.map(one => {
- return one.date;
- })
- };
- } else if (energyType == "electric") {
- this.monitoringUnit = res.data.unit;
- this.chartDataObj = {
- expectedData: twoArr.map(one => {
- return one.value;
- }),
- actualData: oneArr.map(e => {
- return e.value;
- }),
- xData: oneArr.map(one => {
- return one.date;
- })
- };
- }
- }
- })
- .catch(e => {
- console.log("鑳芥簮鐩戞祴鏌辩姸鍥炬暟鎹�", e);
- });
- },
-
- dateClickHandle(type) {
- this.dateType = type;
- this.isClick = !this.isClick;
- this.getSummationData();
- this.getEnergyConsumptionRatioData();
- this.getEnergyCostRatioData();
- this.getEnergyStatisticData();
- this.getEnergyMonitoring();
- this.getCarbonEmission();
- },
-
- onPowerTypeChange(e) {
- this.energyType = e;
- for (let i = 0; i < this.powerTypeOptions.length; i++) {
- if (this.energyType === this.powerTypeOptions[i].value) {
- this.energyTypeName = this.powerTypeOptions[i].label;
- this.monitoringUnit = this.powerTypeOptions[i].energyUnit || "";
- }
- }
- this.getEnergyMonitoring();
- }
- }
-};
-</script>
-
<style lang="scss" scoped>
-.home-show {
- overflow: hidden;
- overflow-y: scroll;
- // height: calc(100vh - 88px);
- .home-head {
- display: flex;
- align-items: center;
-
- .home-select-label {
- margin-right: 10px;
- 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;
- }
- }
- }
-
- .chart-wrapper {
- padding: 10px 24px;
- position: relative;
- .chart-left-unit {
- position: absolute;
- top: 16px;
- left: 24px;
- color: #fff;
- font-size: 18px;
- }
-
- .line-content {
- margin: 4px 0 0 0;
- height: 300px;
- }
- }
-
- .data-indicator-overview {
- ::v-deep .el-card__body {
- padding: 0 !important;
- }
-
- .home-body-left {
- width: 66.3%;
- height: 100%;
-
- .body-left-title {
- margin: 0 16px 0px 0;
- }
-
- .left-line-style {
- padding: 24px;
- color: #fff;
-
- .radio-list {
- width: 122px;
-
- .radio-list-content {
- margin: 16px 12px 0 0;
- background: #f3f7f7;
- padding: 21px 9px;
- border-radius: 2px;
- overflow: auto;
- height: 360px;
- }
- }
-
- .right-line {
- width: calc(100% - 122px);
- position: relative;
-
- .chart-left-unit {
- position: absolute;
- top: 16px;
- left: 0;
- color: #fff;
- }
-
- .line-content {
- margin: 12px 0 0 0;
- height: 300px;
- }
- }
- }
-
- .left-bottom-type {
- margin: 16px 16px 16px 0;
-
- .card-list {
- display: flex;
- flex-wrap: wrap;
- height: 100%;
-
- .classify-energy {
- border-left: 1px solid #e9e9e9;
- flex: 1;
- display: flex;
- align-items: center;
- padding: 0 0 0 24px;
-
- &:first-child {
- border-left: none;
- }
-
- .img-list {
- display: flex;
- align-items: center;
- img {
- width: 20px;
- height: 20px;
- }
-
- .text-describe {
- display: flex;
- align-items: center;
- margin-left: 18px;
-
- .number {
- font-size: 24px;
- color: #fff;
- }
- }
- }
- }
- }
- }
- }
-
- .home-body-right {
- width: 33.7%;
- height: 100%;
-
- .right-first-card-title {
- margin: 0 0 16px 0;
-
- .first-chat {
- margin: 10px 0 0 0;
- height: 300px;
- }
- }
-
- .second-card-title {
- // padding-top: 16px;
-
- .second-chat {
- margin: 10px 0 0 0;
- height: 290px;
- }
-
- .bottom-description-list {
- display: flex;
- padding: 0 23px 16px 10px;
- height: 106px;
- align-items: center;
-
- .total {
- border-right: 1px solid #e9e9e9;
- padding-left: 10px;
- min-width: 180px;
- max-width: 180px;
-
- .energy-cost-sum {
- font-size: 24px;
- color: #fff;
- }
- }
-
- .legend {
- padding: 6px 0 0 20px;
-
- .legend-list {
- display: flex;
- // width: 280px;
- flex-wrap: wrap;
- }
- }
- }
- }
- }
- }
-
- .power-cost {
- width: 8px;
- height: 8px;
- border-radius: 50%;
- display: inline-block;
- margin-right: 4px;
+// http://yunlu.com.cn/template/pc/skin/images/index/u21.png
+.dashboard-editor-container {
+ text-align: center;
+ .title {
+ color: #999;
+ font-size: 30px;
+ font-weight: 600;
+ margin: 40px auto 50px;
}
}
</style>
--
Gitblit v1.9.3