lishenfeng
/
ykzz-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(): 测点信息管理以及断面信息管理开发

master
李神峰 2024-12-27 17:49:19 +08:00
parent 043abb1505
commit 30a603455b
15 changed files with 613 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/DashboardLayout/TopMenu.tsx
View File

@ -34,7 +34,7 @@ const TopMenu: React.FC<{
menu: MenuItem[];
menuIndexes: string[];
}> = ({menu, menuIndexes}) => {
console.log(menu);
console.log('12333333',menu);
console.log(menuIndexes);
const dispatch = useDispatch();

1
src/models/auth/index.ts
View File

@ -34,7 +34,6 @@ export const auth = createModel<RootModel>()({
effects: {
async regByToken(token: string): Promise<boolean> {
const result = await regByToken(token);
if (result) {
this.setUser(result);
return true;

18
src/service/apiurl.js
View File

@ -78,6 +78,24 @@ const apiurl = {
wyedit: service_ykz + '/osmoticShiftR/update',
wydelete: service_ykz + '/osmoticShiftR/del',
wyexport:service_ykz + '/osmoticShiftR/export'
},
cdgl: {
page: service_ykz + '/osmoticStationInfo/page',
save: service_ykz + '/osmoticStationInfo/insert',
edit: service_ykz + '/osmoticStationInfo/update',
delete: service_ykz + '/osmoticStationInfo/del',
},
dmgl: {
page: service_ykz + '/attDamProfile/page',
save: service_ykz + '/attDamProfile/insert',
edit: service_ykz + '/attDamProfile/update',
delete: service_ykz + '/attDamProfile/del',
list:service_ykz + '/attDamProfile/list'
},
gl: {
page: service_ykz + '/osmoticProfileRel/page',
save: service_ykz + '/osmoticProfileRel/insert',
delete: service_ykz + '/osmoticProfileRel/del',
}
},
sbwh: {

4
src/views/AppRouters.tsx
View File

@ -31,6 +31,8 @@ import Yjgzpz from './SafeWatch/WarnRuleConfig'
import Xjrw from "./Gcyx/xcxj/xjrw"
import Xjwtcl from "./Gcyx/xcxj/xjwtcl"
import Xjxpz from "./Gcyx/xcxj/xjxpz"
import Dmgl from "./SafeWatch/Dmgl"
import Cdgx from "./SafeWatch/cdgx"
import TestLine from './TestLine'
// const HomePage = lazy(() => import('./Home'))
@ -62,6 +64,8 @@ const AppRouters: React.FC = () => {
{ path: 'aqjc/sljc', element: <Sljc /> },
{ path: 'aqjc/yjjl', element: <Yjjl /> },
{ path: 'aqjc/yjgzpz', element: <Yjgzpz /> },
{ path: 'aqjc/dmgl', element: <Dmgl /> },
{ path: 'aqjc/dmcdglgl', element: <Cdgx /> },
// 设备维护
{ path: 'sbwh/wxyhgl/wxfabz', element: <Whfabz /> },
{ path: 'sbwh/wxyhgl/ssgcjl', element: <Ssgcjl /> },

116
src/views/Home/index.js
View File

@ -9,11 +9,13 @@ import './index.less'
import ReactEcharts from 'echarts-for-react';
import options from './options'
import clsx from 'clsx';
import { Select } from 'antd';
import { Empty } from 'antd';
import { httpget2, httppost2 } from '../../utils/request';
import apiurl from '../../service/apiurl';
import { useDispatch, useSelector } from 'react-redux';
import HFivePlayer from '../../components/video1Plary';
import moment from 'moment';
import {loadMenu,loadRole} from '../../models/auth/_'
const MenuTitleCard = ({ key, title }) => {
return (
<div className='menuItem_style' key={key} title={title}>
@ -22,33 +24,14 @@ const MenuTitleCard = ({ key, title }) => {
)
}
export default function Home() {
const title = [
{
title: '首页',
key: '/home',
},
{
title: '监测数据',
key: '/mgr/jcsj/jcsj',
}, {
title: '安全监测',
key: '/mgr/aqjc',
},
{
title: '系统管理',
key: '/mgr/xtgl/yhxx',
},
{
title: '工程运行',
key: '/mgr/gcyx/xxcx/jbqk',
},
{
title: '设备维护',
key: '/mgr/sbwh/wxyhgl/wxfabz',
},
]
const menu = useSelector((state) => state.auth.menu);
const [title, setTitle] = useState([])
// const title = menu.map(item => ({ title: item.menuName, key: item.path || item.redirect }))
const jcdType = {
0: "闸后流量",
2: '闸前水位',
3:'闸后水位'
}
const types1 = {
0: "闸后流量(m³/s)",
1: '闸前水位(m)',
@ -159,6 +142,30 @@ export default function Home() {
//报警信息
const [policeData, setPoliceData] = useState(Array(5).fill(0).map((item, i) => ({ id: i, zd: '闸前水位', watchvalue: "10.23", limit: 0, max: 10, time: '2024-08-15 15:00:00' })))
const getPoliceData = async (val) => {
const start = moment().subtract(7,'days').format('YYYY-MM-DD 00:00:00')
const end = moment().format('YYYY-MM-DD 23:59:59')
let params = {
pageSo: {
pageSize: 999,
pageNumber:1
},
dateTimeRangeSo:{
start,
end
}
}
try {
const res = await httppost2(apiurl.jcsj.bjgl.bjjl.page,params)
if (res.code == 200) {
setPoliceData(res.data.records)
}
} catch (error) {
console.log(error);
}
}
const navigate = useNavigate();
const jumpMenu = (item) => {
navigate(item.key)
@ -199,6 +206,17 @@ export default function Home() {
setIndex(idx)
getVideoSrc(videoList[idx].indexCode)
}
// 获取菜单
const getMenu = async () => {
try {
const data = await loadMenu();
setTitle(data.map(item => ({ title: item.menuName, key: item.path || item.redirect })))
} catch (error) {
console.log(error);
}
}
const [activeOne, setActiveOne] = useState(0)
useEffect(() => {
autofit.init({
@ -210,6 +228,8 @@ export default function Home() {
getVideoList()
getRealData()
getLogData()
getPoliceData()
getMenu()
}, [])
return (
@ -248,11 +268,14 @@ export default function Home() {
</div>
))}
<div className='run_chart'>
<ReactEcharts
option={pxOptions || {}}
style={{ width: "100%", height: '100%' }}
notMerge={true}
/>
{historyList.length > 0 ?
<ReactEcharts
option={pxOptions || {}}
style={{ width: "100%", height: '100%' }}
notMerge={true}
/>
:<Empty style={{marginTop:20}}/>
}
</div>
</div>
</div>
@ -271,14 +294,15 @@ export default function Home() {
</tr>
</thead>
<tbody style={{ overflowY: safeData.length > 4 ? 'scroll' : 'hidden' }}>
{safeData.map((item, i) => (
{safeData.length >0 ? safeData.map((item, i) => (
<tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
<td>{item.cd}</td>
<td>{item.dm}</td>
<td>{item.kpa}</td>
<td style={{ width: 137 }}>{item.time}</td>
</tr>
))}
)):<Empty />
}
</tbody>
</table>
@ -300,15 +324,16 @@ export default function Home() {
<th style={{ width: 137 }}>操作时间</th>
</tr>
</thead>
<tbody style={{ height: 170 }}>
{operateData.map((item, i) => (
<tbody style={{ height: 170,overflow: operateData.length > 6 ? 'scroll' : 'hidden' }}>
{operateData.length > 0 ?operateData.map((item, i) => (
<tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
<td>{item.gatePoreCode}</td>
<td>{item.opContent}</td>
<td>{item.createUserName}</td>
<td style={{ width: 137 }}>{item.createTime}</td>
</tr>
))}
)):<Empty />
}
</tbody>
</table>
@ -329,15 +354,16 @@ export default function Home() {
</tr>
</thead>
<tbody style={{ height: 170, overflow: policeData.length > 6 ? 'scroll' : 'hidden' }} >
{policeData.map((item, i) => (
{policeData.length > 0 ? policeData.map((item, i) => (
<tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
<td style={{ width: 58 }}>{item.zd}</td>
<td>{item.watchvalue}</td>
<td style={{ width: 58 }}>{item.limit}</td>
<td style={{ width: 58 }}>{item.max}</td>
<td style={{ width: 129 }}>{item.time}</td>
<td style={{ width: 58 }}>{jcdType[item.type]}</td>
<td>{item.val}</td>
<td style={{ width: 58 }}>{item.lowerLimit}</td>
<td style={{ width: 58 }}>{item.upperLimit}</td>
<td style={{ width: 129 }}>{item.warnTime}</td>
</tr>
))}
)):<Empty />
}
</tbody>
</table>

7
src/views/Home/index.less
View File

@ -56,7 +56,7 @@
position: absolute;
top:30px;
left:500px;
}.styles3{
}.styles5{
position: absolute;
top:30px;
right:100px;
@ -64,7 +64,7 @@
position: absolute;
top:30px;
right:300px;
}.styles5{
}.styles3{
position: absolute;
top:30px;
right:500px;
@ -120,6 +120,9 @@
color: #95f204;
}
.run_chart{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 200px;
}

78
src/views/SafeWatch/Dmgl/form.js Normal file
View File

@ -0,0 +1,78 @@
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';
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) => {
if (mode === 'edit') {
onEdit(apiurl.aqjc.dmgl.edit,{...record,...values})
}
if (mode === 'save') {
onSave(apiurl.aqjc.dmgl.save,values)
}
}
return (
<>
<Form
form={form}
{...formItemLayout}
onFinish={onfinish}
initialValues={record}
>
<Row>
<Col span={24}>
<Form.Item
label="断面名称"
name="profileName"
rules={[{ required: true }]}
>
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label="备注"
name="remark"
>
<Input.TextArea 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;

100
src/views/SafeWatch/Dmgl/index.js Normal file
View File

@ -0,0 +1,100 @@
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: 'profileName', dataIndex: 'profileName', width: 150,
},
{ title: '备注', key: 'remark', dataIndex: 'remark', width: 150},
{
title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
render: (value, row, index) => (
<CrudOpRender_text
edit={ true }
del={ true }
command={(cmd) => () => command(cmd)(row)} />)
},
];
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
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.dmgl.delete + `/${params.id}`);
}
}
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.aqjc.dmgl.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={800}
ref={refModal}
title="断面管理"
component={ModalForm}
onCrudSuccess={successCallback}
/>
</div>
</>
);
}
export default Page;

60
src/views/SafeWatch/Dmgl/toolbar.js Normal file
View File

@ -0,0 +1,60 @@
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,
},
]
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 label="类型" name="type">
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
</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;

63
src/views/SafeWatch/WarnRuleConfig/form.js
View File

@ -4,37 +4,29 @@ import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayo
import apiurl from '../../../service/apiurl';
import NormalSelect from '../../../components/Form/NormalSelect';
import moment from 'moment';
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: "闸后流量",
label: "位移",
value: 0,
},
{
label: "雨量",
label: "结构缝",
value: 1,
},
{
label: "闸前水位",
value:2,
},
{
label: "闸后水位",
value: 3,
},
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.jcsj.bjgl.bjgzpz.edit,{...record,...values})
onEdit(apiurl.aqjc.cdgl.edit,{...record,...values})
}
if (mode === 'save') {
onSave(apiurl.jcsj.bjgl.bjgzpz.save,values)
onSave(apiurl.aqjc.cdgl.save,values)
}
}
@ -49,42 +41,23 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
<Row>
<Col span={12}>
<Form.Item
label="监测项目"
label="监测点"
name="stationCode"
rules={[{ required: true }]}
>
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
</Col>
<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="upperLimit"
rules={[{ required: true }]}
>
<InputNumber disabled={mode==='view'} style={{width:'100%'}} allowClear />
<NormalSelect disabled={mode==='view'} style={{width:'100%'}} allowClear options={types} />
</Form.Item>
</Col>
</Row>
<Row>
<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:(

45
src/views/SafeWatch/WarnRuleConfig/index.js
View File

@ -12,57 +12,32 @@ import { httppost2 } from '../../../utils/request';
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const Page = () => {
const types = {
0: "闸后流量",
1: '雨量',
2: "闸前水位",
3:'闸后水位'
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,
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: 'eventsDate', dataIndex: 'eventsDate', 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.jcsj.bjgl.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();
@ -71,15 +46,13 @@ const Page = () => {
} else if (type === 'view') {
refModal.current.showView(params);
} else if (type === 'del') {
refModal.current.onDeleteGet(apiurl.jcsj.bjgl.bjgzpz.delete + `/${params.id}`);
} else if (type == 'status') {
stopStatus({ id: params.id, status: params.status == 1 ? 0 : params.status == 0 ? 1 : ''})
refModal.current.onDeleteGet(apiurl.aqjc.cdgl.delete + `/${params.id}`);
}
}
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.jcsj.bjgl.bjgzpz.page).find_noCode);
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.aqjc.cdgl.page).find_noCode);
/**
* @description 处理成功的回调
@ -116,7 +89,7 @@ const Page = () => {
<BasicCrudModal
width={1000}
ref={refModal}
title="报警规则"
title="测点管理"
component={ModalForm}
onCrudSuccess={successCallback}
/>

15
src/views/SafeWatch/WarnRuleConfig/toolbar.js
View File

@ -8,21 +8,17 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
const types = [
{
label: "闸后流量",
label: "位移",
value: 0,
},
{
label: "雨量",
label: "结构缝",
value: 1,
},
{
label: "闸前水位",
label: "渗压",
value: 2,
},
{
label: "闸后水位",
value: 3,
},
]
const [form] = Form.useForm();
@ -35,7 +31,10 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
<>
<div style={{display:'flex',justifyContent:'space-between'}}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item label="监测点" name="type">
<Form.Item label="测点" name="stationCode">
<Input allowClear style={{ width: '150px' }}/>
</Form.Item>
<Form.Item label="类型" name="type">
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
</Form.Item>
<Form.Item>

81
src/views/SafeWatch/cdgx/form.js Normal file
View File

@ -0,0 +1,81 @@
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 { httppost2 } from '../../../utils/request';
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
const [form] = Form.useForm();
const onfinish = (values) => {
if (mode === 'edit') {
onEdit(apiurl.aqjc.dmgl.edit,{...record,...values})
}
if (mode === 'save') {
onSave(apiurl.aqjc.dmgl.save,values)
}
}
const [dmList, setDmList] = useState([])
const getDmList = async () => {
try {
const res = await httppost2(apiurl.aqjc.dmgl.list)
if (res.code == 200) {
setDmList(res.data.map(item => ({label: item.profileName,value: item.id})))
}
} catch (error) {
console.log(error);
}
}
useEffect(() => {
getDmList()
}, [])
return (
<>
<Form
form={form}
{...formItemLayout}
onFinish={onfinish}
initialValues={record}
>
<Row>
<Col span={24}>
<Form.Item
label="断面名称"
name="profileId"
rules={[{ required: true }]}
>
<NormalSelect disabled={mode === 'view'} style={{ width: '100%' }} allowClear options={dmList} />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label="测点名称"
name="stationCode"
>
<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;

100
src/views/SafeWatch/cdgx/index.js Normal file
View File

@ -0,0 +1,100 @@
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: 'profileName', dataIndex: 'profileName', width: 150,
},
{ title: '测点', key: 'stationCode', dataIndex: 'stationCode', width: 150},
{
title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
render: (value, row, index) => (
<CrudOpRender_text
edit={ true }
del={ true }
command={(cmd) => () => command(cmd)(row)} />)
},
];
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
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.gl.delete + `/${params.id}`);
}
}
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.aqjc.gl.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={800}
ref={refModal}
title="断面管理"
component={ModalForm}
onCrudSuccess={successCallback}
/>
</div>
</>
);
}
export default Page;

61
src/views/SafeWatch/cdgx/toolbar.js Normal file
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 { httppost2 } from '../../../utils/request';
import moment from 'moment';
import apiurl from '../../../service/apiurl';
const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
const [dmList, setDmList] = useState([])
const [form] = Form.useForm();
const getDmList = async () => {
try {
const res = await httppost2(apiurl.aqjc.dmgl.list)
if (res.code == 200) {
setDmList(res.data.map(item => ({label: item.profileName,value: item.id})))
}
} catch (error) {
console.log(error);
}
}
const onFinish = (values) => {
setSearchVal({...values});
}
useEffect(() => {
getDmList()
}, [])
return (
<>
<div style={{display:'flex',justifyContent:'space-between'}}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item label="断面" name="profileId">
<NormalSelect allowClear style={{ width: '150px' }} options={dmList} />
</Form.Item>
<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;