|
|
@@ -133,6 +133,20 @@ const defaultStats: StatItem[] = [
|
|
|
value: 0,
|
|
|
tb: 0,
|
|
|
hb: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'total',
|
|
|
+ title: '合计',
|
|
|
+ type: '',
|
|
|
+ icon: 'i-material-symbols:payments-outline-rounded',
|
|
|
+ class: {
|
|
|
+ bg1: 'bg-[var(--el-color-danger-light-7)]',
|
|
|
+ bg2: 'bg-[var(--el-color-danger-light-5)]',
|
|
|
+ text: 'text-[var(--el-color-danger)]'
|
|
|
+ },
|
|
|
+ value: 0,
|
|
|
+ tb: 0,
|
|
|
+ hb: 0
|
|
|
}
|
|
|
]
|
|
|
|
|
|
@@ -159,6 +173,9 @@ const loadData = useDebounceFn(async function () {
|
|
|
byFee.value = res[byFee.key].total || 0
|
|
|
byFee.tb = Number(((res[byFee.key].tb || 0) * 100).toFixed(0))
|
|
|
byFee.hb = Number(((res[byFee.key].hb || 0) * 100).toFixed(0))
|
|
|
+
|
|
|
+ const total = statList.value.find((item) => item.key === 'total')!
|
|
|
+ total.value = repair.value + byFee.value + out.value
|
|
|
} catch (error) {
|
|
|
console.log('error :>> ', error)
|
|
|
} finally {
|
|
|
@@ -274,14 +291,14 @@ const handleChange = () => {
|
|
|
class="row-span-2" />
|
|
|
<!-- <div class="p-4 bg-white dark:bg-[#1d1e1f] shadow rounded-lg row-span-2"> </div> -->
|
|
|
<div class="grid grid-rows-[1fr_32px] gap-4">
|
|
|
- <div class="grid grid-cols-3 gap-4" v-loading="dataLoading">
|
|
|
+ <div class="grid grid-cols-4 gap-4" v-loading="dataLoading">
|
|
|
<!-- 使用 v-for 循环渲染 -->
|
|
|
<section
|
|
|
v-for="item in statList"
|
|
|
:key="item.key"
|
|
|
class="flex flex-col items-center gap-y-4 rounded-lg shadow p-4 transition-transform hover:scale-105 duration-500"
|
|
|
:class="{ [item.class.bg1]: true, 'scale-105': item.type === query.type }"
|
|
|
- @click="selectType(item.type)">
|
|
|
+ @click="item.key !== 'total' && selectType(item.type)">
|
|
|
<!-- 头部：图标 + 标题 -->
|
|
|
<div class="flex items-center gap-x-3">
|
|
|
<div class="rounded-2 p-2" :class="[item.class.text, item.class.bg2]">
|
