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

gaoluyang

2025-11-19 5e3624b0f7d95aee0dbf3e8c5797b5205c41bc21

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

 src/api/equipmentManagement/repair.js

@@ -70,3 +70,19 @@
    data,
  });
};
// 查询设备的报修金额-每月
export const monthlyAmount = (query) => {
  return request({
    url: `/device/repair/monthlyAmount`,
    method: "get",
    params: query,
  });
};
// 查询设备的报修金额-每年
export const yearlyAmount = (query) => {
  return request({
    url: `/device/repair/yearlyAmount`,
    method: "get",
    params: query,
  });
};

 src/api/equipmentManagement/upkeep.js

@@ -70,3 +70,19 @@
    method: "delete",
  });
};
// 查询设备的报修金额-每月
export const monthlyAmount = (query) => {
  return request({
    url: `/device/maintenance/monthlyAmount`,
    method: "get",
    params: query,
  });
};
// 查询设备的报修金额-每年
export const yearlyAmount = (query) => {
  return request({
    url: `/device/maintenance/yearlyAmount`,
    method: "get",
    params: query,
  });
};

 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>

 src/views/equipmentManagement/repair/Modal/MaintainModal.vue

@@ -1,5 +1,5 @@
<template>
  <el-dialog v-model="visible" :title="modalOptions.title" direction="ltr">
  <el-dialog v-model="visible" :title="modalOptions.title" direction="ltr" @close="handleDialogClose">
    <el-form :model="form" :rules="rules" label-width="110px" ref="formRef">
      <el-form-item label="维修人" prop="maintenanceName">
        <el-input v-model="form.maintenanceName" placeholder="请输入维修人" />
@@ -7,8 +7,8 @@
      <el-form-item label="维修结果" prop="maintenanceResult">
        <el-input v-model="form.maintenanceResult" placeholder="请输入维修结果" />
      </el-form-item>
      <el-form-item label="本次维修金额" prop="money">
        <el-input-number v-model="form.money" :min="0" :precision="2" style="width: 100%" />
      <el-form-item label="本次维修金额" prop="repairPrice">
        <el-input-number v-model="form.repairPrice" :min="0" :precision="2" style="width: 100%" />
      </el-form-item>
      <el-form-item label="维修日期" prop="maintenanceTime">
        <el-date-picker
@@ -26,7 +26,7 @@
            <el-button type="primary" @click="sendForm" :loading="loading">
                {{ modalOptions.confirmText }}
            </el-button>
      <el-button @click="closeModal">{{ modalOptions.cancelText }}</el-button>
      <el-button @click="handleDialogClose">{{ modalOptions.cancelText }}</el-button>
    </template>
  </el-dialog>
</template>
@@ -61,20 +61,20 @@
  maintenanceName: undefined, // 维修名称
  maintenanceResult: undefined, // 维修结果
  maintenanceTime: undefined, // 维修日期
  money: undefined, // 本次维修金额
  repairPrice: undefined, // 本次维修金额
});

const rules = {
  maintenanceName: [{ required: true, message: "请输入维修人", trigger: "blur" }],
  maintenanceResult: [{ required: true, message: "请输入维修结果", trigger: "blur" }],
  money: [{ required: true, message: "请输入本次维修金额", trigger: "change" }],
  repairPrice: [{ required: true, message: "请输入本次维修金额", trigger: "change" }],
  maintenanceTime: [{ required: true, message: "请选择维修日期", trigger: "change" }],
};

const setForm = (data) => {
  form.maintenanceName = data.maintenanceName ?? userStore.nickName;
  form.maintenanceResult = data.maintenanceResult;
  form.money = data.money;
  form.repairPrice = data.repairPrice;
  form.maintenanceTime =
    dayjs(data.maintenanceTime).format("YYYY-MM-DD HH:mm:ss") ??
    dayjs().format("YYYY-MM-DD HH:mm:ss");
@@ -83,14 +83,12 @@
const sendForm = async () => {
  await formRef.value.validate(async (valid) => {
    if (!valid) return;
    loading.value = true;
    const { code } = await addMaintain({ id: id.value, ...form });
    if (code == 200) {
      emits("ok");
      resetForm();
      closeModal();
    }
    loading.value = false;
  });
};

@@ -100,6 +98,14 @@
  setForm(row);
};

const handleDialogClose = () => {
  resetForm();
  nextTick(() => {
    formRef.value?.clearValidate?.();
  });
  closeModal();
};

defineExpose({
  open,
});

 src/views/equipmentManagement/upkeep/Modal/MaintenanceModal.vue

@@ -24,8 +24,8 @@
          <el-option label="维修" :value="0"></el-option>
        </el-select>
      </el-form-item>
            <el-form-item label="本次维修金额" prop="money">
                <el-input-number v-model="form.money" :min="0" :precision="2" style="width: 100%" />
            <el-form-item label="本次保养金额" prop="maintenancePrice">
                <el-input-number v-model="form.maintenancePrice" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
    </el-form>
    <template #footer>
@@ -70,7 +70,7 @@
  maintenanceActuallyName: undefined, // 实际保养人
  maintenanceActuallyTime: undefined, // 实际保养日期
  maintenanceResult: undefined, // 保养结果
    money: undefined, // 保养金额
    maintenancePrice: undefined, // 保养金额
});

const rules = {
@@ -83,7 +83,7 @@
  maintenanceResult: [
    { required: true, message: "请选择保养结果", trigger: "change" },
  ],
    money: [
    maintenancePrice: [
    { required: true, message: "请输入本次保养金额", trigger: "change" },
  ],
};
@@ -91,14 +91,12 @@
const sendForm = async () => {
  await formRef.value.validate(async (valid) => {
    if (!valid) return;
    loading.value = true;
    const { code } = await addMaintenance({ id: id.value, ...form });
    if (code == 200) {
      emits("ok");
      resetForm();
      closeModal();
    }
    loading.value = false;
  });
};

@@ -115,7 +113,7 @@
    ? dayjs(row.maintenanceActuallyTime).format("YYYY-MM-DD HH:mm:ss")
    : undefined;
  form.maintenanceResult = row.maintenanceResult;
  form.money = row.money;
  form.maintenancePrice = row.maintenancePrice;
};
defineExpose({
  open,