125 lines
3.5 KiB
Vue
125 lines
3.5 KiB
Vue
<template>
|
||
<view class="page padding">
|
||
<view class="padding bg-white radius">
|
||
<view class="text-bold">{{ planData?.name || '加载中...' }}</view>
|
||
<view class="flex margin-top">
|
||
<view class="border-border margin-right-xs">任务ID: {{ planData?.taskId }}</view>
|
||
<view class="border-border">检查点: {{ planData?.checkPointId }}</view>
|
||
</view>
|
||
<view class="flex text-gray margin-top">
|
||
<view>状态：</view>
|
||
<view>{{ planData?.status === 1 ? '进行中' : '已完成' }}</view>
|
||
</view>
|
||
<view class="flex margin-top align-center">
|
||
<view>完成进度：</view>
|
||
<view class="flex align-center margin-left-sm">
|
||
<view class="cu-progress round">
|
||
<view class="bg-green" :style="{ width: progressPercent + '%' }"></view>
|
||
</view>
|
||
<text class="margin-left-sm">{{ planData?.currentIndex || 0 }}/{{ planData?.totalCount || 0 }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="padding bg-white radius margin-top" >
|
||
<view class="text-bold">检查内容</view>
|
||
<view class="bg-gray padding radius">
|
||
<rich-text :nodes="planData?.point || ''"></rich-text>
|
||
</view>
|
||
</view>
|
||
<view class="padding bg-white radius margin-top">
|
||
<view class="text-bold">检查结果</view>
|
||
<view class="bg-gray padding radius">
|
||
{{ planData?.result || '暂无结果' }}
|
||
</view>
|
||
</view>
|
||
<view class="padding bg-white radius margin-top">
|
||
<view class="text-bold">备注</view>
|
||
<view class="bg-gray padding radius">
|
||
{{ planData?.remark || '暂无备注' }}
|
||
</view>
|
||
</view>
|
||
<view class="padding bg-white radius margin-top" v-if="planData?.isLast === false">
|
||
<view class="text-gray text-sm text-center">还有更多检查项</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue';
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
import { enterCheckPlan, getCheckTaskDetail } from '@/request/api.js';
|
||
|
||
const loading = ref(true);
|
||
const planData = ref(null);
|
||
|
||
// 计算进度百分比
|
||
const progressPercent = computed(() => {
|
||
if (!planData.value || !planData.value.totalCount) return 0;
|
||
return Math.round((planData.value.currentIndex / planData.value.totalCount) * 100);
|
||
});
|
||
|
||
// 先调用 start 接口获取 taskId，再获取详情
|
||
const fetchTaskDetail = async (oneTableId) => {
|
||
try {
|
||
// 第一步：调用 start 接口获取 taskId
|
||
const startRes = await enterCheckPlan(oneTableId);
|
||
if (startRes.code === 0 && startRes.data) {
|
||
const taskId = startRes.data.taskId;
|
||
|
||
// 第二步：用 taskId 获取任务详情
|
||
const detailRes = await getCheckTaskDetail(taskId);
|
||
if (detailRes.code === 0 && detailRes.data) {
|
||
planData.value = detailRes.data;
|
||
loading.value = false;
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('获取任务详情失败:', error);
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
onLoad((options) => {
|
||
if (options.id) {
|
||
fetchTaskDetail(options.id);
|
||
}
|
||
});
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
background: #EBF2FC;
|
||
}
|
||
.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 4rpx 4rpx 4rpx;
|
||
border: 2rpx solid #AAC5FC;
|
||
text-align: center;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
font-size: 28rpx;
|
||
color: #2667E9;
|
||
}
|
||
</style> |