ykzz-web/src/views/Home/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 Page = () => {
  const [waterRatio,setWaterRatio] = useState(0)
  const [data,setData] = useState({})
  const [damList, setDamList ] = useState([])
  const [list, setList ] = useState([])

  const hole = 10;//zmobj.gaorNum;
  const xunit = CanvasW / (hole +2);
  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)
    setData(obj)
  }

  

  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 + 200
      })
    })
    setDamList([...list,...list, ...list,list[0]])
  }

  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)
  }

  return (
    <>
      <div className='sg_zmjk' style={{paddingRight:"0",paddingBottom:"0"}}>
        <div  style={{width:"100%"}}>
          <div className="ant-card-body">
            <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: 53 }}></div>
                {
                  eqpnoList.map(o => (
                    <div key={o}
                      onClick={() => {}}
                      className='o' style={{ flexGrow: 1, width: 40, 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: 53 }}></div>
              </div>
              <div style={{ position: 'absolute', left: 0, bottom: 130, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}>
                <div key="sider1" style={{ flexGrow: 1, width: 230 }}></div>
                {
                  eqpnoList.map(o => (
                    <div key={o} className='o' style={{ flexGrow: 1, width: 190, display: 'flex', justifyContent: 'center' }}>
                      <div
                        onClick={() => {}}
                        style={{ width: 70, height: 32, border: '1px solid #4c5dce', backgroundColor: '#315da2', borderRadius: 4, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 18, cursor: 'pointer' }}
                      >
                        {renAperture(damList[o]?.realAperture)}
                      </div>
                    </div>
                  ))
                }
                <div key="sider2" style={{ flexGrow: 1, width: 230 }}></div>
              </div>
            </dvi>
          </div>
        </div>
      </div>
    </>
  );
}

export default Page;