驾驶舱大屏功能完成

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

@@ -0,0 +1,406 @@
+.display {
+  display: flex;
+}
+
+.fr {
+  display: flex;
+  flex-direction: row;
+}
+
+.fc {
+  display: flex;
+  flex-direction: column;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.jc_end {
+  justify-content: flex-end;
+}
+
+.jc_center {
+  justify-content: center;
+}
+
+.jc_sb {
+  justify-content: space-between;
+}
+
+.jc_sa {
+  justify-content: space-around;
+}
+
+.ai_start {
+  align-items: flex-start;
+}
+
+.ai_center {
+  align-items: center;
+}
+
+.frc_center {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.fc_align_center {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.ai_b {
+  align-items: baseline;
+}
+
+.ai_end {
+  align-items: flex-end;
+}
+
+.fw {
+  flex-wrap: wrap;
+}
+
+.fg {
+  flex-grow: 1;
+}
+
+.fs0 {
+  flex-shrink: 0;
+}
+
+.f1 {
+  flex: 1;
+}
+
+.f2 {
+  flex: 2;
+}
+
+.f3 {
+  flex: 3;
+}
+
+.mt_10 {
+  margin-top: 10px;
+}
+
+.mt_15 {
+  margin-top: 15px;
+}
+
+.mt_20 {
+  margin-top: 20px;
+}
+
+.mt_25 {
+  margin-top: 25px;
+}
+
+.mt_30 {
+  margin-top: 30px;
+}
+
+.mt_40 {
+  margin-top: 40px;
+}
+
+.mt_50 {
+  margin-top: 50px;
+}
+
+.mt_60 {
+  margin-top: 60px;
+}
+
+.mt_70 {
+  margin-top: 70px;
+}
+
+.mt_80 {
+  margin-top: 80px;
+}
+
+.mt_90 {
+  margin-top: 90px;
+}
+
+.mr_50 {
+  margin-right: 50px;
+}
+
+.mr_40 {
+  margin-right: 40px;
+}
+
+.mr_30 {
+  margin-right: 20px;
+}
+
+.mr_25 {
+  margin-right: 25px;
+}
+
+.mr_20 {
+  margin-right: 20px;
+}
+
+.mr_15 {
+  margin-right: 15px;
+}
+
+.mr_10 {
+  margin-right: 10px;
+}
+
+.mb_170 {
+  margin-bottom: 170px;
+}
+
+.mb_110 {
+  margin-bottom: 110px;
+}
+
+.mb_108 {
+  margin-bottom: 108px;
+}
+
+.mb_100 {
+  margin-bottom: 100px;
+}
+
+.mb_90 {
+  margin-bottom: 90px;
+}
+
+.mb_80 {
+  margin-bottom: 80px;
+}
+
+.mb_70 {
+  margin-bottom: 70px;
+}
+
+.mb_60 {
+  margin-bottom: 60px;
+}
+
+.mb_50 {
+  margin-bottom: 50px;
+}
+
+.mb_40 {
+  margin-bottom: 40px;
+}
+
+.mb_30 {
+  margin-bottom: 30px;
+}
+
+.mb_25 {
+  margin-bottom: 25px;
+}
+
+.mb_20 {
+  margin-bottom: 20px;
+}
+
+.mb_15 {
+  margin-bottom: 15px;
+}
+
+.mb_10 {
+  margin-bottom: 10px;
+}
+
+.mb_5 {
+  margin-bottom: 5px;
+}
+
+.ml_30 {
+  margin-left: 30px;
+}
+
+.ml_25 {
+  margin-left: 25px;
+}
+
+.ml_20 {
+  margin-left: 20px;
+}
+
+.ml_30 {
+  margin-left: 30px;
+}
+
+.ml_40 {
+  margin-left: 40px;
+}
+
+.ml_15 {
+  margin-left: 15px;
+}
+
+.ml_10 {
+  margin-left: 10px;
+}
+
+.mr_30 {
+  margin-right: 30px;
+}
+
+.mr_20 {
+  margin-right: 20px;
+}
+
+.mr_15 {
+  margin-right: 15px;
+}
+
+.mr_10 {
+  margin-right: 10px;
+}
+
+.mr_5 {
+  margin-right: 5px;
+}
+
+.m_20 {
+  margin: 20px;
+}
+
+.m_5 {
+  margin: 5%;
+}
+
+.m_0_20 {
+  margin: 0 20px;
+}
+
+.m_0_25 {
+  margin: 0 25px;
+}
+
+.p_5 {
+  padding: 5%;
+}
+
+.p_60 {
+  padding: 60px;
+}
+
+.p_50 {
+  padding: 50px;
+}
+
+.p_40 {
+  padding: 40px;
+}
+
+.p_30 {
+  padding: 30px;
+}
+
+.p_25 {
+  padding: 25px;
+}
+
+.p_20 {
+  padding: 20px;
+}
+
+.p_10 {
+  padding: 10px;
+}
+
+
+.p_10_15 {
+  padding: 10px 15px;
+}
+
+.p_0_30 {
+  padding: 0px 30px;
+}
+
+.p_10_0 {
+  padding: 10px 0;
+}
+
+.p_20_0 {
+  padding: 20px 0;
+}
+
+.p_30_0 {
+  padding: 30px 0;
+}
+
+.p_40_0 {
+  padding: 40px 0px;
+}
+
+.p_20_0 {
+  padding: 20px 0px;
+}
+
+.p_0_20 {
+  padding: 0px 20px;
+}
+
+.p_0_10 {
+  padding: 0px 10px;
+}
+
+.p_5_10 {
+  padding: 5px 10px;
+}
+
+.p_10_0 {
+  padding: 10px 0;
+}
+
+.p_10_20 {
+  padding: 10px 20px;
+}
+
+.pl_40 {
+  padding-left: 40px;
+}
+
+.pl_30 {
+  padding-left: 30px;
+}
+
+.pl_20 {
+  padding-left: 20px;
+}
+
+.pb_40 {
+  padding-bottom: 40px;
+}
+
+.pb_30 {
+  padding-bottom: 30px;
+}
+
+.pb_20 {
+  padding-bottom: 20px;
+}
+
+.pb_10 {
+  padding-bottom: 10px;
+}
+
+.pt_30 {
+  padding-top: 30px;
+}
+
+.pt_25 {
+  padding-top: 25px;
+}

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

@@ -0,0 +1,756 @@
+.fs_10 {
+  font-size: 10px
+}
+
+
+.fs_12 {
+  font-size: 12px
+}
+
+
+.fs_14 {
+  font-size: 14px
+}
+
+
+.fs_16 {
+  font-size: 16px
+}
+
+
+.fs_18 {
+  font-size: 18px
+}
+
+
+.fs_20 {
+  font-size: 20px
+}
+
+
+.fs_22 {
+  font-size: 22px
+}
+
+
+.fs_24 {
+  font-size: 24px
+}
+
+
+.fs_26 {
+  font-size: 26px
+}
+
+
+.fs_28 {
+  font-size: 28px
+}
+
+
+.fs_30 {
+  font-size: 30px
+}
+
+
+.fs_32 {
+  font-size: 32px
+}
+
+
+.fs_34 {
+  font-size: 34px
+}
+
+
+.fs_36 {
+  font-size: 36px
+}
+
+
+.fs_38 {
+  font-size: 38px
+}
+
+
+.fs_40 {
+  font-size: 40px
+}
+
+
+.fs_42 {
+  font-size: 42px
+}
+
+
+.fs_44 {
+  font-size: 44px
+}
+
+
+.fs_46 {
+  font-size: 46px
+}
+
+
+.fs_48 {
+  font-size: 48px
+}
+
+
+.fs_50 {
+  font-size: 50px
+}
+
+
+.fs_52 {
+  font-size: 52px
+}
+
+
+.fs_54 {
+  font-size: 54px
+}
+
+
+.fs_56 {
+  font-size: 56px
+}
+
+
+.fs_58 {
+  font-size: 58px
+}
+
+
+.fs_60 {
+  font-size: 60px
+}
+
+
+.fs_62 {
+  font-size: 62px
+}
+
+
+.fs_64 {
+  font-size: 64px
+}
+
+
+.fs_66 {
+  font-size: 66px
+}
+
+
+.fs_68 {
+  font-size: 68px
+}
+
+
+.fs_70 {
+  font-size: 70px
+}
+
+
+.fs_72 {
+  font-size: 72px
+}
+
+
+.fs_74 {
+  font-size: 74px
+}
+
+
+.fs_76 {
+  font-size: 76px
+}
+
+
+.fs_78 {
+  font-size: 78px
+}
+
+
+.fs_80 {
+  font-size: 80px
+}
+
+
+.fs_82 {
+  font-size: 82px
+}
+
+
+.fs_84 {
+  font-size: 84px
+}
+
+
+.fs_86 {
+  font-size: 86px
+}
+
+
+.fs_88 {
+  font-size: 88px
+}
+
+
+.fs_90 {
+  font-size: 90px
+}
+
+
+.fs_92 {
+  font-size: 92px
+}
+
+
+.fs_94 {
+  font-size: 94px
+}
+
+.fs_96 {
+  font-size: 96px
+}
+
+.fs_98 {
+  font-size: 98px
+}
+
+
+.fs_100 {
+  font-size: 100px
+}
+
+.fs_102 {
+  font-size: 102px
+}
+
+.ft_bold {
+  font-weight: bold;
+}
+
+.bg_fff {
+  background-color: #fff;
+}
+
+.bg_FEFEFE {
+  background-color: #FEFEFE;
+}
+
+.bg_f6f6f6 {
+  background-color: #f6f6f6;
+}
+
+.bg_ffe5bb {
+  background-color: #ffe5bb;
+}
+
+.bg_FBFBFB {
+  background-color: #FBFBFB;
+}
+
+.bg_ccc {
+  background-color: #cccccc;
+}
+
+.bg_a9b4be {
+  background-color: #a9b4be;
+}
+
+.bg_ff2525 {
+  background-color: #ff2525;
+}
+
+.bg_F9F9F9 {
+  background-color: #F9F9F9;
+}
+
+.bg_CDD0D4 {
+  background-color: #CDD0D4;
+}
+
+.bg_ffffff23 {
+  background-color: rgba(255, 255, 255, 0.137);
+}
+
+.bg_F1F4F9 {
+  background-color: #F1F4F9;
+}
+
+.bg_2c6ff2 {
+  background-color: #2c6ff2;
+}
+
+.bg_DC60EE {
+  background-color: #DC60EE;
+}
+
+.bg_F9B959 {
+  background-color: #F9B959;
+}
+
+.bg_FFF2D5 {
+  background-color: #FFF2D5;
+}
+
+.bg_e92929 {
+  background-color: #e92929;
+}
+
+.bg_FD4341 {
+  background-color: #FD4341;
+}
+
+.bg_4ECA65 {
+  background-color: #4ECA65;
+}
+
+.bg_D8E6FF {
+  background-color: #D8E6FF;
+}
+
+.bg_000 {
+  background-color: #000000;
+}
+
+.bg_217EFD {
+  background-color: #217EFD;
+}
+
+.bg_29AC76 {
+  background-color: #29AC76;
+}
+
+.bg_FAFAFB {
+  background-color: #FAFAFB;
+}
+
+.bg_2590FF {
+  background-color: #2590FF;
+}
+
+.bg_F8F6F3 {
+  background-color: #F8F6F3;
+}
+
+.bg_F3F3F4 {
+  background-color: #F3F3F4;
+}
+
+.bg_F5F5F5 {
+  background-color: #F5F5F5;
+}
+
+.bg_E9E0D2 {
+  background-color: #E9E0D2;
+}
+
+.bg_ecbb61 {
+  background-color: #ecbb61;
+}
+
+.bg_1C8DFF {
+  background-color: #1C8DFF;
+}
+
+.bg_FDF3E1 {
+  background-color: #FDF3E1;
+}
+
+.bg_FFECCE {
+  background-color: #FFECCE;
+}
+
+.bg_D8EBFD {
+  background-color: #D8EBFD;
+}
+
+.bg_FDE8E5 {
+  background-color: #FDE8E5;
+}
+
+.bg_d6af6f {
+  background-color: #d6af6f;
+}
+
+.bg_ecc78a {
+  background-color: #ecc78a;
+}
+
+.bg_5EBFCA {
+  background-color: #5EBFCA;
+}
+
+.bg_6C52FD {
+  background-color: #6C52FD;
+}
+
+.bg_ebf2ff {
+  background-color: #ebf2ff;
+}
+
+.bg_F4F4F4 {
+  background-color: #F4F4F4;
+}
+
+.bg_E6E1FF {
+  background-color: #E6E1FF;
+}
+
+.bg_F3F7FF {
+  background-color: #F3F7FF;
+}
+
+.bg_E1372B {
+  background-color: #E1372B;
+}
+
+.bg_259926 {
+  background-color: #259926;
+}
+
+.bg_F2F2F2 {
+  background-color: #F2F2F2;
+}
+
+.bg_E0F2FF {
+  background-color: #E0F2FF;
+}
+
+.bg_22c473 {
+  background-color: #22c473;
+}
+
+.bg_4C50FF {
+  background-color: #4C50FF;
+}
+
+.bg_F9FBFC {
+  background-color: #F9FBFC;
+}
+
+.bg_9BA4AC {
+  background-color: #9BA4AC;
+}
+.bg_E2E2E2{
+  background-color: #E2E2E2;
+}
+
+.bg_f8f8f8 {
+  background-color: #f8f8f8;
+}
+
+.bg_002240 {
+  background-color: #002240;
+}
+
+.cl_217EFD {
+  color: #217EFD;
+}
+
+.cl_8091A0 {
+  color: #8091A0;
+}
+
+.cl_9BA4AC {
+  color: #9BA4AC;
+}
+
+.cl_ff4e78 {
+  color: #ff4e78;
+}
+
+.cl_E1372B {
+  color: #E1372B;
+}
+
+.cl_f94428 {
+  color: #f94428;
+}
+
+.cl_3399ff {
+  color: #3399ff;
+}
+
+.cl_806afd {
+  color: #806afd;
+}
+
+.cl_b2b2b2 {
+  color: #b2b2b2;
+}
+
+.cl_1c8dff {
+  color: #1c8dff;
+}
+
+.cl_818181 {
+  color: #818181;
+}
+
+.cl_9A9A9A {
+  color: #9A9A9A;
+}
+
+.cl_d6af6f {
+  color: #d6af6f;
+}
+
+.cl_797979 {
+  color: #797979;
+}
+
+.cl_ecbb61 {
+  color: #ecbb61;
+}
+
+.cl_BDC3C8 {
+  color: #BDC3C8;
+}
+
+.cl_6c6e75 {
+  color: #6c6e75;
+}
+
+.cl_A6A199 {
+  color: #A6A199;
+}
+
+.cl_1C1C1C {
+  color: #1C1C1C;
+}
+
+
+.cl_E1AC7D {
+  color: #E1AC7D;
+}
+
+.cl_cf8e18 {
+  color: #cf8e18;
+}
+
+.cl_26282b {
+  color: #26282b;
+}
+
+.cl_5E5445 {
+  color: #5E5445;
+}
+
+.cl_AAABAF {
+  color: #AAABAF;
+}
+
+.cl_ACB6C0 {
+  color: #ACB6C0;
+}
+
+.cl_667081 {
+  color: #667081;
+}
+
+.cl_667080 {
+  color: #667080;
+}
+
+.cl_697383 {
+  color: #697383;
+}
+
+.cl_8A8B8C {
+  color: #8A8B8C;
+}
+
+.cl_2E70F0 {
+  color: #2E70F0
+}
+
+.cl_a9b4be {
+  color: #a9b4be;
+}
+
+.cl_e92929 {
+  color: #e92929;
+}
+
+.cl_F9F9F9 {
+  color: #F9F9F9;
+}
+
+.cl_949596 {
+  color: #949596;
+}
+
+.cl_d6af70 {
+  color: #d6af70;
+}
+
+.cl_ADADAD {
+  color: #ADADAD;
+}
+
+.cl_3b7af3 {
+  color: #3b7af3;
+}
+
+.cl_767C8C {
+  color: #767C8C;
+}
+
+.cl_fff {
+  color: #ffffff;
+}
+
+.cl_8E9DAA {
+  color: #8E9DAA;
+}
+
+.cl_D1D1D1 {
+  color: #D1D1D1;
+}
+.cl_479aff{
+  color: #479aff;
+}
+.cl_2c6ff2 {
+  color: #2c6ff2;
+}
+
+.cl_809fb8 {
+  color: #809fb8;
+}
+
+.cl_e2e2e2 {
+  color: #e2e2e2;
+}
+
+.cl_888888 {
+  color: #888888;
+}
+
+.cl_b5b2ac {
+  color: #b5b2ac;
+}
+
+.cl_6B6B6B {
+  color: #6B6B6B;
+}
+
+.cl_9e9fa1 {
+  color: #9e9fa1;
+}
+
+.cl_BDBDBD {
+  color: #BDBDBD;
+}
+
+.cl_828282 {
+  color: #828282;
+}
+
+.cl_91A0AD {
+  color: #91A0AD;
+}
+
+.cl_b5b5b5 {
+  color: #b5b5b5;
+}
+
+.cl_d23535 {
+  color: #d23535;
+}
+
+.cl_E2C244 {
+  color: #E2C244;
+}
+
+.cl_000 {
+  color: #000000;
+}
+
+.cl_7e7e7e {
+  color: #7e7e7e;
+}
+
+.cl_5C5348 {
+  color: #5C5348;
+}
+
+.cl_C1AD98 {
+  color: #C1AD98;
+}
+
+.cl_444 {
+  color: #444444;
+}
+
+.cl_f3d5b9 {
+  color: #f3d5b9;
+}
+
+.cl_626368 {
+  color: #626368;
+}
+
+.cl_5D5038 {
+  color: #5D5038;
+}
+
+.cl_A0895E {
+  color: #A0895E;
+}
+
+.cl_8b8b8b {
+  color: #8b8b8b;
+}
+
+.cl_E1AC7C {
+  color: #E1AC7C;
+}
+
+.br_10 {
+  border-radius: 10px;
+}
+
+.br_20 {
+  border-radius: 20px;
+}
+
+.br_30 {
+  border-radius: 30px;
+}
+
+.br_40 {
+  border-radius: 40px;
+}
+
+.br_50 {
+  border-radius: 50px;
+}
+
+.br_60 {
+  border-radius: 60px;
+}
+
+.br_70 {
+  border-radius: 70px;
+}
+
+.br_80 {
+  border-radius: 80px;
+}
+
+.br_90 {
+  border-radius: 90px;
+}
+
+.br_100 {
+  border-radius: 100px;
+}
+
+.br_110 {
+  border-radius: 110px;
+}

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

@@ -0,0 +1,34 @@
+/* 设置一行展示 */
+.row_1 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 设置两行展示 */
+.row_2 {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-overflow: -o-ellipsis-lastline;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
+
+/* 设置3行展示 */
+.row_3 {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-overflow: -o-ellipsis-lastline;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
+
+.nowrap {
+  white-space: nowrap;
+}

packages/screen/src/main.js

@@ -6,6 +6,12 @@ import './styles/index.scss'
 import ElementPlus from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import 'cesium/Build/Cesium/Widgets/widgets.css'
+import './assets/css/fs.scss'
+import './assets/css/flex.scss'
+import './assets/css/text.scss'
+
+
+
 import 'virtual:svg-icons-register'
 import * as Cesium from 'cesium';
 

packages/screen/src/router/index.js

@@ -52,7 +52,15 @@ const routes = [
       skipInitialCameraView: true  // 跳过MapViewport的自动初始视图，由页面自己控制相机
     },
     component: () => import('../views/3DSituationalAwarenessRefactor/index.vue')
-  }
+  },
+  {
+    path: '/riskWarning',
+    name: 'RiskWarning',
+     meta: {
+      screen: true
+    },
+    component: () => import('../views/RiskWarning/index.vue')
+  },
 ]
 
 const router = createRouter({

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

@@ -0,0 +1,514 @@
+<template>
+  <div class="main-box display p_10" style="box-sizing: border-box">
+    <div class="nav-menu">
+      <div
+        v-for="(item, index) in menuItems"
+        :key="index"
+        class="nav-item"
+        :class="{ active: activeIndex === index }"
+        @click="activeIndex = index"
+      >
+        <div class="nav-icon">
+          <!-- <i :class="item.icon"></i> -->
+          <img :src="activeIndex === index ? item.icon1 : item.icon" alt="" />
+        </div>
+        <div class="nav-label">{{ item.label }}</div>
+      </div>
+    </div>
+    <!-- 气象预警监测表格 -->
+    <div class="weather-warning-wrapper" style="padding-left: 6px">
+      <div class="weather-warning-panel">
+        <img
+          class="clear-icon"
+          src="../../assets/RiskWarning_img/清除icon@2x.png"
+          alt=""
+        />
+        <div class="panel-header">
+          <div class="header-title">气象预警监测</div>
+          <div class="filter-tags">
+            <label class="tag">
+              <input type="checkbox" v-model="filters.red" />
+              <span class="">红色预警</span>
+            </label>
+            <label class="tag">
+              <input type="checkbox" v-model="filters.blue" />
+              <span class="">蓝色预警</span>
+            </label>
+            <label class="tag">
+              <input type="checkbox" v-model="filters.orange" />
+              <span class="">橙色预警</span>
+            </label>
+            <label class="tag">
+              <input type="checkbox" v-model="filters.yellow" />
+              <span class="">黄色预警</span>
+            </label>
+          </div>
+        </div>
+        <div class="table-container">
+          <el-table
+            :data="filteredData"
+            height="100%"
+            style="width: 100%; background: transparent"
+            :header-cell-style="headerCellStyle"
+            :cell-style="cellStyle"
+            :row-class-name="rowClassName"
+          >
+            <el-table-column prop="time" label="预警时间" min-width="140" />
+            <el-table-column prop="type" label="类型" min-width="80" align="center" />
+            <el-table-column label="预警等级" min-width="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
+                        : row.levelClass === 'orange'
+                        ? orangeIcon
+                        : yellowIcon
+                    "
+                    alt=""
+                  />
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="district" label="预警区县" min-width="80" />
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { ElTable } from "element-plus";
+import orangeIcon from "../../assets/RiskWarning_img/橙色@2x.png";
+import yellowIcon from "../../assets/RiskWarning_img/黄色@2x.png";
+import redIcon from "../../assets/RiskWarning_img//红色@2x.png";
+import blueIcon from "../../assets/RiskWarning_img/蓝色@2x.png";
+
+import warningIconIcon from "../../assets/RiskWarning_img/风险预警icon@2x.png";
+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 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";
+
+const activeIndex = ref(0);
+
+const menuItems = [
+  {
+    label: "项目",
+    icon: "icon-warning",
+    iconClass: "warning",
+    icon: warningIconIcon,
+    icon1: warningIconIcon1,
+  },
+  {
+    label: "隧道",
+    icon: "icon-tunnel",
+    iconClass: "tunnel",
+    icon: tunnelIconIcon,
+    icon1: tunnelIconIcon1,
+  },
+  {
+    label: "边坡",
+    icon: "icon-slope",
+    iconClass: "slope",
+    icon: slopeIconIcon,
+    icon1: slopeIconIcon1,
+  },
+  {
+    label: "桥梁",
+    icon: "icon-bridge",
+    iconClass: "bridge",
+    icon: bridgeIconIcon,
+    icon1: bridgeIconIcon1,
+  },
+  {
+    label: "路段",
+    icon: "icon-road",
+    iconClass: "road",
+    icon: roadIconIcon,
+    icon1: roadIconIcon1,
+  },
+];
+
+// 筛选状态
+const filters = ref({
+  red: false,
+  blue: false,
+  orange: false,
+  yellow: false,
+});
+
+// 预警数据
+const warningData = ref([
+  {
+    time: "2025-11-18 09:24:81",
+    type: "暴雨",
+    level: "蓝色预警",
+    levelClass: "blue",
+    district: "合川区",
+  },
+  {
+    time: "2025-11-12 09:24:81",
+    type: "冰雪",
+    level: "红色预警",
+    levelClass: "red",
+    district: "万州区",
+  },
+  {
+    time: "2025-11-12 09:24:81",
+    type: "大雾",
+    level: "橙色预警",
+    levelClass: "orange",
+    district: "涪陵区",
+  },
+  {
+    time: "2025-11-12 09:24:81",
+    type: "大风",
+    level: "黄色预警",
+    levelClass: "yellow",
+    district: "城口县",
+  },
+]);
+
+// 过滤后的数据
+const filteredData = computed(() => {
+  const hasFilter =
+    filters.value.red ||
+    filters.value.blue ||
+    filters.value.orange ||
+    filters.value.yellow;
+  if (!hasFilter) return warningData.value;
+
+  return warningData.value.filter((item) => {
+    if (filters.value.red && item.levelClass === "red") return true;
+    if (filters.value.blue && item.levelClass === "blue") return true;
+    if (filters.value.orange && item.levelClass === "orange") return true;
+    if (filters.value.yellow && item.levelClass === "yellow") return true;
+    return false;
+  });
+});
+
+// el-table 样式
+const headerCellStyle = () => ({
+  background: "transparent",
+  color: "rgba(255, 255, 255, 0.6)",
+  fontWeight: "normal",
+  borderBottom: "1px solid rgba(64, 169, 255, 0.2)",
+  padding: "10px 8px",
+});
+
+const cellStyle = () => ({
+  background: "transparent",
+  color: "rgba(255, 255, 255, 0.9)",
+  borderBottom: "1px solid rgba(64, 169, 255, 0.1)",
+  padding: "12px 8px",
+});
+
+const rowClassName = ({ rowIndex }) => {
+  return rowIndex % 2 === 0 ? "even-row" : "odd-row";
+};
+</script>
+
+<style lang="scss" scoped>
+.main-box {
+  position: relative;
+}
+.nav-menu {
+  width: 50px;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  align-items: center;
+  gap: 5px;
+
+  .nav-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover,
+    &.active {
+      .nav-icon {
+        background: rgba(64, 169, 255, 0.3);
+        border-color: rgba(64, 169, 255, 0.6);
+      }
+
+      .nav-label {
+        color: #40a9ff;
+      }
+    }
+
+    .nav-icon {
+      width: 50px;
+      height: 50px;
+      margin-bottom: 5px;
+      background: rgba(64, 169, 255, 0.1);
+      border: 1px solid rgba(64, 169, 255, 0.3);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.3s ease;
+      img {
+        width: 50px;
+        width: 50px;
+      }
+
+      i {
+        font-size: 24px;
+        color: #40a9ff;
+      }
+
+      // 使用 emoji 作为图标占位
+      &.warning::before {
+        content: "📍";
+        font-size: 24px;
+      }
+
+      &.tunnel::before {
+        content: "🚇";
+        font-size: 24px;
+      }
+
+      &.slope::before {
+        content: "⛰️";
+        font-size: 24px;
+      }
+
+      &.bridge::before {
+        content: "🌉";
+        font-size: 24px;
+      }
+
+      &.road::before {
+        content: "🛣️";
+        font-size: 24px;
+      }
+    }
+
+    .nav-label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      color: #fff;
+      transition: all 0.3s ease;
+    }
+  }
+}
+
+// 气象预警监测包装器
+.weather-warning-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  width: 90%;
+}
+
+// 气象预警监测面板样式
+.weather-warning-panel {
+  height: 60%;
+  background: linear-gradient(
+    180deg,
+    rgba(21, 41, 59, 0.95) 0%,
+    rgba(13, 28, 42, 0.95) 100%
+  );
+  border: 1px solid rgba(64, 169, 255, 0.3);
+  border-radius: 8px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  .clear-icon {
+    position: absolute;
+    top: -50px;
+    right: 0px;
+    width: 40px !important;
+    height: 40px !important;
+  }
+
+  .panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+
+    .header-title {
+      font-size: 18px;
+      font-weight: bold;
+      color: #40a9ff;
+      position: relative;
+      padding-left: 12px;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 4px;
+        height: 16px;
+        background: linear-gradient(180deg, #40a9ff 0%, #1890ff 100%);
+        border-radius: 2px;
+      }
+    }
+
+    .filter-tags {
+      display: flex;
+      gap: 15px;
+
+      .tag {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        cursor: pointer;
+
+        input {
+          width: 14px;
+          height: 14px;
+          accent-color: #40a9ff;
+        }
+
+        span {
+          font-size: 12px;
+          color: rgba(255, 255, 255, 0.8);
+
+          &.tag-red {
+            color: #ff4d4f;
+          }
+
+          &.tag-blue {
+            color: #40a9ff;
+          }
+
+          &.tag-orange {
+            color: #ff7a45;
+          }
+
+          &.tag-yellow {
+            color: #ffc53d;
+          }
+        }
+      }
+    }
+  }
+
+  .table-container {
+    flex: 1;
+    overflow: hidden;
+
+    :deep(.el-table__body-wrapper) {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  // el-table 样式
+  :deep(.el-table) {
+    background: transparent;
+
+    &::before {
+      display: none;
+    }
+
+    .el-table__inner-wrapper {
+      background: transparent;
+    }
+    .el-table__inner-wrapper:before {
+      width: 0%;
+    }
+
+    .el-table__header-wrapper {
+      background: transparent;
+    }
+
+    .el-table__body-wrapper {
+      background: transparent;
+    }
+
+    tr {
+      background: transparent;
+
+      &:hover {
+        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: 15px;
+      height: 15px;
+    }
+
+    // .level-icon {
+    //   width: 0;
+    //   height: 0;
+    //   border-left: 6px solid transparent;
+    //   border-right: 6px solid transparent;
+    //   border-bottom: 10px solid currentColor;
+    // }
+
+    &.red {
+      color: #ff4d4f;
+      background: rgba(255, 77, 79, 0.1);
+    }
+
+    &.blue {
+      color: #40a9ff;
+      background: rgba(64, 169, 255, 0.1);
+    }
+
+    &.orange {
+      color: #ff7a45;
+      background: rgba(255, 122, 69, 0.1);
+    }
+
+    &.yellow {
+      color: #ffc53d;
+      background: rgba(255, 197, 61, 0.1);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,167 @@
+<template>
+  <div class="ring-chart" ref="chartRef"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import * as echarts from 'echarts'
+
+const props = defineProps({
+  chartData: {
+    type: Array,
+    default: () => [
+      { name: '蓝色', value: 13, color: '#40a9ff' },
+      { name: '橙色', value: 40.2, color: '#ff7a45' },
+      { name: '黄色', value: 22, color: '#ffc53d' },
+      { name: '红色', value: 8, color: '#ff4d4f' }
+    ]
+  },
+  centerText: {
+    type: String,
+    default: '风险\n状况'
+  }
+})
+
+const chartRef = ref(null)
+let chartInstance = null
+
+const initChart = () => {
+  if (!chartRef.value) return
+
+  chartInstance = echarts.init(chartRef.value)
+
+  const option = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c}%'
+    },
+    legend: {
+      orient: 'vertical',
+      right: '5%',
+      top: 'center',
+      itemWidth: 10,
+      itemHeight: 10,
+      textStyle: {
+        color: '#fff',
+        fontSize: 12
+      },
+      data: props.chartData.map(item => ({
+        name: item.name,
+        icon: 'circle'
+      }))
+    },
+    series: [
+      {
+        name: '风险状况',
+        type: 'pie',
+        radius: ['45%', '65%'],
+        center: ['40%', '50%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: true,
+          position: 'outside',
+          formatter: '{c}%',
+          color: '#fff',
+          fontSize: 12
+        },
+        labelLine: {
+          show: true,
+          length: 15,
+          length2: 10,
+          lineStyle: {
+            color: 'rgba(255, 255, 255, 0.3)'
+          }
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 14,
+            fontWeight: 'bold'
+          }
+        },
+        data: props.chartData.map(item => ({
+          value: item.value,
+          name: item.name,
+          itemStyle: {
+            color: item.color
+          }
+        }))
+      },
+      {
+        type: 'pie',
+        radius: ['0%', '35%'],
+        center: ['40%', '50%'],
+        silent: true,
+        label: {
+          show: true,
+          position: 'center',
+          formatter: props.centerText,
+          color: '#fff',
+          fontSize: 16,
+          fontWeight: 'bold',
+          lineHeight: 24
+        },
+        data: [{ value: 1, name: '', itemStyle: { color: 'transparent' } }]
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+}
+
+const updateChart = () => {
+  if (!chartInstance) return
+
+  const option = {
+    legend: {
+      data: props.chartData.map(item => ({
+        name: item.name,
+        icon: 'circle'
+      }))
+    },
+    series: [
+      {
+        data: props.chartData.map(item => ({
+          value: item.value,
+          name: item.name,
+          itemStyle: {
+            color: item.color
+          }
+        }))
+      },
+      {
+        label: {
+          formatter: props.centerText
+        }
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+}
+
+const handleResize = () => {
+  chartInstance?.resize()
+}
+
+onMounted(() => {
+  initChart()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  chartInstance?.dispose()
+})
+
+watch(() => props.chartData, updateChart, { deep: true })
+watch(() => props.centerText, updateChart)
+</script>
+
+<style lang="scss" scoped>
+.ring-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="section-header">
+    <div class="header-left">
+      <slot name="left">
+        <span class="title">{{ title }}</span>
+      </slot>
+    </div>
+    <div class="header-right">
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import bgImg from "@/assets/RiskWarning_img/标题bg@2x.png";
+
+defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.section-header {
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  background-image: url(v-bind(bgImg));
+  background-size: cover;
+  background-position: left;
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .title {
+      margin-left: 35px;
+      font-size: 18px;
+      font-weight: bold;
+      color: #fff;
+    }
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}
+</style>

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

@@ -0,0 +1,113 @@
+<template>
+  <div class="risk-table">
+    <table>
+      <thead>
+        <tr>
+          <th class="col-type">
+            <div>项目</div>
+            <div>类型</div>
+          </th>
+          <th class="col-red">红色预警</th>
+          <th class="col-orange">橙色预警</th>
+          <th class="col-yellow">黄色预警</th>
+          <th class="col-blue">蓝色预警</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in tableData" :key="index">
+          <td class="col-type">{{ item.type }}</td>
+          <td class="col-red">{{ item.red }}</td>
+          <td class="col-orange">{{ item.orange }}</td>
+          <td class="col-yellow">{{ item.yellow }}</td>
+          <td class="col-blue">{{ item.blue }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  tableData: {
+    type: Array,
+    default: () => [
+      { type: '桥梁', red: 0, orange: 1, yellow: 8, blue: 11 },
+      { type: '隧道', red: 0, orange: 0, yellow: 6, blue: 12 },
+      { type: '边坡', red: 0, orange: 1, yellow: 9, blue: 9 },
+      { type: '路段', red: 0, orange: 2, yellow: 11, blue: 7 },
+      { type: '项目', red: 0, orange: 2, yellow: 11, blue: 7 }
+    ]
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.risk-table {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 14px;
+    color: #fff;
+
+    th,
+    td {
+      padding: 4px 4px;
+      text-align: center;
+      border: none;
+    }
+
+    thead {
+      th {
+        font-weight: normal;
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.8);
+
+        &.col-type {
+          color: rgba(255, 255, 255, 0.6);
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        &:nth-child(odd) {
+          background-color: rgba(255, 255, 255, 0.05);
+        }
+
+        td {
+          font-size: 14px;
+
+          &.col-type {
+            color: rgba(255, 255, 255, 0.9);
+          }
+        }
+      }
+    }
+
+    .col-red {
+      color: #ff4d4f;
+    }
+
+    .col-orange {
+      color: #ff7a45;
+    }
+
+    .col-yellow {
+      color: #ffc53d;
+    }
+
+    .col-blue {
+      color: #40a9ff;
+    }
+
+    .col-type {
+      width: 20%;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,127 @@
+<template>
+  <div class="main">
+    <!-- 四个角的装饰 -->
+    <div class="corner corner-top-left"></div>
+    <div class="corner corner-top-right"></div>
+    <div class="corner corner-bottom-left"></div>
+    <div class="corner corner-bottom-right"></div>
+
+    <div class="left">
+      <left></left>
+    </div>
+    <div class="right">
+      <right></right>
+    </div>
+    <!-- 地图中心 -->
+    <div class="center">
+      <MapCenter />
+    </div>
+    <div class="bottom">
+      <bottom></bottom>
+    </div>
+    <top class="top"></top>
+  </div>
+</template>
+
+<script setup>
+import left from "./left.vue";
+import right from "./right.vue";
+import bottom from "./bottom.vue";
+import top from "./top.vue";
+import MapCenter from "../cockpit/components/MapCenter.vue";
+</script>
+
+<style lang="scss" scoped>
+.main {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-image: url("../../assets/RiskWarning_img/遮罩层.png");
+  background-size: cover;
+  background-position: center;
+}
+
+.left {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 30%;
+  height: 100%;
+}
+
+.right {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 30%;
+  height: 100%;
+}
+
+.bottom {
+  position: absolute;
+  bottom: 10px;
+  left: 30%;
+  width: 40%;
+  height: 50%;
+}
+
+.top {
+  position: absolute;
+  top: 10px;
+  left: 30%;
+  width: 40%;
+  height: 15%;
+  // background-color: #15293B;
+}
+
+.center {
+  position: absolute;
+  top: 0;
+  // left: 25%;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+// 四个角的装饰
+.corner {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  border: 2px solid #40a9ff;
+  z-index: 100;
+  pointer-events: none;
+
+  &.corner-top-left {
+    top: 10px;
+    left: 10px;
+    border-right: none;
+    border-bottom: none;
+    border-top-left-radius: 4px;
+  }
+
+  &.corner-top-right {
+    top: 10px;
+    right: 10px;
+    border-left: none;
+    border-bottom: none;
+    border-top-right-radius: 4px;
+  }
+
+  &.corner-bottom-left {
+    bottom: 10px;
+    left: 10px;
+    border-right: none;
+    border-top: none;
+    border-bottom-left-radius: 4px;
+  }
+
+  &.corner-bottom-right {
+    bottom: 10px;
+    right: 10px;
+    border-left: none;
+    border-top: none;
+    border-bottom-right-radius: 4px;
+  }
+}
+</style>

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

@@ -0,0 +1,733 @@
+<template>
+  <div class="left-panel">
+    <!-- 智能研判头部 -->
+    <SectionHeader title="智能研判" />
+
+    <!-- 气象预警 -->
+    <div class="weather-warning-section">
+      <div class="section-title">气象预警</div>
+      <div class="warning-cards">
+        <div
+          v-for="(item, index) in weatherWarningData"
+          :key="index"
+          class="warning-card"
+          :class="item.class"
+        >
+          <img
+            class="card-icon"
+            src="../../assets/RiskWarning_img/气象预警图标@2x.png"
+            alt=""
+          />
+          <div class="card-info">
+            <div class="card-num mt_10">{{ item.value }}</div>
+            <div class="card-label mb_10">{{ item.label }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 影响点概况 -->
+    <div class="impact-section">
+      <div class="impact-header">
+        <div class="impact-title">影响点概况</div>
+        <div class="impact-detail">影响点明细</div>
+      </div>
+      <div class="chart-container">
+        <div class="chart-y-label">数量</div>
+        <div class="bar-chart f1">
+          <div v-for="(item, index) in impactData" :key="index" class="bar-item">
+            <div class="bar" :style="{ height: getBarHeight(item.value) + '%' }"></div>
+            <div class="bar-value">{{ item.value }}</div>
+            <div class="bar-label">{{ item.label }}</div>
+          </div>
+        </div>
+        <div class="chart-x-label">类型</div>
+      </div>
+    </div>
+
+    <!-- 区县统计表格 -->
+    <div class="district-table-section">
+      <el-table
+        :data="districtData"
+        style="width: 100%; background: transparent; font-size: 12px"
+        :header-cell-style="headerCellStyle"
+        :cell-style="cellStyle"
+        size="small"
+      >
+        <el-table-column prop="name" label="区县名称" min-width="80" />
+        <el-table-column prop="road" label="路段" min-width="50" />
+        <el-table-column prop="bridge" label="桥梁" min-width="50" />
+        <el-table-column prop="tunnel" label="隧道" min-width="50" />
+        <el-table-column prop="slope" label="边坡" min-width="50" />
+        <el-table-column prop="project" label="项目" min-width="50" />
+      </el-table>
+    </div>
+
+    <!-- 响应调度 -->
+    <div class="response-section">
+      <SectionHeader title="响应调度">
+        <template #right>
+          <div class="header-filters">
+            <span class="filter-item active">本轮</span>
+            <div class="date-range-wrapper">
+              <el-date-picker
+                v-model="dateRange"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                size="small"
+                popper-class="dark-date-picker"
+                :prefix-icon="Calendar"
+              />
+            </div>
+          </div>
+        </template>
+      </SectionHeader>
+
+      <!-- 6个统计项 -->
+      <div class="stats-grid">
+        <div v-for="(item, index) in responseStats" :key="index" class="stat-item">
+          <!-- <div class="stat-icon" :class="item.iconClass"></div> -->
+          <img class="stat-icon" :src="item.img" alt="" />
+          <div class="stat-info">
+            <div class="stat-num">{{ item.value }}</div>
+            <div class="stat-label">{{ item.label }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 3个调度清单卡片 -->
+      <div class="dispatch-cards">
+        <div v-for="(item, index) in dispatchList" :key="index" class="dispatch-card">
+          <div class="card-num">{{ item.value }}<span class="unit">人</span></div>
+          <div class="card-label">{{ item.label }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+import SectionHeader from "./component/sectionHeader.vue";
+
+// 导入图片资源
+import imgCall from "../../assets/RiskWarning_img/回应icon@2x.png";
+import imgReply from "../../assets/RiskWarning_img/已回应icon@2x.png";
+import imgRate from "../../assets/RiskWarning_img/回应率icon@2x.png";
+import imgDistrict from "../../assets/RiskWarning_img/区县icon@2x.png";
+import imgHelp from "../../assets/RiskWarning_img/响应图标5@2x.png";
+import imgCheck from "../../assets/RiskWarning_img/抽查人数icon@2x.png";
+
+// 气象预警数据
+const weatherWarningData = [
+  { label: "红色预警", value: 8, class: "red" },
+  { label: "橙色预警", value: 12, class: "orange" },
+  { label: "黄色预警", value: 27, class: "yellow" },
+  { label: "蓝色预警", value: 15, class: "blue" },
+];
+
+// 影响点数据
+const impactData = [
+  { label: "路段", value: 830 },
+  { label: "桥梁", value: 312 },
+  { label: "隧道", value: 405 },
+  { label: "边坡", value: 634 },
+  { label: "项目", value: 523 },
+];
+
+// 日期范围选择器
+const dateRange = ref([]);
+
+// 计算最大值用于动态计算高度
+const maxValue = Math.max(...impactData.map((item) => item.value));
+
+// 计算每个柱子的高度百分比
+const getBarHeight = (value) => {
+  // 确保最小高度为20%，最大高度为100%
+  const height = (value / maxValue) * 100;
+  return Math.min(100, Math.max(20, Math.round(height)));
+};
+
+// 区县数据
+const districtData = [
+  { name: "江北区", road: 1, bridge: 1, tunnel: 1, slope: 8, project: 11 },
+  { name: "南岸区", road: 1, bridge: 2, tunnel: 2, slope: 6, project: 12 },
+  { name: "九龙坡区", road: 2, bridge: 1, tunnel: 1, slope: 9, project: 9 },
+  { name: "万州区", road: 1, bridge: 2, tunnel: 2, slope: 11, project: 7 },
+];
+
+// 响应调度统计数据
+const responseStats = [
+  {
+    label: "叫应总数",
+    value: "15",
+    iconClass: "icon-call",
+    img: imgCall,
+  },
+  {
+    label: "已回应数",
+    value: "9",
+    iconClass: "icon-reply",
+    img: imgReply,
+  },
+  {
+    label: "叫应率",
+    value: "100%",
+    iconClass: "icon-rate",
+    img: imgRate,
+  },
+  {
+    label: "调度区县数",
+    value: "21",
+    iconClass: "icon-district",
+    img: imgDistrict,
+  },
+  {
+    label: "线下帮扶数",
+    value: "12",
+    iconClass: "icon-help",
+    img: imgHelp,
+  },
+  {
+    label: "抽查人次",
+    value: "23",
+    iconClass: "icon-check",
+    img: imgCheck,
+  },
+];
+
+// 调度清单数据
+const dispatchList = [
+  { label: "国省道调度清单", value: "341" },
+  { label: "农村公路调度清单", value: "210" },
+  { label: "建设工程调度清单", value: "120" },
+];
+
+const headerCellStyle = () => ({
+  background: "rgba(64, 169, 255, 0.1)",
+  color: "rgba(255, 255, 255, 0.9)",
+  fontWeight: "normal",
+  borderBottom: "1px solid rgba(64, 169, 255, 0.2)",
+  padding: " 2px",
+  textAlign: "center",
+  lineHeight: "1.2",
+});
+
+const cellStyle = () => ({
+  background: "transparent",
+  color: "rgba(255, 255, 255, 0.8)",
+  borderBottom: "1px solid rgba(64, 169, 255, 0.1)",
+  padding: " 2px",
+  textAlign: "center",
+  lineHeight: "1.2",
+});
+</script>
+
+<style lang="scss" scoped>
+.left-panel {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .section-header {
+    height: 50px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    background-image: url("../../assets/RiskWarning_img/标题bg@2x.png");
+    background-size: cover;
+    background-position: left;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-left: 35px;
+      color: #fff;
+      font-size: 24px;
+      font-weight: bold;
+
+      .icon-back {
+        width: 20px;
+        height: 20px;
+        background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &::before {
+          content: "←";
+          color: #fff;
+          font-size: 12px;
+        }
+      }
+
+      .title {
+        font-size: 18px;
+        font-weight: bold;
+        color: #fff;
+      }
+    }
+
+    .header-date {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.6);
+    }
+  }
+
+  // 气象预警
+  .weather-warning-section {
+    margin-bottom: 20px;
+
+    .section-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: rgba(255, 255, 255, 0.9);
+      margin-bottom: 12px;
+    }
+
+    .warning-cards {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 10px;
+      display: flex;
+
+      .warning-card {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        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%;
+          max-width: 40px;
+          height: auto;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 28px;
+
+          // &::before {
+          //   content: "⛈️";
+          // }
+        }
+
+        .card-info {
+          flex: 1;
+          .card-num {
+            font-size: 30px;
+            font-weight: bold;
+            margin-bottom: 2px;
+          }
+
+          .card-label {
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.7);
+          }
+        }
+
+        &.red .card-num {
+          color: #ff4d4f;
+        }
+        &.orange .card-num {
+          color: #ff7a45;
+        }
+        &.yellow .card-num {
+          color: #ffc53d;
+        }
+        &.blue .card-num {
+          color: #40a9ff;
+        }
+      }
+    }
+  }
+
+  // 影响点概况
+  .impact-section {
+    margin-bottom: 40px;
+
+    .impact-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+
+      .impact-title {
+        font-size: 18px;
+        color: rgba(255, 255, 255, 0.9);
+      }
+
+      .impact-detail {
+        font-size: 16px;
+        color: #40a9ff;
+        cursor: pointer;
+      }
+    }
+
+    .chart-container {
+      position: relative;
+      height: 120px;
+      display: flex;
+      // padding: 10px 0 30px 40px;
+
+      .chart-y-label {
+        position: absolute;
+        left: 0;
+        top: -10px;
+        font-size: 11px;
+        color: rgba(255, 255, 255, 0.6);
+      }
+
+      .bar-chart {
+        display: flex;
+        justify-content: space-around;
+        align-items: flex-end;
+        height: 100%;
+        border-bottom: 1px solid rgba(64, 169, 255, 0.3);
+        position: relative;
+
+        // 背景网格线
+        &::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-image: linear-gradient(to right, transparent 0%, transparent 100%),
+            linear-gradient(to bottom, rgba(64, 169, 255, 0.1) 1px, transparent 1px);
+          background-size: 100% 25%;
+          pointer-events: none;
+        }
+
+        .bar-item {
+          height: 100%;
+          display: flex;
+          flex-direction: column-reverse;
+          align-items: center;
+          flex: 1;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          padding: 5px 0;
+          border-radius: 4px;
+
+          &:hover {
+            background: rgba(64, 169, 255, 0.15);
+
+            .bar-value {
+              color: #40a9ff;
+              transform: scale(1.1);
+            }
+
+            .bar {
+              background: linear-gradient(
+                180deg,
+                #69c0ff 0%,
+                rgba(105, 192, 255, 0.5) 100%
+              );
+              box-shadow: 0 0 15px rgba(64, 169, 255, 0.6);
+            }
+
+            .bar-label {
+              color: #fff;
+            }
+          }
+
+          .bar-value {
+            font-size: 14px;
+            font-weight: bold;
+            color: rgba(255, 255, 255, 0.9);
+            margin-bottom: 5px;
+            transition: all 0.3s ease;
+          }
+
+          .bar {
+            width: 30px;
+            background: linear-gradient(180deg, #40a9ff 0%, rgba(64, 169, 255, 0.3) 100%);
+            border-radius: 2px 2px 0 0;
+            min-height: 20px;
+            transition: all 0.3s ease;
+          }
+
+          .bar-label {
+            bottom: -20px;
+            font-size: 11px;
+            color: rgba(255, 255, 255, 0.7);
+            transition: all 0.3s ease;
+            position: absolute;
+          }
+        }
+      }
+
+      .chart-x-label {
+        position: absolute;
+        right: -15px;
+        bottom: 0;
+        font-size: 11px;
+        color: rgba(255, 255, 255, 0.6);
+      }
+    }
+  }
+
+  // 区县统计表格
+  .district-table-section {
+    :deep(.el-table) {
+      background: transparent;
+
+      &::before {
+        display: none;
+      }
+
+      .el-table__inner-wrapper {
+        background: transparent;
+      }
+      .el-table__inner-wrapper:before {
+        display: none;
+      }
+
+      .el-table__header-wrapper {
+        background: transparent;
+      }
+
+      .el-table__body-wrapper {
+        background: transparent;
+      }
+
+      tr {
+        background: transparent;
+
+        &:hover {
+          background: rgba(64, 169, 255, 0.05) !important;
+        }
+      }
+
+      th.el-table__cell {
+        background: transparent;
+      }
+
+      td.el-table__cell {
+        background: transparent;
+      }
+    }
+  }
+
+  // 响应调度
+  .response-section {
+    background: linear-gradient(
+      180deg,
+      rgba(21, 41, 59, 0.95) 0%,
+      rgba(13, 28, 42, 0.95) 100%
+    );
+    border: 1px solid rgba(64, 169, 255, 0.3);
+    border-radius: 8px;
+    padding: 15px;
+    margin-top: 20px;
+
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 15px;
+      background-image: url("../../assets/RiskWarning_img/标题bg@2x.png") no-repeat;
+      background-size: cover;
+      background-position: left;
+
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .icon-back {
+          width: 20px;
+          height: 20px;
+          background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          &::before {
+            content: "←";
+            color: #fff;
+            font-size: 12px;
+          }
+        }
+
+        .title {
+          font-size: 16px;
+          font-weight: bold;
+          color: #fff;
+        }
+      }
+
+      .header-filters {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 11px;
+
+        .filter-item {
+          color: rgba(255, 255, 255, 0.6);
+          padding: 3px 8px;
+          border: 1px solid rgba(64, 169, 255, 0.3);
+          border-radius: 4px;
+          cursor: pointer;
+
+          &.active {
+            background: rgba(64, 169, 255, 0.2);
+            color: #40a9ff;
+            border-color: rgba(64, 169, 255, 0.5);
+          }
+        }
+
+        .filter-separator {
+          color: rgba(255, 255, 255, 0.4);
+        }
+      }
+    }
+
+    // 6个统计项网格
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+      margin-bottom: 15px;
+
+      .stat-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px;
+        background: rgba(64, 169, 255, 0.08);
+        border-radius: 6px;
+
+        .stat-icon {
+          width: 100%;
+          max-width: 45px;
+          height: auto;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 20px;
+
+          &.icon-call::before {
+            content: "💬";
+          }
+          &.icon-reply::before {
+            content: "✉️";
+          }
+          &.icon-rate::before {
+            content: "⏱️";
+          }
+          &.icon-district::before {
+            content: "📍";
+          }
+          &.icon-help::before {
+            content: "🤝";
+          }
+          &.icon-check::before {
+            content: "👥";
+          }
+        }
+
+        .stat-info {
+          .stat-num {
+            font-size: 30px;
+            font-weight: bold;
+            color: #40a9ff;
+            margin-bottom: 2px;
+          }
+
+          .stat-label {
+            font-size: 14px;
+            color: #ffffff;
+          }
+        }
+      }
+    }
+
+    // 3个调度清单卡片
+    .dispatch-cards {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+
+      .dispatch-card {
+        padding: 12px;
+        background: rgba(64, 169, 255, 0.1);
+        border: 1px solid rgba(64, 169, 255, 0.2);
+        border-radius: 6px;
+        text-align: center;
+
+        .card-num {
+          font-size: 24px;
+          font-weight: bold;
+          color: #40a9ff;
+          margin-bottom: 6px;
+
+          .unit {
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.7);
+            font-weight: normal;
+            margin-left: 2px;
+          }
+        }
+
+        .card-label {
+          font-size: 11px;
+          color: rgba(255, 255, 255, 0.8);
+        }
+      }
+    }
+  }
+}
+
+.date-range-wrapper {
+  :deep(.el-date-editor) {
+    width: 200px;
+    background: transparent;
+    border: 1px solid rgba(64, 169, 255, 0.3);
+    border-radius: 4px;
+    background: #183c67;
+    box-shadow: inset 0px 0px 8px 0px #4fecff;
+
+    .el-range-input {
+      background: transparent;
+      color: rgba(255, 255, 255, 0.8);
+
+      &::placeholder {
+        color: rgba(255, 255, 255, 0.5);
+      }
+    }
+
+    .el-range-separator {
+      color: rgba(255, 255, 255, 0.4);
+    }
+
+    .el-icon {
+      color: rgba(255, 255, 255, 0.5);
+    }
+
+    // &:hover {
+    //   border-color: rgba(64, 169, 255, 0.5);
+    // }
+  }
+}
+</style>

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

@@ -0,0 +1,782 @@
+<template>
+  <div class="right-panel">
+    <SectionHeader title="防范应对" />
+    <!-- 防范应对 -->
+    <div class="prevention-section">
+      <!-- 第一行：队伍、人员、装备、物资 -->
+      <div class="resource-grid">
+        <div v-for="(item, index) in resourceData" :key="index" class="resource-item">
+          <!-- <div class="resource-icon" :class="item.iconClass"></div> -->
+          <img class="resource-icon" :src="item.img" alt="" />
+          <div class="resource-info">
+            <div class="resource-label">{{ item.label }}</div>
+            <div class="resource-value">
+              {{ item.value }}<span class="unit">{{ item.unit }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 管控路段数 -->
+      <div class="control-section">
+        <div class="control-title">管控路段数 <span class="control-num">2</span></div>
+        <div class="control-grid">
+          <div v-for="(item, index) in controlData" :key="index" class="control-item">
+            <div class="control-value">{{ item.value }}</div>
+            <div class="control-label">{{ item.label }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 巡查公路里程 -->
+      <div class="patrol-section">
+        <div class="patrol-header">
+          <span class="patrol-title">巡查公路里程</span>
+          <span class="patrol-mileage">234882km</span>
+        </div>
+        <div class="patrol-grid">
+          <div v-for="(item, index) in patrolData" :key="index" class="patrol-item">
+            <div class="patrol-value">{{ item.value }}</div>
+            <div class="patrol-label">{{ item.label }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 抢险投入情况 -->
+      <div class="rescue-section">
+        <div class="rescue-title">抢险投入情况</div>
+        <div class="rescue-grid">
+          <div v-for="(item, index) in rescueData" :key="index" class="rescue-item">
+            <!-- <div class="rescue-icon" :class="item.iconClass"></div> -->
+            <img class="rescue-icon" :src="item.img" alt="" />
+            <div class="rescue-info">
+              <div class="rescue-value">
+                {{ item.value }}<span class="unit">{{ item.unit }}</span>
+              </div>
+              <div class="rescue-label">{{ item.label }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 受灾情况 -->
+    <div class="disaster-section">
+      <SectionHeader title="受灾情况">
+        <template #right>
+          <div class="header-filters">
+            <span class="filter-item active">本轮</span>
+            <div class="date-range-wrapper">
+              <el-date-picker
+                v-model="dateRange"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                size="small"
+                popper-class="dark-date-picker"
+                :prefix-icon="Calendar"
+              />
+            </div>
+          </div>
+        </template>
+      </SectionHeader>
+
+      <!-- 阻断情况 -->
+      <div class="block-section">
+        <div class="block-title">阻断情况(已抢通/阻断数)</div>
+        <div class="block-grid">
+          <div class="block-item">
+            <div class="block-num">
+              <span class="current">{{ blockData[0].current }}</span>
+              <span class="separator">/</span>
+              <span class="total">{{ blockData[0].total }}</span>
+            </div>
+            <div class="block-label">{{ blockData[0].label }}</div>
+          </div>
+          <div class="divider-line"></div>
+
+          <div class="block-item">
+            <div class="block-num">
+              <span class="current">{{ blockData[1].current }}</span>
+              <span class="separator">/</span>
+              <span class="total">{{ blockData[1].total }}</span>
+            </div>
+            <div class="block-label">{{ blockData[1].label }}</div>
+          </div>
+
+          <div class="divider-line"></div>
+
+          <div class="block-item death-item">
+            <div class="death-num">{{ deathData.value }}</div>
+            <div class="death-label">{{ deathData.label }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 灾害情况 -->
+      <div class="damage-section">
+        <div class="damage-title">灾害情况</div>
+        <div class="damage-grid">
+          <div
+            v-for="(item, index) in damageData"
+            :key="index"
+            class="damage-item"
+            :class="item.class"
+          >
+            <div class="damage-value">
+              {{ item.value }}<span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="damage-label">{{ item.label }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 重大事件 -->
+      <div class="event-section">
+        <span class="event-title">重大事件：</span>
+        <span class="event-num">{{ majorEvent }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+
+import SectionHeader from "./component/sectionHeader.vue";
+import { Calendar } from "@element-plus/icons-vue";
+
+import icon1 from "../../assets/RiskWarning_img/icon1@2x.png";
+import icon2 from "../../assets/RiskWarning_img/icon2@2x.png";
+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 icon13 from "../../assets/RiskWarning_img/icon-1@2x.png";
+
+import icon51 from "../../assets/RiskWarning_img/编组5@2x.png";
+import icon52 from "../../assets/RiskWarning_img/编组22@2x.png";
+import icon55 from "../../assets/RiskWarning_img/路径55@2x.png";
+
+import icon62 from "../../assets/RiskWarning_img/路径62@2x.png";
+import icon621 from "../../assets/RiskWarning_img/路径62@2x (1).png";
+import icon622 from "../../assets/RiskWarning_img/路径62@2x (2).png";
+
+// 日期范围选择器
+const dateRange = ref([]);
+
+// 资源数据（队伍、人员、装备、物资）
+const resourceData = [
+  {
+    label: "全市普通公路抢险队伍",
+    value: "39",
+    unit: "支",
+    iconClass: "icon-team",
+    img: icon1,
+  },
+  { label: "人员", value: "1612", unit: "人", iconClass: "icon-person", img: icon2 },
+  { label: "储备装备", value: "1157", unit: "台", iconClass: "icon-equip", img: icon3 },
+  { label: "物资", value: "41.5", unit: "万件", iconClass: "icon-material", img: icon4 },
+];
+
+// 管控路段数据
+const controlData = [
+  { label: "全幅封闭数", value: "40" },
+  { label: "半幅通行数", value: "40" },
+  { label: "限速(限车型)数", value: "30" },
+  { label: "告警阻拦处数", value: "42" },
+  { label: "停工项目数", value: "24" },
+  { label: "关闭驻地数", value: "32" },
+  { label: "转移撤离人员数", value: "58" },
+];
+
+// 巡查数据
+const patrolData = [
+  { label: "巡查路段数", value: "2" },
+  { label: "巡查桥梁数", value: "1" },
+  { label: "巡查边坡数", value: "6" },
+  { label: "巡查隧道数", value: "10" },
+  { label: "巡查项目数", value: "6" },
+];
+
+// 抢险投入数据
+const rescueData = [
+  {
+    label: "本轮出动人次",
+    value: "22341",
+    unit: "人次",
+    iconClass: "icon-rescue-person",
+    img: icon11,
+  },
+  {
+    label: "本轮出动设备",
+    value: "341",
+    unit: "台次",
+    iconClass: "icon-rescue-equip",
+    img: icon12,
+  },
+  {
+    label: "清理塌方",
+    value: "1367",
+    unit: "万立方米",
+    iconClass: "icon-rescue-clear",
+    img: icon13,
+  },
+];
+
+// 受灾情况 - 阻断数据
+const blockData = [
+  { label: "今日新增阻断数", current: "19", total: "23" },
+  { label: "本轮累计阻断数", current: "10", total: "23" },
+];
+
+// 死亡人数
+const deathData = { label: "本轮因灾死亡人数", value: "5" };
+
+// 灾害情况数据
+const damageData = [
+  { label: "本轮塌方量", value: "23", unit: "万立方米", class: "blue" },
+  { label: "汛期塌方量", value: "23", unit: "万立方米", class: "blue" },
+  { label: "当年塌方量", value: "23", unit: "万立方米", class: "blue" },
+  { label: "本轮已损失", value: "80", unit: "万元", class: "red" },
+  { label: "汛期已损失", value: "18", unit: "万元", class: "red" },
+  { label: "当年已损失", value: "350", unit: "万元", class: "red" },
+];
+
+// 重大事件数
+const majorEvent = "0";
+</script>
+
+<style lang="scss" scoped>
+.right-panel {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.prevention-section {
+  // background: linear-gradient(
+  //   180deg,
+  //   rgba(21, 41, 59, 0.95) 0%,
+  //   rgba(13, 28, 42, 0.95) 100%
+  // );
+  // border: 1px solid rgba(64, 169, 255, 0.3);
+  border-radius: 8px;
+  padding: 15px;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  background-image: url("../../assets/RiskWarning_img/标题bg@2x.png");
+  align-items: center;
+  margin-bottom: 15px;
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .icon-back {
+      width: 20px;
+      height: 20px;
+      background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &::before {
+        content: "←";
+        color: #fff;
+        font-size: 12px;
+      }
+    }
+
+    .title {
+      font-size: 18px;
+      font-weight: bold;
+      color: #fff;
+    }
+  }
+}
+
+// 资源网格（队伍、人员、装备、物资）
+.resource-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  margin-bottom: 15px;
+
+  .resource-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px;
+    background: linear-gradient(270deg, rgba(18, 84, 97, 0) 0%, #204a55 100%);
+    border: 2px solid transparent;
+    border-image: linear-gradient(270deg, rgba(80, 201, 191, 0), rgba(39, 135, 153, 1)) 2
+      2;
+    border-radius: 6px;
+    border-right: 0px;
+
+    .resource-icon {
+      width: 36px;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 22px;
+
+      &.icon-team::before {
+        content: "👷";
+      }
+      &.icon-person::before {
+        content: "👤";
+      }
+      &.icon-equip::before {
+        content: "🚛";
+      }
+      &.icon-material::before {
+        content: "📦";
+      }
+    }
+
+    .resource-info {
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .resource-label {
+        width: 48%;
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.7);
+        margin-bottom: 4px;
+      }
+
+      .resource-value {
+        font-size: 22px;
+        font-weight: bold;
+        color: #40a9ff;
+
+        .unit {
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.7);
+          font-weight: normal;
+          margin-left: 2px;
+        }
+      }
+    }
+  }
+}
+
+// 管控路段
+.control-section {
+  margin-bottom: 15px;
+
+  .control-title {
+    font-size: 16px;
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 10px;
+
+    .control-num {
+      font-size: 18px;
+
+      color: #40a9ff;
+      font-weight: bold;
+      margin-left: 5px;
+    }
+  }
+
+  .control-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    background: #182f4c;
+    box-shadow: inset 0px 0px 8px 0px #379bff;
+    gap: 8px;
+
+    .control-item {
+      text-align: center;
+      padding: 10px 5px;
+      // background: rgba(64, 169, 255, 0.1);
+      border-radius: 4px;
+
+      .control-value {
+        font-size: 24px;
+        font-weight: bold;
+        color: #40a9ff;
+        margin-bottom: 4px;
+      }
+
+      .control-label {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.7);
+      }
+    }
+  }
+}
+
+// 巡查公路里程
+.patrol-section {
+  margin-bottom: 15px;
+
+  .patrol-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+
+    .patrol-title {
+      font-size: 16px;
+      color: rgba(255, 255, 255, 0.9);
+    }
+
+    .patrol-mileage {
+      font-size: 18px;
+      font-weight: bold;
+      color: #40a9ff;
+    }
+  }
+
+  .patrol-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 8px;
+
+    .patrol-item {
+      text-align: center;
+      padding: 10px 5px;
+      // background: rgba(64, 169, 255, 0.1);
+      // border-radius: 4px;
+      background-image: url("../../assets/RiskWarning_img/路径62@2x (1).png");
+      background-size: 100% 100%;
+      background-position: right;
+
+      .patrol-value {
+        font-size: 24px;
+        font-weight: bold;
+        color: #40a9ff;
+        margin-bottom: 4px;
+        text-align: left;
+        margin-left: 5px;
+      }
+
+      .patrol-label {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.7);
+      }
+    }
+  }
+}
+
+// 抢险投入情况
+.rescue-section {
+  .rescue-title {
+    font-size: 16px;
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 10px;
+  }
+
+  .rescue-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+
+    .rescue-item {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 12px 0;
+      // background: rgba(64, 169, 255, 0.1);
+      // border: 1px solid rgba(64, 169, 255, 0.2);
+      // border-radius: 6px;
+      background-image: url("../../assets/RiskWarning_img/路径62@2x (1).png");
+      background-size: 100% 100%;
+      background-position: right;
+
+      .rescue-icon {
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+        margin-left: 5px;
+
+        &.icon-rescue-person::before {
+          content: "👷";
+        }
+        &.icon-rescue-equip::before {
+          content: "🚜";
+        }
+        &.icon-rescue-clear::before {
+          content: "🏔️";
+        }
+      }
+
+      .rescue-info {
+        .rescue-value {
+          font-size: 22px;
+          font-weight: bold;
+          color: #40a9ff;
+          margin-bottom: 4px;
+          display: flex;
+          align-items: center;
+
+          .unit {
+            font-size: 10px;
+            color: rgba(255, 255, 255, 0.7);
+            font-weight: normal;
+            margin-left: 2px;
+          }
+        }
+
+        .rescue-label {
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.7);
+        }
+      }
+    }
+  }
+}
+
+// 受灾情况样式
+.disaster-section {
+  background: linear-gradient(
+    180deg,
+    rgba(21, 41, 59, 0.95) 0%,
+    rgba(13, 28, 42, 0.95) 100%
+  );
+  border: 1px solid rgba(64, 169, 255, 0.3);
+  border-radius: 8px;
+  padding: 15px;
+  margin-top: 15px;
+
+  .block-section {
+    margin-bottom: 15px;
+
+    .block-title {
+      font-size: 16px;
+      color: rgba(255, 255, 255, 0.8);
+      margin-bottom: 10px;
+    }
+
+    .block-grid {
+      display: flex;
+      justify-content: space-between;
+      height: 100%;
+      padding: 0 20px;
+      // display: grid;
+      // grid-template-columns: repeat(5, 1fr);
+      // gap: 10px;
+      background-image: url("../../assets/RiskWarning_img/编组22@2x.png");
+      background-size: 100% 100%;
+      background-position: center;
+
+      .divider-line {
+        width: 2px;
+        height: 40px;
+        margin: auto 0;
+        background: linear-gradient(
+          180deg,
+          transparent 0%,
+          #40a9ff 50%,
+          transparent 100%
+        );
+        // margin: 0 auto;
+      }
+
+      .block-item {
+        text-align: center;
+        padding: 12px 8px;
+        // background: rgba(64, 169, 255, 0.1);
+        // border-radius: 6px;
+        // background-image: url("../../assets/RiskWarning_img/路径62@2x (1).png");
+        // background-size: 100% 100%;
+        // background-position: left;
+
+        .block-num {
+          font-size: 24px;
+          font-weight: bold;
+          margin-bottom: 6px;
+
+          .current {
+            color: #40a9ff;
+          }
+
+          .separator {
+            color: rgba(255, 255, 255, 0.5);
+            margin: 0 2px;
+          }
+
+          .total {
+            color: #ff4d4f;
+          }
+        }
+
+        .block-label {
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.7);
+        }
+
+        &.death-item {
+          .death-num {
+            font-size: 28px;
+            font-weight: bold;
+            color: #40a9ff;
+            margin-bottom: 6px;
+          }
+
+          .death-label {
+            font-size: 11px;
+            color: rgba(255, 255, 255, 0.7);
+          }
+        }
+      }
+    }
+  }
+
+  .damage-section {
+    margin-bottom: 15px;
+
+    .damage-title {
+      font-size: 16px;
+      color: rgba(255, 255, 255, 0.8);
+      margin-bottom: 10px;
+    }
+
+    .damage-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+
+      .damage-item {
+        text-align: center;
+        padding: 12px 8px;
+        // background: rgba(64, 169, 255, 0.1);
+        // border-radius: 6px;
+        background-image: url("../../assets/RiskWarning_img/路径62@2x.png");
+        background-size: 100% 100%;
+        background-position: left;
+
+        .damage-value {
+          font-size: 28px;
+          font-weight: bold;
+          margin-bottom: 6px;
+
+          .unit {
+            font-size: 14px;
+            font-weight: normal;
+            margin-left: 2px;
+          }
+        }
+
+        .damage-label {
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.7);
+        }
+
+        &.blue .damage-value {
+          color: #40a9ff;
+          .unit {
+            color: rgba(255, 255, 255, 0.7);
+          }
+        }
+
+        &.red .damage-value {
+          color: #ff4d4f;
+          .unit {
+            color: rgba(255, 255, 255, 0.7);
+          }
+        }
+      }
+    }
+  }
+
+  .event-section {
+    text-align: center;
+    padding: 12px;
+    // background: rgba(64, 169, 255, 0.1);
+    // border-radius: 6px;
+    background-image: url("../../assets/RiskWarning_img/编组5@2x.png");
+    background-size: 100% 100%;
+    background-position: left;
+
+    .event-title {
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.9);
+    }
+
+    .event-num {
+      font-size: 24px;
+      font-weight: bold;
+      color: #ff4d4f;
+    }
+  }
+}
+.header-filters {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+
+  .filter-item {
+    color: rgba(255, 255, 255, 0.6);
+    padding: 3px 8px;
+    border: 1px solid rgba(64, 169, 255, 0.3);
+    border-radius: 4px;
+    cursor: pointer;
+
+    &.active {
+      background: rgba(64, 169, 255, 0.2);
+      color: #40a9ff;
+      border-color: rgba(64, 169, 255, 0.5);
+    }
+  }
+
+  .filter-separator {
+    color: rgba(255, 255, 255, 0.4);
+  }
+}
+.date-range-wrapper {
+  :deep(.el-date-editor) {
+    width: 200px;
+    background: transparent;
+    border: 1px solid rgba(64, 169, 255, 0.3);
+    border-radius: 4px;
+    background: #183c67;
+    box-shadow: inset 0px 0px 8px 0px #4fecff;
+
+    .el-range-input {
+      background: transparent;
+      color: rgba(255, 255, 255, 0.8);
+
+      &::placeholder {
+        color: rgba(255, 255, 255, 0.5);
+      }
+    }
+
+    .el-range-separator {
+      color: rgba(255, 255, 255, 0.4);
+    }
+
+    .el-icon {
+      color: rgba(255, 255, 255, 0.5);
+    }
+
+    // &:hover {
+    //   border-color: rgba(64, 169, 255, 0.5);
+    // }
+  }
+}
+</style>

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

@@ -0,0 +1,166 @@
+<template>
+  <div class="filter-header">
+    <div class="filter-container">
+      <span class="filter-item active">本轮</span>
+      <div class="date-range-wrapper">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          size="small"
+          popper-class="dark-date-picker"
+          :prefix-icon="Calendar"
+        />
+      </div>
+    </div>
+    <img class="filter-icon-ai" src="../../assets/RiskWarning_img/AI1@2x.png" alt="" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { Calendar } from "@element-plus/icons-vue";
+
+const dateRange = ref([]);
+</script>
+
+<style lang="scss" scoped>
+.filter-header {
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  // align-items: center;
+}
+
+.filter-container {
+  display: flex;
+  align-items: center;
+  height: 20px;
+  gap: 8px;
+  font-size: 13px;
+
+  .filter-item {
+    color: rgba(255, 255, 255, 0.6);
+    padding: 0 12px;
+    height: 24px;
+    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;
+
+    // &:hover {
+    //   border-color: rgba(64, 169, 255, 0.5);
+    //   color: rgba(255, 255, 255, 0.8);
+    // }
+
+    // &.active {
+    //   background: rgba(64, 169, 255, 0.2);
+    //   color: #40a9ff;
+    //   border-color: rgba(64, 169, 255, 0.5);
+    // }
+  }
+
+  .date-range-wrapper {
+    :deep(.el-date-editor) {
+      width: 200px;
+      background: transparent;
+      border: 1px solid rgba(64, 169, 255, 0.3);
+      border-radius: 4px;
+      background: #183c67;
+      box-shadow: inset 0px 0px 8px 0px #4fecff;
+
+      .el-range-input {
+        background: transparent;
+        color: rgba(255, 255, 255, 0.8);
+
+        &::placeholder {
+          color: rgba(255, 255, 255, 0.5);
+        }
+      }
+
+      .el-range-separator {
+        color: rgba(255, 255, 255, 0.4);
+      }
+
+      .el-icon {
+        color: rgba(255, 255, 255, 0.5);
+      }
+
+      // &:hover {
+      //   border-color: rgba(64, 169, 255, 0.5);
+      // }
+    }
+  }
+}
+.filter-icon-ai {
+  width: 67px;
+  height: 67px;
+  cursor: pointer;
+}
+// 日期选择器下拉面板样式
+.dark-date-picker {
+  background: rgba(21, 41, 59, 0.95) !important;
+  border: 1px solid rgba(64, 169, 255, 0.3) !important;
+
+  .el-picker-panel__content {
+    background: transparent;
+  }
+
+  .el-date-table {
+    th {
+      color: rgba(255, 255, 255, 0.7);
+    }
+
+    td {
+      color: rgba(255, 255, 255, 0.9);
+
+      &.prev-month,
+      &.next-month {
+        color: rgba(255, 255, 255, 0.4);
+      }
+
+      &:hover {
+        color: #40a9ff;
+      }
+
+      &.current:not(.disabled) {
+        span {
+          background: #40a9ff;
+        }
+      }
+
+      &.start-date,
+      &.end-date {
+        span {
+          background: #40a9ff;
+        }
+      }
+
+      &.in-range {
+        background: rgba(64, 169, 255, 0.2);
+      }
+    }
+  }
+
+  .el-picker-panel__icon-btn {
+    color: rgba(255, 255, 255, 0.7);
+
+    &:hover {
+      color: #40a9ff;
+    }
+  }
+
+  .el-date-picker__header-label {
+    color: rgba(255, 255, 255, 0.9);
+
+    &:hover {
+      color: #40a9ff;
+    }
+  }
+}
+</style>