冰雪专题App端 完成事件页面编写
This commit is contained in:
parent
f65de6ca12
commit
8fa1e1d7ae
@ -8,24 +8,17 @@
|
||||
|
||||
<div class="content" v-if="eventDetailData">
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
title="基本信息"
|
||||
style="font-size: 18px; font-weight: bold; line-height: inherit"
|
||||
>
|
||||
<van-cell title="基本信息" style="font-size: 18px; font-weight: bold; line-height: inherit">
|
||||
</van-cell>
|
||||
<van-cell :title="'发生时间： ' + eventDetailData?.event?.occurTime">
|
||||
</van-cell>
|
||||
<van-cell
|
||||
:title="'发生地点： ' + eventDetailData?.event?.occurLocation"
|
||||
>
|
||||
<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 :title="'受灾里程： ' + eventDetailData?.event?.disasterMileage">
|
||||
</van-cell>
|
||||
<van-cell :title="'填报人： ' + eventDetailData?.event?.reporterName">
|
||||
</van-cell>
|
||||
@ -33,101 +26,103 @@
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
title="处置情况"
|
||||
style="font-size: 18px; font-weight: bold; line-height: inherit"
|
||||
>
|
||||
<van-cell title="处置情况" style="font-size: 18px; font-weight: bold; line-height: inherit">
|
||||
</van-cell>
|
||||
<van-cell
|
||||
:title="'处置措施： ' + eventDetailData?.event?.disposalMeasures"
|
||||
>
|
||||
<van-cell :title="'处置措施： ' + eventDetailData?.event?.disposalMeasures">
|
||||
</van-cell>
|
||||
<van-cell
|
||||
:title="'预计恢复时间： ' + eventDetailData?.event?.expectRecoverTime"
|
||||
>
|
||||
<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 title="实施情况" style="font-size: 18px; font-weight: bold; line-height: inherit">
|
||||
</van-cell>
|
||||
<van-cell
|
||||
:title="
|
||||
'投入人力： ' + eventDetailData?.material?.inputManpower + ' 人次'
|
||||
"
|
||||
>
|
||||
<van-cell :title="'投入人力： ' + eventDetailData?.material?.inputManpower + ' 人次'
|
||||
">
|
||||
</van-cell>
|
||||
<van-cell
|
||||
:title="
|
||||
'投入资金： ' + eventDetailData?.material?.inputFunds + ' 万元'
|
||||
"
|
||||
>
|
||||
<van-cell :title="'投入资金： ' + eventDetailData?.material?.inputFunds + ' 万元'
|
||||
">
|
||||
</van-cell>
|
||||
<van-cell
|
||||
:title="
|
||||
'投入设备： ' + eventDetailData?.material?.inputEquipment + ' 台班'
|
||||
"
|
||||
>
|
||||
<van-cell :title="'投入设备： ' + eventDetailData?.material?.inputEquipment + ' 台班'
|
||||
">
|
||||
</van-cell>
|
||||
<van-cell
|
||||
v-for="(item, index) in eventDetailData?.materialUsageList"
|
||||
:key="index"
|
||||
:title="`${item.materialName}：${item.usageAmount} ${item.materialUnit}`"
|
||||
>
|
||||
<van-cell v-for="(item, index) in eventDetailData?.materialUsageList" :key="index"
|
||||
:title="`${item.materialName}：${item.usageAmount} ${item.materialUnit}`">
|
||||
</van-cell>
|
||||
<van-cell
|
||||
:title="`当前通行状况：${
|
||||
{ 1: '正常通行', 2: '限速通行', 3: '封闭交通' }[
|
||||
eventDetailData?.traffic?.currentStatus
|
||||
] || '未知状态'
|
||||
}`"
|
||||
>
|
||||
<van-cell :title="`当前通行状况：${{ 1: '正常通行', 2: '限速通行', 3: '封闭交通' }[
|
||||
eventDetailData?.traffic?.currentStatus
|
||||
] || '未知状态'
|
||||
}`">
|
||||
</van-cell>
|
||||
<van-cell
|
||||
:title="`有无车辆滞留：${
|
||||
{ 0: '无', 1: '有' }[
|
||||
eventDetailData?.traffic?.hasStrandedVehicles
|
||||
] || '未知状态'
|
||||
}`"
|
||||
>
|
||||
<van-cell :title="`有无车辆滞留：${{ 0: '无', 1: '有' }[
|
||||
eventDetailData?.traffic?.hasStrandedVehicles
|
||||
] || '未知状态'
|
||||
}`">
|
||||
</van-cell>
|
||||
<van-cell
|
||||
v-if="eventDetailData?.traffic?.hasStrandedVehicles === 1"
|
||||
:title="
|
||||
'滞留车辆数：' +
|
||||
eventDetailData?.traffic?.strandedVehicleCount +
|
||||
' 辆'
|
||||
"
|
||||
>
|
||||
<van-cell v-if="eventDetailData?.traffic?.hasStrandedVehicles === 1" :title="'滞留车辆数：' +
|
||||
eventDetailData?.traffic?.strandedVehicleCount +
|
||||
' 辆'
|
||||
">
|
||||
</van-cell>
|
||||
<van-cell
|
||||
:title="
|
||||
'实际恢复时间： ' + eventDetailData?.traffic?.actualRecoverTime
|
||||
"
|
||||
>
|
||||
<van-cell :title="'实际恢复时间： ' + eventDetailData?.traffic?.actualRecoverTime
|
||||
">
|
||||
</van-cell>
|
||||
<van-cell :title="'附件： '">
|
||||
<template #label>
|
||||
<van-image
|
||||
v-for="(item, index) in eventDetailData?.photos"
|
||||
:key="index"
|
||||
:src="item.photoUrl"
|
||||
fit="cover"
|
||||
width="100px"
|
||||
height="100px"
|
||||
style="margin: 10px"
|
||||
@click="showImage(item.photoUrl)"
|
||||
></van-image>
|
||||
<van-image v-for="(item, index) in eventDetailData?.photos" :key="index" :src="item.photoUrl" fit="cover"
|
||||
width="100px" height="100px" style="margin: 10px" @click="showImage(item.photoUrl)"></van-image>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
<van-tabbar>
|
||||
<van-tabbar-item>
|
||||
<template #default>
|
||||
<div class="button-box">
|
||||
<van-button type="primary" style="width: 70%; border-radius: 10px" @click="handleFinishOpen">
|
||||
续报
|
||||
</van-button>
|
||||
<van-button type="primary" style="width: 30%; border-radius: 10px" @click="handleFinishOpen">
|
||||
完成事件
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
|
||||
<van-popup :show="showFinishPopup" position="bottom" closeable close-on-click-overlay :style="{ height: '20%' }"
|
||||
@close="onFinishPopupClose">
|
||||
<div style="
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
">
|
||||
<h1 style="
|
||||
margin: 0 0 20px 0;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
">
|
||||
确认完成事件？
|
||||
</h1>
|
||||
|
||||
<div style="display: flex; gap: 20px; width: 100%">
|
||||
<van-button type="default" style="flex: 1; border-radius: 8px" @click="onFinishPopupClose">
|
||||
取消
|
||||
</van-button>
|
||||
<van-button type="primary" style="flex: 1; border-radius: 8px" @click="finishConfirm">
|
||||
确认
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup>
|
||||
import { ref, onMounted, toRaw, reactive } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { showToast, showLoadingToast, showImagePreview } from "vant";
|
||||
@ -177,11 +172,31 @@ const onClickLeft = () => {
|
||||
const showImage = (url) => {
|
||||
showImagePreview([url]);
|
||||
};
|
||||
|
||||
const showFinishPopup = ref(false);
|
||||
const onFinishPopupClose = () => {
|
||||
showFinishPopup.value = false;
|
||||
};
|
||||
const handleFinishOpen = () => {
|
||||
showFinishPopup.value = true;
|
||||
};
|
||||
|
||||
const finishConfirm = async () => {
|
||||
try {
|
||||
showToast({
|
||||
message: "完成事件相关逻辑",
|
||||
type: "fail",
|
||||
});
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped>
|
||||
.home {
|
||||
padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
|
||||
padding-top: var(--van-nav-bar-height);
|
||||
/* 自动匹配导航栏高度 */
|
||||
}
|
||||
|
||||
.content {
|
||||
@ -203,14 +218,28 @@ const showImage = (url) => {
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status-good {
|
||||
background-color: #07c160;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
background-color: #ff976a;
|
||||
}
|
||||
|
||||
.status-danger {
|
||||
background-color: #ee0a24;
|
||||
}
|
||||
</style>
|
||||
|
||||
:deep(.van-tabbar-item__text) {
|
||||
width: 90%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.button-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user