|
|
@@ -3,13 +3,20 @@
|
|
|
<img class="logo" :src="require(`@/assets/images/logo.png`)" alt="" />
|
|
|
<Loading :barWidth="loadprogress" v-if="!hadLoaded" />
|
|
|
<transition appear name="dm">
|
|
|
- <vmenu @clickItem="handleItem" />
|
|
|
+ <vmenu @clickItem="handleItem" @notFinish="handleNotFinish" />
|
|
|
</transition>
|
|
|
|
|
|
<transition appear name="dm">
|
|
|
<vintroduce v-if="currentItem == 'info'" />
|
|
|
</transition>
|
|
|
|
|
|
+ <transition appear name="dm">
|
|
|
+ <div class="qidaitips" v-if="isshowqidaitips">
|
|
|
+ <img :src="require('@/assets/images/diwen.svg')" alt="">
|
|
|
+ <span>敬请期待</span>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+
|
|
|
|
|
|
<div class="infobg">
|
|
|
<img :src="require('@/assets/images/info_bg.png')" alt="">
|
|
|
@@ -38,37 +45,46 @@ import vintroduce from "@/components/introduce";
|
|
|
|
|
|
const transitionTime = 2000
|
|
|
|
|
|
-let labelClick = (e) => {
|
|
|
+let labelClick = (e, event) => {
|
|
|
+
|
|
|
if (e.centerCamePosi) {
|
|
|
+ if (event.target.dataset.type == 'close') {
|
|
|
+ e.elem.siblings().removeClass('hideAllSon')
|
|
|
+ e.elem.removeClass('detailShow')
|
|
|
+ window.showWenli = false
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
- console.log(e);
|
|
|
+ if (window.limitDistMax) {
|
|
|
+ return
|
|
|
+ }
|
|
|
let { x, y, z } = e.centerCamePosi
|
|
|
- window.transitions.start(
|
|
|
- window.lerp.vector(window.viewer.camera.position,
|
|
|
- new window.THREE.Vector3(x, y, z)),
|
|
|
- transitionTime,
|
|
|
- () => {
|
|
|
- e.elem[0].style.display == 'block' && e.elem.addClass('detailShow')
|
|
|
+
|
|
|
+ let fn = ()=>{
|
|
|
+ e.elem[0].style.display == 'block' && e.elem.addClass('detailShow')
|
|
|
e.elem.siblings().removeClass('detailShow')
|
|
|
- e.elem.siblings().css({
|
|
|
- "opacity": 0,
|
|
|
- "pointer-events": "none"
|
|
|
- })
|
|
|
- console.log(e.elem.siblings());
|
|
|
+ e.elem.siblings().addClass('hideAllSon')
|
|
|
+
|
|
|
let wlmesh = window.viewer.model.getObjectByName("WL48_ping")
|
|
|
wlmesh.material.emissiveMap = e.emissiveTexture;
|
|
|
wlmesh.material.dispose();
|
|
|
window.showWenli = true
|
|
|
+ }
|
|
|
+
|
|
|
+ if (window.viewer.camera.position.x==x
|
|
|
+ &&window.viewer.camera.position.y==y
|
|
|
+ &&window.viewer.camera.position.z==z) {
|
|
|
+ fn()
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
- // window.viewer.labels.forEach(item => {
|
|
|
|
|
|
- // if (centerLabel.title == item.title) {
|
|
|
- // this.centerLabel = centerLabel
|
|
|
- // }
|
|
|
- // else {
|
|
|
- // item.elem.removeClass('detailShow')
|
|
|
- // }
|
|
|
- // })
|
|
|
+ window.transitions.start(
|
|
|
+ window.lerp.vector(window.viewer.camera.position,
|
|
|
+ new window.THREE.Vector3(x, y, z)),
|
|
|
+ transitionTime,
|
|
|
+ () => {
|
|
|
+ fn()
|
|
|
},
|
|
|
0/* Delay */,
|
|
|
window.easing.easeInOutQuad,
|
|
|
@@ -182,11 +198,19 @@ export default {
|
|
|
meshGroup: null,
|
|
|
currentItem: 'info',
|
|
|
centerLabel: null,
|
|
|
- fgtimer: null
|
|
|
+ fgtimer: null,
|
|
|
+ isshowqidaitips: false
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
|
|
|
+ handleNotFinish(){
|
|
|
+ this.isshowqidaitips = true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isshowqidaitips = false
|
|
|
+ }, 3000);
|
|
|
+ },
|
|
|
+
|
|
|
handleItem(data) {
|
|
|
this.currentItem = data.id
|
|
|
switch (data.id) {
|
|
|
@@ -315,9 +339,13 @@ export default {
|
|
|
watch: {
|
|
|
centerLabel(newVal) {
|
|
|
if (newVal) {
|
|
|
- newVal.elem[0].style.display == 'block' && newVal.elem.addClass('detailShow')
|
|
|
+ if (newVal.elem[0].style.display == 'block') {
|
|
|
+ newVal.elem.addClass('detailShow')
|
|
|
+ newVal.elem.removeClass('hideAllSon')
|
|
|
+ }
|
|
|
let wlmesh = window.viewer.model.getObjectByName("WL48_ping")
|
|
|
wlmesh.material.emissiveMap = this.centerLabel.emissiveTexture;
|
|
|
+ window.showWenli = true
|
|
|
wlmesh.material.dispose();
|
|
|
}
|
|
|
},
|
|
|
@@ -355,21 +383,38 @@ export default {
|
|
|
})
|
|
|
|
|
|
window.viewer.addEventListener("delayUpdate", (e) => {
|
|
|
- // setTimeout(() => {
|
|
|
- // if (this.currentItem == 'pic') {
|
|
|
- // let centerLabel = window.viewer.getCLabel()
|
|
|
- // if (centerLabel) {
|
|
|
- // window.viewer.labels.forEach(item => {
|
|
|
- // if (centerLabel.title == item.title) {
|
|
|
- // this.centerLabel = centerLabel
|
|
|
- // }
|
|
|
- // else {
|
|
|
- // item.elem.removeClass('detailShow')
|
|
|
- // }
|
|
|
- // })
|
|
|
- // }
|
|
|
- // }
|
|
|
- // });
|
|
|
+ let dist = window.viewer.control.object.position.distanceTo(window.viewer.control.target)
|
|
|
+ if (dist < 0.35) {
|
|
|
+ setTimeout(() => {
|
|
|
+ if (this.currentItem == 'pic') {
|
|
|
+ //limitDistMax判断是否在放大的界定范围内
|
|
|
+ window.limitDistMax = true
|
|
|
+ let centerLabel = window.viewer.getCLabel()
|
|
|
+ if (centerLabel) {
|
|
|
+ window.viewer.labels.forEach(item => {
|
|
|
+ if (centerLabel.title == item.title) {
|
|
|
+ this.centerLabel = centerLabel
|
|
|
+
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ item.elem.removeClass('detailShow')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if (this.currentItem == 'pic' && window.limitDistMax) {
|
|
|
+ window.limitDistMax = false
|
|
|
+ window.showWenli = false
|
|
|
+ this.centerLabel = null
|
|
|
+ window.viewer.labels.forEach(item => {
|
|
|
+ item.elem.removeClass('hideAllSon')
|
|
|
+ item.elem.removeClass('detailShow')
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
},
|
|
|
@@ -396,6 +441,32 @@ export default {
|
|
|
z-index: 9999;
|
|
|
}
|
|
|
|
|
|
+ .qidaitips{
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ background-image: url('~@/assets/images/frame.svg');
|
|
|
+ backdrop-filter: blur(30px);
|
|
|
+ background-color: rgba(255, 255, 255, 0.4);
|
|
|
+ z-index: 99;
|
|
|
+ width: 424px;
|
|
|
+ height: 150px;
|
|
|
+ >span{
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30px;
|
|
|
+ font-size: 40px;
|
|
|
+ color: #70474D;
|
|
|
+ font-family: kaiti;
|
|
|
+ letter-spacing: 10px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.infobg {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
@@ -446,7 +517,7 @@ export default {
|
|
|
|
|
|
.dm-enter-active,
|
|
|
.dm-leave-active {
|
|
|
- transition: all 2.8s ease;
|
|
|
+ transition: all 1.8s ease;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
@@ -732,6 +803,16 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ &.hideAllSon {
|
|
|
+
|
|
|
+ *,
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -769,6 +850,11 @@ export default {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+
|
|
|
+ >img {
|
|
|
+ width: 14px;
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.pinfo {
|
|
|
@@ -790,19 +876,6 @@ export default {
|
|
|
}
|
|
|
|
|
|
|
|
|
-
|
|
|
-@-webkit-keyframes room-label {
|
|
|
- 0% {
|
|
|
- opacity: 0;
|
|
|
- margin-top: 8.75px;
|
|
|
- }
|
|
|
-
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
@keyframes room-label {
|
|
|
0% {
|
|
|
opacity: 0;
|
tremble
