up

mo/src/views/Home.vue

@@ -156,8 +156,10 @@ export default {
     // 控制室内场景的inco位移incoMove
     incoMove(val) {
       let dom = document.querySelector(".iframeBox iframe");
-      if (dom && this.box3Ac > 2) {
-        dom.contentWindow.incoMove(val);
+
+        if(dom&&dom.contentWindow&&dom.contentWindow.incoMove){
+          dom.contentWindow.incoMove(val);
+        }
         // let domSon =dom.contentWindow.document.querySelector('.inco');
         // console.log(dom.contentWindow);
         // console.log(dom.contentWindow.incoMove);
@@ -167,7 +169,7 @@ export default {
         //   console.log('------',dom.contentWindow);
         //   dom.contentWindow.incoMove(val);
         // }, 200);
-      }
+      // }
     },
     // 点击左上角的返回
     backSta() {

mo/src/views/bottom.vue

@@ -34,13 +34,7 @@
                     alt=""
                     v-if="box3Ac < 3"
                   />
-                  <img
-                    v-lazy="
-                      `https://4dkk.4dage.com/scene_view_data/${val.code}/user/thumb-2k.jpg`
-                    "
-                    alt=""
-                    v-else
-                  />
+                  <img v-lazy="codeChange(val.code, val.id)" alt="" v-else />
                   <van-notice-bar
                     speed="30"
                     v-if="box1Ac === val.id"
@@ -57,7 +51,7 @@
         </div>
       </div>
       <div class="box2" v-if="box3Ac > 2">
-        <div class="huadong" :style="`width:${box2Data.length * 80}px`">
+        <div class="huadong" :style="`width:${box2Data.length * 70}px`">
           <div class="row" v-for="(item, index) in box2Data" :key="item.id">
             <span
               @click="box2Cut(item, index)"
@@ -118,6 +112,46 @@ export default {
   },
   //方法集合
   methods: {
+    // 处理链接
+    codeChange(code, id) {
+      let index = code.indexOf("&");
+      let url = code.substr(0, index);
+      if (index > 0) {
+        let arr = [
+          "4-3_7",
+          "4-3_8",
+          "4-3_12",
+          "4-3_12",
+          "4-3_14",
+          "4-3_15",
+          "4-3_16",
+          "4-3_17",
+          "4-3_19",
+          "4-3_20",
+          "4-3_21",
+          "4-3_22",
+          "4-3_23",
+          "4-3_24",
+          "4-5_7",
+          "4-5_8",
+          "4-5_9",
+          "4-6_2",
+          "4-6_3",
+          "4-6_4",
+          "4-6_5",
+          "4-6_6",
+          "4-6_7",
+          "4-6_8",
+          "4-6_9",
+          "4-6_10",
+        ];
+        if (arr.find((v) => v === id)) return `img/${id}.jpg`;
+        else
+          return `https://4dkk.4dage.com/scene_view_data/${url}/user/thumb-2k.jpg`;
+      } else
+        return `https://4dkk.4dage.com/scene_view_data/${code}/user/thumb-2k.jpg`;
+    },
+
     // 给父组件调用的收起底部的方法
     openBotton(val) {
       this.swiShow = val;
@@ -156,11 +190,7 @@ export default {
 
       this.getBox3Fu(item.id);
 
-      if (item.id == 3) {
-        this.box2Ac = "2";
-        this.getSwFu("2", "1_1", true);
-      } else this.getSwFu("1", "1_1", true);
-      // this.getSwFu("1", "1_1", true);
+      this.getSwFu("1", "1_1", true);
     },
     box2Cut(item, index, flag) {
       if (this.box2Ac === item.id) return;
@@ -168,7 +198,7 @@ export default {
       // 设置被选中的元素居中显示
       this.$nextTick(() => {
         let scrolDom = document.querySelector(".box2");
-        scrolDom.scrollLeft = (index - 1) * 80;
+        scrolDom.scrollLeft = (index - 1) * 70;
       });
       if (flag) return;
       this.getSwFu(item.id + "", "1_1", true);

pc/src/views/Bottom2.vue

@@ -25,8 +25,14 @@
               >
                 <el-tooltip :content="val.name" placement="top">
                   <div>
-                    <img v-lazy="`https://4dkk.4dage.com/720yun_fd_manage/${val.code}/preview.jpg`" alt="" v-if="box3Ac<3"/>
-                    <img v-lazy="`https://4dkk.4dage.com/scene_view_data/${val.code}/user/thumb-2k.jpg`" alt="" v-else/>
+                    <img
+                      v-lazy="
+                        `https://4dkk.4dage.com/720yun_fd_manage/${val.code}/preview.jpg`
+                      "
+                      alt=""
+                      v-if="box3Ac < 3"
+                    />
+                    <img v-lazy="codeChange(val.code, val.id)" alt="" v-else />
                     <p>{{ val.name }}</p>
                   </div>
                 </el-tooltip>
@@ -34,8 +40,11 @@
             </div>
           </div>
         </div>
-        <div class="swiper-button-next swiper-button-next1"></div>
-        <div class="swiper-button-prev swiper-button-prev1"></div>
+        <div
+          class="swiper-button-next"
+          :class="{ none: swIndex === swData.length - 1 }"
+        ></div>
+        <div class="swiper-button-prev" :class="{ none: swIndex === 0 }"></div>
       </div>
     </div>
     <div class="box2" v-if="box3Ac === 3 || box3Ac === 4">
@@ -79,6 +88,7 @@ export default {
       data: [],
       swData: [],
       Swiper: null,
+      swIndex: 0,
       box3Data: [
         { id: 1, name: "航拍", code: "" },
         { id: 2, name: "地面全景", code: "" },
@@ -89,6 +99,45 @@ export default {
   },
   computed: {},
   methods: {
+    // 处理链接
+    codeChange(code, id) {
+      let index = code.indexOf("&");
+      let url = code.substr(0, index);
+      if (index > 0) {
+        let arr = [
+          "4-3_7",
+          "4-3_8",
+          "4-3_12",
+          "4-3_12",
+          "4-3_14",
+          "4-3_15",
+          "4-3_16",
+          "4-3_17",
+          "4-3_19",
+          "4-3_20",
+          "4-3_21",
+          "4-3_22",
+          "4-3_23",
+          "4-3_24",
+          "4-5_7",
+          "4-5_8",
+          "4-5_9",
+          "4-6_2",
+          "4-6_3",
+          "4-6_4",
+          "4-6_5",
+          "4-6_6",
+          "4-6_7",
+          "4-6_8",
+          "4-6_9",
+          "4-6_10",
+        ];
+        if (arr.find((v) => v === id)) return `img/${id}.jpg`;
+        else
+          return `https://4dkk.4dage.com/scene_view_data/${url}/user/thumb-2k.jpg`;
+      } else
+        return `https://4dkk.4dage.com/scene_view_data/${code}/user/thumb-2k.jpg`;
+    },
     // 点击底部的切换分区
     botChange(item) {
       // console.log('--------',item.id);
@@ -109,9 +158,7 @@ export default {
       else if (item.id === 2) this.data = [...exArr2];
       else if (item.id === 3) this.data = [...exArr3];
       else this.data = [...exArr4];
-      if(item.id==3) this.getSwFu("2", "1_1", true);
-      else this.getSwFu("1", "1_1", true);
-      
+      this.getSwFu("1", "1_1", true);
 
       // 给父组件传递信息
       this.$emit("gaoduChange", this.box3Ac);
@@ -143,14 +190,14 @@ export default {
         setTimeout(() => {
           this.Swiper = new Swiper(`.box1 .sww${this.towAc}`, {
             navigation: {
-              nextEl: ".swiper-button-next1",
-              prevEl: ".swiper-button-prev1",
+              nextEl: ".swiper-button-next",
+              prevEl: ".swiper-button-prev",
             },
             slidesPerView: 1,
             initialSlide: num1,
             spaceBetween: 0,
           });
-        }, 200);
+        }, 300);
       });
     },
     // 切换VR
@@ -168,7 +215,11 @@ export default {
       else this.data = exArr1;
     },
   },
-  watch: {},
+  watch: {
+    "Swiper.activeIndex"(val) {
+      this.swIndex = val;
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     this.baseList(1);
@@ -277,11 +328,21 @@ export default {
       }
     }
     .swiper-button-next {
+      opacity: 1;
+      pointer-events: auto;
+      cursor: pointer;
       color: #c48871;
     }
     .swiper-button-prev {
+      pointer-events: auto;
+      opacity: 1;
+      cursor: pointer;
       color: #c48871;
     }
+    .none {
+      opacity: 0.35;
+      pointer-events: none;
+    }
   }
   .box2 {
     background-color: rgba(0, 0, 0, 0.8);

pc/src/views/Onezhan.vue

@@ -3,26 +3,19 @@
     <!-- 左边的框 -->
     <div class="leftList" v-if="oneShow">
       <div class="leftCon">
-        <div class="row" v-for="val in leftData.son" :key="val.id" @click="toZhan(3,leftData.id,val.id,val.code)">
+        <div
+          class="row"
+          v-for="val in leftData.son"
+          :key="val.id"
+          @click="toZhan(3, leftData.id, val.id, val.code)"
+        >
           {{ val.name }}
         </div>
       </div>
     </div>
 
     <div class="main">
-      <p class="botTit">第一展厅</p>
-      <div
-        v-for="item in data"
-        :key="item.id"
-        @click="boxClick(item)"
-        :class="{
-          active: oneShow === item.id,
-          box6: item.id == 6,
-          box7: item.id == 7,
-        }"
-      >
-        {{ item.name }}
-      </div>
+      <Map1 :oneShow='oneShow' @sonShowSon='sonShowSon'/>
     </div>
     <div class="rightZhan">
       <div class="top" @keyup.enter="mySearch">
@@ -46,7 +39,7 @@
               <!-- <div class="searTit">{{ item.name }}</div> -->
               <div
                 class="searRow"
-                @click="toZhan(3,item.id,val.id,val.code)"
+                @click="toZhan(3, item.id, val.id, val.code)"
                 v-for="val in item.son"
                 :key="val.id"
                 v-html="val.name"
@@ -80,7 +73,7 @@
           </div>
           <div class="contRowSon" v-if="item.id == oneShow">
             <div
-            @click="toZhan(3,item.id,val.id,val.code)"
+              @click="toZhan(3, item.id, val.id, val.code)"
               v-for="val in item.son"
               :key="val.id"
             >
@@ -94,25 +87,17 @@
 </template>
 
 <script>
+import Map1 from "../components/map.vue";
 import { exArr3 } from "./zhan.js";
 export default {
   name: "Onezhan",
-  components: {},
+  components: { Map1 },
   data() {
     return {
       leftData: {},
       searShow: false,
       name: "",
       searchData: [],
-      data: [
-        { name: "分区一", id: "1", class: "box1" },
-        { name: "分区二", id: "2", class: "box2" },
-        { name: "分区三", id: "3", class: "box3" },
-        { name: "分区四", id: "4", class: "box4" },
-        { name: "分区五", id: "5", class: "box5" },
-        { name: "分区六", id: "6", class: "box6" },
-        { name: "分区七", id: "7", class: "box7" },
-      ],
       oneShow: null,
       rightData: exArr3,
     };
@@ -120,24 +105,17 @@ export default {
   watch: {
     oneShow(val) {
       if (val) {
-        this.leftData = exArr3.find((v) => v.id === val)
-        let dom = document.querySelector('.leftCon')
-        if(dom) dom.scrollTop=0
-        } else this.leftData = {};
+        this.leftData = exArr3.find((v) => v.id === val);
+        let dom = document.querySelector(".leftCon");
+        if (dom) dom.scrollTop = 0;
+      } else this.leftData = {};
     },
   },
   computed: {},
   methods: {
-    toZhan(bs,id1,id2,code){
-      if(code==='') return this.$message.warning('数据计算中，敬请期待')
-      this.$emit('toZhan', bs,id1,id2,code)
-    },
-    // 方块盒子点击
-    boxClick(item) {
-      if (this.oneShow === item.id) return (this.oneShow = null);
-      this.oneShow = item.id;
-      this.searShow = false;
-      this.name = "";
+    toZhan(bs, id1, id2, code) {
+      if (code === "") return this.$message.warning("数据计算中，敬请期待");
+      this.$emit("toZhan", bs, id1, id2, code);
     },
 
     mySearch() {
@@ -175,6 +153,9 @@ export default {
       if (this.oneShow === id) this.oneShow = null;
       else this.oneShow = id;
     },
+    sonShowSon(id){
+      this.sonShow(id)
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -200,8 +181,8 @@ export default {
   top: 80px;
   left: 50%;
   transform: translateX(-50%);
-  background-image: url("../assets/img/zhanBac.png");
-  background-size: 100% 100%;
+  background: url("../assets/img/zhanBac.png") no-repeat right top;
+
   .leftList {
     position: absolute;
     z-index: 15;
@@ -245,106 +226,13 @@ export default {
     }
   }
   .main {
-    .botTit {
-      position: absolute;
-      bottom: 116px;
-      left: 490px;
-      font-size: 20px;
-      color: #fff;
-      letter-spacing: 8px;
-    }
-    & > div {
-      z-index: 10;
-      cursor: pointer;
-      position: absolute;
-      background-color: #034c52;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: rgba(255, 255, 255, 0.7);
-      transition: all 0.3s;
-      &:hover {
-        background-color: #c48871;
-        color: #fff;
-      }
-      &:nth-of-type(1) {
-        top: 150px;
-        right: 489px;
-        width: 184px;
-        height: 114px;
-      }
-      &:nth-of-type(2) {
-        width: 184px;
-        height: 109px;
-        top: 26px;
-        right: 489px;
-      }
-      &:nth-of-type(3) {
-        width: 94px;
-        height: 239px;
-        top: 26px;
-        right: 683px;
-      }
-      &:nth-of-type(4) {
-        width: 158px;
-        height: 109px;
-        top: 26px;
-        left: 357px;
-      }
-      &:nth-of-type(5) {
-        width: 177px;
-        height: 114px;
-        top: 150px;
-        left: 339px;
-      }
-      &:nth-of-type(6) {
-        background-color: transparent;
-        z-index: 9;
-        width: 165px;
-        height: 161px;
-        background-image: url("../assets/img/zhan/1_6.png");
-        background-size: 100% 100%;
-        top: 151px;
-        left: 166px;
-        padding-left: 20px;
-        &::after {
-          content: "";
-          position: absolute;
-          top: -1px;
-          right: -8px;
-          width: 12px;
-          height: 115px;
-        }
-        &:hover {
-          background-color: transparent;
-          background-image: url("../assets/img/zhan/1_6Ac.png");
-        }
-      }
-      &:nth-of-type(7) {
-        z-index: 8;
-        width: 272px;
-        height: 204px;
-        background-color: transparent;
-        top: 27px;
-        left: 73px;
-        background-image: url("../assets/img/zhan/1_7.png");
-        background-size: 100% 100%;
-        padding-bottom: 20px;
-        &:hover {
-          background-image: url("../assets/img/zhan/1_7Ac.png");
-          background-color: transparent;
-        }
-      }
-    }
-    .active {
-      background-color: #c48871;
-    }
-    .box6.active {
-      background-image: url("../assets/img/zhan/1_6Ac.png");
-    }
-    .box7.active {
-      background-image: url("../assets/img/zhan/1_7Ac.png");
-    }
+    z-index: 10;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    width: 852px;
+    height: 543px;
+    background: url("../assets/img/zhanBac2.png");
   }
   .rightZhan {
     position: absolute;

pc/src/views/Towzhan.vue

@@ -15,20 +15,7 @@
     </div>
 
     <div class="main">
-      <p class="botTit">第二展厅</p>
-      <div
-        v-for="item in data"
-        :key="item.id"
-        @click="boxClick(item)"
-        :class="{
-          active: oneShow === item.id,
-          box4: item.id == 4,
-          box5: item.id == 5,
-          box6: item.id == 6,
-        }"
-      >
-        {{ item.name }}
-      </div>
+      <Map2 :oneShow="oneShow" @sonShowSon="sonShowSon" />
     </div>
     <div class="rightZhan">
       <div class="top" @keyup.enter="mySearch">
@@ -98,27 +85,18 @@
 </template>
 
 <script>
+import Map2 from "../components/map2.vue";
 import { exArr4 } from "./zhan.js";
 export default {
   name: "Towzhan",
-  components: {},
+  components: { Map2 },
   data() {
     return {
       leftData: {},
       searShow: false,
       name: "",
       searchData: [],
-      data: [
-        { name: "分区一", id: "1", class: "box1" },
-        { name: "分区二", id: "2", class: "box2" },
-        { name: "分区三", id: "3", class: "box3" },
-        { name: "分区四", id: "4", class: "box4" },
-        { name: "分区五", id: "5", class: "box5" },
-        { name: "分区六", id: "6", class: "box6" },
-        { name: "分区七", id: "7", class: "box7" },
-        { name: "分区八", id: "8", class: "box7" },
-        { name: "分区九", id: "9", class: "box7" },
-      ],
+
       oneShow: null,
       rightData: exArr4,
     };
@@ -136,14 +114,9 @@ export default {
   methods: {
     toZhan(bs, id1, id2, code) {
       if (code === "") return this.$message.warning("数据计算中，敬请期待");
+      this.$emit("toZhan", bs, id1, id2, code);
     },
-    // 方块盒子点击
-    boxClick(item) {
-      if (this.oneShow === item.id) return (this.oneShow = null);
-      this.oneShow = item.id;
-      this.searShow = false;
-      this.name = "";
-    },
+
     mySearch() {
       if (this.name.trim() === "") return this.$message.warning("不能为空!");
       this.searShow = true;
@@ -179,6 +152,9 @@ export default {
       if (this.oneShow === id) this.oneShow = null;
       else this.oneShow = id;
     },
+    sonShowSon(id) {
+      this.sonShow(id);
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -202,8 +178,7 @@ export default {
   top: 80px;
   left: 50%;
   transform: translateX(-50%);
-  background-image: url("../assets/img/zhanBac.png");
-  background-size: 100% 100%;
+  background: url("../assets/img/zhanBac.png") no-repeat right top;
   .leftList {
     position: absolute;
     z-index: 15;
@@ -247,122 +222,13 @@ export default {
     }
   }
   .main {
-    .botTit {
-      position: absolute;
-      bottom: 116px;
-      left: 490px;
-      font-size: 20px;
-      color: #fff;
-      letter-spacing: 8px;
-    }
-    & > div {
-      z-index: 10;
-      cursor: pointer;
-      position: absolute;
-      background-color: #034c52;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: rgba(255, 255, 255, 0.7);
-      transition: all 0.3s;
-      &:hover {
-        background-color: #c48871;
-        color: #fff;
-      }
-      &:nth-of-type(1) {
-        top: 150px;
-        right: 489px;
-        width: 184px;
-        height: 114px;
-      }
-      &:nth-of-type(2) {
-        width: 149px;
-        height: 114px;
-        top: 150px;
-        right: 683px;
-      }
-      &:nth-of-type(3) {
-        width: 100px;
-        height: 114px;
-        top: 150px;
-        right: 842px;
-      }
-      &:nth-of-type(4) {
-        background-color: transparent;
-        z-index: 9;
-        width: 150px;
-        height: 147px;
-        top: 150px;
-        left: 202px;
-        background-image: url("../assets/img/zhan/2_4.png");
-        background-size: 100% 100%;
-        padding-left: 20px;
-        &:hover {
-          background-image: url("../assets/img/zhan/2_4Ac.png");
-          background-color: transparent;
-        }
-      }
-      &:nth-of-type(5) {
-        background-color: transparent;
-        z-index: 10;
-        width: 167px;
-        height: 145px;
-        top: 212px;
-        left: 87px;
-        background-image: url("../assets/img/zhan/2_5.png");
-        background-size: 100% 100%;
-        padding-left: 20px;
-        &:hover {
-          background-image: url("../assets/img/zhan/2_5Ac.png");
-          background-color: transparent;
-        }
-      }
-      &:nth-of-type(6) {
-        background-color: transparent;
-        z-index: 8;
-        width: 251px;
-        height: 196px;
-        top: 36px;
-        left: 77px;
-        background-image: url("../assets/img/zhan/2_6.png");
-        background-size: 100% 100%;
-        padding: 0 0 20px 20px;
-        &:hover {
-          background-image: url("../assets/img/zhan/2_6Ac.png");
-          background-color: transparent;
-        }
-      }
-      &:nth-of-type(7) {
-        width: 122px;
-        height: 109px;
-        top: 34px;
-        left: 339px;
-      }
-      &:nth-of-type(8) {
-        width: 149px;
-        height: 109px;
-        top: 34px;
-        left: 471px;
-      }
-      &:nth-of-type(9) {
-        top: 34px;
-        right: 489px;
-        width: 184px;
-        height: 109px;
-      }
-    }
-    .active {
-      background-color: #c48871;
-    }
-    .box4.active {
-      background-image: url("../assets/img/zhan/2_4Ac.png");
-    }
-    .box5.active {
-      background-image: url("../assets/img/zhan/2_5Ac.png");
-    }
-    .box6.active {
-      background-image: url("../assets/img/zhan/2_6Ac.png");
-    }
+    z-index: 10;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    width: 852px;
+    height: 543px;
+    background: url("../assets/img/zhanBac2.png");
   }
   .rightZhan {
     position: absolute;
@@ -501,9 +367,9 @@ export default {
         }
         .contRowTop {
           color: #fff;
-          height: 28px;
+          height: 34px;
           text-align: center;
-          line-height: 28px;
+          line-height: 34px;
           background-image: url("../assets/img/zhanRBac.png");
           background-size: 100% 100%;
           font-size: 16px;
@@ -520,7 +386,7 @@ export default {
         }
         .contRowSon {
           width: 96%;
-          max-height: 327px;
+          max-height: 310px;
           overflow-y: auto;
           padding: 10px 20px 4px 50px;
           & > div {