diff --git a/config/routes.js b/config/routes.js
index 23201b1..07820dd 100644
--- a/config/routes.js
+++ b/config/routes.js
@@ -37,6 +37,12 @@ export default [
                         name: 'safeMajorHazard',
                         component: './safe_majorHazard/SafeMajorHazardList',
                     },
+                    // 风险分级管控
+                    {
+                        path: '/topnavbar00/hrefficiency/riskclassification',
+                        name: 'riskclassification',
+                        component: './risk_classification/RiskClassificationControl',
+                    },
                     // 系统管理
 					{ 
 					    path: '/topnavbar00/hrefficiency/system', 
diff --git a/src/assets/img/riskclassification.svg b/src/assets/img/riskclassification.svg
new file mode 100644
index 0000000..e71bf0c
--- /dev/null
+++ b/src/assets/img/riskclassification.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.00585666 5.21659C0.00585666 4.21492 0.0180493 3.2123 0.000229166 2.21062C-0.00727403 1.77356 0.169051 1.54378 0.591106 1.43967C2.48941 0.972597 4.38397 0.487703 6.28228 0.0225044C6.45485 -0.0197011 6.65838 0.00280846 6.83564 0.0459518C8.66455 0.492392 10.4916 0.947274 12.3186 1.40215C12.9564 1.5616 13.038 1.66946 13.038 2.33161C13.0389 4.13238 13.0417 5.93221 13.037 7.73298C13.0314 9.74665 12.2314 11.3702 10.6754 12.6523C9.51616 13.608 8.32503 14.5018 6.89379 15.0064C6.67245 15.0842 6.37326 15.0927 6.15848 15.0092C4.22641 14.2636 2.59352 13.0762 1.25795 11.5052C0.443856 10.5476 0.0696337 9.38274 0.019925 8.1344C-0.0185289 7.16273 0.0124219 6.18919 0.0124219 5.21659H0.00585666ZM6.53458 2.24064C6.49894 2.23407 6.46423 2.22657 6.42859 2.22C5.51977 3.88665 4.60156 5.54861 3.70775 7.22276C3.44326 7.71891 3.70868 8.11001 4.28268 8.12314C4.74694 8.13346 5.2112 8.12596 5.67546 8.12596H6.53458V11.811C7.49123 10.2034 8.3738 8.58834 9.25261 6.97234C9.62777 6.28111 9.39329 5.89469 8.60171 5.89282C7.92548 5.89094 7.24926 5.89282 6.53458 5.89282V2.24064Z" fill="white"/>
+</svg>
diff --git a/src/pages/nav_system_content/SystemContentList.js b/src/pages/nav_system_content/SystemContentList.js
index bd298ed..0aa5ae4 100644
--- a/src/pages/nav_system_content/SystemContentList.js
+++ b/src/pages/nav_system_content/SystemContentList.js
@@ -12,6 +12,7 @@ import menuTitle from '@/assets/img/智能管控平台.svg'
 import menuTitle1 from '@/assets/img/智能管控平台-1.svg'
 import fireHydrant from '@/assets/img/fireHydrant.svg'
 import fireHydrant1 from '@/assets/img/fireHydrant1.svg'
+import riskClassification from '@/assets/img/riskclassification.svg'
 import trouble from '@/assets/img/trouble.svg'
 import book from '@/assets/img/book.svg'
 import danger from '@/assets/img/danger.svg'
@@ -104,6 +105,12 @@ const SystemContentList = (props) => {
                 "key": "/topnavbar00/hrefficiency/safeMajorHazard",
                 "label": "重大危险源管理"
             },
+            {
+                "path": "/topnavbar00/hrefficiency/riskclassification",
+                icon: <img src={risk} alt="风险分级管控" style={{ width: '16px', height: '16px' }} />,
+                "key": "/topnavbar00/hrefficiency/riskclassification",
+                "label": "风险分级管控"
+            },
             {
                 "path": "/topnavbar00/hrefficiency/hiddentrouble",
                 icon: <img src={risk} alt="工时仪表盘" style={{ width: '16px', height: '16px' }} />,
@@ -377,6 +384,10 @@ const SystemContentList = (props) => {
                                 else if (item.key === '/topnavbar00/hrefficiency/safetraining' && typeof bookLight !== 'undefined') {
                                     iconSrc = bookLight;
                                 }
+                                // 风险分级管控 菜单图标 激活态使用 riskclassification
+                                else if (item.key === '/topnavbar00/hrefficiency/riskclassification' && typeof riskClassification !== 'undefined') {
+                                    iconSrc = riskClassification;
+                                }
                                 // 人员定位激活态使用personnelPosition2
                                 else if (item.key === '/topnavbar00/hrefficiency/personnellocation' && typeof personnelPosition2 !== 'undefined') {
                                     iconSrc = personnelPosition2;
diff --git a/src/pages/risk_classification/RiskClassificationControl.js b/src/pages/risk_classification/RiskClassificationControl.js
new file mode 100644
index 0000000..4a92118
--- /dev/null
+++ b/src/pages/risk_classification/RiskClassificationControl.js
@@ -0,0 +1,527 @@
+import React, { useState, useEffect } from 'react';
+import { Card, Row, Col, Select, Table, Pagination, Statistic, Badge } from 'antd';
+import { CaretRightOutlined } from '@ant-design/icons';
+import ReactECharts from 'echarts-for-react';
+import './RiskClassificationControl.less';
+
+const { Option } = Select;
+
+// 模拟风险等级数据
+const riskLevelData = [
+  { level: '极高风险', count: 35, color: '#ff4d4f', icon: '🔴' },
+  { level: '高风险', count: 12, color: '#fa8c16', icon: '🟠' },
+  { level: '中风险', count: 60, color: '#faad14', icon: '🟡' },
+  { level: '低风险', count: 42, color: '#40a9ff', icon: '🔵' },
+];
+
+// 模拟风险评估分析数据
+const riskAnalysisData = {
+  xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+  极高风险: [12, 15, 10, 8, 14, 16, 9, 13, 11, 15, 14, 12],
+  高风险: [8, 10, 12, 15, 14, 10, 8, 12, 14, 10, 8, 12],
+  中风险: [18, 20, 22, 25, 24, 20, 18, 22, 24, 20, 18, 22],
+  低风险: [15, 18, 20, 16, 14, 18, 20, 16, 14, 18, 20, 16],
+};
+
+// 模拟风险清单数据
+const riskListData = [
+  {
+    key: '1',
+    riskName: '化学品储存区窜雾风险',
+    riskType: '设备设施',
+    riskLevel: '极高风险',
+    assessmentMethod: 'LEC分析',
+    area: '生产罐区1',
+    department: '设备部',
+    responsiblePerson: '张明',
+    monitoringFrequency: '每日',
+    status: '整改',
+    updateTime: '2025-03-01',
+  },
+  {
+    key: '2',
+    riskName: '化学品储存区泄漏风险',
+    riskType: '设备设施',
+    riskLevel: '高风险',
+    assessmentMethod: 'LEC分析',
+    area: '生产罐区1',
+    department: '设备部',
+    responsiblePerson: '张明',
+    monitoringFrequency: '每日',
+    status: '预警',
+    updateTime: '2025-03-01',
+  },
+  {
+    key: '3',
+    riskName: '化学品储存区腐蚀风险',
+    riskType: '设备设施',
+    riskLevel: '中风险',
+    assessmentMethod: 'LEC分析',
+    area: '生产罐区1',
+    department: '设备部',
+    responsiblePerson: '张明',
+    monitoringFrequency: '每日',
+    status: '预警',
+    updateTime: '2025-03-01',
+  },
+  {
+    key: '4',
+    riskName: '化学品储存区温湿度异常',
+    riskType: '设备设施',
+    riskLevel: '低风险',
+    assessmentMethod: 'LEC分析',
+    area: '生产罐区1',
+    department: '设备部',
+    responsiblePerson: '张明',
+    monitoringFrequency: '每日',
+    status: '正常',
+    updateTime: '2025-03-01',
+  },
+  {
+    key: '5',
+    riskName: '化学品储存区通风不良',
+    riskType: '设备设施',
+    riskLevel: '低风险',
+    assessmentMethod: 'LEC分析',
+    area: '生产罐区1',
+    department: '设备部',
+    responsiblePerson: '张明',
+    monitoringFrequency: '每日',
+    status: '正常',
+    updateTime: '2025-03-01',
+  },
+];
+
+// 获取风险等级对应的标签样式
+const getRiskLevelTag = (level) => {
+  switch (level) {
+    case '极高风险':
+      return <Badge status="error" text="极高风险" />;
+    case '高风险':
+      return <Badge status="warning" text="高风险" />;
+    case '中风险':
+      return <Badge status="processing" text="中风险" />;
+    case '低风险':
+      return <Badge status="success" text="低风险" />;
+    default:
+      return level;
+  }
+};
+
+// 获取状态对应的标签样式
+const getStatusTag = (status) => {
+  switch (status) {
+    case '整改':
+      return <Badge status="error" text="整改" />;
+    case '预警':
+      return <Badge status="warning" text="预警" />;
+    case '正常':
+      return <Badge status="success" text="正常" />;
+    default:
+      return status;
+  }
+};
+
+const RiskClassificationControl = () => {
+  const [selectedMonth, setSelectedMonth] = useState('月');
+  const [selectedRiskLevel, setSelectedRiskLevel] = useState('全部风险等级');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(5);
+
+  // 风险评估分析图表配置
+  const analysisChartOption = {
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: ['极高风险', '高风险', '中风险', '低风险'],
+      bottom: 0,
+    },
+    grid: {
+      left: '3%',
+      right: '3%',
+      bottom: '15%',
+      top: '3%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: riskAnalysisData.xAxis,
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+    },
+    series: [
+      {
+        name: '极高风险',
+        type: 'line',
+        data: riskAnalysisData.极高风险,
+        smooth: false,
+        symbolSize: 6,
+        itemStyle: {
+          color: '#ff4d4f',
+        },
+      },
+      {
+        name: '高风险',
+        type: 'line',
+        data: riskAnalysisData.高风险,
+        smooth: false,
+        symbolSize: 6,
+        itemStyle: {
+          color: '#fa8c16',
+        },
+      },
+      {
+        name: '中风险',
+        type: 'line',
+        data: riskAnalysisData.中风险,
+        smooth: false,
+        symbolSize: 6,
+        itemStyle: {
+          color: '#faad14',
+        },
+      },
+      {
+        name: '低风险',
+        type: 'line',
+        data: riskAnalysisData.低风险,
+        smooth: false,
+        symbolSize: 6,
+        itemStyle: {
+          color: '#40a9ff',
+        },
+      },
+    ],
+    // 移除了graphic配置，将使用React组件方式展示风险等级说明
+  };
+
+  // 风险四色图配置
+  const colorChartOption = {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)',
+    },
+    legend: {
+      orient: 'vertical',
+      right: 10,
+      top: 'center',
+      data: ['低风险', '中风险', '高风险', '极高风险'],
+    },
+    series: [
+      {
+        name: '风险类型',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: ['35%', '50%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2,
+        },
+        label: {
+          show: false,
+          position: 'center',
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 20,
+            fontWeight: 'bold',
+          },
+        },
+        labelLine: {
+          show: false,
+        },
+        data: [
+          { value: 42, name: '低风险', itemStyle: { color: '#40a9ff' } },
+          { value: 60, name: '中风险', itemStyle: { color: '#faad14' } },
+          { value: 12, name: '高风险', itemStyle: { color: '#fa8c16' } },
+          { value: 35, name: '极高风险', itemStyle: { color: '#ff4d4f' } },
+        ],
+      },
+    ],
+  };
+
+  // 风险清单表格列配置
+  const columns = [
+    {
+      title: '风险名称',
+      dataIndex: 'riskName',
+      key: 'riskName',
+    },
+    {
+      title: '风险类别',
+      dataIndex: 'riskType',
+      key: 'riskType',
+    },
+    {
+      title: '风险等级',
+      dataIndex: 'riskLevel',
+      key: 'riskLevel',
+      render: (level) => getRiskLevelTag(level),
+    },
+    {
+      title: '评估方法',
+      dataIndex: 'assessmentMethod',
+      key: 'assessmentMethod',
+    },
+    {
+      title: '所在区域',
+      dataIndex: 'area',
+      key: 'area',
+    },
+    {
+      title: '责任部门',
+      dataIndex: 'department',
+      key: 'department',
+    },
+    {
+      title: '责任人',
+      dataIndex: 'responsiblePerson',
+      key: 'responsiblePerson',
+    },
+    {
+      title: '管控频次',
+      dataIndex: 'monitoringFrequency',
+      key: 'monitoringFrequency',
+    },
+    {
+      title: '管控状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (status) => getStatusTag(status),
+    },
+    {
+      title: '更新时间',
+      dataIndex: 'updateTime',
+      key: 'updateTime',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: () => (
+        <a>
+          查看详情 <CaretRightOutlined />
+        </a>
+      ),
+    },
+  ];
+
+  return (
+    <div className="risk-classification-container">
+      {/* 风险等级统计 - 整体渐变背景 */}
+      <Row gutter={16} style={{ marginBottom: 24 }}>
+        <Col xs={24}>
+          <Card 
+            hoverable 
+            style={{
+              background: 'linear-gradient(to right, rgba(255, 245, 244, 1), rgba(240, 255, 250, 1))',
+              border: '1px solid #e8f5fd'
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
+              {/* 左侧标题 */}
+              <div style={{ 
+                fontSize: '20px', 
+                fontWeight: 'bold', 
+                color: '#333',
+                padding: '16px',
+                minWidth: 150,
+                textAlign: 'center'
+              }}>
+                风险等级
+              </div>
+              
+              {/* 右侧四个分散的分数 */}
+              <div style={{ 
+                display: 'flex', 
+                flex: 1,
+                justifyContent: 'space-around',
+                flexWrap: 'wrap',
+                gap: 16
+              }}>
+                {riskLevelData.map((item, index) => (
+                  <div 
+                    key={index}
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'center',
+                      padding: '16px',
+                      backgroundColor: 'rgba(255, 255, 255, 0.7)',
+                      borderRadius: 8,
+                      minWidth: 120
+                    }}
+                  >
+                    <div style={{ 
+                      fontSize: '16px', 
+                      fontWeight: 'bold', 
+                      marginBottom: 8,
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 8
+                    }}>
+                      <span>{item.icon}</span>
+                      <span style={{ color: item.color }}>{item.level}</span>
+                    </div>
+                    <Statistic
+                      value={item.count}
+                      valueStyle={{ color: item.color }}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+
+      {/* 风险评估分析和风险四色图 */}
+      <style scoped>
+        {`
+          .risk-assessment-card .ant-card-head {
+            background: linear-gradient(to bottom, rgba(255, 245, 244, 1), rgba(255, 250, 250, 1)) !important;
+          }
+          .risk-color-chart-card .ant-card-head {
+            background: linear-gradient(to bottom left, rgba(255, 245, 244, 1), rgba(247, 250, 257, 1)) !important;
+            backgroundSize: '100% 100%';
+          }
+        `}
+      </style>
+      <Row gutter={16} style={{ marginBottom: 24 }}>
+        <Col xs={24} lg={16} >
+          <Card
+            title="风险评估分析"
+            className="risk-assessment-card"
+            style={{
+              background: 'linear-gradient(to bottom, rgba(255, 250, 250, 1), rgba(255, 255, 255, 1))',
+              backgroundSize: '100% 100%',
+            }}
+            extra={
+              <Select
+                value={selectedMonth}
+                style={{ width: 60 }}
+                onChange={setSelectedMonth}
+              >
+                <Option value="月">月</Option>
+                <Option value="季">季</Option>
+                <Option value="年">年</Option>
+              </Select>
+            }>
+            <Row gutter={16}>
+              {/* 风险评估分析图表在左边 */}
+              <Col xs={24} lg={16}>
+                <div style={{ height: 400 }}>
+                  <ReactECharts option={analysisChartOption} style={{ height: '100%' }} />
+                </div>
+              </Col>
+              {/* 风险等级说明在右边 */}
+              <Col xs={24} lg={8}>
+                <div style={{ height: 400, padding: 12, borderRadius: 4, overflowY: 'auto' }}>
+                  {/* <div style={{ fontSize: 14, fontWeight: 'bold', marginBottom: 12 }}>风险等级说明</div> */}
+                  <div>
+                    {[
+                      { level: '极高风险', months: '4月、7月、10月、12月', color: '#ff4d4f', bgColor: '#fff0f0', borderColor: '#ff4d4f' },
+                      { level: '高风险', months: '', color: '#fa8c16', bgColor: '#fff7e6', borderColor: '#fa8c16' },
+                      { level: '中风险', months: '', color: '#faad14', bgColor: '#fffbe6', borderColor: '#faad14' },
+                      { level: '低风险', months: '', color: '#40a9ff', bgColor: '#e6f7ff', borderColor: '#40a9ff' }
+                    ].map((item, index) => (
+                      <div
+                        key={index}
+                        style={{
+                          marginBottom: index < 3 ? 12 : 0,
+                          padding: 12,
+                          backgroundColor: item.bgColor,
+                          border: `1px solid ${item.borderColor}`,
+                          borderRadius: 4,
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'space-between'
+                        }}
+                      >
+                        <div style={{ display: 'flex', alignItems: 'center' }}>
+                          <div style={{
+                            width: 8,
+                            height: 8,
+                            borderRadius: '50%',
+                            backgroundColor: item.color,
+                            marginRight: 8
+                          }}></div>
+                          <span style={{ fontWeight: 'bold', color: item.color }}>{item.level}</span>
+                        </div>
+                        {item.months && (
+                          <div style={{ fontSize: 12, color: '#666' }}>{item.months}</div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </Col>
+            </Row>
+          </Card>
+        </Col>
+        <Col xs={24} lg={8}>
+          <Card title="风险四色图" className="risk-color-chart-card"
+                      style={{
+              background: 'linear-gradient(to bottom, rgba(255, 245, 244, 1), rgba(240, 255, 250, 1))'
+            }}
+          extra={
+            <Select
+              value={selectedMonth}
+              style={{ width: 60 }}
+              onChange={setSelectedMonth}
+            >
+              <Option value="月">月</Option>
+              <Option value="季">季</Option>
+              <Option value="年">年</Option>
+            </Select>
+          }>
+            <div style={{ height: 400 }}>
+              <ReactECharts option={colorChartOption} style={{ height: '100%' }} />
+            </div>
+          </Card>
+        </Col>
+      </Row>
+
+      {/* 风险清单 */}
+      <Card title="风险清单" extra={
+        <Select
+          value={selectedRiskLevel}
+          style={{ width: 150 }}
+          onChange={setSelectedRiskLevel}
+        >
+          <Option value="全部风险等级">全部风险等级</Option>
+          <Option value="极高风险">极高风险</Option>
+          <Option value="高风险">高风险</Option>
+          <Option value="中风险">中风险</Option>
+          <Option value="低风险">低风险</Option>
+        </Select>
+      }>
+        <Table
+          columns={columns}
+          dataSource={riskListData}
+          pagination={false}
+          scroll={{ x: 1300 }}
+        />
+        <div style={{ marginTop: 16, textAlign: 'right' }}>
+          <Pagination
+            current={currentPage}
+            pageSize={pageSize}
+            total={48}
+            onChange={setCurrentPage}
+            onShowSizeChange={(_, size) => setPageSize(size)}
+            showSizeChanger
+            showQuickJumper
+            showTotal={(total) => `共 ${total} 条`}
+          />
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default RiskClassificationControl;
\ No newline at end of file
diff --git a/src/pages/risk_classification/RiskClassificationControl.less b/src/pages/risk_classification/RiskClassificationControl.less
new file mode 100644
index 0000000..d422c36
--- /dev/null
+++ b/src/pages/risk_classification/RiskClassificationControl.less
@@ -0,0 +1,87 @@
+.risk-classification-container {
+  padding: 20px;
+  background: #f5f7fa;
+
+  .ant-card {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+
+    &:hover {
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  .ant-card-head {
+    background: #ffffff;
+    border-bottom: 1px solid #f0f0f0;
+
+    .ant-card-head-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #262626;
+    }
+  }
+
+  .ant-statistic-content {
+    font-size: 28px;
+    font-weight: 600;
+  }
+
+  .ant-table {
+    background: #ffffff;
+    border-radius: 4px;
+
+    .ant-table-thead > tr > th {
+      background: #fafafa;
+      font-weight: 600;
+      color: #262626;
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    .ant-table-tbody > tr > td {
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    .ant-table-tbody > tr:hover {
+      background: #fafafa;
+    }
+  }
+
+  .ant-pagination {
+    margin-top: 16px;
+  }
+
+  .ant-select {
+    .ant-select-selector {
+      border-radius: 4px;
+    }
+  }
+
+  // 图表容器样式
+  .chart-container {
+    height: 300px;
+  }
+
+  // 响应式调整
+  @media (max-width: 768px) {
+    padding: 10px;
+
+    .ant-statistic-content {
+      font-size: 24px;
+    }
+
+    .chart-container {
+      height: 250px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .ant-statistic-content {
+      font-size: 20px;
+    }
+
+    .chart-container {
+      height: 200px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/pages/topnavbar/TopNavBar.js b/src/pages/topnavbar/TopNavBar.js
index 1f5cbfe..c8b4eee 100644
--- a/src/pages/topnavbar/TopNavBar.js
+++ b/src/pages/topnavbar/TopNavBar.js
@@ -23,6 +23,11 @@ const menuItem = [
         key: '/topnavbar00/hrefficiency/safeMajorHazard',
         // icon: <SettingOutlined />,
       },
+      {
+        label: '风险分级管控',
+        key: '/topnavbar00/hrefficiency/riskclassification',
+        // icon: <SettingOutlined />,
+      },
       {
         label: '隐患排查',
         key: '/topnavbar00/hrefficiency/hiddentrouble',