traffic-laser/src/views/scene/container.vue

<template>
  <div class="canvas-layout">
    <div class="scene-canvas" ref="sceneLayoutRef" />
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref, watchEffect} from "vue";
import {customMap, disabledMap, setupLaser, useLoading, useParams} from "@/hook";
import {store} from "@/store";
import {currentApp} from "@/store/app";
import {axios} from "@/dbo/";
import {Loading} from '@kankan/components/index'
import {Mode} from "@/sdk";
import {api} from "@/store/sync";

const emit = defineEmits<{ (e: 'loaded'): void }>()
const sceneLayoutRef = ref<HTMLCanvasElement>();

onMounted(async () => {
  console.log(currentApp.basePath);
  console.log("加载场景数据")
  await useLoading(
    setupLaser({
      sceneSelector: sceneLayoutRef.value,
      num: useParams().m,
      store: store,
      isDebug: useParams().test,
      getFileUrl: api.getFile,
      webSite: "",
      axios: null,
      basePath: currentApp.basePath,
    })
  );

  console.log("场景数据加载完成")
  emit('loaded')


  setTimeout(() => {
    watchEffect(() => {
      const doms = Array.from(sceneLayoutRef.value.querySelectorAll("#navCube, #home")) as HTMLElement[]
      console.log("====>", disabledMap.mode)
      if (!disabledMap.mode) {
        if (customMap.mode === Mode.pano) {
          doms.forEach(dom => {
            dom.style.display = "none"
          })
        } else {
          doms.forEach(dom => {
            dom.style.display = "block"
          })
        }
      }
    })
    Loading.hideAll()
  }, 1000)
});

</script>

<style scoped lang="scss">
.canvas-layout {
  width  : 100%;
  height : 100%;
  position: relative;
  z-index: 0;
}

.scene-canvas {
  width : 100%;
  height: 100%;
}

.dire-canvas {
  position: absolute;
  right: 0;
  top: 0;
}
</style>

<style lang="scss">
.canvas-layout  {
  #navCube,
  #home {
    right: var(--boundMargin) !important;
    top: var(--boundMargin) !important;
  }
  #home {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px !important;
    height: 20px !important;
    font-family: "iconfont" !important;
    font-size: 20px;
    color: #fff;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    background: none !important;
    z-index: 1;
    color: #fff;

    &:before {
      content: "\e73e";
      pointer-events: none;
    }
  }
}
</style>