diff --git a/src/views/Home/components/Business/SiGuan/components/Maintenance/index.js b/src/views/Home/components/Business/SiGuan/components/Maintenance/index.js index aea2881..5bbf171 100644 --- a/src/views/Home/components/Business/SiGuan/components/Maintenance/index.js +++ b/src/views/Home/components/Business/SiGuan/components/Maintenance/index.js @@ -164,13 +164,16 @@ const Maintenance = ({ year }) => { chartInstance.current.setOption(option); - const handleResize = () => { - chartInstance.current?.resize(); - }; - window.addEventListener('resize', handleResize); + const resizeObserver = new ResizeObserver(() => { + chartInstance.current && chartInstance.current.resize(); + }); + + if (chartRef.current) { + resizeObserver.observe(chartRef.current); + } return () => { - window.removeEventListener('resize', handleResize); + resizeObserver.disconnect(); }; }, [activeIndex, selectedPieItem, startAngle, chartData]); diff --git a/src/views/Home/components/Business/SiGuan/components/ReservoirDemarcation/index.js b/src/views/Home/components/Business/SiGuan/components/ReservoirDemarcation/index.js index ec9ab14..c483cd0 100644 --- a/src/views/Home/components/Business/SiGuan/components/ReservoirDemarcation/index.js +++ b/src/views/Home/components/Business/SiGuan/components/ReservoirDemarcation/index.js @@ -1,4 +1,5 @@ import React, { useEffect, useRef,useState } from 'react'; +import { useSelector } from 'react-redux'; import * as echarts from 'echarts'; import arrowIcon from '@/assets/images/card/arrow.png'; import glfwBg from '@/assets/images/business/glfw.png'; @@ -9,6 +10,7 @@ import { httpget } from '@/utils/request'; import './index.less'; const ReservoirDemarcation = () => { + const isFullScreen = useSelector(s => s.runtime.isFullScreen); const chartRef = useRef(null); const chartInstance = useRef(null); const [info, setInfo] = useState({ @@ -49,8 +51,8 @@ const ReservoirDemarcation = () => { min: 0, max: maxVal, splitNumber: 40, - radius: '125%', - center: ['50%', '65%'], + radius: isFullScreen ? '90%' : '125%', + center: isFullScreen ? ['50%', '55%'] : ['50%', '65%'], axisLine: { show: true, lineStyle: { @@ -106,16 +108,18 @@ const ReservoirDemarcation = () => { chartInstance.current.setOption(option); - const handleResize = () => { + const resizeObserver = new ResizeObserver(() => { chartInstance.current && chartInstance.current.resize(); - }; + }); - window.addEventListener('resize', handleResize); + if (chartRef.current) { + resizeObserver.observe(chartRef.current); + } return () => { - window.removeEventListener('resize', handleResize); + resizeObserver.disconnect(); }; - }, [info]); + }, [info, isFullScreen]); // Clean up chart instance on unmount useEffect(() => { diff --git a/src/views/Home/components/Business/SiGuan/components/SafetyAppraisal/index.less b/src/views/Home/components/Business/SiGuan/components/SafetyAppraisal/index.less index cb6c65d..949b463 100644 --- a/src/views/Home/components/Business/SiGuan/components/SafetyAppraisal/index.less +++ b/src/views/Home/components/Business/SiGuan/components/SafetyAppraisal/index.less @@ -39,7 +39,7 @@ } .location-text { - font-size: 14px; + font-size: 16px; line-height: 1.4; } } diff --git a/src/views/Home/components/Business/SiGuan/components/SafetyHazard/index.js b/src/views/Home/components/Business/SiGuan/components/SafetyHazard/index.js index 4f930de..ddaec87 100644 --- a/src/views/Home/components/Business/SiGuan/components/SafetyHazard/index.js +++ b/src/views/Home/components/Business/SiGuan/components/SafetyHazard/index.js @@ -98,14 +98,16 @@ const SafetyHazard = ({ year }) => { chartInstance.current.setOption(option); - const handleResize = () => { + const resizeObserver = new ResizeObserver(() => { chartInstance.current && chartInstance.current.resize(); - }; - - window.addEventListener('resize', handleResize); + }); + + if (chartRef.current) { + resizeObserver.observe(chartRef.current); + } return () => { - window.removeEventListener('resize', handleResize); + resizeObserver.disconnect(); }; }, [info]); diff --git a/src/views/Home/components/Business/SiGuan/components/TermiteControl/index.less b/src/views/Home/components/Business/SiGuan/components/TermiteControl/index.less index b68ac4f..c250a73 100644 --- a/src/views/Home/components/Business/SiGuan/components/TermiteControl/index.less +++ b/src/views/Home/components/Business/SiGuan/components/TermiteControl/index.less @@ -87,7 +87,7 @@ .label { font-size: 14px; - color: rgba(255, 255, 255, 0.8); + color: rgba(255, 255, 255); } } } diff --git a/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js b/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js index 1b88ed4..09e8034 100644 --- a/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js +++ b/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import { useSelector } from 'react-redux'; import { Table } from 'antd'; import CommonModal from '@/views/Home/components/UI/CommonModal'; import arrowIcon from '@/assets/images/card/arrow.png'; @@ -13,6 +14,7 @@ import VideoList from '../ModalComponents/VideoList' import UAVModal from '../ModalComponents/UAVModal'; const AllWeatherControl = () => { + const isFullScreen = useSelector(s => s.runtime.isFullScreen); const [reservoirItem, setReservoirItem] = useState({}) const [rainList, setRainList] = useState([]) const [detailVisible, setDetailVisible] = useState(false) @@ -102,7 +104,7 @@ const AllWeatherControl = () => { } return ( -