Merge branch 'master' of http://10.153.19.25:10101/r/HangZhouMes

ZengTao

2024-04-29 91e4ba507f9806c975a4273154d79f1a43b836c4

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

@@ -1,7 +1,7 @@
<template>
  <div class="glass-rack">
    <div>
      <svg width="300" height="500" xmlns="http://www.w3.org/2000/svg">
    <div >
      <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
        <g stroke="null" id="Layer_1">
          <!-- 使用 v-for 循环渲染数据 -->
          <g v-for="(rack, index) in racks" :key="index">
@@ -11,6 +11,9 @@
              :width="rack.width" 
              :height="rack.height" 
              :fill="rack.fillColor"
              :data-index="index" 
              class="rack-rect" 
              @click="showRectInfo(rack)"
            />
            <rect 
              :x="calculateItemXPosition(rack, rack.item, index)" 
@@ -28,45 +31,79 @@
  </div>
</template>

<script>
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: 190, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 30, width: 20, fillColor: 'yellow', content: 'NG12345678' } },
        { x: 190, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 35, width: 23, fillColor: 'yellow', content: 'NG123456910' } },
        { x: 95, y: 420, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 30, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }
      ]
    };
  },
  methods: {
    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;
      }
    },
    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;
      }
    }
<script setup>
import Swal from 'sweetalert2'

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' } }
];

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>
.glass-rack {
  margin-left: 20px;
  width: 300px;
  width: 500px;
  margin-top: 10px;
}
</style>
.rack-rect:hover {
  cursor: pointer;
}
.custom-popover-class {
  background-color: lightgrey;
  color: black;
  border: 1px solid black;
}
.format-pre pre {
  background: #49483e;
  color: #f7f7f7;
  padding: 10px;
  font-size: 14px;
}
</style>