<template>
|
<view class="inspection-detail">
|
<!-- 使用通用页面头部组件 -->
|
<PageHeader title="设备巡检详情" @back="goBack" />
|
|
<!-- 设备信息卡片 -->
|
<view class="device-card">
|
<view class="device-header">
|
<view class="device-icon">
|
<up-icon name="settings" size="24" color="#1890ff"></up-icon>
|
</view>
|
<view class="device-info">
|
<text class="device-name">{{ deviceInfo.deviceName }}</text>
|
<text class="device-code">{{ deviceInfo.deviceCode }}</text>
|
</view>
|
<view class="qr-scan" @click="scanDeviceQR">
|
<up-icon name="scan" size="20" color="#1890ff"></up-icon>
|
<text class="scan-text">扫码</text>
|
</view>
|
</view>
|
<view class="device-details">
|
<view class="detail-item">
|
<text class="label">位置：</text>
|
<text class="value">{{ deviceInfo.location }}</text>
|
</view>
|
<view class="detail-item">
|
<text class="label">巡检时间：</text>
|
<text class="value">{{ deviceInfo.inspectionTime }}</text>
|
</view>
|
<view class="detail-item">
|
<text class="label">负责人：</text>
|
<text class="value">{{ deviceInfo.inspector }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 巡检项目清单 -->
|
<view class="inspection-items">
|
<view class="section-title">
|
<up-icon name="list" size="18" color="#333"></up-icon>
|
<text class="title-text">巡检项目清单</text>
|
<text class="progress-text">({{ completedItems }}/{{ totalItems }})</text>
|
</view>
|
|
<view class="items-list">
|
<view
|
v-for="(item, index) in inspectionItems"
|
:key="index"
|
class="inspection-item"
|
:class="{ 'completed': item.completed, 'abnormal': item.isAbnormal }"
|
>
|
<view class="item-header" @click="toggleItem(index)">
|
<view class="item-left">
|
<view class="checkbox" :class="{ 'checked': item.completed }">
|
<up-icon v-if="item.completed" name="checkmark" size="14" color="#ffffff"></up-icon>
|
</view>
|
<text class="item-name">{{ item.name }}</text>
|
</view>
|
<view class="item-status">
|
<u-tag v-if="item.isAbnormal" type="error" size="mini">异常</u-tag>
|
<u-tag v-else-if="item.completed" type="success" size="mini">正常</u-tag>
|
<u-tag v-else type="info" size="mini">待检</u-tag>
|
</view>
|
</view>
|
|
<!-- 展开的详情内容 -->
|
<view v-if="item.expanded" class="item-content">
|
<view class="item-description">
|
<text class="desc-text">{{ item.description }}</text>
|
</view>
|
|
<!-- 巡检结果选择 -->
|
<view class="result-section">
|
<text class="section-label">巡检结果：</text>
|
<view class="result-options">
|
<u-radio-group v-model="item.result" @change="onResultChange(index, $event)">
|
<u-radio
|
v-for="option in resultOptions"
|
:key="option.value"
|
:label="option.value"
|
:name="option.label"
|
size="small"
|
>
|
{{ option.label }}
|
</u-radio>
|
</u-radio-group>
|
</view>
|
</view>
|
|
<!-- 异常情况描述 -->
|
<view v-if="item.result === 'abnormal'" class="abnormal-section">
|
<text class="section-label">异常描述：</text>
|
<up-textarea
|
v-model="item.abnormalDesc"
|
placeholder="请详细描述异常情况"
|
:maxlength="200"
|
count
|
height="80"
|
></up-textarea>
|
</view>
|
|
<!-- 图片上传 -->
|
<view class="upload-section">
|
<text class="section-label">现场照片：</text>
|
<up-upload
|
:fileList="item.images"
|
@afterRead="(event) => afterRead(event, index, 'images')"
|
@delete="(event) => deleteFile(event, index, 'images')"
|
name="images"
|
multiple
|
:maxCount="5"
|
:previewImage="true"
|
>
|
<view class="upload-btn">
|
<up-icon name="camera" size="20" color="#999"></up-icon>
|
<text class="upload-text">添加照片</text>
|
</view>
|
</up-upload>
|
</view>
|
|
<!-- 视频上传 -->
|
<view class="upload-section">
|
<text class="section-label">现场视频：</text>
|
<up-upload
|
:fileList="item.videos"
|
@afterRead="(event) => afterRead(event, index, 'videos')"
|
@delete="(event) => deleteFile(event, index, 'videos')"
|
name="videos"
|
:maxCount="2"
|
accept="video"
|
>
|
<view class="upload-btn">
|
<up-icon name="play-circle" size="20" color="#999"></up-icon>
|
<text class="upload-text">添加视频</text>
|
</view>
|
</up-upload>
|
</view>
|
|
<!-- 备注 -->
|
<view class="remark-section">
|
<text class="section-label">备注：</text>
|
<up-textarea
|
v-model="item.remark"
|
placeholder="请输入备注信息（可选）"
|
:maxlength="100"
|
count
|
height="60"
|
></up-textarea>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 底部操作按钮 -->
|
<view class="bottom-actions">
|
<u-button
|
type="primary"
|
size="large"
|
:disabled="!canSubmit"
|
@click="submitInspection"
|
:loading="submitting"
|
>
|
{{ allCompleted ? '提交巡检记录' : `继续巡检 (${completedItems}/${totalItems})` }}
|
</u-button>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, computed, onMounted } from 'vue'
|
import { onShow } from '@dcloudio/uni-app'
|
import PageHeader from '@/components/PageHeader.vue'
|
import { submitInspectionRecord } from '@/api/equipmentManagement/inspection'
|
import dayjs from 'dayjs'
|
|
// 设备信息
|
const deviceInfo = ref({})
|
|
// 巡检项目列表
|
const inspectionItems = ref([])
|
|
// 提交状态
|
const submitting = ref(false)
|
|
// 巡检结果选项
|
const resultOptions = [
|
{ label: '正常', value: 'normal' },
|
{ label: '异常', value: 'abnormal' }
|
]
|
|
// 显示提示信息
|
const showToast = (message) => {
|
uni.showToast({
|
title: message,
|
icon: 'none'
|
})
|
}
|
|
// 计算属性
|
const totalItems = computed(() => inspectionItems.value.length)
|
const completedItems = computed(() => inspectionItems.value.filter(item => item.completed).length)
|
const allCompleted = computed(() => completedItems.value === totalItems.value && totalItems.value > 0)
|
const canSubmit = computed(() => completedItems.value > 0)
|
|
// 返回上一页
|
const goBack = () => {
|
if (completedItems.value > 0) {
|
uni.showModal({
|
title: '提示',
|
content: '当前有未保存的巡检记录，确定要离开吗？',
|
success: (res) => {
|
if (res.confirm) {
|
uni.navigateBack()
|
}
|
}
|
})
|
} else {
|
uni.navigateBack()
|
}
|
}
|
|
// 扫描设备二维码
|
const scanDeviceQR = () => {
|
uni.scanCode({
|
success: (res) => {
|
console.log('扫码结果：', res)
|
if (res.result.includes(deviceInfo.value.deviceCode)) {
|
showToast('设备确认成功')
|
// 记录扫码时间
|
deviceInfo.value.scanTime = new Date().toISOString()
|
} else {
|
showToast('设备二维码不匹配')
|
}
|
},
|
fail: (err) => {
|
console.log('扫码失败：', err)
|
showToast('扫码失败')
|
}
|
})
|
}
|
|
// 切换巡检项目
|
const toggleItem = (index) => {
|
inspectionItems.value[index].expanded = !inspectionItems.value[index].expanded
|
}
|
|
// 巡检结果改变
|
const onResultChange = (index, value) => {
|
const item = inspectionItems.value[index]
|
item.result = value
|
item.completed = true
|
item.isAbnormal = value === 'abnormal'
|
|
// 如果选择正常，清空异常描述
|
if (value === 'normal') {
|
item.abnormalDesc = ''
|
}
|
}
|
|
// 文件上传后处理
|
const afterRead = async (event, index, type) => {
|
const { file } = event
|
const item = inspectionItems.value[index]
|
|
// 模拟上传过程
|
uni.showLoading({ title: '上传中...' })
|
|
try {
|
// 这里应该调用实际的上传API
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
|
// 添加到对应的文件列表
|
if (type === 'images') {
|
item.images = item.images || []
|
item.images.push({
|
url: file.url,
|
name: file.name,
|
size: file.size
|
})
|
} else if (type === 'videos') {
|
item.videos = item.videos || []
|
item.videos.push({
|
url: file.url,
|
name: file.name,
|
size: file.size
|
})
|
}
|
|
uni.hideLoading()
|
showToast('上传成功')
|
} catch (error) {
|
uni.hideLoading()
|
showToast('上传失败')
|
}
|
}
|
|
// 删除文件
|
const deleteFile = (event, index, type) => {
|
const item = inspectionItems.value[index]
|
if (type === 'images') {
|
item.images.splice(event.index, 1)
|
} else if (type === 'videos') {
|
item.videos.splice(event.index, 1)
|
}
|
}
|
|
// 提交巡检记录
|
const submitInspection = async () => {
|
if (!canSubmit.value) {
|
showToast('请至少完成一项巡检')
|
return
|
}
|
|
// 检查异常项目是否填写了描述
|
const abnormalItems = inspectionItems.value.filter(item => item.isAbnormal)
|
for (const item of abnormalItems) {
|
if (!item.abnormalDesc || item.abnormalDesc.trim() === '') {
|
showToast(`请填写"${item.name}"的异常描述`)
|
return
|
}
|
}
|
|
submitting.value = true
|
|
try {
|
const recordData = {
|
deviceId: deviceInfo.value.id,
|
deviceCode: deviceInfo.value.deviceCode,
|
inspectionDate: dayjs().format('YYYY-MM-DD'),
|
inspector: deviceInfo.value.inspector,
|
scanTime: deviceInfo.value.scanTime,
|
items: inspectionItems.value.map(item => ({
|
name: item.name,
|
result: item.result,
|
completed: item.completed,
|
isAbnormal: item.isAbnormal,
|
abnormalDesc: item.abnormalDesc,
|
images: item.images || [],
|
videos: item.videos || [],
|
remark: item.remark
|
})),
|
completedAt: new Date().toISOString()
|
}
|
|
// 模拟API调用
|
await new Promise(resolve => setTimeout(resolve, 2000))
|
|
// 实际API调用
|
// await submitInspectionRecord(recordData)
|
|
showToast('巡检记录提交成功')
|
|
// 返回列表页面
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 1500)
|
|
} catch (error) {
|
showToast('提交失败，请重试')
|
} finally {
|
submitting.value = false
|
}
|
}
|
|
// 初始化数据
|
const initData = () => {
|
// 从存储中获取当前巡检信息
|
const currentInspection = uni.getStorageSync('currentInspection')
|
if (currentInspection) {
|
deviceInfo.value = currentInspection
|
}
|
|
// 模拟巡检项目数据
|
inspectionItems.value = [
|
{
|
name: '设备外观检查',
|
description: '检查设备外观是否有损坏、锈蚀、变形等异常情况',
|
completed: false,
|
expanded: false,
|
result: '',
|
isAbnormal: false,
|
abnormalDesc: '',
|
images: [],
|
videos: [],
|
remark: ''
|
},
|
{
|
name: '运行状态检查',
|
description: '检查设备运行是否正常，有无异常声音、振动等',
|
completed: false,
|
expanded: false,
|
result: '',
|
isAbnormal: false,
|
abnormalDesc: '',
|
images: [],
|
videos: [],
|
remark: ''
|
},
|
{
|
name: '安全装置检查',
|
description: '检查各类安全装置是否完好，安全标识是否清晰',
|
completed: false,
|
expanded: false,
|
result: '',
|
isAbnormal: false,
|
abnormalDesc: '',
|
images: [],
|
videos: [],
|
remark: ''
|
},
|
{
|
name: '环境条件检查',
|
description: '检查设备周围环境是否符合要求，通风、照明等是否正常',
|
completed: false,
|
expanded: false,
|
result: '',
|
isAbnormal: false,
|
abnormalDesc: '',
|
images: [],
|
videos: [],
|
remark: ''
|
},
|
{
|
name: '仪表读数记录',
|
description: '记录相关仪表的读数，检查是否在正常范围内',
|
completed: false,
|
expanded: false,
|
result: '',
|
isAbnormal: false,
|
abnormalDesc: '',
|
images: [],
|
videos: [],
|
remark: ''
|
}
|
]
|
}
|
|
onMounted(() => {
|
initData()
|
})
|
|
onShow(() => {
|
// 页面显示时刷新数据
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.inspection-detail {
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
min-height: 100vh;
|
padding-bottom: 80px;
|
position: relative;
|
|
&::before {
|
content: '';
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
height: 200px;
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
|
z-index: 0;
|
}
|
}
|
|
.device-card {
|
background: rgba(255, 255, 255, 0.95);
|
backdrop-filter: blur(15px);
|
margin: 10px 20px;
|
border-radius: 20px;
|
padding: 24px;
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
position: relative;
|
z-index: 1;
|
transition: all 0.3s ease;
|
|
&:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
|
}
|
}
|
|
.device-header {
|
display: flex;
|
align-items: center;
|
gap: 16px;
|
margin-bottom: 20px;
|
}
|
|
.device-icon {
|
width: 56px;
|
height: 56px;
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
border-radius: 16px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
|
transition: all 0.3s ease;
|
|
&:hover {
|
transform: scale(1.05);
|
}
|
}
|
|
.device-info {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
gap: 6px;
|
}
|
|
.device-name {
|
font-size: 20px;
|
font-weight: 600;
|
color: #1a1a1a;
|
line-height: 1.3;
|
}
|
|
.device-code {
|
font-size: 13px;
|
color: #8c8c8c;
|
font-weight: 500;
|
padding: 4px 12px;
|
background: rgba(140, 140, 140, 0.1);
|
border-radius: 12px;
|
display: inline-block;
|
width: fit-content;
|
}
|
|
.qr-scan {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 6px;
|
padding: 12px 16px;
|
background: linear-gradient(135deg, #52c41a, #389e0d);
|
border-radius: 12px;
|
box-shadow: 0 4px 15px rgba(82, 196, 26, 0.3);
|
transition: all 0.3s ease;
|
|
&:hover {
|
transform: scale(1.05);
|
box-shadow: 0 6px 20px rgba(82, 196, 26, 0.4);
|
}
|
|
&:active {
|
transform: scale(0.98);
|
}
|
}
|
|
.scan-text {
|
font-size: 13px;
|
color: #ffffff;
|
font-weight: 600;
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
}
|
|
.device-details {
|
display: flex;
|
flex-direction: column;
|
gap: 12px;
|
background: rgba(248, 250, 252, 0.8);
|
border-radius: 16px;
|
padding: 16px;
|
backdrop-filter: blur(10px);
|
}
|
|
.detail-item {
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
padding: 8px 0;
|
transition: all 0.2s ease;
|
|
&:hover {
|
background: rgba(255, 255, 255, 0.5);
|
margin: 0 -8px;
|
padding-left: 8px;
|
padding-right: 8px;
|
border-radius: 8px;
|
}
|
}
|
|
.label {
|
color: #595959;
|
min-width: 80px;
|
font-weight: 500;
|
}
|
|
.value {
|
color: #262626;
|
flex: 1;
|
font-weight: 500;
|
}
|
|
.inspection-items {
|
margin: 10px 20px;
|
position: relative;
|
z-index: 1;
|
}
|
|
.section-title {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
padding: 20px 0;
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.95);
|
backdrop-filter: blur(15px);
|
border-radius: 16px;
|
padding: 20px;
|
margin-bottom: 16px;
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
}
|
|
.title-text {
|
font-size: 18px;
|
font-weight: 600;
|
color: #1a1a1a;
|
flex: 1;
|
}
|
|
.progress-text {
|
font-size: 15px;
|
font-weight: 600;
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
background-clip: text;
|
}
|
|
.items-list {
|
background: rgba(255, 255, 255, 0.95);
|
backdrop-filter: blur(15px);
|
border-radius: 20px;
|
overflow: hidden;
|
margin-top: 0;
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
}
|
|
.inspection-item {
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
transition: all 0.3s ease;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
&.completed {
|
background: rgba(82, 196, 26, 0.05);
|
border-left: 4px solid #52c41a;
|
}
|
|
&.abnormal {
|
background: rgba(255, 77, 79, 0.05);
|
border-left: 4px solid #ff4d4f;
|
}
|
|
&:hover {
|
background: rgba(102, 126, 234, 0.05);
|
}
|
}
|
|
.item-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 15px;
|
cursor: pointer;
|
}
|
|
.item-left {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
flex: 1;
|
}
|
|
.checkbox {
|
width: 20px;
|
height: 20px;
|
border: 2px solid #d9d9d9;
|
border-radius: 4px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
transition: all 0.3s;
|
|
&.checked {
|
background: #52c41a;
|
border-color: #52c41a;
|
}
|
}
|
|
.item-name {
|
font-size: 15px;
|
color: #333;
|
font-weight: 500;
|
}
|
|
.item-status {
|
flex-shrink: 0;
|
}
|
|
.item-content {
|
padding: 0 15px 20px;
|
border-top: 1px solid #f5f5f5;
|
}
|
|
.item-description {
|
padding: 15px 0;
|
}
|
|
.desc-text {
|
font-size: 14px;
|
color: #666;
|
line-height: 1.5;
|
}
|
|
.result-section,
|
.abnormal-section,
|
.upload-section,
|
.remark-section {
|
margin-top: 15px;
|
}
|
|
.section-label {
|
display: block;
|
font-size: 14px;
|
color: #333;
|
margin-bottom: 8px;
|
font-weight: 500;
|
}
|
|
.result-options {
|
display: flex;
|
gap: 20px;
|
}
|
|
.upload-btn {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
width: 88px;
|
height: 88px;
|
border: 2px dashed rgba(102, 126, 234, 0.3);
|
border-radius: 16px;
|
background: rgba(102, 126, 234, 0.05);
|
gap: 8px;
|
transition: all 0.3s ease;
|
|
&:hover {
|
border-color: rgba(102, 126, 234, 0.5);
|
background: rgba(102, 126, 234, 0.1);
|
transform: translateY(-2px);
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
}
|
|
&:active {
|
transform: translateY(0);
|
}
|
}
|
|
.upload-text {
|
font-size: 13px;
|
color: #667eea;
|
font-weight: 500;
|
}
|
|
.bottom-actions {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
background: rgba(255, 255, 255, 0.95);
|
backdrop-filter: blur(20px);
|
padding: 20px;
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.1);
|
z-index: 10;
|
|
button {
|
height: 48px;
|
border-radius: 16px;
|
font-weight: 600;
|
font-size: 16px;
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
|
&:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
}
|
|
&:active {
|
transform: translateY(0);
|
}
|
}
|
}
|
</style>
|
