task:大屏边坡连接线优化

src/views/Screen/index.vue

@@ -1113,154 +1113,91 @@ export default {
             })
           }
 
-          // 在边坡两个水位值之间连红线
+          // 连接所有水位值，只在首尾延长
           var deviceCoords = this.options.deviceCoords || []
+
+          // 按X坐标从左到右排序（因为设备X坐标是 endX - device.x 计算的，可能需要排序）
+          deviceCoords.sort(function(a, b) {
+            return a.x - b.x
+          })
+
+          console.log('排序后的设备坐标:', deviceCoords.map(d => ({ x: d.x, y: d.y })))
+
           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]
 
-              // 检查水位线是否在边坡线上方或外部，如果是则跳过延伸线绘制
-              if (this.options.enableBoundaryLimit && this.bianpoLinePoinArr.length > 0) {
-                var isAboveSlope = this.checkIfWaterLineAboveSlope(currentDevice, nextDevice)
-
-                // 额外检查：计算延伸线是否会超出边坡范围
-                var slopeStartX = this.bianpoLinePoinArr[0].x
-                var slopeEndX = this.bianpoLinePoinArr[this.bianpoLinePoinArr.length - 1].x
-                var wouldExtendOutside = false
-
-                // 计算延伸后的坐标
-                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 testStartX = currentDevice.x - unitX * extensionLength
-                var testEndX = nextDevice.x + unitX * extensionLength
-
-                // 检查延伸后是否超出边坡X范围
-                if (testStartX < slopeStartX || testEndX > slopeEndX) {
-                  wouldExtendOutside = true
-                }
-
-                // 检查延伸后是否超出图表的X轴和Y轴边界
-                var testStartY = currentDevice.y - unitY * extensionLength
-                var testEndY = nextDevice.y + unitY * extensionLength
-
-                // 获取图表边界
-                var chartMinX = this.options.initX
-                var chartMaxX = this.options.endX
-                var chartMinY = this.options.initY
-                var chartMaxY = this.options.endY
-
-                // 检查是否超出图表边界
-                if (testStartX < chartMinX || testStartX > chartMaxX ||
-                    testEndX < chartMinX || testEndX > chartMaxX ||
-                    testStartY < chartMinY || testStartY > chartMaxY ||
-                    testEndY < chartMinY || testEndY > chartMaxY) {
-                  wouldExtendOutside = true
-                  console.log('延伸线会超出图表边界')
-                }
-
-                if (isAboveSlope || wouldExtendOutside) {
-                  console.log('水位线在边坡上方或延伸会超出范围，跳过延伸线绘制')
               // 只绘制设备之间的连线，不延伸
               this.drawLiner({
                 sx: currentDevice.x,
                 sy: currentDevice.y,
                 ex: nextDevice.x,
                 ey: nextDevice.y,
-                    width: 1,
+                width: 2,
                 color: 'blue'
               })
-                  continue
-                }
             }
 
-              // 计算线段的方向向量
-              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
+            // 只在第一个和最后一个水位值点处理延伸线
+            var firstDevice = deviceCoords[0]
+            var lastDevice = deviceCoords[deviceCoords.length - 1]
+            var secondDevice = deviceCoords[1]
+            var secondLastDevice = deviceCoords[deviceCoords.length - 2]
 
-              // 限制延伸线不超出图表的X轴和Y轴边界
             var chartMinX = this.options.initX
             var chartMaxX = this.options.endX
             var chartMinY = this.options.initY
             var chartMaxY = this.options.endY
+            var shrinkDistance = 10 * this.dpr
+
+            // 处理第一个点的左侧延伸线
+            // 判断：如果第一个和第二个X坐标相同，则不绘制延伸线
+            if (firstDevice && secondDevice && Math.abs(firstDevice.x - secondDevice.x) > 1) {
+              var dx1 = secondDevice.x - firstDevice.x
+              var dy1 = secondDevice.y - firstDevice.y
+              var length1 = Math.sqrt(dx1 * dx1 + dy1 * dy1)
+              var unitX1 = dx1 / length1
+              var unitY1 = dy1 / length1
+
+              var startX = firstDevice.x - unitX1 * extensionLength
+              var startY = firstDevice.y - unitY1 * extensionLength
 
               // 限制起点坐标
               startX = Math.max(chartMinX, Math.min(chartMaxX, startX))
               startY = Math.max(chartMinY, Math.min(chartMaxY, startY))
 
-              // 限制终点坐标
-              endX = Math.max(chartMinX, Math.min(chartMaxX, endX))
-              endY = Math.max(chartMinY, Math.min(chartMaxY, endY))
-
-              // 如果启用边界限制，找到延伸线与边坡线的交点，在交点处停止
+              // 如果启用边界限制，找到延伸线与边坡线的交点
               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 // 边坡线段
+                    firstDevice.x, firstDevice.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)
+                    var closestDist = Math.abs(closest.x - firstDevice.x)
+                    var currentDist = Math.abs(current.x - firstDevice.x)
                     return currentDist < closestDist ? current : closest
                   })
-
-                  // 计算从交点到设备的方向向量
-                  var leftDx = currentDevice.x - closestLeft.x
-                  var leftDy = currentDevice.y - closestLeft.y
+                  var leftDx = firstDevice.x - closestLeft.x
+                  var leftDy = firstDevice.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 {
@@ -1268,27 +1205,62 @@ export default {
                     startY = closestLeft.y
                   }
                 }
+              }
+
+              // 绘制第一个点的左侧延伸线
+              this.drawLiner({
+                sx: startX,
+                sy: startY,
+                ex: firstDevice.x,
+                ey: firstDevice.y,
+                width: 2,
+                color: 'blue'
+              })
+            }
+
+            // 处理最后一个点的右侧延伸线
+            // 判断：如果最后一个和倍数第二个X坐标相同，则不绘制延伸线
+            if (lastDevice && secondLastDevice && Math.abs(lastDevice.x - secondLastDevice.x) > 1) {
+              var dx2 = lastDevice.x - secondLastDevice.x
+              var dy2 = lastDevice.y - secondLastDevice.y
+              var length2 = Math.sqrt(dx2 * dx2 + dy2 * dy2)
+              var unitX2 = dx2 / length2
+              var unitY2 = dy2 / length2
+
+              var endX = lastDevice.x + unitX2 * extensionLength
+              var endY = lastDevice.y + unitY2 * extensionLength
+
+              // 限制终点坐标
+              endX = Math.max(chartMinX, Math.min(chartMaxX, endX))
+              endY = Math.max(chartMinY, Math.min(chartMaxY, endY))
+
+              // 如果启用边界限制，找到延伸线与边坡线的交点
+              if (this.options.enableBoundaryLimit && this.bianpoLinePoinArr.length > 0) {
+                var rightIntersections = []
+                for (var j = 0; j < this.bianpoLinePoinArr.length - 1; j++) {
+                  var slopePoint1 = this.bianpoLinePoinArr[j]
+                  var slopePoint2 = this.bianpoLinePoinArr[j + 1]
+                  var rightIntersection = this.getLineIntersection(
+                    lastDevice.x, lastDevice.y, endX, endY,
+                    slopePoint1.x, slopePoint1.y, slopePoint2.x, slopePoint2.y
+                  )
+                  if (rightIntersection) {
+                    rightIntersections.push(rightIntersection)
+                  }
+                }
 
-                // 如果右侧延伸线与边坡线有交点，使用最近的交点并往里缩
                 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)
+                    var closestDist = Math.abs(closest.x - lastDevice.x)
+                    var currentDist = Math.abs(current.x - lastDevice.x)
                     return currentDist < closestDist ? current : closest
                   })
-
-                  // 计算从交点到设备的方向向量
-                  var rightDx = nextDevice.x - closestRight.x
-                  var rightDy = nextDevice.y - closestRight.y
+                  var rightDx = lastDevice.x - closestRight.x
+                  var rightDy = lastDevice.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 {
@@ -1298,13 +1270,13 @@ export default {
                 }
               }
 
-              // 连接相邻两个设备的水位值位置，并延伸
+              // 绘制最后一个点的右侧延伸线
               this.drawLiner({
-                sx: startX,
-                sy: startY,
+                sx: lastDevice.x,
+                sy: lastDevice.y,
                 ex: endX,
                 ey: endY,
-                width: 1,
+                width: 2,
                 color: 'blue'
               })
             }