灾害评估

src/api/duty/eventing.ts

@@ -68,3 +68,12 @@ export const getPlanDoc = data => {
     data: data
   });
 };
+
+// 事件伤亡情况
+export function getEventCasualties(data) {
+  return request({
+    url: '/api/event_management/event/get_casualties',
+    method: 'post',
+    data: data
+  });
+}

src/views/disasterRiskMonitor/riverMonitor.vue

@@ -75,7 +75,6 @@
 <script lang="ts" setup name="riverMonitor">
 import Map from "@/components/Map/index2.vue";
 import searchImg from "@/assets/images/search.png";
-import { onMounted, reactive, ref } from "vue";
 import { ElTable, ElTableColumn } from "element-plus";
 import { useDict } from "@/utils/dict";
 import {
@@ -85,42 +84,53 @@ import {
 
 const { district_type } = toRefs<any>(useDict("district_type"));
 let mapRef = ref();
+let mapLoaded = ref(false);
 let eventDetails = ref({});
 let keyword = ref("");
 let area = ref("");
-const riverStatus = ref();
 const tags = reactive([
-  { name: "", num: 0, icon: "icon1", checked: true },
-  { name: "", num: 0, icon: "icon2", checked: true },
-  { name: "", num: 0, icon: "icon3", checked: true },
+  { name: "超警戒", num: 0, icon: "icon1", checked: true },
+  { name: "超保证", num: 0, icon: "icon2", checked: true },
+  { name: "漫坝", num: 0, icon: "icon3", checked: true },
   { name: "水文站", num: 0, icon: "icon4", checked: false },
   { name: "水位站", num: 0, icon: "icon5", checked: false }
 ]);
-// let tags = reactive([
-//   { name: "超堰顶", num: 1, icon: "icon1", checked: true },
-//   { name: "超警戒河道站", num: 1, icon: "icon2", checked: true },
-//   { name: "漫堤河道站", num: 2, icon: "icon3", checked: true },
-//   { name: "水文站", num: 6, icon: "icon4", checked: false },
-//   { name: "水位站", num: 5, icon: "icon5", checked: false }
-// ]);
-watch(
-  () => riverStatus.value,
-  newVal => {
-    if (newVal && newVal.length > 0) {
-      tags.forEach((tag, index) => {
-        if (newVal[index]) {
-          tag.name = newVal[index].type;
-          tag.num = newVal[index].value;
-        }
-      });
-    }
-  },
-  { immediate: true }
-);
 let detailsData = ref({
   text: "",
   dataList: []
 });
+let filterData = computed(() => {
+  const checkedData = tags.filter((item) => item.checked);
+  let res = [];
+  detailsData.value.dataList.forEach((item) => {
+    item.dataType = 'icon3';
+    const index = checkedData.findIndex((item2) => item2.icon === item.dataType);
+    if (index > -1) {
+      const image = iconList[item.dataType].image
+      res.push({
+        id: item.code,
+        icon: image,
+        image: image,
+        imageHover: image,
+        size: iconList[item.dataType].size,
+        lnglat: [item.longitude, item.latitude]
+      });
+    }
+  })
+  return res;
+});
+watch(filterData, () => {
+  if (mapLoaded.value) {
+    const dom = mapRef.value;
+    dom.addMarker(filterData.value);
+  }
+});
+watch(mapLoaded, () => {
+  if (mapLoaded.value) {
+    const dom = mapRef.value;
+    dom.addMarker(filterData.value);
+  }
+})
 const getImageUrl = name => {
   return new URL(
     `../../assets/images/disasterRiskMonitor/riverMonitor/${name}`,
@@ -128,23 +138,23 @@ const getImageUrl = name => {
   ).href;
 };
 let iconList = reactive({
-  "1": {
+  "icon1": {
     image: getImageUrl("icon1.png"),
     size: [20, 20]
   },
-  "2": {
+  "icon2": {
     image: getImageUrl("icon2.png"),
     size: [20, 20]
   },
-  "3": {
+  "icon3": {
     image: getImageUrl("icon3.png"),
     size: [20, 20]
   },
-  "4": {
+  "icon4": {
     image: getImageUrl("icon4.png"),
     size: [20, 20]
   },
-  "5": {
+  "icon5": {
     image: getImageUrl("icon5.png"),
     size: [20, 20]
   }
@@ -163,169 +173,22 @@ const getRiverList = () => {
 };
 
 const getRiverDetail = () => {
-  getRiverStatus().then(res => {
-    riverStatus.value = res.rows;
+  getRiverStatus().then((res: any) => {
+    res.rows.forEach((item) => {
+      const index = tags.findIndex(tag => tag.name === item.type);
+      if (index > -1) {
+        tags[index].num = item.value;
+      }
+    });
   });
 };
-getRiverDetail();
+
 const initData = () => {
-  const dom = mapRef.value;
+  mapLoaded.value = true;
+  getRiverDetail();
   getRiverList();
   detailsData.value.text =
     "2024年10月30日 20:45，袂花江河段当前水位处于正常范围内，低于警戒水位。由于近期连续降雨，河道流量有所增加，但流速和流量仍在可控范围内。";
-  // dataList: [
-  //   {
-  //     data1: "茂南小东江超堰顶站",
-  //     data2: "小东江",
-  //     data3: "10月30日12:00",
-  //     data4: 28.5,
-  //     data5: -1.2,
-  //     longitude: "110.908662",
-  //     latitude: "21.671108",
-  //     dataType: "1"
-  //   },
-  //   {
-  //     data1: "电白袂花江超警戒站",
-  //     data2: "袂花江",
-  //     data3: "10月30日13:00",
-  //     data4: 27.3,
-  //     data5: -1.5,
-  //     longitude: "111.133971",
-  //     latitude: "21.744637",
-  //     dataType: "2"
-  //   },
-  //   {
-  //     data1: "信宜罗江漫堤站",
-  //     data2: "罗江",
-  //     data3: "10月30日14:00",
-  //     data4: 25.6,
-  //     data5: -2.0,
-  //     longitude: "110.572589",
-  //     latitude: "21.890757",
-  //     dataType: "3"
-  //   },
-  //   {
-  //     data1: "化州鉴江漫堤站",
-  //     data2: "鉴江",
-  //     data3: "10月30日15:00",
-  //     data4: 26.7,
-  //     data5: -2.1,
-  //     longitude: "110.661191",
-  //     latitude: "21.573497",
-  //     dataType: "3"
-  //   },
-  //   {
-  //     data1: "茂南小东江上游站",
-  //     data2: "小东江",
-  //     data3: "10月30日11:00",
-  //     data4: 27.9,
-  //     data5: -2.1,
-  //     longitude: "110.908662",
-  //     latitude: "21.671108",
-  //     dataType: "4"
-  //   },
-  //   {
-  //     data1: "电白袂花江下游站",
-  //     data2: "袂花江",
-  //     data3: "10月30日14:00",
-  //     data4: 27.5,
-  //     data5: -1.5,
-  //     longitude: "111.133971",
-  //     latitude: "21.744637",
-  //     dataType: "4"
-  //   },
-  //   {
-  //     data1: "信宜罗江支流站",
-  //     data2: "罗江",
-  //     data3: "10月30日13:00",
-  //     data4: 25.8,
-  //     data5: -2.0,
-  //     longitude: "110.572589",
-  //     latitude: "21.890757",
-  //     dataType: "4"
-  //   },
-  //   {
-  //     data1: "化州鉴江支流站",
-  //     data2: "鉴江",
-  //     data3: "10月30日12:00",
-  //     data4: 26.9,
-  //     data5: -2.1,
-  //     longitude: "110.664431",
-  //     latitude: "21.661873",
-  //     dataType: "4"
-  //   },
-  //   {
-  //     data1: "茂南小东江下游站",
-  //     data2: "小东江",
-  //     data3: "10月30日15:00",
-  //     data4: 28.2,
-  //     data5: -1.3,
-  //     longitude: "110.908662",
-  //     latitude: "21.671108",
-  //     dataType: "4"
-  //   },
-  //   {
-  //     data1: "电白袂花江上游站",
-  //     data2: "袂花江",
-  //     data3: "10月30日12:00",
-  //     data4: 27.7,
-  //     data5: -1.8,
-  //     longitude: "110.92052",
-  //     latitude: "21.579965",
-  //     dataType: "4"
-  //   },
-  //   {
-  //     data1: "信宜罗江主站",
-  //     data2: "罗江",
-  //     data3: "10月30日11:00",
-  //     data4: 25.4,
-  //     data5: -1.9,
-  //     longitude: "110.572589",
-  //     latitude: "21.890757",
-  //     dataType: "5"
-  //   },
-  //   {
-  //     data1: "化州鉴江主站",
-  //     data2: "鉴江",
-  //     data3: "10月30日10:00",
-  //     data4: 26.5,
-  //     data5: -2.2,
-  //     longitude: "110.641206",
-  //     latitude: "21.605162",
-  //     dataType: "5"
-  //   },
-  //   {
-  //     data1: "茂南小东江中游站",
-  //     data2: "小东江",
-  //     data3: "10月30日13:00",
-  //     data4: 28.1,
-  //     data5: -1.4,
-  //     longitude: "110.908662",
-  //     latitude: "21.671108",
-  //     dataType: "5"
-  //   },
-  //   {
-  //     data1: "电白袂花江中游站",
-  //     data2: "袂花江",
-  //     data3: "10月30日11:00",
-  //     data4: 27.4,
-  //     data5: -1.6,
-  //     longitude: "110.92052",
-  //     latitude: "21.579965",
-  //     dataType: "5"
-  //   },
-  //   {
-  //     data1: "信宜罗江支流下游站",
-  //     data2: "罗江",
-  //     data3: "10月30日15:00",
-  //     data4: 25.9,
-  //     data5: -2.1,
-  //     longitude: "110.572589",
-  //     latitude: "21.890757",
-  //     dataType: "5"
-  //   }
-  // ]
-
   detailsData.value.dataList.forEach(item => {
     const icon =
       item.dataType && !!iconList[item.dataType].image
@@ -337,7 +200,6 @@ const initData = () => {
     item.size = iconList[item.dataType].size;
     item.lnglat = [item.longitude, item.latitude];
   });
-  dom.addMarker(detailsData.value.dataList);
 };
 const onSelectConfirm = data => {
   initData();

src/views/event/EventCasualtiesPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="common-form-container">
-    <van-form @submit="onSubmit" disabled>
+    <van-form disabled>
       <!-- 使用 v-for 循环渲染多个表单块 -->
       <div class="form-item">
         <div class="common-form-content">
@@ -65,8 +65,7 @@
         </div>
       </div>
     </van-form>
-    <van-form @submit="onSubmit" disabled>
-      <!-- 使用 v-for 循环渲染多个表单块 -->
+    <van-form disabled>
       <div v-for="(form, index) in forms" :key="index" class="form-item">
         <div class="common-form-content">
           <div class="common-form-item">
@@ -75,25 +74,10 @@
                 <div>行政区划:</div>
               </div>
               <van-field
-                v-model="form.fieldValue"
+                v-model="form.area_name"
                 class="common-field"
                 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">
@@ -154,37 +138,10 @@
 </template>
 
 <script setup lang="ts">
-import selectIcon from "@/assets/images/selectIcon.png";
-import { ref } from "vue";
-import { PickerConfirmEventParams, showToast } from "vant";
-import {uploadCasualties, getCasualties} from "@/api/event";
+import {getEventCasualties} from "@/api/duty/eventing";
 
-const forms = ref([
-  {
-    fieldValue: "茂名市",
-    deaths: "0",
-    injuries: "0",
-    missing: "0",
-    transfer: "0",
-    economic_loss: "0"
-  },
-  {
-    fieldValue: "信宜市",
-    deaths: "0",
-    injuries: "0",
-    missing: "0",
-    transfer: "0",
-    economic_loss: "0"
-  },
-  {
-    fieldValue: "电白区",
-    deaths: "0",
-    injuries: "0",
-    missing: "0",
-    transfer: "0",
-    economic_loss: "0"
-  }
-]);
+const route = useRoute();
+const forms = ref([]);
 const total = ref({
   deaths: "0",
   injuries: "0",
@@ -192,14 +149,6 @@ const total = ref({
   transfer: "0",
   economic_loss: "0"
 });
-const columns = [
-  { text: "茂名市", value: "440900000000" },
-  { text: "茂南区", value: "440902000000" },
-  { text: "电白区", value: "440904000000" },
-  { text: "化州市", value: "440982000000" },
-  { text: "高州市", value: "440981000000" },
-  { text: "信宜市", value: "440983000000" }
-];
 watchEffect(() => {
   const sum = {
     deaths: 0,
@@ -221,53 +170,13 @@ watchEffect(() => {
   total.value.transfer = String(sum.transfer);
   total.value.economic_loss = String(sum.economic_loss);
 });
-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: [],
-    deaths: "",
-    injuries: "",
-    missing: "",
-    transfer: "",
-    economic_loss: ""
+const getData = () => {
+  getEventCasualties({ event_id: route.query.id }).then((res) => {
+    forms.value = res.data;
   });
-};
-
-// 新增事件处理
-const handleSubmit = () => {
-  console.log("提交数据：", forms.value);
-};
-
-const handleCancel = () => {
-  //清空表单
-  forms.value = [
-    {
-      fieldValue: "",
-      showPicker: false,
-      pickerValue: [],
-      deaths: "",
-      injuries: "",
-      missing: "",
-      transfer: "",
-      economic_loss: ""
-    }
-  ];
-};
+}
+getData();
 </script>
 
 <style scoped lang="scss">

src/views/event/ReportPage.vue

@@ -10,7 +10,7 @@
                 <div>行政区划:</div>
               </div>
               <van-field
-                v-model="form.fieldValue"
+                v-model="form.area_name"
                 class="common-field"
                 :right-icon="selectIcon"
                 readonly
@@ -24,7 +24,7 @@
                 position="bottom"
               >
                 <van-picker
-                  :model-value="form.pickerValue"
+                  :model-value="form.area_code"
                   :columns="columns"
                   @cancel="form.showPicker = false"
                   @confirm="onConfirm($event, index)"
@@ -36,7 +36,7 @@
               <div class="box">
                 <div>死亡人数:</div>
               </div>
-              <van-field v-model="form.death_toll" class="common-field">
+              <van-field v-model="form.deaths" class="common-field">
                 <template #extra>
                   <div class="font-stl">人</div>
                 </template>
@@ -46,7 +46,7 @@
               <div class="box">
                 <div>受伤人数:</div>
               </div>
-              <van-field v-model="form.injured_num" class="common-field">
+              <van-field v-model="form.injuries" class="common-field">
                 <template #extra>
                   <div class="font-stl">人</div>
                 </template>
@@ -56,7 +56,7 @@
               <div class="box">
                 <div>失踪人数:</div>
               </div>
-              <van-field v-model="form.missing_num" class="common-field">
+              <van-field v-model="form.missing" class="common-field">
                 <template #extra>
                   <div class="font-stl">人</div>
                 </template>
@@ -66,7 +66,7 @@
               <div class="box">
                 <div>紧急转移:</div>
               </div>
-              <van-field v-model="form.transfer_num" class="common-field">
+              <van-field v-model="form.transfer" class="common-field">
                 <template #extra>
                   <div class="font-stl">人</div>
                 </template>
@@ -76,7 +76,7 @@
               <div class="box">
                 <div>直接经济损失:</div>
               </div>
-              <van-field v-model="form.unit_name" class="common-field">
+              <van-field v-model="form.economic_loss" class="common-field">
                 <template #extra>
                   <div class="font-stl">万元</div>
                 </template>
@@ -105,47 +105,50 @@
 
 <script setup lang="ts">
 import selectIcon from "@/assets/images/selectIcon.png";
-import { ref } from "vue";
-import {PickerConfirmEventParams, showToast} from "vant";
+import {PickerConfirmEventParams, showSuccessToast, showToast} from "vant";
+import {getEventCasualties} from "@/api/duty/eventing";
+import {deepClone} from "@/utils";
+import {uploadCasualties} from "@/api/event";
 
 const router = useRouter();
+const route = useRoute();
 interface FormItem {
-  fieldValue: string;
+  area_name: string;
   showPicker: boolean;
-  pickerValue: (string | number)[];
-  death_toll: string;
-  injured_num: string;
-  missing_num: string;
-  transfer_num: string;
-  unit_name: string;
+  area_code: string[];
+  deaths: string;
+  injuries: string;
+  missing: string;
+  transfer: string;
+  economic_loss: string;
 }
 // 存储多个表单数据
 const forms = ref<FormItem[]>([
   {
-    fieldValue: "",
+    area_name: "",
     showPicker: false,
-    pickerValue: [],
-    death_toll: "",
-    injured_num: "",
-    missing_num: "",
-    transfer_num: "",
-    unit_name: ""
+    area_code: [],
+    deaths: "",
+    injuries: "",
+    missing: "",
+    transfer: "",
+    economic_loss: ""
   }
 ]);
 const columns = [
-  { text: "茂名市", value: "maoming" },
-  { text: "茂南区", value: "maonan" },
-  { text: "电白区", value: "dianbai" },
-  { text: "高州市", value: "gaozhou" },
-  { text: "信宜市", value: "xinyi" },
-  { text: "化州市", value: "huazhou" }
+  { text: "茂名市", value: "440900000000" },
+  { text: "茂南区", value: "440902000000" },
+  { text: "电白区", value: "440904000000" },
+  { text: "高州市", value: "440981000000" },
+  { text: "信宜市", value: "440983000000" },
+  { text: "化州市", value: "440982000000" }
 ];
 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;
+  forms.value[index].area_name = selectedOptions[0].text;
 };
 
 const addPart = () => {
@@ -154,39 +157,88 @@ const addPart = () => {
     return;
   }
   forms.value.push({
-    fieldValue: "",
+    area_name: "",
     showPicker: false,
-    pickerValue: [],
-    death_toll: "",
-    injured_num: "",
-    missing_num: "",
-    transfer_num: "",
-    unit_name: ""
+    area_code: [],
+    deaths: "",
+    injuries: "",
+    missing: "",
+    transfer: "",
+    economic_loss: ""
   });
 };
 
 // 新增事件处理
 const handleSubmit = () => {
-  console.log("提交数据：", forms.value);
+  const data = deepClone(forms.value);
+  data.forEach(item => {
+    item.area_code = item.area_code.toString();
+    delete item.showPicker;
+    delete item.id;
+  })
+  columns.forEach((column: any) => {
+    let index = forms.value.findIndex((item) => item.area_name === column.text);
+    if (index === -1) {
+      data.push({
+        area_name: column.text,
+        area_code: column.value,
+        deaths: "0",
+        injuries: "0",
+        missing: "0",
+        transfer: "0",
+        economic_loss: "0"
+      })
+    }
+  })
+  uploadCasualties({'event_id': route.query.id, 'eventCasualties': data}).then(() => {
+    showSuccessToast("提交成功");
+    router.go(-1);
+  })
 };
 
 const handleCancel = () => {
   //清空表单
   forms.value = [
     {
-      fieldValue: "",
+      area_name: "",
       showPicker: false,
-      pickerValue: [],
-      death_toll: "",
-      injured_num: "",
-      missing_num: "",
-      transfer_num: "",
-      unit_name: ""
+      area_code: [],
+      deaths: "",
+      injuries: "",
+      missing: "",
+      transfer: "",
+      economic_loss: ""
     }
   ];
   // 返回上一页
   router.go(-1);
 };
+const getData = () => {
+  getEventCasualties({ event_id: route.query.id }).then((res) => {
+    let arr = [];
+    res.data.forEach((item) => {
+      if (item.deaths > 0 || item.economic_loss > 0 || item.injuries > 0 || item.missing > 0) {
+        item.area_code = [item.area_code];
+        item.showPicker = false;
+        arr.push(item);
+      }
+    })
+    if (arr.length === 0) {
+      arr.push({
+        area_name: "",
+        showPicker: false,
+        area_code: [],
+        deaths: "",
+        injuries: "",
+        missing: "",
+        transfer: "",
+        economic_loss: ""
+      })
+    }
+    forms.value = arr;
+  });
+}
+getData();
 </script>
 
 <style scoped lang="scss">

src/views/event/detail.vue

@@ -96,27 +96,18 @@
                 <div class="event-data-item-title">伤亡情况：</div>
               </div>
               <div
-                v-show="eventInfo.casualties === ''"
-                class="event-data-item-value blue"
-                @click="reportPage"
+                  v-if="eventInfo.casualties === '1' && eventInfo.event_status === '3'"
+                  class="event-data-item-value"
               >
-                去上报
+                <span class="blue" @click="viewPage">查看 </span>
               </div>
               <div
-                v-show="eventInfo.casualties === '1'"
-                class="event-data-item-value"
+                v-else
+                class="event-data-item-value blue"
+                @click="reportPage"
               >
-                <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">
@@ -307,39 +298,9 @@ import StartEventDialog from "@/views/event/StartEventDialog.vue";
 import { download2 } from "@/utils/request";
 import { getPlanDoc, listPlan } from "@/api/duty/eventing";
 import AssociationPlan from "@/views/event/AssociationPlan.vue";
-import { ElTimeline, ElTimelineItem } from "element-plus";
 import { MoreFilled } from "@element-plus/icons-vue";
 import TimeLine from "@/views/event/TimeLine.vue";
 
-const activities = [
-  {
-    content: "Custom icon",
-    timestamp: "2018-04-12 20:46",
-    size: "large",
-    type: "primary",
-    icon: MoreFilled
-  },
-  {
-    content: "Custom color",
-    timestamp: "2018-04-03 20:46",
-    color: "#0bbd87"
-  },
-  {
-    content: "Custom size",
-    timestamp: "2018-04-03 20:46",
-    size: "large"
-  },
-  {
-    content: "Custom hollow",
-    timestamp: "2018-04-03 20:46",
-    type: "primary",
-    hollow: true
-  },
-  {
-    content: "Default node",
-    timestamp: "2018-04-03 20:46"
-  }
-];
 const router = useRouter();
 const route = useRoute();
 const proxy = getCurrentInstance()?.proxy;
@@ -460,10 +421,10 @@ const handleUploadCasualties = () => {
 };
 
 const reportPage = () => {
-  router.push({ name: "ReportPage" });
+  router.push({ name: "ReportPage", query: { id: eventId.value }});
 };
 const viewPage = () => {
-  router.push({ name: "EventCasualtiesPage" });
+  router.push({ name: "EventCasualtiesPage", query: { id: eventId.value } });
 };
 
 const onUploadCasualtiesDialogClose = t => {