feat(): 水库蒸发资料开发

qzc-dev
李神峰 2025-10-14 17:57:33 +08:00
parent 656cc06a37
commit 8bd134d694
12 changed files with 473 additions and 205 deletions

View File

@ -424,11 +424,11 @@ export async function loadMenu(): Promise<MenuItem[]> {
{
id: id(), title: '数据统计查询', redirect: '/mgr/gcaqjc/sjtjcx/czcx',
children: [
{ id: id(), title: '人工监测数据录入 ', path: '/mgr/gcaqjc/sjtjcx/sjlr' },
{ id: id(), title: '测值查询', path: '/mgr/gcaqjc/sjtjcx/czcx' },
{ id: id(), title: '渗压监测', path: '/mgr/gcaqjc/sjtjcx/syjx' },
{ id: id(), title: '渗流监测 ', path: '/mgr/gcaqjc/sjtjcx/sljx' },
{ id: id(), title: '位移监测 ', path: '/mgr/gcaqjc/sjtjcx/wyjx' },
// { id: id(), title: '人工监测数据录入 ', path: '/mgr/gcaqjc/sjtjcx/sjlr' },
{ id: id(), title: '年度渗压统计表', path: '/mgr/gcaqjc/sjtjcx/ndsytjb' },
{ id: id(), title: '年度渗流统计表', path: '/mgr/gcaqjc/sjtjcx/ndsltjb' },
{ id: id(), title: '年度位移统计表', path: '/mgr/gcaqjc/sjtjcx/ndwytjb' },
@ -451,6 +451,9 @@ export async function loadMenu(): Promise<MenuItem[]> {
{
id: id(), title: '典型年降雨资料', path: '/mgr/szydd/dxnjyzl',
},
{
id: id(), title: '水库蒸发资料', path: '/mgr/szydd/skzfzl',
},
]
},

View File

@ -290,6 +290,12 @@ const apiurl = {
edit: service_fxdd + "/osmoticPressR/update",
page: service_fxdd + "/osmoticPressR/page",
del: service_fxdd + "/osmoticPressR/del/",
},
rgjc:{
save: service_fxdd + "/osmoticPressR/artificial/insert",
edit: service_fxdd + "/osmoticPressR/artificial/update",
page: service_fxdd + "/osmoticPressR/artificial/page",
del: service_fxdd + "/osmoticPressR/artificial/del/",
},
wyjc:{
save: service_fxdd + "/osmoticShiftR/insert",
@ -510,7 +516,12 @@ const apiurl = {
},
// 供水兴利
gsxl: {
gsWater:service_fxdd + "/gateValveReal/predict/water",
gsWater: service_fxdd + "/gateValveReal/predict/water",
skzf: {
list: service_fxdd + '/evpo/list',
edit: service_fxdd + '/evpo/update',
export:service_fxdd + '/evpo/export'
},
dxnjyzl: {
page: service_fxdd + '/tyYearRainfall/page',
edit: service_fxdd + '/tyYearRainfall/update',

View File

@ -77,6 +77,7 @@ import Dxnjyzl from "./gxsl/dxnjyzl"
import Zfzl from "./gxsl/zfzl"
import Zfjk from './gxsl/zfjk'
import Gstjfx from "./gxsl/gstjfx"
import Skzfzl from "./gxsl/skzfzl"
// 视频监控
import Spjk from "./video"
import AiWarn from "./spjk/aiWarn"
@ -238,6 +239,7 @@ const AppRouters: React.FC = () => {
{ path: 'szydd/gsnlfx', element: <Gsnlfx /> },
{ path: 'szydd/gstjfx', element: <Gstjfx /> },
{ path: 'szydd/dxnjyzl', element: <Dxnjyzl /> },
{ path: 'szydd/skzfzl', element: <Skzfzl /> },
{ path: 'fxzb/jczw/yqz', element: <HomePage /> },
{ path: 'fxzb/jczw/sqz', element: <HomePage /> },

View File

@ -1,26 +1,26 @@
import React,{useEffect,useState,useMemo} from 'react';
import { Form, Button, Input, Row, Col, DatePicker, Upload,message,Image,Modal,Radio, InputNumber } from 'antd';
import React, { useEffect, useState, useMemo } from 'react';
import { Form, Button, Input, Row, Col, DatePicker, Upload, message, Image, Modal, Radio, InputNumber } from 'antd';
import { formItemLayout, btnItemLayout } from '../../../../../components/crud/FormLayoutProps';
import apiurl from '../../../../../service/apiurl';
import NormalSelect from '../../../../../components/Form/NormalSelect';
import { httppost2,httpget2 } from '../../../../../utils/request';
import { httppost2, httpget2 } from '../../../../../utils/request';
import moment from 'moment';
const ModalForm = ({ mode, record,onEdit,onSave,onSimilarSave }) => {
console.log("record",record);
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
console.log("record", record);
const [form] = Form.useForm();
const [dmList, setDmList] = useState([])
const [codeList, setCodeList] = useState([])
const [dmCd,setDmCd] = useState([])
const [dmCd, setDmCd] = useState([])
const [dmCode, setDmCode] = useState('')
const onFinish = (values) => {
if (mode === 'edit') {
onEdit(apiurl.gcaqjc.sjtjcx.sjlr.syjc.edit,{...record,...values})
onEdit(apiurl.gcaqjc.sjtjcx.sjlr.rgjc.edit, { ...record, ...values })
}
if (mode === 'save') {
onSave(apiurl.gcaqjc.sjtjcx.sjlr.syjc.save,values)
onSave(apiurl.gcaqjc.sjtjcx.sjlr.rgjc.save, values)
}
}
@ -28,37 +28,65 @@ const ModalForm = ({ mode, record,onEdit,onSave,onSimilarSave }) => {
const getDmList = async () => {
try {
const res = await httppost2(apiurl.gcaqjc.sjtjcx.sycx.list)
setDmList(res.data.map(s=>({label:s.profileName,value:s.profileCode})));
} catch (error) {
console.log(error);
}
}
setDmCd(res.data)
const sortedData = res.data.sort((a, b) => {
// 判断a、b是否为ZB0开头
const isAZB0 = a.profileCode.startsWith('ZB0');
const isBZB0 = b.profileCode.startsWith('ZB0');
const getStationCode = async () => {
try {
const res = await httppost2(apiurl.gcaqjc.gcaqyj.yjgzpz.list)
setCodeList(res.data);
// 规则ZB0开头的排前面同类型都ZB0/都非ZB0保持原顺序
if (isAZB0 && !isBZB0) return -1; // a是ZB0b不是 → a在前
if (!isAZB0 && isBZB0) return 1; // a不是ZB0b是 → b在前
return 0; // 同类型,保持原始相对顺序
});
setDmList(sortedData.map(s => ({ label: s.profileName, value: s.profileCode })));
} catch (error) {
console.log(error);
}
}
const getCdCode = async () => {
try {
const res = await httpget2(apiurl.gcaqjc.sjtjcx.sycx.list1)
setDmCd(res.data.map(s=>({label:s,value:s})));
} catch (error) {
console.log(error);
}
const getStationCode = async () => {
try {
const res = await httpget2(apiurl.gcaqjc.sjtjcx.sycx.list1)
const list = []
res?.data?.map((item) => {
const { dvcd, dm } = item
if (dvcd?.length > 0) {
dvcd?.map((item2) => {
list.push({
label: item2,
value: item2,
profileCode: dm,
})
})
}
})
setCodeList(list);
} catch (error) {
console.log(error);
}
useEffect(()=>{
}
const onValuesChange = (v) => {
if ("dvcd" in v) {
// const updToDmMap = {}; // 键UPD编码对应的dm
// dmCd.forEach(item => {
// const currentDm = item.dm; // 当前dm
// item.dvcd.forEach(upd => {
// updToDmMap[upd] = currentDm; // 为每个UPD绑定dm
// });
// });
// form.setFieldValue("dm",updToDmMap[v?.dvcd])
}
}
useEffect(() => {
getDmList()
getStationCode()
getCdCode()
}, [])
return (
<>
<Form
@ -66,95 +94,84 @@ const ModalForm = ({ mode, record,onEdit,onSave,onSimilarSave }) => {
{...formItemLayout}
onFinish={onFinish}
initialValues={record}
onValuesChange={onValuesChange}
>
<Row>
<Col span={12}>
<Form.Item
label="水库代码"
name="rscd"
rules={[{ required: true }]}
>
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
</Col>
<Row>
<Col span={12}>
<Form.Item
label="水工建筑物编号"
name="hycncd"
rules={[{ required: true }]}
>
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="测点编号"
rules={[{ required: true }]}
name="mpcd"
>
<Form.Item
label="断面名称"
rules={[{ required: true }]}
name="dm"
>
<NormalSelect
disabled={mode==='view'}
disabled={mode === 'view'}
allowClear
style={{ width: "100%" }}
options={codeList.map(o => ({ label: o.mpcd, value: o.mpcd }))}
options={dmList}
onChange={(v) => {
form.setFieldValue('dvcd', null)
setDmCode(v)
}}
/>
</Form.Item>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="测点名称"
rules={[{ required: true }]}
name="dvcd"
>
<Col span={12}>
<Form.Item
label="测点名称"
rules={[{ required: true }]}
name="dvcd"
>
<NormalSelect
disabled={mode==='view'}
disabled={mode === 'view'}
allowClear
style={{ width: "100%" }}
options={dmCd}
options={codeList.filter(o => dmCode ? o.profileCode === dmCode : true)}
/>
</Form.Item>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="测量时间"
name="mstm"
getValueFromEvent={(e,dateString) => dateString}
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
>
<DatePicker disabled={mode==='view'} format={'YYYY-MM-DD HH:mm:ss'} style={{width:'100%'}} allowClear showTime />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="温度(℃)"
name="tm"
>
<InputNumber disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
<Form.Item
label="测量时间"
rules={[{ required: true }]}
name="mstm"
getValueFromEvent={(e, dateString) => dateString}
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
>
<DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD HH:mm:ss'} style={{ width: '100%' }} allowClear showTime />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="渗流压力水位(m)"
name="spprwl"
>
<InputNumber disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
</Col>
</Row>
{
mode==='view'?null:(
<>
<Form.Item {...btnItemLayout}>
<Button type="primary" htmlType="submit">
<Form.Item
label="渗流压力水位(m)"
name="spprwl"
>
<InputNumber disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="温度(℃)"
name="tm"
>
<InputNumber disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
</Form.Item>
</Col>
</Row>
{
mode === 'view' ? null : (
<>
<Form.Item {...btnItemLayout}>
<Button type="primary" htmlType="submit">
{mode === 'save' ? '保存' :
mode === "similarSave" ? "保存" :
'修改'}
</Button>
</Form.Item>
</>
)
}
'修改'}
</Button>
</Form.Item>
</>
)
}
</Form>
</>
);

View File

@ -7,7 +7,10 @@ import { useSelector } from 'react-redux';
import apiurl from '../../../../../service/apiurl';
import usePageTable from '../../../../../components/crud/usePageTable2';
import { createCrudService } from '../../../../../components/crud/_';
import {CrudOpRender_text} from '../../../../../components/crud/CrudOpRender';
import { CrudOpRender_text } from '../../../../../components/crud/CrudOpRender';
import { exportFile } from '../../../../../utils/tools.js';
import { httppost5 } from '../../../../../utils/request';
import "./index.less"
const Page = () => {
const role = useSelector(state => state.auth.role);
@ -20,13 +23,12 @@ const Page = () => {
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
{ title: '测点名称', key: 'dvcd', dataIndex: 'dvcd', width: 200, ellipsis: true, align:"center" },
{ title: '水工建筑物编号', key: 'hycncd', dataIndex: 'hycncd', width: 200, align:"center"},
{ title: '测点编号', key: 'mpcd', dataIndex: 'mpcd', width: 200, align:"center"},
{ title: '断面名称', key: 'dmName', dataIndex: 'dmName', width: 200, align:"center"},
{ title: '测量时间', key: 'mstm', dataIndex: 'mstm', width: 200, align:"center"},
{ title: '温度(°C)', key: 'tm', dataIndex: 'tm', width: 250, ellipsis: true,align:"center", },
{
title: '渗流压力水位(m)', key: 'spprwl', dataIndex: 'spprwl', width: 200, align:"center",
},
{ title: '温度(°C)', key: 'tm', dataIndex: 'tm', width: 250, ellipsis: true,align:"center", },
{ title: '更新时间', key: 'updateTm', dataIndex: 'updateTm', width: 200, ellipsis: true,align:"center", },
{
title: '操作', key: 'operation', width: 240, fixed: 'right',align: 'center',
@ -34,7 +36,6 @@ const Page = () => {
<CrudOpRender_text
edit={editBtn ? true : false}
del={delBtn ? true : false}
view={viewBtn ? true : false}
command={(cmd) => () => command(cmd)(row)} />)
},
];
@ -50,21 +51,30 @@ const Page = () => {
} else if (type === 'view') {
refModal.current.showView(params);
} else if (type === 'del') {
const url = apiurl.gcaqjc.sjtjcx.sjlr.syjc.del + params.mpcd+'/'+params.mstm
const url = apiurl.gcaqjc.sjtjcx.sjlr.rgjc.del + params.mpcd+'/'+params.mstm
refModal.current.onDeleteGet(url);
}
}
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gcaqjc.sjtjcx.sjlr.syjc.page).find_noCode);
useEffect(()=>{
const params = {
search: {
...searchVal,
}
};
search(params)
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gcaqjc.sjtjcx.sjlr.rgjc.page).find_noCode);
const exportExcel = () => {
let params = {
...searchVal,
}
httppost5(apiurl.gcaqjc.sjtjcx.ndsytjb.export, params).then(res => {
exportFile(`渗压监测表.xlsx`,res.data)
})
}
useEffect(() => {
if (searchVal) {
const params = {
search: {
...searchVal,
}
};
search(params)
}
}, [searchVal])
@ -76,6 +86,7 @@ const Page = () => {
setSearchVal={setSearchVal}
onSave={command('save')}
role={role}
exportFile={exportExcel}
/>
</Card>
<div className="ant-card-body" style={{padding:"20px 0 0 0"}}>

View File

@ -1,57 +1,80 @@
import React, { useEffect,useState } from 'react';
import React, { useEffect, useState } from 'react';
import { Form, Input, Button, DatePicker } from 'antd';
import { getDictService } from '../../../../../service/SelectValue'
import AdcdFuzzyTreeSelect from '../../../../../components/Form/AdcdFuzzyTreeSelect';
import NormalSelect from '../../../../../components/Form/NormalSelect';
import { config } from '../../../../../config';
import moment from 'moment';
import { httppost2,httpget2 } from '../../../../../utils/request';
import { httppost2, httpget2 } from '../../../../../utils/request';
import apiurl from '../../../../../service/apiurl';
const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
const searchBtn = role?.rule?.find(item => item.menuName == "查询")||true;
const addBtn = role?.rule?.find(item => item.menuName == "新增")||true;
const ToolBar = ({ setSearchVal, onSave, storeData, role,exportFile }) => {
const searchBtn = role?.rule?.find(item => item.menuName == "查询") || true;
const addBtn = role?.rule?.find(item => item.menuName == "新增") || true;
const optionsType = [
{
label: "今日",
value:1
value: 1
},
{
label: "近一周",
value:2
value: 2
},
{
label:"近一月",
value:3
label: "近一月",
value: 3
},
{
label:"近三月",
value:4
label: "近三月",
value: 4
},
{
label:"近一年",
value:5
label: "近一年",
value: 5
},
]
const [form] = Form.useForm();
const [dmList, setDmList] = useState([])
const [codeList, setCodeList] = useState([])
const [dmCode,setDmCode] = useState('')
const [dmCode, setDmCode] = useState('')
const getDmList = async () => {
try {
const res = await httppost2(apiurl.gcaqjc.sjtjcx.sycx.list)
setDmList(res.data.map(s=>({label:s.profileName,value:s.profileCode})));
const sortedData = res.data.sort((a, b) => {
// 判断a、b是否为ZB0开头
const isAZB0 = a.profileCode.startsWith('ZB0');
const isBZB0 = b.profileCode.startsWith('ZB0');
// 规则ZB0开头的排前面同类型都ZB0/都非ZB0保持原顺序
if (isAZB0 && !isBZB0) return -1; // a是ZB0b不是 → a在前
if (!isAZB0 && isBZB0) return 1; // a不是ZB0b是 → b在前
return 0; // 同类型,保持原始相对顺序
});
setDmList(sortedData.map(s => ({ label: s.profileName, value: s.profileCode })));
} catch (error) {
console.log(error);
}
}
}
const getStationCode = async () => {
try {
const res = await httpget2(apiurl.gcaqjc.sjtjcx.sycx.list1)
setCodeList(res.data.map(s=>({label:s,value:s,profileCode:s})));
const list = []
res?.data?.map((item) => {
const { dvcd, dm } = item
if (dvcd?.length > 0) {
dvcd?.map((item2) => {
list.push({
label: item2,
value: item2,
profileCode: dm,
})
})
}
})
setCodeList(list);
} catch (error) {
console.log(error);
}
@ -59,55 +82,67 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
const onValuesChange = (e) => {
switch (e.ranger) {
case 1:
form.setFieldValue("tm",[moment().startOf("day"),moment()])
form.setFieldValue("tm", [moment().startOf("day"), moment()])
break;
case 2:
form.setFieldValue("tm",[moment().subtract(7, 'days'),moment()])
form.setFieldValue("tm", [moment().subtract(7, 'days'), moment()])
break;
case 3:
form.setFieldValue("tm",[moment().subtract(1, 'months'),moment()])
form.setFieldValue("tm", [moment().subtract(1, 'months'), moment()])
break;
case 4:
form.setFieldValue("tm",[moment().subtract(3, 'months'),moment()])
form.setFieldValue("tm", [moment().subtract(3, 'months'), moment()])
break;
case 5:
form.setFieldValue("tm",[moment().subtract(1, 'years'),moment()])
break;
form.setFieldValue("tm", [moment().subtract(1, 'years'), moment()])
break;
default:
break;
}
}
const onFinish = (values) => {
let dateSo;
if (values.tm) {
dateSo = {
start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
start: moment(values.tm[0]).format('YYYY-MM-DD 00:00:00'),
end: moment(values.tm[1]).format('YYYY-MM-DD 23:59:59')
}
}
delete values.tm
setSearchVal({...values, dateTimeRangeSo:dateSo});
setSearchVal({ ...values, dateTimeRangeSo: dateSo });
}
useEffect(() => {
getDmList()
getStationCode()
}, [])
useEffect(() => {
getDmList()
getStationCode()
}, [])
useEffect(() => {
const stm = moment().subtract(1, 'year');
const etm = moment();
form.setFieldValue('tm', [stm, etm])
setSearchVal({
dateTimeRangeSo: {
start: stm.format("YYYY-MM-DD 00:00:00"),
end: etm.format("YYYY-MM-DD 23:59:59")
}
})
}, [])
return (
<>
<div style={{display:'flex',justifyContent:'space-between'}}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish} onValuesChange={onValuesChange}>
<Form.Item label="监测时间" name="tm">
<Form.Item label="日期" name="tm">
<RangePicker
allowClear
showTime
style={{ width: "350px" }}
format="YYYY-MM-DD HH:mm:ss"
onChange={(v)=>{
form.setFieldValue('ranger',null)
style={{ width: "300px" }}
format="YYYY-MM-DD"
onChange={(v) => {
form.setFieldValue('ranger', null)
}}
/>
</Form.Item>
@ -123,8 +158,8 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
allowClear
style={{ width: "150px" }}
options={dmList}
onChange={(v)=>{
form.setFieldValue('dvcd',null)
onChange={(v) => {
form.setFieldValue('dvcd', null)
setDmCode(v)
}}
/>
@ -133,14 +168,14 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
<NormalSelect
allowClear
style={{ width: "150px" }}
options={codeList.filter(o=>dmCode?o.profileCode===dmCode:true)}
options={codeList.filter(o => dmCode ? o.profileCode === dmCode : true)}
/>
</Form.Item>
{searchBtn ?
<Form.Item>
<Button type="primary" htmlType="submit">查询</Button>
</Form.Item>
:null }
{searchBtn ?
<Form.Item>
<Button type="primary" htmlType="submit">查询</Button>
</Form.Item>
: null}
<Form.Item>
<Button onClick={() => form.resetFields()}>重置</Button>
</Form.Item>
@ -149,8 +184,11 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
<Form.Item>
<Button onClick={onSave}>新增</Button>
</Form.Item>
:null
: null
}
<Form.Item>
<Button onClick={() => exportFile()}>导出</Button>
</Form.Item>
</Form>
</div>
</>

View File

@ -58,17 +58,13 @@ const ModalForm = ({ mode, record,onEdit,onSave,onSimilarSave }) => {
initialValues={record}
>
<Form.Item
label="水库编码设备编码"
rules={[{ required: true }]}
name="resCd"
label="监测时间"
name="tm"
getValueFromEvent={(e,dateString) => dateString}
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
rules={[{required: true}]}
>
<NormalSelect
disabled={mode==='view'}
allowClear
style={{ width: "100%" }}
options={codeList.map(s=>({label:s.resCd,value:s.resCd}))}
/>
<DatePicker disabled={mode==='view'} format={'YYYY-MM-DD HH:mm:ss'} style={{width:'100%'}} allowClear showTime />
</Form.Item>
<Form.Item
label="测点编号"
@ -83,39 +79,23 @@ const ModalForm = ({ mode, record,onEdit,onSave,onSimilarSave }) => {
/>
</Form.Item>
<Form.Item
label="e方向变形值(mm)"
label="X方向表面位移(mm)"
name="de"
>
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
<Form.Item
label="n方向变形值(mm)"
label="Y方向表面位移(mm)"
name="dn"
>
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
<Form.Item
label="u方向变形值(mm)"
label="H方向表面位移(mm)"
name="du"
>
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
<Form.Item
label="站点高程(m)"
name="alt"
>
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
<Form.Item
label="监测时间"
name="tm"
getValueFromEvent={(e,dateString) => dateString}
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
rules={[{required: true}]}
>
<DatePicker disabled={mode==='view'} format={'YYYY-MM-DD HH:mm:ss'} style={{width:'100%'}} allowClear showTime />
</Form.Item>
{
mode==='view'?null:(

View File

@ -19,16 +19,14 @@ const Page = () => {
const [searchVal, setSearchVal] = useState(false)
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
{ title: '水库编码设备编码', key: 'resCd', dataIndex: 'resCd', width: 200, ellipsis: true, align:"center" },
{ title: '测点编号', key: 'cd', dataIndex: 'cd', width: 200, align:"center"},
{ title: '测点编号', key: 'cd', dataIndex: 'cd', width: 200, align: "center" },
{ title: '监测时间', key: 'tm', dataIndex: 'tm', width: 200, align:"center"},
{
title: 'x方向变形值(mm)', key: 'de', dataIndex: 'de', width: 200, align:"center",
},
{ title: 'y方向变形值(mm)', key: 'dn', dataIndex: 'dn', width: 200, ellipsis: true,align:"center", },
{ title: 'h方向变形值(mm)', key: 'du', dataIndex: 'du', width: 200, ellipsis: true, align: "center", },
{ title: '站点高程', key: 'alt', dataIndex: 'alt', width: 200, align:"center"},
{ title: '监测时间', key: 'tm', dataIndex: 'tm', width: 200, align:"center"},
{ title: '更新时间', key: 'updateTm', dataIndex: 'updateTm', width: 200, align:"center"},
{
title: '操作', key: 'operation', width: 240, fixed: 'right',align: 'center',
@ -36,7 +34,6 @@ const Page = () => {
<CrudOpRender_text
edit={editBtn ? true : false}
del={delBtn ? true : false}
view={viewBtn ? true : false}
command={(cmd) => () => command(cmd)(row)} />)
},
];
@ -87,7 +84,7 @@ const Page = () => {
<BasicCrudModal
width={1000}
ref={refModal}
title="渗压监测记录"
title="位移监测记录"
component={ModalForm}
onCrudSuccess={refresh}
/>

View File

@ -8,7 +8,7 @@ import moment from 'moment';
import { httppost2 } from '../../../../../utils/request';
import apiurl from '../../../../../service/apiurl';
const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
const ToolBar = ({ setSearchVal, onSave, storeData,role,exportFile }) => {
const searchBtn = role?.rule?.find(item => item.menuName == "查询")||true;
const addBtn = role?.rule?.find(item => item.menuName == "新增")||true;
@ -94,6 +94,18 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
getDmList()
getStationCode()
}, [])
useEffect(() => {
const stm = moment().subtract(1, 'year');
const etm = moment();
form.setFieldValue('tm', [stm, etm])
setSearchVal({
dateTimeRangeSo: {
start: stm.format("YYYY-MM-DD HH:mm:ss"),
end: etm.format("YYYY-MM-DD HH:mm:ss")
}
})
}, [])
return (
@ -140,6 +152,9 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
</Form.Item>
:null
}
<Form.Item>
<Button onClick={() => exportFile()}>导出</Button>
</Form.Item>
</Form>
</div>
</>

View File

@ -0,0 +1,61 @@
import React, { useEffect, useState, useMemo, useRef } from 'react';
import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Typography, Select } from 'antd';
import { DeleteOutlined, FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons';
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
import apiurl from '../../../service/apiurl';
import NormalSelect from '../../../components/Form/NormalSelect';
import FileUpload from '../../../components/Form/FileUpload'
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
const [form] = Form.useForm();
const [loading, setLoading] = useState(false)
const [fileUploading, setFileUploading] = useState(false) // 新增文件上传状态
const onfinish = (values) => {
if (mode === 'edit') {
onEdit(apiurl.gsxl.skzf.edit, {...record,...values,})
}
}
return (
<>
<Form
form={form}
{...formItemLayout}
onFinish={onfinish}
initialValues={record}
>
<Row>
<Col span={24}>
<Form.Item
label="日蒸发量万m³"
name="evaporation"
rules={[{ required: true }]}
>
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear placeholder='请输入'/>
</Form.Item>
</Col>
</Row>
{
mode === 'view' ? null : (
<>
<Form.Item {...btnItemLayout}>
<Button
type="primary"
htmlType="submit"
loading={loading}
disabled={fileUploading} // 文件上传中时禁用按钮
>
{fileUploading ? '文件上传中...' : (mode === 'save' ? '提交' : '修改')}
</Button>
</Form.Item>
</>
)
}
</Form>
</>
);
}
export default ModalForm;

View File

@ -0,0 +1,99 @@
import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
import BasicCrudModal from '../../../components/crud/BasicCrudModal';
import { Table, Card, Modal, Form, Input, Button, Row, Col, Timeline, message, Tabs, Image } from 'antd';
import { FileWordOutlined, FilePdfOutlined, FileZipOutlined, PaperClipOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux';
import ToolBar from './toolbar';
import ModalForm from './form';
import apiurl from '../../../service/apiurl';
import usePageTable from '../../../components/crud/usePageTable2';
import { createCrudService } from '../../../components/crud/_';
import { CrudOpRender_text } from '../../../components/crud/CrudOpRender';
import { httppost2,httppost5 } from '../../../utils/request';
import { exportFile } from '../../../utils/tools';
import dayjs from 'dayjs';
const Page = () => {
const refModal = useRef();
const [searchVal, setSearchVal] = useState(false)
const [data, setData] = useState([])
const columns = [
{ title: '月份', key: 'month', dataIndex: 'month', width: 100, align: "center" },
{ title: '日蒸发量万m³', key: 'evaporation', dataIndex: 'evaporation', ellipsis: true,align: 'center', },
{
title: '操作', key: 'operation', fixed: 'right', align: 'center',width:120,
render: (value, row, index) => (
<CrudOpRender_text
edit={true}
command={(cmd) => () => command(cmd)(row)}
/>
)
},
];
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);
}
}
const getData = async () => {
try {
const res = await httppost2(apiurl.gsxl.skzf.list)
if (res.code == 200) {
setData(res.data)
}
} catch (error) {
console.log(error);
}
}
const exportExcel = () => {
httppost5(apiurl.gsxl.skzf.export).then(res => {
exportFile(`水库蒸发资料表.xlsx`, res.data)
})
}
useEffect(() => {
getData()
}, [])
return (
<>
<div className='content-root clearFloat xybm' style={{ paddingRight: "0", paddingBottom: "0" }}>
<div className='lf CrudAdcdTreeTableBox' style={{ width: "100%", overflowY: "auto" }}>
<Card className='nonebox'>
<ToolBar
setSearchVal={setSearchVal}
onSave={command('save')}
exportFile={exportExcel}
/>
</Card>
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
<Table
columns={columns}
rowKey="id"
dataSource={data}
pagination={false}
style={{marginRight:20}}
/>
</div>
</div>
<BasicCrudModal
width={800}
ref={refModal}
title=""
component={ModalForm}
onCrudSuccess={getData}
/>
</div>
</>
);
}
export default Page;

View File

@ -0,0 +1,34 @@
import React, { useEffect, useState } from 'react';
import { Form, Input, Button, DatePicker, Select } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons'
import moment from 'moment';
const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, onSave,exportFile }) => {
const [form] = Form.useForm();
const onFinish = (values) => {
const { releaseDate, ...ret } = values
if (releaseDate) {
ret.stm = moment(values.releaseDate[0]).format('YYYY-MM-DD')
ret.etm = moment(values.releaseDate[1]).format('YYYY-MM-DD')
}
setSearchVal(ret);
}
return (
<>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item>
<Button onClick={() => exportFile()} type='primary'>导出</Button>
</Form.Item>
</Form>
</div>
</>
);
}
export default ToolBar;