add：坡面数据为空画布清空处理。 po台阶与设备数据加工独立处理。

src/views/dataMonitor/jrx/history/index.vue

@@ -248,6 +248,20 @@ export default {
     });
   },
   methods: {
+    /** 清空画布内容及配置 */
+    clearCanvas() {
+      if (this.ctx) {
+        // 清除画布绘制内容（基于当前坐标系）
+        this.ctx.save();
+        this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认坐标系
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); // 清空整个画布
+        this.ctx.restore();
+      }
+      // 重置配置数据（避免残留）
+      this.canvasDataReal.poConfigs = [];
+      this.canvasDataReal.guanConfigs = [];
+      this.canvasDataReal.lineConfigs = [];
+    },
     getCanvasData() {
       const params = { ...this.form.query };
       request({
@@ -256,16 +270,19 @@ export default {
         params,
       }).then(async (res) => {
         const data = res.body;
-        console.log("接口数据", data);
-        // 判断数据是否为空（根据实际接口返回结构调整）
-        // const isEmpty =
-        //   !data.jrxStepsDtoList?.length || !data.equipmentDataList?.length;
-        // this.canvasDataEmpty = isEmpty; // 更新空数据状态
-
-        // if (!isEmpty) {
-          await this.handleCanvasData(data);
-          this.initCanvas();
-        // }
+
+        if (!data.length) {
+          // 数据为空时清空画布
+          this.clearCanvas();
+          return;
+        }
+
+        console.log("剖面接口数据", data);
+        console.table(JSON.parse(JSON.stringify(data[0].jrxStepsDtoList)))
+        console.table(JSON.parse(JSON.stringify(data[0].equipmentDataList)))
+
+        await this.handleCanvasData(data);
+        this.initCanvas();
       });
     },
     handleCanvasData(list = []) {
@@ -297,27 +314,29 @@ export default {
 
         //第一层台阶的开孔深度和设备图片相除的系数
         const sbHeightModulus = poumian.equipmentDataList[0].jrxTrepanning; //  / 130;
-        for (let index = 0; index < poCount; index++) {
-          // 坡数据数据格式处理
+        
+        // 坡数据数据格式处理
+        poumian.jrxStepsDtoList.forEach((po, poIndex)=>{
           this.canvasDataReal.poConfigs.push({
             x: 0,
-            y: canvasHeight - (index + 1) * poH,
-            width: canvasWidth - (index + 1) * po_pad_right,
+            y: canvasHeight - (poIndex + 1) * poH,
+            width: canvasWidth - (poIndex + 1) * po_pad_right,
             height: poH,
           });
+        })
+        // 管孔数据数据格式处理
+        poumian.equipmentDataList.forEach((equipment, equipIndex)=>{
+          const po = this.canvasDataReal.poConfigs[equipIndex]
           // 管孔数据数据格式处理
           this.canvasDataReal.guanConfigs.push({
-            x: this.canvasDataReal.poConfigs[index].width * 0.75,
-            y:
-              canvasHeight -
-              this.canvasDataReal.poConfigs[index].height * (index + 1) +
-              30,
+            x: po.width * 0.75,
+            y: canvasHeight - po.height * (equipIndex + 1) + 30,
             width: 6,
-            height:
-              poumian.equipmentDataList[index].jrxTrepanning * sbHeightModulus,
+            height: equipment.jrxTrepanning * sbHeightModulus,
             image: "guanImage",
           });
-        }
+        })
+
 
         // 警戒线逻辑- 初始话基本数据结构
         for (let index1 = 0; index1 < lineCount; index1++) {
@@ -345,7 +364,11 @@ export default {
           });
         });
 
-        console.log("this.canvasDataReal", this.canvasDataReal);
+        console.log("坡面处理完毕数据", this.canvasDataReal);
+        console.table(JSON.parse(JSON.stringify(this.canvasDataReal.poConfigs)))
+        console.table(JSON.parse(JSON.stringify(this.canvasDataReal.guanConfigs)))
+        console.table(JSON.parse(JSON.stringify(this.canvasDataReal.lineConfigs)))
+
         resolve(); // 数据处理完成后触发resolve
       });
     },