任务跟踪样式

src/api/emergencyCommandMap/JointDuty.ts

@@ -73,9 +73,6 @@ export function selectTask(data) {
   return request({
     url: '/api/taskRegistration/select',
     method: 'post',
-    params: {
-      query: data
-    },
     data: data
   });
 }

src/components/HKVideo/video-container.vue

@@ -1,69 +1,51 @@
 <template>
   <div v-if="videoData.length === 1" class="video-container1">
     <div class="video-item">
-      <div class="tag" :title="videoData[0].name">
-        <div class="name">{{ videoData[0].name }}</div>
-      </div>
-      <HKVideo :dot_data="videoData[0]" :height="1100" />
+      <div class="name">{{ videoData[0].name }}</div>
+      <HKVideo :dot_data="videoData[0]" :height="866" />
     </div>
   </div>
   <div v-else-if="videoData.length >= 2 && videoData.length <= 4" class="video-container2">
     <div v-for="(item, index) in videoData" :key="index" class="video-item">
-      <div class="tag" :title="item.name">
-        <div class="name">{{ item.name }}</div>
-      </div>
-      <HKVideo :dot_data="item" :height="8" />
+      <div class="name">{{ item.name }}</div>
+      <HKVideo :dot_data="item" :height="410" />
     </div>
   </div>
   <div v-else-if="videoData.length >= 5 && videoData.length <= 6" class="video-container3">
     <div class="box1">
       <div class="video-item2">
-        <div class="tag" :title="videoData[1].name">
-          <div class="name">{{ videoData[1].name }}</div>
-        </div>
-        <HKVideo :dot_data="videoData[0]" :height="730" />
+        <div class="name">{{ videoData[0].name }}</div>
+        <HKVideo :dot_data="videoData[0]" :height="562" />
       </div>
     </div>
     <div class="box2">
       <div class="video-item3">
-        <div class="tag" :title="videoData[0].name">
-          <div class="name">{{ videoData[0].name }}</div>
-        </div>
-        <HKVideo :dot_data="videoData[1]" :height="365" />
+        <div class="name">{{ videoData[1].name }}</div>
+        <HKVideo :dot_data="videoData[1]" :height="258" />
       </div>
       <div class="video-item3">
-        <div class="tag" :title="videoData[2].name">
-          <div class="name">{{ videoData[2].name }}</div>
-        </div>
-        <HKVideo :dot_data="videoData[2]" :height="365" />
+        <div class="name">{{ videoData[2].name }}</div>
+        <HKVideo :dot_data="videoData[2]" :height="258" />
       </div>
     </div>
     <div class="box3">
       <div class="video-item">
-        <div class="tag" :title="videoData[3].name">
-          <div class="name">{{ videoData[3].name }}</div>
-        </div>
-        <HKVideo :dot_data="videoData[3]" :height="365" />
+        <div class="name">{{ videoData[3].name }}</div>
+        <HKVideo :dot_data="videoData[3]" :height="258" />
       </div>
       <div class="video-item">
-        <div class="tag" :title="videoData[4].name">
-          <div class="name">{{ videoData[4].name }}</div>
-        </div>
-        <HKVideo :dot_data="videoData[4]" :height="365" />
+        <div class="name">{{ videoData[4].name }}</div>
+        <HKVideo :dot_data="videoData[4]" :height="258" />
       </div>
       <div class="video-item">
-        <div class="tag" :title="videoData[5].name">
-          <div class="name">{{ videoData[5].name }}</div>
-        </div>
-        <HKVideo :dot_data="videoData[5]" :height="365" />
+        <div class="name">{{ videoData[5].name }}</div>
+        <HKVideo :dot_data="videoData[5]" :height="258" />
       </div>
     </div>
   </div>
   <div v-else-if="videoData.length >= 7" class="video-container4">
     <div v-for="(item, index) in videoData" :key="index" class="video-item">
-      <div class="tag" :title="item.name">
-        <div class="name">{{ item.name }}</div>
-      </div>
+      <div class="name">{{ item.name }}</div>
       <HKVideo :dot_data="item" :height="258" />
     </div>
   </div>
@@ -78,44 +60,12 @@ const props = withDefaults(defineProps<Props>(), {});
 </script>
 
 <style lang="scss" scoped>
-.video-item,
-.video-item2,
-.video-item3 {
-  position: relative;
-  background: url('@/assets/images/video/videoBg.png') no-repeat;
-  background-size: 100% 100%;
-  padding: 17px;
-  .tag {
-    position: absolute;
-    bottom: 17px;
-    right: 17px;
-    color: #fff;
-    z-index: 11;
-    width: 546px;
-    height: 67px;
-    background: url('@/assets/images/video/tag.png') no-repeat;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    .name {
-      width: 480px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-}
 .video-container1 {
   width: 100%;
   height: 100%;
   .video-item {
     width: 100%;
     height: 100%;
-    padding: 70px 50px;
-  }
-  .tag {
-    right: 49px;
-    bottom: 73px;
   }
 }
 .video-container2 {
@@ -125,14 +75,9 @@ const props = withDefaults(defineProps<Props>(), {});
   height: 100%;
   .video-item {
     width: calc(50% - 12px);
-    height: 620px;
+    height: 432px;
     margin-bottom: 12px;
     margin-right: 12px;
-    padding: 30px 20px 30px 30px;
-    .tag {
-      bottom: 31px;
-      right: 20px;
-    }
     &:nth-child(2n) {
       margin-right: 0;
     }
@@ -145,27 +90,21 @@ const props = withDefaults(defineProps<Props>(), {});
   height: 100%;
   .box1 {
     width: calc(66.66666% - 6px);
-    height: 830px;
+    height: 596px;
     margin-bottom: 12px;
     margin-right: 12px;
     .video-item2 {
       width: 100%;
       height: 100%;
-      padding: 48px 30px 30px 40px;
-      .tag {
-        bottom: 50px;
-        right: 29px;
-      }
     }
   }
   .box2 {
     width: calc(33.33333% - 6px);
-    height: 830px;
+    height: 596px;
     .video-item3 {
       width: 100%;
-      height: 415px;
+      height: 292px;
       margin-bottom: 12px;
-      padding: 25px 17px 20px 24px;
       &:nth-child(2) {
         margin-top: 12px;
       }
@@ -173,15 +112,14 @@ const props = withDefaults(defineProps<Props>(), {});
   }
   .box3 {
     width: 100%;
-    height: 415px;
+    height: 292px;
     display: flex;
   }
   .video-item {
     width: calc(33.33333% - 8px);
-    height: 415px;
+    height: 292px;
     margin-bottom: 12px;
     margin-right: 12px;
-    padding: 25px 17px 20px 24px;
     &:nth-child(3n) {
       margin-right: 0;
     }
@@ -211,5 +149,19 @@ const props = withDefaults(defineProps<Props>(), {});
   justify-content: center;
   align-items: center;
 }
-
+.video-item,
+.video-item2,
+.video-item3 {
+  position: relative;
+  background: url('@/assets/images/video/videoBg.png');
+  background-size: 100% 100%;
+  padding: 17px;
+  .name {
+    position: absolute;
+    bottom: 17px;
+    right: 17px;
+    color: #fff;
+    z-index: 11;
+  }
+}
 </style>

src/components/HKVideo/video-container2.vue

@@ -0,0 +1,215 @@
+<template>
+  <div v-if="videoData.length === 1" class="video-container1">
+    <div class="video-item">
+      <div class="tag" :title="videoData[0].name">
+        <div class="name">{{ videoData[0].name }}</div>
+      </div>
+      <HKVideo :dot_data="videoData[0]" :height="1100" />
+    </div>
+  </div>
+  <div v-else-if="videoData.length >= 2 && videoData.length <= 4" class="video-container2">
+    <div v-for="(item, index) in videoData" :key="index" class="video-item">
+      <div class="tag" :title="item.name">
+        <div class="name">{{ item.name }}</div>
+      </div>
+      <HKVideo :dot_data="item" :height="8" />
+    </div>
+  </div>
+  <div v-else-if="videoData.length >= 5 && videoData.length <= 6" class="video-container3">
+    <div class="box1">
+      <div class="video-item2">
+        <div class="tag" :title="videoData[1].name">
+          <div class="name">{{ videoData[1].name }}</div>
+        </div>
+        <HKVideo :dot_data="videoData[0]" :height="730" />
+      </div>
+    </div>
+    <div class="box2">
+      <div class="video-item3">
+        <div class="tag" :title="videoData[0].name">
+          <div class="name">{{ videoData[0].name }}</div>
+        </div>
+        <HKVideo :dot_data="videoData[1]" :height="365" />
+      </div>
+      <div class="video-item3">
+        <div class="tag" :title="videoData[2].name">
+          <div class="name">{{ videoData[2].name }}</div>
+        </div>
+        <HKVideo :dot_data="videoData[2]" :height="365" />
+      </div>
+    </div>
+    <div class="box3">
+      <div class="video-item">
+        <div class="tag" :title="videoData[3].name">
+          <div class="name">{{ videoData[3].name }}</div>
+        </div>
+        <HKVideo :dot_data="videoData[3]" :height="365" />
+      </div>
+      <div class="video-item">
+        <div class="tag" :title="videoData[4].name">
+          <div class="name">{{ videoData[4].name }}</div>
+        </div>
+        <HKVideo :dot_data="videoData[4]" :height="365" />
+      </div>
+      <div class="video-item">
+        <div class="tag" :title="videoData[5].name">
+          <div class="name">{{ videoData[5].name }}</div>
+        </div>
+        <HKVideo :dot_data="videoData[5]" :height="365" />
+      </div>
+    </div>
+  </div>
+  <div v-else-if="videoData.length >= 7" class="video-container4">
+    <div v-for="(item, index) in videoData" :key="index" class="video-item">
+      <div class="tag" :title="item.name">
+        <div class="name">{{ item.name }}</div>
+      </div>
+      <HKVideo :dot_data="item" :height="258" />
+    </div>
+  </div>
+  <div v-else class="tip">附近没有可用监控视频</div>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  videoData: any[];
+}
+const props = withDefaults(defineProps<Props>(), {});
+</script>
+
+<style lang="scss" scoped>
+.video-item,
+.video-item2,
+.video-item3 {
+  position: relative;
+  background: url('@/assets/images/video/videoBg.png') no-repeat;
+  background-size: 100% 100%;
+  padding: 17px;
+  .tag {
+    position: absolute;
+    bottom: 17px;
+    right: 17px;
+    color: #fff;
+    z-index: 11;
+    width: 546px;
+    height: 67px;
+    background: url('@/assets/images/video/tag.png') no-repeat;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    .name {
+      width: 480px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+.video-container1 {
+  width: 100%;
+  height: 100%;
+  .video-item {
+    width: 100%;
+    height: 100%;
+    padding: 70px 50px;
+  }
+  .tag {
+    right: 49px;
+    bottom: 73px;
+  }
+}
+.video-container2 {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 100%;
+  .video-item {
+    width: calc(50% - 12px);
+    height: 620px;
+    margin-bottom: 12px;
+    margin-right: 12px;
+    padding: 30px 20px 30px 30px;
+    .tag {
+      bottom: 31px;
+      right: 20px;
+    }
+    &:nth-child(2n) {
+      margin-right: 0;
+    }
+  }
+}
+.video-container3 {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 100%;
+  .box1 {
+    width: calc(66.66666% - 6px);
+    height: 830px;
+    margin-bottom: 12px;
+    margin-right: 12px;
+    .video-item2 {
+      width: 100%;
+      height: 100%;
+      padding: 48px 30px 30px 40px;
+      .tag {
+        bottom: 50px;
+        right: 29px;
+      }
+    }
+  }
+  .box2 {
+    width: calc(33.33333% - 6px);
+    height: 830px;
+    .video-item3 {
+      width: 100%;
+      height: 415px;
+      margin-bottom: 12px;
+      padding: 25px 17px 20px 24px;
+      &:nth-child(2) {
+        margin-top: 12px;
+      }
+    }
+  }
+  .box3 {
+    width: 100%;
+    height: 415px;
+    display: flex;
+  }
+  .video-item {
+    width: calc(33.33333% - 8px);
+    height: 415px;
+    margin-bottom: 12px;
+    margin-right: 12px;
+    padding: 25px 17px 20px 24px;
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+}
+.video-container4 {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  .video-item {
+    width: calc(33.33333% - 8px);
+    height: 292px;
+    margin-bottom: 12px;
+    margin-right: 12px;
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+}
+.tip {
+  width: 100%;
+  height: 100%;
+  font-size: 44px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>

src/components/NearbyVideos/index.vue

@@ -9,7 +9,7 @@
       </el-select>
     </div>
     <div class="video-box">
-      <video-container :video-data="videoMonitorData" />
+      <video-container2 :video-data="videoMonitorData" />
     </div>
   </div>
 </template>

src/types/components.d.ts

@@ -45,6 +45,9 @@ declare module 'vue' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
@@ -64,6 +67,7 @@ declare module 'vue' {
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
@@ -74,6 +78,7 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
+    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']
@@ -102,6 +107,7 @@ declare module 'vue' {
     TreeSelect: typeof import('./../components/TreeSelect/index.vue')['default']
     UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
     VideoContainer: typeof import('./../components/HKVideo/video-container.vue')['default']
+    VideoContainer2: typeof import('./../components/HKVideo/video-container2.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
     YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']

src/views/emergencyCommandMap/LeftSection/index.vue

@@ -273,7 +273,7 @@ onUnmounted(() => {
   height: 100%;
   display: flex;
   flex-direction: column;
-  font-size: 74px;
+  font-size: 36px;
   .weather-card {
     width: 1922px;
     height: 230px;

src/views/emergencyCommandMap/RightSection/RenWuGenZong.vue

@@ -1,14 +1,17 @@
 <template>
   <div class="table-content">
-    <div v-for="(notification, index) in notifications" :key="index" class="tr">
-      <div class="td">
-        <div class="unit-date">
-          <span class="unit">{{ notification.unit }}</span>
-          <span class="date">{{ notification.date }}</span>
-          <span class="status" :class="statusClasses[notification.status]">{{ notification.status }}</span>
-          <button @click="updateTask(index)">更新</button>
+    <div v-for="(item, index) in dataList" :key="index" class="box1">
+      <div :class="item.processing_status === '已完成' ? 'success-icon' : 'processing-icon'"></div>
+      <div class="box2">
+        <div class="box-header">
+          <div class="header-left">
+            <div class="box-title">{{ item.unit_name }}</div>
+            <div class="time">{{ item.update_time }}</div>
+            <div :class="item.processing_status === '已完成' ? 'success' : 'processing'">{{ item.processing_status }}</div>
+          </div>
+          <div class="btn" @click="updateTask">更新</div>
         </div>
-        <div class="content">{{ notification.content }}</div>
+        <div class="box-content">{{ item.task_description }}</div>
       </div>
     </div>
   </div>
@@ -16,43 +19,29 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import { selectTask, updateTaskRegistration } from '@/api/emergencyCommandMap/JointDuty'; // 确保API路径正确
+import { selectTask, updateTaskRegistration } from '@/api/emergencyCommandMap/JointDuty';
+import { parseTime } from '@/utils/ruoyi';
 
 const props = defineProps<{
   eventId?: string; // 使用可选属性
 }>();
 
-const notifications = ref([]);
-const statusClasses = reactive({
-  '已完成': 'success',
-  '处理中': 'processing'
-});
+const dataList = ref([]);
 
 // 请求数据
 const fetchData = async () => {
-  try {
-    if (!props.eventId) {
-      console.error('eventId 未找到');
-      return;
-    }
-
-    const response = await selectTask({ eventId: props.eventId });
-
-    if (response.code === 200) {
-      console.log('查询成功:', response.data);
-      updateTaskList(response.data);
-    } else {
-      console.error('查询失败:', response.msg);
-    }
-  } catch (error) {
-    console.error('请求失败:', error);
-  }
+  selectTask({ eventId: props.eventId }).then((res) => {
+    res.data.forEach((item) => {
+      item.update_time = parseTime(item.update_time);
+    });
+    dataList.value = res.data;
+  });
 };
 
 // 更新任务
 const updateTask = async (index) => {
   try {
-    const task = notifications.value[index];
+    const task = dataList.value[index];
     const response = await updateTaskRegistration(task);
 
     if (response.code === 200) {
@@ -78,85 +67,91 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.tabs {
-  display: flex;
-  justify-content: flex-start; /* 选项卡靠左对齐 */
-  padding: 0 0;
-  background: rgba(0, 0, 0, 0.3);
-  .active {
-    border-bottom: 3px solid #00e8ff;
+.table-content {
+  height: 600px;
+  overflow-y: auto;
+  .box1 {
+    display: flex;
+    align-items: center;
   }
-  li {
-    cursor: pointer;
-    padding: 20px;
-    font-size: 36px;
-    color: #fff;
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.5);
+  .box2 {
+    width: 1642px;
+    background-image: url('@/assets/images/taskTracking/box1.png');
+    background-repeat: no-repeat;
+    background-size: 1642px 377px;
+    background-position: bottom left;
+    padding: 20px 20px 20px 60px;
+    margin-top: 20px;
+    position: relative;
+    &:first-child {
+      margin-top: 0;
     }
   }
-}
-
-.custom-table {
-  width: 100%;
-  .table-content {
-    height: 600px;
-    overflow-y: auto;
-    .tr {
+  .box-header {
+    display: flex;
+    justify-content: space-between;
+    .header-left {
       display: flex;
       align-items: center;
-      .td {
-        flex: 1;
-        padding: 10px;
-        font-size: 36px;
-        .unit-date {
-          display: flex;
-          align-items: center; /* 确保垂直居中 */
-          justify-content: space-between; /* 使 status 靠右对齐 */
-          span {
-            white-space: nowrap;
-            &.unit {
-              font-size: 36px; /* 调整字体大小 */
-              margin-right: 5px; /* 减小单位与日期之间的间距 */
-            }
-            &.date {
-              font-size: 36px; /* 调整字体大小 */
-              margin-right: auto; /* 使用 auto 推动 status 靠右 */
-            }
-            &.status {
-              font-size: 36px; /* 调整字体大小 */
-              text-align: right; /* 可选：如果需要进一步对齐内部文本 */
-            }
-            &.error {
-              color: #ff4d4f; /* 发送失败时使用红色 */
-            }
-            &.success {
-              color: #fff; /* 发送成功时使用黑色 */
-            }
-          }
-        }
-        .content {
-          margin-top: 10px;
-          font-size: 36px; /* 内容字体大小 */
-          line-height: 1.5; /* 增加行高以适应较大的字体 */
-        }
+      .box-title {
+        font-size: 38px;
+        font-family: YouSheBiaoTiHei;
+        color: #ffffff;
+        background-image: url('@/assets/images/taskTracking/titleBox.png');
+        background-repeat: no-repeat;
+        background-size: 311px 56px;
+        background-position: bottom left;
+        padding-left: 50px;
       }
+      .time {
+        font-size: 32px;
+        color: #00e8ff;
+        margin-left: 70px;
+      }
+    }
+    .success,
+    .processing,
+    .btn {
+      width: 154px;
+      height: 56px;
+      line-height: 56px;
+      font-size: 32px;
+      color: #ffffff;
+      border-radius: 10px;
+      text-align: center;
+      margin-left: 30px;
+    }
+    .success {
+      background-color: #38c95a;
+    }
+    .processing {
+      background-color: #ffb000;
+    }
+    .btn {
+      background-color: #247dff;
+      cursor: pointer;
     }
   }
-}
-
-.duty-card {
-  width: 2601px;
-  height: 879px;
-  background: url('@/assets/images/emergencyCommandMap/videoBox1.png') no-repeat 100% 100%;
-  position: relative;
-  color: #fff;
-  .card-content {
-    display: flex;
-    flex-wrap: wrap;
-    padding-top: 10px; /* 减小顶部填充 */
-    padding-left: 100px;
-    width: 2500px;
+  .box-content {
+    color: #fff;
+    font-size: 38px;
+    line-height: 98px;
+  }
+  .success-icon {
+    margin-right: -50px;
+    margin-top: 15px;
+    z-index: 1;
+    width: 123px;
+    height: 79px;
+    background: url('@/assets/images/taskTracking/success.png') no-repeat;
+  }
+  .processing-icon {
+    margin-right: -50px;
+    margin-top: 15px;
+    z-index: 1;
+    width: 123px;
+    height: 79px;
+    background: url('@/assets/images/taskTracking/success.png') no-repeat;
   }
 }
 </style>

src/views/emergencyCommandMap/RightSection/RightTop.vue

@@ -7,7 +7,7 @@
       </li>
     </ul>
     <div class="card-content">
-      <RenWuGenZong v-if="activeTab === '任务跟踪'" />
+      <RenWuGenZong v-if="activeTab === '任务跟踪'" :eventId="eventId" />
       <div v-else-if="activeTab === '预案通知'" class="custom-table">
         <div class="table-content">
           <div v-for="(notification, index) in notifications" :key="index" class="tr">
@@ -47,7 +47,7 @@ const tabs = reactive([
   { id: '资源调度', label: '资源调度' }
 ]);
 
-const activeTab = ref('预案通知');
+const activeTab = ref('任务跟踪');
 
 const setActiveTab = (id) => {
   activeTab.value = id;
@@ -103,7 +103,9 @@ onMounted(() => {
 .tabs {
   display: flex;
   justify-content: flex-start; /* 选项卡靠左对齐 */
-  padding: 0px 0;
+  padding: 0;
+  margin-left: 80px;
+  margin-top: 75px;
   .active {
     background: url('@/assets/images/emergencyCommandMap/tabActive.png') no-repeat;
   }
@@ -182,8 +184,7 @@ onMounted(() => {
   .card-content {
     display: flex;
     flex-wrap: wrap;
-    padding-top: 10px; /* 减小顶部填充 */
-    padding-left: 100px;
+    padding-left: 80px;
     width: 2500px;
   }
 }

src/views/emergencyCommandMap/RightSection/StartPlan.vue

@@ -326,6 +326,8 @@ h2 {
     font-family: 'YouSheBiaoTiHei';
     font-size: 38px;
     cursor: pointer;
+    padding: 0 35px;
+    text-align: center;
     &:hover {
       background: url('@/assets/images/plan/tabActive.png') no-repeat;
       background-position: bottom;
@@ -343,6 +345,8 @@ h2 {
   display: flex;
   margin-top: 30px;
   .tabs2 {
+    height: 620px;
+    overflow-y: auto;
     .tab {
       width: 399px;
       height: 70px;

src/views/emergencyCommandMap/RightSection/index.vue

@@ -150,7 +150,7 @@ const updatePlan = (data: { eventId: string }) => {
   height: 100%;
   display: flex;
   flex-direction: column;
-  font-size: 74px;
+  font-size: 36px;
   padding-top: 57px;
   .task-header {
     display: flex;

src/views/emergencyCommandMap/index.vue

@@ -48,7 +48,7 @@ onUnmounted(() => {
 .dashboard-container {
   width: 8960px;
   height: 2560px;
-  font-size: 74px;
+  font-size: 36px;
   font-family: 'PingFang SC', sans-serif;
   display: flex;
   justify-content: center;

src/views/globalMapPage/index.vue

@@ -41,7 +41,7 @@ onUnmounted(() => {
 .dashboard-container {
   width: 8960px;
   height: 2560px;
-  font-size: 74px;
+  font-size: 36px;
   font-family: 'PingFang SC', sans-serif;
   position: relative;
   display: flex;

src/views/routineCommandMap/LeftSection.vue

@@ -224,7 +224,7 @@ onMounted(() => {
   height: 100%;
   display: flex;
   flex-direction: column;
-  font-size: 74px;
+  font-size: 36px;
 }
 .card {
   width: 100%;

src/views/routineCommandMap/RightSection/index.vue

@@ -122,7 +122,7 @@ onMounted(() => {
   height: 100%;
   display: flex;
   flex-direction: column;
-  font-size: 74px;
+  font-size: 36px;
 }
 
 .card {

src/views/routineCommandMap/index.vue

@@ -49,7 +49,7 @@ onUnmounted(() => {
 .dashboard-container {
   width: 8960px;
   height: 2560px;
-  font-size: 74px;
+  font-size: 36px;
   display: flex;
   justify-content: center;
   align-items: center;