Главная Обзор Помощь
Регистрация Вход
shaogen1995
/
bbh_Yun
1
0
Ответвить 0
Файлы Обсуждения 0 Запросы на слияние 0 Вики
Просмотр исходного кода

up

shaogen1995 3 лет назад
Родитель
842ce8ec29
Сommit
8970c141b4
39 измененных файлов с 559 добавлено и 95 удалено
Разделённый вид Показать статистику Diff
  1. 19 6
      mo/package-lock.json
  2. 2 1
      mo/package.json
  3. BIN
      mo/public/favicon.ico
  4. BIN
      mo/public/img/diBiao.png
  5. 1 0
      mo/public/img/down.svg
  6. BIN
      mo/public/img/inco1.png
  7. BIN
      mo/public/img/inco1Ac.png
  8. BIN
      mo/public/img/inco2.png
  9. BIN
      mo/public/img/inco2Ac.png
  10. BIN
      mo/public/img/inco3.png
  11. BIN
      mo/public/img/inco3Ac.png
  12. BIN
      mo/public/img/loading.png
  13. 1 0
      mo/public/img/up.svg
  14. 263 0
      mo/public/swkk.html
  15. BIN
      mo/src/assets/img/Home.png
  16. BIN
      mo/src/assets/img/loading.gif
  17. 5 1
      mo/src/main.js
  18. 58 12
      mo/src/views/Home.vue
  19. 7 2
      mo/src/views/bottom.vue
  20. 11 32
      mo/src/views/zhan.js
  21. 3 0
      mo/vue.config.js
  22. 11 0
      pc/package-lock.json
  23. 2 1
      pc/package.json
  24. BIN
      pc/public/favicon.ico
  25. BIN
      pc/public/img/diBiao.png
  26. BIN
      pc/public/img/inco1.png
  27. BIN
      pc/public/img/inco1Ac.png
  28. BIN
      pc/public/img/inco2.png
  29. BIN
      pc/public/img/inco2Ac.png
  30. BIN
      pc/public/img/inco3.png
  31. BIN
      pc/public/img/inco3Ac.png
  32. BIN
      pc/public/img/loading.png
  33. 144 1
      pc/public/swkk.html
  34. BIN
      pc/src/assets/img/IMGerror.png
  35. BIN
      pc/src/assets/img/loading.gif
  36. 5 1
      pc/src/main.js
  37. 2 1
      pc/src/views/Bottom2.vue
  38. 14 5
      pc/src/views/Home.vue
  39. 11 32
      pc/src/views/zhan.js

+ 19 - 6
mo/package-lock.json
Просмотреть файл 

@@ -11,6 +11,7 @@
 
         "core-js": "^3.6.5",
 
         "vant": "^2.12.48",
 
         "vue": "^2.6.11",
 
+        "vue-lazyload": "^1.3.3",
 
         "vue-router": "^3.2.0"
 
       },
 
       "devDependencies": {
 
@@ -13126,6 +13127,11 @@
 
         "vue": ">= 2.6.0"
 
       }
 
     },
 
+    "node_modules/vant/node_modules/vue-lazyload": {
 
+      "version": "1.2.3",
 
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
 
+      "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
 
+    },
 
     "node_modules/vary": {
 
       "version": "1.1.2",
 
       "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
 
@@ -13183,9 +13189,9 @@
 
       "dev": true
 
     },
 
     "node_modules/vue-lazyload": {
 
-      "version": "1.2.3",
 
-      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
 
-      "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
 
+      "version": "1.3.4",
 
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.4.tgz",
 
+      "integrity": "sha512-K0frbPQJuvFHVpdl/ov5CqCR/CHWeLGs8E8V1d/09DIETqBjeGhC1fLMmwUy3Go2Yd/VX610AZ7Mdn4B54592Q=="
 
     },
 
     "node_modules/vue-loader": {
 
       "version": "15.10.0",
 
@@ -25128,6 +25134,13 @@
 
         "@vant/popperjs": "^1.1.0",
 
         "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
 
         "vue-lazyload": "1.2.3"
 
+      },
 
+      "dependencies": {
 
+        "vue-lazyload": {
 
+          "version": "1.2.3",
 
+          "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
 
+          "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
 
+        }
 
       }
 
     },
 
     "vary": {
 
@@ -25183,9 +25196,9 @@
 
       "dev": true
 
     },
 
     "vue-lazyload": {
 
-      "version": "1.2.3",
 
-      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
 
-      "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
 
+      "version": "1.3.4",
 
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.4.tgz",
 
+      "integrity": "sha512-K0frbPQJuvFHVpdl/ov5CqCR/CHWeLGs8E8V1d/09DIETqBjeGhC1fLMmwUy3Go2Yd/VX610AZ7Mdn4B54592Q=="
 
     },
 
     "vue-loader": {
 
       "version": "15.10.0",

+ 2 - 1
mo/package.json
Просмотреть файл 

@@ -10,7 +10,8 @@
 
     "core-js": "^3.6.5",
 
     "vant": "^2.12.48",
 
     "vue": "^2.6.11",
 
-    "vue-router": "^3.2.0"
 
+    "vue-router": "^3.2.0",
 
+    "vue-lazyload": "^1.3.3"
 
   },
 
   "devDependencies": {
 
     "@vue/cli-plugin-babel": "~4.5.13",

BIN
mo/public/favicon.ico
Просмотреть файл


BIN
mo/public/img/diBiao.png
Просмотреть файл


+ 1 - 0
mo/public/img/down.svg
Просмотреть файл 

@@ -0,0 +1 @@
 
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1661938561335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2518" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M288.791335 65.582671l446.41733 446.417329-446.41733 446.417329z" p-id="2519" fill="#ffffff"></path></svg>

BIN
mo/public/img/inco1.png
Просмотреть файл


BIN
mo/public/img/inco1Ac.png
Просмотреть файл


BIN
mo/public/img/inco2.png
Просмотреть файл


BIN
mo/public/img/inco2Ac.png
Просмотреть файл


BIN
mo/public/img/inco3.png
Просмотреть файл


BIN
mo/public/img/inco3Ac.png
Просмотреть файл


BIN
mo/public/img/loading.png
Просмотреть файл


+ 1 - 0
mo/public/img/up.svg
Просмотреть файл 

@@ -0,0 +1 @@
 
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1661938554433" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2335" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M735.208665 65.582671l-446.41733 446.417329 446.41733 446.417329z" p-id="2336" fill="#ffffff"></path></svg>

+ 263 - 0
mo/public/swkk.html
Просмотреть файл 

@@ -0,0 +1,263 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <script src="//4dkk.4dage.com/v4/sdk/4.2.0/kankan-sdk-deps.js"></script>
 
+  <script src="//4dkk.4dage.com/v4/sdk/4.2.0/kankan-sdk.js"></script>
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+      box-sizing: border-box;
 
+    }
 
+
 
+    html,
 
+    body {
 
+      width: 100%;
 
+      height: 100%;
 
+      overflow: hidden;
 
+    }
 
+
 
+    .box {
 
+      width: 100%;
 
+      height: 100%;
 
+    }
 
+
 
+    [xui_min_map] {
 
+      width: 150px !important;
 
+      height: 150px !important;
 
+      right: 0px;
 
+      top: 70px;
 
+      transition: right .5s;
 
+      pointer-events: none !important;
 
+    }
 
+
 
+    .inco {
 
+      transition: bottom 0.5s;
 
+      position: absolute;
 
+      bottom: 234px;
 
+      right: 8px;
 
+      width: 160px;
 
+      height: 36px;
 
+      background-color: rgba(0, 0, 0, .4);
 
+      border-radius: 18px;
 
+      z-index: 11;
 
+      display: flex;
 
+      justify-content: space-around;
 
+      padding: 0 10px 0 15px;
 
+    }
 
+
 
+    .inco>div {
 
+      cursor: pointer;
 
+      width: 33%;
 
+      height: 100%;
 
+      display: flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+      background-size: 36px 36px;
 
+      background-repeat: no-repeat;
 
+      background-position: center;
 
+    }
 
+
 
+    .inco1 {
 
+      background-image: url('./img/inco1Ac.png');
 
+      width: 22% !important;
 
+    }
 
+
 
+    .inco2 {
 
+      background-image: url('./img/inco2.png');
 
+    }
 
+
 
+    .inco3 {
 
+      background-image: url('./img/inco3.png');
 
+    }
 
+
 
+    .loading {
 
+      position: absolute;
 
+      top: 0;
 
+      left: 0;
 
+      z-index: 12;
 
+      width: 100%;
 
+      height: 100%;
 
+      background-color: black;
 
+      display: flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+    }
 
+
 
+    .loading .loadBox {
 
+      color: #fff;
 
+      text-align: center;
 
+      letter-spacing: 2px;
 
+      width: 110px;
 
+      height: 110px;
 
+      background: rgba(0, 0, 0, 0.5);
 
+      border-radius: 2px;
 
+    }
 
+
 
+    .loadIcon {
 
+      width: 60px;
 
+      height: 60px;
 
+      position: relative;
 
+      overflow: hidden;
 
+      margin: 10px auto;
 
+    }
 
+
 
+    .loadIcon img {
 
+      height: 60px;
 
+      position: absolute;
 
+      left: 0;
 
+      top: 0;
 
+      animation: loading 1s steps(15) infinite;
 
+    }
 
+
 
+    @keyframes loading {
 
+      100% {
 
+        left: -900px;
 
+      }
 
+    }
 
+
 
+    .mapShow {
 
+      transition: right .5s;
 
+      position: absolute;
 
+      top: 80px;
 
+      right: 150px;
 
+      background-color: rgba(0, 0, 0, .3);
 
+      width: 20px;
 
+      height: 30px;
 
+      z-index: 10;
 
+      border-radius: 8px 0px 0 8px;
 
+      display: flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+    }
 
+
 
+    .mapShow img {
 
+      width: 16px;
 
+      height: 16px;
 
+    }
 
+
 
+    .mapShow .up {
 
+      display: none;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div class="loading">
 
+    <div class="loadBox">
 
+      <div class="loadIcon">
 
+        <img src="./img/loading.png" alt="">
 
+      </div>
 
+      <div class="txt">加载中</div>
 
+
 
+
 
+    </div>
 
+  </div>
 
+
 
+  <!-- 显示和隐藏小地图 -->
 
+  <div class="mapShow">
 
+    <img class="down" src="./img/down.svg" alt="">
 
+    <img class="up" src="./img/up.svg" alt="">
 
+  </div>
 
+
 
+  <div class="box"></div>
 
+  <div class="inco">
 
+    <div class="inco1 active" title="全景漫游"></div>
 
+    <div class="inco2" title="俯视图"></div>
 
+    <div class="inco3" title="迷你模型"></div>
 
+  </div>
 
+</body>
 
+<script>
 
+  // 给vue页面调用收起
 
+  var incoMove = function (val) {
 
+    let dom = document.querySelector('.inco')
 
+    if (val) dom.style.bottom = '24px'
 
+    else dom.style.bottom = '234px'
 
+  }
 
+
 
+  // 获取地址栏信息
 
+  let GetQueryString = (name) => {
 
+    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
 
+    let r = window.location.search.substr(1).match(reg);
 
+    if (r != null) return unescape(r[2]);
 
+    return "";
 
+  }
 
+  let num = GetQueryString('m')
 
+  var kankan = new KanKan({
 
+    dom: '.box',
 
+    num
 
+  })
 
+  kankan.use('MinMap', {
 
+    theme: {
 
+      camera_fillStyle: "#C48871"
 
+    }
 
+  })
 
+  kankan.render()
 
+  kankan.Scene.on('loaded', () => {
 
+    document.querySelector('.loading').style.display = 'none'
 
+    //设置地面logo
 
+    kankan.Scene.setFloorLogo({
 
+      url: 'img/diBiao.png'
 
+    })
 
+  })
 
+  let mapJT =document.querySelector('.mapShow')
 
+
 
+  let doms = document.querySelectorAll('.inco div')
 
+  doms.forEach((v, i) => {
 
+    v.onclick = function () {
 
+      let className = v.getAttribute('class')
 
+      if (className.includes('active')) return
 
+      if (i == 0) {
 
+        doms[0].classList.add('active')
 
+        doms[1].classList.remove('active')
 
+        doms[2].classList.remove('active')
 
+        doms[0].style.backgroundImage = "url(./img/inco1Ac.png)"
 
+        doms[1].style.backgroundImage = "url(./img/inco2.png)"
 
+        doms[2].style.backgroundImage = "url(./img/inco3.png)"
 
+        mapJT.style.display='flex'
 
+        kankan.Camera.panorama()
 
+      } else if (i == 1) {
 
+        doms[0].classList.remove('active')
 
+        doms[1].classList.add('active')
 
+        doms[2].classList.remove('active')
 
+        doms[0].style.backgroundImage = "url(./img/inco1.png)"
 
+        doms[1].style.backgroundImage = "url(./img/inco2Ac.png)"
 
+        doms[2].style.backgroundImage = "url(./img/inco3.png)"
 
+        mapJT.style.display='none'
 
+        kankan.Camera.floorplan()
 
+      } else {
 
+        doms[0].classList.remove('active')
 
+        doms[1].classList.remove('active')
 
+        doms[2].classList.add('active')
 
+        doms[0].style.backgroundImage = "url(./img/inco1.png)"
 
+        doms[1].style.backgroundImage = "url(./img/inco2.png)"
 
+        doms[2].style.backgroundImage = "url(./img/inco3Ac.png)"
 
+        mapJT.style.display='none'
 
+        kankan.Camera.dollhouse()
 
+      }
 
+    }
 
+  })
 
+  let down = document.querySelector('.down')
 
+  let up = document.querySelector('.up')
 
+  down.onclick = () => {
 
+    down.style.display = 'none'
 
+    up.style.display = 'block'
 
+    let mapDom = document.querySelector('.show')
 
+    mapDom.style.right = '-150px'
 
+    mapJT.style.right=0
 
+  }
 
+  up.onclick = () => {
 
+    down.style.display = 'block'
 
+    up.style.display = 'none'
 
+    let mapDom = document.querySelector('.show')
 
+    mapDom.style.right = '0px'
 
+    mapJT.style.right='150px'
 
+  }
 
+</script>
 
+
 
+</html>

BIN
mo/src/assets/img/Home.png
Просмотреть файл


BIN
mo/src/assets/img/loading.gif
Просмотреть файл


+ 5 - 1
mo/src/main.js
Просмотреть файл 

@@ -8,7 +8,11 @@ Vue.use(Icon);
 
 Vue.use(NoticeBar);
 
 import './assets/base.css'
 
 Vue.config.productionTip = false
 
-
 
+// 图片懒加载
 
+import VueLazyLoad from 'vue-lazyload'
 
+Vue.use(VueLazyLoad, {
 
+  loading: require('@/assets/img/loading.gif')
 
+})
 
 new Vue({
 
   router,
 
   render: h => h(App)

+ 58 - 12
mo/src/views/Home.vue
Просмотреть файл 

@@ -1,5 +1,10 @@
 
 <template>
 
-  <div class="Home" @click.once="oneMusicPlay">
 
+  <div class="Home" @click.once="oneMusicPlay" :class="{ noneBac: iframeSrc }">
 
+    <!-- 全景页面 -->
 
+    <div class="iframeBox" v-if="iframeSrc" :key="iframeSrc">
 
+      <iframe :src="iframeSrc" frameborder="0" v-if="box3Ac < 3"></iframe>
 
+      <iframe :src="iframeSrc" frameborder="0" v-else></iframe>
 
+    </div>
 
     <!-- 音乐 -->
 
     <audio id="myAduio" loop src="../assets/bg.mp3"></audio>
 
 
@@ -9,9 +14,7 @@
 
     </div>
 
     <!-- 左上角的inco -->
 
     <div class="topInco">
 
-      <div class="toHome">
 
-        <img src="../assets/img/Home.png" alt="" />
 
-      </div>
 
+      <div class="toHome" @click="backSta"></div>
 
       <div class="toMean" :class="{ open: toMeanShow, listIncoAc: box3Ac > 2 }">
 
         <div class="mena" @click="toMeanShow = !toMeanShow">
 
           <img
 
@@ -79,6 +82,7 @@
 
       @lishShow="listCut = true"
 
       @fenQuB_L="fenQuB_L"
 
       @VRActive="VRActive"
 
+      @incoMove="incoMove"
 
     />
 
     <!-- 地图列表 -->
 
     <List
 
@@ -111,6 +115,8 @@ export default {
 
   data() {
 
     //这里存放数据
 
     return {
 
+      iframeSrc: "",
 
+
 
       myUrl: "",
 
       // 控制背景模糊和左边菜单展开收起
 
       toMeanShow: false,
 
@@ -137,6 +143,27 @@ export default {
 
   },
 
   //方法集合
 
   methods: {
 
+    // 控制室内场景的inco位移incoMove
 
+    incoMove(val) {
 
+      let dom = document.querySelector(".iframeBox iframe")
 
+      if (dom&&this.box3Ac>2) {
 
+        dom.contentWindow.incoMove(val);
 
+        // let domSon =dom.contentWindow.document.querySelector('.inco');
 
+        // console.log(dom.contentWindow);
 
+        // console.log(dom.contentWindow.incoMove);
 
+        // console.log('------',domSon);
 
+        
+          // setTimeout(() => {
 
+          //   console.log('------',dom.contentWindow);
 
+          //   dom.contentWindow.incoMove(val);
 
+          // }, 200);
 
+      }
 
+    },
 
+    // 点击左上角的返回
 
+    backSta() {
 
+      //回到博博会之前的开发页面
 
+      window.location.href = "https://zzbbh.4dage.com/webM/index.html";
 
+    },
 
     VRActive(id) {
 
       if (this.$refs.List) this.$refs.List.VRActive(id);
 
     },
 
@@ -157,6 +184,10 @@ export default {
 
       this.box3Ac = box3Ac;
 
     },
 
     changeVR(code) {
 
+      if (this.box3Ac < 3) {
 
+        this.iframeSrc = `https://zzbbh.4dage.com/SWKK/show.html?id=WK1564638850838523904&vr=${code}`;
 
+      } else this.iframeSrc = `swkk.html?m=${code}`;
 
+
 
       console.log("vr改变了", code);
 
       this.listCut = false;
 
     },
 
@@ -213,12 +244,26 @@ export default {
 
 };
 
 </script>
 
 <style lang='less' scoped>
 
+.noneBac {
 
+  background: black !important;
 
+}
 
 .Home {
 
   width: 100%;
 
   height: 100%;
 
   background-image: url("../assets/img/homeBac.png");
 
   background-size: 100% 100%;
 
   position: relative;
 
+  .iframeBox {
 
+    position: absolute;
 
+    top: 0;
 
+    left: 0;
 
+    width: 100%;
 
+    height: 100%;
 
+    iframe {
 
+      width: 100%;
 
+      height: 100%;
 
+    }
 
+  }
 
   .listInco {
 
     position: absolute;
 
     z-index: 10;
 
@@ -227,7 +272,7 @@ export default {
 
     border-radius: 50%;
 
     background-color: rgba(0, 0, 0, 0.4);
 
     left: 18px;
 
-    top: 65px;
 
+    top: 80px;
 
     & > img {
 
       width: 100%;
 
       height: 100%;
 
@@ -428,18 +473,15 @@ export default {
 
       width: 40px;
 
       height: 40px;
 
       border-radius: 50%;
 
-      background-color: #d06814;
 
+      background-image: url("../assets/img/Home.png");
 
+      background-size: cover;
 
       display: flex;
 
       justify-content: center;
 
       align-items: center;
 
-      & > img {
 
-        width: 32px;
 
-        height: 32px;
 
-      }
 
     }
 
     .toMean {
 
       transition: height 0.3s;
 
-      margin-top: 15px;
 
+      margin-top: 20px;
 
       width: 40px;
 
       height: 40px;
 
       border-radius: 20px;
 
@@ -480,13 +522,17 @@ export default {
 
       }
 
       .mena {
 
         margin-top: 0;
 
+        img {
 
+          width: 28px;
 
+          height: 28px;
 
+        }
 
       }
 
     }
 
     .open {
 
       height: 188px;
 
     }
 
     .listIncoAc {
 
-      margin-top: 55px;
 
+      margin-top: 85px;
 
     }
 
   }
 
 }

+ 7 - 2
mo/src/views/bottom.vue
Просмотреть файл 

@@ -27,7 +27,8 @@
 
                     active: box1Ac === val.id,
 
                   }"
 
                 >
 
-                  <img src="../assets/img/demo.png" alt="" />
 
+                    <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/>
 
                   <van-notice-bar
 
                     speed="30"
 
                     v-if="box1Ac === val.id"
 
@@ -97,7 +98,11 @@ export default {
 
   //监听属性 类似于data概念
 
   computed: {},
 
   //监控data中的数据变化
 
-  watch: {},
 
+  watch: {
 
+    swiShow(val){
 
+      this.$emit('incoMove',val)
 
+    }
 
+  },
 
   //方法集合
 
   methods: {
 
     // 给父组件调用的收起底部的方法

+ 11 - 32
mo/src/views/zhan.js
Просмотреть файл 

@@ -3,8 +3,8 @@ export const exArr3 = [
 
     id: "1",
 
     name: "分区一",
 
     son: [
 
-      { id: "3-1_1", name: "河南博物院", code: "1" },
 
-      { id: "3-1_2", name: "新县鄂豫皖苏区烈士纪念馆", code: "1" },
 
+      { id: "3-1_1", name: "河南博物院", code: "KJ-JYo2ZZyKKJ" },
 
+      { id: "3-1_2", name: "新县鄂豫皖苏区烈士纪念馆", code: "JkX8PRjdK" },
 
       { id: "3-1_3", name: "宝丰中原解放纪念馆", code: "1" },
 
       { id: "3-1_4", name: "鄂豫皖革命纪念馆", code: "1" },
 
       { id: "3-1_5", name: "鄂豫皖苏区首府革命博物馆", code: "1" },
 
@@ -386,8 +386,8 @@ export const exArr3 = [
 
 export const exArr4 = [
 
   {
 
     id: '1', name: '分区一', son: [
 
-      { id: '4-1_1', name: '广东博容照明科技有限公司', code: '2' },
 
-      { id: '4-1_2', name: '郑州杰林计算机科技有限公司', code: '2' },
 
+      { id: '4-1_1', name: '广东博容照明科技有限公司', code: 'JkX8PRjdK' },
 
+      { id: '4-1_2', name: '郑州杰林计算机科技有限公司', code: 'KJ-JYo2ZZyKKJ' },
 
       { id: '4-1_3', name: '北京天马辉电子技术有限责任公司', code: '2' },
 
       { id: '4-1_4', name: '广州市满天星礼品有限公司', code: '2' },
 
       { id: '4-1_5', name: '深圳光子晶体科技有限公司', code: '2' },
 
@@ -414,7 +414,7 @@ export const exArr4 = [
 
 
   {
 
     id: '2', name: '分区二', son: [
 
-      { id: '4-2_1', name: '中国建筑技术集团有限公司', code: '2' },
 
+      { id: '4-2_1', name: '中国建筑技术集团有限公司', code: 'JkX8PRjdK' },
 
       { id: '4-2_2', name: '北京融通新风洁净技术有限公司', code: '2' },
 
       { id: '4-2_3', name: '湖南银宝科技发展有限公司', code: '2' },
 
       { id: '4-2_4', name: '湖南博颢伟业科技有限公司', code: '2' },
 
@@ -771,10 +771,11 @@ export const exArr4 = [
 
 export const exArr1 = [
 
   {
 
     id: '1', name: '分区一', son: [
 
-      { id: '1-1_1', name: '航拍1', code: 'KJ-JYo2ZZyKKJ' },
 
-      { id: '1-1_2', name: '航拍1', code: 'JkX8PRjdK&lang=zh' },
 
-      { id: '1-1_3', name: '航拍1', code: 'zhPdq268Z&lang=zh' },
 
-      { id: '1-1_4', name: '航拍1', code: 'zhPdq268Z&langss=zh' },
 
+      { id: '1-1_1', name: '会展中心-东', code: 'fd720_JMzTknCLP' },
 
+      { id: '1-1_2', name: '会展中心-南', code: 'fd720_yRDf7M2hT' },
 
+      { id: '1-1_3', name: '会展中心-西', code: 'fd720_8Tcr5WYvs' },
 
+      { id: '1-1_4', name: '会展中心-北', code: 'fd720_dHt5DtjVe' },
 
+      { id: '1-1_5', name: '会展中心-俯视图', code: 'fd720_NDlTPkSgR' },
 
     ]
 
   },
 
 ]
 
@@ -782,29 +783,7 @@ export const exArr1 = [
 
 export const exArr2 = [
 
   {
 
     id: '1', name: '分区一', son: [
 
-      { id: '2-1_1', name: '地面1', code: '4' },
 
-      { id: '2-1_2', name: '地面1', code: '4' },
 
-      { id: '2-1_3', name: '地面1', code: '4' },
 
-      { id: '2-1_4', name: '地面1', code: '4' },
 
-      { id: '2-1_5', name: '地面1', code: '4' },
 
-      { id: '2-1_6', name: '地面1', code: '4' },
 
-      { id: '2-1_7', name: '地面1', code: '4' },
 
-      { id: '2-1_8', name: '地面1', code: '4' },
 
-      { id: '2-1_9', name: '地面1', code: '4' },
 
-      { id: '2-1_10', name: '地面1', code: '4' },
 
-      { id: '2-1_11', name: '地面1', code: '4' },
 
-      { id: '2-1_12', name: '地面1', code: '4' },
 
-      { id: '2-1_13', name: '地面1', code: '4' },
 
-      { id: '2-1_14', name: '地面1', code: '4' },
 
-      { id: '2-1_15', name: '地面1', code: '4' },
 
-      { id: '2-1_16', name: '地面1', code: '4' },
 
-      { id: '2-1_17', name: '地面1', code: '4' },
 
-      { id: '2-1_18', name: '地面1', code: '4' },
 
-      { id: '2-1_19', name: '地面1', code: '4' },
 
-      { id: '2-1_20', name: '地面1', code: '4' },
 
-      { id: '2-1_21', name: '地面1', code: '4' },
 
-      { id: '2-1_22', name: '地面1', code: '4' },
 
-      { id: '2-1_23', name: '地面1', code: '4' },
 
+      { id: '2-1_1', name: '如意湖', code: 'fd720_NFHYfqOas' },
 
     ]
 
   },
 
 ]

+ 3 - 0
mo/vue.config.js
Просмотреть файл 

@@ -0,0 +1,3 @@
 
+module.exports = {
 
+  publicPath: './'
 
+}

+ 11 - 0
pc/package-lock.json
Просмотреть файл 

@@ -11,6 +11,7 @@
 
         "core-js": "^3.6.5",
 
         "element-ui": "^2.15.9",
 
         "vue": "^2.6.11",
 
+        "vue-lazyload": "^1.3.3",
 
         "vue-router": "^3.2.0"
 
       },
 
       "devDependencies": {
 
@@ -13219,6 +13220,11 @@
 
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
 
       "dev": true
 
     },
 
+    "node_modules/vue-lazyload": {
 
+      "version": "1.3.4",
 
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.4.tgz",
 
+      "integrity": "sha512-K0frbPQJuvFHVpdl/ov5CqCR/CHWeLGs8E8V1d/09DIETqBjeGhC1fLMmwUy3Go2Yd/VX610AZ7Mdn4B54592Q=="
 
+    },
 
     "node_modules/vue-loader": {
 
       "version": "15.10.0",
 
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.0.tgz",
 
@@ -25248,6 +25254,11 @@
 
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
 
       "dev": true
 
     },
 
+    "vue-lazyload": {
 
+      "version": "1.3.4",
 
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.4.tgz",
 
+      "integrity": "sha512-K0frbPQJuvFHVpdl/ov5CqCR/CHWeLGs8E8V1d/09DIETqBjeGhC1fLMmwUy3Go2Yd/VX610AZ7Mdn4B54592Q=="
 
+    },
 
     "vue-loader": {
 
       "version": "15.10.0",
 
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.0.tgz",

+ 2 - 1
pc/package.json
Просмотреть файл 

@@ -10,7 +10,8 @@
 
     "core-js": "^3.6.5",
 
     "element-ui": "^2.15.9",
 
     "vue": "^2.6.11",
 
-    "vue-router": "^3.2.0"
 
+    "vue-router": "^3.2.0",
 
+    "vue-lazyload": "^1.3.3"
 
   },
 
   "devDependencies": {
 
     "@vue/cli-plugin-babel": "~4.5.13",

BIN
pc/public/favicon.ico
Просмотреть файл


BIN
pc/public/img/diBiao.png
Просмотреть файл


BIN
pc/public/img/inco1.png
Просмотреть файл


BIN
pc/public/img/inco1Ac.png
Просмотреть файл


BIN
pc/public/img/inco2.png
Просмотреть файл


BIN
pc/public/img/inco2Ac.png
Просмотреть файл


BIN
pc/public/img/inco3.png
Просмотреть файл


BIN
pc/public/img/inco3Ac.png
Просмотреть файл


BIN
pc/public/img/loading.png
Просмотреть файл


+ 144 - 1
pc/public/swkk.html
Просмотреть файл 

@@ -31,11 +31,110 @@
 
       right: 10px;
 
       top: 75px
 
     }
 
+
 
+    .inco {
 
+      position: absolute;
 
+      bottom: 20px;
 
+      left: 50px;
 
+      width: 160px;
 
+      height: 36px;
 
+      background-color: rgba(0, 0, 0, .4);
 
+      border-radius: 18px;
 
+      z-index: 11;
 
+      display: flex;
 
+      justify-content: space-around;
 
+      padding: 0 10px 0 15px;
 
+    }
 
+
 
+    .inco>div {
 
+      cursor: pointer;
 
+      width: 33%;
 
+      height: 100%;
 
+      display: flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+      background-size: 36px 36px;
 
+      background-repeat: no-repeat;
 
+      background-position: center;
 
+    }
 
+
 
+    .inco1 {
 
+      background-image: url('./img/inco1Ac.png');
 
+      width: 22% !important;
 
+    }
 
+
 
+    .inco2 {
 
+      background-image: url('./img/inco2.png');
 
+    }
 
+
 
+    .inco3 {
 
+      background-image: url('./img/inco3.png');
 
+    }
 
+
 
+    .loading {
 
+      position: absolute;
 
+      top: 0;
 
+      left: 0;
 
+      z-index: 12;
 
+      width: 100%;
 
+      height: 100%;
 
+      background-color: black;
 
+      display: flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+    }
 
+
 
+    .loading .loadBox {
 
+      color: #fff;
 
+      text-align: center;
 
+      letter-spacing: 2px;
 
+      width: 110px;
 
+      height: 110px;
 
+      background: rgba(0, 0, 0, 0.5);
 
+      border-radius: 2px;
 
+    }
 
+
 
+    .loadIcon {
 
+      width: 60px;
 
+      height: 60px;
 
+      position: relative;
 
+      overflow: hidden;
 
+      margin: 10px auto;
 
+    }
 
+
 
+    .loadIcon img {
 
+      height: 60px;
 
+      position: absolute;
 
+      left: 0;
 
+      top: 0;
 
+      animation: loading 1s steps(15) infinite;
 
+    }
 
+
 
+    @keyframes loading {
 
+      100% {
 
+        left: -900px;
 
+      }
 
+    }
 
   </style>
 
 </head>
 
 
 <body>
 
+  <div class="loading">
 
+    <div class="loadBox">
 
+      <div class="loadIcon">
 
+        <img src="./img/loading.png" alt="">
 
+      </div>
 
+      <div class="txt">加载中</div>
 
+
 
+
 
+    </div>
 
+  </div>
 
   <div class="box"></div>
 
+  <div class="inco">
 
+    <div class="inco1 active" title="全景漫游"></div>
 
+    <div class="inco2" title="俯视图"></div>
 
+    <div class="inco3" title="迷你模型"></div>
 
+  </div>
 
 </body>
 
 <script>
 
   // 获取地址栏信息
 
@@ -50,8 +149,52 @@
 
     dom: '.box',
 
     num
 
   })
 
-  kankan.use('MinMap')
 
+  kankan.use('MinMap', {
 
+    theme: {
 
+      camera_fillStyle: "#C48871"
 
+    }
 
+  })
 
   kankan.render()
 
+  kankan.Scene.on('loaded', () => {
 
+    document.querySelector('.loading').style.display = 'none'
 
+    //设置地面logo
 
+    kankan.Scene.setFloorLogo({
 
+      url: 'img/diBiao.png'
 
+    })
 
+  })
 
+
 
+  let doms = document.querySelectorAll('.inco div')
 
+  doms.forEach((v, i) => {
 
+    v.onclick = function () {
 
+      let className = v.getAttribute('class')
 
+      if (className.includes('active')) return
 
+      if (i == 0) {
 
+        doms[0].classList.add('active')
 
+        doms[1].classList.remove('active')
 
+        doms[2].classList.remove('active')
 
+        doms[0].style.backgroundImage = "url(./img/inco1Ac.png)"
 
+        doms[1].style.backgroundImage = "url(./img/inco2.png)"
 
+        doms[2].style.backgroundImage = "url(./img/inco3.png)"
 
+        kankan.Camera.panorama()
 
+      } else if (i == 1) {
 
+        doms[0].classList.remove('active')
 
+        doms[1].classList.add('active')
 
+        doms[2].classList.remove('active')
 
+        doms[0].style.backgroundImage = "url(./img/inco1.png)"
 
+        doms[1].style.backgroundImage = "url(./img/inco2Ac.png)"
 
+        doms[2].style.backgroundImage = "url(./img/inco3.png)"
 
+        kankan.Camera.floorplan()
 
+      } else {
 
+        doms[0].classList.remove('active')
 
+        doms[1].classList.remove('active')
 
+        doms[2].classList.add('active')
 
+        doms[0].style.backgroundImage = "url(./img/inco1.png)"
 
+        doms[1].style.backgroundImage = "url(./img/inco2.png)"
 
+        doms[2].style.backgroundImage = "url(./img/inco3Ac.png)"
 
+        kankan.Camera.dollhouse()
 
+      }
 
+    }
 
+  })
 
 </script>
 
 
 </html>

BIN
pc/src/assets/img/IMGerror.png
Просмотреть файл


BIN
pc/src/assets/img/loading.gif
Просмотреть файл


+ 5 - 1
pc/src/main.js
Просмотреть файл 

@@ -6,7 +6,11 @@ import 'element-ui/lib/theme-chalk/index.css';
 
 Vue.use(ElementUI);
 
 import './assets/base.css'
 
 Vue.config.productionTip = false
 
-
 
+// 图片懒加载
 
+import VueLazyLoad from 'vue-lazyload'
 
+Vue.use(VueLazyLoad, {
 
+  loading: require('@/assets/img/loading.gif')
 
+})
 
 new Vue({
 
   router,
 
   render: h => h(App)

+ 2 - 1
pc/src/views/Bottom2.vue
Просмотреть файл 

@@ -25,7 +25,8 @@
 
               >
 
                 <el-tooltip :content="val.name" placement="top">
 
                   <div>
 
-                    <img src="../assets/img/demo.png" alt="" />
 
+                    <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/>
 
                     <p>{{ val.name }}</p>
 
                   </div>
 
                 </el-tooltip>

+ 14 - 5
pc/src/views/Home.vue
Просмотреть файл 

@@ -1,8 +1,13 @@
 
 <template>
 
-  <div class="Home" @click.once="topBox2Show = true">
 
+  <div
 
+    class="Home"
 
+    @click.once="topBox2Show = true"
 
+    :class="{ noneBac: iframeSrc }"
 
+  >
 
     <!-- 全景页面 -->
 
     <div class="iframeBox" v-if="iframeSrc" :key="iframeSrc">
 
-      <iframe :src="iframeSrc" frameborder="0"></iframe>
 
+      <iframe :src="iframeSrc" frameborder="0" v-if="oneSid < 3"></iframe>
 
+      <iframe :src="iframeSrc" frameborder="0" v-else></iframe>
 
     </div>
 
 
     <!-- 在第一展厅和第二展厅出来的背景模板 -->
 
@@ -154,10 +159,11 @@ export default {
 
     },
 
     zhanChange(code) {
 
       this.zhanShow = false;
 
-
 
       // this.bttomIsShow = false;
 
+      if (this.oneSid < 3) {
 
+        this.iframeSrc = `https://zzbbh.4dage.com/SWKK/show.html?id=WK1564638850838523904&vr=${code}`;
 
+      } else this.iframeSrc = `swkk.html?m=${code}`;
 
 
-      this.iframeSrc = `swkk.html?m=${code}`;
 
 
       console.log("VR改变了", code);
 
     },
 
@@ -203,6 +209,9 @@ export default {
 
 };
 
 </script>
 
 <style lang='less' scoped>
 
+.noneBac {
 
+  background: black !important;
 
+}
 
 .Home {
 
   width: 100%;
 
   height: 100%;
 
@@ -215,7 +224,7 @@ export default {
 
     left: 0;
 
     width: 100%;
 
     height: 100%;
 
-    iframe{
 
+    iframe {
 
       width: 100%;
 
       height: 100%;
 
     }

+ 11 - 32
pc/src/views/zhan.js
Просмотреть файл 

@@ -3,8 +3,8 @@ export const exArr3 = [
 
     id: "1",
 
     name: "分区一",
 
     son: [
 
-      { id: "3-1_1", name: "河南博物院", code: "1" },
 
-      { id: "3-1_2", name: "新县鄂豫皖苏区烈士纪念馆", code: "1" },
 
+      { id: "3-1_1", name: "河南博物院", code: "KJ-JYo2ZZyKKJ" },
 
+      { id: "3-1_2", name: "新县鄂豫皖苏区烈士纪念馆", code: "JkX8PRjdK" },
 
       { id: "3-1_3", name: "宝丰中原解放纪念馆", code: "1" },
 
       { id: "3-1_4", name: "鄂豫皖革命纪念馆", code: "1" },
 
       { id: "3-1_5", name: "鄂豫皖苏区首府革命博物馆", code: "1" },
 
@@ -386,8 +386,8 @@ export const exArr3 = [
 
 export const exArr4 = [
 
   {
 
     id: '1', name: '分区一', son: [
 
-      { id: '4-1_1', name: '广东博容照明科技有限公司', code: '2' },
 
-      { id: '4-1_2', name: '郑州杰林计算机科技有限公司', code: '2' },
 
+      { id: '4-1_1', name: '广东博容照明科技有限公司', code: 'JkX8PRjdK' },
 
+      { id: '4-1_2', name: '郑州杰林计算机科技有限公司', code: 'KJ-JYo2ZZyKKJ' },
 
       { id: '4-1_3', name: '北京天马辉电子技术有限责任公司', code: '2' },
 
       { id: '4-1_4', name: '广州市满天星礼品有限公司', code: '2' },
 
       { id: '4-1_5', name: '深圳光子晶体科技有限公司', code: '2' },
 
@@ -414,7 +414,7 @@ export const exArr4 = [
 
 
   {
 
     id: '2', name: '分区二', son: [
 
-      { id: '4-2_1', name: '中国建筑技术集团有限公司', code: '2' },
 
+      { id: '4-2_1', name: '中国建筑技术集团有限公司', code: 'JkX8PRjdK' },
 
       { id: '4-2_2', name: '北京融通新风洁净技术有限公司', code: '2' },
 
       { id: '4-2_3', name: '湖南银宝科技发展有限公司', code: '2' },
 
       { id: '4-2_4', name: '湖南博颢伟业科技有限公司', code: '2' },
 
@@ -771,10 +771,11 @@ export const exArr4 = [
 
 export const exArr1 = [
 
   {
 
     id: '1', name: '分区一', son: [
 
-      { id: '1-1_1', name: '航拍1', code: 'KJ-JYo2ZZyKKJ' },
 
-      { id: '1-1_2', name: '航拍1', code: 'JkX8PRjdK&lang=zh' },
 
-      { id: '1-1_3', name: '航拍1', code: 'zhPdq268Z&lang=zh' },
 
-      { id: '1-1_4', name: '航拍1', code: 'zhPdq268Z&lang=zh' },
 
+      { id: '1-1_1', name: '会展中心-东', code: 'fd720_JMzTknCLP' },
 
+      { id: '1-1_2', name: '会展中心-南', code: 'fd720_yRDf7M2hT' },
 
+      { id: '1-1_3', name: '会展中心-西', code: 'fd720_8Tcr5WYvs' },
 
+      { id: '1-1_4', name: '会展中心-北', code: 'fd720_dHt5DtjVe' },
 
+      { id: '1-1_5', name: '会展中心-俯视图', code: 'fd720_NDlTPkSgR' },
 
     ]
 
   },
 
 ]
 
@@ -782,29 +783,7 @@ export const exArr1 = [
 
 export const exArr2 = [
 
   {
 
     id: '1', name: '分区一', son: [
 
-      { id: '2-1_1', name: '地面1', code: '4' },
 
-      { id: '2-1_2', name: '地面1', code: '4' },
 
-      { id: '2-1_3', name: '地面1', code: '4' },
 
-      { id: '2-1_4', name: '地面1', code: '4' },
 
-      { id: '2-1_5', name: '地面1', code: '4' },
 
-      { id: '2-1_6', name: '地面1', code: '4' },
 
-      { id: '2-1_7', name: '地面1', code: '4' },
 
-      { id: '2-1_8', name: '地面1', code: '4' },
 
-      { id: '2-1_9', name: '地面1', code: '4' },
 
-      { id: '2-1_10', name: '地面1', code: '4' },
 
-      { id: '2-1_11', name: '地面1', code: '4' },
 
-      { id: '2-1_12', name: '地面1', code: '4' },
 
-      { id: '2-1_13', name: '地面1', code: '4' },
 
-      { id: '2-1_14', name: '地面1', code: '4' },
 
-      { id: '2-1_15', name: '地面1', code: '4' },
 
-      { id: '2-1_16', name: '地面1', code: '4' },
 
-      { id: '2-1_17', name: '地面1', code: '4' },
 
-      { id: '2-1_18', name: '地面1', code: '4' },
 
-      { id: '2-1_19', name: '地面1', code: '4' },
 
-      { id: '2-1_20', name: '地面1', code: '4' },
 
-      { id: '2-1_21', name: '地面1', code: '4' },
 
-      { id: '2-1_22', name: '地面1', code: '4' },
 
-      { id: '2-1_23', name: '地面1', code: '4' },
 
+      { id: '2-1_1', name: '如意湖', code: 'fd720_NFHYfqOas' },
 
     ]
 
   },
 
 ]