diff --git a/api/app/lib/controllers/report/index.js b/api/app/lib/controllers/report/index.js
index f780b547..b635fb5a 100644
--- a/api/app/lib/controllers/report/index.js
+++ b/api/app/lib/controllers/report/index.js
@@ -9,7 +9,7 @@ async function reportList (ctx) {
             where: {
 
             },
-            attributes: ['id', 'road', 'time', 'projectType', 'roadSectionStart', 'roadSectionEnd', 'reportType'],
+            attributes: ['id', 'road', 'time', 'projectType', 'roadSectionStart', 'roadSectionEnd', 'reportType', 'content'],
             include: [{
                 model: models.User,
                 attributes: ['name']
diff --git a/web/client/src/sections/fillion/actions/index.js b/web/client/src/sections/fillion/actions/index.js
index 0a9ea5a1..2b041438 100644
--- a/web/client/src/sections/fillion/actions/index.js
+++ b/web/client/src/sections/fillion/actions/index.js
@@ -1,6 +1,8 @@
 'use strict';
 
 import * as infor from './infor'
-export default { 
+import * as patrol from './patrol'
+export default {
     ...infor,
+    ...patrol,
 }
\ No newline at end of file
diff --git a/web/client/src/sections/fillion/actions/patrol.js b/web/client/src/sections/fillion/actions/patrol.js
new file mode 100644
index 00000000..63507bd9
--- /dev/null
+++ b/web/client/src/sections/fillion/actions/patrol.js
@@ -0,0 +1,38 @@
+import { basicAction } from '@peace/utils'
+import { ApiTable } from '$utils'
+
+
+export function getReportList(query) {
+    return dispatch => basicAction({
+        type: 'get',
+        dispatch: dispatch,
+        actionType: 'GET_REPORT_LIST',
+        url: ApiTable.getReportList,
+        query,
+        msg: { error: '获取巡查数据失败' },
+        reducer: { name: 'reportList' }
+    });
+}
+
+export function getReportDetail(reportId) {
+    return dispatch => basicAction({
+        type: 'get',
+        dispatch: dispatch,
+        actionType: 'GET_REPORT_DETAIL_LIST',
+        url: ApiTable.getReportDetail.replace("{reportId}", reportId),
+        msg: { error: '获取巡查数据失败' },
+        reducer: { name: 'reportDetail' }
+    });
+}
+
+export function getUserList(query) {
+    return dispatch => basicAction({
+        type: 'get',
+        dispatch: dispatch,
+        actionType: 'GET_USER_LIST',
+        url: ApiTable.getUsers,
+        query,
+        msg: { error: '获取用户数据失败' },
+        reducer: { name: 'userList' }
+    });
+}
diff --git a/web/client/src/sections/fillion/components/gis/patrolGis.js b/web/client/src/sections/fillion/components/gis/patrolGis.js
new file mode 100644
index 00000000..a01611df
--- /dev/null
+++ b/web/client/src/sections/fillion/components/gis/patrolGis.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+function PatrolGis(props) {
+  return (
+    <div>PatrolGis</div>
+  )
+}
+
+PatrolGis.propTypes = {}
+
+export default PatrolGis
diff --git a/web/client/src/sections/fillion/components/maintenanceTable.js b/web/client/src/sections/fillion/components/maintenanceTable.js
index 83fafa72..36b1cc03 100644
--- a/web/client/src/sections/fillion/components/maintenanceTable.js
+++ b/web/client/src/sections/fillion/components/maintenanceTable.js
@@ -1,79 +1,176 @@
 import { connect } from 'react-redux';
 import './protable.less'
-import { Card, Button, Popconfirm, Badge, Col, Row, DatePicker, Input } from 'antd';
+import { Card, Button, DatePicker, Input, Modal, Spin, Image, message, Popover } from 'antd';
 import ProTable from '@ant-design/pro-table';
-// import { Badge, Button } from 'antd';
+import { getReportList, getReportDetail } from '../actions/patrol';
 import React, { useEffect, useState } from 'react';
+import { httpDel } from '@peace/utils'
+import { PinyinHelper } from '@peace/utils';
 // @ts-ignore
 import styles from './protable.less';
+import moment from 'moment';
+
+const DetailForm = (props) => {
+    const { visible, data, handleClose, loading } = props;
+    const keyList = [
+        { key: '问题编号', name: 'id' },
+        { key: '所在路段', name: 'road' },
+        { key: '具体位置', name: 'address' },
+        { key: '巡查内容', name: 'content' },
+        { key: '病害照片', name: 'scenePic' },
+        { key: '养护前', name: 'conserveBeforePic' },
+        { key: '养护中', name: 'conserveUnderwayPic' },
+        { key: '养护后', name: 'conserveAfterPic' },
+    ];
+
+    const renderContent = (data) => {
+        if (data) {
+            return keyList.map(obj => {
+                return <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', margin: '12px 0' }}>
+                    <span style={{ fontSize: 16, color: 'gray', minWidth: '26%' }}>{obj.key}</span>
+                    {
+                        obj.name != 'scenePic' && obj.name.indexOf('conserve') == -1 ?
+                            <Input style={{ width: '70%' }} value={obj.name == 'id' ? moment(data.time).format("YYYYMMDD") * 10000 + data.id : data[obj.name]} disabled />
+                            :
+                            <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
+                                {
+                                    data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(imgSrc => {
+                                        return <div style={{ width: '44%', margin: 6 }}>
+                                            <Image src={imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
+                                        </div>
+                                    }) : '暂无图片'
+                                }
+                            </div>
+
+                    }
+                </div>
+            })
+        } else {
+            return '暂无数据'
+        }
+    }
+
+    return (
+        <Modal
+            visible={visible}
+            footer={null}
+            onCancel={handleClose}
+            title={'巡更详细'}
+        >
+            <Spin spinning={loading}>
+                {renderContent(data)}
+            </Spin>
+        </Modal>
+    )
+}
+
 const DetailList = (props) => {
-    const { patrolName } = props;
-    const [tableListDataSource, setTableListDataSource] = useState([]);
+    const { reportList, loading, dispatch, handleOpen, handelRefresh } = props;
+    const [visible, setVisible] = useState(false)
+    const [selectRecord, setSelectRecord] = useState();
+    const checkDetail = (record) => {
+        dispatch(getReportDetail(record.id))
+    }
+
+    const handleRemove = (record) => {
+        let url = 'report/{reportId}';
+        const actionType = "DEL_REPORT_RECORD";
+        const msg = {}
+        if (record) {
+            url = url.replace('{reportId}', record.id)
+            httpDel(dispatch, { url, actionType, msg }).then(res => {
+                if (res.success) {
+                    message.success("记录删除成功")
+                    handelRefresh();
+                } else {
+                    message.error("记录删除失败")
+                }
+            })
+        }
+    }
 
     const columns = [
         {
             title: '问题编号',
-            key: 'num',
-            dataIndex: 'num',
-            align:'center'
+            key: 'id',
+            dataIndex: 'id',
+            align: 'center',
+            render: (text, record) => {
+                return moment(record.time).format("YYYYMMDD") * 10000 + record.id;
+            }
         }, {
             title: '所属道路',
             key: 'road',
             dataIndex: 'road',
-            align:'center'
+            align: 'center'
         }, {
             title: '所在路段',
             key: 'address',
             dataIndex: 'address',
-            align:'center'
-        }, {
+            align: 'center',
+            render: (text, record) => {
+                return `${record.roadSectionStart || ''}-${record.roadSectionEnd || ''}`
+            }
+        },
+        {
             title: '缺陷名称',
-            key: 'name',
-            dataIndex: 'name',
-            align:'center'
-        }, {
+            key: 'content',
+            dataIndex: 'content',
+            align: 'center'
+        },
+        {
             title: '巡查人',
-            width:100,
-            key: 'patrolName',
-            dataIndex: 'patrolName',
-            align:'center'
+            width: 100,
+            key: 'userName',
+            dataIndex: 'userName',
+            align: 'center',
+            render: (text, record) => {
+                return record.user.name
+            }
         }, {
             title: '上报时间',
-            key: 'createdAt',
-            dataIndex: 'createdAt',
+            key: 'time',
+            dataIndex: 'time',
             valueType: 'dateTime',
-            align:'center'
+            align: 'center'
         }, {
             title: '操作',
-            width:200,
+            width: 200,
             key: 'option',
             valueType: 'option',
-            align:'center',
-            render: () => [<Button style={{marginRight:10}}>查看</Button>,<Button >删除</Button>]
+            align: 'center',
+            render: (text, record) => {
+                return [
+                    <Button
+                        onClick={() => { checkDetail(record); handleOpen(); }}
+                        style={{ marginRight: 10 }}>查看</Button>,
+                    <Popover
+                        content={[
+                            <div style={{ width: '100%', height: 30 }}>
+                                <Button onClick={() => setVisible(false)} style={{ float: "right" }} >否</Button>
+                                <Button type="primary" onClick={() => handleRemove(record)} style={{ marginRight: 8, float: "right" }} >是</Button>
+                            </div>
+                        ]}
+                        visible={selectRecord == record.id && visible}
+                        trigger="click"
+                        onClick={() => setSelectRecord(record.id)}
+                        title="是否删除该记录？"
+                        onVisibleChange={(newVisible) => setVisible(newVisible)}
+                    >
+                        <Button>删除</Button>
+                    </Popover>
+                ]
+            }
         },
     ];
-    useEffect(() => {
-        const source = [];
-        for (let i = 0; i < 25; i += 1) {
-            source.push({
-                num: `${i + 1}`,
-                road: `成华大道${i + 2}`,
-                address: `二仙桥${i + 3}`,
-                name: `缺失内容${i + 4}`,
-                patrolName: patrolName,
-                createdAt: Date.now() - Math.floor(Math.random() * 10000),
-                key: i,
-            });
-        }
-        setTableListDataSource(source);
-    }, [patrolName]);
     return (
         <ProTable
             columns={columns}
-            dataSource={tableListDataSource}
+            dataSource={reportList}
+            loading={loading}
             pagination={{
                 pageSize: 10,
-                defaultPageSize:10,
+                defaultPageSize: 10,
                 showSizeChanger: false,
             }}
             rowKey="key"
@@ -85,57 +182,52 @@ const DetailList = (props) => {
 
 
 
-
-
-
-
-const patrolNameListDataSource = [];
-
-for (let i = 0; i < 10; i += 1) {
-    patrolNameListDataSource.push({
-        patrolName: `老大爷${i}`,
-    });
-}
-
-
-
 const PatrolNameList = (props) => {
-    const { onChange, patrolName } = props;
-
+    const [users, setUsers] = useState([]);
+    const { onChange, record, userList, loading } = props;
+    const { name } = record || { name: '' }
     const columns = [
         {
             title: '巡更人员',
-            key: 'patrolName',
-            dataIndex: 'patrolName',
-            align:'center'
+            key: 'name',
+            dataIndex: 'name',
+            align: 'center'
         },
 
     ];
+
+    useEffect(() => {
+        if (userList && userList instanceof Array) {
+            let users = userList.filter(user => user.remark != 'sp');
+            setUsers(users);
+        }
+    }, [userList])
+
+    var timer = null;
+    const doUserNameSearch = (e) => {
+        const name = e.target.value;
+        if (timer) {
+            clearTimeout(timer)
+        } else {
+            setTimeout(() => {
+                let users = userList.filter(user => PinyinHelper.isSearchMatched(user.name, name) && user.remark != 'sp');
+                setUsers(users);
+            }, 500);
+        }
+    }
+
     return (
         <div className='spilce'>
             <ProTable
                 columns={columns}
-                request={(params, sorter, filter) => {
-                    // 表单搜索项会从 params 传入，传递给后端接口。
-                    console.log(params, sorter, filter);
-                    return Promise.resolve({
-                        data: patrolNameListDataSource,
-                        success: true,
-                    });
-                }}
-                rowKey="patrolName"
+                dataSource={users}
+                loading={loading}
+                rowKey="name"
                 rowClassName={(record) => {
-                    return record.patrolName === patrolName ? styles['split-row-select-active'] : '';
+                    return record.patrolName === name ? styles['split-row-select-active'] : '';
                 }}
-                // toolbar={{
-                //     search: {
-                //         onSearch: (value) => {
-                //             alert(value);
-                //         },
-                //     },
-                // }}
-                toolBarRender={()=>[
-                    <Input placeholder='输入巡更人员名称'></Input>
+                toolBarRender={() => [
+                    <Input placeholder='输入养护人员名称' onChange={doUserNameSearch} ></Input>
                 ]}
                 options={false}
                 pagination={false}
@@ -143,8 +235,9 @@ const PatrolNameList = (props) => {
                 onRow={(record) => {
                     return {
                         onClick: () => {
-                            if (record.patrolName) {
-                                onChange(record.patrolName);
+                            if (record) {
+                                console.log('record:', record)
+                                onChange(record);
                             }
                         },
                     };
@@ -156,45 +249,64 @@ const PatrolNameList = (props) => {
 
 
 
-const MaintenanceTable = () => {
-    const [patrolName, setPatrolName] = useState('老大爷0');
+const MaintenanceTable = (props) => {
+    const { userList, reportList, dispatch, reportListLoading, reportDetail, reportDetailLoading, userLoading } = props;
+    const [record, setRecord] = useState();
+    const [dateRange, setDateRange] = useState();
+    const [detailVisible, setDetailVisible] = useState(false)
+
     const { RangePicker } = DatePicker;
-    const tabList = [
-        {
-            key: 'tab1',
-            tab: '养护',
-        },
-    ];
-    const contentList = {
-        tab1: [<div>
-            <Card style={{ flex: 1 }}>
-                <DetailList patrolName={patrolName} />
-            </Card>
-        </div>]
-    };
-    const [activeTabKey1, setActiveTabKey1] = useState('tab1');
-    const onTab1Change = (key) => {
-        setActiveTabKey1(key);
-    };
+
+    useEffect(() => {
+        if (userList && userList instanceof Array) {
+            let users = userList.filter(user => user.remark != 'sp');
+
+            setRecord(users[0]);
+        }
+    }, [userList])
+
+    useEffect(() => {
+        if (record) {
+            let query = { userId: record.id, reportType: 'conserve' }
+            if ((dateRange && dateRange instanceof Array)) {
+                query.startTime = moment(dateRange[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
+                query.endTime = moment(dateRange[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
+            }
+            dispatch(getReportList(query));
+        }
+    }, [record, dateRange])
+
+    const handleClose = () => {
+        setDetailVisible(false)
+    }
+    const handleOpen = () => {
+        setDetailVisible(true)
+    }
+
+    const handelRefresh = () => {
+        let query = { userId: record.id, reportType: 'patrol' }
+        dispatch(getReportList(query));
+    }
+
     return (
         <div className='card-protable'>
             <Card >
-                <PatrolNameList onChange={(searchPatrolName) => setPatrolName(searchPatrolName)} patrolName={patrolName} />
+                <PatrolNameList onChange={(record) => setRecord(record)} record={record} userList={userList} loading={userLoading} handelRefresh={handelRefresh} />
             </Card>
-            <Card
-                style={{ flex: 1 }}
-                tabList={tabList}
-                activeTabKey={activeTabKey1}
-                onTabChange={(key) => {
-                    onTab1Change(key);
-                }}
-            >
-                <div style={{ marginBottom: 20}}>
-                    <RangePicker />
-                    <Button style={{marginLeft:20}}>查询</Button>
-                    <Button style={{marginLeft:20}}>导出</Button>
+            <Card style={{ flex: 1 }} >
+                <div style={{ marginBottom: 20 }}>
+                    <RangePicker onChange={(date, dateString) => { setDateRange(dateString) }} />
+                    <Button style={{ marginLeft: 20 }}>查询</Button>
+                    <Button style={{ marginLeft: 20 }}>导出</Button>
                 </div>
-                {contentList[activeTabKey1]}
+                <Card style={{ flex: 1 }}>
+                    <DetailList reportList={reportList} record={record} loading={reportListLoading} dispatch={dispatch} handleOpen={handleOpen} />
+                </Card>
+                <DetailForm
+                    visible={detailVisible}
+                    handleClose={handleClose}
+                    data={reportDetail}
+                    loading={reportDetailLoading} />
             </Card>
         </div>
 
@@ -202,13 +314,12 @@ const MaintenanceTable = () => {
 };
 
 function mapStateToProps(state) {
-    const { auth, depMessage } = state;
+    const { auth, depMessage, userList, reportList, reportDetail } = state;
     const pakData = (dep) => {
         return dep.map((d) => {
             return {
                 title: d.name,
                 value: d.id,
-                // children: d.type >= 2 ? [] : pakData(d.subordinate)
                 children: pakData(d.subordinate)
             }
         })
@@ -219,6 +330,12 @@ function mapStateToProps(state) {
         depMessage: depMessage.data || [],
         depLoading: depMessage.isRequesting,
         depData,
+        userList: userList.data || [],
+        userLoading: userList.isRequesting,
+        reportList: reportList.data,
+        reportListLoading: reportList.isRequesting,
+        reportDetail: reportDetail.data,
+        reportDetailLoading: reportDetail.isRequesting,
     };
 }
 export default connect(mapStateToProps)(MaintenanceTable);
\ No newline at end of file
diff --git a/web/client/src/sections/fillion/components/patrolTable.js b/web/client/src/sections/fillion/components/patrolTable.js
index e215ea16..2e9125a4 100644
--- a/web/client/src/sections/fillion/components/patrolTable.js
+++ b/web/client/src/sections/fillion/components/patrolTable.js
@@ -1,21 +1,104 @@
 import { connect } from 'react-redux';
 import './protable.less'
-import { Card, Button, Popconfirm, Badge, Col, Row, DatePicker, Input } from 'antd';
+import { Card, Button, Popconfirm, Badge, Col, Row, DatePicker, Input, Modal, Spin, Image, message, Popover } from 'antd';
 import ProTable from '@ant-design/pro-table';
-// import { Badge, Button } from 'antd';
+import { getReportList, getReportDetail } from '../actions/patrol';
 import React, { useEffect, useState } from 'react';
+import { httpDel } from '@peace/utils'
+import { PinyinHelper } from '@peace/utils';
+import PatrolGis from './gis/patrolGis';
 // @ts-ignore
 import styles from './protable.less';
+import moment from 'moment';
+
+const DetailForm = (props) => {
+    const { visible, data, handleClose, loading } = props;
+    const keyList = [
+        { key: '问题编号', name: 'id' },
+        { key: '所在路段', name: 'road' },
+        { key: '具体位置', name: 'address' },
+        { key: '巡查内容', name: 'content' },
+        { key: '病害照片', name: 'scenePic' },
+    ];
+
+    const renderContent = (data) => {
+        if (data) {
+            // Object.keys(data).map(key => {
+
+            // })
+            return keyList.map(obj => {
+                return <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', margin: '12px 0' }}>
+                    <span style={{ fontSize: 16, color: 'gray', minWidth: '26%' }}>{obj.key}</span>
+                    {
+                        obj.name != 'scenePic' ?
+                            <Input style={{ width: '70%' }} value={obj.name == 'id' ? moment(data.time).format("YYYYMMDD") * 10000 + data.id : data[obj.name]} disabled />
+                            :
+                            <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
+                                {
+                                    data.scenePic && data.scenePic instanceof Array ? data.scenePic.map(imgSrc => {
+                                        return <div style={{ width: '44%', margin: 6 }}>
+                                            <Image src={imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
+                                        </div>
+                                    }) : '暂无图片'
+                                }
+                            </div>
+
+                    }
+                </div>
+            })
+        } else {
+            return '暂无数据'
+        }
+    }
+
+    return (
+        <Modal
+            visible={visible}
+            footer={null}
+            onCancel={handleClose}
+            title={'巡更详细'}
+        >
+            <Spin spinning={loading}>
+                {renderContent(data)}
+            </Spin>
+        </Modal>
+    )
+}
+
 const DetailList = (props) => {
-    const { patrolName } = props;
-    const [tableListDataSource, setTableListDataSource] = useState([]);
+    const { reportList, loading, dispatch, handleOpen, handelRefresh } = props;
+    const [visible, setVisible] = useState(false)
+    const [selectRecord, setSelectRecord] = useState();
+    const checkDetail = (record) => {
+        dispatch(getReportDetail(record.id))
+    }
+
+    const handleRemove = (record) => {
+        let url = 'report/{reportId}';
+        const actionType = "DEL_REPORT_RECORD";
+        const msg = {}
+        if (record) {
+            url = url.replace('{reportId}', record.id)
+            httpDel(dispatch, { url, actionType, msg }).then(res => {
+                if (res.success) {
+                    message.success("记录删除成功");
+                    handelRefresh()
+                } else {
+                    message.error("记录删除失败")
+                }
+            })
+        }
+    }
 
     const columns = [
         {
             title: '问题编号',
-            key: 'num',
-            dataIndex: 'num',
-            align: 'center'
+            key: 'id',
+            dataIndex: 'id',
+            align: 'center',
+            render: (text, record) => {
+                return moment(record.time).format("YYYYMMDD") * 10000 + record.id;
+            }
         }, {
             title: '所属道路',
             key: 'road',
@@ -25,22 +108,30 @@ const DetailList = (props) => {
             title: '所在路段',
             key: 'address',
             dataIndex: 'address',
-            align: 'center'
-        }, {
+            align: 'center',
+            render: (text, record) => {
+                return `${record.roadSectionStart || ''}-${record.roadSectionEnd || ''}`
+            }
+        },
+        {
             title: '缺陷名称',
-            key: 'name',
-            dataIndex: 'name',
+            key: 'content',
+            dataIndex: 'content',
             align: 'center'
-        }, {
+        },
+        {
             title: '巡查人',
             width: 100,
-            key: 'patrolName',
-            dataIndex: 'patrolName',
-            align: 'center'
+            key: 'userName',
+            dataIndex: 'userName',
+            align: 'center',
+            render: (text, record) => {
+                return record.user.name
+            }
         }, {
             title: '上报时间',
-            key: 'createdAt',
-            dataIndex: 'createdAt',
+            key: 'time',
+            dataIndex: 'time',
             valueType: 'dateTime',
             align: 'center'
         }, {
@@ -49,28 +140,35 @@ const DetailList = (props) => {
             key: 'option',
             valueType: 'option',
             align: 'center',
-            render: () => [<Button style={{ marginRight: 10 }}>查看</Button>, <Button >删除</Button>]
+            render: (text, record) => {
+                return [
+                    <Button
+                        onClick={() => { checkDetail(record); handleOpen(); }}
+                        style={{ marginRight: 10 }}>查看</Button>,
+                    <Popover
+                        content={[
+                            <div style={{ width: '100%', height: 30 }}>
+                                <Button onClick={() => setVisible(false)} style={{ float: "right" }} >否</Button>
+                                <Button type="primary" onClick={() => handleRemove(record)} style={{ marginRight: 8, float: "right" }} >是</Button>
+                            </div>
+                        ]}
+                        visible={selectRecord == record.id && visible}
+                        trigger="click"
+                        onClick={() => setSelectRecord(record.id)}
+                        title="是否删除该记录？"
+                        onVisibleChange={(newVisible) => setVisible(newVisible)}
+                    >
+                        <Button>删除</Button>
+                    </Popover>
+                ]
+            }
         },
     ];
-    useEffect(() => {
-        const source = [];
-        for (let i = 0; i < 25; i += 1) {
-            source.push({
-                num: `${i + 1}`,
-                road: `成华大道${i + 2}`,
-                address: `二仙桥${i + 3}`,
-                name: `缺失内容${i + 4}`,
-                patrolName: patrolName,
-                createdAt: Date.now() - Math.floor(Math.random() * 10000),
-                key: i,
-            });
-        }
-        setTableListDataSource(source);
-    }, [patrolName]);
     return (
         <ProTable
             columns={columns}
-            dataSource={tableListDataSource}
+            dataSource={reportList}
+            loading={loading}
             pagination={{
                 pageSize: 10,
                 defaultPageSize: 10,
@@ -85,57 +183,51 @@ const DetailList = (props) => {
 
 
 
-
-
-
-
-const patrolNameListDataSource = [];
-
-for (let i = 0; i < 10; i += 1) {
-    patrolNameListDataSource.push({
-        patrolName: `老大爷${i}`,
-    });
-}
-
-
-
 const PatrolNameList = (props) => {
-    const { onChange, patrolName } = props;
-
+    const [users, setUsers] = useState([]);
+    const { onChange, record, userList, loading } = props;
+    const { name } = record || { name: '' }
     const columns = [
         {
             title: '巡更人员',
-            key: 'patrolName',
-            dataIndex: 'patrolName',
+            key: 'name',
+            dataIndex: 'name',
             align: 'center'
         },
 
     ];
+
+    useEffect(() => {
+        if (userList) {
+            setUsers(userList)
+        }
+    }, [userList])
+
+    var timer = null;
+    const doUserNameSearch = (e) => {
+        const name = e.target.value;
+        if (timer) {
+            clearTimeout(timer)
+        } else {
+            setTimeout(() => {
+                let users = userList.filter(user => PinyinHelper.isSearchMatched(user.name, name));
+                setUsers(users);
+            }, 500);
+        }
+    }
+
     return (
         <div className='spilce'>
             <ProTable
                 columns={columns}
-                request={(params, sorter, filter) => {
-                    // 表单搜索项会从 params 传入，传递给后端接口。
-                    console.log(params, sorter, filter);
-                    return Promise.resolve({
-                        data: patrolNameListDataSource,
-                        success: true,
-                    });
-                }}
-                rowKey="patrolName"
+                dataSource={users}
+                loading={loading}
+                rowKey="name"
                 rowClassName={(record) => {
-                    return record.patrolName === patrolName ? styles['split-row-select-active'] : '';
+                    return record.patrolName === name ? styles['split-row-select-active'] : '';
                 }}
-                // toolbar={{
-                //     search: {
-                //         onSearch: (value) => {
-                //             alert(value);
-                //         },
-                //     },
-                // }}
                 toolBarRender={() => [
-                    <Input placeholder='输入巡更人员名称'></Input>
+                    <Input placeholder='输入巡更人员名称' onChange={doUserNameSearch} ></Input>
                 ]}
                 options={false}
                 pagination={false}
@@ -143,8 +235,9 @@ const PatrolNameList = (props) => {
                 onRow={(record) => {
                     return {
                         onClick: () => {
-                            if (record.patrolName) {
-                                onChange(record.patrolName);
+                            if (record) {
+                                console.log('record:', record)
+                                onChange(record);
                             }
                         },
                     };
@@ -156,9 +249,43 @@ const PatrolNameList = (props) => {
 
 
 
-const PatrolTable = () => {
-    const [patrolName, setPatrolName] = useState('老大爷0');
+const PatrolTable = (props) => {
+    const { userList, reportList, dispatch, reportListLoading, reportDetail, reportDetailLoading, userLoading } = props;
+    const [record, setRecord] = useState();
+    const [dateRange, setDateRange] = useState();
+    const [detailVisible, setDetailVisible] = useState(false)
+
     const { RangePicker } = DatePicker;
+
+    useEffect(() => {
+        if (userList && userList instanceof Array) {
+            setRecord(userList[0]);
+        }
+    }, [userList])
+
+    useEffect(() => {
+        if (record) {
+            let query = { userId: record.id, reportType: 'patrol' }
+            if ((dateRange && dateRange instanceof Array)) {
+                query.startTime = moment(dateRange[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
+                query.endTime = moment(dateRange[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
+            }
+            dispatch(getReportList(query));
+        }
+    }, [record, dateRange])
+
+    const handelRefresh = () => {
+        let query = { userId: record.id, reportType: 'patrol' }
+        dispatch(getReportList(query));
+    }
+
+    const handleClose = () => {
+        setDetailVisible(false)
+    }
+    const handleOpen = () => {
+        setDetailVisible(true)
+    }
+
     const tabList = [
         {
             key: 'tab1',
@@ -171,9 +298,10 @@ const PatrolTable = () => {
     const contentList = {
         tab1: [<div>
             <Card style={{ flex: 1 }}>
-                <DetailList patrolName={patrolName} />
+                <DetailList reportList={reportList} record={record} loading={reportListLoading} dispatch={dispatch} handleOpen={handleOpen} handelRefresh={handelRefresh} />
             </Card>
-        </div>]
+        </div>],
+        tab2: <PatrolGis />
     };
     const [activeTabKey1, setActiveTabKey1] = useState('tab1');
     const onTab1Change = (key) => {
@@ -182,7 +310,7 @@ const PatrolTable = () => {
     return (
         <div className='card-protable'>
             <Card >
-                <PatrolNameList onChange={(searchPatrolName) => setPatrolName(searchPatrolName)} patrolName={patrolName} />
+                <PatrolNameList onChange={(record) => setRecord(record)} record={record} userList={userList} loading={userLoading} />
             </Card>
             <Card
                 style={{ flex: 1 }}
@@ -194,12 +322,17 @@ const PatrolTable = () => {
             >
                 {
                     activeTabKey1 == 'tab1' ? <div style={{ marginBottom: 20 }}>
-                        <RangePicker />
+                        <RangePicker onChange={(date, dateString) => { setDateRange(dateString) }} />
                         <Button style={{ marginLeft: 20 }}>查询</Button>
                         <Button style={{ marginLeft: 20 }}>导出</Button>
                     </div> : ''
                 }
                 {contentList[activeTabKey1]}
+                <DetailForm
+                    visible={detailVisible}
+                    handleClose={handleClose}
+                    data={reportDetail}
+                    loading={reportDetailLoading} />
             </Card>
         </div>
 
@@ -207,13 +340,12 @@ const PatrolTable = () => {
 };
 
 function mapStateToProps(state) {
-    const { auth, depMessage } = state;
+    const { auth, depMessage, userList, reportList, reportDetail } = state;
     const pakData = (dep) => {
         return dep.map((d) => {
             return {
                 title: d.name,
                 value: d.id,
-                // children: d.type >= 2 ? [] : pakData(d.subordinate)
                 children: pakData(d.subordinate)
             }
         })
@@ -224,6 +356,12 @@ function mapStateToProps(state) {
         depMessage: depMessage.data || [],
         depLoading: depMessage.isRequesting,
         depData,
+        userList: userList.data || [],
+        userLoading: userList.isRequesting,
+        reportList: reportList.data,
+        reportListLoading: reportList.isRequesting,
+        reportDetail: reportDetail.data,
+        reportDetailLoading: reportDetail.isRequesting,
     };
 }
 export default connect(mapStateToProps)(PatrolTable);
\ No newline at end of file
diff --git a/web/client/src/sections/fillion/containers/maintenance.js b/web/client/src/sections/fillion/containers/maintenance.js
index 1554927e..6c36021e 100644
--- a/web/client/src/sections/fillion/containers/maintenance.js
+++ b/web/client/src/sections/fillion/containers/maintenance.js
@@ -3,15 +3,22 @@ import { connect } from 'react-redux';
 import '../style.less';
 import { getDepMessage, getReportStatistic } from "../actions/infor"
 import MaintenanceTable from '../components/maintenanceTable';
+import { getUserList } from '../actions/patrol';
 const superagent = require('superagent');
+
 const Maintenance = (props) => {
   const { dispatch, user } = props
   const [data, setData] = useState()
   useEffect(() => {
     // dispatch(getDepMessage())
-    
+
     setData(props)
   }, []);
+
+  useEffect(() => {
+    dispatch(getUserList())
+  }, [true])
+
   //批量导出
   const exports = (ids, counts) => {
     // console.log(user);
diff --git a/web/client/src/sections/fillion/containers/patrol.js b/web/client/src/sections/fillion/containers/patrol.js
index bd57775b..3372ad0a 100644
--- a/web/client/src/sections/fillion/containers/patrol.js
+++ b/web/client/src/sections/fillion/containers/patrol.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import '../style.less';
 import { getDepMessage, getReportStatistic } from "../actions/infor"
+import { getUserList } from '../actions/patrol';
 import PatrolTable from '../components/patrolTable';
 const superagent = require('superagent');
 const patrol = (props) => {
@@ -9,9 +10,13 @@ const patrol = (props) => {
   const [data, setData] = useState()
   useEffect(() => {
     // dispatch(getDepMessage())
-   
+
     setData(props)
   }, []);
+
+  useEffect(() => {
+    dispatch(getUserList())
+  }, [true])
   //批量导出
   const exports = (ids, counts) => {
     // console.log(user);
diff --git a/web/client/src/utils/webapi.js b/web/client/src/utils/webapi.js
index 7d55a301..6ea0e16f 100644
--- a/web/client/src/utils/webapi.js
+++ b/web/client/src/utils/webapi.js
@@ -39,6 +39,10 @@ export const ApiTable = {
     getReportRectify: 'report/rectify',
     getReportRectifyDetail: 'report/rectify/detail',
     compileReportRectifyDetail: 'report/rectify/detail',
+    getReportList: 'report/list',
+    getReportDetail: 'report/{reportId}/detail',
+    getUsers: 'user',
+
 
     //运政管理
     getOperaTional: 'vehicle',