diff --git a/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/DeviceDistribution/index.less b/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/DeviceDistribution/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..aef2224de3bafc3b84ca9e6ea4e4bc0ae549f3b0
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/DeviceDistribution/index.less
@@ -0,0 +1,92 @@
+.deviceSection {
+  width: 641px;
+  height: 522px;
+  background: rgba(57, 122, 183, 0.2);
+  border-radius: 20px;
+  padding: 20px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    color: #BCCEE9;
+    font-size: 16px;
+    padding: 0 20px;
+
+    .type {
+      width: 200px;
+    }
+    .count {
+      width: 80px;
+      text-align: center;
+    }
+    .rate {
+      width: 100px;
+      text-align: center;
+    }
+    .percentage {
+      width: 80px;
+      text-align: center;
+    }
+    .warning {
+      width: 80px;
+      text-align: center;
+    }
+  }
+
+  .deviceList {
+    height: 370px;
+    overflow-y: auto;
+  }
+
+  .deviceItem {
+    height: 50px;
+    padding: 0 20px 0 30px;
+    background: rgba(57, 122, 183, 0.2);
+    border-radius: 16px;
+    margin-bottom: 10px;
+    color: #FFFFFF;
+    font-size: 20px;
+    font-weight: 700;
+
+    .type {
+      width: 200px;
+    }
+
+    .count {
+      width: 80px;
+    }
+
+    .progress {
+      width: 100px;
+    }
+
+    .rate {
+      width: 80px;
+      color: #55D355;
+      text-align: center;
+    }
+
+    .warning {
+      width: 80px;
+      color: #FFB05A;
+      text-align: center;
+    }
+  }
+
+  .remark {
+    color: #BCCEE9;
+    font-size: 16px;
+    margin-top: 10px;
+    padding: 0 20px;
+  }
+}
+
+.title {
+  color: rgb(203, 237, 255);
+  font-family: 'DingTalk JinBuTi';
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 26px;
+  margin-bottom: 20px;
+} 
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/DeviceDistribution/index.tsx b/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/DeviceDistribution/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6c2f5d3b48198a60bf1755f4c23b968ecf24e0d8
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/DeviceDistribution/index.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Flex, Progress } from 'antd';
+import styles from './index.less';
+
+const DeviceDistribution: React.FC = () => {
+  let isUsingValue = true;
+
+  const deviceTypeList = isUsingValue ? [
+    {type: '集中控制器', count: 156, rate: 49.56},
+    {type: '单灯控制器', count: 156, rate: 59.56},
+    {type: '自然光及雨量监测', count: 156, rate: 69.56},
+    {type: '固定光照度监测', count: 156, rate: 79.56},
+    {type: '水浸传感器', count: 156, rate: 19.56},
+    {type: '固定光照度监测', count: 156, rate: 29.56},
+    {type: '水浸传感器', count: 156, rate: 39.56},
+  ] : [
+    {type: '--', count: '--', rate: '--'},
+    {type: '--', count: '--', rate: '--'},
+    {type: '--', count: '--', rate: '--'},
+    {type: '--', count: '--', rate: '--'},
+    {type: '--', count: '--', rate: '--'},
+    {type: '--', count: '--', rate: '--'},
+    {type: '--', count: '--', rate: '--'},
+    {type: '--', count: '--', rate: '--'},
+  ];
+
+  return (
+    <div className={styles.deviceSection}>
+      <div className={styles.title}>各设备类型分布</div>
+      <div className={styles.header}>
+        <span className={styles.type}>感知设备类型</span>
+        <span className={styles.count}>设备总数</span>
+        <span className={styles.percentage}> </span>
+        <span className={styles.rate}>设备在线率</span>
+      </div>
+      <div className={styles.deviceList}>
+        {deviceTypeList.map(item => (
+          <Flex key={item.type} className={styles.deviceItem} justify="space-between" align="center">
+            <span className={styles.type}>{item.type}</span>
+            <span className={styles.count}>{item.count}</span>
+            <Progress 
+              size={{ height: 15 }}
+              percent={Number(item.rate)} 
+              showInfo={false}
+              trailColor="rgba(144, 205, 229, 0.22)"
+              strokeColor={{ from: '#00B9FF', to: '#79FFD1' }}
+              className={styles.progress}
+            />
+            <span className={styles.rate}>{item.rate}%</span>
+          </Flex>
+        ))}
+      </div>
+      <div className={styles.remark}>
+        备注:单灯控制器与固定光照度监测关灯后不监测，在线率会变为0
+      </div>
+    </div>
+  );
+};
+
+export default DeviceDistribution; 
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/MonitorTable/index.less b/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/MonitorTable/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..19657b97b7800c70267818481dceb797d1728470
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/MonitorTable/index.less
@@ -0,0 +1,59 @@
+.tableSection {
+  width: 1243px;
+  height: 723px;
+  background: rgba(57, 122, 183, 0.2);
+  border-radius: 20px;
+  padding: 20px;
+}
+
+.title {
+  color: rgb(203, 237, 255);
+  font-family: 'DingTalk JinBuTi';
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 26px;
+  margin-bottom: 20px;
+}
+
+.tabs {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.tab {
+  padding: 8px 20px;
+  color: #8CC0DC;
+  font-family: 'DingTalk JinBuTi';
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 26px;
+  cursor: pointer;
+//   border-radius: 4px;
+  transition: all 0.3s;
+
+  &:hover {
+    color: #fff;
+  }
+
+  &.active {
+    color: #fff;
+  }
+}
+
+.tableCell {
+  color: #FFFFFF !important;
+  font-size: 20px !important;
+  font-weight: 700 !important;
+  line-height: 29px !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+} 
+
+.onlineStatus {
+  color: #4AE896;
+}
+
+.offlineStatus {
+  color: #B0B0B0;
+}
diff --git a/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/MonitorTable/index.tsx b/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/MonitorTable/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7878fee0bf1ee75a4d3b1ee5dad5434764ee6f4e
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/MonitorTable/index.tsx
@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import { Flex, Progress, Select } from 'antd';
+import styles from './index.less';
+import BlueTable from '@/components/BlueTable';
+import type { ColumnsType } from 'antd/es/table';
+
+interface DataType {
+  deviceName: string;
+  deviceStatus: string;
+  lightIntensity: string;
+  rainfall: string;
+  windDirection: string;
+  windSpeed: string;
+}
+
+const MonitorTable: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('tab1');
+  let isUsingValue = true;
+
+  const columns: ColumnsType<DataType> = [
+    {
+      title: '设备名称',
+      dataIndex: 'deviceName',
+      key: 'deviceName',
+      width: 200,
+      className: styles.tableCell
+    },
+    {
+      title: '设备状态',
+      dataIndex: 'deviceStatus',
+      key: 'deviceStatus',
+      width: 120,
+      className: styles.tableCell,
+      render: (text) => (
+        <span className={text === '在线' ? styles.onlineStatus : styles.offlineStatus}>
+          {text}
+        </span>
+      )
+    },
+    {
+      title: '光照度(Lux)',
+      dataIndex: 'lightIntensity',
+      key: 'lightIntensity',
+      width: 150,
+      className: styles.tableCell
+    },
+    {
+      title: '雨量(毫米)',
+      dataIndex: 'rainfall',
+      key: 'rainfall',
+      width: 150,
+      className: styles.tableCell
+    },
+    {
+      title: '风向(°)',
+      dataIndex: 'windDirection',
+      key: 'windDirection',
+      width: 120,
+      className: styles.tableCell
+    },
+    {
+      title: '风速(m/s)',
+      dataIndex: 'windSpeed',
+      key: 'windSpeed',
+      width: 120,
+      className: styles.tableCell
+    }
+  ];
+
+  const mockData: DataType[] = isUsingValue
+    ? Array.from({ length: 10 }, () => ({
+        deviceName: 'XXXXXXXX',
+        deviceStatus: Math.random() > 0.5 ? '在线' : '离线',
+        lightIntensity: 'XXXXX',
+        rainfall: 'XXXXX',
+        windDirection: 'XXXXXXXXXX',
+        windSpeed: 'XXXXXXX',
+      }))
+    : [];
+
+  return (
+    <div className={styles.tableSection}>
+      {/* <div className={styles.title}>感知设备实时监测信息</div> */}
+      <div className={styles.tabs}>
+        <div 
+          className={`${styles.tab} ${activeTab === 'tab1' ? styles.active : ''}`}
+          onClick={() => setActiveTab('tab1')}
+        >
+          自然光及风雨量监测列表
+        </div>
+        <div 
+          className={`${styles.tab} ${activeTab === 'tab2' ? styles.active : ''}`}
+          onClick={() => setActiveTab('tab2')}
+        >
+          水浸实时监测列表
+        </div>
+        <div 
+          className={`${styles.tab} ${activeTab === 'tab3' ? styles.active : ''}`}
+          onClick={() => setActiveTab('tab3')}
+        >
+          固定光照度监测表
+        </div>
+      </div>
+      <BlueTable
+        columns={columns}
+        dataSource={mockData}
+        scroll={{ y: 520 }}
+        pagination={{
+          total: 30,
+          pageSize: 10,
+        }}
+      />
+    </div>
+  );
+};
+
+export default MonitorTable; 
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/StatsOverview/index.less b/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/StatsOverview/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..ffabe989e0b01fc3f2b46ccf13b48e4d4b5651b5
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/StatsOverview/index.less
@@ -0,0 +1,16 @@
+.statsSection {
+  width: 640px;
+  height: 176px;
+  background: rgba(57, 122, 183, 0.2);
+  border-radius: 20px;
+  padding: 20px;
+}
+
+.title {
+  color: rgb(203, 237, 255);
+  font-family: 'DingTalk JinBuTi';
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 26px;
+  margin-bottom: 20px;
+} 
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/StatsOverview/index.tsx b/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/StatsOverview/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..90429d18f41dc305aea971fd742183465d1cc12e
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/LightingDeviceStatus/components/StatsOverview/index.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Flex } from 'antd';
+import styles from './index.less';
+import DescriptionItem from '@/components/DescriptionItem';
+
+const StatsOverview: React.FC = () => {
+  let isUsingValue = true;
+
+  const commonValueStyle = {
+    fontFamily: 'D-DIN Exp',
+    fontSize: '36px',
+    fontWeight: '700',
+    background: 'linear-gradient(180deg, #9CF8F7 0%, #25BBFF 100%)',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+  };
+
+  const commonLabelStyle = {
+    color: '#BCCEE9',
+    fontSize: '20px',
+    marginTop: '-4px'
+  };
+
+  const commonUnitStyle = {
+    color: '#BCCEE9',
+    fontSize: '20px',
+  };
+
+  return (
+    <div className={styles.statsSection}>
+      <div className={styles.title}>感知设备概况</div>
+      <Flex gap={40} align="center" justify="space-between" style={{padding: '0 60px 0 10px'}}>
+        <DescriptionItem
+          name="感知设备总数"
+          value={isUsingValue ? 82 : '--'}
+          unit="个"
+          valueStyle={commonValueStyle}
+          labelStyle={commonLabelStyle}
+          unitStyle={commonUnitStyle}
+        />
+        <DescriptionItem 
+          name="在线"
+          value={isUsingValue ? 82 : '--'}
+          unit="个"
+          valueStyle={commonValueStyle}
+          labelStyle={commonLabelStyle}
+          unitStyle={commonUnitStyle}
+        />
+        <DescriptionItem
+          name="设备在线率"
+          value={isUsingValue ? 99.99 : '--'}
+          unit="%"
+          decimals={2}
+          valueStyle={{...commonValueStyle, background: '#55D355'}}
+          labelStyle={commonLabelStyle}
+          unitStyle={commonUnitStyle}
+        />
+      </Flex>
+    </div>
+  );
+};
+
+export default StatsOverview; 
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/LightingDeviceStatus/index.less b/src/pages/GlobalModalServices/modals/LightingDeviceStatus/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..c2c0dd682484d763014c581c1e9b2e0aa515fa16
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/LightingDeviceStatus/index.less
@@ -0,0 +1,12 @@
+.container {
+  width: 2006px;
+  height: 858px;
+  display: flex;
+  gap: 20px;
+}
+
+.leftContent {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+} 
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/LightingDeviceStatus/index.tsx b/src/pages/GlobalModalServices/modals/LightingDeviceStatus/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a8304b52eef0c274769ffd136cecee83c942f2df
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/LightingDeviceStatus/index.tsx
@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import { Flex } from 'antd';
+import styles from './index.less';
+import StatsOverview from './components/StatsOverview';
+import DeviceDistribution from './components/DeviceDistribution';
+import MonitorTable from './components/MonitorTable';
+
+const LightingDeviceStatus: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.leftContent}>
+        {/* 左上统计概览 */}
+        <StatsOverview />
+        {/* 左下设备分布 */}
+        <DeviceDistribution />
+      </div>
+      {/* 右侧监测表格 */}
+      <MonitorTable />
+    </div>
+  );
+};
+
+export default LightingDeviceStatus; 
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/PipelineMonitor/index.less b/src/pages/GlobalModalServices/modals/PipelineMonitor/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..4f8d0f5283c6c0b7983cbb68b39eaa6432b43d8a
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/PipelineMonitor/index.less
@@ -0,0 +1,179 @@
+.container {
+  width: 2035px;
+  height: 858px;
+//   width: 100%;
+//   height: 100%;
+  display: flex;
+  gap: 20px;
+}
+
+.leftContent {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.title {
+  color: rgb(203, 237, 255);
+  font-family: 'DingTalk JinBuTi';
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 26px;
+  margin-bottom: 20px;
+}
+
+// 顶部统计区域
+.statsSection {
+  width: 716px;
+  height: 176px;
+  background: rgba(57, 122, 183, 0.2);
+  border-radius: 20px;
+  padding: 20px;
+}
+
+// 设备类型分布区域
+.deviceSection {
+  width: 716px;
+  height: 522px;
+  background: rgba(57, 122, 183, 0.2);
+  border-radius: 20px;
+  padding: 20px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    color: #BCCEE9;
+    font-size: 16px;
+    padding: 0 20px;
+
+    .type {
+      width: 200px;
+    }
+    .count {
+      width: 80px;
+      text-align: center;
+    }
+    .rate {
+      width: 100px;
+      text-align: center;
+    }
+    .percentage {
+      width: 80px;
+      text-align: center;
+    }
+    .warning {
+      width: 80px;
+      text-align: center;
+    }
+  }
+
+  .deviceList {
+    height: 410px;
+    overflow-y: auto;
+  }
+
+  .deviceItem {
+    height: 50px;
+    padding: 0 20px 0 30px;
+    background: rgba(57, 122, 183, 0.2);
+    border-radius: 16px;
+    margin-bottom: 10px;
+    color: #FFFFFF;
+    font-size: 20px;
+    font-weight: 700;
+
+    .type {
+      width: 200px;
+    }
+
+    .count {
+      width: 80px;
+    }
+
+    .progress {
+      width: 100px;
+    }
+
+    .rate {
+      width: 80px;
+      color: #55D355;
+      text-align: center;
+    }
+
+    .warning {
+      width: 80px;
+      color: #FFB05A;
+      text-align: center;
+    }
+  }
+}
+
+// 表格单元格样式
+.tableCell {
+  color: #FFFFFF !important;
+  font-size: 20px !important;
+  font-weight: 700 !important;
+  line-height: 29px !important;
+    // Start Generation Here
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+}
+
+// 监测结果状态样式
+.normalStatus {
+  color: #4AE896 !important;
+  font-family: 思源黑体 !important;
+  font-size: 20px !important;
+  font-weight: 700 !important;
+  line-height: 29px !important;
+}
+
+.warningStatus {
+  color: #FFB72D !important;
+  font-family: 思源黑体 !important;
+  font-size: 20px !important;
+  font-weight: 700 !important;
+  line-height: 29px !important;
+}
+
+// 表格区域
+.tableSection {
+  width: 1243px;
+  height: 723px;
+  background: rgba(57, 122, 183, 0.2);
+  border-radius: 20px;
+  padding: 20px;
+
+  .filters {
+    margin-bottom: 20px;
+  }
+
+  .select {
+    width: 170px;
+    height: 40px;
+    background: rgb(50, 111, 167);
+    border-radius: 25px;
+    border: none;
+
+    :global {
+      .ant-select-selector {
+        background: transparent !important;
+        border: none !important;
+        height: 40px !important;
+        padding: 0 20px !important;
+
+        .ant-select-selection-item {
+          line-height: 24px !important;
+          color: #fff;
+          font-size: 18px;
+        }
+      }
+
+      .ant-select-arrow {
+        color: #fff;
+      }
+    }
+  }
+} 
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/PipelineMonitor/index.tsx b/src/pages/GlobalModalServices/modals/PipelineMonitor/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..48d6bda3940d9824418a066f73c0085caeb57700
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/PipelineMonitor/index.tsx
@@ -0,0 +1,345 @@
+import React, { useState } from 'react';
+import { Flex, Progress, Select } from 'antd';
+import styles from './index.less';
+import DescriptionItem from '@/components/DescriptionItem';
+import BlueTable from '@/components/BlueTable';
+import type { ColumnsType } from 'antd/es/table';
+
+interface DataType {
+  monitorTime: string;
+  deviceName: string; 
+  deviceCode: string;
+  deviceType: string;
+  onlineStatus: string;
+  pipelineName: string;
+  monitorValue: string;
+  monitorResult: string;
+}
+
+const PipelineMonitor: React.FC = () => {
+  const [deviceType, setDeviceType] = useState('all');
+  const [monitorResult, setMonitorResult] = useState('all');
+
+  let isUsingValue = false;
+
+  const columns: ColumnsType<DataType> = [
+    {
+      title: '监测时间',
+      dataIndex: 'monitorTime',
+      key: 'monitorTime',
+      width: 200,
+      className: styles.tableCell
+    },
+    {
+      title: '设备名称',
+      dataIndex: 'deviceName',
+      key: 'deviceName',
+      width: 180,
+      className: styles.tableCell
+    },
+    {
+      title: '设备编码',
+      dataIndex: 'deviceCode', 
+      key: 'deviceCode',
+      width: 120,
+      className: styles.tableCell
+    },
+    {
+      title: '设备类型',
+      dataIndex: 'deviceType',
+      key: 'deviceType',
+      width: 160,
+      className: styles.tableCell
+    },
+    {
+      title: '在线状态',
+      dataIndex: 'onlineStatus',
+      key: 'onlineStatus',
+      width: 120,
+      className: styles.tableCell
+    },
+    {
+      title: '管廊名称',
+      dataIndex: 'pipelineName',
+      key: 'pipelineName',
+      width: 170,
+      className: styles.tableCell
+    },
+    {
+      title: '监测数据值',
+      dataIndex: 'monitorValue',
+      key: 'monitorValue',
+      width: 130,
+      className: styles.tableCell
+    },
+    {
+      title: '监测结果',
+      dataIndex: 'monitorResult',
+      key: 'monitorResult',
+      width: 100,
+      render: (text) => (
+        <span className={text === '正常' ? styles.normalStatus : styles.warningStatus}>
+          {text}
+        </span>
+      )
+    }
+  ];
+
+  const mockData: DataType[] = isUsingValue ? [
+    {
+      monitorTime: '2024-10-21 10:20:20',
+      deviceName: '氧气浓度传感器01',
+      deviceCode: 'YQ001',
+      deviceType: '氧气浓度传感器',
+      onlineStatus: '在线',
+      pipelineName: '天府大道管廊A段',
+      monitorValue: '25% VOL',
+      monitorResult: '预警'
+    },
+    {
+      monitorTime: '2024-10-21 10:20:20',
+      deviceName: '一氧化碳传感器02',
+      deviceCode: 'CO002',
+      deviceType: '一氧化碳气体传感器',
+      onlineStatus: '在线',
+      pipelineName: '天府大道管廊B段',
+      monitorValue: '25% VOL',
+      monitorResult: '正常'
+    },
+    {
+      monitorTime: '2024-10-21 10:20:20',
+      deviceName: '甲烷传感器03',
+      deviceCode: 'JW003',
+      deviceType: '甲烷气体传感器',
+      onlineStatus: '在线',
+      pipelineName: '天府大道管廊C段',
+      monitorValue: '25% VOL',
+      monitorResult: '正常'
+    },
+    {
+      monitorTime: '2024-10-21 10:20:20',
+      deviceName: '硫化氢传感器04',
+      deviceCode: 'LH004',
+      deviceType: '硫化氢气体传感器',
+      onlineStatus: '在线',
+      pipelineName: '天府大道管廊D段',
+      monitorValue: '25% VOL',
+      monitorResult: '正常'
+    },
+    {
+      monitorTime: '2024-10-21 10:20:20',
+      deviceName: '温度传感器05',
+      deviceCode: 'WD005',
+      deviceType: '温度传感器',
+      onlineStatus: '在线',
+      pipelineName: '天府大道管廊E段',
+      monitorValue: '25% VOL',
+      monitorResult: '正常'
+    },
+    {
+      monitorTime: '2024-10-21 10:20:20',
+      deviceName: '温度传感器06',
+      deviceCode: 'WD006',
+      deviceType: '温度传感器',
+      onlineStatus: '在线',
+      pipelineName: '天府大道管廊F段',
+      monitorValue: '25% VOL',
+      monitorResult: '正常'
+    },
+    {
+      monitorTime: '2024-10-21 10:20:20',
+      deviceName: '液位监测传感器07',
+      deviceCode: 'YW007',
+      deviceType: '液位监测传感器',
+      onlineStatus: '在线',
+      pipelineName: '天府大道管廊G段',
+      monitorValue: '25% VOL',
+      monitorResult: '正常'
+    },
+    {
+      monitorTime: '2024-10-21 10:20:20',
+      deviceName: '氧气浓度传感器08',
+      deviceCode: 'YQ008',
+      deviceType: '氧气浓度传感器',
+      onlineStatus: '在线',
+      pipelineName: '天府大道管廊H段',
+      monitorValue: '25% VOL',
+      monitorResult: '正常'
+    },
+    {
+      monitorTime: '2024-10-21 10:20:20',
+      deviceName: '一氧化碳传感器09',
+      deviceCode: 'CO009',
+      deviceType: '一氧化碳气体传感器',
+      onlineStatus: '在线',
+      pipelineName: '天府大道管廊I段',
+      monitorValue: '25% VOL',
+      monitorResult: '正常'
+    },
+    {
+      monitorTime: '2024-10-21 10:20:20',
+      deviceName: '甲烷传感器10',
+      deviceCode: 'JW010',
+      deviceType: '甲烷气体传感器',
+      onlineStatus: '在线',
+      pipelineName: '天府大道管廊J段',
+      monitorValue: '25% VOL',
+      monitorResult: '正常'
+    }
+  ] : [];
+
+  const deviceTypeList = isUsingValue ? [
+    {type: '氧气浓度传感器', count: 156, rate: 49.56, warning: 12},
+    {type: '一氧化碳气体传感器', count: 156, rate: 59.56, warning: 12},
+    {type: '甲烷气体传感器', count: 156, rate: 69.56, warning: 12},
+    {type: '硫化氢气体传感器', count: 156, rate: 79.56, warning: 12},
+    {type: '温度传感器', count: 156, rate: 19.56, warning: 12},
+    {type: '温度传感器', count: 156, rate: 49.56, warning: 12},
+    {type: '液位监测传感器', count: 156, rate: 89.56, warning: 12},
+    {type: '液位监测传感器', count: 156, rate: 99.56, warning: 12},
+  ] : [
+    {type: '--', count: '--', rate: '--', warning: '--'},
+    {type: '--', count: '--', rate: '--', warning: '--'},
+    {type: '--', count: '--', rate: '--', warning: '--'},
+    {type: '--', count: '--', rate: '--', warning: '--'},
+    {type: '--', count: '--', rate: '--', warning: '--'},
+    {type: '--', count: '--', rate: '--', warning: '--'},
+    {type: '--', count: '--', rate: '--', warning: '--'},
+    {type: '--', count: '--', rate: '--', warning: '--'},
+  ];
+
+  const commonValueStyle = {
+    fontFamily: 'D-DIN Exp',
+    fontSize: '36px',
+    fontWeight: '700',
+    background: 'linear-gradient(180deg, #9CF8F7 0%, #25BBFF 100%)',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+  };
+
+  const commonLabelStyle = {
+    color: '#BCCEE9',
+    fontSize: '20px',
+    marginTop: '-4px'
+  };
+
+  const commonUnitStyle = {
+    color: '#BCCEE9',
+    fontSize: '20px',
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.leftContent}>
+        {/* 顶部统计区域 */}
+        <div className={styles.statsSection}>
+          <div className={styles.title}>感知设备概况</div>
+          <Flex gap={40} align="center" justify="space-between" style={{padding: '0 60px 0 10px'}}>
+            <DescriptionItem
+              name="已接入感知设备"
+              value={isUsingValue ? 82 : '--'}
+              unit="个"
+              valueStyle={commonValueStyle}
+              labelStyle={commonLabelStyle}
+              unitStyle={commonUnitStyle}
+            />
+            <DescriptionItem 
+              name="在线"
+              value={isUsingValue ? 82 : '--'}
+              unit="个"
+              valueStyle={commonValueStyle}
+              labelStyle={commonLabelStyle}
+              unitStyle={commonUnitStyle}
+            />
+            <DescriptionItem
+              name="设备在线率"
+              value={isUsingValue ? 99.99 : '--'}
+              unit="%"
+              decimals={2}
+              valueStyle={{...commonValueStyle, background: '#55D355'}}
+              labelStyle={commonLabelStyle}
+              unitStyle={commonUnitStyle}
+            />
+            <DescriptionItem
+              name="预警数"
+              value={isUsingValue ? 82 : '--'}
+              unit="个" 
+              valueStyle={{...commonValueStyle, background: '#FFB05A'}}
+              labelStyle={commonLabelStyle}
+              unitStyle={commonUnitStyle}
+            />
+          </Flex>
+        </div>
+
+        {/* 设备类型分布区域 */}
+        <div className={styles.deviceSection}>
+          <div className={styles.title}>各设备类型分布</div>
+          <div className={styles.header}>
+            <span className={styles.type}>感知设备类型</span>
+            <span className={styles.count}>设备总数</span>
+            <span className={styles.rate}>设备在线率</span>
+            <span className={styles.percentage}> </span>
+            <span className={styles.warning}>预警数</span>
+          </div>
+          <div className={styles.deviceList}>
+            {/* 设备类型列表项 */}
+            {deviceTypeList.map(item => (
+              <Flex key={item.type} className={styles.deviceItem} justify="space-between" align="center">
+                <span className={styles.type}>{item.type}</span>
+                <span className={styles.count}>{item.count}</span>
+                <Progress 
+                  size={{ height: 15 }}
+                  percent={Number(item.rate)} 
+                  showInfo={false}
+                  trailColor="rgba(144, 205, 229, 0.22)"
+                  strokeColor={{ from: '#00B9FF', to: '#79FFD1' }}
+                  className={styles.progress}
+                />
+                <span className={styles.rate}>{item.rate}%</span>
+                <span className={styles.warning}>{item.warning}</span>
+              </Flex>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* 表格筛选和数据区域 */}
+      <div className={styles.tableSection}>
+        <div className={styles.title}>感知设备实时监测信息</div>
+        <Flex gap={20} className={styles.filters}>
+          <Select
+            value={deviceType}
+            onChange={setDeviceType}
+            options={isUsingValue ? [
+              { value: 'all', label: '全部设备类型' },
+              { value: 'oxygen', label: '氧气浓度传感器' },
+              { value: 'co', label: '一氧化碳气体传感器' },
+            ] : [{ value: 'all', label: '全部设备类型' }]}
+            className={styles.select}
+          />
+          <Select
+            value={monitorResult}
+            onChange={setMonitorResult}
+            options={isUsingValue ? [
+              { value: 'all', label: '监测结果' },
+              { value: 'normal', label: '正常' },
+              { value: 'warning', label: '预警' },
+            ] : [{ value: 'all', label: '监测结果' }]}
+            className={styles.select}
+          />
+        </Flex>
+        <BlueTable
+          columns={columns}
+          dataSource={isUsingValue ? mockData : []}
+          scroll={{ y: 470 }}
+          pagination={{
+            total: 30,
+            pageSize: 10,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PipelineMonitor; 
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/PipelinePassage/Overview/index.tsx b/src/pages/GlobalModalServices/modals/PipelinePassage/Overview/index.tsx
index 20ff27131d93a33089232d5958802d36e480733f..681e71da742a51184efe565c03ee51f14a5fa95a 100644
--- a/src/pages/GlobalModalServices/modals/PipelinePassage/Overview/index.tsx
+++ b/src/pages/GlobalModalServices/modals/PipelinePassage/Overview/index.tsx
@@ -15,6 +15,8 @@ const Overview: React.FC = memo(() => {
   const { dispatch } = useGlobalModalServices();
   const [activeTab, setActiveTab] = useState('1');
 
+  let isTrigger = false;
+
   const [pieData, setPieData] = useState(
     // [...Array(4)].map((_, i) => {
     //   return {
@@ -152,11 +154,13 @@ const Overview: React.FC = memo(() => {
               name={item.name}
               key={item.name}
               decimals={Number.isInteger(item.value) ? 0 : 2}
-              // onClick={() => {
-              //   dispatch.push('PipeGalleryDetail', {
-              //     title: `${item.name}综合管廊`,
-              //   });
-              // }}
+              onClick={() => {
+                if (isTrigger) {
+                  dispatch.push('PipeGalleryDetail', {
+                    title: `${item.name}综合管廊`,
+                  });
+                }
+              }}
             />
           );
         })}
diff --git a/src/pages/GlobalModalServices/modals/PipelinePassage/PipeCorridorSensesTheSituation/index.tsx b/src/pages/GlobalModalServices/modals/PipelinePassage/PipeCorridorSensesTheSituation/index.tsx
index 0265045cebca9597cc4f4cd4a1ebc56bbda76cc4..7746fa38454f9502be60706facd75e8ab45975b8 100644
--- a/src/pages/GlobalModalServices/modals/PipelinePassage/PipeCorridorSensesTheSituation/index.tsx
+++ b/src/pages/GlobalModalServices/modals/PipelinePassage/PipeCorridorSensesTheSituation/index.tsx
@@ -7,11 +7,15 @@ import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import BaseCard from '../../../components/BaseCard';
 import styles from './index.less';
 import option from './option';
+import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
 
 /** @name 管廊感知态势 */
 const PipeCorridorSensesTheSituation: React.FC = () => {
   const chartRef = useRef<any>();
   const [activeTab, setActiveTab] = useState('1');
+  const { dispatch } = useGlobalModalServices();
+
+  let isTrigger = true;
 
   const tabItems = useMemo(
     () => [
@@ -106,6 +110,13 @@ const PipeCorridorSensesTheSituation: React.FC = () => {
               }}
               name={item.name}
               key={item.name}
+              onClick={() => {
+                if (isTrigger) {
+                  dispatch.push('PipelineMonitor', {
+                    // title: `${item.name}综合管廊`,
+                  });
+                }
+              }}
             />
           );
         })}
diff --git a/src/pages/GlobalModalServices/modals/UrbanLighting/SensingDevice/index.tsx b/src/pages/GlobalModalServices/modals/UrbanLighting/SensingDevice/index.tsx
index 79165086c937eb7308500160621e7bcd7f5bf4ec..afafda9b9a14601399afa3576994534ac1e63f41 100644
--- a/src/pages/GlobalModalServices/modals/UrbanLighting/SensingDevice/index.tsx
+++ b/src/pages/GlobalModalServices/modals/UrbanLighting/SensingDevice/index.tsx
@@ -8,9 +8,11 @@ import React, { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import BaseCard from '../../../components/BaseCard';
 import styles from './index.less';
 import option from './option';
+import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
 /** @name 感知设备 */
 const SensingDevice: React.FC = () => {
   const chartRef = useRef<any>();
+  const { dispatch } = useGlobalModalServices();
 
   const [dataSource, setDataSource] = useSetState<{
     total?: string;
@@ -84,7 +86,15 @@ const SensingDevice: React.FC = () => {
   return (
     <BaseCard w={755} h={222} title={`感知设备${dataSource.total ?? '--'}万个`}>
       <EmptyWithConditions conditions={dataSource.list.length === 0}>
-        <Flex gap={30} className={styles.container}>
+        <Flex gap={30} className={styles.container} 
+              onClick={() => {
+                if (false) {
+                  dispatch.push('LightingDeviceStatus', {
+                    title: `感知设备运行态势`,
+                  });
+                }
+              }}
+        >
           <div
             style={{
               height: 120,
diff --git a/src/pages/GlobalModalServices/registry.tsx b/src/pages/GlobalModalServices/registry.tsx
index b1c42cd24439ce81fc536f6f38ec6df243e223f3..b5879274a2fa8911a97530475a54a7ecaebab403 100644
--- a/src/pages/GlobalModalServices/registry.tsx
+++ b/src/pages/GlobalModalServices/registry.tsx
@@ -42,6 +42,8 @@ import UrbanLighting from './modals/UrbanLighting';
 import UrbanOperation from './modals/UrbanOperation';
 import type { ModalMapping } from './type';
 import PipeGalleryDetail from './modals/PipeGalleryDetail';
+import PipelineMonitor from './modals/PipelineMonitor';
+import LightingDeviceStatus from './modals/LightingDeviceStatus';
 
 export type ModalKey = keyof typeof Registry.RegistryList;
 
@@ -461,6 +463,20 @@ export default class Registry {
       defaultProps: {},
       modal: PipeGalleryDetail,
     },
+    /**
+     * 管廊-监测信息弹窗
+     * @module PipelinePassage
+     * @see PipelinePassage.Overview
+     */
+    PipelineMonitor: {
+      defaultConfig: {
+        w: 2035,
+        h: 858,
+        title: '监测信息',
+      },
+      defaultProps: {},
+      modal: PipelineMonitor,
+    },
     /**
      * 城市照明2级弹窗
      * @module IndustryOperationNew
@@ -566,6 +582,21 @@ export default class Registry {
       modal: LightingFaultDetails,
     },
 
+    /**
+     * 照明-感知设备运行态势
+     * @module UrbanLighting
+     * @see UrbanLighting.SensingDevice
+     */
+    LightingDeviceStatus: {
+      defaultConfig: {
+        w: 2006,
+        h: 858,
+        title: '感知设备运行态势',
+      },
+      defaultProps: {},
+      modal: LightingDeviceStatus,
+    },
+
   };
 
   static get(modalKey: ModalKey) {