lvjilong
/
dataTool
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增表格字段选择显示功能

This commit is contained in:
吕继龙 2025-04-09 18:41:38 +08:00
parent 5570dcf734
commit 974adb642f
1 changed files with 336 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

419
src/components/DataView.js
View File

@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
import { Table, Input, Spin } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { Table, Input, Spin, Dropdown, Checkbox, Button, Space } from 'antd';
import { SearchOutlined, SettingOutlined } from '@ant-design/icons';
const DataView = ({
projects,
@ -18,6 +18,288 @@ const DataView = ({
// 当前显示的数据
const displayedData = projects.slice(0, displayCount);
// 所有可能的列定义
const allColumns = [
{
title: '单位',
dataIndex: 'unit',
key: 'unit',
width: 120,
ellipsis: true,
},
{
title: '项目编号',
dataIndex: 'project_number',
key: 'project_number',
width: 120,
ellipsis: true,
},
{
title: '安全编码',
dataIndex: 'safety_code',
key: 'safety_code',
width: 120,
ellipsis: true,
},
{
title: '大项工程名称',
dataIndex: 'major_project_name',
key: 'major_project_name',
width: 150,
ellipsis: true,
},
{
title: '单项工程名称',
dataIndex: 'sub_project_name',
key: 'sub_project_name',
width: 200,
ellipsis: true,
},
{
title: '在施工程作业范围',
dataIndex: 'construction_scope',
key: 'construction_scope',
width: 150,
ellipsis: true,
},
{
title: '工程规模',
dataIndex: 'project_scale',
key: 'project_scale',
width: 120,
ellipsis: true,
},
{
title: '安全总监',
dataIndex: 'safety_director',
key: 'safety_director',
width: 120,
ellipsis: true,
},
{
title: '建设单位',
dataIndex: 'construction_unit',
key: 'construction_unit',
width: 150,
ellipsis: true,
},
{
title: '监理单位',
dataIndex: 'supervision_unit',
key: 'supervision_unit',
width: 150,
ellipsis: true,
},
{
title: '施工单位',
dataIndex: 'construction_company',
key: 'construction_company',
width: 150,
ellipsis: true,
},
{
title: '工程位置',
dataIndex: 'project_location',
key: 'project_location',
width: 150,
ellipsis: true,
},
{
title: '实际开工时间',
dataIndex: 'actual_start_time',
key: 'actual_start_time',
width: 120,
ellipsis: true,
},
{
title: '计划竣工时间',
dataIndex: 'planned_completion_time',
key: 'planned_completion_time',
width: 120,
ellipsis: true,
},
{
title: '完成时间',
dataIndex: 'completion_time',
key: 'completion_time',
width: 120,
ellipsis: true,
},
{
title: '下次梳理时间',
dataIndex: 'next_review_time',
key: 'next_review_time',
width: 120,
ellipsis: true,
},
{
title: '参建人数',
dataIndex: 'participants_count',
key: 'participants_count',
width: 100,
ellipsis: true,
},
{
title: '新班组进场数量',
dataIndex: 'new_team_count',
key: 'new_team_count',
width: 120,
ellipsis: true,
},
{
title: '新人进场数量',
dataIndex: 'new_person_count',
key: 'new_person_count',
width: 120,
ellipsis: true,
},
{
title: '带班人信息',
dataIndex: 'leader_info',
key: 'leader_info',
width: 150,
ellipsis: true,
},
{
title: '下周作业计划',
dataIndex: 'next_week_plan',
key: 'next_week_plan',
width: 150,
ellipsis: true,
render: (text) => {
if (text && text.length > 15) {
return <span title={text}>{text.substring(0, 15)}...</span>;
}
return text;
},
},
{
title: '下周8+2工况内容',
dataIndex: 'next_week_condition',
key: 'next_week_condition',
width: 150,
ellipsis: true,
render: (text) => {
if (text && text.length > 15) {
return <span title={text}>{text.substring(0, 15)}...</span>;
}
return text;
},
},
{
title: '当前工程进度',
dataIndex: 'current_progress',
key: 'current_progress',
width: 120,
ellipsis: true,
render: (text) => {
// 如果进度文本过长，只显示前15个字符加省略号
if (text && text.length > 15) {
return <span title={text}>{text.substring(0, 15)}...</span>;
}
return text;
},
},
{
title: '当前工程状态',
dataIndex: 'current_status',
key: 'current_status',
width: 120,
ellipsis: true,
},
{
title: '工期是否紧张',
dataIndex: 'is_schedule_tight',
key: 'is_schedule_tight',
width: 120,
render: (value) => (value ? '是' : '否'),
},
{
title: '是否存在"账外事"',
dataIndex: 'has_off_book_matters',
key: 'has_off_book_matters',
width: 150,
render: (value) => (value ? '是' : '否'),
},
{
title: '当前风险等级',
dataIndex: 'current_risk_level',
key: 'current_risk_level',
width: 120,
render: (text) => {
let color = '';
if (text === '高风险') {
color = 'red';
} else if (text === '中风险') {
color = 'orange';
} else if (text === '低风险') {
color = 'green';
}
return <span style={{ color }}>{text}</span>;
},
},
{
title: '风险判断理由',
dataIndex: 'risk_judgment_reason',
key: 'risk_judgment_reason',
width: 150,
ellipsis: true,
render: (text) => {
if (text && text.length > 15) {
return <span title={text}>{text.substring(0, 15)}...</span>;
}
return text;
},
},
{
title: '隐患提示/工作要求',
dataIndex: 'risk_tips',
key: 'risk_tips',
width: 150,
ellipsis: true,
render: (text) => {
if (text && text.length > 15) {
return <span title={text}>{text.substring(0, 15)}...</span>;
}
return text;
},
},
{
title: '备注',
dataIndex: 'remarks',
key: 'remarks',
width: 150,
ellipsis: true,
render: (text) => {
if (text && text.length > 15) {
return <span title={text}>{text.substring(0, 15)}...</span>;
}
return text;
},
},
];
// 默认显示的列（保持原来的8个列）
const defaultVisibleColumns = [
'unit',
'sub_project_name',
'construction_unit',
'current_progress',
'current_status',
'current_risk_level',
'is_schedule_tight',
'has_off_book_matters'
];
// 用于跟踪当前选择显示的列
const [visibleColumnKeys, setVisibleColumnKeys] = useState(defaultVisibleColumns);
// 当前显示的列
const visibleColumns = allColumns.filter(col =>
visibleColumnKeys.includes(col.key)
);
// 监听滚动事件
useEffect(() => {
const handleScroll = (e) => {
@ -49,83 +331,37 @@ const DataView = ({
setDisplayCount(50);
}, [projects]);
// 表格列定义
const columns = [
{
title: '单位',
dataIndex: 'unit',
key: 'unit',
width: 120,
ellipsis: true,
},
{
title: '单项工程名称',
dataIndex: 'sub_project_name',
key: 'sub_project_name',
width: 200,
ellipsis: true,
},
{
title: '建设单位',
dataIndex: 'construction_unit',
key: 'construction_unit',
width: 150,
ellipsis: true,
},
{
title: '当前工程进度',
dataIndex: 'current_progress',
key: 'current_progress',
width: 120,
ellipsis: true,
render: (text) => {
// 如果进度文本过长，只显示前15个字符加省略号
if (text && text.length > 15) {
return <span title={text}>{text.substring(0, 15)}...</span>;
}
return text;
},
},
{
title: '当前工程状态',
dataIndex: 'current_status',
key: 'current_status',
width: 120,
ellipsis: true,
},
{
title: '当前风险等级',
dataIndex: 'current_risk_level',
key: 'current_risk_level',
width: 120,
render: (text) => {
let color = '';
if (text === '高风险') {
color = 'red';
} else if (text === '中风险') {
color = 'orange';
} else if (text === '低风险') {
color = 'green';
}
return <span style={{ color }}>{text}</span>;
},
},
{
title: '工期是否紧张',
dataIndex: 'is_schedule_tight',
key: 'is_schedule_tight',
width: 120,
render: (value) => (value ? '是' : '否'),
},
{
title: '是否存在"账外事"',
dataIndex: 'has_off_book_matters',
key: 'has_off_book_matters',
width: 150,
render: (value) => (value ? '是' : '否'),
},
];
// 处理列选择变化
const handleColumnChange = (checkedValues) => {
setVisibleColumnKeys(checkedValues);
};
// 列选择下拉菜单内容
const columnSelectionMenu = (
<div style={{
padding: '8px',
backgroundColor: '#1f1f1f',
border: '1px solid #303030',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
color: '#ffffff'
}}>
<Checkbox.Group
value={visibleColumnKeys}
onChange={handleColumnChange}
style={{ display: 'flex', flexDirection: 'column' }}
>
{allColumns.map(column => (
<Checkbox
key={column.key}
value={column.key}
style={{ margin: '4px 0', color: '#ffffff' }}
>
<span style={{ color: '#ffffff' }}>{column.title}</span>
</Checkbox>
))}
</Checkbox.Group>
</div>
);
// 处理搜索输入变化
const handleSearchChange = (e) => {
@ -134,15 +370,32 @@ const DataView = ({
return (
<div className="data-view">
{/* 搜索框 */}
<div style={{ padding: '10px', borderBottom: '1px solid var(--vscode-border)' }}>
{/* 搜索框和列选择 */}
<div style={{
padding: '10px',
borderBottom: '1px solid var(--vscode-border)',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
}}>
<Input
placeholder="搜索单项工程名称"
prefix={<SearchOutlined />}
value={searchText}
onChange={handleSearchChange}
style={{ width: '100%' }}
style={{ width: 'calc(100% - 50px)' }}
/>
<Dropdown
overlay={columnSelectionMenu}
trigger={['click']}
placement="bottomRight"
>
<Button
type="text"
icon={<SettingOutlined />}
title="选择显示字段"
/>
</Dropdown>
</div>
{/* 数据表格 */}
@ -153,7 +406,7 @@ const DataView = ({
) : (
<div ref={tableContainerRef}>
<Table
columns={columns}
columns={visibleColumns}
dataSource={displayedData}
rowKey="id"
rowSelection={{