add：警戒线

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

@@ -258,6 +258,15 @@ export default {
     },
 
     /** 绘制所有图片（背景图 + 新增图片） */
+    /**
+     * 实现：1.绘制背景图（原有逻辑）1
+     * 2.绘制 water.png（居中）1
+     * 3.动态绘制 po.png（根据后端返回数据数组个数遍历）
+     * 4.绘制 guan0.png（根据后端返回数据数组个数遍历）
+     * 5.绘制 警戒线（4条线，分别对应是个数组，每个坡都有对应的坐标点）
+     * 6.超过4个po，要动态变换画布高度。
+
+     */
     drawAllImages() {
       // 1. 绘制背景图（原有逻辑）
       this.ctx.save(); // 保存当前变换状态
@@ -339,13 +348,45 @@ export default {
           secondGuanX,  // 新x坐标
           secondPoY + 30,  // 新y坐标
           6,            // 保持宽度6px
-          secondPoY/1.5       // 保持高度121px
+          200 // secondPoY/1.5       // 保持高度121px
         );
         console.log((secondPoY/2), '(secondPoY/2) ')
 
         this.ctx.restore();
 
 
+    // 新增：绘制红色连接线（关键修改）
+    this.ctx.save();
+    this.ctx.setTransform(1, 0, 0, 1, 0, 0);  // 恢复默认坐标系（原点在左上角）
+    this.ctx.strokeStyle = "red";  // 设置线颜色为红色
+    this.ctx.lineWidth = 2;       // 设置线宽
+    this.ctx.beginPath();         // 开始路径
+    // 第一坐标点：第一个guanImage的x，y=guanY+30
+    this.ctx.moveTo(guanX, (guanY + 100));
+    // 第二坐标点：第二个guanImage的x，y=secondGuanY+30+150
+    this.ctx.lineTo(secondGuanX, secondGuanY+50);
+    // 新增：第三坐标点（示例坐标，需根据实际业务调整）
+    const thirdX = secondGuanX - 100;  // 假设第三个点x坐标在第二个点基础上右移100px
+    const thirdY = secondGuanY - 10;  // 假设第三个点y坐标在第二个点基础上下移80px（根据实际需求调整）
+    this.ctx.lineTo(thirdX, thirdY);
+
+    this.ctx.stroke();            // 描边绘制
+    this.ctx.restore();
+
+    // 新增：绘制红色连接线（关键修改）
+    this.ctx.save();
+    this.ctx.setTransform(1, 0, 0, 1, 0, 0);  // 恢复默认坐标系（原点在左上角）
+    this.ctx.strokeStyle = "yellow";  // 设置线颜色为红色
+    this.ctx.lineWidth = 2;       // 设置线宽
+    this.ctx.beginPath();         // 开始路径
+    // 第一坐标点：第一个guanImage的x，y=guanY+30
+    this.ctx.moveTo(guanX, (guanY + 100 - 20));
+    // 第二坐标点：第二个guanImage的x，y=secondGuanY+30+150
+    this.ctx.lineTo(secondGuanX, secondGuanY+50 -20);
+    this.ctx.stroke();            // 描边绘制
+    this.ctx.restore();
+
+
       // 2. 绘制 water.png（临时恢复默认坐标系，避免翻转）
       this.ctx.save(); // 保存当前变换状态
       this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认变换（不翻转）