ZengTao
2025-11-05 aafee825656183f3d5c56ddefa64a8b1e757c959
UI-Project/src/views/Slicecage/slicecage.vue
@@ -51,10 +51,14 @@
const adjustedRectsa = ref([]);
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 showAlert = ref(false)
const alertMessage = ref('')
@@ -81,6 +85,8 @@
const cell2=ref(true);
const cell3=ref(true);
const cell4=ref(true);
const cell5=ref(true);
const cell6=ref(true);
const canEdit = ref(true);
const selectedRow = ref(null);
const temperingtotal = ref(0);
@@ -916,11 +922,25 @@
    top: 53/55,
  }));
subRectsCountsc.value = data.bigStorageCageInfos[0][4].map(rect => rect.count);
adjustedRectsd.value = data.bigStorageCageInfos[0][5].map((rect, index) => ({
    id: index + 1,
    height: 20/55,
    top: 53/55,
  }));
subRectsCountsd.value = data.bigStorageCageInfos[0][5].map(rect => rect.count);
adjustedRectse.value = data.bigStorageCageInfos[0][6].map((rect, index) => ({
    id: index + 1,
    height: 20/55,
    top: 53/55,
  }));
subRectsCountse.value = data.bigStorageCageInfos[0][6].map(rect => rect.count);
  }else{
    adjustedRects.value = '',
    adjustedRectsa.value = '',
    adjustedRectsb.value = '',
    adjustedRectsc.value = ''
    adjustedRectsc.value = '',
    adjustedRectsd.value = '',
    adjustedRectse.value = ''
  }
};
// 计算每个大矩形的样式
@@ -1039,8 +1059,74 @@
  }
  return subRects;
};
// 计算每个大矩形的样式
const rectStyled = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  right: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
});
// 计算每个小矩形的样式和数量
const getSubRectsd = (rectIndex) => {
  const count = subRectsCountsd.value[rectIndex];
  const subRects = [];
  for (let i = 0; i < count; i++) {
    subRects.push({});
  }
  return subRects;
};
// 计算每个大矩形的样式
const rectStylee = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  right: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
});
// 计算每个小矩形的样式和数量
const getSubRectse = (rectIndex) => {
  const count = subRectsCountse.value[rectIndex];
  const subRects = [];
  for (let i = 0; i < count; i++) {
    subRects.push({});
  }
  return subRects;
};
// 计算每个小矩形的样式
const subRectStylec = (rectIndex, subIndex) => {
  const width = '18px';
  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%',
    marginRight,
    top: '0px',
    backgroundColor: '#911005',
    right,
  };
};
// 计算每个小矩形的样式
const subRectStyled = (rectIndex, subIndex) => {
  const width = '18px';
  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%',
    marginRight,
    top: '0px',
    backgroundColor: '#911005',
    right,
  };
};
// 计算每个小矩形的样式
const subRectStylee = (rectIndex, subIndex) => {
  const width = '18px';
  const marginRight = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
@@ -1258,7 +1344,7 @@
    ></div>
    </div>
    </div>
 <div v-show="cell2" style="width: 170px;height: 53px;position: relative;top:72px;left: 445px;">
 <div v-show="cell2" style="width: 170px;height: 53px;position: relative;top:70px;left: 445px;">
    <div v-for="(rect, rectIndex) in adjustedRectsa" :key="rect.id" :style="rectStylea(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRectsa(rectIndex)"
@@ -1267,7 +1353,7 @@
    ></div>
    </div>
    </div>
  <div v-show="cell3" style="width: 170px;height: 53px;position: relative;top:81px;left: 445px;">
  <div v-show="cell3" style="width: 170px;height: 53px;position: relative;top:76px;left: 445px;">
    <div v-for="(rect, rectIndex) in adjustedRectsb" :key="rect.id" :style="rectStyleb(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRectsb(rectIndex)"
@@ -1276,12 +1362,30 @@
    ></div>
    </div>
    </div>
  <div v-show="cell4" style="width: 170px;height: 53px;position: relative;top:89px;left: 445px;">
  <div v-show="cell4" style="width: 170px;height: 53px;position: relative;top:84px;left: 445px;">
    <div v-for="(rect, rectIndex) in adjustedRectsc" :key="rect.id" :style="rectStylec(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRectsc(rectIndex)"
      :key="subIndex"
      :style="subRectStylec(rectIndex, subIndex)"
    ></div>
    </div>
    </div>
  <div v-show="cell5" style="width: 170px;height: 53px;position: relative;top:-16px;left: 45px;">
    <div v-for="(rect, rectIndex) in adjustedRectsd" :key="rect.id" :style="rectStyled(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRectsd(rectIndex)"
      :key="subIndex"
      :style="subRectStyled(rectIndex, subIndex)"
    ></div>
    </div>
    </div>
  <div v-show="cell6" style="width: 170px;height: 53px;position: relative;top:-6px;left: 45px;">
    <div v-for="(rect, rectIndex) in adjustedRectse" :key="rect.id" :style="rectStylee(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRectse(rectIndex)"
      :key="subIndex"
      :style="subRectStylee(rectIndex, subIndex)"
    ></div>
    </div>
    </div>
@@ -1809,7 +1913,7 @@
.img-dlpl{
  margin-left: 20px;
  margin-top: 0px;
  background-image:url('/ganghuaqian.png');
  background-image:url('/src/assets/ganghuaqian.png');
  background-repeat: no-repeat;
  background-attachment: local;
  min-height: 380px;