Compare commits
2 Commits
4deb965975
...
194b0dbff1
| Author | SHA1 | Date |
|---|---|---|
|
|
194b0dbff1 | |
|
|
4f64335773 |
|
|
@ -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]);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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(() => {
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.location-text {
|
.location-text {
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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]);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -87,7 +87,7 @@
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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";
|
||||||
|
|
|
||||||
|
|
@ -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: '万元' },
|
||||||
|
|
@ -82,7 +69,7 @@ const SoundMechanism = () => {
|
||||||
if (result.code == 200) {
|
if (result.code == 200) {
|
||||||
const files = result.data?.files || [];
|
const files = result.data?.files || [];
|
||||||
if (files.length > 0) {
|
if (files.length > 0) {
|
||||||
setGalleryData(files.map(item=>({name:item.fileName,url:config.minioIp +item.filePath})))
|
setGalleryData(files.map(item => ({ name: item.fileName, url: config.minioIp + item.filePath })))
|
||||||
setModalTitle('管理用房');
|
setModalTitle('管理用房');
|
||||||
setModalVisible(true);
|
setModalVisible(true);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue