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

packages/mobile/src/router/index.js

@@ -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({

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

@@ -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
+          <van-picker-group
-            type="datetime"
+            title="选择日期时间"
-            :min-date="minDate"
+            :tabs="['选择日期', '选择时间']"
-            :max-date="maxDate"
             @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
+          <van-picker-group
-            type="datetime"
+            title="选择日期时间"
-            :min-date="minDate"
+            :tabs="['选择日期', '选择时间']"
-            :max-date="maxDate"
             @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 = () => {
+const showAddMaterialPopup = ref(false);
-  console.log("打开添加物资弹窗");
+const materialList = ref([]);
-}
+const checkboxRefs = ref([]);
-
+const checked = ref([]);
-
+const toggle = (index) => {
-const handleAdd = () => {
+  checkboxRefs.value[index].toggle();
-  console.log("form", toRaw(form));
 };
 
+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 }) => {
+const handleConfirmExpectTime = () => {
-  form.event.expectRecoverTime = selectedValues.join("-");
+  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 }) => {
+const handleConfirmActualTime = () => {
-  form.traffic.actualRecoverTime = selectedValues.join("-");
+  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 {

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

@@ -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="'发生时间： ' + eventDetailData?.event?.occurTime"> </van-cell>
-        <van-cell :title="'数量： ' + wzDetailData.sl"> </van-cell>
+        <van-cell :title="'发生地点： ' + eventDetailData?.event?.occurLocation"> </van-cell>
-        <van-cell :title="'余量： ' + wzDetailData.ye"> </van-cell>
+        <van-cell :title="'起点桩号： ' + eventDetailData?.event?.startStakeNo"> </van-cell>
-        <van-cell :title="'单位： ' + wzDetailData.dw"> </van-cell>
+        <van-cell :title="'止点桩号： ' + eventDetailData?.event?.endStakeNo"> </van-cell>
-        <van-cell :title="'存放地点： ' + wzDetailData.cfdd"> </van-cell>
+        <van-cell :title="'受灾里程： ' + eventDetailData?.event?.disasterMileage"> </van-cell>
-        <van-cell :title="'区县名称： ' + wzDetailData.qxmc"> </van-cell>
+        <van-cell :title="'填报人： ' + eventDetailData?.event?.reporterName"> </van-cell>
-        <van-cell :title="'负责人： ' + wzDetailData.fzr"> </van-cell>
+        <van-cell :title="'填报时间： ' + eventDetailData?.event?.reportTime"> </van-cell>
-        <van-cell :title="'联系电话： ' + wzDetailData.lxdh"> </van-cell>
+      </van-cell-group>
-        <van-cell :title="'入库日期： ' + wzDetailData.rkrq"> </van-cell>
+      <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 event = ref();
-const wzDetailData = ref({}); // 物资详情数据
+const eventDetailData = ref({}); // 冰雪事件详情数据
 
-onMounted(() => {
+// 获取冰雪事件详情数据
-  const data = JSON.parse(decodeURIComponent(route.params.data));
+const getEventDetailData = async () => {
-  yhzDetail.value = data.yhzDetail;
-  wzData.value = data.material;
-  console.log("传递过来的参数:", data);
-  getwzDetail();
-});
-
-// 获取物资详情
-const getwzDetail = 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") {
+    if (res.code === "00000") {
-      wzDetailData.value = res.data;
+      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)) },
   });
 };

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

@@ -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,
                 })
               ),
             },