运维成本报表增加合计统计

src/views/report-statistics/costs.vue

@@ -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]">