add：警戒线溢出坡面需求调整处理

src/views/Screen/index.vue

@@ -84,6 +84,9 @@ export default {
   components: { Carousel, CenterViews },
   data() {
     return {
+      bianpoLinePoinArr: [], // 边坡线平均坐标点集合
+      jingjieLinePointArr: [],// 警戒线平均坐标点集合
+
       area: {
         b2_a1: [],
         b2a_2b: [],
@@ -971,6 +974,9 @@ export default {
           });
         },
         drawSteps: function(ladders) {
+            // 初始化边坡线采样点数组
+            this.bianpoLinePoinArr = [];
+
           ladders = ladders || [0];
           var initX = this.options.initX,
             initY = this.options.initY;
@@ -1020,6 +1026,7 @@ export default {
             ) {
               maxStepDepth = { ratio: stepDepthRatio, x: lEndX, y: lEndY };
             }
+            // 绘制边坡的线
             this.drawLiner({
               sx: cumulationX,
               sy: cumulationY,
@@ -1028,6 +1035,10 @@ export default {
               width: 2,
               color: "#8b8b8b"
             });
+             // 新增：生成10个采样点并添加到边坡线数组（平坡）
+             const stepPoints1 = this.getSampledPoints(cumulationX, cumulationY, fEndX, cumulationY, 10);
+            this.bianpoLinePoinArr.push(...stepPoints1);
+
             this.drawLiner({
               sx: fEndX,
               sy: cumulationY,
@@ -1036,6 +1047,12 @@ export default {
               width: 2,
               color: "#8b8b8b"
             });
+
+            // 新增：生成10个采样点并添加到边坡线数组（平坡间过渡连接线）
+
+            const stepPoints2 = this.getSampledPoints(fEndX, cumulationY, lEndX, lEndY, 10);
+            this.bianpoLinePoinArr.push(...stepPoints2);
+
             this.Cache.ladders[i] = {
               sx: cumulationX,
               sy: cumulationY,
@@ -1057,6 +1074,14 @@ export default {
             width: 2,
             color: "#8b8b8b"
           });
+
+          // 新增：生成10个采样点并添加到边坡线数组（最后平坡收尾线）
+
+          const stepPoints3 = this.getSampledPoints(cumulationX, cumulationY, damLength, damDepth, 10);
+            this.bianpoLinePoinArr.push(...stepPoints3);
+
+          console.log('bianpoLinePoinArr', JSON.stringify(this.bianpoLinePoinArr))
+          
           var damHeight = (cumulationY - this.options.initY) / pxRetioY;
           return (maxStepDepth.damHeight = damHeight), maxStepDepth;
         },
@@ -1157,14 +1182,65 @@ export default {
                 ladderSY -
                 (deviceSX - initX) * deviceSlopeRatio;
               var lineEX = (endY - lineSY) / deviceSlopeRatio;
-              this.drawLiner({
-                sx: initX,
-                sy: lineSY + initY,
-                ex: lineEX,
-                ey: endY,
-                width: 2,
-                color: key
+
+              /**
+               * 新增逻辑处理绘制警戒线，超过边坡外的则不显示
+                  2025年8月30日14:38:22
+               */
+              const { ctx, alarmLevel, xPixelToStepsYPixel } = this;
+              // 获取边坡线的x坐标数组（确保顺序一致）
+              const slopeXCoords = this.bianpoLinePoinArr.map(point => point.x);
+              const pointCount = slopeXCoords.length;
+
+              // 警戒线的起始和终止坐标(用于分配平均坐标点集合)
+              const startPoint = { x: initX, y: lineSY + initY };
+              const endPoint = { x: lineEX, y: endY };
+
+              // 清空警戒线数组
+              this.jingjieLinePointArr = [];
+
+              // 线性插值计算每个x对应的y值
+              slopeXCoords.forEach(x => {
+                // 计算当前x在起始点和终止点之间的比例
+                const t = (x - startPoint.x) / (endPoint.x - startPoint.x);
+                // 线性插值计算y值
+                const y = startPoint.y + t * (endPoint.y - startPoint.y);
+                // 存入警戒线数组
+                this.jingjieLinePointArr.push({ x, y });
               });
+
+              // 绘制警戒线（保留原有的高度判断逻辑）
+              this.jingjieLinePointArr.forEach((point, index) => {
+                if (index > 0) {
+                  const prevPoint = this.jingjieLinePointArr[index - 1];
+                  // 找到对应边坡线点的y坐标
+                  const slopePoint = this.bianpoLinePoinArr.find(p => p.x === point.x);
+                  // 如果警戒线y坐标高于边坡线则不绘制
+                  if (slopePoint && point.y > slopePoint.y) {
+                    ctx.strokeStyle = 'transparent';
+                  } else {
+                    ctx.strokeStyle = '#ff0000';
+                  }
+                   this.drawLiner({
+                      sx: prevPoint.x,
+                      sy: prevPoint.y,
+                      ex: point.x,
+                      ey: point.y,
+                      width: 2,
+                      color: (slopePoint && point.y) < slopePoint.y ? 'transparent' : key
+                    });
+                }
+              });
+
+              console.log('警戒线的值point', JSON.stringify(this.jingjieLinePointArr))
+              // this.drawLiner({
+              //   sx: initX,
+              //   sy: lineSY + initY,
+              //   ex: lineEX,
+              //   ey: endY,
+              //   width: 2,
+              //   color: key
+              // });
             }
           }
         },
@@ -1443,6 +1519,19 @@ export default {
             }
           }
           return ladderSY;
+        },
+         // 新增：生成线段采样点
+         getSampledPoints: function(sx, sy, ex, ey, numPoints) {
+          const points = [];
+          const segmentCount = numPoints - 1;
+          for (let i = 0; i < numPoints; i++) {
+            const t = i / segmentCount;
+            points.push({
+              x: sx + t * (ex - sx),
+              y: sy + t * (ey - sy)
+            });
+          }
+          return points;
         }
       };
       return new cuCharts(ctn, data, opts);