完善测量记录

.env

@@ -1 +1 @@
-REACT_APP_WS_URL=localhost:8080/ws
+REACT_APP_WS_URL=192.168.1.201/ws

package.json

@@ -2,6 +2,7 @@
   "name": "outline",
   "version": "0.1.0",
   "private": true,
+  "proxy":"http://localhost:3001",
   "dependencies": {
     "@babel/core": "^7.16.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",

src/App.tsx

@@ -6,10 +6,17 @@ import { Layout } from "antd";
 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";
 const { Header, Footer, Sider, Content } = Layout;
 
 function App() {
+	console.log('app-------init--------')
+	//连接websocket
+	const wsClient = createWebSocket(sharedWsUrl);
+	wsClient.dataOb.subscribe(data => {
+			console.log('data---', data)
+	})
+
 	const headerStyle: React.CSSProperties = {
 		height: 64,
 		padding: 0,
@@ -23,6 +30,8 @@ function App() {
 	const layoutStyle = {
 		overflow: "hidden",
 	};
+
+
   
 	return (
 		<div className="">

src/components/SideMenu.tsx

@@ -2,36 +2,35 @@ 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 { useNavigate, useLocation } from 'react-router-dom';
 import "./SideMenu.scss";
 
 type MenuItem = Required<MenuProps>["items"][number];
 
 const items: MenuItem[] = [
 	{
-		key: "sub1",
+		key: "measure",
 		label: "测量",
 		icon: <img src={icon_measure} alt="" />,
 		children: [
 			{
-				key: "g1",
+				key: "/measure/config",
 				label: "新测量",
 			},
 			{
-				key: "g2",
+				key: "/measure/detail",
 				label: "测量记录",
-			},
-			{
-				key: "g3",
-				label: "调试",
-			},
+			}
 		],
 	},
 ];
 
 export default function SideMenu() {
+	const navigate = useNavigate();
+	const location = useLocation();
 	const onClick: MenuProps["onClick"] = e => {
-		console.log("click ", e);
+		console.log("click menu----", e);
+		navigate(e.key)
 	};
 	return (
 		<div className="h-[100vh] bg-primary flex flex-col">
@@ -42,6 +41,7 @@ export default function SideMenu() {
 				style={{ width: "100%", backgroundColor: "transparent", color: "#fff" }}
 				defaultSelectedKeys={["1"]}
 				defaultOpenKeys={["sub1"]}
+				selectedKeys={[location.pathname]}
 				mode="inline"
 				items={items}
 			/>

src/index.tsx

@@ -7,7 +7,6 @@ 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 Debug from "./pages/debug/index"
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
@@ -36,10 +35,6 @@ const router = createBrowserRouter([
 						path: "action",
 						element: <MeasureAction />,
 					},
-					{
-						path: "debug",
-						element: <Debug />,
-					},
 				],
 			},
 		],
@@ -48,6 +43,7 @@ const router = createBrowserRouter([
 		path: "/login",
 		element: <Login />,
 	},
+	
 ]);
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

src/pages/debug/index.tsx

@@ -1,3 +0,0 @@
-export default function Debug() {
-  return <div>12</div>
-}

src/pages/measure/components/MeasureAction.tsx

@@ -1,7 +1,9 @@
-import { Button, Checkbox, CheckboxProps, Radio, RadioChangeEvent } from "antd";
-import { useState } from "react";
+import { Button, Checkbox, CheckboxProps, Radio, RadioChangeEvent, message } from "antd";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router";
 import SectionalView from "./SectionalView";
+import { startMeasurement } from "../../../services/measure/analysis"
+import { createWebSocket, sharedWsUrl } from "../../../services/socket";
 
 export default function MeasureAction() {
 	const navigate = useNavigate();
@@ -14,8 +16,29 @@ export default function MeasureAction() {
 		console.log(`checked = ${e.target.checked}`);
 	};
 	const onAnalysisBtnClick = () => {
-		navigate("../detail");
+
+		// navigate("../detail");
 	};
+
+	useEffect(()=>{
+		connectWebpacket()
+	},[])
+
+	const connectWebpacket = ()=>{
+		//连接websocket
+		const wsClient = createWebSocket(sharedWsUrl);
+		let subscription = wsClient.dataOb.subscribe(data => {
+			console.log('data--wsClient-显示上报的数据')
+		});
+		wsClient.connect();
+	}
+	
+	const onStart = () => {
+		startMeasurement().then(res=>{
+			console.log('startMeasurement===', res)
+			message.success('已通知设备开始测量')
+		})
+	}
 	return (
 		<div className="flex h-full ">
 			<div className="flex-none border">
@@ -24,15 +47,16 @@ export default function MeasureAction() {
 			<div className="w-[300px] flex-none py-6">
 				<h1 className="font-medium text-xl text-center">测量步骤</h1>
 				<section className="flex flex-col items-center gap-4 mt-6 border-t border-[#D8D8D8] py-4">
-					<Radio.Group
+					<div>正在测量的状态</div>
+					{/* <Radio.Group
 						value={sideVal}
 						onChange={onSideChange}
 						options={[
 							{ value: 1, label: "测量左侧" },
 							{ value: 2, label: "测量右侧" },
 						]}
-					/>
-					<Button style={{ width: 200 }} size="large" type="primary">
+					/> */}
+					<Button style={{ width: 200 }} size="large" type="primary" onClick={onStart}>
 						开始测量
 					</Button>
 					<Button style={{ width: 200 }} size="large" type="primary" onClick={onAnalysisBtnClick}>

src/pages/measure/components/MeasureDetail.tsx

@@ -1,32 +1,77 @@
 // 引入相关的hooks
 import { useSelector, useDispatch } from "react-redux";
 // 引入对应的方法
-import { increment, decrement } from "../../../store/features/counterSlice";
-
+import {getDetailList} from '../../../services/measure/analysis'
+import { useState, useEffect } from 'react'
+import  {message, type TableColumnsType, type TableProps, Button, Table  } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import type { DetailTable } from "../../../services/measure/type";
 export default function MeasureDetail() {
 	// 通过useSelector直接拿到store中定义的value
     //@ts-ignore
 	const { value } = useSelector(store => store.counter);
 	// 通过useDispatch 派发事件
 	const dispatch = useDispatch();
+	const navigate = useNavigate();
+	function onToMeasure(){
+		navigate('/measure/config')
+	}
 
-	return (
-		<div>
-			<p>{value}</p>
+	useEffect(()=>{
+		getDetailDataList()
+	}, [])
+
+	const [selectRows, setSelectedRow] = useState<DetailTable[]>([])
+	const rowSelection: TableProps<DetailTable>['rowSelection'] = {
+		onChange: (selectedRowKeys: React.Key[], selectedRows: DetailTable[]) => {
+			console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+			setSelectedRow(selectedRows)
+		},
+		getCheckboxProps: (record: DetailTable) => ({
+			name: record.name,
+		}),
+	};
 
-			<button className="px-4 py-2 border"
-				onClick={() => {
-					dispatch(increment());
-				}}>
-				加
-			</button>
+	const columns: TableColumnsType<DetailTable> = [
+		{
+			title: '测量名称',
+			dataIndex: 'name',
+		},
+		{
+			title: '创建者',
+			dataIndex: 'operatorName',
+		},
+		{
+			title: '时间',
+			dataIndex: 'createTime',
+		},
+	];
 
-			<button className="px-4 py-2 border"
-				onClick={() => {
-					dispatch(decrement());
-				}}>
-				减
-			</button>
+	const [tableData, setTableData] = useState<DetailTable[]>([])
+	const getDetailDataList = () => {
+		getDetailList().then(res => {
+			setTableData(res.data.list)
+		})
+	}
+	
+	const [selectionType, setSelectionType] = useState<'checkbox'>('checkbox');
+	const onDel = () => {
+		console.log('selectedRows====', selectRows)
+		message.error('正在做')
+	}
+
+	return (
+		<div>
+			<div className="p-[30px]">
+				<Button type="primary" onClick={onDel}>删除</Button>
+			</div>
+			<div>
+				<Table<DetailTable>
+					rowSelection={{ type: selectionType, ...rowSelection }}
+					columns={columns}
+					dataSource={tableData.map(item => ({ ...item, key: item.name }))}
+				/>
+			</div>
 		</div>
 	);
 }

src/services/measure/analysis.ts

@@ -0,0 +1,16 @@
+import httpRequest, { type BaseResponse } from "../httpRequest";
+import type { DetailTable } from "../../services/measure/type";
+export function startMeasurement() {
+	return httpRequest<BaseResponse>({
+		url: "/measurement-task/start-measurement",
+		method: "POST",
+	});
+}
+
+
+export function getDetailList() {
+	return httpRequest<BaseResponse<{list:DetailTable[]}>>({
+		url: "/measurement-task/cache-measurement",
+		method: "POST",
+	});
+}

src/services/measure/type.ts

@@ -0,0 +1,10 @@
+export type measurementItem = {
+
+}
+
+export type DetailTable = {
+  id:number;
+  operatorName:string;
+  name: string;
+  createTime: string;
+}