feat: 调整冰雪阻断大屏的头部图

packages/screen/src/views/cockpit/components/CockpitLayout.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="cockpit-layout">
     <!-- <PageHeader /> -->
+    <PageHeader />
     <div class="cockpit-main">
       <!-- 地图底层 -->
       <div class="map-layer">
@@ -26,17 +27,14 @@
       </div>
 
       <!-- 图例工具栏 -->
-      <LegendToolbar class="legend-toolbar" v-model="legendToolActiveItem" :legendKeys="legendKeys" @marker-toggle="handleLegendMarkerToggle" />
+      <LegendToolbar class="legend-toolbar" v-model="legendToolActiveItem" :legendKeys="legendKeys"
+        @marker-toggle="handleLegendMarkerToggle" />
 
       <!-- 应急力量详情提示框 -->
-      <EmergencyForceTooltip
+      <EmergencyForceTooltip :visible="emergencyForceInteraction.tooltipVisible.value"
-        :visible="emergencyForceInteraction.tooltipVisible.value"
+        :position="emergencyForceInteraction.tooltipPosition.value" :data="emergencyForceInteraction.tooltipData.value"
-        :position="emergencyForceInteraction.tooltipPosition.value"
+        :loading="emergencyForceInteraction.loading.value" :error="emergencyForceInteraction.error.value"
-        :data="emergencyForceInteraction.tooltipData.value"
+        @close="emergencyForceInteraction.hideTooltip" />
-        :loading="emergencyForceInteraction.loading.value"
-        :error="emergencyForceInteraction.error.value"
-        @close="emergencyForceInteraction.hideTooltip"
-      />
     </div>
   </div>
 </template>
@@ -60,7 +58,7 @@ import LegendToolbar from './LegendToolbar.vue'
 import EmergencyForceTooltip from './EmergencyForceTooltip.vue'
 import emergencyForceMarkerIcon from '../assets/legendTool/应急力量icon定位.png'
 
-onMounted(()=>{
+onMounted(() => {
   // 加载地图业务底图 并 聚焦中心点
   mapBase.loadBaseData()
 
@@ -138,7 +136,7 @@ const emergencyForceAbortController = ref(null)
  * key具体有哪些，请根据LegendToolbar.vue中定义的defaultLegendItems
  * 后续的ImageMarkData中也需要与这里的key值对应
  */
-const legendKeys = ref(['serviceFacility','riskRoad','blockEvent','weatherAlert','emergencyForce'])
+const legendKeys = ref(['serviceFacility', 'riskRoad', 'blockEvent', 'weatherAlert', 'emergencyForce'])
 
 /**
  * 过滤标记对象，存放当前需要过滤的关键字
@@ -439,21 +437,21 @@ const handleEmergencyResourceClick = (resource) => {
   const filterList = filterMark.value.serviceFacility
   const index = filterList.findIndex((item) => item == resource.qxmc)
   // 实现第一次点击表示选中，第二次点击表示取消选中
-  if(index > -1) filterList.splice(index, 1)
+  if (index > -1) filterList.splice(index, 1)
   else filterList.push(resource.qxmc)
 
   // 当点击了某个区县，需要将养护站的legend也点亮
   const legendIndex = legendToolActiveItem.value.indexOf('serviceFacility')
   // 如果过滤列表存在数据，则需要点亮legend
-  if(filterList.length && legendIndex == -1) {
+  if (filterList.length && legendIndex == -1) {
     legendToolActiveItem.value.push('serviceFacility')
   }
   // 如果过滤列表不存在，则需要关闭legend
-  if(!filterList.length && legendIndex > -1) {
+  if (!filterList.length && legendIndex > -1) {
     legendToolActiveItem.value.splice(legendIndex, 1)
   }
 
-  mapImageMarkHook.filterYHZMark("serviceFacility", (item)=>{
+  mapImageMarkHook.filterYHZMark("serviceFacility", (item) => {
     return filterList.find((filterItem) => filterItem == item.qxmc)
   })
 
@@ -468,7 +466,7 @@ const handleEmergencyResourceClick = (resource) => {
  * @param {string} [payload.markerIcon] - 标记图标
  */
 const handleLegendMarkerToggle = async ({ key, active, markerIcon }) => {
-  if(key === 'riskRoad') {
+  if (key === 'riskRoad') {
     mapBase.toggleHighAltitudeRoadMap(active)
     return
   }
@@ -476,7 +474,7 @@ const handleLegendMarkerToggle = async ({ key, active, markerIcon }) => {
 
   // 只处理应急力量图例项
   if (key !== 'emergencyForce') {
-    if(active == false) {
+    if (active == false) {
       filterMark.value[key] = []
     }
 
@@ -607,6 +605,7 @@ onBeforeUnmount(() => {
   @supports (width: 1cqw) {
     --cq-inline-100: 100cqw;
   }
+
   @supports (height: 1cqh) {
     --cq-block-100: 100cqh;
   }
@@ -623,13 +622,15 @@ onBeforeUnmount(() => {
   width: 100%;
   height: 100%;
   min-height: var(--cockpit-min-height);
-  min-width: 0; /* 允许 flex 子元素收缩 */
+  min-width: 0;
+  /* 允许 flex 子元素收缩 */
 
   background: url(../assets/img/cockpit-main-bg.png) no-repeat;
   background-size: cover;
   display: flex;
   flex-direction: column;
-  overflow: auto; /* 当宿主高度 < 最小高度时允许滚动 */
+  overflow: auto;
+  /* 当宿主高度 < 最小高度时允许滚动 */
 }
 
 /* 窄容器嵌入的紧凑布局（<1100px 宽度）*/
@@ -641,8 +642,10 @@ onBeforeUnmount(() => {
 .cockpit-main {
   position: relative;
   flex: 1;
-  min-height: 0; /* 允许网格在 flex 上下文中收缩 */
+  min-height: 0;
-  overflow: hidden; /* 防止内容溢出 */
+  /* 允许网格在 flex 上下文中收缩 */
+  overflow: hidden;
+  /* 防止内容溢出 */
 }
 
 /* 地图底层 - 填满整个容器 */
@@ -658,7 +661,8 @@ onBeforeUnmount(() => {
   position: absolute;
   inset: 0;
   z-index: 1;
-  pointer-events: none; /* 不阻挡交互 */
+  pointer-events: none;
+  /* 不阻挡交互 */
   background: url(../assets/img/遮罩层.png) no-repeat center/cover;
 }
 
@@ -672,7 +676,8 @@ onBeforeUnmount(() => {
   gap: var(--cockpit-gap);
   height: 100%;
   box-sizing: border-box;
-  pointer-events: none; /* 容器不拦截事件，让中间区域透明 */
+  pointer-events: none;
+  /* 容器不拦截事件，让中间区域透明 */
 }
 
 /* 中间占位区域 - 透明且不可交互，点击穿透到地图 */
@@ -685,10 +690,13 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
   gap: var(--cockpit-gap);
-  min-width: 0; /* 防止在窄容器中溢出 */
+  min-width: 0;
-  min-height: 0; /* 允许 flex 子元素收缩并启用滚动 */
+  /* 防止在窄容器中溢出 */
+  min-height: 0;
+  /* 允许 flex 子元素收缩并启用滚动 */
   padding: 1rem;
-  pointer-events: auto; /* 恢复面板的交互能力 */
+  pointer-events: auto;
+  /* 恢复面板的交互能力 */
 }
 
 /* 图例工具栏 - 居中显示在底部 */
@@ -698,6 +706,7 @@ onBeforeUnmount(() => {
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
-  pointer-events: auto; /* 确保图例可交互 */
+  pointer-events: auto;
+  /* 确保图例可交互 */
 }
 </style>

packages/screen/src/views/cockpit/components/PageHeader.vue

@@ -1,8 +1,6 @@
 <template>
   <header class="page-header">
     <div class="header-bg">
-      <h1 class="title">安全保通服务</h1>
-      <button class="app-button">应用</button>
     </div>
   </header>
 </template>
@@ -14,7 +12,7 @@
 @use '@/styles/mixins.scss' as *;
 
 .page-header {
-  height: vh(137);
+  height: vw(111);
   background: url(../assets/img/header-bg.png) no-repeat;
   background-size: 100% 100%;
   display: flex;
@@ -23,15 +21,6 @@
   position: relative;
 }
 
-.header-bg {
-  background-image: url(../assets/img/header-title-bg.png);
-  width: 100%;
-  height: vh(107);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
 
 .title {
   color: rgba(255, 255, 255, 1);
@@ -43,24 +32,4 @@
   text-align: center;
 }
 
-.app-button {
-  position: absolute;
-  right: vw(40);
-  top: 50%;
-  transform: translateY(-50%);
-  width: vw(165);
-  height: vh(44);
-  background: url(../assets/img/header-btn-app-bg.png) no-repeat;
-  background-size: 100% 100%;
-  color: rgba(255, 255, 255, 1);
-  font-size: fs(16);
-  font-family: SourceHanSansCN-Regular, sans-serif;
-  border: none;
-  cursor: pointer;
-  transition: opacity 0.3s;
-
-  &:hover {
-    opacity: 0.8;
-  }
-}
 </style>