import { connect } from 'react-redux'; import './protable.less' import { Card, Button, Popconfirm, Badge, Col, Row, DatePicker, Input, Modal, Spin, Image, message, Popover, Select, Tree, Form } from 'antd'; import ProTable from '@ant-design/pro-table'; import { DownOutlined, RightOutlined, CaretDownOutlined, CaretRightOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; import { getReportList, getReportDetail, handleReport, getAnspectionNotificationPhone, addAnspectionNotificationPhone } from '../actions/patrol'; import React, { useEffect, useState, useMemo } from 'react'; import { getAllDepUsers } from '../actions/allDepUsers' import { httpDel } from '@peace/utils' import { PinyinHelper } from '@peace/utils'; import PatrolGis from './gis/patrolGis'; import NominateModal from '../components/feedback/nominateModal' //指派的模块 // @ts-ignore import styles from './protable.less'; import moment from 'moment'; import NominateModalcopy from './feedback/nominateModalcopy';//指派的模块 export const reportTypeText = (text) => { switch (text) { case 'road': return '道路'; // case 'countyRoad': return '县道'; case 'villageRoad': return '乡道'; case 'rusticRoad': return '村道'; // case 'bridge': return '桥梁'; case 'culvert': return '涵洞'; case 'other': return '其他'; // case 'conserve': return '养护'; case 'patrol': return '巡查'; case 'construction': return '在建'; default: return text; } } const DetailForm = (props) => { const { visible, data, handleClose, loading, isAnomaly, isRoad, isPatrol } = props; //('record12s', isAnomaly) const [qndmn] = useState(localStorage.getItem('qndmn')); const keyList = [ // { key: '编号', name: 'id' }, // isPatrol ?'巡查管理详情' :isRoad ? '建设上报详情' : '异常反馈详情' { key: '工程类型', name: 'projectType', skip: isPatrol }, { key: '反馈类型', name: 'projectType', skip: !isAnomaly }, { key: '工程名称', name: 'projectName', skip: !isRoad }, { key: '所在路段', name: 'road', skip: isPatrol }, { key: '具体位置', name: 'address', skip: isPatrol }, { key: '巡查内容', name: 'content', skip: isPatrol }, { key: '路线代码', name: 'codeRoad', skip: !isAnomaly && isPatrol }, { key: '现场照片', name: 'scenePic', skip: isPatrol }, { 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: '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 keyListOld = [ // { key: '编号', name: 'id' }, // isPatrol ?'巡查管理详情' :isRoad ? '建设上报详情' : '异常反馈详情' { key: '工程类型', name: 'projectType', skip: !isPatrol }, { key: '反馈类型', name: 'projectType', skip: !isAnomaly }, { key: '工程名称', name: 'projectName', skip: !isRoad }, { key: '所在路段', name: 'road', skip: isRoad }, { key: '具体位置', name: 'address' }, { key: '巡查内容', name: 'content' }, { key: '路线代码', name: 'codeRoad', skip: !isAnomaly && !isPatrol }, { key: '现场照片', name: 'scenePic' }, { key: '处理详情', name: 'handleContent', skip: !isAnomaly }, { key: '处理图片', name: 'handlePic', skip: !isAnomaly }, { key: '处理人', name: 'performerName', skip: !isAnomaly } ]; const changeBoolean = (bool) => { return bool ? '无异常' : '有异常' } const renderContent = (data) => { if (data) { // Object.keys(data).map(key => { // }) if ( moment(data.time).isAfter(moment('2023-08-03 00:00:00')) // (new Date(data.time + '') > new Date('2023-8-3')) ) { return keyList.map(obj => { return ( obj.skip ? null :
{obj.key} { obj.name != 'scenePic' && obj.name != 'roadSectionStart' && obj.name != 'videoUrl' && obj.name.indexOf('conserve') == -1 ? : obj.name != 'roadSectionStart' && obj.name != 'videoUrl' ?
{ data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(imgSrc => { return
}) : '暂无图片' }
: obj.name != 'videoUrl' ?
:
{ data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(videoUrl => { return
}) : '暂无视频' }
}
) }) } else { return keyListOld.map(obj => { return ( obj.skip ? null :
{obj.key} { obj.name != 'scenePic' && obj.name != 'handlePic' ? :
{ data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(imgSrc => { return
}) : '暂无图片' }
}
) }) } } else { return '暂无数据' } } return ( {renderContent(data)} ) } const DetailList = (props) => { const { reportList, loading, dispatch, handleOpen, handelRefresh, isAnomaly, isRoad, isPatrol, queryData, user } = props; const [visible, setVisible] = useState(false) const [selectRecord, setSelectRecord] = useState(); const [noProcessingPopVisible, setNoProcessingPopVisible] = useState(false); const [noProcessingSelectRecord, setNoProcessingSelectRecord] = useState(); const [vis, setVis] = useState(false)//指派任务的弹窗显示与隐藏 const [recordId, setRecordId] = useState(0)//默认指派任务id const [btnVis, setBtnVis] = useState(true)//指派按钮和不处理按钮的是否禁用 const checkDetail = (record) => { dispatch(getReportDetail(record.id)) } //modal取消的事件 const onCancel = () => { setVis(false) } const handleRemove = (record) => { let url = 'report/{reportId}'; const actionType = "DEL_REPORT_RECORD"; const msg = {} if (record) { url = url.replace('{reportId}', record.id) httpDel(dispatch, { url, actionType, msg }).then(res => { if (res.success) { message.success("记录删除成功"); handelRefresh() } else { message.error("记录删除失败") } }) } } let basicDate = null; let counter = 0; //指派任务 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 columns = [ // isPatrol ? { // title: '编号1', // key: 'id', // dataIndex: 'id', // align: 'center', // render: (text, record) => { // let day = moment(record.time).format("YYYYMMDD") // if (!basicDate) { // basicDate = day; // counter += 1; // } else if (basicDate == day) { // counter += 1; // } else if (basicDate != day) { // basicDate = day; // counter = 1; // } // return moment(record.time).format("YYYYMMDD") * 10000 + counter; // } // } : '', isPatrol || isAnomaly ? { title: isPatrol ? '工程类型' : '反馈类型', key: 'projectType', dataIndex: 'projectType', align: 'center', render: (text, record) => { return record.projectType?.length > 0 ? reportTypeText(text) : (record.codeRoad && record.codeRoad.length > 0) ? record.codeRoad[0] === 'X' ? '县道' : record.codeRoad[0] === 'Y' ? '乡道' : '村道' : '' } } : '', isRoad ? { title: '工程名称', key: 'projectName', dataIndex: 'projectName', align: 'center', } : '', isPatrol || isAnomaly ? { title: '所属道路', key: 'road', dataIndex: 'road', align: 'center' } : '', isPatrol || isAnomaly ? { title: '所在路段', key: 'address', dataIndex: 'address', align: 'center', render: (text, record) => { return `${record.roadSectionStart || ''}-${record.roadSectionEnd || ''}` } } : '', { title: '具体位置', key: 'address', dataIndex: 'address', align: 'center' }, { title: '上报人', width: 100, key: 'userName', dataIndex: 'userName', align: 'center', render: (text, record) => { return record?.user?.name || '' } }, { title: '上报时间', key: 'time', dataIndex: 'time', valueType: 'dateTime', align: 'center' }, { title: '操作', width: 160, key: 'option', valueType: 'option', align: 'center', render: (text, record) => { //('record12s', record) return [ , isAnomaly && record.handleState != '不处理' && record.performerId === null && user?.username === 'SuperAdmin' ? : null, isAnomaly && record.handleState != '不处理' && record.performerId === null && user?.username === 'SuperAdmin' ? < Popover content={ [
]} visible={noProcessingSelectRecord == record.id && noProcessingPopVisible} trigger="click" onClick={() => user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'FEEDBACKMANAGE' || 'FEEDBACKMANAGE')[0].isshow === "true" ? '' : setNoProcessingSelectRecord(record.id)} title="是否不处理该记录？" onVisibleChange={(newVisible) => setNoProcessingPopVisible(newVisible)} > : null, ]} visible={selectRecord == record.id && visible} trigger="click" onClick={() => user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'FEEDBACKMANAGE' || 'FEEDBACKMANAGE')[0].isshow === "true" ? '' : setSelectRecord(record.id)} title="是否删除该记录？" onVisibleChange={(newVisible) => setVisible(newVisible)} > ] } }, ].filter(s => s); return (
{/* */}
) }; const PatrolNameList = (props) => { const { Search } = Input; const [users, setUsers] = useState([]); const { onChange, record, userList, loading, activeTabKey1, dispatch, user } = props; const [selectRoad, setSelectRoad] = useState(); const [defaultData, setDefaultData] = useState([]); const [expandedKeys, setExpandedKeys] = useState([]); const [searchValue, setSearchValue] = useState(''); const [depAllUser, setDepAllUser] = useState([]) const [dataList, setDataList] = useState([]); useEffect(() => { let departments = [] const generateData = (data, _preKey, _tns) => { const preKey = _preKey || '0'; const tns = _tns || []; const children = []; data.forEach(department => { const key = `${preKey}-${department.depId}`; const node = { title: department.depName.toString(), key, children: [], }; if (department.users.length > 0) { // 仅当部门有用户时添加子节点 department.users.forEach(user => { node.children.push({ title: user.name.toString(), key: `${key}-${user.id}`, isLeaf: true, // 用户节点为叶子节点 }); }); } if (department.children && department.children.length > 0) { const childKeys = generateData(department.children, key, node.children); children.push(...childKeys); } tns.push(node); if (node.children.length > 0 && department.expanded) { // 仅当部门展开时添加子节点 children.push(key); } }); return children; }; if (depAllUser && depAllUser.length) { if (user?.username === 'SuperAdmin') { departments = [...new Set(depAllUser)] } else { const targetDepartment = depAllUser.find(department => department.users.some(item => item.id === user?.id)); departments = [targetDepartment] } const processedData = []; const expandedKeys = generateData(departments, null, processedData); setDefaultData(processedData); setDataList(processedData.map(item => ({ key: item.key, title: item.title.toString(), children: item.children }))); setExpandedKeys(expandedKeys); } }, [depAllUser]) useEffect(() => { dispatch(getAllDepUsers()).then((res) => { if (res.success) setDepAllUser(res?.payload?.data) }) }, []) const getParentKey = (key, tree) => { let parentKey; for (let i = 0; i < tree.length; i++) { const node = tree[i]; if (node.children) { if (node.children.some((item) => item.key === key)) { parentKey = node.key; } else { parentKey = getParentKey(key, node.children); } } if (parentKey) { break; } } return parentKey; }; const handleSearch = (value) => { const filteredKeys = []; const expandedKeys = []; const loopTreeData = (data) => { data.forEach((item) => { if (item.title.indexOf(value) > -1) { filteredKeys.push(item.key); let parentKey = getParentKey(item.key, defaultData); while (parentKey) { if (!expandedKeys.includes(parentKey)) { expandedKeys.push(parentKey); } parentKey = getParentKey(parentKey, defaultData); } } if (item.children) { loopTreeData(item.children); } }); }; loopTreeData(defaultData); setSearchValue(value); setExpandedKeys(expandedKeys); }; const handleExpand = (expandedKeys) => { setExpandedKeys(expandedKeys); }; const renderTreeNodes = (data) => { return data.map((item) => { const { key, title, children } = item; const isLeaf = !children || children.length === 0; return ( : )} isLeaf={isLeaf} > {children && children.length > 0 && renderTreeNodes(children)} ); }); }; const treeData = useMemo(() => { const loop = (data) => data.map((item) => { const { title, key, children } = item; const strTitle = title.toString(); const index = strTitle.indexOf(searchValue); const beforeStr = strTitle.substring(0, index); const afterStr = strTitle.slice(index + searchValue.length); const titleNode = index > -1 ? ( {beforeStr} {searchValue} {afterStr} ) : ( {strTitle} ); if (children && children.length > 0) { return { title: titleNode, key, children: loop(children), }; } return { title: titleNode, key, }; }); return loop(defaultData); }, [searchValue, defaultData]); const handleSelect = (selectedKeys, { selected, selectedNodes, node }) => { if (selected) { if (selectedKeys[0].split("-").length - 1 >= 2) { let id = selectedKeys[0].split('-')[selectedKeys[0].split('-').length - 1] onChange(id); } } }; useEffect(() => { if (userList && userList instanceof Array && userList.length) { setSelectRoad(userList[0].id) // onChange(userList[0]); } if (activeTabKey1 == 'tab2') { setSelectRoad(null) } }, [userList, activeTabKey1]) useEffect(() => { if (userList) { setUsers(userList) } }, [userList]) if (loading) { return
Loading...
} return (
handleSearch(e.target.value)} /> {renderTreeNodes(treeData)}
{/* { return record.id == selectRoad ? 'list-row-actived' : ''; }} toolBarRender={() => [ ]} options={false} pagination={false} search={false} onRow={(record) => { return { onClick: () => { if (record) { let id = record.id if (selectRoad == record.id) { id = null } setSelectRoad(id); onChange(id ? record : null); } }, }; }} /> */}
); }; const PatrolTable = (props) => { const { allDepUsers, clientHeight, user, userList, reportList, dispatch, reportListLoading, reportDetail, reportDetailLoading, userLoading, exports, pathname, anspectionNotificationPhoneList } = props; const [record, setRecord] = useState(1); const [dateRange, setDateRange] = useState(); const [selectProjectType, setSelectProjectType] = useState(''); const [detailVisible, setDetailVisible] = useState(false) const [activeTabKey1, setActiveTabKey1] = useState('tab1'); const { RangePicker } = DatePicker; const [reportDetailCopy, setReportDetailCopy] = useState({})//匹配执行者的名字 const isRoad = pathname.includes('road') const isAnomaly = pathname.includes('anomaly') const isPatrol = !isRoad && !isAnomaly const reportType = isRoad ? 'road' : isAnomaly ? 'anomaly' : 'patrol'; const [isModalOpen, setIsModalOpen] = useState(false); const [phoneList, setPhoneList] = useState([]); const [form] = Form.useForm(); useEffect(() => { queryData(); dispatch(getAnspectionNotificationPhone()); }, []) useEffect(() => { if (userList && userList instanceof Array && reportDetail && reportDetail instanceof Object) { setReportDetailCopy(Object.assign(reportDetail, { performerName: userList.find(item => item.id === reportDetail.performerId)?.name })) } }, [userList, reportDetail]) useEffect(() => { queryData() }, [dateRange, selectProjectType, allDepUsers, user, record]) const queryData = () => { if (allDepUsers && allDepUsers.length && user) { const userL = allDepUsers.find(item => item.depId === user.departmentId)?.users?.map(child => { return child.id }) let userId = null if (user?.username === 'SuperAdmin' && record === 1) { userId = undefined } else if (user?.username !== 'SuperAdmin' && record === 1) { userId = userL && userL.length ? userL + '' : undefined } else { userId = record } let query = { userId, reportType: reportType, projectType: selectProjectType, asc: true } if ((dateRange && dateRange instanceof Array && dateRange[0] != '')) { query.startTime = moment(dateRange[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss') query.endTime = moment(dateRange[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss') } dispatch(getReportList(query)) } } useEffect(() => { if (activeTabKey1 && activeTabKey1 == 'tab2') { setRecord(null); } else if (activeTabKey1 && activeTabKey1 == 'tab1') { // setRecord(userList[0]); } }, [activeTabKey1]) const handelRefresh = () => { let query = { userId: record.id, reportType: reportType, asc: true } dispatch(getReportList(query)); } const handleClose = () => { setDetailVisible(false) } const handleOpen = () => { setDetailVisible(true) } const tabList = [ { key: 'tab1', tab: '巡查', }, { key: 'tab2', tab: '巡查轨迹查询', }, ]; const contentList = { tab1: [
], tab2: }; const onTab1Change = (key) => { setActiveTabKey1(key); }; // const handleChangeRecord = (newRecord) => { // let target = null; // if (!record || (newRecord && newRecord.id != record.id)) { // target = newRecord; // } // setRecord(target); // } const handleExport = () => { if (reportList && reportList instanceof Array && reportList.length) { let ids = reportList.map(item => item.id); exports(ids, reportType); } } useEffect(() => { let phoneList = [] if (anspectionNotificationPhoneList && anspectionNotificationPhoneList.length) { phoneList = anspectionNotificationPhoneList.map(e => { return e.phone }) } setPhoneList(phoneList) }, [anspectionNotificationPhoneList]) const showModal = () => { setIsModalOpen(true); }; const handleOk = () => { // setIsModalOpen(false); form.validateFields().then(values => { dispatch(addAnspectionNotificationPhone(values)).then(res => { if (res.success) { setIsModalOpen(false); } }) }).catch(err => { console.log(err); }) }; const handleCancel = () => { setIsModalOpen(false); }; const formItemLayout = { labelCol: { xs: { span: 24 }, sm: { span: 4 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 20 }, }, }; const formItemLayoutWithOutLabel = { wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 20, offset: 4 }, }, }; let routerUrl = window.location.href routerUrl = routerUrl.substring(routerUrl.length - 14) console.log(routerUrl, '========='); return (
setRecord(record)} record={record} activeTabKey1={activeTabKey1} userList={userList} loading={userLoading} /> { onTab1Change(key); }} > { activeTabKey1 == 'tab1' ?
{ setDateRange(dateString) }} /> { isAnomaly ? remove(field.name)} /> ))} )} {/* */}
); }; function mapStateToProps(state) { const { auth, depMessage, userList, reportList, reportDetail, global, allDepUsers, anspectionNotificationPhoneList } = state; const pakData = (dep) => { return dep.map((d) => { return { title: d.name, value: d.id, children: pakData(d.subordinate) } }) } let depData = pakData(depMessage.data || []) return { allDepUsers: allDepUsers.data || [], user: auth.user, depMessage: depMessage.data || [], depLoading: depMessage.isRequesting, depData, userList: userList.data || [], userLoading: userList.isRequesting, reportList: reportList.data, reportListLoading: reportList.isRequesting, reportDetail: reportDetail.data, reportDetailLoading: reportDetail.isRequesting, clientHeight: global.clientHeight, anspectionNotificationPhoneList: anspectionNotificationPhoneList.data || [] }; } export default connect(mapStateToProps)(PatrolTable);