main
wangyunfei
1 month ago
parent
3edb0804ae
commit
260445d936
@ -1,31 +1,632 @@
|
||||
import React from 'react';
|
||||
import { Card, Result } from 'antd';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Card, Result, CheckCircleOutlined, Button } from 'antd';
|
||||
import * as echarts from 'echarts';
|
||||
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 EvaluationReport = () => {
|
||||
const trendChartRef = useRef(null);
|
||||
const pieChartRef = useRef(null);
|
||||
const barChartRef = useRef(null);
|
||||
|
||||
// 表格相关状态
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
||||
const [selectedRows, setSelectedRows] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [dataSource, setDataSource] = useState([]);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 5,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
// 隐患趋势分析折线图
|
||||
useEffect(() => {
|
||||
if (trendChartRef.current) {
|
||||
const chart = echarts.init(trendChartRef.current);
|
||||
|
||||
const option = {
|
||||
color: ['#FF4D4F', '#FAAD14', '#52C41A'],
|
||||
legend: {
|
||||
data: ['重大隐患', '一般隐患', '轻微隐患'],
|
||||
top: "5px",
|
||||
left: "center",
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '20%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLabel: {
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '重大隐患',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#FF4D4F'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FF4D4F',
|
||||
borderColor: '#FF4D4F',
|
||||
borderWidth: 2
|
||||
},
|
||||
data: [12, 8, 15, 10, 18, 14, 20, 16, 22, 19, 25, 21]
|
||||
},
|
||||
{
|
||||
name: '一般隐患',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#FAAD14'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FAAD14',
|
||||
borderColor: '#FAAD14',
|
||||
borderWidth: 2
|
||||
},
|
||||
data: [25, 30, 28, 35, 32, 38, 40, 36, 42, 38, 45, 41]
|
||||
},
|
||||
{
|
||||
name: '轻微隐患',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#52C41A'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#52C41A',
|
||||
borderColor: '#52C41A',
|
||||
borderWidth: 2
|
||||
},
|
||||
data: [45, 50, 48, 55, 52, 58, 60, 56, 62, 58, 65, 61]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
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 (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();
|
||||
}
|
||||
};
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: '编号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 80,
|
||||
render: (text, record, index) => {
|
||||
const page = pagination.current || 1;
|
||||
const pageSize = pagination.pageSize || 5;
|
||||
const number = (page - 1) * pageSize + index + 1;
|
||||
return `0${number}`.slice(-2);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '报告名称',
|
||||
dataIndex: 'reportName',
|
||||
key: 'reportName',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '上传时间',
|
||||
dataIndex: 'uploadTime',
|
||||
key: 'uploadTime',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '版本',
|
||||
dataIndex: 'version',
|
||||
key: 'version',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
render: (text) => {
|
||||
const statusMap = {
|
||||
'已完成': { color: '#52C41A', bg: '#F6FFED' },
|
||||
'处理中': { color: '#FAAD14', bg: '#FFFBE6' },
|
||||
'待审核': { color: '#1890FF', bg: '#E6F7FF' }
|
||||
};
|
||||
const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' };
|
||||
return (
|
||||
<span style={{
|
||||
color: status.color,
|
||||
backgroundColor: status.bg,
|
||||
padding: '2px 8px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px'
|
||||
}}>
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '上传人',
|
||||
dataIndex: 'uploader',
|
||||
key: 'uploader',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 80,
|
||||
render: (_, record) => (
|
||||
<div>
|
||||
<Button type="link" size="small" style={{ padding: 0 }}>
|
||||
下载
|
||||
</Button>
|
||||
</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.EcontainerLeft}>
|
||||
<div className={styles.EcontainerLeftTop}>
|
||||
<div className={styles.EcontainerLeftTopLeft}></div>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
<div className={styles.EcontainerLeftBottom}></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>
|
||||
|
||||
</div>
|
||||
<div className={styles.EcontainerRight}></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.EcontainerBottom}></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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,225 @@
|
||||
.Econtainer {
|
||||
padding: 8px 6px 0px 6px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
// 第一个大块 - 高度16%
|
||||
.EcontainerTop {
|
||||
height: 16%;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 第二个大块 - 三个图表块
|
||||
.EcontainerMiddle {
|
||||
height: 30%;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.sectionContent {
|
||||
height: 100%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 第三大块 - 评估报告表格
|
||||
.EcontainerBottom {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
|
||||
.tableHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.tableTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
|
||||
.titleIcon {
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
background-color: #2E4CD4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableContainer {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
:global(.ant-table-wrapper) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:global(.ant-table) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:global(.ant-table-container) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:global(.ant-table-body) {
|
||||
height: calc(100% - 55px); // 减去表头高度
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
:global(.ant-table-tbody > tr > td) {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:global(.ant-table-thead > tr > th) {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
:global(.ant-pagination) {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue