更新下片逻辑

wuyouming666

2024-04-01 f42bb93047f0aba68f358968499e1174e67a715a

 UI-Project/src/views/mm/identify/identify.vue

@@ -1,67 +1,107 @@
<template>
  <el-card style="margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading">
  <el-card style="margin-left: 10px; margin-top: 10px; margin-right: 10px;" v-loading="loading">
    <div style="display: flex;">
      <div style="margin-left: 400px;font-size: 20px;">工程号：P20240305001 </div>
      <div style="margin-left: 150px;font-size: 20px;">版图编号：1</div>
      <div style="margin-left: 400px; font-size: 20px;">工程号：P20240305001 </div>
      <div style="margin-left: 150px; font-size: 20px;">版图编号：1</div>
    </div>
      <svg width="100%" height="650" xmlns="http://www.w3.org/2000/svg">
        <g stroke="null" id="Layer_1">
          <title stroke="null">Layer 1</title>
          <image x="100" y="50" width="100" xlink:href="${pageContext.request.contextPath}/static/images/log2.png"/>
          <!-- <text stroke="#000" xml:space="preserve" font-family="'Catamaran'" font-size="25" class="font1" y="105" x="740">1号线玻璃落架指导</text> -->

          <!-- 使用 v-for 循环渲染数据 -->
          <g v-for="(rack, index) in racks" :key="index">
            <rect :x="rack.x" :y="rack.y" :width="rack.width" :height="rack.height" :fill="rack.fillColor"/>
            <rect 
              :x="calculateItemXPosition(rack, rack.item, index)" 
              :y="calculateItemYPosition(rack, rack.item, index)" 
              :width="rack.item.width" 
              :height="rack.item.height" 
              :fill="rack.item.fillColor"
            />
            <!-- <text :x="rack.x" :y="rack.y-10"  text-anchor="middle">{{ index + 1 }}号工位</text> -->
            <!-- <text :x="rack.x" :y="rack.y-30"  text-anchor="middle">{{rack.item.content}}</text> -->
          </g>

          <!-- 其他元素 -->
          <!-- <text id="glass_size" font-size="30px" font-weight="bold" x="100" y="600" text-anchor="middle" alignment-baseline="middle"></text> -->
          <!-- <text id="glass_pos" font-size="30px" font-weight="bold" x="100" y="600" text-anchor="middle" alignment-baseline="middle"></text> -->
    <svg width="100%" height="650" xmlns="http://www.w3.org/2000/svg">
      <g v-for="(rack, index) in racks" :key="index">
        <rect 
          :x="rack.x" 
          :y="rack.y" 
          :width="rack.width" 
          :height="rack.height" 
          :fill="rack.fillColor" 
          :data-index="index" 
          class="rack-rect" 
          @click="showRectInfo(rack)"
        />
        <g v-for="(item, itemIndex) in rack.items" :key="itemIndex">
          <rect 
            :x="calculateItemXPosition(rack, item, itemIndex)" 
            :y="calculateItemYPosition(rack, item, itemIndex)" 
            :width="item.width" 
            :height="item.height" 
            :fill="item.fillColor"
          />
        </g>
      </svg>
      </g>
    </svg>
  </el-card>
</template>

<script>
import Swal from 'sweetalert2'
export default {
  data() {
    return {
      loading: false,
      racks: [
        { x: 70, y: 126, width: 600, height: 240, fillColor: '#79bbff', item: { width: 40, height: 30, top:5, fillColor: '#911005' ,content:'NG123456'} },
        { x: 675, y: 126, width: 600, height: 240, fillColor: '#a0cfff', item: { width: 40, height: 30, fillColor: 'yellow' ,content:'NG1234567'} },
        { x: 70, y: 370, width: 1100, height: 260, fillColor: '#529b2e', item: { width: 40, height: 30, fillColor: 'yellow' ,content:'NG12345678'} },
        { x: 1175, y: 370, width: 200, height: 300, fillColor: '#529b2e', item: { width: 40, height: 30, fillColor: 'yellow' ,content:'NG123456910'} },
      ]
        { 
          x: 70, y: 126, width: 600, height: 240, fillColor: '#79bbff', 
          items: [
            { position: 'top-left', width: 40, height: 30, fillColor: '#911005', content: 'NG123456' },
            { position: 'bottom-right', width: 40, height: 30, fillColor: 'yellow', content: 'NG1234567' }
          ]
        },
        { 
          x: 675, y: 126, width: 600, height: 240,  fillColor: '#79bbff', 
          items: [
            { position: 'top-left', width: 40, height: 30, fillColor: '#911005', content: 'NG123456' },
            { position: 'top-right', width: 40, height: 30, fillColor: 'yellow', content: 'NG1234567' }
          ]
        },
        { 
          x: 70, y: 370, width: 1100, height: 260, fillColor: '#79bbff', 
          items: [
            { position: 'top-left', width: 40, height: 30, fillColor: '#911005', content: 'NG123456' },
            { position: 'top-right', width: 40, height: 30, fillColor: 'yellow', content: 'NG1234567' }
          ]
        },
        { 
          x: 1175, y: 370, width: 200, height: 300,fillColor: '#79bbff', 
          items: [
            { position: 'top-left', width: 40, height: 30, fillColor: '#911005', content: 'NG123456' },
            { position: 'top-right', width: 40, height: 30, fillColor: 'yellow', content: 'NG1234567' }
          ]
        }
        
        // Add more racks and items here as needed
      ],
    };
  },
  
  methods: {
    calculateItemXPosition(rack, item, index) {
  if (index === 4) {
    // 第五个矩形，确保不超出架子右边界
    return Math.min(rack.x + rack.width - item.width, rack.x + rack.width);
  } else {
    return Math.max(rack.x, Math.min(rack.x + rack.width / 2 - item.width / 2, rack.x + rack.width - item.width));
  }
},
calculateItemYPosition(rack, item, index) {
  if (index === 0 || index === 2) {
    // 第一个和第三个矩形，贴近架子顶部
    return Math.min(rack.y, rack.y + rack.height);
  } else if (index === 1 || index === 3) {
    // 第二个和第四个矩形，贴近架子底部
    return Math.max(rack.y, Math.min(rack.y + rack.height - item.height, rack.y + rack.height));
  } 
}
      if (item.position === 'top-right' || item.position === 'bottom-right') {
        return Math.min(rack.x + rack.width - item.width, rack.x + rack.width);
      } else {
        return rack.x;
      }
    },
    
    calculateItemYPosition(rack, item, index) {
      if (item.position === 'bottom-left' || item.position === 'bottom-right') {
        return Math.min(rack.y + rack.height - item.height, rack.y + rack.height);
      } else {
        return rack.y;
      }
    },
    
    showCustomAlert(content) {
      Swal.fire({
        title: 'Rack Information',
        text: content,
        icon: 'info',
      });
    },
    
    showRectInfo(rectInfo) {
      const contents = rectInfo.items.map(item => item.content).join(', ');
      this.$nextTick(() => {
        this.showCustomAlert(contents);
      });
    },
  }
};
</script>
@@ -71,4 +111,12 @@
  width: 100%;
  height: 80vh;
}
.rack-rect:hover {
  cursor: pointer;
}
.custom-popover-class {
  background-color: lightgrey;
  color: black;
  border: 1px solid black;
}
</style>