<template>
|
<div class="page">
|
<div class="page-container">
|
<div class="page-container-left">
|
<LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" />
|
</div>
|
<div class="page-container-right">
|
<div class="form-card">
|
<el-form :model="queryParams" ref="queryRef" :inline="true">
|
<el-form-item label="日期筛选" prop="dateRange">
|
<el-date-picker
|
v-model="queryParams.queryTime"
|
value-format="YYYY-MM-DD"
|
type="date"
|
placeholder="日期筛选"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="Search" @click="handleQuery">
|
搜索
|
</el-button>
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="Download" @click="handleExport">
|
导出
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div
|
style="
|
height: calc(100vh - 205px) !important;
|
max-height: calc(100vh - 205px) !important;
|
overflow-y: auto;
|
"
|
v-loading="loading"
|
>
|
<el-row>
|
<el-col :span="16">
|
<BaseCard :title="queryParams.nodeName + '-峰平谷电量图'">
|
<div class="chart-box">
|
<div id="Chart1" />
|
</div>
|
</BaseCard>
|
</el-col>
|
<el-col :span="8">
|
<BaseCard :title="queryParams.nodeName + '-峰平谷占比图'">
|
<div class="chart-box">
|
<div id="Chart2" />
|
</div>
|
</BaseCard>
|
</el-col>
|
<el-col :span="24">
|
<BaseCard :title="queryParams.nodeName + '-峰平谷分时统计'">
|
<div class="table-box">
|
<el-table
|
:data="timeSharingList"
|
style="width: 100%"
|
show-summary
|
>
|
<el-table-column
|
label="时间"
|
align="center"
|
show-overflow-tooltip
|
>
|
<template #default="scope">
|
{{ proxy.dayjs(scope.row.time).format("HH时") }}
|
</template>
|
</el-table-column>
|
<el-table-column label="尖" align="center">
|
<el-table-column
|
prop="sharpPower"
|
label="耗电量(kWh)"
|
align="center"
|
show-overflow-tooltip
|
width="120"
|
/>
|
<el-table-column
|
prop="sharpFee"
|
label="电费(元)"
|
align="center"
|
show-overflow-tooltip
|
/>
|
</el-table-column>
|
<el-table-column label="峰" align="center">
|
<el-table-column
|
prop="peakPower"
|
label="耗电量(kWh)"
|
align="center"
|
show-overflow-tooltip
|
width="120"
|
/>
|
<el-table-column
|
prop="peakFee"
|
label="电费(元)"
|
align="center"
|
show-overflow-tooltip
|
/>
|
</el-table-column>
|
<el-table-column label="平" align="center">
|
<el-table-column
|
prop="flatPower"
|
label="耗电量(kWh)"
|
align="center"
|
show-overflow-tooltip
|
width="120"
|
/>
|
<el-table-column
|
prop="flatFee"
|
label="电费(元)"
|
align="center"
|
show-overflow-tooltip
|
/>
|
</el-table-column>
|
<el-table-column label="谷" align="center">
|
<el-table-column
|
prop="valleyPower"
|
label="耗电量(kWh)"
|
align="center"
|
show-overflow-tooltip
|
width="120"
|
/>
|
<el-table-column
|
prop="valleyFee"
|
label="电费(元)"
|
align="center"
|
show-overflow-tooltip
|
/>
|
</el-table-column>
|
<el-table-column label="合计" align="center">
|
<el-table-column
|
prop="totalPower"
|
label="总电量(kWh)"
|
align="center"
|
show-overflow-tooltip
|
width="120"
|
/>
|
<el-table-column
|
prop="totalFee"
|
label="总电费(元)"
|
align="center"
|
show-overflow-tooltip
|
/>
|
</el-table-column>
|
<!-- <el-table-column label="操作" align="center">
|
<template #default="scope">
|
<el-button link icon="view" @click="handleView(scope.row)" type="primary">
|
查看
|
</el-button>
|
</template>
|
</el-table-column> -->
|
</el-table>
|
</div>
|
</BaseCard>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</div>
|
<el-dialog
|
v-model="timeSharingDialogTableVisible"
|
title="查看分时统计详情"
|
width="1300"
|
>
|
<div class="table-box">
|
<el-table :data="viewTimeSharingList" style="width: 100%" height="420">
|
<el-table-column
|
label="时间"
|
align="center"
|
show-overflow-tooltip
|
width="200"
|
>
|
<template #default="scope"> {{ scope.row.time }}时 </template>
|
</el-table-column>
|
<el-table-column label="尖" align="center">
|
<el-table-column
|
prop="sharpPower"
|
label="耗电量(kWh)"
|
align="center"
|
show-overflow-tooltip
|
width="120"
|
/>
|
<el-table-column
|
prop="sharpFee"
|
label="电费(元)"
|
align="center"
|
show-overflow-tooltip
|
width="90"
|
/>
|
</el-table-column>
|
<el-table-column label="峰" align="center">
|
<el-table-column
|
prop="peakPower"
|
label="耗电量(kWh)"
|
align="center"
|
show-overflow-tooltip
|
width="120"
|
/>
|
<el-table-column
|
prop="peakFee"
|
label="电费(元)"
|
align="center"
|
show-overflow-tooltip
|
width="90"
|
/>
|
</el-table-column>
|
<el-table-column label="平" align="center">
|
<el-table-column
|
prop="flatPower"
|
label="耗电量(kWh)"
|
align="center"
|
show-overflow-tooltip
|
width="120"
|
/>
|
<el-table-column
|
prop="flatFee"
|
label="电费(元)"
|
align="center"
|
show-overflow-tooltip
|
width="90"
|
/>
|
</el-table-column>
|
<el-table-column label="谷" align="center">
|
<el-table-column
|
prop="valleyPower"
|
label="耗电量(kWh)"
|
align="center"
|
show-overflow-tooltip
|
width="120"
|
/>
|
<el-table-column
|
prop="valleyFee"
|
label="电费(元)"
|
align="center"
|
show-overflow-tooltip
|
width="90"
|
/>
|
</el-table-column>
|
<el-table-column label="合计" align="center">
|
<el-table-column
|
prop="totalPowerConsumption"
|
label="总电量(kWh)"
|
align="center"
|
show-overflow-tooltip
|
width="120"
|
>
|
<template #default="scope">
|
{{
|
scope.row.sharpPower +
|
scope.row.peakPower +
|
scope.row.flatPower +
|
scope.row.valleyPower
|
}}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="totalCost"
|
label="总电费(元)"
|
align="center"
|
show-overflow-tooltip
|
width="100"
|
>
|
<template #default="scope">
|
{{
|
scope.row.sharpFee +
|
scope.row.peakFee +
|
scope.row.flatFee +
|
scope.row.valleyFee
|
}}
|
</template>
|
</el-table-column>
|
</el-table-column>
|
<el-table-column
|
prop="nodeName"
|
label="用能单元"
|
align="center"
|
show-overflow-tooltip
|
width="200"
|
/>
|
</el-table>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup name="timeSharing">
|
import { listTimeSharing } from "@/api/peakValley/timeSharing";
|
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();
|
}
|
);
|
const loading = ref(false);
|
const timeSharingList = ref([]);
|
const timeSharingDialogTableVisible = ref(false);
|
const viewTimeSharingList = ref([]);
|
const nodeOptions = ref(undefined);
|
const data = reactive({
|
queryParams: {
|
nodeId: null,
|
nodeName: null,
|
timeType: "DAY",
|
queryTime: null,
|
},
|
query: { ...useRoute().query },
|
});
|
const { queryParams, query } = toRefs(data);
|
/** 通过条件过滤节点 */
|
const filterNode = (value, data) => {
|
if (!value) return true;
|
return data.label.indexOf(value) !== -1;
|
};
|
function handleNodeClick(data) {
|
queryParams.value.nodeId = data.id;
|
queryParams.value.nodeName = data.label;
|
queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM-DD");
|
handleQuery();
|
}
|
// 峰平谷能耗分析-峰平谷分时统计-列表
|
function getList() {
|
loading.value = true;
|
listTimeSharing(
|
proxy.addDateRange({
|
...queryParams.value,
|
...query.value,
|
})
|
).then((res) => {
|
loading.value = false;
|
if (!!res.code && res.code == 200) {
|
// 在初始化之前，先dispose旧的实例
|
if (echarts.getInstanceByDom(document.getElementById("Chart1"))) {
|
echarts.dispose(document.getElementById("Chart1"));
|
}
|
if (echarts.getInstanceByDom(document.getElementById("Chart2"))) {
|
echarts.dispose(document.getElementById("Chart2"));
|
}
|
const myChart1 = echarts.init(document.getElementById("Chart1"));
|
const myChart2 = echarts.init(document.getElementById("Chart2"));
|
if (!!res.data.lineChat) {
|
let xdata = [];
|
let ytip = [];
|
let ypeak = [];
|
let yflat = [];
|
let ytrough = [];
|
res.data.lineChat.map((item) => {
|
xdata.push(Number(item.xdata.slice(-8).substring(0, 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"],
|
grid: {
|
top: "45",
|
left: "5%",
|
right: "5%",
|
bottom: "10",
|
containLabel: true,
|
},
|
tooltip: {
|
trigger: "axis",
|
axisPointer: {
|
type: "shadow",
|
},
|
},
|
legend: {
|
icon: "rect",
|
itemWidth: 14,
|
itemHeight: 10,
|
// right: 0,
|
textStyle: {
|
color:
|
settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
|
},
|
// data: ['尖', '峰', '平', '谷']
|
},
|
xAxis: {
|
type: "category",
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color:
|
settingsStore.sideTheme == "theme-dark"
|
? "#FFFFFF"
|
: "#222222",
|
},
|
},
|
axisTick: {
|
show: false,
|
},
|
splitArea: {
|
show: false,
|
},
|
splitLine: {
|
show: false,
|
},
|
axisLabel: {
|
color:
|
settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
|
fontSize: 14,
|
padding: [5, 0, 0, 0],
|
// formatter: '{value} ml'
|
},
|
data: xdata,
|
},
|
yAxis: {
|
name: "耗电量(KWH)",
|
type: "value",
|
nameTextStyle: {
|
color:
|
settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
|
fontSize: 14,
|
padding: [0, 0, 5, 0],
|
},
|
axisLine: {
|
show: false,
|
},
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: "dashed",
|
color:
|
settingsStore.sideTheme == "theme-dark"
|
? "#FFFFFF"
|
: "#222222",
|
},
|
},
|
axisTick: {
|
show: false,
|
},
|
splitArea: {
|
show: false,
|
},
|
axisLabel: {
|
color:
|
settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
|
fontSize: 14,
|
// formatter: '{value} ml'
|
},
|
},
|
series: [
|
{
|
name: "尖", // ytip
|
type: "bar",
|
barWidth: "27",
|
stack: "total",
|
data: ytip,
|
},
|
{
|
name: "峰", // ypeak
|
type: "bar",
|
barWidth: "27",
|
stack: "total",
|
data: ypeak,
|
},
|
{
|
name: "平", // yflat
|
type: "bar",
|
barWidth: "27",
|
stack: "total",
|
data: yflat,
|
},
|
{
|
name: "谷", // ytrough
|
type: "bar",
|
barWidth: "27",
|
stack: "total",
|
data: ytrough,
|
},
|
],
|
});
|
}
|
if (!!res.data.pieChat) {
|
myChart2.setOption({
|
color: ["#f52528", "#ff6200", "#ffce0c", "#78e801"],
|
tooltip: {
|
trigger: "item",
|
},
|
legend: {
|
icon: "circle",
|
itemWidth: 14,
|
itemHeight: 14,
|
itemGap: 10,
|
// right: 0,
|
textStyle: {
|
color:
|
settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
|
},
|
},
|
series: [
|
{
|
name: "峰平谷占比图",
|
type: "pie",
|
radius: ["30%", "50%"],
|
avoidLabelOverlap: false,
|
label: {
|
overflow: "none",
|
formatter: "{b} {c}% ",
|
color:
|
settingsStore.sideTheme == "theme-dark"
|
? "#FFFFFF"
|
: "#222222",
|
},
|
data: [
|
{
|
value: !!res.data.pieChat.tip
|
? Number(res.data.pieChat.tip)
|
: 0,
|
name: "尖",
|
},
|
{
|
value: !!res.data.pieChat.peak
|
? Number(res.data.pieChat.peak)
|
: 0,
|
name: "峰",
|
},
|
{
|
value: !!res.data.pieChat.flat
|
? Number(res.data.pieChat.flat)
|
: 0,
|
name: "平",
|
},
|
{
|
value: !!res.data.pieChat.trough
|
? Number(res.data.pieChat.trough)
|
: 0,
|
name: "谷",
|
},
|
],
|
},
|
],
|
});
|
}
|
if (!!res.data.dataList) {
|
timeSharingList.value = !!res.data.dataList ? res.data.dataList : [];
|
}
|
window.addEventListener(
|
"resize",
|
() => {
|
myChart1.resize();
|
myChart2.resize();
|
},
|
{ passive: true }
|
);
|
}
|
});
|
}
|
// 峰平谷能耗分析-峰平谷分时统计-查看
|
function handleView(row) {
|
queryParams.value.key = row.timeStr;
|
timeSharingDialogTableVisible.value = true;
|
viewTimeSharingList.value = [row];
|
}
|
// 峰平谷能耗分析-峰平谷分时统计-搜索
|
function handleQuery() {
|
getList();
|
}
|
// 峰平谷能耗分析-峰平谷分时统计-重置
|
function resetQuery() {
|
proxy.resetForm("queryRef");
|
(queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")),
|
handleQuery();
|
}
|
// 峰平谷能耗分析-峰平谷分时统计-导出
|
function handleExport() {
|
proxy.download(
|
"peakValley/segmentAnalysis/hour/export",
|
{
|
...queryParams.value,
|
...query.value,
|
},
|
`${queryParams.value.nodeName}_峰平谷分时统计_${new Date().getTime()}.xlsx`
|
);
|
}
|
</script>
|
<style scoped lang="scss">
|
@import "@/assets/styles/page.scss";
|
|
.table-box {
|
:deep .el-table--border .el-table__inner-wrapper:after {
|
height: 0;
|
}
|
|
:deep .el-table--border:after {
|
width: 0;
|
}
|
|
:deep .el-table--border:before {
|
width: 0;
|
}
|
|
:deep .el-table__border-left-patch {
|
background: transparent;
|
}
|
|
:deep .el-table--border .el-table__cell {
|
border-right: none;
|
}
|
}
|
</style>
|
