From f94745d2d7e51fe6935986456bf34f9bc5d869bb Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期三, 25 三月 2026 10:47:03 +0800
Subject: [PATCH] 首页布局优化
---
src/views/costAccounting/productionCostAccounting/index.vue | 116 ++++++++++++++++++++-------------------------------------
1 files changed, 41 insertions(+), 75 deletions(-)
diff --git a/src/views/costAccounting/productionCostAccounting/index.vue b/src/views/costAccounting/productionCostAccounting/index.vue
index 8fc60c2..372a490 100644
--- a/src/views/costAccounting/productionCostAccounting/index.vue
+++ b/src/views/costAccounting/productionCostAccounting/index.vue
@@ -100,13 +100,9 @@
<div class="kpi-label">鎬荤敓浜ф垚鏈�</div>
<div class="kpi-value">楼{{ formatMoney(overview.totalCost) }}</div>
</div>
- <div class="kpi-item kpi-raw">
- <div class="kpi-label">鍘熸枡鎴愭湰</div>
- <div class="kpi-value">楼{{ formatMoney(overview.rawCost) }}</div>
- </div>
- <div class="kpi-item kpi-aux">
- <div class="kpi-label">杈呮枡鎴愭湰</div>
- <div class="kpi-value">楼{{ formatMoney(overview.auxCost) }}</div>
+ <div class="kpi-item kpi-avg">
+ <div class="kpi-label">姣忚鍗曞钩鍧囨垚鏈�</div>
+ <div class="kpi-value">楼{{ formatMoney(overview.avgCostPerOrder) }}</div>
</div>
<div class="kpi-item kpi-order">
<div class="kpi-label">璁㈠崟鏁伴噺</div>
@@ -125,17 +121,15 @@
</template>
<el-table :data="categorySummary" stripe class="lux-table" height="260">
<el-table-column prop="category" label="浜у搧绫诲埆" min-width="140" />
- <el-table-column prop="rawCost" label="鍘熸枡鎴愭湰(鍏�)" align="right">
+ <el-table-column prop="totalQuantity" label="鐢ㄩ噺" align="right" min-width="120">
<template #default="scope">
- <span class="price-value">{{ formatMoney(scope.row.rawCost) }}</span>
+ <span class="quantity-cell">
+ <span class="quantity-value">{{ formatNumber(scope.row.totalQuantity, 2) }}</span>
+ <span class="quantity-unit">{{ scope.row.unit || "-" }}</span>
+ </span>
</template>
</el-table-column>
- <el-table-column prop="auxCost" label="杈呮枡鎴愭湰(鍏�)" align="right">
- <template #default="scope">
- <span class="price-value">{{ formatMoney(scope.row.auxCost) }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="totalCost" label="鎬绘垚鏈�(鍏�)" align="right">
+ <el-table-column prop="totalCost" label="鎴愭湰(鍏�)" align="right">
<template #default="scope">
<span class="cost-value">楼{{ formatMoney(scope.row.totalCost) }}</span>
</template>
@@ -153,6 +147,14 @@
<el-table :data="orderSummary" stripe class="lux-table" height="260">
<el-table-column prop="orderNo" label="鐢熶骇璁㈠崟" min-width="150" />
<el-table-column prop="category" label="浜у搧绫诲埆" min-width="120" />
+ <el-table-column prop="totalQuantity" label="鐢ㄩ噺" align="right" min-width="120">
+ <template #default="scope">
+ <span class="quantity-cell">
+ <span class="quantity-value">{{ formatNumber(scope.row.totalQuantity, 2) }}</span>
+ <span class="quantity-unit">{{ scope.row.unit || "-" }}</span>
+ </span>
+ </template>
+ </el-table-column>
<el-table-column prop="totalCost" label="鎬绘垚鏈�(鍏�)" align="right">
<template #default="scope">
<span class="cost-value">楼{{ formatMoney(scope.row.totalCost) }}</span>
@@ -175,17 +177,15 @@
<el-table-column prop="timeLabel" :label="timeColumnLabel" min-width="110" />
<el-table-column prop="category" label="浜у搧绫诲埆" min-width="120" />
<el-table-column prop="orderNo" label="鐢熶骇璁㈠崟" min-width="150" />
- <el-table-column prop="rawCost" label="鍘熸枡鎴愭湰(鍏�)" align="right">
+ <el-table-column prop="totalQuantity" label="鐢ㄩ噺" align="right" min-width="130">
<template #default="scope">
- <span class="price-value">{{ formatMoney(scope.row.rawCost) }}</span>
+ <span class="quantity-cell">
+ <span class="quantity-value">{{ formatNumber(scope.row.totalQuantity, 2) }}</span>
+ <span class="quantity-unit">{{ scope.row.unit || "-" }}</span>
+ </span>
</template>
</el-table-column>
- <el-table-column prop="auxCost" label="杈呮枡鎴愭湰(鍏�)" align="right">
- <template #default="scope">
- <span class="price-value">{{ formatMoney(scope.row.auxCost) }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="totalCost" label="鎬绘垚鏈�(鍏�)" align="right">
+ <el-table-column prop="totalCost" label="鎴愭湰(鍏�)" align="right">
<template #default="scope">
<span class="cost-value">楼{{ formatMoney(scope.row.totalCost) }}</span>
</template>
@@ -234,16 +234,6 @@
</div>
<el-table :data="detailMaterials" class="lux-table" stripe>
<el-table-column prop="materialName" label="鐗╂枡鍚嶇О" min-width="120" />
- <el-table-column prop="materialType" label="绫诲瀷" width="94">
- <template #default="scope">
- <span
- class="material-type-tag"
- :class="scope.row.materialType === '鍘熸枡' ? 'is-raw' : 'is-aux'"
- >
- {{ scope.row.materialType }}
- </span>
- </template>
- </el-table-column>
<el-table-column prop="quantity" label="鎶曞叆閲�" align="right" min-width="140">
<template #default="scope">
<span class="quantity-cell">
@@ -264,16 +254,8 @@
</el-table-column>
</el-table>
<div class="drawer-foot">
- <div class="foot-item">
- <span class="foot-label">鍘熸枡</span>
- <span class="foot-value no-wrap-money">楼{{ formatMoney(detailRawCost) }}</span>
- </div>
- <div class="foot-item">
- <span class="foot-label">杈呮枡</span>
- <span class="foot-value no-wrap-money">楼{{ formatMoney(detailAuxCost) }}</span>
- </div>
<div class="foot-item total">
- <span class="foot-label">鍚堣</span>
+ <span class="foot-label">鎴愭湰鍚堣</span>
<span class="foot-value no-wrap-money">楼{{ formatMoney(detailTotalCost) }}</span>
</div>
</div>
@@ -402,16 +384,14 @@
const key = keyFn(item);
if (!map.has(key)) {
map.set(key, {
- rawCost: 0,
- auxCost: 0,
totalCost: 0,
+ totalQuantity: 0,
materials: [],
});
}
const bucket = map.get(key);
- if (item.materialType === "鍘熸枡") bucket.rawCost += item.cost;
- if (item.materialType === "杈呮枡") bucket.auxCost += item.cost;
bucket.totalCost += item.cost;
+ bucket.totalQuantity += Number(item.quantity) || 0;
bucket.materials.push(item);
}
return map;
@@ -433,8 +413,8 @@
timeLabel,
category,
orderNo,
- rawCost: val.rawCost,
- auxCost: val.auxCost,
+ totalQuantity: val.totalQuantity,
+ unit: val.materials[0]?.unit || "",
totalCost: val.totalCost,
materials: val.materials,
});
@@ -458,8 +438,8 @@
for (const [category, val] of map) {
rows.push({
category,
- rawCost: val.rawCost,
- auxCost: val.auxCost,
+ totalQuantity: val.totalQuantity,
+ unit: val.materials[0]?.unit || "",
totalCost: val.totalCost,
});
}
@@ -473,6 +453,8 @@
rows.push({
orderNo,
category: val.materials[0]?.category || "-",
+ totalQuantity: val.totalQuantity,
+ unit: val.materials[0]?.unit || "",
totalCost: val.totalCost,
});
}
@@ -480,18 +462,12 @@
});
const overview = computed(() => {
- const rawCost = filteredRecords.value
- .filter((item) => item.materialType === "鍘熸枡")
- .reduce((sum, item) => sum + item.cost, 0);
- const auxCost = filteredRecords.value
- .filter((item) => item.materialType === "杈呮枡")
- .reduce((sum, item) => sum + item.cost, 0);
const orderCount = new Set(filteredRecords.value.map((item) => item.orderNo)).size;
+ const totalCost = filteredRecords.value.reduce((sum, item) => sum + item.cost, 0);
return {
- rawCost,
- auxCost,
- totalCost: rawCost + auxCost,
+ totalCost,
orderCount,
+ avgCostPerOrder: orderCount === 0 ? 0 : totalCost / orderCount,
};
});
@@ -500,16 +476,6 @@
const detailMaterials = computed(() => detailRow.value?.materials || []);
-const detailRawCost = computed(() =>
- detailMaterials.value
- .filter((item) => item.materialType === "鍘熸枡")
- .reduce((sum, item) => sum + item.cost, 0)
-);
-const detailAuxCost = computed(() =>
- detailMaterials.value
- .filter((item) => item.materialType === "杈呮枡")
- .reduce((sum, item) => sum + item.cost, 0)
-);
const detailTotalCost = computed(() =>
detailMaterials.value.reduce((sum, item) => sum + item.cost, 0)
);
@@ -548,14 +514,14 @@
};
const handleExport = () => {
- const headers = [timeColumnLabel.value, "浜у搧绫诲埆", "鐢熶骇璁㈠崟", "鍘熸枡鎴愭湰", "杈呮枡鎴愭湰", "鎬绘垚鏈�"];
+ const headers = [timeColumnLabel.value, "浜у搧绫诲埆", "鐢熶骇璁㈠崟", "鐢ㄩ噺", "鍗曚綅", "鎴愭湰(鍏�)"];
const lines = tableData.value.map((row) =>
[
row.timeLabel,
row.category,
row.orderNo,
- row.rawCost.toFixed(2),
- row.auxCost.toFixed(2),
+ row.totalQuantity.toFixed(2),
+ row.unit || "",
row.totalCost.toFixed(2),
].join(",")
);
@@ -694,7 +660,7 @@
.kpi-strip {
display: grid;
- grid-template-columns: repeat(4, minmax(0, 1fr));
+ grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
@@ -712,8 +678,8 @@
background: linear-gradient(135deg, rgba(22, 163, 74, 0.1), rgba(255, 255, 255, 0.86));
}
-.kpi-aux {
- background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(255, 255, 255, 0.86));
+.kpi-avg {
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(255, 255, 255, 0.86));
}
.kpi-order {
--
Gitblit v1.9.3