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" class="breakdown-item">
            <text class="breakdown-label">排名</text>
            <text class="breakdown-value">第{{ rank }}名</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 工单列表 -->
    <common-list 
      :dataList="orderList" 
      :loading="loading" 
      :refreshing="refreshing" 
      :hasMore="hasMore" 
      @refresh="handleRefresh" 
      @loadMore="loadMore" 
      @itemClick="viewOrderDetail"
    >
      <template #default="{ item }">
        <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">{{ getOrderStatusText(getPropertyValue(item, 'workOrderStatus')) }}</text>
            </view>
            <view class="info-row">
              <view class="info-label">
                <text class="text-xs text-gray-500">下发时间: {{ formatDate(getPropertyValue(item, 'assignTime')) }}</text>
              </view>
              <view class="info-value">
                <text>处理时长: {{ 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="cancel-btn" @click="closeDatePicker">取消</text>
            <text class="confirm-btn" @click="confirmCustomDate">确定</text>
          </view>
        </view>
        
        <view class="date-picker-container">
          <view class="date-picker-item">
            <text class="date-label">开始时间</text>
            <input type="date" v-model="startDate" class="date-input" />
          </view>
          
          <view class="date-picker-item">
            <text class="date-label">结束时间</text>
            <input type="date" v-model="endDate" class="date-input" />
          </view>
        </view>
      </view>
    </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'
 
// 数据状态
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 showDatePickerPopup = ref<boolean>(false)

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

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

// 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 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
    } else {
      totalHours.value = 0
      maintenanceHours.value = 0
      repairHours.value = 0
      rank.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: 10,
    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
    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() {
  showDatePickerPopup.value = true;
}

function closeDatePicker() {
  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 viewOrderDetail(item: any) {
  // 跳转到工单详情页面
  if (item != null) {
    const itemObj = item as UTSJSONObject
    const id = itemObj['id']
    const orderType = itemObj['orderType']
    uni.navigateTo({
      url: `/pages/worktime/detail?id=${id}&orderType=${orderType}`
    })
  }
}

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(() => {
  loadData(false)
  getStatistics()
})
</script>

<style lang="scss">
.list-page {
  flex: 1;
  background-color: #e8f0f9;
}

/* 搜索栏样式 */
.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: 500;
  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: block;
  margin-bottom: 8rpx;
}

.hours-value {
  display: block;
  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: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}

.breakdown-value { 
  font-size: 28rpx;
    color: #666;
    display: block;
    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: center;
  margin-bottom: 16rpx;

  .item-title {
    flex: 1;
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
  }

  .info-value {
    font-size: 28rpx;
    color: #999999;
  }
}

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

/* 日期选择弹窗 */
.date-picker-popup {
  background-color: white;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  padding: 40rpx;
}

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

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

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

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

.date-picker-container {
  padding: 20rpx 0;
}

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

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

.date-input {
  width: 100%;
  padding: 20rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 32rpx;
}
</style>