tsg-web/src/views/rcgl/zmjk/index.js

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;