|
|
@@ -335,6 +335,474 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div
|
|
|
+ class="ordinary-container"
|
|
|
+ key="ordinary-container"
|
|
|
+ v-show="!isOpen3d"
|
|
|
+ @click="onBlur"
|
|
|
+ >
|
|
|
+ <div class="ordinary-left">
|
|
|
+ <SearchBar
|
|
|
+ class="search-container"
|
|
|
+ v-model="inputValue"
|
|
|
+ @focus="onFocus"
|
|
|
+ @input="onInput"
|
|
|
+ @blur="onBlur"
|
|
|
+ ref="searchbar"
|
|
|
+ />
|
|
|
+ <div class="square-map" v-show="isOpenSquare && !isOpen">
|
|
|
+ <el-row>
|
|
|
+ <el-col v-for="(item, index) in images" :key="item" :span="8">
|
|
|
+ <div
|
|
|
+ class="grid-item-background"
|
|
|
+ :style="{
|
|
|
+ backgroundColor: item.alt == selectedBenchId ? '#fff': '#000'
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="grid-item">
|
|
|
+ <img
|
|
|
+ :src="item.url"
|
|
|
+ @dblclick="handleDblClickImg(item.alt)"
|
|
|
+ @click="handleClickImg(item.alt, index)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="grid-item-close">
|
|
|
+ <img
|
|
|
+ width="30px"
|
|
|
+ src="../../images/closeremotebench.png"
|
|
|
+ @click="handleCloseImg(item.alt)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="filter-bench-list" v-show="isOpen" z-index="9999">
|
|
|
+ <dropdown :is-open="isOpen" ref="dropdown">
|
|
|
+ <template v-slot:table>
|
|
|
+ <table-component
|
|
|
+ :data="filterBenchList"
|
|
|
+ :filters="filters"
|
|
|
+ :row-class-name="rowClassName"
|
|
|
+ ></table-component>
|
|
|
+ </template>
|
|
|
+ </dropdown>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-show="!isConnected && !isOpenSquare && !isOpen"
|
|
|
+ class="ordinary-map-container"
|
|
|
+ z-index="9998"
|
|
|
+ >
|
|
|
+ <div class="ordinary-map" id="ordinary-map">
|
|
|
+ <!-- <img src="../../images/map.png" /> -->
|
|
|
+ <div class="vr-bg" id="vr-bg-container"></div>
|
|
|
+ <div id="playersmall">
|
|
|
+ <div
|
|
|
+ v-for="(item, key) in benchList"
|
|
|
+ :key="key"
|
|
|
+ class="bmMapItem el-icon-location"
|
|
|
+ :style="{
|
|
|
+ left: item.left + 'px',
|
|
|
+ top: item.top + 'px',
|
|
|
+ }"
|
|
|
+ :class="item.status"
|
|
|
+ @mouseover="bmMapItemSelect(key)"
|
|
|
+ >
|
|
|
+ <Transition v-if="item.selected">
|
|
|
+ <template>
|
|
|
+ <div
|
|
|
+ class="bmMapItemInfo"
|
|
|
+ :class="{
|
|
|
+ bmMapItemInfoSelected: item.selected,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <span>
|
|
|
+ {{ item.name }}
|
|
|
+ </span>
|
|
|
+ <span style="display: flex; align-items: center">
|
|
|
+ {{ item.Project }}
|
|
|
+ </span>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <span
|
|
|
+ class="bmInfoMsSlideNameStatus"
|
|
|
+ :class="{
|
|
|
+ ['bmInfoMsSlideNameStatus ' + item.status]: true,
|
|
|
+ }"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="bmMapItemInfoAfter"></div> -->
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </Transition>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="ordinary-map-hidden" v-show="false">
|
|
|
+ <div class="ordinary-map-blocker" id="ordinary-map-blocker">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-show="isConnected && !isOpenSquare && !isOpen" class="origin-map">
|
|
|
+ <Transition name="slide">
|
|
|
+ <div class="bmMap" v-if="false">
|
|
|
+ <dropdown :is-open="isOpen" ref="dropdown">
|
|
|
+ <template v-slot:table>
|
|
|
+ <table-component
|
|
|
+ :data="benchList"
|
|
|
+ :filters="filters"
|
|
|
+ :row-class-name="rowClassName"
|
|
|
+ ></table-component>
|
|
|
+ </template>
|
|
|
+ </dropdown>
|
|
|
+ <div class="bmMapImage">
|
|
|
+ <div
|
|
|
+ v-for="(item, key) in benchList"
|
|
|
+ :key="key"
|
|
|
+ class="bmMapItem el-icon-location"
|
|
|
+ :style="{
|
|
|
+ left: item.left + '%',
|
|
|
+ top: item.top + '%',
|
|
|
+ }"
|
|
|
+ :class="item.status"
|
|
|
+ @click="bmMapItemSelect(key)"
|
|
|
+ >
|
|
|
+ <Transition v-if="item.selected">
|
|
|
+ <template>
|
|
|
+ <div
|
|
|
+ class="bmMapItemInfo"
|
|
|
+ :class="{
|
|
|
+ bmMapItemInfoSelected: item.selected,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <span>
|
|
|
+ {{ item.name }}
|
|
|
+ </span>
|
|
|
+ <span style="display: flex; align-items: center">
|
|
|
+ {{ item.Project }}
|
|
|
+ </span>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <span
|
|
|
+ class="bmInfoMsSlideNameStatus"
|
|
|
+ :class="{
|
|
|
+ ['bmInfoMsSlideNameStatus ' + item.status]: true,
|
|
|
+ }"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="bmMapItemInfoAfter"></div> -->
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </Transition>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Transition>
|
|
|
+ <Transition name="slide">
|
|
|
+ <div class="bmBench" v-if="benchDisplayVisible">
|
|
|
+ <div class="bmBenchBox">
|
|
|
+ <img
|
|
|
+ class="bmBenchImg bmBenchImgUpper"
|
|
|
+ ref="bmBenchRef"
|
|
|
+ :src="
|
|
|
+ currentScreen == 'upper' ? benchImgUpper : benchImgLower
|
|
|
+ "
|
|
|
+ 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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Transition>
|
|
|
+ <img :src="mainSnapshot" />
|
|
|
+ </div>
|
|
|
+ <image-list
|
|
|
+ v-show="isConnected && !isOpenSquare && !isOpen"
|
|
|
+ :images="images"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :current-bench="connetedBenchId"
|
|
|
+ @handleImageClick="handleImageClick"
|
|
|
+ @prev-page="prevPage"
|
|
|
+ @next-page="nextPage"
|
|
|
+ class="image-container"
|
|
|
+ />
|
|
|
+ <el-row v-show="isConnected && !isOpenSquare && !isOpen" class="bench-button">
|
|
|
+ <el-col :span="5" class="btn-item" style="text-align: center">{{
|
|
|
+ currentBench && currentBench.name
|
|
|
+ }}</el-col>
|
|
|
+ <el-col
|
|
|
+ :span="3"
|
|
|
+ class="btn-item"
|
|
|
+ :class="{ benchBtnActive: isPlaying }"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ @click="connectAudioDevice('collectAudio')"
|
|
|
+ src="../../images/sound.png"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="3"
|
|
|
+ class="btn-item"
|
|
|
+ :class="{ benchBtnActive: isRecording }"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ @click="connectAudioDevice('playAudio')"
|
|
|
+ src="../../images/mic.png"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="3"
|
|
|
+ class="btn-item"
|
|
|
+ :class="{ benchBtnActive: displayTapMode }"
|
|
|
+ >
|
|
|
+ <img @click="tapModeControl" src="../../images/pointer.png" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" class="btn-item" v-show="false">
|
|
|
+ <img @click="showLogBox" src="../../images/book.png" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" class="btn-item">
|
|
|
+ <img @click="pressPtt" src="../../images/robot.png" />
|
|
|
+ </el-col>
|
|
|
+ <!-- <el-col :span="3" class="btn-item" @click="clickBenchList">
|
|
|
+ <img @click="gotoGrid" src="../../images/grid.png" />
|
|
|
+ </el-col> -->
|
|
|
+ <el-col :span="3" class="btn-item">
|
|
|
+ <img @click="disconnectBench" src="../../images/disconnect.png" />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="origin-right">
|
|
|
+ <!-- <div class="square-count" v-show="!currentBench.selected && isOpenSquare">
|
|
|
+ <status-bar
|
|
|
+ :ready="readyCount"
|
|
|
+ :occupied="occupiedCount"
|
|
|
+ :offline="offlineCount"
|
|
|
+ ></status-bar>
|
|
|
+ </div> -->
|
|
|
+ <!-- <div
|
|
|
+ class="origin-basic"
|
|
|
+ v-show="currentBench.type == 2 && !isOpenSquare"
|
|
|
+ @dblclick="handleInfoDblClick(currentBench.benchId)"
|
|
|
+ >
|
|
|
+ <h2 @click="bmMapItemActivate">{{ currentBench.name }} 🔗</h2>
|
|
|
+ <div class="originBasicRow">
|
|
|
+ <div>
|
|
|
+ <span>Location:</span>
|
|
|
+ <span>Automation Lab-7E</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>MU_SW</span>
|
|
|
+ <span>{{ currentBench.MU_SW }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="originBasicRow">
|
|
|
+ <div>
|
|
|
+ <span>Cluster</span>
|
|
|
+ <span>{{ currentBench.Cluster }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>Market</span>
|
|
|
+ <span>{{ currentBench.Market }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="originBasicRow">
|
|
|
+ <div>
|
|
|
+ <span>Box IP</span>
|
|
|
+ <span>{{ currentBench.ip }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>Box Version</span>
|
|
|
+ <span>{{ currentBench.equipment?.version }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <!-- <div
|
|
|
+ class="secondScreen"
|
|
|
+ v-if="benchDisplayLowerVisible && !isOpenSquare"
|
|
|
+ @click="switchScreen"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="bmBenchImg bmBenchImgLower"
|
|
|
+ :src="currentScreen == 'upper' ? benchImgLower : benchImgUpper"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div> -->
|
|
|
+ <!--<div
|
|
|
+ class="origin-basic backgroundBox"
|
|
|
+ v-show="currentBench.type == 2"
|
|
|
+ @dblclick="handleInfoDblClick(currentBench.benchId)"
|
|
|
+ >
|
|
|
+ <h2 @click="bmMapItemActivate">{{ currentBench.name }} 🔗</h2>
|
|
|
+ <div class="originBasicRow">
|
|
|
+ <div>
|
|
|
+ <span>Location:</span>
|
|
|
+ <span>Automation Lab-7E</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>MU_SW</span>
|
|
|
+ <span>{{ currentBench.MU_SW }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="originBasicRow">
|
|
|
+ <div>
|
|
|
+ <span>Cluster</span>
|
|
|
+ <span>{{ currentBench.Cluster }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>Market</span>
|
|
|
+ <span>{{ currentBench.Market }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="originBasicRow">
|
|
|
+ <div>
|
|
|
+ <span>Box IP</span>
|
|
|
+ <span>{{ currentBench.ip }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>Box Version</span>
|
|
|
+ <span>{{ currentBench.equipment?.version }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="secondScreen"
|
|
|
+ v-if="benchDisplayLowerVisible"
|
|
|
+ @click="switchScreen"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="bmBenchImg bmBenchImgLower"
|
|
|
+ :src="currentScreen == 'upper' ? benchImgLower : benchImgUpper"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>-->
|
|
|
+ <div class="ordinary-list">
|
|
|
+ <TabList
|
|
|
+ :tabs="tabs"
|
|
|
+ :itemRender="itemRender"
|
|
|
+ :planRender="planRender"
|
|
|
+ :taskRender="taskRender"
|
|
|
+ :issueRender="issueRender"
|
|
|
+ :planList="planList"
|
|
|
+ :caseList="caseList"
|
|
|
+ :autoCaseList="autoCaseList"
|
|
|
+ :is-show-auto-case-list="isShowAutoCaseList"
|
|
|
+ :planName="planName"
|
|
|
+ :taskName="taskName"
|
|
|
+ :caseName="caseName"
|
|
|
+ :is-show-plan-list="isShowPlanList"
|
|
|
+ :is-show-task-list="isShowTaskList"
|
|
|
+ :is-show-case-commit="isShowCaseCommit"
|
|
|
+ :is-show-case-list="isShowCaseList"
|
|
|
+ :is-show-case-detail="isShowCaseDetail"
|
|
|
+ :clickBackToTaskList="clickBackToTaskList"
|
|
|
+ :clickBackToPlanList="clickBackToPlanList"
|
|
|
+ :selectRowPlan="selectRowPlan"
|
|
|
+ :caseProject="caseProject"
|
|
|
+ :currentCase="currentCase"
|
|
|
+ :caseActive="caseActive"
|
|
|
+ :caseFunction="caseFunction"
|
|
|
+ caseContent="caseContent"
|
|
|
+ :isShowAutoCaseCommit="isShowAutoCaseCommit"
|
|
|
+ @turnNextCase="turnNextCase"
|
|
|
+ :caseSubFunction="caseSubFunction"
|
|
|
+ :caseMarket="caseMarket"
|
|
|
+ :caseLanguage="caseLanguage"
|
|
|
+ :selectRowCase="selectRowCase"
|
|
|
+ :clickBackToAutoPlanList="clickBackToAutoPlanList"
|
|
|
+ :tabClass="tabClass"
|
|
|
+ :planBack="planBack"
|
|
|
+ :clickBackToPlan="clickBackToPlan"
|
|
|
+ :submitManualCase="submitManualCase"
|
|
|
+ :clickBackToCaseList="clickBackToCaseList"
|
|
|
+ :isShowIssueList="isShowIssueList"
|
|
|
+ :isShowIssueDetail="isShowIssueDetail"
|
|
|
+ :currentIssue="currentIssue"
|
|
|
+ :currentPlanId="currentPlanId"
|
|
|
+ :currentPlanName="currentPlanName"
|
|
|
+ :submitAutoCase="submitAutoCase"
|
|
|
+ :clickBackToAutoCaseList="clickBackToAutoCaseList"
|
|
|
+ :clickBackToIssueList="clickBackToIssueList"
|
|
|
+ :benchDisplayLowerVisible="benchDisplayLowerVisible"
|
|
|
+ :currentScreen="currentScreen"
|
|
|
+ :benchImgLower="benchImgLower"
|
|
|
+ :benchImgUpper="benchImgUpper"
|
|
|
+ :readyCount="readyCount"
|
|
|
+ :occupiedCount="occupiedCount"
|
|
|
+ :offlineCount="offlineCount"
|
|
|
+ ></TabList>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<bench-detail
|
|
|
:is-detail-visible="isDetailVisible"
|
|
|
:is-remote-btn-visible="isRemoteBtnVisible"
|
|
|
@@ -2744,17 +3212,17 @@
|
|
|
}
|
|
|
},
|
|
|
isOpen3d(newValue, oldValue) {
|
|
|
- // if (!newValue) {
|
|
|
- // this.$nextTick(() => {
|
|
|
- // let mapDom = document.getElementsByClassName("ordinary-map")[0];
|
|
|
- // let style = getComputedStyle(mapDom);
|
|
|
- // let width = parseFloat(style.width);
|
|
|
- // let height = parseFloat(style.height);
|
|
|
- // uwbMain('playersmall', width, height, "floorplan");
|
|
|
- // })
|
|
|
- // } else {
|
|
|
- // uwbMain('player', window.innerWidth, window.innerHeight, "panorama");
|
|
|
- // }
|
|
|
+ if (!newValue) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let mapDom = document.getElementsByClassName("ordinary-map")[0];
|
|
|
+ let style = getComputedStyle(mapDom);
|
|
|
+ let width = parseFloat(style.width);
|
|
|
+ let height = parseFloat(style.height);
|
|
|
+ uwbMain('playersmall', width, height, "floorplan");
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uwbMain('player', window.innerWidth, window.innerHeight, "panorama");
|
|
|
+ }
|
|
|
},
|
|
|
autoPlanList() {
|
|
|
this.autoPlanList.forEach(m => {
|
deepsea