feat(coil): 添加钢卷加工流程图组件并优化界面

- 新增ProcessFlow组件展示钢卷加工流程
- 在base面板中添加流程图显示开关
- 调整DragResizeBox的z-index确保显示层级
- 修复部分样式问题和代码格式
- 更新字典项从warehouse_sync改为wms_next_warehouse

klp-ui/src/views/wms/coil/components/ProcessFlow.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="process-flow-container">
+    <div class="flow-chart" ref="flowChart"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: 'ProcessFlow',
+  data() {
+    return {
+      chart: null
+    };
+  },
+  mounted() {
+    this.initChart();
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  methods: {
+    initChart() {
+      // 初始化 echarts 实例
+      this.chart = echarts.init(this.$refs.flowChart);
+      
+      // 流程图配置
+      const option = {
+        title: {
+          text: '钢卷加工流程图',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}'
+        },
+        animationDurationUpdate: 1500,
+        animationEasingUpdate: 'quinticInOut',
+        series: [
+          {
+            type: 'graph',
+            layout: 'none',
+            symbolSize: 80,
+            roam: false,
+            label: {
+              show: true
+            },
+            edgeSymbol: ['circle', 'arrow'],
+            edgeSymbolSize: [4, 10],
+            edgeLabel: {
+              fontSize: 12
+            },
+            data: [
+              { 
+                name: '酸轧', 
+                x: 100, 
+                y: 100,
+                itemStyle: { color: '#5c7495' }
+              },
+              { 
+                name: '镀锌卷', 
+                x: 250, 
+                y: 50,
+                itemStyle: { color: '#2cb867' }
+              },
+              { 
+                name: '分剪', 
+                x: 400, 
+                y: 50,
+                itemStyle: { color: '#22bbff' }
+              },
+              { 
+                name: '脱脂', 
+                x: 250, 
+                y: 150,
+                itemStyle: { color: '#800080' }
+              },
+              { 
+                name: '罩退', 
+                x: 400, 
+                y: 150,
+                itemStyle: { color: '#3ba272' }
+              },
+              { 
+                name: '拉矫【冷轧】', 
+                x: 550, 
+                y: 100,
+                itemStyle: { color: '#f56c6c' }
+              },
+              { 
+                name: '双机架', 
+                x: 550, 
+                y: 200,
+                itemStyle: { color: '#ffa500' }
+              },
+              { 
+                name: '镀铬', 
+                x: 700, 
+                y: 200,
+                itemStyle: { color: '#0000ff' }
+              }
+            ],
+            links: [
+              { source: '酸轧', target: '镀锌卷' },
+              { source: '镀锌卷', target: '分剪' },
+              { source: '酸轧', target: '脱脂' },
+              { source: '脱脂', target: '罩退' },
+              { source: '罩退', target: '拉矫【冷轧】' },
+              { source: '罩退', target: '双机架' },
+              { source: '双机架', target: '镀铬' }
+            ],
+            lineStyle: {
+              opacity: 0.9,
+              width: 2,
+              curveness: 0
+            }
+          }
+        ]
+      };
+      
+      // 应用配置
+      this.chart.setOption(option);
+      this.$nextTick(() => {
+        this.chart.resize();
+      });
+      
+      // 响应式处理
+      window.addEventListener('resize', () => {
+        this.chart.resize();
+      });
+    },
+    resizeChart() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.process-flow-container {
+  width: 100%;
+  height: 400px;
+  .flow-chart {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>