更改布局位置

src/components/Map/quickZoom.vue

@@ -3,7 +3,7 @@
     <div class="scale-btn" @click="addStep">
       <el-icon size="14"><Plus /></el-icon>
     </div>
-    <div style="margin: 8px 0 6px;position: relative">
+    <div style="margin: 8px 0 6px; position: relative">
       <el-slider
         v-model="step"
         :min="1"

src/views/emergencyCommandMap/LeftSection.vue

@@ -3,6 +3,10 @@
     <div class="card">
       <div class="card-header">
         <div>事件信息</div>
+        <div class="header-right">
+          <div class="duration">{{ formattedDuration }}</div>
+          <el-button class="custom-button" type="danger" plain>结束处理</el-button>
+        </div>
       </div>
       <div class="card-content">
         <div style="line-height: 207px">值班时间：08-30-17：30</div>
@@ -21,13 +25,28 @@
       <div class="card-header">
         <div>分析研判</div>
       </div>
-      <div class="card-content flex" style="height: 100%">
-      </div>
+      <div class="card-content flex" style="height: 100%"></div>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+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);
+});
+</script>
 
 <style lang="scss" scoped>
 .left-section {
@@ -45,7 +64,14 @@
   margin-bottom: 69px;
   animation-name: slide;
   .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     margin-bottom: 20px;
+    .header-right {
+      display: flex;
+      align-items: center; /* 确保子元素在垂直方向居中对齐 */
+    }
   }
   &:last-child {
     margin-bottom: 0;
@@ -61,6 +87,21 @@
     height: 667.5px;
     animation-duration: 1.5s; // 新增
   }
+  .duration {
+    height: 80px;
+    width: 300px;
+    font-size: 14px;
+    padding: 10px;
+    border: 2px solid black; /*设置黑色边框*/
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10px; /* 添加间距以分隔时长显示和按钮 */
+  }
+  .custom-button {
+    height: 80px;
+    margin-left: 10px;
+  }
 }
 .table {
   table-layout: fixed;

src/views/emergencyCommandMap/RightSection.vue

@@ -8,9 +8,8 @@
           <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 @click="goToHome">返回首页</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>
@@ -46,21 +45,11 @@
 import Dialog from '@/components/Dialog/index.vue';
 import HKVideo from '@/components/HKVideo/index.vue';
 import DynamicMessages from './DynamicMessages.vue';
+import router from '@/router';
 
-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}秒`;
+const goToHome = () => {
+  router.push({ path: '/' });
 };
-onMounted(() => {
-  setInterval(updateDuration, 1000);
-});
 // 视频监控
 const videoUrl = reactive([
   { label: '摄像头一', img: '', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
@@ -115,6 +104,7 @@ const handleClose = () => {
     display: flex;
     justify-content: space-around; /* 使按钮在div内均匀分布 */
     align-items: center; /* 使按钮垂直居中 */
+    width: 100%;
   }
 
   .custom-button {
@@ -123,18 +113,6 @@ const handleClose = () => {
     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;

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(() => {