更改小地图交互

src/data/index.js

@@ -20,15 +20,15 @@ let raw = {
   ],
 
   // 酒店公区 L0.0层
-  c_cOX8vF3R: [
+  L00: [
     "御苑中餐厅包房3（VIP包房1）,1326",
     "御苑中餐厅包房4（VIP包房2）,1325",
     "宴会会议-贵宾接待,1341",
-    "会议室,1329"
+    "会议室,1329",
   ],
 
   // 酒店公区 L5.0层
-  c_DIwbSjg4: [
+  L50: [
     "御苑中餐接待,1298",
     "御苑中餐厅包房1（8人）,1324",
     "御苑中餐厅包房2（12人）,1299",
@@ -36,7 +36,7 @@ let raw = {
   ],
 
   // 酒店公区 L5.5层
-  c_HFFYrkxN: [
+  L55: [
     "康体层电梯厅,1306",
     "康体层健身房,1333",
     "康体层接待台,1309",
@@ -44,7 +44,7 @@ let raw = {
   ],
 
   // 酒店公区 L11.0层
-  c_WqxWTSg6: [
+  L110: [
     "酒店大堂,1261",
     "全日制餐厅,1272",
     "品聚餐厅,1285",
@@ -139,10 +139,85 @@ let order = [
 ];
 
 let tag_position = {
+  // 正门入口
+  fd720_hDcc3aSka: {
+    left: "33%",
+    top: "38%",
+  },
+   // 一、二、三楼观景台
+   fd720_d4YFdDF1Y: {
+    left: "49%",
+    top: "54%",
+  },
+  fd720_h7dHG9hdx:{
+    left: "49%",
+    top: "54%",
+  },
+  fd720_gBKWVjE9O:{
+    left: "49%",
+    top: "54%",
+  },
+  // 网红桥
+  fd720_ngedG57Dv: {
+    left: "43%",
+    top: "60%",
+  },
+  // 亭
+  fd720_VRAod1wnC:{
+    left: "50.5%",
+    top: "63.5%",
+  },
+  // 小桥
+  fd720_LIBy6XrM3:{
+    left: "51.5%",
+    top: "60%",
+  },
+   //小径
+   fd720_TwYCDBGEs: {
+    left: "54%",
+    top: "65%",
+  },
+  // 泳池入口
+  fd720_EkMXC7g07:{
+    left: "44.5%",
+    top: "37%",
+  },
+  // 泳池过道
+  fd720_SLOQECgge:{
+    left: "45%",
+    top: "32%",
+  },
+  // 泳池中央
+  fd720_hrSZoPuJl:{
+    left: "49%",
+    top: "32%",
+  },
   // 别墅入口
-  fd720_pheJ4RRFp: {
-    top: "61%",
-    left: "48%",
+  fd720_7LsaURUzy: {
+    left: "46.5%",
+    top: "64.5%",
+  },
+
+  // 南底层客房1
+  fd720_DMtjU8yUZ: {
+    left: "51.5%",
+    top: "87%",
+  },
+
+  // 南底层客房2
+  fd720_n4XYjrp3n:{
+    left: "60.5%",
+    top: "87%",
+  },
+  // 南高层客房1
+  fd720_vj2C84goG:{
+    left: "55%",
+    top: "95%",
+  },
+   // 南高层客房2
+   fd720_sJoe1Ugif:{
+    left: "63%",
+    top: "95.5%",
   },
   // 别墅小桥
   fd720_XZBFnCXAS: {

src/store/index.js

@@ -26,22 +26,17 @@ const appStore = defineStore("app", {
         return (
           item.name === "客房区域" ||
           item.name === "壹号会馆" ||
-          item.name === "公共区"
-        );
+          item.name === "公共区"        );
       });
       res.forEach((item) => {
         if (item.name === "公共区") {
           item.name = "室外区域";
+          item.children.push('c_cOX8vF3R')
+          // item.children.concat(['c_cOX8vF3R','c_poTfM0Yd','c_HFFYrkxN','c_WqxWTSg6','c_t3sVVlxk'])
         }
       });
       res.push({
-        children: [
-          "c_apuYrAKe",
-          "c_cOX8vF3R",
-          "c_DIwbSjg4",
-          "c_HFFYrkxN",
-          "c_WqxWTSg6",
-        ],
+        children: ["c_apuYrAKe", "L00", "L50", "L55", "L110"],
         id: 100,
         name: "酒店公区",
       });
@@ -49,7 +44,15 @@ const appStore = defineStore("app", {
     },
     // 重构secondaryList
     newSecondaryList() {
-      const newNameList = ["其他", "L0.0", "L5.0", "L5.5", "L11.0"];
+      let newNameList;
+      switch (this.currentCatalogRoot.name) {
+        case "室外区域":
+          newNameList = ["其他", "L0.0", "L5.0", "L5.5", "L11.0"];
+          break;
+        case "酒店公区":
+          newNameList = ["其他", "L0.0", "L5.0", "L5.5", "L11.0"];
+          break;
+      }
       return this.secondaryList.map((item, index) => {
         return {
           id: item.id,
@@ -67,7 +70,6 @@ const appStore = defineStore("app", {
       });
 
       this.setCurrentScenesList(arr.sort((a, b) => a.weight - b.weight));
-
     },
 
     // 设置当前场景列表
@@ -79,17 +81,25 @@ const appStore = defineStore("app", {
     setCurrentCatalogRoot(payload) {
       this.currentCatalogRoot = payload;
       let temp = [];
+      // this.setSecondaryList(payload.children);
       payload.children &&
         payload.children.forEach((item) => {
-          this.metadata.catalogs.forEach((sub) => {
-            if (item == sub.id) {
-              if (this.list.some((iii) => iii.category == sub.id)) {
-                temp.push(sub);
-              }
-            }
-          });
+          if (this.list.some((iii) => iii.category == item)) {
+            temp.push({ id: item, name: item });
+          }
         });
       this.setSecondaryList(temp);
+      // payload.children &&
+      //   payload.children.forEach((item) => {
+      //     this.metadata.catalogs.forEach((sub) => {
+      //       if (item == sub.id) {
+      //         if (this.list.some((iii) => iii.category == sub.id)) {
+      //           temp.push(sub);
+      //         }
+      //       }
+      //     });
+      //   });
+      // this.setSecondaryList(temp);
     },
 
     // 设置当前二级分组列表

src/views/map/bird_view.vue

@@ -2,11 +2,18 @@
   <div class="birdview">
     <img
       class="map"
-      :src="require(`@/assets/images/resource/map/map.jpg`)"
+      :src="!route.params.name ? DefaultBG : floorBG"
       alt=""
     />
 
+    <!-- <img
+      class="map"
+      :src="DefaultBG"
+      alt=""
+    /> -->
+
     <div
+      v-show="!route.params.name"
       class="tag"
       @click="onBack"
       :style="{
@@ -27,7 +34,8 @@
     />
     <!-- 地图区域 -->
     <!-- 壹号公馆 -->
-    <img
+    <div v-if="!route.params.name">
+      <img
       v-show="curArea == 'r_NHFYicvn'"
       class="img-yihao"
       src="../../assets/images/resource/map/img_yihao.png"
@@ -53,6 +61,7 @@
       src="../../assets/images/resource/map/img_jiudian.png"
       alt=""
     />
+    </div>
     <div class="shoqi" @click="isAside = true">
       <img :src="require(`@/assets/images/resource/map/ico_up.png`)" alt="" />
     </div>
@@ -67,7 +76,7 @@ import { computed, onMounted, ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { tag_position } from "@/data";
 import raside from "./raside.vue";
-import appStore from "@/store";
+import DefaultBG from "@/assets/images/resource/map/map.jpg";
 
 const router = useRouter();
 
@@ -81,10 +90,14 @@ let onBack = (data) => {
 };
 
 const curArea = ref("");
+const floorBG = ref();
 
 onMounted(() => {
   curArea.value = route.params.area;
-  console.log(route.params.area,curArea.value);
+  console.log(route.params.name)
+  if (route.params.name) {
+    floorBG.value = `https://houseoss.4dkankan.com/project/xiangshanhu/images/${route.params.name}.png`;
+  }
 });
 </script>
 

src/views/scene/index.vue

@@ -9,10 +9,9 @@
     />
     <div class="planform-box">
       <span>当前位置:{{ store.currentScene.sceneTitle }}</span>
-      <img :src="store.currentSecondary.id === 'c_cOX8vF3R' || store.currentSecondary.id === 'c_DIwbSjg4' || store.currentSecondary.id === 'c_HFFYrkxN' || store.currentSecondary.id === 'c_WqxWTSg6' ? `https://houseoss.4dkankan.com/project/xiangshanhu/images/${store.currentScene.sceneTitle}.png` : `https://houseoss.4dkankan.com/project/xiangshanhu/images/${store.currentCatalogRoot.name}.png`" alt="" />
     </div>
     <div
-      class="mapcon"
+      class="mapcon2"
       @click="
         router.push({
           name: 'map',
@@ -22,10 +21,55 @@
           },
         })
       "
+      v-if="store.currentCatalogRoot.name === '室外区域'"
     >
       <vmap :tagdata="tagData" />
-      <!-- <vmap :left="`calc(-${tagData.left} )`" :top="`calc(-${tagData.top} )`"/> -->
     </div>
+    <img
+      v-else
+      class="mapcon2-img"
+      :src="
+        store.currentSecondary.id === 'L00' ||
+        store.currentSecondary.id === 'L50' ||
+        store.currentSecondary.id === 'L55' ||
+        store.currentSecondary.id === 'L110'
+          ? `https://houseoss.4dkankan.com/project/xiangshanhu/images/${store.currentScene.sceneTitle}.png`
+          : `https://houseoss.4dkankan.com/project/xiangshanhu/images/${store.currentCatalogRoot.name}.png`
+      "
+      alt=""
+      @click="
+        router.push({
+          name: 'map',
+          params: {
+            id: store.currentScene.sceneCode,
+            area: store.currentCatalogRoot.id,
+            name:
+              store.currentSecondary.id === 'L00' ||
+              store.currentSecondary.id === 'L50' ||
+              store.currentSecondary.id === 'L55' ||
+              store.currentSecondary.id === 'L110'
+                ? store.currentScene.sceneTitle
+                : '',
+          },
+        })
+      "
+    />
+    <!-- <div
+      class="mapcon"
+      @click="
+        router.push({
+          name: 'map',
+          params: {
+            id: store.currentScene.sceneCode,
+            area: store.currentCatalogRoot.id,
+          },
+        })
+      "
+    >
+      <vmap
+          :tagdata="tagData"
+        />
+    </div> -->
 
     <!-- <div @click="gohome" class="homeicon" v-if="isMobile">
         <img :src="require(`@/assets/images/resource/home.png`)" alt="" />
@@ -35,12 +79,11 @@
 </template>
 
 <script setup>
-
 import { useRouter, useRoute } from "vue-router";
 import pano from "./pano";
 import vmap from "./mapIcon";
 import browser from "@/utils/browser";
-import {  computed} from "vue";
+import { computed } from "vue";
 import appStore from "@/store/index";
 import { tag_position } from "@/data";
 
@@ -82,9 +125,15 @@ const departure = () => {
       color: white;
     }
     img {
-      width: 100%;
-      height: calc(100% - 30px);
+      width: 258px;
+      height: 148px;
+      margin-top: 10px;
+    }
+    .cover-box {
+      width: 258px;
+      height: 148px;
       margin-top: 10px;
+      overflow: hidden;
     }
   }
   .mapcon {
@@ -100,6 +149,26 @@ const departure = () => {
     cursor: pointer;
     background-color: #a6b5a8;
   }
+  .mapcon2 {
+    position: absolute;
+    z-index: 999;
+    right: 15px;
+    top: 45px;
+    width: 258px;
+    height: 148px;
+    overflow: hidden;
+    cursor: pointer;
+  }
+  .mapcon2-img {
+    position: absolute;
+    z-index: 999;
+    right: 15px;
+    top: 45px;
+    width: 258px;
+    height: 148px;
+    overflow: hidden;
+    cursor: pointer;
+  }
   .up-icon {
     position: absolute;
     z-index: 999;

src/views/scene/list.vue

@@ -21,42 +21,12 @@
           v-for="(item, i) in store.newCatalogRoot"
           :key="i"
         >
-          <div
-            class="area-text"
-            v-if="store.currentCatalogRoot.id == item.id"
-
-          >
+          <div class="area-text" v-if="store.currentCatalogRoot.id == item.id">
             <!-- {{ item.name }} -->
             <div class="area-text-left">
               <div>{{ item.name }}</div>
               <div class="active-line"></div>
             </div>
-            <div
-              class="area-text-right"
-              v-if="store.secondaryList.length > 1"
-              @click.stop=""
-            >
-              <ul>
-                <li
-                  @click="tabSecondary(item)"
-                  :class="{
-                    active: store.currentSecondary.id == item.id,
-                  }"
-                  v-for="(item, i) in store.newSecondaryList"
-                  :key="i"
-                  v-show="i != 0"
-                >
-                  <span v-if="store.currentSecondary.id == item.id">{{
-                    item.name
-                  }}</span>
-                  <span v-else>{{
-                    item.name.length > spanlength
-                      ? item.name.slice(0, spanlength)
-                      : item.name
-                  }}</span>
-                </li>
-              </ul>
-            </div>
           </div>
 
           <div class="area-text" v-else>
@@ -68,6 +38,32 @@
           </div>
         </li>
       </ul>
+      <div
+        class="area-text-right"
+        v-if="store.secondaryList.length > 1"
+        @click.stop=""
+      >
+        <ul>
+          <li
+            @click="tabSecondary(item)"
+            :class="{
+              active: store.currentSecondary.id == item.id,
+            }"
+            v-for="(item, i) in store.newSecondaryList"
+            :key="i"
+            v-show="i != 0"
+          >
+            <span v-if="store.currentSecondary.id == item.id">{{
+              item.name
+            }}</span>
+            <span v-else>{{
+              item.name.length > spanlength
+                ? item.name.slice(0, spanlength)
+                : item.name
+            }}</span>
+          </li>
+        </ul>
+      </div>
       <img
         src="../../assets/images/resource/scene/downIcon.png"
         @click="departure"
@@ -178,7 +174,7 @@ const tabSecondary = (data) => {
     return data.id === item.id;
   });
   store.setCurrentSecondary(cur);
-  store.currentScene = store.currentScenesList[0]
+  store.currentScene = store.currentScenesList[0];
 };
 
 const tabRoot = (data) => {
@@ -300,6 +296,37 @@ $width: 100%;
   }
 
   #swcatalogRoot {
+    .area-text-right {
+      margin-left: 300px;
+      position: absolute;
+      top: 0;
+      left: 80px;
+      color: white;
+      font-weight: bold;
+      z-index: 999;
+      // margin-top: 10px;
+      cursor: pointer;
+      ul {
+        display: flex;
+        height: 30px;
+        li {
+          margin-left: 15px;
+          height: 30px;
+          line-height: 30px;
+          border: 1px solid 1px solid rgba(225, 206, 170, 0.5);
+          box-shadow: inset 0px 2px 5px 0px rgba(255, 255, 255, 0.25);
+          background: rgba(225, 196, 141, 0.3);
+          border-radius: 5px;
+          width: 50px;
+          text-align: center;
+          font-size: 14px;
+          opacity: 0.5;
+        }
+        .active {
+          opacity: 1;
+        }
+      }
+    }
     .swiper-wrapper {
       transform: translate3d(0, 0px, 0px) !important;
     }
@@ -318,30 +345,6 @@ $width: 100%;
           cursor: pointer;
           position: relative;
           font-size: 14px;
-
-          &-right {
-            margin-left: 10px;
-            position: absolute;
-            top: 0;
-            left: 80px;
-            ul {
-              display: flex;
-              li {
-                margin-left: 15px;
-                border: 1px solid 1px solid rgba(225, 206, 170, 0.5);
-                box-shadow: inset 0px 2px 5px 0px rgba(255, 255, 255, 0.25);
-                background: rgba(225, 196, 141, 0.3);
-                border-radius: 5px;
-                width: 50px;
-                text-align: center;
-                font-size: 14px;
-                opacity: 0.5;
-              }
-              .active {
-                opacity: 1;
-              }
-            }
-          }
         }
 
         &.active {

src/views/scene/pano.vue

@@ -150,20 +150,29 @@ onUnmounted(() => {
 
         data.catalogRoot = ttt;
 
-        let catalog = data.catalogs.find(
-          (item) => item.id == store.currentScene.category
-        );
+        // let catalog = data.catalogs.find(
+        //   (item) => item.id == store.currentScene.category
+        // );
+        // let catalog = data.catalogs.find(
+        //   (item) => item.id == store.currentScene.category
+        // );
 
         // 查询初始场景的所在1级分组
         store.newCatalogRoot.forEach((item) => {
           let temp =
-            item.children && item.children.find((sub) => sub == catalog.id);
+            item.children &&
+            item.children.find((sub) => sub == store.currentScene.category);
           if (temp) {
             store.setCurrentCatalogRoot(item);
             return;
           }
         });
 
+        let catalog = store.secondaryList.find(
+          (item) => item.id == store.currentScene.category
+        );
+
+
         // 查询初始场景的所在2级分组
         store.setCurrentSecondary(catalog);