From e0699ce1a404b1d819d7ef0b40cfd2631bb964d1 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期四, 12 三月 2026 17:56:06 +0800
Subject: [PATCH] 问题修改
---
src/views/reportAnalysis/unitEnergyConsumption/index.vue | 405 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 405 insertions(+), 0 deletions(-)
diff --git a/src/views/reportAnalysis/unitEnergyConsumption/index.vue b/src/views/reportAnalysis/unitEnergyConsumption/index.vue
new file mode 100644
index 0000000..9399bf6
--- /dev/null
+++ b/src/views/reportAnalysis/unitEnergyConsumption/index.vue
@@ -0,0 +1,405 @@
+<template>
+ <div class="app-container">
+ <!-- 鎼滅储鍖哄煙 -->
+ <div class="search_form">
+ <el-form :model="searchForm"
+ :inline="true">
+ <el-form-item label="骞翠唤:">
+ <el-select v-model="searchForm.year"
+ placeholder="璇烽�夋嫨骞翠唤"
+ style="width: 120px;"
+ @change="handleQuery">
+ <el-option v-for="year in years"
+ :key="year"
+ :label="year + '骞�'"
+ :value="year" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鑳借�楃被鍨�:">
+ <el-select v-model="searchForm.energyType"
+ placeholder="鍏ㄩ儴"
+ clearable
+ style="width: 140px;"
+ @change="handleQuery">
+ <el-option label="鍏ㄩ儴"
+ value="鍏ㄩ儴" />
+ <el-option label="姘�"
+ value="姘�" />
+ <el-option label="鐢�"
+ value="鐢�" />
+ <el-option label="钂告苯"
+ value="钂告苯" />
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary"
+ @click="handleQuery">鏌ヨ</el-button>
+ <el-button @click="handleReset">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+ <div>
+ <el-button type="success"
+ @click="handleExport">瀵煎嚭鎶ヨ〃</el-button>
+ </div>
+ </div>
+ <!-- 鍥捐〃鍖哄煙 -->
+ <div class="chart-section">
+ <h2 class="section-header">
+ <el-icon class="header-icon">
+ <TrendCharts />
+ </el-icon>
+ 鑳借�楀崟鑰楄秼鍔�
+ </h2>
+ <div class="chart-card">
+ <div ref="consumptionChart"
+ class="chart-content"></div>
+ </div>
+ </div>
+ <!-- 鏁版嵁琛ㄦ牸 -->
+ <div class="table-section">
+ <h2 class="section-header">
+ <el-icon class="header-icon">
+ <List />
+ </el-icon>
+ 鑳借�楀崟鑰楁暟鎹�
+ </h2>
+ <el-table :data="tableData"
+ v-loading="tableLoading"
+ border>
+ <el-table-column prop="energyType"
+ label="鑳借��"
+ width="100"
+ align="center">
+ <template #default="scope">
+ <el-tag :type="getEnergyTypeType(scope.row.energyType)">
+ {{ scope.row.energyType }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column prop="unit"
+ label="鍗曚綅"
+ width="120"
+ align="center" />
+ <el-table-column label="鏈堝害鏁版嵁">
+ <el-table-column prop="monthlyUnitConsumption"
+ label="鏈堝害绱鍗曡��"
+ align="right">
+ <template #default="scope">
+ <span class="data-value">{{ scope.row.monthlyUnitConsumption }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="monthlyConsumption"
+ label="鏈堝害绱鐢ㄩ噺/鏈堝害绱浜ч噺"
+ align="right">
+ <template #default="scope">
+ <span class="data-value">{{ scope.row.monthlyConsumption }}/{{ scope.row.monthlyProduction }}</span>
+ </template>
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="骞村害鏁版嵁">
+ <el-table-column prop="annualUnitConsumption"
+ label="骞村害绱鍗曡��"
+ align="right">
+ <template #default="scope">
+ <span class="data-value">{{ scope.row.annualUnitConsumption }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="annualConsumption"
+ label="骞村害绱鐢ㄩ噺/骞村害绱浜ч噺"
+ align="right">
+ <template #default="scope">
+ <span class="data-value">{{ scope.row.annualConsumption }}/{{ scope.row.annualProduction }}</span>
+ </template>
+ </el-table-column>
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
+</template>
+
+<script setup>
+ import { ref, reactive, onMounted, nextTick } from "vue";
+ import { ElMessage } from "element-plus";
+ import { TrendCharts, List } from "@element-plus/icons-vue";
+ import * as echarts from "echarts";
+
+ // 鎼滅储琛ㄥ崟
+ const searchForm = reactive({
+ year: new Date().getFullYear(),
+ energyType: "",
+ });
+
+ // 鐢熸垚骞翠唤閫夐」
+ const years = [];
+ const currentYear = new Date().getFullYear();
+ for (let i = currentYear - 5; i <= currentYear; i++) {
+ years.push(i);
+ }
+
+ // 琛ㄦ牸鏁版嵁
+ const tableData = ref([]);
+ const tableLoading = ref(false);
+
+ // 鍥捐〃寮曠敤
+ const consumptionChart = ref(null);
+ let consumptionChartInstance = null;
+
+ // 鑾峰彇鑳借�楃被鍨嬫爣绛剧被鍨�
+ const getEnergyTypeType = type => {
+ const typeMap = {
+ 姘�: "primary",
+ 鐢�: "warning",
+ 钂告苯: "success",
+ };
+ return typeMap[type] || "info";
+ };
+
+ // 鍒濆鍖栧浘琛�
+ const initChart = () => {
+ nextTick(() => {
+ if (consumptionChart.value) {
+ consumptionChartInstance = echarts.init(consumptionChart.value);
+ updateChart();
+ }
+ });
+ };
+
+ // 鏇存柊鍥捐〃
+ const updateChart = () => {
+ const data = tableData.value;
+ const months = [
+ "1鏈�",
+ "2鏈�",
+ "3鏈�",
+ "4鏈�",
+ "5鏈�",
+ "6鏈�",
+ "7鏈�",
+ "8鏈�",
+ "9鏈�",
+ "10鏈�",
+ "11鏈�",
+ "12鏈�",
+ ];
+
+ // 鍑嗗鍥捐〃鏁版嵁
+ const series = [];
+ const energyTypes = ["姘�", "鐢�", "钂告苯"];
+
+ energyTypes.forEach(type => {
+ const typeData = data.find(item => item.energyType === type);
+ if (typeData && typeData.monthlyData) {
+ series.push({
+ name: type,
+ type: "line",
+ data: typeData.monthlyData.map(item => item.unitConsumption),
+ smooth: true,
+ symbol: "circle",
+ symbolSize: 8,
+ lineStyle: {
+ width: 3,
+ },
+ itemStyle: {
+ color:
+ getEnergyTypeType(type) === "primary"
+ ? "#409EFF"
+ : getEnergyTypeType(type) === "warning"
+ ? "#E6A23C"
+ : "#67C23A",
+ },
+ });
+ }
+ });
+
+ const option = {
+ tooltip: {
+ trigger: "axis",
+ backgroundColor: "rgba(255, 255, 255, 0.95)",
+ borderColor: "#409EFF",
+ borderWidth: 1,
+ textStyle: { color: "#303133" },
+ },
+ legend: {
+ data: energyTypes,
+ top: 0,
+ right: 10,
+ textStyle: { color: "#606266" },
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "10%",
+ top: "15%",
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ data: months,
+ axisLabel: { color: "#606266" },
+ axisLine: { lineStyle: { color: "#ebeef5" } },
+ splitLine: { show: false },
+ },
+ yAxis: {
+ type: "value",
+ name: "鍗曡��",
+ nameTextStyle: { color: "#606266" },
+ axisLabel: { color: "#606266" },
+ axisLine: { show: false },
+ splitLine: { lineStyle: { color: "#f0f2f5" } },
+ },
+ series: series,
+ };
+
+ consumptionChartInstance.setOption(option);
+ };
+
+ // 鏌ヨ
+ const handleQuery = () => {
+ tableLoading.value = true;
+
+ // 妯℃嫙鎺ュ彛璋冪敤
+ setTimeout(() => {
+ generateMockData();
+ tableLoading.value = false;
+ updateChart();
+ }, 500);
+ };
+
+ // 閲嶇疆
+ const handleReset = () => {
+ searchForm.year = new Date().getFullYear();
+ searchForm.energyType = "";
+ handleQuery();
+ };
+
+ // 瀵煎嚭
+ const handleExport = () => {
+ ElMessage.success("鎶ヨ〃瀵煎嚭鎴愬姛");
+ };
+
+ // 鐢熸垚鍋囨暟鎹�
+ const generateMockData = () => {
+ const energyTypes = [
+ {
+ energyType: "姘�",
+ unit: "鍚�/绔嬫柟绫�",
+ monthlyUnitConsumption: (Math.random() * 0.5 + 0.8).toFixed(4),
+ monthlyConsumption: Math.floor(Math.random() * 5000 + 10000),
+ monthlyProduction: Math.floor(Math.random() * 10000 + 20000),
+ annualUnitConsumption: (Math.random() * 0.3 + 0.9).toFixed(4),
+ annualConsumption: Math.floor(Math.random() * 60000 + 120000),
+ annualProduction: Math.floor(Math.random() * 120000 + 240000),
+ monthlyData: generateMonthlyData(0.8, 1.3),
+ },
+ {
+ energyType: "鐢�",
+ unit: "搴�/绔嬫柟绫�",
+ monthlyUnitConsumption: (Math.random() * 2 + 5).toFixed(4),
+ monthlyConsumption: Math.floor(Math.random() * 50000 + 100000),
+ monthlyProduction: Math.floor(Math.random() * 10000 + 20000),
+ annualUnitConsumption: (Math.random() * 1.5 + 5.5).toFixed(4),
+ annualConsumption: Math.floor(Math.random() * 600000 + 1200000),
+ annualProduction: Math.floor(Math.random() * 120000 + 240000),
+ monthlyData: generateMonthlyData(5, 7),
+ },
+ {
+ energyType: "钂告苯",
+ unit: "鍚�/绔嬫柟绫�",
+ monthlyUnitConsumption: (Math.random() * 0.3 + 0.5).toFixed(4),
+ monthlyConsumption: Math.floor(Math.random() * 3000 + 6000),
+ monthlyProduction: Math.floor(Math.random() * 10000 + 20000),
+ annualUnitConsumption: (Math.random() * 0.2 + 0.55).toFixed(4),
+ annualConsumption: Math.floor(Math.random() * 36000 + 72000),
+ annualProduction: Math.floor(Math.random() * 120000 + 240000),
+ monthlyData: generateMonthlyData(0.5, 0.8),
+ },
+ ];
+
+ if (searchForm.energyType && searchForm.energyType !== "鍏ㄩ儴") {
+ tableData.value = energyTypes.filter(
+ item => item.energyType === searchForm.energyType
+ );
+ } else {
+ tableData.value = energyTypes;
+ }
+ };
+
+ // 鐢熸垚鏈堝害鏁版嵁
+ const generateMonthlyData = (min, max) => {
+ const data = [];
+ for (let i = 1; i <= 12; i++) {
+ data.push({
+ month: i,
+ unitConsumption: (Math.random() * (max - min) + min).toFixed(4),
+ });
+ }
+ return data;
+ };
+
+ // 绐楀彛澶у皬鍙樺寲鏃堕噸鏂版覆鏌撳浘琛�
+ const handleResize = () => {
+ consumptionChartInstance && consumptionChartInstance.resize();
+ };
+
+ onMounted(() => {
+ handleQuery();
+ initChart();
+ window.addEventListener("resize", handleResize);
+ });
+</script>
+
+<style scoped lang="scss">
+ .app-container {
+ padding: 20px;
+ }
+
+ .search_form {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+ padding: 15px;
+ background-color: #f5f7fa;
+ border-radius: 8px;
+ }
+
+ .chart-section {
+ margin-bottom: 30px;
+ }
+
+ .table-section {
+ margin-bottom: 20px;
+ }
+
+ .section-header {
+ display: flex;
+ align-items: center;
+ font-size: 18px;
+ font-weight: bold;
+ color: #303133;
+ margin-bottom: 15px;
+ padding-left: 10px;
+ border-left: 3px solid #409eff;
+
+ .header-icon {
+ margin-right: 8px;
+ color: #409eff;
+ }
+ }
+
+ .chart-card {
+ background: #fff;
+ border-radius: 4px;
+ border: 1px solid #ebeef5;
+ padding: 20px;
+
+ .chart-content {
+ height: 400px;
+ }
+ }
+
+ .data-value {
+ font-weight: bold;
+ color: #409eff;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3