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

import React, { useEffect, useState,useMemo } from 'react'
import { useNavigate } from 'react-router';
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';

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 getVideoList = async () => {
      try {
          const res = await httppost2(apiurl.home.videoList,{valveCode:"HP0024208020000063"})
          setVideoList(res.data.map(item => ({label:item.name,value:item.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:res.data})
        }else{
          setvideoArr({})
        }
      }

  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 >
                  {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'>
            <Select
              placeholder="请选择视频"
              options={videoList}
              allowClear
            />
            视频监控
          </div>
          <div className='project-content'>
          
        </div>
        </div>
      </div>
    </div>
  )
}