From 75f043dfa6660716364e66ee0b3cf99f44255686 Mon Sep 17 00:00:00 2001
From: DYL0109 <dn18191638832@163.com>
Date: 星期三, 16 四月 2025 19:20:36 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/develop1.0' into dyl_dev
---
zhitan-vue/src/views/peakvalley/period/period.vue | 317 ++++++++++++++++++++--------------------------------
1 files changed, 124 insertions(+), 193 deletions(-)
diff --git a/zhitan-vue/src/views/peakvalley/period/period.vue b/zhitan-vue/src/views/peakvalley/period/period.vue
index c550828..a9551c6 100644
--- a/zhitan-vue/src/views/peakvalley/period/period.vue
+++ b/zhitan-vue/src/views/peakvalley/period/period.vue
@@ -6,11 +6,7 @@
</div>
<div class="page-container-right">
<div class="form-card">
- <el-form
- :model="queryParams"
- ref="queryRef"
- :inline="true"
- >
+ <el-form :model="queryParams" ref="queryRef" :inline="true">
<el-form-item label="鏃堕棿" prop="queryTime">
<el-date-picker
v-model="queryParams.queryTime"
@@ -22,39 +18,22 @@
/>
</el-form-item>
<el-form-item>
- <el-button type="primary" icon="Search" @click="handleQuery">
- 鎼滅储
- </el-button>
+ <el-button type="primary" icon="Search" @click="handleQuery"> 鎼滅储 </el-button>
<el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
</el-form-item>
</el-form>
</div>
<div
- style="
- height: calc(100vh - 205px) !important;
- max-height: calc(100vh - 205px) !important;
- overflow-y: auto;
- "
+ style="height: calc(100vh - 205px) !important; max-height: calc(100vh - 205px) !important; overflow-y: auto"
v-loading="loading"
>
<div class="card-list">
- <div
- class="card-list-item"
- v-for="item in periodList"
- :key="item.title"
- >
+ <div class="card-list-item" v-for="item in periodList" :key="item.title">
<div class="item-top">
- <div
- class="icon"
- :style="{ backgroundImage: 'url(' + item.icon + ')' }"
- ></div>
+ <div class="icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
<div class="name">{{ item.title }}</div>
</div>
- <div
- class="item-bottom"
- v-for="(node, nodeIndex) in item.data"
- :key="nodeIndex"
- >
+ <div class="item-bottom" v-for="(node, nodeIndex) in item.data" :key="nodeIndex">
<div class="bottom-left">{{ node.label }}</div>
<div class="bottom-right" :style="{ color: item.color }">
{{ node.value }}
@@ -62,12 +41,12 @@
</div>
</div>
</div>
- <BaseCard :title="queryParams.nodeName+'-灏栧嘲骞宠胺鐢甸噺鍥�'">
+ <BaseCard :title="queryParams.nodeName + '-灏栧嘲骞宠胺鐢甸噺鍥�'">
<div class="chart-box">
<div id="Chart1" />
</div>
</BaseCard>
- <BaseCard :title="queryParams.nodeName+'-灏栧嘲骞宠胺鐢佃垂鍥�'">
+ <BaseCard :title="queryParams.nodeName + '-灏栧嘲骞宠胺鐢佃垂鍥�'">
<div class="chart-box">
<div id="Chart2" />
</div>
@@ -78,24 +57,24 @@
</div>
</template>
<script setup name="period">
-import { listPeriod } from "@/api/peakValley/period";
-import * as echarts from "echarts";
-const { proxy } = getCurrentInstance();
-import { useRoute } from "vue-router";
-import useSettingsStore from "@/store/modules/settings";
-const settingsStore = useSettingsStore();
+import { listPeriod } from "@/api/peakValley/period"
+import * as echarts from "echarts"
+const { proxy } = getCurrentInstance()
+import { useRoute } from "vue-router"
+import useSettingsStore from "@/store/modules/settings"
+const settingsStore = useSettingsStore()
watch(
() => settingsStore.sideTheme,
(val) => {
- getList();
+ getList()
}
-);
-const loading = ref(false);
-import icon1 from "@/assets/images/period/icon1.png";
-import icon2 from "@/assets/images/period/icon2.png";
-import icon3 from "@/assets/images/period/icon3.png";
-import icon4 from "@/assets/images/period/icon4.png";
-import icon5 from "@/assets/images/period/icon5.png";
+)
+const loading = ref(false)
+import icon1 from "@/assets/images/period/icon1.png"
+import icon2 from "@/assets/images/period/icon2.png"
+import icon3 from "@/assets/images/period/icon3.png"
+import icon4 from "@/assets/images/period/icon4.png"
+import icon5 from "@/assets/images/period/icon5.png"
const periodList = ref([
{
icon: icon1,
@@ -204,7 +183,7 @@
},
],
},
-]);
+])
const data = reactive({
queryParams: {
nodeId: null,
@@ -213,121 +192,90 @@
queryTime: null,
},
query: { ...useRoute().query },
-});
-const { queryParams, query } = toRefs(data);
+})
+const { queryParams, query } = toRefs(data)
/** 鑺傜偣鍗曞嚮浜嬩欢 */
function handleNodeClick(data) {
- queryParams.value.nodeId = data.id;
- queryParams.value.nodeName = data.label;
- queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM");
- handleQuery();
+ queryParams.value.nodeId = data.id
+ queryParams.value.nodeName = data.label
+ queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM")
+ handleQuery()
}
// 宄板钩璋疯兘鑰楀垎鏋�-宄板钩璋锋椂娈电粺璁�-鍒楄〃
function getList() {
- loading.value = true;
+ loading.value = true
listPeriod(
proxy.addDateRange({
...queryParams.value,
...query.value,
})
).then((res) => {
- loading.value = false;
+ loading.value = false
if (!!res.code && res.code == 200) {
if (!!res.data.totalVO) {
- periodList.value[0].data[0].value = !!res.data.totalVO
- .totalPowerConsumption
+ periodList.value[0].data[0].value = !!res.data.totalVO.totalPowerConsumption
? res.data.totalVO.totalPowerConsumption
- : 0;
- periodList.value[0].data[1].value = !!res.data.totalVO.totalCost
- ? res.data.totalVO.totalCost
- : 0;
+ : 0
+ periodList.value[0].data[1].value = !!res.data.totalVO.totalCost ? res.data.totalVO.totalCost : 0
- periodList.value[1].data[0].value = !!res.data.totalVO
- .tipPowerConsumption
+ periodList.value[1].data[0].value = !!res.data.totalVO.tipPowerConsumption
? res.data.totalVO.tipPowerConsumption
- : 0;
+ : 0
periodList.value[1].data[1].value =
- (!!res.data.totalVO.tipPowerProportion
- ? res.data.totalVO.tipPowerProportion
- : 0) + "%";
- periodList.value[1].data[2].value = !!res.data.totalVO.tipPowerCost
- ? res.data.totalVO.tipPowerCost
- : 0;
+ (!!res.data.totalVO.tipPowerProportion ? res.data.totalVO.tipPowerProportion : 0) + "%"
+ periodList.value[1].data[2].value = !!res.data.totalVO.tipPowerCost ? res.data.totalVO.tipPowerCost : 0
periodList.value[1].data[3].value =
- (!!res.data.totalVO.tipPowerCostProportion
- ? res.data.totalVO.tipPowerCostProportion
- : 0) + "%";
+ (!!res.data.totalVO.tipPowerCostProportion ? res.data.totalVO.tipPowerCostProportion : 0) + "%"
- periodList.value[2].data[0].value = !!res.data.totalVO
- .peakPowerConsumption
+ periodList.value[2].data[0].value = !!res.data.totalVO.peakPowerConsumption
? res.data.totalVO.peakPowerConsumption
- : 0;
+ : 0
periodList.value[2].data[1].value =
- (!!res.data.totalVO.peakPowerProportion
- ? res.data.totalVO.peakPowerProportion
- : 0) + "%";
- periodList.value[2].data[2].value = !!res.data.totalVO.peakPowerCost
- ? res.data.totalVO.peakPowerCost
- : 0;
+ (!!res.data.totalVO.peakPowerProportion ? res.data.totalVO.peakPowerProportion : 0) + "%"
+ periodList.value[2].data[2].value = !!res.data.totalVO.peakPowerCost ? res.data.totalVO.peakPowerCost : 0
periodList.value[2].data[3].value =
- (!!res.data.totalVO.peakPowerCostProportion
- ? res.data.totalVO.peakPowerCostProportion
- : 0) + "%";
+ (!!res.data.totalVO.peakPowerCostProportion ? res.data.totalVO.peakPowerCostProportion : 0) + "%"
- periodList.value[3].data[0].value = !!res.data.totalVO
- .flatPowerConsumption
+ periodList.value[3].data[0].value = !!res.data.totalVO.flatPowerConsumption
? res.data.totalVO.flatPowerConsumption
- : 0;
+ : 0
periodList.value[3].data[1].value =
- (!!res.data.totalVO.flatPowerProportion
- ? res.data.totalVO.flatPowerProportion
- : 0) + "%";
- periodList.value[3].data[2].value = !!res.data.totalVO.flatPowerCost
- ? res.data.totalVO.flatPowerCost
- : 0;
+ (!!res.data.totalVO.flatPowerProportion ? res.data.totalVO.flatPowerProportion : 0) + "%"
+ periodList.value[3].data[2].value = !!res.data.totalVO.flatPowerCost ? res.data.totalVO.flatPowerCost : 0
periodList.value[3].data[3].value =
- (!!res.data.totalVO.flatPowerCostProportion
- ? res.data.totalVO.flatPowerCostProportion
- : 0) + "%";
+ (!!res.data.totalVO.flatPowerCostProportion ? res.data.totalVO.flatPowerCostProportion : 0) + "%"
- periodList.value[4].data[0].value = !!res.data.totalVO
- .troughPowerConsumption
+ periodList.value[4].data[0].value = !!res.data.totalVO.troughPowerConsumption
? res.data.totalVO.troughPowerConsumption
- : 0;
+ : 0
periodList.value[4].data[1].value =
- (!!res.data.totalVO.troughPowerProportion
- ? res.data.totalVO.troughPowerProportion
- : 0) + "%";
- periodList.value[4].data[2].value = !!res.data.totalVO.troughPowerCost
- ? res.data.totalVO.troughPowerCost
- : 0;
+ (!!res.data.totalVO.troughPowerProportion ? res.data.totalVO.troughPowerProportion : 0) + "%"
+ periodList.value[4].data[2].value = !!res.data.totalVO.troughPowerCost ? res.data.totalVO.troughPowerCost : 0
periodList.value[4].data[3].value =
- (!!res.data.totalVO.troughPowerCostProportion
- ? res.data.totalVO.troughPowerCostProportion
- : 0) + "%";
+ (!!res.data.totalVO.troughPowerCostProportion ? res.data.totalVO.troughPowerCostProportion : 0) + "%"
}
// 鍦ㄥ垵濮嬪寲涔嬪墠锛屽厛dispose鏃х殑瀹炰緥
if (echarts.getInstanceByDom(document.getElementById("Chart1"))) {
- echarts.dispose(document.getElementById("Chart1"));
+ echarts.dispose(document.getElementById("Chart1"))
}
if (echarts.getInstanceByDom(document.getElementById("Chart2"))) {
- echarts.dispose(document.getElementById("Chart2"));
+ echarts.dispose(document.getElementById("Chart2"))
}
- const myChart1 = echarts.init(document.getElementById("Chart1"));
- const myChart2 = echarts.init(document.getElementById("Chart2"));
+ const myChart1 = echarts.init(document.getElementById("Chart1"))
+ const myChart2 = echarts.init(document.getElementById("Chart2"))
if (!!res.data.powerConsumptionList) {
- let xdata = [];
- let ytip = [];
- let ypeak = [];
- let yflat = [];
- let ytrough = [];
+ let xdata = []
+ let ytip = []
+ let ypeak = []
+ let yflat = []
+ let ytrough = []
res.data.powerConsumptionList.map((item) => {
- xdata.push(Number(item.xdata.slice(-2)) + "鏃�");
- ytip.push(!!item.ytip ? item.ytip : 0);
- ypeak.push(!!item.ypeak ? item.ypeak : 0);
- yflat.push(!!item.yflat ? item.yflat : 0);
- ytrough.push(!!item.ytrough ? item.ytrough : 0);
- });
+ xdata.push(Number(item.xdata.slice(-2)) + "鏃�")
+ ytip.push(!!item.ytip ? item.ytip : 0)
+ ypeak.push(!!item.ypeak ? item.ypeak : 0)
+ yflat.push(!!item.yflat ? item.yflat : 0)
+ ytrough.push(!!item.ytrough ? item.ytrough : 0)
+ })
myChart1.setOption({
color: ["#f52528", "#ff6200", "#ffce0c", "#78e801"],
tooltip: {
@@ -336,10 +284,7 @@
type: "shadow",
textStyle: {
fontSize: 14,
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
},
},
},
@@ -356,8 +301,7 @@
itemHeight: 10,
// right: 0,
textStyle: {
- color:
- settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
},
},
xAxis: {
@@ -365,10 +309,7 @@
axisLine: {
show: true,
lineStyle: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
},
},
axisTick: {
@@ -381,8 +322,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'
@@ -393,8 +333,7 @@
name: "鑰楃數閲�(KWH)",
type: "value",
nameTextStyle: {
- color:
- settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
fontSize: 14,
padding: [0, 0, 5, 0],
},
@@ -405,10 +344,7 @@
show: true,
lineStyle: {
type: "dashed",
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
},
},
axisTick: {
@@ -418,8 +354,7 @@
show: false,
},
axisLabel: {
- color:
- settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
fontSize: 14,
// formatter: '{value} ml'
},
@@ -429,46 +364,46 @@
name: "灏�",
type: "bar",
stack: "total",
- barWidth: "27",
+ barWidth: "12",
data: ytip,
},
{
name: "宄�",
type: "bar",
stack: "total",
- barWidth: "27",
+ barWidth: "12",
data: ypeak,
},
{
name: "骞�",
type: "bar",
stack: "total",
- barWidth: "27",
+ barWidth: "12",
data: yflat,
},
{
name: "璋�",
type: "bar",
stack: "total",
- barWidth: "27",
+ barWidth: "12",
data: ytrough,
},
],
- });
+ })
}
if (!!res.data.costList) {
- let xdata = [];
- let ytip = [];
- let ypeak = [];
- let yflat = [];
- let ytrough = [];
+ let xdata = []
+ let ytip = []
+ let ypeak = []
+ let yflat = []
+ let ytrough = []
res.data.costList.map((item) => {
- xdata.push(Number(item.xdata.slice(-2)) + "鏃�");
- ytip.push(!!item.ytip ? item.ytip : 0);
- ypeak.push(!!item.ypeak ? item.ypeak : 0);
- yflat.push(!!item.yflat ? item.yflat : 0);
- ytrough.push(!!item.ytrough ? item.ytrough : 0);
- });
+ xdata.push(Number(item.xdata.slice(-2)) + "鏃�")
+ ytip.push(!!item.ytip ? item.ytip : 0)
+ ypeak.push(!!item.ypeak ? item.ypeak : 0)
+ yflat.push(!!item.yflat ? item.yflat : 0)
+ ytrough.push(!!item.ytrough ? item.ytrough : 0)
+ })
myChart2.setOption({
color: ["#f52528", "#ff6200", "#ffce0c", "#78e801"],
tooltip: {
@@ -477,10 +412,7 @@
type: "shadow",
textStyle: {
fontSize: 14,
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
},
},
},
@@ -497,8 +429,7 @@
itemHeight: 10,
// right: 0,
textStyle: {
- color:
- settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
},
},
xAxis: {
@@ -506,10 +437,7 @@
axisLine: {
show: true,
lineStyle: {
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
},
},
axisTick: {
@@ -522,8 +450,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'
@@ -534,8 +461,7 @@
name: "鐢佃垂(鍏�)",
type: "value",
nameTextStyle: {
- color:
- settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
fontSize: 14,
padding: [0, 0, 5, 0],
},
@@ -546,10 +472,7 @@
show: true,
lineStyle: {
type: "dashed",
- color:
- settingsStore.sideTheme == "theme-dark"
- ? "#FFFFFF"
- : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
},
},
axisTick: {
@@ -559,8 +482,7 @@
show: false,
},
axisLabel: {
- color:
- settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
fontSize: 14,
// formatter: '{value} ml'
},
@@ -570,49 +492,53 @@
name: "灏�",
type: "bar",
stack: "total",
- barWidth: "27",
+ barWidth: "12",
data: ytip,
},
{
name: "宄�",
type: "bar",
stack: "total",
- barWidth: "27",
+ barWidth: "12",
data: ypeak,
},
{
name: "骞�",
type: "bar",
stack: "total",
- barWidth: "27",
+ barWidth: "12",
data: yflat,
},
{
name: "璋�",
type: "bar",
stack: "total",
- barWidth: "27",
+ barWidth: "12",
data: ytrough,
},
],
- });
+ })
}
- window.addEventListener("resize", () => {
- myChart1.resize();
- myChart2.resize();
- },{passive: true});
+ window.addEventListener(
+ "resize",
+ () => {
+ myChart1.resize()
+ myChart2.resize()
+ },
+ { passive: true }
+ )
}
- });
+ })
}
// 宄板钩璋疯兘鑰楀垎鏋�-宄板钩璋锋椂娈电粺璁�-鎼滅储
function handleQuery() {
- getList();
+ getList()
}
// 宄板钩璋疯兘鑰楀垎鏋�-宄板钩璋锋椂娈电粺璁�-閲嶇疆
function resetQuery() {
- proxy.resetForm("queryRef");
- queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM");
- handleQuery();
+ proxy.resetForm("queryRef")
+ queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM")
+ handleQuery()
}
</script>
<style scoped lang="scss">
@@ -629,16 +555,21 @@
display: flex;
justify-content: space-between;
padding: 18px;
+ width: 100%;
+ overflow: hidden;
+ overflow-x: auto;
.card-list-item {
- width: 19%;
- height: 187px;
+ flex-shrink: 0;
+ width: 230px;
+ height: 188px;
background: #223386;
border-radius: 5px 5px 5px 5px;
border: 1px solid #4868b7;
background-size: 100% 100%;
box-sizing: border-box;
padding: 10px 18px 13px 16px;
+ margin-right: 12px;
.item-top {
display: flex;
--
Gitblit v1.9.3