upp

Code/src/components/Zhot/type.d.ts

@@ -44,6 +44,8 @@ export type HotInfoType = {
   cheQi2: HotRowType[]
   cheQiCove: HotRowType[]
   yanYing1: HotRowType[]
+  yanYing2: HotRowType[]
+  yanYing3: HotRowType[]
   周礼九拜: {
     name: string
     tubiao: '普通' | '文物'

Code/src/pages/A3banPano/index.tsx

@@ -1,18 +1,19 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, 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 { baseURL, hotInfo, 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 Zhot from '@/components/Zhot'
 // import { myData } from '@/utils/http'
 
+// 待完善位置
 window.draggbleHotspotEvent = (ath: number, atv: number) => {
   console.log(`ath: ${ath}, atv: ${atv}`)
 }
@@ -20,8 +21,9 @@ window.draggbleHotspotEvent = (ath: number, atv: number) => {
 function A3banPano() {
   // 路由：/banPano/id
   const urlObj: any = useParams()
-  // 0为 第一种模式的热点 其他为第二种
+  // 热点
   const [acName, setAcName] = useState('')
+
   const [activeIdx, setActiveIdx] = useState(-1)
   const [curScene, setCurScene] = useState('')
 
@@ -33,12 +35,6 @@ function A3banPano() {
     // 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)
 
@@ -68,37 +64,34 @@ function A3banPano() {
             ]}
           >
             <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
+            {hotInfo.yanYing2.map((item, index) => (
+              // 热点图标
+              <HotSpot
+                key={index}
+                type='text'
+                name={item.name}
+                atv={item.panoLoc.atv}
+                ath={item.panoLoc.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.tubiao === '文物' ? true : false}
                   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>
-              ))}
+                  index={index}
+                  isHoverAc={activeIdx === index}
+                  hoverSrc={item.hoverSrc}
+                />
+              </HotSpot>
+            ))}
 
             <HotSpot
               name='firstFloor'
@@ -113,7 +106,7 @@ function A3banPano() {
                 history.push('/banquet?r=ren')
               }}
               // @ts-ignore
-              // onDown='draggable_hotspot()'
+              onDown='draggable_hotspot()'
             >
               <div className={styles.floorHotspot}>
                 <img src={FloorHotspotIcon} className={styles.floorHotspotIcon} alt='' />
@@ -166,6 +159,35 @@ function A3banPano() {
           >
             <View hlookat={75} vlookat={10} fovType='MFOV' fov={120} fovMin={70} fovMax={130} />
 
+            {hotInfo.yanYing3.map((item, index) => (
+              // 热点图标
+              <HotSpot
+                key={index}
+                type='text'
+                name={item.name}
+                atv={item.panoLoc.atv}
+                ath={item.panoLoc.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.tubiao === '文物' ? true : false}
+                  key={index}
+                  index={index}
+                  isHoverAc={activeIdx === index}
+                  hoverSrc={item.hoverSrc}
+                />
+              </HotSpot>
+            ))}
+
             <HotSpot
               name='indoor'
               type='text'
@@ -199,9 +221,7 @@ function A3banPano() {
       {/* 右下角按钮 */}
       {videoPlay ? null : <FloorBtn />}
 
-      {acName && info && info.data ? (
-        <Hot2 data={info.data} closeFu={() => setAcName('')} name={info.name} />
-      ) : null}
+      {acName ? <Zhot name={acName} closeFu={() => setAcName('')} /> : null}
     </div>
   )
 }

Code/src/pages/A3banquet/PanoImg/index.tsx

@@ -1,29 +1,25 @@
-import React, { useMemo, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 import styles from './index.module.scss'
-import { myData, otherUrl } from '@/utils/http'
-import Hot2 from '@/pages/A2visit/PanoVideo/Hot2'
+import { hotInfo, otherUrl } from '@/utils/http'
 import HotIcon from '@/components/HotIcon'
 import history from '@/utils/history'
 import { KrpanoMiddleware, KrpanoMiddlewareMethods } from '@/components/KrpanoMiddleware'
 import { HotSpot, Krpano, Scene, View } from '@dage/krpano'
 import FloorHotspotIcon from '@/assets/img/icon-flo-min.png'
+import Zhot from '@/components/Zhot'
 
-// window.draggbleHotspotEvent = (ath: number, atv: number) => {
-//   console.log(`ath: ${ath}, atv: ${atv}`)
-// }
+// 待完善位置
+window.draggbleHotspotEvent = (ath: number, atv: number) => {
+  console.log(`ath: ${ath}, atv: ${atv}`)
+}
 
 function PanoImg() {
-  // 0为 第一种模式的热点 其他为第二种
+  //热点
   const [acName, setAcName] = useState('')
+
   const [activeIdx, setActiveIdx] = useState(-1)
   const middlewareIns = useRef<KrpanoMiddlewareMethods>(null)
 
-  const info = useMemo(() => {
-    let infoRes: any = {}
-    if (acName) infoRes = myData.banquet.hot.find(v => v.name === acName)
-    return infoRes
-  }, [acName])
-
   return (
     <>
       <KrpanoMiddleware ref={middlewareIns}>
@@ -67,36 +63,34 @@ function PanoImg() {
               vlookatMax={90}
             />
             {/* 自己在的数据里面添加 字段louType 区分热点位置 1=一楼 2=2楼 3=庭院(字符串) */}
-            {myData.banquet.hot
-              .filter(c => c.louType === '1')
-              .map((item, index) => (
-                // 热点图标
-                <HotSpot
+            {hotInfo.yanYing1.map((item, index) => (
+              // 热点图标
+              <HotSpot
+                key={index}
+                type='text'
+                name={item.name}
+                atv={item.panoLoc.atv}
+                ath={item.panoLoc.ath}
+                edge='top'
+                distorted={true}
+                scale={item.panoLoc.size}
+                bg={false}
+                onOver={() => setActiveIdx(index)}
+                onOut={() => setActiveIdx(-1)}
+                onClick={() => setAcName(item.name)}
+                // @ts-ignore
+                onDown='draggable_hotspot()'
+              >
+                <HotIcon
+                  isPano
+                  isModel={item.tubiao === '文物' ? true : false}
                   key={index}
-                  type='text'
-                  name={item.name}
-                  atv={item.atv}
-                  ath={item.ath}
-                  edge='top'
-                  distorted={true}
-                  scale={item.size}
-                  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>
-              ))}
+                  index={index}
+                  isHoverAc={activeIdx === index}
+                  hoverSrc={item.hoverSrc}
+                />
+              </HotSpot>
+            ))}
 
             <HotSpot
               name='secondFloor'
@@ -120,9 +114,7 @@ function PanoImg() {
         </Krpano>
       </KrpanoMiddleware>
 
-      {acName && info && info.data ? (
-        <Hot2 data={info.data} closeFu={() => setAcName('')} name={info.name} />
-      ) : null}
+      {acName ? <Zhot name={acName} closeFu={() => setAcName('')} /> : null}
     </>
   )
 }