Chengzhebei/src/App.tsx

import '@/assets/styles/base.css'
// 关于路由
import React, { useCallback, useEffect, useRef } from 'react'
import { Router, Route, Switch } from 'react-router-dom'
import history, { callIframeFu } from './utils/history'
import SpinLoding from './components/SpinLoding'
import store, { RootState } from './store'
import { useDispatch, useSelector } from 'react-redux'
import NotFound from '@/components/NotFound'
import TouchContainer from './components/TouchContainer'
import { envFlag } from './utils/http'
import AsyncSpinLoding from './components/AsyncSpinLoding'
import { Image } from 'antd'
import MessageCom from '@/components/Message'
import { setStoreLangueFu } from './utils/storage'
import { API_getVideo } from './store/action/all'

// import Vconsole from 'vconsole'
// new Vconsole()

// import { isLoc, myData } from './utils/http'
const A1home = React.lazy(() => import('./pages/A1home2'))
const A1_1base = React.lazy(() => import('./pages/A0base'))
const A2yblm = React.lazy(() => import('./pages/A2yblm'))
const A3beie = React.lazy(() => import('./pages/A3beie'))
const A4quanwen = React.lazy(() => import('./pages/A4quanwen'))
const A5wenwu = React.lazy(() => import('./pages/A5wenwu'))
const A6ybwx = React.lazy(() => import('./pages/A6ybwx'))
const A7Wjwj = React.lazy(() => import('./pages/A7wjwj'))
const A6_1_zxys = React.lazy(() => import('./pages/A6ybwx/A6_1_zxys'))
const A6_2_zxzgh = React.lazy(() => import('./pages/A6ybwx/A6_2_zxzgh'))
// 墓影智慧
const A8byzh = React.lazy(() => import('./pages/A8byzh'))
const A9knowlege = React.lazy(() => import('./pages/A9knowlege'))
const text = React.lazy(() => import('./pages/Ztext'))

declare global {
  //设置全局属性
  interface Window {
    //window对象属性
    isHH: boolean //加入对象
    unityOpenHot: (name: string) => void
    unityBack: () => void
  }
}

let tempW = document.documentElement.clientWidth
let tempH = document.documentElement.clientHeight

let tempMax = tempW >= tempH ? tempW : tempH
let tempMin = tempW >= tempH ? tempH : tempW

const pageBi = Math.round(Number((tempMax / tempMin).toFixed(2)))

// 设计图按照 844 X 390 来开发
const planSize = {
  width: 844,
  height: Math.round(Number((844 / pageBi).toFixed(0)))
}

export default function App() {
  const dispatch = useDispatch()
  // 获取后台管理视频地址
  const API_getVideoFu = useCallback(async () => {
    dispatch(API_getVideo())
  }, [dispatch])

  useEffect(() => {
    API_getVideoFu()
  }, [API_getVideoFu])

  const { myData, unityDel } = useSelector((state: RootState) => state.A0Layout)

  // 判断是中文还是英文
  useEffect(() => {
    setStoreLangueFu()
  }, [])

  useEffect(() => {
    // 打包环境 刷新页面从 首页 开始
    if (!envFlag && myData.isLdong) {
      // #/knowlege?l=look 从后台管理直接打开知识图谱
      if (window.location.hash !== '#/' && window.location.hash !== '#/knowlege?l=look') {
        window.location.href = window.location.href.split('#')[0] + '#/'
      }
    }
  }, [myData.isLdong])

  const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)

  const isAutoRotating = useRef(false)
  // 根元素
  const rootRef = useRef<any>(null)

  const pageFullChangeFu = useCallback(() => {
    let width = document.documentElement.clientWidth
    let height = document.documentElement.clientHeight

    let isHHTemp = false

    if (width >= height) {
      if (tempMax - width > 100) return

      //横屏
      isHHTemp = true
      const sizeW = width / planSize.width
      let sizeH = height / planSize.height

      let moveX = (planSize.width - width) / 2
      let moveY = (planSize.height - height) / 2

      if (width >= planSize.width) moveX = 0
      rootRef.current.style.left = '0'
      rootRef.current.style.transform = `translate3d(${-moveX}px,${-moveY}px,0px) scale(${sizeW},${sizeH}) rotate(0deg)`
      rootRef.current.style.transformOrigin = 'center'

      store.dispatch({
        type: 'layout/style',
        payload: {
          width: planSize.width,
          moveX: -moveX,
          moveY: -moveY,
          sizeW,
          sizeH
        }
      })
    } else {
      if (tempMax - height > 100) return

      // 竖屏
      isHHTemp = false
      const temp = width

      // 用来大场景调整样式
      const styleStr = `
    #pageIframe #wjwjScene,
    #pageIframe #panoramic,
    #pageIframe #A7Poem {
      width: ${height}px;
      height: ${temp}px;
      transform: rotate(90deg) translate(-50%, -50%);
      transform-origin: left top;
            }
      `
      const styletDom = document.createElement('style')
      styletDom.type = 'text/css'
      styletDom.id = 'myStyle'
      styletDom.innerHTML = styleStr
      document.querySelector('html')?.appendChild(styletDom)

      width = height
      height = temp

      const sizeW = width / planSize.width
      let sizeH = height / planSize.height

      rootRef.current.style.left = '100%'
      rootRef.current.style.transform = `rotate(90deg) scale(${sizeW},${sizeH})`

      rootRef.current.style.transformOrigin = 'left top'
    }

    // 横竖屏变化的时候 刷新页面

    // if (window.isHH !== isHHTemp) {
    //   window.location.reload()
    // }

    store.dispatch({ type: 'layout/isHH', payload: isHHTemp })
  }, [])

  useEffect(() => {
    // 添加状态跟踪自动旋转
    let timer: NodeJS.Timeout

    window.onModelControlled = () => {
      // console.log('djl')
      callIframeFu('setModelAutoRotation', 0)
      resetTimer()
    }

    const resetTimer = () => {
      clearTimeout(timer)
      timer = setTimeout(() => {
        if (window.currentChangePanelIndex === 0 || window.currentChangePanelIndex === 4) {
          // console.log(window.currentChangePanelIndex)
          callIframeFu('setModelAutoRotation', -0.5)
          isAutoRotating.current = true
        }
      }, 3000)
    }

    // 初始化计时器
    setTimeout(() => {
      resetTimer()
    }, 1000)
    return () => {
      clearTimeout(timer)
    }
  }, [])

  useEffect(() => {
    rootRef.current = document.querySelector('#root')
    rootRef.current.style.width = planSize.width + 'px'
    rootRef.current.style.height = planSize.height + 'px'

    pageFullChangeFu()
    window.addEventListener('resize', pageFullChangeFu, false)
  }, [pageFullChangeFu])

  // 动态根据路由更改背景图
  const handleHashChange = () => {
    if (window.location.hash === '#/base') {
      callIframeFu('changePanel', 0)
      callIframeFu('showInscription', -1)
      callIframeFu('showHotspot', -1)
      window.onModelControlled()
    }
    if (window.location.hash === '#/yblm') {
      callIframeFu('changePanel', 1)
      callIframeFu('showInscription', -1)
      callIframeFu('showHotspot', -1)
    }
    if (
      window.location.hash === '#/ybwx' ||
      window.location.hash === '#/yblm' ||
      window.location.hash === '#/wjwj'
    ) {
      callIframeFu('setModelAutoRotation', 0)
    }
    if (window.location.hash === '#/beie') {
      callIframeFu('changePanel', 3)
      callIframeFu('showInscription', 0)
    }
    if (window.location.hash === '#/quanwen') {
      callIframeFu('changePanel', 3)
      callIframeFu('showInscription', -1)
    }
    if (window.location.hash.includes('wenwu')) {
      window.onModelControlled()
      callIframeFu('changePanel', 4)
      callIframeFu('showInscription', -1)
      callIframeFu('showHotspot', -1)
    }
  }
  useEffect(() => {
    window.addEventListener('hashchange', handleHashChange)
    return () => {
      window.removeEventListener('hashchange', handleHashChange)
    }
  }, [])

  // 更新unity页面
  useEffect(() => {
    if (envFlag) {
      window.addEventListener('keyup', e => {
        if (e.code === 'Enter') {
          callIframeFu(
            'refreshAppSettings',
            JSON.stringify({
              cameraDefaultBlendTime: 0.8,
              modelAutoRotationAnimationTime: 0.8,
              modelControlAnimationTime: 0.8,
              panels: [
                {
                  name: 'Panel1Camera',
                  camera: {
                    position: {
                      x: 0,
                      y: 0,
                      z: -13
                    },
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    },
                    physicalLensShift: {
                      x: 0.25,
                      y: 0
                    }
                  },
                  model: {
                    rotation: {
                      x: 0,
                      y: -180,
                      z: 0
                    },
                    limitScale: {
                      isLimit: true,
                      min: 0.2,
                      max: 1.5
                    },
                    limitX: {
                      isLimit: true,
                      min: -4.5,
                      max: 4.5
                    },
                    limitY: {
                      isLimit: true,
                      min: -8,
                      max: 8
                    }
                  }
                },
                {
                  name: 'Panel2Camera',
                  camera: {
                    position: {
                      x: 0,
                      y: 0,
                      z: -13
                    },
                    physicalLensShift: {
                      x: 0.2,
                      y: 0
                    },
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    }
                  },
                  model: {
                    rotation: {
                      x: 0,
                      y: -180,
                      z: 0
                    },
                    limitScale: {
                      isLimit: true,
                      min: 0.2,
                      max: 1.5
                    },
                    limitX: {
                      isLimit: true,
                      min: -5,
                      max: 5
                    },
                    limitY: {
                      isLimit: true,
                      min: -8,
                      max: 8
                    }
                  }
                },
                {
                  name: 'Panel3Camera',
                  camera: {
                    position: {
                      x: 0,
                      y: 0,
                      z: -13
                    },
                    physicalLensShift: {
                      x: 0,
                      y: 0
                    },
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    }
                  },
                  model: {
                    rotation: {
                      x: 0,
                      y: -180,
                      z: 0
                    },
                    limitScale: {
                      isLimit: true,
                      min: 0.2,
                      max: 1.5
                    },
                    limitX: {
                      isLimit: true,
                      min: -10,
                      max: 10
                    },
                    limitY: {
                      isLimit: true,
                      min: -8,
                      max: 8
                    }
                  }
                },
                {
                  name: 'Panel4Camera',
                  rotationNotAllowed: true,
                  camera: {
                    position: {
                      x: 0,
                      y: 0.5,
                      z: -12
                    },
                    physicalLensShift: {
                      x: 0.2,
                      y: 0
                    },
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    }
                  },
                  model: {
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    },
                    limitScale: {
                      isLimit: true,
                      min: 0.2,
                      max: 1.5
                    },
                    limitX: {
                      isLimit: true,
                      min: -4,
                      max: 4
                    },
                    limitY: {
                      isLimit: true,
                      min: -8,
                      max: 8
                    }
                  }
                },
                {
                  name: 'Panel5Camera',
                  camera: {
                    position: {
                      x: 0,
                      y: 0,
                      z: -14
                    },
                    physicalLensShift: {
                      x: 0,
                      y: 0
                    },
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    }
                  },
                  model: {
                    rotation: {
                      x: 0,
                      y: -180,
                      z: 0
                    },
                    limitScale: {
                      isLimit: true,
                      min: 0.2,
                      max: 1.5
                    },
                    limitX: {
                      isLimit: true,
                      min: -15,
                      max: 15
                    },
                    limitY: {
                      isLimit: true,
                      min: -8,
                      max: 8
                    }
                  }
                }
              ],
              hotspots: [
                {
                  name: '佛龛',
                  intensityAnimationTime: 0.8,
                  startIntensity: 0,
                  camera: {
                    position: {
                      x: 0,
                      y: 1.6,
                      z: -9
                    },

                    physicalLensShift: {
                      x: -0.08,
                      y: 0
                    },
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    }
                  },
                  model: {
                    rotation: {
                      x: 0,
                      y: -180,
                      z: 0
                    },
                    limitScale: {
                      isLimit: true,
                      min: 0.2,
                      max: 1.5
                    },
                    limitX: {
                      isLimit: true,
                      min: -5,
                      max: 5
                    },
                    limitY: {
                      isLimit: true,
                      min: -5,
                      max: 8
                    }
                  }
                },
                {
                  name: '佛像',
                  intensityAnimationTime: 0.8,
                  startIntensity: 0,
                  camera: {
                    physicalLensShift: {
                      x: -0.1,
                      y: 0
                    },
                    position: {
                      x: 0,
                      y: 0.8,
                      z: -8
                    },
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    }
                  },
                  model: {
                    rotation: {
                      x: 0,
                      y: -180,
                      z: 0
                    },
                    limitScale: {
                      isLimit: true,
                      min: 0.2,
                      max: 1.5
                    },
                    limitX: {
                      isLimit: true,
                      min: -5,
                      max: 5
                    },
                    limitY: {
                      isLimit: true,
                      min: -5,
                      max: 8
                    }
                  }
                },
                {
                  name: '佛龛两侧',
                  intensityAnimationTime: 0.8,
                  startIntensity: 0,
                  camera: {
                    physicalLensShift: {
                      x: -0.1,
                      y: 0
                    },
                    position: {
                      x: 0,
                      y: 0.8,
                      z: -8
                    },
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    }
                  },
                  model: {
                    rotation: {
                      x: 0,
                      y: -180,
                      z: 0
                    },
                    limitScale: {
                      isLimit: true,
                      min: 0.2,
                      max: 1.5
                    },
                    limitX: {
                      isLimit: true,
                      min: -5,
                      max: 5
                    },
                    limitY: {
                      isLimit: true,
                      min: -5,
                      max: 8
                    }
                  }
                },
                {
                  name: '佛龛上部',
                  intensityAnimationTime: 0.8,
                  startIntensity: 0,
                  camera: {
                    physicalLensShift: {
                      x: -0.1,
                      y: 0
                    },
                    position: {
                      x: 0,
                      y: 3,
                      z: -8
                    },
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    }
                  },
                  model: {
                    rotation: {
                      x: 0,
                      y: -180,
                      z: 0
                    },
                    limitScale: {
                      isLimit: true,
                      min: 0.2,
                      max: 1.5
                    },
                    limitX: {
                      isLimit: true,
                      min: -5,
                      max: 5
                    },
                    limitY: {
                      isLimit: true,
                      min: 0,
                      max: 12
                    }
                  }
                },
                {
                  name: '佛龛下部',
                  intensityAnimationTime: 0.8,
                  startIntensity: 0,
                  camera: {
                    physicalLensShift: {
                      x: -0.1,
                      y: 0
                    },
                    position: {
                      x: 0,
                      y: -4,
                      z: -8
                    },
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    }
                  },
                  model: {
                    rotation: {
                      x: 0,
                      y: -180,
                      z: 0
                    },
                    limitScale: {
                      isLimit: true,
                      min: 0.2,
                      max: 1.5
                    },
                    limitX: {
                      isLimit: true,
                      min: -5,
                      max: 5
                    },
                    limitY: {
                      isLimit: true,
                      min: -12,
                      max: -1
                    }
                  }
                },
                {
                  name: '畏兽',
                  intensityAnimationTime: 0.8,
                  startIntensity: 0,
                  camera: {
                    physicalLensShift: {
                      x: -0.08,
                      y: 0
                    },
                    position: {
                      x: 0,
                      y: 2.5,
                      z: -8
                    },
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    }
                  },
                  model: {
                    rotation: {
                      x: 0,
                      y: -90,
                      z: 0
                    },
                    limitScale: {
                      isLimit: true,
                      min: 0.2,
                      max: 1.5
                    },
                    limitX: {
                      isLimit: true,
                      min: -5,
                      max: 5
                    },
                    limitY: {
                      isLimit: true,
                      min: -1,
                      max: 8
                    }
                  }
                },
                {
                  name: '飞天',
                  intensityAnimationTime: 0.8,
                  startIntensity: 0,
                  camera: {
                    physicalLensShift: {
                      x: -0.08,
                      y: 0
                    },
                    position: {
                      x: 0,
                      y: -0.5,
                      z: -8
                    },
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    }
                  },
                  model: {
                    rotation: {
                      x: 0,
                      y: -90,
                      z: 0
                    },
                    limitScale: {
                      isLimit: true,
                      min: 0.2,
                      max: 1.5
                    },
                    limitX: {
                      isLimit: true,
                      min: -5,
                      max: 5
                    },
                    limitY: {
                      isLimit: true,
                      min: -6,
                      max: 5
                    }
                  }
                },
                {
                  name: '摩尼宝珠',
                  intensityAnimationTime: 0.8,
                  startIntensity: 0,
                  camera: {
                    physicalLensShift: {
                      x: -0.08,
                      y: 0
                    },
                    position: {
                      x: 0,
                      y: -3,
                      z: -8
                    },
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    }
                  },
                  model: {
                    rotation: {
                      x: 0,
                      y: -90,
                      z: 0
                    },
                    limitScale: {
                      isLimit: true,
                      min: 0.2,
                      max: 1.5
                    },
                    limitX: {
                      isLimit: true,
                      min: -5,
                      max: 5
                    },
                    limitY: {
                      isLimit: true,
                      min: -8,
                      max: 3
                    }
                  }
                }
              ],
              inscriptions: [
                {
                  name: '碑额',
                  intensityAnimationTime: 0,
                  startIntensity: 0,
                  camera: {
                    position: {
                      x: 1.2,
                      y: 4.3,
                      z: -5
                    },
                    physicalLensShift: {
                      x: 0.3,
                      y: 0
                    },
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    }
                  },
                  model: {
                    rotation: {
                      x: 0,
                      y: -90,
                      z: 0
                    },
                    limitScale: {
                      isLimit: true,
                      min: 0.2,
                      max: 1.5
                    },
                    limitX: {
                      isLimit: true,
                      min: -1,
                      max: 5
                    },
                    limitY: {
                      isLimit: true,
                      min: 2,
                      max: 15
                    }
                  }
                },
                {
                  name: '碑文1',
                  intensityAnimationTime: 0,
                  startIntensity: 0,
                  camera: {
                    position: {
                      x: 1.6,
                      y: 2.7,
                      z: -5
                    },
                    physicalLensShift: {
                      x: 0.25,
                      y: 0
                    },
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    }
                  },
                  model: {
                    rotation: {
                      x: 0,
                      y: -180,
                      z: 0
                    },
                    limitScale: {
                      isLimit: true,
                      min: 0.2,
                      max: 1.5
                    },
                    limitX: {
                      isLimit: true,
                      min: 0,
                      max: 5
                    },
                    limitY: {
                      isLimit: true,
                      min: -3,
                      max: 9
                    }
                  }
                },
                {
                  name: '碑文2',
                  intensityAnimationTime: 0,
                  startIntensity: 0,
                  camera: {
                    position: {
                      x: 0,
                      y: 0,
                      z: -12
                    },
                    physicalLensShift: {
                      x: 0.2,
                      y: 0
                    },
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    }
                  },
                  model: {
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    },
                    limitScale: {
                      isLimit: true,
                      min: 0.2,
                      max: 1.5
                    },
                    limitX: {
                      isLimit: true,
                      min: -5,
                      max: 5
                    },
                    limitY: {
                      isLimit: true,
                      min: -8,
                      max: 8
                    }
                  }
                },
                {
                  name: '碑文3',
                  intensityAnimationTime: 0,
                  startIntensity: 0,
                  camera: {
                    position: {
                      x: 0,
                      y: 0,
                      z: -12
                    },
                    physicalLensShift: {
                      x: 0.2,
                      y: 0
                    },
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    }
                  },
                  model: {
                    rotation: {
                      x: 0,
                      y: 0,
                      z: 0
                    },
                    physicalLensShift: {
                      x: 0.2,
                      y: 0
                    },
                    limitScale: {
                      isLimit: true,
                      min: 0.2,
                      max: 1.5
                    },
                    limitX: {
                      isLimit: true,
                      min: -10,
                      max: 5
                    },
                    limitY: {
                      isLimit: true,
                      min: -8,
                      max: 8
                    }
                  }
                }
              ]
            }),
            'json'
          )
        }
      })
    }
  }, [])

  return (
    <>
      {/* 关于路由 */}
      <Router history={history}>
        <React.Suspense fallback={<SpinLoding />}>
          <Switch>
            <Route path='/' component={A1home} exact />
            <Route path='/base' component={A1_1base} exact />
            <Route path='/yblm' component={A2yblm} exact />
            <Route path='/beie' component={A3beie} exact />
            <Route path='/quanwen' component={A4quanwen} exact />
            <Route path='/wenwu' component={A5wenwu} exact />
            <Route path='/ybwx' component={A6ybwx} exact />
            <Route path='/wjwj' component={A7Wjwj} exact />
            <Route path='/zxys' component={A6_1_zxys} exact />
            <Route path='/sinicize' component={A6_2_zxzgh} exact />
            <Route path='/byzh' component={A8byzh} exact />
            <Route path='/knowlege' component={A9knowlege} exact />
            <Route path='/text' component={text} exact />
            <Route path='*' component={NotFound} />
          </Switch>
        </React.Suspense>
      </Router>

      {unityDel ? null : (
        <iframe style={{ display: 'none' }} id='modalIframe' title='modal' src=''></iframe>
      )}

      {/* 发送请求的加载组件 */}
      <AsyncSpinLoding />

      {/* 所有图片点击预览查看大图 */}
      {lookBigImg.show ? (
        <Image
          preview={{
            closeIcon: <img src={require('@/assets/img/closeWithTxt.png')} draggable='false' alt='' />,
            imageRender: (originalNode) => (
              <div className='previewImage'>
                <TouchContainer className='Ori'>{originalNode}</TouchContainer>
                <div className="ImgFromTxt">{lookBigImg.fromTxt}</div>
              </div>
            ),
            visible: lookBigImg.show,
            src: lookBigImg.url,
            onVisibleChange: value => {
              // 清除仓库信息
              store.dispatch({
                type: 'layout/lookBigImg',
                payload: { url: '', show: false, fromTxt: '' }
              })
            }
          }}
        />
      ) : null}

      <MessageCom />
    </>
  )
}