From d769327701f2d9fab4bc651bd2750c2b4d95ee8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8C=83=E4=BD=B3?= <3278303149@qq.com>
Date: Tue, 31 Mar 2026 18:10:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E4=BF=AE=E6=94=B9=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=20=E5=A2=9E=E5=8A=A0=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RiskWarning_img/图标_media_dvr@2x.png     | Bin 0 -> 4051 bytes
 .../RiskWarning/component/ChongqingMap.vue    | 223 +++++++++++++++
 .../component/tunnelInfoDialog.vue            | 267 ++++++++++++++++++
 .../screen/src/views/RiskWarning/index.vue    |  20 +-
 .../screen/src/views/RiskWarning/left.vue     | 175 ++++++++++--
 .../screen/src/views/RiskWarning/right.vue    | 118 ++++++--
 packages/screen/src/views/RiskWarning/top.vue |   2 +-
 7 files changed, 750 insertions(+), 55 deletions(-)
 create mode 100644 packages/screen/src/assets/RiskWarning_img/图标_media_dvr@2x.png
 create mode 100644 packages/screen/src/views/RiskWarning/component/ChongqingMap.vue
 create mode 100644 packages/screen/src/views/RiskWarning/component/tunnelInfoDialog.vue

diff --git a/packages/screen/src/assets/RiskWarning_img/图标_media_dvr@2x.png b/packages/screen/src/assets/RiskWarning_img/图标_media_dvr@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..e6f8cb576493ffcd1f7f5e5f4e33c9516e1bf5aa
GIT binary patch
literal 4051
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
FV1h8c(~|%I

literal 0
HcmV?d00001

diff --git a/packages/screen/src/views/RiskWarning/component/ChongqingMap.vue b/packages/screen/src/views/RiskWarning/component/ChongqingMap.vue
new file mode 100644
index 0000000..e5bf689
--- /dev/null
+++ b/packages/screen/src/views/RiskWarning/component/ChongqingMap.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="chongqing-map-container">
+    <div ref="mapContainer" class="map-container"></div>
+    <div v-if="loading" class="loading-overlay">
+      <div class="loading-spinner"></div>
+      <span class="loading-text">地图加载中...</span>
+    </div>
+    <div v-if="error" class="error-overlay">
+      <span class="error-text">{{ error }}</span>
+      <button class="retry-btn" @click="loadMapData">重试</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const mapContainer = ref(null)
+const loading = ref(false)
+const error = ref(null)
+let mapInstance = null
+
+// 重庆地图GeoJSON API地址
+const GEOJSON_URL = 'https://geo.datav.aliyun.com/areas_v3/bound/500000_full.json'
+
+// 加载地图数据
+const loadMapData = async () => {
+  loading.value = true
+  error.value = null
+  
+  try {
+    const response = await fetch(GEOJSON_URL)
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+    
+    const geoJsonData = await response.json()
+    
+    // 初始化地图
+    initMap(geoJsonData)
+    
+  } catch (err) {
+    console.error('加载地图数据失败:', err)
+    error.value = '地图数据加载失败，请检查网络连接'
+  } finally {
+    loading.value = false
+  }
+}
+
+// 初始化地图
+const initMap = (geoJsonData) => {
+  if (!mapContainer.value) return
+  
+  try {
+    // 清除旧地图实例
+    if (mapInstance) {
+      mapInstance.remove()
+    }
+    
+    // 创建地图实例
+    mapInstance = new window.L.Map(mapContainer.value, {
+      center: [29.563, 106.551], // 重庆中心坐标
+      zoom: 8,
+      minZoom: 7,
+      maxZoom: 18,
+      zoomControl: false,
+      attributionControl: false
+    })
+    
+    // 添加瓦片图层
+    const tileLayer = new window.L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    })
+    mapInstance.addLayer(tileLayer)
+    
+    // 添加GeoJSON图层
+    const geoJsonLayer = new window.L.GeoJSON(geoJsonData, {
+      style: {
+        fillColor: '#1E3A8A',
+        weight: 2,
+        opacity: 0.8,
+        color: '#3B82F6',
+        fillOpacity: 0.3
+      },
+      onEachFeature: (feature, layer) => {
+        if (feature.properties && feature.properties.name) {
+          layer.bindPopup(`<div class="map-popup">
+            <strong>${feature.properties.name}</strong>
+          </div>`)
+        }
+      }
+    })
+    
+    mapInstance.addLayer(geoJsonLayer)
+    
+    // 调整视图以适应重庆边界
+    mapInstance.fitBounds(geoJsonLayer.getBounds())
+    
+  } catch (err) {
+    console.error('初始化地图失败:', err)
+    error.value = '地图初始化失败'
+  }
+}
+
+// 组件挂载时加载地图
+onMounted(() => {
+  // 检查Leaflet是否已加载
+  if (typeof window.L === 'undefined') {
+    // 动态加载Leaflet CSS和JS
+    const link = document.createElement('link')
+    link.rel = 'stylesheet'
+    link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'
+    link.integrity = 'sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY='
+    link.crossOrigin = ''
+    document.head.appendChild(link)
+    
+    const script = document.createElement('script')
+    script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
+    script.integrity = 'sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo='
+    script.crossOrigin = ''
+    script.onload = loadMapData
+    document.head.appendChild(script)
+  } else {
+    loadMapData()
+  }
+})
+
+// 组件卸载时清理资源
+onUnmounted(() => {
+  if (mapInstance) {
+    mapInstance.remove()
+    mapInstance = null
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.chongqing-map-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.map-container {
+  width: 100%;
+  height: 100%;
+  background: #0f1c2e;
+}
+
+.loading-overlay,
+.error-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 1000;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #3B82F6;
+  border-top: 4px solid transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 10px;
+}
+
+.loading-text {
+  color: #fff;
+  font-size: 14px;
+}
+
+.error-text {
+  color: #ff6b6b;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.retry-btn {
+  background: #3B82F6;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  
+  &:hover {
+    background: #2563EB;
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+// Leaflet地图样式覆盖
+:deep(.leaflet-container) {
+  background: #0f1c2e !important;
+  
+  .leaflet-popup-content-wrapper {
+    background: rgba(64, 169, 255, 0.9);
+    border-radius: 4px;
+    
+    .map-popup {
+      color: #fff;
+      font-size: 12px;
+    }
+  }
+  
+  .leaflet-popup-tip {
+    background: rgba(64, 169, 255, 0.9);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/packages/screen/src/views/RiskWarning/component/tunnelInfoDialog.vue b/packages/screen/src/views/RiskWarning/component/tunnelInfoDialog.vue
new file mode 100644
index 0000000..9abfda7
--- /dev/null
+++ b/packages/screen/src/views/RiskWarning/component/tunnelInfoDialog.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="tunnel-info-dialog" v-if="visible">
+    <!-- 四个角的装饰 -->
+    <div class="corner corner-top-left"></div>
+    <div class="corner corner-top-right"></div>
+    <div class="corner corner-bottom-left"></div>
+    <div class="corner corner-bottom-right"></div>
+
+    <div class="dialog-header">
+      <div class="header-title">
+        <span class="title-text">{{ data.title }}</span>
+        <img class="title-icon" src="../../../assets/RiskWarning_img/图标_media_dvr@2x.png" alt="" />
+      </div>
+      <!-- <div class="close-btn" @click="closeDialog">
+        <span class="close-icon">×</span>
+      </div> -->
+      <div class="close-btn" style="pointer-events: auto;" @click="closeDialog">
+        <el-icon color="#5DD7F6"><Close /></el-icon>
+      </div>
+    </div>
+    <div class="dialog-content">
+      <div class="info-item" v-for="(item, index) in data.items" :key="index">
+        <label class="info-label">{{ item.label }}：</label>
+        <span class="info-value">{{ item.value }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+import { Close } from "@element-plus/icons-vue";
+
+defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  data: {
+    type: Object,
+    default: () => ({
+      title: "隧道信息",
+      items: [
+        { label: "隧道名称", value: "蔺市隧道右线" },
+        { label: "编号", value: "G212线" },
+        { label: "所属区县", value: "涪陵" },
+        { label: "隧道长度", value: "1782(米)" },
+        { label: "路线编号", value: "G50351" },
+        { label: "路线名称", value: "石柱-重庆" },
+        { label: "建成时间", value: "2023年" },
+        { label: "入口桩号", value: "159.079" },
+        { label: "隧道净宽", value: "22(米)" },
+        { label: "隧道净高", value: "5(米)" },
+        { label: "长度分类", value: "长隧道" },
+        { label: "评定等级", value: "2类" },
+      ],
+    }),
+  },
+  
+});
+
+// 边坡信息数据
+const slopeData = {
+  title: "边坡信息",
+  items: [
+    { label: "边坡坡长", value: "0.1(km)" },
+    { label: "边坡最大高度", value: "46(m)" },
+    { label: "边坡构成", value: "土石混合边坡 (坡高>=25m)" },
+    { label: "风险等级", value: "三级 (一般)" },
+    { label: "变形形式", value: "框架梁" },
+    { label: "监测设施设置", value: "无" },
+    { label: "起点桩号", value: "1447.7" },
+    { label: "止点桩号", value: "1447.8" },
+  ],
+};
+
+// 隧道信息数据
+const tunnelData = {
+  title: "隧道信息",
+  items: [
+    { label: "隧道名称", value: "蔺市隧道右线" },
+    { label: "编号", value: "G212 线" },
+    { label: "所属区县", value: "涪陵" },
+    { label: "隧道长度", value: "1782(米)" },
+    { label: "路线编号", value: "G50351" },
+    { label: "路线名称", value: "石柱 - 重庆" },
+    { label: "建成时间", value: "2023 年" },
+    { label: "入口桩号", value: "159.079" },
+    { label: "隧道净宽", value: "22(米)" },
+    { label: "隧道净高", value: "5(米)" },
+    { label: "长度分类", value: "长隧道" },
+    { label: "评定等级", value: "2 类" },
+  ],
+};
+
+// 桥梁信息数据
+const bridgeData = {
+  title: "桥梁信息",
+  items: [
+    { label: "桥梁名称", value: "蔺市隧道右线" },
+    { label: "编号", value: "K212 线" },
+    { label: "所属区县", value: "涪陵" },
+    { label: "桥梁长度", value: "46(米)" },
+    { label: "路线编号", value: "G50351" },
+    { label: "路线名称", value: "银川 - 重庆" },
+    { label: "建成时间", value: "2013" },
+    { label: "中心桩号", value: "1278.994" },
+    { label: "桥梁长度", value: "46 米" },
+    { label: "跨径总长", value: "40 米" },
+    { label: "跨径分类", value: "长隧道" },
+    { label: "技术状况", value: "一类" },
+  ],
+};
+
+// 抢险队伍数据
+const rescueTeamData = {
+  title: "抢险队伍",
+  items: [
+    { label: "队伍名称", value: "重庆公路应急抢险指挥及物资储备中心" },
+    { label: "防范状态", value: "已出动" },
+    { label: "人数", value: "50" },
+    { label: "联系人", value: "18602981928" },
+    { label: "地址", value: "重庆市江津区双福工业园区赵坪路 157 号" },
+    { label: "物资装备", value: "应急物资:8100 件;应急装备:33 台" },
+  ],
+};
+
+defineExpose({
+  slopeData,
+  tunnelData,
+  bridgeData,
+  rescueTeamData,
+});
+
+const emit = defineEmits(["close"]);
+
+const closeDialog = () => {
+  emit("close");
+};
+</script>
+
+<style lang="scss" scoped>
+// 视频屏幕自适应 - 基于视口宽度动态调整
+@function vw($px) {
+  @return calc($px / 1920 * 100vw);
+}
+.tunnel-info-dialog {
+  width: vw(300);
+  width: 250px;
+  background: rgba(64, 169, 255, 0.2);
+  border: 1px solid rgba(64, 169, 255, 0.3);
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+  position: fixed;
+  top: 20%;
+  left: 45%;
+  // 四个角的装饰
+  .corner {
+    position: absolute;
+    width: vw(20);
+    height: vw(20);
+    border: 2px solid #40a9ff;
+    pointer-events: none;
+
+    &.corner-top-left {
+      top: 0;
+      left: 0;
+      border-right: none;
+      border-bottom: none;
+      border-top-left-radius: 6px;
+    }
+
+    &.corner-top-right {
+      top: 0;
+      right: 0;
+      border-left: none;
+      border-bottom: none;
+      border-top-right-radius: 6px;
+    }
+
+    &.corner-bottom-left {
+      bottom: 0;
+      left: 0;
+      border-right: none;
+      border-top: none;
+      border-bottom-left-radius: 6px;
+    }
+
+    &.corner-bottom-right {
+      bottom: 0;
+      right: 0;
+      border-left: none;
+      border-top: none;
+      border-bottom-right-radius: 6px;
+    }
+  }
+
+  .dialog-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: vw(16) vw(20);
+    border-bottom: 1px solid rgba(64, 169, 255, 0.2);
+
+    .header-title {
+      display: flex;
+      align-items: center;
+      gap: vw(10);
+
+      .title-text {
+        font-size: vw(16);
+        font-weight: 600;
+        color: #fff;
+      }
+
+      .title-icon {
+        width: vw(24);
+        height: vw(24);
+      }
+    }
+
+    .close-btn {
+      cursor: pointer;
+      transition: all 0.3s;
+
+      .close-icon {
+        font-size: vw(24);
+        color: rgba(255, 255, 255, 0.7);
+      }
+
+      &:hover {
+        .close-icon {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .dialog-content {
+    padding: vw(16) vw(20);
+
+    .info-item {
+      display: flex;
+      align-items: center;
+      padding: vw(8) 0;
+      border-bottom: 1px solid rgba(64, 169, 255, 0.1);
+
+      .info-label {
+        font-size: vw(14);
+        color: rgba(255, 255, 255, 0.7);
+        flex: 0 0 vw(100);
+      }
+
+      .info-value {
+        font-size: vw(14);
+        color: #4fecff;
+        flex: 1;
+      }
+    }
+
+    .info-item:last-child {
+      border-bottom: none;
+    }
+  }
+}
+</style>
diff --git a/packages/screen/src/views/RiskWarning/index.vue b/packages/screen/src/views/RiskWarning/index.vue
index ae24629..3455fc9 100644
--- a/packages/screen/src/views/RiskWarning/index.vue
+++ b/packages/screen/src/views/RiskWarning/index.vue
@@ -78,6 +78,7 @@
         @openImpactDetail="openDialog('impactPoint')"
         @openWarningInfo="openDialog('warningInfo')"
         @openImpactPoint="openDialog('impactPoint')"
+        @openAIResult="openDialog('aiWarningResult')"
         @openWarningSituation="openDialog('warningSituation')"
         @openResponseStatus="openDialog('responseStatus')"
         @openDispatchDistrict="openDialog('dispatchDistrict')"
@@ -95,7 +96,7 @@
     <div class="center">
       <!-- 地图底层 -->
       <div class="map-layer">
-        <!-- <MapCenter /> -->
+        <ChongqingMap />
       </div>
 
       <!-- 地图遮罩层 -->
@@ -233,6 +234,12 @@
       @close="closeDialog('warningSituation')"
       @impactClick="openDialog('impactPoint')"
     />
+
+    <!-- 隧道信息对话框 -->
+    <tunnelInfoDialog
+      v-model:visible="dialogVisible.tunnelInfo"
+      @close="closeDialog('tunnelInfo')"
+    />
   </div>
 </template>
 
@@ -244,7 +251,7 @@ import left from "./left.vue";
 import right from "./right.vue";
 import bottom from "./bottom.vue";
 import top from "./top.vue";
-import MapCenter from "../cockpit/components/MapCenter.vue";
+import ChongqingMap from "./component/ChongqingMap.vue";
 
 // 引入所有弹窗组件
 import responseSituationDiaLog from "./component/responseSituationDiaLog.vue";
@@ -266,6 +273,7 @@ import dispatchDetailDialog from "./component/dispatchDetailDialog.vue";
 import dispatchDistrictDialog from "./component/dispatchDistrictDialog.vue";
 import tongnanTeamDialog from "./component/tongnanTeamDialog.vue";
 import warningSituationDialog from "./component/warningSituationDialog.vue";
+import tunnelInfoDialog from "./component/tunnelInfoDialog.vue";
 
 // 弹窗显示状态
 const dialogVisible = ref({
@@ -288,6 +296,7 @@ const dialogVisible = ref({
   dispatchDistrict: false,
   tongnanTeam: false,
   warningSituation: false,
+  tunnelInfo: true, 
 });
 
 // 打开弹窗
@@ -297,6 +306,8 @@ const openDialog = (dialogName) => {
 
 // 关闭弹窗
 const closeDialog = (dialogName) => {
+  // 关闭弹窗时，重置弹窗数据
+  console.log('关闭弹窗', dialogName)
   dialogVisible.value[dialogName] = false;
 };
 
@@ -367,7 +378,6 @@ onMounted(() => {
     left: 0;
     width: 100%;
     height: 100%;
-    object-fit: cover;
   }
 
   .title_img_box {
@@ -386,11 +396,15 @@ onMounted(() => {
     height: vw(40);
     min-width: 28px;
     min-height: 28px;
+    object-fit: contain;
   }
 
   .title_img2 {
     height: vw(40);
     min-height: 28px;
+    width: auto;
+    max-width: vw(300);
+    object-fit: contain;
   }
 }
 .left {
diff --git a/packages/screen/src/views/RiskWarning/left.vue b/packages/screen/src/views/RiskWarning/left.vue
index f00786e..64ece8f 100644
--- a/packages/screen/src/views/RiskWarning/left.vue
+++ b/packages/screen/src/views/RiskWarning/left.vue
@@ -1,7 +1,19 @@
 <template>
   <div class="left-panel">
     <!-- 智能研判头部 -->
-    <SectionHeader title="智能研判" />
+    <SectionHeader>
+      <template #left>
+        <div class="filter-header">
+          <span>智能研判</span>
+          <img
+            class="filter-icon-ai"
+            src="../../assets/RiskWarning_img/AI1@2x.png"
+            alt=""
+            @click="handleAIClick"
+          />
+        </div>
+      </template>
+    </SectionHeader>
 
     <!-- 气象预警 -->
     <div class="weather-warning-section">
@@ -32,14 +44,21 @@
       <div class="impact-header">
         <div class="impact-title">影响点概况</div>
         <div class="impact-detail clickable" @click="handleImpactDetailClick">
-          影响点明细
+          一键清单(影响点)
         </div>
       </div>
       <div class="chart-container">
         <div class="chart-y-label">数量</div>
         <div class="bar-chart f1">
-          <div v-for="(item, index) in impactData" :key="index" class="bar-item">
-            <div class="bar" :style="{ height: getBarHeight(item.value) + '%' }"></div>
+          <div
+            v-for="(item, index) in impactData"
+            :key="index"
+            class="bar-item"
+          >
+            <div
+              class="bar"
+              :style="{ height: getBarHeight(item.value) + '%' }"
+            ></div>
             <div class="bar-value">{{ item.value }}</div>
             <div class="bar-label">{{ item.label }}</div>
           </div>
@@ -48,6 +67,21 @@
       </div>
     </div>
 
+    <!-- 影响公路类型情况 -->
+    <div class="road-type-section">
+      <div class="section-title">影响公路类型情况</div>
+      <div class="road-type-cards">
+        <div class="road-card"> 
+          <span class="card-label">国省道：</span>
+          <span class="card-value">100</span>
+        </div>
+        <div class="road-card">
+          <span class="card-label">农村公路：</span>
+          <span class="card-value">300</span>
+        </div>
+      </div>
+    </div>
+
     <!-- 区县统计表格 -->
     <div class="district-table-section">
       <el-table
@@ -56,13 +90,15 @@
         :header-cell-style="headerCellStyle"
         :cell-style="cellStyle"
         size="small"
+        :height="tableHeight"
+        :scroll="{ y: true }"
       >
-        <el-table-column prop="name" label="区县名称" min-width="80" />
-        <el-table-column prop="road" label="路段" min-width="50" />
-        <el-table-column prop="bridge" label="桥梁" min-width="50" />
-        <el-table-column prop="tunnel" label="隧道" min-width="50" />
-        <el-table-column prop="slope" label="边坡" min-width="50" />
-        <el-table-column prop="project" label="项目" min-width="50" />
+        <el-table-column prop="name" label="区县名称" :min-width="vw(80)" />
+        <el-table-column prop="road" label="路段" :min-width="vw(50)" />
+        <el-table-column prop="bridge" label="桥梁" :min-width="vw(50)" />
+        <el-table-column prop="tunnel" label="隧道" :min-width="vw(50)" />
+        <el-table-column prop="slope" label="边坡" :min-width="vw(50)" />
+        <el-table-column prop="project" label="项目" :min-width="vw(50)" />
       </el-table>
     </div>
 
@@ -125,7 +161,9 @@
           }"
           @click="handleDispatchCardClick(item)"
         >
-          <div class="card-num">{{ item.value }}<span class="unit">人</span></div>
+          <div class="card-num">
+            {{ item.value }}<span class="unit">人</span>
+          </div>
           <div class="card-label">{{ item.label }}</div>
         </div>
       </div>
@@ -134,7 +172,7 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 
 import SectionHeader from "./component/sectionHeader.vue";
 
@@ -199,10 +237,10 @@ import imgCheck from "../../assets/RiskWarning_img/抽查人数icon@2x.png";
 
 // 气象预警数据
 const weatherWarningData = [
-  { label: "红色预警", value: 8, class: "red" },
-  { label: "橙色预警", value: 12, class: "orange" },
-  { label: "黄色预警", value: 27, class: "yellow" },
-  { label: "蓝色预警", value: 15, class: "blue" },
+  { label: "红色预警", value: '8/13', class: "red" },
+  { label: "橙色预警", value: '12/14', class: "orange" },
+  { label: "黄色预警", value: '27/15', class: "yellow" },
+  { label: "蓝色预警", value: '15/15', class: "blue" },
 ];
 
 // 影响点数据
@@ -226,6 +264,19 @@ const getBarHeight = (value) => {
   const height = (value / maxValue) * 100;
   return Math.min(100, Math.max(20, Math.round(height)));
 };
+const handleAIClick = () => {
+  emit("openAIResult");
+};
+
+// 响应式单位转换函数（基于1920px设计稿）
+const vw = (px) => {
+  return Math.round((px / 1920) * window.innerWidth);
+};
+
+// 表格高度计算
+const tableHeight = computed(() => {
+  return vw(100);
+});
 
 // 区县数据
 const districtData = [
@@ -252,7 +303,7 @@ const responseStats = [
     img: imgReply,
   },
   {
-    label: "叫应率",
+    label: "回应率",
     value: "100%",
     iconClass: "icon-rate",
     img: imgRate,
@@ -305,6 +356,20 @@ const cellStyle = () => ({
 </script>
 
 <style lang="scss" scoped>
+.filter-header {
+  margin-left: 35px;
+  display: flex;
+  align-items: center;
+  gap: vw(8);
+  color: #fff;
+  font-size: vw(24);
+  font-weight: bold;
+}
+.filter-icon-ai {
+  width: 30px;
+  height: 30px;
+  margin-left: 10px;
+}
 // 视频屏幕自适应 - 基于视口宽度动态调整
 // 基准宽度 1920px，使用 vw 单位实现自适应
 @function vw($px) {
@@ -428,7 +493,7 @@ const cellStyle = () => ({
         .card-info {
           flex: 1;
           .card-num {
-            font-size: vw(24);
+            font-size: vw(20);
             font-weight: bold;
             margin-bottom: 2px;
           }
@@ -489,7 +554,7 @@ const cellStyle = () => ({
     .chart-container {
       position: relative;
       height: vw(120);
-      min-height: 80px;
+      height: 70px;
       display: flex;
       // padding: 10px 0 30px 40px;
 
@@ -517,8 +582,13 @@ const cellStyle = () => ({
           left: 0;
           right: 0;
           bottom: 0;
-          background-image: linear-gradient(to right, transparent 0%, transparent 100%),
-            linear-gradient(to bottom, rgba(64, 169, 255, 0.1) 1px, transparent 1px);
+          background-image:
+            linear-gradient(to right, transparent 0%, transparent 100%),
+            linear-gradient(
+              to bottom,
+              rgba(64, 169, 255, 0.1) 1px,
+              transparent 1px
+            );
           background-size: 100% 25%;
           pointer-events: none;
         }
@@ -567,7 +637,11 @@ const cellStyle = () => ({
           .bar {
             width: vw(30);
             min-width: 16px;
-            background: linear-gradient(180deg, #40a9ff 0%, rgba(64, 169, 255, 0.3) 100%);
+            background: linear-gradient(
+              180deg,
+              #40a9ff 0%,
+              rgba(64, 169, 255, 0.3) 100%
+            );
             border-radius: 2px 2px 0 0;
             min-height: 20px;
             transition: all 0.3s ease;
@@ -593,8 +667,51 @@ const cellStyle = () => ({
     }
   }
 
+  // 影响公路类型情况
+  .road-type-section {
+    margin-bottom: vw(20);
+
+    .section-title {
+      font-size: vw(16);
+      font-weight: 600;
+      color: rgba(255, 255, 255, 0.9);
+      margin-bottom: vw(12);
+    }
+
+    .road-type-cards {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: vw(10);
+
+      .road-card {
+        display: flex;
+        align-items: center;
+        padding: vw(12) vw(16);
+        background: rgba(64, 169, 255, 0.1);
+        border: 1px solid rgba(64, 169, 255, 0.2);
+        border-radius: 6px;
+        box-shadow: inset 0px 0px 8px 0px rgba(55, 155, 255, 0.2);
+
+        .card-label {
+          font-size: vw(14);
+          color: rgba(255, 255, 255, 0.7);
+        }
+
+        .card-value {
+          font-size: vw(24);
+          font-weight: bold;
+          color: #40a9ff;
+          text-shadow: 0 0 10px rgba(64, 169, 255, 0.5);
+        }
+      }
+    }
+  }
+
   // 区县统计表格
   .district-table-section {
+    height: vw(100);
+    overflow: hidden;
+    
     :deep(.el-table) {
       background: transparent;
 
@@ -611,10 +728,21 @@ const cellStyle = () => ({
 
       .el-table__header-wrapper {
         background: transparent;
+        position: sticky;
+        top: 0;
+        z-index: 1;
       }
 
       .el-table__body-wrapper {
         background: transparent;
+        overflow-y: auto;
+        max-height: calc(#{vw(100)} - #{vw(40)}); /* 减去表头高度 */
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        
+        &::-webkit-scrollbar {
+          display: none;
+        }
       }
 
       tr {
@@ -645,7 +773,8 @@ const cellStyle = () => ({
       justify-content: space-between;
       align-items: center;
       margin-bottom: vw(15);
-      background-image: url("../../assets/RiskWarning_img/标题bg@2x.png") no-repeat;
+      background-image: url("../../assets/RiskWarning_img/标题bg@2x.png")
+        no-repeat;
       background-size: cover;
       background-position: left;
 
diff --git a/packages/screen/src/views/RiskWarning/right.vue b/packages/screen/src/views/RiskWarning/right.vue
index 6e3ec76..6d88be3 100644
--- a/packages/screen/src/views/RiskWarning/right.vue
+++ b/packages/screen/src/views/RiskWarning/right.vue
@@ -2,10 +2,17 @@
   <div class="right-panel">
     <SectionHeader title="防范应对" />
     <!-- 防范应对 -->
+    <div class="control-section">
+      <div class="control-title">应急力量</div>
+    </div>
     <div class="prevention-section">
       <!-- 第一行：队伍、人员、装备、物资 -->
       <div class="resource-grid">
-        <div v-for="(item, index) in resourceData" :key="index" class="resource-item">
+        <div
+          v-for="(item, index) in resourceData"
+          :key="index"
+          class="resource-item"
+        >
           <!-- <div class="resource-icon" :class="item.iconClass"></div> -->
           <img class="resource-icon" :src="item.img" alt="" />
           <div class="resource-info">
@@ -19,17 +26,39 @@
 
       <!-- 管控路段数 -->
       <div class="control-section">
-        <div class="control-title">管控路段数 <span class="control-num">2</span></div>
-        <div class="control-grid">
-          <div
-            v-for="(item, index) in controlData"
-            :key="index"
-            class="control-item"
-            :class="{ clickable: item.label === '全幅封闭数' || item.label === '关闭驻地数' }"
-            @click="handleControlClick(item)"
-          >
-            <div class="control-value">{{ item.value }}</div>
-            <div class="control-label">{{ item.label }}</div>
+        <div class="control-title">
+          管控路段数 <span class="control-num">2</span>
+        </div>
+        <div style="display: flex; justify-content: space-between">
+          <div class="control-grid">
+            <div
+              v-for="(item, index) in controlData1"
+              :key="index"
+              class="control-item"
+              :class="{
+                clickable: item.label === '封闭管控数',
+              }"
+              @click="handleControlClick(item)"
+            >
+              <div class="control-value">{{ item.value }}</div>
+              <div class="control-label">{{ item.label }}</div>
+            </div>
+          </div>
+          <div style="width: 10px"></div>
+
+          <div class="control-grid">
+            <div
+              v-for="(item, index) in controlData2"
+              :key="index"
+              class="control-item"
+              :class="{
+                clickable: item.label === '关闭驻地数',
+              }"
+              @click="handleControlClick(item)"
+            >
+              <div class="control-value">{{ item.value }}</div>
+              <div class="control-label">{{ item.label }}</div>
+            </div>
           </div>
         </div>
       </div>
@@ -41,7 +70,11 @@
           <span class="patrol-mileage">234882km</span>
         </div>
         <div class="patrol-grid">
-          <div v-for="(item, index) in patrolData" :key="index" class="patrol-item">
+          <div
+            v-for="(item, index) in patrolData"
+            :key="index"
+            class="patrol-item"
+          >
             <div class="patrol-value">{{ item.value }}</div>
             <div class="patrol-label">{{ item.label }}</div>
           </div>
@@ -52,7 +85,11 @@
       <div class="rescue-section">
         <div class="rescue-title">抢险投入情况</div>
         <div class="rescue-grid">
-          <div v-for="(item, index) in rescueData" :key="index" class="rescue-item">
+          <div
+            v-for="(item, index) in rescueData"
+            :key="index"
+            class="rescue-item"
+          >
             <!-- <div class="rescue-icon" :class="item.iconClass"></div> -->
             <img class="rescue-icon" :src="item.img" alt="" />
             <div class="rescue-info">
@@ -157,7 +194,7 @@ const emit = defineEmits(["openClearanceSituation", "openControlSituation"]);
 
 // 点击管控项
 const handleControlClick = (item) => {
-  if (item.label === "全幅封闭数") {
+  if (item.label === "封闭管控数") {
     emit("openClearanceSituation");
   } else if (item.label === "关闭驻地数") {
     emit("openControlSituation");
@@ -198,19 +235,39 @@ const resourceData = [
     iconClass: "icon-team",
     img: icon1,
   },
-  { label: "人员", value: "1612", unit: "人", iconClass: "icon-person", img: icon2 },
-  { label: "储备装备", value: "1157", unit: "台", iconClass: "icon-equip", img: icon3 },
-  { label: "物资", value: "41.5", unit: "万件", iconClass: "icon-material", img: icon4 },
+  {
+    label: "人员",
+    value: "1612",
+    unit: "人",
+    iconClass: "icon-person",
+    img: icon2,
+  },
+  {
+    label: "储备装备",
+    value: "1157",
+    unit: "台",
+    iconClass: "icon-equip",
+    img: icon3,
+  },
+  {
+    label: "物资",
+    value: "41.5",
+    unit: "万件",
+    iconClass: "icon-material",
+    img: icon4,
+  },
 ];
 
 // 管控路段数据
-const controlData = [
-  { label: "全幅封闭数", value: "40" },
+const controlData1 = [
+  { label: "封闭管控数", value: "40" },
   { label: "半幅通行数", value: "40" },
-  { label: "限速(限车型)数", value: "30" },
-  { label: "告警阻拦处数", value: "42" },
-  { label: "停工项目数", value: "24" },
-  { label: "关闭驻地数", value: "32" },
+  { label: "限速(限车型)数", value: "24" },
+  { label: "告警阻拦处数", value: "32" },
+];
+const controlData2 = [
+  { label: "停工项目数", value: "30" },
+  { label: "关闭驻地数", value: "42" },
   { label: "转移撤离人员数", value: "58" },
 ];
 
@@ -363,8 +420,12 @@ const majorEvent = "0";
     padding: vw(8) vw(12);
     background: linear-gradient(270deg, rgba(18, 84, 97, 0) 0%, #204a55 100%);
     border: 2px solid transparent;
-    border-image: linear-gradient(270deg, rgba(80, 201, 191, 0), rgba(39, 135, 153, 1)) 2
-      2;
+    border-image: linear-gradient(
+        270deg,
+        rgba(80, 201, 191, 0),
+        rgba(39, 135, 153, 1)
+      )
+      2 2;
     border-radius: 6px;
     border-right: 0px;
 
@@ -439,9 +500,10 @@ const majorEvent = "0";
   }
 
   .control-grid {
+    flex: 1;
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
-     background: rgba(64, 169, 255, 0.1);
+    grid-template-columns: repeat(2, 1fr);
+    background: rgba(64, 169, 255, 0.1);
     box-shadow: inset 0px 0px 8px 0px #379bff;
     gap: vw(8);
 
diff --git a/packages/screen/src/views/RiskWarning/top.vue b/packages/screen/src/views/RiskWarning/top.vue
index 4138531..31df8d4 100644
--- a/packages/screen/src/views/RiskWarning/top.vue
+++ b/packages/screen/src/views/RiskWarning/top.vue
@@ -15,7 +15,7 @@
         />
       </div>
     </div>
-    <img class="filter-icon-ai" src="../../assets/RiskWarning_img/AI1@2x.png" alt="" @click="handleAIClick" />
+    <!-- <img class="filter-icon-ai" src="../../assets/RiskWarning_img/AI1@2x.png" alt="" @click="handleAIClick" /> -->
   </div>
 </template>