DeviceStats.vue

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Search, Download, Picture, VideoPlay } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { statsApi, qualityApi } 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(),
  page: 1,
  pageSize: 10
})

const loading = ref(false)
const deviceStats = ref<any[]>([])

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

// 获取设备识别统计数据
const fetchDeviceStats = 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 = formatDate(new Date(start))
        params.endDate = formatDate(new Date(end))
      }
    }
    
    const response = await statsApi.getProcessRecognizeStatistics(params) as ApiResponse<any>
    
    if (response.code === 200 || response.code === 0) {
      deviceStats.value = response.data || []
    }
  } catch (error) {
    console.error('获取设备识别统计失败:', error)
  } finally {
    loading.value = false
  }
}

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

// Dialogs
const exportImgDialog = ref(false)
const videoDialog = ref(false)

// 导出图片表单
const exportImgForm = reactive({
  dateRange: getYesterdayRange(),
  deviceTypes: [] as string[]
})

// 设备类型列表
const deviceTypeList = [
  '工服', '工牌', '宽带账号', '普通光猫', '主光猫', '子光猫', 
  '机顶盒', '电视画面', '电视软终端', '路由器', '室内摄像头', 
  '室外摄像头', '云电脑终端', '云电脑显示器', 'POE交换机', 
  'POE面板', '故障投诉光猫灯', '故障投诉主光猫灯', '环境'
]

// 格式化日期时间为 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 handleExportDetail = async () => {
  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 = formatDate(new Date(start))
        params.endDate = formatDate(new Date(end))
      }
    }
    
    // 调用导出接口 (request.ts 会自动处理 JSON 错误和 401)
    const blob = await qualityApi.exportProcessRecognizeStatistics(params)
    
    // 创建下载链接
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    
    // 生成文件名
    const dateStr = formatDate(new Date())
    link.download = `设备识别统计明细_${dateStr}.xlsx`
    
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    
    ElMessage.success('导出成功')
  } catch (error) {
    // request.ts 已经显示了错误消息,这里只需要记录日志
    console.error('导出明细失败:', error)
  }
}

// 导出图片
const handleExportImages = async () => {
  try {
    const params: any = {
      deviceTypes: exportImgForm.deviceTypes
    }
    
    // 处理日期范围
    if (exportImgForm.dateRange && exportImgForm.dateRange.length === 2) {
      const start = exportImgForm.dateRange[0]
      const end = exportImgForm.dateRange[1]
      if (start && end) {
        params.startTime = formatDateTime(new Date(start))
        
        // 设置结束时间为当天的 23:59:59
        const endDate = new Date(end)
        endDate.setHours(23, 59, 59, 999)
        params.endTime = formatDateTime(endDate)
      }
    }
    
    // 调用导出接口 (request.ts 会自动处理 JSON 错误和 401)
    const blob = await qualityApi.exportLLMResultList(params)
    
    // 创建下载链接
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    
    // 生成文件名
    const dateStr = formatDate(new Date())
    link.download = `设备识别数据_${dateStr}.xlsx`
    
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    
    ElMessage.success('导出成功')
    exportImgDialog.value = false
  } catch (error) {
    // request.ts 已经显示了错误消息,这里只需要记录日志
    console.error('导出图片失败:', error)
  }
}


// 视频查询表单
const videoQueryForm = reactive({
  dateRange: getYesterdayRange(),
  applyId: '',
  page: 1,
  pageSize: 10
})

// 视频列表数据
const videoList = ref<any[]>([])
const videoTotal = ref(0)
const videoLoading = ref(false)

// 当前播放的视频URL
const currentVideoUrl = ref('')
const videoPlayerDialog = ref(false)

// 获取视频列表
const fetchVideoList = async () => {
  videoLoading.value = true
  
  try {
    const params: any = {
      page: videoQueryForm.page,
      pageSize: videoQueryForm.pageSize
    }
    
    // 处理日期范围
    if (videoQueryForm.dateRange && videoQueryForm.dateRange.length === 2) {
      const start = videoQueryForm.dateRange[0]
      const end = videoQueryForm.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)
      }
    }
    
    // applyId
    if (videoQueryForm.applyId) {
      params.applyId = videoQueryForm.applyId
    }
    
    const response = await statsApi.getVideoList(params) as ApiResponse<any>
    
    if (response.code === 200 || response.code === 0) {
      const data = response.data || {}
      videoList.value = data.records || []
      videoTotal.value = data.total || 0
    }
  } catch (error) {
    console.error('获取视频列表失败:', error)
  } finally {
    videoLoading.value = false
  }
}

// 查询视频
const handleVideoQuery = () => {
  videoQueryForm.page = 1
  fetchVideoList()
}

// 分页改变
const handleVideoPageChange = (page: number) => {
  videoQueryForm.page = page
  fetchVideoList()
}

const handleVideoSizeChange = (size: number) => {
  videoQueryForm.pageSize = size
  videoQueryForm.page = 1
  fetchVideoList()
}

// 播放视频
const playVideo = (url: string) => {
  currentVideoUrl.value = url
  videoPlayerDialog.value = true
}

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

<template>
  <div class="device-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="handleQuery">查询</el-button>
          <el-button type="success" :icon="Download" @click="handleExportDetail">导出明细</el-button>
          
          <el-button :icon="Picture" @click="exportImgDialog = true">导出图片</el-button>
          <el-button :icon="VideoPlay" @click="videoDialog = true">查看视频</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- Table -->
    <el-card shadow="never">
        <el-table :data="deviceStats" border stripe>
            <el-table-column prop="processName" label="设备名称" fixed width="150" />
            <el-table-column prop="tryNum1" label="识别1次" align="center" sortable>
                <template #default="{ row }">
                    <div>{{ row.tryNum1 || 0 }}</div>
                </template>
            </el-table-column>
             <el-table-column prop="tryNum2" label="识别2次" align="center" sortable>
                <template #default="{ row }">
                    <div>{{ row.tryNum2 || 0 }}</div>
                </template>
            </el-table-column>
             <el-table-column prop="tryNum3" label="识别3次" align="center" sortable>
                <template #default="{ row }">
                    <div>{{ row.tryNum3 || 0 }}</div>
                </template>
            </el-table-column>
             <el-table-column prop="tryNum4" label="识别4次" align="center" sortable>
                <template #default="{ row }">
                    <div>{{ row.tryNum4 || 0 }}</div>
                </template>
            </el-table-column>
             <el-table-column prop="tryNum5" label="识别5次" align="center" sortable>
                <template #default="{ row }">
                    <div>{{ row.tryNum5 || 0 }}</div>
                </template>
            </el-table-column>
             <el-table-column prop="tryNumGte6" label="≥6次" align="center" sortable>
                <template #default="{ row }">
                    <div>{{ row.tryNumGte6 || 0 }}</div>
                </template>
            </el-table-column>
             <el-table-column prop="totalCount" label="总识别次数" align="center" sortable>
                <template #default="{ row }">
                    <div class="font-bold text-blue-600">{{ row.totalCount || 0 }}</div>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <!-- Export Image Dialog -->
    <el-dialog v-model="exportImgDialog" title="导出图片配置" width="500px">
        <el-form label-width="100px" :model="exportImgForm">
            <el-form-item label="日期范围">
                <el-date-picker
                  v-model="exportImgForm.dateRange"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width: 100%"
                />
            </el-form-item>
            <el-form-item label="选择设备">
                <el-select
                  v-model="exportImgForm.deviceTypes"
                  placeholder="请选择设备"
                  multiple
                  collapse-tags
                  collapse-tags-tooltip
                  style="width: 100%"
                >
                    <el-option
                      v-for="device in deviceTypeList"
                      :key="device"
                      :label="device"
                      :value="device"
                    />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="exportImgDialog = false">取消</el-button>
            <el-button type="primary" @click="handleExportImages">确定导出</el-button>
        </template>
    </el-dialog>

    <!-- Video List Dialog -->
    <el-dialog v-model="videoDialog" title="查看视频" width="1000px" @open="fetchVideoList">
        <el-form :inline="true" :model="videoQueryForm">
            <el-form-item label="日期">
              <el-date-picker
                v-model="videoQueryForm.dateRange"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </el-form-item>
            <el-form-item label="Apply ID">
              <el-input v-model="videoQueryForm.applyId" placeholder="请输入Apply ID" clearable style="width: 200px" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleVideoQuery">查询</el-button>
            </el-form-item>
        </el-form>
        
        <el-table :data="videoList" border height="400" v-loading="videoLoading">
            <el-table-column prop="applyId" label="Apply ID" width="200" />
            <el-table-column label="视频链接" min-width="300">
              <template #default="{ row }">
                <div v-if="row.videoUtlList && row.videoUtlList.length > 0" class="flex flex-wrap gap-2">
                  <el-button
                    v-for="(url, index) in row.videoUtlList"
                    :key="index"
                    link
                    type="primary"
                    size="small"
                    @click="playVideo(url)"
                  >
                    视频{{ index + 1 }}
                  </el-button>
                </div>
                <span v-else class="text-gray-400">暂无视频</span>
              </template>
            </el-table-column>

        </el-table>
        
        <div class="mt-4 flex justify-end">
          <el-pagination
            v-model:current-page="videoQueryForm.page"
            v-model:page-size="videoQueryForm.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="videoTotal"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleVideoSizeChange"
            @current-change="handleVideoPageChange"
          />
        </div>
    </el-dialog>
    
    <!-- Video Player Dialog -->
    <el-dialog v-model="videoPlayerDialog" title="视频播放" width="800px">
      <video v-if="currentVideoUrl" :src="currentVideoUrl" controls style="width: 100%; max-height: 500px;">
        您的浏览器不支持视频播放
      </video>
      <div v-else class="text-center text-gray-400 py-8">
        暂无视频
      </div>
    </el-dialog>
  </div>
</template>