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/buildingConsumption/branch-build/index.vue | 306 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 306 insertions(+), 0 deletions(-) diff --git a/zhitan-vue/src/views/buildingConsumption/branch-build/index.vue b/zhitan-vue/src/views/buildingConsumption/branch-build/index.vue new file mode 100644 index 0000000..f5670c0 --- /dev/null +++ b/zhitan-vue/src/views/buildingConsumption/branch-build/index.vue @@ -0,0 +1,306 @@ +<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="鑳芥簮绫诲瀷" 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="warning" 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=""> + <!-- <div id="Chart1" /> --> + <line-chart ref="LineChartRef" :chartData="lineChartData" :chartType="'bar'" /> + </div> + </BaseCard> + <BaseCard :title="queryParams.nodeName + '-鏀矾鐢ㄨ兘璇︽儏-' + queryParams.enername"> + <div class="table-box"> + <!-- show-summary --> + <el-table :data="departmentList"> + <el-table-column label="鑺傜偣" align="center" key="nodeName" prop="nodeName" fixed="left" /> + <el-table-column label="鍚堣" align="center" key="total" prop="total" width="100" fixed="left" /> + <template v-if="queryParams.timeType == 'DAY'"> + <el-table-column + v-for="index in 24" + :key="index" + :label="index - 1 + '鏃�'" + align="center" + min-width="130" + > + <template #default="scope">{{ scope.row[`value${index - 1}`] }}</template> + </el-table-column> + </template> + <template v-if="queryParams.timeType == 'MONTH'"> + <el-table-column + v-for="index in 31" + :key="index" + :label="index + '鏃�'" + align="center" + min-width="130" + > + <template #default="scope">{{ scope.row[`value${index - 1}`] }}</template> + </el-table-column> + </template> + <template v-if="queryParams.timeType == 'YEAR'"> + <el-table-column + v-for="index in 12" + :key="index" + :label="index + '鏈�'" + align="center" + min-width="130" + > + <template #default="scope">{{ scope.row[`value${index - 1}`] }}</template> + </el-table-column> + </template> + </el-table> + </div> + </BaseCard> + <!-- </el-col> + </el-row> --> + </div> + </div> + </div> + </div> +</template> + +<script setup name="branchanalysis"> +import buildApi from "@/api/buildingConsumption/api" +import { listEnergyTypeList } from "@/api/modelConfiguration/energyType" +import LineChart from "@/components/Echarts/LineChart.vue" +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, + energyType: null, + }, + query: { + modelCode: null, + }, +}) +const { queryParams, query } = toRefs(data) +const itemBuildData = ref({}) +const LineChartRef = ref() +const lineChartData = ref({}) +/** 鑺傜偣鍗曞嚮浜嬩欢 */ +function handleNodeClick(data) { + queryParams.value.nodeId = data.id + queryParams.value.nodeName = data.label + handleTimeType(period.value[0].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 + queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD") + handleQuery() +} +function handleEnergyType(item) { + queryParams.value.enername = item.enername + queryParams.value.muid = item.muid + handleQuery() +} +function getList() { + loading.value = true + buildApi + .branchanalysis( + proxy.addDateRange({ + ...queryParams.value, + ...query.value, + }) + ) + .then((res) => { + if (!!res.code && res.code == 200) { + loading.value = false + let yData = [] + let xData = [] + if (!!res.data) { + departmentList.value = [res.data] || [] + } + let dataList = res.data || {} + if (queryParams.value.timeType == "DAY") { + for (let i = 0; i < 24; i++) { + xData.push(i + "鏃�") + yData.push(dataList[`value${i}`]) + } + } else if (queryParams.value.timeType == "MONTH") { + for (let i = 0; i < 31; i++) { + xData.push(i + 1 + "鏃�") + yData.push(dataList[`value${i}`]) + } + } else { + for (let i = 0; i < 12; i++) { + xData.push(i + 1 + "鏈�") + yData.push(dataList[`value${i}`]) + } + } + + lineChartData.value = { + title: queryParams.value.muid, + xAxis: xData, + series: [ + { + name: queryParams.value.enername, + data: yData, + }, + ], + } + } + }) + .catch(() => { + loading.value = false + }) +} +function numFilter(value) { + // 鎴彇褰撳墠鏁版嵁鍒板皬鏁扮偣鍚庣殑鍑犱綅 + let realVal = "" + if (!isNaN(value) && value !== "" && value !== null) { + realVal = parseFloat(value).toFixed(2) + } else { + realVal = "--" + } + return realVal +} +// 鑳借�楀姣斿垎鏋�-绉戝鑳借�楀垎鏋�-鎼滅储 +function handleQuery() { + getList() +} +// 鑳借�楀姣斿垎鏋�-绉戝鑳借�楀垎鏋�-閲嶇疆 +function resetQuery() { + proxy.resetForm("queryRef") + handleTimeType(period.value[0].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"; +.el-tabs { + padding: 0 12px; + margin-top: 12px; + :deep(.el-tabs__header) { + margin: 0; + } +} + +.themeDark { + .build-sum { + border: 1px solid #8c8b8b; + display: flex; + justify-content: space-between; + align-items: center; + color: #fff; + .build-sum-item { + width: 25%; + text-align: center; + padding: 12px 0; + .count { + font-size: 24px; + font-weight: 600; + margin-top: 8px; + color: #409eff; + } + } + } +} +.themeLight { + .build-sum { + border: 1px solid #eaeaea; + display: flex; + justify-content: space-between; + align-items: center; + color: #333; + .build-sum-item { + width: 25%; + text-align: center; + padding: 12px 0; + .count { + font-size: 24px; + font-weight: 600; + margin-top: 8px; + color: #409eff; + } + } + } +} +</style> -- Gitblit v1.9.3