追踪进度

zhangwencui

6 小时以前 63bc8594046177d976d0436c709e928d71bbba0d

 src/views/reportAnalysis/unitEnergyConsumption/index.vue

@@ -89,53 +89,48 @@
      <el-table :data="tableData"
                v-loading="tableLoading"
                border>
        <el-table-column prop="energyType"
                         label="能耗"
                         width="100"
                         align="center">
        <el-table-column prop="meterReadingDate"
                         label="日期"
                         align="center"
                         width="120" />
        <el-table-column prop="type"
                         label="类型"
                         align="center"
                         width="100">
          <template #default="scope">
            <el-tag :type="getEnergyTypeType(scope.row.energyType)">
              {{ scope.row.energyType }}
            <el-tag :type="scope.row.type === '生产' ? 'primary' : 'success'">
              {{ scope.row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="unit"
                         label="单位"
                         width="120"
                         align="center" />
        <el-table-column label="月度数据"
                         v-if="searchForm.timeDimension === 'month'">
          <el-table-column prop="monthlyUnitConsumption"
                           label="月度累计单耗"
                           align="right">
        <el-table-column prop="energyTyep"
                         label="能耗类型"
                         align="center"
                         width="100">
            <template #default="scope">
              <span class="data-value">{{ scope.row.monthlyUnitConsumption }}</span>
            <el-tag :type="getEnergyTypeType(scope.row.energyTyep)">
              {{ scope.row.energyTyep }}
            </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="monthlyConsumption"
                           label="月度累计用量/月度累计产量"
                           align="right">
        <el-table-column prop="consumption"
                         label="用量"
                         align="right"
                         width="120" />
        <el-table-column prop="cost"
                         label="成本"
                         align="right"
                         width="120">
            <template #default="scope">
              <span class="data-value">{{ scope.row.monthlyConsumption }}/{{ scope.row.monthlyProduction }}</span>
            <span class="data-value">¥{{ scope.row.cost }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="年度数据"
                         v-if="searchForm.timeDimension === 'year'">
          <el-table-column prop="annualUnitConsumption"
                           label="年度累计单耗"
        <el-table-column prop="unitConsumption"
                         label="单耗"
                           align="right">
            <template #default="scope">
              <span class="data-value">{{ scope.row.annualUnitConsumption }}</span>
            <span class="data-value">{{ scope.row.unitConsumption }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="annualConsumption"
                           label="年度累计用量/年度累计产量"
                           align="right">
            <template #default="scope">
              <span class="data-value">{{ scope.row.annualConsumption }}/{{ scope.row.annualProduction }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
@@ -147,6 +142,7 @@
  import { ElMessage } from "element-plus";
  import { TrendCharts, List } from "@element-plus/icons-vue";
  import * as echarts from "echarts";
  import { energyConsumptionDetailStatistics } from "@/api/energyManagement/energyType";

  // 搜索表单
  const searchForm = reactive({
@@ -229,12 +225,12 @@
    const energyTypes = ["水", "电", "蒸汽"];

    energyTypes.forEach(type => {
      const typeData = data.find(item => item.energyType === type);
      if (typeData && typeData[seriesDataKey]) {
      const typeData = data.find(item => item.energyTyep === type);
      if (typeData) {
        series.push({
          name: type,
          type: "line",
          data: typeData[seriesDataKey].map(seriesDataMap),
          data: typeData.cost,
          smooth: true,
          symbol: "circle",
          symbolSize: 8,
@@ -302,12 +298,49 @@
  const handleQuery = () => {
    tableLoading.value = true;

    // 模拟接口调用
    setTimeout(() => {
      generateMockData();
      tableLoading.value = false;
    const params = {
      type: "",
      state: searchForm.timeDimension === "year" ? "年" : "月",
    };

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

    if (searchForm.timeDimension === "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;
    }

    energyConsumptionDetailStatistics(params)
      .then(res => {
        if (res.code === 200) {
          const data = res.data;
          tableData.value = data.energyCostDtos || [];
      updateChart();
    }, 500);
        } else {
          ElMessage.error(res.message || "获取数据失败");
          tableData.value = [];
        }
      })
      .catch(err => {
        console.error("获取数据异常：", err);
        ElMessage.error("系统异常，获取数据失败");
        tableData.value = [];
      })
      .finally(() => {
        tableLoading.value = false;
      });
  };

  // 重置
@@ -322,83 +355,6 @@
  // 导出
  const handleExport = () => {
    ElMessage.success("报表导出成功");
  };

  // 生成假数据
  const generateMockData = () => {
    const energyTypes = [
      {
        energyType: "水",
        unit: "吨/立方米",
        monthlyUnitConsumption: (Math.random() * 0.5 + 0.8).toFixed(4),
        monthlyConsumption: Math.floor(Math.random() * 5000 + 10000),
        monthlyProduction: Math.floor(Math.random() * 10000 + 20000),
        annualUnitConsumption: (Math.random() * 0.3 + 0.9).toFixed(4),
        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: "电",
        unit: "度/立方米",
        monthlyUnitConsumption: (Math.random() * 2 + 5).toFixed(4),
        monthlyConsumption: Math.floor(Math.random() * 50000 + 100000),
        monthlyProduction: Math.floor(Math.random() * 10000 + 20000),
        annualUnitConsumption: (Math.random() * 1.5 + 5.5).toFixed(4),
        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: "蒸汽",
        unit: "吨/立方米",
        monthlyUnitConsumption: (Math.random() * 0.3 + 0.5).toFixed(4),
        monthlyConsumption: Math.floor(Math.random() * 3000 + 6000),
        monthlyProduction: Math.floor(Math.random() * 10000 + 20000),
        annualUnitConsumption: (Math.random() * 0.2 + 0.55).toFixed(4),
        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),
      },
    ];

    if (searchForm.energyType && searchForm.energyType !== "全部") {
      tableData.value = energyTypes.filter(
        item => item.energyType === searchForm.energyType
      );
    } else {
      tableData.value = energyTypes;
    }
  };

  // 生成月度数据
  const generateMonthlyData = (min, max) => {
    const data = [];
    for (let i = 1; i <= 12; i++) {
      data.push({
        month: i,
        unitConsumption: (Math.random() * (max - min) + min).toFixed(4),
      });
    }
    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;
  };

  // 窗口大小变化时重新渲染图表