From cc13825bb6b3f4185e3db8aa29e58990ee4e01c0 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 27 二月 2026 17:49:36 +0800
Subject: [PATCH] 巡检模块流程更改
---
src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue | 462 ++++++++++++++++++++++++++-------------------------------
1 files changed, 208 insertions(+), 254 deletions(-)
diff --git a/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue b/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue
index 27b4a59..5a45338 100644
--- a/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue
+++ b/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue
@@ -1,83 +1,32 @@
<template>
<div>
<el-dialog title="鏌ョ湅闄勪欢"
- v-model="dialogVisitable" width="800px" @close="cancel">
+ v-model="dialogVisitable"
+ width="800px"
+ @close="cancel">
<div class="upload-container">
<!-- 鐢熶骇鍓� -->
<div class="form-container">
- <div class="title">鐢熶骇鍓�</div>
-
+ <div class="title">闄勪欢鍒楄〃</div>
<!-- 鍥剧墖鍒楄〃 -->
<div style="display: flex; flex-wrap: wrap;">
- <img v-for="(item, index) in beforeProductionImgs" :key="index"
+ <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="">
+ :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 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>
- </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>
- <div style="text-align: center; font-size: 12px; color: #666;">鐐瑰嚮鎾斁</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;" />
+ <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>
@@ -85,220 +34,225 @@
</div>
</div>
</el-dialog>
-
<!-- 缁熶竴濯掍綋鏌ョ湅鍣� -->
- <div v-if="isMediaViewerVisible" class="media-viewer-overlay" @click.self="closeMediaViewer">
- <div class="media-viewer-content" @click.stop>
+ <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>
-
+ <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 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';
-const { proxy } = getCurrentInstance();
+ import { ref } from "vue";
+ import VueEasyLightbox from "vue-easy-lightbox";
+ const { proxy } = getCurrentInstance();
-// 鎺у埗寮圭獥鏄剧ず
-const dialogVisitable = ref(false);
+ // 鎺у埗寮圭獥鏄剧ず
+ const dialogVisitable = ref(false);
-// 鍥剧墖鏁扮粍
-const beforeProductionImgs = ref([]);
-const afterProductionImgs = ref([]);
-const productionIssuesImgs = ref([]);
+ // 鍥剧墖鏁扮粍
+ const beforeProductionImgs = ref([]);
+ const afterProductionImgs = ref([]);
+ const productionIssuesImgs = ref([]);
-// 瑙嗛鏁扮粍
-const beforeProductionVideos = ref([]);
-const afterProductionVideos = ref([]);
-const productionIssuesVideos = 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'); // image | video
-const javaApi = proxy.javaApi;
+ // 濯掍綋鏌ョ湅鍣ㄧ姸鎬�
+ const isMediaViewerVisible = ref(false);
+ 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;
-}
+ // 澶勭悊 URL锛氬皢 Windows 璺緞杞崲涓哄彲璁块棶鐨� URL
+ function processFileUrl(fileUrl) {
+ if (!fileUrl) return "";
-// 澶勭悊姣忎竴绫绘暟鎹細鍒嗙鍥剧墖鍜岃棰�
-function processItems(items) {
- const images = [];
- const videos = [];
-
- // 妫�鏌� items 鏄惁瀛樺湪涓斾负鏁扮粍
- if (!items || !Array.isArray(items)) {
- return { images, videos };
- }
-
- items.forEach(item => {
- 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);
+ // 濡傛灉 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;
}
}
- });
-
- return { images, videos };
-}
-// 鎵撳紑寮圭獥骞跺姞杞芥暟鎹�
-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;
-};
+ // 纭繚鎵�鏈夐潪 http 寮�澶寸殑 URL 閮芥嫾鎺� baseUrl
+ if (fileUrl && !fileUrl.startsWith("http")) {
+ // 纭繚璺緞浠� / 寮�澶�
+ if (!fileUrl.startsWith("/")) {
+ fileUrl = "/" + fileUrl;
+ }
+ // 鎷兼帴 baseUrl
+ fileUrl = javaApi + fileUrl;
+ }
-// 鏄剧ず濯掍綋锛堝浘鐗� or 瑙嗛锛�
-function showMedia(mediaArray, index, type) {
- mediaList.value = mediaArray;
- currentMediaIndex.value = index;
- mediaType.value = type;
- isMediaViewerVisible.value = true;
-}
+ return fileUrl;
+ }
-// 鍏抽棴濯掍綋鏌ョ湅鍣�
-function closeMediaViewer() {
- isMediaViewerVisible.value = false;
- mediaList.value = [];
- mediaType.value = 'image';
-}
+ // 澶勭悊姣忎竴绫绘暟鎹細鍒嗙鍥剧墖鍜岃棰�
+ function processItems(items) {
+ const images = [];
+ const videos = [];
-// 琛ㄥ崟鍏抽棴鏂规硶
-const cancel = () => {
- dialogVisitable.value = false;
-};
+ // 妫�鏌� items 鏄惁瀛樺湪涓斾负鏁扮粍
+ if (!items || !Array.isArray(items)) {
+ return { images, videos };
+ }
-defineExpose({ openDialog });
+ items.forEach(item => {
+ 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 => {
+ // 浣跨敤姝ｇ‘鐨勫瓧娈靛悕锛歝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;
+ };
+
+ // 鏄剧ず濯掍綋锛堝浘鐗� 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;
+ };
+
+ 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%;
+ .upload-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 20px;
+ border: 1px solid #dcdfe6;
+ box-sizing: border-box;
margin-bottom: 20px;
- }
-}
-.title {
- font-size: 14px;
- color: #165dff;
- line-height: 20px;
- font-weight: 600;
- padding-left: 10px;
- position: relative;
- margin: 6px 0;
-
- &::before {
- content: "";
- position: absolute;
+ .form-container {
+ flex: 1;
+ width: 100%;
+ margin-bottom: 20px;
+ }
+ }
+
+ .title {
+ font-size: 14px;
+ color: #165dff;
+ line-height: 20px;
+ font-weight: 600;
+ padding-left: 10px;
+ position: relative;
+ margin: 6px 0;
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 3px;
+ width: 4px;
+ height: 14px;
+ background-color: #165dff;
+ }
+ }
+
+ .media-viewer-overlay {
+ position: fixed;
+ top: 0;
left: 0;
- top: 3px;
- width: 4px;
- height: 14px;
- background-color: #165dff;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.8);
+ z-index: 9999;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
-}
-.media-viewer-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.8);
- z-index: 9999;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.media-viewer-content {
- position: relative;
- max-width: 90vw;
- max-height: 90vh;
- overflow: hidden;
-}
+ .media-viewer-content {
+ position: relative;
+ max-width: 90vw;
+ max-height: 90vh;
+ overflow: hidden;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3