355 lines
8.6 KiB
Vue
355 lines
8.6 KiB
Vue
<template>
|
||
<!-- 顶部导航栏 -->
|
||
<view class="page_padding">
|
||
<view class="inspection_record_box flex flex-col">
|
||
<navBar @clickLeft="navBack" title="巡检记录"></navBar>
|
||
<TabsComponents
|
||
:activeValue="activeValue"
|
||
:tabslist="tabslist"
|
||
@update="handleChangeTabs"
|
||
></TabsComponents>
|
||
<view class="timebox">
|
||
<view class="daybox flex items-center">
|
||
<uni-datetime-picker
|
||
type="date"
|
||
:clear-icon="false"
|
||
@change="handleChangeTime"
|
||
v-model="queryParmas.date"
|
||
>
|
||
<view class="flex">
|
||
<view class="day">{{ showDate }}</view>
|
||
<view class="searchiconbox flex items-center">
|
||
<view class="arrow"> </view>
|
||
<view class="arrow1"> </view>
|
||
</view>
|
||
</view>
|
||
</uni-datetime-picker>
|
||
</view>
|
||
</view>
|
||
<scroll-view
|
||
v-if="list.length > 0"
|
||
class="record_body record-list"
|
||
scroll-y
|
||
lower-threshold="160"
|
||
@scrolltolower="scrolltolower"
|
||
>
|
||
<view
|
||
class="record_list_item"
|
||
v-for="(ite, index) in list"
|
||
:key="index"
|
||
@tap="handleTap(ite)"
|
||
>
|
||
<view class="title flex items-center">
|
||
<view class="title_name"> {{ ite.taskName }} </view>
|
||
<view class="title_status" v-if="isComputed(ite.taskStatus)"> 已巡检 </view>
|
||
<view class="title_status noinspection" v-else> 未巡检 </view>
|
||
</view>
|
||
<view class="items" v-if="ite.points">
|
||
<view class="item" v-for="(itemname, itemindex) in ite.itemslist" :key="itemindex">
|
||
<text>{{ itemname }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="time">
|
||
<text>巡检时间：</text>
|
||
<text>{{ ite.taskTime }}</text>
|
||
</view>
|
||
<view class="time user">
|
||
<text>巡检人：</text>
|
||
<text>{{ ite.inspectorName }}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="nodata" v-if="list.length <= 0">
|
||
<text>暂无数据</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import TabsComponents from '@/components/tabs/tabs.vue'
|
||
import navBar from '@/components/navbar/navbar.vue'
|
||
import { computed, ref } from 'vue'
|
||
import { getInspectionList } from '@/api/insepction.js'
|
||
import { parseTime } from '@/utils/time.js'
|
||
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
|
||
|
||
const isComputed = (status: string) => {
|
||
const awaitlist = ['未完成', '待执行', '执行中']
|
||
return !awaitlist.includes(status)
|
||
}
|
||
|
||
const tabslist = [
|
||
{
|
||
name: '全部',
|
||
value: 2
|
||
},
|
||
{
|
||
name: '未巡检',
|
||
value: 0
|
||
},
|
||
{
|
||
name: ' 已巡检',
|
||
value: 1
|
||
}
|
||
]
|
||
const activeValue = ref(2)
|
||
|
||
// ---------------------------------------------------------------------
|
||
|
||
// ---------------------------------------------------------------------
|
||
const list = ref([])
|
||
const queryParmas = ref({
|
||
date: parseTime(new Date(), '{y}-{m}-{d}'),
|
||
status: 2,
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
})
|
||
const showDate = computed(() => {
|
||
return parseTime(queryParmas.value.date, '{m}月{d}日')
|
||
})
|
||
const isLoading = ref(false) // 加载锁
|
||
const hasMore = ref(true) // 是否还有更多数据
|
||
const total = ref(0)
|
||
|
||
function getlist() {
|
||
// 1. 如果正在加载或没有更多数据，直接返回
|
||
if (isLoading.value || !hasMore.value) {
|
||
if (isRefresh) {
|
||
uni.stopPullDownRefresh()
|
||
isRefresh = false
|
||
}
|
||
return
|
||
}
|
||
// 2. 开启锁
|
||
isLoading.value = true
|
||
const { pageNum, pageSize, date, status } = queryParmas.value
|
||
getInspectionList({
|
||
pageSize,
|
||
pageNum,
|
||
date,
|
||
status
|
||
})
|
||
.then(res => {
|
||
list.value = res.rows
|
||
let items: Set<string> = new Set()
|
||
res.rows.forEach(item => {
|
||
if (!item.points || item.points.length <= 0) return
|
||
item.points.forEach(ite => {
|
||
ite.itemNames.forEach(it => items.add(it))
|
||
})
|
||
item.itemslist = Array.from(items)
|
||
})
|
||
total.value = res.total
|
||
hasMore.value = list.value.length < res.total
|
||
})
|
||
.catch(() => {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
title: '网络异常'
|
||
})
|
||
})
|
||
.finally(() => {
|
||
if (isRefresh) {
|
||
uni.stopPullDownRefresh()
|
||
isRefresh = false
|
||
}
|
||
isLoading.value = false
|
||
})
|
||
}
|
||
|
||
function handleChangeTime(event: string) {
|
||
hasMore.value = true
|
||
queryParmas.value.date = event
|
||
getlist()
|
||
}
|
||
|
||
function handleTap(ite) {
|
||
const today = parseTime(new Date(), '{m}月{d}日')
|
||
if (today !== showDate.value && ite.taskStatus !== '已完成') {
|
||
return
|
||
}
|
||
|
||
if (isComputed(ite.taskStatus)) {
|
||
uni.navigateTo({
|
||
url:
|
||
'/pageSubPack/inspection/inspection_main?id=' + ite.id + '&date=' + queryParmas.value.date
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/pageSubPack/inspection/inspection_upload?id=' + ite.id
|
||
})
|
||
}
|
||
}
|
||
|
||
function scrolltolower() {
|
||
if (isLoading.value || !hasMore.value) {
|
||
return
|
||
}
|
||
queryParmas.value.pageNum += 1
|
||
getlist()
|
||
}
|
||
|
||
function handleChangeTabs(val: number) {
|
||
activeValue.value = val
|
||
hasMore.value = true
|
||
queryParmas.value.status = val
|
||
queryParmas.value.pageNum = 1
|
||
queryParmas.value.pageSize = 10
|
||
getlist()
|
||
}
|
||
// ---------------------------------------------------------------------
|
||
function init() {
|
||
resetList()
|
||
}
|
||
onShow(() => {
|
||
init()
|
||
})
|
||
function resetList() {
|
||
list.value = []
|
||
queryParmas.value.status = 2
|
||
queryParmas.value.pageSize = 10
|
||
hasMore.value = true
|
||
getlist()
|
||
}
|
||
|
||
// 是否正在下拉刷新
|
||
let isRefresh = false
|
||
onPullDownRefresh(() => {
|
||
isRefresh = true
|
||
init()
|
||
})
|
||
|
||
// 返回上一页
|
||
const navBack = () => {
|
||
uni.navigateBack()
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.inspection_record_box {
|
||
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 50.71%);
|
||
padding: 20rpx 40rpx;
|
||
position: relative;
|
||
flex: 1;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
.timebox {
|
||
width: 188rpx;
|
||
height: 48rpx;
|
||
background: #ffffff;
|
||
border-radius: 24rpx;
|
||
text-align: center;
|
||
line-height: 48rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
margin-bottom: 20rpx;
|
||
margin-top: 20rpx;
|
||
.daybox {
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
.day {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
padding-left: 15rpx;
|
||
}
|
||
.searchiconbox {
|
||
width: 38rpx;
|
||
height: 48rpx;
|
||
padding-right: 10rpx;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
.arrow,
|
||
.arrow1 {
|
||
border: 1rpx solid #ccc;
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
}
|
||
.arrow {
|
||
border-right-color: transparent;
|
||
border-top-color: transparent;
|
||
transform: rotateZ(135deg);
|
||
}
|
||
.arrow1 {
|
||
border-left-color: transparent;
|
||
border-bottom-color: transparent;
|
||
transform: rotateZ(135deg);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.record_body {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
overflow-y: auto;
|
||
box-sizing: border-box;
|
||
.record_list_item {
|
||
margin-bottom: 20rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
// 巡检标题
|
||
.title {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #222222;
|
||
line-height: 40rpx;
|
||
height: 40rpx;
|
||
margin-bottom: 25rpx;
|
||
|
||
.title_status {
|
||
width: 86rpx;
|
||
height: 30rpx;
|
||
background: #4d5dfa;
|
||
border-radius: 198rpx 198rpx 198rpx 198rpx;
|
||
text-align: center;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #ffffff;
|
||
line-height: 30rpx;
|
||
margin-left: 5rpx;
|
||
|
||
&.noinspection {
|
||
background-color: #ccc;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 巡检项目
|
||
.items {
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.item {
|
||
padding: 0 10rpx;
|
||
min-height: 42rpx;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
border: 1rpx solid #4d5dfa;
|
||
text-align: left;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #4d5dfa;
|
||
margin-right: 20rpx;
|
||
margin-bottom: 10rpx;
|
||
word-wrap: break-word; // 单词/中文自动换行
|
||
word-break: break-all; // 长英文无空格强制截断换行
|
||
line-height: 1.4; // 多行文字行间距
|
||
}
|
||
}
|
||
|
||
// 巡检人 巡检时间
|
||
& > .time {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|