App端 续报页面编写

packages/mobile/src/views/IceEvent/IceEventAdd.vue

@@ -11,233 +11,103 @@
       <van-form class="IceEventAddForm" label-align="left" colon>
         <van-field v-model="form.event.occurTime" label="发生时间" center>
           <template #button>
-            <van-button
+            <van-button plain round type="primary" size="mini" @click="getCurrentTime">校准时间</van-button>
-              plain
-              round
-              type="primary"
-              size="mini"
-              @click="getCurrentTime"
-              >校准时间</van-button
-            >
           </template>
         </van-field>
-        <van-field
+        <van-field v-model="form.event.occurLocation" label="发生地点" center placeholder="请填写" />
-          v-model="form.event.occurLocation"
+        <van-field v-model="form.event.routeNo" label="线路编号" center placeholder="请填写" />
-          label="发生地点"
+        <van-field v-model="form.event.startStakeNo" label="起点桩号" center placeholder="请填写" />
-          center
+        <van-field v-model="form.event.endStakeNo" label="止点桩号" center placeholder="请填写" />
-          placeholder="请填写"
+        <van-field v-model="form.event.disasterMileage" label="受灾里程" center type="number" 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
-          type="number"
-          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
+              <van-button plain :type="form.event.disposalMeasures === '限速通行'
-                plain
+                ? 'primary'
-                :type="
+                : 'default'
-                  form.event.disposalMeasures === '限速通行'
+                " size="small" @click="toggleDisposal('限速通行')">
-                    ? 'primary'
-                    : 'default'
-                "
-                size="small"
-                @click="toggleDisposal('限速通行')"
-              >
                 限速通行
               </van-button>
-              <van-button
+              <van-button plain :type="form.event.disposalMeasures === '封闭交通'
-                plain
+                ? 'primary'
-                :type="
+                : 'default'
-                  form.event.disposalMeasures === '封闭交通'
+                " size="small" @click="toggleDisposal('封闭交通')" class="last-button">
-                    ? 'primary'
-                    : 'default'
-                "
-                size="small"
-                @click="toggleDisposal('封闭交通')"
-                class="last-button"
-              >
                 封闭交通
               </van-button>
             </div>
           </template>
         </van-field>
-        <van-field
+        <van-field v-model="form.event.expectRecoverTime" label="预计恢复时间" center placeholder="请选择" readonly clickable
-          v-model="form.event.expectRecoverTime"
+          @click="showExpectPicker = true" />
-          label="预计恢复时间"
+        <van-popup :show="showExpectPicker" round position="bottom" close-on-click-overlay
-          center
+          @close="showExpectPicker = false">
-          placeholder="请选择"
+          <van-picker-group title="选择日期时间" :tabs="['选择日期', '选择时间']" @confirm="handleConfirmExpectTime"
-          readonly
+            @cancel="showExpectPicker = false">
-          clickable
+            <van-date-picker v-model="expectDate" :min-date="minDate" :max-date="maxDate" />
-          @click="showExpectPicker = true"
-        />
-        <van-popup
-          :show="showExpectPicker"
-          round
-          position="bottom"
-          close-on-click-overlay
-          @close="showExpectPicker = false"
-        >
-          <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>
       <van-form class="IceEventAddForm" label-align="left" colon>
-        <van-field
+        <van-field v-model="form.material.inputManpower" type="number" label="投入人力" center placeholder="请填写">
-          v-model="form.material.inputManpower"
-          type="number"
-          label="投入人力"
-          center
-          placeholder="请填写"
-        >
           <template #extra> 人次 </template>
         </van-field>
-        <van-field
+        <van-field v-model="form.material.inputFunds" type="number" label="投入资金" center placeholder="请填写">
-          v-model="form.material.inputFunds"
-          type="number"
-          label="投入资金"
-          center
-          placeholder="请填写"
-        >
           <template #extra> 万元 </template>
         </van-field>
-        <van-field
+        <van-field v-model="form.material.inputEquipment" type="number" label="投入设备" center placeholder="请填写">
-          v-model="form.material.inputEquipment"
-          type="number"
-          label="投入设备"
-          center
-          placeholder="请填写"
-        >
           <template #extra> 台班 </template>
         </van-field>
 
         <!-- 选择物资列表 -->
-        <van-field
+        <van-field v-for="(material, index) in form.yhzMaterialList" :key="material.rid" v-model="material.usageAmount"
-          v-for="(material, index) in form.yhzMaterialList"
+          type="number" @input="checkMaterialAmount(material, index)" :label="material.wzmc" center
-          :key="material.rid"
+          :placeholder="`余额: ${material.ye} `">
-          v-model="material.usageAmount"
-          type="number"
-          @input="checkMaterialAmount(material, index)"
-          :label="material.wzmc"
-          center
-          :placeholder="`余额: ${material.ye} `"
-        >
           <template #extra>
             <span style="margin-right: 10px">{{ material.dw }}</span>
-            <van-button
+            <van-button size="small" type="danger" @click.stop="form.yhzMaterialList.splice(index, 1)">
-              size="small"
-              type="danger"
-              @click.stop="form.yhzMaterialList.splice(index, 1)"
-            >
               删除
             </van-button>
           </template>
         </van-field>
 
-        <van-button
+        <van-button class="add-wzbtn" type="primary" icon="plus" plain @click="handleOpenAddMaterial">添加物资
-          class="add-wzbtn"
-          type="primary"
-          icon="plus"
-          plain
-          @click="handleOpenAddMaterial"
-          >添加物资
         </van-button>
-        <van-popup
+        <van-popup :show="showAddMaterialPopup" position="bottom" close-on-click-overlay
-          :show="showAddMaterialPopup"
+          @close="showAddMaterialPopup = false">
-          position="bottom"
-          close-on-click-overlay
-          @close="showAddMaterialPopup = false"
-        >
           <div style="padding: 16px">
             <h3 style="text-align: center; margin-bottom: 16px">添加物资</h3>
 
             <!-- 搜索框 -->
-            <van-field
+            <van-field v-model="searchText" placeholder="输入物资名称搜索" clearable @update:model-value="handleSearch">
-              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
+                <div style="
-                  style="
                     display: flex;
                     justify-content: space-between;
                     padding: 8px 16px;
-                  "
+                  ">
-                >
                   <span>共 {{ materialList.length }} 项</span>
-                  <van-button
+                  <van-button size="mini" @click="toggleSelectAll" :type="isAllSelected ? 'primary' : 'default'">
-                    size="mini"
-                    @click="toggleSelectAll"
-                    :type="isAllSelected ? 'primary' : 'default'"
-                  >
                     {{ isAllSelected ? "取消全选" : "全选" }}
                   </van-button>
                 </div>
-                <van-cell
+                <van-cell v-for="(item, index) in materialList" clickable :key="item.rid" :title="item.wzmc"
-                  v-for="(item, index) in materialList"
+                  @click="toggle(index)">
-                  clickable
-                  :key="item.rid"
-                  :title="item.wzmc"
-                  @click="toggle(index)"
-                >
                   <template #right-icon>
-                    <van-checkbox
+                    <van-checkbox :name="item.rid" :ref="(el) => (checkboxRefs[index] = el)" @click.stop />
-                      :name="item.rid"
-                      :ref="(el) => (checkboxRefs[index] = el)"
-                      @click.stop
-                    />
                   </template>
                 </van-cell>
               </van-cell-group>
             </van-checkbox-group>
 
-            <van-button
+            <van-button type="primary" block @click="addSelectedMaterials" style="margin-top: 10px">
-              type="primary"
-              block
-              @click="addSelectedMaterials"
-              style="margin-top: 10px"
-            >
               确认添加
             </van-button>
           </div>
@@ -246,29 +116,16 @@
         <van-field label="当前通行情况" center>
           <template #input>
             <div class="disposal-buttons">
-              <van-button
+              <van-button plain :type="form.traffic.currentStatus === 1 ? 'primary' : 'default'" size="small"
-                plain
+                @click="form.traffic.currentStatus = 1">
-                :type="form.traffic.currentStatus === 1 ? 'primary' : 'default'"
-                size="small"
-                @click="form.traffic.currentStatus = 1"
-              >
                 正常通行
               </van-button>
-              <van-button
+              <van-button plain :type="form.traffic.currentStatus === 2 ? 'primary' : 'default'" size="small"
-                plain
+                @click="form.traffic.currentStatus = 2">
-                :type="form.traffic.currentStatus === 2 ? 'primary' : 'default'"
-                size="small"
-                @click="form.traffic.currentStatus = 2"
-              >
                 限速通行
               </van-button>
-              <van-button
+              <van-button plain :type="form.traffic.currentStatus === 3 ? 'primary' : 'default'" size="small"
-                plain
+                @click="form.traffic.currentStatus = 3" class="last-button">
-                :type="form.traffic.currentStatus === 3 ? 'primary' : 'default'"
-                size="small"
-                @click="form.traffic.currentStatus = 3"
-                class="last-button"
-              >
                 封闭交通
               </van-button>
             </div>
@@ -277,85 +134,38 @@
         <van-field label="有无车辆滞留" center>
           <template #input>
             <div class="disposal-buttons">
-              <van-button
+              <van-button plain :type="form.traffic.hasStrandedVehicles === 1 ? 'primary' : 'default'
-                plain
+                " size="small" @click="form.traffic.hasStrandedVehicles = 1">
-                :type="
-                  form.traffic.hasStrandedVehicles === 1 ? 'primary' : 'default'
-                "
-                size="small"
-                @click="form.traffic.hasStrandedVehicles = 1"
-              >
                 有滞留
               </van-button>
-              <van-button
+              <van-button plain :type="form.traffic.hasStrandedVehicles === 0 ? 'primary' : 'default'
-                plain
+                " size="small" @click="
-                :type="
-                  form.traffic.hasStrandedVehicles === 0 ? 'primary' : 'default'
-                "
-                size="small"
-                @click="
                   form.traffic.hasStrandedVehicles = 0;
-                  form.traffic.strandedVehicleCount = null;
+                form.traffic.strandedVehicleCount = null;
-                "
+                " class="last-button">
-                class="last-button"
-              >
                 无滞留
               </van-button>
             </div>
           </template>
         </van-field>
-        <van-field
+        <van-field v-if="form.traffic.hasStrandedVehicles === 1" v-model="form.traffic.strandedVehicleCount"
-          v-if="form.traffic.hasStrandedVehicles === 1"
+          type="number" label="滞留车辆数" center placeholder="请填写" />
-          v-model="form.traffic.strandedVehicleCount"
-          type="number"
-          label="滞留车辆数"
-          center
-          placeholder="请填写"
-        />
 
-        <van-field
+        <van-field v-model="form.traffic.actualRecoverTime" label="实际恢复时间" center placeholder="请选择" readonly clickable
-          v-model="form.traffic.actualRecoverTime"
+          @click="showActualPicker = true" />
-          label="实际恢复时间"
+        <van-popup :show="showActualPicker" round position="bottom" close-on-click-overlay
-          center
+          @close="showActualPicker = false">
-          placeholder="请选择"
+          <van-picker-group title="选择日期时间" :tabs="['选择日期', '选择时间']" @confirm="handleConfirmActualTime"
-          readonly
+            @cancel="showActualPicker = false">
-          clickable
+            <van-date-picker v-model="actualDate" :min-date="minDate" :max-date="maxDate" />
-          @click="showActualPicker = true"
-        />
-        <van-popup
-          :show="showActualPicker"
-          round
-          position="bottom"
-          close-on-click-overlay
-          @close="showActualPicker = false"
-        >
-          <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>
           <template #input>
-            <van-uploader
+            <van-uploader v-model="fileList" @delete="handleDelete" name="photos" :file-list="fileList"
-              v-model="fileList"
+              :file-type="['image/jpeg', 'image/png']" :after-read="afterRead" multiple :max-count="6" />
-              @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>
@@ -366,8 +176,8 @@
     </van-button>
   </div>
 </template>
-      
+
-      <script setup>
+<script setup>
 import { ref, onMounted, reactive, toRaw, watch, computed } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { showToast, showLoadingToast } from "vant";
@@ -595,13 +405,9 @@ const maxDate = new Date(2050, 11, 31);
 const handleConfirmExpectTime = () => {
   const [year, month, day] = expectDate.value;
   const [hour, minute] = expectTime.value;
-  form.event.expectRecoverTime = `${year}-${month.padStart(
+  form.event.expectRecoverTime =
-    2,
+    `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")} ` +
-    "0"
+    `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}:00`;
-  )}-${day.padStart(2, "0")} ${hour.padStart(2, "0")}:${minute.padStart(
-    2,
-    "0"
-  )}:00`;
   showExpectPicker.value = false;
 };
 // 实际恢复时间相关
@@ -609,13 +415,9 @@ const showActualPicker = ref(false);
 const handleConfirmActualTime = () => {
   const [year, month, day] = actualDate.value;
   const [hour, minute] = actualTime.value;
-  form.traffic.actualRecoverTime = `${year}-${month.padStart(
+  form.traffic.actualRecoverTime =
-    2,
+    `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")} ` +
-    "0"
+    `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}:00`;
-  )}-${day.padStart(2, "0")} ${hour.padStart(2, "0")}:${minute.padStart(
-    2,
-    "0"
-  )}:00`;
   showActualPicker.value = false;
 };
 
@@ -693,11 +495,12 @@ const handleDelete = (file) => {
     }
   }
 };
-</script> 
+</script>
-      
+
-      <style scoped>
+<style scoped>
 .home {
-  padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
+  padding-top: var(--van-nav-bar-height);
+  /* 自动匹配导航栏高度 */
 }
 
 .content {
@@ -742,12 +545,15 @@ const handleDelete = (file) => {
   color: white;
   font-size: 12px;
 }
+
 .status-good {
   background-color: #07c160;
 }
+
 .status-warning {
   background-color: #ff976a;
 }
+
 .status-danger {
   background-color: #ee0a24;
 }
@@ -761,11 +567,12 @@ const handleDelete = (file) => {
   gap: 10px;
   padding: 8px 0;
 }
+
 .disposal-buttons .van-button {
   flex: 1;
 }
+
 .last-button {
   margin-right: 16px;
 }
-</style>
+</style>
-      

packages/mobile/src/views/IceEvent/IceEventDetails.vue

@@ -78,7 +78,7 @@
       <van-tabbar-item>
         <template #default>
           <div class="button-box">
-            <van-button type="primary" style="width: 70%; border-radius: 10px" @click="handleFinishOpen">
+            <van-button type="primary" style="width: 70%; border-radius: 10px" @click="handleReportOpen">
               续报
             </van-button>
             <van-button type="primary" style="width: 30%; border-radius: 10px" @click="handleFinishOpen">
@@ -119,11 +119,168 @@
         </div>
       </div>
     </van-popup>
+    <van-popup :show="showPopup" position="bottom" closeable close-on-click-overlay :style="{ height: '80%' }"
+      @close="onPopupClose">
+      <div class="popup-content">
+        <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-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>
+        <van-form class="IceEventAddForm" label-align="left" colon>
+          <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 v-for="(material, index) in form.yhzMaterialList" :key="material.rid"
+            v-model="material.usageAmount" type="number" @input="checkMaterialAmount(material, index)"
+            :label="material.wzmc" center :placeholder="`余额: ${material.ye} `">
+            <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" icon="plus" plain @click="handleOpenAddMaterial">添加物资
+          </van-button>
+          <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>
+            <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;
+                  form.traffic.strandedVehicleCount = null;
+                  " class="last-button">
+                  无滞留
+                </van-button>
+              </div>
+            </template>
+          </van-field>
+          <van-field v-if="form.traffic.hasStrandedVehicles === 1" 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-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>
+            <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>
+        <van-button type="primary" class="add-btn" icon="plus" @click="handleAdd">
+          续报
+        </van-button>
+      </div>
+    </van-popup>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, toRaw, reactive } from "vue";
+import { ref, onMounted, toRaw, reactive, watch, computed } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { showToast, showLoadingToast, showImagePreview } from "vant";
 import { request } from "../../../../shared/utils/request";
@@ -188,9 +345,272 @@ const finishConfirm = async () => {
       type: "fail",
     });
   } catch (error) {
-    
+
   }
 };
+
+const INIT_FORM = {
+  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, // 投入设备
+    createTime: "", // 创建时间
+    updateTime: "", // 更新时间
+  },
+  traffic: {
+    currentStatus: 0, // 当前通行情况 1-正常通行 2-限速通行 3-封闭交通
+    hasStrandedVehicles: 0, // 是否有车辆滞留 0-无 1-有
+    strandedVehicleCount: null, // 车辆滞留数量
+    actualRecoverTime: "", // 实际恢复时间
+    createTime: "", // 创建时间
+    updateTime: "", // 更新时间
+  },
+  yhzMaterialList: [], // 养护站物资列表
+  photos: [],
+}
+const form = reactive({ ...INIT_FORM });
+const fileList = ref([]);
+
+const showPopup = ref(false); // 控制弹出层显示隐藏
+const onPopupClose = () => {
+  showPopup.value = false;
+};
+const handleReportOpen = () => {
+  // 重置表单到初始值
+  const resetForm = JSON.parse(JSON.stringify(INIT_FORM))
+  Object.assign(form, resetForm)
+
+  // 清空文件列表
+  fileList.value = [];
+  showPopup.value = true;
+};
+
+// 处置措施切换
+const toggleDisposal = (type) => {
+  form.event.disposalMeasures =
+    form.event.disposalMeasures === type ? "" : type;
+};
+
+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 = () => {
+  const [year, month, day] = expectDate.value;
+  const [hour, minute] = expectTime.value;
+  form.event.expectRecoverTime =
+    `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")} ` +
+    `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}:00`;
+  showExpectPicker.value = false;
+};
+// 实际恢复时间相关
+const showActualPicker = ref(false);
+const handleConfirmActualTime = () => {
+  const [year, month, day] = actualDate.value;
+  const [hour, minute] = actualTime.value;
+  form.traffic.actualRecoverTime =
+    `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")} ` +
+    `${String(hour).padStart(2, "0")}:${String(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 {
+    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);
+    }
+  }
+};
+
+// 添加物资相关
+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,
+        ye: material.ye,
+      });
+    }
+  });
+  showAddMaterialPopup.value = false;
+  checked.value = [];
+};
+
+// 检查余额
+const checkMaterialAmount = (material, index) => {
+  if (material.usageAmount > material.ye) {
+    showToast({
+      type: "fail",
+      message: "输入数量不能超过物资余额",
+    });
+    // 设置为最大值
+    form.yhzMaterialList[index].usageAmount = material.ye;
+  }
+};
+
+// 查询物资列表
+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 {
+    console.log('form', toRaw(form));
+  } catch (error) {
+
+  }
+}
 </script>
 
 <style scoped>
@@ -242,4 +662,40 @@ const finishConfirm = async () => {
   width: 100%;
   gap: 20px;
 }
+
+.popup-content {
+  padding: 16px 16px 80px 16px;
+}
+
+.disposal-buttons {
+  display: flex;
+  gap: 10px;
+  padding: 8px 0;
+}
+
+.disposal-buttons .van-button {
+  flex: 1;
+}
+
+.last-button {
+  margin-right: 16px;
+}
+
+.add-wzbtn {
+  width: calc(100% - 32px);
+  margin: 10px 16px;
+}
+
+.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;
+}
 </style>