zcloud-gbs-bi-react/src/pages/Container/Map/index.js

import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { useFullscreen, useMount } from "ahooks";
import { message, Spin } from "antd";
import autoFit from "autofit.js";
import { useMemo, useReducer, useRef, useState } from "react";
import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
import { NS_BI_MARK, NS_BI_MARK_INFO, NS_BI_STATISTICS } from "~/enumerate/namespace";
import BottomUtils from "./components/BottomUtils";
import CenterUtils from "./components/CenterUtils";
import Content from "./components/Content";
import CustomModal from "./components/Content/modal";
import Header from "./components/Header";
import RightUtils from "./components/RightUtils";
import styles from "./index.module.less";
import { Context, initialMapState, MAP_ACTION, mapReducer } from "./js/context";
import mitt from "./js/mitt";
import {
  changeCoverMaskVisibleMittKey,
  clickBranchOfficePointMittKey,
  clickMarkPointMittKey,
  clickPortPointMittKey,
  resetBottomUtilsMittKey,
} from "./js/mittKey";
import useInitMap from "./js/useInitMap";

function Map(props) {
  const query = useGetUrlQuery();
  const { viewer, mapMethods, initMap, closePopup } = useInitMap({
    request: {
      getCorpInfoListAll: props.getCorpInfoListAll,
    },
  });

  const [isBranchCompanyUser, setIsBranchCompanyUser] = useState(false); // 是否分公司用户
  const [isRenderContent, setIsRenderContent] = useState(false); // 是否渲染内容
  const fullscreenRef = useRef(null); // 全屏容器的ref
  const [isFullscreen, { toggleFullscreen }] = useFullscreen(fullscreenRef);
  const [state, dispatch] = useReducer(mapReducer, initialMapState);

  // 页面组件只调用语义化 actions，不直接感知 reducer action 或 mitt 事件名。
  const actions = useMemo(() => ({
    selectPort: data => dispatch({ type: MAP_ACTION.SELECT_PORT, payload: data }),
    selectBranchOffice: data => dispatch({ type: MAP_ACTION.SELECT_BRANCH_OFFICE, payload: data }),
    selectMark: data => dispatch({ type: MAP_ACTION.SELECT_MARK, payload: data }),
    resetMark: () => dispatch({ type: MAP_ACTION.RESET_MARK }),
    setPortArea: portArea => dispatch({ type: MAP_ACTION.SET_PORT_AREA, payload: portArea }),
    setBottomUtilsIndex: index => dispatch({ type: MAP_ACTION.SET_BOTTOM_UTILS_INDEX, payload: index }),
    resetBottomUtils: () => dispatch({ type: MAP_ACTION.RESET_BOTTOM_UTILS }),
    resetRightUtils: () => dispatch({ type: MAP_ACTION.RESET_RIGHT_UTILS }),
    setPureMap: visible => dispatch({ type: MAP_ACTION.SET_PURE_MAP, payload: visible }),
    setCoverMaskVisible: visible => dispatch({ type: MAP_ACTION.SET_COVER_MASK_VISIBLE, payload: visible }),
  }), []);

  useMount(() => {
    autoFit.init({ dw: 1920, dh: 1080, el: "#contentContainer", resize: true });

    sessionStorage.removeItem("mapCurrentBranchOfficeId");

    initMap();

    // Cesium 工具层暂时通过 mitt 通知；所有事件在根组件统一转成 reducer action。
    const handlePortClick = data => actions.selectPort(data);
    const handleBranchOfficeClick = data => actions.selectBranchOffice(data);
    const handleMarkClick = data => actions.selectMark(data);
    const handleCoverMaskVisible = (visible) => {
      actions.setCoverMaskVisible(visible);
      if (!visible) {
        message.success("地图绘制完成");
      }
    };
    const handleResetBottomUtils = () => actions.resetBottomUtils();
    mitt.on(clickPortPointMittKey, handlePortClick);
    mitt.on(clickBranchOfficePointMittKey, handleBranchOfficeClick);
    mitt.on(clickMarkPointMittKey, handleMarkClick);
    mitt.on(changeCoverMaskVisibleMittKey, handleCoverMaskVisible);
    mitt.on(resetBottomUtilsMittKey, handleResetBottomUtils);

    query.accessTicket && window.sessionStorage.setItem("accessTicket", query.accessTicket);
    query.clientId && window.sessionStorage.setItem("clientId", query.clientId);
    query.orgId && window.sessionStorage.setItem("orgId", query.orgId);
    query.token && window.sessionStorage.setItem("token", query.token);

    setTimeout(() => {
      if (window.sessionStorage.getItem("token")) {
        props.getCorpInfo().then(({ data }) => {
          if ([0, 1, 6].includes(data?.type)) {
            const id = data.id;
            const name = data.corpName;
            const longitude = data.longitude;
            const latitude = data.latitude;

            if (!id || !name || !longitude || !latitude)
              return message.warning("参数不完整，无法定位到对应分公司");

            handlePortClick({ id: "00003" });
            handleBranchOfficeClick(data);
            mapMethods.current.addBranchOfficePoint(undefined, data);
            mapMethods.current.flyTo({ longitude, latitude, height: 2000 });
            sessionStorage.setItem("mapCurrentBranchOfficeId", id);
            setIsBranchCompanyUser(true);
          }
          else {
            setTimeout(() => {
              mapMethods.current.flyTo();
              mapMethods.current.addPortPoint();
            }, 500);
          }
        }).catch(() => {
          setTimeout(() => {
            mapMethods.current.flyTo();
            mapMethods.current.addPortPoint();
          }, 500);
        }).finally(() => {
          setIsRenderContent(true);
        });
      }
    });

    return () => {
      autoFit.off();
      mitt.off(clickPortPointMittKey, handlePortClick);
      mitt.off(clickBranchOfficePointMittKey, handleBranchOfficeClick);
      mitt.off(clickMarkPointMittKey, handleMarkClick);
      mitt.off(changeCoverMaskVisibleMittKey, handleCoverMaskVisible);
      mitt.off(resetBottomUtilsMittKey, handleResetBottomUtils);
    };
  });

  const providerValues = useMemo(
    () => ({ viewer, mapMethods, closePopup, ...state, actions }),
    [viewer, mapMethods, closePopup, state, actions],
  );

  return (
    <div ref={fullscreenRef}>
      <Spin spinning={props.biMark.biFullLoading} delay={500} description="正在加载数据...">
        <Context.Provider value={providerValues}>
          <div id="cesiumContainer" />
          <div id="contentContainer">
            {isRenderContent && (
              <>
                <Header isBranchCompanyUser={isBranchCompanyUser} />
                <CenterUtils />
                <RightUtils history={props.history} isFullscreen={isFullscreen} toggleFullscreen={toggleFullscreen} />
                <BottomUtils />
                <Content history={props.history} />
                <CustomModal />
              </>
            )}
          </div>
        </Context.Provider>
      </Spin>
      <div
        style={{ display: state.coverMaskVisible ? "block" : "none" }}
        className={styles.coverMaskContainer}
        onClick={() => message.warning("正在绘制地图，请等待绘制完成在进行操作")}
      />
    </div>
  );
}

export default Connect([NS_BI_MARK, NS_BI_MARK_INFO, NS_BI_STATISTICS], true)(Map);