Skip to content

V
V3-TailingPond
Commit 458028f2 authored by sxl's avatar sxl 💬
Browse files
Options

add:去掉报警线，在水位连一条线

parent d78199a3
Hide whitespace changes
Inline Side-by-side
Showing with 323 additions and 301 deletions
src/views/Screen/index.vue
View file @ 458028f2
......@@ -91,12 +91,12 @@ export default {
b2_a1: [],
b2a_2b: [],
b2_a3: [],
views: [],
views: []
},
title: '',
// 原有数据保持不变
showUnListModal: false, // 控制模态框显示
currentUnList: [], // 当前离线设备列表
currentUnList: [] // 当前离线设备列表
}
},
mounted() {
......@@ -110,17 +110,17 @@ export default {
var nowTimeEl = this.$el.querySelector('#nowTime')
var Loop1 = qf.Async.intervalLoop(
1000,
function () {
function() {
var dateTime = Tools.Dates.format('yyyy年MM月dd日 HH:mm:ss')
dateTime = dateTime.replace(/年|月|日/g, function (a) {
dateTime = dateTime.replace(/年|月|日/g, function(a) {
return '<span>' + a + '</span>'
})
nowTimeEl.innerHTML = dateTime
// Loop1.clear();
},
function () {
function() {
var dateTime = Tools.Dates.format('yyyy年MM月dd日 HH:mm:ss')
dateTime = dateTime.replace(/年|月|日/g, function (a) {
dateTime = dateTime.replace(/年|月|日/g, function(a) {
return '<span>' + a + '</span>'
})
nowTimeEl.innerHTML = dateTime
......@@ -128,7 +128,7 @@ export default {
)
qf(
function () {
function() {
this.initData()
}.bind(this)
)
......@@ -140,13 +140,13 @@ export default {
qf.Async.loopList.call(
this,
list,
function (key, item, next) {
function(key, item, next) {
var alarmDict = [
'',
{ name: '红色报警', color: 'red' },
{ name: '橙色报警', color: 'orange' },
{ name: '黄色报警', color: '#FFC900' },
{ name: '蓝色报警', color: 'blue' },
{ name: '蓝色报警', color: 'blue' }
]
var alarmItem = alarmDict[item.alarmlevel]
var name = item.equipname
......@@ -172,12 +172,12 @@ export default {
')</div><div>时间：' +
item.time +
divStr,
onClose: function (v) {
setTimeout(function () {
onClose: function(v) {
setTimeout(function() {
next()
}, ~~(1 + Math.random() * 3) * 1000)
},
onClick: function (tag) {
onClick: function(tag) {
if (tag.nodeName === 'BUTTON') {
var self = this
var id = tag.dataset.id
......@@ -186,11 +186,11 @@ export default {
Notify.pause()
that.openRelieveAlarm(
{ equipno: item.equipno },
function () {
function() {
Notify.close(true)
reqAlarmsPopup()
},
function () {
function() {
Notify.recover()
}
)
......@@ -203,7 +203,7 @@ export default {
closeBtnColor: '#eee',
width: '350px',
html: '点击确认后，该条数据仍会处于报警状态，但是不会再提示，您确认要这么做吗？',
confirm: function (el) {
confirm: function(el) {
var parm = { id: item.id }
that.pageApi.alterAbnormal('put', parm).then(res => {
if (res.code === 200) {
......@@ -211,9 +211,9 @@ export default {
}
})
},
close: function () {
close: function() {
Notify.recover()
},
}
})
} else if (id === '2') {
// 不再提示
......@@ -221,11 +221,11 @@ export default {
Notify.close()
}
}
},
}
})
},
function () {
setTimeout(function () {
function() {
setTimeout(function() {
reqAlarmsPopup()
}, 15000)
}
......@@ -248,7 +248,7 @@ export default {
// onload
this.$nextTick(() => {
new qf.Async.intervalLoop(600000, function () {
new qf.Async.intervalLoop(600000, function() {
// 加载数据
self.loadViewData(self.area.views)
})
......@@ -285,13 +285,13 @@ export default {
Tools.asyncLoop.call(
this,
panels,
function (key, panel, next) {
function(key, panel, next) {
var item = panel.item
var param = {
range: item.range,
subitem: item.subitem,
values: item.values,
deviceid: item.deviceid,
deviceid: item.deviceid
}
var type = panel.type
if (type === 't_1') {
......@@ -299,7 +299,7 @@ export default {
reqApi.common.requstEdge('get', item.requrl, param).then(res => {
var data = res.body || {}
var opts = {
chartConfig: {},
chartConfig: {}
}
Highchart.template.high(panel.el, data, opts)
})
......@@ -313,10 +313,10 @@ export default {
column: {
grouping: false,
shadow: false,
borderWidth: 0,
},
},
},
borderWidth: 0
}
}
}
}
Highchart.template.high(panel.el, data, opts)
})
......@@ -328,11 +328,11 @@ export default {
chartConfig: {
xAxis: {
labels: {
rotation: 0, // 设置轴标签旋转角度
},
},
rotation: 0 // 设置轴标签旋转角度
}
}
},
warningLine: 'double',
warningLine: 'double'
}
Highchart.template.high(panel.el, data, opts)
})
......@@ -346,10 +346,10 @@ export default {
chart: {
type: chartType,
borderWidth: 0,
marginLeft: 55,
},
marginLeft: 55
}
},
warningLine: 'double',
warningLine: 'double'
}
Highchart.template.high(panel.el, data, opts)
})
......@@ -362,8 +362,8 @@ export default {
chart: { type: 'bar', marginLeft: 55 },
xAxis: {
labels: {
rotation: 0, // 设置轴标签旋转角度
},
rotation: 0 // 设置轴标签旋转角度
}
},
/*
plotOptions: {
......@@ -372,12 +372,12 @@ export default {
}
}, */
tooltip: {
formatter: function () {
formatter: function() {
return this.series.name + '：' + this.key + '<br/>' + Math.abs(this.y) + ' 米'
},
},
}
}
},
callback: function (key, extend, give) {
callback: function(key, extend, give) {
if (key === 'series' && give[key].constructor.name === 'Array') {
var mobj = extend[key]
var asobj = give[key]
......@@ -388,7 +388,7 @@ export default {
arr[i] = 0 - val
}
}
},
}
}
Highchart.template.high(panel.el, data, opts)
})
......@@ -401,19 +401,19 @@ export default {
xAxis: [
{
labels: {
rotation: -25, // 设置轴标签旋转角度
},
},
rotation: -25 // 设置轴标签旋转角度
}
}
],
series: [
{
type: 'column',
color: '#1DF7F9',
borderRadius: '.05rem',
borderRadius: '.05rem'
},
{ type: 'column', color: '#FAE728', borderRadius: '.05rem' },
],
},
{ type: 'column', color: '#FAE728', borderRadius: '.05rem' }
]
}
}
Highchart.template.high(panel.el, data, opts)
})
......@@ -432,20 +432,20 @@ export default {
alpha: 10,
beta: 5, // 左右
depth: 50,
viewDistance: 0,
},
viewDistance: 0
}
},
plotOptions: {
series: {
depth: 25,
depth: 25
// colorByPoint: true
},
}
},
series: [
{ type: 'column', color: '#00B2FC', showInLegend: false },
{ type: 'column', color: '#00B2FC', showInLegend: false }
// {type:'spline', color:'#FBC000', showInLegend:false, dashStyle:'Dash', lineWidth:1,}
],
},
]
}
}
Highchart.template.high(panel.el, data, opts)
})
......@@ -459,53 +459,53 @@ export default {
svalue: '12.00',
time: 1723248388000,
sensroname: '气象站东PM25',
sensorid: '37068520080801',
sensorid: '37068520080801'
},
{
unit: 'ug/m³',
svalue: '12.00',
time: 1723248388000,
sensroname: '气象站东PM10',
sensorid: '37068520080802',
sensorid: '37068520080802'
},
{
unit: 'db',
svalue: '52.20',
time: 1723248389000,
sensroname: '气象站东噪音',
sensorid: '37068520080803',
sensorid: '37068520080803'
},
{
unit: '℃',
svalue: '29.25',
time: 1723248390000,
sensroname: '气象站东温度',
sensorid: '37068520080804',
sensorid: '37068520080804'
},
{
unit: '%RH',
svalue: '82.81',
time: 1723248391000,
sensroname: '气象站东湿度',
sensorid: '37068520080805',
sensorid: '37068520080805'
},
{
unit: 'm/s',
svalue: '2.80',
time: 1723248393000,
sensroname: '气象站东风速',
sensorid: '37068520080807',
sensorid: '37068520080807'
},
{
unit: '',
svalue: '西南',
time: 1723248392000,
sensroname: '气象站东风向',
sensorid: '37068520080808',
},
sensorid: '37068520080808'
}
],
code: 200,
msg: '操作成功',
msg: '操作成功'
}
var types = ['PM25', 'PM10', '噪音', '温度', '湿度', '风速', '风向']
......@@ -524,7 +524,7 @@ export default {
var div = document.createElement('div')
// 2024/8/10(周六) 为了缩减设备名称, 类型名称过长超出边界，添加对类型过滤
var name = types.find(function (val, i) {
var name = types.find(function(val, i) {
if (item.sensroname.includes(val)) {
return 1
}
......@@ -551,10 +551,10 @@ export default {
var opts = {
chartConfig: {
series: [
{ type: 'column', color: '#00B2FC' },
{ type: 'column', color: '#00B2FC' }
// {type:'spline', color:'#FBC000', dashStyle:'ShortDot',}
],
},
]
}
}
Highchart.template.high(panel.el, data, opts)
})
......@@ -576,7 +576,7 @@ export default {
chart: {
backgroundColor: 'transparent',
marginBottom: null,
marginLeft: null,
marginLeft: null
},
title: {
floating: true,
......@@ -585,13 +585,13 @@ export default {
y: 22,
floating: true,
style: {
color: '#00f6ff',
},
color: '#00f6ff'
}
},
tooltip: {
formatter: function (e) {
formatter: function(e) {
return this.key + '：' + this.y
},
}
},
plotOptions: {
pie: {
......@@ -605,10 +605,10 @@ export default {
distance: 10,
format: '<b>{point.name}</b>: {point.y}',
style: {
color: 'black',
},
},
},
color: 'black'
}
}
}
},
series: [
{
......@@ -617,13 +617,13 @@ export default {
name: '设备数量',
data: [
{ name: '在线', y: data.online, color: '#48abe1' },
{ name: '离线', y: data.unline, color: '#064f94' },
],
},
],
{ name: '离线', y: data.unline, color: '#064f94' }
]
}
]
},
isSeriesData: true,
type: item.type,
type: item.type
}
Highchart.template.high(panel.el, data, opts)
})
......@@ -643,7 +643,7 @@ export default {
name: item.name + ' ' + kitem.name,
value: data[kitem.key],
unit: item.eqdanwei,
time: time,
time: time
})
}
}
......@@ -708,7 +708,7 @@ export default {
var param = { c: 'code', a: 'getcode', id: 48, icon: 1, py: city }
reqApi.getWeather(param).then(res => {
var body = document.createElement('div')
setTimeout(function () {
setTimeout(function() {
body.innerHTML = res
var styles = body.querySelectorAll('link')
for (var style of styles) {
......@@ -750,7 +750,7 @@ export default {
appSecret: data.v_appsecret,
name: data.v_name,
channel: data.v_channel,
remark: data.v_remark,
remark: data.v_remark
}
panel.setData(vparam)
})
......@@ -778,10 +778,10 @@ export default {
column: {
grouping: false,
shadow: false,
borderWidth: 0,
},
},
},
borderWidth: 0
}
}
}
}
Highchart.template.high(panel.el, data, opts)
})
......@@ -791,13 +791,13 @@ export default {
var data = res.body || {}
this.cuCharts(panel.el, data, {
axisLineWidth: 2,
axisColor: 'pink',
axisColor: 'pink'
})
})
}
next()
},
function () {}
function() {}
)
},
// 新增：为 t_10 类下最后一个 li 添加点击事件
......@@ -850,7 +850,7 @@ export default {
},
cuCharts(ctn, data, opts) {
//
var cuCharts = function (ctn, data, opts) {
var cuCharts = function(ctn, data, opts) {
var ctn = (this.ctn = typeof element === 'string' ? document.getElementById(ctn) : ctn)
if (!ctn) return console.log('%c cuCharts Error Element is a invalid param! ', 'color:red')
var self = this
......@@ -869,7 +869,7 @@ export default {
damWidth: data.dissect.width || 100,
axisLineWidth: 6,
axisColor: 'red',
margin: { top: 14, right: 0, bottom: 0, left: 18 },
margin: { top: 14, right: 0, bottom: 0, left: 18 }
})
var left = defaults.margin.left * this.dpr
var top = defaults.margin.top * this.dpr
......@@ -889,20 +889,20 @@ export default {
rightDist: defaults.margin.right * dpr,
waterArea: {
startAngle: data.dissect.sdeg,
radius: data.dissect.diameter,
radius: data.dissect.diameter
},
alarm: data.alarm,
axisLineWidth: opts.axisLineWidth || defaults.axisLineWidth,
axisColor: opts.axisColor || defaults.axisColor,
axisColor: opts.axisColor || defaults.axisColor
}
this.init()
}
cuCharts.prototype = {
init: function () {
init: function() {
this.setModule()
this.onresize()
},
drawAxis: function (color, damHeight) {
drawAxis: function(color, damHeight) {
var lw = this.options.axisLineWidth
var wHalf = lw / 2
var initX = this.options.initX
......@@ -917,7 +917,7 @@ export default {
ex: axisYSX,
ey: axisXEY,
width: lw,
color: color,
color: color
})
var fontY = ~~(this.options.damPxHeight / 2 + this.options.initY)
var fontSize = 12
......@@ -930,7 +930,7 @@ export default {
text: axisXText,
color: '#fff',
align: 'center',
vertical: 'center',
vertical: 'center'
})
this.drawLiner({
sx: initX,
......@@ -938,10 +938,10 @@ export default {
ex: endX,
ey: axisYEY,
width: lw,
color: color,
color: color
})
},
drawSteps: function (ladders) {
drawSteps: function(ladders) {
// 初始化边坡线采样点数组
this.bianpoLinePoinArr = []
......@@ -994,7 +994,7 @@ export default {
ex: fEndX,
ey: cumulationY,
width: 2,
color: '#8b8b8b',
color: '#8b8b8b'
})
// 新增：生成10个采样点并添加到边坡线数组（平坡）
const stepPoints1 = this.getSampledPoints(cumulationX, cumulationY, fEndX, cumulationY, 20)
......@@ -1006,7 +1006,7 @@ export default {
ex: lEndX,
ey: lEndY,
width: 2,
color: '#8b8b8b',
color: '#8b8b8b'
})
// 新增：生成10个采样点并添加到边坡线数组（平坡间过渡连接线）
......@@ -1022,7 +1022,7 @@ export default {
slope: slope,
slopeX: lEndX,
slopeY: lEndY,
xy: aCoord.xy,
xy: aCoord.xy
}
cumulationX = lEndX
cumulationY = lEndY
......@@ -1033,7 +1033,7 @@ export default {
ex: damLength,
ey: damDepth,
width: 2,
color: '#8b8b8b',
color: '#8b8b8b'
})
// 新增：生成10个采样点并添加到边坡线数组（最后平坡收尾线）
......@@ -1046,7 +1046,7 @@ export default {
var damHeight = (cumulationY - this.options.initY) / pxRetioY
return (maxStepDepth.damHeight = damHeight), maxStepDepth
},
drawDevice: function (list) {
drawDevice: function(list) {
var lineW = 4 * this.dpr
var deviceW = 6 * this.dpr
var deviceH = 3 * this.dpr
......@@ -1069,7 +1069,7 @@ export default {
size: fontSize,
text: depthText,
color: 'red',
align: 'center',
align: 'center'
})
var holeEndY = ladderSY + holeDistY
holeEndY = holeEndY > endY ? endY : holeEndY
......@@ -1079,7 +1079,7 @@ export default {
ex: holeX,
ey: holeEndY,
width: lineW,
color: 'grey',
color: 'grey'
})
var deviceLY = ladderSY + deviceY
var deviceEY = deviceLY + deviceH / 2
......@@ -1090,12 +1090,12 @@ export default {
ex: holeX,
ey: deviceEY,
width: deviceW,
color: '#3403CB',
color: '#3403CB'
})
this.options.deviceCoords.push({
x: holeX,
y: deviceLY,
stepY: ladderSY,
stepY: ladderSY
})
var valFont = 11
var valueSY = ~~(deviceSY - valFont * this.dpr - 6)
......@@ -1106,180 +1106,202 @@ export default {
size: valFont,
text: text,
color: 'white',
align: 'center',
align: 'center'
})
}
},
drawAlarmLine: function (alarms, Steps) {
var alarmValues = alarms.value
var alarmLevel = alarms.alarmLevel
var deviceCoords = this.options.deviceCoords || []
var deviceSX = deviceCoords[0].x
var deviceSY = deviceCoords[0].y
var initX = this.options.initX
var initY = this.options.initY
var endY = this.options.endY
var endX = this.options.endX
var alarmLevelNum = ['red', 'orange', 'yellow', 'blue'] || Object.keys(alarmValues)
var alarmLine = {}
// 显示所有报警线，而不是只显示当前级别和相邻级别
for (var i = 0; i < alarmLevelNum.length; i++) {
var levelColor = alarmLevelNum[i]
if (alarmValues[levelColor]) {
alarmLine[levelColor] = alarmValues[levelColor]
}
}
var alarmRealParam = this.getAlarmRealParam(Object.values(alarmLine)) || Steps.ratio
var deviceSlopeRatio = alarmRealParam.ratio
// 定义报警线样式配置
var alarmLineStyles = {
red: { width: 3, dashPattern: [] }, // 实线，较粗
orange: { width: 2, dashPattern: [5, 5] }, // 虚线
yellow: { width: 2, dashPattern: [2, 3] }, // 点线
blue: { width: 2, dashPattern: [8, 3, 2, 3] }, // 点划线
}
console.log('alarmLine对象:', alarmLine)
console.log('alarmValues对象:', alarmValues)
// 清除之前绘制的报警线（如果有的话）
// this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
for (var key in alarmLine) {
var value = alarmValues[key]
console.log(`处理报警线: ${key}, 值: ${value}`)
if (key && value) {
var ladderSY = this.xPixelToStepsYPixel(deviceSX) - initX + 6
var lineSY = value * this.options.pxRetioY + ladderSY - (deviceSX - initX) * deviceSlopeRatio
var lineEX = (endY - lineSY) / deviceSlopeRatio
// 获取当前报警线的样式配置
var lineStyle = alarmLineStyles[key] || { width: 2, dashPattern: [] }
/**
* 新增逻辑处理绘制警戒线，超过边坡外的则不显示
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 })
})
// 获取边坡线的X坐标范围
const slopeStartX = this.bianpoLinePoinArr[0].x
const slopeEndX = this.bianpoLinePoinArr[this.bianpoLinePoinArr.length - 1].x
// 报警线的原始坐标
const originalStartX = startPoint.x
const originalEndX = endPoint.x
const originalStartY = startPoint.y
const originalEndY = endPoint.y
// 计算报警线的斜率
const slope = (originalEndY - originalStartY) / (originalEndX - originalStartX)
// 找到报警线与边坡线的所有交点
const allIntersections = []
// 遍历边坡线的每个线段，找到与报警线的交点
for (let i = 0; i < this.bianpoLinePoinArr.length - 1; i++) {
const slopePoint1 = this.bianpoLinePoinArr[i]
const slopePoint2 = this.bianpoLinePoinArr[i + 1]
// 计算报警线与当前边坡线段的交点
const intersection = this.getLineIntersection(
originalStartX,
originalStartY,
originalEndX,
originalEndY, // 报警线
slopePoint1.x,
slopePoint1.y,
slopePoint2.x,
slopePoint2.y // 边坡线段
)
if (intersection) {
allIntersections.push(intersection)
console.log(`${key}报警线找到交点:`, intersection.x, intersection.y, '在边坡线段', i)
}
}
// 使用最左和最右的交点作为截取点
let intersectionStartX = originalStartX
let intersectionStartY = originalStartY
let intersectionEndX = originalEndX
let intersectionEndY = originalEndY
if (allIntersections.length > 0) {
// 按X坐标排序
allIntersections.sort((a, b) => a.x - b.x)
// 使用最左边的交点作为起点
intersectionStartX = allIntersections[0].x
intersectionStartY = allIntersections[0].y
console.log(`${key}报警线新起点:`, intersectionStartX, intersectionStartY)
// 使用最右边的交点作为终点
const lastIntersection = allIntersections[allIntersections.length - 1]
intersectionEndX = lastIntersection.x
intersectionEndY = lastIntersection.y
console.log(`${key}报警线新终点:`, intersectionEndX, intersectionEndY)
} else {
console.log(`${key}报警线未找到交点，使用原始范围`)
}
// 在边坡两个水位值之间连红线
var deviceCoords = this.options.deviceCoords || []
if (deviceCoords.length >= 2) {
for (var i = 0; i < deviceCoords.length - 1; i++) {
var currentDevice = deviceCoords[i]
var nextDevice = deviceCoords[i + 1]
// 绘制调整后的报警线
// 连接相邻两个设备的水位值位置
this.drawLiner({
sx: intersectionStartX,
sy: intersectionStartY,
ex: intersectionEndX,
ey: intersectionEndY,
width: 2,
color: key,
sx: currentDevice.x,
sy: currentDevice.y,
ex: nextDevice.x,
ey: nextDevice.y,
width: 1,
color: 'blue'
})
console.log(`${key}报警线绘制成功 - 交点范围: ${intersectionStartX} to ${intersectionEndX}`)
console.log(`${key}报警线分段绘制完成 - 边坡范围: ${slopeStartX} to ${slopeEndX}`)
console.log(`${key}报警线原始范围: ${originalStartX} to ${originalEndX}`)
console.log('警戒线的值point', JSON.stringify(this.jingjieLinePointArr))
console.log('边坡X范围:', slopeStartX, 'to', slopeEndX)
console.log('报警线X范围:', originalStartX, 'to', originalEndX)
// this.drawLiner({
// sx: initX,
// sy: lineSY + initY,
// ex: lineEX,
// ey: endY,
// width: 2,
// color: key
// });
}
}
},
getCirHeightDev: function (r, x) {
drawAlarmLine: function(alarms, Steps) {
// 隐藏报警线 - 直接返回，不绘制任何报警线
return
// var alarmValues = alarms.value
// var alarmLevel = alarms.alarmLevel
// var deviceCoords = this.options.deviceCoords || []
// var deviceSX = deviceCoords[0].x
// var deviceSY = deviceCoords[0].y
// var initX = this.options.initX
// var initY = this.options.initY
// var endY = this.options.endY
// var endX = this.options.endX
// var alarmLevelNum = ['red', 'orange', 'yellow', 'blue'] || Object.keys(alarmValues)
// var alarmLine = {}
// // 显示所有报警线，而不是只显示当前级别和相邻级别
// for (var i = 0; i < alarmLevelNum.length; i++) {
// var levelColor = alarmLevelNum[i]
// if (alarmValues[levelColor]) {
// alarmLine[levelColor] = alarmValues[levelColor]
// }
// }
// var alarmRealParam = this.getAlarmRealParam(Object.values(alarmLine)) || Steps.ratio
// var deviceSlopeRatio = alarmRealParam.ratio
// // 定义报警线样式配置
// var alarmLineStyles = {
// red: { width: 3, dashPattern: [] }, // 实线，较粗
// orange: { width: 2, dashPattern: [5, 5] }, // 虚线
// yellow: { width: 2, dashPattern: [2, 3] }, // 点线
// blue: { width: 2, dashPattern: [8, 3, 2, 3] } // 点划线
// }
// console.log('alarmLine对象:', alarmLine)
// console.log('alarmValues对象:', alarmValues)
// // 清除之前绘制的报警线（如果有的话）
// // this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
// for (var key in alarmLine) {
// var value = alarmValues[key]
// console.log(`处理报警线: ${key}, 值: ${value}`)
// if (key && value) {
// var ladderSY = this.xPixelToStepsYPixel(deviceSX) - initX + 6
// var lineSY = value * this.options.pxRetioY + ladderSY - (deviceSX - initX) * deviceSlopeRatio
// var lineEX = (endY - lineSY) / deviceSlopeRatio
// // 获取当前报警线的样式配置
// var lineStyle = alarmLineStyles[key] || { width: 2, dashPattern: [] }
// /**
// * 新增逻辑处理绘制警戒线，超过边坡外的则不显示
// 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 })
// })
// // 获取边坡线的X坐标范围
// const slopeStartX = this.bianpoLinePoinArr[0].x
// const slopeEndX = this.bianpoLinePoinArr[this.bianpoLinePoinArr.length - 1].x
// // 报警线的原始坐标
// const originalStartX = startPoint.x
// const originalEndX = endPoint.x
// const originalStartY = startPoint.y
// const originalEndY = endPoint.y
// // 计算报警线的斜率
// const slope = (originalEndY - originalStartY) / (originalEndX - originalStartX)
// // 找到报警线与边坡线的所有交点
// const allIntersections = []
// // 遍历边坡线的每个线段，找到与报警线的交点
// for (let i = 0; i < this.bianpoLinePoinArr.length - 1; i++) {
// const slopePoint1 = this.bianpoLinePoinArr[i]
// const slopePoint2 = this.bianpoLinePoinArr[i + 1]
// // 计算报警线与当前边坡线段的交点
// const intersection = this.getLineIntersection(
// originalStartX,
// originalStartY,
// originalEndX,
// originalEndY, // 报警线
// slopePoint1.x,
// slopePoint1.y,
// slopePoint2.x,
// slopePoint2.y // 边坡线段
// )
// if (intersection) {
// allIntersections.push(intersection)
// console.log(`${key}报警线找到交点:`, intersection.x, intersection.y, '在边坡线段', i)
// }
// }
// // 使用最左和最右的交点作为截取点
// let intersectionStartX = originalStartX
// let intersectionStartY = originalStartY
// let intersectionEndX = originalEndX
// let intersectionEndY = originalEndY
// if (allIntersections.length > 0) {
// // 按X坐标排序
// allIntersections.sort((a, b) => a.x - b.x)
// // 使用最左边的交点作为起点
// intersectionStartX = allIntersections[0].x
// intersectionStartY = allIntersections[0].y
// console.log(`${key}报警线新起点:`, intersectionStartX, intersectionStartY)
// // 使用最右边的交点作为终点
// const lastIntersection = allIntersections[allIntersections.length - 1]
// intersectionEndX = lastIntersection.x
// intersectionEndY = lastIntersection.y
// console.log(`${key}报警线新终点:`, intersectionEndX, intersectionEndY)
// } else {
// console.log(`${key}报警线未找到交点，使用原始范围`)
// }
// // 绘制调整后的报警线
// this.drawLiner({
// sx: intersectionStartX,
// sy: intersectionStartY,
// ex: intersectionEndX,
// ey: intersectionEndY,
// width: 2,
// color: key
// })
// console.log(`${key}报警线绘制成功 - 交点范围: ${intersectionStartX} to ${intersectionEndX}`)
// console.log(`${key}报警线分段绘制完成 - 边坡范围: ${slopeStartX} to ${slopeEndX}`)
// console.log(`${key}报警线原始范围: ${originalStartX} to ${originalEndX}`)
// console.log('警戒线的值point', JSON.stringify(this.jingjieLinePointArr))
// console.log('边坡X范围:', slopeStartX, 'to', slopeEndX)
// console.log('报警线X范围:', originalStartX, 'to', originalEndX)
// // this.drawLiner({
// // sx: initX,
// // sy: lineSY + initY,
// // ex: lineEX,
// // ey: endY,
// // width: 2,
// // color: key
// // });
// }
// }
},
getCirHeightDev: function(r, x) {
return r - Math.sqrt(Math.pow(r, 2) - Math.pow(x, 2))
},
drawWaterArea: function (depth) {
drawWaterArea: function(depth) {
depth = 100
var startAngle = this.options.waterArea.startAngle
var radiusMultiple = this.options.waterArea.radius
......@@ -1311,7 +1333,7 @@ export default {
ctx.fillStyle = '#00A2E8'
ctx.fill()
},
byAngleAndHeightToCoord: function (angle, height) {
byAngleAndHeightToCoord: function(angle, height) {
var devX = Math.tan(angle * 0.017453293) * height
var xy = height / Math.cos(angle * 0.017453293)
var devY = height - devX
......@@ -1319,9 +1341,9 @@ export default {
var x = 0
var y = 0
if (angle > 50) {
;(x = height), (y = devY * yRatio)
(x = height), (y = devY * yRatio)
} else {
;(x = devX), (y = 0)
(x = devX), (y = 0)
}
return { x: x, y: y, xy: xy }
},
......@@ -1337,7 +1359,7 @@ export default {
var averageHeight = (damHeight - sum) / not
return { averageHeight: averageHeight, damHeight: damHeight }
},
setModule: function () {
setModule: function() {
this.ctx.clearRect(0, 0, this.SumWidth, this.SumHeight)
var canvas = this.canvas
var SumWidth = (this.SumWidth = this.ctn.clientWidth * this.dpr - this.ctn.clientLeft - 0)
......@@ -1367,7 +1389,7 @@ export default {
this.options['HWRation'] = (endY - top) / (endX - left)
this.drawChart()
},
formatDeviceParam: function (devices) {
formatDeviceParam: function(devices) {
var devices = devices || []
var arr = []
for (var item of devices) {
......@@ -1376,12 +1398,12 @@ export default {
holeDepth: item.jrx_trepanning,
value: item.depth,
depth: item.jrx_burial,
waterValue: item.stage,
waterValue: item.stage
})
}
return arr
},
getAlarmRealParam: function (aValues) {
getAlarmRealParam: function(aValues) {
var aval = aValues[0]
var coords = this.options.deviceCoords || []
var valY = aval * this.options.pxRetioY
......@@ -1396,7 +1418,7 @@ export default {
}
return { ratio: (ey - sy) / (ex - sx), sy: sy, ey: ey }
},
drawChart: function () {
drawChart: function() {
var Steps = this.drawSteps(this.ladders)
this.drawAxis(this.options.axisColor, Steps.damHeight)
var depth = 55
......@@ -1404,18 +1426,18 @@ export default {
this.drawDevice(this.devices)
this.drawAlarmLine(this.options.alarm, Steps)
},
onresize: function () {
onresize: function() {
qf.resize(() => {
this.setModule()
})
},
updateData: function (data) {
updateData: function(data) {
data = data || {}
this.stations = data.stations || this.stations
this.points = data.points || this.points
this.draw(this.cacheX + this.destX, true)
},
drawLiner: function (o) {
drawLiner: function(o) {
var ctx = this.ctx
ctx.beginPath()
ctx.moveTo(o.sx, o.sy)
......@@ -1425,7 +1447,7 @@ export default {
ctx.stroke()
},
// 计算两条线段的交点
getLineIntersection: function (x1, y1, x2, y2, x3, y3, x4, y4) {
getLineIntersection: function(x1, y1, x2, y2, x3, y3, x4, y4) {
const denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4)
if (Math.abs(denom) < 1e-10) {
return null // 平行线，无交点
......@@ -1438,13 +1460,13 @@ export default {
if (t >= 0 && t <= 1 && u >= 0 && u <= 1) {
return {
x: x1 + t * (x2 - x1),
y: y1 + t * (y2 - y1),
y: y1 + t * (y2 - y1)
}
}
return null // 无交点
},
drawText: function (o) {
drawText: function(o) {
var ctx = this.ctx
var fontSize = (o.size || 14) * this.dpr
var text = o.text || ''
......@@ -1493,18 +1515,18 @@ export default {
ctx.fillText(rows[b], ~~lsx + 0.5, y + ~~lsy + 0.5)
}
},
getTextWidth: function (text, fontSize) {
getTextWidth: function(text, fontSize) {
return (this.ctx.measureText(text).width / parseInt(this.ctx.font)) * fontSize
},
drawImg: function (img, x, y, w, h) {
drawImg: function(img, x, y, w, h) {
x = x - w / 2
y = y - h
ctx.drawImage(img, x, y, w, h)
},
getRandomColor: function () {
getRandomColor: function() {
return '#' + Math.floor(Math.random() * 16777215).toString(16)
},
getEventTarget: function (x, y) {
getEventTarget: function(x, y) {
if (y > bottomReferY - imgA.height - 1 && y < bottomReferY + 1) {
var arr = this.points
var i = arr.length - 1
......@@ -1532,7 +1554,7 @@ export default {
}
}
},
xPixelToStepsYPixel: function (x) {
xPixelToStepsYPixel: function(x) {
var ladders = this.Cache.ladders || []
var ladderSY = 0
for (var ladder of ladders) {
......@@ -1549,18 +1571,18 @@ export default {
return ladderSY
},
// 新增：生成线段采样点
getSampledPoints: function (sx, sy, ex, ey, numPoints) {
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),
y: sy + t * (ey - sy)
})
}
return points
},
}
}
return new cuCharts(ctn, data, opts)
},
......@@ -1574,7 +1596,7 @@ export default {
className: 'screenAlart',
closeBtnColor: '#eee',
html: '<div class="item"><span>解除时长(小时)：</span><input data-name="jchours" value=12 placeholder="请输入解除时长"/></div><div class="item"><span>报警原因：</span><input data-name="reason" placeholder="报警原因"/></div><div class="item"><span>解除报警原因：</span><input data-name="jcreason" placeholder="解除报警原因"/></div>',
confirm: function (el) {
confirm: function(el) {
var inputs = el.querySelectorAll('input')
for (var el of inputs) {
var key = el.dataset.name
......@@ -1593,12 +1615,12 @@ export default {
fn && fn()
})
},
close: function () {
close: function() {
close && close()
},
}
})
},
},
}
}
}
</script>
......
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