中空理片笼、卧式缓存模块、钢化前大理片笼、原片仓储模块新增历史任务页面，大屏显示页面修改、上片接口判断（部分）

wangfei

2025-03-12 da3b8f9268253a8da7c7d6d2217693114b48fe28

 UI-Project/src/views/largescreendisplay/screendisplay.vue

@@ -12,7 +12,6 @@
const blindb = ref(false)
const { t } = useI18n()
let language = ref(localStorage.getItem('lang') || 'zh')
 
let socket = null;
const rawGlassStorageDetailList = ref([])
const orderDTOS = ref([])
@@ -21,7 +20,6 @@
  rawGlassStorageDetailList.value = data.rawGlassStorageDetailList[0]
  orderDTOS.value = data.orderDTOS[0]
};
 
let socket1 = null;
const edgOneTasks = ref([])
const edgTwoTasks = ref([])
@@ -41,9 +39,7 @@
    numBoxes2.value = edgTwoTasks.value.length;
    boxStart2();
  }
  
};
 
let socket2 = null;
const temperingTaskType = ref([])
const temperingGlassInfoList = ref([])
@@ -62,22 +58,18 @@
    boxStart3();
  }
};
 
let socket3 = null;
const bigStorageCageUsage = ref([])
const socketUrl3 = `ws://${WebSocketHost}:${host}/api/cacheVerticalGlass/api/talk/largenScreen`;
const handleMessage3 = (data) => {
  bigStorageCageUsage.value = data.bigStorageCageUsage[0];
};
 
let socket4 = null;
const hollowBigStorageCageUsage = ref([])
const socketUrl4 = `ws://${WebSocketHost}:${host}/api/hollowGlass/api/talk/largenScreen`;
const handleMessage4 = (data) => {
  hollowBigStorageCageUsage.value = data.hollowBigStorageCageUsage[0];
};
 
 
const tableDatad = ref([]);
const patternUsage = async () => {
  try {
@@ -99,12 +91,10 @@
  thickness: '',
  films: ''
})
 
 
// 点击下方弹窗
const handlehistorical = (row) => {
  blindb.value = true;
  // historical()
  patternUsage()
};
// 在组件挂载时设置默认时间范围
onMounted(() => {
@@ -139,7 +129,6 @@
  console.log("关闭了")
  closeWebSocket();
});
 
const numBoxes = ref(5);
const numBoxes2 = ref(5); 
const numBoxes3 = ref(5);
@@ -154,12 +143,10 @@
const maxX4 = 60; // 终点X坐标
const maxY4 = 0; // 终点Y坐标
const delayFrames = 600; // 每个 div 的延迟帧数
 
const boxes = ref([]);
const boxes2 = ref([]);
const boxes3 = ref([]);
const boxes4 = ref([]);
 
// 初始化 div 数据
const boxStart = () => {
  boxes.value = [];
@@ -197,7 +184,6 @@
  });
}
}
 
const boxStart3 = () => {
  boxes3.value = [];
  for (let i = 0; i < numBoxes3.value; i++) {
@@ -216,7 +202,6 @@
  });
}
}
 
const boxStart4 = () => {
  boxes4.value = [];
  for (let i = 0; i < numBoxes4.value; i++) {
@@ -235,15 +220,12 @@
  });
}
}
 
 
const animate = () => {
  boxes.value.forEach((box) => {
    if (box.delay > 0) {
      box.delay--;
      return;
    }
    
    if (box.direction === 'up') {
      box.y -= speed;
      if (box.y <= maxY) {
@@ -258,19 +240,16 @@
        box.direction = 'up';
      }
    }
 
    box.style = {
      ...box.style,
      transform: `translate(${box.x}px, ${box.y}px)`
    };
  });
 
  boxes2.value.forEach((box) => {
    if (box.delay > 0) {
      box.delay--;
      return;
    }
    
    if (box.direction === 'up') {
      box.y -= speed;
      if (box.y <= maxY2) {
@@ -290,13 +269,11 @@
      transform: `translate(${box.x}px, ${box.y}px)`
    };
  });
 
  boxes3.value.forEach((box) => {
    if (box.delay > 0) {
      box.delay--;
      return;
    }
    
    if (box.direction === 'up') {
      box.y -= speed;
      if (box.y <= maxY3) {
@@ -317,13 +294,11 @@
      transform: `translate(${box.x}px, ${box.y}px)`
    };
  });
 
  boxes4.value.forEach((box) => {
    if (box.delay > 0) {
      box.delay--;
      return;
    }
    
    if (box.direction === 'right') {
      box.x += speed;
      if (box.x >= maxX4) {
@@ -337,10 +312,8 @@
      transform: `translate(${box.x}px, ${box.y}px)`
    };
  });
 
  requestAnimationFrame(animate);
};
 
</script>
<template>
  <div style="height: 500px;">
@@ -430,10 +403,10 @@
  <!-- 点击下方弹窗 -->
  <el-dialog v-model="blindb" top="10vh" width="90%">
    <div style="display: flex;">
      <el-input v-model="ptnusage.width" placeholder="请输入宽度" style="width: 270px;margin-left: 10px;" clearable></el-input>
      <el-input v-model="ptnusage.height" placeholder="请输入高度" style="width: 270px;margin-left: 10px;" clearable></el-input>
      <el-input v-model="ptnusage.thickness" placeholder="请输入厚度" style="width: 270px;margin-left: 10px;" clearable></el-input>
      <el-input v-model="ptnusage.films" placeholder="请输入膜系" style="width: 270px;margin-left: 10px;" clearable></el-input>
    <el-input v-model="ptnusage.width" style="margin-left: 10px;margin-bottom: 10px;width: 270px;" clearable :placeholder="$t('screendisplay.pwidth')" />
    <el-input v-model="ptnusage.height" style="margin-left: 10px;margin-bottom: 10px;width: 270px;" clearable :placeholder="$t('screendisplay.pheight')" />
    <el-input v-model="ptnusage.thickness" style="margin-left: 10px;margin-bottom: 10px;width: 270px;" clearable :placeholder="$t('searchOrder.inthickness')" />
    <el-input v-model="ptnusage.films" style="margin-left: 10px;margin-bottom: 10px;width: 270px;" clearable :placeholder="$t('film.infilms')" />
      <!-- <el-select :placeholder="$t('basicData.coatingtypes')" clearable style="width: 270px;margin-left: 10px;"
        v-model="taskStat">
        <el-option v-for="item in optionsa" :key="item.value" :label="item.label" :value="item.value" />
@@ -458,14 +431,14 @@
    </div>
    <el-table ref="table" style="margin-top: 20px;height: 650px;" :data="tableDatad"
      :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129' }">
      <el-table-column prop="patternWidth" align="center" :label="$t('宽')" min-width="80" />
      <el-table-column prop="patternHeight" align="center" :label="$t('高')" min-width="80" />
      <el-table-column prop="patternThickness" align="center" :label="$t('厚度')" min-width="80" />
      <el-table-column prop="filmsId" align="center" :label="$t('膜系')" min-width="120" />
      <el-table-column prop="totalCount" align="center" :label="$t('总数量')" min-width="120" />
      <el-table-column prop="count" align="center" :label="$t('笼内数量')" min-width="120" />
      <el-table-column prop="finishCount" align="center" :label="$t('上片数量')" min-width="120" />
      <el-table-column prop="damageCount" align="center" :label="$t('破损数量')" min-width="120" />
      <el-table-column prop="patternWidth" align="center" :label="$t('basicData.width')" min-width="80" />
      <el-table-column prop="patternHeight" align="center" :label="$t('basicData.height')" min-width="80" />
      <el-table-column prop="patternThickness" align="center" :label="$t('basicData.thickness')" min-width="80" />
      <el-table-column prop="filmsId" align="center" :label="$t('basicData.coatingtypes')" min-width="120" />
      <el-table-column prop="totalCount" align="center" :label="$t('searchOrder.allnumber')" min-width="120" />
      <el-table-column prop="count" align="center" :label="$t('searchOrder.cagesnumber')" min-width="120" />
      <el-table-column prop="finishCount" align="center" :label="$t('screendisplay.upnumber')" min-width="120" />
      <el-table-column prop="damageCount" align="center" :label="$t('hellow.damagenumber')" min-width="120" />
    </el-table>
  </el-dialog>
  <el-dialog v-model="blinda" top="5vh" width="85%">
@@ -507,19 +480,16 @@
  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 {
  text-align: center;
  align-items: center;
@@ -529,11 +499,9 @@
  background-color: #337ecc;
  margin-left: 28%;
}
 
#awatch {
  height: 460px;
}
 
.img-screen {
  max-width: 48%;
  max-height: 100%;
@@ -550,7 +518,6 @@
  height: 0; 
  padding-bottom: 50%;  */
}
 
.clickable-area {
  cursor: pointer;
  /* 指示这是一个可点击的区域 */
@@ -559,11 +526,9 @@
  line-height: 95px;
  /* 如果需要，使文本垂直居中 */
}
 
/* .awatch{
  height: 460px;
  /* max-width: 100%; */
 
.box {
  transition: transform 0.016s linear;
}