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;
|