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

View File

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

View File

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