11<script setup lang="ts">
22import type { Ref } from ' vue'
3- import { Card , CardContent , CardDescription , CardHeader , CardTitle } from ' @/components/ui/card'
3+ import {
4+ Card ,
5+ CardContent ,
6+ CardDescription ,
7+ CardHeader ,
8+ CardTitle ,
9+ } from ' @/components/ui/card'
410import {
511 Select ,
612 SelectContent ,
@@ -48,13 +54,33 @@ async function onRefresh() {
4854 isLoading .value = false
4955}
5056
51- watch (() => props .refreshWatcher , () => {
52- onRefresh ()
53- })
57+ watch (
58+ () => props .refreshWatcher ,
59+ () => {
60+ onRefresh ()
61+ },
62+ )
5463
5564watch (selectedClub , async () => {
5665 await onRefresh ()
5766})
67+
68+ // Computed properties to calculate total CAS times
69+ const totalCTime = computed (() => {
70+ return data .value ?.data .reduce ((sum , record ) => sum + record .cTime , 0 ) || 0
71+ })
72+
73+ const totalATime = computed (() => {
74+ return data .value ?.data .reduce ((sum , record ) => sum + record .aTime , 0 ) || 0
75+ })
76+
77+ const totalSTime = computed (() => {
78+ return data .value ?.data .reduce ((sum , record ) => sum + record .sTime , 0 ) || 0
79+ })
80+
81+ const totalCASTime = computed (() => {
82+ return totalCTime .value + totalATime .value + totalSTime .value
83+ })
5884 </script >
5985
6086<template >
@@ -76,18 +102,60 @@ watch(selectedClub, async () => {
76102 <SelectGroup >
77103 <SelectItem
78104 v-for =" club in [...clubs.vice, ...clubs.president]"
79- :key =" club.id" :value =" String(club.id)"
105+ :key =" club.id"
106+ :value =" String(club.id)"
80107 >
81108 {{ club.name.zh }}
82109 </SelectItem >
83110 </SelectGroup >
84111 </SelectContent >
85112 </Select >
86- <Button size =" icon" variant =" outline" :disabled =" isLoading || !selectedClub" @click =" onRefresh()" >
87- <Icon name =" material-symbols:refresh" :class =" { 'animate-spin': isLoading }" />
113+ <Button
114+ size =" icon"
115+ variant =" outline"
116+ :disabled =" isLoading || !selectedClub"
117+ @click =" onRefresh()"
118+ >
119+ <Icon
120+ name =" material-symbols:refresh"
121+ :class =" { 'animate-spin': isLoading }"
122+ />
88123 </Button >
89124 </div >
90- <DataTable v-if =" data && selectedClub" :columns =" columns" :data =" data.data" :refresh-function =" refresh" />
125+ <div v-if =" selectedClub" class =" mb-4 text-sm" >
126+ <div class =" rounded border p-2 mt-1 flex justify-between" >
127+ <div class =" flex items-center space-x-0.5" >
128+ <p class =" font-bold" >
129+ C:
130+ </p >
131+ <div >{{ totalCTime }} 小时</div >
132+ </div >
133+ <div class =" flex items-center space-x-0.5" >
134+ <p class =" font-bold" >
135+ A:
136+ </p >
137+ <div >{{ totalATime }} 小时</div >
138+ </div >
139+ <div class =" flex items-center space-x-0.5" >
140+ <p class =" font-bold" >
141+ S:
142+ </p >
143+ <div >{{ totalSTime }} 小时</div >
144+ </div >
145+ <div class =" flex items-center space-x-0.5" >
146+ <p class =" font-bold" >
147+ Total:
148+ </p >
149+ <div >{{ totalCASTime }} 小时</div >
150+ </div >
151+ </div >
152+ </div >
153+ <DataTable
154+ v-if =" data && selectedClub"
155+ :columns =" columns"
156+ :data =" data.data"
157+ :refresh-function =" refresh"
158+ />
91159 </CardContent >
92160 </Card >
93161 <Toaster />
0 commit comments