接警记录

src/pages/business_emergencyDrill/EmergencyDrill.js

@@ -315,8 +315,6 @@ const EmergencyDrill = () => {
     <div className={styles.containerDrill}>
       <div className={styles.block1}>
         <div className={styles.block1_item1}>
-
-
           <div className={styles.item1_row1}>
             <div className={styles.row1_left}>
               <div className={styles.colorBlock}></div>
@@ -390,7 +388,6 @@ const EmergencyDrill = () => {
           <div ref={chartRef} className={styles.chartContainer}></div>
         </div>
 
-
         <div className={styles.block1_item3}>
           <div className={styles.item3_header}>
             <div className={styles.colorBlock}></div>
@@ -546,7 +543,9 @@ const EmergencyDrill = () => {
 
         <div className={styles.searchBar}>
           <div className={styles.searchLeft}>
+            {/* 日期 */}
             <div className={styles.searchItem}>
+
               <span className={styles.searchLabel}>演练日期:</span>
               <div style={{ display: 'flex', alignItems: 'center', border: '1px  solid #DDDEE6', borderRadius: '2px' }}>
                 <div className={styles.datePickerWithIcon}>

src/pages/business_emergencyResource/components/secondary_menu/jjjl.js

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { Input, Button, Select, message, Modal } from 'antd';
+import { Input, Button, Select, message, Modal, DatePicker  } from 'antd';
 import { SearchOutlined, PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import StandardTable from '@/components/StandardTable';
 import styles from './jjjl.less';
 
-import iconsc from '@/assets/yjzygl/iconsc.svg';
+import iconDrill5 from '@/assets/business_Emergency/iconDrill5.svg';
 
 const { Option } = Select;
 
@@ -12,6 +12,7 @@ const Jjjl = () => {
     const [loading, setLoading] = useState(false);
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
     const [searchValue, setSearchValue] = useState(undefined);
+    const [dateRange, setDateRange] = useState([null, null]);
     const [pagination, setPagination] = useState({
         current: 1,
         pageSize: 10,
@@ -266,6 +267,46 @@ const Jjjl = () => {
 
             {/* 搜索和操作区域 */}
             <div className={styles.searchBar}>
+
+                <div className={styles.searchItem}>
+
+                    <span className={styles.searchLabel}>时间范围:</span>
+                    <div style={{ display: 'flex', alignItems: 'center', border: '1px  solid #DDDEE6', borderRadius: '2px' }}>
+                        <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[0] : null}
+                                onChange={(value) => {
+                                    setDateRange([value, dateRange ? dateRange[1] : null]);
+                                }}
+                                placeholder="请输入演练日期"
+                                className={styles.datePickerFirst}
+                                suffixIcon={null}
+                            />
+                        </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.searchLeft}>
                     <Select
                         placeholder="请选择消防点"

src/pages/business_emergencyResource/components/secondary_menu/jjjl.less

@@ -32,6 +32,124 @@
     margin-bottom: 10px;
     padding: 5px;
 
+    .searchItem {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .searchLabel {
+          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: none;
+          font-size: 13px;
+          outline: none;
+          transition: all 0.3s;
+
+          &:focus {
+            border-color: #2E4CD4;
+          }
+
+          &::placeholder {
+            color: #666;
+          }
+        }
+
+        .companyInput {
+          width: 150px;
+          height: 31px;
+          padding: 0 8px;
+          border: 1px solid #D9D9D9;
+          border-radius: 2px;
+          font-size: 13px;
+          outline: none;
+          transition: all 0.3s;
+
+          &:focus {
+            border-color: #2E4CD4;
+          }
+
+          &::placeholder {
+            color: #666;
+          }
+        }
+
+        .unitSelect {
+          color: #666;
+          width: 150px;
+          height: 31px;
+          padding: 0 6px;
+          border: 1px solid #D9D9D9;
+          border-radius: 2px;
+          font-size: 13px;
+          outline: none;
+          background-color: #FFFFFF;
+          cursor: pointer;
+          transition: all 0.3s;
+
+          &:focus {
+            border-color: #2E4CD4;
+          }
+
+          option {
+            padding: 8px;
+          }
+        }
+      }
     
     .searchLeft {
         display: flex;