mine/src/views/ordinaryPage/index.vue

<template>
  <div>
    <div class="main-title">矿井井下人员定位系统</div>
    <Tabs :tabs="tabs" :tabs_settings="tabs_settings" :tabIndex="tabIndex" class="main-tab"
    @tabIndexChanged="tabIndexUpdate"/>
    <!-- <SearchBarMain /> -->
    <SearchBar
      class="search-container"
      v-model="inputValue"
      @focus="onFocus"
      @input="onInput"
      @blur="onBlur"
      ref="searchbar"
    />
    <div class="ordinary-map-ex">
      <div class="square-count">
        <status-bar
          :ready="readyCount"
          :occupied="occupiedCount"
          :offline="offlineCount"
        ></status-bar>
      </div>
    </div>
    <div class="container" v-show="isOpen3d" key="container"> 
      <div class="vr-bg" id="vr-bg-container"></div>
      <div id="player" style="width: 100%; height: 100%"></div>
      <div style="position: relative;">
        <div class="main-tab" style="width: 100%; margin-left: 2vw;">
          <TabList 
          :tabs="tabs"
          :tabs_settings="tabs_settings"
          :divWidth=30></TabList>
        </div>
        <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>
                </template>
              </Transition>
            </div>
        </div>
      </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="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>
    <div
      class="ordinary-container"
      key="ordinary-container"
      v-show="tabIndex == 0"
      @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"
      :closeDetail="closeDetail"
      ref="benchdetail"
      :bench="benchDetail"
      @changeCurrentBench="changeCurrentBench"
    />
    <div
      class="bmMapItemInfoWater"
      v-show="mouseStatus"
      :class="{
        bmMapItemInfoSelected: mouseStatus,
      }"
      :style="{ left: mouseX+'px', top: mouseY+'px' }"
    >
      <span>
        {{ mouseBenchDetail.name }}
      </span>
      <span style="display: flex; align-items: center">
        {{ mouseBenchDetail.Project }}
      </span>
      <div style="width: 100%">
        <span
          class="bmInfoMsSlideNameStatus"
          :class="{
            ['bmInfoMsSlideNameStatus ' + mouseBenchDetail.status]: true,
          }"
        ></span>
      </div>
      <!-- <div class="bmMapItemInfoAfter"></div> -->
    </div>
  </div>
</template>
<script>
  import "./index.less";
  import "./origin.less";
  import "./square.less";
  import TabList from "../../components/TabList";
  import Tabs from "../../components/Tabs"
  import SearchBar from "../../components/SearchBar";
  import Dropdown from "./components/DropDown";
  import TableComponent from "./components/TableComponent";
  import BenchDetail from "../../components/BenchDetail";
  import StatusBar from "../../components/StatusBar";
  //import { benchList } from './api'
  import THREE from "three";
  import { uwbMain } from "../../uwb-sample";
  import { mapState } from "vuex";
  
  import ImageList from "./components/ImageList";
  import webSocket from "../../service/ws";
  import bus from "../../service/bus";
  
  import { FBXLoader } from "../../FBXLoader.js";
  import SearchBarMain from "../../components/SearchBarMain";
  
  const ws = new webSocket();
  let that = null;
  let wsArray = [];
  let wsArrayLength = 0;
  for (var iR = 0; iR < 50; iR++) {
    const wsRemote = new webSocket();
  
    wsRemote.open().then((res) => {
      // console.log("res", res);
    });
    wsArray.push(wsRemote);
  }
  
  export default {
    components: {
      StatusBar,
      TabList,
      SearchBar,
      Dropdown,
      TableComponent,
      BenchDetail,
      ImageList,
      SearchBarMain,
      Tabs
    },
    data() {
      return {
        inputValue: "",
        isDetailVisible: false,
        isRemoteBtnVisible: false,
        isShowPlanList: false,
        isShowCaseList: false,
        isShowAutoCaseList: false,
        isShowCaseDetail: false,
        isShowCaseCommit: false,
        isShowIssueList: true,
        isShowIssueDetail: false,
        isShowAutoCaseCommit: false,
        taskName: "",
        planName: "",
        caseName: "",
        caseProject: "",
        caseActive: "",
        caseFunction: "",
        caseSubFunction: "",
        caseMarket: "",
        caseLanguage: "",
        caseContent: "",
        isShowTaskList: true,
        benchDisplayVisible: false,
        mainSnapshot: "",
        currentBench: {},
        readyCount: 10,
        occupiedCount: 5,
        offlineCount: 3,
        previousSelectedBenchList: [],
        selectedBenchList: [],
        renderBenchList: true,
        filters: [],
        currentCase: null,
        currentIssue: null,
        currentPlanId: null,
        currentPlanName: null,
        currentCaseIndex: 0,
        username: '',
        password: '',
        tabs: [
          {
            title: "实时",
            list: [
              // {
              // title: 'Item 1',
              // description: '1111111',
              // image: 'item1.jpg',
              // tag: 'Tag 1'
              // },
              // {
              // title: 'Item 2',
              // description: '32222',
              // image: 'item2.jpg',
              // tag: 'Tag 2'
              // },
              // {
              // title: 'Item 3',
              // description: '1111111',
              // image: 'item3.jpg',
              // tag: 'Tag 3'
              // }
            ],
          },
          {
            title: "历史",
            list: [
              {
                itemtype: 2,
                title: "Item 4",
                description: "1111111",
                image: "item4.jpg",
                tag: "Tag 4",
              },
              {
                itemtype: 2,
                title: "Item 5",
                description: "1111111",
                image: "item5.jpg",
                tag: "Tag 5",
              },
              {
                itemtype: 2,
                title: "Item 6",
                description: "1111111",
                image: "item6.jpg",
                tag: "Tag 6",
              },
            ],
          },
          {
            title: "告警",
            list: [
              {
                title: "Item 7",
                image: "item7.jpg",
                tag: "Tag 7",
              },
              {
                title: "Item 8",
                image: "item8.jpg",
                tag: "Tag 8",
              },
              {
                title: "Item 9",
                image: "item9.jpg",
                tag: "Tag 9",
              },
            ],
          },
          {
            title: "报表",
            list: [
              {
                title: "Item 7",
                image: "item7.jpg",
                tag: "Tag 7",
              },
              {
                title: "Item 8",
                image: "item8.jpg",
                tag: "Tag 8",
              },
              {
                title: "Item 9",
                image: "item9.jpg",
                tag: "Tag 9",
              },
            ],
          },
          {
            title: "管理",
            list: [
            ],
          },
        ],
        tableData: [
          {
            benchname: "Bench 1",
            project: "Project A",
            carline: "Carline A",
            market: "Market A",
            sw: "SW 1",
            status: "Status A",
          },
          {
            benchname: "Bench 2",
            project: "Project B",
            carline: "Carline B",
            market: "Market B",
            sw: "SW 2",
            status: "Status B",
          },
          // ...
        ],
  
        currentPage: 1,
        pageSize: 5,
        benchId: "219",
        mainSnapshot: "",
        timer: 0,
        platform: null,
        connetedBenchId: "",
        displayTapMode: false,
        controlCursorPosition: {},
        ifBmBenchTrailUpperCursorTap: false,
        benchLog: [],
        trailCursorPosition: {},
        audioName: "",
        ifBmBenchTrailUpperCursorSwipe: false,
        ifBmBenchTrailUpperCursorPress: false,
        ifBmBenchTrailUpperCursor: false,
        controlStartPoint: {},
        ifShowLogBox: false,
        filterData: {
          keyword: "",
          currentPage: 1,
          pageSize: 10,
          status: [4, 3, 5, 0, 2, 6],
          types: [],
          "basic attributes": [],
          ips: [],
          orderBy: "desc",
          orderkey: "id",
        },
        benchImgUpper: "",
        benchImgUpperMap: {},
        currentScreen: "upper",
        benchDisplayLowerVisible: false,
        benchImgLower: "",
        benchImgLowerMap: {},
        isPlaying: false,
        isRecording: false,
        loopSendAudioTime: null,
        sendAudioString: "",
        vadThreshold: 0,
        recStream: null,
        paAc: null,
        paSource: null,
        paScriptNode: null,
        sempleRateMultiple: null,
        recordSuperposeArr: [],
        sempleRateHandlingThreshold: null,
        playAudioBenchList: [],
        isConnected: false,
        currentBenchId: 0,
        gridItems: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        timerIdMap: { num: 0 },
        timerId: 0,
        autoPlanResultInterval: 0,
        remoteBenchList: [],
        waterdotrefresh: false,
        selectedBenchId: 0,
        benchDetail: {},
        mouseBenchDetail: [
          {
            title: "Item 7",
            image: "item7.jpg",
            tag: "Tag 7",
          },
          {
            title: "Item 8",
            image: "item8.jpg",
            tag: "Tag 8",
          },
          {
            title: "Item 9",
            image: "item9.jpg",
            tag: "Tag 9",
          },
        ],
        tabIndex:0,
        tabs_settings: [
          {
            title: "卡号管理",
            list: [
            ],
          },
          {
            title: "人员管理",
            list: [
              {
                itemtype: 2,
                title: "Item 4",
                description: "1111111",
                image: "item4.jpg",
                tag: "Tag 4",
              },
              {
                itemtype: 2,
                title: "Item 5",
                description: "1111111",
                image: "item5.jpg",
                tag: "Tag 5",
              },
              {
                itemtype: 2,
                title: "Item 6",
                description: "1111111",
                image: "item6.jpg",
                tag: "Tag 6",
              },
            ],
          },
          {
            title: "部门管理",
            list: [
              {
                title: "Item 7",
                image: "item7.jpg",
                tag: "Tag 7",
              },
              {
                title: "Item 8",
                image: "item8.jpg",
                tag: "Tag 8",
              },
              {
                title: "Item 9",
                image: "item9.jpg",
                tag: "Tag 9",
              },
            ],
          },
          {
            title: "设备管理",
            list: [
              {
                title: "Item 7",
                image: "item7.jpg",
                tag: "Tag 7",
              },
              {
                title: "Item 8",
                image: "item8.jpg",
                tag: "Tag 8",
              },
              {
                title: "Item 9",
                image: "item9.jpg",
                tag: "Tag 9",
              },
            ],
          },
          {
            title: "拓扑关系管理",
            list: [
              {
                title: "Item 7",
                image: "item7.jpg",
                tag: "Tag 7",
              },
              {
                title: "Item 8",
                image: "item8.jpg",
                tag: "Tag 8",
              },
              {
                title: "Item 9",
                image: "item9.jpg",
                tag: "Tag 9",
              },
            ],
          },
          {
            title: "用户管理",
            list: [
              {
                title: "Item 7",
                image: "item7.jpg",
                tag: "Tag 7",
              },
              {
                title: "Item 8",
                image: "item8.jpg",
                tag: "Tag 8",
              },
              {
                title: "Item 9",
                image: "item9.jpg",
                tag: "Tag 9",
              },
            ],
          },
          {
            title: "角色管理",
            list: [
              {
                title: "Item 7",
                image: "item7.jpg",
                tag: "Tag 7",
              },
              {
                title: "Item 8",
                image: "item8.jpg",
                tag: "Tag 8",
              },
              {
                title: "Item 9",
                image: "item9.jpg",
                tag: "Tag 9",
              },
            ],
          },
        ],
      };
    },
    computed: {
      // tabClass(){
      //     return 'ordinary';
      // },
      tabClass() {
        return this.currentBench.type == 2 ? "short" : "long";
      },
      ...mapState({
        isOpen: (state) => {
          return state.common.isOpen
        },
        mouseX: (state) => {
          return state.benchList.mouseoverx
        },
        mouseY: (state) => {
          return state.benchList.mouseovery
        },
        mouseStatus: (state) => {
          return state.benchList.mouseoverstatus
        },
        mouseBenchId: (state) => {
          return state.benchList.mouseoverbenchid
        },
        images: (state) => {
          console.log(state.benchList.benchImgList, "imageList");
          return state.benchList.benchImgList;
        },
        isOpenSquare: (state) => {
          return state.common.isOpenSquare;
        },
        isOpen3d: (state) => {
          return state.common.isOpen3d;
        },
        benchList: (state) => {
          return state.benchList.benchList;
        },
        taskList: (state) => {
          return state.taskList.taskList;
        },
        planList: (state) => {
          console.log(state.planList.planList, "planList==============");
          let planList = state.planList.planList.concat(
            state.planList.autoPlanList
          );
          planList = planList.sort((p1, p2) => p1.id - p2.id);
          return planList;
        },
        autoPlanList: (state) => {
          return state.planList.autoPlanList;
        },
        caseList: (state) => {
          return state.caseList.caseList;
        },
        autoCaseList: (state) => {
          return state.caseList.autoCaseList;
        },
        issueList: (state) => {
          return state.issueList.issueList;
        },
        autoTaskStatus: (state) => {
          return state.caseList.autoTaskStatusMap[state.caseList.currentTaskIndex];
        },
        filterBenchList: (state) => {
          return state.benchList.filterBenchList.sort((a, b) => {
            let i = 0;
            let j = 0;
            for (let m = 0; m < a.MU_SW.length; m++) {
              i += a.MU_SW.charCodeAt(m);
            }
            for (let n = 0; n < b.MU_SW.length; n++) {
              j += b.MU_SW.charCodeAt(n);
            }
            return i - j;
          });
        },
        autoTaskStatusMap: (state) => {
          return state.caseList.autoTaskStatusMap
        },
        autoTaskPercentMap: (state) => {
          return state.caseList.autoTaskPercentMap
        }
      }),
    },
    created() {
      return;
      // uwbMain("player", window.innerWidth, window.innerHeight, "panorama");
      ws.open().then((res) => {
        // console.log("res", res);
      });
      window.handleListClick = this.handleListClick;
      window.handleBenchClick = this.handleBenchClick;
      window.handleClickTask = this.handleClickTask.bind(this);
      window.selectRowPlan = this.selectRowPlan.bind(this);
      window.selectRowCase = this.selectRowCase.bind(this);
      window.selectRowIssue = this.selectRowIssue.bind(this);
      window.handleListDbClick = this.handleListDbClick;
      window.showBenchPos = this.showBenchPos;
      window.handleClickImg = this.handleClickImg;
      let that = this;
      window.bmMapItemSelect = this.bmMapItemSelect.bind(this);
      window.bmMapItemUnSelect = this.bmMapItemUnSelect.bind(this);
      window.handleClickIssue = this.handleClickIssue.bind(this);
      window.selectBench = this.selectBench.bind(this);
      that.$store.dispatch("taskList/clearTaskList");
      that.$store.dispatch("taskList/fetchTaskList", {
        page_num: 1,
        page_size: 1000,
      });
  
      window.bmMapItemActivate = this.bmMapItemActivate;
      // 调用定时器方法，返回定时器id，用于按条件清空
      that.timerId = that.myInterval((count) => {
        // console.log(count)
        this.$store.dispatch("benchList/fetchBenchList");
        if (!this.waterdotrefresh) {
          this.waterdotrefresh = true;
          window.getsqlData(window.sdkInstance, window.uwbInstance,true)
        }
        this.refreshBenchStatus()
        if (count > 30000) {
          console.log("end");
          that.clearMyInterval(that.timerId);
        }
      }, 10000);
  
      setTimeout(() => {
        this.$store.dispatch("benchList/fetchBenchList");
        if (!this.waterdotrefresh) {
          window.getsqlData(window.sdkInstance, window.uwbInstance,false)
        }
        this.refreshBenchStatus()
      },2000)
  
      this.$store.dispatch("issueList/fetchIssueList", {
        bench_id: null,
        page_num: 1,
        page_size: 10,
        processor: 0,
        ticket_status: 0,
        ticket_type: 0,
      });
    },
    async mounted() {
      return;
      that = this;
      //this.getBenchList();
      console.log(this.benchList, "benchList");
      this.tabs[0].list = this.benchList;
      this.tabs[1].list = this.taskList;
      this.tabs[2].list = this.issueList;
      let mapDom = document.getElementsByClassName("ordinary-map")[0];
      let style = getComputedStyle(mapDom);
      let width = parseFloat(style.width);
      let height = parseFloat(style.height);
      let ratio = 1.8;
      window.renderWidth = width * ratio;
      window.renderHeight = height * ratio;
      sessionStorage.setItem('3dMode', 0)
      debugger
      uwbMain('player', width * ratio, height * ratio, "floorplan");
      // window.sdkInstance.sceneRenderer.updateScreenSize(width * ratio, height * ratio);
      setTimeout(() => {
        var element = document.getElementById('house-player');
        element.style.marginLeft = ((width - (width * ratio)) / 2) + 'px';
        element.style.marginTop = ((height - (height * ratio)) / 2) + 'px';
      }, 3500)
  
      setTimeout(() => {
        let self = this;
  
        var objRBL = this.remoteBenchList;
        if (objRBL) {
          console.log("objRBL", objRBL);
          wsArrayLength = objRBL.length;
          for (var iW = 0; iW < objRBL.length; iW++) {
            var i = JSON.parse(JSON.stringify(iW));
            let benchId = JSON.parse(JSON.stringify(objRBL[i]));
            setTimeout(() => {
              console.log("connect bench", benchId);
              wsArray[i]
                ?.connectBench({ bench_id: String(benchId) })
                .then((res) => {
                  console.log("connect bench success", benchId);
                  self.getBenchImage(benchId, 1, wsArray[i], () => {});
                })
                .catch((err) => {
                  console.log("connect bench failed", benchId);
                  this.$message({
                    message: "This bench is offline",
                    // message: "",
                    type: "warning",
                  });
                });
            }, iW * 2000);
          }
        }
      }, 3000);
  
      bus.on("newLog", (param) => {
        if (param.action) {
          this.benchLog.unshift(param);
          // document.getElementsByClassName("bmLogBottom")[0].scrollIntoView();
          if (Object.keys(param.action).length != 0) {
            // console.log("actionType", param.action.actionType);
            let position = param.action.pos;
            // console.log("position", position);
            if (param.action.actionType == "swipe on") {
              this.ifBmBenchTrailUpperCursorSwipe = true;
              this.trailCursorPosition.left = (position[0] / 1540) * 100;
              this.trailCursorPosition.top = (position[1] / 720) * 100;
              setTimeout(() => {
                this.trailCursorPosition.left =
                  ((position[0] + position[2]) / 1540) * 100;
                this.trailCursorPosition.top =
                  ((position[1] + position[3]) / 720) * 100;
              }, 800);
              setTimeout(() => {
                this.ifBmBenchTrailUpperCursorSwipe = false;
              }, 2000);
            } else if (param.action.actionType == "tap on") {
              this.ifBmBenchTrailUpperCursorTap = true;
              setTimeout(() => {
                this.ifBmBenchTrailUpperCursorTap = false;
              }, 1500);
              this.trailCursorPosition.left =
                "calc(" + ((position[0] * 2) / 1540) * 100 + "% - 1vh)";
              this.trailCursorPosition.top =
                "calc(" + ((position[1] * 2) / 720) * 100 + "% - 1vh)";
            } else if (param.action.actionType == "longPress on") {
              this.ifBmBenchTrailUpperCursorPress = true;
              setTimeout(() => {
                this.ifBmBenchTrailUpperCursorPress = false;
              }, 1500);
              this.trailCursorPosition.left = ((position[0] * 2) / 1540) * 100;
              this.trailCursorPosition.top = ((position[1] * 2) / 720) * 100;
            } else if (param.action.actionType == "audio") {
              // console.log("newLog", param);
              let fileName = param.action.file_name;
              console.log("audiofileName", fileName);
              this.audioName = fileName;
              bus.emit("planAudioEmit");
            }
          }
        }
  
        if (this.benchLog.length > 100) {
          this.benchLog.pop();
        }
      });
      bus.on("switchScreen", (param) => {
        this.currentScreen = param.currentScreen;
      });
      bus.on("goHome", () => {
        this.isConnected = false;
        this.$store.dispatch("common/setSquareStatus", false);
        this.$store.dispatch("common/setConnectedStatus", false);
      });
  
      
      {
        this.autoPlanResultInterval = setInterval(() => {
          let autoCurrentTaskData = window.localStorage.getItem("autoCurrentTaskData");
          let autoCurrentTaskName = window.localStorage.getItem("autoCurrentTaskName");
          autoCurrentTaskData = JSON.parse(autoCurrentTaskData);
          autoCurrentTaskName = JSON.parse(autoCurrentTaskName);
          if (autoCurrentTaskData) {
            for (let planId in autoCurrentTaskData) {
              let planExecId = autoCurrentTaskData[planId];
              if (autoCurrentTaskName) {
                let planName = autoCurrentTaskName[planId];
                if (planName) {
                  this.$store.dispatch("caseList/fetchAutoCaseList", {
                    planId: planId,
                    planName: planName
                  });
                }
              }
              
              this.$store.dispatch("caseList/setPlanExecId", planExecId);
              this.$store.dispatch('caseList/getAutoPlanResult',{planId, planExecId});
            }
          }
        }, 5000);
      }
    },
    methods: {
      changeCurrentBench(benchId) {
        this.isDetailVisible = false;
        if (this.isOpen3d) {
          this.$store.dispatch("common/toggle3dStatus");
        }
        this.selectBench(benchId);
      },
      myInterval(callback, interval) {
        // 每设置一次定时器，num++ 代表系统中有num个自定义的定时器
        this.timerIdMap.num++;
        // 第 num 个定时器的id
        let intervalId = "id" + this.timerIdMap.num;
        this.timerIdMap[intervalId] = true;
        // 循环次数
        let count = 0;
  
        let startTime = Date.now();
        let loop = () => {
          // 系统map中不存在这个id，就停止循环
          if (!this.timerIdMap[intervalId]) {
            return;
          }
          if (Date.now() > startTime + interval * (count + 1)) {
            count++;
            callback(count);
          }
          window.requestAnimationFrame(loop);
        };
        loop();
        return intervalId;
      },
      // 清空定时器，删除全局的定时器id map
      clearMyInterval(intervalId) {
        delete this.timerIdMap[intervalId];
      },
      turnToNextManualCase() {},
      clickBackToTaskList() {
        this.isShowPlanList = false;
        this.isShowTaskList = true;
        // this.planList = [];
      },
      clickBackToCaseList() {
        this.isShowCaseCommit = false;
        this.isShowCaseList = true;
      },
      submitManualCase(item) {
        console.log(this.currentCase, "manualcasedetail============");
        this.isShowCaseCommit = true;
        this.isShowCaseDetail = false;
      },
      clickBackToIssueList() {
        this.isShowIssueList = true;
        this.isShowIssueDetail = false;
      },
      clickBackToPlan() {
        this.isShowCaseDetail = false;
        if (sessionStorage.getItem("autoCase") == 0) {
          this.isShowCaseList = true;
        } else {
          this.isShowAutoCaseList = true;
        }
      },
      submitAutoCase() {
        if (this.autoTaskStatus == 'waiting' || this.autoTaskStatus == 'running') {
          this.$store.dispatch('caseList/cancelPlan');
          this.clickBackToTaskList()
          this.isShowAutoCaseList = false;
          return
        }
        this.isShowAutoCaseList = false;
        this.isShowAutoCaseCommit = true;
      },
      clickBackToAutoCaseList() {
        this.isShowAutoCaseList = true;
        this.isShowAutoCaseCommit = false;
      },
      tabIndexUpdate(newValue) {
        this.tabIndex = newValue;
      },
      selectRowPlan(id, auto, name) {
        console.log(id, "selectrowdata");
        debugger
        if (!auto || auto == "undefined" || auto == "false") {
          this.currentPlanId = id;
          this.currentPlanName = name;
          this.$store.dispatch("caseList/fetchCaseList", {
            uuid: id,
            page_num: 1,
            page_size: 100,
          });
          this.isShowCaseList = true;
          sessionStorage.setItem("autoCase", 0);
          this.$store.dispatch("caseList/setCurrentTask", id);
        } else {
          if (id == 109) id = 222;
          this.currentPlanId = id;
          this.currentPlanName = name;
          this.$store.dispatch("caseList/setCurrentPlanId", id);
          this.$store.dispatch("caseList/fetchAutoCaseList", {
            planId: id,
            planName: name
          });
          this.isShowAutoCaseList = true;
          this.$store.dispatch("caseList/setCurrentTask", id);
          sessionStorage.setItem("autoCase", 1);
        }
  
        this.$store.dispatch("common/fetchOptionList");
  
        this.isShowPlanList = false;
  
        this.planName = name;
      },
      selectRowCase(row) {
        this.isShowCaseList = false;
        this.isShowCaseDetail = true;
  
        this.caseName = row.m_id;
        this.caseProject = row.precondition;
        //this.caseActive =,
        this.caseFunction = row.action;
        this.caseSubFunction = row.expectation;
        this.caseMarket = row.market;
        this.caseLanguage = row.language;
        this.currentCase = row;
  
        for (let i = 0; i < this.caseList.length; i++) {
          if (this.caseList[i].case_no == row.case_no) {
            this.currentCaseIndex = i;
            break;
          }
        }
        //this.caseContent =,
      },
      turnNextCase() {
        this.currentCaseIndex++;
        if (this.currentCaseIndex == this.caseList.length) {
          this.isShowCaseList = true;
          this.isShowCaseCommit = false;
        } else {
          this.currentCase = this.caseList[this.currentCaseIndex];
          this.caseName = this.currentCase.m_id;
          this.caseProject = this.currentCase.precondition;
          //this.caseActive =,
          this.caseFunction = this.currentCase.action;
          this.caseSubFunction = this.currentCase.expectation;
          this.caseMarket = this.currentCase.market;
          this.caseLanguage = this.currentCase.language;
          this.isShowCaseCommit = false;
          this.isShowCaseDetail = true;
        }
      },
      selectRowIssue(id) {
        let row = this.issueList.find((i) => i.id == id);
        this.isShowIssueList = false;
        this.isShowIssueDetail = true;
        this.currentIssue = row;
        console.log(row, "==============issue============");
      },
      clickBackToPlanList() {
        this.isShowPlanList = true;
        this.isShowCaseList = false;
        this.caseList = [];
      },
      clickBackToAutoPlanList() {
        this.isShowPlanList = true;
        this.isShowAutoCaseList = false;
        this.$store.dispatch('caseList/clearAutoCaseList');
      },
      bmMapItemUnSelect() {
        let items = document.getElementsByClassName("item-box");
        for (var index = 0; index < items.length; index++) {
          items[index].style.background = "#00000032";
          let title = items[index].getElementsByClassName("item-title");
          console.log("textContent", title[0].textContent);
          let itemOther = this.benchList.find(
            (b) => parseInt(b.id) == parseInt(title[0].textContent)
          );
          itemOther.selected = false;
          itemOther.scale = 1;
        }
      },
      onFocus() {
        this.$store.dispatch("common/setIsOpen", true);
        this.$store.dispatch('benchList/filterBenchList', {type: 'status', value: 'Status'});
        this.$store.dispatch('benchList/filterBenchList', {type: 'project', value: 'Project'});
        this.$store.dispatch('benchList/filterBenchList', {type: 'carline', value: 'Carline'});
        this.$store.dispatch('benchList/filterBenchList', {type: 'variant', value: 'Variant'});
        this.$store.dispatch('benchList/filterBenchList', {type: 'cluster', value: 'Cluster'});
        this.$store.dispatch('benchList/filterBenchList', {type: 'market', value: 'Market'});
        this.$store.dispatch('benchList/setFilterBenchFlag', true);
      },
      onBlur(e) {
        console.log("=====----====", e.target.classList);
        if (
          Array.prototype.indexOf.call(e.target.classList, "ordinary-left") > -1
        ) {
          this.$store.dispatch("common/setIsOpen", false);
        }
      },
      onInput(value) {
        this.inputValue = value;
        this.$store.dispatch('benchList/filterBenchList', {type: 'name', value: value});
        this.$store.dispatch('benchList/setFilterBenchFlag', true);
      },
      onClickOutside() {
        if (
          this.$refs.searchbar.$el.contains(event.target) ||
          this.$refs.dropdown.$el.contains(event.target)
        ) {
          return;
        }
        this.$store.dispatch("common/setIsOpen", false);
      },
      handleClickTask(taskId, auto) {
        let task = that.taskList.find((t) => t.id == taskId);
        // 获取手动测试plan列表
        let manualList = task.plan_list[1];
        // 获取自动测试plan列表
        let autoList = task.plan_list[2];
        autoList.forEach((at) => {
          that.$store.dispatch("planList/fetchPlanDetail", {
            planId: at < 100 ? at + 101 : at,
          });
        });
        that.isShowPlanList = true;
        that.isShowTaskList = false;
        this.$store.commit("planList/setAutoPlanList", autoList);
        this.$store.commit("planList/setPlanList", manualList);
        that.taskName = task.name;
        this.$nextTick(() => {
          that.$store.dispatch("planList/clearPlanList");
          that.$store.dispatch("planList/fetchPlanList", {
            page_num: 1,
            page_size: 10000,
          });
        });
        console.log(task, "任务详情");
      },
      handleClickIssue(issueId) {
        console.log(issueId, "issueid");
      },
      showBenchPos(benchList) {
        console.log("benchList", benchList);
        for (var item of benchList) {
          var currentBench = this.benchList.find((b) => b.id == item.benchId);
          if (currentBench) {
            //console.log('currentBench',currentBench);
            currentBench.left = item.x - 548 + 48;
            currentBench.top = item.y - 137 - 150 + 11;
            currentBench.benchId = item.benchId;
            currentBench.benchType = item.benchType;
            console.log('item.benchImg',item.benchImg);
            currentBench.image = require("../../assets/bench_img/"+item.benchImg);
            if (currentBench.benchType == 2) {
              //currentBench.image = require("../../assets/mechine2.png");
            } else {
              //currentBench.image = require("../../assets/mechine.png");
            }
          }
        }
        this.renderBenchList = false;
        setTimeout(() => {
          this.renderBenchList = true;
        }, 10);
      },
      planBack() {
        that.isShowPlanList = false;
        that.isShowTaskList = true;
      },
      taskRender(item) {
        return `<div class="item-box" onClick="handleClickTask('${
          item.uuid || item.id
        }', '${item.auto}')">
                <div class="left">
                    <div style="">
                      <div class="item-title">${item.name}</div>
                      <div class="item-description">${item.description}</div>
                    </div>
                    <div class="item-time">
                        <div class="time">${item.start_time}</div>
                        to
                        <div class="time"> ${item.end_time}</div>
                    </div>
                    <div class="item-tag">
                        <div class="tag">${item.processor_name}</div>
                        <div class="tag">${item.sw}</div>
                    </div>
                </div>
                <div class="taskBtn" onClick="handleClickTask('${
                  item.uuid || item.id
                }', '${item.auto}')">To Do</div>
            </div>`;
      },
      planRender(item) {
        console.log(item, "plan", this.autoTaskStatusMap[item.id]);
        
        return `<div onClick="selectRowPlan('${item.uuid || item.id}', '${
          item.auto
        }', '${item.name}')" class="item-box" style="display:${
          !item.auto && !item.uuid ? "none" : "flex"
        };align-items: top; justify-content: space-between;color: #fff;">
                <div class="left">
                    <div style="display:flex;align-items: center;">
                      <div class="item-title">${item.name}</div>
                      <div class="process-percent" style="margin-left: 10px; width: 80px">
                        <div style="width: ${this.autoTaskPercentMap[item.id] || 0}%; height: 10px; border-radius: 10px;background-image: linear-gradient(-90deg,transparent 0px,#95d475 50px,#95d475)"  }"></div>
                      </div>
                      <div style="width:40px;color:#fff;font-size: 12px;padding-left: 3px">${Number(this.autoTaskPercentMap[item.id] || 0).toFixed(1) || 0}%</div>
                      <div class="task-auto" style="display:${
                        item.auto ? "block" : "none"
                      }">Auto</div>
                    </div>
                </div>
                <div style="width: unset; padding: 0 10px;" class="taskBtn ${this.autoTaskStatusMap[item.id] || 'ready'}">${this.autoTaskStatusMap[item.id] || 'ready'}</div>
            </div>`;
      },
      issueRender(item) {
        return `<div class="item-box" style="display:flex; align-items: center;justify-content: space-between;" onClick="selectRowIssue('${
          item.uuid || item.id
        }')">
                <div class="left">
                    <div style="display:flex;align-items: center;">
                      <div class="item-title" style="width: 20vw; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;">${item.ticket_title}</div>
                      <div class="${"status" + item.ticket_status}"></div>
                    </div>
                    <div class="item-tag">
                        <div class="tag">${item.creator}</div>
                        <div class="tag">${item.create_time}</div>
                    </div>
                </div>
                <div class="${
                  item.checked ? "el-icon-circle-check" : "uncheck"
                }"></div>
            </div>`;
      },
      closeDetail() {
        this.isDetailVisible = false;
      },
      rowClassName() {
        return "row-class";
      },
      getImgList(objRBL) {
        console.log("zmg3", objRBL);
        let benchId = objRBL.pop();
        if (benchId == null) {
          console.log("zmg2");
          setTimeout(() => {
            let href = window.location.href;
            if (href.indexOf("benchid=") != -1) {
              let benchid = href.substring(href.indexOf("benchid=") + 8);
              let remoteBenchList = this.remoteBenchList;
              console.log("benchid", benchid);
              console.log(
                "item == benchId",
                remoteBenchList.find((item) => item == benchid)
              );
              if (remoteBenchList.find((item) => item == benchid)) {
                this.selectBench(parseInt(benchid));
              }
            }
          }, 200);
          return;
        }
        let self = this;
  
        console.log("benchId", benchId);
        ws.connectBench({ bench_id: String(benchId) })
          .then((res) => {
            ws.getImage(String(benchId), 1).then((res) => {
              self.$store.dispatch("benchList/setBenchImgList", {
                benchId,
                img: res.data.data,
              });
              self.getImgList(objRBL);
            });
          })
          .catch((err) => {
            console.log("connect bench failed", benchId);
            self.$message({
              message: "This bench is offline",
              // message: "",
              type: "warning",
            });
          });
      },
      gotoGrid() {
        this.$router.push({
          path: "/squarePage",
        });
      },
      itemRender(item) {
        // console.log(item, 'bench---item')
  
        //item.image = require("../../assets/mechine.png");
        //item.image = require("../../assets/bench_img/"+item.benchImg);
        /*return `
                    <div class="item-box">
                        <div class="item-image"><img src="${item.image}" alt="${item.title}"></div>
                        <div class="item-right">
                            <div class="item-title">
                                <span onClick="handleListClick(${item.id})">${item.id}</span>
                                <span onClick="selectBench(${item.id})" class="el-icon-s-platform ${item.status}"></span>
                            </div>
                            <div class="item-text">
                              <div class="item-description">Automation Lab-7E</div>
                                <div class="item-description">${item.name}</div>
                                <div class="item-tag">
                                    <div class="tag">${item.Market}</div>
                                    <div class="tag">${item.Platform}</div>
                                    <div class="tag">${item.Project}</div>
                                    <div class="tag">${item.Carline}</div>
                                    <div class="tag">${item.Cluster}</div>
                                </div>
                                <div class="item-tag">
                                    <div class="tag">${item.MU_SW}</div>
                                    <div class="tag">${item.Variant}</div>
                                    <div class="tag">${item.ip}</div>
                                </div>
                            </div>
                        </div>
                    </div>`;*/
        return `
                    <div onDblClick="handleListDbClick(${item.id})" data-index="${item.id}" onClick="handleListClick(${item.id})" class="item-box">
                    <div class="item-image"><img src="${item.image}" alt="${item.title}"></div>
                    <div class="item-right">
                        <div class="item-text">
                            <div class="item-title">${item.name}
                              <span onClick="selectBench(${item.id})" class="el-icon-monitor ${item.status}"></span>
                            </div>
                            <div class="item-description">Automation Lab-7E</div>
                            <div class="item-tag">
                                <div class="tag" title="Market">${item.Market}</div>
                                <div class="tag" title="Platform">${item.Platform}</div>
                                <div class="tag" title="Project">${item.Project}</div>
                                <div class="tag" title="Carline">${item.Carline}</div>
                                <div class="tag" title="Cluster">${item.Cluster}</div>
                                <div class="tag" title="MU_SW">${item.MU_SW}</div>
                                <div class="tag" title="Variant">${item.Variant}</div>
                            </div>
                        </div>
                    </div>
                </div>`;
      },
      handleImageClick(index) {
        this.selectBench(
          parseInt(this.images[index + 5 * (this.currentPage - 1)].alt)
        );
        this.handleListClick(parseInt(this.images[index + 5 * (this.currentPage - 1)].alt))
      },
      prevPage() {
        if (this.currentPage > 1) {
          this.currentPage--;
        }
      },
      nextPage() {
        if (this.currentPage < Math.ceil(this.images.length / this.pageSize)) {
          this.currentPage++;
        }
      },
      handleInfoDblClick(benchId) {
        console.log("handleInfoDblClick", benchId);
        this.currentBench = this.benchList.find((b) => b.id == benchId);
  
        this.isDetailVisible = true;
      },
      getImage() {},
      dataCallBack(data) {
        switch (data.method) {
          case "get_image":
            this.handleGetImageData(data.data.data);
            break;
        }
        console.log(data);
      },
      handleGetImageData(data) {
        this.mainSnapshot = "data:image/jpeg;base64," + data;
      },
      selectBench(benchId) {
        // 全屏选择bench
        this.saveSelectedBenchToLs(benchId);
  
        var i = JSON.parse(JSON.stringify(wsArrayLength));
        let self = this;
        wsArrayLength++;
        setTimeout(() => {
          console.log("connect bench", benchId);
          wsArray[i]
            ?.connectBench({ bench_id: String(benchId) })
            .then((res) => {
              console.log("connect bench success", benchId);
              self.getBenchImage(benchId, 1, wsArray[i], () => {});
              this.currentBench = this.benchList.find((b) => b.id == benchId) || {};
              this.remoteBenchList.push(benchId)
              this.$store.dispatch("common/setGoHome", false);
              let nList = Array.from(new Set(this.remoteBenchList));
              let len = nList.length;
              if (len > 9) {
                setTimeout(() => {
                  let square = document.querySelector('.square-map');
                  if (square) {
                    square.scrollTo(0, 10000)
                  }
                }, 1000)
              }
            })
            .catch((err) => {
              console.log("connect bench failed", benchId);
              this.$message({
                message: "This bench is offline",
                // message: "",
                type: "warning",
              });
            });
        }, 200);
        // 非全屏选择bench
        var objRBL = this.remoteBenchList;
        if (objRBL && objRBL.length > 0) {
          var bExist = false;
          for (var i = 0; i < objRBL.length; i++) {
            if (objRBL[i] == benchId) {
              bExist = true;
            } else {
            }
          }
          if (bExist == false) {
            objRBL.push(benchId);
            this.remoteBenchList.push(benchId)
            this.$store.dispatch('benchList/addRemoteBenchList', benchId);
          }
        } else {
          var rml = [];
          rml.push(benchId);
          this.remoteBenchList.push(benchId)
          this.$store.dispatch('benchList/addRemoteBenchList', benchId);
        }
  
        console.log("benchList", this.benchList);
        let bench = this.benchList.find((b) => b.id == benchId);
        console.log("selectedBench", bench);
        if (this.previousSelectedBenchList.length) {
          this.selectedBenchList = JSON.parse(
            JSON.stringify(this.previousSelectedBenchList)
          );
        }
        this.previousSelectedBenchList = [];
        this.platform = null;
        this.benchList.forEach((b) => (b.selected = false));
        bench.selected = !bench.selected;
        if (bench.selected) {
          this.currentBench = bench;
          bench.benchId = "'" + bench.benchId + "'";
          this.selectedBenchList.push(bench);
          console.log("selected", this.selectedBenchList);
          // this.images = this.selectedBenchList.map((s) => {
          //   return {
          //     url: "",
          //     alt: s.name,
          //   };
          // });
        } else {
          for (let i in this.selectedBenchList) {
            if (this.selectedBenchList[i].id == bench.id) {
              this.selectedBenchList.splice(i, 1);
              // this.images = this.selectedBenchList.map((s) => {
              //   return {
              //     url: "",
              //     alt: s.name,
              //   };
              // });
              break;
            }
          }
        }
        if (this.selectedBenchList.length == 0) {
          nextTick(() => {
            self.initBmInfoNsChart();
          });
        } else {
          self.bmMapItemActivate(bench.id, wsArray[i]);
        }
      },
      bmMapItemActivate(benchId, ws) {
        let self = this;
        if (this.selectedBenchList.length == 0) {
          this.$message({
            message: "Please select a bench to activate.",
            // message: "",
            type: "warning",
          });
          return;
        }
        this.selectedBenchList = [this.selectedBenchList[0]];
        console.log("selectedBenchList[0]", this.selectedBenchList);
        let key = 0;
        for (let i in this.benchList) {
          this.benchList[i].selected = false;
        }
        for (let i in this.benchList) {
          if (this.benchList[i].id == benchId) {
            this.benchList[i].selected = true;
            key = i;
            break;
          }
        }
        this.benchList[key].acitveAnimation = true;
        //let benchId = this.benchList[key].benchId;
        this.benchList[key].benchId = benchId;
        let screenType = this.benchList[key].Display;
        this.connetedBenchId = String(benchId);
        // this.connectedBenchData = this.benchList[key];
        setTimeout(() => {
          console.log("connect bench", benchId);
          ws.connectBench({ bench_id: String(benchId) })
            .then((res) => {
              self.isConnected = true;
              this.$store.dispatch("common/setConnectedStatus", true);
              console.log("connect bench success");
              this.currentScreen = "upper";
              self.setSendAudioBus(benchId);
              self.getBenchImage(benchId, 1, ws, () => {
                if (this.benchList[key].acitveAnimation) {
                  this.benchList[key].acitveAnimation = false;
                  this.benchDisplayVisible = true;
                }
              });
              if (screenType == "DUO") {
                self.getBenchImage(String(benchId), 2, ws, () => {
                  if (this.connetedBenchId) {
                    this.benchDisplayLowerVisible = true;
                  }
                });
              } else {
                this.benchDisplayLowerVisible = false;
              }
            })
            .catch((err) => {
              console.log("connect bench failed");
              this.benchList[key].acitveAnimation = false;
              this.$message({
                message: "This bench is offline",
                // message: "",
                type: "warning",
              });
            });
        }, 300);
      },
      switchScreen() {
        if (this.currentScreen == "upper") {
          this.currentScreen = "lower";
        } else {
          this.currentScreen = "upper";
        }
        console.log("this.currentScreen", this.currentScreen);
      },
      singleFingerTouch(id, x, y, screenType) {
        let self = this;
        ws.singleFingerTouch(id, x, y, screenType).then((res) => {});
      },
      singleFingerDrag(id, x1, y1, x2, y2, screenType) {
        let self = this;
        ws.singleFingerDrag(id, x1, y1, x2, y2, screenType).then((res) => {});
      },
      singleFingerLongTouch(id, x, y, duration, screenType) {
        let self = this;
        ws.singleFingerLongTouch(id, x, y, duration, screenType).then(
          (res) => {}
        );
      },
      controlCursorMouseDown(e) {
        let self = this;
        if (this.displayTapMode) {
          // console.log("e", e);
          this.controlCursorPosition.left = e.offsetX;
          this.controlCursorPosition.top = e.offsetY;
          this.controlStartPoint.x = e.offsetX;
          this.controlStartPoint.y = e.offsetY;
          this.controlStartPoint.time = Date.now();
          this.ifBmBenchTrailUpperCursor = true;
        }
      },
  
      controlCursorMouseMove(e) {
        let self = this;
        if (this.displayTapMode && this.ifBmBenchTrailUpperCursor) {
          this.controlCursorPosition.left = e.offsetX;
          this.controlCursorPosition.top = e.offsetY;
        }
      },
  
      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);
        if (this.displayTapMode) {
          let width = this.$refs.bmBenchRef.width;
          let height = this.$refs.bmBenchRef.height;
  
          let offsetX = e.offsetX;
          let offsetY = e.offsetY;
  
          let screenWidth = this.currentScreen == "upper" ? 1540 : 1280;
          let screenHeight = this.currentScreen == "upper" ? 720 : 720;
  
          let x = Math.round(screenWidth * (offsetX / width));
          let y = Math.round(screenHeight * (offsetY / height));
  
          let x1 = 0;
          let y1 = 0;
          if (startPoint != {}) {
            x1 = Math.round(screenWidth * (startPoint.x / width));
            y1 = Math.round(screenHeight * (startPoint.y / height));
          }
  
          // console.log("x", x);
          // console.log("y", y);
  
          // console.log("x1", x1);
          // console.log("y1", y1);
          let operationDesc = "";
          if (operation == "tap") {
            console.log("selected", this.connetedBenchId, x, y);
            self.singleFingerTouch(this.connetedBenchId, x, y, screenType);
            // tap on lower x: 48 y: 292
            operationDesc =
              "tap on " +
              (screenType == 1 ? "upper " : "lower ") +
              ("x: " + x + " y: " + y);
          } else if (operation == "swipe") {
            self.singleFingerDrag(this.connetedBenchId, x1, y1, x, y, screenType);
            operationDesc =
              "swipe on " +
              (screenType == 1 ? "upper " : "lower ") +
              ("x1: " + x1 + " y1: " + y1 + " x: " + x + " y: " + y);
          } else if (operation == "longPress") {
            self.singleFingerLongTouch(
              this.connetedBenchId,
              x,
              y,
              Date.now() - startPoint.time,
              screenType
            );
            operationDesc =
              "longPress on " +
              (screenType == 1 ? "upper " : "lower ") +
              ("x: " + x + " y: " + y);
          }
          this.benchLog.push({
            bench_id: this.connetedBenchId,
            data: operationDesc,
            levelStr: "DEBUG",
            startTime: self.getNowDate(),
          });
        }
      },
      getNowDate() {
        var myDate = new Date();
        var year = myDate.getFullYear(); //获取当前年
        var mon = myDate.getMonth() + 1; //获取当前月
        var date = myDate.getDate(); //获取当前日
        var hours = myDate.getHours(); //获取当前小时
        var minutes = myDate.getMinutes(); //获取当前分钟
        var seconds = myDate.getSeconds(); //获取当前秒
        var now =
          year +
          "-" +
          mon +
          "-" +
          date +
          "T" +
          hours +
          ":" +
          minutes +
          ":" +
          seconds;
        return now;
      },
      initBmInfoNsChart() {
        let self = this;
        let seriesData = [0, 0, 0];
        for (let i in this.benchList) {
          if (this.benchList[i].status == 5 || this.benchList[i].status == 6) {
            seriesData[1]++;
          } else if (
            this.benchList[i].status == 2 ||
            this.benchList[i].status == 3
          ) {
            seriesData[2]++;
          } else {
            seriesData[0]++;
          }
        }
        console.log("seriesData", seriesData);
        var option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: 0,
            right: "20",
            bottom: 0,
            top: 0,
            containLabel: true,
          },
          xAxis: {
            type: "value",
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            // axisLine: {
            //   show: false,
            // },
            // axisTick: {
            //   show: false, //刻度线
            // },
          },
          yAxis: {
            type: "category",
            data: ["Offline", "Occupied", "Ready"],
            axisLine: {
              show: false,
              lineStyle: {
                color: "#7F7F7F",
              },
            },
            axisTick: {
              show: false, //刻度线
            },
            // axisLine: {
            // },
          },
          series: [
            {
              type: "bar",
              barWidth: "50%",
              data: seriesData,
              itemStyle: {
                color: function (params) {
                  // 给出颜色组
                  var colorList = ["#b1b3b8", "#79bbff", "#95d475"];
                  return colorList[params.dataIndex];
                },
              },
              showBackground: false,
              backgroundStyle: {
                color: "rgba(180, 180, 180, 0.2)",
              },
              label: {
                show: true,
                position: "right",
                color: "#7F7F7F",
              },
            },
          ],
        };
        bmInfoNsChartStorage = echarts.init(
          document.getElementsByClassName("bmInfoNsChart")[0]
        );
        bmInfoNsChartStorage.setOption(option);
      },
  
      backToMap() {
        let self = this;
        ws.unsubscribeBenchStatus({ bench_id: this.connetedBenchId }).then(
          (res) => {
            console.log("unsubscribeBenchStatus", res);
          }
        );
        this.connetedBenchId = "";
        setTimeout(() => {
          this.benchDisplayVisible = false;
          this.ifShowLogBox = false;
        }, 600);
      },
  
      tagSearch(field, value) {
        let self = this;
        this.selectedBenchList = [];
        for (let i in this.benchList) {
          this.benchList[i].selected = false;
          if (this.benchList[i][field] == value) {
            this.benchList[i].selected = true;
            this.benchList[i].benchId = "'" + this.benchList[i].benchId + "'";
            this.selectedBenchList.push(this.benchList[i]);
            //   this.images = this.selectedBenchList.map((s) => {
            //     return {
            //       url: "",
            //       alt: s.name,
            //     };
            //   });
          }
        }
      },
  
      selectAllBench() {
        let self = this;
        console.log('this.benchList===', this.benchList.length)
        if (this.selectedBenchList.length == this.benchList.length) {
          this.selectedBenchList = [];
          this.previousSelectedBenchList = [];
          for (let i in this.benchList) {
            this.benchList[i].selected = false;
          }
          self.nextTick(() => {
            self.initBmInfoNsChart();
          });
        } else {
          this.selectedBenchList = [];
          for (let i in this.benchList) {
            this.benchList[i].selected = true;
            this.selectedBenchList.push(this.benchList[i]);
            //   this.images = this.selectedBenchList.map((s) => {
            //     return {
            //       url: "",
            //       alt: s.name,
            //     };
            //   });
          }
        }
      },
      tapModeControl() {
        this.displayTapMode = !this.displayTapMode;
      },
      getBenchDetail(id, index) {
        let self = this;
        let getBenchParam = { id };
        srv
          .getBenchDetail(getBenchParam)
          .then((res) => {
            // console.log("res", res);
            this.benchList[index].status = res.data.data.status;
          })
          .catch((err) => {
            console.error(err);
          });
      },
      showLogBox() {
        let self = this;
        if (this.ifShowLogBox) {
          ws.unsubscribeBenchStatus({ bench_id: this.connetedBenchId }).then(
            (res) => {
              console.log("unsubscribeBenchStatus", res);
            }
          );
        } else {
          ws.subscribeBenchStatus({ bench_id: this.connetedBenchId }).then(
            (res) => {
              console.log("subscribeBenchStatus", res);
            }
          );
        }
        this.benchLog = [];
        this.ifShowLogBox = !this.ifShowLogBox;
      },
      connectAudioDevice(type) {
        let self = this;
        ws.connect_audio_device({
          benchId: String(this.connetedBenchId),
        }).then(
          (res) => {
            console.log("connect_audio_device_res", res);
            if (type == "playAudio") {
              this.isRecording = !this.isRecording;
              self.recordAudio();
            } else if (type == "collectAudio") {
              self.collectAudio();
            }
          },
          (rej) => {}
        );
      },
      recordAudio(data) {
        let self = this;
        // console.log("selectedBenchList.value[0]", this.selectedBenchList[0]);
        let channel = 1;
  
        this.vadThreshold = 0;
        if (this.isRecording) {
          this.playAudioBenchList.push(this.connetedBenchId);
          // this.changePlayAudioBenchList(params);
          navigator.getUserMedia =
            navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia;
          if (navigator.mediaDevices.getUserMedia) {
            // 支持getUserMedia
            navigator.mediaDevices
              .getUserMedia({
                video: false,
                audio: true,
              })
              .then((stream) => {
                this.recStream = stream;
                this.paAc = new AudioContext({
                  sampleRate: 8000,
                });
                this.paSource = this.paAc.createMediaStreamSource(stream);
  
                //构造参数依次为缓冲区大小，输入通道数，输出通道数
                this.paScriptNode = this.paAc.createScriptProcessor(
                  1024,
                  channel,
                  2
                );
  
                this.sempleRateMultiple = this.paAc.sampleRate / 8000;
                this.paScriptNode.onaudioprocess = function (e) {
                  for (let i = 0; i < channel; i++) {
                    let data = e.inputBuffer.getChannelData(i);
  
                    self.recordSuperposeArr.push.apply(
                      self.recordSuperposeArr,
                      data
                    );
                    if (
                      self.sempleRateHandlingThreshold <
                      self.sempleRateMultiple - 1
                    ) {
                      self.sempleRateHandlingThreshold++;
                    } else {
                      let arr = [];
  
                      for (
                        let a = 0;
                        a < self.recordSuperposeArr.length;
                        a = a + self.sempleRateMultiple
                      ) {
                        arr.push(self.recordSuperposeArr[a]);
                      }
  
                      self.recordSuperposeArr = arr.splice(0, 1024);
  
                      self.recordSuperposeArr = new Float32Array(
                        self.recordSuperposeArr
                      );
                      if (Math.abs(self.recordSuperposeArr[0]) < 0.003) {
                        self.vadThreshold++;
                      } else {
                        self.vadThreshold = 0;
                      }
                      if (self.vadThreshold <= 20) {
                        let dataU8 = new Uint8Array(
                          self.recordSuperposeArr.buffer
                        );
                        let string = "";
                        for (let i = 0; i < dataU8.length; i++) {
                          string = string + String.fromCharCode(dataU8[i]);
                        }
  
                        ws.play_audio({
                          data: string,
                          benchIds: self.playAudioBenchList,
                        }).then(
                          (res) => {},
                          (rej) => {}
                        );
                      }
                      self.sempleRateHandlingThreshold = 0;
                      self.recordSuperposeArr = [];
                    }
                  }
                };
                this.paScriptNode.connect(this.paAc.destination);
                this.paSource.connect(this.paScriptNode);
              })
              .catch((err) => {
                console.log("err: " + err);
              });
          } else {
            // 不支持getUserMedia
            console.log("Environment not supported");
          }
        } else {
          // this.changePlayAudioBenchList(params);
          this.playAudioBenchList = [];
          self.stopRecord();
          this.ifConnectedAudioDevice = false;
          ws.stop_play_audio({
            benchId: this.connetedBenchId,
          }).then(
            (res) => {
              // console.log("res", res);
            },
            (rej) => {
              // console.log("rej", rej);
            }
          );
          // $bus.$emit("stopPlayAudio", {
          //   benchId: params.benchId,
          // });
          // }
        }
      },
  
      stopRecord() {
        let self = this;
        if (!this.isRecording) {
          this.recStream.getTracks().forEach(function (track) {
            track.stop();
          });
          this.paScriptNode.disconnect(this.paAc.destination);
          this.paSource.disconnect(this.paScriptNode);
          this.paAc.close();
        }
      },
      collectAudio() {
        let self = this;
        this.isPlaying = !this.isPlaying;
        if (this.isPlaying) {
          ws.collect_audio({
            benchId: String(this.connetedBenchId),
          }).then(
            (res) => {},
            (rej) => {}
          );
        } else {
          ws.stop_collect_audio({
            benchId: String(this.connetedBenchId),
          }).then(
            (res) => {},
            (rej) => {}
          );
          this.loopSendAudioTime = 0;
          this.sendAudioString = "";
        }
      },
  
      setSendAudioBus(benchId) {
        let self = this;
        bus.on("sendAudio" + benchId, (data) => {
          self.sendAudioTransformCode(data.data, true);
          this.loopSendAudioTime++;
  
          this.sendAudioTimer = setTimeout(() => {
            this.loopSendAudioTime = 5;
            self.sendAudioTransformCode("", false);
          }, 500);
        });
      },
  
      sendAudioTransformCode(data, fill) {
        let dataU8 = [];
        let dataF32 = [];
        let arr = [];
        let self = this;
        this.sendAudioString += data;
        if (this.loopSendAudioTime > 4) {
          arr = this.sendAudioString.split("");
          for (let i = 0; i < arr.length; i++) {
            dataU8[i] = arr[i].charCodeAt();
          }
          dataU8 = new Uint8Array(dataU8);
          dataF32 = new Float32Array(dataU8.buffer);
          if (!fill) {
            // console.log("dataF32-", dataF32);
            let newDataF32 = new Float32Array(5120);
            for (let i = 0; i < 5120; i++) {
              if (i < dataF32.length) {
                newDataF32[i] = dataF32[i];
              } else {
                newDataF32[i] = 0;
              }
            }
            dataF32 = newDataF32;
            // console.log("dataF32+", dataF32);
          }
          self.pcPlayAudio(dataF32, 1, 8000);
  
          this.sendAudioString = "";
          this.loopSendAudioTime = 0;
        }
        if (fill) {
          clearTimeout(this.sendAudioTimer);
        }
      },
  
      pcPlayAudio(data, channels, sampleRate) {
        let self = this;
        var audioCtx = new (window.AudioContext || window.webkitAudioContext)({
          sampleRate: sampleRate,
        });
  
        var myArrayBuffer = audioCtx.createBuffer(
          channels,
          data.length,
          sampleRate
        );
  
        for (let channel = 0; channel < channels; channel++) {
          var nowBuffering = myArrayBuffer.getChannelData(channel);
          for (let i = 0; i < data.length; i++) {
            if (i < data.length) {
              nowBuffering[i] = data[i];
            } else {
              nowBuffering[i] = 0;
            }
          }
        }
  
        // console.log("audioCtx", audioCtx);
        // console.log("nowBuffering", nowBuffering);
  
        var source = audioCtx.createBufferSource();
        source.buffer = myArrayBuffer;
        source.connect(audioCtx.destination);
        source.start();
      },
  
      pressPtt() {
        let self = this;
        ws.press_ptt({
          benchId: String(this.connetedBenchId),
        }).then(
          (res) => {},
          (rej) => {}
        );
      },
      bmMapItemSelect(key) {
        let self = this;
        if (this.previousSelectedBenchList.length) {
          this.selectedBenchList = JSON.parse(
            JSON.stringify(this.previousSelectedBenchList)
          );
        }
        this.previousSelectedBenchList = [];
        this.platform = null;
        this.benchList.forEach((b) => (b.selected = false));
        this.benchList[key].selected = !this.benchList[key].selected;
        if (this.benchList[key].selected) {
          this.currentBench = this.benchList[key];
          this.selectedBenchList.push(this.benchList[key]);
          // this.images = this.selectedBenchList.map((s) => {
          //   return {
          //     url: "",
          //     alt: s.name,
          //   };
          // });
        } else {
          for (let i in this.selectedBenchList) {
            if (this.selectedBenchList[i].id == this.benchList[key].id) {
              this.selectedBenchList.splice(i, 1);
              // this.images = this.selectedBenchList.map((s) => {
              //   return {
              //     url: "",
              //     alt: s.name,
              //   };
              // });
              break;
            }
          }
        }
        if (this.selectedBenchList.length == 0) {
          nextTick(() => {
            self.initBmInfoNsChart();
          });
        }
      },
      clickBenchList() {
        // window.location.href = "/squarePage?m=8b934420_ZJUb_b6f9";
        this.$store.dispatch("common/setSquareStatus", true);
      },
      disconnectBench() {
        ws.disconnectBench({ bench_id: String(this.connetedBenchId) }).then(
          (res) => {
            var remoteBenchList = this.remoteBenchList;
            let newRemoteBenchList = remoteBenchList.filter((item) => {
              return item != this.connetedBenchId;
            });
            while(this.remoteBenchList.length) {
              this.remoteBenchList.pop();
              this.$store.dispatch('benchList/popRemoteBenchList')
              this.$store.dispatch("common/setSquareStatus", true);
            }
            newRemoteBenchList.forEach(e => {
              this.remoteBenchList.push(e);
              this.$store.dispatch('benchList/addRemoteBenchList', e)
            })
            this.$store.dispatch("benchList/removeBenchImgList", {
              benchId: this.connetedBenchId,
            });
            this.getImgList(newRemoteBenchList);
  
            this.connetedBenchId = "";
            this.currentBench = {};
            this.benchDisplayVisible = false;
            this.benchDisplayLowerVisible = false;
            this.isConnected = false;
            this.$store.dispatch("common/setConnectedStatus", false);
          }
        );
      },
  
      sleep(delay) {
        var start = new Date().getTime();
        while (new Date().getTime() - start < delay) {
          continue;
        }
      },
      saveSelectedBenchToLs(benchId) {
        var objRBL = this.remoteBenchList;
        if (objRBL && objRBL.length > 0) {
          var bExist = false;
          for (var i = 0; i < objRBL.length; i++) {
            if (objRBL[i] == benchId) {
              bExist = true;
            } else {
            }
          }
          if (bExist == false) {
            objRBL.push(benchId);
            this.remoteBenchList.push(benchId)
            this.$store.dispatch('benchList/addRemoteBenchList', benchId)
          }
        } else {
          var rml = [];
          rml.push(benchId);
          this.remoteBenchList.push(benchId);
          this.$store.dispatch('benchList/addRemoteBenchList', benchId)
        }
      },
      handleListClick(benchId, itemtype) {
        this.$store.dispatch("common/setGoHome", false);
        
        if (itemtype == 2) {
          return;
        }
        try{
          for(let key in window.waterMap) {
            if (key == benchId) {
              window.waterMap[key].scale.set(1.3, 1.3, 1.3);
            } else {
              window.waterMap[key].scale.set(1, 1, 1);
            }
          }
        } catch (e) {
  
        }
        console.log("benchId", benchId);
        let selectedBench = this.benchList.find((i) => i.benchId == benchId);
        bus.emit("benchInfoVisible", selectedBench);
        this.$nextTick(() => {
          if (benchId == this.currentBench.benchId) {
            let items = document.getElementsByClassName("grid-item-background");
            for (var index = 0; index < items.length; index++) {
              items[index].style.background = "#000000";
            }
            return;
          }
          let items = document.getElementsByClassName("grid-item-background");
          for (var index = 0; index < items.length; index++) {
            items[index].style.background = "#000000";
            if (this.images[index].alt == benchId) {
              console.log("equal");
              items[index].style.background = "#ffffff";
            }
          }
        });
  
        //this.currentBench = this.benchList.find(b => b.id == benchId);
        //this.isDetailVisible = true;
        this.$nextTick(() => {
          //this.$refs.benchdetail.init(benchId);
          //this.benchList.forEach(element =>
          //{
          //  element.style = "{background: rgba(0, 0, 0, 1)}"
          //});
          // if (benchId == this.currentBench.id &&this.currentBench.selected) {
          //   this.currentBench.selected = false;
          //   this.currentBench.scale = 1;
          //   this.currentBench = {};
          //   let items = document.getElementsByClassName("item-box");
          //   for (var index = 0; index < items.length; index++) {
          //     items[index].style.background = "#00000032";
          //   }
          //   return;
          // }
          let items = document.getElementsByClassName("item-box");
          for (var index = 0; index < items.length; index++) {
            items[index].style.background = "#00000032";
            // console.log("textContent", title[0].textContent);
            let itemOther = this.benchList.find(
              (b) => b.id == items[index].dataset.index
            );
            if (itemOther) {
              itemOther.selected = false;
            }
            if (benchId == items[index].dataset.index) {
              items[index].style.background = "#000000C0";
              this.selectedBenchId = benchId
            }
          }
          // console.log('this.currentBench', this.currentBench);
          // bus.emit("benchInfoVisible", this.currentBench);
        });
      },
      handleBenchClick(benchId, showRemoteButton) {
        this.currentBench = this.benchList.find((b) => b.id == benchId);
        this.benchDetail = this.benchList.find((b) => b.id == benchId);
        this.isRemoteBtnVisible = showRemoteButton;
        this.isDetailVisible = true;
      },
      handleListDbClick(benchId, itemtype) {
        //this.currentBench = this.benchList.find(b => b.id == benchId);
        //this.isDetailVisible = true;
        this.$nextTick(() => {
          //this.$refs.benchdetail.init(benchId);
          //this.benchList.forEach(element =>
          //{
          //  element.style = "{background: rgba(0, 0, 0, 1)}"
          //});
          this.benchDetail = this.benchList.find((b) => b.id == benchId);
          //this.currentBench.style = "{background: rgba(0, 0, 0, 1)}"
          console.log("current bench", this.benchDetail);
          this.isRemoteBtnVisible = true;
          this.isDetailVisible = true;
        });
      },
      getBenchImage(benchId, screenType, wsRemote, func) {
        let self = this;
        setTimeout(() => {
          wsRemote.getImage(String(benchId), screenType).then((res) => {
            console.log("getImageRes", res);
            // let screen = screenType == 1 ? "upper" : "lower";
            func();
            if (screenType == 1) {
              self.benchImgUpper = "data:image/png;base64," + res.data.data;
              self.benchImgUpperMap[benchId] =
                "data:image/png;base64," + res.data.data;
              bus.emit("benchImgChange", { benchImgUpper: self.benchImgUpper });
            } else {
              self.benchImgLower = "data:image/png;base64," + res.data.data;
              self.benchImgLowerMap[benchId] =
                "data:image/png;base64," + res.data.data;
              bus.emit("benchImgChange", { benchImgLower: self.benchImgLower });
            }
            // let screen = res.data.screen_type;
            //self.getBenchImage(benchId, screenType, wsRemote, func);
            if (benchId == this.connetedBenchId) {
              //self.getBenchImage(benchId, screenType, wsRemote, func);
              this.$store.dispatch("benchList/setBenchImgList", {
                benchId,
                img: res.data.data,
              });
            }
            setTimeout(()=>{
              self.getBenchImageSub(benchId, screenType, wsRemote, func);
            },500)
          });
        }, 500);
      },
      getBenchImageSub(benchId, screenType, wsRemote, func) {
        let self = this;
        if (benchId == this.connetedBenchId) {
          wsRemote.getImage(String(benchId), screenType).then((res) => {
            console.log("getImageRes", res);
            // let screen = screenType == 1 ? "upper" : "lower";
            //func();
            {
              if (screenType == 1) {
                self.benchImgUpper = "data:image/png;base64," + res.data.data;
                self.benchImgUpperMap[benchId] =
                  "data:image/png;base64," + res.data.data;
                bus.emit("benchImgChange", { benchImgUpper: self.benchImgUpper });
              } else {
                self.benchImgLower = "data:image/png;base64," + res.data.data;
                self.benchImgLowerMap[benchId] =
                  "data:image/png;base64," + res.data.data;
                bus.emit("benchImgChange", { benchImgLower: self.benchImgLower });
              }
            }
            setTimeout(() => {
              self.getBenchImageSub(benchId, screenType, wsRemote, func);
            }, 100)
  
          });
  
  
        }
        else {
          setTimeout(() => {
            self.getBenchImageSub(benchId, screenType, wsRemote, func);
          }, 500)
        }
  
      },
      handleDblClickImg(benchId) {
        this.benchImgUpper = this.benchImgUpperMap[benchId];
        this.benchImgLower = this.benchImgLowerMap[benchId];
        this.$store.dispatch("common/setSquareStatus", false);
        this.selectBench(benchId);
      },
      handleClickImg(benchId, indexParam) {
        this.selectedBenchId = benchId;
        this.$nextTick(() => {
          if (benchId == this.currentBenchId) {
            benchId = 0;
            let items = document.getElementsByClassName("grid-item-background");
            for (var index = 0; index < items.length; index++) {
              items[index].style.background = "#000000";
            }
            return;
          }
          this.currentBenchId = benchId;
          let items = document.getElementsByClassName("grid-item-background");
          for (var index = 0; index < items.length; index++) {
            items[index].style.background = "#000000";
            if (index == indexParam) {
              console.log("equal");
              items[index].style.background = "#ffffff";
            }
          }
        });
        this.$nextTick(() => {
          if (
            benchId == this.currentBench.id &&
            this.currentBench.selected == true
          ) {
            this.currentBench.selected = false;
            this.currentBench.scale = 1;
            this.currentBench = {};
            let items = document.getElementsByClassName("item-box");
            for (var index = 0; index < items.length; index++) {
              items[index].style.background = "#00000032";
            }
            return;
          }
          let items = document.getElementsByClassName("item-box");
          for (var index = 0; index < items.length; index++) {
            items[index].style.background = "#00000032";
            let title = items[index].getElementsByClassName("item-title");
            console.log("textContent", title[0].textContent);
            let itemOther = this.benchList.find(
              (b) => parseInt(b.id) == parseInt(title[0].textContent) || b.id == benchId
            );
            itemOther.selected = false;
            if(items[index].dataset.index == benchId){
              items[index].style.background = "#000000C0";
              this.currentBench = this.benchList.find((b) => b.id == benchId);
              this.currentBench.selected = true;
            }
          }
          
          this.$store.dispatch('benchList/setCurrentBench', this.currentBench);
        });
      },
      handleCloseImg(benchId) {
        this.connetedBenchId = benchId;
        this.disconnectBench()
        console.log("benchId", benchId, this.connetedBenchId);
        var objRBL = this.remoteBenchList;
        if (objRBL) {
          for (var i = 0; i < objRBL.length; i++) {
            if (parseInt(objRBL[i]) == parseInt(benchId)) {
              console.log("images", this.images);
  
              for (var ii = 0; ii < this.images.length; ii++) {
                if (parseInt(this.images[ii].alt) == parseInt(benchId)) {
                  this.images.splice(ii, 1);
                  console.log("images", this.images);
                  break;
                }
              }
              //delete objRBL[i];
              objRBL.splice(i, 1);
              console.log("objRBL", objRBL);
              while(this.remoteBenchList.length) {
                this.remoteBenchList.pop();
                this.$store.dispatch('benchList/popRemoteBenchList')
                this.$store.dispatch("common/setSquareStatus", true);
              }
  
              objRBL.forEach(e => {
                this.remoteBenchList.push(e)
                this.$store.dispatch('benchList/addRemoteBenchList', e)
              })
  
              return;
            }
          }
        }
      },
      getAutoPlanResult(key) {},
      refreshBenchStatus() {
        var readyCount = 0;
        var occupiedCount = 0;
        var offlineCount = 0;
        console.log("this.benchList", this.benchList.length);
        this.benchList.forEach((element) => {
          //console.log('element',element);
          if (element.status == "ready") {
            readyCount++;
          } else if (element.status == "error") {
            offlineCount++;
          } else if (element.status == "offline") {
            offlineCount++;
          } else {
            occupiedCount++;
          }
        });
        this.readyCount = readyCount;
        this.offlineCount = offlineCount;
        this.occupiedCount = occupiedCount;
      }
    },
    watch: {
      benchDisplayVisible(newValue, oldValue) {
        bus.emit("benchDisplayVisible", {
          benchDisplayVisible: newValue,
          benchInfo: this.selectedBenchList[0],
        });
      },
      benchDisplayLowerVisible(newValue, oldValue) {
        bus.emit("benchDisplayLowerVisibleChange", {
          benchDisplayLowerVisible: newValue,
        });
      },
      benchList(newValue, oldValue) {
        console.log("newValue", newValue);
        var objRBL = this.remoteBenchList;
        console.log("zmg1", objRBL);
        var objRBLReverse = [];
        if(objRBL)
        {
          for (; objRBL.length > 0; ) {
            objRBLReverse.push(objRBL.pop());
          }
        }
        if (objRBLReverse.length > 0) {
          setTimeout(() => {
            this.getImgList(objRBLReverse);
          }, 300);
        }
      },
      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");
        }
      },
      autoPlanList() {
        this.autoPlanList.forEach(m => {
          this.$store.dispatch('caseList/getAllAutoPlanStatus', {
            planId: m.id,
            planName: m.name
          })
        })
      },
      mouseBenchId(newValue, oldValue) {
        let bench = this.benchList.find(b => b.benchId == newValue);
          if (bench) {
            this.mouseBenchDetail = bench;
          } else {
            this.mouseBenchDetail = {};
          }
      }
    },
  };
  </script>
    
    
<style scoped>
/* .benchMapBox {
      margin-top: 30px;
    } */
 .ordinary-map-ex {
  position: absolute;
  top: 43px;
  right: 207px;
  z-index: 0;
}
.main-title {
  margin-left: 30px;
  margin-top: 30px;
  color: #fff;
  font-weight: bold;
  display: flex;
  justify-content: left;
}
.main-tab {
  margin-top: 15px;
  margin-left: 30px;
  width: 400px;
  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 20%) 100%
    rgb(255 255 255 / 20%) 100%
  );
}
.search-container{
  margin-top: 15px;
  margin-left: -20vw;
  width: 35.4vw;
}
.benchMapBox :deep() .el-scrollbar__bar {
  display: none;
}

.bmContent {
  background-image: linear-gradient(60deg, #16182a 30%, #2d3049);
  border-radius: 10px;
  /* height: 1800px; */
  margin-top: 30px;
  margin-bottom: 30px;
  min-height: 426px;
}

.bmMap {
  /* height: 500px; */
  position: absolute;
  height: 10%;
  width: 100%;
  /* padding: 5px 10px; */
  box-sizing: border-box;
}

.bmMap
  :deep()
  .el-radio-button__original-radio:checked
  + .el-radio-button__inner {
  background-color: #474c79;
}
.bmMap
  :deep()
  .el-radio-button__original-radio:checked
  + .el-radio-button__inner
  span {
  color: #fff;
}
.bmMap :deep() .el-radio-button__inner {
  background-color: #383c6b;
  border: none;
  box-shadow: none;
}
.bmMap :deep() .el-radio-button__inner span {
  color: #ccc;
}
.bmMap :deep() .el-radio-button__inner span:hover {
  color: #eee;
}

.bmMapImage {
  position: relative;
  height: 100%;
  width: 100%;
  /* border: 1px solid #fff; */
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
}

.bmMapItem {
  position: absolute;
  height: 70px;
  width: 70px;
  cursor: pointer;
}

.bmMapItemNormal {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #16182a;
  /* box-shadow: 0 0 0 3px #393e6d inset; */
  box-sizing: border-box;
  z-index: 2;
}

.bmMapItemInfo {
  position: absolute;
  height: 100%;
  width: 120px;
  box-sizing: border-box;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  font-size: 12px;
  z-index: 6;
  user-select: none;
  /* background: #183153; */
  overflow: hidden;
  border: none;
  color: #ccc;
  border-radius: 10px;
  left: 30px;
  padding-left: 10px;
  background: rgba(117, 117, 117, 0.8);
}

.bmMapItemInfoWater {
  position: absolute;
  width: 120px;
  box-sizing: border-box;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  font-size: 12px;
  z-index: 6;
  user-select: none;
  /* background: #183153; */
  overflow: hidden;
  border: none;
  color: #ccc;
  border-radius: 10px;
  left: 30px;
  padding-left: 10px;
  background: rgba(117, 117, 117, 0.8);
}

.bmMapItemInfoAfter {
  width: 0%;
  height: 100%;
  background: rgba(117, 117, 117, 0.8);
  position: absolute;
  transition: all 0.2s ease-in-out;
  right: 0;
}

.bmMapItemInfoSelected > .bmMapItemInfoAfter {
  right: auto;
  left: 0;
  width: 100%;
}

.bmMapItemInfo span {
  z-index: 20;
  transition: all 0.2s ease-in-out;
}

.bmMapItemInfo span + span {
  margin-top: 5px;
}

.bmMapItemInfoSelected > span {
  color: #ccc;
  animation: scaleUp 0.2s ease-in-out;
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

.bmMapItemInfo span:nth-child(1) {
  font-weight: bold;
}

.bmMapItemInfo span:nth-child(2) {
  opacity: 0.8;
}

.bmMapItemSelected {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: 4;
}

.bmMapItemSelected::before {
  content: " ";
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    #ff3f99,
    #3e88ff,
    transparent
  );
  /* transform: scale(5); */
  animation: rotation_9018 3000ms infinite linear;
  filter: blur(9px);
}

@keyframes rotation_9018 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.bmMapItemSelectedContent {
  position: absolute;
  height: calc(100% - 6px);
  width: calc(100% - 6px);
  top: 3px;
  left: 3px;
  background-color: #16182a;
}

.bmMapItemSelectedContent::before {
  content: " ";
  height: 28px;
  width: 8px;
  position: absolute;
  background: white;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  filter: blur(12px);
}

.bmBench {
  width: 100%;
  /* height: 300px; */
  padding: 25px 0;
  box-sizing: border-box;
}

.bmBenchBox {
  font-size: 0;
  /* margin-top: 5px; */
  position: relative;
  display: flex;
  justify-content: center;
}

.bmBenchImg {
  /* width: 100%;
      height: 285px; */
  /* width: 100%; */
  height: 100%;
  border-radius: 6px;
}

.bmBenchTrailUpper {
  position: absolute;
  /* height: 285px; */
  height: 100%;
  width: 100%;
  z-index: 20;
  left: 0;
  top: 0;
}

.bmBenchTrailUpperCursorTap {
  position: absolute;
  height: 2vh;
  width: 2vh;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  left: 30%;
  top: 0;
  animation: bmBenchTrailUpperCursorTapAnimation 0.75s linear 0s 1;
}

@keyframes bmBenchTrailUpperCursorTapAnimation {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(0.6);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.6);
    opacity: 0.6;
  }
  55% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.bmBenchTrailUpperCursorSwipe {
  position: absolute;
  height: 2vh;
  width: 2vh;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transition: all 1s;
}

.bmBenchTrailUpperCursorSwipe2 {
  height: 1.5vh;
  width: 1.5vh;
  transition: all 1s 0.05s;
}

.bmBenchTrailUpperCursorSwipe3 {
  height: 1vh;
  width: 1vh;
  transition: all 1s 0.1s;
}

.bmBenchTrailUpperCursorPress {
  position: absolute;
  height: 2vh;
  width: 2vh;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  left: 30%;
  top: 0;
  animation: bmBenchTrailUpperCursorPressAnimation 2s linear 0s 1;
}

@keyframes bmBenchTrailUpperCursorPressAnimation {
  0% {
    transform: scale(1);
  }
  12% {
    transform: scale(1);
    opacity: 1;
  }
  21% {
    transform: scale(0.6);
    opacity: 0.6;
  }
  70% {
    transform: scale(0.6);
    opacity: 0.6;
  }
  73% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.bmBenchTrailUpperCursor {
  position: absolute;
  height: 2vh;
  width: 2vh;
  background-color: rgba(255, 255, 255, 0.6);
  /* border: 1vh solid rgba(255, 255, 255, 0.6); */
  border-radius: 50%;
  left: 30%;
  top: 0;
  pointer-events: none;
  animation: bmBenchTrailUpperCursorAnimation 1s linear 0s 1;
  box-sizing: border-box;
}

@keyframes bmBenchTrailUpperCursorAnimation {
  0% {
    border: 1vh solid rgba(255, 255, 255, 0.4);
  }
  40% {
    border: 0vh solid rgba(255, 255, 255, 0.4);
  }
  100% {
    border: 0vh solid rgba(255, 255, 255, 0.4);
  }
}

.bmInfo {
  min-height: 126px;
  border-bottom: 1px solid #444358;
  padding-bottom: 15px;
}

.bmInfoNotSelected,
.bmInfoOneSelected {
  padding: 0 15px 0 25px;
}

.bmInfoNsTitle,
.bmInfoOsTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.bmInfoNsInfo,
.bmInfoOsInfo {
  display: flex;
  flex-direction: column;
}

.bmInfoNsInfo > span:nth-child(1),
.bmInfoOsInfo > span:nth-child(1) {
  /* font-weight: bold; */
  font-size: 18px;
  display: flex;
  align-items: center;
  /* justify-content: center; */
}

.bmInfoNsInfo > span:nth-child(2),
.bmInfoOsInfo > span:nth-child(2) {
  font-size: 12px;
  opacity: 0.4;
  margin-top: 10px;
  /* padding-bottom: 15px; */
  letter-spacing: 1px;
  font-weight: lighter;
}

.bmInfoNsChart {
  height: 50px;
  width: 200px;
}

.bmInfoOsImg {
  background-image: url(../../assets/benchImage.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 120px;
}

.bmInfoOsImgA3NF-01 {
  background-image: url(../../assets/bench_img/a3nf_01.jpg) !important;
}

.bmInfoOsImgA3NF-02 {
  background-image: url(../../assets/bench_img/a3nf_02.jpg) !important;
}

.bmInfoOsImgB9PA-01 {
  background-image: url(../../assets/bench_img/B9PA_01.jpg) !important;
}

.bmInfoOsImgB9PA-02 {
  background-image: url(../../assets/bench_img/B9PA_01.jpg) !important;
}

.bmInfoOsImgB9PA-04 {
  background-image: url(../../assets/bench_img/B9PA_04.jpg) !important;
}

.bmInfoOsImgCBEV-01 {
  background-image: url(../../assets/bench_img/CBEV_01.jpg) !important;
}

.bmInfoOsImgQ3NF-01 {
  background-image: url(../../assets/bench_img/Q3nf_01.jpg) !important;
}

.bmInfoOsImgH-JP-02 {
  background-image: url(../../assets/bench_img/meb-jp2.jpg) !important;
}

.bmInfoOsImgP-CN-01 {
  background-image: url(../../assets/bench_img/MEB-P-CN_01.jpg) !important;
}

.bmInfoOsImgH-CN-01 {
  background-image: url(../../assets/bench_img/meb-H_CN_01.jpg) !important;
}

.bmInfoOsImgP-TW-01 {
  background-image: url(../../assets/bench_img/meb-h-CN_02.jpg) !important;
}

.bmInfoOsImgH-JP-01 {
  background-image: url(../../assets/bench_img/meb-jp1.jpg) !important;
}

.bmInfoOsImgD5 {
  background-image: url(../../assets/bench_img/Q7PA_01.jpg) !important;
}

.bmInfoOsImgQ6-01 {
  background-image: url(../../assets/bench_img/Q6-01.jpg) !important;
}

.bmInfoOsImgQ6-02 {
  background-image: url(../../assets/bench_img/Q6-02.jpg) !important;
}

.bmInfoNsTag,
.bmInfoOsTag {
  display: flex;
  padding: 10px 0;
}

.bmInfoTagItem {
  height: 26px;
  padding: 4px 14px;
  background-color: #25293c;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  box-sizing: border-box;
  color: #d0cece;
  margin-right: 10px;
  cursor: pointer;
  user-select: none;
}

.bmInfoTagItem:hover {
  background-color: #2d3249;
}

.bmInfoTagItem:active {
  background-color: #333a53;
}

.bmInfoMsSlide {
  height: 120px;
  width: 200px;
  /* background-color: #3e88ff; */
  background-image: url(../../assets/benchImage.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  position: relative;
}

.bmInfoMsSlideName {
  position: absolute;
  background-color: rgba(23, 25, 43, 0.5);
  font-size: 12px;
  padding: 1px 8px;
  border-radius: 9px;
  left: 3px;
  top: 3px;
  box-sizing: border-box;
  /* text-align: center; */
  backdrop-filter: blur(1px);
  text-shadow: 0 0 10px #000;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

.bmInfoMsSlideNameStatus {
  float: right;
}

.bmInfoMsSlideNameStatus,
.bmInfoMsSlideNameStatus4 {
  height: 12px;
  width: 12px;
  border: 3px solid #b1b3b8;
  border-radius: 50%;
  box-sizing: border-box;
  margin-right: 6px;
}

.bmInfoMsSlideNameStatus2,
.bmInfoMsSlideNameStatus3 {
  border: 3px solid #95d475;
}

/* .bmInfoMsSlideNameStatus4 {
      border: 3px solid #f89898;
    } */

.bmInfoMsSlideNameStatus5,
.bmInfoMsSlideNameStatus6 {
  border: 3px solid #79bbff;
}

.bmInfoMultipleSelected {
  position: relative;
  padding: 4px 14px;
}

.bmInfoMsPagination {
  position: absolute;
  z-index: 10;
  left: 50%;
  /* top: 60px; */
  height: 16px;
  width: auto;
  /* padding: 0 10px; */
  border-radius: 10px;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.bmInfoMsPagination :deep() span:nth-child(1) {
  margin-left: 10px;
}

.bmInfoMsPagination :deep() span:last-child {
  margin-right: 10px;
}

.bmBtn {
  padding: 15px 15px 15px 25px;
  display: flex;
  align-items: center;
}

.bmBtnItem {
  cursor: pointer;
  height: 24px;
  width: 24px;
  border-radius: 3px;
  margin-right: 20px;
  transition: all 0.2s;
  color: #aaa;
}

/* .bmBtnItem :deep() path {
      color: #aaa;
    } */

.bmBtnItem:hover {
  background-color: rgba(255, 255, 255, 0.2);
  filter: brightness(1.5);
}

.bmBtnItem:active {
  background-color: rgba(255, 255, 255, 0.3);
}

.bmBtnItemMonitor,
.bmBtnMapLocation {
  background-image: linear-gradient(
    60deg,
    rgb(253 46 91 / 70%) 40%,
    rgb(254 129 130 / 70%)
  );
  color: #ccc;
}

.bmBtnItemSelectAll {
  /* position: relative; */
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.bmBtnItemSelectAll > .bmBtnItem {
  margin-right: 5px;
}

.bmBtnItemSelectAllNum {
  /* position: absolute; */
  /* right: 20px; */
  font-size: 12px;
  color: rgba(226, 228, 243, 0.6);
}

.bmBtnItemActive {
  filter: drop-shadow(0 0 2px rgb(255, 255, 255)) brightness(1.5);
  font-size: 20px;
}

.bmLog {
  padding: 5px 25px 20px 25px;
}

.bmLogBox {
  padding: 15px;
  border: 2px solid #31344a;
  border-radius: 17px;
  box-sizing: border-box;
  background-color: #31344a80;
  /* max-height: 200px; */
  height: 200px;
  overflow-y: scroll;
  /* max-height: 200px; */
}

.bmLogItem {
  line-height: 22px;
  margin: 6px 0px;
  padding: 0 6px;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  word-wrap: break-word;
}
.bmLogItemDebug {
  color: rgb(115, 201, 255);
}
.bmLogItemInfo {
  color: rgb(81, 230, 93);
}
.bmLogItemWarning {
  color: rgb(228, 230, 81);
}
.bmLogItemError {
  color: rgb(255, 113, 113);
}
/* .origin-basic {
      padding: 15px 20px;
      color: #fff;
      font-size: 12px;
    } */
.origin-basic div {
  margin-bottom: 5px;
}
.origin-basic div span {
  margin-right: 12px;
}
.origin-basic h2 {
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 10px;
}
.origin-map {
  background-color: rgba(117, 117, 117, 0.8);
}
.ready {
  color: #65c94c00 !important;
  font-size: 30px;
}
.running {
  color: #478bc300 !important;
  font-size: 30px;
}
.occupied {
  color: #478bc300 !important;
  font-size: 30px;
}
.offline {
  color: #cdd0cf00 !important;
  font-size: 30px;
}
/*.offline {
        color: red !important;
        font-size: 30px;
    }*/
.bmInfoMsSlideNameStatus.ready {
  color: #65c94c !important;
  border: 3px solid #65c94c;
  font-size: 30px;
}
.bmInfoMsSlideNameStatus.occupied {
  color: #478bc3 !important;
  border: 3px solid #478bc3;
  font-size: 30px;
}
.bmInfoMsSlideNameStatus.offline {
  color: #cdd0cf !important;
  border: 3px solid #cdd0cf;
  font-size: 30px;
}
.bmInfoMsSlideNameStatus.offline {
  color: red !important;
  border: 3px solid red;
  font-size: 30px;
}
</style>
    
    <style scoped>
/* .benchMapBox {
      margin-top: 30px;
    } */

.benchMapBox :deep() .el-scrollbar__bar {
  display: none;
}

.bmContent {
  background-image: linear-gradient(60deg, #16182a 30%, #2d3049);
  border-radius: 10px;
  /* height: 1800px; */
  margin-top: 30px;
  margin-bottom: 30px;
  min-height: 426px;
}

.bmMap {
  /* height: 500px; */
  width: 100%;
  /* padding: 5px 10px; */
  box-sizing: border-box;
}

.bmMap
  :deep()
  .el-radio-button__original-radio:checked
  + .el-radio-button__inner {
  background-color: #474c79;
}
.bmMap
  :deep()
  .el-radio-button__original-radio:checked
  + .el-radio-button__inner
  span {
  color: #fff;
}
.bmMap :deep() .el-radio-button__inner {
  background-color: #383c6b;
  border: none;
  box-shadow: none;
}
.bmMap :deep() .el-radio-button__inner span {
  color: #ccc;
}
.bmMap :deep() .el-radio-button__inner span:hover {
  color: #eee;
}

.bmMapImage {
  position: relative;
  width: 100%;

  /* border: 1px solid #fff; */
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
}

.bmMapItem {
  position: absolute;
  height: 30px;
  width: 30px;
  cursor: pointer;
}

.bmMapItemNormal {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #16182a;
  /* box-shadow: 0 0 0 3px #393e6d inset; */
  box-sizing: border-box;
  z-index: 2;
}

.bmMapItemInfo {
  position: absolute;
  height: 233%;
  width: 120px;
  box-sizing: border-box;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  font-size: 12px;
  z-index: 6;
  user-select: none;
  /* background: #183153; */
  overflow: hidden;
  border: none;
  color: #ccc;
  border-radius: 10px;
  left: 30px;
  padding-left: 10px;
  background: rgba(117, 117, 117, 0.8);
}

.bmMapItemInfoWater {
  position: absolute;
  width: 120px;
  box-sizing: border-box;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  font-size: 12px;
  z-index: 6;
  user-select: none;
  /* background: #183153; */
  overflow: hidden;
  border: none;
  color: #ccc;
  border-radius: 10px;
  left: 30px;
  padding-left: 10px;
  background: rgba(117, 117, 117, 0.8);
}

.bmMapItemInfoAfter {
  width: 0%;
  height: 100%;
  background: rgba(117, 117, 117, 0.8);
  position: absolute;
  transition: all 0.2s ease-in-out;
  right: 0;
}

.bmMapItemInfoSelected > .bmMapItemInfoAfter {
  right: auto;
  left: 0;
  width: 100%;
}

.bmMapItemInfo span {
  z-index: 20;
  transition: all 0.2s ease-in-out;
}

.bmMapItemInfo span + span {
  margin-top: 5px;
}

.bmMapItemInfoSelected > span {
  color: #ccc;
  animation: scaleUp 0.2s ease-in-out;
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

.bmMapItemInfo span:nth-child(1) {
  font-weight: bold;
}

.bmMapItemInfo span:nth-child(2) {
  opacity: 0.8;
}

.bmMapItemSelected {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: 4;
}

.bmMapItemSelected::before {
  content: " ";
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    #ff3f99,
    #3e88ff,
    transparent
  );
  /* transform: scale(5); */
  animation: rotation_9018 3000ms infinite linear;
  filter: blur(9px);
}

@keyframes rotation_9018 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.bmMapItemSelectedContent {
  position: absolute;
  height: calc(100% - 6px);
  width: calc(100% - 6px);
  top: 3px;
  left: 3px;
  background-color: #16182a;
}

.bmMapItemSelectedContent::before {
  content: " ";
  height: 28px;
  width: 8px;
  position: absolute;
  background: white;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  filter: blur(12px);
}

.bmBench {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.bmBenchBox {
  font-size: 0;
  /* margin-top: 5px; */
  position: relative;
  display: flex;
  justify-content: center;
  background-color: #000;
  height: 100%;
}

.bmBenchImg {
  /* width: 100%;
      height: 285px; */
  width: 100%;
  background-color: #000;
  /* padding: 80px; */
  height: 100%;
  border-radius: 6px;
  height: 100%;
}

.bmBenchTrailUpper {
  position: absolute;
  /* height: 285px; */
  height: 100%;
  width: 100%;
  z-index: 20;
  left: 0;
  top: 0;
}

.bmBenchTrailUpperCursorTap {
  position: absolute;
  height: 2vh;
  width: 2vh;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  left: 30%;
  top: 0;
  animation: bmBenchTrailUpperCursorTapAnimation 0.75s linear 0s 1;
}

@keyframes bmBenchTrailUpperCursorTapAnimation {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(0.6);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.6);
    opacity: 0.6;
  }
  55% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.bmBenchTrailUpperCursorSwipe {
  position: absolute;
  height: 2vh;
  width: 2vh;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transition: all 1s;
}

.bmBenchTrailUpperCursorSwipe2 {
  height: 1.5vh;
  width: 1.5vh;
  transition: all 1s 0.05s;
}

.bmBenchTrailUpperCursorSwipe3 {
  height: 1vh;
  width: 1vh;
  transition: all 1s 0.1s;
}

.bmBenchTrailUpperCursorPress {
  position: absolute;
  height: 2vh;
  width: 2vh;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  left: 30%;
  top: 0;
  animation: bmBenchTrailUpperCursorPressAnimation 2s linear 0s 1;
}

@keyframes bmBenchTrailUpperCursorPressAnimation {
  0% {
    transform: scale(1);
  }
  12% {
    transform: scale(1);
    opacity: 1;
  }
  21% {
    transform: scale(0.6);
    opacity: 0.6;
  }
  70% {
    transform: scale(0.6);
    opacity: 0.6;
  }
  73% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.bmBenchTrailUpperCursor {
  position: absolute;
  height: 2vh;
  width: 2vh;
  background-color: rgba(255, 255, 255, 0.6);
  /* border: 1vh solid rgba(255, 255, 255, 0.6); */
  border-radius: 50%;
  left: 30%;
  top: 0;
  pointer-events: none;
  animation: bmBenchTrailUpperCursorAnimation 1s linear 0s 1;
  box-sizing: border-box;
}

@keyframes bmBenchTrailUpperCursorAnimation {
  0% {
    border: 1vh solid rgba(255, 255, 255, 0.4);
  }
  40% {
    border: 0vh solid rgba(255, 255, 255, 0.4);
  }
  100% {
    border: 0vh solid rgba(255, 255, 255, 0.4);
  }
}

.bmInfo {
  min-height: 126px;
  border-bottom: 1px solid #444358;
  padding-bottom: 15px;
}

.bmInfoNotSelected,
.bmInfoOneSelected {
  padding: 0 15px 0 25px;
}

.bmInfoNsTitle,
.bmInfoOsTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.bmInfoNsInfo,
.bmInfoOsInfo {
  display: flex;
  flex-direction: column;
}

.bmInfoNsInfo > span:nth-child(1),
.bmInfoOsInfo > span:nth-child(1) {
  /* font-weight: bold; */
  font-size: 18px;
  display: flex;
  align-items: center;
  /* justify-content: center; */
}

.bmInfoNsInfo > span:nth-child(2),
.bmInfoOsInfo > span:nth-child(2) {
  font-size: 12px;
  opacity: 0.4;
  margin-top: 10px;
  /* padding-bottom: 15px; */
  letter-spacing: 1px;
  font-weight: lighter;
}

.bmInfoNsChart {
  height: 50px;
  width: 200px;
}

.bmInfoOsImg {
  background-image: url(../../assets/benchImage.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 120px;
}

.bmInfoOsImgA3NF-01 {
  background-image: url(../../assets/bench_img/a3nf_01.jpg) !important;
}

.bmInfoOsImgA3NF-02 {
  background-image: url(../../assets/bench_img/a3nf_02.jpg) !important;
}

.bmInfoOsImgB9PA-01 {
  background-image: url(../../assets/bench_img/B9PA_01.jpg) !important;
}

.bmInfoOsImgB9PA-02 {
  background-image: url(../../assets/bench_img/B9PA_01.jpg) !important;
}

.bmInfoOsImgB9PA-04 {
  background-image: url(../../assets/bench_img/B9PA_04.jpg) !important;
}

.bmInfoOsImgCBEV-01 {
  background-image: url(../../assets/bench_img/CBEV_01.jpg) !important;
}

.bmInfoOsImgQ3NF-01 {
  background-image: url(../../assets/bench_img/Q3nf_01.jpg) !important;
}

.bmInfoOsImgH-JP-02 {
  background-image: url(../../assets/bench_img/meb-jp2.jpg) !important;
}

.bmInfoOsImgP-CN-01 {
  background-image: url(../../assets/bench_img/MEB-P-CN_01.jpg) !important;
}

.bmInfoOsImgH-CN-01 {
  background-image: url(../../assets/bench_img/meb-H_CN_01.jpg) !important;
}

.bmInfoOsImgP-TW-01 {
  background-image: url(../../assets/bench_img/meb-h-CN_02.jpg) !important;
}

.bmInfoOsImgH-JP-01 {
  background-image: url(../../assets/bench_img/meb-jp1.jpg) !important;
}

.bmInfoOsImgD5 {
  background-image: url(../../assets/bench_img/Q7PA_01.jpg) !important;
}

.bmInfoOsImgQ6-01 {
  background-image: url(../../assets/bench_img/Q6-01.jpg) !important;
}

.bmInfoOsImgQ6-02 {
  background-image: url(../../assets/bench_img/Q6-02.jpg) !important;
}

.bmInfoNsTag,
.bmInfoOsTag {
  display: flex;
  padding: 10px 0;
}

.bmInfoTagItem {
  height: 26px;
  padding: 4px 14px;
  background-color: #25293c;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  box-sizing: border-box;
  color: #d0cece;
  margin-right: 10px;
  cursor: pointer;
  user-select: none;
}

.bmInfoTagItem:hover {
  background-color: #2d3249;
}

.bmInfoTagItem:active {
  background-color: #333a53;
}

.bmInfoMsSlide {
  height: 120px;
  width: 200px;
  /* background-color: #3e88ff; */
  background-image: url(../../assets/benchImage.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  position: relative;
}

.bmInfoMsSlideName {
  position: absolute;
  background-color: rgba(23, 25, 43, 0.5);
  font-size: 12px;
  padding: 1px 8px;
  border-radius: 9px;
  left: 3px;
  top: 3px;
  box-sizing: border-box;
  /* text-align: center; */
  backdrop-filter: blur(1px);
  text-shadow: 0 0 10px #000;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

.bmInfoMsSlideNameStatus {
  float: right;
}

.bmInfoMsSlideNameStatus,
.bmInfoMsSlideNameStatus4 {
  height: 12px;
  width: 12px;
  border: 3px solid #b1b3b8;
  border-radius: 50%;
  box-sizing: border-box;
  margin-right: 6px;
}

.bmInfoMsSlideNameStatus2,
.bmInfoMsSlideNameStatus3 {
  border: 3px solid #95d475;
}

/* .bmInfoMsSlideNameStatus4 {
      border: 3px solid #f89898;
    } */

.bmInfoMsSlideNameStatus5,
.bmInfoMsSlideNameStatus6 {
  border: 3px solid #79bbff;
}

.bmInfoMultipleSelected {
  position: relative;
  padding: 4px 14px;
}

.bmInfoMsPagination {
  position: absolute;
  z-index: 10;
  left: 50%;
  /* top: 60px; */
  height: 16px;
  width: auto;
  /* padding: 0 10px; */
  border-radius: 10px;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.bmInfoMsPagination :deep() span:nth-child(1) {
  margin-left: 10px;
}

.bmInfoMsPagination :deep() span:last-child {
  margin-right: 10px;
}

.bmBtn {
  padding: 15px 15px 15px 25px;
  display: flex;
  align-items: center;
}

.bmBtnItem {
  cursor: pointer;
  height: 24px;
  width: 24px;
  border-radius: 3px;
  margin-right: 20px;
  transition: all 0.2s;
  color: #aaa;
}

/* .bmBtnItem :deep() path {
      color: #aaa;
    } */

.bmBtnItem:hover {
  background-color: rgba(255, 255, 255, 0.2);
  filter: brightness(1.5);
}

.bmBtnItem:active {
  background-color: rgba(255, 255, 255, 0.3);
}

.bmBtnItemMonitor,
.bmBtnMapLocation {
  background-image: linear-gradient(
    60deg,
    rgb(253 46 91 / 70%) 40%,
    rgb(254 129 130 / 70%)
  );
  color: #ccc;
}

.bmBtnItemSelectAll {
  /* position: relative; */
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.bmBtnItemSelectAll > .bmBtnItem {
  margin-right: 5px;
}

.bmBtnItemSelectAllNum {
  /* position: absolute; */
  /* right: 20px; */
  font-size: 12px;
  color: rgba(226, 228, 243, 0.6);
}

.bmBtnItemActive {
  filter: drop-shadow(0 0 2px rgb(255, 255, 255)) brightness(1.5);
  font-size: 20px;
}

.bmLog {
  padding: 5px 25px 20px 25px;
}

.bmLogBox {
  padding: 15px;
  border: 2px solid #31344a;
  border-radius: 17px;
  box-sizing: border-box;
  background-color: #31344a80;
  /* max-height: 200px; */
  height: 200px;
  overflow-y: scroll;
  /* max-height: 200px; */
}

.bmLogItem {
  line-height: 22px;
  margin: 6px 0px;
  padding: 0 6px;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  word-wrap: break-word;
}
.bmLogItemDebug {
  color: rgb(115, 201, 255);
}
.bmLogItemInfo {
  color: rgb(81, 230, 93);
}
.bmLogItemWarning {
  color: rgb(228, 230, 81);
}
.bmLogItemError {
  color: rgb(255, 113, 113);
}
.origin-basic {
  padding: 15px 20px;
  color: #fff;
  font-size: 12px;
}
.origin-basic div {
  margin-bottom: 10px;
}
.origin-basic div span {
  margin-right: 12px;
}
.origin-basic h2 {
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 10px;
}
.originBasicRow {
  display: flex;
  margin-bottom: 0 !important;
}
.originBasicRow > div {
  width: 100%;
}
.ready {
  color: #65c94c00 !important;
  font-size: 30px;
}
.occupied {
  color: #478bc300 !important;
  font-size: 30px;
}
.offline {
  color: #cdd0cf00 !important;
  font-size: 30px;
}
.offline {
  color: #ff000000 !important;
  font-size: 30px;
}
.bmInfoMsSlideNameStatus.ready {
  color: #65c94c !important;
  border: 3px solid #65c94c;
  font-size: 30px;
}
.bmInfoMsSlideNameStatus.occupied {
  color: #478bc3 !important;
  border: 3px solid #478bc3;
  font-size: 30px;
}
.bmInfoMsSlideNameStatus.offline {
  color: #cdd0cf !important;
  border: 3px solid #cdd0cf;
  font-size: 30px;
}
.bmInfoMsSlideNameStatus.offline {
  color: red !important;
  border: 3px solid red;
  font-size: 30px;
}

.secondScreen {
  width: 26.36vw;
  height: 26.38vh;
  margin-left: 1.56vw;
  margin-bottom: 2.13vh;
  border-radius: 2.08vw;
  overflow: hidden;
}

.benchBtnActive {
  filter: brightness(5) drop-shadow(0 2px 3px rgb(255, 255, 255));
}

.grid-item-background {
  height: 20vh;
  width: calc(100% - 10px);
  border-radius: 10px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mouse-flow {
  position: absolute;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  width: 100px;
  color: #fff;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.8);
}
.mouse-flow-title {
  font-size: 14px;
}
.mouse-flow-dep {
  font-size: 12px;
}
.mouse-flow-status {
  width: 10px;
  height: 10px;
  float: right;
  border-radius: 100%;
}
.ready {
  background-color: #65c94c00 !important;
}
.occupied {
  background-color: #478bc300 !important;
}
.offline {
  background-color: #cdd0cf00 !important;
}
.error {
  background-color: #ff000000 !important;
}
</style>