QualityStats.vue

<script setup lang="ts">
import { ref, onMounted, nextTick, watch } from 'vue'
import { Search, Download } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { statsApi } from '../../api'
import type { ApiResponse } from '../../types/order'

const loading = ref(false)

// 地市列表(带code)
const cityList = [
  { code: '3201', name: '南京市' },
  { code: '3202', name: '无锡市' },
  { code: '3203', name: '徐州市' },
  { code: '3204', name: '常州市' },
  { code: '3205', name: '苏州市' },
  { code: '3206', name: '南通市' },
  { code: '3207', name: '连云港市' },
  { code: '3208', name: '淮安市' },
  { code: '3209', name: '盐城市' },
  { code: '3210', name: '扬州市' },
  { code: '3211', name: '镇江市' },
  { code: '3212', name: '泰州市' },
  { code: '3213', name: '宿迁市' }
]

// 获取昨天的日期范围
const getYesterdayRange = () => {
  const yesterday = new Date()
  yesterday.setDate(yesterday.getDate() - 1)
  yesterday.setHours(0, 0, 0, 0)
  const start = new Date(yesterday)
  
  const end = new Date(yesterday)
  end.setHours(23, 59, 59, 999)
  
  return [start, end]
}

const queryForm = ref({
  dateRange: getYesterdayRange(),
  city: ''
})

// Statistics Data
const stats = ref({
  totalOrders: 0,
  finishOrders: 0,
  resultCount: 0,
  finishResult: 0,
  complaintTotal: 0,
  complaintFinish: 0,
  noShowCount: 0,
  averageDuration: 0
})

// 地市统计数据
const areaTypeList = ref<any[]>([])
// 质检环节统计数据
const processStats = ref<any[]>([])

// --- Refs ---
const cityStatsTab = ref('order') // 'order', 'qc', 'complaint', 'cannotQc'
const timeStatsTab = ref('dist') // 'dist', 'avg'
const processStatsTab = ref('avgCount') // 'avgCount', 'totalCount', 'avgTime'
const processLimit = ref(10) // 10, 15, 1000(all)

// Toggle Table Visibility
const showCityTable = ref(false)
const showTimeTable = ref(false)
const showProcessTable = ref(false)

const orderChartRef = ref<HTMLElement>()
const qcChartRef = ref<HTMLElement>()
const complaintChartRef = ref<HTMLElement>()
const cannotQcChartRef = ref<HTMLElement>()

const timeDistChartRef = ref<HTMLElement>()
const avgTimeChartRef = ref<HTMLElement>()

const processAvgCountChartRef = ref<HTMLElement>()
const processTotalCountChartRef = ref<HTMLElement>()
const processAvgTimeChartRef = ref<HTMLElement>()

// 格式化日期为 YYYY-MM-DD
const formatDate = (date: Date): string => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 格式化日期时间为 yyyy-MM-dd HH:mm:ss
const formatDateTime = (date: Date): string => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 获取统计数据
const fetchStats = async () => {
  loading.value = true
  
  try {
    const params: any = {}
    
    // 处理日期范围
    if (queryForm.value.dateRange && queryForm.value.dateRange.length === 2) {
      const start = queryForm.value.dateRange[0]
      const end = queryForm.value.dateRange[1]
      if (start && end) {
        params.startDate = formatDateTime(new Date(start))
        
        // 设置结束时间为当天的 23:59:59
        const endDate = new Date(end)
        endDate.setHours(23, 59, 59, 999)
        params.endDate = formatDateTime(endDate)
      }
    }
    
    // 处理地市选择(传code)
    if (queryForm.value.city) {
      params.areaType = queryForm.value.city
    }
    
    // 调用接口
    const response = await statsApi.getAllStatisticsByCity(params) as ApiResponse<any>
    
    if (response.code === 200 || response.code === 0) {
      const data = response.data || {}
      
      // 更新顶部统计数据
      stats.value = {
        totalOrders: data.totalOrders || 0,
        finishOrders: data.finishOrders || 0,
        resultCount: data.resultCount || 0,
        finishResult: data.finishResult || 0,
        complaintTotal: data.complaintTotal || 0,
        complaintFinish: data.complaintFinish || 0,
        noShowCount: data.noShowCount || 0,
        averageDuration: data.averageDuration || 0
      }
      
      // 更新地市统计数据
      areaTypeList.value = data.areaTypeList || []
      
      // 重新渲染图表
      nextTick(() => {
        renderAllCharts()
      })
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 获取质检环节统计数据
const fetchProcessStats = async () => {
  try {
    const params: any = {}
    
    // 处理日期范围
    if (queryForm.value.dateRange && queryForm.value.dateRange.length === 2) {
      const start = queryForm.value.dateRange[0]
      const end = queryForm.value.dateRange[1]
      if (start && end) {
        params.startDate = formatDateTime(new Date(start))
        
        // 设置结束时间为当天的 23:59:59
        const endDate = new Date(end)
        endDate.setHours(23, 59, 59, 999)
        params.endDate = formatDateTime(endDate)
      }
    }
    
    // 处理地市选择
    if (queryForm.value.city) {
      params.areaType = queryForm.value.city
    }
    
    const response = await statsApi.getProcessTotalStatistics(params) as ApiResponse<any>
    
    if (response.code === 200 || response.code === 0) {
      processStats.value = response.data || []
      
      // 重新渲染质检环节图表
      nextTick(() => {
        handleProcessTabChange(processStatsTab.value)
      })
    }
  } catch (error) {
    console.error('获取质检环节统计失败:', error)
  }
}

// 查询按钮
const handleQuery = () => {
  fetchStats()
  fetchProcessStats()
}

// 导出表格
const handleExport = async () => {
  try {
    const params: any = {}
    
    // 处理日期范围
    if (queryForm.value.dateRange && queryForm.value.dateRange.length === 2) {
      const start = queryForm.value.dateRange[0]
      const end = queryForm.value.dateRange[1]
      if (start && end) {
        params.startDate = formatDate(new Date(start))
        params.endDate = formatDate(new Date(end))
      }
    }
    
    // 处理地市选择
    if (queryForm.value.city) {
      params.areaType = queryForm.value.city
    }
    
    // 调用导出接口
    const blob = await statsApi.exportAllStatisticsByCity(params)
    
    // 创建下载链接
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    
    // 生成文件名
    const dateStr = params.startDate || formatDate(new Date())
    link.download = `质检工单统计_${dateStr}.xlsx`
    
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
  } catch (error) {
    console.error('导出失败:', error)
  }
}


// --- Chart Renderers ---
const renderOrderChart = () => {
    if (!orderChartRef.value) return
    const chart = echarts.getInstanceByDom(orderChartRef.value) || echarts.init(orderChartRef.value)
    
    const cities = areaTypeList.value.map(item => item.areaName)
    const totalData = areaTypeList.value.map(item => item.orderCount || 0)
    const finishData = areaTypeList.value.map(item => item.finishOrders || 0)
    const unfinishData = areaTypeList.value.map(item => item.unfinishOrders || 0)
    
    chart.setOption({
       tooltip: { trigger: 'axis' },
       legend: { data: ['工单总数', '完成工单数', '未完成工单数'], bottom: 0 },
       xAxis: { type: 'category', data: cities, axisLabel: { interval: 0, rotate: 30 } },
       yAxis: { type: 'value' },
       grid: { left: '3%', right: '4%', bottom: '10%', top: '3%', containLabel: true },
       series: [
           { name: '工单总数', type: 'bar', data: totalData },
           { name: '完成工单数', type: 'bar', data: finishData },
           { name: '未完成工单数', type: 'bar', data: unfinishData }
       ]
    })
    chart.resize()
}

const renderQcChart = () => {
    if (!qcChartRef.value) return
    const chart = echarts.getInstanceByDom(qcChartRef.value) || echarts.init(qcChartRef.value)
    
    const cities = areaTypeList.value.map(item => item.areaName)
    const totalData = areaTypeList.value.map(item => item.resultCount || 0)
    const finishData = areaTypeList.value.map(item => item.finishResult || 0)
    const unfinishData = areaTypeList.value.map(item => item.unfinishResult || 0)
    
    chart.setOption({
       tooltip: { trigger: 'axis' },
       legend: { data: ['质检工单总数', '完成质检工单数', '未完成质检工单数'], bottom: 0 },
       xAxis: { type: 'category', data: cities, axisLabel: { interval: 0, rotate: 30 } },
       yAxis: { type: 'value' },
       grid: { left: '3%', right: '4%', bottom: '10%', top: '3%', containLabel: true },
       series: [
           { name: '质检工单总数', type: 'bar', data: totalData, itemStyle: { color: '#67C23A' } },
           { name: '完成质检工单数', type: 'bar', data: finishData, itemStyle: { color: '#95d475' } },
           { name: '未完成质检工单数', type: 'bar', data: unfinishData, itemStyle: { color: '#b3e19d' } }
       ]
    })
    chart.resize()
}

const renderComplaintChart = () => {
    if (!complaintChartRef.value) return
    const chart = echarts.getInstanceByDom(complaintChartRef.value) || echarts.init(complaintChartRef.value)
    
    const cities = areaTypeList.value.map(item => item.areaName)
    const totalData = areaTypeList.value.map(item => item.complaintTotal || 0)
    const finishData = areaTypeList.value.map(item => item.complaintFinish || 0)
    const unfinishData = areaTypeList.value.map(item => item.complaintUnfinish || 0)
    
    chart.setOption({
       tooltip: { trigger: 'axis' },
       legend: { data: ['投诉工单总数', '完成投诉工单数', '未完成投诉工单数'], bottom: 0 },
       xAxis: { type: 'category', data: cities, axisLabel: { interval: 0, rotate: 30 } },
       yAxis: { type: 'value' },
       grid: { left: '3%', right: '4%', bottom: '10%', top: '3%', containLabel: true },
       series: [
           { name: '投诉工单总数', type: 'bar', data: totalData, itemStyle: { color: '#E6A23C' } },
           { name: '完成投诉工单数', type: 'bar', data: finishData, itemStyle: { color: '#f3d19e' } },
           { name: '未完成投诉工单数', type: 'bar', data: unfinishData, itemStyle: { color: '#faecd8' } }
       ]
    })
    chart.resize()
}

const renderCannotQcChart = () => {
    if (!cannotQcChartRef.value) return
    const chart = echarts.getInstanceByDom(cannotQcChartRef.value) || echarts.init(cannotQcChartRef.value)
    
    const cities = areaTypeList.value.map(item => item.areaName)
    const data = areaTypeList.value.map(item => item.noShowCount || 0)
    
    chart.setOption({
          tooltip: { trigger: 'axis' },
          xAxis: { type: 'category', data: cities, axisLabel: { interval: 0, rotate: 30 } },
          yAxis: { type: 'value' },
          grid: { left: '3%', right: '4%', bottom: '3%', top: '3%', containLabel: true },
          series: [
              { name: '无法质检数', type: 'bar', data: data, itemStyle: { color: '#909399' } }
          ]
      })
      chart.resize()
}

const renderTimeDistChart = () => {
    if (!timeDistChartRef.value) return
      const chart = echarts.getInstanceByDom(timeDistChartRef.value) || echarts.init(timeDistChartRef.value)
      
      const cities = areaTypeList.value.map(item => item.areaName)
      const gt5 = areaTypeList.value.map(item => item.moreThan5Min || 0)
      const bt45 = areaTypeList.value.map(item => item.moreThan4Min || 0)
      const bt34 = areaTypeList.value.map(item => item.moreThan3Min || 0)
      const lt3 = areaTypeList.value.map(item => item.lessThan3Min || 0)
      
      chart.setOption({
          tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
          legend: { data: ['>=5分钟', '4-5分钟', '3-4分钟', '<3分钟'], bottom: 0 },
          xAxis: { type: 'value' },
          yAxis: { type: 'category', data: cities }, 
          grid: { left: '3%', right: '4%', bottom: '10%', top: '3%', containLabel: true },
          series: [
              { name: '>=5分钟', type: 'bar', stack: 'total', data: gt5 },
              { name: '4-5分钟', type: 'bar', stack: 'total', data: bt45 },
              { name: '3-4分钟', type: 'bar', stack: 'total', data: bt34 },
              { name: '<3分钟', type: 'bar', stack: 'total', data: lt3 }
          ]
      })
      chart.resize()
}

const renderAvgTimeChart = () => {
    if (!avgTimeChartRef.value) return
      const chart = echarts.getInstanceByDom(avgTimeChartRef.value) || echarts.init(avgTimeChartRef.value)
      
      const cities = areaTypeList.value.map(item => item.areaName)
      const avgTimes = areaTypeList.value.map(item => item.averageDuration || 0)
      
      chart.setOption({
          tooltip: { trigger: 'axis' },
          xAxis: { type: 'category', data: cities, axisLabel: { interval: 0, rotate: 30 } },
          yAxis: { type: 'value', name: '秒' },
          grid: { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true },
          series: [
              { 
                  name: '平均耗时', type: 'line', 
                  data: avgTimes,
                  markLine: {
                      data: [{ type: 'average', name: '全省平均' }]
                  }
              }
          ]
      })
      chart.resize()
}

const renderProcessAvgCountChart = () => {
    if (!processAvgCountChartRef.value) return
    const chart = echarts.getInstanceByDom(processAvgCountChartRef.value) || echarts.init(processAvgCountChartRef.value)
    
    const limit = processLimit.value
    const currentData = processStats.value.slice(0, limit)
    const names = currentData.map(item => item.processName)
    const avgCounts = currentData.map(item => item.averageInspectionTimes || 0)
    
    chart.setOption({
       tooltip: { trigger: 'axis' },
       legend: { data: ['平均识别次数'], bottom: 0 },
       xAxis: { type: 'category', data: names, axisLabel: { interval: 0, rotate: 30 } },
       yAxis: { type: 'value' },
       grid: { left: '3%', right: '4%', bottom: '15%', top: '10%', containLabel: true },
       series: [
           { name: '平均识别次数', type: 'bar', data: avgCounts, itemStyle: { color: '#409EFF' } }
       ]
    }, true)
    chart.resize()
}

const renderProcessTotalCountChart = () => {
    if (!processTotalCountChartRef.value) return
    const chart = echarts.getInstanceByDom(processTotalCountChartRef.value) || echarts.init(processTotalCountChartRef.value)
    
    const limit = processLimit.value
    const currentData = processStats.value.slice(0, limit)
    const names = currentData.map(item => item.processName)
    const totalCounts = currentData.map(item => item.totalCount || 0)

    chart.setOption({
       tooltip: { trigger: 'axis' },
       legend: { data: ['识别总次数'], bottom: 0 },
       xAxis: { type: 'category', data: names, axisLabel: { interval: 0, rotate: 30 } },
       yAxis: { type: 'value' },
       grid: { left: '3%', right: '4%', bottom: '15%', top: '10%', containLabel: true },
       series: [
           { name: '识别总次数', type: 'bar', data: totalCounts, itemStyle: { color: '#67C23A' } }
       ]
    }, true)
    chart.resize()
}

const renderProcessAvgTimeChart = () => {
    if (!processAvgTimeChartRef.value) return
    const chart = echarts.getInstanceByDom(processAvgTimeChartRef.value) || echarts.init(processAvgTimeChartRef.value)
    
    const limit = processLimit.value
    const currentData = processStats.value.slice(0, limit)
    const names = currentData.map(item => item.processName)
    const avgTimes = currentData.map(item => item.averageDuration || 0)

    chart.setOption({
       tooltip: { trigger: 'axis' },
       legend: { data: ['平均耗时(秒)'], bottom: 0 },
       xAxis: { type: 'category', data: names, axisLabel: { interval: 0, rotate: 30 } },
       yAxis: { type: 'value' },
       grid: { left: '3%', right: '4%', bottom: '15%', top: '10%', containLabel: true },
       series: [
           { name: '平均耗时(秒)', type: 'bar', data: avgTimes, itemStyle: { color: '#E6A23C' } }
       ]
    }, true)
    chart.resize()
}

// --- Tab Handlers ---
const handleTabChange = (name: any) => {
    nextTick(() => {
        if (name === 'order') renderOrderChart()
        if (name === 'qc') renderQcChart()
        if (name === 'complaint') renderComplaintChart()
        if (name === 'cannotQc') renderCannotQcChart()
    })
}

const handleTimeTabChange = (name: any) => {
    nextTick(() => {
        if (name === 'dist') renderTimeDistChart()
        if (name === 'avg') renderAvgTimeChart()
    })
}

const handleProcessTabChange = (name: any) => {
    nextTick(() => {
        if (name === 'avgCount') renderProcessAvgCountChart()
        if (name === 'totalCount') renderProcessTotalCountChart()
        if (name === 'avgTime') renderProcessAvgTimeChart()
    })
}

// Watch limit change to re-render current tab chart
watch(processLimit, () => {
    handleProcessTabChange(processStatsTab.value)
})

const renderAllCharts = () => {
  renderOrderChart()
  renderTimeDistChart()
  renderProcessAvgCountChart()
}

onMounted(() => {
  // 默认查询昨天的数据
  handleQuery()
})
</script>

<template>
  <div class="stats-quality-page" v-loading="loading">
    <!-- Filter -->
    <el-card shadow="never" class="mb-4">
      <el-form :inline="true" :model="queryForm">
        <el-form-item label="日期">
           <el-date-picker
            v-model="queryForm.dateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item label="地区">
          <el-select v-model="queryForm.city" placeholder="请选择" class="!w-48" clearable>
             <el-option v-for="c in cityList" :key="c.code" :label="c.name" :value="c.code" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleQuery">查询</el-button>
          <el-button type="success" :icon="Download" @click="handleExport">导出表格</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- Cards -->
    <div class="grid grid-cols-2 gap-4 mb-4">
       <el-card shadow="never" class="bg-blue-50">
         <div class="text-gray-500 mb-2">工单总数</div>
         <div class="text-3xl font-bold mb-3">{{ stats.totalOrders }}</div>
         <div class="flex justify-between text-sm">
           <span class="text-gray-600">已完成工单数</span>
           <span class="font-bold text-blue-600">{{ stats.finishOrders }}</span>
         </div>
       </el-card>
       
       <el-card shadow="never" class="bg-green-50">
         <div class="text-gray-500 mb-2">质检工单总数</div>
         <div class="text-3xl font-bold text-green-600 mb-3">{{ stats.resultCount }}</div>
         <div class="flex justify-between text-sm">
           <span class="text-gray-600">已完成质检工单数</span>
           <span class="font-bold text-green-600">{{ stats.finishResult }}</span>
         </div>
       </el-card>
       
       <el-card shadow="never" class="bg-orange-50">
         <div class="text-gray-500 mb-2">投诉工单总数</div>
         <div class="text-3xl font-bold text-orange-600 mb-3">{{ stats.complaintTotal }}</div>
         <div class="flex justify-between text-sm">
           <span class="text-gray-600">已完成投诉工单数</span>
           <span class="font-bold text-orange-600">{{ stats.complaintFinish }}</span>
         </div>
       </el-card>
       
       <el-card shadow="never" class="bg-purple-50">
         <div class="text-gray-500 mb-2">无法质检数</div>
         <div class="text-3xl font-bold text-purple-600 mb-3">{{ stats.noShowCount }}</div>
         <div class="flex justify-between text-sm">
           <span class="text-gray-600">平均耗时</span>
           <span class="font-bold text-purple-600">{{ stats.averageDuration }}秒</span>
         </div>
       </el-card>
    </div>

    <!-- 1. City Order Stats Section (Tabs) -->
    <el-card shadow="never" class="mb-4">
        <template #header>
            <div class="flex justify-between items-center">
                <div class="font-bold">地市工单统计</div>
                <el-button link type="primary" @click="showCityTable = !showCityTable">
                    {{ showCityTable ? '隐藏详细数据' : '查看详细数据' }}
                </el-button>
            </div>
        </template>
        
        <!-- Table -->
        <el-table v-show="showCityTable" :data="areaTypeList" border stripe height="250" class="mb-4">
            <el-table-column prop="areaName" label="地区" width="100" />
            <el-table-column label="工单总数" align="center">
                <el-table-column prop="orderCount" label="总数" sortable />
                <el-table-column prop="finishOrders" label="已完成" />
                <el-table-column prop="unfinishOrders" label="未完成" />
            </el-table-column>
            <el-table-column label="质检工单数" align="center">
                 <el-table-column prop="resultCount" label="总数" sortable />
                <el-table-column prop="finishResult" label="已完成" />
                <el-table-column prop="unfinishResult" label="未完成" />
            </el-table-column>
             <el-table-column label="投诉工单数" align="center">
                 <el-table-column prop="complaintTotal" label="总数" sortable />
                <el-table-column prop="complaintFinish" label="已完成" />
                <el-table-column prop="complaintUnfinish" label="未完成" />
            </el-table-column>
             <el-table-column prop="noShowCount" label="无法质检数" sortable />
        </el-table>

        <el-tabs v-model="cityStatsTab" class="mb-4" @tab-change="handleTabChange">
            <el-tab-pane label="工单数统计" name="order">
                <div ref="orderChartRef" style="width: 100%; height: 400px;"></div>
            </el-tab-pane>
            <el-tab-pane label="质检工单数统计" name="qc">
                <div ref="qcChartRef" style="width: 100%; height: 400px;"></div>
            </el-tab-pane>
            <el-tab-pane label="投诉工单数统计" name="complaint">
                <div ref="complaintChartRef" style="width: 100%; height: 400px;"></div>
            </el-tab-pane>
            <el-tab-pane label="无法质检工单数统计" name="cannotQc">
                <div ref="cannotQcChartRef" style="width: 100%; height: 400px;"></div>
            </el-tab-pane>
        </el-tabs>
    </el-card>

    <!-- 2. Time Stats Section (Tabs) -->
    <el-card shadow="never" class="mb-4">
        <template #header>
            <div class="flex justify-between items-center">
                <div class="font-bold">耗时统计</div>
                <el-button link type="primary" @click="showTimeTable = !showTimeTable">
                    {{ showTimeTable ? '隐藏详细数据' : '查看详细数据' }}
                </el-button>
            </div>
        </template>
        
        <el-table v-show="showTimeTable" :data="areaTypeList" border stripe height="250" class="mb-4">
           <el-table-column prop="areaName" label="地市" width="100" />
           <el-table-column prop="lessThan3Min" label="<3分钟" sortable />
           <el-table-column prop="moreThan3Min" label="3-4分钟" sortable />
           <el-table-column prop="moreThan4Min" label="4-5分钟" sortable />
           <el-table-column prop="moreThan5Min" label=">=5分钟" sortable />
           <el-table-column prop="totalDuration" label="总耗时(s)" sortable />
           <el-table-column prop="averageDuration" label="平均耗时(s)" sortable />
       </el-table>

        <el-tabs v-model="timeStatsTab" class="mb-4" @tab-change="handleTimeTabChange">
            <el-tab-pane label="地市耗时分布" name="dist">
                 <div ref="timeDistChartRef" style="width: 100%; height: 400px;"></div>
            </el-tab-pane>
            <el-tab-pane label="平均耗时" name="avg">
                 <div ref="avgTimeChartRef" style="width: 100%; height: 400px;"></div>
            </el-tab-pane>
        </el-tabs>
    </el-card>
    
    <!-- 3. Process Stats Section -->
     <el-card shadow="never" class="mb-4">
        <template #header>
            <div class="flex justify-between items-center">
                <div class="font-bold">质检环节统计</div>
                <el-button link type="primary" @click="showProcessTable = !showProcessTable">
                    {{ showProcessTable ? '隐藏详细数据' : '查看详细数据' }}
                </el-button>
            </div>
        </template>
        
        <!-- Table -->
        <el-table v-show="showProcessTable" :data="processStats" border stripe height="250" class="mb-4">
             <el-table-column prop="processName" label="环节名称" />
             <el-table-column prop="averageInspectionTimes" label="平均识别数" sortable />
             <el-table-column prop="totalCount" label="识别总数" sortable />
             <el-table-column prop="averageDuration" label="平均耗时(s)" sortable />
        </el-table>

        <div class="relative">
            <div class="absolute right-0 top-0 z-10 flex items-center gap-2">
                <span class="text-sm">显示数量:</span>
                <el-select v-model="processLimit" size="small" style="width: 100px">
                    <el-option label="10条" :value="10" />
                    <el-option label="15条" :value="15" />
                    <el-option label="全部" :value="1000" />
                </el-select>
            </div>
            <el-tabs v-model="processStatsTab" class="mb-4" @tab-change="handleProcessTabChange">
                <el-tab-pane label="平均识别次数" name="avgCount">
                     <div ref="processAvgCountChartRef" style="width: 100%; height: 400px;"></div>
                </el-tab-pane>
                <el-tab-pane label="识别总次数" name="totalCount">
                     <div ref="processTotalCountChartRef" style="width: 100%; height: 400px;"></div>
                </el-tab-pane>
                <el-tab-pane label="平均耗时" name="avgTime">
                     <div ref="processAvgTimeChartRef" style="width: 100%; height: 400px;"></div>
                </el-tab-pane>
            </el-tabs>
        </div>
     </el-card>
  </div>
</template>