소스 검색

feat(gameScore): 添加成绩管理页面统计数据展示

在游戏成绩编辑页面中添加了报名人数、参赛总人数/队数、完赛总人数/队数、
未赛总人数/队数等统计信息展示功能,优化了UI布局并将原有的项目分类
提示信息整合到新的统计容器中,同时适配了后端数据结构变化并添加了
相应的样式定义。
zhou 3 주 전
부모
커밋
8284a3fd47
1개의 변경된 파일73개의 추가작업 그리고 11개의 파일을 삭제
  1. 73 11
      src/views/system/gameScore/gameScoreEdit.vue

+ 73 - 11
src/views/system/gameScore/gameScoreEdit.vue

@@ -34,11 +34,26 @@
           <el-icon><Search /></el-icon>
         </template>
       </el-input>
-      <div class="ml-4 text-gray-600">
-        <el-tag :type="projectClassification === '0' ? 'success' : 'warning'" class="mr-2">
-          {{ projectClassification === '0' ? '个人项目' : '团体项目' }}
-        </el-tag>
-        <span>{{ projectClassification === '0' ? '管理运动员个人成绩' : '管理队伍团队成绩' }}</span>
+      <el-tag :type="projectClassification === '0' ? 'success' : 'warning'" class="ml-4 mr-2">
+        {{ projectClassification === '0' ? '个人项目' : '团体项目' }}
+      </el-tag>
+      <div class="stats-container flex items-center space-x-5 text-xs ml-1">
+        <div class="stats-item">
+          <span class="stats-label">报名人数:</span>
+          <span class="stats-value text-blue">{{ stats.registrationCount }}</span>
+        </div>
+        <div class="stats-item">
+          <span class="stats-label">参赛总{{ projectClassification === '0' ? '人数' : '队数' }}:</span>
+          <span class="stats-value text-green">{{ stats.participantCount }}</span>
+        </div>
+        <div class="stats-item">
+          <span class="stats-label">完赛总{{ projectClassification === '0' ? '人数' : '队数' }}:</span>
+          <span class="stats-value text-orange">{{ stats.finishedCount }}</span>
+        </div>
+        <div class="stats-item">
+          <span class="stats-label">未赛总{{ projectClassification === '0' ? '人数' : '队数' }}:</span>
+          <span class="stats-value text-red">{{ stats.unstartedCount }}</span>
+        </div>
       </div>
     </div>
 
@@ -176,6 +191,14 @@ const exportDialog = reactive({
   topN: undefined as number | undefined
 });
 
+// 统计数据
+const stats = reactive({
+  registrationCount: 0,
+  participantCount: 0,
+  finishedCount: 0,
+  unstartedCount: 0
+});
+
 // 定义搜索框状态变量
 const searchValue = ref('');
 
@@ -505,7 +528,7 @@ const loadData = async (autoCalculateRanking = false) => {
   
   try {
     // 调用后端接口获取综合数据
-    const response = await getProjectScoreData({
+    const response: any = await getProjectScoreData({
       eventId: eventId,
       projectId: projectId,
       classification: projectClassification,
@@ -514,8 +537,15 @@ const loadData = async (autoCalculateRanking = false) => {
       pageSize: queryParams.pageSize
     });
     
+    // 适配后端包装结构
+    const tableData = response.data.tableData || { rows: [], total: 0 };
+    const statsData = response.data.stats || {};
+    
+    // 更新统计信息
+    Object.assign(stats, statsData);
+    
     // 处理返回的数据
-    const rows = response.rows || [];
+    const rows = tableData.rows || [];
     
     // 为每行数据添加项目相关信息
     dataList.value = rows.map((row: any) => ({
@@ -524,7 +554,7 @@ const loadData = async (autoCalculateRanking = false) => {
       projectType: projectType,
     }));
     
-    total.value = response.total || 0;
+    total.value = tableData.total || 0;
     
     // 只有在自动计算排名的情况下才进行排名计算
     if (autoCalculateRanking) {
@@ -592,11 +622,43 @@ onMounted(() => {
   margin-right: 0.5rem;
 }
 
-/* 文本样式 */
-.text-gray-600 {
-  color: #6b7280;
+/* 统计展示样式 */
+.stats-container {
+  display: flex;
+  align-items: center;
+  background-color: #f8f9fa;
+  padding: 4px 12px;
+  border-radius: 4px;
+  border: 1px solid #e9ecef;
+  flex-wrap: nowrap; /* 不允许换行 */
+}
+
+.stats-item {
+  display: flex;
+  align-items: center;
+  margin-right: 16px;
+  font-size: 14px;
 }
 
+.stats-item:last-child {
+  margin-right: 0;
+}
+
+.stats-label {
+  color: #606266;
+  font-weight: 500;
+}
+
+.stats-value {
+  font-weight: bold;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+.text-blue { color: #409eff; }
+.text-green { color: #67c23a; }
+.text-orange { color: #e6a23c; }
+.text-red { color: #f56c6c; }
+
 /* 表格样式 */
 .el-table {
   width: 100%;