92 lines
3.1 KiB
JavaScript
92 lines
3.1 KiB
JavaScript
import React,{useEffect,useState,useRef,useMemo} from 'react'
|
|
import { Table, Button } from 'antd'
|
|
import ModalForm from './form';
|
|
import ReactEcharts from 'echarts-for-react';
|
|
import drpOption from './drpOption'
|
|
import apiurl from '../../../../../service/apiurl';
|
|
import { httppost2 } from '../../../../../utils/request';
|
|
import { CrudOpRender_text } from '../../../../../components/crud/CrudOpRender';
|
|
import BasicCrudModal from '../../../../../components/crud/BasicCrudModal2';
|
|
export default function Zrtx({dataInfo}) {
|
|
const refModal = useRef();
|
|
const columns = [
|
|
{
|
|
title: '序号', dataIndex: 'index', key: 'index', align: "center",
|
|
render: (r, c,i) => <span>{i + 1}</span>
|
|
},
|
|
{ title: '水位(m)', dataIndex: 'rz', key: 'rz',align:"center" },
|
|
{ title: '库容(万m³)', dataIndex: 'w', key: 'w',align:"center" },
|
|
{
|
|
title: '操作', dataIndex: 'op', key: 'op', align: "center",width:200,
|
|
render: (value, row, index) => (<CrudOpRender_text del={true} edit={true} command={(cmd) => () => command(cmd)(row)} />)
|
|
},
|
|
];
|
|
const [data, setData] = useState([])
|
|
const option = useMemo(() => {
|
|
return drpOption({data});
|
|
}, [data])
|
|
const getData = async () => {
|
|
try {
|
|
const res = await httppost2(apiurl.dataResourcesCenter.projectAndWater.kr.list)
|
|
setData(res.data.map((item,i) => ({...item,inx:i + 1})))
|
|
} catch (error) {
|
|
console.log(error);
|
|
|
|
}
|
|
}
|
|
|
|
const command = (type) => (params) => {
|
|
debugger;
|
|
if (type === 'save') {
|
|
refModal.current.showSave(dataInfo);
|
|
} else if (type === 'edit') {
|
|
refModal.current.showEdit(params)
|
|
} else if (type === 'view') {
|
|
refModal.current.showView(params);
|
|
} else if (type === 'del') {
|
|
refModal.current.onDeletePost(apiurl.dataResourcesCenter.projectAndWater.kr.delete,params);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
getData();
|
|
|
|
}, [])
|
|
|
|
return (
|
|
<div>
|
|
<h1><Button type='primary' onClick={() => {refModal.current.showSave(dataInfo)}}>新增</Button></h1>
|
|
<div style={{display:"flex",columnGap:10,width:"100%"}}>
|
|
<div style={{width:500}}>
|
|
<Table
|
|
rowKey="inx"
|
|
columns={columns}
|
|
dataSource={data}
|
|
pagination={false}
|
|
scroll={{ y:"calc( 100vh - 300px )"}}
|
|
/>
|
|
</div>
|
|
<div className='right-echarts' style={{ flex: 1 }}>
|
|
{
|
|
data.length > 0 ?
|
|
<ReactEcharts
|
|
option={option}
|
|
style={{width: "100%", height: '100%'}}
|
|
/> : <div style={{textAlign: "center", margin: "10%"}}>
|
|
<img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<BasicCrudModal
|
|
width={550}
|
|
ref={refModal}
|
|
title=""
|
|
component={ModalForm}
|
|
onCrudSuccess={getData}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|