<template>
  <div style="flex: 1">
    <div class="threeDimensionalChart">
      <div class="bg" style="width: 1433px;height: 487px">
        <div class="statusItem">
          <!-- 框绞1号线设备1空盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`FK1010${i}`" :ref="`FK1010${i}`" class="location" :style="{
            top: `${84 + (i - 1) * 13}px`,
            left: '783px'
          }">
            <div :ref="`FK1010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK1010${i}L`)"></div>
            </div>
            <div :ref="`FK1010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK1010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备1空盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`FK1020${i}`" :ref="`FK1020${i}`" class="location" :style="{
            top: `${84 + (i - 1) * 13}px`,
            left: '810px'
          }">
            <div :ref="`FK1020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK1020${i}L`)"></div>
            </div>
            <div :ref="`FK1020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK1020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备1满盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`FM1010${i}`" :ref="`FM1010${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '700px'
          }">
            <div :ref="`FM1010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM1010${i}L`)"></div>
            </div>
            <div :ref="`FM1010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM1010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备1满盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`FM1020${i}`" :ref="`FM1020${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '740px'
          }">
            <div :ref="`FM1020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM1020${i}L`)"></div>
            </div>
            <div :ref="`FM1020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM1020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备2空盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`FK2010${i}`" :ref="`FK2010${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '627px'
          }">
            <div :ref="`FK2010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK2010${i}L`)"></div>
            </div>
            <div :ref="`FK2010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK2010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备2满盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`FM2010${i}`" :ref="`FM2010${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '512px'
          }">
            <div :ref="`FM2010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM2010${i}L`)"></div>
            </div>
            <div :ref="`FM2010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM2010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备2满盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`FM2020${i}`" :ref="`FM2020${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '551px'
          }">
            <div :ref="`FM2020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM2020${i}L`)"></div>
            </div>
            <div :ref="`FM2020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM2020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备2满盘缓存区巷道3 -->
          <div v-for="i in 3" :key="`FM2030${i}`" :ref="`FM2030${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '578px'
          }">
            <div :ref="`FM2030${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM2030${i}L`)"></div>
            </div>
            <div :ref="`FM2030${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM2030${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备3空盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`FK3010${i}`" :ref="`FK3010${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '418px'
          }">
            <div :ref="`FK3010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK3010${i}L`)"></div>
            </div>
            <div :ref="`FK3010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK3010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备3空盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`FK3020${i}`" :ref="`FK3020${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '444px'
          }">
            <div :ref="`FK3020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK3020${i}L`)"></div>
            </div>
            <div :ref="`FK3020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK3020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备3空盘缓存区巷道3 -->
          <div v-for="i in 3" :key="`FK3030${i}`" :ref="`FK3030${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '470px'
          }">
            <div :ref="`FK3030${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK3030${i}L`)"></div>
            </div>
            <div :ref="`FK3030${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK3030${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备3满盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`FM3010${i}`" :ref="`FM3010${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '284px'
          }">
            <div :ref="`FM3010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM3010${i}L`)"></div>
            </div>
            <div :ref="`FM3010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM3010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备3满盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`FM3020${i}`" :ref="`FM3020${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '324px'
          }">
            <div :ref="`FM3020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM3020${i}L`)"></div>
            </div>
            <div :ref="`FM3020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM3020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备3满盘缓存区巷道3 -->
          <div v-for="i in 3" :key="`FM3030${i}`" :ref="`FM3030${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '349px'
          }">
            <div :ref="`FM3030${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM3030${i}L`)"></div>
            </div>
            <div :ref="`FM3030${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM3030${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备3满盘缓存区巷道4 -->
          <div v-for="i in 3" :key="`FM3040${i}`" :ref="`FM3040${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '376px'
          }">
            <div :ref="`FM3040${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM3040${i}L`)"></div>
            </div>
            <div :ref="`FM3040${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM3040${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备4空盘缓存区巷道1 -->
          <div v-for="i in 4" :key="`FK4010${i}`" :ref="`FK4010${i}`" class="location" :style="{
            top: `${71 + (i - 1) * 13}px`,
            left: '197px'
          }">
            <div :ref="`FK4010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK4010${i}L`)"></div>
            </div>
            <div :ref="`FK4010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK4010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备4空盘缓存区巷道2 -->
          <div v-for="i in 4" :key="`FK4020${i}`" :ref="`FK4020${i}`" class="location" :style="{
            top: `${71 + (i - 1) * 13}px`,
            left: '224px'
          }">
            <div :ref="`FK4020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK4020${i}L`)"></div>
            </div>
            <div :ref="`FK4020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK4020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备4空盘缓存区巷道3 -->
          <div v-for="i in 4" :key="`FK4030${i}`" :ref="`FK4030${i}`" class="location" :style="{
            top: `${71 + (i - 1) * 13}px`,
            left: '250px'
          }">
            <div :ref="`FK4030${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK4030${i}L`)"></div>
            </div>
            <div :ref="`FK4030${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FK4030${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备4满盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`FM4010${i}`" :ref="`FM4010${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '34.5px'
          }">
            <div :ref="`FM4010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM4010${i}L`)"></div>
            </div>
            <div :ref="`FM4010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM4010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备4满盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`FM4020${i}`" :ref="`FM4020${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '62px'
          }">
            <div :ref="`FM4020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM4020${i}L`)"></div>
            </div>
            <div :ref="`FM4020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM4020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备4满盘缓存区巷道3 -->
          <div v-for="i in 3" :key="`FM4030${i}`" :ref="`FM4030${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '100px'
          }">
            <div :ref="`FM4030${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM4030${i}L`)"></div>
            </div>
            <div :ref="`FM4030${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM4030${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备4满盘缓存区巷道4 -->
          <div v-for="i in 3" :key="`FM4040${i}`" :ref="`FM4040${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '127px'
          }">
            <div :ref="`FM4040${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM4040${i}L`)"></div>
            </div>
            <div :ref="`FM4040${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM4040${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞1号线设备4满盘缓存区巷道5 -->
          <div v-for="i in 3" :key="`FM4050${i}`" :ref="`FM4050${i}`" class="location" :style="{
            top: `${83 + (i - 1) * 13}px`,
            left: '154px'
          }">
            <div :ref="`FM4050${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM4050${i}L`)"></div>
            </div>
            <div :ref="`FM4050${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`FM4050${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞2号线设备3满盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`GM3010${i}`" :ref="`GM3010${i}`" class="location" :style="{
            top: `${249 + (i - 1) * 13}px`,
            left: '34.5px'
          }">
            <div :ref="`GM3010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM3010${i}L`)"></div>
            </div>
            <div :ref="`GM3010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM3010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞2号线设备3满盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`GM3020${i}`" :ref="`GM3020${i}`" class="location" :style="{
            top: `${249 + (i - 1) * 13}px`,
            left: '90px'
          }">
            <div :ref="`GM3020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM3020${i}L`)"></div>
            </div>
            <div :ref="`GM3020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM3020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞2号线设备3满盘缓存区巷道3 -->
          <div v-for="i in 3" :key="`GM3030${i}`" :ref="`GM3030${i}`" class="location" :style="{
            top: `${249 + (i - 1) * 13}px`,
            left: '116px'
          }">
            <div :ref="`GM3030${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM3030${i}L`)"></div>
            </div>
            <div :ref="`GM3030${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM3030${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞2号线设备3满盘缓存区巷道4 -->
          <div v-for="i in 3" :key="`GM3040${i}`" :ref="`GM3040${i}`" class="location" :style="{
            top: `${249 + (i - 1) * 13}px`,
            left: '143px'
          }">
            <div :ref="`GM3040${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM3040${i}L`)"></div>
            </div>
            <div :ref="`GM3040${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM3040${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞2号线设备3空盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`GK3010${i}`" :ref="`GK3010${i}`" class="location" :style="{
            top: `${249 + (i - 1) * 13}px`,
            left: '181px'
          }">
            <div :ref="`GK3010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GK3010${i}L`)"></div>
            </div>
            <div :ref="`GK3010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GK3010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞2号线设备3空盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`GK3020${i}`" :ref="`GK3020${i}`" class="location" :style="{
            top: `${249 + (i - 1) * 13}px`,
            left: '206px'
          }">
            <div :ref="`GK3020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GK3020${i}L`)"></div>
            </div>
            <div :ref="`GK3020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GK3020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞2号线设备3空盘缓存区巷道3 -->
          <div v-for="i in 3" :key="`GK3030${i}`" :ref="`GK3030${i}`" class="location" :style="{
            top: `${249 + (i - 1) * 13}px`,
            left: '234px'
          }">
            <div :ref="`GK3030${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GK3030${i}L`)"></div>
            </div>
            <div :ref="`GK3030${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GK3030${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞2号线设备2满盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`GM2010${i}`" :ref="`GM2010${i}`" class="location" :style="{
            top: `${249 + (i - 1) * 13}px`,
            left: '264px'
          }">
            <div :ref="`GM2010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM2010${i}L`)"></div>
            </div>
            <div :ref="`GM2010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM2010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞2号线设备2满盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`GM2020${i}`" :ref="`GM2020${i}`" class="location" :style="{
            top: `${249 + (i - 1) * 13}px`,
            left: '308px'
          }">
            <div :ref="`GM2020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM2020${i}L`)"></div>
            </div>
            <div :ref="`GM2020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM2020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞2号线设备2满盘缓存区巷道3 -->
          <div v-for="i in 3" :key="`GM2030${i}`" :ref="`GM2030${i}`" class="location" :style="{
            top: `${249 + (i - 1) * 13}px`,
            left: '335px'
          }">
            <div :ref="`GM2030${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM2030${i}L`)"></div>
            </div>
            <div :ref="`GM2030${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM2030${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞2号线设备2空盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`GK2010${i}`" :ref="`GK2010${i}`" class="location" :style="{
            top: `${249 + (i - 1) * 13}px`,
            left: '382px'
          }">
            <div :ref="`GK2010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GK2010${i}L`)"></div>
            </div>
            <div :ref="`GK2010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GK2010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞2号线设备2空盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`GK2020${i}`" :ref="`GK2020${i}`" class="location" :style="{
            top: `${249 + (i - 1) * 13}px`,
            left: '409px'
          }">
            <div :ref="`GK2020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GK2020${i}L`)"></div>
            </div>
            <div :ref="`GK2020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GK2020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞2号线设备1满盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`GM1010${i}`" :ref="`GM1010${i}`" class="location" :style="{
            top: `${249 + (i - 1) * 13}px`,
            left: '459px'
          }">
            <div :ref="`GM1010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM1010${i}L`)"></div>
            </div>
            <div :ref="`GM1010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM1010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞2号线设备1满盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`GM1020${i}`" :ref="`GM1020${i}`" class="location" :style="{
            top: `${249 + (i - 1) * 13}px`,
            left: '498px'
          }">
            <div :ref="`GM1020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM1020${i}L`)"></div>
            </div>
            <div :ref="`GM1020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GM1020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞2号线设备1空盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`GK1010${i}`" :ref="`GK1010${i}`" class="location" :style="{
            top: `${249 + (i - 1) * 13}px`,
            left: '542px'
          }">
            <div :ref="`GK1010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GK1010${i}L`)"></div>
            </div>
            <div :ref="`GK1010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GK1010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞2号线设备1空盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`GK1020${i}`" :ref="`GK1020${i}`" class="location" :style="{
            top: `${249 + (i - 1) * 13}px`,
            left: '570px'
          }">
            <div :ref="`GK1020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GK1020${i}L`)"></div>
            </div>
            <div :ref="`GK1020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`GK1020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备1空盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`HK1010${i}`" :ref="`HK1010${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '770px'
          }">
            <div :ref="`HK1010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK1010${i}L`)"></div>
            </div>
            <div :ref="`HK1010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK1010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备1空盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`HK1020${i}`" :ref="`HK1020${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '795px'
          }">
            <div :ref="`HK1020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK1020${i}L`)"></div>
            </div>
            <div :ref="`HK1020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK1020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备1满盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`HM1010${i}`" :ref="`HM1010${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '690px'
          }">
            <div :ref="`HM1010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM1010${i}L`)"></div>
            </div>
            <div :ref="`HM1010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM1010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备1满盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`HM1020${i}`" :ref="`HM1020${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '725px'
          }">
            <div :ref="`HM1020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM1020${i}L`)"></div>
            </div>
            <div :ref="`HM1020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM1020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备2空盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`HK2010${i}`" :ref="`HK2010${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '612px'
          }">
            <div :ref="`HK2010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK2010${i}L`)"></div>
            </div>
            <div :ref="`HK2010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK2010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备2空盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`HK2020${i}`" :ref="`HK2020${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '638px'
          }">
            <div :ref="`HK2020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK2020${i}L`)"></div>
            </div>
            <div :ref="`HK2020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK2020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备2满盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`HM2010${i}`" :ref="`HM2010${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '494px'
          }">
            <div :ref="`HM2010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM2010${i}L`)"></div>
            </div>
            <div :ref="`HM2010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM2010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备2满盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`HM2020${i}`" :ref="`HM2020${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '538px'
          }">
            <div :ref="`HM2020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM2020${i}L`)"></div>
            </div>
            <div :ref="`HM2020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM2020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备2满盘缓存区巷道3 -->
          <div v-for="i in 3" :key="`HM2030${i}`" :ref="`HM2030${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '566px'
          }">
            <div :ref="`HM2030${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM2030${i}L`)"></div>
            </div>
            <div :ref="`HM2030${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM2030${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备3空盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`HK3010${i}`" :ref="`HK3010${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '408px'
          }">
            <div :ref="`HK3010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK3010${i}L`)"></div>
            </div>
            <div :ref="`HK3010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK3010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备3空盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`HK3020${i}`" :ref="`HK3020${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '436px'
          }">
            <div :ref="`HK3020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK3020${i}L`)"></div>
            </div>
            <div :ref="`HK3020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK3020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备3空盘缓存区巷道3 -->
          <div v-for="i in 3" :key="`HK3030${i}`" :ref="`HK3030${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '464px'
          }">
            <div :ref="`HK3030${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK3030${i}L`)"></div>
            </div>
            <div :ref="`HK3030${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK3030${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备3满盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`HM3010${i}`" :ref="`HM3010${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '273px'
          }">
            <div :ref="`HM3010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM3010${i}L`)"></div>
            </div>
            <div :ref="`HM3010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM3010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备3满盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`HM3020${i}`" :ref="`HM3020${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '313px'
          }">
            <div :ref="`HM3020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM3020${i}L`)"></div>
            </div>
            <div :ref="`HM3020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM3020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备3满盘缓存区巷道3 -->
          <div v-for="i in 3" :key="`HM3030${i}`" :ref="`HM3030${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '339px'
          }">
            <div :ref="`HM3030${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM3030${i}L`)"></div>
            </div>
            <div :ref="`HM3030${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM3030${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备3满盘缓存区巷道4 -->
          <div v-for="i in 3" :key="`HM3040${i}`" :ref="`HM3040${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '366px'
          }">
            <div :ref="`HM3040${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM3040${i}L`)"></div>
            </div>
            <div :ref="`HM3040${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM3040${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备4空盘缓存区巷道1 -->
          <div v-for="i in 4" :key="`HK4010${i}`" :ref="`HK4010${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '182px'
          }">
            <div :ref="`HK4010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK4010${i}L`)"></div>
            </div>
            <div :ref="`HK4010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK4010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备4空盘缓存区巷道2 -->
          <div v-for="i in 4" :key="`HK4020${i}`" :ref="`HK4020${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '208px'
          }">
            <div :ref="`HK4020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK4020${i}L`)"></div>
            </div>
            <div :ref="`HK4020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK4020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备4空盘缓存区巷道3 -->
          <div v-for="i in 4" :key="`HK4030${i}`" :ref="`HK4030${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '236px'
          }">
            <div :ref="`HK4030${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK4030${i}L`)"></div>
            </div>
            <div :ref="`HK4030${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HK4030${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备4满盘缓存区巷道1 -->
          <div v-for="i in 3" :key="`HM4010${i}`" :ref="`HM4010${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '24px'
          }">
            <div :ref="`HM4010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM4010${i}L`)"></div>
            </div>
            <div :ref="`HM4010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM4010${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备4满盘缓存区巷道2 -->
          <div v-for="i in 3" :key="`HM4020${i}`" :ref="`HM4020${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '52px'
          }">
            <div :ref="`HM4020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM4020${i}L`)"></div>
            </div>
            <div :ref="`HM4020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM4020${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备4满盘缓存区巷道3 -->
          <div v-for="i in 3" :key="`HM4030${i}`" :ref="`HM4030${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '90px'
          }">
            <div :ref="`HM4030${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM4030${i}L`)"></div>
            </div>
            <div :ref="`HM4030${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM4030${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备4满盘缓存区巷道4 -->
          <div v-for="i in 3" :key="`HM4040${i}`" :ref="`HM4040${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '116px'
          }">
            <div :ref="`HM4040${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM4040${i}L`)"></div>
            </div>
            <div :ref="`HM4040${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM4040${i}R`)"></div>
            </div>
          </div>

          <!-- 框绞3号线设备4满盘缓存区巷道5 -->
          <div v-for="i in 3" :key="`HM4050${i}`" :ref="`HM4050${i}`" class="location" :style="{
            top: `${396 + (i - 1) * 13}px`,
            left: '142px'
          }">
            <div :ref="`HM4050${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM4050${i}L`)"></div>
            </div>
            <div :ref="`HM4050${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`HM4050${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区1巷道1 -->
          <div v-for="i in 7" :key="`CM1010${i}`" :ref="`CM1010${i}`" class="location" :style="{
            top: `${44 + (i - 1) * 13}px`,
            left: '882px'
          }">
            <div :ref="`CM1010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`CM1010${i}L`)"></div>
            </div>
            <div :ref="`CM1010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`CM1010${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区1巷道2 -->
          <div v-for="i in 7" :key="`CM1020${i}`" :ref="`CM1020${i}`" class="location" :style="{
            top: `${44 + (i - 1) * 13}px`,
            left: '916px'
          }">
            <div :ref="`CM1020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`CM1020${i}L`)"></div>
            </div>
            <div :ref="`CM1020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`CM1020${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区1巷道3 -->
          <div v-for="i in 7" :key="`CM1030${i}`" :ref="`CM1030${i}`" class="location" :style="{
            top: `${44 + (i - 1) * 13}px`,
            left: '950px'
          }">
            <div :ref="`CM1030${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`CM1030${i}L`)"></div>
            </div>
            <div :ref="`CM1030${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`CM1030${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区1巷道4 -->
          <div v-for="i in 7" :key="`CM1040${i}`" :ref="`CM1040${i}`" class="location" :style="{
            top: `${44 + (i - 1) * 13}px`,
            left: '984px'
          }">
            <div :ref="`CM1040${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`CM1040${i}L`)"></div>
            </div>
            <div :ref="`CM1040${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`CM1040${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区1巷道5 -->
          <div v-for="i in 7" :key="`CM1050${i}`" :ref="`CM1050${i}`" class="location" :style="{
            top: `${44 + (i - 1) * 13}px`,
            left: '1019px'
          }">
            <div :ref="`CM1050${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`CM1050${i}L`)"></div>
            </div>
            <div :ref="`CM1050${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`CM1050${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区1巷道6 -->
          <div v-for="i in 7" :key="`CM1060${i}`" :ref="`CM1060${i}`" class="location" :style="{
            top: `${44 + (i - 1) * 13}px`,
            left: '1052px'
          }">
            <div :ref="`CM1060${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`CM1060${i}L`)"></div>
            </div>
            <div :ref="`CM1060${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`CM1060${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区2巷道1 -->
          <div v-for="i in 3" :key="`BM1010${i}`" :ref="`BM1010${i}`" class="location" :style="{
            top: `${201 + (i - 1) * 13}px`,
            left: '706px'
          }">
            <div :ref="`BM1010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1010${i}L`)"></div>
            </div>
            <div :ref="`BM1010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1010${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区2巷道2 -->
          <div v-for="i in 3" :key="`BM1020${i}`" :ref="`BM1020${i}`" class="location" :style="{
            top: `${201 + (i - 1) * 13}px`,
            left: '740px'
          }">
            <div :ref="`BM1020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1020${i}L`)"></div>
            </div>
            <div :ref="`BM1020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1020${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区2巷道3 -->
          <div v-for="i in 3" :key="`BM1030${i}`" :ref="`BM1030${i}`" class="location" :style="{
            top: `${201 + (i - 1) * 13}px`,
            left: '774px'
          }">
            <div :ref="`BM1030${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1030${i}L`)"></div>
            </div>
            <div :ref="`BM1030${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1030${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区2巷道4 -->
          <div v-for="i in 3" :key="`BM1040${i}`" :ref="`BM1040${i}`" class="location" :style="{
            top: `${201 + (i - 1) * 13}px`,
            left: '808px'
          }">
            <div :ref="`BM1040${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1040${i}L`)"></div>
            </div>
            <div :ref="`BM1040${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1040${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区2巷道5 -->
          <div v-for="i in 3" :key="`BM1050${i}`" :ref="`BM1050${i}`" class="location" :style="{
            top: `${201 + (i - 1) * 13}px`,
            left: '842px'
          }">
            <div :ref="`BM1050${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1050${i}L`)"></div>
            </div>
            <div :ref="`BM1050${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1050${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区2巷道6 -->
          <div v-for="i in 3" :key="`BM1060${i}`" :ref="`BM1060${i}`" class="location" :style="{
            top: `${201 + (i - 1) * 13}px`,
            left: '878px'
          }">
            <div :ref="`BM1060${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1060${i}L`)"></div>
            </div>
            <div :ref="`BM1060${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1060${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区2巷道7 -->
          <div v-for="i in 3" :key="`BM1070${i}`" :ref="`BM1070${i}`" class="location" :style="{
            top: `${201 + (i - 1) * 13}px`,
            left: '910px'
          }">
            <div :ref="`BM1070${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1070${i}L`)"></div>
            </div>
            <div :ref="`BM1070${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1070${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区2巷道8 -->
          <div v-for="i in 3" :key="`BM1080${i}`" :ref="`BM1080${i}`" class="location" :style="{
            top: `${201 + (i - 1) * 13}px`,
            left: '946px'
          }">
            <div :ref="`BM1080${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1080${i}L`)"></div>
            </div>
            <div :ref="`BM1080${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1080${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区2巷道9 -->
          <div v-for="i in 3" :key="`BM1090${i}`" :ref="`BM1090${i}`" class="location" :style="{
            top: `${201 + (i - 1) * 13}px`,
            left: '980px'
          }">
            <div :ref="`BM1090${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1090${i}L`)"></div>
            </div>
            <div :ref="`BM1090${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1090${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区2巷道10 -->
          <div v-for="i in 3" :key="`BM1100${i}`" :ref="`BM1100${i}`" class="location" :style="{
            top: `${201 + (i - 1) * 13}px`,
            left: '1012px'
          }">
            <div :ref="`BM1100${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1100${i}L`)"></div>
            </div>
            <div :ref="`BM1100${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1100${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区2巷道11 -->
          <div v-for="i in 3" :key="`BM1110${i}`" :ref="`BM1110${i}`" class="location" :style="{
            top: `${201 + (i - 1) * 13}px`,
            left: '1048px'
          }">
            <div :ref="`BM1110${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1110${i}L`)"></div>
            </div>
            <div :ref="`BM1110${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM1110${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区3巷道1 -->
          <div v-for="i in 4" :key="`BM2010${i}`" :ref="`BM2010${i}`" class="location" :style="{
            top: `${250 + (i - 1) * 13}px`,
            left: '706px'
          }">
            <div :ref="`BM2010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2010${i}L`)"></div>
            </div>
            <div :ref="`BM2010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2010${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区3巷道2 -->
          <div v-for="i in 4" :key="`BM2020${i}`" :ref="`BM2020${i}`" class="location" :style="{
            top: `${250 + (i - 1) * 13}px`,
            left: '740px'
          }">
            <div :ref="`BM2020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2020${i}L`)"></div>
            </div>
            <div :ref="`BM2020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2020${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区3巷道3 -->
          <div v-for="i in 4" :key="`BM2030${i}`" :ref="`BM2030${i}`" class="location" :style="{
            top: `${250 + (i - 1) * 13}px`,
            left: '774px'
          }">
            <div :ref="`BM2030${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2030${i}L`)"></div>
            </div>
            <div :ref="`BM2030${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2030${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区3巷道4 -->
          <div v-for="i in 4" :key="`BM2040${i}`" :ref="`BM2040${i}`" class="location" :style="{
            top: `${250 + (i - 1) * 13}px`,
            left: '808px'
          }">
            <div :ref="`BM2040${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2040${i}L`)"></div>
            </div>
            <div :ref="`BM2040${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2040${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区3巷道5 -->
          <div v-for="i in 4" :key="`BM2050${i}`" :ref="`BM2050${i}`" class="location" :style="{
            top: `${250 + (i - 1) * 13}px`,
            left: '842px'
          }">
            <div :ref="`BM2050${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2050${i}L`)"></div>
            </div>
            <div :ref="`BM2050${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2050${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区3巷道6 -->
          <div v-for="i in 4" :key="`BM2060${i}`" :ref="`BM2060${i}`" class="location" :style="{
            top: `${250 + (i - 1) * 13}px`,
            left: '878px'
          }">
            <div :ref="`BM2060${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2060${i}L`)"></div>
            </div>
            <div :ref="`BM2060${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2060${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区3巷道7 -->
          <div v-for="i in 4" :key="`BM2070${i}`" :ref="`BM2070${i}`" class="location" :style="{
            top: `${250 + (i - 1) * 13}px`,
            left: '910px'
          }">
            <div :ref="`BM2070${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2070${i}L`)"></div>
            </div>
            <div :ref="`BM2070${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2070${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区3巷道8 -->
          <div v-for="i in 4" :key="`BM2080${i}`" :ref="`BM2080${i}`" class="location" :style="{
            top: `${250 + (i - 1) * 13}px`,
            left: '946px'
          }">
            <div :ref="`BM2080${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2080${i}L`)"></div>
            </div>
            <div :ref="`BM2080${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2080${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区3巷道9 -->
          <div v-for="i in 4" :key="`BM2090${i}`" :ref="`BM2090${i}`" class="location" :style="{
            top: `${250 + (i - 1) * 13}px`,
            left: '980px'
          }">
            <div :ref="`BM2090${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2090${i}L`)"></div>
            </div>
            <div :ref="`BM2090${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2090${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区3巷道10 -->
          <div v-for="i in 4" :key="`BM2100${i}`" :ref="`BM2100${i}`" class="location" :style="{
            top: `${250 + (i - 1) * 13}px`,
            left: '1012px'
          }">
            <div :ref="`BM2100${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2100${i}L`)"></div>
            </div>
            <div :ref="`BM2100${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2100${i}R`)"></div>
            </div>
          </div>

          <!-- 满盘缓存区3巷道11 -->
          <div v-for="i in 4" :key="`BM2110${i}`" :ref="`BM2110${i}`" class="location" :style="{
            top: `${250 + (i - 1) * 13}px`,
            left: '1048px'
          }">
            <div :ref="`BM2110${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2110${i}L`)"></div>
            </div>
            <div :ref="`BM2110${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`BM2110${i}R`)"></div>
            </div>
          </div>

          <!-- 空盘缓存区1巷道1 -->
          <div v-for="i in 7" :key="`DK1010${i}`" :ref="`DK1010${i}`" class="location" :style="{
            top: `${384 + (i - 1) * 13}px`,
            left: '888px'
          }">
            <div :ref="`DK1010${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`DK1010${i}L`)"></div>
            </div>
            <div :ref="`DK1010${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`DK1010${i}R`)"></div>
            </div>
          </div>

          <!-- 空盘缓存区1巷道2 -->
          <div v-for="i in 7" :key="`DK1020${i}`" :ref="`DK1020${i}`" class="location" :style="{
            top: `${384 + (i - 1) * 13}px`,
            left: '920px'
          }">
            <div :ref="`DK1020${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`DK1020${i}L`)"></div>
            </div>
            <div :ref="`DK1020${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`DK1020${i}R`)"></div>
            </div>
          </div>

          <!-- 空盘缓存区1巷道3 -->
          <div v-for="i in 7" :key="`DK1030${i}`" :ref="`DK1030${i}`" class="location" :style="{
            top: `${384 + (i - 1) * 13}px`,
            left: '950px'
          }">
            <div :ref="`DK1030${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`DK1030${i}L`)"></div>
            </div>
            <div :ref="`DK1030${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`DK1030${i}R`)"></div>
            </div>
          </div>

          <!-- 空盘缓存区1巷道4 -->
          <div v-for="i in 7" :key="`DK1040${i}`" :ref="`DK1040${i}`" class="location" :style="{
            top: `${384 + (i - 1) * 13}px`,
            left: '982px'
          }">
            <div :ref="`DK1040${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`DK1040${i}L`)"></div>
            </div>
            <div :ref="`DK1040${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`DK1040${i}R`)"></div>
            </div>
          </div>

          <!-- 空盘缓存区1巷道5 -->
          <div v-for="i in 7" :key="`DK1050${i}`" :ref="`DK1050${i}`" class="location" :style="{
            top: `${384 + (i - 1) * 13}px`,
            left: '1014px'
          }">
            <div :ref="`DK1050${i}L`" style="width: 11px;
              height: 11px;
              padding: 1.5px;">
              <div :class="getPositionClass(`DK1050${i}L`)"></div>
            </div>
            <div :ref="`DK1050${i}R`" style="width: 11px;
              height: 11px;
              padding: 1.5px;">
              <div :class="getPositionClass(`DK1050${i}R`)"></div>
            </div>
          </div>

          <!-- 空盘缓存区1巷道6 -->
          <div v-for="i in 7" :key="`DK1060${i}`" :ref="`DK1060${i}`" class="location" :style="{
            top: `${384 + (i - 1) * 13}px`,
            left: '1044px'
          }">
            <div :ref="`DK1060${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`DK1060${i}L`)"></div>
            </div>
            <div :ref="`DK1060${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`DK1060${i}R`)"></div>
            </div>
          </div>

          <!-- 空盘缓存区1巷道7 -->
          <div v-for="i in 7" :key="`DK1070${i}`" :ref="`DK1070${i}`" class="location" :style="{
            top: `${384 + (i - 1) * 13}px`,
            left: '1074px'
          }">
            <div :ref="`DK1070${i}L`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`DK1070${i}L`)"></div>
            </div>
            <div :ref="`DK1070${i}R`" style="width: 11px;
height: 11px;
padding: 1.5px;">
              <div :class="getPositionClass(`DK1070${i}R`)"></div>
            </div>
          </div>

          <!-- 空盘缓存区1巷道8 -->
          <div v-for="i in 7" :key="`DK1080${i}`" :ref="`DK1080${i}`" class="location" :style="{
            top: `${384 + (i - 1) * 13}px`,
            left: '1106px'
          }">
            <div :ref="`DK1080${i}L`" style="width: 11px;
              height: 11px;
              padding: 1.5px;">
              <div :class="getPositionClass(`DK1080${i}L`)"></div>
            </div>
            <div :ref="`DK1080${i}R`" style="width: 11px;
            height: 11px;
            padding: 1.5px;">
              <div :class="getPositionClass(`DK1080${i}R`)"></div>
            </div>
          </div>

          <!-- 拉丝A线满盘缓存区第1巷道1排 -->
          <div v-for="i in 1" :key="`AM1010${i}`" :ref="`AM1010${i}`" class="locationColumn" :style="{
            top: `${93 + (i - 1) * 13}px`,
            left: '1171px'
          }">
            <div :ref="`AM1010${i}L`" style="width: 11px;
              height: 11px;
              padding: 1.5px;">
              <div :class="getPositionClass(`AM1010${i}L`)" ></div>
            </div>
            <div :ref="`AM1010${i}R`" style="width: 11px;
            height: 11px;
            padding: 1.5px; ">
              <div :class="getPositionClass(`AM1010${i}R`)" ></div>
            </div>
          </div>
          <!-- 拉丝A线满盘缓存区第2巷道1排 -->
          <div v-for="i in 1" :key="`AM1020${i}`" :ref="`AM1020${i}`" class="locationColumn" :style="{
            top: `${118 + (i - 1) * 13}px`,
            left: '1171px'
          }">
            <div :ref="`AM1020${i}L`" style="width: 11px;
              height: 11px;
              padding: 1.5px;">
              <div :class="getPositionClass(`AM1020${i}L`)" ></div>
            </div>
            <div :ref="`AM1020${i}R`" style="width: 11px;
            height: 11px;
            padding: 1.5px; ">
              <div :class="getPositionClass(`AM1020${i}R`)" ></div>
            </div>
          </div>
          <!-- 拉丝A线满盘缓存区第3巷道1排 -->
          <div v-for="i in 1" :key="`AM1030${i}`" :ref="`AM1030${i}`" class="locationColumn" :style="{
            top: `${145 + (i - 1) * 13}px`,
            left: '1171px'
          }">
            <div :ref="`AM1030${i}L`" style="width: 11px;
              height: 11px;
              padding: 1.5px;">
              <div :class="getPositionClass(`AM1030${i}L`)" ></div>
            </div>
            <div :ref="`AM1030${i}R`" style="width: 11px;
            height: 11px;
            padding: 1.5px; ">
              <div :class="getPositionClass(`AM1030${i}R`)" ></div>
            </div>
          </div>
          <!-- 拉丝A线满盘缓存区第4巷道1排 -->
          <div v-for="i in 1" :key="`AM1040${i}`" :ref="`AM1040${i}`" class="locationColumn" :style="{
            top: `${170 + (i - 1) * 13}px`,
            left: '1171px'
          }">
            <div :ref="`AM1040${i}L`" style="width: 11px;
              height: 11px;
              padding: 1.5px;">
              <div :class="getPositionClass(`AM1040${i}L`)" ></div>
            </div>
            <div :ref="`AM1040${i}R`" style="width: 11px;
            height: 11px;
            padding: 1.5px; ">
              <div :class="getPositionClass(`AM1040${i}R`)" ></div>
            </div>
          </div>
          <!-- 拉丝A线满盘缓存区第5巷道1排 -->
          <div v-for="i in 1" :key="`AM1050${i}`" :ref="`AM1050${i}`" class="locationColumn" :style="{
            top: `${196 + (i - 1) * 13}px`,
            left: '1171px'
          }">
            <div :ref="`AM1050${i}L`" style="width: 11px;
              height: 11px;
              padding: 1.5px;">
              <div :class="getPositionClass(`AM1050${i}L`)" ></div>
            </div>
            <div :ref="`AM1050${i}R`" style="width: 11px;
            height: 11px;
            padding: 1.5px; ">
              <div :class="getPositionClass(`AM1050${i}R`)" ></div>
            </div>
          </div>
          <!-- 拉丝A线满盘缓存区第6巷道1排 -->
          <div v-for="i in 1" :key="`AM1060${i}`" :ref="`AM1060${i}`" class="locationColumn" :style="{
            top: `${222 + (i - 1) * 13}px`,
            left: '1171px'
          }">
            <div :ref="`AM1060${i}L`" style="width: 11px;
              height: 11px;
              padding: 1.5px;">
              <div :class="getPositionClass(`AM1060${i}L`)" ></div>
            </div>
            <div :ref="`AM1060${i}R`" style="width: 11px;
            height: 11px;
            padding: 1.5px; ">
              <div :class="getPositionClass(`AM1060${i}R`)" ></div>
            </div>
          </div>
          <!-- 拉丝A线满盘缓存区第7巷道1排 -->
          <div v-for="i in 1" :key="`AM1070${i}`" :ref="`AM1070${i}`" class="locationColumn" :style="{
            top: `${248 + (i - 1) * 13}px`,
            left: '1171px'
          }">
            <div :ref="`AM1070${i}L`" style="width: 11px;
              height: 11px;
              padding: 1.5px;">
              <div :class="getPositionClass(`AM1070${i}L`)" ></div>
            </div>
            <div :ref="`AM1070${i}R`" style="width: 11px;
            height: 11px;
            padding: 1.5px; ">
              <div :class="getPositionClass(`AM1070${i}R`)" ></div>
            </div>
          </div>
          <!-- 拉丝A线满盘缓存区第8巷道1排 -->
          <div v-for="i in 1" :key="`AM1080${i}`" :ref="`AM1080$${i}`" class="locationColumn" :style="{
            top: `${274 + (i - 1) * 13}px`,
            left: '1171px'
          }">
            <div :ref="`AM1080$${i}L`" style="width: 11px;
              height: 11px;
              padding: 1.5px;">
              <div :class="getPositionClass(`AM1080$${i}L`)" ></div>
            </div>
            <div :ref="`AM1080$${i}R`" style="width: 11px;
            height: 11px;
            padding: 1.5px; ">
              <div :class="getPositionClass(`AM1080$${i}R`)" ></div>
            </div>
          </div>


          <!-- 拉丝B线满盘缓存区第1巷-->
          <div v-for="i in 1" :key="`AM2010${i}`" :ref="`AM2010${i}`" class="locationColumn" :style="{
            top: `${93 + (i - 1) * 13}px`,
            left: '1444px'
          }">
            <div :ref="`AM2010${i}L`" style="width: 11px;
    height: 11px;
    padding: 1.5px;">
              <div :class="getPositionClass(`AM2010${i}L`)" ></div>
            </div>
            <div :ref="`AM2010${i}R`" style="width: 11px;
  height: 11px;
  padding: 1.5px; ">
              <div :class="getPositionClass(`AM2010${i}R`)" ></div>
            </div>
          </div>
          <!-- 拉丝B线满盘缓存区第2巷道1排 -->
          <div v-for="i in 1" :key="`AM2020${i}`" :ref="`AM2020${i}`" class="locationColumn" :style="{
            top: `${118 + (i - 1) * 13}px`,
            left: '1444px'
          }">
            <div :ref="`AM2020${i}L`" style="width: 11px;
    height: 11px;
    padding: 1.5px;">
              <div :class="getPositionClass(`AM2020${i}L`)" ></div>
            </div>
            <div :ref="`AM2020${i}R`" style="width: 11px;
  height: 11px;
  padding: 1.5px; ">
              <div :class="getPositionClass(`AM2020${i}R`)" ></div>
            </div>
          </div>
          <!-- 拉丝B线满盘缓存区第3巷道1排 -->
          <div v-for="i in 1" :key="`AM2030${i}`" :ref="`AM2030${i}`" class="locationColumn" :style="{
            top: `${145 + (i - 1) * 13}px`,
            left: '1444px'
          }">
            <div :ref="`AM2030${i}L`" style="width: 11px;
    height: 11px;
    padding: 1.5px;">
              <div :class="getPositionClass(`AM2030${i}L`)" ></div>
            </div>
            <div :ref="`AM2030${i}R`" style="width: 11px;
  height: 11px;
  padding: 1.5px; ">
              <div :class="getPositionClass(`AM2030${i}R`)" ></div>
            </div>
          </div>
          <!-- 拉丝B线满盘缓存区第4巷道1排 -->
          <div v-for="i in 1" :key="`AM2040${i}`" :ref="`AM2040${i}`" class="locationColumn" :style="{
            top: `${170 + (i - 1) * 13}px`,
            left: '1444px'
          }">
            <div :ref="`AM2040${i}L`" style="width: 11px;
    height: 11px;
    padding: 1.5px;">
              <div :class="getPositionClass(`AM2040${i}L`)" ></div>
            </div>
            <div :ref="`AM2040${i}R`" style="width: 11px;
  height: 11px;
  padding: 1.5px; ">
              <div :class="getPositionClass(`AM2040${i}R`)" ></div>
            </div>
          </div>
          <!-- 拉丝B线满盘缓存区第5巷道1排 -->
          <div v-for="i in 1" :key="`AM2050${i}`" :ref="`AM2050${i}`" class="locationColumn" :style="{
            top: `${196 + (i - 1) * 13}px`,
            left: '1444px'
          }">
            <div :ref="`AM2050${i}L`" style="width: 11px;
    height: 11px;
    padding: 1.5px;">
              <div :class="getPositionClass(`AM2050${i}L`)" ></div>
            </div>
            <div :ref="`AM2050${i}R`" style="width: 11px;
  height: 11px;
  padding: 1.5px; ">
              <div :class="getPositionClass(`AM2050${i}R`)" ></div>
            </div>
          </div>
          <!-- 拉丝B线满盘缓存区第6巷道1排 -->
          <div v-for="i in 1" :key="`AM2060${i}`" :ref="`AM2060${i}`" class="locationColumn" :style="{
            top: `${222 + (i - 1) * 13}px`,
            left: '1444px'
          }">
            <div :ref="`AM2060${i}L`" style="width: 11px;
    height: 11px;
    padding: 1.5px;">
              <div :class="getPositionClass(`AM2060${i}L`)" ></div>
            </div>
            <div :ref="`AM2060${i}R`" style="width: 11px;
  height: 11px;
  padding: 1.5px; ">
              <div :class="getPositionClass(`AM2060${i}R`)" ></div>
            </div>
          </div>
          <!-- 拉丝B线满盘缓存区第7巷道1排 -->
          <div v-for="i in 1" :key="`AM2070${i}`" :ref="`AM2070${i}`" class="locationColumn" :style="{
            top: `${248 + (i - 1) * 13}px`,
            left: '1444px'
          }">
            <div :ref="`AM2070${i}L`" style="width: 11px;
    height: 11px;
    padding: 1.5px;">
              <div :class="getPositionClass(`AM2070${i}L`)" ></div>
            </div>
            <div :ref="`AM2070${i}R`" style="width: 11px;
  height: 11px;
  padding: 1.5px; ">
              <div :class="getPositionClass(`AM2070${i}R`)" ></div>
            </div>
          </div>
          <!-- 拉丝B线满盘缓存区第8巷道1排 -->
          <div v-for="i in 1" :key="`AM2080${i}`" :ref="`AM2080${i}`" class="locationColumn" :style="{
            top: `${274 + (i - 1) * 13}px`,
            left: '1444px'
          }">
            <div :ref="`AM2080${i}L`" style="width: 11px;
    height: 11px;
    padding: 1.5px;">
              <div :class="getPositionClass(`AM2080${i}L`)" ></div>
            </div>
            <div :ref="`AM2080${i}R`" style="width: 11px;
  height: 11px;
  padding: 1.5px; ">
              <div :class="getPositionClass(`AM2080${i}R`)" ></div>
            </div>
          </div>
          <!-- 循环渲染状态项 -->
          <div class="item" v-for="(status, index) in statusList" :key="index">
            <div class="icon" :class="status.iconClass"></div>
            <span class="text">{{ status.text }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AGVStatus',
  components: {},
  props: {
    dataList: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      statusList: [
        { text: '满盘', iconClass: 'full-pallet' },
        { text: '空盘', iconClass: 'empty-pallet' },
        { text: '异常', iconClass: 'abnormal' },
        { text: '预占', iconClass: 'reserved' },
        { text: '锁定', iconClass: 'locked' },
        { text: '占用', iconClass: 'occupied' },
        { text: '空闲', iconClass: 'idle' },
        { text: '在途', iconClass: 'in-transit' },
        { text: '禁用', iconClass: 'disabled' }
      ]
    }
  },
  methods: {
    // 根据库位核心编码（如FK10101）获取完整状态类名
    getLocationClass(coreCode) {
      // 查找对应数据（coreCode对应lineEdgeLibraryCode的前6位，如FK10101对应FK10101L/R的前6位）
      const targetData = this.dataList.find(item =>
        item.lineEdgeLibraryCode.startsWith(coreCode)
      );
      if (!targetData) return '';

      // 状态映射：lineEdgeLibraryState（库位状态）+ usableState（可用状态）
      const stateClass = this.mapLineEdgeLibraryState(targetData.lineEdgeLibraryState);
      const usableClass = this.mapUsableState(targetData.usableState);

      // 返回组合类名（多个类名用空格分隔）
      return `${stateClass} ${usableClass}`.trim();
    },

    // 根据位置编码（如FK10101L）获取单个位置的状态类名
    getPositionClass(positionCode) {
      console.log('positionCode'.positionCode);

      // 查找完全匹配的lineEdgeLibraryCode
      const targetData = this.dataList.find(item =>
        item.lineEdgeLibraryCode === positionCode
      );
      if (!targetData) return '';

      const stateClass = this.mapLineEdgeLibraryState(targetData.lineEdgeLibraryState);
      const usableClass = this.mapUsableState(targetData.usableState);

      // 返回组合类名（多个类名用空格分隔）
      return `${stateClass} ${usableClass}`.trim();
    },

    // 映射lineEdgeLibraryState（库位状态）到类名
    mapLineEdgeLibraryState(state) {
      switch (state) {
        // case 0: return 'idle';  // 空闲
        case 1: return 'occupied';  // 满位
        // default: return 'state-normal';  // 默认状态
      }
    },

    // 映射usableState（可用状态）到类名
    mapUsableState(usable) {
      switch (usable) {
        // case 1: return 'usable';  // 可用
        // case 2: return 'disabled';  // 不可用
        case 3: return 'locked';  // 锁定
        // default: return 'usable';  // 默认可用
      }
    }
  }
}
</script>
"lineEdgeLibraryState": 1,
"usableState": 3,
<style lang='scss' scoped>
.threeDimensionalChart {
  width: 1493px;
  height: 512px;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 14px 38px 11px 22px;
  position: relative;

  .bg {
    background: url('../../../../assets/img/threeDimensionalChartBg.png') no-repeat;
    background-size: 100% 100%;

    .location {
      position: absolute;
      width: 23px;
      height: 11px;
      display: flex;
      gap: 1px;
      // justify-content: space-around;
      // align-items: center;

      .full-pallet {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/FPScale.png');
      }

      .empty-pallet {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/EPScale.png');
      }

      .abnormal {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/ABNScale.png');
      }

      .reserved {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/RESScale.png');
      }

      .locked {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/LCKScale.png');
      }

      .occupied {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/OCCScale.png');
      }

      .idle {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/IDLScale.png');
      }

      .in-transit {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/ITScale.png');
      }

      .disabled {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/DISScale.png');
      }
    }

    .locationColumn {
      position: absolute;
      width: 11px;
      height: 23px;
      display: flex;
      gap: 1px;
      flex-direction: column;
      // justify-content: space-around;
      // align-items: center;

      .full-pallet {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/FPScale.png');
      }

      .empty-pallet {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/EPScale.png');
      }

      .abnormal {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/ABNScale.png');
      }

      .reserved {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/RESScale.png');
      }

      .locked {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/LCKScale.png');
      }

      .occupied {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/OCCScale.png');
      }

      .idle {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/IDLScale.png');
      }

      .in-transit {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/ITScale.png');
      }

      .disabled {
        width: 8px;
        height: 8px;
        background-image: url('../../../../assets/img/DISScale.png');
      }
    }

    .statusItem {
      margin-left: 1149px;
      padding-top: 17px;
      display: flex;
      flex-wrap: wrap;
      gap: 13px 10px;
      align-items: center;
    }

    .item {
      display: flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;

      .icon {
        width: 14px;
        height: 14px;
        background-size: cover;
        background-repeat: no-repeat;
        flex-shrink: 0;
      }

      .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #121212;
        line-height: 14px;
        text-align: left;
        font-style: normal;
      }

      .full-pallet {
        background-image: url('../../../../assets/img/FP.png');
      }

      .empty-pallet {
        background-image: url('../../../../assets/img/EP.png');
      }

      .abnormal {
        background-image: url('../../../../assets/img/ABN.png');
      }

      .reserved {
        background-image: url('../../../../assets/img/RES.png');
      }

      .locked {
        background-image: url('../../../../assets/img/LCK.png');
      }

      .occupied {
        background-image: url('../../../../assets/img/OCC.png');
      }

      .idle {
        background-image: url('../../../../assets/img/IDL.png');
      }

      .in-transit {
        background-image: url('../../../../assets/img/IT.png');
      }

      .disabled {
        background-image: url('../../../../assets/img/DIS.png');
      }
    }
  }
}
</style>
