diff --git a/src/pages/business_emergencyDrill/EmergencyDrill.js b/src/pages/business_emergencyDrill/EmergencyDrill.js index 0db4578..caaf8c2 100644 --- a/src/pages/business_emergencyDrill/EmergencyDrill.js +++ b/src/pages/business_emergencyDrill/EmergencyDrill.js @@ -4,6 +4,7 @@ import { ClockCircleOutlined, EnvironmentOutlined, UserOutlined } from '@ant-des import * as echarts from 'echarts'; import styles from './EmergencyDrill.less'; import { Import } from '../business_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection'; +import StandardTable from '@/components/StandardTable'; import iconDrill1 from '../../assets/business_Emergency/iconDrill1.svg'; import iconDrill2 from '../../assets/business_Emergency/iconDrill2.jpg'; import iconDrill3 from '../../assets/business_Emergency/iconDrill3.svg'; @@ -13,6 +14,20 @@ const EmergencyDrill = () => { const [timeType, setTimeType] = useState('month'); const chartRef = useRef(null); const chartInstanceRef = useRef(null); + + // 第三块状态 + const [startDate, setStartDate] = useState('2024-08-23 00:00'); + const [endDate, setEndDate] = useState('2024-08-23 00:00'); + const [companyName, setCompanyName] = useState(''); + const [unitName, setUnitName] = useState(''); + const [pagination, setPagination] = useState({ + current: 1, + pageSize: 10, + total: 48, + showSizeChanger: true, + showQuickJumper: true, + showTotal: (total) => `共 ${total} 条`, + }); const chartRef2 = useRef(null); const chartInstanceRef2 = useRef(null); @@ -500,6 +515,184 @@ const EmergencyDrill = () => {
{/* 第三块内容区域 */} +
+
+
应急演练
+
+ +
+
+
+ 演练日期 + setStartDate(e.target.value)} + placeholder="请输入演练日期" + /> + ~ + setEndDate(e.target.value)} + placeholder="请输入演练日期" + /> +
+
+ setCompanyName(e.target.value)} + placeholder="请输入演练企业" + /> +
+
+ +
+ +
+ +
+ +
+ { + let className = styles.statusInProgress; + if (status === '已安排') className = styles.statusScheduled; + if (status === '已完成') className = styles.statusCompleted; + return {status}; + }, + }, + { + title: '存在问题或改进措施', + dataIndex: 'improvements', + key: 'improvements', + ellipsis: true, + }, + { + title: '操作', + key: 'action', + width: 150, + align: 'center', + render: () => ( +
+ 查看 + 下载 + 删除 +
+ ), + }, + ]} + onChange={(newPagination) => setPagination(newPagination)} + /> +
); diff --git a/src/pages/business_emergencyDrill/EmergencyDrill.less b/src/pages/business_emergencyDrill/EmergencyDrill.less index 1aea53d..9194ab7 100644 --- a/src/pages/business_emergencyDrill/EmergencyDrill.less +++ b/src/pages/business_emergencyDrill/EmergencyDrill.less @@ -829,6 +829,192 @@ .block3 { width: 100%; flex: 1; - background-color: pink; + background-color: #FFFFFF; + padding: 20px; + + .block3Header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 16px; + + .headerLine { + width: 2px; + height: 16px; + background-color: #2E4CD4; + } + + .headerTitle { + font-size: 14px; + font-weight: 500; + color: #333333; + } + } + + .searchBar { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; + gap: 12px; + + .searchLeft { + display: flex; + gap: 12px; + flex-wrap: wrap; + flex: 1; + + .searchItem { + display: flex; + align-items: center; + gap: 8px; + + .searchLabel { + font-size: 14px; + color: #333333; + white-space: nowrap; + } + + .dateInput { + width: 150px; + height: 32px; + padding: 0 12px; + border: 1px solid #D9D9D9; + border-radius: 4px; + font-size: 14px; + outline: none; + transition: all 0.3s; + + &:focus { + border-color: #2E4CD4; + } + + &::placeholder { + color: #BFBFBF; + } + } + + .dateSeparator { + color: #999999; + margin: 0 4px; + } + + .companyInput { + width: 200px; + height: 32px; + padding: 0 12px; + border: 1px solid #D9D9D9; + border-radius: 4px; + font-size: 14px; + outline: none; + transition: all 0.3s; + + &:focus { + border-color: #2E4CD4; + } + + &::placeholder { + color: #BFBFBF; + } + } + + .unitSelect { + width: 200px; + height: 32px; + padding: 0 12px; + border: 1px solid #D9D9D9; + border-radius: 4px; + font-size: 14px; + outline: none; + background-color: #FFFFFF; + cursor: pointer; + transition: all 0.3s; + + &:focus { + border-color: #2E4CD4; + } + + option { + padding: 8px; + } + } + } + } + + .searchButton { + height: 32px; + padding: 0 20px; + border-radius: 4px; + font-size: 14px; + background-color: #2E4CD4; + border-color: #2E4CD4; + + &:hover { + background-color: #4A63E6; + border-color: #4A63E6; + } + } + + .uploadButton { + height: 32px; + padding: 0 20px; + border-radius: 4px; + font-size: 14px; + background-color: #2E4CD4; + border-color: #2E4CD4; + + &:hover { + background-color: #4A63E6; + border-color: #4A63E6; + } + } + } + + .tableContainer { + .statusInProgress { + display: inline-block; + background-color: #E6F0FF; + color: #2E4CD4; + padding: 2px 8px; + border-radius: 4px; + font-size: 12px; + } + + .statusScheduled { + display: inline-block; + background-color: #FFF7E6; + color: #FF8C00; + padding: 2px 8px; + border-radius: 4px; + font-size: 12px; + } + + .statusCompleted { + display: inline-block; + background-color: #E6F7ED; + color: #52C41A; + padding: 2px 8px; + border-radius: 4px; + font-size: 12px; + } + + .actionButtons { + display: flex; + gap: 12px; + justify-content: center; + align-items: center; + + .actionLink { + color: #2E4CD4; + cursor: pointer; + font-size: 14px; + transition: opacity 0.2s; + + &:hover { + opacity: 0.7; + } + } + } + } } } \ No newline at end of file