Highways4Good/web/client/src/sections/fillion/containers/maintenanceSpotCheck.js

import { connect } from 'react-redux';
import React, { useEffect, useState } from 'react';
import { Button, Modal, Form, Input, Divider, Spin, Image, DatePicker } from 'antd'
import ProTable from '@ant-design/pro-table';
import { getReportSpotPrepare, getSpotCheck, getSpotCheckDetail } from '../actions/extract'
import { getReportDetail } from '../actions/patrol';
import moment from 'moment'



const DetailForm = (props) => {
    const { visible, data, handleClose, loading } = props
    //console.log('data1', data)
    const [qndmn] = useState(localStorage.getItem('qndmn'))
    const changeBoolean = (bool) => {
        // console.log('bool', bool)
        return bool ? '无异常' : '有异常'
    }
    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 keyList = [
        { key: '路线代码', name: 'codeRoad' },
        { key: '其他', name: 'projectType' },
        { key: '道路类型', name: 'reportType' },
        { key: '路线名称', name: 'road' },
        { key: '养护路段', name: 'roadSectionStart' },
        { key: '具体位置', name: 'address' },
        { key: '路面类型', name: 'roadType' },
        { key: '路面宽度(米)', name: 'roadWidth' },
        { key: '错车道（个）', name: 'wrongLane' },
        { key: '行道树（棵）', name: 'roadsideTrees' },
        { key: '边沟（米）', name: 'roadsideDitch' },
        { key: '护栏（米）', name: 'guardrail' },
        { key: '标线（米）', name: 'roadMarking' },
        { key: '养护人员人数（人）', name: 'maintenanceStaffCount' },
        { key: '修整路肩（平方米）', name: 'shoulderRepair' },
        { key: '清理边沟（米）', name: 'ditchCleaning' },
        { key: '修补沥青路面（平方米）', name: 'asphaltRepair' },
        { key: '修补水泥路面（平方米）', name: 'concreteRepair' },
        { key: '除草（米）', name: 'grassMowing' },
        { key: '树刷白（株/公里）', name: 'treeWhitening' },
        { key: '桩刷白（个）', name: 'pileWhitening' },
        { key: '维护护栏（个）', name: 'guardrailMaintenance' },
        { key: '修复端头（块）', name: 'endHeadRepair' },
        { key: '其他养护内容', name: 'otherDescription' },
        { key: '养护前图片', name: 'conserveBeforePic' },
        { key: '养护后图片', name: 'conserveAfterPic' },
        { key: '上报视频', name: 'videoUrl' },

    ];
    const keyListOld = [
        // { key: '编号', name: 'id' },
        { key: '工程类型', name: 'projectType' },
        { key: '所在路段', name: 'road' },
        { key: '具体位置', name: 'address' },
        { key: '巡查内容', name: 'content' },
        { key: '路线代码', name: 'codeRoad' },
        // { key: '病害照片', name: 'scenePic' },
        { key: '养护前', name: 'conserveBeforePic' },
        { key: '养护中', name: 'conserveUnderwayPic' },
        { key: '养护后', name: 'conserveAfterPic' },

    ];
    const renderContent = (data) => {
        if (data) {
            if (new Date(data.time) > new Date('2023-08-01')) {
                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 != 'conserveBeforePic' && obj.name != 'conserveAfterPic' && obj.name != 'roadSectionStart' && obj.name != 'videoUrl' && obj.name.indexOf('conserve') == -1 ?
                                <Input
                                    style={{ width: '60%' }}
                                    value={
                                        obj.name == 'id' ?
                                            moment(data.time).format("YYYYMMDD") * 10000 + data.id
                                            :
                                            obj.name == 'projectType' ?
                                                reportTypeText(data[obj.name])
                                                : obj.name == 'reportType' && data['codeRoad'] ? data['codeRoad'][0] === 'X' ? '县道'
                                                    : data['codeRoad'][0] === 'Y' ? '乡道' : '村道' :
                                                    data[obj.name]
                                    }
                                    disabled
                                />
                                : obj.name != 'roadSectionStart' && obj.name != 'videoUrl' ?
                                    <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> : obj.name != 'videoUrl' ? <div style={{ width: '60%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
                                        <Input style={{ width: '100%' }} disabled value={data[obj.name] + '-' + data['roadSectionEnd']} />

                                    </div> : <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
                                        {
                                            data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(videoUrl => {
                                                return <div style={{ width: '44%', margin: 6 }}>
                                                    <video width={'100%'} style={{ marginBottom: 4 }} >
                                                        <source src={qndmn + '/' + videoUrl} type="video/mp4" />
                                                    </video>
                                                </div>
                                            }) : '暂无视频'
                                        }
                                    </div>
                        }

                    </div>
                })

            } else {
                return keyListOld.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
                                            :
                                            obj.name == 'projectType' ?
                                                reportTypeText(data[obj.name]) :
                                                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={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
                                            </div>
                                        }) : '暂无图片'
                                    }
                                </div>

                        }
                    </div>
                })

            }

        } else {
            return '暂无数据'
        }
    }
    // const renderContent = (data) => {
    //     if (data) {
    //         if (data['inspectionNoException']) {
    //             // 当'无异常'字段为true时，显示'无异常'和其他非异常相关字段
    //             return keyList.map(obj => {
    //                 if (obj.name === 'inspectionNoException' || obj.name === 'reportType' || obj.name === 'projectType' || obj.name === 'road' || obj.name === 'roadSectionStart' || obj.name === 'address' || obj.name === 'codeRoad' || obj.name === 'scenePic' || obj.name === 'videoUrl') {
    //                     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' && data[obj.name] instanceof Array ?
    //                                     <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
    //                                         {
    //                                             data[obj.name].map(imgSrc => {
    //                                                 return <div style={{ width: '44%', margin: 6 }}>
    //                                                     <Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
    //                                                 </div>
    //                                             })
    //                                         }
    //                                     </div>
    //                                     : obj.name === 'roadSectionStart' ?
    //                                         <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
    //                                             <Input style={{ width: '100%' }} disabled value={data[obj.name] + '-' + data['roadSectionEnd']} />
    //                                         </div>
    //                                         :
    //                                         <Input
    //                                             style={{ width: '70%' }}
    //                                             value={
    //                                                 obj.name === 'inspectionNoException' ?
    //                                                     '无异常'
    //                                                     :
    //                                                     obj.name === 'id'
    //                                                         ? moment(data.time).format("YYYYMMDD") * 10000 + data.id
    //                                                         : obj.name === 'projectType' || obj.name === 'reportType'
    //                                                             ? reportTypeText(data[obj.name])
    //                                                             : data[obj.name]
    //                                             }
    //                                             disabled
    //                                         />
    //                             }
    //                         </div>
    //                     );
    //                 } else {
    //                     return null; // 不渲染异常相关字段
    //                 }
    //             });
    //         } else {
    //             // 当'无异常'字段为false或未定义时，显示其他异常相关字段
    //             return keyList.map(obj => {
    //                 if (obj.name !== 'inspectionNoException') {
    //                     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 !== 'roadSectionStart' && obj.name.indexOf('conserve') === -1 ?
    //                                     <Input
    //                                         style={{ width: '70%' }}
    //                                         value={
    //                                             obj.name === 'id'
    //                                                 ? moment(data.time).format("YYYYMMDD") * 10000 + data.id
    //                                                 : obj.name === 'projectType' || obj.name === 'reportType'
    //                                                     ? reportTypeText(data[obj.name])
    //                                                     : data[obj.name]
    //                                         }
    //                                         disabled
    //                                     />
    //                                     : obj.name !== 'roadSectionStart' ?
    //                                         <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 style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
    //                                             <Input style={{ width: '100%' }} disabled value={data[obj.name] + '-' + data['roadSectionEnd']} />
    //                                         </div>
    //                             }
    //                         </div>
    //                     );
    //                 } else {
    //                     return null; // 不渲染其他异常字段
    //                 }
    //             });
    //         }
    //     } else {
    //         return '暂无数据';
    //     }
    // }
    return (
        <Modal
            visible={visible}
            footer={null}
            onCancel={handleClose}
            title={'养护管理详情'}
        >
            <Spin spinning={loading}>
                {renderContent(data)}
            </Spin>
        </Modal>
    )
}
const MaintenanceSpotCheck = (props) => {
    const { dispatch, user, loading, reportDetail, reportDetailLoading } = props
    const [data, setData] = useState()
    const [vis, setVis] = useState(false)//模态框的显示与隐藏变量
    const [count, setCount] = useState(0)
    const [depId, setDepId] = useState(0)
    const [depName, setDepName] = useState('')
    const [total, setTotal] = useState(0)
    const [previewId, setPreviewId] = useState(0)
    const [reportData, setReportData] = useState([])
    const [detailVisible, setDetailVisible] = useState(false)
    const [dateRange, setDateRange] = useState();
    const { RangePicker } = DatePicker

    //console.log('reportData', reportData)
    const checkDetail = (record) => {
        dispatch(getReportDetail(record.report?.id))
    }
    const handleOpen = () => {
        setDetailVisible(true)
    }
    const handleClose = () => {
        setDetailVisible(false)
    }
    const columns = [
        {
            title: '抽查日期',
            key: 'spotDate',
            dataIndex: 'spotDate',
            align: 'center',
            // render: (_, record) => {
            //     return 
            // }
        }, ,
        {
            title: '工程类型',
            key: 'projectType',
            dataIndex: 'projectType',
            align: 'center',
            render: (_, record) => {
                return '养护'
            }
        },
        {
            title: '所属道路',
            key: 'road',
            dataIndex: 'road',
            align: 'center',
            render: (_, record) => {
                return record?.report?.road
            }
        },
        {
            title: '所在路段',
            key: 'address',
            dataIndex: 'address',
            align: 'center',
            render: (_, record) => {
                return `${record?.report?.roadSectionStart || ''}-${record?.report?.roadSectionEnd || ''}`
            }
        },
        {
            title: '具体位置',
            key: 'address',
            dataIndex: 'address',
            align: 'center',
            render: (_, record) => {
                return record?.report?.address
            }
        },
        {
            title: '上报人',
            width: 100,
            key: 'userName',
            dataIndex: 'userName',
            align: 'center',
            render: (text, record) => {
                return record?.report?.user?.name || ''
            }
        }, {
            title: '上报时间',
            key: 'time',
            dataIndex: 'time',
            valueType: 'dateTime',
            align: 'center',
            render: (_, record) => {
                return moment(record?.report?.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        {
            title: '操作',
            key: 'caozuo',
            align: 'center',
            render: (_, record) => {
                return <Button
                    onClick={() => { checkDetail(record); handleOpen() }}
                    style={{ marginRight: 10 }}>查看</Button>
            }
        }
    ]
    const queryData = (query = { startTime: '1970-1-1', endTime: '2099-12-31' }) => {
        dispatch(getSpotCheckDetail(query)).then(res => {
            if (res.success) {
                const data = res.payload.data?.map(item => {
                    return { report: item.report, spotDate: item.spotDate }
                }
                )
                setReportData(data)
            }
        })
    }

    useEffect(() => {
        queryData()
    }, [])
    const [form] = Form.useForm()
    const addHanler = () => {
        setVis(true)
    }
    const extractHandler = () => {
        form.validateFields(['percentValue']).then(async (values) => {
            if (Number(values.percentValue) > 0) {
                const res = await dispatch(getReportSpotPrepare({ percentage: Number(values.percentValue) }))
                setCount(res?.payload.data?.reportCount)
                setDepId(res?.payload.data?.lukyDepartment?.id)
                setDepName(res?.payload.data?.lukyDepartment?.name)
                setPreviewId(res?.payload.data?.previewId)
                setTotal(((res?.payload.data?.reportCount) * Number(values.percentValue)) / 100)
                form.setFieldsValue({
                    'result': res?.payload.data?.reportCount,
                    'village': res?.payload.data?.lukyDepartment?.name,
                    'total': Math.ceil((res?.payload.data?.reportCount) * (Number(values.percentValue) / 100))
                })
            }
        })
    }
    const cancelHandler = () => {
        setVis(false)
        form.resetFields()
    }
    const okHandler = async () => {
        if (previewId !== 0) {
            const res = await dispatch(getSpotCheck({ previewId }))
            form.resetFields()
            setVis(false)
        }
    }
    const lookhandler = () => {
        if ((dateRange && dateRange instanceof Array && dateRange[0] != '')) {
            queryData({ startTime: moment(dateRange[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'), endTime: moment(dateRange[1]).startOf('day').format('YYYY-MM-DD HH:mm:ss') })
        }
    }
    return (
        <div>
            <Button onClick={addHanler} type='primary' style={{ marginRight: '50px' }}> 新增 </Button>
            <RangePicker onChange={(date, dateString) => { setDateRange(dateString) }} style={{ marginRight: '50px' }} />
            <Button onClick={lookhandler} > 查询 </Button>
            <Divider />
            <ProTable
                columns={columns}
                dataSource={reportData}
                loading={loading}
                pagination={{
                    pageSize: 10,
                    defaultPageSize: 10,
                    showSizeChanger: false,
                }}
                rowKey="key"
                toolBarRender={false}
                search={false}
            />
            <Modal visible={vis} onCancel={cancelHandler} title='养护抽查' onOk={okHandler}>
                <Form form={form}>
                    <Form.Item
                        label="抽取比例"
                        // name="percent"
                        rules={[{ required: true, message: '请填写抽取比例' }]}
                    >
                        <Input.Group compact>
                            <Form.Item
                                name="percentValue"
                                noStyle
                                rules={[
                                    { required: true, message: '请填写抽取比例' },
                                    {
                                        pattern: /^(100|\d{1,2})(\.\d{1,2})?$/,
                                        message: '请输入有效的比例',
                                    },
                                ]}
                            >
                                <Input style={{ width: '80%' }} placeholder="请输入抽取比例" />
                            </Form.Item>
                            <Form.Item
                                // name="percentSign"
                                noStyle
                                style={{ width: '20%', textAlign: 'center' }}
                            >
                                %
                            </Form.Item>
                        </Input.Group>
                    </Form.Item>
                    <Form.Item className="ant-row" >
                        <div style={{ display: 'flex', justifyContent: 'center' }}>
                            <Button type='primary' onClick={extractHandler}>开始抽取</Button>
                        </div>
                    </Form.Item>
                    <Form.Item label='抽查结果' name='result'>
                        <Input disabled />
                    </Form.Item>
                    <Form.Item label='抽查乡镇' name='village'>
                        <Input disabled />
                    </Form.Item>
                    <Form.Item label='抽查条数' name='total'>
                        <Input disabled />
                    </Form.Item>
                </Form>
            </Modal>
            <DetailForm visible={detailVisible}
                handleClose={handleClose}
                data={reportDetail}
                loading={reportDetailLoading} />
        </div>
    )
}
function mapStateToProps (state) {
    const { auth, spotCheckDetail, reportDetail } = state
    //('state1', state)
    return {
        user: auth.user,
        loading: spotCheckDetail?.isRequesting,
        reportDetailLoading: reportDetail.isRequesting,
        reportDetail: reportDetail.data,

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