gx

pano/src/components/Pano/index.tsx

@@ -15,7 +15,7 @@ interface ISceneProps extends Partial<SceneProps> {
   thumbUrl?: string
 }
 
-const Panoramic = ({ openHot }: { openHot: () => void }) => {
+const Panoramic = ({ openHot }: { openHot: (id: string) => void }) => {
   const [currentScene, setCurrentScene] = useState('center2')
   window.setCurrentScene = (name: string) => {
     setCurrentScene(name)
@@ -85,15 +85,15 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
               // onHover={() => setHotspotHover(true)}
               // onOut={() => setHotspotHover(false)}
               // onDown='draggable_hotspot()'
-              onClick={() =>{ 
+              onClick={() => {
                 setCurrentScene('p1')
-                if(window.parent){
+                if (window.parent) {
                   window.parent.window.setIsHotPano(true)
                 }
               }}
             >
-              <div className='A0hotspot' >
-                  <div className='text'>建筑名称</div>
+              <div className='A0hotspot'>
+                <div className='text'>建筑名称</div>
               </div>
             </HotSpot>
           </>
@@ -130,13 +130,13 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             <View
               {...(isMobileFu()
                 ? {
-                  hlookat: 12,
-                  vlookat: 30
-                }
+                    hlookat: 12,
+                    vlookat: 30
+                  }
                 : {
-                  hlookat: 15,
-                  vlookat: 32
-                })}
+                    hlookat: 15,
+                    vlookat: 32
+                  })}
               fovType='MFOV'
               fov={120}
               maxPixelZoom={2}
@@ -158,10 +158,13 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             />
           </>
         )
-      },  {
+      },
+      {
         name: 'p1',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s1.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s1.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s1.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s1.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -212,7 +215,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
               // onHover={() => setHotspotHover(true)}
               // onOut={() => setHotspotHover(false)}
               // onDown='draggable_hotspot()'
-              onClick={() => openHot()}
+              onClick={() => {
+                console.log('click')
+                openHot('hot1')
+              }}
             >
               <div className='A1hotspot' />
             </HotSpot>
@@ -221,8 +227,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p2',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s2.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s2.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s2.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s2.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -248,8 +256,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p3',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s3.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s3.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s3.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s3.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -275,8 +285,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p4',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s4.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s4.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s4.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s4.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -302,8 +314,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p5',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s5.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s5.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s5.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s5.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -329,8 +343,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p6',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s6.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s6.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s6.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s6.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -356,8 +372,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p7',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s7.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s7.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s7.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s7.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -383,8 +401,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p8',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s8.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s8.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s8.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s8.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -410,8 +430,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p9',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s9.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s9.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s9.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s9.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -437,8 +459,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p10',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s10.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s10.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s10.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s10.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -464,8 +488,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p11',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s11.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s11.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s11.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s11.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -491,8 +517,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p12',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s12.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s12.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s12.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s12.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -518,8 +546,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p13',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s13.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s13.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s13.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s13.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -545,8 +575,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p14',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s14.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s14.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s14.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s14.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -572,8 +604,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p15',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s15.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s15.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s15.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s15.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -599,8 +633,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p16',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s16.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s16.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s16.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s16.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -626,8 +662,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p17',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s17.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s17.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s17.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s17.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -653,8 +691,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p18',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s18.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s18.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s18.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s18.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -680,8 +720,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: 'p19',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s19.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/s19.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s19.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/s19.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -707,8 +749,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: '1',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/1.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/1.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/1.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/1.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -739,8 +783,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
       },
       {
         name: '10',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/10.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/10.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/10.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/10.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -766,13 +812,15 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             tiledImageWidth: 768,
             tiledImageHeight: 768,
             url: 'https://houseoss.4dkankan.com/project/jining/test/panos/10.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
-          },
+          }
         ]
       },
       {
         name: '11',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/11.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/11.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/11.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/11.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -804,8 +852,10 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
 
       {
         name: '12',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/12.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/12.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/12.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/12.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -831,12 +881,15 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             tiledImageWidth: 768,
             tiledImageHeight: 768,
             url: 'https://houseoss.4dkankan.com/project/jining/test/panos/12.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
-          },
+          }
         ]
-      }, {
+      },
+      {
         name: '13',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/13.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/13.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/13.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/13.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -864,10 +917,13 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             url: 'https://houseoss.4dkankan.com/project/jining/test/panos/13.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
           }
         ]
-      }, {
+      },
+      {
         name: '14',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/14.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/14.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/14.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/14.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -895,10 +951,13 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             url: 'https://houseoss.4dkankan.com/project/jining/test/panos/14.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
           }
         ]
-      }, {
+      },
+      {
         name: '15',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/15.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/15.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/15.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/15.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -924,12 +983,15 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             tiledImageWidth: 768,
             tiledImageHeight: 768,
             url: 'https://houseoss.4dkankan.com/project/jining/test/panos/15.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
-          },
+          }
         ]
-      }, {
+      },
+      {
         name: '16',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/16.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/16.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/16.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/16.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -955,12 +1017,15 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             tiledImageWidth: 768,
             tiledImageHeight: 768,
             url: 'https://houseoss.4dkankan.com/project/jining/test/panos/16.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
-          },
+          }
         ]
-      }, {
+      },
+      {
         name: '17',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/17.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/17.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/17.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/17.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -986,12 +1051,15 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             tiledImageWidth: 768,
             tiledImageHeight: 768,
             url: 'https://houseoss.4dkankan.com/project/jining/test/panos/17.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
-          },
+          }
         ]
-      }, {
+      },
+      {
         name: '18',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/18.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/18.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/18.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/18.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -1019,10 +1087,13 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             url: 'https://houseoss.4dkankan.com/project/jining/test/panos/18.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
           }
         ]
-      }, {
+      },
+      {
         name: '19',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/19.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/19.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/19.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/19.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -1050,10 +1121,13 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             url: 'https://houseoss.4dkankan.com/project/jining/test/panos/19.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
           }
         ]
-      }, {
+      },
+      {
         name: '2',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/2.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/2.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/2.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/2.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -1081,10 +1155,13 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             url: 'https://houseoss.4dkankan.com/project/jining/test/panos/2.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
           }
         ]
-      }, {
+      },
+      {
         name: '20',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/20.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/20.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/20.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/20.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -1110,12 +1187,15 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             tiledImageWidth: 768,
             tiledImageHeight: 768,
             url: 'https://houseoss.4dkankan.com/project/jining/test/panos/20.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
-          },
+          }
         ]
-      }, {
+      },
+      {
         name: '21',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/21.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/21.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/21.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/21.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -1143,10 +1223,13 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             url: 'https://houseoss.4dkankan.com/project/jining/test/panos/21.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
           }
         ]
-      }, {
+      },
+      {
         name: '22',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/22.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/22.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/22.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/22.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -1174,10 +1257,13 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             url: 'https://houseoss.4dkankan.com/project/jining/test/panos/22.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
           }
         ]
-      }, {
+      },
+      {
         name: '23',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/23.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/23.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/23.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/23.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -1205,10 +1291,13 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             url: 'https://houseoss.4dkankan.com/project/jining/test/panos/23.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
           }
         ]
-      }, {
+      },
+      {
         name: '24',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/24.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/24.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/24.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/24.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -1234,12 +1323,15 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             tiledImageWidth: 768,
             tiledImageHeight: 768,
             url: 'https://houseoss.4dkankan.com/project/jining/test/panos/24.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
-          },
+          }
         ]
-      }, {
+      },
+      {
         name: '25',
-        thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/25.tiles/thumb.jpg',
-        previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/25.tiles/preview.jpg',
+        thumbUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/25.tiles/thumb.jpg',
+        previewUrl:
+          'https://houseoss.4dkankan.com/project/jining/test/panos/25.tiles/preview.jpg',
         imageTagAttributes: {
           type: 'cube',
           tileSize: 512,
@@ -1265,7 +1357,7 @@ const Panoramic = ({ openHot }: { openHot: () => void }) => {
             tiledImageWidth: 768,
             tiledImageHeight: 768,
             url: 'https://houseoss.4dkankan.com/project/jining/test/panos/25.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
-          },
+          }
         ]
       }
     ],

pano/src/pages/A1home/index.tsx

@@ -4,9 +4,10 @@ import Panoramic from '../../components/Pano'
 
 
 function A1home() {
-  const openHot = () => {
+  const openHot = (id: string) => {
     if (window.parent) {
-      window.parent.window.openPoem()
+      console.log('setActiveHotId', id)
+      window.parent.window.setActiveHotId(id)
     } else {
       console.log('parent is null')
     }

pano/src/types/function.d.ts

@@ -2,7 +2,7 @@
 declare global {
   interface Window {
     setIsHotPano: (isHotPano: boolean) => void
-    openPoem: () => void
+    setActiveHotId: (id: string) => void
     setCurrentScene: (name: string) => void
   }
 }

project/public/myData/myData.js

@@ -55,6 +55,26 @@ const myDataTemp = {
             thumbUrl: '',
         }
     ],
+    panoHotList: [
+        {
+            id: 'hot1',
+            name:'场景名称',
+            desc:'场景描述',
+            thumbUrl: 'myData/img/Atest.png',
+            videoSrc: 'myData/media/bgVideo.mp4',
+            imgList: ['myData/img/Atest.png', 'myData/img/Atest.png', 'myData/img/Atest.png'],
+            modelSrc: 'https://4dscene.4dage.com/culturalrelics/EYWSQBWG/Model2.html?m=eywsq69',
+        },
+        {
+            id: 'hot2',
+            name:'场景名称',
+            desc:'场景描述',
+            thumbUrl: 'myData/img/Atest.png',
+            videoSrc: 'myData/media/bgVideo.mp4',
+            imgList: ['myData/img/Atest.png', 'myData/img/Atest.png', 'myData/img/Atest.png'],
+            modelSrc: 'https://4dscene.4dage.com/culturalrelics/EYWSQBWG/Model2.html?m=eywsq69',
+        },
+    ],
     architectureAnimation: 'myData/media/bgVideo.mp4',
     memberList: [
         {

project/src/pages/A0base/index.module.scss

@@ -36,7 +36,7 @@
     }
     .process {
       height: 30%;
-      font-size: 18px;
+      font-size: 1.2vw;
       line-height: 40px;
       color: rgba(141, 104, 64, 1);
       text-align: center;

project/src/pages/A1home/PanoHot/Swiper2/index.module.scss

@@ -0,0 +1,101 @@
+.SwiperComponent2 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  :global {
+    .leftArrow,
+    .rightArrow {
+      position: absolute;
+      z-index: 1;
+      top: 50%;
+      left: 1%;
+      width: 3vw;
+      height: 3vw;
+      object-fit: contain;
+      cursor: pointer;
+      & > img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    .rightArrow {
+      left: auto;
+      right: 1%;
+    }
+    .swiper_container {
+      width: 100%;
+      height: 100%;
+      perspective: 1500px;
+      .swiper-slide-shadow-coverflow {
+        background-image: none;
+      }
+      .swiper-button-arr-custom {
+        width: 50px;
+        height: 65px;
+        &:after {
+          content: '';
+        }
+        & > img {
+          width: 50px;
+          height: 55px;
+          object-fit: cover;
+        }
+      }
+      .itemCard {
+        border-radius: 20px;
+        margin: 0 auto;
+        width: 70%;
+        height: 100%;
+        position: relative;
+        cursor: pointer;
+        transition: transform 0.3s ease;
+        .itemImageImg {
+          margin-top: 13%;
+          width: 100%;
+          height: 80%;
+          object-fit: cover;
+          transition: all 0.3s ease;
+
+          .detailIcon {
+            position: absolute;
+            bottom: 5%;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 20%;
+            height: 20%;
+            object-fit: contain;
+            display: none;
+          }
+        }
+        &.itemCardActive {
+          .itemImage {
+            background-image: url('../../../../assets/img/A6_life_selected.png');
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            background-position: center center;
+          }
+          .detailIcon {
+            display: block;
+          }
+        }
+      }
+    }
+    .swiper-pagination {
+      height: 30vh;
+      position: relative;
+      top: 4%;
+      left: 0%;
+      display: flex;
+      justify-content: center;
+      gap: 4.6vw;
+      .swiper-pagination-bullet {
+        padding: 2.5vw;
+        opacity: 0;
+      }
+      .swiper-pagination-bullet-active {
+        background-color: #9d0800;
+      }
+    }
+  }
+}

project/src/pages/A1home/PanoHot/Swiper2/index.tsx

@@ -0,0 +1,53 @@
+import React, { useRef } from 'react'
+import styles from './index.module.scss'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import 'swiper/css'
+import 'swiper/css/effect-coverflow'
+import 'swiper/css/pagination'
+import 'swiper/css/navigation'
+import { EffectCoverflow } from 'swiper/modules'
+function SwiperComponent2({
+  activeIndex
+}: {
+  activeIndex: number
+}) {
+  const swiperRef = useRef<any>(null)
+  return (
+    <div className={styles.SwiperComponent2}>
+      <Swiper
+        ref={swiperRef}
+        loop={false}
+        loopPreventsSliding={false}
+        effect={'coverflow'}
+        grabCursor={true}
+        centeredSlides={true}
+        slidesPerView={1}
+        pagination={false}
+        className='swiper_container'
+        onTransitionEnd={(swiper: any) => {
+          const swiperInternal = swiper as { loopFix: () => void }
+          swiperInternal.loopFix()
+        }}
+      >
+        {myDataTemp.panoHotList[activeIndex]?.imgList?.map((item: string, index: number) => (
+          <SwiperSlide key={index}>
+            <div className={`itemCard ${activeIndex === index ? 'itemCardActive' : ''}`}>
+                <img className='itemImageImg' src={item} alt='' />
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+
+      <div className='leftArrow' onClick={() => swiperRef.current?.swiper?.slidePrev()}>
+        <img src={require('../../../../assets/img/A6_life_left.png')} alt='' />
+      </div>
+      <div className='rightArrow' onClick={() => swiperRef.current?.swiper?.slideNext()}>
+        <img src={require('../../../../assets/img/A6_life_right.png')} alt='' />
+      </div>
+    </div>
+  )
+}
+
+const MemoSwiperComponent2 = React.memo(SwiperComponent2)
+
+export default MemoSwiperComponent2

project/src/pages/A1home/PanoHot/index.module.scss

@@ -0,0 +1,105 @@
+  .PanoHot {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 200;
+    background-color: rgba(70, 47, 9, 0.6);
+    backdrop-filter: blur(5px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .content {
+      position: absolute;
+      top: 2vw;
+      left: 2vh;
+      width: 20vw;
+      height: 30vh;
+      .title {
+        width: 100%;
+        height: fit-content;
+        margin-bottom: 10px;
+        font-size: 1.5vw;
+        font-weight: 500;
+        color: rgba(249, 211, 109, 1);
+      }
+      .desc {
+        width: 100%;
+        height: fit-content;
+        font-size: 1vw;
+        line-height: 1.5;
+        color: rgba(255, 243, 197, 1);
+      }
+    }
+    .top {
+      width: 67%;
+      height: 80%;
+      .model{
+        padding: 4% 10%;
+        width: 100%;
+        height: 100%;
+        & > iframe {
+          width: 100%;
+          height: 100%;
+          border: none;
+          object-fit: contain;
+        }
+      }
+      .img {
+        width: 100%;
+        height: 100%;
+      }
+      .video {
+        padding: 4% 10%;
+        width: 100%;
+        height: 100%;
+        & > video {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+    }
+    .bottom {
+      width: 100%;
+      height: 20%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 0.5%;
+      padding-bottom: 4%;
+      position: relative;
+      .closeBtn {
+        position: absolute;
+        bottom: 15%;
+        right: 50%;
+        transform: translateX(50%);
+        width: 3vw;
+        height: 3vw;
+        cursor: pointer;
+        & > img {
+          width: 100% ;
+          height: 100% ;
+        }
+      }
+      .tab {
+        width: 9vw;
+        height: 9vh;
+        background-image: url('../../../assets/img/A1_home_tab.png');
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: rgba(112, 73, 7, 1);
+        font-size: 1vw;
+        &.active {
+          color: rgba(255, 243, 197, 1);
+          background-image: url('../../../assets/img/A1_home_tab_ac.png');
+        }
+      }
+    }
+}

project/src/pages/A1home/PanoHot/index.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from "react";
+import styles from "./index.module.scss";
+import SwiperComponent2 from "./Swiper2";
+ function PanoHot({activeIndex}: {activeIndex: number}) {
+  const [type, setType] = useState('')
+  
+  useEffect(() => {
+    setType('model')
+  }, [])
+  return (
+    <div className={styles.PanoHot}>
+      <div className={styles.content}>
+        <div className={styles.title}>{myDataTemp.panoHotList[activeIndex]?.name}</div>
+        <div className={styles.desc}>{myDataTemp.panoHotList[activeIndex]?.desc}</div>
+      </div>
+    <div className={styles.top}>
+      {/* model */}
+      {type === 'model' ? <div className={styles.model}>
+        <iframe src={myDataTemp.panoHotList[activeIndex]?.modelSrc || ''} title="model" />
+      </div> : null}
+      {/* video */}
+      {type === 'video' ? <div className={styles.video}>
+        <video src={myDataTemp.panoHotList[activeIndex]?.videoSrc || ''} controls loop />
+      </div> : null}
+      {/* img */}
+      {type === 'img' ? <div className={styles.img}>
+        <SwiperComponent2 activeIndex={0} />
+      </div> : null}
+    </div>
+    <div className={styles.bottom}>
+      <div className={`${styles.tab} ${type === 'model' ? styles.active : ''}`} onClick={() => setType('model')}>模型</div>
+      <div className={`${styles.tab} ${type === 'video' ? styles.active : ''}`} onClick={() => setType('video')}>视频</div>
+      <div className={`${styles.tab} ${type === 'img' ? styles.active : ''}`} onClick={() => setType('img')}>图片</div>
+      <div className={styles.closeBtn}>
+        <img src={require('../../../assets/img/close.png')} alt="" />
+      </div>
+    </div>
+    </div>
+  )
+}
+
+const MemoPanoHot = React.memo(PanoHot);
+
+export default MemoPanoHot;

project/src/pages/A1home/index.tsx

@@ -2,12 +2,15 @@ import React, { useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import MenuSider from '@/components/MenuSider'
 import { callIframeFu } from '@/utils/history'
+import PanoHot from './PanoHot'
 function A1home() {
   const [isOpenPano, setIsOpenPano] = useState(false)
   const [isShowDetail, setIsShowDetail] = useState(false)
   const [currentSceneIndex, setCurrentSceneIndex] = useState(0)
   // 是否进入二级页面
   const [isHotPano, setIsHotPano] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(-1)
+ 
   const scrollRef = useRef<HTMLDivElement>(null)
   const sceneList = myDataTemp.sceneList
   const totalScenes = sceneList.length
@@ -16,6 +19,13 @@ function A1home() {
     window.setIsHotPano = (isHotPano: boolean) => {
       setIsHotPano(isHotPano)
     }
+     window.setActiveHotId = (id: string) => {
+      console.log('setActiveHotId222', id)
+      const index = myDataTemp.panoHotList.findIndex((item: any) => item.id === id)
+      if (index !== -1) {
+        setActiveIndex(index)
+      }
+    }
   }, [])
 
   const handleItemClick = (item: any, index: number) => {
@@ -64,6 +74,7 @@ function A1home() {
       {isOpenPano ? (
         <>
           <iframe id='panoIframe' src='https://houseoss.4dkankan.com/project/gmlx/Pano/index.html' title='pono'></iframe>
+        {activeIndex !== -1 &&  <PanoHot activeIndex={activeIndex} />}
           {/* 详情按钮-只在二级页面显示 */}
           {isHotPano && (
             <div className={styles.skipBtn} onClick={() => setIsShowDetail(!isShowDetail)}>

project/src/types/declaration.d.ts

@@ -19,6 +19,7 @@ type MyDataType = {
   isLdong: boolean
   siderData: { title: string; path: string }[]
   sceneList: { id: string; name: string; thumbUrl: string }[]
+  panoHotList: { id: string; name: string; desc: string; thumbUrl: string; videoSrc: string; imgList: string[]; modelSrc: string }[]
   architectureAnimation: string
   memberList: { name: string; nameEn: string; imgSrc: string; imgSrcLight: string; videoSrc: string }[]
   lifeList: { name: string; time: string; imgSrc: string; videoSrc?: string; desc: string }[]

project/src/types/function.d.ts

@@ -2,6 +2,7 @@
 declare global {
   interface Window {
     setIsHotPano: (isHotPano: boolean) => void
+    setActiveHotId: (id: string) => void
   }
 }