fuse-code/src/layout/model-list/floor-tab.vue

<template>
  <div class="floor-btn" v-if="floorCount > 1">
    <div
      v-for="item in floorList"
      :key="item.key"
      :class="['quisk-item', item.key == nowSelect ? 'active' : '']"
      @click="floor(item.key)"
    >
      <span>{{ item.text }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { custom } from "@/env";
import { getSupperPanoModel } from "@/sdk/association";
import { currentModel, fuseModel } from "@/model";
import { flyModel } from "@/hook/use-fly";
import { ref, onMounted, watch } from "vue";
import { SDK, sdk } from "@/sdk";
import { useViewStack } from "@/hook";

const nowSelect = ref("all");
const floorList = ref([
  {
    key: "all",
    text: "全部",
  },
] as any[]);

const floor = (num: any) => {
  sdk.goFloor(num);
  nowSelect.value = num;
};
const floorCount = ref(sdk.getFloorCount());
sdk.sceneBus.on("floorCount", (count) => {
  floorCount.value = count;
});
watch(
  floorCount,
  (newVal) => {
    console.log("watch", newVal);
    for (let i = 0; i < newVal; i++) {
      floorList.value.push({
        key: i,
        text: `${i + 1}楼`,
      });
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.floor-btn {
  position: absolute;
  bottom: calc(var(--editor-menu-bottom, 0px) + 10px);
  left: calc(var(--left-pano-left) + var(--left-pano-width));
  margin-left: 24px;
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  z-index: 100;
  width: 60px;
  min-height: 126px;
  background: rgba(27, 27, 28, 0.8);
  border-radius: 20px;
  padding: 8px;
  transition: all 0.3s ease;
  .active {
    background: #00c8af;
  }
  .quisk-item {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
  }
}
</style>