wuyouming666
2024-06-26 eda704f48beacb5c68372482f73b50af3c4623fb
UI-Project/src/views/Slicecage/slicecage.vue
@@ -1,4 +1,11 @@
<script lang="ts" setup>
// import zhCn from 'element-plus/lib/locale/lang/zh-cn'
// import en from 'element-plus/dist/locale/en.mjs'
// const { locale } = useI18n()
import { useI18n } from 'vue-i18n'
  const { t } = useI18n()
  let language = ref(localStorage.getItem('lang') || 'zh')
import {Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
import {useRouter} from "vue-router"
@@ -18,6 +25,7 @@
const tableDatad = ref([])
const tableDatae = ref([])
const adjustedRects = ref([]);
const adjustedRectsa = ref([]);
// const height = ref([]);
const add = ref(false)
const flowCardId = ref('');
@@ -58,111 +66,112 @@
const cell6=ref(true);
const cell7=ref(true);
const cell8=ref(true);
const selectedRow = ref(null); // 存储选中的行数据
 
const currentPage4 = ref(4)
const pageSize4 = ref(100)
 
  var timer=setInterval(() => {
    // console.log(million.value,million1.value);
    million.value+=1;
    if(million.value-million1.value!==12){
  // var timer=setInterval(() => {
  //   // console.log(million.value,million1.value);
  //   million.value+=1;
  //   if(million.value-million1.value!==12){
      
      if(million.value-million1.value>=2){
        if(carposition1.value==220){
          timers1.value=false;
        }else if(carposition1.value==60){
          timers1.value=true;
        }
        if(timers1.value==true){
          carposition1.value=carposition1.value+16;
        }else{
          carposition1.value=carposition1.value-16;
        }
  //     if(million.value-million1.value>=2){
  //       if(carposition1.value==220){
  //         timers1.value=false;
  //       }else if(carposition1.value==60){
  //         timers1.value=true;
  //       }
  //       if(timers1.value==true){
  //         carposition1.value=carposition1.value+16;
  //       }else{
  //         carposition1.value=carposition1.value-16;
  //       }
 
        
        if(carposition2.value==220){
          timers2.value=false;
        }else if(carposition2.value==60){
          timers2.value=true;
        }
        if(timers2.value==true){
          carposition2.value+=16;
        }else{
          carposition2.value-=16;
        }
      }else{
  //       if(carposition2.value==220){
  //         timers2.value=false;
  //       }else if(carposition2.value==60){
  //         timers2.value=true;
  //       }
  //       if(timers2.value==true){
  //         carposition2.value+=16;
  //       }else{
  //         carposition2.value-=16;
  //       }
  //     }else{
 
      }
    }else{
      million1.value=million.value;
  //     }
  //   }else{
  //     million1.value=million.value;
    
      if(cellshow1.value==true){
        cellshow1.value=false;
      }else{
        cellshow1.value=true;
      }
      if(cellshow2.value==true){
        cellshow2.value=false;
      }else{
        cellshow2.value=true;
      }
    }
  //     if(cellshow1.value==true){
  //       cellshow1.value=false;
  //     }else{
  //       cellshow1.value=true;
  //     }
  //     if(cellshow2.value==true){
  //       cellshow2.value=false;
  //     }else{
  //       cellshow2.value=true;
  //     }
  //   }
    
  }, 1000);
  // }, 1000);
 
  var timer=setInterval(() => {
    // console.log(million3.value,million4.value);
    million3.value+=1;
    if(million3.value-million4.value!==12){
  // var timer=setInterval(() => {
  //   // console.log(million3.value,million4.value);
  //   million3.value+=1;
  //   if(million3.value-million4.value!==12){
      
      if(million3.value-million4.value>=2){
        if(carposition3.value==260){
          timers3.value=false;
        }else if(carposition3.value==60){
          timers3.value=true;
        }
        if(timers3.value==true){
          carposition3.value=carposition3.value+20;
        }else{
          carposition3.value=carposition3.value-20;
        }
  //     if(million3.value-million4.value>=2){
  //       if(carposition3.value==260){
  //         timers3.value=false;
  //       }else if(carposition3.value==60){
  //         timers3.value=true;
  //       }
  //       if(timers3.value==true){
  //         carposition3.value=carposition3.value+20;
  //       }else{
  //         carposition3.value=carposition3.value-20;
  //       }
 
        
        if(carposition4.value==260){
          timers4.value=false;
        }else if(carposition4.value==60){
          timers4.value=true;
        }
        if(timers4.value==true){
          carposition4.value+=20;
        }else{
          carposition4.value-=20;
        }
      }else{
  //       if(carposition4.value==260){
  //         timers4.value=false;
  //       }else if(carposition4.value==60){
  //         timers4.value=true;
  //       }
  //       if(timers4.value==true){
  //         carposition4.value+=20;
  //       }else{
  //         carposition4.value-=20;
  //       }
  //     }else{
 
      }
    }else{
      million4.value=million3.value;
      if(cellshow5.value==true){
        cellshow5.value=false;
  //     }
  //   }else{
  //     million4.value=million3.value;
  //     if(cellshow5.value==true){
  //       cellshow5.value=false;
        
      }else{
        cellshow5.value=true;
  //     }else{
  //       cellshow5.value=true;
        
      }
      if(cellshow3.value==true){
        cellshow3.value=false;
      }else{
        cellshow3.value=true;
      }
      if(cellshow4.value==true){
        cellshow4.value=false;
      }else{
        cellshow4.value=true;
      }
    }
  //     }
  //     if(cellshow3.value==true){
  //       cellshow3.value=false;
  //     }else{
  //       cellshow3.value=true;
  //     }
  //     if(cellshow4.value==true){
  //       cellshow4.value=false;
  //     }else{
  //       cellshow4.value=true;
  //     }
  //   }
    
  }, 1000);
  // }, 1000);
const getTableRow = (row,type) =>{
  switch (type) {
@@ -178,24 +187,35 @@
  }
}
const handleBindRack = (row) => {
  selectedRow.value = row; // 更新选中的行数据
  add.value = true; // 打开绑定架子对话框
};
// 添加
const handleConfirm = async () => {
async function handleConfirm() {
  if (!selectedRow.value) {
    // 处理没有选中行的情况...
    return;
  }
  // 构造你的POST请求数据,包含选中的行数据和表单数据
  const postData = {
    ...selectedRow.value, // 选中行的数据
  };
  try {
    const response = await request.post('/cacheVerticalGlass/bigStorageCageDetails/insertBigStorageCageDetails', {
      flowCardId: flowCardId.value,
      gap: gap.value,
      glassId: glassId.value,
      glassType: glassType.value,
      height: height.value,
      sequence: sequence.value,
      state: state.value,
      temperingFeedSequence: temperingFeedSequence.value,
      temperingLayoutId: temperingLayoutId.value,
      thickness: thickness.value,
      width: width.value,
    });
      'flowCardId': flowCardId.value,
      'gap': gap.value,
      'glassId': glassId.value,
      'glassType': glassType.value,
      'height': height.value,
      'sequence': sequence.value,
      'state': state.value,
      'temperingFeedSequence': temperingFeedSequence.value,
      'temperingLayoutId': temperingLayoutId.value,
      'thickness': thickness.value,
      'width': width.value,
       body: JSON.stringify(postData),
    });
    if (response.code == 200) {
      // 绑定成功,处理逻辑
      ElMessage.success(response.message);
@@ -203,13 +223,43 @@
     tableData.value = response.data;
    } else {
      // 请求失败,显示错误消息
      ElMessage.error(response.msg);
      ElMessage.error(response.message);
    }
  } catch (error) {
    // 处理错误
    console.error(error);
  }
};
  } catch (error) {
    // 处理错误...
    console.error(error);
  }
}
// 添加
// const handleConfirm = async () => {
//   try {
//     const response = await request.post('/cacheVerticalGlass/bigStorageCageDetails/insertBigStorageCageDetails', {
//       'bigStorageCageOutTask.flowCardId': flowCardId.value,
//       'bigStorageCageOutTask.gap': gap.value,
//       'bigStorageCageOutTask.glassId': glassId.value,
//       'bigStorageCageOutTask.glassType': glassType.value,
//       'bigStorageCageOutTask.height': height.value,
//       'bigStorageCageOutTask.sequence': sequence.value,
//       'bigStorageCageOutTask.state': state.value,
//       'bigStorageCageOutTask.temperingFeedSequence': temperingFeedSequence.value,
//       'bigStorageCageOutTask.temperingLayoutId': temperingLayoutId.value,
//       'bigStorageCageOutTask.thickness': thickness.value,
//       'bigStorageCageOutTask.width': width.value,
//     });
//     if (response.code == 200) {
//       // 绑定成功,处理逻辑
//       ElMessage.success(response.message);
//       add.value = false;
//      tableData.value = response.data;
//     } else {
//       // 请求失败,显示错误消息
//       ElMessage.error(response.msg);
//     }
//   } catch (error) {
//     // 处理错误
//     console.error(error);
//   }
// };
// 是否禁用
const toggleEnableState = async (row) => {
  const newState = row.enableState === 1 ? 0 : 1;  
@@ -233,26 +283,24 @@
// ]);  
 // 删除 
 const opena = async(row) => {  
  try {
  try {
    const confirmResult = await ElMessageBox.confirm(  
      '是否删除该条信息?',
      '提示',
      t('searchOrder.deletemessage'),
      t('searchOrder.prompt'),
      {  
        confirmButtonText: '是',
        cancelButtonText: '取消',
        confirmButtonText: t('searchOrder.yes'),
        cancelButtonText: t('searchOrder.cancel'),
        type: 'warning',  
      }
    );
      }
    );
    if (confirmResult === 'confirm') {  
      // 用户点击了“是”,现在调用删除接口  
      const response = await request.post("/cacheVerticalGlass/bigStorageCageDetails/deleteBigStorageCageDetails", {
        menuId: row.id,
    })
      const response = await request.post("/cacheVerticalGlass/bigStorageCageDetails/deleteBigStorageCageDetails",row)
    if (response.code === 200) {
      ElMessage.success(response.message);
      } else {  
        // 删除失败,您可以处理错误或显示错误信息给用户  
      ElMessage.error(response.msg);
      ElMessage.error(response.message);
        // alert('删除失败:' + deleteResponse.message); 
      }  
    }  
@@ -261,6 +309,229 @@
    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',
      }
    );
    if (confirmResult === 'confirm') {
      // const dataToSend = {
      //   ...row,
      //   status: 0
      // };
      // 用户点击了“是”,现在调用删除接口
      const response = await request.post("/cacheVerticalGlass/bigStorageCageDetails/damageBigStorageCageDetails?status="+0, row)
    if (response.code === 200) {
      ElMessage.success(response.message);
      } else {
        // 删除失败,您可以处理错误或显示错误信息给用户
      ElMessage.error(response.message);
        // alert('删除失败:' + deleteResponse.message);
      }
    }
  } catch (error) {
    // 处理可能出现的错误,比如 ElMessageBox 抛出的异常等
    console.error('发生错误:', error);
  }
};
 // 拿走
 const brokec = async(row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
      t('searchOrder.brokeb'),
      t('searchOrder.prompt'),
      {
        confirmButtonText: t('searchOrder.yes'),
        cancelButtonText: t('searchOrder.cancel'),
        type: 'warning',
      }
    );
    if (confirmResult === 'confirm') {
      // const dataToSend = {
      //   ...row,
      //   status: 1
      // };
      // 用户点击了“是”,现在调用删除接口
      const response = await request.post("/cacheVerticalGlass/bigStorageCageDetails/damageBigStorageCageDetails?status="+1, row)
    if (response.code === 200) {
      ElMessage.success(response.message);
      } else {
        // 删除失败,您可以处理错误或显示错误信息给用户
      ElMessage.error(response.message);
        // alert('删除失败:' + deleteResponse.message);
      }
    }
  } catch (error) {
    // 处理可能出现的错误,比如 ElMessageBox 抛出的异常等
    console.error('发生错误:', error);
  }
};
 // 出片
 const outfil = async(row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
      t('searchOrder.outfil'),
      t('searchOrder.prompt'),
      {
        confirmButtonText: t('searchOrder.yes'),
        cancelButtonText: t('searchOrder.cancel'),
        type: 'warning',
      }
    );
    if (confirmResult === 'confirm') {
      // 用户点击了“是”,现在调用删除接口
      const response = await request.post("/cacheVerticalGlass/bigStorageCageDetails/outBigStorageCageDetails", row)
    if (response.code === 200) {
      ElMessage.success(response.message);
      } else {
        // 删除失败,您可以处理错误或显示错误信息给用户
      ElMessage.error(response.message);
        // alert('删除失败:' + deleteResponse.message);
      }
    }
  } catch (error) {
    // 处理可能出现的错误,比如 ElMessageBox 抛出的异常等
    console.error('发生错误:', error);
  }
};
 // 出片队列破损
 const brokea = async(row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
      t('searchOrder.broke'),
      t('searchOrder.prompt'),
      {
        confirmButtonText: t('searchOrder.yes'),
        cancelButtonText: t('searchOrder.cancel'),
        type: 'warning',
      }
    );
    if (confirmResult === 'confirm') {
      // 用户点击了“是”,现在调用删除接口
      // const dataToSend = {
      //   ...row,
      //   status: 0
      // };
      const response = await request.post("/cacheVerticalGlass/temperingGlassInfo/damageTemperingGlassInfo?status="+0, row)
    if (response.code === 200) {
      ElMessage.success(response.message);
      } else {
        // 删除失败,您可以处理错误或显示错误信息给用户
      ElMessage.error(response.message);
        // alert('删除失败:' + deleteResponse.message);
      }
    }
  } catch (error) {
    // 处理可能出现的错误,比如 ElMessageBox 抛出的异常等
    console.error('发生错误:', error);
  }
};
// 出片队列拿走
const brokeb = async(row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
      t('searchOrder.brokeb'),
      t('searchOrder.prompt'),
      {
        confirmButtonText: t('searchOrder.yes'),
        cancelButtonText: t('searchOrder.cancel'),
        type: 'warning',
      }
    );
    if (confirmResult === 'confirm') {
      // 用户点击了“是”,现在调用删除接口
      // const dataToSend = {
      //   ...row,
      //   status: 1
      // };
      const response = await request.post("/cacheVerticalGlass/temperingGlassInfo/damageTemperingGlassInfo?status="+1, row)
    if (response.code === 200) {
      ElMessage.success(response.message);
      } else {
        // 删除失败,您可以处理错误或显示错误信息给用户
      ElMessage.error(response.message);
        // alert('删除失败:' + deleteResponse.message);
      }
    }
  } catch (error) {
    // 处理可能出现的错误,比如 ElMessageBox 抛出的异常等
    console.error('发生错误:', error);
  }
};
// 出片队列删除
const deletea = async(row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
      t('searchOrder.deletemessage'),
      t('searchOrder.prompt'),
      {
        confirmButtonText: t('searchOrder.yes'),
        cancelButtonText: t('searchOrder.cancel'),
        type: 'warning',
      }
    );
    if (confirmResult === 'confirm') {
      // 用户点击了“是”,现在调用删除接口
      const dataToSend = {
        ...row,
        status: 1
      };
      const response = await request.post("/cacheVerticalGlass/temperingGlassInfo/deleteTemperingGlassInfo", dataToSend)
    if (response.code === 200) {
      ElMessage.success(response.message);
      } else {
        // 删除失败,您可以处理错误或显示错误信息给用户
      ElMessage.error(response.message);
        // alert('删除失败:' + deleteResponse.message);
      }
    }
  } catch (error) {
    // 处理可能出现的错误,比如 ElMessageBox 抛出的异常等
    console.error('发生错误:', error);
  }
};
// 完成任务
const finish = async(row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
      t('searchOrder.fin'),
      t('searchOrder.prompt'),
      {
        confirmButtonText: t('searchOrder.yes'),
        cancelButtonText: t('searchOrder.cancel'),
        type: 'warning',
      }
    );
    if (confirmResult === 'confirm') {
      // 用户点击了“是”,现在调用删除接口
      // const dataToSend = {
      //   ...row,
      //   status: 1
      // };
      const response = await request.post("/cacheVerticalGlass/bigStorageCageDetails/finishBigStorageCageDetails", row)
    if (response.code === 200) {
      ElMessage.success(response.message);
      } else {
        // 删除失败,您可以处理错误或显示错误信息给用户
      ElMessage.error(response.message);
        // alert('删除失败:' + deleteResponse.message);
      }
    }
  } catch (error) {
    // 处理可能出现的错误,比如 ElMessageBox 抛出的异常等
    console.error('发生错误:', error);
  }
};
function handleRowClick(row) {
  selectedRow.value = row; // 更新选中的行数据
}
const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheVerticalGlass/api/talk/slicecage`;
// 定义消息处理函数,更新 receivedData 变量
@@ -271,15 +542,20 @@
  tableData.value = data.bigStorageCageInfo[0]
  tableDatab.value = data.temperingGlassInfoList[0]
  tableDatae.value = data.bigStorageCageUsage[0]
  adjustedRects.value = data.bigStorageCageInfo1[0]
  // adjustedRects.value = data.bigStorageCageInfo1[0].map(rect => ({
  //           ...rect, // 复制原始对象的其他属性
  //           height: rect.length *0.5,
  //         }));
  window.localStorage.setItem('length', data.bigStorageCageInfo1[0].length)
  let length = window.localStorage.getItem('length')
  console.log(length);
  // adjustedRects.value = data.bigStorageCageInfo1[0]
  adjustedRects.value = data.bigStorageCageInfo1[0].map(rect => ({
            ...rect,
            // width: rect.remainWidth *0.04,
            top: rect.id *2,
          }));
console.log(data.bigStorageCageInfo1[0]);
adjustedRectsa.value = data.bigStorageCageInfo2[0].map(rect => ({
            ...rect,
            // width: rect.remainWidth *0.04,
            top: rect.id *2,
          }));
  // window.localStorage.setItem('length', data.bigStorageCageInfo1[0].length)
  // let length = window.localStorage.getItem('length')
  
};
// function getRectHeight(length: number) {  
@@ -302,9 +578,9 @@
function getStatusText(enableState: number) {
  switch (enableState) {
    case 0:  
      return '禁用';
      return t('searchOrder.disable');
    case 1:  
      return '启用';
      return t('searchOrder.enable');
  }  
}
function getStatusTypea(ishorizontal: number) {  
@@ -318,9 +594,9 @@
function getStatusTexta(ishorizontal: number) {
  switch (ishorizontal) {
    case 0:  
      return '不接受';
      return t('searchOrder.noaccept');
    case 1:  
      return '接受';
    return t('searchOrder.accept');
  }  
}
function getStatusTypeb(state: number) {  
@@ -334,11 +610,11 @@
function getStatusTextb(state: number) {
  switch (state) {
    case 0:  
      return '出片完成';
      return t('searchOrder.filmcomplete');
    case 1:  
      return '等待中';
      return t('searchOrder.waiting');
    case 2:  
      return '等待中';
    return t('searchOrder.waiting');
  }  
}
onBeforeUnmount(() => {
@@ -348,26 +624,39 @@
</script>
 
<template>
  <div style="height: 700px;">
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="primary" @click="dialogFormVisiblea = true">理片笼信息</el-button>
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="success" @click="dialogFormVisibleb = true">出片队列</el-button>
  <div style="height: 600px;">
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="primary" @click="dialogFormVisiblea = true">{{ $t('searchOrder.cageinformation') }}</el-button>
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="success" @click="dialogFormVisibleb = true">{{ $t('searchOrder.productionqueue') }}</el-button>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 5px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 100px;">
        <el-table height="100%" ref="table" 
        :data="tableDatac" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="bigStorageCageOutTask.glassId" align="center" label="出片玻璃ID" min-width="80" />
          <el-table-column prop="bigStorageCageOutTask.startSlot" align="center" label="起始位置" min-width="120" />
          <el-table-column prop="bigStorageCageOutTask.endSlot" align="center" label="目标位置" min-width="120" />
          <el-table-column prop="bigStorageCageOutTask.trainNumber" align="center" label="车次" min-width="120" />
          <el-table-column prop="bigStorageCageOutTask.serialNumber" align="center" label="序号" min-width="120" />
          <el-table-column prop="bigStorageCageOutTask.taskState" align="center" label="任务状态" min-width="157">
          <template #default="scope">
            <el-tag type="success" >{{ scope.row.bigStorageCageOutTask.taskState==0?"等待进片":"进行中"  }}</el-tag>
          <el-table-column prop="bigStorageCageOutTask.glassId" align="center" :label="$t('searchOrder.outputglassID')" min-width="100" />
          <el-table-column prop="bigStorageCageOutTask.startSlot" align="center" :label="$t('searchOrder.startposition')" min-width="120" />
          <el-table-column prop="bigStorageCageOutTask.endSlot" align="center" :label="$t('searchOrder.targetlocation')" min-width="120" />
          <el-table-column prop="bigStorageCageOutTask.trainNumber" align="center" :label="$t('searchOrder.trips')" min-width="120" />
          <el-table-column prop="bigStorageCageOutTask.serialNumber" align="center" :label="$t('searchOrder.number')" min-width="120" />
          <el-table-column prop="bigStorageCageOutTask.taskState" align="center" :label="$t('searchOrder.taskstatus')" min-width="157">
          <template #default="scope">
            <el-tag type="success" >{{ scope.row.bigStorageCageOutTask.taskState==0? $t('searchOrder.filmenter') : $t('searchOrder.infilm') }}</el-tag>
          </template>
          </el-table-column>
          <el-table-column fixed="right" label="结束任务" align="center" width="150">
          <el-table-column prop="id" align="center" :label="$t('searchOrder.tabid')" min-width="150"/>
          <el-table-column prop="deviceId" align="center" :label="$t('searchOrder.tid')" min-width="100"/>
          <el-table-column prop="slot" align="center" :label="$t('searchOrder.gridnumber')" min-width="100"/>
          <el-table-column prop="glassId" align="center" :label="$t('searchOrder.glassID')" min-width="100"/>
          <el-table-column prop="sequence" align="center" :label="$t('searchOrder.pieceingrid')" min-width="150"/>
          <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="100"/>
          <el-table-column prop="glassType" align="center" :label="$t('searchOrder.typeglass')" min-width="100"/>
          <el-table-column prop="width" align="center" :label="$t('searchOrder.width')" min-width="100"/>
          <el-table-column prop="height" align="center" :label="$t('searchOrder.height')" min-width="100"/>
          <el-table-column prop="thickness" align="center" :label="$t('searchOrder.thickness')" min-width="100"/>
          <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="100"/>
          <el-table-column fixed="right" :label="$t('searchOrder.endtask')" align="center" width="150">
            <template #default="scope">
              <el-button size="mini" type="text" plain @click="handleBindRack(scope.row)">完成任务</el-button>
              <el-button size="mini" type="text" plain @click="finish(scope.row)">{{ $t('searchOrder.completetask') }}</el-button>
            </template>
        </el-table-column>
        </el-table>
@@ -378,18 +667,31 @@
        <el-table height="100%" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableDatad" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="bigStorageCageFeedTask.glassId" align="center" label="进片玻璃ID" min-width="80" />
          <el-table-column prop="bigStorageCageFeedTask.targetSlot" align="center" label="目标位置" min-width="120" />
          <el-table-column prop="bigStorageCageFeedTask.glassId" align="center" :label="$t('searchOrder.intoglassid')" min-width="100" />
          <el-table-column prop="bigStorageCageFeedTask.targetSlot" align="center" :label="$t('searchOrder.targetlocation')" min-width="120" />
          <!-- <el-table-column prop="task_type" align="center" label="任务类型" min-width="120" />没有返回字段 -->
          <el-table-column prop="bigStorageCageFeedTask.taskState" align="center" label="任务状态" min-width="120">
          <el-table-column prop="bigStorageCageFeedTask.taskState" align="center" :label="$t('searchOrder.taskstatus')" min-width="120">
          <template #default="scope">
            <el-tag type="success" >{{ scope.row.bigStorageCageFeedTask.taskState==0?"等待进片":"进行中"  }}</el-tag>
            <el-tag type="success" >{{ scope.row.bigStorageCageFeedTask.taskState==0? $t('searchOrder.filmenter') : $t('searchOrder.infilm') }}</el-tag>
          </template>
          </el-table-column>
          <el-table-column prop="bigStorageCageFeedTask.line" align="center" label="线路" min-width="120" />
          <el-table-column fixed="right" label="结束任务" align="center" width="150">
          <el-table-column prop="bigStorageCageFeedTask.line" align="center" :label="$t('searchOrder.line')" min-width="120" />
          <el-table-column prop="id" align="center" :label="$t('searchOrder.tabid')" min-width="150"/>
          <el-table-column prop="deviceId" align="center" :label="$t('searchOrder.tid')" min-width="100"/>
          <el-table-column prop="slot" align="center" :label="$t('searchOrder.gridnumber')" min-width="100"/>
          <el-table-column prop="glassId" align="center" :label="$t('searchOrder.glassID')" min-width="100"/>
          <el-table-column prop="sequence" align="center" :label="$t('searchOrder.pieceingrid')" min-width="150"/>
          <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="100"/>
          <el-table-column prop="glassType" align="center" :label="$t('searchOrder.typeglass')" min-width="100"/>
          <el-table-column prop="width" align="center" :label="$t('searchOrder.width')" min-width="100"/>
          <el-table-column prop="height" align="center" :label="$t('searchOrder.height')" min-width="100"/>
          <el-table-column prop="thickness" align="center" :label="$t('searchOrder.thickness')" min-width="100"/>
          <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="100"/>
          <el-table-column fixed="right" :label="$t('searchOrder.endtask')" align="center" width="150">
            <template #default="scope">
              <el-button size="mini" type="text" plain @click="handleBindRack(scope.row)">完成任务</el-button>
              <el-button size="mini" type="text" plain @click="finish(scope.row)">{{ $t('searchOrder.completetask') }}</el-button>
            </template>
        </el-table-column>
        </el-table>
@@ -399,11 +701,11 @@
            <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>使用率</span><span>{{ item.percentage }}</span>
                 <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>空闲(格子数)</span><span>{{ item.count }}</span>
                 <span>{{ $t('searchOrder.free') }}</span><span>{{ item.count }}</span>
               </el-col>  
             </div>  
    </div>
@@ -425,33 +727,39 @@
    <div class="img-car4" :style="'z-index:999;left:704px;top:' + carposition4 + 'px;position:absolute;'">
      <div v-show="cellshow4" style="margin-top:10px;width:200px;height:5px;background-color:#409EFF;"></div>
    </div>
    <div v-show="cell1" style="width: 227px;height: 29px;position: absolute;top:55px;left: 465px;">
    <div v-show="cell1" style="width: 227px;position: relative;height: 29px;top:55px;left: 465px;background-color: #911005;">
      <div  
      v-for="(item, index) in adjustedRects"
      :key="index"
      v-for="(rect, index) in adjustedRects"
      :key="rect"
      :style="{
       top: `1px`, width: `227px`,
      backgroundColor: '#409EFF',
      height: `height`+ `px`
       position: 'absolute',
       width: '227px',
       height: '0.8px',
       backgroundColor: '#409EFF',
       left: '0px',
       top: `${rect.top}px`,
       }"  
    >
    </div>
      <!-- <div
        v-for="(item, index) in adjustedRects"
        height: `${rect.height}px`,
        :key="index"
        :style="{
        width: '227px',
        height: '1px',
        backgroundColor: '#409EFF',
        top: '1px'
      }"
      >
      </div> -->
    </div>
   <!-- <div v-show="cell2" style="width: 227px;height: 29px;position: absolute;top:86px;left: 465px;background-color: #409EFF;">
 <div v-show="cell2" style="width: 227px;height: 29px;position: relative;top:86px;left: 465px;background-color: #911005;">
  <div
      v-for="(rect, index) in adjustedRectsa"
      :key="rect"
      :style="{
       position: 'absolute',
       width: '227px',
       height: '0.8px',
       backgroundColor: '#409EFF',
       left: '0px',
       top: `${rect.top}px`,
       }"
    >
    </div>
     <div v-show="cell3" style="width: 227px;height: 29px;position: absolute;top:117px;left: 465px;background-color: #409EFF;">
    </div>
      <!--  <div v-show="cell3" style="width: 227px;height: 29px;position: absolute;top:117px;left: 465px;background-color: #409EFF;">
    </div>
  <div v-show="cell4" style="width: 227px;height: 29px;position: absolute;top:148px;left: 465px;background-color: #409EFF;">
    </div>
@@ -465,24 +773,33 @@
    </div> -->
</div>
  </div>
  <el-dialog v-model="add" top="20vh" width="60%" title="添加理片笼信息" >
  <el-dialog v-model="add" top="10vh" width="65%" :title="$t('searchOrder.addcage')" >
      <div style="margin-top: -20px;margin-bottom: 40px;margin-left: 30px">
          <el-input :placeholder="$t('searchOrder.inputid')" clearable style="width: 200px;">
          </el-input>
          <el-button type="primary" plain style="margin-left: 10px;">{{ $t('searchOrder.search') }}</el-button>
        <!-- <span style="margin-right: 10px">禁用词</span>
        <el-input clearable placeholder="请输入禁用词" size="mini"
          style="margin-right: 50px; width: 200px;" /> -->
        </div>
    <div style="margin-left: -50px;margin-top: 10px;margin-bottom: 10px;">
            <el-form  size="mini" label-width="150px">
      <el-form label-width="150px" label-position="right">
            <el-form  size="mini" label-width="180px">
      <el-form label-width="180px" label-position="right">
        <el-row style="margin-top: -15px;margin-bottom: -2px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
          <el-form-item label="玻璃ID:" :required="true" style="width: 20vw;">
                <el-input placeholder="请输入玻璃ID" v-model="glassId" autocomplete="off" />
          <el-form-item :label="$t('searchOrder.glassIDa')" :required="true" style="width: 24vw;">
                <el-input :placeholder="$t('searchOrder.inglassID')" v-model="glassId" autocomplete="off" />
              </el-form-item>
              </div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
          <el-form-item label="小片在格内的顺序:" :required="true" style="width: 20vw;">
                <el-input placeholder="请输入小片在格内的顺序" v-model="sequence" autocomplete="off" />
          <el-form-item :label="$t('searchOrder.pieceingrida')" :required="true" style="width: 24vw;">
                <el-input :placeholder="$t('searchOrder.inpieceingrid')" v-model="sequence" autocomplete="off" />
              </el-form-item></div>
              </div>
          </el-col>
@@ -491,15 +808,15 @@
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
          <el-form-item label="流程卡号:" :required="true" style="width: 20vw;">
                <el-input placeholder="请输入流程卡号" v-model="flowCardId" autocomplete="off" />
          <el-form-item :label="$t('searchOrder.cardnumbera')" :required="true" style="width: 24vw;">
                <el-input :placeholder="$t('searchOrder.incardnumber')" v-model="flowCardId" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
          <el-form-item label="玻璃类型:" :required="true" style="width: 20vw;">
                <el-input placeholder="请输入玻璃类型" v-model="glassType" autocomplete="off" />
          <el-form-item :label="$t('searchOrder.typeglassa')" :required="true" style="width: 24vw;">
                <el-input :placeholder="$t('searchOrder.intypeglass')" v-model="glassType" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
        </el-row>
@@ -507,15 +824,15 @@
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
          <el-form-item label="宽:" :required="true" style="width: 20vw;">
                <el-input placeholder="请输入宽" v-model="width" autocomplete="off" />
          <el-form-item :label="$t('searchOrder.widtha')" :required="true" style="width: 24vw;">
                <el-input :placeholder="$t('searchOrder.inwidth')" v-model="width" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
          <el-form-item label="高:" :required="true" style="width: 20vw;">
                <el-input placeholder="请输入高" v-model="height" autocomplete="off" />
          <el-form-item :label="$t('searchOrder.heighta')" :required="true" style="width: 24vw;">
                <el-input :placeholder="$t('searchOrder.inheight')" v-model="height" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
        </el-row>
@@ -523,15 +840,15 @@
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
          <el-form-item label="厚度:" :required="true" style="width: 20vw;">
                <el-input placeholder="请输入厚度" v-model="thickness" autocomplete="off" />
          <el-form-item :label="$t('searchOrder.thicknessa')" :required="true" style="width: 24vw;">
                <el-input :placeholder="$t('searchOrder.inthickness')" v-model="thickness" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
          <el-form-item label="钢化版图ID:" :required="true" style="width: 20vw;">
                <el-input placeholder="请输入钢化版图ID" v-model="temperingLayoutId" autocomplete="off" />
          <el-form-item :label="$t('searchOrder.layoutIDa')" :required="true" style="width: 24vw;">
                <el-input :placeholder="$t('searchOrder.inlayoutID')" v-model="temperingLayoutId" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
        </el-row>
@@ -539,15 +856,15 @@
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
          <el-form-item label="钢化版图片序:" :required="true" style="width: 20vw;">
                <el-input placeholder="请输入钢化版图片序" v-model="temperingFeedSequence" autocomplete="off" />
          <el-form-item :label="$t('searchOrder.picturesequencea')" :required="true" style="width: 24vw;">
                <el-input :placeholder="$t('searchOrder.inpicturesequence')" v-model="temperingFeedSequence" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
          <el-form-item label="启用状态:" :required="true" style="width: 20vw;">
                <el-input placeholder="请输入启用状态" v-model="state" autocomplete="off" />
          <el-form-item :label="$t('searchOrder.startstatusa')" :required="true" style="width: 24vw;">
                <el-input :placeholder="$t('searchOrder.instartstatus')" v-model="state" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
        </el-row>
@@ -555,8 +872,15 @@
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
          <el-form-item label="玻璃间隙:" :required="true" style="width: 20vw;">
                <el-input placeholder="请输入玻璃间隙" v-model="gap" autocomplete="off" />
          <el-form-item :label="$t('searchOrder.glassgapsa')" :required="true" style="width: 24vw;">
                <el-input :placeholder="$t('searchOrder.inglassgaps')" v-model="gap" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
          <el-form-item :label="$t('searchOrder.gridnumbera')" :required="true" style="width: 24vw;">
                <el-input :placeholder="$t('searchOrder.grid')" v-model="state" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
        </el-row>
@@ -566,16 +890,17 @@
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="handleConfirm">
          确认
          {{ $t('searchOrder.sure') }}
        </el-button>
        <el-button @click="add = false">取消</el-button>
        <el-button @click="add = false">{{ $t('searchOrder.cancel') }}</el-button>
      </div>
    </template>
  </el-dialog>
<el-dialog v-model="dialogFormVisiblea" top="5vh" width="90%" title="理片笼信息" >
<el-dialog v-model="dialogFormVisiblea" top="5vh" width="97%" :title="$t('searchOrder.cageinformation')">
    <el-table  
          :data="tableData" 
          height="600"
          @row-click="handleRowClick"
          height="500"
          @expand-change="handleExpandChange"  
          row-key="id" 
          default-expand-all
@@ -592,18 +917,18 @@
                  :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="玻璃ID" align="center" min-width="100"/>
          <el-table-column prop="sequence" align="center" label="小片在格内的顺序" min-width="120" />
          <el-table-column prop="flowCardId" align="center" label="流程卡号" min-width="120" />
          <el-table-column prop="glassType" align="center" label="玻璃类型" min-width="100" />
          <el-table-column prop="width" align="center" label="宽" min-width="80" />
          <el-table-column prop="height" align="center" label="高" min-width="80" />
          <el-table-column prop="thickness" align="center" label="厚度" min-width="80" />
          <el-table-column prop="temperingLayoutId" align="center" label="钢化版图ID" min-width="100" />
          <el-table-column prop="temperingFeedSequence" align="center" label="钢化版图片序" min-width="120" />
          <el-table-column prop="glassId" :label="$t('searchOrder.glassID')" align="center" min-width="80"/>
          <el-table-column prop="sequence" align="center" :label="$t('searchOrder.pieceingrid')" min-width="100" />
          <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="120" />
          <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="启用状态"
            :label="$t('searchOrder.startstatus')"
            min-width="80"
            prop="state"
          >
@@ -613,24 +938,25 @@
        </el-tag>  
      </template> 
          </el-table-column>
          <el-table-column prop="gap" align="center" label="玻璃间隙" min-width="80" />
           <el-table-column fixed="right" label="操作" align="center"  min-width="180">
          <el-table-column prop="gap" align="center" :label="$t('searchOrder.glassgaps')" min-width="80" />
           <el-table-column fixed="right" :label="$t('searchOrder.operate')" align="center"  min-width="220">
            <template #default="scope">
              <el-button size="mini" type="text" plain @click="handleEdit(scope.row)">破损</el-button>
              <el-button size="mini" type="text" plain @click="opena(scope.row)">删除</el-button>
              <el-button size="mini" type="text" plain @click="opena(scope.row)">出片</el-button>
              <el-button size="mini" type="text" plain @click="broke(scope.row)">{{ $t('searchOrder.breakage') }}</el-button>
              <el-button size="mini" type="text" plain @click="brokec(scope.row)">{{ $t('searchOrder.takeout') }}</el-button>
              <el-button size="mini" type="text" plain @click="opena(scope.row)">{{ $t('searchOrder.delete') }}</el-button>
              <el-button size="mini" type="text" plain @click="outfil(scope.row)">{{ $t('searchOrder.outfilm') }}</el-button>
            </template>
        </el-table-column>
                </el-table>  
              </div>  
            </template>  
          </el-table-column>  
          <el-table-column prop="id" label="大理片笼表ID" align="center" min-width="100"/>
          <el-table-column prop="deviceId" align="center" label="理片笼号" min-width="150" />
          <el-table-column prop="slot" align="center" label="栅格号" min-width="150" />
          <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="启用状态"
            :label="$t('searchOrder.startstatus')"
            min-width="80"
            prop="enableState"
          >
@@ -639,15 +965,15 @@
            :type="scope.row.enableState === 1 ? 'success' : 'danger'"  
            @click="toggleEnableState(scope.row)"  
          >  
            {{ scope.row.enableState === 1 ? '启用' : '禁用' }}
            {{ scope.row.enableState === 1 ? $t('searchOrder.enable') : $t('searchOrder.disable')}}
          </el-tag>  
        </template> 
          </el-table-column>
          <el-table-column prop="remainWidth" align="center" label="剩余宽度" min-width="120" />
          <el-table-column prop="remainWidth" align="center" :label="$t('searchOrder.remainingwidth')" min-width="120" />
          
       <el-table-column fixed="right" label="操作" align="center">
       <el-table-column fixed="right" :label="$t('searchOrder.operate')" align="center">
            <template #default="scope">
              <el-button size="mini" type="text" plain  @click="handleBindRack(scope.row)">添加</el-button>
              <el-button size="mini" type="text" plain  @click="handleBindRack(scope.row)">{{ $t('searchOrder.add') }}</el-button>
            </template>
        </el-table-column>
        </el-table>
@@ -667,7 +993,7 @@
    />
  </div>
</el-dialog>
<el-dialog v-model="dialogFormVisibleb" top="10vh" width="85%" title="出片队列" >
<el-dialog v-model="dialogFormVisibleb" top="5vh" width="85%" :title="$t('searchOrder.productionqueue')">
  <!-- <div style="display: flex;">
  <p style="margin-top: 3px;">队列状态:</p>
  <p style="margin-top: 3px;">开始</p>
@@ -676,16 +1002,16 @@
  </div> -->
    <el-table  ref="table" style="margin-top: 20px;height: 500px;"
        :data="tableDatab" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="id" fixed align="center" label="钢化小片信息表id" min-width="150"/>
          <el-table-column prop="flowcardId" fixed align="center" label="流程卡" min-width="120" />
          <el-table-column prop="glassType" align="center" label="流程卡玻璃类型" min-width="150" />
          <el-table-column prop="width" align="center" label="宽" min-width="80" />
          <el-table-column prop="height" align="center" label="高" min-width="80" />
          <el-table-column prop="thickness" align="center" label="厚度" min-width="80" />
          <el-table-column prop="filmsid" align="center" label="膜系" min-width="80" />
          <el-table-column prop="id" fixed align="center" :label="$t('searchOrder.sheetID')" min-width="150"/>
          <el-table-column prop="flowcardId" fixed align="center" :label="$t('searchOrder.processcards')" min-width="120" />
          <el-table-column prop="glassType" align="center" :label="$t('searchOrder.processcardtype')" min-width="150" />
          <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="filmsid" align="center" :label="$t('searchOrder.coatingtypes')" min-width="80" />
          <el-table-column
            align="center"
            label="钢化是否接受横放"
            :label="$t('searchOrder.acceptshorizontal')"
            min-width="150"
            prop="ishorizontal"
          >
@@ -695,14 +1021,14 @@
        </el-tag>  
      </template> 
          </el-table-column>
          <el-table-column prop="temperingLayoutId" align="center" label="钢化版图id" min-width="120" />
          <el-table-column prop="temperingFeedSequence" align="center" label="钢化版图片序" min-width="120" />
          <el-table-column prop="xCoordinate" align="center" label="x坐标" min-width="80" />
          <el-table-column prop="yCoordinate" align="center" label="y坐标" min-width="80" />
          <el-table-column prop="angle" align="center" label="旋转角度(逆时针)" min-width="150" />
          <el-table-column prop="temperingLayoutId" align="center" :label="$t('searchOrder.layoutID')" min-width="120" />
          <el-table-column prop="temperingFeedSequence" align="center" :label="$t('searchOrder.picturesequence')" min-width="120" />
          <el-table-column prop="xCoordinate" align="center" :label="$t('searchOrder.xcoordinates')" min-width="80" />
          <el-table-column prop="yCoordinate" align="center" :label="$t('searchOrder.ycoordinates')" min-width="80" />
          <el-table-column prop="angle" align="center" :label="$t('searchOrder.rotationangle')" min-width="150" />
          <el-table-column
            align="center"
            label="状态"
            :label="$t('searchOrder.state')"
            min-width="80"
            prop="state"
          >
@@ -712,10 +1038,11 @@
        </el-tag>  
      </template> 
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="150">
          <el-table-column fixed="right" :label="$t('searchOrder.operate')" align="center" width="150">
            <template #default="scope">
              <el-button size="mini" type="text" plain @click="handleBindRack(scope.row)">破损</el-button>
              <el-button size="mini" type="text" plain @click="handleBindRacka(scope.row)">删除</el-button>
              <el-button size="mini" type="text" plain @click="brokea(scope.row)">{{ $t('searchOrder.breakage') }}</el-button>
              <el-button size="mini" type="text" plain @click="brokeb(scope.row)">{{ $t('searchOrder.takeout') }}</el-button>
              <el-button size="mini" type="text" plain @click="deletea(scope.row)">{{ $t('searchOrder.delete') }}</el-button>
            </template>
        </el-table-column>
        </el-table>
@@ -822,7 +1149,7 @@
}
 
.img-dlpl{
  margin-left: 200px;
  margin-left: 80px;
  background-image:url('../../assets/dlpl.png');
  background-repeat: no-repeat;
    background-attachment: local;