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.
359 lines
13 KiB
359 lines
13 KiB
import React, { useState, useRef, useEffect } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Button, Tabs, Popconfirm, Tooltip,Spin } from 'antd';
|
|
import ProTable from '@ant-design/pro-table';
|
|
import { getPatrolReport } from '../actions/report';
|
|
import { getProjectList } from '../actions/plan';
|
|
import moment from 'moment';
|
|
import AddReportRulesModal from '../components/addReportRulesModal';
|
|
function patrolReport(props) {
|
|
const { dispatch, actions } = props;
|
|
const { projectRegime, patrolManage } = actions
|
|
const tableRef = useRef();
|
|
const tableRef2 = useRef();
|
|
const [selectOpts, setSelectOpts] = useState([]);
|
|
const [date, setDate] = useState([moment().subtract(1, 'days'), moment()]);
|
|
const [dataSource, setDataSource] = useState([]);
|
|
const [modalVis, setModalVis] = useState(false)
|
|
const [structAll,setStructAll]=useState([])//完整的结构物列表（包括subType）
|
|
const [reportList, setReportList] = useState([])//报表
|
|
const qnDomain = localStorage.getItem('qnDomain');
|
|
const [query, setQuery] = useState({ limit: 10, page: 0 })
|
|
const [typeList, setTypeList] = useState([{ value: 1, label: '周报表' }, { value: 2, label: '月报表' }])
|
|
const [modalData, setModalData] = useState(null)
|
|
const [loading,setLoading]=useState(false)
|
|
//报表配置
|
|
// const getReportConfig = (query) => {
|
|
// const { limit, page, name } = query
|
|
// dispatch(patrolManage.getReportList({ limit, page, name })).then(res => {
|
|
// if (res.success) {
|
|
// //过滤管廊类型的数据
|
|
// const list = res.payload.data?.rows
|
|
// setReportList(list)
|
|
// }
|
|
// })
|
|
// }
|
|
//结构物
|
|
const projectList = () => {
|
|
dispatch(projectRegime.getProjectList()).then(res => {
|
|
if (res.success) {
|
|
|
|
const nextSelectOpts = res.payload?.data?.rows.map(d => {
|
|
return { label: d.name, value: d.id }
|
|
})
|
|
setStructAll(res.payload?.data?.rows)
|
|
setSelectOpts(nextSelectOpts)
|
|
// setStructlist(list)
|
|
}
|
|
})
|
|
}
|
|
useEffect(() => {
|
|
// dispatch(getProjectList()).then(res => {
|
|
// if (res.success) {
|
|
|
|
// }
|
|
// });
|
|
projectList()
|
|
// getReportConfig(query)
|
|
}, [])
|
|
const edithandler = (e) => {
|
|
setModalData(e)
|
|
setModalVis(true)
|
|
}
|
|
const onOk = () => {
|
|
tableRef2.current.reload();
|
|
}
|
|
const confirmHandler = (id) => {
|
|
dispatch(patrolManage.delReport(id)).then(res => {
|
|
if (res.success) {
|
|
// getReportConfig(query)
|
|
tableRef2.current.reload();
|
|
|
|
}
|
|
})
|
|
}
|
|
const generateReport=(record)=>{
|
|
setLoading(true)
|
|
let data={
|
|
reportName:record?.name,
|
|
startTime:moment(record?.startTime).format('YYYY-MM-DD HH:mm:ss'),
|
|
endTime:moment(record?.endTime).format('YYYY-MM-DD HH:mm:ss'),
|
|
structIds:record?.structure,
|
|
structNames:structAll?.filter(item=>record?.structure.some(q=>q==item.id))?.map(o=>o.name)||[],
|
|
reportType:record?.type,
|
|
system:record?.system,
|
|
images:record?.reportpic.map(item=>qnDomain+'/'+item)||[]
|
|
}
|
|
dispatch(patrolManage.postGenerateReport(data)).then(res => {
|
|
if(res.success){
|
|
setLoading(false)
|
|
tableRef.current.reload();
|
|
|
|
}
|
|
})
|
|
}
|
|
const columns = [{
|
|
title: '结构物名称',
|
|
dataIndex: 'projectName',
|
|
key: 'projectName',
|
|
valueType: 'select',
|
|
fieldProps: {
|
|
showSearch: true,
|
|
defaultValue: '',
|
|
options: [{ label: '全部', value: '' }, ...selectOpts],
|
|
},
|
|
ellipsis: true,
|
|
width: 150,
|
|
render: (_, record) =>
|
|
{
|
|
const rslt=structAll?.filter(p => record.structure?.some(q => q == p.id))
|
|
return <>
|
|
<div>{record?.project?record?.project?.name: record.structure?.length > 1 ? <Tooltip title={rslt?.map(item => item.name)?.join(',')}>
|
|
<span>{rslt&&rslt.length?rslt[0].name+'...':''}</span>
|
|
</Tooltip> : rslt?.map(item => item.name)?.join(',')
|
|
}</div>
|
|
|
|
</>
|
|
|
|
|
|
}
|
|
}, {
|
|
title: '巡检报告名称',
|
|
dataIndex: 'groupName',
|
|
key: 'groupName',
|
|
ellipsis: true,
|
|
search: false,
|
|
width: 250,
|
|
render: (_, record) => {
|
|
const fileName = record?.excelPath?.substring(record?.excelPath?.lastIndexOf('/') + 1);
|
|
return <div>{fileName}</div>
|
|
}
|
|
}, {
|
|
title: '巡检日期',
|
|
dataIndex: 'date',
|
|
key: 'date',
|
|
valueType: 'dateRange',
|
|
fieldProps: {
|
|
value: date,
|
|
onChange: e => { setDate(e) }
|
|
},
|
|
ellipsis: true,
|
|
width: 150,
|
|
render: (_, record) => {
|
|
return <div>{moment(record?.inspectTm).format('YYYY-MM-DD')}</div>
|
|
}
|
|
}, {
|
|
title: '操作',
|
|
dataIndex: 'action',
|
|
key: 'action',
|
|
search: false,
|
|
width: 200,
|
|
render: (_, record) => {
|
|
return <>
|
|
<Button type="link" onClick={() => {
|
|
window.open(`https://view.officeapps.live.com/op/view.aspx?src=${qnDomain}/${record?.excelPath}`)
|
|
}}>预览</Button>
|
|
<Button type="link" onClick={() => { window.open(qnDomain + '/' + record?.excelPath) }}>下载</Button>
|
|
</>
|
|
},
|
|
}];
|
|
const column2 = [
|
|
{
|
|
title: '报表名称',
|
|
dataIndex: 'name',
|
|
key: 'name',
|
|
ellipsis: true,
|
|
width: 250,
|
|
fieldProps: {
|
|
showSearch: true,
|
|
defaultValue: '',
|
|
},
|
|
},
|
|
{
|
|
title: '报表类型',
|
|
dataIndex: 'type',
|
|
key: 'type',
|
|
ellipsis: true,
|
|
search: false,
|
|
width: 250,
|
|
render: (_, record) => {
|
|
return <>
|
|
{typeList.find(item => record.type == item.value)?.label}
|
|
</>
|
|
}
|
|
|
|
},
|
|
{
|
|
title: '关联结构物',
|
|
dataIndex: 'structure',
|
|
key: 'structure',
|
|
ellipsis: true,
|
|
search: false,
|
|
width: 250,
|
|
render: (_, record) => {
|
|
const rslt=structAll?.filter(p => record.structure?.some(q => q == p.id))
|
|
return <>
|
|
{record.structure.length > 1 ? <Tooltip title={rslt?.map(item => item.name)?.join(',')}>
|
|
<span>{rslt&&rslt.length?rslt[0].name+'...':''}</span>
|
|
</Tooltip> : rslt?.map(item => item.name)?.join(',')}
|
|
</>
|
|
}
|
|
},
|
|
{
|
|
title: '生成时间范围',
|
|
key: 'timeRange',
|
|
// ellipsis: true,
|
|
search: false,
|
|
width: 250,
|
|
render: (_, record) => {
|
|
return <>
|
|
{moment(record.startTime).format('YYYY-MM-DD')} ~ {moment(record.endTime).format('YYYY-MM-DD')}
|
|
</>
|
|
}
|
|
},
|
|
{
|
|
title: '系统',
|
|
key: 'system',
|
|
// ellipsis: true,
|
|
search: false,
|
|
width: 250,
|
|
render: (_, record) => {
|
|
return <>
|
|
{record.system?record.system===1?'动力系统':record.system===2?'网络系统':'--':'--'}
|
|
</>
|
|
}
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'option',
|
|
// ellipsis: true,
|
|
search: false,
|
|
width: 250,
|
|
render: (_, record) => {
|
|
return <>
|
|
<Button type="primary" style={{ marginRight: 10 }} onClick={() => { edithandler(record) }}>编辑</Button>
|
|
<Popconfirm title="确定删除报表吗"
|
|
description="确定删除报表吗?"
|
|
onConfirm={() => { confirmHandler(record?.id) }}
|
|
><Button type="primary" style={{ marginRight: 10 }} danger>删除</Button></Popconfirm>
|
|
<Button type="primary" onClick={()=>{generateReport(record)}}>立即生成</Button>
|
|
</>
|
|
}
|
|
}
|
|
]
|
|
|
|
const onChange = (key) => {
|
|
|
|
};
|
|
const cancelHandle = () => {
|
|
setModalVis(false)
|
|
setModalData(null)
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
<Tabs
|
|
defaultActiveKey="1"
|
|
onChange={onChange}
|
|
items={[
|
|
{
|
|
label: `报表列表`,
|
|
key: '1',
|
|
children: <ProTable
|
|
columns={columns}
|
|
actionRef={tableRef}
|
|
options={false}
|
|
dataSource={dataSource || []}
|
|
rowKey='id'
|
|
pagination={{ pageSize: 10, size: 'default', className: 'global-pagination' }}
|
|
request={async (params = {}) => {
|
|
const res = await dispatch(getPatrolReport({
|
|
limit: params?.pageSize,
|
|
page: params?.current - 1,
|
|
projectId: params?.projectName,
|
|
startTime: date ? date[0].format('YYYY-MM-DD') + ' 00:00:00' : '',
|
|
endTime: date ? date[1].format('YYYY-MM-DD') + ' 23:59:59' : '',
|
|
}));
|
|
setDataSource(res?.payload.data?.rows);
|
|
return {
|
|
...res,
|
|
total: res.payload.data.count ? res.payload.data.count : 0,
|
|
};
|
|
}}
|
|
onReset={() => { setDate([moment().subtract(1, 'days'), moment()]) }}
|
|
rowClassName={(record, index) => {
|
|
let className = 'global-light-row';
|
|
if (index % 2 === 1) className = 'global-dark-row';
|
|
return className;
|
|
}}
|
|
/>,
|
|
},
|
|
{
|
|
label: `报表配置`,
|
|
key: '2',
|
|
children: <>
|
|
<Spin spinning={loading}>
|
|
<ProTable
|
|
|
|
actionRef={tableRef2}
|
|
options={false}
|
|
columns={column2}
|
|
dataSource={reportList || []}
|
|
pagination={{ pageSize: 10, size: 'default', className: 'global-pagination' }}
|
|
request={async (query) => {
|
|
const { limit, page, name } = query
|
|
const res = await dispatch(patrolManage.getReportList({ limit, page, name }))
|
|
const list = res?.payload?.data?.rows
|
|
setReportList(list)
|
|
return {
|
|
...res,
|
|
total: res.payload.data.count ? res.payload.data.count : 0,
|
|
};
|
|
}}
|
|
// cardProps={{ title: '新建报表规则', bordered: true }}
|
|
headerTitle={
|
|
<Button
|
|
key="primary"
|
|
type="primary"
|
|
onClick={() => {
|
|
setModalVis(true)
|
|
}}
|
|
>
|
|
新建报表规则
|
|
</Button>
|
|
|
|
}
|
|
rowKey="key"
|
|
search={true}
|
|
/>
|
|
</Spin>
|
|
<AddReportRulesModal structAll={structAll} typeList={typeList} modalData={modalData} onOk={onOk} visible={modalVis} cancelHandle={cancelHandle}>
|
|
|
|
</AddReportRulesModal>
|
|
</>
|
|
,
|
|
},
|
|
|
|
]}
|
|
/>
|
|
|
|
</>
|
|
)
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
const { auth, structureList, global } = state
|
|
return {
|
|
user: auth.user,
|
|
struList: structureList.data || [],
|
|
struLoading: structureList.isRequesting,
|
|
actions: global.actions,
|
|
}
|
|
}
|
|
export default connect(mapStateToProps)(patrolReport);
|
|
|