feat: --

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.20.55:8080/staticData/'
+const baseUrlLoc = 'http://192.168.0.18:8081/staticData/'
 
 const myBaseUrl = 'https://houseoss.4dkankan.com/project/henan/'
 
@@ -396,9 +396,9 @@ const erYuanArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 0,
+    atv: 0.96,
     // 水平方向
-    ath: 0,
+    ath: -31.06,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'visit2/hot/tag_jiuche.png',
     // 热点定位百分比
@@ -422,9 +422,9 @@ const erYuanArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 10,
+    atv: -4.68,
     // 水平方向
-    ath: 10,
+    ath: -11.37,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'visit2/hot/tag_zhangshou.png',
     // 热点定位百分比
@@ -448,9 +448,9 @@ const erYuanArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 10,
+    atv: -1.73,
     // 水平方向
-    ath: 10,
+    ath: -74.7,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'visit2/hot/tag_touhu.png',
     // 热点定位百分比
@@ -478,9 +478,9 @@ const erYuanArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 10,
+    atv: -34.95,
     // 水平方向
-    ath: 10,
+    ath: -8.59,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'visit2/hot/tag_yuanluo.png',
     // 热点定位百分比
@@ -514,9 +514,9 @@ const erYuanArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 10,
+    atv: -26.21,
     // 水平方向
-    ath: 10,
+    ath: -71.34,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'visit2/hot/tag_yuanlou.png',
     // 热点定位百分比
@@ -536,7 +536,7 @@ const erYuanArr = [
 
 // 主客宴请热点信息（后面的更多模块也会复用）
 const banquetHotArr = [
-  // 待完善 louType 字段 1=一楼 2=2楼 3=庭院 (字符串)
+  // louType 字段 1=一楼 2=2楼 3=庭院 (字符串)
   // 新加热点注意：isModel: true,表示是文物 图标有所不同
   // noShow: true,表示不再更多模块中显示（所有新加的热点带上这个字段）
   {
@@ -581,6 +581,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     // 热点名字
     name: '汉代家具',
     // 热点大小
@@ -614,6 +615,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     // 热点名字
     name: '汉代坐具',
     // 热点大小
@@ -654,6 +656,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -683,6 +686,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -717,6 +721,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -746,6 +751,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -776,6 +782,7 @@ const banquetHotArr = [
   },
 
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -800,14 +807,15 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '2',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
     noShow: true,
     name: '曲柄带盘蜡台',
     size: 0.5,
-    atv: 14.26,
-    ath: -45.19,
+    atv: -4.11,
+    ath: 32.34,
     hoverSrc: 'banquet/hot/hot80.png',
     // 热点定位百分比
     loc: {
@@ -824,6 +832,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     // 是否在更多模块中显示-true表示不显示
     noShow: true,
     name: '食案',
@@ -847,6 +856,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     // 是否在更多模块中显示-true表示不显示
     noShow: true,
     name: '箸',
@@ -868,6 +878,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -891,6 +902,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -914,14 +926,15 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '2',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
     noShow: true,
     name: '漆盒',
     size: 0.5,
-    atv: 20.97,
-    ath: -83.9,
+    atv: -3.97,
+    ath: 42.54,
     hoverSrc: 'banquet/hot/hot85.png',
     // 热点定位百分比
     loc: {
@@ -937,14 +950,15 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '2',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
     noShow: true,
     name: '“君幸食”小漆盘',
     size: 0.5,
-    atv: 17.19,
-    ath: -45.95,
+    atv: -3.87,
+    ath: 54.66,
     hoverSrc: 'banquet/hot/hot9.png',
     // 热点定位百分比
     loc: {
@@ -961,6 +975,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -984,14 +999,15 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '2',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
     noShow: true,
     name: '鎏金带盖铜炉',
     size: 0.5,
-    atv: 3.25,
-    ath: -50.84,
+    atv: -3.87,
+    ath: 58.98,
     hoverSrc: 'banquet/hot/hot88.png',
     // 热点定位百分比
     loc: {
@@ -1009,14 +1025,15 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '2',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
     noShow: true,
     name: '朱雀羽人飞龙彩绘陶灯',
     size: 0.5,
-    atv: 3.26,
-    ath: -26.71,
+    atv: -4.01,
+    ath: 88.61,
     hoverSrc: 'banquet/hot/hot89.png',
     // 热点定位百分比
     loc: {
@@ -1032,6 +1049,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -1055,6 +1073,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -1078,14 +1097,15 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '2',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
     noShow: true,
     name: '鎏金银云纹铜壶',
     size: 0.5,
-    atv: 1.45,
-    ath: 88.18,
+    atv: -3.98,
+    ath: 96.45,
     hoverSrc: 'banquet/hot/hot92.png',
     // 热点定位百分比
     loc: {
@@ -1101,14 +1121,15 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '2',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
     noShow: true,
     name: '铜鋞',
     size: 0.5,
-    atv: 8.09,
-    ath: -31.06,
+    atv: -3.98,
+    ath: 103.12,
     hoverSrc: 'banquet/hot/hot93.png',
     // 热点定位百分比
     loc: {
@@ -1124,14 +1145,15 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '2',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
     noShow: true,
     name: '鎏金铜素钫',
     size: 0.5,
-    atv: 1.41,
-    ath: -39.26,
+    atv: -3.98,
+    ath: 111.02,
     hoverSrc: 'banquet/hot/hot94.png',
     // 热点定位百分比
     loc: {
@@ -1147,6 +1169,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -1170,6 +1193,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -1193,14 +1217,15 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '2',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
     noShow: true,
     name: '彩漆卮',
     size: 0.5,
-    atv: 0.93,
-    ath: 50.78,
+    atv: -4.02,
+    ath: 64.68,
     hoverSrc: 'banquet/hot/hot97.png',
     // 热点定位百分比
     loc: {
@@ -1216,6 +1241,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -1239,6 +1265,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -1262,6 +1289,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     // 是否在更多模块中显示-true表示不显示
     noShow: true,
     name: '宴饮礼节',
@@ -1283,6 +1311,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     // 是否在更多模块中显示-true表示不显示
     noShow: true,
     name: '绿釉直颈陶投壶',
@@ -1311,6 +1340,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -1333,14 +1363,15 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '2',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
     noShow: true,
     name: '神兽纹博山炉',
     size: 0.5,
-    atv: 0.95,
-    ath: 34.17,
+    atv: -3.77,
+    ath: 49,
     hoverSrc: 'banquet/hot/hot104.png',
     // 热点定位百分比
     loc: {
@@ -1355,6 +1386,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -1377,6 +1409,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -1399,6 +1432,7 @@ const banquetHotArr = [
     ]
   },
   {
+    louType: '1',
     //是否是文物
     isModel: true,
     // 是否在更多模块中显示-true表示不显示
@@ -1815,9 +1849,9 @@ const xianJuArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 0,
+    atv: -32.63,
     // 水平方向
-    ath: 0,
+    ath: 47.45,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'xianJu/hot/tag_fuyinawa.png',
     // 热点定位百分比
@@ -1841,9 +1875,9 @@ const xianJuArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 0,
+    atv: -32.63,
     // 水平方向
-    ath: 0,
+    ath: -92.94,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'xianJu/hot/tag_fengshi.png',
     // 热点定位百分比
@@ -1867,9 +1901,9 @@ const xianJuArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 0,
+    atv: -34.3,
     // 水平方向
-    ath: 0,
+    ath: 130.02,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'xianJu/hot/tag_yushi.png',
     // 热点定位百分比
@@ -1893,9 +1927,9 @@ const xianJuArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 0,
+    atv: -32.76,
     // 水平方向
-    ath: 0,
+    ath: -30.8,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'xianJu/hot/tag_hebo.png',
     // 热点定位百分比
@@ -1919,9 +1953,9 @@ const xianJuArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 0,
+    atv: -34.81,
     // 水平方向
-    ath: 0,
+    ath: -140.88,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'xianJu/hot/tag_leishen.png',
     // 热点定位百分比
@@ -1945,9 +1979,9 @@ const xianJuArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 0,
+    atv: -61.02,
     // 水平方向
-    ath: 0,
+    ath: 18.91,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'xianJu/hot/tag_xianjieshen.png',
     // 热点定位百分比

Code/src/pages/A2visit2/A22Pano/index.module.scss

@@ -7,3 +7,7 @@
   :global {
   }
 }
+
+.pano {
+  height: 100%;
+}

Code/src/pages/A2visit2/A22Pano/index.tsx

@@ -1,18 +1,74 @@
 import React, { useState } from 'react'
 import styles from './index.module.scss'
-import { myData } from '@/utils/http'
+import { myData, otherUrl } from '@/utils/http'
 import Hot2 from '@/pages/A2visit/PanoVideo/Hot2'
+import { HotSpot, Krpano, Scene, View } from '@dage/krpano'
+import HotIcon from '@/components/HotIcon'
+
+// window.draggbleHotspotEvent = (ath: number, atv: number) => {
+//   console.log(`ath: ${ath}, atv: ${atv}`)
+// }
+
 function A22Pano() {
   const [acInd, setAcInd] = useState(-1)
+  const [activeIdx, setActiveIdx] = useState(-1)
 
   return (
     <div className={styles.A22Pano}>
-      待完善，全景图页面1
-      {myData.visit2.hot.map((item, index) => (
-        <div key={index} onClick={() => setAcInd(index)}>
-          {item.name}
-        </div>
-      ))}
+      <Krpano className={styles.pano} currentScene='a22'>
+        <Scene
+          name='a22'
+          previewUrl={otherUrl + 'pano/a22.tiles/thumb.jpg'}
+          imageTagAttributes={{
+            type: 'cube',
+            tileSize: 512,
+            multires: true
+          }}
+          images={[
+            {
+              tiledImageWidth: 1152,
+              tiledImageHeight: 1152,
+              url: otherUrl + 'pano/a22.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
+            },
+            {
+              tiledImageWidth: 1152,
+              tiledImageHeight: 1152,
+              url: otherUrl + 'pano/a22.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
+            }
+          ]}
+        >
+          <View hlookat={0} vlookat={0} fovType='MFOV' fov={120} fovMin={70} fovMax={130} />
+          {myData.visit2.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={() => setAcInd(index)}
+              // @ts-ignore
+              // onDown='draggable_hotspot()'
+            >
+              <HotIcon
+                isModel={item.isModel ? true : false}
+                key={index}
+                index={index}
+                isHoverAc={activeIdx === index}
+                hoverSrc={item.hoverSrc}
+                panoWidth='128px'
+              />
+            </HotSpot>
+          ))}
+        </Scene>
+      </Krpano>
+
       {acInd !== -1 ? (
         <Hot2
           data={myData.visit2.hot[acInd].data}

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

@@ -2,3 +2,56 @@
   :global {
   }
 }
+
+.pano {
+  width: 100%;
+  height: 100%;
+}
+
+.floorHotspot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 210px;
+  height: 63px;
+  font-size: 32px;
+  color: #b67150;
+  background: url('../../assets/img/icon-floor-1-min.png') no-repeat center / contain;
+
+  img {
+    width: 27px;
+    height: 27px;
+  }
+  span {
+    line-height: 1px;
+  }
+}
+
+.courtyardHotspot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  width: 227px;
+  height: 55px;
+  color: #fffddc;
+  font-size: 20px;
+  background: url('../../assets/img/next.png') no-repeat center / contain;
+
+  > p {
+    position: relative;
+    top: -3px;
+    font-size: 35px;
+  }
+}
+
+.indoorHotspot {
+  display: flex;
+  justify-content: center;
+  width: 210px;
+  height: 63px;
+  line-height: 56px;
+  color: #fffddc;
+  font-size: 32px;
+  background: url('../../assets/img/icon-floor-min.png') no-repeat center / contain;
+}

Code/src/pages/A3banPano/index.tsx

@@ -1,21 +1,186 @@
-import React, { useEffect } from 'react'
+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 { 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 { 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 [ind, setInd] = useState(-1)
+  const [activeIdx, setActiveIdx] = useState(-1)
+  const [curScene, setCurScene] = useState('')
 
   useEffect(() => {
     const id = urlObj.id
-    console.log(id)
+    setCurScene(id === '2' ? 'pano3' : 'pano4')
 
     // 数据 过滤 2=2楼 3=庭院
     // myData.banquet.hot.filter(v=>v.louType===id)
   }, [urlObj.id])
 
-  return <div className={styles.A3banPano}>待完善 宴饮 全景</div>
+  const data = useMemo(() => {
+    if (ind !== -1) return myData.banquet.hot[ind].data
+    else return []
+  }, [ind])
+
+  return (
+    <div className={styles.A3banPano}>
+      <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: 1152,
+              tiledImageHeight: 1152,
+              url: otherUrl + 'pano/pano3.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
+            },
+            {
+              tiledImageWidth: 1152,
+              tiledImageHeight: 1152,
+              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={() => 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>
+            ))}
+
+          <HotSpot
+            name='firstFloor'
+            type='text'
+            atv={-11.32}
+            ath={-18.68}
+            edge='top'
+            distorted={true}
+            scale={0.6}
+            bg={false}
+            onClick={() => {
+              history.push('/banquet')
+            }}
+            // @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')
+            }}
+          >
+            <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: 1152,
+              tiledImageHeight: 1152,
+              url: otherUrl + 'pano/pano4.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
+            },
+            {
+              tiledImageWidth: 1152,
+              tiledImageHeight: 1152,
+              url: otherUrl + 'pano/pano4.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
+            }
+          ]}
+        >
+          <View hlookat={50} vlookat={0} 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>
+
+      {ind === -1 ? null : (
+        <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.banquet.hot[ind].name} />
+      )}
+    </div>
+  )
 }
 
 const MemoA3banPano = React.memo(A3banPano)

Code/src/pages/A3banquet/PanoImg/index.module.scss

@@ -5,3 +5,22 @@
   // :global {
   // }
 }
+
+.floorHotspot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 210px;
+  height: 63px;
+  font-size: 32px;
+  color: #fffddc;
+  background: url('../../../assets/img/icon-floor-min.png') no-repeat center / contain;
+
+  img {
+    width: 40px;
+    height: 40px;
+  }
+  span {
+    line-height: 1px;
+  }
+}

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

@@ -3,8 +3,10 @@ import styles from './index.module.scss'
 import { myData, otherUrl } from '@/utils/http'
 import Hot2 from '@/pages/A2visit/PanoVideo/Hot2'
 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'
 
 // window.draggbleHotspotEvent = (ath: number, atv: number) => {
 //   console.log(`ath: ${ath}, atv: ${atv}`)
@@ -39,18 +41,13 @@ function PanoImg() {
             }}
             images={[
               {
-                tiledImageWidth: 2624,
-                tiledImageHeight: 2624,
-                url: otherUrl + 'pano/pano2.tiles/%s/l3/%v/l3_%s_%v_%h.jpg'
-              },
-              {
-                tiledImageWidth: 1280,
-                tiledImageHeight: 1280,
-                url: otherUrl + 'pano/pano2.tiles/%s/l2/%v/l2_%s_%v_%h.jpg'
+                tiledImageWidth: 1152,
+                tiledImageHeight: 1152,
+                url: otherUrl + 'pano/pano2.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
               },
               {
-                tiledImageWidth: 640,
-                tiledImageHeight: 640,
+                tiledImageWidth: 1152,
+                tiledImageHeight: 1152,
                 url: otherUrl + 'pano/pano2.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
               }
             ]}
@@ -68,7 +65,7 @@ function PanoImg() {
               vlookatMin={-90}
               vlookatMax={90}
             />
-            {/* 待完善 自己在的数据里面添加 字段louType 区分热点位置 1=一楼 2=2楼 3=庭院(字符串) */}
+            {/* 自己在的数据里面添加 字段louType 区分热点位置 1=一楼 2=2楼 3=庭院(字符串) */}
             {myData.banquet.hot
               .filter(c => c.louType === '1')
               .map((item, index) => (
@@ -99,6 +96,25 @@ function PanoImg() {
                   />
                 </HotSpot>
               ))}
+
+            <HotSpot
+              name='secondFloor'
+              type='text'
+              atv={-8.39}
+              ath={-33.73}
+              edge='top'
+              distorted={true}
+              scale={0.4}
+              bg={false}
+              onClick={() => {
+                history.push('/banPano/2')
+              }}
+            >
+              <div className={styles.floorHotspot}>
+                <img src={FloorHotspotIcon} className={styles.floorHotspotIcon} alt='' />
+                <span>二楼</span>
+              </div>
+            </HotSpot>
           </Scene>
         </Krpano>
       </KrpanoMiddleware>

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

@@ -4,3 +4,7 @@
   :global {
   }
 }
+
+.PanoVideo {
+  height: 100%;
+}

Code/src/pages/A6xian/A6PanoVideo/index.tsx

@@ -1,23 +1,86 @@
-import React, { useState } from 'react'
+import React, { useRef, useState } from 'react'
 import styles from './index.module.scss'
-import { myData } from '@/utils/http'
+import { myData, otherUrl } from '@/utils/http'
 import Hot2 from '@/pages/A2visit/PanoVideo/Hot2'
+import { KrpanoMiddleware, KrpanoMiddlewareMethods } from '@/components/KrpanoMiddleware'
+import { HotSpot, Krpano, VideoScene, videoSceneModel, View } from '@dage/krpano'
+import HotIcon from '@/components/HotIcon'
+
+// window.draggbleHotspotEvent = (ath: number, atv: number) => {
+//   console.log(`ath: ${ath}, atv: ${atv}`)
+// }
+
 function A6PanoVideo() {
-  const [acInd, setAcInd] = useState(-1)
+  const [ind, setInd] = useState(-1)
+  const [activeIdx, setActiveIdx] = useState(-1)
+  const middlewareIns = useRef<KrpanoMiddlewareMethods>(null)
 
   return (
     <div className={styles.A6PanoVideo}>
-      待完善，全景视频
-      {myData.xianJu.hot.map((item, index) => (
-        <div key={index} onClick={() => setAcInd(index)}>
-          {item.name}
-        </div>
-      ))}
-      {acInd !== -1 ? (
+      <KrpanoMiddleware ref={middlewareIns}>
+        <Krpano
+          className={styles.PanoVideo}
+          currentScene='scene1'
+          onReady={() => {
+            middlewareIns.current?.ready()
+          }}
+        >
+          <VideoScene
+            name='scene1'
+            videointerfaceXmlUrl='/skin/videointerface.xml'
+            videoplayerUrl='/plugins/videoplayer.js'
+            sourceList={[
+              {
+                res: '2000x1000',
+                url: otherUrl + 'pano/2.mp4',
+                poster: ''
+              }
+            ]}
+            playRes='2000x1000'
+            onVisibility={() => {
+              if (document.visibilityState === 'visible') {
+                videoSceneModel.play()
+              }
+            }}
+          >
+            <View hlookat={0} vlookat={0} fovType='MFOV' fov={120} fovMin={70} fovMax={130} />
+            {myData.xianJu.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
+                  isModel={item.isModel ? true : false}
+                  key={index}
+                  index={index}
+                  isHoverAc={activeIdx === index}
+                  hoverSrc={item.hoverSrc}
+                  panoWidth='113px'
+                />
+              </HotSpot>
+            ))}
+          </VideoScene>
+        </Krpano>
+      </KrpanoMiddleware>
+
+      {ind !== -1 ? (
         <Hot2
-          data={myData.xianJu.hot[acInd].data}
-          closeFu={() => setAcInd(-1)}
-          name={myData.xianJu.hot[acInd].name}
+          data={myData.xianJu.hot[ind].data}
+          closeFu={() => setInd(-1)}
+          name={myData.xianJu.hot[ind].name}
         />
       ) : null}
     </div>