ys-app/src/pages/business/polling/taskList.vue

<template>
<view class="con-body">
    <view class="con-bg">
        <!-- 头部 -->
        <customHeader ref="customHeaderRef" title="巡检任务查询"
            :leftFlag="true" :rightFlag="false"
        ></customHeader>
        <!-- 高度来避免头部遮挡 -->
        <view class="top-height"></view>
        <!-- 查询条件 -->
        <view class="search">
            <view class="search-bg s-b-left" @click="chooseDate">
                <img :src="'static/images/polling/icon-search-clock.png'" class="img-icon" />
                {{dateStrName}}
                <uni-icons type="down" size="16" color="#C8DCFF" style="margin-left:auto;"></uni-icons>
            </view>
            <view class="search-bg s-b-right">
                <img :src="'static/images/polling/icon-type.png'" class="img-type" />
                <picker @change="changeTaskType" :value="taskTypeIndex" :range="taskTypeArr">
                    <view class="uni-input">{{taskTypeArr[taskTypeIndex]}}</view>
                </picker>
                <uni-icons type="down" size="16" color="#C8DCFF" style="margin-left:auto;"></uni-icons>
            </view>
            <view class="search-btn" @click="handleSearch">查询</view>
        </view>
        <view class="week">{{dateStr}}</view>

        <!-- 列表 -->
        <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
            :up="upOption" :down="downOption" :fixed="false" class="scroll-h" :class="{'loading-scroll':cssFlag}">
            <view class="white-bg" v-if="list.length>0">
                <!-- <view class="r-title">{{ parseTime(obj.dateStr,'{y}-{m}-{d} 星期{a}')}}</view> -->
                <view class="report-list" v-for="(item, index) in list" :key="index" @click="handleDetail(item)">
                    <view class="r-list" style="padding-bottom:0">
                        <view class="r-name">{{ item.taskName }}</view>
                        <view class="r-right">
                            <!-- 任务(巡检)状态 1=未发布 2=已发布 3 进行中 4 已完成 5 已过期 -->
                            <!-- 状态为3进行中时 进度>0执行中 进度=0为待执行 -->
                            <block v-if="item.taskStatus==3">
                                <img v-if="item.beginTime" :src="'static/images/polling/icon-pending.png'"  class="img-w" />
                                <img v-else :src="'static/images/polling/icon-start.png'"  class="img-w" />
                            </block>
                            <img v-else-if="item.taskStatus==4" :src="'static/images/polling/icon-complete.png'"  class="img-complete" />
                            <img v-else-if="item.taskStatus==5" :src="'static/images/polling/icon-Expired.png'"  class="img-w" />
                        </view>
                    </view>
                    <view class="r-list">
                        <view class="r-left">
                            <view class="r-l-left">巡检单号<span class="r-gray">{{ item.taskId }}</span></view>
                            <view class="r-l-right">类型<span class="r-gray">{{ formatTaskType(item.taskType) }}</span></view>
                        </view>
                    </view>
                    <view class="r-list">
                        <view class="r-left">
                            <view v-if="item.beginTime">
                                执行时间<span class="r-gray">{{ parseTime(item.beginTime,'{y}-{m}-{d} {h}:{i}') }}</span>
                            </view>
                            <view v-else>
                                开始时间<span class="r-gray">{{ parseTime(item.planTime,'{y}-{m}-{d} {h}:{i}') }}</span>
                            </view>
                        </view>
                    </view>
                    <view class="r-list">
                        <view class="r-left">
                            <view class="r-l-left">
                                任务状态<span class="r-gray" v-if="item.taskStatus==3">
                                    <block v-if="item.beginTime">执行中</block>
                                    <block v-else>待执行</block>
                                </span>
                                <span class="r-gray" v-else>{{formatTaskStatus(item.taskStatus) }}</span>
                            </view>
                            <view class="r-l-right">
                                任务时长<span class="r-gray">{{ item.workHour }}小时</span>
                            </view>
                        </view>
                    </view>
                    <view class="r-list">
                        <view class="r-left">
                            <view class="r-l-left">
                                完成进度<span class="r-gray"><span :class="{'r-red':item.groupFinishNum<item.groupNum}">{{item.groupFinishNum}}</span>/{{item.groupNum}}</span>
                            </view>
                            <view class="r-l-right">
                                完成比率<span class="r-blue">{{(item.groupFinishNum/item.groupNum*100).toFixed()+'%'}}</span>
                            </view>
                        </view>
                    </view>
                   
                    <view class="report-border" v-if="index<list.length-1"></view>
                </view>
                   
            </view>
        </mescroll-uni>
    </view>

    <!-- 选择日期 -->
    <searchDate :isShow="isShow" @close="dateClose" @confirm="dateConfirm"></searchDate>
   
</view>
</template>
<script setup>
import { ref,onMounted,getCurrentInstance } from 'vue'
import { onLoad,onHide } from '@dcloudio/uni-app';
import customHeader from '@/components/customHeader.vue';
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import searchDate from '@/components/searchDate.vue';
import { parseTime,getDateRange,getDateRangeName } from '@/utils/datetime.js';
import { taskTypeOptions,formatTaskType,formatTaskStatus } from '@/utils/status.js';
import { taskLists } from '@/api/polling.js'
const { proxy } = getCurrentInstance();

// 底部日期选择
let isShow = ref(false);
const chooseDate = ()=>{
    isShow.value = true;
}
const dateClose=()=>{
    isShow.value = false;
}
// 选完日期提交回显
const dateConfirm=(dateObj)=>{
    isShow.value = false;
    dateStr.value =  dateObj.startDate + ' 至 '+dateObj.endDate;
    dateStrName.value = getDateRangeName(dateObj.lastType)

    form.value.startDate = dateObj.startDate;
    form.value.endDate = dateObj.endDate
}

// 类型索引
let taskTypeIndex = ref(0);
let taskTypeArr = ref([]);
let dateStr = ref('');
let dateStrName=ref('');
onLoad(async option => {
    taskTypeOptions.forEach(item => {
        taskTypeArr.value.push(item.label)
    });

    let dateObj = getDateRange('3days');
    dateStr.value = dateObj.startDate + ' 至 '+dateObj.endDate;
    dateStrName.value="近3天"

    form.value.startDate = dateObj.startDate;
    form.value.endDate = dateObj.endDate

    // let res = await getList(0,3);
    // cssFlag.value = false;
    // list.value = res.list;
    
})


// 选择类型筛选
const changeTaskType = (e)=>{
    taskTypeIndex.value = e.detail.value
    let obj = taskTypeOptions[taskTypeIndex.value];
    console.log('obj=>', obj)
}

// 查询列表
let lastId = ref('');
let list = ref([]);
let form = ref({
    startDate:''
})
const mescrollRef = ref(null);
const upOption = ref({
    // use: false,
    auto: true, // 禁用自动上拉
    page: { num: 0, size: 10 },
    noMoreSize: 5,
    empty: { 
        tip: '~ 空空如也 ~',
        icon: "../../../static/images/mescroll-empty.png"
    },
    textLoading: '加载中...',
    textNoMore: '已经到底了'
});

const downOption = ref({
    auto: false,
    textInOffset: '下拉刷新',
    textOutOffset: '释放更新',
    textLoading: '刷新中...'
});

let cssFlag=ref(false);//控制样式
const mescrollInit = (mescroll) => {
    cssFlag.value = true;
    mescrollRef.value = mescroll;
    // mescrollRef.value.triggerUpScroll();
};

// 下拉刷新
const downCallback = async (mescroll) => {
    try {
        console.log("下拉刷新");
        const res = await getList(1, upOption.value.page.size,undefined);
        cssFlag.value = false;
        list.value = res.list;
        // mescroll.resetUpScroll()
    } catch (error) {
        mescroll.endErr();
    } finally {
        setTimeout(async ()=>{
            mescroll.endSuccess();
        },500);
    }
}
// 上拉加载更多
const upCallback = async (mescroll) => {
    try {
        console.log("上拉加载更多",mescroll)
        let res = await getList(mescroll.num, mescroll.size,lastId.value);
        if (mescroll.num === 1) {
            list.value = res.list;
        } else {
            list.value.push(...res.list);
        }
        mescroll.endBySize(res.list.length, res.total);
    } catch (error) {
        mescroll.endErr();
    }
}

// 获取数据列表
const getList = (pageIndex, pageSize,last) => {
    return new Promise(async (resolve) => {
        let param = {
            // pageIndex,
            pageSize,
            timeBegin: form.value.startDate,
            timeEnd:  form.value.endDate,
            lastId:last,
            taskType:taskTypeOptions[taskTypeIndex.value].value
        }
        let res = await taskLists(param);
        let data = res ||{};
        lastId.value = data.isEnd==1?undefined:data.lastId
        resolve({
            ...data,
            total: (data.isEnd==1?0:data.lastId) || 1, //是否最后一页(1-是,0-否)
            lastId: data.isEnd==1?undefined:data.lastId
        });
    });
}

// 执行查询
const handleSearch= async ()=>{
    let res = await getList(0,10);
    cssFlag.value = false;
    list.value = res.list;
}

// 查看详情
const handleDetail = (item,type) =>{
    let url='/pages/business/polling/taskDetail?id='+item.taskId;
    uni.navigateTo({
        url
    });
}
</script>

<style scoped>
.scroll-h{
    /* #ifdef APP-PLUS */
    height: calc(100vh - 148px);
    /* #endif */
    /* #ifndef APP-PLUS */
    height: calc(100vh - 132px);
    /* #endif */
}

.search{
    display: flex;
    align-items: center;
    padding:0 30rpx;
}
.search .search-bg{
    margin:20rpx 0;
    line-height:56rpx;
}
.search .s-b-left{
    width:230rpx;
    display: flex;
    align-items: center;
}
.search .s-b-right{
    width:270rpx;
    margin-left:20rpx;
    margin-right:20rpx;
    display: flex;
    align-items: center;
}
.search .search-bg .img-icon,
.search .search-bg .img-type{
    width:28rpx;
    height: 28rpx;
    margin-right:20rpx;
}
.search .search-bg .img-icon{
    width:30rpx;
    height:30rpx;
}
.search .search-btn{
    width:150rpx;
    color:#fff;
    font-size:28rpx;
}

.week{
    padding:0 40rpx;
    color: #fff;
    font-size:28rpx;
    margin-bottom:10rpx;
}

.white-bg{
    width: 670rpx;
    padding: 30rpx 40rpx 40rpx;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
}
.white-bg2{
    border-radius: 0;
    margin-top:20rpx;
}
.r-title{
    width:670rpx;
    color:#919191;
    font-size:28rpx;
    background-color: #F5F5F5;
    margin-left:-40rpx;
    padding:40rpx 40rpx 30rpx;
    margin-bottom:15rpx;
}
.report-list{
    position: relative;
}
.img-w{
    width:50rpx;
    height:50rpx;
}
.img-complete{
    position: absolute;
    right:-40rpx;
    top:60rpx;
    width:133rpx;
    height:150rpx;
}
.report-border{
    border-bottom:1px solid #E7E7E7;
    width:710rpx;
    height: 1px;
    margin:20rpx 0;
}

.report-list .r-list{
    padding: 5rpx 0;
}
.report-list .r-list .r-left{
    display: flex;
}
.report-list .r-list .r-gray{
    margin-left:10rpx;
}
.report-list .r-list .r-blue{
    margin-left:10rpx;
    font-weight: bold;
}
.report-list .r-list .r-red{
    font-weight: bold;
}
.report-list .r-list .r-name{
    width:525rpx
}
.r-left .r-l-left{
    width:350rpx;
}
.r-left .r-l-right{
   
}
.no-data .no-pic{
    display: block;
    width:440rpx;
    height:210rpx;
    margin:40rpx auto;
}
</style>