消防

src/pages/business_basic/module/EvaluationReport.js

@@ -1,300 +1,634 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
-import { Card, Table, Button, Modal, Form, Input, Select, message, Space, Tag } from 'antd';
+import { Card, Result, CheckCircleOutlined, Button } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
+import * as echarts from 'echarts';
-import './EvaluationReport.less';
+import StandardTable from '@/components/StandardTable';
+import styles from './EvaluationReport.less';
+
+import img1 from '@/assets/safe_majorHazard/online_monitoring/img1.png';
+import img2 from '@/assets/safe_majorHazard/online_monitoring/img2.png';
+import img3 from '@/assets/safe_majorHazard/online_monitoring/img3.png';
 
-const { Option } = Select;
 
 const EvaluationReport = () => {
-  const [form] = Form.useForm();
+    const trendChartRef = useRef(null);
-  const [dataSource, setDataSource] = useState([]);
+    const pieChartRef = useRef(null);
-  const [loading, setLoading] = useState(false);
+    const barChartRef = useRef(null);
-  const [modalVisible, setModalVisible] = useState(false);
+    
-  const [editingRecord, setEditingRecord] = useState(null);
+    // 表格相关状态
-  const [pagination, setPagination] = useState({
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-    current: 1,
+    const [selectedRows, setSelectedRows] = useState([]);
-    pageSize: 10,
+    const [loading, setLoading] = useState(false);
-    total: 0,
+    const [dataSource, setDataSource] = useState([]);
-  });
+    const [pagination, setPagination] = useState({
-
+        current: 1,
-  // 模拟数据
+        pageSize: 5,
-  const mockData = [
+        total: 0,
-    {
-      id: 1,
-      reportName: '2024年第一季度安全评估报告',
-      reportType: '季度评估',
-      assessmentPeriod: '2024-01-01 至 2024-03-31',
-      assessor: '张三',
-      status: '已完成',
-      createTime: '2024-04-01 10:00:00',
-      description: '对第一季度安全生产情况进行全面评估',
-    },
-    {
-      id: 2,
-      reportName: '2024年年度安全评估报告',
-      reportType: '年度评估',
-      assessmentPeriod: '2024-01-01 至 2024-12-31',
-      assessor: '李四',
-      status: '进行中',
-      createTime: '2024-01-15 14:30:00',
-      description: '年度安全生产综合评估',
-    },
-  ];
-
-  useEffect(() => {
-    fetchData();
-  }, [pagination.current, pagination.pageSize]);
-
-  const fetchData = async () => {
-    setLoading(true);
-    try {
-      // 模拟API调用
-      setTimeout(() => {
-        setDataSource(mockData);
-        setPagination(prev => ({ ...prev, total: mockData.length }));
-        setLoading(false);
-      }, 500);
-    } catch (error) {
-      message.error('获取数据失败');
-      setLoading(false);
-    }
-  };
-
-  const handleAdd = () => {
-    setEditingRecord(null);
-    form.resetFields();
-    setModalVisible(true);
-  };
-
-  const handleEdit = (record) => {
-    setEditingRecord(record);
-    form.setFieldsValue(record);
-    setModalVisible(true);
-  };
-
-  const handleDelete = (record) => {
-    Modal.confirm({
-      title: '确认删除',
-      content: `确定要删除评估报告"${record.reportName}"吗？`,
-      onOk: () => {
-        setDataSource(dataSource.filter(item => item.id !== record.id));
-        message.success('删除成功');
-      },
-    });
-  };
-
-  const handleView = (record) => {
-    Modal.info({
-      title: '查看评估报告',
-      content: (
-        <div>
-          <p><strong>报告名称：</strong>{record.reportName}</p>
-          <p><strong>报告类型：</strong>{record.reportType}</p>
-          <p><strong>评估周期：</strong>{record.assessmentPeriod}</p>
-          <p><strong>评估人：</strong>{record.assessor}</p>
-          <p><strong>状态：</strong>{record.status}</p>
-          <p><strong>创建时间：</strong>{record.createTime}</p>
-          <p><strong>描述：</strong>{record.description}</p>
-        </div>
-      ),
-      width: 600,
     });
-  };
+
-
+    // 隐患趋势分析折线图
-  const handleSubmit = async (values) => {
+    useEffect(() => {
-    try {
+        if (trendChartRef.current) {
-      if (editingRecord) {
+            const chart = echarts.init(trendChartRef.current);
-        // 编辑
+            
-        setDataSource(dataSource.map(item => 
+            const option = {
-          item.id === editingRecord.id ? { ...item, ...values } : item
+                color: ['#FF4D4F', '#FAAD14', '#52C41A'],
-        ));
+                legend: {
-        message.success('编辑成功');
+                    data: ['重大隐患', '一般隐患', '轻微隐患'],
-      } else {
+                    top: "5px",
-        // 新增
+                    left: "center",
-        const newRecord = {
+                    itemGap: 20,
-          id: Date.now(),
+                    textStyle: {
-          ...values,
+                        fontSize: 10
-          status: '进行中',
+                    }
-          createTime: new Date().toLocaleString(),
+                },
-        };
+                grid: {
-        setDataSource([...dataSource, newRecord]);
+                    left: '3%',
-        message.success('添加成功');
+                    right: '4%',
-      }
+                    bottom: '3%',
-      setModalVisible(false);
+                    top: '20%',
-      form.resetFields();
+                    containLabel: true
-    } catch (error) {
+                },
-      message.error('操作失败');
+                xAxis: {
-    }
+                    type: 'category',
-  };
+                    boundaryGap: false,
-
+                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-  const columns = [
+                    axisLabel: {
-    {
+                        fontSize: 10
-      title: '报告名称',
+                    }
-      dataIndex: 'reportName',
+                },
-      key: 'reportName',
+                yAxis: {
-      width: 200,
+                    type: 'value',
-    },
+                    axisLabel: {
-    {
+                        fontSize: 10
-      title: '报告类型',
+                    }
-      dataIndex: 'reportType',
+                },
-      key: 'reportType',
+                series: [
-      width: 120,
+                    {
-    },
+                        name: '重大隐患',
-    {
+                        type: 'line',
-      title: '评估周期',
+                        smooth: true,
-      dataIndex: 'assessmentPeriod',
+                        symbol: 'circle',
-      key: 'assessmentPeriod',
+                        symbolSize: 6,
-      width: 200,
+                        lineStyle: {
-    },
+                            width: 2,
-    {
+                            color: '#FF4D4F'
-      title: '评估人',
+                        },
-      dataIndex: 'assessor',
+                        itemStyle: {
-      key: 'assessor',
+                            color: '#FF4D4F',
-      width: 100,
+                            borderColor: '#FF4D4F',
-    },
+                            borderWidth: 2
-    {
+                        },
-      title: '状态',
+                        data: [12, 8, 15, 10, 18, 14, 20, 16, 22, 19, 25, 21]
-      dataIndex: 'status',
+                    },
-      key: 'status',
+                    {
-      width: 100,
+                        name: '一般隐患',
-      render: (status) => (
+                        type: 'line',
-        <Tag color={status === '已完成' ? 'green' : 'orange'}>
+                        smooth: true,
-          {status}
+                        symbol: 'circle',
-        </Tag>
+                        symbolSize: 6,
-      ),
+                        lineStyle: {
-    },
+                            width: 2,
-    {
+                            color: '#FAAD14'
-      title: '创建时间',
+                        },
-      dataIndex: 'createTime',
+                        itemStyle: {
-      key: 'createTime',
+                            color: '#FAAD14',
-      width: 150,
+                            borderColor: '#FAAD14',
-    },
+                            borderWidth: 2
-    {
+                        },
-      title: '操作',
+                        data: [25, 30, 28, 35, 32, 38, 40, 36, 42, 38, 45, 41]
-      key: 'action',
+                    },
-      width: 200,
+                    {
-      render: (_, record) => (
+                        name: '轻微隐患',
-        <Space size="small">
+                        type: 'line',
-          <Button
+                        smooth: true,
-            type="link"
+                        symbol: 'circle',
-            icon={<EyeOutlined />}
+                        symbolSize: 6,
-            onClick={() => handleView(record)}
+                        lineStyle: {
-          >
+                            width: 2,
-            查看
+                            color: '#52C41A'
-          </Button>
+                        },
-          <Button
+                        itemStyle: {
-            type="link"
+                            color: '#52C41A',
-            icon={<EditOutlined />}
+                            borderColor: '#52C41A',
-            onClick={() => handleEdit(record)}
+                            borderWidth: 2
-          >
+                        },
-            编辑
+                        data: [45, 50, 48, 55, 52, 58, 60, 56, 62, 58, 65, 61]
-          </Button>
+                    }
-          <Button
+                ]
-            type="link"
+            };
-            danger
+
-            icon={<DeleteOutlined />}
+            chart.setOption(option);
-            onClick={() => handleDelete(record)}
+
-          >
+            const handleResize = () => {
-            删除
+                if (chart && !chart.isDisposed()) {
-          </Button>
+                    chart.resize();
-        </Space>
+                }
-      ),
+            };
-    },
+
-  ];
+            window.addEventListener('resize', handleResize);
-
+
-  return (
+            return () => {
-    <div className="evaluation-report">
+                window.removeEventListener('resize', handleResize);
-      <Card
+                if (chart && !chart.isDisposed()) {
-        title="评估报告管理"
+                    chart.dispose();
-        extra={
+                }
-          <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
+            };
-            新增报告
+        }
-          </Button>
+    }, []);
+
+    // 隐患类型分布玫瑰饼图
+    useEffect(() => {
+        if (pieChartRef.current) {
+            const chart = echarts.init(pieChartRef.current);
+            
+            const option = {
+                color: ['#FF4D4F', '#FAAD14', '#52C41A', '#1890FF', '#722ED1', '#13C2C2'],
+                legend: {
+                    orient: 'vertical',
+                    left: 'left',
+                    top: 'center',
+                    textStyle: {
+                        fontSize: 10
+                    }
+                },
+                series: [
+                    {
+                        name: '隐患类型',
+                        type: 'pie',
+                        radius: ['20%', '70%'],
+                        center: ['60%', '50%'],
+                        roseType: 'area',
+                        itemStyle: {
+                            borderRadius: 5,
+                            borderColor: '#fff',
+                            borderWidth: 2
+                        },
+                        label: {
+                            show: true,
+                            formatter: '{b}: {c}',
+                            fontSize: 10
+                        },
+                        data: [
+                            { value: 35, name: '设备故障' },
+                            { value: 28, name: '操作失误' },
+                            { value: 22, name: '环境因素' },
+                            { value: 18, name: '管理缺陷' },
+                            { value: 15, name: '设计缺陷' },
+                            { value: 12, name: '其他' }
+                        ]
+                    }
+                ]
+            };
+
+            chart.setOption(option);
+
+            const handleResize = () => {
+                if (chart && !chart.isDisposed()) {
+                    chart.resize();
+                }
+            };
+
+            window.addEventListener('resize', handleResize);
+
+            return () => {
+                window.removeEventListener('resize', handleResize);
+                if (chart && !chart.isDisposed()) {
+                    chart.dispose();
+                }
+            };
+        }
+    }, []);
+
+    // 隐患整改情况柱状图
+    useEffect(() => {
+        if (barChartRef.current) {
+            const chart = echarts.init(barChartRef.current);
+            
+            const option = {
+                color: ['#FF4D4F', '#FAAD14', '#1890FF', '#52C41A', '#722ED1'],
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    top: '10%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['待处理', '处理中', '待审核', '已完成', '已关闭'],
+                    axisLabel: {
+                        fontSize: 10
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLabel: {
+                        fontSize: 10
+                    }
+                },
+                series: [
+                    {
+                        name: '数量',
+                        type: 'bar',
+                        data: [25, 18, 12, 35, 8],
+                        itemStyle: {
+                            borderRadius: [4, 4, 0, 0]
+                        },
+                        barWidth: '60%'
+                    }
+                ]
+            };
+
+            chart.setOption(option);
+
+            const handleResize = () => {
+                if (chart && !chart.isDisposed()) {
+                    chart.resize();
+                }
+            };
+
+            window.addEventListener('resize', handleResize);
+
+            return () => {
+                window.removeEventListener('resize', handleResize);
+                if (chart && !chart.isDisposed()) {
+                    chart.dispose();
+                }
+            };
         }
-      >
+    }, []);
-        <Table
+
-          columns={columns}
+    // 表格列定义
-          dataSource={dataSource}
+    const columns = [
-          loading={loading}
+        {
-          rowKey="id"
+            title: '编号',
-          pagination={{
+            dataIndex: 'id',
-            ...pagination,
+            key: 'id',
-            showSizeChanger: true,
+            width: 80,
-            showQuickJumper: true,
+            render: (text, record, index) => {
-            showTotal: (total, range) =>
+                const page = pagination.current || 1;
-              `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
+                const pageSize = pagination.pageSize || 5;
-            onChange: (page, pageSize) => {
+                const number = (page - 1) * pageSize + index + 1;
-              setPagination(prev => ({
+                return `0${number}`.slice(-2);
-                ...prev,
+            }
-                current: page,
+        },
-                pageSize: pageSize || prev.pageSize,
+        {
-              }));
+            title: '报告名称',
-            },
+            dataIndex: 'reportName',
-          }}
+            key: 'reportName',
-        />
+            width: 200,
-      </Card>
+        },
-
+        {
-      <Modal
+            title: '类型',
-        title={editingRecord ? '编辑评估报告' : '新增评估报告'}
+            dataIndex: 'type',
-        open={modalVisible}
+            key: 'type',
-        onCancel={() => {
+            width: 120,
-          setModalVisible(false);
+        },
-          form.resetFields();
+        {
-        }}
+            title: '上传时间',
-        onOk={() => form.submit()}
+            dataIndex: 'uploadTime',
-        width={600}
+            key: 'uploadTime',
-      >
+            width: 150,
-        <Form
+        },
-          form={form}
+        {
-          layout="vertical"
+            title: '版本',
-          onFinish={handleSubmit}
+            dataIndex: 'version',
-        >
+            key: 'version',
-          <Form.Item
+            width: 80,
-            name="reportName"
+        },
-            label="报告名称"
+        {
-            rules={[{ required: true, message: '请输入报告名称' }]}
+            title: '状态',
-          >
+            dataIndex: 'status',
-            <Input placeholder="请输入报告名称" />
+            key: 'status',
-          </Form.Item>
+            width: 100,
-
+            render: (text) => {
-          <Form.Item
+                const statusMap = {
-            name="reportType"
+                    '已完成': { color: '#52C41A', bg: '#F6FFED' },
-            label="报告类型"
+                    '处理中': { color: '#FAAD14', bg: '#FFFBE6' },
-            rules={[{ required: true, message: '请选择报告类型' }]}
+                    '待审核': { color: '#1890FF', bg: '#E6F7FF' }
-          >
+                };
-            <Select placeholder="请选择报告类型">
+                const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' };
-              <Option value="季度评估">季度评估</Option>
+                return (
-              <Option value="年度评估">年度评估</Option>
+                    <span style={{ 
-              <Option value="专项评估">专项评估</Option>
+                        color: status.color, 
-            </Select>
+                        backgroundColor: status.bg,
-          </Form.Item>
+                        padding: '2px 8px',
-
+                        borderRadius: '4px',
-          <Form.Item
+                        fontSize: '12px'
-            name="assessmentPeriod"
+                    }}>
-            label="评估周期"
+                        {text}
-            rules={[{ required: true, message: '请输入评估周期' }]}
+                    </span>
-          >
+                );
-            <Input placeholder="请输入评估周期" />
+            }
-          </Form.Item>
+        },
-
+        {
-          <Form.Item
+            title: '上传人',
-            name="assessor"
+            dataIndex: 'uploader',
-            label="评估人"
+            key: 'uploader',
-            rules={[{ required: true, message: '请输入评估人' }]}
+            width: 100,
-          >
+        },
-            <Input placeholder="请输入评估人" />
+        {
-          </Form.Item>
+            title: '操作',
-
+            key: 'action',
-          <Form.Item
+            width: 80,
-            name="description"
+            render: (_, record) => (
-            label="描述"
+                <div>
-          >
+                    <Button type="link" size="small" style={{ padding: 0 }}>
-            <Input.TextArea rows={4} placeholder="请输入描述" />
+                        下载
-          </Form.Item>
+                    </Button>
-        </Form>
+                </div>
-      </Modal>
+            ),
-    </div>
+        },
-  );
+    ];
+
+    // 模拟数据
+    const mockData = [
+        {
+            key: '1',
+            id: '001',
+            reportName: '2024年第一季度安全评估报告',
+            type: '季度报告',
+            uploadTime: '2024-01-15 08:30:25',
+            version: 'V1.0',
+            status: '已完成',
+            uploader: '张三',
+        },
+        {
+            key: '2',
+            id: '002',
+            reportName: '重大危险源专项评估报告',
+            type: '专项报告',
+            uploadTime: '2024-01-15 09:15:10',
+            version: 'V2.1',
+            status: '处理中',
+            uploader: '李四',
+        },
+        {
+            key: '3',
+            id: '003',
+            reportName: '年度安全风险评估报告',
+            type: '年度报告',
+            uploadTime: '2024-01-15 10:45:30',
+            version: 'V1.5',
+            status: '待审核',
+            uploader: '王五',
+        },
+        {
+            key: '4',
+            id: '004',
+            reportName: '设备安全评估报告',
+            type: '设备报告',
+            uploadTime: '2024-01-15 11:20:45',
+            version: 'V1.2',
+            status: '已完成',
+            uploader: '赵六',
+        },
+        {
+            key: '5',
+            id: '005',
+            reportName: '应急预案评估报告',
+            type: '应急报告',
+            uploadTime: '2024-01-15 12:10:20',
+            version: 'V3.0',
+            status: '已完成',
+            uploader: '孙七',
+        },
+        {
+            key: '6',
+            id: '006',
+            reportName: '环境安全评估报告',
+            type: '环境报告',
+            uploadTime: '2024-01-15 13:25:15',
+            version: 'V1.8',
+            status: '处理中',
+            uploader: '周八',
+        },
+        {
+            key: '7',
+            id: '007',
+            reportName: '人员安全培训评估报告',
+            type: '培训报告',
+            uploadTime: '2024-01-15 14:10:30',
+            version: 'V2.3',
+            status: '待审核',
+            uploader: '吴九',
+        },
+        {
+            key: '8',
+            id: '008',
+            reportName: '消防安全评估报告',
+            type: '消防报告',
+            uploadTime: '2024-01-15 15:45:20',
+            version: 'V1.1',
+            status: '已完成',
+            uploader: '郑十',
+        },
+        {
+            key: '9',
+            id: '009',
+            reportName: '化学品安全评估报告',
+            type: '化学品报告',
+            uploadTime: '2024-01-15 16:30:45',
+            version: 'V2.0',
+            status: '处理中',
+            uploader: '钱十一',
+        },
+        {
+            key: '10',
+            id: '010',
+            reportName: '职业健康安全评估报告',
+            type: '职业健康报告',
+            uploadTime: '2024-01-15 17:15:10',
+            version: 'V1.6',
+            status: '已完成',
+            uploader: '陈十二',
+        },
+        {
+            key: '11',
+            id: '011',
+            reportName: '安全管理制度评估报告',
+            type: '制度报告',
+            uploadTime: '2024-01-15 18:20:35',
+            version: 'V1.3',
+            status: '待审核',
+            uploader: '刘十三',
+        },
+        {
+            key: '12',
+            id: '012',
+            reportName: '安全投入评估报告',
+            type: '投入报告',
+            uploadTime: '2024-01-15 19:05:50',
+            version: 'V1.9',
+            status: '已完成',
+            uploader: '黄十四',
+        },
+    ];
+
+    // 初始化数据
+    useEffect(() => {
+        setPagination(prev => ({ ...prev, total: mockData.length }));
+    }, []);
+
+    // 根据分页获取当前页数据
+    const getCurrentPageData = () => {
+        const { current, pageSize } = pagination;
+        const startIndex = (current - 1) * pageSize;
+        const endIndex = startIndex + pageSize;
+        return mockData.slice(startIndex, endIndex);
+    };
+
+    // 表格选择变化
+    const onSelectChange = (newSelectedRowKeys, newSelectedRows) => {
+        setSelectedRowKeys(newSelectedRowKeys);
+        setSelectedRows(newSelectedRows);
+    };
+
+    // 分页变化处理
+    const handleTableChange = (pagination) => {
+        setPagination(prev => ({
+            ...prev,
+            current: pagination.current,
+            pageSize: pagination.pageSize,
+        }));
+    };
+
+    return (
+        <div className={styles.Econtainer}>
+            {/* 第一个大块 - 高度16% */}
+            <div className={styles.EcontainerTop}>
+                <div className={styles.sectionContent}>
+                    <div className={styles.blocksContainer}>
+                        {/* 块1 */}
+                        <div className={styles.blockItem}>
+                            <div className={styles.blockLeft}>
+                                <div className={styles.blockTitle}>总危险源数量</div>
+                                <div className={styles.blockNumber}>65</div>
+                                <div className={styles.blockChange}>
+                                    <span className={styles.arrow}>↑</span>
+                                    较昨日 +2
+                                </div>
+                            </div>
+                            <div className={styles.blockRight}>
+                                <img src={img1} alt="总危险源数量" className={styles.blockImage} />
+                            </div>
+                        </div>
+
+                        {/* 块2 */}
+                        <div className={styles.blockItem}>
+                            <div className={styles.blockLeft}>
+                                <div className={styles.blockTitle}>高风险设备</div>
+                                <div className={styles.blockNumber}>65</div>
+                                <div className={styles.blockChange}>
+                                    <span className={styles.arrow}>↑</span>
+                                    较昨日 +2
+                                </div>
+                            </div>
+                            <div className={styles.blockRight}>
+                                <img src={img2} alt="高风险设备" className={styles.blockImage} />
+                            </div>
+                        </div>
+
+                        {/* 块3 */}
+                        <div className={styles.blockItem}>
+                            <div className={styles.blockLeft}>
+                                <div className={styles.blockTitle}>今日预警次数</div>
+                                <div className={styles.blockNumber}>65</div>
+                                <div className={styles.blockChange}>
+                                    <span className={styles.arrow}>↑</span>
+                                    较昨日 +2
+                                </div>
+                            </div>
+                            <div className={styles.blockRight}>
+                                <img src={img3} alt="今日预警次数" className={styles.blockImage} />
+                            </div>
+                        </div>
+
+                        {/* 块4 */}
+                        <div className={styles.blockItem}>
+                            <div className={styles.blockLeft}>
+                                <div className={styles.blockTitle}>未处理预警</div>
+                                <div className={styles.blockNumber}>65</div>
+                                <div className={styles.blockChange}>
+                                    <span className={styles.arrow}>↑</span>
+                                    较昨日 +2
+                                </div>
+                            </div>
+                            <div className={styles.blockRight}>
+                                <img src={img1} alt="未处理预警" className={styles.blockImage} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* 第二个大块 - 三个图表块 */}
+            <div className={styles.EcontainerMiddle}>
+                <div className={styles.sectionContent}>
+                    {/* 第一个小块 - 隐患趋势分析 */}
+                    <div className={styles.chartBlock}>
+                        <div className={styles.chartTitle}>
+                            <div className={styles.titleIcon}></div>
+                            <div>隐患趋势分析</div>
+                        </div>
+                        <div className={styles.chartContainer} ref={trendChartRef}></div>
+                    </div>
+
+                    {/* 第二个小块 - 隐患类型分布 */}
+                    <div className={styles.chartBlock}>
+                        <div className={styles.chartTitle}>
+                            <div className={styles.titleIcon}></div>
+                            <div>隐患类型分布</div>
+                        </div>
+                        <div className={styles.chartContainer} ref={pieChartRef}></div>
+                    </div>
+
+                    {/* 第三小块 - 隐患整改情况 */}
+                    <div className={styles.chartBlock}>
+                        <div className={styles.chartTitle}>
+                            <div className={styles.titleIcon}></div>
+                            <div>隐患整改情况</div>
+                        </div>
+                        <div className={styles.chartContainer} ref={barChartRef}></div>
+                    </div>
+                </div>
+            </div>
+
+            {/* 第三大块 - 评估报告表格 */}
+            <div className={styles.EcontainerBottom}>
+                {/* 首行 左侧标题左对齐 右侧按钮右对齐 */}
+                <div className={styles.tableHeader}>
+                    <div className={styles.tableTitle}>
+                        <div className={styles.titleIcon}></div>
+                        <div>评估报告</div>
+                    </div>
+                </div>
+
+                {/* 表格 5行8列 带页码 每页5条数据 */}
+                <div className={styles.tableContainer}>
+                    <StandardTable
+                        columns={columns}
+                        data={{
+                            list: getCurrentPageData(),
+                            pagination: pagination
+                        }}
+                        loading={loading}
+                        selectionType="checkbox"
+                        onSelectRow={onSelectChange}
+                        onChange={handleTableChange}
+                        pagination={{
+                            ...pagination,
+                            showSizeChanger: false,
+                            showQuickJumper: true,
+                            showTotal: (total, range) => 
+                                `共 ${total} 条`,
+                        }}
+                        scroll={{ x: 1000 }}
+                    />
+                </div>
+            </div>
+        </div>
+    );
 };
 
 export default EvaluationReport;  

src/pages/business_basic/module/EvaluationReport.less

@@ -1,115 +1,225 @@
-.evaluation-report {
+.Econtainer {
-  padding: 20px;
+    padding: 8px 6px 0px 6px;
-
+    height: 100%;
-  .ant-card {
+    display: flex;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    flex-direction: column;
-    border-radius: 6px;
+    gap: 10px;
-
+
-    .ant-card-head {
+    // 第一个大块 - 高度16%
-      border-bottom: 1px solid #f0f0f0;
+    .EcontainerTop {
-      
+        height: 16%;
-      .ant-card-head-title {
+        border-radius: 4px;
-        font-size: 16px;
+        display: flex;
-        font-weight: 600;
+        flex-direction: column;
-        color: #262626;
+
-      }
+        .sectionContent {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+
+            .blocksContainer {
+                flex: 1;
+                display: flex;
+                gap: 10px;
+                height: 100%;
+
+                .blockItem {
+                    flex: 1;
+                    height: 100%;
+                    display: flex;
+                    background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 92.55%);
+                    border-radius: 4px;
+                    border: 2px solid #FFFFFF;
+
+                    .blockLeft {
+                        width: 60%;
+                        height: 100%;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                        padding: 15px;
+                        padding-left: 20px;
+                        gap: 8px;
+
+                        .blockTitle {
+                            font-family: PingFang SC;
+                            font-weight: 400;
+                            font-size: 12px;
+                            color: #666666;
+                            line-height: 1.2;
+                        }
+
+                        .blockNumber {
+                            font-family: PingFang SC;
+                            font-weight: 700;
+                            font-size: 24px;
+                            color: #333333;
+                            line-height: 1.2;
+                        }
+
+                        .blockChange {
+                            font-family: PingFang SC;
+                            font-weight: 400;
+                            font-size: 12px;
+                            color: #1269FF;
+                            line-height: 1.2;
+                            display: flex;
+                            align-items: center;
+                            gap: 4px;
+
+                            .arrow {
+                                font-size: 14px;
+                                font-weight: bold;
+                            }
+
+                            .checkIcon {
+                                font-size: 16px;
+                                color: #1269FF;
+                            }
+                        }
+                    }
+
+                    .blockRight {
+                        flex: 1;
+                        height: 100%;
+                        background-color: transparent;
+                        border-radius: 0 4px 4px 0;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+
+                        .blockImage {
+                            height: 130%;
+                            object-fit: contain;
+                            margin-right: -10px;
+                        }
+                    }
+                }
+            }
+        }
     }
 
-    .ant-card-body {
+    // 第二个大块 - 三个图表块
-      padding: 20px;
+    .EcontainerMiddle {
-    }
+        height: 30%;
-  }
+        border-radius: 4px;
-
+        background-color: #fff;
-  .ant-table {
+        display: flex;
-    .ant-table-thead > tr > th {
+        flex-direction: column;
-      background-color: #fafafa;
+
-      font-weight: 600;
+        .sectionContent {
-      color: #262626;
+            height: 100%;
-      border-bottom: 1px solid #f0f0f0;
+            display: flex;
+            flex-direction: row;
+            gap: 10px;
+            padding: 10px;
+
+            .chartBlock {
+                flex: 1;
+                height: 100%;
+                background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
+                border: 2px solid #fff;
+                border-radius: 4px;
+                display: flex;
+                flex-direction: column;
+                font-family: PingFang SC;
+                font-size: 14px;
+                color: #333333;
+
+                .chartTitle {
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    font-weight: 500;
+                    font-size: 14px;
+                    color: #333333;
+                    padding: 10px 15px 5px 15px;
+
+                    .titleIcon {
+                        width: 3px;
+                        height: 14px;
+                        background-color: #2E4CD4;
+                    }
+                }
+
+                .chartContainer {
+                    flex: 1;
+                    width: 100%;
+                    height: 120%;
+                    // // min-height: 200px;
+                }
+            }
+        }
     }
 
-    .ant-table-tbody > tr > td {
+    // 第三大块 - 评估报告表格
-      border-bottom: 1px solid #f0f0f0;
+    .EcontainerBottom {
-    }
+        flex: 1;
-
+        background-color: #fff;
-    .ant-table-tbody > tr:hover > td {
+        border-radius: 4px;
-      background-color: #f5f5f5;
+        display: flex;
-    }
+        flex-direction: column;
-  }
+        padding: 10px;
-
+
-  .ant-btn {
+        .tableHeader {
-    border-radius: 4px;
+            display: flex;
-    
+            justify-content: space-between;
-    &.ant-btn-primary {
+            align-items: center;
-      background-color: #1890ff;
+            margin-bottom: 10px;
-      border-color: #1890ff;
+
-      
+            .tableTitle {
-      &:hover {
+                display: flex;
-        background-color: #40a9ff;
+                align-items: center;
-        border-color: #40a9ff;
+                gap: 8px;
-      }
+                font-weight: 500;
-    }
+                font-size: 14px;
-
+                color: #333333;
-    &.ant-btn-link {
+
-      padding: 4px 8px;
+                .titleIcon {
-      height: auto;
+                    width: 3px;
-      
+                    height: 14px;
-      &:hover {
+                    background-color: #2E4CD4;
-        background-color: #f5f5f5;
+                }
-      }
+            }
-    }
+        }
-  }
+
-
+        .tableContainer {
-  .ant-tag {
+            flex: 1;
-    border-radius: 4px;
+            overflow: hidden;
-    font-size: 12px;
+
-    padding: 2px 8px;
+            :global(.ant-table-wrapper) {
-  }
+                height: 100%;
-
+            }
-  .ant-modal {
+
-    .ant-modal-header {
+            :global(.ant-table) {
-      border-bottom: 1px solid #f0f0f0;
+                height: 100%;
-      
+            }
-      .ant-modal-title {
+
-        font-size: 16px;
+            :global(.ant-table-container) {
-        font-weight: 600;
+                height: 100%;
-        color: #262626;
+            }
-      }
+
-    }
+            :global(.ant-table-body) {
-
+                height: calc(100% - 55px); // 减去表头高度
-    .ant-modal-body {
+                overflow-y: auto;
-      padding: 24px;
+            }
-    }
+
-
+            :global(.ant-table-tbody > tr > td) {
-    .ant-form-item-label > label {
+                padding: 8px 16px;
-      font-weight: 500;
+                font-size: 12px;
-      color: #262626;
+            }
-    }
+
-
+            :global(.ant-table-thead > tr > th) {
-    .ant-input,
+                padding: 8px 16px;
-    .ant-select-selector {
+                font-size: 12px;
-      border-radius: 4px;
+                font-weight: 500;
-      border: 1px solid #d9d9d9;
+                background-color: #fafafa;
-      
+            }
-      &:hover {
+
-        border-color: #40a9ff;
+            :global(.ant-pagination) {
-      }
+                margin-top: 10px;
-      
+                text-align: right;
-      &:focus,
+            }
-      &.ant-select-focused .ant-select-selector {
+        }
-        border-color: #40a9ff;
-        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-      }
-    }
-  }
-
-  .ant-pagination {
-    margin-top: 16px;
-    text-align: right;
-    
-    .ant-pagination-total-text {
-      color: #8c8c8c;
-      margin-right: 16px;
     }
-  }
 }

src/pages/business_basic/module/ResponsibilityImplementation.js

@@ -1,13 +1,26 @@
 
 import React from 'react'; 
-import { Card, Result, Timeline,Statistic, Table,Row, Input,Button,Col, Select} from 'antd';  
+import { Card, Statistic, Table,Row, Input,Button,Col, Select} from 'antd';
+import { PhoneOutlined, IdcardOutlined } from '@ant-design/icons';
 import StandardTable from '@/components/StandardTable';
 import styles from './ResponsibilityImplementation.less';
 
-
+import upload from '@/assets/business_basic/upload.png';
+import download from '@/assets/business_basic/download.png';
+import fire_fighting1 from '@/assets/business_basic/fire_fighting1.png';
+import fire_fighting2 from '@/assets/business_basic/fire_fighting2.png';
+import fire_fighting3 from '@/assets/business_basic/fire_fighting3.png';
+import frameIcon from '@/assets/business_basic/Frame.png';
+import background1 from '@/assets/business_basic/background1.png';
 
 const ResponsibilityImplementation = () => {  
 
+    // 搜索处理函数
+    const onSearch = (value) => {
+        console.log('搜索内容:', value);
+        // 这里可以添加实际的搜索逻辑
+    };
+
     const columns = [
         {
             title:"编号",
@@ -108,7 +121,7 @@ const ResponsibilityImplementation = () => {
         <div  className={styles.containerR}> 
            {/* 警告提示框 */}
             <div className={styles.warningBox}>
-                <img src={require('@/assets/business_basic/Frame.png')} alt="警告" className={styles.warningIcon} />
+                <img src={frameIcon} alt="警告" className={styles.warningIcon} />
                 <span className={styles.warningText}>
                     有5个消防设备需要维护，3个资质证书即将到期，请及时处理。
                 </span>
@@ -125,11 +138,11 @@ const ResponsibilityImplementation = () => {
                         </div>
                         <div className={styles.buttonGroup}>
                             <Button className={styles.actionBtn}>
-                                <span className={styles.btnIcon}>📤</span>
+                             <img src={upload} alt="上传图表" className={styles.btnIcon} />
-                                上传
+                                上传图表
                             </Button>
                             <Button className={styles.actionBtn}>
-                                <span className={styles.btnIcon}>📥</span>
+                                <img src={download} alt="下载" className={styles.btnIcon} />
                                 下载
                             </Button>
                         </div>
@@ -138,52 +151,98 @@ const ResponsibilityImplementation = () => {
                     {/* 第二行：图片占位 */}
                     <div className={styles.leftBottomSection}>
                         <div className={styles.imagePlaceholder}>
-                            <div className={styles.imageIcon}>🏢</div>
+                            <img src={fire_fighting1} alt="消防1" className={styles.imageIcon1} />
-                            <div className={styles.imageText}>组织架构图</div>
+                            <div className={styles.imageRow}>
+                                <img src={fire_fighting2} alt="消防2" className={styles.imageIcon2} />
+                                <img src={fire_fighting3} alt="消防3" className={styles.imageIcon3} />
+                            </div>
                         </div>
                     </div>
                 </div>
                 
+                
                 <div className={styles.containerOneRight}>
-                    {/* 第一块：标题 + 下拉选择框 + 导出按钮 */}
+                    {/* 第一行：标题 + 搜索栏 + 下拉选择框 */}
                     <div className={styles.rightTopSection}>
                         <div className={styles.rightTopLeft}>
                             <div className={styles.titleLeft}>
                                 <div className={styles.titleIcon}></div>
-                                <div>履职时间轴</div>
+                                <div>成员信息管理</div>
                             </div>
-                            <Select
-                                style={{ width: 100, marginLeft: 15 }}
-                                defaultValue="每月"
-                                className={styles.rightTopSelect}
-                                options={[
-                                    { value: '每月', label: '每月' },
-                                    { value: '每年', label: '每年' },
-                                ]}
-                                optionRender={(option) => (
-                                    <div className={styles.customOption}>
-                                        <span className={styles.optionIcon}>📅</span>
-                                        <span className={styles.optionText}>{option.label}</span>
-                                    </div>
-                                )}
-                            />
                         </div>
                         <div className={styles.rightTopRight}>
-                            <Button 
+                            <div className={styles.searchGroup}>
-                                type="primary" 
+                            <Input.Search placeholder="搜索成员..." onSearch={onSearch} style={{ width: 160}} />
-                                className={styles.exportBtn}
+                                <Select
-                                icon="📄"
+                                    defaultValue="全部组织"
-                            >
+                                    className={styles.organizationSelect}
-                                导出PDF考核报告
+                                    options={[
-                            </Button>
+                                        { value: '全部组织', label: '全部组织' },
+                                        { value: '技术部', label: '技术部' },
+                                        { value: '生产部', label: '生产部' },
+                                        { value: '安全部', label: '安全部' },
+                                    ]}
+                                />
+                            </div>
                         </div>
                     </div>
                     
-                    {/* 第二块：图片内容 */}
+                    {/* 第二行：三个小块 */}
                     <div className={styles.rightBottomSection}>
-                        <div className={styles.imagePlaceholder}>
+                        <div className={styles.threeBlocksContainer}>
-                            <div className={styles.imageIcon}>📊</div>
+                            <div className={styles.blockItem}>
-                            <div className={styles.imageText}>数据图表</div>
+                                <div className={styles.blockContent}>
+                                    <div className={styles.backgroundContainer}>
+                                        {/* 第一个块：姓名和单位 */}
+                                        <div className={styles.infoBlock}>
+                                            <div className={styles.nameText}>张明</div>
+                                            <div className={styles.unitText}>东义区消防队</div>
+                                        </div>
+                                        
+                                        {/* 第二个块：电话 */}
+                                        <div className={styles.infoBlock}>
+                                            <PhoneOutlined className={styles.infoIcon} />
+                                            <span className={styles.infoText}>132****3847</span>
+                                        </div>
+                                        
+                                        {/* 第三个块：身份证 */}
+                                        <div className={styles.infoBlock}>
+                                            <IdcardOutlined className={styles.infoIcon} />
+                                            <span className={styles.infoText}>1304************10</span>
+                                        </div>
+                                        
+                                        {/* 第四个块：职位标签 */}
+                                        <div className={styles.infoBlock}>
+                                            <div className={styles.tagContainer}>
+                                                <div className={styles.tagBlue1}>队长</div>
+                                                <div className={styles.tagBlue2}>消防工程师</div>
+                                            </div>
+                                        </div>
+                                        
+                                        {/* 第五个块：证书状态 */}
+                                        <div className={styles.infoBlock}>
+                                            <div className={styles.tagContainer}>
+                                                <div className={styles.tagBlue3}>消防工程师</div>
+                                                <div className={styles.tagYellow}>证书3天后到期</div>
+                                            </div>
+                                        </div>
+                                        
+                                        {/* 第六个块：操作按钮 */}
+                                        <div className={styles.actionBlock}>
+                                            <div className={styles.buttonContainer}>
+                                                <Button className={styles.editBtn}>编辑</Button>
+                                                <Button className={styles.deleteBtn}>删除</Button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className={styles.blockItem}>
+                                <div className={styles.blockContent}>待开发</div>
+                            </div>
+                            <div className={styles.blockItem}>
+                                <div className={styles.blockContent}>待开发</div>
+                            </div>
                         </div>
                     </div>
                 </div>

src/pages/business_basic/module/ResponsibilityImplementation.less

@@ -34,12 +34,12 @@
         margin-bottom: 10px;
         gap: 10px;
 
-        .containerOneLeft{
+        .containerOneLeft {
             background-color: white;
             width: calc(50% - 5px);
             display: flex;
             flex-direction: column;
-            padding: 15px;
+            padding: 5px 15px;
             border: 1px solid #f0f0f0;
             border-radius: 4px;
 
@@ -47,7 +47,7 @@
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
-                margin-bottom: 15px;
+                // margin-bottom: 15px;
 
                 .titleLeft {
                     display: flex;
@@ -73,12 +73,13 @@
                         display: flex;
                         align-items: center;
                         gap: 4px;
+                        height: 28px;
                         border: 1px solid #DFE4F6;
                         border-radius: 4px;
                         color: #2E4CD4;
                         font-weight: 500;
                         font-size: 12px;
-                        padding: 4px 8px;
+                        padding: 0px 8px;
                         background: transparent;
                         cursor: pointer;
                         transition: all 0.2s;
@@ -89,7 +90,8 @@
                         }
 
                         .btnIcon {
-                            font-size: 12px;
+                            width: 12px;
+                            height: 12px;
                         }
                     }
                 }
@@ -100,36 +102,58 @@
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                background-color: #fafafa;
-                border: 1px dashed #d9d9d9;
-                border-radius: 4px;
 
                 .imagePlaceholder {
                     display: flex;
                     flex-direction: column;
                     align-items: center;
-                    gap: 8px;
-                    color: #999999;
 
-                    .imageIcon {
+                    .imageIcon1 {
-                        font-size: 32px;
+                        transform: scale(0.9) translateY(-5px); // 稍微向上移动
-                        opacity: 0.6;
+                        object-fit: contain;
+                    }
+
+
+                    .imageRow {
+                        display: flex;
+                        justify-content: space-between;
+                        // width: 100%;
+                        margin-bottom: 10px;
+                        // padding-bottom: 20px;
+                        // gap: 12px;
+
+                        .imageIcon2 {
+                            height: 55%;
+                            transform: scale(0.7) translateY(-25%) translateX(20%); // 稍微向上移动
+                            object-fit: contain;
+                            background-color: #EFF5FE;
+                            // padding-bottom: 20px;
+                        }
+
+                        .imageIcon3 {
+                            height: 40%;
+                            transform: scale(0.65) translateY(-32%) translateX(4%); // 向上移动10px
+                            object-fit: contain;
+                            padding-bottom: 20px;
+                            // background-color: #EFF5FE;
+
+                        }
                     }
 
                     .imageText {
-                        font-size: 14px;
+                        font-size: 12px;
                         font-weight: 400;
                     }
                 }
             }
         }
 
-        .containerOneRight{
+        .containerOneRight {
             background-color: white;
             width: calc(50% - 5px);
             display: flex;
             flex-direction: column;
-            padding: 15px;
+            padding: 5px 15px;
             border: 1px solid #f0f0f0;
             border-radius: 4px;
 
@@ -137,7 +161,7 @@
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
-                margin-bottom: 15px;
+                margin-bottom: 10px;
 
                 .rightTopLeft {
                     display: flex;
@@ -161,18 +185,56 @@
                 }
 
                 .rightTopRight {
-                    .exportBtn {
+                    .searchGroup {
-                        background-color: #2E4CD4 !important;
+                        display: flex;
-                        border-color: #2E4CD4 !important;
+                        gap: 8px;
-                        color: #fff !important;
+                        align-items: center;
-                        font-size: 14px !important;
-                        font-weight: 500 !important;
-                        height: 32px;
-                        padding: 0 16px;
 
-                        &:hover {
+                        .searchInput {
-                            background-color: #1e3bb8 !important;
+                            width: 200px;
-                            border-color: #1e3bb8 !important;
+                            height: 32px;
+
+                            :global(.ant-input) {
+                                height: 32px;
+                                border-radius: 4px;
+                                border: 1px solid #d9d9d9;
+                                font-size: 14px;
+
+                                &:focus {
+                                    border-color: #2E4CD4;
+                                    box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2);
+                                }
+                            }
+
+                            :global(.ant-input-suffix) {
+                                color: #999999;
+                                font-size: 14px;
+                            }
+                        }
+
+                        .organizationSelect {
+                            width: 120px;
+                            height: 32px;
+
+                            :global(.ant-select-selector) {
+                                height: 32px !important;
+                                border-radius: 4px !important;
+                                border: 1px solid #d9d9d9 !important;
+
+                                &:hover {
+                                    border-color: #2E4CD4 !important;
+                                }
+
+                                &:focus {
+                                    border-color: #2E4CD4 !important;
+                                    box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2) !important;
+                                }
+                            }
+
+                            :global(.ant-select-selection-item) {
+                                line-height: 30px !important;
+                                font-size: 14px !important;
+                            }
                         }
                     }
                 }
@@ -180,29 +242,178 @@
 
             .rightBottomSection {
                 flex: 1;
-                display: flex;
+                padding: 5px 15px;
-                align-items: center;
+                width: 100%;
-                justify-content: center;
+                height: 100%;
 
-                .imagePlaceholder {
+                .threeBlocksContainer {
                     display: flex;
-                    flex-direction: column;
+                    gap: 20px;
-                    align-items: center;
-                    justify-content: center;
                     width: 100%;
                     height: 100%;
-                    background-color: #f5f5f5;
-                    border: 2px dashed #d9d9d9;
-                    border-radius: 4px;
 
-                    .imageIcon {
+                    .blockItem {
-                        font-size: 48px;
+                        width: 100%;
-                        margin-bottom: 10px;
+                        height: 100%;
-                    }
+                        flex: 1;
+                        display: flex;
+                        justify-content: center;
+                        background: url('@/assets/business_basic/background1.png') no-repeat center center;
+                        background-size: 100% auto;
 
-                    .imageText {
+                        .blockContent {
-                        font-size: 14px;
+                            // background-color: pink;
-                        color: #999999;
+                            font-size: 12px;
+                            color: #666666;
+                            font-weight: 400;
+                            width: 100%;
+                            height: 100%;
+                        }
+
+                        // 新的6个横向块样式
+                        .backgroundContainer {
+                            width: 100%;
+                            height: 100%;
+                            display: flex;
+                            flex-direction: column;
+                            gap: 8px;
+                            .infoBlock {
+                                width: 100%;
+                                display: flex;
+                                justify-content: flex-start;
+                                white-space: nowrap;
+                                .nameText {
+                                    font-size: 12px;
+                                    font-weight: 500;
+                                    color: #333333;
+                                    margin-left: 10px;
+                                    margin-right: 10px;
+                                    margin-top: 15px;
+                                }
+
+
+                                .unitText {
+                                    font-size: 10px;
+                                    font-weight: 400;
+                                    color: #666666;
+                                    margin-top: 18px;
+                                }
+
+                                .infoIcon {
+                                    font-size: 10px;
+                                    color: #666666;
+                                    margin-left: 10px;
+                                    margin-right: 10px;
+                                }
+    
+                                .infoText {
+                                    font-size: 10px;
+                                    font-weight: 400;
+                                    color: #666666;
+                             
+                                }
+    
+                            }
+                        
+                            .tagContainer {
+                                display: flex;
+                                gap: 8px;
+                                align-items: center;
+                            }
+
+                            .tagBlue1 {
+                                background-color: #D5E5FF;
+                                color: #1269FF;
+                                font-size: 10px;
+                                font-weight: 400;
+                                padding: 4px 8px;
+                                border-radius: 4px;
+                                white-space: nowrap;
+                                margin-left: 10px;
+                            }
+                            .tagBlue2 {
+                                background-color: #D5E5FF;
+                                color: #1269FF;
+                                font-size: 10px;
+                                font-weight: 400;
+                                padding: 4px 8px;
+                                border-radius: 4px;
+                                white-space: nowrap;
+                      
+                            }
+                            .tagBlue3 {
+                                background-color: #D5E5FF;
+                                color: #1269FF;
+                                font-size: 10px;
+                                font-weight: 400;
+                                padding: 4px 8px;
+                                border-radius: 4px;
+                                white-space: nowrap;
+                                margin-left: 10px;
+                      
+                            }
+
+                            .tagYellow {
+                                background-color: #FFF8E2;
+                                color: #FFC403;
+                                font-size: 10px;
+                                font-weight: 400;
+                                padding: 4px 8px;
+                                border-radius: 4px;
+                                white-space: nowrap;
+                            }
+
+                            .actionBlock {
+                                width: 100%;
+                                height: 50%;
+                                background-color: #BDD6FDCC;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                            }
+
+                            .buttonContainer {
+                                display: flex;
+                                gap: 15px;
+                                align-items: center;
+                                justify-content: center;
+                                width: 100%;
+
+                                .editBtn {
+                                    height: 80%;
+                                    background-color: #1269FF;
+                                    color: #fff;
+                                    font-size: 10px;
+                                    font-weight: 400;
+                                    border: none;
+                                    border-radius: 2px;
+                                    cursor: pointer;
+                                    padding: 2px 15px;
+    
+                                    &:hover {
+                                        background-color: #0f5ae0;
+                                    }
+                                }
+    
+                                .deleteBtn {
+                                    height: 80%;
+                                    background-color: #FF5F60;
+                                    color: #fff;
+                                    font-size: 10px;
+                                    font-weight: 400;
+                                    border: none;
+                                    border-radius: 2px;
+                                    cursor: pointer;
+                                    padding: 2px 15px;
+    
+                                    &:hover {
+                                        background-color: #ff4a4b;
+                                    }
+                                }
+                            }
+
+               
+                        }
                     }
                 }
             }
@@ -210,12 +421,12 @@
     }
 
 
-    .containerTwo{
+    .containerTwo {
         flex: 1;
         background-color: white;
         display: flex;
         flex-direction: column;
-        padding: 15px;
+        padding: 5px 15px;
         border: 1px solid #f0f0f0;
         border-radius: 4px;
 
@@ -266,7 +477,7 @@
                 gap: 8px;
 
                 :global(.ant-btn) {
-                    height: 32px;
+                    height: 28px;
                     padding: 0 16px;
                     border-radius: 4px;
                     font-size: 14px;
@@ -324,7 +535,8 @@
 }
 
 
-.rightTopSelect{
+.rightTopSelect {
+
     // 下拉框本身的样式
     :global(.ant-select-selector) {
         background-color: #f8f9fa !important;

src/pages/business_basic/module/RiskAssessment.less

@@ -1,241 +1,418 @@
-.risk-assessment {
+.Rcontainer {
-  padding: 20px;
+    padding: 8px 6px 0px 6px;
-
+    height: 100%;
-  .ant-card {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 6px;
-
-    .ant-card-head {
-      border-bottom: 1px solid #f0f0f0;
-      
-      .ant-card-head-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: #262626;
-      }
-    }
-
-    .ant-card-body {
-      padding: 20px;
-    }
-  }
-
-  .ant-table {
-    .ant-table-thead > tr > th {
-      background-color: #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 > td {
-      background-color: #f5f5f5;
-    }
-  }
-
-  .ant-btn {
-    border-radius: 4px;
-    
-    &.ant-btn-primary {
-      background-color: #1890ff;
-      border-color: #1890ff;
-      
-      &:hover {
-        background-color: #40a9ff;
-        border-color: #40a9ff;
-      }
-    }
-
-    &.ant-btn-link {
-      padding: 4px 8px;
-      height: auto;
-      
-      &:hover {
-        background-color: #f5f5f5;
-      }
-    }
-  }
-
-  .ant-tag {
-    border-radius: 4px;
-    font-size: 12px;
-    padding: 2px 8px;
-  }
-
-  .ant-rate {
-    font-size: 14px;
-    
-    .ant-rate-star {
-      margin-right: 2px;
-    }
-  }
-
-  .ant-progress {
-    .ant-progress-bg {
-      border-radius: 2px;
-    }
-    
-    &.ant-progress-small {
-      .ant-progress-text {
-        font-size: 10px;
-      }
-    }
-  }
-
-  .ant-modal {
-    .ant-modal-header {
-      border-bottom: 1px solid #f0f0f0;
-      
-      .ant-modal-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: #262626;
-      }
-    }
-
-    .ant-modal-body {
-      padding: 24px;
-    }
-
-    .ant-form-item-label > label {
-      font-weight: 500;
-      color: #262626;
-    }
-
-    .ant-input,
-    .ant-select-selector {
-      border-radius: 4px;
-      border: 1px solid #d9d9d9;
-      
-      &:hover {
-        border-color: #40a9ff;
-      }
-      
-      &:focus,
-      &.ant-select-focused .ant-select-selector {
-        border-color: #40a9ff;
-        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-      }
-    }
-  }
-
-  .ant-pagination {
-    margin-top: 16px;
-    text-align: right;
-    
-    .ant-pagination-total-text {
-      color: #8c8c8c;
-      margin-right: 16px;
-    }
-  }
-
-  // 风险等级颜色
-  .risk-level-high {
-    color: #ff4d4f;
-    font-weight: 600;
-  }
-
-  .risk-level-medium {
-    color: #faad14;
-    font-weight: 600;
-  }
-
-  .risk-level-low {
-    color: #52c41a;
-    font-weight: 600;
-  }
-
-  // 状态指示器
-  .status-indicator {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    
-    &.processed {
-      color: #52c41a;
-    }
-    
-    &.pending {
-      color: #ff4d4f;
-    }
-    
-    &.monitoring {
-      color: #1890ff;
-    }
-  }
-
-  // 评分显示
-  .score-display {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    gap: 10px;
-    gap: 4px;
+
-    
+    // 第一个div - 高度20%
-    .score-value {
+    .RcontainerTop {
-      font-weight: 600;
+        height: 16%;
-      font-size: 14px;
+        // background-color: #fff;
+        border-radius: 4px;
+        display: flex;
+        flex-direction: column;
+
+        .sectionContent {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            // padding: 15px;
+
+            .blocksContainer {
+                flex: 1;
+                display: flex;
+                gap: 10px;
+                height: 100%;
+
+                .blockItem {
+                    flex: 1;
+                    height: 100%;
+                    display: flex;
+                    background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 92.55%);
+                    border-radius: 4px;
+                    border: 2px solid #FFFFFF;
+
+                    .blockLeft {
+                        width: 60%;
+                        height: 100%;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                        padding: 15px;
+                        padding-left: 20px;
+                        gap: 8px;
+
+                        .blockTitle {
+                            font-family: PingFang SC;
+                            font-weight: 400;
+                            font-size: 12px;
+                            color: #666666;
+                            line-height: 1.2;
+                        }
+
+                        .blockNumber {
+                            font-family: PingFang SC;
+                            font-weight: 700;
+                            font-size: 24px;
+                            color: #333333;
+                            line-height: 1.2;
+                        }
+
+                        .blockChange {
+                            font-family: PingFang SC;
+                            font-weight: 400;
+                            font-size: 12px;
+                            color: #1269FF;
+                            line-height: 1.2;
+                            display: flex;
+                            align-items: center;
+                            gap: 4px;
+
+                            .arrow {
+                                font-size: 14px;
+                                font-weight: bold;
+                            }
+
+                            .checkIcon {
+                                font-size: 16px;
+                                color: #1269FF;
+                            }
+                        }
+                    }
+
+                    .blockRight {
+                        flex: 1;
+                        height: 100%;
+                        background-color: transparent;
+                        border-radius: 0 4px 4px 0;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+
+                        .blockImage {
+                            // width: 80%;      
+                            height: 130%;
+                            // height: 80%;
+                            object-fit: contain;
+                            margin-right: -10px;
+                        }
+                    }
+                }
+            }
+        }
     }
 
-    .score-label {
+    // 第二个div - 高度30%
-      font-size: 12px;
+    .RcontainerMiddle {
-      color: #8c8c8c;
+        height: 30%;
+        border-radius: 4px;
+        display: flex;
+        flex-direction: column;
+
+        .sectionContent {
+            height: 100%;
+            display: flex;
+            display: flex;
+            gap: 10px;
+            height: 100%;
+
+
+
+            .middleBlock1 {
+                flex: 1;
+                height: 100%;
+                background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
+
+                border: 2px solid #fff;
+                border-radius: 4px;
+                position: relative;
+                padding: 0px 10px 10px 2px;
+                font-family: PingFang SC;
+                font-size: 14px;
+                color: #333333;
+
+                .block1Header {
+                    position: absolute;
+                    top: 5px;
+                    left: 10px;
+                    right: 10px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    z-index: 10;
+
+                    .block1Title {
+                        display: flex;
+                        align-items: center;
+                        gap: 8px;
+                        font-weight: 500;
+                        font-size: 14px;
+                        color: #333333;
+
+                        .titleIcon {
+                            width: 3px;
+                            height: 14px;
+                            background-color: #2E4CD4;
+                        }
+                    }
+
+                    .block1Select {
+                        width: 100px;
+
+                        :global(.ant-select-selector) {
+                            height: 28px !important;
+                            font-size: 12px !important;
+                        }
+
+                        :global(.ant-select-selection-item) {
+                            line-height: 26px !important;
+                            font-size: 12px !important;
+                        }
+                    }
+                }
+
+                .riskLegend {
+                    position: absolute;
+                    Top: 18px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    gap: 10px;
+                    z-index: 10;
+
+                    .legendItem {
+                        display: flex;
+                        align-items: center;
+                        gap: 5px;
+
+                        .legendDot {
+                            width: 8px;
+                            height: 8px;
+                            border-radius: 50%;
+                        }
+
+                        .legendText {
+                            font-size: 12px;
+                            color: #333;
+                            font-weight: 400;
+                        }
+                    }
+                }
+
+                .block1Chart {
+                    width: 100%;
+                    height: 100%;
+                    margin-top: 20px;
+
+                    .mapImage {
+                        margin-top: 7%;
+                        width: 90%;
+                        height: 77%;
+                        object-fit: cover;
+                        border-radius: 4px;
+                        display: block;
+                        margin-left: auto;
+                        margin-right: auto;
+                    }
+                }
+            }
+
+            .middleBlock2 {
+                flex: 1;
+                height: 100%;
+                // background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
+                // border: 2px solid #fff;
+                background-color: #fff;
+                // border-radius: 4px;
+                display: flex;
+                flex-direction: column;
+                font-family: PingFang SC;
+                font-size: 14px;
+                color: #333333;
+                padding: 5px 10px 5px 10px;
+
+                .middleBlock2Title {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    // margin-bottom: 10px;
+
+                    .titleLeft {
+                        display: flex;
+                        align-items: center;
+                        gap: 8px;
+                        font-weight: 500;
+                        font-size: 14px;
+                        color: #333333;
+
+                        .titleIcon {
+                            width: 3px;
+                            height: 14px;
+                            background-color: #2E4CD4;
+                        }
+                    }
+
+                    .titleRight {
+                        display: flex;
+                        align-items: center;
+                        gap: 8px;
+                        font-size: 12px;
+                        color: #666;
+                    }
+                }
+
+                .middleBlock2Chart {
+                    width: 100%;
+                    height: 100%;
+                    // min-height: 200px;
+                }
+            }
+
+        }
     }
-  }
 
-  // 概率和影响程度显示
+    // 第三个div - 占满剩余位置
-  .rate-display {
+    .RcontainerBottom {
-    display: flex;
+        flex: 1; // 占满剩余空间
-    flex-direction: column;
+        display: flex;
-    align-items: center;
+        flex-direction: column;
-    gap: 4px;
+
-    
+        .sectionContent {
-    .rate-stars {
+            display: flex;
-      display: flex;
+            flex-direction: row;
-      align-items: center;
+            gap: 10px;
-      gap: 2px;
+            padding: 0;
-    }
+
-    
+            .leftBlock {
-    .rate-text {
+                width: 30%;
-      font-size: 12px;
+                height: 100%;
-      color: #8c8c8c;
+                background: url('@/assets/safe_majorHazard/online_monitoring/risk3.png') no-repeat center center;
-    }
+                background-size: cover;
-  }
+                padding: 0;
-
+                display: flex;
-  // 风险矩阵样式
+                flex-direction: column;
-  .risk-matrix {
+                gap: 10px;
-    display: grid;
+                padding: 15px;
-    grid-template-columns: repeat(5, 1fr);
+
-    gap: 8px;
+                .leftBlockTitle {
-    margin: 16px 0;
+                    display: flex;
-    
+                    align-items: center;
-    .matrix-cell {
+                    gap: 8px;
-      padding: 8px;
+                    font-family: PingFang SC;
-      text-align: center;
+                    font-weight: 500;
-      border: 1px solid #d9d9d9;
+                    font-size: 14px;
-      border-radius: 4px;
+                    color: #333333;
-      font-size: 12px;
+
-      
+                    .titleIcon {
-      &.high-risk {
+                        width: 3px;
-        background-color: #fff2f0;
+                        height: 16px;
-        border-color: #ff4d4f;
+                        background-color: #2E4CD4;
-        color: #ff4d4f;
+                    }
-      }
+                }
-      
+
-      &.medium-risk {
+                .leftBlockImage {
-        background-color: #fffbe6;
+                    height: 40%;
-        border-color: #faad14;
+                    width: 100%;
-        color: #faad14;
+                    border-radius: 4px;
-      }
+                    overflow: hidden;
-      
+                    display: flex;
-      &.low-risk {
+                    justify-content: center;
-        background-color: #f6ffed;
+                    align-items: center;
-        border-color: #52c41a;
+                    height: 80%;         
-        color: #52c41a;
+                }
-      }
+
+                .leftBlockItem {
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    padding: 10px;
+                    // background-color: #f5f5f5;
+                    border-radius: 4px;
+                    font-family: PingFang SC;
+
+                    .itemTitle {
+                        font-size: 12px;
+                        color: #666666;
+                        margin-bottom: 5px;
+                    }
+
+                    .itemValue {
+                        font-size: 14px;
+                        color: #333333;
+                        font-weight: 500;
+                    }
+                }
+            }
+
+            .rightBlock {
+                width: 68%;
+                height: 100%;
+                background-color: #fff;
+                padding: 0;
+                display: flex;
+                flex-direction: column;
+
+                .tableHeader {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 8px 15px 5px 15px;
+
+                    .tableTitle {
+                        display: flex;
+                        align-items: center;
+                        gap: 8px;
+                        font-family: PingFang SC;
+                        font-weight: 500;
+                        font-size: 14px;
+                        color: #333333;
+
+                        .titleIcon {
+                            width: 3px;
+                            height: 16px;
+                            background-color: #2E4CD4;
+                        }
+                    }
+                }
+
+                .tableContainer {
+                    flex: 1;
+                    overflow: hidden;
+
+                    :global(.ant-table) {
+                        font-size: 12px;
+                    }
+
+                    :global(.ant-table-thead > tr > th) {
+                        background-color: #f5f5fa;
+                        font-weight: 500;
+                        font-size: 14px;
+                        color: #333333;
+                        border-bottom: 1px solid #f0f0f0;
+                        padding: 8px 12px;
+                        text-align: center;
+                    }
+
+                    :global(.ant-table-tbody > tr > td) {
+                        padding: 8px 12px;
+                        border-bottom: 1px solid #f0f0f0;
+                        text-align: center;
+                    }
+
+                    :global(.ant-table-tbody > tr:hover > td) {
+                        background-color: #f5f5f5;
+                    }
+
+                    :global(.ant-pagination) {
+                        margin-top: 16px;
+                        text-align: right;
+                    }
+                }
+            }
+        }
     }
-  }
 }