更新事件报送

src/views/event/PositionSelect.vue

@@ -0,0 +1,345 @@
+<template>
+  <van-dialog v-model:show="showPositionSelect" title="请选择事发地点" show-cancel-button @close="handleClose" @confirm="submit">
+    <div class="position-container">
+      <div style="position: relative">
+        <div class="box">
+          <van-search
+              v-model="form.address"
+              show-action
+              label="详细地址"
+              left-icon="none"
+              placeholder="请输入"
+              @search="handleInput"
+          >
+            <template #action>
+              <div @click="handleInput">搜索</div>
+            </template>
+          </van-search>
+        </div>
+        <div v-if="searchPop" class="scroll_box">
+          <div class="scroll-header">
+            <span>搜索结果列表</span>
+            <i class="close-icon" @click="closeSearchList()" />
+          </div>
+
+          <div class="scroll">
+            <div v-for="(item, index) in searchList" v-show="searchList.length" :key="index" class="item" @click="handlePanTo(index)">
+              <van-image width="50" height="50" fit="fill" :src="item.img" style="flex-shrink: 0; margin-right: 8px;" />
+              <div>
+                <div class="text">{{ item.name }}</div>
+                <div>{{ item.address }}</div>
+              </div>
+            </div>
+            <div v-show="!searchList.length" class="empty" style="text-align: center">没有搜索到内容</div>
+          </div>
+        </div>
+      </div>
+      <van-field v-model="form.longitude" label="经度" placeholder="请输入" />
+      <van-field v-model="form.latitude" label="纬度" placeholder="请输入" />
+      <div id="map" class="map" />
+    </div>
+  </van-dialog>
+
+</template>
+
+<script  lang="ts" setup name="PositionSelect">
+import AMapLoader from '@amap/amap-jsapi-loader';
+import { useRouter } from 'vue-router';
+import {nextTick, onUnmounted, reactive, ref, watch} from "vue";
+import {showFailToast} from "vant";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: () => {
+      return false;
+    }
+  }
+});
+const router = useRouter();
+const emits = defineEmits(['update:visible', 'confirm']);
+let showPositionSelect = ref(false);
+// 地图对象
+let map = null;
+let amap = {};
+let marker = null; //地图上的点标记
+let contextMenu = null;
+let lnglatPosition = ref([]); //选中的新坐标
+let rules = reactive({
+  address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
+  longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
+  latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }]
+});
+let pageNum = ref(1);
+let pageSize = ref(10);
+let total = ref(0);
+
+let searchList = ref([]);
+let searchPop = ref(false);
+let placeSearch;
+// 提交事件时间改为当前时间currentTime
+const now = new Date();
+const year = now.getFullYear();
+const month = String(now.getMonth() + 1).padStart(2, '0');
+const day = String(now.getDate()).padStart(2, '0');
+const hours = String(now.getHours()).padStart(2, '0');
+const minutes = String(now.getMinutes()).padStart(2, '0');
+const seconds = String(now.getSeconds()).padStart(2, '0');
+const currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+let form = reactive({
+  address: '',
+  longitude: '',
+  latitude: '',
+  event_title: '',
+  event_type: '',
+  event_level: '',
+  event_status: '1',
+  event_time: currentTime,
+  report_time: '1970-01-01 00:00:00',
+  deaths: '0',
+  injuries: '0',
+  missing: '0',
+  event_source: '',
+  event_description: '',
+  casualties: '',
+  del_flag: '9' // 临时事件
+});
+let geocoder = {};
+let width = ref('100%');
+let height = ref('100%');
+watch(
+    () => props.visible,
+    (n) => {
+      if (n) {
+        showPositionSelect.value = n;
+        nextTick(() => {
+          initMap();
+        });
+      }
+    },
+    {
+      immediate: true
+    }
+);
+onUnmounted(() => {
+  if (!!map) {
+    map.off('rightclick');
+    map.destroy();
+    map = null;
+  }
+});
+function handleInput(flag?: any) {
+  if (!form.address) return;
+
+  if (!flag) {
+    //搜索
+    total.value = 0;
+    pageNum.value = 1;
+  }
+
+  if (!placeSearch) {
+    placeSearch = new amap.PlaceSearch({
+      pageSize: pageSize.value, // 每页条数，默认10，范围1-50
+      pageIndex: pageNum.value, // 页码
+      extensions: 'all' // 默认base，返回基本地址信息；all：返回详细信息
+    });
+  }
+
+  searchPop.value = true;
+  placeSearch.setPageIndex(pageNum.value);
+  placeSearch.search(form.address, (status, result) => {
+    // console.log(result.poiList.pois, 'result')
+    if (!!result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
+      let arr = [];
+      const pois = result.poiList.pois;
+      total.value = result.poiList ? result.poiList.count : 0;
+      arr = pois.map((item) => {
+        return {
+          name: item.name,
+          address: item.address,
+          img: item.photos[0]?.url,
+          lnglat: [item.location.lng, item.location.lat]
+        };
+      });
+      searchList.value = arr;
+    } else {
+      total.value = 0;
+      searchList.value = [];
+    }
+  });
+}
+function handleChangePage(newNum) {
+  if (!searchPop.value) return;
+  pageNum.value = newNum;
+  handleInput(1);
+}
+function closeSearchList() {
+  searchPop.value = false;
+  searchList.value = [];
+  total.value = 0;
+  pageNum.value = 1;
+}
+// 地图中心的平移至指定点位置
+function handlePanTo(index) {
+  let lnglat = searchList.value[index].lnglat;
+  form.address = searchList.value[index].name + '(' + searchList.value[index].address + ')';
+  form.longitude = lnglat[0];
+  form.latitude = lnglat[1];
+
+  map.panTo(lnglat);
+  setMarks(lnglat);
+  closeSearchList();
+}
+const initMap = async () => {
+  let position = [110.925175, 21.678955];
+  const AMap = await AMapLoader.load({
+    key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.PlaceSearch', 'AMap.ContextMenu', 'AMap.PolygonEditor', 'AMap.Geocoder'] // 插件列表
+  });
+  map = new AMap.Map('map', {
+    viewMode: '3D', //是否为3D地图模式
+    center: position,
+    zoom: 15
+  });
+  amap = AMap;
+  geocoder = new AMap.Geocoder({
+    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
+    city: '010'
+  });
+  // 创建右键菜单
+  ContextMenu();
+  map.on('rightclick', handleRightclick);
+  map.on('complete', () => {
+    setMarks(position);
+  });
+};
+function ContextMenu() {
+  contextMenu = new AMap.ContextMenu();
+  contextMenu.addItem(
+      '选择标点',
+      () => {
+        form.longitude = lnglatPosition.value[0];
+        form.latitude = lnglatPosition.value[1];
+        contextMenu.close();
+        let lnglat = [form.longitude, form.latitude];
+        geocoder.getAddress(lnglat, (status, result) => {
+          if (status === 'complete' && result.info === 'OK') {
+            form.address = result.regeocode.formattedAddress;
+          }
+        });
+        setMarks(lnglat);
+      },
+      1
+  );
+}
+// 右键事件
+function handleRightclick(e) {
+  let lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
+  contextMenu.open(map, e.lnglat);
+  lnglatPosition.value = lnglat;
+}
+function setMarks(lnglat) {
+  //添加标记
+  if (marker) map.remove(marker);
+  marker = new AMap.Marker({
+    position: lnglat,
+    icon: new AMap.Icon({
+      size: new AMap.Size(22, 28), //图标所处区域大小
+      imageSize: new AMap.Size(22, 28), //图标大小
+      image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
+    }),
+    anchor: 'bottom-center',
+    offset: new AMap.Pixel(0, 0)
+  });
+  marker.setMap(map);
+}
+function handleClose() {
+  emits('update:visible', false);
+}
+let queryFormRef = ref();
+
+function submit() {
+  if (!form.address) {
+    showFailToast('详细地址不能为空');
+  } else if (!form.longitude) {
+    showFailToast('经度不能为空');
+  } else if (!form.latitude) {
+    showFailToast('纬度不能为空');
+  } else {
+    emits('confirm', {
+      address: form.address,
+      latitude: form.latitude,
+      longitude: form.longitude
+    });
+    handleClose();
+  }
+}
+</script>
+
+<style  lang="scss"scoped>
+.position-container {
+  height: calc(100vh - 250px);
+  min-height: 60%;
+  display: flex;
+  flex-direction: column;
+  .position-header {
+    font-size: 16px;
+    font-weight: bold;
+    height: 45px;
+    line-height: 45px;
+    border-bottom: 1px solid #eeeeee;
+    padding: 0 10px;
+    color: #445267;
+  }
+  #map {
+    width: 100%;
+    flex: 1;
+  }
+}
+.scroll_box {
+  width: 100%;
+  background-color: #fff;
+  position: absolute;
+  left: 0;
+  top: 45px;
+  z-index: 9;
+  padding: 10px;
+  border-radius: 3px;
+  .scroll-header {
+    height: 45px;
+    line-height: 45px;
+    font-size: 16px;
+  }
+  .close-icon {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    cursor: pointer;
+    font-size: 20px;
+    width: 30px;
+    height: 30px;
+    background: url('@/assets/images/close.png') no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.scroll {
+  width: 100%;
+  height: 380px;
+  overflow-y: auto;
+
+  .item {
+    display: flex;
+    font-size: 14px;
+    cursor: pointer;
+    padding: 8px;
+    .text {
+      color: #3385ff;
+      margin-bottom: 6px;
+    }
+  }
+}
+.box {
+  border-bottom: 1px solid #eeeeee;
+}
+</style>

src/views/event/add.vue

@@ -11,35 +11,39 @@
 
             <van-field
                 required
-                v-model="form.event_type_text"
+                v-model="form2.event_type_text"
                 label="事件类型"
                 placeholder="请选择事件类型"
                 :rules="[{ required: true, message: '请选择事件类型'  }]"
                 readonly
-                @click="form.showPicker_event_type = true"
+                @click="picker.showPicker_event_type = true"
             />
 
-            <van-field
-                required
-                v-model="form.event_level_text"
-                label="事件等级"
-                placeholder="请选择事件等级"
-                :rules="[{ required: true, message: '请选择事件等级'  }]"
-                readonly
+            <van-field style="padding-top:0;padding-bottom:0;padding-left:0;"
                 right-icon="warning-o"
-                @click="form.showPicker_event_level = true"
-                @click-right-icon="handleEventLevel"
-            >
+                @click-right-icon="handleEventLevel">
+                <template #input>
+                    <van-field
+                        required
+                        v-model="form2.event_level_text"
+                        label="事件等级"
+                        placeholder="请选择事件等级"
+                        :rules="[{ required: true, message: '请选择事件等级'  }]"
+                        readonly
+                        @click="picker.showPicker_event_level = true"
+                    >
+                    </van-field>
+                </template>
             </van-field>
-            
+
             <van-field
                 required
-                v-model="form.event_status_text"
+                v-model="form2.event_status_text"
                 label="事件状态"
                 placeholder="请选择事件状态"
                 :rules="[{ required: true, message: '请选择事件状态'  }]"
                 readonly
-                @click="form.showPicker_event_status = true"
+                @click="picker.showPicker_event_status = true"
             />
 
             <van-field
@@ -49,7 +53,7 @@
                 placeholder="请选择事发时间"
                 :rules="[{ required: true, message: '请选择事发时间'  }]"
                 readonly
-                @click="form.showPicker_event_time = true"
+                @click="picker.showPicker_event_time = true"
             />
 
             <van-field
@@ -59,7 +63,7 @@
                 placeholder="请选择上报时间"
                 :rules="[{ required: true, message: '请选择上报时间'  }]"
                 readonly
-                @click="form.showPicker_report_time = true"
+                @click="picker.showPicker_report_time = true"
             />
 
             <van-field
@@ -103,7 +107,7 @@
                 readonly
             >
                 <template #button>
-                    <van-button size="small" type="primary" @click="handleMap">地图定位</van-button>
+                    <van-button size="small" type="primary" @click="handleShowPosition">地图定位</van-button>
                 </template>
             </van-field>
 
@@ -127,58 +131,83 @@
         </div>
     </van-form>
     
-    <van-popup v-model:show="form.showPicker_event_type" round position="bottom">
+    <van-popup v-model:show="picker.showPicker_event_type" round position="bottom">
         <van-picker
             :columns="opt_event_type"
-            @cancel="form.showPicker_event_type = false"
+            @cancel="picker.showPicker_event_type = false"
             @confirm="onConfirm_event_type"
         />
     </van-popup>
     
-    <van-popup v-model:show="form.showPicker_event_level" round position="bottom">
+    <van-popup v-model:show="picker.showPicker_event_level" round position="bottom">
         <van-picker
             :columns="opt_event_level"
-            @cancel="form.showPicker_event_level = false"
+            @cancel="picker.showPicker_event_level = false"
             @confirm="onConfirm_event_level"
         />
     </van-popup>
     
-    <van-popup v-model:show="form.showPicker_event_status" round position="bottom">
+    <van-popup v-model:show="picker.showPicker_event_status" round position="bottom">
         <van-picker
             :columns="opt_event_status"
-            @cancel="form.showPicker_event_status = false"
+            @cancel="picker.showPicker_event_status = false"
             @confirm="onConfirm_event_status"
         />
     </van-popup>
 
-    <van-popup v-model:show="form.showPicker_event_time" round position="bottom">
+    <van-popup v-model:show="picker.showPicker_event_time" round position="bottom">
         <van-picker-group
             title="事发时间"
             :tabs="['选择日期', '选择时间']"
             @confirm="onConfirm_event_time"
-            @cancel="form.showPicker_event_time = false"
+            @cancel="picker.showPicker_event_time = false"
             >
             <van-date-picker v-model="date_1" :max-date="maxDate" />
             <van-time-picker v-model="time_1" />
         </van-picker-group>
     </van-popup>
 
-    <van-popup v-model:show="form.showPicker_report_time" round position="bottom">
+    <van-popup v-model:show="picker.showPicker_report_time" round position="bottom">
         <van-picker-group
             title="上报时间"
             :tabs="['选择日期', '选择时间']"
             @confirm="onConfirm_report_time"
-            @cancel="form.showPicker_report_time = false"
+            @cancel="picker.showPicker_report_time = false"
             >
             <van-date-picker v-model="date_1" :max-date="maxDate" />
             <van-time-picker v-model="time_1" />
         </van-picker-group>
     </van-popup>
+
+    <van-dialog v-model:show="showDlg" title="突发事故分级标准">
+        <div style="padding:16px 16px 0 16px;">
+        <p><strong>一般突发事故：</strong>是指造成3人以下死亡（含失踪），或者10人以下重伤，或者1000万元以下直接经济损失，或产生一定社会影响的。</p>
+        <p>
+        <strong>较大突发事故：</strong
+        >是指造成3人以上10人以下死亡（含失踪），或者10人以上50人以下重伤，或者1000万元以上5000万元以下直接经济损失，或产生较大社会影响的。
+        </p>
+        <p>
+        <strong>重大突发事故：</strong
+        >是指造成10人以上30人以下死亡（含失踪），或者50人以上100人以下重伤，或者5000万元以上1亿元以下直接经济损失，或产生重大社会影响的。
+        </p>
+        <p>
+        <strong>特别重大突发事故：</strong
+        >是指造成30人以上死亡（含失踪），或者100人以上重伤（包括急性工业中毒），或者1亿元以上直接经济损失，或产生特别重大社会影响的。
+        </p>
+    </div>
+    </van-dialog>
+
+    <!--地点选择-->
+    <PositionSelect
+      v-model:visible="showPositionSelect"
+      @confirm="handleEnterCommand"
+    />
 </template>
 <script lang="ts" setup>
 import {reactive, ref, toRefs, getCurrentInstance} from 'vue';
 import {useRouter} from "vue-router";
-import { addTaskResult } from "@/api/riskManagement";
+import { addEvent } from '@/api/emergencyCommandMap/JointDuty';
+import PositionSelect from "./PositionSelect.vue"; // 本组件是从mobilecontrol里面复制过来用，因为不需要先addevent，所以不能复用组件
 import { showToast } from 'vant';
 
 const proxy = getCurrentInstance()?.proxy;
@@ -193,11 +222,8 @@ const data = reactive({
     form: {
         event_title: '',
         event_type: '',
-        event_type_text: '',
         event_level: '',
-        event_level_text: '',
         event_status: '',
-        event_status_text: '',
         event_time: '',
         report_time: '',
         event_source: '',
@@ -205,8 +231,17 @@ const data = reactive({
         deaths: '',
         injuries: '',
         missing: '',
+        casualties: '1',
         address: '',
-
+        latitude: '',
+        longitude: ''
+    },
+    form2: {
+        event_type_text: '',
+        event_level_text: '',
+        event_status_text: '',
+    },
+    picker: {
         showPicker_event_type: false,
         showPicker_event_level: false,
         showPicker_event_status: false,
@@ -214,7 +249,7 @@ const data = reactive({
         showPicker_report_time: false,
     }
 });
-const {form} = toRefs(data);
+const {form, form2, picker} = toRefs(data);
 
 const opt_event_type = [
     { text: '自然灾害', value: '0' },
@@ -239,48 +274,56 @@ const opt_event_status = [
 ];
 
 const onConfirm_event_type = ({selectedOptions}) => {
-    form.value.showPicker_event_type = false
+    picker.value.showPicker_event_type = false
     form.value.event_type = selectedOptions[0].value;
-    form.value.event_type_text = selectedOptions[0].text;
+    form2.value.event_type_text = selectedOptions[0].text;
 }
 
 const onConfirm_event_level = ({selectedOptions}) => {
-    form.value.showPicker_event_level = false
+    picker.value.showPicker_event_level = false
     form.value.event_level = selectedOptions[0].value;
-    form.value.event_level_text = selectedOptions[0].text;
+    form2.value.event_level_text = selectedOptions[0].text;
 }
 
 const onConfirm_event_status = ({selectedOptions}) => {
-    form.value.showPicker_event_status = false
+    picker.value.showPicker_event_status = false
     form.value.event_status = selectedOptions[0].value;
-    form.value.event_status_text = selectedOptions[0].text;
+    form2.value.event_status_text = selectedOptions[0].text;
 }
 
 const onConfirm_event_time = () => {
     form.value.event_time = `${date_1.value.join('-')} ${time_1.value.join(':')}`;
     console.log('form.value.event_time:', form.value.event_time);
-    form.value.showPicker_event_time = false;
+    picker.value.showPicker_event_time = false;
 }
 
 const onConfirm_report_time = () => {
     form.value.report_time = `${date_1.value.join('-')} ${time_1.value.join(':')}`;
     console.log('form.value.event_time:', form.value.report_time);
-    form.value.showPicker_report_time = false;
+    picker.value.showPicker_report_time = false;
 }
 
+const showDlg = ref(false);
 const handleEventLevel = () => {
-
+    showDlg.value = true;
 };
-const handleMap = () => {
 
+let showPositionSelect = ref(false);
+const handleShowPosition = () => {
+  showPositionSelect.value = true;
+};
+const handleEnterCommand = res => {
+  form.value.address = res.address;
+  form.value.latitude = res.latitude;
+  form.value.longitude = res.longitude;
 };
 
 const on_submit = () => {
-    console.log('on_submit', {});
-    addTaskResult({
-        
-    }).then((res)=>{
-        router.back();
+    console.log('on_submit', form.value);
+    addEvent(form.value).then((res)=>{
+        showToast({type: 'success', message: res.msg, onClose:()=>{
+            router.back();
+        }});
     });
 };