351 lines
11 KiB
JavaScript
351 lines
11 KiB
JavaScript
|
import React, { useEffect, useMemo, useState } from 'react'
|
||
|
|
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';
|
||
|
|
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 [itemIndex,setItemIndex] = useState(null)
|
||
|
|
const [data,setData] = useState({})
|
||
|
|
const [list, setList ] = useState([])
|
||
|
|
const [damList, setDamList ] = useState([])
|
||
|
|
const [videoList, setVideoList ] = useState([])
|
||
|
|
const [videoArr, setvideoArr] = useState({})
|
||
|
|
|
||
|
|
|
||
|
|
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.getList)
|
||
|
|
if(code!==200){
|
||
|
|
return
|
||
|
|
}
|
||
|
|
const obj = data[0]||{}
|
||
|
|
getInformation(obj.gateCode)
|
||
|
|
getDamData(obj.stcd)
|
||
|
|
getVideo(obj.gateCode)
|
||
|
|
setData(obj)
|
||
|
|
}
|
||
|
|
|
||
|
|
const getInformation = async(gateCode)=>{
|
||
|
|
const {code, data} = await httpget2(apiurl.zmjk.getInformation,{gateCode})
|
||
|
|
if(code!==200){
|
||
|
|
return
|
||
|
|
}
|
||
|
|
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
|
||
|
|
// ,realAperture:item.realAperture*1000
|
||
|
|
})
|
||
|
|
})
|
||
|
|
setDamList(list)
|
||
|
|
}
|
||
|
|
|
||
|
|
const getVideo = async(valveCode)=>{
|
||
|
|
const {code, data} = await httppost2(apiurl.zmjk.getVideo,{valveCode})
|
||
|
|
if(code!==200){
|
||
|
|
return
|
||
|
|
}
|
||
|
|
setVideoList(data)
|
||
|
|
}
|
||
|
|
|
||
|
|
const getVideoSrc = async (current) => {
|
||
|
|
const res = await httpget2(`${apiurl.gsxl.zfzl.videosrc}${'32023a7f27d8448fa10511f24e96acff'}`)
|
||
|
|
if (res.code == 200 && res.data?.length !== 0) {
|
||
|
|
setvideoArr({src:res.data})
|
||
|
|
}else{
|
||
|
|
setvideoArr({})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className='content-root clearFloat xybm sg_zmjk' style={{paddingRight:"0",paddingBottom:"0"}}>
|
||
|
|
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
|
||
|
|
{/* <Card className='nonebox'>
|
||
|
|
</Card> */}
|
||
|
|
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
|
||
|
|
<dvi 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>
|
||
|
|
</dvi>
|
||
|
|
<dvi className="sg_zmjk_right">
|
||
|
|
<div className='sg_zmjk_right_video'>
|
||
|
|
<div className='sg_zmjk_right_video_title'>视频监控</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'>监测数据</div>
|
||
|
|
<div style={{height:'144px',overflowY:'auto',padding:'20px'}}>
|
||
|
|
{
|
||
|
|
list?.map((item)=>{
|
||
|
|
return (
|
||
|
|
<div className='sg_zmjk_right_information_content'>
|
||
|
|
<div>{myType[item.type]}</div>
|
||
|
|
<div>112.079 / 1.279</div>
|
||
|
|
<div>07-10 12:09:00</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className='sg_zmjk_right_more'>》》查看更多信息</div>
|
||
|
|
</dvi>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Page;
|