From 5d36e1f987ef21e44ded2e8a1d06c28094ec1e76 Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期六, 19 四月 2025 12:39:47 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
zhitan-vue/src/views/index.vue | 1147 +++++++++++++++++++++++++++++---------------------------
1 files changed, 590 insertions(+), 557 deletions(-)
diff --git a/zhitan-vue/src/views/index.vue b/zhitan-vue/src/views/index.vue
index 2d94da3..cb114db 100644
--- a/zhitan-vue/src/views/index.vue
+++ b/zhitan-vue/src/views/index.vue
@@ -1,133 +1,103 @@
<template>
- <div class="page">
- <CardHeader
- :showBtn="true"
- :active="'0'"
- :period="period"
- @handleClick="handleTimeType"
- >
- <span>
+ <div class="page" style="padding-left: 8px; padding-top: 8px">
+ <CardHeader :showBtn="true" :active="'0'" :period="period" @handleClick="handleTimeType">
+ <span class="card-header-title">
鍏ㄥ巶鑳借�楃粺璁�
- <el-button @click="dialogVisible = true" v-if="list.length > 1">
- 鏌ョ湅鏇村
- </el-button>
+ <el-button @click="dialogVisible = true" v-if="list.length > 1" type="primary" size="small" class="header-more-btn"> 鏌ョ湅鏇村 </el-button>
</span>
</CardHeader>
- <template
- v-for="(row, rowIndex) in list"
- :key="rowIndex"
- v-loading="loading02"
- >
- <div
- class="card-list"
- v-if="settingsStore.sideTheme == 'theme-dark' && rowIndex == 0"
- >
+ <template v-for="(row, rowIndex) in list" :key="rowIndex" v-loading="loading02">
+ <div class="card-list" v-if="settingsStore.sideTheme == 'theme-dark' && rowIndex == 0">
<template v-for="(item, index) in row" :key="index">
- <div
- class="card-list-item"
- :style="{
- backgroundImage: 'url(' + bgList[index].bg + ')',
- }"
- >
- <div class="item-top">
- <div
- class="top-icon"
- :style="{ backgroundImage: 'url(' + bgList[index].icon + ')' }"
+ <div class="card-list-item">
+ <div class="item-left">
+ <div class="top-icon"
+ :style="{
+ backgroundImage: 'url(' + bgList[index].icon + ')',
+ backgroundColor: bgList[index].iconBg,
+ width: '73px',
+ height: '73px',
+ backgroundSize: '40px'
+ }"
/>
+ </div>
+ <div class="item-right">
<div class="top-right">
<div class="right-name">
{{ item.energyName }}
+ <span v-if="item.energyUnit" class="unit">({{ item.energyUnit }})</span>
</div>
<div class="right-value">
- <span> {{ item.count }}</span>
- <span class="unit">{{ item.energyUnit }}</span>
+ <span>{{ item.count }}</span>
</div>
</div>
- </div>
- <div class="item-bottom">
- <div class="bottom-left">
- <span>
- 鍚屾瘮: {{ Math.abs(item.tongbi) }}
- <el-icon
- :color="
- item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''
- "
- >
- <Top v-if="item.tongbi > 0" />
- <Bottom v-if="item.tongbi < 0" />
- </el-icon>
- </span>
- </div>
- <div class="bottom-right">
- <span
- >鐜瘮: {{ Math.abs(item.huanbi) }}
- <el-icon
- :color="
- item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''
- "
- >
- <Top v-if="item.huanbi > 0" />
- <Bottom v-if="item.huanbi < 0" />
- </el-icon>
- </span>
+ <div class="item-bottom">
+ <div class="bottom-left">
+ <span>
+ 鍚屾瘮: {{ Math.abs(item.tongbi).toFixed(1) }}
+ <el-icon :color="item.tongbi > 0 ? '#4CAF50' : item.tongbi < 0 ? '#F44336' : ''">
+ <Top v-if="item.tongbi > 0" />
+ <Bottom v-if="item.tongbi < 0" />
+ </el-icon>
+ </span>
+ </div>
+ <div class="bottom-right">
+ <span>
+ 鐜瘮: {{ Math.abs(item.huanbi).toFixed(1) }}
+ <el-icon :color="item.huanbi > 0 ? '#4CAF50' : item.huanbi < 0 ? '#F44336' : ''">
+ <Top v-if="item.huanbi > 0" />
+ <Bottom v-if="item.huanbi < 0" />
+ </el-icon>
+ </span>
+ </div>
</div>
</div>
</div>
</template>
</div>
- <div
- class="card-list"
- v-if="settingsStore.sideTheme != 'theme-dark' && rowIndex == 0"
- >
- <template
- v-for="(item, index) in row"
- :key="index"
- v-show="rowIndex == 0"
- >
- <div
- class="card-list-item"
- >
- <div class="item-top">
- <div
- class="top-icon"
- :style="{ backgroundImage: 'url(' + bgList[index].icon2 + ')' }"
+ <div class="card-list" v-if="settingsStore.sideTheme != 'theme-dark' && rowIndex == 0">
+ <template v-for="(item, index) in row" :key="index" v-show="rowIndex == 0">
+ <div class="card-list-item">
+ <div class="item-left">
+ <div class="top-icon"
+ :style="{
+ backgroundImage: 'url(' + bgList[index].icon2 + ')',
+ backgroundColor: bgList[index].iconBg,
+ width: '73px',
+ height: '73px',
+ backgroundSize: '40px'
+ }"
/>
+ </div>
+ <div class="item-right">
<div class="top-right">
<div class="right-name">
{{ item.energyName }}
+ <span v-if="item.energyUnit" class="unit">({{ item.energyUnit }})</span>
</div>
<div class="right-value">
<span>{{ item.count }}</span>
- <span class="unit">{{ item.energyUnit }}</span>
</div>
</div>
- </div>
- <div class="item-bottom">
- <div class="bottom-left">
- <span>
- 鍚屾瘮: {{ Math.abs(item.tongbi) }}
- <el-icon
- :color="
- item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''
- "
- >
- <Top v-if="item.tongbi > 0" />
- <Bottom v-if="item.tongbi < 0" />
- </el-icon>
- </span>
- </div>
- <div class="bottom-right">
- <span
- >鐜瘮: {{ Math.abs(item.huanbi) }}
- <el-icon
- :color="
- item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''
- "
- >
- <Top v-if="item.huanbi > 0" />
- <Bottom v-if="item.huanbi < 0" />
- </el-icon>
- </span>
+ <div class="item-bottom">
+ <div class="bottom-left">
+ <span>
+ 鍚屾瘮: {{ Math.abs(item.tongbi).toFixed(1) }}
+ <el-icon :color="item.tongbi > 0 ? '#4CAF50' : item.tongbi < 0 ? '#F44336' : ''">
+ <Top v-if="item.tongbi > 0" />
+ <Bottom v-if="item.tongbi < 0" />
+ </el-icon>
+ </span>
+ </div>
+ <div class="bottom-right">
+ <span>
+ 鐜瘮: {{ Math.abs(item.huanbi).toFixed(1) }}
+ <el-icon :color="item.huanbi > 0 ? '#4CAF50' : item.huanbi < 0 ? '#F44336' : ''">
+ <Top v-if="item.huanbi > 0" />
+ <Bottom v-if="item.huanbi < 0" />
+ </el-icon>
+ </span>
+ </div>
</div>
</div>
</div>
@@ -140,17 +110,13 @@
<el-row :gutter="9" style="margin-bottom: 27px">
<el-col :span="12">
<el-card>
- <CardHeader :period="period" @handleClick="handleTimeType">
- 鑳借�楄秼鍔�
- </CardHeader>
+ <CardHeader :period="period" @handleClick="handleTimeType"> 鑳借�楄秼鍔� </CardHeader>
<div id="Chart1" class="chart" v-loading="loading1" />
</el-card>
</el-col>
<el-col :span="12">
<el-card>
- <CardHeader :period="period" @handleClick="handleTimeType">
- 鍏ㄥ巶鑳借�楀崰姣�
- </CardHeader>
+ <CardHeader :period="period" @handleClick="handleTimeType"> 鍏ㄥ巶鑳借�楀崰姣� </CardHeader>
<div id="Chart2" class="chart" v-loading="loading02" />
</el-card>
</el-col>
@@ -158,13 +124,8 @@
<el-row :gutter="9">
<el-col :span="12">
<el-card>
- <CardHeader
- :showBtn="true"
- :period="period"
- :active="'3'"
- @handleClick="handleTimeType"
- >
- 鍘傚尯鑳借�楁帓鍚峊OP{{ listEnergyConsumptionRankingLength }}
+ <CardHeader :showBtn="true" :period="period" :active="'3'" @handleClick="handleTimeType">
+ 鍘傚尯鑳借�楁帓鍚峊OP{{ listEnergyConsumptionRankingLength || "" }}
</CardHeader>
<div class="top-header">
<div class="header-left">
@@ -173,22 +134,12 @@
</div>
<div class="header-right">鑳借�楅噺(tce)</div>
</div>
- <div
- id="Chart3"
- class="chart"
- v-loading="loading3"
- style="height: 254px"
- />
+ <div id="Chart3" class="chart" v-loading="loading3" style="height: 254px" />
</el-card>
</el-col>
<el-col :span="12">
<el-card>
- <CardHeader
- :showBtn="true"
- :period="period"
- :active="'4'"
- @handleClick="handleTimeType"
- >
+ <CardHeader :showBtn="true" :period="period" :active="'4'" @handleClick="handleTimeType">
灏栧嘲骞宠胺鍗犳瘮
</CardHeader>
<div id="Chart4" class="chart" v-loading="loading4" />
@@ -196,80 +147,71 @@
</el-col>
</el-row>
</div>
- <el-dialog v-model="dialogVisible" title="鏌ョ湅鍏ㄥ巶鑳借�楃粺璁�" width="80%" v-if='dialogVisible'>
+ <el-dialog v-model="dialogVisible" title="鏌ョ湅鍏ㄥ巶鑳借�楃粺璁�" width="90%" v-if="dialogVisible">
<template v-for="(row, rowIndex) in list" :key="rowIndex">
<div class="card-list" v-if="settingsStore.sideTheme == 'theme-dark'">
<template v-for="(item, index) in row" :key="index">
- <div
- class="card-list-item"
- :style="{
- backgroundImage: 'url(' + bgList[index].bg + ')',
- }"
- >
- <div class="item-top">
- <div
- class="top-icon"
+ <div class="card-list-item">
+ <div class="item-left">
+ <div class="top-icon"
:style="{
backgroundImage: 'url(' + bgList[index].icon + ')',
+ backgroundColor: bgList[index].iconBg,
+ width: '73px',
+ height: '73px',
+ backgroundSize: '40px'
}"
/>
+ </div>
+ <div class="item-right">
<div class="top-right">
<div class="right-name">
{{ item.energyName }}
+ <span v-if="item.energyUnit" class="unit">({{ item.energyUnit }})</span>
</div>
<div class="right-value">
<span> {{ item.count }}</span>
- <span class="unit">{{ item.energyUnit }}</span>
</div>
</div>
- </div>
- <div class="item-bottom">
- <div class="bottom-left">
- <span>
- 鍚屾瘮: {{ Math.abs(item.tongbi) }}
- <el-icon
- :color="
- item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''
- "
- >
- <Top v-if="item.tongbi > 0" />
- <Bottom v-if="item.tongbi < 0" />
- </el-icon>
- </span>
- </div>
- <div class="bottom-right">
- <span
- >鐜瘮: {{ Math.abs(item.huanbi) }}
- <el-icon
- :color="
- item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''
- "
- >
- <Top v-if="item.huanbi > 0" />
- <Bottom v-if="item.huanbi < 0" />
- </el-icon>
- </span>
+ <div class="item-bottom">
+ <div class="bottom-left">
+ <span>
+ 鍚屾瘮: {{ Math.abs(item.tongbi).toFixed(1) }}
+ <el-icon :color="item.tongbi > 0 ? '#4CAF50' : item.tongbi < 0 ? '#F44336' : ''">
+ <Top v-if="item.tongbi > 0" />
+ <Bottom v-if="item.tongbi < 0" />
+ </el-icon>
+ </span>
+ </div>
+ <div class="bottom-right">
+ <span>
+ 鐜瘮: {{ Math.abs(item.huanbi).toFixed(1) }}
+ <el-icon :color="item.huanbi > 0 ? '#4CAF50' : item.huanbi < 0 ? '#F44336' : ''">
+ <Top v-if="item.huanbi > 0" />
+ <Bottom v-if="item.huanbi < 0" />
+ </el-icon>
+ </span>
+ </div>
</div>
</div>
</div>
</template>
</div>
<div class="card-list" v-if="settingsStore.sideTheme != 'theme-dark'">
- <template
- v-for="(item, index) in row"
- :key="index"
- v-show="rowIndex == 0"
- >
- <div
- class="card-list-item"
- >
- <div class="item-top">
- <div
- class="top-icon"
+ <template v-for="(item, index) in row" :key="index">
+ <div class="card-list-item">
+ <div class="item-left">
+ <div class="top-icon"
:style="{
backgroundImage: 'url(' + bgList[index].icon2 + ')',
+ backgroundColor: bgList[index].iconBg,
+ width: '73px',
+ height: '73px',
+ backgroundSize: '40px'
}"
/>
+ </div>
+ <div class="item-right">
<div class="top-right">
<div class="right-name">
{{ item.energyName }}
@@ -279,37 +221,28 @@
<span class="unit">{{ item.energyUnit }}</span>
</div>
</div>
- </div>
- <div class="item-bottom">
- <div class="bottom-left">
- <span>
- 鍚屾瘮: {{ Math.abs(item.tongbi) }}
- <el-icon
- :color="
- item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''
- "
- >
- <Top v-if="item.tongbi > 0" />
- <Bottom v-if="item.tongbi < 0" />
- </el-icon>
- </span>
- </div>
- <div class="bottom-right">
- <span
- >鐜瘮: {{ Math.abs(item.huanbi) }}
- <el-icon
- :color="
- item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''
- "
- >
- <Top v-if="item.huanbi > 0" />
- <Bottom v-if="item.huanbi < 0" />
- </el-icon>
- </span>
+ <div class="item-bottom">
+ <div class="bottom-left">
+ <span>
+ 鍚屾瘮: {{ Math.abs(item.tongbi).toFixed(1) }}
+ <el-icon :color="item.tongbi > 0 ? '#4CAF50' : item.tongbi < 0 ? '#F44336' : ''">
+ <Top v-if="item.tongbi > 0" />
+ <Bottom v-if="item.tongbi < 0" />
+ </el-icon>
+ </span>
+ </div>
+ <div class="bottom-right">
+ <span>
+ 鐜瘮: {{ Math.abs(item.huanbi).toFixed(1) }}
+ <el-icon :color="item.huanbi > 0 ? '#4CAF50' : item.huanbi < 0 ? '#F44336' : ''">
+ <Top v-if="item.huanbi > 0" />
+ <Bottom v-if="item.huanbi < 0" />
+ </el-icon>
+ </span>
+ </div>
</div>
</div>
</div>
- <div class="line"></div>
</template>
</div>
</template>
@@ -317,77 +250,82 @@
</div>
</template>
<script setup name="Index">
-import * as echarts from "echarts";
-import CardHeader from "@/components/CardHeader/CardHeader.vue";
+import * as echarts from "echarts"
+import CardHeader from "@/components/CardHeader/CardHeader.vue"
import {
listEnergyConsumptionSummation,
listEnergyConsumptionTrend,
listEnergyConsumptionRanking,
listPeakValley,
-} from "@/api/home";
-const { proxy } = getCurrentInstance();
-const { period } = proxy.useDict("period");
-import useSettingsStore from "@/store/modules/settings";
-const settingsStore = useSettingsStore();
+} from "@/api/home"
+const { proxy } = getCurrentInstance()
+const { period } = proxy.useDict("period")
+import useSettingsStore from "@/store/modules/settings"
+const settingsStore = useSettingsStore()
watch(
() => settingsStore.sideTheme,
(val) => {
- getListEnergyConsumptionSummation();
- getListEnergyConsumptionTrend();
- getListEnergyConsumptionRanking();
- getListPeakValley();
+ getListEnergyConsumptionSummation()
+ getListEnergyConsumptionTrend()
+ getListEnergyConsumptionRanking()
+ getListPeakValley()
}
-);
-import index_card_1 from "@/assets/images/home/index-card-1.png";
-import index_card_2 from "@/assets/images/home/index-card-2.png";
-import index_card_3 from "@/assets/images/home/index-card-3.png";
-import index_card_4 from "@/assets/images/home/index-card-4.png";
-import index_card_5 from "@/assets/images/home/index-card-5.png";
-import card_icon_1 from "@/assets/images/home/card-icon-1.png";
-import card_icon_2 from "@/assets/images/home/card-icon-2.png";
-import card_icon_3 from "@/assets/images/home/card-icon-3.png";
-import card_icon_4 from "@/assets/images/home/card-icon-4.png";
-import card_icon_5 from "@/assets/images/home/card-icon-5.png";
-import card_icon2_1 from "@/assets/images/home/card-icon2-1.png";
-import card_icon2_2 from "@/assets/images/home/card-icon2-2.png";
-import card_icon2_3 from "@/assets/images/home/card-icon2-3.png";
-import card_icon2_4 from "@/assets/images/home/card-icon2-4.png";
-import card_icon2_5 from "@/assets/images/home/card-icon2-5.png";
-import { fa } from "element-plus/es/locales.mjs";
+)
+import index_card_1 from "@/assets/images/home/index-card-1.png"
+import index_card_2 from "@/assets/images/home/index-card-2.png"
+import index_card_3 from "@/assets/images/home/index-card-3.png"
+import index_card_4 from "@/assets/images/home/index-card-4.png"
+import index_card_5 from "@/assets/images/home/index-card-5.png"
+import card_icon_1 from "@/assets/images/2.png"
+import card_icon_2 from "@/assets/images/3.png"
+import card_icon_3 from "@/assets/images/5.png"
+import card_icon_4 from "@/assets/images/6.png"
+import card_icon_5 from "@/assets/images/7.png"
+import card_icon2_1 from "@/assets/images/2.png"
+import card_icon2_2 from "@/assets/images/3.png"
+import card_icon2_3 from "@/assets/images/5.png"
+import card_icon2_4 from "@/assets/images/6.png"
+import card_icon2_5 from "@/assets/images/7.png"
+import { fa } from "element-plus/es/locales.mjs"
const bgList = ref([
{
bg: index_card_1,
icon: card_icon_1,
icon2: card_icon2_1,
+ iconBg: "#3F7EE8"
},
{
bg: index_card_2,
icon: card_icon_2,
icon2: card_icon2_2,
+ iconBg: "#FFA024"
},
{
bg: index_card_3,
icon: card_icon_3,
icon2: card_icon2_3,
+ iconBg: "#FFCC00"
},
{
bg: index_card_4,
icon: card_icon_4,
icon2: card_icon2_4,
+ iconBg: "#3CC8D9"
},
{
bg: index_card_5,
icon: card_icon_5,
icon2: card_icon2_5,
+ iconBg: "#8833FF"
},
-]);
-const list = ref([[{}, {}, {}, {}, {}]]);
-const listEnergyConsumptionRankingLength = ref(0);
-const dialogVisible = ref(false);
-const loading02 = ref(false);
-const loading1 = ref(false);
-const loading3 = ref(false);
-const loading4 = ref(false);
+])
+const list = ref([[{}, {}, {}, {}, {}]])
+const listEnergyConsumptionRankingLength = ref(0)
+const dialogVisible = ref(false)
+const loading02 = ref(false)
+const loading1 = ref(false)
+const loading3 = ref(false)
+const loading4 = ref(false)
const data = reactive({
queryParams: {
nodeId: null,
@@ -395,54 +333,54 @@
dataTime: null,
nodeName: null,
},
-});
-const { queryParams } = toRefs(data);
+})
+const { queryParams } = toRefs(data)
function handleTimeType(item, type) {
- queryParams.value.timeType = item;
- queryParams.value.type = type;
- queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD");
+ queryParams.value.timeType = item
+ queryParams.value.type = type
+ queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
if (type == 0) {
- getListEnergyConsumptionSummation();
- getListEnergyConsumptionTrend();
+ getListEnergyConsumptionSummation()
+ getListEnergyConsumptionTrend()
} else if (type == 3) {
- getListEnergyConsumptionRanking();
+ getListEnergyConsumptionRanking()
} else if (type == 4) {
- getListPeakValley();
+ getListPeakValley()
}
}
-let myChart1 = null;
-let myChart2 = null;
-let myChart3 = null;
-let myChart4 = null;
+let myChart1 = null
+let myChart2 = null
+let myChart3 = null
+let myChart4 = null
onMounted(() => {
- myChart1 = echarts.init(document.getElementById("Chart1"));
- myChart2 = echarts.init(document.getElementById("Chart2"));
- myChart3 = echarts.init(document.getElementById("Chart3"));
- myChart4 = echarts.init(document.getElementById("Chart4"));
-});
+ myChart1 = echarts.init(document.getElementById("Chart1"))
+ myChart2 = echarts.init(document.getElementById("Chart2"))
+ myChart3 = echarts.init(document.getElementById("Chart3"))
+ myChart4 = echarts.init(document.getElementById("Chart4"))
+})
// 棣栭〉-鍏ㄥ巶鑳借�楃粺璁�/鍏ㄥ巶鑳借�楀崰姣�-鍒楄〃
function getListEnergyConsumptionSummation() {
- loading02.value = true;
- list.value = [];
+ loading02.value = true
+ list.value = []
listEnergyConsumptionSummation(
proxy.addDateRange({
...queryParams.value,
})
).then((res) => {
- loading02.value = false;
+ loading02.value = false
if (!!res.code && res.code == 200) {
- let total = 0;
- let seriesData = [];
+ let total = 0
+ let seriesData = []
if (!!res.data && res.data.length > 0) {
res.data.map((item, index) => {
- total += Number(item.tonCount);
- item.name = item.energyName;
- item.value = Number(item.tonCount).toFixed(2);
+ total += Number(item.tonCount)
+ item.name = item.energyName
+ item.value = Number(item.tonCount).toFixed(2)
if (index % 5 === 0) {
- list.value.push(res.data.slice(index, index + 5));
+ list.value.push(res.data.slice(index, index + 5))
}
- });
- seriesData = res.data;
+ })
+ seriesData = res.data
}
setTimeout(() => {
myChart2.setOption({
@@ -465,46 +403,36 @@
right: "5%",
itemWidth: 14,
itemHeight: 14,
- itemGap: 60,
+ itemGap: 16,
textStyle: {
align: "left",
verticalAlign: "middle",
rich: {
name: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
fontSize: 14,
},
value: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
fontSize: 14,
},
rate: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
fontSize: 14,
},
},
},
data: seriesData,
formatter: (name) => {
- let target, percent, energyUnit;
+ let target, percent, energyUnit
for (let i = 0; i < seriesData.length; i++) {
if (seriesData[i].name === name) {
- target = seriesData[i].value;
- energyUnit = seriesData[i].energyUnit;
- percent =
- total != 0 ? ((target / total) * 100).toFixed(2) : 0;
+ target = seriesData[i].value
+ energyUnit = seriesData[i].energyUnit
+ percent = total != 0 ? ((target / total) * 100).toFixed(2) : 0
}
}
- return `{name|${name}(${energyUnit}) }{value| ${target}} {rate| ${percent}%}`;
+ return `{name|${name}(${energyUnit}) }{value| ${target}} {rate| ${percent}%}`
},
},
series: [
@@ -516,8 +444,7 @@
label: {
show: false,
fontSize: 11,
- color:
- settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
},
labelLine: {
show: false,
@@ -526,44 +453,40 @@
data: seriesData,
},
],
- });
- }, 100);
+ })
+ }, 100)
window.addEventListener(
"resize",
() => {
- myChart2.resize();
+ myChart2.resize()
},
{ passive: true }
- );
+ )
}
- });
+ })
}
// 棣栭〉-鍏ㄥ巶鑳借�楄秼鍔�-鍒楄〃
function getListEnergyConsumptionTrend() {
- loading1.value = true;
+ loading1.value = true
listEnergyConsumptionTrend(
proxy.addDateRange({
...queryParams.value,
})
).then((res) => {
- loading1.value = false;
+ loading1.value = false
if (!!res.code && res.code == 200) {
- let xdata = [];
- let series = [];
+ let xdata = []
+ let series = []
if (!!res.data.xdata) {
res.data.xdata.map((item) => {
xdata.push(
proxy
.dayjs(item)
.format(
- queryParams.value.timeType == "YEAR"
- ? "MM鏈�"
- : queryParams.value.timeType == "MONTH"
- ? "DD鏃�"
- : "HH鏃�"
+ queryParams.value.timeType == "YEAR" ? "MM鏈�" : queryParams.value.timeType == "MONTH" ? "DD鏃�" : "HH鏃�"
)
- );
- });
+ )
+ })
}
if (!!res.data.legend && !!res.data.ydata) {
series = res.data.legend.map((item, index) => {
@@ -573,8 +496,8 @@
stack: "total",
barWidth: "16",
data: !!res.data.ydata ? res.data.ydata[index] : [],
- };
- });
+ }
+ })
}
setTimeout(() => {
myChart1.setOption({
@@ -590,13 +513,12 @@
itemWidth: 14,
itemHeight: 10,
textStyle: {
- color:
- settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
},
},
grid: {
top: "45",
- left: "7%",
+ left: "2%",
right: "5%",
bottom: "10",
containLabel: true,
@@ -609,10 +531,7 @@
axisLine: {
show: true,
lineStyle: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
},
},
axisTick: {
@@ -625,8 +544,7 @@
show: false,
},
axisLabel: {
- color:
- settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
fontSize: 14,
padding: [5, 0, 0, 0],
// formatter: '{value} ml'
@@ -638,10 +556,7 @@
type: "value",
name: "tce",
nameTextStyle: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
fontSize: 14,
padding: [0, 0, 5, 0],
},
@@ -652,10 +567,7 @@
show: true,
lineStyle: {
type: "dashed",
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
},
},
axisTick: {
@@ -665,52 +577,47 @@
show: false,
},
axisLabel: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
fontSize: 14,
},
},
],
series,
- });
- }, 100);
+ })
+ }, 100)
}
- });
+ })
window.addEventListener(
"resize",
() => {
- myChart1.resize();
+ myChart1.resize()
},
{ passive: true }
- );
+ )
}
// 棣栭〉-绉戝鑳借�楁帓鍚峊OP-鍒楄〃
function getListEnergyConsumptionRanking() {
- loading3.value = true;
+ loading3.value = true
let opt = {
index: 0,
- };
+ }
listEnergyConsumptionRanking(
proxy.addDateRange({
...queryParams.value,
})
).then((res) => {
- loading3.value = false;
- let nodeName = [];
- let energyConsumption = [];
- let maxenergyConsumption = [];
-
+ loading3.value = false
+ let nodeName = []
+ let energyConsumption = []
+ let maxenergyConsumption = []
+
if (!!res.data) {
res.data.map((item, index) => {
- nodeName.push(item.nodeName);
- energyConsumption.push(
- !!item.energyConsumption ? item.energyConsumption : 0
- );
- maxenergyConsumption[index] = res.data[0].energyConsumption;
- });
- listEnergyConsumptionRankingLength.value = res.data.length;
+ nodeName.push(item.nodeName)
+ energyConsumption.push(!!item.energyConsumption ? item.energyConsumption : 0)
+ maxenergyConsumption[index] = res.data[0].energyConsumption
+ })
+ listEnergyConsumptionRankingLength.value = res.data.length
}
setTimeout(() => {
myChart3.setOption({
@@ -727,7 +634,7 @@
type: "none",
},
formatter: function (params) {
- return params[0].name + " : " + params[0].value;
+ return params[0].name + " : " + params[0].value
},
},
xAxis: {
@@ -749,38 +656,17 @@
},
axisLabel: {
interval: 0,
- color:
- settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
fontSize: 14,
formatter: function (value, index) {
if (index == 0) {
- return (
- "{idx0|" +
- (1 + index + opt.index) +
- "}{title|" +
- value +
- "}"
- );
+ return "{idx0|" + (1 + index + opt.index) + "}{title|" + value + "}"
} else if (index == 1) {
- return (
- "{idx1|" +
- (1 + index + opt.index) +
- "}{title|" +
- value +
- "}"
- );
+ return "{idx1|" + (1 + index + opt.index) + "}{title|" + value + "}"
} else if (index == 2) {
- return (
- "{idx2|" +
- (1 + index + opt.index) +
- "}{title|" +
- value +
- "}"
- );
+ return "{idx2|" + (1 + index + opt.index) + "}{title|" + value + "}"
} else {
- return (
- "{idx|" + (1 + index + opt.index) + "}{title|" + value + "}"
- );
+ return "{idx|" + (1 + index + opt.index) + "}{title|" + value + "}"
}
},
rich: {
@@ -822,8 +708,7 @@
axisLine: "none",
show: true,
axisLabel: {
- color:
- settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
fontSize: "12",
},
data: energyConsumption,
@@ -863,48 +748,41 @@
data: energyConsumption,
},
],
- });
- }, 100);
+ })
+ }, 100)
window.addEventListener(
"resize",
() => {
- myChart3.resize();
+ myChart3.resize()
},
{ passive: true }
- );
- });
+ )
+ })
}
// 棣栭〉-灏栧嘲骞宠胺鍗犳瘮-鍒楄〃
function getListPeakValley() {
- loading4.value = true;
+ loading4.value = true
listPeakValley(
proxy.addDateRange({
...queryParams.value,
})
).then((res) => {
- loading4.value = false;
+ loading4.value = false
if (!!res.code && res.code == 200) {
- let total = 0;
- let seriesData = [];
+ let total = 0
+ let seriesData = []
if (!!res.data && res.data.length > 0) {
res.data.map((item, index) => {
- total += Number(item.count);
+ total += Number(item.count)
seriesData.push({
name: item.timeName,
value: Number(item.count).toFixed(2),
- });
- });
+ })
+ })
}
setTimeout(() => {
myChart4.setOption({
- color: [
- "#8B33FF",
- "#00DBFF",
- "#002ADB",
- "#5C92F7",
- "#76D2F1",
- "#8FADF9",
- ],
+ color: ["#8B33FF", "#00DBFF", "#002ADB", "#5C92F7", "#76D2F1", "#8FADF9"],
grid: {
top: "20%",
left: "15%",
@@ -923,45 +801,35 @@
right: "10%",
itemWidth: 14,
itemHeight: 14,
- itemGap: 50,
+ itemGap: 16,
textStyle: {
align: "left",
verticalAlign: "middle",
rich: {
name: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
fontSize: 14,
},
value: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
fontSize: 14,
},
rate: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
fontSize: 14,
},
},
},
data: seriesData,
formatter: (name) => {
- let target, percent;
+ let target, percent
for (let i = 0; i < seriesData.length; i++) {
if (seriesData[i].name === name) {
- target = seriesData[i].value;
- percent =
- total != 0 ? ((target / total) * 100).toFixed(2) : 0;
+ target = seriesData[i].value
+ percent = total != 0 ? ((target / total) * 100).toFixed(2) : 0
}
}
- return `{name|${name}(kWh) }{value| ${target}} {rate| ${percent}%}`;
+ return `{name|${name}(kWh) }{value| ${target}} {rate| ${percent}%}`
},
},
series: [
@@ -973,8 +841,7 @@
avoidLabelOverlap: false,
label: {
fontSize: 11,
- color:
- settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
},
labelLine: {
show: true,
@@ -999,24 +866,38 @@
data: seriesData,
},
],
- });
- }, 100);
+ })
+ }, 100)
window.addEventListener(
"resize",
() => {
- myChart4.resize();
+ myChart4.resize()
},
{ passive: true }
- );
+ )
}
- });
+ })
}
</script>
<style scoped lang="scss">
+.card-header-title {
+ font-size: 18px;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+
+ .header-more-btn {
+ margin-left: 12px;
+ padding: 4px 10px;
+ font-size: 12px;
+ height: 28px;
+ }
+}
+
.themeDark {
.page {
padding: 20px;
- background: #120f2e;
+ background: #05234A;
.card-title {
width: 132px;
@@ -1029,65 +910,145 @@
.card-list {
margin-top: 14px;
display: flex;
- // justify-content: space-between;
width: 100%;
- flex-wrap: wrap;
-
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ gap: 15px;
+
+ &:after {
+ content: "";
+ flex: 0 0 0;
+ }
+
.card-list-item {
- width: 19%;
- margin-right: 1%;
- height: 157px;
- background-size: 100% 100%;
+ width: 0;
+ flex: 1 1 320px;
+ max-width: 320px;
+ height: 135px;
+ background: rgba(242, 246, 250, 0.1);
box-sizing: border-box;
- padding: 25px 18px 12px 16px;
+ padding: 16px;
color: #fff;
-
- .item-top {
- display: flex;
-
+ border-radius: 9px;
+ box-shadow: none;
+ border: none;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ &:hover {
+ background: rgba(242, 246, 250, 0.15);
+ }
+
+ .item-left {
+ margin-right: 20px;
+
.top-icon {
- width: 69px;
- height: 69px;
- background-size: 100% 100%;
+ width: 73px;
+ height: 73px;
+ background-size: 40px;
+ background-repeat: no-repeat;
+ background-position: center;
+ border-radius: 50%;
}
-
+ }
+
+ .item-right {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+
.top-right {
- margin-left: 16px;
-
+ display: flex;
+ flex-direction: column;
+
.right-name {
- font-weight: bold;
- font-size: 16px;
- font-family: OPPOSans-Bold;
- }
-
- .right-value {
- font-weight: 800;
- font-size: 25px;
- margin-top: 10px;
- font-family: OPPOSans-Medium;
-
+ font-weight: 400;
+ font-size: 14px;
+ font-family: OPPOSans-Regular;
+ color: rgba(255, 255, 255, 0.65);
+ letter-spacing: 0.5px;
+ margin-bottom: 4px;
+
.unit {
- margin-left: 5px;
- font-size: 16px;
+ color: rgba(255, 255, 255, 0.65);
+ margin-left: 4px;
+ font-size: 12px;
font-weight: normal;
}
}
+
+ .right-value {
+ font-weight: 500;
+ font-size: 26px;
+ margin-top: 6px;
+ font-family: OPPOSans-Medium;
+ color: #fff;
+ line-height: 1.2;
+ letter-spacing: 0.5px;
+ }
}
- }
-
- .item-bottom {
- display: flex;
- justify-content: space-between;
- margin-top: 18px;
- font-family: OPPOSans, OPPOSans;
- font-weight: bold;
- font-size: 14px;
+
+ .item-bottom {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 18px;
+ font-family: OPPOSans, OPPOSans;
+ font-weight: normal;
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.5);
+ line-height: 1.2;
+
+ .bottom-left, .bottom-right {
+ display: flex;
+ align-items: center;
+ letter-spacing: 0.3px;
+
+ :deep(.el-icon) {
+ margin-left: 6px;
+ font-size: 12px;
+ }
+ }
+ }
}
}
}
.page-main {
- margin-top: 23px;
+ margin-top: 20px;
+
+ .el-card {
+ background-color: #0E2E5E;
+ border: none;
+ border-radius: 6px;
+
+ :deep(.el-card__body) {
+ padding: 12px;
+ }
+ }
+ }
+
+ .top-header {
+ margin-top: 12px;
+ height: 32px;
+ font-family: OPPOSans, OPPOSans;
+ font-weight: 500;
+ font-size: 14px;
+ color: rgba(255, 255, 255, 0.8);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 10px;
+
+ .header-left {
+ display: flex;
+
+ .name {
+ margin-left: 7px;
+ margin-right: 7px;
+ }
+ }
}
}
@@ -1097,114 +1058,183 @@
margin-top: 10px;
}
- .top-header {
- margin-top: 15px;
- height: 23px;
- font-family: OPPOSans, OPPOSans;
- font-weight: 500;
- font-size: 14px;
- color: rgba(196, 213, 255, 0.6);
- border-bottom: 1px solid rgba(196, 213, 255, 0.6);
- display: flex;
- justify-content: space-between;
-
- .header-left {
- display: flex;
-
- .name {
- margin-left: 7px;
- margin-right: 7px;
- }
+ :deep(.el-button--primary) {
+ background-color: #1976D2;
+ border-color: #1976D2;
+ }
+
+ :deep(.el-card__header) {
+ padding: 10px 15px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ :deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
+ border-color: rgba(255, 255, 255, 0.1);
+ background-color: transparent;
+ color: #fff;
+
+ &.is-active {
+ background-color: #1976D2;
+ border-color: #1976D2;
}
+ }
+
+ :deep(.el-tabs--card > .el-tabs__header) {
+ border-color: rgba(255, 255, 255, 0.1);
}
}
.themeLight {
.page {
padding: 20px;
- background: #f7f8fa;
+ background: #fff;
.card-title {
width: 132px;
height: 29px;
font-weight: bold;
font-size: 22px;
- color: #ffffff;
+ color: #333;
}
.card-list {
- width: 100%;
margin-top: 14px;
display: flex;
- // justify-content: space-between;
- align-items: center;
- background-image: url("@/assets/images/home/index-card-bg2.png");
- background-size: 100% 100%;
- flex-wrap: wrap;
- border-radius: 20px;
-
+ width: 100%;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ gap: 15px;
+
+ &:after {
+ content: "";
+ flex: 0 0 0;
+ }
+
.card-list-item {
- width: 19%;
- margin-right: 0.5%;
- height: 157px;
- background-size: 100% 100%;
+ width: 0;
+ flex: 1 1 320px;
+ max-width: 320px;
+ height: 135px;
+ background: #fff;
box-sizing: border-box;
- padding: 25px 18px 12px 16px;
- color: #fff;
-
- .item-top {
- display: flex;
-
+ padding: 16px;
+ color: #333;
+ border-radius: 9px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .item-left {
+ margin-right: 20px;
+
.top-icon {
- width: 69px;
- height: 69px;
- background-size: 100% 100%;
+ width: 73px;
+ height: 73px;
+ background-size: 40px;
+ background-repeat: no-repeat;
+ background-position: center;
+ border-radius: 50%;
}
-
+ }
+
+ .item-right {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+
.top-right {
- margin-left: 16px;
-
+ display: flex;
+ flex-direction: column;
+
.right-name {
- font-weight: bold;
- font-size: 16px;
- font-family: OPPOSans-Bold;
- }
-
- .right-value {
- font-weight: 800;
- font-size: 30px;
- margin-top: 10px;
- font-family: OPPOSans-Medium;
-
+ font-weight: 400;
+ font-size: 14px;
+ font-family: OPPOSans-Regular;
+ color: rgba(0, 0, 0, 0.65);
+ letter-spacing: 0.5px;
+ margin-bottom: 4px;
+
.unit {
- margin-left: 5px;
- font-size: 16px;
+ color: rgba(0, 0, 0, 0.65);
+ margin-left: 4px;
+ font-size: 12px;
font-weight: normal;
+ }
+ }
+
+ .right-value {
+ font-weight: 500;
+ font-size: 26px;
+ margin-top: 6px;
+ font-family: OPPOSans-Medium;
+ color: #333;
+ line-height: 1.2;
+ letter-spacing: 0.5px;
+ }
+ }
+
+ .item-bottom {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 18px;
+ font-family: OPPOSans, OPPOSans;
+ font-weight: normal;
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.5);
+ line-height: 1.2;
+
+ .bottom-left, .bottom-right {
+ display: flex;
+ align-items: center;
+ letter-spacing: 0.3px;
+
+ :deep(.el-icon) {
+ margin-left: 6px;
+ font-size: 12px;
}
}
}
}
-
- .item-bottom {
- display: flex;
- justify-content: space-between;
- margin-top: 18px;
- font-family: OPPOSans, OPPOSans;
- font-weight: bold;
- font-size: 14px;
- }
- }
-
- .line {
- width: 1px;
- height: 64px;
- background-image: url("@/assets/images/home/line@2x.png");
- background-size: 100% 100%;
}
}
.page-main {
- margin-top: 23px;
+ margin-top: 20px;
+
+ .el-card {
+ background-color: #fff;
+ border: none;
+ border-radius: 6px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+
+ :deep(.el-card__body) {
+ padding: 12px;
+ }
+ }
+ }
+
+ .top-header {
+ margin-top: 12px;
+ height: 32px;
+ font-family: OPPOSans, OPPOSans;
+ font-weight: 500;
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.6);
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 10px;
+
+ .header-left {
+ display: flex;
+
+ .name {
+ margin-left: 7px;
+ margin-right: 7px;
+ }
+ }
}
}
@@ -1214,25 +1244,28 @@
margin-top: 10px;
}
- .top-header {
- margin-top: 15px;
- height: 23px;
- font-family: OPPOSans, OPPOSans;
- font-weight: 500;
- font-size: 14px;
- color: rgba(29, 29, 29, 0.6);
- border-bottom: 1px solid rgba(196, 213, 255, 0.6);
- display: flex;
- justify-content: space-between;
-
- .header-left {
- display: flex;
-
- .name {
- margin-left: 7px;
- margin-right: 7px;
- }
+ :deep(.el-button--primary) {
+ background-color: #1976D2;
+ border-color: #1976D2;
+ }
+
+ :deep(.el-card__header) {
+ padding: 10px 15px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ }
+
+ :deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
+ border-color: rgba(0, 0, 0, 0.1);
+
+ &.is-active {
+ background-color: #1976D2;
+ border-color: #1976D2;
+ color: #fff;
}
}
+
+ :deep(.el-tabs--card > .el-tabs__header) {
+ border-color: rgba(0, 0, 0, 0.1);
+ }
}
</style>
--
Gitblit v1.9.3