事件管理详情

src/assets/styles/index.scss

@@ -353,3 +353,123 @@ aside {
   justify-content: center;
   align-items: center;
 }
+
+.common-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 16px;
+  .common-header-left {
+    display: flex;
+    align-items: flex-end;
+    .common-title-icon {
+      display: inline-block;
+      margin-right: 8px;
+      width: 18px;
+      height: 17px;
+      background: url('@/assets/images/event.png') no-repeat;
+      background-size: 100% 100%;
+    }
+    .common-title-text {
+      font-size: 20px;
+      color: rgba(0, 0, 0, 0.85);
+    }
+  }
+  .common-header-right {
+    display: flex;
+    align-items: flex-end;
+  }
+}
+
+.detail-container {
+  padding: 13px 26px;
+}
+
+.edit-icon2 {
+  width: 15px;
+  height: 16px;
+  background: url('@/assets/images/edit2.png') no-repeat;
+  background-size: 100% 100%;
+  margin-right: 6px;
+  display: inline-block;
+}
+.command-icon {
+  width: 15px;
+  height: 16px;
+  background: url('@/assets/images/command.png') no-repeat;
+  background-size: 100% 100%;
+  margin-right: 6px;
+  display: inline-block;
+}
+.close-icon {
+  width: 16px;
+  height: 16px;
+  background: url('@/assets/images/close.png') no-repeat;
+  background-size: 100% 100%;
+  margin-right: 6px;
+  display: inline-block;
+}
+
+.common-info-box {
+  width: 100%;
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 5%, rgba(220, 239, 255, 0.15) 100%);
+  box-shadow: 0 2px 1px 0 rgba(24, 144, 255, 0.14);
+  border-top: 1px solid #ebf4ff;
+  //filter: blur(20px);
+  padding: 6px 0 13px;
+  margin-top: 24px;
+  .common-info-header {
+    display: flex;
+    align-items: center;
+    .line-icon {
+      display: inline-block;
+      width: 6px;
+      height: 17px;
+      background-image: linear-gradient(180deg, #00FCE7 0%, #2C81FF 100%);
+      border-radius: 0 3px 0 0;
+      margin-right: 9px;
+    }
+    .common-info-title {
+      font-weight: bold;
+    }
+  }
+  .common-info-content {
+    padding: 0 8px;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    margin-top: 8px;
+    .common-info-item {
+      display: flex;
+      align-items: center;
+      margin-top: 9px;
+      &:nth-child(4n + 1) {
+        width: 31%;
+      }
+      &:nth-child(4n + 2) {
+        width: 23%;
+      }
+      &:nth-child(4n + 3) {
+        width: 23%;
+      }
+      &:nth-child(4n + 4) {
+        width: 23%;
+      }
+    }
+  }
+}
+
+.common-link {
+  color: #2C81FF;
+}
+
+.common-back-box {
+  cursor: pointer;
+  .common-back {
+    width: 13px;
+    height: 10px;
+    background: url('@/assets/images/back.png') no-repeat;
+    background-size: 100% 100%;
+    display: inline-block;
+  }
+}

src/components/Step/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="step-container">
+    <div v-for="(item, index) in stepData.items" :key="index" class="step">
+      <div class="step-content">
+        <div class="step-item">
+          <div v-if="stepData.active > index" class="complete-tag"></div>
+          <div v-else-if="stepData.active == index" class="active-tag">{{ index + 1 }}</div>
+          <div v-else-if="stepData.active < index" class="tag">{{ index + 1 }}</div>
+          <div class="step-title">{{ item.title }}</div>
+        </div>
+        <div class="step-time">{{ item.description }}</div>
+      </div>
+      <div v-if="index !== stepData.items.length - 1" class="step-line" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  stepData: []
+});
+</script>
+
+<style lang="scss" scoped>
+.step-container {
+  display: flex;
+  width: 100%;
+  .step {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    height: 67px;
+    &:last-child {
+      width: 121px;
+      flex: unset;
+    }
+    .step-content {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      .step-item {
+        display: flex;
+        align-items: center;
+        .step-title {
+          white-space: nowrap;
+        }
+      }
+      .step-time {
+        position: absolute;
+        top: 30px;
+        left: 20px;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+        width: 100%;
+      }
+    }
+  }
+  .step-line {
+    width: calc(100% - 100px);
+    height: 1px;
+    margin: 0 15px 0 33px;
+    background-image: linear-gradient(90deg, #00fce7 5%, #2c81ff 100%);
+  }
+  .tag {
+    color: rgba(0, 0, 0, 0.25);
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: HelveticaNeue;
+    margin-right: 8px;
+  }
+  .complete-tag {
+    color: #fff;
+    border: 1px solid #1890FF;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: HelveticaNeue;
+    margin-right: 8px;
+    position: relative;
+    background: url('@/assets/images/check.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .active-tag {
+    color: #fff;
+    width: 32px;
+    height: 32px;
+    background: url('@/assets/images/circle.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: HelveticaNeue;
+    margin-right: 8px;
+  }
+}
+</style>

src/types/components.d.ts

@@ -85,6 +85,7 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     Screenfull: typeof import('./../components/Screenfull/index.vue')['default']
     SizeSelect: typeof import('./../components/SizeSelect/index.vue')['default']
+    Step: typeof import('./../components/Step/index.vue')['default']
     SubmitVerify: typeof import('./../components/Process/submitVerify.vue')['default']
     SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default']
     TopNav: typeof import('./../components/TopNav/index.vue')['default']

src/views/duty/eventing/eventDetails.vue

@@ -1,115 +1,123 @@
 <template>
-  <div class="app-container">
-    <div class="back-btn" @click="handleBack">
-      <el-icon><Back /></el-icon>
+  <div class="detail-container">
+    <div class="common-back-box" @click="handleBack">
+      <i class="common-back" />
       返回上一级
     </div>
-    <div class="line">
-      <div class="title">{{ detailData.event_title }}</div>
-      <div class="flex">
-        <el-button type="primary" :disabled="detailData.del_flag == '2'" @click="handleUpdate">编辑</el-button>
-        <el-button type="primary" :disabled="detailData.event_status != '0'" @click="handleStartEvent">开始指挥</el-button>
-        <el-button type="danger" :disabled="detailData.event_status != '2'" @click="handleCloseEvent">关闭事件</el-button>
-        <el-button type="danger" :disabled="(detailData.del_flag != '0')" @click="handleDeleteEvent">删除事件</el-button>
+    <div class="common-header">
+      <div class="common-header-left">
+        <i class="common-title-icon" />
+        <div class="common-title">{{ detailData.event_title }}</div>
       </div>
-    </div>
-    <div class="sub-title">基础信息</div>
-    <div class="line2">
-      <div class="line-item">
-        <div class="item-label">事件编号：</div>
-        <div class="item-value">{{ detailData.event_id }}</div>
+      <div class="common-header-right">
+        <el-button type="primary" :disabled="detailData.del_flag == '2'" @click="handleUpdate">
+          <i class="edit-icon2" />
+          编辑
+        </el-button>
+        <el-button type="primary" :disabled="detailData.event_status != '0'" @click="handleStartEvent">
+          <i class="command-icon" />
+          开始指挥
+        </el-button>
+        <el-button type="danger" plain :disabled="detailData.event_status != '2'" @click="handleCloseEvent">
+          <i class="close-icon" />
+          关闭事件
+        </el-button>
+        <el-button type="danger" plain icon="Minus" :disabled="detailData.del_flag != '0'" @click="handleDeleteEvent">删除事件</el-button>
       </div>
-      <div class="line-item">
-        <div class="item-label">事件类型：</div>
-        <div class="item-value">
-          <dict-tag :options="mm_event_type" :value="detailData.event_type" />
-        </div>
+    </div>
+    <div class="common-info-box">
+      <div class="common-info-header">
+        <i class="line-icon" />
+        <div class="common-info-title">基础信息</div>
       </div>
-      <div class="line-item">
-        <div class="item-label">事件等级：</div>
-        <div class="item-value" style="display: flex; align-items: center">
+      <div class="common-info-content">
+        <div class="common-info-item">事件编号：{{ detailData.event_id }}</div>
+        <div class="common-info-item">事件类型：<dict-tag :options="mm_event_type" :value="detailData.event_type" /></div>
+        <div class="common-info-item">
+          事件等级：
           <dict-tag :options="mm_event_level" :value="detailData.event_level" />
-          <el-icon style="margin-left: 20px;cursor: pointer" @click="handleEventLevelOpen"><Fold /></el-icon>
+          <el-icon style="margin-left: 20px; cursor: pointer" @click="handleEventLevelOpen"><Fold /></el-icon>
         </div>
-      </div>
-      <div class="line-item">
-        <div class="item-label">事件状态：</div>
-        <div class="item-value">
-          <dict-tag :options="mm_event_state" :value="detailData.event_status" />
+        <div class="common-info-item">事件状态：<dict-tag :options="mm_event_state" :value="detailData.event_status" /></div>
+        <div class="common-info-item">事发地点：{{ detailData.address }}</div>
+        <div class="common-info-item">事发时间：{{ detailData.event_time }}</div>
+        <div class="common-info-item">上报时间：{{ detailData.report_time }}</div>
+        <div class="common-info-item">
+          伤亡情况：
+          <div v-if="detailData.casualties == '0'" class="flex">
+            <span>未上报</span>
+            <span class="link" style="margin-left: 20px" @click="uploadeCasualties">去上报</span>
+          </div>
+          <div v-if="detailData.casualties == '1'" class="flex">
+            <span>已上报</span>
+          </div>
         </div>
+        <div class="common-info-item">登记人：{{ detailData.reported_by }}</div>
+        <div class="common-info-item">登记时间：{{ detailData.report_time }}</div>
+        <div class="common-info-item">联系方式：{{ detailData.contact }}</div>
+        <div class="common-info-item">事件来源：{{ detailData.event_source }}</div>
       </div>
     </div>
-    <div class="line2">
-      <div class="line-item">
-        <div class="item-label">事发地点：</div>
-        <div class="item-value link">{{ detailData.address }}</div>
-      </div>
-      <div class="line-item">
-        <div class="item-label">事发时间：</div>
-        <div class="item-value">{{ detailData.event_time }}</div>
-      </div>
-      <div class="line-item">
-        <div class="item-label">上报时间：</div>
-        <div class="item-value">{{ detailData.report_time }}</div>
-      </div>
-      <div class="line-item">
-        <div class="item-label">伤亡情况：</div>
-        <div class="flex" v-if="detailData.casualties == '0'">
-          <span>未上报</span>
-          <span class="link" style="margin-left: 20px" @click="uploadeCasualties">去上报</span>
-        </div>
-        <div class="flex" v-if="detailData.casualties == '1'">
-          <span>已上报</span>
-        </div>
+    <div class="common-info-box">
+      <div class="common-info-header">
+        <i class="line-icon" />
+        <div class="common-info-title">事件概要</div>
       </div>
+      <div v-if="!!detailData.event_description" class="common-info-content">{{ detailData.event_description }}</div>
     </div>
-    <div class="line2">
-      <div class="line-item">
-        <div class="item-label">登记人：</div>
-        <div class="item-value">{{ detailData.reported_by }}</div>
+    <div class="common-info-box">
+      <div class="common-info-header">
+        <i class="line-icon" />
+        <div class="common-info-title">事件跟踪</div>
       </div>
-      <div class="line-item">
-        <div class="item-label">登记时间：</div>
-        <div class="item-value">{{ detailData.report_time }}</div>
+      <div class="common-info-content">
+        <Step :step-data="eventTrackState" />
       </div>
-      <div class="line-item">
-        <div class="item-label">联系方式：</div>
-        <div class="item-value">{{ detailData.contact }}</div>
+    </div>
+    <div class="common-info-box">
+      <div class="common-info-header">
+        <i class="line-icon" />
+        <div class="common-info-title">指挥记录</div>
       </div>
-      <div class="line-item">
-        <div class="item-label">事件来源：</div>
-        <div class="item-value">{{detailData.event_source}}</div>
+      <div class="common-info-content">
+        <div class="list">
+          <div class="list-item">
+            <i class="img"></i>
+            <div class="item-title">大屏指挥记录</div>
+          </div>
+          <div class="list-item">
+            <i class="img"></i>
+            <div class="item-title">中屏指挥记录</div>
+          </div>
+        </div>
       </div>
     </div>
-    <div class="sub-title">事件概要</div>
-    <div class="textarea">{{detailData.event_description}}</div>
-    
-    <div class="sub-title">事件跟踪</div>
-    
-    <el-steps :active="eventTrackState.active" :align-center="true" style="width: 100%">
-      <el-step v-for="(item, index) in eventTrackState.items" :key="index" :title="item.title" :description="item.description"></el-step>
-    </el-steps>
-    
-    <div class="sub-title">指挥记录</div>
-    <div class="list">
-      <div class="list-item">
-        <i class="img"></i>
-        <div class="item-title">大屏指挥记录</div>
+    <div class="common-info-box">
+      <div class="common-info-header">
+        <i class="line-icon" />
+        <div class="common-info-title">匹配预案</div>
       </div>
-      <div class="list-item">
-        <i class="img"></i>
-        <div class="item-title">中屏指挥记录</div>
+      <div v-if="!!detailData.plan_name" class="common-info-content">
+        <div class="list">
+          <div class="list-item">
+            <i class="img"></i>
+            <div class="item-title">{{ detailData.plan_name }}</div>
+          </div>
+        </div>
       </div>
     </div>
-    <div class="sub-title">匹配预案</div>
-    <div class="list">
-      <div class="list-item2">{{detailData.plan_name}}</div>
-    </div>
-    <div class="sub-title">事件总结报告</div>
-    <div class="list2">
-      <div class="list-item" v-for="(item, index) in summaryFiles" :key="index" @click="downloadSummaryFile(item.url)">
-        <div class="link">{{item.file_name}}</div>
-        <el-icon class="icon"><Download /></el-icon>
+    <div class="common-info-box">
+      <div class="common-info-header">
+        <i class="line-icon" />
+        <div class="common-info-title">事件总结报告</div>
+      </div>
+      <div v-if="!!summaryFiles && summaryFiles.length > 0" class="common-info-content">
+        <div class="list2">
+          <div v-for="(item, index) in summaryFiles" :key="index" class="list-item" @click="downloadSummaryFile(item.url)">
+            <div class="link">{{ item.file_name }}</div>
+            <el-icon class="icon"><Download /></el-icon>
+          </div>
+        </div>
       </div>
     </div>
     <el-dialog v-model="eventLevelState.show" title="事件等级" width="500" :before-close="handleEventLevelClose">
@@ -127,14 +135,23 @@
       </el-timeline>
     </el-dialog>
 
-    <CloseEventDialog v-model="closeDialogState.show" :data="closeDialogState.form" :eventId="eventId" @update:model-value="fetchEventDetail" />
-    
-    <StartEventDialog v-model="startDialogState.show" :data="startDialogState.form" :eventId="eventId" @update:model-value="fetchEventDetail" />
+    <CloseEventDialog v-model="closeDialogState.show" :data="closeDialogState.form" :event-id="eventId" @update:model-value="fetchEventDetail" />
 
-    <EventEditDialog v-model="eventEditDialogState.show" :title="eventEditDialogState.title" :eventId="eventId" @update:model-value="fetchEventDetail"/>
+    <StartEventDialog v-model="startDialogState.show" :data="startDialogState.form" :event-id="eventId" @update:model-value="fetchEventDetail" />
 
-    <EditCasualtiesDialog v-model="editCasualtiesDialogState.show" :data="editCasualtiesDialogState.form" :eventId="eventId" @update:model-value="fetchEventDetail"/>
+    <EventEditDialog
+      v-model="eventEditDialogState.show"
+      :title="eventEditDialogState.title"
+      :event-id="eventId"
+      @update:model-value="fetchEventDetail"
+    />
 
+    <EditCasualtiesDialog
+      v-model="editCasualtiesDialogState.show"
+      :data="editCasualtiesDialogState.form"
+      :event-id="eventId"
+      @update:model-value="fetchEventDetail"
+    />
   </div>
 </template>
 
@@ -145,10 +162,13 @@ import CloseEventDialog from './CloseEventDialog.vue';
 import EventEditDialog from './EventEditDialog.vue';
 import EditCasualtiesDialog from './EditCasualtiesDialog.vue';
 
-const route = useRoute();
-const router = useRouter();
+const props = defineProps({
+  eventId: String
+});
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-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 { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(
+  proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state', 'region')
+);
 
 // 事件等级数据
 let eventLevelState = reactive({
@@ -177,7 +197,6 @@ let eventLevelState = reactive({
   ]
 });
 
-
 const handleEventLevelOpen = () => {
   eventLevelState.show = true;
 };
@@ -218,7 +237,6 @@ const handleBack = () => {
   router.go(-1);
 };
 
-let eventId = ref('');
 const detailData = ref({
   event_id: '',
   event_title: '',
@@ -274,166 +292,125 @@ const editCasualtiesDialogState = reactive({
 
 // 开始指挥（事件）
 const handleStartEvent = () => {
-  startDialogState.form.eventId = eventId.value
-  startDialogState.form.deaths = detailData.value.deaths
-  startDialogState.form.injuries = detailData.value.injuries
-  startDialogState.form.missing = detailData.value.missing
-  startDialogState.form.event_level = detailData.value.event_level
+  startDialogState.form.eventId = props.eventId;
+  startDialogState.form.deaths = detailData.value.deaths;
+  startDialogState.form.injuries = detailData.value.injuries;
+  startDialogState.form.missing = detailData.value.missing;
+  startDialogState.form.event_level = detailData.value.event_level;
   startDialogState.show = true;
 };
 
 // 关闭事件
 const handleCloseEvent = () => {
-  closeDialogState.form.eventId = eventId.value
-  closeDialogState.form.deaths = detailData.value.deaths
-  closeDialogState.form.injuries = detailData.value.injuries
-  closeDialogState.form.missing = detailData.value.missing
-  closeDialogState.form.fileNames = []
+  closeDialogState.form.eventId = props.eventId;
+  closeDialogState.form.deaths = detailData.value.deaths;
+  closeDialogState.form.injuries = detailData.value.injuries;
+  closeDialogState.form.missing = detailData.value.missing;
+  closeDialogState.form.fileNames = [];
   closeDialogState.show = true;
 };
 
 // 删除事件
 const handleDeleteEvent = () => {
   ElMessageBox.confirm('确认删除事件吗?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'info',
-    }).then(() => {
-      deleteEvent({ eventId: eventId.value }).then((res) => {
-        proxy?.$modal.msgSuccess(res.msg);
-        fetchEventDetail()
-      });
-    })
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'info'
+  }).then(() => {
+    deleteEvent({ eventId: props.eventId }).then((res) => {
+      proxy?.$modal.msgSuccess(res.msg);
+      fetchEventDetail();
+    });
+  });
 };
 
 // 上报伤亡情况
 const uploadeCasualties = () => {
-  editCasualtiesDialogState.form.eventId = eventId.value
-  editCasualtiesDialogState.form.deaths = ''
-  editCasualtiesDialogState.form.injuries = ''
-  editCasualtiesDialogState.form.missing = ''
+  editCasualtiesDialogState.form.eventId = props.eventId;
+  editCasualtiesDialogState.form.deaths = '';
+  editCasualtiesDialogState.form.injuries = '';
+  editCasualtiesDialogState.form.missing = '';
   editCasualtiesDialogState.show = true;
-}
-
+};
 
 const eventEditDialogState = reactive({
   show: false,
   title: ''
-})
+});
 
-const fetchEventDetail =  () => {
+const fetchEventDetail = () => {
   console.log('fetchEventDetail');
-  closeDialogState.show = false
-  startDialogState.show = false
-  eventEditDialogState.show = false
-  editCasualtiesDialogState.show = false
+  closeDialogState.show = false;
+  startDialogState.show = false;
+  eventEditDialogState.show = false;
+  editCasualtiesDialogState.show = false;
 
-  getEventDetail({ event_id: eventId.value }).then((res) => {
+  getEventDetail({ event_id: props.eventId }).then((res) => {
     detailData.value = res.data;
     eventTrackState = res.data.event_status_tracks;
     eventLevelState.data = res.data.event_level_tracks;
     summaryFiles.value = res.data.summary_file;
   });
-}
-
+};
 
 const handleUpdate = () => {
-  console.log('handleUpdate')
-  eventEditDialogState.title = "修改事件"
-  eventEditDialogState.show = true
+  console.log('handleUpdate');
+  eventEditDialogState.title = '修改事件';
+  eventEditDialogState.show = true;
 };
 
 onMounted(() => {
-  eventId.value = route.query.event_id as string;
-  fetchEventDetail()
+  fetchEventDetail();
 });
 </script>
 
 <style lang="scss" scoped>
-.app-container {
-  .line {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    margin-top: 15px;
-    .title {
-      font-weight: bold;
-      font-size: 24px;
-    }
-  }
-  .sub-title {
-    font-size: 18px;
-    font-weight: bold;
-    line-height: 35px;
-    margin-top: 20px;
-  }
-  .line2 {
+.list {
+  display: flex;
+  .list-item {
     display: flex;
+    flex-direction: column;
     align-content: center;
-    .line-item {
-      flex: 1;
-      font-size: 16px;
-      line-height: 35px;
-      display: flex;
-      .item-label {
-        width: 80px;
-        flex-shrink: 0;
-      }
-      .item-label {
-        margin-right: 5px;
-      }
-    }
-  }
-  .textarea {
-    background-color: #f2f2f2;
-    padding: 10px;
-    width: 100%;
-    min-height: 83px;
-  }
-  .list {
-    display: flex;
-    .list-item {
-      display: flex;
-      flex-direction: column;
-      align-content: center;
-      justify-content: center;
-      margin-right: 40px;
+    justify-content: center;
+    margin-right: 40px;
+    cursor: pointer;
+    position: relative;
+    .img {
+      width: 238px;
+      height: 142px;
+      background: url('@/assets/images/cardBg.png') no-repeat;
+      background-size: 100% 100%;
       cursor: pointer;
-      .img {
-        width: 180px;
-        height: 90px;
-        background-color: #cccccc;
-      }
-      .item-title {
-        text-align: center;
-        margin-top: 6px;
-      }
-      &:last-child {
-        margin-right: 0;
-      }
     }
-    .list-item2 {
-      margin-right: 40px;
-      cursor: pointer;
-      &:last-child {
-        margin-right: 0;
-      }
+    .item-title {
+      position: absolute;
+      left: 50%;
+      bottom: 16px;
+      transform: translateX(-50%);
+      color: #2c81ff;
+    }
+    &:last-child {
+      margin-right: 0;
     }
   }
-  .list2 {
-    .list-item {
-      display: flex;
-      align-items: center;
-      .icon {
-        margin-left: 10px;
-        cursor: pointer;
-      }
+  .list-item2 {
+    margin-right: 40px;
+    cursor: pointer;
+    &:last-child {
+      margin-right: 0;
     }
   }
-  .link {
-    color: #2598ff;
+}
+.list2 {
+  .list-item {
+    display: flex;
+    align-items: center;
+    color: #2c81ff;
     cursor: pointer;
+    .icon {
+      margin-left: 10px;
+      cursor: pointer;
+    }
   }
 }
 .dict-item {
@@ -466,7 +443,4 @@ onMounted(() => {
     border-radius: 5px;
   }
 }
-.back-btn {
-  cursor: pointer;
-}
 </style>

src/views/duty/eventing/index.vue

@@ -1,132 +1,134 @@
 <template>
-  <div class="app-container">
-    <div v-show="!eventEditDialogState.show">
-      <transition name="fade">
-        <div v-show="showSearch">
-          <el-form ref="queryFormRef" :model="queryParams">
-            <el-row :gutter="20">
-              <!-- 第一行 -->
-              <el-col :span="6">
-                <el-form-item label="事件类型：" prop="event_type">
-                  <el-select v-model="queryParams.event_type" clearable>
-                    <el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item label="事件等级：" prop="event_level">
-                  <el-select v-model="queryParams.event_level" clearable>
-                    <el-option v-for="item in mm_event_level" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item label="事件状态：" prop="event_status">
-                  <el-select v-model="queryParams.event_status" clearable>
-                    <el-option v-for="item in mm_event_state" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item label="事发时间：" prop="event_time">
-                  <el-date-picker
-                    v-model="queryParams.event_time"
-                    type="date"
-                    value-format="YYYY-MM-DD"
-                    placeholder="请选择"
-                    style="width: 100%"
-                  ></el-date-picker>
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row :gutter="20" class="mt-[10px]">
-              <el-col :span="6">
-                <el-form-item label="行政区划：" prop="region_code">
-                  <el-select v-model="queryParams.region_code" clearable>
-                    <el-option v-for="item in region" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item prop="keyword">
-                  <el-input v-model="queryParams.keyword" placeholder="请输入事件标题/事件地点" clearable @keyup.enter="handleQuery" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-button type="primary" @click="handleQuery">搜索</el-button>
-                <el-button @click="resetQuery">重置</el-button>
-              </el-col>
-            </el-row>
-          </el-form>
-        </div>
-      </transition>
+  <div>
+    <div v-show="!eventEditDialogState.show && !eventDetailsState.show" class="app-container">
+      <div>
+        <transition name="fade">
+          <div v-show="showSearch">
+            <el-form ref="queryFormRef" :model="queryParams">
+              <el-row :gutter="20">
+                <!-- 第一行 -->
+                <el-col :span="6">
+                  <el-form-item label="事件类型：" prop="event_type">
+                    <el-select v-model="queryParams.event_type" clearable>
+                      <el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="事件等级：" prop="event_level">
+                    <el-select v-model="queryParams.event_level" clearable>
+                      <el-option v-for="item in mm_event_level" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="事件状态：" prop="event_status">
+                    <el-select v-model="queryParams.event_status" clearable>
+                      <el-option v-for="item in mm_event_state" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="事发时间：" prop="event_time">
+                    <el-date-picker
+                      v-model="queryParams.event_time"
+                      type="date"
+                      value-format="YYYY-MM-DD"
+                      placeholder="请选择"
+                      style="width: 100%"
+                    ></el-date-picker>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row :gutter="20" class="mt-[10px]">
+                <el-col :span="6">
+                  <el-form-item label="行政区划：" prop="region_code">
+                    <el-select v-model="queryParams.region_code" clearable>
+                      <el-option v-for="item in region" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item prop="keyword">
+                    <el-input v-model="queryParams.keyword" placeholder="请输入事件标题/事件地点" clearable @keyup.enter="handleQuery" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-button type="primary" @click="handleQuery">搜索</el-button>
+                  <el-button @click="resetQuery">重置</el-button>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </transition>
 
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button type="primary" icon="Plus" @click="handleAdd">登记事件</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button type="danger" plain icon="Minus" :disabled="multiple" @click="handleDelete(selectedRow)">删除事件</el-button>
-        </el-col>
-      </el-row>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" icon="Plus" @click="handleAdd">登记事件</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="Minus" :disabled="multiple" @click="handleDelete(selectedRow)">删除事件</el-button>
+          </el-col>
+        </el-row>
 
-      <div v-show="ids.length > 0" class="common-select-info">
-        <div class="info-left">
-          <el-icon class="info-icon"><InfoFilled /></el-icon>
-          <span class="info-text1">已选择</span>
-          <span class="info-text2">{{ ids.length }}</span>
-          <span class="info-text1">项</span>
+        <div v-show="ids.length > 0" class="common-select-info">
+          <div class="info-left">
+            <el-icon class="info-icon"><InfoFilled /></el-icon>
+            <span class="info-text1">已选择</span>
+            <span class="info-text2">{{ ids.length }}</span>
+            <span class="info-text1">项</span>
+          </div>
+          <div class="clear-btn" @click="clearSelection">清空</div>
         </div>
-        <div class="clear-btn" @click="clearSelection">清空</div>
-      </div>
 
-      <!-- 表格组件 -->
-      <el-table ref="multipleTable" v-loading="loading" :data="eventList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="事件编号" align="center" prop="event_id" />
-        <el-table-column label="事件标题" align="center" prop="event_title" />
-        <el-table-column label="事件类型" align="center" prop="event_type">
-          <template #default="scope">
-            <dict-tag :options="mm_event_type" :value="scope.row.event_type" />
-          </template>
-        </el-table-column>
-        <el-table-column label="事件等级" align="center" prop="event_level">
-          <template #default="scope">
-            <div class="common-flex">
-              <i :class="getStatusClass(scope.row.event_level)"></i>
-              <dict-tag :options="mm_event_level" :value="scope.row.event_level" />
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="事件地点" align="center" prop="address" />
-        <el-table-column label="事件状态" align="center" prop="event_status">
-          <template #default="scope">
-            <div class="common-flex">
-              <i :class="getStatusClass2(scope.row.event_status)"></i>
-              <dict-tag :options="mm_event_state" :value="scope.row.event_status" />
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="事件时间" align="center" prop="event_time" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template #default="scope">
-            <el-text class="common-btn-text-primary" @click="handleView(scope.row)">查看</el-text>
-            <el-text class="common-btn-text-primary" @click="handleUpdate(scope.row)">编辑</el-text>
-            <el-text class="common-btn-text-danger" @click="handleClose(scope.row)">关闭事件</el-text>
-          </template>
-        </el-table-column>
-      </el-table>
+        <!-- 表格组件 -->
+        <el-table ref="multipleTable" v-loading="loading" :data="eventList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="事件编号" align="center" prop="event_id" />
+          <el-table-column label="事件标题" align="center" prop="event_title" />
+          <el-table-column label="事件类型" align="center" prop="event_type">
+            <template #default="scope">
+              <dict-tag :options="mm_event_type" :value="scope.row.event_type" />
+            </template>
+          </el-table-column>
+          <el-table-column label="事件等级" align="center" prop="event_level">
+            <template #default="scope">
+              <div class="common-flex">
+                <i :class="getStatusClass(scope.row.event_level)"></i>
+                <dict-tag :options="mm_event_level" :value="scope.row.event_level" />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="事件地点" align="center" prop="address" />
+          <el-table-column label="事件状态" align="center" prop="event_status">
+            <template #default="scope">
+              <div class="common-flex">
+                <i :class="getStatusClass2(scope.row.event_status)"></i>
+                <dict-tag :options="mm_event_state" :value="scope.row.event_status" />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="事件时间" align="center" prop="event_time" />
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <el-text class="common-btn-text-primary" @click="handleView(scope.row)">查看</el-text>
+              <el-text class="common-btn-text-primary" @click="handleUpdate(scope.row)">编辑</el-text>
+              <el-text class="common-btn-text-danger" @click="handleClose(scope.row)">关闭事件</el-text>
+            </template>
+          </el-table-column>
+        </el-table>
 
-      <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="getList" />
+        <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="getList" />
+      </div>
+      <CloseEventDialog
+        v-model="closeDialogState.show"
+        :data="closeDialogState.form"
+        :event-id="eventId"
+        @update:model-value="handleCloseEventDialog"
+      />
     </div>
-
     <EventEditDialog v-model="eventEditDialogState.show" :title="eventEditDialogState.title" :event-id="eventId" @get-list="getList" />
-    <CloseEventDialog
-      v-model="closeDialogState.show"
-      :data="closeDialogState.form"
-      :event-id="eventId"
-      @update:model-value="handleCloseEventDialog"
-    />
+    <EventDetails v-if="eventDetailsState.show" :eventId="eventDetailsState.eventId" />
   </div>
 </template>
 
@@ -136,6 +138,7 @@ import { getEvent, deleteEvent } from '@/api/duty/eventing';
 
 import EventEditDialog from './EventEditDialog.vue';
 import CloseEventDialog from './CloseEventDialog.vue';
+import EventDetails from '@/views/duty/eventing/eventDetails.vue';
 
 const proxy = getCurrentInstance()?.proxy;
 const { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(
@@ -291,16 +294,15 @@ const handleClose = (row) => {
 const handleCloseEventDialog = (b) => {
   console.log('handleCloseEventDialog', b);
 };
-
+let eventDetailsState = reactive({
+  show: false,
+  eventId: ''
+});
 // 查看事件详情
 const handleView = (row) => {
   if (row) {
-    // 查看事件详情逻辑
-    console.log('查看事件详情', row);
-    router.push({
-      path: '/duty/eventing/eventDetails',
-      query: { event_id: row.event_id }
-    });
+    eventDetailsState.eventId = row.event_id;
+    eventDetailsState.show = true;
   }
 };
 const getStatusClass = (value) => {