展会

wang

2024-04-24 e324410d4617e4b5c4b62ff7a0a69be2ba96d69d

展会

 UI-Project/src/views/PurchaseReturn/purchaseReturn.vue

@@ -64,27 +64,59 @@
<div v-if="dialogFormVisible" >
    <el-card style="margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading">
      <div style="display: flex;margin-bottom: 20px;">
      <div style="margin-left: 400px;font-size: 20px;">工程号：P20240305001 </div>
      <div style="margin-left: 450px;font-size: 20px;">工程号：P20240305001 </div>
      <div style="margin-left: 150px;font-size: 20px;">版图编号：1</div>
    </div>
    <div>
            <div id="boxa" style="width: 400px;height: 120px;margin-left: 260px;">
            <div id="boxa" style="width: 200px;height: 300px;margin-left: 70px;">
              <div style="margin-top: 35px;"> NG202405060798A01-1</div> 
            <div> 500×1500</div>
            <div> 500×1000</div>
          </div>
            <div id="boxa" style="width: 400px;height: 120px;">
            <div id="boxa" style="width: 200px;height: 300px;">
              <div style="margin-top: 35px;"> NG202405060798A01-1</div> 
            <div> 500×1500</div>
            <div> 500×1000</div>
          </div>
          <div id="boxa" style="width: 200px;height: 300px;">
              <div style="margin-top: 35px;"> NG202405060798A01-1</div> 
            <div> 500×1000</div>
          </div>
          <div id="boxa" style="width: 200px;height: 300px;">
              <div style="margin-top: 35px;"> NG202405060798A01-1</div> 
            <div> 500×1000</div>
          </div>
          <div id="boxa" style="width: 200px;height: 300px;">
              <div style="margin-top: 35px;"> NG202405060798A01-1</div> 
            <div> 500×1000</div>
          </div>
          <div id="boxa" style="width: 200px;height: 300px;">
              <div style="margin-top: 35px;"> NG202405060798A01-1</div> 
            <div> 500×1000</div>
          </div>
    </div>
    <div style="margin-top: 20px;">
            <div id="boxa" style="width: 400px;height: 120px;margin-left: 260px;">
            <div id="boxa" style="width: 200px;height: 300px;margin-left: 70px;">
              <div style="margin-top: 35px;"> NG202405060798A01-1</div> 
            <div> 500×1500</div>
            <div> 500×1000</div>
          </div>
            <div id="boxb" style="width: 400px;height: 120px;">
          <div id="boxa" style="width: 200px;height: 300px;">
              <div style="margin-top: 35px;"> NG202405060798A01-1</div> 
            <div> 500×1500</div>
            <div> 500×1000</div>
          </div>
          <div id="boxa" style="width: 200px;height: 300px;">
              <div style="margin-top: 35px;"> NG202405060798A01-1</div> 
            <div> 500×1000</div>
          </div>
          <div id="boxa" style="width: 200px;height: 300px;">
              <div style="margin-top: 35px;"> NG202405060798A01-1</div> 
            <div> 500×1000</div>
          </div>
          <div id="boxa" style="width: 200px;height: 300px;">
              <div style="margin-top: 35px;"> NG202405060798A01-1</div> 
            <div> 500×1000</div>
          </div>
            <div id="boxb" style="width: 200px;height: 300px;">
              <div style="margin-top: 35px;"> NG202405060798A01-1</div> 
            <div> 500×1000</div>
          </div>
    </div>
    </el-card>

 UI-Project/src/views/Slicecage/slicecage.vue

@@ -11,7 +11,7 @@
const dialogFormVisiblea = ref(false)
const dialogFormVisibleb = ref(false)

const carposition1 = ref(40);
const carposition1 = ref(60);
const carposition2 = ref(200);
const timers1 =ref(true);
const timers2 =ref(true);
@@ -79,25 +79,25 @@
      if(million.value-million1.value>=2){
        if(carposition1.value==200){
          timers1.value=false;
        }else if(carposition1.value==40){
        }else if(carposition1.value==60){
          timers1.value=true;
        }
        if(timers1.value==true){
          carposition1.value=carposition1.value+16;
          carposition1.value=carposition1.value+14;
        }else{
          carposition1.value=carposition1.value-16;
          carposition1.value=carposition1.value-14;
        }

        
        if(carposition2.value==200){
          timers2.value=false;
        }else if(carposition2.value==40){
        }else if(carposition2.value==60){
          timers2.value=true;
        }
        if(timers2.value==true){
          carposition2.value+=16;
          carposition2.value+=14;
        }else{
          carposition2.value-=16;
          carposition2.value-=14;
        }
      }else{

@@ -322,13 +322,13 @@
<!-- // 父级框 -->
<div class="img-dlpl" >
    <div class="img-car1" :style="'z-index:999;left:247px;top:' + carposition1 + 'px;position:absolute;'">
      <div v-show="cellshow1" style="margin-top:10px;width:200px;height:5px;background-color:red;"></div>
      <div v-show="cellshow1" style="margin-top:10px;width:200px;height:5px;background-color:#409EFF;"></div>
    </div>
    
    <div class="img-car2" :style="'z-index:999;left:704px;top:' + carposition2 + 'px;position:absolute;'">
      <div v-show="cellshow2" style="margin-top:10px;width:200px;height:5px;background-color:red;"></div>
      <div v-show="cellshow2" style="margin-top:10px;width:200px;height:5px;background-color:#409EFF;"></div>
    </div>
    <div v-show="cellshow" style="width: 200px;height: 5px;position: absolute;top:60px;left: 490px;background-color: red;">
    <div v-show="cellshow" style="width: 200px;height: 5px;position: absolute;top:70px;left: 480px;background-color: #409EFF;">

    </div>
</div>
@@ -621,7 +621,7 @@
    position:relative
}
.img-car1{
  background-image:url('../../assets/lpl.jpg');
  background-image:url('../../assets/lp.png');
  position: absolute;
  background-repeat: no-repeat;
    background-attachment: local;
@@ -633,7 +633,7 @@
    position:relative
}
.img-car2{
  background-image:url('../../assets/lpla.jpg');
  background-image:url('../../assets/lpa.png');
  position: absolute;
  background-repeat: no-repeat;
    background-attachment: local;

 UI-Project/src/views/UnLoadGlass/Landingindication.vue

@@ -11,9 +11,9 @@
              :width="rack.width" 
              :height="rack.height" 
              :fill="rack.fillColor"
          :data-index="index" 
          class="rack-rect" 
          @click="showRectInfo(rack)"
              :data-index="index" 
              class="rack-rect" 
              @click="showRectInfo(rack)"
            />
            <rect 
              :x="calculateItemXPosition(rack, rack.item, index)" 
@@ -31,66 +31,59 @@
  </div>
</template>

<script>
<script setup>
import Swal from 'sweetalert2'
export default {
  data() {
    return {
      racks: [
        { x: 50, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG123456' } },
        { x: 50, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 20, width: 10, fillColor: 'yellow', content: 'NG1234567' } },
        { x: 280, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 30, width: 20, fillColor: 'yellow', content: 'NG12345678' } },
        { x: 280, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 35, width: 23, fillColor: 'yellow', content: 'NG123456910' } },
        { x: 140, y: 420, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 30, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }
      ]
    };
  },
  methods: {
    // 计算内部物品的 x 坐标位置
    calculateItemXPosition(rack, item, index) {
      if (index === 0 || index === 1) {  // 如果是第一或第二个物品
        return rack.x;  // 返回左边界 x 坐标
      } else if (index === 2 || index === 3) {  // 如果是第三或第四个物品
        return rack.x + rack.width - item.width;  // 返回右边界 x 坐标
      } else {
        return rack.x + (rack.width - item.width) / 2;  // 返回水平居中的 x 坐标
      }
    },
    // 计算内部物品的 y 坐标位置
    calculateItemYPosition(rack, item, index) {
      if (index === 0 || index === 1) {  // 如果是第一或第二个物品
        return rack.y + (rack.height - item.height) / 2;  // 返回垂直居中的 y 坐标
      } else if (index === 2 || index === 3) {  // 如果是第三或第四个物品
        return rack.y + (rack.height - item.height) / 2;  // 返回垂直居中的 y 坐标
      } else {
        return rack.y + rack.height - item.height;  // 返回底部对齐的 y 坐标
      }
    },
    showCustomAlert(content) {
      var str="架号   :      111\n" +
        "长     :      111\n" +
        "宽     :      111\n" +
        "厚     :      111\n"+
        "玻璃ID :      111\n"+
        "膜系   :      111\n";

Swal.fire({
  title: '玻璃信息',
  html: '<pre>' + str + '</pre>',
  customClass: {
    popup: 'format-pre'
  }
});
const racks = [
  { x: 50, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG123456' } },
  { x: 50, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 20, width: 10, fillColor: 'yellow', content: 'NG1234567' } },
  { x: 280, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 30, width: 20, fillColor: 'yellow', content: 'NG12345678' } },
  { x: 280, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 35, width: 23, fillColor: 'yellow', content: 'NG123456910' } },
  { x: 140, y: 420, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 30, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }
];

  },
    showRectInfo( rectInfo) {
  const content = rectInfo.item.content;
  this.$nextTick(() => {
    this.showCustomAlert(content);
  });
},
const calculateItemXPosition = (rack, item, index) => {
  if (index === 0 || index === 1) {
    return rack.x;
  } else if (index === 2 || index === 3) {
    return rack.x + rack.width - item.width;
  } else {
    return rack.x + (rack.width - item.width) / 2;
  }
};

const calculateItemYPosition = (rack, item, index) => {
  if (index === 0 || index === 1) {
    return rack.y + (rack.height - item.height) / 2;
  } else if (index === 2 || index === 3) {
    return rack.y + (rack.height - item.height) / 2;
  } else {
    return rack.y + rack.height - item.height;
  }
};

const showCustomAlert = (content) => {
  var str="架号   :      111\n" +
    "长     :      111\n" +
    "宽     :      111\n" +
    "厚     :      111\n"+
    "玻璃ID :      111\n"+
    "膜系   :      111\n";

  Swal.fire({
    title: '玻璃信息',
    html: '<pre>' + str + '</pre>',
    customClass: {
      popup: 'format-pre'
    }
  });
};

const showRectInfo = (rectInfo) => {
  const content = rectInfo.item.content;
  showCustomAlert(content);
};

</script>

<style scoped>
@@ -98,7 +91,6 @@
  margin-left: 20px;
  width: 500px;
  margin-top: 10px;
  /* background-color: antiquewhite; */
}
.rack-rect:hover {
  cursor: pointer;
@@ -114,5 +106,4 @@
  padding: 10px;
  font-size: 14px;
}

</style>
</style>

 UI-Project/src/views/Visualization/screenone.vue

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

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