<template>
|
<view class="inspection-upload-page">
|
<!-- 页面头部 -->
|
<PageHeader title="设备巡检" @back="goBack" />
|
<!-- 数据列表 -->
|
<view class="table-section">
|
<!-- 生产巡检列表 -->
|
<view class="task-list">
|
<view v-for="(item, index) in taskTableData" :key="index" class="task-item">
|
<view class="task-header">
|
<view class="task-info">
|
<text class="task-name">{{ item.taskName }}</text>
|
<text class="task-location">{{ item.inspectionLocation }}</text>
|
</view>
|
<view class="task-actions">
|
<u-button type="primary" size="small" :disabled="item.inspectionStatus > 0 && item.acceptStatus !== 2"
|
@click.stop="startUploadForTask(item)" :customStyle="{
|
borderRadius: '15px',
|
height: '30px',
|
fontSize: '12px',
|
marginRight: '8px'
|
}">
|
巡检
|
</u-button>
|
<u-button type="success" size="small" @click.stop="viewAttachments(item)" :customStyle="{
|
borderRadius: '15px',
|
height: '30px',
|
fontSize: '12px'
|
}">
|
查看详情
|
</u-button>
|
</view>
|
</view>
|
<view class="task-details">
|
<view class="detail-item">
|
<text class="detail-label">任务ID</text>
|
<text class="detail-value">{{ item.taskId || item.id }}</text>
|
</view>
|
<view class="detail-item">
|
<text class="detail-label">备注</text>
|
<text class="detail-value">{{ item.remarks || '无' }}</text>
|
</view>
|
<view class="detail-item">
|
<text class="detail-label">执行人</text>
|
<text class="detail-value">{{ item.inspector }}</text>
|
</view>
|
<view class="detail-item">
|
<text class="detail-label">任务下发日期</text>
|
<text class="detail-value">{{ item.dateStr }}</text>
|
</view>
|
<view class="detail-item">
|
<text class="detail-label">巡检状态</text>
|
<view class="detail-value">
|
<uni-tag v-if="item.inspectionStatus === 1" text="正常" size="small" type="success" inverted></uni-tag>
|
<uni-tag v-else-if="item.inspectionStatus === 2" text="异常" size="small" type="error" inverted></uni-tag>
|
<uni-tag v-else text="未巡检" size="small" type="warning" inverted></uni-tag>
|
</view>
|
</view>
|
<view class="detail-item">
|
<text class="detail-label">验收状态</text>
|
<view class="detail-value">
|
<uni-tag v-if="item.acceptStatus === 1" text="已通过" size="small" type="success" inverted></uni-tag>
|
<uni-tag v-else-if="item.acceptStatus === 2" text="已退回" size="small" type="error" inverted></uni-tag>
|
<uni-tag v-else-if="item.inspectionStatus > 0" text="待验收" size="small" type="warning"
|
inverted></uni-tag>
|
<text v-else>--</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<uni-load-more :status="loadMoreStatus"></uni-load-more>
|
</view>
|
<!-- 空状态 -->
|
<view v-if="taskTableData?.length === 0" class="no-data">
|
<text>暂无数据</text>
|
</view>
|
</view>
|
|
<!-- 巡检弹窗 -->
|
<view v-if="showUploadDialog" class="custom-modal-overlay" @click="closeUploadDialog">
|
<view class="custom-modal-container" @click.stop>
|
<view class="upload-popup-content">
|
<view class="upload-popup-header">
|
<text class="upload-popup-title">设备巡检</text>
|
</view>
|
<view class="upload-popup-body">
|
<!-- 异常状态选择 -->
|
<view class="exception-section">
|
<text class="section-title">设备状态</text>
|
<view class="exception-options">
|
<view class="exception-option" :class="{ active: hasException === false }"
|
@click="setExceptionStatus(false)">
|
<u-icon name="checkmark-circle" size="20" color="#52c41a"></u-icon>
|
<text>正常</text>
|
</view>
|
<view class="exception-option" :class="{ active: hasException === true }"
|
@click="setExceptionStatus(true)">
|
<u-icon name="close-circle" size="20" color="#ff4d4f"></u-icon>
|
<text>存在异常</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 异常情况才显示上传区域 -->
|
<view v-if="hasException === true" class="media-upload-section">
|
<!-- 拍照和视频上传按钮 -->
|
<view class="upload-buttons">
|
<u-button type="primary" @click="chooseMedia('image')" :loading="uploading"
|
:disabled="uploadFiles.length >= uploadConfig.limit" :customStyle="{ marginRight: '10px', flex: 1 }">
|
<u-icon name="camera" size="18" color="#fff" style="margin-right: 5px;"></u-icon>
|
{{ uploading ? '上传中...' : '拍照' }}
|
</u-button>
|
<u-button type="success" @click="chooseMedia('video')" :loading="uploading"
|
:disabled="uploadFiles.length >= uploadConfig.limit" :customStyle="{ flex: 1 }">
|
<uni-icons type="videocam" name="videocam" size="18" color="#fff"
|
style="margin-right: 5px;"></uni-icons>
|
{{ uploading ? '上传中...' : '拍视频' }}
|
</u-button>
|
</view>
|
|
<!-- 上传进度 -->
|
<view v-if="uploading" class="upload-progress">
|
<u-line-progress :percentage="uploadProgress" :showText="true" activeColor="#409eff"></u-line-progress>
|
</view>
|
|
<!-- 文件列表 -->
|
<view v-if="uploadFiles.length > 0" class="file-list">
|
<view v-for="(file, index) in uploadFiles" :key="index" class="file-item">
|
<view class="file-preview-container" @click="previewUploadedMedia(file)">
|
<image v-if="isImageFile(file)" :src="getFileAccessUrl(file)" class="file-preview"
|
mode="aspectFill" />
|
<view v-else-if="isVideoFile(file)" class="video-preview">
|
<uni-icons type="videocam" name="videocam" size="18" color="#fff"
|
style="margin-right: 5px;"></uni-icons>
|
<text class="video-text">视频</text>
|
</view>
|
<!-- 删除按钮 -->
|
<view class="delete-btn" @click.stop="removeFile(index)">
|
<u-icon name="close" size="12" color="#fff"></u-icon>
|
</view>
|
</view>
|
<view class="file-info">
|
<text class="file-name">{{ file.bucketFilename || file.name || (isImageFile(file) ? '图片' : '视频')
|
}}</text>
|
<text class="file-size">{{ formatFileSize(file.size) }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 空状态提示 -->
|
<view v-if="uploadFiles.length === 0" class="empty-state">
|
<text>请拍摄异常情况的照片或视频</text>
|
</view>
|
|
<!-- 统计信息 -->
|
<view class="upload-summary">
|
<text class="summary-text">
|
已上传 {{ uploadFiles.length }} 个文件（图片/视频）
|
</text>
|
</view>
|
</view>
|
|
<!-- 异常描述输入框 -->
|
<view v-if="hasException === true" class="exception-desc-section">
|
<text class="section-title">异常描述</text>
|
<u-input v-model="exceptionDesc" type="textarea" :autoHeight="true" :minHeight="120"
|
placeholder="请详细描述异常现象及情况" :maxlength="500" count />
|
</view>
|
|
<!-- 正常状态的提示 -->
|
<view v-if="hasException === false" class="normal-tip">
|
<u-icon name="info-circle" size="20" color="#52c41a"></u-icon>
|
<text class="tip-text">设备检查正常，无需上传附件</text>
|
</view>
|
</view>
|
|
<view class="upload-popup-footer">
|
<u-button @click="closeUploadDialog" :customStyle="{ marginRight: '10px' }">取消</u-button>
|
<u-button type="primary" @click="submitUpload">提交</u-button>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 查看附件弹窗 -->
|
<view v-if="showAttachmentDialog" class="custom-modal-overlay" @click="closeAttachmentDialog">
|
<view class="custom-modal-container" @click.stop>
|
<view class="attachment-popup-content">
|
<view class="attachment-popup-header">
|
<text class="attachment-popup-title">查看详情 - {{ currentViewTask?.taskName }}</text>
|
<view class="close-btn-attachment" @click="closeAttachmentDialog">
|
<u-icon name="close" size="16" color="#666"></u-icon>
|
</view>
|
</view>
|
<view class="attachment-popup-body">
|
<!-- 异常描述 -->
|
<view class="detail-info-section" v-if="currentViewTask?.inspectionStatus === 2">
|
<text class="info-label">异常描述：</text>
|
<text class="info-value">{{ currentViewTask?.inspectionRemark || '无' }}</text>
|
</view>
|
<!-- 附件列表 -->
|
<view class="attachment-content">
|
<view v-if="attachmentList.length > 0" class="attachment-list">
|
<view v-for="(file, index) in attachmentList" :key="index" class="attachment-item"
|
@click="previewAttachment(file)">
|
<view class="attachment-preview-container">
|
<image v-if="isImageFile(file)" :src="getFileAccessUrl(file)" class="attachment-preview"
|
mode="aspectFill" />
|
<view v-else class="attachment-video-preview">
|
<u-icon name="video" size="24" color="#409eff"></u-icon>
|
<text class="video-text">视频</text>
|
</view>
|
</view>
|
<view class="attachment-info">
|
<text class="attachment-name">{{ file.originalFilename || file.bucketFilename || file.name || '附件'
|
}}</text>
|
<text class="attachment-size">{{ formatFileSize(file.byteSize || file.size) }}</text>
|
</view>
|
</view>
|
</view>
|
<view v-else class="attachment-empty">
|
<text>暂无附件</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 视频预览弹窗 -->
|
<view v-if="showVideoDialog" class="video-modal-overlay" @click="closeVideoPreview">
|
<view class="video-modal-container" @click.stop>
|
<view class="video-modal-header">
|
<text class="video-modal-title">{{ currentVideoFile?.originalFilename || '视频预览' }}</text>
|
<view class="close-btn-video" @click="closeVideoPreview">
|
<u-icon name="close" size="16" color="#fff"></u-icon>
|
</view>
|
</view>
|
<view class="video-modal-body">
|
<video v-if="currentVideoFile" :src="currentVideoFile._playUrl" class="video-player" controls autoplay
|
@error="handleVideoError"></video>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { onMounted, onUnmounted, ref, nextTick, computed, reactive } from "vue";
|
import { onShow, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
|
import PageHeader from "@/components/PageHeader.vue";
|
import {
|
inspectionTaskList,
|
uploadInspectionTask,
|
} from "@/api/inspectionManagement";
|
import { getToken } from "@/utils/auth";
|
import config from "@/config";
|
|
// 加载提示方法
|
const showLoadingToast = message => {
|
uni.showLoading({
|
title: message,
|
mask: true,
|
});
|
};
|
const closeToast = () => {
|
uni.hideLoading();
|
};
|
|
// 表格数据
|
const taskTableData = ref([]);
|
|
// 当前任务信息
|
const currentScanningTask = ref(null);
|
const infoData = ref(null);
|
|
// 上传相关状态
|
const showUploadDialog = ref(false);
|
const uploadFiles = ref([]);
|
const uploading = ref(false);
|
const uploadProgress = ref(0);
|
const number = ref(0);
|
|
// 异常状态
|
const hasException = ref(null);
|
// 异常描述
|
const exceptionDesc = ref("");
|
|
// 查看附件相关状态
|
const showAttachmentDialog = ref(false);
|
const currentViewTask = ref(null);
|
const attachmentList = ref([]);
|
|
// 视频预览相关状态
|
const showVideoDialog = ref(false);
|
const currentVideoFile = ref(null);
|
|
// 上传配置
|
const uploadConfig = {
|
action: "/file/upload",
|
limit: 10,
|
fileSize: 50,
|
fileType: ["jpg", "jpeg", "png", "mp4", "mov"],
|
maxVideoDuration: 60,
|
};
|
|
const uploadFileUrl = computed(() => {
|
const baseUrl = config.baseUrl;
|
return baseUrl + uploadConfig.action;
|
});
|
|
let isRequestCancelled = false;
|
|
const pagesPames = reactive({
|
size: 10,
|
current: 1,
|
});
|
|
const loadMoreStatus = computed(() => {
|
if (loading.value) {
|
return "loading";
|
}
|
if (noMore.value) {
|
return "noMore";
|
}
|
return "more";
|
});
|
const totalSize = ref(0);
|
const noMore = computed(() => {
|
return taskTableData.value.length >= totalSize.value;
|
});
|
const loading = ref(false);
|
|
const reloadPage = () => {
|
pagesPames.current = 1;
|
taskTableData.value = [];
|
getList();
|
};
|
const loadPage = () => {
|
if (noMore.value || loading.value) return;
|
pagesPames.current += 1;
|
getList();
|
};
|
|
onMounted(() => { });
|
|
onReachBottom(() => {
|
loadPage();
|
});
|
onPullDownRefresh(() => {
|
reloadPage();
|
uni.stopPullDownRefresh();
|
});
|
|
onShow(() => {
|
reloadPage();
|
});
|
|
onUnmounted(() => {
|
isRequestCancelled = true;
|
if (showUploadDialog.value) {
|
showUploadDialog.value = false;
|
}
|
});
|
|
const goBack = () => {
|
uni.navigateBack();
|
};
|
|
const getList = () => {
|
isRequestCancelled = false;
|
loading.value = true;
|
inspectionTaskList({ ...pagesPames })
|
.then(res => {
|
if (!isRequestCancelled) {
|
let records = [];
|
if (res && res.data) {
|
totalSize.value = res.data.total;
|
if (Array.isArray(res.data.records)) {
|
records = res.data.records;
|
} else if (Array.isArray(res.data.rows)) {
|
records = res.data.rows;
|
} else if (Array.isArray(res.data)) {
|
records = res.data;
|
} else if (Array.isArray(res.data.list)) {
|
records = res.data.list;
|
}
|
}
|
|
if (records.length > 0) {
|
taskTableData.value = [
|
...taskTableData.value,
|
...records.map(record => {
|
record.fileStatus = getFileStatus(record);
|
return record;
|
}),
|
];
|
} else {
|
taskTableData.value = [];
|
uni.showToast({
|
title: "暂无巡检任务数据",
|
icon: "none",
|
});
|
}
|
}
|
loading.value = false;
|
})
|
.catch(err => {
|
if (!isRequestCancelled) {
|
taskTableData.value = [];
|
uni.showToast({
|
title: "获取数据失败",
|
icon: "error",
|
});
|
}
|
loading.value = false;
|
});
|
};
|
|
const getFileStatus = record => {
|
// 根据是否有附件判断状态
|
let hasFiles = false;
|
if (record.commonFileList && record.commonFileList.length > 0) {
|
hasFiles = true;
|
}
|
if (record.commonFileListBefore && record.commonFileListBefore.length > 0) {
|
hasFiles = true;
|
}
|
if (record.commonFileListAfter && record.commonFileListAfter.length > 0) {
|
hasFiles = true;
|
}
|
return hasFiles ? 2 : 0;
|
};
|
|
const openUploadDialog = task => {
|
if (task) {
|
infoData.value = {
|
...task,
|
taskId: task.taskId || task.id,
|
storageBlobDTO: [],
|
};
|
}
|
showUploadDialog.value = true;
|
};
|
|
const closeUploadDialog = () => {
|
showUploadDialog.value = false;
|
uploadFiles.value = [];
|
hasException.value = null;
|
exceptionDesc.value = "";
|
infoData.value = null;
|
};
|
|
const setExceptionStatus = status => {
|
hasException.value = status;
|
// 切换状态时清空文件
|
if (status === false) {
|
uploadFiles.value = [];
|
exceptionDesc.value = "";
|
}
|
};
|
|
const goToRepair = () => {
|
try {
|
const taskInfo = {
|
taskId: infoData.value?.taskId || infoData.value?.id,
|
taskName: infoData.value?.taskName,
|
inspectionLocation: infoData.value?.inspectionLocation,
|
inspector: infoData.value?.inspector,
|
uploadedFiles: uploadFiles.value,
|
exceptionDesc: exceptionDesc.value,
|
};
|
|
uni.setStorageSync("repairTaskInfo", JSON.stringify(taskInfo));
|
uni.navigateTo({
|
url: "/pages/equipmentManagement/repair/add",
|
});
|
closeUploadDialog();
|
} catch (error) {
|
console.error("跳转报修页面失败:", error);
|
uni.showToast({
|
title: "跳转失败，请重试",
|
icon: "error",
|
});
|
}
|
};
|
|
const submitUpload = async () => {
|
try {
|
// 检查是否选择了异常状态
|
if (hasException.value === null) {
|
uni.showToast({
|
title: "请选择设备状态",
|
icon: "none",
|
});
|
return;
|
}
|
|
// 如果异常状态，检查是否有文件
|
if (hasException.value === true && uploadFiles.value.length === 0) {
|
uni.showToast({
|
title: "请上传异常照片或视频",
|
icon: "none",
|
});
|
return;
|
}
|
|
showLoadingToast("提交中...");
|
|
// 收集所有文件
|
let arr = [...uploadFiles.value];
|
|
// 临时文件ID列表
|
let tempFileIds = [];
|
if (arr.length > 0) {
|
tempFileIds = arr
|
.map(item => item?.tempId ?? item?.tempFileId ?? item?.id)
|
.filter(v => v !== undefined && v !== null && v !== "");
|
}
|
|
// 提交数据
|
infoData.value.storageBlobDTO = arr;
|
infoData.value.hasException = hasException.value;
|
infoData.value.tempFileIds = tempFileIds;
|
// 如果存在异常，添加异常描述
|
if (hasException.value === true) {
|
infoData.value.inspectionRemark = exceptionDesc.value;
|
}
|
|
const result = await uploadInspectionTask({ ...infoData.value });
|
|
if (result && (result.code === 200 || result.success)) {
|
closeToast();
|
uni.showToast({
|
title: "提交成功",
|
icon: "success",
|
});
|
|
const currentHasException = hasException.value;
|
const taskInfoCopy = {
|
taskId: infoData.value?.taskId || infoData.value?.id,
|
taskName: infoData.value?.taskName,
|
inspectionLocation: infoData.value?.inspectionLocation,
|
inspector: infoData.value?.inspector,
|
uploadedFiles: [...uploadFiles.value],
|
exceptionDesc: exceptionDesc.value,
|
};
|
|
closeUploadDialog();
|
|
if (currentHasException) {
|
uni.showModal({
|
title: "提示",
|
content: "是否新增报修？",
|
success: function (res) {
|
if (res.confirm) {
|
uni.setStorageSync("repairTaskInfo", JSON.stringify(taskInfoCopy));
|
uni.navigateTo({
|
url: "/pages/equipmentManagement/repair/add",
|
});
|
}
|
setTimeout(() => {
|
reloadPage();
|
}, 500);
|
}
|
});
|
} else {
|
setTimeout(() => {
|
reloadPage();
|
}, 500);
|
}
|
} else {
|
closeToast();
|
uni.showToast({
|
title: result?.msg || result?.message || "提交失败",
|
icon: "error",
|
});
|
}
|
} catch (error) {
|
console.error("提交失败:", error);
|
closeToast();
|
|
let errorMessage = "提交失败";
|
if (error.message) {
|
errorMessage = error.message;
|
} else if (error.msg) {
|
errorMessage = error.msg;
|
} else if (typeof error === "string") {
|
errorMessage = error;
|
}
|
|
uni.showToast({
|
title: errorMessage,
|
icon: "error",
|
});
|
}
|
};
|
|
const startUploadForTask = async (task, type) => {
|
openUploadDialog(task);
|
};
|
|
const viewAttachments = async task => {
|
try {
|
currentViewTask.value = task;
|
attachmentList.value = [];
|
|
// 收集所有附件
|
let allFiles = [];
|
if (task?.commonFileList) {
|
allFiles = allFiles.concat(task.commonFileList);
|
}
|
if (task?.commonFileListBefore) {
|
allFiles = allFiles.concat(task.commonFileListBefore);
|
}
|
if (task?.commonFileListAfter) {
|
allFiles = allFiles.concat(task.commonFileListAfter);
|
}
|
|
attachmentList.value = allFiles.map(file => ({
|
...file,
|
name: file?.name || file?.originalFilename || file?.bucketFilename,
|
bucketFilename: file?.bucketFilename || file?.name,
|
originalFilename: file?.originalFilename || file?.name,
|
url: getFileAccessUrl(file),
|
downloadUrl: getFileAccessUrl(file),
|
size: file?.size || file?.byteSize,
|
}));
|
|
showAttachmentDialog.value = true;
|
} catch (error) {
|
uni.showToast({
|
title: "获取附件失败",
|
icon: "error",
|
});
|
}
|
};
|
|
const closeAttachmentDialog = () => {
|
showAttachmentDialog.value = false;
|
currentViewTask.value = null;
|
attachmentList.value = [];
|
};
|
|
const isImageFile = file => {
|
if (file.contentType && file.contentType.startsWith("image/")) {
|
return true;
|
}
|
if (file.type === "image" || file.mediaType === "image") return true;
|
const name = file.bucketFilename || file.originalFilename || file.name || "";
|
const ext = name.split(".").pop()?.toLowerCase();
|
return ["jpg", "jpeg", "png", "gif", "webp"].includes(ext);
|
};
|
|
const isVideoFile = file => {
|
if (!file) return false;
|
if (file.type === "video" || file.mediaType === "video") return true;
|
const name = file.bucketFilename || file.originalFilename || file.name || "";
|
const ext = name.split(".").pop()?.toLowerCase();
|
return ["mp4", "mov", "avi", "wmv", "mkv", "webm"].includes(ext);
|
};
|
|
const filePreviewBase = config.fileUrl;
|
|
const normalizeFileUrl = (rawUrl = "") => {
|
let fileUrl = rawUrl || "";
|
if (typeof fileUrl === "string") {
|
fileUrl = fileUrl.trim().replace(/^['"]|['"]$/g, "");
|
}
|
const javaApi = filePreviewBase;
|
const localPrefixes = ["wxfile://", "file://", "content://", "blob:", "data:"];
|
|
if (localPrefixes.some(prefix => fileUrl.startsWith(prefix))) {
|
return fileUrl;
|
}
|
|
if (fileUrl && fileUrl.indexOf("\\") > -1) {
|
const lowerPath = fileUrl.toLowerCase();
|
const uploadPathIndex = lowerPath.indexOf("uploadpath");
|
const prodIndex = lowerPath.indexOf("\\prod\\");
|
|
if (uploadPathIndex > -1) {
|
fileUrl = fileUrl.substring(uploadPathIndex).replace(/\\/g, "/");
|
} else if (prodIndex > -1) {
|
fileUrl = fileUrl
|
.substring(prodIndex + "\\prod\\".length)
|
.replace(/\\/g, "/");
|
} else {
|
fileUrl = fileUrl.replace(/\\/g, "/");
|
}
|
}
|
|
const normalizedLower = String(fileUrl).toLowerCase();
|
const fileProdIdx = normalizedLower.indexOf("/file/prod/");
|
if (fileProdIdx > -1) {
|
fileUrl = `/profile/prod/${fileUrl.substring(fileProdIdx + "/file/prod/".length)}`;
|
}
|
const fileTempIdx = normalizedLower.indexOf("/file/temp/");
|
if (fileTempIdx > -1) {
|
fileUrl = `/profile/temp/${fileUrl.substring(fileTempIdx + "/file/temp/".length)}`;
|
}
|
|
if (/^\/?uploadPath/i.test(fileUrl)) {
|
fileUrl = fileUrl.replace(/^\/?uploadPath/i, "/profile");
|
}
|
|
if (fileUrl && !fileUrl.startsWith("http")) {
|
if (!fileUrl.startsWith("/")) fileUrl = "/" + fileUrl;
|
fileUrl = javaApi + fileUrl;
|
}
|
|
return fileUrl;
|
};
|
|
const getFileAccessUrl = (file = {}) => {
|
if (file?.link) {
|
if (String(file.link).startsWith("http")) return file.link;
|
return normalizeFileUrl(file.link);
|
}
|
const remoteUrl = normalizeFileUrl(
|
file?.url ||
|
file?.downloadUrl ||
|
file?.tempPath ||
|
""
|
);
|
if (remoteUrl) return remoteUrl;
|
if (file?._localPreviewUrl) return file._localPreviewUrl;
|
return normalizeFileUrl(file?.tempFilePath || file?.path || "");
|
};
|
|
const previewUploadedMedia = file => {
|
if (!file) return;
|
if (isImageFile(file)) {
|
const imageUrls = uploadFiles.value
|
.filter(f => isImageFile(f))
|
.map(f => getFileAccessUrl(f))
|
.filter(Boolean);
|
const current = getFileAccessUrl(file);
|
if (!imageUrls.length || !current) return;
|
uni.previewImage({
|
urls: imageUrls,
|
current,
|
});
|
return;
|
}
|
if (isVideoFile(file)) {
|
playVideoFile(file);
|
}
|
};
|
|
const previewAttachment = file => {
|
if (isImageFile(file)) {
|
const imageUrls = attachmentList.value
|
.filter(f => isImageFile(f))
|
.map(f => getFileAccessUrl(f));
|
|
uni.previewImage({
|
urls: imageUrls,
|
current: getFileAccessUrl(file),
|
});
|
} else {
|
playVideoFile(file);
|
}
|
};
|
|
const safeEncodeUrl = url => {
|
if (!url) return "";
|
if (!/^https?:\/\//i.test(url)) return url;
|
try {
|
return encodeURI(url);
|
} catch (e) {
|
return url;
|
}
|
};
|
|
const getPlayableVideoUrl = file => {
|
return safeEncodeUrl(getFileAccessUrl(file));
|
};
|
|
const getFallbackLocalVideoUrl = file => {
|
const local = file?._localPreviewUrl || file?.tempFilePath || file?.path || "";
|
return safeEncodeUrl(local);
|
};
|
|
const playVideoFile = file => {
|
const remoteSrc = getPlayableVideoUrl(file);
|
const localSrc = getFallbackLocalVideoUrl(file);
|
const src = remoteSrc || localSrc;
|
if (!src) {
|
uni.showToast({
|
title: "视频地址无效",
|
icon: "none",
|
});
|
return;
|
}
|
|
showVideoPreview({
|
...file,
|
_playUrl: src,
|
_playUrlLocal: localSrc,
|
_playUrlRemote: remoteSrc,
|
});
|
};
|
|
const showVideoPreview = file => {
|
currentVideoFile.value = file;
|
showVideoDialog.value = true;
|
};
|
|
const closeVideoPreview = () => {
|
showVideoDialog.value = false;
|
currentVideoFile.value = null;
|
};
|
|
const handleVideoError = () => {
|
const localUrl = currentVideoFile.value?._playUrlLocal;
|
const remoteUrl = currentVideoFile.value?._playUrlRemote;
|
const currentUrl = currentVideoFile.value?._playUrl;
|
if (remoteUrl && currentUrl !== remoteUrl) {
|
currentVideoFile.value = {
|
...currentVideoFile.value,
|
_playUrl: remoteUrl,
|
};
|
uni.showToast({
|
title: "已切换远程视频重试播放",
|
icon: "none",
|
});
|
return;
|
}
|
if (localUrl && currentUrl !== localUrl) {
|
currentVideoFile.value = {
|
...currentVideoFile.value,
|
_playUrl: localUrl,
|
};
|
uni.showToast({
|
title: "已切换本地视频重试播放",
|
icon: "none",
|
});
|
return;
|
}
|
uni.showToast({
|
title: "视频播放失败",
|
icon: "error",
|
});
|
};
|
|
const chooseMedia = type => {
|
if (uploadFiles.value.length >= uploadConfig.limit) {
|
uni.showToast({
|
title: `最多只能选择${uploadConfig.limit}个文件`,
|
icon: "none",
|
});
|
return;
|
}
|
|
const remaining = uploadConfig.limit - uploadFiles.value.length;
|
|
if (typeof uni.chooseMedia === "function") {
|
uni.chooseMedia({
|
count: Math.min(remaining, 1),
|
mediaType: [type || "image"],
|
sizeType: ["compressed", "original"],
|
sourceType: ["camera"],
|
success: res => {
|
try {
|
const files = res?.tempFiles || [];
|
if (!files.length) throw new Error("未获取到文件");
|
|
files.forEach((tf, idx) => {
|
const filePath = tf.tempFilePath || tf.path || "";
|
const fileType = tf.fileType || type || "image";
|
const ext = fileType === "video" ? "mp4" : "jpg";
|
const file = {
|
tempFilePath: filePath,
|
path: filePath,
|
type: fileType,
|
name: `${fileType}_${Date.now()}_${idx}.${ext}`,
|
size: tf.size || 0,
|
duration: tf.duration || 0,
|
createTime: Date.now(),
|
uid: Date.now() + Math.random() + idx,
|
};
|
handleBeforeUpload(file);
|
});
|
} catch (e) {
|
console.error("处理拍摄结果失败:", e);
|
uni.showToast({ title: "处理文件失败", icon: "error" });
|
}
|
},
|
fail: err => {
|
console.error("拍摄失败:", err);
|
uni.showToast({ title: "拍摄失败", icon: "error" });
|
},
|
});
|
return;
|
}
|
|
if (type === "video") {
|
chooseVideo();
|
} else {
|
uni.chooseImage({
|
count: 1,
|
sizeType: ["compressed", "original"],
|
sourceType: ["camera"],
|
success: res => {
|
const tempFilePath = res?.tempFilePaths?.[0];
|
const tempFile = res?.tempFiles?.[0] || {};
|
if (!tempFilePath) return;
|
handleBeforeUpload({
|
tempFilePath,
|
path: tempFilePath,
|
type: "image",
|
name: `photo_${Date.now()}.jpg`,
|
size: tempFile.size || 0,
|
createTime: Date.now(),
|
uid: Date.now() + Math.random(),
|
});
|
},
|
});
|
}
|
};
|
|
const removeFile = index => {
|
uni.showModal({
|
title: "确认删除",
|
content: "确定要删除这个文件吗？",
|
success: res => {
|
if (res.confirm) {
|
uploadFiles.value.splice(index, 1);
|
uni.showToast({
|
title: "删除成功",
|
icon: "success",
|
});
|
}
|
},
|
});
|
};
|
|
const handleBeforeUpload = async file => {
|
if (uploadConfig.fileType && Array.isArray(uploadConfig.fileType) && uploadConfig.fileType.length > 0) {
|
const fileName = file.name || "";
|
const fileExtension = fileName ? fileName.split(".").pop().toLowerCase() : "";
|
|
let expectedTypes = [];
|
if (file.type === "image") {
|
expectedTypes = ["jpg", "jpeg", "png", "gif", "webp"];
|
} else if (file.type === "video") {
|
expectedTypes = ["mp4", "mov", "avi", "wmv"];
|
}
|
|
if (fileExtension && expectedTypes.length > 0) {
|
const isAllowed = expectedTypes.some(
|
type => uploadConfig.fileType.includes(type) && type === fileExtension
|
);
|
|
if (!isAllowed) {
|
uni.showToast({
|
title: `文件格式不支持，请拍摄 ${expectedTypes.join("/")} 格式的文件`,
|
icon: "none",
|
});
|
return false;
|
}
|
}
|
}
|
|
uploadFile(file);
|
return true;
|
};
|
|
const uploadFile = async file => {
|
uploading.value = true;
|
uploadProgress.value = 0;
|
number.value++;
|
|
const token = getToken();
|
if (!token) {
|
handleUploadError("用户未登录");
|
return;
|
}
|
|
const typeValue = 12; // 统一使用 type=12 表示巡检附件
|
|
uploadWithUniUploadFile(
|
file,
|
file.tempFilePath || file.path || "",
|
typeValue,
|
token
|
);
|
};
|
|
const uploadWithUniUploadFile = (file, filePath, typeValue, token) => {
|
if (!filePath) {
|
handleUploadError("文件路径不存在");
|
return;
|
}
|
|
const uploadTask = uni.uploadFile({
|
url: uploadFileUrl.value,
|
filePath: filePath,
|
name: "file",
|
formData: {
|
type: typeValue,
|
},
|
header: {
|
Authorization: `Bearer ${token}`,
|
},
|
success: res => {
|
try {
|
if (res.statusCode === 200) {
|
const response = JSON.parse(res.data);
|
if (response.code === 200) {
|
handleUploadSuccess(response, file);
|
uni.showToast({
|
title: "上传成功",
|
icon: "success",
|
});
|
} else {
|
handleUploadError(response.msg || "服务器返回错误");
|
}
|
} else {
|
handleUploadError(`服务器错误，状态码: ${res.statusCode}`);
|
}
|
} catch (e) {
|
console.error("解析响应失败:", e);
|
handleUploadError("响应数据解析失败: " + e.message);
|
}
|
},
|
fail: err => {
|
console.error("上传失败:", err.errMsg || err);
|
number.value--;
|
|
let errorMessage = "上传失败";
|
if (err.errMsg) {
|
if (err.errMsg.includes("statusCode: null")) {
|
errorMessage = "网络连接失败，请检查网络设置";
|
} else if (err.errMsg.includes("timeout")) {
|
errorMessage = "上传超时，请重试";
|
} else if (err.errMsg.includes("fail")) {
|
errorMessage = "上传失败，请检查网络连接";
|
} else {
|
errorMessage = err.errMsg;
|
}
|
}
|
|
handleUploadError(errorMessage);
|
},
|
complete: () => {
|
uploading.value = false;
|
uploadProgress.value = 0;
|
},
|
});
|
|
if (uploadTask && uploadTask.onProgressUpdate) {
|
uploadTask.onProgressUpdate(res => {
|
uploadProgress.value = res.progress;
|
});
|
}
|
};
|
|
const handleUploadError = (message = "上传文件失败") => {
|
uploading.value = false;
|
uploadProgress.value = 0;
|
uni.showToast({
|
title: message,
|
icon: "error",
|
});
|
};
|
|
const handleUploadSuccess = (res, file) => {
|
console.log("上传成功响应:", res);
|
|
let uploadedFile = null;
|
uploadedFile = res.data;
|
|
if (!uploadedFile) {
|
console.error("无法解析上传响应数据:", res);
|
number.value--;
|
handleUploadError("上传响应数据格式错误");
|
return;
|
}
|
|
const fileData = {
|
...file,
|
id: uploadedFile.id,
|
tempId: uploadedFile.tempId ?? uploadedFile.tempFileId ?? uploadedFile.id,
|
url: uploadedFile.url || uploadedFile.downloadUrl || uploadedFile.tempPath || file.tempFilePath || file.path,
|
tempPath: uploadedFile.tempPath || file.tempPath || "",
|
_localPreviewUrl: file.tempFilePath || file.path || "",
|
bucketFilename: uploadedFile.bucketFilename || uploadedFile.originalFilename || uploadedFile.originalName || file.name,
|
downloadUrl: uploadedFile.downloadUrl || uploadedFile.url,
|
size: uploadedFile.size || uploadedFile.byteSize || file.size,
|
createTime: uploadedFile.createTime || new Date().getTime(),
|
mediaType: file.type || uploadedFile.mediaType,
|
type: 20, // 统一使用 type=20
|
};
|
|
uploadFiles.value.push(fileData);
|
number.value = 0;
|
};
|
|
const formatFileSize = size => {
|
if (!size) return "";
|
if (size < 1024) return size + "B";
|
if (size < 1024 * 1024) return (size / 1024).toFixed(1) + "KB";
|
return (size / (1024 * 1024)).toFixed(1) + "MB";
|
};
|
</script>
|
|
<style scoped>
|
.inspection-upload-page {
|
min-height: 100vh;
|
background-color: #f5f5f5;
|
}
|
|
.table-section {
|
padding: 15px;
|
}
|
|
.task-list {
|
display: flex;
|
flex-direction: column;
|
gap: 12px;
|
}
|
|
.task-item {
|
background: #fff;
|
border-radius: 12px;
|
padding: 15px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
transition: all 0.3s ease;
|
}
|
|
.task-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
margin-bottom: 12px;
|
}
|
|
.task-info {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
}
|
|
.task-name {
|
font-size: 16px;
|
font-weight: 600;
|
color: #333;
|
}
|
|
.task-location {
|
font-size: 14px;
|
color: #666;
|
}
|
|
.task-actions {
|
display: flex;
|
gap: 8px;
|
}
|
|
.task-details {
|
display: flex;
|
flex-direction: column;
|
gap: 6px;
|
}
|
|
.detail-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.detail-label {
|
font-size: 12px;
|
color: #999;
|
}
|
|
.detail-value {
|
font-size: 12px;
|
color: #666;
|
font-weight: 500;
|
}
|
|
.no-data {
|
text-align: center;
|
padding: 40px 20px;
|
color: #999;
|
font-size: 14px;
|
}
|
|
.custom-modal-overlay {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(0, 0, 0, 0.5);
|
z-index: 10000;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 20px;
|
}
|
|
.custom-modal-container {
|
width: 100%;
|
max-width: 500px;
|
max-height: 80vh;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.upload-popup-content {
|
background: #fff;
|
border-radius: 12px;
|
width: 100%;
|
min-height: 300px;
|
max-height: 80vh;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
}
|
|
.upload-popup-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 15px 20px;
|
border-bottom: 1px solid #eee;
|
}
|
|
.upload-popup-title {
|
font-size: 16px;
|
font-weight: 600;
|
color: #333;
|
}
|
|
.upload-popup-body {
|
flex: 1;
|
padding: 20px;
|
overflow-y: auto;
|
}
|
|
.upload-popup-footer {
|
display: flex;
|
justify-content: flex-end;
|
padding: 15px 20px;
|
border-top: 1px solid #eee;
|
gap: 10px;
|
}
|
|
.upload-buttons {
|
display: flex;
|
gap: 10px;
|
margin-bottom: 15px;
|
}
|
|
.file-list {
|
margin-top: 15px;
|
display: flex;
|
flex-wrap: wrap;
|
gap: 12px;
|
}
|
|
.file-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
background: #fff;
|
border-radius: 12px;
|
padding: 8px;
|
border: 1px solid #e9ecef;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
transition: all 0.3s ease;
|
width: calc(50% - 6px);
|
min-width: 120px;
|
}
|
|
.file-preview-container {
|
position: relative;
|
margin-bottom: 8px;
|
}
|
|
.file-preview {
|
width: 80px;
|
height: 80px;
|
border-radius: 8px;
|
object-fit: cover;
|
border: 2px solid #f0f0f0;
|
}
|
|
.video-preview {
|
width: 80px;
|
height: 80px;
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
border-radius: 8px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
border: 2px solid #f0f0f0;
|
}
|
|
.video-text {
|
font-size: 12px;
|
color: #666;
|
margin-top: 4px;
|
}
|
|
.delete-btn {
|
position: absolute;
|
top: -6px;
|
right: -6px;
|
width: 20px;
|
height: 20px;
|
background: #ff4757;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
|
transition: all 0.3s ease;
|
}
|
|
.file-info {
|
text-align: center;
|
width: 100%;
|
}
|
|
.file-name {
|
font-size: 12px;
|
color: #333;
|
font-weight: 500;
|
display: block;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
max-width: 100px;
|
}
|
|
.file-size {
|
font-size: 10px;
|
color: #999;
|
margin-top: 2px;
|
display: block;
|
}
|
|
.empty-state {
|
text-align: center;
|
padding: 40px 20px;
|
color: #999;
|
font-size: 14px;
|
background: #f8f9fa;
|
border-radius: 8px;
|
border: 2px dashed #ddd;
|
}
|
|
.upload-progress {
|
margin: 15px 0;
|
padding: 0 10px;
|
}
|
|
.exception-section {
|
margin-bottom: 20px;
|
padding: 15px;
|
background: #f8f9fa;
|
border-radius: 8px;
|
border: 1px solid #e9ecef;
|
}
|
|
.section-title {
|
display: block;
|
font-size: 14px;
|
font-weight: 600;
|
color: #333;
|
margin-bottom: 12px;
|
}
|
|
.exception-options {
|
display: flex;
|
gap: 12px;
|
}
|
|
.exception-option {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: 8px;
|
padding: 12px 16px;
|
background: #fff;
|
border: 2px solid #e9ecef;
|
border-radius: 8px;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
font-size: 14px;
|
color: #666;
|
}
|
|
.exception-option.active {
|
border-color: #409eff;
|
background: #f0f8ff;
|
color: #409eff;
|
font-weight: 500;
|
}
|
|
.exception-desc-section {
|
margin-top: 15px;
|
}
|
|
.normal-tip {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
padding: 15px;
|
background: #f6ffed;
|
border: 1px solid #b7eb8f;
|
border-radius: 8px;
|
}
|
|
.tip-text {
|
font-size: 14px;
|
color: #52c41a;
|
}
|
|
.upload-summary {
|
margin-top: 15px;
|
padding: 10px;
|
background: #f8f9fa;
|
border-radius: 6px;
|
border-left: 3px solid #409eff;
|
}
|
|
.summary-text {
|
font-size: 12px;
|
color: #666;
|
line-height: 1.4;
|
}
|
|
.media-upload-section {
|
margin-bottom: 15px;
|
}
|
|
.attachment-popup-content {
|
background: #fff;
|
border-radius: 12px;
|
width: 100%;
|
min-height: 400px;
|
max-height: 70vh;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
}
|
|
.detail-info-section {
|
padding: 10px;
|
background-color: #fff2f0;
|
border: 1px solid #ffccc7;
|
border-radius: 8px;
|
margin-bottom: 15px;
|
}
|
|
.info-label {
|
font-size: 14px;
|
font-weight: 600;
|
color: #ff4d4f;
|
}
|
|
.info-value {
|
font-size: 14px;
|
color: #ff4d4f;
|
margin-top: 5px;
|
display: block;
|
}
|
|
.attachment-popup-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 15px 20px;
|
border-bottom: 1px solid #eee;
|
background: #f8f9fa;
|
}
|
|
.attachment-popup-title {
|
font-size: 16px;
|
font-weight: 600;
|
color: #333;
|
}
|
|
.close-btn-attachment {
|
width: 28px;
|
height: 28px;
|
border-radius: 50%;
|
background: #f5f5f5;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
}
|
|
.attachment-popup-body {
|
flex: 1;
|
padding: 15px 20px;
|
overflow-y: auto;
|
}
|
|
.attachment-content {
|
min-height: 200px;
|
}
|
|
.attachment-list {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 12px;
|
}
|
|
.attachment-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
background: #fff;
|
border-radius: 12px;
|
padding: 8px;
|
border: 1px solid #e9ecef;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
transition: all 0.3s ease;
|
width: calc(33.33% - 8px);
|
min-width: 100px;
|
cursor: pointer;
|
}
|
|
.attachment-preview-container {
|
margin-bottom: 8px;
|
}
|
|
.attachment-preview {
|
width: 80px;
|
height: 80px;
|
border-radius: 8px;
|
object-fit: cover;
|
border: 2px solid #f0f0f0;
|
}
|
|
.attachment-video-preview {
|
width: 80px;
|
height: 80px;
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
border-radius: 8px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
border: 2px solid #f0f0f0;
|
}
|
|
.attachment-info {
|
text-align: center;
|
width: 100%;
|
}
|
|
.attachment-name {
|
font-size: 12px;
|
color: #333;
|
font-weight: 500;
|
display: block;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
max-width: 80px;
|
}
|
|
.attachment-size {
|
font-size: 10px;
|
color: #999;
|
margin-top: 2px;
|
display: block;
|
}
|
|
.attachment-empty {
|
text-align: center;
|
padding: 60px 20px;
|
color: #999;
|
font-size: 14px;
|
background: #f8f9fa;
|
border-radius: 8px;
|
border: 2px dashed #ddd;
|
}
|
|
.video-modal-overlay {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(0, 0, 0, 0.8);
|
z-index: 10001;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 20px;
|
}
|
|
.video-modal-container {
|
width: 90%;
|
max-width: 800px;
|
max-height: 80vh;
|
background: #000;
|
border-radius: 12px;
|
overflow: hidden;
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
}
|
|
.video-modal-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 15px 20px;
|
background: rgba(0, 0, 0, 0.7);
|
color: #fff;
|
}
|
|
.video-modal-title {
|
font-size: 16px;
|
font-weight: 500;
|
color: #fff;
|
}
|
|
.close-btn-video {
|
width: 28px;
|
height: 28px;
|
border-radius: 50%;
|
background: rgba(255, 255, 255, 0.2);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
}
|
|
.video-modal-body {
|
position: relative;
|
background: #000;
|
}
|
|
.video-player {
|
width: 100%;
|
height: 56vh;
|
min-height: 260px;
|
max-height: 60vh;
|
display: block;
|
object-fit: contain;
|
}
|
</style>
|
