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.
2819 lines
81 KiB
2819 lines
81 KiB
import React, {
|
|
useState,
|
|
useEffect,
|
|
useRef,
|
|
useImperativeHandle,
|
|
forwardRef,
|
|
} from "react";
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
import {
|
|
message,
|
|
Form,
|
|
Pagination,
|
|
Table,
|
|
Space,
|
|
Modal,
|
|
Button,
|
|
Select,
|
|
Row,
|
|
Col,
|
|
Tabs,
|
|
Input,
|
|
Upload,
|
|
Checkbox,
|
|
Tag,
|
|
Radio,
|
|
Descriptions,
|
|
Popover,
|
|
Transfer,
|
|
} from "antd";
|
|
import { UploadOutlined } from "@ant-design/icons";
|
|
import ajax from "@/services";
|
|
import moment from "moment";
|
|
import { dictionary, utils } from "@/config/common";
|
|
import {
|
|
FormSelect,
|
|
ExportBtnNew,
|
|
ExportPMS,
|
|
OptionPanel,
|
|
SystemSearch,
|
|
ResultPanel,
|
|
FormSliderPicker,
|
|
SelectGaodeLngLat,
|
|
ResultFlow,
|
|
AreaCascader,
|
|
ImgResize,
|
|
ImgZoom,
|
|
TreeSelectGroup,
|
|
} from "@/components";
|
|
import "./index.scss";
|
|
import { getToken } from "@/config/cookie";
|
|
import { useSetState, useSessionStorageState, useUpdateEffect } from "ahooks";
|
|
|
|
const { TextArea } = Input;
|
|
const ConfigRoad = (props) => {
|
|
const {
|
|
getRecordList = {}
|
|
} = props
|
|
console.log(getRecordList);
|
|
const navigate = useNavigate();
|
|
//编辑泊位提交的编辑泊位
|
|
const location = useLocation();
|
|
const parking_id = getRecordList.id;
|
|
const operator_id = getRecordList.operator_id;
|
|
// const region_id = location.search.split("&")[2].split("=")[1];
|
|
const [modalBtnLoading, setModalBtnLoading] = useState(false)
|
|
//泊位管理Form
|
|
const [berthForm] = Form.useForm();
|
|
const [dataForm] = Form.useForm();
|
|
const [editPoleForm] = Form.useForm();
|
|
const [ruleForm] = Form.useForm(); //计费规则-添加或编辑规则的Form
|
|
const [getEditData, setGetEditData] = useState({})
|
|
const [getIdValue, setGetIdValue] = useState({})
|
|
//计费规则添加弹窗的泊位选择框
|
|
const [showBerthSelect, setShowBerthSelect] = useState(false);
|
|
//编辑杆位
|
|
const [editTitle, setEditTitle] = useState(false)
|
|
const berthManage = {
|
|
form: [
|
|
{
|
|
label: "泊位号",
|
|
type: "input",
|
|
placeholder: "请输入泊位号",
|
|
name: "berth_code",
|
|
},
|
|
{
|
|
label: "视频设备名称",
|
|
type: "input",
|
|
placeholder: "请输入内容",
|
|
name: "video_content",
|
|
},
|
|
],
|
|
columns: [
|
|
{
|
|
title: "泊位排序",
|
|
dataIndex: "index",
|
|
key: "index",
|
|
align: "center",
|
|
render: (_, record, index) => {
|
|
return index + 1;
|
|
},
|
|
},
|
|
{
|
|
title: "泊位号",
|
|
dataIndex: "berth_code",
|
|
key: "berth_code",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "ETC是否开启",
|
|
dataIndex: "etc_status_name",
|
|
key: "etc_status_name",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "对应视频设备",
|
|
dataIndex: "video_equipment_name",
|
|
key: "video_equipment_name",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "计费规则",
|
|
dataIndex: "rule_id",
|
|
key: "rule_id",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "经纬度",
|
|
dataIndex: "lng_lat",
|
|
key: "lng_lat",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "服务属性",
|
|
dataIndex: "service_type_name",
|
|
key: "service_type_name",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "状态",
|
|
dataIndex: "status",
|
|
key: "status",
|
|
align: "center",
|
|
render: (text) => {
|
|
return text == 1 ? "上线" : text == 2 ? "下线" : "已删除";
|
|
},
|
|
},
|
|
{
|
|
title: "更新时间",
|
|
dataIndex: "update_time",
|
|
key: "update_time",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "操作",
|
|
dataIndex: "operator",
|
|
key: "operator",
|
|
align: "center",
|
|
render: (_, record) => {
|
|
return (
|
|
<>
|
|
<Popover
|
|
content={
|
|
<>
|
|
<div>
|
|
<a
|
|
onClick={() => {
|
|
setBerthModal({ record, visible: true });
|
|
}}
|
|
>
|
|
查看
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
onClick={() => {
|
|
setIsEdit(true);
|
|
setEditBerthModal(true);
|
|
setGetEditData(record);
|
|
berthForm.setFieldsValue({
|
|
berth_code: record.berth_code,
|
|
service_type: record.service_type,
|
|
berth_type: record.berth_type,
|
|
etc_status: record.etc_status,
|
|
});
|
|
setLngLat(record.lng_lat);
|
|
}}
|
|
>
|
|
编辑
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
onClick={() => {
|
|
setConfirmModalData({
|
|
...confirmModalData,
|
|
visible: true,
|
|
type: record.status == 1 ? 2 : 1,
|
|
ids: [record.id],
|
|
func: (ids, status) =>
|
|
ajax.editStatus({
|
|
ids: ids,
|
|
status,
|
|
})
|
|
});
|
|
// console.log(record.status);
|
|
}}
|
|
>
|
|
{record.status == 1 ? "下线" : "上线"}
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
onClick={() => {
|
|
setConfirmModalData({
|
|
...confirmModalData,
|
|
visible: true,
|
|
type: 3,
|
|
ids: [record.id],
|
|
func: (ids, status) =>
|
|
ajax.editStatus({
|
|
ids: ids,
|
|
status,
|
|
})
|
|
});
|
|
}}
|
|
>
|
|
删除
|
|
</a>
|
|
</div>
|
|
</>
|
|
}
|
|
>
|
|
<Button type="primary">操作</Button>
|
|
</Popover>
|
|
</>
|
|
);
|
|
},
|
|
},
|
|
],
|
|
confirmModalData: {
|
|
visible: false,
|
|
type: 1, //1上线 2下线 3 删除
|
|
ids: [],
|
|
},
|
|
initialValues: {
|
|
berth_id: "",
|
|
video_content: "",
|
|
},
|
|
exporturl: "/api/bpm/berth/export",
|
|
downloadUrl: "api/bpm/berth/berth_import_template",
|
|
importProps: {
|
|
name: "file",
|
|
data: { road_id: parking_id },
|
|
action: "/PMS/api/bpm/berth/import",
|
|
headers: {
|
|
Authorization: getToken(),
|
|
},
|
|
onChange(info) {
|
|
if (info.file.status !== "uploading") {
|
|
console.log(info.file, info.fileList);
|
|
}
|
|
if (info.file.status === "done") {
|
|
if (info.file.response.status === 20000) {
|
|
message.success(`${info.file.name} 上传成功`);
|
|
formRef.current.getList();
|
|
} else {
|
|
message.error(info.file.response.message);
|
|
}
|
|
} else if (info.file.status === "error") {
|
|
message.error(`${info.file.name} file upload failed.`);
|
|
}
|
|
},
|
|
},
|
|
search: function (params) {
|
|
ajax
|
|
.getManageList(params)
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
setResultData({
|
|
data: res.data.list,
|
|
total_records: res.data.total,
|
|
});
|
|
setLoading(false)
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
key: "berth_code",
|
|
create: function (params) {
|
|
setIsEdit(false);
|
|
berthForm.resetFields();
|
|
setEditBerthModal(true);
|
|
},
|
|
};
|
|
const [transferSouceData, setTransferSouceData] = useState([]);
|
|
//数据采集设备管理
|
|
const dataDevice = {
|
|
form: [
|
|
{
|
|
label: "设备名称",
|
|
type: "input",
|
|
placeholder: "请输入内容",
|
|
name: "device_name",
|
|
},
|
|
{
|
|
label: "设备编号",
|
|
type: "input",
|
|
placeholder: "请输入内容",
|
|
name: "device_id",
|
|
},
|
|
{
|
|
label: "对应杆位号",
|
|
type: "input",
|
|
placeholder: "请输入内容",
|
|
name: "num",
|
|
},
|
|
{
|
|
label: "状态",
|
|
type: "select",
|
|
placeholder: "请输入内容",
|
|
name: "status",
|
|
options: [
|
|
{
|
|
label: "上线",
|
|
value: 1,
|
|
},
|
|
{
|
|
label: "下线",
|
|
value: 2,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
columns: [
|
|
{
|
|
title: "设备名称",
|
|
dataIndex: "name",
|
|
key: "name",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "设备号",
|
|
dataIndex: "code",
|
|
key: "code",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "设备类型",
|
|
dataIndex: "type_name",
|
|
key: "type_name",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "对应杆位号",
|
|
dataIndex: "pole_position_code",
|
|
key: "pole_position_code",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "状态",
|
|
dataIndex: "operate_status",
|
|
key: "operate_status",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "更新时间",
|
|
dataIndex: "update_time",
|
|
key: "update_time",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "操作",
|
|
dataIndex: "operator",
|
|
key: "operator",
|
|
align: "center",
|
|
render: (_, record) => {
|
|
return (
|
|
<Popover
|
|
trigger="hover"
|
|
content={
|
|
<>
|
|
<div>
|
|
<a
|
|
onClick={() => {
|
|
ajax.getDeviceInfo({ id: record.id }).then((res) => {
|
|
if (res.status === 20000) {
|
|
setDataAcquistionDetail({
|
|
visible: true,
|
|
record: res.data,
|
|
});
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
});
|
|
}}
|
|
>
|
|
查看
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
onClick={() => {
|
|
setGetIdValue(record.id);
|
|
setDataAcquistionModal({
|
|
...dataAcquistionModal,
|
|
visible: true,
|
|
record: record,
|
|
isEdit: 1,
|
|
});
|
|
getEditInRoad(record);
|
|
dataAcquistionModal.form.setFieldsValue({
|
|
name: record.name,
|
|
code: record.code,
|
|
type: record.type_id,
|
|
brand: record.brand_id,
|
|
function: record.function_id,
|
|
note: record.note,
|
|
});
|
|
}}
|
|
>
|
|
编辑
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
onClick={() => {
|
|
setDataStatusChangeModal({
|
|
visible: true,
|
|
type: record.status === 1 ? 2 : 1,
|
|
record: record,
|
|
});
|
|
}}
|
|
>
|
|
{record.status === 1 ? "下线" : "上线"}
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
onClick={() => {
|
|
setDataStatusChangeModal({
|
|
visible: true,
|
|
type: 3,
|
|
record: record,
|
|
});
|
|
}}
|
|
>
|
|
删除
|
|
</a>
|
|
</div>
|
|
</>
|
|
}
|
|
>
|
|
<Button type="primary">操作</Button>
|
|
</Popover>
|
|
);
|
|
},
|
|
},
|
|
],
|
|
exporturl: "/api/bpm/device/export_device",
|
|
downloadUrl: "/api/bpm/device/device_import_template",
|
|
importProps: {
|
|
name: "file",
|
|
data: { road_id: parking_id },
|
|
headers: {
|
|
Authorization: getToken(),
|
|
},
|
|
action: "/PMS/api/bpm/device/import_device",
|
|
onChange(info) {
|
|
if (info.file.status !== "uploading") {
|
|
console.log(info.file, info.fileList);
|
|
}
|
|
if (info.file.status === "done") {
|
|
if (info.file.response.status === 20000) {
|
|
message.success(`${info.file.name} 上传成功`);
|
|
formRef.current.getList();
|
|
} else {
|
|
message.error(info.file.response.message);
|
|
}
|
|
} else if (info.file.status === "error") {
|
|
message.error(`${info.file.name} file upload failed.`);
|
|
}
|
|
},
|
|
},
|
|
key: "id",
|
|
search: function (params) {
|
|
ajax
|
|
.getDeviceDimensionList(params)
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
setResultData({
|
|
data: res.data.list,
|
|
total_records: res.data.total,
|
|
});
|
|
setLoading(false)
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
})
|
|
.catch((err) => console.error(err));
|
|
},
|
|
create: function (params) {
|
|
getAllBerth();
|
|
setDataAcquistionModal({
|
|
...dataAcquistionModal,
|
|
visible: true,
|
|
isEdit: 0,
|
|
});
|
|
dataAcquistionModal.form.resetFields();
|
|
},
|
|
};
|
|
//杆位管理
|
|
const poleManage = {
|
|
form: [
|
|
{
|
|
label: "杆位号",
|
|
type: "input",
|
|
placeholder: "请输入内容",
|
|
name: "pole_content",
|
|
},
|
|
],
|
|
columns: [
|
|
{
|
|
title: "杆位号",
|
|
dataIndex: "code",
|
|
width: 180,
|
|
key: "code",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "更新时间",
|
|
dataIndex: "update_time",
|
|
width: 180,
|
|
key: "update_time",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "操作",
|
|
width: 180,
|
|
dataIndex: "operator",
|
|
key: "operator",
|
|
align: "center",
|
|
render: (_, record) => {
|
|
return (
|
|
<Popover
|
|
trigger="hover"
|
|
content={
|
|
<>
|
|
<div>
|
|
<a
|
|
onClick={() => {
|
|
ajax.getPoleInfo({ id: record.id }).then((res) => {
|
|
if (res.status === 20000) {
|
|
setCheckPoleModal({
|
|
visible: true,
|
|
record: res.data,
|
|
});
|
|
}
|
|
});
|
|
}}
|
|
>
|
|
查看
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
onClick={() => {
|
|
getEditRoadDevice(record)
|
|
getDevice(record)
|
|
ajax.getPoleInfo({ id: record.id }).then((res) => {
|
|
setEditTitle(true)
|
|
if (res.status === 20000) {
|
|
const { data } = res;
|
|
let videoIds = [];
|
|
if (
|
|
data.video_device_ids !== null &&
|
|
data.video_device_ids !== ""
|
|
) {
|
|
videoIds = data.video_device_ids
|
|
.split(",")
|
|
.map((item) => +item);
|
|
}
|
|
let monitorIds = [];
|
|
if (
|
|
data.monitor_device_ids !== null &&
|
|
data.monitor_device_ids !== ""
|
|
) {
|
|
monitorIds = data.monitor_device_ids
|
|
.split(",")
|
|
.map((item) => +item);
|
|
}
|
|
setEditPoleModal({
|
|
...editPoleModal,
|
|
visible: true,
|
|
record: data,
|
|
isEdit: 1,
|
|
});
|
|
editPoleForm.setFieldsValue({
|
|
code: data.code,
|
|
has_pole: data.has_pole,
|
|
video_device_ids: videoIds,
|
|
monitor_device_ids: monitorIds,
|
|
});
|
|
setLngLatModal({
|
|
...lngLatModal,
|
|
value: data.lng_lat,
|
|
});
|
|
}
|
|
});
|
|
}}
|
|
>
|
|
编辑
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
onClick={() => {
|
|
setPoleModal({ visible: true, id: [record.id] });
|
|
}}
|
|
>
|
|
删除
|
|
</a>
|
|
</div>
|
|
</>
|
|
}
|
|
>
|
|
<Button type="primary">操作</Button>
|
|
</Popover>
|
|
);
|
|
},
|
|
},
|
|
],
|
|
key: "id",
|
|
exporturl: "/api/bpm/device/export_pole_position",
|
|
downloadUrl: "/api/bpm/device/road_set_pole_position_import_template",
|
|
importProps: {
|
|
name: "file",
|
|
action: "/PMS/api/bpm/device/road_set_import_pole_position",
|
|
data: { road_id: parking_id },
|
|
headers: {
|
|
Authorization: getToken(),
|
|
},
|
|
onChange(info) {
|
|
if (info.file.status !== "uploading") {
|
|
console.log(info.file, info.fileList);
|
|
}
|
|
if (info.file.status === "done") {
|
|
if (info.file.response.status === 20000) {
|
|
message.success(`${info.file.name} 上传成功`);
|
|
formRef.current.getList();
|
|
} else {
|
|
message.error(info.file.response.message);
|
|
}
|
|
} else if (info.file.status === "error") {
|
|
message.error(`${info.file.name} file upload failed.`);
|
|
}
|
|
},
|
|
},
|
|
search: function (params) {
|
|
ajax
|
|
.getPoleListData(params)
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
setResultData({
|
|
data: res.data.list,
|
|
total_records: res.data.total,
|
|
});
|
|
setLoading(false)
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
})
|
|
.catch((err) => console.error(err));
|
|
},
|
|
create: function (params) {
|
|
setEditTitle(false)
|
|
getRoadDevice(parking_id);
|
|
getRoadMonitorDevice(parking_id);
|
|
console.log(12122);
|
|
setEditPoleModal({
|
|
...editPoleModal,
|
|
visible: true,
|
|
record: {},
|
|
isEdit: 0,
|
|
});
|
|
editPoleForm.resetFields();
|
|
setLngLatModal({
|
|
...lngLatModal,
|
|
value: [],
|
|
});
|
|
},
|
|
};
|
|
useEffect(() => {
|
|
getAllBerth();
|
|
}, [currentObj]);
|
|
//计费规则
|
|
const billingRule = {
|
|
form: [
|
|
{
|
|
label: "计费规则",
|
|
type: "select",
|
|
name: "rule",
|
|
options: billRuleList,
|
|
},
|
|
],
|
|
columns: [
|
|
{
|
|
title: "序号",
|
|
dataIndex: "index",
|
|
key: "index",
|
|
align: "center",
|
|
render: (_, record, index) => {
|
|
return index + 1;
|
|
},
|
|
},
|
|
{
|
|
title: "规则名称",
|
|
dataIndex: "rule_name",
|
|
key: "rule_name",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "车辆类型",
|
|
dataIndex: "vehicle_type_name",
|
|
key: "vehicle_type_name",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "计费说明",
|
|
dataIndex: "note",
|
|
key: "note",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "是否按泊位计费",
|
|
dataIndex: "berth_ids",
|
|
key: "berth_ids",
|
|
align: "center",
|
|
render: (text) => {
|
|
return text === "" ? "否" : "是";
|
|
},
|
|
},
|
|
{
|
|
title: "更新时间",
|
|
dataIndex: "update_time",
|
|
key: "update_time",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "操作",
|
|
dataIndex: "operator",
|
|
key: "operator",
|
|
align: "center",
|
|
render: (_, record) => {
|
|
return (
|
|
<Popover
|
|
trigger="hover"
|
|
content={
|
|
<>
|
|
<div>
|
|
<a
|
|
onClick={() => {
|
|
setCurRuleRecord(record);
|
|
setRuleDetailModal(true);
|
|
}}
|
|
>
|
|
查看
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
onClick={() => {
|
|
setCurRuleRecord(record);
|
|
console.log(record);
|
|
ruleForm.setFieldsValue({
|
|
vehicle_type: record.vehicle_type,
|
|
rule_id: record.rule_id,
|
|
is_select: record.berth_ids === "" ? 0 : 1,
|
|
id: record.id
|
|
});
|
|
// setSelectedBerth(record.berth_ids.split(",").map(item => +item))
|
|
setRuleModal(true);
|
|
// setIsRuleEdit(true);
|
|
setIsRuleEdit(true);
|
|
setShowBerthSelect(false);
|
|
if (record.berth_ids != '') {
|
|
setShowBerthSelect(true);
|
|
setIsRuleEdit(true);
|
|
|
|
}
|
|
|
|
// }
|
|
let data = {
|
|
road_id: parking_id,
|
|
vehicle_type: record.vehicle_type,
|
|
id: record.id
|
|
}
|
|
ajax
|
|
.getRuleBerth(data)
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
res.data.left.map(item => {
|
|
item.key = item.value
|
|
return item
|
|
})
|
|
setAllBerthList(res.data.left);
|
|
setSelectedBerth(res.data.right)
|
|
console.log(res.data.list);
|
|
} else {
|
|
message.error(res.message)
|
|
}
|
|
})
|
|
}}
|
|
>
|
|
编辑
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
onClick={() => {
|
|
setCurRuleRecord(record);
|
|
setRuleDelModal({ id: record.id, visible: true });
|
|
}}
|
|
>
|
|
删除
|
|
</a>
|
|
</div>
|
|
</>
|
|
}
|
|
>
|
|
<Button type="primary">操作</Button>
|
|
</Popover>
|
|
);
|
|
},
|
|
},
|
|
],
|
|
|
|
exporturl: "",
|
|
downloadUrl: "",
|
|
importProps: {
|
|
name: "file",
|
|
action: "/PMS/api/bpm/berth/import",
|
|
onChange(info) {
|
|
if (info.file.status !== "uploading") {
|
|
console.log(info.file, info.fileList);
|
|
}
|
|
if (info.file.status === "done") {
|
|
if (info.file.response.status === 20000) {
|
|
message.success(`${info.file.name} 上传成功`);
|
|
} else {
|
|
message.error(info.file.response.message);
|
|
}
|
|
} else if (info.file.status === "error") {
|
|
message.error(`${info.file.name} file upload failed.`);
|
|
}
|
|
},
|
|
},
|
|
key: "rule_name",
|
|
search: function (params) {
|
|
ajax
|
|
.getRoadRuleList(params)
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
setResultData({
|
|
data: res.data.list,
|
|
total_records: res.data.total,
|
|
});
|
|
setLoading(false)
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
})
|
|
.catch((err) => console.error(err));
|
|
},
|
|
create: function () {
|
|
setCurRuleRecord({
|
|
vehicle_type: null,
|
|
rule_id: null,
|
|
is_select: 0,
|
|
});
|
|
setShowBerthSelect(false);
|
|
ruleForm.setFieldsValue({
|
|
vehicle_type: null,
|
|
rule_id: null,
|
|
is_select: 0,
|
|
});
|
|
setIsRuleEdit(false);
|
|
setRuleModal(true);
|
|
},
|
|
};
|
|
//form子组件
|
|
const formRef = React.useRef();
|
|
//收费员管理
|
|
const tollCollector = {
|
|
form: [
|
|
{
|
|
label: "收费员姓名",
|
|
type: "input",
|
|
placeholder: "请输入内容",
|
|
name: "collect_name",
|
|
},
|
|
{
|
|
label: "登陆名",
|
|
type: "input",
|
|
placeholder: "请输入内容",
|
|
name: "login_name",
|
|
},
|
|
],
|
|
columns: [
|
|
{
|
|
title: "收费员姓名",
|
|
dataIndex: "name",
|
|
key: "name",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "员工编号",
|
|
dataIndex: "number",
|
|
key: "number",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "PDA账号",
|
|
dataIndex: "pda_number",
|
|
key: "pda_number",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "操作",
|
|
dataIndex: "operator",
|
|
key: "operator",
|
|
align: "center",
|
|
render: (_, record) => {
|
|
return (
|
|
<Popover
|
|
trigger="hover"
|
|
content={
|
|
<div>
|
|
<a
|
|
onClick={() => {
|
|
setDelTollModal({
|
|
...delTollModal,
|
|
visible: true,
|
|
id: record.id,
|
|
});
|
|
}}
|
|
>
|
|
删除
|
|
</a>
|
|
</div>
|
|
}
|
|
>
|
|
<Button type="primary">操作</Button>
|
|
</Popover>
|
|
);
|
|
},
|
|
},
|
|
],
|
|
initialValues: {
|
|
collect_name: "",
|
|
login_name: "",
|
|
},
|
|
exporturl: "",
|
|
key: "number",
|
|
search: function (params) {
|
|
ajax
|
|
.getTollList(params)
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
setResultData({
|
|
data: res.data.list,
|
|
total_records: res.data.total,
|
|
});
|
|
setLoading(false)
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
})
|
|
.catch((err) => console.error(err));
|
|
},
|
|
create: function (params) {
|
|
setTollModal(true);
|
|
},
|
|
};
|
|
//目前页面的对象
|
|
const [currentObj, setCurrentObj] = useState(berthManage);
|
|
|
|
const [type, setType] = useState(1);
|
|
const [loading, setLoading] = useState(false);
|
|
const [resultData, setResultData] = useSetState({
|
|
// 请求结果
|
|
total_records: 0,
|
|
data: [],
|
|
});
|
|
//批量导入弹窗
|
|
const [importGroup, setImportGroup] = useState({
|
|
visible: false,
|
|
imPortUrl: "",
|
|
});
|
|
//泊位弹窗
|
|
const [berthModal, setBerthModal] = useState({
|
|
visible: false,
|
|
record: {},
|
|
});
|
|
//编辑泊位弹窗
|
|
const [editBerthModal, setEditBerthModal] = useState(false);
|
|
//是编辑还是添加的标志
|
|
const [isEdit, setIsEdit] = useState(true);
|
|
//经纬度弹窗和经纬度数据
|
|
const [lngLatVisible, setLngLatVisible] = useState(false);
|
|
const [lngLat, setLngLat] = useState([]);
|
|
//操作选中的数据
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
|
const [pageData, setPageData] = useSetState({
|
|
// 分页参数
|
|
pn: 1,
|
|
page_size: 20,
|
|
});
|
|
//收费员弹窗
|
|
const [tollModal, setTollModal] = useState(false);
|
|
//可以选择的收费员列表
|
|
const [canSelectTollList, setCanSelectTollList] = useState([]);
|
|
//已选择的收费员列表
|
|
const [hasSelectTollList, setHasSelectTollList] = useState([]);
|
|
//rowkey
|
|
const [rowKey, setRowKey] = useState("");
|
|
|
|
//计费规则添加弹窗
|
|
const [ruleModal, setRuleModal] = useState(false);
|
|
|
|
//确认弹框的数据
|
|
const [confirmModalData, setConfirmModalData] = useState({
|
|
visible: false,
|
|
type: 1, //1上线 2下线 3 删除
|
|
ids: [],
|
|
func: () => { },
|
|
});
|
|
//计费规则添加对应的泊位号
|
|
const [allBerthList, setAllBerthList] = useState([]);
|
|
//计费规则编辑弹窗是编辑还是新增
|
|
const [isRuleEdit, setIsRuleEdit] = useState(false);
|
|
//计费规则
|
|
const [billRuleList, setBillRuleList] = useState([]);
|
|
//编辑计费规则时候的记录信息
|
|
const [curRuleRecord, setCurRuleRecord] = useState({});
|
|
//选择中的泊位号
|
|
const [selectedBerth, setSelectedBerth] = useState([]);
|
|
//ruleDetailModal
|
|
const [ruleDetailModal, setRuleDetailModal] = useState(false);
|
|
//删除弹框
|
|
const [ruleDelModal, setRuleDelModal] = useState({
|
|
visible: false,
|
|
id: [],
|
|
});
|
|
//收费员管理-删除收费员
|
|
const [delTollModal, setDelTollModal] = useState({
|
|
visible: false,
|
|
id: -1,
|
|
delFunc: deletToll,
|
|
close: () => {
|
|
setDelTollModal({ ...delTollModal, visible: false });
|
|
},
|
|
});
|
|
//数据采集设备管理添加弹窗
|
|
const [dataAcquistionModal, setDataAcquistionModal] = useState({
|
|
visible: false,
|
|
record: {},
|
|
form: dataForm,
|
|
isEdit: 0,
|
|
});
|
|
//数据采集设备新增弹窗里面啊的选择数据
|
|
const [dataAcquistionSelect, setDataAcquistionSelect] = useState({
|
|
typeList: [],
|
|
brandList: [],
|
|
funcList: [],
|
|
});
|
|
//数据采集设备泊位列表数据
|
|
const [dataAcquistionBerth, setDataAcquistionBerth] = useState([]);
|
|
const [dataAcquistionTargetKeys, setDataAcquistionTargetKeys] = useState([]);
|
|
|
|
//数据采集设备上线，下线，删除弹窗
|
|
const [dataStatusChangeModal, setDataStatusChangeModal] = useState({
|
|
visible: false,
|
|
type: 1,
|
|
record: {},
|
|
});
|
|
|
|
//杆位删除
|
|
const [poleModal, setPoleModal] = useState({
|
|
visible: false,
|
|
id: [],
|
|
});
|
|
//杆位查看弹窗
|
|
const [checkPoleModal, setCheckPoleModal] = useState({
|
|
visible: false,
|
|
record: {},
|
|
});
|
|
const [getMonitorData, setGetMonitorData] = useState([])
|
|
const [getRoadData, seGetRoadData] = useState([])
|
|
//杆位修改弹窗
|
|
const [editPoleModal, setEditPoleModal] = useState({
|
|
form: editPoleForm,
|
|
visible: false,
|
|
isEdit: 0,
|
|
record: {},
|
|
});
|
|
//video_device
|
|
const [videoDeviceList, setVideoDeviceList] = useState([]);
|
|
const [monitorDeviceList, setMonitorDeviceList] = useState([]);
|
|
//杆位管理地图选点弹窗
|
|
const [lngLatModal, setLngLatModal] = useState({
|
|
visible: false,
|
|
value: [],
|
|
});
|
|
//数据采集设备管理页面弹窗
|
|
const [dataAcquistionDetail, setDataAcquistionDetail] = useState({
|
|
visible: false,
|
|
record: {},
|
|
});
|
|
|
|
function onShowSizeChange(pn, page_size) {
|
|
setPageData({ pn, page_size });
|
|
}
|
|
//table选择
|
|
const rowSelection = {
|
|
onChange: (selectedRowKeys, selectedRows) => {
|
|
let arr = [];
|
|
selectedRows.map((res) => {
|
|
arr.push(res.id);
|
|
});
|
|
setSelectedRowKeys(arr);
|
|
},
|
|
getCheckboxProps: (record) => ({
|
|
disabled: record.name === "Disabled User",
|
|
// Column configuration not to be checked
|
|
name: record.berth_code,
|
|
// key: record.berth_code,
|
|
}),
|
|
};
|
|
//收费员管理-添加收费员
|
|
function addToll(road_id, ids) {
|
|
ajax
|
|
.addToll({ road_id, ids })
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
message.success(res.message);
|
|
formRef.current.getList();
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
})
|
|
.catch((err) => console.error(err));
|
|
}
|
|
const [getDeviceType, setGetDeviceType] = useState([])
|
|
const deviceType = () => {
|
|
let arr = sysConfig.berthType
|
|
let newArr = arr.slice(1)
|
|
setGetDeviceType(newArr)
|
|
}
|
|
useEffect(() => {
|
|
deviceType()
|
|
}, [])
|
|
//1：泊位管理上线，2：下线，3：已删除
|
|
function changeBerthManage(status) {
|
|
console.log(selectedRowKeys);
|
|
if (selectedRowKeys.length != []) {
|
|
setConfirmModalData({
|
|
...confirmModalData,
|
|
type: status,
|
|
ids: selectedRowKeys,
|
|
visible: true,
|
|
});
|
|
} else {
|
|
message.error("请至少选择一条数据");
|
|
}
|
|
}
|
|
const [getLeftBerth, setLeftGetBerth] = useState([]);
|
|
const [selectedKeys, setSelectedKeys] = useState([]);
|
|
const [targetKeys, setTargetKeys] = useState([]);
|
|
|
|
function getEditInRoad(record) {
|
|
let data = {
|
|
video_equipment_id: record.id,
|
|
road_id: record.road_id,
|
|
};
|
|
ajax.getEditInRoadData(data).then((res) => {
|
|
if (res.status == 20000) {
|
|
let temparr = [];
|
|
let temparrRight = [];
|
|
res.data.left.map((item) => {
|
|
temparr.push({
|
|
key: item.value + "",
|
|
title: item.label,
|
|
});
|
|
});
|
|
setLeftGetBerth(temparr);
|
|
setTargetKeys(res.data.right);
|
|
}
|
|
});
|
|
}
|
|
const onChangeSelect = (nextTargetKeys, direction, moveKeys) => {
|
|
console.log("targetKeys:", nextTargetKeys);
|
|
console.log("direction:", direction);
|
|
console.log("moveKeys:", moveKeys);
|
|
setTargetKeys(nextTargetKeys);
|
|
};
|
|
const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
|
|
console.log("sourceSelectedKeys:", sourceSelectedKeys);
|
|
setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
|
|
};
|
|
//收费员管理-删除收费员
|
|
function deletToll(id) {
|
|
ajax
|
|
.delToll({ id })
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
message.success(res.message);
|
|
formRef.current.getList();
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
})
|
|
.catch((err) => console.error(err));
|
|
}
|
|
useEffect(() => {
|
|
console.log(formRef.current);
|
|
}, [formRef.current])
|
|
|
|
|
|
function getRoadTollList() {
|
|
ajax
|
|
.getRoadTollList({ road_id: parking_id })
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
let data = res.data.map((item) => {
|
|
item.label = item.text;
|
|
item.key = item.value;
|
|
return item;
|
|
});
|
|
setCanSelectTollList(data);
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
})
|
|
.catch((err) => console.error(err));
|
|
}
|
|
const [getCarType, setGetCarType] = useState(true)
|
|
const [getCarTypeValue, setGetCarTypeValue] = useState({})
|
|
//处理添加计费规则-车辆类型切换
|
|
function handleCarTypeChange(value) {
|
|
setGetCarTypeValue(value)
|
|
if (value === '') {
|
|
setGetCarType(true)
|
|
} else {
|
|
setGetCarType(false)
|
|
let data = {
|
|
road_id: parking_id,
|
|
vehicle_type: value
|
|
}
|
|
ajax
|
|
.getRuleBerth(data)
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
res.data.left.map(item => {
|
|
item.key = item.value
|
|
return item
|
|
})
|
|
setAllBerthList(res.data.left);
|
|
} else {
|
|
message.error(res.message)
|
|
}
|
|
})
|
|
.catch((err) => console.error(err));
|
|
}
|
|
if (value === void 0) {
|
|
|
|
|
|
return;
|
|
}
|
|
}
|
|
const [getCarTypeType, setGetCarTypeType] = useState({})
|
|
useEffect(() => {
|
|
if (selectedBerth.length != []) {
|
|
setGetCarTypeType(0)
|
|
}
|
|
}, [selectedBerth])
|
|
//新增或编辑计费规则
|
|
function addOrEditRoadRule() {
|
|
function addRule(data) {
|
|
if (getCarTypeType === 1 && selectedBerth.length == []) {
|
|
message.error('请选择对应的泊位号')
|
|
} else {
|
|
ajax
|
|
.addOrEditRoadRule(data)
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
setRuleModal(false);
|
|
formRef.current.getList();
|
|
setSelectedBerth([]);
|
|
setGetCarType(true)
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
})
|
|
.catch((err) => console.error(err));
|
|
}
|
|
}
|
|
|
|
|
|
function editRule(data) {
|
|
console.log(data);
|
|
|
|
data.berth_ids = selectedBerth;
|
|
ajax
|
|
.editRoadRule(data)
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
setRuleModal(false);
|
|
formRef.current.getList();
|
|
setSelectedBerth([]);
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
})
|
|
.catch((err) => console.error(err));
|
|
}
|
|
|
|
ruleForm
|
|
.validateFields()
|
|
.then((res) => {
|
|
const data = {
|
|
road_id: parking_id,
|
|
type: isRuleEdit ? "edit" : "add",
|
|
id: isRuleEdit ? curRuleRecord.id : null,
|
|
...ruleForm.getFieldsValue(),
|
|
berth_ids:
|
|
ruleForm.getFieldsValue().is_select === 0 ? [] : selectedBerth,
|
|
};
|
|
switch (isRuleEdit) {
|
|
case true:
|
|
editRule(data);
|
|
break;
|
|
case false:
|
|
addRule(data);
|
|
break;
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
message.error(err);
|
|
});
|
|
}
|
|
//数据采集设备管理添加弹窗里面的Select数据
|
|
async function getDataSelect() {
|
|
const typeListAjax = ajax.getDeviceTypeList();
|
|
const brandListAjax = ajax.getAllBrandNameList();
|
|
const funcListAjax = ajax.getDeviceFuncList();
|
|
const [typeList, brandList, funcList] = await Promise.all([
|
|
typeListAjax,
|
|
brandListAjax,
|
|
funcListAjax,
|
|
]);
|
|
setDataAcquistionSelect({
|
|
typeList: typeList.data,
|
|
brandList: brandList.data,
|
|
funcList: funcList.data,
|
|
});
|
|
}
|
|
//数据采集设备管理提交接口
|
|
function handleDataAcquistionModal() {
|
|
function addDevice(res) {
|
|
ajax
|
|
.addDevice({
|
|
...res,
|
|
road_id: parking_id,
|
|
berth_ids: dataAcquistionTargetKeys,
|
|
})
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
message.success(res.message);
|
|
setDataAcquistionModal({
|
|
...dataAcquistionModal,
|
|
visible: false,
|
|
});
|
|
formRef.current.getList();
|
|
setModalBtnLoading(false)
|
|
|
|
} else {
|
|
message.error(res.message);
|
|
setModalBtnLoading(false)
|
|
}
|
|
});
|
|
}
|
|
function editDevice(res) {
|
|
console.log(res);
|
|
ajax
|
|
.editDevice({
|
|
...res,
|
|
id: getIdValue,
|
|
road_id: parking_id,
|
|
berth_ids: selectedKeys,
|
|
})
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
message.success(res.message);
|
|
setDataAcquistionModal({
|
|
...dataAcquistionModal,
|
|
visible: false,
|
|
});
|
|
formRef.current.getList();
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
});
|
|
}
|
|
dataAcquistionModal.form.validateFields().then(
|
|
(res) => {
|
|
switch (dataAcquistionModal.isEdit) {
|
|
case 0:
|
|
addDevice(res);
|
|
break;
|
|
case 1:
|
|
editDevice(res);
|
|
break;
|
|
}
|
|
},
|
|
(err) => {
|
|
console.error(err);
|
|
}
|
|
);
|
|
}
|
|
//数据采集设备上线下线删除接口
|
|
function handleDataStatusChange() {
|
|
const id = [dataStatusChangeModal.record.id];
|
|
console.log(id);
|
|
//上线
|
|
function online(id) {
|
|
ajax
|
|
.onlineOrOffline({
|
|
id,
|
|
})
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
message.success(res.message);
|
|
setDataStatusChangeModal({
|
|
...dataStatusChangeModal,
|
|
visible: false,
|
|
});
|
|
formRef.current.getList();
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
});
|
|
}
|
|
//下线
|
|
function offline(id) {
|
|
ajax.offlineDevice({ id }).then((res) => {
|
|
if (res.status === 20000) {
|
|
message.success(res.message);
|
|
setDataStatusChangeModal({
|
|
...dataStatusChangeModal,
|
|
visible: false,
|
|
});
|
|
formRef.current.getList();
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
});
|
|
}
|
|
//删除
|
|
function deleteDevice(id) {
|
|
ajax.delDataDevice({ id }).then((res) => {
|
|
if (res.status === 20000) {
|
|
message.success(res.message);
|
|
setDataStatusChangeModal({
|
|
...dataStatusChangeModal,
|
|
visible: false,
|
|
});
|
|
formRef.current.getList();
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
});
|
|
}
|
|
|
|
switch (dataStatusChangeModal.type) {
|
|
case 1:
|
|
online(id);
|
|
break;
|
|
case 2:
|
|
offline(id);
|
|
break;
|
|
case 3:
|
|
deleteDevice(id);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
//获取所有泊位
|
|
function getAllBerth() {
|
|
ajax.getAllBerth({ road_id: parking_id, is_bind_device: 1 }).then((res) => {
|
|
if (res.status === 20000) {
|
|
let _data = res.data.map((item) => {
|
|
item.key = item.value;
|
|
return item;
|
|
});
|
|
setDataAcquistionBerth(_data);
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
});
|
|
}
|
|
//获取视频设备
|
|
function getRoadDevice(id) {
|
|
ajax.getRoadDevice({ road_id: id }).then((res) => {
|
|
if (res.status === 20000) {
|
|
res.data.left.map((item) => {
|
|
item.key = item.value;
|
|
return item;
|
|
});
|
|
// console.log(res.data.left);
|
|
setVideoDeviceList(res.data.left);
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
});
|
|
}
|
|
const [getEditTarket, setGetEditTarket] = useState([])
|
|
const [getLeftEditTarket, setGetLeftEditTarket] = useState([])
|
|
const [getSelectedKeys, setGetSelectedKeyst] = useState([])
|
|
function getEditRoadDevice(record) {
|
|
let data = {
|
|
road_id: parking_id,
|
|
id: record.id
|
|
}
|
|
ajax.getRoadDevice(data).then((res) => {
|
|
if (res.status === 20000) {
|
|
res.data.left.map((item) => {
|
|
item.key = item.value;
|
|
return item;
|
|
});
|
|
setGetLeftEditTarket(res.data.left);
|
|
setGetEditTarket(res.data.right);
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
});
|
|
}
|
|
const onSelectRoadChange = (sourceSelectedKeys, targetSelectedKeys) => {
|
|
console.log("sourceSelectedKeys:", sourceSelectedKeys);
|
|
setGetSelectedKeyst([...sourceSelectedKeys, ...targetSelectedKeys]);
|
|
};
|
|
const onSelectChangeRoad = (nextTargetKeys, direction, moveKeys) => {
|
|
setGetEditTarket(nextTargetKeys);
|
|
};
|
|
//获取监控设备
|
|
function getRoadMonitorDevice(id) {
|
|
ajax.getRoadMonitorDevice({ road_id: id }).then((res) => {
|
|
if (res.status === 20000) {
|
|
res.data.left.map((item) => {
|
|
item.key = item.value;
|
|
return item;
|
|
});
|
|
setMonitorDeviceList(res.data.left);
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
});
|
|
}
|
|
const [getDeviceTarket, setGetDeviceTarket] = useState([])
|
|
const [getLeftDeviceTarket, setGetLeftDeviceTarket] = useState([])
|
|
const [getLeftDevicetargetKey, setGetLeftDevicetargetKey] = useState([])
|
|
function getDevice(record) {
|
|
let data = {
|
|
road_id: parking_id,
|
|
id: record.id
|
|
}
|
|
ajax.getRoadMonitorDevice(data).then((res) => {
|
|
if (res.status === 20000) {
|
|
res.data.left.map((item) => {
|
|
item.key = item.value;
|
|
return item;
|
|
});
|
|
setGetLeftDeviceTarket(res.data.left);
|
|
setGetDeviceTarket(res.data.right);
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
});
|
|
}
|
|
const onSelectDeviceChange = (sourceSelectedKeys, targetSelectedKeys) => {
|
|
console.log("sourceSelectedKeys:", sourceSelectedKeys);
|
|
setGetLeftDevicetargetKey([...sourceSelectedKeys, ...targetSelectedKeys]);
|
|
};
|
|
const onSelectChangeDevice = (nextTargetKeys, direction, moveKeys) => {
|
|
setGetDeviceTarket(nextTargetKeys);
|
|
};
|
|
//获取计费规则
|
|
const getBillRule = (operator_id) => {
|
|
ajax
|
|
.getBillRule({ operator_id })
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
setBillRuleList(res.data);
|
|
return Promise.resolve(res.data);
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
})
|
|
.then((res) => {
|
|
billingRule.form[0].options = res;
|
|
setCurrentObj(billingRule);
|
|
});
|
|
};
|
|
|
|
const submitPole = () => {
|
|
const isEdit = editPoleModal.isEdit;
|
|
|
|
function addPole(params) {
|
|
ajax.addPolePosition(params).then((res) => {
|
|
if (res.status === 20000) {
|
|
setEditPoleModal({ ...editPoleModal, visible: false });
|
|
message.success(res.message);
|
|
formRef.current.getList();
|
|
seGetRoadData([])
|
|
setGetMonitorData([])
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
});
|
|
}
|
|
|
|
function editPole(params) {
|
|
ajax.editPolePosition(params).then((res) => {
|
|
if (res.status === 20000) {
|
|
setEditPoleModal({ ...editPoleModal, visible: false });
|
|
message.success(res.message);
|
|
formRef.current.getList();
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
});
|
|
}
|
|
|
|
editPoleForm
|
|
.validateFields()
|
|
.then((value) => {
|
|
console.log(value);
|
|
if (editPoleModal.isEdit) {
|
|
value = { ...value, id: editPoleModal.record.id };
|
|
} else {
|
|
value = { ...value };
|
|
}
|
|
value = { ...value, lng_lat: lngLatModal.value, road_id: parking_id };
|
|
switch (isEdit) {
|
|
case 1:
|
|
editPole(value);
|
|
break;
|
|
case 0:
|
|
addPole(value);
|
|
break;
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
});
|
|
};
|
|
|
|
//删除杆位
|
|
function delPolePosition(params) {
|
|
ajax.delPolePosition(params).then((res) => {
|
|
if (res.status === 20000) {
|
|
message.success(res.message);
|
|
setPoleModal({ ...poleModal, visible: false });
|
|
formRef.current.getList();
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
});
|
|
}
|
|
function confirmDelPole() {
|
|
delPolePosition({ id: poleModal.id });
|
|
}
|
|
const beforeUpload = (file) => {
|
|
const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
|
|
if (!isExcel) {
|
|
message.error('你只能上传Excel文件!');
|
|
}
|
|
return isExcel || Upload.LIST_IGNORE;
|
|
};
|
|
useEffect(() => {
|
|
switch (type) {
|
|
case 1:
|
|
setCurrentObj(berthManage);
|
|
setRowKey(berthManage.key);
|
|
setConfirmModalData({
|
|
...confirmModalData,
|
|
func: (ids, status) =>
|
|
ajax.editStatus({
|
|
ids: ids,
|
|
status,
|
|
}).then(res => {
|
|
if (res.status === 20000) {
|
|
|
|
message.success(res.message)
|
|
}
|
|
}),
|
|
});
|
|
break;
|
|
case 2:
|
|
setCurrentObj(dataDevice);
|
|
setRowKey(dataDevice.key);
|
|
getDataSelect();
|
|
getAllBerth();
|
|
setConfirmModalData({
|
|
...confirmModalData,
|
|
func: (ids, status) => {
|
|
let func = null;
|
|
switch (status) {
|
|
case 1:
|
|
func = ajax.onlineOrOffline({
|
|
id: ids,
|
|
});
|
|
break;
|
|
case 2:
|
|
func = ajax.offlineDevice({ id: ids });
|
|
break;
|
|
case 3:
|
|
func = ajax.delDataDevice({ id: ids });
|
|
}
|
|
return func;
|
|
},
|
|
});
|
|
break;
|
|
case 3:
|
|
setCurrentObj(poleManage);
|
|
setRowKey(poleManage.key);
|
|
setConfirmModalData({
|
|
...confirmModalData,
|
|
func: (ids, status) => ajax.delPolePosition({ id: ids }),
|
|
});
|
|
break;
|
|
case 4:
|
|
getBillRule(operator_id);
|
|
break;
|
|
case 5:
|
|
setCurrentObj(tollCollector);
|
|
setRowKey(tollCollector.key);
|
|
getRoadTollList();
|
|
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}, [type]);
|
|
return (
|
|
<div className="ConfigRoad">
|
|
<div className="left-search">
|
|
<div className="title">{"查询条件"}</div>
|
|
<div className="searchWrap">
|
|
<SearchPart
|
|
ref={formRef}
|
|
road_id={parking_id}
|
|
formData={currentObj.form}
|
|
search={currentObj.search}
|
|
initialValues={currentObj.initialValues}
|
|
pageData={pageData}
|
|
setSelectedRowKeys={setSelectedRowKeys}
|
|
total={resultData.total_records}
|
|
exporturl={currentObj.exporturl}
|
|
closeConfirmModal={() => {
|
|
setConfirmModalData({ ...confirmModalData, visible: false });
|
|
}}
|
|
confirmModalData={confirmModalData}
|
|
delTollModal={delTollModal}
|
|
isShowExportBtn={type !== 4 && type !== 5}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="right-list">
|
|
<div className="total-row-wrapper">
|
|
<span className="number-wrapper">
|
|
{/* <span>
|
|
<Button
|
|
type="primary"
|
|
style={{ marginRight: "10px" }}
|
|
onClick={() => {
|
|
navigate(-1);
|
|
}}
|
|
>
|
|
返回
|
|
</Button>
|
|
</span> */}
|
|
<span className="letter">共查询到</span>
|
|
<span className="total-number"> {resultData.total_records}</span>
|
|
<span className="letter">条结果</span>
|
|
</span>
|
|
<div>
|
|
<Button
|
|
style={{ margin: "0 10px" }}
|
|
type="primary"
|
|
onClick={currentObj.create}
|
|
>
|
|
添加
|
|
</Button>
|
|
{type === 4 || type === 5 ? (
|
|
<></>
|
|
) : (
|
|
<Button
|
|
type="primary"
|
|
onClick={() => {
|
|
setImportGroup({ ...importGroup, visible: true });
|
|
}}
|
|
>
|
|
批量导入
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="tabs-box">
|
|
<Tabs
|
|
activeKey={type}
|
|
items={[
|
|
{
|
|
key: 1,
|
|
label: "泊位管理",
|
|
},
|
|
{
|
|
key: 2,
|
|
label: "数据采集设备管理",
|
|
},
|
|
{
|
|
key: 3,
|
|
label: "杆位管理",
|
|
},
|
|
{
|
|
key: 4,
|
|
label: "计费规则",
|
|
},
|
|
{
|
|
key: 5,
|
|
label: "收费员管理",
|
|
},
|
|
]}
|
|
hideAdd={true}
|
|
onChange={(type) => {
|
|
setLoading(true)
|
|
setType(type);
|
|
}}
|
|
/>
|
|
</div>
|
|
<ResultFlow
|
|
hasLoad={true}
|
|
ajaxLoad={loading}
|
|
resultData={resultData}
|
|
message={"暂无数据"}
|
|
>
|
|
<div className="table-wrap">
|
|
<Table
|
|
rowKey={rowKey}
|
|
// loading={loading}
|
|
rowSelection={
|
|
type === 4 || type === 5
|
|
? false
|
|
: {
|
|
type: "checkbox",
|
|
...rowSelection,
|
|
}
|
|
}
|
|
// className="yisa-table"
|
|
columns={currentObj.columns}
|
|
dataSource={resultData.data}
|
|
pagination={false}
|
|
/>
|
|
</div>
|
|
<div className="page-part">
|
|
{type === 4 || type === 5 ? (
|
|
<></>
|
|
) : (
|
|
<div className="button-part">
|
|
{type === 3 ? (
|
|
<></>
|
|
) : (
|
|
<>
|
|
<Button
|
|
type="primary"
|
|
onClick={() => {
|
|
changeBerthManage(1);
|
|
}}
|
|
>
|
|
上线
|
|
</Button>
|
|
<Button
|
|
type="primary"
|
|
onClick={() => {
|
|
changeBerthManage(2);
|
|
}}
|
|
>
|
|
下线
|
|
</Button>
|
|
</>
|
|
)}
|
|
<Button
|
|
type="primary"
|
|
onClick={() => {
|
|
changeBerthManage(3);
|
|
}}
|
|
>
|
|
删除
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
<Pagination
|
|
className="pagination-common"
|
|
showSizeChanger={true}
|
|
showQuickJumper={true}
|
|
// showTotal={() => `共 ${total_records} 条`}
|
|
total={resultData.total_records}
|
|
current={pageData.pn}
|
|
pageSize={pageData.page_size}
|
|
pageSizeOptions={dictionary?.pageSizeOptions}
|
|
onChange={onShowSizeChange}
|
|
onShowSizeChange={onShowSizeChange}
|
|
/>
|
|
</div>
|
|
</ResultFlow>
|
|
</div>
|
|
<Modal
|
|
open={importGroup.visible}
|
|
destroyOnClose={true}
|
|
style={{ width: 88 }}
|
|
onCancel={() => {
|
|
setImportGroup({ ...importGroup, visible: false });
|
|
}}
|
|
title={"批量导入"}
|
|
footer={null}
|
|
>
|
|
<div>
|
|
<p>
|
|
1.请先获取批量添加设备的Excel模板将需要添加的信息填写后进行上传该Excel文件，
|
|
上传非规范文件可能造成数据错误，
|
|
<ExportPMS
|
|
url={currentObj.downloadUrl}
|
|
data={{ road_id: parking_id }}
|
|
>
|
|
点击下载
|
|
</ExportPMS>
|
|
模板文件。
|
|
</p>
|
|
<p>2.请选择上传文件，并上传。</p>
|
|
<Upload {...currentObj.importProps} beforeUpload={beforeUpload}>
|
|
<Button type="primaryimport { pages } from '@/pages';" icon={<UploadOutlined />}>
|
|
上传
|
|
</Button>
|
|
</Upload>
|
|
</div>
|
|
</Modal>
|
|
<Modal
|
|
open={berthModal.visible}
|
|
title="查看泊位"
|
|
onCancel={() => {
|
|
setBerthModal({ ...berthModal, visible: false });
|
|
}}
|
|
>
|
|
<Descriptions column={1}>
|
|
<Descriptions.Item label="泊位号">
|
|
{berthModal.record.berth_code}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="经纬度">
|
|
{berthModal.record.lng_lat}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="服务属性">
|
|
<Checkbox.Group
|
|
defaultValue={berthModal.record.service_type}
|
|
disabled={true}
|
|
options={[
|
|
{
|
|
label: "潮汐泊位",
|
|
value: 1,
|
|
},
|
|
{
|
|
label: "共享泊位",
|
|
value: 2,
|
|
},
|
|
{
|
|
label: "充电泊位",
|
|
value: 3,
|
|
},
|
|
]}
|
|
/>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="泊位类型">
|
|
{sysConfig.berthType[berthModal.record.berth_type]?.label}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="充电泊位">
|
|
{berthModal.record.charge === 0 ? "否" : "是"}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="ETC是否开启">
|
|
{berthModal.record.etc_status_name}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="计费规则">
|
|
<TextArea disabled value={berthModal.record.rule_id} />
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
</Modal>
|
|
{/* 编辑泊位 */}
|
|
<Modal
|
|
title={isEdit ? "编辑泊位" : "添加泊位"}
|
|
open={editBerthModal}
|
|
onCancel={() => {
|
|
setEditBerthModal(false);
|
|
}}
|
|
onOk={() => {
|
|
let reg = /^[2-9]\d*$|^[1-9]\d+\d*$/
|
|
console.log(berthForm.getFieldsValue().berth_count);
|
|
if (berthForm.getFieldsValue().berth_code === null) {
|
|
message.error('请填写泊位号')
|
|
} else if (berthForm.getFieldsValue().etc_status === null) {
|
|
message.error('请选择ETC是开开启')
|
|
} else if (berthForm.getFieldsValue().berth_type === null) {
|
|
message.error('请选择泊位类型')
|
|
} else if ((!reg.test(berthForm.getFieldsValue().berth_count) && berthForm.getFieldsValue().berth_count)) {
|
|
message.error('添加泊位数为大于1的整数')
|
|
} else {
|
|
let arr = berthForm.getFieldsValue().etc_status
|
|
let str = arr.toString()
|
|
const params = {
|
|
...berthForm.getFieldsValue(),
|
|
lng_lat: lngLat,
|
|
road_id: parking_id,
|
|
etc_status: Number(str),
|
|
};
|
|
console.log(params);
|
|
function addBerth(params) {
|
|
ajax
|
|
.addBerth(params)
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
message.success(res.message);
|
|
setEditBerthModal(false);
|
|
formRef.current.getList();
|
|
berthForm.resetFields();
|
|
setLngLat([]);
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
})
|
|
.catch((err) => console.error(err));
|
|
}
|
|
function editBerth(params) {
|
|
ajax
|
|
.editBerth(params)
|
|
.then((res) => {
|
|
if (res.status === 20000) {
|
|
message.success(res.message);
|
|
setEditBerthModal(false);
|
|
formRef.current.getList();
|
|
berthForm.resetFields();
|
|
setLngLat([]);
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
})
|
|
.catch((err) => console.error(err));
|
|
}
|
|
switch (isEdit) {
|
|
case true:
|
|
editBerth(params);
|
|
break;
|
|
case false:
|
|
addBerth(params);
|
|
break;
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
padding: "0 30px",
|
|
}}
|
|
>
|
|
<Form
|
|
form={berthForm}
|
|
labelCol={{ span: 6 }}
|
|
wrapperCol={{ span: 18 }}
|
|
colon={false}
|
|
initialValues={{
|
|
berth_code: "",
|
|
service_type: null,
|
|
berth_type: null,
|
|
etc_status: null,
|
|
}}
|
|
>
|
|
<Form.Item label="泊位号" name="berth_code" required>
|
|
<Input disabled={isEdit} />
|
|
</Form.Item>
|
|
{!isEdit && (
|
|
<Form.Item label="批量添加泊位数" name="berth_count">
|
|
<Input />
|
|
</Form.Item>
|
|
)}
|
|
<Form.Item label="服务属性" name="service_type">
|
|
<Checkbox.Group
|
|
value={getEditData.service_type}
|
|
options={[
|
|
{
|
|
label: "潮汐泊位",
|
|
value: 1,
|
|
},
|
|
{
|
|
label: "共享泊位",
|
|
value: 2,
|
|
},
|
|
{
|
|
label: "充电泊位",
|
|
value: 3,
|
|
disabled: false,
|
|
},
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item label="ETC是否开启" name="etc_status" required>
|
|
<Radio.Group
|
|
placeholder="请选择ETC是否开启"
|
|
options={[
|
|
{
|
|
label: "否",
|
|
value: 0,
|
|
},
|
|
{
|
|
label: "是",
|
|
value: 1,
|
|
},
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item label="泊位类型" name="berth_type" required>
|
|
<Select
|
|
placeholder="请选择泊位类型"
|
|
options={getDeviceType}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item label="经纬度">
|
|
<Input
|
|
value={lngLat}
|
|
addonAfter={
|
|
<SelectGaodeLngLat
|
|
open={() => setLngLatVisible(true)}
|
|
lngLatVisible={lngLatVisible}
|
|
getLntLat={(value) => {
|
|
setLngLat(value);
|
|
}}
|
|
close={() => setLngLatVisible(false)}
|
|
/>
|
|
}
|
|
/>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>
|
|
</Modal>
|
|
{/* 收费员管理添加弹窗 */}
|
|
<Modal
|
|
open={tollModal}
|
|
title="收费员配置"
|
|
onCancel={() => {
|
|
setTollModal(false);
|
|
}}
|
|
onOk={() => {
|
|
const ids = hasSelectTollList;
|
|
addToll(parking_id, ids);
|
|
setTollModal(false);
|
|
}}
|
|
width={770}
|
|
>
|
|
<Transfer
|
|
dataSource={canSelectTollList}
|
|
targetKeys={hasSelectTollList}
|
|
onChange={(nexTargetKeys) => {
|
|
setHasSelectTollList(nexTargetKeys);
|
|
console.log(nexTargetKeys);
|
|
}}
|
|
render={(item) => item.label}
|
|
/>
|
|
{/* <TreeSelectGroup
|
|
unSelectedList={canSelectTollList}
|
|
onChange={(list) => {
|
|
setHasSelectTollList(list);
|
|
}}
|
|
/> */}
|
|
</Modal>
|
|
{/* 计费规则添加弹窗 */}
|
|
<Modal
|
|
open={ruleModal}
|
|
title={isRuleEdit ? '编辑' : '添加'}
|
|
width={1000}
|
|
onCancel={() => {
|
|
setRuleModal(false);
|
|
setSelectedBerth([]);
|
|
}}
|
|
style={{
|
|
top: 2,
|
|
}}
|
|
onOk={addOrEditRoadRule}
|
|
>
|
|
<Form
|
|
form={ruleForm}
|
|
colon={false}
|
|
labelCol={{ span: 6 }}
|
|
wrapperCol={{ span: 18 }}
|
|
>
|
|
<Form.Item
|
|
rules={[{ required: true }]}
|
|
label="车辆类型"
|
|
name="vehicle_type"
|
|
>
|
|
<Select
|
|
disabled={isRuleEdit}
|
|
style={{ width: 300 }}
|
|
onChange={handleCarTypeChange}
|
|
options={[
|
|
{
|
|
label: "小型车",
|
|
value: 1,
|
|
},
|
|
{
|
|
label: "中型车",
|
|
value: 2,
|
|
},
|
|
{
|
|
label: "大型车",
|
|
value: 3,
|
|
},
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item rules={[{ required: true }]} label="计费规则" name="rule_id">
|
|
<Select style={{ width: 300 }} options={billRuleList} />
|
|
</Form.Item>
|
|
<Form.Item rules={[{ required: true }]} label="是否按泊位计费" style={{ marginLeft: 51 }} name="is_select">
|
|
<Radio.Group
|
|
disabled={getCarType || isRuleEdit}
|
|
onChange={(e) => {
|
|
setGetCarTypeType(e.target.value)
|
|
console.log(e.target.value);
|
|
if (e.target.value === 1) {
|
|
|
|
setShowBerthSelect(true);
|
|
} else {
|
|
setShowBerthSelect(false);
|
|
setSelectedBerth([])
|
|
|
|
}
|
|
}}
|
|
options={[
|
|
{
|
|
label: "否",
|
|
value: 0,
|
|
},
|
|
{
|
|
label: "是",
|
|
value: 1,
|
|
},
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
{showBerthSelect ? (
|
|
<Form.Item
|
|
label="对应的泊位号"
|
|
shouldUpdate={(preValue, curValue) => {
|
|
return curValue.vehicle_type !== preValue.vehicle_type;
|
|
}}
|
|
>
|
|
<Transfer
|
|
dataSource={allBerthList}
|
|
targetKeys={selectedBerth}
|
|
onChange={(nextTargetKeys) => {
|
|
setSelectedBerth(nextTargetKeys);
|
|
}}
|
|
render={(item) => item.label}
|
|
/>
|
|
{/* <TreeSelectGroup
|
|
unSelectedList={allBerthList}
|
|
onChange={(value) => {
|
|
setSelectedBerth(value);
|
|
}}
|
|
/> */}
|
|
</Form.Item>
|
|
) : null}
|
|
</Form>
|
|
</Modal>
|
|
{/* 计费规则查看弹窗 */}
|
|
<Modal
|
|
title="查看计费规则"
|
|
open={ruleDetailModal}
|
|
onCancel={() => {
|
|
setRuleDetailModal(false);
|
|
}}
|
|
>
|
|
<Descriptions column={1}>
|
|
<Descriptions.Item label="车辆类型">
|
|
{curRuleRecord.vehicle_type_name}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="计费规则">
|
|
{curRuleRecord.rule_name}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="是否按泊位计费">
|
|
{curRuleRecord.berth_ids === "" ? "否" : "是"}
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
</Modal>
|
|
{/* 删除弹框 */}
|
|
<Modal
|
|
title="提示"
|
|
open={ruleDelModal.visible}
|
|
onOk={() => {
|
|
ajax.delRoadRule({ rule_id: ruleDelModal.id }).then((res) => {
|
|
if (res.status === 20000) {
|
|
setRuleDelModal({ ...ruleDelModal, visible: false });
|
|
formRef.current.getList();
|
|
message.success(res.message);
|
|
} else {
|
|
message.error(res.message);
|
|
}
|
|
});
|
|
}}
|
|
onCancel={() => {
|
|
setRuleDelModal({ ...ruleDelModal, visible: false });
|
|
}}
|
|
>
|
|
<p>确定删除吗？</p>
|
|
</Modal>
|
|
{/* 杆位添加或修改弹窗 */}
|
|
<Modal
|
|
width={770}
|
|
open={editPoleModal.visible}
|
|
onCancel={() => {
|
|
setEditPoleModal({ ...editPoleModal, visible: false });
|
|
setGetMonitorData([])
|
|
seGetRoadData([])
|
|
}}
|
|
title={editTitle ? "编辑杆位" : "添加杆位"}
|
|
onOk={submitPole}
|
|
>
|
|
<Form
|
|
labelCol={{ span: 6 }}
|
|
wrapperCol={{ span: 18 }}
|
|
colon={false}
|
|
form={editPoleModal.form}
|
|
>
|
|
<Form.Item
|
|
label="杆位号"
|
|
name="code"
|
|
rules={[{ required: true }]}
|
|
required
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label="是否自有杆"
|
|
name="has_pole"
|
|
rules={[{ required: true }]}
|
|
required
|
|
>
|
|
<Radio.Group
|
|
options={[
|
|
{
|
|
label: "自有杆",
|
|
value: 1,
|
|
},
|
|
{
|
|
label: "外部杆",
|
|
value: 2,
|
|
},
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item label="经纬度">
|
|
<Input.Group>
|
|
<Row>
|
|
<Col span={19}>
|
|
<Input value={lngLatModal.value} />
|
|
</Col>
|
|
<Col span={5}>
|
|
<SelectGaodeLngLat
|
|
open={() =>
|
|
setLngLatModal({ ...lngLatModal, visible: true })
|
|
}
|
|
lngLatVisible={lngLatModal.visible}
|
|
getLntLat={(value) => {
|
|
setLngLatModal({ ...lngLatModal, value: value });
|
|
}}
|
|
close={() =>
|
|
setLngLatModal({ ...lngLatModal, visible: false })
|
|
}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Input.Group>
|
|
</Form.Item>
|
|
{
|
|
editTitle ? <>
|
|
<Form.Item label="视频设备" name="video_device_ids">
|
|
{/* <Select mode="multiple" options={videoDeviceList} /> */}
|
|
<Transfer
|
|
dataSource={getLeftEditTarket}
|
|
titles={["未选择", "已选择"]}
|
|
targetKeys={getEditTarket}
|
|
onSelectChange={onSelectRoadChange}
|
|
onChange={onSelectChangeRoad}
|
|
selectedKeys={getSelectedKeys}
|
|
render={(item) => item.label}
|
|
/>
|
|
{/* <label>视频设备</label> */}
|
|
|
|
{/* <TreeSelectGroup
|
|
unSelectedList={editPoleModal.video_device.left}
|
|
selecedList={editPoleModal.video_device.right}
|
|
/> */}
|
|
</Form.Item>
|
|
<Form.Item label="监控设备" name="monitor_device_ids">
|
|
{/* <Select mode="multiple" options={monitorDeviceList} /> */}
|
|
<Transfer
|
|
dataSource={getLeftDeviceTarket}
|
|
titles={["未选择", "已选择"]}
|
|
targetKeys={getDeviceTarket}
|
|
selectedKeys={getLeftDevicetargetKey}
|
|
onSelectChange={onSelectDeviceChange}
|
|
onChange={onSelectChangeDevice}
|
|
render={(item) => item.label}
|
|
/>
|
|
</Form.Item>
|
|
</> :
|
|
<>
|
|
<Form.Item label="视频设备" name="video_device_ids">
|
|
{/* <Select mode="multiple" options={videoDeviceList} /> */}
|
|
<Transfer
|
|
dataSource={videoDeviceList}
|
|
titles={["未选择", "已选择"]}
|
|
targetKeys={getMonitorData}
|
|
onChange={(nexTargetKeys) => {
|
|
setGetMonitorData(nexTargetKeys);
|
|
}}
|
|
render={(item) => item.label}
|
|
/>
|
|
{/* <label>视频设备</label> */}
|
|
|
|
{/* <TreeSelectGroup
|
|
unSelectedList={editPoleModal.video_device.left}
|
|
selecedList={editPoleModal.video_device.right}
|
|
/> */}
|
|
</Form.Item>
|
|
<Form.Item label="监控设备" name="monitor_device_ids">
|
|
{/* <Select mode="multiple" options={monitorDeviceList} /> */}
|
|
<Transfer
|
|
dataSource={monitorDeviceList}
|
|
titles={["未选择", "已选择"]}
|
|
targetKeys={getRoadData}
|
|
onChange={(nexTargetKeys) => {
|
|
seGetRoadData(nexTargetKeys);
|
|
}}
|
|
render={(item) => item.label}
|
|
/>
|
|
{/* <label>监控设备</label> */}
|
|
{/* <TreeSelectGroup
|
|
unSelectedList={editPoleModal.monitor_device.left}
|
|
selecedList={editPoleModal.monitor_device.right}
|
|
/> */}
|
|
</Form.Item>
|
|
</>
|
|
}
|
|
|
|
</Form>
|
|
</Modal>
|
|
{/* 杆位删除弹窗 */}
|
|
<Modal
|
|
open={poleModal.visible}
|
|
onCancel={() => {
|
|
setPoleModal({ ...poleModal, visible: false });
|
|
}}
|
|
title="提示"
|
|
onOk={confirmDelPole}
|
|
>
|
|
<p>确定删除吗？</p>
|
|
</Modal>
|
|
{/* 杆位查看弹窗 */}
|
|
<Modal
|
|
open={checkPoleModal.visible}
|
|
onCancel={() =>
|
|
setCheckPoleModal({ ...checkPoleModal, visible: false })
|
|
}
|
|
>
|
|
<Descriptions column={1}>
|
|
<Descriptions.Item label="杆位号">
|
|
{checkPoleModal.record.code}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="经纬度">
|
|
{checkPoleModal.record.lng_lat}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="是否自由杆">
|
|
{checkPoleModal.record.has_pole === 1 ? "是" : "否"}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="视频设备">
|
|
{checkPoleModal.record.video_device_codes}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="监控设备">
|
|
{checkPoleModal.record.monitor_device_codes}
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
</Modal>
|
|
{/* 数据采集设备添加和编辑窗口 */}
|
|
<Modal
|
|
open={dataAcquistionModal.visible}
|
|
onCancel={() => {
|
|
setDataAcquistionModal({ ...dataAcquistionModal, visible: false });
|
|
}}
|
|
confirmLoading={modalBtnLoading}
|
|
destroyOnClose
|
|
onOk={handleDataAcquistionModal}
|
|
title={dataAcquistionModal.isEdit ? "编辑设备" : "添加设备"}
|
|
width={770}
|
|
>
|
|
<Form
|
|
form={dataAcquistionModal.form}
|
|
labelCol={{ span: 6 }}
|
|
wrapperCol={{ span: 12 }}
|
|
colon={false}
|
|
>
|
|
<Row gutter={[30]}>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
label="设备名称"
|
|
name="name"
|
|
rules={[{ required: true }]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
label="硬件编码"
|
|
name="code"
|
|
rules={[{ required: true }]}
|
|
>
|
|
<Input
|
|
disabled={dataAcquistionModal.isEdit === 0 ? false : true}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
label="设备类型"
|
|
name="type"
|
|
rules={[{ required: true }]}
|
|
>
|
|
<Select options={dataAcquistionSelect.typeList} />
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
label="设备品牌"
|
|
name="brand"
|
|
rules={[{ required: true }]}
|
|
>
|
|
<Select options={dataAcquistionSelect.brandList} />
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
label="设备功能"
|
|
name="function"
|
|
rules={[{ required: true }]}
|
|
>
|
|
<Select options={dataAcquistionSelect.funcList} />
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item label="备注" name="note">
|
|
<Input />
|
|
</Form.Item>
|
|
</Col>
|
|
{dataAcquistionModal.isEdit === 0 ? (
|
|
<Col span={12}>
|
|
<Form.Item label="对应的泊位号" name="berth">
|
|
<Transfer
|
|
dataSource={dataAcquistionBerth}
|
|
titles={["未选择", "已选择"]}
|
|
targetKeys={dataAcquistionTargetKeys}
|
|
onChange={(nexTargetKeys) => {
|
|
setDataAcquistionTargetKeys(nexTargetKeys);
|
|
}}
|
|
render={(item) => item.label}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
) : (
|
|
<Col span={12}>
|
|
<Form.Item label="对应的泊位号" name="berth">
|
|
<Transfer
|
|
dataSource={getLeftBerth}
|
|
titles={["未选择", "已选择"]}
|
|
targetKeys={targetKeys}
|
|
onChange={onChangeSelect}
|
|
selectedKeys={selectedKeys}
|
|
onSelectChange={onSelectChange}
|
|
render={(item) => item.title}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
)}
|
|
</Row>
|
|
</Form>
|
|
</Modal>
|
|
{/* 数据采集设备上线，下线，删除弹窗 */}
|
|
<Modal
|
|
open={dataStatusChangeModal.visible}
|
|
onOk={handleDataStatusChange}
|
|
title="提示"
|
|
onCancel={() => {
|
|
setDataStatusChangeModal({
|
|
...dataStatusChangeModal,
|
|
visible: false,
|
|
});
|
|
}}
|
|
>
|
|
<p>
|
|
确定
|
|
{dataStatusChangeModal.type === 1
|
|
? "上线"
|
|
: dataStatusChangeModal.type === 2
|
|
? "下线"
|
|
: "删除"}
|
|
吗？{" "}
|
|
</p>
|
|
</Modal>
|
|
{/* 数据采集设备管理查看弹窗 */}
|
|
<Modal
|
|
open={dataAcquistionDetail.visible}
|
|
onCancel={() => {
|
|
setDataAcquistionDetail({ ...dataAcquistionDetail, visible: false });
|
|
}}
|
|
title="详情"
|
|
>
|
|
<Descriptions column={2}>
|
|
<Descriptions.Item label="设备名称">
|
|
{dataAcquistionDetail.record.name}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="硬件编码">
|
|
{dataAcquistionDetail.record.code}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="设备类型">
|
|
{dataAcquistionDetail.record.type_name}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="设备品牌">
|
|
{dataAcquistionDetail.record.brand_name}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="设备功能">
|
|
{dataAcquistionDetail.record.function}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="备注">
|
|
{dataAcquistionDetail.record.note}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="对应泊位号">
|
|
{dataAcquistionDetail.record.berth_code}
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|
|
const SearchPart = forwardRef((props, ref) => {
|
|
const {
|
|
formData = [],
|
|
search = () => { },
|
|
initialValues = {},
|
|
pageData,
|
|
exporturl,
|
|
total = 0,
|
|
setSelectedRowKeys = () => { },
|
|
road_id,
|
|
closeConfirmModal = () => { },
|
|
confirmModalData = {},
|
|
delTollModal = {},
|
|
isShowExportBtn = true,
|
|
} = props;
|
|
const confirmtype = confirmModalData.type;
|
|
const [form] = Form.useForm();
|
|
const [exportData, setExportData] = useState({});
|
|
function getList(pndata = pageData) {
|
|
const params = { ...form.getFieldsValue(), ...pndata, road_id };
|
|
setExportData(params);
|
|
search(params);
|
|
}
|
|
async function onOk() {
|
|
setSelectedRowKeys([])
|
|
|
|
const res = await confirmModalData.func(confirmModalData.ids, confirmtype);
|
|
// if (res?.status === 20000) {
|
|
// closeConfirmModal();
|
|
// getList();
|
|
// }
|
|
closeConfirmModal();
|
|
getList();
|
|
}
|
|
|
|
function handleDelToll() {
|
|
delTollModal.delFunc(delTollModal.id);
|
|
delTollModal.close();
|
|
setTimeout(() => {
|
|
getList();
|
|
}, 5000);
|
|
}
|
|
useImperativeHandle(ref, () => {
|
|
return { getList };
|
|
}, [formData]);
|
|
|
|
useEffect(() => {
|
|
getList();
|
|
}, [pageData, formData]);
|
|
const reastBtn = () => {
|
|
form.resetFields();
|
|
};
|
|
return (
|
|
<>
|
|
<Form
|
|
form={form}
|
|
labelCol={{ span: 6 }}
|
|
wrapperCol={{ span: 18 }}
|
|
colon={false}
|
|
initialValues={initialValues}
|
|
>
|
|
<Row>
|
|
{formData.map((item) => {
|
|
let children = null;
|
|
switch (item.type) {
|
|
case "input":
|
|
children = (
|
|
<Form.Item
|
|
label={item.label}
|
|
name={item.name}
|
|
key={item.name}
|
|
>
|
|
<Input placeholder={item.placeholder} />
|
|
</Form.Item>
|
|
);
|
|
break;
|
|
case "select":
|
|
children = (
|
|
<Form.Item
|
|
label={item.label}
|
|
name={item.name}
|
|
key={item.name}
|
|
>
|
|
<Select
|
|
options={item.options}
|
|
placeholder={item.placeholder}
|
|
/>
|
|
</Form.Item>
|
|
);
|
|
default:
|
|
break;
|
|
}
|
|
return <Col span={24}>{children}</Col>;
|
|
})}
|
|
</Row>
|
|
</Form>
|
|
<div className="bottomBox">
|
|
<Button className="reset" onClick={reastBtn}>
|
|
重置
|
|
</Button>
|
|
<Button
|
|
type="primary"
|
|
className="submit search-button"
|
|
onClick={() => {
|
|
getList((formData, { ...pageData, pn: 1 }));
|
|
}}
|
|
>
|
|
查询
|
|
</Button>
|
|
{!isShowExportBtn ? (
|
|
<div></div>
|
|
) : (
|
|
<ExportPMS
|
|
url={exporturl}
|
|
data={exportData}
|
|
style={{
|
|
height: "36px",
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
{/* 上线下线删除的确认框 */}
|
|
<Modal
|
|
open={confirmModalData.visible}
|
|
onCancel={closeConfirmModal}
|
|
onOk={onOk}
|
|
title="提示"
|
|
>
|
|
<p>
|
|
确认{confirmtype === 1 ? "上线" : confirmtype === 2 ? "下线" : "删除"}
|
|
吗?
|
|
</p>
|
|
</Modal>
|
|
<Modal
|
|
open={delTollModal.visible}
|
|
onCancel={delTollModal.close}
|
|
onOk={handleDelToll}
|
|
title="提示"
|
|
>
|
|
<p>确定删除吗？</p>
|
|
</Modal>
|
|
</>
|
|
);
|
|
});
|
|
|
|
export default ConfigRoad;
|