add：浸润线白色警戒线水位绘制-rev1- 2个点版本

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

@@ -249,19 +249,19 @@ 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();
-  },
+    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) {
@@ -292,8 +292,8 @@ export default {
         }
 
         console.log("剖面接口数据", data);
-        console.table(JSON.parse(JSON.stringify(data[0].jrxStepsDtoList)))
-        console.table(JSON.parse(JSON.stringify(data[0].equipmentDataList)))
+        console.table(JSON.parse(JSON.stringify(data[0].jrxStepsDtoList)));
+        console.table(JSON.parse(JSON.stringify(data[0].equipmentDataList)));
 
         await this.handleCanvasData(data);
         this.initCanvas();
@@ -327,23 +327,24 @@ export default {
         this.canvasDataReal.lineConfigs = [];
 
         //第一层台阶的开孔深度和设备图片相除的系数
-        const sbHeightModulus = poumian.equipmentDataList[0].jrxTrepanning / 130;
+        const sbHeightModulus =
+          poumian.equipmentDataList[0].jrxTrepanning / 130;
 
         // 存储设备数据列表（关键新增，用于后续获取depth值）
         this.equipmentDataList = poumian.equipmentDataList || [];
 
         // 坡数据数据格式处理
-        poumian.jrxStepsDtoList.forEach((po, poIndex)=>{
+        poumian.jrxStepsDtoList.forEach((po, poIndex) => {
           this.canvasDataReal.poConfigs.push({
             x: 0,
             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]
+        poumian.equipmentDataList.forEach((equipment, equipIndex) => {
+          const po = this.canvasDataReal.poConfigs[equipIndex];
           // 管孔数据数据格式处理
           this.canvasDataReal.guanConfigs.push({
             x: po.width * 0.75 + 50,
@@ -352,8 +353,7 @@ export default {
             height: equipment.jrxTrepanning / sbHeightModulus,
             image: "guanImage",
           });
-        })
-
+        });
 
         // 警戒线逻辑- 初始话基本数据结构
         for (let index1 = 0; index1 < lineCount; index1++) {
@@ -382,9 +382,15 @@ export default {
         });
 
         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)))
+        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
       });
@@ -506,23 +512,69 @@ 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. 绘制白色警戒线所有点的文字标注（修改部分）
+      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 || ""; // 添加空值校验
+
+            // 绘制当前点的文字
+            this.drawText({
+              x: point.x,
+              y: this.canvas.height - point.y,
+              text: `浸润线埋深：${depth}m`,
+            });
+          });
+        }
+      });
+
+
+      // 新增：绘制白色警戒线下方海蓝色阴影
+      this.canvasDataReal.lineConfigs.forEach((lineConfig) => {
+        if (lineConfig.color === 'white' && lineConfig.points.length >= 2) { // 至少需要2个点构成直线
+          this.ctx.save();
+          this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认坐标系（左上角原点，Y轴向下）
+          
+          // 将警戒线坐标转换为默认坐标系（原坐标系Y轴向上）
+          const points = lineConfig.points.map(point => ({
+            x: point.x,
+            y: point.y // 转换为默认Y轴向下的坐标
+          }));
+
+          // 取警戒线的起点和终点（假设points按顺序排列）
+          const startPoint = points[0];
+          const endPoint = points[points.length - 1];
+
+          console.table(startPoint)
+          console.table(endPoint)
+
+
+          // 构建梯形四个顶点（直角梯形）
+          const trapezoidPoints = [
+            startPoint,                  // 顶部左端点
+            endPoint,                    // 顶部右端点
+            { x: endPoint.x, y: endPoint.y + (this.canvas.height - endPoint.y) }, // 底部右端点（垂直投影到底边）
+            { x: startPoint.x, y: startPoint.y + (this.canvas.height - endPoint.y) }, // 底部左端点（垂直投影到底边）
+          ];
+
+          // 绘制梯形路径并填充
+          this.ctx.fillStyle = 'rgba(59, 175, 251, 0.3)'; // 海蓝色，透明度30%
+          this.ctx.beginPath();
+          trapezoidPoints.forEach((point, index) => {
+            index === 0 
+              ? this.ctx.moveTo(point.x, point.y) 
+              : this.ctx.lineTo(point.x, point.y);
+          });
+          this.ctx.closePath(); // 闭合路径
+          this.ctx.fill();
+
+          this.ctx.restore();
+        }
       });
-    }
-  });
 
       // 5. 绘制water.png
       this.drawWaterImage();