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 = () => {