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, Modal,message } 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 { httpget } from '../../../utils/request';
import apiurl from '../../../service/apiurl';

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 = async (e) => {
    if (e && e.trim() !== '') {
      // 设置为空白状态
      setShowTable(true);
      // 创建一个新的空对象，只保留必要的属性用于显示
      setCheckedObj({
        key: 'search',
        label: '搜索结果',
        labelRight: `搜索：${e}`,
        icon: 'search'
      });
      const res = await httpget(apiurl.home.globalSearch, { name: e })
      if (res.code == 200) {
        setSearchResults(res.data);
      }
    }
  }
  const importMap = {
    '业务规则库': () => import('../../sz/ywgz/form'),
    '调度方案库': () => import('../../sz/ddfa/form'),
    '工程安全知识库': () => import('../../sz/khzbgl/form')
  };
  // 业务规则库弹框
  const regularOpen = async (record) => {
    debugger
    const id = record?.id.split('-')[0]
    const com = record.type == '业务规则库' ?
    { url: apiurl.zsk.ywgz.getOne } :
    record.type == '调度方案库' ?
      { url: apiurl.zsk.ddfa.getOne } :
      { url: apiurl.zsk.gcaq.getOne };
    const res = await httpget(com.url + id)
    // 导入业务规则库的Modal组件
     // 使用映射函数进行导入
  try {
    const ModalForm = await importMap[record.type]();
    
    Modal.destroyAll(); // 先销毁可能存在的其他Modal
    const modal = Modal.confirm({
      title: `${record.name}详情`,
      width: 1000,
      content: (
        <ModalForm.default
          mode="view"
          record={res}
        />
      ),
      icon: null,
      okButtonProps: { style: { display: 'none' } },
      cancelButtonProps: { style: { display: 'none' } },
      closable: true
    });
  } catch (error) {
    console.error('模块导入失败:', error);
    message.error(`无法加载${record.type}详情，请稍后再试`);
  }
    return;
  }

  const clickItem = (item) => {

    //业务规则库
    if (item.type == '业务规则库' || item.type == '调度方案库' || item.type == '工程安全知识库') {
      regularOpen(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