|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="ordinary-container" @click="onClickOutside">
|
|
|
+ <div class="ordinary-container">
|
|
|
<div class="ordinary-left">
|
|
|
<SearchBar class="search-container"
|
|
|
v-model="inputValue"
|
|
|
@@ -7,7 +7,7 @@
|
|
|
@input="onInput"
|
|
|
ref="searchbar"
|
|
|
/>
|
|
|
- <div v-show="!mainSnapshot" class="ordinary-map-container" z-index="0">
|
|
|
+ <div v-show="!isConnected" class="ordinary-map-container" z-index="0">
|
|
|
<div class="ordinary-map" id="ordinary-map">
|
|
|
<!-- <img src="../../images/map.png" /> -->
|
|
|
<div class="vr-bg" id="vr-bg-container"></div>
|
|
|
@@ -126,98 +126,11 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</Transition>
|
|
|
- <Transition name="slide">
|
|
|
- <div class="bmBench" v-if="benchDisplayVisible">
|
|
|
- <div class="bmBenchBox">
|
|
|
- <img
|
|
|
- class="bmBenchImg bmBenchImgUpper"
|
|
|
- ref="bmBenchRef"
|
|
|
- :src="benchImgUpper"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <div
|
|
|
- @mousedown="controlCursorMouseDown"
|
|
|
- @mousemove="controlCursorMouseMove"
|
|
|
- @mouseleave="controlCursorMouseOut"
|
|
|
- @mouseup="controlCursorMouseUp"
|
|
|
- class="bmBenchTrailUpper"
|
|
|
- >
|
|
|
- <Transition>
|
|
|
- <div
|
|
|
- v-if="ifBmBenchTrailUpperCursorTap"
|
|
|
- class="bmBenchTrailUpperCursorTap"
|
|
|
- :style="{
|
|
|
- left: trailCursorPosition.left,
|
|
|
- top: trailCursorPosition.top,
|
|
|
- }"
|
|
|
- ></div>
|
|
|
- </Transition>
|
|
|
- <Transition>
|
|
|
- <div
|
|
|
- v-if="ifBmBenchTrailUpperCursorSwipe"
|
|
|
- class="bmBenchTrailUpperCursorSwipe"
|
|
|
- :style="{
|
|
|
- left: 'calc(' + trailCursorPosition.left + '% - 1vh)',
|
|
|
- top: 'calc(' + trailCursorPosition.top + '% - 1vh)',
|
|
|
- }"
|
|
|
- ></div>
|
|
|
- </Transition>
|
|
|
- <Transition>
|
|
|
- <div
|
|
|
- v-if="ifBmBenchTrailUpperCursorSwipe"
|
|
|
- class="bmBenchTrailUpperCursorSwipe bmBenchTrailUpperCursorSwipe2"
|
|
|
- :style="{
|
|
|
- left: 'calc(' + trailCursorPosition.left + '% - 0.75vh)',
|
|
|
- top: 'calc(' + trailCursorPosition.top + '% - 0.75vh)',
|
|
|
- }"
|
|
|
- ></div>
|
|
|
- </Transition>
|
|
|
- <Transition>
|
|
|
- <div
|
|
|
- v-if="ifBmBenchTrailUpperCursorSwipe"
|
|
|
- class="bmBenchTrailUpperCursorSwipe bmBenchTrailUpperCursorSwipe3"
|
|
|
- :style="{
|
|
|
- left: 'calc(' + trailCursorPosition.left + '% - 0.5vh)',
|
|
|
- top: 'calc(' + trailCursorPosition.top + '% - 0.5vh)',
|
|
|
- }"
|
|
|
- ></div>
|
|
|
- </Transition>
|
|
|
- <Transition>
|
|
|
- <div
|
|
|
- v-if="ifBmBenchTrailUpperCursorPress"
|
|
|
- class="bmBenchTrailUpperCursorPress"
|
|
|
- :style="{
|
|
|
- left: 'calc(' + trailCursorPosition.left + '% - 1vh)',
|
|
|
- top: 'calc(' + trailCursorPosition.top + '% - 1vh)',
|
|
|
- }"
|
|
|
- ></div>
|
|
|
- </Transition>
|
|
|
- <Transition>
|
|
|
- <div
|
|
|
- v-if="ifBmBenchTrailUpperCursor"
|
|
|
- class="bmBenchTrailUpperCursor"
|
|
|
- :style="{
|
|
|
- left: 'calc(' + controlCursorPosition.left + 'px - 1vh)',
|
|
|
- top: 'calc(' + controlCursorPosition.top + 'px - 1vh)',
|
|
|
- }"
|
|
|
- ></div>
|
|
|
- </Transition>
|
|
|
- </div>
|
|
|
- <img
|
|
|
- v-if="benchDisplayLowerVisible"
|
|
|
- class="bmBenchImg bmBenchImgLower"
|
|
|
- :src="benchImgLower"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </Transition>
|
|
|
- <img v-show="mainSnapshot" :src="mainSnapshot" />
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
- <div v-show="mainSnapshot" class="origin-map">
|
|
|
+ <div v-show="isConnected" class="origin-map">
|
|
|
<Transition name="slide">
|
|
|
<div class="bmMap" v-if="false">
|
|
|
<dropdown :is-open="isOpen" ref="dropdown">
|
|
|
@@ -354,7 +267,7 @@
|
|
|
<img :src="mainSnapshot" />
|
|
|
</div>
|
|
|
<image-list
|
|
|
- v-show="mainSnapshot"
|
|
|
+ v-show="isConnected"
|
|
|
:images="images"
|
|
|
:page-size="pageSize"
|
|
|
:current-page="currentPage"
|
|
|
@@ -363,7 +276,7 @@
|
|
|
@next-page="nextPage"
|
|
|
class="image-container"
|
|
|
/>
|
|
|
- <el-row v-show="mainSnapshot" class="bench-button">
|
|
|
+ <el-row v-show="isConnected" class="bench-button">
|
|
|
<el-col :span="5" class="btn-item" style="text-align: center">{{
|
|
|
currentBench.name
|
|
|
}}</el-col>
|
|
|
@@ -656,6 +569,7 @@
|
|
|
recordSuperposeArr: [],
|
|
|
sempleRateHandlingThreshold: null,
|
|
|
playAudioBenchList: [],
|
|
|
+ isConnected: false
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -1380,6 +1294,7 @@
|
|
|
console.log("connect bench", benchId);
|
|
|
ws.connectBench({ bench_id: String(benchId) })
|
|
|
.then((res) => {
|
|
|
+ self.isConnected = true;
|
|
|
console.log("connect bench success");
|
|
|
this.currentScreen = "upper";
|
|
|
self.setSendAudioBus(benchId);
|
|
|
@@ -1479,6 +1394,42 @@
|
|
|
controlCursorMouseOut(e) {
|
|
|
this.ifBmBenchTrailUpperCursor = false;
|
|
|
},
|
|
|
+ controlCursorMouseUp(e, screenType = 1) {
|
|
|
+ let self = this;
|
|
|
+ if (this.currentScreen == "upper") {
|
|
|
+ screenType = 1;
|
|
|
+ } else if (this.currentScreen == "lower") {
|
|
|
+ screenType = 2;
|
|
|
+ }
|
|
|
+ if (this.displayTapMode) {
|
|
|
+ this.ifBmBenchTrailUpperCursor = false;
|
|
|
+ if (
|
|
|
+ Math.abs(this.controlStartPoint.x - e.offsetX) < 30 &&
|
|
|
+ Math.abs(this.controlStartPoint.y - e.offsetY) < 30 &&
|
|
|
+ Date.now() - this.controlStartPoint.time < 500
|
|
|
+ ) {
|
|
|
+ self.singleFingerOperation(e, "tap", screenType);
|
|
|
+ } else if (
|
|
|
+ Math.abs(this.controlStartPoint.x - e.offsetX) > 30 ||
|
|
|
+ Math.abs(this.controlStartPoint.y - e.offsetY) > 30
|
|
|
+ ) {
|
|
|
+ // console.log("controlStartPoint", controlStartPoint);
|
|
|
+ self.singleFingerOperation(
|
|
|
+ e,
|
|
|
+ "swipe",
|
|
|
+ screenType,
|
|
|
+ this.controlStartPoint
|
|
|
+ );
|
|
|
+ } else if (Date.now() - this.controlStartPoint.time > 500) {
|
|
|
+ self.singleFingerOperation(
|
|
|
+ e,
|
|
|
+ "longPress",
|
|
|
+ screenType,
|
|
|
+ this.controlStartPoint
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
singleFingerOperation(e, operation, screenType, startPoint = {}) {
|
|
|
let self = this;
|
|
|
console.log("singleFingerOperation", e, operation, screenType);
|
|
|
@@ -2076,6 +2027,7 @@
|
|
|
this.currentBench = {};
|
|
|
this.benchDisplayVisible = false;
|
|
|
this.benchDisplayLowerVisible = false;
|
|
|
+ this.isConnected = false;
|
|
|
}
|
|
|
);
|
|
|
},
|
deepsea