添加轨形管理

.env

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

package.json

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

src/index.tsx

@@ -9,7 +9,7 @@ import MeasureDetail from "./pages/measure/components/MeasureDetail";
 import MeasureAction from "./pages/measure/components/MeasureAction";
 import DetailInfo from "./pages/measure/components/Detail";
 
-import RailConfig from "./pages/rail/railConfig";
+import RailConfig from "./pages/rail/RailConfig";
 
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
@@ -37,15 +37,18 @@ const router = createBrowserRouter([
                     {
                         path: "detail",
                         element: <MeasureDetail/>,
+                        children:[
+                            {
+                                path: "detail/:id",
+                                element: <DetailInfo/>,
+                            }
+                        ]
                     },
                     {
                         path: "action",
                         element: <MeasureAction/>,
                     },
-                    {
-                        path: "detail/:id",
-                        element: <DetailInfo/>,
-                    }
+                    
                 ],
             },
             {

src/pages/measure/components/MeasureDetail.tsx

@@ -171,7 +171,7 @@ export default function MeasureDetail() {
 		let resData = await getDetail({id:item.id})
 		console.log('res==测量记录详情=', resData)
 		if(resData){
-			// navigate(`/measure/detail/${item.id}`)
+			navigate(`/measure/detail/${item.id}`)
 			//@ts-ignore
 			getRecordByUuid(resData.data.uuid)
 			//@ts-ignore

src/pages/rail/Upload.tsx

@@ -0,0 +1,62 @@
+import { Button, message, Upload, type UploadProps, Input, Form } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+type ChildProps = {
+  cancel: () => void;
+};
+
+export default function UploadFile(props:ChildProps) {
+  
+  const uploadProps: UploadProps = {
+    name: 'file',
+    action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
+    headers: {
+      authorization: 'authorization-text',
+    },
+    onChange(info) {
+      if (info.file.status !== 'uploading') {
+        console.log(info.file, info.fileList);
+      }
+      if (info.file.status === 'done') {
+        message.success(`${info.file.name} file uploaded successfully`);
+      } else if (info.file.status === 'error') {
+        message.error(`${info.file.name} file upload failed.`);
+      }
+    },
+  };
+
+  const layout = {
+    labelCol: { span: 8 },
+    wrapperCol: { span: 16 },
+  };
+  const [form] = Form.useForm();
+  const onFinish = (values: any) => {
+    console.log(values);
+  };
+
+  const onCancel = () => {
+    form.resetFields()
+    props.cancel();
+  }
+  return (<div className='p-[3rem]'>
+    <Form
+      {...layout}
+      form={form}
+      name="control-hooks"
+      onFinish={onFinish}
+      style={{ maxWidth: 600 }}
+    >
+      <Form.Item name="name" label="轨形名称" rules={[{ required: true }]}>
+        <Input className="w-[200px]" placeholder="轨形名称"></Input>
+      </Form.Item>
+      <Form.Item name="fileData" label="选择文件" rules={[{ required: true , message:'请选择文件'}]}>
+        <Upload {...uploadProps}>
+          <Button icon={<UploadOutlined />}>选择轨形数据文件</Button>
+        </Upload>
+      </Form.Item>
+      <div className="pt-[1rem]" style={{ position: 'absolute', right: 20, textAlign: 'right' }}>
+            <Button onClick={onCancel}>取消</Button>
+            <Button type="primary" htmlType="submit" className="ml-[1rem]">确定</Button>
+        </div>
+    </Form>
+  </div>)
+}

src/pages/rail/railConfig.tsx

@@ -1,10 +1,13 @@
 import "./rail.scss";
-import { Button, Pagination, Table, TableColumnsType } from 'antd'
+import { Button, Modal, Pagination, Table, TableColumnsType } from 'antd'
 import {useState} from 'react'
+import Upload from './Upload'
 export default function RailManage() {
   type RailItem = {
-    id: number;
+    id?: number;
     name: string;
+    createTime: string,
+    updateTime: string
   }
   let [loading, setLoading] = useState()
 
@@ -39,7 +42,11 @@ export default function RailManage() {
   }
 
   let [total, setTotal] = useState()
-  let [tableData, setTableData] = useState<RailItem[]>([])
+  let [tableData, setTableData] = useState<RailItem[]>([{
+    name:'60形',
+    createTime:'2025-03-03',
+    updateTime:''
+  }])
   const columns: TableColumnsType<RailItem> = [{
     title: '序号',
     dataIndex: 'seq',
@@ -62,16 +69,25 @@ export default function RailManage() {
     dataIndex: 'op',
     render:(_, record)=>{
       return <div>
-        <Button type="link" onClick={()=>onShowDetail(record)}>删除</Button>
+        <Button type="link" onClick={()=>onShowDetail(record)}>查看轨形</Button>
       </div>
     }
   }]
+
+  let [uploadVisible, setUploadVisible] = useState(false)
+  const onUploadFile = () => {
+    setUploadVisible(true)
+  }
+
+  const onCancel = () =>{
+    setUploadVisible(false)
+  }
   return (
     <div className="main-page">
       <main className="bg-white rounded-xl h-full ml-4 mr-6 overflow-auto">
         <div className="p-[1rem] flex gap-[5px]">
           <Button type="primary">删除</Button>
-          <Button type="primary">上传轨型</Button>
+          <Button type="primary" onClick={onUploadFile}>上传轨型</Button>
         </div>
 
         <div>
@@ -92,6 +108,9 @@ export default function RailManage() {
             <Pagination  onChange={onPageChange} current={pageNum} pageSizeOptions={[5,10,20,30]} defaultCurrent={pageNum} defaultPageSize={pageSize} total={total}/>
           </div>
         </div>
+        <Modal open={uploadVisible} footer={[]}>
+          <Upload cancel={onCancel}/>
+        </Modal>
       </main>
     </div>
   );