add:水位线延生线

src/views/Screen/index.vue

@@ -792,6 +792,7 @@ export default {
               this.cuCharts(panel.el, data, {
                 axisLineWidth: 2,
                 axisColor: 'pink'
+                // 边界限制现在默认启用
               })
             })
           }
@@ -893,7 +894,8 @@ export default {
           },
           alarm: data.alarm,
           axisLineWidth: opts.axisLineWidth || defaults.axisLineWidth,
-          axisColor: opts.axisColor || defaults.axisColor
+          axisColor: opts.axisColor || defaults.axisColor,
+          enableBoundaryLimit: opts.enableBoundaryLimit !== false // 默认启用边界限制，除非明确设置为false
         }
         this.init()
       }
@@ -1113,16 +1115,123 @@ export default {
           // 在边坡两个水位值之间连红线
           var deviceCoords = this.options.deviceCoords || []
           if (deviceCoords.length >= 2) {
+            // 计算延伸距离（可以根据需要调整）
+            var extensionLength = 30 * this.dpr // 延伸30像素
+
             for (var i = 0; i < deviceCoords.length - 1; i++) {
               var currentDevice = deviceCoords[i]
               var nextDevice = deviceCoords[i + 1]
 
-              // 连接相邻两个设备的水位值位置
+              // 计算线段的方向向量
+              var dx = nextDevice.x - currentDevice.x
+              var dy = nextDevice.y - currentDevice.y
+              var length = Math.sqrt(dx * dx + dy * dy)
+
+              // 单位方向向量
+              var unitX = dx / length
+              var unitY = dy / length
+
+              // 计算延伸后的起点和终点
+              var startX = currentDevice.x - unitX * extensionLength
+              var startY = currentDevice.y - unitY * extensionLength
+              var endX = nextDevice.x + unitX * extensionLength
+              var endY = nextDevice.y + unitY * extensionLength
+
+              // 如果启用边界限制，找到延伸线与边坡线的交点，在交点处停止
+              if (this.options.enableBoundaryLimit && this.bianpoLinePoinArr.length > 0) {
+                // 找到左侧延伸线与边坡线的交点
+                var leftIntersections = []
+                var rightIntersections = []
+
+                for (var j = 0; j < this.bianpoLinePoinArr.length - 1; j++) {
+                  var slopePoint1 = this.bianpoLinePoinArr[j]
+                  var slopePoint2 = this.bianpoLinePoinArr[j + 1]
+
+                  // 检查左侧延伸线段与边坡线的交点
+                  var leftIntersection = this.getLineIntersection(
+                    currentDevice.x, currentDevice.y, startX, startY, // 左侧延伸线段
+                    slopePoint1.x, slopePoint1.y, slopePoint2.x, slopePoint2.y // 边坡线段
+                  )
+                  if (leftIntersection) {
+                    leftIntersections.push(leftIntersection)
+                  }
+
+                  // 检查右侧延伸线段与边坡线的交点
+                  var rightIntersection = this.getLineIntersection(
+                    nextDevice.x, nextDevice.y, endX, endY, // 右侧延伸线段
+                    slopePoint1.x, slopePoint1.y, slopePoint2.x, slopePoint2.y // 边坡线段
+                  )
+                  if (rightIntersection) {
+                    rightIntersections.push(rightIntersection)
+                  }
+                }
+
+                // 设置缩进距离（往里面缩一点）
+                var shrinkDistance = 10 * this.dpr // 缩进15像素
+
+                // 如果左侧延伸线与边坡线有交点，使用最近的交点并往里缩
+                if (leftIntersections.length > 0) {
+                  // 找到距离设备最近的交点
+                  var closestLeft = leftIntersections.reduce((closest, current) => {
+                    var closestDist = Math.abs(closest.x - currentDevice.x)
+                    var currentDist = Math.abs(current.x - currentDevice.x)
+                    return currentDist < closestDist ? current : closest
+                  })
+
+                  // 计算从交点到设备的方向向量
+                  var leftDx = currentDevice.x - closestLeft.x
+                  var leftDy = currentDevice.y - closestLeft.y
+                  var leftLength = Math.sqrt(leftDx * leftDx + leftDy * leftDy)
+
+                  if (leftLength > 0) {
+                    // 单位方向向量（指向设备方向）
+                    var leftUnitX = leftDx / leftLength
+                    var leftUnitY = leftDy / leftLength
+
+                    // 从交点往设备方向缩进
+                    startX = closestLeft.x + leftUnitX * shrinkDistance
+                    startY = closestLeft.y + leftUnitY * shrinkDistance
+                  } else {
+                    startX = closestLeft.x
+                    startY = closestLeft.y
+                  }
+                }
+
+                // 如果右侧延伸线与边坡线有交点，使用最近的交点并往里缩
+                if (rightIntersections.length > 0) {
+                  // 找到距离设备最近的交点
+                  var closestRight = rightIntersections.reduce((closest, current) => {
+                    var closestDist = Math.abs(closest.x - nextDevice.x)
+                    var currentDist = Math.abs(current.x - nextDevice.x)
+                    return currentDist < closestDist ? current : closest
+                  })
+
+                  // 计算从交点到设备的方向向量
+                  var rightDx = nextDevice.x - closestRight.x
+                  var rightDy = nextDevice.y - closestRight.y
+                  var rightLength = Math.sqrt(rightDx * rightDx + rightDy * rightDy)
+
+                  if (rightLength > 0) {
+                    // 单位方向向量（指向设备方向）
+                    var rightUnitX = rightDx / rightLength
+                    var rightUnitY = rightDy / rightLength
+
+                    // 从交点往设备方向缩进
+                    endX = closestRight.x + rightUnitX * shrinkDistance
+                    endY = closestRight.y + rightUnitY * shrinkDistance
+                  } else {
+                    endX = closestRight.x
+                    endY = closestRight.y
+                  }
+                }
+              }
+
+              // 连接相邻两个设备的水位值位置，并延伸
               this.drawLiner({
-                sx: currentDevice.x,
-                sy: currentDevice.y,
-                ex: nextDevice.x,
-                ey: nextDevice.y,
+                sx: startX,
+                sy: startY,
+                ex: endX,
+                ey: endY,
                 width: 1,
                 color: 'blue'
               })