LiLongLong
/
outline-mobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

测量页面选择轨型

master
zhangjiming 5 months ago
parent
24df5513ef
commit
d26fa84f3e
6 changed files with 119 additions and 52 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/CustomNavBar.tsx
  2. 12
      src/components/RailTypeBtn.tsx
  3. 3
      src/index.css
  4. 35
      src/pages/Measure.tsx
  5. 2
      src/pages/Setting.tsx
  6. 23
      src/utils/constant.ts

2
src/components/CustomNavBar.tsx
View File

@ -19,7 +19,7 @@ export default function CustomNavBar({ title }: { title: string }) {
{/** 导航栏 */}
<div className="absolute left-0 top-0 w-full h-full flex items-center px-3 bg-white">
<h1 className="text-lg text-text ml-3">{title}</h1>
<div className="ml-auto flex items-center" onClick={() => setShowDetail(!showDetail)}>
<div className="ml-auto flex items-center cursor-pointer" onClick={() => setShowDetail(!showDetail)}>
<div className="bluetooth-battery flex justify-center items-center">78%</div>
<img src={icon_bluetooth} alt="icon" className="mx-2" />
<span>设备已连接</span>

12
src/components/RailTypeBtn.tsx
View File

@ -0,0 +1,12 @@
// import icon_rail from "../assets/icon_track.svg";
export default function RailTypeBtn({ text, onClick }: { text: string; onClick?: () => void }) {
return (
<div
className="flex items-center border border-[#dfdfdf] rounded-sm bg-white/[0.7] px-2 py-1 gap-2"
onClick={onClick}>
{/* <img src={icon_rail} alt="icon" /> */}
<span className="text-title">{text}</span>
<i className="w-2 h-2 border-t border-r border-[#ccc] rotate-45"></i>
</div>
);
}

3
src/index.css
View File

@ -27,6 +27,7 @@
padding-top: 0.25rem;
padding-bottom: 0.25rem;
color: #fff;
cursor: pointer;
}
.btn-contained:active {
opacity: 0.8;
@ -45,6 +46,7 @@
padding-right: 1rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
cursor: pointer;
}
.btn-outlined:active {
opacity: 0.8;
@ -59,6 +61,7 @@
padding-top: 0.25rem;
padding-bottom: 0.25rem;
color: #333;
cursor: pointer;
}
.btn-elevated:active {
opacity: 0.8;

35
src/pages/Measure.tsx
View File

@ -5,14 +5,20 @@ import MeasurementCanvas, {
BenchmarkShape,
MeasurementCanvasRef,
} from '../components/konva/MeasurementCanvas';
import { useEffect, useRef } from 'react';
import { rail6001 } from '../utils/constant';
import { useEffect, useRef, useState } from 'react';
import { rail6001, railTypes } from '../utils/constant';
import RailTypeBtn from '../components/RailTypeBtn';
import { Picker } from 'antd-mobile';
export default function Measure() {
const navigate = useNavigate();
const canvasRef = useRef<MeasurementCanvasRef>(null);
const [railPickerVisible, setRailPickerVisible] = useState(false);
const [railId, setRailId] = useState<(number | string | null)[]>([1]);
const onSaveClick = () => {
navigate('/measure/save');
};
@ -20,12 +26,16 @@ export default function Measure() {
useEffect(() => {
const benchmarkShapes = JSON.parse(rail6001.points) as BenchmarkShape[];
if (canvasRef.current) {
console.log('解析后的基础图形数据：', benchmarkShapes);
canvasRef.current.setBenchmarkData(benchmarkShapes);
}
}, []);
function railName() {
return railTypes.find(r => r.id === railId[0])?.name || ''
}
return (
<>
<div className="relative pt-[--navBarHeight]">
<div className="absolute top-0 w-full z-10">
<CustomNavBar title={'测量'}></CustomNavBar>
@ -50,6 +60,12 @@ export default function Measure() {
showCoordinates={false}
ref={canvasRef}
/>
<div className="absolute left-1 bottom-1">
<RailTypeBtn
text={railName()}
onClick={() => setRailPickerVisible(true)}
/>
</div>
</div>
</div>
@ -77,5 +93,18 @@ export default function Measure() {
</section>
</main>
</div>
<Picker
columns={[railTypes.map(t => ({ ...t, label: t.name, value: t.id }))]}
visible={railPickerVisible}
onClose={() => {
setRailPickerVisible(false);
}}
value={railId}
onConfirm={v => {
setRailId(v);
}}
/>
</>
);
}

2
src/pages/Setting.tsx
View File

@ -26,7 +26,7 @@ export default function Setting() {
<div className="h-12 flex items-center">
<span>端口</span>
<input
type="number"
type="text"
placeholder="请填写"
className="border-0 outline-none self-stretch text-right flex-1 ml-4"
/>

23
src/utils/constant.ts
View File

@ -7,3 +7,26 @@ export const rail6001 = {
points: "[{\"type\":\"arc\",\"start\": {\"x\": 0,\"y\": 0},\"end\": {\"x\": -9.949,\"y\": 0.165},\"radius\": 300,\"color\":\"#000000\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": -9.949,\"y\": 0.165},\"end\": {\"x\": -25.35,\"y\": 2.185},\"radius\": 80,\"color\":\"#000000\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": -25.35,\"y\": 2.185},\"end\": {\"x\": -35.4,\"y\": 14.2},\"radius\": 13,\"color\":\"#000000\",\"side\":\"right\"},{\"type\":\"line\",\"start\": {\"x\": -35.4,\"y\": 14.2},\"end\": {\"x\": -36.317,\"y\": 32.539},\"color\":\"#000000\"},{\"type\":\"arc\",\"start\": {\"x\": -36.317,\"y\": 32.539},\"end\": {\"x\": -32.904,\"y\": 37.532},\"radius\": 5,\"color\":\"#000000\",\"side\":\"right\"},{\"type\":\"line\",\"start\": {\"x\": -32.904,\"y\": 37.532},\"end\": {\"x\": -20,\"y\": 41.833},\"color\":\"#000000\"},{\"type\":\"arc\",\"start\": {\"x\": 0,\"y\": 0},\"end\": {\"x\": 9.949,\"y\": 0.165},\"radius\": 300,\"color\":\"#000000\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": 9.949,\"y\": 0.165},\"end\": {\"x\": 25.35,\"y\": 2.185},\"radius\": 80,\"color\":\"#000000\",\"side\":\"left\"},{\"type\":\"arc\",\"start\": {\"x\": 25.35,\"y\": 2.185},\"end\": {\"x\": 35.4,\"y\": 14.2},\"radius\": 13,\"color\":\"#000000\",\"side\":\"left\"},{\"type\":\"line\",\"start\": {\"x\": 35.4,\"y\": 14.2},\"end\": {\"x\": 36.317,\"y\": 32.539},\"color\":\"#000000\"},{\"type\":\"arc\",\"start\": {\"x\": 36.317,\"y\": 32.539},\"end\": {\"x\": 32.904,\"y\": 37.532},\"radius\": 5,\"color\":\"#000000\",\"side\":\"left\"},{\"type\":\"line\",\"start\": {\"x\": 32.904,\"y\": 37.532},\"end\": {\"x\": 20,\"y\": 41.833},\"color\":\"#000000\"}]",
calPoints: "[{\"type\":\"arc\",\"start\": {\"x\": 0,\"y\": 0},\"end\": {\"x\": -9.949,\"y\": 0.165},\"radius\": 300,\"color\":\"#339900\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": -9.949,\"y\": 0.165},\"end\": {\"x\": -25.35,\"y\": 2.185},\"radius\": 80,\"color\":\"#336699\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": -25.35,\"y\": 2.185},\"end\": {\"x\": -35.4,\"y\": 14.2},\"radius\": 13,\"color\":\"#660000\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": 0,\"y\": 0},\"end\": {\"x\": 9.949,\"y\": 0.165},\"radius\": 300,\"color\":\"#99CCCC\",\"side\":\"left\"},{\"type\":\"arc\",\"start\": {\"x\": 9.949,\"y\": 0.165},\"end\": {\"x\": 25.35,\"y\": 2.185},\"radius\": 80,\"color\":\"#CC0033\",\"side\":\"left\"},{\"type\":\"arc\",\"start\": {\"x\": 25.35,\"y\": 2.185},\"end\": {\"x\": 35.4,\"y\": 14.2},\"radius\": 13,\"color\":\"#CC6600\",\"side\":\"left\"}]"
}
export const railTypes = [
{
id: 1,
code: "1",
name: "60轨",
},
{
id: 2,
code: "2",
name: "60N轨",
},
{
id: 3,
code: "3",
name: "50轨",
},
{
id: 4,
code: "4",
name: "43轨",
},
];
Write Preview
Loading…
Cancel
Save