修复全景热点传索引打开错乱的问题

Code/public/myData/myData.js

@@ -3,7 +3,7 @@ window.isHH = document.documentElement.clientWidth >= document.documentElement.c
 const isPcTemp = document.documentElement.clientWidth >= 1200
 
 // 本地开发静态资源目录
-const baseUrlLoc = ' http://192.168.0.18:8081/staticData/'
+const baseUrlLoc = ' http://192.168.20.55:8080/staticData/'
 
 const myBaseUrl = 'https://houseoss.4dkankan.com/project/henan/'
 

Code/src/pages/A3banPano/index.tsx

@@ -19,7 +19,7 @@ function A3banPano() {
   // 路由：/banPano/id
   const urlObj: any = useParams()
   // 0为 第一种模式的热点 其他为第二种
-  const [ind, setInd] = useState(-1)
+  const [acName, setAcName] = useState('')
   const [activeIdx, setActiveIdx] = useState(-1)
   const [curScene, setCurScene] = useState('')
 
@@ -31,10 +31,11 @@ function A3banPano() {
     // myData.banquet.hot.filter(v=>v.louType===id)
   }, [urlObj.id])
 
-  const data = useMemo(() => {
-    if (ind !== -1) return myData.banquet.hot[ind].data
-    else return []
-  }, [ind])
+  const info = useMemo(() => {
+    let infoRes: any = {}
+    if (acName) infoRes = myData.banquet.hot.find(v => v.name === acName)
+    return infoRes
+  }, [acName])
 
   return (
     <div className={styles.A3banPano}>
@@ -83,7 +84,7 @@ function A3banPano() {
                 bg={false}
                 onOver={() => setActiveIdx(index)}
                 onOut={() => setActiveIdx(-1)}
-                onClick={() => setInd(index)}
+                onClick={() => setAcName(item.name)}
                 // @ts-ignore
                 // onDown='draggable_hotspot()'
               >
@@ -190,9 +191,9 @@ function A3banPano() {
       {/* 右下角按钮 */}
       <FloorBtn />
 
-      {ind === -1 ? null : (
-        <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.banquet.hot[ind].name} />
-      )}
+      {acName && info && info.data ? (
+        <Hot2 data={info.data} closeFu={() => setAcName('')} name={info.name} />
+      ) : null}
     </div>
   )
 }

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

@@ -14,14 +14,15 @@ import FloorHotspotIcon from '@/assets/img/icon-flo-min.png'
 
 function PanoImg() {
   // 0为 第一种模式的热点 其他为第二种
-  const [ind, setInd] = useState(-1)
+  const [acName, setAcName] = useState('')
   const [activeIdx, setActiveIdx] = useState(-1)
   const middlewareIns = useRef<KrpanoMiddlewareMethods>(null)
 
-  const data = useMemo(() => {
-    if (ind !== -1) return myData.banquet.hot[ind].data
-    else return []
-  }, [ind])
+  const info = useMemo(() => {
+    let infoRes: any = {}
+    if (acName) infoRes = myData.banquet.hot.find(v => v.name === acName)
+    return infoRes
+  }, [acName])
 
   return (
     <>
@@ -87,7 +88,7 @@ function PanoImg() {
                   bg={false}
                   onOver={() => setActiveIdx(index)}
                   onOut={() => setActiveIdx(-1)}
-                  onClick={() => setInd(index)}
+                  onClick={() => setAcName(item.name)}
                   // @ts-ignore
                   // onDown='draggable_hotspot()'
                 >
@@ -124,9 +125,9 @@ function PanoImg() {
         </Krpano>
       </KrpanoMiddleware>
 
-      {ind === -1 ? null : (
-        <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.banquet.hot[ind].name} />
-      )}
+      {acName && info && info.data ? (
+        <Hot2 data={info.data} closeFu={() => setAcName('')} name={info.name} />
+      ) : null}
     </>
   )
 }