index.js

import { appService } from '@/api';
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { message, Button } from 'antd';
import classNames from 'classnames';
import { debounce } from 'lodash';
import React, { useRef, useEffect, useState, useMemo } from 'react';
import backImg from '@/assets/images/demonstration/返回.png';
import arrowLeftImg from '@/assets/images/demonstration/左箭头.png';
import LoadPage from '@/components/LoadPage';
import icon1 from '@/assets/images/integration/taihu2/综合管控_arrow.png';
import icon2 from '@/assets/images/integration/taihu2/智慧应用_arrow.png';
import icon3 from '@/assets/images/integration/taihu2/支撑平台_arrow.png';

import useFullScreen from '../../demonstration/components/useFullScreen';
import defaultConfig from './data.json';
import styles from './index.less';
import Iframe from '../../demonstration/components/Iframe';
const boxWidth = 1920;
const boxHeight = 930;
const IntegrationDongying = props => {
  const [ref, isFullscreen, handleFullScreen, handleExitFullScreen] = useFullScreen(false);
  const timer2 = useRef(null);
  const timer3 = useRef(null);

  const progressRef2 = useRef(0);
  // 退出
  const exit = () => {
    if (isFullscreen) {
      handleExitFullScreen && handleExitFullScreen();
    } else {
      handleFullScreen && handleFullScreen();
    }
  };
  const [boxSize, setBoxSize] = useState({
    scale: 1,
    boxHeight: 930,
  });
  const [linkUrl, setLinkUrl] = useState('');
  const [jumpLoading, setJumpLoading] = useState(false);
  const [progressValue2, setProgressValue2] = useState(0);
  const [showBackBtn, setShowBackBtn] = useState(true); // 是否显示iframe 返回按钮，三维平台用

  const configName = '东营集成配置文件';

  const [configData, setConfigData] = useState(defaultConfig);

  const jumpProgressStart = () => {
    if (timer2.current) {
      clearInterval(timer2.current);
      timer2.current = null;
    }
    progressRef2.current = 0;
    setProgressValue2(0);
    timer2.current = setInterval(() => {
      if (progressRef2.current < 97.5) {
        progressRef2.current += 2.5;
        setProgressValue2(progressRef2.current);
      } else {
        setProgressValue2(99);
        timer2.current && clearInterval(timer2.current);
        timer2.current = null;
      }
    }, 100);
  };
  const jumpProgressEnd = () => {
    setProgressValue2(100);
    timer2.current && clearInterval(timer2.current);
    timer2.current = null;
  };
  const getData = async () => {
    appService
      .GetConfigJson({
        config: configName,
      })
      .then(res => {
        if (res.code === 0 && res.data) {
          const data = JSON.parse(res.data) || defaultConfig;
          setConfigData(data);
        }
      });
  };
  const onResize = () => {
    if (ref?.current) {
      const { clientWidth, clientHeight } = ref.current;
      if (!boxWidth || !boxHeight) return;
      const xScale = clientWidth / boxWidth;
      const yScale = clientHeight / boxHeight;
      const poor = clientHeight / clientWidth - boxHeight / boxWidth;
      let n = Math.min(xScale, yScale);
      let bHeight = boxHeight;
      if (poor > 0.05) {
        bHeight = boxHeight + 30;
      }
      // 高度为偶数
      bHeight = parseInt(bHeight, 10);
      if (bHeight % 2 !== 0) {
        bHeight += 1;
      }
      n = Number(n.toFixed(4));
      setBoxSize({
        scale: n,
        boxHeight: bHeight,
      });
    }
  };
  const handError = err => {
    if (err) {
      message.error(err);
    }
    setLinkUrl('');
    setJumpLoading(false);
    jumpProgressEnd();
  };
  const onMessageBack = data => {
    if (!data?.type) return;
    console.log('onMessageBack ~ data:', data);
    switch (data?.type) {
      // 页面加载完成
      // 登录成功
      case 'runAfterFirstMounted':
      case 'loginSuccess':
        jumpProgressEnd();
        setTimeout(() => {
          setJumpLoading(false);
        }, 100);
        break;
      case 'loginError':
        message.warning('登录失败，请联系管理人员');
        handError();
        break;
      case '无法连接':
        message.warning('该站点无法连接，请联系管理人员');
        setTimeout(() => {
          handError();
        }, 100);
        break;
      case 'showBack':
        setShowBackBtn(true);
        break;
      case 'hideBack':
        setShowBackBtn(false);
        break;
      default:
        break;
    }
  };
  const iframeItem = useMemo(() => {
    if (!linkUrl) return null;
    return (
      <>
        <div className={classNames(!jumpLoading ? styles.scaleInCenter : styles.hide, 'animate__animated')}>
          <Iframe linkUrl={linkUrl} onMessageBack={onMessageBack} />
        </div>
      </>
    );
  }, [linkUrl, jumpLoading]);
  const startTiming = (time = 2) => {
    if (timer3.current) {
      clearInterval(timer3.current);
      timer3.current = null;
    }
    timer3.current = setTimeout(() => {
      setJumpLoading(false);
      timer2.current && clearInterval(timer2.current);
      timer2.current = null;
    }, time * 1000);
  };
  const onLink = url => {
    if (!url) return message.warning('未配置功能路径');
    setJumpLoading(true);
    jumpProgressStart();

    setLinkUrl(url);
    let time = 15;
    if (!url.includes('user/noscret')) {
      time = 4;
    }
    startTiming(time);
  };
  useEffect(() => {
    getData();
    window.addEventListener('resize', debounce(onResize, 300));
    onResize();
    return () => {
      window.removeEventListener('resize', onResize);
      timer2.current && clearInterval(timer2.current);
      timer2.current = null;
      timer3.current && clearInterval(timer3.current);
      timer3.current = null;
    };
  }, []);

  return (
    <div className={classNames(styles.integrationDongying, 'integrationDongying')} ref={ref}>
      {jumpLoading ? (
        <div className={styles.integrationJumpLoad} key="jumpLoading">
          <div style={{ width: '285px' }}>
            <LoadPage percent={progressValue2 / 100} text="页面加载中~" />
          </div>
        </div>
      ) : null}
      {!linkUrl ? (
        <div className={styles.integrationDongying_exit} onClick={exit}>
          <Button type="text" style={{ color: '#fff', fontSize: '24px' }}>
            {isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
          </Button>
        </div>
      ) : null}

      <div
        className={styles.integration_content}
        style={{
          width: boxWidth,
          height: boxSize.boxHeight,
          transform: `scale(${boxSize.scale}) translate(-50%,-50%)`,
        }}
      >
        <div className={styles.integrationDongying_title}>
          <div className={styles.integrationDongying_title_left} />
          <div className={styles.integrationDongying_title_text}>
            <span>{configData?.['标题'] || '智慧水务综合监控平台'}</span>
          </div>
          <div className={styles.integrationDongying_title_right} />
        </div>
        <div className={styles.integration_row} type="业务应用">
          <div className={styles.integration_row_title} type="业务应用">
            业务应用
          </div>
          <div className={styles.integration_row_right}>
            <div className={styles.integration_row_list} style={{ marginRight: '24px' }}>
              <div className={styles.integration_row_grid} type="业务应用">
                {configData['业务应用'] &&
                  configData['业务应用'].map(item => (
                    <div
                      key={item.name}
                      className={styles.integration_row_col}
                      type="业务应用"
                      onClick={() => onLink(item.url)}
                    >
                      <div className={styles.integration_row_col_content} name={item.name}>
                        <div className={styles.integration_row_col_text} type="业务应用">
                          {item.label || item.name}
                        </div>
                        <div className={styles.integration_row_col_sub}>{item.english || ''}</div>
                      </div>
                      <div className={styles.integration_row_col_tip}> {item.label || item.name}</div>
                    </div>
                  ))}
              </div>
            </div>
            <div className={styles.integration_row_list} type="管网一张图" style={{ marginRight: '24px' }}>
              <div className={styles.integration_row_list_title}>管网一张图</div>
              <div className={styles.integration_row_grid} type="管网一张图">
                {configData['管网一张图'] &&
                  configData['管网一张图'].map(item => (
                    <div
                      key={item.name}
                      className={styles.integration_row_col}
                      type="业务应用"
                      onClick={() => onLink(item.url)}
                    >
                      <div className={styles.integration_row_col_content} name={item.name}>
                        <div className={styles.integration_row_col_text} type="业务应用">
                          {item.label || item.name}
                        </div>
                        <div className={styles.integration_row_col_sub}>{item.english || ''}</div>
                      </div>
                      <div className={styles.integration_row_col_tip}> {item.label || item.name}</div>
                    </div>
                  ))}
              </div>
            </div>
            <div className={styles.integration_row_list} type="管网一张图2">
              <div className={styles.integration_row_grid} type="管网一张图2">
                {configData['管网一张图2'] &&
                  configData['管网一张图2'].map(item => (
                    <div
                      key={item.name}
                      className={styles.integration_row_col}
                      type="业务应用"
                      onClick={() => onLink(item.url)}
                    >
                      <div className={styles.integration_row_col_content} name={item.name}>
                        <div className={styles.integration_row_col_text} type="业务应用">
                          {item.label || item.name}
                        </div>
                        <div className={styles.integration_row_col_sub}>{item.english || ''}</div>
                      </div>
                      <div className={styles.integration_row_col_tip}> {item.label || item.name}</div>
                    </div>
                  ))}
              </div>
            </div>
          </div>
        </div>
        <div className={styles.integration_row} type="数据管理">
          <div className={styles.integration_row_title} type="数据管理">
            数据管理
          </div>
          <div className={styles.integration_row_right2}>
            <div className={styles.integration_row_list} type="数据底板建设">
              <div className={styles.integration_row_list_title} type="数据底板建设">
                - 数据底板建设 -
              </div>
              <div className={styles.integration_row_grid} type="数据底板建设">
                {configData['数据底板建设'] &&
                  configData['数据底板建设'].map(item => (
                    <div
                      key={item.name}
                      className={styles.integration_row_col}
                      type="数据底板建设"
                      onClick={() => onLink(item.url)}
                    >
                      <div
                        className={classNames(
                          styles.integration_row_col_hover,
                          'animate__fadeIn animate__animated duration-100ms',
                        )}
                      />
                      <div className={styles.integration_row_col_content} name={item.name}>
                        <div className={styles.integration_row_col_text}>{item.label || item.name}</div>
                      </div>
                    </div>
                  ))}
              </div>
            </div>
            <div className={styles.integration_row_list_right}>
              <div className={styles.integration_row_list} type="模型库">
                <div className={styles.integration_row_grid} type="模型库">
                  {configData['模型库'] &&
                    configData['模型库'].map(item => (
                      <div
                        key={item.name}
                        className={styles.integration_row_col}
                        type={item.name}
                        onClick={() => onLink(item.url)}
                      >
                        <div className={styles.integration_row_col_content} name={item.name}>
                          <div className={styles.integration_row_col_text}>{item.label || item.name}</div>
                          {item.english ? (
                            <div className={styles.integration_row_col_sub}>
                              &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {item.english || ''}
                            </div>
                          ) : null}
                        </div>
                      </div>
                    ))}
                </div>
              </div>
              <div className={styles.integration_row_list} type="知识库">
                <div className={styles.integration_row_list_title} type="知识库">
                  - 知识库 -
                </div>
                <div className={styles.integration_row_grid} type="知识库">
                  {configData['知识库'] &&
                    configData['知识库'].map(item => (
                      <div
                        key={item.name}
                        className={styles.integration_row_col}
                        type={item.name}
                        onClick={() => onLink(item.url)}
                      >
                        <div className={styles.integration_row_col_content} name={item.name}>
                          <div className={styles.integration_row_col_text}>{item.label || item.name}</div>
                        </div>
                      </div>
                    ))}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.integration_row} type="支撑保障">
          <div className={styles.integration_row_title} type="支撑保障">
            支撑保障
          </div>
          <div className={styles.integration_row_right}>
            <div className={styles.integration_row_list} type="数据支撑">
              <div className={styles.integration_row_grid} type="数据支撑">
                {configData['物联网平台'] &&
                  configData['物联网平台'].map(item => (
                    <div
                      key={item.name}
                      className={styles.integration_row_col}
                      type={item.name}
                      onClick={() => onLink(item.url)}
                    >
                      <div
                        className={classNames(
                          styles.integration_row_col_hover,
                          'animate__fadeIn animate__animated duration-100ms',
                        )}
                      />
                      <div className={styles.integration_row_col_content} name={item.name}>
                        <div className={styles.integration_row_col_text}>{item.label || item.name}</div>
                        <div className={styles.integration_row_col_sub}>{item.english || ''}</div>
                      </div>
                    </div>
                  ))}
              </div>
            </div>
            <div className={styles.integration_row_list} type="支撑平台">
              <div className={styles.integration_row_list_title}>支撑平台</div>
              <div className={styles.integration_row_grid} type="支撑平台">
                {configData['支撑平台'] &&
                  configData['支撑平台'].map(item => (
                    <div
                      key={item.name}
                      className={styles.integration_row_col}
                      type={item.name}
                      onClick={() => onLink(item.url)}
                    >
                      <div
                        className={classNames(
                          styles.integration_row_col_hover,
                          'animate__fadeIn animate__animated duration-100ms',
                        )}
                      />
                      <div className={styles.integration_row_col_content} name={item.name}>
                        <div className={styles.integration_row_col_text}>{item.label || item.name}</div>
                      </div>
                    </div>
                  ))}
              </div>
            </div>
          </div>
        </div>
      </div>
      {linkUrl && showBackBtn ? (
        <div
          className={classNames(styles.iframeExit, 'animate__animated', 'animate__fadeIn')}
          onClick={() => setLinkUrl('')}
        >
          <div className={styles.iframeBackLeft}>
            <img src={arrowLeftImg} alt="返回" />
          </div>
          <div className={styles.iframeExitIcon}>
            <img src={backImg} alt="返回" />
            返回
          </div>
        </div>
      ) : null}
      {iframeItem}
    </div>
  );
};
export default IntegrationDongying;