From f49bfd6c085cbf28a25d9404f8dc5b74368b716a Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 29 五月 2026 15:54:02 +0800
Subject: [PATCH] 新疆马铃薯 1.代码更新
---
src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue | 360 ++++++++++++++++++++++++++++-------------------------------
1 files changed, 170 insertions(+), 190 deletions(-)
diff --git a/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue b/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue
index b5604fe..154ae7d 100644
--- a/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue
+++ b/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue
@@ -1,226 +1,251 @@
<template>
<div>
- <el-dialog title="鏌ョ湅闄勪欢" v-model="dialogVisitable" width="800px" @close="cancel">
+ <el-dialog title="鏌ョ湅闄勪欢"
+ v-model="dialogVisitable" width="800px" @close="cancel">
<div class="upload-container">
+ <!-- 鐢熶骇鍓� -->
<div class="form-container">
<div class="title">鐢熶骇鍓�</div>
-
- <div class="media-list">
- <img
- v-for="(item, index) in beforeProductionImgs"
- :key="`before-img-${index}`"
- :src="item"
- alt=""
- class="media-image"
- @click="showMedia(beforeProductionImgs, index, 'image')"
- />
+
+ <!-- 鍥剧墖鍒楄〃 -->
+ <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 class="media-list">
+
+ <!-- 瑙嗛鍒楄〃 -->
+ <div style="display: flex; flex-wrap: wrap;">
<div
- v-for="(videoUrl, index) in beforeProductionVideos"
- :key="`before-video-${index}`"
- class="video-item"
- @click="showMedia(beforeProductionVideos, index, 'video')"
+ v-for="(videoUrl, index) in beforeProductionVideos"
+ :key="index"
+ @click="showMedia(beforeProductionVideos, index, 'video')"
+ style="position: relative; margin: 10px; cursor: pointer;"
>
- <div class="video-thumb">
- <img src="@/assets/images/video.png" alt="鎾斁" class="video-icon" />
+ <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 class="video-text">鐐瑰嚮鎾斁</div>
+ <div style="text-align: center; font-size: 12px; color: #666;">鐐瑰嚮鎾斁</div>
</div>
</div>
</div>
-
- <div class="form-container">
- <div class="title">鐢熶骇涓�</div>
-
- <div class="media-list">
- <img
- v-for="(item, index) in afterProductionImgs"
- :key="`during-img-${index}`"
- :src="item"
- alt=""
- class="media-image"
- @click="showMedia(afterProductionImgs, index, 'image')"
- />
- </div>
-
- <div class="media-list">
- <div
- v-for="(videoUrl, index) in afterProductionVideos"
- :key="`during-video-${index}`"
- class="video-item"
- @click="showMedia(afterProductionVideos, index, 'video')"
- >
- <div class="video-thumb">
- <img src="@/assets/images/video.png" alt="鎾斁" class="video-icon" />
- </div>
- <div class="video-text">鐐瑰嚮鎾斁</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>
+ </div>
+
+ <!-- 鐢熶骇鍚� -->
<div class="form-container">
<div class="title">鐢熶骇鍚�</div>
-
- <div class="media-list">
- <img
- v-for="(item, index) in productionIssuesImgs"
- :key="`after-img-${index}`"
- :src="item"
- alt=""
- class="media-image"
- @click="showMedia(productionIssuesImgs, index, 'image')"
- />
+
+ <!-- 鍥剧墖鍒楄〃 -->
+ <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 class="media-list">
+
+ <!-- 瑙嗛鍒楄〃 -->
+ <div style="display: flex; flex-wrap: wrap;">
<div
- v-for="(videoUrl, index) in productionIssuesVideos"
- :key="`after-video-${index}`"
- class="video-item"
- @click="showMedia(productionIssuesVideos, index, 'video')"
+ v-for="(videoUrl, index) in afterProductionVideos"
+ :key="index"
+ @click="showMedia(afterProductionVideos, index, 'video')"
+ style="position: relative; margin: 10px; cursor: pointer;"
>
- <div class="video-thumb">
- <img src="@/assets/images/video.png" alt="鎾斁" class="video-icon" />
+ <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 class="video-text">鐐瑰嚮鎾斁</div>
+ <div style="text-align: center; font-size: 12px; color: #666;">鐐瑰嚮鎾斁</div>
</div>
</div>
</div>
</div>
</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"
- />
-
- <div v-else-if="mediaType === 'video'" class="video-player-wrap">
- <video :src="mediaList[currentMediaIndex]" autoplay controls class="video-player" />
+ 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>
</div>
</template>
-
<script setup>
-import { ref } from "vue";
-import VueEasyLightbox from "vue-easy-lightbox";
+import { ref } 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 beforeProductionVideos = ref([]);
const afterProductionVideos = ref([]);
const productionIssuesVideos = ref([]);
+// 濯掍綋鏌ョ湅鍣ㄧ姸鎬�
const isMediaViewerVisible = ref(false);
const currentMediaIndex = ref(0);
-const mediaList = ref([]);
-const mediaType = ref("image");
+const mediaList = ref([]); // 瀛樺偍褰撳墠瑕佹煡鐪嬬殑濯掍綋鍒楄〃锛堝惈鍥剧墖鍜岃棰戝璞★級
+const mediaType = ref('image'); // image | video
+const javaApi = proxy.javaApi;
-const processFileUrl = fileUrl => {
- if (!fileUrl) return "";
-
- let currentUrl = String(fileUrl);
- if (currentUrl.includes("\\")) {
- const uploadsIndex = currentUrl.toLowerCase().indexOf("uploads");
+// 澶勭悊 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) {
- currentUrl = `/${currentUrl.substring(uploadsIndex).replace(/\\/g, "/")}`;
+ // 浠� uploads 寮�濮嬫彁鍙栬矾寰勶紝骞跺皢鍙嶆枩鏉犳浛鎹负姝ｆ枩鏉�
+ const relativePath = fileUrl.substring(uploadsIndex).replace(/\\/g, '/');
+ fileUrl = '/' + relativePath;
} else {
- const fileName = currentUrl.split("\\").pop();
- currentUrl = `/uploads/${fileName}`;
+ // 濡傛灉娌℃湁鎵惧埌 uploads锛屾彁鍙栨渶鍚庝竴涓洰褰曞拰鏂囦欢鍚�
+ const parts = fileUrl.split('\\');
+ const fileName = parts[parts.length - 1];
+ fileUrl = '/uploads/' + fileName;
}
}
-
- if (currentUrl && !currentUrl.startsWith("http")) {
- if (!currentUrl.startsWith("/")) {
- currentUrl = `/${currentUrl}`;
+
+ // 纭繚鎵�鏈夐潪 http 寮�澶寸殑 URL 閮芥嫾鎺� baseUrl
+ if (fileUrl && !fileUrl.startsWith('http')) {
+ // 纭繚璺緞浠� / 寮�澶�
+ if (!fileUrl.startsWith('/')) {
+ fileUrl = '/' + fileUrl;
}
- currentUrl = __BASE_API__ + currentUrl;
+ // 鎷兼帴 baseUrl
+ fileUrl = javaApi + fileUrl;
}
+
+ return fileUrl;
+}
- return currentUrl;
-};
-
-const processItems = items => {
+// 澶勭悊姣忎竴绫绘暟鎹細鍒嗙鍥剧墖鍜岃棰�
+function processItems(items) {
const images = [];
const videos = [];
-
- if (!Array.isArray(items)) {
+
+ // 妫�鏌� items 鏄惁瀛樺湪涓斾负鏁扮粍
+ if (!items || !Array.isArray(items)) {
return { images, videos };
}
-
+
items.forEach(item => {
- if (!item) return;
-
- const fileUrl = processFileUrl(
- item.previewURL || item.url || item.downloadUrl || item.path || ""
- );
- const contentType = String(item.contentType || "").toLowerCase();
-
- if (!fileUrl) return;
-
- if (contentType.startsWith("video/")) {
+ 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);
- return;
+ } else if (item.contentType) {
+ // 濡傛灉鏈� contentType锛屼娇鐢� contentType 鍒ゆ柇
+ if (item.contentType.startsWith('image/')) {
+ images.push(fileUrl);
+ } else if (item.contentType.startsWith('video/')) {
+ videos.push(fileUrl);
+ }
}
-
- images.push(fileUrl);
});
-
+
return { images, videos };
-};
+}
-const openDialog = row => {
- const { images: beforeImgs, videos: beforeVids } = processItems(
- row.commonFileListBeforeVO || []
- );
- const { images: afterImgs, videos: afterVids } = processItems(
- row.commonFileListVO || []
- );
- const { images: issueImgs, videos: issueVids } = processItems(
- row.commonFileListAfterVO || []
- );
-
+// 鎵撳紑寮圭獥骞跺姞杞芥暟鎹�
+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;
+
dialogVisitable.value = true;
};
-const showMedia = (items, index, type) => {
- mediaList.value = items;
+// 鏄剧ず濯掍綋锛堝浘鐗� or 瑙嗛锛�
+function showMedia(mediaArray, index, type) {
+ mediaList.value = mediaArray;
currentMediaIndex.value = index;
mediaType.value = type;
isMediaViewerVisible.value = true;
-};
+}
-const closeMediaViewer = () => {
+// 鍏抽棴濯掍綋鏌ョ湅鍣�
+function closeMediaViewer() {
isMediaViewerVisible.value = false;
mediaList.value = [];
- mediaType.value = "image";
-};
+ mediaType.value = 'image';
+}
+// 琛ㄥ崟鍏抽棴鏂规硶
const cancel = () => {
dialogVisitable.value = false;
};
defineExpose({ openDialog });
</script>
-
<style scoped lang="scss">
.upload-container {
display: flex;
@@ -229,7 +254,7 @@
padding: 20px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
-
+
.form-container {
flex: 1;
width: 100%;
@@ -245,7 +270,7 @@
padding-left: 10px;
position: relative;
margin: 6px 0;
-
+
&::before {
content: "";
position: absolute;
@@ -257,48 +282,12 @@
}
}
-.media-list {
- display: flex;
- flex-wrap: wrap;
-}
-
-.media-image {
- max-width: 100px;
- height: 100px;
- margin: 5px;
- cursor: pointer;
-}
-
-.video-item {
- position: relative;
- margin: 10px;
- cursor: pointer;
-}
-
-.video-thumb {
- width: 160px;
- height: 90px;
- background-color: #333;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.video-icon {
- width: 30px;
- height: 30px;
- opacity: 0.8;
-}
-
-.video-text {
- text-align: center;
- font-size: 12px;
- color: #666;
-}
-
.media-viewer-overlay {
position: fixed;
- inset: 0;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
@@ -312,13 +301,4 @@
max-height: 90vh;
overflow: hidden;
}
-
-.video-player-wrap {
- position: relative;
-}
-
-.video-player {
- max-width: 90vw;
- max-height: 80vh;
-}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.3