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

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

klp-ui/src/components/DragResizeBox/index.vue

@@ -254,7 +254,7 @@ export default {
 /* 容器样式：改为全屏且无视觉样式 */
 .drag-resize-container {
   position: fixed; /* 固定定位覆盖整个屏幕 */
-  top: 0;
+  top: 0; 
   left: 0;
   width: 100vw;
   height: 100vh;
@@ -271,7 +271,7 @@ export default {
   box-sizing: border-box;
   overflow: hidden;
   pointer-events: auto; /* 元素本身响应鼠标事件 */
-  z-index: 9999; /* 确保元素在最上层 */
+  z-index: 99999; /* 确保元素在最上层 */
   background-color: #ffffff; /* 添加背景色，提升可视性 */
 }
 

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>

klp-ui/src/views/wms/coil/panels/base.vue

@@ -48,6 +48,10 @@
       <MaterialSelect :hideType="hideType" :itemId.sync="queryParams.itemIds" :itemType.sync="queryParams.itemType"
         :multiple="true" />
 
+      <el-form-item v-if="editNext" label="显示流程图" prop="showProcessFlow">
+        <el-checkbox v-model="showProcessFlow" @change="handleShowProcessFlowChange"></el-checkbox>
+      </el-form-item>
+
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -82,7 +86,8 @@
     </el-row>
 
     <KLPTable v-loading="loading" :data="materialCoilList" @selection-change="handleSelectionChange" :floatLayer="true"
-      :floatLayerConfig="floatLayerConfig" @row-click="handleRowClick" :height="showAbnormal ? 'calc(100vh - 400px)' : ''">
+      :floatLayerConfig="floatLayerConfig" @row-click="handleRowClick"
+      :height="showAbnormal ? 'calc(100vh - 400px)' : ''">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="入场钢卷号" align="center" prop="enterCoilNo">
         <template slot-scope="scope">
@@ -164,7 +169,7 @@
         <template slot-scope="scope">
           <el-select v-model="scope.row.nextWarehouseId" placeholder="钢卷去向" filterable
             @change="handleNextWarehouseChange(scope.row)">
-            <el-option v-for="item in dict.type.warehouse_sync" :key="item.value" :value="item.value"
+            <el-option v-for="item in dict.type.wms_next_warehouse" :key="item.value" :value="item.value"
               :label="item.label" />
           </el-select>
         </template>
@@ -253,7 +258,7 @@
 
       <el-table-column label="生产耗时" align="center" prop="productionDuration" v-if="showProductionTimeEdit" width="150">
         <template slot-scope="scope">
-          {{ formatDuration(scope.row.productionDuration * 60 * 1000)}}
+          {{ formatDuration(scope.row.productionDuration * 60 * 1000) }}
         </template>
       </el-table-column>
 
@@ -425,11 +430,13 @@
         label-width="100px">
         <el-form-item label="生产开始时间" prop="productionStartTime">
           <el-date-picker v-model="productionTimeForm.productionStartTime" type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择生产时间" @change="(value) => { productionTimeForm.productionStartTime = value; calculateProductionDuration(); }" />
+            value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择生产时间"
+            @change="(value) => { productionTimeForm.productionStartTime = value; calculateProductionDuration(); }" />
         </el-form-item>
         <el-form-item label="生产结束时间" prop="productionEndTime">
           <el-date-picker v-model="productionTimeForm.productionEndTime" type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择生产时间" @change="(value) => { productionTimeForm.productionEndTime = value; calculateProductionDuration(); }" />
+            value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择生产时间"
+            @change="(value) => { productionTimeForm.productionEndTime = value; calculateProductionDuration(); }" />
         </el-form-item>
         <el-form-item label="生产耗时" prop="productionDuration">
           <!-- <div>{{ productionTimeForm.formattedDuration }}</div> -->
@@ -442,14 +449,15 @@
       </div>
     </el-dialog>
 
-    <!-- <el-dialog title="异常信息" :visible.sync="abnormalOpen" width="90%" append-to-body> -->
     <abnormal-list v-if="showAbnormal && currentCoilId" :coil-id="currentCoilId"></abnormal-list>
-    <!-- </el-dialog> -->
 
-    <!-- 吞吐记录 -->
-    <!-- <el-dialog v-if="showWareLog" title="吞吐记录" :visible.sync="logOpen" width="90%" append-to-body> -->
     <log-table v-if="showWareLog && currentCoilId" :coil-id="currentCoilId"></log-table>
-    <!-- </el-dialog> -->
+
+    <DragResizeBox v-if="editNext && showProcessFlow" storageKey="coil-process-flow" @size-change="resizeChart">
+      <div style="height: 100%; width: 100%; overflow-y: scroll; display: flex; background-color: #fff;">
+        <process-flow v-if="showProcessFlow" ref="processFlow"></process-flow>
+      </div>
+    </DragResizeBox>
   </div>
 </template>
 
@@ -492,7 +500,11 @@ import { PDFDocument } from 'pdf-lib';
 import { listUser } from "@/api/system/user";
 import AbnormalList from "./abnormal.vue";
 import LogTable from "@/views/wms/warehouse/components/LogTable.vue";
-import { getCoilTagPrintType } from '@/views/wms/coil/js/coilPrint'
+import { getCoilTagPrintType } from '@/views/wms/coil/js/coilPrint';
+import DragResizeBox from '@/components/DragResizeBox/index.vue';
+import ProcessFlow from '../components/ProcessFlow.vue';
+
+
 
 export default {
   name: "MaterialCoil",
@@ -513,8 +525,10 @@ export default {
     OuterTagPreview,
     AbnormalList,
     LogTable,
+    ProcessFlow,
+    DragResizeBox,
   },
-  dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer', 'coil_quality_status', 'warehouse_sync', 'coil_business_purpose'],
+  dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer', 'coil_quality_status', 'wms_next_warehouse', 'coil_business_purpose'],
   props: {
     qrcode: {
       type: Boolean,
@@ -615,6 +629,7 @@ export default {
     return {
       // 按钮loading
       buttonLoading: false,
+      showProcessFlow: false,
       // 遮罩层
       loading: true,
       // 追溯加载中
@@ -821,6 +836,10 @@ export default {
       this.currentCoilId = row.coilId;
       this.logOpen = true;
     },
+    // 处理大小变化事件
+    resizeChart() {
+      this.$refs.processFlow.resizeChart();
+    },
     // 获取用户列表
     getUserList() {
       listUser({ pageNum: 1, pageSize: 1000 }).then(res => {

klp-ui/src/views/wms/coil/where.vue

@@ -34,7 +34,7 @@ export default {
       labelType: '2',
       hideType: false,
       showControl: false,
-      showAbnormal: true,
+      showAbnormal: false,
     }
   }
 }