Browse Source

事件管理地图

Hwf 9 tháng trước cách đây
mục cha
commit
d6219e321a
2 tập tin đã thay đổi với 104 bổ sung125 xóa
  1. 0 28
      src/types/components.d.ts
  2. 104 97
      src/views/duty/eventing/index.vue

+ 0 - 28
src/types/components.d.ts

@@ -16,23 +16,15 @@ declare module 'vue' {
     CompanyMap: typeof import('./../components/Map/company-map.vue')['default']
     DictTag: typeof import('./../components/DictTag/index.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
-    ElAnchor: typeof import('element-plus/es')['ElAnchor']
-    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
-    ElAnchor: typeof import('element-plus/es')['ElAnchor']
-    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -45,43 +37,23 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTag: typeof import('element-plus/es')['ElTag']
-    ElText: typeof import('element-plus/es')['ElText']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es')['ElTree']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
-    ElText: typeof import('element-plus/es')['ElText']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     Hamburger: typeof import('./../components/Hamburger/index.vue')['default']
     HeaderSearch: typeof import('./../components/HeaderSearch/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
-    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
-    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

+ 104 - 97
src/views/duty/eventing/index.vue

@@ -1,4 +1,4 @@
-<template xmlns="">
+<template>
   <div class="app-container">
     <transition name="fade">
       <div v-show="showSearch" class="mb-[20px]">
@@ -48,7 +48,12 @@
               <el-form-item label="行政区划" prop="regionCode">
                 <el-select v-model="queryParams.regionCode" placeholder="全部" clearable>
                   <el-option label="全部" value=""></el-option>
-                  <el-option v-for="item in data.regionSelection" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
+                  <el-option
+                    v-for="item in data.regionSelection"
+                    :key="item.dictValue"
+                    :label="item.dictLabel"
+                    :value="item.dictValue"
+                  ></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
@@ -56,12 +61,18 @@
           <el-row :gutter="10" class="mt-[10px]">
             <el-col :span="6">
               <el-form-item label="事发时间" prop="eventTime">
-                <el-date-picker v-model="queryParams.eventTime" type="datetime" placeholder="选择事发时间"></el-date-picker>
+                <el-date-picker
+                  v-model="queryParams.eventTime"
+                  type="datetime"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  placeholder="选择事发时间"
+                ></el-date-picker>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item>
-                <el-input v-model="queryParams.subject" placeholder="请输入事件标题/事件地点" clearable @keyup.enter="handleQuery" />
+                <el-input v-model="queryParams.keyword" placeholder="请输入事件标题/事件地点" clearable
+                          @keyup.enter="handleQuery"/>
               </el-form-item>
             </el-col>
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -75,20 +86,21 @@
         <el-button type="primary" plain icon="Plus" @click="handleAdd">新增事件</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete(selectedRow)">删除事件 </el-button>
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete(selectedRow)">删除事件
+        </el-button>
       </el-col>
     </el-row>
 
     <!-- 表格组w件 -->
     <el-table v-loading="loading" :data="eventList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="事件编号" align="center" prop="eventId" />
-      <el-table-column label="事件标题" align="center" prop="eventTitle" />
-      <el-table-column label="事件类型" align="center" prop="eventType" />
-      <el-table-column label="事件等级" align="center" prop="eventLevel" />
-      <el-table-column label="事件地点" align="center" prop="address" />
-      <el-table-column label="事件状态" align="center" prop="eventStatus" />
-      <el-table-column label="事件时间" align="center" prop="eventTime" />
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="事件编号" align="center" prop="eventId"/>
+      <el-table-column label="事件标题" align="center" prop="eventTitle"/>
+      <el-table-column label="事件类型" align="center" prop="eventType"/>
+      <el-table-column label="事件等级" align="center" prop="eventLevel"/>
+      <el-table-column label="事件地点" align="center" prop="address"/>
+      <el-table-column label="事件状态" align="center" prop="eventStatus"/>
+      <el-table-column label="事件时间" align="center" prop="eventTime"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
           <el-tooltip content="查看" placement="top">
@@ -104,27 +116,43 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
+    <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.pageSize"
+                :total="total" @pagination="getList"/>
 
     <!-- 新增/修改弹窗 -->
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="650px" append-to-body>
       <el-form ref="eventFormRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="事件标题" prop="eventTitle">
-          <el-input v-model="form.eventTitle" placeholder="请输入事件标题" />
+          <el-input v-model="form.eventTitle" placeholder="请输入事件标题"/>
         </el-form-item>
         <el-form-item label="事件类型" prop="eventType">
           <el-select v-model="form.eventType" placeholder="请选择事件类型" clearable>
-            <el-option v-for="item in data.eventTypeSelection" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
+            <el-option
+              v-for="item in data.eventTypeSelection"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="事件等级" prop="eventLevel">
           <el-select v-model="form.eventLevel" placeholder="请选择事件等级" clearable>
-            <el-option v-for="item in data.eventLevelSelection" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
+            <el-option
+              v-for="item in data.eventLevelSelection"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="事件状态" prop="eventStatus">
           <el-select v-model="form.eventStatus" placeholder="请选择事件状态" clearable>
-            <el-option v-for="item in data.eventStatusSelection" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
+            <el-option
+              v-for="item in data.eventStatusSelection"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="事件地点" prop="address">
@@ -132,20 +160,30 @@
           <el-input v-model="form.address" placeholder="请输入事件地点" readonly />
         </el-form-item>
         <el-form-item label="事发时间" prop="eventTime">
-          <el-date-picker v-model="form.eventTime" type="datetime" placeholder="选择事发时间"></el-date-picker>
+          <el-date-picker
+            v-model="form.eventTime"
+            type="datetime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="选择事发时间"
+          ></el-date-picker>
         </el-form-item>
         <el-form-item label="上报时间" prop="reportTime">
-          <el-date-picker v-model="form.reportTime" type="datetime" placeholder="选择上报时间"></el-date-picker>
+          <el-date-picker
+            v-model="form.reportTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="datetime"
+            placeholder="选择上报时间"
+          ></el-date-picker>
         </el-form-item>
         <el-form-item label="伤亡情况">
           <el-row :gutter="10">
             <el-col :span="6">
-              <el-input v-model="form.deceased" placeholder="死亡">
+              <el-input v-model="form.deaths" placeholder="死亡">
                 <template #suffix>人</template>
               </el-input>
             </el-col>
             <el-col :span="6">
-              <el-input v-model="form.injured" placeholder="受伤">
+              <el-input v-model="form.injuries" placeholder="受伤">
                 <template #suffix>人</template>
               </el-input>
             </el-col>
@@ -157,7 +195,7 @@
           </el-row>
         </el-form-item>
         <el-form-item label="事件来源" prop="eventSource">
-          <el-input v-model="form.eventSource" placeholder="请输入事件来源" />
+          <el-input v-model="form.eventSource" placeholder="请输入事件来源"/>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -169,20 +207,18 @@
     </el-dialog>
 
     <!-- 地图弹窗 -->
-    <el-dialog v-model="mapDialogVisible" title="地图定位" width="600px">
-      <company-map v-model:visible="mapDialogVisible" :address="form.address" @change="handleMapChange"></company-map>
-      <template #footer>
-        <el-button @click="mapDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="confirmMapLocation">确定</el-button>
-      </template>
-    </el-dialog>
+    <company-map v-model:visible="mapDialogVisible" :address="form.address" @confirm="handleMapChange"></company-map>
+
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, toRefs, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
-import { getDicts } from '@/api/system/dict/data';
+import { getDicts } from "@/api/system/dict/data";
+import { addEvent, getEvent } from '@/api/duty/eventing';
+import { deepClone } from '@/utils';
+import { parseTime } from '@/utils/ruoyi';
 
 const router = useRouter();
 const eventList = ref([]);
@@ -210,10 +246,12 @@ const initFormData = {
   eventLevel: '',
   eventStatus: '',
   address: '',
+  longitude: '',
+  latitude: '',
   eventTime: '',
   reportTime: '',
-  deceased: '',
-  injured: '',
+  deaths: '',
+  injuries: '',
   missing: '',
   eventSource: ''
 };
@@ -221,14 +259,14 @@ const initFormData = {
 const data = reactive({
   form: { ...initFormData },
   queryParams: {
-    pageNum: 1,
+    page: 1,
     pageSize: 10,
     eventType: '',
     eventLevel: '',
     eventStatus: '',
     eventTime: '',
     regionCode: '',
-    subject: ''
+    keyword: ''
   },
   rules: {
     eventTitle: [{ required: true, message: '事件标题不能为空', trigger: 'blur' }],
@@ -248,49 +286,14 @@ const data = reactive({
 
 const { queryParams, form, rules } = toRefs(data);
 
-const getList = async () => {
+const getList = () => {
   loading.value = true;
-  eventList.value = [
-    {
-      'eventId': 'YJSJ000000001',
-      'eventTitle': 'XXX公交站西侧出现积水倒灌情况',
-      'eventType': '0', //字典(事件类型:0自然灾害、1事故灾害、2公共卫生事件、3社会安全事件)
-      'eventLevel': '0', //字典(事件等级:0其他,1一般,2较大,3重大,4特别重大)
-      'eventStatus': '0', //字典(事件状态:0已登记,1指挥中,2指挥结束,3已关闭)
-      'latitude': 123.123, //纬度
-      'longitude': 345.456, //经度
-      'address': 'XXX道路左侧路面',
-      'eventTime': '2023-03-01 17:18'
-    }
-  ];
-  total.value = 1;
-  // try {
-  //   const response = await fetchEvents(queryParams.value);
-  //   const { data, total } = response;
-  //   eventList.value = data;
-  //   total.value = total;
-  // } catch (error) {
-  //   ElMessage.error('获取数据失败');
-  // } finally {
+  getEvent(queryParams.value).then(res => {
+    eventList.value = res.data;
+    total.value = res.total;
+  }).finally(() => {
     loading.value = false;
-  // }
-};
-
-const fetchEvents = async (params) => {
-  // 假设后端接口为 /api/events
-  const response = await fetch('/api/events', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify(params)
-  });
-  const result = await response.json();
-  if (response.ok) {
-    return result;
-  } else {
-    throw new Error(result.message || '获取事件列表失败');
-  }
+  })
 };
 
 const cancel = () => {
@@ -304,12 +307,12 @@ const reset = () => {
 };
 
 const handleQuery = () => {
-  queryParams.value.pageNum = 1;
+  queryParams.value.page = 1;
   getList();
 };
 
 const resetQuery = () => {
-  queryParams.value = { pageNum: 1, pageSize: 10, eventType: '', eventLevel: '', eventStatus: '', eventTime: '', regionCode: '', subject: '' };
+  queryParams.value = { page: 1, pageSize: 10, eventType: '', eventLevel: '', eventStatus: '', eventTime: '', regionCode: '', keyword: '' };
   handleQuery();
 };
 
@@ -341,16 +344,12 @@ const submitForm = () => {
   eventFormRef.value?.validate((valid) => {
     if (valid) {
       buttonLoading.value = true;
-      setTimeout(() => {
-        if (form.value.eventId) {
-          // 更新逻辑
-        } else {
-          // 添加逻辑
-        }
-        buttonLoading.value = false;
+      addEvent(form.value).then(() => {
         dialog.visible = false;
         getList();
-      }, 500);
+      }).finally(() => {
+        buttonLoading.value = false
+      });
     }
   });
 };
@@ -386,6 +385,7 @@ const handleView = (row) => {
       query: { eventId: row.eventId }
     });
   }
+
 };
 
 // 地图定位
@@ -395,23 +395,30 @@ const openMapDialog = () => {
   mapDialogVisible.value = true;
 };
 
-const handleMapChange = (lnglat) => {
-  form.value.address = `${lnglat[0]}, ${lnglat[1]}`;
+const handleMapChange = (data ) => {
+  form.value.address = data.address
+  form.value.longitude = data.lnglat[0].toString()
+  form.value.latitude = data.lnglat[1].toString()
+  mapDialogVisible.value = false
 };
 
 const confirmMapLocation = () => {
   mapDialogVisible.value = false;
 };
 
+
 onMounted(() => {
   getList();
-  Promise.all([getDicts('mm_event_type'), getDicts('mm_event_level'), getDicts('mm_event_state'), getDicts('region')]).then(
-    ([eventTypeRes, eventLevelRes, eventStatusRes, regionRes]) => {
-      data.eventTypeSelection = eventTypeRes.data;
-      data.eventLevelSelection = eventLevelRes.data;
-      data.eventStatusSelection = eventStatusRes.data;
-      data.regionSelection = regionRes.data;
-    }
-  );
+  Promise.all([
+    getDicts("mm_event_type"),
+    getDicts("mm_event_level"),
+    getDicts("mm_event_state"),
+    getDicts("region")
+  ]).then(([eventTypeRes, eventLevelRes, eventStatusRes, regionRes]) => {
+    data.eventTypeSelection = eventTypeRes.data;
+    data.eventLevelSelection = eventLevelRes.data;
+    data.eventStatusSelection = eventStatusRes.data;
+    data.regionSelection = regionRes.data;
+  });
 });
 </script>