ZengTao
2025-03-07 df13b23a2fa3519e6f796ed946d87412a6a5f7ca
UI-Project/src/views/Slicecage/slicecage.vue
@@ -35,6 +35,7 @@
const tableDatae = ref([])
const tableDatax = ref([])
const tableDatas = ref([])
const tableDatass = ref([])
const tableDatalack = ref([])
const tableDataspecify = ref([])
const tableDatacagedetails = ref([])
@@ -779,6 +780,11 @@
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheVerticalGlass/api/talk/slicecage`;
const handleMessage = (data) => {
  if(data.bigStorageSummary!=null){
    tableDatass.value = data.bigStorageSummary[0]
  }else{
    tableDatass.value = ''
      }
  if (data.inkageEntity != null) {
    inkageEntity.value = data.inkageEntity[0] == true ? 'green' : '#911005';
  }
@@ -879,7 +885,7 @@
const rectStyle = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  left: '0px',
  right: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
});
@@ -895,24 +901,24 @@
// 计算每个小矩形的样式
const subRectStyle = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  const marginRight = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
  const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`;
  return {
    position: 'absolute',
    width,
    height: '100%',
    marginLeft,
    marginRight,
    top: '0px',
    backgroundColor: '#911005',
    left,
    right,
  };
};
// 计算每个大矩形的样式
const rectStylea = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  left: '0px',
  right: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
});
@@ -928,24 +934,24 @@
// 计算每个小矩形的样式
const subRectStylea = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  const marginRight = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
  const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`;
  return {
    position: 'absolute',
    width,
    height: '100%',
    marginLeft,
    marginRight,
    top: '0px',
    backgroundColor: '#911005',
    left,
    right,
  };
};
// 计算每个大矩形的样式
const rectStyleb = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  left: '0px',
  right: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
});
@@ -961,24 +967,24 @@
// 计算每个小矩形的样式
const subRectStyleb = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  const marginRight = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
  const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`;
  return {
    position: 'absolute',
    width,
    height: '100%',
    marginLeft,
    marginRight,
    top: '0px',
    backgroundColor: '#911005',
    left,
    right,
  };
};
// 计算每个大矩形的样式
const rectStylec = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  left: '0px',
  right: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
});
@@ -994,17 +1000,17 @@
// 计算每个小矩形的样式
const subRectStylec = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  const marginRight = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
  const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`;
  return {
    position: 'absolute',
    width,
    height: '100%',
    marginLeft,
    marginRight,
    top: '0px',
    backgroundColor: '#911005',
    left,
    right,
  };
};
onMounted(() => {
@@ -1168,7 +1174,7 @@
    </div>
<!-- // 父级框 -->
<div class="img-dlpl" >
    <div class="img-car1" :style="'z-index:999;left:375px;top:' + 350*carPosition[0] + 'px;position:absolute;'">
    <div class="img-car1" :style="'z-index:999;left:290px;top:' + 350*carPosition[0] + 'px;position:absolute;'">
      <div  
      v-for="(rect, index) in adjusta"  
      :key="rect.id"  
@@ -1182,7 +1188,7 @@
    >
    </div>
    </div>
    <div class="img-car4" :style="'z-index:999;left:770px;top:' + 350*carPosition[1] + 'px;position:absolute;'">
    <div class="img-car4" :style="'z-index:999;left:735px;top:' + 350*carPosition[1] + 'px;position:absolute;'">
      <div  
      v-for="(rect, index) in adjust"  
      :key="rect.id"  
@@ -1197,7 +1203,7 @@
    </div>
    </div>
    <div style="position: relative;">
    <div v-show="cell1" style="width: 170px;height: 53px;position: relative;top:63px;left: 585px;">
    <div v-show="cell1" style="width: 170px;height: 53px;position: relative;top:63px;left: 525px;">
      <div v-for="(rect, rectIndex) in adjustedRects" :key="rect.id" :style="rectStyle(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRects(rectIndex)"
@@ -1206,7 +1212,7 @@
    ></div>
    </div>
    </div>
 <div v-show="cell2" style="width: 170px;height: 53px;position: relative;top:67px;left: 585px;">
 <div v-show="cell2" style="width: 170px;height: 53px;position: relative;top:67px;left: 525px;">
    <div v-for="(rect, rectIndex) in adjustedRectsa" :key="rect.id" :style="rectStylea(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRectsa(rectIndex)"
@@ -1215,7 +1221,7 @@
    ></div>
    </div>
    </div>
  <div v-show="cell3" style="width: 170px;height: 53px;position: relative;top:72px;left: 585px;">
  <div v-show="cell3" style="width: 170px;height: 53px;position: relative;top:72px;left: 525px;">
    <div v-for="(rect, rectIndex) in adjustedRectsb" :key="rect.id" :style="rectStyleb(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRectsb(rectIndex)"
@@ -1224,7 +1230,7 @@
    ></div>
    </div>
    </div>
  <div v-show="cell4" style="width: 170px;height: 53px;position: relative;top:77px;left: 585px;">
  <div v-show="cell4" style="width: 170px;height: 53px;position: relative;top:77px;left: 525px;">
    <div v-for="(rect, rectIndex) in adjustedRectsc" :key="rect.id" :style="rectStylec(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRectsc(rectIndex)"
@@ -1235,6 +1241,21 @@
    </div>
</div>
</div>
<el-card style="flex: 1;margin-left: 1220px;margin-top: -510px;" v-loading="loading">
      <div style="width: 100%; height: calc(100% - 35px); overflow-y: auto;max-height: 420px;">
       <el-table height="420px" ref="table" border
       :data="tableDatass" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
         <el-table-column prop="engineerId" align="center" :label="$t('Mounting.project')" min-width="140" />
         <el-table-column prop="countTemp" align="center" :label="$t('searchOrder.totalfurnaces')" min-width="120" />
         <el-table-column prop="countGlass" align="center" :label="$t('searchOrder.cagesnumber')" min-width="120" />
         <el-table-column prop="area" align="center" :label="$t('large.are')" min-width="120" />
         <el-table-column prop="fullTemp" align="center" :label="$t('searchOrder.fullfurnaces')" min-width="120" />
         <el-table-column prop="countSlot" align="center" :label="$t('searchOrder.slotnumber')" min-width="120" />
         <el-table-column prop="percent" align="center" :label="$t('searchOrder.progress')" min-width="120" />
       </el-table>
       </div>
    </el-card>
  </div>
  <el-dialog v-model="add" top="10vh" width="70%" :title="$t('searchOrder.addcage')" >
    <div style="margin-bottom: 20px">