重庆大屏页面

packages/screen/src/assets/css/flex.scss

@@ -87,7 +87,9 @@
 .f3 {
   flex: 3;
 }
-
+.mt_5{
+  margin-top: 5px;
+}
 .mt_10 {
   margin-top: 10px;
 }

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

@@ -16,7 +16,7 @@
       </div>
     </div>
     <!-- 气象预警监测表格 -->
-    <div class="weather-warning-wrapper" style="padding-left: 6px">
+    <div class="weather-warning-wrapper">
       <div class="weather-warning-panel">
         <img
           class="clear-icon"
@@ -53,31 +53,40 @@
             :cell-style="cellStyle"
             :row-class-name="rowClassName"
           >
-            <el-table-column prop="time" label="预警时间" min-width="140" />
+            <el-table-column prop="time" label="预警时间" min-width="vw(140)" />
-            <el-table-column prop="type" label="类型" min-width="80" align="center" />
+            <el-table-column
-            <el-table-column label="预警等级" min-width="100" align="center">
+              prop="type"
+              label="类型"
+              min-width="vw(80)"
+              align="center"
+            />
+            <el-table-column
+              label="预警等级"
+              min-width="vw(100)"
+              align="center"
+            >
               <template #default="{ row }">
-                <!-- <span class="warning-level" :class="row.levelClass">
-                  <i class="level-icon"></i>
-                  {{ row.level }}
-                </span> -->
                 <div class="warning-level">
                   <img
                     :src="
                       row.levelClass === 'red'
                         ? redIcon
                         : row.levelClass === 'blue'
-                        ? blueIcon
+                          ? blueIcon
-                        : row.levelClass === 'orange'
+                          : row.levelClass === 'orange'
-                        ? orangeIcon
+                            ? orangeIcon
-                        : yellowIcon
+                            : yellowIcon
                     "
                     alt=""
                   />
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="district" label="预警区县" min-width="80" />
+            <el-table-column
+              prop="district"
+              label="预警区县"
+              min-width="vw(80)"
+            />
           </el-table>
         </div>
       </div>
@@ -98,12 +107,14 @@ import tunnelIconIcon from "../../assets/RiskWarning_img/隧道icon@2x.png";
 import slopeIconIcon from "../../assets/RiskWarning_img/边坡icon@2x.png";
 import bridgeIconIcon from "../../assets/RiskWarning_img/桥梁icon@2x.png";
 import roadIconIcon from "../../assets/RiskWarning_img/线路路段icon@2x.png";
+import teamIconIcon from "../../assets/RiskWarning_img/队伍icon@2x.png";
 
 import warningIconIcon1 from "../../assets/RiskWarning_img/风险预警icon1@2x.png";
 import tunnelIconIcon1 from "../../assets/RiskWarning_img/隧道icon1@2x.png";
 import slopeIconIcon1 from "../../assets/RiskWarning_img/边坡icon1@2x.png";
 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);
 
@@ -143,6 +154,13 @@ const menuItems = [
     icon: roadIconIcon,
     icon1: roadIconIcon1,
   },
+  {
+    label: "队伍",
+    icon: "icon-team",
+    iconClass: "team",
+    icon: teamIconIcon,
+    icon1: teamIconIcon1,
+  },
 ];
 
 // 筛选状态
@@ -205,15 +223,15 @@ const filteredData = computed(() => {
 
 // el-table 样式
 const headerCellStyle = () => ({
-  background: "transparent",
+  background: "#17466F",
   color: "rgba(255, 255, 255, 0.6)",
   fontWeight: "normal",
   borderBottom: "1px solid rgba(64, 169, 255, 0.2)",
-  padding: "10px 8px",
+  padding: "5px 20px",
 });
 
 const cellStyle = () => ({
-  background: "transparent",
+  background: "#142E49",
   color: "rgba(255, 255, 255, 0.9)",
   borderBottom: "1px solid rgba(64, 169, 255, 0.1)",
   padding: "5px 5px",
@@ -232,7 +250,12 @@ const scrollStep = 1; // 每次滚动像素
 
 // 检查是否有筛选条件
 const hasFilter = computed(() => {
-  return filters.value.red || filters.value.blue || filters.value.orange || filters.value.yellow;
+  return (
+    filters.value.red ||
+    filters.value.blue ||
+    filters.value.orange ||
+    filters.value.yellow
+  );
 });
 
 // 开始自动滚动
@@ -242,7 +265,9 @@ const startAutoScroll = () => {
   }
   if (!isScrolling.value || hasFilter.value) return;
 
-  const tableBody = document.querySelector('.weather-warning-panel .el-table__body-wrapper .el-scrollbar__wrap');
+  const tableBody = document.querySelector(
+    ".weather-warning-panel .el-table__body-wrapper .el-scrollbar__wrap",
+  );
   if (!tableBody) return;
 
   scrollTimer.value = setInterval(() => {
@@ -267,7 +292,9 @@ const stopAutoScroll = () => {
 
 // 重置滚动到顶部
 const resetScrollToTop = () => {
-  const tableBody = document.querySelector('.weather-warning-panel .el-table__body-wrapper .el-scrollbar__wrap');
+  const tableBody = document.querySelector(
+    ".weather-warning-panel .el-table__body-wrapper .el-scrollbar__wrap",
+  );
   if (tableBody) {
     tableBody.scrollTop = 0;
   }
@@ -305,20 +332,24 @@ onMounted(() => {
   nextTick(() => {
     startAutoScroll();
     // 添加鼠标事件监听
-    const tableContainer = document.querySelector('.weather-warning-panel .table-container');
+    const tableContainer = document.querySelector(
+      ".weather-warning-panel .table-container",
+    );
     if (tableContainer) {
-      tableContainer.addEventListener('mouseenter', handleMouseEnter);
+      tableContainer.addEventListener("mouseenter", handleMouseEnter);
-      tableContainer.addEventListener('mouseleave', handleMouseLeave);
+      tableContainer.addEventListener("mouseleave", handleMouseLeave);
     }
   });
 });
 
 onUnmounted(() => {
   stopAutoScroll();
-  const tableContainer = document.querySelector('.weather-warning-panel .table-container');
+  const tableContainer = document.querySelector(
+    ".weather-warning-panel .table-container",
+  );
   if (tableContainer) {
-    tableContainer.removeEventListener('mouseenter', handleMouseEnter);
+    tableContainer.removeEventListener("mouseenter", handleMouseEnter);
-    tableContainer.removeEventListener('mouseleave', handleMouseLeave);
+    tableContainer.removeEventListener("mouseleave", handleMouseLeave);
   }
 });
 </script>
@@ -334,27 +365,30 @@ onUnmounted(() => {
   position: relative;
   width: 100%;
   height: 100%;
-  padding: vw(10);
   box-sizing: border-box;
   display: flex;
 
-  // 小屏幕适配
   @media (max-width: 1366px) {
-    padding: 8px;
+    padding: vw(8);
   }
 
   @media (max-width: 1024px) {
-    padding: 6px;
+    padding: vw(6);
   }
 }
 .nav-menu {
   width: vw(50);
-  min-width: 40px;
+  min-width: vw(40);
+  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: end;
   align-items: center;
   gap: vw(5);
+  z-index: 2;
+  position: absolute;
+  bottom: 0;
+  left: 0;
 
   .nav-item {
     display: flex;
@@ -378,12 +412,12 @@ onUnmounted(() => {
     .nav-icon-box {
       width: vw(50);
       height: vw(50);
-      min-width: 36px;
+      min-width: vw(36);
-      min-height: 36px;
+      min-height: vw(36);
       margin-bottom: vw(5);
       background: rgba(64, 169, 255, 0.1);
       border: 1px solid rgba(64, 169, 255, 0.3);
-      border-radius: 8px;
+      border-radius: vw(8);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -391,8 +425,8 @@ onUnmounted(() => {
       img {
         width: vw(50);
         height: vw(50);
-        min-width: 32px;
+        min-width: vw(32);
-        min-height: 32px;
+        min-height: vw(32);
       }
 
       i {
@@ -440,57 +474,48 @@ onUnmounted(() => {
 
 // 气象预警监测包装器
 .weather-warning-wrapper {
-  flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  width: 90%;
+  width: 92%;
+  height: 50%;
+  position: absolute;
+  z-index: 2;
+  right: 0px;
+  bottom: 0px;
 }
 
 // 气象预警监测面板样式
 .weather-warning-panel {
-  height: 50%;
+  // border-radius: vw(8);
-  background: rgba(64, 169, 255, 0.1);
-  border: 1px solid rgba(64, 169, 255, 0.3);
-  border-radius: 8px;
-  padding: vw(15);
   display: flex;
   flex-direction: column;
-  position: relative;
+  height: 100%;
+
   .clear-icon {
     position: absolute;
     top: vw(-50);
     right: 0px;
     width: vw(40) !important;
     height: vw(40) !important;
-    min-width: 28px;
+    min-width: vw(28);
-    min-height: 28px;
+    min-height: vw(28);
   }
 
   .panel-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: vw(15);
+    background-image: url("../../assets/RiskWarning_img/二级标题栏bg1@2x.png");
+    background-size: 100% 100%;
+    background-position: left top;
+    padding: vw(15);
 
     .header-title {
       font-size: vw(18);
-      font-weight: bold;
+      font-weight: 500;
-      color: #40a9ff;
+      color: #fff;
       position: relative;
-      padding-left: vw(12);
-
-      &::before {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        width: vw(4);
-        height: vw(16);
-        background: linear-gradient(180deg, #40a9ff 0%, #1890ff 100%);
-        border-radius: 2px;
-      }
     }
 
     .filter-tags {
@@ -506,8 +531,8 @@ onUnmounted(() => {
         input {
           width: vw(14);
           height: vw(14);
-          min-width: 12px;
+          min-width: vw(12);
-          min-height: 12px;
+          min-height: vw(12);
           accent-color: #40a9ff;
         }
 
@@ -536,6 +561,7 @@ onUnmounted(() => {
   }
 
   .table-container {
+    background: rgb(20, 46, 74, 0.95);
     flex: 1;
     overflow: hidden;
 
@@ -566,10 +592,28 @@ onUnmounted(() => {
 
     .el-table__header-wrapper {
       background: transparent;
+
+      th.el-table__cell {
+        background: transparent;
+        font-size: vw(14);
+        color: rgba(255, 255, 255, 0.6);
+        padding: vw(10) vw(8);
+      }
     }
 
     .el-table__body-wrapper {
       background: transparent;
+
+      td.el-table__cell {
+        background: transparent;
+        font-size: vw(12);
+        color: rgba(255, 255, 255, 0.9);
+        padding: vw(5) vw(5);
+      }
+
+      &::-webkit-scrollbar {
+        display: none !important;
+      }
     }
 
     tr {
@@ -579,33 +623,17 @@ onUnmounted(() => {
         background: rgba(64, 169, 255, 0.05) !important;
       }
     }
-
-    th.el-table__cell {
-      background: transparent;
-    }
-
-    td.el-table__cell {
-      background: transparent;
-    }
   }
 
   .warning-level {
-    // display: inline-flex;
-    // align-items: center;
-    // gap: 5px;
-    // padding: 4px 10px;
-    // border-radius: 4px;
-    // font-size: 12px;
-    // width: 15px;
-    // height: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
     img {
       width: vw(15);
       height: vw(15);
-      min-width: 10px;
+      min-width: vw(10);
-      min-height: 10px;
+      min-height: vw(10);
     }
 
     // .level-icon {

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

@@ -13,128 +13,382 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from "vue";
+import axios from 'axios';
 
-const mapContainer = ref(null)
+const mapContainer = ref(null);
-const loading = ref(false)
+const loading = ref(false);
-const error = ref(null)
+const error = ref(null);
-let mapInstance = null
+let mapInstance = null;
+let geoJsonLayer = null;
 
-// 重庆地图GeoJSON API地址
+// 定义 emits
-const GEOJSON_URL = 'https://geo.datav.aliyun.com/areas_v3/bound/500000_full.json'
+const emit = defineEmits(["districtClick"]);
+
+// 当前选中的区县
+const selectedDistrict = ref(null);
+let selectedLayer = null;
+
+// 重庆地图 GeoJSON API 地址 - 使用最新版本
+const GEOJSON_URL =
+  "https://geo.datav.aliyun.com/areas_v3/bound/500000_full.json";
 
 // 加载地图数据
 const loadMapData = async () => {
-  loading.value = true
+  loading.value = true;
-  error.value = null
+  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)
+    // const response = await axios.get('/aliyun-geo/bound/500000_full.json');
+    // const geoJsonData = response.data;
+    // if (!geoJsonData) {
+    //   throw new Error('地图数据为空');
+    // }
+
     
+    // // 处理行政区划变更：渝北区和江北区合并为两江新区
+    processDistrictMerge(geoJsonData);
+    initMap(geoJsonData)
   } catch (err) {
-    console.error('加载地图数据失败:', err)
+    console.error("加载地图数据失败:", err);
-    error.value = '地图数据加载失败，请检查网络连接'
+    error.value = "地图数据加载失败，请检查网络连接";
   } finally {
-    loading.value = false
+    loading.value = false;
   }
-}
+};
+
+// 处理行政区划合并
+const processDistrictMerge = (geoJsonData) => {
+  if (!geoJsonData || !geoJsonData.features) return;
+
+  // 查找渝北区和江北区的特征
+  const yubeiIndex = geoJsonData.features.findIndex(
+    (f) => f.properties && f.properties.name === "渝北区",
+  );
+  const jiangbeiIndex = geoJsonData.features.findIndex(
+    (f) => f.properties && f.properties.name === "江北区",
+  );
+
+  // 如果两个区都存在，合并为两江新区
+  if (yubeiIndex !== -1 && jiangbeiIndex !== -1) {
+    const yubeiFeature = geoJsonData.features[yubeiIndex];
+    const jiangbeiFeature = geoJsonData.features[jiangbeiIndex];
+
+    // 创建两江新区的特征
+    const liangjiangFeature = JSON.parse(JSON.stringify(yubeiFeature));
+    liangjiangFeature.properties.name = "两江新区";
+    liangjiangFeature.properties.adcode = "500006"; // 使用新的行政区划代码
+
+    // 如果是 MultiPolygon，合并两个区的坐标
+    if (
+      yubeiFeature.geometry.type === "MultiPolygon" &&
+      jiangbeiFeature.geometry.type === "MultiPolygon"
+    ) {
+      liangjiangFeature.geometry.coordinates = [
+        ...yubeiFeature.geometry.coordinates,
+        ...jiangbeiFeature.geometry.coordinates,
+      ];
+    } else if (
+      yubeiFeature.geometry.type === "Polygon" &&
+      jiangbeiFeature.geometry.type === "Polygon"
+    ) {
+      liangjiangFeature.geometry.type = "MultiPolygon";
+      liangjiangFeature.geometry.coordinates = [
+        [yubeiFeature.geometry.coordinates],
+        [jiangbeiFeature.geometry.coordinates],
+      ];
+    }
+
+    // 移除原来的两个区
+    geoJsonData.features.splice(Math.max(yubeiIndex, jiangbeiIndex), 1);
+    geoJsonData.features.splice(Math.min(yubeiIndex, jiangbeiIndex), 1);
+
+    // 添加合并后的两江新区
+    geoJsonData.features.push(liangjiangFeature);
+
+    console.log("已合并渝北区和江北区为两江新区");
+  }
+};
+
+// 计算区县中心点
+const getCentroid = (coordinates) => {
+  let sumLat = 0;
+  let sumLng = 0;
+  let count = 0;
+
+  const processCoordinates = (coords) => {
+    if (typeof coords[0] === "number") {
+      // 单个坐标点 [lng, lat]
+      sumLng += coords[0];
+      sumLat += coords[1];
+      count++;
+    } else if (Array.isArray(coords[0])) {
+      // 坐标数组
+      coords.forEach(processCoordinates);
+    }
+  };
+
+  processCoordinates(coordinates);
+
+  return count > 0 ? [sumLat / count, sumLng / count] : null;
+};
 
 // 初始化地图
 const initMap = (geoJsonData) => {
-  if (!mapContainer.value) return
+  if (!mapContainer.value) return;
-  
+
   try {
     // 清除旧地图实例
     if (mapInstance) {
-      mapInstance.remove()
+      mapInstance.remove();
     }
-    
+
     // 创建地图实例
     mapInstance = new window.L.Map(mapContainer.value, {
       center: [29.563, 106.551], // 重庆中心坐标
-      zoom: 8,
+      zoom: 7,
-      minZoom: 7,
+      minZoom: 6,
       maxZoom: 18,
       zoomControl: false,
-      attributionControl: false
+      attributionControl: false,
-    })
+    });
-    
+
-    // 添加瓦片图层
+    // 添加瓦片图层 - 使用深色样式
-    const tileLayer = new window.L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    const tileLayer = new window.L.TileLayer(
-      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
-    })
+      {
-    mapInstance.addLayer(tileLayer)
+        attribution:
-    
+          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
-    // 添加GeoJSON图层
+        subdomains: "abcd",
-    const geoJsonLayer = new window.L.GeoJSON(geoJsonData, {
+        maxZoom: 19,
-      style: {
-        fillColor: '#1E3A8A',
-        weight: 2,
-        opacity: 0.8,
-        color: '#3B82F6',
-        fillOpacity: 0.3
       },
+    );
+    mapInstance.addLayer(tileLayer);
+
+    // 添加 GeoJSON 图层
+    geoJsonLayer = new window.L.GeoJSON(geoJsonData, {
+      style: (feature) => ({
+        fillColor: "#1890ff",
+        weight: 1.5,
+        opacity: 0.6,
+        color: "#40a9ff",
+        fillOpacity: 0.15,
+      }),
       onEachFeature: (feature, layer) => {
         if (feature.properties && feature.properties.name) {
+          // 区县点击事件
+          layer.on("click", (e) => {
+            // 清除之前选中的样式
+            if (selectedLayer) {
+              selectedLayer.setStyle({
+                fillColor: "#1890ff",
+                fillOpacity: 0.15,
+                weight: 1.5,
+                color: "#40a9ff",
+              });
+            }
+
+            // 设置当前选中样式
+            layer.setStyle({
+              fillColor: "#ff4d4f",
+              fillOpacity: 0.6,
+              weight: 2.5,
+              color: "#ff7875",
+            });
+
+            selectedLayer = layer;
+            selectedDistrict.value = feature.properties.name;
+
+            // 触发事件
+            emit("districtClick", {
+              name: feature.properties.name,
+              feature: feature,
+              latlng: e.latlng,
+            });
+
+            // 平滑移动到点击位置
+            mapInstance.panTo(e.latlng, { animate: true, duration: 0.5 });
+          });
+
+          // 鼠标悬停效果
+          layer.on("mouseover", () => {
+            layer.setStyle({
+              fillColor: "#1890ff",
+              fillOpacity: 0.4,
+              weight: 2,
+              color: "#69c0ff",
+            });
+          });
+
+          layer.on("mouseout", () => {
+            layer.setStyle({
+              fillColor: "#1890ff",
+              fillOpacity: 0.15,
+              weight: 1.5,
+              color: "#40a9ff",
+            });
+          });
+
+          // 添加 popup
           layer.bindPopup(`<div class="map-popup">
             <strong>${feature.properties.name}</strong>
-          </div>`)
+          </div>`);
+        }
+      },
+    });
+
+    mapInstance.addLayer(geoJsonLayer);
+
+    // 添加区县标签
+    geoJsonData.features.forEach((feature) => {
+      if (feature.properties && feature.properties.name) {
+        let centroid;
+
+        if (feature.geometry.type === "Polygon") {
+          centroid = getCentroid(feature.geometry.coordinates);
+        } else if (feature.geometry.type === "MultiPolygon") {
+          // 取第一个多边形的中心
+          centroid = getCentroid(feature.geometry.coordinates[0]);
+        }
+
+        if (centroid) {
+          const label = window.L.divIcon({
+            className: "district-label",
+            html: `<div class="label-content">${feature.properties.name}</div>`,
+            iconSize: [80, 30],
+            iconAnchor: [40, 15],
+          });
+
+          const marker = window.L.marker(centroid, { icon: label });
+          marker.on("click", (e) => {
+            // 清除之前选中的样式
+            if (selectedLayer) {
+              selectedLayer.setStyle({
+                fillColor: "#1E3A8A",
+                fillOpacity: 0.3,
+                weight: 2,
+              });
+            }
+
+            // 找到对应的区县图层并设置样式
+            geoJsonLayer.eachLayer((layer) => {
+              if (
+                layer.feature &&
+                layer.feature.properties.name === feature.properties.name
+              ) {
+                layer.setStyle({
+                  fillColor: "#ff4d4f",
+                  fillOpacity: 0.6,
+                  weight: 2.5,
+                  color: "#ff7875",
+                });
+                selectedLayer = layer;
+                selectedDistrict.value = feature.properties.name;
+              }
+            });
+
+            // 触发事件
+            emit("districtClick", {
+              name: feature.properties.name,
+              feature: feature,
+              latlng: e.latlng,
+            });
+
+            // 平滑移动到点击位置
+            mapInstance.panTo(e.latlng, { animate: true, duration: 0.5 });
+          });
+          mapInstance.addLayer(marker);
         }
       }
-    })
+    });
-    
+
-    mapInstance.addLayer(geoJsonLayer)
-    
     // 调整视图以适应重庆边界
-    mapInstance.fitBounds(geoJsonLayer.getBounds())
+    mapInstance.fitBounds(geoJsonLayer.getBounds());
-    
   } catch (err) {
-    console.error('初始化地图失败:', err)
+    console.error("初始化地图失败:", err);
-    error.value = '地图初始化失败'
+    error.value = "地图初始化失败";
   }
-}
+};
 
 // 组件挂载时加载地图
 onMounted(() => {
-  // 检查Leaflet是否已加载
+  // 检查 Leaflet 是否已加载
-  if (typeof window.L === 'undefined') {
+  if (typeof window.L === "undefined") {
-    // 动态加载Leaflet CSS和JS
+    // 动态加载 Leaflet CSS 和 JS
-    const link = document.createElement('link')
+    const link = document.createElement("link");
-    link.rel = 'stylesheet'
+    link.rel = "stylesheet";
-    link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'
+    link.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css";
-    link.integrity = 'sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY='
+    link.integrity = "sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=";
-    link.crossOrigin = ''
+    link.crossOrigin = "";
-    document.head.appendChild(link)
+    document.head.appendChild(link);
-    
+
-    const script = document.createElement('script')
+    const script = document.createElement("script");
-    script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
+    script.src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js";
-    script.integrity = 'sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo='
+    script.integrity = "sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=";
-    script.crossOrigin = ''
+    script.crossOrigin = "";
-    script.onload = loadMapData
+    script.onload = loadMapData;
-    document.head.appendChild(script)
+    document.head.appendChild(script);
   } else {
-    loadMapData()
+    loadMapData();
   }
-})
+});
 
 // 组件卸载时清理资源
 onUnmounted(() => {
   if (mapInstance) {
-    mapInstance.remove()
+    mapInstance.remove();
-    mapInstance = null
+    mapInstance = null;
   }
-})
+});
 </script>
 
+<style lang="scss">
+// 区县标签样式（需要全局样式，因为 Leaflet 动态添加元素）
+.district-label {
+  background: transparent !important;
+  border: none !important;
+
+  .label-content {
+    background: transparent;
+    color: #fff;
+    padding: vw(4) vw(8);
+    border-radius: vw(2);
+    font-weight: 500;
+    text-align: center;
+    white-space: nowrap;
+    text-shadow:
+      0 1px 3px rgba(0, 0, 0, 0.8),
+      0 0 2px rgba(0, 0, 0, 0.5);
+    letter-spacing: 0.5px;
+    cursor: pointer;
+    width: fit-content;
+    transition: all 0.3s;
+
+    &:hover {
+      color: #40a9ff;
+      text-shadow: 0 0 10px rgba(64, 169, 255, 0.8);
+      transform: scale(1.05);
+    }
+  }
+}
+</style>
+
 <style lang="scss" scoped>
+// 视频屏幕自适应 - 基于视口宽度动态调整
+@function vw($px) {
+  @return calc($px / 1920 * 100vw);
+}
+
 .chongqing-map-container {
   width: 100%;
   height: 100%;
@@ -163,61 +417,84 @@ onUnmounted(() => {
 }
 
 .loading-spinner {
-  width: 40px;
+  width: vw(40);
-  height: 40px;
+  height: vw(40);
-  border: 4px solid #3B82F6;
+  border: vw(4) solid #3b82f6;
-  border-top: 4px solid transparent;
+  border-top: vw(4) solid transparent;
   border-radius: 50%;
   animation: spin 1s linear infinite;
-  margin-bottom: 10px;
+  margin-bottom: vw(10);
 }
 
 .loading-text {
   color: #fff;
-  font-size: 14px;
+  font-size: vw(14);
 }
 
 .error-text {
   color: #ff6b6b;
-  font-size: 14px;
+  font-size: vw(14);
-  margin-bottom: 10px;
+  margin-bottom: vw(10);
 }
 
 .retry-btn {
-  background: #3B82F6;
+  background: #3b82f6;
   color: white;
   border: none;
-  padding: 8px 16px;
+  padding: vw(8) vw(16);
-  border-radius: 4px;
+  border-radius: vw(4);
   cursor: pointer;
-  font-size: 12px;
+  font-size: vw(12);
-  
+
   &:hover {
-    background: #2563EB;
+    background: #2563eb;
   }
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
+  0% {
-  100% { transform: rotate(360deg); }
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
-// Leaflet地图样式覆盖
+// Leaflet 地图样式覆盖
 :deep(.leaflet-container) {
   background: #0f1c2e !important;
-  
+
   .leaflet-popup-content-wrapper {
-    background: rgba(64, 169, 255, 0.9);
+    background: rgba(24, 144, 255, 0.95);
-    border-radius: 4px;
+    border-radius: vw(4);
-    
+    padding: vw(6) vw(12);
+    min-width: vw(80);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
+
     .map-popup {
       color: #fff;
-      font-size: 12px;
+      font-size: vw(12);
+      text-align: center;
+      margin: 0;
+      padding: 0;
+      font-weight: 500;
     }
   }
-  
+
   .leaflet-popup-tip {
-    background: rgba(64, 169, 255, 0.9);
+    background: rgba(24, 144, 255, 0.95);
+  }
+
+  .leaflet-popup-content {
+    width: max-content !important;
+    margin: vw(10) 10px vw(10) 0;
+    line-height: 1.3;
   }
 }
-</style>
+
+// 区县高亮样式
+:deep(.leaflet-interactive) {
+  transition: all 0.3s;
+  cursor: pointer;
+}
+</style>

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

@@ -160,7 +160,8 @@ watch(
 }
 
 .ai-dialog {
-  width: 1000px;
+  width: 80vw;
+  max-width: 1000px;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
   border: 1px solid rgba(64, 169, 255, 0.3);
   border-radius: 12px;

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

@@ -51,16 +51,14 @@
       <!-- 数据表格 -->
       <div class="table-section">
         <div class="table-header">
-          <div class="th" style="width: 50px">序号</div>
+          <div
-          <div class="th" style="width: 80px">行政区域</div>
+            v-for="(column, index) in tableColumns"
-          <div class="th" style="width: 80px">线路编号</div>
+            :key="index"
-          <div class="th" style="width: 100px">起止桩号</div>
+            class="th"
-          <div class="th" style="width: 100px">路况位置</div>
+            :style="{ width: column.width, flex: column.flex || 'none' }"
-          <div class="th" style="width: 140px">发生时间</div>
+          >
-          <div class="th" style="width: 80px">线路编号</div>
+            {{ column.label }}
-          <div class="th" style="width: 80px">类型</div>
+          </div>
-          <div class="th" style="width: 100px">管控措施</div>
-          <div class="th" style="flex: 1">操作</div>
         </div>
         <div class="table-body">
           <div
@@ -122,6 +120,7 @@
 <script setup>
 import { ref, computed, watch } from "vue";
 import { Close } from "@element-plus/icons-vue";
+import { regionOptions, typeOptions, controlMeasureOptions } from "./index.js";
 
 const props = defineProps({
   visible: {
@@ -140,27 +139,26 @@ const filterForm = ref({
 });
 
 // 行政区域选项
-const regionOptions = ref([
+// 已从 index.js 导入
-  { label: "巫溪县", value: "巫溪县" },
-  { label: "万州区", value: "万州区" },
-  { label: "沙坪坝区", value: "沙坪坝区" },
-  { label: "渝中区", value: "渝中区" },
-]);
 
 // 类型选项
-const typeOptions = ref([
+// 已从 index.js 导入
-  { label: "边坡坍塌", value: "边坡坍塌" },
-  { label: "路面塌陷", value: "路面塌陷" },
-  { label: "桥梁损坏", value: "桥梁损坏" },
-  { label: "隧道事故", value: "隧道事故" },
-]);
 
 // 管控措施选项
-const controlMeasureOptions = ref([
+// 已从 index.js 导入
-  { label: "全幅封闭", value: "全幅封闭" },
+
-  { label: "半幅封闭", value: "半幅封闭" },
+// 表格列配置
-  { label: "正常通行", value: "正常通行" },
+const tableColumns = ref([
-  { label: "限制通行", value: "限制通行" },
+  { label: "序号", width: "50px" },
+  { label: "行政区域", width: "80px" },
+  { label: "线路编号", width: "80px" },
+  { label: "起止桩号", width: "100px" },
+  { label: "路况位置", width: "100px" },
+  { label: "发生时间", width: "140px" },
+  { label: "线路编号", width: "80px" },
+  { label: "类型", width: "80px" },
+  { label: "管控措施", width: "100px" },
+  { label: "操作", flex: "1" },
 ]);
 
 // 表格数据
@@ -314,7 +312,8 @@ watch(
 }
 
 .clearance-dialog {
-  width: 1000px;
+  width: 80vw;
+  max-width: 1000px;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
   border: 1px solid rgba(64, 169, 255, 0.3);
   border-radius: 12px;
@@ -365,7 +364,8 @@ watch(
 
   .filter-row {
     display: flex;
-    gap: 24px;
+    gap: 12px;
+    flex-wrap: wrap;
   }
 
   .filter-item {

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

@@ -88,12 +88,30 @@ const handleOverlayClick = () => {
 }
 
 .confirm-dialog {
-  width: 360px;
+  width: 80vw;
+  max-width: 400px;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
   border: 1px solid rgba(64, 169, 255, 0.3);
   border-radius: 8px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
   overflow: hidden;
+  animation: dialogSlideIn 0.3s ease-out;
+
+  @media (max-width: 768px) {
+    width: 90vw;
+    max-width: 90vw;
+  }
+}
+
+@keyframes dialogSlideIn {
+  from {
+    opacity: 0;
+    transform: scale(0.8) translateY(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }
 
 // 标题栏
@@ -109,18 +127,23 @@ const handleOverlayClick = () => {
     font-size: 16px;
     font-weight: 600;
     color: #fff;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .close-btn {
-    width: 24px;
+    width: 19px;
-    height: 24px;
+    height: 19px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: rgba(255, 255, 255, 0.6);
     cursor: pointer;
-    font-size: 16px;
+    font-size: 13px;
     transition: color 0.3s;
+    flex-shrink: 0;
 
     &:hover {
       color: #fff;
@@ -132,12 +155,16 @@ const handleOverlayClick = () => {
 .dialog-content {
   padding: 24px 20px;
   text-align: center;
+  max-height: 40vh;
+  overflow-y: auto;
 
   .confirm-message {
-    font-size: 14px;
+    font-size: 16px;
     color: rgba(255, 255, 255, 0.9);
     line-height: 1.6;
     margin: 0;
+    word-wrap: break-word;
+    word-break: break-all;
   }
 }
 
@@ -147,16 +174,20 @@ const handleOverlayClick = () => {
   justify-content: center;
   gap: 16px;
   padding: 0 20px 20px;
+  flex-wrap: wrap;
 
   .btn-cancel {
     min-width: 80px;
-    height: 32px;
+    height: 26px;
+    padding: 0 16px;
     background-color: transparent;
     border: 1px solid rgba(64, 169, 255, 0.4);
     color: rgba(255, 255, 255, 0.8);
-    font-size: 13px;
+    font-size: 10px;
     border-radius: 4px;
     transition: all 0.3s;
+    flex: 1;
+    min-flex: 64px;
 
     &:hover {
       background-color: rgba(64, 169, 255, 0.1);
@@ -167,13 +198,16 @@ const handleOverlayClick = () => {
 
   .btn-confirm {
     min-width: 80px;
-    height: 32px;
+    height: 26px;
+    padding: 0 16px;
     background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
     border: none;
     color: #fff;
-    font-size: 13px;
+    font-size: 10px;
     border-radius: 4px;
     transition: all 0.3s;
+    flex: 1;
+    min-flex: 64px;
 
     &:hover {
       background: linear-gradient(135deg, #69c0ff 0%, #40a9ff 100%);

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

@@ -40,12 +40,14 @@
       <!-- 数据表格 -->
       <div class="table-section">
         <div class="table-header">
-          <div class="th" style="width: 60px">序号</div>
+          <div
-          <div class="th" style="width: 100px">行政区域</div>
+            v-for="(column, index) in tableColumns"
-          <div class="th" style="width: 200px">驻地名称</div>
+            :key="index"
-          <div class="th" style="width: 200px">所属项目</div>
+            class="th"
-          <div class="th" style="width: 80px">驻地人数</div>
+            :style="{ width: column.width, flex: column.flex || 'none' }"
-          <div class="th" style="flex: 1">驻地风险等级</div>
+          >
+            {{ column.label }}
+          </div>
         </div>
         <div class="table-body">
           <div
@@ -101,6 +103,7 @@
 <script setup>
 import { ref, computed, watch } from "vue";
 import { Close } from "@element-plus/icons-vue";
+import { regionOptions, riskLevelOptions } from "./index.js";
 
 const props = defineProps({
   visible: {
@@ -118,19 +121,19 @@ const filterForm = ref({
 });
 
 // 行政区域选项
-const regionOptions = ref([
+// 已从 index.js 导入
-  { label: "沙坪坝区", value: "沙坪坝区" },
-  { label: "万州区", value: "万州区" },
-  { label: "渝中区", value: "渝中区" },
-  { label: "江北区", value: "江北区" },
-]);
 
 // 风险等级选项
-const riskLevelOptions = ref([
+// 已从 index.js 导入
-  { label: "Ⅰ级", value: "Ⅰ级" },
+
-  { label: "Ⅱ级", value: "Ⅱ级" },
+// 表格列配置
-  { label: "Ⅲ级", value: "Ⅲ级" },
+const tableColumns = ref([
-  { label: "Ⅳ级", value: "Ⅳ级" },
+  { label: "序号", width: "60px" },
+  { label: "行政区域", width: "100px" },
+  { label: "驻地名称", width: "200px" },
+  { label: "所属项目", width: "200px" },
+  { label: "驻地人数", width: "80px" },
+  { label: "驻地风险等级", flex: "1" },
 ]);
 
 // 表格数据
@@ -267,7 +270,8 @@ watch(
 }
 
 .control-dialog {
-  width: 900px;
+  width: 80vw;
+  max-width: 900px;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
   border: 1px solid rgba(64, 169, 255, 0.3);
   border-radius: 12px;
@@ -318,7 +322,8 @@ watch(
 
   .filter-row {
     display: flex;
-    gap: 24px;
+    gap: 12px;
+    flex-wrap: wrap;
   }
 
   .filter-item {

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

@@ -40,13 +40,14 @@
       <!-- 数据表格 -->
       <div class="table-section">
         <div class="table-header">
-          <div class="th" style="width: 50px">序号</div>
+          <div
-          <div class="th" style="width: 100px">区县/镇街</div>
+            v-for="(column, index) in tableColumns"
-          <div class="th" style="width: 80px">姓名</div>
+            :key="index"
-          <div class="th" style="width: 120px">电话</div>
+            class="th"
-          <div class="th" style="width: 100px">类型</div>
+            :style="{ width: column.width, flex: column.flex || 'none' }"
-          <div class="th" style="width: 140px">角色</div>
+          >
-          <div class="th" style="flex: 1">调度时间</div>
+            {{ column.label }}
+          </div>
         </div>
         <div class="table-body">
           <div
@@ -93,6 +94,7 @@
 <script setup>
 import { ref, computed, watch } from "vue";
 import { Close } from "@element-plus/icons-vue";
+import { regionOptions, typeOptions } from "./index.js";
 
 const props = defineProps({
   visible: {
@@ -110,19 +112,20 @@ const filterForm = ref({
 });
 
 // 行政区域选项
-const regionOptions = ref([
+// 已从 index.js 导入
-  { label: "柏梓镇", value: "柏梓镇" },
-  { label: "万州区", value: "万州区" },
-  { label: "沙坪坝区", value: "沙坪坝区" },
-  { label: "渝中区", value: "渝中区" },
-]);
 
 // 类型选项
-const typeOptions = ref([
+// 已从 index.js 导入
-  { label: "交通主管部门", value: "交通主管部门" },
+
-  { label: "公路机构", value: "公路机构" },
+// 表格列配置
-  { label: "养护站", value: "养护站" },
+const tableColumns = ref([
-  { label: "护路员", value: "护路员" },
+  { label: "序号", width: "50px" },
+  { label: "区县/镇街", width: "100px" },
+  { label: "姓名", width: "80px" },
+  { label: "电话", width: "120px" },
+  { label: "类型", width: "100px" },
+  { label: "角色", width: "140px" },
+  { label: "调度时间", flex: "1" },
 ]);
 
 // 表格数据
@@ -252,7 +255,8 @@ watch(
 }
 
 .dispatch-detail-dialog {
-  width: 900px;
+  width: 80vw;
+  max-width: 900px;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
   border: 1px solid rgba(64, 169, 255, 0.3);
   border-radius: 12px;
@@ -303,7 +307,8 @@ watch(
 
   .filter-row {
     display: flex;
-    gap: 24px;
+    gap: 12px;
+    flex-wrap: wrap;
   }
 
   .filter-item {

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

@@ -29,10 +29,14 @@
       <!-- 数据表格 -->
       <div class="table-section">
         <div class="table-header">
-          <div class="th" style="width: 60px">序号</div>
+          <div
-          <div class="th" style="width: 120px">行政区域</div>
+            v-for="(column, index) in tableColumns"
-          <div class="th" style="width: 100px">调度数</div>
+            :key="index"
-          <div class="th" style="flex: 1">最近调度时间</div>
+            class="th"
+            :style="{ width: column.width, flex: column.flex || 'none' }"
+          >
+            {{ column.label }}
+          </div>
         </div>
         <div class="table-body">
           <div
@@ -78,6 +82,7 @@
 <script setup>
 import { ref, computed, watch } from "vue";
 import { Close } from "@element-plus/icons-vue";
+import { regionOptions } from "./index.js";
 
 const props = defineProps({
   visible: {
@@ -94,11 +99,14 @@ const filterForm = ref({
 });
 
 // 行政区域选项
-const regionOptions = ref([
+// 已从 index.js 导入
-  { label: "重庆市", value: "重庆市" },
+
-  { label: "万州区", value: "万州区" },
+// 表格列配置
-  { label: "沙坪坝区", value: "沙坪坝区" },
+const tableColumns = ref([
-  { label: "渝中区", value: "渝中区" },
+  { label: "序号", width: "60px" },
+  { label: "行政区域", width: "120px" },
+  { label: "调度数", width: "100px" },
+  { label: "最近调度时间", flex: "1" },
 ]);
 
 // 表格数据
@@ -221,7 +229,8 @@ watch(
 }
 
 .dispatch-dialog {
-  width: 700px;
+  width: 80vw;
+  max-width: 700px;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
   border: 1px solid rgba(64, 169, 255, 0.3);
   border-radius: 12px;
@@ -272,7 +281,8 @@ watch(
 
   .filter-row {
     display: flex;
-    gap: 24px;
+    gap: 12px;
+    flex-wrap: wrap;
   }
 
   .filter-item {

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

@@ -243,7 +243,8 @@ watch(
 }
 
 .event-dialog {
-  width: 700px;
+  width: 80vw;
+  max-width: 700px;
   max-height: 85vh;
   overflow-y: auto;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);

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

@@ -234,7 +234,8 @@ watch(
 }
 
 .impact-detail-dialog {
-  width: 650px;
+  width: 80vw;
+  max-width: 650px;
   max-height: 90vh;
   overflow-y: auto;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);

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

@@ -8,32 +8,59 @@
           <el-icon><Close /></el-icon>
         </div>
       </div>
+      <div></div>
+
+      <!-- 统计卡片 -->
+      <div class="stats-cards">
+        <div class="stat-card">
+          <div class="stat-label">影响桥梁</div>
+          <div class="stat-value">2933</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">影响边坡</div>
+          <div class="stat-value">2933</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">影响隧道</div>
+          <div class="stat-value">2933</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">影响项目</div>
+          <div class="stat-value">2933</div>
+        </div>
+      </div>
 
       <!-- 筛选区域 -->
       <div class="filter-section">
         <div class="filter-row">
           <div class="filter-item">
             <el-select v-model="filterForm.pointType" placeholder="影响点类型" class="filter-select">
-              <el-option label="全部" value="" />
+              <el-option
-              <el-option label="边坡" value="slope" />
+                v-for="option in pointTypeOptions"
-              <el-option label="桥梁" value="bridge" />
+                :key="option.value"
-              <el-option label="隧道" value="tunnel" />
+                :label="option.label"
-              <el-option label="路面" value="road" />
+                :value="option.value"
+              />
             </el-select>
           </div>
           <div class="filter-item">
             <el-select v-model="filterForm.pointLevel" placeholder="影响点等级" class="filter-select">
-              <el-option label="全部" value="" />
+              <el-option
-              <el-option label="一般隐患" value="normal" />
+                v-for="option in pointLevelOptions"
-              <el-option label="重大隐患" value="serious" />
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              />
             </el-select>
           </div>
           <div class="filter-item">
             <el-select v-model="filterForm.region" placeholder="行政区域" class="filter-select">
-              <el-option label="全部" value="" />
+              <el-option
-              <el-option label="万州区" value="wanzhou" />
+                v-for="option in regionOptionsWithAll"
-              <el-option label="涪陵区" value="fuling" />
+                :key="option.value"
-              <el-option label="合川区" value="hechuan" />
+                :label="option.label"
+                :value="option.value"
+              />
             </el-select>
           </div>
           <div class="filter-item">
@@ -47,16 +74,14 @@
       <!-- 数据表格 -->
       <div class="table-section">
         <div class="table-header">
-          <div class="th" style="width: 50px">序号</div>
+          <div
-          <div class="th" style="width: 80px">行政区域</div>
+            v-for="(column, index) in tableColumns"
-          <div class="th" style="width: 80px">影响点类型</div>
+            :key="index"
-          <div class="th" style="width: 180px">影响点位置</div>
+            class="th"
-          <div class="th" style="width: 90px">影响点等级</div>
+            :style="{ width: column.width, flex: column.flex || 'none' }"
-          <div class="th" style="width: 130px">交通主管部门负责人</div>
+          >
-          <div class="th" style="width: 110px">公路机构责任人</div>
+            {{ column.label }}
-          <div class="th" style="width: 110px">养护站负责人</div>
+          </div>
-          <div class="th" style="width: 100px">护路员</div>
-          <div class="th" style="width: 60px">操作</div>
         </div>
         <div class="table-body">
           <div
@@ -131,6 +156,7 @@
 <script setup>
 import { ref, computed, watch } from "vue";
 import { Close, ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
+import { pointTypeOptions, pointLevelOptions, regionOptionsWithAll } from "./index.js";
 
 const props = defineProps({
   visible: {
@@ -148,6 +174,20 @@ const filterForm = ref({
   region: "",
 });
 
+// 表格列配置
+const tableColumns = ref([
+  { label: "序号", width: "50px" },
+  { label: "行政区域", width: "80px" },
+  { label: "影响点类型", width: "80px" },
+  { label: "影响点位置", width: "180px" },
+  { label: "影响点等级", width: "90px" },
+  { label: "交通主管部门负责人", width: "130px" },
+  { label: "公路机构责任人", width: "110px" },
+  { label: "养护站负责人", width: "110px" },
+  { label: "护路员", width: "100px" },
+  { label: "操作", width: "60px" },
+]);
+
 // 表格数据
 const tableData = ref([
   {
@@ -273,6 +313,11 @@ watch(
 </script>
 
 <style lang="scss" scoped>
+// 视频屏幕自适应 - 基于视口宽度动态调整
+@function vw($px) {
+  @return calc($px / 1920 * 100vw);
+}
+
 .impact-dialog-overlay {
   position: fixed;
   top: 0;
@@ -287,11 +332,12 @@ watch(
 }
 
 .impact-dialog {
-  width: 1050px;
+  width: 80vw;
+  max-width: 1200px;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
   border: 1px solid rgba(64, 169, 255, 0.3);
-  border-radius: 12px;
+  border-radius: vw(12);
-  padding: 24px;
+  padding: vw(24);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 }
 
@@ -301,29 +347,29 @@ watch(
   align-items: center;
   justify-content: center;
   position: relative;
-  margin-bottom: 20px;
+  margin-bottom: vw(20);
 
   .header-title {
-    font-size: 20px;
+    font-size: vw(20);
     font-weight: 600;
     color: #fff;
-    padding: 8px 40px;
+    padding: vw(8) vw(40);
     background: linear-gradient(90deg, transparent 0%, rgba(64, 169, 255, 0.2) 20%, rgba(64, 169, 255, 0.2) 80%, transparent 100%);
-    border-bottom: 2px solid #40a9ff;
+    border-bottom: vw(2) solid #40a9ff;
   }
 
   .close-btn {
     position: absolute;
     right: 0;
     top: 0;
-    width: 32px;
+    width: vw(32);
-    height: 32px;
+    height: vw(32);
     display: flex;
     align-items: center;
     justify-content: center;
     color: rgba(255, 255, 255, 0.7);
     cursor: pointer;
-    font-size: 20px;
+    font-size: vw(20);
     transition: color 0.3s;
 
     &:hover {
@@ -332,29 +378,69 @@ watch(
   }
 }
 
+// 统计卡片
+.stats-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: vw(16);
+  margin-bottom: vw(20);
+
+  .stat-card {
+    background: linear-gradient(135deg, rgba(30, 70, 120, 0.6) 0%, rgba(20, 50, 90, 0.8) 100%);
+    border: vw(2) solid rgba(64, 169, 255, 0.4);
+    border-radius: vw(8);
+    padding: vw(16) vw(20);
+    text-align: center;
+    transition: all 0.3s;
+    cursor: pointer;
+
+    &:hover {
+      border-color: rgba(64, 169, 255, 0.8);
+      box-shadow: 0 0 20px rgba(64, 169, 255, 0.3);
+      transform: translateY(-2px);
+    }
+
+    .stat-label {
+      font-size: vw(14);
+      color: rgba(255, 255, 255, 0.8);
+      margin-bottom: vw(8);
+      font-weight: 500;
+    }
+
+    .stat-value {
+      font-size: vw(28);
+      font-weight: bold;
+      color: #40a9ff;
+      text-shadow: 0 0 10px rgba(64, 169, 255, 0.5);
+    }
+  }
+}
+
 // 筛选区域
 .filter-section {
-  margin-bottom: 20px;
+  margin-bottom: vw(20);
 
   .filter-row {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
     gap: 12px;
+
   }
 
   .filter-item {
     .filter-select {
-      width: 150px;
+      width: vw(150);
 
       :deep(.el-input__wrapper) {
         background-color: rgba(30, 70, 120, 0.4);
         border: 1px solid rgba(64, 169, 255, 0.3);
         box-shadow: none;
-        border-radius: 4px;
+        border-radius: vw(4);
 
         .el-input__inner {
           color: #fff;
-          font-size: 13px;
+          font-size: vw(13);
 
           &::placeholder {
             color: rgba(255, 255, 255, 0.5);
@@ -372,10 +458,10 @@ watch(
     .search-btn {
       background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
       border: none;
-      border-radius: 4px;
+      border-radius: vw(4);
-      padding: 0 24px;
+      padding: 0 vw(24);
-      height: 32px;
+      height: vw(32);
-      font-size: 13px;
+      font-size: vw(13);
 
       &:hover {
         background: linear-gradient(135deg, #69c0ff 0%, #40a9ff 100%);
@@ -387,17 +473,17 @@ watch(
 // 表格区域
 .table-section {
   background-color: rgba(30, 70, 120, 0.3);
-  border-radius: 8px;
+  border-radius: vw(8);
   overflow: hidden;
-  margin-bottom: 20px;
+  margin-bottom: vw(20);
 
   .table-header {
     display: flex;
     background-color: rgba(64, 169, 255, 0.2);
-    padding: 12px 16px;
+    padding: vw(12) vw(16);
 
     .th {
-      font-size: 13px;
+      font-size: vw(13);
       font-weight: 500;
       color: #fff;
       text-align: center;
@@ -410,10 +496,10 @@ watch(
 
     .table-row {
       display: flex;
-      padding: 12px 16px;
+      padding: vw(12) vw(16);
       align-items: center;
       transition: background-color 0.3s;
-      min-height: 60px;
+      min-height: vw(60);
 
       &:hover {
         background-color: rgba(64, 169, 255, 0.1);
@@ -424,17 +510,17 @@ watch(
       }
 
       .td {
-        font-size: 12px;
+        font-size: vw(12);
         color: rgba(255, 255, 255, 0.85);
         text-align: center;
         word-break: break-all;
-        padding: 0 4px;
+        padding: 0 vw(4);
 
         .level-tag {
           display: inline-block;
-          padding: 2px 8px;
+          padding: vw(2) vw(8);
-          border-radius: 4px;
+          border-radius: vw(4);
-          font-size: 11px;
+          font-size: vw(11);
 
           &.level-normal {
             background-color: rgba(250, 219, 95, 0.2);
@@ -452,15 +538,15 @@ watch(
         .person-info {
           display: flex;
           flex-direction: column;
-          gap: 2px;
+          gap: vw(2);
 
           .person-name {
-            font-size: 12px;
+            font-size: vw(12);
             color: rgba(255, 255, 255, 0.9);
           }
 
           .person-phone {
-            font-size: 11px;
+            font-size: vw(11);
             color: rgba(255, 255, 255, 0.6);
           }
         }
@@ -468,7 +554,7 @@ watch(
         .detail-link {
           color: #40a9ff;
           cursor: pointer;
-          font-size: 12px;
+          font-size: vw(12);
 
           &:hover {
             color: #69c0ff;
@@ -485,27 +571,27 @@ watch(
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 16px;
+  gap: vw(16);
 
   .total {
-    font-size: 13px;
+    font-size: vw(13);
     color: rgba(255, 255, 255, 0.6);
   }
 
   .page-btns {
     display: flex;
-    gap: 8px;
+    gap: vw(8);
 
     .page-btn {
-      min-width: 28px;
+      min-width: vw(28);
-      height: 28px;
+      height: vw(28);
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: rgba(64, 169, 255, 0.1);
       border: 1px solid rgba(64, 169, 255, 0.2);
-      border-radius: 4px;
+      border-radius: vw(4);
-      font-size: 12px;
+      font-size: vw(12);
       color: rgba(255, 255, 255, 0.8);
       cursor: pointer;
       transition: all 0.3s;
@@ -531,17 +617,17 @@ watch(
 
 // 滚动条样式
 .table-body::-webkit-scrollbar {
-  width: 6px;
+  width: vw(6);
 }
 
 .table-body::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
+  border-radius: vw(3);
 }
 
 .table-body::-webkit-scrollbar-thumb {
   background: linear-gradient(180deg, #40a9ff 0%, #1890ff 100%);
-  border-radius: 3px;
+  border-radius: vw(3);
 }
 
 .table-body::-webkit-scrollbar-thumb:hover {

packages/screen/src/views/RiskWarning/component/index.js

@@ -0,0 +1,109 @@
+// 弹窗组件统一数据配置
+
+// 行政区域选项
+export const regionOptions = [
+  { label: "重庆市", value: "重庆市" },
+  { label: "万州区", value: "万州区" },
+  { label: "沙坪坝区", value: "沙坪坝区" },
+  { label: "渝中区", value: "渝中区" },
+  { label: "巫溪县", value: "巫溪县" },
+  { label: "涪陵区", value: "涪陵区" },
+  { label: "合川区", value: "合川区" },
+  { label: "万盛区", value: "万盛区" },
+  { label: "长寿区", value: "长寿区" },
+  { label: "城口区", value: "城口区" },
+  { label: "柏梓镇", value: "柏梓镇" },
+  { label: "江北区", value: "江北区" },
+];
+
+// 类型选项
+export const typeOptions = [
+  { label: "边坡坍塌", value: "边坡坍塌" },
+  { label: "路面塌陷", value: "路面塌陷" },
+  { label: "桥梁损坏", value: "桥梁损坏" },
+  { label: "隧道事故", value: "隧道事故" },
+  { label: "交通主管部门", value: "交通主管部门" },
+  { label: "公路机构", value: "公路机构" },
+  { label: "养护站", value: "养护站" },
+  { label: "护路员", value: "护路员" },
+];
+
+// 管控措施选项
+export const controlMeasureOptions = [
+  { label: "全幅封闭", value: "全幅封闭" },
+  { label: "半幅封闭", value: "半幅封闭" },
+  { label: "正常通行", value: "正常通行" },
+  { label: "限制通行", value: "限制通行" },
+];
+
+// 风险等级选项
+export const riskLevelOptions = [
+  { label: "一级", value: "一级" },
+  { label: "二级", value: "二级" },
+  { label: "三级", value: "三级" },
+  { label: "四级", value: "四级" },
+];
+
+// 影响点类型选项
+export const pointTypeOptions = [
+  { label: "全部", value: "" },
+  { label: "边坡", value: "slope" },
+  { label: "桥梁", value: "bridge" },
+  { label: "隧道", value: "tunnel" },
+  { label: "路面", value: "road" },
+];
+
+// 影响点等级选项
+export const pointLevelOptions = [
+  { label: "全部", value: "" },
+  { label: "一般隐患", value: "normal" },
+  { label: "重大隐患", value: "serious" },
+];
+
+// 是否回应选项
+export const isRespondedOptions = [
+  { label: "全部", value: "" },
+  { label: "是", value: "yes" },
+  { label: "否", value: "no" },
+];
+
+// 预警等级选项
+export const warningLevelOptions = [
+  { label: "全部", value: "" },
+  { label: "红色预警", value: "red" },
+  { label: "橙色预警", value: "orange" },
+  { label: "黄色预警", value: "yellow" },
+  { label: "蓝色预警", value: "blue" },
+];
+
+// 是否结束选项
+export const isEndedOptions = [
+  { label: "全部", value: "" },
+  { label: "是", value: "yes" },
+  { label: "否", value: "no" },
+];
+
+// 行政区域选项（带全部）
+export const regionOptionsWithAll = [
+  { label: "全部", value: "" },
+  { label: "万州区", value: "wanzhou" },
+  { label: "涪陵区", value: "fuling" },
+  { label: "合川区", value: "hechuan" },
+  { label: "万盛区", value: "wansheng" },
+  { label: "长寿区", value: "changshou" },
+  { label: "城口区", value: "chengkou" },
+];
+
+// 默认导出所有选项
+export default {
+  regionOptions,
+  typeOptions,
+  controlMeasureOptions,
+  riskLevelOptions,
+  pointTypeOptions,
+  pointLevelOptions,
+  isRespondedOptions,
+  warningLevelOptions,
+  isEndedOptions,
+  regionOptionsWithAll,
+};

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

@@ -271,7 +271,8 @@ watch(
 }
 
 .response-dialog {
-  width: 700px;
+  width: 80vw;
+  max-width: 700px;
   max-height: 90vh;
   overflow-y: auto;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);

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

@@ -305,7 +305,8 @@ watch(
 }
 
 .response-info-dialog {
-  width: 750px;
+  width: 80vw;
+  max-width: 750px;
   max-height: 90vh;
   overflow-y: auto;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);

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

@@ -52,13 +52,14 @@
       <!-- 数据表格 -->
       <div class="table-section">
         <div class="table-header">
-          <div class="th" style="width: 60px">序号</div>
+          <div
-          <div class="th" style="width: 120px">区县/镇街</div>
+            v-for="(column, index) in tableColumns"
-          <div class="th" style="width: 100px">姓名</div>
+            :key="index"
-          <div class="th" style="width: 120px">电话</div>
+            class="th"
-          <div class="th" style="flex: 1">角色</div>
+            :style="{ width: column.width, flex: column.flex || 'none' }"
-          <div class="th" style="width: 100px">职务</div>
+          >
-          <div class="th" style="width: 120px">操作</div>
+            {{ column.label }}
+          </div>
         </div>
         <div class="table-body">
           <div
@@ -135,6 +136,17 @@ const stats = ref({
   village: 1099,
 });
 
+// 表格列配置
+const tableColumns = ref([
+  { label: "序号", width: "60px" },
+  { label: "区县/镇街", width: "120px" },
+  { label: "姓名", width: "100px" },
+  { label: "电话", width: "120px" },
+  { label: "角色", flex: "1" },
+  { label: "职务", width: "100px" },
+  { label: "操作", width: "120px" },
+]);
+
 // 表格数据
 const tableData = ref([
   { id: 1, district: "万州区柏梓镇", name: "赵海浪", phone: "1862352068", role: "一般人员（路长履职）", position: "其他" },
@@ -251,11 +263,13 @@ watch(
 }
 
 .response-dialog {
-  width: 900px;
+  width: 70vw;
+  max-width: 700px;
+  max-height: 80vh;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
   border: 1px solid rgba(64, 169, 255, 0.3);
   border-radius: 12px;
-  padding: 24px;
+  padding: 16px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 }
 
@@ -265,13 +279,13 @@ watch(
   align-items: center;
   justify-content: center;
   position: relative;
-  margin-bottom: 24px;
+  margin-bottom: 12px;
 
   .header-title {
-    font-size: 20px;
+    font-size: 14px;
     font-weight: 600;
     color: #fff;
-    padding: 8px 40px;
+    padding: 4px 24px;
     background: linear-gradient(90deg, transparent 0%, rgba(64, 169, 255, 0.2) 20%, rgba(64, 169, 255, 0.2) 80%, transparent 100%);
     border-bottom: 2px solid #40a9ff;
   }
@@ -280,14 +294,14 @@ watch(
     position: absolute;
     right: 0;
     top: 0;
-    width: 32px;
+    width: 24px;
-    height: 32px;
+    height: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: rgba(255, 255, 255, 0.7);
     cursor: pointer;
-    font-size: 20px;
+    font-size: 16px;
     transition: color 0.3s;
 
     &:hover {
@@ -299,55 +313,55 @@ watch(
 // 统计卡片
 .stats-cards {
   display: flex;
-  gap: 20px;
+  gap: 12px;
-  margin-bottom: 24px;
+  margin-bottom: 12px;
 
   .stat-card {
     flex: 1;
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 8px;
     background: linear-gradient(135deg, rgba(30, 80, 140, 0.6) 0%, rgba(20, 60, 110, 0.8) 100%);
     border: 1px solid rgba(64, 169, 255, 0.2);
-    border-radius: 8px;
+    border-radius: 4px;
-    padding: 16px 20px;
+    padding: 10px 12px;
 
     .card-icon {
-      width: 48px;
+      width: 32px;
-      height: 48px;
+      height: 32px;
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: rgba(64, 169, 255, 0.15);
-      border-radius: 8px;
+      border-radius: 4px;
 
       .stat-icon {
-        font-size: 28px;
+        font-size: 18px;
         color: #40a9ff;
       }
     }
 
     .card-info {
       .card-label {
-        font-size: 14px;
+        font-size: 11px;
         color: rgba(255, 255, 255, 0.7);
-        margin-bottom: 4px;
+        margin-bottom: 1px;
       }
 
       .card-value {
         display: flex;
         align-items: baseline;
-        gap: 4px;
+        gap: 2px;
 
         .value-num {
-          font-size: 28px;
+          font-size: 18px;
           font-weight: 700;
           color: #40a9ff;
-          text-shadow: 0 0 10px rgba(64, 169, 255, 0.5);
+          text-shadow: 0 0 6px rgba(64, 169, 255, 0.5);
         }
 
         .value-unit {
-          font-size: 13px;
+          font-size: 10px;
           color: rgba(255, 255, 255, 0.6);
         }
       }
@@ -358,17 +372,17 @@ watch(
 // 表格区域
 .table-section {
   background-color: rgba(30, 70, 120, 0.3);
-  border-radius: 8px;
+  border-radius: 4px;
   overflow: hidden;
-  margin-bottom: 20px;
+  margin-bottom: 12px;
 
   .table-header {
     display: flex;
     background-color: rgba(64, 169, 255, 0.2);
-    padding: 12px 16px;
+    padding: 8px 12px;
 
     .th {
-      font-size: 14px;
+      font-size: 12px;
       font-weight: 500;
       color: #fff;
       text-align: center;
@@ -376,12 +390,12 @@ watch(
   }
 
   .table-body {
-    max-height: 240px;
+    max-height: 30vh;
     overflow-y: auto;
 
     .table-row {
       display: flex;
-      padding: 12px 16px;
+      padding: 10px 12px;
       align-items: center;
       transition: background-color 0.3s;
 
@@ -394,23 +408,23 @@ watch(
       }
 
       .td {
-        font-size: 13px;
+        font-size: 11px;
         color: rgba(255, 255, 255, 0.85);
         text-align: center;
 
         .action-btns {
           display: flex;
           justify-content: center;
-          gap: 12px;
+          gap: 8px;
 
           .action-btn {
-            width: 28px;
+            width: 20px;
-            height: 28px;
+            height: 20px;
             display: flex;
             align-items: center;
             justify-content: center;
             background-color: rgba(64, 169, 255, 0.15);
-            border-radius: 4px;
+            border-radius: 2px;
             color: #40a9ff;
             cursor: pointer;
             transition: all 0.3s;
@@ -431,27 +445,27 @@ watch(
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 16px;
+  gap: 10px;
 
   .total {
-    font-size: 13px;
+    font-size: 11px;
     color: rgba(255, 255, 255, 0.6);
   }
 
   .page-btns {
     display: flex;
-    gap: 8px;
+    gap: 4px;
 
     .page-btn {
-      min-width: 32px;
+      min-width: 24px;
-      height: 32px;
+      height: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: rgba(64, 169, 255, 0.1);
       border: 1px solid rgba(64, 169, 255, 0.2);
-      border-radius: 4px;
+      border-radius: 2px;
-      font-size: 13px;
+      font-size: 11px;
       color: rgba(255, 255, 255, 0.8);
       cursor: pointer;
       transition: all 0.3s;
@@ -477,17 +491,17 @@ watch(
 
 // 滚动条样式
 .table-body::-webkit-scrollbar {
-  width: 8px;
+  width: 4px;
 }
 
 .table-body::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 .table-body::-webkit-scrollbar-thumb {
   background: linear-gradient(180deg, #40a9ff 0%, #1890ff 100%);
-  border-radius: 4px;
+  border-radius: 2px;
   border: 1px solid rgba(255, 255, 255, 0.1);
 }
 

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

@@ -1,5 +1,9 @@
 <template>
-  <div v-if="visible" class="response-status-dialog-overlay" @click="handleOverlayClick">
+  <div
+    v-if="visible"
+    class="response-status-dialog-overlay"
+    @click="handleOverlayClick"
+  >
     <div class="response-status-dialog" @click.stop>
       <!-- 标题栏 -->
       <div class="dialog-header">
@@ -9,30 +13,69 @@
         </div>
       </div>
 
+      <!-- 统计卡片 -->
+      <div class="stats-cards">
+        <div class="stat-card">
+          <div class="stat-label">影响桥梁</div>
+          <div class="stat-value">2933</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">影响边坡</div>
+          <div class="stat-value">2933</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">影响隧道</div>
+          <div class="stat-value">2933</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">影响项目</div>
+          <div class="stat-value">2933</div>
+        </div>
+      </div>
+
       <!-- 筛选区域 -->
       <div class="filter-section">
         <div class="filter-row">
           <div class="filter-item">
-            <el-select v-model="filterForm.pointType" placeholder="影响点类型" class="filter-select">
+            <el-select
-              <el-option label="全部" value="" />
+              v-model="filterForm.pointType"
-              <el-option label="边坡" value="slope" />
+              placeholder="影响点类型"
-              <el-option label="桥梁" value="bridge" />
+              class="filter-select"
-              <el-option label="隧道" value="tunnel" />
+            >
-              <el-option label="路面" value="road" />
+              <el-option
+                v-for="option in pointTypeOptions"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              />
             </el-select>
           </div>
           <div class="filter-item">
-            <el-select v-model="filterForm.pointLevel" placeholder="影响点等级" class="filter-select">
+            <el-select
-              <el-option label="全部" value="" />
+              v-model="filterForm.pointLevel"
-              <el-option label="一般隐患" value="normal" />
+              placeholder="影响点等级"
-              <el-option label="重大隐患" value="serious" />
+              class="filter-select"
+            >
+              <el-option
+                v-for="option in pointLevelOptions"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              />
             </el-select>
           </div>
           <div class="filter-item">
-            <el-select v-model="filterForm.isResponded" placeholder="是否回应" class="filter-select">
+            <el-select
-              <el-option label="全部" value="" />
+              v-model="filterForm.isResponded"
-              <el-option label="是" value="yes" />
+              placeholder="是否回应"
-              <el-option label="否" value="no" />
+              class="filter-select"
+            >
+              <el-option
+                v-for="option in isRespondedOptions"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              />
             </el-select>
           </div>
         </div>
@@ -41,18 +84,14 @@
       <!-- 数据表格 -->
       <div class="table-section">
         <div class="table-header">
-          <div class="th" style="width: 50px">序号</div>
+          <div
-          <div class="th" style="width: 80px">影响点类型</div>
+            v-for="(column, index) in tableColumns"
-          <div class="th" style="width: 180px">影响点位置</div>
+            :key="index"
-          <div class="th" style="width: 90px">影响点等级</div>
+            class="th"
-          <div class="th" style="width: 60px">查次数</div>
+            :style="{ width: column.width, flex: column.flex || 'none' }"
-          <div class="th" style="width: 120px">交通主管部门负责人</div>
+          >
-          <div class="th" style="width: 110px">公路机构责任人</div>
+            {{ column.label }}
-          <div class="th" style="width: 110px">养护站负责人</div>
+          </div>
-          <div class="th" style="width: 80px">护路员</div>
-          <div class="th" style="width: 70px">回应状态</div>
-          <div class="th" style="width: 110px">最新催告时间</div>
-          <div class="th" style="width: 50px">操作</div>
         </div>
         <div class="table-body">
           <div
@@ -63,9 +102,11 @@
           >
             <div class="td" style="width: 50px">{{ item.id }}</div>
             <div class="td" style="width: 80px">{{ item.pointType }}</div>
-            <div class="td" style="width: 180px">{{ item.pointLocation }}</div>
+            <div class="td" style="width: 150px">{{ item.pointLocation }}</div>
             <div class="td" style="width: 90px">
-              <span class="level-tag" :class="item.levelClass">{{ item.pointLevel }}</span>
+              <span class="level-tag" :class="item.levelClass">{{
+                item.pointLevel
+              }}</span>
             </div>
             <div class="td" style="width: 60px">{{ item.checkCount }}</div>
             <div class="td" style="width: 120px">
@@ -93,7 +134,9 @@
               </div>
             </div>
             <div class="td" style="width: 70px">
-              <span class="response-status" :class="item.responseClass">{{ item.responseStatus }}</span>
+              <span class="response-status" :class="item.responseClass">{{
+                item.responseStatus
+              }}</span>
             </div>
             <div class="td" style="width: 110px">
               <div class="time-info">
@@ -112,7 +155,11 @@
       <div class="pagination">
         <span class="total">共{{ total }}条数据</span>
         <div class="page-btns">
-          <div class="page-btn" :class="{ disabled: currentPage === 1 }" @click="prevPage">
+          <div
+            class="page-btn"
+            :class="{ disabled: currentPage === 1 }"
+            @click="prevPage"
+          >
             <el-icon><ArrowLeft /></el-icon>
           </div>
           <div
@@ -124,7 +171,11 @@
           >
             {{ page }}
           </div>
-          <div class="page-btn" :class="{ disabled: currentPage === totalPages }" @click="nextPage">
+          <div
+            class="page-btn"
+            :class="{ disabled: currentPage === totalPages }"
+            @click="nextPage"
+          >
             <el-icon><ArrowRight /></el-icon>
           </div>
         </div>
@@ -136,6 +187,7 @@
 <script setup>
 import { ref, computed, watch } from "vue";
 import { Close, ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
+import { pointTypeOptions, pointLevelOptions, isRespondedOptions } from "./index.js";
 
 const props = defineProps({
   visible: {
@@ -153,6 +205,22 @@ const filterForm = ref({
   isResponded: "",
 });
 
+// 表格列配置
+const tableColumns = ref([
+  { label: "序号", width: "50px" },
+  { label: "影响点类型", width: "80px" },
+  { label: "影响点位置", width: "150px" },
+  { label: "影响点等级", width: "90px" },
+  { label: "查次数", width: "60px" },
+  { label: "交通主管部门负责人", width: "120px" },
+  { label: "公路机构责任人", width: "110px" },
+  { label: "养护站负责人", width: "110px" },
+  { label: "护路员", width: "80px" },
+  { label: "回应状态", width: "70px" },
+  { label: "最新催告时间", width: "110px" },
+  { label: "操作", width: "50px" },
+]);
+
 // 表格数据
 const tableData = ref([
   {
@@ -260,7 +328,7 @@ watch(
       currentPage.value = 1;
       fetchData();
     }
-  }
+  },
 );
 </script>
 
@@ -279,8 +347,13 @@ watch(
 }
 
 .response-status-dialog {
-  width: 1150px;
+  width: 80vw;
-  background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
+  max-width: 1150px;
+  background: linear-gradient(
+    135deg,
+    rgba(20, 50, 90, 0.95) 0%,
+    rgba(10, 30, 60, 0.98) 100%
+  );
   border: 1px solid rgba(64, 169, 255, 0.3);
   border-radius: 12px;
   padding: 24px;
@@ -300,7 +373,13 @@ watch(
     font-weight: 600;
     color: #fff;
     padding: 8px 40px;
-    background: linear-gradient(90deg, transparent 0%, rgba(64, 169, 255, 0.2) 20%, rgba(64, 169, 255, 0.2) 80%, transparent 100%);
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(64, 169, 255, 0.2) 20%,
+      rgba(64, 169, 255, 0.2) 80%,
+      transparent 100%
+    );
     border-bottom: 2px solid #40a9ff;
   }
 
@@ -331,6 +410,7 @@ watch(
   .filter-row {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
     gap: 12px;
   }
 
@@ -373,7 +453,7 @@ watch(
   .table-header {
     display: flex;
     background-color: rgba(64, 169, 255, 0.2);
-    padding: 12px 16px;
+    padding: 12px 0;
 
     .th {
       font-size: 13px;
@@ -389,7 +469,7 @@ watch(
 
     .table-row {
       display: flex;
-      padding: 12px 16px;
+      padding: 12px 0px;
       align-items: center;
       transition: background-color 0.3s;
 
@@ -570,4 +650,46 @@ watch(
     }
   }
 }
+
+// 统计卡片
+.stats-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 20px;
+
+  .stat-card {
+    background: linear-gradient(
+      135deg,
+      rgba(30, 70, 120, 0.6) 0%,
+      rgba(20, 50, 90, 0.8) 100%
+    );
+    border: 2px solid rgba(64, 169, 255, 0.4);
+    border-radius: 8px;
+    padding: 16px 20px;
+    text-align: center;
+    transition: all 0.3s;
+    cursor: pointer;
+
+    &:hover {
+      border-color: rgba(64, 169, 255, 0.8);
+      box-shadow: 0 0 20px rgba(64, 169, 255, 0.3);
+      transform: translateY(-2px);
+    }
+
+    .stat-label {
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.8);
+      margin-bottom: 8px;
+      font-weight: 500;
+    }
+
+    .stat-value {
+      font-size: 28px;
+      font-weight: bold;
+      color: #40a9ff;
+      text-shadow: 0 0 10px rgba(64, 169, 255, 0.5);
+    }
+  }
+}
 </style>

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

@@ -93,9 +93,14 @@
         </div>
         <div class="responsible-table">
           <div class="table-header">
-            <div class="th" style="width: 30%">责任人类型</div>
+            <div
-            <div class="th" style="width: 40%">责任人</div>
+              v-for="(column, index) in tableColumns"
-            <div class="th" style="width: 30%">巡查频率</div>
+              :key="index"
+              class="th"
+              :style="{ width: column.width }"
+            >
+              {{ column.label }}
+            </div>
           </div>
           <div class="table-body">
             <div
@@ -192,6 +197,13 @@ const props = defineProps({
 
 const emit = defineEmits(["update:visible", "close", "viewTrack"]);
 
+// 表格列配置
+const tableColumns = ref([
+  { label: "责任人类型", width: "30%" },
+  { label: "责任人", width: "40%" },
+  { label: "巡查频率", width: "30%" },
+]);
+
 // 基本信息
 const basicInfo = ref({
   district: "合川区",
@@ -338,7 +350,8 @@ watch(
 }
 
 .risk-dialog {
-  width: 800px;
+  width: 80vw;
+  max-width: 800px;
   max-height: 90vh;
   overflow-y: auto;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);

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

@@ -24,7 +24,7 @@ defineProps({
 
 <style lang="scss" scoped>
 .section-header {
-  height: 50px;
+  height: 6.6667vw;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -35,20 +35,51 @@ defineProps({
   .header-left {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 1.0667vw;
-
+    font-size: 1.3333vw;
     .title {
-        margin-left: 35px;
+      margin-left: 2.667vw;
-        font-size: 14px;
+      font-weight: bold;
-        font-weight: bold;
+      color: #fff;
-        color: #fff;
+      font-size: 1vw;
-      }
+    }
   }
 
   .header-right {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 1.0667vw;
+  }
+
+  @media (max-width: 768px) {
+    height: 10.6667vw;
+
+    .header-left {
+      gap: 2.1333vw;
+
+      .title {
+        margin-left: 8vw;
+        font-size: 1vw;
+        font-weight: bold;
+        color: #fff;
+      }
+    }
+
+    .header-right {
+      gap: 2.1333vw;
+    }
+  }
+}
+
+// 插槽内容自适应
+::v-deep(.header-left .title),
+::v-deep(.header-left > span),
+::v-deep(.header-left > div) {
+  font-weight: bold;
+  color: #fff;
+
+  @media (max-width: 768px) {
+    font-size: 4vw;
   }
 }
 </style>

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

@@ -12,13 +12,14 @@
       <!-- 数据表格 -->
       <div class="table-section">
         <div class="table-header">
-          <div class="th" style="width: 60px">序号</div>
+          <div
-          <div class="th" style="width: 140px">区县/镇街</div>
+            v-for="(column, index) in tableColumns"
-          <div class="th" style="width: 100px">姓名</div>
+            :key="index"
-          <div class="th" style="width: 120px">电话</div>
+            class="th"
-          <div class="th" style="width: 180px">驻地名称</div>
+            :style="{ width: column.width, flex: column.flex || 'none' }"
-          <div class="th" style="flex: 1">类型</div>
+          >
-          <div class="th" style="width: 140px">调度</div>
+            {{ column.label }}
+          </div>
         </div>
         <div class="table-body">
           <div
@@ -92,6 +93,17 @@ const props = defineProps({
 
 const emit = defineEmits(["update:visible", "close", "video", "voice", "call", "stationNameClick"]);
 
+// 表格列配置
+const tableColumns = ref([
+  { label: "序号", width: "60px" },
+  { label: "区县/镇街", width: "140px" },
+  { label: "姓名", width: "100px" },
+  { label: "电话", width: "120px" },
+  { label: "驻地名称", width: "180px" },
+  { label: "类型", flex: "1" },
+  { label: "调度", width: "140px" },
+]);
+
 // 表格数据
 const tableData = ref([
   {
@@ -233,7 +245,8 @@ watch(
 }
 
 .tongnan-dialog {
-  width: 1000px;
+  width: 80vw;
+  max-width: 1000px;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
   border: 1px solid rgba(64, 169, 255, 0.3);
   border-radius: 12px;

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

@@ -12,16 +12,14 @@
       <!-- 数据表格 -->
       <div class="table-section">
         <div class="table-header">
-          <div class="th" style="width: 60px">序号</div>
+          <div
-          <div class="th" style="width: 100px">区县/镇街</div>
+            v-for="(column, index) in tableColumns"
-          <div class="th" style="width: 70px">总人数</div>
+            :key="index"
-          <div class="th" style="width: 70px">吹哨人</div>
+            class="th"
-          <div class="th" style="width: 130px">建设单位包保责任人</div>
+            :style="{ width: column.width, flex: column.flex || 'none' }"
-          <div class="th" style="width: 130px">施工单位包保责任人</div>
+          >
-          <div class="th" style="width: 120px">驻地包保责任人</div>
+            {{ column.label }}
-          <div class="th" style="width: 120px">区县级包保责任人</div>
+          </div>
-          <div class="th" style="width: 120px">市级包保责任人</div>
-          <div class="th" style="width: 60px">操作</div>
         </div>
         <div class="table-body">
           <div
@@ -84,6 +82,20 @@ const props = defineProps({
 
 const emit = defineEmits(["update:visible", "close", "detail"]);
 
+// 表格列配置
+const tableColumns = ref([
+  { label: "序号", width: "60px" },
+  { label: "区县/镇街", width: "100px" },
+  { label: "总人数", width: "70px" },
+  { label: "吹哨人", width: "70px" },
+  { label: "建设单位包保责任人", width: "130px" },
+  { label: "施工单位包保责任人", width: "130px" },
+  { label: "驻地包保责任人", width: "120px" },
+  { label: "区县级包保责任人", width: "120px" },
+  { label: "市级包保责任人", width: "120px" },
+  { label: "操作", width: "60px" },
+]);
+
 // 表格数据
 const tableData = ref([
   {
@@ -202,7 +214,8 @@ watch(
 }
 
 .responsible-dialog {
-  width: 1100px;
+  width: 80vw;
+  max-width: 1100px;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
   border: 1px solid rgba(64, 169, 255, 0.3);
   border-radius: 12px;
@@ -268,7 +281,7 @@ watch(
   }
 
   .table-body {
-    max-height: 320px;
+    max-height: 40vh;
     overflow-y: auto;
 
     .table-row {

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

@@ -12,14 +12,14 @@
       <!-- 数据表格 -->
       <div class="table-section">
         <div class="table-header">
-          <div class="th" style="width: 60px">序号</div>
+          <div
-          <div class="th" style="width: 100px">区县</div>
+            v-for="(column, index) in tableColumns"
-          <div class="th" style="width: 80px">总人数</div>
+            :key="index"
-          <div class="th" style="width: 140px">交通主管部门责任人</div>
+            class="th"
-          <div class="th" style="width: 120px">公路机构责任人</div>
+            :style="{ width: column.width, flex: column.flex || 'none' }"
-          <div class="th" style="width: 140px">养护站道班责任人</div>
+          >
-          <div class="th" style="width: 80px">护路员</div>
+            {{ column.label }}
-          <div class="th" style="flex: 1">操作</div>
+          </div>
         </div>
         <div class="table-body">
           <div
@@ -79,6 +79,18 @@ const props = defineProps({
 
 const emit = defineEmits(["update:visible", "close", "view"]);
 
+// 表格列配置
+const tableColumns = ref([
+  { label: "序号", width: "60px" },
+  { label: "区县", width: "100px" },
+  { label: "总人数", width: "80px" },
+  { label: "交通主管部门责任人", width: "140px" },
+  { label: "公路机构责任人", width: "120px" },
+  { label: "养护站道班责任人", width: "140px" },
+  { label: "护路员", width: "80px" },
+  { label: "操作", flex: "1" },
+]);
+
 // 表格数据
 const tableData = ref([
   {
@@ -211,7 +223,8 @@ watch(
 }
 
 .team-dialog {
-  width: 900px;
+  width: 80vw;
+  max-width: 900px;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
   border: 1px solid rgba(64, 169, 255, 0.3);
   border-radius: 12px;
@@ -277,7 +290,7 @@ watch(
   }
 
   .table-body {
-    max-height: 320px;
+    max-height: 40vh;
     overflow-y: auto;
 
     .table-row {

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

@@ -8,22 +8,35 @@
 
     <div class="dialog-header">
       <div class="header-title">
-        <span class="title-text">{{ data.title }}</span>
+        <span class="title-text">{{ rescueTeamData.title }}</span>
-        <img class="title-icon" src="../../../assets/RiskWarning_img/图标_media_dvr@2x.png" alt="" />
+        <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">
+      <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">
+      <div class="info-item" v-for="(item, index) in rescueTeamData.items" :key="index">
         <label class="info-label">{{ item.label }}：</label>
         <span class="info-value">{{ item.value }}</span>
       </div>
     </div>
+    <div class="dialog-imgs">
+      <img
+        class="dialog-img"
+        v-for="(img, index) in rescueTeamData.imgs"
+        :key="index"
+        :src="img"
+        alt=""
+      />
+    </div>
   </div>
 </template>
 
@@ -56,7 +69,6 @@ defineProps({
       ],
     }),
   },
-  
 });
 
 // 边坡信息数据
@@ -123,6 +135,7 @@ const rescueTeamData = {
     { label: "地址", value: "重庆市江津区双福工业园区赵坪路 157 号" },
     { label: "物资装备", value: "应急物资:8100 件;应急装备:33 台" },
   ],
+  imgs: ["", "", "", "", ""],
 };
 
 defineExpose({
@@ -145,22 +158,30 @@ const closeDialog = () => {
   @return calc($px / 1920 * 100vw);
 }
 .tunnel-info-dialog {
+  max-width: vw(300);
   width: vw(300);
-  width: 250px;
+  max-height: vw(600);
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
   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%;
+  z-index: 1000;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
   // 四个角的装饰
   .corner {
     position: absolute;
     width: vw(20);
     height: vw(20);
-    border: 2px solid #40a9ff;
+    border: 1px solid #40a9ff;
     pointer-events: none;
 
     &.corner-top-left {
@@ -168,7 +189,6 @@ const closeDialog = () => {
       left: 0;
       border-right: none;
       border-bottom: none;
-      border-top-left-radius: 6px;
     }
 
     &.corner-top-right {
@@ -176,7 +196,6 @@ const closeDialog = () => {
       right: 0;
       border-left: none;
       border-bottom: none;
-      border-top-right-radius: 6px;
     }
 
     &.corner-bottom-left {
@@ -184,7 +203,6 @@ const closeDialog = () => {
       left: 0;
       border-right: none;
       border-top: none;
-      border-bottom-left-radius: 6px;
     }
 
     &.corner-bottom-right {
@@ -192,7 +210,6 @@ const closeDialog = () => {
       right: 0;
       border-left: none;
       border-top: none;
-      border-bottom-right-radius: 6px;
     }
   }
 
@@ -264,4 +281,14 @@ const closeDialog = () => {
     }
   }
 }
+.dialog-imgs {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: vw(6);
+  padding: vw(16) vw(20);
+  .dialog-img {
+    width: vw(75);
+    height: vw(75);
+  }
+}
 </style>

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

@@ -14,35 +14,42 @@
         <div class="filter-row">
           <div class="filter-item">
             <el-select v-model="filterForm.warningLevel" placeholder="预警等级" class="filter-select">
-              <el-option label="全部" value="" />
+              <el-option
-              <el-option label="红色预警" value="red" />
+                v-for="option in warningLevelOptions"
-              <el-option label="橙色预警" value="orange" />
+                :key="option.value"
-              <el-option label="黄色预警" value="yellow" />
+                :label="option.label"
-              <el-option label="蓝色预警" value="blue" />
+                :value="option.value"
+              />
             </el-select>
           </div>
           <div class="filter-item">
             <el-select v-model="filterForm.region" placeholder="行政区域" class="filter-select">
-              <el-option label="全部" value="" />
+              <el-option
-              <el-option label="万州区" value="wanzhou" />
+                v-for="option in regionOptionsWithAll"
-              <el-option label="涪陵区" value="fuling" />
+                :key="option.value"
-              <el-option label="万盛区" value="wansheng" />
+                :label="option.label"
-              <el-option label="长寿区" value="changshou" />
+                :value="option.value"
-              <el-option label="城口区" value="chengkou" />
+              />
             </el-select>
           </div>
           <div class="filter-item">
             <el-select v-model="filterForm.isEnded" placeholder="是否结束" class="filter-select">
-              <el-option label="全部" value="" />
+              <el-option
-              <el-option label="是" value="yes" />
+                v-for="option in isEndedOptions"
-              <el-option label="否" value="no" />
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              />
             </el-select>
           </div>
           <div class="filter-item">
             <el-select v-model="filterForm.isResponded" placeholder="是否回应" class="filter-select">
-              <el-option label="全部" value="" />
+              <el-option
-              <el-option label="是" value="yes" />
+                v-for="option in isRespondedOptions"
-              <el-option label="否" value="no" />
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              />
             </el-select>
           </div>
           <div class="filter-item">
@@ -57,16 +64,14 @@
       <!-- 数据表格 -->
       <div class="table-section">
         <div class="table-header">
-          <div class="th" style="width: 60px">序号</div>
+          <div
-          <div class="th" style="width: 100px">预警等级</div>
+            v-for="(column, index) in tableColumns"
-          <div class="th" style="width: 100px">行政区域</div>
+            :key="index"
-          <div class="th" style="width: 160px">预警时间</div>
+            class="th"
-          <div class="th" style="width: 160px">结束时间</div>
+            :style="{ width: column.width, flex: column.flex || 'none' }"
-          <div class="th" style="width: 100px">影响点数量</div>
+          >
-          <div class="th clickable" style="width: 80px">已叫应</div>
+            {{ column.label }}
-          <div class="th" style="width: 80px">已回应</div>
+          </div>
-          <div class="th" style="width: 80px">未回应</div>
-          <div class="th" style="width: 80px">已催告</div>
         </div>
         <div class="table-body">
           <div
@@ -119,6 +124,7 @@
 <script setup>
 import { ref, computed, watch } from "vue";
 import { Close, Search, ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
+import { warningLevelOptions, regionOptionsWithAll, isEndedOptions, isRespondedOptions } from "./index.js";
 
 const props = defineProps({
   visible: {
@@ -137,6 +143,20 @@ const filterForm = ref({
   isResponded: "",
 });
 
+// 表格列配置
+const tableColumns = ref([
+  { label: "序号", width: "60px" },
+  { label: "预警等级", width: "100px" },
+  { label: "行政区域", width: "100px" },
+  { label: "预警时间", width: "160px" },
+  { label: "结束时间", width: "160px" },
+  { label: "影响点数量", width: "100px" },
+  { label: "已叫应", width: "80px" },
+  { label: "已回应", width: "80px" },
+  { label: "未回应", width: "80px" },
+  { label: "已催告", width: "80px" },
+]);
+
 // 表格数据
 const tableData = ref([
   {
@@ -204,6 +224,45 @@ const tableData = ref([
     notResponded: 0,
     urged: 15,
   },
+    {
+    id: 5,
+    warningLevel: "红色预警",
+    levelClass: "level-red",
+    region: "城口区",
+    warningTime: "2025-08-11 04:53:42",
+    endTime: "2025-08-11 04:53:42",
+    impactPoints: 0,
+    called: 0,
+    responded: 0,
+    notResponded: 0,
+    urged: 15,
+  },
+    {
+    id: 5,
+    warningLevel: "红色预警",
+    levelClass: "level-red",
+    region: "城口区",
+    warningTime: "2025-08-11 04:53:42",
+    endTime: "2025-08-11 04:53:42",
+    impactPoints: 0,
+    called: 0,
+    responded: 0,
+    notResponded: 0,
+    urged: 15,
+  },
+    {
+    id: 5,
+    warningLevel: "红色预警",
+    levelClass: "level-red",
+    region: "城口区",
+    warningTime: "2025-08-11 04:53:42",
+    endTime: "2025-08-11 04:53:42",
+    impactPoints: 0,
+    called: 0,
+    responded: 0,
+    notResponded: 0,
+    urged: 15,
+  },
 ]);
 
 // 分页
@@ -305,7 +364,8 @@ watch(
 }
 
 .warning-dialog {
-  width: 1100px;
+  width: 80vw;
+  max-width: 1000px;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
   border: 1px solid rgba(64, 169, 255, 0.3);
   border-radius: 12px;
@@ -363,7 +423,7 @@ watch(
 
   .filter-item {
     .filter-select {
-      width: 140px;
+      width: 120px;
 
       :deep(.el-input__wrapper) {
         background-color: rgba(30, 70, 120, 0.4);

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

@@ -45,19 +45,35 @@
               />
             </el-select>
           </div>
+          <div class="filter-item">
+            <span class="filter-label">时间范围</span>
+            <el-date-picker
+              v-model="filterForm.dateRange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              class="date-range-picker"
+              width="210px"
+              style="width: 210px"
+              clearable
+              value-format="YYYY-MM-DD"
+            />
+          </div>
         </div>
       </div>
 
       <!-- 数据表格 -->
       <div class="table-section">
         <div class="table-header">
-          <div class="th" style="width: 50px">序号</div>
+          <div
-          <div class="th" style="width: 100px">预警等级</div>
+            v-for="(column, index) in tableColumns"
-          <div class="th" style="width: 100px">气象类型</div>
+            :key="index"
-          <div class="th" style="width: 100px">行政区域</div>
+            class="th"
-          <div class="th" style="width: 160px">预警时间</div>
+            :style="{ width: column.width, flex: column.flex || 'none' }"
-          <div class="th" style="width: 160px">结束时间</div>
+          >
-          <div class="th" style="flex: 1">影响点数量</div>
+            {{ column.label }}
+          </div>
         </div>
         <div class="table-body">
           <div
@@ -108,6 +124,7 @@
 <script setup>
 import { ref, computed, watch } from "vue";
 import { Close } from "@element-plus/icons-vue";
+import { warningLevelOptions, regionOptions, isEndedOptions } from "./index.js";
 
 const props = defineProps({
   visible: {
@@ -123,28 +140,27 @@ const filterForm = ref({
   warningLevel: "",
   region: "",
   isEnded: "",
+  dateRange: [],
 });
 
 // 预警等级选项
-const warningLevelOptions = ref([
+// 已从 index.js 导入
-  { label: "红色预警", value: "红色预警" },
-  { label: "橙色预警", value: "橙色预警" },
-  { label: "黄色预警", value: "黄色预警" },
-  { label: "蓝色预警", value: "蓝色预警" },
-]);
 
 // 行政区域选项
-const regionOptions = ref([
+// 已从 index.js 导入
-  { label: "重庆市", value: "重庆市" },
-  { label: "万州区", value: "万州区" },
-  { label: "沙坪坝区", value: "沙坪坝区" },
-  { label: "渝中区", value: "渝中区" },
-]);
 
 // 是否结束选项
-const isEndedOptions = ref([
+// 已从 index.js 导入
-  { label: "是", value: "是" },
+
-  { label: "否", value: "否" },
+// 表格列配置
+const tableColumns = ref([
+  { label: "序号", width: "50px" },
+  { label: "预警等级", width: "100px" },
+  { label: "气象类型", width: "100px" },
+  { label: "行政区域", width: "100px" },
+  { label: "预警时间", width: "160px" },
+  { label: "结束时间", width: "160px" },
+  { label: "影响点数量", flex: "1" },
 ]);
 
 // 表格数据
@@ -290,7 +306,8 @@ watch(
 }
 
 .warning-dialog {
-  width: 950px;
+  width: 80vw;
+  max-width: 900px;
   background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
   border: 1px solid rgba(64, 169, 255, 0.3);
   border-radius: 12px;
@@ -341,7 +358,8 @@ watch(
 
   .filter-row {
     display: flex;
-    gap: 24px;
+    flex-wrap: wrap;
+    gap: 12px;
   }
 
   .filter-item {
@@ -363,6 +381,7 @@ watch(
         border: 1px solid rgba(64, 169, 255, 0.3);
         box-shadow: none;
         border-radius: 4px;
+        width: 210px !important;
 
         .el-input__inner {
           color: #fff;
@@ -380,6 +399,47 @@ watch(
         }
       }
     }
+
+    .date-range-picker {
+      :deep(.el-input__wrapper) {
+        background-color: rgba(30, 70, 120, 0.4);
+        border: 1px solid rgba(64, 169, 255, 0.3);
+        box-shadow: none;
+        border-radius: 4px;
+        width: 210px !important;
+
+        .el-input__inner {
+          color: #fff;
+          font-size: 13px;
+          background: transparent;
+
+          &::placeholder {
+            color: rgba(255, 255, 255, 0.4);
+          }
+        }
+
+        .el-input__suffix {
+          .el-icon {
+            color: rgba(255, 255, 255, 0.6);
+          }
+        }
+      }
+
+      :deep(.el-range-input) {
+        background: transparent;
+        color: #fff;
+        font-size: 13px;
+
+        &::placeholder {
+          color: rgba(255, 255, 255, 0.4);
+        }
+      }
+
+      :deep(.el-range-separator) {
+        color: rgba(255, 255, 255, 0.6);
+        font-size: 13px;
+      }
+    }
   }
 }
 
@@ -555,3 +615,62 @@ watch(
   background: linear-gradient(180deg, #69c0ff 0%, #40a9ff 100%);
 }
 </style>
+
+<style lang="scss">
+// 日期选择器弹出面板深色主题
+.el-picker-panel {
+  background: rgba(20, 50, 90, 0.98) !important;
+  border: 1px solid rgba(64, 169, 255, 0.3) !important;
+  
+  .el-picker-panel__content {
+    color: #fff;
+    
+    .el-date-table th {
+      color: rgba(255, 255, 255, 0.6);
+      border-bottom-color: rgba(64, 169, 255, 0.3);
+    }
+    
+    .el-date-table td {
+      color: rgba(255, 255, 255, 0.8);
+      
+      &.selected .el-date-table-cell {
+        background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
+      }
+      
+      &.today span {
+        color: #40a9ff;
+        font-weight: bold;
+      }
+      
+      &.in-range,
+      &.start-date,
+      &.end-date {
+        background: rgba(64, 169, 255, 0.2);
+      }
+    }
+  }
+  
+  .el-picker-panel__footer {
+    border-top: 1px solid rgba(64, 169, 255, 0.3);
+    
+    .el-button {
+      background: rgba(30, 70, 120, 0.4);
+      border-color: rgba(64, 169, 255, 0.3);
+      color: #fff;
+      
+      &:hover {
+        background: rgba(64, 169, 255, 0.3);
+      }
+    }
+    
+    .el-button--primary {
+      background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
+      border: none;
+      
+      &:hover {
+        background: linear-gradient(135deg, #69c0ff 0%, #40a9ff 100%);
+      }
+    }
+  }
+}
+</style>

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

@@ -7,7 +7,11 @@
         alt=""
       />
       <div class="title_img_box">
-        <img class="title_img1" src="../../assets/RiskWarning_img/位图@2x.png" alt="" />
+        <img
+          class="title_img1"
+          src="../../assets/RiskWarning_img/位图@2x.png"
+          alt=""
+        />
         <img
           class="title_img2"
           src="../../assets/RiskWarning_img/渝路畅行-风险预警一键响应@2x.png"
@@ -44,7 +48,9 @@
 
       <div
         class="center-info-card"
-        v-if="showCenterCard.type === 'second' || showCenterCard.type === 'third'"
+        v-if="
+          showCenterCard.type === 'second' || showCenterCard.type === 'third'
+        "
       >
         <div
           class="card-title"
@@ -52,8 +58,8 @@
             showCenterCard.type === 'second'
               ? openDialog('tongnanTeam')
               : showCenterCard.type === 'third'
-              ? openDialog('responseSituation')
+                ? openDialog('responseSituation')
-              : ''
+                : ''
           "
         >
           潼南
@@ -90,7 +96,6 @@
         @openClearanceSituation="openDialog('clearanceSituation')"
         @openControlSituation="openDialog('controlSituation')"
       ></right>
-      
     </div>
     <!-- 地图中心 -->
     <div class="center">
@@ -245,8 +250,8 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
-import useMapStore from '@/map/stores/mapStore'
+import useMapStore from "@/map/stores/mapStore";
-import { useMapBase } from '../cockpit/composables/useMapBase'
+import { useMapBase } from "../cockpit/composables/useMapBase";
 import left from "./left.vue";
 import right from "./right.vue";
 import bottom from "./bottom.vue";
@@ -296,7 +301,7 @@ const dialogVisible = ref({
   dispatchDistrict: false,
   tongnanTeam: false,
   warningSituation: false,
-  tunnelInfo: true, 
+  tunnelInfo: false,
 });
 
 // 打开弹窗
@@ -307,7 +312,7 @@ const openDialog = (dialogName) => {
 // 关闭弹窗
 const closeDialog = (dialogName) => {
   // 关闭弹窗时，重置弹窗数据
-  console.log('关闭弹窗', dialogName)
+  console.log("关闭弹窗", dialogName);
   dialogVisible.value[dialogName] = false;
 };
 
@@ -330,12 +335,12 @@ const showCenterCard = ref(false);
 
 // ==================== 地图状态管理 ====================
 
-const mapStore = useMapStore()
+const mapStore = useMapStore();
 
 /**
  * 加载地图的业务底图与聚焦中心点
  */
-const mapBase = useMapBase(mapStore)
+const mapBase = useMapBase(mapStore);
 
 // ==================== 生命周期 ====================
 
@@ -344,8 +349,8 @@ const mapBase = useMapBase(mapStore)
  */
 onMounted(() => {
   // 加载地图业务底图 并 聚焦中心点
-  mapBase.loadBaseData()
+  mapBase.loadBaseData();
-})
+});
 </script>
 
 <style lang="scss" scoped>
@@ -369,7 +374,6 @@ onMounted(() => {
   left: 0;
   width: 100%;
   height: vw(100);
-  min-height: 70px;
   z-index: 100;
 
   .title_bg {
@@ -410,32 +414,35 @@ onMounted(() => {
 .left {
   position: absolute;
   left: 0;
-  top: vw(100);
+  top: vw(90);
   width: 25%;
-  height: calc(100% - #{vw(100)});
+  height: calc(100% - #{vw(90)});
+  z-index: 2;
 }
 
 .right {
   position: absolute;
   right: 0;
-  top: vw(100);
+  top: vw(90);
   width: 25%;
-  height: calc(100% - #{vw(100)});
+  height: calc(100% - #{vw(90)});
+  z-index: 2;
 }
 
 .bottom {
   position: absolute;
-  bottom: 0px;
+  bottom: 5px;
-  left: 30%;
+  left: 25%;
-  width: 40%;
+  width: 50%;
-  height: 50%;
+  height: 43%;
 }
 
 .top {
   position: absolute;
-  top: vw(120);
+  top: vw(100);
-  left: 30%;
+  left: 25%;
-  width: 40%;
+  width: 50%;
+  z-index: 2;
   // height: 15%;
   // background-color: #15293B;
 }
@@ -446,7 +453,7 @@ onMounted(() => {
   // left: 25%;
   width: 100%;
   height: 100%;
-  z-index: -1;
+  z-index: 1;
 }
 
 /* 地图底层 - 填满整个容器 */
@@ -464,17 +471,16 @@ onMounted(() => {
   z-index: 1;
   pointer-events: none;
   /* 不阻挡交互 */
-  background: url(../../assets/RiskWarning_img/遮罩层.png) no-repeat center/cover;
+  background: url(../../assets/RiskWarning_img/遮罩层.png) no-repeat
+    center/cover;
 }
 
 // 四个角的装饰
 .corner {
   position: absolute;
-  width: vw(30);
+  width: vw(20);
-  height: vw(30);
+  height: vw(20);
-  min-width: 20px;
+  border: 1px solid #40a9ff;
-  min-height: 20px;
-  border: 2px solid #40a9ff;
   z-index: 100;
   pointer-events: none;
 
@@ -483,7 +489,6 @@ onMounted(() => {
     left: vw(10);
     border-right: none;
     border-bottom: none;
-    border-top-left-radius: 4px;
   }
 
   &.corner-top-right {
@@ -491,7 +496,6 @@ onMounted(() => {
     right: vw(10);
     border-left: none;
     border-bottom: none;
-    border-top-right-radius: 4px;
   }
 
   &.corner-bottom-left {
@@ -499,7 +503,6 @@ onMounted(() => {
     left: vw(10);
     border-right: none;
     border-top: none;
-    border-bottom-left-radius: 4px;
   }
 
   &.corner-bottom-right {
@@ -507,17 +510,16 @@ onMounted(() => {
     right: vw(10);
     border-left: none;
     border-top: none;
-    border-bottom-right-radius: 4px;
   }
 }
 
 .center-info-card-container {
   position: absolute;
   top: 30%;
-  left: 35%;
+  left: 32%;
   transform: translate(-50%, -50%);
-  width: vw(250);
+  width: vw(200);
-  min-width: 180px;
+  min-width: 200px;
   z-index: 200;
 }
 // 中心数据展示卡片
@@ -525,7 +527,9 @@ onMounted(() => {
   background: rgba(64, 169, 255, 0.2);
   border: 1px solid rgba(64, 169, 255, 0.3);
   z-index: 50;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  box-shadow:
+    0 4px 20px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
   cursor: pointer;
   transition: all 0.3s;
   margin-bottom: vw(10);
@@ -541,7 +545,7 @@ onMounted(() => {
     font-weight: 600;
     color: #fff;
     margin-bottom: vw(12);
-     background: rgba(64, 169, 255, 0.8);
+    background: rgba(64, 169, 255, 0.8);
     padding: vw(16) vw(20);
     border-bottom: 1px solid rgba(64, 169, 255, 0.1);
   }

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

@@ -1,10 +1,10 @@
 <template>
   <div class="left-panel">
     <!-- 智能研判头部 -->
-    <SectionHeader>
+    <SectionHeader title="智能研判">
       <template #left>
         <div class="filter-header">
-          <span>智能研判</span>
+          <span class="title">智能研判</span>
           <img
             class="filter-icon-ai"
             src="../../assets/RiskWarning_img/AI1@2x.png"
@@ -32,8 +32,8 @@
             alt=""
           />
           <div class="card-info">
-            <div class="card-num mt_10">{{ item.value }}</div>
+            <div class="card-num mt_5">{{ item.value }}</div>
-            <div class="card-label mb_10">{{ item.label }}</div>
+            <div class="card-label mb_5">{{ item.label }}</div>
           </div>
         </div>
       </div>
@@ -71,7 +71,7 @@
     <div class="road-type-section">
       <div class="section-title">影响公路类型情况</div>
       <div class="road-type-cards">
-        <div class="road-card"> 
+        <div class="road-card">
           <span class="card-label">国省道：</span>
           <span class="card-value">100</span>
         </div>
@@ -86,7 +86,12 @@
     <div class="district-table-section">
       <el-table
         :data="districtData"
-        style="width: 100%; background: transparent; font-size: 12px"
+        style="
+          width: 100%;
+          background: transparent;
+          font-size: 12px;
+          height: 150px;
+        "
         :header-cell-style="headerCellStyle"
         :cell-style="cellStyle"
         size="small"
@@ -172,7 +177,8 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
+import request from "../../../../shared/api/request";
 
 import SectionHeader from "./component/sectionHeader.vue";
 
@@ -236,27 +242,49 @@ import imgHelp from "../../assets/RiskWarning_img/响应图标5@2x.png";
 import imgCheck from "../../assets/RiskWarning_img/抽查人数icon@2x.png";
 
 // 气象预警数据
-const weatherWarningData = [
+const weatherWarningData = ref([
-  { label: "红色预警", value: '8/13', class: "red" },
+  { label: "红色预警", value: "8/13", class: "red" },
-  { label: "橙色预警", value: '12/14', class: "orange" },
+  { label: "橙色预警", value: "12/14", class: "orange" },
-  { label: "黄色预警", value: '27/15', class: "yellow" },
+  { label: "黄色预警", value: "27/15", class: "yellow" },
-  { label: "蓝色预警", value: '15/15', class: "blue" },
+  { label: "蓝色预警", value: "15/15", class: "blue" },
-];
+]);
 
 // 影响点数据
-const impactData = [
+const impactData = ref([
   { label: "路段", value: 830 },
   { label: "桥梁", value: 312 },
   { label: "隧道", value: 405 },
   { label: "边坡", value: 634 },
   { label: "项目", value: 523 },
-];
+]);
 
 // 日期范围选择器
 const dateRange = ref([]);
 
+// 加载气象预警和影响点数据
+const loadData = async () => {
+  try {
+    const response = await request.get(
+      "/snow-ops-platform/weatherWarning/statistics",
+    );
+    if (response.data) {
+      const data = response.data;
+      if (data.weatherWarning) {
+        weatherWarningData.value = data.weatherWarning;
+      }
+      if (data.impactData) {
+        impactData.value = data.impactData;
+      }
+    }
+  } catch (error) {
+    console.error("加载数据失败:", error);
+  }
+};
+
 // 计算最大值用于动态计算高度
-const maxValue = Math.max(...impactData.map((item) => item.value));
+const maxValue = computed(() => {
+  return Math.max(...impactData.value.map((item) => item.value));
+});
 
 // 计算每个柱子的高度百分比
 const getBarHeight = (value) => {
@@ -353,21 +381,27 @@ const cellStyle = () => ({
   textAlign: "center",
   lineHeight: "1.2",
 });
+
+onMounted(() => {
+  loadData();
+});
 </script>
 
 <style lang="scss" scoped>
 .filter-header {
-  margin-left: 35px;
+  margin-left: 2.667vw;
+  align-items: center;
+  color: #fff;
+  font-weight: bold;
   display: flex;
   align-items: center;
-  gap: vw(8);
+  .title {
-  color: #fff;
+    font-size: 1vw;
-  font-size: vw(24);
+  }
-  font-weight: bold;
 }
 .filter-icon-ai {
-  width: 30px;
+  width: 1.5em;
-  height: 30px;
+  height: 1.5em;
   margin-left: 10px;
 }
 // 视频屏幕自适应 - 基于视口宽度动态调整
@@ -400,7 +434,6 @@ const cellStyle = () => ({
 
   .section-header {
     height: vw(50);
-    min-height: 40px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -415,7 +448,6 @@ const cellStyle = () => ({
       gap: vw(8);
       margin-left: vw(35);
       color: #fff;
-      font-size: vw(24);
       font-weight: bold;
 
       .icon-back {
@@ -423,7 +455,7 @@ const cellStyle = () => ({
         height: vw(20);
         min-width: 16px;
         min-height: 16px;
-        background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
+        background: linear-gradient(135deg, #18f2f9 0%, #1890ff 100%);
         border-radius: 4px;
         display: flex;
         align-items: center;
@@ -432,15 +464,8 @@ const cellStyle = () => ({
         &::before {
           content: "←";
           color: #fff;
-          font-size: vw(12);
         }
       }
-
-      .title {
-        font-size: vw(12);
-        font-weight: bold;
-        color: #fff;
-      }
     }
 
     .header-date {
@@ -463,18 +488,16 @@ const cellStyle = () => ({
     .warning-cards {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
-      gap: vw(10);
       display: flex;
+      gap: vw(5);
 
       .warning-card {
         display: flex;
         align-items: center;
-        gap: vw(10);
         flex: 1;
         // padding: 12px;
         background: rgba(64, 169, 255, 0.1);
         border: 1px solid rgba(64, 169, 255, 0.2);
-        border-radius: 6px;
 
         .card-icon {
           width: 100%;
@@ -493,7 +516,7 @@ const cellStyle = () => ({
         .card-info {
           flex: 1;
           .card-num {
-            font-size: vw(20);
+            font-size: vw(18);
             font-weight: bold;
             margin-bottom: 2px;
           }
@@ -514,7 +537,7 @@ const cellStyle = () => ({
           color: #ffc53d;
         }
         &.blue .card-num {
-          color: #40a9ff;
+          color: #379afd;
         }
       }
     }
@@ -537,7 +560,7 @@ const cellStyle = () => ({
 
       .impact-detail {
         font-size: vw(14);
-        color: #40a9ff;
+        color: #18f2f9;
         cursor: pointer;
 
         &.clickable {
@@ -553,8 +576,7 @@ const cellStyle = () => ({
 
     .chart-container {
       position: relative;
-      height: vw(120);
+      height: vw(100);
-      height: 70px;
       display: flex;
       // padding: 10px 0 30px 40px;
 
@@ -608,7 +630,7 @@ const cellStyle = () => ({
             background: rgba(64, 169, 255, 0.15);
 
             .bar-value {
-              color: #40a9ff;
+              color: #18f2f9;
               transform: scale(1.1);
             }
 
@@ -639,7 +661,7 @@ const cellStyle = () => ({
             min-width: 16px;
             background: linear-gradient(
               180deg,
-              #40a9ff 0%,
+              #18f2f9 0%,
               rgba(64, 169, 255, 0.3) 100%
             );
             border-radius: 2px 2px 0 0;
@@ -688,19 +710,18 @@ const cellStyle = () => ({
         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: 1px solid #1d4c60;
-        border-radius: 6px;
         box-shadow: inset 0px 0px 8px 0px rgba(55, 155, 255, 0.2);
 
         .card-label {
-          font-size: vw(14);
+          font-size: vw(18);
           color: rgba(255, 255, 255, 0.7);
         }
 
         .card-value {
-          font-size: vw(24);
+          font-size: vw(22);
           font-weight: bold;
-          color: #40a9ff;
+          color: #18f2f9;
           text-shadow: 0 0 10px rgba(64, 169, 255, 0.5);
         }
       }
@@ -711,7 +732,7 @@ const cellStyle = () => ({
   .district-table-section {
     height: vw(100);
     overflow: hidden;
-    
+
     :deep(.el-table) {
       background: transparent;
 
@@ -739,7 +760,7 @@ const cellStyle = () => ({
         max-height: calc(#{vw(100)} - #{vw(40)}); /* 减去表头高度 */
         scrollbar-width: none;
         -ms-overflow-style: none;
-        
+
         &::-webkit-scrollbar {
           display: none;
         }
@@ -769,6 +790,7 @@ const cellStyle = () => ({
     margin-top: vw(20);
 
     .section-header {
+      height: vw(50);
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -788,7 +810,7 @@ const cellStyle = () => ({
           height: vw(20);
           min-width: 16px;
           min-height: 16px;
-          background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
+          background: linear-gradient(135deg, #18f2f9 0%, #1890ff 100%);
           border-radius: 4px;
           display: flex;
           align-items: center;
@@ -800,12 +822,6 @@ const cellStyle = () => ({
             font-size: vw(12);
           }
         }
-
-        .title {
-          font-size: vw(14);
-          font-weight: bold;
-          color: #fff;
-        }
       }
 
       .header-filters {
@@ -815,17 +831,11 @@ const cellStyle = () => ({
         font-size: vw(10);
 
         .filter-item {
-          color: rgba(255, 255, 255, 0.6);
+          color: #fff;
-          padding: vw(3) vw(8);
+          padding: vw(8) vw(8);
-          border: 1px solid rgba(64, 169, 255, 0.3);
+          background: #183c67;
-          border-radius: 4px;
+          box-shadow: inset 0px 0px 8px 0px #4fecff;
           cursor: pointer;
-
-          &.active {
-            background: rgba(64, 169, 255, 0.2);
-            color: #40a9ff;
-            border-color: rgba(64, 169, 255, 0.5);
-          }
         }
 
         .filter-separator {
@@ -838,16 +848,18 @@ const cellStyle = () => ({
     .stats-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
-      gap: vw(10);
+      // gap: vw(10);
-      margin-bottom: vw(15);
+      background: rgba(64, 169, 255, 0.1);
+      border: 1px solid rgba(64, 169, 255, 0.2);
+
+      margin-bottom: vw(10);
 
       .stat-item {
         display: flex;
         align-items: center;
-        gap: vw(8);
+        // gap: vw(8);
         padding: vw(10);
-        background: rgba(64, 169, 255, 0.08);
+        // background: rgba(64, 169, 255, 0.08);
-        border-radius: 6px;
 
         .stat-icon {
           width: 100%;
@@ -882,7 +894,7 @@ const cellStyle = () => ({
           .stat-num {
             font-size: vw(24);
             font-weight: bold;
-            color: #40a9ff;
+            color: #18f2f9;
             margin-bottom: 2px;
           }
 
@@ -898,7 +910,7 @@ const cellStyle = () => ({
 
           &:hover {
             background: rgba(64, 169, 255, 0.2);
-            transform: translateY(-2px);
+            // transform: translateY(-2px);
 
             .stat-num {
               color: #69c0ff;
@@ -919,7 +931,6 @@ const cellStyle = () => ({
         padding: vw(12);
         background: rgba(64, 169, 255, 0.1);
         border: 1px solid rgba(64, 169, 255, 0.2);
-        border-radius: 6px;
         text-align: center;
 
         &.clickable {
@@ -940,7 +951,7 @@ const cellStyle = () => ({
         .card-num {
           font-size: vw(20);
           font-weight: bold;
-          color: #40a9ff;
+          color: #18f2f9;
           margin-bottom: vw(6);
 
           .unit {
@@ -962,11 +973,12 @@ const cellStyle = () => ({
 
 .date-range-wrapper {
   :deep(.el-date-editor) {
-    width: vw(200);
+    border-radius: 0px !important;
-    min-width: 140px;
+    height: 3.1em !important;
-    background: transparent;
+  }
-    border: 1px solid rgba(64, 169, 255, 0.3);
+  :deep(.el-date-editor) {
-    border-radius: 4px;
+    width: 200px;
+    max-width: vw(200);
     background: #183c67;
     box-shadow: inset 0px 0px 8px 0px #4fecff;
 

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

@@ -26,8 +26,13 @@
 
       <!-- 管控路段数 -->
       <div class="control-section">
-        <div class="control-title">
+        <div class="control-title display jc_sb ai_center">
-          管控路段数 <span class="control-num">2</span>
+          <div class="f1">
+            管控路段数 <span class="control-num">2</span>
+          </div>
+          <div class="f1">
+            管控项目 <span class="control-num">2</span>
+          </div>
         </div>
         <div style="display: flex; justify-content: space-between">
           <div class="control-grid">
@@ -65,9 +70,15 @@
 
       <!-- 巡查公路里程 -->
       <div class="patrol-section">
-        <div class="patrol-header">
+        <div class="patrol-header display jc_sb ai_center">
-          <span class="patrol-title">巡查公路里程</span>
+          <div>
-          <span class="patrol-mileage">234882km</span>
+            <span class="patrol-title">巡查公路里程</span>
+            <span class="patrol-mileage ml_10">234882km</span>
+          </div>
+          <div>
+            <span class="patrol-title">巡查项目数</span>
+            <span class="patrol-mileage ml_10">6处</span>
+          </div>
         </div>
         <div class="patrol-grid">
           <div
@@ -212,8 +223,8 @@ import icon3 from "../../assets/RiskWarning_img/icon3@2x.png";
 import icon4 from "../../assets/RiskWarning_img/icon4@2x.png";
 
 import icon11 from "../../assets/RiskWarning_img/icon-1@2x.png";
-import icon12 from "../../assets/RiskWarning_img/icon-1@2x.png";
+import icon12 from "../../assets/RiskWarning_img/icon-2@2x.png";
-import icon13 from "../../assets/RiskWarning_img/icon-1@2x.png";
+import icon13 from "../../assets/RiskWarning_img/icon-3@2x.png";
 
 import icon51 from "../../assets/RiskWarning_img/编组5@2x.png";
 import icon52 from "../../assets/RiskWarning_img/编组22@2x.png";
@@ -277,7 +288,7 @@ const patrolData = [
   { label: "巡查桥梁数", value: "1" },
   { label: "巡查边坡数", value: "6" },
   { label: "巡查隧道数", value: "10" },
-  { label: "巡查项目数", value: "6" },
+  { label: "发现隐患数", value: "6" },
 ];
 
 // 抢险投入数据
@@ -373,19 +384,20 @@ const majorEvent = "0";
   justify-content: space-between;
   background-image: url("../../assets/RiskWarning_img/标题bg@2x.png");
   align-items: center;
-  margin-bottom: vw(15);
+  margin-bottom: vw(8);
+  height: vw(50);
 
   .header-left {
     display: flex;
     align-items: center;
-    gap: vw(8);
+    gap: vw(6);
 
     .icon-back {
-      width: vw(20);
+      width: vw(16);
-      height: vw(20);
+      height: vw(16);
-      min-width: 16px;
+      min-width: 14px;
-      min-height: 16px;
+      min-height: 14px;
-      background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
+      background: linear-gradient(135deg, #18F2F9 0%, #1890ff 100%);
       border-radius: 4px;
       display: flex;
       align-items: center;
@@ -394,12 +406,12 @@ const majorEvent = "0";
       &::before {
         content: "←";
         color: #fff;
-        font-size: vw(12);
+        font-size: vw(10);
       }
     }
 
     .title {
-      font-size: vw(12);
+      font-size: vw(14);
       font-weight: bold;
       color: #fff;
     }
@@ -410,34 +422,34 @@ const majorEvent = "0";
 .resource-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: vw(10);
+  gap: vw(6);
-  margin-bottom: vw(10);
+  margin-bottom: vw(6);
 
   .resource-item {
     display: flex;
     align-items: center;
-    gap: vw(10);
+    gap: vw(6);
-    padding: vw(8) vw(12);
+    padding: vw(4) vw(8);
-    background: linear-gradient(270deg, rgba(18, 84, 97, 0) 0%, #204a55 100%);
+    background: linear-gradient(270deg, rgba(18, 52, 97, 0) 0%, #203555 100%);
     border: 2px solid transparent;
     border-image: linear-gradient(
         270deg,
-        rgba(80, 201, 191, 0),
+        rgba(80, 145, 201, 0),
-        rgba(39, 135, 153, 1)
+        rgba(39, 77, 153, 1)
       )
       2 2;
     border-radius: 6px;
     border-right: 0px;
 
     .resource-icon {
-      width: vw(32);
+      width: vw(24);
-      height: vw(32);
+      height: vw(24);
-      min-width: 20px;
+      min-width: 16px;
-      min-height: 20px;
+      min-height: 16px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: vw(20);
+      font-size: vw(18);
 
       &.icon-team::before {
         content: "👷";
@@ -462,13 +474,13 @@ const majorEvent = "0";
         width: 48%;
         font-size: vw(12);
         color: rgba(255, 255, 255, 0.7);
-        margin-bottom: vw(4);
+        margin-bottom: vw(2);
       }
 
       .resource-value {
-        font-size: vw(18);
+        font-size: vw(16);
         font-weight: bold;
-        color: #40a9ff;
+        color: #18F2F9;
 
         .unit {
           font-size: vw(12);
@@ -486,14 +498,15 @@ const majorEvent = "0";
   margin-bottom: vw(10);
 
   .control-title {
-    font-size: vw(14);
+    font-size: vw(16);
     color: rgba(255, 255, 255, 0.9);
     margin-bottom: vw(10);
+    font-weight: 600;
 
     .control-num {
       font-size: vw(16);
 
-      color: #40a9ff;
+      color: #18F2F9;
       font-weight: bold;
       margin-left: vw(5);
     }
@@ -503,13 +516,13 @@ const majorEvent = "0";
     flex: 1;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    background: rgba(64, 169, 255, 0.1);
+    background: rgba(62, 106, 172, 0.36);
     box-shadow: inset 0px 0px 8px 0px #379bff;
     gap: vw(8);
 
     .control-item {
       text-align: center;
-      padding: vw(6) vw(5);
+      padding: vw(5) vw(5);
       // background: rgba(64, 169, 255, 0.1);
       border-radius: 4px;
 
@@ -520,18 +533,14 @@ const majorEvent = "0";
         &:hover {
           background-color: rgba(64, 169, 255, 0.15);
 
-          .control-value {
-            color: #69c0ff;
-            text-shadow: 0 0 8px rgba(105, 192, 255, 0.6);
-          }
         }
       }
 
       .control-value {
         font-size: vw(18);
         font-weight: bold;
-        color: #40a9ff;
+        color: #18F2F9;
-        margin-bottom: vw(4);
+        // margin-bottom: vw(4);
       }
 
       .control-label {
@@ -553,14 +562,14 @@ const majorEvent = "0";
     margin-bottom: vw(10);
 
     .patrol-title {
-      font-size: vw(14);
+      font-size: vw(16);
       color: rgba(255, 255, 255, 0.9);
     }
 
     .patrol-mileage {
       font-size: vw(16);
       font-weight: bold;
-      color: #40a9ff;
+      color: #4FECFF;
     }
   }
 
@@ -581,7 +590,7 @@ const majorEvent = "0";
       .patrol-value {
         font-size: vw(18);
         font-weight: bold;
-        color: #40a9ff;
+        color: #4FECFF;
         margin-bottom: vw(4);
         text-align: left;
         margin-left: vw(5);
@@ -598,7 +607,7 @@ const majorEvent = "0";
 // 抢险投入情况
 .rescue-section {
   .rescue-title {
-    font-size: vw(14);
+    font-size: vw(16);
     color: rgba(255, 255, 255, 0.9);
     margin-bottom: vw(10);
   }
@@ -621,10 +630,8 @@ const majorEvent = "0";
       background-position: right;
 
       .rescue-icon {
-        width: vw(36);
+        width: vw(40);
-        height: vw(36);
+        height: vw(40);
-        min-width: 24px;
-        min-height: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -646,7 +653,7 @@ const majorEvent = "0";
         .rescue-value {
           font-size: vw(18);
           font-weight: bold;
-          color: #40a9ff;
+          color: #fff;
           margin-bottom: vw(4);
           display: flex;
           align-items: center;
@@ -670,7 +677,7 @@ const majorEvent = "0";
 
 // 受灾情况样式
 .disaster-section {
-  margin-top: vw(15);
+  margin-top: vw(10);
 
   .block-section {
     margin-bottom: vw(10);
@@ -689,7 +696,7 @@ const majorEvent = "0";
     }
 
     .block-title {
-      font-size: vw(14);
+      font-size: vw(16);
       color: rgba(255, 255, 255, 0.8);
       margin-bottom: vw(10);
     }
@@ -713,7 +720,7 @@ const majorEvent = "0";
         background: linear-gradient(
           180deg,
           transparent 0%,
-          #40a9ff 50%,
+          #18F2F9 50%,
           transparent 100%
         );
         // margin: 0 auto;
@@ -734,7 +741,7 @@ const majorEvent = "0";
           margin-bottom: vw(6);
 
           .current {
-            color: #40a9ff;
+            color: #18F2F9;
           }
 
           .separator {
@@ -756,7 +763,7 @@ const majorEvent = "0";
           .death-num {
             font-size: vw(18);
             font-weight: bold;
-            color: #40a9ff;
+            color: #fff;
             margin-bottom: vw(6);
           }
 
@@ -770,10 +777,10 @@ const majorEvent = "0";
   }
 
   .damage-section {
-    margin-bottom: vw(10);
+    margin-bottom: vw(5);
 
     .damage-title {
-      font-size: vw(14);
+      font-size: vw(16);
       color: rgba(255, 255, 255, 0.8);
       margin-bottom: vw(10);
     }
@@ -781,7 +788,7 @@ const majorEvent = "0";
     .damage-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
-      gap: vw(10);
+      gap: vw(5);
 
       .damage-item {
         text-align: center;
@@ -810,7 +817,7 @@ const majorEvent = "0";
         }
 
         &.blue .damage-value {
-          color: #40a9ff;
+          color: #18F2F9;
           .unit {
             color: rgba(255, 255, 255, 0.7);
           }
@@ -854,17 +861,11 @@ const majorEvent = "0";
   font-size: vw(10);
 
   .filter-item {
-    color: rgba(255, 255, 255, 0.6);
+    color: #fff;
-    padding: vw(3) vw(8);
+    padding: vw(8) vw(8);
-    border: 1px solid rgba(64, 169, 255, 0.3);
+    background: #183c67;
-    border-radius: 4px;
+    box-shadow: inset 0px 0px 8px 0px #4fecff;
     cursor: pointer;
-
-    &.active {
-      background: rgba(64, 169, 255, 0.2);
-      color: #40a9ff;
-      border-color: rgba(64, 169, 255, 0.5);
-    }
   }
 
   .filter-separator {
@@ -873,10 +874,12 @@ const majorEvent = "0";
 }
 .date-range-wrapper {
   :deep(.el-date-editor) {
-    width: 200px;
+    border-radius: 0px !important;
-    background: transparent;
+    height: 3.1em !important;
-    border: 1px solid rgba(64, 169, 255, 0.3);
+  }
-    border-radius: 4px;
+  :deep(.el-date-editor) {
+    width: vw(200);
+    max-width: vw(200);
     background: #183c67;
     box-shadow: inset 0px 0px 8px 0px #4fecff;
 

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

@@ -64,17 +64,11 @@ const handleAIClick = () => {
   font-size: vw(13);
 
   .filter-item {
-    color: rgba(255, 255, 255, 0.6);
+    color: #fff;
-    padding: 0 vw(12);
+    padding: vw(8) vw(8);
-    height: vw(24);
-    min-height: 20px;
-    border: 1px solid rgba(64, 169, 255, 0.3);
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-
     background: #183c67;
     box-shadow: inset 0px 0px 8px 0px #4fecff;
+    cursor: pointer;
 
     // &:hover {
     //   border-color: rgba(64, 169, 255, 0.5);
@@ -89,12 +83,13 @@ const handleAIClick = () => {
   }
 
   .date-range-wrapper {
+    :deep(.el-date-editor) {
+      border-radius: 0px !important;
+      height: 2.6em !important;
+    }
     :deep(.el-date-editor) {
       width: vw(200);
-      min-width: 140px;
+      max-width: vw(200);
-      background: transparent;
-      border: 1px solid rgba(64, 169, 255, 0.3);
-      border-radius: 4px;
       background: #183c67;
       box-shadow: inset 0px 0px 8px 0px #4fecff;