19 changed files with 109 additions and 279 deletions
--- a/src/views/Home/components/Business/SiGuan/components/Maintenance/index.js
+++ b/src/views/Home/components/Business/SiGuan/components/Maintenance/index.js
@ -164,16 +164,13 @@ const Maintenance = ({ year }) => {

    chartInstance.current.setOption(option);

-    const resizeObserver = new ResizeObserver(() => {
-      chartInstance.current && chartInstance.current.resize();
-    });
-
-    if (chartRef.current) {
-      resizeObserver.observe(chartRef.current);
-    }
+    const handleResize = () => {
+      chartInstance.current?.resize();
+    };
+    window.addEventListener('resize', handleResize);

    return () => {
-      resizeObserver.disconnect();
+      window.removeEventListener('resize', handleResize);
    };
  }, [activeIndex, selectedPieItem, startAngle, chartData]);

--- a/src/views/Home/components/Business/SiGuan/components/ReservoirDemarcation/index.js
+++ b/src/views/Home/components/Business/SiGuan/components/ReservoirDemarcation/index.js
@ -1,5 +1,4 @@
 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';
@ -10,7 +9,6 @@ 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({
@ -51,8 +49,8 @@ const ReservoirDemarcation = () => {
          min: 0,
          max: maxVal,
          splitNumber: 40,
-          radius: isFullScreen ? '90%' : '125%',
-          center: isFullScreen ? ['50%', '55%'] : ['50%', '65%'],
+          radius: '125%',
+          center: ['50%', '65%'],
          axisLine: {
            show: true,
            lineStyle: {
@ -108,18 +106,16 @@ const ReservoirDemarcation = () => {

    chartInstance.current.setOption(option);

-    const resizeObserver = new ResizeObserver(() => {
+    const handleResize = () => {
      chartInstance.current && chartInstance.current.resize();
-    });
+    };

-    if (chartRef.current) {
-      resizeObserver.observe(chartRef.current);
-    }
+    window.addEventListener('resize', handleResize);

    return () => {
-      resizeObserver.disconnect();
+      window.removeEventListener('resize', handleResize);
    };
-  }, [info, isFullScreen]);
+  }, [info]);

  // Clean up chart instance on unmount
  useEffect(() => {
--- 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: 16px;
+          font-size: 14px;
          line-height: 1.4;
        }
      }
--- a/src/views/Home/components/Business/SiGuan/components/SafetyHazard/index.js
+++ b/src/views/Home/components/Business/SiGuan/components/SafetyHazard/index.js
@ -98,16 +98,14 @@ const SafetyHazard = ({ year }) => {

    chartInstance.current.setOption(option);

-    const resizeObserver = new ResizeObserver(() => {
+    const handleResize = () => {
      chartInstance.current && chartInstance.current.resize();
-    });
-    
-    if (chartRef.current) {
-      resizeObserver.observe(chartRef.current);
-    }
+    };
+
+    window.addEventListener('resize', handleResize);

    return () => {
-      resizeObserver.disconnect();
+      window.removeEventListener('resize', handleResize);
    };
  }, [info]);

--- 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);
+        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
--- a/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js
+++ b/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js
@ -1,5 +1,4 @@
 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';
@ -14,7 +13,6 @@ 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)
@ -104,7 +102,7 @@ const AllWeatherControl = () => {
  }

  return (
-    <div className={`all-weather-control ${isFullScreen ? 'full-screen' : ''}`}>
+    <div className="all-weather-control">
      {/* 雨情 Section */}
      <div className="section rain-section">
        <div className="section-header">
--- a/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.js
+++ b/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.js
@ -1,5 +1,4 @@
 import React,{useState,useEffect} from 'react';
-import { useSelector } from 'react-redux';
 import smallCard from '@/assets/images/card/smallCard.png';
 import apiurl from '@/service/apiurl';
 import { httpget } from '@/utils/request';
@ -7,7 +6,6 @@ import PdfView from '@/views/Home/components/UI/PdfView';
 import './index.less';

 const ManagementCycle = () => {
-  const isFullScreen = useSelector(s => s.runtime.isFullScreen);
  const [info, setInfo] = useState({})
  const [pdfVisible, setPdfVisible] = useState(false);
  const [pdfConfig, setPdfConfig] = useState({ title: '', url: '', fileId: '' });
@ -65,7 +63,7 @@ const ManagementCycle = () => {
  }, [])
  
  return (
-    <div className={`management-cycle ${isFullScreen ? 'full-screen' : ''}`}>
+    <div className="management-cycle">
      <div className="card-grid">
        {data.map((item, index) => (
          <div 
--- a/src/views/Home/components/Business/SiQuan/components/MonitoringElements/index.js
+++ b/src/views/Home/components/Business/SiQuan/components/MonitoringElements/index.js
@ -1,12 +1,10 @@
 import React,{useMemo} from 'react';
-import { useSelector } from 'react-redux';
 import arrowIcon from '@/assets/images/card/arrow.png';
 import qysIcon from '@/assets/images/business/qys.png'; 
 import textBg from '@/assets/images/card/textbg.png';
 import './index.less';

 const MonitoringElements = ({ data }) => {
-  const isFullScreen = useSelector(s => s.runtime.isFullScreen);
  const reservoirInfo = [
    { label: '总库容（万m³）：', value: '', highlight: false,type:1 },
    { label: '承雨面积（km²）：', value: '', highlight: true,type:2 },
@ -44,7 +42,7 @@ const MonitoringElements = ({ data }) => {


  return (
-    <div className={`monitoring-elements ${isFullScreen ? 'full-screen' : ''}`}>
+    <div className="monitoring-elements">
      {/* Section 1: 水库信息 */}
      <div className="section">
        <div className="section-title">
--- a/src/views/Home/components/Business/SiQuan/components/SupervisionCoverage/index.js
+++ b/src/views/Home/components/Business/SiQuan/components/SupervisionCoverage/index.js
@ -1,5 +1,4 @@
 import React,{useState,useEffect, useMemo} from 'react';
-import { useSelector } from 'react-redux';
 import { UserOutlined } from '@ant-design/icons';
 import arrowIcon from '@/assets/images/card/arrow.png';
 import textBg from '@/assets/images/card/textbg.png';
@ -7,7 +6,6 @@ import moment from 'moment';
 import './index.less';

 const SupervisionCoverage = ({ data }) => {
-  const isFullScreen = useSelector(s => s.runtime.isFullScreen);
  const responsibles = [
    { label: '地方政府责任人：', value: '-', type: 'gov' },
    { label: '主管部门责任人：', value: '-', type: 'dept' },
@ -45,7 +43,7 @@ const SupervisionCoverage = ({ data }) => {
  }, [data]);
  
  return (
-    <div className={`supervision-coverage ${isFullScreen ? 'full-screen' : ''}`}>
+    <div className="supervision-coverage">
      {/* Section 1: 责任人信息 */}
      <div className="section">
        <div className="section-title">
--- a/src/views/Home/components/Business/SiQuan/index.less
+++ b/src/views/Home/components/Business/SiQuan/index.less
@ -1,6 +1,6 @@
 .siquan-view {
  width: 100%;
-  height: 100%;
+  height: 0;
  position: relative;
  
  @import "../common.less";
--- a/src/views/Home/components/Business/SiYu/components/FloodPreview/index.js
+++ b/src/views/Home/components/Business/SiYu/components/FloodPreview/index.js
@ -83,25 +83,15 @@ const FloodPreview = ({setPlanData}) => {
                    options={options}
                    value={planId}
                    allowClear={false}
-                    onChange={(e)=>{
-                        setPlanId(e)
-                        setRadio(1)
-                        setPlanData(null)
-                    }}
+                    onChange={(e)=>setPlanId(e)}
                />
            </div>
-            <div className='flood-preview-section-radio' onClick={()=>{
-                    setRadio(2)
-                    setPlanData(null)
-                }}>
-                <Radio checked={radio===2}/>
+            <div className='flood-preview-section-radio'>
+                <Radio checked={radio===2} onClick={()=>setRadio(2)}/>
                24小时降雨400mm（50年一遇）
            </div>
-            <div className='flood-preview-section-radio' onClick={()=>{
-                    setRadio(3)
-                    setPlanData(null)
-                }}>
-                <Radio checked={radio===3}/>
+            <div className='flood-preview-section-radio'>
+                <Radio checked={radio===3} onClick={()=>setRadio(3)}/>
                24小时降雨500mm（100年一遇）
            </div>

--- a/src/views/Home/components/Business/SiYu/components/FloodPreview/index.less
+++ b/src/views/Home/components/Business/SiYu/components/FloodPreview/index.less
@ -1,11 +1,11 @@
 .flood-preview-section{
-    height: 100%;
+    background: red;
    overflow-x: hidden;
    overflow-y: auto;
    .section-title {
        display: flex;
        align-items: center;
-        margin-bottom: 5px;
+        margin-bottom: 10px;
        
        .arrow-icon {
          width: 20px;
@ -40,7 +40,7 @@

        .forecast-section-countBox {
            width: 33%;
-            height: 60px;
+            height: 65px;
            display: flex;
            align-items: center;
            justify-content: center;
@ -82,7 +82,7 @@
        align-items: center;
        justify-content: center;
        width: 100%;
-        margin-top: 5px;
+        margin-top: 20px;
        height: 50px;
    }
    .uav-button {
--- a/src/views/Home/components/Business/SiYu/components/ForecastSection/charts.js
+++ b/src/views/Home/components/Business/SiYu/components/ForecastSection/charts.js
@ -19,18 +19,18 @@ const Page = ({data=[]}) => {
          },
          grid: [
            {
-              top: '25%',
+              top: '20%',
              left: '12%',
              right: '10%',
              width: '80%',
-              height: '25%'
+              height: '32%'
            },
            {
-              bottom: '8%',
+              bottom: '5%',
              left: '12%',
              right: '10%',
              width: '80%',
-              height: '30%'
+              height: '32%'
            }
          ],
          legend: {
--- a/src/views/Home/components/Business/SiYu/components/ForecastSection/index.less
+++ b/src/views/Home/components/Business/SiYu/components/ForecastSection/index.less
@ -1,6 +1,5 @@
 .forecast-section{
    width: 100%;
-    height: 100%;
    .forecast-section-time{
        font-size: 14px;
        color: #ffffff;
@ -17,7 +16,7 @@

        .forecast-section-countBox {
            width: 25%;
-            height: 60px;
+            height: 65px;
            display: flex;
            align-items: center;
            justify-content: center;
@ -62,7 +61,7 @@

        .echarts-for-react {
            width:  100%;
-            height: 330px!important;    
+            height: 400px!important;    
        }
    }
 }
--- a/src/views/Home/components/Business/SiYu/index.less
+++ b/src/views/Home/components/Business/SiYu/index.less
@ -7,10 +7,7 @@

   .left {
    .card-1 { flex: 5; }
-    .card-2 { 
-      flex: 4;
-      min-height: 0;
-    }
+    .card-2 { flex: 3; }
  }

  .right {
--- a/src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/components/TrainingModal.js
+++ b/src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/components/TrainingModal.js
@ -1,133 +0,0 @@
-import React, { useState } from 'react';
-import { Descriptions, Image } from 'antd';
-import { DownloadOutlined, EyeOutlined } from '@ant-design/icons';
-import CommonModal from '@/views/Home/components/UI/CommonModal';
-import PdfView from '@/views/Home/components/UI/PdfView';
-import { download } from '@/utils/tools';
-import './TrainingModal.less';
-
-const TrainingModal = ({ visible, onClose, data }) => {
-	const typeInfo = {
-		1:"水利",
-		2:"岗前培训",
-		3:"在岗培训",
-		4:"政治学习教育",
-		5:"其他",
-	}
-	const [pdfInfo, setPdfInfo] = useState({ visible: false, title: '', fileId: '' });
-	const [previewImage, setPreviewImage] = useState('');
-	const [previewVisible, setPreviewVisible] = useState(false);
-
-	if (!data) return null;
-
-	const commonLabelStyle = {
-		width: '150px',
-		textAlign: 'right',
-	};
-
-	const descriptionStyle = {
-		marginBottom: '20px',
-	};
-
-	const getDescriptionsProps = (title) => ({
-		title: <span style={{ color: '#1890ff', fontSize: '16px', fontWeight: 'bold', borderLeft: '4px solid #1890ff', paddingLeft: '10px' }}>{title}</span>,
-		column: 2,
-		bordered: true,
-		size: 'small',
-		className: 'engineering-descriptions',
-		labelStyle: commonLabelStyle,
-		style: descriptionStyle,
-	});
-
-	const handleFilePreview = (file) => {
-		const extension = file.fileName.split('.').pop().toLowerCase();
-		const downloadUrl = `/gunshiApp/ss/personnelPlan/file/download/${file.fileId}`;
-
-		if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(extension)) {
-			setPreviewImage(downloadUrl);
-			setPreviewVisible(true);
-		} else if (extension === 'pdf') {
-			setPdfInfo({
-				visible: true,
-				title: file.fileName,
-				fileId: file.fileId
-			});
-		} else {
-			download(downloadUrl);
-		}
-	};
-
-	const getTrainingType = (type) => {
-		const typeName = typeInfo[type]
-		return typeName;
-	};
-
-	return (
-		<CommonModal
-			visible={visible}
-			onClose={onClose}
-			title={data.content || "培训详情"}
-			width={1000}
-		>
-			<div className="training-modal-content" style={{ padding: '20px', height: '600px', overflowY: 'auto' }}>
-				<Descriptions {...getDescriptionsProps('基本信息')}>
-					<Descriptions.Item label="培训计划">{data.name || '-'}</Descriptions.Item>
-					<Descriptions.Item label="培训分类">{getTrainingType(data.type) || '-'}</Descriptions.Item>
-					<Descriptions.Item label="培训日期">{data.stm || '-'}</Descriptions.Item>
-					<Descriptions.Item label="标题名称">{data.name || '-'}</Descriptions.Item>
-					<Descriptions.Item label="培训时段">{data.stm && data.etm ? `${data.stm} 至 ${data.etm}` : '-'}</Descriptions.Item>
-					<Descriptions.Item label="培训时长(小时)">{data.num || '-'}</Descriptions.Item>
-					<Descriptions.Item label="培训地点">{data.addr || '-'}</Descriptions.Item>
-					<Descriptions.Item label="主办单位">{data.unit || '-'}</Descriptions.Item>
-					<Descriptions.Item label="培训内容" span={2}>{data.content || '-'}</Descriptions.Item>
-					<Descriptions.Item label="培训范围" span={2}>{data.scope || '-'}</Descriptions.Item>
-					<Descriptions.Item label="参训人员">{data.trainees || '-'}</Descriptions.Item>
-					<Descriptions.Item label="参训人数">{data.numPeople || '-'}</Descriptions.Item>
-					<Descriptions.Item label="填报人">{data.applicant || '-'}</Descriptions.Item>
-					<Descriptions.Item label="登记日期">{data.regDate || '-'}</Descriptions.Item>
-				</Descriptions>
-
-				<Descriptions {...getDescriptionsProps('其他信息')} column={1}>
-					<Descriptions.Item label="附件">
-						<div className="file-list" style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
-							{data.files && data.files.length > 0 ? data.files.map((file, index) => (
-								<div key={index} className="file-item" style={{ width: '240px', padding: '8px', borderRadius: '4px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-									<span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginRight: '5px', flex: 1 }} title={file.fileName}>{file.fileName}</span>
-									<div style={{ flexShrink: 0 }}>
-										<EyeOutlined onClick={() => handleFilePreview(file)} style={{ cursor: 'pointer', marginRight: '8px', color: '#1890ff', fontSize: '16px' }} title="预览" />
-										<DownloadOutlined onClick={() => download(`/gunshiApp/ss/personnelPlan/file/download/${file.fileId}`)} style={{ cursor: 'pointer', color: '#1890ff', fontSize: '16px' }} title="下载" />
-									</div>
-								</div>
-							)) : <span style={{ color: '#rgba(255,255,255,0.5)' }}>无附件</span>}
-						</div>
-					</Descriptions.Item>
-				</Descriptions>
-			</div>
-
-			{/* PDF Viewer */}
-			{pdfInfo.visible && (
-				<PdfView
-					visible={pdfInfo.visible}
-					onClose={() => setPdfInfo({ ...pdfInfo, visible: false })}
-					title={pdfInfo.title}
-					fileId={pdfInfo.fileId}
-					url="/gunshiApp/ss/personnelPlan/file/download/"
-				/>
-			)}
-			<div style={{ display: 'none' }}>
-				<Image
-					src={previewImage}
-					preview={{
-						visible: previewVisible,
-						src: previewImage,
-						onVisibleChange: (value) => {
-							setPreviewVisible(value);
-						},
-					}}
-				/>
-			</div>
-		</CommonModal>
-	);
-};
-
-export default TrainingModal;
--- a/src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/components/TrainingModal.less
+++ b/src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/components/TrainingModal.less
@ -1,59 +0,0 @@
-.training-modal-content {
-  .engineering-descriptions {
-    table {
-      table-layout: fixed !important;
-    }
-    
-    .ant-descriptions-view {
-      border-radius: 4px;
-      border: 1px solid rgba(0, 160, 233, 0.3);
-      
-      table {
-        border-collapse: collapse;
-      }
-    }
-
-    .ant-descriptions-row {
-      border-bottom: 1px solid rgba(0, 160, 233, 0.3);
-      
-      &:last-child {
-        border-bottom: none;
-      }
-
-      & > th, & > td {
-        border-right: 1px solid rgba(0, 160, 233, 0.3);
-        
-        &:last-child {
-          border-right: none;
-        }
-      }
-    }
-
-    .ant-descriptions-item-label {
-      background-color: rgba(0, 160, 233, 0.1) !important;
-      color: #fff !important;
-      font-weight: normal;
-      padding: 12px 16px !important;
-      border-color: rgba(0, 160, 233, 0.3) !important;
-    }
-
-    .ant-descriptions-item-content {
-      color: #fff !important;
-      padding: 12px 16px !important;
-      border-color: rgba(0, 160, 233, 0.3) !important;
-      background-color: transparent !important;
-    }
-  }
-
-  .file-item {
-    background: rgba(0, 160, 233, 0.1);
-    border: 1px solid rgba(0, 160, 233, 0.3) !important;
-    color: #fff;
-    transition: all 0.3s;
-    
-    &:hover {
-         background: rgba(0, 160, 233, 0.2);
-         box-shadow: 0 0 5px rgba(0, 160, 233, 0.5);
-    }
-  }
-}
--- a/src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/index.js
+++ b/src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/index.js
@ -1,12 +1,14 @@
 import React, { useState,useEffect } from 'react';
+import { Image } from 'antd';
 import arrowIcon from '@/assets/images/card/arrow.png';
 import selectedBg from '@/assets/images/modal/selected.png';
 import resperson from '@/assets/images/card/resperson.png';
 import smallCard from '@/assets/images/card/smallCard.png';
 import qys from '@/assets/images/business/qys.png';
+import PdfView from '@/views/Home/components/UI/PdfView';
 import apiurl from '@/service/apiurl';
 import { httpget } from '@/utils/request';
-import TrainingModal from './components/TrainingModal';
+import { download } from '@/utils/tools';
 import './index.less';

 const ImplementResponsibility = () => {
@ -18,10 +20,12 @@ const ImplementResponsibility = () => {
    5:"技术责任人",
  }
  const [activeTab, setActiveTab] = useState('dam'); // 'dam' or 'flood'
+  const [pdfInfo, setPdfInfo] = useState({ visible: false, title: '', fileId: '' });
+  const [imagePreview, setImagePreview] = useState({ visible: false, src: '' });
  const [respData, setRespData] = useState([])
  const [floodData, setFloodData] = useState([])
  const [trainData, setTrainData] = useState({})
-  const [trainingModalVisible, setTrainingModalVisible] = useState(false);
+  const [trainFileData, setTrainFileData] = useState({})

  // 获取大坝安全责任人
  const getRespData = async () => {
@ -54,6 +58,7 @@ const ImplementResponsibility = () => {
      const { code, data } = await httpget(apiurl.sz.zrz.train)
      if (code == 200) {
        setTrainData(data)
+        setTrainFileData(data?.latestPersonnelPlan?.files[0])
      }
    } catch (error) {
      console.log(error);
@ -68,8 +73,28 @@ const ImplementResponsibility = () => {
  ];

  const handleTrainingClick = () => {
-    if (!latestPersonnelPlan) return;
-    setTrainingModalVisible(true);
+    if (!trainFileData || !trainFileData.fileName) return;
+
+    const fileName = trainFileData.fileName;
+    const fileId = trainFileData.fileId;
+    const extension = fileName.split('.').pop().toLowerCase();
+    const downloadUrl = `/gunshiApp/ss/personnelPlan/file/download/${fileId}`;
+
+    if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(extension)) {
+      setImagePreview({
+        visible: true,
+        src: downloadUrl
+      });
+    } else if (extension === 'pdf') {
+      setPdfInfo({
+        visible: true,
+        title: fileName,
+        fileId: fileId
+      });
+    } else {
+      download(downloadUrl)
+      // window.location.href = downloadUrl;
+    }
  };

  const currentPersonList = activeTab === 'dam' ? respData : floodData;
@ -150,21 +175,36 @@ const ImplementResponsibility = () => {
        <div 
          className="value-box" 
          onClick={handleTrainingClick}
-          title={latestPersonnelPlan?.content}
-          style={{ cursor: 'pointer' }}
+          title={trainFileData.fileName?.replace(/\.[^/.]+$/, '')}
        >
-          {latestPersonnelPlan?.content || "暂无培训内容"}
+          {trainFileData.fileName?.replace(/\.[^/.]+$/, '')}
        </div>
      </div>

-      {/* Training Detail Modal */}
-      {trainingModalVisible && (
-        <TrainingModal
-          visible={trainingModalVisible}
-          onClose={() => setTrainingModalVisible(false)}
-          data={latestPersonnelPlan}
+      {/* PDF Viewer */}
+      {pdfInfo.visible && (
+        <PdfView
+          visible={pdfInfo.visible}
+          onClose={() => setPdfInfo({ ...pdfInfo, visible: false })}
+          title={pdfInfo.title}
+          fileId={pdfInfo.fileId}
+          url="/gunshiApp/ss/personnelPlan/file/download/"
        />
      )}
+
+      {/* Image Preview */}
+      <div style={{ display: 'none' }}>
+        <Image
+          src={imagePreview.src}
+          preview={{
+            visible: imagePreview.visible,
+            src: imagePreview.src,
+            onVisibleChange: (value) => {
+              setImagePreview({ ...imagePreview, visible: value });
+            },
+          }}
+        />
+      </div>
    </div>
  );
 };
--- a/src/views/Home/components/Business/SiZhi/components/SoundMechanism/index.js
+++ b/src/views/Home/components/Business/SiZhi/components/SoundMechanism/index.js
@ -2,6 +2,7 @@ import React, { useState,useEffect } from 'react';
 import moment from 'moment';
 import arrowIcon from '@/assets/images/card/arrow.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 lightBg from '@/assets/images/card/light.png';
 import GalleryModal from './GalleryModal';
@ -9,7 +10,7 @@ import MaterialModal from './MaterialModal';
 import YearSelect from '@/views/Home/components/UI/YearSelect';
 import apiurl from '@/service/apiurl';
 import { httpget } from '@/utils/request';
-import { config } from '@/config/index';
+import { config } from '@/config';
 import './index.less';

 const SoundMechanism = () => {
@ -18,9 +19,19 @@ const SoundMechanism = () => {
  const [materialVisible, setMaterialVisible] = useState(false);
  const [modalTitle, setModalTitle] = useState('');
  const [galleryData, setGalleryData] = useState([]);
+
+
  const [manageInfo, setManageInfo] = 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 },
+  ];



@ -45,6 +56,8 @@ const SoundMechanism = () => {
      setModalVisible(true);
    }
  };
+
+  // Funding Data (Mocked as per UI)
  const fundingData = [
    { label: '年度收入预算', value: budgetInfo?.annualExpenditureBudget ?? '-', unit: '万元' },
    { label: '年度支出预算', value: budgetInfo?.annualIncomeBudget ?? '-', unit: '万元' },
@ -69,7 +82,7 @@ const SoundMechanism = () => {
      if (result.code == 200) {
         const files = result.data?.files || [];
         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('管理用房');
            setModalVisible(true);
         }