使用type="cesium"地图

master^2
LiuJiaNan 2026-07-27 16:17:49 +08:00
parent b61ac2d2e0
commit 722c4771e6
3 changed files with 60 additions and 56 deletions

View File

@ -85,7 +85,7 @@ function Add(props) {
const deviceList = data.devices.map((item, index) => ({ ...item, key: item.id || index })); const deviceList = data.devices.map((item, index) => ({ ...item, key: item.id || index }));
setDevices(deviceList); setDevices(deviceList);
// 同步设置Form的设备数据 // 同步设置Form的设备数据
form.setFieldValue('devicesForm', deviceList.map(d => ({ form.setFieldValue("devicesForm", deviceList.map(d => ({
deviceName: d.deviceName, deviceName: d.deviceName,
deviceModel: d.deviceModel, deviceModel: d.deviceModel,
deviceQty: d.deviceQty, deviceQty: d.deviceQty,
@ -101,7 +101,7 @@ function Add(props) {
const personList = data.persons.map((item, index) => ({ ...item, key: item.id || index })); const personList = data.persons.map((item, index) => ({ ...item, key: item.id || index }));
setPersons(personList); setPersons(personList);
// 同步设置Form的人员数据 // 同步设置Form的人员数据
form.setFieldValue('personsForm', personList.map(p => ({ form.setFieldValue("personsForm", personList.map(p => ({
personName: p.personName, personName: p.personName,
personPhone: p.personPhone, personPhone: p.personPhone,
dutyDesc: p.dutyDesc, dutyDesc: p.dutyDesc,
@ -141,8 +141,8 @@ function Add(props) {
const newDevices = [...devices, createEmptyDevice()]; const newDevices = [...devices, createEmptyDevice()];
setDevices(newDevices); setDevices(newDevices);
// 同步更新Form // 同步更新Form
const formDevices = form.getFieldValue('devicesForm') || []; const formDevices = form.getFieldValue("devicesForm") || [];
form.setFieldValue('devicesForm', [...formDevices, { deviceName: '', deviceModel: '', deviceQty: undefined, deviceLocation: '' }]); form.setFieldValue("devicesForm", [...formDevices, { deviceName: "", deviceModel: "", deviceQty: undefined, deviceLocation: "" }]);
}; };
const removeDevice = (key) => { const removeDevice = (key) => {
@ -154,9 +154,9 @@ function Add(props) {
const newDevices = devices.filter(item => item.key !== key); const newDevices = devices.filter(item => item.key !== key);
setDevices(newDevices); setDevices(newDevices);
// 同步更新Form // 同步更新Form
const formDevices = form.getFieldValue('devicesForm') || []; const formDevices = form.getFieldValue("devicesForm") || [];
formDevices.splice(index, 1); formDevices.splice(index, 1);
form.setFieldValue('devicesForm', [...formDevices]); form.setFieldValue("devicesForm", [...formDevices]);
}; };
const updateDevice = (key, field, value) => { const updateDevice = (key, field, value) => {
@ -165,7 +165,7 @@ function Add(props) {
devices.map(item => (item.key === key ? { ...item, [field]: value } : item)), devices.map(item => (item.key === key ? { ...item, [field]: value } : item)),
); );
// 同步更新Form并触发校验 // 同步更新Form并触发校验
form.setFieldValue(['devicesForm', index, field], value); form.setFieldValue(["devicesForm", index, field], value);
}; };
// 人员相关操作 // 人员相关操作
@ -173,8 +173,8 @@ function Add(props) {
const newPersons = [...persons, createEmptyPerson()]; const newPersons = [...persons, createEmptyPerson()];
setPersons(newPersons); setPersons(newPersons);
// 同步更新Form // 同步更新Form
const formPersons = form.getFieldValue('personsForm') || []; const formPersons = form.getFieldValue("personsForm") || [];
form.setFieldValue('personsForm', [...formPersons, { personName: '', personPhone: '', dutyDesc: '' }]); form.setFieldValue("personsForm", [...formPersons, { personName: "", personPhone: "", dutyDesc: "" }]);
}; };
const removePerson = (key) => { const removePerson = (key) => {
@ -186,9 +186,9 @@ function Add(props) {
const newPersons = persons.filter(item => item.key !== key); const newPersons = persons.filter(item => item.key !== key);
setPersons(newPersons); setPersons(newPersons);
// 同步更新Form // 同步更新Form
const formPersons = form.getFieldValue('personsForm') || []; const formPersons = form.getFieldValue("personsForm") || [];
formPersons.splice(index, 1); formPersons.splice(index, 1);
form.setFieldValue('personsForm', [...formPersons]); form.setFieldValue("personsForm", [...formPersons]);
}; };
const updatePerson = (key, field, value) => { const updatePerson = (key, field, value) => {
@ -197,7 +197,7 @@ function Add(props) {
persons.map(item => (item.key === key ? { ...item, [field]: value } : item)), persons.map(item => (item.key === key ? { ...item, [field]: value } : item)),
); );
// 同步更新Form并触发校验 // 同步更新Form并触发校验
form.setFieldValue(['personsForm', index, field], value); form.setFieldValue(["personsForm", index, field], value);
}; };
const onFinish = async (values) => { const onFinish = async (values) => {
@ -299,7 +299,7 @@ function Add(props) {
wrapperCol={{ span: 18 }} wrapperCol={{ span: 18 }}
onFinish={onFinish} onFinish={onFinish}
> >
<Card title="基本信息" bordered={false} style={{ boxShadow: 'none' }}> <Card title="基本信息" bordered={false} style={{ boxShadow: "none" }}>
{/* 添加隐藏字段保存 roomId */} {/* 添加隐藏字段保存 roomId */}
<Form.Item name="roomId" hidden> <Form.Item name="roomId" hidden>
<Input /> <Input />
@ -359,9 +359,9 @@ function Add(props) {
<Input <Input
placeholder="请输入负责人手机号" placeholder="请输入负责人手机号"
maxLength={11} maxLength={11}
onChange={e => { onChange={(e) => {
const value = e.target.value.replace(/\D/g, ''); const value = e.target.value.replace(/\D/g, "");
form.setFieldValue('principalPhone', value); form.setFieldValue("principalPhone", value);
}} }}
/> />
</Form.Item> </Form.Item>
@ -435,7 +435,7 @@ function Add(props) {
<Card <Card
title="设备信息" title="设备信息"
style={{ marginTop: 24, boxShadow: 'none' }} style={{ marginTop: 24, boxShadow: "none" }}
bordered={false} bordered={false}
extra={( extra={(
<Button type="primary" onClick={addDevice}> <Button type="primary" onClick={addDevice}>
@ -449,7 +449,7 @@ function Add(props) {
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
label="设备名称" label="设备名称"
name={['devicesForm', index, 'deviceName']} name={["devicesForm", index, "deviceName"]}
rules={[ rules={[
{ required: true, message: "请输入设备名称" }, { required: true, message: "请输入设备名称" },
{ max: 50, message: "设备名称不能超过50个字符" }, { max: 50, message: "设备名称不能超过50个字符" },
@ -464,7 +464,7 @@ function Add(props) {
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
label="设备型号" label="设备型号"
name={['devicesForm', index, 'deviceModel']} name={["devicesForm", index, "deviceModel"]}
rules={[ rules={[
{ required: true, message: "请输入设备型号" }, { required: true, message: "请输入设备型号" },
{ max: 50, message: "设备型号不能超过50个字符" }, { max: 50, message: "设备型号不能超过50个字符" },
@ -481,7 +481,7 @@ function Add(props) {
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
label="设备数量" label="设备数量"
name={['devicesForm', index, 'deviceQty']} name={["devicesForm", index, "deviceQty"]}
rules={[{ required: true, message: "请输入设备数量" }]} rules={[{ required: true, message: "请输入设备数量" }]}
> >
<InputNumber <InputNumber
@ -500,7 +500,7 @@ function Add(props) {
<div style={{ display: "flex", alignItems: "center", gap: 8, width: "100%" }}> <div style={{ display: "flex", alignItems: "center", gap: 8, width: "100%" }}>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<Form.Item <Form.Item
name={['devicesForm', index, 'deviceLocation']} name={["devicesForm", index, "deviceLocation"]}
rules={[ rules={[
{ required: true, message: "请输入设备位置" }, { required: true, message: "请输入设备位置" },
{ max: 50, message: "设备位置不能超过50个字符" }, { max: 50, message: "设备位置不能超过50个字符" },
@ -528,7 +528,7 @@ function Add(props) {
<Card <Card
title="人员信息" title="人员信息"
style={{ marginTop: 24, boxShadow: 'none' }} style={{ marginTop: 24, boxShadow: "none" }}
bordered={false} bordered={false}
extra={( extra={(
<Button type="primary" onClick={addPerson}> <Button type="primary" onClick={addPerson}>
@ -542,7 +542,7 @@ function Add(props) {
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
label="人员姓名" label="人员姓名"
name={['personsForm', index, 'personName']} name={["personsForm", index, "personName"]}
rules={[ rules={[
{ required: true, message: "请输入人员姓名" }, { required: true, message: "请输入人员姓名" },
{ max: 50, message: "人员姓名不能超过50个字符" }, { max: 50, message: "人员姓名不能超过50个字符" },
@ -557,7 +557,7 @@ function Add(props) {
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
label="人员手机号" label="人员手机号"
name={['personsForm', index, 'personPhone']} name={["personsForm", index, "personPhone"]}
rules={[ rules={[
{ required: true, message: "请输入人员手机号" }, { required: true, message: "请输入人员手机号" },
{ validator: validatePhone }, { validator: validatePhone },
@ -566,10 +566,10 @@ function Add(props) {
<Input <Input
placeholder="请输入人员手机号" placeholder="请输入人员手机号"
maxLength={11} maxLength={11}
onChange={e => { onChange={(e) => {
const value = e.target.value.replace(/\D/g, ''); const value = e.target.value.replace(/\D/g, "");
updatePerson(person.key, "personPhone", value); updatePerson(person.key, "personPhone", value);
form.setFieldValue(['personsForm', index, 'personPhone'], value); form.setFieldValue(["personsForm", index, "personPhone"], value);
}} }}
/> />
</Form.Item> </Form.Item>
@ -579,7 +579,7 @@ function Add(props) {
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
label="人员值班情况" label="人员值班情况"
name={['personsForm', index, 'dutyDesc']} name={["personsForm", index, "dutyDesc"]}
rules={[ rules={[
{ required: true, message: "请输入人员值班情况" }, { required: true, message: "请输入人员值班情况" },
{ max: 50, message: "人员值班情况不能超过50个字符" }, { max: 50, message: "人员值班情况不能超过50个字符" },
@ -592,7 +592,7 @@ function Add(props) {
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={12}> <Col span={12}>
<div style={{ textAlign: 'right', paddingTop: 30 }}> <div style={{ textAlign: "right", paddingTop: 30 }}>
{index !== 0 && ( {index !== 0 && (
<Button type="primary" danger onClick={() => removePerson(person.key)}> <Button type="primary" danger onClick={() => removePerson(person.key)}>
删除 删除
@ -613,6 +613,7 @@ function Add(props) {
longitude={mapLng} longitude={mapLng}
latitude={mapLat} latitude={mapLat}
onConfirm={handleMapConfirm} onConfirm={handleMapConfirm}
type="cesium"
/> />
</Page> </Page>
); );

View File

@ -74,7 +74,7 @@ function Add(props) {
const deviceList = data.devices.map((item, index) => ({ ...item, key: item.id || index })); const deviceList = data.devices.map((item, index) => ({ ...item, key: item.id || index }));
setDeviceList(deviceList); setDeviceList(deviceList);
// 同步设置Form的设备数据 // 同步设置Form的设备数据
form.setFieldValue('devicesForm', deviceList.map(d => ({ form.setFieldValue("devicesForm", deviceList.map(d => ({
deviceCode: d.deviceCode, deviceCode: d.deviceCode,
deviceName: d.deviceName, deviceName: d.deviceName,
deviceCategory: d.deviceCategory, deviceCategory: d.deviceCategory,
@ -82,7 +82,8 @@ function Add(props) {
deviceLocation: d.deviceLocation, deviceLocation: d.deviceLocation,
paramsSpec: d.paramsSpec, paramsSpec: d.paramsSpec,
}))); })));
} else { }
else {
setDeviceList([createEmptyDevice()]); setDeviceList([createEmptyDevice()]);
} }
} }
@ -134,8 +135,8 @@ function Add(props) {
// 过滤掉空的设备信息 // 过滤掉空的设备信息
const validDevices = devices.filter( const validDevices = devices.filter(
device => device.deviceCode || device.deviceName || device.deviceCategory || device => device.deviceCode || device.deviceName || device.deviceCategory
device.chargeUnit || device.deviceLocation || device.paramsSpec, || device.chargeUnit || device.deviceLocation || device.paramsSpec,
); );
if (validDevices.length === 0) { if (validDevices.length === 0) {
@ -177,14 +178,14 @@ function Add(props) {
const newDevices = [...devices, createEmptyDevice()]; const newDevices = [...devices, createEmptyDevice()];
setDeviceList(newDevices); setDeviceList(newDevices);
// 同步更新Form // 同步更新Form
const formDevices = form.getFieldValue('devicesForm') || []; const formDevices = form.getFieldValue("devicesForm") || [];
form.setFieldValue('devicesForm', [...formDevices, { form.setFieldValue("devicesForm", [...formDevices, {
deviceCode: '', deviceCode: "",
deviceName: '', deviceName: "",
deviceCategory: '', deviceCategory: "",
chargeUnit: '', chargeUnit: "",
deviceLocation: '', deviceLocation: "",
paramsSpec: '' paramsSpec: "",
}]); }]);
}; };
@ -197,9 +198,9 @@ function Add(props) {
const newDevices = devices.filter(item => item.key !== key); const newDevices = devices.filter(item => item.key !== key);
setDeviceList(newDevices); setDeviceList(newDevices);
// 同步更新Form // 同步更新Form
const formDevices = form.getFieldValue('devicesForm') || []; const formDevices = form.getFieldValue("devicesForm") || [];
formDevices.splice(index, 1); formDevices.splice(index, 1);
form.setFieldValue('devicesForm', [...formDevices]); form.setFieldValue("devicesForm", [...formDevices]);
}; };
const updateDevice = (key, field, value) => { const updateDevice = (key, field, value) => {
@ -208,7 +209,7 @@ function Add(props) {
devices.map(item => (item.key === key ? { ...item, [field]: value } : item)), devices.map(item => (item.key === key ? { ...item, [field]: value } : item)),
); );
// 同步更新Form并触发校验 // 同步更新Form并触发校验
form.setFieldValue(['devicesForm', index, field], value); form.setFieldValue(["devicesForm", index, field], value);
}; };
return ( return (
@ -233,7 +234,7 @@ function Add(props) {
wrapperCol={{ span: 18 }} wrapperCol={{ span: 18 }}
onFinish={onFinish} onFinish={onFinish}
> >
<Card title="基本信息" bordered={false} style={{ boxShadow: 'none' }}> <Card title="基本信息" bordered={false} style={{ boxShadow: "none" }}>
<Form.Item name="pumpRoomId" hidden> <Form.Item name="pumpRoomId" hidden>
<Input /> <Input />
</Form.Item> </Form.Item>
@ -292,9 +293,9 @@ function Add(props) {
<Input <Input
placeholder="请输入负责人手机号" placeholder="请输入负责人手机号"
maxLength={11} maxLength={11}
onChange={e => { onChange={(e) => {
const value = e.target.value.replace(/\D/g, ''); const value = e.target.value.replace(/\D/g, "");
form.setFieldValue('principalPhone', value); form.setFieldValue("principalPhone", value);
}} }}
/> />
</Form.Item> </Form.Item>
@ -372,7 +373,7 @@ function Add(props) {
新增 新增
</Button> </Button>
)} )}
style={{ marginTop: 24, boxShadow: 'none' }} style={{ marginTop: 24, boxShadow: "none" }}
bordered={false} bordered={false}
> >
{devices.map((device, index) => ( {devices.map((device, index) => (
@ -381,7 +382,7 @@ function Add(props) {
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
label="设备编号" label="设备编号"
name={['devicesForm', index, 'deviceCode']} name={["devicesForm", index, "deviceCode"]}
rules={[ rules={[
{ required: true, message: "请输入设备编号" }, { required: true, message: "请输入设备编号" },
{ max: 50, message: "设备编号不能超过50个字符" }, { max: 50, message: "设备编号不能超过50个字符" },
@ -396,7 +397,7 @@ function Add(props) {
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
label="设备名称" label="设备名称"
name={['devicesForm', index, 'deviceName']} name={["devicesForm", index, "deviceName"]}
rules={[ rules={[
{ required: true, message: "请输入设备名称" }, { required: true, message: "请输入设备名称" },
{ max: 50, message: "设备名称不能超过50个字符" }, { max: 50, message: "设备名称不能超过50个字符" },
@ -413,7 +414,7 @@ function Add(props) {
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
label="设备分类" label="设备分类"
name={['devicesForm', index, 'deviceCategory']} name={["devicesForm", index, "deviceCategory"]}
rules={[ rules={[
{ required: true, message: "请输入设备分类" }, { required: true, message: "请输入设备分类" },
{ max: 50, message: "设备分类不能超过50个字符" }, { max: 50, message: "设备分类不能超过50个字符" },
@ -428,7 +429,7 @@ function Add(props) {
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
label="负责单位" label="负责单位"
name={['devicesForm', index, 'chargeUnit']} name={["devicesForm", index, "chargeUnit"]}
rules={[ rules={[
{ required: true, message: "请输入负责单位" }, { required: true, message: "请输入负责单位" },
{ max: 50, message: "负责单位不能超过50个字符" }, { max: 50, message: "负责单位不能超过50个字符" },
@ -445,7 +446,7 @@ function Add(props) {
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
label="具体位置" label="具体位置"
name={['devicesForm', index, 'deviceLocation']} name={["devicesForm", index, "deviceLocation"]}
rules={[ rules={[
{ required: true, message: "请输入具体位置" }, { required: true, message: "请输入具体位置" },
{ max: 50, message: "具体位置不能超过50个字符" }, { max: 50, message: "具体位置不能超过50个字符" },
@ -465,7 +466,7 @@ function Add(props) {
<div style={{ display: "flex", alignItems: "center", gap: 8, width: "100%" }}> <div style={{ display: "flex", alignItems: "center", gap: 8, width: "100%" }}>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<Form.Item <Form.Item
name={['devicesForm', index, 'paramsSpec']} name={["devicesForm", index, "paramsSpec"]}
rules={[ rules={[
{ required: true, message: "请输入设备参数和规格" }, { required: true, message: "请输入设备参数和规格" },
{ max: 50, message: "设备参数和规格不能超过50个字符" }, { max: 50, message: "设备参数和规格不能超过50个字符" },
@ -503,6 +504,7 @@ function Add(props) {
longitude={mapLng} longitude={mapLng}
latitude={mapLat} latitude={mapLat}
onConfirm={handleMapConfirm} onConfirm={handleMapConfirm}
type="cesium"
/> />
</Page> </Page>
); );

View File

@ -88,7 +88,7 @@ function Add(props) {
wrapperCol={{ span: 18 }} wrapperCol={{ span: 18 }}
onFinish={onFinish} onFinish={onFinish}
> >
<Card title="基本信息" bordered={false} style={{ boxShadow: 'none' }}> <Card title="基本信息" bordered={false} style={{ boxShadow: "none" }}>
<Row gutter={24}> <Row gutter={24}>
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
@ -290,6 +290,7 @@ function Add(props) {
longitude={mapLng} longitude={mapLng}
latitude={mapLat} latitude={mapLat}
onConfirm={handleMapConfirm} onConfirm={handleMapConfirm}
type="cesium"
/> />
</Page> </Page>
); );