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

src/views/emergencyCommandMap/LeftSection/CloseCommand.vue

@@ -0,0 +1,131 @@
+<template>
+  <el-dialog ref="formDialogRef" :model-value="visible" :title="props.title" width="650px" append-to-body @close="closeDialog">
+    <el-form ref="eventFormRef" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="灾害事件" prop="event_title">
+        <el-select v-model="form.event_title" placeholder="请选择事件" clearable v-if="!props.eventId">
+          <el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+        <span v-else>{{ form.event_title }}</span>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="endProcess">结束指挥</el-button>
+        <el-button @click="closeDialog">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, toRefs } from 'vue';
+import { addEvent, editEvent, postEditEvent } from '@/api/duty/eventing';
+
+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')
+);
+const router = useRouter();
+const buttonLoading = ref(false);
+const eventFormRef = ref();
+const visible = ref(false);
+// 结束
+// const endProcess = () => {
+//   router.push('/');
+// };
+interface Props {
+  modelValue: boolean;
+  eventId: string;
+  title: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false
+});
+
+const emits = defineEmits(['update:modelValue']);
+watch(
+  () => props.modelValue,
+  () => {
+    // 界面显示初始化
+    if (props.modelValue) {
+      if (props.eventId != '') {
+        editEvent({ event_id: props.eventId }).then((res) => {
+          form.value = res.data;
+        });
+      } else {
+        form.value = { ...initFormData };
+        eventFormRef.value?.resetFields();
+      }
+    }
+    visible.value = props.modelValue;
+  }
+);
+
+// 表单初始数据
+const initFormData = {
+  event_title: '', // 事件标题
+  event_type: '', // 事件类型
+  event_level: '', // 事件等级
+  event_status: '0' // 事件状态
+};
+
+// 表单数据
+const data = reactive({
+  form: { ...initFormData },
+  rules: {
+    event_title: [{ required: true, message: '事件标题不能为空', trigger: 'blur' }],
+    event_type: [{ required: true, message: '事件类型不能为空', trigger: 'blur' }],
+    event_level: [{ required: true, message: '事件等级不能为空', trigger: 'blur' }],
+    event_status: [{ required: true, message: '事件状态不能为空', trigger: 'blur' }]
+  }
+});
+
+const { form, rules } = toRefs(data);
+
+// 提交表单
+const submitForm = () => {
+  eventFormRef.value?.validate((valid) => {
+    if (valid) {
+      buttonLoading.value = true;
+      // 打印表单数据
+      console.log('表单数据', form.value);
+      if (props.eventId === '') {
+        addEvent(form.value)
+          .then((res) => {
+            proxy?.$modal.msgSuccess(res.msg);
+            closeDialog();
+          })
+          .finally(() => {
+            buttonLoading.value = false;
+          });
+      } else {
+        postEditEvent(form.value)
+          .then((res) => {
+            proxy?.$modal.msgSuccess(res.msg);
+            closeDialog();
+          })
+          .finally(() => {
+            buttonLoading.value = false;
+          });
+      }
+    }
+  });
+};
+const closeDialog = () => {
+  visible.value = false;
+  // 清空表单
+  if (eventFormRef.value) {
+    eventFormRef.value.resetFields();
+  }
+};
+const endProcess = () => {
+  // 关闭弹窗
+  closeDialog();
+  // 使用 Vue Router 返回到上一个页面
+  router.go(-1);
+};
+// 显示对话框的方法
+const showFormDialog = () => {
+  visible.value = true;
+};
+</script>

src/views/emergencyCommandMap/LeftSection/index.vue

@@ -47,7 +47,7 @@
             </div>
           </div>
           <div class="line2"></div>
-          <div class="finish-btn" @click="endProcess">
+          <div class="finish-btn" @click="closeCommand">
             <div class="finish-icon"></div>
             <div class="finish-text">结束处置</div>
           </div>
@@ -110,12 +110,14 @@
       </div>
     </div>
     <VideoMonitor />
+    <CloseCommand v-model="closeCommandState.show" :title="closeCommandState.title" :event-id="eventId" @update:model-value="fetchEventDetail" />
   </div>
 </template>
 <script lang="ts" setup name="LeftSection">
 import { getEventDetail } 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();
@@ -185,15 +187,19 @@ const comprehensiveDutyState = ref({
   mainShiftPerson: '',
   backupPerson: ''
 });
-
+//结束指挥弹窗
+const closeCommandState = reactive({
+  show: false,
+  title: ''
+});
+const closeCommand = () => {
+  console.log('CloseCommand');
+  closeCommandState.title = '修改事件';
+  closeCommandState.show = true;
+};
 // 分析研判
 const analyzeJudge = ref({});
 
-// 结束
-const endProcess = () => {
-  router.push('/');
-};
-
 const initData = () => {
   // 事件信息
   eventData.value = {

src/views/routineCommandMap/LeftSection.vue

@@ -46,7 +46,9 @@
             </tr>
           </thead>
           <tr v-for="(item, index) in eventList" :key="index" class="tr">
-            <td class="td">{{ item.event_title }}</td>
+            <td class="td">
+              <div @click="handleView(item.event_id)">{{ item.event_title }}</div>
+            </td>
             <td class="td">
               <dict-tag :options="mm_event_type" :value="item.event_type" />
             </td>
@@ -56,7 +58,7 @@
               <dict-tag :options="mm_event_state" :value="item.event_status" />
             </td>
             <td class="td">
-              <div class="flex">
+              <div v-if="item.event_status === '0' || item.event_status === '1'" class="flex">
                 <div @click="enterCommand(item)">进入指挥</div>
               </div>
             </td>
@@ -69,18 +71,20 @@
   <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>
 import Dialog from '@/components/Dialog/index.vue';
 import EventManage from '@/views/routineCommandMap/EventManage.vue';
 import { ref, reactive, toRefs } from 'vue';
-import { getEvent, deleteEvent } from '@/api/duty/eventing';
+import { getEvent } from '@/api/duty/eventing';
+import eventDetails from './eventing/eventDetails.vue';
 const eventList = ref([]);
 const loading = ref(true);
 const total = ref(0);
 const router = useRouter();
-
+const eventId = ref('');
 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')
@@ -96,7 +100,17 @@ const comprehensiveDutyState = reactive({
     operatorOnDuty: '王珊珊'
   }
 });
-
+const eventDetailsState = reactive({
+  show: false,
+  title: ''
+});
+//查看事件详情
+const handleView = (id: string) => {
+  // 查看事件详情逻辑
+  eventId.value = id;
+  eventDetailsState.title = '查看事件';
+  eventDetailsState.show = true;
+};
 // 巡查消息
 const inspectionNewsState = reactive({
   showListDialog: false,
@@ -116,6 +130,7 @@ const showInspectionNewsState = () => {
 };
 
 const initFormData = {
+  event_id: '',
   event_title: '', // 事件标题
   event_type: '', // 事件类型
   event_status: '', // 事件状态

src/views/routineCommandMap/eventing/eventDetails.vue

@@ -141,7 +141,7 @@
 <script lang="ts" setup>
 import { getEventDetail, deleteEvent } from '@/api/duty/eventing';
 import EditCasualtiesDialog from './EditCasualtiesDialog.vue';
-import { ref } from 'vue';
+import { onMounted, onBeforeUnmount, watch, ref } from 'vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -296,12 +296,26 @@ onMounted(() => {
   getEventDetail(props.eventId);
   // });
 });
+// 监听 modelValue 的变化
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    if (newVal) {
+      fetchEventDetail();
+    }
+  }
+);
 // 关闭弹窗
 const closeDialog = () => {
   emits('update:modelValue', false);
   // detailData.value = { eventId: '' };
-  fetchEventDetail();
+  // 清除数据
+  detailData.value = {};
 };
+// 组件卸载前清空数据
+onBeforeUnmount(() => {
+  detailData.value = {};
+});
 </script>
 
 <style lang="scss" scoped>