feat: --

Code/src/pages/A2visit/PanoVideo/index.tsx

@@ -40,7 +40,7 @@ function PanoVideo() {
               {
                 res: '2000x1000',
                 url: otherUrl + 'pano/1.mp4',
-                poster: otherUrl + 'pano/pano1.jpg'
+                poster: otherUrl + 'pano/pano2.jpg'
               }
             ]}
             playRes='2000x1000'

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

@@ -4,6 +4,7 @@ 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'
+import { KrpanoMiddleware } from '@/components/KrpanoMiddleware'
 
 // window.draggbleHotspotEvent = (ath: number, atv: number) => {
 //   console.log(`ath: ${ath}, atv: ${atv}`)
@@ -15,64 +16,66 @@ function A22Pano() {
 
   return (
     <div className={styles.A22Pano}>
-      <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: 2816,
-              tiledImageHeight: 2816,
-              url: otherUrl + 'pano/a22.tiles/%s/l3/%v/l3_%s_%v_%h.jpg'
-            },
-            {
-              tiledImageWidth: 1536,
-              tiledImageHeight: 1536,
-              url: otherUrl + 'pano/a22.tiles/%s/l2/%v/l2_%s_%v_%h.jpg'
-            },
-            {
-              tiledImageWidth: 768,
-              tiledImageHeight: 768,
-              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}
+      <KrpanoMiddleware>
+        <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: 2816,
+                tiledImageHeight: 2816,
+                url: otherUrl + 'pano/a22.tiles/%s/l3/%v/l3_%s_%v_%h.jpg'
+              },
+              {
+                tiledImageWidth: 1536,
+                tiledImageHeight: 1536,
+                url: otherUrl + 'pano/a22.tiles/%s/l2/%v/l2_%s_%v_%h.jpg'
+              },
+              {
+                tiledImageWidth: 768,
+                tiledImageHeight: 768,
+                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}
-                index={index}
-                isHoverAc={activeIdx === index}
-                hoverSrc={item.hoverSrc}
-                panoWidth='128px'
-              />
-            </HotSpot>
-          ))}
-        </Scene>
-      </Krpano>
+                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>
+      </KrpanoMiddleware>
 
       {acInd !== -1 ? (
         <Hot2

Code/src/pages/A3banPano/index.tsx

@@ -9,6 +9,7 @@ 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 { myData } from '@/utils/http'
 
 window.draggbleHotspotEvent = (ath: number, atv: number) => {
@@ -38,161 +39,153 @@ function A3banPano() {
 
   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: 2816,
-              tiledImageHeight: 2816,
-              url: otherUrl + 'pano/pano3.tiles/%s/l3/%v/l3_%s_%v_%h.jpg'
-            },
-            {
-              tiledImageWidth: 1536,
-              tiledImageHeight: 1536,
-              url: otherUrl + 'pano/pano3.tiles/%s/l2/%v/l2_%s_%v_%h.jpg'
-            },
-            {
-              tiledImageWidth: 768,
-              tiledImageHeight: 768,
-              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?r=ren')
+      <KrpanoMiddleware>
+        <Krpano className={styles.pano} currentScene={curScene}>
+          <Scene
+            name='pano3'
+            previewUrl={otherUrl + 'pano/pano3.tiles/thumb.jpg'}
+            imageTagAttributes={{
+              type: 'cube',
+              tileSize: 512,
+              multires: true
             }}
-            // @ts-ignore
-            // onDown='draggable_hotspot()'
+            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'
+              }
+            ]}
           >
-            <div className={styles.floorHotspot}>
-              <img src={FloorHotspotIcon} className={styles.floorHotspotIcon} alt='' />
-              <span>返回一楼</span>
-            </div>
-          </HotSpot>
+            <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='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>
+            <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>
 
-        <Scene
-          name='pano4'
-          previewUrl={otherUrl + 'pano/pano4.tiles/thumb.jpg'}
-          imageTagAttributes={{
-            type: 'cube',
-            tileSize: 512,
-            multires: true
-          }}
-          images={[
-            {
-              tiledImageWidth: 2816,
-              tiledImageHeight: 2816,
-              url: otherUrl + 'pano/pano4.tiles/%s/l3/%v/l3_%s_%v_%h.jpg'
-            },
-            {
-              tiledImageWidth: 1536,
-              tiledImageHeight: 1536,
-              url: otherUrl + 'pano/pano4.tiles/%s/l2/%v/l2_%s_%v_%h.jpg'
-            },
-            {
-              tiledImageWidth: 768,
-              tiledImageHeight: 768,
-              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='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>
 
-          <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')
+          <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'
+              }
+            ]}
           >
-            <div className={styles.indoorHotspot}>
-              <p>返回室内</p>
-            </div>
-          </HotSpot>
-        </Scene>
-      </Krpano>
+            <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>
 
-      {/* 右下角按钮 */}
-      <FloorBtn />
+        {/* 右下角按钮 */}
+        <FloorBtn />
 
-      {ind === -1 ? null : (
-        <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.banquet.hot[ind].name} />
-      )}
+        {ind === -1 ? null : (
+          <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.banquet.hot[ind].name} />
+        )}
+      </KrpanoMiddleware>
     </div>
   )
 }