QualityStats.vue

<script setup lang="ts">
import { ref, onMounted, nextTick, watch } from 'vue'
import { Search, Download, DataLine } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

const loading = ref(false)
const queryForm = ref({
  dateRange: [] as string[],
  city: ''
})

// Statistics Data
const stats = ref({
  total: 12580,
  completed: 11200,
  completedRate: 89.03,
  qcTotal: 12580,
  qcCompleted: 11000,
  qcCompletedRate: 87.44,
  complaintTotal: 50,
  complaintCompleted: 45,
  complaintRate: 90,
  cannotQc: 200,
  cannotQcRate: 1.59
})

// --- Constants ---
const cityList = ['南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市']
const processList = [
    '工服', '工牌', '账号', '环境', 
    '普通光猫', '普通光猫串号', '主光猫', '主光猫串号', 
    '子光猫', '子光猫串号', '机顶盒', '机顶盒串号',
    '路由器', '路由器串号', '电视画面', '电视软终端串号',
    '云电脑终端', '云电脑终端串号', '云电脑', '室内摄像头',
    '室内摄像头串号', '室外摄像头', '故障投诉光猫灯', '故障投诉主光猫灯'
]

// --- 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, 25, 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>()

// --- Data ---
const cityTableData = ref(cityList.map(city => ({
    date: '10-01', city, 
    total: 300, totalDone: 250, totalUndone: 50,
    qcTotal: 280, qcDone: 240, qcUndone: 40,
    complaintTotal: 10, complaintDone: 8, complaintUndone: 2,
    cannotQc: 5
})))

const timeTableData = ref(cityList.map(city => {
    const gt5 = Math.floor(Math.random() * 20)
    const bt45 = Math.floor(Math.random() * 30)
    const bt34 = Math.floor(Math.random() * 50)
    const lt3 = Math.floor(Math.random() * 100)
    return {
        date: '10-01', city, 
        gt5, bt45, bt34, lt3,
        total: gt5 + bt45 + bt34 + lt3,
        avgTime: Math.floor(Math.random() * 100 + 100)
    }
}))

const processTableData = ref(processList.map((name, i) => ({
    date: '10-01', name,
    totalCount: 1000 + i * 100,
    avgTime: (5 + Math.random() * 5).toFixed(2),
    avgCount: (1 + Math.random()).toFixed(2)
})))

// --- Chart Renderers ---
const renderOrderChart = () => {
    if (!orderChartRef.value) return
    const chart = echarts.getInstanceByDom(orderChartRef.value) || echarts.init(orderChartRef.value)
    chart.setOption({
       tooltip: { trigger: 'axis' },
       legend: { data: ['工单总数', '完成工单数', '未完成工单数'], bottom: 0 },
       xAxis: { type: 'category', data: cityList, axisLabel: { interval: 0, rotate: 30 } },
       yAxis: { type: 'value' },
       grid: { left: '3%', right: '4%', bottom: '10%', top: '3%', containLabel: true },
       series: [
           { name: '工单总数', type: 'bar', data: cityList.map(() => 300 + Math.random() * 50) },
           { name: '完成工单数', type: 'bar', data: cityList.map(() => 250 + Math.random() * 40) },
           { name: '未完成工单数', type: 'bar', data: cityList.map(() => 50 + Math.random() * 10) }
       ]
    })
    chart.resize()
}

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

const renderComplaintChart = () => {
    if (!complaintChartRef.value) return
    const chart = echarts.getInstanceByDom(complaintChartRef.value) || echarts.init(complaintChartRef.value)
    chart.setOption({
       tooltip: { trigger: 'axis' },
       legend: { data: ['投诉工单总数', '完成投诉工单数', '未完成投诉工单数'], bottom: 0 },
       xAxis: { type: 'category', data: cityList, axisLabel: { interval: 0, rotate: 30 } },
       yAxis: { type: 'value' },
       grid: { left: '3%', right: '4%', bottom: '10%', top: '3%', containLabel: true },
       series: [
           { name: '投诉工单总数', type: 'bar', data: cityList.map(() => 10 + Math.random() * 5), itemStyle: { color: '#E6A23C' } },
           { name: '完成投诉工单数', type: 'bar', data: cityList.map(() => 8 + Math.random() * 4), itemStyle: { color: '#f3d19e' } },
           { name: '未完成投诉工单数', type: 'bar', data: cityList.map(() => 2 + Math.random() * 2), itemStyle: { color: '#faecd8' } }
       ]
    })
    chart.resize()
}

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

const renderTimeDistChart = () => {
    if (!timeDistChartRef.value) return
      const chart = echarts.getInstanceByDom(timeDistChartRef.value) || echarts.init(timeDistChartRef.value)
      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: cityList }, 
          grid: { left: '3%', right: '4%', bottom: '10%', top: '3%', containLabel: true },
          series: [
              { name: '>5分钟', type: 'bar', stack: 'total', data: cityList.map(() => Math.random() * 20) },
              { name: '4-5分钟', type: 'bar', stack: 'total', data: cityList.map(() => Math.random() * 30) },
              { name: '3-4分钟', type: 'bar', stack: 'total', data: cityList.map(() => Math.random() * 40) },
              { name: '<3分钟', type: 'bar', stack: 'total', data: cityList.map(() => Math.random() * 50) }
          ]
      })
      chart.resize()
}

const renderAvgTimeChart = () => {
    if (!avgTimeChartRef.value) return
      const chart = echarts.getInstanceByDom(avgTimeChartRef.value) || echarts.init(avgTimeChartRef.value)
      chart.setOption({
          tooltip: { trigger: 'axis' },
          xAxis: { type: 'category', data: cityList, 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: cityList.map(() => 150 + Math.random() * 50),
                  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 = processList.slice(0, limit)
    
    chart.setOption({
       tooltip: { trigger: 'axis' },
       legend: { data: ['平均识别次数'], bottom: 0 },
       xAxis: { type: 'category', data: currentData, axisLabel: { interval: 0, rotate: 30 } },
       yAxis: { type: 'value' },
       grid: { left: '3%', right: '4%', bottom: '15%', top: '10%', containLabel: true },
       series: [
           { name: '平均识别次数', type: 'bar', data: currentData.map(() => 1 + Math.random()), 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 = processList.slice(0, limit)

    chart.setOption({
       tooltip: { trigger: 'axis' },
       legend: { data: ['识别总次数'], bottom: 0 },
       xAxis: { type: 'category', data: currentData, axisLabel: { interval: 0, rotate: 30 } },
       yAxis: { type: 'value' },
       grid: { left: '3%', right: '4%', bottom: '15%', top: '10%', containLabel: true },
       series: [
           { name: '识别总次数', type: 'bar', data: currentData.map(() => 1000 + Math.random() * 500), 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 = processList.slice(0, limit)

    chart.setOption({
       tooltip: { trigger: 'axis' },
       legend: { data: ['平均耗时(秒)'], bottom: 0 },
       xAxis: { type: 'category', data: currentData, axisLabel: { interval: 0, rotate: 30 } },
       yAxis: { type: 'value' },
       grid: { left: '3%', right: '4%', bottom: '15%', top: '10%', containLabel: true },
       series: [
           { name: '平均耗时(秒)', type: 'bar', data: currentData.map(() => 5 + Math.random() * 5), 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 initCharts = () => {
  // Init default active tabs
  renderOrderChart()
  renderTimeDistChart()
  renderProcessAvgCountChart()
}

onMounted(() => {
  initCharts()
})
</script>

<template>
  <div class="stats-quality-page">
    <!-- 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" :label="c" :value="c" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search">查询</el-button>
          <el-button type="success" :icon="Download">导出表格</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- Cards -->
    <div class="grid grid-cols-4 gap-4 mb-4">
       <!-- ... keep cards ... -->
       <el-card shadow="never" class="bg-blue-50">
         <div class="text-gray-500 mb-2">工单总数</div>
         <div class="text-2xl font-bold">{{ stats.total }}</div>
         <div class="text-sm text-gray-500 mt-2">已完成: {{ stats.completed }} ({{ stats.completedRate }}%)</div>
       </el-card>
       <el-card shadow="never" class="bg-green-50">
         <div class="text-gray-500 mb-2">质检工单总数</div>
         <div class="text-2xl font-bold text-green-600">{{ stats.qcTotal }}</div>
         <div class="text-sm text-gray-500 mt-2">已完成: {{ stats.qcCompleted }} ({{ stats.qcCompletedRate }}%)</div>
       </el-card>
        <el-card shadow="never" class="bg-orange-50">
         <div class="text-gray-500 mb-2">投诉工单总数</div>
         <div class="text-2xl font-bold text-orange-600">{{ stats.complaintTotal }}</div>
         <div class="text-sm text-gray-500 mt-2">已完成: {{ stats.complaintCompleted }} ({{ stats.complaintRate }}%)</div>
       </el-card>
        <el-card shadow="never" class="bg-gray-50">
         <div class="text-gray-500 mb-2">无法质检数</div>
         <div class="text-2xl font-bold text-gray-600">{{ stats.cannotQc }}</div>
         <div class="text-sm text-gray-500 mt-2">占比: {{ stats.cannotQcRate }}%</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="cityTableData" border stripe height="250" class="mb-4">
            <el-table-column prop="date" label="日期" width="120" />
            <el-table-column prop="city" label="地区" width="100" />
            <el-table-column label="工单总数" align="center">
                <el-table-column prop="total" label="总数" sortable />
                <el-table-column prop="totalDone" label="已完成" />
                <el-table-column prop="totalUndone" label="未完成" />
            </el-table-column>
            <el-table-column label="质检工单数" align="center">
                 <el-table-column prop="qcTotal" label="总数" sortable />
                <el-table-column prop="qcDone" label="已完成" />
                <el-table-column prop="qcUndone" label="未完成" />
            </el-table-column>
             <el-table-column label="投诉工单数" align="center">
                 <el-table-column prop="complaintTotal" label="总数" sortable />
                <el-table-column prop="complaintDone" label="已完成" />
                <el-table-column prop="complaintUndone" label="未完成" />
            </el-table-column>
             <el-table-column prop="cannotQc" 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="timeTableData" border stripe height="250" class="mb-4">
           <el-table-column prop="date" label="日期" width="120" />
           <el-table-column prop="city" label="地市" width="100" />
           <el-table-column prop="gt5" label=">5分钟" sortable />
           <el-table-column prop="bt45" label="4≤x<5分钟" sortable />
           <el-table-column prop="bt34" label="3≤x<4分钟" sortable />
           <el-table-column prop="lt3" label="<3分钟" sortable />
           <el-table-column prop="total" label="总计" sortable />
           <el-table-column prop="avgTime" 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 (New) -->
     <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="processTableData" border stripe height="250" class="mb-4">
             <el-table-column prop="date" label="日期" width="120" />
             <el-table-column prop="name" label="环节名称" />
             <el-table-column prop="totalCount" label="识别总次数" sortable />
             <el-table-column prop="avgTime" label="平均耗时(s)" sortable />
             <el-table-column prop="avgCount" label="平均识别次数" 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>