更换前端打包方式，将ip地址配置提取到public

wangfei

2025-11-12 73fe3c5574c8fbb7b18fa9b76d53b918f6f921e1

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

@@ -28,10 +28,25 @@
const tableDatae = ref([])
const carPosition = ref([])
const tableDatass = ref([])
const tableDataLack = ref([])
const tableDataMiss = ref([])
// 响应式状态
const showAlert = ref(false)
const alertMessage = ref('')
const alarmData = ref<any>(null)
const showModal = ref(false)
const currentAlarm = ref<any>(null)
const tableDataAlert = ref([])
const alertText = ref('')
const engineerId = ref('')
const ganghua = ref('')
const diaodu = ref('')
const hollowPriority = ref('')
const flowCardId = ref('')
const glassType = ref('')
const layer = ref('')
const filmsId = ref('')
const thickness = ref('')
const adjust = ref([]);
const adjusta = ref([]);
const adjustedRects = ref([]);
@@ -39,12 +54,15 @@
const adjustedRectsb = ref([]);
const adjustedRectsc = ref([]);
const adjustedRectsd = ref([]);
const adjustedRectse = ref([]);
const subRectsCounts = ref([]);
const subRectsCountsa = ref([]);
const subRectsCountsb = ref([]);
const subRectsCountsc = ref([]);
const subRectsCountsd = ref([]);
const subRectsCountse = ref([]);
const currentRow = reactive({}); // 当前行的数据 
const currentLack = reactive({});
const currentPage2 = ref(1)
const add = ref(false)
const glassId = ref('');
@@ -58,13 +76,9 @@
const cell8=ref(true);
const cell9=ref(true);
const blindb = ref(false)
const dialogFormVisibleb = ref(false)
const selectedRow = ref(null);
const temperingengineerId=ref('');
const handlePageChange2 = (newPage) => {
  currentPage2.value = newPage;
  window.localStorage.setItem('pagenumber', currentPage2.value)
  fetchxiang();
};
const handleBindRack = (row) => {
  selectedRow.value = row; // 更新选中的行数据  
  currentRow.deviceId  = row.deviceId; // 直接设置响应式属性  
@@ -72,6 +86,79 @@
  window.localStorage.setItem('deviceId', row.deviceId)
  window.localStorage.setItem('slot', row.slot)
  add.value = true;
};
// 多条破损数据
const handleMissingFilms = (row) => {
  dialogFormVisibleb.value = true;
  handleAllMissing(row)
};
const handleAllMissing = async (row) => {
  try  {
  const response = await request.post('/hollowGlass/hollowGlassRelationInfo/queryLackGlassByFlowCard', {
    flowCardId: row.flowCardId,
    layer: row.layer,
    orderSort: row.glassType,
    //  glassId: row.glassId
    });
    if (response.code == 200) {
      ElMessage.success(response.message);
      tableDataMiss.value = response.data
    } else {
      ElMessage.error(response.message);
    }
}
catch (error) {
  }
}
const handlePageChange2 = (newPage) => {
  currentPage2.value = newPage;
  fetchFlowBind(currentLack.flowCardId, currentPage2.value);
};
const fetchFlowBind = async (flowCardId, page) => {
  try {
    var url = "/hollowGlass/hollowGlassRelationInfo/queryLackByFlowCard?flowCardId=" + flowCardId + "&layer=" + 1;
    const response = await request.post(url)
    if (response.code == 200) {
      tableDataLack.value = response.data[page];
      ElMessage.success(response.message);
    } else {
    }
  } catch (error) {
  }
}
// 计算合计行的方法
const getSummaries = (param) => {
  const { columns, data } = param;
  const sums: string[] = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计';
      return;
    }
    
    // 只对需要计算的列进行求和
    const needSumColumns = ['sumCount', 'pairCount', 'totalNumber', 'realCount'];
    if (needSumColumns.includes(column.property)) {
      const values = data.map(item => Number(item[column.property]));
      if (!values.every(value => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
        sums[index] += ''; // 转为字符串
      } else {
        sums[index] = 'N/A';
      }
    } else {
      sums[index] = '';
    }
  });
 
  return sums;
};
// 搜索
const searchout = async () => {
@@ -91,7 +178,7 @@
// 是否禁用
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);
@@ -131,6 +218,71 @@
  } catch (error) {
  }  
}; 
// 缺片详情-破损
const handleBroke = async (row) => {
  try {
     const confirmResult = await ElMessageBox.confirm(
      t('searchOrder.broke'),
      t('workOrder.prompt'),
      {
        confirmButtonText: t('workOrder.yes'),
        cancelButtonText: t('workOrder.cancel'),
        type: 'warning',
      }
    );
    const response = await request.post('/hollowGlass/hollowGlassRelationInfo/hollowBigStorageGlassDamage', {
      flowCardId: row.flowCardId,
      glassType: row.glassType,
      glassId: row.glassId,
      layer: row.layer,
      state: 8,
      line: 1,
      workingProcedure: '中空',
      remark: '中空'
    })
    if (response.code == 200) {
      ElMessage.success(response.message);
      const { flowCardId } = row;
      fetchFlowBind(flowCardId, currentPage2.value);
    } else {
      ElMessage.error(response.msg);
    }
  } catch (error) {
    console.error(error);
  }
}
// 缺片详情-一键破损
const handleAllBroke = async (row) => {
  try {
     const confirmResult = await ElMessageBox.confirm(
      t('order.dilapidationWhether'),
      t('workOrder.prompt'),
      {
        confirmButtonText: t('workOrder.yes'),
        cancelButtonText: t('workOrder.cancel'),
        type: 'warning',
      }
    );
    const response = await request.post('/hollowGlass/hollowGlassRelationInfo/hollowBigStorageGlassDamage', {
      flowCardId: row.flowCardId,
      glassType: row.glassType,
      layer: row.layer,
      state: 8,
      line: 1,
      workingProcedure: '中空',
      remark: '中空'
    })
    if (response.code == 200) {
      ElMessage.success(response.message);
      const { flowCardId } = row;
      fetchFlowBind(flowCardId, currentPage2.value);
    } else {
      ElMessage.error(response.msg);
    }
  } catch (error) {
    console.error(error);
  }
}
 // 破损
 const broke = async(row) => {  
  try {
@@ -225,6 +377,35 @@
  } catch (error) {
  }  
}; 
// 警报确认
const handleSure = async (row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
      t('hellow.clickmakesure'),
      t('productStock.prompt'),
      {
        confirmButtonText: t('productStock.yes'),
        cancelButtonText: t('productStock.cancel'),
        type: 'warning',
      }
    );
    if (confirmResult === 'confirm') {
      const response = await request.post('/hollowGlass/productAlarmInfo/updateAlarmInfo', {
        id: row.id
      })
      if (response.code === 200) {
        showModal.value = false;
        showAlert.value = false;

        ElMessage.success(response.message);
      } else {
        ElMessage.error(response.msg);
      }
    }
  } catch (error) {
    console.error('发生错误:', error);
  }
};
const handlexiang = () => {
  dialogFormVisiblea.value = true;
  fetchxiang(); 
@@ -236,10 +417,13 @@
// 理片笼信息
const fetchxiang = async () => {
  try {     
    const response = await request.post('/hollowGlass/hollowBigStorageCage/queryHollowBigStorageCageDetail',{
    const response = await request.post('/hollowGlass/hollowBigStorageCageDetails/queryVerticalSheetCageDetailsList',{
        // deviceId: page,
        engineerId: engineerId.value,
        filmsId: filmsId.value,
        flowCardId: flowCardId.value,
        glassId: glassId.value,
        thickness: -1,
    })
    if (response.code === 200) {  
      ElMessage.success(response.message);
@@ -253,10 +437,13 @@
const fetchxianga = async () => {
  let page = window.localStorage.getItem('pagenumber')
  try {     
    const response = await request.post('/hollowGlass/hollowBigStorageCage/queryHollowBigStorageCageDetail',{
    const response = await request.post('/hollowGlass/hollowBigStorageCageDetails/queryVerticalSheetCageDetailsList',{
        deviceId: page,
        engineerId: engineerId.value,
        filmsId: filmsId.value,
        flowCardId: flowCardId.value,
        glassId: glassId.value,
        thickness: thickness.value ? thickness.value : -1,
    })
    if (response.code === 200) {  
      ElMessage.success(response.message);
@@ -273,28 +460,28 @@
  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 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  {
@@ -313,11 +500,59 @@
catch (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 socketUrl = `ws://${window.ipConfig.serverUrl}/api/hollowGlass/api/talk/hollowGlassMessage`;
const handleMessage = (data) => {
  if(data.bigStorageCageUsageSummary!=null){
    const summaries = data.bigStorageCageUsageSummary[0];
  // 报警信息
if (data.alarmInfo[0] != null && data.alarmInfo[0].length > 0) {
  const alert = data.alarmInfo[0];
  const { id, alarmMessage, ...rest } = alert[0];
  alertMessage.value = `${alarmMessage}`;
  alertMessage.value = `${alert[0].alarmMessage}`;
  if (alert[0].alarmCode === 'sizeSame') {
    alertText.value = t('hellow.sizeSame');
  } else if (alert[0].alarmCode === 'idSame') {
    alertText.value = t('hellow.idSame');
  } else if (alert[0].alarmCode === 'slotLess') {
    alertText.value = t('hellow.slotLess');
  } else if (alert[0].alarmCode === 'overSize') {
    alertText.value = t('hellow.overSize');
  } else if (alert[0].alarmCode === 'noGlass') {
    alertText.value = t('hellow.noGlass');
  } else {
    alertText.value = t('hellow.unknownAlert');
  }
    alarmData.value = data; // 存储完整数据用于弹窗
    showAlert.value = true;
}
   const formattedData = data.alarmInfo[0].map(record => ({
     ...record,
     formattedCreateTime: formatTimestamp(record.createTime),
     alarmCode: record.alarmCode,
     alarmMessage: record.alarmMessage
   }));
    tableDataAlert.value = formattedData;

  if(data.lackDetailsList!=null){
    const summaries = data.lackDetailsList[0];
      const updatedData = summaries.map(summary => ({
        ...summary,
        totalNumber: summary.layer * summary.sumCount,
@@ -392,50 +627,78 @@
}else{
  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: 64/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: 64/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: 64/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: 64/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: 64/55,
  }));
subRectsCountsd.value = data.bigStorageCageInfos[0][5].map(rect => rect.count);
adjustedRectse.value = data.bigStorageCageInfos[0][6].map((rect, index) => ({
    id: index + 1,
    height: 15/55,
    top: 64/55,
  }));
subRectsCountse.value = data.bigStorageCageInfos[0][6].map(rect => rect.count);

  }else{
    adjustedRects.value = '',
    adjustedRectsa.value = '',
    adjustedRectsb.value = '',
    adjustedRectsc.value = ''
    adjustedRectsd.value = ''
    adjustedRectsc.value = '',
    adjustedRectsd.value = '',
    adjustedRectse.value = ''
  }
};

const getAlertText = (alarmCode) => {
  const codeMap = {
    sizeSame: 'hellow.sizeSame',
    idSame: 'hellow.idSame',
    slotLess: 'hellow.slotLess',
    overSize: 'hellow.overSize',
    noGlass: 'hellow.noGlass'
  };
  return alarmCode in codeMap 
    ? t(codeMap[alarmCode]) 
    : t('hellow.unknownAlert');
};
// 警报双击弹窗
const handleDoubleClick = () => {
  showModal.value = true;
};
// 计算每个大矩形的样式
const rectStyle = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  width: '150px',
  left: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
@@ -452,7 +715,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 {
@@ -468,7 +731,7 @@
// 计算每个大矩形的样式
const rectStylea = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  width: '150px',
  left: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
@@ -485,7 +748,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 {
@@ -501,7 +764,7 @@
// 计算每个大矩形的样式
const rectStyleb = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  width: '150px',
  left: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
@@ -518,7 +781,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 {
@@ -534,7 +797,7 @@
// 计算每个大矩形的样式
const rectStylec = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  width: '150px',
  left: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
@@ -551,7 +814,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 {
@@ -567,7 +830,7 @@
// 计算每个大矩形的样式
const rectStyled = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  width: '150px',
  left: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
@@ -584,7 +847,32 @@
// 计算每个小矩形的样式
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 {
    position: 'absolute',
    width,
    height: '100%',
    marginLeft,
    top: '0px',
    backgroundColor: '#911005',
    left,
  };
};
// 计算每个小矩形的样式和数量
const getSubRectse = (rectIndex) => {
  const count = subRectsCountse.value[rectIndex];
  const subRects = [];
  for (let i = 0; i < count; i++) {
    subRects.push({});
  }
  return subRects;
};
// 计算每个小矩形的样式
const subRectStylee = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '3px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  return {
@@ -610,21 +898,16 @@
    closeWebSocket(socket);
    }
    });
function getStatusType(enableState: number) {  
  switch (enableState) {  
    case 100:
      return 'success';  
    case 102: 
      return 'warning';  
  }  
}  
function getStatusText(enableState: number) {
  switch (enableState) {
    case 100:  
      return t('searchOrder.zailong');
    case 102:  
      return t('searchOrder.rengongxp'); 
  }  
// 格式化时间戳为年月日时间字符串的函数
function formatTimestamp(timestamp) {
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并补零
const day = String(date.getDate()).padStart(2, '0'); // 补零
const hours = String(date.getHours()).padStart(2, '0'); // 补零（如果需要显示时间）
const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零（如果需要显示时间）
const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零（如果需要显示时间）
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
function getcasOnea(isSame) {  
  switch (isSame) {  
@@ -654,10 +937,65 @@
</script>
<template>
  <div style="height: 600px;">
    <div v-if="showAlert" class="global-alert-bar" @dblclick="handleDoubleClick">
    <div class="alert-content">
      <el-icon><WarnTriangleFilled /></el-icon>
      <span class="alert-text">
        {{ alertText }} (id:{{ alertMessage }})
      </span>
    </div>
    <button @click="showAlert = false" class="close-btn">×</button>
  </div>
  <el-dialog
    v-model="showModal"
    width="40%"
    center
  >
      <el-table 
      ref="table"
      border
      :data="tableDataAlert" 
      max-height="calc(500px - 35px)"
      style="width: 100%;"
    >
      <el-table-column prop="formattedCreateTime" align="center" :label="$t('film.createtime')" min-width="100" />
      <el-table-column 
       :label="$t('hellow.content')" 
       align="center" 
       min-width="220"
     >
       <template #default="scope">
           <span>
             {{ getAlertText(scope.row.alarmCode) }} 
             (id:{{ scope.row.alarmMessage }})
           </span>
       </template>
     </el-table-column>
      <el-table-column fixed="right" :label="$t('film.operate')" align="center" width="100">
        <template #default="scope">
          <el-button type="text" plain
            @click="handleSure(scope.row)">{{ $t('basicData.yes') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
    <div style="display: flex;">
    <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-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" />
    <div style="display: flex;">
   <div style="margin-left: 15px;margin-top: 5px;font-size: 14px;top: 5vh;margin-top: 12px;">{{ $t('searchOrder.hollowPriority') }}：</div>
   <div style="margin-left: 15px;margin-top: 5px;font-size: 14px;top: 5vh;margin-top: 12px;color: #911005;">{{ $t('searchOrder.firstLinePriority') }}</div>
    <el-switch 
       style="margin-top: 7px;margin-left: 10px;" 
       v-model="hollowPriority" 
       class="mb-2" 
       @change="handlehollowPriority" 
     />
   <div style="margin-left: 15px;margin-top: 5px;font-size: 14px;top: 5vh;margin-top: 12px;color: rgb(184, 130, 48)">{{ $t('searchOrder.secondLinePriority') }}</div>
     </div>
</div>
    <div id="dotClass">
        <div>{{ $t('searchOrder.inkageEntity') }}</div>
        <i :style="{ marginTop: '2px', backgroundColor: inkageEntity, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
@@ -676,10 +1014,139 @@
        <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:580px;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: 64px;position: relative;top:82px;left: 415px;">
      <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: 64px;position: relative;top:88px;left: 415px;">
  <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: 64px;position: relative;top:93px;left: 415px;">
    <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: 64px;position: relative;top:99px;left: 415px;">
    <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: 64px;position: relative;top:105px;left: 415px;">
    <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 v-show="cell6" style="width: 150px;height: 64px;position: relative;top:28px;left: 40px;">
    <div v-for="(rect, rectIndex) in adjustedRectse" :key="rect.id" :style="rectStyled(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRectse(rectIndex)"
      :key="subIndex"
      :style="subRectStylee(rectIndex, subIndex)"
    ></div>
    </div>
    </div>
</div>
</div>
<el-card style="flex: 1; height: 500px; overflow-y: auto;">
  <div style="width: 100%; height: 100%; overflow: hidden;">
    <el-table 
      ref="table" 
      :data="tableDatass" 
      :header-cell-style="{background:'#F2F3F5', color:'#1D2129'}"
      max-height="calc(500px - 35px)"
      style="width: 100%;"
    >
      <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="139" />
      <el-table-column prop="layer" align="center" :label="$t('reportmanage.layer')" min-width="38" />
      <el-table-column prop="glassType" align="center" :label="$t('large.serialnumber')" min-width="80" />
      <el-table-column prop="thickness" align="center" :label="$t('hellow.thickness')" min-width="52" />
      <el-table-column prop="filmsId" align="center" :label="$t('hellow.coatingtypes')" min-width="62"/>
      <!-- <el-table-column prop="filmsId" align="center" :label="$t('hellow.coatingtypes')" min-width="62" show-overflow-tooltip/> -->
      <el-table-column prop="height" align="center" :label="$t('hellow.height')" min-width="55" />
      <el-table-column prop="width" align="center" :label="$t('hellow.width')" min-width="55" />
      <el-table-column prop="lackCount" align="center" :label="$t('hellow.missingnumber')" min-width="80" />
      <el-table-column prop="damageCount" align="center" :label="$t('large.brokenNum')"/>
      <!-- <el-table-column prop="patchCount" align="center" :label="$t('large.patchCount')"/> -->
      <el-table-column fixed="right" :label="$t('searchOrder.operate')" align="center"  min-width="82">
            <template #default="scope">
              <el-button type="text" plain  @click="handleMissingFilms(scope.row)">{{ $t('hellow.missingfilms') }}</el-button>
            </template>
        </el-table-column>
    </el-table>
  </div>
</el-card>
  </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: 10px;">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 300px;">
      <el-table height="300px" ref="table"
    <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" />
@@ -700,8 +1167,8 @@
        </el-table>
       </div>
    </el-card>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;">
      <el-table height="300px" ref="table" 
    <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" />
@@ -713,111 +1180,6 @@
         </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 style="display: flex; align-items: flex-start; gap: 20px; height: 70vh;">
<!-- // 父级框 -->
<div class="img-zkdlpl" >
    <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; height: 600px; overflow-y: auto;">
      <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="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>
  </div>
  </div>
  <!-- 添加理片笼信息 -->
@@ -885,66 +1247,19 @@
  <!-- 理片笼信息 -->
<el-dialog v-model="dialogFormVisiblea" top="2vh" width="97%" :title="$t('searchOrder.cageinformation')">
  <div style="display: flex;">
    <el-input v-model="flowCardId" style="margin-left: 10px;margin-bottom: 10px;width: 240px;" :placeholder="$t('searchOrder.incardnumber')" />
    <el-input v-model="filmsId" style="margin-left: 10px;margin-bottom: 10px;width: 240px;" :placeholder="$t('film.infilms')"/>
    <el-input v-model="engineerId" clearable style="margin-left: 10px;margin-bottom: 10px;width: 240px;" :placeholder="$t('processCard.projectnumber')"/>
    <el-input v-model="glassId" clearable style="margin-left: 10px;margin-bottom: 10px;width: 240px;" :placeholder="$t('searchOrder.inglassID')"/>
    <el-input v-model="flowCardId" clearable style="margin-left: 10px;margin-bottom: 10px;width: 240px;" :placeholder="$t('searchOrder.incardnumber')" />
    <el-input v-model="filmsId" clearable style="margin-left: 10px;margin-bottom: 10px;width: 240px;" :placeholder="$t('film.infilms')"/>
    <el-input v-model="thickness" clearable style="margin-left: 10px;margin-bottom: 10px;width: 240px;" :placeholder="$t('searchOrder.inthickness')"/>
    <el-button type="primary" style="margin-left: 10px;margin-bottom: 10px;" @click="fetchxianga">
      {{$t('reportmanage.inquire')}}</el-button>
  </div>
    <el-table  
          :data="tableDataa" 
          @row-click="handleRowClick" 
          height="700"
          row-key="id" 
          default-expand-all
          :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}" 
        >  
          <el-table-column type="expand">  
            <template #default="props">  
              <div v-if="props.row.hollowBigStorageCageDetails && props.row.hollowBigStorageCageDetails.length">  
                <el-table  
                  :data="props.row.hollowBigStorageCageDetails"  
                  border
                  style="width: 98%;margin-left: 20px;"  
                  row-key="id"  
                  :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}" 
                >  
          <!-- <el-table-column prop="menuName" label="二级菜单栏" align="center" min-width="140" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"/>   -->
          <el-table-column prop="glassId" :label="$t('searchOrder.glassID')" align="center" min-width="130"/>
          <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="130" />
          <el-table-column prop="filmsId" align="center" :label="$t('searchOrder.coatingtypes')" min-width="80" />
          <!-- <el-table-column prop="glassType" align="center" :label="$t('searchOrder.typeglass')" min-width="80" /> -->
          <el-table-column prop="width" align="center" :label="$t('searchOrder.width')" min-width="80" />
          <el-table-column prop="height" align="center" :label="$t('searchOrder.height')" min-width="80" />
          <el-table-column prop="thickness" align="center" :label="$t('searchOrder.thickness')" min-width="80" />
          <el-table-column prop="temperingLayoutId" align="center" :label="$t('searchOrder.layoutID')" min-width="100" />
          <el-table-column prop="temperingFeedSequence" align="center" :label="$t('searchOrder.picturesequence')" min-width="120" />
          <el-table-column
            align="center"
            :label="$t('searchOrder.startstatus')"
            min-width="80"
            prop="state"
          >
          <template #default="scope">  
        <el-tag :type="getStatusType(scope.row.state)">  
          {{ getStatusText(scope.row.state) }}  
        </el-tag>  
      </template> 
          </el-table-column>
          <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 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>
              </div>  
            </template>  
          </el-table-column>  
          <el-table-column prop="id" :label="$t('searchOrder.cagetableID')" align="center" min-width="100"/>  
  <el-table ref="table" style="margin-top: 20px;height: 700px;width: 1770px;" :data="tableDataa" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="deviceId" align="center" :label="$t('searchOrder.cagenumber')" min-width="150" />
          <el-table-column prop="slot" align="center" :label="$t('searchOrder.gridnumber')" min-width="150" />
          <el-table-column prop="engineerId" align="center" :label="$t('searchOrder.projectnumber')" min-width="100" />
          <el-table-column prop="layer" align="center" :label="$t('processCard.layer')" min-width="80" />
          <el-table-column prop="slot" align="center" :label="$t('searchOrder.gridnumber')" min-width="120" />
          <el-table-column
          align="center"
            :label="$t('searchOrder.startstatus')"
@@ -954,35 +1269,54 @@
          <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>  
        </template> 
          </el-table-column>
          <el-table-column prop="remainWidth" align="center" :label="$t('searchOrder.remainingwidth')" min-width="120" />
          
       <el-table-column fixed="right" :label="$t('searchOrder.operate')" align="center">
            <template #default="scope">
              <el-button type="text" plain  @click="handleBindRack(scope.row)">{{ $t('searchOrder.add') }}</el-button>
            </template>
        </el-table-column>
          <el-table-column prop="glassId" :label="$t('searchOrder.glassID')" align="center" min-width="130"/>
          <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="130" />
          <el-table-column prop="filmsId" align="center" :label="$t('searchOrder.coatingtypes')" min-width="80" />
          <el-table-column prop="width" align="center" :label="$t('searchOrder.width')" min-width="80" />
          <el-table-column prop="height" align="center" :label="$t('searchOrder.height')" min-width="80" />
          <el-table-column prop="thickness" align="center" :label="$t('searchOrder.thickness')" min-width="80" />
          <el-table-column prop="temperingLayoutId" align="center" :label="$t('searchOrder.layoutID')" min-width="100" />
          <el-table-column prop="temperingFeedSequence" align="center" :label="$t('searchOrder.picturesequence')" min-width="120" />
          <el-table-column prop="gap" align="center" :label="$t('searchOrder.glassgaps')" min-width="80" />
          <el-table-column fixed="right" :label="$t('film.operate')" align="center" width="240">
              <template #default="scope">
              <!-- <el-button type="text" plain  @click="handleBindRack(scope.row)">{{ $t('searchOrder.add') }}</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>
        <div>
    <!-- <div style="margin-top: 20px;margin-left: 40%;">
      <el-pagination
          background
          size="large"
          layout="prev, pager, next"
          :total="50"
          :current-page.sync="currentPage2"
          @current-change="handlePageChange2"
        />
    </div> -->
  </div>
  </el-dialog>
  <!-- 多条破损数据 -->
  <el-dialog v-model="dialogFormVisibleb" top="15vh" width="70%" height="500">
    <el-button plain  @click="handleAllBroke">{{ $t('order.dilapidationAll') }}</el-button>
    <el-table ref="table" style="margin-top: 20px;height: 400px;" :data="tableDataMiss"
      :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129' }">
      <el-table-column prop="glassType" align="center" :label="$t('large.serialnumber')" min-width="80" />
      <el-table-column prop="glassId" align="center" :label="$t('searchOrder.glassID')" min-width="80" />
      <el-table-column prop="thickness" align="center" :label="$t('hellow.thickness')" min-width="80" />
      <el-table-column prop="workingProcedure" align="center" :label="$t('searchOrder.process')" min-width="80" />
      <el-table-column prop="height" align="center" :label="$t('hellow.height')" min-width="80" />
      <el-table-column prop="width" align="center" :label="$t('hellow.width')" min-width="80" />
      <el-table-column fixed="right" :label="$t('searchOrder.operate')" align="center">
            <template #default="scope">
              <el-button type="text" plain  @click="handleBroke(scope.row)">{{ $t('order.dilapidation') }}</el-button>
            </template>
      </el-table-column>
    </el-table>
  </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"
@@ -1087,19 +1421,19 @@
.img-zkdlpl{
  margin-left: 20px;
  margin-top: 0px;
  background-image:url('../../assets/zhongkong.png');
  background-image:url('/src/assets/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;
@@ -1112,7 +1446,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;
@@ -1142,4 +1476,45 @@
.row-red-background {
  background-color: #CDAF95 !important;
}
.global-alert-bar {
  position: fixed;
  top: 0;
  left: 50%; /* 水平居中关键 */
  transform: translateX(-50%); /* 水平居中关键 */
  padding: 12px 20px;
  background-color: #dbdbd7;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
  max-width: 80%; /* 防止小屏幕溢出 */
  min-width: 400px; /* 最小宽度保证 */
}
/* 提示内容居中 */
.alert-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1; /* 占据可用空间 */
}
/* 提示文字样式 */
.alert-text {
  margin-left: 8px;
  text-align: center;
  font-weight: bold;
  color: #0d0d0d;
}
/* 关闭按钮样式 */
.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  margin-left: 20px;
}
/* 页面容器顶部内边距 */
#app-container {
  padding-top: 60px; /* 根据alert高度调整 */
}
</style>