refactor(screen): 更新 3D 态势感知 UI 样式和布局

- 将 CSS 颜色变量移至全局样式，以解决 Vue 作用域样式问题
- 添加背景图片并调整组件布局以改善视觉设计
- 通过基于源的颜色编码增强 CollaborationInfo
- 重新定位 PageHeader 并更新 RightPanel 结构以实现更好的集成
- 对 ForceDispatch、ForcePreset 及其他组件进行微调

packages/screen/src/styles/index.scss

@@ -9,6 +9,23 @@
 :root {
   --cq-inline-100: 100vw;
   --cq-block-100: 100vh;
+
+  /* 3D 态势感知颜色变量 */
+  --primary-color: rgba(28, 161, 255, 1);
+  --primary-light: rgba(28, 161, 255, 0.44);
+  --primary-lighter: rgba(28, 161, 255, 0.2);
+
+  --bg-dark: rgba(9, 22, 40, 1);
+  --bg-panel: rgba(20, 53, 118, 1);
+
+  --text-white: rgba(255, 255, 255, 1);
+  --text-gray: rgba(179, 204, 226, 1);
+
+  --success-color: rgba(17, 187, 119, 1);
+  --warning-color: rgba(255, 128, 11, 1);
+  --danger-color: rgba(255, 6, 36, 1);
+
+  --border-color: rgba(28, 161, 255, 0.3);
 }
 
 * {

packages/screen/src/views/3DSituationalAwarenessRefactor/assets/styles/common.scss

@@ -2,27 +2,13 @@
 
 /**
  * 3D态势感知公共样式
+ *
+ * 注意：CSS 变量（--primary-color, --text-white 等）已定义在全局样式中
+ * 文件位置：/src/styles/index.scss
+ *
+ * 这样可以避免 Vue scoped 样式导致的 :root 变量不生效问题
  */
 
-// 公共颜色变量
-:root {
-  --primary-color: rgba(28, 161, 255, 1);
-  --primary-light: rgba(28, 161, 255, 0.44);
-  --primary-lighter: rgba(28, 161, 255, 0.2);
-
-  --bg-dark: rgba(9, 22, 40, 1);
-  --bg-panel: rgba(20, 53, 118, 1);
-
-  --text-white: rgba(255, 255, 255, 1);
-  --text-gray: rgba(179, 204, 226, 1);
-
-  --success-color: rgba(17, 187, 119, 1);
-  --warning-color: rgba(255, 128, 11, 1);
-  --danger-color: rgba(255, 6, 36, 1);
-
-  --border-color: rgba(28, 161, 255, 0.3);
-}
-
 // 公共面板样式
 .panel {
   display: flex;

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

@@ -46,7 +46,7 @@
       <!-- 中央圆形元素 -->
       <div class="force-dispatch__center">
         <div class="force-dispatch__circle">
-          <div class="force-dispatch__circle-ring"></div>
+          <!-- <div class="force-dispatch__circle-ring"></div> -->
           <div class="force-dispatch__circle-text">
             <div class="force-dispatch__circle-line1">建议</div>
             <div class="force-dispatch__circle-line2">调度力量</div>
@@ -226,9 +226,10 @@ const handleStartDispatch = () => {
 .force-dispatch__middle {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
-  gap: vw(16);
+  gap: vw(18);
   align-items: center;
   padding: vh(12) 0;
+  // background: url('../../assets/images/ForceDispatchBg.png') center top no-repeat;
 }
 
 /* 左右列统一样式 */
@@ -245,6 +246,8 @@ const handleStartDispatch = () => {
   justify-content: space-between;
   align-items: center;
   padding: vh(8) 0;
+  background: url('../../assets/images/文本线条框.png') no-repeat center center;
+  background-size: 100% 100%;
 }
 
 .force-dispatch__stat-label {
@@ -278,11 +281,13 @@ const handleStartDispatch = () => {
   align-items: center;
   justify-content: center;
   position: relative;
+  background: url('../../assets/images/中心.png') no-repeat center center;
+  background-size: contain;
 }
 
 .force-dispatch__circle {
   position: relative;
-  width: vw(120);
+  width: vw(140);
   height: vh(120);
   display: flex;
   align-items: center;
@@ -369,13 +374,17 @@ const handleStartDispatch = () => {
   justify-content: space-between;
   align-items: center;
   gap: vw(16);
-  padding-top: vh(12);
+  // padding-top: vh(12);
 }
 
 .force-dispatch__eta {
   display: flex;
-  flex-direction: column;
+  // flex-direction: column;
+  align-items: center;
   gap: vh(2);
+  background: url('../../assets/images/文本线条框.png') no-repeat center center;
+  background-size: 100% 100%;
+  padding: vh(8) vw(12);
 }
 
 .force-dispatch__eta-label {

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

@@ -42,7 +42,7 @@
             :key="station.id"
             class="station-item"
           >
-            <img src="../../assets/images/路线icon(1).png" alt="station" class="station-icon" />
+            <img src="../../assets/images/路线icon.png" alt="station" class="station-icon" />
             <div class="station-info">
               <span class="station-name">{{ station.name }}</span>
               <span class="station-distance">距离灾害点{{ station.distance }}公里</span>
@@ -118,7 +118,7 @@ const { forcePreset } = inject('disasterData')
       .stat-group {
         display: flex;
         justify-content: center;
-        gap: vw(12);
+        gap: vw(32);
 
         .stat-card {
           // flex: 1;
@@ -127,11 +127,11 @@ const { forcePreset } = inject('disasterData')
           align-items: center;
           justify-content: center;
           gap: vh(8);
-          padding: vh(12) vw(12);
+          padding: vh(12) vw(12) vh(30);
           border-radius: vw(6);
           position: relative;
-          background: url('../../assets/images/完成里程.png') no-repeat center center;
+          background: url('../../assets/images/完成里程.png') no-repeat center bottom;
-          background-size: 100% 100%;
+          // background-size: 100% 100%;
           width: vw(84);
 
           .stat-label {
@@ -180,7 +180,8 @@ const { forcePreset } = inject('disasterData')
           align-items: center;
           gap: vw(12);
           padding: vh(10) vw(12);
-          background: rgba(20, 53, 118, 0.3);
+          // background: rgba(20, 53, 118, 0.3);
+          background: url('../../assets/images/文本线条框.png') no-repeat center center;
           border-radius: vw(6);
 
           .station-icon {

packages/screen/src/views/3DSituationalAwarenessRefactor/components/MapViewer/MapControls.vue

@@ -246,7 +246,7 @@ const handleToolClick = (toolKey) => {
 
   &__icon {
     width: vw(32);
-    height: vh(28);
+    height: vw(32);
     flex-shrink: 0;
     transition: all 0.3s ease;
   }

packages/screen/src/views/3DSituationalAwarenessRefactor/components/PageHeader.vue

@@ -6,23 +6,23 @@
         <span class="back-text">返回驾驶舱</span>
       </button>
 
-      <div class="logo-section">
-        <img src="../assets/images/3ad857a9ed044c12b0e3b4345af6be59_mergeImage.png" alt="logo" class="logo-image" />
-      </div>
     </div>
 
     <div class="page-header__center">
+      <div class="logo-section">
+        <img src="../assets/images/3ad857a9ed044c12b0e3b4345af6be59_mergeImage.png" alt="logo" class="logo-image" />
+      </div>
       <h1 class="page-title">渝路智管-公路安全畅通运行管理</h1>
     </div>
 
-    <div class="page-header__right">
+    <!-- <div class="page-header__right">
       <button class="scene-btn">
         <img src="../assets/images/SketchPng08621fb3b35614299e29352b8d67ad9c2c7dccf7b9c17d042492671e3bbe19f8.png" alt="scene" class="scene-icon" />
         <span class="scene-text">灾后现场实景</span>
       </button>
 
       <img src="../assets/images/SketchPng0c172674e37bf751242a160c7adba8ee18f6f445e351e0cdb28dce03f8ee833e.png" alt="settings" class="settings-icon" />
-    </div>
+    </div> -->
   </header>
 </template>
 
@@ -61,9 +61,10 @@ const handleBack = () => {
       display: flex;
       align-items: center;
       gap: vw(10);
-      padding: vh(12) vw(24);
+      padding: vh(10) vw(24);
-      background: url('../assets/images/SketchPnge54852f2dbf23aeabe7bfd58d2b0fad279041cbf01ce1a8908b70d93846e0a4c.png') 0 -1px no-repeat;
+      margin-top: vh(20);
-      background-size: vw(136) vh(46);
+      background: url('../assets/images/返回按钮.png') 0 -1px no-repeat;
+      background-size: 100% 100%;
       border: none;
       cursor: pointer;
       transition: opacity 0.3s;
@@ -99,7 +100,16 @@ const handleBack = () => {
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
 
+    .logo-section {
+      .logo-image {
+        width: vw(42);
+        height: vh(30);
+        border-radius: 50%;
+      }
+    }
     .page-title {
       background-image: linear-gradient(
         180deg,
@@ -128,7 +138,7 @@ const handleBack = () => {
       display: flex;
       align-items: center;
       gap: vw(6);
-      padding: vh(10) vw(16);
+      padding: vw(5);
       background: rgba(20, 53, 118, 1);
       border: 1px solid var(--border-color);
       border-radius: vw(8);
@@ -141,8 +151,8 @@ const handleBack = () => {
       }
 
       .scene-icon {
-        width: vw(17);
+        width: vw(32);
-        height: vh(22);
+        height: vw(32);
       }
 
       .scene-text {

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

@@ -1,7 +1,11 @@
 <template>
   <div class="collaboration-info">
     <div class="collaboration-info__header">
-      <img src="../../assets/images/SketchPng5d7d0c9a19ebbe31859bb19ed24fd41e757f04c7980ce640abb9c2c693b54728.png" alt="info" class="header-icon" />
+      <img
+        src="../../assets/images/SketchPng5d7d0c9a19ebbe31859bb19ed24fd41e757f04c7980ce640abb9c2c693b54728.png"
+        alt="info"
+        class="header-icon"
+      />
     </div>
 
     <div class="collaboration-info__list">
@@ -10,8 +14,11 @@
         :key="info.id"
         class="info-item"
       >
-        <div class="info-source">[{{ info.source }}]</div>
+        <span
-        <div class="info-content">{{ info.content }}</div>
+          class="info-source"
+          :style="{ color: getSourceColor(info.source) }"
+        >[{{ info.source }}]</span>
+        <span class="info-content">{{ info.content }}</span>
       </div>
     </div>
   </div>
@@ -21,6 +28,22 @@
 import { inject } from 'vue'
 
 const { collaborationInfo } = inject('disasterData')
+
+// 根据信息源返回对应的颜色
+const getSourceColor = (source) => {
+  const colorMap = {
+    '气象预警': '#4A9EFF',      // 蓝色
+    '气象部门': '#4A9EFF',      // 蓝色
+    '公安部门': '#FF5555',      // 红色
+    '交警部门': '#FF5555',      // 红色
+    '应急管理': '#FF5555',      // 红色
+    '融媒体中心': '#00D68F',    // 绿色
+    '新闻中心': '#00D68F',      // 绿色
+    '宣传部门': '#00D68F'       // 绿色
+  }
+
+  return colorMap[source] || '#4A9EFF' // <EFBFBD><EFBFBD><EFBFBD>认蓝色
+}
 </script>
 
 <style scoped lang="scss">
@@ -28,19 +51,21 @@ const { collaborationInfo } = inject('disasterData')
 @use '../../assets/styles/common.scss' as *;
 
 .collaboration-info {
-  padding: vh(16) vw(20);
+  position: relative;
-  margin-top: 0;
+  margin-top: vh(12);
-  background: rgba(20, 53, 118, 0.1);
+  background: url('../../assets/images/信息面板bg.png') no-repeat center center;
-  border-radius: vw(8);
+  background-size: 100% 100%;
+  padding: 2px;
 
   &__header {
-    display: flex;
+    position: absolute;
-    justify-content: flex-end;
+    top: vh(16);
-    margin-bottom: vh(12);
+    right: vw(5);
+    z-index: 1;
 
     .header-icon {
-      width: vw(24);
+      width: vw(20);
-      height: vh(24);
+      height: vh(20);
     }
   }
 
@@ -48,9 +73,9 @@ const { collaborationInfo } = inject('disasterData')
     display: flex;
     flex-direction: column;
     gap: vh(12);
+    padding: vw(8) vw(16);
     max-height: vh(200);
     overflow-y: auto;
-    padding-right: vw(8);
 
     &::-webkit-scrollbar {
       width: vw(4);
@@ -70,25 +95,22 @@ const { collaborationInfo } = inject('disasterData')
     }
 
     .info-item {
-      padding: vh(12) vw(16);
+      // padding: vh(12) vw(16);
-      background: rgba(20, 53, 118, 0.3);
+      // background: rgba(20, 53, 118, 0.3);
-      border-left: vw(3) solid var(--primary-color);
+      // border-radius: vw(4);
-      border-radius: vw(4);
+      // line-height: 1.8;
-      line-height: 1.6;
 
       .info-source {
-        color: var(--warning-color);
         font-size: fs(13);
         font-family: SourceHanSansCN-Bold, sans-serif;
         font-weight: 700;
-        margin-bottom: vh(6);
+        margin-right: vw(4);  // 信息源和内容之间的小间距
       }
 
       .info-content {
         color: var(--text-white);
         font-size: fs(12);
         font-family: SourceHanSansCN-Regular, sans-serif;
-        line-height: 1.8;
       }
     }
   }

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

@@ -75,7 +75,7 @@ const getColumnName = (type) => {
 
     .tab-item {
       flex: 1;
-      padding: vh(10) vw(16);
+      padding: vh(5) vw(16);
       // background: rgba(20, 53, 118, 0.3);
       background: url('../../assets/images/tab未选中.png') no-repeat center center;
       background-size: 100% 100%;
@@ -94,7 +94,6 @@ const getColumnName = (type) => {
         // background: var(--primary-light);
         background: url('../../assets/images/tab选中.png') no-repeat center center;
         background-size: 100% 100%;
-        border-bottom: vw(2) solid var(--primary-color);
       }
 
       &:hover:not(&--active) {

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

@@ -40,6 +40,6 @@ const handleZoom = (monitorId) => {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: vw(12);
-  padding: vh(16) vw(16);
+  // padding: vh(16) vw(16);
 }
 </style>

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

@@ -3,7 +3,7 @@
     <div class="video-monitor-item__header">
       <span class="video-title">{{ monitor.title }}</span>
       <img
-        src="../../assets/images/SketchPng753a456c1847586cb7f369e3b90a8459432a27811a579827ba86f9bb427841b2.png"
+        src="../../assets/images/展开icon.png"
         alt="collapse"
         class="collapse-icon"
       />
@@ -93,8 +93,10 @@ onUnmounted(() => {
 @use '../../assets/styles/common.scss' as *;
 
 .video-monitor-item {
-  background: rgba(20, 53, 118, 0.3);
+  // background: rgba(20, 53, 118, 0.3);
-  border-radius: vw(8);
+  background: url('../../assets/images/视频面板bg.png') no-repeat center center;
+  background-size: cover;
+  // border-radius: vw(8);
   overflow: hidden;
 
   &__header {
@@ -113,14 +115,14 @@ onUnmounted(() => {
     }
 
     .collapse-icon {
-      width: vw(16);
+      width: vw(26);
-      height: vh(16);
+      height: vw(26);
       cursor: pointer;
       transition: transform 0.3s;
 
-      &:hover {
+      // &:hover {
-        transform: rotate(180deg);
+      //   transform: rotate(180deg);
-      }
+      // }
     }
   }
 

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

@@ -4,9 +4,9 @@
       <DispatchCommand />
     </CollapsiblePanel>
 
-    <CollapsiblePanel title="现场监控" subtitle="「实时视频」">
+    <!-- <CollapsiblePanel title="现场监控" subtitle="「实时视频」">
-      <VideoMonitorGrid />
+    </CollapsiblePanel> -->
-    </CollapsiblePanel>
+    <VideoMonitorGrid />
 
     <!-- 如需启用调度建议面板，可取消下面注释 -->
     <!--
@@ -15,9 +15,9 @@
     </CollapsiblePanel>
     -->
 
-    <CollapsiblePanel title="协同信息" subtitle="「多部门联动」">
+    <!-- <CollapsiblePanel title="协同信息" subtitle="「多部门联动」">
-      <CollaborationInfo />
+    </CollapsiblePanel> -->
-    </CollapsiblePanel>
+    <CollaborationInfo />
   </div>
 </template>
 

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

@@ -11,7 +11,7 @@
       </div>
 
       <!-- 地图遮罩层 -->
-      <div class="situational-awareness__map-mask" aria-hidden="true"></div>
+      <!-- <div class="situational-awareness__map-mask" aria-hidden="true"></div> -->
 
       <!-- 浮动面板层 -->
       <div class="situational-awareness__panels-layer">
@@ -160,22 +160,30 @@ const handlePersonnelLink = (personnel) => {
   --sa-right-width: calc(486 / 1920 * var(--cq-inline-100, 100vw));
   --sa-gap: calc(16 / 1920 * var(--cq-inline-100, 100vw));
   --sa-padding: calc(16 / 1920 * var(--cq-inline-100, 100vw));
+  --sa-header-height: calc(121 / 1080 * var(--cq-block-100, 100vh)); // Header 高度
   --sa-min-width: 1280px;
   --sa-min-height: 720px;
 
+  position: relative;
   width: 100%;
   height: 100%;
   min-width: var(--sa-min-width);
   min-height: var(--sa-min-height);
   background-color: var(--bg-dark);
   overflow: auto; // 当宿主尺寸 < 最小尺寸时允许滚动
-  display: flex;
+
-  flex-direction: column;
+  // PageHeader 浮在顶部
+  > :first-child {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+  }
 
   &__main {
-    position: relative;
+    position: absolute;
-    flex: 1;
+    inset: 0; // 铺满整个容器
-    min-height: 0;
     background: url(./assets/images/main-bg.png) center/cover no-repeat;
     overflow: hidden;
   }
@@ -207,7 +215,7 @@ const handlePersonnelLink = (personnel) => {
     grid-auto-rows: 1fr;
     gap: var(--sa-gap); // 列之间的间距
     height: 100%;
-    padding: var(--sa-padding); // 面板与容器边缘的间距
+    padding-top: var(--sa-header-height); // 预留 Header 高度
     pointer-events: none; // 容器不拦截事件，让中间区域透明
   }