src/views/ordinaryPage/index.vue

@@ -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"
@@ -2746,17 +3214,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 => {