285 lines
6.5 KiB
Vue
285 lines
6.5 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar
|
||
title="检查列表"
|
||
:placeholder="true"
|
||
:safeAreaInsetTop="true"
|
||
bgColor="#3375e6"
|
||
titleColor="#ffffff"
|
||
leftIconColor="#ffffff"
|
||
:autoBack="false"
|
||
@leftClick="goHome"
|
||
/>
|
||
<view class="page-content padding">
|
||
<view v-if="loading" class="empty-tip text-gray text-center padding">加载中...</view>
|
||
|
||
<view v-else-if="!tableId" class="empty-tip text-gray text-center padding">
|
||
请从首页检查计划进入
|
||
</view>
|
||
|
||
<view v-else-if="checkPlanData.length === 0" class="empty-tip text-gray text-center padding">
|
||
暂无检查任务
|
||
</view>
|
||
|
||
<view
|
||
v-else
|
||
class="plan-card margin-bottom"
|
||
v-for="item in checkPlanData"
|
||
:key="item.id || item.taskDate"
|
||
>
|
||
<view class="plan-header">
|
||
<text class="plan-header-title">{{ item.name || planName || '检查任务' }}</text>
|
||
</view>
|
||
<view class="plan-body">
|
||
<view class="flex">
|
||
<view class="border-border margin-right-xs">{{ item.runModeName }}完成</view>
|
||
<view class="border-border">{{ item.cycle }}</view>
|
||
</view>
|
||
<view v-if="item.taskDate" class="flex text-gray margin-top">
|
||
<view>任务日期：</view>
|
||
<view style="color: #333333;">{{ formatDate(item.taskDate) }}</view>
|
||
</view>
|
||
<view class="flex text-gray margin-top">
|
||
<view>计划时间：</view>
|
||
<view style="color: #333333;">
|
||
{{ formatDate(item.planStartTime) }}至{{ formatDate(item.planEndTime) }}
|
||
</view>
|
||
</view>
|
||
<view class="flex margin-top align-center">
|
||
<view style="color: #B5B5B5;">完成进度：</view>
|
||
<view class="flex align-center margin-left-sm">
|
||
<view class="cu-progress round">
|
||
<view class="bg-green" :style="{ width: formatProgress(item.progress) + '%' }"></view>
|
||
</view>
|
||
<text class="margin-left-sm">{{ formatProgress(item.progress) }}%</text>
|
||
</view>
|
||
</view>
|
||
<view class="plan-stats margin-top">
|
||
<view class="plan-stat-item">
|
||
<view class="plan-stat-num text-orange">{{ item.totalCount ?? 0 }}</view>
|
||
<view class="plan-stat-label">总检项</view>
|
||
</view>
|
||
<view class="plan-stat-item">
|
||
<view class="plan-stat-num text-yellow">{{ item.pendingCount ?? 0 }}</view>
|
||
<view class="plan-stat-label">待排查</view>
|
||
</view>
|
||
<view class="plan-stat-item">
|
||
<view class="plan-stat-num text-red">{{ item.unusualNum ?? 0 }}</view>
|
||
<view class="plan-stat-label">异常数</view>
|
||
</view>
|
||
<view class="plan-stat-item">
|
||
<view class="plan-stat-num text-blue">{{ item.finishedCount ?? 0 }}</view>
|
||
<view class="plan-stat-label">已完成</view>
|
||
</view>
|
||
</view>
|
||
<view class="margin-top margin-bottom flex justify-end">
|
||
<!-- <button class="cu-btn round lg light bg-blue margin-right" @click.stop="viewDetails(item)">
|
||
查看详情
|
||
</button> -->
|
||
<button
|
||
class="cu-btn round lg bg-blue"
|
||
@click.stop="startCheck(item)"
|
||
>
|
||
检查处置
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import { onLoad, onShow, onBackPress } from '@dcloudio/uni-app';
|
||
import { getPlanTableDetail } from '@/request/api.js';
|
||
|
||
const loading = ref(true);
|
||
const checkPlanData = ref([]);
|
||
const tableId = ref('');
|
||
const planName = ref('');
|
||
|
||
const listParams = {
|
||
pageNum: 1,
|
||
pageSize: 100,
|
||
name: ''
|
||
};
|
||
|
||
const formatDate = (dateStr) => {
|
||
if (!dateStr) return '';
|
||
return String(dateStr).split(' ')[0];
|
||
};
|
||
|
||
const formatProgress = (progress) => {
|
||
const num = Number(progress);
|
||
if (Number.isNaN(num)) return 0;
|
||
return Math.min(100, Math.max(0, num));
|
||
};
|
||
|
||
const fetchList = async () => {
|
||
if (!tableId.value) {
|
||
loading.value = false;
|
||
checkPlanData.value = [];
|
||
return;
|
||
}
|
||
|
||
loading.value = true;
|
||
try {
|
||
const res = await getPlanTableDetail({
|
||
...listParams,
|
||
tableId: tableId.value
|
||
});
|
||
if (res.code === 0) {
|
||
checkPlanData.value = res.data?.records || [];
|
||
} else {
|
||
uni.showToast({ title: res.msg || '获取检查清单失败', icon: 'none' });
|
||
}
|
||
} catch (error) {
|
||
console.error('获取检查清单失败:', error);
|
||
uni.showToast({ title: '获取检查清单失败', icon: 'none' });
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
const viewDetails = (item) => {
|
||
uni.navigateTo({
|
||
url: `/pages/plandetail/plandetail?id=${item.id || tableId.value}`
|
||
});
|
||
};
|
||
|
||
const startCheck = (item) => {
|
||
const oneTableId = item.id;
|
||
const taskDate = formatDate(item.taskDate);
|
||
if (!oneTableId || !taskDate) {
|
||
uni.showToast({ title: '缺少任务参数', icon: 'none' });
|
||
return;
|
||
}
|
||
const name = item.name || planName.value || '';
|
||
const tableIdQuery = tableId.value ? `&tableId=${tableId.value}` : '';
|
||
uni.navigateTo({
|
||
url: `/pages/Inspectionresult/detail?oneTableId=${oneTableId}&taskDate=${encodeURIComponent(taskDate)}&name=${encodeURIComponent(name)}${tableIdQuery}`
|
||
});
|
||
};
|
||
|
||
onLoad((options) => {
|
||
if (options.tableId) {
|
||
tableId.value = options.tableId;
|
||
}
|
||
if (options.name) {
|
||
planName.value = decodeURIComponent(options.name);
|
||
}
|
||
});
|
||
|
||
onShow(() => {
|
||
fetchList();
|
||
});
|
||
|
||
const goHome = () => {
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
});
|
||
};
|
||
|
||
onBackPress(() => {
|
||
goHome();
|
||
return true;
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
background: #EBF2FC;
|
||
}
|
||
|
||
.empty-tip {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.plan-card {
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.plan-header {
|
||
background: linear-gradient(135deg, #4A90E2 0%, #2667E9 100%);
|
||
padding: 24rpx 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.plan-header-title {
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.plan-body {
|
||
padding: 24rpx 30rpx 10rpx 30rpx;
|
||
background: #fff;
|
||
}
|
||
|
||
.plan-stats {
|
||
display: flex;
|
||
background: #F5F7FA;
|
||
border-radius: 12rpx;
|
||
border: 1rpx solid #E8ECF0;
|
||
overflow: hidden;
|
||
|
||
.plan-stat-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 20rpx 0;
|
||
border-right: 1rpx solid #E8ECF0;
|
||
|
||
&:last-child {
|
||
border-right: none;
|
||
}
|
||
}
|
||
|
||
.plan-stat-num {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.plan-stat-label {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
|
||
.cu-progress {
|
||
width: 300rpx;
|
||
height: 20rpx;
|
||
background: #ebeef5;
|
||
border-radius: 100rpx;
|
||
overflow: hidden;
|
||
|
||
view {
|
||
height: 100%;
|
||
border-radius: 100rpx;
|
||
transition: width 0.3s ease;
|
||
}
|
||
}
|
||
|
||
.bg-green {
|
||
background: #2667E9;
|
||
}
|
||
|
||
.border-border {
|
||
padding: 10rpx;
|
||
background: #EEF3FF;
|
||
border-radius: 4rpx;
|
||
border: 2rpx solid #AAC5FC;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: #2667E9;
|
||
}
|
||
</style>
|