HeNan_HanJia/Code/src/pages/A3banPano/index.tsx

import React, { useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { useParams } from 'react-router-dom'
import { HotSpot, Krpano, Scene, View } from '@dage/krpano'
import { baseURL, myData, otherUrl } from '@/utils/http'
import HotIcon from '@/components/HotIcon'
import Hot2 from '../A2visit/PanoVideo/Hot2'
import history from '@/utils/history'
import FloorHotspotIcon from '@/assets/img/icon-flo-1.png'
import { ArrowLeftOutlined } from '@ant-design/icons'
import FloorBtn from '@/components/FloorBtn'
import { KrpanoMiddleware } from '@/components/KrpanoMiddleware'
import CatVideo from '@/components/CatVideo'
// import { myData } from '@/utils/http'

window.draggbleHotspotEvent = (ath: number, atv: number) => {
  console.log(`ath: ${ath}, atv: ${atv}`)
}

function A3banPano() {
  // 路由：/banPano/id
  const urlObj: any = useParams()
  // 0为 第一种模式的热点 其他为第二种
  const [acName, setAcName] = useState('')
  const [activeIdx, setActiveIdx] = useState(-1)
  const [curScene, setCurScene] = useState('')

  useEffect(() => {
    const id = urlObj.id
    setCurScene(id === '2' ? 'pano3' : 'pano4')

    // 数据 过滤 2=2楼 3=庭院
    // myData.banquet.hot.filter(v=>v.louType===id)
  }, [urlObj.id])

  const info = useMemo(() => {
    let infoRes: any = {}
    if (acName) infoRes = myData.banquet.hot.find(v => v.name === acName)
    return infoRes
  }, [acName])

  // 点击观赏庭院 先播放视频
  const [videoPlay, setVideoPlay] = useState(false)

  return (
    <div className={styles.A3banPano}>
      <KrpanoMiddleware>
        <Krpano className={styles.pano} currentScene={curScene}>
          <Scene
            name='pano3'
            previewUrl={otherUrl + 'pano/pano3.tiles/thumb.jpg'}
            imageTagAttributes={{
              type: 'cube',
              tileSize: 512,
              multires: true
            }}
            images={[
              {
                tiledImageWidth: 1280,
                tiledImageHeight: 1280,
                url: otherUrl + 'pano/pano3.tiles/%s/l2/%v/l2_%s_%v_%h.jpg'
              },
              {
                tiledImageWidth: 640,
                tiledImageHeight: 640,
                url: otherUrl + 'pano/pano3.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
              }
            ]}
          >
            <View hlookat={180} vlookat={0} fovType='MFOV' fov={120} fovMin={70} fovMax={130} />
            {/* 自己在的数据里面添加 字段louType 区分热点位置 1=一楼 2=2楼 3=庭院(字符串) */}
            {myData.banquet.hot
              .filter(c => c.louType === '2')
              .map((item, index) => (
                // 热点图标
                <HotSpot
                  key={index}
                  type='text'
                  name={item.name}
                  atv={item.atv}
                  ath={item.ath}
                  edge='top'
                  distorted={true}
                  scale={1}
                  bg={false}
                  onOver={() => setActiveIdx(index)}
                  onOut={() => setActiveIdx(-1)}
                  onClick={() => setAcName(item.name)}
                  // @ts-ignore
                  // onDown='draggable_hotspot()'
                >
                  <HotIcon
                    isPano
                    isModel={item.isModel ? true : false}
                    key={index}
                    index={index}
                    isHoverAc={activeIdx === index}
                    hoverSrc={item.hoverSrc}
                  />
                </HotSpot>
              ))}

            <HotSpot
              name='firstFloor'
              type='text'
              atv={-11.32}
              ath={-18.68}
              edge='top'
              distorted={true}
              scale={0.6}
              bg={false}
              onClick={() => {
                history.push('/banquet?r=ren')
              }}
              // @ts-ignore
              // onDown='draggable_hotspot()'
            >
              <div className={styles.floorHotspot}>
                <img src={FloorHotspotIcon} className={styles.floorHotspotIcon} alt='' />
                <span>返回一楼</span>
              </div>
            </HotSpot>

            <HotSpot
              name='courtyard'
              type='text'
              atv={-12.8}
              ath={135.43}
              edge='top'
              distorted={true}
              scale={0.6}
              bg={false}
              onClick={() => {
                history.replace('/banPano/3')

                setVideoPlay(true)
              }}
            >
              <div className={styles.courtyardHotspot}>
                <ArrowLeftOutlined rev={undefined} />
                <p>观赏庭院</p>
              </div>
            </HotSpot>
          </Scene>

          <Scene
            name='pano4'
            previewUrl={otherUrl + 'pano/pano4.tiles/thumb.jpg'}
            imageTagAttributes={{
              type: 'cube',
              tileSize: 512,
              multires: true
            }}
            images={[
              {
                tiledImageWidth: 1280,
                tiledImageHeight: 1280,
                url: otherUrl + 'pano/pano4.tiles/%s/l2/%v/l2_%s_%v_%h.jpg'
              },
              {
                tiledImageWidth: 640,
                tiledImageHeight: 640,
                url: otherUrl + 'pano/pano4.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
              }
            ]}
          >
            <View hlookat={75} vlookat={10} fovType='MFOV' fov={120} fovMin={70} fovMax={130} />

            <HotSpot
              name='indoor'
              type='text'
              atv={1.58}
              ath={58.54}
              edge='top'
              distorted={true}
              scale={0.6}
              bg={false}
              onClick={() => {
                history.replace('/banPano/2')
              }}
            >
              <div className={styles.indoorHotspot}>
                <p>返回室内</p>
              </div>
            </HotSpot>
          </Scene>
        </Krpano>
      </KrpanoMiddleware>

      <CatVideo
        isShow={videoPlay}
        src={baseURL + 'visit2/观赏庭院.mp4'}
        noDel={true}
        parentFu={() => {
          setVideoPlay(false)
        }}
      />

      {/* 右下角按钮 */}
      {videoPlay ? null : <FloorBtn />}

      {acName && info && info.data ? (
        <Hot2 data={info.data} closeFu={() => setAcName('')} name={info.name} />
      ) : null}
    </div>
  )
}

const MemoA3banPano = React.memo(A3banPano)

export default MemoA3banPano