From d7ea471fbb4a834b69715cac684bab7d2731688b Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期二, 17 三月 2026 16:32:50 +0800
Subject: [PATCH] 能耗成本核算注释假数据获取方法
---
src/views/reportAnalysis/productionStatistics/index.vue | 1003 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 1,003 insertions(+), 0 deletions(-)
diff --git a/src/views/reportAnalysis/productionStatistics/index.vue b/src/views/reportAnalysis/productionStatistics/index.vue
new file mode 100644
index 0000000..cf00f0f
--- /dev/null
+++ b/src/views/reportAnalysis/productionStatistics/index.vue
@@ -0,0 +1,1003 @@
+<template>
+ <div class="dashboard-container">
+ <div class="data-dashboard">
+ <!-- 椤堕儴鏍囬鏍� -->
+ <!-- <div class="dashboard-header">
+ <div class="factory-name">鐢熶骇缁熻鐪嬫澘</div>
+ </div> -->
+ <!-- 绛涢�夊尯鍩� -->
+ <div class="filter-area">
+ <div class="filter-section">
+ <span class="filter-label">鏃堕棿缁村害锛�</span>
+ <el-radio-group v-model="dateType"
+ @change="handleDateTypeChange"
+ class="radio-group">
+ <el-radio-button label="month">鏈堝害</el-radio-button>
+ <el-radio-button label="year">骞村害</el-radio-button>
+ </el-radio-group>
+ </div>
+ <div class="filter-section">
+ <span class="filter-label">浜у搧绫诲瀷锛�</span>
+ <el-radio-group v-model="productType"
+ @change="handleProductTypeChange"
+ class="radio-group">
+ <el-radio-button label="block">鐮屽潡</el-radio-button>
+ <el-radio-button label="plate">鏉挎潗</el-radio-button>
+ </el-radio-group>
+ </div>
+ </div>
+ <!-- 涓昏鍐呭鍖哄煙 -->
+ <div class="dashboard-content">
+ <!-- 绗竴琛� -->
+ <div class="row row-1">
+ <div class="panel-card card-1">
+ <div class="panel-title">浜ч噺鎸囨爣</div>
+ <div class="chart-container">
+ <div ref="productionChart"
+ style="width: 100%; height: 100%"></div>
+ </div>
+ </div>
+ <div class="panel-card card-2">
+ <div class="panel-title">鍥哄簾澶勭悊閲�</div>
+ <div class="chart-container">
+ <div ref="solidWasteChart"
+ style="width: 100%; height: 100%"></div>
+ </div>
+ </div>
+ <div class="panel-card card-3">
+ <div class="panel-title">缁煎悎缁熻</div>
+ <div class="stats-grid">
+ <div class="stat-item">
+ <div class="stat-label">鎬讳骇鑳�</div>
+ <div class="stat-value production-color">{{ totalProduction }}</div>
+ <div class="stat-unit">绔嬫柟绫�</div>
+ </div>
+ <div class="stat-item">
+ <div class="stat-label">鎬诲浐搴熷鐞�</div>
+ <div class="stat-value waste-color">{{ totalSolidWaste }}</div>
+ <div class="stat-unit">鍚�</div>
+ </div>
+ <div class="stat-item">
+ <div class="stat-label">骞冲潎鍗曡��</div>
+ <div class="stat-value consumption-color">{{ averageUnitConsumption }}</div>
+ <div class="stat-unit">鍚�/绔嬫柟绫�</div>
+ </div>
+ <div class="stat-item">
+ <div class="stat-label">鎬昏兘鑰�</div>
+ <div class="stat-value energy-color">{{ totalEnergy }}</div>
+ <div class="stat-unit">kWh</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 绗簩琛� -->
+ <div class="row row-2">
+ <div class="panel-card card-4">
+ <div class="panel-title">鐢熶骇鎴愭湰鍗曡��</div>
+ <div class="chart-container">
+ <div ref="costChart"
+ style="width: 100%; height: 100%"></div>
+ </div>
+ </div>
+ <div class="panel-card card-5">
+ <div class="panel-title">鐢熶骇鑳借�楁暟鎹�</div>
+ <div class="chart-container">
+ <div ref="energyChart"
+ style="width: 100%; height: 100%"></div>
+ </div>
+ </div>
+ </div>
+ <!-- 绗笁琛� -->
+ <div class="row row-3">
+ <div class="panel-card card-6">
+ <div class="panel-title">鍗曡�楁暟鎹槑缁�</div>
+ <div class="table-container">
+ <el-table :data="costTableData"
+ style="width: 100%">
+ <el-table-column prop="material"
+ label="鐗╂枡绫诲瀷"
+ width="120"
+ align="center">
+ <template #default="scope">
+ <el-tag :type="getMaterialTypeType(scope.row.material)">
+ {{ scope.row.material }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column prop="unit"
+ label="鍗曚綅"
+ width="100" />
+ <el-table-column prop="monthlyConsumption"
+ label="鏈堝害绱鐢ㄩ噺"
+ align="right">
+ <template #default="scope">
+ <span class="data-value">{{ scope.row.monthlyConsumption }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="monthlyProduction"
+ label="鏈堝害绱浜ч噺"
+ align="right">
+ <template #default="scope">
+ <span class="data-value">{{ scope.row.monthlyProduction }}</span>
+ </template>
+ </el-table-column>
+ <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="yearlyConsumption"
+ label="骞村害绱鐢ㄩ噺"
+ align="right">
+ <template #default="scope">
+ <span class="data-value">{{ scope.row.yearlyConsumption }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="yearlyProduction"
+ label="骞村害绱浜ч噺"
+ align="right">
+ <template #default="scope">
+ <span class="data-value">{{ scope.row.yearlyProduction }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="yearlyUnitConsumption"
+ label="骞村害绱鍗曡��"
+ align="right">
+ <template #default="scope">
+ <span class="data-value">{{ scope.row.yearlyUnitConsumption }}</span>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+ import {
+ ref,
+ computed,
+ onMounted,
+ onBeforeUnmount,
+ nextTick,
+ watch,
+ } from "vue";
+ import * as echarts from "echarts";
+
+ // 绛涢�夋潯浠�
+ const dateType = ref("month"); // month 鎴� year
+ const productType = ref("block"); // block 鎴� plate
+
+ // 鍥捐〃寮曠敤
+ const productionChart = ref(null);
+ const solidWasteChart = ref(null);
+ const costChart = ref(null);
+ const energyChart = ref(null);
+
+ // 鍥捐〃瀹炰緥
+ let productionChartInstance = null;
+ let solidWasteChartInstance = null;
+ let costChartInstance = null;
+ let energyChartInstance = null;
+
+ // 妯℃嫙鏁版嵁
+ const productionData = ref({
+ month: [
+ { name: "1鏈�", block: 1200, plate: 800 },
+ { name: "2鏈�", block: 1300, plate: 850 },
+ { name: "3鏈�", block: 1100, plate: 750 },
+ { name: "4鏈�", block: 1400, plate: 900 },
+ { name: "5鏈�", block: 1500, plate: 950 },
+ { name: "6鏈�", block: 1350, plate: 880 },
+ { name: "7鏈�", block: 1450, plate: 920 },
+ { name: "8鏈�", block: 1600, plate: 1000 },
+ { name: "9鏈�", block: 1550, plate: 980 },
+ { name: "10鏈�", block: 1700, plate: 1050 },
+ { name: "11鏈�", block: 1650, plate: 1020 },
+ { name: "12鏈�", block: 1800, plate: 1100 },
+ ],
+ year: [
+ { name: "2023", block: 15000, plate: 9500 },
+ { name: "2024", block: 16500, plate: 10200 },
+ { name: "2025", block: 18000, plate: 11000 },
+ ],
+ });
+
+ const solidWasteData = ref({
+ month: [
+ { name: "1鏈�", 绮夌叅鐏�: 200, 鐭宠啅: 150, 鐭崇伆: 100 },
+ { name: "2鏈�", 绮夌叅鐏�: 220, 鐭宠啅: 160, 鐭崇伆: 110 },
+ { name: "3鏈�", 绮夌叅鐏�: 190, 鐭宠啅: 140, 鐭崇伆: 95 },
+ { name: "4鏈�", 绮夌叅鐏�: 230, 鐭宠啅: 170, 鐭崇伆: 115 },
+ { name: "5鏈�", 绮夌叅鐏�: 240, 鐭宠啅: 180, 鐭崇伆: 120 },
+ { name: "6鏈�", 绮夌叅鐏�: 225, 鐭宠啅: 165, 鐭崇伆: 112 },
+ ],
+ year: [
+ { name: "2023", 绮夌叅鐏�: 2500, 鐭宠啅: 1800, 鐭崇伆: 1200 },
+ { name: "2024", 绮夌叅鐏�: 2700, 鐭宠啅: 1950, 鐭崇伆: 1300 },
+ { name: "2025", 绮夌叅鐏�: 2900, 鐭宠啅: 2100, 鐭崇伆: 1400 },
+ ],
+ });
+
+ const costData = ref({
+ materials: ["姘存偿", "閾濈矇鑶�", "鑴辨ā鍓�", "闃茶厫鍓�", "姘寲鍓�", "鍐锋嫈涓�"],
+ month: {
+ consumption: [1200, 50, 80, 30, 40, 60],
+ production: [12000, 12000, 12000, 8000, 8000, 8000],
+ unitConsumption: [0.1, 0.0042, 0.0067, 0.0038, 0.005, 0.0075],
+ },
+ year: {
+ consumption: [14000, 600, 950, 350, 480, 720],
+ production: [140000, 140000, 140000, 95000, 95000, 95000],
+ unitConsumption: [0.1, 0.0043, 0.0068, 0.0037, 0.0051, 0.0076],
+ },
+ });
+
+ const energyData = ref({
+ month: [
+ { name: "1鏈�", 鐢甸噺: 12000, 姘撮噺: 8000, 姘旈噺: 5000 },
+ { name: "2鏈�", 鐢甸噺: 13000, 姘撮噺: 8500, 姘旈噺: 5500 },
+ { name: "3鏈�", 鐢甸噺: 11000, 姘撮噺: 7500, 姘旈噺: 4800 },
+ { name: "4鏈�", 鐢甸噺: 14000, 姘撮噺: 9000, 姘旈噺: 6000 },
+ { name: "5鏈�", 鐢甸噺: 15000, 姘撮噺: 9500, 姘旈噺: 6500 },
+ { name: "6鏈�", 鐢甸噺: 13500, 姘撮噺: 8800, 姘旈噺: 5800 },
+ ],
+ year: [
+ { name: "2023", 鐢甸噺: 140000, 姘撮噺: 95000, 姘旈噺: 65000 },
+ { name: "2024", 鐢甸噺: 150000, 姘撮噺: 100000, 姘旈噺: 70000 },
+ { name: "2025", 鐢甸噺: 160000, 姘撮噺: 105000, 姘旈噺: 75000 },
+ ],
+ });
+
+ // 璁＄畻灞炴��
+ const productionChartOption = computed(() => {
+ const data = productionData.value[dateType.value];
+ return {
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ legend: {
+ data: ["鐮屽潡", "鏉挎潗"],
+ textStyle: {
+ color: "#333",
+ },
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ data: data.map(item => item.name),
+ axisLabel: {
+ color: "#333",
+ },
+ },
+ yAxis: {
+ type: "value",
+ name: "浜ч噺 (绔嬫柟绫�)",
+ axisLabel: {
+ color: "#333",
+ },
+ },
+ series: [
+ {
+ name: "鐮屽潡",
+ type: "line",
+ data: data.map(item => item.block),
+ smooth: true,
+ lineStyle: {
+ width: 3,
+ },
+ itemStyle: {
+ color: "#409EFF",
+ },
+ },
+ {
+ name: "鏉挎潗",
+ type: "line",
+ data: data.map(item => item.plate),
+ smooth: true,
+ lineStyle: {
+ width: 3,
+ },
+ itemStyle: {
+ color: "#67C23A",
+ },
+ },
+ ],
+ };
+ });
+
+ const solidWasteChartOption = computed(() => {
+ const data = solidWasteData.value[dateType.value];
+ return {
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ legend: {
+ data: ["绮夌叅鐏�", "鐭宠啅", "鐭崇伆"],
+ textStyle: {
+ color: "#333",
+ },
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ data: data.map(item => item.name),
+ axisLabel: {
+ color: "#333",
+ },
+ },
+ yAxis: {
+ type: "value",
+ name: "澶勭悊閲� (鍚�)",
+ axisLabel: {
+ color: "#333",
+ },
+ },
+ series: [
+ {
+ name: "绮夌叅鐏�",
+ type: "bar",
+ data: data.map(item => item.绮夌叅鐏�),
+ itemStyle: {
+ color: "#909399",
+ },
+ },
+ {
+ name: "鐭宠啅",
+ type: "bar",
+ data: data.map(item => item.鐭宠啅),
+ itemStyle: {
+ color: "#E6A23C",
+ },
+ },
+ {
+ name: "鐭崇伆",
+ type: "bar",
+ data: data.map(item => item.鐭崇伆),
+ itemStyle: {
+ color: "#F56C6C",
+ },
+ },
+ ],
+ };
+ });
+
+ const costChartOption = computed(() => {
+ const data = costData.value;
+ return {
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ legend: {
+ data: ["鏈堝害鍗曡��", "骞村害鍗曡��"],
+ textStyle: {
+ color: "#333",
+ },
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ data: data.materials,
+ axisLabel: {
+ color: "#333",
+ rotate: 45,
+ },
+ },
+ yAxis: {
+ type: "value",
+ name: "鍗曡�� (鍚�/绔嬫柟绫�)",
+ axisLabel: {
+ color: "#333",
+ },
+ },
+ series: [
+ {
+ name: "鏈堝害鍗曡��",
+ type: "bar",
+ data: data.month.unitConsumption,
+ itemStyle: {
+ color: "#409EFF",
+ },
+ },
+ {
+ name: "骞村害鍗曡��",
+ type: "bar",
+ data: data.year.unitConsumption,
+ itemStyle: {
+ color: "#67C23A",
+ },
+ },
+ ],
+ };
+ });
+
+ const energyChartOption = computed(() => {
+ const data = energyData.value[dateType.value];
+ return {
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ legend: {
+ data: ["鐢甸噺", "姘撮噺", "姘旈噺"],
+ textStyle: {
+ color: "#333",
+ },
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ data: data.map(item => item.name),
+ axisLabel: {
+ color: "#333",
+ },
+ },
+ yAxis: {
+ type: "value",
+ name: "鑳借�楅噺",
+ axisLabel: {
+ color: "#333",
+ },
+ },
+ series: [
+ {
+ name: "鐢甸噺",
+ type: "line",
+ data: data.map(item => item.鐢甸噺),
+ smooth: true,
+ lineStyle: {
+ width: 3,
+ },
+ itemStyle: {
+ color: "#409EFF",
+ },
+ },
+ {
+ name: "姘撮噺",
+ type: "line",
+ data: data.map(item => item.姘撮噺),
+ smooth: true,
+ lineStyle: {
+ width: 3,
+ },
+ itemStyle: {
+ color: "#67C23A",
+ },
+ },
+ {
+ name: "姘旈噺",
+ type: "line",
+ data: data.map(item => item.姘旈噺),
+ smooth: true,
+ lineStyle: {
+ width: 3,
+ },
+ itemStyle: {
+ color: "#E6A23C",
+ },
+ },
+ ],
+ };
+ });
+
+ const costTableData = computed(() => {
+ const data = costData.value;
+ const materials = data.materials;
+ const monthData = data.month;
+ const yearData = data.year;
+
+ return materials.map((material, index) => ({
+ material,
+ unit: "鍚�/绔嬫柟绫�",
+ monthlyConsumption: monthData.consumption[index],
+ monthlyProduction: monthData.production[index],
+ monthlyUnitConsumption: monthData.unitConsumption[index].toFixed(4),
+ yearlyConsumption: yearData.consumption[index],
+ yearlyProduction: yearData.production[index],
+ yearlyUnitConsumption: yearData.unitConsumption[index].toFixed(4),
+ }));
+ });
+
+ const totalProduction = computed(() => {
+ const data = productionData.value[dateType.value];
+ if (dateType.value === "month") {
+ return data.reduce(
+ (sum, item) =>
+ sum + item[productType.value === "block" ? "block" : "plate"],
+ 0
+ );
+ } else {
+ return data[data.length - 1][
+ productType.value === "block" ? "block" : "plate"
+ ];
+ }
+ });
+
+ const totalSolidWaste = computed(() => {
+ const data = solidWasteData.value[dateType.value];
+ if (dateType.value === "month") {
+ return data.reduce(
+ (sum, item) => sum + item.绮夌叅鐏� + item.鐭宠啅 + item.鐭崇伆,
+ 0
+ );
+ } else {
+ const lastItem = data[data.length - 1];
+ return lastItem.绮夌叅鐏� + lastItem.鐭宠啅 + lastItem.鐭崇伆;
+ }
+ });
+
+ const averageUnitConsumption = computed(() => {
+ const data = costData.value;
+ const unitConsumption =
+ dateType.value === "month"
+ ? data.month.unitConsumption
+ : data.year.unitConsumption;
+ const average =
+ unitConsumption.reduce((sum, value) => sum + value, 0) /
+ unitConsumption.length;
+ return average.toFixed(4);
+ });
+
+ const totalEnergy = computed(() => {
+ const data = energyData.value[dateType.value];
+ if (dateType.value === "month") {
+ return data.reduce(
+ (sum, item) => sum + item.鐢甸噺 + item.姘撮噺 + item.姘旈噺,
+ 0
+ );
+ } else {
+ const lastItem = data[data.length - 1];
+ return lastItem.鐢甸噺 + lastItem.姘撮噺 + lastItem.姘旈噺;
+ }
+ });
+
+ // 浜嬩欢澶勭悊
+ const handleDateTypeChange = () => {
+ updateCharts();
+ };
+
+ const handleProductTypeChange = () => {
+ updateCharts();
+ };
+
+ // 鍒濆鍖栧浘琛�
+ const initCharts = () => {
+ if (productionChart.value) {
+ productionChartInstance = echarts.init(productionChart.value);
+ productionChartInstance.setOption(productionChartOption.value);
+ }
+
+ if (solidWasteChart.value) {
+ solidWasteChartInstance = echarts.init(solidWasteChart.value);
+ solidWasteChartInstance.setOption(solidWasteChartOption.value);
+ }
+
+ if (costChart.value) {
+ costChartInstance = echarts.init(costChart.value);
+ costChartInstance.setOption(costChartOption.value);
+ }
+
+ if (energyChart.value) {
+ energyChartInstance = echarts.init(energyChart.value);
+ energyChartInstance.setOption(energyChartOption.value);
+ }
+ };
+
+ // 鏇存柊鍥捐〃
+ const updateCharts = () => {
+ if (productionChartInstance) {
+ productionChartInstance.setOption(productionChartOption.value);
+ }
+
+ if (solidWasteChartInstance) {
+ solidWasteChartInstance.setOption(solidWasteChartOption.value);
+ }
+
+ if (costChartInstance) {
+ costChartInstance.setOption(costChartOption.value);
+ }
+
+ if (energyChartInstance) {
+ energyChartInstance.setOption(energyChartOption.value);
+ }
+ };
+
+ // 璋冩暣鍥捐〃澶у皬
+ const resizeCharts = () => {
+ productionChartInstance?.resize();
+ solidWasteChartInstance?.resize();
+ costChartInstance?.resize();
+ energyChartInstance?.resize();
+ };
+
+ // 绐楀彛澶у皬鍙樺寲澶勭悊
+ const handleResize = () => {
+ // 寤惰繜鎵ц锛岀‘淇滵OM鏇存柊瀹屾垚
+ setTimeout(() => {
+ resizeCharts();
+ }, 100);
+ };
+
+ // 鑾峰彇鐗╂枡绫诲瀷鏍囩绫诲瀷
+ const getMaterialTypeType = material => {
+ const typeMap = {
+ 姘存偿: "primary",
+ 閾濈矇鑶�: "success",
+ 鑴辨ā鍓�: "warning",
+ 闃茶厫鍓�: "danger",
+ 姘寲鍓�: "info",
+ 鍐锋嫈涓�: "purple",
+ };
+ return typeMap[material] || "info";
+ };
+
+ // 鐢熷懡鍛ㄦ湡閽╁瓙
+ onMounted(() => {
+ // 浣跨敤nextTick纭繚DOM瀹屽叏娓叉煋鍚庡啀鍒濆鍖�
+ nextTick(() => {
+ // 鍒濆鍖栧浘琛�
+ initCharts();
+ });
+
+ window.addEventListener("resize", handleResize);
+ });
+
+ onBeforeUnmount(() => {
+ window.removeEventListener("resize", handleResize);
+
+ // 閿�姣佸浘琛ㄥ疄渚�
+ productionChartInstance?.dispose();
+ solidWasteChartInstance?.dispose();
+ costChartInstance?.dispose();
+ energyChartInstance?.dispose();
+ });
+</script>
+
+<style scoped>
+ /* 澶栭儴瀹瑰櫒 - 鍗犳嵁鏁翠釜瑙嗗彛 */
+ .dashboard-container {
+ position: relative;
+ width: 100%;
+ /* 椤甸潰鍦ㄥ父瑙勫竷灞�涓嬶紙鏈夐《鏍忥級榛樿鍑忓幓 84px锛岄伩鍏嶅唴瀹硅瑁佸垏 */
+ min-height: calc(100vh - 84px);
+ background-color: #f5f7fa;
+ overflow: hidden;
+ }
+
+ /* 鍐呴儴鍐呭鍖哄煙 - 鑷�傚簲瀹藉害 */
+ .data-dashboard {
+ position: relative;
+ width: 100%;
+ min-height: 100%;
+ background-color: #ffffff;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+ }
+
+ .dashboard-header {
+ position: relative;
+ z-index: 1;
+ height: 86px;
+ background-color: #ffffff;
+ border-bottom: 1px solid #e4e7ed;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .factory-name {
+ font-weight: 600;
+ font-size: 32px;
+ color: #303133;
+ }
+
+ .filter-area {
+ padding: 20px;
+ background-color: #ffffff;
+ border-bottom: 1px solid #e4e7ed;
+ display: flex;
+ gap: 40px;
+ align-items: center;
+ flex-wrap: wrap;
+ }
+
+ .filter-section {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+
+ .filter-label {
+ font-size: 14px;
+ font-weight: 500;
+ color: #303133;
+ white-space: nowrap;
+ }
+
+ .radio-group {
+ display: flex;
+ align-items: center;
+ }
+
+ /* 鎸夐挳鏍峰紡 */
+ :deep(.el-radio-button__inner) {
+ border-radius: 4px;
+ padding: 8px 20px;
+ font-size: 14px;
+ transition: all 0.3s ease;
+ }
+
+ :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
+ background-color: #409eff;
+ border-color: #409eff;
+ color: #ffffff;
+ box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+ }
+
+ :deep(.el-radio-button__inner:hover) {
+ color: #409eff;
+ border-color: #c6e2ff;
+ }
+
+ :deep(.el-radio-button:first-child .el-radio-button__inner) {
+ border-radius: 4px 0 0 4px;
+ }
+
+ :deep(.el-radio-button:last-child .el-radio-button__inner) {
+ border-radius: 0 4px 4px 0;
+ }
+
+ .dashboard-content {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ padding: 20px;
+ min-height: 800px;
+ overflow: hidden;
+ }
+
+ /* 琛屽竷灞� */
+ .row {
+ display: flex;
+ gap: 20px;
+ align-items: stretch;
+ }
+
+ /* 绗竴琛岋細3涓崱鐗� */
+ .row-1 {
+ height: 300px;
+ }
+
+ /* 绗簩琛岋細2涓崱鐗� */
+ .row-2 {
+ height: 300px;
+ }
+
+ /* 绗笁琛岋細1涓崱鐗� */
+ .row-3 {
+ min-height: 250px;
+ }
+
+ /* 鍗＄墖鏍峰紡 */
+ .panel-card {
+ background-color: #ffffff;
+ border-radius: 8px;
+ border: 1px solid #e4e7ed;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+ transition: all 0.3s ease;
+ }
+
+ .panel-card:hover {
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+ transform: translateY(-2px);
+ }
+
+ /* 鍗＄墖甯冨眬 */
+ .card-1 {
+ flex: 1;
+ }
+
+ .card-2 {
+ flex: 1;
+ }
+
+ .card-3 {
+ flex: 0.8;
+ }
+
+ .card-4 {
+ flex: 1.2;
+ }
+
+ .card-5 {
+ flex: 0.8;
+ }
+
+ .card-6 {
+ flex: 1;
+ }
+
+ .panel-card {
+ background-color: #ffffff;
+ border-radius: 8px;
+ border: 1px solid #e4e7ed;
+ overflow: hidden;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .panel-title {
+ padding: 15px 20px;
+ font-size: 16px;
+ font-weight: 500;
+ color: #303133;
+ border-bottom: 1px solid #e4e7ed;
+ background-color: #fafafa;
+ }
+
+ .card-1 .panel-title {
+ border-left: 4px solid #409eff;
+ }
+
+ .card-2 .panel-title {
+ border-left: 4px solid #f56c6c;
+ }
+
+ .card-3 .panel-title {
+ border-left: 4px solid #e6a23c;
+ }
+
+ .card-4 .panel-title {
+ border-left: 4px solid #409eff;
+ }
+
+ .card-5 .panel-title {
+ border-left: 4px solid #67c23a;
+ }
+
+ .card-6 .panel-title {
+ border-left: 4px solid #e6a23c;
+ }
+
+ .chart-container {
+ flex: 1;
+ padding: 20px;
+ }
+
+ .table-container {
+ flex: 1;
+ padding: 20px;
+ overflow: auto;
+ }
+
+ .stats-grid {
+ flex: 1;
+ padding: 15px;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 15px;
+ }
+
+ .stat-item {
+ background-color: #fafafa;
+ border-radius: 8px;
+ padding: 15px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid #e4e7ed;
+ min-height: 80px;
+ }
+
+ .stat-label {
+ font-size: 13px;
+ color: #606266;
+ margin-bottom: 8px;
+ }
+
+ .stat-value {
+ font-size: 20px;
+ font-weight: 600;
+ color: #303133;
+ margin-bottom: 3px;
+ }
+
+ .production-color {
+ color: #409eff;
+ text-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+ }
+
+ .waste-color {
+ color: #f56c6c;
+ text-shadow: 0 2px 4px rgba(245, 108, 108, 0.3);
+ }
+
+ .consumption-color {
+ color: #e6a23c;
+ text-shadow: 0 2px 4px rgba(230, 162, 60, 0.3);
+ }
+
+ .energy-color {
+ color: #67c23a;
+ text-shadow: 0 2px 4px rgba(103, 194, 58, 0.3);
+ }
+
+ .stat-unit {
+ font-size: 11px;
+ color: #909399;
+ }
+
+ /* 琛ㄦ牸鏍峰紡 */
+ :deep(.el-table) {
+ border-radius: 8px;
+ overflow: hidden;
+ }
+
+ :deep(.el-table th) {
+ background-color: #fafafa;
+ font-weight: 500;
+ }
+
+ :deep(.el-table tr:hover > td) {
+ background-color: #ecf5ff;
+ }
+
+ .data-value {
+ font-weight: bold;
+ color: #409eff;
+ }
+
+ /* 鎸夐挳鏍峰紡 */
+ :deep(.el-radio-button__inner) {
+ border-radius: 4px;
+ }
+
+ :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
+ background-color: #409eff;
+ border-color: #409eff;
+ color: #ffffff;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3