From bd21c609d3e0f325f10f20bb1f59ae24a4b35dc2 Mon Sep 17 00:00:00 2001
From: zhoushihao <zsh19950802@163.com>
Date: 星期一, 03 三月 2025 10:29:05 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'

---
 UI-Project/src/views/hollow/hollowslicecage.vue |  601 ++++++++++++++++++++++++++---------------------------
 1 files changed, 294 insertions(+), 307 deletions(-)

diff --git a/UI-Project/src/views/hollow/hollowslicecage.vue b/UI-Project/src/views/hollow/hollowslicecage.vue
index 1de0aaa..36d40ee 100644
--- a/UI-Project/src/views/hollow/hollowslicecage.vue
+++ b/UI-Project/src/views/hollow/hollowslicecage.vue
@@ -3,10 +3,10 @@
 import {useRouter} from "vue-router"
 import request from "@/utils/request"
 import {host, WebSocketHost} from '@/utils/constants'
-import {computed, onBeforeUnmount, onMounted, onUnmounted, reactive, ref} from "vue";
+import {onBeforeUnmount, onMounted, onUnmounted, reactive, ref} from "vue";
 import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
 import {ElMessage, ElMessageBox} from 'element-plus'
-import PrintLabel from "@/views/UnLoadGlass/PrintCustomLabelSemi1.vue";
+
 const dialogFormVisibleaDownGlasss = ref(false)
 const scanGlass = ref([])
 const {t} = useI18n()
@@ -18,6 +18,8 @@
 const mesReplyEntity = ref('#911005');
 const outInkageEntity = ref('#911005');
 const outRequestEntity = ref('#911005');
+const freeone = ref('#911005');
+const freetwo = ref('#911005');
 const tableDataa = ref([])
 const tableDatab = ref([])
 const tableDatac = ref([])
@@ -29,17 +31,18 @@
 const diaodu = ref('')
 const flowCardId = ref('')
 const filmsId = ref('')
-const adjustedRects = ref([]);
 const adjust = ref([]);
 const adjusta = ref([]);
+const adjustedRects = ref([]);
 const adjustedRectsa = ref([]);
 const adjustedRectsb = ref([]);
 const adjustedRectsc = ref([]);
 const adjustedRectsd = ref([]);
-const adjustedRectse = ref([]);
-const adjustedRectsf = ref([]);
-const adjustedRectsg = ref([]);
-const adjustedRectsh = ref([]);
+const subRectsCounts = ref([]);
+const subRectsCountsa = ref([]);
+const subRectsCountsb = ref([]);
+const subRectsCountsc = ref([]);
+const subRectsCountsd = ref([]);
 const currentRow = reactive({}); // 褰撳墠琛岀殑鏁版嵁 
 const currentPage2 = ref(1)
 const add = ref(false)
@@ -110,13 +113,16 @@
       } 
     ); 
     if (confirmResult === 'confirm') {
-      const response = await request.post("/hollowGlass/hollowBigStorageCageDetails/deleteHollowBigStorageCageDetails",{
-        deviceId: row.deviceId,
-        glassId: row.glassId,
-        slot: row.slot,
-      })
+      const params = new URLSearchParams();
+      params.append('state', '8');
+      params.append('deviceId', row.deviceId);
+      params.append('glassId', row.glassId);
+      params.append('slot', row.slot);
+      var url = `/hollowGlass/hollowBigStorageCageDetails/deleteHollowBigStorageCageDetails?${params.toString()}`;
+      const response = await request.post(url)
     if (response.code === 200) {
-     tableDataa.value = response.data;
+       fetchxiang(1);
+      //  tableDataa.value = response.data;
      ElMessage.success(response.message);
       } else {
       ElMessage.error(response.message);
@@ -139,19 +145,15 @@
       } 
     ); 
     if (confirmResult === 'confirm') {
-    // var url="/hollowGlass/hollowBigStorageCageDetails/damageHollowBigStorageCageDetails?status="+ 8
-    // + "&deviceId=" + row.deviceId
-    // + "&glassId=" + row.glassId
-    // + "&slot=" + row.slot;
-    // const response = await request.post(url)
-      const response = await request.post("/hollowGlass/hollowBigStorageCageDetails/damageHollowBigStorageCageDetails",{
-        status: 8,
-        deviceId: row.deviceId,
-        glassId: row.glassId,
-        slot: row.slot,
-      })
+      const params = new URLSearchParams();
+      params.append('state', '8');
+      params.append('deviceId', row.deviceId);
+      params.append('glassId', row.glassId);
+      params.append('slot', row.slot);
+      var url = `/hollowGlass/hollowBigStorageCageDetails/damageHollowBigStorageCageDetails?${params.toString()}`;
+    const response = await request.post(url)
       if (response.code === 200) {
-     tableDataa.value = response.data;
+       fetchxiang(1); 
      ElMessage.success(response.message);
       } else {  
       ElMessage.error(response.message);
@@ -174,15 +176,16 @@
       } 
     ); 
     if (confirmResult === 'confirm') {  
-      const response = await request.post("/hollowGlass/hollowBigStorageCageDetails/damageHollowBigStorageCageDetails",{
-        status: 9,
-        deviceId: row.deviceId,
-        glassId: row.glassId,
-        slot: row.slot,
-      })
+      const params = new URLSearchParams();
+      params.append('state', '9');
+      params.append('deviceId', row.deviceId);
+      params.append('glassId', row.glassId);
+      params.append('slot', row.slot);
+      var url = `/hollowGlass/hollowBigStorageCageDetails/damageHollowBigStorageCageDetails?${params.toString()}`;
+      const response = await request.post(url)
       if (response.code === 200) {
-     tableDataa.value = response.data;
-     ElMessage.success(response.message);
+       fetchxiang(1);
+       ElMessage.success(response.message);
       } else {  
       ElMessage.error(response.message);
       }  
@@ -295,24 +298,27 @@
 let socket = null;
 const socketUrl = `ws://${WebSocketHost}:${host}/api/hollowGlass/api/talk/hollowGlassMessage`;
 const handleMessage = (data) => {
-  console.log(data);
-  
   if (data.inkageEntity != null) {
-    inkageEntity.value = data.inkageEntity == 1 ? '#911005' : 'green';
+    inkageEntity.value = data.inkageEntity[0] == true ? 'green' : '#911005';
   }
   if (data.requestEntity != null) {
-    requestEntity.value = data.requestEntity == 1 ? '#911005' : 'green';
+    requestEntity.value = data.requestEntity == 1 ? 'green' : '#911005';
   }
   if (data.mesReplyEntity != null) {
-    mesReplyEntity.value = data.mesReplyEntity == 1 ? '#911005' : 'green';
+    mesReplyEntity.value = data.mesReplyEntity == 1 ? 'green' : '#911005';
   }
   if (data.outInkageEntity != null) {
-    outInkageEntity.value = data.outInkageEntity == 1 ? '#911005' : 'green';
+    outInkageEntity.value = data.outInkageEntity[0] == true ? 'green' : '#911005';
+  }
+  if (data.freeTwoRequestEntity != null) {
+    freetwo.value = data.freeTwoRequestEntity[0] == true ? 'green' : '#911005';
   }
   if (data.outRequestEntity != null) {
-    outRequestEntity.value = data.outRequestEntity == 1 ? '#911005' : 'green';
+    outRequestEntity.value = data.outRequestEntity == 1 ? 'green' : '#911005';
   }
-  
+  if (data.freeOneRequestEntity != null) {
+    freeone.value = data.freeOneRequestEntity == 1 ? 'green' : '#911005';
+  }
   if(data.bigStorageCageDetailsOutTask!=null){
     tableDatac.value = data.bigStorageCageDetailsOutTask[0]
     console.log(data.bigStorageCageDetailsOutTask[0])
@@ -360,31 +366,209 @@
   ganghua.value = ''
   }
   if(data.bigStorageCageInfos!=null){
-    window.localStorage.setItem('length', data.bigStorageCageInfos[0][1].length)
-  let length = window.localStorage.getItem('length')
-  adjustedRects.value = data.bigStorageCageInfos[0][1].map(rect => ({  
-            ...rect, 
-            height: 20/length,
-            top: 29/length
-          })); 
-adjustedRectsa.value = data.bigStorageCageInfos[0][2].map(rect => ({  
-            ...rect, 
-            height: 20/length,
-            top: 29/length
-          })); 
-adjustedRectsb.value = data.bigStorageCageInfos[0][3].map(rect => ({  
-            ...rect, 
-            height: 20/length,
-            top: 29/length
-          })); 
-adjustedRectsc.value = data.bigStorageCageInfos[0][4].map(rect => ({  
-            ...rect, 
-            height: 20/length,
-            top: 29/length
-          }));
+    adjustedRects.value = data.bigStorageCageInfos[0][1].map((rect, index) => ({
+    id: index + 1,
+    height: 20/55,
+    top: 46/55,
+  }));
+subRectsCounts.value = data.bigStorageCageInfos[0][1].map(rect => rect.count);
+adjustedRectsa.value = data.bigStorageCageInfos[0][2].map((rect, index) => ({
+    id: index + 1,
+    height: 20/55,
+    top: 46/55,
+  }));
+subRectsCountsa.value = data.bigStorageCageInfos[0][2].map(rect => rect.count);
+adjustedRectsb.value = data.bigStorageCageInfos[0][3].map((rect, index) => ({
+    id: index + 1,
+    height: 20/55,
+    top: 46/55,
+  }));
+subRectsCountsb.value = data.bigStorageCageInfos[0][3].map(rect => rect.count);
+adjustedRectsc.value = data.bigStorageCageInfos[0][4].map((rect, index) => ({
+    id: index + 1,
+    height: 20/55,
+    top: 46/55,
+  }));
+subRectsCountsc.value = data.bigStorageCageInfos[0][4].map(rect => rect.count);
+adjustedRectsd.value = data.bigStorageCageInfos[0][5].map((rect, index) => ({
+    id: index + 1,
+    height: 20/55,
+    top: 46/55,
+  }));
+subRectsCountsd.value = data.bigStorageCageInfos[0][5].map(rect => rect.count);
   }else{
-    adjustedRects.value = ''
+    adjustedRects.value = '',
+    adjustedRectsa.value = '',
+    adjustedRectsb.value = '',
+    adjustedRectsc.value = ''
+    adjustedRectsd.value = ''
   }
+};
+
+// 璁$畻姣忎釜澶х煩褰㈢殑鏍峰紡
+const rectStyle = (rect, index) => ({
+  position: 'absolute',
+  width: '170px',
+  left: '0px',
+  top: `${index*rect.top}px`,
+  height: `${rect.height}px`,
+});
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡鍜屾暟閲�
+const getSubRects = (rectIndex) => {
+  const count = subRectsCounts.value[rectIndex];
+  const subRects = [];
+  for (let i = 0; i < count; i++) {
+    subRects.push({});
+  }
+  return subRects;
+};
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡
+const subRectStyle = (rectIndex, subIndex) => {
+  const width = '18px';
+  const marginLeft = '8px';
+  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
+  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
+  return {
+    position: 'absolute',
+    width,
+    height: '100%',
+    marginLeft,
+    top: '0px',
+    backgroundColor: '#911005',
+    left,
+  };
+};
+// 璁$畻姣忎釜澶х煩褰㈢殑鏍峰紡
+const rectStylea = (rect, index) => ({
+  position: 'absolute',
+  width: '170px',
+  left: '0px',
+  top: `${index*rect.top}px`,
+  height: `${rect.height}px`,
+});
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡鍜屾暟閲�
+const getSubRectsa = (rectIndex) => {
+  const count = subRectsCountsa.value[rectIndex];
+  const subRects = [];
+  for (let i = 0; i < count; i++) {
+    subRects.push({});
+  }
+  return subRects;
+};
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡
+const subRectStylea = (rectIndex, subIndex) => {
+  const width = '18px';
+  const marginLeft = '8px';
+  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
+  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
+  return {
+    position: 'absolute',
+    width,
+    height: '100%',
+    marginLeft,
+    top: '0px',
+    backgroundColor: '#911005',
+    left,
+  };
+};
+// 璁$畻姣忎釜澶х煩褰㈢殑鏍峰紡
+const rectStyleb = (rect, index) => ({
+  position: 'absolute',
+  width: '170px',
+  left: '0px',
+  top: `${index*rect.top}px`,
+  height: `${rect.height}px`,
+});
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡鍜屾暟閲�
+const getSubRectsb = (rectIndex) => {
+  const count = subRectsCountsb.value[rectIndex];
+  const subRects = [];
+  for (let i = 0; i < count; i++) {
+    subRects.push({});
+  }
+  return subRects;
+};
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡
+const subRectStyleb = (rectIndex, subIndex) => {
+  const width = '18px';
+  const marginLeft = '8px';
+  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
+  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
+  return {
+    position: 'absolute',
+    width,
+    height: '100%',
+    marginLeft,
+    top: '0px',
+    backgroundColor: '#911005',
+    left,
+  };
+};
+// 璁$畻姣忎釜澶х煩褰㈢殑鏍峰紡
+const rectStylec = (rect, index) => ({
+  position: 'absolute',
+  width: '170px',
+  left: '0px',
+  top: `${index*rect.top}px`,
+  height: `${rect.height}px`,
+});
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡鍜屾暟閲�
+const getSubRectsc = (rectIndex) => {
+  const count = subRectsCountsc.value[rectIndex];
+  const subRects = [];
+  for (let i = 0; i < count; i++) {
+    subRects.push({});
+  }
+  return subRects;
+};
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡
+const subRectStylec = (rectIndex, subIndex) => {
+  const width = '18px';
+  const marginLeft = '8px';
+  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
+  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
+  return {
+    position: 'absolute',
+    width,
+    height: '100%',
+    marginLeft,
+    top: '0px',
+    backgroundColor: '#911005',
+    left,
+  };
+};
+// 璁$畻姣忎釜澶х煩褰㈢殑鏍峰紡
+const rectStyled = (rect, index) => ({
+  position: 'absolute',
+  width: '170px',
+  left: '0px',
+  top: `${index*rect.top}px`,
+  height: `${rect.height}px`,
+});
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡鍜屾暟閲�
+const getSubRectsd = (rectIndex) => {
+  const count = subRectsCountsd.value[rectIndex];
+  const subRects = [];
+  for (let i = 0; i < count; i++) {
+    subRects.push({});
+  }
+  return subRects;
+};
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡
+const subRectStyled = (rectIndex, subIndex) => {
+  const width = '18px';
+  const marginLeft = '8px';
+  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
+  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
+  return {
+    position: 'absolute',
+    width,
+    height: '100%',
+    marginLeft,
+    top: '0px',
+    backgroundColor: '#911005',
+    left,
+  };
 };
 onMounted(() => {
   socket = initializeWebSocket(socketUrl, handleMessage);
@@ -429,6 +613,10 @@
         <i :style="{ marginTop: '2px', backgroundColor: outInkageEntity, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
         <div style="margin-left: 70px;">{{ $t('searchOrder.outRequestEntity') }}</div>
         <i :style="{ marginTop: '2px', backgroundColor: outRequestEntity, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
+        <div style="margin-left: 70px;">{{ $t('hellow.freeone') }}</div>
+        <i :style="{ marginTop: '2px', backgroundColor: freeone, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
+        <div style="margin-left: 70px;">{{ $t('hellow.freetwo') }}</div>
+        <i :style="{ marginTop: '2px', backgroundColor: freetwo, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
   </div>
     <div class="table-container">
     <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;" v-loading="loading">
@@ -475,7 +663,7 @@
     </div>
 <!-- // 鐖剁骇妗� -->
 <div class="img-dlpl" >
-    <div class="img-car1" :style="'z-index:999;left:270px;top:' + 350*carPosition[0] + 'px;position:absolute;'">
+    <div class="img-car1" :style="'z-index:999;left:475px;top:' + 1700*carPosition[0] + 'px;position:absolute;'">
       <div  
       v-for="(rect, index) in adjusta"  
       :key="rect.id"  
@@ -489,7 +677,7 @@
     >
     </div>
     </div>
-    <div class="img-car4" :style="'z-index:999;left:740px;top:' + 350*carPosition[1] + 'px;position:absolute;'">
+    <div class="img-car4" :style="'z-index:999;left:890px;top:' + 600*carPosition[1] + 'px;position:absolute;'">
       <div  
       v-for="(rect, index) in adjust"  
       :key="rect.id"  
@@ -504,250 +692,49 @@
     </div>
     </div>
     <div style="position: relative;">
-    <div v-show="cell1" style="width: 227px;height: 29px;position: relative;top:50px;left: 495px;">
-      <div  
-      v-for="(rect, index) in adjustedRects"  
-      :key="rect"  
-      :style="{
-       position: 'absolute',
-       width: '227px',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.hollowBigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
+    <div v-show="cell1" style="width: 170px;height: 46px;position: relative;top:387px;left: 690px;">
+      <div v-for="(rect, rectIndex) in adjustedRects" :key="rect.id" :style="rectStyle(rect, rectIndex)">
+    <div
+      v-for="(subRect, subIndex) in getSubRects(rectIndex)"
+      :key="subIndex"
+      :style="subRectStyle(rectIndex, subIndex)"
+    ></div>
     </div>
     </div>
- <div v-show="cell2" style="width: 227px;height: 29px;position: relative;top:51px;left: 495px;">
-  <div  
-      v-for="(rect, index) in adjustedRectsa"  
-      :key="rect.id"  
-      :style="{
-       position: 'absolute',
-       width: '227px',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.hollowBigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
+ <div v-show="cell2" style="width: 170px;height: 46px;position: relative;top:389px;left: 690px;">
+  <div v-for="(rect, rectIndex) in adjustedRectsa" :key="rect.id" :style="rectStylea(rect, rectIndex)">
+    <div
+      v-for="(subRect, subIndex) in getSubRectsa(rectIndex)"
+      :key="subIndex"
+      :style="subRectStylea(rectIndex, subIndex)"
+    ></div>
     </div>
     </div>
-  <div v-show="cell3" style="width: 227px;height: 29px;position: absolute;top:110px;left: 495px;">
-    <div  
-      v-for="(rect, index) in adjustedRectsb"  
-      :key="rect.id"  
-      :style="{
-       position: 'absolute',
-       width: '227px',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.hollowBigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
+  <div v-show="cell3" style="width: 170px;height: 46px;position: relative;top:391px;left: 690px;">
+    <div v-for="(rect, rectIndex) in adjustedRectsb" :key="rect.id" :style="rectStyleb(rect, rectIndex)">
+    <div
+      v-for="(subRect, subIndex) in getSubRectsb(rectIndex)"
+      :key="subIndex"
+      :style="subRectStyleb(rectIndex, subIndex)"
+    ></div>
     </div>
     </div>
-  <div v-show="cell4" style="width: 227px;height: 29px;position: absolute;top:140px;left: 495px;">
-    <div  
-      v-for="(rect, index) in adjustedRectsc"  
-      :key="rect.id"  
-      :style="{
-       position: 'absolute',
-       width: '227px',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.hollowBigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
+  <div v-show="cell4" style="width: 170px;height: 46px;position: relative;top:392px;left: 690px;">
+    <div v-for="(rect, rectIndex) in adjustedRectsc" :key="rect.id" :style="rectStylec(rect, rectIndex)">
+    <div
+      v-for="(subRect, subIndex) in getSubRectsc(rectIndex)"
+      :key="subIndex"
+      :style="subRectStylec(rectIndex, subIndex)"
+    ></div>
     </div>
     </div>
-  <div v-show="cell5" style="width: 227px;height: 29px;position: absolute;top:170px;left: 495px;">
-    <div  
-      v-for="(rect, index) in adjustedRectsd"  
-      :key="rect.id"  
-      :style="{
-       position: 'absolute',
-       width: '227px',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.hollowBigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
-    </div>
-    </div>
-  <div v-show="cell6" style="width: 227px;height: 29px;position: absolute;top:241px;left: 495px;">
-    <div  
-      v-for="(rect, index) in adjustedRectse"  
-      :key="rect.id"  
-      :style="{
-       position: 'absolute',
-       width: '227px',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.hollowBigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
-    </div>
-    </div>
-  <div v-show="cell7" style="width: 227px;height: 29px;position: absolute;top:271px;left: 495px;">
-    <div  
-      v-for="(rect, index) in adjustedRectsf"  
-      :key="rect.id"  
-      :style="{
-       position: 'absolute',
-       width: '227px',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.hollowBigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
-    </div>
-    </div>
-  <div v-show="cell8" style="width: 227px;height: 29px;position: absolute;top:301px;left: 495px;">
-    <div  
-      v-for="(rect, index) in adjustedRectsg"  
-      :key="rect.id"  
-      :style="{
-        // display:'flex',
-       position: 'absolute',
-       width: '227px',
-      //  backgroundColor: 'red',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.hollowBigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-      // border:'1px solid black',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
-    </div>
-    </div>
-  <div v-show="cell9" style="width: 227px;height: 29px;position: absolute;top:332px;left: 495px;">
-    <div  
-      v-for="(rect, index) in adjustedRectsh"  
-      :key="rect.id"  
-      :style="{
-       position: 'absolute',
-       width: '227px',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.hollowBigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
+  <div v-show="cell5" style="width: 170px;height: 46px;position: relative;top:394px;left: 690px;">
+    <div v-for="(rect, rectIndex) in adjustedRectsd" :key="rect.id" :style="rectStyled(rect, rectIndex)">
+    <div
+      v-for="(subRect, subIndex) in getSubRectsd(rectIndex)"
+      :key="subIndex"
+      :style="subRectStyled(rectIndex, subIndex)"
+    ></div>
     </div>
     </div>
 </div>
@@ -1010,19 +997,19 @@
 .img-dlpl{
   margin-left: 20px;
   margin-top: 0px;
-  background-image:url('../../assets/dlpl9.png');
+  background-image:url('../../assets/zhongkong.png');
   background-repeat: no-repeat;
   background-attachment: local;
-  min-height: 400px;
+  min-height: 700px;
   width: 1200px;
   max-width: 100%;
-  background-size: 1200px 400px;
+  background-size: 1200px 700px;
   overflow: hidden;
   position:relative
 }
 .img-car1{
   display: flex;
-  background-image:url('../../assets/lp9.png');
+  background-image:url('../../assets/xiaoche.png');
   position: absolute;
   background-repeat: no-repeat;
   background-attachment: local;
@@ -1035,7 +1022,7 @@
 }
 .img-car4{
   display: flex;
-  background-image:url('../../assets/lpa9.png');
+  background-image:url('../../assets/xiaoche.png');
   position: absolute;
   background-repeat: no-repeat;
   background-attachment: local;

--
Gitblit v1.8.0