upp

Code/public/myData/myData.js

@@ -388,7 +388,7 @@ const visitHotArr = [
 
 // 主客宴请热点信息（后面的更多模块也会复用）
 const banquetHotArr = [
-  // 待完善 louType 字段
+  // 待完善 louType 字段 1=一楼 2=2楼 3=庭院 (字符串)
   {
     louType: '1',
     // 热点名字
@@ -3159,7 +3159,7 @@ const myDataTemp = {
       }
     ]
   },
-  // 仙居世界(静态资源目录位置：staticData/xian)
+  // 仙居世界（对应页面hots）(静态资源目录位置：staticData/xian)
   xian: [
     // 这里id不要自己修改！
     {

Code/src/App.tsx

@@ -18,6 +18,7 @@ const A1_1base = React.lazy(() => import('./pages/A1_1base'))
 const A2visit = React.lazy(() => import('./pages/A2visit'))
 const A2visit2 = React.lazy(() => import('./pages/A2visit2'))
 const A3banquet = React.lazy(() => import('./pages/A3banquet'))
+const A3banPano = React.lazy(() => import('./pages/A3banPano'))
 const A4dance = React.lazy(() => import('./pages/A4dance'))
 const A5chef = React.lazy(() => import('./pages/A5chef'))
 const A6plow = React.lazy(() => import('./pages/A6plow'))
@@ -164,6 +165,7 @@ export default function App() {
             <Route path='/visit' component={A2visit} exact />
             <Route path='/visit2' component={A2visit2} exact />
             <Route path='/banquet' component={A3banquet} exact />
+            <Route path='/banPano/:id' component={A3banPano} exact />
             <Route path='/dance' component={A4dance} exact />
             <Route path='/chef' component={A5chef} exact />
             <Route path='/plow' component={A6plow} exact />

Code/src/pages/A3banPano/index.module.scss

@@ -0,0 +1,4 @@
+.A3banPano {
+  :global {
+  }
+}

Code/src/pages/A3banPano/index.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react'
+import styles from './index.module.scss'
+import { useParams } from 'react-router-dom'
+// import { myData } from '@/utils/http'
+function A3banPano() {
+  // 路由：/banPano/id
+
+  const urlObj: any = useParams()
+
+  useEffect(() => {
+    const id = urlObj.id
+    console.log(id)
+
+    // 数据 过滤 2=2楼 3=庭院
+    // myData.banquet.hot.filter(v=>v.louType===id)
+  }, [urlObj.id])
+
+  return <div className={styles.A3banPano}>待完善 宴饮 全景</div>
+}
+
+const MemoA3banPano = React.memo(A3banPano)
+
+export default MemoA3banPano

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

@@ -68,35 +68,37 @@ function PanoImg() {
               vlookatMin={-90}
               vlookatMax={90}
             />
-            {/* 待完善 自己在的数据里面添加 字段louType 区分热点位置 1=一楼 2=2楼 3=庭院 */}
-            {myData.banquet.hot.map((item, index) => (
-              // 热点图标
-              <HotSpot
-                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={() => setInd(index)}
-                // @ts-ignore
-                // onDown='draggable_hotspot()'
-              >
-                <HotIcon
-                  isPano
-                  isModel={item.isModel ? true : false}
+            {/* 待完善 自己在的数据里面添加 字段louType 区分热点位置 1=一楼 2=2楼 3=庭院(字符串) */}
+            {myData.banquet.hot
+              .filter(c => c.louType === '1')
+              .map((item, index) => (
+                // 热点图标
+                <HotSpot
                   key={index}
-                  index={index}
-                  isHoverAc={activeIdx === index}
-                  hoverSrc={item.hoverSrc}
-                />
-              </HotSpot>
-            ))}
+                  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={() => setInd(index)}
+                  // @ts-ignore
+                  // onDown='draggable_hotspot()'
+                >
+                  <HotIcon
+                    isPano
+                    isModel={item.isModel ? true : false}
+                    key={index}
+                    index={index}
+                    isHoverAc={activeIdx === index}
+                    hoverSrc={item.hoverSrc}
+                  />
+                </HotSpot>
+              ))}
           </Scene>
         </Krpano>
       </KrpanoMiddleware>

Code/src/pages/A6xian/index.module.scss

@@ -1,5 +1,11 @@
 .A6xian {
   :global {
+    video {
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
+    }
+
     .pvBox {
       position: absolute;
       width: 100%;

Code/src/types/declaration.d.ts

@@ -58,6 +58,7 @@ type MyDataType = {
       ath: number
       hoverSrc: string
       data: VisitHotDataType
+      louType: '1' | '2' | '3'
     }[]
   }