up

project/public/myData/myData.js

@@ -2,9 +2,6 @@ window.isHH = document.documentElement.clientWidth >= document.documentElement.c
 
 const isPcTemp = document.documentElement.clientWidth >= 1200
 
-// 发送请求基地址
-// const apiUrlTemp = 'https://sit-taiyuanczb.4dage.com/api/'
-
 // 一些动态配置的数据
 const myDataTemp = {
   siderData: [

project/public/three/data.js

@@ -1,3 +1,8 @@
+// 本地运行静态资源地址
+const baseOssUrl1 = 'http://192.168.20.55:8080'
+// 部署服务器静态资源地址
+const baseOssUrl2 = '.'
+
 const cardNames = [
   {
     id: 1,

project/src/pages/A5view/PageSon/A5model/index.module.scss

@@ -1,4 +1,55 @@
 .A5model {
+  width: 100%;
+  height: 100%;
+  position: relative;
   :global {
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+    .A5Mclose {
+      cursor: pointer;
+      position: absolute;
+      bottom: 3%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 4vw;
+      height: auto;
+    }
+    .A5Mtxt {
+      position: absolute;
+      top: 2%;
+      left: 1%;
+
+      & > h3 {
+        color: #f9d36d;
+        font-size: 24px;
+        font-weight: 700;
+        letter-spacing: 2px;
+      }
+      .A5Mrow {
+        margin-top: 1vh;
+        color: var(--themeColor2);
+        font-size: 16px;
+        display: flex;
+        flex-wrap: wrap;
+        & > div {
+          font-weight: 700;
+        }
+      }
+    }
+
+    .A5Mbtn {
+      position: absolute;
+      right: 2%;
+      bottom: 3%;
+      img {
+        cursor: pointer;
+        display: block;
+        margin-top: 1.5vw;
+        width: 3vw;
+        height: auto;
+      }
+    }
   }
 }

project/src/pages/A5view/PageSon/A5model/index.tsx

@@ -1,21 +1,89 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import { infoPageIDGet } from '@/utils/locStore'
 import history from '@/utils/history'
+import { urlCanRes } from '@/utils/urlCan'
+import { MessageFu } from '@/utils/message'
+import { baseOssUrl } from '@/utils/http'
 
 function A5model() {
+  const [info, setInfo] = useState<any>({})
+
+  useEffect(() => {
+    const id = urlCanRes()
+    if (typeof id === 'number') {
+      const obj = cardNames.find(v => v.id === id)
+      if (obj) setInfo(obj)
+      else MessageFu.warning('id错误')
+    } else MessageFu.warning('id错误')
+  }, [])
+
+  const txtArr = useMemo(() => {
+    let arr: any[] = []
+
+    if (info.id) {
+      const obj = info.obj
+      for (const k in obj) {
+        arr.push({ name: k, txt: obj[k] })
+      }
+    }
+    return arr
+  }, [info.id, info.obj])
+
+  // 点击按钮
+  const btnFu = useCallback((val: string) => {
+    const dom: any = document.querySelector('#A5Mmodel')
+    if (dom) {
+      if (dom.contentWindow && dom.contentWindow.webview) dom.contentWindow.webview[val]()
+    }
+  }, [])
+
   return (
     <div className={styles.A5model}>
-      <h1 style={{ color: '#fff' }}>模型页面</h1>
-      <h1
-        style={{ color: '#fff' }}
-        onClick={() => {
-          const key = infoPageIDGet()
-          history.replace(`/view/${key}`)
-        }}
-      >
-        返回
-      </h1>
+      {info.id ? (
+        <>
+          <iframe
+            id='A5Mmodel'
+            src={`${baseOssUrl}/modelSS/index.html?m=${info.id}`}
+            title='model'
+            frameBorder='0'
+          ></iframe>
+
+          {/* 左上角内容 */}
+          <div className='A5Mtxt'>
+            <h3>{info.name}</h3>
+            {txtArr.map(item => (
+              <div className='A5Mrow' key={item.name}>
+                <div>{item.name}：</div>
+                <p>{item.txt}</p>
+              </div>
+            ))}
+          </div>
+
+          {/* 关闭按钮 */}
+          <img
+            onClick={() => {
+              const key = infoPageIDGet()
+              history.replace(`/view/${key}`)
+            }}
+            className='A5Mclose'
+            src={require('@/assets/three/close.png')}
+            alt=''
+          />
+
+          {/* 右侧按钮 */}
+          <div className='A5Mbtn'>
+            {['zoomIn', 'zoomOut', 'resetView'].map(item => (
+              <img
+                onClick={() => btnFu(item)}
+                key={item}
+                src={require(`@/assets/three/${item}.png`)}
+                alt=''
+              />
+            ))}
+          </div>
+        </>
+      ) : null}
     </div>
   )
 }

project/src/pages/A5view/PageSon/A5win/index.module.scss

@@ -35,7 +35,7 @@
         padding: 5%;
         z-index: 2;
         & > h3 {
-          color: var(--themeColor2);
+          color: #f9d36d;
           font-size: 24px;
           font-weight: 700;
           letter-spacing: 2px;

project/src/pages/A5view/PageSon/A5win/index.tsx

@@ -47,13 +47,13 @@ function A5win({ id, closeFu }: Props) {
                 <img
                   src={require('@/assets/three/icG.png')}
                   alt=''
-                  onClick={() => history.replace('/view/atlas')}
+                  onClick={() => history.replace(`/view/atlas?id=${info.id}`)}
                 />
                 <img src={require('@/assets/three/icX.png')} alt='' onClick={closeFu} />
                 <img
                   src={require('@/assets/three/icM.png')}
                   alt=''
-                  onClick={() => history.replace('/view/model')}
+                  onClick={() => history.replace(`/view/model?id=${info.id}`)}
                 />
               </div>
             </>

project/src/pages/A5view/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import styles from './index.module.scss'
 import { useParams } from 'react-router-dom'
 import A5Three from './PageSon/A5Three'

project/src/types/declaration.d.ts

@@ -8,12 +8,12 @@ declare module 'js-export-excel'
 declare module 'braft-utils'
 declare module 'react-virtualized'
 declare const cardNames: any[]
-
+declare const baseOssUrl1: string
+declare const baseOssUrl2: string
 
 // public/myData.js 里面的一些数据的类型
 declare const isPcTemp: boolean
 declare const myDataTemp: MyDataType
-declare const apiUrlTemp: string
 
 // 微信浏览器--视频转画布
 declare const F_Video: any
@@ -22,23 +22,37 @@ 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 }[]
+  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 }[]
+  memberList: {
+    name: string
+    nameEn: string
+    imgSrc: string
+    imgSrcLight: string
+    videoSrc: string
+  }[]
   lifeList: { name: string; time: string; imgSrc: string; videoSrc?: string; desc: string }[]
 }
 
 declare namespace JSX {
   interface IntrinsicElements {
-    'media-controller': any;
-    'media-play-button': any;
-    'media-mute-button': any;
-    'media-volume-range': any;
-    'media-time-range': any;
-    'media-pip-button': any;
-    'media-fullscreen-button': any;
-    'media-control-bar': any;
-    'media-time-display': any;
-    'media-duration-display': any;
+    'media-controller': any
+    'media-play-button': any
+    'media-mute-button': any
+    'media-volume-range': any
+    'media-time-range': any
+    'media-pip-button': any
+    'media-fullscreen-button': any
+    'media-control-bar': any
+    'media-time-display': any
+    'media-duration-display': any
   }
 }

project/src/utils/axios.ts

@@ -1,6 +1,6 @@
 import axios from 'axios'
 import { Toast } from 'antd-mobile'
-import { apiUrl } from './http'
+// import { apiUrl } from './http'
 import { domShowFu } from './domShow'
 
 // 处理  类型“AxiosResponse<any, any>”上不存在属性“code”
@@ -13,7 +13,7 @@ declare module 'axios' {
 
 // 创建 axios 实例
 const http = axios.create({
-  baseURL: apiUrl,
+  baseURL: 'xxxxx',
   timeout: 10000
 })
 

project/src/utils/http.ts

@@ -1,12 +1,9 @@
 // 是不是pc端
 export const isPc = isPcTemp
 
-// 发送请求基地址
-export const apiUrl: string = apiUrlTemp
-
-// 图片视频基地址
-export const baseUrl = apiUrl.replace('api/', '')
-
 export const envFlag = process.env.NODE_ENV === 'development'
 
-export const myData: MyDataType = myDataTemp
+export const myData: MyDataType = myDataTemp
+
+// 静态资源加载地址
+export const baseOssUrl = envFlag ? baseOssUrl1 : baseOssUrl2

project/src/utils/urlCan.ts

@@ -0,0 +1,12 @@
+export const urlCanRes = () => {
+  let res: any = ''
+
+  const urlAll = window.location.href
+  const arr = urlAll.split('?id=')
+  if (arr && arr.length >= 2) {
+    const temp = Number(arr[1])
+    res = temp
+  }
+
+  return res
+}

静态文件/modelSS/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="./4dage.js"></script>
+  <title>Document</title>
+  <style>
+    html {
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="ui"></div>
+  <script>
+    let m = getQueryVariable("m");
+
+
+    // window.autoRotate = true; // 是否自动旋转
+
+    // fdage.embed( number, {
+    fdage.embed(`./${m}.4dage`, {
+      transparentBackground: true,
+      width: 800,
+      height: 600,
+      autoStart: true,
+      fullFrame: true,
+      pagePreset: false
+    });
+  </script>
+</body>
+
+</html>