LiLongLong
2 months ago
5 changed files with 656 additions and 18 deletions
-
4.env
-
2package.json
-
9src/pages/measure/components/MeasureAction.scss
-
632src/pages/measure/components/MeasureConfig - 副本.tsx
-
27src/pages/measure/components/MeasureConfig.tsx
@ -1,2 +1,2 @@ |
|||
# REACT_APP_WS_URL=192.168.1.114:8080/ws |
|||
REACT_APP_WS_URL=127.1.1.0:8080/ws |
|||
REACT_APP_WS_URL=192.168.1.115:8080/ws |
|||
# REACT_APP_WS_URL=127.1.1.0:8080/ws |
|||
@ -0,0 +1,632 @@ |
|||
/* eslint-disable array-callback-return */ |
|||
import { Button, Form, Input, message, Select, InputNumber } from "antd"; |
|||
import { useEffect, useState } from "react"; |
|||
import { useNavigate } from "react-router"; |
|||
import { saveMeasurement_new } from "../../../services/measure/analysis"; |
|||
import { useAppSelector } from "../../../utils/hooks"; |
|||
import { |
|||
getOrgListService, |
|||
dictionaryListService, |
|||
queryStationData |
|||
} from "../../../services/ktj/org"; |
|||
import { useAppDispatch } from "../../../utils/hooks"; |
|||
import { setOrgData } from "../../../store/ktj/orgState"; |
|||
import type { |
|||
OrgItem, |
|||
GwdDicItem, |
|||
KTJ_BASE_TYPE, |
|||
options, |
|||
dataSourceOptions, |
|||
unitTypesOptions, |
|||
unitType, |
|||
extraDescType |
|||
} from "../../../services/ktjTypes"; |
|||
import { RAIN_TYPES, XB_CODES, DATA_SOURCE } from "../../../constant/index"; |
|||
import "./MeasureAction.scss"; |
|||
export default function MeasureConfig() { |
|||
const { Option } = Select; |
|||
const navigate = useNavigate(); |
|||
const systemState = useAppSelector((store) => store.systemState); |
|||
const [messageApi, contextHolder] = message.useMessage(); |
|||
const dispatch = useAppDispatch(); |
|||
const measureState = useAppSelector((store) => store.measureState); |
|||
const [extraDesc, setExtraDesc] = useState<extraDescType>() |
|||
const onFinish = (values: any) => { |
|||
let mtValue = values["meters"] |
|||
//百米小于100时， 补齐3位。 比如 1 ："001", 10: "010"
|
|||
if (mtValue < 100) { |
|||
mtValue = String(mtValue).padStart(3, '0'); |
|||
} |
|||
const params = { |
|||
operator: values["operator"],//操作员
|
|||
name: values["name"],//测量名称
|
|||
location: values["location"],//位置
|
|||
direction: values["direction"],//方向
|
|||
tljCode: values["tljCode"],//铁路局
|
|||
gwdCode: values["gwdCode"],//铁路段
|
|||
xmCode: values["xmCode"],//铁路线
|
|||
lineClassify: values["lineClassify"],//线路分类
|
|||
dataType: values["dataType"],//采集方式
|
|||
dataSource: values["dataSource"],//数据来源
|
|||
railSize: values["railSize"],//轨型
|
|||
xbCode: values["xbCode"],//行别
|
|||
unitType: values["unitType"],//股别
|
|||
mileage: `${values['kilometre']}+${mtValue}`,//里程
|
|||
stationCode: values['stationCode'],//车站
|
|||
batch: values['batch'],//批次
|
|||
radius: values["radius"],//半径
|
|||
turnoutNum: values["turnoutNum"],//道岔号
|
|||
sleeperNum: values["sleeperNum"],//枕木号
|
|||
extraDesc:JSON.stringify(extraDesc), |
|||
alignPoints:[] |
|||
}; |
|||
|
|||
const orgItem = { |
|||
tljCode: values["tljCode"],//铁路局
|
|||
gwdCode: values["gwdCode"],//铁路段
|
|||
xmCode: values["xmCode"],//铁路线
|
|||
} |
|||
localStorage.setItem('orgInfo', JSON.stringify(orgItem)); |
|||
params.extraDesc = JSON.stringify(extraDesc) |
|||
let measureData = measureState.measureData; |
|||
if(measureData && measureData.length){ |
|||
params.alignPoints = measureData |
|||
} |
|||
localStorage.setItem('measureForm', JSON.stringify(params)) |
|||
saveMeasurement_new(params) |
|||
.then((res) => { |
|||
if (res.success) { |
|||
messageApi.error(res.data.info); |
|||
} else { |
|||
message.success("保存成功"); |
|||
navigate("../action"); |
|||
} |
|||
}) |
|||
.catch((e) => { |
|||
navigate("../action"); |
|||
}); |
|||
}; |
|||
let user = localStorage.getItem("user") || ""; |
|||
let userInfo = (user && JSON.parse(user)) || {}; |
|||
const [form] = Form.useForm(); |
|||
useEffect(() => { |
|||
queryKTJOrgList(); |
|||
queryDictionaryList(); |
|||
resetDataSource() |
|||
resetRailTypes() |
|||
}, []); |
|||
|
|||
useEffect(()=>{ |
|||
}, [measureState.measureData]) |
|||
|
|||
//给股别分类
|
|||
const [unitTypeList, setUnitTypeList] = useState<unitTypesOptions[]>([]) |
|||
const resetRailTypes = () => { |
|||
let zxOptions:unitTypesOptions = { |
|||
label:'直线', |
|||
options:[] |
|||
} |
|||
let qxOptions:unitTypesOptions = { |
|||
label:'曲线', |
|||
options:[] |
|||
} |
|||
let zxList:unitType[] = [] |
|||
let qxList:unitType[] = [] |
|||
RAIN_TYPES.map(item => { |
|||
if(item.type === 1){ |
|||
zxList.push({ |
|||
label: item.name, |
|||
value: item.code, |
|||
}) |
|||
}else{ |
|||
qxList.push({ |
|||
label: item.name, |
|||
value: item.code, |
|||
}) |
|||
} |
|||
}) |
|||
zxOptions.options = zxList |
|||
qxOptions.options = qxList |
|||
setUnitTypeList([zxOptions, qxOptions]) |
|||
} |
|||
|
|||
const [xbCodeOptions, setXbCodeOptions] = useState<dataSourceOptions[]>() |
|||
const resetDataSource = () => { |
|||
let options:dataSourceOptions[] = [] |
|||
DATA_SOURCE.map(item => { |
|||
let optionMap:any = { |
|||
label: item.name, |
|||
value: item.code, |
|||
options:[] |
|||
} |
|||
let childOptions:options[] = [] |
|||
item.child.map(ele => { |
|||
childOptions.push({ |
|||
label: ele.name, |
|||
value: ele.code |
|||
}) |
|||
optionMap.options = childOptions |
|||
}) |
|||
options.push(optionMap) |
|||
}) |
|||
setXbCodeOptions(options) |
|||
} |
|||
|
|||
//初始化科天健机构数据
|
|||
let [SJLY_List, setSJLYList] = useState<KTJ_BASE_TYPE[]>([]); |
|||
let [WRPS_CJFS_List, setWRPSCJFSList] = useState<KTJ_BASE_TYPE[]>([]); |
|||
let [WRPS_GGGX_List, setWRPSGGGXList] = useState<KTJ_BASE_TYPE[]>([]); |
|||
let [XLFL_List, setXLFLList] = useState<KTJ_BASE_TYPE[]>([]); |
|||
const queryDictionaryList = () => { |
|||
dictionaryListService().then((res) => { |
|||
if (res && res.data) { |
|||
const { WRPS_CJFS, WRPS_GGGX, XLFL } = res.data; |
|||
const SJLY:KTJ_BASE_TYPE[] = res.data.SJLY |
|||
if(SJLY && SJLY.length){ |
|||
let sjlylist = SJLY.filter(item => item.key === 'XLDC' || item.key === 'DCDC') |
|||
setSJLYList(sjlylist); |
|||
} |
|||
if(WRPS_CJFS && WRPS_CJFS.length){ |
|||
setWRPSCJFSList(WRPS_CJFS); |
|||
} |
|||
if(WRPS_GGGX && WRPS_GGGX.length){ |
|||
setWRPSGGGXList(WRPS_GGGX); |
|||
} |
|||
if(XLFL && XLFL.length){ |
|||
setXLFLList(XLFL); |
|||
} |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
//获取机构数据
|
|||
const [KTJOrgList, setKTJOrgList] = useState<OrgItem[]>([]); |
|||
const queryKTJOrgList = () => { |
|||
getOrgListService() |
|||
.then((res) => { |
|||
let list: options[] = []; |
|||
if (res && res.data) { |
|||
let resData: OrgItem[] = res.data; |
|||
setKTJOrgList(resData); |
|||
dispatch(setOrgData(resData)); |
|||
resData.map((item) => { |
|||
list.push({ |
|||
value: item.key, |
|||
label: item.value, |
|||
}); |
|||
}); |
|||
} |
|||
}) |
|||
.catch((e) => {}); |
|||
}; |
|||
|
|||
|
|||
//选择机构时change
|
|||
const [gwdDicList, setGwdDicList] = useState<GwdDicItem[]>([]); |
|||
const [gwdCodeValue, setGwdCodeValue] = useState<string>(); |
|||
const [xmCodeValue, setXmCodeValue] = useState<string>(); |
|||
const [gwdDicOptions, setGwdDicOptions] = useState<options[]>([]); |
|||
const [railDicOptions, setRailDicOptions] = useState<options[]>([]); |
|||
const [orgGwdDicList, setOrgGwdDicList] = useState<GwdDicItem[]>([]) |
|||
|
|||
const onOrgChange = (value: string, option:any) => { |
|||
let list = KTJOrgList.filter((item) => item.key === value); |
|||
form.resetFields(["gwdCode", "xmCode"]); |
|||
if (list && list.length) { |
|||
let orgItem: OrgItem = list[0]; |
|||
setExtraDesc({...extraDesc,orgName:option.label}) |
|||
if (orgItem && orgItem.gwdDicList) { |
|||
let listOptoins: options[] = []; |
|||
setGwdDicList(orgItem.gwdDicList); |
|||
setOrgGwdDicList(orgItem.gwdDicList) |
|||
orgItem.gwdDicList.map((item) => { |
|||
listOptoins.push({ |
|||
value: item.key, |
|||
label: item.value, |
|||
}); |
|||
}); |
|||
setGwdDicOptions(listOptoins); |
|||
setGwdCodeValue(listOptoins[0].value); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
const onGwdChange = (value: string, option:any) => { |
|||
let cloneGwdDicList = [...orgGwdDicList]; |
|||
form.resetFields(["xmCode"]); |
|||
let list = cloneGwdDicList.filter((item) => item.key === value); |
|||
if (list && list.length) { |
|||
let gwdDicItem: GwdDicItem = list[0]; |
|||
setExtraDesc({...extraDesc,gwdName:option.label}) |
|||
if (gwdDicItem && gwdDicItem.railDicList) { |
|||
let railOptions: options[] = []; |
|||
gwdDicItem.railDicList.map((item) => { |
|||
railOptions.push({ |
|||
value: item.key, |
|||
label: item.value, |
|||
}); |
|||
}); |
|||
if(railOptions && railOptions.length){ |
|||
setRailDicOptions(railOptions); |
|||
setXmCodeValue(railOptions[0].value); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
|
|||
//车站数据
|
|||
const [stationList, setStationList] = useState<KTJ_BASE_TYPE[]>([]) |
|||
const queryStation = (value:string, option:any) => { |
|||
form.resetFields(["stationCode"]); |
|||
let tljCode = form.getFieldValue("tljCode") |
|||
let gwdCode = form.getFieldValue("gwdCode") |
|||
let xmCode = form.getFieldValue("xmCode") |
|||
const params = { |
|||
tljCode, |
|||
gwdCode, |
|||
xmCode |
|||
} |
|||
setExtraDesc({...extraDesc,xmName:option.label}) |
|||
queryStationData(params).then(res => { |
|||
if(res && res.data){ |
|||
setStationList(res.data) |
|||
}else{ |
|||
setStationList([]) |
|||
} |
|||
const measureForm = localStorage.getItem('measureForm') |
|||
if (measureForm) { |
|||
form.setFieldsValue({ |
|||
...JSON.parse(measureForm) |
|||
}); |
|||
} |
|||
}) |
|||
} |
|||
|
|||
|
|||
useEffect(()=>{ |
|||
if(systemState.orgInfo){ |
|||
const cloneOrgItem = systemState.orgInfo |
|||
if(cloneOrgItem.value){ |
|||
const org = JSON.parse(cloneOrgItem.value) |
|||
onOrgChange(org[0].value, org[0]) |
|||
onGwdChange(org[1].value, org[1]) |
|||
form.setFieldsValue({ |
|||
tljCode:org[0].value, |
|||
gwdCode: org[1].value, |
|||
xmCode: org[2].value |
|||
}); |
|||
queryStation(org[2].value, org[2]) |
|||
} |
|||
} |
|||
},[KTJOrgList, xmCodeValue, gwdCodeValue, systemState.orgInfo]) |
|||
|
|||
|
|||
useEffect(()=>{ |
|||
if(systemState.accountInfo){ |
|||
const cloneAccountItem = systemState.accountInfo |
|||
if(cloneAccountItem.value){ |
|||
form.setFieldsValue({ |
|||
operator:cloneAccountItem.value |
|||
}) |
|||
} |
|||
} |
|||
},[systemState.accountInfo]) |
|||
|
|||
|
|||
const onRailTypeChange = (value:string, option:any) => { |
|||
setExtraDesc({...extraDesc,railSizeName:option.label}) |
|||
} |
|||
|
|||
//数据来源change
|
|||
const [dataSource, setDataSource] = useState('') |
|||
const onDataSourceChange = (value:string, option:any) => { |
|||
setExtraDesc({...extraDesc,dataSourceName:option.label}) |
|||
form.resetFields(["xbCode"]); |
|||
setDataSource(value) |
|||
} |
|||
|
|||
//车站
|
|||
const onSatioinChange = (value:string, option:any) => { |
|||
setExtraDesc({...extraDesc,stationName:option.label}) |
|||
} |
|||
|
|||
//股别change
|
|||
const [unitType, setUnitType] = useState<number>() |
|||
const onUnitTypeChange = (value:string) => { |
|||
RAIN_TYPES.map(item => { |
|||
if(item.code === value){ |
|||
setUnitType(item.type) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
useEffect(() => { |
|||
const initData = { |
|||
operator: "klj_test", |
|||
direction: "左", |
|||
} |
|||
form.setFieldsValue(initData); |
|||
}, [userInfo.nickname, form]); |
|||
|
|||
return ( |
|||
<> |
|||
{contextHolder} |
|||
<div> |
|||
<Form |
|||
form={form} |
|||
labelCol={{ span: 8 }} |
|||
wrapperCol={{ span: 16 }} |
|||
size="large" |
|||
initialValues={{ remember: true }} |
|||
onFinish={onFinish} |
|||
autoComplete="off" |
|||
> |
|||
<div className="layout"> |
|||
<Form.Item |
|||
label="操作员" |
|||
name="operator" |
|||
rules={[{ required: true, message: "请输入操作员姓名" }]} |
|||
> |
|||
<Input /> |
|||
</Form.Item> |
|||
<Form.Item |
|||
label="测量名称" |
|||
name="name" |
|||
rules={[{ required: true, message: "请输入测量名称" }]} |
|||
> |
|||
<Input placeholder="请输入测量名称" /> |
|||
</Form.Item> |
|||
<Form.Item |
|||
label="铁路局" |
|||
name="tljCode" |
|||
rules={[{ required: true, message: "请选择铁路局" }]} |
|||
> |
|||
<Select |
|||
onChange={onOrgChange} |
|||
placeholder="请选择铁路段" |
|||
> |
|||
{KTJOrgList.map((item) => ( |
|||
<Option key={item.key} value={item.key}>{item.value}</Option> |
|||
))} |
|||
</Select> |
|||
</Form.Item> |
|||
|
|||
|
|||
<Form.Item |
|||
label="铁路段" |
|||
name="gwdCode" |
|||
rules={[{ required: true, message: "请选择铁路段" }]} |
|||
> |
|||
<Select |
|||
onChange={onGwdChange} |
|||
placeholder="请选择铁路段" |
|||
value={gwdCodeValue} |
|||
options={gwdDicOptions.map((item) => ({ label: item.label, value: item.value }))} |
|||
> |
|||
</Select> |
|||
</Form.Item> |
|||
|
|||
<Form.Item |
|||
label="铁路线" |
|||
name="xmCode" |
|||
rules={[{ required: true, message: "请选择铁路线" }]} |
|||
> |
|||
<Select |
|||
placeholder="请选择铁路线" |
|||
value={xmCodeValue} |
|||
onChange={queryStation} |
|||
options={railDicOptions.map((item) => ({ label: item.label, value: item.value }))} |
|||
> |
|||
</Select> |
|||
</Form.Item> |
|||
<Form.Item |
|||
label="轨型" |
|||
name="railSize" |
|||
rules={[{ required: true, message: "请选择轨型" }]} |
|||
> |
|||
<Select |
|||
placeholder="请选择轨型" |
|||
onChange={onRailTypeChange} |
|||
options={WRPS_GGGX_List.map((item) => ({ |
|||
label: item.value, |
|||
value: item.key, |
|||
}))} |
|||
></Select> |
|||
</Form.Item> |
|||
|
|||
<Form.Item |
|||
label="数据来源" |
|||
name="dataSource" |
|||
rules={[{ required: true, message: "请选择数据来源" }]} |
|||
> |
|||
<Select |
|||
placeholder="请选择数据来源" |
|||
onChange={onDataSourceChange} |
|||
options={SJLY_List.map((item) => ({ |
|||
label: item.value, |
|||
value: item.key, |
|||
}))} |
|||
></Select> |
|||
</Form.Item> |
|||
|
|||
<Form.Item |
|||
label="车站" |
|||
name="stationCode" |
|||
rules={[{ required: true, message: "请选择车站" }]} |
|||
> |
|||
<Select |
|||
placeholder="请选择车站" |
|||
onChange={onSatioinChange} |
|||
> |
|||
{stationList.map((item) => ( |
|||
<Option key={item.key} value={item.key}>{item.value}</Option> |
|||
))} |
|||
</Select> |
|||
</Form.Item> |
|||
|
|||
<Form.Item |
|||
label="线路分类" |
|||
name="lineClassify" |
|||
rules={[{ required: true, message: "请选择线路分类" }]} |
|||
> |
|||
<Select |
|||
placeholder="请选择线路分类" |
|||
options={XLFL_List.map((item) => ({ |
|||
label: item.value, |
|||
value: item.key, |
|||
}))} |
|||
></Select> |
|||
</Form.Item> |
|||
|
|||
<Form.Item |
|||
label="采集方式" |
|||
name="dataType" |
|||
rules={[{ required: true, message: "请选择采集方式" }]} |
|||
> |
|||
<Select |
|||
placeholder="请选择采集方式" |
|||
options={WRPS_CJFS_List.map((item) => ({ |
|||
label: item.value, |
|||
value: item.key, |
|||
}))} |
|||
></Select> |
|||
</Form.Item> |
|||
|
|||
<Form.Item |
|||
label="批次" |
|||
name="batch" |
|||
rules={[{ required: true, message: "请输入批次" }]} |
|||
> |
|||
<Input placeholder="请输入批次" /> |
|||
</Form.Item> |
|||
|
|||
{/* <Form.Item |
|||
label="位置" |
|||
name="location" |
|||
rules={[{ required: false, message: "请输入位置" }]} |
|||
> |
|||
<Input placeholder="请输入位置" /> |
|||
</Form.Item> |
|||
|
|||
<Form.Item |
|||
label="方向" |
|||
name="direction" |
|||
rules={[{ required: false, message: "请输入方向" }]} |
|||
> |
|||
<Select |
|||
className="w-[5rem]" |
|||
options={[ |
|||
{ value: "左", label: "左侧" }, |
|||
{ value: "右", label: "右侧" }, |
|||
]} |
|||
/> |
|||
</Form.Item> */} |
|||
{dataSource === 'DCDC' ? ( |
|||
<> |
|||
<Form.Item |
|||
label="道岔号" |
|||
name="turnoutNum" |
|||
rules={[{ required: true, message: "请输入道岔号" }]} |
|||
> |
|||
<InputNumber className="w-[18vw]" placeholder="请输入道岔号" /> |
|||
</Form.Item> |
|||
|
|||
<Form.Item |
|||
label="枕木号" |
|||
name="sleeperNum" |
|||
rules={[{ required: true, message: "请输入枕木号" }]} |
|||
> |
|||
<InputNumber className="w-[18vw]" placeholder="请输入枕木号" /> |
|||
</Form.Item> |
|||
|
|||
<Form.Item |
|||
label="行别" |
|||
name="xbCode" |
|||
rules={[{ required: true, message: "请选择行别" }]} |
|||
|
|||
> |
|||
<Select placeholder="请选择行别" options={xbCodeOptions}> |
|||
</Select> |
|||
</Form.Item> |
|||
</> |
|||
) : ( |
|||
<Form.Item |
|||
label="行别" |
|||
name="xbCode" |
|||
rules={[{ required: true, message: "请选择行别" }]} |
|||
> |
|||
<Select placeholder="请选择行别"> |
|||
{XB_CODES.map((item) => ( |
|||
<Option key={item.code} value={item.code}> |
|||
{item.name} |
|||
</Option> |
|||
))} |
|||
</Select> |
|||
</Form.Item> |
|||
)} |
|||
|
|||
{dataSource === "XLDC" && |
|||
<div style={{display:"flex"}}> |
|||
<Form.Item |
|||
label="里程" |
|||
style={{marginLeft:"5vw"}} |
|||
name="kilometre" |
|||
rules={[{ required: true, message: "请输入" }]} |
|||
> |
|||
<InputNumber className="w-[7vw]" placeholder="公里" /> |
|||
</Form.Item> |
|||
<Form.Item |
|||
> |
|||
+ |
|||
</Form.Item> |
|||
<Form.Item |
|||
name="meters" |
|||
style={{marginLeft:"10px"}} |
|||
rules={[{ required: true, message: "请输入" }]} |
|||
> |
|||
<InputNumber className="w-[6vw]" placeholder="百米" /> |
|||
</Form.Item> |
|||
</div> |
|||
} |
|||
|
|||
<Form.Item |
|||
label="股别" |
|||
name="unitType" |
|||
rules={[{ required: true, message: "请选择股别" }]} |
|||
> |
|||
<Select placeholder="请选择股别" onChange={onUnitTypeChange} options={unitTypeList}> |
|||
</Select> |
|||
</Form.Item> |
|||
{unitType === 2 && |
|||
<Form.Item |
|||
label="半径" |
|||
name="radius" |
|||
rules={[{ required: true, message: "请输入半径" }]} |
|||
> |
|||
<InputNumber className="w-[18vw]" placeholder="请输入半径" /> |
|||
</Form.Item> |
|||
} |
|||
|
|||
</div> |
|||
<div className="flex justify-center w-[60vw] mt-[15vh]"> |
|||
<Form.Item label={null} > |
|||
<Button style={{ width: 150 }} onClick={() => navigate("../action", { replace: true })}> |
|||
返回 |
|||
</Button> |
|||
</Form.Item> |
|||
<Form.Item label={null}> |
|||
<Button |
|||
type="primary" |
|||
size="large" |
|||
style={{ width: 150, marginLeft:"20px" }} |
|||
htmlType="submit" |
|||
> |
|||
保存测量 |
|||
</Button> |
|||
</Form.Item> |
|||
</div> |
|||
</Form> |
|||
</div> |
|||
</> |
|||
); |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue