diff --git a/src/views/sq/qys/gcys/index.js b/src/views/sq/qys/gcys/index.js index 6c8e30a0b..90059ee6e 100644 --- a/src/views/sq/qys/gcys/index.js +++ b/src/views/sq/qys/gcys/index.js @@ -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')}>水库库容曲线 +
setTabVal('4')}>水库泄流曲线 +
setTabVal('5')}>月生态流量 @@ -51,6 +56,7 @@ export default function ShuikuBasicInfo() { {tabVal === "1" ? : null} {tabVal === "2" ? : null} {tabVal === "3" ? : null} + {tabVal === "4" ? : null} {tabVal === "5" ? : null}
diff --git a/src/views/sq/qys/gcys/xlLine/drpOption.js b/src/views/sq/qys/gcys/xlLine/drpOption.js new file mode 100644 index 000000000..61022aee1 --- /dev/null +++ b/src/views/sq/qys/gcys/xlLine/drpOption.js @@ -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 + }, + ] + }; +} diff --git a/src/views/sq/qys/gcys/xlLine/form.js b/src/views/sq/qys/gcys/xlLine/form.js new file mode 100644 index 000000000..6f8bfd502 --- /dev/null +++ b/src/views/sq/qys/gcys/xlLine/form.js @@ -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 ( + <> +
+ + + + + + + + + + + + + + + + { + mode==='view'?null:( + <> + + + + + ) + } +
+ + ); +} + +export default ModalForm; diff --git a/src/views/sq/qys/gcys/xlLine/index.js b/src/views/sq/qys/gcys/xlLine/index.js new file mode 100644 index 000000000..44db4461a --- /dev/null +++ b/src/views/sq/qys/gcys/xlLine/index.js @@ -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) => {i + 1} + }, + { 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) => ( () => 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 ( +
+

+
+
+ + +
+ { + data.length > 0 ? + :
+ +
+ } +
+ + + + + ) +}