2254 lines
77 KiB
Vue
2254 lines
77 KiB
Vue
<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>
|