✨ feat: l2过程跟踪

klp-ui/src/views/lines/components/knovaStage.vue

@@ -0,0 +1,119 @@
+<template>
+  <v-stage :config="stageSize">
+    <v-layer>
+      <!-- 设备分组：每个分组包含矩形和对应的文字 -->
+      <v-group 
+        v-for="rect in innerRects" 
+        :key="rect.id" 
+        @click="handleRectClick(rect)" 
+        :style="{ cursor: rect.config.cursor || 'default' }"
+      >
+        <!-- 矩形元素：根据选中状态动态设置边框颜色 -->
+        <v-rect 
+          :config="{
+            ...rect.config,
+            // 选中时边框为橘色，未选中时使用默认边框颜色
+            stroke: rect.id === selectedRectId ? '#4874cb' : rect.config.stroke,
+            // 选中时可以增加边框宽度，增强视觉效果
+            strokeWidth: rect.id === selectedRectId ? 3 : rect.config.strokeWidth
+          }" 
+        />
+        
+        <!-- 如果存在meta.rollid，则显示钢卷号 -->
+        <v-text 
+          v-if="rect.meta && rect.meta.matId"
+          :config="{
+            x: rect.config.x + rect.config.width / 4,
+            y: rect.config.y + rect.config.height / 2,
+            text: '[' + rect.meta.matId + ']',
+            fill: 'black',
+            fontSize: 14,
+            textAlign: 'center',
+            textBaseline: 'middle'
+          }" 
+        />
+        <!-- 让x轴方向文字居中 -->
+        <v-text 
+          :config="{
+            x: rect.config.x + rect.config.width / 2 - rect.textConfig.text.length * 5,
+            y: rect.config.y,
+            text: rect.textConfig.text,
+            fill: rect.textConfig.fill || 'black',
+            fontSize: rect.textConfig.fontSize || 14,
+            textAlign: 'center',
+            textBaseline: 'middle'
+          }" 
+        />
+      </v-group>
+
+      <!-- 连接线 -->
+      <v-line 
+        v-for="line in lines" 
+        :key="line.id" 
+        :config="line.config" 
+      />
+    </v-layer>
+  </v-stage>
+</template>
+
+<script>
+export default {
+  name: 'PreciseFlowChart',
+  props: {
+    matMapList: {
+      required: true,
+      type: Array,
+    },
+    rects: {
+      required: true,
+      type: Array,
+    },
+    lines: {
+      required: true,
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      // 舞台配置
+      stageSize: {
+        width: 1000,
+        height: 650,
+        background: 'white'
+      },
+      innerRects: [],
+      // 记录当前选中的矩形ID，初始为null（无选中）
+      selectedRectId: null
+    };
+  },
+  watch: {
+    matMapList: {
+      handler(newVal) {
+        console.log('matMapList', newVal);
+        // 根据matMapList中每一项的positionNameEn字段和rects中的id字段进行匹配
+        this.innerRects = [...this.rects];
+        newVal.forEach(item => {
+          const rect = this.innerRects.find(rect => rect.id === item.positionNameEn);
+          if (rect) {
+            this.$set(rect, 'meta', item);
+          }
+        });
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    // 矩形分组点击事件处理
+    handleRectClick(rect) {
+      // 切换选中状态：如果点击的是当前选中项，则取消选中；否则选中当前项
+      if (this.selectedRectId === rect.id) {
+        this.selectedRectId = null;
+      } else {
+        this.selectedRectId = rect.id;
+      }
+      this.$emit('rectClick', rect.meta);
+    }
+  }
+};
+</script>