D-MAP/src/views/ordinaryPage/index.vue

<template>
  <div>
    <div class="container" v-show="isOpen3d" key="container">
      <SearchBarMain />
      <div class="vr-bg" id="vr-bg-container"></div>
      <div id="player" style="width: 100%; height: 100%"></div>
    </div>
    <div
      class="ordinary-container"
      key="ordinary-container"
      v-show="!isOpen3d"
      @click="onBlur"
    >
      <div class="ordinary-left">
        <SearchBar
          class="search-container"
          v-model="inputValue"
          @focus="onFocus"
          @input="onInput"
          @blur="onBlur"
          ref="searchbar"
        />
        <div class="square-map" v-show="isOpenSquare && !isOpen">
          <el-row>
            <el-col v-for="(item, index) in images" :key="index" :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)"
                @mouseleave="bmMapItemOut(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 class="ordinary-map-ex">
              <div class="square-count">
                <status-bar
                  :ready="readyCount"
                  :occupied="occupiedCount"
                  :offline="offlineCount"
                ></status-bar>
              </div>
              <!-- <div class="bench-list">
              <div class="bench-list-buttons" @click="clickBenchList">
                My Bench List
              </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" />
          <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 }"
            >
              <el-tooltip class="item" effect="dark" content="音量" placement="top-start">
                <img
                  @click="connectAudioDevice('collectAudio')"
                  src="../../images/sound.png"
                />
              </el-tooltip>
            </el-col>
            <el-col
              :span="3"
              class="btn-item"
              :class="{ benchBtnActive: isRecording }"
            >
              <el-tooltip class="item" effect="dark" content="麦克风" placement="top-start">
                  <img
                    @click="connectAudioDevice('playAudio')"
                    src="../../images/mic.png"
                  />
              </el-tooltip>
            </el-col>
            <el-col
              :span="3"
              class="btn-item"
              :class="{ benchBtnActive: displayTapMode }"
            >
              <el-tooltip class="item" effect="dark" content="点击" placement="top-start">
                  <img @click="tapModeControl" src="../../images/pointer.png" />
              </el-tooltip>
            </el-col>
            <el-col :span="3" class="btn-item" v-show="false">
              <el-tooltip class="item" effect="dark" content="日志" placement="top-start">
                  <img @click="showLogBox" src="../../images/book.png" />
              </el-tooltip>
            </el-col>
            <el-col :span="3" class="btn-item">
              <el-tooltip class="item" effect="dark" content="唤醒语音助手按钮" placement="top-start">
                  <img @click="pressPtt" src="../../images/robot.png" />
              </el-tooltip>
            </el-col>
            <el-col :span="3" class="btn-item">
              <el-tooltip class="item" effect="dark" content="断开远程控制按钮" placement="top-start">
                  <img @click="disconnectBench" src="../../images/disconnect.png" />
              </el-tooltip>
            </el-col>
          </el-row>
        </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 }">
            <el-tooltip class="item" effect="dark" content="音量" placement="top-start">
              <img
                @click="connectAudioDevice('collectAudio')"
                src="../../images/sound.png"
              />
            </el-tooltip>
          </el-col>
          <el-col
            :span="3"
            class="btn-item"
            :class="{ benchBtnActive: isRecording }"
          >
            <el-tooltip class="item" effect="dark" content="麦克风" placement="top-start">
                <img
                  @click="connectAudioDevice('playAudio')"
                  src="../../images/mic.png"
                />
            </el-tooltip>
          </el-col>
          <el-col
            :span="3"
            class="btn-item"
            :class="{ benchBtnActive: displayTapMode }"
          >
            <el-tooltip class="item" effect="dark" content="点击" placement="top-start">
                <img @click="tapModeControl" src="../../images/pointer.png" />
            </el-tooltip>
          </el-col>
          <el-col :span="3" class="btn-item" v-show="false">
            <el-tooltip class="item" effect="dark" content="日志" placement="top-start">
                <img @click="showLogBox" src="../../images/book.png" />
            </el-tooltip>
          </el-col>
          <el-col :span="3" class="btn-item">
            <el-tooltip class="item" effect="dark" content="唤醒语音助手按钮" placement="top-start">
                <img @click="pressPtt" src="../../images/robot.png" />
            </el-tooltip>
          </el-col>
          <el-col :span="3" class="btn-item">
            <el-tooltip class="item" effect="dark" content="断开远程控制按钮" placement="top-start">
                <img @click="disconnectBench" src="../../images/disconnect.png" />
            </el-tooltip>
          </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 v-show="mouseStatus" class="mouse-flow bmMapItem el-icon-location" :style="{ left: mouseX+'px', top: mouseY+'px' }">
      <div class="mouse-flow-title">{{ mouseBenchDetail.name }}</div>
      <div class="mouse-flow-dep">{{ mouseBenchDetail.Platform }}</div>
      <div class="mouse-flow-status" :class="mouseBenchDetail.status"></div>
    </div> -->
    <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 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,
  },
  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: 0,
      occupiedCount: 0,
      offlineCount: 0,
      previousSelectedBenchList: [],
      selectedBenchList: [],
      renderBenchList: true,
      filters: [],
      currentCase: null,
      currentIssue: null,
      currentPlanId: null,
      currentPlanName: null,
      currentCaseIndex: 0,
      tabs: [
        {
          title: "Bench",
          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: "Task",
          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: "Issue",
          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",
            },
          ],
        },
      ],
      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: {},
      brnchshow: true, //用来判断是否点击过一次
    };
  },
  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) => {
        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) => {
        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() {
    // 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.bmMapItemOut = this.bmMapItemOut.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,
    });
    this.$store.dispatch("issueList/fetchIssueList", {
      bench_id: null,
      page_num: 1,
      page_size: 10,
      processor: 0,
      ticket_status: 0,
      ticket_type: 0,
    });
    window.bmMapItemActivate = this.bmMapItemActivate;
    
    // 获取奥迪-台架列表
    this.$store.dispatch("benchList/fetchBenchList").then(() => {
      // 加载右侧台架照片
      this.getImageName();
      // 更新台架各状态总台数
      // this.refreshBenchStatus();

      this.benchList.forEach( (item, index) => {
        // 获取奥迪-各台架详情
        this.$store.dispatch("benchList/getBenchDetail", item.id).then(() => {
          // 获取全部台架信息后
          if (this.benchList.length - 1 == index) {
            // 更新台架各状态总台数
            this.refreshBenchStatus(); 
          }
        })
      });
      // setTimeout(() => { // 请求异步原因，强制2秒后执行
      //   console.log("各状态台架数量刷新时间：", Date.now());
      //   this.refreshBenchStatus(); // 更新台架各状态总台数
      // }, 1000);
    });
  },

  mounted() {
    that = this;
    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);
    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) {
        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(() => {
            wsArray[i]
              ?.connectBench({ bench_id: String(benchId) })
              .then((res) => {
                self.getBenchImage(benchId, 1, wsArray[i], () => {});
              })
              .catch((err) => {
                this.$message({
                  message: "This bench is offline",
                  type: "warning",
                });
              });
          }, iW * 2000);
        }
      }
    }, 3000);

    // 调用定时器方法，返回定时器id，用于按条件清空
    that.timerId = that.myInterval((count) => {
      this.$store.dispatch("benchList/fetchBenchList").then(() => {
        // this.refreshBenchStatus();
        // if (!this.waterdotrefresh) {
        //   this.waterdotrefresh = true;
        //   window.getsqlData(window.sdkInstance, window.uwbInstance,true)
        // }
        // setTimeout(() => { // 请求异步原因，强制2秒后执行
        //   console.log("各状态台架数量刷新时间：", Date.now());
        //   this.refreshBenchStatus(); // 更新台架各状态总台数
        //   window.getsqlDataRealTime();
        // }, 1000);

        // 加载右侧台架照片
        this.getImageName();
        // 获取奥迪-各台架详情
        this.benchList.forEach( (item, index) => {
          this.$store.dispatch("benchList/getBenchDetail", item.id).then(() => {
            // 获取全部台架信息后
            if (this.benchList.length - 1 == index) {
              // 更新台架各状态总台数
              this.refreshBenchStatus();
              // 更新水滴、台架模型
              window.getsqlDataRealTime();
            }
          })
        })

        if (count > 30000) {
          that.clearMyInterval(that.timerId);
        }
      });
    }, 10000);

    bus.on("newLog", (param) => {
      if (param.action) {
        this.benchLog.unshift(param);
        // document.getElementsByClassName("bmLogBottom")[0].scrollIntoView();
        if (Object.keys(param.action).length != 0) {
          let position = param.action.pos;
          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") {
            let fileName = param.action.file_name;
            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: {
    getImageName() {
      var sqlstr = "SELECT * FROM dat_bench_extend order by bench_id asc";
      let msg = {
        cmd: "query", // server端要进行判断的
        data: {
          name: "name", // 这个无所谓怎么写，有就行
          sql: sqlstr,
        },
      };
      window.vm.$socket.emit("REPT", msg, (datas) => {
        let result = datas.data;
        for (var item of result) {
          var currentBench = this.benchList.find((a) => a.id == item.bench_id);
          if (currentBench) {
            currentBench.image = require("../../assets/bench_img/" + item.bench_img);
          }
          this.tabs[0].list = this.benchList;
        }
      });
    },
    // getBenchPos() {
    //   var sqlstr = "SELECT * FROM dat_bench_extend order by bench_id asc";
    //   let msg = {
    //     cmd: "query", // server端要进行判断的
    //     data: {
    //       name: "name", // 这个无所谓怎么写，有就行
    //       //sql: 'select * from his_location_tadiao_result_unity limit 300'
    //       sql: sqlstr,
    //     },
    //   };
    //   window.vm.$socket.emit("REPT", msg, (datas) => {
    //     posArrayResult = datas.data;
    //     window.benchDBList = datas.data;
    //     window.getsqlData(window.sdkInstance, window.uwbInstance, true, posArrayResult);
    //   });
    // },


    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) {
      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;
    },
    selectRowPlan(id, auto, name) {
      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;
    },
    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");
        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) {
      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,
        });
      });
    },
    handleClickIssue(issueId) {},
    showBenchPos(benchList) {
      for (var item of benchList) {
        var currentBench = this.benchList.find((b) => b.id == item.benchId);
        if (currentBench) {
          currentBench.left = item.x - 548 + 48;
          currentBench.top = item.y - 137 - 150 + 11;
          currentBench.benchId = item.benchId;
          currentBench.benchType = item.benchType;
          currentBench.image = require("../../assets/bench_img/" + item.benchImg);

          if (currentBench.benchType == 1) {
            //currentBench.image = require("../../assets/mechine.png");
          } else if (currentBench.benchType == 2) {
            //currentBench.image = require("../../assets/mechine2.png");
          } else {

          }
        }
      }
      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) {
      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) {
      let benchId = objRBL.pop();
      if (benchId == null) {
        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("item == benchId", remoteBenchList.find((item) => item == benchid));
            if (remoteBenchList.find((item) => item == benchid)) {
              this.selectBench(parseInt(benchid));
            }
          }
        }, 200);
        return;
      }
      let self = this;
      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) => {
          self.$message({
            message: "This bench is offline",
            type: "warning",
          });
        });
    },
    gotoGrid() {
      this.$router.push({
        path: "/squarePage",
      });
    },
    itemRender(item) {
      if (item.groups["Basic Information"].Display == "DUO") {
        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-s-platform ${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>`;
      }else{
        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>`;
      }
      // 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) {
      this.currentBench = this.benchList.find((b) => b.id == benchId);

      this.isDetailVisible = true;
    },
    dataCallBack(data) {
      switch (data.method) {
        case "get_image":
          this.handleGetImageData(data.data.data);
          break;
      }
    },
    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(() => {
        wsArray[i]
          ?.connectBench({ bench_id: String(benchId) })
          .then((res) => {
            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) => {
            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);
      }
      let bench = this.benchList.find((b) => b.id == benchId);
      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);
        // 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.",
          type: "warning",
        });
        return;
      }
      this.selectedBenchList = [this.selectedBenchList[0]];
      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(() => {
        ws.connectBench({ bench_id: String(benchId) })
          .then((res) => {
            self.isConnected = true;
            this.$store.dispatch("common/setConnectedStatus", true);
            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) => {
            this.benchList[key].acitveAnimation = false;
            this.$message({
              message: "This bench is offline",
              type: "warning",
            });
          });
      }, 300);
    },
    switchScreen() {
      if (this.currentScreen == "upper") {
        this.currentScreen = "lower";
      } else {
        this.currentScreen = "upper";
      }
    },
    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) {
        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
        ) {
          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;
      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));
        }
        let operationDesc = "";
        if (operation == "tap") {
          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]++;
        }
      }
      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) => {});
      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;
      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,
          //     };
          //   });
        }
      }
    },
    // 暂未发现用处
    getBenchDetail(id, index) {
      let self = this;
      let getBenchParam = { id };
      srv
        .getBenchDetail(getBenchParam)
        .then((res) => {
          this.benchList[index].status = res.data.data.status;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 暂未发现用处
    sleep(delay) {
      var start = new Date().getTime();
      while (new Date().getTime() - start < delay) {
        continue;
      }
    },

    tapModeControl() {
      this.displayTapMode = !this.displayTapMode;
    },
    showLogBox() {
      let self = this;
      if (this.ifShowLogBox) {
        ws.unsubscribeBenchStatus({ bench_id: this.connetedBenchId }).then((res) => {});
      } else {
        ws.subscribeBenchStatus({ bench_id: this.connetedBenchId }).then((res) => {});
      }
      this.benchLog = [];
      this.ifShowLogBox = !this.ifShowLogBox;
    },
    connectAudioDevice(type) {
      let self = this;
      ws.connect_audio_device({
        benchId: String(this.connetedBenchId),
      }).then(
        (res) => {
          if (type == "playAudio") {
            this.isRecording = !this.isRecording;
            self.recordAudio();
          } else if (type == "collectAudio") {
            self.collectAudio();
          }
        },
        (rej) => {}
      );
    },
    recordAudio(data) {
      let self = this;
      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) => {},
          (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) {
          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;
        }
        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;
          }
        }
      }
      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();
        });
      }
      this.$forceUpdate();
    },
    bmMapItemOut(key) {
      // this.$set(this.benchList[key], "selected", false);

      this.benchList[key].selected = false;
      this.$forceUpdate();
    },
    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);
      });
    },

    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) {}
      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";
            if (this.images[index].alt == benchId) {
              items[index].style.background = "#ffffff";
            }
          }
          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) {
            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";
          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;
          }
        }
        // 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)}"
        this.isRemoteBtnVisible = true;
        this.isDetailVisible = true;
      });
    },
    getBenchImage(benchId, screenType, wsRemote, func) {
      let self = this;
      setTimeout(() => {
        wsRemote.getImage(String(benchId), screenType).then((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) => {
          // 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) {
          if (this.brnchshow) {
            benchId = 0;
            let items = document.getElementsByClassName("grid-item-background");
            for (var index = 0; index < items.length; index++) {
              items[index].style.background = "#000000";
              if (index == indexParam) {
                items[index].style.background = "#ffffff";
              }
            }
            this.brnchshow = false;

            return;
          } else {
            this.brnchshow = true;
          }
        }
        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) {
        //     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");
          let itemOther = this.benchList.find(
            (b) => parseInt(b.id) == parseInt(title[0].textContent) || b.id == benchId
          );
          if(itemOther){
            itemOther.selected = false;
          }
          // 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();
      var objRBL = this.remoteBenchList;
      if (objRBL) {
        for (var i = 0; i < objRBL.length; i++) {
          if (parseInt(objRBL[i]) == parseInt(benchId)) {
            for (var ii = 0; ii < this.images.length; ii++) {
              if (parseInt(this.images[ii].alt) == parseInt(benchId)) {
                this.images.splice(ii, 1);
                break;
              }
            }
            //delete objRBL[i];
            objRBL.splice(i, 1);
            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;
          }
        }
      }
    },
    refreshBenchStatus() {
      var readyCount = 0;
      var occupiedCount = 0;
      var offlineCount = 0;
      this.benchList.forEach((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) {
      var objRBL = this.remoteBenchList;
      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;
} */

.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>