From 00ae6e7c8ccb3e8abad027104529f18f68142a48 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 31 十二月 2025 10:41:56 +0800
Subject: [PATCH] 陕西昭德型煤： 1.现场巡检上传附件查看附件修改联调
---
src/pages/inspectionUpload/components/formDia.vue | 6 +-
src/manifest.json | 13 ++-
src/components/imageUpload/index.vue | 8 +-
src/components/imageUpload/viewQrCodeFiles.vue | 151 ++++++++++++++++++++++++++++++++++++++------------
src/pages/inspectionUpload/components/qrCodeFormDia.vue | 2
5 files changed, 130 insertions(+), 50 deletions(-)
diff --git a/src/components/imageUpload/index.vue b/src/components/imageUpload/index.vue
index a329a81..aa0afc5 100644
--- a/src/components/imageUpload/index.vue
+++ b/src/components/imageUpload/index.vue
@@ -104,7 +104,7 @@
// Props 瀹氫箟
const props = defineProps({
modelValue: [String, Object, Array],
- action: { type: String, default: "/common/minioUploads" },
+ action: { type: String, default: "/common/commonUploads" },
data: { type: Object },
limit: { type: Number, default: 5 },
fileSize: { type: Number, default: 10 }, // 榛樿10MB锛岄�傚悎瑙嗛
@@ -115,7 +115,7 @@
isShowTip: { type: Boolean, default: true },
disabled: { type: Boolean, default: false },
drag: { type: Boolean, default: false }, // 鎷嶇収涓嶉渶瑕佹嫋鎷�
- statusType: { type: Number, default: "" }, // 鐢ㄤ簬鍖哄垎涓嶅悓鐘舵�佺殑涓婁紶
+ type: { type: Number, default: "" }, // 鐢ㄤ簬鍖哄垎涓嶅悓鐘舵�佺殑涓婁紶
maxVideoDuration: { type: Number, default: 30 }, // 鏈�澶ц棰戞椂闀匡紙绉掞級
});
@@ -174,7 +174,7 @@
const testServerConnection = () => {
return new Promise((resolve) => {
uni.request({
- url: uploadFileUrl.value.replace('/common/minioUploads', '/common/test'),
+ url: uploadFileUrl.value.replace('/common/commonUploads', '/common/commonUploads'),
method: 'GET',
timeout: 5000,
success: (res) => {
@@ -364,7 +364,7 @@
filePath: filePath,
name: 'files',
formData: {
- type: props.statusType || 0,
+ type: props.type || 0,
...(props.data || {})
},
header: {
diff --git a/src/components/imageUpload/viewQrCodeFiles.vue b/src/components/imageUpload/viewQrCodeFiles.vue
index 4961d4d..0c7aed2 100644
--- a/src/components/imageUpload/viewQrCodeFiles.vue
+++ b/src/components/imageUpload/viewQrCodeFiles.vue
@@ -49,15 +49,48 @@
v-for="(videoUrl, index) in beforeProductionVideos"
:key="index"
class="video-item"
- @click="previewVideo(videoUrl)"
+ @click="playVideo(videoUrl, index)"
>
- <view class="video-preview">
+ <video
+ :src="videoUrl"
+ class="video-thumbnail"
+ :poster="videoUrl"
+ :controls="false"
+ :show-center-play-btn="true"
+ @play="onVideoPlay"
+ ></video>
+ <view class="video-overlay">
<u-icon name="play-circle-fill" size="40" color="#fff"></u-icon>
</view>
- <view class="video-tip">鐐瑰嚮鎾斁</view>
</view>
</view>
</view>
+
+ <!-- 瑙嗛鎾斁寮圭獥 -->
+ <u-popup
+ :show="showVideoPlayer"
+ mode="center"
+ width="100%"
+ height="100%"
+ :closeable="true"
+ @close="closeVideoPlayer"
+ :safeAreaInsetBottom="false"
+ >
+ <view class="video-player-container">
+ <video
+ v-if="currentVideoUrl"
+ :src="currentVideoUrl"
+ class="video-player"
+ :controls="true"
+ :show-center-play-btn="true"
+ :enable-play-gesture="true"
+ :show-fullscreen-btn="true"
+ :enable-progress-gesture="true"
+ :object-fit="'contain'"
+ @fullscreenchange="onFullscreenChange"
+ ></video>
+ </view>
+ </u-popup>
<!-- 绌虹姸鎬� -->
<view v-if="beforeProductionImgs.length === 0 && beforeProductionVideos.length === 0" class="empty-state">
@@ -83,6 +116,9 @@
const beforeProductionImgs = ref([])
// 瑙嗛鏁扮粍
const beforeProductionVideos = ref([])
+// 瑙嗛鎾斁鍣�
+const showVideoPlayer = ref(false)
+const currentVideoUrl = ref('')
// 鎵撳紑寮圭獥骞跺姞杞芥暟鎹�
const openDialog = async (row) => {
@@ -111,20 +147,30 @@
})
}
-// 棰勮瑙嗛
-const previewVideo = (url) => {
- uni.previewVideo({
- sources: [{
- src: url
- }],
- fail: (err) => {
- console.error('瑙嗛棰勮澶辫触:', err)
- uni.showToast({
- title: '瑙嗛棰勮澶辫触',
- icon: 'error'
- })
- }
- })
+// 鎾斁瑙嗛
+const playVideo = (url, index) => {
+ currentVideoUrl.value = url
+ showVideoPlayer.value = true
+}
+
+// 鍏抽棴瑙嗛鎾斁鍣�
+const closeVideoPlayer = () => {
+ showVideoPlayer.value = false
+ currentVideoUrl.value = ''
+}
+
+// 瑙嗛鎾斁浜嬩欢
+const onVideoPlay = () => {
+ // 鍙互鍦ㄨ繖閲屽鐞嗘挱鏀句簨浠�
+}
+
+// 鍏ㄥ睆鍙樺寲浜嬩欢
+const onFullscreenChange = (e) => {
+ console.log('鍏ㄥ睆鐘舵�佸彉鍖�:', e)
+ // 濡傛灉閫�鍑哄叏灞忥紝鍙互閫夋嫨鍏抽棴寮圭獥
+ if (e.detail && e.detail.fullScreen === false) {
+ // 鍙互閫夋嫨淇濇寔寮圭獥鎵撳紑鎴栧叧闂�
+ }
}
// 琛ㄥ崟鍏抽棴鏂规硶
@@ -133,6 +179,17 @@
// 閲嶇疆鏁版嵁
beforeProductionImgs.value = []
beforeProductionVideos.value = []
+}
+
+// 澶勭悊URL锛屾坊鍔犲熀纭�鍩熷悕
+function formatUrl(url) {
+ if (!url) return ''
+ // 濡傛灉宸茬粡鏄畬鏁碪RL锛岀洿鎺ヨ繑鍥�
+ if (url.startsWith('http://') || url.startsWith('https://')) {
+ return url
+ }
+ // 鍚﹀垯娣诲姞鍩虹鍩熷悕
+ return `https://nj477vg8876.vicp.fun${url.startsWith('/') ? '' : '/'}${url}`
}
// 澶勭悊姣忎竴绫绘暟鎹細鍒嗙鍥剧墖鍜岃棰�
@@ -145,10 +202,15 @@
const videos = []
items.forEach(item => {
+ const fileUrl = item.url || item.downloadUrl || item.fileUrl
+ if (!fileUrl) return
+
+ const fullUrl = formatUrl(fileUrl)
+
if (item.contentType?.startsWith('image/')) {
- images.push(item.url)
+ images.push(fullUrl)
} else if (item.contentType?.startsWith('video/')) {
- videos.push(item.url)
+ videos.push(fullUrl)
}
})
@@ -263,28 +325,43 @@
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.video-preview {
- width: 100%;
- height: 100%;
- background-color: #333;
- display: flex;
- align-items: center;
- justify-content: center;
position: relative;
}
-.video-tip {
+.video-thumbnail {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.video-overlay {
position: absolute;
- bottom: 5px;
- left: 50%;
- transform: translateX(-50%);
- font-size: 12px;
- color: #fff;
- background-color: rgba(0, 0, 0, 0.6);
- padding: 2px 8px;
- border-radius: 4px;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.3);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ pointer-events: none;
+}
+
+.video-player-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #000;
+ position: relative;
+}
+
+.video-player {
+ width: 100%;
+ height: 100%;
+ max-width: 100vw;
+ max-height: 100vh;
}
.empty-state {
diff --git a/src/manifest.json b/src/manifest.json
index 8759506..28c2445 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -7,10 +7,10 @@
"transformPx" : false,
/* 5+App鐗规湁鐩稿叧 */
"app-plus" : {
- "compatible" : {
- "usingComponents" : true,
- "ignoreVersion" : true
- },
+ "compatible" : {
+ "usingComponents" : true,
+ "ignoreVersion" : true
+ },
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
@@ -21,7 +21,10 @@
"delay" : 0
},
/* 妯″潡閰嶇疆 */
- "modules" : {},
+ "modules" : {
+ "Camera" : {},
+ "VideoPlayer" : {}
+ },
/* 搴旂敤鍙戝竷淇℃伅 */
"distribute" : {
/* android鎵撳寘閰嶇疆 */
diff --git a/src/pages/inspectionUpload/components/formDia.vue b/src/pages/inspectionUpload/components/formDia.vue
index 69b8f43..5421415 100644
--- a/src/pages/inspectionUpload/components/formDia.vue
+++ b/src/pages/inspectionUpload/components/formDia.vue
@@ -285,13 +285,13 @@
try {
let arr = []
if (beforeModelValue.value.length > 0) {
- arr.push(...beforeModelValue.value.map(item => ({ ...item, statusType: 0 })))
+ arr.push(...beforeModelValue.value.map(item => ({ ...item, type: 0 })))
}
if (afterModelValue.value.length > 0) {
- arr.push(...afterModelValue.value.map(item => ({ ...item, statusType: 1 })))
+ arr.push(...afterModelValue.value.map(item => ({ ...item, type: 1 })))
}
if (issueModelValue.value.length > 0) {
- arr.push(...issueModelValue.value.map(item => ({ ...item, statusType: 2 })))
+ arr.push(...issueModelValue.value.map(item => ({ ...item, type: 2 })))
}
// 鎻愪氦鏁版嵁
diff --git a/src/pages/inspectionUpload/components/qrCodeFormDia.vue b/src/pages/inspectionUpload/components/qrCodeFormDia.vue
index bcf30ef..de2cb21 100644
--- a/src/pages/inspectionUpload/components/qrCodeFormDia.vue
+++ b/src/pages/inspectionUpload/components/qrCodeFormDia.vue
@@ -48,7 +48,7 @@
:fileSize="50"
:fileType="['jpg', 'jpeg', 'png', 'mp4', 'mov']"
:maxVideoDuration="60"
- :statusType="0"
+ :type="0"
@update:modelValue="handleStorageBlobUpdate"
/>
</view>
--
Gitblit v1.9.3