Skip to content

V
V3-TailingPond
Commit 61b11b3a authored by sxl's avatar sxl 💬
Browse files
Options

task:大屏边坡连接线优化

parent 142b4c12
Hide whitespace changes
Inline Side-by-side
Showing with 101 additions and 129 deletions
src/views/Screen/index.vue
View file @ 61b11b3a
......@@ -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,
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
// 只绘制设备之间的连线，不延伸
this.drawLiner({
sx: currentDevice.x,
sy: currentDevice.y,
ex: nextDevice.x,
ey: nextDevice.y,
width: 2,
color: 'blue'
})
}
// 限制延伸线不超出图表的X轴和Y轴边界
var chartMinX = this.options.initX
var chartMaxX = this.options.endX
var chartMinY = this.options.initY
var chartMaxY = this.options.endY
// 只在第一个和最后一个水位值点处理延伸线
var firstDevice = deviceCoords[0]
var lastDevice = deviceCoords[deviceCoords.length - 1]
var secondDevice = deviceCoords[1]
var secondLastDevice = deviceCoords[deviceCoords.length - 2]
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'
})
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment