From a7a9f53ef126659f664f5cbfe4eb10bebdfc4a6a Mon Sep 17 00:00:00 2001
From: gongchunyi <deslre0381@gmail.com>
Date: 星期二, 19 五月 2026 23:33:56 +0800
Subject: [PATCH] feat: 设备巡检修改

---
 src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue |  467 ++++++++++++++++++++++++++++++---------------------------
 1 files changed, 244 insertions(+), 223 deletions(-)

diff --git a/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue b/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue
index ba9a120..fa72f01 100644
--- a/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue
+++ b/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue
@@ -1,279 +1,242 @@
 <template>
   <div>
-    <el-dialog title="鏌ョ湅闄勪欢"
-               v-model="dialogVisitable" width="800px" @close="cancel">
-      <div class="upload-container">
-        <!-- 鐢熶骇鍓� -->
-        <div class="form-container">
-          <div class="title">鐢熶骇鍓�</div>
-          
-          <!-- 鍥剧墖鍒楄〃 -->
-          <div style="display: flex; flex-wrap: wrap;">
-            <img v-for="(item, index) in beforeProductionImgs" :key="index"
-                 @click="showMedia(beforeProductionImgs, index, 'image')"
-                 :src="item" style="max-width: 100px; height: 100px; margin: 5px;" alt="">
-          </div>
-          
-          <!-- 瑙嗛鍒楄〃 -->
-          <div style="display: flex; flex-wrap: wrap;">
-            <div
-                v-for="(videoUrl, index) in beforeProductionVideos"
-                :key="index"
-                @click="showMedia(beforeProductionVideos, index, 'video')"
-                style="position: relative; margin: 10px; cursor: pointer;"
-            >
-              <div style="width: 160px; height: 90px; background-color: #333; display: flex; align-items: center; justify-content: center;">
-                <img src="@/assets/images/video.png" alt="鎾斁" style="width: 30px; height: 30px; opacity: 0.8;" />
-              </div>
-              <div style="text-align: center; font-size: 12px; color: #666;">鐐瑰嚮鎾斁</div>
-            </div>
+    <el-dialog title="宸℃璇︽儏"
+               v-model="dialogVisitable" width="700px" @close="cancel">
+      <div class="detail-container">
+        <!-- 鍩烘湰淇℃伅 -->
+        <div class="info-section">
+          <div class="section-title">鍩烘湰淇℃伅</div>
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="璁惧鍚嶇О">{{ rowData.taskName || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="宸℃鍦扮偣">{{ rowData.inspectionLocation || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="鎵ц宸℃浜�">{{ rowData.inspector || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="宸℃鏃堕棿">{{ rowData.dateStr || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="宸℃鐘舵��">
+              <el-tag v-if="rowData.inspectionStatus === 1" type="success" size="small">姝ｅ父</el-tag>
+              <el-tag v-else-if="rowData.inspectionStatus === 2" type="danger" size="small">寮傚父</el-tag>
+              <el-tag v-else size="small">鏈贰妫�</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="鐧昏浜�">{{ rowData.registrant || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="楠屾敹鐘舵��">
+              <el-tag v-if="rowData.acceptStatus === 1" type="success" size="small">宸查�氳繃</el-tag>
+              <el-tag v-else-if="rowData.acceptStatus === 2" type="danger" size="small">宸查��鍥�</el-tag>
+              <el-tag v-else-if="rowData.inspectionStatus > 0" type="warning" size="small">寰呴獙鏀�</el-tag>
+              <span v-else>--</span>
+            </el-descriptions-item>
+            <el-descriptions-item label="楠屾敹浜�">{{ rowData.inspectionAcceptor || '-' }}</el-descriptions-item>
+          </el-descriptions>
+        </div>
+
+        <!-- 寮傚父鎻忚堪 -->
+        <div v-if="rowData.inspectionStatus === 2" class="info-section">
+          <div class="section-title">寮傚父鎻忚堪</div>
+          <div class="exception-content">
+            {{ rowData.inspectionRemark || '鏃�' }}
           </div>
         </div>
-        
-        <!-- 鐢熶骇鍚� -->
-        <div class="form-container">
-          <div class="title">鐢熶骇鍚�</div>
-          
-          <!-- 鍥剧墖鍒楄〃 -->
-          <div style="display: flex; flex-wrap: wrap;">
-            <img v-for="(item, index) in afterProductionImgs" :key="index"
-                 @click="showMedia(afterProductionImgs, index, 'image')"
-                 :src="item" style="max-width: 100px; height: 100px; margin: 5px;" alt="">
-          </div>
-          
-          <!-- 瑙嗛鍒楄〃 -->
-          <div style="display: flex; flex-wrap: wrap;">
-            <div
-                v-for="(videoUrl, index) in afterProductionVideos"
-                :key="index"
-                @click="showMedia(afterProductionVideos, index, 'video')"
-                style="position: relative; margin: 10px; cursor: pointer;"
-            >
-              <div style="width: 160px; height: 90px; background-color: #333; display: flex; align-items: center; justify-content: center;">
-                <img src="@/assets/images/video.png" alt="鎾斁" style="width: 30px; height: 30px; opacity: 0.8;" />
+
+        <!-- 闄勪欢鍒楄〃 -->
+        <div class="info-section">
+          <div class="section-title">闄勪欢 ({{ attachmentList.length }}涓�)</div>
+          <div v-if="attachmentList.length > 0" class="attachment-list">
+            <div v-for="(file, index) in attachmentList" :key="index" class="attachment-item">
+              <div class="attachment-preview" @click="previewFile(file, index)">
+                <img v-if="isImage(file)" :src="getFileUrl(file)" alt="闄勪欢" />
+                <video v-else-if="isVideo(file)" :src="getFileUrl(file)"></video>
+                <div v-else class="file-icon">
+                  <i class="el-icon-document"></i>
+                </div>
               </div>
-              <div style="text-align: center; font-size: 12px; color: #666;">鐐瑰嚮鎾斁</div>
+              <div class="attachment-info">
+                <span class="file-name">{{ file.originalFilename || file.name || '闄勪欢' }}</span>
+              </div>
             </div>
           </div>
-        </div>
-        
-        <!-- 鐢熶骇闂 -->
-        <div class="form-container">
-          <div class="title">鐢熶骇闂</div>
-          
-          <!-- 鍥剧墖鍒楄〃 -->
-          <div style="display: flex; flex-wrap: wrap;">
-            <img v-for="(item, index) in productionIssuesImgs" :key="index"
-                 @click="showMedia(productionIssuesImgs, index, 'image')"
-                 :src="item" style="max-width: 100px; height: 100px; margin: 5px;" alt="">
-          </div>
-          
-          <!-- 瑙嗛鍒楄〃 -->
-          <div style="display: flex; flex-wrap: wrap;">
-            <div
-                v-for="(videoUrl, index) in productionIssuesVideos"
-                :key="index"
-                @click="showMedia(productionIssuesVideos, index, 'video')"
-                style="position: relative; margin: 10px; cursor: pointer;"
-            >
-              <div style="width: 160px; height: 90px; background-color: #333; display: flex; align-items: center; justify-content: center;">
-                <img src="@/assets/images/video.png" alt="鎾斁" style="width: 30px; height: 30px; opacity: 0.8;" />
-              </div>
-              <div style="text-align: center; font-size: 12px; color: #666;">鐐瑰嚮鎾斁</div>
-            </div>
+          <div v-else class="empty-attachment">
+            鏆傛棤闄勪欢
           </div>
         </div>
       </div>
+
+      <template #footer>
+        <el-button @click="cancel">鍏抽棴</el-button>
+      </template>
     </el-dialog>
-    
-    <!-- 缁熶竴濯掍綋鏌ョ湅鍣� -->
-    <div v-if="isMediaViewerVisible" class="media-viewer-overlay" @click.self="closeMediaViewer">
-      <div class="media-viewer-content" @click.stop>
-        <!-- 鍥剧墖 -->
-        <vue-easy-lightbox
-            v-if="mediaType === 'image'"
-            :visible="isMediaViewerVisible"
-            :imgs="mediaList"
-            :index="currentMediaIndex"
-            @hide="closeMediaViewer"
-        ></vue-easy-lightbox>
-        
-        <!-- 瑙嗛 -->
-        <div v-else-if="mediaType === 'video'" style="position: relative;">
-          <video
-              :src="mediaList[currentMediaIndex]"
-              autoplay
-              controls
-              style="max-width: 90vw; max-height: 80vh;"
-          />
-        </div>
-      </div>
-    </div>
+
+    <!-- 鍥剧墖棰勮 -->
+    <vue-easy-lightbox
+        v-if="showLightbox"
+        :visible="showLightbox"
+        :imgs="previewImages"
+        :index="previewIndex"
+        @hide="closeLightbox"
+    ></vue-easy-lightbox>
+
+    <!-- 瑙嗛棰勮 -->
+    <el-dialog v-if="showVideoDialog" v-model="showVideoDialog" title="瑙嗛棰勮" width="800px" append-to-body>
+      <video
+          ref="videoPlayer"
+          :src="videoUrl"
+          controls
+          autoplay
+          style="width: 100%; max-height: 60vh;"
+      ></video>
+    </el-dialog>
   </div>
 </template>
+
 <script setup>
-import { ref } from 'vue';
+import { ref, getCurrentInstance } from 'vue';
 import VueEasyLightbox from 'vue-easy-lightbox';
+
 const { proxy } = getCurrentInstance();
 
 // 鎺у埗寮圭獥鏄剧ず
 const dialogVisitable = ref(false);
 
-// 鍥剧墖鏁扮粍
-const beforeProductionImgs = ref([]);
-const afterProductionImgs = ref([]);
-const productionIssuesImgs = ref([]);
+// 琛屾暟鎹�
+const rowData = ref({});
 
-// 瑙嗛鏁扮粍
-const beforeProductionVideos = ref([]);
-const afterProductionVideos = ref([]);
-const productionIssuesVideos = ref([]);
+// 闄勪欢鍒楄〃
+const attachmentList = ref([]);
 
-// 濯掍綋鏌ョ湅鍣ㄧ姸鎬�
-const isMediaViewerVisible = ref(false);
-const currentMediaIndex = ref(0);
-const mediaList = ref([]); // 瀛樺偍褰撳墠瑕佹煡鐪嬬殑濯掍綋鍒楄〃锛堝惈鍥剧墖鍜岃棰戝璞★級
-const mediaType = ref('image'); // image | video
+// 鍥剧墖棰勮
+const showLightbox = ref(false);
+const previewImages = ref([]);
+const previewIndex = ref(0);
+
+// 瑙嗛棰勮
+const showVideoDialog = ref(false);
+const videoUrl = ref('');
+
 const javaApi = proxy.javaApi;
 
-// 澶勭悊 URL锛氬皢 Windows 璺緞杞崲涓哄彲璁块棶鐨� URL
+// 澶勭悊鏂囦欢URL
 function processFileUrl(fileUrl) {
   if (!fileUrl) return '';
-  
-  // 濡傛灉 URL 鏄� Windows 璺緞鏍煎紡锛堝寘鍚弽鏂滄潬锛夛紝闇�瑕佽浆鎹�
+
   if (fileUrl && fileUrl.indexOf('\\') > -1) {
-    // 鏌ユ壘 uploads 鍏抽敭瀛楃殑浣嶇疆锛屼粠閭ｉ噷寮�濮嬫彁鍙栫浉瀵硅矾寰�
     const uploadsIndex = fileUrl.toLowerCase().indexOf('uploads');
     if (uploadsIndex > -1) {
-      // 浠� uploads 寮�濮嬫彁鍙栬矾寰勶紝骞跺皢鍙嶆枩鏉犳浛鎹负姝ｆ枩鏉�
       const relativePath = fileUrl.substring(uploadsIndex).replace(/\\/g, '/');
       fileUrl = '/' + relativePath;
     } else {
-      // 濡傛灉娌℃湁鎵惧埌 uploads锛屾彁鍙栨渶鍚庝竴涓洰褰曞拰鏂囦欢鍚�
       const parts = fileUrl.split('\\');
       const fileName = parts[parts.length - 1];
       fileUrl = '/uploads/' + fileName;
     }
   }
-  
-  // 纭繚鎵�鏈夐潪 http 寮�澶寸殑 URL 閮芥嫾鎺� baseUrl
+
   if (fileUrl && !fileUrl.startsWith('http')) {
-    // 纭繚璺緞浠� / 寮�澶�
     if (!fileUrl.startsWith('/')) {
       fileUrl = '/' + fileUrl;
     }
-    // 鎷兼帴 baseUrl
     fileUrl = javaApi + fileUrl;
   }
-  
+
   return fileUrl;
 }
 
-// 澶勭悊姣忎竴绫绘暟鎹細鍒嗙鍥剧墖鍜岃棰�
-function processItems(items) {
-  const images = [];
-  const videos = [];
-  
-  // 妫�鏌� items 鏄惁瀛樺湪涓斾负鏁扮粍
-  if (!items || !Array.isArray(items)) {
-    return { images, videos };
+// 鑾峰彇鏂囦欢璁块棶URL
+function getFileUrl(file) {
+  // 浼樺厛浣跨敤 link 瀛楁
+  let url = file?.link;
+  if (!url) {
+    url = file?.url || file?.downloadUrl || file?.tempPath || '';
   }
-  
-  items.forEach(item => {
-    if (!item || !item.link) return;
-    
-    const fileUrl = processFileUrl(item.link);
-    // if (!item || !item.url) return;
-    
-    // // 澶勭悊鏂囦欢 URL
-    // const fileUrl = processFileUrl(item.url);
-    
-    // 鏍规嵁鏂囦欢鎵╁睍鍚嶅垽鏂槸鍥剧墖杩樻槸瑙嗛
-    const urlLower = fileUrl.toLowerCase();
-    if (urlLower.match(/\.(jpg|jpeg|png|gif|bmp|webp)$/)) {
-      images.push(fileUrl);
-    } else if (urlLower.match(/\.(mp4|avi|mov|wmv|flv|mkv|webm)$/)) {
-      videos.push(fileUrl);
-    } else if (item.contentType) {
-      // 濡傛灉鏈� contentType锛屼娇鐢� contentType 鍒ゆ柇
-      if (item.contentType.startsWith('image/')) {
-        images.push(fileUrl);
-      } else if (item.contentType.startsWith('video/')) {
-        videos.push(fileUrl);
-      }
-    }
-  });
-  
-  return { images, videos };
+  return processFileUrl(url);
 }
 
-// 鎵撳紑寮圭獥骞跺姞杞芥暟鎹�
-const openDialog = async (row) => {
-  // 浣跨敤姝ｇ‘鐨勫瓧娈靛悕锛歝ommonFileListBefore, commonFileListAfter
-  // productionIssues 鍙兘涓嶅瓨鍦紝浣跨敤绌烘暟缁�
-  const { images: beforeImgs, videos: beforeVids } = processItems(row.commonFileListBefore || []);
-  const { images: afterImgs, videos: afterVids } = processItems(row.commonFileListAfter || []);
-  const { images: issueImgs, videos: issueVids } = processItems(row.productionIssues || []);
-  
-  beforeProductionImgs.value = beforeImgs;
-  beforeProductionVideos.value = beforeVids;
-  
-  afterProductionImgs.value = afterImgs;
-  afterProductionVideos.value = afterVids;
-  
-  productionIssuesImgs.value = issueImgs;
-  productionIssuesVideos.value = issueVids;
-  
+// 鍒ゆ柇鏄惁涓哄浘鐗�
+function isImage(file) {
+  const name = file?.originalFilename || file?.bucketFilename || file?.name || '';
+  const ext = name.split('.').pop()?.toLowerCase();
+  return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext);
+}
+
+// 鍒ゆ柇鏄惁涓鸿棰�
+function isVideo(file) {
+  const name = file?.originalFilename || file?.bucketFilename || file?.name || '';
+  const ext = name.split('.').pop()?.toLowerCase();
+  return ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm'].includes(ext);
+}
+
+// 棰勮鏂囦欢
+function previewFile(file, index) {
+  if (isImage(file)) {
+    // 鍥剧墖棰勮
+    previewImages.value = attachmentList.value
+      .filter(f => isImage(f))
+      .map(f => getFileUrl(f));
+    previewIndex.value = previewImages.value.indexOf(getFileUrl(file));
+    showLightbox.value = true;
+  } else if (isVideo(file)) {
+    // 瑙嗛棰勮
+    videoUrl.value = getFileUrl(file);
+    showVideoDialog.value = true;
+  }
+}
+
+// 鍏抽棴鍥剧墖棰勮
+function closeLightbox() {
+  showLightbox.value = false;
+  previewImages.value = [];
+  previewIndex.value = 0;
+}
+
+// 鎵撳紑寮圭獥
+const openDialog = (row) => {
+  rowData.value = { ...row };
+
+  // 鏀堕泦鎵�鏈夐檮浠�
+  let files = [];
+  if (row?.commonFileList) {
+    files = files.concat(row.commonFileList);
+  }
+  if (row?.commonFileListBefore) {
+    files = files.concat(row.commonFileListBefore);
+  }
+  if (row?.commonFileListAfter) {
+    files = files.concat(row.commonFileListAfter);
+  }
+  attachmentList.value = files;
+
   dialogVisitable.value = true;
 };
 
-// 鏄剧ず濯掍綋锛堝浘鐗� or 瑙嗛锛�
-function showMedia(mediaArray, index, type) {
-  mediaList.value = mediaArray;
-  currentMediaIndex.value = index;
-  mediaType.value = type;
-  isMediaViewerVisible.value = true;
-}
-
-// 鍏抽棴濯掍綋鏌ョ湅鍣�
-function closeMediaViewer() {
-  isMediaViewerVisible.value = false;
-  mediaList.value = [];
-  mediaType.value = 'image';
-}
-
-// 琛ㄥ崟鍏抽棴鏂规硶
+// 鍏抽棴寮圭獥
 const cancel = () => {
   dialogVisitable.value = false;
+  showVideoDialog.value = false;
+  rowData.value = {};
+  attachmentList.value = [];
 };
 
 defineExpose({ openDialog });
 </script>
+
 <style scoped lang="scss">
-.upload-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px;
-  border: 1px solid #dcdfe6;
-  box-sizing: border-box;
-  
-  .form-container {
-    flex: 1;
-    width: 100%;
-    margin-bottom: 20px;
+.detail-container {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.info-section {
+  margin-bottom: 20px;
+
+  &:last-child {
+    margin-bottom: 0;
   }
 }
 
-.title {
+.section-title {
   font-size: 14px;
   color: #165dff;
-  line-height: 20px;
   font-weight: 600;
   padding-left: 10px;
   position: relative;
-  margin: 6px 0;
-  
+  margin-bottom: 12px;
+
   &::before {
     content: "";
     position: absolute;
@@ -285,23 +248,81 @@
   }
 }
 
-.media-viewer-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.8);
-  z-index: 9999;
+.exception-content {
+  padding: 12px;
+  background-color: #fff2f0;
+  border: 1px solid #ffccc7;
+  border-radius: 4px;
+  color: #ff4d4f;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.attachment-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.attachment-item {
+  width: 100px;
+  text-align: center;
+}
+
+.attachment-preview {
+  width: 100px;
+  height: 100px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: #f5f7fa;
+  transition: all 0.3s;
+
+  &:hover {
+    border-color: #409eff;
+    transform: scale(1.02);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .file-icon {
+    font-size: 32px;
+    color: #909399;
+  }
 }
 
-.media-viewer-content {
-  position: relative;
-  max-width: 90vw;
-  max-height: 90vh;
-  overflow: hidden;
+.attachment-info {
+  margin-top: 4px;
+
+  .file-name {
+    font-size: 12px;
+    color: #606266;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
-</style>
\ No newline at end of file
+
+.empty-attachment {
+  padding: 30px;
+  text-align: center;
+  color: #909399;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+</style>

--
Gitblit v1.9.3