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

import React, { useEffect, useState, useRef } 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 SetDrpStation from '../setMapStation/drp'
import Bzt from '../../gcaqjc/bzt2'
import ShenLiu from '../MapCtrl/Pops/ShenLiu';
import ShenYa from '../MapCtrl/Pops/ShenYa';
import WeiYi from '../MapCtrl/Pops/WeiYi';
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 FillStyle from "ol/style/Fill";
import GeoJSONFormat from 'ol/format/GeoJSON';
import { Vector as VectorSource } from "ol/source";
import StrokeStyle from "ol/style/Stroke";
import { geometryCenter } from '../../../utils/tools'
import Text from "ol/style/Text";

import Feature from "ol/Feature";
import VectorLayer from "ol/layer/Vector";
import Style from "ol/style/Style";
import moment from 'moment';
import { httppost2 } from "../../../utils/request";
import Circle from 'ol/style/Circle';
import Stroke from "ol/style/Stroke";
import Point from 'ol/geom/Point.js';
import { transform } from 'ol/proj';

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, mode }) => {
  // 添加搜索输入框的引用
  const searchInputRef = useRef(null);
  const dispatch = useDispatch();
  const [checkedObj, setCheckedObj] = useState({})
  const [searchVal, setSearchVal] = useState()
  const [showTable, setShowTable] = useState(false)
  const [wxqData, setWxqData] = useState({})
  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')),
  ])
  let mapObj = useSelector(s => s.map.map)

  // 在 globalSearch 函数中添加搜索结果状态
  const [searchResults, setSearchResults] = useState([]);
  const globalSearch = async (e) => {
    if (e && e.trim() !== '') {
      // 设置为空白状态
      setShowTable(true);
      setSearchVal(e)
      // 创建一个新的空对象，只保留必要的属性用于显示
      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) => {
    const id = record?.unionCode
    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: <div style={{ width: '100%', padding: '16px 24px', color: '#3B4859', borderBottom: '1px solid #f0f0f0', position: "absolute", top: 0, left: 0 }}>
          <div style={{ fontSize: 16, fontWeight: 'bold' }}>{record.name}详情</div>
        </div>,
        width: 1000,
        content: (
          <>
            <div style={{ marginTop: 45 }}></div>
            <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 renderGCaqModal = (record) => {
    const row = { ...record, stationCode: record.name }
    let popType = '';

    if (record.type == '渗压站') {
      popType = 'shenya';
    } else if (record.type == '渗流站') {
      popType = 'shenliu';
    } else if (record.type == '位移站') {
      popType = 'weiyi';
    }

    dispatch.runtime.setFeaturePop({
      type: popType,
      data: row,
      lgtd: record.lgtd,
      lttd: record.lttd,
      id: record.id
    });
    return;
  }

  const clickItem = (item) => {
    // 业务规则库
    if (item.type == '业务规则库' || item.type == '调度方案库' || item.type == '工程安全知识库') {
      regularOpen(item)
      return; // 添加return避免继续执行
    }

    // 工程安全监测点
    if (item.type == '渗压站' || item.type == '渗流站' || item.type == '位移站') {
      renderGCaqModal(item)
      return; // 添加return避免继续执行
    }

    // 关闭所有已打开的弹窗
    dispatch.runtime.closeFeaturePopAll();
    // 先关闭所有图层
    dispatch.map.setLayerVisible({
      WxqLayer: false,
      HdswLayer: false,
      RealDrpLayer: false,
      PicStLayer: false,
      ShuiKuLayer: false,
      TuRangLayer: false,
      GongShuiLayer: false,
      AZDLayer: false,
      QSYDWLayer: false,
      YHJMHLayer: false
    });

    // 根据类型确定弹窗类型和图层
    let popType = item.type;
    let layerToShow = {};

    // 对特定类型进行映射和图层设置
    switch (item.type) {
      // case '水文站':
      //   popType = 'hdsw';
      //   layerToShow = { HdswLayer: true };
      //   break;
      // case '雨量站':
      //   popType = 'drp';
      //   layerToShow = { RealDrpLayer: true };
      //   break;
      case '视频站':
        popType = 'tuxiang';
        layerToShow = { PicStLayer: true };
        break;
      case '水位站':
        popType = 'shuiku';
        layerToShow = { ShuiKuLayer: true };
        break;
      case '土壤墒情站':
        popType = 'turangshangqing';
        layerToShow = { TuRangLayer: true };
        break;
      case '流量站':
        popType = 'gongshui';
        layerToShow = { GongShuiLayer: true };
        break;

      case '安置点':
        popType = 'anzhidian';
        layerToShow = { AZDLayer: true };
        break;
      case '企事业单位':
        popType = 'qishiyedanwei';
        layerToShow = { QSYDWLayer: true };
        break;
      case '沿河居民点':
        popType = 'yanhejuminhu';
        layerToShow = { YHJMHLayer: true };
        break;
      default:
        // 默认不设置特定图层
        break;
    }

    // 设置图层可见性
    if (Object.keys(layerToShow).length > 0) {
      dispatch.map.setLayerVisible(layerToShow);
    }
    const record = JSON.parse(item.jsonStr);

    if (item.type == '危险区') {
      dispatch.map.setLayerVisible({ WxqLayer: true })
      const wxq = JSON.parse(sessionStorage.getItem('wxq'))?.[record?.adcd] || ''
      if (!wxq) {
        message.error('暂无经纬度数据')
        return
      }
      const data = wxq.properties
      const center = item.type == '危险区' ? geometryCenter(wxq.geometry) :
        [record?.lgtd, record?.lttd];


      dispatch.runtime.setCameraTarget({
        center: [center[0], center[1]],
        zoom: 18,
        pitch: 60
      })
      dispatch.runtime.setFeaturePop({
        id: data.PID,
        data: { ...data },
        type: 'wxq',
        lgtd: center[0],
        lttd: center[1],
      })
      return;
    }

    if (item.type == '安置点' || item.type == '企事业单位' || item.type == '沿河居民点') {
      // 显示弹窗
      dispatch.runtime.setFeaturePop({
        type: popType,
        data: record,
        lgtd: item.lgtd,
        lttd: item.lttd,
        id: record.id
      });
    }

    // 雨量站
    if (item.type == '雨量站') {
      // 创建近一小时的时间范围
      const tms = [
        moment().add(-1, 'hours').format('YYYY-MM-DD HH:mm:ss'),
        moment().format('YYYY-MM-DD HH:mm:ss')
      ];

      // 直接调用httppost2获取数据并添加图层
      const fetchAndAddLayer = async () => {
        try {
          const { data, code, msg } = await httppost2(apiurl.home.yq, {
            "stm": tms[0],
            "etm": tms[1]
          });

          if (code !== 200) {
            message.error(msg || '请求失败');
            return;
          }

          const list = data.map((i) => ({
            id: i.stcd,
            ...i,
            drp: i.drp
          }));

          dispatch.map.setLayerVisible({ RealDrpLayer: true })
          dispatch.runtime.setRainDrpData(list||[]);
          // dispatch.runtime.setFeaturePop({
          //   id: record.stcd,
          //   data: { ...record, myParams: tms },
          //   type: 'drp',
          //   lgtd: record.lgtd,
          //   lttd: record.lttd,
          // })

        } catch (error) {
          console.error('获取雨量站数据失败', error);
        }
      };

      fetchAndAddLayer();
    }


    // 设置地图视角
    dispatch.runtime.setCameraTarget({
      center: [item.lgtd, item.lttd],
      zoom: 18,
      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({
        WxqLayer: true,
        AZDLayer: true,
        QSYDWLayer: true,
        YHJMHLayer: true,
      });
    } else {
      dispatch.map.setLayerVisible({
        WxqLayer: false,
        AZDLayer: false,
        QSYDWLayer: false,
        YHJMHLayer: false,
      });
    }

    return () => {
      dispatch.runtime.closeFeaturePopAll()
      dispatch.map.setLayerVisible({
        WxqLayer: false,
        PicStLayer: false,
        AZDLayer: false,
        QSYDWLayer: false,
        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
          ref={searchInputRef}
          value={searchVal}
          onChange={(e) => setSearchVal(e.target.value)}
        />
        <div className='homePage_head' style={{ marginTop: 10 }}>综合展示</div>
        <Collapse ghost onChange={(a) => {
          // 清空搜索输入框
          setSearchVal('')
          dispatch.runtime.closeFeaturePopAll()
          dispatch.map.setLayerVisible({ ShuiKuLayer: false })
          dispatch.runtime.setHome()
          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') {
            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) =>
                    <div className='homePage_Panel_item' style={(checkedObj.key === item.key && showTable) ? { color: '#409eff' } : {}} onClick={() => {
                      // 清空搜索输入框
                      setSearchVal('')
                      setCheckedObj(item)
                      setShowTable(true)
                      dispatch.map.setLayerVisible({ ShuiKuLayer: false })
                      dispatch.runtime.setHome()
                    }}>
                      <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
                      }
                    </div>
                  )
                }
              </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 mode={mode}/> : 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 === '搜索结果' ? <SetDrpStation tms={tms} setTableData={() => { }} /> : 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