能耗成本核算-能耗成本趋势统计图展示修改

zhangwencui

17 小时以前 897524d4918c407dbaa32fc98e5c5867c70e4064

 src/views/energyManagement/energyConsumptionStatistical/index.vue

@@ -180,9 +180,13 @@
                         label="序号"
                         width="60"
                         align="center" />
        <el-table-column prop="timePeriod"
                         :label="timeColumnLabel"
                         align="center" />
        <el-table-column prop="meterReadingDate"
                         label="日期"
                         align="right">
          <template #default="scope">
            <span class="consumption-value">{{ scope.row.meterReadingDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="waterConsumption"
                         label="用水量(吨)"
                         align="right">
@@ -190,11 +194,11 @@
            <span class="consumption-value">{{ scope.row.waterConsumption }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="waterAmount"
        <el-table-column prop="waterCost"
                         label="水费(元)"
                         align="right">
          <template #default="scope">
            <span class="amount-value">{{ scope.row.waterAmount }}</span>
            <span class="amount-value">{{ scope.row.waterCost }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="electricityConsumption"
@@ -204,11 +208,11 @@
            <span class="consumption-value">{{ scope.row.electricityConsumption }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="electricityAmount"
        <el-table-column prop="electricityCost"
                         label="电费(元)"
                         align="right">
          <template #default="scope">
            <span class="amount-value">{{ scope.row.electricityAmount }}</span>
            <span class="amount-value">{{ scope.row.electricityCost }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="gasConsumption"
@@ -218,11 +222,11 @@
            <span class="consumption-value">{{ scope.row.gasConsumption }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="gasAmount"
        <el-table-column prop="gasCost"
                         label="气费(元)"
                         align="right">
          <template #default="scope">
            <span class="amount-value">{{ scope.row.gasAmount }}</span>
            <span class="amount-value">{{ scope.row.gasCost }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalConsumption"
@@ -237,7 +241,7 @@
                         align="right"
                         fixed="right">
          <template #default="scope">
            <span class="total-amount-value">¥{{ scope.row.totalAmount }}</span>
            <span class="total-amount-value">¥{{ scope.row.totalCost }}</span>
          </template>
        </el-table-column>
      </el-table>
@@ -443,7 +447,7 @@
      },
      xAxis: {
        type: "category",
        data: data.map(item => item.timePeriod),
        data: data.map(item => item.meterReadingDate),
        axisLabel: { rotate: statisticsType.value === "day" ? 45 : 0 },
      },
      yAxis: {
@@ -494,7 +498,7 @@
      },
      xAxis: {
        type: "category",
        data: data.map(item => item.timePeriod),
        data: data.map(item => item.meterReadingDate),
        axisLabel: { rotate: statisticsType.value === "day" ? 45 : 0 },
      },
      yAxis: {
@@ -505,21 +509,21 @@
        {
          name: "水费",
          type: "line",
          data: data.map(item => item.waterAmount),
          data: data.map(item => item.waterCost),
          smooth: true,
          itemStyle: { color: "#409EFF" },
        },
        {
          name: "电费",
          type: "line",
          data: data.map(item => item.electricityAmount),
          data: data.map(item => item.electricityCost),
          smooth: true,
          itemStyle: { color: "#E6A23C" },
        },
        {
          name: "气费",
          type: "line",
          data: data.map(item => item.gasAmount),
          data: data.map(item => item.gasCost),
          smooth: true,
          itemStyle: { color: "#67C23A" },
        },
@@ -595,15 +599,15 @@
  const updateAmountTypeChart = () => {
    const data = tableData.value;
    const totalWaterAmount = data.reduce(
      (sum, item) => sum + parseFloat(item.waterAmount),
      (sum, item) => sum + parseFloat(item.waterCost),
      0
    );
    const totalElectricityAmount = data.reduce(
      (sum, item) => sum + parseFloat(item.electricityAmount),
      (sum, item) => sum + parseFloat(item.electricityCost),
      0
    );
    const totalGasAmount = data.reduce(
      (sum, item) => sum + parseFloat(item.gasAmount),
      (sum, item) => sum + parseFloat(item.gasCost),
      0
    );

@@ -653,10 +657,29 @@

  // 统计维度切换
  const handleTypeChange = () => {
    // 重置时间范围
    searchForm.dateRange = [];
    searchForm.monthRange = [];
    searchForm.year = new Date().getFullYear();
    // 重置时间范围并设置默认值
    const end = new Date();
    const start = new Date();

    if (statisticsType.value === "day") {
      // 默认最近7天
      start.setDate(start.getDate() - 6);
      searchForm.dateRange = [
        start.toISOString().split("T")[0],
        end.toISOString().split("T")[0],
      ];
    } else if (statisticsType.value === "month") {
      // 默认最近3个月
      start.setMonth(start.getMonth() - 2);
      searchForm.monthRange = [
        start.toISOString().slice(0, 7),
        end.toISOString().slice(0, 7),
      ];
    } else if (statisticsType.value === "year") {
      // 默认当前年份
      searchForm.year = new Date().getFullYear();
    }

    page.current = 1;
    handleQuery();
  };
@@ -666,6 +689,12 @@
    tableLoading.value = true;
    const params = {
      type: "",
      state:
        statisticsType.value === "day"
          ? "日"
          : statisticsType.value === "month"
          ? "月"
          : "年",
    };

    // 构造请求参数
@@ -685,14 +714,20 @@
    } else if (statisticsType.value === "month") {
      if (searchForm.monthRange && searchForm.monthRange.length === 2) {
        params.startDate = searchForm.monthRange[0] + "-01";
        params.endDate = searchForm.monthRange[1] + "-01";
        // 计算月数
        const start = new Date(searchForm.monthRange[0] + "-01");
        const end = new Date(searchForm.monthRange[1] + "-01");
        params.days =
          (end.getFullYear() - start.getFullYear()) * 12 +
          (end.getMonth() - start.getMonth()) +
          1;
        const [endYearStr, endMonthStr] = String(searchForm.monthRange[1]).split(
          "-"
        );
        const endYear = Number(endYearStr);
        const endMonth = Number(endMonthStr);
        const lastDay = new Date(endYear, endMonth, 0).getDate();
        params.endDate = `${endYearStr}-${endMonthStr}-${String(lastDay).padStart(
          2,
          "0"
        )}`;
        // 计算天数
        const start = new Date(params.startDate);
        const end = new Date(params.endDate);
        params.days = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1;
      }
    } else if (statisticsType.value === "year") {
      params.startDate = searchForm.year + "-01-01";