pref: 宿州登录页全景调试

src/pages/user/login/components/Krpano/index.js

-import {Preview} from '@wisdom-cesium/krpano'
+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2024-05-24 17:27:53
+ */
+import { Preview } from '@wisdom-cesium/krpano';
 
 const Krpano = props => {
+  const { projectName, loadedHook, sceneLoadedHook } = props;
 
-    const {projectName} = props
-    
-    return (<div
+  return (
+    <div
       style={{
-            position : "relative",
-            width : "100%",
-            height : "100%"
+        position: 'relative',
+        width: '100%',
+        height: '100%',
       }}
     >
-        <Preview projectName = {projectName}/>
-    </div>)
-}
+      <Preview projectName={projectName} loadedHook={loadedHook} sceneLoadedHook={sceneLoadedHook} />
+    </div>
+  );
+};
 
-export default Krpano
\ No newline at end of file
+export default Krpano;

src/pages/user/login/template/project/suzhou/index.js

@@ -5,7 +5,7 @@
  */
 
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
-
+import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
 import { Modal, Popover } from 'antd';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { connect } from 'react-redux';
@@ -39,7 +39,11 @@ const Login = forwardRef((props, _ref) => {
   const isValidate = true;
   const loginFormRef = useRef();
   const formRef = useRef(null);
+  const krpanoObjRef = useRef(null);
+  const krpanoRef = useRef(null);
+  const krpanoSceneIdRef = useRef(localStorage.getItem('loginKrpanoSceneId'));
   const [status, setStatus] = useState('normal');
+  const [showList, setShowList] = useState(true);
   const [autoLogin, setAutoLogin] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [type, setType] = useState('Account');
@@ -48,6 +52,7 @@ const Login = forwardRef((props, _ref) => {
   const [action, setAction] = useState(() => new LoginAction(Object.assign({}, props, { history }), setVisible, false));
   const [dateObj, setDateObj] = useState({});
   const { projectName } = props.loginParams;
+  const [tabShow, setTabShow] = useState(false);
   const handleSubmit = values => {
     /* eslint-disable */
     action &&
@@ -141,7 +146,26 @@ const Login = forwardRef((props, _ref) => {
     }
     return weekDayName;
   };
-
+  const onChangeShow = () => {
+    setShowList(!showList);
+  };
+  const loadedHook = ({ krpanoSwfObject, krpano, json, eventEmitter }) => {
+    krpanoObjRef.current = krpanoSwfObject;
+    if (krpanoSceneIdRef.current && krpanoObjRef.current) {
+      krpanoSwfObject.callKrpano(
+        `autorotate.interrupt();loadscene(${krpanoSceneIdRef.current},null, MERGE, BLEND(1.0))`,
+      );
+    }
+    krpanoRef.current = krpano;
+    window.krpano = krpano;
+    setTabShow(true);
+  };
+  const sceneLoadedHook = scenename => {
+    if (krpanoRef.current) {
+      const id = krpanoRef.current.get('xml.scene');
+      localStorage.setItem('loginKrpanoSceneId', id || null);
+    }
+  };
   useEffect(() => {
     const timer = setInterval(() => {
       setDateObj({
@@ -212,14 +236,30 @@ const Login = forwardRef((props, _ref) => {
             </QueueAnim>
           </div>
           {/* <div className={styles['copyright']}>
-            Copyright ©重庆泽足水务投资建设有限公司All Rights Reserved{' '}
-            <a target="_blank" id="IndexCaseNumber" href="https://beian.miit.gov.cn">
-              渝ICP备20000008号-2
+            Copyright ©水务投资建设有限公司All Rights Reserved{' '}
+            <a target="_blank" id="IndexCaseNumber" href="https://">
+              渝ICP备
             </a>
           </div> */}
         </div>
-        <div className={styles['krpano']}>
-          <Krpano projectName={projectName} />
+        <div className={classnames(styles['krpano'], 'suzhou_krpano', !showList ? 'suzhou_hideList' : '')}>
+          {tabShow ? (
+            <div className={classnames(styles.krpano_btn, 'krpano_btn')} onClick={onChangeShow}>
+              {showList ? (
+                <CaretDownOutlined className={styles.krpano_btn_icon} />
+              ) : (
+                <CaretUpOutlined className={styles.krpano_btn_icon} />
+              )}
+              切换全景
+            </div>
+          ) : null}
+
+          <Krpano
+            projectName={projectName}
+            style={{ background: '#fff' }}
+            loadedHook={loadedHook}
+            sceneLoadedHook={sceneLoadedHook}
+          />
         </div>
       </div>
     </HelmetProvider>

src/pages/user/login/template/project/suzhou/index.less

@@ -290,4 +290,57 @@
             background-color: #fff;
         }
     }
+
+    .suzhou_krpano {
+        .panda-krpano-es-preview-footer-footer-footerContainer .panda-krpano-es-preview-footer-footer-mask {
+            bottom: 0;
+            background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) 70%, rgba(0, 99, 163, 0.6))
+        }
+        .panda-krpano-es-preview-menu-menu-itemIcon{
+            display: none!important;
+        }
+    }
+
+    .suzhou_hideList {
+        .panda-krpano-es-preview-footer-footer-footerContainer .panda-krpano-es-preview-footer-footer-mask {
+            bottom: -130px;
+            transition: all 0.3s;
+        }
+
+        .krpano_btn {
+            bottom: 0px !important;
+            transition: all 0.3s;
+        }
+    }
+}
+
+.krpano {
+    .krpano_btn {
+        position: absolute;
+        bottom: 108px;
+        width: 130px;
+        height: 32px;
+        font-weight: bold;
+        font-size: 14px;
+        color: #FFFFFF;
+        text-align: center;
+        line-height: 32px;
+        left: calc(50% - 65px);
+        background: url(./images/展开bg.png) no-repeat center center !important;
+        background-size: 100% 100%;
+        z-index: 1000;
+        cursor: pointer;
+
+    }
+
+
+    .krpano_btn:active {
+        opacity: 0.8;
+    }
+
+    .krpano_btn_icon {
+        color: #fff;
+        margin-right: 3px;
+
+    }
 }
\ No newline at end of file