<template>
|
<view class="sales-account">
|
<!-- 使用通用页面头部组件 -->
|
<PageHeader title="结果验证" @back="goBack" />
|
|
<!-- 工单信息卡片 -->
|
<view class="work-order-card">
|
<view class="order-header">
|
<view class="order-left">
|
<view class="order-icon">
|
<up-icon name="checkmark-circle" size="20" color="#ffffff"></up-icon>
|
</view>
|
<view class="order-details">
|
<text class="order-title">{{ workOrder.deviceName }}</text>
|
<text class="order-subtitle">工单号: {{ workOrder.orderNumber }}</text>
|
</view>
|
</view>
|
<view class="order-status">
|
<u-tag :type="getStatusType(workOrder.status)" size="small">
|
{{ getStatusText(workOrder.status) }}
|
</u-tag>
|
</view>
|
</view>
|
|
<view class="order-meta">
|
<view class="meta-row">
|
<view class="meta-item">
|
<text class="meta-label">维修人员:</text>
|
<text class="meta-value">{{ workOrder.technician }}</text>
|
</view>
|
<view class="meta-item">
|
<text class="meta-label">开始时间:</text>
|
<text class="meta-value">{{ formatDate(workOrder.startTime) }}</text>
|
</view>
|
</view>
|
<view class="meta-row">
|
<view class="meta-item">
|
<text class="meta-label">预计工时:</text>
|
<text class="meta-value">{{ workOrder.estimatedHours }}小时</text>
|
</view>
|
<view class="meta-item">
|
<text class="meta-label">实际工时:</text>
|
<text class="meta-value">{{ workOrder.actualHours }}小时</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 进度指示器 -->
|
<view class="progress-indicator">
|
<view class="progress-steps">
|
<view
|
v-for="(step, index) in progressSteps"
|
:key="index"
|
class="progress-step"
|
:class="{
|
active: currentStep >= index,
|
completed: currentStep > index,
|
current: currentStep === index
|
}"
|
>
|
<view class="step-circle">
|
<up-icon
|
v-if="currentStep > index"
|
name="checkmark"
|
size="12"
|
color="#ffffff"
|
></up-icon>
|
<text v-else class="step-number">{{ index + 1 }}</text>
|
</view>
|
<text class="step-label">{{ step.label }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 检修记录确认 -->
|
<view v-if="currentStep === 0" class="content-section">
|
<view class="section-header">
|
<text class="section-title">检修记录确认</text>
|
<view class="record-status">
|
<text class="status-text">记录已完成</text>
|
</view>
|
</view>
|
|
<view class="record-summary">
|
<view class="summary-header">
|
<view class="header-icon">
|
<up-icon name="list-dot" size="20" color="#2979ff"></up-icon>
|
</view>
|
<text class="summary-title">检修记录摘要</text>
|
<view class="completion-badge">
|
<up-icon name="checkmark-circle" size="16" color="#4caf50"></up-icon>
|
<text class="badge-text">已完成</text>
|
</view>
|
</view>
|
|
<view class="summary-content">
|
<view class="summary-card">
|
<view class="card-header">
|
<up-icon name="wrench" size="16" color="#ff6b35"></up-icon>
|
<text class="card-title">维修内容</text>
|
</view>
|
<text class="card-content">更换主轴轴承，调整主轴间隙，确保设备精度达标</text>
|
</view>
|
|
<view class="summary-card">
|
<view class="card-header">
|
<up-icon name="grid" size="16" color="#9c27b0"></up-icon>
|
<text class="card-title">使用配件</text>
|
</view>
|
<view class="parts-list">
|
<view class="part-chip">NSK轴承 ×2</view>
|
<view class="part-chip">润滑脂 ×1</view>
|
<view class="part-chip">螺栓 ×8</view>
|
</view>
|
</view>
|
|
<view class="summary-card">
|
<view class="card-header">
|
<up-icon name="clock" size="16" color="#2196f3"></up-icon>
|
<text class="card-title">维修时间</text>
|
</view>
|
<view class="time-range">
|
<view class="time-item">
|
<text class="time-label">开始:</text>
|
<text class="time-value">{{ formatDate(workOrder.startTime) }}</text>
|
</view>
|
<view class="time-divider"></view>
|
<view class="time-item">
|
<text class="time-label">完成:</text>
|
<text class="time-value">{{ formatDate(new Date()) }}</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="summary-card result-card">
|
<view class="card-header">
|
<up-icon name="checkmark-circle" size="16" color="#4caf50"></up-icon>
|
<text class="card-title">维修结果</text>
|
</view>
|
<text class="result-content">设备功能恢复正常，运行平稳，各项指标达到预期要求</text>
|
<view class="result-status">
|
<u-tag type="success" size="mini">验收合格</u-tag>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="section-actions">
|
<u-button
|
type="primary"
|
@click="completeRecord"
|
>
|
确认记录
|
</u-button>
|
</view>
|
</view>
|
|
<!-- 自检提交 -->
|
<view v-if="currentStep === 1" class="content-section">
|
<view class="section-header">
|
<text class="section-title">自检报告</text>
|
<view class="inspection-status">
|
<text class="status-text">{{ completedInspections }}/{{ inspectionItems.length }} 已检查</text>
|
</view>
|
</view>
|
|
<view class="inspection-form">
|
<view class="inspection-items">
|
<view v-for="item in inspectionItems" :key="item.id" class="inspection-item">
|
<view class="item-header">
|
<text class="item-title">{{ item.title }}</text>
|
<view class="item-status">
|
<u-tag
|
:type="item.result === 'pass' ? 'success' : item.result === 'fail' ? 'error' : 'info'"
|
size="mini"
|
>
|
{{ getInspectionResultText(item.result) }}
|
</u-tag>
|
</view>
|
</view>
|
|
<view class="item-content">
|
<text class="item-description">{{ item.description }}</text>
|
|
<view class="item-options">
|
<view class="option-group">
|
<text class="option-label">检查结果:</text>
|
<view class="radio-group">
|
<view
|
v-for="option in inspectionOptions"
|
:key="option.value"
|
class="radio-option"
|
:class="{ active: item.result === option.value }"
|
@click="setInspectionResult(item.id, option.value)"
|
>
|
<view class="radio-circle">
|
<view v-if="item.result === option.value" class="radio-dot"></view>
|
</view>
|
<text class="radio-text">{{ option.label }}</text>
|
</view>
|
</view>
|
</view>
|
|
<view v-if="item.result" class="option-group">
|
<text class="option-label">备注说明:</text>
|
<up-textarea
|
v-model="item.remark"
|
placeholder="请输入检查备注..."
|
:maxlength="200"
|
count
|
height="80"
|
></up-textarea>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="inspection-summary">
|
<view class="summary-header">
|
<text class="summary-title">检查总结</text>
|
</view>
|
<up-textarea
|
v-model="inspectionSummary"
|
placeholder="请输入整体检查总结..."
|
:maxlength="500"
|
count
|
height="120"
|
></up-textarea>
|
</view>
|
</view>
|
|
<view class="section-actions">
|
<u-button
|
type="primary"
|
@click="submitInspection"
|
:disabled="!canSubmitInspection"
|
>
|
提交自检
|
</u-button>
|
</view>
|
</view>
|
|
<!-- 主管验收 -->
|
<view v-if="currentStep === 2" class="content-section">
|
<view class="section-header">
|
<text class="section-title">主管验收</text>
|
<view class="supervisor-info">
|
<text class="supervisor-name">验收人: {{ workOrder.supervisor }}</text>
|
</view>
|
</view>
|
|
<!-- 验收检查项 -->
|
<view class="acceptance-checks">
|
<text class="checks-title">🔍 验收检查项</text>
|
<view class="checks-list">
|
<view v-for="check in acceptanceChecks" :key="check.id" class="check-item">
|
<view class="check-header" @click="toggleCheck(check.id)">
|
<view class="check-icon">
|
<up-icon
|
:name="check.checked ? 'checkmark-circle' : 'close-circle'"
|
:color="check.checked ? '#4caf50' : '#ccc'"
|
size="18"
|
></up-icon>
|
</view>
|
<text class="check-title">{{ check.title }}</text>
|
</view>
|
<text class="check-description">{{ check.description }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 验收结果 -->
|
<view class="acceptance-result">
|
<text class="result-title">验收结果</text>
|
<view class="result-options">
|
<view
|
v-for="option in acceptanceOptions"
|
:key="option.value"
|
class="result-option"
|
:class="{ active: acceptanceResult === option.value }"
|
@click="setAcceptanceResult(option.value)"
|
>
|
<view class="option-icon">
|
<up-icon
|
:name="option.icon"
|
:color="acceptanceResult === option.value ? '#ffffff' : '#666'"
|
size="16"
|
></up-icon>
|
</view>
|
<text class="option-text">{{ option.label }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 验收意见 -->
|
<view class="acceptance-opinion">
|
<text class="opinion-title">验收意见</text>
|
<up-textarea
|
v-model="acceptanceOpinion"
|
placeholder="请输入验收意见..."
|
:maxlength="300"
|
count
|
height="100"
|
></up-textarea>
|
</view>
|
|
<view class="section-actions">
|
<u-button
|
type="success"
|
@click="submitAcceptance"
|
:disabled="!canSubmitAcceptance"
|
>
|
提交验收
|
</u-button>
|
<u-button
|
type="error"
|
plain
|
@click="rejectWork"
|
v-if="acceptanceResult === 'reject'"
|
>
|
退回重做
|
</u-button>
|
</view>
|
</view>
|
|
<!-- 工单关闭 -->
|
<view v-if="currentStep === 3" class="content-section">
|
<view class="completion-summary">
|
<view class="summary-icon">
|
<up-icon name="checkmark-circle" size="48" color="#4caf50"></up-icon>
|
</view>
|
<text class="summary-title">工单完成</text>
|
<text class="summary-desc">所有检查项已通过，工单即将关闭</text>
|
</view>
|
|
<!-- 完成统计 -->
|
<view class="completion-stats">
|
<view class="stat-item">
|
<text class="stat-label">实际工时</text>
|
<text class="stat-value">{{ workOrder.actualHours }}小时</text>
|
</view>
|
<view class="stat-item">
|
<text class="stat-label">使用配件</text>
|
<text class="stat-value">{{ usedParts.length }}项</text>
|
</view>
|
<view class="stat-item">
|
<text class="stat-label">检查项目</text>
|
<text class="stat-value">{{ inspectionItems.length }}项</text>
|
</view>
|
<view class="stat-item">
|
<text class="stat-label">验收结果</text>
|
<text class="stat-value success">通过</text>
|
</view>
|
</view>
|
|
<!-- 使用配件清单 -->
|
<view class="used-parts">
|
<text class="parts-title">使用配件清单</text>
|
<view class="parts-list">
|
<view v-for="part in usedParts" :key="part.id" class="part-item">
|
<text class="part-name">{{ part.name }}</text>
|
<text class="part-quantity">{{ part.quantity }}{{ part.unit }}</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="section-actions">
|
<u-button
|
type="success"
|
size="large"
|
@click="closeWorkOrder"
|
>
|
一键关闭工单
|
</u-button>
|
</view>
|
</view>
|
|
<!-- 已关闭状态 -->
|
<view v-if="currentStep === 4" class="content-section">
|
<view class="closed-status">
|
<view class="status-icon">
|
<up-icon name="checkmark-circle" size="64" color="#4caf50"></up-icon>
|
</view>
|
<text class="status-title">工单已关闭</text>
|
<text class="status-desc">维修工作已完成，工单已成功关闭</text>
|
|
<view class="close-info">
|
<view class="info-item">
|
<text class="info-label">关闭时间:</text>
|
<text class="info-value">{{ formatDate(workOrder.closeTime) }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">关闭人:</text>
|
<text class="info-value">{{ workOrder.supervisor }}</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="section-actions">
|
<u-button
|
type="primary"
|
plain
|
@click="viewReport"
|
>
|
查看完整报告
|
</u-button>
|
<u-button
|
type="info"
|
plain
|
@click="exportReport"
|
>
|
导出报告
|
</u-button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, computed, onMounted } from 'vue'
|
import { onShow } from '@dcloudio/uni-app'
|
import PageHeader from '@/components/PageHeader.vue'
|
|
const showToast = (message) => {
|
uni.showToast({
|
title: message,
|
icon: 'none'
|
})
|
}
|
|
// 工单信息
|
const workOrder = ref({
|
id: 1,
|
orderNumber: 'WO-2024-001',
|
deviceName: '数控车床CK6140',
|
deviceCode: 'CNC-001',
|
status: 'in_verification',
|
technician: '李师傅',
|
supervisor: '张主管',
|
startTime: '2024-01-15 09:00:00',
|
estimatedHours: 4,
|
actualHours: 3.5,
|
closeTime: null
|
})
|
|
// 进度步骤
|
const progressSteps = ref([
|
{ label: '确认记录', key: 'confirm' },
|
{ label: '自检提交', key: 'inspection' },
|
{ label: '主管验收', key: 'acceptance' },
|
{ label: '关闭工单', key: 'close' }
|
])
|
|
const currentStep = ref(0)
|
|
|
|
// 自检项目
|
const inspectionItems = ref([
|
{
|
id: 1,
|
title: '设备功能测试',
|
description: '检查设备各项功能是否正常运行',
|
result: 'pass',
|
remark: '主轴运转平稳，精度符合要求'
|
},
|
{
|
id: 2,
|
title: '安全防护检查',
|
description: '确认所有安全防护装置正常工作',
|
result: 'pass',
|
remark: '防护罩安装到位，急停按钮正常'
|
},
|
{
|
id: 3,
|
title: '润滑系统检查',
|
description: '检查润滑油位和润滑系统工作状态',
|
result: 'pass',
|
remark: '润滑油位正常，自动润滑系统工作正常'
|
},
|
{
|
id: 4,
|
title: '电气系统检查',
|
description: '检查电气连接和控制系统功能',
|
result: 'pass',
|
remark: '电气连接牢固，控制系统响应正常'
|
},
|
{
|
id: 5,
|
title: '清洁整理',
|
description: '确认工作区域清洁整理完毕',
|
result: 'pass',
|
remark: '工作区域已清理干净，工具归位'
|
}
|
])
|
|
const inspectionSummary = ref('本次维修更换了主轴轴承，调整了主轴间隙，设备运行状态良好，各项功能测试正常，达到预期维修效果。')
|
|
// 检查选项
|
const inspectionOptions = ref([
|
{ label: '通过', value: 'pass' },
|
{ label: '不通过', value: 'fail' },
|
{ label: '待检查', value: 'pending' }
|
])
|
|
// 验收检查项
|
const acceptanceChecks = ref([
|
{
|
id: 1,
|
title: '维修记录完整性',
|
description: '检查维修记录是否完整、准确',
|
checked: true
|
},
|
{
|
id: 2,
|
title: '设备功能验证',
|
description: '现场验证设备功能是否恢复正常',
|
checked: true
|
},
|
{
|
id: 3,
|
title: '安全标准符合性',
|
description: '确认维修后设备符合安全标准',
|
checked: true
|
},
|
{
|
id: 4,
|
title: '配件使用合规性',
|
description: '检查使用配件是否符合规范要求',
|
checked: true
|
},
|
{
|
id: 5,
|
title: '现场清理情况',
|
description: '确认维修现场清理干净',
|
checked: true
|
}
|
])
|
|
// 验收选项
|
const acceptanceOptions = ref([
|
{ label: '验收通过', value: 'pass', icon: 'checkmark-circle' },
|
{ label: '验收不通过', value: 'reject', icon: 'close-circle' }
|
])
|
|
const acceptanceResult = ref('pass')
|
const acceptanceOpinion = ref('维修质量良好，设备功能恢复正常，现场清理干净，同意验收通过。')
|
|
// 使用配件
|
const usedParts = ref([
|
{ id: 1, name: '主轴轴承 NSK 7020C', quantity: 2, unit: '个' },
|
{ id: 2, name: '润滑脂 高温轴承润滑脂', quantity: 1, unit: '支' },
|
{ id: 3, name: '螺栓 M8×25', quantity: 8, unit: '个' }
|
])
|
|
// 计算属性
|
|
const completedInspections = computed(() => {
|
return inspectionItems.value.filter(item => item.result && item.result !== 'pending').length
|
})
|
|
const canSubmitInspection = computed(() => {
|
return completedInspections.value === inspectionItems.value.length && inspectionSummary.value.trim()
|
})
|
|
const canSubmitAcceptance = computed(() => {
|
return acceptanceResult.value && acceptanceOpinion.value.trim() &&
|
acceptanceChecks.value.every(check => check.checked)
|
})
|
|
// 返回上一页
|
const goBack = () => {
|
uni.navigateBack()
|
}
|
|
// 格式化日期
|
const formatDate = (dateStr) => {
|
if (!dateStr) return ''
|
const date = new Date(dateStr)
|
const year = date.getFullYear()
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
const day = String(date.getDate()).padStart(2, '0')
|
const hours = String(date.getHours()).padStart(2, '0')
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
return `${year}-${month}-${day} ${hours}:${minutes}`
|
}
|
|
// 获取状态类型
|
const getStatusType = (status) => {
|
const statusMap = {
|
'pending': 'warning',
|
'in_progress': 'primary',
|
'in_verification': 'info',
|
'completed': 'success',
|
'closed': 'success'
|
}
|
return statusMap[status] || 'info'
|
}
|
|
// 获取状态文本
|
const getStatusText = (status) => {
|
const statusMap = {
|
'pending': '待开始',
|
'in_progress': '进行中',
|
'in_verification': '验证中',
|
'completed': '已完成',
|
'closed': '已关闭'
|
}
|
return statusMap[status] || '未知'
|
}
|
|
// 确认记录
|
const completeRecord = () => {
|
currentStep.value = 1
|
showToast('检修记录已确认')
|
}
|
|
// 设置检查结果
|
const setInspectionResult = (itemId, result) => {
|
const item = inspectionItems.value.find(item => item.id === itemId)
|
if (item) {
|
item.result = result
|
}
|
}
|
|
// 获取检查结果文本
|
const getInspectionResultText = (result) => {
|
const resultMap = {
|
'pass': '通过',
|
'fail': '不通过',
|
'pending': '待检查'
|
}
|
return resultMap[result] || '未检查'
|
}
|
|
// 提交自检
|
const submitInspection = () => {
|
const failedItems = inspectionItems.value.filter(item => item.result === 'fail')
|
if (failedItems.length > 0) {
|
uni.showModal({
|
title: '检查不通过',
|
content: `有${failedItems.length}项检查不通过，确认提交？`,
|
success: (res) => {
|
if (res.confirm) {
|
currentStep.value = 2
|
showToast('自检报告已提交')
|
}
|
}
|
})
|
} else {
|
currentStep.value = 2
|
showToast('自检报告已提交')
|
}
|
}
|
|
// 切换验收检查项
|
const toggleCheck = (checkId) => {
|
const check = acceptanceChecks.value.find(c => c.id === checkId)
|
if (check) {
|
check.checked = !check.checked
|
}
|
}
|
|
// 设置验收结果
|
const setAcceptanceResult = (result) => {
|
acceptanceResult.value = result
|
}
|
|
// 提交验收
|
const submitAcceptance = () => {
|
if (acceptanceResult.value === 'pass') {
|
currentStep.value = 3
|
workOrder.value.status = 'completed'
|
showToast('验收通过，进入工单关闭流程')
|
} else {
|
showToast('验收不通过，工单将退回重做')
|
}
|
}
|
|
// 退回重做
|
const rejectWork = () => {
|
uni.showModal({
|
title: '退回重做',
|
content: '确认退回工单重新维修？',
|
success: (res) => {
|
if (res.confirm) {
|
workOrder.value.status = 'in_progress'
|
currentStep.value = 0
|
showToast('工单已退回，请重新维修')
|
}
|
}
|
})
|
}
|
|
// 关闭工单
|
const closeWorkOrder = () => {
|
uni.showModal({
|
title: '关闭工单',
|
content: '确认关闭工单？关闭后将无法修改。',
|
success: (res) => {
|
if (res.confirm) {
|
workOrder.value.status = 'closed'
|
workOrder.value.closeTime = new Date().toISOString()
|
currentStep.value = 4
|
showToast('工单已成功关闭')
|
}
|
}
|
})
|
}
|
|
// 查看报告
|
const viewReport = () => {
|
showToast('查看完整维修报告')
|
}
|
|
// 导出报告
|
const exportReport = () => {
|
showToast('报告导出功能开发中')
|
}
|
|
onMounted(() => {
|
// 页面加载时的初始化逻辑
|
})
|
|
onShow(() => {
|
// 页面显示时的逻辑
|
})
|
</script>
|
|
<style scoped lang="scss">
|
@import '@/styles/sales-common.scss';
|
|
// 结果验证特有样式
|
.sales-account {
|
padding-bottom: 20px;
|
}
|
|
// 工单信息卡片
|
.work-order-card {
|
margin: 20px;
|
background: #ffffff;
|
border-radius: 12px;
|
padding: 16px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
}
|
|
.order-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 12px;
|
}
|
|
.order-left {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
}
|
|
.order-icon {
|
width: 40px;
|
height: 40px;
|
background: #4caf50;
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.order-details {
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
}
|
|
.order-title {
|
font-size: 16px;
|
font-weight: 500;
|
color: #333;
|
}
|
|
.order-subtitle {
|
font-size: 12px;
|
color: #666;
|
}
|
|
.order-meta {
|
display: flex;
|
flex-direction: column;
|
gap: 8px;
|
}
|
|
.meta-row {
|
display: flex;
|
gap: 20px;
|
}
|
|
.meta-item {
|
display: flex;
|
align-items: center;
|
gap: 4px;
|
flex: 1;
|
}
|
|
.meta-label {
|
font-size: 12px;
|
color: #777;
|
min-width: 60px;
|
}
|
|
.meta-value {
|
font-size: 12px;
|
color: #333;
|
}
|
|
// 进度指示器
|
.progress-indicator {
|
margin: 20px;
|
background: #ffffff;
|
border-radius: 12px;
|
padding: 20px 16px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
}
|
|
.progress-steps {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
position: relative;
|
|
&::before {
|
content: '';
|
position: absolute;
|
top: 16px;
|
left: 16px;
|
right: 16px;
|
height: 2px;
|
background: #f0f0f0;
|
z-index: 1;
|
}
|
}
|
|
.progress-step {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 8px;
|
position: relative;
|
z-index: 2;
|
|
&.active {
|
.step-circle {
|
background: #2979ff;
|
border-color: #2979ff;
|
color: #ffffff;
|
}
|
|
.step-label {
|
color: #2979ff;
|
font-weight: 500;
|
}
|
}
|
|
&.completed {
|
.step-circle {
|
background: #4caf50;
|
border-color: #4caf50;
|
}
|
}
|
|
&.current {
|
.step-circle {
|
background: #2979ff;
|
border-color: #2979ff;
|
box-shadow: 0 0 0 4px rgba(41, 121, 255, 0.2);
|
}
|
}
|
}
|
|
.step-circle {
|
width: 32px;
|
height: 32px;
|
border-radius: 50%;
|
background: #f5f5f5;
|
border: 2px solid #e0e0e0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
transition: all 0.3s ease;
|
}
|
|
.step-number {
|
font-size: 12px;
|
font-weight: 500;
|
color: #666;
|
}
|
|
.step-label {
|
font-size: 11px;
|
color: #666;
|
text-align: center;
|
}
|
|
// 内容区域
|
.content-section {
|
margin: 20px;
|
background: #ffffff;
|
border-radius: 12px;
|
padding: 16px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
}
|
|
.section-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 16px;
|
}
|
|
.section-title {
|
font-size: 16px;
|
font-weight: 500;
|
color: #333;
|
}
|
|
.record-status,
|
.inspection-status {
|
display: flex;
|
align-items: center;
|
}
|
|
.status-text {
|
font-size: 12px;
|
color: #666;
|
}
|
|
// 记录摘要
|
.record-summary {
|
margin-bottom: 20px;
|
background: #ffffff;
|
border-radius: 12px;
|
border: 1px solid #e8f4fd;
|
overflow: hidden;
|
}
|
|
.summary-header {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
padding: 16px;
|
background: linear-gradient(135deg, #f8fbff 0%, #e8f4fd 100%);
|
border-bottom: 1px solid #e0e0e0;
|
}
|
|
.header-icon {
|
width: 36px;
|
height: 36px;
|
background: #ffffff;
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
box-shadow: 0 2px 4px rgba(41, 121, 255, 0.1);
|
}
|
|
.summary-title {
|
font-size: 16px;
|
font-weight: 600;
|
color: #333;
|
flex: 1;
|
}
|
|
.completion-badge {
|
display: flex;
|
align-items: center;
|
gap: 4px;
|
padding: 4px 8px;
|
background: #f0f8f0;
|
border-radius: 12px;
|
border: 1px solid #c8e6c9;
|
}
|
|
.badge-text {
|
font-size: 11px;
|
color: #2e7d32;
|
font-weight: 500;
|
}
|
|
.summary-content {
|
padding: 16px;
|
display: flex;
|
flex-direction: column;
|
gap: 16px;
|
}
|
|
.summary-card {
|
background: #fafbfc;
|
border-radius: 8px;
|
padding: 12px;
|
border-left: 3px solid #e0e0e0;
|
transition: all 0.3s ease;
|
|
&:hover {
|
background: #f5f7fa;
|
border-left-color: #2979ff;
|
}
|
}
|
|
.card-header {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
margin-bottom: 8px;
|
}
|
|
.card-title {
|
font-size: 13px;
|
font-weight: 500;
|
color: #333;
|
}
|
|
.card-content {
|
font-size: 12px;
|
color: #555;
|
line-height: 1.5;
|
}
|
|
// 配件列表
|
.parts-list {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 6px;
|
}
|
|
.part-chip {
|
padding: 4px 8px;
|
background: #e3f2fd;
|
border-radius: 12px;
|
font-size: 11px;
|
color: #1976d2;
|
font-weight: 500;
|
border: 1px solid #bbdefb;
|
}
|
|
// 时间范围
|
.time-range {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
}
|
|
.time-item {
|
display: flex;
|
flex-direction: column;
|
gap: 2px;
|
flex: 1;
|
}
|
|
.time-label {
|
font-size: 10px;
|
color: #999;
|
font-weight: 500;
|
}
|
|
.time-value {
|
font-size: 11px;
|
color: #333;
|
font-weight: 500;
|
}
|
|
.time-divider {
|
width: 2px;
|
height: 20px;
|
background: #e0e0e0;
|
border-radius: 1px;
|
}
|
|
// 结果卡片
|
.result-card {
|
border-left-color: #4caf50 !important;
|
background: #f8fff8;
|
|
&:hover {
|
background: #f0f8f0;
|
}
|
}
|
|
.result-content {
|
font-size: 12px;
|
color: #2e7d32;
|
line-height: 1.5;
|
margin-bottom: 8px;
|
}
|
|
.result-status {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
// 检查表单
|
.inspection-form {
|
margin-bottom: 20px;
|
}
|
|
.inspection-items {
|
display: flex;
|
flex-direction: column;
|
gap: 16px;
|
margin-bottom: 20px;
|
}
|
|
.inspection-item {
|
padding: 16px;
|
background: #f8f9fa;
|
border-radius: 8px;
|
border: 1px solid #e0e0e0;
|
}
|
|
.item-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 8px;
|
}
|
|
.item-title {
|
font-size: 14px;
|
font-weight: 500;
|
color: #333;
|
}
|
|
.item-content {
|
display: flex;
|
flex-direction: column;
|
gap: 12px;
|
}
|
|
.item-description {
|
font-size: 12px;
|
color: #666;
|
line-height: 1.4;
|
}
|
|
.item-options {
|
display: flex;
|
flex-direction: column;
|
gap: 12px;
|
}
|
|
.option-group {
|
display: flex;
|
flex-direction: column;
|
gap: 8px;
|
}
|
|
.option-label {
|
font-size: 12px;
|
color: #777;
|
font-weight: 500;
|
}
|
|
.radio-group {
|
display: flex;
|
gap: 16px;
|
}
|
|
.radio-option {
|
display: flex;
|
align-items: center;
|
gap: 6px;
|
cursor: pointer;
|
|
&.active {
|
.radio-text {
|
color: #2979ff;
|
font-weight: 500;
|
}
|
}
|
}
|
|
.radio-circle {
|
width: 16px;
|
height: 16px;
|
border: 2px solid #e0e0e0;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
transition: all 0.3s ease;
|
|
.radio-option.active & {
|
border-color: #2979ff;
|
}
|
}
|
|
.radio-dot {
|
width: 8px;
|
height: 8px;
|
background: #2979ff;
|
border-radius: 50%;
|
}
|
|
.radio-text {
|
font-size: 12px;
|
color: #666;
|
}
|
|
// 检查总结
|
.inspection-summary {
|
padding: 16px;
|
background: #f0f8f0;
|
border-radius: 8px;
|
border-left: 4px solid #4caf50;
|
}
|
|
.summary-header {
|
margin-bottom: 8px;
|
}
|
|
.summary-title {
|
font-size: 13px;
|
font-weight: 500;
|
color: #2e7d32;
|
}
|
|
// 验收检查
|
.acceptance-checks {
|
margin-bottom: 20px;
|
padding: 16px;
|
background: #f8f9fa;
|
border-radius: 8px;
|
}
|
|
.checks-title {
|
font-size: 14px;
|
font-weight: 500;
|
color: #333;
|
margin-bottom: 12px;
|
}
|
|
.checks-list {
|
display: flex;
|
flex-direction: column;
|
gap: 12px;
|
}
|
|
.check-item {
|
padding: 12px;
|
background: #ffffff;
|
border-radius: 6px;
|
border: 1px solid #e0e0e0;
|
}
|
|
.check-header {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
margin-bottom: 4px;
|
cursor: pointer;
|
}
|
|
.check-icon {
|
flex-shrink: 0;
|
}
|
|
.check-title {
|
font-size: 13px;
|
font-weight: 500;
|
color: #333;
|
}
|
|
.check-description {
|
font-size: 11px;
|
color: #666;
|
margin-left: 26px;
|
}
|
|
// 验收结果
|
.acceptance-result {
|
margin-bottom: 20px;
|
}
|
|
.result-title {
|
font-size: 14px;
|
font-weight: 500;
|
color: #333;
|
margin-bottom: 12px;
|
}
|
|
.result-options {
|
display: flex;
|
gap: 12px;
|
}
|
|
.result-option {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: 8px;
|
padding: 12px;
|
border: 2px solid #e0e0e0;
|
border-radius: 8px;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
|
&.active {
|
background: #4caf50;
|
border-color: #4caf50;
|
|
.option-text {
|
color: #ffffff;
|
font-weight: 500;
|
}
|
}
|
|
&:first-child.active {
|
background: #4caf50;
|
border-color: #4caf50;
|
}
|
|
&:last-child.active {
|
background: #f44336;
|
border-color: #f44336;
|
}
|
}
|
|
.option-icon {
|
flex-shrink: 0;
|
}
|
|
.option-text {
|
font-size: 13px;
|
color: #666;
|
}
|
|
// 验收意见
|
.acceptance-opinion {
|
margin-bottom: 20px;
|
}
|
|
.opinion-title {
|
font-size: 14px;
|
font-weight: 500;
|
color: #333;
|
margin-bottom: 8px;
|
}
|
|
// 完成摘要
|
.completion-summary {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
text-align: center;
|
margin-bottom: 24px;
|
padding: 24px 16px;
|
}
|
|
.summary-icon {
|
margin-bottom: 12px;
|
}
|
|
.summary-title {
|
font-size: 18px;
|
font-weight: 500;
|
color: #333;
|
margin-bottom: 4px;
|
}
|
|
.summary-desc {
|
font-size: 13px;
|
color: #666;
|
}
|
|
// 完成统计
|
.completion-stats {
|
display: grid;
|
grid-template-columns: 1fr 1fr;
|
gap: 12px;
|
margin-bottom: 20px;
|
}
|
|
.stat-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 16px;
|
background: #f8f9fa;
|
border-radius: 8px;
|
}
|
|
.stat-label {
|
font-size: 12px;
|
color: #777;
|
margin-bottom: 4px;
|
}
|
|
.stat-value {
|
font-size: 16px;
|
font-weight: 500;
|
color: #333;
|
|
&.success {
|
color: #4caf50;
|
}
|
}
|
|
// 使用配件
|
.used-parts {
|
margin-bottom: 20px;
|
}
|
|
.parts-title {
|
font-size: 14px;
|
font-weight: 500;
|
color: #333;
|
margin-bottom: 12px;
|
}
|
|
.parts-list {
|
display: flex;
|
flex-direction: column;
|
gap: 8px;
|
}
|
|
.part-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 12px;
|
background: #f8f9fa;
|
border-radius: 6px;
|
}
|
|
.part-name {
|
font-size: 12px;
|
color: #333;
|
}
|
|
.part-quantity {
|
font-size: 12px;
|
color: #666;
|
font-weight: 500;
|
}
|
|
// 已关闭状态
|
.closed-status {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
text-align: center;
|
margin-bottom: 24px;
|
padding: 32px 16px;
|
}
|
|
.status-icon {
|
margin-bottom: 16px;
|
}
|
|
.status-title {
|
font-size: 20px;
|
font-weight: 500;
|
color: #333;
|
margin-bottom: 8px;
|
}
|
|
.status-desc {
|
font-size: 14px;
|
color: #666;
|
margin-bottom: 20px;
|
}
|
|
.close-info {
|
display: flex;
|
flex-direction: column;
|
gap: 8px;
|
width: 100%;
|
max-width: 200px;
|
}
|
|
.info-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.info-label {
|
font-size: 12px;
|
color: #777;
|
}
|
|
.info-value {
|
font-size: 12px;
|
color: #333;
|
font-weight: 500;
|
}
|
|
// 操作按钮
|
.section-actions {
|
display: flex;
|
gap: 12px;
|
margin-top: 20px;
|
}
|
|
.section-actions .u-button {
|
flex: 1;
|
}
|
|
.supervisor-info {
|
display: flex;
|
align-items: center;
|
}
|
|
.supervisor-name {
|
font-size: 12px;
|
color: #666;
|
}
|
</style>
|
