优化测量开始页面

5 months ago · 671d6d91ec
14 changed files with 58 additions and 41 deletions
--- a/.env
+++ b/.env
@ -1 +1 @@
-REACT_APP_WS_URL=192.168.1.200:80/ws
+REACT_APP_WS_URL=192.168.1.200:8080/ws
--- a/package.json
+++ b/package.json
@ -2,7 +2,7 @@
  "name": "outline",
  "version": "0.1.0",
  "private": true,
-  "proxy": "http://192.168.1.200:80",
+  "proxy": "http://192.168.1.200:8080",
  "dependencies": {
    "@babel/core": "^7.16.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -7,13 +7,11 @@ import { default as AppHeader } from "./components/Header";
 import { default as AppFooter } from "./components/Footer";
 import SideMenu from "./components/SideMenu";
 import { createWebSocket, sharedWsUrl } from "./services/socket";
-import { updateUser } from "./store/features/contextSlice";
 import { useAppDispatch } from "./utils/hooks";
 import { updateDeviceState } from "./store/device/deviceState";
 const { Header, Footer, Sider, Content } = Layout;

 function App() {
-	const navigate = useNavigate();
 	const dispatch = useAppDispatch();

 	useEffect(() => {
--- a/src/assets/menu/icon_substrate.svg
+++ b/src/assets/menu/icon_substrate.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="36.14432144165039" height="41.958011627197266" viewBox="0 0 36.14432144165039 41.958011627197266"><defs><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg0_48_6837"><stop offset="2.380894310772419%" stop-color="#0867DB" stop-opacity="1"/><stop offset="100%" stop-color="#0658C3" stop-opacity="1"/></linearGradient></defs><g><path d="M34.3613,0.0209899L27.1284,0.0209899L27.1079,0.0209899C26.4318,0.0209899,25.8786,0.503749,25.7761,1.13343L25.7556,1.13343C25.3868,2.68666,24.8541,4.72264,23.1329,4.72264L12.2939,4.72264C10.5932,4.72264,10.081,2.70765,9.69166,1.1964C9.63019,0.566717,9.09745,0.083958,8.44178,0.0209895L8.42129,0L1.8031,0C0.799101,0,0,0.776612,0,1.74213L0,40.2159C0,41.1814,0.81959,41.958,1.8031,41.958L34.3408,41.958C35.3448,41.958,36.1439,41.1814,36.1439,40.2159L36.1439,1.76312C36.1644,0.797602,35.3653,0.0209901,34.3613,0.0209899ZM7.54023,34.3598C6.37231,34.3598,5.42978,33.3943,5.42978,32.1979C5.42978,31.0015,6.37231,30.036,7.54023,30.036C8.70814,30.036,9.65067,31.0015,9.65067,32.1979C9.65067,33.3943,8.70814,34.3598,7.54023,34.3598ZM7.54023,26.069C6.37231,26.069,5.42978,25.1034,5.42978,23.907C5.42978,22.7106,6.37231,21.7451,7.54023,21.7451C8.70814,21.7451,9.65067,22.7106,9.65067,23.907C9.65067,25.1034,8.70814,26.069,7.54023,26.069ZM7.54023,17.6942C6.37231,17.6942,5.42978,16.7286,5.42978,15.5322C5.42978,14.3358,6.37231,13.3703,7.54023,13.3703C8.70814,13.3703,9.65067,14.3358,9.65067,15.5322C9.65067,16.7286,8.70814,17.6942,7.54023,17.6942ZM29.1979,33.6882L14.097,33.6882C13.2979,33.6882,12.6627,33.0165,12.6627,32.2189C12.6627,31.4213,13.3183,30.7496,14.097,30.7496L29.1979,30.7496C29.997,30.7496,30.6322,31.4213,30.6322,32.2189C30.6322,33.0165,29.997,33.6882,29.1979,33.6882ZM29.1979,25.3763L14.097,25.3763C13.2979,25.3763,12.6627,24.7046,12.6627,23.907C12.6627,23.1094,13.3183,22.4378,14.097,22.4378L29.1979,22.4378C29.997,22.4378,30.6322,23.1094,30.6322,23.907C30.6322,24.7046,29.997,25.3763,29.1979,25.3763ZM29.1979,17.0225L14.097,17.0225C13.2979,17.0225,12.6627,16.3508,12.6627,15.5532C12.6627,14.7556,13.3183,14.084,14.097,14.084L29.1979,14.084C29.997,14.084,30.6322,14.7556,30.6322,15.5532C30.6322,16.3508,29.997,17.0225,29.1979,17.0225Z" fill="url(#master_svg0_48_6837)" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>
--- a/src/components/SideMenu.tsx
+++ b/src/components/SideMenu.tsx
@ -2,6 +2,8 @@ import type { MenuProps } from "antd";
 import { Menu } from "antd";
 import icon_logo from "../assets/icon_logo.svg";
 import icon_measure from "../assets/menu/icon_measure.svg";
+import icon_substrate from "../assets/menu/icon_substrate.svg";
+
 import { useNavigate, useLocation } from "react-router-dom";
 import "./SideMenu.scss";

@ -23,6 +25,15 @@ const items: MenuItem[] = [
 			}
 		],
 	},
+	{
+		key: "rail",
+		label: "轨形管理",
+		icon: <img src={icon_substrate} alt=""/>,
+		children: [{
+			key: '/rail/config',
+			label: '轨形配置'
+		}]
+	}
 ];

 export default function SideMenu() {
--- a/src/index.tsx
+++ b/src/index.tsx
@ -7,6 +7,9 @@ import Measure from "./pages/measure/Measure";
 import MeasureConfig from "./pages/measure/components/MeasureConfig";
 import MeasureDetail from "./pages/measure/components/MeasureDetail";
 import MeasureAction from "./pages/measure/components/MeasureAction";
+
+import RailConfig from "./pages/rail/railConfig";
+
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";

@ -37,6 +40,14 @@ const router = createBrowserRouter([
                    }
                ],
            },
+            {
+                path: "rail/config",
+                element: <RailConfig/>,
+                children:[{
+                    path: 'rail/config',
+                    element: <RailConfig/>
+                }]
+            }
        ],
    },
    {
--- a/src/pages/measure/components/MeasureAction.tsx
+++ b/src/pages/measure/components/MeasureAction.tsx
@ -10,8 +10,7 @@ import {
 } from "../../../services/measure/analysis";
 import { createWebSocket, sharedWsUrl } from "../../../services/socket";
 import { switchMeasureAfterSave } from "../../../store/features/contextSlice";
-import { AnalysisReport, AnalyzeAngle } from "../../../services/measure/type";
-import { MeasureState, taskStatusDescMap } from "../../../services/wsTypes";
+import { AnalysisReport } from "../../../services/measure/type";
 import { useAppDispatch, useAppSelector } from "../../../utils/hooks";
 import Gr_round from '../../../assets/green_round.svg';
 import Bl_round from '../../../assets/blue_round.svg';
@ -43,8 +42,6 @@ export default function MeasureAction() {
    const [angleMarkBackup, setAngleMarkBackup] = useState(true);
    const afterSave = useAppSelector((store) => store.context.newMeasureAfterSave);

-    const [angles, setAngles] = useState<AnalyzeAngle[]>([]);
-    const [taskStatus, setTaskStatus] = useState<MeasureState["data"]["taskStatus"]>("IDLE");
    // 初始按钮文本为“开始测量”
    const [startBtnText, setStartBtnText] = useState("开始测量");
    // 测量是否完成的状态
@ -160,15 +157,11 @@ export default function MeasureAction() {
        startMeasurement().then((res) => {
            if (res.status !== 0) {
                message.error(res.data.info);
-                let name = taskStatusDescMap["IDLE"];
-                setTaskStatusName(name);
            } else {
                const newStatusList = [...initialStatusList];
                newStatusList[0].color = "b";
                setStatusList(newStatusList);
                message.success("已通知设备开始测量");
-                let name = taskStatusDescMap["IDLE"];
-                setTaskStatusName(name);
                // 测量启动成功后，按钮文本变为“重新测量”
                setStartBtnText("重新测量");
            }
@ -194,27 +187,8 @@ export default function MeasureAction() {
        });
    };

-    const [taskStatusName, setTaskStatusName] = useState("");
    useEffect(() => {
        const subscription = wsClient.dataOb.subscribe((data) => {
-            // 处理任务状态消息
-            if (data.messageType === "STATE" && data.path === "/measurement-task/get-task-state") {
-                if (!data.data) return;
-                if (data.data.taskStatus === "IDLE") {
-                    setTaskStatusName("空闲");
-                } else if (!data.data.isMeasuringLeftEnd) {
-                    setTaskStatusName("左侧正在测量");
-                    statusList[0].isReady = true;
-                    setStatusList([...statusList]);
-                } else if (data.data.isMeasuringLeftEnd && !data.data.isMeasuringRightEnd) {
-                    setTaskStatusName("右侧正在测量");
-                } else {
-                    let name = taskStatusDescMap[data.data.taskStatus];
-                    setTaskStatusName(name);
-                }
-                setTaskStatus(data.data.taskStatus);
-            }
-
            // 处理状态变化事件
            if (data.messageType === "EVENT" && data.path === "/measurement-task/event") {
                if (data.data === "START_RECORD_LEFT") {
--- a/src/pages/measure/components/MeasureConfig.tsx
+++ b/src/pages/measure/components/MeasureConfig.tsx
@ -1,4 +1,4 @@
-import { Button, Form, Input, message } from "antd";
+import { Button, Form, Input, message, Select } from "antd";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router";
 import { createMeasure } from "../../../services/measure/analysis";
@ -9,17 +9,25 @@ export default function MeasureConfig() {
 	const [messageApi, contextHolder] = message.useMessage();

 	const context = useAppSelector(store => store.context);
+	const deviceState = useAppSelector(store => store.deviceState);
 	const onFinish = (values: any) => {
 		console.log("Received values of form: ", values);
+		//判断是否连接了设备
+		if(!deviceState.isConnect){
+			message.error('设备尚未连接或连接失败，请重新连接')
+			return;
+		}
 		createMeasure({
 			operatorName: values["username"],
 			name: values["measureName"],
 			lineName: values["lineName"],
 			location: values["position"],
+			direction: values["direction"]
 		}).then(res => {
 			if (res.status !== 0) {
 				messageApi.error(res.data.info);
 			} else {
+
 				navigate("../action");
 			}
 		});
@ -84,9 +92,17 @@ export default function MeasureConfig() {
 					<Form.Item label="位置" name="position" rules={[{ required: false, message: "请输入位置" }]}>
 						<Input />
 					</Form.Item>
-					{ <Form.Item label="方向" name="direction" rules={[{ required: false, message: "请输入方向" }]}>
-					<Input />
-				</Form.Item> }
+					 <Form.Item label="方向" name="direction" rules={[{ required: false, message: "请输入方向" }]}>
+						{/* <Input /> */}
+						<Select
+							className="w-[5rem]"
+							defaultValue="左"
+							options={[
+								{ value: '左', label: '左侧' },
+								{ value: '右', label: '右侧' },
+							]}
+						/>
+					</Form.Item>

 					<Form.Item label={null}>
 						<Button type="primary" size="large" style={{ width: 220 }} htmlType="submit">
--- a/src/pages/measure/components/graph/MarkLayer.tsx
+++ b/src/pages/measure/components/graph/MarkLayer.tsx
@ -67,7 +67,6 @@ export default function MarkLayer(props: {

 				ctx.save();
 				ctx.translate(line[2].x, line[2].y);
-				//@ts-ignore  这个地方原来是marks， 现在替换为lines, 0307
 				ctx.rotate(((marks[idx].degree + 90) * Math.PI) / 180);
 				ctx.fillText(props.angles[idx].describe, 0, 0);
 				ctx.restore();
--- a/src/pages/measure/components/graph/ResultLayer.tsx
+++ b/src/pages/measure/components/graph/ResultLayer.tsx
@ -48,9 +48,6 @@ export default function ResultLayer(props: {
 	useEffect(() => {
 		const subscription = wsClient.dataOb.subscribe(data => {
 			let isRight = false;
-			if(data.path === "/measurement-task/measurement-task"){
-
-			}
 			if (data.path === "/measurement-task/event") {
 				const canvas = canvasRef.current;
 				if (!canvas) return;
--- a/src/pages/rail/rail.scss
+++ b/src/pages/rail/rail.scss
--- a/src/pages/rail/railConfig.tsx
+++ b/src/pages/rail/railConfig.tsx
@ -0,0 +1,11 @@
+import "./rail.scss";
+
+export default function RailManage() {
+  return (
+    <div className="main-page">
+      <main className="bg-white rounded-xl h-full ml-4 mr-6 overflow-auto">
+        <div>12</div>
+      </main>
+    </div>
+  );
+}
--- a/src/services/measure/type.ts
+++ b/src/services/measure/type.ts
@ -17,7 +17,7 @@ export type MeasureRecord = {
  name: "某某铁路"; ///测量名称
  lineName: "河北段"; //线路名称
  location: "100米处"; //位置
-  // direction: "左"; //方向
+  direction: "左"; //方向
 };


--- a/src/store/device/deviceState.ts
+++ b/src/store/device/deviceState.ts
@ -25,7 +25,6 @@ export const deviceStateSlice = createSlice({
 		},
 	},
 });
-// 导出加减的方法
 export const { updateDeviceState } = deviceStateSlice.actions;

 // 默认导出