From a6f97a0ed4d838a8d27b75b3b4869adba97f3963 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 21 四月 2026 15:56:03 +0800
Subject: [PATCH] 新疆马铃薯 1.设备巡检查看附件展示修改
---
src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue | 130 +++++++++++++++++++++++++++++++------------
1 files changed, 94 insertions(+), 36 deletions(-)
diff --git a/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue b/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue
index d1c9d8d..154ae7d 100644
--- a/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue
+++ b/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue
@@ -29,7 +29,34 @@
</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>
+ </div>
+
<!-- 鐢熶骇鍚� -->
<div class="form-container">
<div class="title">鐢熶骇鍚�</div>
@@ -56,33 +83,6 @@
</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>
- </div>
</div>
</el-dialog>
@@ -100,7 +100,7 @@
<!-- 瑙嗛 -->
<div v-else-if="mediaType === 'video'" style="position: relative;">
- <Video
+ <video
:src="mediaList[currentMediaIndex]"
autoplay
controls
@@ -114,6 +114,7 @@
<script setup>
import { ref } from 'vue';
import VueEasyLightbox from 'vue-easy-lightbox';
+const { proxy } = getCurrentInstance();
// 鎺у埗寮圭獥鏄剧ず
const dialogVisitable = ref(false);
@@ -133,26 +134,83 @@
const currentMediaIndex = ref(0);
const mediaList = ref([]); // 瀛樺偍褰撳墠瑕佹煡鐪嬬殑濯掍綋鍒楄〃锛堝惈鍥剧墖鍜岃棰戝璞★級
const mediaType = ref('image'); // image | video
+const javaApi = proxy.javaApi;
+
+// 澶勭悊 URL锛氬皢 Windows 璺緞杞崲涓哄彲璁块棶鐨� 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 };
+ }
+
items.forEach(item => {
- if (item.contentType?.startsWith('image/')) {
- images.push(item.url);
- } else if (item.contentType?.startsWith('video/')) {
- videos.push(item.url);
+ 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 };
}
// 鎵撳紑寮圭獥骞跺姞杞芥暟鎹�
const openDialog = async (row) => {
- const { images: beforeImgs, videos: beforeVids } = processItems(row.beforeProduction);
- const { images: afterImgs, videos: afterVids } = processItems(row.afterProduction);
- const { images: issueImgs, videos: issueVids } = processItems(row.productionIssues);
+ // 浣跨敤姝ｇ‘鐨勫瓧娈靛悕锛歝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;
--
Gitblit v1.9.3