392 lines
15 KiB
Vue
392 lines
15 KiB
Vue
<template>
|
||
<view class="con-body">
|
||
<view class="con-bg">
|
||
<!-- 头部 -->
|
||
<customHeader ref="customHeaderRef" title="巡检任务"
|
||
:leftFlag="true"
|
||
:rightFlag="true"
|
||
>
|
||
<template #right>
|
||
<view class="head-right" @click="handleJump">
|
||
<img :src="'static/images/polling/icon-calendar.png'" class="img-calendar" />日历
|
||
</view>
|
||
</template>
|
||
</customHeader>
|
||
<!-- 高度来避免头部遮挡 -->
|
||
<view class="top-height"></view>
|
||
<!-- <view class="week">{{dateStr}}</view> -->
|
||
|
||
<!-- 列表 @up="upCallback" -->
|
||
<mescroll-uni ref="mescrollRef" @init="mescrollInit"
|
||
@down="downCallback" :down="downOption" :up="upOption"
|
||
:fixed="false" class="scroll-h"
|
||
:class="{'loading-scroll':cssFlag}">
|
||
<view class="white-bg">
|
||
<view class="blue-title">日常巡检</view>
|
||
<block v-if="list1.length>0">
|
||
<view class="report-list" v-for="(item, index) in list1" :key="index" @click="handleDetail(item,1)">
|
||
<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">巡检单号<span class="r-gray">{{ item.taskId }}</span></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<list1.length-1"></view>
|
||
</view>
|
||
</block>
|
||
<view v-else class="no-data">
|
||
<img :src="'static/images/polling/pic-NoResult.png'" class="no-pic" />
|
||
</view>
|
||
<view class="green-title" style="margin-top:60rpx">临时巡检</view>
|
||
<block v-if="list2.length>0">
|
||
<view class="report-list" v-for="(item, index) in list2" :key="index" @click="handleDetail(item,1)">
|
||
<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.groupFinishNum==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">巡检单号<span class="r-gray">{{ item.taskId }}</span></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<list2.length-1"></view>
|
||
</view>
|
||
</block>
|
||
<view v-else class="no-data">
|
||
<img :src="'static/images/polling/pic-NoResult.png'" class="no-pic" />
|
||
</view>
|
||
</view>
|
||
<view class="white-bg white-bg2">
|
||
<view class="red-title">问题跟踪</view>
|
||
<block v-if="list3.length>0">
|
||
<view class="report-list" v-for="(item, index) in list3" :key="index" @click="handleDetail(item,2)">
|
||
<view class="r-list" style="padding-bottom:0">
|
||
<view class="r-name">{{ item.groupName }}</view>
|
||
<view class="r-right">
|
||
<!-- 问题状态 1=追踪、2=关闭 -->
|
||
<view v-if="item.problemStatus==1" class="btn-red">进行中</view>
|
||
<view v-if="item.problemStatus==2" class="btn-green">已解决</view>
|
||
</view>
|
||
</view>
|
||
<view class="r-list">
|
||
<view class="r-left">
|
||
<view class="r-l-left" style="width:220rpx">跟踪次数<span class="r-gray">{{ item.logNum }}</span></view>
|
||
<view class="r-l-right">最近跟踪时间<span class="r-gray">{{ parseTime(item.lastLogTime,'{y}-{m}-{d} {h}:{i}') }}</span></view>
|
||
</view>
|
||
</view>
|
||
<view class="report-border" v-if="index<list3.length-1"></view>
|
||
</view>
|
||
</block>
|
||
<view v-else class="no-data">
|
||
<img :src="'static/images/polling/pic-NoResult.png'" class="no-pic" />
|
||
</view>
|
||
</view>
|
||
</mescroll-uni>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import { ref,onMounted } from 'vue'
|
||
import { onLoad,onShow,onHide } from '@dcloudio/uni-app';
|
||
import customHeader from '@/components/customHeader.vue';
|
||
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
|
||
import { parseTime } from '@/utils/datetime.js';
|
||
import { formatTaskStatus } from '@/utils/status.js';
|
||
import { taskList } from '@/api/polling.js'
|
||
|
||
// '2025-12-29 星期五'
|
||
let dateStr = ref('');
|
||
onLoad(option => {
|
||
let date = new Date();
|
||
dateStr.value = parseTime(date,'{y}-{m}-{d} 星期{a}');
|
||
})
|
||
|
||
// 查询列表
|
||
let list1 = ref([]);
|
||
let list2 = ref([]);
|
||
let list3 = ref([]);
|
||
let mescroll = null; // 用于存放mescroll实例
|
||
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: true,
|
||
textInOffset: '下拉刷新',
|
||
textOutOffset: '释放更新',
|
||
textLoading: '刷新中...'
|
||
});
|
||
|
||
let cssFlag=ref(false);//控制样式
|
||
|
||
onShow(()=>{
|
||
if(mescroll)
|
||
mescroll.triggerDownScroll()
|
||
})
|
||
|
||
const mescrollInit = (mescrollInstance) => {
|
||
cssFlag.value = true;
|
||
mescroll = mescrollInstance;
|
||
// mescroll.setMescroll(mescrollRef.value); // 绑定mescroll实例
|
||
mescrollRef.value = mescroll;
|
||
};
|
||
|
||
// 下拉刷新
|
||
const downCallback = async (mescroll) => {
|
||
try {
|
||
// console.log("下拉刷新")
|
||
const res = await getList(1, upOption.value.page.size);
|
||
cssFlag.value = false;
|
||
list1.value = res.list1 || [];
|
||
list2.value = res.list2 || [];
|
||
list3.value = res.list3 || [];
|
||
// mescroll.resetUpScroll();
|
||
} catch (error) {
|
||
mescroll.endErr();
|
||
} finally {
|
||
mescroll.endSuccess();
|
||
}
|
||
}
|
||
// 上拉加载更多
|
||
const upCallback = async (mescroll) => {
|
||
try {
|
||
console.log("上拉加载更多")
|
||
let res = await getList(mescroll.num, mescroll.size);
|
||
if (mescroll.num === 1) {
|
||
list1.value = res.list1 || [];
|
||
list2.value = res.list2 || [];
|
||
list3.value = res.list3 || [];
|
||
} else {
|
||
// list.value.push(...res.list);
|
||
}
|
||
mescroll.endBySize(res.list.length, res.total);
|
||
} catch (error) {
|
||
mescroll.endErr();
|
||
}
|
||
}
|
||
|
||
// 获取数据列表
|
||
/**
|
||
* {
|
||
"day": "",查询日期，格式yyyy-mm-dd
|
||
"month": "",查询日期，格式yyyy-mm
|
||
"taskType": 0, //1 日常任务 2 临时任务
|
||
"taskStatus": 0//1=未发布、2=已发布 3 进行中 4 已完成 5 已过期
|
||
}
|
||
*/
|
||
const getList = (pageIndex, pageSize) => {
|
||
|
||
return new Promise(async (resolve) => {
|
||
let param = {
|
||
// day:parseTime(new Date().getTime(),'{y}-{m}-{d}'),//今天
|
||
taskStatus:3,//进行中
|
||
}
|
||
let res = await taskList(param);
|
||
let data = res||{};
|
||
resolve({
|
||
...data,
|
||
});
|
||
});
|
||
|
||
}
|
||
|
||
// 查看详情 type 1-任务详情 2-问题详情
|
||
const handleDetail = (item,type) =>{
|
||
let url=''
|
||
if(type==1){
|
||
url = '/pages/business/polling/taskDetail?id='+item.taskId;
|
||
}else{
|
||
url = '/pages/business/polling/problemDetail?problemId='+item.problemId;
|
||
}
|
||
uni.navigateTo({
|
||
url
|
||
});
|
||
}
|
||
|
||
// 跳转webview
|
||
const handleJump = (item)=>{
|
||
uni.navigateTo({
|
||
url:'/pages/business/polling/searchList'
|
||
});
|
||
}
|
||
|
||
|
||
</script>
|
||
<style scoped>
|
||
.scroll-h{
|
||
/* #ifdef APP-PLUS */
|
||
height: calc(100vh - 78px);
|
||
/* #endif */
|
||
/* #ifndef APP-PLUS */
|
||
height: calc(100vh - 58px);
|
||
/* #endif */
|
||
}
|
||
.head-right{
|
||
font-size:28rpx;
|
||
}
|
||
.img-calendar{
|
||
width: 30rpx;
|
||
height: 28rpx;
|
||
}
|
||
.week{
|
||
padding:0 40rpx;
|
||
color: #fff;
|
||
font-size:32rpx;
|
||
margin-bottom:20rpx;
|
||
}
|
||
|
||
.white-bg{
|
||
width: 670rpx;
|
||
padding: 30rpx 40rpx 40rpx;
|
||
margin: 0 auto !important;
|
||
border-radius: 8px 8px 0 0;
|
||
}
|
||
.white-bg2{
|
||
border-radius: 0;
|
||
border-top:20rpx solid #F5F5F5
|
||
}
|
||
.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;
|
||
align-items: center;
|
||
}
|
||
.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:345rpx;
|
||
}
|
||
.r-left .r-l-right{
|
||
|
||
}
|
||
.no-data .no-pic{
|
||
display: block;
|
||
width:440rpx;
|
||
height:210rpx;
|
||
margin:40rpx auto;
|
||
}
|
||
</style> |