页面搭建
xielei
parent
9d694ae173
commit
6cf31ab253
|
|
@ -5,6 +5,7 @@ import KrLine from './KrLine'
|
|||
import MonthLl from './monthLl'
|
||||
import apiurl from '../../../../service/apiurl';
|
||||
import { httpget2, httppost2 } from '../../../../utils/request';
|
||||
import XlLine from './xlLine'
|
||||
import "./index.less"
|
||||
export default function ShuikuBasicInfo() {
|
||||
const [tabVal, setTabVal] = useState('1')
|
||||
|
|
@ -39,6 +40,10 @@ export default function ShuikuBasicInfo() {
|
|||
className={tabVal === '3' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
|
||||
onClick={() => setTabVal('3')}>水库库容曲线
|
||||
</div>
|
||||
<div
|
||||
className={tabVal === '4' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
|
||||
onClick={() => setTabVal('4')}>水库泄流曲线
|
||||
</div>
|
||||
<div
|
||||
className={tabVal === '5' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
|
||||
onClick={() => setTabVal('5')}>月生态流量
|
||||
|
|
@ -51,6 +56,7 @@ export default function ShuikuBasicInfo() {
|
|||
{tabVal === "1" ? <ProjectBasciInfo /> : null}
|
||||
{tabVal === "2" ? <TzParams /> : null}
|
||||
{tabVal === "3" ? <KrLine dataInfo={data}/> : null}
|
||||
{tabVal === "4" ? <XlLine /> : null}
|
||||
{tabVal === "5" ? <MonthLl dataInfo={data}/> : null}
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
import echarts from 'echarts/lib/echarts';
|
||||
import { GetInterval } from '../../../../../utils/tools'
|
||||
|
||||
export default function drpOption({data}) {
|
||||
const maxVal = Math.ceil(Math.max(...data.map(obj => obj.q)))
|
||||
const minVal = Math.floor(Math.min(...data.map(obj => obj.q)))
|
||||
const maxValX = Math.max(...data.map(obj => obj.z))
|
||||
const minValX = Math.min(...data.map(obj => obj.z))
|
||||
|
||||
|
||||
|
||||
let arr =[]
|
||||
data.forEach(item=>{
|
||||
console.log(data);
|
||||
arr.push([item.q,item.z])
|
||||
})
|
||||
// console.log(GetInterval(minValX,maxValX),'jhsdjkashdjkahjk');
|
||||
return {
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
show: true,
|
||||
excludeComponents: ['toolbox'],
|
||||
pixelRatio: 2,
|
||||
name:"泄流曲线图"
|
||||
}
|
||||
},
|
||||
right: "14%",
|
||||
top:"5%"
|
||||
},
|
||||
title: {
|
||||
text: "泄流曲线图",
|
||||
left: "40%",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
top: "10%",
|
||||
left: "15%",
|
||||
right: "15%",
|
||||
bottom: "8%"
|
||||
},
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
name: "流量(m³/s)",
|
||||
nameGap: 5,
|
||||
type: 'value',
|
||||
min:Math.floor(minValX / 5) *5,
|
||||
max:Math.ceil(maxValX / 5) *5,
|
||||
interval:GetInterval(minValX,maxValX),
|
||||
data: data.map(o => o.z),
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: "库水位(m)",
|
||||
minInterval:1,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: minVal,
|
||||
max: maxVal
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
color: "#007AFD",
|
||||
data: arr,
|
||||
smooth: true
|
||||
},
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
import React,{useEffect,useState,useRef} from 'react';
|
||||
import { Form, Button, Input, Row, Col} from 'antd';
|
||||
import { formItemLayout, btnItemLayout } from '../../../../../components/crud/FormLayoutProps';
|
||||
import apiurl from '../../../../../service/apiurl';
|
||||
const ModalForm = ({ mode, record,onEdit,onSave,onCrudSuccess }) => {
|
||||
const [form] = Form.useForm();
|
||||
const onFinish = async (values) => {
|
||||
values.resCode = "42120250085"
|
||||
values.id = record?.id
|
||||
if (mode === 'edit') {
|
||||
const params = {
|
||||
...record,
|
||||
q: Number(values?.q),
|
||||
z: Number(values?.z),
|
||||
}
|
||||
onEdit(apiurl.dataResourcesCenter.projectAndWater.xl.update,params)
|
||||
}
|
||||
if (mode === 'save') {
|
||||
onSave(apiurl.dataResourcesCenter.projectAndWater.xl.save,values)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
form={form}
|
||||
// {...formItemLayout}
|
||||
onFinish={onFinish}
|
||||
initialValues={record}
|
||||
// labelCol={{ span: 1 }}
|
||||
// wrapperCol={{ span: 15 }}
|
||||
>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="水位(m)"
|
||||
name="q"
|
||||
labelCol={{ span: 4, offset: 0 }}
|
||||
wrapperCol={{span:20,offset:0}}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input
|
||||
style={{ width: '100%' }}
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="流量(m³/s)"
|
||||
name="z"
|
||||
labelCol={{ span: 4, offset: 0 }}
|
||||
wrapperCol={{ span: 20, offset: 0 }}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input
|
||||
style={{ width: '100%' }}
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
{
|
||||
mode==='view'?null:(
|
||||
<>
|
||||
<Form.Item {...btnItemLayout}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
{mode === 'save' ? '提交' : '修改'}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalForm;
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
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() {
|
||||
const refModal = useRef();
|
||||
const columns = [
|
||||
{
|
||||
title: '序号', dataIndex: 'index', key: 'index', align: "center",
|
||||
render: (r, c,i) => <span>{i + 1}</span>
|
||||
},
|
||||
{ title: '水位(m)', dataIndex: 'q', key: 'rz',align:"center" },
|
||||
{ title: '流量(m³/s)', dataIndex: 'z', key: 'z',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.xl.list)
|
||||
setData(res.data.map((item,i) => ({...item,inx:i + 1})))
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
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.onDeletePost(apiurl.dataResourcesCenter.projectAndWater.xl.delete,params);
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
getData();
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1><Button type='primary' onClick={() => {refModal.current.showSave({})}}>新增</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>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue