feat: 水毁灾害
This commit is contained in:
parent
2d3253ba0e
commit
145a0b1e33
@ -208,7 +208,7 @@
|
||||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { showToast } from 'vant'
|
||||
import { showToast, showImagePreview } from 'vant'
|
||||
import PageContainer from '@/components/PageContainer.vue'
|
||||
import PanelItem from '@/components/PanelItem.vue'
|
||||
import CurrentSite from '@/components/CurrentSite.vue'
|
||||
@ -346,9 +346,8 @@ const handleContinueReport = () => {
|
||||
|
||||
// 预览附件
|
||||
const previewFile = (file) => {
|
||||
if (file.fileUrl) {
|
||||
window.open(file.fileUrl, '_blank')
|
||||
}
|
||||
console.log("🚀 ~ previewFile ~ file:", file)
|
||||
// showImagePreview
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@ -9,14 +9,14 @@
|
||||
</van-field>
|
||||
</template>
|
||||
<van-button size="small" block type="primary" plain @click="addLoss">添加损失</van-button>
|
||||
<CubeCalculateDialog ref="cubeCalculateDialog" @confirm="confirmCalculate" />
|
||||
<CalculateDialog ref="cubeCalculateDialog" @confirm="confirmCalculate" />
|
||||
<LossPicker ref="lossPicker" :options="options" @confirm="confirmAddLoss" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import CubeCalculateDialog from './CubeCalculateDialog.vue'
|
||||
import CalculateDialog from './CalculateDialog.vue'
|
||||
import { request } from '@shared/utils/request'
|
||||
import LossPicker from './LossPicker.vue'
|
||||
|
||||
|
||||
@ -130,7 +130,7 @@
|
||||
<van-field v-model="formData.report.siteDescription" label="现场描述" placeholder="请填写" type="textarea" rows="2" autosize />
|
||||
<van-field label="附件" center>
|
||||
<template #input>
|
||||
<van-uploader accept="video/*,image/*" v-model="formData.fileList" :file-list="formData.fileList" :after-read="afterRead" multiple :max-count="6" />
|
||||
<van-uploader accept="video/*,image/*" :modelValue="getFileList()" :after-read="afterRead" multiple :max-count="6" @delete="removeFile" />
|
||||
</template>
|
||||
</van-field>
|
||||
</PanelItem>
|
||||
@ -148,7 +148,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, watch } from 'vue'
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { showToast, showFailToast, showLoadingToast } from 'vant'
|
||||
import PanelItem from '@/components/PanelItem.vue'
|
||||
import BasePicker from '@/components/BasePicker.vue'
|
||||
@ -165,12 +165,8 @@ const isContinue = computed(() => route.query.isContinue)
|
||||
// 处置措施单选值（用于单选组件）
|
||||
const disposalMeasureValue = ref('')
|
||||
|
||||
// 附件列表
|
||||
const imageFileList = ref([])
|
||||
const videoFileList = ref([])
|
||||
|
||||
// 表单数据 - 按 Request 接口结构定义
|
||||
const formData = reactive({
|
||||
// 表单数据 - 按 Request 接口结构定义，使用 ref 包装
|
||||
const formData = ref({
|
||||
// 顶层字段
|
||||
occurLocation: '', // 发生地点
|
||||
occurTime: '', // 发生时间
|
||||
@ -222,56 +218,12 @@ const formData = reactive({
|
||||
|
||||
// 监听处置措施单选值变化，直接赋值给 report.disposalMeasures
|
||||
watch(disposalMeasureValue, (newVal) => {
|
||||
formData.report.disposalMeasures = newVal
|
||||
formData.value.report.disposalMeasures = newVal
|
||||
})
|
||||
|
||||
// 监听附件变化，同步到 fileList
|
||||
watch(
|
||||
imageFileList,
|
||||
(newVal) => {
|
||||
// 转换为接口需要的格式
|
||||
formData.fileList = [
|
||||
...imageFileList.value.map((f) => ({
|
||||
fileName: f.file?.name || '',
|
||||
fileSize: f.file?.size || 0,
|
||||
fileType: 1, // 1-图片
|
||||
fileUrl: f.content || ''
|
||||
})),
|
||||
...videoFileList.value.map((f) => ({
|
||||
fileName: f.file?.name || '',
|
||||
fileSize: f.file?.size || 0,
|
||||
fileType: 2, // 2-视频
|
||||
fileUrl: f.content || ''
|
||||
}))
|
||||
]
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
videoFileList,
|
||||
(newVal) => {
|
||||
formData.fileList = [
|
||||
...imageFileList.value.map((f) => ({
|
||||
fileName: f.file?.name || '',
|
||||
fileSize: f.file?.size || 0,
|
||||
fileType: 1,
|
||||
fileUrl: f.content || ''
|
||||
})),
|
||||
...newVal.map((f) => ({
|
||||
fileName: f.file?.name || '',
|
||||
fileSize: f.file?.size || 0,
|
||||
fileType: 2,
|
||||
fileUrl: f.content || ''
|
||||
}))
|
||||
]
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
// 从 report.disposalMeasures 初始化处置措施单选值
|
||||
watch(
|
||||
() => formData.report.disposalMeasures,
|
||||
() => formData.value.report.disposalMeasures,
|
||||
(newVal) => {
|
||||
if (newVal && typeof newVal === 'string') {
|
||||
disposalMeasureValue.value = newVal
|
||||
@ -280,6 +232,17 @@ watch(
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const getFileList = () => {
|
||||
const fileList = formData.value.fileList?.map((item) => {
|
||||
return {
|
||||
url: item.fileUrl,
|
||||
name: item.fileName
|
||||
}
|
||||
})
|
||||
|
||||
return fileList
|
||||
}
|
||||
|
||||
// BasePicker 选项数据
|
||||
const roadConditionOptions = [
|
||||
{ label: '高速公路', value: '高速公路' },
|
||||
@ -312,19 +275,19 @@ const maxDate = new Date(2030, 11, 31)
|
||||
|
||||
const initFormData = (newVal) => {
|
||||
if (newVal && Object.keys(newVal).length > 0) {
|
||||
// 深度合并数据
|
||||
Object.assign(formData, {
|
||||
// 深度合并数据 - 直接替换整个对象
|
||||
formData.value = {
|
||||
occurLocation: newVal.occurLocation || '',
|
||||
occurTime: newVal.occurTime || '',
|
||||
roadConditionType: newVal.roadConditionType || '',
|
||||
routeNo: newVal.routeNo || '',
|
||||
event: { ...formData.event, ...(newVal.event || {}) },
|
||||
report: { ...formData.report, ...(newVal.report || {}) },
|
||||
event: { ...formData.value.event, ...(newVal.event || {}) },
|
||||
report: { ...formData.value.report, ...(newVal.report || {}) },
|
||||
lossList: newVal.lossList || [],
|
||||
fileList: newVal.fileList || []
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化处置措施单选值（直接赋值，不再需要 split）
|
||||
// 初始化处置措施单选值
|
||||
if (newVal.report?.disposalMeasures) {
|
||||
disposalMeasureValue.value = newVal.report.disposalMeasures
|
||||
}
|
||||
@ -335,11 +298,10 @@ const initFormData = (newVal) => {
|
||||
const calibrateTime = () => {
|
||||
const now = new Date()
|
||||
const formatted = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
|
||||
formData.occurTime = formatted
|
||||
formData.value.occurTime = formatted
|
||||
showToast('时间已校准为当前时间')
|
||||
}
|
||||
|
||||
|
||||
// 图片上传处理
|
||||
const afterImageRead = (file) => {
|
||||
console.log('图片上传:', file)
|
||||
@ -425,7 +387,7 @@ const isValidVideo = (file) => {
|
||||
}
|
||||
|
||||
/**
|
||||
* 统一的上传前校验（用于 el-upload 的 before-upload）
|
||||
* 统一的上传前校验
|
||||
* @param {File} file - 上传的文件
|
||||
* @returns {boolean} 是否允许上传
|
||||
*/
|
||||
@ -453,12 +415,12 @@ const afterRead = async (options) => {
|
||||
duration: 0 // 设置为0表示不会自动关闭
|
||||
})
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const uploadFormData = new FormData()
|
||||
uploadFormData.append('file', file)
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/file/upload',
|
||||
method: 'post',
|
||||
data: formData
|
||||
data: uploadFormData
|
||||
})
|
||||
toast.close()
|
||||
if (res.code === '00000') {
|
||||
@ -472,10 +434,9 @@ const afterRead = async (options) => {
|
||||
fileType: type,
|
||||
fileSize: file.size
|
||||
}
|
||||
if (!formData.fileList) formData.fileList = []
|
||||
formData.fileList.push(fileData)
|
||||
if (!formData.value.fileList) formData.value.fileList = []
|
||||
formData.value.fileList.push(fileData)
|
||||
|
||||
console.log('fileList.value', formData.fileList)
|
||||
} else {
|
||||
throw new Error(res.message)
|
||||
}
|
||||
@ -488,22 +449,27 @@ const afterRead = async (options) => {
|
||||
}
|
||||
}
|
||||
|
||||
const removeFile = (file, index) => {
|
||||
// 删除文件
|
||||
formData.value.fileList.splice(index, 1)
|
||||
}
|
||||
|
||||
// 暴露验证方法
|
||||
const validate = () => {
|
||||
if (!formData.occurTime) {
|
||||
if (!formData.value.occurTime) {
|
||||
showToast('请填写发生时间')
|
||||
return false
|
||||
}
|
||||
if (!formData.routeNo) {
|
||||
if (!formData.value.routeNo) {
|
||||
showToast('请填写线路编号')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
// 获取表单数据
|
||||
// 获取表单数据 - 返回 formData.value 的副本
|
||||
const getFormData = () => {
|
||||
return { ...formData }
|
||||
return { ...formData.value }
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
|
||||
@ -1,42 +0,0 @@
|
||||
[
|
||||
{
|
||||
"id": 1,
|
||||
"title": "G242金铃乡老窖坪发生积雪",
|
||||
"status": "未解除",
|
||||
"occurTime": "2025/10/10 20:29",
|
||||
"estimateRecoverTime": "2025/10/10 20:29",
|
||||
"disasterType": "积雪"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"title": "S521白鹿镇X发生边坡坍塌",
|
||||
"status": "已解除",
|
||||
"occurTime": "2025/10/10 20:29",
|
||||
"estimateRecoverTime": "2025/10/10 20:29",
|
||||
"disasterType": "边坡坍塌"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"title": "彭水S523发生边坡坍塌",
|
||||
"status": "未解除",
|
||||
"occurTime": "2025/10/10 20:29",
|
||||
"estimateRecoverTime": "2025/10/10 20:29",
|
||||
"disasterType": "路基沉陷"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"title": "梁平蟠龙镇G318发生山体滑坡",
|
||||
"status": "已解除",
|
||||
"occurTime": "2025/10/10 20:29",
|
||||
"estimateRecoverTime": "2025/10/10 20:29",
|
||||
"disasterType": "山体滑坡"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"title": "重庆市大足区XX县G201行道树倒塌",
|
||||
"status": "已解除",
|
||||
"occurTime": "2025/10/10 20:29",
|
||||
"estimateRecoverTime": "2025/10/10 20:29",
|
||||
"disasterType": "行道树倒塌"
|
||||
}
|
||||
]
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"occurLocation": "G108国道 K2250+300处",
|
||||
"occurTime": "2024-07-15 14:30:00",
|
||||
"occurTime": null,
|
||||
"roadConditionType": "国道",
|
||||
"routeNo": "G108",
|
||||
"event": {
|
||||
@ -25,8 +25,8 @@
|
||||
"deadCount": 0,
|
||||
"strandedVehicleCount": 12,
|
||||
"disposalMeasures": "正常通行",
|
||||
"actualRecoverTime": "2024-07-17 12:00:00",
|
||||
"expectRecoverTime": "2024-07-18 18:00:00",
|
||||
"actualRecoverTime": null,
|
||||
"expectRecoverTime": null,
|
||||
"injuredCount": 1,
|
||||
"investedFunds": 35.8,
|
||||
"investedMachinery": 6,
|
||||
|
||||
@ -194,7 +194,7 @@ const routes = [
|
||||
{
|
||||
path: '/disasterManagement',
|
||||
name: 'disasterManagement',
|
||||
component: () => import('../views/DisasterManagement/DisasterManagement.vue'),
|
||||
component: () => import('../views/DisasterManagement/DisasterManagementPC.vue'),
|
||||
meta: {
|
||||
title: '灾害巡检事件',
|
||||
breadcrumb: true
|
||||
@ -203,7 +203,7 @@ const routes = [
|
||||
{
|
||||
path: '/disasterReport',
|
||||
name: 'DisasterReport',
|
||||
component: () => import('../views/DisasterManagement/DisasterReport/DisasterReport.vue'),
|
||||
component: () => import('../views/DisasterManagement/DisasterReport/DisasterReportPC.vue'),
|
||||
meta: {
|
||||
title: '灾毁事件填报',
|
||||
breadcrumb: true
|
||||
@ -212,7 +212,7 @@ const routes = [
|
||||
{
|
||||
path: '/waterDisasterDetail',
|
||||
name: 'WaterDisasterDetail',
|
||||
component: () => import('../views/DisasterManagement/DisasterDetail/WaterDisasterDetail.vue'),
|
||||
component: () => import('../views/DisasterManagement/DisasterDetail/WaterDisasterDetailPC.vue'),
|
||||
meta: {
|
||||
title: '水毁事件详情',
|
||||
breadcrumb: true
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user