2025-11-14 18:30:34 +08:00
|
|
|
|
<template>
|
2025-11-20 17:45:41 +08:00
|
|
|
|
<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" />
|
|
|
|
|
|
近3天
|
|
|
|
|
|
<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">查询</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="week">{{dateStr}}</view>
|
2025-11-14 18:30:34 +08:00
|
|
|
|
|
2025-11-20 17:45:41 +08:00
|
|
|
|
<!-- 列表 -->
|
|
|
|
|
|
<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">
|
|
|
|
|
|
<block v-if="list.length>0">
|
|
|
|
|
|
<block v-for="(obj, index) in list" :key="index">
|
|
|
|
|
|
<view class="r-title">{{ parseTime(obj.dateStr,'{y}-{m}-{d} 星期{a}')}}</view>
|
|
|
|
|
|
<view class="report-list" v-for="(item, index) in obj.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.count==0" :src="'static/images/polling/icon-start.png'" class="img-w" />
|
|
|
|
|
|
<img v-else :src="'static/images/polling/icon-pending.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 class="r-l-left">开始时间<span class="r-gray">{{ item.planTime }}</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.count<item.total}">{{item.count}}</span>/{{item.total}}</span>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="r-l-right">完成比率<span class="r-blue">{{item.percentage}}</span></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="r-list">
|
|
|
|
|
|
<view class="r-left">
|
|
|
|
|
|
<view>任务状态
|
|
|
|
|
|
<span class="r-gray" v-if="item.taskStatus==3">
|
|
|
|
|
|
<block v-if="item.count==0">待执行</block>
|
|
|
|
|
|
<block v-else>执行中</block>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<span class="r-gray" v-else>{{formatTaskStatus(item.taskStatus) }}</span>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="report-border" v-if="index<obj.list.length-1"></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</block>
|
|
|
|
|
|
</block>
|
|
|
|
|
|
<view v-else class="no-data">
|
|
|
|
|
|
<img :src="'static/images/polling/pic-NoResult.png'" class="no-pic" />
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</mescroll-uni>
|
2025-11-14 18:30:34 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
|
2025-11-20 17:45:41 +08:00
|
|
|
|
<!-- 选择日期 -->
|
|
|
|
|
|
<searchDate :isShow="isShow" @close="dateClose" @confirm="dateConfirm"></searchDate>
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
2025-11-14 18:30:34 +08:00
|
|
|
|
<script setup>
|
2025-11-20 17:45:41 +08:00
|
|
|
|
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 } from '@/utils/datetime.js';
|
|
|
|
|
|
import { taskTypeOptions,formatTaskType,formatTaskStatus } from '@/utils/status.js';
|
|
|
|
|
|
import { noticeList } from '@/api/notice.js'
|
|
|
|
|
|
|
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
|
|
|
|
|
|
|
// 底部日期选择
|
|
|
|
|
|
let isShow = ref(false);
|
|
|
|
|
|
const chooseDate = ()=>{
|
|
|
|
|
|
isShow.value = true;
|
|
|
|
|
|
}
|
|
|
|
|
|
const dateClose=()=>{
|
|
|
|
|
|
isShow.value = false;
|
|
|
|
|
|
}
|
|
|
|
|
|
const dateConfirm=(dateObj)=>{
|
|
|
|
|
|
console.log(dateObj)
|
|
|
|
|
|
isShow.value = false;
|
|
|
|
|
|
dateStr.value = dateObj.startDate + ' 至 '+dateObj.endDate
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 类型索引
|
|
|
|
|
|
let taskTypeIndex = ref(0);
|
|
|
|
|
|
let taskTypeArr = ref([]);
|
|
|
|
|
|
let dateStr = ref('');
|
|
|
|
|
|
onLoad(option => {
|
|
|
|
|
|
taskTypeOptions.forEach(item => {
|
|
|
|
|
|
taskTypeArr.value.push(item.label)
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
let dateObj = getDateRange('3days');
|
|
|
|
|
|
dateStr.value = dateObj.startDate + ' 至 '+dateObj.endDate
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 选择类型筛选
|
|
|
|
|
|
const changeTaskType = (e)=>{
|
|
|
|
|
|
taskTypeIndex.value = e.detail.value
|
|
|
|
|
|
let obj = taskTypeOptions[taskTypeIndex.value];
|
|
|
|
|
|
console.log('obj=>', obj)
|
|
|
|
|
|
}
|
2025-11-14 18:30:34 +08:00
|
|
|
|
|
2025-11-20 17:45:41 +08:00
|
|
|
|
// 查询列表
|
|
|
|
|
|
let list = ref([]);
|
|
|
|
|
|
let form = ref({
|
|
|
|
|
|
beginTime:''
|
|
|
|
|
|
})
|
|
|
|
|
|
const mescrollRef = ref(null);
|
|
|
|
|
|
const upOption = ref({
|
|
|
|
|
|
// use: false,
|
|
|
|
|
|
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;
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 下拉刷新
|
|
|
|
|
|
const downCallback = async (mescroll) => {
|
|
|
|
|
|
try {
|
|
|
|
|
|
console.log("下拉刷新")
|
|
|
|
|
|
const res = await getList(1, upOption.value.page.size);
|
|
|
|
|
|
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("上拉加载更多")
|
|
|
|
|
|
let res = await getList(mescroll.num, mescroll.size);
|
|
|
|
|
|
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) => {
|
|
|
|
|
|
return new Promise(async (resolve) => {
|
|
|
|
|
|
let param = {
|
|
|
|
|
|
pageIndex,
|
|
|
|
|
|
pageSize,
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// let res = await noticeList(param);
|
|
|
|
|
|
let res = {
|
|
|
|
|
|
"code": 200,
|
|
|
|
|
|
"msg": "操作成功",
|
|
|
|
|
|
"data": {
|
|
|
|
|
|
list:[
|
|
|
|
|
|
{
|
|
|
|
|
|
dateStr:new Date().getTime(),
|
|
|
|
|
|
list:[
|
|
|
|
|
|
{
|
|
|
|
|
|
taskName:'日常巡检任务AAA日常巡检任务111',
|
|
|
|
|
|
taskId:202512297899,
|
|
|
|
|
|
taskStatus:3,
|
|
|
|
|
|
taskType:1,
|
|
|
|
|
|
planTime:'10:25',
|
|
|
|
|
|
workHour:1,
|
|
|
|
|
|
count:0,
|
|
|
|
|
|
total:70,
|
|
|
|
|
|
percentage:'30%'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
taskName:'日常巡检任务AAA日常巡检任务222',
|
|
|
|
|
|
taskId:202512297899,
|
|
|
|
|
|
taskStatus:3,
|
|
|
|
|
|
taskType:2,
|
|
|
|
|
|
planTime:'10:25',
|
|
|
|
|
|
workHour:1,
|
|
|
|
|
|
count:20,
|
|
|
|
|
|
total:70,
|
|
|
|
|
|
percentage:'40%'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
taskName:'日常巡检任务BBB，任务名称过长时可折行 行距35px',
|
|
|
|
|
|
taskId:202512297899,
|
|
|
|
|
|
taskStatus:4,
|
|
|
|
|
|
taskType:1,
|
|
|
|
|
|
planTime:'10:25',
|
|
|
|
|
|
workHour:1,
|
|
|
|
|
|
count:70,
|
|
|
|
|
|
total:70,
|
|
|
|
|
|
percentage:'100%'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
taskName:'日常巡检任务ccc，任务名称',
|
|
|
|
|
|
taskId:202512297899,
|
|
|
|
|
|
taskStatus:5,
|
|
|
|
|
|
taskType:2,
|
|
|
|
|
|
planTime:'10:25',
|
|
|
|
|
|
workHour:1,
|
|
|
|
|
|
count:70,
|
|
|
|
|
|
total:70,
|
|
|
|
|
|
percentage:'100%'
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
|
|
recordCount:10,
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
let data = res.data||{};
|
|
|
|
|
|
resolve({
|
|
|
|
|
|
...data,
|
|
|
|
|
|
total: res.recordCount || 0
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 查看详情
|
|
|
|
|
|
const handleDetail = (item,type) =>{
|
|
|
|
|
|
let url='/pages/business/polling/taskDetail?id='+item.taskId;
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
2025-11-14 18:30:34 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
2025-11-20 17:45:41 +08:00
|
|
|
|
<style scoped>
|
|
|
|
|
|
.scroll-h{
|
|
|
|
|
|
/* #ifdef APP-PLUS */
|
|
|
|
|
|
height: calc(100vh - 108px);
|
|
|
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef APP-PLUS */
|
|
|
|
|
|
height: calc(100vh - 130px);
|
|
|
|
|
|
/* #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;
|
|
|
|
|
|
}
|
2025-11-14 18:30:34 +08:00
|
|
|
|
|
2025-11-20 17:45:41 +08:00
|
|
|
|
.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;
|
|
|
|
|
|
}
|
2025-11-14 18:30:34 +08:00
|
|
|
|
</style>
|
