修改工具栏动画

src/assets/styles/font.css

@@ -1,4 +1,14 @@
 @font-face {
   font-family: 'youshe';
   src: url("../fonts/优设标题黑.ttf");
+}
+
+@font-face {
+  font-family: 'douyu';
+  src: url("../fonts/douyuFont-2.otf");
+}
+
+@font-face {
+  font-family: 'huxiaopo';
+  src: url("../fonts/HuXiaoBoNanShenTi-2.otf");
 }

src/components/ant_override.less

@@ -337,6 +337,13 @@ input:-webkit-autofill:active {
       color: #fff;
     }
   }
+  .ant-picker-cell-disabled {
+    pointer-events: none;
+    .ant-picker-cell-inner {
+        color: rgba(255, 255, 255, 0.25) !important;
+        background-color: rgba(255, 255, 255, 0.1) !important; 
+    }
+  }
 
   // Footer/Ranges
   .ant-picker-footer {

src/models/runtime/index.ts

@@ -17,7 +17,8 @@ export const runtime = createModel<RootModel>()({
     markers: {},
     viewTick: 1, //用来刷新页面更新Marker位置
     showPanels: true, //是否展开面板
-    homeCheckedObj: {}, //首页展开面板对象
+    isFullScreen: false, //是否全屏
+    homeCheckedObj: {}, //首页展开面板对象大屏不用
     featurePops: [], // [{ id, type, data, lgtd, lttd, elev }]
     
     layerSetting: {},
@@ -81,6 +82,12 @@ export const runtime = createModel<RootModel>()({
         showPanels: val,
       }
     },
+    setIsFullScreen(state, val) {
+      return {
+        ...state,
+        isFullScreen: val,
+      }
+    },
     setHomeCheckedObj(state, val) {
       return {
         ...state,

src/service/apiurl.js

@@ -1,3 +1,4 @@
+import { reservoirlist } from "./station"
 
 const service = '/gunshiApp/ss'
 const apiurl = {
@@ -157,33 +158,45 @@ const apiurl = {
       managePic: service + '/screen/manageHouseImg/get',
       wzPage:service + '/rescue/goods/page/query'
     },
-    zrrgl: {
-      page: service + "/resPerson/page",
-      edit: service + "/resPerson/update",
-      delete: service + "/resPerson/del",
-      save: service + "/resPerson/insert",
+    qhfz: {
+      lawPage: service + '/SzRuleByLaw/page',
+      systemPage: service + '/SzRegulatoryFramework/page',
+      caseSta:service + '/szCase/statistics/1'
     },
+    zrz: {
+      respPerson: service + '/screen/responsibility/getPerson',
+      floodPerson: service + '/screen/responsibility/getFxPerson',
+      train:service + '/screen/responsibility/getTraining'
+    }
   },
   sy: {
-    fxya:{
-      page: service + "/resPlanB/list",
-      update: service + "/resPlanB/update",
-      save: service + "/resPlanB/insert",
-      delete: service + "/resPlanB/del",
-      getFile: service + "/resPlanB/file/get"
+    sssyq: {
+      rain: service + '/screen/monitoring/rain',
+      reservoir: service + '/screen/monitoring/rsvr',
+      flow:service + '/screen/monitoring/flow'
     },
+    ya: {
+      rota: service + '/screen/plan/rota',
+      document:service + '/screen/plan/doc'
+    }
   },
-  gcaqjc: {
-    gcaqyj: {
-      yjgzpz:{
-        page: service + '/osmoticWarnRule/page',
-        save: service + '/osmoticWarnRule/insert',
-        edit: service + "/osmoticWarnRule/update",
-        delete: service + "/osmoticWarnRule/del",
-        list: service + "/osmoticPressDevice/list"
-      }
+  sg: {
+    aqjd: {
+      info:service + '/wholeCycle/security',
     },
-  },
+    aqyh:{
+      info:service + '/screen/hidden/get/',
+    },
+    skhj:{
+      info:service + '/screen/reservoirDemarcationInfo/get',
+    },
+     byjc:{
+      info:service + '/screen/byfz/get/',
+    },
+     wxyh:{
+      info:service + '/screen/mfr/get/',
+    }
+  }
 }
 
 export default apiurl

src/utils/tools.js

@@ -3,7 +3,7 @@ import centerOfMass from '@turf/center-of-mass';
 import bbox from '@turf/bbox';
 import turfLength from '@turf/length';
 import along from '@turf/along';
-
+import { config } from '@/config';
 const class2type = {};
 const { toString } = class2type;
 'Boolean Number String Function Array Date RegExp Object Error'.split(' ').forEach((name) => {
@@ -613,4 +613,56 @@ export const myFiltrate = (data,params)=>{
       return query.substring(iStart);
   
     return query.substring(iStart, iEnd);
-  }
+}
+  
+export const download = (url) => {
+    let downloadLink = document.createElement("a");
+        // downloadLink.href = `${process.env.REACT_APP_API_URL}/gunshiApp/ss/personnelPlan/file/download/${params}`;
+        downloadLink.href = config.ip +url;
+        // downloadLink.download = `${params.fileName}`;
+        downloadLink.style.display = "none";
+        // 将链接添加到页面中
+        document.body.appendChild(downloadLink);
+
+        // 模拟点击事件，开始下载
+        downloadLink.click();
+  }
+
+export const showFullScreen = (show=false) => {
+  //当前是否全屏
+  const checkFullScreen = () => {
+    return !!(
+      document.fullscreenElement ||
+      document.webkitFullscreenElement ||
+      document.mozFullScreenElement ||
+      document.msFullscreenElement
+    );
+  };
+  
+  if(show && !checkFullScreen()){
+    // 进入全屏
+    const elem = document?.documentElement;
+    if (elem?.requestFullscreen) {
+        elem?.requestFullscreen();
+      } else if (elem?.mozRequestFullScreen) { /* Firefox */
+        elem?.mozRequestFullScreen();
+      } else if (elem?.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
+        elem?.webkitRequestFullscreen();
+      } else if (elem?.msRequestFullscreen) { /* IE/Edge */
+        elem?.msRequestFullscreen();
+      }
+  }
+
+  if(!show && checkFullScreen()){
+    // 退出全屏
+    if (document?.exitFullscreen) {
+      document?.exitFullscreen();
+    } else if (document?.mozCancelFullScreen) { /* Firefox */
+      document?.mozCancelFullScreen();
+    } else if (document?.webkitExitFullscreen) { /* Chrome, Safari & Opera */
+      document?.webkitExitFullscreen();
+    } else if (document?.msExitFullscreen) { /* IE/Edge */
+      document?.msExitFullscreen();
+    }
+  }
+}

src/views/Home/MapCtrl/M2D/Map2D.js

@@ -82,7 +82,7 @@ export default class Map2D extends BaseMap {
         this.dispatch.runtime.setMapCenter({
           center: this.PROJ2GG(center),
           zoom: zoom,
-          pitch: config.homePitch,
+          pitch: config.pitch3d,
         })
       } 
     });

src/views/Home/MapCtrl/M3D/Map3D.js

@@ -9,13 +9,13 @@ import { BouaLayer3D } from "./layers/BouaLayer3D";
 import { BouaMaskLayer3D } from "./layers/BouaMaskLayer3D";
 import { VillagesBouaLayer3D } from "./layers/VillagesBouaLayer3D"
 
-import { getCameraViewPosition, getCameraViewCenter } from './utils/cesutil'
+import { getCameraViewPosition, getCameraViewCenter, getNewPosition } from './utils/cesutil'
 
 
 const { Cesium } = window;
 
 function __prepare_ces(dispatch) {
-  Cesium.CesiumWidget.prototype.showErrorPanel = function (title) {
+  Cesium.CesiumWidget.prototype.showErrorPanel = function (title, error) {
     dispatch && dispatch.map.setMode('2d');
     if (title && title.indexOf('constructing') >= 0) {
       alert('无法初始化三维场景，如果一直出现此问题，请尝试下载最新的chrome浏览器');
@@ -104,31 +104,38 @@ export default class Map3D extends BaseMap {
       Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH
     ];
 
-    let isInitialMove = true;
-    //监听地图移动完成事件
-    viewer.camera.moveEnd.addEventListener(() => {
-      if (isInitialMove) {
-        isInitialMove = false;
-        return;
-      }
-      //获取当前相机高度
-      const { lon, lat, height:olZoom } = getCameraViewCenter(viewer);
-      console.log(lon, lat, olZoom);
-      if(lon && lat && olZoom){
-        this.dispatch.runtime.setMapCenter({
-          center: [lon, lat],
-          zoom: olZoom,
-          pitch: config.homePitch,
-        })
-      }
-    });
-
     this.layerMgr = new LayerMgr3D(viewer);
     this.getLayer3D(viewer)//加载地图
     
+    let lastPosition = {x:null,y:null,z:null};//记录上次移动坐标
+    let moveStartTime = Date.now();//记录上次setMapCenter事件, 用于防抖
+    let flag = false //帧检测移动后改为true
+    const timeInterval = 500; //防抖时间
     viewer.scene.postRender.addEventListener(() => {
       this.dispatch.runtime.tickViewChanged();
       // this.layerMgr.frameUpdate();
+
+      const currentPos = viewer.camera.position
+      const { x, y, z } = lastPosition
+      if(currentPos.x===x && currentPos.y===y && currentPos.z===z){
+        if(flag && (Date.now() - moveStartTime >= timeInterval)){
+          const { lon, lat, height:olZoom } = getCameraViewCenter(viewer)||{};
+          console.log(lon, lat, olZoom);
+          if(lon && lat && olZoom){
+            this.dispatch.runtime.setMapCenter({
+              center: [lon, lat],
+              zoom: olZoom,
+              pitch: config.pitch3d,
+            })
+          }
+          flag = false
+          moveStartTime = Date.now()
+        }
+      }else{
+        //在移动
+        lastPosition = { x: currentPos.x, y: currentPos.y, z: currentPos.z };
+        flag = true
+      }
     });
 
     let destination = Cesium.Cartesian3.fromDegrees(115.064,30.989,5000) //默认相机位置
@@ -188,21 +195,38 @@ export default class Map3D extends BaseMap {
     return this.layerMgr.getLayer(name);
   }
 
-  zoomTo(cameraTarget) {
+  zoomTo(cameraTarget={}) {
     if (cameraTarget.center) {
-      this._map.camera.flyTo({
-        destination: getCameraViewPosition(cameraTarget),
-        orientation: {
-          heading: Cesium.Math.toRadians(0),
-          pitch: Cesium.Math.toRadians(config.pitch3d),
-          roll: 0.0,
-        },
-        duration: 1.5,  // 飞行时间，单位秒，可以根据需要调整
-        // 其他可选参数，例如：
-        // maximumHeight: 10000, // 最大高度
-        // pitchAdjustHeight : 1000, // 在飞行过程中调整俯仰角的高度阈值
-        // flyOverLongitude: 100, // 飞越经度，用于控制飞行路径
-      });
+      if(cameraTarget.fixed){//固定相机朝向
+        const camera = this._map.camera;    
+        const destination = getNewPosition(cameraTarget.center, cameraTarget.zoom, camera)
+        if(!destination){
+          return
+        }
+        camera.flyTo({
+          destination: destination,
+          orientation: {
+            heading: camera.heading,
+            pitch: camera.pitch,
+            roll: 0.0,
+          },
+          duration: 1, 
+        });
+      }else{
+        this._map.camera.flyTo({
+          destination: getCameraViewPosition(cameraTarget),
+          orientation: {
+            heading: Cesium.Math.toRadians(0),
+            pitch: Cesium.Math.toRadians(config.pitch3d),
+            roll: 0.0,
+          },
+          duration: 1.5,  // 飞行时间，单位秒，可以根据需要调整
+          // 其他可选参数，例如：
+          // maximumHeight: 10000, // 最大高度
+          // pitchAdjustHeight : 1000, // 在飞行过程中调整俯仰角的高度阈值
+          // flyOverLongitude: 100, // 飞越经度，用于控制飞行路径
+        });
+      }
     } else if (cameraTarget.bound) {
       const b = cameraTarget.bound;
       const p1 = Cesium.Cartesian3.fromDegrees(...b[0]);
@@ -221,3 +245,17 @@ export default class Map3D extends BaseMap {
     BouaMaskLayer3D(viewer)//县界外遮罩层
   }
 }
+
+// // 这是一个测试性能的工具留着
+// let listenerExecutionTimes = []; // 记录每次执行的时间
+// const start = performance.now();
+// const end = performance.now();
+// listenerExecutionTimes.push(end - start);
+
+// setInterval(() => {
+//   if (listenerExecutionTimes.length > 0) {
+//       const avg = listenerExecutionTimes.reduce((a, b) => a + b, 0) / listenerExecutionTimes.length;
+//       console.log(`平均每帧监听函数执行时间: ${avg.toFixed(3)}ms`);
+//       listenerExecutionTimes = []; // 清空
+//   }
+// }, 1000);

src/views/Home/MapCtrl/M3D/layermgr3d.js

@@ -48,7 +48,7 @@ export default class LayerMgr3D extends LayerMgr {
    */
   addAppLayers(dispatch, visible, setting, otherParams) {
     visible = visible || {};
-    // dispatch.map.setMap(this.viewer);
+    dispatch.map.setMap(this.viewer);
     //河流
     this.addLayer(new HLLayer3D({ visible: visible[HLLayer3D.LayerName], setting, dispatch }));
     //湖泊

src/views/Home/MapCtrl/M3D/layers/FeatureLayer3D.js

@@ -75,7 +75,7 @@ export default class FeatureLayer3D extends BaseLayer3D {
    */
   setData(records) {
     const viewer = this._viewer;
-    if (!viewer || !viewer.dataSourceDisplay?.defaultDataSource) {
+    if (!viewer || !viewer?.dataSourceDisplay?.defaultDataSource) {
       console.log('viewer null');
       return;
     }

src/views/Home/MapCtrl/M3D/utils/cesutil.js

@@ -97,42 +97,43 @@ export function getCameraViewPosition(mapCenter) {
 }
 
 //获取摄像机焦点经纬度和高度
-export function getCameraViewCenter(viewer) {
+export function getCameraViewCenter(viewer={}) {
   // 1. 获取屏幕中心点的射线（从相机到屏幕中心）
-  const ray = viewer.camera.getPickRay(new Cesium.Cartesian2(
-    viewer.canvas.clientWidth / 2,
-    viewer.canvas.clientHeight / 2
+  const ray = viewer?.camera.getPickRay(new Cesium.Cartesian2(
+    viewer?.canvas.clientWidth / 2,
+    viewer?.canvas.clientHeight / 2
   ));
   
   // 2. 计算射线与地球表面的交点
-  const intersection = viewer.scene.globe.pick(ray, viewer.scene);
+  const intersection = viewer?.scene.globe.pick(ray, viewer?.scene);
   if (intersection) {
     // 如果有交点（看向地球）
     const cartographic = Cesium.Cartographic.fromCartesian(intersection);
     return {
       lon: Cesium.Math.toDegrees(cartographic.longitude),
       lat: Cesium.Math.toDegrees(cartographic.latitude),
-      height: heigjtToZoom(viewer.camera.positionCartographic.height)//cartographic.height
+      height: heigjtToZoom(viewer?.camera.positionCartographic.height)//cartographic.height
     };
   } else {
+    console.log('如果看向天空或太空，获取射线与椭球体的交点');
     // 如果看向天空或太空，获取射线与椭球体的交点
-    const ellipsoid = viewer.scene.globe.ellipsoid;
-    const intersection2 = viewer.scene.camera.pickEllipsoid(
+    const ellipsoid = viewer?.scene.globe.ellipsoid;
+    const intersection2 = viewer?.scene.camera.pickEllipsoid(
       new Cesium.Cartesian2(
-        viewer.canvas.clientWidth / 2,
-        viewer.canvas.clientHeight / 2
+        viewer?.canvas.clientWidth / 2,
+        viewer?.canvas.clientHeight / 2
       ),
       ellipsoid
     );
     
-    if (intersection2) {
-      const cartographic = Cesium.Cartographic.fromCartesian(intersection2);
-      return {
-        lon: Cesium.Math.toDegrees(cartographic.longitude),
-        lat: Cesium.Cartographic.toDegrees(cartographic.latitude),
-        height: 0
-      };
-    }
+    // if (intersection2) {
+    //   // const cartographic = Cesium.Cartographic.fromCartesian(intersection2);
+    //   // return {
+    //   //   lon: Cesium?.Math?.toDegrees(cartographic.longitude),
+    //   //   lat: Cesium?.Cartographic?.toDegrees(cartographic.latitude),
+    //   //   height: 0
+    //   // };
+    // }
   }
 }
 
@@ -192,5 +193,36 @@ export function zoomToHeight(olZoom) {
 }
 //cesium的摄像机height转openlayers的zoom
 export function heigjtToZoom(height) {
-  return Math.max(0, Math.min(28, Math.log2(120000000 / (height - 400) )))
-}
+  return Math.max(0, Math.min(28, Math.log2(120000000 / (height>400?(height - 400):height) )))
+}
+
+//根据经纬度、当前相机朝向、zoom，返回Cartesian3位置
+export function getNewPosition(center, zoom, camera ) {
+  //相机坐标的高度
+  const height = zoomToHeight(zoom)
+  //获取摄像机朝向方向的单位向量（长度1）
+  const direction = Cesium.Cartesian3.normalize( camera.directionWC, new Cesium.Cartesian3());
+  const reverseDirection = Cesium.Cartesian3.negate(direction, new Cesium.Cartesian3());//这里要取反用来计算处摄像机所处的位置
+  //相机与地表焦点的坐标
+  const position = Cesium.Cartesian3.fromDegrees(center[0], center[1], 200);
+  //相机俯仰角
+  const pitch = camera.pitch
+  if(pitch>=0){
+    console.log('请朝向地面');
+    return false
+  }
+  //直线距离
+  const distance = height / Math.sin(-pitch);
+    // 计算移动后的位置
+    const newPosition = new Cesium.Cartesian3();
+    Cesium.Cartesian3.add(
+      position,                            // 当前位置
+      Cesium.Cartesian3.multiplyByScalar(
+        reverseDirection,                  // 方向向量
+        distance,                          // 移动距离
+        new Cesium.Cartesian3()            // 临时向量
+      ),
+      newPosition                          // 结果位置
+    );
+  return newPosition
+}

src/views/Home/components/Business/SiGuan/components/Maintenance/index.js

@@ -0,0 +1,200 @@
+import React, { useEffect, useRef, useState } from 'react';
+import * as echarts from 'echarts';
+import './index.less';
+import apiurl from '@/service/apiurl';
+import { httpget } from '@/utils/request';
+
+const Maintenance = ({ year }) => {
+  const chartRef = useRef(null);
+  const chartInstance = useRef(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [selectedPieItem, setSelectedPieItem] = useState(null);
+  const [startAngle, setStartAngle] = useState(90);
+  const [chartData, setChartData] = useState([]);
+
+  // Color mapping configuration
+  const colorMap = {
+    '溢洪道清障': '#0090FF',
+    '除草除杂': '#00FFFF',
+    '设备养护': '#3355FB',
+    '环境清洁': '#BCEBF7',
+    '危险提示': '#00D085',
+    '其他': '#1890FF'
+  };
+
+  const defaultColors = ['#0090FF', '#00FFFF', '#3355FB', '#BCEBF7', '#00D085', '#1890FF'];
+
+  const getInfo = async (year) => {
+    try {
+      const result = await httpget(apiurl.sg.wxyh.info + year);
+      if (result.code === 200 && result.data) {
+        // Transform object to array format
+        const transformedData = Object.entries(result.data).map(([name, value], index) => ({
+          name,
+          value,
+          color: colorMap[name] || defaultColors[index % defaultColors.length]
+        }));
+        setChartData(transformedData);
+      } else {
+        setChartData([]);
+      }
+    } catch (error) {
+      console.error(error);
+      setChartData([]);
+    }
+  };
+
+  const total = chartData.reduce((sum, item) => sum + item.value, 0);
+
+  const setSelectionByIndex = (index) => {
+    if (!chartData || chartData.length === 0 || index >= chartData.length) return;
+    
+    const item = chartData[index];
+    let sumBefore = 0;
+    for (let i = 0; i < index; i++) {
+      sumBefore += chartData[i].value;
+    }
+    const offset = total > 0 ? (sumBefore + item.value / 2) / total * 360 : 0;
+    const newStartAngle = 90 + offset;
+    setStartAngle(newStartAngle);
+    setSelectedPieItem({
+      name: item.name,
+      value: item.value,
+      percent: total > 0 ? ((item.value / total) * 100).toFixed(0) + '%' : '0%'
+    });
+  };
+
+  useEffect(() => {
+    if (year) {
+      getInfo(year);
+    }
+  }, [year]);
+
+  useEffect(() => {
+    if (chartData && chartData.length > 0) {
+      setSelectionByIndex(0);
+      setActiveIndex(0);
+    } else {
+      setSelectedPieItem(null);
+      setStartAngle(90);
+    }
+  }, [chartData]);
+
+  useEffect(() => {
+    if (!chartRef.current) return;
+
+    if (!chartInstance.current) {
+      chartInstance.current = echarts.init(chartRef.current);
+      chartInstance.current.on('click', (params) => {
+        if (params.dataIndex !== undefined) {
+          setActiveIndex(params.dataIndex);
+          setSelectionByIndex(params.dataIndex);
+        }
+      });
+    }
+
+    if (chartData.length === 0) {
+        chartInstance.current.clear();
+        return;
+    }
+
+    const centerName = selectedPieItem ? selectedPieItem.name : (chartData.length === 1 ? chartData[0].name : '维修养护');
+    const centerValue = selectedPieItem ? selectedPieItem.value : total;
+    const centerPercent = selectedPieItem ? selectedPieItem.percent : '100%';
+
+    const option = {
+      tooltip: {
+        trigger: 'item',
+        formatter: '{b}: {c} ({d}%)'
+      },
+      series: [
+        {
+          name: '维修养护-外圈',
+          type: 'pie',
+          radius: ['52%', '94%'],
+          center: ['50%', '50%'],
+          startAngle: startAngle,
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            position: 'inside',
+            formatter: '{b}',
+            color: '#fff',
+            fontSize: 10
+          },
+          itemStyle: {
+            opacity: 0.4
+          },
+          labelLine: { show: false },
+          data: chartData.map(item => ({
+            value: item.value,
+            name: item.name,
+            itemStyle: { color: item.color }
+          }))
+        },
+        {
+          name: '维修养护-内圈',
+          type: 'pie',
+          radius: ['60%', '70%'],
+          center: ['50%', '50%'],
+          startAngle: startAngle,
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            position: 'center',
+            formatter: () => `{name|${centerName}}\n{value|${centerValue}}\n{percent|${centerPercent}}`,
+            rich: {
+              name: { fontSize: 12, color: 'rgba(255,255,255,0.6)', lineHeight: 16 },
+              value: { fontSize: 14, color: '#fff', fontWeight: 'bold', lineHeight: 20 },
+              percent: { fontSize: 12, color: '#fff', lineHeight: 16 }
+            }
+          },
+          emphasis: {
+            label: { show: true, fontSize: 14, fontWeight: 'bold' }
+          },
+          labelLine: { show: false },
+          data: chartData.map(item => ({
+            value: item.value,
+            name: item.name,
+            itemStyle: { color: item.color }
+          }))
+        }
+      ]
+    };
+
+    chartInstance.current.setOption(option);
+
+    const handleResize = () => {
+      chartInstance.current?.resize();
+    };
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [activeIndex, selectedPieItem, startAngle, chartData]);
+
+  return (
+    <div className="maintenance-container">
+      <div className="chart-wrapper" ref={chartRef}></div>
+      <div className="legend-wrapper">
+        {chartData.map((item, index) => (
+          <div 
+            key={index} 
+            className={`legend-item ${index === activeIndex ? 'active' : ''}`}
+            onMouseEnter={() => {
+                setActiveIndex(index);
+                setSelectionByIndex(index);
+            }}
+          >
+            <div className="legend-color" style={{ backgroundColor: item.color }}></div>
+            <div className="legend-name">{item.name}</div>
+            <div className="legend-value">{item.value}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Maintenance;

src/views/Home/components/Business/SiGuan/components/Maintenance/index.less

@@ -0,0 +1,53 @@
+.maintenance-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  box-sizing: border-box;
+
+  .chart-wrapper {
+    flex: 1;
+    height: 100%;
+    min-width: 0;
+  }
+
+  .legend-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: 10px;
+
+    .legend-item {
+      display: flex;
+      align-items: center;
+      color: rgba(255, 255, 255, 0.85);
+      font-size: 14px;
+      cursor: pointer;
+      padding: 4px 8px;
+      border-radius: 4px;
+      transition: background-color 0.3s;
+
+      &.active, &:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+
+      .legend-color {
+        width: 10px;
+        height: 10px;
+        margin-right: 10px;
+        border-radius: 2px;
+      }
+
+      .legend-name {
+        flex: 1;
+      }
+
+      .legend-value {
+        font-size: 14px;
+        color: #fff;
+      }
+    }
+  }
+}

src/views/Home/components/Business/SiGuan/components/ReservoirDemarcation/index.js

@@ -0,0 +1,187 @@
+import React, { useEffect, useRef,useState } from 'react';
+import * as echarts from 'echarts';
+import arrowIcon from '@/assets/images/card/arrow.png';
+import glfwBg from '@/assets/images/business/glfw.png';
+import bhfwBg from '@/assets/images/business/bhfw.png';
+import smallCard from '@/assets/images/card/smallCard.png';
+import apiurl from '@/service/apiurl';
+import { httpget } from '@/utils/request';
+import './index.less';
+
+const ReservoirDemarcation = () => {
+  const chartRef = useRef(null);
+  const chartInstance = useRef(null);
+  const [info, setInfo] = useState({
+    managementScopeArea: 0,
+    protectionScopeArea: 0,
+    propertyCertificateArea: 0,
+    totalUseArea: 0
+  });
+
+  const getInfo = async () => {
+    try {
+      const result = await httpget(apiurl.sg.skhj.info);
+      if (result.code === 200) {
+        setInfo(result.data);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    if (!chartRef.current) return;
+
+    if (!chartInstance.current) {
+      chartInstance.current = echarts.init(chartRef.current);
+    }
+
+    const total = Number(info.totalUseArea) || 0;
+    const property = Number(info.propertyCertificateArea) || 0;
+    const maxVal = total > 0 ? total : 1;
+    const rate = total > 0 ? Math.min(Math.max(property / total, 0), 1) : 0;
+    const option = {
+      series: [
+        {
+          type: 'gauge',
+          startAngle: 210,
+          endAngle: -30,
+          min: 0,
+          max: maxVal,
+          splitNumber: 40,
+          radius: '125%',
+          center: ['50%', '65%'],
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 10,
+              opacity: 0,
+              color: [
+                [rate, '#0bbafe'],
+                [1, 'rgba(255, 255, 255, 0.1)']
+              ]
+            }
+          },
+          axisTick: {
+            show: true,
+            length: 12,
+            distance: -12,
+            lineStyle: {
+              color: 'auto',
+              width: 3
+            }
+          },
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          pointer: {
+            show: false
+          },
+          title: {
+            show: true,
+            offsetCenter: [0, '30%'],
+            fontSize: 14,
+            color: '#fff'
+          },
+          detail: {
+            valueAnimation: true,
+            formatter: '{value}万亩',
+            color: '#00D8FF',
+            fontSize: 14,
+            fontWeight: 'bold',
+            offsetCenter: [0, '-15%']
+          },
+          data: [
+            {
+              value: property,
+              name: '不动产权'
+            }
+          ]
+        }
+      ]
+    };
+
+    chartInstance.current.setOption(option);
+
+    const handleResize = () => {
+      chartInstance.current && chartInstance.current.resize();
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [info]);
+
+  // Clean up chart instance on unmount
+  useEffect(() => {
+    getInfo()
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.dispose();
+        chartInstance.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <div className="reservoir-demarcation">
+      {/* Section 1: Management and Protection Scope */}
+      <div className="section-header">
+        <div className="title-wrapper">
+          <img src={arrowIcon} alt="arrow" className="arrow-icon" />
+          <span className="section-title">管理和保护范围</span>
+        </div>
+      </div>
+
+      <div className="scope-area">
+        <div className="scope-card" style={{ backgroundImage: `url(${glfwBg})` }}>
+          <div className="scope-content">
+            <div className="value-wrapper" style={{borderBottom:"1px solid #00a0e9"}}>
+              <span className="value">{info.managementScopeArea}</span>
+              <span className="unit">km²</span>
+            </div>
+            <div className="label">管理范围</div>
+          </div>
+        </div>
+        <div className="scope-card" style={{ backgroundImage: `url(${bhfwBg})` }}>
+          <div className="scope-content">
+            <div className="value-wrapper">
+              <span className="value">{info.protectionScopeArea}</span>
+              <span className="unit">km²</span>
+            </div>
+            <div className="label">保护范围</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Section 2: Clear Property Rights */}
+      <div className="section-header">
+        <div className="title-wrapper">
+          <img src={arrowIcon} alt="arrow" className="arrow-icon" />
+          <span className="section-title">产权清晰</span>
+        </div>
+      </div>
+
+      <div className="property-area">
+        <div className="chart-wrapper" ref={chartRef}></div>
+        <div className="info-list">
+          <div className="info-item" style={{ backgroundImage: `url(${smallCard})` }}>
+            <span className="label">已取得不动产权证书面积：</span>
+            <span className="value">{info.propertyCertificateArea}万亩</span>
+          </div>
+          <div className="info-item" style={{ backgroundImage: `url(${smallCard})` }}>
+            <span className="label">用地总面积：</span>
+            <span className="value">{info.totalUseArea}万亩</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ReservoirDemarcation;

src/views/Home/components/Business/SiGuan/components/ReservoirDemarcation/index.less

@@ -0,0 +1,94 @@
+.reservoir-demarcation {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  .scope-area {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    
+    .scope-card {
+      width: 48%;
+      height: 60px;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      display: flex;
+      align-items: center;
+      padding-left: 80px; // Make space for the icon in the bg image
+      box-sizing: border-box;
+
+      .scope-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        .value-wrapper {
+          margin-bottom: 2px;
+          .value {
+            font-size: 16px;
+            font-weight: bold;
+            color: #00D8FF;
+            font-family: 'huxiaopo', sans-serif;
+            margin-right: 4px;
+          }
+          .unit {
+            font-size: 14px;
+            color: #00D8FF;
+          }
+        }
+
+        .label {
+          font-size: 14px;
+          color: rgba(255, 255, 255);
+        }
+      }
+    }
+  }
+
+  .property-area {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    min-height: 0;
+
+    .chart-wrapper {
+      width: 36%;
+      height: 100%;
+      position: relative;
+    }
+
+    .info-list {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 8px;
+      padding-left: 10px;
+
+      .info-item {
+        width: 100%;
+        height: 32px;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 10px;
+        box-sizing: border-box;
+
+        .label {
+          font-size: 14px;
+          color: #fff;
+        }
+
+        .value {
+          font-size: 14px;
+          color: #00D8FF;
+        }
+      }
+    }
+  }
+}

src/views/Home/components/Business/SiGuan/components/ReservoirInspection/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import xcrIcon from '@/assets/images/business/xcr.png';
+import wrjIcon from '@/assets/images/business/wrj.png';
+import './index.less';
+
+const ReservoirInspection = () => {
+  // Mock data matching the design
+  const data = {
+    annualCount: 78,
+    droneCount: 156
+  };
+
+  return (
+    <div className="reservoir-inspection">
+      <div className="inspection-item">
+        <div className="icon-wrapper">
+          <img src={xcrIcon} alt="年度巡查" />
+        </div>
+        <div className="info">
+          <div className="count-row">
+            <span className="count">{data.annualCount}</span>
+            <span className="unit">次</span>
+          </div>
+          <div className="label">年度巡查</div>
+        </div>
+      </div>
+      
+      <div className="inspection-item">
+        <div className="icon-wrapper" style={{marginRight:30}}>
+          <img src={wrjIcon} alt="无人机巡查" />
+        </div>
+        <div className="info">
+          <div className="count-row">
+            <span className="count">{data.droneCount}</span>
+            <span className="unit">次</span>
+          </div>
+          <div className="label">无人机巡查</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ReservoirInspection;

src/views/Home/components/Business/SiGuan/components/ReservoirInspection/index.less

@@ -0,0 +1,54 @@
+.reservoir-inspection {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+
+  .inspection-item {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+
+    .icon-wrapper {
+      width: 50px;
+      display: flex;
+      justify-content: center;
+      
+      img {
+        height: 60px;
+        width: auto;
+      }
+    }
+
+    .info {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+
+      .count-row {
+        .count {
+          font-size: 20px;
+          font-weight: bold;
+          color: #00D8FF;
+          margin-right: 2px;
+        }
+
+        .unit {
+          font-size: 14px;
+          color: #00D8FF;
+        }
+      }
+
+      .label {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.7);
+        margin-top: 2px;
+        white-space: nowrap;
+      
+      }
+    }
+  }
+}

src/views/Home/components/Business/SiGuan/components/SafetyAppraisal/index.js

@@ -0,0 +1,82 @@
+import React,{useEffect,useState} from 'react';
+import smallCard from '@/assets/images/card/smallCard.png';
+import barTypeIcon from '@/assets/images/business/barType.png';
+import apiurl from '@/service/apiurl';
+import { httpget } from '@/utils/request';
+import './index.less';
+
+const SafetyAppraisal = () => {
+  const [info, setInfo] = useState({})
+  const topCards = [
+    { label: '', value: '双石水库', isTitle: true },
+    { label: '', value: '赤壁市/\n官塘驿镇', isLocation: true },
+    { label: '', value: '中型', isType: true },
+  ];
+  const getInfo = async () => {
+    try {
+      const result = await httpget(apiurl.sg.aqjd.info);
+      if (result.code === 200) {
+        setInfo(result.data);
+      }
+    } catch (error) {
+      console.error(error);
+    } 
+  };
+
+  useEffect(() => {
+    getInfo()
+  }, [])
+  
+
+  return (
+    <div className="safety-appraisal">
+      {/* Top Section: Cards */}
+      <div className="top-cards">
+        {topCards.map((item, index) => (
+          <div 
+            key={index} 
+            className="info-card"
+            style={{ backgroundImage: `url(${smallCard})` }}
+          >
+            <div className={`sg-card-content ${item.isTitle ? 'title-style' : ''} ${item.isType ? 'type-style' : ''}`}>
+              {item.isLocation ? (
+                <div className="location-text">
+                  <div>赤壁市/</div>
+                  <div>官塘驿镇</div>
+                </div>
+              ) : (
+                item.value
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Bottom Section: Timeline */}
+      <div className="timeline-section">
+        <div className="timeline-line"></div>
+        
+        <div className="timeline-item left">
+          <div className="dot"></div>
+          <div className="label">鉴定时间</div>
+          <div className="date">{info?.identifyDate ??'-'}年</div>
+        </div>
+
+        <div className="timeline-item center">
+          <div className="icon-wrapper">
+            <img src={barTypeIcon} alt="Type" />
+          </div>
+          <div className="label type-label">{info?.identifyType ??'-'}</div>
+        </div>
+
+        <div className="timeline-item right">
+          <div className="dot"></div>
+          <div className="label">下次鉴定时间</div>
+          <div className="date">{info?.nextVerifyDate ??'-'}年</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SafetyAppraisal;

src/views/Home/components/Business/SiGuan/components/SafetyAppraisal/index.less

@@ -0,0 +1,124 @@
+.safety-appraisal {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  .top-cards {
+    display: flex;
+    justify-content: space-between;
+    height: 70px;
+    margin-bottom: 15px;
+    .info-card {
+      width: 32%;
+      height: 100%;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .sg-card-content {
+        text-align: center;
+        color: #fff;
+        font-size: 14px;
+        font-weight: 500;
+
+        &.title-style {
+          font-size: 18px;
+          font-family: douyu;
+          letter-spacing: 1px;
+        }
+
+        &.type-style {
+          font-size: 18px;
+          color: #00D8FF;
+          font-family: douyu;
+    
+        }
+
+        .location-text {
+          font-size: 14px;
+          line-height: 1.4;
+        }
+      }
+    }
+  }
+
+  .timeline-section {
+    flex: 1;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+
+    .timeline-line {
+      position: absolute;
+      top: 30%;
+      left: 20px;
+      right: 20px;
+      height: 2px;
+      background: #007acc;
+      transform: translateY(-50%);
+      z-index: 0;
+    }
+
+    .timeline-item {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100px;
+
+      &.left, &.right {
+        margin-top:20px; 
+        .dot {
+          width: 12px;
+          height: 12px;
+          background: #00D8FF;
+          border-radius: 50%;
+          margin-bottom: 10px;
+          box-shadow: 0 0 5px #00D8FF;
+        }
+
+        .label {
+          color: #00D8FF;
+          font-size: 16px;
+          margin-bottom: 5px;
+          font-weight: bold;
+        }
+
+        .date {
+          color: #fff;
+          font-size: 16px;
+          font-weight: bold;
+        }
+      }
+
+      &.center {
+        margin-top: -40px; // Adjust to lift the icon above the line slightly if needed, or rely on flex alignment
+        .icon-wrapper {
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 2px;
+          img {
+            width: 30px;
+            height: 30px;
+          }
+        }
+
+        .label.type-label {
+          color: #00D8FF;
+          font-size: 18px;
+          font-family: douyu;
+        }
+      }
+    }
+  }
+}

src/views/Home/components/Business/SiGuan/components/SafetyHazard/index.js

@@ -0,0 +1,165 @@
+import React, { useEffect, useRef, useState } from 'react';
+import * as echarts from 'echarts';
+import zglIcon from '@/assets/images/business/zgl.png';
+import apiurl from '@/service/apiurl';
+import { httpget } from '@/utils/request';
+import './index.less';
+
+const SafetyHazard = ({ year }) => {
+  const chartRef = useRef(null);
+  const chartInstance = useRef(null);
+  const [info, setInfo] = useState({
+    totalCount: 0,
+    finishCount: 0,
+    finishPercent: 0,
+    months: {}
+  });
+
+  const getInfo = async (params) => {
+    try {
+      const result = await httpget(apiurl.sg.aqyh.info + params);
+      if (result.code === 200) {
+        setInfo(result.data);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    if (year) {
+      getInfo(year);
+    }
+  }, [year]);
+
+  useEffect(() => {
+    if (!chartRef.current) return;
+
+    if (!chartInstance.current) {
+      chartInstance.current = echarts.init(chartRef.current);
+    }
+    
+    const monthlyData = Array.from({ length: 12 }, (_, i) => info.months?.[i + 1] || 0);
+    console.log(monthlyData);
+     
+    const option = {
+      grid: {
+        top: '15%',
+        left: '5%',
+        right: '5%',
+        bottom: '5%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12 月'],
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255, 255, 255, 0.5)'
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          color: '#fff',
+          fontSize: 12,
+          interval: 0
+        }
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(255, 255, 255, 0.1)',
+            type: 'dashed'
+          }
+        },
+        axisLabel: {
+          color: '#fff',
+          fontSize: 12
+        }
+      },
+      series: [
+        {
+          type: 'bar',
+          barWidth: '30%',
+          data: monthlyData,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#00D8FF' },
+              { offset: 1, color: 'rgba(0, 216, 255, 0.1)' }
+            ]),
+            borderRadius: [2, 2, 0, 0]
+          }
+        }
+      ]
+    };
+
+    chartInstance.current.setOption(option);
+
+    const handleResize = () => {
+      chartInstance.current && chartInstance.current.resize();
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [info]);
+
+  // Clean up chart instance on unmount
+  useEffect(() => {
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.dispose();
+        chartInstance.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <div className="safety-hazard">
+      {/* Top Section */}
+      <div className="top-section">
+        <div className="progress-area">
+          <div className="labels">
+            <div className="total-label">
+              <span className="text">隐患总数</span>
+              <span className="num">{info.totalCount}</span>
+            </div>
+            <div className="rectified-label">
+              <span className="text">已整改</span>
+              <span className="num">{info.finishCount}</span>
+            </div>
+          </div>
+          <div className="progress-bar-bg">
+            <div 
+              className="progress-bar-fill" 
+              style={{ width: `${info.totalCount > 0 ? (info.finishCount / info.totalCount) * 100 : 0}%` }}
+            ></div>
+          </div>
+        </div>
+
+        <div className="rate-box">
+          <div className="icon-wrapper">
+            <img src={zglIcon} alt="Rate" />
+          </div>
+          <div className="rate-info">
+            <div className="rate-num">
+              {info.finishPercent}
+              <span className="percent">%</span>
+            </div>
+            <div className="rate-text">整改率</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Chart Section */}
+      <div className="chart-container" ref={chartRef}></div>
+    </div>
+  );
+};
+
+export default SafetyHazard;

src/views/Home/components/Business/SiGuan/components/SafetyHazard/index.less

@@ -0,0 +1,123 @@
+.safety-hazard {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+  box-sizing: border-box;
+
+  .top-section {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    height: 60px;
+
+    .progress-area {
+      flex: 1;
+      margin-right: 15px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .labels {
+        display: flex;
+        justify-content: space-between;
+        .total-label, .rectified-label {
+          display: flex;
+          flex-direction: column;
+          
+          .text {
+            font-size: 14px;
+            color: rgba(255, 255, 255);
+            margin-bottom: 0;
+          }
+          
+          .num {
+            font-size: 16px;
+            font-weight: bold;
+            color: #fff;
+          }
+        }
+
+        .rectified-label {
+          align-items: flex-end;
+          .text {
+            color: #00D8FF;
+          }
+          .num {
+            color: #00D8FF;
+          }
+        }
+      }
+
+      .progress-bar-bg {
+        width: 100%;
+        height: 18px;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 6px;
+        overflow: hidden;
+
+        .progress-bar-fill {
+          height: 100%;
+          background: #f59e0b; // Orange color matching the design
+          border-radius: 6px;
+        }
+      }
+    }
+
+    .rate-box {
+      width: 130px;
+      border: 1px solid #00a0e9;
+      display: flex;
+      align-items: center;
+      padding: 5px;
+      position: relative;
+
+      // Add corner markers if needed, or simple border
+      
+      .icon-wrapper {
+        width: 40px;
+        margin-right: 5px;
+        display: flex;
+        justify-content: center;
+        
+        img {
+          width: 30px;
+          height: auto;
+        }
+      }
+
+      .rate-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-right: 5px;
+
+        .rate-num {
+          font-family: 'huxiaopo', sans-serif;
+          font-size: 16px;
+          color: #00D8FF;
+          // line-height: 1;
+          margin-bottom: 2px;
+
+          .percent {
+            font-size: 14px;
+            margin-left: 2px;
+          }
+        }
+
+        .rate-text {
+          font-size: 14px;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .chart-container {
+    flex: 1;
+    width: 100%;
+    min-height: 0; // Important for flex child to shrink
+  }
+}

src/views/Home/components/Business/SiGuan/components/SluiceMonitor/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import zmIcon from '@/assets/images/business/zm.png';
+import './index.less';
+
+const SluiceMonitor = () => {
+  // Mock data based on the UI image
+  const gateData = [
+    { id: 1, name: 'XXXX闸门1', opening: 0.3, time: '12-25 09:32' },
+    { id: 2, name: 'XXXX闸门2', opening: 0.0, time: '12-25 09:32' },
+    { id: 3, name: 'XXXX闸门3', opening: 0.0, time: '12-25 09:32' },
+  ];
+
+  return (
+    <div className="sluice-monitor">
+      {gateData.map((item) => (
+        <div key={item.id} className="gate-item">
+          <div className="icon-wrapper">
+            <img src={zmIcon} alt="gate" />
+          </div>
+          <div className="gate-info">
+            <span className="gate-name">{item.name}</span>
+            <div className="status-wrapper">
+              <span className="label">开度：</span>
+              <span className="value">{item.opening.toFixed(1)}</span>
+              <span className="unit">m</span>
+            </div>
+            <span className="time">{item.time}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SluiceMonitor;

src/views/Home/components/Business/SiGuan/components/SluiceMonitor/index.less

@@ -0,0 +1,71 @@
+.sluice-monitor {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  padding: 0 10px;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .gate-item {
+    display: flex;
+    align-items: center;
+    padding: 6px 0;
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .icon-wrapper {
+      margin-right: 15px;
+      img {
+        width: 32px;
+        height: auto;
+      }
+    }
+
+    .gate-info {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #fff;
+      font-size: 14px;
+
+      .gate-name {
+        flex: 1;
+      }
+
+      .status-wrapper {
+        display: flex;
+        align-items: baseline;
+        margin: 0 20px;
+
+        .label {
+          color: rgba(255, 255, 255, 0.8);
+          margin-right: 5px;
+        }
+
+        .value {
+          font-size: 16px;
+          color: #00D8FF;
+          font-family: huxiaopo;
+          margin-right: 5px;
+        }
+
+        .unit {
+          color: #00D8FF;
+          font-family: huxiaopo;
+        }
+      }
+
+      .time {
+        color: rgba(255, 255, 255);
+        font-size: 14px;
+        min-width: 90px;
+        text-align: right;
+      }
+    }
+  }
+}

src/views/Home/components/Business/SiGuan/components/TermiteControl/index.js

@@ -0,0 +1,103 @@
+import React, { useState,useEffect } from 'react';
+import moment from 'moment';
+import YearSelect from '../../../../UI/YearSelect';
+import smallCard from '@/assets/images/card/smallCard.png';
+import arrowIcon from '@/assets/images/card/arrow.png';
+import apiurl from '@/service/apiurl';
+import { httpget } from '@/utils/request';
+import './index.less';
+
+const TermiteControl = () => {
+  const [year, setYear] = useState(moment().format('YYYY'));
+  const [info, setInfo] = useState({
+    searchCount: 0,
+    hasByCount: 0,
+    hasByCount: 0,
+  });
+
+  const getInfo = async (year) => {
+    try {
+      const result = await httpget(apiurl.sg.byjc.info+year);
+      if (result.code === 200) {
+        setInfo(result.data);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  const data = {
+    monitorRange: 13600,
+    monitorDevices: 89,
+  };
+
+  useEffect(() => {
+    if (year) {
+      getInfo(year)
+    }
+  }, [year])
+  
+
+  return (
+    <div className="termite-control">
+      {/* Section 1: Termite Monitoring Devices */}
+      <div className="section-header">
+        <div className="title-wrapper">
+          <img src={arrowIcon} alt="arrow" className="arrow-icon" />
+          <span className="section-title">白蚁监控装置</span>
+        </div>
+      </div>
+      
+      <div className="monitor-grid">
+        <div className="info-card" style={{ backgroundImage: `url(${smallCard})` }}>
+          <div className="value-wrapper">
+            <span className="value">{data.monitorRange}</span>
+            <span className="unit">m²</span>
+          </div>
+          <div className="label">白蚁监控范围</div>
+        </div>
+        <div className="info-card" style={{ backgroundImage: `url(${smallCard})` }}>
+          <div className="value-wrapper">
+            <span className="value">{data.monitorDevices}</span>
+            <span className="unit">处</span>
+          </div>
+          <div className="label">监控装置数量</div>
+        </div>
+      </div>
+
+      {/* Section 2: Census and Prevention Results */}
+      <div className="section-header with-action">
+        <div className="title-wrapper">
+          <img src={arrowIcon} alt="arrow" className="arrow-icon" />
+          <span className="section-title">普查及防治结果</span>
+        </div>
+        <YearSelect value={year} onChange={setYear} />
+      </div>
+
+      <div className="census-grid">
+        <div className="info-card" style={{ backgroundImage: `url(${smallCard})` }}>
+          <div className="value-wrapper">
+            <span className="value text-blue">{info.searchCount}</span>
+            <span className="unit text-blue">次</span>
+          </div>
+          <div className="label">白蚁普查</div>
+        </div>
+        <div className="info-card" style={{ backgroundImage: `url(${smallCard})` }}>
+          <div className="value-wrapper">
+            <span className="value text-red">{info.hasByCount}</span>
+            <span className="unit text-blue">处</span>
+          </div>
+          <div className="label">有白蚁危害</div>
+        </div>
+        <div className="info-card" style={{ backgroundImage: `url(${smallCard})` }}>
+          <div className="value-wrapper">
+            <span className="value text-green">{info.hasByCount}</span>
+            <span className="unit text-green">处</span>
+          </div>
+          <div className="label">已处置</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TermiteControl;

src/views/Home/components/Business/SiGuan/components/TermiteControl/index.less

@@ -0,0 +1,94 @@
+.termite-control {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .section-header {
+    margin-bottom: 10px;
+    
+    &.with-action {
+      margin-top: 15px;
+      margin-bottom: 10px;
+    }
+  }
+
+  .monitor-grid {
+    display: flex;
+    gap: 25px;
+    min-height: 0;
+    justify-content: center;
+    .info-card {
+      width: 45%;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 10px 0;
+      
+      .value-wrapper {
+        display: flex;
+        align-items: baseline;
+        
+        .value {
+          font-size: 16px;
+          font-weight: bold;
+          color: #00D8FF;
+        }
+        .unit {
+          font-size: 14px;
+          color: #00D8FF;
+          margin-left: 2px;
+        }
+      }
+
+      .label {
+        font-size: 14px;
+        color: rgba(255, 255, 255);
+      }
+    }
+  }
+
+  .census-grid {
+    display: flex;
+    gap: 10px;
+    flex: 1;
+    min-height: 0;
+    
+    .info-card {
+      // flex: 1;
+      width: 33%;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 10px 0;
+      .value-wrapper {
+        display: flex;
+        align-items: baseline;
+
+        .value {
+          font-size: 16px;
+          font-weight: bold;
+          
+          &.text-blue { color: #00D8FF; }
+          &.text-red { color: #FF4D4F; }
+          &.text-green { color: #52C41A; }
+        }
+        .unit {
+          font-size: 14px;
+          color: #00D8FF; // Always blue
+          margin-left: 2px;
+        }
+      }
+
+      .label {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.8);
+      }
+    }
+  }
+}

src/views/Home/components/Business/SiGuan/index.js

@@ -1,39 +1,62 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import moment from 'moment';
 import CommonCard from '../../UI/CommonCard';
 import YearSelect from '../../UI/YearSelect';
+import SafetyAppraisal from './components/SafetyAppraisal';
+import ReservoirInspection from './components/ReservoirInspection';
+import SafetyHazard from './components/SafetyHazard';
+import SluiceMonitor from './components/SluiceMonitor';
+import ReservoirDemarcation from './components/ReservoirDemarcation';
+import TermiteControl from './components/TermiteControl';
+import Maintenance from './components/Maintenance';
 import './index.less';
 
 const SiGuan = () => {
+  const showPanels = useSelector(s => s.runtime.showPanels);
+  const [inspectionYear, setInspectionYear] = useState(moment().format('YYYY'));
+  const [hazardYear, setHazardYear] = useState(moment().format('YYYY'));
+  const [wxYear, setWxYear] = useState(moment().format('YYYY'));
+
   return (
     <div className="siguan-view">
-      <div className="side-panel left">
+      <div className={`side-panel left ${!showPanels ? 'hidden' : ''}`}>
         <CommonCard title="安全鉴定" className="panel-card card-1" >
-          <div className="placeholder-content">内容填充区域</div>
+          <SafetyAppraisal />
         </CommonCard>
-        <CommonCard title="库区巡查" className="panel-card card-2" style={{minHeight:120}}>
-          <div className="placeholder-content">内容填充区域</div>
+        <CommonCard 
+          title="库区巡查" 
+          className="panel-card card-2" 
+          headerExtra={<YearSelect value={inspectionYear} onChange={setInspectionYear} />}
+          style={{minHeight:120}}
+        >
+          <ReservoirInspection />
         </CommonCard>
         <CommonCard title="闸门监控" className="panel-card card-3">
-          <div className="placeholder-content">内容填充区域</div>
+          <SluiceMonitor />
         </CommonCard>
         <CommonCard
           title="安全隐患"
           className="panel-card card-4"
-          headerExtra={<YearSelect />}
+          headerExtra={<YearSelect value={hazardYear} onChange={setHazardYear} />}
         >
-          <div className="placeholder-content">内容填充区域</div>
+          <SafetyHazard year={hazardYear} />
         </CommonCard>
       </div>
 
-      <div className="side-panel right">
+      <div className={`side-panel right ${!showPanels ? 'hidden' : ''}`}>
         <CommonCard title="水库划界" className="panel-card card-1">
-          <div className="placeholder-content">内容填充区域</div>
+          <ReservoirDemarcation />
         </CommonCard>
         <CommonCard title="白蚁防治" className="panel-card card-2">
-          <div className="placeholder-content">内容填充区域</div>
+          <TermiteControl />
         </CommonCard>
-        <CommonCard title="维修养护" className="panel-card card-3">
-          <div className="placeholder-content">内容填充区域</div>
+        <CommonCard
+          title="维修养护"
+          className="panel-card card-3"
+          headerExtra={<YearSelect value={wxYear} onChange={setWxYear} />}
+        >
+          <Maintenance year={wxYear} />
         </CommonCard>
       </div>
     </div>

src/views/Home/components/Business/SiGuan/index.less

@@ -6,10 +6,10 @@
   @import "../common.less";
 
   .left {
-    .card-1 { flex: 6; }
-    .card-2 { flex: 3; }
-    .card-3 { flex: 4; }
-    .card-4 { flex: 6; }
+    .card-1 { flex: 1; }
+    .card-2 { flex: 2; }  
+    .card-3 { flex: 3; }
+    .card-4 { flex: 5; }
   }
 
   .right {

src/views/Home/components/Business/SiQuan/components/ModalComponents/CycleArchive/index.js

@@ -4,7 +4,7 @@ import { SearchOutlined, ReloadOutlined, DownloadOutlined, FilePdfOutlined, File
 import apiurl from '@/service/apiurl';
 import usePageTable from '@/components/crud/usePageTable';
 import { createCrudService } from '@/components/crud/_';
-import { exportFile } from '@/utils/tools'
+import { download, exportFile } from '@/utils/tools'
 import { httppost } from '@/utils/request';
 import { config } from '@/config';
 import PdfView from '@/views/Home/components/UI/PdfView';
@@ -61,6 +61,7 @@ const CycleArchive = () => {
 
   const handleFileClick = (file) => {
     const fileType = file.fileName?.split('.').pop()?.toLowerCase();
+    const downloadUrl = `/gunshiApp/ss/projectEvents/file/download/${file.fileId}`;
     if (fileType === 'pdf') {
       setPdfInfo({
         visible: true,
@@ -68,8 +69,7 @@ const CycleArchive = () => {
         fileId: file.fileId
       });
     } else {
-      // Download for non-pdf files
-      window.open(config.minioIp + file.filePath, '_blank');
+      download(downloadUrl)
     }
   };
 

src/views/Home/components/Business/SiQuan/components/ModalComponents/VideoList/index.js

@@ -6,6 +6,7 @@ import { treeList, srcData, videoList, ysyToken } from './http'
 import VideoControler from "@/components/VideoCom/VideoControler"
 import { httppost } from "@/utils/request"
 import apiurl from "@/service/apiurl"
+import { Spin } from "antd"
 
 
 const VideoList = () => {
@@ -15,6 +16,7 @@ const VideoList = () => {
   const [size, setSize] = useState(1)
   const [treeListData, setTreeData] = useState([])
   const [selectList, setSelectList] = useState()
+  const [loading, setLoading] = useState(true)
 
   const selectedKeys = async (list, node) => {
     console.log(node, 'node');
@@ -74,18 +76,24 @@ const VideoList = () => {
 
   }
   const getTreeData = async () => {
-    const res = await treeList()
-    const res1 = await videoList()
-    const arr = res1.data.filter(item => item.menuId).map((item, index) => {
-      item.parentId = item.menuId
-      item.id = 999 + index
-      item.isLeaf = true
-      // item.icon=<VideoCameraFilled />
-      return item
-    })
-    const arr1 = [...arr, ...res.data]
-    console.log("before", arr1);
-    setTreeData(buildTree(arr1))
+    try {
+      const res = await treeList()
+      const res1 = await videoList()
+      const arr = res1.data.filter(item => item.menuId).map((item, index) => {
+        item.parentId = item.menuId
+        item.id = 999 + index
+        item.isLeaf = true
+        // item.icon=<VideoCameraFilled />
+        return item
+      })
+      const arr1 = [...arr, ...res.data]
+      console.log("before", arr1);
+      setTreeData(buildTree(arr1))
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setLoading(false)
+    }
   }
   function buildTree(data, parentId = "0") {
     const tree = [];
@@ -137,20 +145,28 @@ const VideoList = () => {
   }, [])
   return (
     <div className='flex videoList'>
-      <div className={['treeRight', (selectList && selectList.type == 1) ? 'ptz-visible' : ''].join(' ')}>
-        <TreeData size={size} selectedKeys={selectedKeys} treeListData={treeListData} videoArr={videoArr} />
-        {
-          selectList && selectList.type == 1 ?
-            <div style={{ position: "absolute", bottom: 0, left: 0 }}>
-              <VideoControler
-                selectItem={selectList}
-                onOperation={onOperation}
-              />
-            </div>
-            : null
-        }
-      </div>
-      <div className='treeLeft'><SplitScreen count={count} videoArr={videoArr} clickIndex={clickIndex} getType={getType} /></div>
+      {loading ? (
+        <div style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          <Spin tip="加载中..." />
+        </div>
+      ) : (
+        <>
+          <div className={['treeRight', (selectList && selectList.type == 1) ? 'ptz-visible' : ''].join(' ')}>
+            <TreeData size={size} selectedKeys={selectedKeys} treeListData={treeListData} videoArr={videoArr} />
+            {
+              selectList && selectList.type == 1 ?
+                <div style={{ position: "absolute", bottom: 0, left: 0 }}>
+                  <VideoControler
+                    selectItem={selectList}
+                    onOperation={onOperation}
+                  />
+                </div>
+                : null
+            }
+          </div>
+          <div className='treeLeft'><SplitScreen count={count} videoArr={videoArr} clickIndex={clickIndex} getType={getType} /></div>
+        </>
+      )}
     </div>
   )
 }

src/views/Home/components/Business/SiQuan/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import CommonCard from '../../UI/CommonCard';
 import ThreeDots from '../../UI/ThreeDots';
 import SupervisionCoverage from './components/SupervisionCoverage';
@@ -17,6 +18,7 @@ import './index.less';
 
 
 const SiQuan = () => {
+  const showPanels = useSelector(s => s.runtime.showPanels);
   const [modalVisible, setModalVisible] = useState(false);
   const [modalType, setModalType] = useState('monitor'); // 'monitor' | 'cycle' | 'allweather'
   const [infos, setInfos] = useState({});
@@ -77,7 +79,7 @@ const SiQuan = () => {
 
   return (
     <div className="siquan-view">
-        <div className="side-panel left">
+        <div className={`side-panel left ${!showPanels ? 'hidden' : ''}`}>
           <div className="left-part">
             <CommonCard title="监管全覆盖" className="panel-card card-1">
               <SupervisionCoverage data={infos} />
@@ -91,7 +93,7 @@ const SiQuan = () => {
             </CommonCard>
           </div>
         </div>
-        <div className="side-panel right">
+        <div className={`side-panel right ${!showPanels ? 'hidden' : ''}`}>
           <div className="right-part">
             <CommonCard 
               title="管控全天候" 

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";

src/views/Home/components/Business/SiYu/components/PlanSection/index.js

@@ -0,0 +1,186 @@
+import React, { useState,useEffect } from 'react';
+import moment from 'moment';
+import { Image } from 'antd';
+import arrowIcon from '@/assets/images/card/arrow.png';
+import smallCard from '@/assets/images/card/smallCard.png';
+import resperson from '@/assets/images/card/resperson.png';
+import { download } from '@/utils/tools';
+import apiurl from '@/service/apiurl';
+import { httpget } from '@/utils/request';
+import PdfView from '@/views/Home/components/UI/PdfView';
+import './index.less';
+
+const PlanSection = () => {
+  const [pdfInfo, setPdfInfo] = useState({ visible: false, title: '', fileId: '' });
+  const [imagePreview, setImagePreview] = useState({ visible: false, src: '' });
+  const [rotaInfo, setRotaInfo] = useState({});
+  const [docList, setDocList] = useState([]);
+  // 获取值班信息
+  const getRotaInfo = async () => {
+    try {
+      const result = await httpget(apiurl.sy.ya.rota);
+      if (result.code === 200) {
+        setRotaInfo(result.data);
+      }
+    } catch (error) {
+      console.error(error);
+    } 
+  };
+
+  // 获取预案列表
+  const getDocInfo = async () => {
+    try {
+      const result = await httpget(apiurl.sy.ya.document);
+      if (result.code === 200) {
+        setDocList(result.data);
+      }
+    } catch (error) {
+      console.error(error);
+    } 
+  };
+
+  const getDutyList = () => {
+    const todayList = rotaInfo.today || [];
+    const nextDayList = rotaInfo.nextDay || [];
+
+    const formatDuty = (list, defaultDate) => {
+      const dateStr = list.length > 0 ? list[0].rotaDate : defaultDate;
+      const date = moment(dateStr).format('MM-DD');
+      const leader = list.find(item => item.rotaType === 1)?.userName || '无';
+      const staff = list.filter(item => item.rotaType === 2).map(i => i.userName).join('、') || '无';
+      return { date, leader, staff };
+    };
+
+    return [
+      formatDuty(todayList, moment().format('YYYY-MM-DD')),
+      formatDuty(nextDayList, moment().add(1, 'days').format('YYYY-MM-DD'))
+    ];
+  };
+  
+  const dutyData = getDutyList();
+
+  const handlePreview = (item) => {
+    const file = item?.files?.[0];
+    if (!file || !item.fileName) return;
+        const fileName = file.fileName;
+        const fileId = file.fileId;
+        const extension = fileName.split('.').pop().toLowerCase();
+        const downloadUrl = `/gunshiApp/ss/resPlanB/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)
+        }
+  };
+
+  useEffect(() => {
+    getRotaInfo()
+    getDocInfo()
+  }, [])
+  
+
+  return (
+    <div className="plan-section">
+      {/* Section 1: Duty Info */}
+      <div className="section-header">
+        <div className="title-wrapper">
+          <img src={arrowIcon} alt="arrow" className="arrow-icon" />
+          <span className="section-title">值班信息</span>
+        </div>
+      </div>
+
+      <div className="duty-info">
+        {dutyData.map((item, index) => (
+          <div key={index} className="duty-card">
+            <div className="date-box" style={{ backgroundImage: `url(${smallCard})` }}>
+              {item.date}
+            </div>
+            <div className="staff-info">
+              <div className="staff-item">
+                <img src={resperson} alt="leader" className="avatar" />
+                <div className="info-text">
+                  <span className="role">值班领导</span>
+                  <span className="name">{item.leader}</span>
+                </div>
+              </div>
+              <div className="staff-item">
+                <img src={resperson} alt="staff" className="avatar" />
+                <div className="info-text">
+                  <span className="role">值班人员</span>
+                  <span className="name">{item.staff}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Section 2: Scheme Materials */}
+      <div className="section-header">
+        <div className="title-wrapper">
+          <img src={arrowIcon} alt="arrow" className="arrow-icon" />
+          <span className="section-title">方案资料</span>
+        </div>
+      </div>
+
+      <div className="scheme-list">
+        {docList.map((item, index) => {
+          const isPlan = item.type === 1;
+          const typeText = isPlan ? '防汛预案' : '调度规程';
+          const colorClass = isPlan ? 'orange' : 'blue';
+          
+          return (
+            <div key={item.id || index} className="scheme-item">
+              <div className={`tag ${colorClass}`}>
+                {typeText}
+              </div>
+              <div 
+                className="doc-name" 
+                onClick={() => handlePreview(item)}
+                title={item.planName}
+              >
+                {item.planName}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* PDF Viewer */}
+      {pdfInfo.visible && (
+        <PdfView
+          visible={pdfInfo.visible}
+          onClose={() => setPdfInfo({ ...pdfInfo, visible: false })}
+          title={pdfInfo.title}
+          fileId={pdfInfo.fileId}
+          url="/gunshiApp/ss/resPlanB/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>
+  );
+};
+
+export default PlanSection;

src/views/Home/components/Business/SiYu/components/PlanSection/index.less

@@ -0,0 +1,145 @@
+.plan-section {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+ .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+
+      .title-wrapper {
+        display: flex;
+        align-items: center;
+        
+        .arrow-icon {
+          width: 20px;
+          height: 18px;
+          margin-right: 8px;
+          object-fit: contain;
+        }
+
+        span {
+          font-size: 14px;
+          color: #fff;
+          text-shadow: 0 0 5px rgba(0, 160, 233, 0.5);
+        }
+      }
+    }
+
+  .duty-info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    .duty-card {
+      display: flex;
+      align-items: center;
+      width: 48%;
+
+      .date-box {
+        width: 60px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        margin-right: 10px;
+        font-size: 14px;
+        color: #fff;
+        // font-weight: bold;
+        padding: 0 5px;
+        white-space: nowrap;
+      }
+
+      .staff-info {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        gap: 5px;
+        // height: 80px;
+
+        .staff-item {
+          display: flex;
+          align-items: center;
+
+          .avatar {
+            width: 30px;
+            height: 30px;
+            margin-right: 8px;
+            object-fit: contain;
+          }
+
+          .info-text {
+            display: flex;
+            flex-direction: column;
+
+            .role {
+              font-size: 14px;
+              color: rgba(255, 255, 255);
+            }
+
+            .name {
+              font-size: 14px;
+              color: #00eaff;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .scheme-list {
+    overflow-y: auto;
+    max-height: 120px;
+    .scheme-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+
+      .tag {
+        width: 80px;
+        height: 28px;
+        line-height: 28px;
+        text-align: center;
+        color: #fff;
+        font-size: 13px;
+        margin-right: 15px;
+        flex-shrink: 0;
+
+        &.blue {
+          background: #1890ff;
+        }
+
+        &.orange {
+          background: #fa8c16;
+        }
+      }
+
+      .doc-name {
+        flex: 1;
+        font-size: 14px;
+        color: #00eaff;
+        cursor: pointer;
+        text-decoration: underline;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &:hover {
+          color: #fff;
+        }
+      }
+    }
+  }
+}

src/views/Home/components/Business/SiYu/components/WarningSection/index.js

@@ -0,0 +1,164 @@
+import React, { useState } from 'react';
+import selectedBg from '@/assets/images/modal/selected.png';
+import skbg from '@/assets/images/card/skbg.png';
+import gth from '@/assets/images/card/gth.png';
+import syl from '@/assets/images/card/syl.png';
+import wy from '@/assets/images/card/wy.png';
+import './index.less';
+
+const WarningSection = ({ type = 'monitor' }) => {
+  const [activeTab, setActiveTab] = useState('water'); // 'water' or 'safety' for monitor; 'flood' or 'weather' for forecast
+
+  // Mock Data
+  const waterWarnings = [
+    {
+      id: 1,
+      name: '双石水库',
+      limitLevel: '108.89',
+      currentLevel: '109.09',
+      exceedance: '0.20',
+      time: '2025-10-28 09:00:00'
+    }
+  ];
+
+  const safetyMonitorItems = [
+    { label: '渗压监测', value: 2, icon: syl },
+    { label: '渗流监测', value: 1, icon: syl },
+    { label: '位移监测', value: 0, icon: wy }
+  ];
+
+  const floodWarnings = [
+    {
+      id: 1,
+      message: '根据上游流量站实测和产汇流预测结果，未来24小时预计总入库564.2万m³，平均入库流量65.2m³/s，达到橙色预警级别。',
+      time: '2025-10-28 08:10:00'
+    }
+  ];
+
+  const weatherWarnings = [
+    {
+      id: 1,
+      title: '赤壁市气象台发布暴雨红色预警[Ⅰ级/特别...',
+      time: '2025-07-28 06:35:30',
+      content: '赤壁市2025年08月10日07时33分08秒发布暴雨红色预警信号：过去3小时最大降水出现在XXXXX为71毫米。受强降雨云团持续影响，预计未来3小时，上述地区及周边乡镇仍将有50-80毫米的降雨，累计雨量可达150毫米以上，局地阵风7-9级。城乡积涝、山区山洪、地质灾害、中小河流洪水风险极高，请特别加强防范。'
+    }
+  ];
+
+  const renderContent = () => {
+    if (type === 'monitor') {
+      if (activeTab === 'water') {
+        return (
+          <div className="warning-list">
+            {waterWarnings.map((item) => (
+              <div key={item.id} className="warning-item">
+                <div className="item-header">
+                  <img src={gth} alt="warning" className="warning-icon" />
+                  <div className="item-title" style={{ backgroundImage: `url(${skbg})` }}>{item.name}</div>
+                </div>
+                <div className="item-content">
+                  <p>水库汛限水位 {item.limitLevel} m。</p>
+                  <p>实时监测水位 {item.currentLevel} m，超出汛限水位 <span className="highlight"> {item.exceedance} m</span></p>
+                  <div className="item-time">{item.time}</div>
+                </div>
+                <div className="divider" />
+              </div>
+            ))}
+          </div>
+        );
+      } else {
+        return (
+          <div className="safety-monitor-view">
+             {safetyMonitorItems.map((item, index) => (
+               <div key={index} className="monitor-item">
+                 <div className="monitor-value" style={{ color: item.value > 0 ? '#ff4d4f' : '#fff' }}>{item.value}</div>
+                 <img src={item.icon} alt={item.label} className="monitor-icon" />
+                 <div className="monitor-label">{item.label}</div>
+               </div>
+             ))}
+          </div>
+        );
+      }
+    } else {
+      // Forecast Warning
+      if (activeTab === 'flood') {
+        return (
+           <div className="warning-list">
+             {floodWarnings.map(item => (
+               <div key={item.id} className="warning-item">
+                 <div className="item-content full-width">
+                   <div className="warning-text-wrapper">
+                      <img src={gth} alt="warning" className="warning-icon-inline" />
+                      <span className="warning-text">{item.message}</span>
+                   </div>
+                   <div className="item-time" style={{marginLeft:25,marginTop:0}}>预报时间：{item.time}</div>
+                 </div>
+                  <div className="divider" />
+               </div>
+             ))}
+           </div>
+        )
+      } else {
+         return (
+          <div className="warning-list">
+            {weatherWarnings.map(item => (
+              <div key={item.id} className="warning-item">
+                 <div className="item-header weather-header">
+                    <img src={gth} alt="rainstorm" className="weather-icon" /> 
+                    <div className="item-title" title={item.title} style={{ backgroundImage: `url(${skbg})`,paddingLeft:38 }}>{item.title}</div>
+                 </div>
+                 <div className="item-time weather-time">{item.time}</div>
+                 <div className="item-content weather-content">
+                    {item.content}
+                 </div>
+              </div>
+            ))}
+          </div>
+         )
+      }
+    }
+  };
+
+  const getTabs = () => {
+    if (type === 'monitor') {
+      return [
+        { key: 'water', label: `水库水情 (${waterWarnings.length})` },
+        { key: 'safety', label: `安全监测 (${safetyMonitorItems.reduce((acc, cur) => acc + cur.value, 0)})` } // Sum of values or just count of items? Design shows (3) which matches items count 3. Let's use 3.
+      ];
+    } else {
+      return [
+        { key: 'flood', label: `洪水预报 (${floodWarnings.length})` },
+        { key: 'weather', label: `气象预报 (${weatherWarnings.length})` }
+      ];
+    }
+  };
+
+  // Reset active tab when type changes
+  React.useEffect(() => {
+    setActiveTab(type === 'monitor' ? 'water' : 'flood');
+  }, [type]);
+
+  const tabs = getTabs();
+
+  return (
+    <div className="warning-section">
+      {/* Tabs */}
+      <div className="tabs-container">
+        {tabs.map(tab => (
+           <div
+            key={tab.key}
+            className={`tab-item ${activeTab === tab.key ? 'active' : ''}`}
+            onClick={() => setActiveTab(tab.key)}
+            style={activeTab === tab.key ? { backgroundImage: `url(${selectedBg})` } : {}}
+          >
+            {tab.label}
+          </div>
+        ))}
+      </div>
+
+      {/* Content */}
+      {renderContent()}
+    </div>
+  );
+};
+
+export default WarningSection;

src/views/Home/components/Business/SiYu/components/WarningSection/index.less

@@ -0,0 +1,184 @@
+.warning-section {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  .tabs-container {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 10px;
+    padding: 0 10px;
+
+    .tab-item {
+      flex: 1;
+      text-align: center;
+      padding: 3px 0;
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.6);
+      cursor: pointer;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      transition: all 0.3s;
+      // margin: 0 5px;
+
+      &.active {
+        color: #fff;
+        text-shadow: 0 0 10px #00a0e9;
+        border: none;
+      }
+      
+      &:hover {
+        color: #fff;
+      }
+    }
+  }
+
+  .warning-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 10px;
+    max-height: 180px;
+
+    .warning-item {
+      margin-bottom: 15px;
+      
+      .item-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+
+        .warning-icon {
+          width: 24px;
+          height: 24px;
+          margin-right: 10px;
+          flex-shrink: 0;
+        }
+
+        .weather-icon {
+          width: 40px;
+          height: 30px;
+          margin-right: 10px;
+          flex-shrink: 0;
+        }
+
+        .item-title {
+          width: 180px;
+          font-size: 16px;
+          color: #fff;
+          padding: 2px 20px 2px 20px;
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        &.weather-header {
+            .item-title {
+                width: 100%;
+            }
+        }
+      }
+
+      .item-content {
+        padding-left: 34px; /* Align with title (icon width + margin) */
+        
+        &.full-width {
+            padding-left: 0;
+        }
+
+        &.weather-content {
+            padding-left: 0;
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.9);
+            line-height: 1.5;
+            text-indent: 2em;
+        }
+        
+        .warning-text-wrapper {
+            display: flex;
+            align-items: flex-start;
+            margin-bottom: 5px;
+
+            .warning-icon-inline {
+                width: 20px;
+                height: 20px;
+                margin-right: 8px;
+                flex-shrink: 0;
+                margin-top: 2px;
+            }
+
+            .warning-text {
+                font-size: 14px;
+                color: rgba(255, 255, 255, 0.9);
+                line-height: 1.5;
+            }
+        }
+
+        p {
+          margin: 0 0 5px 0;
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.9);
+          line-height: 1.5;
+
+          .highlight {
+            color: #ff4d4f; /* Red for warning values */
+            font-weight: bold;
+          }
+        }
+
+        .item-time {
+          margin-top: 5px;
+          font-size: 14px;
+          color: rgba(255, 255, 255);
+        }
+        
+        .weather-time {
+             padding-left: 50px;
+             margin-bottom: 5px;
+             margin-top: -5px;
+        }
+      }
+
+      .divider {
+        margin-top: 10px;
+        height: 1px;
+        background: repeating-linear-gradient(to right, rgba(0, 160, 233, 0.5) 0, rgba(0, 160, 233, 0.5) 5px, transparent 5px, transparent 10px);
+      }
+    }
+  }
+
+  .safety-monitor-view {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      padding: 20px 10px;
+      height: 100%;
+      
+      .monitor-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          .monitor-value {
+              font-size: 24px;
+              font-weight: bold;
+          }
+
+          .monitor-icon {
+              width: 80px;
+              height: 60px;
+              margin-bottom: 10px;
+              object-fit: contain;
+          }
+
+          .monitor-label {
+              font-size: 14px;
+              color: #fff;
+          }
+      }
+  }
+}

src/views/Home/components/Business/SiYu/components/WaterRainSection/index.js

@@ -0,0 +1,256 @@
+import React, { useState, useEffect } from 'react';
+import { Table } from 'antd';
+import selectedBg from '@/assets/images/modal/selected.png';
+import apiurl from '@/service/apiurl';
+import { httpget } from '@/utils/request';
+import CommonModal from '@/views/Home/components/UI/CommonModal';
+import RightPanel from '../../../SiQuan/components/ModalComponents/AllWeatherModal/RainMonitor/RightPanel';
+import ReservoirPanel from '../../../SiQuan/components/ModalComponents/AllWeatherModal/ReservoirPanel';
+import FlowPanel from '../../../SiQuan/components/ModalComponents/AllWeatherModal/FlowPanel';
+import './index.less';
+
+const WaterRainSection = () => {
+  const [activeTab, setActiveTab] = useState('rain');
+  const [dataList, setDataList] = useState([]);
+  const [loading, setLoading] = useState(false);
+  
+  // Detail Modal State
+  const [detailVisible, setDetailVisible] = useState(false);
+  const [selectedItem, setSelectedItem] = useState(null);
+
+  const tabs = [
+    { key: 'rain', label: '实时雨情' },
+    { key: 'reservoir', label: '实时水库水情' },
+    { key: 'flow', label: '出入库流量' }
+  ];
+
+  // Fetch Data Functions
+  const getRainList = async () => {
+    setLoading(true);
+    try {
+      const result = await httpget(apiurl.sy.sssyq.reservoir);
+      if (result.code === 200) {
+        setDataList(result.data);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getReservoirList = async () => {
+    setLoading(true);
+    try {
+      const result = await httpget(apiurl.sy.sssyq.rain);
+      if (result.code === 200) {
+        setDataList(result.data);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getFlowList = async () => {
+    setLoading(true);
+    try {
+      const result = await httpget(apiurl.sy.sssyq.flow);
+      if (result.code === 200) {
+        setDataList(result.data);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    setDataList([]);
+    if (activeTab === 'rain') {
+      getRainList();
+    } else if (activeTab === 'reservoir') {
+      getReservoirList();
+    } else if (activeTab === 'flow') {
+      getFlowList();
+    }
+  }, [activeTab]);
+
+  // Columns Definitions
+  const rainColumns = [
+    {
+      title: '站点名称',
+      dataIndex: 'stnm',
+      key: 'stnm',
+      align: 'center',
+      width: 120,
+      ellipsis: true
+    },
+    {
+      title: '今日',
+      dataIndex: 'todayDrp',
+      key: 'todayDrp',
+      align: 'center',
+      render: (text) => text ?? '-' 
+    },
+    {
+      title: '昨日',
+      dataIndex: 'yesterdayDrp',
+      key: 'yesterdayDrp',
+      align: 'center',
+      render: (text) => text ?? '-' 
+    },
+    {
+      title: '24h',
+      dataIndex: 'drp24',
+      key: 'drp24',
+      align: 'center',
+      render: (text) => text ?? '-' 
+    },
+    {
+      title: '48h',
+      dataIndex: 'drp48', // Assuming API has this, otherwise mock/calc
+      key: 'drp48',
+      align: 'center',
+      render: (text) => text ?? '-' 
+    },
+    {
+      title: '72h',
+      dataIndex: 'drp72', // Assuming API has this
+      key: 'drp72',
+      align: 'center',
+      render: (text) => text ?? '-' 
+    }
+  ];
+
+  const reservoirColumns = [
+    {
+      title: '站点名称',
+      dataIndex: 'stnm',
+      key: 'stnm',
+      align: 'center',
+      width: 120,
+      ellipsis: true
+    },
+    {
+      title: '实时水位(m)',
+      dataIndex: 'rz',
+      key: 'rz',
+      align: 'center',
+      render: (text) => text ?? '-' 
+    },
+    {
+      title: '监测时间',
+      dataIndex: 'tm',
+      key: 'tm',
+      align: 'center',
+      width: 140,
+      render: (text) => text ? text.substring(5, 16) : '-' // Format: MM-DD HH:mm
+    }
+  ];
+
+  const flowColumns = [
+    {
+      title: '站点名称',
+      dataIndex: 'stnm',
+      key: 'stnm',
+      align: 'center',
+      width: 120,
+      ellipsis: true
+    },
+    {
+      title: '实时流量(m³/s)',
+      dataIndex: 'q',
+      key: 'q',
+      align: 'center',
+    },
+    {
+      title: '监测时间',
+      dataIndex: 'tm',
+      key: 'tm',
+      align: 'center',
+      width: 140,
+      render: (text) => text ? text.substring(5, 16) : '-' // Format: MM-DD HH:mm
+    }
+  ];
+
+  const getColumns = () => {
+    switch (activeTab) {
+      case 'rain': return rainColumns;
+      case 'reservoir': return reservoirColumns;
+      case 'flow': return flowColumns;
+      default: return [];
+    }
+  };
+
+  const handleRowClick = (record) => {
+    setSelectedItem(record);
+    setDetailVisible(true);
+  };
+
+  const renderModalContent = () => {
+    if (!selectedItem) return null;
+
+    if (activeTab === 'rain') {
+      return <RightPanel stcd={selectedItem.stcd} cleanMode={true} />;
+    } else if (activeTab === 'reservoir') {
+      return <ReservoirPanel stcd={selectedItem.stcd} cleanMode={true} />;
+    } else if (activeTab === 'flow') {
+      return <FlowPanel stcd={selectedItem.stcd} cleanMode={true} />;
+    }
+    return null;
+  };
+
+  const getModalTitle = () => {
+      if(activeTab === 'rain') return selectedItem?.stnm || '雨情详情';
+      if(activeTab === 'reservoir') return selectedItem?.stnm || '水库详情';
+      if(activeTab === 'flow') return selectedItem?.stnm || '流量详情';
+      return '详情';
+  }
+
+  return (
+    <div className="water-rain-section">
+      <div className="tabs-container">
+        {tabs.map(tab => (
+          <div
+            key={tab.key}
+            className={`tab-item ${activeTab === tab.key ? 'active' : ''}`}
+            onClick={() => setActiveTab(tab.key)}
+            style={activeTab === tab.key ? { backgroundImage: `url(${selectedBg})` } : {}}
+          >
+            {tab.label}
+          </div>
+        ))}
+      </div>
+
+      <div className="content-list">
+        {activeTab === 'rain' && <div className="unit-label">单位：mm</div>}
+        <Table
+          columns={getColumns()}
+          dataSource={dataList}
+          pagination={false}
+          size="small"
+          rowKey="stcd"
+          loading={loading}
+          scroll={{ y: 200 }}
+          onRow={(record) => ({
+            onClick: () => handleRowClick(record)
+          })}
+        />
+      </div>
+
+      <CommonModal
+        title={getModalTitle()}
+        visible={detailVisible}
+        onClose={() => setDetailVisible(false)}
+        width={"80%"}
+      >
+        {renderModalContent()}
+      </CommonModal>
+    </div>
+  );
+};
+
+export default WaterRainSection;

src/views/Home/components/Business/SiYu/components/WaterRainSection/index.less

@@ -0,0 +1,96 @@
+.water-rain-section {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  .tabs-container {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 10px;
+    padding: 0 10px;
+
+    .tab-item {
+      flex: 1;
+      text-align: center;
+      padding: 3px 0;
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.6);
+      cursor: pointer;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      transition: all 0.3s;
+      margin: 0 5px;
+
+      &.active {
+        color: #fff;
+        text-shadow: 0 0 10px #00a0e9;
+        border: none;
+      }
+      
+      &:hover {
+        color: #fff;
+      }
+    }
+  }
+
+  .content-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 5px;
+
+    // Scrollbar styling
+    &::-webkit-scrollbar {
+        width: 4px;
+    }
+    &::-webkit-scrollbar-thumb {
+        background: rgba(0, 160, 233, 0.5);
+        border-radius: 2px;
+    }
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    .unit-label {
+        text-align: right;
+        color: rgba(255,255,255,0.7);
+        font-size: 12px;
+        margin-bottom: 5px;
+        padding-right: 10px;
+    }
+
+    .ant-table-wrapper {
+      .ant-table {
+        background: transparent;
+        color: #fff;
+
+        .ant-table-thead > tr > th {
+          background: rgba(0, 70, 110, 0.6);
+          color: #fff;
+          border-bottom: none;
+          padding: 8px 4px;
+          text-align: center;
+          font-size: 13px;
+        }
+
+        .ant-table-tbody > tr > td {
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+          color: #fff;
+          padding: 8px 4px;
+          text-align: center;
+          font-size: 13px;
+        }
+
+        .ant-table-tbody > tr:hover > td {
+            background: rgba(0, 160, 233, 0.1) !important;
+        }
+        
+        .ant-empty-normal {
+             color: rgba(255,255,255,0.5); 
+        }
+      }
+    }
+  }
+}

src/views/Home/components/Business/SiYu/index.js

@@ -1,56 +1,99 @@
-import React from 'react';
+import React,{useState} from 'react';
+import { useSelector } from 'react-redux';
 import CommonCard from '../../UI/CommonCard';
 import ThreeDots from '../../UI/ThreeDots';
+import CommonModal from '../../UI/CommonModal';
+import WarningSection from './components/WarningSection';
+import WaterRainSection from './components/WaterRainSection';
+import PlanSection from './components/PlanSection';
+import AllWeatherModal from '../SiQuan/components/ModalComponents/AllWeatherModal';
 import './index.less';
 
 
-const WarningToggles = () => {
-    return (
-        <div className="warning-toggles">
-            <div className="toggle-item active">
-                <span>监测预警</span>
-                <span className="badge">4</span>
-            </div>
-            <div className="toggle-item">
-                <span>预报预警</span>
-                <span className="badge bg-red">2</span>
-            </div>
-        </div>
-    )
+const WarningToggles = ({ activeType, onToggle }) => {
+  return (
+    <div className="warning-toggles">
+      <div
+        className={`toggle-item ${activeType === 'monitor' ? 'active' : ''}`}
+        onClick={() => onToggle('monitor')}
+      >
+        <span>监测预警</span>
+        <span className="badge">4</span>
+      </div>
+      <div
+        className={`toggle-item ${activeType === 'forecast' ? 'active' : ''}`}
+        onClick={() => onToggle('forecast')}
+      >
+        <span>预报预警</span>
+        <span className="badge bg-red">2</span>
+      </div>
+    </div>
+  )
 }
 
 const SiYu = () => {
+  const showPanels = useSelector(s => s.runtime.showPanels);
+  const [warningType, setWarningType] = useState('monitor');
+  const [modalVisible, setModalVisible] = useState(false);
+  const [activeTab, setActiveTab] = useState('rain');
+
+  const tabsAllWeather = [
+    { label: '雨情监测', value: 'rain' },
+    { label: '水库水情', value: 'reservoir' },
+    { label: '出入库流量', value: 'flow' },
+    { label: '安全监测', value: 'safety' },
+  ];
+
+  const handleOpenModal = () => {
+    setActiveTab('rain');
+    setModalVisible(true);
+  };
+
   return (
     <div className="siyu-view">
-          <div className="side-panel left">
-              <CommonCard title="预报" className="panel-card card-1">
-                <div className="placeholder-content">内容填充区域</div>
-             </CommonCard>
-             <CommonCard title="预演" className="panel-card card-2">
-                <div className="placeholder-content">内容填充区域</div>
-             </CommonCard>
-        </div>
-        
-          <div className="side-panel right">
-               <CommonCard 
-                title="预警" 
-                className="panel-card card-1"
-                headerExtra={<WarningToggles />}
-             >
-                <div className="placeholder-content">内容填充区域</div>
-             </CommonCard>
-              <CommonCard 
-                title="实时水雨情" 
-                className="panel-card card-2"
-                headerExtra={<ThreeDots onClick={() => console.log('实时水雨情 clicked')} />}
-             >
-                <div className="placeholder-content">内容填充区域</div>
-             </CommonCard>
-            
-             <CommonCard title="预案" className="panel-card card-3">
-                <div className="placeholder-content">内容填充区域</div>
-             </CommonCard>
+      <div className={`side-panel left ${!showPanels ? 'hidden' : ''}`}>
+        <CommonCard title="预报" className="panel-card card-1">
+          <div className="placeholder-content">内容填充区域</div>
+        </CommonCard>
+        <CommonCard title="预演" className="panel-card card-2">
+          <div className="placeholder-content">内容填充区域</div>
+        </CommonCard>
+      </div>
+
+      <div className={`side-panel right ${!showPanels ? 'hidden' : ''}`}>
+        <CommonCard
+          title="预警"
+          className="panel-card card-1"
+          headerExtra={<WarningToggles activeType={warningType} onToggle={setWarningType} />}
+        >
+          <WarningSection type={warningType} />
+        </CommonCard>
+        <CommonCard
+          title="实时水雨情"
+          className="panel-card card-2"
+          headerExtra={<ThreeDots onClick={handleOpenModal} />}
+        >
+          <WaterRainSection />
+        </CommonCard>
+
+        <CommonCard title="预案" className="panel-card card-3">
+          <PlanSection />
+        </CommonCard>
+      </div>
+
+      <CommonModal
+        visible={modalVisible}
+        onClose={() => setModalVisible(false)}
+        title="实时水雨情"
+        tabs={tabsAllWeather}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        width={'90%'}
+      >
+        <div style={{ color: '#fff', height: '100%' }}>
+           <AllWeatherModal active={activeTab} />
         </div>
+      </CommonModal>
     </div>
   );
 };

src/views/Home/components/Business/SiYu/index.less

@@ -11,7 +11,44 @@
   }
 
   .right {
-    .card-1 { flex: 1; }
+    .card-1 { 
+      flex: 1; 
+      
+      .warning-toggles {
+        display: flex;
+        align-items: center;
+        
+        .toggle-item {
+          display: flex;
+          align-items: center;
+          margin-left: 15px;
+          font-size: 14px;
+          color: rgba(255, 255, 255,0.7);
+          cursor: pointer;
+          transition: all 0.3s;
+          
+          &.active {
+            color: #fff;
+            text-shadow: 0 0 10px #00a0e9;
+          }
+
+          .badge {
+            display: inline-block;
+            min-width: 16px;
+            height: 16px;
+            line-height: 16px;
+            text-align: center;
+            background: #ff4d4f; /* Default red */
+            border-radius: 7px;
+            font-size: 12px;
+            color: #fff;
+            margin-left: 5px;
+            padding: 0 4px;
+            
+          }
+        }
+      }
+    }
     .card-2 { flex: 1; }
     .card-3 { flex: 1; }
   }

src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/index.js

@@ -0,0 +1,212 @@
+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 { download } from '@/utils/tools';
+import './index.less';
+
+const ImplementResponsibility = () => {
+  const types = {
+    1:"行政责任人",
+    2:"主管部门责任人",
+    3:"管理单位责任人",
+    4:"巡查责任人",
+    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 [trainFileData, setTrainFileData] = useState({})
+
+  // 获取大坝安全责任人
+  const getRespData = async () => {
+    try {
+      const { code, data } = await httpget(apiurl.sz.zrz.respPerson)
+      if (code == 200 && data.length > 0) {
+        const list = data.map(item => ({name:item.name,phone:item.contactInfo,role:types[item.type]}))
+        setRespData(list)
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+// 获取防汛安全责任人
+  const getFloodData = async () => {
+    try {
+      const { code, data } = await httpget(apiurl.sz.zrz.floodPerson)
+      if (code == 200 && data.length > 0) {
+        const list = data.map(item => ({name:item.name,phone:item.contactInfo,role:types[item.type]}))
+        setFloodData(list)
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  // 获取岗位培训
+  const getTrainData = async () => {
+    try {
+      const { code, data } = await httpget(apiurl.sz.zrz.train)
+      if (code == 200) {
+        setTrainData(data)
+        setTrainFileData(data?.latestPersonnelPlan?.files[0])
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+  const {trainingCount,hasTraining,hasNoTraining,totalTraining,latestPersonnelPlan} = trainData||{}
+  const trainingStats = [
+    { label: '培训计划', value: trainingCount??'-' },
+    { label: '已开展', value: hasTraining??'-' },
+    { label: '未开展', value: hasNoTraining??'-' },
+    { label: '参训总人次', value: totalTraining??'-' }
+  ];
+
+  const handleTrainingClick = () => {
+    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;
+
+  useEffect(() => {
+    if (activeTab === 'dam') {
+      getRespData()
+    } else {
+      getFloodData()
+    }
+  }, [activeTab])
+
+   useEffect(() => {
+    getTrainData()
+   }, [])
+   
+
+  return (
+    <div className="implement-responsibility">
+      {/* Top Tabs */}
+      <div className="tabs-container">
+        <div
+          className={`tab-item ${activeTab === 'dam' ? 'active' : ''}`}
+          onClick={() => setActiveTab('dam')}
+          style={activeTab === 'dam' ? { backgroundImage: `url(${selectedBg})` } : {}}
+        >
+          大坝安全责任人
+        </div>
+        <div
+          className={`tab-item ${activeTab === 'flood' ? 'active' : ''}`}
+          onClick={() => setActiveTab('flood')}
+          style={activeTab === 'flood' ? { backgroundImage: `url(${selectedBg})` } : {}}
+        >
+          防汛 “三个责任人”
+        </div>
+      </div>
+
+      {/* Person List */}
+      <div className="person-list">
+        {currentPersonList.map((person, index) => (
+          <div key={index} className="person-item">
+            <img src={resperson} alt="avatar" className="avatar" />
+            <span className="name">{person.name}</span>
+            <span className="phone">{person.phone}</span>
+            <div 
+              className="role-label" 
+              style={{ backgroundImage: `url(${smallCard})` }}
+              title={person.role}
+            >
+              {person.role}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Job Training Section */}
+      <div className="section-header">
+        <div className="title-wrapper">
+          <img src={arrowIcon} alt="arrow" className="arrow-icon" />
+          <span>岗位培训</span>
+        </div>
+      </div>
+
+      {/* Training Stats */}
+      <div className="training-stats">
+        {trainingStats.map((stat, index) => (
+          <div key={index} className="stat-item">
+            <span className="stat-value">{stat.value}</span>
+            <img src={qys} alt="icon" className="stat-icon" />
+            <span className="stat-label">{stat.label}</span>
+          </div>
+        ))}
+      </div>
+
+      {/* Latest Training Content */}
+      <div className="latest-training" style={{ backgroundImage: `url(${smallCard})` }}>
+        <span className="label">最新培训内容:</span>
+        <div 
+          className="value-box" 
+          onClick={handleTrainingClick}
+          title={trainFileData.fileName?.replace(/\.[^/.]+$/, '')}
+        >
+          {trainFileData.fileName?.replace(/\.[^/.]+$/, '')}
+        </div>
+      </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/"
+        />
+      )}
+
+      {/* 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>
+  );
+};
+
+export default ImplementResponsibility;

src/views/Home/components/Business/SiZhi/components/ImplementResponsibility/index.less

@@ -0,0 +1,173 @@
+.implement-responsibility {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  .tabs-container {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 10px;
+
+    .tab-item {
+      flex: 1;
+      text-align: center;
+      padding: 3px 0;
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.6);
+      cursor: pointer;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      transition: all 0.3s;
+
+      &.active {
+        color: #fff;
+        text-shadow: 0 0 10px #00a0e9;
+      }
+      
+      &:hover {
+        color: #fff;
+      }
+    }
+  }
+
+  .person-list {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+    margin-bottom: 10px;
+
+    .person-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 30%;
+
+      .avatar {
+        width: 40px;
+        height: 45px;
+        margin-bottom: 5px;
+      }
+
+      .name {
+        font-size: 14px;
+        color: #fff;
+        margin-bottom: 2px;
+      }
+
+      .phone {
+        font-size: 14px;
+        color: #fff;
+        margin-bottom: 5px;
+      }
+
+      .role-label {
+        width: 100%;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        color: #fff;
+        font-size: 14px;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+ .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+
+      .title-wrapper {
+        display: flex;
+        align-items: center;
+        
+        .arrow-icon {
+          width: 20px;
+          height: 18px;
+          margin-right: 8px;
+          object-fit: contain;
+        }
+
+        span {
+          font-size: 14px;
+          color: #fff;
+          text-shadow: 0 0 5px rgba(0, 160, 233, 0.5);
+        }
+      }
+    }
+
+  .training-stats {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+    margin-bottom: 15px;
+
+    .stat-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+
+      .stat-value {
+        font-size: 18px;
+        color: #00eaff;
+        font-weight: bold;
+        margin-bottom: -5px;
+        z-index: 1;
+      }
+
+      .stat-icon {
+        width: 100px;
+        height: 60px;
+        margin-bottom: 5px;
+      }
+
+      .stat-label {
+        font-size: 14px;
+        color: rgba(255, 255, 255);
+      }
+    }
+  }
+
+  .latest-training {
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    margin-top: auto;
+    margin-bottom: 10px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    .label {
+      font-size: 14px;
+      color: #fff;
+      margin-right: 10px;
+      white-space: nowrap;
+    }
+
+    .value-box {
+      flex: 1;
+      height: 30px;
+      line-height: 30px;
+      padding: 0 10px;
+      color: #00eaff;
+      font-size: 14px;
+      
+      cursor: pointer;
+      text-decoration: underline;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      
+      &:hover {
+        color: #fff;
+      }
+    }
+  }
+}

src/views/Home/components/Business/SiZhi/components/StrengthenRuleOfLaw/index.js

@@ -0,0 +1,369 @@
+import React, { useState,useEffect } from 'react';
+import ReactEcharts from 'echarts-for-react';
+import arrowIcon from '@/assets/images/card/arrow.png';
+import selectedBg from '@/assets/images/modal/selected.png';
+import YearSelect from '@/views/Home/components/UI/YearSelect';
+import PdfView from '@/views/Home/components/UI/PdfView';
+import { FileTextOutlined } from '@ant-design/icons';
+import apiurl from '@/service/apiurl';
+import { httppost, httpget } from '@/utils/request';
+import { Empty } from 'antd';
+import './index.less';
+import moment from 'moment';
+
+const StrengthenRuleOfLaw = () => {
+  const params = {
+    pageSo:{ pageSize: 9999, pageNumber: 1 }
+  }
+  const [activeTab, setActiveTab] = useState('laws');
+  const [lawData, setLawData] = useState([]);
+  const [systemData, setSystemData] = useState([]);
+  const [year, setYear] = useState(moment().format('YYYY'));
+  const [pdfInfo, setPdfInfo] = useState({ visible: false, title: '', fileId: '' });
+
+  // 获取法律法规文件
+  const lawsFiles = async () => {
+    try {
+      const { code, data } = await httppost(apiurl.sz.qhfz.lawPage, params)
+      if (code == 200) {
+        const list = data?.records.map(item => {
+          if (item?.files?.length === 0) {
+            return []
+          }
+          return { name: item?.files[0]?.fileName?.replace(/\.pdf$/i, ''), fileId: item?.files[0]?.fileId }
+        }).flat()
+        setLawData(list)
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+   // 获取系统文件
+  const systemFiles = async () => {
+    try {
+      const { code, data } = await httppost(apiurl.sz.qhfz.systemPage, params)
+      if (code == 200) {
+        const list = data?.records.map(item => {
+          if (item?.files?.length === 0) {
+            return []
+          }
+          return { name: item?.files[0]?.fileName?.replace(/\.pdf$/i, ''), fileId: item?.files[0]?.fileId }
+        }).flat()
+        
+        setSystemData(list)
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  const [chartData, setChartData] = useState([]);
+  const [selectedPieItem, setSelectedPieItem] = useState(null);
+  const [startAngle, setStartAngle] = useState(90);
+  
+  const typeMapping = {
+    0: { name: '违建', color: '#1890ff' },
+    1: { name: '毁林垦荒', color: '#00eaff' },
+    2: { name: '筑坝拦汊', color: '#3155fb' },
+    3: { name: '填占库容', color: '#bcebf7' },
+    4: { name: '违法取水', color: '#00d085' },
+    5: { name: '其他', color: '#1890ff' },
+  };
+
+  // 获取水政执法数据  0:违建,1:毀林垦荒,2:筑坝拦汊,3:填占库容,4:违法取水,5:其他
+  const caseList = async (params) => {
+    try {
+      const { code, data } = await httppost(apiurl.sz.qhfz.caseSta, params)
+      if (code == 200) {
+        if (!data || data.length === 0) {
+          setChartData([]);
+          return;
+        }
+        
+        const newChartData = data.map(item => {
+          const typeInfo = typeMapping[item.type] || { name: '未知', color: '#ccc' };
+          return {
+            name: typeInfo.name,
+            value: item.count,
+            color: typeInfo.color
+          };
+        });
+        setChartData(newChartData);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  } 
+
+  const total = chartData.reduce((acc, cur) => acc + cur.value, 0);
+
+  const getOption = () => {
+    let centerName = '案件总数';
+    let centerValue = total;
+    let centerPercent = '100%';
+
+    if (selectedPieItem) {
+      centerName = selectedPieItem.name;
+      centerValue = selectedPieItem.value;
+      centerPercent = selectedPieItem.percent;
+    } else if (chartData.length === 1) {
+      centerName = chartData[0].name;
+    }
+
+    return {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c} ({d}%)'
+    },
+    series: [
+      {
+        name: '水政执法-外圈',
+        type: 'pie',
+        radius: ['52%', '94%'],
+        center: ['50%', '50%'],
+        startAngle: startAngle,
+        avoidLabelOverlap: false,
+        label: {
+          show: true,
+          position: 'inside',
+          formatter: '{b}',
+          color: '#fff',
+          fontSize: 10
+        },
+        itemStyle: {
+          opacity: 0.4
+        },
+        data: chartData.map(item => ({
+          value: item.value,
+          name: item.name,
+          itemStyle: { color: item.color }
+        }))
+      },
+      {
+        name: '水政执法-内圈',
+        type: 'pie',
+        radius: ['60%', '70%'],
+        center: ['50%', '50%'],
+        startAngle: startAngle,
+        avoidLabelOverlap: false,
+        label: {
+          show: true,
+          position: 'center',
+          formatter: () => `{name|${centerName}}\n{value|${centerValue}}\n{percent|${centerPercent}}`,
+          rich: {
+            name: {
+              fontSize: 12,
+              color: 'rgba(255,255,255,0.6)',
+              lineHeight: 16
+            },
+            value: {
+              fontSize: 14,
+              color: '#fff',
+              fontWeight: 'bold',
+              lineHeight: 20
+            },
+            percent: {
+              fontSize: 12,
+              color: '#fff',
+              lineHeight: 16
+            }
+          }
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: '14',
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: chartData.map(item => ({
+          value: item.value,
+          name: item.name,
+          itemStyle: { color: item.color }
+        }))
+      }
+    ]
+  }};
+
+  const onChartClick = (params) => {
+    if (params.componentType !== 'series') return;
+    
+    const { name, value, dataIndex } = params;
+    
+    // Toggle selection
+    if (selectedPieItem && selectedPieItem.name === name) {
+      setSelectedPieItem(null);
+      setStartAngle(90); 
+      return;
+    }
+
+    let sumBefore = 0;
+    for (let i = 0; i < dataIndex; i++) {
+      sumBefore += chartData[i].value;
+    }
+    
+    const offset = (sumBefore + value / 2) / total * 360;
+    const newStartAngle = 90 + offset;
+    
+    setStartAngle(newStartAngle);
+    setSelectedPieItem({
+      name,
+      value,
+      percent: ((value / total) * 100).toFixed(0) + '%'
+    });
+  };
+
+  const handleItemClick = (item) => {
+    setPdfInfo({
+      visible: true,
+      title: item.name,
+      fileId: item.fileId
+    });
+  };
+
+  useEffect(() => {
+    if (chartData && chartData.length > 0) {
+      const totalVal = chartData.reduce((acc, cur) => acc + cur.value, 0);
+      const firstItem = chartData[0];
+      const value = firstItem.value;
+      
+      const offset = (value / 2) / totalVal * 360;
+      const newStartAngle = 90 + offset;
+      
+      setStartAngle(newStartAngle);
+      setSelectedPieItem({
+        name: firstItem.name,
+        value: value,
+        percent: ((value / totalVal) * 100).toFixed(0) + '%'
+      });
+    } else {
+      setSelectedPieItem(null);
+      setStartAngle(90);
+    }
+  }, [chartData]);
+
+  useEffect(() => {
+    if (activeTab == 'laws') {
+      lawsFiles()
+    } else {
+      systemFiles()
+    }
+  }, [activeTab])
+  useEffect(() => {
+    if (year) {
+      const params = {
+        stm: moment(year).format('YYYY-01-01 00:00:00'),
+        etm: moment(year).format('YYYY-12-31 23:59:59'),
+      }
+      caseList(params)
+    }
+    }, [year])
+  return (
+    <div className="strengthen-rule-of-law">
+      {/* Top Tabs */}
+      <div className="tabs-container">
+        <div
+          className={`tab-item ${activeTab === 'laws' ? 'active' : ''}`}
+          onClick={() => setActiveTab('laws')}
+          style={activeTab === 'laws' ? { backgroundImage: `url(${selectedBg})` } : {}}
+        >
+          法律法规
+        </div>
+        <div
+          className={`tab-item ${activeTab === 'system' ? 'active' : ''}`}
+          onClick={() => setActiveTab('system')}
+          style={activeTab === 'system' ? { backgroundImage: `url(${selectedBg})` } : {}}
+        >
+          制度管理
+        </div>
+      </div>
+
+      {/* List Content */}
+      <div className="list-content">
+        {(activeTab === 'laws' ? lawData : systemData).length > 0 ? (
+          (activeTab === 'laws' ? lawData : systemData).map((item, index) => (
+            <div key={index} className="list-item" onClick={() => handleItemClick(item)}>
+              <div className="icon-wrapper">
+                <FileTextOutlined style={{ color: '#1890ff', fontSize: '16px' }} />
+              </div>
+              <span className="text">{item.name}</span>
+            </div>
+          ))
+        ) : (
+          <div style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={<span style={{color:'#fff'}}>暂无数据</span>} />
+          </div>
+        )}
+      </div>
+
+      {/* Water Administration Law Enforcement */}
+      <div className="enforcement-section">
+        <div className="section-header">
+          <div className="title-wrapper">
+            <img src={arrowIcon} alt="arrow" className="arrow-icon" />
+            <span className="section-title">水政执法</span>
+          </div>
+          <YearSelect value={year} onChange={setYear} />
+        </div>
+        
+        <div className="chart-container">
+          <div className="chart-wrapper">
+            {chartData.length > 0 ? (
+                <ReactEcharts
+                option={getOption()}
+                style={{ height: '100%', width: '100%' }}
+                onEvents={{
+                    click: onChartClick
+                }}
+                />
+            ) : (
+                <div style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={<span style={{color:'#fff'}}>暂无数据</span>} />
+                </div>
+            )}
+          </div>
+          <div className="legend-wrapper">
+            {chartData.map((item, index) => (
+              <div 
+                key={index} 
+                className="legend-item"
+                onMouseEnter={() => {
+                    // Logic to highlight item if needed, currently main interaction is click on chart
+                    const fakeParams = {
+                        componentType: 'series',
+                        name: item.name,
+                        value: item.value,
+                        dataIndex: index
+                    };
+                    // Optional: trigger hover effect or selection
+                    // onChartClick(fakeParams); // This might be too aggressive on hover
+                }}
+              >
+                <div className="legend-color" style={{ backgroundColor: item.color }}></div>
+                <div className="legend-name">{item.name}</div>
+                <div className="legend-value">{item.value}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* PDF Viewer */}
+      {pdfInfo.visible && (
+        <PdfView
+          visible={pdfInfo.visible}
+          onClose={() => setPdfInfo({ ...pdfInfo, visible: false })}
+          title={pdfInfo.title}
+          fileId={pdfInfo.fileId}
+          url="/gunshiApp/ss/projectEvents/file/download/"
+        />
+      )}
+    </div>
+  );
+};
+
+export default StrengthenRuleOfLaw;

src/views/Home/components/Business/SiZhi/components/StrengthenRuleOfLaw/index.less

@@ -0,0 +1,161 @@
+.strengthen-rule-of-law {
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+
+  .tabs-container {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    
+    .tab-item {
+      flex: 1;
+      text-align: center;
+      padding: 3px 0;
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.6);
+      cursor: pointer;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      transition: all 0.3s;
+
+      &.active {
+        color: #fff;
+        text-shadow: 0 0 10px #00a0e9;
+      }
+      
+      &:hover {
+        color: #fff;
+      }
+    }
+  }
+
+  .list-content {
+    flex: 1;
+    overflow-y: auto;
+    margin-bottom: 15px;
+    max-height: 120px; /* Limit height to show scroll if needed, though items are few */
+
+    .list-item {
+      display: flex;
+      align-items: center;
+      padding: 8px 0;
+      cursor: pointer;
+      transition: background-color 0.3s;
+
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.05);
+        .text {
+            color: #00a0e9;
+            text-decoration: underline;
+        }
+      }
+
+      .icon-wrapper {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 10px;
+        background: rgba(24, 144, 255, 0.1);
+        border-radius: 4px;
+      }
+
+      .text {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.9);
+      }
+    }
+  }
+
+  .enforcement-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0; /* Add this to allow flex container to shrink properly */
+
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+      flex-shrink: 0;
+
+      .title-wrapper {
+        display: flex;
+        align-items: center;
+        
+        .arrow-icon {
+          width: 20px;
+          height: 18px;
+          margin-right: 8px;
+          object-fit: contain;
+        }
+
+      
+      }
+    }
+
+    .chart-container {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      min-height: 0; /* Critical for nested flex scrolling/sizing */
+      
+      .chart-wrapper {
+        flex: 1;
+        height: 100%;
+        min-width: 0;
+      }
+
+      .legend-wrapper {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding-left: 10px;
+        height: 100%;
+        overflow-y: auto;
+
+        .legend-item {
+          display: flex;
+          align-items: center;
+          color: rgba(255, 255, 255, 0.85);
+          font-size: 14px;
+          cursor: pointer;
+          padding: 4px 8px;
+          border-radius: 4px;
+          transition: background-color 0.3s;
+
+          &.active, &:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+          }
+
+          .legend-color {
+            width: 10px;
+            height: 10px;
+            margin-right: 10px;
+            border-radius: 2px;
+            flex-shrink: 0;
+          }
+
+          .legend-name {
+            flex: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-right: 10px;
+          }
+
+          .legend-value {
+            font-size: 14px;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}

src/views/Home/components/Business/SiZhi/index.js

@@ -1,12 +1,16 @@
 import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import CommonCard from '../../UI/CommonCard';
 import PerfectSystem from './components/PerfectSystem';
 import SoundMechanism from './components/SoundMechanism';
+import StrengthenRuleOfLaw from './components/StrengthenRuleOfLaw';
+import ImplementResponsibility from './components/ImplementResponsibility';
 import { httppost } from '@/utils/request';
 import apiurl from '@/service/apiurl';
 import './index.less';
 
 const SiZhi = () => {
+     const showPanels = useSelector(s => s.runtime.showPanels);
      const [infos, setInfos] = useState({});
    
    const getInfo = async () => {
@@ -25,7 +29,7 @@ const SiZhi = () => {
     }, []);
   return (
     <div className="sizhi-view">
-        <div className="side-panel left">
+        <div className={`side-panel left ${!showPanels ? 'hidden' : ''}`}>
              <CommonCard title="完善体系" className="panel-card card-1">
                 <PerfectSystem data={infos}/>
              </CommonCard>
@@ -34,12 +38,12 @@ const SiZhi = () => {
              </CommonCard>
         </div>
         
-         <div className="side-panel right">
+         <div className={`side-panel right ${!showPanels ? 'hidden' : ''}`}>
              <CommonCard title="强化法治" className="panel-card card-1">
-                <div className="placeholder-content">内容填充区域</div>
+                <StrengthenRuleOfLaw />
              </CommonCard>
              <CommonCard title="落实责任制" className="panel-card card-2">
-                <div className="placeholder-content">内容填充区域</div>
+                <ImplementResponsibility />
              </CommonCard>
         </div>
     </div>

src/views/Home/components/Business/common.less

@@ -12,10 +12,16 @@
 
   &.left {
     left: 20px;
+    &.hidden {
+      transform: translateX(-120%);
+    }
   }
 
   &.right {
     right: 20px;
+    &.hidden {
+      transform: translateX(120%);
+    }
   }
 
   > * {
@@ -38,3 +44,28 @@
   height: 100%;
   color: rgba(255, 255, 255, 0.5);
 }
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+
+  .title-wrapper {
+    display: flex;
+    align-items: center;
+    
+    .arrow-icon {
+      width: 20px;
+      height: 18px;
+      margin-right: 8px;
+      object-fit: contain;
+    }
+
+    span {
+      font-size: 14px;
+      color: #fff;
+      text-shadow: 0 0 5px rgba(0, 160, 233, 0.5);
+    }
+  }
+}

src/views/Home/components/UI/PdfView/index.js

@@ -7,7 +7,7 @@ const PdfView = ({ visible, title, onClose, url, fileId }) => {
   return (
     <CommonModal
       visible={visible}
-      title={title}
+      title={title?.replace(/\.pdf$/i, '')}
       onClose={onClose}
       width="60%"
       bodyStyle={{ padding: 0, overflow: 'hidden' }}

src/views/Home/components/UI/YearSelect/index.js

@@ -9,14 +9,18 @@ const YearSelect = ({ value, onChange, className, style, ...props }) => {
       onChange(dateString);
     }
   };
+  const disabledDate = (current) => {
+  return current && current > moment().endOf('day');
+};
 
   return (
     <DatePicker
       picker="year"
+      disabledDate={disabledDate}
       value={value ? moment(value, 'YYYY') : null}
       onChange={handleChange}
       className={`custom-year-select ${className || ''}`}
-      dropdownClassName="custom-year-select-dropdown"
+      // dropdownClassName="custom-year-select-dropdown"
       style={style}
       allowClear={false}
       {...props}

src/views/Home/components/UI/YearSelect/index.less

@@ -65,6 +65,14 @@
       color: #fff;
   }
 
+  .ant-picker-cell-disabled {
+    pointer-events: none;
+    .ant-picker-cell-inner {
+        color: rgba(255, 255, 255, 0.25) !important;
+        background-color: rgba(255, 255, 255, 0.1) !important; 
+    }
+  }
+
   .ant-picker-cell-selected .ant-picker-cell-inner {
       background-color: #00a0e9 !important;
       color: #fff;

src/views/Home/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import Header from './components/Layouts/Header';
 import SiQuan from './components/Business/SiQuan';
 import SiZhi from './components/Business/SiZhi';
@@ -7,11 +8,19 @@ import SiGuan from './components/Business/SiGuan';
 import MapCtrl from './MapCtrl/index'
 import MapToolBox from './mapToolBox'
 import './index.less';
+import { showFullScreen } from '@/utils/tools';
 
 const HomePage = () => {
   const [activeMenu, setActiveMenu] = useState('siquan');
   const [userInfo, setUserInfo] = useState({ userName: '系统管理员' });
   const [isReady, setIsReady] = useState(false);
+  const isFullScreen = useSelector(s => s.runtime.isFullScreen);
+  const dispatch = useDispatch()
+
+  useEffect(()=>{
+    //根据isFullScreen判断当前是否进入全屏
+    showFullScreen(isFullScreen)
+  },[isFullScreen])
 
   useEffect(() => {
     // 兼容 Hash 路由模式：参数可能跟在 # 后面 (例如 /#/home?token=...)
@@ -34,6 +43,7 @@ const HomePage = () => {
     
     setUserInfo({ userName: finalUserName });
     setIsReady(true);
+    dispatch.runtime.setHome()
   }, []);
 
   const renderContent = () => {
@@ -56,15 +66,15 @@ const HomePage = () => {
     // style={{position:"relative"}} 这段以后写在.home-page里
     <div className="home-page" style={{position:"relative"}}>
       <Header activeMenu={activeMenu} onMenuChange={setActiveMenu} userName={userInfo.userName} />
-      <div className="main-content-wrapper">
-        <div className="content-overlay">
+      <div className="main-content-wrapper" style={{ pointerEvents: 'none' }}>
+        <div className="content-overlay" style={{ pointerEvents: 'none' }}>
           {renderContent()}
         </div>
       </div>
 
 
       {/* 地图相关 */}
-      <div style={{ height: '100%',width:'100%', position: 'absolute',overflow:'hidden'}}>
+      <div style={{ height: '100%', width: '100%', position: 'absolute', top: 0, left: 0, overflow: 'hidden', zIndex: 0, pointerEvents: 'auto' }}>
         {/* 地图 */}
         <MapCtrl/>
 

src/views/Home/index.less

@@ -10,11 +10,19 @@
   color: #fff;
   font-family: "Microsoft YaHei", sans-serif;
 
+  .dashboard-header {
+    position: relative;
+    z-index: 10;
+    pointer-events: auto;
+  }
+
   .main-content-wrapper {
     flex: 1;
     overflow: hidden;
     padding: 0; 
     position: relative;
+    pointer-events: none;
+    z-index: 5;
     
     .content-overlay {
       position: absolute;
@@ -24,31 +32,8 @@
       height: 100%;
       z-index: 5; // Content sits above the map
       pointer-events: none; // Let clicks pass through to map by default
-      
-      // Re-enable pointer events for actual interactive children
-      > * {
-        pointer-events: auto;
-      }
-    }
-  } 
-  .content-layer {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 10; // Above map
-      pointer-events: none; // Let clicks pass through to map by default
-
-      // But children (cards) must be clickable. 
-      // This will be handled in child components or we can set it here if all children are full-screen overlays
-      // It's safer to handle in children, but for now, since SiQuan is the child:
-      > * {
-        pointer-events: none;
-        width: 100%;
-        height: 100%;
-      }
     }
   }
+}
 
 

src/views/Home/mapToolBox/index.js

@@ -1,18 +1,25 @@
 import React, { useEffect, useReducer, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Checkbox, message  } from 'antd';
-import {CloseOutlined} from '@ant-design/icons';
+import { CloseOutlined } from '@ant-design/icons';
 import { useLocation } from 'react-router'
 import './index.less'
 
 export default function Btn() {
-    const showPanels = useSelector((s) => s.runtime.showPanels)
-    const homeCheckedObj = useSelector((s) => s.runtime.homeCheckedObj)
-    const layerVisible = useSelector(s => s.map.layerVisible);
-    const mode = useSelector(s=>s.map.mode)
     const dispatch = useDispatch()
     const location = useLocation()
-    const [open, setOpen] = useState(false)
+    const showPanels = useSelector((s) => s.runtime.showPanels)
+    const layerVisible = useSelector(s => s.map.layerVisible);
+    const isFullScreen = useSelector(s => s.runtime.isFullScreen)
+    const mapCenter = useSelector(s => s.runtime.mapCenter)||{}
+    const mode = useSelector(s=>s.map.mode)
+    const [open, setOpen] = useState(false)//是否弹出图层窗口
+    const [targetZoom, setTargetZoom] = useState(null)//点击缩放按钮后地图目标的zoom值
+
+    useEffect(()=>{
+        //移动地图后同步targetZoom值
+        setTargetZoom(mapCenter?.zoom||null)
+    },[mapCenter])
 
     const layerVisibleChanged = (event)=>{
         const vo = { [event.target.name]: event.target.checked };
@@ -49,22 +56,45 @@ export default function Btn() {
         }
     }
 
-
     return (
         <div className="mapToolBox" style={{right: showPanels?'445px':'10px'}}>
             <div className='mapToolBtn'>
-                <div title="地图展示图层控制" onClick={()=>{setOpen(!open)}}>
-                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/tuceng.png`} />
+                <div title={`${showPanels?'收起':'展开'}功能块`} onClick={()=>dispatch.runtime.setShowPanels(!showPanels)}>
+                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/${showPanels?'shouqi.png':'zhankai.png'}`} />
+                </div>
+                <div title="查询" onClick={()=>{}}>
+                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/search.png`} />
                 </div>
                 <div title="还原地图展示位置" onClick={()=>dispatch.runtime.setHome()}>
-                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/ZhongXin.png`} />
+                    <img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/center.png`} />
                 </div>
-                <div title={`${showPanels?'收起':'展开'}悬浮功能块`} onClick={()=>dispatch.runtime.setShowPanels(!showPanels)}>
-                    {
-                        showPanels ? 
-                        <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/zhankai2.png`} /> 
-                        :<img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/shouqi2.png`} />
+                <div title="天气" onClick={()=>{}}>
+                    <img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/tianqi.png`} />
+                </div>
+                <div title="放大" onClick={()=>{
+                    if(mapCenter?.zoom === targetZoom){
+                        dispatch.runtime.setCameraTarget({...mapCenter, zoom: mapCenter.zoom + 1, fixed:true})
+                        setTargetZoom(mapCenter.zoom + 1)
                     }
+                }}>
+                    <img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/fangda.png`} />
+                </div>
+                <div title="缩小" onClick={()=>{
+                    if(mapCenter?.zoom === targetZoom){
+                        dispatch.runtime.setCameraTarget({...mapCenter, zoom: mapCenter.zoom - 1, fixed:true })
+                        setTargetZoom(mapCenter.zoom - 1)
+                    }
+                }}>
+                    <img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/suoxiao.png`} />
+                </div>
+                <div title="截图" onClick={()=>{}}>
+                    <img className='mapToolBtnIcon' style={{padding:'5px'}} src={`${process.env.PUBLIC_URL}/assets/icons/download.png`} />
+                </div>
+                <div title={isFullScreen?"退出全屏":"进入全屏"} onClick={()=>dispatch.runtime.setIsFullScreen(!isFullScreen)}>
+                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/${isFullScreen?'quanping2.png':'quanping.png'}`} />
+                </div>
+                <div title="地图展示图层控制" onClick={()=>{setOpen(!open)}}>
+                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/tuceng.png`} />
                 </div>
             </div>
 

src/views/Home/mapToolBox/index.less

@@ -3,6 +3,7 @@
     z-index: 100;
     right: 445px;
     top: 100px;
+    transition: all 0.3s;
     .mapToolBtn{
         width:40px;
         padding-bottom: 5px;
@@ -12,8 +13,10 @@
         align-items: center;
 
         .mapToolBtnIcon{
-            width: 30px;
-            height: 30px;
+            width: 28px;
+            height: 28px;
+            padding: 7px;
+            background: url(../../../../public//assets/icons/bg.png) 50% 50% / 100% 100% no-repeat;
             margin-top: 5px;
             cursor: pointer;
         }