free-sun
/
Highways4Good
14
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

feat:五个菜单优化+巡查预览

dev
zhaobing 2 years ago
parent
0a573538ef
commit
5df4062033
7 changed files with 964 additions and 371 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      api/app/lib/controllers/report/index.js
  2. 3
      api/app/lib/index.js
  3. 16
      web/client/src/sections/fillion/components/fileTable.js
  4. 270
      web/client/src/sections/fillion/components/maintenanceTable.js
  5. 19
      web/client/src/sections/fillion/components/maintenanceTable.less
  6. 523
      web/client/src/sections/fillion/components/patrolTable.js
  7. 451
      web/client/src/sections/fillion/containers/maintenanceSpotCheck.js

53
api/app/lib/controllers/report/index.js
View File

@ -406,7 +406,7 @@ async function spotCheck (ctx) {
}) })
let checkCount = Math.ceil(prepareRes.reportCount * (prepareRes.percentage / 100)) let checkCount = Math.ceil(prepareRes.reportCount * (prepareRes.percentage / 100))
const reportRes = findUsers.length && checkCount ? await models.Report.findAll({ const reportRes = await findUsers.length && checkCount ? await models.Report.findAll({
where: { where: {
reportType: 'conserve', reportType: 'conserve',
userId: { $in: findUsers }, userId: { $in: findUsers },
@ -436,10 +436,30 @@ async function spotCheck (ctx) {
} }
})) }))
} }
const rslt = findUsers.length && checkCount ? await models.ReportSpotCheckPreview.findAll({
where: {
checked: 'true',
id: previewId
},
include: [{
model: models.Department,
attributes: ['name']
}, {
model: models.ReportSpotCheck,
include: [{
model: models.Report,
include: [{
model: models.User,
attributes: ['name']
}],
}]
}
],
}) : []
console.log('rslt111', rslt)
await transaction.commit(); await transaction.commit();
ctx.status = 200; ctx.status = 200;
ctx.body = reportRes ctx.body = rslt
} catch (error) { } catch (error) {
await transaction.rollback(); await transaction.rollback();
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`); ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
@ -453,19 +473,26 @@ async function spotCheckDetail (ctx) {
const { models } = ctx.fs.dc const { models } = ctx.fs.dc
const { startTime, endTime } = ctx.query const { startTime, endTime } = ctx.query
try { try {
const res = await models.ReportSpotCheck.findAll({ const res = await models.ReportSpotCheckPreview.findAll({
where: {
checked: 'true'
},
include: [{ include: [{
model: models.Report, model: models.Department,
where: { reportType: 'conserve' },//只查养护数据 attributes: ['name']
}, {
model: models.ReportSpotCheck,
where: { spotDate: { $between: [moment(startTime).format('YYYY-MM-DD'), moment(endTime).format('YYYY-MM-DD')] } },
order: [['id', 'DESC']],
include: [{ include: [{
model: models.User, model: models.Report,
attributes: ['name'] include: [{
model: models.User,
attributes: ['name']
}],
}] }]
}], }
// offset: pageSize * currentIndex, ],
// limit: Number(pageSize),
where: { spotDate: { $between: [moment(startTime).format('YYYY-MM-DD'), moment(endTime).format('YYYY-MM-DD')] } },
order: [['id', 'DESC']]
}) })
ctx.body = res ctx.body = res
ctx.status = 200 ctx.status = 200

3
api/app/lib/index.js
View File

@ -63,6 +63,9 @@ module.exports.models = function (dc) { // dc = { orm: Sequelize对象, ORM: Seq
ReportSpotCheck.belongsTo(Report, { foreignKey: 'reportId', targetKey: 'id' }); ReportSpotCheck.belongsTo(Report, { foreignKey: 'reportId', targetKey: 'id' });
Report.hasMany(ReportSpotCheck, { foreignKey: 'reportId', sourceKey: 'id' }); Report.hasMany(ReportSpotCheck, { foreignKey: 'reportId', sourceKey: 'id' });
ReportSpotCheck.belongsTo(ReportSpotCheckPreview, { foreignKey: 'prepareId', targetKey: 'id' });
ReportSpotCheckPreview.hasMany(ReportSpotCheck, { foreignKey: 'prepareId', sourceKey: 'id' });
}; };

16
web/client/src/sections/fillion/components/fileTable.js
View File

@ -67,7 +67,17 @@ const DetailList = (props) => {
}, },
}); });
} }
//处理预览的逻辑
const preview = (url) => {
let link = encodeURI(url) || ''
if (link)
if (url.indexOf("pdf") !== -1 || url.indexOf("csv") !== -1 || url.indexOf("jpg") !== -1 || url.indexOf("png") !== -1) {
window.open(link)
} else {
window.open(`https://view.officeapps.live.com/op/view.aspx?src=${link}`)
}
}
const columns = [ const columns = [
{ {
title: '资料名称', title: '资料名称',
@ -140,12 +150,14 @@ const DetailList = (props) => {
<a style={{ color: '#333398' }} onClick={() => { showDeleteConfirm(record, filePath) }} <a style={{ color: '#333398' }} onClick={() => { showDeleteConfirm(record, filePath) }}
disabled={user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'FILEMANAGE')[0].isshow === "true" ? true : ''} disabled={user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'FILEMANAGE')[0].isshow === "true" ? true : ''}
>删除</a> >删除</a>
{ <span className="ant-divider" />
<a style={{ color: '#333398' }} onClick={() => { preview(path) }}>预览</a>
{/* {
['.png', '.jpg'].some(item => item == record.fileExt) ? ['.png', '.jpg'].some(item => item == record.fileExt) ?
[<span className="ant-divider" />, [<span className="ant-divider" />,
<a style={{ color: '#333398' }} onClick={() => { setImgSrc({ imageView: true, imgSrc: path }) }}>预览</a>] <a style={{ color: '#333398' }} onClick={() => { setImgSrc({ imageView: true, imgSrc: path }) }}>预览</a>]
: '' : ''
} } */}
{/* { {/* {
['.pdf'].some(item => item == record.fileExt) ? ['.pdf'].some(item => item == record.fileExt) ?
[<span className="ant-divider" />, [<span className="ant-divider" />,

270
web/client/src/sections/fillion/components/maintenanceTable.js
View File

@ -1,6 +1,6 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import './protable.less' import './protable.less'
import { Card, Button, DatePicker, Input, Modal, Spin, Image, message, Popover, Tree, Tooltip } from 'antd'; import { Card, Button, DatePicker, Input, Modal, Spin, Image, message, Popover, Tree, Descriptions } from 'antd';
import { DownOutlined, RightOutlined, CaretDownOutlined, CaretRightOutlined } from '@ant-design/icons'; import { DownOutlined, RightOutlined, CaretDownOutlined, CaretRightOutlined } from '@ant-design/icons';
import ProTable from '@ant-design/pro-table'; import ProTable from '@ant-design/pro-table';
import { getReportList, getReportDetail } from '../actions/patrol'; import { getReportList, getReportDetail } from '../actions/patrol';
@ -13,6 +13,7 @@ import moment from 'moment';
import { getAllDepUsers } from '../actions/allDepUsers' import { getAllDepUsers } from '../actions/allDepUsers'
import { getDepMessage, getDepUser, createUser, updateUser, delUser, resetPwd, createDep, delDep, updateDep } from '../../organization/actions/user' import { getDepMessage, getDepUser, createUser, updateUser, delUser, resetPwd, createDep, delDep, updateDep } from '../../organization/actions/user'
import { reportTypeText } from './patrolTable' import { reportTypeText } from './patrolTable'
import './maintenanceTable.less'
const DetailForm = (props) => { const DetailForm = (props) => {
const { visible, data, handleClose, loading } = props; const { visible, data, handleClose, loading } = props;
@ -61,87 +62,202 @@ const DetailForm = (props) => {
{ key: '养护后', name: 'conserveAfterPic' }, { 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) => { const renderContent = (data) => {
if (data) { if (data) {
console.log('data1111', data)
if (moment(data.time).isAfter(moment('2023-08-03 00:00:00'))) { if (moment(data.time).isAfter(moment('2023-08-03 00:00:00'))) {
return keyList.map(obj => { return <div className='maintenanceNew'>
return <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', margin: '12px 0' }}> <Descriptions title="基础信息" bordered style={{ marginBottom: 20 }}>
<span style={{ fontSize: 16, color: 'gray', minWidth: '26%' }}>{obj.key}</span> <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>
obj.name != 'conserveBeforePic' && obj.name != 'conserveAfterPic' && obj.name != 'roadSectionStart' && obj.name != 'videoUrl' && obj.name.indexOf('conserve') == -1 ? <Descriptions.item label="路线代码">{data['codeRoad'] || ''}</Descriptions.item>
<Input <Descriptions.item label="路线名称">{data['road'] || ''}</Descriptions.item>
style={{ width: '60%' }} <Descriptions.item label="养护路段" span={2}>{data['roadSectionStart'] && data['roadSectionEnd'] ? data['roadSectionStart'] + '-' + data['roadSectionEnd'] : ''}</Descriptions.item>
value={ <Descriptions.Item label="具体位置" span={3} >{data['address'] || ''}</Descriptions.Item>
obj.name == 'id' ? </Descriptions>
moment(data.time).format("YYYYMMDD") * 10000 + data.id <Descriptions title="基础信息" bordered style={{ marginBottom: 20 }}>
: {roadInfo.map(item => (
obj.name === 'projectType' ? <Descriptions.Item label={item.key}>
reportTypeText(data[obj.name]) {data[item.name] || ''}
: obj.name === 'reportType' ? data['codeRoad'] && data['codeRoad'].length ? data['codeRoad'][0] === 'X' ? '县道' </Descriptions.Item>
: data['codeRoad'][0] === 'Y' ? '乡道' : '村道' : '' : ))}
data[obj.name] </Descriptions>
} <Descriptions title="道路信息" bordered style={{ marginBottom: 20 }}>
disabled {mantenanceInfo.map(item => (
/> <Descriptions.Item label={item.key}>
: obj.name != 'roadSectionStart' && obj.name != 'videoUrl' ? {data[item.name] || ''}
<div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}> </Descriptions.Item>
{ ))}
data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(imgSrc => { </Descriptions>
return <div style={{ width: '44%', margin: 6 }}> <Descriptions title="养护图片" bordered style={{ marginBottom: 20 }} column={3}>
<Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} /> {mantenancePic.map(item => (
</div> <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 => {
</div> : obj.name != 'videoUrl' ? <div style={{ width: '60%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}> return <div style={{ width: '50px', margin: 6, display: 'flex' }}>
<Input style={{ width: '100%' }} disabled value={data[obj.name] + '-' + data['roadSectionEnd']} /> <Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
</div>
</div> : <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}> }) || '暂无图片'}
{ </div>
data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(videoUrl => { </Descriptions.Item>
return <div style={{ width: '44%', margin: 6 }}> ))}
<video src={qndmn + '/' + videoUrl} width={'100%'} style={{ marginBottom: 4 }} controls /> </Descriptions>
</div> <Descriptions title="养护视频" bordered style={{ marginBottom: 20 }} column={3}>
}) : '暂无视频' <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>
} }) || '暂无视频'}
</div>
</Descriptions.Item>
</Descriptions>
</div>
</div> // 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'].length ? 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 src={qndmn + '/' + videoUrl} width={'100%'} style={{ marginBottom: 4 }} controls />
// </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 { } else {
return keyListOld.map(obj => { return <div className='maintenanceNew'>
return <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', margin: '12px 0' }}> <Descriptions title="养护信息" bordered style={{ marginBottom: 20 }} column={3}>
<span style={{ fontSize: 16, color: 'gray', minWidth: '26%' }}>{obj.key}</span> <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>
obj.name != 'scenePic' && obj.name.indexOf('conserve') == -1 ? <Descriptions.item label="路线代码">{data['codeRoad'] || ''}</Descriptions.item>
<Input {/* <Descriptions.item label="路线名称">{data['code'] || ''}</Descriptions.item> */}
style={{ width: '70%' }} <Descriptions.Item label="具体位置" span={3} >{data['address'] || ''}</Descriptions.Item>
value={ <Descriptions.Item label="养护内容" span={3} >{data['content'] || ''}</Descriptions.Item>
obj.name == 'id' ? </Descriptions>
moment(data.time).format("YYYYMMDD") * 10000 + data.id <Descriptions title="养护图片" bordered style={{ marginBottom: 20 }} >
: {mantenancePic.map(item => (
obj.name == 'projectType' ? <Descriptions.Item label={item.key} className="custom-item" span={3}>
reportTypeText(data[obj.name]) :
data[obj.name]
}
disabled
/>
:
<div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}> <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
{ {data[item.name]?.map(imgSrc => {
data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(imgSrc => { return <div style={{ width: '50px', margin: 6, display: 'flex' }}>
return <div style={{ width: '44%', margin: 6 }}> <Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
<Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} /> </div>
</div> }) || '暂无图片'}
}) : '暂无图片'
}
</div> </div>
</Descriptions.Item>
} ))}
</div> </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 { } else {
@ -151,6 +267,8 @@ const DetailForm = (props) => {
return ( return (
<Modal <Modal
width={'60%'}
// style={{ width: 800 }}
visible={visible} visible={visible}
footer={null} footer={null}
onCancel={handleClose} onCancel={handleClose}
@ -159,7 +277,7 @@ const DetailForm = (props) => {
<Spin spinning={loading}> <Spin spinning={loading}>
{renderContent(data)} {renderContent(data)}
</Spin> </Spin>
</Modal> </Modal >
) )
} }
@ -218,7 +336,7 @@ const DetailList = (props) => {
dataIndex: 'projectType', dataIndex: 'projectType',
align: 'center', align: 'center',
render: (text, record) => { render: (text, record) => {
return record.projectType?.length > 0 ? reportTypeText(text) : (record.codeRoad && record.codeRoad.length > 0) return (record.codeRoad && record.codeRoad.length > 0)
? record.codeRoad[0] === 'X' ? record.codeRoad[0] === 'X'
? '县道' ? '县道'
: record.codeRoad[0] === 'Y' : record.codeRoad[0] === 'Y'
@ -678,4 +796,4 @@ function mapStateToProps(state) {
}; };
} }
export default connect(mapStateToProps)(MaintenanceTable); export default connect(mapStateToProps)(MaintenanceTable)

19
web/client/src/sections/fillion/components/maintenanceTable.less
View File

@ -0,0 +1,19 @@
.maintenanceNew {
.ant-descriptions-item-label {
width: 19%;
}
.ant-descriptions-item-content {
width: 40px;
}
}
.maintenanceOld {
.ant-descriptions-item-label {
width: 20%;
}
.ant-descriptions-item-content {
width: 40px;
}
}

523
web/client/src/sections/fillion/components/patrolTable.js
View File

@ -1,6 +1,6 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import './protable.less' import './protable.less'
import { Card, Button, Popconfirm, Badge, Col, Row, DatePicker, Input, Modal, Spin, Image, message, Popover, Select, Tree, Form } from 'antd'; import { Card, Button, Popconfirm, Checkbox, Badge, Col, Row, DatePicker, Input, Modal, Spin, Image, message, Popover, Select, Tree, Form, Descriptions } from 'antd';
import ProTable from '@ant-design/pro-table'; import ProTable from '@ant-design/pro-table';
import { DownOutlined, RightOutlined, CaretDownOutlined, CaretRightOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; import { DownOutlined, RightOutlined, CaretDownOutlined, CaretRightOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { getReportList, getReportDetail, handleReport, getAnspectionNotificationPhone, addAnspectionNotificationPhone } from '../actions/patrol'; import { getReportList, getReportDetail, handleReport, getAnspectionNotificationPhone, addAnspectionNotificationPhone } from '../actions/patrol';
@ -14,6 +14,7 @@ import NominateModal from '../components/feedback/nominateModal' //指派的模
import styles from './protable.less'; import styles from './protable.less';
import moment from 'moment'; import moment from 'moment';
import NominateModalcopy from './feedback/nominateModalcopy';//指派的模块 import NominateModalcopy from './feedback/nominateModalcopy';//指派的模块
import './maintenanceTable.less'
@ -42,31 +43,60 @@ const DetailForm = (props) => {
//('record12s', isAnomaly) //('record12s', isAnomaly)
const [qndmn] = useState(localStorage.getItem('qndmn')); const [qndmn] = useState(localStorage.getItem('qndmn'));
const keyList = [ // const keyList = [
// { key: '编号', name: 'id' }, // // { key: '编号', name: 'id' },
// isPatrol ?'巡查管理详情' :isRoad ? '建设上报详情' : '异常反馈详情' // // isPatrol ?'巡查管理详情' :isRoad ? '建设上报详情' : '异常反馈详情'
{ key: '工程类型', name: 'projectType', skip: !isPatrol }, // { key: '工程类型', name: 'projectType', skip: !isPatrol },
// { key: '反馈类型', name: 'projectType', skip: !isAnomaly },
// { key: '工程名称', name: 'projectName', skip: !isRoad },
// { key: '所在路段', name: 'road', skip: isPatrol },
// { key: '具体位置', name: 'address', skip: isPatrol },
// { key: '建设内容', name: 'content', skip: isPatrol },
// { key: '路线代码', name: 'codeRoad', },
// { key: '现场照片', name: 'scenePic', skip: isPatrol },
// { key: '处理意见', name: 'handleOpinions', skip: !isAnomaly },
// { key: '处理详情', name: 'handleContent', skip: !isAnomaly },
// { key: '处理图片', name: 'handlePic', skip: !isAnomaly },
// { key: '处理人', name: 'performerName', skip: !isAnomaly },
// { key: '道路类型', name: 'reportType', skip: !isPatrol },
// { key: '其他', name: 'projectType', skip: !isPatrol },
// { key: '路线名称', name: 'road', skip: !isPatrol },
// { key: '巡查路段', name: 'roadSectionStart', skip: !isPatrol },
// { key: '具体位置', name: 'address', skip: !isPatrol },
// { key: '巡查结果无异常', name: 'inspectionNoException', skip: !isPatrol },
// // insectionNoException
// { key: '路面损坏', name: 'roadDamage', skip: !isPatrol },
// { key: '安防损坏', name: 'securityDamage', skip: !isPatrol },
// { key: '桥梁损坏', name: 'bridgeDamage', skip: !isPatrol },
// { key: '涵洞损坏', name: 'culvertDamage', skip: !isPatrol },
// { key: '安防缺失', name: 'ecurityDeficiency', skip: !isPatrol },
// { key: '路域环境', name: 'encounteredEnvironment', skip: !isPatrol },
// { key: '其他内容', name: 'otherDescription', skip: !isPatrol },
// //{ key: '路线代码', name: 'codeRoad', skip: !isPatrol },
// { key: '上报图片', name: 'scenePic', skip: !isPatrol },
// { key: '上报视频', name: 'videoUrl', skip: !isPatrol },
// ];
const info = [
{ key: '反馈类型', name: 'projectType', skip: !isAnomaly }, { key: '反馈类型', name: 'projectType', skip: !isAnomaly },
{ key: '工程名称', name: 'projectName', skip: !isRoad }, { key: '所在道路', name: 'road', skip: isRoad },
{ key: '所在路段', name: 'road', skip: isPatrol },
{ key: '具体位置', name: 'address', skip: isPatrol },
{ key: '巡查内容', name: 'content', skip: isPatrol },
{ key: '路线代码', name: 'codeRoad', skip: !isAnomaly && isPatrol },
{ key: '现场照片', name: 'scenePic', skip: isPatrol },
{ key: '处理意见', name: 'handleOpinions', skip: !isAnomaly },
{ key: '处理详情', name: 'handleContent', skip: !isAnomaly },
{ key: '处理图片', name: 'handlePic', skip: !isAnomaly },
{ key: '处理人', name: 'performerName', skip: !isAnomaly },
{ key: '路线代码', name: 'codeRoad', skip: !isPatrol },
{ key: '道路类型', name: 'reportType', skip: !isPatrol }, { key: '道路类型', name: 'reportType', skip: !isPatrol },
{ key: '其他', name: 'projectType', skip: !isPatrol }, { key: '其他', name: 'projectType', skip: !isPatrol },
{ key: '路线代码', name: 'codeRoad', skip: isRoad },
{ key: '路线名称', name: 'road', skip: !isPatrol }, { key: '路线名称', name: 'road', skip: !isPatrol },
{ key: '所属路段', name: 'roadSectionStart', skip: !isAnomaly },
{ key: '巡查路段', name: 'roadSectionStart', skip: !isPatrol }, { key: '巡查路段', name: 'roadSectionStart', skip: !isPatrol },
{ key: '具体位置', name: 'address', skip: !isPatrol }, { key: '项目名称', name: 'projectName', skip: !isRoad },
{ key: '具体位置', name: 'address', },
{ key: '施工内容', name: 'content', skip: !isRoad },
{ key: '反馈内容', name: 'content', skip: !isAnomaly },
]
const patrolContent = [
{ key: '巡查结果无异常', name: 'inspectionNoException', skip: !isPatrol }, { key: '巡查结果无异常', name: 'inspectionNoException', skip: !isPatrol },
// insectionNoException
{ key: '路面损坏', name: 'roadDamage', skip: !isPatrol }, { key: '路面损坏', name: 'roadDamage', skip: !isPatrol },
{ key: '安防损坏', name: 'securityDamage', skip: !isPatrol }, { key: '安防损坏', name: 'securityDamage', skip: !isPatrol },
{ key: '桥梁损坏', name: 'bridgeDamage', skip: !isPatrol }, { key: '桥梁损坏', name: 'bridgeDamage', skip: !isPatrol },
@ -74,127 +104,348 @@ const DetailForm = (props) => {
{ key: '安防缺失', name: 'ecurityDeficiency', skip: !isPatrol }, { key: '安防缺失', name: 'ecurityDeficiency', skip: !isPatrol },
{ key: '路域环境', name: 'encounteredEnvironment', skip: !isPatrol }, { key: '路域环境', name: 'encounteredEnvironment', skip: !isPatrol },
{ key: '其他内容', name: 'otherDescription', skip: !isPatrol }, { key: '其他内容', name: 'otherDescription', skip: !isPatrol },
//{ key: '路线代码', name: 'codeRoad', skip: !isPatrol }, ]
{ key: '上报图片', name: 'scenePic', skip: !isPatrol }, const pic = [
{ key: '上报视频', name: 'videoUrl', skip: !isPatrol }, { key: '现场图片', name: 'scenePic' },
]
]; const video = [
const keyListOld = [ { key: '视频', name: 'videoUrl' },
// { key: '编号', name: 'id' },
// isPatrol ?'巡查管理详情' :isRoad ? '建设上报详情' : '异常反馈详情' ]
{ key: '工程类型', name: 'projectType', skip: !isPatrol },
{ key: '反馈类型', name: 'projectType', skip: !isAnomaly }, // const keyListOld = [
{ key: '工程名称', name: 'projectName', skip: !isRoad }, // // { key: '编号', name: 'id' },
{ key: '所在路段', name: 'road', skip: isRoad }, // // isPatrol ?'巡查管理详情' :isRoad ? '建设上报详情' : '异常反馈详情'
{ key: '具体位置', name: 'address' }, // { key: '工程类型', name: 'projectType', skip: !isPatrol },
{ key: '巡查内容', name: 'content' }, // { key: '反馈类型', name: 'projectType', skip: !isAnomaly },
{ key: '路线代码', name: 'codeRoad', skip: !isAnomaly && !isPatrol }, // { key: '工程名称', name: 'projectName', skip: !isRoad },
{ key: '现场照片', name: 'scenePic' }, // { key: '所在路段', name: 'road', skip: isRoad },
{ key: '处理意见', name: 'handleAdvice', skip: !isAnomaly }, // { key: '具体位置', name: 'address' },
{ key: '处理详情', name: 'handleContent', skip: !isAnomaly }, // { key: '建设内容', name: 'content' },
{ key: '处理图片', name: 'handlePic', skip: !isAnomaly }, // { key: '路线代码', name: 'codeRoad', skip: !isAnomaly && !isPatrol },
{ key: '处理人', name: 'performerName', skip: !isAnomaly } // { key: '现场照片', name: 'scenePic' },
]; // { key: '处理意见', name: 'handleAdvice', skip: !isAnomaly },
// { key: '处理详情', name: 'handleContent', skip: !isAnomaly },
// { key: '处理图片', name: 'handlePic', skip: !isAnomaly },
// { key: '处理人', name: 'performerName', skip: !isAnomaly }
// ];
const changeBoolean = (bool) => { const changeBoolean = (bool) => {
return bool ? '无异常' : '有异常' return bool ? '无异常' : '有异常'
} }
const renderContent = (data) => { const renderContent = (data) => {
if (data) { if (data) {
// Object.keys(data).map(key => { if (moment(data.time).isAfter(moment('2023-08-03 00:00:00'))) {
// }) return <div className='maintenanceNew'>
if ( {isPatrol ? <Descriptions title="基础信息" bordered style={{ marginBottom: 20 }}>
moment(data.time).isAfter(moment('2023-08-03 00:00:00')) {info.map(obj => {
// (new Date(data.time + '') > new Date('2023-8-3')) return (
) { obj.skip ? null : <Descriptions.Item label={obj.key} span={obj.name === 'roadSectionStart' ? 3 : 1}> {obj.name === 'projectType' ?
reportTypeText(data[obj.name]) : obj.name === 'reportType' ?
return keyList.map(obj => { data['codeRoad'] && data['codeRoad'].length ? data['codeRoad'][0] === 'X' ? '县道' : data['codeRoad'][0] === 'Y' ? '乡道' : '村道' : ''
return ( : obj.name === 'roadSectionStart' ? data[obj.name] + '-' + data['roadSectionEnd'] || '' : data[obj.name] || ''}</Descriptions.Item>
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> </Descriptions> : null}
{ {isAnomaly ? <Descriptions title="反馈信息" bordered style={{ marginBottom: 20 }} column={2}>
obj.name != 'handlePic' && obj.name != 'scenePic' && obj.name != 'roadSectionStart' && obj.name != 'videoUrl' && obj.name.indexOf('conserve') == -1 ? {info.map(obj => {
<Input return (
style={{ width: '70%' }} obj.skip ? null : <Descriptions.Item label={obj.key} span={obj.name === 'projectType' || obj.name === 'content' ? 2 : 1}> {
value={ obj.name === 'roadSectionStart' ? data[obj.name] + '-' + data['roadSectionEnd'] || '' :
obj.name == 'id' ? obj.name === 'projectType' ? reportTypeText(data[obj.name])
moment(data.time).format("YYYYMMDD") * 10000 + data.id : data[obj.name] || ''}</Descriptions.Item>
: )
obj.name === 'projectType' ? })}
</Descriptions> : null}
reportTypeText(data[obj.name]) {isRoad ? <Descriptions title="建设信息" bordered style={{ marginBottom: 20 }} column={1}>
// : obj.name === 'inspectionNoException' ? changeBoolean(data[]) {info.map(obj => {
: obj.name === 'reportType' ? data['codeRoad'] && data['codeRoad'].length ? data['codeRoad'][0] === 'X' ? '县道' return (
: data['codeRoad'][0] === 'Y' ? '乡道' : '村道' : '' : obj.skip ? null : <Descriptions.Item label={obj.key} > {
data[obj.name] data[obj.name] || ''}</Descriptions.Item>
} )
disabled })}
/> </Descriptions> : null}
: obj.name != 'roadSectionStart' && obj.name != 'videoUrl' ? {isPatrol ? <Descriptions title="巡查内容" bordered style={{ marginBottom: 20 }} >
<div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}> {
{ patrolContent.map(obj => {
data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(imgSrc => { return (
return <div style={{ width: '44%', margin: 6 }}> obj.skip ? null : <Descriptions.Item label={obj.key}>
<Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} /> {obj.name === 'inspectionNoException' ? <Checkbox checked={data['inspectionNoException']} disabled></Checkbox> : data[obj.name] || ''}
</div> </Descriptions.Item>
}) : '暂无图片' )
} })
</div> : obj.name != 'videoUrl' ? <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}> }
<Input style={{ width: '100%' }} disabled value={data[obj.name] + '-' + data['roadSectionEnd']} /> </Descriptions> : null
}
</div> : <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}> <Descriptions title={isPatrol ? '巡查图片' : '现场图片'} bordered style={{ marginBottom: 20 }}>
{ {
data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(videoUrl => { pic.map(obj => {
return <div style={{ width: '44%', margin: 6 }}> return (
<video controls width={'100%'} style={{ marginBottom: 4 }} > obj.skip ? null : <Descriptions.Item label={obj.key}>
<source src={qndmn + '/' + videoUrl} type="video/mp4" /> <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
</video> {data[obj.name] && data[obj.name] instanceof Array && data[obj.name].length ? data[obj.name]?.map(videoSrc => {
</div> return <div style={{ width: '50px', margin: 6 }}>
}) : '暂无视频' <Image src={qndmn + '/' + videoSrc} width={'100%'} style={{ marginBottom: 4 }} />
} </div>
</div> }) : '暂无图片'}
} </div>
</Descriptions.Item>
)
})
}
</Descriptions>
{/* <Descriptions title={isPatrol ? '巡查图片' : '现场图片'} bordered style={{ marginBottom: 20 }}>
{
pic.map(obj => {
return (
<Descriptions.Item label='是是是'>
<div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
{data[obj.name] && data[obj.name] instanceof Array && data[obj.name].length ?
<div style={{ width: '50px', margin: 6 }}>
<Image src='http://resources-test.anxinyun.cn/report/38f4ba4f-ba8b-4d05-9d60-b10adb72cc42/tmp_29704a54feb465ffe9645f8909e178e8.jpg' width={'100%'} style={{ marginBottom: 4 }} />
</div>
: '暂无图片'}
</div>
</Descriptions.Item>
)
})
}
</Descriptions> */}
<Descriptions title={isPatrol ? '巡查视频' : isAnomaly ? '反馈视频' : '施工视频'} bordered style={{ marginBottom: 20 }}>
{
video.map(obj => {
return (
obj.skip ? null : <Descriptions.Item >
<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 controls width={'100%'} style={{ marginBottom: 4 }} >
<source src={qndmn + '/' + videoUrl} type="video/mp4" />
</video>
</div>
}) : '暂无视频'}
</div>
</Descriptions.Item>
)
})
}
</Descriptions>
{isAnomaly ? <Descriptions title='处理意见' bordered style={{ marginBottom: 20 }}>
<Descriptions.Item label='处理意见' span={3}>
{data['handleAdvice'] || ''}
</Descriptions.Item>
</Descriptions> : ''}
{isAnomaly ? <Descriptions title='处理详情' bordered style={{ marginBottom: 20 }}>
<Descriptions.Item label='责任人' span={3}>
{data['performerName'] || ''}
</Descriptions.Item>
<Descriptions.Item label='处理内容' span={3}>
{data['handleContent'] || ''}
</Descriptions.Item>
</Descriptions> : ''}
{isAnomaly ? <Descriptions title='处理图片' bordered style={{ marginBottom: 20 }}>
<Descriptions.Item label='处理图片' span={3}>
<div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
{data['handlePic'] && data['handlePic'] instanceof Array && data['handlePic'].length ? data['handlePic']?.map(imgSrc => {
return <div style={{ width: '50px', margin: 6 }}>
<Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
</div>
}) : '暂无图片'}
</div> </div>
) </Descriptions.Item>
}) </Descriptions> : ''}
</div >
// 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 != 'handlePic' && obj.name != 'scenePic' && obj.name != 'roadSectionStart' && obj.name != 'videoUrl' && 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])
// // : obj.name === 'inspectionNoException' ? changeBoolean(data[])
// : obj.name === 'reportType' ? data['codeRoad'] && data['codeRoad'].length ? 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: '70%', 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 controls width={'100%'} style={{ marginBottom: 4 }} >
// <source src={qndmn + '/' + videoUrl} type="video/mp4" />
// </video>
// </div>
// }) : '暂无视频'
// }
// </div>
// }
// </div>
// )
// })
} else { } else {
return keyListOld.map(obj => { return <div className='maintenanceNew'>
return ( {isAnomaly ? <Descriptions title="反馈信息" bordered style={{ marginBottom: 20 }} column={3}>
obj.skip ? null : {[{ key: '反馈类型', name: 'projectType' },
<div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', margin: '12px 0' }}> { key: '所属路段', name: 'roadSectionStart' },
<span style={{ fontSize: 16, color: 'gray', minWidth: '26%' }}>{obj.key}</span> { key: '路线代码', name: 'codeRoad' },
{ { key: '具体位置', name: 'address' },
obj.name != 'scenePic' && obj.name != 'handlePic' ? { key: '反馈内容', name: 'content' }].map(obj => {
<Input return (
style={{ width: '70%' }} <Descriptions.Item label={obj.key} span={obj.name === 'address' || obj.name === 'content' ? 3 : 1}> {
value={ obj.name === 'roadSectionStart' ? data[obj.name] + '-' + data['roadSectionEnd'] || '' : obj.name === 'projectType' ? reportTypeText(data[obj.name]) : data[obj.name] || ''}</Descriptions.Item>
obj.name == 'id' ? )
moment(data.time).format("YYYYMMDD") * 10000 + data.id })}
: </Descriptions> : null}
obj.name == 'projectType' ? {isPatrol ? <Descriptions title="巡查信息" bordered style={{ marginBottom: 20 }} >
reportTypeText(data[obj.name]) : {[{ key: '道路类型', name: 'reportType' },
data[obj.name] || null { key: '巡查路段', name: 'roadSectionStart' },
} { key: '路线代码', name: 'codeRoad' },
disabled { key: '具体位置', name: 'address' },
/> { key: '巡查内容', name: 'content' }
: ].map(obj => {
return (
<Descriptions.Item label={obj.key} span={obj.name === 'address' || obj.name === 'content' ? 3 : 1}> {
obj.name === 'roadSectionStart' ? data[obj.name] + '-' + data['roadSectionEnd'] || '' :
obj.name === 'reportType' ? data['codeRoad'] && data['codeRoad'].length ? data['codeRoad'][0] === 'X' ? '县道'
: data['codeRoad'][0] === 'Y' ? '乡道' : '村道' : ''
: data[obj.name] || ''}</Descriptions.Item>
)
})
}
</Descriptions> : null}
{isRoad ? <Descriptions title="建设信息" bordered style={{ marginBottom: 20 }} column={1}>
{info.map(obj => {
return (
obj.skip ? null : <Descriptions.Item label={obj.key} > {
data[obj.name] || ''}</Descriptions.Item>
)
})}
</Descriptions> : null}
<Descriptions title={isPatrol ? '巡查图片' : '现场图片'} bordered style={{ marginBottom: 20 }}>
{
pic.map(obj => {
return (
obj.skip ? null : <Descriptions.Item label={obj.key}>
<div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}> <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
{ {data[obj.name] && data[obj.name] instanceof Array && data[obj.name].length ? data[obj.name]?.map(videoSrc => {
data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(imgSrc => { return <div style={{ width: '50px', margin: 6 }}>
return <div style={{ width: '44%', margin: 6 }}> <Image src={qndmn + '/' + videoSrc} width={'100%'} style={{ marginBottom: 4 }} />
<Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} /> </div>
</div> }) : '暂无图片'}
})
: '暂无图片'
}
</div> </div>
</Descriptions.Item>
)
})
}
</Descriptions>
<Descriptions title={isPatrol ? '巡查视频' : isAnomaly ? '反馈视频' : '施工视频'} bordered style={{ marginBottom: 20 }}>
{
video.map(obj => {
return (
obj.skip ? null : <Descriptions.Item >
<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 controls width={'100%'} style={{ marginBottom: 4 }} >
<source src={qndmn + '/' + videoUrl} type="video/mp4" />
</video>
</div>
}) : '暂无视频'}
</div>
</Descriptions.Item>
)
})
}
</Descriptions>
{isAnomaly ? <Descriptions title='处理意见' bordered style={{ marginBottom: 20 }}>
<Descriptions.Item label='处理意见' span={3}>
{data['handleAdvice'] || ''}
</Descriptions.Item>
</Descriptions> : ''}
{isAnomaly ? <Descriptions title='处理详情' bordered style={{ marginBottom: 20 }}>
<Descriptions.Item label='责任人' span={3}>
{data['performerName'] || ''}
</Descriptions.Item>
<Descriptions.Item label='处理内容' span={3}>
{data['handleContent'] || ''}
</Descriptions.Item>
</Descriptions> : ''}
{isAnomaly ? <Descriptions title='处理图片' bordered style={{ marginBottom: 20 }}>
<Descriptions.Item label='处理图片' span={3}>
<div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
{data['handlePic'] && data['handlePic'] instanceof Array && data['handlePic'].length ? data['handlePic']?.map(imgSrc => {
return <div style={{ width: '50px', margin: 6 }}>
<Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
</div>
}) : '暂无图片'}
</div> </div>
) </Descriptions.Item>
}) </Descriptions> : ''}
</div>
// return keyListOld.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 { } else {
@ -206,6 +457,7 @@ const DetailForm = (props) => {
return ( return (
<Modal <Modal
width={'60%'}
visible={visible} visible={visible}
footer={null} footer={null}
onCancel={handleClose} onCancel={handleClose}
@ -302,7 +554,7 @@ const DetailList = (props) => {
dataIndex: 'projectType', dataIndex: 'projectType',
align: 'center', align: 'center',
render: (text, record) => { render: (text, record) => {
return record.projectType?.length > 0 ? reportTypeText(text) : (record.codeRoad && record.codeRoad.length > 0) return record.projectType?.length > 0 ? reportTypeText(text) : (record.codeRoad && !isAnomaly && record.codeRoad.length > 0)
? record.codeRoad[0] === 'X' ? record.codeRoad[0] === 'X'
? '县道' ? '县道'
: record.codeRoad[0] === 'Y' : record.codeRoad[0] === 'Y'
@ -335,12 +587,18 @@ const DetailList = (props) => {
return `${record.roadSectionStart || ''}-${record.roadSectionEnd || ''}` return `${record.roadSectionStart || ''}-${record.roadSectionEnd || ''}`
} }
} : '', } : '',
{ isPatrol || isAnomaly ? {
title: '具体位置', title: '具体位置',
key: 'address', key: 'address',
dataIndex: 'address', dataIndex: 'address',
align: 'center' align: 'center'
}, } : '',
isRoad ? {
title: '建设内容',
key: 'content',
dataIndex: 'content',
align: 'center'
} : '',
{ {
title: '上报人', title: '上报人',
width: 100, width: 100,
@ -702,6 +960,7 @@ const PatrolNameList = (props) => {
const PatrolTable = (props) => { const PatrolTable = (props) => {
const { allDepUsers, clientHeight, user, userList, reportList, dispatch, reportListLoading, reportDetail, reportDetailLoading, userLoading, exports, pathname, anspectionNotificationPhoneList } = props; const { allDepUsers, clientHeight, user, userList, reportList, dispatch, reportListLoading, reportDetail, reportDetailLoading, userLoading, exports, pathname, anspectionNotificationPhoneList } = props;
const [record, setRecord] = useState(1); const [record, setRecord] = useState(1);
// const [recordCopy, setRecordCopy] = useState();
const [dateRange, setDateRange] = useState(); const [dateRange, setDateRange] = useState();
const [selectProjectType, setSelectProjectType] = useState(''); const [selectProjectType, setSelectProjectType] = useState('');
const [detailVisible, setDetailVisible] = useState(false) const [detailVisible, setDetailVisible] = useState(false)
@ -724,6 +983,7 @@ const PatrolTable = (props) => {
if (userList && userList instanceof Array && reportDetail && reportDetail instanceof Object) { if (userList && userList instanceof Array && reportDetail && reportDetail instanceof Object) {
setReportDetailCopy(Object.assign(reportDetail, { performerName: userList.find(item => item.id === reportDetail.performerId)?.name })) setReportDetailCopy(Object.assign(reportDetail, { performerName: userList.find(item => item.id === reportDetail.performerId)?.name }))
} }
}, [userList, reportDetail]) }, [userList, reportDetail])
useEffect(() => { useEffect(() => {
@ -761,7 +1021,6 @@ const PatrolTable = (props) => {
// setRecord(userList[0]); // setRecord(userList[0]);
} }
}, [activeTabKey1]) }, [activeTabKey1])
const handelRefresh = () => { const handelRefresh = () => {
let query = { userId: record.id, reportType: reportType, asc: true } let query = { userId: record.id, reportType: reportType, asc: true }
dispatch(getReportList(query)); dispatch(getReportList(query));

451
web/client/src/sections/fillion/containers/maintenanceSpotCheck.js
View File

@ -1,11 +1,11 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Button, Modal, Form, Input, Divider, Spin, Image, DatePicker } from 'antd' import { Button, Modal, Form, Input, Divider, Spin, Image, DatePicker, Descriptions, Table } from 'antd'
import ProTable from '@ant-design/pro-table'; import ProTable from '@ant-design/pro-table';
import { getReportSpotPrepare, getSpotCheck, getSpotCheckDetail } from '../actions/extract' import { getReportSpotPrepare, getSpotCheck, getSpotCheckDetail } from '../actions/extract'
import { getReportDetail } from '../actions/patrol'; import { getReportDetail } from '../actions/patrol';
import moment from 'moment' import moment from 'moment'
import '../components/maintenanceTable.less'
const DetailForm = (props) => { const DetailForm = (props) => {
@ -79,91 +79,205 @@ const DetailForm = (props) => {
{ key: '养护后', name: 'conserveAfterPic' }, { 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) => { const renderContent = (data) => {
if (data) { if (data) {
console.log('data1111', data)
if (moment(data.time).isAfter(moment('2023-08-03 00:00:00'))) { if (moment(data.time).isAfter(moment('2023-08-03 00:00:00'))) {
return keyList.map(obj => { return <div className='maintenanceNew'>
return <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', margin: '12px 0' }}> <Descriptions title="基础信息" bordered style={{ marginBottom: 20 }}>
<span style={{ fontSize: 16, color: 'gray', minWidth: '26%' }}>{obj.key}</span> <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>
obj.name != 'conserveBeforePic' && obj.name != 'conserveAfterPic' && obj.name != 'roadSectionStart' && obj.name != 'videoUrl' && obj.name.indexOf('conserve') == -1 ? <Descriptions.item label="路线代码">{data['codeRoad'] || ''}</Descriptions.item>
<Input <Descriptions.item label="路线名称">{data['code'] || ''}</Descriptions.item>
style={{ width: '60%' }} <Descriptions.item label="养护路段" span={2}>{data['roadSectionStart'] + '-' + data['roadSectionEnd'] || ''}</Descriptions.item>
value={ <Descriptions.Item label="具体位置" span={3} >{data['address'] || ''}</Descriptions.Item>
obj.name == 'id' ? </Descriptions>
moment(data.time).format("YYYYMMDD") * 10000 + data.id <Descriptions title="道路信息" bordered style={{ marginBottom: 20 }}>
: {roadInfo.map(item => (
obj.name == 'projectType' ? <Descriptions.Item label={item.key}>
reportTypeText(data[obj.name]) {data[item.name] || ''}
: obj.name == 'reportType' && data['codeRoad'] ? data['codeRoad'][0] === 'X' ? '县道' </Descriptions.Item>
: data['codeRoad'][0] === 'Y' ? '乡道' : '村道' : ))}
data[obj.name] </Descriptions>
} <Descriptions title="道路信息" bordered style={{ marginBottom: 20 }}>
disabled {mantenanceInfo.map(item => (
/> <Descriptions.Item label={item.key}>
: obj.name != 'roadSectionStart' && obj.name != 'videoUrl' ? {data[item.name] || ''}
<div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}> </Descriptions.Item>
{ ))}
data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(imgSrc => { </Descriptions>
return <div style={{ width: '44%', margin: 6 }}> <Descriptions title="养护图片" bordered style={{ marginBottom: 20 }} >
<Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} /> {mantenancePic.map(item => (
</div> <Descriptions.Item label={item.key} span={3} >
}) : '暂无图片' <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
} {data[item.name]?.map(imgSrc => {
</div> : obj.name != 'videoUrl' ? <div style={{ width: '60%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}> return <div style={{ width: '50px', margin: 6, display: 'flex' }}>
<Input style={{ width: '100%' }} disabled value={data[obj.name] + '-' + data['roadSectionEnd']} /> <Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
</div>
</div> : <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}> }) || '暂无图片'}
{ </div>
data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(videoUrl => { </Descriptions.Item>
return <div style={{ width: '44%', margin: 6 }}> ))}
<video width={'100%'} style={{ marginBottom: 4 }} > </Descriptions>
<source src={qndmn + '/' + videoUrl} type="video/mp4" controls /> <Descriptions title="养护视频" bordered style={{ marginBottom: 20 }} >
</video> <Descriptions.Item label={'养护视频'} span={3}>
</div> <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>
} }) || '暂无视频'}
</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> : <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 { } else {
return keyListOld.map(obj => { return <div className='maintenanceNew'>
return <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', margin: '12px 0' }}> <Descriptions title="养护信息" bordered style={{ marginBottom: 20 }} column={3}>
<span style={{ fontSize: 16, color: 'gray', minWidth: '26%' }}>{obj.key}</span> <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>
obj.name != 'scenePic' && obj.name.indexOf('conserve') == -1 ? <Descriptions.item label="路线代码">{data['codeRoad'] || ''}</Descriptions.item>
<Input {/* <Descriptions.item label="路线名称">{data['code'] || ''}</Descriptions.item> */}
style={{ width: '70%' }} <Descriptions.Item label="具体位置" span={3} >{data['address'] || ''}</Descriptions.Item>
value={ <Descriptions.Item label="养护内容" span={3} >{data['content'] || ''}</Descriptions.Item>
obj.name == 'id' ? </Descriptions>
moment(data.time).format("YYYYMMDD") * 10000 + data.id <Descriptions title="养护图片" bordered style={{ marginBottom: 20 }} >
: {mantenancePic.map(item => (
obj.name == 'projectType' ? <Descriptions.Item label={item.key} className="custom-item" span={3}>
reportTypeText(data[obj.name]) :
data[obj.name]
}
disabled
/>
:
<div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}> <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
{ {data[item.name]?.map(imgSrc => {
data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(imgSrc => { return <div style={{ width: '50px', margin: 6, display: 'flex' }}>
return <div style={{ width: '44%', margin: 6 }}> <Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
<Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} /> </div>
</div> }) || '暂无图片'}
}) : '暂无图片'
}
</div> </div>
</Descriptions.Item>
} ))}
</div> </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 { } else {
return '暂无数据' return '暂无数据'
} }
@ -261,6 +375,7 @@ const DetailForm = (props) => {
// } // }
return ( return (
<Modal <Modal
width={'60%'}
visible={visible} visible={visible}
footer={null} footer={null}
onCancel={handleClose} onCancel={handleClose}
@ -274,7 +389,7 @@ const DetailForm = (props) => {
} }
const MaintenanceSpotCheck = (props) => { const MaintenanceSpotCheck = (props) => {
const { dispatch, user, loading, reportDetail, reportDetailLoading } = props const { dispatch, user, loading, reportDetail, reportDetailLoading } = props
const [data, setData] = useState() const [data, setData] = useState()//外层表格的数据
const [vis, setVis] = useState(false)//模态框的显示与隐藏变量 const [vis, setVis] = useState(false)//模态框的显示与隐藏变量
const [count, setCount] = useState(0) const [count, setCount] = useState(0)
const [depId, setDepId] = useState(0) const [depId, setDepId] = useState(0)
@ -285,10 +400,11 @@ const MaintenanceSpotCheck = (props) => {
const [detailVisible, setDetailVisible] = useState(false) const [detailVisible, setDetailVisible] = useState(false)
const [dateRange, setDateRange] = useState(['1970-1-1', '2099-12-31']); const [dateRange, setDateRange] = useState(['1970-1-1', '2099-12-31']);
const { RangePicker } = DatePicker const { RangePicker } = DatePicker
const [expandedRowKeys, setExpandedRowKeys] = useState([]);
//console.log('reportData', reportData) //console.log('reportData', reportData)
const checkDetail = (record) => { const checkDetail = (record) => {
dispatch(getReportDetail(record.report?.id)) dispatch(getReportDetail(record?.id))
} }
const handleOpen = () => { const handleOpen = () => {
setDetailVisible(true) setDetailVisible(true)
@ -296,6 +412,8 @@ const MaintenanceSpotCheck = (props) => {
const handleClose = () => { const handleClose = () => {
setDetailVisible(false) setDetailVisible(false)
} }
//里层列名
const columns = [ const columns = [
{ {
title: '抽查日期', title: '抽查日期',
@ -305,80 +423,46 @@ const MaintenanceSpotCheck = (props) => {
// render: (_, record) => { // render: (_, record) => {
// return // 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: '所在路段', title: '抽查乡镇',
key: 'address', key: 'projectType',
dataIndex: 'address', dataIndex: 'depName',
align: 'center', align: 'center',
render: (_, record) => {
return `${record?.report?.roadSectionStart || ''}-${record?.report?.roadSectionEnd || ''}`
}
}, },
{ {
title: '具体位置', title: '抽查数量',
key: 'address', key: 'count',
dataIndex: 'address', dataIndex: 'count',
align: 'center', align: 'center',
render: (_, record) => {
return record?.report?.address
}
}, },
{ {
title: '上报人', title: '抽查总数',
width: 100, key: 'reportCount',
key: 'userName', dataIndex: 'reportCount',
dataIndex: 'userName',
align: 'center',
render: (text, record) => {
return record?.report?.user?.name || ''
}
}, {
title: '上报时间',
key: 'time',
dataIndex: 'time',
valueType: 'dateTime',
align: 'center', 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' }) => { const queryData = (query = { startTime: '1970-1-1', endTime: '2099-12-31' }) => {
dispatch(getSpotCheckDetail(query)).then(res => { dispatch(getSpotCheckDetail(query)).then(res => {
if (res.success) { if (res.success) {
const data = res.payload.data?.map(item => { const data = res?.payload.data?.map(item => {
return { report: item.report, spotDate: item.spotDate } 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) setReportData(data)
} }
}) })
@ -395,11 +479,12 @@ const MaintenanceSpotCheck = (props) => {
form.validateFields(['percentValue']).then(async (values) => { form.validateFields(['percentValue']).then(async (values) => {
if (Number(values.percentValue) > 0) { if (Number(values.percentValue) > 0) {
const res = await dispatch(getReportSpotPrepare({ percentage: Number(values.percentValue) })) const res = await dispatch(getReportSpotPrepare({ percentage: Number(values.percentValue) }))
setCount(res?.payload.data?.reportCount) // setCount(res?.payload.data?.reportCount)
setDepId(res?.payload.data?.lukyDepartment?.id) // setDepId(res?.payload.data?.lukyDepartment?.id)
setDepName(res?.payload.data?.lukyDepartment?.name) // setDepName(res?.payload.data?.lukyDepartment?.name)
setPreviewId(res?.payload.data?.previewId) setPreviewId(res?.payload.data?.previewId)
setTotal(((res?.payload.data?.reportCount) * Number(values.percentValue)) / 100) // setTotal(Math.ceil((res?.payload.data?.reportCount) * (Number(values.percentValue) / 100)))
form.setFieldsValue({ form.setFieldsValue({
'result': res?.payload.data?.reportCount, 'result': res?.payload.data?.reportCount,
'village': res?.payload.data?.lukyDepartment?.name, 'village': res?.payload.data?.lukyDepartment?.name,
@ -415,19 +500,31 @@ const MaintenanceSpotCheck = (props) => {
const okHandler = async () => { const okHandler = async () => {
if (previewId !== 0) { if (previewId !== 0) {
const res = await dispatch(getSpotCheck({ previewId })) const res = await dispatch(getSpotCheck({ previewId }))
const data = res.payload.data?.map(item => { const rslt = res.payload.data.map(item => {
return { report: item } return {
}) spotDate: moment(item.date).format('YYYY-MM-DD'),
setReportData(data) 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() form.resetFields()
setVis(false) setVis(false)
} }
} }
console.log('setReportData', reportData)
const lookhandler = () => { const lookhandler = () => {
if ((dateRange && dateRange instanceof Array && dateRange[0] != '')) { 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') }) 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 ( return (
<div> <div>
<Button onClick={addHanler} type='primary' style={{ marginRight: '50px' }}> 新增 </Button> <Button onClick={addHanler} type='primary' style={{ marginRight: '50px' }}> 新增 </Button>
@ -438,12 +535,70 @@ const MaintenanceSpotCheck = (props) => {
columns={columns} columns={columns}
dataSource={reportData} dataSource={reportData}
loading={loading} 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={{ pagination={{
pageSize: 10, pageSize: 10,
defaultPageSize: 10, defaultPageSize: 10,
showSizeChanger: false, showSizeChanger: false,
}} }}
rowKey="key" rowKey={(record) => { return record.id }}
toolBarRender={false} toolBarRender={false}
search={false} search={false}
/> />

Write Preview
Loading…
Cancel
Save