1.金鹰黄金-汇总页面可以看到每个设备的每个月的金额，也可以选择看每年的金额

gaoluyang

2025-11-19 5e3624b0f7d95aee0dbf3e8c5797b5205c41bc21

 src/views/equipmentManagement/amountSummary/index.vue

@@ -1,78 +1,176 @@
<template>
  <div class="app-container">
    <el-form :inline="true" :model="filters">
      <el-form-item label="查看模式">
        <el-radio-group v-model="mode" @change="buildColumns">
          <el-radio-button :value="'month'">按月</el-radio-button>
          <el-radio-button :value="'year'">按年</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="mode === 'month' || mode === 'year'" label="年份">
        <el-date-picker v-model="year" type="year" value-format="YYYY" format="YYYY" placeholder="请选择年份" @change="refresh" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="refresh">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="报修" name="repair">
        <el-form :inline="true" :model="filtersRepair">
          <el-form-item label="查看模式">
            <el-radio-group v-model="modeRepair" @change="buildColumnsRepair">
              <el-radio-button :value="'month'">按月</el-radio-button>
              <el-radio-button :value="'year'">按年</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="modeRepair === 'month' || modeRepair === 'year'" label="年份">
            <el-date-picker v-model="yearRepair" type="year" value-format="YYYY" format="YYYY" placeholder="请选择年份" @change="refreshRepair" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="refreshRepair">查询</el-button>
            <el-button @click="resetRepair">重置</el-button>
          </el-form-item>
        </el-form>

    <div class="table_list">
      <PIMTable
        rowKey="deviceId"
        :column="columns"
        :tableData="tableData"
        :page="{ current: 1, size: tableData.length || 10, total: tableData.length }"
      />
    </div>
        <div class="table_list">
          <PIMTable
            rowKey="deviceId"
            :column="columnsRepair"
            :tableData="tableDataRepair"
            :page="{ current: 1, size: tableDataRepair.length || 10, total: tableDataRepair.length }"
          />
        </div>
      </el-tab-pane>

      <el-tab-pane label="保养" name="maintain">
        <el-form :inline="true" :model="filtersMaintain">
          <el-form-item label="查看模式">
            <el-radio-group v-model="modeMaintain" @change="buildColumnsMaintain">
              <el-radio-button :value="'month'">按月</el-radio-button>
              <el-radio-button :value="'year'">按年</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="modeMaintain === 'month' || modeMaintain === 'year'" label="年份">
            <el-date-picker v-model="yearMaintain" type="year" value-format="YYYY" format="YYYY" placeholder="请选择年份" @change="refreshMaintain" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="refreshMaintain">查询</el-button>
            <el-button @click="resetMaintain">重置</el-button>
          </el-form-item>
        </el-form>

        <div class="table_list">
          <PIMTable
            rowKey="deviceId"
            :column="columnsMaintain"
            :tableData="tableDataMaintain"
            :page="{ current: 1, size: tableDataMaintain.length || 10, total: tableDataMaintain.length }"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
  </template>

<script setup>
import { ref, computed } from "vue";
import { ref } from "vue";
import { monthlyAmount, yearlyAmount } from "@/api/equipmentManagement/repair";
import { monthlyAmount as monthlyAmountMaintain, yearlyAmount as yearlyAmountMaintain } from "@/api/equipmentManagement/upkeep";

defineOptions({ name: "金额汇总" });

const mode = ref("month");
const year = ref(new Date().getFullYear().toString());
const filters = ref({});
const activeTab = ref("repair");

const columns = ref([]);
const tableData = ref([]);
// 报修
const modeRepair = ref("month");
const yearRepair = ref(new Date().getFullYear().toString());
const filtersRepair = ref({});
const columnsRepair = ref([]);
const tableDataRepair = ref([]);

const buildColumns = () => {
const fetchRepairData = async () => {
  try {
    const query = { year: yearRepair.value };
    const res = modeRepair.value === "month" ? await monthlyAmount(query) : await yearlyAmount(query);
    const list = res?.records || res?.data || res || [];
    tableDataRepair.value = Array.isArray(list) ? list : [];
  } catch (e) {
    tableDataRepair.value = [];
  }
};

const buildColumnsRepair = async () => {
  const base = [{ label: "设备名称", align: "center", prop: "deviceName", width: 180 }];
  if (mode.value === "month") {
  if (modeRepair.value === "month") {
    const monthCols = Array.from({ length: 12 }, (_, i) => ({
      label: `${i + 1}月`,
      align: "center",
      prop: `m${i + 1}`,
      prop: `month${i + 1}`,
    }));
    columns.value = [
    columnsRepair.value = [
      ...base,
      ...monthCols,
      { label: "总计", align: "center", prop: "total" },
    ];
  } else {
    columns.value = [
    columnsRepair.value = [
      ...base,
      { label: "金额", align: "center", prop: "yearAmount" },
      { label: "金额", align: "center", prop: "totalRepairPrice" },
    ];
  }
  await fetchRepairData();
};

const refreshRepair = async () => {
  await buildColumnsRepair();
};

const resetRepair = () => {
  modeRepair.value = "month";
  yearRepair.value = new Date().getFullYear().toString();
  refreshRepair();
};

// 保养
const modeMaintain = ref("month");
const yearMaintain = ref(new Date().getFullYear().toString());
const filtersMaintain = ref({});
const columnsMaintain = ref([]);
const tableDataMaintain = ref([]);

const fetchMaintainData = async () => {
  try {
    const query = { year: yearMaintain.value };
    const res = modeMaintain.value === "month" ? await monthlyAmountMaintain(query) : await yearlyAmountMaintain(query);
    const list = res?.records || res?.data || res || [];
    tableDataMaintain.value = Array.isArray(list) ? list : [];
  } catch (e) {
    tableDataMaintain.value = [];
  }
};

const refresh = async () => {
  buildColumns();
  tableData.value = [];
const buildColumnsMaintain = async () => {
  const base = [{ label: "设备名称", align: "center", prop: "deviceName", width: 180 }];
  if (modeMaintain.value === "month") {
    const monthCols = Array.from({ length: 12 }, (_, i) => ({
      label: `${i + 1}月`,
      align: "center",
      prop: `month${i + 1}`,
    }));
    columnsMaintain.value = [
      ...base,
      ...monthCols,
      { label: "总计", align: "center", prop: "total" },
    ];
  } else {
    columnsMaintain.value = [
      ...base,
      { label: "金额", align: "center", prop: "totalRepairPrice" },
    ];
  }
  await fetchMaintainData();
};

const reset = () => {
  mode.value = "month";
  year.value = new Date().getFullYear().toString();
  refresh();
const refreshMaintain = async () => {
  await buildColumnsMaintain();
};

buildColumns();
refresh();
const resetMaintain = () => {
  modeMaintain.value = "month";
  yearMaintain.value = new Date().getFullYear().toString();
  refreshMaintain();
};

buildColumnsRepair();
refreshRepair();
buildColumnsMaintain();
refreshMaintain();
</script>

<style scoped>