243 lines
7.8 KiB
JavaScript
243 lines
7.8 KiB
JavaScript
import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
|
||
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
|
||
import { Table, Card, Modal, Form, Input, Button, Row,Col, Timeline, message, Tabs,Image,Tag } from 'antd';
|
||
import {FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
|
||
import { useSelector } from 'react-redux';
|
||
import ToolBar from './toolbar';
|
||
import ModalForm from './form';
|
||
import apiurl from '../../../../service/apiurl';
|
||
import usePageTable from '../../../../components/crud/usePageTable2';
|
||
import { createCrudService } from '../../../../components/crud/_';
|
||
import { httppost2 } from '../../../../utils/request';
|
||
import {CrudOpRender_text} from '../../../../components/crud/CrudOpRender';
|
||
import './index.less';
|
||
import moment from 'moment';
|
||
const url = "http://223.75.53.141:9100/gs-tsg"
|
||
const Page = () => {
|
||
const role = useSelector(state => state.auth.role);
|
||
const editBtn = role?.rule?.find(item => item.menuName == "编辑") || true;
|
||
const viewBtn = role?.rule?.find(item => item.menuName == "查看")|| true;
|
||
const delBtn = role?.rule?.find(item => item.menuName == "删除") || true;
|
||
const initData = {
|
||
obDate: moment().format('YYYY-MM-DD')
|
||
}
|
||
|
||
const [stats, setStats] = useState({
|
||
total: 400,
|
||
withMosquito: 14,
|
||
withoutMosquito: 382,
|
||
noData: 4
|
||
});
|
||
const surveyType = {
|
||
1: "日常检查排查",
|
||
2: "定期普查",
|
||
3:"专项调查"
|
||
}
|
||
const surveyWay = {
|
||
1: "人工排查法",
|
||
2: "引诱法",
|
||
3: "仪器探测法",
|
||
4:"其他"
|
||
}
|
||
const isHarm = {
|
||
0: "无危害",
|
||
1: "有危害",
|
||
}
|
||
const refModal = useRef();
|
||
const [searchVal, setSearchVal] = useState({...initData})
|
||
const [count, setCount] = useState({})
|
||
// const columns = [
|
||
// { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
|
||
// {title: '填报日期', key: 'reportDate', dataIndex: 'reportDate', width: 140,},
|
||
// {
|
||
// title: '普查类型', key: 'surveyType', dataIndex: 'surveyType', width: 200,
|
||
// render: (value) => <span>{value ? surveyType[value] : ''}</span>
|
||
// },
|
||
// {
|
||
// title: '普查方式', key: 'surveyWay', dataIndex: 'surveyWay', width: 200,
|
||
// render: (value) => <span>{value ? surveyWay[value] : ''}</span>
|
||
|
||
// },
|
||
// {
|
||
// title: '危害情况', key: 'isHarm', dataIndex: 'isHarm', width: 200,
|
||
// render: (value, row) =>(
|
||
// <span style={row.harmNum > 0 ? { color: "red" } : {}}>{isHarm[row.harmNum > 0 ? 1 : 0]}</span>)
|
||
// },
|
||
// {title: '白蚁危害处数', key: 'harmNum', dataIndex: 'harmNum', width: 100},
|
||
// {title: '已处置处数', key: 'handleNum', dataIndex: 'handleNum', width: 100},
|
||
// {title: '上报人', key: 'reportUserName', dataIndex: 'reportUserName', width: 100},
|
||
// {
|
||
// title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
|
||
// render: (value, row, index) => (
|
||
// <CrudOpRender_text
|
||
// edit={editBtn ? true : false}
|
||
// del={delBtn ? true : false}
|
||
// view={viewBtn ? true : false}
|
||
// command={(cmd) => () => command(cmd)(row)} />)
|
||
// },
|
||
// ];
|
||
|
||
const columns = [
|
||
{
|
||
title: '监测时间',
|
||
dataIndex: 'obDate',
|
||
key: 'obDate',
|
||
width: 180,
|
||
align:'center'
|
||
},
|
||
{
|
||
title: '测点编号',
|
||
dataIndex: 'order',
|
||
key: 'order',
|
||
width: 120,
|
||
align:'center'
|
||
},
|
||
{
|
||
title: '有无白蚁',
|
||
dataIndex: 'status',
|
||
align:'center',
|
||
key: 'status',
|
||
width: 100,
|
||
render:(text, record) => {
|
||
// 如果 isHarm 为 null 或 undefined，显示无
|
||
if (text == null) {
|
||
return <Tag color="#04d919" style={{borderRadius: '50%', padding: '4px 8px'}}>无</Tag>;
|
||
}
|
||
|
||
// 如果 isHandle 为 null 或 undefined，当作 false 处理
|
||
const isHandle = record.isHandle ?? false;
|
||
|
||
return (
|
||
<Tag
|
||
color={!text ?'#04d919' : '#d9001b'}
|
||
style={{borderRadius: '50%', padding: '4px 8px'}}
|
||
>
|
||
{!text ? '无' : '有'}
|
||
</Tag>
|
||
);
|
||
}
|
||
}
|
||
];
|
||
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
||
|
||
const command = (type) => (params) => {
|
||
if (type === 'save') {
|
||
refModal.current.showSave();
|
||
} else if (type === 'edit') {
|
||
refModal.current.showEdit({ ...params });
|
||
} else if (type === 'view') {
|
||
refModal.current.showView(params);
|
||
} else if (type === 'del') {
|
||
refModal.current.onDeleteGet(apiurl.rcgl.byfz.bypc.delete + `/${params.id}`);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.rcgl.byfz.bypc.page).find_noCode);
|
||
|
||
/**
|
||
* @description 处理成功的回调
|
||
*/
|
||
const successCallback = () => {
|
||
refresh()
|
||
}
|
||
|
||
// 获取白蚁统计数量
|
||
const getCount = async () => {
|
||
const params = {
|
||
pageSo: {
|
||
pageNumber: 1,
|
||
pageSize: 99999,
|
||
},
|
||
...searchVal
|
||
}
|
||
try {
|
||
const res = await httppost2(apiurl.rcgl.byfz.bypc.count, params);
|
||
setCount(res.data);
|
||
} catch (error) {
|
||
console.log(error);
|
||
|
||
}
|
||
}
|
||
useEffect(() => {
|
||
const params = {
|
||
search: {
|
||
...searchVal,
|
||
}
|
||
};
|
||
search(params)
|
||
getCount();
|
||
}, [searchVal])
|
||
|
||
|
||
return (
|
||
<>
|
||
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
|
||
<div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
|
||
<Row gutter={16} className='statsRow'>
|
||
<Col span={6}>
|
||
<div className='statItem'>
|
||
<div className='valueWrapper'>
|
||
<span className='number' style={{ color: '#722ed1' }}>{count.totalPoint}</span>
|
||
<span className="unit">个</span>
|
||
</div>
|
||
<span className='label'>总监测点数</span>
|
||
</div>
|
||
</Col>
|
||
<Col span={6}>
|
||
<div className='statItem'>
|
||
<div className='valueWrapper'>
|
||
<span className='number' style={{ color: '#f5222d' }}>{count.hasAnt}</span>
|
||
<span className="unit">个</span>
|
||
</div>
|
||
<span className='label'>有白蚁</span>
|
||
</div>
|
||
</Col>
|
||
<Col span={6}>
|
||
<div className='statItem'>
|
||
<div className='valueWrapper'>
|
||
<span className='number' style={{ color: '#52c41a' }}>{count.notAnt}</span>
|
||
<span className="unit">个</span>
|
||
</div>
|
||
<span className='label'>无白蚁</span>
|
||
</div>
|
||
</Col>
|
||
<Col span={6}>
|
||
<div className='statItem'>
|
||
<div className='valueWrapper'>
|
||
<span className='number' style={{ color: '#8c8c8c' }}>{count.noData}</span>
|
||
<span className="unit">个</span>
|
||
</div>
|
||
<span className='label'>离线</span>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
<Card className='nonebox'>
|
||
<ToolBar
|
||
setSearchVal={setSearchVal}
|
||
initData={initData}
|
||
// onSave={command('save')}
|
||
// role={role}
|
||
/>
|
||
</Card>
|
||
<div className="ant-card-body" style={{ padding: "20px 0 0 0" ,marginRight:20}}>
|
||
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
|
||
</div>
|
||
</div>
|
||
|
||
<BasicCrudModal
|
||
width={1000}
|
||
ref={refModal}
|
||
title=""
|
||
component={ModalForm}
|
||
onCrudSuccess={successCallback}
|
||
// onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
|
||
/>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default Page;
|