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

feat(): 闸门监控开发

qzc-dev-demo
李神峰 2025-03-28 17:33:56 +08:00
parent b54341ea7a
commit 1e9febbb45
6 changed files with 183 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/service/apiurl.js
View File

@ -451,6 +451,10 @@ const apiurl = {
},
zfzl: {
list: service_fxdd + "/gateValveReal/list",
historypage: service_fxdd + '/gateValveReal/log/page',
historyList: service_fxdd + '/gateValveReal/log/loglist',
historyPageExport: service_fxdd + '/gateValveReal/log/exp',
swInfo:service_fxdd + '/reservoir/water/waterInfo',
krlist: service_fxdd + "/reservoir/water/data",
info: service_fxdd + "/attGateValve/detail",
kgpage: service_fxdd + "/gateValveR/page",

2
src/views/gcaqjc/gcaqfx/jrx/jrxOptions.js
View File

@ -232,7 +232,7 @@ export default function jrxOptions(data = {}, type = "1",typeName='1') {
},
splitLine: {
// 网格
show: true,
show: false,
lineStyle: {
color: '#CCCCCC',
type: 'dashed'

5
src/views/rcgl/byfz/bypc/index.js
View File

@ -145,7 +145,8 @@ const Page = () => {
pageSo: {
pageNumber: 1,
pageSize: 99999,
}
},
searchDate:searchVal?.searchDate
}
try {
const res = await httppost2(apiurl.rcgl.byfz.bypc.count, params);
@ -157,7 +158,7 @@ const Page = () => {
}
useEffect(() => {
getCount();
}, [])
}, [searchVal])
useEffect(() => {
if (searchVal) {
const params = {

49
src/views/rcgl/zmjk/ModalContent.js
View File

@ -4,61 +4,78 @@ import ModalToolBar from './ModalToolBar';
import { httppost5 } from '../../../utils/request';
import { exportFile } from '../../../utils/tools';
import apiurl from '../../../service/apiurl';
export default function ModalContent() {
import usePageTable from '../../../components/crud/usePageTable2';
import { createCrudService } from '../../../components/crud/_';
export default function ModalContent({zfjkData}) {
const columns = [
{
title: '序号',
key: 'inx',
dataIndex:'inx',
width: 80,
render: (r, i) => <span>{i + 1}</span>
},
{
title: '闸门名称',
key: 'project',
title: '闸阀名称',
key: 'valveName',
dataIndex:'valveName',
width: 150,
},
{
title: '操作内容',
key: 'project',
dataIndex:'opContent',
key: 'opContent',
width: 150,
},
{
title: '操作结果',
key: 'project',
dataIndex:'status',
key: 'status',
width: 150,
}
,
},
{
title: '操作时间',
key: 'project',
dataIndex:'tm',
key: 'tm',
width: 150,
}
]
const [searchVal, setSearchVal] = useState(false)
// 闸阀弹框更多数据
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gsxl.zfzl.historypage).find_noCode);
const exportExcel = () => {
let params = {
...searchVal,
// pageSo: {
// pageNumber: tableProps.pagination.current,
// pageSize:tableProps.pagination.pageSize
// }
pageSo: {
pageNumber: tableProps.pagination.current,
pageSize:tableProps.pagination.pageSize
}
}
httppost5(apiurl.gcaqjc.sjtjcx.ndsytjb.export, params).then(res => {
httppost5(apiurl.gsxl.zfzl.historyPageExport, params).then(res => {
exportFile(`闸门操作记录.xlsx`,res.data)
})
}
useEffect(() => {
if (searchVal) {
const params = {
search: {
...searchVal,
}
}
search(params)
}
}, [searchVal])
return (
<div>
<Card className='nonebox'>
<ModalToolBar
setSearchVal={setSearchVal}
exportFile={exportExcel}
list={zfjkData}
/>
</Card>
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
<Table columns={columns} rowKey="inx" dataSource={[]} />
<Table columns={columns} rowKey="inx" {...tableProps} />
</div>
</div>
)

28
src/views/rcgl/zmjk/ModalToolBar.js
View File

@ -4,7 +4,7 @@ import { Form, Input, Button, DatePicker } from 'antd';
import moment from 'moment';
import NormalSelect from '../../../components/Form/NormalSelect';
const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, exportFile }) => {
const ToolBar = ({ setSearchVal, exportFile,list }) => {
const optionsType = [
{
label: "今日",
@ -44,7 +44,7 @@ const ToolBar = ({ setSearchVal, exportFile }) => {
}
}
delete values.tm
setSearchVal({ ...values, dateTimeSo });
setSearchVal({ ...values, dateTimeRangeSo:dateTimeSo });
}
const onValuesChange = (e) => {
@ -70,20 +70,28 @@ const ToolBar = ({ setSearchVal, exportFile }) => {
}
useEffect(() => {
let dateTimeSo = {
start: moment().subtract(1, "years").format('YYYY-MM-DD 00:00:00'),
end: moment().format('YYYY-MM-DD 00:00:00')
if (list.length > 0) {
let dateTimeSo = {
start: moment().subtract(7, "days").format('YYYY-MM-DD 00:00:00'),
end: moment().format('YYYY-MM-DD 00:00:00')
}
form.setFieldValue("tm", [moment(dateTimeSo.start), moment(dateTimeSo.end)])
form.setFieldValue("valveCode", list[0]?.valveCode)
setSearchVal({dateTimeRangeSo:dateTimeSo, valveCode:list[0]?.valveCode})
}
form.setFieldValue("tm", [moment(dateTimeSo.start), moment(dateTimeSo.end)])
setSearchVal({ dateTimeSo })
}, [])
}, [list])
return (
<>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish} onValuesChange={onValuesChange}>
<Form.Item label="闸门名称" name="maintainType">
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
<Form.Item label="闸门名称" name="valveCode">
<NormalSelect
style={{ width: '150px' }}
options={list}
allowClear={false}
fieldNames={{label: 'valveName',value: 'valveCode'}}
/>
</Form.Item>
<Form.Item label="日期范围" name="tm">
<RangePicker

147
src/views/rcgl/zmjk/index.js
View File

@ -13,6 +13,7 @@ import './index.less';
import { httpget, httpget2, httppost2 } from '../../../utils/request';
import apiurl from '../../../service/apiurl';
import ModalContent from './ModalContent';
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const CanvasW = 1080
const CanvasH = 640
@ -182,17 +183,20 @@ const Page = () => {
const jcColumns = [
{
title: '项目',
key: 'project',
key: 'name',
dataIndex:'name',
width: 150,
},
{
title: '实时数据',
key: 'project',
key: 'realData',
dataIndex:'realData',
width: 150,
},
{
title: '数据采集时间',
key: 'project',
dataIndex:'tm',
key: 'tm',
width: 150,
}
]
@ -200,17 +204,20 @@ const Page = () => {
const zfColumns = [
{
title: '闸阀名称',
key: 'project',
key: 'valveName',
dataIndex:'valveName',
width: 150,
},
{
title: '当前开关状态',
key: 'project',
key: 'status',
dataIndex:'status',
width: 150,
},
{
title: '数据采集时间',
key: 'project',
dataIndex:'tm',
key: 'tm',
width: 150,
}
]
@ -218,22 +225,26 @@ const Page = () => {
const jlColumns = [
{
title: '闸阀名称',
key: 'project',
key: 'valveName',
dataIndex:'valveName',
width: 150,
},
{
title: '操作内容',
key: 'project',
dataIndex:'opContent',
key: 'opContent',
width: 150,
},
{
title: '操作结果',
key: 'project',
dataIndex:'status',
key: 'status',
width: 150,
},
{
title: '操作时间',
key: 'project',
dataIndex:'tm',
key: 'tm',
width: 150,
}
]
@ -252,9 +263,9 @@ const Page = () => {
const pts = contextCoordinates(xunit, hole);
const eqpnoList = useMemo(() => damList ? new Array(damList.length).fill(0).map((o, index) => index) : [], [damList]);
useEffect(() => {
getList()
}, [])
// useEffect(() => {
// getList()
// }, [])
const getList = async () => {
const { code, data } = await httppost2(apiurl.zmjk.getList)
@ -262,8 +273,8 @@ const Page = () => {
return
}
const obj = data[0] || {}
getInformation(obj.gateCode)
getDamData(obj.stcd)
// getInformation(obj.gateCode)
// getDamData(obj.stcd)
getVideo(obj.gateCode)
setData(obj)
}
@ -320,6 +331,95 @@ const Page = () => {
return num
}
// 闸阀监控列表数据
const [zfjkData, setzfjkData] = useState([])
const getZfjkData = async () => {
try {
const res = await httppost2(apiurl.gsxl.zfzl.list)
if (res.code == 200) {
setzfjkData(res.data)
}
} catch (error) {
console.log(error);
}
}
// 闸阀历史操作
const [zfjkHistoryListData, setzfjkHistoryListData] = useState([])
const getZfjkHistoryData = async () => {
try {
const res = await httppost2(apiurl.gsxl.zfzl.historyList)
if (res.code == 200) {
setzfjkHistoryListData(res.data)
}
} catch (error) {
console.log(error);
}
}
const swList = [
{
name: "库水位（m）",
realData:'',
tm:''
},
{
name: "今日雨量（mm）",
realData:'',
tm:''
},
{
name: "灌溉发电流量（m³/s）",
realData:'',
tm:''
}
]
// 闸阀历史操作
const [zfjkSwData, setzfjkSwData] = useState([])
const getZfjkSwData = async () => {
try {
const res = await httppost2(apiurl.gsxl.zfzl.swInfo)
if (res.code == 200) {
const {
rz,
todayRainNum,
outPowerNum,
todayRainNumTm,
outPowerNumTm,
tm
} = res.data;
const newArr = swList.map(item => {
if (item.name == '库水位（m）') {
item.realData = rz;
item.tm = tm;
} else if (item.name == '今日雨量（mm）') {
item.realData = todayRainNum;
item.tm = todayRainNumTm;
} else {
item.realData = outPowerNum;
item.tm = outPowerNumTm;
}
return item;
})
setzfjkSwData(newArr)
}
} catch (error) {
console.log(error);
}
}
useEffect(() => {
getZfjkData()
getZfjkHistoryData()
getZfjkSwData()
}, [])
return (
<>
<div className='content-root clearFloat xybm sg_zmjk' style={{ paddingRight: "0", paddingBottom: "0" }}>
@ -335,12 +435,12 @@ const Page = () => {
<div className='sz_left_up_table'>
<Table
columns={zfColumns}
rowKey={(record) => record.id}
dataSource={[]}
rowKey={(record) => record.tm}
dataSource={zfjkData}
pagination={false}
/>
</div>
<div className='sg_zmjk_left_title' style={{ marginTop: 175,display:'flex',justifyContent:'space-between' }}>
<div className='sg_zmjk_left_title' style={{ marginTop: 150,display:'flex',justifyContent:'space-between' }}>
<div><Divider type="vertical" style={{ width: 5, background: '#259def', height: 20 }} />
最近操作记录</div>
<div onClick={() => setOpen(true)}>
@ -353,8 +453,8 @@ const Page = () => {
<div className='sz_left_up_table'>
<Table
columns={jlColumns}
rowKey={(record) => record.id}
dataSource={[]}
rowKey={(record) => record.tm}
dataSource={zfjkHistoryListData}
pagination={false}
/>
</div>
@ -439,8 +539,8 @@ const Page = () => {
<div style={{ width: '100%', marginTop: 10 }}>
<Table
columns={jcColumns}
rowKey={(record) => record.id}
dataSource={[]}
rowKey={(record) => record.tm}
dataSource={zfjkSwData}
pagination={false}
/>
{/* {
@ -484,12 +584,13 @@ const Page = () => {
width={1100}
title="闸门操作记录"
footer={null}
destroyOnClose
onCancel={() => {
setOpen(false)
}}
>
<div style={{ height: '600px' }}>
<ModalContent/>
<ModalContent zfjkData={zfjkData} />
{/* <Tabs>
<Tabs.TabPane tab="基本信息" key="item-1">
<Descriptions bordered size="small" column={3} >