zhangjiming
/
Outline
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加轨型和核校选择静态组件

dev
zhangjiming 5 months ago
parent
72fdac1489
commit
051f0d3798
8 changed files with 98 additions and 2 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. 1
      src/assets/icon_arr_down_s.svg
  2. 1
      src/assets/icon_dest.svg
  3. 1
      src/assets/icon_selected.svg
  4. 1
      src/assets/icon_track.svg
  5. 1
      src/assets/icon_unselect.svg
  6. 65
      src/pages/measure/components/MeasureAction.tsx
  7. 13
      src/pages/measure/components/RadioItem.tsx
  8. 17
      src/pages/measure/components/SelectorBtn.tsx

1
src/assets/icon_arr_down_s.svg
View File

@ -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="11.874804496765137" height="8" viewBox="0 0 11.874804496765137 8"><g><path d="M11.7502,0C11.7502,0,10.5783,0,10.5783,0C10.4986,0,10.4236,0.0390626,10.3768,0.103125C10.3768,0.103125,5.9377,6.22188,5.9377,6.22188C5.9377,6.22188,1.49864,0.103125,1.49864,0.103125C1.45176,0.0390626,1.37676,0,1.29707,0C1.29707,0,0.125198,0,0.125198,0C0.0236354,0,-0.0357396,0.115625,0.0236354,0.198438C0.0236354,0.198438,5.53301,7.79375,5.53301,7.79375C5.73301,8.06875,6.14239,8.06875,6.34082,7.79375C6.34082,7.79375,11.8502,0.198438,11.8502,0.198438C11.9111,0.115625,11.8518,0,11.7502,0C11.7502,0,11.7502,0,11.7502,0Z" fill="#000000" fill-opacity="0.25"/></g></svg>

1
src/assets/icon_dest.svg
View File

@ -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="30" height="30" viewBox="0 0 30 30"><defs><clipPath id="master_svg0_3_00832"><rect x="0" y="0" width="30" height="30" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_3_00832)"><g><path d="M17.522706562499998,15.976019921875L12.4769035625,15.976019921875C11.9401435625,15.976019921875,11.5009765625,15.536859921875,11.5009765625,15.000096921875C11.5009765625,14.463336921875,11.9401435625,14.024169921875,12.4769035625,14.024169921875L17.522706562499998,14.024169921875C18.0594665625,14.024169921875,18.4986365625,14.463336921875,18.4986365625,15.000096921875C18.4986365625,15.536859921875,18.0594665625,15.976019921875,17.522706562499998,15.976019921875Z" fill="#5F5F5F" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M15.9759,12.4771L15.9759,17.5229C15.9759,18.0597,15.5368,18.4989,15,18.4989C14.4633,18.4989,14.0241,18.0597,14.0241,17.5229L14.0241,12.4771C14.0241,11.9403,14.4633,11.5011,15,11.5011C15.5368,11.5011,15.9759,11.9403,15.9759,12.4771ZM6.02305,15.9759L0.97718,15.9759C0.44042,15.9759,0.00125248,15.5368,0.00125248,15C0.00125248,14.4632,0.44042,14.0241,0.97718,14.0241L6.02302,14.0241C6.55978,14.0241,6.99894,14.4632,6.99894,15C6.99898,15.5368,6.55981,15.9759,6.02305,15.9759ZM29.0229,15.9759L23.977,15.9759C23.4402,15.9759,23.0011,15.5368,23.0011,15C23.0011,14.4632,23.4402,14.0241,23.977,14.0241L29.0229,14.0241C29.5596,14.0241,29.9988,14.4632,29.9988,15C29.9988,15.5368,29.5596,15.9759,29.0229,15.9759ZM16.021,0.975927L16.021,6.02183C16.021,6.55859,15.5818,6.99776,15.045,6.99776C14.5083,6.99776,14.0691,6.55859,14.0691,6.02183L14.0691,0.975927C14.0691,0.439167,14.5083,0,15.045,0C15.5818,0,16.021,0.439167,16.021,0.975927ZM16.021,23.9782L16.021,29.0241C16.021,29.5608,15.5818,30,15.045,30C14.5083,30,14.0691,29.5608,14.0691,29.0241L14.0691,23.9782C14.0691,23.4414,14.5083,23.0023,15.045,23.0023C15.5818,23.0023,16.021,23.4414,16.021,23.9782Z" fill="#5F5F5F" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M15.04506640625,27.683050390625C13.34586640625,27.683050390625,11.69707640625,27.350050390625,10.144346406250001,26.693350390625C8.645096406250001,26.059150390625,7.29883640625,25.151550390625,6.14294640625,23.995650390625C4.98705640625,22.839850390625,4.07944640625,21.493550390625,3.44531940625,19.994250390625C2.78858540625,18.441550390625,2.45556640625,16.792750390625002,2.45556640625,15.093650390625C2.45556640625,13.394450390625,2.78855240625,11.745630390625,3.44531940625,10.192930390625001C4.07944640625,8.693680390625001,4.98708640625,7.347380390625,6.14294640625,6.191530390625C7.29879640625,5.035670390625,8.645096406250001,4.128030390625,10.144346406250001,3.493903390625C11.69707640625,2.837169390625,13.34586640625,2.504150390625,15.04506640625,2.504150390625C16.744166406250002,2.504150390625,18.39296640625,2.837136390625,19.94566640625,3.493903390625C21.44496640625,4.128030390625,22.79126640625,5.035640390625,23.94706640625,6.191530390625C25.10296640625,7.347420390625,26.01056640625,8.693680390625001,26.64476640625,10.192930390625001C27.30146640625,11.745630390625,27.63446640625,13.394450390625,27.63446640625,15.093650390625C27.63446640625,16.792750390625002,27.30146640625,18.441550390625,26.64476640625,19.994250390625C26.01056640625,21.493550390625,25.10296640625,22.839850390625,23.94706640625,23.995650390625C22.79126640625,25.151550390625,21.44496640625,26.059150390625,19.94566640625,26.693350390625C18.39296640625,27.350050390625,16.744166406250002,27.683050390625,15.04506640625,27.683050390625ZM15.04506640625,4.456000390625C9.179446406250001,4.456000390625,4.40741640625,9.228030390625001,4.40741640625,15.093650390625C4.40741640625,20.959250390625,9.179446406250001,25.731250390625,15.04506640625,25.731250390625C20.91066640625,25.731250390625,25.68266640625,20.959250390625,25.68266640625,15.093650390625C25.68266640625,9.228030390625001,20.91056640625,4.456000390625,15.04506640625,4.456000390625Z" fill="#5F5F5F" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>

1
src/assets/icon_selected.svg
File diff suppressed because it is too large
View File

1
src/assets/icon_track.svg
File diff suppressed because it is too large
View File

1
src/assets/icon_unselect.svg
File diff suppressed because it is too large
View File

65
src/pages/measure/components/MeasureAction.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
import { Button, Checkbox, CheckboxProps, Drawer, message, Switch } from "antd";
import { Button, Checkbox, CheckboxProps, Drawer, message, Modal, Switch } from "antd";
import { useNavigate } from "react-router";
import {
fetchAnalysisReport,
@ -14,8 +14,12 @@ import { MeasureState, TaskState, TrackRecordSig } from "../../../services/wsTyp
import { useAppDispatch, useAppSelector } from "../../../utils/hooks";
import Gr_round from "../../../assets/green_round.svg";
import Bl_round from "../../../assets/blue_round.svg";
import icon_track from "../../../assets/icon_track.svg";
import icon_dest from "../../../assets/icon_dest.svg";
import MeasurementCanvas, { AnalysisData, BenchmarkShape, MeasurementCanvasRef } from "./konva/MeasurementCanvas";
import "./MeasureAction.scss";
import SelectorBtn from "./SelectorBtn";
import RadioItem from "./RadioItem";
// 创建 websocket 客户端
const wsClient = createWebSocket(sharedWsUrl);
@ -62,6 +66,10 @@ export default function MeasureAction() {
const [statusList, setStatusList] = useState(initialStatusList);
// 打开抽屉（显示分析结果）
const [openDrawer, setOpenDrawer] = useState(false);
// 显示钢轨轨型弹框
const [showRailTypeModel, setShowRailTypeModel] = useState(false);
// 显示核校方式弹框
const [showCalibrationModel, setShowCalibrationModel] = useState(false);
/** ----------------------- 事件处理函数 ----------------------- */
// 切换保存后自动开始新测量
@ -364,7 +372,24 @@ export default function MeasureAction() {
showCoordinates={showGrid}
ref={canvasRef}
/>
{analysisReport && (
<div className="flex mt-2 justify-end items-center gap-4">
<SelectorBtn
imgNode={() => <img src={icon_track} alt="" />}
text={"60轨"}
onClick={() => {
setShowRailTypeModel(true);
}}
/>
<SelectorBtn
imgNode={() => <img src={icon_dest} alt="" />}
text={"尖轨核校"}
onClick={() => {
setShowCalibrationModel(true);
}}
/>
</div>
)}
</div>
</div>
{/* 右侧区域：根据 showAnalysisTable 状态显示测量步骤或分析表格 */}
@ -451,6 +476,42 @@ export default function MeasureAction() {
</>
)}
</Drawer>
<Modal
title={<h1 className="text-text font-medium text-center">请选择钢轨轨型</h1>}
closable={false}
open={showRailTypeModel}
width={360}
footer={
<div className="flex justify-center gap-4">
<Button onClick={() => setShowRailTypeModel(false)}>取消</Button>
<Button type="primary" onClick={() => setShowRailTypeModel(false)}>
确定
</Button>
</div>
}>
<RadioItem label="60轨" selected={true} />
<RadioItem label="70轨" selected={false} />
<RadioItem label="50轨" selected={false} />
</Modal>
<Modal
title={<h1 className="text-text font-medium text-center">请选择核校方式</h1>}
closable={false}
open={showCalibrationModel}
width={360}
footer={
<div className="flex justify-center gap-4">
<Button onClick={() => setShowCalibrationModel(false)}>取消</Button>
<Button type="primary" onClick={() => setShowCalibrationModel(false)}>
确定
</Button>
</div>
}
>
<RadioItem label="尖轨核校" selected={true} />
<RadioItem label="按中心核校钢轨（道岔）" selected={false} />
<RadioItem label="按磨耗核校钢轨-左基准" selected={false} />
</Modal>
</>
);
}

13
src/pages/measure/components/RadioItem.tsx
View File

@ -0,0 +1,13 @@
import icon_select from "../../../assets/icon_selected.svg";
import icon_unselect from "../../../assets/icon_unselect.svg";
export default function RadioItem(props: { label: string; value?: string; selected: boolean; onSelect?: (val: string) => void }) {
return (
<div
className="h-10 border-b border-[#f7f7f7] flex justify-between items-center"
onClick={() => props.onSelect && props.onSelect(props.value || "")}>
<p className="text-sm text-text">{props.label}</p>
<img src={props.selected ? icon_select : icon_unselect} alt="icon" />
</div>
);
}

17
src/pages/measure/components/SelectorBtn.tsx
View File

@ -0,0 +1,17 @@
import { ReactNode } from "react";
import icon_arr from "../../../assets/icon_arr_down_s.svg";
export default function SelectorBtn({ imgNode, text, onClick }: { imgNode: () => ReactNode; text: string; onClick: () => void }) {
return (
<div className="flex items-center gap-2 cursor-pointer" onClick={onClick}>
<div className="w-[24px] h-[24px]">
{imgNode()}
</div>
<div className="flex items-center px-2 border border-[#e7e7e7] rounded h-7 min-w-[120px] gap-2 text-sm ">
<span>{text}</span>
<img src={icon_arr} alt="arr" className="w-2 ml-auto" />
</div>
</div>
);
}
Write Preview
Loading…
Cancel
Save