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

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;