xinkeaboard/xinkeaboard-admin/src/pages/statistics/bigscreen/index.js

import React from "react";
import { connect } from "dva";
import styles from "./index.less";
import PanelBlock from "./components/PanelBlock";
import HeaderContent from "./components/HeadContent";
import OverView from "./components/Overview";
import PortalTraffic from "./components/PortalTraffic";
import Enquire from "./components/Enquire";
import OverseasEnquireLocation from "./components/OverseasEnquireLocation";
import DistributorEnquireLocation from "./components/DistributorEnquireLocation";
import AddMemberTrend from "./components/addMemberTrend";
import AddProductTrend from "./components/addProductTrend";
import SearchRankCloud from "./components/SearchRankCloud";
import MemberLocation from "./components/MemberLocation";
import StoreTraffic from "./components/StoreTraffic";
import MapContainer from "./components/MapContainer";
import OrderBasic from "./components/Order";

@connect(({ bigscreen }) => ({
  bigscreen,
}))
class BigScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFullScreen: false,
      startTime: performance.now(),
    };
    this.resizeHandler = null;
    this.timer = null;
    this.htmlOverflow = null;
    this.bodyOverflow = null;
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: "bigscreen/load_data",
    });
    this.setScale();
    window.addEventListener("resize", this.debounceSetScale);

    this.showRenderTime();
    this.htmlOverflow = document.documentElement.style.overflow;
    this.bodyOverflow = document.body.style.overflow;

    document.documentElement.style.overflow = "hidden";
    document.body.style.overflow = "hidden";

    // 全屏事件监听
    [
      "fullscreenchange",
      "webkitfullscreenchange",
      "mozfullscreenchange",
      "MSFullscreenChange",
    ].forEach((event) =>
      document.addEventListener(event, this.onFullScreenChange)
    );
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.debounceSetScale);

    document.documentElement.style.overflow = this.htmlOverflow || "";
    document.body.style.overflow = this.bodyOverflow || "";

    [
      "fullscreenchange",
      "webkitfullscreenchange",
      "mozfullscreenchange",
      "MSFullscreenChange",
    ].forEach((event) =>
      document.removeEventListener(event, this.onFullScreenChange)
    );
  }

  // 全屏切换
  toggleFullScreen = () => {
    const elem = document.querySelector(`.${styles.screenWrapper}`);
    if (!this.state.isFullScreen) {
      if (elem.requestFullscreen) elem.requestFullscreen();
      else if (elem.webkitRequestFullscreen) elem.webkitRequestFullscreen();
      else if (elem.mozRequestFullScreen) elem.mozRequestFullScreen();
      else if (elem.msRequestFullscreen) elem.msRequestFullscreen();
    } else {
      if (document.exitFullscreen) document.exitFullscreen();
      else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
      else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
      else if (document.msExitFullscreen) document.msExitFullscreen();
    }
  };

  onFullScreenChange = () => {
    this.setState({
      isFullScreen: !!(
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement
      ),
      renderKey: Date.now() // 用时间戳保证唯一
    });
  };

  debounceSetScale = () => {
    clearTimeout(this.resizeHandler);
    this.resizeHandler = setTimeout(() => {
      this.setScale();
    }, 200);
  };

  setScale = () => {
    const baseWidth = 3840;
    const baseHeight = 2160;
    const wrapper = document.querySelector(`.${styles.screenWrapper}`);
    const ww = wrapper ? wrapper.clientWidth : window.innerWidth;
    const wh = wrapper ? wrapper.clientHeight : window.innerHeight;
    const scale = Math.min(ww / baseWidth, wh / baseHeight);

    const screenContainer = document.querySelector(
      `.${styles.screenContainer}`
    );
    // const mapContainer = document.querySelector(`.${styles.mapContainer}`);
    if (screenContainer) {
      screenContainer.style.transform = `scale(${scale}) translate(-50%, -50%)`;
      screenContainer.style.transformOrigin = "0 0";
      screenContainer.style.left = "50%";
      screenContainer.style.top = "50%";
      screenContainer.style.margin = "0";
    }

    // if (mapContainer) {
    //   mapContainer.style.transform = `scale(${scale}) translate(-50%, -50%)`;
    //   mapContainer.style.transformOrigin = "0 0";
    //   mapContainer.style.left = "50%";
    //   mapContainer.style.top = "50%";
    //   mapContainer.style.margin = "0";
    // }
  };

  showRenderTime = () => {
    const timeUsed = (performance.now() - this.state.startTime).toFixed(2);
    console.log(`页面渲染完成耗时：${timeUsed} ms`);
  };

  render() {
    const { isFullScreen, renderKey } = this.state;

    return (
      <div className={styles.screenWrapper}>
        {isFullScreen ? null : (
          <button
            className={styles.fullscreenBtn}
            onClick={this.toggleFullScreen}
          >
            {"全屏"}
          </button>
        )}
        <div className={styles.screenContainer}>
          {/* 顶部 */}
          <div className={styles.headPanel}>
            <HeaderContent key={renderKey}/>
          </div>
          <div className={styles.contentPanel} key={renderKey}>
            {/* 左侧 */}
            <div className={styles.contentPanelLeft}>
              <PanelBlock
                styleObj={{
                  width: "699px",
                  height: "420px",
                  marginBottom: "36px",
                  backgroundImage: `url(${require("../../../assets/bigscreen/box-1.png")})`,
                }}
              >
                <PortalTraffic />
              </PanelBlock>
              <PanelBlock
                width="699px"
                height="420px"
                marginBottom="36px"
                styleObj={{
                  backgroundImage: `url(${require("../../../assets/bigscreen/box-1.png")})`,
                }}
              >
                <Enquire />
              </PanelBlock>
              <PanelBlock
                styleObj={{
                  width: "699px",
                  height: "420px",
                  marginBottom: "36px",
                  backgroundImage: `url(${require("../../../assets/bigscreen/box-1.png")})`,
                }}
              >
                <OrderBasic />
              </PanelBlock>
              <PanelBlock
                flexDirection="row"
                height="420px"
                styleObj={{ padding: 0 }}
              >
                <PanelBlock
                  styleObj={{
                    width: "326px",
                    marginRight: "47px",
                    backgroundImage: `url(${require("../../../assets/bigscreen/box-2.png")})`,
                  }}
                >
                  <OverseasEnquireLocation />
                </PanelBlock>
                <PanelBlock
                  styleObj={{
                    width: "326px",
                    backgroundImage: `url(${require("../../../assets/bigscreen/box-2.png")})`,
                  }}
                >
                  <DistributorEnquireLocation />
                </PanelBlock>
              </PanelBlock>
            </div>

            {/* 中间 */}
            <div className={styles.contentPanelCenter}>
              <PanelBlock justifyContent="flex-start" height="496px">
                <OverView />
              </PanelBlock>
              <PanelBlock />
              {/* <PanelBlock flexDirection="row" height="608px">
                <PanelBlock
                  width="822px"
                  marginRight="64px"
                  styleObj={{
                    backgroundImage: `url(${require("../../../assets/bigscreen/box-3.png")})`,
                  }}
                >
                  <AddMemberTrend />
                </PanelBlock>
                <PanelBlock
                  width="822px"
                  styleObj={{
                    backgroundImage: `url(${require("../../../assets/bigscreen/box-3.png")})`,
                  }}
                >
                  <AddProductTrend />
                </PanelBlock>
              </PanelBlock> */}
            </div>

            {/* 右侧 */}
            <div className={styles.contentPanelRight}>
              <PanelBlock
                height="648px"
                width="699px"
                marginBottom="36px"
                styleObj={{
                  backgroundImage: `url(${require("../../../assets/bigscreen/box-4.png")})`,
                }}
              >
                <SearchRankCloud />
              </PanelBlock>
              <PanelBlock
                height="648px"
                width="699px"
                marginBottom="36px"
                styleObj={{
                  backgroundImage: `url(${require("../../../assets/bigscreen/box-4.png")})`,
                }}
              >
                <StoreTraffic />
              </PanelBlock>
              <PanelBlock
                height="420px"
                width="699px"
                styleObj={{
                  backgroundImage: `url(${require("../../../assets/bigscreen/box-5.png")})`,
                }}
              >
                <AddMemberTrend />
              </PanelBlock>
            </div>

            <div className={styles.mapContainer}>
              <PanelBlock isRotateFade={true}>
                <MapContainer />
              </PanelBlock>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default BigScreen;