迭代四调整

src/views/emergencyCommandMap/RightSection/SelectPlan.vue

@@ -14,12 +14,12 @@
         <button class="custom-button" @click="startSelectedPlan">确定并启动预案</button>
       </span>
     </template>
-    <StartPlan v-model="startPlanVisible" :title="startPlanTitle" />
+    <StartPlan v-if="startPlanVisible" :title="startPlanTitle" :event-id="eventId" />
   </el-dialog>
 </template>
 
 <script lang="ts" setup>
-import { listPlan } from '@/api/duty/eventing';
+import { listPlan, launchPlan } from '@/api/duty/eventing';
 import StartPlan from '@/views/emergencyCommandMap/RightSection/StartPlan.vue';
 
 // 用于存储预案信息的数组
@@ -32,17 +32,11 @@ const selectedPlanId = ref<number | null>(null);
 const props = withDefaults(
   defineProps<{
     modelValue: boolean;
-    event_id: string;
-    plan_id: string;
-    plan_name: string;
-    response_level: string;
+    tempEventId: string;
   }>(),
   {
     modelValue: false,
-    event_id: '',
-    plan_id: '',
-    plan_name: '',
-    response_level: ''
+    tempEventId: ''
   }
 );
 
@@ -68,19 +62,53 @@ watch(
 
 // 控制对话框的显示
 const startPlanVisible = ref(false);
-const startPlanTitle = ref('');
-
+const startPlanTitle = ref('启动预案');
+const eventId = ref(props.tempEventId);
 // 关闭对话框
 const handleCloseDialog = () => {
   emits('update:modelValue', false);
 };
 
 // 启动预案
-const startSelectedPlan = () => {
-  startPlanTitle.value = '启动预案';
-  startPlanVisible.value = true;
-};
+const startSelectedPlan = async () => {
+  if (selectedPlanId.value === null) {
+    alert('请先选择预案！');
+    return;
+  }
+
+  const selectedPlan = plans.value.find((plan) => plan.plan_id === selectedPlanId.value);
 
+  if (!selectedPlan) {
+    alert('未能找到所选预案的信息，请重试！');
+    return;
+  }
+
+  try {
+    const data = {
+      eventId: props.tempEventId,
+      plan_id: selectedPlan.plan_id.toString(),
+      response_level: selectedPlan.response_level
+    };
+
+    console.log('Sending data to launchPlan:', data); // 打印请求数据
+
+    const response = await launchPlan(data);
+    console.log('Launch Plan Response:', response); // 打印响应数据
+
+    if (response.status === 200 && response.data && response.data.code === 200 && response.data.msg === '启动预案成功') {
+      console.log('Setting startPlanVisible to true:', startPlanVisible.value); // 确认状态更新
+      alert('预案启动成功！');
+      eventId.value = props.tempEventId;
+      startPlanVisible.value = true;
+      console.log('Updated startPlanVisible:', startPlanVisible.value); // 确认状态更新
+    }
+  } catch (error) {
+    console.error('Error launching plan:', error);
+    if (error.response && error.response.data && error.response.data.error) {
+      alert(`启动预案失败：${error.response.data.error.message}`);
+    }
+  }
+};
 // 获取预案列表
 const fetchPlanList = async () => {
   try {
@@ -90,9 +118,11 @@ const fetchPlanList = async () => {
       console.log('Fetched plans:', response.data); // 调试信息
     } else {
       console.error('Invalid data format in the response:', response);
+      alert('无法获取预案列表，请稍后重试！');
     }
   } catch (error) {
     console.error('Error fetching plan list:', error);
+    alert('无法获取预案列表，请稍后重试！');
   }
 };
 
@@ -107,10 +137,6 @@ onMounted(() => {
     fetchPlanList();
   }
 });
-
-// 调试信息
-console.log('Initial isDialogVisible:', isDialogVisible.value);
-console.log('Initial selectedPlanId:', selectedPlanId.value);
 </script>
 
 <style scoped>

src/views/emergencyCommandMap/RightSection/StartPlan.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog ref="dialogRef" v-model="visible" :title="title" width="1000px" append-to-body @close="onClose">
+  <el-dialog ref="dialogRef" v-model="show" :title="title" width="1000px" append-to-body @close="onClose">
     <div class="plan-content">
       <!-- 响应等级选择和操作按钮 -->
       <el-row :gutter="20">
@@ -81,13 +81,14 @@ interface Props {
   modelValue: boolean;
   eventId: string;
   title: string;
+  show?: boolean; // 新增 show 属性
 }
 
 // 初始化组件属性
 const props = defineProps<Props>();
 
 // 内部状态
-const visible = ref(props.modelValue); // 对话框是否可见
+const show = ref(props.show ?? false); // 对话框是否可见
 const planTitle = ref(''); // 预案名称
 const selectedLevel = ref(''); // 默认响应等级为空
 const responseLevels = [
@@ -107,18 +108,25 @@ const planData = reactive({
 });
 
 // 定义事件发射器
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'update:show']);
 
 // 监听 modelValue 变化
 watch(
   () => props.modelValue,
   (newValue) => {
-    visible.value = newValue;
+    show.value = newValue;
+  }
+);
+// 监听 show 属性变化
+watch(
+  () => props.show,
+  (newValue) => {
+    show.value = newValue;
   }
 );
-
 // 对话框关闭时执行的操作
 const onClose = () => {
+  emit('update:show', false);
   emit('update:modelValue', false);
 };
 

src/views/emergencyCommandMap/RightSection/index.vue

@@ -39,7 +39,7 @@
     <JointDuty />
   </div>
   <StartPlan v-model="startPlanState.show" :title="startPlanState.title" :event-id="eventId" />
-  <SelectPlan v-model="selectPlanState.show" :title="selectPlanState.title" />
+  <SelectPlan v-model="selectPlanState.show" :title="selectPlanState.title" :temp-event-id="tempEventId" />
 </template>
 
 <script lang="ts" setup>
@@ -53,6 +53,7 @@ import SelectPlan from './SelectPlan.vue';
 let eventId = ref('');
 const route = useRoute();
 const router = useRouter();
+let tempEventId = ref<string | null>(null);
 // 启动预案弹窗
 const startPlanState = reactive({
   show: false,
@@ -67,32 +68,29 @@ const selectPlanState = reactive({
   plans: [] as { id: number; name: string }[]
 });
 
-// 从URL中获取event_id
+// 更新 getEventIdFromUrl 方法
 const getEventIdFromUrl = () => {
-  const urlParams = new URLSearchParams(route.query);
+  const urlParams = new URLSearchParams(useRoute().query);
   eventId.value = urlParams.get('event_id') || '';
+  tempEventId.value = urlParams.get('tempEventId') || null;
 };
-
-// 启动预案的方法
+// 更新 startPlan 方法
 const startPlan = () => {
-  console.log('Checking eventId:', eventId.value); // 输出 eventId
   if (eventId.value) {
-    // 如果有eventId，则显示StartPlan弹窗，并传递eventId
     startPlanState.title = '启动预案';
     startPlanState.eventId = eventId.value;
     startPlanState.show = true;
     console.log('Showing StartPlan with eventId:', eventId.value, 'and state:', startPlanState.show);
-
-    // 使用 nextTick 确保 DOM 更新完成
     nextTick().then(() => {
       console.log('DOM updated, showing StartPlan:', startPlanState.show);
     });
-  } else {
-    // 如果没有eventId，则显示SelectPlan弹窗
+  } else if (tempEventId.value) {
+    // 如果没有eventId但有tempEventId，则显示SelectPlan弹窗并传递tempEventId
     selectPlanState.title = '预案任务下发';
     selectPlanState.show = true;
-    console.log('Showing SelectPlan with state:', selectPlanState.show);
-    // 可选操作：加载预案列表
+    console.log('Showing SelectPlan with state:', selectPlanState.show, 'and tempEventId:', tempEventId.value);
+    // 传递 tempEventId 给 SelectPlan
+    selectPlanState.tempEventId = tempEventId.value;
     loadPlans();
   }
 };
@@ -111,19 +109,24 @@ const loadPlans = () => {
 const initData = () => {
   getEventIdFromUrl();
   console.log('Event ID from URL:', eventId.value); // 输出从 URL 获取的 eventId
+  console.log('Temp Event ID from URL:', tempEventId.value); // 新增输出 tempEventId
 };
 
+// 监听路由变化
 onMounted(() => {
   initData();
 });
 onBeforeRouteUpdate((to, from) => {
-  getEventIdFromUrl(); // 当路由更新时重新获取 event_id
+  getEventIdFromUrl();
   console.log('Event ID from URL on route update:', eventId.value);
+  console.log('Temp Event ID from URL on route update:', tempEventId.value);
 });
 
+// 每次依赖变化时获取 event_id 和 tempEventId
 watchEffect(() => {
-  getEventIdFromUrl(); // 每次依赖变化时获取 event_id
+  getEventIdFromUrl();
   console.log('Event ID from URL on dependency change:', eventId.value);
+  console.log('Temp Event ID from URL on dependency change:', tempEventId.value);
 });
 </script>