修改样式

src/data/index.js

@@ -8,83 +8,104 @@
 //   weight: 1
 // }
 
+let raw = {
+  // 酒店公区 其他
+  c_apuYrAKe: [
+    "御苑中餐厅包房洗手间,1301",
+    "2F会议室前厅,1327",
+    "宴会厅,1284",
+    "3F电梯前厅,1328",
+    "入口,1335",
+    "卫生间,1330",
+  ],
 
+  // 酒店公区 L0.0层
+  c_cOX8vF3R: [
+    "御苑中餐厅包房3（VIP包房1）,1326",
+    "御苑中餐厅包房4（VIP包房2）,1325",
+    "宴会会议-贵宾接待,1341",
+    "会议室,1329"
+  ],
 
-let raw = {
-  'c_k2YkG4mw': [
-    '酒店大堂,1261',
-    '全日制餐厅,1272',
-    '品聚餐厅,1285',
-    '品聚餐厅包房,1295',
-    '御苑中餐厅包房1（8人）,1324',
-    '御苑中餐厅包房2（12人）,1299',
-    '御苑中餐厅包房3（VIP包房1）,1326',
-    '御苑中餐厅包房4（VIP包房2）,1325',
-    '御苑中餐厅包房洗手间,1301',
-    '御苑中餐接待,1298',
-    '御苑中餐前厅,1334',
-    '康体层电梯厅,1306',
-    '康体层健身房,1333',
-    '康体层接待台,1309',
-    '康体层泳池,1331',
-    '宴会厅,1284',
-    '宴会会议-贵宾接待,1341',
-    '2F会议室前厅,1327',
-    '3F电梯前厅,1328',
-    '会议室,1329',
-    '入口,1335',
-    '卫生间,1330',
+  // 酒店公区 L5.0层
+  c_DIwbSjg4: [
+    "御苑中餐接待,1298",
+    "御苑中餐厅包房1（8人）,1324",
+    "御苑中餐厅包房2（12人）,1299",
+    "御苑中餐前厅,1334",
   ],
-  'c_t3sVVlxk': [
-    'A户型（南区别墅）,1313',
-    'DS-2,1323',
-    'K2户型,1311',
-    'DD户型,1312',
-    'D户型,1342',
-    'E户型,1344',
-    '标准客房电梯厅轿厢,1314',
-    '过道,1345',
-    '南区B户型,1348',
+
+  // 酒店公区 L5.5层
+  c_HFFYrkxN: [
+    "康体层电梯厅,1306",
+    "康体层健身房,1333",
+    "康体层接待台,1309",
+    "康体层泳池,1331",
   ],
-  'c_poTfM0Yd': [
-    '标准客房,1350',
-    '地下门厅,1349',
-    '多功能厅,1357',
-    '公区SPA,1355',
-    '接见区,1356',
-    '特色客房,1351',
-  ]
-}
 
-let scene = [];
+  // 酒店公区 L11.0层
+  c_WqxWTSg6: [
+    "酒店大堂,1261",
+    "全日制餐厅,1272",
+    "品聚餐厅,1285",
+    "品聚餐厅包房,1295",
+  ],
 
-Object.entries(raw).forEach(item => {
-  console.log('result:', item);
-  scene = scene.concat(item[1].map(sub => {
-    let fix = sub.split(',')
-    return {
-      category: item[0],
-      icon: `resource/images/${fix[1]}.jpg`,
-      id: fix[1],
-      sceneCode: fix[1],
-      sceneTitle: fix[0],
-      type: "bigscene",
-      weight: 1
-    }
-  }))
-})
+  // 客房区域
+  c_t3sVVlxk: [
+    "A户型（南区别墅）,1313",
+    "DS-2,1323",
+    "K2户型,1311",
+    "DD户型,1312",
+    "D户型,1342",
+    "E户型,1344",
+    "标准客房电梯厅轿厢,1314",
+    "过道,1345",
+    "南区B户型,1348",
+  ],
+  // 壹号会馆
+  c_poTfM0Yd: [
+    "SPA卫生间,1355",
+    "标准客房,1350",
+    "地下门厅,1349",
+    "多功能厅,1357",
+    "接见区,1356",
+    "特色客房,1351",
+    "总套,1361",
+  ],
+  //
+};
+
+let scene = [];
 
+Object.entries(raw).forEach((item) => {
+  console.log("result:", item);
+  scene = scene.concat(
+    item[1].map((sub) => {
+      let fix = sub.split(",");
+      return {
+        category: item[0],
+        icon: `resource/images/${fix[1]}.jpg`,
+        id: fix[1],
+        sceneCode: fix[1],
+        sceneTitle: fix[0],
+        type: "bigscene",
+        weight: 1,
+      };
+    })
+  );
+});
 
 scene.push({
-  category: 'c_t3sVVlxk',
+  category: "c_t3sVVlxk",
   icon: `resource/images/1XMt0UcrQZM.jpg`,
-  id: '1XMt0UcrQZM',
-  sceneCode: '1XMt0UcrQZM',
-  sceneTitle: 'C户型（南区别墅）',
+  id: "1XMt0UcrQZM",
+  sceneCode: "1XMt0UcrQZM",
+  sceneTitle: "C户型（南区别墅）",
   type: "oldfdkk",
-  weight: 1
-})
-console.log('result:', scene);
+  weight: 1,
+});
+console.log("result:", scene);
 
 let order = [
   "落客区",
@@ -114,159 +135,145 @@ let order = [
   "正门视角",
   "俯瞰图",
   "一号楼视角",
-  "别墅室内"
-]
+  "别墅室内",
+];
 
 let tag_position = {
   // 别墅入口
-  'fd720_pheJ4RRFp': {
+  fd720_pheJ4RRFp: {
     top: "61%",
-    left: "48%"
+    left: "48%",
   },
   // 别墅小桥
-  'fd720_XZBFnCXAS': {
-    top: '87%',
-    left: '51%'
+  fd720_XZBFnCXAS: {
+    top: "87%",
+    left: "51%",
   },
-  // 小径 
-  'fd720_bP7mNuaWZ': {
-    top: '57%',
-    left: '52%'
+  // 小径
+  fd720_bP7mNuaWZ: {
+    top: "57%",
+    left: "52%",
   },
-  // 小桥 
-  'fd720_VkaSVJx2c': {
-    top: '61%',
-    left: '51%'
+  // 小桥
+  fd720_VkaSVJx2c: {
+    top: "61%",
+    left: "51%",
   },
-  // 亭 
-  'fd720_eQGcCENDj': {
-    top: '61%',
-    left: '49%'
+  // 亭
+  fd720_eQGcCENDj: {
+    top: "61%",
+    left: "49%",
   },
-  // 网红桥 
-  'fd720_NfNBOxdap': {
-    top: '61%',
-    left: '46%'
+  // 网红桥
+  fd720_NfNBOxdap: {
+    top: "61%",
+    left: "46%",
   },
-  // 泳池入口 
-  'fd720_QXWVdqTJ9': {
-    top: '30%',
-    left: '48%'
+  // 泳池入口
+  fd720_QXWVdqTJ9: {
+    top: "30%",
+    left: "48%",
   },
   // 泳池过道
-  'fd720_tsGMkrrXY': {
-    top: '30%',
-    left: '48%'
+  fd720_tsGMkrrXY: {
+    top: "30%",
+    left: "48%",
   },
   // 泳池中央
-  'fd720_0ebGQjUYv': {
-    top: '30%',
-    left: '48%'
+  fd720_0ebGQjUYv: {
+    top: "30%",
+    left: "48%",
   },
 
-  'fd720_SBxgPgjSV': {
-    left: '25%',
-    top: '85%',
+  fd720_SBxgPgjSV: {
+    left: "25%",
+    top: "85%",
   },
 
-  'fd720_ZlIf32Fjx': {
-    left: '65%',
-    top: '85%',
+  fd720_ZlIf32Fjx: {
+    left: "65%",
+    top: "85%",
   },
 
-
-  'fd720_EVTdqRdFM': {
-    left: '25%',
-    top: '37%',
+  fd720_EVTdqRdFM: {
+    left: "25%",
+    top: "37%",
   },
 
-
-  'fd720_bZbjA6z8H': {
-    left: '50%',
-    top: '58%',
+  fd720_bZbjA6z8H: {
+    left: "50%",
+    top: "58%",
   },
 
-
-  'fd720_VtpxP2vrb': {
-    left: '70%',
-    top: '40%',
+  fd720_VtpxP2vrb: {
+    left: "70%",
+    top: "40%",
   },
 
-
-  '1261': {
-    left: '38%',
-    top: '37%',
+  1261: {
+    left: "38%",
+    top: "37%",
   },
 
-  '1272': {
-    left: '44%',
-    top: '37%',
+  1272: {
+    left: "44%",
+    top: "37%",
   },
 
-
-  '1285': {
-    left: '49%',
-    top: '49%',
+  1285: {
+    left: "49%",
+    top: "49%",
   },
 
-
-  '1295': {
-    left: '49%',
-    top: '44%',
+  1295: {
+    left: "49%",
+    top: "44%",
   },
 
-
-  '1284': {
-    left: '37%',
-    top: '50%',
+  1284: {
+    left: "37%",
+    top: "50%",
   },
 
-
-  '1298': {
-    left: '46%',
-    top: '47%',
+  1298: {
+    left: "46%",
+    top: "47%",
   },
 
-  '1299': {
-    left: '46%',
-    top: '54%',
+  1299: {
+    left: "46%",
+    top: "54%",
   },
 
-  '1301': {
-    left: '46%',
-    top: '54%',
+  1301: {
+    left: "46%",
+    top: "54%",
   },
 
-
-  '1306': {
-    left: '43%',
-    top: '29%',
+  1306: {
+    left: "43%",
+    top: "29%",
   },
 
-
-
-  'fd720_moPnVj3kT': {
-    left: '30%',
-    top: '37%',
+  fd720_moPnVj3kT: {
+    left: "30%",
+    top: "37%",
   },
 
-
-  'fd720_VffCi2fe2': {
-    left: '49%',
-    top: '54%',
+  fd720_VffCi2fe2: {
+    left: "49%",
+    top: "54%",
   },
 
-
-  'fd720_IyHCtYrNr': {
-    left: '49%',
-    top: '54%',
+  fd720_IyHCtYrNr: {
+    left: "49%",
+    top: "54%",
   },
 
-  'fd720_hd7optPGd': {
-    left: '49%',
-    top: '54%',
-  }
-
-}
+  fd720_hd7optPGd: {
+    left: "49%",
+    top: "54%",
+  },
+};
 
 export { scene, order, tag_position };

src/store/index.js

@@ -1,6 +1,6 @@
-import { defineStore } from 'pinia';
+import { defineStore } from "pinia";
 
-const appStore = defineStore('app', {
+const appStore = defineStore("app", {
   state: () => ({
     // 场景列表
     list: [],
@@ -17,9 +17,47 @@ const appStore = defineStore('app', {
     //当前场景分组
     currentScenesList: {},
     // 是否隐藏
-    listIsShow: true
+    listIsShow: true,
   }),
-  getters: {},
+  getters: {
+    // 重构一级分组（6-> 4,留下“室外区域”、“客房区域”、“壹号会馆”、“酒店工区-原公共区”）
+    newCatalogRoot() {
+      const res = this.metadata.catalogRoot.filter((item) => {
+        return (
+          item.name === "客房区域" ||
+          item.name === "壹号会馆" ||
+          item.name === "公共区"
+        );
+      });
+      res.forEach((item) => {
+        if (item.name === "公共区") {
+          item.name = "室外区域";
+        }
+      });
+      res.push({
+        children: [
+          "c_apuYrAKe",
+          "c_cOX8vF3R",
+          "c_DIwbSjg4",
+          "c_HFFYrkxN",
+          "c_WqxWTSg6",
+        ],
+        id: 100,
+        name: "酒店公区",
+      });
+      return res;
+    },
+    // 重构secondaryList
+    newSecondaryList() {
+      const newNameList = ["其他", "L0.0", "L5.0", "L5.5", "L11.0"];
+      return this.secondaryList.map((item, index) => {
+        return {
+          id: item.id,
+          name: newNameList[index],
+        };
+      });
+    },
+  },
   actions: {
     // 设置当前二级分组
     setCurrentSecondary(payload) {
@@ -28,7 +66,8 @@ const appStore = defineStore('app', {
         return this.currentSecondary.id == item.category;
       });
 
-      this.setCurrentScenesList(arr.sort((a, b) => a.weight - b.weight))
+      this.setCurrentScenesList(arr.sort((a, b) => a.weight - b.weight));
+
     },
 
     // 设置当前场景列表
@@ -44,32 +83,32 @@ const appStore = defineStore('app', {
         payload.children.forEach((item) => {
           this.metadata.catalogs.forEach((sub) => {
             if (item == sub.id) {
-              if (this.list.some(iii => iii.category == sub.id)) {
+              if (this.list.some((iii) => iii.category == sub.id)) {
                 temp.push(sub);
               }
             }
           });
         });
-      this.setSecondaryList(temp)
+      this.setSecondaryList(temp);
     },
 
     // 设置当前二级分组列表
     setSecondaryList(payload) {
-      this.secondaryList = payload
+      this.secondaryList = payload;
       if (payload.length > 0) {
-        this.setCurrentSecondary(payload[0])
+        this.setCurrentSecondary(payload[0]);
       }
     },
     // 设置currentScene为该层第一个（只有点击区域时候触发）
     setCurrentSceneFirst() {
-      this.currentScene = this.currentScenesList[0]
+      this.currentScene = this.currentScenesList[0];
     },
     // 设置列表是否显示
-    setListIsShow (isShow) {
-      this.listIsShow = isShow
+    setListIsShow(isShow) {
+      this.listIsShow = isShow;
       // 存放到本地，实现大场景代码的交互
-      localStorage.setItem('listIsShow', isShow)
-    }
+      localStorage.setItem("listIsShow", isShow);
+    },
   },
 });
 

src/store/map/index.js

@@ -0,0 +1,100 @@
+import { defineStore } from "pinia";
+
+const appStore = defineStore("app", {
+  state: () => ({
+    
+  }),
+  getters: {
+    // 重构一级分组（6-> 4,留下“室外区域”、“客房区域”、“壹号会馆”、“酒店工区-原公共区”）
+    newCatalogRoot() {
+      const res = this.metadata.catalogRoot.filter((item) => {
+        return (
+          item.name === "客房区域" ||
+          item.name === "壹号会馆" ||
+          item.name === "公共区"
+        );
+      });
+      res.forEach((item) => {
+        if (item.name === "公共区") {
+          item.name = "室外区域";
+        }
+      });
+      res.push({
+        children: [
+          "c_apuYrAKe",
+          "c_cOX8vF3R",
+          "c_DIwbSjg4",
+          "c_HFFYrkxN",
+          "c_WqxWTSg6",
+        ],
+        id: 100,
+        name: "酒店公区",
+      });
+      return res;
+    },
+    // 重构secondaryList
+    newSecondaryList() {
+      const newNameList = ["其他", "L0.0", "L5.0", "L5.5", "L11.0"];
+      return this.secondaryList.map((item, index) => {
+        return {
+          id: item.id,
+          name: newNameList[index],
+        };
+      });
+    },
+  },
+  actions: {
+    // 设置当前二级分组
+    setCurrentSecondary(payload) {
+      this.currentSecondary = payload;
+      let arr = this.list.filter((item) => {
+        return this.currentSecondary.id == item.category;
+      });
+
+      this.setCurrentScenesList(arr.sort((a, b) => a.weight - b.weight));
+
+    },
+
+    // 设置当前场景列表
+    setCurrentScenesList(payload) {
+      this.currentScenesList = payload;
+    },
+
+    // 设置当前一级分组
+    setCurrentCatalogRoot(payload) {
+      this.currentCatalogRoot = payload;
+      let 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);
+    },
+
+    // 设置当前二级分组列表
+    setSecondaryList(payload) {
+      this.secondaryList = payload;
+      if (payload.length > 0) {
+        this.setCurrentSecondary(payload[0]);
+      }
+    },
+    // 设置currentScene为该层第一个（只有点击区域时候触发）
+    setCurrentSceneFirst() {
+      this.currentScene = this.currentScenesList[0];
+    },
+    // 设置列表是否显示
+    setListIsShow(isShow) {
+      this.listIsShow = isShow;
+      // 存放到本地，实现大场景代码的交互
+      localStorage.setItem("listIsShow", isShow);
+    },
+  },
+});
+
+export default appStore;

src/views/home/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="homecon"
     :style="{ backgroundImage: `url(${require(`@/assets/images/resource/home/${isMobile ? 'mob_bg' : 'map'}.jpg`)})` }">
-    <img class="start" @click="router.push({name:'scene',params:{id:'fd720_EVTdqRdFM'}})"
+    <img class="start" @click="router.push({name:'scene',params:{id:'fd720_hDcc3aSka'}})"
       :src="require('@/assets/images/resource/home/btn_start.png')" alt="">
   </div>
 </template>

src/views/map/bird_view.vue

@@ -1,51 +1,121 @@
 <template>
   <div class="birdview">
-    <img :src="require(`@/assets/images/resource/map/map.jpg`)" alt="" />
-    <div class="tag" @click="onBack" :style="{
-      top: tagData?.top,
-      left: tagData?.left,
-    }">
-      <img :src="require(`@/assets/images/resource/map/ico_address_active.png`)" alt="" />
+    <img
+      class="map"
+      :src="require(`@/assets/images/resource/map/map.jpg`)"
+      alt=""
+    />
+
+    <div
+      class="tag"
+      @click="onBack"
+      :style="{
+        top: tagData?.top,
+        left: tagData?.left,
+      }"
+    >
+      <img
+        :src="require(`@/assets/images/resource/map/ico_address_active.png`)"
+        alt=""
+      />
     </div>
-    <img class="close" @click="onBack" :src="require(`@/assets/images/resource/map/btn_back.png`)" alt="" />
+    <img
+      class="close"
+      @click="onBack"
+      :src="require(`@/assets/images/resource/map/btn_back.png`)"
+      alt=""
+    />
+    <!-- 地图区域 -->
+    <!-- 壹号公馆 -->
+    <img
+      v-show="curArea == 'r_NHFYicvn'"
+      class="img-yihao"
+      src="../../assets/images/resource/map/img_yihao.png"
+      alt=""
+    />
+    <!-- 客房区域 -->
+    <img
+      v-show="curArea == 'r_bwamjaD1'"
+      class="img-kefang"
+      src="../../assets/images/resource/map/img_kefang.png"
+      alt=""
+    />
+    <img
+      v-show="curArea == 'r_bwamjaD1'"
+      class="img-kefang2"
+      src="../../assets/images/resource/map/img_kefang2.png"
+      alt=""
+    />
+    <!-- 酒店公区 -->
+    <img
+      v-show="curArea == '100'"
+      class="img-jiudian"
+      src="../../assets/images/resource/map/img_jiudian.png"
+      alt=""
+    />
     <div class="shoqi" @click="isAside = true">
       <img :src="require(`@/assets/images/resource/map/ico_up.png`)" alt="" />
     </div>
     <div class="raside" :class="{ show: isAside }">
       <raside @close="isAside = false" />
     </div>
-</div>
+  </div>
 </template>
 
 <script setup>
-
-
-import { onMounted, computed, inject, ref, nextTick } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import { scene,tag_position } from "@/data";
+import { tag_position } from "@/data";
 import raside from "./raside.vue";
+import appStore from "@/store";
 
 const router = useRouter();
 
-let isAside = ref(true)
-
-let tags = ref(scene);
-
+let isAside = ref(true);
 
 const route = useRoute();
-const tagData = computed(() => tag_position[route.params.id])
-
+const tagData = computed(() => tag_position[route.params.id]);
 
 let onBack = (data) => {
-  router.replace({ name: 'scene',params:{id:route.params.id} })
+  router.replace({ name: "scene", params: { id: route.params.id } });
 };
 
+const curArea = ref("");
 
+onMounted(() => {
+  curArea.value = route.params.area;
+  console.log(route.params.area,curArea.value);
+});
 </script>
 
 <style lang="scss" scoped>
 $w: 8px;
 
+// 区域
+.img-yihao {
+  position: absolute;
+  height: 200px !important;
+  top: 417px;
+  left: 1067px;
+}
+.img-kefang {
+  position: absolute;
+  height: 220px !important;
+  left: 585px;
+  top: 115px;
+}
+.img-kefang2 {
+  height: 350px !important;
+  position: absolute;
+  bottom: -20px;
+  left: 45%;
+}
+.img-jiudian {
+  position: absolute;
+  left: 677px;
+  height: 250px !important;
+  top: 325px;
+}
 .birdview {
   width: 100%;
   height: 100%;
@@ -54,10 +124,14 @@ $w: 8px;
   justify-content: center;
   position: relative;
 
-  >img {
+  > img {
     height: 100%;
   }
 
+  .map {
+    width: 100%;
+  }
+
   .close {
     width: 60px;
     height: 60px;
@@ -84,7 +158,7 @@ $w: 8px;
     align-items: center;
     justify-content: center;
 
-    >img {
+    > img {
       width: 24px;
     }
   }
@@ -97,9 +171,10 @@ $w: 8px;
     top: 50%;
     left: 50%;
     width: 40px;
+    z-index: 99;
 
     // background: #000;
-    >img {
+    > img {
       width: 100%;
       display: inline-block;
       position: absolute;
@@ -107,7 +182,6 @@ $w: 8px;
       transform: translate(-50%, 0);
       top: 45%;
     }
-
   }
 
   .raside {
@@ -127,7 +201,6 @@ $w: 8px;
   }
 }
 
-
 @keyframes upanddown {
   0% {
     transform: translate(-50%, 0);

src/views/map/index.vue

@@ -1,28 +1,25 @@
 <template>
   <div class="mapcon">
     <div class="mapimg">
-      <bird-view v-if="!isMobile" />
+      <bird-view v-if="!isMobile" @areaChange="areaChange" />
       <birdview_mb v-else></birdview_mb>
     </div>
   </div>
 </template>
 
 <script setup>
-import { onMounted, watch, computed, ref, nextTick,provide  } from "vue";
+import { onMounted, watch, computed, ref, nextTick, provide } from "vue";
 import birdView from "./bird_view.vue";
 import birdview_mb from "./birdview_mb/index.vue";
-import browser from '@/utils/browser'
-import { useRouter, useRoute } from "vue-router";
-const route = useRoute();
+import browser from "@/utils/browser";
+const isMobile = computed(() => browser.isMobile());
 
 
-const router = useRouter();
-const isMobile = computed(() => browser.isMobile())
-
-onMounted(() => {
-  nextTick(() => {
-  })
-});
+// 更新区域
+const areaChange = (id) => {
+  // curArea.value = id;
+  console.log('父组件',id)
+};
 
 </script>
 
@@ -38,7 +35,7 @@ onMounted(() => {
     height: 100%;
   }
 
-  .music{
+  .music {
     position: absolute;
     z-index: 999;
     bottom: 20px;
@@ -48,16 +45,15 @@ onMounted(() => {
   }
 }
 @media only screen and (max-width: 1000px) {
-
   .mapcon {
-    .music{
+    .music {
       position: absolute;
       z-index: 999;
       bottom: 20px;
       right: 40px;
       width: 50px;
       cursor: pointer;
+    }
   }
 }
-}
 </style>

src/views/map/raside.vue

@@ -13,7 +13,7 @@
             :src="require(`@/assets/images/resource/map/${item.color}.png`)"
             alt=""
           />
-          {{ item.name + item.color }}
+          {{ item.name }}
         </p>
         <ul>
           <li
@@ -27,6 +27,9 @@
                   : paramsId == sub.sceneCode?.toLowerCase() &&
                     item.color == 'ico_green'
                   ? '#6c9263b0'
+                  : paramsId == sub.sceneCode?.toLowerCase() &&
+                    item.color == 'ico_red'
+                  ? 'rgb(236 94 94 / 46%)'
                   : paramsId == sub.sceneCode?.toLowerCase()
                   ? '#e7e7052e'
                   : '',
@@ -37,8 +40,11 @@
                   : paramsId == sub.sceneCode?.toLowerCase() &&
                     item.color == 'ico_green'
                   ? '1px solid  #506943'
+                  : paramsId == sub.sceneCode?.toLowerCase() &&
+                    item.color == 'ico_red'
+                  ? '1px solid  #BB3636'
                   : paramsId == sub.sceneCode?.toLowerCase()
-                  ? '1px solid  #dc9e4a'
+                  ? '1px solid  #E0A50E'
                   : '',
             }"
             v-for="(sub, idx) in item.children"
@@ -65,14 +71,18 @@ const route = useRoute();
 
 console.log("result:route.params.id", route.params.id);
 const paramsId = computed(() => route.params.id.toLowerCase());
+const curRoot = ref("");
 
 let number = "WK1597972789485113344";
 
 let list = ref([]);
 
-const COLORMAP = ["ico_blue", "ico_green", "ico_yellow"];
+const COLORMAP = ["ico_green", "ico_blue", "ico_yellow", "ico_red"];
+
+const currentScene = ref({});
 
 const handleItem = (item) => {
+  console.log("点击", item);
   router.replace({
     name: "scene",
     params: {
@@ -81,6 +91,11 @@ const handleItem = (item) => {
   });
 };
 
+// 将区域传给父组件
+const emitMap = () => {
+  emit("areaChange", curRoot);
+};
+
 onMounted(() => {
   $.ajax({
     method: "get",
@@ -97,7 +112,7 @@ onMounted(() => {
         };
       });
       // 过滤空分组
-      let ttt = data.catalogRoot.filter((item) => {
+      let ttt = store.newCatalogRoot.filter((item) => {
         let flag = "";
         if (item.children) {
           item.children.some((sub) => {
@@ -113,7 +128,7 @@ onMounted(() => {
         return flag;
       });
 
-      console.log("result:", ttt);
+      console.log("ttt", ttt);
 
       list.value = ttt.map((item, idx) => {
         let cc = item.children.map((sub, i) => {
@@ -124,11 +139,14 @@ onMounted(() => {
         });
         return {
           ...item,
-          children: cc[0],
+          children: cc.flat(),
           color: COLORMAP[idx],
         };
       });
-      console.log("result:", list.value);
+
+      console.log("result:list", list.value);
+      curRoot.value = route.params.area;
+
       // 查询初始场景的所在2级分组
       // store.setCurrentSecondary(catalog);
     },

src/views/scene/ifr.vue

@@ -23,7 +23,7 @@ const sendMsg = (data) => {
         listIsShow: data, //传的数据
       },
     },
-    // `https://houseoss.4dkankan.com/project/xiangshanhu/scene/index.html#/?m=${store.currentScene.sceneCode}`
+    `https://houseoss.4dkankan.com/project/xiangshanhu/scene/index.html#/?m=${store.currentScene.sceneCode}`
   );
 };
 

src/views/scene/index.vue

@@ -1,17 +1,25 @@
 <template>
   <div class="home">
     <pano />
-    <img class="up-icon" v-show="!store.listIsShow" src="../../assets/images/resource/scene/upIcon.png" @click="departure" />
+    <img
+      class="up-icon"
+      v-show="!store.listIsShow"
+      src="../../assets/images/resource/scene/upIcon.png"
+      @click="departure"
+    />
     <div class="planform-box">
       <span>当前位置:{{ store.currentScene.sceneTitle }}</span>
-      <img src="../../assets/images/resource/scene/map-top.png" alt="" />
+      <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"
       @click="
         router.push({
           name: 'map',
-          params: { id: store.currentScene.sceneCode },
+          params: {
+            id: store.currentScene.sceneCode,
+            area: store.currentCatalogRoot.id,
+          },
         })
       "
     >
@@ -27,12 +35,12 @@
 </template>
 
 <script setup>
-import vaside from "./aside";
+
 import { useRouter, useRoute } from "vue-router";
 import pano from "./pano";
 import vmap from "./mapIcon";
 import browser from "@/utils/browser";
-import { onMounted, watch, computed, ref, nextTick } from "vue";
+import {  computed} from "vue";
 import appStore from "@/store/index";
 import { tag_position } from "@/data";
 
@@ -44,20 +52,10 @@ const isMobile = computed(() => browser.isMobile());
 const tagData = computed(
   () => tag_position[store.currentScene.sceneCode] || {}
 );
-const currentSceneTitme = ref("");
-
-const gohome = () => {
-  router.push({
-    path: `/`,
-  });
-  setTimeout(() => {
-    window.location.reload();
-  }, 0);
-};
 
 const departure = () => {
-  store.setListIsShow(true)
-}
+  store.setListIsShow(true);
+};
 </script>
 
 <style lang="scss" scoped>

src/views/scene/list.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bar-list" :class=" store.listIsShow ? '' : 'bar-list-hidden'">
+  <div class="bar-list" :class="store.listIsShow ? '' : 'bar-list-hidden'">
     <div
       class="swiper-container"
       id="swcatalogRoot"
@@ -18,20 +18,53 @@
               store.currentCatalogRoot.id == item.id,
           }"
           @click="tabRoot(item)"
-          v-for="(item, i) in store.metadata.catalogRoot"
+          v-for="(item, i) in store.newCatalogRoot"
           :key="i"
         >
-          <div class="area-text" v-if="store.currentCatalogRoot.id == item.id">
-            {{ item.name }}
-            <div class="active-line"></div>
+          <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>
             {{
               item.name.length > spanlength
                 ? item.name.slice(0, spanlength)
                 : item.name
             }}
-            <!-- <div class="active-line"></div> -->
           </div>
         </li>
       </ul>
@@ -81,37 +114,6 @@
           </li>
         </ul>
       </div>
-
-      <div
-        class="swiper-container"
-        id="swSecondary"
-        :style="`width:${secondaryW}px`"
-        v-if="store.secondaryList.length > 1"
-      >
-        <ul class="swiper-wrapper">
-          <li
-            class="swiper-slide"
-            @click="tabSecondary(item)"
-            :class="{
-              active: store.currentSecondary.id == item.id,
-              loopspan:
-                item.name.length > spanlength &&
-                store.currentSecondary.id == item.id,
-            }"
-            v-for="(item, i) in store.secondaryList"
-            :key="i"
-          >
-            <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>
 </template>
@@ -172,7 +174,11 @@ const tabCurrentScene = (data) => {
 };
 
 const tabSecondary = (data) => {
-  store.setCurrentSecondary(data);
+  const cur = store.secondaryList.find((item) => {
+    return data.id === item.id;
+  });
+  store.setCurrentSecondary(cur);
+  store.currentScene = store.currentScenesList[0]
 };
 
 const tabRoot = (data) => {
@@ -185,9 +191,18 @@ const tabRoot = (data) => {
 
 // 向下离场
 const departure = () => {
-  store.setListIsShow(false)
+  store.setListIsShow(false);
 };
 
+// // 切换楼层
+// const currentSecondaryChange = (item) => {
+//   const current = store.secondaryList.filter((sub) => {
+//     return sub.id === item.id
+//   })
+//   console.log(current, item)
+//   store.setCurrentSecondary(current)
+// }
+
 onMounted(() => {
   loadList();
   store.$subscribe((mutation, state) => {
@@ -267,12 +282,13 @@ $width: 100%;
         }
 
         .active-line {
-          width: 80%;
+          width: 60px;
           height: 4px;
           background-color: #e1ceaaad;
           position: absolute;
           bottom: 5px;
-          left: 10px;
+          left: 50%;
+          transform: translateX(-50%);
         }
       }
     }
@@ -290,18 +306,42 @@ $width: 100%;
     > ul {
       > li {
         box-sizing: border-box;
-        overflow: hidden;
+        // overflow: hidden;
         width: 90px;
         line-height: 30px;
         height: 30px;
         .area-text {
-          width: 100%;
+          // width: 100%;
           word-break: keep-all;
           color: #ffffff;
           font-weight: 400;
           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

@@ -155,7 +155,7 @@ onUnmounted(() => {
         );
 
         // 查询初始场景的所在1级分组
-        data.catalogRoot.forEach((item) => {
+        store.newCatalogRoot.forEach((item) => {
           let temp =
             item.children && item.children.find((sub) => sub == catalog.id);
           if (temp) {