mh_jy_safe_web/src/layout/FullScreenInter.js

// FullScreenInter.js - 主文件保持简洁
import React from 'react';
import { connect } from 'dva';
import { withRouter } from 'dva/router';
import { Icon, Row, Col } from 'antd';
import styles from './fullinter.less';
import logo from '../assets/layout/headerno-logo-new.png';
import debounce from 'lodash.debounce';
import storage from '../utils/storage';
import { initFilter } from '../utils/common';
import HomeContent from './FullOther/HomeContent';

const getScale = () => {
  const width = 1920,
    height = 1080;
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};

class FullScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      nowDate: '',
      riskTypeRate: [],
      riskTotal: [
        { name: '年度重大隐患数', value: 1 },
        { name: '年度一般隐患数量', value: 89 },
        { name: '未整改隐患数量', value: 18 },
      ],
      linkSum: [],
      jobTodayTop3: [],
      taskTop3: [],
      scale: getScale(),
      configBanner: ['首页', '风险管控', '隐患治理', '班组建设', '危险作业', '安全培训'],
      mediaList: [],
      currentMediaIndex: 0,
      announcementList: [],
      activeTab: '首页',
    };
    this.isUnmounted = false;
  }

  setScale = debounce(() => {
    if (this.isUnmounted) return;
    this.setState({ scale: getScale() });
  }, 500);

  toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen?.();
    } else {
      document.exitFullscreen?.();
    }
  };

  componentDidMount() {
    this.isUnmounted = false;
    window.addEventListener('resize', this.setScale);
    this.getHomeDataArray();
    this.loadMediaFiles();
    this.getAnnouncementData();

    this.timer = setInterval(() => {
      if (!this.isUnmounted) this.setState({ nowDate: this.getDate() });
    }, 1000);

    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
  }

  getAnnouncementData = () => {
    this.setState({
      announcementList: [
        { id: 1, title: '关于2024年安全生产月活动的通知', publishTime: '2024-06-01', url: '' },
        { id: 2, title: '公司第三季度安全培训安排', publishTime: '2024-05-28', url: '' },
        { id: 3, title: '关于开展安全隐患排查整治工作的通知', publishTime: '2024-05-20', url: '' },
        { id: 4, title: '安全生产标准化建设阶段性总结', publishTime: '2024-05-15', url: '' },
        { id: 5, title: '关于表彰2024年第一季度安全生产先进单位的决定', publishTime: '2024-05-10', url: '' },
      ],
    });
  };

  loadMediaFiles = () => {
    this.setState({
      mediaList: [
        { type: 'image', url: 'http://10.2.7.18:28028//WZ_Images/static/smyzw@2x.png' },
        { type: 'video', url: 'http://10.2.7.18:28028/WZ_Images/Img_JFSC/welcom/1.mp4' },
      ],
    });
  };

  handleCarouselChange = (current) => {
    this.setState({ currentMediaIndex: current });
  };

  handleDotClick = (index) => {
    this.setState({ currentMediaIndex: index });
  };

  handleTabClick = (name) => {
    this.setState({ activeTab: name });
  };

  handleFullscreenChange = () => {
    this.forceUpdate();
  };

  componentWillUnmount() {
    this.isUnmounted = true;
    window.removeEventListener('resize', this.setScale);
    if (this.timer) clearInterval(this.timer);
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
  }

  getDate = () => {
    const myDate = new Date();
    const year = myDate.getFullYear();
    const mon = myDate.getMonth() + 1;
    const date = myDate.getDate();
    let hours = myDate.getHours();
    let minutes = myDate.getMinutes();
    let seconds = myDate.getSeconds();
    hours = hours < 10 ? '0' + hours : hours;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    return `${year} 年 ${mon} 月 ${date} 日 \t\t\t${hours} : ${minutes} : ${seconds}`;
  };

  getHomeDataArray = () => {
    const orgId = storage('lacal').getItem('webOrgId')?.val;
    const json = initFilter(orgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'BI/BIKanBanController/ReturnAllData',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
          this.setState({
            riskTypeRate: ret.riskTypeRate || [],
            linkSum: ret.linkSum || [],
            jobTodayTop3: ret.jobTodayTop3 || [],
            taskTop3: ret.taskTop3 || [],
          });
        }
      },
    });
  };

  renderOtherTabContent = () => {
    const { activeTab } = this.state;
    return (
      <div className={styles.otherTabContent}>
        <div style={{ textAlign: 'center', color: '#fff' }}>
          <div style={{ fontSize: '32px', fontWeight: 'bold', marginBottom: '20px' }}>{activeTab} 页面</div>
          <div style={{ fontSize: '18px', opacity: 0.8 }}>这里是 {activeTab} 的内容展示区域</div>
          <div style={{ marginTop: '30px', fontSize: '16px', opacity: 0.6 }}>请根据实际需求替换此内容</div>
        </div>
      </div>
    );
  };

  render() {
    const width = 1920,
      height = 1080;
    const {
      scale,
      activeTab,
      riskTypeRate,
      riskTotal,
      jobTodayTop3,
      linkSum,
      taskTop3,
      mediaList,
      announcementList,
      currentMediaIndex,
    } = this.state;

    return (
      <div className={styles.box} style={{ transform: `scale(${scale}) translate(-50%, -50%)`, width, height }}>
        <div className={styles.blackBack}>
          <div className={styles.backImage}>
            {/* 头部 */}
            <div className={styles.header}>
              <Row style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center' }}>
                <Col span={9} style={{ display: 'flex', alignItems: 'center' }}>
                  <img src={logo} alt="logo" style={{ height: '50px', marginLeft: '50px' }} />
                  <div style={{ display: 'flex', marginLeft: 'auto' }}>
                    {this.state.configBanner.slice(0, 3).map((item, index) => (
                      <div
                        key={index}
                        className={`${styles.configBanners} ${activeTab === item ? styles.active : ''}`}
                        onClick={() => this.handleTabClick(item)}
                      >
                        {item}
                      </div>
                    ))}
                  </div>
                </Col>
                <Col span={6} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <div className={styles.headerText}>金源公司安全生产管控平台</div>
                </Col>
                <Col span={9} style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
                  <div style={{ display: 'flex' }}>
                    {this.state.configBanner.slice(3, 6).map((item, index) => (
                      <div
                        key={index}
                        className={`${styles.configBanners} ${activeTab === item ? styles.active : ''}`}
                        onClick={() => this.handleTabClick(item)}
                      >
                        {item}
                      </div>
                    ))}
                  </div>
                  <Icon
                    type={document.fullscreenElement ? 'fullscreen-exit' : 'fullscreen'}
                    style={{ fontSize: '26px', color: '#000', cursor: 'pointer', margin: '0 20px' }}
                    onClick={this.toggleFullscreen}
                  />
                  <div style={{ color: '#000', fontSize: '14px', marginRight: '20px', fontWeight: 'bold' }}>
                    {this.state.nowDate}
                  </div>
                </Col>
              </Row>
            </div>

            {/* 内容区域 */}
            {activeTab === '首页' ? (
              <HomeContent
                riskTypeRate={riskTypeRate}
                riskTotal={riskTotal}
                jobTodayTop3={jobTodayTop3}
                linkSum={linkSum}
                taskTop3={taskTop3}
                mediaList={mediaList}
                announcementList={announcementList}
                currentMediaIndex={currentMediaIndex}
                onCarouselChange={this.handleCarouselChange}
                onDotClick={this.handleDotClick}
              />
            ) : (
              this.renderOtherTabContent()
            )}
          </div>
        </div>
      </div>
    );
  }
}

export default withRouter(connect(({ login }) => ({ login }))(FullScreen));