1、中空选中除膜改为多选 2、流程卡报工情况查询添加工程号条件，添加线路，备注显示

ZengTao

7 天以前 1195e51e67436cf2b9513678b5e9d3f27a043de4

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

@@ -1,14 +1,15 @@
<script lang="ts" setup>
import {useI18n} from 'vue-i18n'
import {useRouter} from "vue-router"
import { useI18n } from 'vue-i18n'
import { useRouter } from "vue-router"
import request from "@/utils/request"
import {host, WebSocketHost} from '@/utils/constants'
import {onBeforeUnmount, onMounted, onUnmounted, reactive, ref} from "vue";
import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
import {ElMessage, ElMessageBox} from 'element-plus'
import LackDetailDialog from './LackDetailDialog.vue';
const dialogFormVisibleaDownGlasss = ref(false)
const scanGlass = ref([])
const {t} = useI18n()
const { t } = useI18n()
let language = ref(localStorage.getItem('lang') || 'zh')
const router = useRouter()
const dialogFormVisiblea = ref(false)
@@ -28,10 +29,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,45 +55,131 @@
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('');
const cell1=ref(true);
const cell2=ref(true);
const cell3=ref(true);
const cell4=ref(true);
const cell5=ref(true);
const cell6=ref(true);
const cell7=ref(true);
const cell8=ref(true);
const cell9=ref(true);
const cell1 = ref(true);
const cell2 = ref(true);
const cell3 = ref(true);
const cell4 = ref(true);
const cell5 = ref(true);
const cell6 = ref(true);
const cell7 = ref(true);
const cell8 = ref(true);
const cell9 = ref(true);
const blindb = ref(false)
const dialogFormVisibleb = ref(false)
const dialogFormVisibleLack = ref(false)
const selectedRow = ref(null);
const temperingengineerId=ref('');
const handlePageChange2 = (newPage) => {
  currentPage2.value = newPage;
  window.localStorage.setItem('pagenumber', currentPage2.value)
  fetchxiang();
function nestedTableRowClassName(parentRow, row) {
  if (parentRow.isThroughSlot == true) {
    return 'row-red-background';
  }
  if (row.row?.sumCount !== undefined && row.row?.pairCount !== undefined && row.row.sumCount !== row.row.pairCount) {
    return 'sum-equal-pair-row' // 返回自定义类名
  }
  return '';
}
// 缺片详情
const handleSliceRack = (row) => {
  currentRow.flowCardId = row.flowCardId;
  dialogFormVisibleLack.value = true;
};
const handleBindRack = (row) => {
  selectedRow.value = row; // 更新选中的行数据  
  currentRow.deviceId  = row.deviceId; // 直接设置响应式属性  
  currentRow.slot = row.slot;  
  currentRow.deviceId = row.deviceId; // 直接设置响应式属性
  currentRow.slot = row.slot;
  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 () => {
  try {
    const response = await request.post('/cacheVerticalGlass/bigStorageCageDetails/selectBigStorageCageDetails',{
      glassId:glassId.value
    const response = await request.post('/cacheVerticalGlass/bigStorageCageDetails/selectBigStorageCageDetails', {
      glassId: glassId.value
    });
    if (response.code == 200) {
      tableDataf.value = response.data;
@@ -90,28 +192,28 @@
};
// 是否禁用
const toggleEnableState = async (row) => {
  const newState = row.enableState === 1 ? 0 : 1;  
  var url="/hollowGlass/hollowBigStorageCageDetails/updateHollowStorageCageDisabled?slot="+row.slot + "&enableState=" + newState;
      const response = await request.get(url) 
  const newState = row.enableState === 1 ? 0 : 1;
  var url = "/hollowGlass/hollowBigStorageCageDetails/updateHollowStorageCageDisabled?slot=" + row.slot + "&enableState=" + newState;
  const response = await request.get(url)
  if (response.code === 200) {
      ElMessage.success(response.message);
      } else {  
      ElMessage.error(response.message);
      }  
  row.enableState = newState;  
}; 
 // 删除 
 const opena = async(row) => {  
    ElMessage.success(response.message);
  } else {
    ElMessage.error(response.message);
  }
  row.enableState = newState;
};
// 删除
const opena = async (row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(  
      t('searchOrder.deletemessage'), 
      t('searchOrder.prompt'),  
      {  
        confirmButtonText: t('searchOrder.yes'), 
    const confirmResult = await ElMessageBox.confirm(
      t('searchOrder.deletemessage'),
      t('searchOrder.prompt'),
      {
        confirmButtonText: t('searchOrder.yes'),
        cancelButtonText: t('searchOrder.cancel'),
        type: 'warning',  
      } 
    ); 
        type: 'warning',
      }
    );
    if (confirmResult === 'confirm') {
      const params = new URLSearchParams();
      params.append('state', '8');
@@ -120,29 +222,94 @@
      params.append('slot', row.slot);
      var url = `/hollowGlass/hollowBigStorageCageDetails/deleteHollowBigStorageCageDetails?${params.toString()}`;
      const response = await request.post(url)
    if (response.code === 200) {
       fetchxiang();
      //  tableDataa.value = response.data;
     ElMessage.success(response.message);
      if (response.code === 200) {
        fetchxiang();
        //  tableDataa.value = response.data;
        ElMessage.success(response.message);
      } else {
      ElMessage.error(response.message);
      }  
    }  
        ElMessage.error(response.message);
      }
    }
  } catch (error) {
  }  
}; 
 // 破损
 const broke = async(row) => {  
  }
};
// 缺片详情-破损
const handleBroke = async (row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(  
      t('searchOrder.broke'), 
      t('searchOrder.prompt'),  
      {  
        confirmButtonText: t('searchOrder.yes'), 
    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 {
    const confirmResult = await ElMessageBox.confirm(
      t('searchOrder.broke'),
      t('searchOrder.prompt'),
      {
        confirmButtonText: t('searchOrder.yes'),
        cancelButtonText: t('searchOrder.cancel'),
        type: 'warning',  
      } 
    ); 
        type: 'warning',
      }
    );
    if (confirmResult === 'confirm') {
      const params = new URLSearchParams();
      params.append('state', '8');
@@ -150,30 +317,30 @@
      params.append('glassId', row.glassId);
      params.append('slot', row.slot);
      var url = `/hollowGlass/hollowBigStorageCageDetails/damageHollowBigStorageCageDetails?${params.toString()}`;
    const response = await request.post(url)
      const response = await request.post(url)
      if (response.code === 200) {
       fetchxiang(); 
     ElMessage.success(response.message);
      } else {  
      ElMessage.error(response.message);
      }  
    }  
        fetchxiang();
        ElMessage.success(response.message);
      } else {
        ElMessage.error(response.message);
      }
    }
  } catch (error) {
  }  
}; 
 // 拿走
 const brokec = async(row) => {  
  }
};
// 拿走
const brokec = async (row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(  
      t('searchOrder.brokeb'), 
      t('searchOrder.prompt'),  
      {  
        confirmButtonText: t('searchOrder.yes'), 
    const confirmResult = await ElMessageBox.confirm(
      t('searchOrder.brokeb'),
      t('searchOrder.prompt'),
      {
        confirmButtonText: t('searchOrder.yes'),
        cancelButtonText: t('searchOrder.cancel'),
        type: 'warning',  
      } 
    ); 
    if (confirmResult === 'confirm') {  
        type: 'warning',
      }
    );
    if (confirmResult === 'confirm') {
      const params = new URLSearchParams();
      params.append('state', '9');
      params.append('deviceId', row.deviceId);
@@ -182,52 +349,81 @@
      var url = `/hollowGlass/hollowBigStorageCageDetails/damageHollowBigStorageCageDetails?${params.toString()}`;
      const response = await request.post(url)
      if (response.code === 200) {
       fetchxiang();
       ElMessage.success(response.message);
      } else {  
      ElMessage.error(response.message);
      }  
    }  
        fetchxiang();
        ElMessage.success(response.message);
      } else {
        ElMessage.error(response.message);
      }
    }
  } catch (error) {
  }  
}; 
  }
};
// 确认添加
const finisha = async(row) => {  
const finisha = async (row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(  
      t('searchOrder.sureadda'), 
      t('searchOrder.prompt'),  
      {  
        confirmButtonText: t('searchOrder.yes'), 
    const confirmResult = await ElMessageBox.confirm(
      t('searchOrder.sureadda'),
      t('searchOrder.prompt'),
      {
        confirmButtonText: t('searchOrder.yes'),
        cancelButtonText: t('searchOrder.cancel'),
        type: 'warning',  
      } 
    ); 
    if (confirmResult === 'confirm') {  
    let deviceId = window.localStorage.getItem('deviceId')
    let slot = window.localStorage.getItem('slot')
      const dataToSend = {  
        type: 'warning',
      }
    );
    if (confirmResult === 'confirm') {
      let deviceId = window.localStorage.getItem('deviceId')
      let slot = window.localStorage.getItem('slot')
      const dataToSend = {
        ...row,
        deviceId: deviceId,
        slot: slot
      };  
      };
      const response = await request.post("/cacheVerticalGlass/hollowBigStorageCageDetails/insertHollowBigStorageCageDetails", dataToSend)
    if (response.code === 200) {
      tableDataa.value = response.data;
      add.value = false;
      ElMessage.success(response.message);
      glassId.value = '';
      tableDataf.value = '';
      } else {  
      ElMessage.error(response.message);
      }  
    }  
      if (response.code === 200) {
        tableDataa.value = response.data;
        add.value = false;
        ElMessage.success(response.message);
        glassId.value = '';
        tableDataf.value = '';
      } else {
        ElMessage.error(response.message);
      }
    }
  } 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(); 
  fetchxiang();
  currentPage2.value = 1;
  window.localStorage.setItem('pagenumber', currentPage2.value)
  filmsId.value = ''
@@ -235,97 +431,146 @@
};
// 理片笼信息
const fetchxiang = async () => {
  try {     
    const response = await request.post('/hollowGlass/hollowBigStorageCage/queryHollowBigStorageCageDetail',{
        // deviceId: page,
        filmsId: filmsId.value,
        flowCardId: flowCardId.value,
  try {
    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) {  
    if (response.code === 200) {
      ElMessage.success(response.message);
      tableDataa.value = response.data
    } else {  
    } else {
      ElMessage.warning(response.msg)
    }  
    }
  } catch (error) {
  } 
  }
}
const fetchxianga = async () => {
  let page = window.localStorage.getItem('pagenumber')
  try {     
    const response = await request.post('/hollowGlass/hollowBigStorageCage/queryHollowBigStorageCageDetail',{
        deviceId: page,
        filmsId: filmsId.value,
        flowCardId: flowCardId.value,
  try {
    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) {  
    if (response.code === 200) {
      ElMessage.success(response.message);
      tableDataa.value = response.data
      filmsId.value = ''
      flowCardId.value = ''
    } else {  
    } else {
      ElMessage.warning(response.msg)
    }  
    }
  } catch (error) {
  } 
  }
}
function handleRowClick(row) {  
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 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  {
    const body = {  
  try {
    const body = {
      flag: diaodu.value,
    };
    var url="/hollowGlass/hollowGlassOutRelationInfo/dispatchHollowSwitch?flag="+diaodu.value;
  const response = await request.post(url)
    var url = "/hollowGlass/hollowGlassOutRelationInfo/dispatchHollowSwitch?flag=" + diaodu.value;
    const response = await request.post(url)
    if (response.code == 200) {
      ElMessage.success(response.message);
      diaodu.value = response.data
    }else {  
    } else {
      ElMessage.error(response.message);
      }  
    }
  }
  catch (error) {
  }
}
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];
      const updatedData = summaries.map(summary => ({
        ...summary,
        totalNumber: summary.layer * summary.sumCount,
      }));
      tableDatass.value = updatedData;
  // 报警信息
  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.HollowAllFlowCard!=null){
    tableDatass.value = data.HollowAllFlowCard[0];
  }else{
    tableDatass.value = []
      }
  }
  if (data.inkageEntity != null) {
    inkageEntity.value = data.inkageEntity[0] == true ? 'green' : '#911005';
  }
@@ -350,14 +595,14 @@
  if (data.freeOneRequestEntity != null) {
    freeone.value = data.freeOneRequestEntity == 1 ? 'green' : '#911005';
  }
  if(data.bigStorageCageDetailsOutTask!=null){
  if (data.bigStorageCageDetailsOutTask != null) {
    tableDatac.value = data.bigStorageCageDetailsOutTask[0]
    adjusta.value = data.bigStorageCageDetailsOutTask[0].filter(rect => rect.slot !== null && rect.slot !== undefined);
  } else {
    tableDatac.value = [],
    adjusta.value = []
      adjusta.value = []
  }
    if (data.scanGlass != null) {
  if (data.scanGlass != null) {
    scanGlass.value = data.scanGlass[0];
    let width = scanGlass.value.width;
    let height = scanGlass.value.height;
@@ -366,78 +611,76 @@
      scanGlass.value.height = width;
    }
  }
  if(data.bigStorageCageDetailsFeedTask!=null){
  if (data.bigStorageCageDetailsFeedTask != null) {
    tableDatad.value = data.bigStorageCageDetailsFeedTask[0]
    adjust.value = data.bigStorageCageDetailsFeedTask[0].filter(rect => rect.slot !== null && rect.slot !== undefined); 
  }else{
    adjust.value = data.bigStorageCageDetailsFeedTask[0].filter(rect => rect.slot !== null && rect.slot !== undefined);
  } else {
    tableDatad.value = []
      }
if(data.temperingGlassInfoList!=null){
  tableDatab.value = data.temperingGlassInfoList[0]
}else{
  }
  if (data.temperingGlassInfoList != null) {
    tableDatab.value = data.temperingGlassInfoList[0]
  } else {
    tableDatab.value = []
      }
if(data.bigStorageCageUsage!=null){
  tableDatae.value = data.bigStorageCageUsage[0]
}else{
  }
  if (data.bigStorageCageUsage != null) {
    tableDatae.value = data.bigStorageCageUsage[0]
  } else {
    tableDatae.value = []
      }
if(data.carPostion!=null){
  carPosition.value = data.carPostion[0]
}else{
  carPosition.value = []
  }
if(data.dispatchHollowSwitch!=null){
  diaodu.value = data.dispatchHollowSwitch[0]
}else{
  diaodu.value = ''
  if (data.carPostion != null) {
    carPosition.value = data.carPostion[0]
  } else {
    carPosition.value = []
  }
  if(data.bigStorageCageInfos!=null){
    adjustedRects.value = data.bigStorageCageInfos[0][1].map((rect, index) => ({
    id: index + 1,
    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: 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: 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: 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: 15/55,
    top: 33/55,
  }));
subRectsCountsd.value = data.bigStorageCageInfos[0][5].map(rect => rect.count);
  }else{
  if (data.dispatchHollowSwitch != null) {
    diaodu.value = data.dispatchHollowSwitch[0]
  } 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];
    adjustedRectsa.value = data.bigStorageCageInfos[0][2];
    console.log(adjustedRectsa.value)
    adjustedRectsb.value = data.bigStorageCageInfos[0][3];
    adjustedRectsc.value = data.bigStorageCageInfos[0][4];
    adjustedRectsd.value = data.bigStorageCageInfos[0][5];
    adjustedRectse.value = data.bigStorageCageInfos[0][6];
  } else {
    adjustedRects.value = '',
    adjustedRectsa.value = '',
    adjustedRectsb.value = '',
    adjustedRectsc.value = ''
    adjustedRectsd.value = ''
      adjustedRectsa.value = '',
      adjustedRectsb.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) => ({
const rectStyle = (rect, index, high) => ({
  position: 'absolute',
  width: '150px',
  left: '0px',
  top: `${index*rect.top}px`,
  top: `${index * high}px`,
  height: `${rect.height}px`,
});
// 计算每个小矩形的样式和数量
@@ -450,15 +693,17 @@
  return subRects;
};
// 计算每个小矩形的样式
const proportion = ref((150 / 6200).toFixed(2));
const subRectStyle = (rectIndex, subIndex) => {
  const width = '18px';
  const width = `${rectIndex.length * proportion.value}px`;
  // const width = '18px';
  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%',
    height: '1px',
    marginLeft,
    top: '0px',
    backgroundColor: '#911005',
@@ -470,7 +715,7 @@
  position: 'absolute',
  width: '150px',
  left: '0px',
  top: `${index*rect.top}px`,
  top: `${index * rect.top}px`,
  height: `${rect.height}px`,
});
// 计算每个小矩形的样式和数量
@@ -503,7 +748,7 @@
  position: 'absolute',
  width: '150px',
  left: '0px',
  top: `${index*rect.top}px`,
  top: `${index * rect.top}px`,
  height: `${rect.height}px`,
});
// 计算每个小矩形的样式和数量
@@ -536,7 +781,7 @@
  position: 'absolute',
  width: '150px',
  left: '0px',
  top: `${index*rect.top}px`,
  top: `${index * rect.top}px`,
  height: `${rect.height}px`,
});
// 计算每个小矩形的样式和数量
@@ -569,7 +814,7 @@
  position: 'absolute',
  width: '150px',
  left: '0px',
  top: `${index*rect.top}px`,
  top: `${index * rect.top}px`,
  height: `${rect.height}px`,
});
// 计算每个小矩形的样式和数量
@@ -597,6 +842,31 @@
    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 {
    position: 'absolute',
    width,
    height: '100%',
    marginLeft,
    top: '0px',
    backgroundColor: '#911005',
    left,
  };
};
const iframeUrl = ref('');
const handlehistorical = (row) => {
  blindb.value = true;
@@ -605,42 +875,37 @@
onMounted(() => {
  socket = initializeWebSocket(socketUrl, handleMessage);
});
  onUnmounted(() => {
    if (socket) {
onUnmounted(() => {
  if (socket) {
    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) {  
function getcasOnea(isSame) {
  switch (isSame) {
    case 1:
      return 'danger';  
    case 0: 
      return 'info';  
  }  
}  
      return 'danger';
    case 0:
      return 'info';
  }
}
function getStatuscasOnea(isSame) {
  switch (isSame) {
    case 1:  
    case 1:
      return t('searchOrder.same');
    case 0:  
      return t('searchOrder.notsame'); 
  }  
    case 0:
      return t('searchOrder.notsame');
  }
}
function tableRowClassName({ row }) {
  if (row.isSame === 1) {
@@ -654,402 +919,515 @@
</script>
<template>
  <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" />
    <div id="dotClass">
        <div>{{ $t('searchOrder.inkageEntity') }}</div>
        <i :style="{ marginTop: '2px', backgroundColor: inkageEntity, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
        <div style="margin-left: 70px;">{{ $t('searchOrder.requestEntity') }}</div>
        <i :style="{ marginTop: '2px', backgroundColor: requestEntity, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
        <div style="margin-left: 70px;">{{ $t('searchOrder.mesReplyEntity') }}</div>
        <i :style="{ marginTop: '2px', backgroundColor: mesReplyEntity, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
        <div style="margin-left: 70px;">{{ $t('searchOrder.outInkageEntity') }}</div>
        <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 style="margin-left: 70px;">{{ $t('hellow.freethree') }}</div>
        <i :style="{ marginTop: '2px', backgroundColor: freethree, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
    <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 class="confirm-text">{{ $t('hellow.pleaseConfirm') }}</span>
        </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-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>
      <div style="margin-left: 70px;">{{ $t('searchOrder.requestEntity') }}</div>
      <i
        :style="{ marginTop: '2px', backgroundColor: requestEntity, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
      <div style="margin-left: 70px;">{{ $t('searchOrder.mesReplyEntity') }}</div>
      <i
        :style="{ marginTop: '2px', backgroundColor: mesReplyEntity, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
      <div style="margin-left: 70px;">{{ $t('searchOrder.outInkageEntity') }}</div>
      <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 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 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 Object.values(adjustedRects)" :key="rect.id" :style="rectStyle(rect, rectIndex,1.6)">
              <div v-for="(subRect, subIndex) in rect" :key="subIndex"
                :style="subRectStyle(subRect, 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 Object.values(adjustedRectsa)" :key="rect.id" :style="rectStyle(rect, rectIndex,1.16)">
              <div v-for="(subRect, subIndex) in rect" :key="subIndex"
                :style="subRectStyle(subRect, 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 Object.values(adjustedRectsb)" :key="rect.id" :style="rectStyle(rect, rectIndex,1.16)">
              <div v-for="(subRect, subIndex) in rect" :key="subIndex"
                :style="subRectStyle(subRect, 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 Object.values(adjustedRectsc)" :key="rect.id" :style="rectStyle(rect, rectIndex,1.16)">
              <div v-for="(subRect, subIndex) in rect" :key="subIndex"
                :style="subRectStyle(subRect, 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 Object.values(adjustedRectsd)" :key="rect.id" :style="rectStyle(rect, rectIndex,1.16)">
              <div v-for="(subRect, subIndex) in rect" :key="subIndex"
                :style="subRectStyle(subRect, 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 Object.values(adjustedRectse)" :key="rect.id" :style="rectStyle(rect, rectIndex,2.56)">
              <div v-for="(subRect, subIndex) in rect" :key="subIndex"
                :style="subRectStyle(subRect, 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" style="margin-top: 20px; height: 700px;" :data="tableDatass"
      :row-class-name="tableRowClassName" :header-cell-style="{ background: '#F2F3F5', color: '#1D2129' }"
      row-key="projectNumber">
      <el-table-column>
        <template #default="props">
          <el-table :data="props.row.flowCardGlassInfoDTOList" style="width: 100%"
            :row-class-name="(row) => nestedTableRowClassName(props.row, row)">
            <el-table-column prop="layer" fixed align="center" :label="$t('hellow.layernumber')" min-width="50" />
            <el-table-column prop="thickness" align="center" :label="$t('hellow.thickness')" min-width="50" />
            <el-table-column prop="filmsId" align="center" :label="$t('hellow.coatingtypes')" min-width="80" />
            <el-table-column prop="sumCount" align="center" :label="$t('hellow.totalnumber')" min-width="80" />
            <el-table-column prop="realCount" align="center" :label="$t('hellow.realpieces')" min-width="80" />
            <el-table-column prop="damageCount" align="center" :label="$t('hellow.damagenumber')" min-width="80" />
            <el-table-column prop="pairCount" align="center" :label="$t('hellow.pairsnumber')" min-width="100" />
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="flowCardId" fixed align="center" :label="$t('hellow.cardnumber')" min-width="20" />
      <!-- <el-table-column prop="productName" fixed align="center" :label="$t('large.productname')" min-width="20" /> -->
      <!-- <el-table-column prop="customerName" fixed align="center" :label="$t('large.customerName')" min-width="20" /> -->
      <el-table-column fixed="right" :label="$t('hellow.operate')" align="center" width="82">
        <template #default="scope">
          <el-button type="text" plain @click="handleSliceRack(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="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 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" />
            <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="120">
              <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-column prop="isSame" align="center" :label="$t('searchOrder.whethersame')" min-width="120">
              <template #default="scope">
                <el-tag :type="getcasOnea(scope.row.isSame)">
                  {{ getStatuscasOnea(scope.row.isSame) }}
                </el-tag>
              </template>
            </el-table-column>
          </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>
    <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: 700px;margin-top: 40px; 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>
  <!-- 添加理片笼信息 -->
  <el-dialog v-model="add" top="10vh" width="70%" :title="$t('searchOrder.addcage')" >
  <el-dialog v-model="add" top="10vh" width="70%" :title="$t('searchOrder.addcage')">
    <div style="margin-bottom: 20px">
      <el-form>
        <el-row style="margin-top: -15px;margin-bottom: -2px;">
          <el-col :span="4">
              <div id="dt" style="font-size: 15px;">
              <el-form-item :label="$t('searchOrder.tida')"  style="width: 14vw">
            <div id="dt" style="font-size: 15px;">
              <el-form-item :label="$t('searchOrder.tida')" style="width: 14vw">
                {{ currentRow.deviceId }}
              </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div id="dta" style="font-size: 15px;">
          <el-form-item :label="$t('searchOrder.gridnumbera')" style="width: 14vw">
              <el-form-item :label="$t('searchOrder.gridnumbera')" style="width: 14vw">
                {{ currentRow.slot }}
              </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
      <div style="margin-top: -20px;margin-bottom: 40px;margin-left: 30px">
          <el-input v-model="glassId"   :placeholder="$t('searchOrder.inputid')" clearable style="width: 200px;">
          </el-input>
          <el-button type="primary" plain style="margin-left: 10px;" @click="searchout">{{ $t('searchOrder.search') }}</el-button>
    <div style="margin-top: -20px;margin-bottom: 40px;margin-left: 30px">
      <el-input v-model="glassId" :placeholder="$t('searchOrder.inputid')" clearable style="width: 200px;">
      </el-input>
      <el-button type="primary" plain style="margin-left: 10px;" @click="searchout">{{ $t('searchOrder.search')
        }}</el-button>
    </div>
    <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 200px;">
        <el-table height="100%" ref="table"
        :data="tableDataf" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="glassId" align="center" :label="$t('searchOrder.glassID')" min-width="120" />
          <el-table-column prop="sequence" align="center" :label="$t('searchOrder.pieceingrid')" min-width="180" />
          <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="150" />
          <el-table-column prop="glassType" align="center" :label="$t('searchOrder.typeglass')" min-width="150"/>
          <el-table-column prop="width" align="center" :label="$t('searchOrder.width')" min-width="150"/>
          <el-table-column prop="height" align="center" :label="$t('searchOrder.height')" min-width="150"/>
          <el-table-column prop="thickness" align="center" :label="$t('searchOrder.thickness')" min-width="150"/>
          <el-table-column prop="temperingLayoutId" align="center" :label="$t('searchOrder.layoutID')" min-width="150"/>
          <el-table-column prop="temperingFeedSequence" align="center" :label="$t('searchOrder.picturesequence')" min-width="150"/>
          <el-table-column
          align="center"
            :label="$t('searchOrder.startstatus')"
            min-width="80"
            prop="state"
          >
          <template #default="scope">  
          <el-tag  
            :type="scope.row.state === 1 ? 'success' : 'danger'"  
          >  
          {{ scope.row.state === 1 ? $t('searchOrder.enable') : $t('searchOrder.disable') }}
          </el-tag>  
        </template> 
          </el-table-column>
          <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 type="text" plain @click="finisha(scope.row)">{{ $t('searchOrder.sureadd') }}</el-button>
            </template>
      <el-table height="100%" ref="table" :data="tableDataf"
        :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129' }">
        <el-table-column prop="glassId" align="center" :label="$t('searchOrder.glassID')" min-width="120" />
        <el-table-column prop="sequence" align="center" :label="$t('searchOrder.pieceingrid')" min-width="180" />
        <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="150" />
        <el-table-column prop="glassType" align="center" :label="$t('searchOrder.typeglass')" min-width="150" />
        <el-table-column prop="width" align="center" :label="$t('searchOrder.width')" min-width="150" />
        <el-table-column prop="height" align="center" :label="$t('searchOrder.height')" min-width="150" />
        <el-table-column prop="thickness" align="center" :label="$t('searchOrder.thickness')" min-width="150" />
        <el-table-column prop="temperingLayoutId" align="center" :label="$t('searchOrder.layoutID')" min-width="150" />
        <el-table-column prop="temperingFeedSequence" align="center" :label="$t('searchOrder.picturesequence')"
          min-width="150" />
        <el-table-column align="center" :label="$t('searchOrder.startstatus')" min-width="80" prop="state">
          <template #default="scope">
            <el-tag :type="scope.row.state === 1 ? 'success' : 'danger'">
              {{ scope.row.state === 1 ? $t('searchOrder.enable') : $t('searchOrder.disable') }}
            </el-tag>
          </template>
        </el-table-column>
        </el-table>
      </div>
        <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 type="text" plain @click="finisha(scope.row)">{{ $t('searchOrder.sureadd') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
  <!-- 理片笼信息 -->
<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-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-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
          align="center"
            :label="$t('searchOrder.startstatus')"
            min-width="80"
            prop="enableState"
          >
          <template #default="scope">  
          <el-tag  
            :type="scope.row.enableState === 1 ? 'success' : 'danger'"  
            @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>
        <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 v-model="dialogFormVisiblea" top="2vh" width="97%" :title="$t('searchOrder.cageinformation')">
    <div style="display: flex;">
      <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 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="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')" min-width="80" prop="enableState">
        <template #default="scope">
          <el-tag :type="scope.row.enableState === 1 ? 'success' : 'danger'" @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 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>
  </el-dialog>
  <!-- 缺片详情 -->
<LackDetailDialog
  v-model="dialogFormVisibleLack"
  :flow-card-id="currentRow.flowCardId"
  @refresh-data="fetchFlowCardId"
/>
  <!-- 多条破损数据 -->
  <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%" @close="iframeUrl=''">
     <iframe 
     :src="iframeUrl" 
     marginwidth="2000px"
     marginheight="2000px"
     width="100%" 
     height="750px" 
     frameborder="0"
     ></iframe>
  <el-dialog v-model="blindb" top="5vh" width="95%" @close="iframeUrl = ''">
    <iframe :src="iframeUrl" marginwidth="2000px" marginheight="2000px" width="100%" height="750px"
      frameborder="0"></iframe>
  </el-dialog>
</template>
<style>
#dt { display:block; float:left;line-height: 20px;margin-left: 100px;}
#dta { display:block; float:left;line-height: 20px;margin-left: 80%;}
#dialog-footer{
#dt {
  display: block;
  float: left;
  line-height: 20px;
  margin-left: 100px;
}

#dta {
  display: block;
  float: left;
  line-height: 20px;
  margin-left: 80%;
}

#dialog-footer {
  text-align: center;
  margin-top: -15px;
}
#message{

#message {
  text-align: center;
  align-items: center;
  color: black;
   width: 200px;
   height: 100px;
   background-color: #337ecc;
   margin-left: 28%;
  width: 200px;
  height: 100px;
  background-color: #337ecc;
  margin-left: 28%;
}
#awatch{

#awatch {
  height: 450px;
}

#occupy {
    height: 100%;
    width: 15%;
    background-color: white;
    margin: 0px 8px 0px 8px;
    border: 1px #EBEEF5 solid;
    text-align: center;
    padding: 5px;
  height: 100%;
  width: 15%;
  background-color: white;
  margin: 0px 8px 0px 8px;
  border: 1px #EBEEF5 solid;
  text-align: center;
  padding: 5px;
}

#biao {
    font-size: 12px;
  font-size: 12px;
}

#zhi {
    font-size: 18px;
    font-weight: bold;
  font-size: 18px;
  font-weight: bold;
}
#demo-pagination-block + #demo-pagination-block {

#demo-pagination-block+#demo-pagination-block {
  margin-top: 10px;
}

#demo-pagination-block #demonstration {
  margin-bottom: 16px;
}

::-webkit-scrollbar {
     width: 0 !important;
   }
   ::-webkit-scrollbar {
     width: 0 !important;height: 0;
   }
   .img-list{
  position:relative;
  width: 0 !important;
}
.data-img{
  @apply float-none ;
  width:100%;
  height:16rem;

::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.img-list {
  position: relative;
}

.data-img {
  @apply float-none;
  width: 100%;
  height: 16rem;
  background: rgba(0, 0, 0, 0);
  opacity: 1;
  border-radius: 0.5rem 0.5rem 0px 0px;
}
.check-img{

.check-img {
  position: absolute;
  width: 3.3125rem;
  height: 2.9375rem;
  top:20rem;
  top: 20rem;
  right: 57rem;
  z-index: 10;
}
.check-imga{

.check-imga {
  position: absolute;
  width: 3.3125rem;
  height: 2.9375rem;
  top:15rem;
  top: 15rem;
  right: 28.5rem;
  z-index: 10;
}

.vertical {
    width: 45px;
    height: 25px;
    background-color: #409EFF;
    top: 485px; /* 初始位置 */
    left: 899px; /* 水平居中 */
    transform: translateX(-50%);
    animation: move-vertical 6s infinite; /* 从上到下动画，持续6秒，无限循环 */
  width: 45px;
  height: 25px;
  background-color: #409EFF;
  top: 485px;
  /* 初始位置 */
  left: 899px;
  /* 水平居中 */
  transform: translateX(-50%);
  animation: move-vertical 6s infinite;
  /* 从上到下动画，持续6秒，无限循环 */
}

@keyframes move-vertical {
    0% {
        top: 485px; /* 起始位置 */
    }
    100% {
        top: calc(100% - 210px); /* 从上到下结束位置 */
    }
  0% {
    top: 485px;
    /* 起始位置 */
  }

  100% {
    top: calc(100% - 210px);
    /* 从上到下结束位置 */
  }
}
.img-zkdlpl{
  margin-left: 40px;
  margin-top: 8px;
  background-image:url('../../assets/zklpl2.png');

.img-zkdlpl {
  margin-left: 20px;
  margin-top: 0px;
  background-image: url('/src/assets/zhongkong.png');
  background-repeat: no-repeat;
  background-attachment: local;
  min-height: 800px;
  width: 500px;
  min-height: 500px;
  width: 800px;
  max-width: 100%;
  background-size: 500px 800px;
  background-size: 800px 500px;
  overflow: hidden;
  position:relative
  position: relative
}
.img-car1{

.img-car1 {
  display: flex;
  background-image:url('../../assets/xiaoche.png');
  background-image: url('/xiaoche.png');
  position: absolute;
  background-repeat: no-repeat;
  background-attachment: local;
@@ -1058,11 +1436,12 @@
  max-width: 100%;
  background-size: 200px 70px;
  overflow: hidden;
  position:relative
  position: relative
}
.img-car4{

.img-car4 {
  display: flex;
  background-image:url('../../assets/xiaoche.png');
  background-image: url('/xiaoche.png');
  position: absolute;
  background-repeat: no-repeat;
  background-attachment: local;
@@ -1071,25 +1450,97 @@
  max-width: 100%;
  background-size: 200px 70px;
  overflow: hidden;
  position:relative
  position: relative
}

.table-container {
  display: flex;
  flex-wrap: nowrap; /* 防止换行 */
  justify-content: space-between; /* 根据需要调整子元素之间的间距 */
  flex-wrap: nowrap;
  /* 防止换行 */
  justify-content: space-between;
  /* 根据需要调整子元素之间的间距 */
}
.table-container > el-card {
  flex: 1; /* 使两个卡片平分可用空间 */
  margin-bottom: 10px; /* 可选，根据需要添加底部间距 */

.table-container>el-card {
  flex: 1;
  /* 使两个卡片平分可用空间 */
  margin-bottom: 10px;
  /* 可选，根据需要添加底部间距 */
}

#dotClass {
  display: flex;
  margin-left: 20px; 
  margin-left: 20px;
  size: 50px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.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高度调整 */
}

.confirm-text {
  color: rgb(242, 121, 8);
  display: block;
  /* 强制换行 */
  text-align: center;
  /* 水平居中 */
  margin-top: 4px;
  /* 与上一行保持间距 */
  font-weight: 500;
  /* 加粗突出 */
}
</style>