377 lines
11 KiB
JavaScript
377 lines
11 KiB
JavaScript
import React, { useState,useEffect } from 'react';
|
||
import { makeStyles } from '@material-ui/core/styles';
|
||
import {
|
||
Paper,
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableContainer,
|
||
TableHead,
|
||
TableRow,
|
||
TextField,
|
||
Button,
|
||
Box,
|
||
IconButton,
|
||
ButtonGroup,
|
||
Grid
|
||
} from '@material-ui/core';
|
||
import SearchIcon from '@material-ui/icons/Search';
|
||
import RefreshIcon from '@material-ui/icons/Refresh';
|
||
import { DatePicker } from 'antd';
|
||
import moment from 'moment';
|
||
import { useDispatch, useSelector } from 'react-redux';
|
||
import ModalView from './view'
|
||
const { RangePicker } = DatePicker;
|
||
|
||
const useStyles = makeStyles((theme) => ({
|
||
root: {
|
||
width: '100%',
|
||
backgroundColor: 'transparent',
|
||
color: '#fff'
|
||
},
|
||
toolbar: {
|
||
padding: theme.spacing(2),
|
||
display: 'flex',
|
||
gap: theme.spacing(2),
|
||
alignItems: 'center',
|
||
borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
|
||
},
|
||
searchRow: {
|
||
display: 'flex',
|
||
gap: theme.spacing(2),
|
||
alignItems: 'center',
|
||
flexWrap: 'wrap'
|
||
},
|
||
searchField: {
|
||
'& .MuiInputBase-root': {
|
||
color: '#fff',
|
||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
||
borderRadius: 4,
|
||
width: 200
|
||
},
|
||
'& .MuiInputLabel-root': {
|
||
color: '#fff'
|
||
},
|
||
'& .MuiOutlinedInput-notchedOutline': {
|
||
borderColor: 'rgba(255, 255, 255, 0.1)'
|
||
}
|
||
},
|
||
datePicker: {
|
||
'& .MuiInputBase-root': {
|
||
color: '#fff',
|
||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
||
width: 200
|
||
},
|
||
'& .MuiIconButton-root': {
|
||
color: '#fff'
|
||
},
|
||
'& .MuiOutlinedInput-notchedOutline': {
|
||
borderColor: 'rgba(255, 255, 255, 0.1)'
|
||
}
|
||
},
|
||
buttonGroup: {
|
||
'& .MuiButton-root': {
|
||
color: '#fff',
|
||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||
'&.active': {
|
||
backgroundColor: '#2196f3',
|
||
borderColor: '#2196f3'
|
||
}
|
||
}
|
||
},
|
||
table: {
|
||
'& .MuiTableCell-head': {
|
||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
||
color: '#fff',
|
||
fontWeight: 'bold',
|
||
borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
|
||
},
|
||
'& .MuiTableCell-body': {
|
||
color: '#fff',
|
||
borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
|
||
}
|
||
},
|
||
status: {
|
||
padding: '4px 8px',
|
||
borderRadius: 4,
|
||
backgroundColor: 'rgba(33, 150, 243, 0.1)',
|
||
color: '#2196f3'
|
||
},
|
||
actionButton: {
|
||
color: '#2196f3',
|
||
'&:hover': {
|
||
backgroundColor: 'rgba(33, 150, 243, 0.1)'
|
||
}
|
||
}
|
||
}));
|
||
|
||
const TaskList = () => {
|
||
const classes = useStyles();
|
||
const [startDate, setStartDate] = useState(null);
|
||
const dispatch = useDispatch();
|
||
const [endDate, setEndDate] = useState(null);
|
||
const [activeType, setActiveType] = useState('daily');
|
||
const [visible, setVisible] = useState(false)
|
||
const handleTypeChange = (type) => {
|
||
setActiveType(type);
|
||
};
|
||
|
||
const columns = [
|
||
{ id: 'sequence', label: '序号', width: 70 },
|
||
{ id: 'city', label: '市' },
|
||
{ id: 'district', label: '区县' },
|
||
{ id: 'location', label: '街道乡镇' },
|
||
{ id: 'taskType', label: '任务标题' },
|
||
{ id: 'taskContent', label: '任务内容' },
|
||
{ id: 'status', label: '任务状态' },
|
||
{ id: 'person', label: '巡查人' },
|
||
{ id: 'startTime', label: '开始时间' },
|
||
{ id: 'endTime', label: '结束时间' },
|
||
{ id: 'problems', label: '问题数量', width: 100 },
|
||
{ id: 'processed', label: '待处理', width: 100 },
|
||
{ id: 'actions', label: '操作', width: 150 }
|
||
];
|
||
|
||
const mockData = [
|
||
{
|
||
sequence: 1,
|
||
city: '黄冈市',
|
||
district: '麻城市',
|
||
location: '',
|
||
taskType: '06-02明山水库日常巡查',
|
||
taskContent: '20250602每日巡检',
|
||
status: '未完成',
|
||
person: '姜兴军',
|
||
startTime: '2025-06-02 00:00:00',
|
||
endTime: '2025-06-08 23:59:59',
|
||
problems: 0,
|
||
processed: 0,
|
||
createTime: '2025-06-02 02:00:00',
|
||
creator: ''
|
||
},
|
||
{
|
||
sequence: 2,
|
||
city: '黄冈市',
|
||
district: '麻城市',
|
||
location: '',
|
||
taskType: '06-02浮桥河水库汛前巡查',
|
||
taskContent: '20250602每日巡检',
|
||
status: '未完成',
|
||
person: '熊杰',
|
||
startTime: '2025-06-02 00:00:00',
|
||
endTime: '2025-06-08 23:59:59',
|
||
problems: 0,
|
||
processed: 0,
|
||
createTime: '2025-06-02 02:00:00',
|
||
creator: ''
|
||
},
|
||
{
|
||
sequence: 3,
|
||
city: '黄冈市',
|
||
district: '麻城市',
|
||
location: '',
|
||
taskType: '06-02永丰水库特别检查',
|
||
taskContent: '20250602每日巡检',
|
||
status: '未完成',
|
||
person: '白斌',
|
||
startTime: '2025-06-02 00:00:00',
|
||
endTime: '2025-06-08 23:59:59',
|
||
problems: 0,
|
||
processed: 0,
|
||
createTime: '2025-06-02 02:00:00',
|
||
creator: ''
|
||
},
|
||
{
|
||
sequence: 4,
|
||
city: '黄冈市',
|
||
district: '麻城市',
|
||
location: '',
|
||
taskType: '06-02永红水库日常巡查',
|
||
taskContent: '20250602每日巡检',
|
||
status: '未完成',
|
||
person: '于静',
|
||
startTime: '2025-06-02 00:00:00',
|
||
endTime: '2025-06-08 23:59:59',
|
||
problems: 0,
|
||
processed: 0,
|
||
createTime: '2025-06-02 02:00:00',
|
||
creator: ''
|
||
},{
|
||
sequence: 5,
|
||
city: '黄冈市',
|
||
district: '麻城市',
|
||
location: '',
|
||
taskType: '06-02四新水库日常巡查',
|
||
taskContent: '20250602每日巡检',
|
||
status: '未完成',
|
||
person: '何义红',
|
||
startTime: '2025-06-02 00:00:00',
|
||
endTime: '2025-06-08 23:59:59',
|
||
problems: 0,
|
||
processed: 0,
|
||
createTime: '2025-06-02 02:00:00',
|
||
creator: ''
|
||
},
|
||
];
|
||
const flyTo = () => {
|
||
// dispatch?.runtime.setInfoDlg({ layerId: 'ChaoshiDetailLayer', properties: {} })
|
||
setVisible(true)
|
||
}
|
||
const [params, setParams] = useState({ tm: [] })
|
||
|
||
const searchTm = (e) => {
|
||
setParams({
|
||
...params,
|
||
stm: e[0].format("YYYY-MM-DD HH:mm"),
|
||
etm: e[1].format("YYYY-MM-DD HH:mm"),
|
||
tm: e,
|
||
})
|
||
};
|
||
useEffect(() => {
|
||
let options = "";
|
||
options = {
|
||
etm: moment().add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
|
||
stm: moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
|
||
tm: [
|
||
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
|
||
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
|
||
],
|
||
}
|
||
|
||
setParams(options)
|
||
|
||
}, [])
|
||
|
||
return (
|
||
<Paper className={classes.root}>
|
||
<Box className={classes.toolbar}>
|
||
<Box className={classes.searchRow}>
|
||
<ButtonGroup className={classes.buttonGroup}>
|
||
<Button
|
||
className={activeType === 'daily' ? 'active' : ''}
|
||
onClick={() => handleTypeChange('daily')}
|
||
>
|
||
日常巡查(3)
|
||
</Button>
|
||
<Button
|
||
className={activeType === 'flood' ? 'active' : ''}
|
||
onClick={() => handleTypeChange('flood')}
|
||
>
|
||
汛期巡查(1)
|
||
</Button>
|
||
<Button
|
||
className={activeType === 'special' ? 'active' : ''}
|
||
onClick={() => handleTypeChange('special')}
|
||
>
|
||
特别巡查(1)
|
||
</Button>
|
||
<Button
|
||
className={activeType === 'all' ? 'active' : ''}
|
||
onClick={() => handleTypeChange('all')}
|
||
>
|
||
全部(5024)
|
||
</Button>
|
||
</ButtonGroup>
|
||
</Box>
|
||
<Box className={classes.searchRow}>
|
||
<TextField
|
||
className={classes.searchField}
|
||
variant="outlined"
|
||
size="small"
|
||
placeholder="请输入水库名称"
|
||
/>
|
||
<TextField
|
||
className={classes.searchField}
|
||
variant="outlined"
|
||
size="small"
|
||
placeholder="请输入任务标题"
|
||
/>
|
||
<div style={{ display: 'flex', alignItems: 'center',width:'40%' }}>
|
||
<div style={{ color: "#fff" }}>时段选择：</div>
|
||
<div className='tm' style={{ position: "relative", zIndex: 999999, color: "#fff", width: "70%", margin: '10px' }}>
|
||
<RangePicker
|
||
// width="100%"
|
||
className='time-picker'
|
||
style={{
|
||
flex: 1,
|
||
background: "transparent",
|
||
border: "none",
|
||
color: "#fff",
|
||
}}
|
||
onChange={searchTm}
|
||
allowClear
|
||
format="YYYY-MM-DD HH:mm"
|
||
showTime={{
|
||
format: 'HH:mm',
|
||
}}
|
||
value={params.tm}
|
||
getPopupContainer={trigger => trigger.parentElement}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<Button
|
||
variant="contained"
|
||
color="primary"
|
||
startIcon={<SearchIcon />}
|
||
>
|
||
查询
|
||
</Button>
|
||
<Button
|
||
variant="outlined"
|
||
style={{ color: '#fff', borderColor: 'rgba(255, 255, 255, 0.3)' }}
|
||
startIcon={<RefreshIcon />}
|
||
>
|
||
重置
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
<TableContainer>
|
||
<Table className={classes.table} size="small">
|
||
<TableHead>
|
||
<TableRow>
|
||
{columns.map((column) => (
|
||
<TableCell
|
||
key={column.id}
|
||
style={{ width: column.width }}
|
||
>
|
||
{column.label}
|
||
</TableCell>
|
||
))}
|
||
</TableRow>
|
||
</TableHead>
|
||
<TableBody>
|
||
{mockData.map((row, index) => (
|
||
<TableRow key={index}>
|
||
<TableCell>{row.sequence}</TableCell>
|
||
<TableCell>{row.city}</TableCell>
|
||
<TableCell>{row.district}</TableCell>
|
||
<TableCell>{row.location}</TableCell>
|
||
<TableCell>{row.taskType}</TableCell>
|
||
<TableCell>{row.taskContent}</TableCell>
|
||
<TableCell>
|
||
<span className={classes.status}>{row.status}</span>
|
||
</TableCell>
|
||
<TableCell>{row.person}</TableCell>
|
||
<TableCell>{row.startTime}</TableCell>
|
||
<TableCell>{row.endTime}</TableCell>
|
||
<TableCell>{row.problems}</TableCell>
|
||
<TableCell>{row.processed}</TableCell>
|
||
<TableCell>
|
||
<IconButton className={classes.actionButton} size="small" onClick={flyTo}>
|
||
查看
|
||
</IconButton>
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</TableContainer>
|
||
<ModalView
|
||
open={visible}
|
||
onClose={() => setVisible(false)}
|
||
></ModalView>
|
||
</Paper>
|
||
);
|
||
};
|
||
|
||
export default TaskList; |