上报

src/router/routes.ts

@@ -260,6 +260,24 @@ export const constantRoutes: Array<RouteRecordRaw> = [
       noCache: true
     }
   },
+  {
+    path: "/event/ReportPage",
+    name: "ReportPage",
+    component: () => import("@/views/event/ReportPage.vue"),
+    meta: {
+      title: "上报页",
+      noCache: true
+    }
+  },
+  {
+    path: "/event/ViewPage",
+    name: "ViewPage",
+    component: () => import("@/views/event/ViewPage.vue"),
+    meta: {
+      title: "查看页",
+      noCache: true
+    }
+  },
   {
     path: "/event/add",
     name: "EventAdd",

src/views/event/ReportPage.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="common-form-container">
+    <van-form @submit="onSubmit">
+      <!-- 使用 v-for 循环渲染多个表单块 -->
+      <div v-for="(form, index) in forms" :key="index" class="form-item">
+        <div class="common-form-content">
+          <div class="common-form-item">
+            <div class="label-box">
+              <div class="box">
+                <div>行政区划:</div>
+              </div>
+              <van-field
+                v-model="form.fieldValue"
+                class="common-field"
+                :right-icon="selectIcon"
+                readonly
+                placeholder="选择城市"
+                @click="form.showPicker = true"
+              />
+              <van-popup
+                v-model:show="form.showPicker"
+                destroy-on-close
+                round
+                position="bottom"
+              >
+                <van-picker
+                  :model-value="form.pickerValue"
+                  :columns="columns"
+                  @cancel="form.showPicker = false"
+                  @confirm="onConfirm($event, index)"
+                />
+              </van-popup>
+            </div>
+            <!-- 其他字段绑定到对应索引的表单数据 -->
+            <div class="label-box">
+              <div class="box">
+                <div>死亡人数:</div>
+              </div>
+              <van-field v-model="form.death_toll" class="common-field">
+                <template #extra>
+                  <div class="font-stl">人</div>
+                </template>
+              </van-field>
+            </div>
+            <div class="label-box">
+              <div class="box">
+                <div>受伤人数:</div>
+              </div>
+              <van-field v-model="form.injured_num" class="common-field">
+                <template #extra>
+                  <div class="font-stl">人</div>
+                </template>
+              </van-field>
+            </div>
+            <div class="label-box">
+              <div class="box">
+                <div>失踪人数:</div>
+              </div>
+              <van-field v-model="form.missing_num" class="common-field">
+                <template #extra>
+                  <div class="font-stl">人</div>
+                </template>
+              </van-field>
+            </div>
+            <div class="label-box">
+              <div class="box">
+                <div>紧急转移:</div>
+              </div>
+              <van-field v-model="form.transfer_num" class="common-field">
+                <template #extra>
+                  <div class="font-stl">人</div>
+                </template>
+              </van-field>
+            </div>
+            <div class="label-box">
+              <div class="box">
+                <div>直接经济损失:</div>
+              </div>
+              <van-field v-model="form.unit_name" class="common-field">
+                <template #extra>
+                  <div class="font-stl">万元</div>
+                </template>
+              </van-field>
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-form>
+    <div class="form-item"
+         @click="addPart"
+         :class="{ 'disabled-add': forms.length >= MAX_FORMS }">
+      <div class="dashed-box">
+        +
+        <span v-if="forms.length >= MAX_FORMS" class="limit-tip">(已达上限)</span>
+      </div>
+    </div>
+    <div class="button-container">
+      <van-button class="confirm-btn" type="primary" @click="handleSubmit"
+        >确定</van-button
+      >
+      <van-button class="cancel-btn" @click="handleCancel">取消</van-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import selectIcon from "@/assets/images/selectIcon.png";
+import { ref } from "vue";
+import {PickerConfirmEventParams, showToast} from "vant";
+
+interface FormItem {
+  fieldValue: string;
+  showPicker: boolean;
+  pickerValue: (string | number)[];
+  death_toll: string;
+  injured_num: string;
+  missing_num: string;
+  transfer_num: string;
+  unit_name: string;
+}
+// 存储多个表单数据
+const forms = ref<FormItem[]>([
+  {
+    fieldValue: "",
+    showPicker: false,
+    pickerValue: [],
+    death_toll: "",
+    injured_num: "",
+    missing_num: "",
+    transfer_num: "",
+    unit_name: ""
+  }
+]);
+const columns = [
+  { text: "茂名市", value: "maoming" },
+  { text: "茂南区", value: "maonan" },
+  { text: "电白区", value: "dianbai" },
+  { text: "高州市", value: "gaozhou" },
+  { text: "信宜市", value: "xinyi" },
+  { text: "化州市", value: "huazhou" }
+];
+const MAX_FORMS = 6;
+
+const onConfirm = (event: PickerConfirmEventParams, index: number) => {
+  const { selectedOptions } = event;
+  forms.value[index].showPicker = false;
+  forms.value[index].fieldValue = selectedOptions[0].text;
+};
+
+const addPart = () => {
+  if (forms.value.length >= MAX_FORMS) {
+    showToast(`最多只能添加${MAX_FORMS}个表单`);
+    return;
+  }
+  forms.value.push({
+    fieldValue: "",
+    showPicker: false,
+    pickerValue: [],
+    death_toll: "",
+    injured_num: "",
+    missing_num: "",
+    transfer_num: "",
+    unit_name: ""
+  });
+};
+
+// 新增事件处理
+const handleSubmit = () => {
+  console.log("提交数据：", forms.value);
+};
+
+const handleCancel = () => {
+  //清空表单
+  forms.value = [
+    {
+      fieldValue: "",
+      showPicker: false,
+      pickerValue: [],
+      death_toll: "",
+      injured_num: "",
+      missing_num: "",
+      transfer_num: "",
+      unit_name: ""
+    }
+  ];
+};
+</script>
+
+<style scoped lang="scss">
+.label-box {
+  display: flex;
+  align-items: center;
+}
+.box {
+  width: 160px;
+}
+.font-stl {
+  color: #cfccd1;
+  margin-right: 8px;
+  margin-top: 3px;
+}
+.common-form-container .common-form-item {
+  :deep(.common-field) {
+    border: 1px solid #dce0ee;
+    border-radius: 2px;
+    padding: 0;
+    margin: 6px 0;
+    .van-field__body {
+      border: none !important;
+    }
+  }
+}
+.dashed-box {
+  border: 2px dashed #dce0ee;
+  padding: 20px;
+  width: 310px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30px;
+  color: #000;
+}
+.button-container {
+  display: flex;
+  gap: 15px;
+  margin: 20px 16px 0;
+
+  .confirm-btn, .cancel-btn {
+    flex: 1;
+    height: 44px;
+    border-radius: 4px;
+    font-size: 16px;
+  }
+
+  .cancel-btn {
+    color: #666;
+    background-color: #f5f5f5;
+    border: 1px solid #ddd;
+  }
+}
+
+// 调整原有+号框间距
+.form-item {
+  margin-bottom: 15px;
+}
+.disabled-add {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.limit-tip {
+  color: #f56c6c;
+  font-size: 20px;
+}
+</style>

src/views/event/ViewPage.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="common-form-container">
+    <van-form @submit="onSubmit" disabled>
+      <!-- 使用 v-for 循环渲染多个表单块 -->
+      <div class="form-item">
+        <div class="common-form-content">
+          <div class="common-form-item">
+            <!-- 其他字段绑定到对应索引的表单数据 -->
+            <div class="label-box">
+              <div class="box">
+                <div>死亡人数:</div>
+              </div>
+              <van-field v-model="total.death_toll" class="common-field">
+                <template #extra>
+                  <div class="font-stl">人</div>
+                </template>
+              </van-field>
+            </div>
+            <div class="label-box">
+              <div class="box">
+                <div>受伤人数:</div>
+              </div>
+              <van-field v-model="total.injured_num" class="common-field">
+                <template #extra>
+                  <div class="font-stl">人</div>
+                </template>
+              </van-field>
+            </div>
+            <div class="label-box">
+              <div class="box">
+                <div>失踪人数:</div>
+              </div>
+              <van-field v-model="total.missing_num" class="common-field">
+                <template #extra>
+                  <div class="font-stl">人</div>
+                </template>
+              </van-field>
+            </div>
+            <div class="label-box">
+              <div class="box">
+                <div>紧急转移:</div>
+              </div>
+              <van-field v-model="total.transfer_num" class="common-field">
+                <template #extra>
+                  <div class="font-stl">人</div>
+                </template>
+              </van-field>
+            </div>
+            <div class="label-box">
+              <div class="box">
+                <div>直接经济损失:</div>
+              </div>
+              <van-field v-model="total.unit_name" class="common-field">
+                <template #extra>
+                  <div class="font-stl">万元</div>
+                </template>
+              </van-field>
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-form>
+    <van-form @submit="onSubmit" disabled>
+      <!-- 使用 v-for 循环渲染多个表单块 -->
+      <div v-for="(form, index) in forms" :key="index" class="form-item">
+        <div class="common-form-content">
+          <div class="common-form-item">
+            <div class="label-box">
+              <div class="box">
+                <div>行政区划:</div>
+              </div>
+              <van-field
+                v-model="form.fieldValue"
+                class="common-field"
+                :right-icon="selectIcon"
+                readonly
+                placeholder="选择城市"
+                @click="showPicker = true"
+              />
+              <van-popup
+                v-model:show="showPicker"
+                destroy-on-close
+                round
+                position="bottom"
+              >
+                <van-picker
+                  :model-value="form.pickerValue"
+                  :columns="columns"
+                  @cancel="showPicker = false"
+                  @confirm="onConfirm($event, index)"
+                />
+              </van-popup>
+            </div>
+            <!-- 其他字段绑定到对应索引的表单数据 -->
+            <div class="label-box">
+              <div class="box">
+                <div>死亡人数:</div>
+              </div>
+              <van-field v-model="form.death_toll" class="common-field">
+                <template #extra>
+                  <div class="font-stl">人</div>
+                </template>
+              </van-field>
+            </div>
+            <div class="label-box">
+              <div class="box">
+                <div>受伤人数:</div>
+              </div>
+              <van-field v-model="form.injured_num" class="common-field">
+                <template #extra>
+                  <div class="font-stl">人</div>
+                </template>
+              </van-field>
+            </div>
+            <div class="label-box">
+              <div class="box">
+                <div>失踪人数:</div>
+              </div>
+              <van-field v-model="form.missing_num" class="common-field">
+                <template #extra>
+                  <div class="font-stl">人</div>
+                </template>
+              </van-field>
+            </div>
+            <div class="label-box">
+              <div class="box">
+                <div>紧急转移:</div>
+              </div>
+              <van-field v-model="form.transfer_num" class="common-field">
+                <template #extra>
+                  <div class="font-stl">人</div>
+                </template>
+              </van-field>
+            </div>
+            <div class="label-box">
+              <div class="box">
+                <div>直接经济损失:</div>
+              </div>
+              <van-field v-model="form.unit_name" class="common-field">
+                <template #extra>
+                  <div class="font-stl">万元</div>
+                </template>
+              </van-field>
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import selectIcon from "@/assets/images/selectIcon.png";
+import { ref } from "vue";
+import { PickerConfirmEventParams, showToast } from "vant";
+
+const forms = ref([
+  {
+    fieldValue: "maoming",
+    death_toll: "1",
+    injured_num: "1",
+    missing_num: "1",
+    transfer_num: "1",
+    unit_name: "1"
+  },
+  {
+    fieldValue: "xinyi",
+    death_toll: "1",
+    injured_num: "1",
+    missing_num: "1",
+    transfer_num: "1",
+    unit_name: "1"
+  },
+  {
+    fieldValue: "xinyi",
+    death_toll: "1",
+    injured_num: "1",
+    missing_num: "1",
+    transfer_num: "1",
+    unit_name: "1"
+  }
+]);
+const total = ref({
+  death_toll: "0",
+  injured_num: "0",
+  missing_num: "0",
+  transfer_num: "0",
+  unit_name: "0"
+});
+const columns = [
+  { text: "茂名市", value: "maoming" },
+  { text: "茂南区", value: "maonan" },
+  { text: "电白区", value: "dianbai" },
+  { text: "高州市", value: "gaozhou" },
+  { text: "信宜市", value: "xinyi" },
+  { text: "化州市", value: "huazhou" }
+];
+watchEffect(() => {
+  const sum = {
+    death_toll: 0,
+    injured_num: 0,
+    missing_num: 0,
+    transfer_num: 0,
+    unit_name: 0
+  };
+  forms.value.forEach(form => {
+    sum.death_toll += Number(form.death_toll) || 0;
+    sum.injured_num += Number(form.injured_num) || 0;
+    sum.missing_num += Number(form.missing_num) || 0;
+    sum.transfer_num += Number(form.transfer_num) || 0;
+    sum.unit_name += Number(form.unit_name) || 0;
+  });
+  total.value.death_toll = String(sum.death_toll);
+  total.value.injured_num = String(sum.injured_num);
+  total.value.missing_num = String(sum.missing_num);
+  total.value.transfer_num = String(sum.transfer_num);
+  total.value.unit_name = String(sum.unit_name);
+});
+const MAX_FORMS = 6;
+const showPicker = ref(false);
+const pickerValue = ref([]);
+
+const onConfirm = (event: PickerConfirmEventParams, index: number) => {
+  const { selectedOptions } = event;
+  forms.value[index].showPicker = false;
+  forms.value[index].fieldValue = selectedOptions[0].text;
+};
+
+const addPart = () => {
+  if (forms.value.length >= MAX_FORMS) {
+    showToast(`最多只能添加${MAX_FORMS}个表单`);
+    return;
+  }
+  forms.value.push({
+    fieldValue: "",
+    showPicker: false,
+    pickerValue: [],
+    death_toll: "",
+    injured_num: "",
+    missing_num: "",
+    transfer_num: "",
+    unit_name: ""
+  });
+};
+
+// 新增事件处理
+const handleSubmit = () => {
+  console.log("提交数据：", forms.value);
+};
+
+const handleCancel = () => {
+  //清空表单
+  forms.value = [
+    {
+      fieldValue: "",
+      showPicker: false,
+      pickerValue: [],
+      death_toll: "",
+      injured_num: "",
+      missing_num: "",
+      transfer_num: "",
+      unit_name: ""
+    }
+  ];
+};
+</script>
+
+<style scoped lang="scss">
+.label-box {
+  display: flex;
+  align-items: center;
+}
+.box {
+  width: 160px;
+}
+.font-stl {
+  color: #cfccd1;
+  margin-right: 8px;
+  margin-top: 3px;
+}
+.common-form-container .common-form-item {
+  :deep(.common-field) {
+    border: 1px solid #dce0ee;
+    border-radius: 2px;
+    padding: 0;
+    margin: 6px 0;
+    .van-field__body {
+      border: none !important;
+    }
+  }
+}
+.dashed-box {
+  border: 2px dashed #dce0ee;
+  padding: 20px;
+  width: 310px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30px;
+  color: #000;
+}
+.button-container {
+  display: flex;
+  gap: 15px;
+  margin: 20px 16px 0;
+
+  .confirm-btn,
+  .cancel-btn {
+    flex: 1;
+    height: 44px;
+    border-radius: 4px;
+    font-size: 16px;
+  }
+
+  .cancel-btn {
+    color: #666;
+    background-color: #f5f5f5;
+    border: 1px solid #ddd;
+  }
+}
+
+// 调整原有+号框间距
+.form-item {
+  margin-bottom: 15px;
+}
+.disabled-add {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.limit-tip {
+  color: #f56c6c;
+  font-size: 20px;
+}
+
+</style>

src/views/event/detail.vue

@@ -98,7 +98,7 @@
               <div
                 v-show="eventInfo.casualties === ''"
                 class="event-data-item-value blue"
-                @click="handleUploadCasualties"
+                @click="viewPage"
               >
                 去上报
               </div>
@@ -106,11 +106,17 @@
                 v-show="eventInfo.casualties === '1'"
                 class="event-data-item-value"
               >
-                死亡{{ eventInfo.deaths }}人，受伤{{
-                  eventInfo.injuries
-                }}人，失联{{ eventInfo.missing }}人
-                <span class="blue" @click="handleUploadCasualties">续报 </span>
+                <span class="blue" @click="viewPage">查看 </span>
               </div>
+              <!--              <div-->
+              <!--                  v-show="eventInfo.casualties === '1'"-->
+              <!--                  class="event-data-item-value"-->
+              <!--              >-->
+              <!--                死亡{{ eventInfo.deaths }}人，受伤{{-->
+              <!--                  eventInfo.injuries-->
+              <!--                }}人，失联{{ eventInfo.missing }}人-->
+              <!--                <span class="blue" @click="reportPage">续报 </span>-->
+              <!--              </div>-->
             </div>
             <div class="event-data-item">
               <div class="item-left">
@@ -156,7 +162,11 @@
         <van-tab title="事件跟踪">
           <div class="event_tab">
             <div class="my-time-line">
-              <TimeLine v-model:eventTrackState="eventTrackState" :eventInfo="eventInfo" style="margin-left: 0px; margin-right: 0px" />
+              <TimeLine
+                v-model:eventTrackState="eventTrackState"
+                :eventInfo="eventInfo"
+                style="margin-left: 0px; margin-right: 0px"
+              />
             </div>
           </div>
         </van-tab>
@@ -449,6 +459,13 @@ const handleUploadCasualties = () => {
   uploadCasualtiesState.show = true;
 };
 
+const reportPage = () => {
+  router.push({ name: "ReportPage" });
+};
+const viewPage = () => {
+  router.push({ name: "ViewPage" });
+};
+
 const onUploadCasualtiesDialogClose = t => {
   console.log("onUploadCasualtiesDialogClose", t);
   uploadCasualtiesState.show = false;
@@ -493,7 +510,7 @@ const onStartEventDialogClose = t => {
   if (t) {
     getEventDetail({ event_id: eventId.value }).then(res => {
       eventInfo.value = res.data;
-       res.data.event_status_tracks.items.reverse()
+      res.data.event_status_tracks.items.reverse();
       eventTrackState.value = res.data.event_status_tracks;
     });
   }
@@ -528,7 +545,7 @@ const refreshData = () => {
   eventId.value = route.query.event_id as string;
   getEventDetail({ event_id: eventId.value }).then(res => {
     eventInfo.value = res.data;
-    res.data.event_status_tracks.items.reverse()
+    res.data.event_status_tracks.items.reverse();
     eventTrackState.value = res.data.event_status_tracks;
     if (!!eventInfo.value.plan_id) {
       getPlan(eventInfo.value.plan_id);