合并 加载应急统计数据和加载点位数据的接口 一个接口实现两个效果 避免接口的异步问题

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

@@ -95,8 +95,8 @@
           <div class="stat-card stat-card--personnel">
             <span class="stat-label">应急人员</span>
             <div class="stat-value-wrapper">
-              <!-- <span class="stat-value">{{ forcePreset.personnel }}</span> -->
-              <span class="stat-value">{{ distance === 30 ? 47 : 69 }}</span>
+              <span class="stat-value">{{ forcePreset.personnel }}</span>
+              <!-- <span class="stat-value">{{ distance === 30 ? 47 : 69 }}</span> -->
               <span class="stat-unit">人</span>
             </div>
           </div>

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

@@ -6,28 +6,16 @@
     <!-- 主内容区域 -->
     <div class="situational-awareness__main">
       <!-- 地图底层 -->
-      <div
-        class="situational-awareness__map-layer"
-        :class="{ 'is-compare-mode': isCompareMode }"
-      >
+      <div class="situational-awareness__map-layer" :class="{ 'is-compare-mode': isCompareMode }">
         <!-- 左侧地图容器（对比模式下显示灾前场景） -->
-        <div
-          id="leftCesiumContainer"
-          class="situational-awareness__left-map"
-        ></div>
+        <div id="leftCesiumContainer" class="situational-awareness__left-map"></div>
 
         <!-- 中间分割线 -->
-        <div
-          v-if="isCompareMode"
-          class="situational-awareness__center-divider"
-        ></div>
+        <div v-if="isCompareMode" class="situational-awareness__center-divider"></div>
 
         <!-- 右侧地图（主地图 - 灾后场景） -->
         <div class="situational-awareness__right-map">
-          <MapViewer
-            :active-tool-key="activeToolKey"
-            @tool-change="handleMapToolChange"
-          />
+          <MapViewer :active-tool-key="activeToolKey" @tool-change="handleMapToolChange" />
         </div>
       </div>
 
@@ -36,22 +24,12 @@
 
       <!-- 场景标签层 - 独立层级，显示在遮罩层之上 -->
       <div class="situational-awareness__scene-labels-layer">
-        <ActionButton
-          type="primary"
-          v-if="isCompareMode"
-          class="situational-awareness__sync-btn"
-          @click="toggleCameraSync"
-          :text="
-            isCameraSyncEnabled ? '同步灾前灾后实景' : '未同步灾前灾后实景'
-          "
-        >
+        <ActionButton type="primary" v-if="isCompareMode" class="situational-awareness__sync-btn"
+          @click="toggleCameraSync" :text="isCameraSyncEnabled ? '同步灾前灾后实景' : '未同步灾前灾后实景'
+            ">
         </ActionButton>
         <!-- 灾前现场实景标签 - 在中间分割线左侧 -->
-        <SceneLabel
-          v-if="isCompareMode"
-          text="灾前现场实景"
-          position="center-left"
-        />
+        <SceneLabel v-if="isCompareMode" text="灾前现场实景" position="center-left" />
 
         <!-- 灾后现场实景标签 - 在右侧面板左边 -->
         <SceneLabel text="灾后现场实景" position="right-left" />
@@ -60,24 +38,16 @@
       <!-- 浮动面板层 -->
       <div class="situational-awareness__panels-layer">
         <Transition name="panel-slide-left">
-          <div
-            v-show="!isLeftPanelCollapsed"
-            class="situational-awareness__panel-column situational-awareness__panel-column--left"
-          >
-            <LeftPanel
-              @start-dispatch="handleStartDispatch"
-              @view-plan="handleViewPlan"
-              @force-preset-toggle="handleForcePresetToggle"
-              @quick-response-toggle="handleQuickResponseToggle"
-            />
+          <div v-show="!isLeftPanelCollapsed"
+            class="situational-awareness__panel-column situational-awareness__panel-column--left">
+            <LeftPanel @start-dispatch="handleStartDispatch" @view-plan="handleViewPlan"
+              @force-preset-toggle="handleForcePresetToggle" @quick-response-toggle="handleQuickResponseToggle" />
           </div>
         </Transition>
 
         <Transition name="panel-slide-right">
-          <div
-            v-show="!isRightPanelCollapsed"
-            class="situational-awareness__panel-column situational-awareness__panel-column--right"
-          >
+          <div v-show="!isRightPanelCollapsed"
+            class="situational-awareness__panel-column situational-awareness__panel-column--right">
             <RightPanel @quick-disposal-click="handleQuickDisposalClick" />
           </div>
         </Transition>
@@ -86,33 +56,18 @@
       <!-- 折叠按钮层 -->
       <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
-            :src="isLeftPanelCollapsed ? collapseRightArrow : collapseLeftArrow"
-            alt=""
-            class="collapse-arrow"
-          />
+        <button class="situational-awareness__collapse-btn situational-awareness__collapse-btn--left"
+          :class="{ 'is-collapsed': isLeftPanelCollapsed }" @click="toggleLeftPanel"
+          :aria-label="isLeftPanelCollapsed ? '展开左侧面板' : '收起左侧面板'">
+          <img :src="isLeftPanelCollapsed ? collapseRightArrow : collapseLeftArrow" alt="" class="collapse-arrow" />
         </button>
 
         <!-- 右侧折叠按钮 -->
-        <button
-          class="situational-awareness__collapse-btn situational-awareness__collapse-btn--right"
-          :class="{ 'is-collapsed': isRightPanelCollapsed }"
-          @click="toggleRightPanel"
-          :aria-label="isRightPanelCollapsed ? '展开右侧面板' : '收起右侧面板'"
-        >
-          <img
-            :src="
-              isRightPanelCollapsed ? collapseLeftArrow : collapseRightArrow
-            "
-            alt=""
-            class="collapse-arrow"
-          />
+        <button class="situational-awareness__collapse-btn situational-awareness__collapse-btn--right"
+          :class="{ 'is-collapsed': isRightPanelCollapsed }" @click="toggleRightPanel"
+          :aria-label="isRightPanelCollapsed ? '展开右侧面板' : '收起右侧面板'">
+          <img :src="isRightPanelCollapsed ? collapseLeftArrow : collapseRightArrow
+            " alt="" class="collapse-arrow" />
         </button>
       </div>
 
@@ -123,25 +78,13 @@
 
       <!-- 地图 Tooltip 层 - 用于显示地图标记点的轻量级信息提示框 -->
       <div class="situational-awareness__tooltip-layer">
-        <MapTooltip
-          :visible="mapTooltip.visible"
-          :x="mapTooltip.x"
-          :y="mapTooltip.y"
-          :title="mapTooltip.title"
-          :icon="mapTooltip.icon"
-          :z-index="mapTooltip.zIndex"
-          :show-video-icon="mapTooltip.data && mapTooltip.data.supportVideo"
-          :video-icon-src="mediaIcon"
-          @video-icon-click="handleVideoIconClick"
-          @close="handleMapTooltipClose"
-        >
+        <MapTooltip :visible="mapTooltip.visible" :x="mapTooltip.x" :y="mapTooltip.y" :title="mapTooltip.title"
+          :icon="mapTooltip.icon" :z-index="mapTooltip.zIndex"
+          :show-video-icon="mapTooltip.data && mapTooltip.data.supportVideo" :video-icon-src="mediaIcon"
+          @video-icon-click="handleVideoIconClick" @close="handleMapTooltipClose">
           <!-- Tooltip 内容插槽 - 根据实际业务数据渲染 -->
           <template v-if="mapTooltip.data && mapTooltip.data.fields">
-            <div
-              v-for="(field, index) in mapTooltip.data.fields"
-              :key="index"
-              class="tooltip-field-item"
-            >
+            <div v-for="(field, index) in mapTooltip.data.fields" :key="index" class="tooltip-field-item">
               <span class="tooltip-field-label">{{ field.label }}：</span>
               <span class="tooltip-field-value">{{ field.value }}</span>
             </div>
@@ -149,12 +92,8 @@
 
           <!-- 操作按钮插槽 -->
           <template v-if="mapTooltip.data && mapTooltip.data.actions" #actions>
-            <button
-              v-for="(action, index) in mapTooltip.data.actions"
-              :key="index"
-              class="tooltip-action-btn"
-              @click="handleTooltipAction(action)"
-            >
+            <button v-for="(action, index) in mapTooltip.data.actions" :key="index" class="tooltip-action-btn"
+              @click="handleTooltipAction(action)">
               {{ action.label }}
             </button>
           </template>
@@ -163,11 +102,7 @@
 
       <!-- 加载动画层 - 一键启动后显示 -->
       <div v-if="showLoading" class="situational-awareness__loading-layer">
-        <img
-          src="./assets/images/加载3.gif"
-          alt="加载中"
-          class="situational-awareness__loading-gif"
-        />
+        <img src="./assets/images/加载3.gif" alt="加载中" class="situational-awareness__loading-gif" />
         <!-- <img
           src="./assets/images/加载.gif"
           alt="加载中"
@@ -177,50 +112,26 @@
     </div>
 
     <!-- 弹窗组件 -->
-    <PersonnelDetail
-      :visible="showPersonnelDetail"
-      :personnel-data="selectedPersonnel"
-      @close="showPersonnelDetail = false"
-      @link="handlePersonnelLink"
-    />
+    <PersonnelDetail :visible="showPersonnelDetail" :personnel-data="selectedPersonnel"
+      @close="showPersonnelDetail = false" @link="handlePersonnelLink" />
 
-    <EmergencyCenterDetail
-      :visible="showCenterDetail"
-      :center-data="selectedCenter"
-      @close="showCenterDetail = false"
-    />
+    <EmergencyCenterDetail :visible="showCenterDetail" :center-data="selectedCenter"
+      @close="showCenterDetail = false" />
 
     <!-- 视频监控弹窗 -->
-    <VideoModal
-      v-if="showVideoModal"
-      :visible="showVideoModal"
-      :monitor="selectedVideoMonitor"
-      @close="handleVideoModalClose"
-    />
+    <VideoModal v-if="showVideoModal" :visible="showVideoModal" :monitor="selectedVideoMonitor"
+      @close="handleVideoModalClose" />
 
     <!-- 智能应急方案弹窗 -->
-    <StretchableModal
-      :visible="showStretchableModal"
-      title="公路灾害现场处置推荐方案"
-      :close-on-click-modal="true"
-      :close-on-press-escape="true"
-      :show-close="true"
-      @close="showStretchableModal = false"
-      width="clamp(100px, 50vw, 1400px)"
-    >
+    <StretchableModal :visible="showStretchableModal" title="公路灾害现场处置推荐方案" :close-on-click-modal="true"
+      :close-on-press-escape="true" :show-close="true" @close="showStretchableModal = false"
+      width="clamp(100px, 50vw, 1400px)">
       <!-- 使用应急方案内容组件 -->
-      <EmergencyPlanContent
-        :stations="disasterData.forcePreset.value.stations"
-      />
+      <EmergencyPlanContent :stations="disasterData.forcePreset.value.stations" />
 
       <!-- 底部一键启动按钮 -->
       <template #extraButtons>
-        <ActionButton
-          text="响应调度"
-          type="inModal"
-          size="medium"
-          @click="handleModalStartDispatch"
-        />
+        <ActionButton text="响应调度" type="inModal" size="medium" @click="handleModalStartDispatch" />
       </template>
     </StretchableModal>
   </div>
@@ -770,6 +681,9 @@ const handleForcePresetToggle = async () => {
   if (!showMarkersAndRange.value) {
     // 当前隐藏,切换为显示
 
+    // 切换搜索范围为50km
+    disasterData.updateSearchRadius(50);
+
     // 1. 关闭地图对比模式(使用统一助手)
     if (isCompareMode.value) {
       console.log("[index.vue] 快速匹配需要关闭对比模式");
@@ -1034,11 +948,11 @@ const handleDistanceChange = async (newDistance) => {
   // 3. 重新加载应急资源数据并更新地图标记
   // await loadEmergencyResources(DISASTER_CENTER.lon, DISASTER_CENTER.lat)
 
-  // 4. 重新加载储备中心和预置点数据并更新地图标记
-  await loadReserveCentersAndPresets(DISASTER_CENTER.lon, DISASTER_CENTER.lat);
+  // 3. 重新加载储备中心和预置点数据并更新地图标记 并且 重新加载应急统计数据 (新增)
+  await loadReserveCentersAndPresetsAndStatistics(DISASTER_CENTER.lon, DISASTER_CENTER.lat);
 
-  // 5. 重新加载应急统计数据 (新增)
-  await loadEmergencyBaseAndPreset(DISASTER_CENTER.lon, DISASTER_CENTER.lat);
+  // // 5. 重新加载应急统计数据 (新增)
+  // await loadEmergencyBaseAndPreset(DISASTER_CENTER.lon, DISASTER_CENTER.lat);
 };
 
 /**
@@ -1065,7 +979,7 @@ const showAllMarkersAndRange = async () => {
 
   // 2. 加载全部储备中心/预置点到地图（不限制距离）
   console.log("[index.vue] 加载全部储备中心/预置点到地图...");
-  await loadReserveCentersAndPresets(
+  await loadReserveCentersAndPresetsAndStatistics(
     DISASTER_CENTER.lon,
     DISASTER_CENTER.lat,
     true
@@ -1269,12 +1183,12 @@ const loadEmergencyResources = async (longitude, latitude) => {
 };
 
 /**
- * 加载储备中心和预置点数据
+ * 加载储备中心和预置点数据 以及加载应急力量统计数据
  * @param {number} longitude - 经度（可选，不传则查询全部）
  * @param {number} latitude - 纬度（可选，不传则查询全部）
  * @param {boolean} loadAllForMap - 是否加载全部点位到地图（true时不限制距离）
  */
-const loadReserveCentersAndPresets = async (
+const loadReserveCentersAndPresetsAndStatistics = async (
   longitude,
   latitude,
   loadAllForMap = false
@@ -1292,21 +1206,21 @@ const loadReserveCentersAndPresets = async (
     // loadAllForMap 为 true 时，不传任何参数，获取全部数据
 
     const response = await request({
-      url: `/snow-ops-platform/yhYjll/list`,
+      url: `/snow-ops-platform/yhYjll/listWithStatistics`,
       method: "GET",
       params,
     });
 
-    if (response?.data && Array.isArray(response.data)) {
+    if (response?.data && Array.isArray(response.data?.list)) {
       console.log(
         "[index.vue] 储备中心和预置点数据加载成功:",
-        response.data.length,
+        response.data?.list.length,
         "个点位"
       );
 
       // 1. 转换数据为标准 stations 格式
       const transformedStations = disasterData.transformReserveDataToStations(
-        response.data,
+        response.data.list,
         { longitude, latitude }
       );
 
@@ -1320,13 +1234,22 @@ const loadReserveCentersAndPresets = async (
         );
       }
 
-      // 3. 添加地图标记（全部或范围内）
+      // 3.更新应急力量统计列表
+      if (response?.data?.statistics) {
+        // 保存统计数据到状态 (仅更新统计,不更新stations)
+        disasterData.updateForcePreset(response.data.statistics, { onlyStatistics: true });
+        console.log("[index.vue] 应急统计数据加载成功:", response.data.statistics);
+      } else {
+        console.warn("[index.vue] 应急统计数据接口返回数据为空");
+      }
+
+      // 4. 添加地图标记（全部或范围内）
       if (mapStore.viewer) {
         console.log("[index.vue] 添加储备中心和预置点地图标记...");
         clearReserveCenterMarkers(mapStore.viewer);
         await addReserveCenterMarkers(
           mapStore.viewer,
-          response.data,
+          response.data.list,
           {
             heightOffset: 10,
           },
@@ -1354,36 +1277,36 @@ const loadReserveCentersAndPresets = async (
  * 加载应急基地与预置点、应急装备、应急物资、应急人员的统计数量
  * /snow-ops-platform/yhYjll/statistics
  */
-const loadEmergencyBaseAndPreset = async (longitude, latitude) => {
-  try {
-    const response = await request({
-      url: `/snow-ops-platform/yhYjll/statistics`,
-      method: "GET",
-      params: {
-        longitude,
-        latitude,
-        maxDistance: disasterData.forcePreset.value.searchRadius,
-      },
-    });
+// const loadEmergencyBaseAndPreset = async (longitude, latitude) => {
+//   try {
+//     const response = await request({
+//       url: `/snow-ops-platform/yhYjll/statistics`,
+//       method: "GET",
+//       params: {
+//         longitude,
+//         latitude,
+//         maxDistance: disasterData.forcePreset.value.searchRadius,
+//       },
+//     });
 
-    if (response?.data) {
-      // 保存统计数据到状态 (仅更新统计,不更新stations)
-      disasterData.updateForcePreset(response.data, { onlyStatistics: true });
-      console.log("[index.vue] 应急统计数据加载成功:", response.data);
-    } else {
-      console.warn("[index.vue] 应急统计数据接口返回数据为空");
-    }
+//     if (response?.data) {
+//       // 保存统计数据到状态 (仅更新统计,不更新stations)
+//       disasterData.updateForcePreset(response.data, { onlyStatistics: true });
+//       console.log("[index.vue] 应急统计数据加载成功:", response.data);
+//     } else {
+//       console.warn("[index.vue] 应急统计数据接口返回数据为空");
+//     }
 
-    return response;
-  } catch (error) {
-    console.error("[index.vue] 加载应急统计数据失败:", error);
-    ElMessage.warning({
-      message: "应急统计数据加载失败",
-      duration: 3000,
-    });
-    return null;
-  }
-};
+//     return response;
+//   } catch (error) {
+//     console.error("[index.vue] 加载应急统计数据失败:", error);
+//     ElMessage.warning({
+//       message: "应急统计数据加载失败",
+//       duration: 3000,
+//     });
+//     return null;
+//   }
+// };
 
 /**
  * 查询应急装备和应急物资列表 /snow-ops-platform/yhYjll/listMaterials
@@ -1635,13 +1558,13 @@ const initializeScene = async () => {
   hideMarkers();
   console.log("[index.vue] 已隐藏应急资源标记(等待快速匹配激活)");
 
-  // 12. 加载储备中心和预置点数据
+  // 12. 加载储备中心和预置点数据 并且 加载应急统计数据（新增）
   console.log("[index.vue] 加载储备中心和预置点数据...");
-  await loadReserveCentersAndPresets(DISASTER_CENTER.lon, DISASTER_CENTER.lat);
+  await loadReserveCentersAndPresetsAndStatistics(DISASTER_CENTER.lon, DISASTER_CENTER.lat);
 
-  // 13. 加载应急统计数据
-  console.log("[index.vue] 加载应急统计数据...");
-  await loadEmergencyBaseAndPreset(DISASTER_CENTER.lon, DISASTER_CENTER.lat);
+  // // 13. 加载应急统计数据
+  // console.log("[index.vue] 加载应急统计数据...");
+  // await loadEmergencyBaseAndPreset(DISASTER_CENTER.lon, DISASTER_CENTER.lat);
 
   cesiumViewer.value = viewer;
   console.log("[index.vue] 场景初始化完成");
@@ -1748,6 +1671,7 @@ if (token) {
   @supports (width: 1cqw) {
     --cq-inline-100: min(100cqw, 1920px);
   }
+
   @supports (height: 1cqh) {
     --cq-block-100: min(100cqh, 1080px);
   }
@@ -1757,9 +1681,7 @@ if (token) {
   --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(
-    131 / 1080 * var(--cq-block-100, 100vh)
-  ); // Header 高度
+  --sa-header-height: calc(131 / 1080 * var(--cq-block-100, 100vh)); // Header 高度
   --sa-min-width: 1280px;
   --sa-min-height: 720px;
 
@@ -1847,12 +1769,10 @@ if (token) {
     top: 0;
     bottom: 0;
     width: 2px;
-    background: linear-gradient(
-      to bottom,
+    background: linear-gradient(to bottom,
         rgba(255, 255, 255, 0.1),
         rgba(255, 255, 255, 0.5),
-      rgba(255, 255, 255, 0.1)
-    );
+        rgba(255, 255, 255, 0.1));
     z-index: 1;
     pointer-events: none;
   }
@@ -1864,8 +1784,7 @@ if (token) {
     z-index: 1;
     pointer-events: none; // 不阻挡交互
     // 使用 cockpit 的遮罩层图片，保持视觉一致性
-    background: url(@/views/cockpit/assets/img/遮罩层.png) center/cover
-      no-repeat;
+    background: url(@/views/cockpit/assets/img/遮罩层.png) center/cover no-repeat;
   }
 
   // 场景标签层 - 显示在遮罩层和面板层之上
@@ -2091,8 +2010,7 @@ if (token) {
   min-width: vw(100);
   height: vh(36);
   padding: 0 vw(24);
-  background: url("./assets/images/地图tooltip-button.png") no-repeat
-    center/100% 100%;
+  background: url("./assets/images/地图tooltip-button.png") no-repeat center/100% 100%;
   border: none;
   color: var(--text-white);
   font-size: fs(14);