his/openhis-ui-vue3/src/views/doctorstation/components/todayOutpatient/TodayOutpatientStats.vue

<template>
  <div class="today-outpatient-stats">
    <el-row :gutter="20">
      <el-col :xs="12" :sm="6" :md="6" :lg="6">
        <div class="stats-card total-registered">
          <div class="stats-icon">
            <el-icon><User /></el-icon>
          </div>
          <div class="stats-info">
            <div class="stats-value">{{ stats.totalRegistered || 0 }}</div>
            <div class="stats-label">今日总挂号</div>
          </div>
        </div>
      </el-col>
      
      <el-col :xs="12" :sm="6" :md="6" :lg="6">
        <div class="stats-card waiting">
          <div class="stats-icon">
            <el-icon><Clock /></el-icon>
          </div>
          <div class="stats-info">
            <div class="stats-value">{{ stats.waitingCount || 0 }}</div>
            <div class="stats-label">待就诊</div>
          </div>
        </div>
      </el-col>
      
      <el-col :xs="12" :sm="6" :md="6" :lg="6">
        <div class="stats-card in-progress">
          <div class="stats-icon">
            <el-icon><VideoPlay /></el-icon>
          </div>
          <div class="stats-info">
            <div class="stats-value">{{ stats.inProgressCount || 0 }}</div>
            <div class="stats-label">就诊中</div>
          </div>
        </div>
      </el-col>
      
      <el-col :xs="12" :sm="6" :md="6" :lg="6">
        <div class="stats-card completed">
          <div class="stats-icon">
            <el-icon><CircleCheck /></el-icon>
          </div>
          <div class="stats-info">
            <div class="stats-value">{{ stats.completedCount || 0 }}</div>
            <div class="stats-label">已完成</div>
          </div>
        </div>
      </el-col>
    </el-row>
    
    <!-- 时间统计 -->
    <div class="time-stats">
      <el-row :gutter="20">
        <el-col :xs="12" :sm="12" :md="12" :lg="12">
          <div class="time-card waiting-time">
            <el-icon><Timer /></el-icon>
            <div class="time-info">
              <div class="time-value">{{ stats.averageWaitingTime || 0 }} 分钟</div>
              <div class="time-label">平均候诊时间</div>
            </div>
          </div>
        </el-col>
        
        <el-col :xs="12" :sm="12" :md="12" :lg="12">
          <div class="time-card visit-time">
            <el-icon><Watch /></el-icon>
            <div class="time-info">
              <div class="time-value">{{ stats.averageVisitTime || 0 }} 分钟</div>
              <div class="time-label">平均就诊时间</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { User, Clock, VideoPlay, CircleCheck, Timer, Watch } from '@element-plus/icons-vue'
import { getTodayOutpatientStats } from './api.js'

// 数据
const stats = ref({})

// 定义事件
const emit = defineEmits(['refresh'])

// 暴露方法给父组件
defineExpose({
  refreshStats
})

// 页面加载
onMounted(() => {
  loadStats()
})

// 加载统计信息
const loadStats = () => {
  getTodayOutpatientStats().then(res => {
    if (res.code === 200) {
      stats.value = res.data || {}
    }
  })
}

// 刷新统计信息
function refreshStats() {
  loadStats()
  emit('refresh')
}
</script>

<style lang="scss" scoped>
.today-outpatient-stats {
  .stats-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
    }
    
    .stats-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      
      .el-icon {
        color: white;
        font-size: 24px;
      }
    }
    
    .stats-info {
      flex: 1;
      
      .stats-value {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        line-height: 1.2;
      }
      
      .stats-label {
        font-size: 14px;
        color: #666;
        margin-top: 4px;
      }
    }
    
    // 不同统计卡片的颜色
    &.total-registered {
      .stats-icon {
        background: linear-gradient(135deg, #409eff, #79bbff);
      }
    }
    
    &.waiting {
      .stats-icon {
        background: linear-gradient(135deg, #e6a23c, #fab85c);
      }
    }
    
    &.in-progress {
      .stats-icon {
        background: linear-gradient(135deg, #67c23a, #95d475);
      }
    }
    
    &.completed {
      .stats-icon {
        background: linear-gradient(135deg, #909399, #b1b3b8);
      }
    }
  }
  
  .time-stats {
    margin-top: 20px;
    
    .time-card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      display: flex;
      align-items: center;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
      }
      
      .el-icon {
        font-size: 32px;
        margin-right: 16px;
        color: #409eff;
      }
      
      .time-info {
        .time-value {
          font-size: 20px;
          font-weight: bold;
          color: #333;
          line-height: 1.2;
        }
        
        .time-label {
          font-size: 14px;
          color: #666;
          margin-top: 4px;
        }
      }
      
      // 不同时间统计卡片的颜色
      &.waiting-time {
        .el-icon {
          color: #e6a23c;
        }
      }
      
      &.visit-time {
        .el-icon {
          color: #67c23a;
        }
      }
    }
  }
  
  // 响应式间距
  .el-row {
    margin-bottom: 0;
  }
  
  .el-col {
    margin-bottom: 20px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .today-outpatient-stats {
    .stats-card {
      padding: 16px;
      
      .stats-icon {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        
        .el-icon {
          font-size: 20px;
        }
      }
      
      .stats-info {
        .stats-value {
          font-size: 20px;
        }
        
        .stats-label {
          font-size: 12px;
        }
      }
    }
    
    .time-stats {
      .time-card {
        padding: 16px;
        
        .el-icon {
          font-size: 24px;
          margin-right: 12px;
        }
        
        .time-info {
          .time-value {
            font-size: 18px;
          }
          
          .time-label {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>