添加设备维修记录查看功能，支持点击设备编号查看详细维修记录

src/views/eq/RepairSummary.vue

@@ -20,7 +20,13 @@
       stripe
       style="width: 100%"
     >
-      <el-table-column prop="equipment_code" label="设备编号" align="center" width="120" />
+      <el-table-column prop="equipment_code" label="设备编号" align="center" width="120">
+        <template #default="scope">
+          <span class="equipment-code-link" @click="showRepairRecords(scope.row.equipment_code)">
+            {{ scope.row.equipment_code }}
+          </span>
+        </template>
+      </el-table-column>
       <el-table-column prop="equipment_name" label="设备名称" align="center" min-width="200" />
       <el-table-column prop="record_count" label="维修次数" align="center" width="100" />
       <el-table-column prop="first_apply_time" label="首次维修时间" align="center" min-width="180" />
@@ -36,6 +42,56 @@
         </template>
       </el-table-column>
     </el-table>
+
+    <!-- 设备维修记录对话框 -->
+    <el-dialog
+      v-model="repairRecordsDialogVisible"
+      :title="`${selectedEquipmentCode} 维修记录`"
+      width="80%"
+      :before-close="handleRepairRecordsClose">
+      <div v-loading="repairRecordsLoading" class="repair-records-container">
+        <div v-if="selectedRepairRecords.length > 0">
+          <el-table
+            :data="selectedRepairRecords"
+            stripe
+            border
+            style="width: 100%"
+            max-height="60vh">
+            <el-table-column prop="id" label="维修编号" width="80" align="center" />
+            <el-table-column prop="breakdown_name" label="故障名称" width="120" align="center" />
+            <el-table-column prop="breakdown_description" label="故障描述" min-width="150" show-overflow-tooltip />
+            <el-table-column prop="repair_method" label="维修方法" min-width="150" show-overflow-tooltip />
+            <el-table-column prop="apply_time" label="报修时间" width="160" align="center">
+              <template #default="scope">
+                <span :class="{ 'recent': isRecent(scope.row.repair_time) }">
+                  {{ scope.row.apply_time || '无' }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="repair_time" label="维修时间" width="160" align="center">
+              <template #default="scope">
+                <span :class="{ 'recent': isRecent(scope.row.repair_time) }">
+                  {{ scope.row.repair_time || '无' }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column label="维修时长" width="100" align="center">
+              <template #default="scope">
+                {{ calculateRepairDuration(scope.row.apply_time, scope.row.repair_time) }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div v-else-if="!repairRecordsLoading" class="no-records">
+          暂无维修记录
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="repairRecordsDialogVisible = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -61,6 +117,12 @@ const props = defineProps({
 const loading = ref(false)
 const repairSummaryList = ref([])
 
+// 维修记录对话框相关状态
+const repairRecordsDialogVisible = ref(false)
+const repairRecordsLoading = ref(false)
+const selectedRepairRecords = ref([])
+const selectedEquipmentCode = ref('')
+
 // 监听设备类型变化
 watch(() => props.selectedEquipmentType, (newVal, oldVal) => {
   console.log('设备类型从', oldVal, '变化为', newVal);
@@ -121,6 +183,87 @@ function handleSummary() {
       loading.value = false
     })
 }
+
+// 显示设备维修记录
+const showRepairRecords = (equipmentCode) => {
+  selectedEquipmentCode.value = equipmentCode
+  repairRecordsDialogVisible.value = true
+  fetchRepairRecords(equipmentCode)
+}
+
+// 获取设备维修记录
+const fetchRepairRecords = (equipmentCode) => {
+  repairRecordsLoading.value = true
+  
+  // 构建API URL
+  let apiUrl = `${API_CONFIG.BASE_URL}/api/eq-repair/repair-records/${equipmentCode}`;
+  
+  fetch(apiUrl)
+    .then(response => response.json())
+    .then(data => {
+      if (data.code === 200 && data.data) {
+        selectedRepairRecords.value = data.data
+      } else {
+        selectedRepairRecords.value = []
+      }
+    })
+    .catch(error => {
+      console.error('维修记录API调用失败:', error)
+      selectedRepairRecords.value = []
+    })
+    .finally(() => {
+      repairRecordsLoading.value = false
+    })
+}
+
+// 关闭维修记录对话框
+const handleRepairRecordsClose = () => {
+  repairRecordsDialogVisible.value = false
+}
+
+// 检查维修日期是否是最近的（30天内）
+const isRecent = (repairDate) => {
+  if (!repairDate) return false
+  
+  try {
+    const repairDateObj = new Date(repairDate)
+    const currentDate = new Date()
+    const timeDiff = currentDate - repairDateObj
+    const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24))
+    
+    return daysDiff <= 30
+  } catch (e) {
+    return false
+  }
+}
+
+// 计算维修时长
+const calculateRepairDuration = (applyTime, repairTime) => {
+  if (!applyTime || !repairTime) return '无'
+  
+  try {
+    const applyDate = new Date(applyTime)
+    const repairDate = new Date(repairTime)
+    const timeDiff = repairDate - applyDate
+    
+    if (timeDiff < 0) return '无效时间'
+    
+    const hours = Math.floor(timeDiff / (1000 * 60 * 60))
+    const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60))
+    
+    if (hours > 24) {
+      const days = Math.floor(hours / 24)
+      const remainingHours = hours % 24
+      return `${days}天${remainingHours}小时`
+    } else if (hours > 0) {
+      return `${hours}小时${minutes}分钟`
+    } else {
+      return `${minutes}分钟`
+    }
+  } catch (e) {
+    return '计算错误'
+  }
+}
 </script>
 
 <style scoped>
@@ -131,4 +274,32 @@ function handleSummary() {
 .mb8 {
   margin-bottom: 8px;
 }
+
+/* 设备编号链接样式 */
+.equipment-code-link {
+  color: #409EFF;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.equipment-code-link:hover {
+  color: #66b1ff;
+}
+
+/* 维修记录对话框样式 */
+.repair-records-container {
+  padding: 10px 0;
+}
+
+.no-records {
+  text-align: center;
+  color: #909399;
+  padding: 20px 0;
+}
+
+/* 最近维修记录高亮样式 */
+.recent {
+  color: #F56C6C;
+  font-weight: bold;
+}
 </style>