Merge branch 'dev' of http://222.212.85.86:8222/bdzl2/bxztApp into dev

packages/screen/package.json

@@ -9,17 +9,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.5.18",
-    "vue-router": "^4.6.3",
-    "pinia": "^3.0.3",
-    "element-plus": "^2.11.5",
     "@element-plus/icons-vue": "^2.3.2",
-    "echarts": "^6.0.0",
-    "vue-echarts": "^8.0.1",
-    "cesium": "^1.135.0",
-    "axios": "^1.13.2",
+    "@h5/shared": "workspace:*",
+    "@turf/turf": "^7.3.0",
     "@vueuse/core": "^14.0.0",
-    "@h5/shared": "workspace:*"
+    "axios": "^1.13.2",
+    "cesium": "^1.135.0",
+    "echarts": "^6.0.0",
+    "element-plus": "^2.11.5",
+    "pinia": "^3.0.3",
+    "vue": "^3.5.18",
+    "vue-echarts": "^8.0.1",
+    "vue-router": "^4.6.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",

packages/screen/src/router/index.js

@@ -10,6 +10,9 @@ const routes = [
   {
     path: '/cockpit',
     name: 'Cockpit',
+    meta: {
+      screen: true
+    },
     component: () => import('../views/cockpit/index.vue')
   },
   {

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

@@ -169,14 +169,14 @@ const handleStartDispatch = () => {
 .force-dispatch__level-label {
   font-size: fs(18);
   font-family: SourceHanSansCN-Regular, sans-serif;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--text-white);
 }
 
 .force-dispatch__level-value {
   font-size: fs(18);
   font-family: SourceHanSansCN-Bold, sans-serif;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.95);
+  color: var(--text-white);
 }
 
 /* 智能应急方案按钮 */
@@ -210,7 +210,7 @@ const handleStartDispatch = () => {
   font-size: fs(18);
   font-family: SourceHanSansCN-Medium, sans-serif;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.95);
+  color: var(--text-white);
 }
 
 .force-dispatch__plan-icon {
@@ -254,7 +254,7 @@ const handleStartDispatch = () => {
 .force-dispatch__stat-label {
   font-size: fs(12);
   font-family: SourceHanSansCN-Regular, sans-serif;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--text-white);
 }
 
 .force-dispatch__stat-value {
@@ -272,7 +272,7 @@ const handleStartDispatch = () => {
   font-size: fs(12);
   font-family: SourceHanSansCN-Regular, sans-serif;
   font-weight: 400;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--text-white);
   margin-left: vw(2);
 }
 
@@ -349,14 +349,14 @@ const handleStartDispatch = () => {
   font-size: fs(14);
   font-family: SourceHanSansCN-Medium, sans-serif;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-white);
 }
 
 .force-dispatch__circle-line2 {
   font-size: fs(13);
   font-family: SourceHanSansCN-Regular, sans-serif;
   font-weight: 400;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--text-white);
 }
 
 /* 旋转动画 */
@@ -391,13 +391,13 @@ const handleStartDispatch = () => {
 .force-dispatch__eta-label {
   font-size: fs(11);
   font-family: SourceHanSansCN-Regular, sans-serif;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-white);
 }
 
 .force-dispatch__eta-value {
   font-size: fs(13);
   font-family: SourceHanSansCN-Bold, sans-serif;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.95);
+  color: var(--text-white);
 }
 </style>

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

@@ -106,7 +106,7 @@ const handleBack = () => {
     .logo-section {
       .logo-image {
         width: vw(42);
-        height: vh(30);
+        height: vw(42);
         border-radius: 50%;
       }
     }

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

@@ -1,16 +1,17 @@
 <template>
-  <div class="collaboration-info">
+  <div class="collaboration-info" :class="{ 'is-collapsed': isCollapsed }">
     <div class="collaboration-info__header">
       <img
         src="../../assets/images/SketchPng5d7d0c9a19ebbe31859bb19ed24fd41e757f04c7980ce640abb9c2c693b54728.png"
         alt="info"
         class="header-icon"
+        @click="toggleCollapse"
       />
     </div>
 
     <div class="collaboration-info__list">
       <div
-        v-for="info in collaborationInfo"
+        v-for="(info, index) in displayedInfo"
         :key="info.id"
         class="info-item"
       >
@@ -25,10 +26,28 @@
 </template>
 
 <script setup>
-import { inject } from 'vue'
+import { inject, ref, computed } from 'vue'
 
 const { collaborationInfo } = inject('disasterData')
 
+// 折叠状态
+const isCollapsed = ref(false)
+
+// 切换折叠状态
+const toggleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value
+}
+
+// 根据折叠状态显示的信息
+const displayedInfo = computed(() => {
+  if (isCollapsed.value && collaborationInfo.value.length > 0) {
+    // 折叠时只显示第一条
+    return [collaborationInfo.value[0]]
+  }
+  // 展开时显示全部
+  return collaborationInfo.value
+})
+
 // 根据信息源返回对应的颜色
 const getSourceColor = (source) => {
   const colorMap = {
@@ -42,7 +61,7 @@ const getSourceColor = (source) => {
     '宣传部门': '#00D68F'       // 绿色
   }
 
-  return colorMap[source] || '#4A9EFF' // <EFBFBD><EFBFBD><EFBFBD>认蓝色
+  return colorMap[source] || '#4A9EFF' // 默认蓝色
 }
 </script>
 
@@ -59,13 +78,19 @@ const getSourceColor = (source) => {
 
   &__header {
     position: absolute;
-    top: vh(16);
+    top: 10px;
     right: vw(5);
     z-index: 1;
 
     .header-icon {
       width: vw(20);
       height: vh(20);
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:hover {
+        opacity: 0.8;
+      }
     }
   }
 
@@ -76,6 +101,8 @@ const getSourceColor = (source) => {
     padding: vw(8) vw(16);
     max-height: vh(200);
     overflow-y: auto;
+    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+    opacity: 1;
 
     &::-webkit-scrollbar {
       width: vw(4);
@@ -114,5 +141,27 @@ const getSourceColor = (source) => {
       }
     }
   }
+
+  // 折叠状态
+  &.is-collapsed {
+    .header-icon {
+      transform: rotate(180deg);
+    }
+
+    .collaboration-info__list {
+      max-height: vh(30); // 折叠时只显示一行的高度
+      overflow: hidden;
+
+      .info-item:not(:first-child) {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+    }
+  }
+
+  // 为列表项添加过渡
+  .info-item {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
 }
 </style>

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

@@ -30,18 +30,18 @@ export function use3DTiles() {
 
       const tileset = await Cesium.Cesium3DTileset.fromUrl(url, {
         skipLevelOfDetail: true,
-        baseScreenSpaceError: 100,
+        baseScreenSpaceError: 1024,
         skipScreenSpaceErrorFactor: 16,
         skipLevels: 1,
         immediatelyLoadDesiredLevelOfDetail: false,
         loadSiblings: false,
-        maximumScreenSpaceError: 16.0,  // 进一步增大，最大限度减少瓦片细化（之前是8.0）
-        dynamicScreenSpaceError: false, // 禁用动态屏幕空间误差调整
-        dynamicScreenSpaceErrorDensity: 0, // 禁用密度调整
-        dynamicScreenSpaceErrorFactor: 1, // 禁用动态因子
-        foveatedScreenSpaceError: false, // 禁用视锥细化
-        foveatedConeSize: 0.1, // 减小视锥大小
-        foveatedMinimumScreenSpaceErrorRelaxation: 0 // 禁用放松
+        maximumScreenSpaceError: 2.0,  // 降低到2.0以提高模型精细度（原来是16.0）
+        dynamicScreenSpaceError: true, // 启用动态屏幕空间误差调整
+        dynamicScreenSpaceErrorDensity: 0.00278, // 启用密度调整
+        dynamicScreenSpaceErrorFactor: 4.0, // 动态因子
+        foveatedScreenSpaceError: true, // 启用视锥细化
+        foveatedConeSize: 0.1, // 视锥大小
+        foveatedMinimumScreenSpaceErrorRelaxation: 0.0 // 最小放松
       })
 
       // 将tileset添加到viewer的primitives

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

@@ -132,7 +132,7 @@
       <!-- 加载动画层 - 一键启动后显示 -->
       <div v-if="showLoading" class="situational-awareness__loading-layer">
         <img
-          src="./assets/images/加载gif.gif"
+          src="./assets/images/加载.gif"
           alt="加载中"
           class="situational-awareness__loading-gif"
         />

packages/screen/src/views/cockpit/api/commonHttp.js

@@ -2,7 +2,6 @@ import { request } from '@shared/utils/request'
 
 // 获取业务底图
 export function getBaseMap() {
-    // return [...ddt]
     return request({
         url: '/snow-ops-platform/dataDirectory/queryCatalog',
         method: 'GET',
@@ -14,7 +13,6 @@ export function getBaseMap() {
 
 // 获取业务图
 export function getBusinessMap() {
-    // return [...si]
     return request({
         url: '/snow-ops-platform/dataDirectory/queryCatalog',
         method: 'GET',
@@ -24,6 +22,48 @@ export function getBusinessMap() {
     })
 }
 
+// 获取所有的养护站
+export function getAllYHZList() {
+    return request({
+        url: '/snow-ops-platform/yhz/listByDistrict',
+        method: 'get',
+        params: {
+            qxmc: ''
+        }
+    })
+}
+
+
+export function getYHZDetail(params) {
+    return request({
+        url: '/snow-ops-platform/yhz/getById',
+        method: 'get',
+        params
+    })
+}
+
+// 获得高海拔路段图 high-altitude road
+export function getHighAltitudeRoadMap () {
+    return request({
+        url: '/snow-ops-platform/dataDirectory/queryCatalog',
+        method: 'GET',
+        params: {
+            pcatalog: 'GHBMAP'
+        }
+    })
+}
+
+// 获取天气预警统计
+export function getWeatherWarningStatistics (params) {
+    return request({
+        url: '/snow-ops-platform/weatherWarning/statistics',
+        method: 'GET',
+        params
+    })
+}
+
+
+
 
 
 

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">
@@ -13,8 +14,8 @@
       <!-- 浮动面板层 -->
       <div class="panels-layer">
         <div class="panel-column left-panel">
-          <WeatherWarning />
-          <EmergencyResources />
+          <WeatherWarning ref="weatherWarningRef" />
+          <EmergencyResources @clickEmergencyResource="handleEmergencyResourceClick" />
         </div>
 
         <div class="center-spacer" aria-hidden="true"></div>
@@ -26,17 +27,14 @@
       </div>
 
       <!-- 图例工具栏 -->
-      <LegendToolbar class="legend-toolbar" :legendKeys="legendKeys" @marker-toggle="handleLegendMarkerToggle" />
+      <LegendToolbar class="legend-toolbar" v-model="legendToolActiveItem" :legendKeys="legendKeys"
+        @marker-toggle="handleLegendMarkerToggle" />
 
       <!-- 应急力量详情提示框 -->
-      <EmergencyForceTooltip
-        :visible="emergencyForceInteraction.tooltipVisible.value"
-        :position="emergencyForceInteraction.tooltipPosition.value"
-        :data="emergencyForceInteraction.tooltipData.value"
-        :loading="emergencyForceInteraction.loading.value"
-        :error="emergencyForceInteraction.error.value"
-        @close="emergencyForceInteraction.hideTooltip"
-      />
+      <EmergencyForceTooltip :visible="emergencyForceInteraction.tooltipVisible.value"
+        :position="emergencyForceInteraction.tooltipPosition.value" :data="emergencyForceInteraction.tooltipData.value"
+        :loading="emergencyForceInteraction.loading.value" :error="emergencyForceInteraction.error.value"
+        @close="emergencyForceInteraction.hideTooltip" />
     </div>
   </div>
 </template>
@@ -60,9 +58,11 @@ import LegendToolbar from './LegendToolbar.vue'
 import EmergencyForceTooltip from './EmergencyForceTooltip.vue'
 import emergencyForceMarkerIcon from '../assets/legendTool/应急力量icon定位.png'
 
-onMounted(()=>{
+onMounted(() => {
   // 加载地图业务底图 并 聚焦中心点
   mapBase.loadBaseData()
+
+  weatherWarningRef.value.loadData()
 })
 
 // ==================== 常量定义 ====================
@@ -79,6 +79,9 @@ const EMERGENCY_FORCE_LAYER_ID = 'legend:emergencyForce'
  */
 const EMERGENCY_FORCE_CACHE_TTL = 60 * 1000
 
+// ==================== 组件实例 ====================
+const weatherWarningRef = ref(null)
+
 // ==================== 状态管理 ====================
 
 const mapStore = useMapStore()
@@ -101,7 +104,7 @@ const mapBase = useMapBase(mapStore)
 /**
  * 标记图hook，搭配lengendToolbar使用, 作用是点击某个图例项时，在地图上显示所有该图例的图
  */
-const mapImageMark = useMapImageMark(mapStore)
+const mapImageMarkHook = useMapImageMark(mapStore)
 
 /**
  * 应急力量数据加载状态
@@ -131,8 +134,21 @@ const emergencyForceAbortController = ref(null)
 /**
  * 工具图标列表通过key关联
  * key具体有哪些，请根据LegendToolbar.vue中定义的defaultLegendItems
+ * 后续的ImageMarkData中也需要与这里的key值对应
  */
-const legendKeys = ref(['serviceFacility','riskRoad','blockEvent','weatherAlert','emergencyForce'])
+const legendKeys = ref(['serviceFacility', 'riskRoad', 'blockEvent', 'weatherAlert', 'emergencyForce'])
+
+/**
+ * 过滤标记对象，存放当前需要过滤的关键字
+ */
+const filterMark = ref({
+  serviceFacility: []
+})
+
+/**
+ * 图例项
+ */
+const legendToolActiveItem = ref([])
 
 // ==================== 工具函数 ====================
 
@@ -413,6 +429,48 @@ const renderEmergencyForcePoints = async (entityService, points, markerIcon) =>
 
 // ==================== 事件处理 ====================
 
+/**
+ * 应急资源表格行被点击时触发
+ */
+const handleEmergencyResourceClick = (resource) => {
+  let focusKey = null
+
+  // 根据区县名称，过滤养护站
+  const filterList = filterMark.value.serviceFacility
+  const index = filterList.findIndex((item) => item == resource.qxmc)
+  // 实现第一次点击表示选中，第二次点击表示取消选中
+  if (index > -1) {
+    filterList.splice(index, 1)
+  }
+  else {
+    filterList.push(resource.qxmc)
+    focusKey = resource.qxmc
+  }
+
+  // 当点击了某个区县，需要将养护站的legend也点亮
+  const legendIndex = legendToolActiveItem.value.indexOf('serviceFacility')
+  // 如果过滤列表存在数据，则需要点亮legend
+  if (filterList.length && legendIndex == -1) {
+    legendToolActiveItem.value.push('serviceFacility')
+  }
+  // 如果过滤列表不存在，则需要关闭legend
+  if (!filterList.length && legendIndex > -1) {
+    legendToolActiveItem.value.splice(legendIndex, 1)
+  }
+
+  // 调用图例hook来进行数据的请求与图例的绘制，第一个回调函数是过滤点位，第二个是聚焦点位
+  mapImageMarkHook.filterYHZMark(
+    "serviceFacility",
+    (item) => {
+      return filterList.find((filterItem) => filterItem == item.qxmc)
+    },
+    (item) => {
+      return item.qxmc == focusKey
+    }
+  )
+
+}
+
 /**
  * 处理图例工具栏的标记切换事件
  *
@@ -422,10 +480,19 @@ const renderEmergencyForcePoints = async (entityService, points, markerIcon) =>
  * @param {string} [payload.markerIcon] - 标记图标
  */
 const handleLegendMarkerToggle = async ({ key, active, markerIcon }) => {
+  if (key === 'riskRoad') {
+    mapBase.toggleHighAltitudeRoadMap(active)
+    return
+  }
+
+
   // 只处理应急力量图例项
   if (key !== 'emergencyForce') {
+    if (active == false) {
+      filterMark.value[key] = []
+    }
 
-    mapImageMark.toggleMark({ key, active, markerIcon })
+    mapImageMarkHook.toggleMark({ key, active, markerIcon })
 
     return
   }
@@ -552,6 +619,7 @@ onBeforeUnmount(() => {
   @supports (width: 1cqw) {
     --cq-inline-100: 100cqw;
   }
+
   @supports (height: 1cqh) {
     --cq-block-100: 100cqh;
   }
@@ -568,13 +636,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 宽度）*/
@@ -586,8 +656,10 @@ onBeforeUnmount(() => {
 .cockpit-main {
   position: relative;
   flex: 1;
-  min-height: 0; /* 允许网格在 flex 上下文中收缩 */
-  overflow: hidden; /* 防止内容溢出 */
+  min-height: 0;
+  /* 允许网格在 flex 上下文中收缩 */
+  overflow: hidden;
+  /* 防止内容溢出 */
 }
 
 /* 地图底层 - 填满整个容器 */
@@ -603,7 +675,8 @@ onBeforeUnmount(() => {
   position: absolute;
   inset: 0;
   z-index: 1;
-  pointer-events: none; /* 不阻挡交互 */
+  pointer-events: none;
+  /* 不阻挡交互 */
   background: url(../assets/img/遮罩层.png) no-repeat center/cover;
 }
 
@@ -617,7 +690,8 @@ onBeforeUnmount(() => {
   gap: var(--cockpit-gap);
   height: 100%;
   box-sizing: border-box;
-  pointer-events: none; /* 容器不拦截事件，让中间区域透明 */
+  pointer-events: none;
+  /* 容器不拦截事件，让中间区域透明 */
 }
 
 /* 中间占位区域 - 透明且不可交互，点击穿透到地图 */
@@ -630,10 +704,13 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
   gap: var(--cockpit-gap);
-  min-width: 0; /* 防止在窄容器中溢出 */
-  min-height: 0; /* 允许 flex 子元素收缩并启用滚动 */
+  min-width: 0;
+  /* 防止在窄容器中溢出 */
+  min-height: 0;
+  /* 允许 flex 子元素收缩并启用滚动 */
   padding: 1rem;
-  pointer-events: auto; /* 恢复面板的交互能力 */
+  pointer-events: auto;
+  /* 恢复面板的交互能力 */
 }
 
 /* 图例工具栏 - 居中显示在底部 */
@@ -643,6 +720,7 @@ onBeforeUnmount(() => {
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
-  pointer-events: auto; /* 确保图例可交互 */
+  pointer-events: auto;
+  /* 确保图例可交互 */
 }
 </style>

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

@@ -21,7 +21,7 @@
           :class="{ 'row-alt': index % 2 === 0 }"
         >
           <div class="row-number">{{ index + 1 }}</div>
-          <span class="district-name">{{ resource.qxmc }}</span>
+          <span class="district-name" @click="emit('clickEmergencyResource' , resource)">{{ resource.qxmc }}</span>
           <span class="count green">{{ resource.yhzCount }}</span>
           <span class="count orange">{{ resource.wzCount }}</span>
           <div class="equipment-cell">
@@ -43,7 +43,9 @@
 import { ref, onMounted } from 'vue'
 import { request } from '@shared/utils/request'
 
-const resources = ref([
+const emit = defineEmits(['clickEmergencyResource'])
+
+const testData = [
   {
     id: 1,
     name: '万州区',
@@ -98,7 +100,9 @@ const resources = ref([
     equipmentClass: 'red',
     hasAlert: false
   }
-])
+]
+
+const resources = ref([])
 
 // 请求后端接口 /district/statistics
 const getDistrictStatistics = async () => {
@@ -106,7 +110,6 @@ const getDistrictStatistics = async () => {
     url: '/snow-ops-platform/district/statistics',
     method: 'GET'
   })
-  console.log(res)
   if(res.code === '00000') {
     resources.value = res.data
   } else {
@@ -240,6 +243,7 @@ onMounted(() => {
 
     .district-name {
       text-align: left;
+      cursor: pointer;
     }
 
     .count {

packages/screen/src/views/cockpit/components/ImageMarkTooltip/YHZTooltip.vue

@@ -11,8 +11,32 @@
       </button>
 
       <!-- 内容区域 -->
-      <div class="tooltip-content">
-        <component v-if="hasData" :is="contentMap[data.mapData.layerId]" :data="data" />
+      <div class="tooltip-content" v-if="!loading && detail">
+
+        <div class="info-item">
+          <span class="label">名称:</span>
+          <span class="value">{{ detail.mc }}</span>
+        </div>
+
+        <div class="info-item">
+          <span class="label">所属区县：</span>
+          <span class="value">{{ detail.qxmc }}</span>
+        </div>
+
+        <div class="info-item">
+          <span class="label">应急设备：</span>
+          <span class="value">{{ detail.sbsl }}</span>
+        </div>
+
+        <div class="info-item">
+          <span class="label">应急物资：</span>
+          <span class="value">{{ detail.wzsl }}</span>
+        </div>
+
+        <div class="info-item">
+          <span class="label">应急人员：</span>
+          <span class="value">{{ detail.rysl }}</span>
+        </div>
 
         <!-- 如果没有数据 -->
         <div v-if="!hasData" class="no-data">
@@ -36,11 +60,7 @@
 
 <script setup>
 import { computed, ref } from 'vue'
-import serviceFacility from './serviceFacility.vue'
-import riskRoad from './riskRoad.vue'
-import weatherAlert from './weatherAlert.vue'
-import blockEvent from './blockEvent.vue'
-
+import { getYHZDetail } from '@/views/cockpit/api/commonHttp.js'
 /**
  * 应急力量详情提示框组件
  * 使用 HTML Overlay 方式显示在地图标记点上方
@@ -75,14 +95,6 @@ const props = defineProps({
     default: () => ({})
   },
 
-  /**
-   * 加载状态
-   */
-  loading: {
-    type: Boolean,
-    default: false
-  },
-
   /**
    * 错误信息
    */
@@ -93,16 +105,10 @@ const props = defineProps({
 })
 
 // ==================== State ====================
-const contentMap = ref({
-  // 养护站内容
-  serviceFacility,
-  // 高海拔道路
-  riskRoad,
-  // 阻断事件
-  blockEvent,
-  // 气象预警
-  weatherAlert,
-})
+
+const title = ref('养护站')
+const detail = ref(null)
+const loading = ref(true)
 
 // ==================== Emits ====================
 
@@ -117,22 +123,22 @@ const hasData = computed(() => {
   return !!props.data
 })
 
-const title = computed(() => {
-  if (props.data.mapData.layerId === 'serviceFacility') {
-    return '养护站'
-  }
-  if (props.data.mapData.layerId === 'riskRoad') {
-    return '高海拔路段'
-  }
-  if (props.data.mapData.layerId === 'blockEvent') {
-    return '阻断事件'
-  }
-  if (props.data.mapData.layerId === 'weatherAlert') {
-    return '气象预警'
-  }
-})
-
 // ==================== Methods ====================
+// 这个方法会在index.js中被执行
+const init = () => {
+  getDetail()
+}
+
+const getDetail = async () => {
+  loading.value = true
+  const res = await getYHZDetail({
+    id: props.data.id
+  })
+  if (res.success) {
+    detail.value = res.data
+    loading.value = false
+  }
+}
 
 /**
  * 处理关闭按钮点击
@@ -140,11 +146,22 @@ const title = computed(() => {
 const handleClose = () => {
   emit('close')
 }
+
+defineExpose({
+  init
+})
 </script>
 
 <style scoped lang="scss">
 @use '@/styles/mixins.scss' as *;
 
+.flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+
 .common-tooltip {
   // CSS 变量：控制背景图片尺寸和内边距
   // 注意：修改图片资源时，需要同步更新这些高度值以匹配实际 PNG 尺寸
@@ -161,7 +178,7 @@ const handleClose = () => {
   transform: translate(-50%, calc(-100% - 20px));
 
   min-width: 200px;
-  max-width: 300px;
+  width: 300px;
 
   // 上下 padding 需要容纳顶部和底部图片 + 内容间距
   // 左右 padding 保持一致
@@ -262,25 +279,43 @@ const handleClose = () => {
 
 // 内容区域
 .tooltip-content {
-  padding-right: 1.5rem; // 为关闭按钮留出空间
+  display: grid;
+  grid-template-columns: 1.5fr 1fr;
+  gap: 5px;
+
+  .info-item:first-child {
+    grid-column: 1 / -1;
+  }
+
+  // padding-right: 1.5rem; // 为关闭按钮留出空间
+}
+
+.mb {
+  margin-bottom: 0.5rem
 }
 
 // 信息项
 .info-item {
-  margin-bottom: 0.5rem;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
 
   .label {
+    white-space: nowrap;
     color: rgba(255, 255, 255, 0.7);
     margin-right: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis; 
   }
 
   .value {
-    color: #fff;
+    font-family: SourceHanSansCN, SourceHanSansCN;
     font-weight: 500;
+    font-size: 14px;
+    color: #14FFF6;
+    line-height: 21px;
+    text-align: left;
+    font-style: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis; 
   }
 }
 

packages/screen/src/views/cockpit/components/ImageMarkTooltip/index.js

@@ -1,8 +1,13 @@
 import { createVNode, render } from 'vue'
-import ImageMarkTooltip from './ImageMarkTooltip.vue'
+import serviceFacility from './YHZTooltip.vue'
 
-class ImageMarkTooltipUI {
-  constructor() {
+const UIMap = {
+  serviceFacility
+}
+
+class ImageMarkTooltip {
+  constructor({ key }) {
+    this.key = key
     this.instance = null
     this.container = null
     this.entity = null
@@ -22,8 +27,10 @@ class ImageMarkTooltipUI {
 
     this.entity = options.entity
 
+    const UIInstance = UIMap[this.key]
+
     // 创建 VNode
-    const vnode = createVNode(ImageMarkTooltip, {
+    const vnode = createVNode(UIInstance, {
       visible: true,
       position: options.position || { x: 0, y: 0 },
       data: options.data || {},
@@ -37,6 +44,9 @@ class ImageMarkTooltipUI {
     // 渲染到容器
     render(vnode, this.container)
     this.instance = vnode.component
+    if(this.instance.exposed?.init) {
+      this.instance.exposed.init()
+    }
     return this.instance
   }
 
@@ -68,11 +78,7 @@ class ImageMarkTooltipUI {
   }
 }
 
-// 创建单例实例
-const instance = new ImageMarkTooltipUI()
 
-export const CommonTooltip = instance
-
-export const newImageMarkTooltip = () => {
-  return new ImageMarkTooltipUI()
+export const newImageMarkTooltip = ({ key }) => {
+  return new ImageMarkTooltip({ key })
 }

packages/screen/src/views/cockpit/components/ImageMarkTooltip/riskRoad.vue

@@ -1,5 +1,23 @@
 <template>
     <div class="tool-tip-content">
+
+        <div class="info-item">
+            <span class="label">名称:</span>
+            <span class="value">{{ data.mc }}</span>
+        </div>
+
+        <div class="flex">
+            <div class="info-item">
+                <span class="label">所属区县：</span>
+                <span class="value">{{ data.yjllpz }}</span>
+            </div>
+
+            <div class="info-item">
+                <span class="label">应急设备：</span>
+                <span class="value">{{ data.wz }}</span>
+            </div>
+        </div>
+
     </div>
 </template>
 <script setup>

packages/screen/src/views/cockpit/components/ImageMarkTooltip/serviceFacility.vue

@@ -1,51 +0,0 @@
-<template>
-    <div class="content" v-if="data">
-        <div class="info-item">
-            <span class="label">名称:</span>
-            <span class="value">{{ data.mc }}</span>
-        </div>
-
-        <div class="flex">
-            <div class="info-item">
-                <span class="label">所属区县：</span>
-                <span class="value">{{ data.yjllpz }}</span>
-            </div>
-
-            <div class="info-item">
-                <span class="label">应急物资：</span>
-                <span class="value">{{ data.wz }}</span>
-            </div>
-        </div>
-    </div>
-</template>
-<script setup>
-import { onMounted, ref } from 'vue';
-const props = defineProps({
-    data: {
-        type: Object,
-        default: () => ({})
-    }
-});
-</script>
-<style scoped lang="scss">
-@use '@/styles/mixins.scss' as *;
-
-// 信息项
-.info-item {
-    margin-bottom: 0.5rem;
-
-    &:last-child {
-        margin-bottom: 0;
-    }
-
-    .label {
-        color: rgba(255, 255, 255, 0.7);
-        margin-right: 0.5rem;
-    }
-
-    .value {
-        color: #fff;
-        font-weight: 500;
-    }
-}
-</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>

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

@@ -66,6 +66,7 @@
 
 <script setup>
 import { ref } from 'vue'
+import { getWeatherWarningStatistics } from '@/views/cockpit/api/commonHttp.js'
 
 // 导入图片
 import glowTopIcon from '../assets/img/weather-badge-glow-top.png'
@@ -79,7 +80,8 @@ const warningLevels = ref([
   {
     id: 1,
     name: '蓝色预警',
-    count: 320,
+    key: 'blueWarningCount',
+    count: 0,
     color: 'rgba(132, 199, 255, 1)',
     glowTopIcon: glowTopIcon,
     glowBottomIcon: glowBottomIcon,
@@ -88,7 +90,8 @@ const warningLevels = ref([
   {
     id: 2,
     name: '黄色预警',
-    count: 36,
+    key: 'yellowWarningCount',
+    count: 0,
     color: 'rgba(215, 209, 38, 1)',
     glowTopIcon: glowTopIcon,
     glowBottomIcon: glowBottomIcon,
@@ -97,7 +100,8 @@ const warningLevels = ref([
   {
     id: 3,
     name: '橙色预警',
-    count: 2,
+    key: 'orangeWarningCount',
+    count: 0,
     color: 'rgba(255, 114, 0, 1)',
     glowTopIcon: glowTopIcon,
     glowBottomIcon: glowBottomIcon,
@@ -106,7 +110,8 @@ const warningLevels = ref([
   {
     id: 4,
     name: '红色预警',
-    count: 1,
+    key: 'redWarningCount',
+    count: 0,
     color: 'rgba(255, 32, 0, 1)',
     glowTopIcon: glowTopIcon,
     glowBottomIcon: glowBottomIcon,
@@ -121,6 +126,24 @@ const districts = ref([
   { id: 4, name: '涪陵区', km: 35, warning: '蓝色预警', warningColor: 'rgba(47, 156, 246, 1)' },
   { id: 5, name: '合川区', km: 46, warning: '蓝色预警', warningColor: 'rgba(47, 156, 246, 1)' }
 ])
+
+const loadData = async (areaCode) => { 
+  const param = {
+    areaCode: areaCode || ''
+  }
+  const res = await getWeatherWarningStatistics(param)
+  if(res.success) {
+    for(const item of warningLevels.value) {
+      item.count = res.data[item.key]
+    }
+  }
+
+}
+
+defineExpose({
+  loadData
+})
+
 </script>
 
 <style scoped lang="scss">

packages/screen/src/views/cockpit/composables/ImageMarkData.js

@@ -11,16 +11,19 @@ export default class ImageMarkData {
     cacheData = null
     expiresAt = null
     abortController = null
+    loading = false
     /**
      * 60秒内重复点击使用缓存数据，减少服务器压力
      */
     cacheTime = 60 * 1000
 
-    constructor({ api, tooltip, onResponse }) {
+    constructor({ api, tooltip, markerIcon, onResponse, key }) {
         this.api = api
+        this.key = key
         this.response = onResponse
+        this.markerIcon = markerIcon
         // 初始化提示框
-        this.tooltip = tooltip || newImageMarkTooltip()
+        this.tooltip = tooltip || newImageMarkTooltip({key})
     }
 
     getCache = () => {
@@ -37,7 +40,7 @@ export default class ImageMarkData {
         // 首先查看缓存是否可用
         const cacheData = this.getCache()
         if (cacheData) return cacheData
-
+        this.loading = true
         const controller = this.createAbortController()
         const config = {}
         if (controller) config.signal = controller.signal
@@ -47,6 +50,7 @@ export default class ImageMarkData {
         } catch (error) {
             console.error('请求失败: ', error)
         } finally {
+            this.loading = false
             let data = null
             if (this.response) data = this.response(res)
             else data = this.commonOnResponse(res)
@@ -81,7 +85,6 @@ export default class ImageMarkData {
     // 通用的响应处理
     commonOnResponse = (res) => {
         if (res?.success) {
-            res.data = res.data.slice(0, 2)
             const dataList = res.data.map((item) => {
                 item.mapData = {
                     id: this.key + '-' + item.rid,
@@ -91,7 +94,6 @@ export default class ImageMarkData {
                 }
                 return item
             })
-            this.data = dataList
             return dataList
         }
         return []

packages/screen/src/views/cockpit/composables/useMapBase.js

@@ -1,4 +1,4 @@
-import { getBaseMap, getBusinessMap } from '@/views/cockpit/api/commonHttp.js'
+import { getBaseMap, getBusinessMap, getHighAltitudeRoadMap } from '@/views/cockpit/api/commonHttp.js'
 import * as Cesium from 'cesium'
 
 
@@ -6,6 +6,8 @@ import * as Cesium from 'cesium'
 // 主要是加载地图底图
 export const useMapBase = (mapStore) => {
 
+    let hightAltitudeRoadMapId
+
     // 加载当前业务的底图, 类似于天地图，但是没有使用天地图作为底图，有大的地块的地形纹理，但是缩小范围很小，属于比较粗的图
     const loadBaseMap = async () => {
         const layerService = mapStore.services().layer
@@ -38,22 +40,22 @@ export const useMapBase = (mapStore) => {
     // 处理启动加载的图层
     const collectBootLoadLayers = (nodes, layers = [], parent = null) => {
         nodes.forEach(node => {
-          if (node.Attribute?.servicePath && node.Attribute.bootLoad === 1) {
-            // 确保 bootLoad 图层包含正确的 parentSortIndex
-            const layerWithParentSort = {
-              ...node,
-              parentSortIndex: parent?.Attribute?.sortValue
-            };
-            layers.push(layerWithParentSort);
-          }
-          if (node.Children) {
-            collectBootLoadLayers(node.Children, layers, node);
-          }
+            if (node.Attribute?.servicePath && node.Attribute.bootLoad === 1) {
+                // 确保 bootLoad 图层包含正确的 parentSortIndex
+                const layerWithParentSort = {
+                    ...node,
+                    parentSortIndex: parent?.Attribute?.sortValue
+                };
+                layers.push(layerWithParentSort);
+            }
+            if (node.Children) {
+                collectBootLoadLayers(node.Children, layers, node);
+            }
         });
         return layers;
-      };
+    };
 
-    // 加载业务地图，业务地图主要是高亮当前业务下的地区的区县，边界都会有高亮线条
+    // 加载业务地图，业务地图主要是高亮当前业务下的地区的区县与管线图，边界都会有高亮线条
     const loadBusinessMap = async () => {
         const layerService = mapStore.services().layer
         const res = await getBusinessMap()
@@ -75,6 +77,34 @@ export const useMapBase = (mapStore) => {
         }
     }
 
+    // 加载高海拔底图
+    const toggleHighAltitudeRoadMap = async (flag) => {
+        const layerService = mapStore.services().layer
+
+        if(!flag && hightAltitudeRoadMapId) {
+            layerService.removeLayer(hightAltitudeRoadMapId)
+            return
+        }
+
+
+        const res = await getHighAltitudeRoadMap()
+        const resData = res.data
+        resData[0].Children = resData
+        mapStore.baseMapGroups = resData
+        for (const item of resData) {
+            const layers = mapStore.getBaseMapLayersForGroup(item.Attribute?.rid || item.Rid)
+            for (const layerConfig of layers) {
+                const layer = {
+                    id: layerConfig.id,
+                    type: layerConfig.type,
+                    url: layerConfig.url,
+                    meta: layerConfig.meta,
+                }
+                hightAltitudeRoadMapId = await layerService.addLayer(layer)
+            }
+        }
+    }
+
     const loadBaseData = () => {
         setTimeout(() => {
             loadBaseMap()
@@ -83,6 +113,7 @@ export const useMapBase = (mapStore) => {
     }
 
     return {
-        loadBaseData
+        loadBaseData,
+        toggleHighAltitudeRoadMap
     }
 }

packages/screen/src/views/cockpit/composables/useMapImageMark.js

@@ -1,7 +1,18 @@
 import { fetchEmergencyForceList } from '@/views/cockpit/api/emergencyForce'
+import { getAllYHZList } from '@/views/cockpit/api/commonHttp'
 
 import ImageMarkData from './ImageMarkData'
 import * as Cesium from 'cesium'
+import * as turf from '@turf/turf'
+
+
+import serviceFacilityMarkerIcon from '../assets/legendTool/服务设施icon定位.png'
+import riskRoadMarkerIcon from '../assets/legendTool/风险路段icon定位.png'
+import blockEventMarkerIcon from '../assets/legendTool/阻断事件icon定位.png'
+import emergencyForceMarkerIcon from '../assets/legendTool/应急力量icon定位.png'
+import weatherAlertMarkerIcon from '../assets/legendTool/气象预警icon定位.png'
+import { ElMessage } from 'element-plus'
+
 
 /**
  *  当前业务下的地图服务
@@ -15,16 +26,41 @@ export const useMapImageMark = (mapStore) => {
 
     // 接口服务映射
     const imageMarkMap = {
+        // 养护站 legend
         serviceFacility: new ImageMarkData({
-            api: fetchEmergencyForceList,
-        }),
-        riskRoad: new ImageMarkData({
-            api: fetchEmergencyForceList,
+            key: 'serviceFacility',
+            api: getAllYHZList,
+            markerIcon: serviceFacilityMarkerIcon,
+            onResponse: function (res) {
+                if (res?.success) {
+                    res.data = res.data.filter((item) => {
+                        if (isNaN(item.jd) || isNaN(item.wd)) {
+                            return false
+                        }
+                        return true
+                    })
+                    const dataList = res.data.map((item) => {
+                        item.mapData = {
+                            id: this.key + '-' + item.id,
+                            layerId: this.key,
+                            position: [Number(item.jd), Number(item.wd), 0],
+                            image: this.markerIcon
+                        }
+                        return item
+                    })
+                    return dataList
+                }
+                return []
+            }
         }),
         blockEvent: new ImageMarkData({
+            key: 'blockEvent',
+            markerIcon: blockEventMarkerIcon,
             api: fetchEmergencyForceList,
         }),
         weatherAlert: new ImageMarkData({
+            key: 'weatherAlert',
+            markerIcon: weatherAlertMarkerIcon,
             api: fetchEmergencyForceList,
         })
     }
@@ -59,10 +95,10 @@ export const useMapImageMark = (mapStore) => {
         // 帧渲染函数，也就是显示器的每一帧都会执行
         // 地图拖动与放大的监控，需要更新各个tooltips的位置, 通过消息来通知
         viewer.scene.postRender.addEventListener(() => {
-            for(const key in imageMarkMap) {
+            for (const key in imageMarkMap) {
                 const imageMarkData = imageMarkMap[key]
                 const entity = imageMarkData.tooltip.entity
-                if(!entity) continue
+                if (!entity) continue
                 imageMarkData.tooltip.updatePosition(getScreenPosition(entity))
             }
         })
@@ -99,23 +135,45 @@ export const useMapImageMark = (mapStore) => {
         imageMarkData.tooltip.close()
     }
 
+    /**
+     * 聚焦到图片实例的中心点
+     */
+    const focusOnMarkers = (dataList) => {
+        if (!dataList || dataList.length === 0) return
+        const positions = dataList.map((item) => {
+            return [item.mapData.position[0], item.mapData.position[1]]
+        })
+        const features = turf.points(positions)
+        const center = turf.center(features)
+        const position = center.geometry.coordinates
+        mapStore.viewer.camera.setView({
+            destination: Cesium.Cartesian3.fromDegrees(position[0], position[1], 160000),
+            orientation: {
+                heading: Cesium.Math.toRadians(0), // 方向角
+                pitch: Cesium.Math.toRadians(-90), // 俯仰角（-90 为垂直向下看）
+                roll: 0 // 翻滚角
+            }
+        })
+    }
+
+
     /**
      * 根据图标名称请求后台服务，动态加载图标列表
      */
-    const loadDynamicMark = async ({ key, markerIcon, params }) => {
+    const loadDynamicMark = async ({ key, params }) => {
         const imageMarkData = imageMarkMap[key]
         if (!imageMarkData) return
-        imageMarkData.markerIcon = markerIcon
-        imageMarkData.key = key
+        // 取消上一次请求
+        imageMarkData.cancelRequest()
         const dataList = await imageMarkData.request(params)
-
+        clearLayerEntity(key)
         drawImageEntities(dataList)
     }
 
     /**
      * 显示/隐藏地图标
      */
-    const toggleMark = async ({ key, active, markerIcon, params }) => {
+    const toggleMark = async ({ key, active, params }) => {
         const imageMarkData = imageMarkMap[key]
 
         if (!active) {
@@ -124,7 +182,31 @@ export const useMapImageMark = (mapStore) => {
             return
         }
 
-        loadDynamicMark({ key, markerIcon, params })
+        loadDynamicMark({ key, params })
+    }
+
+    /**
+     * 过滤养护站图标
+     */
+    const filterYHZMark = async (key, filterFn, focusFn) => {
+        const imageMarkData = imageMarkMap[key]
+        if (!imageMarkData) return
+        // 取消上一次请求
+        imageMarkData.cancelRequest()
+        let dataList = await imageMarkData.request()
+        dataList = dataList.filter((item) => {
+            return filterFn(item)
+        })
+        clearLayerEntity(key)
+        // 绘制过滤出来的点
+        drawImageEntities(dataList)
+        // 聚焦聚焦函数过滤出来的点
+        const focusDataList = dataList.filter((item)=>{
+            return focusFn(item)
+        })
+        if(focusDataList) {
+            focusOnMarkers(focusDataList)
+        }
     }
 
     /**
@@ -171,7 +253,8 @@ export const useMapImageMark = (mapStore) => {
     }
 
     return {
-        toggleMark
+        toggleMark,
+        filterYHZMark
     }
 
 }