单耗对接

zhangwencui

5 小时以前 278151dbbe700c6fcbe918fd9014752cf6a480c0

单耗对接

 src/views/reportAnalysis/unitEnergyConsumption/index.vue

@@ -4,45 +4,19 @@
    <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 label="统计维度:">
          <el-radio-group v-model="statisticsType"
                          @change="handleTypeChange">
            <el-radio-button label="day">按日统计</el-radio-button>
            <el-radio-button label="month">按月统计</el-radio-button>
            <el-radio-button label="year">按年统计</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年份:">
          <el-select v-model="searchForm.year"
                     placeholder="请选择年份"
                     style="width: 120px;"
                     @change="handleQuery">
            <el-option v-for="year in years"
                       :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="能耗类型:">
        <!-- <el-form-item label="能耗类型:">
          <el-select v-model="searchForm.energyType"
                     placeholder="全部"
                     clearable
                     style="width: 140px;"
                     style="width: 120px;"
                     @change="handleQuery">
            <el-option label="全部"
                       value="全部" />
@@ -52,6 +26,36 @@
                       value="电" />
            <el-option label="蒸汽"
                       value="蒸汽" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="时间范围:">
          <el-date-picker v-if="statisticsType === 'day'"
                          v-model="searchForm.dateRange"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          value-format="YYYY-MM-DD"
                          style="width: 240px;"
                          @change="handleQuery" />
          <el-date-picker v-else-if="statisticsType === 'month'"
                          v-model="searchForm.monthRange"
                          type="monthrange"
                          range-separator="至"
                          start-placeholder="开始月份"
                          end-placeholder="结束月份"
                          value-format="YYYY-MM"
                          style="width: 240px;"
                          @change="handleQuery" />
          <el-select v-else
                     v-model="searchForm.year"
                     placeholder="选择年份"
                     style="width: 140px;"
                     @change="handleQuery">
            <el-option v-for="year in yearOptions"
                       :key="year"
                       :label="year + '年'"
                       :value="year" />
          </el-select>
        </el-form-item>
        <el-form-item>
@@ -86,14 +90,13 @@
        </el-icon>
        能耗单耗数据
      </h2>
      <el-table :data="tableData"
      <el-table :data="tableValue"
                v-loading="tableLoading"
                border>
        <el-table-column prop="meterReadingDate"
                         label="日期"
                         align="center"
                         width="120" />
        <el-table-column prop="type"
                         align="center" />
        <!-- <el-table-column prop="type"
                         label="类型"
                         align="center"
                         width="100">
@@ -102,25 +105,22 @@
              {{ scope.row.type }}
            </el-tag>
          </template>
        </el-table-column>
        </el-table-column> -->
        <el-table-column prop="energyTyep"
                         label="能耗类型"
                         align="center"
                         width="100">
                         align="center">
          <template #default="scope">
            <el-tag :type="getEnergyTypeType(scope.row.energyTyep)">
              {{ scope.row.energyTyep }}
            <el-tag :type="getEnergyTypeType(scope.row.type)">
              {{ scope.row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="consumption"
                         label="用量"
                         align="right"
                         width="120" />
                         align="right" />
        <el-table-column prop="cost"
                         label="成本"
                         align="right"
                         width="120">
                         align="right">
          <template #default="scope">
            <span class="data-value">¥{{ scope.row.cost }}</span>
          </template>
@@ -144,20 +144,56 @@
  import * as echarts from "echarts";
  import { energyConsumptionDetailStatistics } from "@/api/energyManagement/energyType";

  // 统计维度
  const statisticsType = ref("day");

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

  // 生成年份选项
  const years = [];
  // 生成年份选项（最近7年）
  const yearOptions = [];
  const currentYear = new Date().getFullYear();
  for (let i = currentYear - 5; i <= currentYear; i++) {
    years.push(i);
  for (let i = currentYear - 6; i <= currentYear; i++) {
    yearOptions.push(i);
  }

  // 处理统计维度变化
  const handleTypeChange = () => {
    // 重置时间选择
    if (statisticsType.value === "day") {
      // 设置默认日期范围为最近30天
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 29);
      searchForm.dateRange = [
        `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(
          2,
          "0"
        )}-${String(start.getDate()).padStart(2, "0")}`,
        `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(
          2,
          "0"
        )}-${String(end.getDate()).padStart(2, "0")}`,
      ];
    } else if (statisticsType.value === "month") {
      // 设置默认月份范围为最近6个月
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 5);
      searchForm.monthRange = [
        `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, "0")}`,
        `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(2, "0")}`,
      ];
    } else {
      searchForm.year = currentYear;
    }
    handleQuery();
  };

  // 表格数据
  const tableData = ref([]);
@@ -191,11 +227,9 @@
  const updateChart = () => {
    const data = tableData.value;
    let xAxisData = [];
    let seriesDataKey = "monthlyData";
    let seriesDataMap = item => item.unitConsumption;

    // 根据时间维度准备数据
    if (searchForm.timeDimension === "year") {
    // 根据统计维度准备数据
    if (statisticsType.value === "year") {
      // 年度模式：12个月
      xAxisData = [
        "1月",
@@ -211,43 +245,91 @@
        "11月",
        "12月",
      ];
    } else if (statisticsType.value === "month") {
      // 月度模式：根据选择的月份范围
      if (searchForm.monthRange && searchForm.monthRange.length === 2) {
        const startMonth = searchForm.monthRange[0];
        const endMonth = searchForm.monthRange[1];
        const [startYear, startMonthNum] = startMonth.split("-");
        const [endYear, endMonthNum] = endMonth.split("-");

        xAxisData = [];
        let currentYear = parseInt(startYear);
        let currentMonth = parseInt(startMonthNum);
        const endYearInt = parseInt(endYear);
        const endMonthInt = parseInt(endMonthNum);

        while (
          currentYear < endYearInt ||
          (currentYear === endYearInt && currentMonth <= endMonthInt)
        ) {
          xAxisData.push(
            `${currentYear}-${String(currentMonth).padStart(2, "0")}`
          );
          currentMonth++;
          if (currentMonth > 12) {
            currentMonth = 1;
            currentYear++;
          }
        }
    } 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";
        // 默认显示最近6个月
        xAxisData = [];
        const end = new Date();
        for (let i = 5; i >= 0; i--) {
          const date = new Date();
          date.setMonth(date.getMonth() - i);
          xAxisData.push(
            `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
              2,
              "0"
            )}`
          );
        }
      }
    } else {
      // 按日统计：根据选择的日期范围
      if (searchForm.dateRange && searchForm.dateRange.length === 2) {
        const startDate = searchForm.dateRange[0];
        const endDate = searchForm.dateRange[1];

        xAxisData = [];
        let currentDate = new Date(startDate);
        const end = new Date(endDate);

        while (currentDate <= end) {
          xAxisData.push(
            `${currentDate.getFullYear()}-${String(
              currentDate.getMonth() + 1
            ).padStart(2, "0")}-${String(currentDate.getDate()).padStart(2, "0")}`
          );
          currentDate.setDate(currentDate.getDate() + 1);
        }
      } else {
        // 默认显示最近30天
        xAxisData = [];
        const end = new Date();
        for (let i = 29; i >= 0; i--) {
          const date = new Date();
          date.setDate(date.getDate() - i);
          xAxisData.push(
            `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
              2,
              "0"
            )}-${String(date.getDate()).padStart(2, "0")}`
          );
        }
      }
    }

    // 准备图表数据
    const series = [];
    const energyTypes = ["水", "电", "蒸汽"];

    energyTypes.forEach(type => {
      const typeData = data.find(item => item.energyTyep === type);
      if (typeData) {
        series.push({
          name: type,
          type: "line",
          data: typeData.cost,
          smooth: true,
          symbol: "circle",
          symbolSize: 8,
          lineStyle: {
            width: 3,
          },
          itemStyle: {
            color:
              getEnergyTypeType(type) === "primary"
                ? "#409EFF"
                : getEnergyTypeType(type) === "warning"
                ? "#E6A23C"
                : "#67C23A",
          },
        });
    // 提取所有唯一的meterReadingDate并排序
    const allDates = [...new Set(data.map(item => item.meterReadingDate))].sort(
      (a, b) => {
        return new Date(a) - new Date(b);
      }
    });
    );
    // 使用实际的meterReadingDate作为横轴数据
    xAxisData = allDates;

    const option = {
      tooltip: {
@@ -258,7 +340,7 @@
        textStyle: { color: "#303133" },
      },
      legend: {
        data: energyTypes,
        data: ["单耗"],
        top: 0,
        right: 10,
        textStyle: { color: "#606266" },
@@ -275,7 +357,7 @@
        data: xAxisData,
        axisLabel: {
          color: "#606266",
          rotate: searchForm.timeDimension === "month" ? 45 : 0,
          rotate: statisticsType.value === "month" ? 45 : 0,
        },
        axisLine: { lineStyle: { color: "#ebeef5" } },
        splitLine: { show: false },
@@ -288,11 +370,25 @@
        axisLine: { show: false },
        splitLine: { lineStyle: { color: "#f0f2f5" } },
      },
      series: series,
      series: {
        name: "单耗",
        type: "line",
        data: data.map(item => item.totalCost),
        smooth: true,
        symbol: "circle",
        symbolSize: 8,
        lineStyle: {
          width: 3,
        },
        itemStyle: {
          color: "#409EFF",
        },
      },
    };

    consumptionChartInstance.setOption(option);
  };
  const tableValue = ref([]);

  // 查询
  const handleQuery = () => {
@@ -300,26 +396,51 @@

    const params = {
      type: "",
      state: searchForm.timeDimension === "year" ? "年" : "月",
      state:
        statisticsType.value === "year"
          ? "年"
          : statisticsType.value === "month"
          ? "月"
          : "日",
    };

    if (searchForm.energyType && searchForm.energyType !== "全部") {
      params.type = searchForm.energyType;
    }

    if (searchForm.timeDimension === "year") {
    if (statisticsType.value === "year") {
      params.startDate = searchForm.year + "-01-01";
      params.endDate = searchForm.year + "-12-31";
      params.days = 365;
    } else if (searchForm.timeDimension === "month") {
      const year = searchForm.year;
      const month = searchForm.month;
      const lastDay = new Date(year, month, 0).getDate();
      params.startDate = `${year}-${String(month).padStart(2, "0")}-01`;
      params.endDate = `${year}-${String(month).padStart(2, "0")}-${String(
        lastDay
      ).padStart(2, "0")}`;
      params.days = lastDay;
      // 计算天数
      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 === "month" && searchForm.monthRange) {
      const [startMonth, endMonth] = searchForm.monthRange;
      const [startYearStr, startMonthStr] = startMonth.split("-");
      const [endYearStr, endMonthStr] = endMonth.split("-");

      params.startDate = `${startYearStr}-${startMonthStr}-01`;

      const endYear = Number(endYearStr);
      const endMonthNum = Number(endMonthStr);
      const lastDay = new Date(endYear, endMonthNum, 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 === "day" && searchForm.dateRange) {
      params.startDate = searchForm.dateRange[0];
      params.endDate = searchForm.dateRange[1];
      // 计算天数
      const start = new Date(params.startDate);
      const end = new Date(params.endDate);
      params.days = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1;
    }

    energyConsumptionDetailStatistics(params)
@@ -327,6 +448,27 @@
        if (res.code === 200) {
          const data = res.data;
          tableData.value = data.energyCostDtos || [];
          tableValue.value = [];
          tableData.value.forEach(item => {
            tableValue.value.push({
              meterReadingDate: item.meterReadingDate,
              consumption: item.waterConsumption,
              cost: item.waterCost,
              type: "水",
            });
            tableValue.value.push({
              consumption: item.electricityConsumption,
              cost: item.electricityCost,
              meterReadingDate: item.meterReadingDate,
              type: "电",
            });
            tableValue.value.push({
              consumption: item.gasConsumption,
              cost: item.gasCost,
              meterReadingDate: item.meterReadingDate,
              type: "蒸汽",
            });
          });
          updateChart();
        } else {
          ElMessage.error(res.message || "获取数据失败");
@@ -345,10 +487,35 @@

  // 重置
  const handleReset = () => {
    searchForm.timeDimension = "year";
    searchForm.year = new Date().getFullYear();
    searchForm.month = new Date().getMonth() + 1;
    // 重置搜索表单
    searchForm.energyType = "";
    if (statisticsType.value === "day") {
      // 设置默认日期范围为最近30天
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 29);
      searchForm.dateRange = [
        `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(
          2,
          "0"
        )}-${String(start.getDate()).padStart(2, "0")}`,
        `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(
          2,
          "0"
        )}-${String(end.getDate()).padStart(2, "0")}`,
      ];
    } else if (statisticsType.value === "month") {
      // 设置默认月份范围为最近6个月
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 5);
      searchForm.monthRange = [
        `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, "0")}`,
        `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(2, "0")}`,
      ];
    } else {
      searchForm.year = new Date().getFullYear();
    }
    handleQuery();
  };

@@ -363,6 +530,32 @@
  };

  onMounted(() => {
    // 初始化时间范围
    if (statisticsType.value === "day") {
      // 设置默认日期范围为最近30天
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 29);
      searchForm.dateRange = [
        `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(
          2,
          "0"
        )}-${String(start.getDate()).padStart(2, "0")}`,
        `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(
          2,
          "0"
        )}-${String(end.getDate()).padStart(2, "0")}`,
      ];
    } else if (statisticsType.value === "month") {
      // 设置默认月份范围为最近6个月
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 5);
      searchForm.monthRange = [
        `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, "0")}`,
        `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(2, "0")}`,
      ];
    }
    handleQuery();
    initChart();
    window.addEventListener("resize", handleResize);