Compare commits
No commits in common. "1e4dd7cf66652a2b049e00854f058b87ff27bbfa" and "247e4378bf9bcc9339543a3bac5197f20059c66a" have entirely different histories.
1e4dd7cf66
...
247e4378bf
|
|
@ -2,8 +2,8 @@ import { Image } from "antd"
|
||||||
import zd from '../../../assets/img/u0.png'
|
import zd from '../../../assets/img/u0.png'
|
||||||
const Page = () => {
|
const Page = () => {
|
||||||
return (
|
return (
|
||||||
<div style={{display:'flex',justifyContent:'center',alignItems:'center',backgroundColor:'#fff',height:'100%',padding:'20px'}}>
|
<div style={{display:'flex',justifyContent:'center',alignItems:'center',backgroundColor:'#fff',height:'100%'}}>
|
||||||
<Image src={zd} style={{margin:'auto',margin:'20px',height:'750px'}} preview={false}/>
|
<Image src={zd} style={{margin:'auto'}} preview={false}/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@ 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')
|
||||||
|
|
@ -40,10 +39,6 @@ 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')}>月生态流量
|
||||||
|
|
@ -56,7 +51,6 @@ 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>
|
||||||
|
|
|
||||||
|
|
@ -1,97 +0,0 @@
|
||||||
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
|
|
||||||
},
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,82 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
@ -1,88 +0,0 @@
|
||||||
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