傻逼玩意儿

src/App.vue

@@ -135,83 +135,83 @@ export default {
     HomeFadeIn,
   },
   setup () {
-    const isShowFadeInMask = ref(false)
+    const isShowFadeInMask = ref(true)
     const progress = ref(0)
-    // onMounted(() => {
-    //   /**
-    //  * 加载unity
-    //  */
-    //   window.addEventListener("load", function () {
-    //     if ("serviceWorker" in navigator) {
-    //       navigator.serviceWorker.register("ServiceWorker.js")
-    //     }
-    //   })
+    onMounted(() => {
+      /**
+     * 加载unity
+     */
+      window.addEventListener("load", function () {
+        if ("serviceWorker" in navigator) {
+          navigator.serviceWorker.register("ServiceWorker.js")
+        }
+      })
 
-    //   var canvas = document.querySelector("#unity-canvas")
+      var canvas = document.querySelector("#unity-canvas")
 
-    //   var buildUrl = "unity/Build"
-    //   var loaderUrl = buildUrl + "/SHIndustryMuseum_2.10.loader.js"
-    //   var config = {
-    //     dataUrl: buildUrl + "/SHIndustryMuseum_2.10.data.unityweb",
-    //     frameworkUrl: buildUrl + "/SHIndustryMuseum_2.10.framework.js.unityweb",
-    //     codeUrl: buildUrl + "/SHIndustryMuseum_2.10.wasm.unityweb",
-    //     streamingAssetsUrl: "StreamingAssets",
-    //     companyName: "DefaultCompany",
-    //     productName: "SHIndustryMuseum",
-    //     productVersion: "0.1",
-    //   }
+      var buildUrl = "unity/Build"
+      var loaderUrl = buildUrl + "/SHIndustryMuseum_2.10.loader.js"
+      var config = {
+        dataUrl: buildUrl + "/SHIndustryMuseum_2.10.data.unityweb",
+        frameworkUrl: buildUrl + "/SHIndustryMuseum_2.10.framework.js.unityweb",
+        codeUrl: buildUrl + "/SHIndustryMuseum_2.10.wasm.unityweb",
+        streamingAssetsUrl: "StreamingAssets",
+        companyName: "DefaultCompany",
+        productName: "SHIndustryMuseum",
+        productVersion: "0.1",
+      }
 
-    //   // By default Unity keeps WebGL canvas render target size matched with
-    //   // the DOM size of the canvas element (scaled by window.devicePixelRatio)
-    //   // Set this to false if you want to decouple this synchronization from
-    //   // happening inside the engine, and you would instead like to size up
-    //   // the canvas DOM size and WebGL render target sizes yourself.
-    //   // config.matchWebGLToCanvasSize = false;
-    //   if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
-    //   // Mobile device style: fill the whole browser client area with the game canvas:
-    //     var meta = document.createElement('meta')
-    //     meta.name = 'viewport'
-    //     meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes'
-    //     document.getElementsByTagName('head')[0].appendChild(meta)
-    //   }
+      // By default Unity keeps WebGL canvas render target size matched with
+      // the DOM size of the canvas element (scaled by window.devicePixelRatio)
+      // Set this to false if you want to decouple this synchronization from
+      // happening inside the engine, and you would instead like to size up
+      // the canvas DOM size and WebGL render target sizes yourself.
+      // config.matchWebGLToCanvasSize = false;
+      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+      // Mobile device style: fill the whole browser client area with the game canvas:
+        var meta = document.createElement('meta')
+        meta.name = 'viewport'
+        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes'
+        document.getElementsByTagName('head')[0].appendChild(meta)
+      }
 
-    //   var script = document.createElement("script")
-    //   script.src = loaderUrl
-    //   script.onload = () => {
-    //     createUnityInstance(canvas, config, (paramProgress) => {
-    //       progress.value = Math.round(paramProgress * 100)
-    //       if (paramProgress > 0.95) {
-    //         setTimeout(() => {
-    //           isShowFadeInMask.value = false
-    //         }, 1000)
-    //       }
-    //     }).then((unityInstance) => {
-    //       window.gUnityInst = unityInstance
-    //       utils.loadUnitySceneGeneral()
-    //     }).catch((message) => {
-    //       alert(message)
-    //     })
-    //   }
-    //   window.onClickEnterprise = function (id) {
-    //     if (window.handleClickEnterprise) {
-    //       window.handleClickEnterprise(id)
-    //     }
-    //   }
-    //   window.onClickPlanet = function (id) {
-    //     if (window.handleClickPlanet) {
-    //       window.handleClickPlanet(id)
-    //     }
-    //   }
-    //   window.onMovedPlanet = function (id) {
-    //     if (window.handleMovedPlanet) {
-    //       window.handleMovedPlanet(id)
-    //     }
-    //   }
-    //   document.body.appendChild(script)
-    //   /**
-    //    * end of unity
-    //    */
-    // })
+      var script = document.createElement("script")
+      script.src = loaderUrl
+      script.onload = () => {
+        createUnityInstance(canvas, config, (paramProgress) => {
+          progress.value = Math.round(paramProgress * 100)
+          if (paramProgress > 0.95) {
+            setTimeout(() => {
+              isShowFadeInMask.value = false
+            }, 1000)
+          }
+        }).then((unityInstance) => {
+          window.gUnityInst = unityInstance
+          utils.loadUnitySceneGeneral()
+        }).catch((message) => {
+          console.error('shabi', message)
+        })
+      }
+      window.onClickEnterprise = function (id) {
+        if (window.handleClickEnterprise) {
+          window.handleClickEnterprise(id)
+        }
+      }
+      window.onClickPlanet = function (id) {
+        if (window.handleClickPlanet) {
+          window.handleClickPlanet(id)
+        }
+      }
+      window.onMovedPlanet = function (id) {
+        if (window.handleMovedPlanet) {
+          window.handleMovedPlanet(id)
+        }
+      }
+      document.body.appendChild(script)
+      /**
+       * end of unity
+       */
+    })
 
     const isShowNavBar = ref(true)
     const activeNavItemIdx = ref(0)

src/utils.js

@@ -101,23 +101,19 @@ export default {
     // const loadingInstance = ElLoading.service({
     //   background: 'black',
     // })
-
-    window.gUnityInst && window.gUnityInst.SendMessage('SceneManager', 'LoadPage1')
     window.onSceneLoaded = () => {
       console.log('unity scene loaded')
     }
     window.onRequestApiSuccess = () => { // unity模型里拿到了后端数据
       window.gMitt.emit('RequestApiSuccess-general', {})
       // loadingInstance.close()
-
     }	//场景加载完毕回调
+    window.gUnityInst && window.gUnityInst.SendMessage('SceneManager', 'LoadPage1')
   },
   loadUnitySceneMetaverse() {
     // const loadingInstance = ElLoading.service({
     //   background: 'black',
     // })
-
-    window.gUnityInst && window.gUnityInst.SendMessage('SceneManager', 'LoadPage4')
     window.onSceneLoaded = () => {
       console.log('unity scene loaded')
     }
@@ -125,5 +121,6 @@ export default {
       window.gMitt.emit('RequestApiSuccess-metaverse', {})
       // loadingInstance.close()
     }
+    window.gUnityInst && window.gUnityInst.SendMessage('SceneManager', 'LoadPage4')
   },
 }

src/views/HistoryNew.vue

@@ -93,13 +93,19 @@
         filter: item.filter,
       }"
     />
+    <!-- element-ui的loading效果从调用到出现有延时，这期间要遮盖住组件 -->
+    <div
+      v-show="isShowLoadingMask"
+      class="loading-mask"
+    />
   </div>
 </template>
 
 <script>
-import { reactive, toRefs, ref, watch, onMounted, onBeforeUnmount, computed } from 'vue'
+import { reactive, toRefs, onBeforeMount, ref, watch, onMounted, onBeforeUnmount, computed } from 'vue'
 import HistoryPersonCard from "@/components/HistoryPersonCard.vue"
 import axios from "axios"
+import { ElLoading } from 'element-plus'
 
 export default {
   components: {
@@ -108,6 +114,18 @@ export default {
   setup () {
     const spaceEachPerson = 220
 
+    // mask相关
+    const isShowLoadingMask = ref(true)
+    onBeforeMount(() => {
+      const loadingInstance = ElLoading.service({
+        background: 'transparent',
+      })
+      setTimeout(() => {
+        isShowLoadingMask.value = false
+        loadingInstance.close()
+      }, 600)
+    })
+
     // 时代阶段
     const stageList = reactive([
       {
@@ -431,20 +449,21 @@ export default {
 
 
     return {
+      computeTimeAxisScaleOpacity,
+      currentTimeIdx,
+      gearFrameIdx,
+      isShowLoadingMask,
       onMouseDown,
+      onMouseLeave,
       onMouseMove,
       onMouseUp,
-      onMouseLeave,
+      personList,
+      stageLabelList,
+      stageList,
       timeAxisLeft,
-      timeAxisScaleWidth,
       timeAxisScaleMargin,
       timeAxisScaleRepeat,
-      computeTimeAxisScaleOpacity,
-      gearFrameIdx,
-      stageList,
-      currentTimeIdx,
-      stageLabelList,
-      personList,
+      timeAxisScaleWidth,
     }
   }
 }
@@ -526,5 +545,14 @@ export default {
   >.history-person-card{
     position: absolute;
   }
+  >.loading-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: black;
+    z-index: 20;
+  }
 }
 </style>