ykzz-web/src/views/Home/index.js

import React, { useEffect, useState, useMemo } from 'react'
import { useNavigate } from 'react-router';
import {
  RightCircleFilled, LeftCircleFilled
} from '@ant-design/icons';
import autofit from 'autofit.js'
import Zmjk from "./zmjk"
import './index.less'
import ReactEcharts from 'echarts-for-react';
import options from './options'
import clsx from 'clsx';
import { Select } from 'antd';
import { httpget2, httppost2 } from '../../utils/request';
import apiurl from '../../service/apiurl';
import HFivePlayer from '../../components/video1Plary';
const MenuTitleCard = ({ key, title }) => {
  return (
    <div className='menuItem_style' key={key} title={title}>
      {title}
    </div>
  )
}
export default function Home() {
  const title = [
    {
      title: '首页',
      key: '/home',
    },
    {
      title: '监测数据',
      key: '/mgr/jcsj/jcsj',
    }, {
      title: '安全监测',
      key: '/mgr/aqjc',
    },
    {
      title: '系统管理',
      key: '/mgr/xtgl/yhxx',
    },
    {
      title: '工程运行',
      key: '/mgr/gcyx/xxcx/jbqk',
    },
    {
      title: '设备维护',
      key: '/mgr/sbwh/wxyhgl/wxfabz',
    },

  ]

  const runData = [
    {
      name: '闸后流量(m³/s)',
      value: 4300,
      time: '2024-08-15 15:00:00'
    },
    {
      name: '闸前水位(m)',
      value: 9.82,
      time: '2024-08-15 15:00:00'
    },
    {
      name: '闸后流量(m)',
      value: 8.87,
      time: '2024-08-15 15:00:00'
    },
    {
      name: '雨量(mm)',
      value: 10.5,
      time: '2024-08-15 15:00:00'
    }
  ]

  const pxOptions = useMemo(() => {
    // if (staData) {
    //   return options(staData)
    // } else {
    //   return options({})
    // }
    return options({})
  }, [])
  //安全监测数据 
  const [safeData, setSafeData] = useState(Array(5).fill(0).map((item, i) => ({ id: i, cd: "SY01", dm: '1#断面', kpa: 2749, time: '2024-08-15 15:00:00' })))
  //操作日志 
  const [operateData, setOperateData] = useState(Array(5).fill(0).map((item, i) => ({ id: i, cd: '1#闸孔', content: "设定闸门开度为0.10m", name: '刘天明', kpa: 2749, time: '2024-08-15 15:00:00' })))
  //报警信息
  const [policeData, setPoliceData] = useState(Array(5).fill(0).map((item, i) => ({ id: i, zd: '闸前水位', watchvalue: "10.23", limit: 0, max: 10, time: '2024-08-15 15:00:00' })))
  const navigate = useNavigate();
  const jumpMenu = (item) => {
    navigate(item.key)
  }
  const [videoList, setVideoList] = useState([])
  const [videoArr, setvideoArr] = useState({})
  const [index, setIndex] = useState(0)

  // 获取视频列表
  const getVideoList = async () => {
    try {
      const res = await httppost2(apiurl.home.videoList, { valveCode: "HP0024208020000063" })
      setVideoList(res.data)
      getVideoSrc(res.data[0].indexCode)
    } catch (error) {
      console.log(error);
    }
  }
  // 获取视频流
  const getVideoSrc = async (current) => {
    const res = await httpget2(`${apiurl.home.videosrc}${current}`)
    if (res.code == 200 && res.data?.length !== 0) {
      // setvideoArr({src:'ws://223.76.234.232:559/openUrl/7WKpEbu'})
      setvideoArr({ src: res.data })
    } else {
      setvideoArr({})
    }
  }


  const delClick = () => {
    let idx = index - 1
    setIndex(idx)
    getVideoSrc(videoList[idx].indexCode)
  }
  const addClick = () => {
    let idx = index + 1
    setIndex(idx)
    getVideoSrc(videoList[idx].indexCode)
  }
  const [activeOne, setActiveOne] = useState(0)
  useEffect(() => {
    autofit.init({
      dh: 1080,
      dw: 1920,
      el: '#daping-body',
      resize: true
    })
    getVideoList()
  }, [])

  return (
    <div className='daping-body' id='daping-body'>
      <div className='topMenu'>
        <div className='title'></div>
        <div className='title_name'></div>
        {title.map((item, i) => (
          <div key={item.key} className={'styles' + i} onClick={() => jumpMenu(item)} style={{ cursor: 'pointer' }}>
            <MenuTitleCard title={item.title} />
          </div>
        ))}
      </div>
      <div className='content-box'>
        <Zmjk />
      </div>
      <div className='content-left'>
        {/* 工程简介 */}
        <div className='project-introduce'>
          <div className='project-title'>工程简介</div>
          <div className='project-content'>
            <img alt='' className='content-img' src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/shuizhi2.png`}></img>
            盐卡闸位于湖北省荆州市经济开发区，荆江大堤左岸桩 745+614 处，位于观音寺闸上游 5km 处。盐卡闸主要工程任务为引水灌溉，解决四湖中下区农
            业灌溉和洪湖生态保障不足的问题。利用盐卡泵站进水渠，反向从长江引水，引水灌溉设计流量55m³/s，水闸级别为 1 级，次要建筑物级别为 3 级。
          </div>
        </div>
        {/* 运行监测数据 */}
        <div className='runWatch'>
          <div className='project-title'>运行监测数据</div>
          <div className='project-content'>
            {runData.map((item, i) => (
              <div className={clsx({ 'run_list': true, active: activeOne == i })} key={item.name} onClick={() => setActiveOne(i)}>
                <span style={{ width: 94 }}>{item.name}</span>
                <span>{item.value}</span>
                <span>{item.time}</span>
              </div>
            ))}
            <div className='run_chart'>
              <ReactEcharts
                option={pxOptions || {}}
                style={{ width: "100%", height: '100%' }}
                notMerge={true}
              />
            </div>
          </div>
        </div>
        {/* 安全监测数据 */}
        <div className='safeWatch'>
          <div className='project-introduce'>
            <div className='project-title'>安全监测数据</div>
            <div className='project-content'>
              <table style={{ width: '100%' }}>
                <thead>
                  <tr style={{ background: '#455a87', height: 35, fontSize: 14 }}>
                    <th>测点编号</th>
                    <th>监测断面</th>
                    <th>渗压(KPa)</th>
                    <th style={{ width: 137 }}>监测时间</th>
                  </tr>
                </thead>
                <tbody style={{ overflowY: safeData.length > 4 ? 'scroll' : 'hidden' }}>
                  {safeData.map((item, i) => (
                    <tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
                      <td>{item.cd}</td>
                      <td>{item.dm}</td>
                      <td>{item.kpa}</td>
                      <td style={{ width: 137 }}>{item.time}</td>
                    </tr>
                  ))}
                </tbody>

              </table>
            </div>
          </div>
        </div>
      </div>
      <div className='content-right'>
        {/* 操作日志 */}
        <div className='operate-log'>
          <div className='project-title'>操作日志</div>
          <div className='project-content'>
            <table style={{ width: '100%' }}>
              <thead>
                <tr style={{ background: '#455a87', height: 35, fontSize: 14 }}>
                  <th>闸孔编号</th>
                  <th>操作内容</th>
                  <th>操作人员</th>
                  <th style={{ width: 137 }}>操作时间</th>
                </tr>
              </thead>
              <tbody style={{ height: 170 }}>
                {operateData.map((item, i) => (
                  <tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
                    <td>{item.cd}</td>
                    <td>{item.content}</td>
                    <td>{item.name}</td>
                    <td style={{ width: 137 }}>{item.time}</td>
                  </tr>
                ))}
              </tbody>

            </table>
          </div>
        </div>
        {/* 报警信息 */}
        <div className='operate-log'>
          <div className='project-title'>报警信息</div>
          <div className='project-content'>
            <table style={{ width: '100%' }}>
              <thead>
                <tr style={{ background: '#455a87', height: 35, fontSize: 14 }}>
                  <th>监测点</th>
                  <th>监测值</th>
                  <th style={{ width: 58 }}>阈值下限</th>
                  <th style={{ width: 60 }}>阈值上限</th>
                  <th style={{ width: 129 }}>报警时间</th>
                </tr>
              </thead>
              <tbody style={{ height: 170, overflow: policeData.length > 6 ? 'scroll' : 'hidden' }} >
                {policeData.map((item, i) => (
                  <tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
                    <td style={{ width: 58 }}>{item.zd}</td>
                    <td>{item.watchvalue}</td>
                    <td style={{ width: 58 }}>{item.limit}</td>
                    <td style={{ width: 58 }}>{item.max}</td>
                    <td style={{ width: 129 }}>{item.time}</td>
                  </tr>
                ))}
              </tbody>

            </table>
          </div>
        </div>
        {/* 视频监控 */}
        <div className='operate-log'>
          <div className='project-title'>
            视频监控
          </div>
          <div className='project-content video-style'>
            {index !== 0 && <LeftCircleFilled className="leftIcon" onClick={() => delClick()} />}
            <HFivePlayer wsUrl={videoArr} playerID={'111'} />
            {index !== videoList.length - 1 && <RightCircleFilled className="rightIcon" onClick={() => addClick()} />}
          </div>
        </div>
      </div>
    </div>
  )
}