feat():预警规则配置模块开发
parent
4aadbd3bf9
commit
d1cef224b3
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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 /> },
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ export default function BasicSituation() {
|
|||
style: { marginLeft: "6%" }
|
||||
}}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
<Input allowClear style={{ width: '300px'}} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Row>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="监测点"
|
||||
label="测点"
|
||||
name="stationCode"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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') {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue