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

- 新增ProcessFlow组件展示钢卷加工流程 - 在base面板中添加流程图显示开关 - 调整DragResizeBox的z-index确保显示层级 - 修复部分样式问题和代码格式 - 更新字典项从warehouse_sync改为wms_next_warehouse
2026-03-24 10:51:09 +08:00
parent 74cf838844
commit e76799f4e0
4 changed files with 187 additions and 15 deletions
--- a/klp-ui/src/components/DragResizeBox/index.vue
+++ b/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; /* 添加背景色，提升可视性 */
 }

--- a/klp-ui/src/views/wms/coil/components/ProcessFlow.vue
+++ b/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>
--- a/klp-ui/src/views/wms/coil/panels/base.vue
+++ b/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 => {
--- a/klp-ui/src/views/wms/coil/where.vue
+++ b/klp-ui/src/views/wms/coil/where.vue
@@ -34,7 +34,7 @@ export default {
      labelType: '2',
      hideType: false,
      showControl: false,
-      showAbnormal: true,
+      showAbnormal: false,
    }
  }
 }