gxt_app/pages/worktime/index.uvue

<template>
  <uni-navbar-lite :showLeft=false title="工时"></uni-navbar-lite>
  <view class="list-page">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-box">
        <image class="search-icon" src="/static/images/workbench/list/1.png" mode="aspectFit"></image>
        <input 
          class="search-input" 
          placeholder="搜索工单编号、风机编号"
          v-model="searchKeyword"
          @confirm="handleSearch"
        />
        <text v-if="searchKeyword.length > 0" class="clear-icon" @click="clearSearch">✕</text>
      </view>
    </view>

    <!-- 工单分类筛选 -->
    <view class="status-bar">
      <view class="status-box">
        <text 
          class="status-txt" 
          :class="{ 'stauts-sel': orderTypeFilter === '' }"
          @click="filterByOrderType('')"
        >
          全部
        </text>
        <text 
          class="status-txt" 
          :class="{ 'stauts-sel': orderTypeFilter === '1' }"
          @click="filterByOrderType('1')"
        >
          维修工单
        </text>
        <text 
          class="status-txt" 
          :class="{ 'stauts-sel': orderTypeFilter === '2' }"
          @click="filterByOrderType('2')"
        >
          维保工单
        </text>
      </view>
    </view>

    <!-- 工时统计 -->
    <view class="stats-section">
      <view class="stats-header">
        <text class="stats-title">{{ timeRangeTitle }}工时统计</text>
        <view class="time-filters">
          <text 
            class="time-filter" 
            :class="{ 'time-filter-sel': timeRange === 'week' }"
            @click="changeTimeRange('week')"
          >
            本周
          </text>
          <text 
            class="time-filter" 
            :class="{ 'time-filter-sel': timeRange === 'month' }"
            @click="changeTimeRange('month')"
          >
            本月
          </text>
          <text 
            class="time-filter" 
            :class="{ 'time-filter-sel': timeRange === 'custom' }"
            @click="showCustomDatePicker"
          >
            自定义
          </text>
        </view>
      </view>

      <!-- 统计数据 -->
      <view class="stats-content">
        <view class="total-hours">
          <text class="hours-value">{{ totalHours }}小时</text>
          <text class="hours-label">{{ timeRangeTitle }}总工时</text>
        </view>
        
        <view class="hours-breakdown">
          <view v-if="orderTypeFilter !== '1'" class="breakdown-item">
            <text class="breakdown-label">维保工时</text>
            <text class="breakdown-value">{{ maintenanceHours }}小时</text>
          </view>
          <view v-if="orderTypeFilter !== '2'" class="breakdown-item">
            <text class="breakdown-label">维修工时</text>
            <text class="breakdown-value">{{ repairHours }}小时</text>
          </view>
          <view v-if="rank !== null && totalRankingUsers !== null" class="breakdown-item">
            <text class="breakdown-label">排名</text>
            <text class="breakdown-value">{{ rank }}/{{ totalRankingUsers }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 工单列表 -->
    <common-list 
      :dataList="orderList" 
      :loading="loading" 
      :refreshing="refreshing" 
      :hasMore="hasMore" 
      @refresh="handleRefresh" 
      @loadMore="loadMore" 
      @itemClick="handleItemClick" 
      class="list-with-padding"
    >
      <template #default="{ item, index }">
        <view class="list-item">
          <view class="item-container">
            <view class="item-header">
              <text class="item-title">{{ getPropertyValue(item, 'workOrderProjectNo') }}-风机编号{{ getPropertyValue(item, 'pcsDeviceName') }}的{{ getWorkOrderTypeText(getPropertyValue(item, 'orderType')) }}</text>
              <text class="info-value">{{ getWorkOrderStatus(item) }}</text>
            </view>
            <view class="info-row">
              <view class="info-label">
                <text class="text-gray">下发时间: {{ formatDate(getPropertyValue(item, 'assignTime')) }}</text>
              </view>
              <view class="info-value">
                <text class="text-gray">处理时长: {{ formatNumber(parseFloat(getPropertyValue(item, 'handleHour'))) }}小时</text>
              </view>
            </view>
          </view>
        </view>
      </template>
    </common-list>

    <!-- 自定义时间选择弹窗 -->
    <l-popup v-model="showDatePickerPopup" position="bottom">
      <view class="date-picker-popup">
        <view class="popup-header">
          <text class="popup-title">选择时间范围</text>
          <view class="popup-actions">
            <text class="confirm-btn" @click="confirmCustomDate">确定</text>
            <text class="cancel-btn" @click="closeDatePicker">取消</text>
          </view>
        </view>
        
        <view class="date-picker-container">
          <view class="date-picker-item">
            <text class="date-label">开始时间</text>
            <view class="date-display" @click="openStartDatePicker">
              {{ startDate != null && startDate != '' ? startDate : '请选择开始时间' }}
            </view>
          </view>
          
          <view class="date-picker-item">
            <text class="date-label">结束时间</text>
            <view class="date-display" @click="openEndDatePicker">
              {{ endDate != null && endDate != '' ? endDate : '请选择结束时间' }}
            </view>
          </view>
        </view>
      </view>
    </l-popup>
    
    <!-- Start Date Picker -->
    <l-popup v-model="showStartDatePicker" position="bottom">
      <l-date-time-picker 
        :mode="7" 
        format="YYYY-MM-DD"
        :modelValue="startDate"
        confirm-btn="确定" 
        cancel-btn="取消"
        @confirm="onStartDateConfirm"
        @cancel="showStartDatePicker = false">
      </l-date-time-picker>
    </l-popup>
    
    <!-- End Date Picker -->
    <l-popup v-model="showEndDatePicker" position="bottom">
      <l-date-time-picker 
        :mode="7" 
        format="YYYY-MM-DD"
        :modelValue="endDate"
        confirm-btn="确定" 
        cancel-btn="取消"
        @confirm="onEndDateConfirm"
        @cancel="showEndDatePicker = false">
      </l-date-time-picker>
    </l-popup>

    <!-- 底部 TabBar -->
    <custom-tabbar :current="2" />
  </view>
</template>

<script setup lang="uts">
import { ref, computed, onMounted } from 'vue'
import { listOrderHours, getOrderHourStatistics } from '@/api/worktime/index'
import { getDictDataByType } from '@/api/dict/index'
import type { SysDictData } from '@/types/dict'
 
// 数据状态
const searchKeyword = ref<string>('')
const orderTypeFilter = ref<string>('')
const timeRange = ref<string>('month')
const loading = ref<boolean>(false)
const refreshing = ref<boolean>(false)
const hasMore = ref<boolean>(true)
const orderList = ref<any[]>([])
const currentPage = ref<number>(1)
const totalHours = ref<number>(0)
const maintenanceHours = ref<number>(0)
const repairHours = ref<number>(0)
const rank = ref<number | null>(null)
const totalRankingUsers = ref<number | null>(null)

// 弹窗显示状态
const showDatePickerPopup = ref<boolean>(false)
const showStartDatePicker = ref<boolean>(false)
const showEndDatePicker = ref<boolean>(false)  

// 自定义日期表单
const startDate = ref<string>('')
const endDate = ref<string>('')

// 工单状态字典列表
const statusDictList = ref<SysDictData[]>([])
const dictLoaded = ref<boolean>(false)

// 计算属性
const timeRangeTitle = computed(() => {
  switch (timeRange.value) {
    case 'week':
      return '本周'
    case 'month':
      return '本月'
    case 'custom':
      return '自定义'
    default:
      return '本月'
  }
}) 

// 获取工单状态字典列表
const loadStatusDictList = async (): Promise<void> => {
    try {
        const result = await getDictDataByType('gxt_work_order_status')
        const resultObj = result as UTSJSONObject
        
        if (resultObj['code'] == 200) {
            const data = resultObj['data'] as any[]
            const dictData: SysDictData[] = []
            
            if (data != null && data.length > 0) {
                for (let i = 0; i < data.length; i++) {
                    const item = data[i] as UTSJSONObject
                    // 只提取需要的字段
                    const dictItem: SysDictData = {
						dictValue: item['dictValue'] as string | null,
						dictLabel: item['dictLabel'] as string | null,
						dictCode: null,
						dictSort: null,
						dictType: null,
						cssClass: null,
						listClass: null,
						isDefault: null,
						status: null,
						default: null,
						createTime: null,
						remark: null
					}
                    dictData.push(dictItem)
                }
            }
            
            statusDictList.value = dictData
            dictLoaded.value = true
        }
    } catch (e: any) {
        console.error('获取工单状态字典失败:', e.message)
        dictLoaded.value = true
    }
}

// Helper function to safely extract properties from item
function getPropertyValue(item: any | null, propertyName: string): string {
  if (item == null) return ''
  const itemObj = item as UTSJSONObject
  const value = itemObj[propertyName]
  return value != null ? '' + value : ''
}

// 获取工单类型文本
function getWorkOrderTypeText(orderType: string | null): string {
  if (orderType != null) {
    if (orderType == "1") {
      return "维修工单"
    } else if (orderType == "2") {
      return "维保工单"
    }
  }
  return ""
}

// 获取工单状态文本
function getWorkOrderStatus(item: any | null): string | null {
    if (item == null) return ''
    const rawStatus = getPropertyValue(item, 'workOrderStatus')
    
    if (rawStatus == null || rawStatus == '') return ''
    
    // 如果字典尚未加载，返回原始值
    if (!dictLoaded.value) {
        return rawStatus
    }
    
    // 查找字典中对应的标签
    const dictItem = statusDictList.value.find(dict => dict.dictValue == rawStatus)
    return dictItem != null ? dictItem.dictLabel : rawStatus
}

// 获取统计数据
function getStatistics() {
  const params: UTSJSONObject = {
    //keyword: searchKeyword.value,
    orderType: orderTypeFilter.value,
    timeRange: timeRange.value
  }
  
  if (timeRange.value === 'custom') {
    params.beginDate = startDate.value
    params.endDate = endDate.value
  }
  
  getOrderHourStatistics(params).then((response: any) => {
    const resultObj = response as UTSJSONObject
    const responseData = resultObj['data'] as UTSJSONObject
    
    if (responseData != null) {
      totalHours.value = (responseData['totalHours'] != null) ? parseFloat((responseData['totalHours'] as number).toFixed(1)) : 0
      maintenanceHours.value = (responseData['maintenanceHours'] != null) ? parseFloat((responseData['maintenanceHours'] as number).toFixed(1)) : 0
      repairHours.value = (responseData['repairHours'] != null) ? parseFloat((responseData['repairHours'] as number).toFixed(1)) : 0
      rank.value = (responseData['rank'] != null) ? responseData['rank'] as number : null
      totalRankingUsers.value = (responseData['totalRankingUsers'] != null) ? responseData['totalRankingUsers'] as number : null
    } else {
      totalHours.value = 0
      maintenanceHours.value = 0
      repairHours.value = 0
      rank.value = null
      totalRankingUsers.value = null
    }
  })
}

// 方法
function loadData(isRefresh: boolean) {
  const shouldRefresh = isRefresh
  
  if (loading.value && !shouldRefresh) {
    return
  } 
  
  loading.value = true
  if (shouldRefresh) {
    currentPage.value = 1
    refreshing.value = true
  }
  
  const params: UTSJSONObject = {
    pageNum: currentPage.value,
    pageSize: 5,
    keyword: searchKeyword.value,
    orderType: orderTypeFilter.value,
    timeRange: timeRange.value
  }
  
  if (timeRange.value === 'custom') {
    params.beginDate = startDate.value
    params.endDate = endDate.value
  }
  
  listOrderHours(params).then((response: any) => {
    // 提取响应数据
    const resultObj = response as UTSJSONObject
    console.log('API响应数据:', resultObj)
    const responseData = resultObj['rows'] as any[]
    const responseTotal = resultObj['total'] as number
    
    if (shouldRefresh) {
      orderList.value = Array.isArray(responseData) ? responseData : []
    } else {
      const currentRows = Array.isArray(responseData) ? responseData : []
      orderList.value = [...orderList.value, ...currentRows]
    }
    
    hasMore.value = orderList.value.length < responseTotal
    loading.value = false
    refreshing.value = false
  }).catch(() => {
    loading.value = false
    refreshing.value = false
  })
}

function handleSearch() {
  loadData(true)
  //getStatistics()
}

function clearSearch() {
  searchKeyword.value = ""
  loadData(true)
  //getStatistics()
}

function filterByOrderType(type: string) {
  orderTypeFilter.value = type
  loadData(true)
  getStatistics()
}

function changeTimeRange(range: string) {
  timeRange.value = range
  loadData(true)
  getStatistics()
}

function loadMore() {
  if (!hasMore.value || loading.value) return
  
  currentPage.value++
  loadData(false)
}

function handleRefresh() {
  loadData(true)
}

function showCustomDatePicker() {
  // 初始化日期值
  if (startDate.value == '' || endDate.value == '') {
    const now = new Date()
    const year = now.getFullYear()
    const month = (now.getMonth() + 1).toString().padStart(2, '0')
    const day = now.getDate().toString().padStart(2, '0')
    endDate.value = `${year}-${month}-${day}`
    
    // 默认开始日期为7天前
    const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
    const weekAgoYear = weekAgo.getFullYear()
    const weekAgoMonth = (weekAgo.getMonth() + 1).toString().padStart(2, '0')
    const weekAgoDay = weekAgo.getDate().toString().padStart(2, '0')
    startDate.value = `${weekAgoYear}-${weekAgoMonth}-${weekAgoDay}`
  }
  
  showDatePickerPopup.value = true 
}

function closeDatePicker() {
  showStartDatePicker.value = false
  showEndDatePicker.value = false
  showDatePickerPopup.value = false
}

function confirmCustomDate() {
  if (startDate.value == null || startDate.value == '' || endDate.value == null || endDate.value == '') {
    uni.showToast({ title: '请选择开始时间和结束时间', icon: 'none' })
    return
  }
  
  if (startDate.value != null && endDate.value != null && new Date(startDate.value as string) > new Date(endDate.value as string)) {
    uni.showToast({ title: '开始时间不能大于结束时间', icon: 'none' })
    return
  }
  
  closeDatePicker()
  timeRange.value = 'custom'
  loadData(true)
  getStatistics()
}

// 打开开始日期选择器
function openStartDatePicker() {
  showStartDatePicker.value = true
}

// 打开结束日期选择器
function openEndDatePicker() {
  showEndDatePicker.value = true
}

function onStartDateConfirm(value: string) {
  // 检查结束时间是否小于新的开始时间
  if (endDate.value != null && endDate.value != '' && new Date(value) > new Date(endDate.value as string)) {
    uni.showToast({ title: '开始时间不能大于结束时间', icon: 'none' })
    return
  }
  
  startDate.value = value
  showStartDatePicker.value = false
}

function onEndDateConfirm(value: string) {
  // 检查新的结束时间是否小于开始时间
  if (startDate.value != null && startDate.value != '' && new Date(startDate.value as string) > new Date(value)) {
    uni.showToast({ title: '结束时间不能小于开始时间', icon: 'none' })
    return
  }
  
  endDate.value = value
  showEndDatePicker.value = false
}

// 点击列表项
function handleItemClick(item: any | null, index: number): void {
  if (item == null) return
  const itemObj = item as UTSJSONObject
  const id = itemObj.get('id')
  const orderType = itemObj.get('orderType')
  if (id != null && orderType != null) {
    // 转换为字符串
    const idStr = '' + id
    const orderTypeStr = '' + orderType
    uni.navigateTo({
      url: `/pages/worktime/detail/index?id=${idStr}&orderType=${orderTypeStr}`
    })
  }
}

function getOrderStatusText(status: string): string {
  const statusMap: UTSJSONObject = {
    '1': '待接单',
    '2': '进行中',
    '3': '已完成',
    '4': '已关闭'
  }
  const result = statusMap[status]
  return result != null ? result as string : '未知状态'
}

function formatDate(dateString: string) {
  if (dateString == '' || dateString == null) return ''
  const date = new Date(dateString)
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

function formatNumber(value: number | null) {
  if (value === null) return '0.0'
  return value.toFixed(1)
}

// 生命周期
onMounted(() => {
  loadStatusDictList()
  loadData(false)
  getStatistics()
})
</script>

<style lang="scss">
.list-page {
  flex: 1;
  background-color: #e8f0f9;
  padding-bottom: 150rpx; // 为底部 TabBar 留出空间
}

/* 搜索栏样式 */
.search-bar {
  padding: 20rpx 30rpx;
  background-color: #d7eafe;
}

.search-box {
  flex-direction: row;
  align-items: center;
  height: 72rpx;
  padding: 0 24rpx;
  background-color: #f5f5f5;
  border-radius: 36rpx;

  .search-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 12rpx;
  }

  .search-input {
    flex: 1;
    font-size: 28rpx;
    color: #333333;
  }
  
  .clear-icon {
    margin-left: 12rpx;
    font-size: 28rpx;
    color: #999999;
  }
}

/* 工单分类筛选 */
.status-bar {
  padding-bottom: 10px;
  padding-left: 30rpx;
  background-color: #d7eafe;
}

.status-box {
  flex-direction: row;
  align-items: center;
  height: 72rpx;
  flex: 1;
  
  .status-txt {
    padding: 8px 12px;
    text-align: center;
    margin-right: 12rpx;
    border-radius: 36rpx;
    background-color: #fff;
    font-size: 28rpx;
  }
  
  .stauts-sel {
    background-color: #007AFF;
    color: #fff;
  }
}

/* 工时统计 */
.stats-section {
  margin: 15rpx 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx;
}

.stats-header {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

  .stats-title {
    font-size: 32rpx;
    font-weight: bold;
    flex: 1;
  }

.time-filters {
  flex-direction: row;
  justify-content: flex-end;
}

.time-filter {
  padding: 6rpx 16rpx;
  margin-left: 12rpx;
  font-size: 24rpx;
  border-radius: 24rpx;
  background-color: #f2f3f5;
  color: #666;
  white-space: nowrap;
}

.time-filter-sel {
  background-color: #165dff;
  color: white;
}

.stats-content {
  margin-top: 20rpx;
  flex-direction: column;
}

.total-hours {
  margin-bottom: 30rpx;
  flex-direction: column;
  align-items: center;
}

  .hours-label {
    font-size: 28rpx;
    color: #666;
    display: flex;
    margin-bottom: 8rpx;
  }
  
  .hours-value {
    display: flex;
    font-size: 48rpx;
    font-weight: bold;
    color: #165dff;
    line-height: 1.2;
  }

.hours-breakdown {
  flex-direction: row;
  justify-content: space-between;
}

.breakdown-item {
  flex: 1;
  flex-direction: column;
  align-items: center;
}

  .breakdown-label {
    display: flex;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
  }

  .breakdown-value { 
    font-size: 28rpx;
    color: #666;
    display: flex;
    margin-bottom: 8rpx;
  }

/* 列表项样式 */
.list-item {
  margin: 12rpx 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}

.item-container {
  padding: 30rpx;
}

.item-header {
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 16rpx;

  .item-title {
    font-size: 30rpx;
    color: #333333;
    font-weight: bold;
    flex-wrap: wrap;
    flex: 0 1 70%;
    min-width: 0;
  }

  .info-value {
    font-size: 28rpx;
    color: #999999;
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.info-row {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  
  .info-label {
    font-size: 26rpx;
    color: #666;
  }
  
  .info-value {
    font-size: 26rpx;
    color: #666;
  }
}

.text-gray{
  font-size: 26rpx;
  color: #666;
}
/* 日期选择弹窗 */
.date-picker-popup {
  background-color: white;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  padding: 40rpx;
  padding-bottom: 40rpx;
  margin-bottom: 0;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

  .popup-title {
    font-size: 34rpx;
    font-weight: bold;
  }

.popup-actions {
  display: flex;
  flex-direction: row;
}

.cancel-btn {
  color: #999;
  padding: 10rpx 20rpx;
}

  .confirm-btn {
    color: #165dff;
    padding: 10rpx 20rpx;
    font-weight: bold;
  }

.date-picker-container {
  padding: 20rpx 0;
  padding-bottom: env(safe-area-inset-bottom); // 适配安全区域
}

.date-picker-item {
  margin-bottom: 40rpx;
}

  .date-label {
    display: flex;
    margin-bottom: 20rpx;
    font-size: 30rpx;
    color: #333;
  }

.date-display {
  width: 100%;
  padding: 20rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 32rpx;
  color: #333;
}

// 添加底部填充的类
.list-with-padding {
  padding-bottom: 40rpx;
}
</style>