bdzl2/bxztApp
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

冰雪专题App端口 冰雪事件填报调通 冰雪事件详情页面编写

Browse Source
This commit is contained in:
huangchenhao 2025-11-11 18:03:18 +08:00
parent 43527ab2d2
commit 0d29b9c8d6
4 changed files with 337 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/mobile/src/router/index.js
View File

@ -46,6 +46,11 @@ const routes = [
name: 'IceEventAdd',
component: () => import('../views/IceEvent/IceEventAdd.vue')
},
{
path: '/iceEventDetail/:data',
name: 'IceEventDetail',
component: () => import('../views/IceEvent/IceEventDetails.vue')
},
]
const router = createRouter({

306
packages/mobile/src/views/IceEvent/IceEventAdd.vue
View File

@ -49,6 +49,7 @@
v-model="form.event.disasterMileage"
label="受灾里程"
center
type="number"
placeholder="请填写"
/>
</van-form>
@ -101,13 +102,19 @@
close-on-click-overlay
@close="showExpectPicker = false"
>
<van-date-picker
type="datetime"
:min-date="minDate"
:max-date="maxDate"
<van-picker-group
title="选择日期时间"
:tabs="['选择日期', '选择时间']"
@confirm="handleConfirmExpectTime"
@cancel="showExpectPicker = false"
/>
>
<van-date-picker
v-model="expectDate"
:min-date="minDate"
:max-date="maxDate"
/>
<van-time-picker v-model="expectTime" />
</van-picker-group>
</van-popup>
</van-form>
<h3>实施情况</h3>
@ -140,6 +147,28 @@
<template #extra> 台班 </template>
</van-field>
<!-- 选择物资列表 -->
<van-field
v-for="(material, index) in form.yhzMaterialList"
:key="material.rid"
v-model="material.usageAmount"
type="number"
:label="material.wzmc"
center
placeholder="请输入数量"
>
<template #extra>
<span style="margin-right: 10px">{{ material.dw }}</span>
<van-button
size="small"
type="danger"
@click.stop="form.yhzMaterialList.splice(index, 1)"
>
删除
</van-button>
</template>
</van-field>
<van-button
class="add-wzbtn"
type="primary"
@ -148,8 +177,69 @@
@click="handleOpenAddMaterial"
>添加物资
</van-button>
<van-popup>
<van-popup
:show="showAddMaterialPopup"
position="bottom"
close-on-click-overlay
@close="showAddMaterialPopup = false"
>
<div style="padding: 16px">
<h3 style="text-align: center; margin-bottom: 16px">添加物资</h3>
<!-- 搜索框 -->
<van-field
v-model="searchText"
placeholder="输入物资名称搜索"
clearable
@update:model-value="handleSearch"
>
</van-field>
<van-checkbox-group v-model="checked">
<van-cell-group inset style="margin: 16px 0">
<div
style="
display: flex;
justify-content: space-between;
padding: 8px 16px;
"
>
<span>共 {{ materialList.length }} 项</span>
<van-button
size="mini"
@click="toggleSelectAll"
:type="isAllSelected ? 'primary' : 'default'"
>
{{ isAllSelected ? "取消全选" : "全选" }}
</van-button>
</div>
<van-cell
v-for="(item, index) in materialList"
clickable
:key="item.rid"
:title="item.wzmc"
@click="toggle(index)"
>
<template #right-icon>
<van-checkbox
:name="item.rid"
:ref="(el) => (checkboxRefs[index] = el)"
@click.stop
/>
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>
<van-button
type="primary"
block
@click="addSelectedMaterials"
style="margin-top: 10px"
>
确认添加
</van-button>
</div>
</van-popup>
<van-field label="当前通行情况" center>
@ -202,7 +292,10 @@
form.traffic.hasStrandedVehicles === 0 ? 'primary' : 'default'
"
size="small"
@click="form.traffic.hasStrandedVehicles = 0"
@click="
form.traffic.hasStrandedVehicles = 0;
form.traffic.strandedVehicleCount = null;
"
class="last-button"
>
无滞留
@ -211,6 +304,7 @@
</template>
</van-field>
<van-field
v-if="form.traffic.hasStrandedVehicles === 1"
v-model="form.traffic.strandedVehicleCount"
type="number"
label="滞留车辆数"
@ -234,13 +328,19 @@
close-on-click-overlay
@close="showActualPicker = false"
>
<van-date-picker
type="datetime"
:min-date="minDate"
:max-date="maxDate"
<van-picker-group
title="选择日期时间"
:tabs="['选择日期', '选择时间']"
@confirm="handleConfirmActualTime"
@cancel="showActualPicker = false"
/>
>
<van-date-picker
v-model="actualDate"
:min-date="minDate"
:max-date="maxDate"
/>
<van-time-picker v-model="actualTime" />
</van-picker-group>
</van-popup>
<van-field label="附件" center>
@ -269,7 +369,7 @@
<script setup>
import "vant/es/toast/style";
import "vant/es/popup/style";
import { ref, onMounted, reactive, toRaw, watch } from "vue";
import { ref, onMounted, reactive, toRaw, watch, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showToast, showLoadingToast } from "vant";
import { request } from "../../../../shared/utils/request";
@ -354,31 +454,187 @@ const onClickLeft = () => {
});
};
// 打开添加物资弹窗
const handleOpenAddMaterial = () => {
console.log("打开添加物资弹窗");
}
const handleAdd = () => {
console.log("form", toRaw(form));
// 添加物资相关
const showAddMaterialPopup = ref(false);
const materialList = ref([]);
const checkboxRefs = ref([]);
const checked = ref([]);
const toggle = (index) => {
checkboxRefs.value[index].toggle();
};
const searchText = ref("");
const handleSearch = () => {
getMaterialList(searchText.value);
};
// 全选功能
const toggleSelectAll = () => {
if (isAllSelected.value) {
checked.value = [];
} else {
checked.value = materialList.value.map((item) => item.rid);
}
};
// 计算是否全选
const isAllSelected = computed(() => {
return (
materialList.value.length > 0 &&
materialList.value.every((item) => checked.value.includes(item.rid))
);
});
// 添加物资到表单
const addSelectedMaterials = () => {
checked.value.forEach((rid) => {
const material = materialList.value.find((m) => m.rid === rid);
if (material && !form.yhzMaterialList.some((m) => m.rid === rid)) {
form.yhzMaterialList.push({
rid: rid,
wzmc: material.wzmc,
usageAmount: null,
dw: material.dw,
});
}
});
showAddMaterialPopup.value = false;
checked.value = [];
};
// 查询物资列表
const getMaterialList = async (wzmc) => {
try {
const data = {
yhzid: yhzDetail.value.id,
wzmc,
pageNum: 1,
pageSize: 9999,
};
const res = await request({
url: "/snow-ops-platform/yjwz/list",
method: "GET",
params: data,
});
if (res.code === "00000") {
materialList.value = res.data.records;
} else {
throw new Error(res.message);
}
} catch (error) {
showToast({
type: "fail",
message: error.message,
});
}
};
// 打开添加物资弹窗
const handleOpenAddMaterial = async () => {
await getMaterialList();
showAddMaterialPopup.value = true;
};
const handleAdd = async () => {
try {
const toast = showLoadingToast({
message: "上报中...",
forbidClick: true,
duration: 0, // 设置为0表示不会自动关闭
});
form.event.serviceStationId = yhzDetail.value.id;
form.event.district = yhzDetail.value.qxmc;
console.log("yhzDetail", toRaw(yhzDetail.value));
console.log("form", toRaw(form));
const res = await request({
url: "/snow-ops-platform/event/add",
method: "POST",
data: form,
});
if (res.code === "00000") {
toast.close();
showToast({
type: "success",
message: "上报成功",
});
router.push({
name: "IceEventManage",
params: { data: encodeURIComponent(JSON.stringify(yhzDetail.value)) },
});
} else {
throw new Error(res.message);
}
} catch (error) {
toast.close();
showToast({
type: "fail",
message: error.message,
});
}
};
const expectDate = ref([]);
const expectTime = ref([]);
const actualDate = ref([]);
const actualTime = ref([]);
// 预计恢复时间相关
const showExpectPicker = ref(false);
const minDate = new Date();
const maxDate = new Date(2050, 11, 31);
const handleConfirmExpectTime = ({ selectedValues }) => {
form.event.expectRecoverTime = selectedValues.join("-");
const handleConfirmExpectTime = () => {
const [year, month, day] = expectDate.value;
const [hour, minute] = expectTime.value;
form.event.expectRecoverTime = `${year}-${month.padStart(
2,
"0"
)}-${day.padStart(2, "0")} ${hour.padStart(2, "0")}:${minute.padStart(
2,
"0"
)}:00`;
showExpectPicker.value = false;
};
// 实际恢复时间相关
const showActualPicker = ref(false);
const handleConfirmActualTime = ({ selectedValues }) => {
form.traffic.actualRecoverTime = selectedValues.join("-");
const handleConfirmActualTime = () => {
const [year, month, day] = actualDate.value;
const [hour, minute] = actualTime.value;
form.traffic.actualRecoverTime = `${year}-${month.padStart(
2,
"0"
)}-${day.padStart(2, "0")} ${hour.padStart(2, "0")}:${minute.padStart(
2,
"0"
)}:00`;
showActualPicker.value = false;
};
// 在打开选择器时设置初始值
watch(showExpectPicker, (val) => {
if (val) {
const current = form.event.expectRecoverTime
? new Date(form.event.expectRecoverTime)
: new Date();
expectDate.value = [
current.getFullYear(),
current.getMonth() + 1,
current.getDate(),
];
expectTime.value = [current.getHours(), current.getMinutes()];
}
});
watch(showActualPicker, (val) => {
if (val) {
const current = form.traffic.actualRecoverTime
? new Date(form.traffic.actualRecoverTime)
: new Date();
actualDate.value = [
current.getFullYear(),
current.getMonth() + 1,
current.getDate(),
];
actualTime.value = [current.getHours(), current.getMinutes()];
}
});
// 文件上传
const afterRead = async (file) => {
try {

73
packages/mobile/src/views/IceEvent/IceEventDetails.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="home">
<van-nav-bar title="物资管理" fixed left-arrow @click-left="onClickLeft" />
<van-nav-bar title="冰雪灾害" fixed left-arrow @click-left="onClickLeft" />
<van-cell-group>
<van-cell title="当前站点" :value="yhzDetail.mc" />
@ -9,19 +9,36 @@
<div class="content">
<van-cell-group>
<van-cell
title="物资信息"
title="基本信息"
style="font-size: 18px; font-weight: bold; line-height: inherit"
>
</van-cell>
<van-cell :title="'物资名称： ' + wzDetailData.wzmc"> </van-cell>
<van-cell :title="'数量： ' + wzDetailData.sl"> </van-cell>
<van-cell :title="'余量： ' + wzDetailData.ye"> </van-cell>
<van-cell :title="'单位： ' + wzDetailData.dw"> </van-cell>
<van-cell :title="'存放地点： ' + wzDetailData.cfdd"> </van-cell>
<van-cell :title="'区县名称： ' + wzDetailData.qxmc"> </van-cell>
<van-cell :title="'负责人： ' + wzDetailData.fzr"> </van-cell>
<van-cell :title="'联系电话： ' + wzDetailData.lxdh"> </van-cell>
<van-cell :title="'入库日期： ' + wzDetailData.rkrq"> </van-cell>
<van-cell :title="'发生时间： ' + eventDetailData?.event?.occurTime"> </van-cell>
<van-cell :title="'发生地点： ' + eventDetailData?.event?.occurLocation"> </van-cell>
<van-cell :title="'起点桩号： ' + eventDetailData?.event?.startStakeNo"> </van-cell>
<van-cell :title="'止点桩号： ' + eventDetailData?.event?.endStakeNo"> </van-cell>
<van-cell :title="'受灾里程： ' + eventDetailData?.event?.disasterMileage"> </van-cell>
<van-cell :title="'填报人： ' + eventDetailData?.event?.reporterName"> </van-cell>
<van-cell :title="'填报时间： ' + eventDetailData?.event?.reportTime"> </van-cell>
</van-cell-group>
<van-cell-group>
<van-cell
title="处置情况"
style="font-size: 18px; font-weight: bold; line-height: inherit"
>
</van-cell>
<van-cell :title="'处置措施： ' + eventDetailData?.event?.disposalMeasures"> </van-cell>
<van-cell :title="'预计恢复时间： ' + eventDetailData?.event?.expectRecoverTime"> </van-cell>
</van-cell-group>
<van-cell-group>
<van-cell
title="实施情况"
style="font-size: 18px; font-weight: bold; line-height: inherit"
>
</van-cell>
<van-cell :title="'投入人力： ' + eventDetailData?.material?.inputManpower"> </van-cell>
<van-cell :title="'投入资金： ' + eventDetailData?.material?.inputFunds"> </van-cell>
<van-cell :title="'投入设备： ' + eventDetailData?.material?.inputEquipment"> </van-cell>
</van-cell-group>
</div>
</div>
@ -39,41 +56,39 @@ const router = useRouter();
const route = useRoute();
const yhzDetail = ref({});
const wzData = ref([]);
const wzDetailData = ref({}); // 物资详情数据
const event = ref();
const eventDetailData = ref({}); // 冰雪事件详情数据
onMounted(() => {
const data = JSON.parse(decodeURIComponent(route.params.data));
yhzDetail.value = data.yhzDetail;
wzData.value = data.material;
console.log("传递过来的参数:", data);
getwzDetail();
});
// 获取物资详情
const getwzDetail = async () => {
// 获取冰雪事件详情数据
const getEventDetailData = async () => {
try {
const res = await request({
url: `/snow-ops-platform/yjwz/getById?rid=${wzData.value.rid}`,
url: `/snow-ops-platform/event/getById?id=${event.value.id}`,
method: "GET",
});
if (res.code && res.code === "00000") {
wzDetailData.value = res.data;
if (res.code === "00000") {
eventDetailData.value = res.data;
} else {
throw new Error(res.message);
}
} catch (error) {
showToast({
message: error.message,
type: "error",
type: "fail",
});
console.log("error", error);
}
};
onMounted(() => {
const data = JSON.parse(decodeURIComponent(route.params.data));
yhzDetail.value = data.yhzDetail;
event.value = data.event;
getEventDetailData();
});
const onClickLeft = () => {
router.push({
name: "MaterialManage",
name: "IceEventManage",
params: { data: encodeURIComponent(JSON.stringify(yhzDetail.value)) },
});
};

10
packages/mobile/src/views/IceEvent/IceEventManagement.vue
View File

@ -16,17 +16,19 @@
<van-cell-group>
<van-cell
v-for="(item, index) in eventList"
center
:key="index"
:title="item.wzmc"
:title="item.occurLocation"
is-link
:label="`填报时间：${item.sl} (${item.dw})`"
:label="`填报时间：${item.reportTime}`"
:value="`填报人：${item.reporterName}`"
:to="{
name: 'MaterialDetail',
name: 'IceEventDetail',
params: {
data: encodeURIComponent(
JSON.stringify({
yhzDetail: yhzDetail,
material: item,
event: item,
})
),
},