feat():预警规则配置模块开发

master
李神峰 2025-01-03 17:33:00 +08:00
parent 4aadbd3bf9
commit d1cef224b3
13 changed files with 372 additions and 25 deletions

View File

@ -98,13 +98,25 @@ const apiurl = {
save: service_ykz + '/attDamProfile/insert',
edit: service_ykz + '/attDamProfile/update',
delete: service_ykz + '/attDamProfile/del',
list:service_ykz + '/attDamProfile/list'
list: service_ykz + '/attDamProfile/list',
info: service_ykz + '/osmoticStationInfo/list/'
},
gl: {
page: service_ykz + '/osmoticProfileRel/page',
save: service_ykz + '/osmoticProfileRel/insert',
delete: service_ykz + '/osmoticProfileRel/del',
}
},
yjjl: {
page: service_ykz + '/osmoticWarnRecord/page',
export: service_ykz + '/osmoticWarnRecord/export',
},
bjgzpz: {
page: service_ykz + '/osmoticWarnRule/page',
save: service_ykz +'/osmoticWarnRule/insert',
edit: service_ykz +'/osmoticWarnRule/update',
delete: service_ykz + '/osmoticWarnRule/del',
stop:service_ykz + '/osmoticWarnRule/startStop'
},
},
sbwh: {
whfabz: {

View File

@ -33,6 +33,7 @@ import Xjwtcl from "./Gcyx/xcxj/xjwtcl"
import Xjxpz from "./Gcyx/xcxj/xjxpz"
import Dmgl from "./SafeWatch/Dmgl"
import Cdgx from "./SafeWatch/cdgx"
import Gzpz from './SafeWatch/Gzpz'
import TestLine from './TestLine'
// const HomePage = lazy(() => import('./Home'))
@ -66,6 +67,7 @@ const AppRouters: React.FC = () => {
{ path: 'aqjc/yjgzpz', element: <Yjgzpz /> },
{ path: 'aqjc/dmgl', element: <Dmgl /> },
{ path: 'aqjc/dmcdglgl', element: <Cdgx /> },
{ path: 'aqjc/gzpz', element: <Gzpz /> },
// 设备维护
{ path: 'sbwh/wxyhgl/wxfabz', element: <Whfabz /> },
{ path: 'sbwh/wxyhgl/ssgcjl', element: <Ssgcjl /> },

View File

@ -0,0 +1,131 @@
import React, { useEffect, useState, useMemo, useRef } from 'react';
import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Typography, Popconfirm } from 'antd';
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
import apiurl from '../../../service/apiurl';
import NormalSelect from '../../../components/Form/NormalSelect';
import moment from 'moment';
import { httpget2 } from '../../../utils/request';
const { RangePicker } = DatePicker
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
const types = [
{
label: "位移",
value: 0,
},
{
label: "结构缝",
value: 1,
},
{
label: "渗压",
value: 2,
},
]
const [form] = Form.useForm();
const onfinish = (values) => {
values.eventsDate = values.eventsDate ? moment(values.eventsDate).format("YYYY-MM-DD 00:00:00") : ''
if (mode === 'edit') {
onEdit(apiurl.aqjc.bjgzpz.edit, { ...record, ...values })
}
if (mode === 'save') {
onSave(apiurl.aqjc.bjgzpz.save, values)
}
}
const [cdList, setCdList] = useState([])
// 测点类型
const getCdList = async (type) => {
try {
const res = await httpget2(apiurl.aqjc.dmgl.info + type)
if (res.code == 200) {
setCdList(res.data.map(item => ({ label: item.stationCode, value: item.stationCode })))
}
} catch (error) {
console.log(error);
}
}
const onValuesChange = (val) => {
if ('type' in val) {
getCdList(val.type)
}
}
return (
<>
<Form
form={form}
{...formItemLayout}
onFinish={onfinish}
initialValues={record}
onValuesChange={onValuesChange}
>
<Row>
<Col span={12}>
<Form.Item
label="监测类型"
name="type"
rules={[{ required: true }]}
>
<NormalSelect allowClear style={{ width: '100%' }} options={types} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="测点"
name="stationCode"
rules={[{ required: true }]}
>
<NormalSelect allowClear style={{ width: '100%' }} options={cdList} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="阈值下限"
name="upperLimit"
rules={[{ required: true }]}
>
<InputNumber disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="阈值上限"
name="lowerLimit"
rules={[{ required: true }]}
>
<InputNumber disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="备注"
name="remark"
>
<Input disabled={mode === 'view'} 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;

View File

@ -0,0 +1,127 @@
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 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 } from '../../../utils/request';
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const Page = () => {
const types = {
0: "位移",
1: '结构缝',
2: "渗压",
}
const refModal = useRef();
const [searchVal, setSearchVal] = useState(false)
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
{ title: '测点', key: 'stationCode', dataIndex: 'stationCode', width: 150},
{
title: '监测类型', key: 'type', dataIndex: 'type', width: 150,
render: (v) => <span>{types[v]}</span>
},
{ title: '阈值下限', key: 'upperLimit', dataIndex: 'upperLimit', width: 150},
{ title: '阈值上限', key: 'lowerLimit ', dataIndex: 'lowerLimit', width: 150},
{
title: '是否启用', key: 'status', dataIndex: 'status', width: 150,
render: (v) => <span>{ v == 1 ? '否': v==0?'是':''}</span>
},
{
title: '配置时间', key: 'createTime', dataIndex: 'createTime', width: 150,
},
{
title: '最近报警时间', key: 'recentWarnTime', dataIndex: 'recentWarnTime', width: 140,
},
{
title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
render: (value, row, index) => (
<CrudOpRender_text
edit={ true }
del={ true }
status={{status:row.status,bol:true}}
command={(cmd) => () => command(cmd)(row)} />)
},
];
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
const stopStatus = async (params) => {
try {
const res = await httppost2(apiurl.aqjc.bjgzpz.stop, params)
if (res.code == 200) {
message.success(`${params.status ? '停用':'启用'}成功`)
refresh()
}
} 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.onDeleteGet(apiurl.aqjc.bjgzpz.delete + `/${params.id}`);
} else if (type == 'status') {
stopStatus({ id: params.id, status: params.status == 1 ? 0 : params.status == 0 ? 1 : ''})
}
}
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.aqjc.bjgzpz.page).find_noCode);
/**
* @description 处理成功的回调
*/
const successCallback = () => {
refresh()
}
useEffect(()=>{
const params = {
search: {
...searchVal,
}
};
search(params)
}, [searchVal])
return (
<>
<div className='content-root clearFloat xybm' style={{paddingBottom:"0"}}>
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
<Card className='nonebox'>
<ToolBar
setSearchVal={setSearchVal}
onSave={command('save')}
/>
</Card>
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
</div>
</div>
<BasicCrudModal
width={1000}
ref={refModal}
title="预警规则"
component={ModalForm}
onCrudSuccess={successCallback}
/>
</div>
</>
);
}
export default Page;

View File

@ -0,0 +1,61 @@
import React, { useEffect,useState } from 'react';
import { Form, Input, Button, DatePicker } from 'antd';
import NormalSelect from '../../../components/Form/NormalSelect';
import moment from 'moment';
const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
const types = [
{
label: "闸后流量",
value: 0,
},
{
label: "雨量",
value: 1,
},
{
label: "闸前水位",
value: 2,
},
{
label: "闸后水位",
value: 3,
},
]
const [form] = Form.useForm();
const onFinish = (values) => {
setSearchVal({...values});
}
return (
<>
<div style={{display:'flex',justifyContent:'space-between'}}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item label="测点" name="stationCode">
<Input allowClear style={{ width: '150px' }}/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">查询</Button>
</Form.Item>
<Form.Item>
<Button onClick={() => form.resetFields()}>重置</Button>
</Form.Item>
{
(onSave) ?
<Form.Item>
<Button onClick={onSave}>新增</Button>
</Form.Item>
:null
}
</Form>
</div>
</>
);
}
export default ToolBar;

View File

@ -39,7 +39,7 @@ const ToolBar = ({ setSearchVal, exportFile1, storeData, role }) => {
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item label="测点编号" name="stationCode">
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
<Input allowClear style={{ width: '150px' }} />
</Form.Item>
{/* <Form.Item label="" name="tm">
<RangePicker

View File

@ -22,32 +22,33 @@ const Page = () => {
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
{
title: '监测类型', key: 'projectName', dataIndex: 'projectName', width: 150,
title: '监测类型', key: 'type', dataIndex: 'type', width: 150,
render: (v) => <span>{types[v]}</span>
},
{ title: '监测点', key: 'projectAddr', dataIndex: 'projectAddr', width: 150},
{ title: '监测值', key: 'projectAddr', dataIndex: 'projectAddr', width: 150},
{ title: '监测点', key: 'stationCode', dataIndex: 'stationCode', width: 150},
{ title: '监测值', key: 'val', dataIndex: 'val', width: 150 },
{ title: '阈值下限', key: 'lowerLimit', dataIndex: 'lowerLimit', width: 150},
{ title: '阈值上限', key: 'upperLimit', dataIndex: 'upperLimit', width: 150},
{
title: '状态', key: 'projectAddr', dataIndex: 'projectAddr', width: 150,
title: '状态', key: 'status', dataIndex: 'status', width: 150,
render: (v) => <span>{statusTypes[v]}</span>
},
{ title: '预警依据', key: 'projectAddr', dataIndex: 'projectAddr', width: 250},
{ title: '预警时间', key: 'projectAddr', dataIndex: 'projectAddr', width: 150},
{ title: '预警时间', key: 'warnTime', dataIndex: 'warnTime', width: 150},
{
title: '持续时长', key: 'createTime', dataIndex: 'createTime', width: 150,
title: '持续时长', key: 'duration', dataIndex: 'duration', width: 150,
},
];
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.aqjc.yjjl.page).find_noCode);
// 导出
const exportExcel = () => {
let params = {
...searchVal,
}
httppost5(apiurl.sbwh.cgtzgl.export, params).then(res => {
exportFile(`渗流监测.xlsx`,res.data)
httppost5(apiurl.aqjc.yjjl.export, params).then(res => {
exportFile(`预警记录.xlsx`,res.data)
})
}

View File

@ -19,10 +19,6 @@ const ToolBar = ({ setSearchVal, exportFile1, storeData, role }) => {
label: "渗流监测",
value: 2
},
{
label: "环境量监测",
value: 3
}
]
const typeStatus = [
@ -55,7 +51,7 @@ const ToolBar = ({ setSearchVal, exportFile1, storeData, role }) => {
<>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item label="监测类型" name="projectName">
<Form.Item label="监测类型" name="stationCode">
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
</Form.Item>
<Form.Item label="预警时间" name="tm">

View File

@ -41,7 +41,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
<Row>
<Col span={12}>
<Form.Item
label="测点"
label="测点"
name="stationCode"
rules={[{ required: true }]}
>

View File

@ -4,7 +4,7 @@ import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayo
import apiurl from '../../../service/apiurl';
import NormalSelect from '../../../components/Form/NormalSelect';
import moment from 'moment';
import { httppost2 } from '../../../utils/request';
import { httppost2,httpget2 } from '../../../utils/request';
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
const [form] = Form.useForm();
const onfinish = (values) => {
@ -29,8 +29,24 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
}
const [cdList, setCdList] = useState([])
// 测点类型
const getCdList = async (type) => {
try {
const res = await httpget2(apiurl.aqjc.dmgl.info + type)
if (res.code == 200) {
setCdList(res.data.map(item => ({label: item.stationCode,value: item.stationCode})))
}
} catch (error) {
console.log(error);
}
}
useEffect(() => {
getDmList()
getCdList(2)
}, [])
return (
@ -40,6 +56,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
{...formItemLayout}
onFinish={onfinish}
initialValues={record}
>
<Row>
<Col span={24}>
@ -56,7 +73,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
label="测点名称"
name="stationCode"
>
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
<NormalSelect disabled={mode === 'view'} style={{ width: '100%' }} allowClear options={cdList} />
</Form.Item>
</Col>

View File

@ -41,7 +41,7 @@ const Page = () => {
if (type === 'save') {
refModal.current.showSave();
} else if (type === 'edit') {
// refModal.current.showEdit({ ...params });
refModal.current.showEdit({ ...params });
} else if (type === 'view') {
refModal.current.showView(params);
} else if (type === 'del') {

View File

@ -36,7 +36,7 @@ const Page = () => {
title: '配置时间', key: 'createTime', dataIndex: 'createTime', width: 150,
},
{
title: '最近报警时间', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
title: '最近报警时间', key: 'recentWarnTime', dataIndex: 'recentWarnTime', width: 140,
},
{
title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',