387 lines
13 KiB
JavaScript
387 lines
13 KiB
JavaScript
import React, { useEffect, useMemo, useState } from 'react'
|
||
import { Modal, Tabs, Descriptions, Image } from 'antd';
|
||
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 url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||
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 [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.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}${current}`)//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' onClick={()=>setOpen(true)}>查看更多信息</div>
|
||
</dvi>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Modal
|
||
open={open}
|
||
width={1000}
|
||
title=""
|
||
footer={null}
|
||
onCancel={() => {
|
||
setOpen(false)
|
||
}}
|
||
>
|
||
<div style={{height:'600px'}}>
|
||
<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;
|