feat(): 水资源调度开发

lsf-dev
李神峰 2024-10-09 17:03:44 +08:00
parent 1e4dd7cf66
commit 2dccbd2b45
22 changed files with 585 additions and 16 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -418,7 +418,20 @@ export async function loadMenu(): Promise<MenuItem[]> {
},
],
},
{
id: id(), title: '水资源调度', redirect: '/mgr/szydd/gsnlfx', icon: 'fxzb',
children: [
{
id: id(), title: '供水能力分析', path: '/mgr/szydd/gsnlfx',
},
{
id: id(), title: '供水统计分析', path: '/mgr/szydd/gstjfx',
},
{
id: id(), title: '典型年降雨资料', path: '/mgr/szydd/dxnjyzl',
},
]
},
// { id: id(), title: '基本情况', path: '/mgr/home', icon: 'jbqk' },

View File

@ -434,6 +434,7 @@ const apiurl = {
},
// 供水兴利
gsxl: {
gsWater:service_fxdd + "/gateValveReal/predict/water",
dxnjyzl: {
page: service_fxdd + '/tyYearRainfall/page',
edit: service_fxdd + '/tyYearRainfall/update',
@ -921,6 +922,7 @@ const apiurl = {
// 水库弹框详情
reservoirmonitor: service_fxdd + '/reservoir/water/monitor/data', //图像监测-列表
reservoirmonitor1: service_fxdd + '/reservoir/water/data/page', //图像监测-列表
// 水库基础信息
attResBase: service_fxdd + '/attResBase/attResBase', //基本信息

View File

@ -110,7 +110,7 @@ import Ajtj from './sz/szzf/ajtj'
import Clyj from './sz/szzf/clyj'
import Krgl from './KrLine'
import Gsnlfx from './gxsl/gsnlfx'
const HomePage = lazy(() => import('./Home'))
@ -222,8 +222,10 @@ const AppRouters: React.FC = () => {
// 供水兴利
{ path: 'gsxl/zfzl', element: <Zfzl /> },
{ path: 'gsxl/zfjk', element: <Zfjk /> },
{ path: 'gsxl/gstjfx', element: <Gstjfx /> },
{ path: 'gsxl/dxnjyzl', element: <Dxnjyzl /> },
{ path: 'szydd/gsnlfx', element: <Gsnlfx /> },
{ path: 'szydd/gstjfx', element: <Gstjfx /> },
{ path: 'szydd/dxnjyzl', element: <Dxnjyzl /> },
{ path: 'fxzb/jczw/yqz', element: <HomePage /> },
{ path: 'fxzb/jczw/sqz', element: <HomePage /> },

View File

@ -203,7 +203,7 @@ const ModalForm = ({ mode, record,onEdit,onSave,onCrudSuccess }) => {
{mode == "view" ? null :
<div style={{display:"flex",alignItems:"center",columnGap:10,color:"#4f85ec",cursor:"pointer"}}>
<PaperClipOutlined />
<a style={{ cursor: "pointer" }}>上传PDF文
<a style={{ cursor: "pointer" }}>上传
<span style={{ marginLeft:10,color:"#dfdfdf" }}>(支持扩展名.xls .xlsx .doc .docx .pdf .jpg .png)</span></a>
</div>
}

View File

@ -203,7 +203,7 @@ const ModalForm = ({ mode, record,onEdit,onSave,onCrudSuccess }) => {
{mode == "view" ? null :
<div style={{display:"flex",alignItems:"center",columnGap:10,color:"#4f85ec",cursor:"pointer"}}>
<PaperClipOutlined />
<a style={{ cursor: "pointer" }}>上传PDF文
<a style={{ cursor: "pointer" }}>上传
<span style={{ marginLeft:10,color:"#dfdfdf" }}>(支持扩展名.xls .xlsx .doc .docx .pdf .jpg .png)</span></a>
</div>
}

View File

@ -74,6 +74,7 @@ const Page = () => {
tm:c.tm
})))
return {
drp:s.drp,
tm: s.tm,
rz: s.rz,
inx:i+1

View File

@ -34,7 +34,7 @@ const Page = () => {
const columns4 = [
{
title: '降雨量(mm)', key: 'drp', dataIndex: 'drp', width: 120, align: "center",
render: (rec, record) => <span>{ rec ?? "-"}</span>
render: (rec, record) => <span>{ record?.drp ?? "-"}</span>
},
];
const getDmTree = async() => {
@ -76,6 +76,7 @@ const Page = () => {
tm:c.tm
})))
return {
drp:s.drp,
tm: s.tm,
rz: s.rz,
inx:i+1

View File

@ -11,9 +11,9 @@ import {CrudOpRender_text} from '../../../components/crud/CrudOpRender';
const Page = () => {
const role = useSelector(state => state.auth.role);
const editBtn = role?.rule?.find(item => item.menuName == "编辑");
const viewBtn = role?.rule?.find(item => item.menuName == "查看");
const delBtn = role?.rule?.find(item => item.menuName == "删除");
const editBtn = role?.rule?.find(item => item.menuName == "编辑") || true;
const viewBtn = role?.rule?.find(item => item.menuName == "查看") || true;
const delBtn = role?.rule?.find(item => item.menuName == "删除") || true;
const expandedRowRender = (record) => {
const columns = [
{

View File

@ -4,8 +4,8 @@ import NormalSelect from '../../../components/Form/NormalSelect';
import moment from 'moment';
const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
const addBtn = role?.rule?.find(item => item.menuName == "新增");
const searchBtn = role?.rule?.find(item => item.menuName == "查询");
const addBtn = role?.rule?.find(item => item.menuName == "新增") || true;
const searchBtn = role?.rule?.find(item => item.menuName == "查询") || true;
const [form] = Form.useForm();
const types = [
{

View File

@ -0,0 +1,100 @@
import React,{useEffect,useMemo,useState} from 'react'
import { Button, DatePicker, Table } from 'antd';
import { createCrudService } from '../../../components/crud/_';
import usePageTable from '../../../components/crud/usePageTable2';
import moment from 'moment';
import apiurl from '../../../service/apiurl';
import {reservoirmonitor} from '../../../service/sssq'
import ReactEcharts from 'echarts-for-react';
import drpOption from './drpOption';
const {RangePicker} = DatePicker;
export default function KrLine({ record }) {
const columns = [
{title: '时间', key: '', dataIndex: '', align: 'center',render:(rec)=>moment(rec.tm).format('MM-DD HH:mm')},
{
title: '水位(m)', key: 'rz', dataIndex: 'rz', align: 'center',
render: (rec) => <span>{rec ? rec.toFixed(2) : "-"}</span>},
{
title: '库容(万m³)', key: 'w', dataIndex: 'w', align: 'center',
render: (rec) => <span>{rec ??"-"}</span>,
},
];
const [data, setData] = useState([]);
const [params, setParams] = useState({})
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sssq.reservoirmonitor1).find_noCode);
const option = useMemo(() => {
return drpOption({data});
}, [data])
const searchTm = (e) => {
setParams({
...params,
stm: e[0].format("YYYY-MM-DD HH:mm:ss"),
etm: e[1].format("YYYY-MM-DD HH:mm:ss"),
tm:e,
})
};
const doSearch = () => {
search({ search: params })
getData(params)
}
const getData = async (params) => {
setData(await reservoirmonitor(params));
}
useEffect(() => {
const stm = moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm:ss");
const etm = moment().add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm:ss");
const tm = [
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
];
const params = {
search: {
stm,
etm
}
}
if (record?.stcd) {
search(params)
getData({stcd:record.stcd,...params.search})
setParams({tm,stcd:record.stcd})
}
}, [record])
return (
<div>
<div className="top-toobar" style={{marginBottom:20,width:"100%"}}>
<RangePicker showTime allowClear style={{width: "330px"}}
onChange={searchTm}
format="YYYY-MM-DD HH:mm"
value={params.tm}
/>
<Button type="primary" onClick={doSearch} style={{marginLeft: "10px"}}>查询</Button>
<Button onClick={()=>setParams('')} style={{marginLeft: "10px"}}>重置</Button>
</div>
<div style={{width:"100%"}}>
<Table
columns={columns}
rowKey="inx"
{...tableProps}
scroll={{ y: "calc( 100vh - 700px )" }}
style={{height:"calc( 100vh - 650px )"}}
/>
<div className="top-right" style={{height:"40vh",marginTop:40}}>
{
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>
</div>
)
}

View File

@ -0,0 +1,130 @@
import echarts from 'echarts/lib/echarts'
export default function drpOption ({
data,
}) {
const maxVal = Math.max(...data.map(obj => obj.drp))
// const minVal = Math.min(...data.map(obj => obj.drp))
const maxSw = Math.ceil(Math.max(...data.map(obj => obj.rz)))
const minSw = Math.floor(Math.min(...data.map(obj => obj.rz)))
const maxKr = Math.max(...data.map(obj => obj.w))
const minKr = Math.min(...data.map(obj => obj.w))
return {
tooltip: {
trigger: 'axis'
},
grid: {
top: '18%',
left: '5%',
right: '5%',
width: '90%',
height: '70%'
},
legend: {
// 显示图例
show: true,
left:60
},
xAxis: [
{
type: 'category',
data: data.map(o => o.tm),
inverse: true,
splitLine: {
show: false
},
axisLabel: {
color: '#333',
fontSize: 12,
formatter: val => val.substr('2020-'.length, 11)
},
axisLine: {
lineStyle: {
color: '#07a6ff',
width: 0.5
}
},
axisTick: {
show: false
}
}
],
yAxis: [
{
type: 'value',
position: 'left',
name: '水位(m)',
splitLine: {
show: true,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dotted'
}
},
axisLabel: {
color: '#333',
fontSize: 12
},
axisLine: {
show: false
},
axisTick: {
show: false
},
min: minSw,
max: maxSw
},
{
type: 'value',
position: 'right',
name: '库容(万m³)',
splitLine: {
show: false,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dotted'
}
},
axisLabel: {
color: '#333',
fontSize: 12
},
axisLine: {
show: false
},
axisTick: {
show: false
},
min: minKr - 0.1,
max: maxKr + 0.1
}
],
series: [
{
yAxisIndex:0,
name: '水位',
type: 'line',
symbol: 'none',
color: '#0AE0B5',
label: {
show: false
},
data: data.map(o => o.rz ? o.rz.toFixed(2):null )
},
{
yAxisIndex:1,
name: '库容',
type: 'line',
color: '#007AFD',
symbol: 'none',
showSymbol: false,
label: {
show: false
},
data: data.map(o => o.w)
}
]
}
}

View File

@ -0,0 +1,236 @@
import React, { useEffect, useState,useMemo } from 'react'
import { Button ,Modal,Form,Row,Col} from "antd"
import { reservoirlist, } from "../../../service/sssq";
import apiurl from '../../../service/apiurl';
import MyImg from '../../Home/MapCtrl/components/Skssjc/myImg'
import { httppost2, httpget2, httppost5 } from '../../../utils/request';
import NormalSelect from '../../../components/Form/NormalSelect';
import moment from 'moment';
import KrLine from './KrLine';
import "./index.less"
export default function Gsnlfx() {
const month = moment().month() + 1;
const optionsType = Array(12 - month + 1).fill(0).map((item,i) => ({label: (i + month) + "月",value: i + month}))
const typeObj = {
1: "枯 ",
2: "偏枯 ",
3: "平",
4: "偏丰",
5:"丰"
}
const [form] = Form.useForm()
const [tableData, setTableData] = useState([])
const [ssgData, setSsGData] = useState({}) //输水管数据
const [gsDays, setGsDays] = useState()
const [lslOpen, setLslOpen] = useState(false)
const [simailarData, setSimailarData] = useState([])
const [lslData, setlslData] = useState(null)
const getData = async (params) => {
setTableData(await reservoirlist(params));
}
// 相似年下拉
const getSimilarData = async() => {
try {
const res = await httppost2(apiurl.gsxl.zfzl.similar)
setSimailarData(res.data.map(item => ({
label: item.year + "年" + `(${typeObj[item.status]},${item.drp}mm)`,
value:item.year
})))
} catch (error) {
console.log(error);
}
}
// 输水管流量数据
const getInputData = async() => {
try {
const res = await httppost2(apiurl.gsxl.zfzl.input)
const ssg = res.data.find(item => item.sttp == "PQ");
const fsg = res.data.find(item => item.sttp == "QQ");
setSsGData({ssg,fsg})
} catch (error) {
console.log(error);
}
}
// 获取可供水时间
const getWaterTimeData = async(params={}) => {
try {
const res = await httpget2(apiurl.gsxl.zfzl.kyTime,params)
let r = {
type: "可供水天数",
value: Object.keys(res.data)[0],
tm: Object.values(res.data)[0]
}
setGsDays(r)
} catch (error) {
console.log(error);
}
}
const providerWater = useMemo(() => {
if (tableData[0]?.nowCap && tableData[0]?.deadCap) {
let num = ((tableData[0]?.nowCap - tableData[0]?.deadCap) / 10000).toFixed(2)
return num
} else {
return "--"
}
}, [tableData])
const generate = () => {
setLslOpen(true)
}
const computerResult = async() => {
const values = form.getFieldsValue();
try {
const res = await httpget2(apiurl.gsxl.gsWater, values)
if (res.code == 200) {
setLslOpen(false);
setlslData((res.data / 10000).toFixed(2))
getWaterTimeData(values)
}
} catch (error) {
console.log(error);
}
}
useEffect(() => {
let option = {
sources: ["SW", "SK"],
args: "",
};
getData(option)
getInputData()
getWaterTimeData()
getSimilarData()
}, [])
return (
<div div className='content-root clearFloat xybm' style={{ paddingRight: "0", paddingBottom: "0" }}>
<div className="gsnl-content">
<div className='content-left'>
<div className='gb-top-title'>
<span className='gb-top-icon'></span>
<span style={{fontSize:18}}>供水能力分析</span>
</div>
<div className='content-card'>
<div className='card-item'>
<div className='card-title'>
<img alt='' src={`${process.env.PUBLIC_URL}/assets/images/ksw.jpg`} />
<span>当前库水位m</span>
</div>
<div className='card-value'>
<span className='nl-value'>{tableData[0]?.rz ?? "-"}</span>
<span className='nl-time'>{tableData[0]?.drpTm ?? "--"}</span>
</div>
</div>
<div className='card-item'>
<div className='card-title'>
<img alt='' src={`${process.env.PUBLIC_URL}/assets/images/gsl.jpg`} />
<span>可供水量万m³</span>
</div>
<div className='card-value'>
<span className='nl-value'>{providerWater}</span>
<span className='nl-time'>{tableData[0]?.drpTm ?? "--"}</span>
</div>
</div>
<div className='card-item'>
<div className='card-title'>
<img alt='' src={`${process.env.PUBLIC_URL}/assets/images/ggll.jpg`} />
<span>灌溉流量/s</span>
</div>
<div className='card-value'>
<span className='nl-value'>{ssgData?.ssg?.v ?? "--"}</span>
<span className='nl-time'>{ssgData?.ssg?.tm ?? "--"}</span>
</div>
</div>
<div className='card-item'>
<div className='card-title'>
<img alt='' src={`${process.env.PUBLIC_URL}/assets/images/scll.jpg`} />
<span>水厂流量/s</span>
</div>
<div className='card-value'>
<span className='nl-value'>{ssgData?.fsg?.v ?? "--"}</span>
<span className='nl-time'>{ssgData?.fsg?.tm ?? "--"}</span>
</div>
</div>
<div className='card-item'>
<div className='card-title'>
<img alt='' src={`${process.env.PUBLIC_URL}/assets/images/yclsl.jpg`} />
<span>预测来水量万m³</span>
</div>
<div className='yc-content'>
<span className='yc-input'>{lslData ?? "预测生成"}</span>
<Button
type='primary'
style={{ width: "30%", marginBottom: 10, marginLeft: "40%" }}
onClick={generate}
>预测生成</Button>
</div>
</div>
<div className='card-item'>
<div className='card-title'>
<img alt='' src={`${process.env.PUBLIC_URL}/assets/images/gsts.jpg`} />
<span>计算可供水天数</span>
</div>
<div className='card-value'>
<span className='nl-value'>{gsDays?.value ?? "--"}</span>
<span className='nl-time'>{gsDays?.tm ?? "--"}</span>
</div>
<div className='yc-content'>
<Button type='primary' style={{width:"30%",marginBottom:10,marginLeft:"40%"}}>计算</Button>
</div>
</div>
<MyImg record={tableData[0] || {}}/>
</div>
</div>
<div className='content-right'>
<div className='gb-top-title'>
<span className='gb-top-icon'></span>
<span style={{fontSize:18}}>库容过程线</span>
</div>
<KrLine record={tableData[0] || {}}/>
</div>
</div>
<Modal
title="预测来水量"
open={lslOpen}
onCancel={() => setLslOpen(false)}
width={500}
okText="计算"
destroyOnClose
onOk={computerResult}
>
<Form form={form}>
<Row>
<Col span={24}>
<Form.Item
label="选择相似年"
name="year"
rules={[{ required: true }]}
wrapperCol={{span:19}}
labelCol={{span:6}}
>
<NormalSelect options={simailarData} allowClear/>
</Form.Item >
</Col>
</Row>
<Row>
<Col span={24}>
<Form.Item
label="预测截止月份"
name="month"
rules={[{ required: true }]}
wrapperCol={{span:19}}
labelCol={{span:6}}
>
<NormalSelect options={optionsType} allowClear/>
</Form.Item>
</Col>
</Row>
</Form>
</Modal>
</div>
)
}

View File

@ -0,0 +1,83 @@
.gb-top-title{
display: flex;
align-items: center;
column-gap: 10px;
margin-bottom: 10px;
.gb-top-icon{
width: 5px;
height: 20px;
background-color: #0079fe;
}
}
.gsnl-content{
display: flex;
column-gap: 10px;
padding-right:10px;
.content-left{
width: 700px;
padding: 10px;
border: 1px solid #dfdfdf;
border-radius: 5px;
overflow-y: auto;
height: calc( 100vh - 100px);
.content-card{
display: flex;
flex-wrap: wrap;
column-gap: 20px;
padding-top: 10px;
.card-item{
width: 325px;
border: 1px solid #dfdfdf;
border-radius: 5px;
margin-bottom: 20px;
padding: 10px;
padding-bottom: 0;
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4);
.card-title{
display: flex;
align-items: center;
column-gap: 10px;
font-size: 18px;
margin-bottom: 10px;
}
.card-value{
display: flex;
align-items: baseline;
flex-wrap: nowrap;
.nl-value{
font-size: 36px;
font-weight: 700;
color:#02a7f0;
}
.nl-time{
font-size: 14px;
font-weight: bold;
}
}
img{
width: 40px;
}
}
.yc-content{
display: flex;
flex-direction: column;
.yc-input{
display: inline-block;
width: 80%;
height: 40px;
padding: 10px;
border-radius: 5px;
background-color: #f0f6ff;
margin-bottom: 15px;
}
}
}
}
.content-right{
flex: 1;
border: 1px solid #dfdfdf;
padding: 10px;
border-radius: 5px;
}
}

View File

@ -86,8 +86,8 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
const surveyType = [
{label:"日常检查排查",value:1},
{label:"定期普查",value:1},
{label:"专项调查",value:1},
{label:"定期普查",value:2},
{label:"专项调查",value:3},
]
const surveyWay = [
{label:"人工排查法",value:1},

View File

@ -148,6 +148,7 @@ const Page = () => {
<div className='CalendarBox' style={{margin:20}}>
<Calendar
mode="month"
onChange={onChange}
headerRender={({ value, onChange }) => <HeaderRender value={value} onChange={onChange} tm={tm} callback={getData} role={role} />}//doUpload={this.canOp ? this.doUpload : null}
dateCellRender={dateCellRender}

View File

@ -114,7 +114,7 @@ const ToolBar = ({ value, onChange, tm, callback,role }) => {
<Button
type="primary"
className='but4'
onClick={() => onChange(moment().subtract(1, 'months'))}
onClick={() => onChange(tm.clone().subtract(1, 'month'))}
icon={<LeftOutlined />}
>上一月</Button>
</Form.Item>
@ -152,7 +152,7 @@ const ToolBar = ({ value, onChange, tm, callback,role }) => {
<Button
type="primary"
className='but4'
onClick={() => onChange(moment().startOf('month'))}
onClick={() => onChange(tm.clone().add(1, 'month'))}
icon={<RightOutlined />}
>下一月</Button>
</Form.Item>