能耗单号页面修改

zhangwencui

8 小时以前 ccfbe532d740b2133d1f8d299cf560a2602393a4

 src/views/reportAnalysis/unitEnergyConsumption/index.vue

@@ -4,6 +4,17 @@
    <div class="search_form">
      <el-form :model="searchForm"
               :inline="true">
        <el-form-item label="时间维度:">
          <el-select v-model="searchForm.timeDimension"
                     placeholder="请选择时间维度"
                     style="width: 120px;"
                     @change="handleQuery">
            <el-option label="年度"
                       value="year" />
            <el-option label="月度"
                       value="month" />
          </el-select>
        </el-form-item>
        <el-form-item label="年份:">
          <el-select v-model="searchForm.year"
                     placeholder="请选择年份"
@@ -13,6 +24,18 @@
                       :key="year"
                       :label="year + '年'"
                       :value="year" />
          </el-select>
        </el-form-item>
        <el-form-item label="月份:"
                      v-if="searchForm.timeDimension === 'month'">
          <el-select v-model="searchForm.month"
                     placeholder="请选择月份"
                     style="width: 120px;"
                     @change="handleQuery">
            <el-option v-for="month in 12"
                       :key="month"
                       :label="month + '月'"
                       :value="month" />
          </el-select>
        </el-form-item>
        <el-form-item label="能耗类型:">
@@ -80,7 +103,8 @@
                         label="单位"
                         width="120"
                         align="center" />
        <el-table-column label="月度数据">
        <el-table-column label="月度数据"
                         v-if="searchForm.timeDimension === 'month'">
          <el-table-column prop="monthlyUnitConsumption"
                           label="月度累计单耗"
                           align="right">
@@ -96,7 +120,8 @@
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="年度数据">
        <el-table-column label="年度数据"
                         v-if="searchForm.timeDimension === 'year'">
          <el-table-column prop="annualUnitConsumption"
                           label="年度累计单耗"
                           align="right">
@@ -125,7 +150,9 @@

  // 搜索表单
  const searchForm = reactive({
    timeDimension: "year",
    year: new Date().getFullYear(),
    month: new Date().getMonth() + 1,
    energyType: "",
  });

@@ -167,20 +194,35 @@
  // 更新图表
  const updateChart = () => {
    const data = tableData.value;
    const months = [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ];
    let xAxisData = [];
    let seriesDataKey = "monthlyData";
    let seriesDataMap = item => item.unitConsumption;

    // 根据时间维度准备数据
    if (searchForm.timeDimension === "year") {
      // 年度模式：12个月
      xAxisData = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ];
    } else {
      // 月度模式：该月的每一天
      const year = searchForm.year;
      const month = searchForm.month;
      const daysInMonth = new Date(year, month, 0).getDate();
      xAxisData = Array.from({ length: daysInMonth }, (_, i) => `${i + 1}日`);
      seriesDataKey = "dailyData";
    }

    // 准备图表数据
    const series = [];
@@ -188,11 +230,11 @@

    energyTypes.forEach(type => {
      const typeData = data.find(item => item.energyType === type);
      if (typeData && typeData.monthlyData) {
      if (typeData && typeData[seriesDataKey]) {
        series.push({
          name: type,
          type: "line",
          data: typeData.monthlyData.map(item => item.unitConsumption),
          data: typeData[seriesDataKey].map(seriesDataMap),
          smooth: true,
          symbol: "circle",
          symbolSize: 8,
@@ -234,8 +276,11 @@
      },
      xAxis: {
        type: "category",
        data: months,
        axisLabel: { color: "#606266" },
        data: xAxisData,
        axisLabel: {
          color: "#606266",
          rotate: searchForm.timeDimension === "month" ? 45 : 0,
        },
        axisLine: { lineStyle: { color: "#ebeef5" } },
        splitLine: { show: false },
      },
@@ -267,7 +312,9 @@

  // 重置
  const handleReset = () => {
    searchForm.timeDimension = "year";
    searchForm.year = new Date().getFullYear();
    searchForm.month = new Date().getMonth() + 1;
    searchForm.energyType = "";
    handleQuery();
  };
@@ -290,6 +337,7 @@
        annualConsumption: Math.floor(Math.random() * 60000 + 120000),
        annualProduction: Math.floor(Math.random() * 120000 + 240000),
        monthlyData: generateMonthlyData(0.8, 1.3),
        dailyData: generateDailyData(0.7, 1.4),
      },
      {
        energyType: "电",
@@ -301,6 +349,7 @@
        annualConsumption: Math.floor(Math.random() * 600000 + 1200000),
        annualProduction: Math.floor(Math.random() * 120000 + 240000),
        monthlyData: generateMonthlyData(5, 7),
        dailyData: generateDailyData(4.5, 7.5),
      },
      {
        energyType: "蒸汽",
@@ -312,6 +361,7 @@
        annualConsumption: Math.floor(Math.random() * 36000 + 72000),
        annualProduction: Math.floor(Math.random() * 120000 + 240000),
        monthlyData: generateMonthlyData(0.5, 0.8),
        dailyData: generateDailyData(0.4, 0.9),
      },
    ];

@@ -336,6 +386,21 @@
    return data;
  };

  // 生成每日数据
  const generateDailyData = (min, max) => {
    const year = searchForm.year;
    const month = searchForm.month;
    const daysInMonth = new Date(year, month, 0).getDate();
    const data = [];
    for (let i = 1; i <= daysInMonth; i++) {
      data.push({
        day: i,
        unitConsumption: (Math.random() * (max - min) + min).toFixed(4),
      });
    }
    return data;
  };

  // 窗口大小变化时重新渲染图表
  const handleResize = () => {
    consumptionChartInstance && consumptionChartInstance.resize();