Merge remote-tracking branch 'origin/dev' into dev

src/components/Map/company-map.vue

@@ -289,12 +289,12 @@ function submit() {
   });
 }
 // 获取event_id
-updateEventLocation().then((res) => {
-  form.event_id = res.data.event_id;
-  form.address = res.data.address;
-  form.latitude = res.data.latitude;
-  form.longitude = res.data.longitude;
-});
+// updateEventLocation().then((res) => {
+//   form.event_id = res.data.event_id;
+//   form.address = res.data.address;
+//   form.latitude = res.data.latitude;
+//   form.longitude = res.data.longitude;
+// });
 </script>
 
 <style lang="scss" scoped>

src/types/components.d.ts

@@ -100,7 +100,6 @@ declare module 'vue' {
     UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
     VideoContainer: typeof import('./../components/HKVideo/video-container.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
-    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
   export interface ComponentCustomProperties {

src/views/emergencyCommandMap/RightSection/JointDuty.vue

@@ -21,12 +21,11 @@
             </div>
           </div>
         </div>
-
       </div>
     </div>
   </div>
   <Dialog v-model="showQrCode" title="签到码" width="500px" height="500px">
-    <div style="display: flex; justify-content: center; align-items:center;width: 100%;height: 100%">
+    <div style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%">
       <img :src="qrCodeUrl" alt="" style="width: 370px; height: 370px" />
     </div>
   </Dialog>

src/views/emergencyCommandMap/RightSection/RightTop.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="duty-card">
+    <ul class="tabs">
+      <li v-for="(tab, index) in tabs" :key="index" :class="{ active: tab.id === activeTab }" @click="setActiveTab(tab.id)">
+        {{ tab.label }}
+      </li>
+    </ul>
+    <div class="card-content">
+      <div v-if="activeTab === '预案通知'" class="custom-table">
+        <div class="table-content">
+          <div v-for="(notification, index) in notifications" :key="index" class="tr">
+            <div class="td">
+              <div class="unit-date">
+                <span class="unit">{{ notification.unit }}</span>
+                <span class="date">{{ notification.date }}</span>
+                <span :class="['status', { error: notification.status === '发送失败', success: notification.status === '已发送' }]">
+                  {{ notification.status === '发送失败' ? '发送失败' : `接收人：${notification.receiver}` }}
+                </span>
+              </div>
+              <div class="content">{{ notification.content }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
+
+const tabs = reactive([
+  { id: '任务追踪', label: '任务追踪' },
+  { id: '预案通知', label: '预案通知' },
+  { id: '资源调度', label: '资源调度' }
+]);
+
+const activeTab = ref('预案通知');
+
+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: '张三' // 新增字段
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+.tabs {
+  display: flex;
+  justify-content: flex-start; /* 选项卡靠左对齐 */
+  padding: 0px 0;
+  background: rgba(0, 0, 0, 0.3);
+  .active {
+    border-bottom: 3px solid #00e8ff;
+  }
+  li {
+    cursor: pointer;
+    padding: 20px;
+    font-size: 36px;
+    color: #fff;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+}
+
+.custom-table {
+  width: 100%;
+  .table-content {
+    height: 600px;
+    overflow-y: auto;
+    .tr {
+      display: flex;
+      align-items: center;
+      .td {
+        flex: 1;
+        padding: 10px;
+        font-size: 36px;
+        .unit-date {
+          display: flex;
+          align-items: center; /* 确保垂直居中 */
+          justify-content: space-between; /* 使 status 靠右对齐 */
+          span {
+            white-space: nowrap;
+            &.unit {
+              font-size: 36px; /* 调整字体大小 */
+              margin-right: 5px; /* 减小单位与日期之间的间距 */
+            }
+            &.date {
+              font-size: 36px; /* 调整字体大小 */
+              margin-right: auto; /* 使用 auto 推动 status 靠右 */
+            }
+            &.status {
+              font-size: 36px; /* 调整字体大小 */
+              text-align: right; /* 可选：如果需要进一步对齐内部文本 */
+            }
+            &.error {
+              color: #ff4d4f; /* 发送失败时使用红色 */
+            }
+            &.success {
+              color: #fff; /* 发送成功时使用黑色 */
+            }
+          }
+        }
+        .content {
+          margin-top: 10px;
+          font-size: 36px; /* 内容字体大小 */
+          line-height: 1.5; /* 增加行高以适应较大的字体 */
+        }
+      }
+    }
+  }
+}
+
+.duty-card {
+  width: 2601px;
+  height: 879px;
+  background: url('@/assets/images/emergencyCommandMap/videoBox1.png') no-repeat 100% 100%;
+  position: relative;
+  color: #fff;
+  .card-content {
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 10px; /* 减小顶部填充 */
+    padding-left: 100px;
+    width: 2500px;
+  }
+}
+</style>

src/views/emergencyCommandMap/RightSection/SelectPlan.vue

@@ -0,0 +1,127 @@
+<template>
+  <el-dialog ref="formDialogRef" v-model="innerModelValue" :title="props.title || '选择预案'" width="900px" append-to-body @close="closeDialog">
+    <div class="plan-selector">
+      <label for="plan-select">预案名称：</label>
+      <select id="plan-select" v-model="selectedPlan">
+        <option v-for="plan in plans" :key="plan.id" :value="plan.id">{{ plan.name }}</option>
+      </select>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <button class="custom-button" @click="visible = false">取消</button>
+        <button class="custom-button" @click="startPlan">确定并启动预案</button>
+      </span>
+    </template>
+    <StartPlan v-model="startPlanState.show" :title="startPlanState.title" />
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { defineEmits, defineProps, ref, watch } from 'vue';
+import StartPlan from '@/views/emergencyCommandMap/RightSection/StartPlan.vue';
+
+// 假设 plans 是一个包含预案信息的数组
+const plans = [
+  { id: 1, name: '预案 A' },
+  { id: 2, name: '预案 B' }
+  // 更多预案...
+];
+
+const visible = ref(false);
+const selectedPlan = ref<number | null>(null); // 初始值可以根据实际情况设置
+
+interface Props {
+  modelValue: boolean;
+  eventId: string;
+  title: string; // 确保 title 是必需的
+}
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  eventId: '',
+  title: '' // 提供一个默认值，如果允许为空
+});
+
+const emits = defineEmits(['update:modelValue']);
+const innerModelValue = ref(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    innerModelValue.value = newValue;
+    if (newValue) {
+      visible.value = true; // 当对话框打开时显示子内容
+    }
+  }
+);
+
+const closeDialog = () => {
+  emits('update:modelValue', false);
+};
+
+// 当 dialog 关闭时重置 visible
+watch(innerModelValue, (newVal) => {
+  if (!newVal) {
+    visible.value = false; // 当对话框关闭时隐藏子内容
+  }
+});
+//启动预案弹窗
+const startPlanState = reactive({
+  show: false,
+  title: ''
+});
+// 处理选择预案的函数
+const startPlan = () => {
+  console.log('startPlan');
+  startPlanState.title = '启动预案';
+  startPlanState.show = true;
+};
+
+// 调试信息
+console.log('Initial innerModelValue:', innerModelValue.value);
+console.log('Initial visible:', visible.value);
+</script>
+<style scoped>
+.plan-selector {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px; /* 可以根据需要调整间距 */
+}
+
+.plan-selector label {
+  margin-right: 10px; /* 为标签和下拉框之间添加间距 */
+}
+
+.plan-selector select {
+  width: 300px; /* 下拉框宽度，可以根据需要调整 */
+  padding: 8px 16px;
+  font-size: 14px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+
+.custom-button {
+  display: inline-block;
+  padding: 8px 16px;
+  font-size: 14px;
+  border-radius: 5px;
+  color: white;
+  background-color: #409eff;
+  box-shadow: none;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+
+.custom-button:hover {
+  background-color: #73a2ff;
+}
+
+.custom-button:active {
+  transform: translateY(1px);
+}
+
+.dialog-footer button {
+  margin-left: 10px;
+}
+</style>

src/views/emergencyCommandMap/RightSection/StartPlan.vue

@@ -12,15 +12,70 @@
         </el-col>
         <el-col :span="12" class="buttons-container">
           <el-button type="primary" @click="handleStartPlan">启动预案</el-button>
-          <el-button type="primary" @click="handleTaskDispatch">预案任务下发内容</el-button>
+          <el-button type="primary" @click="taskDelivery">预案任务下发内容</el-button>
         </el-col>
       </el-row>
+      <h2>xxx预案名称</h2>
+      <el-row shadow="hover" class="fixed-width-row">
+        <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick2">
+          <el-tab-pane label="总则" name="first">
+            <div>
+              <el-row>
+                <el-col :span="4">
+                  <el-anchor :container="containerRef" direction="vertical" type="default" :offset="30" @click="handleClick1">
+                    <el-anchor-link href="#part1" title="编制目的" />
+                    <el-anchor-link href="#part2" title="编制依据" />
+                    <el-anchor-link href="#part3" title="适用范围" />
+                    <el-anchor-link href="#part4" title="工作原则" />
+                  </el-anchor>
+                </el-col>
+                <el-col :span="20">
+                  <div ref="containerRef" style="height: 300px; overflow-y: auto">
+                    <div id="part1" style="height: auto; margin-top: 20px; font-size: 14px">
+                      <h3 style="font-weight: 600">1.1 编制目的</h3>
+                      <span style="text-indent: 2em"
+                        >这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</span
+                      >
+                    </div>
+                    <div id="part2" style="height: auto; margin-top: 15px; font-size: 14px">
+                      <h3 style="font-weight: 600">1.2 编制依据</h3>
+                      <span style="text-indent: 28px"
+                        >这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</span
+                      >
+                    </div>
+                    <div id="part3" style="height: auto; margin-top: 15px; font-size: 14px">
+                      <h3 style="font-weight: 600">1.3 适用范围</h3>
+                      <span style="text-indent: 28px"
+                        >这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</span
+                      >
+                    </div>
+                    <div id="part4" style="height: auto; margin-top: 15px; font-size: 14px">
+                      <h3 style="font-weight: 600">1.4 工作原则</h3>
+                      <span style="text-indent: 28px"
+                        >这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</span
+                      >
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="组织体系" name="second">组织体系</el-tab-pane>
+          <el-tab-pane label="运行机制" name="third">运行机制</el-tab-pane>
+          <el-tab-pane label="应急保障" name="fourth">应急保障</el-tab-pane>
+          <el-tab-pane label="监督管理" name="fifth">监督管理</el-tab-pane>
+          <el-tab-pane label="附则" name="sixth">附则</el-tab-pane>
+          <el-tab-pane label="附件" name="seventh">附件</el-tab-pane>
+        </el-tabs>
+      </el-row>
     </div>
+    <TaskDelivery v-model="taskDeliveryState.show" :title="taskDeliveryState.title" />
   </el-dialog>
 </template>
 
 <script lang="ts" setup>
 import { defineProps, defineEmits, ref, watch } from 'vue';
+import TaskDelivery from './TaskDelivery.vue';
 const visible = ref(false);
 interface Props {
   modelValue: boolean;
@@ -66,9 +121,25 @@ const handleStartPlan = () => {
   console.log('启动预案');
 };
 
+const containerRef = ref<HTMLElement | null>(null);
+const handleClick1 = (e: MouseEvent) => {
+  e.preventDefault();
+};
+
+const activeName = ref('first');
+const handleClick2 = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event);
+};
+// 控制 taskDelivery 弹窗的显示状态
+const taskDeliveryState = reactive({
+  show: false,
+  title: ''
+});
 // 处理预案任务下发内容的函数
-const handleTaskDispatch = () => {
-  console.log('下发预案任务内容');
+const taskDelivery = () => {
+  console.log('taskDelivery');
+  taskDeliveryState.title = '预案任务下发';
+  taskDeliveryState.show = true;
 };
 </script>
 <style scoped>
@@ -97,4 +168,7 @@ const handleTaskDispatch = () => {
   justify-content: flex-end; /* 靠右对齐 */
   gap: 10px; /* 设置按钮之间的间距 */
 }
+h2 {
+  text-align: center;
+}
 </style>

src/views/emergencyCommandMap/RightSection/TaskDelivery.vue

@@ -0,0 +1,127 @@
+<template>
+  <!-- 主对话框 -->
+  <el-dialog ref="formDialogRef" v-model="props.modelValue" :title="props.title" width="900px" @close="closeDialog">
+    <!-- 子对话框 -->
+    <el-dialog v-model="dialogVisible" title="预任务任务下发" width="70%" :append-to-body="true" @close="handleClose">
+      <div class="task-list" v-if="dialogVisible">
+        <!-- 使用 v-for 循环遍历任务列表 -->
+        <div v-for="(task, index) in tasks" :key="index" class="task-item">
+          <p class="unit-name">{{ task.unit }}</p>
+          <p class="task-description">{{ task.description }}</p>
+        </div>
+      </div>
+      <!-- 对话框底部按钮区域 -->
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="sendTasks">确认发送H5短信</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { defineProps, defineEmits, ref, watch, onMounted } from 'vue';
+import { ElMessage } from 'element-plus'; // 假设使用的是 Element Plus
+
+// 定义组件属性类型
+interface Props {
+  modelValue: boolean;
+  eventId?: string; // 将 eventId 设置为可选属性
+  title: string;
+}
+const props = defineProps<Props>();
+
+// 定义事件发射器
+const emit = defineEmits(['update:modelValue']);
+
+// 内部响应式变量
+const dialogVisible = ref(props.modelValue); // 控制子对话框的显示状态
+const tasks = ref([
+  { unit: '市委宣传部', description: '负责救灾工作宣传报道协调工作。这是一段很长的描述文字，需要自动换行以适应容器的宽度。' },
+  { unit: '市委宣传部1', description: '负责救灾工作宣传报道协调工作。这也是一段很长的描述文字，需要自动换行以适应容器的宽度。' },
+  { unit: '市委宣传部2', description: '负责救灾工作宣传报道协调工作。这是一段很长的描述文字，需要自动换行以适应容器的宽度。' },
+  { unit: '市委宣传部3', description: '负责救灾工作宣传报道协调工作。这也是一段很长的描述文字，需要自动换行以适应容器的宽度。' }
+]); // 任务列表
+
+// 监听 modelValue 变化，确保当外部关闭时，内部对话框也关闭
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    dialogVisible.value = newValue;
+  }
+);
+
+// 在组件挂载后显示对话框（仅用于测试）
+onMounted(() => {
+  // 如果需要，可以在这里进行一些初始化操作
+});
+
+// 当主对话框关闭时，更新父组件的 modelValue
+const closeDialog = () => {
+  emit('update:modelValue', false);
+};
+
+// 当子对话框关闭时，重置选中状态
+const handleClose = () => {
+  dialogVisible.value = false;
+  emit('update:modelValue', false);
+};
+
+// 发送任务时的操作
+const sendTasks = () => {
+  // 模拟发送请求到后端接口
+  simulateBackendRequest(tasks.value).then(() => {
+    console.log('发送H5短信');
+    ElMessage.success('任务已成功发送！');
+    dialogVisible.value = false;
+    emit('update:modelValue', false);
+  });
+};
+
+// 模拟发送请求到后端接口
+const simulateBackendRequest = async (tasks: Array<{ unit: string; description: string }>) => {
+  // 这里可以替换为实际的后端请求逻辑
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, 1000);
+  });
+};
+</script>
+
+<style scoped>
+/* 任务列表容器样式 */
+.task-list {
+  padding: 20px;
+}
+
+/* 单个任务项样式 */
+.task-item {
+  display: block;
+  padding: 10px;
+  margin-bottom: 10px;
+  background-color: #f9f9f9; /* 浅色背景 */
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+/* 任务单位名称样式 */
+.unit-name {
+  font-weight: bold;
+  margin-bottom: 5px;
+  word-break: break-all; /* 允许在单词中间换行 */
+}
+
+/* 任务描述样式 */
+.task-description {
+  word-break: break-all; /* 允许在单词中间换行 */
+  white-space: pre-wrap; /* 保留空格和换行符 */
+}
+
+/* 对话框底部按钮区域样式 */
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end; /* 按钮靠右对齐 */
+}
+</style>

src/views/emergencyCommandMap/RightSection/index.vue

@@ -35,21 +35,22 @@
         <div class="btn-text">返回上级</div>
       </div>
     </div>
-    <div class="video-card">
-      <div class="title gradient-text">视频监控</div>
-      <div class="card-content video-list">
-        <div v-for="(item, index) in videoMonitorState.listData" :key="index" class="video-box" @click="showVideoDialog(item)">
-          <div class="video-content">
-            <div style="width: 550px; height: 300px; position: relative">
-              <HKVideo :dot_data="item" :width="550" :height="300" />
-              <div class="video-label">
-                <span class="label">{{ item.name }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <!--    <div class="video-card">-->
+    <!--      <div class="title gradient-text">视频监控</div>-->
+    <!--      <div class="card-content video-list">-->
+    <!--        <div v-for="(item, index) in videoMonitorState.listData" :key="index" class="video-box" @click="showVideoDialog(item)">-->
+    <!--          <div class="video-content">-->
+    <!--            <div style="width: 550px; height: 300px; position: relative">-->
+    <!--              <HKVideo :dot_data="item" :width="550" :height="300" />-->
+    <!--              <div class="video-label">-->
+    <!--                <span class="label">{{ item.name }}</span>-->
+    <!--              </div>-->
+    <!--            </div>-->
+    <!--          </div>-->
+    <!--        </div>-->
+    <!--      </div>-->
+    <!--    </div>-->
+    <RightTop />
     <JointDuty />
     <!--    <div class="message-card">-->
     <!--      <div class="title gradient-text">动态消息</div>-->
@@ -69,9 +70,10 @@
     <!--      </div>-->
     <!--    </div>-->
   </div>
-  <Dialog v-model="videoMonitorState.showListDialog" title="视频监控">
-    <videoList />
-  </Dialog>
+  <!--  <Dialog v-model="videoMonitorState.showListDialog" title="视频监控">-->
+  <!--    <videoList />-->
+  <!--  </Dialog>-->
+  <SelectPlan v-model="selectPlanState.show" :plans="selectPlanState.plans" @plan-selected="onPlanSelected" />
   <StartPlan v-model="startPlanState.show" :title="startPlanState.title" />
 </template>
 
@@ -79,7 +81,9 @@
 import router from '@/router';
 import { getEmergencyVideoCata } from '@/api/videoMonitor';
 import JointDuty from '@/views/emergencyCommandMap/RightSection/JointDuty.vue';
+import RightTop from '@/views/emergencyCommandMap/RightSection/RightTop.vue';
 import StartPlan from './StartPlan.vue';
+import SelectPlan from './SelectPlan.vue';
 import CloseCommand from '@/views/emergencyCommandMap/LeftSection/CloseCommand.vue';
 const goToHome = () => {
   router.push({ path: '/' });
@@ -89,12 +93,47 @@ const startPlanState = reactive({
   show: false,
   title: ''
 });
-const startPlan = () => {
-  console.log('StartPlan');
-  startPlanState.title = '启动预案';
+
+// 控制 selectPlan 弹窗的显示状态
+const selectPlanState = reactive({
+  show: false,
+  title: ''
+});
+// 处理选择预案的函数
+// const selectPlan = () => {
+//   console.log('selectPlan');
+//   selectPlanState.title = '预案任务下发';
+//   selectPlanState.show = true;
+// };
+
+const startPlan = (eventId) => {
+  if (eventId) {
+    startPlanState.title = '启动预案';
+    startPlanState.show = true;
+  } else {
+    // 如果没有eventId，则显示选择预案的弹窗
+    selectPlanState.show = true;
+    selectPlanState.title = '预案任务下发';
+    // 可能需要加载预案列表
+    loadPlans();
+  }
+};
+const loadPlans = () => {
+  // 这里应该有一个API调用来获取所有可用的预案
+  // 仅作示例，下面的数组是假定的预案数据
+  selectPlanState.plans = [
+    { id: 1, name: '应急预案A' },
+    { id: 2, name: '应急预案B' },
+    { id: 3, name: '应急预案C' }
+  ];
+};
+const onPlanSelected = (plan) => {
+  selectPlanState.selectedPlan = plan;
+  // 当选择了一个预案后，可以关闭选择预案的弹窗并打开启动预案的弹窗
+  selectPlanState.show = false;
+  startPlanState.title = `启动预案 - ${plan.name}`;
   startPlanState.show = true;
 };
-
 // 视频监控
 const videoMonitorState = reactive({
   listData: [],

src/views/globalMap/data/mapData.ts

@@ -2808,15 +2808,15 @@ export const logicalData = {
       ]
     },
     {
-      "name": "信宜市",
-      "center": [111.141656, 22.352681],
-      "parentName": "茂名市",
-      "code": 440983,
+      'name': '信宜市',
+      'center': [111.141656, 22.352681],
+      'parentName': '茂名市',
+      'code': 440983,
       infoData: [
         { name: '面积', value: '3101.7', unit: '平方千米' },
         { name: '常住人口', value: '101.4577', unit: '万人' }
       ],
-      "boundaries": [
+      'boundaries': [
         [
           [111.384113, 22.245962],
           [111.382225, 22.245496],
@@ -4110,7 +4110,7 @@ export const logicalData = {
       [110.484002, 21.447108]
     ]
   ]
-}
+};
 
 export const iconList = {
   '1': {
@@ -4137,12 +4137,73 @@ export const pointDetailTemplate = {
     type: '专家类型'
   },
   '2': {
-
+    materia_type: '物资类型',
+    materia_num: '物资数量',
+    materia_ratio: '物资比例',
+    materia_unit: '物资单位',
+    materia_name: '物资名称',
+    area: '所在区县',
+    management_unit: '物资所在仓库'
+  },
+  '3': {
+    area: '所在区县',
+    shelter_name: '应急避难场所全称',
+    addr: '应急避难场所地址',
+    emergency_type: '按突发事件类型分类',
+    shelter_type: '避难种类',
+    evacuation_time: '按避难时长设计分类',
+    space_type: '按空间类型分类',
+    according_type: '按总体功能定位分类',
+    construction_type: '应急避难场所建设类型',
+    total_area: '应急避难场所占地总面积（平方米）',
+    indoor_area: '应急避难场所室内面积（平方米）',
+    persons: '避难场所容纳人数 （人）',
+    material_reserves: '物资储备',
+    facility: '应急设施',
+    depart: '认定部门',
+    unit: '主管单位',
+    construction_unit: '建设单位',
+    construction_time: '建成（或挂牌）时间',
+    plan: '规划情况',
+    total_investment: '建设总投资（万元）',
+    standard_name: '建设标准名称',
+    admin_personnel: '日常维护或管理人员数量',
+    management_personnel: '专职维护或管理人员数量',
+    operation_units: '产权/运维单位',
+    operation: '运维投入',
+    channel: '运维投入渠道'
+  },
+  '4': {
+    flood_name: '易涝点名称',
+    area: '所在区县',
+    sitution: '情况',
+    unit: '单位'
+  },
+  '5': {
+    xxjj: '学校简介',
+    ywjyxxlx: '义务教育学校类型',
+    class_num: '班级数',
+    school_type: '学校性质',
+    school_name: '学校名称',
+    area: '所在区县',
+    th_num: '教师数',
+    stu_num: '学生数',
+    school_area: '学校地址',
+    jylx: '教育类型'
+  },
+  '6': {
+    hospital_name: '医疗机构名称',
+    area: '所在区县',
+    clsj: '成立时间',
+    gzry: '工作人员',
+    jgjj: '机构简介',
+    jyxz: '经营性质',
+    ybdd: '医院传真',
+    yljgdz: '医疗机构地址',
+    yljglb: '医疗机构类别',
+    yydj: '医院等级',
+    yylx: '医院类型'
   }
 };
 
-export const creatDetailTemplate = (data, type) => {
-
-};
-
-
+export const creatDetailTemplate = (data, type) => {};

src/views/routineCommandMap/EventManage.vue

@@ -186,7 +186,15 @@ const data = reactive({
 });
 
 const { queryParams, form } = toRefs(data);
-
+// 监听 modelValue 的变化
+/*watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      getList();
+    }
+  }
+);*/
 const getList = () => {
   loading.value = true;
   getEvent(queryParams.value)
@@ -292,21 +300,31 @@ const handleClose = (row) => {
 const handleCloseEventDialog = (b) => {
   console.log('handleCloseEventDialog', b);
 };
-
-onMounted(() => {
-  getList();
-});
-
-interface Props {
+/*interface Props {
   modelValue: boolean;
   title?: string;
   height?: string;
-}
-const props = withDefaults(defineProps<Props>(), {
+}*/
+/*const props = withDefaults(defineProps<Props>(), {
   modelValue: false
-});
+});*/
+const props = defineProps<{
+  modelValue?: boolean;
+  title?: string;
+  height?: string;
+}>();
 const emit = defineEmits(['update:modelValue']);
 
+// 将props转换
+const { modelValue } = toRefs(props);
+
+// 监听props的modelValue变化
+watch(modelValue,(newValue) => {
+  if (newValue) {
+    getList();
+  }
+});
+
 // 关闭弹窗
 const closeDialog = () => {
   emit('update:modelValue', false);

src/views/routineCommandMap/LeftSection.vue

@@ -71,7 +71,6 @@
   <Dialog v-model="inspectionNewsState.showListDialog" title="巡查消息列表" width="70%"></Dialog>
   <!--事件接报弹窗-->
   <EventManage v-model="eventManageState.showListDialog" title="事件管理列表" width="70%"></EventManage>
-  <eventDetails v-model="eventDetailsState.show" :title="eventDetailsState.title" :event-id="eventId" @update:model-value="eventList"></eventDetails>
 </template>
 
 <script lang="ts" setup>

src/views/routineCommandMap/MiddleSection.vue

@@ -4,7 +4,7 @@
       <el-button type="primary" @click="handleQuery1" :disabled="true">备战防御</el-button>
       <el-button type="primary" @click="handleQuery2">指挥调度</el-button>
     </div>
-    <company-map v-model:visible="mapDialogVisible" @change="handleMapChange" />
+<!--    <company-map v-model:visible="mapDialogVisible" @change="handleMapChange" />-->
     <GlobalMap is-component width="3894" height="2140" />
   </div>
 </template>

src/views/routineCommandMap/eventing/eventDetails.vue

@@ -292,8 +292,8 @@ const fetchEventDetail = () => {
 
 onMounted(() => {
   // eventId.value = route.query.event_id as string;
-  fetchEventDetail();
-  getEventDetail(props.eventId);
+  // fetchEventDetail();
+  // getEventDetail(props.eventId);
   // });
 });
 // 监听 modelValue 的变化