packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/LocationPanel.vue

@@ -82,7 +82,7 @@ const locationInfo = [
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   grid-template-rows: repeat(2, minmax(0, 1fr));
-  gap: clamp(4px, vh(6), 8px) clamp(4px, vw(6), 8px);
+  gap: clamp(10px, vh(14), 18px) clamp(12px, vw(16), 20px);
   width: 100%;
   height: 100%;
 }
@@ -91,7 +91,7 @@ const locationInfo = [
 .info-card {
   display: flex;
   align-items: center;
-  gap: 3px;
+  gap: clamp(8px, vw(12), 14px);
   // padding: clamp(10px, vh(12), 16px) clamp(12px, vw(14), 18px);
   // background: rgba(10, 95, 165, 0.15);
   border-radius: clamp(6px, vw(8), 10px);
@@ -137,9 +137,9 @@ const locationInfo = [
 // 值样式
 .info-value {
   margin: 0;
-  font-size: 12px;
+  font-size: clamp(15px, vw(18), 22px);
   color: #e8f4ff;
-  // font-weight: 600;
+  font-weight: 600;
   line-height: 1.2;
   white-space: nowrap;
   overflow: hidden;

packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/index.vue

@@ -2,7 +2,7 @@
   <div class="left-panel-wrapper">
     <div class="left-panel">
       <CollapsiblePanel title="快速感知" subtitle="「灾害分析」">
-        <template #title-icon>
+        <template #header-right>
           <img
             src="../../assets/images/摄像头.png"
             alt="摄像头"
@@ -96,11 +96,10 @@ const handleStartDispatch = (payload) => {
 .left-panel {
   // width: vw(464);
   height: 100%;
-  background: url('../../assets/images/框架左边.png') no-repeat;
+  background: url('../../assets/images/SketchPng7ba5c49d9f8f79e6b559d62cfb6b0b0c79616dd8b289f8b62b5cb8adc18c30e7.png') no-repeat;
   background-size: 100% 100%;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding-left: vw(40); // 为左侧折叠按钮预留空间
 
   &::-webkit-scrollbar {
     width: vw(6);
@@ -129,7 +128,7 @@ const handleStartDispatch = (payload) => {
   flex-direction: column;
   align-items: flex-start;
   gap: vh(12);
-  width: vw(220);
+  width: vw(368);
   z-index: 10;
 }
 
@@ -188,12 +187,11 @@ const handleStartDispatch = (payload) => {
 }
 
 .camera-icon {
-  width: vw(20);
+  width: vw(24);
-  height: vw(20);
+  height: vw(24);
-  margin-left: vw(6);
+  margin-right: vw(8);
   cursor: pointer;
   transition: opacity 0.2s ease;
-  vertical-align: middle;
 
   &:hover {
     opacity: 0.8;

packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/DispatchCommand.vue

@@ -31,9 +31,9 @@
           <span class="col-name">{{ item.name }}</span>
           <span class="col-dept">{{ item.department || item.type || '-' }}</span>
           <span class="col-location">{{ item.distance || item.altitude || '-' }}</span>
-          <span class="col-action" @click="linkToItem(item)">
+          <button class="col-action" @click="linkToItem(item)">
             联动
-          </span>
+          </button>
         </div>
       </div>
     </div>
@@ -127,8 +127,7 @@ const getColumnName = (type) => {
     }
 
     .table-body {
-      min-height: vh(205);
+      max-height: vh(200);
-      max-height: vh(205);
       overflow-y: auto;
 
       &::-webkit-scrollbar {
@@ -166,15 +165,15 @@ const getColumnName = (type) => {
         .col-action {
           padding: vh(4) vw(12);
           background: transparent;
-          // border: 1px solid var(--primary-color);
+          border: 1px solid var(--primary-color);
-          // border-radius: vw(4);
+          border-radius: vw(4);
           color: var(--primary-color);
           font-size: fs(12);
           cursor: pointer;
           transition: all 0.3s;
 
           &:hover {
-            // background: var(--primary-color);
+            background: var(--primary-color);
             color: var(--text-white);
           }
         }

packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue

@@ -1,17 +1,15 @@
 <template>
-  <div class="video-monitor-item" :class="{ 'is-collapsed': isCollapsed }">
+  <div class="video-monitor-item">
-    <div class="video-monitor-item__header" @click="toggleCollapse">
+    <div class="video-monitor-item__header">
       <span class="video-title">{{ monitor.title }}</span>
       <img
         src="../../assets/images/展开icon.png"
         alt="collapse"
         class="collapse-icon"
-        :class="{ 'is-collapsed': isCollapsed }"
       />
     </div>
 
-    <transition name="collapse">
+    <div class="video-monitor-item__content">
-      <div v-show="!isCollapsed" class="video-monitor-item__content">
       <div class="video-placeholder">
         <!-- 视频播放器 -->
         <video
@@ -79,7 +77,6 @@
         </div>
       </div>
     </div>
-    </transition>
   </div>
 </template>
 
@@ -95,16 +92,6 @@ const props = defineProps({
 
 defineEmits(['megaphone', 'audio', 'zoom'])
 
-// 收起/展开状态
-const isCollapsed = ref(false)
-
-/**
- * 切换收起/展开状态
- */
-const toggleCollapse = () => {
-  isCollapsed.value = !isCollapsed.value
-}
-
 const currentTime = ref('')
 
 const updateTime = () => {
@@ -145,13 +132,6 @@ onUnmounted(() => {
   padding: 2px;
   // border-radius: vw(8);
   overflow: hidden;
-  transition: all 0.3s ease;
-
-  // 收起状态：只显示标题栏
-  &.is-collapsed {
-    background: none;
-    padding: 0;
-  }
 
   &__header {
     display: flex;
@@ -160,7 +140,6 @@ onUnmounted(() => {
     padding: vh(10) vw(16);
     background: rgba(20, 53, 118, 0.5);
     border-bottom: 1px solid var(--border-color);
-    transition: all 0.3s ease;
 
     .video-title {
       color: var(--text-white);
@@ -173,30 +152,11 @@ onUnmounted(() => {
       width: vw(26);
       height: vw(26);
       cursor: pointer;
-      transition: transform 0.3s ease;
+      transition: transform 0.3s;
 
-      &.is-collapsed {
+      // &:hover {
-        // transform: rotate(180deg);
+      //   transform: rotate(180deg);
-      }
+      // }
-
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-  }
-
-  // 收起状态下的 header 样式
-  &.is-collapsed &__header {
-    border-bottom: none;
-    border-radius: vw(8);
-  }
-
-  &__header {
-    cursor: pointer;
-    user-select: none;
-
-    &:hover {
-      background: rgba(20, 53, 118, 0.7);
     }
   }
 
@@ -306,23 +266,4 @@ onUnmounted(() => {
     }
   }
 }
-
-// 折叠动画
-.collapse-enter-active,
-.collapse-leave-active {
-  transition: all 0.3s ease;
-  overflow: hidden;
-}
-
-.collapse-enter-from,
-.collapse-leave-to {
-  max-height: 0;
-  opacity: 0;
-}
-
-.collapse-enter-to,
-.collapse-leave-from {
-  max-height: 500px;
-  opacity: 1;
-}
 </style>

packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/index.vue

@@ -36,11 +36,10 @@ import CollaborationInfo from './CollaborationInfo.vue'
 .right-panel {
   // width: vw(486);
   height: 100%;
-  background: url('../../assets/images/框架右边.png') no-repeat;
+  background: url('../../assets/images/SketchPngab2bc23b7e477ddbee76b880e28c1c97d6afb9261784dec29ed08c4e0a34d5b3.png') no-repeat;
   background-size: 100% 100%;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding-right: vw(40); // 为右侧折叠按钮预留空间
 
   &::-webkit-scrollbar {
     width: vw(6);

packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue

@@ -6,9 +6,6 @@
       @click="collapsible && toggle()"
     >
       <PanelHeader :title="title" :subtitle="subtitle">
-        <template #title-icon>
-          <slot name="title-icon" />
-        </template>
         <template #extra>
           <slot name="header-right" />
           <button
@@ -19,12 +16,20 @@
             :aria-label="isCollapsed ? '展开面板' : '收起面板'"
             @click.stop="toggle"
           >
-            <img
+            <svg
-              :src="toggleIcon"
-              alt=""
               class="collapsible-panel__toggle-icon"
               :class="{ 'is-collapsed': isCollapsed }"
-            />
+              viewBox="0 0 12 12"
+              fill="none"
+            >
+              <path
+                d="M3 5L6 8L9 5"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
           </button>
         </template>
       </PanelHeader>
@@ -51,7 +56,6 @@
 <script setup>
 import { computed, ref } from 'vue'
 import PanelHeader from './PanelHeader.vue'
-import toggleIcon from '../../assets/images/展开icon.png'
 
 const props = defineProps({
   /** 面板标题 */
@@ -192,12 +196,13 @@ function onAfterLeave(el) {
   }
 
   &__toggle-icon {
-    width: vw(24);
+    width: vw(12);
-    height: auto;
+    height: vh(12);
+    color: var(--primary-color);
     transition: transform 0.3s ease;
 
     &.is-collapsed {
-      // transform: rotate(-90deg);
+      transform: rotate(-90deg);
     }
   }
 

packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/PanelHeader.vue

@@ -3,7 +3,6 @@
     <div class="panel-header__content">
       <span class="panel-header__title">{{ title }}</span>
       <span v-if="subtitle" class="panel-header__subtitle">{{ subtitle }}</span>
-      <slot name="title-icon"></slot>
     </div>
     <slot name="extra"></slot>
   </div>

packages/screen/src/views/3DSituationalAwarenessRefactor/config/modelCompare.config.js

@@ -69,8 +69,7 @@ export const BEFORE_IMAGERY_CONFIG = {
   // 影像服务URL
   // 格式：支持标准瓦片服务的URL模板，{z}/{x}/{y} 为瓦片坐标占位符
   // url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-  // url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+  url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
-  url: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/model/ylzg/zxyj1119/terra_b3dms/tileset.json',
 
   // 图层类型
   type: 'UrlTemplate',

packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue

@@ -26,13 +26,8 @@
         <div class="situational-awareness__right-map">
           <MapViewer @tool-change="handleMapToolChange" />
         </div>
-      </div>
 
-      <!-- 地图遮罩层 -->
+        <!-- 场景标签层 -->
-      <div class="situational-awareness__map-mask" aria-hidden="true"></div>
-
-      <!-- 场景标签层 - 独立层级，显示在遮罩层之上 -->
-      <div class="situational-awareness__scene-labels-layer">
         <!-- 灾前现场实景标签 - 在中间分割线左侧 -->
         <SceneLabel
           v-if="isCompareMode"
@@ -47,56 +42,25 @@
         />
       </div>
 
+      <!-- 地图遮罩层 -->
+      <div class="situational-awareness__map-mask" aria-hidden="true"></div>
+
       <!-- 浮动面板层 -->
       <div class="situational-awareness__panels-layer">
-        <Transition name="panel-slide-left">
+        <div
-          <div
+          class="situational-awareness__panel-column situational-awareness__panel-column--left"
-            v-show="!isLeftPanelCollapsed"
-            class="situational-awareness__panel-column situational-awareness__panel-column--left"
-          >
-            <LeftPanel @start-dispatch="handleStartDispatch" />
-          </div>
-        </Transition>
-
-        <Transition name="panel-slide-right">
-          <div
-            v-show="!isRightPanelCollapsed"
-            class="situational-awareness__panel-column situational-awareness__panel-column--right"
-          >
-            <RightPanel />
-          </div>
-        </Transition>
-      </div>
-
-      <!-- 折叠按钮层 -->
-      <div class="situational-awareness__collapse-buttons-layer">
-        <!-- 左侧折叠按钮 -->
-        <button
-          class="situational-awareness__collapse-btn situational-awareness__collapse-btn--left"
-          :class="{ 'is-collapsed': isLeftPanelCollapsed }"
-          @click="toggleLeftPanel"
-          :aria-label="isLeftPanelCollapsed ? '展开左侧面板' : '收起左侧面板'"
         >
-          <img
+          <LeftPanel @start-dispatch="handleStartDispatch" />
-            :src="isLeftPanelCollapsed ? collapseRightArrow : collapseLeftArrow"
+        </div>
-            alt=""
+        <div
-            class="collapse-arrow"
+          class="situational-awareness__center-spacer"
-          />
+          aria-hidden="true"
-        </button>
+        ></div>
-
+        <div
-        <!-- 右侧折叠按钮 -->
+          class="situational-awareness__panel-column situational-awareness__panel-column--right"
-        <button
-          class="situational-awareness__collapse-btn situational-awareness__collapse-btn--right"
-          :class="{ 'is-collapsed': isRightPanelCollapsed }"
-          @click="toggleRightPanel"
-          :aria-label="isRightPanelCollapsed ? '展开右侧面板' : '收起右侧面板'"
         >
-          <img
+          <RightPanel />
-            :src="isRightPanelCollapsed ? collapseLeftArrow : collapseRightArrow"
+        </div>
-            alt=""
-            class="collapse-arrow"
-          />
-        </button>
       </div>
 
       <!-- 地图控件层 - 高于遮罩和面板 -->
@@ -182,10 +146,6 @@ import soldierIcon from "./assets/images/SketchPngfbec927027ff9e49207749ebaafd22
 import deviceIcon from "./assets/images/SketchPng860d54f2a31f5f441fc6a88081224f1e98534bf6d5ca1246e420983bdf690380.png";
 import emergencyBaseIcon from "./assets/images/应急基地.png";
 
-// 折叠按钮图标
-import collapseLeftArrow from "./assets/images/折叠面板左箭头.png";
-import collapseRightArrow from "./assets/images/折叠面板右箭头.png";
-
 // 使用灾害数据
 const disasterData = useDisasterData();
 
@@ -236,20 +196,6 @@ const showLoading = ref(false);
 // 范围圈实体
 const rangeCircleEntity = ref(null);
 
-// 面板折叠状态
-const isLeftPanelCollapsed = ref(false);
-const isRightPanelCollapsed = ref(false);
-
-// 切换左侧面板
-const toggleLeftPanel = () => {
-  isLeftPanelCollapsed.value = !isLeftPanelCollapsed.value;
-};
-
-// 切换右侧面板
-const toggleRightPanel = () => {
-  isRightPanelCollapsed.value = !isRightPanelCollapsed.value;
-};
-
 // 3D Tiles加载功能
 const { load3DTileset, waitForTilesetReady } = use3DTiles();
 
@@ -270,48 +216,6 @@ const setupMapClickHandler = (viewer) => {
     if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {
       const entity = pickedObject.id;
 
-      // 过滤掉范围圈实体（通过检查是否是范围圈）
-      if (entity === rangeCircleEntity.value) {
-        console.log('[index.vue] 点击了范围圈，忽略');
-        // 尝试穿透到下面的实体
-        const drillPickedObjects = viewer.scene.drillPick(click.position);
-        let foundMarker = false;
-
-        for (const pickedObj of drillPickedObjects) {
-          if (Cesium.defined(pickedObj.id) && pickedObj.id !== rangeCircleEntity.value) {
-            const markerEntity = pickedObj.id;
-            if (markerEntity.properties) {
-              const type = markerEntity.properties.type?.getValue();
-
-              // 找到标记点，显示 Tooltip
-              if (type === 'soldier') {
-                showMarkerTooltip(viewer, markerEntity, click.position, soldierIcon);
-                foundMarker = true;
-                break;
-              } else if (type === 'device') {
-                showMarkerTooltip(viewer, markerEntity, click.position, deviceIcon);
-                foundMarker = true;
-                break;
-              } else if (type === 'emergencyBase' || type === 'station') {
-                const stationName = markerEntity.properties.name?.getValue() || '';
-                const icon = stationName === '忠县公路交通应急物资储备中心'
-                  ? emergencyCenterIcon
-                  : emergencyBaseIcon;
-                showMarkerTooltip(viewer, markerEntity, click.position, icon);
-                foundMarker = true;
-                break;
-              }
-            }
-          }
-        }
-
-        if (!foundMarker) {
-          hideTooltip();
-          currentTooltipEntity.value = null;
-        }
-        return;
-      }
-
       // 检查实体是否有 properties（标记点才有）
       if (entity.properties) {
         const type = entity.properties.type?.getValue();
@@ -865,11 +769,6 @@ const createOrUpdateRangeCircle = (viewer, radiusKm) => {
     }
   });
 
-  // 禁用范围圈的鼠标交互，让点击可以穿透到下面的标记点
-  if (rangeCircleEntity.value) {
-    rangeCircleEntity.value.allowPicking = false;
-  }
-
   console.log(`[index.vue] 已创建/更新范围圈: ${radiusKm}km`);
 };
 
@@ -1051,9 +950,7 @@ const showMapTooltip = ({ x, y, title = "", icon = "", data = null }) => {
 
       .situational-awareness__left-map {
         width: 0;
-        opacity: 0;
+        visibility: hidden;
-        pointer-events: none;
-        overflow: hidden;
       }
     }
 
@@ -1061,9 +958,8 @@ const showMapTooltip = ({ x, y, title = "", icon = "", data = null }) => {
     &.is-compare-mode {
       .situational-awareness__left-map {
         width: 50%;
-        opacity: 1;
+        visibility: visible;
-        pointer-events: auto;
+        transition: width 0.3s ease;
-        transition: width 0.3s ease, opacity 0.3s ease;
       }
 
       .situational-awareness__right-map {
@@ -1114,46 +1010,28 @@ const showMapTooltip = ({ x, y, title = "", icon = "", data = null }) => {
       no-repeat;
   }
 
-  // 场景标签层 - 显示在遮罩层和面板层之上
+  // 浮动面板层 - grid 与 pointer-events 结合保证中间透明
-  &__scene-labels-layer {
-    position: absolute;
-    inset: 0;
-    z-index: 10;
-    pointer-events: none; // 标签不阻挡交互
-  }
-
-  // 浮动面板层 - 使用绝对定位固定面板位置
   &__panels-layer {
     position: absolute;
     inset: 0;
     z-index: 2;
+    display: grid;
+    grid-template-columns: var(--sa-left-width) 1fr var(--sa-right-width);
+    grid-auto-rows: 1fr;
+    gap: var(--sa-gap); // 列之间的间距
     height: 100%;
+    padding-top: var(--sa-header-height); // 预留 Header 高度
     pointer-events: none; // 容器不拦截事件，让中间区域透明
   }
 
   // 左右面板列 - 浮动卡片样式
   &__panel-column {
-    position: absolute;
-    top: var(--sa-header-height); // 从 header 下方开始
-    bottom: 0;
     display: flex;
     flex-direction: column;
     gap: var(--sa-gap); // 列内子面板之间的间距
     min-width: 0; // 防止在窄容器中溢出
     min-height: 0; // 允许 flex 子元素收缩并启用滚动
     pointer-events: auto; // 恢复面板的交互能力
-
-    // 左侧面板固定在左边
-    &--left {
-      left: 0;
-      width: var(--sa-left-width);
-    }
-
-    // 右侧面板固定在右边
-    &--right {
-      right: 0;
-      width: var(--sa-right-width);
-    }
   }
 
   // 中间占位区域 - 透明且不可交互，点击穿透到地图
@@ -1161,88 +1039,6 @@ const showMapTooltip = ({ x, y, title = "", icon = "", data = null }) => {
     pointer-events: none;
   }
 
-  // 折叠按钮层 - 独立层级，放置在屏幕两侧
-  &__collapse-buttons-layer {
-    position: absolute;
-    inset: 0;
-    z-index: 11; // 高于场景标签层
-    pointer-events: none; // 容器不拦截事件
-    padding-top: var(--sa-header-height); // 预留 Header 高度
-  }
-
-  // 折叠按钮
-  &__collapse-btn {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    pointer-events: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.3s ease;
-    z-index: 11;
-    padding: 0;
-
-    &:hover {
-      opacity: 0.8;
-    }
-
-    &:active {
-      transform: translateY(-50%) scale(0.95);
-    }
-
-    .collapse-arrow {
-      width: vw(30);
-      height: auto;
-      transition: all 0.3s ease;
-    }
-
-    // 左侧按钮 - 固定在屏幕最左侧
-    &--left {
-      left: 0;
-    }
-
-    // 右侧按钮 - 固定在屏幕最右侧
-    &--right {
-      right: 0;
-    }
-  }
-
-  // 面板滑动动画 - 左侧
-  .panel-slide-left-enter-active,
-  .panel-slide-left-leave-active {
-    transition: all 0.3s ease;
-  }
-
-  .panel-slide-left-enter-from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-
-  .panel-slide-left-leave-to {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-
-  // 面板滑动动画 - 右侧
-  .panel-slide-right-enter-active,
-  .panel-slide-right-leave-active {
-    transition: all 0.3s ease;
-  }
-
-  .panel-slide-right-enter-from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-
-  .panel-slide-right-leave-to {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-
   // 地图控件层 - 高于遮罩和面板，用于放置地图控制工具
   &__controls-layer {
     position: absolute;