From 01f037508f51cf1380a8af0c1159940b078eedb8 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期三, 01 四月 2026 17:29:10 +0800
Subject: [PATCH] 首页部分修改
---
src/views/index.vue | 195 ++++++++++++++++++++++++++++++++----------------
1 files changed, 130 insertions(+), 65 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index 65babe5..bd0d274 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -2,9 +2,9 @@
<div class="home-page">
<div class="top-bar">
<div class="user-box">
- <!-- <img :src="userStore.avatar"
+ <img :src="userStore.avatar"
class="avatar"
- alt="" /> -->
+ alt="" />
<div>
<div class="hello">{{ userStore.roleName || "绯荤粺绠＄悊鍛�" }}锛屼綘濂�</div>
<div class="sub">鐧诲綍鏃堕棿锛歿{ userStore.currentLoginTime }}</div>
@@ -61,33 +61,17 @@
</section>
<section class="section-card flex-fill-card">
<div class="section-title-row">
- <div class="section-title">浠婃棩寰呭鐞�</div>
+ <div class="section-title">浠婂勾閿�鍞噾棰濆垎鏋�</div>
<el-radio-group v-model="pendingFilter"
size="small">
- <el-radio-button label="all">鍏ㄩ儴</el-radio-button>
- <el-radio-button label="mine">鎴戠殑</el-radio-button>
- <el-radio-button label="high">楂樹紭鍏�</el-radio-button>
+ <el-radio-button label="mine">鏉挎潗</el-radio-button>
+ <el-radio-button label="high">鐮屽潡</el-radio-button>
</el-radio-group>
</div>
- <div class="task-row"
- v-for="task in filteredPendingTasks"
- :key="task.id">
- <div class="task-left">
- <el-tag size="small"
- :type="task.type">{{ task.level }}</el-tag>
- <span class="task-title">{{ task.title }}</span>
- </div>
- <el-button link
- type="primary"
- @click="goTo(task.path)">鍘诲鐞�</el-button>
- </div>
- <el-empty v-if="filteredPendingTasks.length === 0"
- description="鏆傛棤寰呭鐞嗕簨椤�"
- :image-size="80" />
</section>
</div>
<div class="right-col">
- <section class="section-card"
+ <!-- <section class="section-card"
v-if="isSectionVisible('trendCards')">
<div class="section-title">鏈�杩�7澶╁叧閿寚鏍囪秼鍔�</div>
<div class="trend-cards">
@@ -111,7 +95,7 @@
</div>
</div>
</div>
- </section>
+ </section> -->
<section class="section-card"
v-if="isSectionVisible('planTrend')">
<div class="section-title-row">
@@ -137,34 +121,25 @@
v-if="isSectionVisible('qualityChart') || isSectionVisible('costChart')">
<section class="section-card"
v-if="isSectionVisible('qualityChart')">
- <div class="section-title-row">
- <div class="section-title">璐ㄦ寮傚父鍒嗗竷</div>
- <el-radio-group v-model="chartRangeQuality"
- size="small"
- @change="loadQualityData">
- <el-radio-button :label="1">鍛�</el-radio-button>
- <el-radio-button :label="2">鏈�</el-radio-button>
- <el-radio-button :label="3">瀛ｅ害</el-radio-button>
- </el-radio-group>
- </div>
+ <div class="section-title">浠婂勾鑳借�楃敤閲忚秼鍔�</div>
<Echarts :chartStyle="chartStyle"
:grid="grid"
:tooltip="barTooltip"
- :xAxis="qualityXAxis"
+ :xAxis="energyConsumptionXAxis"
:yAxis="valueYAxis"
- :series="qualitySeries"
+ :series="energyConsumptionSeries"
style="height: 260px" />
</section>
<section class="section-card"
v-if="isSectionVisible('costChart')">
- <div class="section-title">鑳借�楃被鍨嬪崰姣�</div>
+ <div class="section-title">浠婂勾鑳借�楃被鍨嬪崰姣�</div>
<Echarts :chartStyle="chartStyle"
:tooltip="pieTooltip"
:series="energyTypeSeries"
style="height: 260px" />
</section>
</div>
- <section class="section-card"
+ <!-- <section class="section-card"
v-if="isSectionVisible('warningCenter')">
<div class="section-title">寮傚父棰勮涓績</div>
<div class="warning-row"
@@ -182,7 +157,7 @@
<el-empty v-if="warningList.length === 0"
description="鏆傛棤寮傚父棰勮"
:image-size="80" />
- </section>
+ </section> -->
<section class="section-card mini-table-wrap"
v-if="isSectionVisible('planTable')">
<div class="section-title">鐢熶骇璁″垝鎵ц鏄庣粏</div>
@@ -298,6 +273,7 @@
qualityInspectionStatistics,
nonComplianceWarning,
} from "@/api/viewIndex.js";
+ import { energyConsumptionDetailStatistics } from "@/api/energyManagement/energyType";
const router = useRouter();
const userStore = useUserStore();
@@ -566,6 +542,36 @@
},
]);
+ // 鑳借�楃敤閲忚秼鍔垮浘琛�
+ const energyConsumptionXAxis = reactive({
+ type: "category",
+ data: [],
+ axisLabel: {
+ rotate: 45,
+ },
+ });
+
+ const energyConsumptionSeries = reactive([
+ {
+ name: "鐢ㄦ按閲�",
+ type: "bar",
+ data: [],
+ itemStyle: { color: "#409EFF" },
+ },
+ {
+ name: "鐢ㄧ數閲�",
+ type: "bar",
+ data: [],
+ itemStyle: { color: "#E6A23C" },
+ },
+ {
+ name: "鐢ㄦ皵閲�",
+ type: "bar",
+ data: [],
+ itemStyle: { color: "#67C23A" },
+ },
+ ]);
+
// 妯℃嫙鑳借�楁暟鎹�
const energyData = reactive({
water: 120,
@@ -573,28 +579,87 @@
gas: 80,
});
- // 鏇存柊鑳借�楃被鍨嬪崰姣斿浘琛�
+ // 鏇存柊鑳借�楃被鍨嬪崰姣斿浘琛ㄥ拰鑳借�楃敤閲忚秼鍔垮浘琛�
const updateEnergyTypeChart = () => {
- const { water, electricity, gas } = energyData;
- const total = water + electricity + gas;
+ // 鏋勫缓鍙傛暟锛氫粖骞寸殑骞村垵鍒板勾鏈互鍙婂ぉ鏁�
+ const currentYear = new Date().getFullYear();
+ const params = {
+ startDate: `${currentYear}-01-01`,
+ endDate: `${currentYear}-12-31`,
+ days: 365,
+ state: "骞�",
+ };
- energyTypeSeries[0].data = [
- {
- value: total > 0 ? ((water / total) * 100).toFixed(2) : 0,
- name: "姘�",
- itemStyle: { color: "#409EFF" },
- },
- {
- value: total > 0 ? ((electricity / total) * 100).toFixed(2) : 0,
- name: "鐢�",
- itemStyle: { color: "#E6A23C" },
- },
- {
- value: total > 0 ? ((gas / total) * 100).toFixed(2) : 0,
- name: "姘�",
- itemStyle: { color: "#F56C6C" },
- },
- ];
+ // 璋冪敤鎺ュ彛鑾峰彇鏁版嵁
+ energyConsumptionDetailStatistics(params)
+ .then(res => {
+ if (res.code === 200) {
+ const data = res.data;
+ // 澶勭悊鑳借�楃被鍨嬪崰姣旀暟鎹�
+ const energyTypeData = data.energyCostDtos || [];
+
+ // 璁＄畻鍚勮兘鑰楃被鍨嬬殑鎬绘秷鑰楅噺
+ let total = 0;
+ const typeMap = {
+ 姘�: 0,
+ 鐢�: 0,
+ 姘�: 0,
+ };
+
+ // 鍑嗗鑳借�楃敤閲忚秼鍔垮浘琛ㄦ暟鎹�
+ const dates = [];
+ const waterConsumptionData = [];
+ const electricityConsumptionData = [];
+ const gasConsumptionData = [];
+
+ energyTypeData.forEach(item => {
+ // 鏀堕泦鏃ユ湡鍜屽悇鑳借�楃被鍨嬫暟鎹�
+ if (item.meterReadingDate) {
+ dates.push(item.meterReadingDate);
+ waterConsumptionData.push(item.waterConsumption || 0);
+ electricityConsumptionData.push(item.electricityConsumption || 0);
+ gasConsumptionData.push(item.gasConsumption || 0);
+ }
+
+ // 璁＄畻鎬绘秷鑰楅噺
+ if (item.waterConsumption)
+ typeMap.姘� += Number(item.waterConsumption);
+ if (item.electricityConsumption)
+ typeMap.鐢� += Number(item.electricityConsumption);
+ if (item.gasConsumption) typeMap.姘� += Number(item.gasConsumption);
+ });
+
+ total = typeMap.姘� + typeMap.鐢� + typeMap.姘�;
+
+ // 鏇存柊鑳借�楃被鍨嬪崰姣斿浘琛ㄦ暟鎹�
+ energyTypeSeries[0].data = [
+ {
+ value: total > 0 ? ((typeMap.姘� / total) * 100).toFixed(2) : 0,
+ name: "姘�",
+ itemStyle: { color: "#409EFF" },
+ },
+ {
+ value: total > 0 ? ((typeMap.鐢� / total) * 100).toFixed(2) : 0,
+ name: "鐢�",
+ itemStyle: { color: "#E6A23C" },
+ },
+ {
+ value: total > 0 ? ((typeMap.姘� / total) * 100).toFixed(2) : 0,
+ name: "姘�",
+ itemStyle: { color: "#F56C6C" },
+ },
+ ];
+
+ // 鏇存柊鑳借�楃敤閲忚秼鍔垮浘琛ㄦ暟鎹�
+ energyConsumptionXAxis.data = dates;
+ energyConsumptionSeries[0].data = waterConsumptionData;
+ energyConsumptionSeries[1].data = electricityConsumptionData;
+ energyConsumptionSeries[2].data = gasConsumptionData;
+ }
+ })
+ .catch(err => {
+ console.error("鑾峰彇鑳借�楁暟鎹紓甯革細", err);
+ });
};
const planTable = reactive([]);
@@ -1030,19 +1095,19 @@
};
const refreshDashboardData = () => {
- loadHomeTodos();
- loadOrderAndProgress();
- loadPlanTrend();
- loadQualityData();
- loadCostComposition();
- loadWarningCenter();
+ // loadHomeTodos();
+ // loadOrderAndProgress();
+ // loadPlanTrend();
+ // loadQualityData();
+ // loadCostComposition();
+ // loadWarningCenter();
updateEnergyTypeChart();
lastUpdatedAt.value = new Date().toLocaleString();
};
onMounted(() => {
// initSectionConfig();
- // refreshDashboardData();
+ refreshDashboardData();
});
</script>
--
Gitblit v1.9.3