feat():修改闸门监控

master
李神峰 2025-11-12 16:55:30 +08:00
parent 5672506c58
commit 09ee59d002
7 changed files with 87 additions and 318 deletions

View File

@ -539,9 +539,12 @@ const apiurl = {
},
zfzl: {
list: service_fxdd + "/gateValveReal/list",
list1: service_fxdd + "/gate/list",
historypage: service_fxdd + '/gateValveReal/log/page',
historypage1: service_fxdd + '/gate/page/history',
historyList: service_fxdd + '/gateValveReal/log/loglist',
historyPageExport: service_fxdd + '/gateValveReal/log/exp',
historyPageExport1: service_fxdd + '/gate/exp',
swInfo:service_fxdd + '/reservoir/water/waterInfo',
krlist: service_fxdd + "/reservoir/water/data",
info: service_fxdd + "/attGateValve/detail",
@ -570,6 +573,7 @@ const apiurl = {
spjk1: {
aiWarn: {
page: service_fxdd + "/stImgWarnR/page",
page1: service_fxdd + "/iscaiEvent/page",
list: service_fxdd + "/attCctvBase/list",
controler:service_fxdd + "/attCctvBase/control"
}

View File

@ -12,14 +12,14 @@ import moment from 'moment';
const Page = () => {
const { tableProps, search, refresh } = usePageTable(createCrudService('/gunshiApp/tsg/rescue/goods/page/query').find_noCode,{});
// const { tableProps, search, refresh } = usePageTable(createCrudService('/gunshiApp/tsg/rescue/goods/page/query').find_noCode,{});
useEffect(()=>{
const params = {
search: {}
};
search(params)
}, [])
// useEffect(()=>{
// const params = {
// search: {}
// };
// search(params)
// }, [])
return (
<div className="ant-card-body" style={{padding:"0 10px",height:'600px',overflowY:'auto'}}>

View File

@ -6,34 +6,34 @@ import { exportFile } from '../../../utils/tools';
import apiurl from '../../../service/apiurl';
import usePageTable from '../../../components/crud/usePageTable2';
import { createCrudService } from '../../../components/crud/_';
export default function ModalContent({zfjkData}) {
export default function ModalContent({ item }) {
const myType = {
// 闸前水位站 2闸后水位站 3流量站
'1': '工作闸门',
'2': '检修闸门',
}
const columns = [
{
title: '序号',
key: 'inx',
dataIndex:'inx',
width: 80,
},
{
title: '闸门名称',
key: 'stcd',
dataIndex:'stcd',
width: 150,
render: (v) => <span>{myType[v]}</span>
},
{
title: '闸阀名称',
key: 'valveName',
dataIndex:'valveName',
title: '当前开度(m)',
key: 'gtop',
dataIndex:'gtop',
width: 150,
},
{
title: '操作内容',
dataIndex:'opContent',
key: 'opContent',
width: 150,
},
{
title: '操作结果',
dataIndex:'status',
key: 'status',
width: 150,
},
{
title: '操作时间',
title: '数据采集时间',
dataIndex:'tm',
key: 'tm',
width: 150,
@ -41,7 +41,7 @@ export default function ModalContent({zfjkData}) {
]
const [searchVal, setSearchVal] = useState(false)
// 闸阀弹框更多数据
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gsxl.zfzl.historypage).find_noCode);
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gsxl.zfzl.historypage1).find_noCode);
const exportExcel = () => {
let params = {
...searchVal,
@ -50,7 +50,7 @@ export default function ModalContent({zfjkData}) {
pageSize:tableProps.pagination.pageSize
}
}
httppost5(apiurl.gsxl.zfzl.historyPageExport, params).then(res => {
httppost5(apiurl.gsxl.zfzl.historyPageExport1, params).then(res => {
exportFile(`闸门操作记录.xlsx`,res.data)
})
}
@ -70,7 +70,7 @@ export default function ModalContent({zfjkData}) {
<ModalToolBar
setSearchVal={setSearchVal}
exportFile={exportExcel}
list={zfjkData}
item={item}
/>
</Card>

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,list }) => {
const ToolBar = ({ setSearchVal, exportFile,item }) => {
const optionsType = [
{
label: "今日",
@ -70,27 +70,27 @@ const ToolBar = ({ setSearchVal, exportFile,list }) => {
}
useEffect(() => {
if (list.length > 0) {
if (item) {
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("stcd", item.stcd)
setSearchVal({dateTimeRangeSo:dateTimeSo, stcd:item.stcd})
}
}, [list])
}, [item])
return (
<>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish} onValuesChange={onValuesChange}>
<Form.Item label="闸门名称" name="valveCode">
<Form.Item label="闸门名称" name="stcd">
<NormalSelect
style={{ width: '150px' }}
options={list}
options={[{label:'工作闸门',value:"1"},{label:'检修闸门',value:"2"}]}
allowClear={false}
fieldNames={{label: 'valveName',value: 'valveCode'}}
disabled={true}
/>
</Form.Item>
<Form.Item label="日期范围" name="tm">

View File

@ -17,165 +17,12 @@ import ModalContent from './ModalContent';
const url = "http://223.75.53.141:9100/gs-tsg"
const CanvasW = 1080
const CanvasH = 640
// const waterRatio = 0
const zmobj = {
"hpCode": "HP0074208040002120",
"stcd": "4265630075",
"ctrlType": "PLC",
"ctrlProtocol": "PLC",
"uprzStcd": null,
"dwrzStcd": null,
"flowStcd": null,
"gaType": "waga",
"ctrlPass": null,
"maxHgt": 1.9,
"minHgt": 0,
"name": "五岭包节制闸",
"ghtX": null,
"ghtY": null,
"irrCode": "D00000020",
"irrName": "三干渠",
"engCode": "ENG100076",
"engName": "三干渠管理处",
"orgCode": "A07",
"gaorNum": 3,
"wagaType": "节制闸",
"plcType": null,
"bim": 0,
"vip": 0,
"miu": null,
"lgtd": 112.242945,
"lttd": 30.848166,
"runtime": [
null,
{
"stcd": "4265630075",
"gateNumber": 1,
"realAperture": 376,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": 0,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:26",
"_online": true
},
{
"stcd": "4265630075",
"gateNumber": 2,
"realAperture": 388,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": 0,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:26",
"_online": true
},
{
"stcd": "4265630075",
"gateNumber": 3,
"realAperture": 394,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": null,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:26",
"_online": true
}
],
"real": {
"stcd": "4265630075",
"stationName": "五岭包节制闸",
"z1": null,
"zz1": null,
"z1tm": null,
"z2": null,
"zz2": null,
"z2tm": null,
"hq": null,
"hqtm": null,
"demtl": null
},
"cctvs": [],
"_idx": 88,
"_fav": false,
"_sort": 10086
}
const runtime = [
null,
{
"stcd": "4265630075",
"gateNumber": 1,
"realAperture": 976,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": 0,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:31"
},
{
"stcd": "4265630075",
"gateNumber": 2,
"realAperture": 388,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": 0,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:31"
},
{
"stcd": "4265630075",
"gateNumber": 3,
"realAperture": 394,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": null,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:31"
}
]
const myType = {
// 闸前水位站 2闸后水位站 3流量站
'1': '闸前水位/水深(m)',
'2': '闸后水位/水深(m)',
'3': '流量 (m³/s)',
'1': '工作闸门',
'2': '检修闸门',
}
const Page = () => {
@ -203,15 +50,16 @@ const Page = () => {
const zfColumns = [
{
title: '闸名称',
key: 'valveName',
dataIndex:'valveName',
title: '闸名称',
key: 'stcd',
dataIndex:'stcd',
width: 150,
render: (v) => <span>{myType[v]}</span>
},
{
title: '当前开关状态',
key: 'status',
dataIndex:'status',
title: '当前开度(m)',
key: 'gtop',
dataIndex:'gtop',
width: 150,
},
{
@ -263,9 +111,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.video)
@ -335,9 +183,10 @@ const Page = () => {
// 闸阀监控列表数据
const [zfjkData, setzfjkData] = useState([])
const [rowItem, setRowItem] = useState({})
const getZfjkData = async () => {
try {
const res = await httppost2(apiurl.gsxl.zfzl.list)
const res = await httppost2(apiurl.gsxl.zfzl.list1)
if (res.code == 200) {
setzfjkData(res.data)
}
@ -426,8 +275,8 @@ const Page = () => {
useEffect(() => {
getZfjkData()
getZfjkHistoryData()
getZfjkSwData()
// getZfjkHistoryData()
// getZfjkSwData()
}, [])
@ -438,20 +287,28 @@ const Page = () => {
{/* <Card className='nonebox'>
</Card> */}
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
<div className="sg_zmjk_left">
<div className='sg_zmjk_left_title'>
<div className="sg_zmjk_left" style={{width:'100%'}}>
{/* <div className='sg_zmjk_left_title'>
<Divider type="vertical" style={{ width: 5, background: '#259def', height: 20 }} />
闸阀监控
</div>
</div> */}
<div className='sz_left_up_table'>
<Table
columns={zfColumns}
rowKey={(record) => record.tm}
rowKey={(record) => record.id}
dataSource={zfjkData}
pagination={false}
onRow={
(data)=>({
onClick:()=>{
setOpen(true)
setRowItem(data)
}
})
}
/>
</div>
<div className='sg_zmjk_left_title' style={{ marginTop: 150,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)}>
@ -468,76 +325,24 @@ const Page = () => {
dataSource={zfjkHistoryListData}
pagination={false}
/>
</div>
</div> */}
</div>
{/* <div className="sg_zmjk_left">
<Stage width={1080} height={640}>
<Sider pts={pts} side="left" />
<Sider pts={pts} side="right" />
<Topper1 pts={pts} type={hole} />
<ZmColumns runtime={damList} zmobj={zmobj} pts={pts} waterRatio={waterRatio} />
<Topper2 pts={pts} waterRatio={waterRatio} />
</Stage>
<div style={{ position: 'absolute', left: 0, top: 20, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}>
<div key="sider1" style={{ flexGrow: 1, width: 100 }}></div>
{
eqpnoList.map(o => (
<div key={o}
onClick={() => {}}
className='o' style={{ flexGrow: 1, width: 100, display: 'flex', justifyContent: 'center', cursor: 'pointer' }}>
<div style={{ width: 80, height: 40, backgroundColor: '#43c4e7', borderRadius: 12, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 28 }}>#{o+1}</div>
</div>
))
}
<div key="sider2" style={{ flexGrow: 1, width: 100 }}></div>
</div>
<div style={{ position: 'absolute', left: 0, bottom: 20, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}>
<div key="sider1" style={{ flexGrow: 1, width: 100 }}></div>
{
eqpnoList.map(o => (
<div key={o} className='o' style={{ flexGrow: 1, width: 100, display: 'flex', justifyContent: 'center' }}>
<div
onClick={() => {}}
style={{ width: 80, height: 32, border: '1px solid #444', backgroundColor: '#fff', borderRadius: 4, color: '#888', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 18, cursor: 'pointer' }}
>
{renAperture(damList[o]?.realAperture)}
</div>
</div>
))
}
<div key="sider2" style={{ flexGrow: 1, width: 100 }}></div>
</div>
</div> */}
<div className="sg_zmjk_right">
{/* <div className="sg_zmjk_right">
<div className='sg_zmjk_right_video'>
<div className='sg_zmjk_right_video_title'>
<Divider type="vertical" style={{ width: 5, background: '#259def', height: 20 }} />
监控视频</div>
<div className='sg_zmjk_right_video_content'>
{/* <div className='sg_zmjk_right_video_content_left'>
{
videoList.map((item,index)=>(
<div className={index===itemIndex?'sg_zmjk_right_video_content_left_item itemChecked':'sg_zmjk_right_video_content_left_item'} onClick={()=>{setItemIndex(index);getVideoSrc(item.indexCode)}}>
{item.name}
</div>
))
}
</div> */}
<div className='sg_zmjk_right_video_content_right'>
{
videoArr?.src &&
<div
className="content-video"
style={{ width: '100%', height: '100%', cursor: "pointer" }}
onClick={() => {
// if (controlerParams.type == 1) {
// setVideoOpen(true)
// setIsShow(!isShow)
// }
}}
>
<HFivePlayer size={1} wsUrl={videoArr} playerID={'111'} />
{/* <div style={{textAlign:"right"}}>注:单击视频显示/隐藏云台</div> */}
</div>
}
</div>
@ -554,39 +359,11 @@ const Page = () => {
dataSource={zfjkSwData}
pagination={false}
/>
{/* {
list?.map((item)=>{
if(item.type===1){
return (
<div className='sg_zmjk_right_information_content'>
<div>{myType[item.type]}</div>
<div>{item.value||'-'} / {getNum(item.value,data.inEle)}</div>
<div>{item.tm?.slice(5,19)}</div>
</div>
)
}else if(item.type===2){
return (
<div className='sg_zmjk_right_information_content'>
<div>{myType[item.type]}</div>
<div>{item.value||'-'} / {getNum(item.value,data.inEle)}</div>
<div>{item.tm?.slice(5,19)}</div>
</div>
)
}else{
return (
<div className='sg_zmjk_right_information_content'>
<div>{myType[item.type]}</div>
<div>{item.value}</div>
<div>{item.tm?.slice(5,19)}</div>
</div>
)
}
})
} */}
</div>
</div>
{/* <div className='sg_zmjk_right_more' onClick={() => setOpen(true)}>查看更多信息</div> */}
</div>
<div className='sg_zmjk_right_more' onClick={() => setOpen(true)}>查看更多信息</div>
</div> */}
</div>
</div>
</div>
@ -601,28 +378,7 @@ const Page = () => {
}}
>
<div style={{ height: '600px' }}>
<ModalContent zfjkData={zfjkData} />
{/* <Tabs>
<Tabs.TabPane tab="基本信息" key="item-1">
<Descriptions bordered size="small" column={3} >
<Descriptions.Item label="启闭设备类型" style={{ width: '16.5%' }}>{{ 1: '卷扬式', 2: '螺杆式', 3: '凹轮式', 4: '涡轮式', 5: '丝杆式' }?.[data?.hdgrTp] || '-'}</Descriptions.Item>
<Descriptions.Item label="动力类型" style={{ width: '16.5%' }}>{{ 1: '手动', 2: '电动', 3: '手电两用' }?.[data?.pwrTp] || '-'}</Descriptions.Item>
<Descriptions.Item label="水闸类型" style={{ width: '16.5%' }}>{{ 1: '分(泄)洪闸', 2: '节制闸', 3: '排(退)水闸', 4: '引(进)水闸', 5: '挡潮闸', 6: '船闸', 9: '其他' }?.[data?.wagaType] || '-'}</Descriptions.Item>
<Descriptions.Item label="进口高程">{data?.inEle || '-'} m</Descriptions.Item>
<Descriptions.Item label="出口高程">{data?.outEle || '-'} m</Descriptions.Item>
<Descriptions.Item label="闸门孔数">{data?.gaorNum || '-'} </Descriptions.Item>
<Descriptions.Item label="设计流量">{data?.dsfl || '-'} /s</Descriptions.Item>
<Descriptions.Item label="实达流量">{data?.stfl || '-'} /s</Descriptions.Item>
<Descriptions.Item label="闸门尺寸">{data?.gateSize || '-'} m*m</Descriptions.Item>
<Descriptions.Item label="工程等级">{{ 1: '', 2: 'Ⅱ', 3: 'Ⅲ', 4: 'Ⅳ', 5: '' }?.[data?.engGrad] || '-'}</Descriptions.Item>
<Descriptions.Item label="运行状况">{{ 1: '在用良好', 2: '在用故障', 3: '停用' }?.[data?.runStat] || '-'}</Descriptions.Item>
<Descriptions.Item label="建成时间">{data?.compDate || '-'}</Descriptions.Item>
</Descriptions>
</Tabs.TabPane>
<Tabs.TabPane tab="工程图片" key="item-2">
<Image width={800} src={url + data?.files?.filePath} alt='' />
</Tabs.TabPane>
</Tabs> */}
<ModalContent item={rowItem} />
</div>
</Modal>
</>

View File

@ -1,5 +1,7 @@
import React from 'react'
import { Image } from 'antd'
import HFivePlayer from '../../../components/video1Plary'
export default function Card({record}) {
return (
<div className='card-box' style={{border:"1px solid #fff",boxShadow:"0 0 10px #c0c0c0",padding:10,marginBottom:10,marginLeft:10}}>
@ -7,6 +9,10 @@ export default function Card({record}) {
src={record?.imgPath}
style={{width:360,height:220}}
></Image>
{/* <div style={{width:360,height:220}}>
<HFivePlayer size={1} wsUrl={record?.resIndexCode} playerID={record?.id} />
</div> */}
<div style={{display:"flex",alignItems:"center",columnGap:5}}>
<span style={{
padding: "4px 2px",

View File

@ -11,7 +11,7 @@ const Page = () => {
const role = useSelector(state => state.auth.role);
const [searchVal, setSearchVal] = useState(false)
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.spjk1.aiWarn.page).find_noCode);
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.spjk1.aiWarn.page1).find_noCode);
const onchange = (page, pageSize) => {
const obj = {
pageNumber: page,
@ -26,12 +26,15 @@ const Page = () => {
search(searchParams)
}
useEffect(() => {
const params = {
if (searchVal) {
const params = {
search: {
...searchVal,
}
};
search(params)
}
}, [searchVal])
return (
<>