演练页面

src/assets/business_Emergency/iconDrill5.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4474 1.18421H12.8297C14.0289 1.18421 15 2.15605 15 3.35704V12.827C15 14.0272 14.0286 15 12.8297 15H2.17026C0.971053 15 0 14.0282 0 12.8272V3.35724C0 2.15704 0.971448 1.18421 2.17026 1.18421H3.55263V0.592105C3.55263 0.435069 3.61501 0.284465 3.72606 0.173424C3.8371 0.0623825 3.9877 0 4.14474 0C4.30177 0 4.45238 0.0623825 4.56342 0.173424C4.67446 0.284465 4.73684 0.435069 4.73684 0.592105V1.18421H10.2632V0.592105C10.2632 0.435069 10.3255 0.284465 10.4366 0.173424C10.5476 0.0623825 10.6982 0 10.8553 0C11.0123 0 11.1629 0.0623825 11.2739 0.173424C11.385 0.284465 11.4474 0.435069 11.4474 0.592105V1.18421ZM11.4474 2.36842V2.96053C11.4474 3.11756 11.385 3.26817 11.2739 3.37921C11.1629 3.49025 11.0123 3.55263 10.8553 3.55263C10.6982 3.55263 10.5476 3.49025 10.4366 3.37921C10.3255 3.26817 10.2632 3.11756 10.2632 2.96053V2.36842H4.73684V2.96053C4.73684 3.11756 4.67446 3.26817 4.56342 3.37921C4.45238 3.49025 4.30177 3.55263 4.14474 3.55263C3.9877 3.55263 3.8371 3.49025 3.72606 3.37921C3.61501 3.26817 3.55263 3.11756 3.55263 2.96053V2.36842H2.17026C2.0406 2.36858 1.91224 2.39427 1.79251 2.44404C1.67278 2.49381 1.56402 2.56668 1.47246 2.65848C1.38089 2.75029 1.30831 2.85923 1.25885 2.97909C1.20939 3.09895 1.18403 3.22738 1.18421 3.35704V12.827C1.18387 12.9567 1.20913 13.0852 1.25853 13.2051C1.30793 13.3251 1.3805 13.4341 1.4721 13.5259C1.56369 13.6178 1.67251 13.6907 1.79231 13.7404C1.91211 13.7901 2.04055 13.8158 2.17026 13.8158H12.8297C12.9594 13.8156 13.0878 13.7899 13.2075 13.7402C13.3272 13.6904 13.436 13.6175 13.5275 13.5257C13.6191 13.4339 13.6917 13.325 13.7411 13.2051C13.7906 13.0853 13.816 12.9568 13.8158 12.8272V3.35724C13.8161 3.22752 13.7909 3.09901 13.7415 2.97907C13.6921 2.85913 13.6195 2.75011 13.5279 2.65826C13.4363 2.56641 13.3275 2.49353 13.2077 2.4438C13.0879 2.39406 12.9595 2.36845 12.8297 2.36842H11.4474ZM11.25 6.51316C11.407 6.51316 11.5576 6.57554 11.6687 6.68658C11.7797 6.79762 11.8421 6.94823 11.8421 7.10526C11.8421 7.2623 11.7797 7.4129 11.6687 7.52394C11.5576 7.63499 11.407 7.69737 11.25 7.69737H3.75C3.59296 7.69737 3.44236 7.63499 3.33132 7.52394C3.22028 7.4129 3.1579 7.2623 3.1579 7.10526C3.1579 6.94823 3.22028 6.79762 3.33132 6.68658C3.44236 6.57554 3.59296 6.51316 3.75 6.51316H11.25ZM8.88158 9.47368C9.03862 9.47368 9.18922 9.53607 9.30026 9.64711C9.4113 9.75815 9.47368 9.90875 9.47368 10.0658C9.47368 10.2228 9.4113 10.3734 9.30026 10.4845C9.18922 10.5955 9.03862 10.6579 8.88158 10.6579H3.75C3.59296 10.6579 3.44236 10.5955 3.33132 10.4845C3.22028 10.3734 3.1579 10.2228 3.1579 10.0658C3.1579 9.90875 3.22028 9.75815 3.33132 9.64711C3.44236 9.53607 3.59296 9.47368 3.75 9.47368H8.88158Z" fill="#999999"/>
+</svg>

src/assets/business_Emergency/iconDrill6.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.4616 15.5807L13.6036 12.7227C14.7033 11.4535 15.3034 9.84973 15.3034 8.15366C15.3034 6.28667 14.5764 4.53143 13.2562 3.21125C11.936 1.89111 10.1808 1.16406 8.31378 1.16406C6.44679 1.16406 4.69155 1.89111 3.37141 3.21127C2.05125 4.53143 1.32422 6.28668 1.32422 8.15366C1.32422 10.0206 2.05127 11.7759 3.37143 13.0961C4.69157 14.4162 6.44682 15.1433 8.31379 15.1433C9.85625 15.1433 11.3221 14.6466 12.5297 13.7296L15.4212 16.6211C15.5648 16.7647 15.7531 16.8366 15.9414 16.8366C16.1297 16.8366 16.318 16.7647 16.4616 16.6211C16.7489 16.3338 16.7489 15.868 16.4616 15.5807ZM2.79557 8.15366C2.79557 5.11089 5.27103 2.63543 8.31378 2.63543C11.3565 2.63543 13.832 5.11089 13.832 8.15366C13.832 11.1964 11.3565 13.6719 8.31378 13.6719C5.27103 13.6719 2.79557 11.1964 2.79557 8.15366Z" fill="white"/>
+</svg>

src/assets/business_Emergency/iconDrill7.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2756_25441)">
+<path d="M15.2 7.2002H0.8C0.36 7.2002 0 7.5602 0 8.0002C0 8.4402 0.36 8.8002 0.8 8.8002H15.2C15.64 8.8002 16 8.4402 16 8.0002C16 7.5602 15.64 7.2002 15.2 7.2002Z" fill="white"/>
+<path d="M7.99922 0C7.55922 0 7.19922 0.36 7.19922 0.8V15.2C7.19922 15.64 7.55922 16 7.99922 16C8.43922 16 8.79922 15.64 8.79922 15.2V0.8C8.79922 0.36 8.43922 0 7.99922 0Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2756_25441">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/pages/business_emergencyDrill/EmergencyDrill.js

@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Button } from "antd";
+import { Button, DatePicker } from "antd";
-import { ClockCircleOutlined, EnvironmentOutlined, UserOutlined } from '@ant-design/icons';
+import { ClockCircleOutlined, EnvironmentOutlined, UserOutlined, CalendarOutlined } from '@ant-design/icons';
+
+const { RangePicker } = DatePicker;
 import * as echarts from 'echarts';
 import styles from './EmergencyDrill.less';
 import { Import } from '../business_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection';
@@ -9,6 +11,9 @@ import iconDrill1 from '../../assets/business_Emergency/iconDrill1.svg';
 import iconDrill2 from '../../assets/business_Emergency/iconDrill2.jpg';
 import iconDrill3 from '../../assets/business_Emergency/iconDrill3.svg';
 import iconDrill4 from '../../assets/business_Emergency/iconDrill4.svg';
+import iconDrill5 from '../../assets/business_Emergency/iconDrill5.svg';
+import iconDrill6 from '../../assets/business_Emergency/iconDrill6.svg';
+import iconDrill7 from '../../assets/business_Emergency/iconDrill7.svg';
 
 const EmergencyDrill = () => {
   const [timeType, setTimeType] = useState('month');
@@ -16,8 +21,7 @@ const EmergencyDrill = () => {
   const chartInstanceRef = useRef(null);
 
   // 第三块状态
-  const [startDate, setStartDate] = useState('2024-08-23 00:00');
+  const [dateRange, setDateRange] = useState(null);
-  const [endDate, setEndDate] = useState('2024-08-23 00:00');
   const [companyName, setCompanyName] = useState('');
   const [unitName, setUnitName] = useState('');
   const [pagination, setPagination] = useState({
@@ -113,6 +117,15 @@ const EmergencyDrill = () => {
 
     chartInstanceRef.current.setOption(option);
 
+    // 使用 ResizeObserver 监听容器尺寸变化
+    const resizeObserver = new ResizeObserver(() => {
+      chartInstanceRef.current?.resize();
+    });
+
+    if (chartRef.current) {
+      resizeObserver.observe(chartRef.current);
+    }
+
     // 窗口大小变化时重新渲染
     const handleResize = () => {
       chartInstanceRef.current?.resize();
@@ -120,6 +133,7 @@ const EmergencyDrill = () => {
     window.addEventListener('resize', handleResize);
 
     return () => {
+      resizeObserver.disconnect();
       window.removeEventListener('resize', handleResize);
     };
   }, [timeType]);
@@ -276,6 +290,15 @@ const EmergencyDrill = () => {
 
     chartInstanceRef2.current.setOption(option);
 
+    // 使用 ResizeObserver 监听容器尺寸变化
+    const resizeObserver = new ResizeObserver(() => {
+      chartInstanceRef2.current?.resize();
+    });
+
+    if (chartRef2.current) {
+      resizeObserver.observe(chartRef2.current);
+    }
+
     // 窗口大小变化时重新渲染
     const handleResize = () => {
       chartInstanceRef2.current?.resize();
@@ -283,6 +306,7 @@ const EmergencyDrill = () => {
     window.addEventListener('resize', handleResize);
 
     return () => {
+      resizeObserver.disconnect();
       window.removeEventListener('resize', handleResize);
     };
   }, []);
@@ -523,23 +547,42 @@ const EmergencyDrill = () => {
         <div className={styles.searchBar}>
           <div className={styles.searchLeft}>
             <div className={styles.searchItem}>
-              <span className={styles.searchLabel}>演练日期</span>
+              <span className={styles.searchLabel}>演练日期:</span>
-              <input 
+              <div style={{ display: 'flex', alignItems: 'center', border: '1px  solid #DDDEE6', borderRadius: '2px' }}>
-                type="text" 
+                <div className={styles.datePickerWithIcon}>
-                className={styles.dateInput}
+                  <img src={iconDrill5} alt="日期icon" className={styles.dateIcon} />
-                value={startDate}
+                  <DatePicker
-                onChange={(e) => setStartDate(e.target.value)}
+                    showTime={{ format: 'HH:mm' }}
-                placeholder="请输入演练日期"
+                    format="YYYY-MM-DD HH:mm"
-              />
+                    value={dateRange ? dateRange[0] : null}
-              <span className={styles.dateSeparator}>~</span>
+                    onChange={(value) => {
-              <input 
+                      setDateRange([value, dateRange ? dateRange[1] : null]);
-                type="text" 
+                    }}
-                className={styles.dateInput}
+                    placeholder="请输入演练日期"
-                value={endDate}
+                    className={styles.datePickerFirst}
-                onChange={(e) => setEndDate(e.target.value)}
+                    suffixIcon={null}
-                placeholder="请输入演练日期"
+                  />
-              />
+                </div>
+                {/* 短线 */}
+                <div className={styles.dateSeparator}></div>
+
+                <div className={styles.datePickerWithIcon}>
+                  <img src={iconDrill5} alt="日期icon" className={styles.dateIcon} />
+                  <DatePicker
+                    showTime={{ format: 'HH:mm' }}
+                    format="YYYY-MM-DD HH:mm"
+                    value={dateRange ? dateRange[1] : null}
+                    onChange={(value) => {
+                      setDateRange([dateRange ? dateRange[0] : null, value]);
+                    }}
+                    placeholder="请输入演练日期"
+                    className={styles.datePickerFirst}
+                    suffixIcon={null}
+                  />
+                </div>
+              </div>
             </div>
+
             <div className={styles.searchItem}>
               <input
                 type="text"
@@ -563,7 +606,7 @@ const EmergencyDrill = () => {
             <Button
               type="primary"
               className={styles.searchButton}
-              icon={<span style={{marginRight: 4}}>🔍</span>}
+              icon={<img src={iconDrill6} alt="查询icon" style={{ width: 14, height: 14 }} />}
             >
               查询
             </Button>
@@ -571,7 +614,7 @@ const EmergencyDrill = () => {
           <Button
             type="primary"
             className={styles.uploadButton}
-            icon={<span style={{marginRight: 4}}>+</span>}
+            icon={<img src={iconDrill7} alt="上传icon" style={{ width: 14, height: 14 }} />}
           >
             上传
           </Button>
@@ -587,7 +630,7 @@ const EmergencyDrill = () => {
                   company: '文登市兴文新材料有限公司',
                   drillDate: '2025-10-13 02:59:33',
                   drillType: '化学品泄漏',
-                  drillLocation: '西辛南区6号(旧办厂区南侧)',
+                  drillLocation: '西辛南区6号',
                   participants: 40,
                   score: '83分',
                   status: '进行中',
@@ -641,27 +684,27 @@ const EmergencyDrill = () => {
                 title: '演练地点',
                 dataIndex: 'drillLocation',
                 key: 'drillLocation',
-                width: 200,
+                width: 160,
               },
               {
                 title: '参加人数',
                 dataIndex: 'participants',
                 key: 'participants',
-                width: 100,
+                width: 80,
                 align: 'center',
               },
               {
                 title: '评分',
                 dataIndex: 'score',
                 key: 'score',
-                width: 100,
+                width: 80,
                 align: 'center',
               },
               {
                 title: '状态',
                 dataIndex: 'status',
                 key: 'status',
-                width: 100,
+                width: 80,
                 align: 'center',
                 render: (status) => {
                   let className = styles.statusInProgress;
@@ -685,7 +728,7 @@ const EmergencyDrill = () => {
                   <div className={styles.actionButtons}>
                     <span className={styles.actionLink}>查看</span>
                     <span className={styles.actionLink}>下载</span>
-                    <span className={styles.actionLink} style={{color: '#FF4D4F'}}>删除</span>
+                    <span className={styles.actionLink} style={{ color: '#FF4D4F' }}>删除</span>
                   </div>
                 ),
               },

src/pages/business_emergencyDrill/EmergencyDrill.less

@@ -53,11 +53,12 @@
         .startBtn {
           display: flex;
           align-items: center;
+          height: 28px;
           gap: 6px;
-          padding: 6px 12px;
+          padding: 5px 10px;
           background: linear-gradient(180deg, #556FEB 0%, #8DAAF7 100%);
           color: #fff;
-          font-size: 14px;
+          font-size: 12px;
           font-weight: 400;
           border: none;
           border-radius: 4px;
@@ -297,10 +298,11 @@
     padding: 0;
     margin: 0;
     display: flex;
+    flex-direction: row;
     gap: 15px;
 
     .block2_item1 {
-      width: 75%;
+      width: 70%;
       height: 100%;
       background-color: #fff;
       display: flex;
@@ -327,13 +329,16 @@
       }
 
       .block2_item1_content {
+        width: 100%;
+        min-width: 0;
         flex: 1;
         display: flex;
         gap: 5px;
         overflow: hidden;
 
         .drillCard1 {
-          flex: 1;
+          width: 240px;
+          flex-shrink: 0;
           background-color: #F1F7FF;
           padding: 8px 5px;
           display: flex;
@@ -412,7 +417,7 @@
               color: #666666;
               border-radius: 4px;
               height: 28px;
-              font-size: 14px;
+              font-size: 13px;
               display: flex;
               align-items: center;
               justify-content: center;
@@ -426,7 +431,8 @@
         }
 
         .drillCard2 {
-          flex: 1;
+          min-width: 220px;
+          flex-shrink: 0;
           background-color: #FFFBF7;
           padding: 8px 5px;
           display: flex;
@@ -507,7 +513,7 @@
               color: #666666;
               border-radius: 4px;
               height: 28px;
-              font-size: 14px;
+              font-size: 13px;
               display: flex;
               align-items: center;
               justify-content: center;
@@ -521,7 +527,8 @@
         }
 
         .drillCard3 {
-          flex: 1;
+          width: 220px;
+          flex-shrink: 0;
           background-color: #F3FFF5;
           padding: 8px 5px;
           display: flex;
@@ -602,7 +609,7 @@
               color: #666666;
               border-radius: 4px;
               height: 28px;
-              font-size: 14px;
+              font-size: 13px;
               display: flex;
               align-items: center;
               justify-content: center;
@@ -616,7 +623,8 @@
         }
 
         .drillCard4 {
-          flex: 1;
+          width: 220px;
+          flex-shrink: 0;
           background-color: #F3FFF5;
           padding: 8px 5px;
           display: flex;
@@ -697,7 +705,7 @@
               color: #666666;
               border-radius: 4px;
               height: 28px;
-              font-size: 14px;
+              font-size: 13px;
               display: flex;
               align-items: center;
               justify-content: center;
@@ -726,7 +734,7 @@
         margin-bottom: 12px;
 
         .headerLine {
-          width: 2px;
+          width: 3px;
           height: 16px;
           background-color: #2E4CD4;
           margin-right: 8px;
@@ -743,7 +751,7 @@
         flex: 1;
         display: flex;
         gap: 12px;
-        overflow-x: auto;
+        overflow-x: hidden;
 
         .videoCard {
           flex-shrink: 0;
@@ -830,7 +838,7 @@
     width: 100%;
     flex: 1;
     background-color: #FFFFFF;
-    padding: 20px;
+    padding: 10px 10px 0 10px;
 
     .block3Header {
       display: flex;
@@ -839,7 +847,7 @@
       margin-bottom: 16px;
 
       .headerLine {
-        width: 2px;
+        width: 3px;
         height: 16px;
         background-color: #2E4CD4;
       }
@@ -870,18 +878,65 @@
           gap: 8px;
 
           .searchLabel {
-            font-size: 14px;
+            font-size: 13px;
             color: #333333;
             white-space: nowrap;
           }
 
+          .datePickerWithIcon {
+            display: inline-flex;
+            align-items: center;
+            height: 30px;
+            border: none;
+
+            .dateIcon {
+              display: flex;
+              align-items: center;
+              padding: 0 0px 0 14px;
+              border: none;
+            }
+
+            .datePickerFirst {
+              height: 28px;
+              width: 125px;
+              border: none;
+
+              :global {
+                .ant-picker-input>input::placeholder {
+                  color: #666 !important;
+                  font-size: 13px;
+                }
+              }
+            }
+
+            :global {
+              .ant-picker-focused {
+                box-shadow: none;
+              }
+            }
+
+            .datePicker {
+              flex: 1;
+              border: none;
+              background: transparent;
+            }
+          }
+
+
+          .dateSeparator {
+            width: 12px;
+            height: 1px;
+            background-color: #999;
+            flex-shrink: 0;
+          }
+
+
           .dateInput {
             width: 150px;
             height: 32px;
             padding: 0 12px;
-            border: 1px solid #D9D9D9;
+            border: none;
-            border-radius: 4px;
+            font-size: 13px;
-            font-size: 14px;
             outline: none;
             transition: all 0.3s;
 
@@ -890,22 +945,17 @@
             }
 
             &::placeholder {
-              color: #BFBFBF;
+              color: #666;
             }
           }
 
-          .dateSeparator {
-            color: #999999;
-            margin: 0 4px;
-          }
-
           .companyInput {
-            width: 200px;
+            width: 150px;
-            height: 32px;
+            height: 31px;
-            padding: 0 12px;
+            padding: 0 8px;
             border: 1px solid #D9D9D9;
-            border-radius: 4px;
+            border-radius: 2px;
-            font-size: 14px;
+            font-size: 13px;
             outline: none;
             transition: all 0.3s;
 
@@ -914,17 +964,18 @@
             }
 
             &::placeholder {
-              color: #BFBFBF;
+              color: #666;
             }
           }
 
           .unitSelect {
-            width: 200px;
+            color: #666;
-            height: 32px;
+            width: 150px;
-            padding: 0 12px;
+            height: 31px;
+            padding: 0 6px;
             border: 1px solid #D9D9D9;
-            border-radius: 4px;
+            border-radius: 2px;
-            font-size: 14px;
+            font-size: 13px;
             outline: none;
             background-color: #FFFFFF;
             cursor: pointer;
@@ -942,12 +993,14 @@
       }
 
       .searchButton {
-        height: 32px;
+        height: 31px;
-        padding: 0 20px;
+        padding: 0 10px;
-        border-radius: 4px;
+        border-radius: 2px;
-        font-size: 14px;
+        font-size: 13px;
         background-color: #2E4CD4;
         border-color: #2E4CD4;
+        display: flex;
+        align-items: center;
 
         &:hover {
           background-color: #4A63E6;
@@ -956,12 +1009,14 @@
       }
 
       .uploadButton {
-        height: 32px;
+        height: 31px;
-        padding: 0 20px;
+        padding: 0 10px;
-        border-radius: 4px;
+        border-radius: 2px;
-        font-size: 14px;
+        font-size: 13px;
         background-color: #2E4CD4;
         border-color: #2E4CD4;
+        display: flex;
+        align-items: center;
 
         &:hover {
           background-color: #4A63E6;
@@ -971,6 +1026,23 @@
     }
 
     .tableContainer {
+
+      // 表头样式
+      :global {
+        .ant-table-thead>tr>th {
+          background-color: #F5F5FA !important;
+          text-align: center !important;
+          font-weight: 450;
+          font-size: 12px;
+        }
+
+        // 表格内容居中
+        .ant-table-tbody>tr>td {
+          text-align: center !important;
+          font-size: 12px;
+        }
+      }
+
       .statusInProgress {
         display: inline-block;
         background-color: #E6F0FF;
@@ -1003,11 +1075,12 @@
         gap: 12px;
         justify-content: center;
         align-items: center;
+        font-size: 12px;
 
         .actionLink {
           color: #2E4CD4;
           cursor: pointer;
-          font-size: 14px;
+          font-size: 12px;
           transition: opacity 0.2s;
 
           &:hover {