销售统计看板

zhangwencui

15 小时以前 4cea678dd431db704ed6c47f7c486281672fccb6

 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="能耗类型:">
@@ -66,51 +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="月度数据">
          <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="monthlyConsumption"
                           label="月度累计用量/月度累计产量"
                           align="right">
            <template #default="scope">
              <span class="data-value">{{ scope.row.monthlyConsumption }}/{{ scope.row.monthlyProduction }}</span>
            </template>
          </el-table-column>
        <el-table-column prop="energyTyep"
                         label="能耗类型"
                         align="center"
                         width="100">
          <template #default="scope">
            <el-tag :type="getEnergyTypeType(scope.row.energyTyep)">
              {{ scope.row.energyTyep }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="年度数据">
          <el-table-column prop="annualUnitConsumption"
                           label="年度累计单耗"
                           align="right">
            <template #default="scope">
              <span class="data-value">{{ scope.row.annualUnitConsumption }}</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 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.cost }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="unitConsumption"
                         label="单耗"
                         align="right">
          <template #default="scope">
            <span class="data-value">{{ scope.row.unitConsumption }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
@@ -122,10 +142,13 @@
  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({
    timeDimension: "year",
    year: new Date().getFullYear(),
    month: new Date().getMonth() + 1,
    energyType: "",
  });

@@ -167,32 +190,47 @@
  // 更新图表
  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 = [];
    const energyTypes = ["水", "电", "蒸汽"];

    energyTypes.forEach(type => {
      const typeData = data.find(item => item.energyType === type);
      if (typeData && typeData.monthlyData) {
      const typeData = data.find(item => item.energyTyep === type);
      if (typeData) {
        series.push({
          name: type,
          type: "line",
          data: typeData.monthlyData.map(item => item.unitConsumption),
          data: typeData.cost,
          smooth: true,
          symbol: "circle",
          symbolSize: 8,
@@ -234,8 +272,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 },
      },
@@ -257,17 +298,56 @@
  const handleQuery = () => {
    tableLoading.value = true;

    // 模拟接口调用
    setTimeout(() => {
      generateMockData();
      tableLoading.value = false;
      updateChart();
    }, 500);
    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();
        } else {
          ElMessage.error(res.message || "获取数据失败");
          tableData.value = [];
        }
      })
      .catch(err => {
        console.error("获取数据异常：", err);
        ElMessage.error("系统异常，获取数据失败");
        tableData.value = [];
      })
      .finally(() => {
        tableLoading.value = false;
      });
  };

  // 重置
  const handleReset = () => {
    searchForm.timeDimension = "year";
    searchForm.year = new Date().getFullYear();
    searchForm.month = new Date().getMonth() + 1;
    searchForm.energyType = "";
    handleQuery();
  };
@@ -275,65 +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),
      },
      {
        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),
      },
      {
        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),
      },
    ];

    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;
  };

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