新增安全教育培训页面

config/routes.js

@@ -91,10 +91,16 @@ export default [
 					    ]
 					},
                     // 隐患排查
-                    {
+                    {                        
                         path:'/topnavbar00/hrefficiency/hiddentrouble',
                         name: 'hiddentrouble',
                         component: './hrefficiency_hiddentrouble/HiddenTrouble',
+                    },
+                    // 安全教育培训
+                    {                        
+                        path:'/topnavbar00/hrefficiency/safetraining',
+                        name: 'safetraining',
+                        component: './safe_training/SafeTrainingList',
                     }
                 ],
             },

src/assets/img/safeEducationLight.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3666 0.194824C13.8289 0.194824 14.2047 0.562877 14.2047 1.01668V13.1826H2.05037V13.5729C2.05037 14.0993 2.46262 14.5295 2.99029 14.5832L3.09759 14.5876H13.9945V15.8052H3.09759C1.8714 15.8052 0.869921 14.8787 0.797366 13.709L0.792969 13.5729V1.01646C0.792969 0.563097 1.1685 0.194824 1.63131 0.194824H13.3664H13.3666ZM3.89086 7.48377C3.89086 9.44628 5.48575 11.0506 7.43375 11.0506C9.38175 11.0506 10.9766 9.44518 10.9766 7.48267H3.89108V7.48377H3.89086ZM7.43397 2.13161C7.07867 2.13161 6.72535 2.16723 6.37115 2.27452V4.62817H5.66252V2.55859C5.01811 2.88612 4.4778 3.38688 4.1023 4.00458C3.7268 4.62228 3.53099 5.33245 3.53688 6.05531H2.82715V6.76899H12.0375V6.05531H11.3302C11.3302 4.52109 10.4795 3.20103 9.20322 2.55859V4.62817H8.4957V2.27562C8.15055 2.17492 7.79238 2.12601 7.43287 2.13051L7.43397 2.13161Z" fill="white"/>
+</svg>

src/pages/nav_system_content/SystemContentList.js

@@ -19,6 +19,7 @@ import danger1 from '@/assets/img/danger1.svg'
 import license from '@/assets/img/license.svg'
 import people from '@/assets/img/people.svg'
 import risk from '@/assets/img/risk.svg'
+import safeEducationLight from '@/assets/img/safeEducationLight.svg'
 import { CustomBreadcrumb } from '@/components/GlobalComponent'
 
 
@@ -117,12 +118,18 @@ const SystemContentList = (props) => {
                 "key": "/topnavbar00/hrefficiency/allstaffuph",
                 "label": "全员效率监控"
             },
-            {
+            {                
                 "path": "/topnavbar00/hrefficiency/hiddentrouble",
                 icon: <img src={risk} alt="工时仪表盘" style={{ width: '16px', height: '16px' }} />,
                 "key": "/topnavbar00/hrefficiency/hiddentrouble",
                 "label": "隐患排查"
             },
+            {                
+                "path": "/topnavbar00/hrefficiency/safetraining",
+                icon: <img src={book} alt="安全教育培训" style={{ width: '16px', height: '16px' }} />,
+                "key": "/topnavbar00/hrefficiency/safetraining",
+                "label": "安全教育培训"
+            },
             {
                 "path": "/topnavbar00/hrefficiency/system",
                 icon: <img src={people} alt="工时仪表盘" style={{ width: '16px', height: '16px' }} />,
@@ -368,6 +375,10 @@ const SystemContentList = (props) => {
                                 else if (item.key === '/topnavbar00/hrefficiency/staffsheet' && typeof danger1 !== 'undefined') {
                                     iconSrc = danger1;
                                 }
+                                // 安全教育培训激活态使用safeEducationLight
+                                else if (item.key === '/topnavbar00/hrefficiency/safetraining' && typeof safeEducationLight !== 'undefined') {
+                                    iconSrc = safeEducationLight;
+                                }
                             }
 
                             icon = <img

src/pages/safe_training/SafeTrainingList.js

@@ -0,0 +1,423 @@
+import { Card, Table, Button, Input, Space, Popconfirm, message, Form, Select, DatePicker, Modal } from 'antd';
+import { SearchOutlined, BellOutlined, CheckOutlined, ExclamationOutlined, ClockCircleOutlined, FileTextOutlined, BarChartOutlined } from '@ant-design/icons';
+import { useState, useEffect } from 'react';
+import { Row, Col, List, Avatar, Empty, Badge, Tag } from 'antd';
+import './SafeTrainingList.less';
+import ReactECharts from 'echarts-for-react';
+
+const { Column } = Table;
+
+// 数据统计模拟数据
+const statsData = [
+  {
+    title: '年度计划',
+    count: 126,
+    completed: 25,
+    icon: <FileTextOutlined />,
+  },
+  {
+    title: '季度计划',
+    count: 14,
+    completed: 10,
+    icon: <FileTextOutlined />,
+  },
+  {
+    title: '月度计划',
+    count: 32,
+    completed: 3,
+    icon: <FileTextOutlined />,
+  },
+  {
+    title: '进行中的计划',
+    count: 16,
+    status: '进行中',
+    icon: <ClockCircleOutlined />,
+  },
+];
+
+// 系统通知模拟数据
+const notifications = [
+  {
+    title: '技术团队转胎前培训即将开始',
+    time: '培训时间：2023-08-05，请提前准备相关材料',
+    duration: '55分钟前',
+  },
+  {
+    title: '新功能上线：培训计划模板已更新',
+    time: '新增5个行业特色培训模板，查看者使用',
+    duration: '295分钟前',
+  },
+  {
+    title: '新功能上线：培训计划模板已更新',
+    time: '新增5个行业特色培训模板，查看者使用',
+    duration: '309分钟前',
+  },
+];
+
+// 待审批模拟数据
+const pendingApprovals = [
+  {
+    id: '1',
+    title: '销售团队能力培训计划',
+    submitter: '张经理',
+    time: '2023-08-28',
+    status: '通过',
+  },
+  {
+    id: '2',
+    title: '产品知识更新培训',
+    submitter: '李总监',
+    time: '2023-08-29',
+    status: '通过',
+  },
+  {
+    id: '3',
+    title: '销售团队能力培训计划',
+    submitter: '张经理',
+    time: '2023-08-28',
+    status: '通过',
+  },
+  {
+    id: '4',
+    title: '销售团队能力培训计划',
+    submitter: '张经理',
+    time: '2023-08-28',
+    status: '通过',
+  },
+];
+
+// 培训完成情况分析数据
+const trainingCompletionData = {
+  title: {
+    text: '培训完成情况分析',
+    left: 'center',
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow',
+    },
+  },
+  legend: {
+    data: ['完成率'],
+    bottom: 0,
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '15%',
+    containLabel: true,
+  },
+  xAxis: {
+    type: 'category',
+    data: ['新员工培训', '新员工培训', '新员工培训', '新员工培训', '新员工培训'],
+  },
+  yAxis: {
+    type: 'value',
+    max: 100,
+  },
+  series: [
+    {
+      name: '完成率',
+      type: 'bar',
+      data: [90, 70, 95, 75, 85],
+      itemStyle: {
+        color: '#3F8600',
+      },
+    },
+  ],
+};
+
+// 满意度评分数据
+const satisfactionData = {
+  title: {
+    text: '满意度评分',
+    left: 'center',
+  },
+  tooltip: {
+    trigger: 'item',
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left',
+    data: ['非常满意', '满意', '一般', '不满意'],
+  },
+  series: [
+    {
+      name: '满意度',
+      type: 'pie',
+      radius: '60%',
+      data: [
+        {
+          value: 60,
+          name: '非常满意',
+          itemStyle: {
+            color: '#1890ff',
+          },
+        },
+        {
+          value: 20,
+          name: '满意',
+          itemStyle: {
+            color: '#52c41a',
+          },
+        },
+        {
+          value: 15,
+          name: '一般',
+          itemStyle: {
+            color: '#faad14',
+          },
+        },
+        {
+          value: 5,
+          name: '不满意',
+          itemStyle: {
+            color: '#f5222d',
+          },
+        },
+      ],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)',
+        },
+      },
+    },
+  ],
+};
+
+// 近期培训计划数据
+const recentTrainingData = [
+  {
+    id: '1',
+    name: '新员工入职培训-Q3',
+    target: '全厂员工',
+    type: '线上直播',
+    date: '2023-08-10至2023-08-15',
+    progress: '20%',
+    status: '进行中',
+  },
+  {
+    id: '2',
+    name: '新员工入职培训-Q3',
+    target: '全厂员工',
+    type: '线上直播',
+    date: '2023-08-10至2023-08-15',
+    progress: '40%',
+    status: '已完成',
+  },
+  {
+    id: '3',
+    name: '新员工入职培训-Q3',
+    target: '全厂员工',
+    type: '线上直播',
+    date: '2023-08-10至2023-08-15',
+    progress: '20%',
+    status: '待审核',
+  },
+  {
+    id: '4',
+    name: '新员工入职培训-Q3',
+    target: '全厂员工',
+    type: '线上直播',
+    date: '2023-08-10至2023-08-15',
+    progress: '20%',
+    status: '待审核',
+  },
+  {
+    id: '5',
+    name: '新员工入职培训-Q3',
+    target: '全厂员工',
+    type: '线上直播',
+    date: '2023-08-10至2023-08-15',
+    progress: '20%',
+    status: '待审核',
+  },
+];
+
+const SafeTrainingList = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(5);
+
+  // 处理状态标签颜色
+  const getStatusTag = (status) => {
+    switch (status) {
+      case '进行中':
+        return <Tag color="processing">进行中</Tag>;
+      case '已完成':
+        return <Tag color="success">已完成</Tag>;
+      case '待审核':
+        return <Tag color="warning">待审核</Tag>;
+      case '通过':
+        return <Tag color="success">通过</Tag>;
+      default:
+        return <Tag>{status}</Tag>;
+    }
+  };
+
+  // 处理操作按钮
+  const handleViewDetails = (record) => {
+    // 查看详情逻辑
+    console.log('查看详情:', record);
+  };
+
+  // 处理审批操作
+  const handleApprove = (id) => {
+    // 审批逻辑
+    console.log('审批通过:', id);
+  };
+
+  // 处理驳回操作
+  const handleReject = (id) => {
+    // 驳回逻辑
+    console.log('驳回:', id);
+  };
+
+  return (
+    <div className="safe-training-container">
+      {/* 统计数据卡片 */}
+      <Row gutter={[16, 16]} className="stats-row">
+        {statsData.map((item, index) => (
+          <Col xs={24} sm={12} md={6} key={index}>
+            <Card className="stat-card">
+              <div className="stat-content">
+                <div className="stat-icon">{item.icon}</div>
+                <div className="stat-info">
+                  <div className="stat-title">{item.title}</div>
+                  <div className="stat-count">{item.count}</div>
+                  {item.completed !== undefined && (
+                    <div className="stat-completed">已完成 {item.completed} 项</div>
+                  )}
+                  {item.status && (
+                    <div className="stat-status">{item.status}</div>
+                  )}
+                </div>
+              </div>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+
+      {/* 第二行：系统通知、图表区域 */}
+      <Row gutter={[16, 16]} className="second-row">
+        {/* 系统通知 */}
+        <Col xs={24} md={6}>
+          <Card title="系统通知" className="notification-card">
+            <List
+              className="notification-list"
+              dataSource={notifications}
+              renderItem={(item) => (
+                <List.Item className="notification-item">
+                  <Badge status="default" className="notification-dot" />
+                  <List.Item.Meta
+                    title={<span className="notification-title">{item.title}</span>}
+                    description={
+                      <>
+                        <span className="notification-time">{item.time}</span>
+                        <span className="notification-duration">{item.duration}</span>
+                      </>
+                    }
+                  />
+                </List.Item>
+              )}
+            />
+          </Card>
+        </Col>
+
+        {/* 培训完成情况分析图表 */}
+        <Col xs={24} md={9}>
+          <Card title="培训完成情况分析" className="chart-card">
+            <ReactECharts option={trainingCompletionData} style={{ height: '250px' }} />
+          </Card>
+        </Col>
+
+        {/* 满意度评分图表 */}
+        <Col xs={24} md={9}>
+          <Card title="满意度评分" className="chart-card">
+            <ReactECharts option={satisfactionData} style={{ height: '250px' }} />
+          </Card>
+        </Col>
+      </Row>
+
+      {/* 第三行：待审批、近期培训计划 */}
+      <Row gutter={[16, 16]} className="third-row">
+        {/* 待审批 */}
+        <Col xs={24} md={6}>
+          <Card title="待审批" className="approval-card">
+            <List
+              className="approval-list"
+              dataSource={pendingApprovals}
+              renderItem={(item) => (
+                <List.Item className="approval-item">
+                  <Badge status="default" className="approval-dot" />
+                  <List.Item.Meta
+                    title={<span className="approval-title">{item.title}</span>}
+                    description={
+                      <div className="approval-meta">
+                        <span className="approval-submitter">提交人：{item.submitter}</span>
+                        <span className="approval-time">提交时间：{item.time}</span>
+                      </div>
+                    }
+                  />
+                  <div className="approval-actions">
+                    <Button type="text" size="small" className="approve-btn">
+                      {item.status === '通过' ? '通过' : '批准'}
+                    </Button>
+                    <Button type="text" size="small" className="reject-btn">
+                      驳回
+                    </Button>
+                  </div>
+                </List.Item>
+              )}
+            />
+          </Card>
+        </Col>
+
+        {/* 近期培训计划 */}
+        <Col xs={24} md={18}>
+          <Card title="近期培训计划" className="training-plan-card">
+            <Table
+              dataSource={recentTrainingData}
+              pagination={{
+                current: currentPage,
+                pageSize: pageSize,
+                total: recentTrainingData.length,
+                showSizeChanger: true,
+                showTotal: (total, range) =>
+                  `共 ${total} 条 ${range[0]}-${range[1]}`
+              }}
+              rowKey="id"
+              size="small"
+              className="training-plan-table"
+            >
+              <Column title="培训名称" dataIndex="name" key="name" />
+              <Column title="培训对象" dataIndex="target" key="target" />
+              <Column title="培训形式" dataIndex="type" key="type" />
+              <Column title="日期" dataIndex="date" key="date" />
+              <Column title="进度" dataIndex="progress" key="progress" />
+              <Column
+                title="状态"
+                dataIndex="status"
+                key="status"
+                render={(status) => getStatusTag(status)}
+              />
+              <Column
+                title="操作"
+                key="action"
+                render={() => (
+                  <Button type="text" size="small" className="view-btn">
+                    查看
+                  </Button>
+                )}
+              />
+            </Table>
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default SafeTrainingList;

src/pages/safe_training/SafeTrainingList.less

@@ -0,0 +1,236 @@
+.safe-training-container {
+  padding: 16px;
+  background-color: #f0f2f5;
+}
+
+/* 统计卡片样式 */
+.stats-row {
+  margin-bottom: 16px;
+}
+
+.stat-card {
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #e8e8e8;
+  overflow: hidden;
+  transition: all 0.3s;
+  
+  &:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+  }
+}
+
+.stat-content {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+}
+
+.stat-icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #e6f7ff;
+  border-radius: 4px;
+  font-size: 24px;
+  color: #1890ff;
+  margin-right: 16px;
+}
+
+.stat-info {
+  flex: 1;
+}
+
+.stat-title {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.stat-count {
+  font-size: 24px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.stat-completed {
+  font-size: 12px;
+  color: #999;
+}
+
+.stat-status {
+  font-size: 12px;
+  color: #1890ff;
+  font-weight: 500;
+}
+
+/* 第二行样式 */
+.second-row {
+  margin-bottom: 16px;
+}
+
+/* 系统通知样式 */
+.notification-card {
+  height: 100%;
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+.notification-list {
+  .notification-item {
+    padding: 12px 0;
+    border-bottom: 1px solid #f0f0f0;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    .notification-dot {
+      margin-right: 8px;
+    }
+    
+    .notification-title {
+      font-size: 14px;
+      color: #333;
+      margin-bottom: 4px;
+      display: block;
+    }
+    
+    .notification-time {
+      font-size: 12px;
+      color: #999;
+      display: block;
+      margin-bottom: 2px;
+    }
+    
+    .notification-duration {
+      font-size: 12px;
+      color: #1890ff;
+      float: right;
+    }
+  }
+}
+
+/* 图表区域样式 */
+.chart-card {
+  height: 100%;
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+/* 第三行样式 */
+.third-row {
+  margin-bottom: 16px;
+}
+
+/* 待审批样式 */
+.approval-card {
+  height: 100%;
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+.approval-list {
+  .approval-item {
+    padding: 12px 0;
+    border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    align-items: center;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    .approval-dot {
+      margin-right: 8px;
+    }
+    
+    .approval-title {
+      font-size: 14px;
+      color: #333;
+      margin-bottom: 4px;
+      display: block;
+    }
+    
+    .approval-meta {
+      .approval-submitter {
+        font-size: 12px;
+        color: #999;
+        display: block;
+        margin-bottom: 2px;
+      }
+      
+      .approval-time {
+        font-size: 12px;
+        color: #999;
+      }
+    }
+    
+    .approval-actions {
+      margin-left: auto;
+      
+      .approve-btn {
+        color: #52c41a;
+        padding: 0 6px;
+      }
+      
+      .reject-btn {
+        color: #f5222d;
+        padding: 0 6px;
+      }
+    }
+  }
+}
+
+/* 近期培训计划样式 */
+.training-plan-card {
+  height: 100%;
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+.training-plan-table {
+  .ant-table-thead > tr > th {
+    background-color: #fafafa;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  
+  .ant-table-tbody > tr > td {
+    border-bottom: 1px solid #f0f0f0;
+  }
+  
+  .view-btn {
+    color: #1890ff;
+  }
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .safe-training-container {
+    padding: 8px;
+  }
+  
+  .stat-content {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .stat-icon {
+    margin-right: 0;
+    margin-bottom: 12px;
+  }
+  
+  .approval-item {
+    flex-direction: column;
+    align-items: flex-start !important;
+  }
+  
+  .approval-actions {
+    margin-left: 0 !important;
+    margin-top: 8px;
+  }
+}