|
|
|
@ -7,14 +7,11 @@ import { |
|
|
|
Table, |
|
|
|
message, |
|
|
|
Pagination, |
|
|
|
Cascader, |
|
|
|
Modal, |
|
|
|
Dropdown, |
|
|
|
Form, |
|
|
|
Row, |
|
|
|
Col, |
|
|
|
} from "antd"; |
|
|
|
import { pageSizeOptions } from "@/config/character.config.js"; |
|
|
|
import { dictionary } from "@/config/common"; |
|
|
|
import moment from "moment"; |
|
|
|
import "./index.scss"; |
|
|
|
import { DeleteOutlined } from "@ant-design/icons"; |
|
|
|
@ -24,15 +21,14 @@ function OutNvrMgm(props) { |
|
|
|
|
|
|
|
// 默认数据 |
|
|
|
const defaultData = { |
|
|
|
address: "", |
|
|
|
device_name: "", |
|
|
|
road_name: "", //路段名称 |
|
|
|
operator: -1, //运营商 |
|
|
|
name: "", // 设备名称 |
|
|
|
operator_id: "", //运营商 |
|
|
|
road_id: "", //路段名称 |
|
|
|
}; |
|
|
|
// 分页数据 |
|
|
|
const [pageInfo, setPageInfo] = useState({ |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 15, |
|
|
|
pn: 1, |
|
|
|
page_size: 15, |
|
|
|
}); |
|
|
|
// 表单数据 |
|
|
|
const [formData, setFormData] = useState(defaultData); |
|
|
|
@ -50,32 +46,30 @@ function OutNvrMgm(props) { |
|
|
|
list: [], |
|
|
|
}); |
|
|
|
|
|
|
|
const roadSelectRef = useRef(); |
|
|
|
const [editModalVisible, setEditModalVisible] = useState(false); |
|
|
|
const [editStatus, setEditStatus] = useState(false); |
|
|
|
const [storeData, setStoreData] = useState([{ label: "全部", value: -1 }]); //所属商户 |
|
|
|
const [visible, setVisible] = useState(false); |
|
|
|
const [storeData, setStoreData] = useState([]); //所属商户 |
|
|
|
const [roadData, setRoadData] = useState([]); |
|
|
|
const [deviceTypeData, setDeviceTypeData] = useState([]); |
|
|
|
const [roadData1, setRoadData1] = useState([]); |
|
|
|
|
|
|
|
const [formSubmitData, setFormSubmitData] = useState({ |
|
|
|
const defRowData = { |
|
|
|
address: "", |
|
|
|
create_time: "", |
|
|
|
device_name: "", |
|
|
|
name: "", |
|
|
|
operator_id: "", |
|
|
|
road_id: "", |
|
|
|
ip_address: "", |
|
|
|
network_mode: "", |
|
|
|
operator: "", |
|
|
|
id: "", |
|
|
|
password: "", |
|
|
|
port: "", |
|
|
|
road_name: "", |
|
|
|
type: "", |
|
|
|
user_name: "", |
|
|
|
video_port: "", |
|
|
|
}); |
|
|
|
network_mode: "", |
|
|
|
user_name: "", |
|
|
|
password: "", |
|
|
|
lng_lat: "", |
|
|
|
address: "", |
|
|
|
}; |
|
|
|
// 行数据 |
|
|
|
const [rowData, setRowData] = useState(defRowData); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
getSelectList(); |
|
|
|
getDeviceType(); |
|
|
|
}, []); |
|
|
|
|
|
|
|
// 访问接口，获取表格 |
|
|
|
@ -86,7 +80,7 @@ function OutNvrMgm(props) { |
|
|
|
const getSelectList = () => { |
|
|
|
ajax.getOperator().then( |
|
|
|
(res) => { |
|
|
|
setStoreData([...storeData, ...res.data]); |
|
|
|
setStoreData(res?.data || []); |
|
|
|
}, |
|
|
|
(err) => { |
|
|
|
console.log(err); |
|
|
|
@ -94,6 +88,31 @@ function OutNvrMgm(props) { |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
const getAllRoad = (id, setData) => { |
|
|
|
ajax.getAllRoadByOperatort({ operator_id: id }).then( |
|
|
|
(res) => { |
|
|
|
setData(res?.data || []); |
|
|
|
}, |
|
|
|
(err) => { |
|
|
|
console.log(err); |
|
|
|
} |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
// 获取道路详情 |
|
|
|
async function getRoadInfo(id, callback) { |
|
|
|
await ajax.getOrpRoadInfo({ id }).then( |
|
|
|
(res) => { |
|
|
|
// console.log(res?.data); |
|
|
|
callback(res?.data || {}); |
|
|
|
}, |
|
|
|
(err) => { |
|
|
|
console.log(err); |
|
|
|
callback({}); |
|
|
|
} |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
// 获取列表数据 |
|
|
|
const getData = () => { |
|
|
|
let postData = { ...formData }; |
|
|
|
@ -102,7 +121,7 @@ function OutNvrMgm(props) { |
|
|
|
} |
|
|
|
// console.log(postData); |
|
|
|
setTabLoading(true); |
|
|
|
ajax.getNVRListData({ ...postData, ...pageInfo }).then( |
|
|
|
ajax.getOutNvrList({ ...postData, ...pageInfo }).then( |
|
|
|
(res) => { |
|
|
|
if (parseInt(res?.status) === 20000) { |
|
|
|
setResultData(res?.data || {}); |
|
|
|
@ -123,7 +142,7 @@ function OutNvrMgm(props) { |
|
|
|
// 检索数据 |
|
|
|
const handleSearch = () => { |
|
|
|
setLoading(true); |
|
|
|
setPageInfo({ ...pageInfo, ...{ pageNum: 1 } }); |
|
|
|
setPageInfo({ ...pageInfo, ...{ pn: 1 } }); |
|
|
|
setHoldData(formData); |
|
|
|
setIsAjax(!isAjax); |
|
|
|
}; |
|
|
|
@ -134,15 +153,17 @@ function OutNvrMgm(props) { |
|
|
|
// position: ["bottomCenter"], |
|
|
|
showQuickJumper: true, |
|
|
|
showSizeChanger: true, |
|
|
|
current: pageInfo.pageNum, |
|
|
|
current: pageInfo.pn, |
|
|
|
total: resultData?.total, |
|
|
|
// showTotal: () => `共 ${resultData.total || 0} 条`, |
|
|
|
pageSize: pageInfo.pageSize, |
|
|
|
pageSizeOptions: Array.from(new Set([...[15], ...(pageSizeOptions || [])])), |
|
|
|
pageSize: pageInfo.page_size, |
|
|
|
pageSizeOptions: Array.from( |
|
|
|
new Set([...[15], ...(dictionary?.pageSizeOptions || [])]) |
|
|
|
), |
|
|
|
onChange: (current, size) => { |
|
|
|
setPageInfo({ |
|
|
|
...pageInfo, |
|
|
|
...{ pageNum: pageInfo.pageSize == size ? current : 1, pageSize: size }, |
|
|
|
...{ pn: pageInfo.page_size == size ? current : 1, page_size: size }, |
|
|
|
}); |
|
|
|
setIsAjax(!isAjax); |
|
|
|
}, |
|
|
|
@ -155,60 +176,40 @@ function OutNvrMgm(props) { |
|
|
|
const handleDel = (item) => { |
|
|
|
Modal.confirm({ |
|
|
|
title: "确认删除？", |
|
|
|
content: `是否确认删除设备：${item.device_name} ？`, |
|
|
|
content: `是否确认删除设备：${item.name} ？`, |
|
|
|
icon: <DeleteOutlined />, |
|
|
|
onOk: () => { |
|
|
|
handleDelToServer(item.id) |
|
|
|
.then((msg) => { |
|
|
|
message.success(msg || "删除成功"); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
message.error(err); |
|
|
|
}); |
|
|
|
handleDelToServer(item.id); |
|
|
|
}, |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
const getRoadById = (id) => { |
|
|
|
return new Promise((resolved, rejected) => { |
|
|
|
ajax |
|
|
|
.getAllRoad({ operator_id: id }) |
|
|
|
.then((e) => { |
|
|
|
if (e.status == 20000) { |
|
|
|
resolved(e.data); |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.error(err); |
|
|
|
rejected(err); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
const handleDelToServer = (id) => { |
|
|
|
return new Promise((resolved, rejected) => { |
|
|
|
ajax |
|
|
|
.nvrDel({ id: id }) |
|
|
|
.then((e) => { |
|
|
|
if (e.status == 20000) { |
|
|
|
resolved(e.message); |
|
|
|
ajax.nvrDel({ id: id }).then( |
|
|
|
(res) => { |
|
|
|
if (res.status == 20000) { |
|
|
|
message.success(res.message || "删除成功"); |
|
|
|
} else { |
|
|
|
message.error(res.message); |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
rejected(err); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
(err) => { |
|
|
|
console.log(err); |
|
|
|
message.error("服务器异常"); |
|
|
|
} |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
// 编辑 |
|
|
|
const handleEdit = (item) => { |
|
|
|
setEditStatus(true); |
|
|
|
form.setFieldsValue({ |
|
|
|
...item, |
|
|
|
}); |
|
|
|
setEditModalVisible(true); |
|
|
|
setRowData(item); |
|
|
|
form.setFieldsValue(item); |
|
|
|
setVisible(true); |
|
|
|
}; |
|
|
|
const editModalCancel = () => { |
|
|
|
setEditModalVisible(false); |
|
|
|
form.resetFields(); |
|
|
|
|
|
|
|
// 取消 |
|
|
|
const onCancel = () => { |
|
|
|
setVisible(false); |
|
|
|
}; |
|
|
|
|
|
|
|
// 操作-下拉 |
|
|
|
@ -224,22 +225,22 @@ function OutNvrMgm(props) { |
|
|
|
width: 60, |
|
|
|
align: "center", |
|
|
|
render: (val, row, index) => { |
|
|
|
return <>{index + 1 + pageInfo.pageSize * (pageInfo.pageNum - 1)}</>; |
|
|
|
return <>{index + 1 + pageInfo.page_size * (pageInfo.pn - 1)}</>; |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "设备名称", |
|
|
|
dataIndex: "device_name", |
|
|
|
dataIndex: "name", |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "区域", |
|
|
|
dataIndex: "road_name", |
|
|
|
dataIndex: "area_name", |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "所属车场", |
|
|
|
dataIndex: "operqator", |
|
|
|
dataIndex: "road_name", |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
@ -270,7 +271,7 @@ function OutNvrMgm(props) { |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "更新时间", |
|
|
|
dataIndex: "create_time", |
|
|
|
dataIndex: "update_time", |
|
|
|
align: "center", |
|
|
|
width: 110, |
|
|
|
}, |
|
|
|
@ -313,93 +314,71 @@ function OutNvrMgm(props) { |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const getDeviceType = () => { |
|
|
|
ajax.getDeviceTypeList().then((e) => { |
|
|
|
setDeviceTypeData([...deviceTypeData, ...e.data]); |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
const handleEditFinish = () => { |
|
|
|
console.log("form finish"); |
|
|
|
}; |
|
|
|
|
|
|
|
const nvrUpdate = (params) => { |
|
|
|
return new Promise((resolved, rejected) => { |
|
|
|
ajax |
|
|
|
.nvrUpdate(params) |
|
|
|
.then((e) => { |
|
|
|
if (e.status == 20000) { |
|
|
|
resolved(e.message); |
|
|
|
// 表单改变事件 |
|
|
|
const handleForm = async (changedValues, allValues) => { |
|
|
|
// console.log(changedValues, allValues); |
|
|
|
let obj = {}; |
|
|
|
let key = Object.keys(changedValues)[0]; |
|
|
|
let val = Object.values(changedValues)[0]; |
|
|
|
switch (key) { |
|
|
|
case "operator_id": |
|
|
|
obj[key] = val; |
|
|
|
obj["road_id"] = ""; |
|
|
|
obj["lng_lat"] = ""; |
|
|
|
obj["address"] = ""; |
|
|
|
if (val) { |
|
|
|
getAllRoad(val, setRoadData1); |
|
|
|
} else { |
|
|
|
setRoadData1([]); |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
rejected(err); |
|
|
|
break; |
|
|
|
case "road_id": |
|
|
|
obj[key] = val; |
|
|
|
if (val) { |
|
|
|
await getRoadInfo(val, (e) => { |
|
|
|
obj["lng_lat"] = e?.lng_lat || ""; |
|
|
|
obj["address"] = e?.address || ""; |
|
|
|
}); |
|
|
|
}); |
|
|
|
}; |
|
|
|
const nvrAdd = (params) => { |
|
|
|
return new Promise((resolved, rejected) => { |
|
|
|
ajax |
|
|
|
.nvrAdd(params) |
|
|
|
.then((e) => { |
|
|
|
if (e.status == 20000) { |
|
|
|
resolved(e.message); |
|
|
|
} else { |
|
|
|
obj["lng_lat"] = ""; |
|
|
|
obj["address"] = ""; |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
rejected(err); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}; |
|
|
|
break; |
|
|
|
|
|
|
|
const handleAdd = () => { |
|
|
|
setEditStatus(false); |
|
|
|
form.resetFields(); |
|
|
|
setEditModalVisible(true); |
|
|
|
}; |
|
|
|
|
|
|
|
const handleRoadChange = (v) => { |
|
|
|
ajax.getRoadInfo({ road_id: v }).then((e) => { |
|
|
|
if (e.status == 20000) { |
|
|
|
form.setFieldValue("address", e.data.address); |
|
|
|
form.setFieldValue("lng_lat", e.data.lng_lat); |
|
|
|
default: |
|
|
|
obj[key] = val; |
|
|
|
break; |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
const handleOperaChange = (id) => { |
|
|
|
// let roadSelect = document.querySelectorAll('.fenceModal .road-selector .ant-select-selection-item') |
|
|
|
// if (roadSelect.length) { |
|
|
|
// roadSelect[0].innerText = '' |
|
|
|
// } |
|
|
|
setFormSubmitData({ |
|
|
|
...formSubmitData, |
|
|
|
road_name: undefined, |
|
|
|
}); |
|
|
|
form.setFieldValue("road_name", ""); |
|
|
|
getRoadById(id).then((data) => { |
|
|
|
setRoadData(data); |
|
|
|
}); |
|
|
|
form.setFieldsValue({ ...allValues, ...obj }); |
|
|
|
}; |
|
|
|
|
|
|
|
const handleSubmit = () => { |
|
|
|
if (editStatus) { |
|
|
|
// 编辑 |
|
|
|
nvrUpdate(form.getFieldsValue()).then((msg) => { |
|
|
|
message.success(msg || "设备更新成功"); |
|
|
|
setEditModalVisible(false); |
|
|
|
getData(); |
|
|
|
}); |
|
|
|
// 表单提交 |
|
|
|
const onFinish = (values) => { |
|
|
|
// console.log(values); |
|
|
|
ajax[values?.id ? "doEditOutNvr" : "doAddOutNvr"](values).then( |
|
|
|
(res) => { |
|
|
|
if (res?.status == 20000) { |
|
|
|
message.success(res.message); |
|
|
|
// setPageInfo({ ...pageInfo, ...{ pn: 1 } }); |
|
|
|
setVisible(false); |
|
|
|
setIsAjax(!isAjax); |
|
|
|
} else { |
|
|
|
// 新增 |
|
|
|
nvrAdd(form.getFieldsValue()).then((msg) => { |
|
|
|
message.success(msg || "设备添加成功"); |
|
|
|
setEditModalVisible(false); |
|
|
|
getData(); |
|
|
|
}); |
|
|
|
message.error(res.message); |
|
|
|
} |
|
|
|
}, |
|
|
|
(err) => { |
|
|
|
console.log(err); |
|
|
|
} |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
// 添加按钮 |
|
|
|
const handleAdd = () => { |
|
|
|
setRowData(defRowData); |
|
|
|
form.setFieldsValue(defRowData); |
|
|
|
// form.resetFields(); |
|
|
|
setVisible(true); |
|
|
|
}; |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<div className="out-nvr-mgm"> |
|
|
|
@ -411,9 +390,9 @@ function OutNvrMgm(props) { |
|
|
|
<Input |
|
|
|
className="form-con" |
|
|
|
placeholder="请输入设备名称" |
|
|
|
value={formData.device_name} |
|
|
|
value={formData.name} |
|
|
|
onChange={(e) => |
|
|
|
setFormData({ ...formData, device_name: e.target.value }) |
|
|
|
setFormData({ ...formData, name: e.target.value }) |
|
|
|
} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
@ -422,9 +401,17 @@ function OutNvrMgm(props) { |
|
|
|
<Select |
|
|
|
className="form-con" |
|
|
|
placeholder="请选择" |
|
|
|
allowClear |
|
|
|
options={storeData || []} |
|
|
|
value={formData.operator} |
|
|
|
onChange={(v) => setFormData({ ...formData, operator: v })} |
|
|
|
value={formData.operator_id || undefined} |
|
|
|
onChange={(v) => { |
|
|
|
setFormData({ ...formData, operator_id: v, road_id: "" }); |
|
|
|
if (v) { |
|
|
|
getAllRoad(v, setRoadData); |
|
|
|
} else { |
|
|
|
setRoadData([]); |
|
|
|
} |
|
|
|
}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div className="yisa-search"> |
|
|
|
@ -432,9 +419,12 @@ function OutNvrMgm(props) { |
|
|
|
<Select |
|
|
|
className="form-con" |
|
|
|
placeholder="请选择" |
|
|
|
options={storeData || []} |
|
|
|
value={formData.road_name} |
|
|
|
onChange={(v) => setFormData({ ...formData, road_name: v })} |
|
|
|
allowClear |
|
|
|
showSearch |
|
|
|
optionFilterProp="label" |
|
|
|
options={roadData || []} |
|
|
|
value={formData.road_id || undefined} |
|
|
|
onChange={(v) => setFormData({ ...formData, road_id: v })} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div className="form-btn"> |
|
|
|
@ -460,9 +450,7 @@ function OutNvrMgm(props) { |
|
|
|
<div className="row-head"> |
|
|
|
<span className="number-wrapper"> |
|
|
|
<span className="letter">共查询到</span> |
|
|
|
<span className="total-number"> |
|
|
|
{resultData.total_records || 0}{" "} |
|
|
|
</span> |
|
|
|
<span className="total-number">{resultData.total || 0} </span> |
|
|
|
<span className="letter">条结果</span> |
|
|
|
</span> |
|
|
|
<div> |
|
|
|
@ -492,208 +480,117 @@ function OutNvrMgm(props) { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<Modal |
|
|
|
open={editModalVisible} |
|
|
|
onCancel={editModalCancel} |
|
|
|
open={visible} |
|
|
|
width={720} |
|
|
|
onCancel={onCancel} |
|
|
|
footer={null} |
|
|
|
className="fence" |
|
|
|
title={editStatus ? "设备编辑" : "新增设备"} |
|
|
|
className="modal-nvr" |
|
|
|
title={rowData?.id ? "编辑设备" : "新增设备"} |
|
|
|
> |
|
|
|
<div className="fenceModal"> |
|
|
|
<div className="form-container"> |
|
|
|
<Form |
|
|
|
form={form} |
|
|
|
labelCol={{ span: 10 }} |
|
|
|
name="edit-form" |
|
|
|
onFinish={handleEditFinish} |
|
|
|
> |
|
|
|
<Row> |
|
|
|
<Col span={12}> |
|
|
|
<Form.Item |
|
|
|
label={"设备名称"} |
|
|
|
name={"device_name"} |
|
|
|
rules={[{ required: true, message: "设备名称不能为空" }]} |
|
|
|
initialValues={rowData} |
|
|
|
onValuesChange={handleForm} |
|
|
|
onFinish={onFinish} |
|
|
|
> |
|
|
|
<Form.Item name="id" hidden> |
|
|
|
<Input /> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
<Col span={12}> |
|
|
|
{/* <Form.Item |
|
|
|
label={"所属商户"} |
|
|
|
name={"operator"} |
|
|
|
rules={[{ required: true, message: '所属商户不能为空' }]} |
|
|
|
> |
|
|
|
<Input/> |
|
|
|
</Form.Item> */} |
|
|
|
<div className="row-line"> |
|
|
|
<Form.Item |
|
|
|
label={"设备类型"} |
|
|
|
name={"id"} |
|
|
|
rules={[{ required: true, message: "设备类型不能为空" }]} |
|
|
|
label={"设备名称"} |
|
|
|
name={"name"} |
|
|
|
rules={[{ required: true, message: "设备名称不能为空" }]} |
|
|
|
> |
|
|
|
<Select |
|
|
|
ref={roadSelectRef} |
|
|
|
placeholder="请选择" |
|
|
|
value={form.device_id} |
|
|
|
onChange={(v) => console.log(v)} |
|
|
|
options={deviceTypeData} |
|
|
|
/> |
|
|
|
<Input autoComplete="off" /> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
<Row> |
|
|
|
<Col span={12}> |
|
|
|
{/* <Form.Item |
|
|
|
label={"所属路段"} |
|
|
|
name={"road_name"} |
|
|
|
rules={[{ required: true, message: '所属路段不能为空' }]} |
|
|
|
> |
|
|
|
<Input/> |
|
|
|
</Form.Item> */} |
|
|
|
<Form.Item |
|
|
|
label={"所属商户"} |
|
|
|
name={"operator_id"} |
|
|
|
rules={[{ required: true, message: "所属商户不能为空" }]} |
|
|
|
> |
|
|
|
<Select |
|
|
|
placeholder="请选择" |
|
|
|
value={form.operator_id} |
|
|
|
onChange={handleOperaChange} |
|
|
|
options={storeData.filter( |
|
|
|
(item) => item.label != "全部" |
|
|
|
)} |
|
|
|
/> |
|
|
|
<Select placeholder="请选择" options={storeData} /> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
<Col span={12}> |
|
|
|
</div> |
|
|
|
<div className="row-line"> |
|
|
|
<Form.Item |
|
|
|
label={"所属路段"} |
|
|
|
name={"road_name"} |
|
|
|
rules={[{ required: true, message: "所属路段不能为空" }]} |
|
|
|
label={"所属车场"} |
|
|
|
name={"road_id"} |
|
|
|
rules={[{ required: true, message: "所属商户不能为空" }]} |
|
|
|
> |
|
|
|
<Select |
|
|
|
ref={roadSelectRef} |
|
|
|
placeholder="请选择" |
|
|
|
className="road-selector" |
|
|
|
value={form.road_name} |
|
|
|
onChange={handleRoadChange} |
|
|
|
options={roadData} |
|
|
|
showSearch |
|
|
|
optionFilterProp="label" |
|
|
|
options={roadData1} |
|
|
|
/> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
<Row> |
|
|
|
<Col span={12}> |
|
|
|
<Form.Item |
|
|
|
label={"经纬度"} |
|
|
|
label={<span className="required">经纬度</span>} |
|
|
|
name={"lng_lat"} |
|
|
|
rules={[{ required: true, message: "经纬度不能为空" }]} |
|
|
|
> |
|
|
|
<Input disabled /> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
<Col span={12}> |
|
|
|
</div> |
|
|
|
<div className="row-line"> |
|
|
|
<Form.Item |
|
|
|
label={"地址"} |
|
|
|
label={<span className="required">地址</span>} |
|
|
|
name={"address"} |
|
|
|
rules={[{ required: true, message: "地址不能为空" }]} |
|
|
|
> |
|
|
|
<Input disabled /> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
<Row> |
|
|
|
<Col span={12}> |
|
|
|
<Form.Item |
|
|
|
label={"网络模式"} |
|
|
|
name={"network_mode"} |
|
|
|
rules={[{ required: true, message: "网络模式不能为空" }]} |
|
|
|
> |
|
|
|
<Select |
|
|
|
placeholder="请选择" |
|
|
|
value={form.network_mode} |
|
|
|
options={[ |
|
|
|
{ |
|
|
|
value: "固网", |
|
|
|
label: "固网", |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: "无线网络", |
|
|
|
label: "无线网络", |
|
|
|
}, |
|
|
|
]} |
|
|
|
/> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
<Col span={12}> |
|
|
|
<Form.Item |
|
|
|
label={"视频端口号"} |
|
|
|
name={"video_port"} |
|
|
|
rules={[ |
|
|
|
{ required: true, message: "视频端口号不能为空" }, |
|
|
|
]} |
|
|
|
> |
|
|
|
<Input /> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
<Row> |
|
|
|
<Col span={12}> |
|
|
|
<Form.Item |
|
|
|
label={"IP地址"} |
|
|
|
name={"ip_address"} |
|
|
|
rules={[{ required: true, message: "ip地址不能为空" }]} |
|
|
|
> |
|
|
|
<Input /> |
|
|
|
<Input autoComplete="off" /> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
<Col span={12}> |
|
|
|
</div> |
|
|
|
<div className="row-line"> |
|
|
|
<Form.Item |
|
|
|
label={"端口号"} |
|
|
|
name={"port"} |
|
|
|
rules={[{ required: true, message: "端口号不能为空" }]} |
|
|
|
> |
|
|
|
<Input /> |
|
|
|
<Input autoComplete="off" /> |
|
|
|
</Form.Item> |
|
|
|
|
|
|
|
<Form.Item |
|
|
|
label={"视频端口号"} |
|
|
|
name={"video_port"} |
|
|
|
rules={[{ required: true, message: "视频端口号不能为空" }]} |
|
|
|
> |
|
|
|
<Input autoComplete="off" /> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
<Row> |
|
|
|
<Col span={12}> |
|
|
|
</div> |
|
|
|
<div className="row-line"> |
|
|
|
<Form.Item |
|
|
|
label={"用户名"} |
|
|
|
name={"user_name"} |
|
|
|
rules={[{ required: true, message: "用户名不能为空" }]} |
|
|
|
> |
|
|
|
<Input /> |
|
|
|
<Input autoComplete="off" /> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
<Col span={12}> |
|
|
|
|
|
|
|
<Form.Item |
|
|
|
label={"密码"} |
|
|
|
name={"password"} |
|
|
|
rules={[{ required: true, message: "密码不能为空" }]} |
|
|
|
> |
|
|
|
<Input /> |
|
|
|
<Input autoComplete="off" /> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
</Form> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="submitBtn"> |
|
|
|
<button |
|
|
|
type="primary" |
|
|
|
className="submit" |
|
|
|
onClick={() => handleSubmit()} |
|
|
|
> |
|
|
|
<Form.Item className="submitBtn"> |
|
|
|
<Button type="primary" className="submit" htmlType="submit"> |
|
|
|
确定 |
|
|
|
</button> |
|
|
|
<button |
|
|
|
type="primary" |
|
|
|
className="cancel" |
|
|
|
onClick={() => editModalCancel()} |
|
|
|
> |
|
|
|
</Button> |
|
|
|
<Button className="cancel" onClick={onCancel}> |
|
|
|
取消 |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</Button> |
|
|
|
</Form.Item> |
|
|
|
</Form> |
|
|
|
</div> |
|
|
|
</Modal> |
|
|
|
</div> |
|
|
|
|
fengxiang
2 years ago