heNan_weiZhouGoods/src/components/LookDom/index.tsx

import React from 'react'
import { CloseCircleOutlined } from '@ant-design/icons'
import styles from './index.module.scss'
import { useSelector } from 'react-redux'
import store, { RootState } from '@/store'
import { baseURL } from '@/utils/http'
import classNames from 'classnames'

function LookDom() {
  const { src, type, flag, name } = useSelector((state: RootState) => state.loginStore.lookDom)

  // 控制放大缩小复位
  // const modelMoveFu = useCallback((fuName: 'resetView' | 'zoomIn' | 'zoomOut') => {
  //   const dom: any = document.querySelector('#modelIframe')
  //   if (dom && dom.contentWindow && dom.contentWindow.sceneFc[fuName]) {
  //     dom.contentWindow.sceneFc[fuName]()
  //   }
  // }, [])

  return (
    <div className={styles.LookDom} style={src ? { opacity: 1, pointerEvents: 'auto' } : {}}>
      {src ? (
        <>
          {type === 'video' ? (
            <div className='viedoBox'>
              <video autoPlay controls src={flag ? src : baseURL + src}></video>
            </div>
          ) : type === 'audio' ? (
            <div className='audioBox'>
              <audio autoPlay controls src={flag ? src : baseURL + src}></audio>
            </div>
          ) : (
            <div className='modelBox'>
              <iframe
                id='modelIframe'
                src={`./modelLook/index.html?src=${baseURL + src}&min=0.3&max=3`}
                frameBorder='0'
                title='model'
              ></iframe>
              {/* <div className='modelBtn'>
                <img
                  onClick={() => modelMoveFu('zoomIn')}
                  src={require('@/assets/img/model+.png')}
                  alt=''
                />
                <img
                  onClick={() => modelMoveFu('zoomOut')}
                  src={require('@/assets/img/model-.png')}
                  alt=''
                />
                <img
                  onClick={() => modelMoveFu('resetView')}
                  src={require('@/assets/img/modelR.png')}
                  alt=''
                />
              </div> */}

              {name ? <div className='modelName'>{name}</div> : null}
            </div>
          )}

          <div
            className={classNames('close', type === 'model' ? 'closeModel' : '')}
            onClick={() =>
              store.dispatch({
                type: 'layout/lookDom',
                payload: { src: '', type: '', flag: false, name: '' }
              })
            }
          >
            <CloseCircleOutlined rev={undefined} />
          </div>
        </>
      ) : null}
    </div>
  )
}

const MemoLookDom = React.memo(LookDom)

export default MemoLookDom