index.js

/*
 * @Author: 634665781 634665781@qq.com
 * @Date: 2024-02-26 10:02:27
 * @LastEditors: 634665781 634665781@qq.com
 * @LastEditTime: 2025-04-07 17:16:26
 * @FilePath: \civ_hydrology\src\pages\projects\reservoir\monitorAR\BIContent\index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useCallback, useEffect, useState } from 'react';
import styles from './index.less';
const getContent = () => {
  const width = document.documentElement.clientWidth;
  const height = document.documentElement.clientHeight;
  return { width, height };
};

const BIContent = (props) => {
  let { type = 'base', id } = props;
  const [size, setSize] = useState(getContent());
  const getStyle = (size) => {
    if (!id) {
      if (props.children.props) {
        id = props.children.props.id;
      } else {
        props.children.map((v) => {
          !id && v?.props?.id;
        });
      }
    }
    let element = document.getElementById(id);
    if (!element) return {};
    let BI_width = element.offsetWidth;
    let BI_height = element.offsetHeight;
    console.log(BI_width,BI_height,size,'BI_width,BI_heightBI_width,BI_height,size');
    let elements = document.querySelector('aside'); //(".panda-civ-3d-layout-slider-fixed");
    let elements1 = document.querySelector(
      `.panda-civ-${type}-global-page-header-header,.panda-console-base-pro-global-header`,
    );
    let elements2 = document.querySelector(
      `.panda-civ-${type}-menu-item-children,.panda-console-base-tabs-nav`,
    );
    let Width = elements?.offsetWidth || 0;
    let height =
      (elements1?.offsetHeight || 0) + (elements2?.offsetHeight || 0);
    return size
      ? {
          transform: `scale(${(size.width - Width) / BI_width}, ${
            (size.height - height) / BI_height
          })`,
        }
      : {};
  };

  const onResize = useCallback(() => {
    // 将".className"替换为要获取宽高的元素的类名
    setTimeout(() => {
      setSize(getContent());
    }, 100);
  }, []);

  useEffect(() => {
    // 目标元素
    const targetElement = document.querySelector('aside');
    // 创建观察器配置项
    const config = { attributes: true }; // 只关注属性变化
    // 创建 MutationObserver 实例并传入回调函数
    const observer = new MutationObserver(function (mutations) {
      mutations.forEach(function (mutation) {
        if (
          mutation.type === 'attributes' &&
          mutation.attributeName === 'style'
        ) {
          //  console.log('元素宽度发生了变化');
          // 这里可以添加其他处理逻辑

          setTimeout(() => {
            onResize();
          }, 300);
        }
      });
    });

    // 开始观察目标元素
    targetElement&& observer.observe(targetElement, config);
    onResize();
    window.addEventListener('resize', onResize);
    return () => {
      window.removeEventListener('resize', onResize);
    };
  }, []);

  return (
    <div className={styles.bIContent}>
      <div style={getStyle(size)} className={styles.shrink_box}>
        {props.children}
      </div>
    </div>
  );
};

export default BIContent;