大屏修改样式 增加弹窗

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>

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>

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 {

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
-            <div class="bar" :style="{ height: getBarHeight(item.value) + '%' }"></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="name" label="区县名称" :min-width="vw(80)" />
-        <el-table-column prop="road" label="路段" min-width="50" />
+        <el-table-column prop="road" label="路段" :min-width="vw(50)" />
-        <el-table-column prop="bridge" label="桥梁" min-width="50" />
+        <el-table-column prop="bridge" label="桥梁" :min-width="vw(50)" />
-        <el-table-column prop="tunnel" label="隧道" min-width="50" />
+        <el-table-column prop="tunnel" label="隧道" :min-width="vw(50)" />
-        <el-table-column prop="slope" label="边坡" min-width="50" />
+        <el-table-column prop="slope" label="边坡" :min-width="vw(50)" />
-        <el-table-column prop="project" label="项目" min-width="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: '8/13', class: "red" },
-  { label: "橙色预警", value: 12, class: "orange" },
+  { label: "橙色预警", value: '12/14', class: "orange" },
-  { label: "黄色预警", value: 27, class: "yellow" },
+  { label: "黄色预警", value: '27/15', class: "yellow" },
-  { label: "蓝色预警", value: 15, class: "blue" },
+  { 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%),
+          background-image:
-            linear-gradient(to bottom, rgba(64, 169, 255, 0.1) 1px, transparent 1px);
+            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;
 

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,19 +26,41 @@
 
       <!-- 管控路段数 -->
       <div class="control-section">
-        <div class="control-title">管控路段数 <span class="control-num">2</span></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 controlData"
+              v-for="(item, index) in controlData1"
               :key="index"
               class="control-item"
-            :class="{ clickable: item.label === '全幅封闭数' || item.label === '关闭驻地数' }"
+              :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: "人员",
-  { label: "物资", value: "41.5", unit: "万件", iconClass: "icon-material", img: icon4 },
+    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 = [
+const controlData1 = [
-  { label: "全幅封闭数", value: "40" },
+  { label: "封闭管控数", value: "40" },
   { label: "半幅通行数", value: "40" },
-  { label: "限速(限车型)数", value: "30" },
+  { label: "限速(限车型)数", value: "24" },
-  { label: "告警阻拦处数", value: "42" },
+  { 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
+    border-image: linear-gradient(
-      2;
+        270deg,
+        rgba(80, 201, 191, 0),
+        rgba(39, 135, 153, 1)
+      )
+      2 2;
     border-radius: 6px;
     border-right: 0px;
 
@@ -439,8 +500,9 @@ const majorEvent = "0";
   }
 
   .control-grid {
+    flex: 1;
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(2, 1fr);
     background: rgba(64, 169, 255, 0.1);
     box-shadow: inset 0px 0px 8px 0px #379bff;
     gap: vw(8);

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>