大屏

src/views/productionVisualization/equipmentBoard/components/handingObject.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="handling-object">
+    <!-- 左侧内容：L:名称+规格 -->
+    <div class="handling-item left">
+      <div class="table-icon left-icon"></div>
+      <span style="margin-left: 4px;">{{ leftContent }}</span>
+    </div>
+    <!-- 右侧内容：R:名称+规格 -->
+    <div class="handling-item right">
+      <div class="table-icon right-icon"></div>
+      <span style="margin-left: 4px;">{{ rightContent }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HandlingObjectLabel',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({}),
+      required: true
+    }
+  },
+  computed: {
+    // 拆分左侧内容（L:xxx）
+    leftContent() {
+      const handlingStr = this.injectData.handingObject || '';
+      const leftPart = handlingStr.split(',')[0] || ''; // 取第一个逗号前的部分
+      return leftPart.replace('L:', ''); // 移除前缀"L:"
+    },
+    // 拆分右侧内容（R:xxx）
+    rightContent() {
+      const handlingStr = this.injectData.handingObject || '';
+      const rightPart = handlingStr.split(',')[1] || ''; // 取第一个逗号后的部分
+      return rightPart.replace('R:', ''); // 移除前缀"R:"
+    }
+  }
+};
+</script>
+<style scoped>
+.handling-object {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 14px;
+  padding: 4px 8px;
+}
+
+.handling-item {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  /* 防止子元素被压缩 */
+  flex-shrink: 0;
+}
+
+.table-icon {
+  width: 12px;
+  height: 12px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  /* 固定图标尺寸，不被挤压 */
+  flex-shrink: 0;
+}
+
+/* 左侧图标 */
+.left-icon {
+  background-image: url('../../../../assets/img/leftTable.png');
+}
+
+/* 右侧图标 */
+.right-icon {
+  background-image: url('../../../../assets/img/rightTable.png');
+}
+</style>