You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
668 lines
36 KiB
668 lines
36 KiB
import { connect } from 'react-redux';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { Button, Modal, Form, Input, Divider, Spin, Image, DatePicker, Descriptions, Table } 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'
|
|
import '../components/maintenanceTable.less'
|
|
|
|
|
|
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: 'codeRoad' },
|
|
{ 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: 'conserveUnderwayPic' },
|
|
{ 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 roadInfo = [
|
|
{ key: '路面类型', name: 'roadType' },
|
|
{ key: '路面宽度/米', name: 'roadWidth' },
|
|
{ key: '错车道/个', name: 'wrongLane' },
|
|
{ key: '行道树/棵', name: 'roadsideTrees' },
|
|
{ key: '边沟/米', name: 'roadsideDitch' },
|
|
{ key: '护栏/米', name: 'guardrail' },
|
|
{ key: '标线/米', name: 'roadMarking' },
|
|
];
|
|
const mantenanceInfo = [
|
|
{ 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' },
|
|
];
|
|
const mantenancePic = [
|
|
{ key: '养护前图片', name: 'conserveBeforePic' },
|
|
{ key: '养护中图片', name: 'conserveUnderwayPic' },
|
|
{ key: '养护后图片', name: 'conserveAfterPic' },
|
|
];
|
|
const renderContent = (data) => {
|
|
if (data) {
|
|
console.log('data1111', data)
|
|
if (moment(data.time).isAfter(moment('2023-08-03 00:00:00'))) {
|
|
return <div className='maintenanceNew'>
|
|
<Descriptions title="基础信息" bordered style={{ marginBottom: 20 }}>
|
|
<Descriptions.Item label="道路类型">{data['codeRoad'] && data['codeRoad'].length ? data['codeRoad'][0] === 'X' ? '县道' : data['codeRoad'][0] === 'Y' ? '乡道' : '村道' : ''}</Descriptions.Item>
|
|
<Descriptions.item label="其他">{reportTypeText(data['projectType']) || ''}</Descriptions.item>
|
|
<Descriptions.item label="路线代码">{data['codeRoad'] || ''}</Descriptions.item>
|
|
<Descriptions.item label="路线名称">{data['code'] || ''}</Descriptions.item>
|
|
<Descriptions.item label="养护路段" span={2}>{data['roadSectionStart'] + '-' + data['roadSectionEnd'] || ''}</Descriptions.item>
|
|
<Descriptions.Item label="具体位置" span={3} >{data['address'] || ''}</Descriptions.Item>
|
|
</Descriptions>
|
|
<Descriptions title="道路信息" bordered style={{ marginBottom: 20 }}>
|
|
{roadInfo.map(item => (
|
|
<Descriptions.Item label={item.key}>
|
|
{data[item.name] || ''}
|
|
</Descriptions.Item>
|
|
))}
|
|
</Descriptions>
|
|
<Descriptions title="道路信息" bordered style={{ marginBottom: 20 }}>
|
|
{mantenanceInfo.map(item => (
|
|
<Descriptions.Item label={item.key}>
|
|
{data[item.name] || ''}
|
|
</Descriptions.Item>
|
|
))}
|
|
</Descriptions>
|
|
<Descriptions title="养护图片" bordered style={{ marginBottom: 20 }} >
|
|
{mantenancePic.map(item => (
|
|
<Descriptions.Item label={item.key} span={3} >
|
|
<div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
|
|
{data[item.name]?.map(imgSrc => {
|
|
return <div style={{ width: '50px', margin: 6, display: 'flex' }}>
|
|
<Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
|
|
</div>
|
|
}) || '暂无图片'}
|
|
</div>
|
|
</Descriptions.Item>
|
|
))}
|
|
</Descriptions>
|
|
<Descriptions title="养护视频" bordered style={{ marginBottom: 20 }} >
|
|
<Descriptions.Item label={'养护视频'} span={3}>
|
|
<div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
|
|
{data['videoUrl']?.map(videoSrc => {
|
|
return <div style={{ width: '44%', margin: 6, display: 'flex' }}>
|
|
<video src={qndmn + '/' + videoSrc} width={'100%'} style={{ marginBottom: 4 }} controls />
|
|
</div>
|
|
}) || '暂无视频'}
|
|
</div>
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
</div>
|
|
// if (data) {
|
|
// if (moment(data.time).isAfter(moment('2023-08-03 00:00:00'))) {
|
|
// 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" controls />
|
|
// </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 <div className='maintenanceNew'>
|
|
<Descriptions title="养护信息" bordered style={{ marginBottom: 20 }} column={3}>
|
|
<Descriptions.Item label="道路类型">{data['codeRoad'] && data['codeRoad'].length ? data['codeRoad'][0] === 'X' ? '县道' : data['codeRoad'][0] === 'Y' ? '乡道' : '村道' : ''}</Descriptions.Item>
|
|
<Descriptions.item label="养护路段" >{data['roadSectionStart'] && data['roadSectionEnd'] ? (data['roadSectionStart'] + '-' + data['roadSectionEnd']) : ''}</Descriptions.item>
|
|
<Descriptions.item label="路线代码">{data['codeRoad'] || ''}</Descriptions.item>
|
|
{/* <Descriptions.item label="路线名称">{data['code'] || ''}</Descriptions.item> */}
|
|
<Descriptions.Item label="具体位置" span={3} >{data['address'] || ''}</Descriptions.Item>
|
|
<Descriptions.Item label="养护内容" span={3} >{data['content'] || ''}</Descriptions.Item>
|
|
</Descriptions>
|
|
<Descriptions title="养护图片" bordered style={{ marginBottom: 20 }} >
|
|
{mantenancePic.map(item => (
|
|
<Descriptions.Item label={item.key} className="custom-item" span={3}>
|
|
<div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
|
|
{data[item.name]?.map(imgSrc => {
|
|
return <div style={{ width: '50px', margin: 6, display: 'flex' }}>
|
|
<Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
|
|
</div>
|
|
}) || '暂无图片'}
|
|
</div>
|
|
</Descriptions.Item>
|
|
))}
|
|
</Descriptions>
|
|
<Descriptions title="养护视频" bordered style={{ marginBottom: 20 }} >
|
|
<Descriptions.Item label={'养护视频'} className="custom-item" >
|
|
<div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
|
|
{data['videoUrl']?.map(videoSrc => {
|
|
return <div style={{ width: '44%', margin: 6, display: 'flex' }}>
|
|
<video src={qndmn + '/' + videoSrc} width={'100%'} style={{ marginBottom: 4 }} controls />
|
|
</div>
|
|
}) || '暂无视频'}
|
|
</div>
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
</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
|
|
width={'60%'}
|
|
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(['1970-1-1', '2099-12-31']);
|
|
const { RangePicker } = DatePicker
|
|
const [expandedRowKeys, setExpandedRowKeys] = useState([]);
|
|
|
|
//console.log('reportData', reportData)
|
|
const checkDetail = (record) => {
|
|
dispatch(getReportDetail(record?.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: 'depName',
|
|
align: 'center',
|
|
|
|
},
|
|
{
|
|
title: '抽查数量',
|
|
key: 'count',
|
|
dataIndex: 'count',
|
|
align: 'center',
|
|
|
|
},
|
|
{
|
|
title: '抽查总数',
|
|
key: 'reportCount',
|
|
dataIndex: 'reportCount',
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
]
|
|
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 {
|
|
spotDate: moment(item.date).format('YYYY-MM-DD'),
|
|
depName: item.department?.name,
|
|
reportCount: item.reportCount,
|
|
count: Math.ceil((item.reportCount * item.percentage) / 100),
|
|
reportDetail: item.reportSpotChecks?.map(child => {
|
|
return child.report
|
|
}),
|
|
id: item.id
|
|
}
|
|
})
|
|
//console.log('data1', data)
|
|
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(Math.ceil((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 }))
|
|
const rslt = res.payload.data.map(item => {
|
|
return {
|
|
spotDate: moment(item.date).format('YYYY-MM-DD'),
|
|
depName: item.department?.name,
|
|
reportCount: item.reportCount,
|
|
count: Math.ceil((item.reportCount * item.percentage) / 100),
|
|
reportDetail: item.reportSpotChecks?.map(child => {
|
|
return child.report
|
|
}),
|
|
id: item.id
|
|
}
|
|
}) || []
|
|
setReportData(rslt)
|
|
form.resetFields()
|
|
setVis(false)
|
|
}
|
|
}
|
|
//console.log('setReportData', reportData)
|
|
|
|
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]).endOf('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}
|
|
expandable={{
|
|
//expandedRowKeys, // 控制哪些行展开，这里需要通过 state 管理
|
|
defaultExpandedRowKeys: ['0'],
|
|
// onExpand: handleExpand,
|
|
expandedRowRender: (record) => (
|
|
< Table
|
|
pagination={false}
|
|
dataSource={record?.reportDetail}
|
|
columns={
|
|
[
|
|
{ title: '所属道路', dataIndex: 'road' },
|
|
{
|
|
title: '所在路段',
|
|
key: 'address',
|
|
dataIndex: 'address',
|
|
align: 'center',
|
|
render: (_, r) => {
|
|
return `${r?.roadSectionStart || ''}-${r?.roadSectionEnd || ''}`
|
|
}
|
|
},
|
|
{ title: '具体位置', dataIndex: 'address' },
|
|
{
|
|
title: '上报人',
|
|
width: 100,
|
|
key: 'userName',
|
|
dataIndex: 'userName',
|
|
align: 'center',
|
|
render: (text, r) => {
|
|
return r?.user?.name || ''
|
|
}
|
|
},
|
|
{
|
|
title: '上报时间',
|
|
key: 'time',
|
|
dataIndex: 'time',
|
|
valueType: 'dateTime',
|
|
align: 'center',
|
|
render: (_, r) => {
|
|
return moment(r?.time).format('YYYY-MM-DD HH:mm:ss')
|
|
}
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'caozuo',
|
|
align: 'center',
|
|
render: (_, r) => {
|
|
return <Button
|
|
onClick={() => { checkDetail(r); handleOpen() }}
|
|
style={{ marginRight: 10 }}>查看</Button>
|
|
}
|
|
}
|
|
// { title: '', dataIndex: 'subColumn1' },
|
|
// { title: '', dataIndex: 'subColumn2' },
|
|
// ... 其他子表格列配置
|
|
]}
|
|
/>
|
|
),
|
|
}}
|
|
pagination={{
|
|
pageSize: 10,
|
|
defaultPageSize: 10,
|
|
showSizeChanger: false,
|
|
}}
|
|
rowKey={(record) => { return record.id }}
|
|
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" >
|
|
|
|
<Button style={{ marginLeft: '200%' }} type='primary' onClick={extractHandler}>开始抽取</Button>
|
|
</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);
|