添加消息动态时间轴，任务下达等按钮，持续时间等功能。

src/views/emergencyCommandMap/DynamicMessages.vue

@@ -0,0 +1,131 @@
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="消息动态" name="first">
+      <div class="timeline-container">
+        <el-timeline>
+          <el-timeline-item
+            v-for="(activity, index) in activities"
+            :key="index"
+            :icon="activity.icon"
+            :type="activity.type"
+            :color="index === 0 ? 'blue' : activity.color"
+            :size="activity.size"
+            :hollow="activity.hollow"
+          >
+            <div class="timeline-item-content">
+              <span class="timestamp" :class="{ 'blue-text': index === 0 }">{{ activity.timestamp }}</span>
+              <span class="content" :class="{ 'blue-text': index === 0 }">{{ activity.content }}</span>
+            </div>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+    </el-tab-pane>
+    <el-tab-pane label="任务跟踪" name="second">Config</el-tab-pane>
+    <el-tab-pane label="资源调度" name="third">Role</el-tab-pane>
+  </el-tabs>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { TabsPaneContext } from 'element-plus';
+import { MoreFilled } from '@element-plus/icons-vue';
+
+const activeName = ref('first');
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event);
+};
+
+// 时间轴数据
+const activities = [
+  {
+    content: '结束大量',
+    timestamp: '2024/7/11 09:20:31',
+    size: 'large',
+    type: 'primary',
+    icon: MoreFilled
+  },
+  {
+    content: '发起重要政务群聊',
+    timestamp: '2024/7/11 09:09:31',
+    color: '#0bbd87'
+  },
+  {
+    content: '发起电话呼叫',
+    timestamp: '2024/7/11 09:08:31',
+    size: 'large'
+  },
+  {
+    content: '发起视频会商',
+    timestamp: '2024/7/11 09:07:31',
+    type: 'primary',
+    hollow: true
+  },
+  {
+    content: '启动预案',
+    timestamp: '2024/7/11 09:05:31'
+  },
+  {
+    content: '结案处理',
+    timestamp: '2024/7/11 09:00:09'
+  }
+];
+</script>
+
+<style scoped>
+.demo-tabs {
+  width: 100%;
+}
+
+.demo-tabs .el-tabs__header .el-tabs__item {
+  font-size: 32px;
+  font-weight: bold;
+}
+
+.demo-tabs > .el-tabs__content {
+  padding: 0;
+  color: #000000;
+  font-size: 32px;
+  font-weight: 600;
+  text-align: left;
+}
+
+.timeline-container {
+  padding: 16px;
+  margin: 0;
+}
+
+.el-timeline {
+  padding-left: 0;
+}
+
+.el-timeline-item__tail,
+.el-timeline-item__dot {
+  left: 0;
+}
+
+.el-timeline-item__wrapper {
+  margin-left: 0;
+}
+
+.timeline-item-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-left: 0;
+}
+
+.timestamp {
+  font-size: 16px;
+  color: #666;
+}
+
+.content {
+  font-size: 20px;
+  color: #000;
+}
+
+.blue-text {
+  color: #1890ff;
+}
+</style>

src/views/emergencyCommandMap/RightSection.vue

@@ -1,6 +1,17 @@
 <template>
   <div class="right-section">
     <div class="card">
+      <div class="header-container">
+        <div class="task-header">
+          <el-button class="custom-button" type="primary" plain>任务下达</el-button>
+          <el-button class="custom-button" type="primary" plain>粤政伊群聊</el-button>
+          <el-button class="custom-button" type="primary" plain>通讯录</el-button>
+          <el-button class="custom-button" type="primary" plain>启动预警</el-button>
+          <el-button class="custom-button" type="primary" plain>知识库</el-button>
+        </div>
+        <div class="duration">{{ formattedDuration }}</div>
+        <el-button class="custom-button" type="danger" plain>结束处理</el-button>
+      </div>
       <div class="card-header">
         <div>视频监控</div>
         <div class="more">查看更多</div>
@@ -22,6 +33,7 @@
         <div>动态消息</div>
       </div>
       <div class="card-content"></div>
+      <DynamicMessages />
     </div>
   </div>
   <!--视频弹窗-->
@@ -33,7 +45,22 @@
 <script lang="ts" setup>
 import Dialog from '@/components/Dialog/index.vue';
 import HKVideo from '@/components/HKVideo/index.vue';
+import DynamicMessages from './DynamicMessages.vue';
+
+const duration = ref(0);
+const formattedDuration = ref('');
 
+const updateDuration = () => {
+  duration.value += 1;
+  const days = Math.floor(duration.value / (24 * 3600));
+  const hours = Math.floor((duration.value % (24 * 3600)) / 3600);
+  const minutes = Math.floor((duration.value % 3600) / 60);
+  const seconds = duration.value % 60;
+  formattedDuration.value = `持续时长：${days}天${hours}小时${minutes}分${seconds}秒`;
+};
+onMounted(() => {
+  setInterval(updateDuration, 1000);
+});
 // 视频监控
 const videoUrl = reactive([
   { label: '摄像头一', img: '', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
@@ -76,6 +103,38 @@ const handleClose = () => {
   margin-bottom: 69px;
   animation-name: slide;
 
+  .header-container {
+    width: 100%;
+    display: flex;
+    //justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+  }
+
+  .task-header {
+    display: flex;
+    justify-content: space-around; /* 使按钮在div内均匀分布 */
+    align-items: center; /* 使按钮垂直居中 */
+  }
+
+  .custom-button {
+    width: 100px;
+    height: 80px;
+    font-size: 14px;
+  }
+
+  .duration {
+    height: 80px;
+    width: 300px;
+    font-size: 14px;
+    padding: 10px;
+    border: 2px solid black; /*设置黑色边框*/
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   .card-header {
     width: 100%;
     display: flex;
@@ -88,17 +147,17 @@ const handleClose = () => {
   }
 
   &:nth-child(1) {
-    animation-duration: 0.5s; // 新增
+    animation-duration: 0.5s;
   }
 
   &:nth-child(2) {
     height: 667.5px;
-    animation-duration: 1s; // 新增
+    animation-duration: 1s;
   }
 
   &:nth-child(3) {
     height: 667.5px;
-    animation-duration: 1.5s; // 新增
+    animation-duration: 1.5s;
   }
 }
 

src/views/emergencyCommandMap/index.vue

@@ -16,7 +16,7 @@ import MiddleSection from './MiddleSection.vue';
 import autofit from 'autofit.js';
 
 onMounted(() => {
-  autofit.init(
+/*  autofit.init(
     {
       dw: 8960,
       dh: 2520,
@@ -24,7 +24,7 @@ onMounted(() => {
       resize: true
     },
     false
-  );
+  );*/
 });
 
 onUnmounted(() => {