From 5e3624b0f7d95aee0dbf3e8c5797b5205c41bc21 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 19 十一月 2025 11:40:56 +0800
Subject: [PATCH] 1.金鹰黄金-汇总页面可以看到每个设备的每个月的金额，也可以选择看每年的金额
---
src/views/equipmentManagement/amountSummary/index.vue | 188 +++++++++++++++++++++++++++++++++++-----------
1 files changed, 143 insertions(+), 45 deletions(-)
diff --git a/src/views/equipmentManagement/amountSummary/index.vue b/src/views/equipmentManagement/amountSummary/index.vue
index 051eb83..9d6a8bc 100644
--- a/src/views/equipmentManagement/amountSummary/index.vue
+++ b/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>
--
Gitblit v1.9.3