能耗成本核算---按日月汇总统计页面对接

zss

7 天以前 b3f2fb5aef5945a5b7790d41cdb9504d1650c1e5

 src/views/costAccounting/energyCosts/index.vue

@@ -42,7 +42,7 @@
                         value="气" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="能耗用途">
          <!-- <el-form-item label="能耗用途">
            <el-select
              v-model="searchForm.type"
              placeholder=""
@@ -53,7 +53,7 @@
              <el-option label="生产" value="生产" />
              <el-option label="办公" value="办公" />
            </el-select>
          </el-form-item>
          </el-form-item> -->
          <el-form-item label="时间范围">
            <el-date-picker
              v-if="statisticsType === 'day'"
@@ -112,7 +112,7 @@
            <div class="kpi-left">
              <div class="kpi-label">总能耗成本</div>
              <div class="kpi-value">
                ¥{{ formatMoney(animatedOverview.totalCost) }}
                ¥{{ formatMoney(animatedOverview.totalEnergyCost) }}
              </div>
              <div class="kpi-meta">
                <span
@@ -143,7 +143,7 @@
              <button
                class="kpi-action"
                type="button"
                @click="copyKpi('totalCost')"
                @click="copyKpi('totalEnergyCost')"
              >
                复制
              </button>
@@ -165,7 +165,7 @@
            <div class="kpi-left">
              <div class="kpi-label">生产能耗成本</div>
              <div class="kpi-value">
                ¥{{ formatMoney(animatedOverview.productionCost) }}
                ¥{{ formatMoney(animatedOverview.productEnergyCost) }}
              </div>
              <div class="kpi-meta">
                <span
@@ -196,7 +196,7 @@
              <button
                class="kpi-action"
                type="button"
                @click="copyKpi('productionCost')"
                @click="copyKpi('productEnergyCost')"
              >
                复制
              </button>
@@ -218,7 +218,7 @@
            <div class="kpi-left">
              <div class="kpi-label">办公能耗成本</div>
              <div class="kpi-value">
                ¥{{ formatMoney(animatedOverview.officeCost) }}
                ¥{{ formatMoney(animatedOverview.officeEnergyCost) }}
              </div>
              <div class="kpi-meta">
                <span
@@ -249,7 +249,7 @@
              <button
                class="kpi-action"
                type="button"
                @click="copyKpi('officeCost')"
                @click="copyKpi('officeEnergyCost')"
              >
                复制
              </button>
@@ -270,7 +270,7 @@
            <div class="kpi-left">
              <div class="kpi-label">平均成本</div>
              <div class="kpi-value">
                ¥{{ formatMoney(animatedOverview.avgCost) }}
                ¥{{ formatMoney(animatedOverview.averageEnergyCost) }}
                <span class="kpi-unit"
                  >/{{ statisticsType === "day" ? "日" : "月" }}</span
                >
@@ -286,7 +286,7 @@
              <button
                class="kpi-action"
                type="button"
                @click="copyKpi('avgCost')"
                @click="copyKpi('averageEnergyCost')"
              >
                复制
              </button>
@@ -465,7 +465,7 @@
                  </div>
                </el-card>
              </el-col>
              <el-col :xs="24" :lg="12">
              <!-- <el-col :xs="24" :lg="12">
                <el-card class="chart-card" shadow="never">
                  <template #header>
                    <div class="chart-head">
@@ -503,7 +503,7 @@
                    </div>
                  </div>
                </el-card>
              </el-col>
              </el-col> -->
            </el-row>
          </div>
        </transition>
@@ -568,13 +568,13 @@
        </template>
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column
          prop="timePeriod"
          prop="meterReadingDate"
          :label="timeColumnLabel"
          align="center"
          sortable="custom"
        />
        <el-table-column
          prop="energyType"
          prop="energyTyep"
          label="能耗类型"
          width="100"
          align="center"
@@ -583,8 +583,8 @@
          filter-placement="bottom-end"
        >
          <template #default="scope">
            <el-tag :type="getEnergyTypeType(scope.row.energyType)">
              {{ scope.row.energyType }}
            <el-tag :type="getEnergyTypeType(scope.row.energyTyep)">
              {{ scope.row.energyTyep }}
            </el-tag>
          </template>
        </el-table-column>
@@ -598,28 +598,28 @@
          filter-placement="bottom-end"
        >
          <template #default="scope">
            <el-tag :type="scope.row.type === '生产' ? 'primary' : 'info'">
            <el-tag :type="scope.row.type === '生产' ? 'primary' : 'warning'">
              {{ scope.row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="consumption" label="用量" align="right">
        <el-table-column prop="dosage" label="用量" align="right">
          <template #default="scope">
            <span class="consumption-value">{{
              formatNumber(scope.row.consumption, 2)
              formatNumber(scope.row.dosage, 2)
            }}</span>
            <span class="consumption-unit">{{ scope.row.unit }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          prop="unitPrice"
          label="单价(元)"
          align="right"
          sortable="custom"
        >
          <template #default="scope">
            <span class="price-value">{{
              formatNumber(scope.row.price, 2)
              formatNumber(scope.row.unitPrice, 2)
            }}</span>
          </template>
        </el-table-column>
@@ -674,14 +674,14 @@
} from "@element-plus/icons-vue";
import * as echarts from "echarts";
// import { energyCostStatistics } from "@/api/costAccounting/energyCosts";
import { energyConsumptionDetailStatistics } from "@/api/energyManagement/energyType";
import { energyConsumptionDetailAccount } from "@/api/energyManagement/energyType";
// 统计维度：day-按日，month-按月
const statisticsType = ref("day");

// 搜索表单
const searchForm = reactive({
  // energyType: "",
  type: "",
  // type: "",
  dateRange: (() => {
    // 默认最近7天
    const end = new Date();
@@ -705,18 +705,18 @@

// 统计概览
const overview = reactive({
  totalCost: "0.00",
  productionCost: "0.00",
  officeCost: "0.00",
  avgCost: "0.00",
  totalEnergyCost: "0.00",
  productEnergyCost: "0.00",
  officeEnergyCost: "0.00",
  averageEnergyCost: "0.00",
});

const selectedKpi = ref("all"); // all | production | office
const animatedOverview = reactive({
  totalCost: 0,
  productionCost: 0,
  officeCost: 0,
  avgCost: 0,
  totalEnergyCost: 0,
  productEnergyCost: 0,
  officeEnergyCost: 0,
  averageEnergyCost: 0,
});

const formatMoney = (v) => {
@@ -754,10 +754,10 @@
watch(
  () => ({ ...overview }),
  (val) => {
    animateNumber("totalCost", Number.parseFloat(val.totalCost));
    animateNumber("productionCost", Number.parseFloat(val.productionCost));
    animateNumber("officeCost", Number.parseFloat(val.officeCost));
    animateNumber("avgCost", Number.parseFloat(val.avgCost));
    animateNumber("totalEnergyCost", Number.parseFloat(val.totalEnergyCost));
    animateNumber("productEnergyCost", Number.parseFloat(val.productEnergyCost));
    animateNumber("officeEnergyCost", Number.parseFloat(val.officeEnergyCost));
    animateNumber("averageEnergyCost", Number.parseFloat(val.averageEnergyCost));
  },
  { deep: true, immediate: true }
);
@@ -774,7 +774,7 @@
  const rows = Array.isArray(tableData.value) ? tableData.value : [];
  const byTime = new Map();
  for (const r of rows) {
    const t = r?.timePeriod ?? "";
    const t = r?.meterReadingDate ?? "";
    if (!t) continue;
    if (!byTime.has(t)) byTime.set(t, { total: 0, production: 0, office: 0 });
    const bucket = byTime.get(t);
@@ -846,10 +846,10 @@

const copyKpi = async (field) => {
  const map = {
    totalCost: animatedOverview.totalCost,
    productionCost: animatedOverview.productionCost,
    officeCost: animatedOverview.officeCost,
    avgCost: animatedOverview.avgCost,
    totalEnergyCost: animatedOverview.totalEnergyCost,
    productEnergyCost: animatedOverview.productEnergyCost,
    officeEnergyCost: animatedOverview.officeEnergyCost,
    averageEnergyCost: animatedOverview.averageEnergyCost,
  };
  const raw = map[field];
  const text = `¥${formatMoney(raw)}`;
@@ -997,7 +997,7 @@
  { text: "办公", value: "办公" },
];

const filterEnergyType = (value, row) => row.energyType === value;
const filterEnergyType = (value, row) => row.energyTyep === value;
const filterEnergyPurpose = (value, row) => row.type === value;

// 分页
@@ -1137,7 +1137,7 @@
    },
    xAxis: {
      type: "category",
      data: data.map((item) => item.timePeriod),
      data: data.map((item) => item.meterReadingDate),
      axisLabel: {
        rotate: statisticsType.value === "day" ? 45 : 0,
        color: "rgba(15, 23, 42, 0.62)",
@@ -1457,7 +1457,7 @@
  const params = {
    days: 0,
    // energyType: searchForm.energyType || undefined,
    type: searchForm.type || undefined,
    // type: searchForm.type || undefined,
    pageNum: page.current,
    pageSize: page.size,
  };
@@ -1505,38 +1505,36 @@
  }

  // 调用接口获取数据
  energyConsumptionDetailStatistics(params)
  energyConsumptionDetailAccount(params)
    .then((res) => {
      if (res.code === 200) {
        const data = res.data;
        overview.totalConsumption = data.totalEnergyConsumption || "0";
        overview.totalAmount = data.totalEnergyCost || "0";
        overview.avgConsumption = data.averageConsumption || "0";
        overview.compareRate = data.changeVite || 0;
        overview.totalEnergyCost = data.totalEnergyCost || "0";
        overview.productEnergyCost = data.productEnergyCost || "0";
        overview.officeEnergyCost = data.officeEnergyCost || "0";
        overview.averageEnergyCost = data.averageEnergyCost || "0";

        // 处理表格数据
        tableData.value = data.energyCostDtos || [];
        tableData.value = data.energyConsumptionDetailDtoList || [];
        page.total = tableData.value.length || 0;
      } else {
        ElMessage.error(res.message || "获取数据失败");
        tableData.value = [];
        page.total = 0;
        overview.totalCost = "0.00";
        overview.productionCost = "0.00";
        overview.officeCost = "0.00";
        overview.avgCost = "0.00";
        overview.totalEnergyCost = "0.00";
        overview.productEnergyCost = "0.00";
        overview.officeEnergyCost = "0.00";
        overview.averageEnergyCost = "0.00";
      }
    })
    .catch((err) => {
      console.error("获取数据异常：", err);
      // 【假数据（Mock）已禁用】接口异常时不再生成随机假数据，避免误用到生产数据链路
      ElMessage.error("获取数据异常");
      tableData.value = [];
      page.total = 0;
      overview.totalCost = "0.00";
      overview.productionCost = "0.00";
      overview.officeCost = "0.00";
      overview.avgCost = "0.00";
      overview.totalEnergyCost = "0.00";
      overview.productEnergyCost = "0.00";
      overview.officeEnergyCost = "0.00";
      overview.averageEnergyCost = "0.00";
    })
    .finally(() => {
      tableLoading.value = false;
@@ -1717,7 +1715,7 @@
}

.filter-form {
  flex: 1 1 auto;
  flex: 0.1 1 auto;
  min-width: 0;
}

@@ -2741,4 +2739,4 @@
  max-height: 600px;
  opacity: 1;
}
</style>
</style>