迭代四调整

src/views/emergencyCommandMap/RightSection/RightTop.vue

@@ -27,8 +27,17 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue';
+import { onMounted, ref, reactive } from 'vue';
+import { taskList } from '@/api/duty/eventing'; // 确保 eventing.ts 的路径正确
 
+const props = defineProps<{
+  eventId?: string; // 使用可选属性
+}>();
+
+// 输出 eventId 以验证是否正确获取
+console.log('Received eventId in RightTop:', props.eventId);
+
+// 定义 tabs
 const tabs = reactive([
   { id: '任务追踪', label: '任务追踪' },
   { id: '预案通知', label: '预案通知' },
@@ -41,39 +50,50 @@ const setActiveTab = (id) => {
   activeTab.value = id;
 };
 
-const notifications = reactive([
-  {
-    unit: '市委宣传部',
-    date: '2024-7-10 10:03:09',
-    status: '发送失败',
-    content: '《茂名市自然灾害救助应急预案》现已全面启动，特此通知您单位迅速响应，全力做好预案工作要点：负责救灾工作宣传报道协调工作。',
-    receiver: '' // 新增字段
-  },
-  {
-    unit: '市发展和改革局(市粮食局)',
-    date: '2024-7-10 10:03:09',
-    status: '已发送',
-    content:
-      '《茂名市自然灾害救助应急预案》现已全面启动，特此通知您单位迅速响应，全力做好预案工作要点：负责安排重大防灾及灾后重建基建项目，协调落实建设资金；协同民政部门做好救灾粮储备、调配和供应的组织、协调工作。',
-    receiver: '张三' // 新增字段
-  },
-  {
-    unit: '市经济和信息化局',
-    date: '2024-7-10 10:03:09',
-    status: '已发送',
-    content:
-      '《茂名市自然灾害救助应急预案》现已全面启动，特此通知您单位迅速响应，全力做好预案工作要点：负责协调灾区煤电油运及重要原材料、重要消费品的供需衔接和医药、猪肉等市级储备的应急调度工作；负责保障相关无线电电信业务频率的正常使用，对出现的有害无线电干扰予以查处。',
-    receiver: '张三' // 新增字段
-  },
-  {
-    unit: '市教育局',
-    date: '2024-7-10 10:03:09',
-    status: '已发送',
-    content:
-      '《茂名市自然灾害救助应急预案》现已全面启动，特此通知您单位迅速响应，全力做好预案工作要点：负责安排重大防灾及灾后重建基建项目，协调落实建设资金；协同民政部门做好救灾粮储备、调配和供应的组织、协调工作。',
-    receiver: '张三' // 新增字段
+// 定义 notifications
+const notifications = ref([]);
+
+// 请求数据
+const fetchData = async () => {
+  try {
+    if (!props.eventId) {
+      console.error('eventId 未找到');
+      return;
+    }
+
+    const response = await taskList({ eventId: props.eventId });
+
+    if (response.code === 200) {
+      console.log('查询成功:', response.data);
+      updateTaskList(response.data);
+    } else {
+      console.error('查询失败:', response.msg);
+    }
+  } catch (error) {
+    console.error('请求失败:', error);
   }
-]);
+};
+
+// 更新任务列表
+const updateTaskList = (tasks) => {
+  notifications.value = tasks.map((task) => ({
+    unit: task.dept_name,
+    date: task.sent_time,
+    status: task.sent_status === 0 ? '暂未发送' : '已发送',
+    content: task.yzy_content,
+    receiver: task.nick_name // 假设所有的任务都有接收者
+  }));
+};
+
+// 在组件挂载时获取数据
+onMounted(() => {
+  console.log('Mounting RightTop component');
+  if (props.eventId) {
+    fetchData();
+  } else {
+    console.warn('RightTop did not receive eventId:', props.eventId);
+  }
+});
 </script>
 
 <style lang="scss" scoped>

src/views/emergencyCommandMap/RightSection/index.vue

@@ -35,7 +35,7 @@
         <div class="btn-text">返回上级</div>
       </div>
     </div>
-    <RightTop />
+    <RightTop :event-id="eventId" />
     <JointDuty />
   </div>
   <StartPlan v-model="startPlanState.show" :title="startPlanState.title" :event-id="eventId" />
@@ -51,7 +51,8 @@ import StartPlan from './StartPlan.vue';
 import SelectPlan from './SelectPlan.vue';
 
 let eventId = ref('');
-
+const route = useRoute();
+const router = useRouter();
 // 启动预案弹窗
 const startPlanState = reactive({
   show: false,
@@ -68,7 +69,6 @@ const selectPlanState = reactive({
 
 // 从URL中获取event_id
 const getEventIdFromUrl = () => {
-  const route = useRoute();
   const urlParams = new URLSearchParams(route.query);
   eventId.value = urlParams.get('event_id') || '';
 };
@@ -116,6 +116,15 @@ const initData = () => {
 onMounted(() => {
   initData();
 });
+onBeforeRouteUpdate((to, from) => {
+  getEventIdFromUrl(); // 当路由更新时重新获取 event_id
+  console.log('Event ID from URL on route update:', eventId.value);
+});
+
+watchEffect(() => {
+  getEventIdFromUrl(); // 每次依赖变化时获取 event_id
+  console.log('Event ID from URL on dependency change:', eventId.value);
+});
 </script>
 
 <style lang="scss" scoped>