Highways4Good/web/client/src/sections/fillion/components/patrolTable.js

import { connect } from 'react-redux';
import './protable.less'
import { Card, Button, Popconfirm, Badge, Col, Row, DatePicker, Input, Modal, Spin, Image, message, Popover, Select, Tree } from 'antd';
import ProTable from '@ant-design/pro-table';
import { DownOutlined, RightOutlined, CaretDownOutlined, CaretRightOutlined } from '@ant-design/icons';
import { getReportList, getReportDetail, handleReport } from '../actions/patrol';
import React, { useEffect, useState, useMemo } from 'react';
import { getAllDepUsers } from '../actions/allDepUsers'
import { httpDel } from '@peace/utils'
import { PinyinHelper } from '@peace/utils';
import PatrolGis from './gis/patrolGis';
import NominateModal from '../components/feedback/nominateModal' //指派的模块
// @ts-ignore
import styles from './protable.less';
import moment from 'moment';

export const reportTypeText = (text) => {
    switch (text) {
        case 'road': return '道路';
        //
        case 'countyRoad': return '县道';
        case 'villageRoad': return '乡道';
        case 'rusticRoad': return '村道';
        //
        case 'bridge': return '桥梁';
        case 'culvert': return '涵洞';
        case 'other': return '其他';
        //
        case 'conserve': return '养护';
        case 'patrol': return '巡查';
        case 'construction': return '在建';
        default: return text;
    }
}

const DetailForm = (props) => {
    const { visible, data, handleClose, loading, isAnomaly, isRoad, isPatrol } = props;
    //('record12s', isAnomaly)
    const [qndmn] = useState(localStorage.getItem('qndmn'));

    const keyList = [
        // { key: '编号', name: 'id' },
        // isPatrol ?'巡查管理详情' :isRoad ? '建设上报详情' : '异常反馈详情'
        { key: '工程类型', name: 'projectType', skip: !isPatrol },
        { key: '反馈类型', name: 'projectType', skip: !isAnomaly },
        { key: '工程名称', name: 'projectName', skip: !isRoad },
        { key: '所在路段', name: 'road', skip: isRoad },
        { key: '具体位置', name: 'address' },
        { key: '巡查内容', name: 'content' },
        { key: '路线代码', name: 'codeRoad', skip: !isAnomaly && !isPatrol },
        { key: '现场照片', name: 'scenePic' },
        { key: '处理详情', name: 'handleContent', skip: !isAnomaly },
        { key: '处理图片', name: 'handlePic', skip: !isAnomaly },
        { key: '处理人', name: 'performerName', skip: !isAnomaly }
    ];

    const renderContent = (data) => {
        if (data) {
            // Object.keys(data).map(key => {
            // })
            return keyList.map(obj => {
                return (
                    obj.skip ? null :
                        <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 != 'handlePic' ?
                                    <Input
                                        style={{ width: '70%' }}
                                        value={
                                            obj.name == 'id' ?
                                                moment(data.time).format("YYYYMMDD") * 10000 + data.id
                                                :
                                                obj.name == 'projectType' ?
                                                    reportTypeText(data[obj.name]) :
                                                    data[obj.name] || null
                                        }
                                        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={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
                                                </div>
                                            })  
                                            : '暂无图片'
                                        }
                                    </div>

                            }
                        </div>
                )
            })
        } else {
            return '暂无数据'
        }
    }

    return (
        <Modal
            visible={visible}
            footer={null}
            onCancel={handleClose}
            title={
                isPatrol ?
                    '巡查管理详情' :
                    isRoad ? '建设上报详情' : '异常反馈详情'
            }
        >
            <Spin spinning={loading}>
                {renderContent(data)}
            </Spin>
        </Modal>
    )
}

const DetailList = (props) => {
    const { reportList, loading, dispatch, handleOpen, handelRefresh, isAnomaly, isRoad, isPatrol, queryData, user } = props;
    const [visible, setVisible] = useState(false)
    const [selectRecord, setSelectRecord] = useState();
    const [noProcessingPopVisible, setNoProcessingPopVisible] = useState(false);
    const [noProcessingSelectRecord, setNoProcessingSelectRecord] = useState();
    const [vis, setVis] = useState(false)//指派任务的弹窗显示与隐藏
    const [recordId, setRecordId] = useState(0)//默认指派任务id
    const [btnVis, setBtnVis] = useState(true)//指派按钮和不处理按钮的是否禁用
    const checkDetail = (record) => {
        dispatch(getReportDetail(record.id))
    }
    //modal取消的事件
    const onCancel = () => {
        setVis(false)
    }
    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("记录删除失败")
                }
            })
        }
    }
    let basicDate = null;
    let counter = 0;
    //指派任务
    console.log('vis', vis)
    const columns = [
        isPatrol ? {
            title: '编号',
            key: 'id',
            dataIndex: 'id',
            align: 'center',
            render: (text, record) => {
                let day = moment(record.time).format("YYYYMMDD")
                if (!basicDate) {
                    basicDate = day;
                    counter += 1;
                } else if (basicDate == day) {
                    counter += 1;
                } else if (basicDate != day) {
                    basicDate = day;
                    counter = 1;
                }
                return moment(record.time).format("YYYYMMDD") * 10000 + counter;
            }
        } : '',
        isPatrol || isAnomaly ?
            {
                title: isPatrol ? '工程类型' : '反馈类型',
                key: 'projectType',
                dataIndex: 'projectType',
                align: 'center',
                render: (text, record) => {
                    switch (text) {
                        case 'road': return '道路';
                        //
                        case 'countyRoad': return '县道';
                        case 'villageRoad': return '乡道';
                        case 'rusticRoad': return '村道';
                        //
                        case 'bridge': return '桥梁';
                        case 'culvert': return '涵洞';
                        case 'other': return '其他';
                        //
                        case 'conserve': return '养护';
                        case 'patrol': return '巡查';
                        case 'construction': return '在建';
                        default: return text;
                    }
                }
            } : '',
        isRoad ?
            {
                title: '工程名称',
                key: 'projectName',
                dataIndex: 'projectName',
                align: 'center',
            } : '',
        isPatrol || isAnomaly ?
            {
                title: '所属道路',
                key: 'road',
                dataIndex: 'road',
                align: 'center'
            } : '',
        isPatrol || isAnomaly ?
            {
                title: '所在路段',
                key: 'address',
                dataIndex: 'address',
                align: 'center',
                render: (text, record) => {
                    return `${record.roadSectionStart || ''}-${record.roadSectionEnd || ''}`
                }
            } : '',
        {
            title: '具体内容',
            key: 'content',
            dataIndex: 'content',
            align: 'center'
        },
        {
            title: '上报人',
            width: 100,
            key: 'userName',
            dataIndex: 'userName',
            align: 'center',
            render: (text, record) => {
                return record?.user?.name || ''
            }
        }, {
            title: '上报时间',
            key: 'time',
            dataIndex: 'time',
            valueType: 'dateTime',
            align: 'center'
        }, {
            title: '操作',
            width: 160,
            key: 'option',
            valueType: 'option',
            align: 'center',
            render: (text, record) => {
                //('record12s', record)
                return [
                    <Button
                        onClick={() => { checkDetail(record); handleOpen(); }}
                        style={{ marginRight: 10 }}>查看</Button>,
                    isAnomaly && record.handleState != '已处理' && record.performerId === null && user?.username === 'SuperAdmin' ?
                        <Button disabled={user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'FEEDBACKMANAGE' || 'FEEDBACKMANAGE')[0].isshow === "true" ? true : ''}
                            onClick={() => { setVis(true); setRecordId(record.id) }}>指派</Button> : null,
                    isAnomaly && record.handleState != '已处理' && record.performerId === null && user?.username === 'SuperAdmin' ?
                        < Popover
                            content={
                                [
                                    <div style={{ width: '100%', height: 30 }}>
                                        <Button onClick={() => setNoProcessingPopVisible(false)} style={{ float: "right" }} >否</Button>
                                        <Button type="primary" onClick={() => dispatch(handleReport(record.id, { handleState: '已处理' })).then(res => {
                                            if (res.success) {
                                                setNoProcessingPopVisible(false)
                                                setNoProcessingSelectRecord(null)
                                                handelRefresh()
                                            }
                                        })} style={{ marginRight: 8, float: "right" }} >是</Button>
                                    </div>
                                ]}
                            visible={noProcessingSelectRecord == record.id && noProcessingPopVisible}
                            trigger="click"
                            onClick={() => user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'FEEDBACKMANAGE' || 'FEEDBACKMANAGE')[0].isshow === "true" ? '' : setNoProcessingSelectRecord(record.id)}
                            title="是否不处理该记录？"
                            onVisibleChange={(newVisible) => setNoProcessingPopVisible(newVisible)}
                        >
                            <Button disabled={user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'FEEDBACKMANAGE' || 'FEEDBACKMANAGE')[0].isshow === "true" ? true : ''}>不处理</Button>
                        </Popover > : null,
                    <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={() => user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'FEEDBACKMANAGE' || 'FEEDBACKMANAGE')[0].isshow === "true" ? '' : setSelectRecord(record.id)}
                        title="是否删除该记录？"
                        onVisibleChange={(newVisible) => setVisible(newVisible)}
                    >
                        <Button disabled={user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'FEEDBACKMANAGE' || 'FEEDBACKMANAGE')[0].isshow === "true" ? true : ''}>删除</Button>
                    </Popover>
                ]
            }
        },
    ].filter(s => s);
    return (
        <div>
            <ProTable
                columns={columns}
                dataSource={reportList}
                loading={loading}
                pagination={{
                    pageSize: 10,
                    defaultPageSize: 10,
                    showSizeChanger: false,
                }}
                rowKey="key"
                toolBarRender={false}
                search={false}
            />
            <NominateModal queryData={queryData} hanldeChange={setBtnVis} recordId={recordId} dispatch={dispatch} visible={vis} onCancel={onCancel} onVisibleChange={setVis}></NominateModal>
        </div>
    )
};



const PatrolNameList = (props) => {
    const { Search } = Input;
    const [users, setUsers] = useState([]);
    const { onChange, record, userList, loading, activeTabKey1, dispatch, user } = props;
    const [selectRoad, setSelectRoad] = useState();
    const [defaultData, setDefaultData] = useState([]);
    const [expandedKeys, setExpandedKeys] = useState([]);
    const [searchValue, setSearchValue] = useState('');
    const [depAllUser, setDepAllUser] = useState([])
    const [dataList, setDataList] = useState([]);

    useEffect(() => {
        let departments = []
        const generateData = (data, _preKey, _tns) => {
            const preKey = _preKey || '0';
            const tns = _tns || [];
            const children = [];

            data.forEach(department => {
                const key = `${preKey}-${department.depId}`;
                const node = {
                    title: department.depName.toString(),
                    key,
                    children: [],
                };

                if (department.users.length > 0) { // 仅当部门有用户时添加子节点
                    department.users.forEach(user => {
                        node.children.push({
                            title: user.name.toString(),
                            key: `${key}-${user.id}`,
                            isLeaf: true, // 用户节点为叶子节点
                        });
                    });
                }

                if (department.children && department.children.length > 0) {
                    const childKeys = generateData(department.children, key, node.children);
                    children.push(...childKeys);
                }

                tns.push(node);
                if (node.children.length > 0 && department.expanded) { // 仅当部门展开时添加子节点
                    children.push(key);
                }
            });
            return children;
        };
        if (depAllUser && depAllUser.length) {
            if (user?.username === 'SuperAdmin') {
                departments = [...new Set(depAllUser)]
            } else {
                const targetDepartment = depAllUser.find(department => department.users.some(item => item.id === user?.id));
                departments = [targetDepartment]
            }
            const processedData = [];
            const expandedKeys = generateData(departments, null, processedData);
            setDefaultData(processedData);
            setDataList(processedData.map(item => ({ key: item.key, title: item.title.toString(), children: item.children })));
            setExpandedKeys(expandedKeys);
        }
    }, [depAllUser])

    useEffect(() => {
        dispatch(getAllDepUsers()).then((res) => {
            if (res.success) setDepAllUser(res?.payload?.data)
        })


    }, [])
    const getParentKey = (key, tree) => {
        let parentKey;
        for (let i = 0; i < tree.length; i++) {
            const node = tree[i];
            if (node.children) {
                if (node.children.some((item) => item.key === key)) {
                    parentKey = node.key;
                } else {
                    parentKey = getParentKey(key, node.children);
                }
            }
            if (parentKey) {
                break;
            }
        }
        return parentKey;
    };

    const handleSearch = (value) => {
        const filteredKeys = [];
        const expandedKeys = [];

        const loopTreeData = (data) => {
            data.forEach((item) => {
                if (item.title.indexOf(value) > -1) {
                    filteredKeys.push(item.key);
                    let parentKey = getParentKey(item.key, defaultData);
                    while (parentKey) {
                        if (!expandedKeys.includes(parentKey)) {
                            expandedKeys.push(parentKey);
                        }
                        parentKey = getParentKey(parentKey, defaultData);
                    }
                }
                if (item.children) {
                    loopTreeData(item.children);
                }
            });
        };

        loopTreeData(defaultData);
        setSearchValue(value);
        setExpandedKeys(expandedKeys);
    };

    const handleExpand = (expandedKeys) => {
        setExpandedKeys(expandedKeys);
    };

    const renderTreeNodes = (data) => {
        return data.map((item) => {
            const { key, title, children } = item;
            const isLeaf = !children || children.length === 0;

            return (
                <Tree.TreeNode
                    key={key}
                    title={title}
                    icon={isLeaf ? null : (
                        expandedKeys.includes(key) ? <CaretDownOutlined /> : <CaretRightOutlined />
                    )}
                    isLeaf={isLeaf}
                >
                    {children && children.length > 0 && renderTreeNodes(children)}
                </Tree.TreeNode>
            );
        });
    };

    const treeData = useMemo(() => {
        const loop = (data) =>
            data.map((item) => {
                const { title, key, children } = item;
                const strTitle = title.toString();
                const index = strTitle.indexOf(searchValue);
                const beforeStr = strTitle.substring(0, index);
                const afterStr = strTitle.slice(index + searchValue.length);
                const titleNode = index > -1 ? (
                    <span>
                        {beforeStr}
                        <span style={{ color: '#f50' }}>{searchValue}</span>
                        {afterStr}
                    </span>
                ) : (
                    <span>{strTitle}</span>
                );

                if (children && children.length > 0) {
                    return {
                        title: titleNode,
                        key,
                        children: loop(children),
                    };
                }

                return {
                    title: titleNode,
                    key,
                };
            });

        return loop(defaultData);
    }, [searchValue, defaultData]);
    const handleSelect = (selectedKeys, { selected, selectedNodes, node }) => {
        if (selected) {
            if (selectedKeys[0].split("-").length - 1 >= 2) {
                let id = selectedKeys[0].split('-')[selectedKeys[0].split('-').length - 1]
                console.log('id1', id)
                onChange(id);
            }

        }
        //  console.log('selectedKeys', selectedKeys, selected, selectedNodes, node)

    };

    useEffect(() => {
        if (userList && userList instanceof Array && userList.length) {
            setSelectRoad(userList[0].id)
            // onChange(userList[0]);
        }
        if (activeTabKey1 == 'tab2') {
            setSelectRoad(null)
        }

    }, [userList, activeTabKey1])

    useEffect(() => {
        if (userList) {
            setUsers(userList)
        }
    }, [userList])

    if (loading) {
        return <div>Loading...</div>
    }
    return (
        <div className='spilce'>
            <div className='spilce' style={{ height: '600px', width: '100%', overflow: 'auto' }} >
                <Search
                    placeholder="请输入上报人员"
                    value={searchValue}
                    onChange={(e) => handleSearch(e.target.value)}
                />
                <Tree
                    expandedKeys={expandedKeys}
                    onExpand={handleExpand}
                    onSelect={handleSelect}
                >
                    {renderTreeNodes(treeData)}
                </Tree>
            </div>






            {/* <ProTable
                columns={columns}
                dataSource={users}
                loading={loading}
                rowKey="name"
                rowClassName={(record) => {
                    return record.id == selectRoad ? 'list-row-actived' : '';
                }}
                toolBarRender={() => [
                    <Input placeholder='输入巡查人员名称' onChange={doUserNameSearch} ></Input>
                ]}
                options={false}
                pagination={false}
                search={false}
                onRow={(record) => {
                    return {
                        onClick: () => {
                            if (record) {
                                let id = record.id
                                if (selectRoad == record.id) {
                                    id = null
                                }
                                setSelectRoad(id);
                                onChange(id ? record : null);
                            }
                        },
                    };
                }}
            />
             */}
        </div>

    );
};



const PatrolTable = (props) => {
    const { clientHeight, user, userList, reportList, dispatch, reportListLoading, reportDetail, reportDetailLoading, userLoading, exports, pathname } = props;
    const [record, setRecord] = useState(1);
    const [dateRange, setDateRange] = useState();
    const [selectProjectType, setSelectProjectType] = useState('');
    const [detailVisible, setDetailVisible] = useState(false)
    const [activeTabKey1, setActiveTabKey1] = useState('tab1');
    const { RangePicker } = DatePicker;
    const [reportDetailCopy, setReportDetailCopy] = useState({})//匹配执行者的名字
    const isRoad = pathname.includes('road')
    const isAnomaly = pathname.includes('anomaly')
    const isPatrol = !isRoad && !isAnomaly
    const reportType = isRoad ? 'road' : isAnomaly ? 'anomaly' : 'patrol';

    useEffect(() => {
        queryData();
    }, [])

    useEffect(() => {
        if (userList && userList instanceof Array && reportDetail && reportDetail instanceof Object) {
            setReportDetailCopy(Object.assign(reportDetail, { performerName: userList.find(item => item.id === reportDetail.performerId)?.name }))
        }
    }, [userList, reportDetail])

    useEffect(() => {
        queryData();
    }, [record, dateRange, selectProjectType])

    const queryData = () => {
        //console.log(record, 'idididid')
        let userId = null
        if (user?.username === 'SuperAdmin' && record === 1) {
            userId = undefined
        } else if (user?.username === 'SuperAdmin' && record !== 1) {
            userId = record
        } else if (user?.username !== 'SuperAdmin' && record === 1) {
            userId = user?.id
        } else if (user?.username !== 'SuperAdmin' && record !== 1) {
            userId = record
        }
        // user?.username === 'SuperAdmin' && record === 1 ? record?.id : record ? record : user?.id,
        let query = {
            userId,
            reportType: reportType, projectType: selectProjectType, asc: true
        }
        //console.log(query, 'query1')
        if ((dateRange && dateRange instanceof Array && dateRange[0] != '')) {
            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));
    }

    useEffect(() => {
        if (activeTabKey1 && activeTabKey1 == 'tab2') {
            setRecord(null);
        } else if (activeTabKey1 && activeTabKey1 == 'tab1') {
            // setRecord(userList[0]);
        }
    }, [activeTabKey1])

    const handelRefresh = () => {
        let query = { userId: record.id, reportType: reportType, asc: true }
        dispatch(getReportList(query));
    }

    const handleClose = () => {
        setDetailVisible(false)
    }
    const handleOpen = () => {
        setDetailVisible(true)
    }

    const tabList = [
        {
            key: 'tab1',
            tab: '巡查',
        }, {
            key: 'tab2',
            tab: '巡查轨迹查询',
        },
    ];
    const contentList = {
        tab1: [
            <div>
                <Card style={{ flex: 1 }}>
                    <DetailList
                        user={user}
                        reportList={reportList} record={record} loading={reportListLoading} dispatch={dispatch} handleOpen={handleOpen} handelRefresh={handelRefresh}
                        isPatrol={isPatrol} isRoad={isRoad} isAnomaly={isAnomaly} queryData={queryData}
                    />
                </Card>
            </div>
        ],
        tab2: <PatrolGis userId={(record || {}).id} dispatch={dispatch} reportList={reportList} />
    };
    const onTab1Change = (key) => {
        setActiveTabKey1(key);
    };

    // const handleChangeRecord = (newRecord) => {
    //     let target = null;
    //     if (!record || (newRecord && newRecord.id != record.id)) {
    //         target = newRecord;
    //     }
    //     setRecord(target);
    // }

    const handleExport = () => {
        if (reportList && reportList instanceof Array && reportList.length) {
            let ids = reportList.map(item => item.id);
            exports(ids, reportType);
        }
    }

    return (
        <div className='card-protable'>
            <Card >
                <PatrolNameList
                    clientHeight={clientHeight} user={user}
                    dispatch={dispatch}
                    onChange={(record) => setRecord(record)}
                    record={record}
                    activeTabKey1={activeTabKey1}
                    userList={userList}
                    loading={userLoading}
                />
            </Card>
            <Card
                style={{ flex: 1 }}
                tabList={isPatrol ? tabList : undefined}
                activeTabKey={activeTabKey1}
                onTabChange={(key) => {
                    onTab1Change(key);
                }}
            >
                {
                    activeTabKey1 == 'tab1' ?
                        <div style={{ marginBottom: 20 }}>
                            <RangePicker onChange={(date, dateString) => { setDateRange(dateString) }} />
                            {
                                isAnomaly ?
                                    <Select
                                        style={{
                                            width: 120,
                                            marginLeft: 20
                                        }}
                                        options={[
                                            { label: '养护', value: 'conserve' },
                                            { label: '巡查', value: 'patrol' },
                                            { label: '在建', value: 'construction' },
                                        ]}
                                        placeholder="反馈类型"
                                        onChange={(value) => {
                                            setSelectProjectType(value)
                                        }}
                                    />
                                    : ''
                            }
                            <Button style={{ marginLeft: 20 }}>查询</Button>
                            {/* <Button style={{ marginLeft: 20 }} onClick={handleExport} >导出</Button> */}
                        </div> : ''
                }
                {contentList[activeTabKey1]}
                <DetailForm
                    visible={detailVisible}
                    handleClose={handleClose}
                    data={reportDetailCopy}
                    loading={reportDetailLoading}
                    isPatrol={isPatrol} isRoad={isRoad} isAnomaly={isAnomaly}
                />
            </Card>
        </div>

    );
};

function mapStateToProps(state) {
    const { auth, depMessage, userList, reportList, reportDetail, global } = state;
    const pakData = (dep) => {
        return dep.map((d) => {
            return {
                title: d.name,
                value: d.id,
                children: pakData(d.subordinate)
            }
        })
    }
    let depData = pakData(depMessage.data || [])
    return {
        user: auth.user,
        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,
        clientHeight: global.clientHeight,

    };
}
export default connect(mapStateToProps)(PatrolTable);