WEBSOCKET 数据接入

console/client/assets/env.js

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

console/client/src/layout/containers/layout/index.js

@@ -114,7 +114,7 @@ const LayoutContainer = props => {
     )
 }
 
-function mapStateToProps(state) {
+function mapStateToProps (state) {
     const { global, auth, ajaxResponse } = state;
     return {
         title: global.title,

console/client/src/sections/console/actions/index.js

@@ -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,
 }

console/client/src/sections/console/containers/index.js

@@ -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(() => {
+    const draw = (type, params = {}) => {
-        console.log(FS_API_ROOT, window.FS_API_ROOT);
         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',
+                            v: 'tower_height',
-                            s: '上升',
+                            s: '-',
+                            unit: 'm'
                         }, {
                             k: '幅度',
-                            v: '100m',
+                            v: 'max_amp',
-                            s: '上升',
+                            s: '-',
                         }, {
-                            k: '回转',
+                            k: '回转角',
-                            v: '100m',
+                            v: 'rotation',
-                            s: '上升',
+                            s: '-',
+                            unit: '°',
+                            dataFrom: 'live',
                         }, {
                             k: '重量',
-                            v: '100m',
+                            v: 'x',
-                            s: '上升',
+                            s: '-',
                         }, {
                             k: '力矩',
-                            v: '100m',
+                            v: 'max_torque',
-                            s: '上升',
+                            s: '-',
+                            unit: 'KN*m'
                         }, {
-                            k: '风速',
+                            k: '俯仰角',
-                            v: '100m',
+                            v: 'pitch',
-                            s: '上升',
+                            s: '-',
+                            unit: '°',
+                            dataFrom: 'live',
                         }, {
-                            k: '倾角',
+                            k: '倾斜角',
-                            v: '100m',
+                            v: 'inclination',
-                            s: '上升',
+                            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>
+                                                    <h2 style={{ color: darkModde ? darkColor.textColor : 'auto' }}>
-                                                    <p style={{ color: darkModde ? darkColor.subTextColor : 'auto' }}>{s.v}</p>
+                                                        {s.k}
-                                                    <span className="status">{s.s}</span>
+                                                    </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;
+    const { crane } = state;
-    return {}
+    return {
+        craneData: crane.data || {}
+    }
 }
 
 export default connect(mapStateToProps)(Index);

console/client/src/sections/console/containers/setUp.js

@@ -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)
     }, [])
 
-
+    const mapMenu = (item, index) => {
-    return (
-        <div style={{ height: '100vh' }}>
-            <div style={{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }}>
-                {
-                    renderMenu.map((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);

console/client/src/sections/console/nav-item.js

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

console/client/src/utils/webapi.js

@@ -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 = {

console/config.js

@@ -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;
 

console/log/development.txt

@@ -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

console/package.json

@@ -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",