From 04aefef9ab966e5293bc2f0490f2b00b6c20cdcb Mon Sep 17 00:00:00 2001 From: "gao.zhiyuan" Date: Thu, 27 Apr 2023 16:08:16 +0800 Subject: [PATCH] =?UTF-8?q?=E9=9A=9C=E7=A2=8D=E7=89=A9=E7=BB=98=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + .../src/sections/console/containers/index.js | 148 +++++++++++++++--- console/client/src/utils/webapi.js | 1 + 3 files changed, 129 insertions(+), 21 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4f6d764 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*development.txt diff --git a/console/client/src/sections/console/containers/index.js b/console/client/src/sections/console/containers/index.js index 4606434..17241bb 100644 --- a/console/client/src/sections/console/containers/index.js +++ b/console/client/src/sections/console/containers/index.js @@ -42,8 +42,10 @@ function calculateIntersection (cx, cy, d, angle) { return [intersection_x, intersection_y]; } -let ws; -let interval; +let dataLiveWs; +let lidarLiveWs; +let dataLiveWsInterval; +let lidarLiveWsInterval; function Index (props) { const { dispatch, craneData } = props const xyCvs = useRef() @@ -70,6 +72,7 @@ function Index (props) { const canvasHeight = canvasArea.clientHeight - 12 * 2 - 6 const canvasWidth = canvasArea.clientWidth / 14 * 10 - 12 * 2 const mainColor = "rgb(249,179,45)" + const dangerColor = "red" if (type == 'xy') { // xy 视图 const xyCtx = xyCvs.current.getContext("2d"); @@ -78,9 +81,20 @@ function Index (props) { const center = [canvasWidth / 2, canvasHeight / 2] // 直径 const diameter = Math.min(canvasWidth, canvasHeight) + // 半径 + const radius = diameter / 2 + console.log(radius); + // 参数半径和绘制半径的比值 + const radiusRate = (params.radius || radius) / radius + console.log(radiusRate); + // 当前旋转角度 + let curRotation = + params.from == 'lidarLive' ? + params?.rotation || 0 : + params?.rotation?.Value || 0; // 画圆 xyCtx.beginPath(); - xyCtx.arc(...center, diameter / 2, 0, 2 * Math.PI); + xyCtx.arc(...center, radius, 0, 2 * Math.PI); if (darkModde) { xyCtx.strokeStyle = darkColor.subTextColor; // xyCtx.fill(); @@ -93,21 +107,88 @@ function Index (props) { xyCtx.fillStyle = mainColor; xyCtx.fill(); xyCtx.stroke(); - // 吊臂 - let curRotation = params?.rotation?.Value || 42 + // 吊臂 - 长~ xyCtx.moveTo(...center); - xyCtx.lineTo(...calculateIntersection(...center, diameter, curRotation)); - // 配重臂 + xyCtx.lineTo( + ...calculateIntersection( + ...center, + ((params.boom || radius) / radiusRate) * 2, // 臂长 + curRotation + ) + ); + // 配重臂 - 尾巴 xyCtx.moveTo(...center); xyCtx.lineTo(...calculateIntersection(...center, diameter / 8, curRotation + 180)); xyCtx.strokeStyle = mainColor; xyCtx.stroke(); - // 索 + // 索 - 激光雷达 小点儿 xyCtx.beginPath(); - xyCtx.arc(...calculateIntersection(...center, 168, curRotation), diameter / 48, 0, 2 * Math.PI); - xyCtx.fillStyle = mainColor; + xyCtx.arc( + ...calculateIntersection( + ...center, + (params.lidar / radiusRate) * 2, // 绘制的离圆心的距离 + curRotation + ), + diameter / 128, // 点的大小 + 0, + 2 * Math.PI + ); + xyCtx.fillStyle = dangerColor; xyCtx.fill(); xyCtx.stroke(); + // 障碍物 + // 测试数据 + // params.blocks = [ + // [ + // { + // "X": 324, + // "Y": 231 + // }, + // { + // "X": 654, + // "Y": 234 + // }, + // { + // "X": 453, + // "Y": 231 + // }, + // { + // "X": 452, + // "Y": 34 + // }, + // { + // "X": 453, + // "Y": 34 + // }, + // { + // "X": 45, + // "Y": 67 + // } + // ] + // ] + if (params.blocks && params.blocks.length) { + for (let block of params.blocks) { + if (block && block.length) { + for (let i = 0; i < block.length; i++) { + let point = block[i] + const x = point.X / radiusRate + center[0]; + const y = point.Y / radiusRate + center[1]; + if (i == 0) { + xyCtx.beginPath(); + xyCtx.moveTo(x, y); + } else { + xyCtx.lineTo(x, y); + } + } + xyCtx.closePath(); + xyCtx.lineWidth = 1; + xyCtx.strokeStyle = dangerColor; + xyCtx.fillStyle = dangerColor; + xyCtx.fill(); + xyCtx.stroke(); + } + } + } } if (type == 'xz') { // xz 视图 @@ -442,24 +523,45 @@ function Index (props) { dispatch(getCrane()) // + const root = window.FS_API_ROOT - ws = new WebSocket(`${root.replace('http', 'ws')}/${ApiTable.dataLive}`); //建立websocket连接 - ws.onopen = function (e) { - interval = setInterval(() => { + + dataLiveWs = new WebSocket(`${root.replace('http', 'ws')}/${ApiTable.dataLive}`); //建立websocket连接 + dataLiveWs.onopen = function (e) { + dataLiveWsInterval = setInterval(() => { // console.log("发送心跳保持长连接不超时断开"); this.send(JSON.stringify({ "act": "long_live" })); }, 20000);//20秒一次 } - ws.onerror = e => { - console.log("websocket 发生错误:" + e) + dataLiveWs.onerror = e => { + console.log("websocket dataLiveWs 发生错误:" + e) } - ws.onmessage = evt => { + dataLiveWs.onmessage = evt => { let msg = JSON.parse(evt.data); if (msg) { setCraneParams(msg) - draw('xy', msg) - draw('xz', msg) + // draw('xy', msg) + // draw('xz', msg) + } + } + + lidarLiveWs = new WebSocket(`${root.replace('http', 'ws')}/${ApiTable.lidarLive}`); //建立websocket连接 + lidarLiveWs.onopen = function (e) { + lidarLiveWsInterval = setInterval(() => { + // console.log("发送心跳保持长连接不超时断开"); + this.send(JSON.stringify({ "act": "long_live" })); + }, 20000);//20秒一次 + } + lidarLiveWs.onerror = e => { + console.log("websocket lidarLiveWs 发生错误:" + e) + } + lidarLiveWs.onmessage = evt => { + let msg = JSON.parse(evt.data); + + if (msg) { + console.log(msg); + draw('xy', { ...msg, from: 'lidarLive' }) } } @@ -493,9 +595,13 @@ function Index (props) { }) return () => { - if (ws) { - ws.close();//关闭连接 - window.clearInterval(interval); + if (dataLiveWs) { + window.clearInterval(dataLiveWsInterval); + dataLiveWs.close();//关闭连接 + } + if (lidarLiveWs) { + window.clearInterval(lidarLiveWsInterval); + lidarLiveWs.close();//关闭连接 } } }, []) diff --git a/console/client/src/utils/webapi.js b/console/client/src/utils/webapi.js index fd7b446..65741b4 100644 --- a/console/client/src/utils/webapi.js +++ b/console/client/src/utils/webapi.js @@ -10,6 +10,7 @@ export const ApiTable = { dataLatest: 'v1/data/latest', craneSetting: 'v1/settings', dataLive: 'v1/data/live', + lidarLive: 'v1/lidar/live', videoGet: 'v1/video/get', logoutApp: 'v1/shutdown', };