baoshi-swms-app-web/src/views/haikang/putaway/components/Box.vue

<template>
  <svg class="box-display" width="150" height="80" viewBox="0 0 300 160">
    <g>
      <rect x="0" y="80" width="300" height="80" />
      <text x="10" y="135" font-family="Verdana" font-weight="bold" font-size="40" fill="green">
        {{ box.name }}
      </text>
    </g>
    <polygon class="line" points="0,80 50,0 250,0 300,80" />
    <g v-if="box.category === 1">
      <polygon class="single" points="0,80 50,1 250,1 300,80" />
    </g>
    <g v-if="box.category === 2">
      <polygon class="line" points="0,80 50,1 150,1 150,80" />
      <polygon class="line" points="150,0 150,80 300,80 250,0" />
    </g>
    <g v-if="box.category === 3">
      <polygon class="line" points="0,80 50,1 120,1 100,80" />
      <polygon class="line" points="100,80 120,1 180,1 200,80" />
      <polygon class="line" points="200,80 180,1 250,1 300,80" />
    </g>
    <g v-if="box.category === 4">
      <polygon class="line" points="29.17,33.33 50,0 150,0 150,33.33" />
      <polygon class="line" points="150,33.33 150,0 250,0 270.83,33.33" />
      <polygon class="line" points="0,80 29.17,33.33 150,33.33 150,80" />
      <polygon class="line" points="150,33.33 150,80 300,80 270.83,33.33" />
    </g>
    <g v-if="box.category === 6">
      <polygon class="line" points="29.17,33.33 50,0 117,0 110.39,33.33" />
      <polygon class="line" points="117,0 110.39,33.33 191.61,33.33 185.5,0" />
      <polygon class="line" points="191.61,33.33 185.5,0 250,0 270.83,33.33" />
      <polygon class="line" points="200,80 191.61,33.33 270.83,33.33 300,80" />
      <polygon class="line" points="110.39,33.33 100,80 200,80 191.61,33.33" />
      <polygon class="line" points="0,80 29.17,33.33 110.39,33.33 100,80" />
    </g>
    <g v-if="box.category === 8">
      <polygon class="line" points="29.17,33.33 50,0 100,0 93.39,33.33" />
      <polygon class="line" points="100,0 93.39,33.33 150.61,33.33 152.5,0" />
      <polygon class="line" points="150.61,33.33 152.5,0 205,0 210.83,33.33" />
      <polygon class="line" points="205,33.33 200.83,0 250,0 270.83,33.33" />
      <polygon class="line" points="210.83,80 205,33.33 270.83,33.33 300,80" />
      <polygon class="line" points="148.5,80 150.61,33.33 205,33.33 210.83,80" />
      <polygon class="line" points="93.39,33.33 85,80 148.5,80 150.61,33.33" />
      <polygon class="line" points="0,80 29.17,33.33 93.39,33.33 85,80" />
    </g>
  </svg>
</template>

<script setup>
import { ref, watch } from 'vue';

// 接收父组件传递的数据
const props = defineProps({
  box: Object,
});

// 定义响应式变量
const box = ref(props.box);

// 监听 box.category 属性变化，更新 category
watch(() => box.value.category, (newCategory) => {
  resetCategory(newCategory);
}, { immediate: true });

// 设置分类并更新
function resetCategory (category){
  if (!category) {
    category = 1;
  } else {
    category = Number(category);
    if (category >= 0 && category <= 1) {
      category = 1;
    }
    if (category === 5) {
      category = 6;
    }
    if (category > 6) {
      category = 8;
    }
  }
  box.value.category = category;
}

// 高亮处理
const clearHigh=()=> {
  const elements = document.querySelectorAll('.successHigh, .exceptionHigh, .exception-text');
  elements.forEach((element) => {
    let className = element.getAttribute('class');
    className = className.replace('successHigh', '').replace('exceptionHigh', '').trim();
    element.setAttribute('class', className);
    if (className.includes('exception-text')) {
      element.remove();
    }
  });
}

const high=(index, isException)=> {
  setTimeout(function () {
    const element = document.getElementsByTagName('polygon')[index];
    if (!element) return;

    if (isException) {
      element.setAttribute('class', element.getAttribute('class').replace('successHigh', '') + ' exceptionHigh');
      const bbox = element.getBBox();
      const textX = bbox.x + bbox.width / 2;
      const textY = bbox.y + bbox.height / 2;

      const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      textElement.setAttribute('class', 'exception-text');
      textElement.setAttribute('x', textX);
      textElement.setAttribute('y', textY);
      textElement.setAttribute('data-index', index);
      textElement.setAttribute('font-family', 'Verdana');
      textElement.setAttribute('font-weight', 'bold');
      textElement.setAttribute('font-size', '15');
      textElement.setAttribute('text-anchor', 'middle');
      textElement.setAttribute('dominant-baseline', 'central');
      textElement.setAttribute('fill', 'red');
      textElement.textContent = '异常';

      element.parentNode.insertBefore(textElement, element.nextSibling);
    } else {
      if (element.getAttribute('class').includes('exceptionHigh')) {
        element.setAttribute('class', element.getAttribute('class').replace('exceptionHigh', ''));
        const textElements = element.parentNode.querySelectorAll(`.exception-text[data-index="${index}"]`);
        textElements.forEach((textElement) => {
          element.parentNode.removeChild(textElement);
        });
      }
      element.setAttribute('class', element.getAttribute('class') + ' successHigh');
    }
  }, 50);
}

defineExpose({high,clearHigh})
</script>

<style scoped>
g rect {
  fill: #ffffff;
  stroke-width: 3;
  stroke: rgb(11, 51, 71);
}
.face {
  fill: #ffffff;
  stroke: rgb(11, 51, 71);
  stroke-width: 3;
}
.line {
  stroke: rgb(11, 51, 71);
  stroke-width: 3;
}
.single {
  fill: #ffffff;
}
.successHigh {
  fill: RGB(103, 194, 58) !important;
}
.exceptionHigh {
  fill: orange !important;
}
.exception-text {
  pointer-events: none;
}
</style>