633 lines
20 KiB
JavaScript
633 lines
20 KiB
JavaScript
import React, { useEffect, useMemo, useState } from 'react'
|
||
import { Modal, Tabs, Descriptions, Image, Divider, Table } from 'antd';
|
||
import {DoubleRightOutlined} from '@ant-design/icons'
|
||
import { Stage } from 'react-konva';
|
||
import Sider from './Sider';
|
||
import Topper1 from './Topper1';
|
||
import Topper2 from './Topper2';
|
||
import ZmColumns from './ZmColumns';
|
||
import { contextCoordinates } from './coordinates';
|
||
import { renAperture } from '../../../utils/utils';
|
||
import HFivePlayer from '../../../components/video1Plary'
|
||
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: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)',
|
||
}
|
||
|
||
const Page = () => {
|
||
|
||
const jcColumns = [
|
||
{
|
||
title: '项目',
|
||
key: 'name',
|
||
dataIndex:'name',
|
||
width: 150,
|
||
},
|
||
{
|
||
title: '实时数据',
|
||
key: 'realData',
|
||
dataIndex:'realData',
|
||
width: 150,
|
||
},
|
||
{
|
||
title: '数据采集时间',
|
||
dataIndex:'tm',
|
||
key: 'tm',
|
||
width: 150,
|
||
}
|
||
]
|
||
|
||
const zfColumns = [
|
||
{
|
||
title: '闸阀名称',
|
||
key: 'valveName',
|
||
dataIndex:'valveName',
|
||
width: 150,
|
||
},
|
||
{
|
||
title: '当前开关状态',
|
||
key: 'status',
|
||
dataIndex:'status',
|
||
width: 150,
|
||
},
|
||
{
|
||
title: '数据采集时间',
|
||
dataIndex:'tm',
|
||
key: 'tm',
|
||
width: 150,
|
||
}
|
||
]
|
||
|
||
const jlColumns = [
|
||
{
|
||
title: '闸阀名称',
|
||
key: 'valveName',
|
||
dataIndex:'valveName',
|
||
width: 150,
|
||
},
|
||
{
|
||
title: '操作内容',
|
||
dataIndex:'opContent',
|
||
key: 'opContent',
|
||
width: 150,
|
||
},
|
||
{
|
||
title: '操作结果',
|
||
dataIndex:'status',
|
||
key: 'status',
|
||
width: 150,
|
||
},
|
||
{
|
||
title: '操作时间',
|
||
dataIndex:'tm',
|
||
key: 'tm',
|
||
width: 150,
|
||
}
|
||
]
|
||
const [itemIndex, setItemIndex] = useState(null)
|
||
const [waterRatio, setWaterRatio] = useState(0)
|
||
const [data, setData] = useState({})
|
||
const [list, setList] = useState([])
|
||
const [damList, setDamList] = useState([])
|
||
const [videoList, setVideoList] = useState([])
|
||
const [videoArr, setvideoArr] = useState({})
|
||
const [open, setOpen] = useState(false)
|
||
|
||
|
||
const hole = 3;//zmobj.gaorNum;
|
||
const xunit = CanvasW / (2 + hole);
|
||
const pts = contextCoordinates(xunit, hole);
|
||
const eqpnoList = useMemo(() => damList ? new Array(damList.length).fill(0).map((o, index) => index) : [], [damList]);
|
||
|
||
useEffect(() => {
|
||
getList()
|
||
}, [])
|
||
|
||
const getList = async () => {
|
||
const { code, data } = await httppost2(apiurl.zmjk.video)
|
||
if (code !== 200) {
|
||
return
|
||
}
|
||
const obj = data[0] || {}
|
||
// getInformation(obj.gateCode)
|
||
// getDamData(obj.stcd)
|
||
// getVideo(obj.indexCode)
|
||
getVideoSrc(data[0]?.indexCode)
|
||
setData(obj)
|
||
}
|
||
|
||
const getInformation = async (gateCode) => {
|
||
const { code, data } = await httpget2(apiurl.zmjk.getInformation, { gateCode })
|
||
if (code !== 200) {
|
||
return
|
||
}
|
||
data.map((item) => {
|
||
if (item.type === 2) {
|
||
setWaterRatio(item.value / 5 || 0)
|
||
}
|
||
})
|
||
setList(data)
|
||
}
|
||
|
||
const getDamData = async (stcd) => {
|
||
const { code, data } = await httpget2(apiurl.zmjk.getDamData, { stcd })
|
||
if (code !== 200) {
|
||
return
|
||
}
|
||
const list = []
|
||
data.map((item) => {
|
||
list.push({
|
||
...item
|
||
})
|
||
})
|
||
setDamList(list)
|
||
}
|
||
|
||
const getVideo = async (valveCode) => {
|
||
const { code, data } = await httppost2(apiurl.zmjk.getVideo, { valveCode })
|
||
if (code !== 200) {
|
||
return
|
||
}
|
||
setVideoList(data)
|
||
getVideoSrc(data[0]?.indexCode)
|
||
}
|
||
|
||
const getVideoSrc = async (current) => {
|
||
const res = await httpget2(`${apiurl.gsxl.zfzl.videosrc}${current}`)//32023a7f27d8448fa10511f24e96acff
|
||
if (res.code == 200 && res.data?.length !== 0) {
|
||
setvideoArr({ src: res.data })
|
||
} else {
|
||
setvideoArr({})
|
||
}
|
||
}
|
||
|
||
const getNum = (a, b) => {
|
||
const aa = Number(a || 0)
|
||
const bb = Number(b || 0)
|
||
const num = Number(aa - bb).toFixed(3)
|
||
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:''
|
||
},
|
||
{
|
||
name: "水厂取水流量（m³/s）",
|
||
realData:'',
|
||
tm:''
|
||
}
|
||
]
|
||
// 闸阀历史操作
|
||
const [zfjkSwData, setzfjkSwData] = useState([])
|
||
const getZfjkSwData = async () => {
|
||
try {
|
||
const res = await httppost2(apiurl.gsxl.zfzl.swInfo,{stcd:"10852"})
|
||
if (res.code == 200) {
|
||
const {
|
||
rz,
|
||
todayRainNum,
|
||
outPowerNum,
|
||
todayRainNumTm,
|
||
outPowerNumTm,
|
||
tm,
|
||
q,
|
||
qtm
|
||
} = 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 if(item.name == '灌溉发电流量（m³/s）') {
|
||
item.realData = outPowerNum;
|
||
item.tm = outPowerNumTm;
|
||
} else {
|
||
item.realData = q;
|
||
item.tm = qtm;
|
||
}
|
||
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" }}>
|
||
<div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
|
||
{/* <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'>
|
||
<Divider type="vertical" style={{ width: 5, background: '#259def', height: 20 }} />
|
||
闸阀监控
|
||
</div>
|
||
<div className='sz_left_up_table'>
|
||
<Table
|
||
columns={zfColumns}
|
||
rowKey={(record) => record.tm}
|
||
dataSource={zfjkData}
|
||
pagination={false}
|
||
/>
|
||
</div>
|
||
<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)}>
|
||
<div style={{display:'flex',columnGap:10,cursor:'pointer',fontSize:14,color:'#000',fontWeight:400}}>
|
||
<span>查看更多信息</span>
|
||
<DoubleRightOutlined />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='sz_left_up_table'>
|
||
<Table
|
||
columns={jlColumns}
|
||
rowKey={(record) => record.tm}
|
||
dataSource={zfjkHistoryListData}
|
||
pagination={false}
|
||
/>
|
||
</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_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>
|
||
</div>
|
||
</div>
|
||
<div className='sg_zmjk_right_information'>
|
||
<div className='sg_zmjk_right_information_title'>
|
||
<Divider type="vertical" style={{ width: 5, background: '#259def', height: 20 }} />
|
||
监测数据</div>
|
||
<div style={{ width: '100%', marginTop: 10 }}>
|
||
<Table
|
||
columns={jcColumns}
|
||
rowKey={(record) => record.tm}
|
||
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>
|
||
</div>
|
||
</div>
|
||
<Modal
|
||
open={open}
|
||
width={1100}
|
||
title="闸门操作记录"
|
||
footer={null}
|
||
destroyOnClose
|
||
onCancel={() => {
|
||
setOpen(false)
|
||
}}
|
||
>
|
||
<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 || '-'} m³/s</Descriptions.Item>
|
||
<Descriptions.Item label="实达流量">{data?.stfl || '-'} m³/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> */}
|
||
</div>
|
||
</Modal>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default Page;
|