You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

632 lines
19 KiB

  1. /* eslint-disable array-callback-return */
  2. import { Button, Form, Input, message, Select, InputNumber } from "antd";
  3. import { useEffect, useState } from "react";
  4. import { useNavigate } from "react-router";
  5. import { saveMeasurement_new } from "../../../services/measure/analysis";
  6. import { useAppSelector } from "../../../utils/hooks";
  7. import {
  8. getOrgListService,
  9. dictionaryListService,
  10. queryStationData
  11. } from "../../../services/ktj/org";
  12. import { useAppDispatch } from "../../../utils/hooks";
  13. import { setOrgData } from "../../../store/ktj/orgState";
  14. import type {
  15. OrgItem,
  16. GwdDicItem,
  17. KTJ_BASE_TYPE,
  18. options,
  19. dataSourceOptions,
  20. unitTypesOptions,
  21. unitType,
  22. extraDescType
  23. } from "../../../services/ktjTypes";
  24. import { RAIN_TYPES, XB_CODES, DATA_SOURCE } from "../../../constant/index";
  25. import "./MeasureAction.scss";
  26. export default function MeasureConfig() {
  27. const { Option } = Select;
  28. const navigate = useNavigate();
  29. const systemState = useAppSelector((store) => store.systemState);
  30. const [messageApi, contextHolder] = message.useMessage();
  31. const dispatch = useAppDispatch();
  32. const measureState = useAppSelector((store) => store.measureState);
  33. const [extraDesc, setExtraDesc] = useState<extraDescType>()
  34. const onFinish = (values: any) => {
  35. let mtValue = values["meters"]
  36. //百米小于100时, 补齐3位。 比如 1 :"001", 10: "010"
  37. if (mtValue < 100) {
  38. mtValue = String(mtValue).padStart(3, '0');
  39. }
  40. const params = {
  41. operator: values["operator"],//操作员
  42. name: values["name"],//测量名称
  43. location: values["location"],//位置
  44. direction: values["direction"],//方向
  45. tljCode: values["tljCode"],//铁路局
  46. gwdCode: values["gwdCode"],//铁路段
  47. xmCode: values["xmCode"],//铁路线
  48. lineClassify: values["lineClassify"],//线路分类
  49. dataType: values["dataType"],//采集方式
  50. dataSource: values["dataSource"],//数据来源
  51. railSize: values["railSize"],//轨型
  52. xbCode: values["xbCode"],//行别
  53. unitType: values["unitType"],//股别
  54. mileage: `${values['kilometre']}+${mtValue}`,//里程
  55. stationCode: values['stationCode'],//车站
  56. batch: values['batch'],//批次
  57. radius: values["radius"],//半径
  58. turnoutNum: values["turnoutNum"],//道岔号
  59. sleeperNum: values["sleeperNum"],//枕木号
  60. extraDesc:JSON.stringify(extraDesc),
  61. alignPoints:[]
  62. };
  63. const orgItem = {
  64. tljCode: values["tljCode"],//铁路局
  65. gwdCode: values["gwdCode"],//铁路段
  66. xmCode: values["xmCode"],//铁路线
  67. }
  68. localStorage.setItem('orgInfo', JSON.stringify(orgItem));
  69. params.extraDesc = JSON.stringify(extraDesc)
  70. let measureData = measureState.measureData;
  71. if(measureData && measureData.length){
  72. params.alignPoints = measureData
  73. }
  74. localStorage.setItem('measureForm', JSON.stringify(params))
  75. saveMeasurement_new(params)
  76. .then((res) => {
  77. if (res.success) {
  78. messageApi.error(res.data.info);
  79. } else {
  80. message.success("保存成功");
  81. navigate("../action");
  82. }
  83. })
  84. .catch((e) => {
  85. navigate("../action");
  86. });
  87. };
  88. let user = localStorage.getItem("user") || "";
  89. let userInfo = (user && JSON.parse(user)) || {};
  90. const [form] = Form.useForm();
  91. useEffect(() => {
  92. queryKTJOrgList();
  93. queryDictionaryList();
  94. resetDataSource()
  95. resetRailTypes()
  96. }, []);
  97. useEffect(()=>{
  98. }, [measureState.measureData])
  99. //给股别分类
  100. const [unitTypeList, setUnitTypeList] = useState<unitTypesOptions[]>([])
  101. const resetRailTypes = () => {
  102. let zxOptions:unitTypesOptions = {
  103. label:'直线',
  104. options:[]
  105. }
  106. let qxOptions:unitTypesOptions = {
  107. label:'曲线',
  108. options:[]
  109. }
  110. let zxList:unitType[] = []
  111. let qxList:unitType[] = []
  112. RAIN_TYPES.map(item => {
  113. if(item.type === 1){
  114. zxList.push({
  115. label: item.name,
  116. value: item.code,
  117. })
  118. }else{
  119. qxList.push({
  120. label: item.name,
  121. value: item.code,
  122. })
  123. }
  124. })
  125. zxOptions.options = zxList
  126. qxOptions.options = qxList
  127. setUnitTypeList([zxOptions, qxOptions])
  128. }
  129. const [xbCodeOptions, setXbCodeOptions] = useState<dataSourceOptions[]>()
  130. const resetDataSource = () => {
  131. let options:dataSourceOptions[] = []
  132. DATA_SOURCE.map(item => {
  133. let optionMap:any = {
  134. label: item.name,
  135. value: item.code,
  136. options:[]
  137. }
  138. let childOptions:options[] = []
  139. item.child.map(ele => {
  140. childOptions.push({
  141. label: ele.name,
  142. value: ele.code
  143. })
  144. optionMap.options = childOptions
  145. })
  146. options.push(optionMap)
  147. })
  148. setXbCodeOptions(options)
  149. }
  150. //初始化科天健机构数据
  151. let [SJLY_List, setSJLYList] = useState<KTJ_BASE_TYPE[]>([]);
  152. let [WRPS_CJFS_List, setWRPSCJFSList] = useState<KTJ_BASE_TYPE[]>([]);
  153. let [WRPS_GGGX_List, setWRPSGGGXList] = useState<KTJ_BASE_TYPE[]>([]);
  154. let [XLFL_List, setXLFLList] = useState<KTJ_BASE_TYPE[]>([]);
  155. const queryDictionaryList = () => {
  156. dictionaryListService().then((res) => {
  157. if (res && res.data) {
  158. const { WRPS_CJFS, WRPS_GGGX, XLFL } = res.data;
  159. const SJLY:KTJ_BASE_TYPE[] = res.data.SJLY
  160. if(SJLY && SJLY.length){
  161. let sjlylist = SJLY.filter(item => item.key === 'XLDC' || item.key === 'DCDC')
  162. setSJLYList(sjlylist);
  163. }
  164. if(WRPS_CJFS && WRPS_CJFS.length){
  165. setWRPSCJFSList(WRPS_CJFS);
  166. }
  167. if(WRPS_GGGX && WRPS_GGGX.length){
  168. setWRPSGGGXList(WRPS_GGGX);
  169. }
  170. if(XLFL && XLFL.length){
  171. setXLFLList(XLFL);
  172. }
  173. }
  174. });
  175. };
  176. //获取机构数据
  177. const [KTJOrgList, setKTJOrgList] = useState<OrgItem[]>([]);
  178. const queryKTJOrgList = () => {
  179. getOrgListService()
  180. .then((res) => {
  181. let list: options[] = [];
  182. if (res && res.data) {
  183. let resData: OrgItem[] = res.data;
  184. setKTJOrgList(resData);
  185. dispatch(setOrgData(resData));
  186. resData.map((item) => {
  187. list.push({
  188. value: item.key,
  189. label: item.value,
  190. });
  191. });
  192. }
  193. })
  194. .catch((e) => {});
  195. };
  196. //选择机构时change
  197. const [gwdDicList, setGwdDicList] = useState<GwdDicItem[]>([]);
  198. const [gwdCodeValue, setGwdCodeValue] = useState<string>();
  199. const [xmCodeValue, setXmCodeValue] = useState<string>();
  200. const [gwdDicOptions, setGwdDicOptions] = useState<options[]>([]);
  201. const [railDicOptions, setRailDicOptions] = useState<options[]>([]);
  202. const [orgGwdDicList, setOrgGwdDicList] = useState<GwdDicItem[]>([])
  203. const onOrgChange = (value: string, option:any) => {
  204. let list = KTJOrgList.filter((item) => item.key === value);
  205. form.resetFields(["gwdCode", "xmCode"]);
  206. if (list && list.length) {
  207. let orgItem: OrgItem = list[0];
  208. setExtraDesc({...extraDesc,orgName:option.label})
  209. if (orgItem && orgItem.gwdDicList) {
  210. let listOptoins: options[] = [];
  211. setGwdDicList(orgItem.gwdDicList);
  212. setOrgGwdDicList(orgItem.gwdDicList)
  213. orgItem.gwdDicList.map((item) => {
  214. listOptoins.push({
  215. value: item.key,
  216. label: item.value,
  217. });
  218. });
  219. setGwdDicOptions(listOptoins);
  220. setGwdCodeValue(listOptoins[0].value);
  221. }
  222. }
  223. };
  224. const onGwdChange = (value: string, option:any) => {
  225. let cloneGwdDicList = [...orgGwdDicList];
  226. form.resetFields(["xmCode"]);
  227. let list = cloneGwdDicList.filter((item) => item.key === value);
  228. if (list && list.length) {
  229. let gwdDicItem: GwdDicItem = list[0];
  230. setExtraDesc({...extraDesc,gwdName:option.label})
  231. if (gwdDicItem && gwdDicItem.railDicList) {
  232. let railOptions: options[] = [];
  233. gwdDicItem.railDicList.map((item) => {
  234. railOptions.push({
  235. value: item.key,
  236. label: item.value,
  237. });
  238. });
  239. if(railOptions && railOptions.length){
  240. setRailDicOptions(railOptions);
  241. setXmCodeValue(railOptions[0].value);
  242. }
  243. }
  244. }
  245. };
  246. //车站数据
  247. const [stationList, setStationList] = useState<KTJ_BASE_TYPE[]>([])
  248. const queryStation = (value:string, option:any) => {
  249. form.resetFields(["stationCode"]);
  250. let tljCode = form.getFieldValue("tljCode")
  251. let gwdCode = form.getFieldValue("gwdCode")
  252. let xmCode = form.getFieldValue("xmCode")
  253. const params = {
  254. tljCode,
  255. gwdCode,
  256. xmCode
  257. }
  258. setExtraDesc({...extraDesc,xmName:option.label})
  259. queryStationData(params).then(res => {
  260. if(res && res.data){
  261. setStationList(res.data)
  262. }else{
  263. setStationList([])
  264. }
  265. const measureForm = localStorage.getItem('measureForm')
  266. if (measureForm) {
  267. form.setFieldsValue({
  268. ...JSON.parse(measureForm)
  269. });
  270. }
  271. })
  272. }
  273. useEffect(()=>{
  274. if(systemState.orgInfo){
  275. const cloneOrgItem = systemState.orgInfo
  276. if(cloneOrgItem.value){
  277. const org = JSON.parse(cloneOrgItem.value)
  278. onOrgChange(org[0].value, org[0])
  279. onGwdChange(org[1].value, org[1])
  280. form.setFieldsValue({
  281. tljCode:org[0].value,
  282. gwdCode: org[1].value,
  283. xmCode: org[2].value
  284. });
  285. queryStation(org[2].value, org[2])
  286. }
  287. }
  288. },[KTJOrgList, xmCodeValue, gwdCodeValue, systemState.orgInfo])
  289. useEffect(()=>{
  290. if(systemState.accountInfo){
  291. const cloneAccountItem = systemState.accountInfo
  292. if(cloneAccountItem.value){
  293. form.setFieldsValue({
  294. operator:cloneAccountItem.value
  295. })
  296. }
  297. }
  298. },[systemState.accountInfo])
  299. const onRailTypeChange = (value:string, option:any) => {
  300. setExtraDesc({...extraDesc,railSizeName:option.label})
  301. }
  302. //数据来源change
  303. const [dataSource, setDataSource] = useState('')
  304. const onDataSourceChange = (value:string, option:any) => {
  305. setExtraDesc({...extraDesc,dataSourceName:option.label})
  306. form.resetFields(["xbCode"]);
  307. setDataSource(value)
  308. }
  309. //车站
  310. const onSatioinChange = (value:string, option:any) => {
  311. setExtraDesc({...extraDesc,stationName:option.label})
  312. }
  313. //股别change
  314. const [unitType, setUnitType] = useState<number>()
  315. const onUnitTypeChange = (value:string) => {
  316. RAIN_TYPES.map(item => {
  317. if(item.code === value){
  318. setUnitType(item.type)
  319. }
  320. })
  321. }
  322. useEffect(() => {
  323. const initData = {
  324. operator: "klj_test",
  325. direction: "左",
  326. }
  327. form.setFieldsValue(initData);
  328. }, [userInfo.nickname, form]);
  329. return (
  330. <>
  331. {contextHolder}
  332. <div>
  333. <Form
  334. form={form}
  335. labelCol={{ span: 8 }}
  336. wrapperCol={{ span: 16 }}
  337. size="large"
  338. initialValues={{ remember: true }}
  339. onFinish={onFinish}
  340. autoComplete="off"
  341. >
  342. <div className="layout">
  343. <Form.Item
  344. label="操作员"
  345. name="operator"
  346. rules={[{ required: true, message: "请输入操作员姓名" }]}
  347. >
  348. <Input />
  349. </Form.Item>
  350. <Form.Item
  351. label="测量名称"
  352. name="name"
  353. rules={[{ required: true, message: "请输入测量名称" }]}
  354. >
  355. <Input placeholder="请输入测量名称" />
  356. </Form.Item>
  357. <Form.Item
  358. label="铁路局"
  359. name="tljCode"
  360. rules={[{ required: true, message: "请选择铁路局" }]}
  361. >
  362. <Select
  363. onChange={onOrgChange}
  364. placeholder="请选择铁路段"
  365. >
  366. {KTJOrgList.map((item) => (
  367. <Option key={item.key} value={item.key}>{item.value}</Option>
  368. ))}
  369. </Select>
  370. </Form.Item>
  371. <Form.Item
  372. label="铁路段"
  373. name="gwdCode"
  374. rules={[{ required: true, message: "请选择铁路段" }]}
  375. >
  376. <Select
  377. onChange={onGwdChange}
  378. placeholder="请选择铁路段"
  379. value={gwdCodeValue}
  380. options={gwdDicOptions.map((item) => ({ label: item.label, value: item.value }))}
  381. >
  382. </Select>
  383. </Form.Item>
  384. <Form.Item
  385. label="铁路线"
  386. name="xmCode"
  387. rules={[{ required: true, message: "请选择铁路线" }]}
  388. >
  389. <Select
  390. placeholder="请选择铁路线"
  391. value={xmCodeValue}
  392. onChange={queryStation}
  393. options={railDicOptions.map((item) => ({ label: item.label, value: item.value }))}
  394. >
  395. </Select>
  396. </Form.Item>
  397. <Form.Item
  398. label="轨型"
  399. name="railSize"
  400. rules={[{ required: true, message: "请选择轨型" }]}
  401. >
  402. <Select
  403. placeholder="请选择轨型"
  404. onChange={onRailTypeChange}
  405. options={WRPS_GGGX_List.map((item) => ({
  406. label: item.value,
  407. value: item.key,
  408. }))}
  409. ></Select>
  410. </Form.Item>
  411. <Form.Item
  412. label="数据来源"
  413. name="dataSource"
  414. rules={[{ required: true, message: "请选择数据来源" }]}
  415. >
  416. <Select
  417. placeholder="请选择数据来源"
  418. onChange={onDataSourceChange}
  419. options={SJLY_List.map((item) => ({
  420. label: item.value,
  421. value: item.key,
  422. }))}
  423. ></Select>
  424. </Form.Item>
  425. <Form.Item
  426. label="车站"
  427. name="stationCode"
  428. rules={[{ required: true, message: "请选择车站" }]}
  429. >
  430. <Select
  431. placeholder="请选择车站"
  432. onChange={onSatioinChange}
  433. >
  434. {stationList.map((item) => (
  435. <Option key={item.key} value={item.key}>{item.value}</Option>
  436. ))}
  437. </Select>
  438. </Form.Item>
  439. <Form.Item
  440. label="线路分类"
  441. name="lineClassify"
  442. rules={[{ required: true, message: "请选择线路分类" }]}
  443. >
  444. <Select
  445. placeholder="请选择线路分类"
  446. options={XLFL_List.map((item) => ({
  447. label: item.value,
  448. value: item.key,
  449. }))}
  450. ></Select>
  451. </Form.Item>
  452. <Form.Item
  453. label="采集方式"
  454. name="dataType"
  455. rules={[{ required: true, message: "请选择采集方式" }]}
  456. >
  457. <Select
  458. placeholder="请选择采集方式"
  459. options={WRPS_CJFS_List.map((item) => ({
  460. label: item.value,
  461. value: item.key,
  462. }))}
  463. ></Select>
  464. </Form.Item>
  465. <Form.Item
  466. label="批次"
  467. name="batch"
  468. rules={[{ required: true, message: "请输入批次" }]}
  469. >
  470. <Input placeholder="请输入批次" />
  471. </Form.Item>
  472. {/* <Form.Item
  473. label="位置"
  474. name="location"
  475. rules={[{ required: false, message: "请输入位置" }]}
  476. >
  477. <Input placeholder="请输入位置" />
  478. </Form.Item>
  479. <Form.Item
  480. label="方向"
  481. name="direction"
  482. rules={[{ required: false, message: "请输入方向" }]}
  483. >
  484. <Select
  485. className="w-[5rem]"
  486. options={[
  487. { value: "左", label: "左侧" },
  488. { value: "右", label: "右侧" },
  489. ]}
  490. />
  491. </Form.Item> */}
  492. {dataSource === 'DCDC' ? (
  493. <>
  494. <Form.Item
  495. label="道岔号"
  496. name="turnoutNum"
  497. rules={[{ required: true, message: "请输入道岔号" }]}
  498. >
  499. <InputNumber className="w-[18vw]" placeholder="请输入道岔号" />
  500. </Form.Item>
  501. <Form.Item
  502. label="枕木号"
  503. name="sleeperNum"
  504. rules={[{ required: true, message: "请输入枕木号" }]}
  505. >
  506. <InputNumber className="w-[18vw]" placeholder="请输入枕木号" />
  507. </Form.Item>
  508. <Form.Item
  509. label="行别"
  510. name="xbCode"
  511. rules={[{ required: true, message: "请选择行别" }]}
  512. >
  513. <Select placeholder="请选择行别" options={xbCodeOptions}>
  514. </Select>
  515. </Form.Item>
  516. </>
  517. ) : (
  518. <Form.Item
  519. label="行别"
  520. name="xbCode"
  521. rules={[{ required: true, message: "请选择行别" }]}
  522. >
  523. <Select placeholder="请选择行别">
  524. {XB_CODES.map((item) => (
  525. <Option key={item.code} value={item.code}>
  526. {item.name}
  527. </Option>
  528. ))}
  529. </Select>
  530. </Form.Item>
  531. )}
  532. {dataSource === "XLDC" &&
  533. <div style={{display:"flex"}}>
  534. <Form.Item
  535. label="里程"
  536. style={{marginLeft:"5vw"}}
  537. name="kilometre"
  538. rules={[{ required: true, message: "请输入" }]}
  539. >
  540. <InputNumber className="w-[7vw]" placeholder="公里" />
  541. </Form.Item>
  542. <Form.Item
  543. >
  544. +
  545. </Form.Item>
  546. <Form.Item
  547. name="meters"
  548. style={{marginLeft:"10px"}}
  549. rules={[{ required: true, message: "请输入" }]}
  550. >
  551. <InputNumber className="w-[6vw]" placeholder="百米" />
  552. </Form.Item>
  553. </div>
  554. }
  555. <Form.Item
  556. label="股别"
  557. name="unitType"
  558. rules={[{ required: true, message: "请选择股别" }]}
  559. >
  560. <Select placeholder="请选择股别" onChange={onUnitTypeChange} options={unitTypeList}>
  561. </Select>
  562. </Form.Item>
  563. {unitType === 2 &&
  564. <Form.Item
  565. label="半径"
  566. name="radius"
  567. rules={[{ required: true, message: "请输入半径" }]}
  568. >
  569. <InputNumber className="w-[18vw]" placeholder="请输入半径" />
  570. </Form.Item>
  571. }
  572. </div>
  573. <div className="flex justify-center w-[60vw] mt-[15vh]">
  574. <Form.Item label={null} >
  575. <Button style={{ width: 150 }} onClick={() => navigate("../action", { replace: true })}>
  576. </Button>
  577. </Form.Item>
  578. <Form.Item label={null}>
  579. <Button
  580. type="primary"
  581. size="large"
  582. style={{ width: 150, marginLeft:"20px" }}
  583. htmlType="submit"
  584. >
  585. </Button>
  586. </Form.Item>
  587. </div>
  588. </Form>
  589. </div>
  590. </>
  591. );
  592. }