全景不使用页面嵌套

README.md

@@ -1,3 +1,20 @@
-<!-- 修改了入口index=>show.html
-\node_modules\react-scripts\config\paths.js
-在public\info里面找到最新的 替换过去 -->
+暂时使用官网数据，后续一起部署到甲方服务器
+
+1.甲方服务器 使用 VPN：Hillstone Secure Connect 这个软件
+
+VPN 服务器地址：183.56.239.251 端口 14433
+
+账号密码：operationMS3/Gddx@2021
+
+2.堡垒机：
+服务器地址：10.10.0.250
+账号密码：root/6!aM8SS9
+路径：var/www/html
+
+3.域名：
+https://airshow.4dkankan.com/show.html
+
+(
+react 的打包和运行修改入口文件比较麻烦。
+直接在 pubilc 里面新建了一个 show.html，重定向到 index.html。
+)

public/index.html

@@ -7,6 +7,9 @@
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!-- 导入全景需要的js -->
+    <script src="./info/tour.js"></script>
+    <!-- 导入自定义数据js -->
     <script src="./info/index.js"></script>
 
     <!--

src/assets/styles/base.css

@@ -177,7 +177,7 @@ textarea {
     pointer-events: auto;
   }
 }
-.activeTxt p div {
+.activeTxt p .sorrlSpan {
   animation: txtMove 8s linear infinite;
 }
 @keyframes txtMove {

src/assets/styles/base.less

@@ -219,7 +219,7 @@ textarea {
 }
 
 // 首页的动画
-.activeTxt p div {
+.activeTxt p .sorrlSpan {
   animation: txtMove 8s linear infinite;
 }
 

src/pages/A1home/Bottom/index.module.scss

@@ -69,7 +69,7 @@
               text-overflow: ellipsis;
               white-space: nowrap;
             }
-            & > div {
+            .sorrlSpan {
               position: relative;
               display: inline-block;
               height: 100%;
@@ -87,6 +87,7 @@
         }
         .activeTxt {
           border-color: var(--themeColor);
+          pointer-events: none;
           p {
             opacity: 1;
             background-color: rgba(255, 255, 255, 0.6);
@@ -129,6 +130,7 @@
         .active {
           opacity: 1;
           border: 1px solid var(--themeColor);
+          pointer-events: none;
         }
       }
     }

src/pages/A1home/Bottom/index.tsx

@@ -8,10 +8,10 @@ import { MyList1Type, MyObjRowType } from './data'
 
 type Props = {
   setTopObj: (val: MyObjRowType) => void
-  isPageShow: boolean
+  pageKey: '首页' | '室内' | '室外'
 }
 
-function Bottom({ setTopObj, isPageShow = false }: Props) {
+function Bottom({ setTopObj, pageKey }: Props) {
   const srollRef = useRef<HTMLDivElement>(null)
   const srollRef2 = useRef<HTMLDivElement>(null)
   const mousemoveFu = useCallback((ev: any, dom: HTMLDivElement | null) => {
@@ -76,7 +76,7 @@ function Bottom({ setTopObj, isPageShow = false }: Props) {
 
   const [codeArr, setCodeArr] = useState<MyObjRowType[]>([])
 
-  const [code, setCode] = useState<{ type: 'kk' | 'qj'; mm: string }>({ type: 'kk', mm: '' })
+  const [code, setCode] = useState('')
 
   useEffect(() => {
     console.log('code:', code)
@@ -86,7 +86,7 @@ function Bottom({ setTopObj, isPageShow = false }: Props) {
   useEffect(() => {
     if (ac1) {
       const arr: MyObjRowType[] = Reflect.get(myObj, ac1) || []
-      setCode({ type: 'qj', mm: arr[0].sceneCode })
+      setCode(arr[0].sceneCode)
       setCodeArr(arr)
       setTopObj(arr[0])
       setTimeout(() => {
@@ -101,13 +101,16 @@ function Bottom({ setTopObj, isPageShow = false }: Props) {
   const setAcObj = useCallback(
     (info: MyObjRowType) => {
       setTopObj(info)
-      setCode({ type: 'qj', mm: info.sceneCode })
+      setCode(info.sceneCode)
     },
     [setTopObj]
   )
 
   return (
-    <div hidden={isPageShow} className={classNames(styles.Bottom, isShow ? '' : styles.BottomHide)}>
+    <div
+      hidden={pageKey === '首页'}
+      className={classNames(styles.Bottom, isShow ? '' : styles.BottomHide)}
+    >
       <div className='B1box'>
         <div
           className='B1box_1 mySorrl'
@@ -118,7 +121,7 @@ function Bottom({ setTopObj, isPageShow = false }: Props) {
             <div
               onClick={() => setAcObj(item)}
               key={item.id}
-              className={classNames(code.mm === item.sceneCode ? 'activeTxt' : '')}
+              className={classNames(code === item.sceneCode ? 'activeTxt' : '')}
             >
               {/* 图片路径待完善 */}
               <LazyImg
@@ -129,10 +132,10 @@ function Bottom({ setTopObj, isPageShow = false }: Props) {
                 }
               />
               <p>
-                {code.mm === item.sceneCode ? (
-                  <div>
+                {code === item.sceneCode ? (
+                  <span className='sorrlSpan'>
                     {item.sceneTitle}&emsp;&emsp;{item.sceneTitle}&emsp;&emsp;{item.sceneTitle}
-                  </div>
+                  </span>
                 ) : (
                   <span>{item.sceneTitle}</span>
                 )}

src/pages/A1home/index.module.scss

@@ -99,6 +99,7 @@
       transform: translateX(-50%) translateY(0);
       width: 40%;
       top: 20px;
+      white-space: nowrap;
       background: linear-gradient(
         90deg,
         transparent,
@@ -120,6 +121,10 @@
         width: 100%;
         height: 100%;
       }
+      #panoBox {
+        width: 100%;
+        height: 100%;
+      }
     }
 
     @media screen and (max-width: 1000px) {
@@ -166,6 +171,9 @@
           }
         }
       }
+      .A1title {
+        width: calc(100% - 80px);
+      }
     }
   }
 }

src/pages/A1home/index.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 
 import classNames from 'classnames'
-import { isMobileFu } from '@/utils/history'
 
 import '@/assets/styles/iconfont/iconfont.css'
 
@@ -16,17 +15,17 @@ import { MyObjRowType, WKID } from './Bottom/data'
 function A1home() {
   const audioRef = useRef<HTMLAudioElement>(null)
 
-  const clickBtn = useCallback(() => {
-    setBaseShow(false)
+  const clickBtn = useCallback((val: '首页' | '室内' | '室外') => {
+    setPageKey(val)
     setAudioSta(true)
   }, [])
 
-  // 首页的显示和隐藏
-  const [baseShow, setBaseShow] = useState(true)
+  // 首页/室内/室外
+  const [pageKey, setPageKey] = useState<'首页' | '室内' | '室外'>('首页')
 
   useEffect(() => {
     if (window.location.href.includes('?type=kj')) {
-      setBaseShow(false)
+      setPageKey('室外')
     }
   }, [])
 
@@ -44,25 +43,50 @@ function A1home() {
   const [acObj, setAcObj] = useState({} as MyObjRowType)
 
   useEffect(() => {
-    console.log('acObj:', acObj)
-  }, [acObj])
+    if (acObj.type && acObj.type !== 'kk') {
+      // 加载全景
+      embedpano({
+        // 地址待完善
+        swf: `//www.4dkankan.com/panorama/showviewer/lib/krpano/tour.swf`,
+        xml: `//4dkk.4dage.com/720yun_fd_manage/${WKID}/tour.xml`,
+        target: 'panoBox',
+        html5: 'auto',
+        mobilescale: 1.0,
+        passQueryParameters: true
+      })
+    }
+  }, [acObj.type])
+
+  useEffect(() => {
+    // 切换全景
+    const code = acObj.sceneCode
+    const krpano: any = document.getElementById('krpanoSWFObject')
+    if (krpano && code) {
+      krpano.call(`loadscene(scene_${code}, null,null, BLEND(1.0, easeInCubic) )`)
+    }
+  }, [acObj.sceneCode])
 
   return (
     <div className={styles.A1home}>
       <audio ref={audioRef} src={bgmMp3} loop />
       {/* 初始页面 */}
-      <div className='box1' hidden={!baseShow}>
-        <img className='b1logo' src={logoImg} alt='' />
-
-        <div className='b1Btn'>
-          <img className='b1img' src={top4Img} alt='' />
-          <ul>
-            {/* 待完善 */}
-            <li style={{ opacity: 0, pointerEvents: 'none' }}>展馆漫游</li>
-            <li onClick={clickBtn}>展区漫游</li>
-          </ul>
+      {pageKey === '首页' ? (
+        <div className='box1'>
+          <img className='b1logo' src={logoImg} alt='' />
+
+          <div className='b1Btn'>
+            <img className='b1img' src={top4Img} alt='' />
+            <ul>
+              {/* 待完善 */}
+              <li onClick={() => clickBtn('室内')} style={{ opacity: 0, pointerEvents: 'none' }}>
+                展馆漫游
+              </li>
+              <li onClick={() => clickBtn('室外')}>展区漫游</li>
+            </ul>
+          </div>
         </div>
-      </div>
+      ) : null}
+
       {/* 右侧按钮 */}
       <div className='v_aside'>
         <ul>
@@ -83,26 +107,25 @@ function A1home() {
       {/* 分享页面 */}
       <Share isShow={share} closeFu={() => setShare(false)} />
       {/* 底部页面 */}
-      <Bottom setTopObj={val => setAcObj(val)} isPageShow={baseShow} />
+      <Bottom setTopObj={val => setAcObj(val)} pageKey={pageKey} />
       {/* 顶部title */}
       {acObj.sceneCode ? (
         <>
-          {/* <div className='A1title'>{acObj.sceneTitle}</div> */}
+          <div className='A1title'>{acObj.sceneTitle}</div>
 
           <div className='iframeBox'>
-            {/* 地址待完善 */}
-            <iframe
-              key={acObj.sceneCode}
-              src={
-                acObj.type === 'kk'
-                  ? `https://www.4dkankan.com/spg.html?m=${acObj.sceneCode}&hideNav`
-                  : `https://www.4dkankan.com/panorama/${
-                      isMobileFu() ? 'airShowMobile' : 'airShow'
-                    }.html?id=${WKID}&vr=${acObj.sceneCode}`
-              }
-              frameBorder='0'
-              title='qj'
-            ></iframe>
+            {/* 四维看看 地址待完善*/}
+            {acObj.type === 'kk' ? (
+              <iframe
+                key={acObj.sceneCode}
+                src={`https://www.4dkankan.com/spg.html?m=${acObj.sceneCode}&hideNav`}
+                frameBorder='0'
+                title='qj'
+              ></iframe>
+            ) : (
+              // 加载全景
+              <div id='panoBox'></div>
+            )}
           </div>
         </>
       ) : null}

src/types/declaration.d.ts

@@ -8,7 +8,11 @@ declare module '*.svg'
 declare module 'js-export-excel'
 declare module 'braft-utils'
 
-// public/myData.js 里面的一些数据的类型
+// public/info/index.js 里面的自定义数据类型
 declare const KKlist1Temp
 declare const KKobjTemp
 declare const WKIDTEMP
+
+// 全国图加载数据
+
+declare const embedpano: any