gao.zhiyuan
/
CraneAntiCollision
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

WEBSOCKET 数据接入

master
巴林闲侠 2 years ago
parent
4005a7d181
commit
9791d90611
11 changed files with 1130 additions and 24325 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      console/client/assets/env.js
  2. 28
      console/client/src/sections/console/actions/index.js
  3. 157
      console/client/src/sections/console/containers/index.js
  4. 224
      console/client/src/sections/console/containers/setUp.js
  5. 4
      console/client/src/sections/console/nav-item.js
  6. 4
      console/client/src/utils/webapi.js
  7. 1
      console/config.js
  8. 77
      console/log/development.txt
  9. 24204
      console/package-lock.json
  10. 2
      console/package.json

2
console/client/assets/env.js
View File

@ -1 +1 @@
window.FS_API_ROOT = 'http://localhost:4600'
window.FS_API_ROOT = 'http://10.8.30.183:4100'

28
console/client/src/sections/console/actions/index.js
View File

@ -1,6 +1,32 @@
'use strict';
import { ApiTable } from '$utils'
import { Request, basicAction } from '@peace/utils'
export default {
export function editCrane (params) {
return dispatch => basicAction({
type: 'post',
data: params,
dispatch: dispatch,
actionType: 'EDIT_CRANE',
url: ApiTable.craneSetting,
msg: { option: '修改配置信息' },
});
}
export function getCrane (params) {
return dispatch => basicAction({
type: 'get',
query: params,
dispatch: dispatch,
actionType: 'GET_CRANE',
url: ApiTable.craneSetting,
msg: { error: '获取配置信息失败' },
reducer: { name: 'crane' }
});
}
export default {
editCrane,
getCrane,
}

157
console/client/src/sections/console/containers/index.js
View File

@ -1,10 +1,14 @@
import React, { useEffect, useState, useRef } from 'react'
import { push } from 'react-router-redux';
import { connect } from 'react-redux';
import request from 'superagent';
import { getCrane } from '../actions'
import { ApiTable } from '$utils'
import { Colors } from '@peace/utils'
import {
SettingOutlined
SettingOutlined, VideoCameraOutlined
} from '@ant-design/icons';
import { Col, Row, Button, Modal, Input } from 'antd';
import { Col, Row, Button, Modal, Input, Space } from 'antd';
import '../style.less'
function calculateIntersection (cx, cy, d, angle) {
@ -36,11 +40,13 @@ function calculateIntersection (cx, cy, d, angle) {
return [intersection_x, intersection_y];
}
let ws;
let interval;
function Index (props) {
const { dispatch } = props
const { dispatch, craneData } = props
const xyCvs = useRef()
const xzCvs = useRef()
const [craneParams, setCraneParams] = useState({})
const [darkModde] = useState(true)
const [darkColor] = useState({
background: '#1E1E1E',
@ -50,18 +56,19 @@ function Index (props) {
})
const [isModalOpen, setIsModalOpen] = useState(false);
useEffect(() => {
console.log(FS_API_ROOT, window.FS_API_ROOT);
const draw = (type, params = {}) => {
const canvasArea = document.getElementById('canvasArea')
const canvasHeight = canvasArea.clientHeight - 12 * 2 - 6
const canvasWidth = canvasArea.clientWidth - 12 * 2
const mainColor = "rgb(249,179,45)"
if (type == 'xy') {
// xy 视图
console.log(xyCvs, xyCvs.current, canvasHeight);
const xyCtx = xyCvs.current.getContext("2d");
xyCvs.current.height = canvasHeight
xyCvs.current.width = canvasWidth
const center = [canvasWidth / 2, canvasHeight / 2]
// 直径
const diameter = Math.min(canvasWidth, canvasHeight)
// 画圆
xyCtx.beginPath();
@ -73,25 +80,28 @@ function Index (props) {
xyCtx.stroke();
// 圆心圆
xyCtx.beginPath();
// 吊索位置
xyCtx.arc(...center, diameter / 48, 0, 2 * Math.PI);
xyCtx.fillStyle = mainColor;
xyCtx.fill();
xyCtx.stroke();
// 吊臂
let curRotation = params?.rotation?.Value || 42
xyCtx.moveTo(...center);
xyCtx.lineTo(...calculateIntersection(...center, diameter, 42));
xyCtx.lineTo(...calculateIntersection(...center, diameter, curRotation));
// 配重臂
xyCtx.moveTo(...center);
xyCtx.lineTo(...calculateIntersection(...center, diameter / 8, 42 + 180));
xyCtx.lineTo(...calculateIntersection(...center, diameter / 8, curRotation + 180));
xyCtx.strokeStyle = mainColor;
xyCtx.stroke();
// 索
xyCtx.beginPath();
xyCtx.arc(...calculateIntersection(...center, 168, 42), diameter / 48, 0, 2 * Math.PI);
xyCtx.arc(...calculateIntersection(...center, 168, curRotation), diameter / 48, 0, 2 * Math.PI);
xyCtx.fillStyle = mainColor;
xyCtx.fill();
xyCtx.stroke();
}
if (type == 'xz') {
// xz 视图
const xzCtx = xzCvs.current.getContext("2d");
xzCvs.current.height = canvasHeight
@ -411,6 +421,48 @@ function Index (props) {
// drawText('30.26米', 325, 35, "#01adec", '18px 微软雅黑', "left")
}
initCanvas()
}
}
useEffect(() => {
draw('xy')
draw('xz')
//
dispatch(getCrane())
//
ws = new WebSocket(`ws://10.8.30.183:4100/${ApiTable.dataLive}`); //建立websocket连接
ws.onopen = function (e) {
console.log("websocket 连接成功");
interval = setInterval(() => {
// console.log("发送心跳保持长连接不超时断开");
this.send(JSON.stringify({ "act": "ma_get_active_devices" }));
}, 20000);//20秒一次
}
ws.onerror = e => {
console.log("websocket 发生错误：" + e)
}
ws.onmessage = evt => {
let msg = JSON.parse(evt.data);
console.log(msg);
if (msg) {
setCraneParams(msg)
draw('xy', msg)
draw('xz', msg)
}
}
return () => {
if (ws) {
ws.close();//关闭连接
window.clearInterval(interval);
}
}
}, [])
console.log(darkColor, darkModde ? darkColor.textColor : 'auto');
@ -426,9 +478,14 @@ function Index (props) {
background: darkModde ? darkColor.background : 'auto'
}}>
<div style={{ padding: '0 8px 8px', textAlign: 'right' }}>
<Space>
<Button type="primary" size={'large'} style={{}} icon={<VideoCameraOutlined />} onClick={() => { }}>
监控视频
</Button>
<Button type="primary" size={'large'} style={{}} icon={<SettingOutlined />} onClick={() => setIsModalOpen(true)}>
设置
</Button>
</Space>
</div>
<div style={{ height: 'calc(80% - 40px)', padding: 8 }}>
@ -454,32 +511,40 @@ function Index (props) {
{
[{
k: '高度',
v: '100m',
s: '上升',
v: 'tower_height',
s: '-',
unit: 'm'
}, {
k: '幅度',
v: '100m',
s: '上升',
v: 'max_amp',
s: '-',
}, {
k: '回转',
v: '100m',
s: '上升',
k: '回转角',
v: 'rotation',
s: '-',
unit: '°',
dataFrom: 'live',
}, {
k: '重量',
v: '100m',
s: '上升',
v: 'x',
s: '-',
}, {
k: '力矩',
v: '100m',
s: '上升',
v: 'max_torque',
s: '-',
unit: 'KN*m'
}, {
k: '风速',
v: '100m',
s: '上升',
k: '俯仰角',
v: 'pitch',
s: '-',
unit: '°',
dataFrom: 'live',
}, {
k: '倾角',
v: '100m',
s: '上升',
k: '倾斜角',
v: 'inclination',
s: '-',
unit: '°',
dataFrom: 'live',
}, {
k: '',
v: '',
@ -495,9 +560,35 @@ function Index (props) {
{
s.k ?
<>
<h2 style={{ color: darkModde ? darkColor.textColor : 'auto' }}>{s.k}</h2>
<p style={{ color: darkModde ? darkColor.subTextColor : 'auto' }}>{s.v}</p>
<span className="status">{s.s}</span>
<h2 style={{ color: darkModde ? darkColor.textColor : 'auto' }}>
{s.k}
</h2>
<p style={{ color: darkModde ? darkColor.subTextColor : 'auto' }}>
{
s.dataFrom === 'live' ?
(
craneParams[s.v]?.Value || '-'
) + (
craneParams[s.v] && s.unit ? s.unit : ''
)
:
(
craneData[s.v] || '-'
) + (
craneData[s.v] && s.unit ? s.unit : ''
)
}
</p>
<span className="status" style={{
backgroundColor: s.dataFrom === 'live' && craneParams[s.v]?.Warn ? Colors.getAlarmLevelColors(craneParams[s.v]?.Warn) : undefined
}}>
{
s.dataFrom === 'live' ?
(craneParams[s.v]?.State || '-')
:
s.s
}
</span>
</>
: ''
}
@ -523,8 +614,10 @@ function Index (props) {
}
function mapStateToProps (state) {
const { auth } = state;
return {}
const { crane } = state;
return {
craneData: crane.data || {}
}
}
export default connect(mapStateToProps)(Index);

224
console/client/src/sections/console/containers/setUp.js
View File

@ -1,26 +1,120 @@
import React, { useEffect, useState, useRef } from 'react'
import { push } from 'react-router-redux';
import request from 'superagent';
import { connect } from 'react-redux';
import { editCrane } from '../actions'
import {
BorderlessTableOutlined, BlockOutlined, RollbackOutlined
BorderlessTableOutlined, BlockOutlined, RollbackOutlined, SaveOutlined
} from '@ant-design/icons';
import { Col, Row, Button, Modal, Form, Input } from 'antd';
import { Col, Row, Button, Modal, Form, Input, InputNumber, message } from 'antd';
import '../style.less'
function SetUp ({ dispatch }) {
const [form] = Form.useForm();
const [renderMenu, setRenderMenu] = useState([])
const [renderForm, setRenderForm] = useState(false)
const [formItems, setFormItems] = useState([])
const [formIndex, setFormIndex] = useState(0)
const [levelOneMenu] = useState([{
n: '参数标定',
ic: <BlockOutlined className='setup-icon' />,
click: () => {
setTowerCraneParams()
}
}, {
n: '限位告警参数',
ic: <BorderlessTableOutlined className='setup-icon' />
}, {
n: '返回',
ic: <RollbackOutlined className='setup-icon' />,
click: () => {
dispatch(push('/'));
}
},])
const setTowerCraneParams = () => {
setRenderForm(false)
setFormIndex(0)
setRenderMenu([
{
n: '塔机参数',
ic: <BorderlessTableOutlined className='setup-icon' />,
click: () => {
setRenderForm(true)
setFormIndex(1)
setFormItems([
{
label: '设备编号',
name: 'device_no',
type: 'string',
},
{
label: '经度',
name: 'longitude',
type: 'number',
},
{
label: '纬度',
name: 'latitude',
type: 'number',
},
{
label: '大臂长度',
name: 'boom_length',
type: 'number',
},
{
label: '小臂长度',
name: 'jib_length',
type: 'number',
},
{
label: '倍率',
name: 'magnification_ratio',
type: 'number',
},
{
label: '最大幅度',
name: 'max_amp',
type: 'number',
},
{
label: '最大高度',
name: 'max_height',
type: 'number',
},
{
label: '最大力矩（KN*m）',
name: 'max_torque',
type: 'number',
},
{
label: '最大起重量',
name: 'max_weight',
type: 'number',
},
{
label: '塔机编号',
name: 'tc_num',
type: 'string',
},
{
label: '塔高',
name: 'tower_height',
type: 'number',
},
{
label: '坐标 X',
name: 'x',
type: 'number',
},
{
label: '坐标 Y',
name: 'y',
type: 'number',
},
])
}
}, {
n: '返回',
@ -31,27 +125,12 @@ function SetUp ({ dispatch }) {
},
])
}
}, {
n: '限位告警参数',
ic: <BorderlessTableOutlined className='setup-icon' />
}, {
n: '返回',
ic: <RollbackOutlined className='setup-icon' />,
click: () => {
dispatch(push('/'));
}
},])
useEffect(() => {
setRenderMenu(levelOneMenu)
}, [])
return (
<div style={{ height: '100vh' }}>
<div style={{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }}>
{
renderMenu.map((item, index) => {
const mapMenu = (item, index) => {
return (
<div key={index} style={{ width: 168, textAlign: 'center', margin: 32, boxShadow: ' 0 0 10px var(--antd-wave-shadow-color)' }} onClick={item.click}>
{item.ic}
@ -60,30 +139,119 @@ function SetUp ({ dispatch }) {
</div>
</div>
)
})
}
return (
<div style={{ height: '100vh' }}>
{
!renderForm ?
<div style={{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }}>
{
renderMenu.map(mapMenu)
}
</div>
: ''
}
{/* <Form form={form} name="control-hooks" >
<Form.Item
name="note"
label="Note"
rules={[
{
required: true,
renderForm ?
<Form form={form} {...{
labelCol: {
span: 6,
},
wrapperCol: {
span: 18,
},
]}
}} name="control-hooks" size='large'>
<Row style={{ padding: '8% 12% 0' }}>
{
(() => {
const halfItemNum = Math.ceil(formItems.length / 2)
const leftItems = formItems.slice(0, halfItemNum)
const rightItems = formItems.slice(halfItemNum)
const mapItem = (item, index) => {
return (
<Form.Item
key={index}
name={item.name}
label={item.label}
// rules={[{
// // required: true,
// // message: '请输入' + item.label
// }]}
>
{
item.type === 'number' ?
<InputNumber style={{ width: '100%' }} /> :
<Input />
}
</Form.Item>
</Form> */}
)
}
return [
<Col span={12} style={{ paddingRight: 24 }}>
{leftItems.map(mapItem)}
</Col>
,
<Col span={12} style={{ paddingLeft: 24 }}>
{rightItems.map(mapItem)}
</Col>
]
})()
}
</Row>
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
{
[{
n: '保存',
ic: <SaveOutlined className='setup-icon' />,
click: () => {
if (formIndex == 1) {
const values = form.getFieldsValue()
console.log(values);
dispatch(editCrane(values)).then(res => {
console.log(res
);
if (res.success) {
message.success('修改配置信息成功')
} else {
message.error('修改配置信息失败')
}
})
// setTowerCraneParams()
}
}
}, {
n: '返回',
ic: <RollbackOutlined className='setup-icon' />,
click: () => {
if (formIndex == 1) {
setTowerCraneParams()
}
}
},].map(mapMenu)
}
</div>
</Form>
: ''
}
<div>
</div>
</div>
)
}
function mapStateToProps (state) {
console.log(state);
const { auth } = state;
return {}
return {
}
}
export default connect(mapStateToProps)(SetUp);

4
console/client/src/sections/console/nav-item.js
View File

@ -4,8 +4,8 @@ import { Menu } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
export function getNavItem() {
return (
<Menu.Item key="homePage" icon={<HomeOutlined />}>
<Link to="/homePage">首页</Link>
<Menu.Item key="console" icon={<HomeOutlined />}>
<Link to="/">控制台</Link>
</Menu.Item>
);
}

4
console/client/src/utils/webapi.js
View File

@ -6,6 +6,10 @@ export const ApiTable = {
logout: 'logout',
validatePhone: 'validate/phone',
// console
dataLatest: 'v1/data/latest',
craneSetting: 'v1/settings',
dataLive: 'v1/data/live',
};
export const RouteTable = {

1
console/config.js
View File

@ -22,7 +22,6 @@ args.option('qndmn', 'qiniuDomain');
const flags = dev ? args.parse(process.argv) : {};
const FS_UNIAPP_API =
`http://localhost:4600` ||
process.env.FS_UNIAPP_API ||
flags.apiUrl;

77
console/log/development.txt
View File

@ -1,2 +1,79 @@
2023-03-14 15:50:33.526 - debug: [FS-LOGGER] Init.
2023-03-14 15:50:33.759 - info: [Router] Inject api: attachment/index
2023-03-28 14:41:25.457 - debug: [FS-LOGGER] Init.
2023-03-28 14:41:25.778 - info: [Router] Inject api: attachment/index
2023-03-28 14:44:17.446 - error: [FS-ERRHD]
{
message: 'Error: connect ECONNREFUSED 127.0.0.1:4600',
name: 'RequestError',
cause: {
errno: 'ECONNREFUSED',
code: 'ECONNREFUSED',
syscall: 'connect',
address: '127.0.0.1',
port: 4600
},
error: { '$ref': '$["cause"]' },
options: {
jar: false,
url: 'http://localhost:4600/settings',
headers: {
host: 'localhost:4600',
connection: 'keep-alive',
'content-length': '30',
'sec-ch-ua': '"Chromium";v="110", "Not A(Brand";v="24", "Google Chrome";v="110"',
'sec-ch-ua-platform': '"Windows"',
'sec-ch-ua-mobile': '?0',
'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36',
'content-type': 'application/json',
'cache-control': 'no-cache,no-store,must-revalidate,max-age=-1,private',
'x-requested-with': 'XMLHttpRequest',
expires: '-1',
accept: '*/*',
origin: 'http://localhost:5400',
'sec-fetch-site': 'same-origin',
'sec-fetch-mode': 'cors',
'sec-fetch-dest': 'empty',
referer: 'http://localhost:5400/setup',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'zh-CN,zh;q=0.9'
},
encoding: null,
followRedirect: true,
method: 'POST',
body: '{"tower_height":22222,"x":111}',
simple: false,
resolveWithFullResponse: true,
callback: [Function: RP$callback],
transform: undefined,
transform2xxOnly: false
},
response: undefined,
stack: 'RequestError: Error: connect ECONNREFUSED 127.0.0.1:4600\n' +
' at new RequestError (C:\\_WorkCode\\CraneAntiCollision\\console\\node_modules\\request-promise-core\\lib\\errors.js:14:15)\n' +
' at Request.plumbing.callback (C:\\_WorkCode\\CraneAntiCollision\\console\\node_modules\\request-promise-core\\lib\\plumbing.js:87:29)\n' +
' at Request.RP$callback [as _callback] (C:\\_WorkCode\\CraneAntiCollision\\console\\node_modules\\request-promise-core\\lib\\plumbing.js:46:31)\n' +
' at self.callback (C:\\_WorkCode\\CraneAntiCollision\\console\\node_modules\\request\\request.js:185:22)\n' +
' at Request.emit (events.js:314:20)\n' +
' at Request.onRequestError (C:\\_WorkCode\\CraneAntiCollision\\console\\node_modules\\request\\request.js:877:8)\n' +
' at ClientRequest.emit (events.js:314:20)\n' +
' at Socket.socketErrorListener (_http_client.js:427:9)\n' +
' at Socket.emit (events.js:314:20)\n' +
' at emitErrorNT (internal/streams/destroy.js:92:8)\n' +
' at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)\n' +
' at processTicksAndRejections (internal/process/task_queues.js:84:21)'
}
2023-03-28 14:45:03.014 - debug: [FS-LOGGER] Init.
2023-03-28 14:45:03.232 - info: [Router] Inject api: attachment/index
2023-03-28 15:21:28.503 - debug: [FS-LOGGER] Init.
2023-03-28 15:21:28.747 - info: [Router] Inject api: attachment/index
2023-03-28 15:42:42.554 - debug: [FS-LOGGER] Init.
2023-03-28 15:42:42.743 - info: [Router] Inject api: attachment/index
2023-03-28 16:39:29.707 - debug: [FS-LOGGER] Init.
2023-03-28 16:39:29.892 - info: [Router] Inject api: attachment/index
2023-03-28 16:50:59.167 - debug: [FS-LOGGER] Init.
2023-03-28 16:50:59.377 - info: [Router] Inject api: attachment/index
2023-03-28 17:10:51.565 - debug: [FS-LOGGER] Init.
2023-03-28 17:10:51.751 - info: [Router] Inject api: attachment/index
2023-03-29 11:10:34.765 - debug: [FS-LOGGER] Init.
2023-03-29 11:10:35.030 - info: [Router] Inject api: attachment/index

24204
console/package-lock.json
View File

File diff suppressed because it is too large

2
console/package.json
View File

@ -8,7 +8,7 @@
"test": "mocha",
"start-elctr-forge": "electron-forge start",
"start": "cross-env NODE_ENV=development npm run start-params",
"start-params": "node server -p 5400 -u http://127.0.0.1:4400",
"start-params": "node server -p 5400 -u http://10.8.30.183:4100",
"deploy": "export NODE_ENV=production && npm run build && node server",
"build-dev": "set NODE_ENV=development&&webpack --config webpack.config.js",
"build": "set NODE_ENV=production&&webpack --config webpack.config.prod.js",

Write Preview
Loading…
Cancel
Save