mes-app/pages/task/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" type="text" placeholder="搜索任务" v-model="keyword" @confirm="handleSearch" @blur="handleSearch" />
                <text v-if="keyword.length > 0" class="clear-icon" @click="clearSearch">✕</text>
            </view>
        </view>

		<view class="status-bar">
			<scroll-view class="scroll-view_H" direction="horizontal" :show-scrollbar="false">
				<view class="scroll-view-item_H uni-bg-red">
					<text class="status-txt" :class="{'stauts-sel': currentStatus == ''}" @click="switchStatus('')">全部</text>
				</view>
				<view class="scroll-view-item_H" v-if="!dealLoad">
					<text class="status-txt" :class="{'stauts-sel': currentStatus == '0'}" @click="switchStatus('0')">待执行</text>
				</view>
				<!-- <view class="scroll-view-item_H" v-if="!dealLoad">
					<text class="status-txt" :class="{'stauts-sel': currentStatus == '1'}" @click="switchStatus('1')">执行中</text>
				</view> -->
				<view class="scroll-view-item_H" v-if="!dealLoad">
					<text class="status-txt" :class="{'stauts-sel': currentStatus == '2'}" @click="switchStatus('2')">已完成</text>
				</view>
				<!-- <view class="scroll-view-item_H" v-if="!dealLoad">
					<text class="status-txt" :class="{'stauts-sel': currentStatus == '3'}" @click="switchStatus('3')">已超时</text>
				</view>
				<view class="scroll-view-item_H" v-if="!dealLoad">
					<text class="status-txt" :class="{'stauts-sel': currentStatus == '4'}" @click="switchStatus('4')">已逾期</text>
				</view> -->
		  </scroll-view>
		</view>
        <!-- 列表内容 -->
        <common-list
            :dataList="dataList"
            :loading="loading"
            :refreshing="refreshing"
            :hasMore="hasMore"
            @refresh="handleRefresh"
            @loadMore="loadMore"
            @itemClick="handleView"
        >
            <template #default="{ item, index }">
                <view class="list-item">
                    <view class="item-container">
                        <view class="item-header">
							<text class="item-title">{{ (item as taskInfo).planName }}</text>
							<view class="task-badges">
							    <text class="status-tag" :class="getTaskType(item)">{{ (item as taskInfo).planTypeText }}</text>
							    <text class="status-tag" :class="getStatusClass((item as taskInfo).status)">{{ (item as taskInfo).statusText }}</text>
							</view>
                        </view> 
						<view class="info-row">
							<view class="info-label">
								<text class="text-gray">{{ (item as taskInfo).displayTime }}</text>
							</view>
						</view> 
						<view class="info-row">
							<view class="info-label">
								<text class="text-gray">{{ (item as taskInfo).taskCount }}</text>
							</view>
						</view>
						<view class="btn-group">
							<view
								v-if="(item as taskInfo).status != '2' && (item as taskInfo).status != '4'"
								class="btn-primary info-value"
								@click.stop="handleItemClick(item,'start')"
								>
								<text class="btn-text">开始执行</text>
							</view> 
							<view
								v-if="(item as taskInfo).status == '2' || (item as taskInfo).status == '4'"
								class="btn-primary info-value"
								@click.stop="handleItemClick(item,'detail')"
								>
								<text class="btn-text">查看</text>
							</view> 
						</view>
                    </view>
                </view>
            </template>
        </common-list>
		<!-- <custom-tabbar :current="1" :hide0="tabbar[0]" :hide1="tabbar[1]" :hide2="tabbar[2]" :hide3="tabbar[3]"/> -->
    </view>
</template>

<script setup lang="uts">
import { ref, onBeforeUnmount, onMounted, reactive } from 'vue' 
import { onLoad, onShow,onHide } from '@dcloudio/uni-app';
import type { SysDictData, DictDataResponse } from '../../types/dict'
import {checkPermi, getUserInfo} from '../../utils/storage'
import { getDictDataByType } from '../../api/dict/index'
import { registerServer} from '../../api/index/index'
import { getMyTaskList } from '../../api/task/list'

type taskInfo = { 
  taskId: Number 
  planId: Number 
  planType: string | null
  planName: string | null
  taskDate: string | null
  startTime: string | null
  endTime: string | null
  subjects: string | null
  machineryTypeName: string | null
  machineryCode: string | null
  machineryName: string | null
  machineries: string | null
  locations: string | null
  operator: string | null
  operatorId: Number
  status: string | null
  taskDesc: string | null
  sourceType: string | null
  locationCount: Number
  machineryCount: Number
  createTime: string | null
  updateTime: string | null
  // 前端计算字段
  planTypeText: string | null
  statusText: string | null
  displayTime: string | null
  taskCount: string | null
  checkType: string | null
}

	const userId = ref<string>("")
	const roles = ref<string>('')
    // 列表数据
    const dataList = ref<taskInfo[]>([])
    let keyword = ref<string>("")
    const page = ref<number>(1)
    const pageSize: number = 10
    const hasMore = ref<boolean>(true)
    const loading = ref<boolean>(false)
    const refreshing = ref<boolean>(false)
    const total = ref<number>(0)
	let currentStatus = ref<string>('')
    let currentPlanType = ref<string>('')
    const statusDictList = ref<SysDictData[]>([]) // 工单状态字典列表
    const planTypeDictList = ref<SysDictData[]>([]) // 计划类型字典列表

	const tabbar = reactive([1,1,1,1])

	// 添加防重复请求的标志位（参考score/pending.uvue的实现）
	const isSearching = ref<boolean>(false)
	// 添加防重复刷新的标志
	const isRefreshing = ref<boolean>(false)
	// 添加刷新时间戳，用于防抖
	const lastRefreshTime = ref<number>(0)
	// 添加字典加载状态
	const dictLoaded = ref<boolean>(false)
	// 待处理工单加载
	const dealLoad = ref<boolean>(false) 
	
	// 定时刷新定时器
	let refreshTimer: number | null = 0
	// 定时刷新间隔（毫秒）
	const REFRESH_INTERVAL = 10000 // 10秒 
	 
	// 获取任务类型
	const getTaskType = (item: any | null): string => {
		if (item == null) return ''
		const taskItem = item as taskInfo
		const rawType = taskItem.planType
		if (rawType == null || rawType.length == 0) return ''
		// 返回对应的状态类名
		return `type-${rawType}`
	}
	
	const getStatusClass = (rawStatus: string | null): string => {
		if (rawStatus == null) return ''
		// 返回对应的状态类名
		return `status-${rawStatus}`
	}
	
	const getStatusText = (rawStatus: string | null): string => {
		if (rawStatus == null || rawStatus.length == 0) return ''
		if (dictLoaded.value != true) {
			return rawStatus
		}
		const dictItem = statusDictList.value.find((dict: SysDictData) => dict.dictValue == rawStatus)
		return dictItem != null && dictItem.dictLabel != null ? dictItem.dictLabel : rawStatus
	} 
	 
	// 获取计划类型文本
	const getPlanTypeText = (planType: string | null): string => {
		if (planType == null || planType.length == 0) return ''
		if (dictLoaded.value != true) {
			return planType
		}
		const dictItem = planTypeDictList.value.find((dict: SysDictData) => dict.dictValue == planType)
		return dictItem != null && dictItem.dictLabel != null ? dictItem.dictLabel : planType
	}
	
	// 获取显示时间
	const getDisplayTime = (item: taskInfo): string | null => {
		if (item.taskDate == null || item.taskDate.length == 0) return null
		if (item.startTime != null && item.startTime.length > 0 && item.endTime != null && item.endTime.length > 0) {
			return `${item.taskDate} ${item.startTime}-${item.endTime}`
		}
		return item.taskDate
	}
	
	// 获取任务数量显示
	const getTaskCount = (item: taskInfo): string | null => {
		if (item.planType != null && item.planType == 'PATROL') {
			return `地点数量: ${item.locationCount != null ? item.locationCount : 0}个`
		} else {
			return `设备数量: ${item.machineryCount != null ? item.machineryCount : 0}台`
		}
	}
	
	// 获取检查类型
	const getCheckType = (item: taskInfo): string | null => {
		if (item.planType != null && item.planType == 'PATROL') {
			return 'area'
		} else {
			return 'device'
		}
	}

	// 获取任务状态字典列表
	const loadStatusDictList = async (): Promise<void> => {
	    try {
	        const result = await getDictDataByType('dv_task_status')
	        const resultObj = result as UTSJSONObject

	        if (resultObj['code'] == 200) {
	            const data = resultObj['data'] as any[]
	            const dictData: SysDictData[] = []

	            if (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
	    }
	}
	
	// 获取计划类型字典列表
	const loadPlanTypeDictList = async (): Promise<void> => {
	    try {
	        const result = await getDictDataByType('dv_plan_type')
	        const resultObj = result as UTSJSONObject

	        if (resultObj['code'] == 200) {
	            const data = resultObj['data'] as any[]
	            const dictData: SysDictData[] = []

	            if (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)
	                }
	            }

	            planTypeDictList.value = dictData
	        }
	    } catch (e: any) {
	        console.error('获取计划类型字典失败:', e.message)
	    }
	}
	 
    // 加载列表数据
    const loadData = async (isRefresh: boolean | null, disablePullDown: boolean | null): Promise<void> => {
        // 防止重复请求的核心机制
        if (loading.value) {
            if (isRefresh != true) {
                refreshing.value = false;
            }
            return
        }

        const shouldRefresh = isRefresh != null ? isRefresh : false
        const shouldDisablePullDown = disablePullDown != null ? disablePullDown : false

        loading.value = true
        if (shouldRefresh && !shouldDisablePullDown) {
            page.value = 1
            refreshing.value = true
        } else if (shouldRefresh && shouldDisablePullDown) {
            page.value = 1
            refreshing.value = false
        } else {
            refreshing.value = false;
        }

        try {
            // 构建查询参数对象
            const queryParams: UTSJSONObject = {
                pageNum: page.value,
                pageSize: pageSize
            }
            
            // 添加当前用户ID过滤
            if (userId.value.length > 0) {
                queryParams['operatorId'] = userId.value
            }
            
            // 添加搜索关键字
            if (keyword.value.length > 0) {
                queryParams['planName'] = keyword.value
            }
            
            // 添加状态筛选
            /* if (currentStatus.value != 'all') {
                queryParams['status'] = currentStatus.value
            } */
            queryParams['status'] = currentStatus.value
            // 添加计划类型筛选
            if (currentPlanType.value.length > 0) {
                queryParams['planType'] = currentPlanType.value
            }

            const result = await getMyTaskList(queryParams)

            // 提取响应数据
            const resultObj = result as UTSJSONObject
            const code = resultObj['code'] as number
            const responseData = resultObj['rows'] as any[]
            const responseTotal = resultObj['total'] as number

            if (code == 200) {
                // 将 any[] 转换为 taskInfo[]
                const newData: taskInfo[] = []
                for (let i = 0; i < responseData.length; i++) {
                    const item = responseData[i] as UTSJSONObject
                    const taskItem: taskInfo = {
                        taskId: item['taskId'] as Number,
                        planId: item['planId'] as Number,
                        planType: item['planType'] as string | null,
                        planName: item['planName'] as string | null,
                        taskDate: item['taskDate'] as string | null,
                        startTime: item['startTime'] as string | null,
                        endTime: item['endTime'] as string | null,
                        subjects: item['subjects'] as string | null,
                        machineryTypeName: item['machineryTypeName'] as string | null,
                        machineryCode: item['machineryCode'] as string | null,
                        machineryName: item['machineryName'] as string | null,
                        machineries: item['machineries'] as string | null,
                        locations: item['locations'] as string | null,
                        operator: item['operator'] as string | null,
                        operatorId: item['operatorId'] as Number,
                        status: item['status'] as string | null,
                        taskDesc: item['taskDesc'] as string | null,
                        sourceType: item['sourceType'] as string | null,
                        locationCount: item['locationCount'] != null ? (item['locationCount'] as Number) : 0,
                        machineryCount: item['machineryCount'] != null ? (item['machineryCount'] as Number) : 0,
                        createTime: item['createTime'] as string | null,
                        updateTime: item['updateTime'] as string | null,
                        // 前端计算字段初始化
                        planTypeText: null,
                        statusText: null,
                        displayTime: null,
                        taskCount: null,
                        checkType: null
                    }
                    
                    // 计算前端显示字段
                    taskItem.planTypeText = getPlanTypeText(taskItem.planType)
                    taskItem.statusText = getStatusText(taskItem.status)
                    taskItem.displayTime = getDisplayTime(taskItem)
                    taskItem.taskCount = getTaskCount(taskItem)
                    taskItem.checkType = getCheckType(taskItem)
                     
                    newData.push(taskItem)
                }

                if (shouldRefresh) {
                    dataList.value = newData
                } else {
                    dataList.value = [...dataList.value, ...newData]
                }

                total.value = responseTotal
                hasMore.value = dataList.value.length < responseTotal
            } else {
                const msg = resultObj['msg'] as string | null
                uni.showToast({
                    title: msg ?? '加载失败',
                    icon: 'none'
                })
            }

        } catch (e: any) {
            uni.showToast({
                title: e.message ?? '加载失败',
                icon: 'none'
            })
        } finally {
            loading.value = false
            if (shouldRefresh) {
                refreshing.value = false;
                setTimeout(() => {
                    isRefreshing.value = false;
                }, 50);
            }
        }
    }
	
    // 切换状态
    const switchStatus = (status: string): void => {
        // 添加防重复调用检查（参考score/pending.uvue的实现）
        if (loading.value) {
            return;
        }

        // 添加防重复请求检查
        if (isSearching.value) {
            return
        }

        isSearching.value = true
		currentStatus.value = status

        page.value = 1
        loadData(true, true) // 第二个参数为true表示禁用下拉刷新动画

        // 延迟重置标志位，确保请求发送后才允许下一次搜索
        setTimeout(() => {
            isSearching.value = false
        }, 100)
    }

    // 下拉刷新
    const handleRefresh = async (): Promise<void> => {
        console.log("handleRefresh被触发") 

        // 防抖处理，避免频繁触发（参考score/pending.uvue的实现）
        const now = Date.now();
        if (now - lastRefreshTime.value < 1000) {
            refreshing.value = false;
            return;
        }
        lastRefreshTime.value = now;

        // 添加防重复调用检查
        if (loading.value || isRefreshing.value) {
            // 如果已经在加载或正在刷新，直接重置刷新状态
            refreshing.value = false;
            return;
        }
 
        // 设置刷新标志
        isRefreshing.value = true;

        try {
            await loadData(true, false); // 使用默认的下拉刷新行为
        } catch (error) {
            console.error('刷新失败:', error);
            refreshing.value = false;
            isRefreshing.value = false;
        }

        // 确保在一定时间后重置刷新标志，防止意外情况
        setTimeout(() => {
            isRefreshing.value = false
        }, 100) // 延迟重置，确保状态完全更新
    }
    // 加载更多
    const loadMore = (): void => {
        if (!hasMore.value || loading.value) {
            return
        }
        page.value++
        loadData(false, false)
    }

    // 搜索
    const handleSearch = (): void => {
        // 添加防重复调用检查（参考score/pending.uvue的实现）
        if (loading.value) {
            return;
        }

        // 添加防重复请求检查
        if (isSearching.value) {
            return
        }

        isSearching.value = true
        page.value = 1
        loadData(true, true) // 状态切换时禁用下拉刷新动画

        // 延迟重置标志位，确保请求发送后才允许下一次搜索
        setTimeout(() => {
            isSearching.value = false
        }, 100)
    }

	const handleSearchOnBlur = (): void => {
		handleSearch()
	} 

    // 点击列表项
    const handleItemClick = (item: any | null, action: string): void => {
        if (item == null) return
        const taskItem = item as taskInfo
        
        if(action == 'start') {
            // 开始执行任务
            if(taskItem.checkType == 'device') {
                // 如果是设备检查类型，则跳转到设备清单页面 
                uni.navigateTo({
                    url: `/pages/task/device-list?taskId=${taskItem.taskId}&opType='execute'`
                });
            } else if(taskItem.checkType == 'area') {
                // 如果是地点巡查类型，则跳转到地点清单页面 
                uni.navigateTo({
                    url: `/pages/task/area-list?taskId=${taskItem.taskId}&opType='execute'`
                });
            }
        } else if(action == 'detail') {
            // 查看详情
            if(taskItem.checkType == 'device') {
                // 如果是设备检查类型，则跳转到设备清单页面 
                uni.navigateTo({
                    url: `/pages/task/device-list?taskId=${taskItem.taskId}&opType='view'`
                });
            } else if(taskItem.checkType == 'area') {
                // 如果是地点巡查类型，则跳转到地点清单页面 
                uni.navigateTo({
                    url: `/pages/task/area-list?taskId=${taskItem.taskId}&opType='view'`
                });
            }
        }
    }

	// 点击列表项
	const handleView = (item: any | null): void => {
		// handleItemClick(item, 'detail')
	   // if (item == null) return
	   //  const taskItem = item as taskInfo
	   //  if(taskItem.checkType == 'device') {
	   //      // 如果是设备检查类型，则跳转到设备清单页面
	   //      const taskName = taskItem.taskName != null ? taskItem.taskName : '';
	   //      uni.navigateTo({
	   //          url: `/pages/task/device-list?taskId=${taskItem.id}&taskName=${encodeURIComponent(taskName)}`
	   //      });
	   //  } else if(taskItem.checkType == 'area') {
	   //      // 如果是地点巡查类型，则跳转到地点清单页面
	   //      const taskName = taskItem.taskName != null ? taskItem.taskName : '';
	   //      uni.navigateTo({
	   //          url: `/pages/task/area-list?taskId=${taskItem.id}&taskName=${encodeURIComponent(taskName)}`
	   //      });
	   //  } else {
	   //      // 其他类型任务的处理
	   //      uni.showToast({
	   //          title: `查看详情: ${taskItem.taskName}`,
	   //          icon: 'none'
	   //      });
	   //  }
	}

    // 清空搜索
    const clearSearch = (): void => {
        // 添加防重复调用检查（参考score/pending.uvue的实现）
        if (loading.value) {
            return;
        }

        // 添加防重复请求检查
        if (isSearching.value) {
            return
        }

        isSearching.value = true
        keyword.value = ""
        page.value = 1
        loadData(true, true) // 状态切换时禁用下拉刷新动画

        // 延迟重置标志位，确保请求发送后才允许下一次搜索
        setTimeout(() => {
            isSearching.value = false
        }, 100)
    }
	
	const registerPush =() =>{
		console.log("获取CID")
		uni.getPushClientId({
			success: (res) => {
				console.log(res.cid);
				registerServer(res.cid).then((result:any) => {
					console.log("注册成功");
				});
			},
			fail(err) {
				console.log(err)
			}
		})
	}
	
	// 停止定时刷新
	const stopAutoRefresh = (): void => {
		if (refreshTimer != null) {
			clearInterval(refreshTimer as number)
			refreshTimer = null
		}
	}
	
	// 启动定时刷新
	const startAutoRefresh = (): void => {
		// 清除已有的定时器
		stopAutoRefresh()
		// 创建新的定时器
		refreshTimer = setInterval(() => {
			console.log('定时刷新列表数据')
			// 只有在不在加载状态时才刷新
			if (!loading.value) {
				loadData(true, true)
			}
		}, REFRESH_INTERVAL)
	}

	// 初始化 
	onLoad((options: any) => {  
		const userInfo = getUserInfo()
		if (userInfo != null) {
			const userIdStr = userInfo['userId'].toString()
			userId.value = userIdStr
			roles.value = userInfo['roleNames'].toString()
			registerPush();
		}
	    const params = options as UTSJSONObject
		const isDeal = params['isDeal'] as string | null
		if(isDeal != null) {
			dealLoad.value = true;
		}
	    loadStatusDictList()
	    loadPlanTypeDictList()
		 
		currentStatus.value = '0'

	    loadData(true, true) // 首次加载时禁用下拉刷新动画
		
		// 启动定时刷新
		startAutoRefresh()

		// 监听首页切换状态事件
		uni.$on('switchOrderStatus', (status: string) => {
			switchStatus(status)
		})


	})

    // 组件卸载前清理事件监听
    onBeforeUnmount(() => {
        refreshing.value = false
        loading.value = false
        isRefreshing.value = false 
        // 停止定时刷新
        stopAutoRefresh()
        // 清理事件监听
        uni.$off('switchOrderStatus')
    })
    
    // 页面显示时检查是否需要刷新数据
    onShow(() => {
        // 检查是否有来自子页面的刷新标记
        const needRefresh = uni.getStorageSync('needRefresh')
        if (needRefresh == true) {
            // 清除标记
            uni.removeStorageSync('needRefresh')
            // 延迟一小段时间再执行刷新，避免状态冲突
            setTimeout(() => {
                loadData(true, false); // 使用默认的下拉刷新行为
            }, 500)
        }
        // 页面显示时重新启动定时刷新
        startAutoRefresh()
    })
	
	// 页面隐藏时停止定时刷新
	onHide(() => {
		stopAutoRefresh()
	})
</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;
			// cursor: pointer;
		}

		.stauts-sel{
			background-color: #007AFF;
			color: #fff;
		}
	}

    .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;
        justify-content: space-between; /* 主轴两端对齐 */
        min-height: 55rpx;

        .item-title {
            font-size: 30rpx;
            color: #333333;
            font-weight: bold;
            flex-wrap: wrap;
            flex: 0 1 75%;
            min-width: 0;
        }
        
        .task-badges {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 10rpx; /* 添加间距 */
        }
    }
    
    .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;
      }
    }

	.btn-group {
	  flex-direction: row;
	  align-items: center;
	  justify-content: flex-end;
	  margin-top: 20rpx;
	}

	.btn-primary {
		z-index: 999;
		border-radius: 10rpx;
		font-size: 24rpx;
		// white-space: nowrap;
		margin-left: 20rpx;
		background-color: #165DFF;
		line-height: 45rpx;
		color: #ffffff;
		.btn-text{
			color: #ffffff;
			font-size: 24rpx;
			padding: 5px 15px;
		}
	}

.status-tag {
	padding: 8rpx 20rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	white-space: nowrap;
	// margin-left: 50rpx;
	// justify-content: flex-end;
	border: 1rpx solid;
	text-align: center;
}

/* 计划类型样式 */
.type-CHECK {
	background-color: #ECF5FF;
	color: #409EFF;
	border-color: #d8ebff;
}

.type-PATROL {
	background-color: #F4F4F5;
	color: #909399;
	border-color: #e9e9eb;
}

.type-MAINTEN {
	background-color: #F0F9EB;
	color: #67C23A;
	border-color: #c2e7b0;
}

/* 任务状态样式 */
.status-0 {
	background-color: #FDF6EC;
	color: #E6A23C;
	border-color: #faecd8;
}

.status-1 {
	background-color: #EBF5FF;
	color: #409EFF;
	border-color: #d8ebff;
}

.status-2 {
	background-color: #F0F9EB;
	color: #67C23A;
	border-color: #c2e7b0;
}

.status-3 {
	background-color: #FEF0F0;
	color: #F56C6C;
	border-color: #fbc4c4;
}

.status-4 {
	background-color: #FDF6EC;
	color: #E6A23C;
	border-color: #faecd8;
}

/* 保持其他原有样式 */
.text-gray{
  font-size: 26rpx;
  color: #666;
}

.scroll-view_H {
	width: 100%;
	flex-direction: row;
  }

.scroll-view-item_H {
  justify-content: center;
  align-items: center;

  .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;
  }
}
</style>