更换图片路径至public，中空理片笼新增中空优先级按钮（已隐藏）

wangfei

2025-08-13 69951c0cc22d8f72a98a8a14d83eaf1f040f9526

 UI-Project/src/views/hollow/hollowslicecage.vue

@@ -19,6 +19,7 @@
const outRequestEntity = ref('#911005');
const freeone = ref('#911005');
const freetwo = ref('#911005');
const freethree = ref('#911005');
const tableDataa = ref([])
const tableDatab = ref([])
const tableDatac = ref([])
@@ -29,6 +30,7 @@
const tableDatass = ref([])
const ganghua = ref('')
const diaodu = ref('')
const hollowPriority = ref('')
const flowCardId = ref('')
const filmsId = ref('')
const adjust = ref([]);
@@ -61,9 +63,8 @@
const temperingengineerId=ref('');
const handlePageChange2 = (newPage) => {
  currentPage2.value = newPage;
  console.log(currentPage2.value);
  window.localStorage.setItem('pagenumber', currentPage2.value)
  fetchxiang(currentPage2.value);
  fetchxiang();
};
const handleBindRack = (row) => {
  selectedRow.value = row; // 更新选中的行数据  
@@ -86,13 +87,12 @@
      ElMessage.error(response.message);
    }
  } catch (error) {
    console.error(error);
  }
};
// 是否禁用
const toggleEnableState = async (row) => {
  const newState = row.enableState === 1 ? 0 : 1;  
  var url="/cacheVerticalGlass/bigStorageCage/updateStorageCageDisabled?slot="+row.slot + "&enableState=" + newState;
  var url="/hollowGlass/hollowBigStorageCageDetails/updateHollowStorageCageDisabled?slot="+row.slot + "&enableState=" + newState;
      const response = await request.get(url) 
  if (response.code === 200) {
      ElMessage.success(response.message);
@@ -122,7 +122,7 @@
      var url = `/hollowGlass/hollowBigStorageCageDetails/deleteHollowBigStorageCageDetails?${params.toString()}`;
      const response = await request.post(url)
    if (response.code === 200) {
       fetchxiang(1);
       fetchxiang();
      //  tableDataa.value = response.data;
     ElMessage.success(response.message);
      } else {
@@ -130,7 +130,6 @@
      }  
    }  
  } catch (error) {
    console.error('发生错误:', error);  
  }  
}; 
 // 破损
@@ -154,14 +153,13 @@
      var url = `/hollowGlass/hollowBigStorageCageDetails/damageHollowBigStorageCageDetails?${params.toString()}`;
    const response = await request.post(url)
      if (response.code === 200) {
       fetchxiang(1); 
       fetchxiang(); 
     ElMessage.success(response.message);
      } else {  
      ElMessage.error(response.message);
      }  
    }  
  } catch (error) {  
    console.error('发生错误:', error);  
  } catch (error) {
  }  
}; 
 // 拿走
@@ -185,14 +183,13 @@
      var url = `/hollowGlass/hollowBigStorageCageDetails/damageHollowBigStorageCageDetails?${params.toString()}`;
      const response = await request.post(url)
      if (response.code === 200) {
       fetchxiang(1);
       fetchxiang();
       ElMessage.success(response.message);
      } else {  
      ElMessage.error(response.message);
      }  
    }  
  } catch (error) {  
    console.error('发生错误:', error);  
  } catch (error) {
  }  
}; 
// 确认添加
@@ -227,22 +224,21 @@
      }  
    }  
  } catch (error) {
    console.error('发生错误:', error);  
  }  
}; 
const handlexiang = () => {
  dialogFormVisiblea.value = true;
  fetchxiang(1); 
  fetchxiang(); 
  currentPage2.value = 1;
  window.localStorage.setItem('pagenumber', currentPage2.value)
  filmsId.value = ''
  flowCardId.value = ''
};
// 理片笼信息
const fetchxiang = async (page) => {
const fetchxiang = async () => {
  try {     
    const response = await request.post('/hollowGlass/hollowBigStorageCage/queryHollowBigStorageCageDetail',{
        deviceId: page,
        // deviceId: page,
        filmsId: filmsId.value,
        flowCardId: flowCardId.value,
    })
@@ -277,6 +273,29 @@
function handleRowClick(row) {  
  selectedRow.value = row; // 更新选中的行数据  
}
// 任务重置
const handleptask = async() => { 
  try {
    const confirmResult = await ElMessageBox.confirm(  
      t('searchOrder.partasks'), 
      t('workOrder.prompt'),  
      {  
        confirmButtonText: t('workOrder.yes'), 
        cancelButtonText: t('workOrder.cancel'),
        type: 'warning',  
      } 
    );
 if (confirmResult === 'confirm') {
  const response = await request.post('/hollowGlass/hollowBigStorageCage/resetCage')
    if (response.code === 200) {
      ElMessage.success(response.message);
      } else {
      ElMessage.error(response.msg);
      }  
    }  
  } catch (error) {
  }  
}; 
// 调度开关
const handlediaodu = async () => {
  try  {
@@ -293,9 +312,26 @@
      }  
}
catch (error) {
    console.error(error);
  }
}
// 中空优先级开关
// const handlehollowPriority = async () => {
//   try  {
//     const body = {  
//       flag: hollowPriority.value,
//     };
//   var url="/hollowGlass/hollowGlassOutRelationInfo/priorityHollowSwitch?flag="+hollowPriority.value;
//   const response = await request.post(url)
//     if (response.code == 200) {
//       ElMessage.success(response.message);
//       hollowPriority.value = response.data
//     }else {  
//       ElMessage.error(response.message);
//       }  
// }
// catch (error) {
//   }
// }
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/hollowGlass/api/talk/hollowGlassMessage`;
const handleMessage = (data) => {
@@ -324,6 +360,9 @@
  if (data.freeTwoRequestEntity != null) {
    freetwo.value = data.freeTwoRequestEntity[0] == true ? 'green' : '#911005';
  }
  if (data.freeThreeRequestEntity != null) {
    freethree.value = data.freeThreeRequestEntity[0] == true ? 'green' : '#911005';
  }
  if (data.outRequestEntity != null) {
    outRequestEntity.value = data.outRequestEntity == 1 ? 'green' : '#911005';
  }
@@ -332,7 +371,6 @@
  }
  if(data.bigStorageCageDetailsOutTask!=null){
    tableDatac.value = data.bigStorageCageDetailsOutTask[0]
    console.log(data.bigStorageCageDetailsOutTask[0])
    adjusta.value = data.bigStorageCageDetailsOutTask[0].filter(rect => rect.slot !== null && rect.slot !== undefined);
  } else {
    tableDatac.value = [],
@@ -355,12 +393,9 @@
      }
if(data.temperingGlassInfoList!=null){
  tableDatab.value = data.temperingGlassInfoList[0]
  console.log(tableDatab.value)
}else{
    tableDatab.value = []
      }
      console.log(data.bigStorageCageUsage);
      
if(data.bigStorageCageUsage!=null){
  tableDatae.value = data.bigStorageCageUsage[0]
}else{
@@ -371,40 +406,45 @@
}else{
  carPosition.value = []
  }
if(data.temperingSwitch!=null){
  ganghua.value = data.temperingSwitch[0]
if(data.dispatchHollowSwitch!=null){
  diaodu.value = data.dispatchHollowSwitch[0]
}else{
  ganghua.value = ''
  diaodu.value = ''
  }
// if(data.priorityHollowSwitch!=null){
//   hollowPriority.value = data.priorityHollowSwitch[0]
// }else{
//   hollowPriority.value = ''
//   }
  if(data.bigStorageCageInfos!=null){
    adjustedRects.value = data.bigStorageCageInfos[0][1].map((rect, index) => ({
    id: index + 1,
    height: 20/55,
    top: 46/55,
    height: 15/55,
    top: 33/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,
    height: 15/55,
    top: 33/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,
    height: 15/55,
    top: 33/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,
    height: 15/55,
    top: 33/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,
    height: 15/55,
    top: 33/55,
  }));
subRectsCountsd.value = data.bigStorageCageInfos[0][5].map(rect => rect.count);
  }else{
@@ -419,7 +459,7 @@
// 计算每个大矩形的样式
const rectStyle = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  width: '150px',
  left: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
@@ -436,7 +476,7 @@
// 计算每个小矩形的样式
const subRectStyle = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const marginLeft = '3px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  return {
@@ -452,7 +492,7 @@
// 计算每个大矩形的样式
const rectStylea = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  width: '150px',
  left: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
@@ -469,7 +509,7 @@
// 计算每个小矩形的样式
const subRectStylea = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const marginLeft = '3px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  return {
@@ -485,7 +525,7 @@
// 计算每个大矩形的样式
const rectStyleb = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  width: '150px',
  left: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
@@ -502,7 +542,7 @@
// 计算每个小矩形的样式
const subRectStyleb = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const marginLeft = '3px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  return {
@@ -518,7 +558,7 @@
// 计算每个大矩形的样式
const rectStylec = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  width: '150px',
  left: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
@@ -535,7 +575,7 @@
// 计算每个小矩形的样式
const subRectStylec = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const marginLeft = '3px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  return {
@@ -551,7 +591,7 @@
// 计算每个大矩形的样式
const rectStyled = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  width: '150px',
  left: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
@@ -568,7 +608,7 @@
// 计算每个小矩形的样式
const subRectStyled = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const marginLeft = '3px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  return {
@@ -640,7 +680,9 @@
  <div style="height: 600px;">
    <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="primary" @click="handlexiang">{{ $t('searchOrder.cageinformation') }}</el-button>
    <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="success" @click="handlehistorical">{{ $t('searchOrder.historicaltasks') }}</el-button>
    <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="danger" @click="handleptask()">{{ $t('searchOrder.partask') }}</el-button>
    <el-switch style="margin-top: 7px;margin-left: 10px;" v-model="diaodu" class="mb-2" :inactive-text="$t('searchOrder.Schedulingswitch')" @change="handlediaodu" />
    <!-- <el-switch style="margin-top: 7px;margin-left: 10px;" v-model="hollowPriority" class="mb-2" :inactive-text="$t('searchOrder.hollowPriority')" @change="handlehollowPriority" /> -->
    <div id="dotClass">
        <div>{{ $t('searchOrder.inkageEntity') }}</div>
        <i :style="{ marginTop: '2px', backgroundColor: inkageEntity, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
@@ -656,26 +698,118 @@
        <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">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 300px;">
       <el-table height="300px" ref="table" 
       :data="tableDatac" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
         <el-table-column prop="glassId" align="center" :label="$t('searchOrder.outputglassID')" min-width="140" />
         <el-table-column prop="startSlot" align="center" :label="$t('searchOrder.startposition')" min-width="120" />
         <el-table-column prop="targetSlot" align="center" :label="$t('searchOrder.targetlocation')" min-width="120" />
         <el-table-column prop="taskState" align="center" :label="$t('searchOrder.taskstatus')" min-width="157">
           <template #default="scope">
             <el-tag type="success" >{{ scope.row.taskState==0? $t('searchOrder.filmenter') : $t('searchOrder.infilm') }}</el-tag>
           </template>
         </el-table-column>
        <div style="margin-left: 70px;">{{ $t('hellow.freethree') }}</div>
        <i :style="{ marginTop: '2px', backgroundColor: freethree, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
      </div>
    <div style="display: flex; align-items: flex-start; gap: 20px; height: 70vh;">
<!-- // 父级框 -->
<div class="img-zkdlpl" >
    <div class="img-car1" :style="'z-index:999;left:212px;top:' + 1300*carPosition[0] + 'px;position:absolute;'">
      <div  
      v-for="(rect, index) in adjusta"  
      :key="rect.id"  
      :style="{
       width: '30px',
       height: '5px',
       backgroundColor: '#409EFF',
       marginLeft: 5+ `px`,
       top: '10px',
       }"  
    >
    </div>
    </div>
    <div class="img-car4" :style="'z-index:999;left:588px;top:' + 450*carPosition[1] + 'px;position:absolute;'">
      <div  
      v-for="(rect, index) in adjust"  
      :key="rect.id"  
      :style="{
       width: '30px',
       height: '5px',
       backgroundColor: '#409EFF',
       marginLeft: 5+ `px`,
       top: '10px',
       }"  
    >
    </div>
    </div>
    <div style="position: relative;">
    <div v-show="cell1" style="width: 150px;height: 33px;position: relative;top:292px;left: 418px;">
      <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: 150px;height: 33px;position: relative;top:295px;left: 418px;">
  <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: 150px;height: 33px;position: relative;top:298px;left: 418px;">
    <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: 150px;height: 33px;position: relative;top:301px;left: 418px;">
    <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: 150px;height: 33px;position: relative;top:304px;left: 418px;">
    <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>
</div>
<el-card style="flex: 1; height: 500px; overflow-y: auto;">
      <div style="width: 100%; height: calc(100% - 35px); overflow-y: auto;max-height: 450px;">
       <el-table height="550px" ref="table" border 
       :data="tableDatass" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
         <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="140" />
         <el-table-column prop="sumCount" align="center" :label="$t('searchOrder.totallogarithms')" min-width="120" />
         <el-table-column prop="pairCount" align="center" :label="$t('searchOrder.numberpairs')" min-width="120" />
         <el-table-column prop="totalNumber" align="center" :label="$t('hellow.totalnumber')" min-width="100" />
         <el-table-column prop="realCount" align="center" :label="$t('hellow.realpieces')" min-width="120" />
         <el-table-column prop="slotCount" align="center" :label="$t('searchOrder.numberoccupied')" min-width="120" />
       </el-table>
       </div>
    </el-card>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;" v-loading="loading">
      <el-table height="300px" ref="table" 
        @selection-change="handleSelectionChange"
  </div>
    <div style="padding: 10px;display: flex;height:110px;margin-top: -170px;">
            <div v-for="(item, index) in tableDatae" :key="index" id="occupy">  
               <el-col style="text-align:left;font-weight: bold;">#{{ item.device_id }}</el-col>  
               <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">  
                 <span>{{ $t('searchOrder.Usage') }}</span><span>{{ item.percentage }}%</span>  
               </el-col>  
               <hr style="width:80%;margin: 0 auto;" />  
               <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">  
                 <span>{{ $t('searchOrder.free') }}</span><span>{{ item.count }}</span>  
               </el-col>  
             </div>  
    </div>
    <div class="table-container">
    <el-card style="flex: 1;margin-left: 10px;margin-top: 3px;">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 140px;">
      <el-table height="120px" ref="table"
        :row-class-name="tableRowClassName"
        :data="tableDatad" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="glassId" align="center" :label="$t('searchOrder.intoglassid')" min-width="140" />
@@ -694,111 +828,22 @@
      </template>
          </el-table-column>
        </el-table>
            </el-card>
  </div>
    <div style="padding: 10px;display: flex;height:130px;">
            <div v-for="(item, index) in tableDatae" :key="index" id="occupy">  
               <el-col style="text-align:left;font-weight: bold;">#{{ item.device_id }}</el-col>  
               <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">  
                 <span>{{ $t('searchOrder.Usage') }}</span><span>{{ item.percentage }}%</span>  
               </el-col>  
               <hr style="width:80%;margin: 0 auto;" />  
               <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">  
                 <span>{{ $t('searchOrder.free') }}</span><span>{{ item.count }}</span>  
               </el-col>  
             </div>  
    </div>
<!-- // 父级框 -->
<div class="img-dlpl" >
    <div class="img-car1" :style="'z-index:999;left:305px;top:' + 1700*carPosition[0] + 'px;position:absolute;'">
      <div  
      v-for="(rect, index) in adjusta"  
      :key="rect.id"  
      :style="{
       width: '30px',
       height: '5px',
       backgroundColor: '#409EFF',
       marginLeft: 5+ `px`,
       top: '10px',
       }"  
    >
    </div>
    </div>
    <div class="img-car4" :style="'z-index:999;left:730px;top:' + 600*carPosition[1] + 'px;position:absolute;'">
      <div  
      v-for="(rect, index) in adjust"  
      :key="rect.id"  
      :style="{
       width: '30px',
       height: '5px',
       backgroundColor: '#409EFF',
       marginLeft: 5+ `px`,
       top: '10px',
       }"  
    >
    </div>
    </div>
    <div style="position: relative;">
    <div v-show="cell1" style="width: 170px;height: 46px;position: relative;top:387px;left: 523px;">
      <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: 170px;height: 46px;position: relative;top:389px;left: 523px;">
  <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: 170px;height: 46px;position: relative;top:391px;left: 523px;">
    <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: 170px;height: 46px;position: relative;top:392px;left: 523px;">
    <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: 170px;height: 46px;position: relative;top:394px;left: 523px;">
    <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>
</div>
<el-card style="flex: 1;margin-left: 1020px;margin-top: -670px;" v-loading="loading">
      <div style="width: 100%; height: calc(100% - 35px); overflow-y: auto;max-height: 550px;">
       <el-table height="550px" ref="table" border 
       :data="tableDatass" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
         <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="140" />
         <el-table-column prop="sumCount" align="center" :label="$t('searchOrder.totallogarithms')" min-width="120" />
         <el-table-column prop="pairCount" align="center" :label="$t('searchOrder.numberpairs')" min-width="120" />
         <el-table-column prop="totalNumber" align="center" :label="$t('hellow.totalnumber')" min-width="120" />
         <el-table-column prop="realCount" align="center" :label="$t('hellow.realpieces')" min-width="120" />
         <el-table-column prop="slotCount" align="center" :label="$t('searchOrder.numberoccupied')" min-width="120" />
       </el-table>
       </div>
    </el-card>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 3px;">
      <el-table height="120px" ref="table" 
       :data="tableDatac" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
         <el-table-column prop="glassId" align="center" :label="$t('searchOrder.outputglassID')" min-width="140" />
         <el-table-column prop="startSlot" align="center" :label="$t('searchOrder.startposition')" min-width="120" />
         <el-table-column prop="targetSlot" align="center" :label="$t('searchOrder.targetlocation')" min-width="120" />
         <el-table-column prop="taskState" align="center" :label="$t('searchOrder.taskstatus')" min-width="157">
           <template #default="scope">
             <el-tag type="success" >{{ scope.row.taskState==0? $t('searchOrder.filmenter') : $t('searchOrder.infilm') }}</el-tag>
           </template>
         </el-table-column>
       </el-table>
            </el-card>
  </div>
  </div>
  <!-- 添加理片笼信息 -->
  <el-dialog v-model="add" top="10vh" width="70%" :title="$t('searchOrder.addcage')" >
@@ -856,7 +901,7 @@
          <el-table-column prop="gap" align="center" :label="$t('searchOrder.glassgaps')" min-width="150"/>
          <el-table-column fixed="right" :label="$t('searchOrder.operate')" align="center" width="150">
            <template #default="scope">
              <el-button size="mini" type="text" plain @click="finisha(scope.row)">{{ $t('searchOrder.sureadd') }}</el-button>
              <el-button type="text" plain @click="finisha(scope.row)">{{ $t('searchOrder.sureadd') }}</el-button>
            </template>
        </el-table-column>
        </el-table>
@@ -874,7 +919,6 @@
          :data="tableDataa" 
          @row-click="handleRowClick" 
          height="700"
          @expand-change="handleExpandChange"  
          row-key="id" 
          default-expand-all
          :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}" 
@@ -885,7 +929,7 @@
                <el-table  
                  :data="props.row.hollowBigStorageCageDetails"  
                  border
                  style="width: 100%;margin-left: 20px;"  
                  style="width: 98%;margin-left: 20px;"  
                  row-key="id"  
                  :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}" 
                >  
@@ -914,9 +958,9 @@
          <el-table-column prop="gap" align="center" :label="$t('searchOrder.glassgaps')" min-width="80" />
           <el-table-column fixed="right" :label="$t('searchOrder.operate')" align="center"  min-width="220">
            <template #default="scope">
              <el-button size="mini" type="text" plain @click="broke(scope.row)">{{ $t('searchOrder.breakage') }}</el-button>
              <el-button size="mini" type="text" plain @click="brokec(scope.row)">{{ $t('searchOrder.takeout') }}</el-button>
              <el-button size="mini" type="text" plain @click="opena(scope.row)">{{ $t('searchOrder.delete') }}</el-button>
              <el-button type="text" plain @click="broke(scope.row)">{{ $t('searchOrder.breakage') }}</el-button>
              <el-button type="text" plain @click="brokec(scope.row)">{{ $t('searchOrder.takeout') }}</el-button>
              <el-button type="text" plain @click="opena(scope.row)">{{ $t('searchOrder.delete') }}</el-button>
            </template>
        </el-table-column>
                </el-table>
@@ -935,7 +979,7 @@
          <template #default="scope">  
          <el-tag  
            :type="scope.row.enableState === 1 ? 'success' : 'danger'"  
            @click="toggleEnableState(scope.row)"  
            @click="toggleEnableState(scope.row)"
          >  
            {{ scope.row.enableState === 1 ? $t('searchOrder.enable') : $t('searchOrder.disable')}}  
          </el-tag>  
@@ -945,12 +989,12 @@
          
       <el-table-column fixed="right" :label="$t('searchOrder.operate')" align="center">
            <template #default="scope">
              <el-button size="mini" type="text" plain  @click="handleBindRack(scope.row)">{{ $t('searchOrder.add') }}</el-button>
              <el-button type="text" plain  @click="handleBindRack(scope.row)">{{ $t('searchOrder.add') }}</el-button>
            </template>
        </el-table-column>
        </el-table>
        <div>
    <div style="margin-top: 20px;margin-left: 40%;">
    <!-- <div style="margin-top: 20px;margin-left: 40%;">
      <el-pagination
          background
          size="large"
@@ -959,11 +1003,11 @@
          :current-page.sync="currentPage2"
          @current-change="handlePageChange2"
        />
    </div>
    </div> -->
  </div>
  </el-dialog>
  <!-- 历史任务 -->
<el-dialog v-model="blindb" top="5vh" width="95%">
<el-dialog v-model="blindb" top="5vh" width="95%" @close="iframeUrl=''">
     <iframe 
     :src="iframeUrl" 
     marginwidth="2000px"
@@ -1065,22 +1109,22 @@
        top: calc(100% - 210px); /* 从上到下结束位置 */
    }
}
.img-dlpl{
.img-zkdlpl{
  margin-left: 20px;
  margin-top: 0px;
  background-image:url('../../assets/zhongkong.png');
  background-image:url('/zhongkong.png');
  background-repeat: no-repeat;
  background-attachment: local;
  min-height: 700px;
  width: 1000px;
  min-height: 500px;
  width: 800px;
  max-width: 100%;
  background-size: 1000px 700px;
  background-size: 800px 500px;
  overflow: hidden;
  position:relative
}
.img-car1{
  display: flex;
  background-image:url('../../assets/xiaoche.png');
  background-image:url('/xiaoche.png');
  position: absolute;
  background-repeat: no-repeat;
  background-attachment: local;
@@ -1093,7 +1137,7 @@
}
.img-car4{
  display: flex;
  background-image:url('../../assets/xiaoche.png');
  background-image:url('/xiaoche.png');
  position: absolute;
  background-repeat: no-repeat;
  background-attachment: local;