更新3D风格版本

scene/public/static/js/Hot.js

@@ -1215,8 +1215,15 @@ window.initHot = function(model){
 
                 
                 if(this.info.linkType=="jumpLink"){
-                    var newPage = window.open(src, "_blank" ); 
-                    newPage.focus();  
+                    // var newPage = window.open(src, "_blank" ); 
+                    // newPage.focus();  
+
+                    // 不在另外窗口打开
+                    // window.location.href = window.location.href.substring(0,window.location.href.indexOf('m='))+src.substring(src.indexOf('?m='),src.length-1);
+                    let m = src.substring(src.indexOf("?")+3, src.indexOf("&"))
+                    if(window.parent){
+                        window.parent.window.transformScene(m)
+                    }
                     
                 }else if(this.info.linkType=="iframeDiv"){
                     
@@ -1772,6 +1779,7 @@ window.initHot = function(model){
         hots = hots.sort((a,b)=>{return a.order - b.order});
 
         window.myHotList = hots
+        window.isHot =true
 
         hots.forEach((hot)=>{
             var li = document.createElement('li');

scene/src/components/info/index.vue

@@ -1,20 +1,39 @@
 <template>
   <div class="info-box" v-if="title != '' && disc != ''">
-    <div class="title-box" @click="() => {
+    <div class="top">
+      <div class="title-box" @click="() => {
     isShow = !isShow;
+    isOpenHot = false;
   }
     ">
-      <div class="detail">
-        <div class="scroll-wrap">
-          <div class="scroll-item">
-            {{ title }}
+        <div class="detail">
+          <div class="scroll-wrap">
+            <div class="scroll-item">
+              {{ title }}
+            </div>
           </div>
         </div>
+        <div class="line"></div>
+        <img src="../../assets/img/infoIcon.png" alt="" />
       </div>
-      <div class="line"></div>
-      <img src="../../assets/img/infoIcon.png" alt="" />
+      <img v-show="isShowHotIcon" @click="() => { isOpenHot = !isOpenHot; isShow = false }"
+        src="@/assets/images/icon/hot-icon.png" alt="">
     </div>
     <div class="disc-box" v-show="isShow" v-html="disc"></div>
+    <div class="disc-box2" v-show="isOpenHot">
+      <img class="close-icon" @click="() => { isOpenHot = false }" src="@/assets/images/icon/icon-close.png" alt="">
+      <div class="back-box" @click="back()"><img src="@/assets/images/icon/back.png" alt="">返回上一级场景</div>
+      <div class="hot-list">
+        <div class="list-title">关联场景</div>
+        <div class="list-content">
+          <div class="list-item" @mouseover="() => { hotInd = index }" @click="openHot(item, index)"
+            @mouseout="() => { hotInd = null }" :class="{ 'active': hotInd === index }" v-for="(item, index) in data"
+            :key="index">
+            {{ item.info.title ? item.info.title : '热点' }}
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -26,14 +45,33 @@ export default {
       title: "",
       disc: "",
       isShow: false,
+      isShowHotIcon: false,
+      isOpenHot: false,
+      data: [],
+      hotInd: null
     };
   },
   computed: {},
   watch: {},
-  methods: {},
+  methods: {
+    openHot(e, index) {
+      // 停止自动导览
+      window.player.director.stopTour();
+      setTimeout(() => {
+        e && e.examine(window.player, true);
+        this.hotInd = index;
+      }, 200);
+    },
+    back() {
+      if (window.parent) {
+        window.parent.window.backFu()
+      }
+    }
+  },
   created() { },
   mounted() {
     let timeA = -1;
+
     timeA = window.setInterval(() => {
       if (window.DATA) {
         clearInterval(timeA);
@@ -42,6 +80,21 @@ export default {
       this.disc = window.DATA.summary;
       document.title = window.DATA.name;
     }, 100);
+
+    let timeB = -1;
+    timeB = window.setInterval(() => {
+      if (window.isHot) {
+        clearInterval(timeB);
+      }
+      if (window.isHot && window.myHotList && window.myHotList.length) {
+        if (window.myHotList.length > 0) {
+          this.isShowHotIcon = true;
+          this.data = window.myHotList.filter((item) => {
+            return item.info.linkType != "common"
+          });
+        }
+      }
+    }, 1000)
   },
   beforeCreate() { }, //生命周期 - 创建之前
   beforeMount() { }, //生命周期 - 挂载之前
@@ -63,6 +116,16 @@ export default {
   /* transform: translateX(-50%); */
   color: #fff;
 
+  .top {
+    height: 100%;
+    display: flex;
+
+    img {
+      margin-left: 20px;
+      cursor: pointer;
+    }
+  }
+
   .title-box {
     width: 100%;
     height: 100%;
@@ -71,7 +134,7 @@ export default {
     align-items: center;
     background: url("../../assets/img/infoBg.png");
     background-size: 100% 100%;
-    font-size: 1em;
+    font-size: 1.2em;
     font-family: "AdobeHeitiStd";
     cursor: pointer;
     padding: 0 20px;
@@ -98,7 +161,73 @@ export default {
     padding: 30px;
     text-indent: 2em;
     line-height: 25px;
+    font-size: 1.2em;
     letter-spacing: 2px;
+    margin-top: 10px;
+    border-radius: 10px 10px;
+    position: relative;
+  }
+
+  .disc-box2 {
+    max-width: 300px;
+    background: #5e1b13a4;
+    backdrop-filter: blur(10px);
+    padding: 10px 10px;
+    line-height: 25px;
+    margin-top: 10px;
+    border-radius: 10px 10px;
+    font-size: 1.2em;
+    position: relative;
+
+    .close-icon {
+      position: absolute;
+      top: 15px;
+      right: 10px;
+      cursor: pointer;
+    }
+
+    .back-box {
+      font-size: 0.9em;
+      line-height: 40px;
+      color: rgba(255, 255, 255, 0.6);
+      font-weight: 400;
+      cursor: pointer;
+
+      img {
+        transform: calc(0.9);
+        margin-right: 10px;
+      }
+    }
+
+    .hot-list {
+      width: 100%;
+
+      .list-title {
+        color: #E7C395;
+        padding: 0 10px;
+      }
+
+      .list-content {
+        max-height: 400px;
+        overflow: auto;
+
+        .list-item {
+          width: 100%;
+          height: 30px;
+          line-height: 30px;
+          color: white;
+          text-align: left;
+          white-space: nowrap;
+          cursor: pointer;
+          padding: 0 10px;
+        }
+      }
+
+      .active {
+        color: #E7C395;
+        background: #911212;
+      }
+    }
   }
 }
 

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

@@ -9,13 +9,8 @@
     <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
-        >
+        <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>
@@ -43,16 +38,31 @@ export default {
     },
   },
   created() {
-    this.data = window.myHotList || [];
+
+
   },
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  mounted() {
+    let timeA = -1;
+
+    timeA = window.setInterval(() => {
+      if (window.isHot) {
+        clearInterval(timeA);
+      }
+      if (window.isHot && window.myHotList && window.myHotList.length) {
+        this.data = window.myHotList;
+        console.log('看一看热点列表', window.myHotList, this.data)
+      } else {
+        this.data = []
+      }
+    }, 1000)
+  },
+  beforeCreate() { }, //生命周期 - 创建之前
+  beforeMount() { }, //生命周期 - 挂载之前
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() { }, //生命周期 - 销毁之前
+  destroyed() { }, //生命周期 - 销毁完成
+  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='less' scoped>
@@ -66,24 +76,29 @@ export default {
   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;
@@ -92,62 +107,76 @@ export default {
       align-items: center;
       justify-content: center;
     }
+
     .txt {
       width: calc(100% - 10px);
       color: #fff;
       font-size: 16px;
-      & > span {
+
+      &>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;
     }
   }
 }
+
 @media screen and (max-width: 1000px) {
   .hotList {
     max-width: 500px;
     width: 94%;
     height: 90%;
     padding: 30px 10px 30px 30px;
+
     .title {
       .titleLL {
         font-size: 18px;
       }
+
       .titleRR {
         position: absolute;
         right: -5px;
         top: 5px;
       }
     }
+
     .main {
       margin-top: 10px;
+
       .txt {
         font-size: 14px;
-        & > span {
+
+        &>span {
           &:hover {
             color: #fff;
           }
         }
+
         .active {
           color: #d6b970 !important;
         }

scene/src/views/gui/menu.vue

@@ -64,11 +64,11 @@
             </div>
 
             <!-- 热点列表 -->
-            <div id="myHotList" @click="openInd = 1">
-              <!-- 鼠标移入的显示 -->
+            <!-- <div id="myHotList" @click="openInd = 1">
+              鼠标移入的显示
               <div class="hoverTit">热点列表</div>
               <img src="../../assets/img/hot.png" alt="" />
-            </div>
+            </div> -->
 
             <div data-original-title="VR" id="vr" rel="tooltip" title="" style="display: none">
               <img class="icon icon-inside" :src="require('@/assets/images/VR.png')" />
@@ -163,6 +163,8 @@
 
 
 
+
+
   </div>
 </template>
 

scene2/src/views/gui/menu.vue

@@ -3,7 +3,7 @@
     <div class="pinBottom center">
       <div id="view-controllers"></div>
     </div>
-    <img @click="toHome()" class="back-icon" src="@/assets/images/icon/back-icon.png" alt="">
+    <img @click="toHomeFu()" class="back-icon" src="@/assets/images/icon/back-icon.png" alt="">
     <div class="pinBottom left">
       <div>
         <div class="viewContainer">

zdkkc/public/scenePage/static/js/Hot.js

@@ -1215,8 +1215,15 @@ window.initHot = function(model){
 
                 
                 if(this.info.linkType=="jumpLink"){
-                    var newPage = window.open(src, "_blank" ); 
-                    newPage.focus();  
+                    // var newPage = window.open(src, "_blank" ); 
+                    // newPage.focus();  
+
+                    // 不在另外窗口打开
+                    // window.location.href = window.location.href.substring(0,window.location.href.indexOf('m='))+src.substring(src.indexOf('?m='),src.length-1);
+                    let m = src.substring(src.indexOf("?")+3, src.indexOf("&"))
+                    if(window.parent){
+                        window.parent.window.transformScene(m)
+                    }
                     
                 }else if(this.info.linkType=="iframeDiv"){
                     
@@ -1772,6 +1779,7 @@ window.initHot = function(model){
         hots = hots.sort((a,b)=>{return a.order - b.order});
 
         window.myHotList = hots
+        window.isHot =true
 
         hots.forEach((hot)=>{
             var li = document.createElement('li');

zdkkc/public/staticData/data.js

@@ -92,7 +92,7 @@ const dataAll = {
           number: 'DECK5:',
           mainBody: 'detail.png',
           heilight: '4.png',
-          sceneCode:'',
+          sceneCode:'TEST',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',

zdkkc/src/stores/index.ts

@@ -7,7 +7,8 @@ export const useStore = defineStore('home', {
       // 原始数据
       dataAll: {} as any,
       mode: {} as any,
-      currentInfoPart: {} as any
+      currentInfoPart: {} as any,
+      lastCode: '' as any
     }
   },
   // 相当于计算属性

zdkkc/src/views/Scene/scenePage.vue

@@ -1,38 +1,55 @@
 <script setup lang='ts'>
+import { useStore } from '@/stores';
+
 
 const route = useRoute()
 const router = useRouter()
+const store = useStore()
 
 
 declare global {
   interface Window {
     toHome: () => void,
+    transformScene: (code: string) => void,
+    backFu: () => void
   }
 }
 
+const curCode = ref(route.query.code)
+
 onMounted(() => {
+
   window.toHome = () => {
     router.back()
   }
+  window.transformScene = (code: string) => {
+    store.lastCode = curCode.value
+    curCode.value = code
+    console.log('需要跳转', code)
+  }
+  window.backFu = () => {
+    curCode.value = store.lastCode
+  }
 })
 </script>
 
 <template>
   <div class="scene-box">
-    <iframe :src="`/scenePage/index.html?m=${route.query.code}`"></iframe>
+    <iframe :src="`/scenePage/index.html?m=${curCode}`"></iframe>
   </div>
 
 </template>
 
 <style lang='less' scoped>
-.scene-box{
+.scene-box {
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  iframe{
+
+  iframe {
     width: 100%;
     height: 100%;
-    
+
   }
 }
 </style>

zdkkc2/public/scenePage/static/js/loadCAD.js

@@ -42,7 +42,7 @@ window.grendCAD = (function grendCAD() {
         top: 20px;
         width: 180px;
         height: 180px;
-        background: rgb(146 3 3 / 37%);
+        background: rgb(151 146 146 / 37%);
         backdrop-filter:blur(10px);
         border-radius: 5px;
         pointer-events: none;

zdkkc2/src/views/Detail/detailPage.vue

@@ -1,7 +1,7 @@
 <script setup lang='ts'>
 import { useStore } from '@/stores';
 
-const mode = ref()
+const router = useRouter()
 const store = useStore()
 
 // info-简介  construction-结构  scene-场景
@@ -21,7 +21,9 @@ const curMoudle = ref('')
         <div>结构</div>
         <img :style="{ opacity: curMoudle == 'construction' ? '1' : '' }" src="@/assets/images/begin-select.png" alt="">
       </div>
-      <div class="item" @click="curMoudle = 'scene'">
+      <div class="item" @click="() => {
+        router.push('/scene')
+      }">
         <div>场景</div>
         <img :style="{ opacity: curMoudle == 'scene' ? '1' : '' }" src="@/assets/images/begin-select.png" alt="">
       </div>

zdkkc2/src/views/Scene/scenePage.vue

@@ -19,20 +19,21 @@ onMounted(() => {
 
 <template>
   <div class="scene-box">
-    <iframe :src="`/scenePage/index.html?m=${route.query.code}`"></iframe>
+    <iframe :src="`/scenePage/index.html?m=${route.query.code ? route.query.code : 'TEST'}`"></iframe>
   </div>
 
 </template>
 
 <style lang='less' scoped>
-.scene-box{
+.scene-box {
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  iframe{
+
+  iframe {
     width: 100%;
     height: 100%;
-    
+
   }
 }
 </style>