diff --git a/src/components/DataView.js b/src/components/DataView.js index 85a0c7a..28e0dcc 100644 --- a/src/components/DataView.js +++ b/src/components/DataView.js @@ -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 {text.substring(0, 15)}...; + } + 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 {text.substring(0, 15)}...; + } + return text; + }, + }, + { + title: '当前工程进度', + dataIndex: 'current_progress', + key: 'current_progress', + width: 120, + ellipsis: true, + render: (text) => { + // 如果进度文本过长,只显示前15个字符加省略号 + if (text && text.length > 15) { + return {text.substring(0, 15)}...; + } + 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 {text}; + }, + }, + { + title: '风险判断理由', + dataIndex: 'risk_judgment_reason', + key: 'risk_judgment_reason', + width: 150, + ellipsis: true, + render: (text) => { + if (text && text.length > 15) { + return {text.substring(0, 15)}...; + } + return text; + }, + }, + { + title: '隐患提示/工作要求', + dataIndex: 'risk_tips', + key: 'risk_tips', + width: 150, + ellipsis: true, + render: (text) => { + if (text && text.length > 15) { + return {text.substring(0, 15)}...; + } + return text; + }, + }, + { + title: '备注', + dataIndex: 'remarks', + key: 'remarks', + width: 150, + ellipsis: true, + render: (text) => { + if (text && text.length > 15) { + return {text.substring(0, 15)}...; + } + 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 {text.substring(0, 15)}...; - } - 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 {text}; - }, - }, - { - 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 = ( +
+ + {allColumns.map(column => ( + + {column.title} + + ))} + +
+ ); // 处理搜索输入变化 const handleSearchChange = (e) => { @@ -134,15 +370,32 @@ const DataView = ({ return (
- {/* 搜索框 */} -
+ {/* 搜索框和列选择 */} +
} value={searchText} onChange={handleSearchChange} - style={{ width: '100%' }} + style={{ width: 'calc(100% - 50px)' }} /> + +
{/* 数据表格 */} @@ -153,7 +406,7 @@ const DataView = ({ ) : (