add： 添加埋深文字提醒显示

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

@@ -248,6 +248,20 @@ export default {
     });
   },
   methods: {
+    /** 绘制文字标注 */
+  drawText(config) {
+    this.ctx.save();
+    this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认坐标系（左上角原点）
+    this.ctx.font = `10px Arial`; // 文字大小8px
+    this.ctx.fillStyle = "#000"; // 黄色
+    this.ctx.textAlign = "center"; // 水平居中
+    this.ctx.textBaseline = "top"; // 垂直顶部对齐
+    
+    // 绘制文字（考虑Y轴方向转换）
+    const drawY = this.canvas.height - config.y; // 转换为默认坐标系Y轴
+    this.ctx.fillText(config.text, config.x, drawY + 5); // Y轴偏移5px避免重叠
+    this.ctx.restore();
+  },
     /** 清空画布内容及配置 */
     clearCanvas() {
       if (this.ctx) {
@@ -315,6 +329,8 @@ export default {
         //第一层台阶的开孔深度和设备图片相除的系数
         const sbHeightModulus = poumian.equipmentDataList[0].jrxTrepanning / 130;
 
+        // 存储设备数据列表（关键新增，用于后续获取depth值）
+        this.equipmentDataList = poumian.equipmentDataList || [];
 
         // 坡数据数据格式处理
         poumian.jrxStepsDtoList.forEach((po, poIndex)=>{
@@ -330,7 +346,7 @@ export default {
           const po = this.canvasDataReal.poConfigs[equipIndex]
           // 管孔数据数据格式处理
           this.canvasDataReal.guanConfigs.push({
-            x: po.width * 0.75,
+            x: po.width * 0.75 + 50,
             y: canvasHeight - po.height * (equipIndex + 1),
             width: 6,
             height: equipment.jrxTrepanning / sbHeightModulus,
@@ -490,6 +506,24 @@ export default {
         this.drawLine(config);
       });
 
+       // 5. 绘制白色警戒线所有点的文字标注（修改部分）
+  this.canvasDataReal.lineConfigs.forEach((lineConfig) => {
+    if (lineConfig.color === 'white' && lineConfig.points.length > 0) { // 添加可选链校验
+      lineConfig.points.forEach((point, subindex) => {  // 遍历所有坐标点
+        // 获取对应设备的深度值（通过索引对应）
+        const equipment = this.equipmentDataList[subindex];
+        const depth = equipment.depth || 'N/A';  // 添加空值校验
+
+        // 绘制当前点的文字
+        this.drawText({
+          x: point.x,
+          y: this.canvas.height - point.y,
+          text: `浸润线埋深：${depth}m`
+        });
+      });
+    }
+  });
+
       // 5. 绘制water.png
       this.drawWaterImage();
     },