tsg-web/src/views/Home/homePanelsLayoutPage/index.js

import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router'
import { useDispatch, useSelector } from 'react-redux'
import { Collapse, DatePicker, Input } from 'antd';
import './index.less'
import Yujing from './item_yujing/index.js'
import Yuqing from './item_yuqing'
import ShuiKu from './item_shuiku'
import TuRangShangQing from './item_turangshangqing'
import GongShui from './item_gongshui'
import GongCheng from './item_gongcheng'
import JianCe from './item_jiance'
import ShuiZhi from './item_shuizhi'
import ShiPinDian from './item_shipindian'
import XunChaXunJian from './item_xunchaxunjian'

import GCShuiKu from './item_gongchengshuiku'
import DaBa from './item_daba'
import YiHongDao from './item_yihongdao'

import WeiXianQx from './item_weixianqu'
import AnZhiDian from './item_anzhidian'
import QSYDW from './item_qishiyedanwei'
import YHJMH from './item_yanhejuminhu'
import SetWxqStation from '../setMapStation/wxq'
import Bzt from '../../gcaqjc/bzt2'

import Tuli from '../TuLi/Tuli.js'
import Tuli2 from '../TuLi/Tuli2.js';
import Tuli3 from '../TuLi/Tuli3.js'
import Tuli4 from '../TuLi/Tuli4.js'
import Tuli5 from '../TuLi/Tuli5.js'
import SearchResultList from './SearchResultList';


import moment from 'moment';

const { Panel } = Collapse;
const { RangePicker } = DatePicker;
const { Search } = Input;
const items = [
  {
    key: '1', label: '综合监视', children: [
      { key: '11', label: '预警', labelRight: '预警', icon: 'yujing' },
      { key: '12', label: '雨情', labelRight: '统计', icon: 'yuqing' },
      { key: '13', label: '水库水情', labelRight: '实时水情', icon: 'shuikushuiqing' },
      { key: '19', label: '土壤墒情', labelRight: '土壤墒情', icon: 'turangshangqing' },
      { key: '15', label: '工程安全', labelRight: '工程安全监测', icon: 'gongchenganquan' },
      { key: '16', label: '监测设备状态', labelRight: '监测设备运行', icon: 'jianceshebeizhuangtai' },
      // { key:'17', label:'水质', labelRight:'水质', icon:'shuizhi' },
      { key: '18', label: '视频点', labelRight: '视频点', icon: 'shipindian' },
    ]
  },
  {
    key: '2', label: '巡查巡检', children: [
      { key: '21', label: '巡查巡检', labelRight: '工程巡检', icon: 'jianceshebeizhuangtai' },
      // { key:'22', label:'大坝', labelRight:'基本信息', icon:'daba' },
      // { key:'23', label:'溢洪道', labelRight:'基本信息', icon:'yihongdao' },
    ]
  },
  {
    key: '3', label: '洪水防御', children: [
      { key: '31', label: '危险区', labelRight: '危险区列表', icon: 'weixianqu' },
      { key: '32', label: '安置点', labelRight: '安置点列表', icon: 'anzhidian' },
      { key: '33', label: '企事业单位', labelRight: '企事业单位列表', icon: 'qishiyedanwei' },
      { key: '34', label: '沿河居民户', labelRight: '沿河居民户列表', icon: 'yanhejuminhu' },
    ]
  },
  {
    key: '4', label: '水资源调度', children: [
      { key: '41', label: '供水', labelRight: '今日供水实况', icon: 'gongshui' },
    ]
  },
  {
    key: '5', label: '水库工程', children: [
      { key: '51', label: '水库', labelRight: '基本信息', icon: 'shuiku' },
      { key: '52', label: '大坝', labelRight: '基本信息', icon: 'daba' },
      { key: '53', label: '溢洪道', labelRight: '基本信息', icon: 'yihongdao' },
    ]
  },

]

const HomePage = ({ showPanels }) => {

  const dispatch = useDispatch();
  const [checkedObj, setCheckedObj] = useState({})
  const [showTable, setShowTable] = useState(false)
  const [tms, setTms] = useState([
    moment(moment().add(-1, 'days').format('YYYY-MM-DD 08:00:00')),
    moment(moment().format('YYYY-MM-DD 08:00:00')),
  ])

  // 在 globalSearch 函数中添加搜索结果状态
  const [searchResults, setSearchResults] = useState([]);
  const globalSearch = (e) => {
    if (e && e.trim() !== '') {
      // 设置为空白状态
      setShowTable(true);
      // 创建一个新的空对象，只保留必要的属性用于显示
      setCheckedObj({
        key: 'search',
        label: '搜索结果',
        labelRight: `搜索：${e}`,
        icon: 'search'
      });

      // 模拟数据
      setTimeout(() => {
        const mockResults = [
          { id: '1', name: '檀树岗水情站', type: 'swst', lgtd: 114.75, lttd: 31.493 },
          { id: '2', name: '檀树岗雨情站', type: 'qxst', lgtd: 114.76, lttd: 31.495 },
          { id: '3', name: '檀树岗渗压站', type: 'shst', lgtd: 114.77, lttd: 31.497 },
          { id: '4', name: '檀树岗位移站', type: 'shst', lgtd: 114.78, lttd: 31.499 },
          { id: '5', name: '檀树岗渗流站', type: 'shst', lgtd: 114.79, lttd: 31.501 },
          { id: '6', name: '檀树岗土壤墒情站', type: 'stinfo', lgtd: 114.80, lttd: 31.503 },
          { id: '7', name: '檀树岗流量站', type: 'swst', lgtd: 114.81, lttd: 31.505 },
          { id: '8', name: '檀树岗视频站', type: 'picst', lgtd: 114.82, lttd: 31.507 },
          { id: '9', name: '檀树岗湾', type: 'danad', lgtd: 114.83, lttd: 31.509 },
          { id: '10', name: '檀树湾', type: 'placement', lgtd: 114.84, lttd: 31.511 },
          { id: '11', name: '七里坪镇檀树中学', type: 'bsnssinfo', lgtd: 114.85, lttd: 31.513 },
          { id: '12', name: '檀某某', type: 'flrvvlg', lgtd: 114.86, lttd: 31.515 },
          { id: '13', name: '檀树岗调度方案', type: 'reservoir', lgtd: 114.87, lttd: 31.517 },
          { id: '14', name: '檀树岗调度规则', type: 'reservoir', lgtd: 114.88, lttd: 31.519 },
          { id: '15', name: '檀树岗工程安全知识', type: 'daminfo', lgtd: 114.89, lttd: 31.521 },
        ];
        setSearchResults(mockResults);
      }, 500);
    }
  }

  const clickItem = (item) => {
    // 判断是否为知识库或安全监测站类型
    const isKnowledgeOrMonitoringStation = item.type === 'daminfo' || item.type === 'stinfo';
    // 如果有经纬度信息，则进行处理
    if (item.lgtd && item.lttd) {
      // 关闭所有已打开的弹窗
      dispatch.runtime.closeFeaturePopAll();
      // 关闭所有业务图层
      // dispatch.map.closeBusinessLayersEffect();
      // 根据类型确定弹窗类型
      let popType = item.type;

      // 对特定类型进行映射
      if (item.type === 'swst') popType = 'hdsw'; // 水文站映射到河道水位
      if (item.type === 'qxst') popType = 'drp';  // 气象站映射到雨情
      if (item.type === 'picst') popType = 'picst'; // 视频站
      // 然后根据类型打开对应图层
      if (item.type === 'swst' || item.type === 'hdsw') {
        dispatch.map.setLayerVisible({ HdswLayer: true });
      } else if (item.type === 'qxst' || item.type === 'drp') {
        dispatch.map.setLayerVisible({ RealDrpLayer: true });
      } else if (item.type === 'picst') {
        dispatch.map.setLayerVisible({ PicStLayer: true });
      }
      // 显示弹窗
      dispatch.runtime.setFeaturePop({
        type: popType,
        data: item,
        lgtd: item.lgtd,
        lttd: item.lttd,
        id: item.id
      });

      // 如果不是知识库或安全监测站类型，则进行地图定位
      if (!isKnowledgeOrMonitoringStation) {
        dispatch.runtime.setCameraTarget({
          center: [item.lgtd, item.lttd],
          zoom: 15,
          pitch: 60
        });
      }
    }
  }

  useEffect(() => {
    dispatch.runtime.closeFeaturePopAll()
    // 如果是搜索结果，不要关闭图层
    if (checkedObj.label === '搜索结果') {
      // 可以选择保持当前图层状态，或者显示某些默认图层
      return;
    }
    if (checkedObj.label === '水库' || checkedObj.label === '大坝' || checkedObj.label === '溢洪道' || checkedObj.label === '视频点') {
      dispatch.map.setLayerVisible({ PicStLayer: true })
    } else {
      dispatch.map.setLayerVisible({ PicStLayer: false })
    }

    if (checkedObj.label === '危险区' || checkedObj.label === '安置点' || checkedObj.label === '企事业单位' || checkedObj.label === '沿河居民户') {
      dispatch.map.setLayerVisible({ AZDLayer: true })
      dispatch.map.setLayerVisible({ QSYDWLayer: true })
      dispatch.map.setLayerVisible({ YHJMHLayer: true })
    } else {
      dispatch.map.setLayerVisible({ AZDLayer: false })
      dispatch.map.setLayerVisible({ QSYDWLayer: false })
      dispatch.map.setLayerVisible({ YHJMHLayer: false })
    }

    return () => {
      dispatch.runtime.closeFeaturePopAll()
      dispatch.map.setLayerVisible({ PicStLayer: false })
      dispatch.map.setLayerVisible({ AZDLayer: false })
      dispatch.map.setLayerVisible({ QSYDWLayer: false })
      dispatch.map.setLayerVisible({ YHJMHLayer: false })
    }
  }, [checkedObj])

  useEffect(() => {
    setCheckedObj({ key: '12', label: '雨情', labelRight: '统计', icon: 'yuqing' })
  }, [])


  return (
    <div className='homePage' style={{ display: !showPanels ? 'none' : 'block' }}>
      <div className='homePage_leftBox'>
        <Search placeholder="请输入" onSearch={globalSearch} enterButton />
        <div className='homePage_head' style={{ marginTop: 10 }}>综合展示</div>
        <Collapse ghost onChange={(a) => {
          dispatch.runtime.closeFeaturePopAll()
          if (a === undefined) {
            setCheckedObj({ key: '12', label: '雨情', labelRight: '统计', icon: 'yuqing' })
            setShowTable(false)
          } else if (a === '1') {
            setShowTable(true)
            dispatch.runtime.setHome()
            setCheckedObj({ key: '11', label: '预警', labelRight: '预警', icon: 'yujing' })
          } else if (a === '2') {
            setShowTable(true)
            // dispatch.runtime.setHome()
            setCheckedObj({ key: '21', label: '巡查巡检', labelRight: '工程巡检', icon: 'shuiku' })
          } else if (a === '3') {
            dispatch.runtime.setCameraTarget({
              center: [114.75, 31.493],
              zoom: 13.5,
              pitch: 60
            })
            setShowTable(true)
            setCheckedObj({ key: '31', label: '危险区', labelRight: '危险区列表', icon: 'weixianqu' })
          } else if (a === '4') {
            setCheckedObj({ key: '41', label: '供水', labelRight: '今日供水实况', icon: 'gongshui' })
          } else if (a === '5') {
            setCheckedObj({ key: '51', label: '水库', labelRight: '基本信息', icon: 'shuiku' })
            setShowTable(true)
          } else {
          }
        }} expandIconPosition="end" accordion={true} bordered={false}>
          {
            items.map((item, index) =>
              <Panel
                key={item.key}
                header={
                  <>
                    <div className='homePage_Panel'>
                      <div className='homePage_Panel_icon'></div>
                      {item.label}
                    </div>
                  </>
                }
              >
                {
                  item.children.map((item) =>
                    <dit className='homePage_Panel_item' style={(checkedObj.key === item.key && showTable) ? { color: '#409eff' } : {}} onClick={() => {
                      setCheckedObj(item)
                      setShowTable(true)
                    }}>
                      <img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/${item.icon}.png`} width="20" height="20" alt="" style={{ marginRight: '10px' }} />
                      {item.label}
                      {
                        (checkedObj.key === item.key && showTable) ?
                          <div style={{ flex: 1, display: 'flex', flexDirection: 'row-reverse' }}>
                            <div style={{ width: "3px", height: '40px', background: 'rgba(64, 158, 255, 1)' }}></div>
                          </div>
                          : null
                      }
                    </dit>
                  )
                }
              </Panel>
            )
          }
        </Collapse>
      </div>
      {
        (checkedObj.label === '预警' || checkedObj.label === '雨情') ?
          <div className='homePage_centerBox'><RangePicker showTime value={tms} disabled /></div>
          : null
      }
      {
        checkedObj.labelRight ?
          <div className='homePage_rightBox' style={{ display: !showPanels ? 'none' : 'block', padding: showTable ? '10px' : '0px' }}>
            {
              showTable ?
                <div className='homePage_head2'>
                  {
                    checkedObj.key != 'search' ?
                      <div className='homePage_head2_Bg'>
                        <img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{ margin: '0 10px' }} />
                        {checkedObj.labelRight}
                      </div> :
                      <div style={{ width: '100%', display: 'flex', alignItems: 'center', padding: "10px 0", borderBottom: '1px solid #02a7f0' }}>
                        <div style={{ width: 6, height: 20, background: '#02a7f0', marginRight: 10 }}></div>
                        <div>{checkedObj.labelRight}</div>
                      </div>
                  }

                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    {/* <img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/x.svg`} width="12" height="12" alt="" style={{margin:'0 10px'}} /> */}
                  </div>
                </div> : null
            }
            {checkedObj.label === '搜索结果' ? <div className="search-result-container" style={{
              marginTop: '10px', maxHeight: 'calc(100vh - 150px)', /* 设置一个合适的高度，可以根据实际情况调整 */
              display: 'flex',
              flexDirection: 'column'
            }}>
              <SearchResultList
                data={searchResults}
                title={checkedObj.labelRight}
                onItemClick={(item) => clickItem(item)}
              />
            </div> : null}
            {checkedObj.label === '预警' ? <><Yujing mySetTms={setTms} /><Yuqing mySetTms={setTms} show={false} /></> : null}
            {checkedObj.label === '雨情' ? <Yuqing mySetTms={setTms} show={showTable} /> : null}
            {checkedObj.label === '水库水情' ? <ShuiKu /> : null}
            {checkedObj.label === '土壤墒情' ? <TuRangShangQing /> : null}
            {checkedObj.label === '供水' ? <GongShui /> : null}
            {checkedObj.label === '工程安全' ? <GongCheng /> : null}
            {checkedObj.label === '监测设备状态' ? <JianCe /> : null}
            {/* { checkedObj.label === '水质' ? <ShuiZhi/>:null } */}
            {checkedObj.label === '视频点' ? <ShiPinDian /> : null}

            {checkedObj.label === '巡查巡检' ? <XunChaXunJian /> : null}

            {checkedObj.label === '水库' ? <GCShuiKu /> : null}
            {checkedObj.label === '大坝' ? <DaBa /> : null}
            {checkedObj.label === '溢洪道' ? <YiHongDao /> : null}

            {checkedObj.label === '危险区' ? <WeiXianQx /> : null}
            {checkedObj.label === '安置点' ? <AnZhiDian /> : null}
            {checkedObj.label === '企事业单位' ? <QSYDW /> : null}
            {checkedObj.label === '沿河居民户' ? <YHJMH /> : null}

            {checkedObj.label === '危险区' || checkedObj.label === '安置点' || checkedObj.label === '企事业单位' || checkedObj.label === '沿河居民户' ? <SetWxqStation /> : null}
          </div>
          : null
      }

      {
        checkedObj.label === '工程安全' ? <div className='homePage_bztBox'>
          <Bzt isHome={true} />
        </div> : null
      }

      <div className='homePage_leftBottomBox'>
        {checkedObj.label === '雨情' ? <Tuli /> : null}
        {checkedObj.label === '水库水情' ? <Tuli2 /> : null}
        {checkedObj.label === '供水' ? <Tuli3 /> : null}
        {(checkedObj.label === '水库' || checkedObj.label === '大坝' || checkedObj.label === '溢洪道' || checkedObj.label === '视频点') ? <Tuli4 /> : null}
        {(checkedObj.label === '危险区' || checkedObj.label === '安置点' || checkedObj.label === '企事业单位' || checkedObj.label === '沿河居民户') ? <Tuli5 /> : null}
      </div>

    </div>
  )
}

export default HomePage