浏览代码

新增楼层按钮

wangfumin 2 月之前
父节点
当前提交
04fd423d63
共有 3 个文件被更改,包括 76 次插入1 次删除
  1. 5 1
      src/layout/left-pano.vue
  2. 69 0
      src/layout/model-list/floor-tab.vue
  3. 2 0
      src/views/guide/index.vue

+ 5 - 1
src/layout/left-pano.vue

@@ -11,6 +11,7 @@
     <div class="left-pano strengthen-right">
       <slot></slot>
     </div>
+    <floorTab />
     <ModeTab />
   </div>
 </template>
@@ -18,7 +19,10 @@
 <script lang="ts" setup>
 import { custom } from "@/env";
 import ModeTab from "./model-list/mode-tab.vue";
-
+import floorTab from "./model-list/floor-tab.vue";
+import { useRoute } from 'vue-router';
+const route = useRoute();
+console.log(route, 777777)
 withDefaults(defineProps<{ show?: boolean }>(), { show: false });
 </script>
 

+ 69 - 0
src/layout/model-list/floor-tab.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="floor-btn">
+    <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 } from "vue";
+import { SDK, sdk as _sdk } from "@/sdk";
+
+const nowSelect = ref('all');
+const floorList = [{
+  key: "all",
+  text: "全部"
+},{
+  key: 0,
+  text: "1楼"
+},{
+  key: 1,
+  text: "2楼"
+},{
+  key: 2,
+  text: "3楼"
+}] as any[];
+
+const floor = (num: any) => {
+  sdk.goFloor(num);
+  nowSelect.value = num;
+}
+
+</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;
+  height: 176px;
+  background: rgba(27, 27, 28, 0.8);
+  border-radius: 20px;
+  padding: 8px;
+  transition      : all .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>

+ 2 - 0
src/views/guide/index.vue

@@ -41,6 +41,7 @@ import { nextTick, reactive, ref, watchEffect } from "vue";
 import { guides, isEdit, paths } from "@/store";
 import router from "@/router";
 import { currentIsFullView } from "@/utils/full";
+import { SDK, sdk as _sdk } from "@/sdk";
 
 const current = ref("path");
 const tabs = reactive([
@@ -135,4 +136,5 @@ const quiskAdd = async (key: string) => {
     }
   }
 }
+
 </style>