采购报表前端页面

gaoluyang

2025-09-17 4b3f8e5bcb537b8fd53695046da56efa44e98c85

采购报表前端页面

 src/views/procurementManagement/procurementReport/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,847 @@
<template>
  <div class="app-container">
    <!-- æŠ¥è¡¨é€‰æ‹©å™¨ -->
    <el-card class="report-selector" shadow="never">
      <el-tabs v-model="activeReport" @tab-change="handleReportChange">
        <el-tab-pane label="采购订单执行汇总表" name="orderSummary">
          <template #label>
            <span class="tab-label">
              <el-icon><Document /></el-icon>
              é‡‡è´­è®¢å•æ‰§è¡Œæ±‡æ€»è¡¨
            </span>
          </template>
        </el-tab-pane>
        <el-tab-pane label="采购订单执行明细表" name="orderDetail">
          <template #label>
            <span class="tab-label">
              <el-icon><List /></el-icon>
              é‡‡è´­è®¢å•æ‰§è¡Œæ˜Žç»†è¡¨
            </span>
          </template>
        </el-tab-pane>
        <el-tab-pane label="采购业务汇总表" name="businessSummary">
          <template #label>
            <span class="tab-label">
              <el-icon><TrendCharts /></el-icon>
              é‡‡è´­ä¸šåŠ¡æ±‡æ€»è¡¨
            </span>
          </template>
        </el-tab-pane>
        <el-tab-pane label="供应商供货汇总表" name="supplierSummary">
          <template #label>
            <span class="tab-label">
              <el-icon><Shop /></el-icon>
              ä¾›åº”商供货汇总表
            </span>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- æŸ¥è¯¢æ¡ä»¶ -->
    <el-card class="search-card" shadow="never">
      <el-form :model="searchForm" :inline="true" class="search-form">
        <el-form-item label="时间范围：">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="供应商：" v-if="activeReport === 'supplierSummary'">
          <el-select v-model="searchForm.supplierId" placeholder="请选择供应商" clearable style="width: 200px">
            <el-option
              v-for="supplier in supplierList"
              :key="supplier.id"
              :label="supplier.name"
              :value="supplier.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品类别：" v-if="activeReport === 'businessSummary'">
          <el-select v-model="searchForm.categoryId" placeholder="请选择商品类别" clearable style="width: 200px">
            <el-option
              v-for="category in categoryList"
              :key="category.id"
              :label="category.name"
              :value="category.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" :loading="loading">
            <el-icon><Search /></el-icon>
            æŸ¥è¯¢
          </el-button>
          <el-button @click="resetSearch">
            <el-icon><Refresh /></el-icon>
            é‡ç½®
          </el-button>
          <el-button type="success" @click="exportReport">
            <el-icon><Download /></el-icon>
            å¯¼å‡º
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- æŠ¥è¡¨å†…容 -->
    <el-card class="report-content" shadow="never">
      <!-- é‡‡è´­è®¢å•æ‰§è¡Œæ±‡æ€»è¡¨ -->
      <div v-if="activeReport === 'orderSummary'" class="report-section">
        <div class="section-header">
          <h3>采购订单执行汇总表</h3>
          <div class="summary-stats">
            <div class="stat-item">
              <span class="stat-label">总订单数：</span>
              <span class="stat-value">{{ orderSummaryStats.totalOrders }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">总金额：</span>
              <span class="stat-value">Â¥{{ orderSummaryStats.totalAmount.toLocaleString() }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">完成率：</span>
              <span class="stat-value">{{ orderSummaryStats.completionRate }}%</span>
            </div>
          </div>
        </div>
        
        <el-table :data="orderSummaryData" border v-loading="loading" stripe>
          <el-table-column label="订单编号" prop="orderNo" width="180" fixed="left" />
          <el-table-column label="供应商名称" prop="supplierName" width="150" />
          <el-table-column label="订单日期" prop="orderDate" width="120" />
          <el-table-column label="计划交期" prop="plannedDelivery" width="120" />
          <el-table-column label="实际交期" prop="actualDelivery" width="120" />
          <el-table-column label="订单金额" prop="orderAmount" width="120">
            <template #default="{ row }">Â¥{{ row.orderAmount.toLocaleString() }}</template>
          </el-table-column>
          <el-table-column label="已付金额" prop="paidAmount" width="120">
            <template #default="{ row }">Â¥{{ row.paidAmount.toLocaleString() }}</template>
          </el-table-column>
          <el-table-column label="完成状态" prop="status" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="完成率" prop="completionRate" width="100">
            <template #default="{ row }">{{ row.completionRate }}%</template>
          </el-table-column>
          <el-table-column label="延迟天数" prop="delayDays" width="100">
            <template #default="{ row }">
              <span :class="{ 'delay-text': row.delayDays > 0 }">{{ row.delayDays }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- é‡‡è´­è®¢å•æ‰§è¡Œæ˜Žç»†è¡¨ -->
      <div v-if="activeReport === 'orderDetail'" class="report-section">
        <div class="section-header">
          <h3>采购订单执行明细表</h3>
          <div class="summary-stats">
            <div class="stat-item">
              <span class="stat-label">明细条数：</span>
              <span class="stat-value">{{ orderDetailStats.totalItems }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">已收货：</span>
              <span class="stat-value">{{ orderDetailStats.receivedItems }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">待收货：</span>
              <span class="stat-value">{{ orderDetailStats.pendingItems }}</span>
            </div>
          </div>
        </div>
        
        <el-table :data="orderDetailData" border v-loading="loading" stripe>
          <el-table-column label="订单编号" prop="orderNo" width="150" fixed="left" />
          <el-table-column label="商品编码" prop="productCode" width="120" />
          <el-table-column label="商品名称" prop="productName" width="200" />
          <el-table-column label="规格型号" prop="specification" width="150" />
          <el-table-column label="单位" prop="unit" width="80" />
          <el-table-column label="计划数量" prop="plannedQuantity" width="100" />
          <el-table-column label="已收货数量" prop="receivedQuantity" width="120" />
          <el-table-column label="待收货数量" prop="pendingQuantity" width="120" />
          <el-table-column label="单价" prop="unitPrice" width="100">
            <template #default="{ row }">Â¥{{ row.unitPrice.toFixed(2) }}</template>
          </el-table-column>
          <el-table-column label="小计" prop="subtotal" width="120">
            <template #default="{ row }">Â¥{{ row.subtotal.toLocaleString() }}</template>
          </el-table-column>
          <el-table-column label="收货状态" prop="status" width="100">
            <template #default="{ row }">
              <el-tag :type="getReceiptStatusType(row.status)">{{ getReceiptStatusText(row.status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="最后收货日期" prop="lastReceiptDate" width="120" />
        </el-table>
      </div>

      <!-- é‡‡è´­ä¸šåŠ¡æ±‡æ€»è¡¨ -->
      <div v-if="activeReport === 'businessSummary'" class="report-section">
        <div class="section-header">
          <h3>采购业务汇总表</h3>
          <div class="summary-stats">
            <div class="stat-item">
              <span class="stat-label">采购总额：</span>
              <span class="stat-value">Â¥{{ businessSummaryStats.totalAmount.toLocaleString() }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">商品种类：</span>
              <span class="stat-value">{{ businessSummaryStats.productTypes }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">供应商数：</span>
              <span class="stat-value">{{ businessSummaryStats.supplierCount }}</span>
            </div>
          </div>
        </div>
        
        <el-table :data="businessSummaryData" border v-loading="loading" stripe>
          <el-table-column label="商品类别" prop="category" width="150" fixed="left" />
          <el-table-column label="商品编码" prop="productCode" width="120" />
          <el-table-column label="商品名称" prop="productName" width="200" />
          <el-table-column label="规格型号" prop="specification" width="150" />
          <el-table-column label="采购数量" prop="purchaseQuantity" width="120" />
          <el-table-column label="采购金额" prop="purchaseAmount" width="120">
            <template #default="{ row }">Â¥{{ row.purchaseAmount.toLocaleString() }}</template>
          </el-table-column>
          <el-table-column label="平均单价" prop="avgPrice" width="100">
            <template #default="{ row }">Â¥{{ row.avgPrice.toFixed(2) }}</template>
          </el-table-column>
          <el-table-column label="采购次数" prop="purchaseCount" width="100" />
          <el-table-column label="主要供应商" prop="mainSupplier" width="150" />
          <el-table-column label="最后采购日期" prop="lastPurchaseDate" width="120" />
        </el-table>
      </div>

      <!-- ä¾›åº”商供货汇总表 -->
      <div v-if="activeReport === 'supplierSummary'" class="report-section">
        <div class="section-header">
          <h3>供应商供货汇总表</h3>
          <div class="summary-stats">
            <div class="stat-item">
              <span class="stat-label">供应商总数：</span>
              <span class="stat-value">{{ supplierSummaryStats.totalSuppliers }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">供货总额：</span>
              <span class="stat-value">Â¥{{ supplierSummaryStats.totalAmount.toLocaleString() }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">平均评分：</span>
              <span class="stat-value">{{ supplierSummaryStats.avgRating.toFixed(1) }}</span>
            </div>
          </div>
        </div>
        
        <el-table :data="supplierSummaryData" border v-loading="loading" stripe>
          <el-table-column label="供应商编码" prop="supplierCode" width="120" fixed="left" />
          <el-table-column label="供应商名称" prop="supplierName" width="200" />
          <el-table-column label="联系人" prop="contactPerson" width="120" />
          <el-table-column label="联系电话" prop="phone" width="130" />
          <el-table-column label="供货订单数" prop="orderCount" width="120" />
          <el-table-column label="供货金额" prop="supplyAmount" width="120">
            <template #default="{ row }">Â¥{{ row.supplyAmount.toLocaleString() }}</template>
          </el-table-column>
          <el-table-column label="已付金额" prop="paidAmount" width="120">
            <template #default="{ row }">Â¥{{ row.paidAmount.toLocaleString() }}</template>
          </el-table-column>
          <el-table-column label="未付金额" prop="unpaidAmount" width="120">
            <template #default="{ row }">Â¥{{ row.unpaidAmount.toLocaleString() }}</template>
          </el-table-column>
          <el-table-column label="按时交货率" prop="onTimeRate" width="120">
            <template #default="{ row }">{{ row.onTimeRate }}%</template>
          </el-table-column>
          <el-table-column label="质量评分" prop="qualityRating" width="100">
            <template #default="{ row }">
              <el-rate v-model="row.qualityRating" disabled show-score text-color="#ff9900" />
            </template>
          </el-table-column>
          <el-table-column label="合作状态" prop="status" width="100">
            <template #default="{ row }">
              <el-tag :type="getSupplierStatusType(row.status)">{{ getSupplierStatusText(row.status) }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Document, List, TrendCharts, Shop, Search, Refresh, Download } from '@element-plus/icons-vue'

// å“åº”式数据
const loading = ref(false)
const activeReport = ref('orderSummary')

// æœç´¢è¡¨å•
const searchForm = reactive({
  dateRange: [],
  supplierId: '',
  categoryId: ''
})

// ä¾›åº”商列表
const supplierList = ref([
  { id: 1, name: '江苏华联电子科技有限公司' },
  { id: 2, name: '上海精密机械制造有限公司' },
  { id: 3, name: '深圳智能设备有限公司' },
  { id: 4, name: '北京新材料科技有限公司' },
  { id: 5, name: '广州电子元器件有限公司' }
])

// å•†å“ç±»åˆ«åˆ—表
const categoryList = ref([
  { id: 1, name: '电子元器件' },
  { id: 2, name: '机械设备' },
  { id: 3, name: '原材料' },
  { id: 4, name: '办公用品' },
  { id: 5, name: '包装材料' }
])

// ç»Ÿè®¡æ•°æ®
const orderSummaryStats = ref({
  totalOrders: 156,
  totalAmount: 2580000,
  completionRate: 87.5
})

const orderDetailStats = ref({
  totalItems: 1248,
  receivedItems: 1089,
  pendingItems: 159
})

const businessSummaryStats = ref({
  totalAmount: 2580000,
  productTypes: 89,
  supplierCount: 25
})

const supplierSummaryStats = ref({
  totalSuppliers: 25,
  totalAmount: 2580000,
  avgRating: 4.2
})

// é‡‡è´­è®¢å•æ‰§è¡Œæ±‡æ€»è¡¨æ•°æ®
const orderSummaryData = ref([
  {
    orderNo: 'PO20241201001',
    supplierName: '江苏华联电子科技有限公司',
    orderDate: '2024-12-01',
    plannedDelivery: '2024-12-15',
    actualDelivery: '2024-12-14',
    orderAmount: 125000,
    paidAmount: 100000,
    status: 'completed',
    completionRate: 100,
    delayDays: -1
  },
  {
    orderNo: 'PO20241201002',
    supplierName: '上海精密机械制造有限公司',
    orderDate: '2024-12-02',
    plannedDelivery: '2024-12-20',
    actualDelivery: '2024-12-22',
    orderAmount: 280000,
    paidAmount: 140000,
    status: 'partial',
    completionRate: 75,
    delayDays: 2
  },
  {
    orderNo: 'PO20241201003',
    supplierName: '深圳智能设备有限公司',
    orderDate: '2024-12-03',
    plannedDelivery: '2024-12-25',
    actualDelivery: '',
    orderAmount: 180000,
    paidAmount: 0,
    status: 'pending',
    completionRate: 0,
    delayDays: 0
  },
  {
    orderNo: 'PO20241201004',
    supplierName: '北京新材料科技有限公司',
    orderDate: '2024-12-04',
    plannedDelivery: '2024-12-18',
    actualDelivery: '2024-12-18',
    orderAmount: 95000,
    paidAmount: 95000,
    status: 'completed',
    completionRate: 100,
    delayDays: 0
  },
  {
    orderNo: 'PO20241201005',
    supplierName: '广州电子元器件有限公司',
    orderDate: '2024-12-05',
    plannedDelivery: '2024-12-28',
    actualDelivery: '',
    orderAmount: 220000,
    paidAmount: 0,
    status: 'pending',
    completionRate: 0,
    delayDays: 0
  }
])

// é‡‡è´­è®¢å•æ‰§è¡Œæ˜Žç»†è¡¨æ•°æ®
const orderDetailData = ref([
  {
    orderNo: 'PO20241201001',
    productCode: 'EL001',
    productName: '电阻器 1KΩ Â±5%',
    specification: '1/4W ç¢³è†œç”µé˜»',
    unit: '个',
    plannedQuantity: 1000,
    receivedQuantity: 1000,
    pendingQuantity: 0,
    unitPrice: 0.15,
    subtotal: 150,
    status: 'completed',
    lastReceiptDate: '2024-12-14'
  },
  {
    orderNo: 'PO20241201001',
    productCode: 'EL002',
    productName: '电容器 100μF',
    specification: '25V é“ç”µè§£ç”µå®¹',
    unit: '个',
    plannedQuantity: 500,
    receivedQuantity: 500,
    pendingQuantity: 0,
    unitPrice: 0.85,
    subtotal: 425,
    status: 'completed',
    lastReceiptDate: '2024-12-14'
  },
  {
    orderNo: 'PO20241201002',
    productCode: 'ME001',
    productName: '精密轴承',
    specification: '6205-2RS æ·±æ²Ÿçƒè½´æ‰¿',
    unit: '个',
    plannedQuantity: 200,
    receivedQuantity: 150,
    pendingQuantity: 50,
    unitPrice: 25.5,
    subtotal: 5100,
    status: 'partial',
    lastReceiptDate: '2024-12-20'
  },
  {
    orderNo: 'PO20241201002',
    productCode: 'ME002',
    productName: '不锈钢螺丝',
    specification: 'M8×20 304不锈钢',
    unit: '个',
    plannedQuantity: 1000,
    receivedQuantity: 1000,
    pendingQuantity: 0,
    unitPrice: 0.8,
    subtotal: 800,
    status: 'completed',
    lastReceiptDate: '2024-12-20'
  },
  {
    orderNo: 'PO20241201003',
    productCode: 'SM001',
    productName: '智能传感器',
    specification: '温度传感器 DS18B20',
    unit: '个',
    plannedQuantity: 300,
    receivedQuantity: 0,
    pendingQuantity: 300,
    unitPrice: 12.5,
    subtotal: 3750,
    status: 'pending',
    lastReceiptDate: ''
  }
])

// é‡‡è´­ä¸šåŠ¡æ±‡æ€»è¡¨æ•°æ®
const businessSummaryData = ref([
  {
    category: '电子元器件',
    productCode: 'EL001',
    productName: '电阻器 1KΩ Â±5%',
    specification: '1/4W ç¢³è†œç”µé˜»',
    purchaseQuantity: 5000,
    purchaseAmount: 750,
    avgPrice: 0.15,
    purchaseCount: 8,
    mainSupplier: '江苏华联电子科技有限公司',
    lastPurchaseDate: '2024-12-01'
  },
  {
    category: '电子元器件',
    productCode: 'EL002',
    productName: '电容器 100μF',
    specification: '25V é“ç”µè§£ç”µå®¹',
    purchaseQuantity: 2500,
    purchaseAmount: 2125,
    avgPrice: 0.85,
    purchaseCount: 6,
    mainSupplier: '江苏华联电子科技有限公司',
    lastPurchaseDate: '2024-12-01'
  },
  {
    category: '机械设备',
    productCode: 'ME001',
    productName: '精密轴承',
    specification: '6205-2RS æ·±æ²Ÿçƒè½´æ‰¿',
    purchaseQuantity: 800,
    purchaseAmount: 20400,
    avgPrice: 25.5,
    purchaseCount: 4,
    mainSupplier: '上海精密机械制造有限公司',
    lastPurchaseDate: '2024-12-02'
  },
  {
    category: '机械设备',
    productCode: 'ME002',
    productName: '不锈钢螺丝',
    specification: 'M8×20 304不锈钢',
    purchaseQuantity: 5000,
    purchaseAmount: 4000,
    avgPrice: 0.8,
    purchaseCount: 12,
    mainSupplier: '上海精密机械制造有限公司',
    lastPurchaseDate: '2024-12-02'
  },
  {
    category: '智能设备',
    productCode: 'SM001',
    productName: '智能传感器',
    specification: '温度传感器 DS18B20',
    purchaseQuantity: 1200,
    purchaseAmount: 15000,
    avgPrice: 12.5,
    purchaseCount: 5,
    mainSupplier: '深圳智能设备有限公司',
    lastPurchaseDate: '2024-12-03'
  }
])

// ä¾›åº”商供货汇总表数据
const supplierSummaryData = ref([
  {
    supplierCode: 'SUP001',
    supplierName: '江苏华联电子科技有限公司',
    contactPerson: '张经理',
    phone: '0512-88888888',
    orderCount: 45,
    supplyAmount: 850000,
    paidAmount: 680000,
    unpaidAmount: 170000,
    onTimeRate: 95,
    qualityRating: 4.5,
    status: 'active'
  },
  {
    supplierCode: 'SUP002',
    supplierName: '上海精密机械制造有限公司',
    contactPerson: '李总',
    phone: '021-66666666',
    orderCount: 32,
    supplyAmount: 1200000,
    paidAmount: 900000,
    unpaidAmount: 300000,
    onTimeRate: 88,
    qualityRating: 4.2,
    status: 'active'
  },
  {
    supplierCode: 'SUP003',
    supplierName: '深圳智能设备有限公司',
    contactPerson: '王工程师',
    phone: '0755-77777777',
    orderCount: 28,
    supplyAmount: 680000,
    paidAmount: 400000,
    unpaidAmount: 280000,
    onTimeRate: 92,
    qualityRating: 4.3,
    status: 'active'
  },
  {
    supplierCode: 'SUP004',
    supplierName: '北京新材料科技有限公司',
    contactPerson: '陈博士',
    phone: '010-55555555',
    orderCount: 18,
    supplyAmount: 320000,
    paidAmount: 250000,
    unpaidAmount: 70000,
    onTimeRate: 85,
    qualityRating: 4.0,
    status: 'active'
  },
  {
    supplierCode: 'SUP005',
    supplierName: '广州电子元器件有限公司',
    contactPerson: '刘经理',
    phone: '020-44444444',
    orderCount: 22,
    supplyAmount: 480000,
    paidAmount: 200000,
    unpaidAmount: 280000,
    onTimeRate: 78,
    qualityRating: 3.8,
    status: 'warning'
  }
])

// æ–¹æ³•
const handleReportChange = (tabName) => {
  activeReport.value = tabName
  handleSearch()
}

const handleSearch = () => {
  loading.value = true
  // æ¨¡æ‹ŸAPI调用
  setTimeout(() => {
    loading.value = false
    ElMessage.success('查询完成')
  }, 1000)
}

const resetSearch = () => {
  Object.assign(searchForm, {
    dateRange: [],
    supplierId: '',
    categoryId: ''
  })
  handleSearch()
}

const exportReport = () => {
  ElMessage.success('导出功能开发中...')
}

// çŠ¶æ€ç›¸å…³æ–¹æ³•
const getStatusType = (status) => {
  const statusMap = {
    completed: 'success',
    partial: 'warning',
    pending: 'info'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    completed: '已完成',
    partial: '部分完成',
    pending: '待执行'
  }
  return statusMap[status] || '未知'
}

const getReceiptStatusType = (status) => {
  const statusMap = {
    completed: 'success',
    partial: 'warning',
    pending: 'info'
  }
  return statusMap[status] || 'info'
}

const getReceiptStatusText = (status) => {
  const statusMap = {
    completed: '已收货',
    partial: '部分收货',
    pending: '待收货'
  }
  return statusMap[status] || '未知'
}

const getSupplierStatusType = (status) => {
  const statusMap = {
    active: 'success',
    warning: 'warning',
    inactive: 'info'
  }
  return statusMap[status] || 'info'
}

const getSupplierStatusText = (status) => {
  const statusMap = {
    active: '正常合作',
    warning: '需关注',
    inactive: '暂停合作'
  }
  return statusMap[status] || '未知'
}

onMounted(() => {
  // è®¾ç½®é»˜è®¤æ—¶é—´èŒƒå›´ä¸ºæœ€è¿‘30天
  const endDate = new Date()
  const startDate = new Date()
  startDate.setDate(startDate.getDate() - 30)
  
  searchForm.dateRange = [
    startDate.toISOString().split('T')[0],
    endDate.toISOString().split('T')[0]
  ]
})
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
  color: white;
}

.page-header h2 {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.report-selector {
  margin-bottom: 20px;
  border-radius: 8px;
}

.tab-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.search-form {
  margin-bottom: 0;
}

.report-content {
  border-radius: 8px;
}

.report-section {
  min-height: 400px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e4e7ed;
}

.section-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.summary-stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #409EFF;
}

.delay-text {
  color: #F56C6C;
  font-weight: 600;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background-color: #f8f9fa;
  color: #606266;
  font-weight: 600;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #fafafa;
}

:deep(.el-tabs__header) {
  margin-bottom: 0;
}

:deep(.el-tabs__nav-wrap) {
  padding: 0 20px;
}

:deep(.el-tabs__item) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.el-tabs__item.is-active) {
  color: #409EFF;
}

:deep(.el-rate) {
  display: flex;
  align-items: center;
}

:deep(.el-rate__text) {
  margin-left: 8px;
  font-size: 14px;
  color: #606266;
}
</style>