feat():四管工作模块开发

lsf-dev
李神峰 2026-02-08 10:37:07 +08:00
parent a793096e4c
commit 4f64335773
11 changed files with 44 additions and 40 deletions

View File

@ -164,13 +164,16 @@ const Maintenance = ({ year }) => {
chartInstance.current.setOption(option); chartInstance.current.setOption(option);
const handleResize = () => { const resizeObserver = new ResizeObserver(() => {
chartInstance.current?.resize(); chartInstance.current && chartInstance.current.resize();
}; });
window.addEventListener('resize', handleResize);
if (chartRef.current) {
resizeObserver.observe(chartRef.current);
}
return () => { return () => {
window.removeEventListener('resize', handleResize); resizeObserver.disconnect();
}; };
}, [activeIndex, selectedPieItem, startAngle, chartData]); }, [activeIndex, selectedPieItem, startAngle, chartData]);

View File

@ -1,4 +1,5 @@
import React, { useEffect, useRef,useState } from 'react'; import React, { useEffect, useRef,useState } from 'react';
import { useSelector } from 'react-redux';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import arrowIcon from '@/assets/images/card/arrow.png'; import arrowIcon from '@/assets/images/card/arrow.png';
import glfwBg from '@/assets/images/business/glfw.png'; import glfwBg from '@/assets/images/business/glfw.png';
@ -9,6 +10,7 @@ import { httpget } from '@/utils/request';
import './index.less'; import './index.less';
const ReservoirDemarcation = () => { const ReservoirDemarcation = () => {
const isFullScreen = useSelector(s => s.runtime.isFullScreen);
const chartRef = useRef(null); const chartRef = useRef(null);
const chartInstance = useRef(null); const chartInstance = useRef(null);
const [info, setInfo] = useState({ const [info, setInfo] = useState({
@ -49,8 +51,8 @@ const ReservoirDemarcation = () => {
min: 0, min: 0,
max: maxVal, max: maxVal,
splitNumber: 40, splitNumber: 40,
radius: '125%', radius: isFullScreen ? '90%' : '125%',
center: ['50%', '65%'], center: isFullScreen ? ['50%', '55%'] : ['50%', '65%'],
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -106,16 +108,18 @@ const ReservoirDemarcation = () => {
chartInstance.current.setOption(option); chartInstance.current.setOption(option);
const handleResize = () => { const resizeObserver = new ResizeObserver(() => {
chartInstance.current && chartInstance.current.resize(); chartInstance.current && chartInstance.current.resize();
}; });
window.addEventListener('resize', handleResize); if (chartRef.current) {
resizeObserver.observe(chartRef.current);
}
return () => { return () => {
window.removeEventListener('resize', handleResize); resizeObserver.disconnect();
}; };
}, [info]); }, [info, isFullScreen]);
// Clean up chart instance on unmount // Clean up chart instance on unmount
useEffect(() => { useEffect(() => {

View File

@ -39,7 +39,7 @@
} }
.location-text { .location-text {
font-size: 14px; font-size: 16px;
line-height: 1.4; line-height: 1.4;
} }
} }

View File

@ -98,14 +98,16 @@ const SafetyHazard = ({ year }) => {
chartInstance.current.setOption(option); chartInstance.current.setOption(option);
const handleResize = () => { const resizeObserver = new ResizeObserver(() => {
chartInstance.current && chartInstance.current.resize(); chartInstance.current && chartInstance.current.resize();
}; });
window.addEventListener('resize', handleResize); if (chartRef.current) {
resizeObserver.observe(chartRef.current);
}
return () => { return () => {
window.removeEventListener('resize', handleResize); resizeObserver.disconnect();
}; };
}, [info]); }, [info]);

View File

@ -87,7 +87,7 @@
.label { .label {
font-size: 14px; font-size: 14px;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255);
} }
} }
} }

View File

@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { Table } from 'antd'; import { Table } from 'antd';
import CommonModal from '@/views/Home/components/UI/CommonModal'; import CommonModal from '@/views/Home/components/UI/CommonModal';
import arrowIcon from '@/assets/images/card/arrow.png'; import arrowIcon from '@/assets/images/card/arrow.png';
@ -13,6 +14,7 @@ import VideoList from '../ModalComponents/VideoList'
import UAVModal from '../ModalComponents/UAVModal'; import UAVModal from '../ModalComponents/UAVModal';
const AllWeatherControl = () => { const AllWeatherControl = () => {
const isFullScreen = useSelector(s => s.runtime.isFullScreen);
const [reservoirItem, setReservoirItem] = useState({}) const [reservoirItem, setReservoirItem] = useState({})
const [rainList, setRainList] = useState([]) const [rainList, setRainList] = useState([])
const [detailVisible, setDetailVisible] = useState(false) const [detailVisible, setDetailVisible] = useState(false)
@ -102,7 +104,7 @@ const AllWeatherControl = () => {
} }
return ( return (
<div className="all-weather-control"> <div className={`all-weather-control ${isFullScreen ? 'full-screen' : ''}`}>
{/* 雨情 Section */} {/* 雨情 Section */}
<div className="section rain-section"> <div className="section rain-section">
<div className="section-header"> <div className="section-header">

View File

@ -1,4 +1,5 @@
import React,{useState,useEffect} from 'react'; import React,{useState,useEffect} from 'react';
import { useSelector } from 'react-redux';
import smallCard from '@/assets/images/card/smallCard.png'; import smallCard from '@/assets/images/card/smallCard.png';
import apiurl from '@/service/apiurl'; import apiurl from '@/service/apiurl';
import { httpget } from '@/utils/request'; import { httpget } from '@/utils/request';
@ -6,6 +7,7 @@ import PdfView from '@/views/Home/components/UI/PdfView';
import './index.less'; import './index.less';
const ManagementCycle = () => { const ManagementCycle = () => {
const isFullScreen = useSelector(s => s.runtime.isFullScreen);
const [info, setInfo] = useState({}) const [info, setInfo] = useState({})
const [pdfVisible, setPdfVisible] = useState(false); const [pdfVisible, setPdfVisible] = useState(false);
const [pdfConfig, setPdfConfig] = useState({ title: '', url: '', fileId: '' }); const [pdfConfig, setPdfConfig] = useState({ title: '', url: '', fileId: '' });
@ -63,7 +65,7 @@ const ManagementCycle = () => {
}, []) }, [])
return ( return (
<div className="management-cycle"> <div className={`management-cycle ${isFullScreen ? 'full-screen' : ''}`}>
<div className="card-grid"> <div className="card-grid">
{data.map((item, index) => ( {data.map((item, index) => (
<div <div

View File

@ -1,10 +1,12 @@
import React,{useMemo} from 'react'; import React,{useMemo} from 'react';
import { useSelector } from 'react-redux';
import arrowIcon from '@/assets/images/card/arrow.png'; import arrowIcon from '@/assets/images/card/arrow.png';
import qysIcon from '@/assets/images/business/qys.png'; import qysIcon from '@/assets/images/business/qys.png';
import textBg from '@/assets/images/card/textbg.png'; import textBg from '@/assets/images/card/textbg.png';
import './index.less'; import './index.less';
const MonitoringElements = ({ data }) => { const MonitoringElements = ({ data }) => {
const isFullScreen = useSelector(s => s.runtime.isFullScreen);
const reservoirInfo = [ const reservoirInfo = [
{ label: '总库容万m³', value: '', highlight: false,type:1 }, { label: '总库容万m³', value: '', highlight: false,type:1 },
{ label: '承雨面积km²', value: '', highlight: true,type:2 }, { label: '承雨面积km²', value: '', highlight: true,type:2 },
@ -42,7 +44,7 @@ const MonitoringElements = ({ data }) => {
return ( return (
<div className="monitoring-elements"> <div className={`monitoring-elements ${isFullScreen ? 'full-screen' : ''}`}>
{/* Section 1: 水库信息 */} {/* Section 1: 水库信息 */}
<div className="section"> <div className="section">
<div className="section-title"> <div className="section-title">

View File

@ -1,4 +1,5 @@
import React,{useState,useEffect, useMemo} from 'react'; import React,{useState,useEffect, useMemo} from 'react';
import { useSelector } from 'react-redux';
import { UserOutlined } from '@ant-design/icons'; import { UserOutlined } from '@ant-design/icons';
import arrowIcon from '@/assets/images/card/arrow.png'; import arrowIcon from '@/assets/images/card/arrow.png';
import textBg from '@/assets/images/card/textbg.png'; import textBg from '@/assets/images/card/textbg.png';
@ -6,6 +7,7 @@ import moment from 'moment';
import './index.less'; import './index.less';
const SupervisionCoverage = ({ data }) => { const SupervisionCoverage = ({ data }) => {
const isFullScreen = useSelector(s => s.runtime.isFullScreen);
const responsibles = [ const responsibles = [
{ label: '地方政府责任人:', value: '-', type: 'gov' }, { label: '地方政府责任人:', value: '-', type: 'gov' },
{ label: '主管部门责任人:', value: '-', type: 'dept' }, { label: '主管部门责任人:', value: '-', type: 'dept' },
@ -43,7 +45,7 @@ const SupervisionCoverage = ({ data }) => {
}, [data]); }, [data]);
return ( return (
<div className="supervision-coverage"> <div className={`supervision-coverage ${isFullScreen ? 'full-screen' : ''}`}>
{/* Section 1: 责任人信息 */} {/* Section 1: 责任人信息 */}
<div className="section"> <div className="section">
<div className="section-title"> <div className="section-title">

View File

@ -1,6 +1,6 @@
.siquan-view { .siquan-view {
width: 100%; width: 100%;
height: 0; height: 100%;
position: relative; position: relative;
@import "../common.less"; @import "../common.less";

View File

@ -2,7 +2,6 @@ import React, { useState,useEffect } from 'react';
import moment from 'moment'; import moment from 'moment';
import arrowIcon from '@/assets/images/card/arrow.png'; import arrowIcon from '@/assets/images/card/arrow.png';
import smallCard from '@/assets/images/card/smallCard.png'; import smallCard from '@/assets/images/card/smallCard.png';
import homeImg from '@/assets/images/home.png'; // Placeholder for gallery
import jingfeiIcon from '@/assets/images/card/jingfei.png'; import jingfeiIcon from '@/assets/images/card/jingfei.png';
import lightBg from '@/assets/images/card/light.png'; import lightBg from '@/assets/images/card/light.png';
import GalleryModal from './GalleryModal'; import GalleryModal from './GalleryModal';
@ -10,7 +9,7 @@ import MaterialModal from './MaterialModal';
import YearSelect from '@/views/Home/components/UI/YearSelect'; import YearSelect from '@/views/Home/components/UI/YearSelect';
import apiurl from '@/service/apiurl'; import apiurl from '@/service/apiurl';
import { httpget } from '@/utils/request'; import { httpget } from '@/utils/request';
import { config } from '@/config'; import { config } from '@/config/index';
import './index.less'; import './index.less';
const SoundMechanism = () => { const SoundMechanism = () => {
@ -19,19 +18,9 @@ const SoundMechanism = () => {
const [materialVisible, setMaterialVisible] = useState(false); const [materialVisible, setMaterialVisible] = useState(false);
const [modalTitle, setModalTitle] = useState(''); const [modalTitle, setModalTitle] = useState('');
const [galleryData, setGalleryData] = useState([]); const [galleryData, setGalleryData] = useState([]);
const [manageInfo, setManageInfo] = useState({}) //管理设施 const [manageInfo, setManageInfo] = useState({}) //管理设施
const [budgetInfo, setBudgetInfo] = useState({}) //经费 const [budgetInfo, setBudgetInfo] = useState({}) //经费
// Mock data for gallery
const houseImages = [
{ name: '管理用房.jpg', url: homeImg },
{ name: '监控室.jpg', url: homeImg },
{ name: '水库全景.jpg', url: homeImg },
{ name: '会议室.jpg', url: homeImg },
{ name: '值班室.jpg', url: homeImg },
{ name: '物资仓库.jpg', url: homeImg },
];
@ -56,8 +45,6 @@ const SoundMechanism = () => {
setModalVisible(true); setModalVisible(true);
} }
}; };
// Funding Data (Mocked as per UI)
const fundingData = [ const fundingData = [
{ label: '年度收入预算', value: budgetInfo?.annualExpenditureBudget ?? '-', unit: '万元' }, { label: '年度收入预算', value: budgetInfo?.annualExpenditureBudget ?? '-', unit: '万元' },
{ label: '年度支出预算', value: budgetInfo?.annualIncomeBudget ?? '-', unit: '万元' }, { label: '年度支出预算', value: budgetInfo?.annualIncomeBudget ?? '-', unit: '万元' },