diff --git a/src/assets/business_Emergency/iconDrill5.svg b/src/assets/business_Emergency/iconDrill5.svg new file mode 100644 index 0000000..c35523b --- /dev/null +++ b/src/assets/business_Emergency/iconDrill5.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/business_Emergency/iconDrill6.svg b/src/assets/business_Emergency/iconDrill6.svg new file mode 100644 index 0000000..c4b0773 --- /dev/null +++ b/src/assets/business_Emergency/iconDrill6.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/business_Emergency/iconDrill7.svg b/src/assets/business_Emergency/iconDrill7.svg new file mode 100644 index 0000000..4e5f207 --- /dev/null +++ b/src/assets/business_Emergency/iconDrill7.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/pages/business_emergencyDrill/EmergencyDrill.js b/src/pages/business_emergencyDrill/EmergencyDrill.js index caaf8c2..b505056 100644 --- a/src/pages/business_emergencyDrill/EmergencyDrill.js +++ b/src/pages/business_emergencyDrill/EmergencyDrill.js @@ -1,6 +1,8 @@ import React, { useState, useEffect, useRef } from 'react'; -import { Button } from "antd"; -import { ClockCircleOutlined, EnvironmentOutlined, UserOutlined } from '@ant-design/icons'; +import { Button, DatePicker } from "antd"; +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,15 +11,17 @@ 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'); 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 [dateRange, setDateRange] = useState(null); 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); }; }, []); @@ -292,7 +316,7 @@ const EmergencyDrill = () => {
- +
@@ -313,7 +337,7 @@ const EmergencyDrill = () => { drill icon
- +
化工事故应急预案
@@ -334,7 +358,7 @@ const EmergencyDrill = () => {
- +
@@ -342,19 +366,19 @@ const EmergencyDrill = () => { 演练数据统计
- - -
- +
@@ -376,7 +400,7 @@ const EmergencyDrill = () => {
- +
@@ -483,13 +507,13 @@ const EmergencyDrill = () => {
- +
现场视频
- +
{[1, 2, 3].map((item, index) => (
@@ -512,7 +536,7 @@ const EmergencyDrill = () => {
- +
{/* 第三块内容区域 */}
@@ -523,26 +547,45 @@ const EmergencyDrill = () => {
- 演练日期 - setStartDate(e.target.value)} - placeholder="请输入演练日期" - /> - ~ - setEndDate(e.target.value)} - placeholder="请输入演练日期" - /> + 演练日期: +
+
+ 日期icon + { + setDateRange([value, dateRange ? dateRange[1] : null]); + }} + placeholder="请输入演练日期" + className={styles.datePickerFirst} + suffixIcon={null} + /> +
+ {/* 短线 */} +
+ +
+ 日期icon + { + setDateRange([dateRange ? dateRange[0] : null, value]); + }} + placeholder="请输入演练日期" + className={styles.datePickerFirst} + suffixIcon={null} + /> +
+
+
- setCompanyName(e.target.value)} @@ -550,7 +593,7 @@ const EmergencyDrill = () => { />
-
-
- @@ -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 = () => {
查看 下载 - 删除 + 删除
), }, diff --git a/src/pages/business_emergencyDrill/EmergencyDrill.less b/src/pages/business_emergencyDrill/EmergencyDrill.less index 9194ab7..4d2d703 100644 --- a/src/pages/business_emergencyDrill/EmergencyDrill.less +++ b/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-radius: 4px; - font-size: 14px; + border: none; + font-size: 13px; outline: none; transition: all 0.3s; @@ -890,22 +945,17 @@ } &::placeholder { - color: #BFBFBF; + color: #666; } } - .dateSeparator { - color: #999999; - margin: 0 4px; - } - .companyInput { - width: 200px; - height: 32px; - padding: 0 12px; + width: 150px; + height: 31px; + padding: 0 8px; border: 1px solid #D9D9D9; - border-radius: 4px; - font-size: 14px; + border-radius: 2px; + font-size: 13px; outline: none; transition: all 0.3s; @@ -914,17 +964,18 @@ } &::placeholder { - color: #BFBFBF; + color: #666; } } .unitSelect { - width: 200px; - height: 32px; - padding: 0 12px; + color: #666; + width: 150px; + height: 31px; + padding: 0 6px; border: 1px solid #D9D9D9; - border-radius: 4px; - font-size: 14px; + border-radius: 2px; + font-size: 13px; outline: none; background-color: #FFFFFF; cursor: pointer; @@ -942,12 +993,14 @@ } .searchButton { - height: 32px; - padding: 0 20px; - border-radius: 4px; - font-size: 14px; + height: 31px; + padding: 0 10px; + border-radius: 2px; + 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; - padding: 0 20px; - border-radius: 4px; - font-size: 14px; + height: 31px; + padding: 0 10px; + border-radius: 2px; + 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 {