his/backup/vxetable-migration-20260602/medicationmanagement/statisticalManagement/portal.vue

<template>
  <div class="app-container">
    <div class="statistics-portal">
      <h2 class="portal-title">
        药物统计管理门户
      </h2>
      <p class="portal-description">
        选择您想要查看的统计报告类型
      </p>
      
      <div class="statistics-grid">
        <!-- 库存统计 -->
        <el-card
          class="statistic-card"
          @click="goToPage('/medicationmanagement/statisticalManagement')"
        >
          <div class="card-content">
            <div class="card-icon">
              <i
                class="el-icon-data-analysis"
                style="font-size: 36px; color: #409EFF;"
              />
            </div>
            <div class="card-text">
              <h3>库存统计</h3>
              <p>查看药品库存情况</p>
            </div>
          </div>
        </el-card>

        <!-- 效期预警 -->
        <el-card
          class="statistic-card"
          @click="goToPage('/medicationmanagement/statisticalManagement/earlyWarning')"
        >
          <div class="card-content">
            <div class="card-icon">
              <i
                class="el-icon-warning-outline"
                style="font-size: 36px; color: #E6A23C;"
              />
            </div>
            <div class="card-text">
              <h3>效期预警</h3>
              <p>查看即将过期的药品</p>
            </div>
          </div>
        </el-card>

        <!-- 药品使用情况 -->
        <el-card
          class="statistic-card"
          @click="goToPage('/medicationmanagement/statisticalManagement/medicationUsageDetails')"
        >
          <div class="card-content">
            <div class="card-icon">
              <i
                class="el-icon-trend-charts"
                style="font-size: 36px; color: #67C23A;"
              />
            </div>
            <div class="card-text">
              <h3>药品使用情况</h3>
              <p>查看药品使用统计</p>
            </div>
          </div>
        </el-card>

        <!-- 药品销售情况 -->
        <el-card
          class="statistic-card"
          @click="goToPage('/medicationmanagement/statisticalManagement/medicationSaleDetails')"
        >
          <div class="card-content">
            <div class="card-icon">
              <i
                class="el-icon-sell"
                style="font-size: 36px; color: #F56C6C;"
              />
            </div>
            <div class="card-text">
              <h3>药品销售情况</h3>
              <p>查看药品销售统计</p>
            </div>
          </div>
        </el-card>

        <!-- 采购入库明细 -->
        <el-card
          class="statistic-card"
          @click="goToPage('/medicationmanagement/statisticalManagement/medicationInboundDetails')"
        >
          <div class="card-content">
            <div class="card-icon">
              <i
                class="el-icon-shopping-cart-full"
                style="font-size: 36px; color: #909399;"
              />
            </div>
            <div class="card-text">
              <h3>采购入库明细</h3>
              <p>查看采购入库统计</p>
            </div>
          </div>
        </el-card>

        <!-- 出库明细 -->
        <el-card
          class="statistic-card"
          @click="goToPage('/medicationmanagement/statisticalManagement/stockOutDetail')"
        >
          <div class="card-content">
            <div class="card-icon">
              <i
                class="el-icon-shopping-cart-1"
                style="font-size: 36px; color: #409EFF;"
              />
            </div>
            <div class="card-text">
              <h3>出库明细</h3>
              <p>查看药品出库统计</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const goToPage = (path) => {
  router.push(path);
};
</script>

<style lang="scss" scoped>
.statistics-portal {
  padding: 20px;
  
  .portal-title {
    text-align: center;
    margin-bottom: 10px;
    color: #303133;
  }
  
  .portal-description {
    text-align: center;
    color: #909399;
    margin-bottom: 30px;
  }
  
  .statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }
  
  .statistic-card {
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }
    
    .card-content {
      display: flex;
      align-items: center;
      
      .card-icon {
        margin-right: 15px;
      }
      
      .card-text {
        flex: 1;
        
        h3 {
          margin: 0 0 5px 0;
          font-size: 16px;
          color: #303133;
        }
        
        p {
          margin: 0;
          font-size: 14px;
          color: #909399;
        }
      }
    }
  }
}
</style>