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 { Empty } from 'antd';
import { httpget2, httppost2 } from '../../utils/request';
import apiurl from '../../service/apiurl';
import { useDispatch, useSelector } from 'react-redux';
import HFivePlayer from '../../components/video1Plary';
import moment from 'moment';
import {loadMenu,loadRole} from '../../models/auth/_'
const MenuTitleCard = ({ key, title }) => {
  return (
    <div className='menuItem_style' key={key} title={title}>
      {title}
    </div>
  )
}
export default function Home() {
  const menu = useSelector((state) => state.auth.menu);
  const [title, setTitle] = useState([])
  // const title = menu.map(item => ({ title: item.menuName, key: item.path || item.redirect }))
  const jcdType = {
    0: "闸后流量",
    2: '闸前水位',
    3:'闸后水位'
  }
  const types1 = {
    0: "闸后流量(m³/s)",
    1: '闸前水位(m)',
    2: '闸后水位(m)',
    3: '雨量(mm)',
  }
  const runData = [
    {
      name: '闸后流量(m³/s)',
      value: '',
      time: ''
    },
    {
      name: '闸前水位(m)',
      value: '',
      time: ''
    },
    {
      name: '闸后流量(m)',
      value: '',
      time: ''
    },
    {
      name: '雨量(mm)',
      value: '',
      time: ''
    }
  ]
  const [RealData, setRealData] = useState(runData)
  // 实时数据
  const getRealData = async () => {
    try {
      const res = await httppost2(apiurl.jcsj.jcsj.realData)
      if (res.code == 200) {
      const uptData = res.data.map(item => ({
          ...item,
          name: types1[item.type],
          value:item.val,
          time:item.tm
      }))
        setRealData(uptData)
        getHistoryData(uptData[0])
      }
    } catch (error) {
      console.log(error);
    }
  }

  const [historyList, setHistoryList] = useState([])
  
    const pxOptions = useMemo(() => {
      if (historyList) {
        return options(historyList)
      } else {
        return options([])
      }
    }, [historyList])

  const getHistoryData = async (val) => {
      const start  = moment().subtract(7,'days').format('YYYY-MM-DD 00:00:00')
      const end = moment().format('YYYY-MM-DD 23:59:59')
      let params = {
        pageSo: {
          pageSize: 999,
          pageNumber:1
          },
          type:val.type,
          dateTimeRangeSo:{
            start,
            end
          }
        }
        try {
          const res = await httppost2(apiurl.jcsj.jcsj.historyList,params)
          if (res.code == 200) {
            setHistoryList(res.data)
          }
        } catch (error) {
          console.log(error);
        }
      }
  //安全监测数据 
  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([])
  const getLogData = async () => {
    const start  = moment().subtract(7,'days').format('YYYY-MM-DD 00:00:00')
    const end = moment().format('YYYY-MM-DD 23:59:59')
    let params = {
      pageSo: {
        pageSize: 999,
        pageNumber:1
        },
        dateTimeRangeSo:{
          start,
          end
        }
      }
      try {
        const res = await httppost2(apiurl.gcyx.czrz.page, params)
        if (res.code == 200) {
          setOperateData(res.data?.records)
        }
      } catch (error) {
        console.log(error);
      }
    }

  //报警信息
  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 getPoliceData = async (val) => {
    const start  = moment().subtract(7,'days').format('YYYY-MM-DD 00:00:00')
    const end = moment().format('YYYY-MM-DD 23:59:59')
    let params = {
      pageSo: {
        pageSize: 999,
        pageNumber:1
        },
        dateTimeRangeSo:{
          start,
          end
        }
      }
      try {
        const res = await httppost2(apiurl.jcsj.bjgl.bjjl.page,params)
        if (res.code == 200) {
          setPoliceData(res.data.records)
        }
      } catch (error) {
        console.log(error);
      }
    }
  
  
  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 getMenu = async () => {
    try {
      const data = await loadMenu();
      setTitle(data.map(item => ({ title: item.menuName, key: item.path || item.redirect })))
    } catch (error) {
      console.log(error);
    }
  }
  const [activeOne, setActiveOne] = useState(0)
  useEffect(() => {
    autofit.init({
      dh: 1080,
      dw: 1920,
      el: '#daping-body',
      resize: true
    })
    getVideoList()
    getRealData()
    getLogData()
    getPoliceData()
    getMenu()
  }, [])

  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/them.jpg`}></img>
            盐卡闸位于湖北省荆州市经济开发区，荆江大堤左岸桩 745+614 处，位于观音寺闸上游 5km 处。盐卡闸主要工程任务为引水灌溉，解决四湖中下区农
            业灌溉和洪湖生态保障不足的问题。利用盐卡泵站进水渠，反向从长江引水，引水灌溉设计流量55m³/s，水闸级别为 1 级，次要建筑物级别为 3 级。
          </div>
        </div>
        {/* 运行监测数据 */}
        <div className='runWatch'>
          <div className='project-title'>运行监测数据</div>
          <div className='project-content'>
            {RealData.map((item, i) => (
              <div className={clsx({ 'run_list': true, active: activeOne == i })} key={item.name} onClick={() => { setActiveOne(i); getHistoryData(item)}}>
                <span style={{ width: 94 }}>{item.name}</span>
                <span>{item.value}</span>
                <span>{item.time}</span>
              </div>
            ))}
            <div className='run_chart'>
              {historyList.length > 0 ?
                <ReactEcharts
                  option={pxOptions || {}}
                  style={{ width: "100%", height: '100%' }}
                  notMerge={true}
                />
                :<Empty style={{marginTop:20}}/>
              }
            </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.length >0 ? 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>
                  )):<Empty  />
                }
                </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,overflow: operateData.length > 6 ? 'scroll' : 'hidden'  }}>
                {operateData.length > 0 ?operateData.map((item, i) => (
                  <tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
                    <td>{item.gatePoreCode}</td>
                    <td>{item.opContent}</td>
                    <td>{item.createUserName}</td>
                    <td style={{ width: 137 }}>{item.createTime}</td>
                  </tr>
                )):<Empty  />
              }
              </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.length > 0 ? policeData.map((item, i) => (
                  <tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
                    <td style={{ width: 58 }}>{jcdType[item.type]}</td>
                    <td>{item.val}</td>
                    <td style={{ width: 58 }}>{item.lowerLimit}</td>
                    <td style={{ width: 58 }}>{item.upperLimit}</td>
                    <td style={{ width: 129 }}>{item.warnTime}</td>
                  </tr>
                )):<Empty  />
                }
              </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>
  )
}