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

@@ -108,7 +108,7 @@ const emit = defineEmits(['view-plan', 'start-dispatch'])
  */
 const getLevelText = (level) => {
   const item = RESPONSE_LEVELS.find(l => l.value === level)
-  return item ? `${item.label}` : '四级'
+  return item ? `${item.label}` : '三级'
 }
 
 /**

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

@@ -5,7 +5,7 @@
       <!-- 触发器 -->
       <div class="dropdown-trigger" @click="toggleDropdown">
         <span class="trigger-text"
-          >距离灾害点{{ forcePreset.searchRadius - 20 }}km范围内</span
+          >距离灾害点{{ forcePreset.searchRadius }}km范围内</span
         >
         <div class="trigger-icon" :class="{ 'is-open': isDropdownOpen }">
           <img
@@ -63,8 +63,6 @@
         <div class="stat-group">
           <div class="stat-card stat-card--base">
             <span class="stat-label flexBox"
-              @click="handleJump"
-
               >应急基地与预置点
 
               <img
@@ -135,28 +133,14 @@ import { ref, inject } from "vue";
 const { forcePreset } = inject("disasterData");
 const onDistanceChange = inject("onDistanceChange");
 
-const viewer = inject('cesiumViewer')
-const triggerJump = inject('triggerJump')
-// 触发跳动
-const handleJump = () => {
-  console.log('viewer',viewer.value);
-  console.log('triggerJump',triggerJump);
-
-  
-  if (viewer.value && triggerJump) {
-    
-    triggerJump(5, 10) // 触发5秒跳动，高度10像素
-  }
-}
-
 // 下拉框状态
 const isDropdownOpen = ref(false);
 
 // 距离选项
 const distanceOptions = [
   // { value: 10, label: "距离灾害点10km范围内" },
-  { value: 30, label: "距离灾害点10km范围内" },
+  { value: 30, label: "距离灾害点30km范围内" },
-  { value: 50, label: "距离灾害点30km范围内" },
+  { value: 50, label: "距离灾害点50km范围内" },
 ];
 
 /**

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

@@ -18,8 +18,7 @@
         <span
           class="info-source"
           :style="{ color: getSourceColor(info.source) }"
-          >[{{ info.source }}]</span
+        >[{{ info.source }}]</span>
-        >
         <span class="info-content">{{ info.content }}</span>
       </div>
     </div>
@@ -27,61 +26,55 @@
 </template>
 
 <script setup>
-import { inject, ref, computed } from "vue";
+import { inject, ref, computed } from 'vue'
 
-const { collaborationInfo } = inject("disasterData");
+const { collaborationInfo } = inject('disasterData')
 
 // 折叠状态
-const isCollapsed = ref(false);
+const isCollapsed = ref(false)
 
 // 切换折叠状态
 const toggleCollapse = () => {
-  isCollapsed.value = !isCollapsed.value;
+  isCollapsed.value = !isCollapsed.value
-};
+}
 
 // 根据折叠状态显示的信息
 const displayedInfo = computed(() => {
   if (isCollapsed.value && collaborationInfo.value.length > 0) {
     // 折叠时只显示第一条
-    return [collaborationInfo.value[0]];
+    return [collaborationInfo.value[0]]
   }
   // 展开时显示全部
-  return collaborationInfo.value;
+  return collaborationInfo.value
-});
+})
 
 // 根据信息源返回对应的颜色
 const getSourceColor = (source) => {
   const colorMap = {
-    气象预警: "#4A9EFF", // 蓝色
+    '气象预警': '#4A9EFF',      // 蓝色
-    气象部门: "#4A9EFF", // 蓝色
+    '气象部门': '#4A9EFF',      // 蓝色
-    公安部门: "#FF5555", // 红色
+    '公安部门': '#FF5555',      // 红色
-    交警部门: "#FF5555", // 红色
+    '交警部门': '#FF5555',      // 红色
-    应急管理: "#FF5555", // 红色
+    '应急管理': '#FF5555',      // 红色
-    融媒体中心: "#00D68F", // 绿色
+    '融媒体中心': '#00D68F',    // 绿色
-    新闻中心: "#00D68F", // 绿色
+    '新闻中心': '#00D68F',      // 绿色
-    宣传部门: "#00D68F", // 绿色
+    '宣传部门': '#00D68F'       // 绿色
-  };
+  }
 
-  return colorMap[source] || "#4A9EFF"; // 默认蓝色
+  return colorMap[source] || '#4A9EFF' // 默认蓝色
-};
+}
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/mixins.scss" as *;
+@use '@/styles/mixins.scss' as *;
-@use "../../assets/styles/common.scss" as *;
+@use '../../assets/styles/common.scss' as *;
 
 .collaboration-info {
   position: relative;
   margin-top: vh(12);
-  background: url("../../assets/images/信息面板bg.png") no-repeat center center;
+  background: url('../../assets/images/信息面板bg.png') no-repeat center center;
   background-size: 100% 100%;
   padding: 2px;
-  border: 2px solid transparent;
-  &:hover {
-    border: 2px solid rgba(255, 80, 80, 0.6);
-    box-shadow: 0 0 10px rgba(255, 80, 80, 0.6), 0 0 20px rgba(255, 0, 0, 0.4),
-      0 0 35px rgba(255, 0, 0, 0.25);
-  }
 
   &__header {
     position: absolute;
@@ -138,7 +131,7 @@ const getSourceColor = (source) => {
         font-size: fs(13);
         font-family: SourceHanSansCN-Bold, sans-serif;
         font-weight: 700;
-        margin-right: vw(4); // 信息源和内容之间的小间距
+        margin-right: vw(4);  // 信息源和内容之间的小间距
       }
 
       .info-content {

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

@@ -143,14 +143,6 @@ onUnmounted(() => {
   // border-radius: vw(8);
   overflow: hidden;
   transition: all 0.3s ease;
-  border: 2px solid transparent;
-
-  &:hover {
-    border: 2px solid rgba(255, 80, 80, 0.6);
-    box-shadow: 0 0 10px rgba(255, 80, 80, 0.6),
-      0 0 20px rgba(255, 0, 0, 0.4),
-      0 0 35px rgba(255, 0, 0, 0.25);
-  }
 
   // 收起状态：只显示标题栏
   &.is-collapsed {

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

@@ -1,9 +1,9 @@
 <template>
-  <section
+  <section class="collapsible-panel" :class="{ 'collapsible-panel--collapsed': isCollapsed }">
-    class="collapsible-panel"
+    <div
-    :class="{ 'collapsible-panel--collapsed': isCollapsed }"
+      class="collapsible-panel__header"
-  >
+      @click="handleHeaderClick"
-    <div class="collapsible-panel__header" @click="handleHeaderClick">
+    >
       <PanelHeader :title="title" :subtitle="subtitle">
         <template #title-icon>
           <slot name="title-icon" />
@@ -48,20 +48,20 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref } from 'vue'
-import PanelHeader from "./PanelHeader.vue";
+import PanelHeader from './PanelHeader.vue'
-import toggleIcon from "../../assets/images/展开icon.png";
+import toggleIcon from '../../assets/images/展开icon.png'
 
 const props = defineProps({
   /** 面板标题 */
   title: {
     type: String,
-    required: true,
+    required: true
   },
   /** 面板副标题 */
   subtitle: {
     type: String,
-    default: "",
+    default: ''
   },
   /**
    * v-model:collapsed 控制收起状态
@@ -70,98 +70,97 @@ const props = defineProps({
    */
   collapsed: {
     type: Boolean,
-    default: undefined,
+    default: undefined
   },
   /** 是否可收缩 */
   collapsible: {
     type: Boolean,
-    default: true,
+    default: true
   },
   /** 初始是否收起（仅在非受控模式下生效） */
   startCollapsed: {
     type: Boolean,
-    default: false,
+    default: false
-  },
+  }
-});
+})
 
-const emit = defineEmits(["update:collapsed", "toggle", "title-click"]);
+const emit = defineEmits(['update:collapsed', 'toggle', 'title-click'])
 
 // 判断是否受控组件
-const isControlled = computed(() => props.collapsed !== undefined);
+const isControlled = computed(() => props.collapsed !== undefined)
 
 // 内部收起状态
-const internalCollapsed = ref(!!props.startCollapsed);
+const internalCollapsed = ref(!!props.startCollapsed)
 
 // 计算当前收起状态
 const isCollapsed = computed({
   get() {
-    return isControlled.value ? !!props.collapsed : internalCollapsed.value;
+    return isControlled.value ? !!props.collapsed : internalCollapsed.value
   },
   set(value) {
     if (isControlled.value) {
-      emit("update:collapsed", value);
+      emit('update:collapsed', value)
     } else {
-      internalCollapsed.value = value;
+      internalCollapsed.value = value
     }
-    emit("toggle", value);
+    emit('toggle', value)
-  },
+  }
-});
+})
 
 // 处理标题点击事件
 function handleHeaderClick() {
-  emit("title-click");
+  emit('title-click')
 }
 
 // 切换收起/展开
 function toggle() {
-  if (!props.collapsible) return;
+  if (!props.collapsible) return
-  isCollapsed.value = !isCollapsed.value;
+  isCollapsed.value = !isCollapsed.value
 }
 
 // 改进的过渡动画钩子
 function onBeforeEnter(el) {
-  el.style.height = "0";
+  el.style.height = '0'
-  el.style.overflow = "hidden";
+  el.style.overflow = 'hidden'
 }
 
 function onEnter(el) {
   // 使用 requestAnimationFrame 确保动画流畅
   requestAnimationFrame(() => {
-    el.style.height = `${el.scrollHeight}px`;
+    el.style.height = `${el.scrollHeight}px`
-  });
+  })
 }
 
 function onAfterEnter(el) {
-  el.style.height = "";
+  el.style.height = ''
-  el.style.overflow = "";
+  el.style.overflow = ''
 }
 
 function onBeforeLeave(el) {
-  el.style.height = `${el.scrollHeight}px`;
+  el.style.height = `${el.scrollHeight}px`
-  el.style.overflow = "hidden";
+  el.style.overflow = 'hidden'
 }
 
 function onLeave(el) {
   // 强制重排以确保动画触发
-  el.offsetHeight; // eslint-disable-line no-unused-expressions
+  el.offsetHeight // eslint-disable-line no-unused-expressions
-  el.style.height = "0";
+  el.style.height = '0'
 }
 
 function onAfterLeave(el) {
-  el.style.height = "";
+  el.style.height = ''
-  el.style.overflow = "";
+  el.style.overflow = ''
 }
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/mixins.scss" as *;
+@use '@/styles/mixins.scss' as *;
-@use "../../assets/styles/common.scss" as *;
+@use '../../assets/styles/common.scss' as *;
 
 .collapsible-panel {
   display: flex;
   flex-direction: column;
-  margin-bottom: vh(17);
+  margin-bottom: vh(20);
-  border: 2px solid transparent; /* 防止 hover 时抖动 */
 
   &__header {
     position: relative;
@@ -213,24 +212,24 @@ function onAfterLeave(el) {
 
     // 使用伪元素作为背景层，九宫格实现
     &::before {
-      content: "";
+      content: '';
       position: absolute;
       inset: 0;
       border-style: solid;
       border-width: vh(25) vw(30);
-      border-image-source: url("../../assets/images/通用卡片bg.png");
+      border-image-source: url('../../assets/images/通用卡片bg.png');
       border-image-slice: 25 30 25 30 fill;
       border-image-width: vh(25) vw(30);
       border-image-repeat: stretch;
       box-sizing: border-box;
-      pointer-events: none; // 不阻挡鼠标事件
+      pointer-events: none;  // 不阻挡鼠标事件
-      z-index: -1; // 放在内容下方
+      z-index: -1;  // 放在内容下方
     }
   }
 
   &__content {
     position: relative;
-    padding: vh(5) vw(20) vh(5); // 留出空间避免被圆角遮挡
+    padding: vh(5) vw(20) vh(5);  // 留出空间避免被圆角遮挡
     z-index: 1;
 
     // 如果内容需要滚动
@@ -245,14 +244,8 @@ function onAfterLeave(el) {
   &--collapsed {
     .collapsible-panel__body {
       height: 0;
-      border-width: 0; // 折叠时移除 border
+      border-width: 0;  // 折叠时移除 border
     }
   }
 }
-
-.collapsible-panel:hover {
-  border: 2px solid rgba(255, 80, 80, 0.6); /* 柔和的渐变红基色 */
-  box-shadow: 0 0 10px rgba(255, 80, 80, 0.6), 0 0 20px rgba(255, 0, 0, 0.4),
-    0 0 35px rgba(255, 0, 0, 0.25); /* 多层柔光渐变效果 */
-}
 </style>

packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useDisasterData.js

@@ -7,11 +7,11 @@ export function useDisasterData() {
   // 灾害基本信息
   const disasterInfo = ref({
     type: '边坡垮塌',
-    volume: '1220',
+    volume: '10022',
     volumeUnit: 'm³',
-    length: '33',
+    length: '13',
     lengthUnit: 'm',
-    width: '15',
+    width: '5',
     widthUnit: 'm',
     casualties: '0',
     vehicles: '0',
@@ -43,7 +43,7 @@ export function useDisasterData() {
 
   // 力量调度信息
   const forceDispatch = ref({
-    responseLevel: 4, // 四级
+    responseLevel: 3, // 三级
     estimatedClearTime: getCurrentDateTime('24:00'),
     plan: {
       name: '智能应急方案',

packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useDualMapCompare.js

@@ -1,7 +1,6 @@
 import { ref, onUnmounted } from 'vue'
 import * as Cesium from 'cesium'
 import { use3DTiles } from './use3DTiles'
-import { useMapMarkers } from '../composables/useMapMarkers'
 
 /**
  * 双地图对比模式
@@ -30,8 +29,6 @@ export function useDualMapCompare() {
 
   const { load3DTileset } = use3DTiles()
 
-  const { drawCollapseBoundaryLeft } = useMapMarkers()
-
   /**
    * 初始化左侧Viewer（灾前场景）
    * @param {HTMLElement} container - 容器元素
@@ -602,13 +599,6 @@ export function useDualMapCompare() {
         }
 
         await enableCompareMode(rightViewerInstance, options)
-        const leftContainer = document.getElementById('leftCesiumContainer')
-        if (leftContainer) {
-          console.log('[index.vue] 绘制左侧坍塌边界红色虚线...')
-          drawCollapseBoundaryLeft(leftContainer)
-
-          console.log('[index.vue] 左侧坍塌边界红色虚线已添加')
-        }
       } else {
         disableCompareMode()
       }

packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapMarkers.js

@@ -107,12 +107,11 @@ export function useMapMarkers() {
   const resolveBillboardHeightReference = (samplingSucceeded) => {
     // 统一使用 CLAMP_TO_GROUND 让 Cesium 自动贴地
     // 配合禁用的 3D Tiles 动态细化，标记位置会保持稳定
-    // return Cesium.HeightReference.CLAMP_TO_GROUND
+    return Cesium.HeightReference.CLAMP_TO_GROUND
-    return Cesium.HeightReference.RELATIVE_TO_GROUND
   }
 
   /**
-   * 绘制坍塌边界红色实线（右侧地图）
+   * 绘制坍塌边界蓝色实线（右侧地图）
    * 在右侧地图上显示灾后坍塌的边界轮廓
    * @param {Cesium.Viewer} viewer
    * @returns {Cesium.Entity | null} 返回创建的边界线实体
@@ -144,12 +143,12 @@ export function useMapMarkers() {
 
     console.log('[useMapMarkers] 右侧坍塌边界点位数量:', positions.length)
 
-    // 创建红色实线边界
+    // 创建蓝色实线边界
     const boundaryEntity = viewer.entities.add({
       polyline: {
         positions: positions,
         width: 4, // 增加线宽，更明显
-        material: Cesium.Color.fromCssColorString('#FF0000').withAlpha(1.0), // 纯红色实线
+        material: Cesium.Color.fromCssColorString('#1CA1FF').withAlpha(1.0), // 纯蓝色实线
         clampToGround: true,
         classificationType: Cesium.ClassificationType.BOTH, // 同时分类到地形和3D Tiles
         zIndex: 1 // 提高层级
@@ -162,7 +161,7 @@ export function useMapMarkers() {
     })
 
     collapseBoundaryEntity.value = boundaryEntity
-    console.log('[useMapMarkers] 右侧坍塌边界红色实线绘制完成, entityId:', boundaryEntity.id)
+    console.log('[useMapMarkers] 右侧坍塌边界蓝色实线绘制完成, entityId:', boundaryEntity.id)
 
     // 强制渲染场景
     viewer.scene.requestRender()
@@ -216,7 +215,7 @@ export function useMapMarkers() {
         positions: positions,
         width: 4,
         material: new Cesium.PolylineDashMaterialProperty({
-          color: Cesium.Color.fromCssColorString('#FF0000').withAlpha(1.0), // 红色
+          color: Cesium.Color.fromCssColorString('#1CA1FF').withAlpha(1.0), // 蓝色
           dashLength: 16.0, // 虚线段长度
           dashPattern: 255.0 // 虚线模式
         }),
@@ -579,18 +578,19 @@ export function useMapMarkers() {
         },
         properties: isSoldier
           ? {
-            type: 'soldier',
+              type: 'soldier',
-            name: soldierNames[Math.floor(Math.random() * soldierNames.length)],
+              name: soldierNames[Math.floor(Math.random() * soldierNames.length)],
-            department: soldierDepartments[Math.floor(Math.random() * soldierDepartments.length)],
+              department: soldierDepartments[Math.floor(Math.random() * soldierDepartments.length)],
-            location: `目前为止距离现场${locationDistance}公里`
+              location: `目前为止距离现场${locationDistance}公里`
-          }
+            }
           : {
-            type: 'device',
+              type: 'device',
-            name: deviceNames[Math.floor(Math.random() * deviceNames.length)],
+              name: deviceNames[Math.floor(Math.random() * deviceNames.length)],
-            deviceType: deviceTypes[Math.floor(Math.random() * deviceTypes.length)],
+              deviceType: deviceTypes[Math.floor(Math.random() * deviceTypes.length)],
-            location: `目前为止距离现场${locationDistance}公里`
+              location: `目前为止距离现场${locationDistance}公里`
-          }
+            }
       })
+
       entities.push(entity)
     }
 
@@ -849,7 +849,6 @@ export function useMapMarkers() {
         icon = otherEmergencyIcon
         type = 'other'
         levelName = '其他'
-        // return;
       }
 
       console.log(`[useMapMarkers] 添加标记: ${item.gl1Yjllmc}, 级别: ${levelString} (${levelName})`)
@@ -858,7 +857,7 @@ export function useMapMarkers() {
         position: result.position,
         billboard: {
           image: icon,
-          width: 32,
+          width: 29,
           height: 32,
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
           heightReference: resolveBillboardHeightReference(result.samplingSucceeded),
@@ -973,96 +972,6 @@ export function useMapMarkers() {
     }
   }
 
-
-  /**
-* 触发实体像素级跳动动画
-* @param {Cesium.Viewer} viewer
-* @param {number} duration 动画持续时间（秒）
-* @param {number} pixelJumpHeight 像素跳动高度
-*/
-  const triggerJumpAnimation = (viewer, duration = 5, pixelJumpHeight = 30) => {
-    console.log(`[useMapMarkers] 触发像素跳动动画，持续时间 ${duration} 秒，像素高度 ${pixelJumpHeight}`)
-    if (!viewer) {
-      console.warn('[useMapMarkers] triggerJumpAnimation: viewer 为空')
-      return
-    }
-
-    // 收集所有需要动画的实体（包含所有类型）
-    const allEntities = [
-      ...markerEntities.value,
-      ...emergencyResourceEntities.value,
-      ...reserveCenterEntities.value
-    ].filter(e => e.billboard) // 只需要有billboard的实体
-
-    // 存储原始像素偏移量
-    const entitiesData = allEntities.map(entity => ({
-      entity,
-      originalOffset: entity.billboard.pixelOffset
-        ? new Cesium.Cartesian2(
-          entity.billboard.pixelOffset.x,
-          entity.billboard.pixelOffset.y
-        )
-        : new Cesium.Cartesian2(0, 0)
-    }))
-
-    // 动画参数
-    const startTime = Date.now()
-    const jumpDuration = 800 // 单次跳动周期（毫秒）
-    let animationActive = true
-
-    // 定义动画函数
-    const animate = () => {
-      if (!animationActive) return
-
-      const elapsed = Date.now() - startTime
-      const progress = (elapsed % jumpDuration) / jumpDuration
-
-      // 使用正弦波计算当前像素偏移
-      const currentOffset = Math.sin(progress * Math.PI * 2) * pixelJumpHeight
-
-      // 应用像素偏移到所有实体
-      entitiesData.forEach(({ entity, originalOffset }) => {
-        try {
-          entity.billboard.pixelOffset = new Cesium.Cartesian2(
-            originalOffset.x,
-            originalOffset.y - currentOffset // Y轴负方向为上移
-          )
-        } catch (error) {
-          console.warn('[useMapMarkers] 更新实体像素偏移失败:', error)
-        }
-      })
-
-      // 继续动画直到持续时间结束
-      if (elapsed < duration * 1000) {
-        requestAnimationFrame(animate)
-      } else {
-        // 恢复原始像素偏移
-        entitiesData.forEach(({ entity, originalOffset }) => {
-          entity.billboard.pixelOffset = originalOffset
-        })
-        animationActive = false
-        console.log('[useMapMarkers] 像素跳动动画结束')
-      }
-    }
-
-    // 启动动画
-    animate()
-
-    // 提供手动停止方法
-    return () => {
-      if (animationActive) {
-        animationActive = false
-        entitiesData.forEach(({ entity, originalOffset }) => {
-          entity.billboard.pixelOffset = originalOffset
-        })
-        console.log('[useMapMarkers] 像素跳动动画已手动停止')
-      }
-    }
-  }
-
-
-
-
   return {
     collapseAreaEntities,
     markerEntities,
@@ -1087,8 +996,7 @@ export function useMapMarkers() {
     clearEmergencyResourceMarkers,
     addReserveCenterMarkers,
     clearReserveCenterMarkers,
-    getCollapseCenter: calculateCollapseCenter, // 提前获取中心点，不依赖标记初始化
+    getCollapseCenter: calculateCollapseCenter // 提前获取中心点，不依赖标记初始化
-    triggerJumpAnimation,
   }
 }
 

packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useRangeCircle.js

@@ -64,20 +64,6 @@ export function useRangeCircle() {
         outlineWidth: style.outlineWidth,
         heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
       },
-      label: {
-        text: `${radiusKm.toFixed(1) - 20} km`,  // 实际是30 / 50 km 临时修改减少20km 后续调整
-        font: 'bold 24px sans-serif',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.BLACK,
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        verticalOrigin: Cesium.VerticalOrigin.CENTER,
-        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-        pixelOffset: new Cesium.Cartesian2(0, 0),
-        backgroundColor: Cesium.Color.fromCssColorString('#333').withAlpha(0.7),
-        backgroundPadding: new Cesium.Cartesian2(18, 12),
-        showBackground: true
-      }
     })
 
     // 禁用范围圈的鼠标交互，让点击可以穿透到下面的标记点