diff --git a/packages/mobile/src/views/DisasterManagement/IceDisaster/IceDisaster.vue b/packages/mobile/src/views/DisasterManagement/IceDisaster/IceDisaster.vue index 93aa52f..0136ad1 100644 --- a/packages/mobile/src/views/DisasterManagement/IceDisaster/IceDisaster.vue +++ b/packages/mobile/src/views/DisasterManagement/IceDisaster/IceDisaster.vue @@ -9,7 +9,8 @@ placeholder="请选择时间" :columnsType="['year', 'month', 'day', 'hour', 'minute']" /> -
+ +
校准时间
@@ -132,7 +133,14 @@ :max-date="maxDate" type="datetime" /> + + + + + + 提交 +
- + diff --git a/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue b/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue index b365e51..78806e8 100644 --- a/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue +++ b/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue @@ -132,11 +132,8 @@ - - - + + @@ -160,6 +157,7 @@ import { showToast, showFailToast, showLoadingToast } from 'vant' import PanelItem from '@/components/PanelItem.vue' import BasePicker from '@/components/BasePicker.vue' import BaseDatePicker from '@/components/BaseDatePicker.vue' +import DisasterFileUpload from '../components/DisasterFileUpload.vue' import RoadRoutesPicker from '../components/RoadRoutesPicker.vue' import LossList from '../components/LossList.vue' import { useRouter, useRoute } from 'vue-router' @@ -221,17 +219,6 @@ const formData = ref({ fileList: [] }) -const getFileList = () => { - const fileList = formData.value.fileList?.map((item) => { - return { - url: item.fileUrl, - name: item.fileName - } - }) - - return fileList -} - const submitting = ref(false) // 时间选择器范围 @@ -262,38 +249,6 @@ const calibrateTime = () => { showToast('时间已校准为当前时间') } -// 图片上传处理 -const afterImageRead = (file) => { - console.log('图片上传:', file) -} - -const onOversize = () => { - showFailToast('图片大小不能超过500KB') -} - -const afterVideoRead = (file) => { - console.log('视频上传:', file) -} - -const onVideoOversize = () => { - showFailToast('视频大小不能超过20MB') -} - -const isImageFile = (file) => { - // 根据url后缀判断 - const imageExtensions = /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i - if (file.fileUrl && imageExtensions.test(file.fileUrl)) return true - // 根据文件类型判断 - if (file.type && file.type.startsWith('image/')) return true - return false -} - -const isVideoFile = (file) => { - // 根据url后缀判断 - const videoExtensions = /\.(mp4|avi|mov|wmv|flv|mkv)$/i - if (file.fileUrl && videoExtensions.test(file.fileUrl)) return true -} - const parsePointValue = (point) => { if (!point) { return { longitude: null, latitude: null } @@ -337,136 +292,6 @@ const handleRouteNoChange = (item) => { formData.event.endStakeLatitude = endPoint.latitude } -/** - * 判断图片是否可以上传 - * @param {File} file - 图片文件 - * @returns {boolean} 是否允许上传 - */ -const isValidImage = (file) => { - // 校验文件类型 - const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' - - if (!isJpgOrPng) { - showFailToast('只能上传 JPG/PNG 格式的图片!') - return false - } - - // 校验文件大小(500KB = 500 * 1024 bytes) - const isLt500k = file.size / 1024 < 500 - - if (!isLt500k) { - showFailToast(`图片大小不能超过 500KB!当前大小:${(file.size / 1024).toFixed(2)}KB`) - return false - } - - return true -} - -/** - * 判断视频是否可以上传 - * @param {File} file - 视频文件 - * @returns {boolean} 是否允许上传 - */ -const isValidVideo = (file) => { - // 校验文件类型 - const allowedTypes = ['video/mp4', 'video/quicktime', 'video/x-msvideo', 'video/webm'] - const isValidType = allowedTypes.includes(file.type) - - if (!isValidType) { - showFailToast('请上传有效的视频文件(MP4、MOV、AVI、WEBM格式)!') - return false - } - - // 校验文件大小(50MB = 50 * 1024 * 1024 bytes) - const maxSize = 50 * 1024 * 1024 - const isValidSize = file.size <= maxSize - - if (!isValidSize) { - showFailToast(`视频大小不能超过 50MB!当前大小:${(file.size / 1024 / 1024).toFixed(2)}MB`) - return false - } - - return true -} - -/** - * 统一的上传前校验 - * @param {File} file - 上传的文件 - * @returns {boolean} 是否允许上传 - */ -const checkFile = (file) => { - // 判断是否为图片 - if (file.type.startsWith('image/')) { - const imageCount = formData.value.fileList?.filter((item) => item.fileType === 1).length - if (imageCount == 6) { - showFailToast('只能上传六张图片!') - return false - } - - return isValidImage(file) - } - - // 判断是否为视频 - if (file.type.startsWith('video/')) { - const videoCount = formData.value.fileList?.filter((item) => item.fileType === 2).length - if (videoCount == 1) { - showFailToast('只能上传一个视频文件!') - return false - } - - return isValidVideo(file) - } - - showFailToast('只支持图片和视频文件!') - return false -} - -const afterRead = async (options) => { - const file = options.file - if (!checkFile(file)) return - const toast = showLoadingToast({ - message: '上传中...', - forbidClick: true, - duration: 0 // 设置为0表示不会自动关闭 - }) - try { - const uploadFormData = new FormData() - uploadFormData.append('file', file) - const res = await request({ - url: '/snow-ops-platform/file/upload', - method: 'post', - data: uploadFormData - }) - toast.close() - if (res.code === '00000') { - const name = file.name - const url = res.data - const type = isImageFile({ fileUrl: url }) ? 1 : isVideoFile({ fileUrl: url }) ? 2 : 3 - const fileData = { - fileName: name, - fileUrl: url, - fileType: type, - fileSize: file.size - } - if (!formData.value.fileList) formData.value.fileList = [] - formData.value.fileList.push(fileData) - } else { - throw new Error(res.message) - } - } catch (error) { - toast.close() - showToast({ - type: 'fail', - message: error.message - }) - } -} - -const removeFile = (file, index) => { - // 删除文件 - formData.value.fileList.splice(index, 1) -} - // 简单的空值判断 const isEmpty = (value) => { return value === null || value === undefined || value === '' diff --git a/packages/mobile/src/views/DisasterManagement/components/DisasterFileUpload.vue b/packages/mobile/src/views/DisasterManagement/components/DisasterFileUpload.vue new file mode 100644 index 0000000..8c8df1a --- /dev/null +++ b/packages/mobile/src/views/DisasterManagement/components/DisasterFileUpload.vue @@ -0,0 +1,174 @@ + + +