From 1686cbdcf757d9e1a85aac35b577473a08056f5c Mon Sep 17 00:00:00 2001
From: net <net@netdeMacBook-Pro.local>
Date: 星期六, 15 二月 2025 00:44:25 +0800
Subject: [PATCH] 同比环比集成完毕接口
---
zhitan-vue/src/views/poweranalysis/perPassu/index.vue | 594 ++++++++++++++++++++++++++++
.DS_Store | 0
zhitan-vue/src/views/poweranalysis/pariPassu/index.vue | 592 ++++++++++++++++++++++++++++
zhitan-vue/src/api/energyAnalysis/energyAnalysis.js | 16
4 files changed, 1,202 insertions(+), 0 deletions(-)
diff --git a/.DS_Store b/.DS_Store
index e410d8d..af0ac34 100644
--- a/.DS_Store
+++ b/.DS_Store
Binary files differ
diff --git a/zhitan-vue/src/api/energyAnalysis/energyAnalysis.js b/zhitan-vue/src/api/energyAnalysis/energyAnalysis.js
index cbb5712..20f6551 100644
--- a/zhitan-vue/src/api/energyAnalysis/energyAnalysis.js
+++ b/zhitan-vue/src/api/energyAnalysis/energyAnalysis.js
@@ -60,3 +60,19 @@
params: query,
})
}
+// 瀵规瘮鍒嗘瀽鍚屾瘮
+export function querySameCompareList(query) {
+ return request({
+ url: "/statisticsAnalysis/querySameCompareList",
+ method: "get",
+ params: query,
+ })
+}
+// 瀵规瘮鍒嗘瀽鐜瘮
+export function queryLoopCompareList(query) {
+ return request({
+ url: "/statisticsAnalysis/queryLoopCompareList",
+ method: "get",
+ params: query,
+ })
+}
diff --git a/zhitan-vue/src/views/poweranalysis/pariPassu/index.vue b/zhitan-vue/src/views/poweranalysis/pariPassu/index.vue
new file mode 100644
index 0000000..d6bcfd1
--- /dev/null
+++ b/zhitan-vue/src/views/poweranalysis/pariPassu/index.vue
@@ -0,0 +1,592 @@
+<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="timeType">
+ <el-select v-model="queryParams.timeType" placeholder="鏈熼棿" clearable style="width: 120px"
+ @change="handleTimeType">
+ <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鏃堕棿">
+ <el-date-picker v-model="queryParams.dataTime" :type="queryParams.timeType == 'YEAR'
+ ? 'year'
+ : queryParams.timeType == 'MONTH'
+ ? 'month'
+ : 'date'
+ " :format="queryParams.timeType == 'YEAR'
+ ? 'YYYY'
+ : queryParams.timeType == 'MONTH'
+ ? 'YYYY-MM'
+ : 'YYYY-MM-DD'
+ " value-format="YYYY-MM-DD" placeholder="鏃堕棿" style="width: 100%" />
+ </el-form-item>
+ <el-form-item label="鑳芥簮绫诲瀷" prop="energyType">
+ <el-select v-model="queryParams.energyType" placeholder="鑳芥簮绫诲瀷" clearable style="width: 120px">
+ <el-option :label="item.enername" :value="item.enersno" v-for="item in energyTypeList"
+ :key="item.enersno" @click="handleEnergyType(item)" />
+ </el-select>
+ </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="queryParams.analysisType == 'YOY' ? 'primary' : ''" @click="handleAnalysisType('YOY')">
+ 鍚屾瘮
+ </el-button>
+ <el-button :type="queryParams.analysisType == 'MOM' ? 'primary' : ''" @click="handleAnalysisType('MOM')">
+ 鐜瘮
+ </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 - 220px) !important;
+ max-height: calc(100vh - 220px) !important;
+ overflow-y: auto;
+ " v-loading="loading">
+
+ <BaseCard :title="queryParams.nodeName + '-鑳借�楀姣斿垎鏋�'">
+ <div class="chart-box">
+ <div id="Chart1" />
+ </div>
+ </BaseCard>
+
+ <BaseCard :title="queryParams.nodeName +
+ '-鑳借�楀姣斿垎鏋愬悓姣斿垎鏋愯〃-' +
+ queryParams.enername
+ ">
+ <div class="table-box">
+ <el-table :data="departmentList" show-summary>
+ <el-table-column label="鏈湡鏃堕棿" align="center" key="currentTime" prop="currentTime"
+ :show-overflow-tooltip="true" />
+ <el-table-column :label="'鏈湡鑰�' +
+ queryParams.enername +
+ '(' +
+ queryParams.muid +
+ ')'
+ " align="center" key="currentValue" prop="currentValue" :show-overflow-tooltip="true" />
+ <el-table-column label="鍚屾湡鏃堕棿" align="center" key="compareTime" prop="compareTime"
+ :show-overflow-tooltip="true" />
+ <el-table-column :label="'鍚屾湡鑰�' +
+ queryParams.enername +
+ '(' +
+ queryParams.muid +
+ ')'
+ " align="center" key="contrastValues" prop="contrastValues" :show-overflow-tooltip="true" />
+ <el-table-column :label="(queryParams.analysisType == 'YOY' ? '鍚�' : '鐜�') + '姣�(%)'
+ " align="center" key="ratio" prop="ratio" :show-overflow-tooltip="true" width="200" />
+ </el-table>
+ </div>
+ </BaseCard>
+ <!-- </el-col>
+ </el-row> -->
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup name="department">
+import {
+ listRegion,
+ listDepartment,
+ querySameCompareList,
+} from "@/api/energyAnalysis/energyAnalysis";
+import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
+import * as echarts from "echarts";
+const { proxy } = getCurrentInstance();
+const { period } = proxy.useDict("period");
+import { useRoute } from "vue-router";
+import useSettingsStore from "@/store/modules/settings";
+const settingsStore = useSettingsStore();
+watch(
+ () => settingsStore.sideTheme,
+ (val) => {
+ getList();
+ }
+);
+const energyTypeList = ref(undefined);
+const departmentList = ref([]);
+const loading = ref(false);
+const data = reactive({
+ queryParams: {
+ nodeId: null,
+ timeType: null,
+ dataTime: null,
+ timeCode: null,
+ analysisType: "YOY",
+ energyType: null,
+ },
+ query: {
+ modelCode: null,
+ },
+});
+const { queryParams, query } = toRefs(data);
+/** 鑺傜偣鍗曞嚮浜嬩欢 */
+function handleNodeClick(data) {
+ queryParams.value.nodeId = data.id;
+ queryParams.value.nodeName = data.label;
+ handleTimeType(period.value[1].value);
+ listEnergyTypeList().then((res) => {
+ energyTypeList.value = res.data;
+ queryParams.value.energyType = energyTypeList.value[0].enersno;
+ queryParams.value.enername = energyTypeList.value[0].enername;
+ queryParams.value.muid = energyTypeList.value[0].muid;
+ handleQuery();
+ });
+}
+function handleTimeType(e) {
+ queryParams.value.timeType = e;
+ if(e=='MONTH'){
+ queryParams.value.timeCode = proxy.dayjs(new Date()).format("YYYY-MM");
+ }else if(e=='YEAR'){
+ queryParams.value.timeCode = proxy.dayjs(new Date()).format("YYYY");
+ }else{
+ queryParams.value.timeCode = proxy.dayjs(new Date()).format("YYYY-MM-DD");
+ }
+
+}
+function handleEnergyType(item) {
+ queryParams.value.enername = item.enername;
+ queryParams.value.muid = item.muid;
+ handleQuery();
+}
+function handleAnalysisType(analysisType) {
+ queryParams.value.analysisType = analysisType;
+ getList();
+}
+// 鑳借�楀姣斿垎鏋�-鍒楄〃
+function getList() {
+ loading.value = true;
+ // 鍦ㄥ垵濮嬪寲涔嬪墠锛屽厛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"));
+ querySameCompareList(
+ proxy.addDateRange({
+ ...queryParams.value,
+ ...query.value,
+ })
+ ).then((res) => {
+ if (!!res.code && res.code == 200) {
+ loading.value = false;
+ let xdata = [];
+ let yvalue = [];
+ let ycompareValue = [];
+ let yqoq = [];
+ if (!!res.data) {
+ res.data.map((item) => {
+ xdata.push(
+ proxy
+ .dayjs(item.currentTime)
+ .format(
+ queryParams.value.timeType == "YEAR"? "MM鏈�": queryParams.value.timeType =="MONTH"? "DD鏃�": "HH鏃�"
+ )
+ );
+ yvalue.push(!!item.currentValue ? item.currentValue : 0);
+ ycompareValue.push(!!item.contrastValues? item.contrastValues : 0);
+ yqoq.push(!!item.ratio ? item.ratio : 0);
+ });
+ console.log(xdata)
+ }
+ setTimeout(() => {
+ myChart1.setOption({
+ color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
+ grid: {
+ top: "45",
+ left: "7%",
+ right: "5%",
+ bottom: "10",
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ legend: {
+ icon: "rect",
+ itemWidth: 14,
+ itemHeight: 10,
+ textStyle: {
+ color:
+ settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ },
+ },
+ xAxis: {
+ type: "category",
+ axisPointer: {
+ type: "shadow",
+ },
+ 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: [
+ {
+ type: "value",
+ name:
+ "鑰�" +
+ queryParams.value.enername +
+ "閲�(" +
+ queryParams.value.muid +
+ ")",
+ 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,
+ },
+ },
+ {
+ type: "value",
+ name: queryParams.value.analysisType == "YOY" ? "鍚屾瘮(%)" : "鐜瘮(%)",
+ alignTicks: true,
+ nameTextStyle: {
+ color:
+ settingsStore.sideTheme == "theme-dark"
+ ? "#FFFFFF"
+ : "#222222",
+ fontSize: 14,
+ padding: [0, 0, 5, 0],
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: "dashed",
+ color:
+ settingsStore.sideTheme == "theme-dark"
+ ? "#FFFFFF"
+ : "#222222",
+ },
+ },
+ splitArea: {
+ show: false,
+ },
+ axisLabel: {
+ color:
+ settingsStore.sideTheme == "theme-dark"
+ ? "#FFFFFF"
+ : "#222222",
+ fontSize: 14,
+ },
+ },
+ ],
+ series: [
+ {
+ name: "鏈湡鍊�",
+ type: "bar",
+ barWidth: "8",
+ tooltip: {
+ valueFormatter: function (value) {
+ return value + queryParams.value.muid;
+ },
+ },
+ itemStyle: {
+ borderRadius: [15, 15, 0, 0],
+ },
+ data: yvalue,
+ markPoint: {
+ data: [
+ { type: "max", name: "Max" },
+ { type: "min", name: "Min" },
+ ],
+ },
+ },
+ {
+ name: "鍚屾湡鍊�",
+ type: "bar",
+ barWidth: "8",
+ tooltip: {
+ valueFormatter: function (value) {
+ return value + queryParams.value.muid;
+ },
+ },
+ itemStyle: {
+ borderRadius: [15, 15, 0, 0],
+ },
+ data: ycompareValue,
+ markPoint: {
+ data: [
+ { type: "max", name: "Max" },
+ { type: "min", name: "Min" },
+ ],
+ },
+ },
+ {
+ name: queryParams.value.analysisType == "YOY" ? "鍚屾瘮" : "鐜瘮",
+ type: "line",
+ yAxisIndex: 1,
+ symbol: "none", // 璁剧疆涓� 'none' 鍘绘帀鍦嗙偣
+ tooltip: {
+ valueFormatter: function (value) {
+ return value + "%";
+ },
+ },
+ data: yqoq,
+ },
+ ],
+ });
+ }, 100);
+ departmentList.value = !!res.data ? res.data : [];
+ window.addEventListener(
+ "resize",
+ () => {
+ myChart1.resize();
+ },
+ { passive: true }
+ );
+ }
+ });
+ // listDepartment(
+ // proxy.addDateRange({
+ // ...queryParams.value,
+ // ...query.value,
+ // })
+ // ).then((res) => {
+ // if (!!res.code && res.code == 200) {
+ // loading.value = false;
+ // let seriesdata = [];
+ // let xdata = [];
+ // if (!!energyTypeList.value) {
+ // energyTypeList.value.map((item) => {
+ // seriesdata.push({
+ // name: item.enername,
+ // type: "bar",
+ // barWidth: "16",
+ // stack: "total",
+ // data: [],
+ // });
+ // });
+ // }
+ // if (!!res.data) {
+ // res.data.map((dataItem) => {
+ // xdata.push(dataItem.nodeName)
+ // seriesdata.forEach((seriesdataItem) => {
+ // if (
+ // dataItem.data.find(
+ // (dataItemItem) =>
+ // dataItemItem.energyTypeName == seriesdataItem.name
+ // ) == undefined
+ // ) {
+ // dataItem.data.push({
+ // nodeId: dataItem.nodeId,
+ // nodeName: dataItem.nodeName,
+ // energyTypeNo: null,
+ // energyTypeName: seriesdataItem.name,
+ // energyConsumption: 0,
+ // });
+ // }
+ // dataItem.data.map(dataItemItem => {
+ // if (seriesdataItem.name == dataItemItem.energyTypeName) {
+ // seriesdataItem.data.push(dataItemItem.energyConsumption)
+ // }
+ // })
+ // });
+ // });
+ // }
+ // setTimeout(() => {
+ // myChart2.setOption({
+ // color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
+ // grid: {
+ // top: "45",
+ // left: "17%",
+ // 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",
+ // },
+ // },
+ // xAxis: {
+ // nameLocation: "start",
+ // type: "value",
+ // name: "鍗曚綅tce",
+ // 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'
+ // },
+ // },
+ // yAxis: {
+ // type: "category",
+ // axisPointer: {
+ // type: "shadow",
+ // },
+ // 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.splice(0, 6),
+ // },
+ // series: seriesdata,
+ // });
+ // }, 100);
+ // window.addEventListener("resize", () => {
+ // myChart2.resize();
+ // },{passive: true});
+ // }
+ // });
+}
+// 鑳借�楀姣斿垎鏋�-绉戝鑳借�楀垎鏋�-鎼滅储
+function handleQuery() {
+ getList();
+}
+// 鑳借�楀姣斿垎鏋�-閲嶇疆
+function resetQuery() {
+ proxy.resetForm("queryRef");
+ handleTimeType(period.value[1].value);
+ queryParams.value.energyType = energyTypeList.value[0].enersno;
+ queryParams.value.enername = energyTypeList.value[0].enername;
+ queryParams.value.muid = energyTypeList.value[0].muid;
+ queryParams.value.analysisType = "YOY";
+ handleQuery();
+}
+// 鑳借�楀姣斿垎鏋�-绉戝鑳借�楀垎鏋�-瀵煎嚭
+function handleExport() {
+ proxy.download(
+ "consumptionanalysis/energyExport",
+ {
+ ...queryParams.value,
+ ...query.value,
+ },
+ `${queryParams.value.nodeName}-鍘傚尯鑳借�楀垎鏋恄${new Date().getTime()}.xlsx`
+ );
+}
+</script>
+<style scoped lang="scss">
+@import "@/assets/styles/page.scss";
+</style>
diff --git a/zhitan-vue/src/views/poweranalysis/perPassu/index.vue b/zhitan-vue/src/views/poweranalysis/perPassu/index.vue
new file mode 100644
index 0000000..a639577
--- /dev/null
+++ b/zhitan-vue/src/views/poweranalysis/perPassu/index.vue
@@ -0,0 +1,594 @@
+<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="timeType">
+ <el-select v-model="queryParams.timeType" placeholder="鏈熼棿" clearable style="width: 120px"
+ @change="handleTimeType">
+ <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鏃堕棿">
+ <el-date-picker v-model="queryParams.dataTime" :type="queryParams.timeType == 'YEAR'
+ ? 'year'
+ : queryParams.timeType == 'MONTH'
+ ? 'month'
+ : 'date'
+ " :format="queryParams.timeType == 'YEAR'
+ ? 'YYYY'
+ : queryParams.timeType == 'MONTH'
+ ? 'YYYY-MM'
+ : 'YYYY-MM-DD'
+ " value-format="YYYY-MM-DD" placeholder="鏃堕棿" style="width: 100%" />
+ </el-form-item>
+ <el-form-item label="鑳芥簮绫诲瀷" prop="energyType">
+ <el-select v-model="queryParams.energyType" placeholder="鑳芥簮绫诲瀷" clearable style="width: 120px">
+ <el-option :label="item.enername" :value="item.enersno" v-for="item in energyTypeList"
+ :key="item.enersno" @click="handleEnergyType(item)" />
+ </el-select>
+ </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="queryParams.analysisType == 'YOY' ? 'primary' : ''" @click="handleAnalysisType('YOY')">
+ 鍚屾瘮
+ </el-button>
+ <el-button :type="queryParams.analysisType == 'MOM' ? 'primary' : ''" @click="handleAnalysisType('MOM')">
+ 鐜瘮
+ </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 - 220px) !important;
+ max-height: calc(100vh - 220px) !important;
+ overflow-y: auto;
+ " v-loading="loading">
+
+ <BaseCard :title="queryParams.nodeName + '-鑳借�楀姣斿垎鏋�'">
+ <div class="chart-box">
+ <div id="Chart1" />
+ </div>
+ </BaseCard>
+
+ <BaseCard :title="queryParams.nodeName +
+ '-鑳借�楀姣斿垎鏋愮幆姣斿垎鏋愯〃-' +
+ queryParams.enername
+ ">
+ <div class="table-box">
+ <el-table :data="departmentList" show-summary>
+ <el-table-column label="鏈湡鏃堕棿" align="center" key="currentTime" prop="currentTime"
+ :show-overflow-tooltip="true" />
+ <el-table-column :label="'鏈湡鑰�' +
+ queryParams.enername +
+ '(' +
+ queryParams.muid +
+ ')'
+ " align="center" key="currentValue" prop="currentValue" :show-overflow-tooltip="true" />
+ <el-table-column label="鍚屾湡鏃堕棿" align="center" key="compareTime" prop="compareTime"
+ :show-overflow-tooltip="true" />
+ <el-table-column :label="'鍚屾湡鑰�' +
+ queryParams.enername +
+ '(' +
+ queryParams.muid +
+ ')'
+ " align="center" key="contrastValues" prop="contrastValues" :show-overflow-tooltip="true" />
+ <el-table-column :label="(queryParams.analysisType == 'YOY' ? '鍚�' : '鐜�') + '姣�(%)'
+ " align="center" key="ratio" prop="ratio" :show-overflow-tooltip="true" width="200" />
+ </el-table>
+ </div>
+ </BaseCard>
+ <!-- </el-col>
+ </el-row> -->
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup name="department">
+import {
+ listRegion,
+ listDepartment,
+ queryLoopCompareList,
+} from "@/api/energyAnalysis/energyAnalysis";
+import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
+import * as echarts from "echarts";
+const { proxy } = getCurrentInstance();
+const { period } = proxy.useDict("period");
+import { useRoute } from "vue-router";
+import useSettingsStore from "@/store/modules/settings";
+const settingsStore = useSettingsStore();
+watch(
+ () => settingsStore.sideTheme,
+ (val) => {
+ getList();
+ }
+);
+const energyTypeList = ref(undefined);
+const departmentList = ref([]);
+const loading = ref(false);
+const data = reactive({
+ queryParams: {
+ nodeId: null,
+ timeType: null,
+ dataTime: null,
+ analysisType: "MOM",
+ timeCode: null,
+ energyType: null,
+ },
+ query: {
+ modelCode: null,
+ },
+});
+const { queryParams, query } = toRefs(data);
+/** 鑺傜偣鍗曞嚮浜嬩欢 */
+function handleNodeClick(data) {
+ queryParams.value.nodeId = data.id;
+ queryParams.value.nodeName = data.label;
+ handleTimeType(period.value[1].value);
+ listEnergyTypeList().then((res) => {
+ energyTypeList.value = res.data;
+ queryParams.value.energyType = energyTypeList.value[0].enersno;
+ queryParams.value.enername = energyTypeList.value[0].enername;
+ queryParams.value.muid = energyTypeList.value[0].muid;
+ handleQuery();
+ });
+}
+function handleTimeType(e) {
+ queryParams.value.timeType = e;
+ if(e=='MONTH'){
+ queryParams.value.timeCode = proxy.dayjs(new Date()).format("YYYY-MM");
+ }else if(e=='YEAR'){
+ queryParams.value.timeCode = proxy.dayjs(new Date()).format("YYYY");
+ }else{
+ queryParams.value.timeCode = proxy.dayjs(new Date()).format("YYYY-MM-DD");
+ }
+}
+function handleEnergyType(item) {
+ queryParams.value.enername = item.enername;
+ queryParams.value.muid = item.muid;
+ handleQuery();
+}
+function handleAnalysisType(analysisType) {
+ queryParams.value.analysisType = analysisType;
+ getList();
+}
+// 鑳借�楀姣斿垎鏋�-鍒楄〃
+function getList() {
+ loading.value = true;
+ // 鍦ㄥ垵濮嬪寲涔嬪墠锛屽厛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"));
+ queryLoopCompareList(
+ proxy.addDateRange({
+ ...queryParams.value,
+ ...query.value,
+ })
+ ).then((res) => {
+ if (!!res.code && res.code == 200) {
+ loading.value = false;
+ let xdata = [];
+ let yvalue = [];
+ let ycompareValue = [];
+ let yqoq = [];
+ if (!!res.data) {
+ res.data.map((item) => {
+ xdata.push(
+ proxy
+ .dayjs(item.currentTime)
+ .format(
+ queryParams.value.timeType == "YEAR"
+ ? "MM鏈�"
+ : queryParams.value.timeType == "MONTH"
+ ? "DD鏃�"
+ : "HH鏃�"
+ )
+ );
+ yvalue.push(!!item.currentValue ? item.currentValue : 0);
+ ycompareValue.push(!!item.contrastValues ? item.contrastValues : 0);
+ yqoq.push(!!item.ratio ? item.ratio : 0);
+ });
+ }
+ setTimeout(() => {
+ myChart1.setOption({
+ color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
+ grid: {
+ top: "45",
+ left: "7%",
+ right: "5%",
+ bottom: "10",
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ legend: {
+ icon: "rect",
+ itemWidth: 14,
+ itemHeight: 10,
+ textStyle: {
+ color:
+ settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ },
+ },
+ xAxis: {
+ type: "category",
+ axisPointer: {
+ type: "shadow",
+ },
+ 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: [
+ {
+ type: "value",
+ name:
+ "鑰�" +
+ queryParams.value.enername +
+ "閲�(" +
+ queryParams.value.muid +
+ ")",
+ 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,
+ },
+ },
+ {
+ type: "value",
+ name: queryParams.value.analysisType == "YOY" ? "鍚屾瘮(%)" : "鐜瘮(%)",
+ alignTicks: true,
+ nameTextStyle: {
+ color:
+ settingsStore.sideTheme == "theme-dark"
+ ? "#FFFFFF"
+ : "#222222",
+ fontSize: 14,
+ padding: [0, 0, 5, 0],
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: "dashed",
+ color:
+ settingsStore.sideTheme == "theme-dark"
+ ? "#FFFFFF"
+ : "#222222",
+ },
+ },
+ splitArea: {
+ show: false,
+ },
+ axisLabel: {
+ color:
+ settingsStore.sideTheme == "theme-dark"
+ ? "#FFFFFF"
+ : "#222222",
+ fontSize: 14,
+ },
+ },
+ ],
+ series: [
+ {
+ name: "鏈湡鍊�",
+ type: "bar",
+ barWidth: "8",
+ tooltip: {
+ valueFormatter: function (value) {
+ return value + queryParams.value.muid;
+ },
+ },
+ itemStyle: {
+ borderRadius: [15, 15, 0, 0],
+ },
+ data: yvalue,
+ markPoint: {
+ data: [
+ { type: "max", name: "Max" },
+ { type: "min", name: "Min" },
+ ],
+ },
+ },
+ {
+ name: "鍚屾湡鍊�",
+ type: "bar",
+ barWidth: "8",
+ tooltip: {
+ valueFormatter: function (value) {
+ return value + queryParams.value.muid;
+ },
+ },
+ itemStyle: {
+ borderRadius: [15, 15, 0, 0],
+ },
+ data: ycompareValue,
+ markPoint: {
+ data: [
+ { type: "max", name: "Max" },
+ { type: "min", name: "Min" },
+ ],
+ },
+ },
+ {
+ name: queryParams.value.analysisType == "YOY" ? "鍚屾瘮" : "鐜瘮",
+ type: "line",
+ yAxisIndex: 1,
+ symbol: "none", // 璁剧疆涓� 'none' 鍘绘帀鍦嗙偣
+ tooltip: {
+ valueFormatter: function (value) {
+ return value + "%";
+ },
+ },
+ data: yqoq,
+ },
+ ],
+ });
+ }, 100);
+ departmentList.value = !!res.data ? res.data : [];
+ window.addEventListener(
+ "resize",
+ () => {
+ myChart1.resize();
+ },
+ { passive: true }
+ );
+ }
+ });
+ // listDepartment(
+ // proxy.addDateRange({
+ // ...queryParams.value,
+ // ...query.value,
+ // })
+ // ).then((res) => {
+ // if (!!res.code && res.code == 200) {
+ // loading.value = false;
+ // let seriesdata = [];
+ // let xdata = [];
+ // if (!!energyTypeList.value) {
+ // energyTypeList.value.map((item) => {
+ // seriesdata.push({
+ // name: item.enername,
+ // type: "bar",
+ // barWidth: "16",
+ // stack: "total",
+ // data: [],
+ // });
+ // });
+ // }
+ // if (!!res.data) {
+ // res.data.map((dataItem) => {
+ // xdata.push(dataItem.nodeName)
+ // seriesdata.forEach((seriesdataItem) => {
+ // if (
+ // dataItem.data.find(
+ // (dataItemItem) =>
+ // dataItemItem.energyTypeName == seriesdataItem.name
+ // ) == undefined
+ // ) {
+ // dataItem.data.push({
+ // nodeId: dataItem.nodeId,
+ // nodeName: dataItem.nodeName,
+ // energyTypeNo: null,
+ // energyTypeName: seriesdataItem.name,
+ // energyConsumption: 0,
+ // });
+ // }
+ // dataItem.data.map(dataItemItem => {
+ // if (seriesdataItem.name == dataItemItem.energyTypeName) {
+ // seriesdataItem.data.push(dataItemItem.energyConsumption)
+ // }
+ // })
+ // });
+ // });
+ // }
+ // setTimeout(() => {
+ // myChart2.setOption({
+ // color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
+ // grid: {
+ // top: "45",
+ // left: "17%",
+ // 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",
+ // },
+ // },
+ // xAxis: {
+ // nameLocation: "start",
+ // type: "value",
+ // name: "鍗曚綅tce",
+ // 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'
+ // },
+ // },
+ // yAxis: {
+ // type: "category",
+ // axisPointer: {
+ // type: "shadow",
+ // },
+ // 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.splice(0, 6),
+ // },
+ // series: seriesdata,
+ // });
+ // }, 100);
+ // window.addEventListener("resize", () => {
+ // myChart2.resize();
+ // },{passive: true});
+ // }
+ // });
+}
+// 鑳借�楀姣斿垎鏋�-鎼滅储
+function handleQuery() {
+ getList();
+}
+// 鑳借�楀姣斿垎鏋�-閲嶇疆
+function resetQuery() {
+ proxy.resetForm("queryRef");
+ handleTimeType(period.value[1].value);
+ queryParams.value.energyType = energyTypeList.value[0].enersno;
+ queryParams.value.enername = energyTypeList.value[0].enername;
+ queryParams.value.muid = energyTypeList.value[0].muid;
+ queryParams.value.analysisType = "MOM";
+ handleQuery();
+}
+// 鑳借�楀姣斿垎鏋�-瀵煎嚭
+function handleExport() {
+ proxy.download(
+ "consumptionanalysis/energyExport",
+ {
+ ...queryParams.value,
+ ...query.value,
+ },
+ `${queryParams.value.nodeName}-鍘傚尯鑳借�楀垎鏋恄${new Date().getTime()}.xlsx`
+ );
+}
+</script>
+<style scoped lang="scss">
+@import "@/assets/styles/page.scss";
+</style>
--
Gitblit v1.9.3