517 lines
14 KiB
Vue
517 lines
14 KiB
Vue
|
<template>
|
||
|
|
<div class="home">
|
||
|
|
<van-nav-bar title="冰雪填报" fixed left-arrow @click-left="onClickLeft">
|
||
|
|
</van-nav-bar>
|
||
|
|
<van-cell-group>
|
||
|
|
<van-cell title="当前站点" :value="yhzDetail.mc" />
|
||
|
|
</van-cell-group>
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
<h3>基本信息</h3>
|
||
|
|
<van-form class="IceEventAddForm" label-align="left" colon>
|
||
|
|
<van-field v-model="form.event.occurTime" label="发生时间" center>
|
||
|
|
<template #button>
|
||
|
|
<van-button
|
||
|
|
plain
|
||
|
|
round
|
||
|
|
type="primary"
|
||
|
|
size="mini"
|
||
|
|
@click="getCurrentTime"
|
||
|
|
>校准时间</van-button
|
||
|
|
>
|
||
|
|
</template>
|
||
|
|
</van-field>
|
||
|
|
<van-field
|
||
|
|
v-model="form.event.occurLocation"
|
||
|
|
label="发生地点"
|
||
|
|
center
|
||
|
|
placeholder="请填写"
|
||
|
|
/>
|
||
|
|
<van-field
|
||
|
|
v-model="form.event.routeNo"
|
||
|
|
label="线路编号"
|
||
|
|
center
|
||
|
|
placeholder="请填写"
|
||
|
|
/>
|
||
|
|
<van-field
|
||
|
|
v-model="form.event.startStakeNo"
|
||
|
|
label="起点桩号"
|
||
|
|
center
|
||
|
|
placeholder="请填写"
|
||
|
|
/>
|
||
|
|
<van-field
|
||
|
|
v-model="form.event.endStakeNo"
|
||
|
|
label="止点桩号"
|
||
|
|
center
|
||
|
|
placeholder="请填写"
|
||
|
|
/>
|
||
|
|
<van-field
|
||
|
|
v-model="form.event.disasterMileage"
|
||
|
|
label="受灾里程"
|
||
|
|
center
|
||
|
|
placeholder="请填写"
|
||
|
|
/>
|
||
|
|
</van-form>
|
||
|
|
<h3>处置情况</h3>
|
||
|
|
<van-form class="IceEventAddForm" label-align="left" colon>
|
||
|
|
<van-field label="处置措施" center>
|
||
|
|
<template #input>
|
||
|
|
<div class="disposal-buttons">
|
||
|
|
<van-button
|
||
|
|
plain
|
||
|
|
:type="
|
||
|
|
form.event.disposalMeasures === '限速通行'
|
||
|
|
? 'primary'
|
||
|
|
: 'default'
|
||
|
|
"
|
||
|
|
size="small"
|
||
|
|
@click="toggleDisposal('限速通行')"
|
||
|
|
>
|
||
|
|
限速通行
|
||
|
|
</van-button>
|
||
|
|
<van-button
|
||
|
|
plain
|
||
|
|
:type="
|
||
|
|
form.event.disposalMeasures === '封闭交通'
|
||
|
|
? 'primary'
|
||
|
|
: 'default'
|
||
|
|
"
|
||
|
|
size="small"
|
||
|
|
@click="toggleDisposal('封闭交通')"
|
||
|
|
class="last-button"
|
||
|
|
>
|
||
|
|
封闭交通
|
||
|
|
</van-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</van-field>
|
||
|
|
<van-field
|
||
|
|
v-model="form.event.expectRecoverTime"
|
||
|
|
label="预计恢复时间"
|
||
|
|
center
|
||
|
|
placeholder="请选择"
|
||
|
|
readonly
|
||
|
|
clickable
|
||
|
|
@click="showExpectPicker = true"
|
||
|
|
/>
|
||
|
|
<van-popup
|
||
|
|
:show="showExpectPicker"
|
||
|
|
round
|
||
|
|
position="bottom"
|
||
|
|
close-on-click-overlay
|
||
|
|
@close="showExpectPicker = false"
|
||
|
|
>
|
||
|
|
<van-date-picker
|
||
|
|
type="datetime"
|
||
|
|
:min-date="minDate"
|
||
|
|
:max-date="maxDate"
|
||
|
|
@confirm="handleConfirmExpectTime"
|
||
|
|
@cancel="showExpectPicker = false"
|
||
|
|
/>
|
||
|
|
</van-popup>
|
||
|
|
</van-form>
|
||
|
|
<h3>实施情况</h3>
|
||
|
|
<van-form class="IceEventAddForm" label-align="left" colon>
|
||
|
|
<van-field
|
||
|
|
v-model="form.material.snowMeltingAgent"
|
||
|
|
type="number"
|
||
|
|
label="融雪剂"
|
||
|
|
center
|
||
|
|
placeholder="请填写"
|
||
|
|
>
|
||
|
|
<template #extra> 吨 </template>
|
||
|
|
</van-field>
|
||
|
|
<van-field
|
||
|
|
v-model="form.material.antiSlipSand"
|
||
|
|
type="number"
|
||
|
|
label="防滑沙"
|
||
|
|
center
|
||
|
|
placeholder="请填写"
|
||
|
|
>
|
||
|
|
<template #extra> 吨 </template>
|
||
|
|
</van-field>
|
||
|
|
<van-field
|
||
|
|
v-model="form.material.antiSlipChains"
|
||
|
|
type="number"
|
||
|
|
label="防滑链"
|
||
|
|
center
|
||
|
|
placeholder="请填写"
|
||
|
|
>
|
||
|
|
<template #extra> 副 </template>
|
||
|
|
</van-field>
|
||
|
|
<van-field
|
||
|
|
v-model="form.material.sandbags"
|
||
|
|
type="number"
|
||
|
|
label="麻袋"
|
||
|
|
center
|
||
|
|
placeholder="请填写"
|
||
|
|
>
|
||
|
|
<template #extra> 条 </template>
|
||
|
|
</van-field>
|
||
|
|
<van-field
|
||
|
|
v-model="form.material.inputManpower"
|
||
|
|
type="number"
|
||
|
|
label="投入人力"
|
||
|
|
center
|
||
|
|
placeholder="请填写"
|
||
|
|
>
|
||
|
|
<template #extra> 人次 </template>
|
||
|
|
</van-field>
|
||
|
|
<van-field
|
||
|
|
v-model="form.material.inputFunds"
|
||
|
|
type="number"
|
||
|
|
label="投入资金"
|
||
|
|
center
|
||
|
|
placeholder="请填写"
|
||
|
|
>
|
||
|
|
<template #extra> 万元 </template>
|
||
|
|
</van-field>
|
||
|
|
<van-field
|
||
|
|
v-model="form.material.inputEquipment"
|
||
|
|
type="number"
|
||
|
|
label="投入设备"
|
||
|
|
center
|
||
|
|
placeholder="请填写"
|
||
|
|
>
|
||
|
|
<template #extra> 台班 </template>
|
||
|
|
</van-field>
|
||
|
|
<van-field label="当前通行情况" center>
|
||
|
|
<template #input>
|
||
|
|
<div class="disposal-buttons">
|
||
|
|
<van-button
|
||
|
|
plain
|
||
|
|
:type="form.traffic.currentStatus === 1 ? 'primary' : 'default'"
|
||
|
|
size="small"
|
||
|
|
@click="form.traffic.currentStatus = 1"
|
||
|
|
>
|
||
|
|
正常通行
|
||
|
|
</van-button>
|
||
|
|
<van-button
|
||
|
|
plain
|
||
|
|
:type="form.traffic.currentStatus === 2 ? 'primary' : 'default'"
|
||
|
|
size="small"
|
||
|
|
@click="form.traffic.currentStatus = 2"
|
||
|
|
>
|
||
|
|
限速通行
|
||
|
|
</van-button>
|
||
|
|
<van-button
|
||
|
|
plain
|
||
|
|
:type="form.traffic.currentStatus === 3 ? 'primary' : 'default'"
|
||
|
|
size="small"
|
||
|
|
@click="form.traffic.currentStatus = 3"
|
||
|
|
class="last-button"
|
||
|
|
>
|
||
|
|
封闭交通
|
||
|
|
</van-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</van-field>
|
||
|
|
<van-field label="有无车辆滞留" center>
|
||
|
|
<template #input>
|
||
|
|
<div class="disposal-buttons">
|
||
|
|
<van-button
|
||
|
|
plain
|
||
|
|
:type="
|
||
|
|
form.traffic.hasStrandedVehicles === 1 ? 'primary' : 'default'
|
||
|
|
"
|
||
|
|
size="small"
|
||
|
|
@click="form.traffic.hasStrandedVehicles = 1"
|
||
|
|
>
|
||
|
|
有滞留
|
||
|
|
</van-button>
|
||
|
|
<van-button
|
||
|
|
plain
|
||
|
|
:type="
|
||
|
|
form.traffic.hasStrandedVehicles === 0 ? 'primary' : 'default'
|
||
|
|
"
|
||
|
|
size="small"
|
||
|
|
@click="form.traffic.hasStrandedVehicles = 0"
|
||
|
|
class="last-button"
|
||
|
|
>
|
||
|
|
无滞留
|
||
|
|
</van-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</van-field>
|
||
|
|
<van-field
|
||
|
|
v-model="form.traffic.strandedVehicleCount"
|
||
|
|
type="number"
|
||
|
|
label="滞留车辆数"
|
||
|
|
center
|
||
|
|
placeholder="请填写"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<van-field
|
||
|
|
v-model="form.traffic.actualRecoverTime"
|
||
|
|
label="实际恢复时间"
|
||
|
|
center
|
||
|
|
placeholder="请选择"
|
||
|
|
readonly
|
||
|
|
clickable
|
||
|
|
@click="showActualPicker = true"
|
||
|
|
/>
|
||
|
|
<van-popup
|
||
|
|
:show="showActualPicker"
|
||
|
|
round
|
||
|
|
position="bottom"
|
||
|
|
close-on-click-overlay
|
||
|
|
@close="showActualPicker = false"
|
||
|
|
>
|
||
|
|
<van-date-picker
|
||
|
|
type="datetime"
|
||
|
|
:min-date="minDate"
|
||
|
|
:max-date="maxDate"
|
||
|
|
@confirm="handleConfirmActualTime"
|
||
|
|
@cancel="showActualPicker = false"
|
||
|
|
/>
|
||
|
|
</van-popup>
|
||
|
|
|
||
|
|
<van-field label="附件" center>
|
||
|
|
<template #input>
|
||
|
|
<van-uploader
|
||
|
|
v-model="fileList"
|
||
|
|
@delete="handleDelete"
|
||
|
|
name="photos"
|
||
|
|
:file-list="fileList"
|
||
|
|
:file-type="['image/jpeg', 'image/png']"
|
||
|
|
:after-read="afterRead"
|
||
|
|
multiple
|
||
|
|
:max-count="6"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
</van-field>
|
||
|
|
</van-form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<van-button type="primary" class="add-btn" icon="plus" @click="handleAdd">
|
||
|
|
填报
|
||
|
|
</van-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import "vant/es/toast/style";
|
||
|
|
import "vant/es/popup/style";
|
||
|
|
import { ref, onMounted, reactive, toRaw, watch } from "vue";
|
||
|
|
import { useRouter, useRoute } from "vue-router";
|
||
|
|
import { showToast, showLoadingToast } from "vant";
|
||
|
|
import { request } from "../../../../shared/utils/request";
|
||
|
|
|
||
|
|
const router = useRouter();
|
||
|
|
const route = useRoute();
|
||
|
|
const yhzDetail = ref({}); // 养护站详情数据
|
||
|
|
const INIT_FORM = reactive({
|
||
|
|
event: {
|
||
|
|
occurLocation: "", // 发生地点
|
||
|
|
routeNo: "", // 线路编号
|
||
|
|
occurTime: "", // 发生时间
|
||
|
|
startStakeNo: "", // 起点桩号
|
||
|
|
endStakeNo: "", // 止点桩号
|
||
|
|
disasterMileage: "", // 受灾里程
|
||
|
|
expectRecoverTime: "", // 预计恢复时间
|
||
|
|
actualRecoverTime: "", // 实际恢复时间
|
||
|
|
serviceStationId: "", // 养护站ID
|
||
|
|
district: "", // 所属区县
|
||
|
|
reportTime: "", // 填报时间
|
||
|
|
reporterPhone: "", // 填报人手机号
|
||
|
|
disposalMeasures: "", // 处置措施
|
||
|
|
createTime: "", // 创建时间
|
||
|
|
updateTime: "", // 更新时间
|
||
|
|
isDeleted: "", // 是否删除 0-未删除 1-已删除
|
||
|
|
},
|
||
|
|
material: {
|
||
|
|
inputManpower: null, // 投入人力
|
||
|
|
inputFunds: null, // 投入资金
|
||
|
|
inputEquipment: null, // 投入设备
|
||
|
|
snowMeltingAgent: null, // 融雪剂
|
||
|
|
sandbags: null, // 麻袋
|
||
|
|
antiSlipSand: null, // 防滑沙
|
||
|
|
antiSlipChains: null, // 防滑链
|
||
|
|
createTime: "", // 创建时间
|
||
|
|
updateTime: "", // 更新时间
|
||
|
|
},
|
||
|
|
traffic: {
|
||
|
|
currentStatus: 0, // 当前通行情况 1-正常通行 2-限速通行 3-封闭交通
|
||
|
|
hasStrandedVehicles: 0, // 是否有车辆滞留 0-无 1-有
|
||
|
|
strandedVehicleCount: null, // 车辆滞留数量
|
||
|
|
actualRecoverTime: "", // 实际恢复时间
|
||
|
|
createTime: "", // 创建时间
|
||
|
|
updateTime: "", // 更新时间
|
||
|
|
},
|
||
|
|
photos: [],
|
||
|
|
});
|
||
|
|
const form = reactive({ ...INIT_FORM });
|
||
|
|
const fileList = ref([]);
|
||
|
|
|
||
|
|
// 日期格式化
|
||
|
|
const formatTime = (date = new Date()) => {
|
||
|
|
const pad = (n) => n.toString().padStart(2, "0");
|
||
|
|
return (
|
||
|
|
`${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(
|
||
|
|
date.getDate()
|
||
|
|
)} ` +
|
||
|
|
`${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(
|
||
|
|
date.getSeconds()
|
||
|
|
)}`
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const getCurrentTime = () => {
|
||
|
|
form.event.occurTime = formatTime();
|
||
|
|
};
|
||
|
|
|
||
|
|
const toggleDisposal = (type) => {
|
||
|
|
form.event.disposalMeasures =
|
||
|
|
form.event.disposalMeasures === type ? "" : type;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 组件挂载时获取数据
|
||
|
|
onMounted(() => {
|
||
|
|
yhzDetail.value = JSON.parse(decodeURIComponent(route.params.data));
|
||
|
|
console.log("yhzDetail", toRaw(yhzDetail.value));
|
||
|
|
form.event.occurTime = formatTime(); // 初始化为当前时间
|
||
|
|
});
|
||
|
|
|
||
|
|
const onClickLeft = () => {
|
||
|
|
router.push({
|
||
|
|
name: "IceEventManage",
|
||
|
|
params: { data: encodeURIComponent(JSON.stringify(yhzDetail.value)) },
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleAdd = () => {
|
||
|
|
console.log("form", toRaw(form));
|
||
|
|
};
|
||
|
|
|
||
|
|
// 预计恢复时间相关
|
||
|
|
const showExpectPicker = ref(false);
|
||
|
|
const minDate = new Date();
|
||
|
|
const maxDate = new Date(2050, 11, 31);
|
||
|
|
const handleConfirmExpectTime = ({ selectedValues }) => {
|
||
|
|
form.event.expectRecoverTime = selectedValues.join("-");
|
||
|
|
showExpectPicker.value = false;
|
||
|
|
};
|
||
|
|
// 实际恢复时间相关
|
||
|
|
const showActualPicker = ref(false);
|
||
|
|
const handleConfirmActualTime = ({ selectedValues }) => {
|
||
|
|
form.traffic.actualRecoverTime = selectedValues.join("-");
|
||
|
|
showActualPicker.value = false;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 文件上传
|
||
|
|
const afterRead = async (file) => {
|
||
|
|
try {
|
||
|
|
const toast = showLoadingToast({
|
||
|
|
message: "上传中...",
|
||
|
|
forbidClick: true,
|
||
|
|
duration: 0, // 设置为0表示不会自动关闭
|
||
|
|
});
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append("file", file.file);
|
||
|
|
const res = await request({
|
||
|
|
url: "/snow-ops-platform/file/upload",
|
||
|
|
method: "post",
|
||
|
|
data: formData,
|
||
|
|
});
|
||
|
|
toast.close();
|
||
|
|
if (res.code === "00000") {
|
||
|
|
form.photos.push({ photoUrl: res.data });
|
||
|
|
const index = fileList.value.findIndex((f) => f.file === file.file);
|
||
|
|
if (index !== -1) {
|
||
|
|
fileList.value[index].serverUrl = res.data;
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log("form.photos", toRaw(form.photos));
|
||
|
|
console.log("fileList.value", fileList.value);
|
||
|
|
} else {
|
||
|
|
throw new Error(res.message);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
toast.close();
|
||
|
|
showToast({
|
||
|
|
type: "fail",
|
||
|
|
message: error.message,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 文件删除
|
||
|
|
const handleDelete = (file) => {
|
||
|
|
if (file.serverUrl) {
|
||
|
|
const index = form.photos.findIndex((p) => p.photoUrl === file.serverUrl);
|
||
|
|
if (index !== -1) {
|
||
|
|
form.photos.splice(index, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.home {
|
||
|
|
padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
padding: 16px 16px 80px 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content .van-cell-group .van-cell {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.add-btn {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 20px;
|
||
|
|
left: 16px;
|
||
|
|
right: 16px;
|
||
|
|
width: calc(100% - 32px);
|
||
|
|
margin: 0 auto;
|
||
|
|
border-radius: 24px;
|
||
|
|
font-size: 16px;
|
||
|
|
height: 44px;
|
||
|
|
z-index: 999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid {
|
||
|
|
margin-top: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
margin-top: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-tag {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 3px 8px;
|
||
|
|
border-radius: 4px;
|
||
|
|
color: white;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
.status-good {
|
||
|
|
background-color: #07c160;
|
||
|
|
}
|
||
|
|
.status-warning {
|
||
|
|
background-color: #ff976a;
|
||
|
|
}
|
||
|
|
.status-danger {
|
||
|
|
background-color: #ee0a24;
|
||
|
|
}
|
||
|
|
|
||
|
|
.IceEventAddForm {
|
||
|
|
padding: 16px 16px 16px 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.disposal-buttons {
|
||
|
|
display: flex;
|
||
|
|
gap: 10px;
|
||
|
|
padding: 8px 0;
|
||
|
|
}
|
||
|
|
.disposal-buttons .van-button {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
.last-button {
|
||
|
|
margin-right: 16px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|