结果验证

gaoluyang

2025-09-16 a266a501b2022a8db19a3621b9c7f30345a9180b

结果验证

 src/pages/equipmentManagement/verification/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1520 @@
<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>