gmlx/project/src/pages/A5view/index.tsx

import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import MenuSider from '@/components/MenuSider'

const fullNum = {
  width: window.innerWidth,
  height: window.innerHeight
}

function A5view() {
  const iframeDom = useRef<any>(null)

  const [txt, setTxt] = useState({
    title: '',
    show: false
  })

  useEffect(() => {
    // 点击图片
    ;(window as any).clickObject = (val: any) => {
      console.log('000', val)
    }
    // 鼠标移入
    ;(window as any).hoverObject = (name: any) => {
      setTxt({
        title: name,
        show: true
      })
    }
    // 鼠标移出
    ;(window as any).mouseoutObject = () => {
      setTxt({
        title: '',
        show: false
      })
    }

    const txtDom: any = document.querySelector('.txt')

    if (txtDom) {
      // 获取鼠标坐标
      ;(window as any).mouseLoc = (x: any, y: any) => {
        // console.log("ppp", x, y);
        // 最大X值
        const maxX = fullNum.width - 200
        let xRes = x >= maxX ? maxX : x
        // xRes = xRes - 100 <= 0 ? 0 : xRes - 100;
        // 最大y值
        const domHeight = txtDom.clientHeight
        const maxY = fullNum.height - domHeight
        let yRes = y >= maxY ? maxY : y
        // yRes = yRes - domHeight / 2 <= 0 ? 0 : yRes - domHeight / 2;
        txtDom.style.top = yRes + 'px'
        txtDom.style.left = xRes + 'px'
      }
    }
  }, [])

  return (
    <div className={styles.A5view}>
      <iframe
        id='iframe'
        ref={iframeDom}
        title='3d'
        src='./three/index.html'
        frameBorder='0'
      ></iframe>
      <div className='txt' style={{ opacity: txt.show ? 0.8 : 0 }}>
        <h2>{txt.title}</h2>
      </div>

      <MenuSider isSidebarOpen={false} />
    </div>
  )
}

const MemoA5view = React.memo(A5view)

export default MemoA5view