关联事件接口及功能

src/api/duty/eventing.ts

@@ -25,7 +25,14 @@ export function addEvent(data) {
     data: data
   });
 }
-
+// 新建事件
+export function assEvent(data) {
+  return request({
+    url: '/api/event_management/event/update_event_id',
+    method: 'post',
+    data: data
+  });
+}
 // 事件详情
 export function getEventDetail(params) {
   return request({
@@ -151,4 +158,4 @@ export function taskList(data) {
     method: 'post',
     data: data
   });
-}
+}

src/views/emergencyCommandMap/LeftSection/AssociatedEvent.vue

@@ -0,0 +1,180 @@
+<template>
+  <Dialog custom-show type="sm" :title="title" confirm-text="关联事件" confirm-class="common-btn-danger" @close="closeDialog" @confirm="submitEvent">
+    <el-form ref="eventFormRef" :model="form" :rules="rules" label-width="190px">
+      <el-form-item label="灾害事件" prop="event_title">
+        <el-select
+          v-model="form.event_title"
+          placeholder="请选择事件"
+          class="custom-select"
+          size="large"
+          popper-class="custom-select-popper"
+          :teleported="false"
+          clearable
+          @change="selectEvent"
+        >
+          <el-option v-for="item in events" :key="item.event_id" :label="item.event_title" :value="item.event_title"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, toRefs, watch, onMounted } from 'vue';
+import { editEvent, registeredEvent, getEventDetail, assEvent } from '@/api/duty/eventing';
+import { useRouter, useRoute } from 'vue-router';
+import { ElMessage } from 'element-plus';
+
+const proxy = getCurrentInstance()?.proxy;
+const router = useRouter();
+const eventFormRef = ref();
+const events = ref([]);
+const route = useRoute();
+const urlParams = new URLSearchParams(route.query);
+const address = urlParams.get('address') || '';
+const latitude = urlParams.get('latitude') || '';
+const longitude = urlParams.get('longitude') || '';
+
+interface Props {
+  modelValue: boolean;
+  eventId: string;
+  title: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  eventId: '',
+  title: ''
+});
+
+const emit = defineEmits(['update:modelValue', 'update:event-title']);
+
+// 表单初始数据
+const initFormData = {
+  event_title: '', // 事件标题
+  event_id: '',
+  event_type: '', // 事件类型
+  event_level: '', // 事件等级
+  event_status: '0', // 事件状态
+  address: address, // 地址
+  latitude: latitude, // 纬度
+  longitude: longitude // 经度
+};
+
+// 表单数据
+const data = reactive({
+  form: { ...initFormData },
+  rules: {
+    event_title: [{ required: true, message: '事件标题不能为空', trigger: 'blur' }]
+  }
+});
+
+const { form, rules } = toRefs(data);
+
+// 获取事件详情
+const fetchEventDetail = async (id: string) => {
+  try {
+    const response = await getEventDetail({ event_id: id });
+    if (response && response.data) {
+      form.value = response.data;
+    }
+    console.log('Event detail:', form.value);
+  } catch (error) {
+    console.error('Failed to fetch event detail:', error);
+  }
+};
+
+// 获取注册的事件列表
+const fetchEvents = async () => {
+  try {
+    const response = await registeredEvent({});
+    if (response && response.data && Array.isArray(response.data)) {
+      events.value = response.data;
+    }
+  } catch (error) {
+    console.error('Failed to fetch events:', error);
+  }
+};
+
+// 初始化事件列表
+onMounted(() => {
+  fetchEvents();
+});
+
+// 监听 modelValue 变化
+watch(
+  () => props.modelValue,
+  async (newVal) => {
+    if (newVal) {
+      if (props.eventId) {
+        await fetchEventDetail(props.eventId);
+      } else {
+        form.value = { ...initFormData };
+        eventFormRef.value?.resetFields();
+      }
+    }
+  },
+  {
+    immediate: true
+  }
+);
+
+// 关闭对话框
+const closeDialog = () => {
+  emit('update:modelValue', false);
+  if (eventFormRef.value) {
+    eventFormRef.value.resetFields(); // 仅重置表单验证状态
+  }
+};
+
+// 提交事件信息
+const submitEvent = async () => {
+  if (!form.value.event_title) {
+    proxy?.$message.error('请先选择一个事件');
+    return;
+  }
+  try {
+    // 关联事件信息
+    const associateParams = {
+      temp_event_id: props.eventId, // 页面上的临时事件ID
+      event_id: form.value.event_id // 用户选择的事件ID
+    };
+    await assEvent(associateParams);
+    console.log('Event associated successfully.');
+    // 更新 modelValue 状态以关闭对话框
+    emit('update:modelValue', false);
+    // 发送事件名称到父组件
+    emit('update:event-title', form.value.event_title);
+    // 执行其他操作，如更新页面数据等
+    refreshPageData();
+  } catch (error) {
+    console.error('Failed to associate event:', error);
+    proxy?.$message.error('提交表单失败，请检查您的输入');
+  }
+};
+
+// 示例：更新页面数据的方法
+const refreshPageData = () => {
+  // 这里可以放置更新页面数据的逻辑
+  console.log('页面数据已更新');
+};
+
+// 选择事件
+const selectEvent = (eventTitle) => {
+  const selectedItem = events.value.find((event) => event.event_title === eventTitle);
+  if (selectedItem) {
+    form.value.event_id = selectedItem.event_id; // 保存所选事件的ID
+    form.value.event_title = selectedItem.event_title; // 确保事件名称被正确设置
+    console.log('Selected Event ID:', form.value.event_id);
+    console.log('Selected Event Title:', form.value.event_title);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog-footer {
+  height: 150px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+</style>

src/views/emergencyCommandMap/LeftSection/index.vue

@@ -45,7 +45,7 @@
             <div class="text-box">
               <div class="text1">灾害事件</div>
               <div v-if="eventData.event_title" class="text2">{{ eventData.event_title }}</div>
-              <div v-else class="gradient-text text3">关联事件</div>
+              <div v-else class="gradient-text text3" @click="associatedEvent">关联事件</div>
             </div>
           </div>
           <div class="event-item">
@@ -101,6 +101,13 @@
       :event-id="eventId"
       @update:model-value="fetchEventDetail"
     />
+    <AssociatedEvent
+      v-if="associatedEventState.show"
+      v-model="associatedEventState.show"
+      :title="associatedEventState.title"
+      :event-id="eventId"
+      @update:event-title="updateEventTitle"
+    />
     <Communication />
   </div>
 </template>
@@ -110,7 +117,7 @@ import VideoMonitor from '@/views/emergencyCommandMap/LeftSection/VideoMonitor.v
 import { ref, onMounted, onUnmounted, computed } from 'vue';
 import Communication from './Communication.vue';
 import CloseCommand from './CloseCommand.vue';
-
+import AssociatedEvent from './AssociatedEvent.vue';
 const proxy = getCurrentInstance()?.proxy;
 const { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(
   proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state', 'region')
@@ -162,7 +169,11 @@ const closeCommandState = reactive({
   flag: false, // 默认为 false
   eventId: ''
 });
-
+const associatedEventState = reactive({
+  show: false,
+  title: '',
+  eventId: ''
+});
 const elapsedTime = ref(0);
 let intervalId = null;
 
@@ -228,13 +239,19 @@ const fetchEventDetail = () => {
     });
   }
 };
-
+// 关联事件
+const associatedEvent = () => {
+  associatedEventState.title = '关联事件';
+  associatedEventState.eventId = eventId.value;
+  associatedEventState.show = true;
+};
 const closeCommand = () => {
   console.log('CloseCommand');
   closeCommandState.title = '结束指挥';
   closeCommandState.eventId = eventId.value;
   closeCommandState.show = true;
 };
+
 // 当关闭对话框时，不重置 eventId
 watch(closeCommandState.show, (newVal) => {
   if (!newVal) {
@@ -257,7 +274,13 @@ const updateTime = () => {
     elapsedTime.value = 0;
   }
 };
-
+// 更新事件标题
+const updateEventTitle = (eventTitle) => {
+  console.log('Update event title:', eventTitle);
+  eventData.value.event_title = eventTitle;
+  // 每次更新事件标题时，重新获取事件详情
+  fetchEventDetail();
+};
 onMounted(() => {
   // 从 URL 参数中获取 event_id
   eventId.value = route.query.event_id as string;
@@ -272,6 +295,18 @@ onUnmounted(() => {
     clearInterval(intervalId);
   }
 });
+// 监听事件标题的变化
+watchEffect(() => {
+  if (eventData.value.event_title) {
+    // 每次事件标题变化时，重新获取事件详情
+    fetchEventDetail();
+  }
+});
+
+// 发射自定义事件
+defineExpose({
+  updateEventTitle
+});
 </script>
 
 <style lang="scss" scoped>