diff --git a/.env b/.env index 75466e3..ce31977 100644 --- a/.env +++ b/.env @@ -1,2 +1,2 @@ -# REACT_APP_WS_URL=192.168.1.121:8080/ws -REACT_APP_WS_URL=127.1.1.0:8080/ws \ No newline at end of file +REACT_APP_WS_URL=192.168.1.132:8080/ws +# REACT_APP_WS_URL=127.1.1.0:8080/ws \ No newline at end of file diff --git a/package.json b/package.json index 15bb757..9695ba0 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "outline", "version": "0.1.0", "private": true, - "proxy": "http://127.1.1.0:8080", + "proxy": "http://192.168.1.132:8080", "dependencies": { "@ant-design/icons": "^6.0.0", "@babel/core": "^7.16.0", diff --git a/public/audio/alert_left.mp3 b/public/audio/alert_left.mp3 deleted file mode 100644 index f597e87..0000000 Binary files a/public/audio/alert_left.mp3 and /dev/null differ diff --git a/public/audio/begin_left.mp3 b/public/audio/begin_left.mp3 deleted file mode 100644 index 084b48e..0000000 Binary files a/public/audio/begin_left.mp3 and /dev/null differ diff --git a/public/audio/begin_right.mp3 b/public/audio/begin_right.mp3 deleted file mode 100644 index 7d741aa..0000000 Binary files a/public/audio/begin_right.mp3 and /dev/null differ diff --git a/public/audio/end_left.mp3 b/public/audio/end_left.mp3 deleted file mode 100644 index 965b171..0000000 Binary files a/public/audio/end_left.mp3 and /dev/null differ diff --git a/public/audio/end_right.mp3 b/public/audio/end_right.mp3 deleted file mode 100644 index cd7bd18..0000000 Binary files a/public/audio/end_right.mp3 and /dev/null differ diff --git a/public/audio/measure_end.mp3 b/public/audio/measure_end.mp3 deleted file mode 100644 index 83c8634..0000000 Binary files a/public/audio/measure_end.mp3 and /dev/null differ diff --git a/public/audio/measuring.mp3 b/public/audio/measuring.mp3 deleted file mode 100644 index 9c52945..0000000 Binary files a/public/audio/measuring.mp3 and /dev/null differ diff --git a/public/audio/ready.mp3 b/public/audio/ready.mp3 deleted file mode 100644 index 0db85af..0000000 Binary files a/public/audio/ready.mp3 and /dev/null differ diff --git a/public/audio/side_end.mp3 b/public/audio/side_end.mp3 deleted file mode 100644 index 0df0a16..0000000 Binary files a/public/audio/side_end.mp3 and /dev/null differ diff --git a/public/audio/ticking.wav b/public/audio/ticking.wav new file mode 100644 index 0000000..468c346 Binary files /dev/null and b/public/audio/ticking.wav differ diff --git a/src/assets/icon-charging.svg b/src/assets/icon-charging.svg new file mode 100644 index 0000000..a46914f --- /dev/null +++ b/src/assets/icon-charging.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 5bff310..90dbc95 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,6 +1,6 @@ import icon_usb from "../assets/icon_usb.svg"; import icon_bluetooth from "../assets/icon_bluetooth.svg"; -import icon_battery from "../assets/icon_battery.svg"; +import icon_charging from "../assets/icon-charging.svg"; import icon_avatar from "../assets/icon_avatar.svg"; import icon_logout from "../assets/icon_logout.svg"; import { @@ -8,7 +8,7 @@ import { } from '@ant-design/icons'; import check_mark from "../assets/check_mark.svg"; import { useState, useEffect } from "react"; -import { Dropdown, MenuProps, message, Button, Popover, Progress } from "antd"; +import { Dropdown, MenuProps, message, Popover } from "antd"; import { logout } from "../services/user/user"; import { useNavigate } from "react-router"; import { useAppDispatch, useAppSelector } from "../utils/hooks"; @@ -21,6 +21,8 @@ export default function Header() { const deviceInfo = useAppSelector(store => store.context.device); // const deviceState = useAppSelector(store => store.context.device); const userInfo = useAppSelector(store => store.context.user.loginUser); + const [power, setPower] = useState(deviceInfo.power.toFixed())//deviceInfo.power.toFixed() + const [powerColor, setPowerColor] = useState('bluetooth-battery') //获取当前websocet的状态 const showBlueImg = () => { @@ -61,6 +63,18 @@ export default function Header() { } }, [userInfo.nickname, userInfo.account]); + useEffect(() => { + if(deviceInfo.power > 20){ + setPowerColor('bluetooth-battery') + } + if(deviceInfo.power <= 20){ + setPowerColor('bluetooth-battery-red') + } + if(deviceInfo.flag === 1){ + setPowerColor('bluetooth-battery-green') + } + }, [deviceInfo.power]) + //同步科天健基础数据 const onSyncKTJData = () => { update() @@ -143,12 +157,23 @@ export default function Header() { Y轴倾斜：{deviceInfo.inclinatorY}
- -

{deviceInfo.power.toFixed()}%

+ +
+
+
{power}%
+
+ {deviceInfo.flag === 1 && +
+ +
+ } + {/*
{power}%
*/} +
+ {/*

{deviceInfo.power.toFixed()}%

*/}
)} diff --git a/src/components/bluetooth.scss b/src/components/bluetooth.scss index 5ada498..1a77387 100644 --- a/src/components/bluetooth.scss +++ b/src/components/bluetooth.scss @@ -2,4 +2,91 @@ display: flex; align-items: center; justify-content: center; -} \ No newline at end of file +} + +.power-process{ + position: absolute; + height: 13px; + background: #cecece; + left: 0; +} + +.power-value{ + position: absolute; + z-index: 99; +} + +.power-charging{ + position: absolute; + width: 30px; + left: 1.5em; +} + +.bluetooth-battery { + position: relative; + font-size: 12px; + height: 16px; + width: 2rem; + padding-left: 2px; + padding-right: 2px; + color: var(--primaryColor); + border: solid 1px var(--primaryColor); + border-radius: 2px; + &::after { + content: " "; + position: absolute; + width: 4px; + height: 8px; + background-color: var(--primaryColor); + right: -4px; + top: 3px; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + } +} + +.bluetooth-battery-red { + position: relative; + font-size: 12px; + height: 16px; + width: 2rem; + padding-left: 2px; + padding-right: 2px; + color: red; + border: solid 1px red; + border-radius: 2px; + &::after { + content: " "; + position: absolute; + width: 4px; + height: 8px; + background-color: red; + right: -4px; + top: 3px; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + } +} + +.bluetooth-battery-green { + position: relative; + font-size: 12px; + height: 16px; + width: 2rem; + padding-left: 2px; + padding-right: 2px; + color: #1afa29; + border: solid 1px #1afa29; + border-radius: 2px; + &::after { + content: " "; + position: absolute; + width: 4px; + height: 8px; + background-color: #1afa29; + right: -4px; + top: 3px; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + } +} diff --git a/src/pages/measure/components/MeasureAction.tsx b/src/pages/measure/components/MeasureAction.tsx index 6f89999..8c06982 100644 --- a/src/pages/measure/components/MeasureAction.tsx +++ b/src/pages/measure/components/MeasureAction.tsx @@ -1,8 +1,7 @@ import React, { useState, useEffect, useRef, useCallback, useMemo } from "react"; -import { Button, Checkbox, CheckboxProps, Drawer, Input, InputNumber, message, Select, Spin, Switch } from "antd"; +import { Button, Checkbox, CheckboxProps, Drawer, Form, Input, InputNumber, message, Modal, Select, Spin, Switch } from "antd"; import { useNavigate } from "react-router"; import { - fetchAnalysisReport, getAlignPointsByRailSize, getReport, startMeasurement, @@ -11,7 +10,7 @@ import { import { getBaseRecordPointSetByCode, gx_list } from "../../../services/track/trackShape" import { createWebSocket, sharedWsUrl } from "../../../services/socket"; import { switchMeasureAfterSave } from "../../../store/features/contextSlice"; -import measureState, { updateGxState, updateMeasureData } from "../../../store/measure/measureState"; +import { updateGxState, updateMeasureData, updateMeasureName } from "../../../store/measure/measureState"; import { AnalysisReport, trackItem } from "../../../services/measure/type"; import { MeasureState, ResultRecordData, TaskState, TrackRecordSig } from "../../../services/wsTypes"; import { useAppDispatch, useAppSelector } from "../../../utils/hooks"; @@ -26,6 +25,8 @@ import icon_rightR from "../../../assets/icon_rightR.svg"; import MeasurementCanvas, { AnalysisData, BenchmarkShape, MeasurementCanvasRef, Point } from "./konva/MeasurementCanvas"; import "./MeasureAction.scss"; import { GX_CODE } from "../../../constant"; +import type { InputRef } from 'antd/es/input'; +const { confirm } = Modal; // 创建 websocket 客户端 const wsClient = createWebSocket(sharedWsUrl); export default function MeasureAction() { @@ -33,6 +34,7 @@ export default function MeasureAction() { const navigate = useNavigate(); const deviceInfo = useAppSelector(store => store.context.device); const measureState = useAppSelector((store) => store.measureState); + const measureName = localStorage.getItem("measureName"); const [railSize, setRailSize] = useState(GX_CODE) const STEP_COLOR_GREEN = "green"; const STEP_COLOR_BLUE = "blue"; @@ -45,14 +47,16 @@ export default function MeasureAction() { /** ----------------------- 状态 ----------------------- **/ const [showGrid, setShowGrid] = useState(true); - const [showStandard, setShowStandard] = useState(true); + const [showStandard, setShowStandard] = useState(false); const [showMark, setShowMark] = useState(true); // showMark的备份，记录showMark最近一次的值 const [angleMarkBackup, setAngleMarkBackup] = useState(true); const afterSave = useAppSelector(store => store.context.newMeasureAfterSave); const [startBtnText, setStartBtnText] = useState("开始测量"); const [measurementFinished, setMeasurementFinished] = useState(false); - + const [isMeasurementModalOpen, setIsMeasurementModalOpen] = useState(false) + const [form] = Form.useForm(); + const inputRef = useRef(null); // 【分析】之后，会得到分析报告 const [analysisReport, setAnalysisReport] = useState(null); @@ -128,18 +132,28 @@ export default function MeasureAction() { }; const [startLoading, setStartLoading] = useState(false) - // 开始/重新测量按钮点击事件 - const onStart = useCallback(() => { - // if (!deviceInfo.isConnected) { - // message.error("请先连接设备"); - // return; - // } + const onChooseNameStart = () => { + if (!deviceInfo.isConnected) { + message.error("请先连接设备"); + return; + } + if (startBtnText === '开始测量') { + // 输入测量名称 + setIsMeasurementModalOpen(true) + setTimeout(() => { + if(inputRef.current){ + form.setFieldsValue({ + name: measureName || '', + }); + inputRef.current.focus() + } + }, 100) + } + } + + + const onContinueMeasure = () => { setStartLoading(true) - setAudioList([]) - // if(deviceInfo.power < 20){ - // message.error('电量低于20%，请充电后再测量！') - // return - // } // 重置测量相关状态 setMeasurementFinished(false); setAnalysisReport(null); @@ -168,18 +182,36 @@ export default function MeasureAction() { setStatusList(list); message.success("已通知设备开始测量"); setStartBtnText("重新测量"); - const audioReady = new Audio("/audio/ready.mp3"); - // 播放音频 - audioReady - .play() - .then(() => { - console.log("音频开始播放 已准备好"); - }) - .catch(err => { - console.error("播放音频时出错:", err); - }); + setShowStandard(false) } }); + } + + // 开始/重新测量按钮点击事件 + const onStart = useCallback(async () => { + + if (!deviceInfo.isConnected) { + message.error("请先连接设备"); + return; + } + if(deviceInfo.power < 10){ + confirm({ + title: '电量提示', + content: '电量低于10%，测量过程会有丢包风险，请确认是否继续测量！', + okText:'确认', + cancelText:'取消', + onOk() { + onContinueMeasure() + }, + onCancel() { + console.log('Cancel'); + }, + }); + return + } + else { + onContinueMeasure() + } }, [initialStatusList, startBtnText, deviceInfo]); //停止测量 @@ -248,13 +280,7 @@ export default function MeasureAction() { } }; - const [audioList, setAudioList] = useState([]) - const pauseAudio = () => { - audioList.forEach(audio => { - audio.pause() - }) - } - const [status, setStatus] = useState(0) + const [status, setStatus] = useState(0) /** ----------------------- WebSocket 消息处理 ----------------------- **/ useEffect(() => { // 处理任务状态消息 @@ -271,6 +297,15 @@ export default function MeasureAction() { * RECORD_THE_2ND_SIDE: 测量第二线曲线 * FINISHED: 第二条曲线测量完成 */ + if(type === 'WAITING_FOR_RECORD_THE_1ST_SIDE') { + setStatus(1); + }else if(type === 'WAITING_FOR_RECORD_THE_2ND_SIDE') { + setStatus(2); + } + if((['START_RECORD_LEFT', 'START_RECORD_RIGHT'].includes(type) && status === 1) || (['FINISH_RECORD_LEFT', 'FINISH_RECORD_RIGHT'].includes(type) && status === 1) || ['FINISH_RECORD'].includes(type)) { + const audio = new Audio('/audio/ticking.wav'); + audio.play().then(() => {}); + } setStatusList(prev => { const updated = [...prev]; switch (type) { @@ -286,95 +321,37 @@ export default function MeasureAction() { break; case 'START_RECORD_LEFT': case 'START_RECORD_RIGHT': - if (status === 1) { + if (status === 1) { updated[0].color = STEP_COLOR_GREEN; updated[1].color = STEP_COLOR_BLUE; } else if (status === 2) { updated[3].color = STEP_COLOR_GREEN; updated[4].color = STEP_COLOR_BLUE; } - const audio1 = new Audio("/audio/measuring.mp3"); - // 播放音频 - audio1 - .play() - .then(() => { - console.log("音频开始播放"); - }) - .catch(err => { - console.error("播放音频时出错:", err); - }); - setAudioList([...audioList, audio1]) break; case "FINISH_RECORD_LEFT": case "FINISH_RECORD_RIGHT": - pauseAudio() if (status === 1) { updated[1].color = STEP_COLOR_GREEN; updated[2].color = STEP_COLOR_GREEN; updated[3].color = STEP_COLOR_BLUE; - const line1Audio = new Audio("/audio/side_end.mp3"); - // 播放音频 - line1Audio - .play() - .then(() => { - console.log("音频开始播放"); - }) - .catch(err => { - console.error("播放音频时出错:", err); - }); - setAudioList([...audioList, line1Audio]) }else if(status === 2) { updated[3].color = STEP_COLOR_GREEN; updated[4].color = STEP_COLOR_BLUE; - const audio2 = new Audio("/audio/measure_end.mp3"); - // 播放音频 - audio2 - .play() - .then(() => { - console.log("音频开始播放"); - }) - .catch(err => { - console.error("播放音频时出错:", err); - }); - setAudioList([...audioList, audio2]) setMeasurementFinished(true); } updated[1].color = STEP_COLOR_GREEN; updated[2].color = STEP_COLOR_GREEN; updated[3].color = STEP_COLOR_BLUE; isLeftFinished.current = true; - - break; case "FINISH_RECORD": - updated.forEach(item => { - item.color = STEP_COLOR_GREEN - }) - const audioFinish= new Audio("/audio/measure_end.mp3");//measure_end - // 播放音频 - audioFinish - .play() - .then(() => { - console.log("音频开始播放"); - }) - .catch(err => { - console.error("播放音频时出错:", err); - }); + updated.forEach(u => (u.color = STEP_COLOR_GREEN)); setCaLoading(true) setLoadingText('正在处理测量数据...') setMeasurementFinished(true); break; case "WRONG_SIDE": - const audio5 = new Audio("/audio/alert_left.mp3"); - // 播放音频 - audio5 - .play() - .then(() => { - console.log("音频开始播放"); - }) - .catch(err => { - console.error("播放音频时出错:", err); - }); // 把状态全部置灰 updated.forEach(u => (u.color = STEP_COLOR_GREY)); // 调用停止测量 @@ -383,6 +360,7 @@ export default function MeasureAction() { default: break; } + return updated; }); }; @@ -400,8 +378,11 @@ export default function MeasureAction() { // 处理测量后的数据 const handleMeasureResult = (pointData: ResultRecordData["data"]) => { - canvasRef.current?.setMeasurementDataLeft([...pointData.outline1]); - canvasRef.current?.setMeasurementDataRight([...pointData.outline2]); + // canvasRef.current?.setMeasurementDataLeft([...pointData.outline1]); + // canvasRef.current?.setMeasurementDataRight([...pointData.outline2]); + canvasRef.current?.setMeasurementCalibrationData(pointData) + setshowCalibration(true)//校准线 + setShowStandard(true) } const subscription = wsClient.dataOb.subscribe(data => { @@ -530,6 +511,27 @@ export default function MeasureAction() { return item } + const handleOk = async () => { + try { + // 手动触发校验并获取字段值 + const values = await form.validateFields(); + localStorage.setItem("measureName", values.name); + // dispatch(updateMeasureName(values.name)) + // 校验成功，处理表单数据 + console.log('表单数据校验成功:', values); + onStart() + message.success('开始测量'); + handleCancel() + } catch (errorInfo) { + // 校验失败，antd会自动显示错误信息 + console.log('表单数据校验失败:', errorInfo); + } + } + + const handleCancel = () => { + setIsMeasurementModalOpen(false) + } + /** ----------------------- 渲染 ----------------------- **/ return ( <> @@ -728,6 +730,30 @@ export default function MeasureAction() { )} + +
+ + + +
+ ); } diff --git a/src/pages/measure/components/MeasureConfig.tsx b/src/pages/measure/components/MeasureConfig.tsx index 5d1bf3b..b8a5939 100644 --- a/src/pages/measure/components/MeasureConfig.tsx +++ b/src/pages/measure/components/MeasureConfig.tsx @@ -1,6 +1,6 @@ /* eslint-disable array-callback-return */ import { Button, Form, Input, message, Select, InputNumber } from "antd"; -import { useEffect, useState, useRef } from "react"; +import { useEffect, useState } from "react"; import { useNavigate } from "react-router"; import { saveMeasurement_new } from "../../../services/measure/analysis"; import { useAppSelector } from "../../../utils/hooks"; @@ -23,14 +23,12 @@ import type { } from "../../../services/ktjTypes"; import { RAIN_TYPES, XB_CODES, DATA_SOURCE } from "../../../constant/index"; import "./MeasureAction.scss"; -import { systemItem } from "../../system/types"; export default function MeasureConfig() { const { Option } = Select; const navigate = useNavigate(); const systemState = useAppSelector((store) => store.systemState); const [messageApi, contextHolder] = message.useMessage(); const dispatch = useAppDispatch(); - const context = useAppSelector((store) => store.context); const measureState = useAppSelector((store) => store.measureState); const [extraDesc, setExtraDesc] = useState() const onFinish = (values: any) => { @@ -74,6 +72,7 @@ export default function MeasureConfig() { if(measureData && measureData.length){ params.alignPoints = measureData } + localStorage.setItem('measureForm', JSON.stringify(params)) saveMeasurement_new(params) .then((res) => { if (res.success) { @@ -274,6 +273,12 @@ export default function MeasureConfig() { }else{ setStationList([]) } + const measureForm = localStorage.getItem('measureForm') + if (measureForm) { + form.setFieldsValue({ + ...JSON.parse(measureForm) + }); + } }) } diff --git a/src/pages/measure/components/MeasureDetail.tsx b/src/pages/measure/components/MeasureDetail.tsx index 438bead..58dba0b 100644 --- a/src/pages/measure/components/MeasureDetail.tsx +++ b/src/pages/measure/components/MeasureDetail.tsx @@ -66,6 +66,10 @@ export default function MeasureDetail() { dataIndex: 'railSize', }, { + title: '当天测量序号', + dataIndex: 'todayNumber', + }, + { title: '创建者', dataIndex: 'operator', }, diff --git a/src/pages/system/Setting.tsx b/src/pages/system/Setting.tsx index bb6d541..e4d5ef2 100644 --- a/src/pages/system/Setting.tsx +++ b/src/pages/system/Setting.tsx @@ -1,5 +1,5 @@ import { useState, useEffect } from 'react'; -import { Button, Cascader, Input, message, Form } from 'antd'; +import { Button, Cascader, Input, message, Form, Select } from 'antd'; import { LoadingOutlined, } from '@ant-design/icons'; @@ -7,16 +7,19 @@ import { getOrgListService } from '../../services/ktj/org'; import { OrgItem } from '../../services/ktjTypes'; import {bleItem, child, GwdItem, orgCascaderType, systemItem} from './types'; import { sysSet } from '../../services/user/system'; +import { getDeviceConfig, saveDeviceConfig } from '../../services/device/deviceConfig' import { useAppDispatch, useAppSelector } from "../../utils/hooks"; import { updateSystemAccountState, updateSystemOrgState } from '../../store/system/systemSlice'; import {createWebSocket, sharedWsUrl} from "../../services/socket"; import {start, stop, disconnect, connect} from "../../services/ble/ble"; +import { StandbyMinutes } from '../../services/measure/type'; export default function Setting(){ useEffect(()=>{ queryRailData() // onBleStart() querySettingData() + queryConfig() return ()=>{ onBleStop() } @@ -29,6 +32,26 @@ export default function Setting(){ const [orgInfo, setOrgInfo] = useState({}) const [orgValues, setOrgValues] = useState([]) const [bleList, setBleList] = useState([]) + const dormancyList = [{ + label: '1分钟', + value: '1', + },{ + label: '2分钟', + value: '2', + },{ + label: '5分钟', + value: '5', + },{ + label: '10分钟', + value: '10', + },{ + label: '20分钟', + value: '20', + },{ + label: '30分钟', + value: '30', + }] + const [standbyMinutes, setStandbyMinutes] = useState(10) // 创建 websocket 客户端 const wsClient = createWebSocket(sharedWsUrl); @@ -96,6 +119,16 @@ export default function Setting(){ } }, [orgInfo]) + const queryConfig = () => { + getDeviceConfig().then((res: any) => { + console.log('-----', res) + const standbyMinutes = res.data.standbyMinutes + if (standbyMinutes ) { + setStandbyMinutes(standbyMinutes) + } + }) + } + //获取铁路局数据 const [KTJOrgList, setKTJOrgList] = useState([]); function queryRailData(){ @@ -245,7 +278,7 @@ export default function Setting(){ - })} + })} ); }else { @@ -309,8 +342,20 @@ export default function Setting(){ } + const onStandbyMinutesChange = (value: number) => { + setStandbyMinutes(value) + } + + const onSaveStandbyMinutes = () => { + setStandbyMinutes(standbyMinutes) + const params: StandbyMinutes = { + standbyMinutes, + } + saveDeviceConfig(params).then(res=> { + message.success("保存成功"); + }) + } - // @ts-ignore return <>

系统配置

@@ -319,6 +364,18 @@ export default function Setting(){

设备配置

{connectionStatus()} +

休眠设置

+
+ 设置休眠时间： +