页面搭建
xielei
parent
9d694ae173
commit
6cf31ab253
|
|
@ -5,6 +5,7 @@ import KrLine from './KrLine'
|
||||||
import MonthLl from './monthLl'
|
import MonthLl from './monthLl'
|
||||||
import apiurl from '../../../../service/apiurl';
|
import apiurl from '../../../../service/apiurl';
|
||||||
import { httpget2, httppost2 } from '../../../../utils/request';
|
import { httpget2, httppost2 } from '../../../../utils/request';
|
||||||
|
import XlLine from './xlLine'
|
||||||
import "./index.less"
|
import "./index.less"
|
||||||
export default function ShuikuBasicInfo() {
|
export default function ShuikuBasicInfo() {
|
||||||
const [tabVal, setTabVal] = useState('1')
|
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'}
|
className={tabVal === '3' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
|
||||||
onClick={() => setTabVal('3')}>水库库容曲线
|
onClick={() => setTabVal('3')}>水库库容曲线
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
className={tabVal === '4' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
|
||||||
|
onClick={() => setTabVal('4')}>水库泄流曲线
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
className={tabVal === '5' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
|
className={tabVal === '5' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
|
||||||
onClick={() => setTabVal('5')}>月生态流量
|
onClick={() => setTabVal('5')}>月生态流量
|
||||||
|
|
@ -51,6 +56,7 @@ export default function ShuikuBasicInfo() {
|
||||||
{tabVal === "1" ? <ProjectBasciInfo /> : null}
|
{tabVal === "1" ? <ProjectBasciInfo /> : null}
|
||||||
{tabVal === "2" ? <TzParams /> : null}
|
{tabVal === "2" ? <TzParams /> : null}
|
||||||
{tabVal === "3" ? <KrLine dataInfo={data}/> : null}
|
{tabVal === "3" ? <KrLine dataInfo={data}/> : null}
|
||||||
|
{tabVal === "4" ? <XlLine /> : null}
|
||||||
{tabVal === "5" ? <MonthLl dataInfo={data}/> : null}
|
{tabVal === "5" ? <MonthLl dataInfo={data}/> : null}
|
||||||
|
|
||||||
</div>
|
</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