✨ 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>

klp-ui/src/views/lines/rects.js

@@ -0,0 +1,356 @@
+export const rects = [
+  // 左侧：开卷机
+  {
+    id: 'POR1',
+    config: {
+      x: 40,
+      y: 110,
+      width: 200,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '1#开卷机[POR1]' }
+  },
+  {
+    id: 'POR2',
+    config: {
+      x: 40,
+      y: 220,
+      width: 200,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '2#开卷机[POR2]' }
+  },
+
+  // 中上部：焊机、入口活套
+  {
+    id: 'WELDER',
+    config: {
+      x: 300,
+      y: 30,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '焊机[WELDER]' }
+  },
+  {
+    id: 'ENL1',
+    config: {
+      x: 300,
+      y: 110,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '入口活套1[ENL1]' }
+  },
+  {
+    id: 'ENL2',
+    config: {
+      x: 300,
+      y: 160,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '入口活套2[ENL2]' }
+  },
+
+  // 中下部：清洗段
+  {
+    id: 'CLEAN',
+    config: {
+      x: 300,
+      y: 240,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '清洗段[CLEAN]' }
+  },
+
+  // 右侧上：退火炉1-4
+  {
+    id: 'FUR1',
+    config: {
+      x: 600,
+      y: 70,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '退火炉[FUR1]' }
+  },
+  {
+    id: 'FUR2',
+    config: {
+      x: 600,
+      y: 120,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '退火炉[FUR2]' }
+  },
+  {
+    id: 'FUR3',
+    config: {
+      x: 600,
+      y: 170,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '退火炉[FUR3]' }
+  },
+  {
+    id: 'FUR4',
+    config: {
+      x: 600,
+      y: 220,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '退火炉[FUR4]' }
+  },
+
+  // 右侧中：光整机
+  {
+    id: 'TM',
+    config: {
+      x: 600,
+      y: 400,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '光整机[TM]' }
+  },
+
+  // 右侧下：拉矫机
+  {
+    id: 'TL',
+    config: {
+      x: 600,
+      y: 480,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '拉矫机[TL]' }
+  },
+
+  // 中下：后处理
+  {
+    id: 'COAT',
+    config: {
+      x: 300,
+      y: 360,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '后处理[COAT]' }
+  },
+
+  // 中下：出口活套
+  {
+    id: 'CXL1',
+    config: {
+      x: 300,
+      y: 440,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '出口活套[CXL1]' }
+  },
+  {
+    id: 'CXL2',
+    config: {
+      x: 300,
+      y: 490,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '出口活套[CXL2]' }
+  },
+
+  // 左下：卷取机、称重位
+  {
+    id: 'TR',
+    config: {
+      x: 40,
+      y: 380,
+      width: 200,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '卷取机[TR]' }
+  },
+  {
+    id: 'WEIT',
+    config: {
+      x: 40,
+      y: 460,
+      width: 200,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '称重位[WEIT]' }
+  }
+]
+
+export const lines = [
+  // 1#开卷机 → 焊机
+  {
+    id: 'line-por1-welder',
+    config: {
+      points: [
+        40 + 200, 110 + 25, 
+        40 + 200 + 30, 110 + 25,
+        40 + 200 + 30, 30 + 25,
+        300, 30 + 25
+      ],
+      stroke: '#686868',
+      strokeWidth: 2,
+      lineCap: 'round',
+      lineJoin: 'round'
+    }
+  },
+  // 2#开卷机 → 焊机
+  {
+    id: 'line-por2-welder',
+    config: {
+      points: [
+        40 + 200, 220 + 25,
+        40 + 200 + 30, 220 + 25,
+        40 + 200 + 30, 30 + 25,
+        300, 30 + 25
+      ],
+      stroke: '#686868',
+      strokeWidth: 2,
+      lineCap: 'round',
+      lineJoin: 'round'
+    }
+  },
+  // 清洗段 → 退火炉1
+  {
+    id: 'line-clean-fur1',
+    config: {
+      points: [
+        300 + 220, 240 + 25,
+        300 + 220 + 40, 240 + 25,
+        300 + 220 + 40, 70 + 25,
+        600, 70 + 25
+      ],
+      stroke: '#686868',
+      strokeWidth: 2,
+      lineCap: 'round',
+      lineJoin: 'round'
+    }
+  },
+  // 退火炉4 → 光整机
+  {
+    id: 'line-fur4-tm',
+    config: {
+      points: [
+        600 + 220, 220 + 25,
+        600 + 220 + 40, 220 + 25,
+        600 + 220 + 40, 400 + 25,
+        600 + 220, 400 + 25
+      ],
+      stroke: '#686868',
+      strokeWidth: 2,
+      lineCap: 'round',
+      lineJoin: 'round'
+    }
+  },
+  // 拉矫机 → 后处理
+  {
+    id: 'line-tl-coat',
+    config: {
+      points: [
+        600, 480 + 25, 
+        600 - 40, 480 + 25,
+        600 - 40, 360 + 25,
+        600 - 80, 360 + 25
+      ],
+      stroke: '#686868',
+      strokeWidth: 2,
+      lineCap: 'round',
+      lineJoin: 'round'
+    }
+  },
+  // 出口活套2 → 卷取机
+  {
+    id: 'line-cxl2-tr',
+    config: {
+      points: [
+        300, 490 + 25, 
+        300 - 30, 490 + 25,
+        300 - 30, 380 + 25,
+        300 - 60, 380 + 25
+      ],
+      stroke: '#686868',
+      strokeWidth: 2,
+      lineCap: 'round',
+      lineJoin: 'round'
+    }
+  }
+]

klp-ui/src/views/lines/zine.vue

@@ -0,0 +1,466 @@
+<template>
+  <div class="graph-container-box">
+    <el-row>
+      <el-col :span="16">
+        <knova-stage @rectClick="selectCard" :matMapList="matMapList" :rects="rects" :lines="lines"></knova-stage>
+      </el-col>
+      <el-col :span="8">
+        <div style="border: 1px solid #000; padding: 10px; border-radius: 10px; margin-bottom: 10px;">
+          <!-- 调整工具，选择两个位置，两个下拉选，分别双向绑定 -->
+          <el-form :model="adjustForm" ref="adjustForm" label-width="80px">
+            <el-form-item label="当前位置" prop="current">
+              <el-select v-model="adjustForm.current" placeholder="请选择当前位置">
+                <el-option v-for="item in matMapList" :key="item.positionNameEn" :label="item.positionNameCn" :value="item.positionNameEn"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="目标位置" prop="target">
+              <el-select v-model="adjustForm.target" placeholder="请选择目标位置">
+                <el-option v-for="item in matMapList" :key="item.positionNameEn" :label="item.positionNameCn" :value="item.positionNameEn"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <el-button type="primary" :disabled="!adjustForm.current || !adjustForm.target" @click="handleConfirmAdjust">确认调整</el-button>
+        </div>
+
+        <div style="border: 1px solid #000; padding: 10px; border-radius: 10px; margin-bottom: 10px;">
+          <el-row v-if="selectedCard">
+            <el-col :span="12">
+              <div class="detail-item">
+                <span class="detail-label">位置名称：</span>
+                <span class="detail-value">{{ selectedCard.positionNameCn || '-' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">位置代号：</span>
+                <span class="detail-value">{{ selectedCard.positionNameEn || '-' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">钢卷号：</span>
+                <span class="detail-value">{{ selectedCard.matId || '-' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">计划ID：</span>
+                <span class="detail-value">{{ selectedCard.planId || '-' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">计划号：</span>
+                <span class="detail-value">{{ selectedCard.planNo || '-' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">开卷机编号：</span>
+                <span class="detail-value">{{ selectedCard.porIdx || '-' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">卷取机编号：</span>
+                <span class="detail-value">{{ selectedCard.trIdx || '-' }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <!-- 加载状态 -->
+              <div class="empty-tip" v-if="isLoadingReturn">加载回退信息中...</div>
+
+              <!-- 错误状态 -->
+              <div class="empty-tip" v-else-if="returnError" style="color: #f56c6c;">
+                {{ returnError }}
+              </div>
+
+              <!-- 回退信息内容 -->
+              <div class="detail-list" v-else-if="Object.keys(returnInfo).length > 0">
+                <div class="detail-item">
+                  <span class="detail-label">回退钢卷号：</span>
+                  <span class="detail-value">{{ returnInfo.entryMatId || '-' }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">回退计划ID：</span>
+                  <span class="detail-value">{{ returnInfo.planId || '-' }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">回退计划号：</span>
+                  <span class="detail-value">{{ returnInfo.planNo || '-' }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">回退类型：</span>
+                  <span class="detail-value">{{ returnInfo.returnType || '-' }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">回退重量：</span>
+                  <span class="detail-value">
+                    {{ returnInfo.returnWeight || '-' }}
+                    {{ returnInfo.returnWeight ? 'kg' : '' }}
+                  </span>
+                </div>
+              </div>
+
+              <!-- 无回退信息 -->
+              <div class="empty-tip" v-else>无回退信息</div>
+            </el-col>
+          </el-row>
+          <el-row v-else>
+            <div class="empty-tip">请选择钢卷卡片查看详情</div>
+          </el-row>
+        </div>
+
+        <div style="border: 1px solid #000; padding: 10px; border-radius: 10px; margin-bottom: 10px;">
+          <el-row v-if="selectedCard">
+            <div class="operation-panel">
+              <div class="panel-content">
+                <!-- 非调整模式：显示操作按钮 -->
+                <div class="operation-buttons">
+                  <div class="button-group">
+                    <el-button size="mini" type="primary" @click="handleOperate(selectedCard, 'ONLINE')"
+                      class="btn-block">
+                      钢卷上线
+                    </el-button>
+                    <el-button size="mini" type="warning" @click="handleOperate(selectedCard, 'UNLOAD')"
+                      class="btn-block mt-2">
+                      手动卸卷
+                    </el-button>
+                    <el-button size="mini" type="danger" @click="handleOperate(selectedCard, 'ALL_RETURN')"
+                      class="btn-block mt-2">
+                      整卷回退
+                    </el-button>
+                    <el-button size="mini" type="danger" @click="handleOperate(selectedCard, 'HALF_RETURN')"
+                      class="btn-block mt-2">
+                      半卷回退
+                    </el-button>
+                    <el-button size="mini" type="info" @click="handleOperate(selectedCard, 'BLOCK')"
+                      class="btn-block mt-2">
+                      卸卷并封闭
+                    </el-button>
+                    <!-- <el-button size="mini" type="info" @click="handleOperate(selectedCard, 'THROW_TAIL')" class="btn-block mt-2">
+                甩尾
+              </el-button> -->
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-row>
+
+          <el-row v-else>
+            <div class="empty-tip">请选择钢卷卡片进行操作</div>
+          </el-row>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-dialog :visible.sync="operateMatStatus" :title="getOperateTitle" width="50%">
+      <el-form :model="operateMatForm" :rules="operateRules" ref="operateForm" label-width="120px">
+        <el-form-item label="开卷机编号" prop="porIdx">
+          <el-input v-model="operateMatForm.porIdx"></el-input>
+        </el-form-item>
+        <el-form-item label="卷取机编号" prop="trIdx">
+          <el-input v-model="operateMatForm.trIdx"></el-input>
+        </el-form-item>
+        <el-form-item label="计划id" prop="planId">
+          <el-input v-model="operateMatForm.planId" placeholder="请输入计划ID"></el-input>
+        </el-form-item>
+        <el-form-item label="钢卷号" prop="entryMatId">
+          <el-input v-model="operateMatForm.entryMatId" placeholder="请输入钢卷号"></el-input>
+        </el-form-item>
+        <!-- <el-form-item label="计划号" prop="planNo">
+          <el-input v-model="operateMatForm.planNo" placeholder="请输入计划号"></el-input>
+        </el-form-item> -->
+        <el-form-item label="操作类型" prop="operation">
+          <el-select v-model="operateMatForm.operation" disabled>
+            <el-option label="钢卷上线" value="ONLINE"></el-option>
+            <el-option label="手动卸卷" value="UNLOAD"></el-option>
+            <el-option label="整卷回退" value="ALL_RETURN"></el-option>
+            <el-option label="半卷回退" value="HALF_RETURN"></el-option>
+            <el-option label="卸卷并封闭" value="BLOCK"></el-option>
+            <!-- <el-option label="甩尾" value="THROW_TAIL"></el-option> -->
+          </el-select>
+        </el-form-item>
+
+        <!-- 回退相关字段 -->
+        <template v-if="['ALL_RETURN', 'HALF_RETURN'].includes(operateMatForm.operation)">
+          <el-form-item label="回退卷号" prop="returnMatId">
+            <el-input v-model="operateMatForm.returnMatId" placeholder="请输入回退卷号"></el-input>
+          </el-form-item>
+          <el-form-item label="回退重量" prop="returnWeight">
+            <el-input v-model="operateMatForm.returnWeight" placeholder="请输入回退重量"></el-input>
+          </el-form-item>
+          <el-form-item label="回退备注" prop="returnRemark">
+            <el-input v-model="operateMatForm.returnRemark" rows="3"></el-input>
+          </el-form-item>
+        </template>
+
+        <!-- 产出长度字段 -->
+        <template v-if="['PRODUCING', 'PRODUCT'].includes(operateMatForm.operation)">
+          <el-form-item label="产出钢卷长度" prop="coilLength">
+            <el-input v-model="operateMatForm.coilLength" type="number" placeholder="请输入产出钢卷长度"></el-input>
+          </el-form-item>
+        </template>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="operateMatStatus = false">取消</el-button>
+        <el-button type="primary" @click="submitOperateForm">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import createFetch from '@/api/l2/track'
+import { getConfigKey } from '@/api/system/config'
+import KnovaStage from './components/knovaStage.vue'
+import { rects, lines } from './rects'
+
+export default {
+  components: {
+    KnovaStage
+  },
+  data() {
+    return {
+      fetchApi: undefined,
+      rects,
+      lines,
+      matMapList: [],
+      selectedCard: null, // 非调整模式选中的单个卡片
+      adjustForm: {
+        current: null,
+        target: null
+      }, // 调整模式选中的位置：[当前, 目标]，双向绑定
+      adjustMode: false, // 是否为调整模式
+      deviceMap: {},
+      operateMatForm: {
+        porIdx: null,
+        trIdx: null,
+        planId: '',
+        entryMatId: '',
+        // planNo: '',
+        operation: '',
+        returnMatId: '',
+        returnWeight: null,
+        returnRemark: '',
+        coilLength: null
+      },
+      operateRules: {
+        planId: [{ required: true, message: '请输入计划id', trigger: 'blur' }],
+        entryMatId: [{ required: true, message: '请输入钢卷号', trigger: 'blur' }],
+        operation: [{ required: true, message: '请选择操作类型', trigger: 'change' }],
+        returnMatId: [
+          {
+            required: true,
+            message: '请输入回退卷号',
+            trigger: 'blur',
+            validator: (rule, val, cb) => {
+              if (['ALL_RETURN', 'HALF_RETURN'].includes(this.operateMatForm.operation) && !val) {
+                cb(new Error('请输入回退卷号'))
+              } else cb()
+            }
+          }
+        ],
+        returnWeight: [
+          {
+            required: true,
+            message: '请输入回退重量',
+            trigger: 'blur',
+            validator: (rule, val, cb) => {
+              if (['ALL_RETURN', 'HALF_RETURN'].includes(this.operateMatForm.operation) && (val === null || val === '')) {
+                cb(new Error('请输入回退重量'))
+              } else cb()
+            }
+          }
+        ]
+      },
+      operateMatStatus: false, // 操作对话框显示状态
+      returnInfo: {}, // 存储回退接口返回的数据
+      isLoadingReturn: false, // 回退信息加载状态
+      returnError: '' // 回退信息获取失败的提示
+    }
+  },
+  computed: {
+    // 操作对话框标题
+    getOperateTitle() {
+      const titleMap = {
+        'ONLINE': '钢卷上线',
+        'UNLOAD': '手动卸卷',
+        'ALL_RETURN': '整卷回退',
+        'HALF_RETURN': '半卷回退',
+        'BLOCK': '卸卷并封闭',
+        'THROW_TAIL': '甩尾'
+      }
+      return titleMap[this.operateMatForm.operation] || '钢卷操作'
+    }
+  },
+
+  methods: {
+    // 获取钢卷数据
+    fetchData() {
+      this.fetchApi.getTrackMatPosition().then(res => {
+        this.matMapList = res.data.matMapList || []
+        // this.deviceMap = res.data.matMapList || {}
+      }).catch(err => {
+        console.error('获取钢卷数据失败：', err)
+        this.$message.error('获取数据失败，请重试')
+      })
+    },
+
+    /**
+     * 获取回退信息
+     * @param {Number} posIdx - 位置索引（接口必填query参数）
+     */
+    fetchReturnData(posIdx) {
+      // 1. 校验posIdx
+      if (!posIdx && posIdx !== 0) {
+        this.returnInfo = {};
+        this.returnError = '缺少位置索引（posIdx），无法获取回退信息';
+        return;
+      }
+
+      // 2. 加载状态初始化
+      this.isLoadingReturn = true;
+      this.returnError = '';
+
+      // 3. 调用回退接口（posIdx作为query参数传递）
+      this.fetchApi.getBackData({ posIdx })
+        .then(res => {
+          this.isLoadingReturn = false;
+          // 接口成功且有数据
+          if (res.code === 200 && res.data) {
+            this.returnInfo = res.data;
+          } else {
+            this.returnInfo = {};
+            this.returnError = res.msg || '获取回退信息失败';
+          }
+        })
+        .catch(err => {
+          this.isLoadingReturn = false;
+          this.returnInfo = {};
+          this.returnError = '获取回退信息出错，请重试';
+          console.error('回退信息接口异常：', err);
+        });
+    },
+
+    // 选择卡片（区分调整/非调整模式）
+    selectCard(item) {
+      this.selectedCard = this.selectedCard === item ? null : item
+      // 选中卡片时查询回退信息，取消选中时清空
+      if (this.selectedCard) {
+        this.fetchReturnData(this.selectedCard.posIdx);
+        this.adjustForm.current = this.selectedCard.positionNameEn
+      } else {
+        this.returnInfo = {};
+        this.returnError = '';
+        this.adjustForm.current = null
+      }
+    },
+
+    // 确认调整位置
+    handleConfirmAdjust() {
+      const { current, target } = this.adjustForm
+
+      if (!current || !target) {
+        this.$message.warning('请选择当前位置和目标位置')
+        return
+      }
+
+      const params = {
+        currentPos: current,
+        targetPos: target,
+      }
+
+      this.$confirm(`确定将 ${current} 的钢卷调整到 ${target}？`, '确认调整', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.fetchApi.adjustPosition(params).then(() => {
+          this.$message.success('调整成功')
+          this.exitAdjustMode()
+          this.fetchData()
+        }).catch(err => {
+          console.error('调整失败：', err)
+          this.$message.error('调整失败，请重试')
+        })
+      }).catch(() => {
+        this.$message.info('已取消调整')
+      })
+    },
+
+    // 打开操作对话框
+    handleOperate(row, operation) {
+      this.$refs.operateForm?.resetFields()
+      this.operateMatForm = {
+        porIdx: row.posIdx || null,
+        trIdx: row.posIdx || null,
+        planId: row.planId || '',
+        entryMatId: row.matId || '',
+        planNo: row.planNo || '',
+        operation: operation,
+        returnMatId: '',
+        returnWeight: null,
+        returnRemark: '',
+        coilLength: null
+      }
+      this.operateMatStatus = true
+    },
+
+    // 提交操作表单 
+    submitOperateForm() {
+      this.$refs.operateForm.validate(valid => {
+        if (valid) {
+          this.fetchApi.operateMat(this.operateMatForm).then(() => {
+            this.$message.success('操作成功')
+            this.operateMatStatus = false
+            this.fetchData()
+          }).catch(err => {
+            console.error('操作失败：', err)
+            this.$message.error('操作失败，请重试')
+          })
+        } else {
+          this.$message.warning('请完善表单信息')
+        }
+      })
+    }
+  },
+
+  mounted() {
+    getConfigKey('line.zine.baseURL').then(res => {
+      this.fetchApi = createFetch(res.msg)
+      this.fetchData()
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.graph-container-box {
+  width: 100%;
+  box-sizing: border-box;
+  height: calc(100vh - 86px);
+  padding: 20px;
+  // background-color: #c0c0c0;
+  overflow: hidden;
+}
+
+.graph-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  img {
+    width: 1881px;
+    height: 608px;
+  }
+
+  // 图形元素基础样式
+  .graph-list>div {
+    position: absolute;
+  }
+
+  // 文字容器样式
+  .text-wrapper {
+    position: relative;
+    height: 100%;
+  }
+
+  // 文字基础样式（可被配置项覆盖）
+  .text-wrapper span {
+    position: absolute;
+    color: #333;
+    /* 默认文字颜色 */
+    font-size: 14px;
+    /* 默认文字大小 */
+  }
+}
+</style>