桥梁、项目、隧道、应急力量、气象预警、与地图联动功能完成

packages/screen/src/views/RiskWarning/Dialog/mapInfoDialog.vue

@@ -0,0 +1,156 @@
+<template>
+  <base-dialog
+    v-model:visible="props.visible"
+    :title="dialogTitle"
+    :table-data="[]"
+    :table-columns="[]"
+    :table-height="0"
+    :total="0"
+    :current-page="1"
+    :page-size="10"
+    :z-index="1000"
+    :max-width="400"
+    :show-filter="false"
+    :show-pagination="false"
+    @close="handleClose"
+  >
+    <!-- 标题栏下方自定义插槽 -->
+    <template #header>
+      <div class="dialog-content">
+        <div class="info-item" v-for="(item, index) in dialogItems" :key="index">
+          <label class="info-label">{{ item.label }}：</label>
+          <span class="info-value">{{ item.value }}</span>
+        </div>
+      </div>
+    </template>
+  </base-dialog>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from "vue";
+import baseDialog from "../component/baseDialog.vue";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: "project", // project, tunnel, bridge, road
+  },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["update:visible"]);
+
+const handleClose = () => {
+  emit("update:visible", false);
+};
+
+// 根据类型和数据显示不同的标题和内容
+const dialogTitle = computed(() => {
+  const titleMap = {
+    project: "项目信息",
+    tunnel: "隧道信息",
+    bridge: "桥梁信息",
+    road: "路段信息",
+  };
+  return titleMap[props.type] || "详细信息";
+});
+
+const dialogItems = computed(() => {
+  const data = props.data;
+  const type = props.type;
+
+  switch (type) {
+    case "project":
+      return [
+        { label: "项目名称", value: data.NAME || data.name || "-" },
+        { label: "所属区县", value: data.COUNTY || data.county || "-" },
+        { label: "路线编号", value: data.ROUTE_CODE || data.routeCode || "-" },
+        { label: "路线名称", value: data.ROUTE_NAME || data.routeName || "-" },
+        { label: "项目类型", value: data.TYPE || data.type || "-" },
+        { label: "建设状态", value: data.STATUS || data.status || "-" },
+        { label: "开始时间", value: data.START_TIME || data.startTime || "-" },
+        { label: "预计完成", value: data.END_TIME || data.endTime || "-" },
+      ];
+    case "tunnel":
+      return [
+        { label: "隧道名称", value: data.NAME || data.name || data.GL1_SDMC || "-" },
+        { label: "所属区县", value: data.COUNTY || data.county || data.GL1_QXMC || "-" },
+        { label: "路线编号", value: data.ROUTE_CODE || data.routeCode || data.GL1_LXBM || "-" },
+        { label: "路线名称", value: data.ROUTE_NAME || data.routeName || data.GL1_LXMC || "-" },
+        { label: "隧道长度", value: data.LENGTH || data.GL1_SDCD ? `${data.LENGTH || data.GL1_SDCD}(米)` : "-" },
+        { label: "隧道净宽", value: data.WIDTH || data.GL1_SDKD ? `${data.WIDTH || data.GL1_SDKD}(米)` : "-" },
+        { label: "隧道净高", value: data.HEIGHT || data.GL1_SDGD ? `${data.HEIGHT || data.GL1_SDGD}(米)` : "-" },
+        { label: "建成时间", value: data.BUILD_TIME || data.buildTime || data.GL1_JCSJ || "-" },
+        { label: "评定等级", value: data.GRADE || data.grade || data.GL1_PDDJ || "-" },
+      ];
+    case "bridge":
+      return [
+        { label: "桥梁名称", value: data.NAME || data.name || data.GL1_QLMC || "-" },
+        { label: "所属区县", value: data.COUNTY || data.county || data.GL1_QXMC || "-" },
+        { label: "路线编号", value: data.ROUTE_CODE || data.routeCode || data.GL1_LXBM || "-" },
+        { label: "路线名称", value: data.ROUTE_NAME || data.routeName || data.GL1_LXMC || "-" },
+        { label: "桥梁长度", value: data.LENGTH || data.GL1_QLCD ? `${data.LENGTH || data.GL1_QLCD}(米)` : "-" },
+        { label: "桥梁宽度", value: data.WIDTH || data.GL1_QLKD ? `${data.WIDTH || data.GL1_QLKD}(米)` : "-" },
+        { label: "桥梁类型", value: data.TYPE || data.type || data.GL1_QLXZ || "-" },
+        { label: "建成时间", value: data.BUILD_TIME || data.buildTime || data.GL1_JCSJ || "-" },
+        { label: "评定等级", value: data.GRADE || data.grade || data.GL1_PDDJ || "-" },
+      ];
+    case "road":
+      return [
+        { label: "路段名称", value: data.NAME || data.name || data.GL1_LDMC || "-" },
+        { label: "所属区县", value: data.COUNTY || data.county || data.GL1_QXMC || "-" },
+        { label: "路线编号", value: data.ROUTE_CODE || data.routeCode || data.GL1_LXBM || "-" },
+        { label: "路线名称", value: data.ROUTE_NAME || data.routeName || data.GL1_LXMC || "-" },
+        { label: "路段长度", value: data.LENGTH || data.GL1_LDCD ? `${data.LENGTH || data.GL1_LDCD}(公里)` : "-" },
+        { label: "路面类型", value: data.PAVEMENT_TYPE || data.pavementType || data.GL1_LMLX || "-" },
+        { label: "车道数量", value: data.LANE_COUNT || data.laneCount || data.GL1_CDSL || "-" },
+        { label: "设计时速", value: data.SPEED_LIMIT || data.speedLimit ? `${data.SPEED_LIMIT || data.speedLimit}(km/h)` : "-" },
+      ];
+    default:
+      return [
+        { label: "名称", value: data.NAME || data.name || "-" },
+        { label: "所属区县", value: data.COUNTY || data.county || "-" },
+      ];
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@function vw($px) {
+  @return calc($px / 1920 * 100vw);
+}
+
+.dialog-content {
+  padding: vw(10) vw(15);
+  max-height: vw(300);
+  overflow-y: auto;
+
+  .info-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: vw(10);
+    line-height: 1.5;
+
+    .info-label {
+      color: rgba(255, 255, 255, 0.7);
+      font-size: vw(13);
+      min-width: vw(80);
+      flex-shrink: 0;
+    }
+
+    .info-value {
+      color: #fff;
+      font-size: vw(13);
+      flex: 1;
+      word-break: break-all;
+    }
+  }
+}
+</style>

packages/screen/src/views/RiskWarning/Dialog/tunnelInfoDialog.vue

@@ -22,7 +22,7 @@
           <span class="info-value">{{ item.value }}</span>
         </div>
       </div>
-      <div class="dialog-imgs">
+      <!-- <div class="dialog-imgs">
         <img
           class="dialog-img"
           v-for="(img, index) in rescueTeamData.imgs"
@@ -30,7 +30,7 @@
           :src="img"
           alt=""
         />
-      </div>
+      </div> -->
     </template>
   </base-dialog>
 </template>
@@ -47,9 +47,9 @@ const props = defineProps({
   data: {
     type: Object,
     default: () => ({
-      title: "隧道信息",
+      title: "项目信息",
       items: [
-        { label: "隧道名称", value: "蔺市隧道右线" },
+        { label: "项目名称", value: "蔺市隧道右线" },
         { label: "编号", value: "G212线" },
         { label: "所属区县", value: "涪陵" },
         { label: "隧道长度", value: "1782(米)" },

packages/screen/src/views/RiskWarning/bottom.vue

@@ -6,7 +6,7 @@
         :key="index"
         class="nav-item"
         :class="{ active: activeIndex === index }"
-        @click="activeIndex = index"
+        @click="handleClick(index)"
       >
         <div class="nav-icon-box">
           <!-- <i :class="item.icon"></i> -->
@@ -22,6 +22,7 @@
           class="clear-icon"
           src="../../assets/RiskWarning_img/清除icon@2x.png"
           alt=""
+          @click="clearFilters"
         />
         <div class="panel-header">
           <div class="header-title">气象预警监测</div>
@@ -117,7 +118,7 @@ import bridgeIconIcon1 from "../../assets/RiskWarning_img/桥梁icon1@2x.png";
 import roadIconIcon1 from "../../assets/RiskWarning_img/线路路段icon1@2x.png";
 import teamIconIcon1 from "../../assets/RiskWarning_img/队伍icon1@2x.png";
 
-const activeIndex = ref(0);
+const activeIndex = ref(-1);
 
 const menuItems = [
   {
@@ -241,7 +242,24 @@ const cellStyle = () => ({
 const rowClassName = ({ rowIndex }) => {
   return rowIndex % 2 === 0 ? "even-row" : "odd-row";
 };
+const emit = defineEmits(["changeActiveIndex", "clearMapMarkers"]);
+// 点击切换导航项
+const handleClick = (index) => {
+  activeIndex.value = index;
+  emit("changeActiveIndex", index);
+};
 
+// 清除筛选条件
+const clearFilters = () => {
+  filters.value = {
+    red: false,
+    blue: false,
+    orange: false,
+    yellow: false,
+  };
+  // 触发清除地图标记事件
+  emit("clearMapMarkers");
+};
 // 表格自动滚动相关
 const tableRef = ref(null);
 const isScrolling = ref(true);

packages/screen/src/views/RiskWarning/component/ChongqingMap.vue

@@ -16,21 +16,47 @@
       :z-index="zIndex"
       :width="width"
     ></TongnanCenterCardDialog>
+    <tunnelInfoDialog
+      v-model:visible="tunnelDialogVisible"
+      :data="tunnelDialogData"
+    />
+    <mapInfoDialog
+      v-model:visible="mapInfoDialogVisible"
+      :type="mapInfoDialogType"
+      :data="mapInfoDialogData"
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted, watch, defineExpose } from "vue";
 import axios from "axios";
 import { request } from "@/utils/request";
 import TongnanCenterCardDialog from "@/views/RiskWarning/Dialog/tongnanCenterCardDialog.vue";
 
+import projectIcon from "../../../assets/MaMap_img/项目@2x.png";
+import bridgeIcon from "../../../assets/MaMap_img/桥梁icon@2x.png";
+import tunnelIcon from "../../../assets/MaMap_img/蓝色@2x1.png";
+import tunnelLineIcon from "../../../assets/MaMap_img/线路icon定位@2x.png";
+import tunnelIcon2 from "../../../assets/MaMap_img/隧洞icon@2x.png";
+import rescueTeamIcon from "../../../assets/MaMap_img/队伍icon@2x.png";
+
+import tunnelInfoDialog from "../Dialog/tunnelInfoDialog.vue";
+import mapInfoDialog from "../Dialog/mapInfoDialog.vue";
+
 const mapContainer = ref(null);
 const loading = ref(false);
 const error = ref(null);
 let mapInstance = null;
 let geoJsonLayer = null;
 
+const props = defineProps({
+  activeIndex: {
+    type: Number,
+    default: -1,
+  },
+});
+
 // 定义 emits
 const emit = defineEmits(["districtClick"]);
 
@@ -38,6 +64,27 @@ const emit = defineEmits(["districtClick"]);
 const selectedDistrict = ref(null);
 let selectedLayer = null;
 
+// 隧道信息弹窗
+const tunnelDialogVisible = ref(false);
+const tunnelDialogData = ref({});
+
+// 地图信息弹窗
+const mapInfoDialogVisible = ref(false);
+const mapInfoDialogType = ref("project");
+const mapInfoDialogData = ref({});
+
+// 打开地图信息弹窗
+const openMapInfoDialog = (type, data) => {
+  mapInfoDialogType.value = type;
+  mapInfoDialogData.value = data;
+  mapInfoDialogVisible.value = true;
+};
+
+// 打开隧道信息弹窗（兼容旧代码）
+const openTunnelDialog = (data) => {
+  openMapInfoDialog("tunnel", data);
+};
+
 // 受影响对象数据
 const affectedCountyData = ref({
   byName: {},
@@ -68,6 +115,265 @@ const getAffectedCountyData = async () => {
   }
 };
 
+const affectedBridgeData = ref([]);
+// 获取受影响桥梁数据
+const getAffectedBridgeData = async () => {
+  try {
+    const res = await request({
+      url: "snow-ops-platform/weather-warning/affected-object/bridge",
+      method: "GET",
+      params: {
+        start: "2025-03-03 12:33:00",
+        end: "2025-07-30 12:33:00",
+      },
+    });
+    if (res.code === "00000" && res.data) {
+      res.data.forEach((item) => {
+        item.COORDINATE_POINT = [item.GL1_QLJD, item.GL1_QLWD];
+      });
+    }
+    affectedBridgeData.value = res.data;
+
+    addProjectMarkers(res.data, bridgeIcon, "bridge");
+  } catch (error) {
+    console.error("获取受影响桥梁数据失败:", error);
+    return [];
+  }
+};
+
+const affectedTunnelData = ref([]);
+
+const tunnelInfoDialogRef = ref(null);
+// 获取受影响隧道数据
+const getAffectedTunnelData = async () => {
+  try {
+    const res = await request({
+      url: "snow-ops-platform/weather-warning/affected-object/tunnel",
+      method: "GET",
+      params: {
+        start: "2025-03-03 12:33:00",
+        end: "2025-07-30 12:33:00",
+      },
+    });
+    console.log("受影响隧道数据:", res);
+    if (res.code === "00000" && res.data) {
+      res.data.forEach((item) => {
+        item.COORDINATE_POINT = [
+          Number(item.GL1_SDJD2),
+          Number(item.GL1_SDWD2),
+        ];
+      });
+      tunnelInfoDialogRef.value = res.data;
+      console.log("受影响隧道数据:", res.data);
+
+      addProjectMarkers(res.data, tunnelIcon2, "tunnel");
+    }
+    return [];
+  } catch (error) {
+    console.error("获取受影响隧道数据失败:", error);
+    return [];
+  }
+};
+
+const affectedProjectData = ref([]);
+
+// 获取受影响项目数据
+const getAffectedProjectData = async () => {
+  try {
+    const res = await request({
+      url: "snow-ops-platform/weather-warning/affected-object/project",
+      method: "GET",
+      params: {
+        start: "2025-03-03 12:33:00",
+        end: "2025-07-30 12:33:00",
+      },
+    });
+    console.log("受影响项目数据:", res);
+    if (res.code === "00000" && res.data) {
+      console.log("项目数据条数:", res.data.length);
+      // 解析坐标数据
+      const parsedData = res.data.map((item) => {
+        const newItem = { ...item };
+        if (item.COORDINATE_POINT) {
+          console.log("原始坐标:", item.COORDINATE_POINT);
+          newItem.COORDINATE_POINT = item.COORDINATE_POINT.substring(
+            6,
+            item.COORDINATE_POINT.length - 1,
+          )
+            .split(" ")
+            .reverse();
+          console.log("解析后坐标:", newItem.COORDINATE_POINT);
+        }
+        return newItem;
+      });
+      affectedProjectData.value = parsedData;
+      // 在地图上添加项目标记
+      console.log("开始添加项目标记...");
+      addProjectMarkers(parsedData, projectIcon, "project");
+    } else {
+      console.warn("没有获取到项目数据或返回码错误:", res);
+    }
+    return res.data || [];
+  } catch (error) {
+    console.error("获取受影响项目数据失败:", error);
+    return [];
+  }
+};
+
+const affectedRoadSectionData = ref([]);
+// 获取受影响路段数据
+const getAffectedRoadSectionData = async () => {
+  try {
+    const res = await request({
+      url: "snow-ops-platform/weather-warning/affected-object/road-section",
+      method: "GET",
+      params: {
+        start: "2025-03-03 12:33:00",
+        end: "2025-07-30 12:33:00",
+      },
+    });
+    console.log("受影响路段数据:", res);
+    if (res.code === "00000" && res.data) {
+      res.data.forEach((item) => {
+        item.COORDINATE_POINT = JSON.parse(item.STARTPOINT);
+      });
+      affectedRoadSectionData.value = res.data;
+      // 在地图上添加项目标记
+      console.log("开始添加项目标记...");
+
+      addProjectMarkers(affectedRoadSectionData.value, tunnelLineIcon, "road");
+    }
+    return [];
+  } catch (error) {
+    console.error("获取受影响路段数据失败:", error);
+    return [];
+  }
+};
+
+const emergencyForceData = ref([]);
+// 获取应急力量数据
+const getEmergencyForceData = async () => {
+  try {
+    const res = await request({
+      url: "/snow-ops-platform/yhYjll/list",
+      method: "GET",
+      params: {
+        start: "2025-03-03 12:33:00",
+        end: "2025-07-30 12:33:00",
+      },
+    });
+    console.log("应急力量数据:", res);
+    if (
+      res.code === "00000" &&
+      res.data 
+    ) {
+      // 解析坐标数据
+      const parsedData = res.data.map((item) => {
+        const newItem = { ...item };
+        newItem.COORDINATE_POINT = [item.gl1Lng, item.gl1Lat];
+        console.log("解析后坐标:", newItem.COORDINATE_POINT);
+        return newItem;
+      });
+      emergencyForceData.value = parsedData;
+
+      // 在地图上添加应急力量标记
+      console.log("开始添加应急力量标记...", parsedData);
+      addProjectMarkers(parsedData, tunnelIcon, "tunnel");
+    } else {
+      console.warn("没有获取到应急力量数据或返回码错误:", res);
+    }
+    return res.data || [];
+  } catch (error) {
+    console.error("获取应急力量数据失败:", error);
+    return [];
+  }
+};
+
+let projectMarkers = []; // 存储项目标记
+
+// 清除项目标记
+const clearProjectMarkers = () => {
+  projectMarkers.forEach((marker) => {
+    if (mapInstance) {
+      mapInstance.removeLayer(marker);
+    }
+  });
+  projectMarkers = [];
+};
+
+// 在地图上添加项目标记
+const addProjectMarkers = (data, iconUrl, type = "project") => {
+  console.log(
+    "addProjectMarkers 被调用, mapInstance:",
+    !!mapInstance,
+    "数据条数:",
+    data?.length,
+    "类型:",
+    type,
+  );
+  if (!mapInstance) {
+    console.warn("mapInstance 未初始化，无法添加标记");
+    return;
+  }
+  if (!data || data.length === 0) {
+    console.warn("没有数据，无法添加标记");
+    return;
+  }
+
+  // // 清除之前的标记
+  // clearProjectMarkers();
+
+  // 创建自定义图标
+  const projectIconObj = window.L.icon({
+    iconUrl: iconUrl,
+    iconSize: [30, 30],
+    iconAnchor: [10, 10],
+    popupAnchor: [0, -10],
+  });
+
+  // 遍历数据添加标记
+  data.forEach((item) => {
+    if (item.COORDINATE_POINT && item.COORDINATE_POINT.length === 2) {
+      // COORDINATE_POINT 格式: [经度, 纬度]
+      // Leaflet 需要: [纬度, 经度]
+      const lng = item.COORDINATE_POINT[0];
+      const lat = item.COORDINATE_POINT[1];
+
+      const latNum = parseFloat(lat);
+      const lngNum = parseFloat(lng);
+
+      console.log(
+        "项目坐标:",
+        item.NAME || item.name,
+        "纬度:",
+        latNum,
+        "经度:",
+        lngNum,
+      );
+
+      if (!isNaN(latNum) && !isNaN(lngNum)) {
+        const marker = window.L.marker([latNum, lngNum], {
+          icon: projectIconObj,
+        });
+
+        // 点击 marker 打开对应类型的信息弹窗
+        marker.on("click", () => {
+          openMapInfoDialog(type, item);
+        });
+
+        marker.addTo(mapInstance);
+        projectMarkers.push(marker);
+      } else {
+        console.warn("无效的坐标:", item.COORDINATE_POINT, item);
+      }
+    } else {
+      console.warn("缺少坐标数据:", item);
+    }
+  });
+
+  console.log(`已添加 ${projectMarkers.length} 个项目标记`);
+};
+
 // 确定主要预警颜色（出现最多的预警等级）
 const getMainWarningColor = (levels) => {
   if (!levels || Object.keys(levels).length === 0) return "#1890ff"; // 默认蓝色
@@ -97,18 +403,6 @@ const getMainWarningColor = (levels) => {
   }
 };
 
-// 根据预警等级获取颜色
-const getColorByLevel = (level) => {
-  const colorMap = {
-    红色预警: "#FF4D4F",
-    橙色预警: "#EC7345",
-    黄色预警: "#FBC23C",
-    蓝色预警: "#3799FC",
-    未知: "#1890ff",
-  };
-  return colorMap[level] || "#1890ff";
-};
-
 // 统计各区县的预警数量（按预警等级区分）
 const countWarningsByCounty = (data) => {
   if (!data || !Array.isArray(data)) return {};
@@ -326,7 +620,17 @@ const simplifyDistrictName = (name) => {
   };
   return nameMap[name] || name;
 };
-
+// 根据预警等级获取颜色
+const getColorByLevel = (level) => {
+  const colorMap = {
+    红色预警: "#FF4D4F",
+    橙色预警: "#EC7345",
+    黄色预警: "#705D42",
+    蓝色预警: "#3799FC",
+    未知: "#1890ff",
+  };
+  return colorMap[level] || "#1890ff";
+};
 // 初始化地图
 const initMap = (geoJsonData) => {
   if (!mapContainer.value) return;
@@ -362,7 +666,8 @@ const initMap = (geoJsonData) => {
     // 添加 GeoJSON 图层
     geoJsonLayer = new window.L.GeoJSON(geoJsonData, {
       style: (feature) => {
-        const districtName = feature.properties.name;
+        // const districtName = feature.properties.name;
+        const districtName = simplifyDistrictName(feature.properties.name);
         let fillColor = "#132C44"; // 默认
         // 如果有预警统计数据，应用主要预警颜色
         if (
@@ -378,9 +683,9 @@ const initMap = (geoJsonData) => {
         return {
           fillColor: fillColor,
           weight: 1.5,
-          opacity: 0.6,
+          opacity: 0.5,
           color: "#40a9ff",
-          fillOpacity: 1,
+          fillOpacity: 0.5,
         };
       },
       onEachFeature: (feature, layer) => {
@@ -513,6 +818,31 @@ const initMap = (geoJsonData) => {
   }
 };
 
+// 监听 activeIndex 变化
+watch(
+  () => props.activeIndex,
+  async (newVal) => {
+    console.log("activeIndex 变化:", newVal);
+    switch (newVal) {
+      case 0:
+        await getAffectedProjectData();
+        break;
+      case 1:
+        await getAffectedTunnelData();
+        break;
+      case 3:
+        await getAffectedBridgeData();
+        break;
+      case 4:
+        await getAffectedRoadSectionData();
+        break;
+      default:
+        break;
+    }
+  },
+  { immediate: false },
+);
+
 // 组件挂载时加载地图
 onMounted(() => {
   // 获取受影响对象数据
@@ -546,6 +876,12 @@ onUnmounted(() => {
     mapInstance = null;
   }
 });
+
+// 暴露方法给父组件调用
+defineExpose({
+  getEmergencyForceData,
+  clearProjectMarkers,
+});
 </script>
 
 <style lang="scss">
@@ -659,6 +995,9 @@ onUnmounted(() => {
 // Leaflet 地图样式覆盖
 :deep(.leaflet-container) {
   background: #0f1c2e !important;
+  .leaflet-popup {
+    left: -20px !important;
+  }
 
   .leaflet-popup-content-wrapper {
     background: rgba(24, 144, 255, 0.95);
@@ -693,4 +1032,15 @@ onUnmounted(() => {
   transition: all 0.3s;
   cursor: pointer;
 }
+
+.project-popup {
+  width: vw(120);
+  height: vw(20);
+  color: #fff;
+  font-size: vw(12);
+  text-align: center;
+  margin: 0;
+  padding: 15px;
+  font-weight: 500;
+}
 </style>

packages/screen/src/views/RiskWarning/index.vue

@@ -93,6 +93,7 @@
     </div>
     <div class="right">
       <right
+        @openResourceDetail="openResourceDetail"
         @openClearanceSituation="openDialog('clearanceSituation')"
         @openControlSituation="openDialog('controlSituation')"
       ></right>
@@ -101,14 +102,14 @@
     <div class="center">
       <!-- 地图底层 -->
       <div class="map-layer">
-        <ChongqingMap />
+        <ChongqingMap ref="chongqingMapRef" :activeIndex="activeIndex" />
       </div>
 
       <!-- 地图遮罩层 -->
       <div class="map-mask" aria-hidden="true"></div>
     </div>
     <div class="bottom">
-      <bottom></bottom>
+      <bottom @changeActiveIndex="changeActiveIndex" @clearMapMarkers="clearMapMarkers"></bottom>
     </div>
     <top class="top" @openAIResult="openDialog('aiWarningResult')"></top>
 
@@ -306,6 +307,40 @@ const dialogVisible = ref({
   warningSituation: false,  
   tunnelInfo: false
 });
+const activeIndex = ref(0);
+
+// 地图组件引用
+const chongqingMapRef = ref(null);
+
+// 切换导航项时触发
+const changeActiveIndex = (index) => {
+  activeIndex.value = index;
+};
+
+// 打开资源详情（队伍、人员、装备、物资）
+const openResourceDetail = (item) => {
+  console.log("打开资源详情:", item);
+  // 判断是否为队伍或人员
+  if (item.label === "全市普通公路抢险队伍" || item.label === "人员") {
+    // 调用地图组件的获取应急力量方法
+    if (chongqingMapRef.value) {
+      chongqingMapRef.value.getEmergencyForceData();
+    }
+  }
+  // 打开对应的弹窗
+  const key = item.label.toLowerCase().replace(/[^a-z]/g, "");
+  if (dialogVisible.value[key] !== undefined) {
+    dialogVisible.value[key] = true;
+  }
+};
+
+// 清除地图标记
+const clearMapMarkers = () => {
+  console.log("清除地图标记");
+  if (chongqingMapRef.value) {
+    chongqingMapRef.value.clearProjectMarkers();
+  }
+};
 
 // 打开弹窗
 const openDialog = (dialogName) => {

packages/screen/src/views/RiskWarning/right.vue

@@ -12,6 +12,7 @@
           v-for="(item, index) in resourceData"
           :key="index"
           class="resource-item"
+          @click="handleResourceClick(item)"
         >
           <!-- <div class="resource-icon" :class="item.iconClass"></div> -->
           <img class="resource-icon" :src="item.img" alt="" />
@@ -215,7 +216,11 @@ import icon62 from "../../assets/RiskWarning_img/路径62@2x.png";
 import icon621 from "../../assets/RiskWarning_img/路径62@2x (1).png";
 import icon622 from "../../assets/RiskWarning_img/路径62@2x (2).png";
 
-const emit = defineEmits(["openClearanceSituation", "openControlSituation"]);
+const emit = defineEmits([
+  "openClearanceSituation",
+  "openControlSituation",
+  "openResourceDetail",
+]);
 
 // 组件挂载时获取数据
 onMounted(() => {
@@ -251,6 +256,7 @@ const getYhYjllList = async () => {
         resourceData.value[1].unit = "人";
       }
       resourceData.value[0].value = gl1Yjllmcs;
+
     }
   } catch (error) {
     console.error("获取应急力量列表失败:", error);
@@ -369,6 +375,11 @@ const resourceData = ref([
   },
 ]);
 
+// 点击资源项
+const handleResourceClick = (item) => {
+  emit("openResourceDetail", item);
+};
+
 // 管控路段数据
 const controlData1 = [
   { label: "封闭管控数", value: "40" },

packages/screen/vite.config.js

@@ -93,9 +93,9 @@ export default defineConfig(({ command, mode }) => {
       cors: true,
       proxy: {
         '/snow-ops-platform': {
-          target: 'http://192.168.110.16:8661/',
+          // target: 'http://192.168.110.16:8661/',
           // target: 'http://8.137.54.85:8661/', //测试环境
-          // target: 'http://192.168.110.36:8661/', //张启生本地环境
+          target: 'http://192.168.110.36:8661/', //张启生本地环境
           changeOrigin: true,
         },
       }