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/poweranalysis/pariPassu/index.vue | 580 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 580 insertions(+), 0 deletions(-)
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..1da4671
--- /dev/null
+++ b/zhitan-vue/src/views/poweranalysis/pariPassu/index.vue
@@ -0,0 +1,580 @@
+<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" style="padding-top: 12px">
+ <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("MONTH")
+ 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.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
+ } else if (e == "YEAR") {
+ queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
+ } else {
+ queryParams.value.dataTime = 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,
+ timeCode: queryParams.value.dataTime,
+ })
+ ).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: "4%",
+ 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>
--
Gitblit v1.9.3