upp

scene/package.json

@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
+    "html2canvas": "^1.4.1",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.6",
-    "html2canvas": "^1.3.3",
     "install": "^0.13.0",
     "npm": "^8.10.0",
     "swiper": "^5.3.8",
@@ -34,4 +34,4 @@
     "less-loader": "^5.0.0",
     "vue-template-compiler": "^2.6.11"
   }
-}
+}

scene/public/static/css/oldVer/main0.css

@@ -52,7 +52,7 @@ iframe{
 	opacity:0.1; 
 }
 #closepop {
-	background: url(https://super.4dage.com/images/close1.png) no-repeat;
+	background: url('../../images/icon-close.png') no-repeat;
 	width: 60px;
 	height: 60px;
 	cursor: pointer;

scene/src/assets/style/myBase.css

@@ -17,23 +17,33 @@
   color: #fff;
 }
 #thumb-container .active .overlay {
-  color: #FFF6D2;
+  color: #D6B970;
 }
 #thumb-container .active > img {
-  border: 3px solid #FFF6D2;
+  border: 3px solid #D6B970;
 }
 #drawer {
-  background-color: rgba(163, 51, 40, 0.9);
+  background-color: rgba(185, 12, 12, 0.8);
 }
 #drawer .darkGlass {
   background-color: transparent;
 }
+#progressBar .step.active::before,
+#progressBar .step.recent::before {
+  background-color: #D6B970;
+}
+#popup {
+  background: none;
+}
+#popup .popup-content {
+  overflow: hidden;
+}
 #cad path {
   stroke-width: 0.5;
-  fill: rgba(163, 51, 40, 0.9);
+  fill: rgba(185, 12, 12, 0.8);
   stroke: #d1b198;
 }
 #ele1 circle {
-  fill: rgba(163, 51, 40, 0.9);
+  fill: rgba(185, 12, 12, 0.8);
   r: 1;
 }

scene/src/assets/style/myBase.less

@@ -26,34 +26,46 @@
 
   .active {
     .overlay {
-      color: #FFF6D2;
+      color: #D6B970;
     }
 
     &>img {
-      border: 3px solid #FFF6D2;
+      border: 3px solid #D6B970;
     }
   }
 }
 
 #drawer {
-  background-color: rgba(163, 51, 40, .9);
+  background-color: rgba(185, 12, 12, 0.80);
 
   .darkGlass {
     background-color: transparent;
   }
 }
 
+#progressBar .step.active::before,
+#progressBar .step.recent::before {
+  background-color: #D6B970;
+}
+
+#popup {
+  background: none;
+
+  .popup-content {
+    overflow: hidden;
+  }
+}
 
 #cad path {
   stroke-width: 0.5;
-  fill: rgba(163, 51, 40, .9);
+  fill: rgba(185, 12, 12, 0.80);
   // 改变地图线的颜色
   stroke: #d1b198
 }
 
 #ele1 {
   circle {
-    fill: rgba(163, 51, 40, .9);
+    fill: rgba(185, 12, 12, 0.80);
     r: 1;
   }
 }

scene/src/components/welcome/index.vue

@@ -1,12 +1,10 @@
 <template>
-  <div class="welcome" v-if="0">
-    <div
-      class="btn"
-      @click.stop="$emit('close')"
-      :style="{
-        backgroundImage: `url(${require('@/assets/images/project/btn.png')})`,
-      }"
-    ></div>
+  <div class="welcome">
+    <iframe
+      src="https://zzbbh.4dage.com/SWKK/show.html?id=WK1564638850838523904&vr=fd720_JMzTknCLP"
+      frameborder="0"
+    ></iframe>
+    <div class="btn" @click.stop="$emit('close')">探索场景</div>
   </div>
 </template>
 
@@ -27,24 +25,33 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 9999;
+  z-index: 11001;
   font-size: 0;
-  transition: all ease 0.3s;
-  background-color: #146fb1;
+  background-color: black;
+  // background-image: url('../../assets/img/home/homeBac.jpg');
+  // background-size: 100% 100%;
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
 
   .btn {
+    width: 246px;
+    height: 77px;
+    background-image: url("../../assets/img/home/homeBtn.png");
+    background-size: 100% 100%;
+    color: #d6b970;
+    font-size: 24px;
+    font-weight: 700;
     position: absolute;
+    z-index: 10;
     bottom: 15%;
     left: 50%;
     transform: translateX(-50%);
-    z-index: 9999;
-    font-size: 0;
-    display: inline-block;
     cursor: pointer;
-    width: 316px;
-    height: 104px;
-    background-size: cover;
-    background-color: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 }
 </style>

scene/src/pages/Home.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- @click="musicPlay" @touchstart="musicPlay" -->
   <div class="parent-body">
     <!-- 热点 -->
     <!-- <hot/> -->
@@ -29,7 +28,7 @@
         <v-title />
 
         <!-- 底部菜单 -->
-        <v-menu />
+        <v-menu @toHome="showWelcome = true" />
 
         <!-- 导览 -->
         <v-guide />
@@ -76,6 +75,11 @@
         <span>加载中...</span>
       </div>
     </div>
+
+    <!-- 左上方logo -->
+    <div class="leftTopLogo">
+      <img src="../assets/img/home/logo.png" alt="" />
+    </div>
   </div>
 </template>
 
@@ -93,6 +97,8 @@ import vrCon from "@/views/gui/vrcon";
 import vOther from "@/views/gui/other";
 import welcome from "@/components/welcome";
 
+import { addVisitAPI } from "../utils/api";
+
 export default {
   name: "Home",
   components: {
@@ -115,21 +121,13 @@ export default {
       showWelcome: true,
       hotspots: "",
       loading: true,
-      // 控制背景音乐
-      musicFlag: true,
     };
   },
 
   methods: {
-    musicPlay() {
-      if (this.musicFlag) window.manage.switchBgmState(true);
-      this.musicFlag = false;
-    },
-    // 控制背景音乐播放👆
-
     hideWelcome() {
       this.showWelcome = false;
-      window.manage.switchBgmState(true);
+      // window.manage.switchBgmState(true);
     },
     getHotSpotList() {
       $.ajax({
@@ -170,20 +168,12 @@ export default {
       });
     });
   },
-  created() {
-    // 移动端和pc端的切换
-    if (
-      window.navigator.userAgent.match(
-        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
-      )
-    ) {
-      // 移动端
-      if (window.location.href.includes("web")) {
-        window.location.href = window.location.href.replace("web", "webM");
-        setTimeout(() => {
-          location.reload(true);
-        }, 1000);
-      }
+  async created() {
+    // 发送访问量
+    try {
+      await addVisitAPI();
+    } catch (e) {
+      console.log(e);
     }
   },
 };
@@ -213,4 +203,11 @@ export default {
     display: inline-block;
   }
 }
+.leftTopLogo {
+  pointer-events: none;
+  position: fixed;
+  z-index: 11000;
+  top: 30px;
+  left: 30px;
+}
 </style>

scene/src/utils/api.js

@@ -1,9 +1,16 @@
 import axios from './request'
-// 获取文物列表
-export const goodList = (data) => {
+// 访问量+1
+export const addVisitAPI = () => {
   return axios({
-    method: 'post',
-    url: '/show/goods/list',
-    data
+    method: 'get',
+    url: `show/addVisit/${1}`,
   })
 }
+
+// 获取访问量
+export const getVisitAPI = () => {
+  return axios({
+    method: 'get',
+    url: 'show/share/detail',
+  })
+}

scene/src/utils/request.js

@@ -1,8 +1,9 @@
 import axios from 'axios'
+
+export const baseURL = process.env.NODE_ENV === "development" ? "http://192.168.20.55:8049" : "";
+
 const service = axios.create({
-  // baseURL: 'http://192.168.0.135:8017', // 本地调试
-  // baseURL: 'http://project.4dage.com:8017', // 线上调试
-  baseURL: '', // build
+  baseURL: baseURL + "/api/",
   timeout: 5000
 })
 // 请求拦截器
@@ -35,4 +36,4 @@ service.interceptors.response.use(function (response) {
   return Promise.reject(error)
 })
 
-export default service
+export default service

scene/src/views/gui/components/hotList.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="hotList">
+    <div class="title">
+      <div class="titleLL">热点列表</div>
+      <div class="titleRR" @click="$emit('close')">
+        <img src="../../../assets/img/close.png" alt="" />
+      </div>
+    </div>
+    <div class="main">
+      <div class="txtNone" v-if="data.length === 0">暂无热点</div>
+      <div class="txt" v-else>
+        <span
+          :class="{ active: hotInd === index }"
+          @click="openHot(item, index)"
+          v-for="(item, index) in data"
+          :key="index"
+          >{{ item.info.title ? item.info.title : "热点" }}</span
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {
+      data: [],
+      hotInd: null,
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    openHot(e, index) {
+      // 停止自动导览
+      window.player.director.stopTour();
+      setTimeout(() => {
+        e && e.examine(window.player, true);
+        this.hotInd = index;
+      }, 200);
+    },
+  },
+  created() {
+    this.data = window.myHotList || [];
+  },
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.hotList {
+  position: absolute;
+  width: 940px;
+  height: 640px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-image: url("../../../assets/img/open/bg-list.png");
+  background-size: 100% 100%;
+  padding: 60px 80px;
+  .title {
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .titleLL {
+      font-size: 24px;
+      color: #d6b970;
+    }
+    .titleRR {
+      cursor: pointer;
+    }
+  }
+  .main {
+    margin-top: 20px;
+    width: calc(100% - 14px);
+    height: calc(100% - 100px);
+    overflow-y: auto;
+    .txtNone {
+      height: 100%;
+      color: #d6b970;
+      font-size: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .txt {
+      width: calc(100% - 10px);
+      color: #fff;
+      font-size: 16px;
+      & > span {
+        border-top: 1px solid #f0e2c0;
+        padding: 15px 0;
+        cursor: pointer;
+        display: block;
+        width: 100%;
+        &:last-child {
+          margin-bottom: 60px;
+          border-bottom: 1px solid #f0e2c0;
+        }
+      }
+      :hover {
+        color: #d6b970;
+      }
+    }
+    .active {
+      color: #d6b970;
+    }
+    &::-webkit-scrollbar-thumb {
+      outline: 2px solid #d6b970;
+    }
+    &::-webkit-scrollbar {
+      width: 2px;
+    }
+  }
+}
+</style>

scene/src/views/gui/components/share.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="share">
+    <div class="imgBox" v-if="isOk">
+      <img :src="isOk" alt="" />
+      <p>可点击鼠标右键保存图片</p>
+    </div>
+    <div class="main" id="canvsBox" v-else>
+      <!-- 数字 -->
+      <div class="txt">
+        第&nbsp;&nbsp;<span>{{ num }}</span
+        >&nbsp;&nbsp;位参与者
+      </div>
+      <!-- 二维码 -->
+      <div class="code">
+        <img src="code.png" alt="" />
+      </div>
+    </div>
+    <!-- 加载中 -->
+    <div
+      class="logingBox"
+      v-loading="!isOk"
+      element-loading-text="生成海报中"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    ></div>
+    <div class="close" @click="$emit('close')">
+      <img src="../../../assets/img/close.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+import html2canvas from "html2canvas";
+import { getVisitAPI } from "../../../utils/api";
+export default {
+  components: {},
+  props: ["openInd"],
+  data() {
+    return {
+      num: 0,
+      // 生成截图成功
+      isOk: "",
+    };
+  },
+  computed: {},
+  watch: {
+    openInd(val) {
+      if (val) {
+        if (!this.isOk) this.toImgFu();
+      }
+    },
+  },
+  methods: {
+    // 生成截图
+    toImgFu() {
+      window.setTimeout(() => {
+        const dom = document.querySelector("#canvsBox");
+        html2canvas(dom, {
+          // backgroundColor: "transparent",
+          allowTaint: true,
+          useCORS: true,
+        }).then((canvas) => {
+          const link = canvas.toDataURL("image/jpeg");
+          this.isOk = link;
+        });
+      }, 100);
+    },
+  },
+  async created() {
+    try {
+      const res = await getVisitAPI();
+      this.num = res.data.pcsShow;
+    } catch (e) {
+      console.log(e);
+    }
+  },
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.share {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 542px;
+  height: 820px;
+  .imgBox {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    & > p {
+      position: absolute;
+      bottom: 10px;
+      right: 34px;
+      bottom: 20px;
+      width: 80px;
+      font-size: 12px;
+      text-align: center;
+    }
+  }
+  .logingBox {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99;
+  }
+  .main {
+    width: 100%;
+    height: 100%;
+    background-image: url("../../../assets/img/open/bg-share.jpg");
+    background-size: 100% 100%;
+    position: relative;
+    .txt {
+      position: absolute;
+      bottom: 70px;
+      left: 34px;
+      color: #d6b970;
+      & > span {
+        font-size: 36px;
+        font-weight: 700;
+      }
+    }
+    .code {
+      position: absolute;
+      bottom: 60px;
+      right: 34px;
+      width: 80px;
+      & > img {
+        border-radius: 6px;
+        width: 80px;
+      }
+    }
+  }
+  .close {
+    position: absolute;
+    right: -40px;
+    top: 10px;
+    cursor: pointer;
+  }
+}
+</style>

scene/src/views/gui/guide.vue

@@ -26,14 +26,14 @@ export default {
 </script>
 <style lang="less" scoped>
 #status {
-  background-color: rgba(163,51,40,.9);
-  color: #fff6d2;
+  background-color: rgba(185, 12, 12, 0.80);
+  color: #fff;
 }
 #progressBar {
   height: 100%;
   display: flex;
   align-items: center;
-  background-color: rgba(163,51,40,.9);
+  background-color: rgba(185, 12, 12, 0.80);
 }
 #playHead {
   background-color: transparent;

scene/src/views/gui/loading.vue

@@ -1,29 +1,29 @@
 <template>
-  <div id="gui-loading" class="message-outer darkGlass">
-            <h2 class="model-title"></h2>
-            <div class="message-inner">
-                <div class="loadingLogo"> 
-                    <div class="img"> 
-                    </div> 
-                </div> 
-                <div class="progressbar" data-perc="100">
-                    <div class="label">
-                        <div class="perc">0%</div>
-                    </div>
-                    <div class="bar"><span></span></div>
-                </div>
-                <div id="loaderCoBrand">
-                    <div class="vert-align">
-                        <h2 id="loaderCoBrandName">四维时代提供技术支持</h2>
-                    </div>
-                </div>
-                <div class="bottom-logo">
-                    <div class="img"></div>
-                </div>
-                <div class="specialPower">
-                    <span class="powered-by">{[{ POWERED_BY }]}</span>
-                    &#xA0;<div class="img"></div>
-                </div>
-            </div>
+  <div id="gui-loading" class="message-outer darkGlass" v-show="0">
+    <h2 class="model-title"></h2>
+    <div class="message-inner">
+      <div class="loadingLogo">
+        <div class="img"></div>
+      </div>
+      <div class="progressbar" data-perc="100">
+        <div class="label">
+          <div class="perc">0%</div>
         </div>
+        <div class="bar"><span></span></div>
+      </div>
+      <div id="loaderCoBrand">
+        <div class="vert-align">
+          <h2 id="loaderCoBrandName" v-show="0">四维时代提供技术支持</h2>
+        </div>
+      </div>
+      <div class="bottom-logo">
+        <div class="img"></div>
+      </div>
+      <div class="specialPower">
+        <span class="powered-by">{[{ POWERED_BY }]}</span>
+        &#xA0;
+        <div class="img"></div>
+      </div>
+    </div>
+  </div>
 </template>

scene/src/views/gui/menu.vue

@@ -140,6 +140,14 @@
                 :src="require('@/assets/images/icon/floor_active.png')"
               />
             </div>
+
+            <!-- 热点列表 -->
+            <div id="hotList" @click="openInd = 1">
+              <!-- 鼠标移入的显示 -->
+              <div class="hoverTit">热点列表</div>
+              <img src="../../assets/img/hot.png" alt="" />
+            </div>
+
             <div
               data-original-title="VR"
               id="vr"
@@ -153,21 +161,6 @@
               />
             </div>
             <div
-              data-original-title="热点列表"
-              id="hotList"
-              rel="tooltip"
-              title=""
-            >
-              <img
-                class="icon icon-inside"
-                :src="require('@/assets/images/hotlist.png')"
-              />
-              <img
-                class="icon icon-inside active"
-                :src="require('@/assets/images/hotlist.png')"
-              />
-            </div>
-            <div
               data-original-title="消除外壳"
               id="gui-remove-face"
               rel="tooltip"
@@ -223,6 +216,13 @@
           <img src="../../assets/img/toHome.png" alt="" />
         </div>
 
+        <!-- vr -->
+        <div class="toHomeBox" @click="openVR">
+          <!-- 鼠标移入的显示 -->
+          <div class="hoverTit">VR</div>
+          <img src="../../assets/img/openVR.png" alt="" />
+        </div>
+
         <!-- 音乐 -->
         <div id="volume" class="ui-icon bgandshare wide">
           <!-- 鼠标移入的显示 -->
@@ -244,62 +244,39 @@
             />
           </div>
         </div>
-        <!-- 全屏 -->
-        <div
-          id="gui-fullscreen"
-          class="ui-icon wide"
-          data-placement="top"
-          rel="tooltip"
-        >
+        <!-- 分享 -->
+        <div class="toHomeBox" @click="openInd = 2">
           <!-- 鼠标移入的显示 -->
-          <div class="hoverTit">全屏浏览</div>
-          <a>
-            <img :src="require('@/assets/img/full.png')" />
-          </a>
-        </div>
-        <div
-          id="gui-fullscreen-exit"
-          class="ui-icon wide"
-          data-placement="top"
-          rel="tooltip"
-          style="display: none"
-        >
-          <div class="hoverTit">退出全屏</div>
-          <a>
-            <img
-              :src="require('@/assets/img/fullAc.png')"
-              style="width: 50px"
-            />
-          </a>
+          <div class="hoverTit">分享</div>
+          <img src="../../assets/img/share.png" alt="" />
         </div>
       </div>
     </div>
+
+    <div class="openBox" :class="{ openBoxAc: openInd }">
+      <HotList v-if="openInd === 1" @close="openInd = 0" />
+      <Share v-show="openInd === 2" @close="openInd = 0" :openInd='openInd'/>
+    </div>
   </div>
 </template>
 
 <script>
+import HotList from "./components/hotList.vue";
+import Share from "./components/share.vue";
+
 export default {
-  components: {},
+  components: { HotList, Share },
   data() {
     return {
       isGuide: true,
       musicState: false,
+      // vr---热点列表---分享
+      openInd: 0,
     };
   },
   watch: {},
   computed: {},
-  mounted() {
-    let url = window.location.href;
-    const obj = {
-      "KJ-ztJ9nPQyf64": "精品文物展厅",
-      "KJ-wlpyvYdFNXN": "书画厅",
-      "KJ-Rytmid9ku2a": "中国仡佬族民族文化展厅",
-    };
-
-    for (const k in obj) {
-      if (url.includes(k)) this.leftTitleTxt = obj[k];
-    }
-  },
+  mounted() {},
   methods: {
     switchBGM(flag) {
       this.musicState = flag;
@@ -313,21 +290,20 @@ export default {
         document.querySelector("#closeMusic").style.display = "none";
       }
     },
+    // 点击vr
+    openVR() {
+      window.open("https://www.720yun.com/t/acvkiwdegqb?scene_id=34882556");
+    },
     // 点击回到首页
     toHomeFu() {
-      window.location.href = "/pc/index.html#/";
-      setTimeout(() => {
-        location.reload(true);
-      }, 200);
+      this.switchBGM(false);
+      this.$emit("toHome");
     },
   },
 };
 </script>
 
 <style lang="less" scoped>
-#hotList {
-  display: none !important;
-}
 ::-webkit-scrollbar {
   width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
 }
@@ -534,4 +510,33 @@ export default {
     }
   }
 }
+
+.pinBottom-container {
+  #hotList {
+    position: relative;
+    float: left;
+    width: 70px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+  .openBox {
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.3s;
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    // background-color: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(10px);
+  }
+  .openBoxAc {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
 </style>