SerialStats.vue

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

// 获取昨天的日期范围
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 = reactive({
    dateRange: getYesterdayRange() as any[],
    page: 1,
    pageSize: 10
})

const loading = ref(false)

// 格式化日期时间为 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}`
}

// Summary data
const summary = ref({
    totalSubmitCount: 0,
    autoRecognizeRate: 0,
    passRate1: 0,
    passRateWithin3: 0,
    avgDuration: 0,
    avgRecognizeTimes: 0
})

// Data lists
const datesList = ref<any[]>([])
const processList = ref<any[]>([])

// Computed property to check if date range > 1 day
const isMultiDay = computed(() => {
    if (!queryForm.dateRange || queryForm.dateRange.length !== 2) return false
    const start = dayjs(queryForm.dateRange[0])
    const end = dayjs(queryForm.dateRange[1])
    return end.diff(start, 'day') >= 1
})

// Tab State (Only for Multi-Day)
const trendTab = ref('overall') // 'overall', 'details'

const passRateChartRef = ref<HTMLElement>()
const trendChartRef = ref<HTMLElement>()

// New Trend Charts Refs
const overallPassRateTrendRef = ref<HTMLElement>()
const overallAutoRateTrendRef = ref<HTMLElement>()
const devicePassRateChartRef = ref<HTMLElement>() // For Device Detail Tab - Pass Rate
const deviceAutoRateChartRef = ref<HTMLElement>() // For Device Detail Tab - Auto Rate

// Chart instances
let passRateChart: echarts.ECharts | null = null
let trendChart: echarts.ECharts | null = null
let overallPassRateChart: echarts.ECharts | null = null
let overallAutoRateChart: echarts.ECharts | null = null
let devicePassRateChart: echarts.ECharts | null = null
let deviceAutoRateChart: echarts.ECharts | null = null

// 获取统计数据
const fetchStats = async () => {
  loading.value = true
  
  try {
    const params: any = {}
    
    // 处理日期范围
    if (queryForm.dateRange && queryForm.dateRange.length === 2) {
      const start = queryForm.dateRange[0]
      const end = queryForm.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)
      }
    }
    
    const response = await statsApi.getSNStatisticsSummary(params) as ApiResponse<any>
    
    if (response.code === 200 || response.code === 0) {
      const data = response.data || {}
      
      // 更新顶部统计数据
      summary.value = {
        totalSubmitCount: data.totalSubmitCount || 0,
        autoRecognizeRate: data.autoRecognizeRate || 0,
        passRate1: data.passRate1 || 0,
        passRateWithin3: data.passRateWithin3 || 0,
        avgDuration: data.avgDuration || 0,
        avgRecognizeTimes: data.avgRecognizeTimes || 0
      }
      
      // 更新列表数据
      datesList.value = data.datesList || []
      processList.value = data.processList || []
      
      // 重新渲染图表
      nextTick(() => {
        updateView()
      })
    }
  } catch (error) {
    console.error('获取串号统计数据失败:', error)
  } finally {
    loading.value = false
  }
}

/* -------------------------------------------------------------------------- */
/*                           SINGLE DAY CHARTS                                */
/* -------------------------------------------------------------------------- */

const initSingleDayCharts = () => {
    // 1. Device Pass Rate Bar Chart
    if (passRateChartRef.value && processList.value.length > 0) {
        passRateChart = echarts.getInstanceByDom(passRateChartRef.value) || echarts.init(passRateChartRef.value)
        
        const deviceNames = processList.value.map(item => item.processName)
        const pass1Data = processList.value.map(item => item.passRate1 || 0)
        const pass3Data = processList.value.map(item => item.passRate3 || 0)
        
        passRateChart.setOption({
            title: { text: '设备识别通过率' },
            tooltip: { trigger: 'axis' },
            legend: { data: ['1次通过', '3次通过'], bottom: 0 },
            grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
            xAxis: { type: 'category', data: deviceNames, axisLabel: { interval: 0, rotate: 30 } },
            yAxis: { type: 'value', name: '%' },
            series: [
                { name: '1次通过', type: 'bar', data: pass1Data },
                { name: '3次通过', type: 'bar', data: pass3Data }
            ]
        })
        passRateChart.resize()
    }

    // 2. Device Auto Identify Rate Chart (Single Day)
    if (trendChartRef.value && processList.value.length > 0) {
        trendChart = echarts.getInstanceByDom(trendChartRef.value) || echarts.init(trendChartRef.value)
        
        const deviceNames = processList.value.map(item => item.processName)
        const autoRateData = processList.value.map(item => item.autoRecognizeRate || 0)
        
        trendChart.setOption({
            title: { text: '设备自动识别通过率' },
            tooltip: { trigger: 'axis' },
            legend: { data: ['自动识别率'], bottom: 0 },
            xAxis: { type: 'category', data: deviceNames, axisLabel: { interval: 0, rotate: 30 } },
            yAxis: { type: 'value', name: '%' },
            grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
            series: [
                { name: '自动识别率', type: 'bar', data: autoRateData, itemStyle: { color: '#67C23A' } }
            ]
        })
        trendChart.resize()
    }
}


/* -------------------------------------------------------------------------- */
/*                           MULTI DAY CHARTS                                 */
/* -------------------------------------------------------------------------- */

const initMultiDayCharts = () => {
    if (trendTab.value === 'overall') {
        // 1. Overall Pass Rate Trend
        if (overallPassRateTrendRef.value && datesList.value.length > 0) {
            overallPassRateChart = echarts.getInstanceByDom(overallPassRateTrendRef.value) || echarts.init(overallPassRateTrendRef.value)
            
            const dates = datesList.value.map(item => item.date)
            const pass1Data = datesList.value.map(item => item.passRate1 || 0)
            const pass3Data = datesList.value.map(item => item.passRate3 || 0)
            
            overallPassRateChart.setOption({
                title: { text: '整体通过率时间趋势' },
                tooltip: { trigger: 'axis' },
                legend: { data: ['1次通过率', '3次通过率'], bottom: 0 },
                xAxis: { type: 'category', data: dates },
                yAxis: { type: 'value', name: '%' },
                grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
                series: [
                    { name: '1次通过率', type: 'line', data: pass1Data, smooth: true },
                    { name: '3次通过率', type: 'line', data: pass3Data, smooth: true }
                ]
            }, true)
            overallPassRateChart.resize()
        }

        // 2. Overall Auto Rate Trend
        if (overallAutoRateTrendRef.value && datesList.value.length > 0) {
            overallAutoRateChart = echarts.getInstanceByDom(overallAutoRateTrendRef.value) || echarts.init(overallAutoRateTrendRef.value)
            
            const dates = datesList.value.map(item => item.date)
            const autoRateData = datesList.value.map(item => item.autoRecognizeRate || 0)
            
            overallAutoRateChart.setOption({
                title: { text: '整体自动识别率时间趋势' },
                tooltip: { trigger: 'axis' },
                xAxis: { type: 'category', data: dates },
                yAxis: { type: 'value', name: '%' },
                grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
                series: [{ name: '自动识别率', type: 'line', data: autoRateData, smooth: true, itemStyle: { color: '#67C23A' } }]
            }, true)
            overallAutoRateChart.resize()
        }
    } else {
       // 'details' Tab
       
       // 1. Device Pass Rate Stats
       nextTick(() => {
           if (devicePassRateChartRef.value && processList.value.length > 0) {
               devicePassRateChart = echarts.getInstanceByDom(devicePassRateChartRef.value) || echarts.init(devicePassRateChartRef.value)
               
               const deviceNames = processList.value.map(item => item.processName)
               const pass1Data = processList.value.map(item => item.passRate1 || 0)
               const pass3Data = processList.value.map(item => item.passRate3 || 0)
               
               devicePassRateChart.setOption({
                    title: { text: '设备识别通过率' },
                    tooltip: { trigger: 'axis' },
                    legend: { data: ['1次通过', '3次通过'], bottom: 0 },
                    grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
                    xAxis: { type: 'category', data: deviceNames, axisLabel: { interval: 0, rotate: 30 } },
                    yAxis: { type: 'value', name: '%' },
                    series: [
                        { name: '1次通过', type: 'bar', data: pass1Data },
                        { name: '3次通过', type: 'bar', data: pass3Data }
                    ]
               })
               devicePassRateChart.resize()
           }
       })

       // 2. Device Auto Rate Stats
       nextTick(() => {
           if (deviceAutoRateChartRef.value && processList.value.length > 0) {
               deviceAutoRateChart = echarts.getInstanceByDom(deviceAutoRateChartRef.value) || echarts.init(deviceAutoRateChartRef.value)
               
               const deviceNames = processList.value.map(item => item.processName)
               const autoRateData = processList.value.map(item => item.autoRecognizeRate || 0)
               
               deviceAutoRateChart.setOption({
                   title: { text: '设备自动识别率' },
                   tooltip: { trigger: 'axis' },
                   legend: { data: ['自动识别率'], bottom: 0 },
                   xAxis: { type: 'category', data: deviceNames, axisLabel: { interval: 0, rotate: 30 } },
                   yAxis: { type: 'value', name: '%' },
                   grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
                   series: [
                       { name: '自动识别率', type: 'bar', data: autoRateData, itemStyle: { color: '#409EFF' } }
                   ]
               })
               deviceAutoRateChart.resize()
           }
       })
    }
}

const handleSearch = () => {
    fetchStats()
}

const updateView = () => {
    if (isMultiDay.value) {
        initMultiDayCharts()
    } else {
        initSingleDayCharts()
    }
}

watch([isMultiDay, trendTab], () => {
    nextTick(() => {
        updateView()
    })
})

const handleResize = () => {
    passRateChart?.resize()
    trendChart?.resize()
    overallPassRateChart?.resize()
    overallAutoRateChart?.resize()
    devicePassRateChart?.resize()
    deviceAutoRateChart?.resize()
}

onMounted(() => {
    fetchStats()
    window.addEventListener('resize', handleResize)
})
</script>

<template>
  <div class="serial-stats-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>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- Summary Cards -->
    <div class="grid grid-cols-3 gap-4 mb-4">
        <el-card shadow="never" class="bg-blue-50">
          <div class="text-gray-500 mb-2">提交总次数</div>
          <div class="text-4xl font-bold mb-3">{{ summary.totalSubmitCount }}</div>
        </el-card>
        
        <el-card shadow="never" class="bg-green-50">
          <div class="text-gray-500 mb-2">自动识别占比</div>
          <div class="text-4xl font-bold text-blue-600 mb-3">{{ summary.autoRecognizeRate }}%</div>
        </el-card>
        
        <el-card shadow="never" class="bg-purple-50">
          <div class="text-gray-500 mb-2">1次通过率</div>
          <div class="text-4xl font-bold text-green-600 mb-3">{{ summary.passRate1 }}%</div>
        </el-card>
        
        <el-card shadow="never" class="bg-orange-50">
          <div class="text-gray-500 mb-2">3次内通过率</div>
          <div class="text-4xl font-bold text-green-600 mb-3">{{ summary.passRateWithin3 }}%</div>
        </el-card>
        
        <el-card shadow="never" class="bg-indigo-50">
          <div class="text-gray-500 mb-2">平均耗时</div>
          <div class="text-4xl font-bold text-indigo-600 mb-3">{{ summary.avgDuration }}<span class="text-xl">s</span></div>
        </el-card>
        
        <el-card shadow="never" class="bg-pink-50">
          <div class="text-gray-500 mb-2">平均识别</div>
          <div class="text-4xl font-bold text-pink-600 mb-3">{{ summary.avgRecognizeTimes }}<span class="text-xl">次</span></div>
        </el-card>
    </div>

    <!-- Charts Area -->
    <!-- Case 1: Single Day -->
    <div v-if="!isMultiDay" class="grid grid-cols-1 gap-4 mb-4">
        <el-card shadow="never">
            <div ref="passRateChartRef" style="height: 350px"></div>
        </el-card>
        <el-card shadow="never">
            <div ref="trendChartRef" style="height: 350px"></div>
        </el-card>
    </div>

    <!-- Case 2: Multi Day -->
    <el-card v-else shadow="never" class="mb-4">
        <template #header>
            <div class="flex items-center gap-4">
                <span class="font-bold">趋势分析</span>
                <el-radio-group v-model="trendTab" size="small">
                    <el-radio-button value="overall">整体趋势</el-radio-button>
                    <el-radio-button value="details">设备详情</el-radio-button>
                </el-radio-group>
            </div>
        </template>
        
        <!-- Overall Trend Tab Content -->
        <div v-if="trendTab === 'overall'" class="grid grid-cols-1 gap-4">
            <div ref="overallPassRateTrendRef" style="height: 350px; border: 1px solid #f0f0f0; border-radius: 4px; padding: 10px;"></div>
            <div ref="overallAutoRateTrendRef" style="height: 350px; border: 1px solid #f0f0f0; border-radius: 4px; padding: 10px;"></div>
        </div>
        
        <!-- Device Details Tab Content -->
        <div v-if="trendTab === 'details'">
             <div ref="devicePassRateChartRef" style="height: 400px; border: 1px solid #f0f0f0; border-radius: 4px; padding: 10px;" class="mb-4"></div>
             <div ref="deviceAutoRateChartRef" style="height: 400px; border: 1px solid #f0f0f0; border-radius: 4px; padding: 10px;" class="mb-4"></div>
             
             <!-- Table for Device Details -->
             <el-table :data="processList" border stripe>
                <el-table-column prop="processName" label="设备名称" />
                <el-table-column prop="totalCount" label="提交总次数" sortable />
                <el-table-column prop="passRate1" label="1次通过率" sortable>
                  <template #default="{ row }">{{ row.passRate1 }}%</template>
                </el-table-column>
                <el-table-column prop="passRate3" label="3次通过率" sortable>
                  <template #default="{ row }">{{ row.passRate3 }}%</template>
                </el-table-column>
                <el-table-column prop="passRateWithin3" label="3次内通过率" sortable>
                  <template #default="{ row }">{{ row.passRateWithin3 }}%</template>
                </el-table-column>
                <el-table-column prop="autoRecognizeRate" label="自动识别占比" sortable>
                  <template #default="{ row }">{{ row.autoRecognizeRate }}%</template>
                </el-table-column>
                <el-table-column prop="avgRecognizeTimes" label="平均识别次数" sortable />
                <el-table-column prop="avgDuration" label="平均耗时" sortable>
                  <template #default="{ row }">{{ row.avgDuration }}s</template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>

     <!-- Single Day Table (Outside of multi-day card) -->
     <div v-if="!isMultiDay" class="mb-4">
         <el-card shadow="never">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="font-bold">设备串号明细</span>
                    <el-button type="success" link :icon="Download">导出表格</el-button>
                </div>
            </template>
            <el-table :data="processList" border stripe>
                <el-table-column prop="processName" label="设备名称" />
                <el-table-column prop="totalCount" label="提交总次数" sortable />
                <el-table-column prop="passRate1" label="1次通过率" sortable>
                  <template #default="{ row }">{{ row.passRate1 }}%</template>
                </el-table-column>
                <el-table-column prop="passRate3" label="3次通过率" sortable>
                  <template #default="{ row }">{{ row.passRate3 }}%</template>
                </el-table-column>
                <el-table-column prop="passRateWithin3" label="3次内通过率" sortable>
                  <template #default="{ row }">{{ row.passRateWithin3 }}%</template>
                </el-table-column>
                <el-table-column prop="autoRecognizeRate" label="自动识别占比" sortable>
                  <template #default="{ row }">{{ row.autoRecognizeRate }}%</template>
                </el-table-column>
                <el-table-column prop="avgRecognizeTimes" label="平均识别次数" sortable />
                <el-table-column prop="avgDuration" label="平均耗时" sortable>
                  <template #default="{ row }">{{ row.avgDuration }}s</template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>

  </div>
</template>