隐患详情重新设计，检查计划重新设计成做题排查式
This commit is contained in:
王利强
284
pages/Inspectionresult/list.vue
Normal file
284
pages/Inspectionresult/list.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user