决策分析页面

zhangwencui

5 天以前 1c20a331d9fc1be029fadbd3d0f7619fe6a83cd0

 src/views/reportAnalysis/productionStatistics/index.vue

@@ -1,30 +1,31 @@
<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-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-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">
      <!-- 第一行 -->
@@ -32,13 +33,15 @@
        <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 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 ref="solidWasteChart"
                   style="width: 100%; height: 100%"></div>
          </div>
        </div>
        <div class="panel-card card-3">
@@ -46,58 +49,106 @@
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-label">总产能</div>
              <div class="stat-value">{{ totalProduction }}</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">{{ totalSolidWaste }}</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">{{ averageUnitConsumption }}</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">{{ totalEnergy }}</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 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 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" />
              <el-table-column prop="unit" label="单位" width="100" />
              <el-table-column prop="monthlyConsumption" label="月度累计用量" />
              <el-table-column prop="monthlyProduction" label="月度累计产量" />
              <el-table-column prop="monthlyUnitConsumption" label="月度累计单耗" />
              <el-table-column prop="yearlyConsumption" label="年度累计用量" />
              <el-table-column prop="yearlyProduction" label="年度累计产量" />
              <el-table-column prop="yearlyUnitConsumption" label="年度累计单耗" />
              <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>
@@ -108,497 +159,534 @@
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
import * as echarts from 'echarts'
  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 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)
  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
  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 }
      { 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 }
  ]
})
      { 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 }
      { 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 }
  ]
})
      { name: "2023", 粉煤灰: 2500, 石膏: 1800, 石灰: 1200 },
      { name: "2024", 粉煤灰: 2700, 石膏: 1950, 石灰: 1300 },
      { name: "2025", 粉煤灰: 2900, 石膏: 2100, 石灰: 1400 },
    ],
  });

const costData = ref({
  materials: ['水泥', '铝粉膏', '脱模剂', '防腐剂', '氯化剂', '冷拔丝'],
    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]
      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]
  }
})
      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 }
      { 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 }
  ]
})
      { name: "2023", 电量: 140000, 水量: 95000, 气量: 65000 },
      { name: "2024", 电量: 150000, 水量: 100000, 气量: 70000 },
      { name: "2025", 电量: 160000, 水量: 105000, 气量: 75000 },
    ],
  });

// 计算属性
const productionChartOption = computed(() => {
  const data = productionData.value[dateType.value]
    const data = productionData.value[dateType.value];
  return {
    tooltip: {
      trigger: 'axis',
        trigger: "axis",
      axisPointer: {
        type: 'shadow'
      }
          type: "shadow",
        },
    },
    legend: {
      data: ['砌块', '板材'],
        data: ["砌块", "板材"],
      textStyle: {
        color: '#333'
      }
          color: "#333",
        },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
    },
    xAxis: {
      type: 'category',
        type: "category",
      data: data.map(item => item.name),
      axisLabel: {
        color: '#333'
      }
          color: "#333",
        },
    },
    yAxis: {
      type: 'value',
      name: '产量 (立方米)',
        type: "value",
        name: "产量 (立方米)",
      axisLabel: {
        color: '#333'
      }
          color: "#333",
        },
    },
    series: [
      {
        name: '砌块',
        type: 'line',
          name: "砌块",
          type: "line",
        data: data.map(item => item.block),
        smooth: true,
        lineStyle: {
          width: 3
            width: 3,
        },
        itemStyle: {
          color: '#409EFF'
        }
            color: "#409EFF",
          },
      },
      {
        name: '板材',
        type: 'line',
          name: "板材",
          type: "line",
        data: data.map(item => item.plate),
        smooth: true,
        lineStyle: {
          width: 3
            width: 3,
        },
        itemStyle: {
          color: '#67C23A'
        }
      }
    ]
  }
})
            color: "#67C23A",
          },
        },
      ],
    };
  });

const solidWasteChartOption = computed(() => {
  const data = solidWasteData.value[dateType.value]
    const data = solidWasteData.value[dateType.value];
  return {
    tooltip: {
      trigger: 'axis',
        trigger: "axis",
      axisPointer: {
        type: 'shadow'
      }
          type: "shadow",
        },
    },
    legend: {
      data: ['粉煤灰', '石膏', '石灰'],
        data: ["粉煤灰", "石膏", "石灰"],
      textStyle: {
        color: '#333'
      }
          color: "#333",
        },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
    },
    xAxis: {
      type: 'category',
        type: "category",
      data: data.map(item => item.name),
      axisLabel: {
        color: '#333'
      }
          color: "#333",
        },
    },
    yAxis: {
      type: 'value',
      name: '处理量 (吨)',
        type: "value",
        name: "处理量 (吨)",
      axisLabel: {
        color: '#333'
      }
          color: "#333",
        },
    },
    series: [
      {
        name: '粉煤灰',
        type: 'bar',
          name: "粉煤灰",
          type: "bar",
        data: data.map(item => item.粉煤灰),
        itemStyle: {
          color: '#909399'
        }
            color: "#909399",
          },
      },
      {
        name: '石膏',
        type: 'bar',
          name: "石膏",
          type: "bar",
        data: data.map(item => item.石膏),
        itemStyle: {
          color: '#E6A23C'
        }
            color: "#E6A23C",
          },
      },
      {
        name: '石灰',
        type: 'bar',
          name: "石灰",
          type: "bar",
        data: data.map(item => item.石灰),
        itemStyle: {
          color: '#F56C6C'
        }
      }
    ]
  }
})
            color: "#F56C6C",
          },
        },
      ],
    };
  });

const costChartOption = computed(() => {
  const data = costData.value
    const data = costData.value;
  return {
    tooltip: {
      trigger: 'axis',
        trigger: "axis",
      axisPointer: {
        type: 'shadow'
      }
          type: "shadow",
        },
    },
    legend: {
      data: ['月度单耗', '年度单耗'],
        data: ["月度单耗", "年度单耗"],
      textStyle: {
        color: '#333'
      }
          color: "#333",
        },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
    },
    xAxis: {
      type: 'category',
        type: "category",
      data: data.materials,
      axisLabel: {
        color: '#333',
        rotate: 45
      }
          color: "#333",
          rotate: 45,
        },
    },
    yAxis: {
      type: 'value',
      name: '单耗 (吨/立方米)',
        type: "value",
        name: "单耗 (吨/立方米)",
      axisLabel: {
        color: '#333'
      }
          color: "#333",
        },
    },
    series: [
      {
        name: '月度单耗',
        type: 'bar',
          name: "月度单耗",
          type: "bar",
        data: data.month.unitConsumption,
        itemStyle: {
          color: '#409EFF'
        }
            color: "#409EFF",
          },
      },
      {
        name: '年度单耗',
        type: 'bar',
          name: "年度单耗",
          type: "bar",
        data: data.year.unitConsumption,
        itemStyle: {
          color: '#67C23A'
        }
      }
    ]
  }
})
            color: "#67C23A",
          },
        },
      ],
    };
  });

const energyChartOption = computed(() => {
  const data = energyData.value[dateType.value]
    const data = energyData.value[dateType.value];
  return {
    tooltip: {
      trigger: 'axis',
        trigger: "axis",
      axisPointer: {
        type: 'shadow'
      }
          type: "shadow",
        },
    },
    legend: {
      data: ['电量', '水量', '气量'],
        data: ["电量", "水量", "气量"],
      textStyle: {
        color: '#333'
      }
          color: "#333",
        },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
    },
    xAxis: {
      type: 'category',
        type: "category",
      data: data.map(item => item.name),
      axisLabel: {
        color: '#333'
      }
          color: "#333",
        },
    },
    yAxis: {
      type: 'value',
      name: '能耗量',
        type: "value",
        name: "能耗量",
      axisLabel: {
        color: '#333'
      }
          color: "#333",
        },
    },
    series: [
      {
        name: '电量',
        type: 'line',
          name: "电量",
          type: "line",
        data: data.map(item => item.电量),
        smooth: true,
        lineStyle: {
          width: 3
            width: 3,
        },
        itemStyle: {
          color: '#409EFF'
        }
            color: "#409EFF",
          },
      },
      {
        name: '水量',
        type: 'line',
          name: "水量",
          type: "line",
        data: data.map(item => item.水量),
        smooth: true,
        lineStyle: {
          width: 3
            width: 3,
        },
        itemStyle: {
          color: '#67C23A'
        }
            color: "#67C23A",
          },
      },
      {
        name: '气量',
        type: 'line',
          name: "气量",
          type: "line",
        data: data.map(item => item.气量),
        smooth: true,
        lineStyle: {
          width: 3
            width: 3,
        },
        itemStyle: {
          color: '#E6A23C'
        }
      }
    ]
  }
})
            color: "#E6A23C",
          },
        },
      ],
    };
  });

const costTableData = computed(() => {
  const data = costData.value
  const materials = data.materials
  const monthData = data.month
  const yearData = data.year
    const data = costData.value;
    const materials = data.materials;
    const monthData = data.month;
    const yearData = data.year;
  
  return materials.map((material, index) => ({
    material,
    unit: '吨/立方米',
      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)
  }))
})
      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)
    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']
      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)
    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 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 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)
    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 lastItem = data[data.length - 1];
      return lastItem.电量 + lastItem.水量 + lastItem.气量;
  }
})
  });

// 事件处理
const handleDateTypeChange = () => {
  updateCharts()
}
    updateCharts();
  };

const handleProductTypeChange = () => {
  updateCharts()
}
    updateCharts();
  };

// 初始化图表
const initCharts = () => {
  if (productionChart.value) {
    productionChartInstance = echarts.init(productionChart.value)
    productionChartInstance.setOption(productionChartOption.value)
      productionChartInstance = echarts.init(productionChart.value);
      productionChartInstance.setOption(productionChartOption.value);
  }
  
  if (solidWasteChart.value) {
    solidWasteChartInstance = echarts.init(solidWasteChart.value)
    solidWasteChartInstance.setOption(solidWasteChartOption.value)
      solidWasteChartInstance = echarts.init(solidWasteChart.value);
      solidWasteChartInstance.setOption(solidWasteChartOption.value);
  }
  
  if (costChart.value) {
    costChartInstance = echarts.init(costChart.value)
    costChartInstance.setOption(costChartOption.value)
      costChartInstance = echarts.init(costChart.value);
      costChartInstance.setOption(costChartOption.value);
  }
  
  if (energyChart.value) {
    energyChartInstance = echarts.init(energyChart.value)
    energyChartInstance.setOption(energyChartOption.value)
      energyChartInstance = echarts.init(energyChart.value);
      energyChartInstance.setOption(energyChartOption.value);
  }
}
  };

// 更新图表
const updateCharts = () => {
  if (productionChartInstance) {
    productionChartInstance.setOption(productionChartOption.value)
      productionChartInstance.setOption(productionChartOption.value);
  }
  
  if (solidWasteChartInstance) {
    solidWasteChartInstance.setOption(solidWasteChartOption.value)
      solidWasteChartInstance.setOption(solidWasteChartOption.value);
  }
  
  if (costChartInstance) {
    costChartInstance.setOption(costChartOption.value)
      costChartInstance.setOption(costChartOption.value);
  }
  
  if (energyChartInstance) {
    energyChartInstance.setOption(energyChartOption.value)
      energyChartInstance.setOption(energyChartOption.value);
  }
}
  };

// 调整图表大小
const resizeCharts = () => {
  productionChartInstance?.resize()
  solidWasteChartInstance?.resize()
  costChartInstance?.resize()
  energyChartInstance?.resize()
}
    productionChartInstance?.resize();
    solidWasteChartInstance?.resize();
    costChartInstance?.resize();
    energyChartInstance?.resize();
  };

// 窗口大小变化处理
const handleResize = () => {
  // 延迟执行，确保DOM更新完成
  setTimeout(() => {
    resizeCharts()
  }, 100)
}
      resizeCharts();
    }, 100);
  };

  // 获取物料类型标签类型
  const getMaterialTypeType = material => {
    const typeMap = {
      水泥: "primary",
      铝粉膏: "success",
      脱模剂: "warning",
      防腐剂: "danger",
      氯化剂: "info",
      冷拔丝: "purple",
    };
    return typeMap[material] || "info";
  };

// 生命周期钩子
onMounted(() => {
  // 使用nextTick确保DOM完全渲染后再初始化
  nextTick(() => {
    // 初始化图表
    initCharts()
  })
      initCharts();
    });

  window.addEventListener('resize', handleResize)
})
    window.addEventListener("resize", handleResize);
  });

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
    window.removeEventListener("resize", handleResize);
  
  // 销毁图表实例
  productionChartInstance?.dispose()
  solidWasteChartInstance?.dispose()
  costChartInstance?.dispose()
  energyChartInstance?.dispose()
})
    productionChartInstance?.dispose();
    solidWasteChartInstance?.dispose();
    costChartInstance?.dispose();
    energyChartInstance?.dispose();
  });
</script>

<style scoped>
@@ -788,6 +876,30 @@
  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;
@@ -833,6 +945,26 @@
  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;
@@ -853,6 +985,11 @@
  background-color: #ecf5ff;
}

  .data-value {
    font-weight: bold;
    color: #409eff;
  }

/* 按钮样式 */
:deep(.el-radio-button__inner) {
  border-radius: 4px;