迭代五

src/views/emergencyCommandMap/LeftSection/CloseCommand.vue

@@ -172,21 +172,7 @@ const endProcess = () => {
     router.go(-1); // 立即返回上一级页面
   }
 };
-// 确保在点击结束指挥时重新显示对话框
-const ensureDialogVisible = () => {
-  if (!visible.value) {
-    showFormDialog();
-  }
-};
-// 显示对话框的方法
-const showFormDialog = () => {
-  visible.value = true;
-  emits('update:modelValue', true);
-  // 如果没有 event_id，则获取事件列表
-  if (!props.eventId) {
-    fetchEvents();
-  }
-};
+
 const selectEvent = (item) => {
   // 更新表单中的 event_id 和 event_title
   form.value.event_id = item.event_id;

src/views/emergencyCommandMap/LeftSection/index.vue

@@ -116,7 +116,6 @@ import { getEventDetail, getWeather } from '@/api/duty/eventing';
 import VideoMonitor from '@/views/emergencyCommandMap/LeftSection/VideoMonitor.vue';
 import { ref, onMounted, onUnmounted, computed } from 'vue';
 import CloseCommand from './CloseCommand.vue';
-import axios from 'axios';
 const route = useRoute();
 const router = useRouter();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;

src/views/emergencyCommandMap/RightSection/StartPlan.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-dialog ref="formDialogRef" v-model="props.modelValue" :title="props.title" width="1000px" append-to-body @close="closeDialog">
+    <div class="start-plan-content">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <div class="section-title select-level-container">
+            <span>响应等级</span>
+            <el-select v-model="selectedLevel" placeholder="请选择响应等级" class="select-level">
+              <el-option v-for="level in levels" :key="level.value" :label="level.name" :value="level.value"></el-option>
+            </el-select>
+          </div>
+        </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-col>
+      </el-row>
+    </div>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, defineEmits, ref, watch } from 'vue';
+const visible = ref(false);
+interface Props {
+  modelValue: boolean;
+  eventId: string;
+  title: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  eventId: '',
+  title: ''
+});
+
+// 定义事件发射器
+const emits = defineEmits(['update:modelValue']);
+
+// 内部响应式变量
+const innerModelValue = ref(props.modelValue);
+// 响应等级选择
+const selectedLevel = ref('');
+
+// 响应等级选项
+const levels = [
+  { value: '1', name: '一级' },
+  { value: '2', name: '二级' },
+  { value: '3', name: '三级' }
+];
+
+// 当props.modelValue改变时，更新内部变量
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    innerModelValue.value = newValue;
+  }
+);
+
+// 对话框关闭时执行的操作
+const closeDialog = () => {
+  emits('update:modelValue', false);
+};
+
+// 处理启动预案的函数
+const handleStartPlan = () => {
+  console.log('启动预案');
+};
+
+// 处理预案任务下发内容的函数
+const handleTaskDispatch = () => {
+  console.log('下发预案任务内容');
+};
+</script>
+<style scoped>
+.start-plan-content .section-title {
+  display: flex;
+  align-items: center;
+  white-space: nowrap; /* 防止文本换行 */
+}
+
+.start-plan-content .select-level-container {
+  display: flex;
+  align-items: center;
+}
+
+.select-level-container span {
+  margin-right: 8px;
+  white-space: nowrap; /* 防止文本换行 */
+}
+
+.select-level {
+  flex-grow: 1; /* 让下拉框尽可能占据剩余空间 */
+}
+
+.buttons-container {
+  display: flex;
+  justify-content: flex-end; /* 靠右对齐 */
+  gap: 10px; /* 设置按钮之间的间距 */
+}
+</style>

src/views/emergencyCommandMap/RightSection/index.vue

@@ -19,11 +19,11 @@
         </div>
         <div class="task-text gradient-text">通讯录</div>
       </div>
-      <div class="task-item">
+      <div class="task-item" @click="startPlan">
         <div class="icon">
           <div class="icon4"></div>
         </div>
-        <div class="task-text gradient-text">启动预警</div>
+        <div class="task-text gradient-text">启动预案</div>
       </div>
       <div class="task-item">
         <div class="icon">
@@ -51,37 +51,50 @@
       </div>
     </div>
     <JointDuty />
-<!--    <div class="message-card">-->
-<!--      <div class="title gradient-text">动态消息</div>-->
-<!--      <div class="message-menu">-->
-<!--        <div :class="menuState.activeIndex === 0 ? 'menu-item menu-active' : 'menu-item'" @click="menuState.activeIndex = 0">消息动态</div>-->
-<!--        <div :class="menuState.activeIndex === 1 ? 'menu-item menu-active' : 'menu-item'" @click="menuState.activeIndex = 1">任务跟踪</div>-->
-<!--        <div :class="menuState.activeIndex === 2 ? 'menu-item menu-active' : 'menu-item'" @click="menuState.activeIndex = 2">资源调度</div>-->
-<!--      </div>-->
-<!--      <div v-show="menuState.activeIndex === 0" class="message-content">-->
-<!--        <div v-for="(item, index) in menuState.messageData" :key="index" class="message-item">-->
-<!--          <i :class="getIconClass(item.type)"></i>-->
-<!--          <div class="message-box">-->
-<!--            <div :class="getTagClass(item.type)">{{ item.text }}</div>-->
-<!--            <div class="message-time">{{ item.time }}</div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </div>-->
+    <!--    <div class="message-card">-->
+    <!--      <div class="title gradient-text">动态消息</div>-->
+    <!--      <div class="message-menu">-->
+    <!--        <div :class="menuState.activeIndex === 0 ? 'menu-item menu-active' : 'menu-item'" @click="menuState.activeIndex = 0">消息动态</div>-->
+    <!--        <div :class="menuState.activeIndex === 1 ? 'menu-item menu-active' : 'menu-item'" @click="menuState.activeIndex = 1">任务跟踪</div>-->
+    <!--        <div :class="menuState.activeIndex === 2 ? 'menu-item menu-active' : 'menu-item'" @click="menuState.activeIndex = 2">资源调度</div>-->
+    <!--      </div>-->
+    <!--      <div v-show="menuState.activeIndex === 0" class="message-content">-->
+    <!--        <div v-for="(item, index) in menuState.messageData" :key="index" class="message-item">-->
+    <!--          <i :class="getIconClass(item.type)"></i>-->
+    <!--          <div class="message-box">-->
+    <!--            <div :class="getTagClass(item.type)">{{ item.text }}</div>-->
+    <!--            <div class="message-time">{{ item.time }}</div>-->
+    <!--          </div>-->
+    <!--        </div>-->
+    <!--      </div>-->
+    <!--    </div>-->
   </div>
   <Dialog v-model="videoMonitorState.showListDialog" title="视频监控">
     <videoList />
   </Dialog>
+  <StartPlan v-model="startPlanState.show" :title="startPlanState.title" />
 </template>
 
 <script lang="ts" setup>
 import router from '@/router';
 import { getEmergencyVideoCata } from '@/api/routineCommandMap';
 import JointDuty from '@/views/emergencyCommandMap/RightSection/JointDuty.vue';
-
+import StartPlan from './StartPlan.vue';
+import CloseCommand from '@/views/emergencyCommandMap/LeftSection/CloseCommand.vue';
 const goToHome = () => {
   router.push({ path: '/' });
 };
+//启动预案弹窗
+const startPlanState = reactive({
+  show: false,
+  title: ''
+});
+const startPlan = () => {
+  console.log('StartPlan');
+  startPlanState.title = '启动预案';
+  startPlanState.show = true;
+};
+
 // 视频监控
 const videoMonitorState = reactive({
   listData: [],
@@ -131,7 +144,7 @@ const getTagClass = (type) => {
   } else if (type === '4') {
     className = 'tag-danger';
   }
-  return className
+  return className;
 };
 
 // 初始化数据
@@ -153,7 +166,6 @@ const initData = () => {
   ];
 };
 
-
 onMounted(() => {
   initData();
 });
@@ -480,6 +492,4 @@ onMounted(() => {
   color: #1890ff;
   cursor: pointer;
 }
-
-
 </style>