|
|
@ -1,5 +1,5 @@ |
|
|
import React, { useState, useRef, useEffect } from "react"; |
|
|
import React, { useState, useRef, useEffect } from "react"; |
|
|
import { ResultFlowResult, BaseMap, Marker } from "@/components"; |
|
|
|
|
|
|
|
|
import { ResultFlowResult } from "@/components"; |
|
|
import { |
|
|
import { |
|
|
Select, |
|
|
Select, |
|
|
Input, |
|
|
Input, |
|
|
@ -9,7 +9,7 @@ import { |
|
|
Pagination, |
|
|
Pagination, |
|
|
Cascader, |
|
|
Cascader, |
|
|
Modal, |
|
|
Modal, |
|
|
TreeSelect, |
|
|
|
|
|
|
|
|
Dropdown, |
|
|
Form, |
|
|
Form, |
|
|
Row, |
|
|
Row, |
|
|
Col, |
|
|
Col, |
|
|
@ -17,54 +17,46 @@ import { |
|
|
import { pageSizeOptions } from "@/config/character.config.js"; |
|
|
import { pageSizeOptions } from "@/config/character.config.js"; |
|
|
import moment from "moment"; |
|
|
import moment from "moment"; |
|
|
import "./index.scss"; |
|
|
import "./index.scss"; |
|
|
import { |
|
|
|
|
|
SearchOutlined, |
|
|
|
|
|
DeleteOutlined, |
|
|
|
|
|
PlayCircleOutlined, |
|
|
|
|
|
EditOutlined, |
|
|
|
|
|
PlusCircleOutlined, |
|
|
|
|
|
} from "@ant-design/icons"; |
|
|
|
|
|
|
|
|
import { DeleteOutlined } from "@ant-design/icons"; |
|
|
import ajax from "@/services"; |
|
|
import ajax from "@/services"; |
|
|
function OutNvrMgm(props) { |
|
|
function OutNvrMgm(props) { |
|
|
// const configData = props.sysConfig["lib-deploy"] || {}; |
|
|
|
|
|
const [form] = Form.useForm(); |
|
|
const [form] = Form.useForm(); |
|
|
const [ajaxLoading, setAjaxLoading] = useState(false); |
|
|
|
|
|
const [getModalData, setGetModalData] = useState({ |
|
|
|
|
|
attendDistance: "", |
|
|
|
|
|
effective: "", |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 默认数据 |
|
|
|
|
|
const defaultData = { |
|
|
|
|
|
address: "", |
|
|
|
|
|
device_name: "", |
|
|
|
|
|
road_name: "", //路段名称 |
|
|
|
|
|
operator: -1, //运营商 |
|
|
|
|
|
}; |
|
|
|
|
|
// 分页数据 |
|
|
|
|
|
const [pageInfo, setPageInfo] = useState({ |
|
|
|
|
|
pageNum: 1, |
|
|
|
|
|
pageSize: 15, |
|
|
}); |
|
|
}); |
|
|
const [getEditModal, setGetEditModal] = useState({ |
|
|
|
|
|
attendDistance: "", |
|
|
|
|
|
attend: "", |
|
|
|
|
|
attendName: "", |
|
|
|
|
|
|
|
|
// 表单数据 |
|
|
|
|
|
const [formData, setFormData] = useState(defaultData); |
|
|
|
|
|
// 搜索提交数据-存储 |
|
|
|
|
|
const [holdData, setHoldData] = useState(formData); |
|
|
|
|
|
// 访问接口，isAjax改变时执行 |
|
|
|
|
|
const [isAjax, setIsAjax] = useState(false); |
|
|
|
|
|
// 检索按钮加载状态 |
|
|
|
|
|
const [loading, setLoading] = useState(false); |
|
|
|
|
|
// 表格加载状态 |
|
|
|
|
|
const [tabLoading, setTabLoading] = useState(false); |
|
|
|
|
|
// 表格返回数据 |
|
|
|
|
|
const [resultData, setResultData] = useState({ |
|
|
|
|
|
total: 0, |
|
|
|
|
|
list: [], |
|
|
}); |
|
|
}); |
|
|
const [getCanCaDer, setGetCanCaDer] = useState([]); |
|
|
|
|
|
|
|
|
|
|
|
const roadSelectRef = useRef(); |
|
|
const roadSelectRef = useRef(); |
|
|
const [editModalVisible, setEditModalVisible] = useState(false); |
|
|
const [editModalVisible, setEditModalVisible] = useState(false); |
|
|
const [editStatus, setEditStatus] = useState(false); |
|
|
const [editStatus, setEditStatus] = useState(false); |
|
|
const [storeData, setStoreData] = useState([{ label: "全部", value: -1 }]); //所属商户 |
|
|
const [storeData, setStoreData] = useState([{ label: "全部", value: -1 }]); //所属商户 |
|
|
const [getStatus, setGetStatus] = useState(2); |
|
|
|
|
|
const [getMap, setGetMap] = useState(2); |
|
|
|
|
|
const [getScope, setGetScope] = useState(2); |
|
|
|
|
|
const [getPark, setGetPark] = useState([]); |
|
|
|
|
|
const [roadData, setRoadData] = useState([]); |
|
|
const [roadData, setRoadData] = useState([]); |
|
|
const [deviceTypeData, setDeviceTypeData] = useState([]); |
|
|
const [deviceTypeData, setDeviceTypeData] = useState([]); |
|
|
const [resultData, setResultData] = useState({ |
|
|
|
|
|
data: [], |
|
|
|
|
|
total_records: 0, |
|
|
|
|
|
export_url: "", |
|
|
|
|
|
process_url: "", |
|
|
|
|
|
}); |
|
|
|
|
|
const parameter = { |
|
|
|
|
|
address: "", |
|
|
|
|
|
device_name: "", |
|
|
|
|
|
road_name: "", //路段名称 |
|
|
|
|
|
operator: -1, //运营商 |
|
|
|
|
|
export: false, |
|
|
|
|
|
pn: 1, |
|
|
|
|
|
length: Number(pageSizeOptions[0]), // 每页条数 |
|
|
|
|
|
}; |
|
|
|
|
|
const [formData, setFormData] = useState(parameter); |
|
|
|
|
|
|
|
|
|
|
|
const [formSubmitData, setFormSubmitData] = useState({ |
|
|
const [formSubmitData, setFormSubmitData] = useState({ |
|
|
address: "", |
|
|
address: "", |
|
|
create_time: "", |
|
|
create_time: "", |
|
|
@ -80,23 +72,87 @@ function OutNvrMgm(props) { |
|
|
user_name: "", |
|
|
user_name: "", |
|
|
video_port: "", |
|
|
video_port: "", |
|
|
}); |
|
|
}); |
|
|
const [lastFormData, setLastFormData] = useState(formData); |
|
|
|
|
|
const lastFormDataRef = useRef(formData); |
|
|
|
|
|
const [attendanceVisible, setAttendanceVisible] = useState(false); |
|
|
|
|
|
const [markers, setMarkers] = useState([]); |
|
|
|
|
|
//区域 |
|
|
|
|
|
const onChangeList = (value) => { |
|
|
|
|
|
setFormData({ ...formData, region: value }); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
getSelectList(); |
|
|
|
|
|
getDeviceType(); |
|
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
// 访问接口，获取表格 |
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
getData(); |
|
|
|
|
|
}, [isAjax]); |
|
|
|
|
|
|
|
|
|
|
|
const getSelectList = () => { |
|
|
|
|
|
ajax.getOperator().then( |
|
|
|
|
|
(res) => { |
|
|
|
|
|
setStoreData([...storeData, ...res.data]); |
|
|
|
|
|
}, |
|
|
|
|
|
(err) => { |
|
|
|
|
|
console.log(err); |
|
|
|
|
|
} |
|
|
|
|
|
); |
|
|
}; |
|
|
}; |
|
|
const getOperatorData = () => { |
|
|
|
|
|
ajax.getOperator().then((e) => { |
|
|
|
|
|
setStoreData([...storeData, ...e.data]); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 获取列表数据 |
|
|
|
|
|
const getData = () => { |
|
|
|
|
|
let postData = { ...formData }; |
|
|
|
|
|
if (!loading) { |
|
|
|
|
|
postData = { ...holdData }; |
|
|
|
|
|
} |
|
|
|
|
|
// console.log(postData); |
|
|
|
|
|
setTabLoading(true); |
|
|
|
|
|
ajax.getNVRListData({ ...postData, ...pageInfo }).then( |
|
|
|
|
|
(res) => { |
|
|
|
|
|
if (parseInt(res?.status) === 20000) { |
|
|
|
|
|
setResultData(res?.data || {}); |
|
|
|
|
|
} else { |
|
|
|
|
|
message.error(res?.message); |
|
|
|
|
|
} |
|
|
|
|
|
setLoading(false); |
|
|
|
|
|
setTabLoading(false); |
|
|
|
|
|
}, |
|
|
|
|
|
(err) => { |
|
|
|
|
|
console.log(err); |
|
|
|
|
|
setLoading(false); |
|
|
|
|
|
setTabLoading(false); |
|
|
|
|
|
} |
|
|
|
|
|
); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 检索数据 |
|
|
|
|
|
const handleSearch = () => { |
|
|
|
|
|
setLoading(true); |
|
|
|
|
|
setPageInfo({ ...pageInfo, ...{ pageNum: 1 } }); |
|
|
|
|
|
setHoldData(formData); |
|
|
|
|
|
setIsAjax(!isAjax); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 分页 |
|
|
|
|
|
const paginationProps = { |
|
|
|
|
|
className: "pagination-common", |
|
|
|
|
|
// position: ["bottomCenter"], |
|
|
|
|
|
showQuickJumper: true, |
|
|
|
|
|
showSizeChanger: true, |
|
|
|
|
|
current: pageInfo.pageNum, |
|
|
|
|
|
total: resultData?.total, |
|
|
|
|
|
// showTotal: () => `共 ${resultData.total || 0} 条`, |
|
|
|
|
|
pageSize: pageInfo.pageSize, |
|
|
|
|
|
pageSizeOptions: Array.from(new Set([...[15], ...(pageSizeOptions || [])])), |
|
|
|
|
|
onChange: (current, size) => { |
|
|
|
|
|
setPageInfo({ |
|
|
|
|
|
...pageInfo, |
|
|
|
|
|
...{ pageNum: pageInfo.pageSize == size ? current : 1, pageSize: size }, |
|
|
|
|
|
}); |
|
|
|
|
|
setIsAjax(!isAjax); |
|
|
|
|
|
}, |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
const handlePlay = (item) => { |
|
|
const handlePlay = (item) => { |
|
|
message.error(`播放数据暂未对接`); |
|
|
message.error(`播放数据暂未对接`); |
|
|
}; |
|
|
}; |
|
|
const handleDel = (item, index) => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleDel = (item) => { |
|
|
Modal.confirm({ |
|
|
Modal.confirm({ |
|
|
title: "确认删除？", |
|
|
title: "确认删除？", |
|
|
content: `是否确认删除设备：${item.device_name} ？`, |
|
|
content: `是否确认删除设备：${item.device_name} ？`, |
|
|
@ -105,12 +161,6 @@ function OutNvrMgm(props) { |
|
|
handleDelToServer(item.id) |
|
|
handleDelToServer(item.id) |
|
|
.then((msg) => { |
|
|
.then((msg) => { |
|
|
message.success(msg || "删除成功"); |
|
|
message.success(msg || "删除成功"); |
|
|
let copyData = resultData.data; |
|
|
|
|
|
copyData.splice(index, 1); |
|
|
|
|
|
setResultData({ |
|
|
|
|
|
...resultData, |
|
|
|
|
|
data: [...copyData], |
|
|
|
|
|
}); |
|
|
|
|
|
}) |
|
|
}) |
|
|
.catch((err) => { |
|
|
.catch((err) => { |
|
|
message.error(err); |
|
|
message.error(err); |
|
|
@ -118,6 +168,7 @@ function OutNvrMgm(props) { |
|
|
}, |
|
|
}, |
|
|
}); |
|
|
}); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const getRoadById = (id) => { |
|
|
const getRoadById = (id) => { |
|
|
return new Promise((resolved, rejected) => { |
|
|
return new Promise((resolved, rejected) => { |
|
|
ajax |
|
|
ajax |
|
|
@ -133,6 +184,7 @@ function OutNvrMgm(props) { |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const handleDelToServer = (id) => { |
|
|
const handleDelToServer = (id) => { |
|
|
return new Promise((resolved, rejected) => { |
|
|
return new Promise((resolved, rejected) => { |
|
|
ajax |
|
|
ajax |
|
|
@ -158,240 +210,119 @@ function OutNvrMgm(props) { |
|
|
setEditModalVisible(false); |
|
|
setEditModalVisible(false); |
|
|
form.resetFields(); |
|
|
form.resetFields(); |
|
|
}; |
|
|
}; |
|
|
//列表 |
|
|
|
|
|
const handleColumns = (tab) => { |
|
|
|
|
|
let result = [...tableColumns]; |
|
|
|
|
|
switch (tab) { |
|
|
|
|
|
case "1": |
|
|
|
|
|
result.splice(9, 1); |
|
|
|
|
|
break; |
|
|
|
|
|
} |
|
|
|
|
|
return result; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 操作-下拉 |
|
|
|
|
|
const items = [ |
|
|
|
|
|
{ key: "1", label: <span>查看监控</span> }, |
|
|
|
|
|
{ key: "2", label: <span>编辑</span> }, |
|
|
|
|
|
{ key: "3", label: <span>删除</span> }, |
|
|
|
|
|
]; |
|
|
//列表 |
|
|
//列表 |
|
|
const tableColumns = [ |
|
|
const tableColumns = [ |
|
|
{ |
|
|
{ |
|
|
title: "序号", |
|
|
title: "序号", |
|
|
width: 60, |
|
|
width: 60, |
|
|
render: (_, record, index) => { |
|
|
|
|
|
return index + 1; |
|
|
|
|
|
|
|
|
align: "center", |
|
|
|
|
|
render: (val, row, index) => { |
|
|
|
|
|
return <>{index + 1 + pageInfo.pageSize * (pageInfo.pageNum - 1)}</>; |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: "设备名称", |
|
|
title: "设备名称", |
|
|
dataIndex: "device_name", |
|
|
dataIndex: "device_name", |
|
|
|
|
|
align: "center", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: "所属商户", |
|
|
|
|
|
dataIndex: "operqator", |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: "所属路段", |
|
|
|
|
|
|
|
|
title: "区域", |
|
|
dataIndex: "road_name", |
|
|
dataIndex: "road_name", |
|
|
|
|
|
align: "center", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: "地址", |
|
|
|
|
|
dataIndex: "address", |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: "网络模式", |
|
|
|
|
|
dataIndex: "network_mode", |
|
|
|
|
|
|
|
|
title: "所属车场", |
|
|
|
|
|
dataIndex: "operqator", |
|
|
|
|
|
align: "center", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: "IP地址/设备编码", |
|
|
|
|
|
width: 145, |
|
|
|
|
|
|
|
|
title: "IP地址", |
|
|
dataIndex: "ip_address", |
|
|
dataIndex: "ip_address", |
|
|
|
|
|
align: "center", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: "端口号", |
|
|
title: "端口号", |
|
|
dataIndex: "port", |
|
|
dataIndex: "port", |
|
|
|
|
|
align: "center", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: "视频端口号", |
|
|
title: "视频端口号", |
|
|
width: 110, |
|
|
width: 110, |
|
|
dataIndex: "video_port", |
|
|
dataIndex: "video_port", |
|
|
|
|
|
align: "center", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: "用户名", |
|
|
title: "用户名", |
|
|
dataIndex: "user_name", |
|
|
dataIndex: "user_name", |
|
|
|
|
|
align: "center", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: "密码", |
|
|
title: "密码", |
|
|
dataIndex: "password", |
|
|
dataIndex: "password", |
|
|
|
|
|
align: "center", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: "创建日期", |
|
|
|
|
|
|
|
|
title: "更新时间", |
|
|
dataIndex: "create_time", |
|
|
dataIndex: "create_time", |
|
|
|
|
|
align: "center", |
|
|
width: 110, |
|
|
width: 110, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: "操作", |
|
|
title: "操作", |
|
|
width: 135, |
|
|
|
|
|
render: (text, record, index) => { |
|
|
|
|
|
|
|
|
align: "center", |
|
|
|
|
|
width: 140, |
|
|
|
|
|
render: (val, row, index) => { |
|
|
return ( |
|
|
return ( |
|
|
<> |
|
|
|
|
|
<div className="action-wrapper"> |
|
|
|
|
|
<Button |
|
|
|
|
|
type="primary" |
|
|
|
|
|
style={{ background: "red", borderColor: "red" }} |
|
|
|
|
|
shape="circle" |
|
|
|
|
|
size="middle" |
|
|
|
|
|
icon={<DeleteOutlined />} |
|
|
|
|
|
onClick={() => handleDel(record, index)} |
|
|
|
|
|
/> |
|
|
|
|
|
<Button |
|
|
|
|
|
type="primary" |
|
|
|
|
|
shape="circle" |
|
|
|
|
|
size="middle" |
|
|
|
|
|
icon={<PlayCircleOutlined />} |
|
|
|
|
|
onClick={() => handlePlay(record)} |
|
|
|
|
|
/> |
|
|
|
|
|
<Button |
|
|
|
|
|
type="primary" |
|
|
|
|
|
shape="circle" |
|
|
|
|
|
s |
|
|
|
|
|
size="middle" |
|
|
|
|
|
icon={<EditOutlined />} |
|
|
|
|
|
onClick={() => handleEdit(record)} |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
</> |
|
|
|
|
|
|
|
|
<Dropdown |
|
|
|
|
|
arrow |
|
|
|
|
|
placement="bottomLeft" |
|
|
|
|
|
menu={{ |
|
|
|
|
|
items, |
|
|
|
|
|
onClick: (key) => { |
|
|
|
|
|
return clickDropDown(key, row); |
|
|
|
|
|
}, |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
<Button type="primary">操作</Button> |
|
|
|
|
|
</Dropdown> |
|
|
); |
|
|
); |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
]; |
|
|
]; |
|
|
//编辑按钮 |
|
|
|
|
|
const [getRecordID, setGetRecordId] = useState({}); |
|
|
|
|
|
const editBtn = (record) => { |
|
|
|
|
|
setGetRecordId(record.id); |
|
|
|
|
|
setGetEditModal( |
|
|
|
|
|
Object.assign({}, getEditModal, { |
|
|
|
|
|
attendName: record.attendName, |
|
|
|
|
|
}) |
|
|
|
|
|
); |
|
|
|
|
|
setAttendanceVisible(true); |
|
|
|
|
|
setMarkers([ |
|
|
|
|
|
{ |
|
|
|
|
|
lng: record.attendanceLng, |
|
|
|
|
|
lat: record.attendanceLat, |
|
|
|
|
|
}, |
|
|
|
|
|
]); |
|
|
|
|
|
}; |
|
|
|
|
|
// 获取列表数据 |
|
|
|
|
|
const getData = (data = formData) => { |
|
|
|
|
|
setAjaxLoading(true); |
|
|
|
|
|
ajax.getNVRListData(data).then( |
|
|
|
|
|
(res) => { |
|
|
|
|
|
setAjaxLoading(false); |
|
|
|
|
|
if (res.status === 20000) { |
|
|
|
|
|
let resDataArr = res?.data?.list?.length |
|
|
|
|
|
? res.data.list.map((item) => { |
|
|
|
|
|
item.key = item.id; |
|
|
|
|
|
return item; |
|
|
|
|
|
}) |
|
|
|
|
|
: []; |
|
|
|
|
|
setResultData({ |
|
|
|
|
|
...resultData, |
|
|
|
|
|
data: resDataArr, |
|
|
|
|
|
total_records: res.data.total, |
|
|
|
|
|
}); |
|
|
|
|
|
} else { |
|
|
|
|
|
setResultData({ |
|
|
|
|
|
data: [], |
|
|
|
|
|
total_records: 0, |
|
|
|
|
|
export_url: "", |
|
|
|
|
|
process_url: "", |
|
|
|
|
|
}); |
|
|
|
|
|
message.error(res.message); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
(err) => { |
|
|
|
|
|
console.log(err); |
|
|
|
|
|
} |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 操作 |
|
|
|
|
|
const clickDropDown = (param, record) => { |
|
|
|
|
|
// console.log(param.key, record); |
|
|
|
|
|
// setRowData(record); |
|
|
|
|
|
if (param.key == "1") { |
|
|
|
|
|
// 查看监控 |
|
|
|
|
|
handlePlay(record); |
|
|
|
|
|
} else if (param.key == "2") { |
|
|
|
|
|
// 编辑 |
|
|
|
|
|
handleEdit(record); |
|
|
|
|
|
} else { |
|
|
|
|
|
// 删除 |
|
|
|
|
|
handleDel(record); |
|
|
|
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const getDeviceType = () => { |
|
|
const getDeviceType = () => { |
|
|
ajax.getDeviceTypeList().then((e) => { |
|
|
ajax.getDeviceTypeList().then((e) => { |
|
|
setDeviceTypeData([...deviceTypeData, ...e.data]); |
|
|
setDeviceTypeData([...deviceTypeData, ...e.data]); |
|
|
}); |
|
|
}); |
|
|
}; |
|
|
}; |
|
|
//切换分页 |
|
|
|
|
|
const changePn = (pn, length) => { |
|
|
|
|
|
if (lastFormData.length === length) { |
|
|
|
|
|
setLastFormData(Object.assign({}, lastFormData, { pn: pn })); |
|
|
|
|
|
lastFormDataRef.current = Object.assign({}, lastFormData, { pn: pn }); |
|
|
|
|
|
getData(Object.assign({}, lastFormData, { pn: pn })); |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
//切换每页条数 |
|
|
|
|
|
const changeLength = (pn, length) => { |
|
|
|
|
|
setFormData(Object.assign({}, formData, { pn: 1, length: length })); |
|
|
|
|
|
setLastFormData(Object.assign({}, lastFormData, { pn: 1, length: length })); |
|
|
|
|
|
lastFormDataRef.current = Object.assign({}, lastFormData, { |
|
|
|
|
|
pn: 1, |
|
|
|
|
|
length: length, |
|
|
|
|
|
}); |
|
|
|
|
|
getData(Object.assign({}, lastFormData, { pn: 1, length: length })); |
|
|
|
|
|
}; |
|
|
|
|
|
//检索数据 |
|
|
|
|
|
const getSearchData = (data = formData) => { |
|
|
|
|
|
getData(data); |
|
|
|
|
|
}; |
|
|
|
|
|
//重置表单 |
|
|
|
|
|
const formReset = () => { |
|
|
|
|
|
setFormData({ |
|
|
|
|
|
...parameter, |
|
|
|
|
|
}); |
|
|
|
|
|
getData({ ...parameter }); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const getCascaderList = () => { |
|
|
|
|
|
ajax.cascaderList().then((res) => { |
|
|
|
|
|
if (res.status === 20000) { |
|
|
|
|
|
setGetCanCaDer(res.data); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handleAttendDistance = (v) => { |
|
|
|
|
|
setGetModalData({ attendDistance: v }); |
|
|
|
|
|
if (v == 1) { |
|
|
|
|
|
setGetStatus(2); |
|
|
|
|
|
} |
|
|
|
|
|
if (v == 2) { |
|
|
|
|
|
setGetStatus(1); |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
const handleDistance = (v) => { |
|
|
|
|
|
setGetEditModal({ attendDistance: v }); |
|
|
|
|
|
if (v == 1) { |
|
|
|
|
|
setGetMap(2); |
|
|
|
|
|
} |
|
|
|
|
|
if (v == 2) { |
|
|
|
|
|
setGetMap(1); |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
const handleType = (v) => { |
|
|
|
|
|
setGetModalData({ attendDistance: v.target.value }); |
|
|
|
|
|
}; |
|
|
|
|
|
const handleMapType = (v) => { |
|
|
|
|
|
setGetEditModal({ attend: v.target.value }); |
|
|
|
|
|
}; |
|
|
|
|
|
const handleScope = (value) => { |
|
|
|
|
|
setGetModalData({ |
|
|
|
|
|
...getModalData, |
|
|
|
|
|
effective: value, |
|
|
|
|
|
}); |
|
|
|
|
|
if (value == 1) { |
|
|
|
|
|
setGetScope(2); |
|
|
|
|
|
} |
|
|
|
|
|
if (value == 2) { |
|
|
|
|
|
setGetScope(1); |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
const handleEditFinish = () => { |
|
|
const handleEditFinish = () => { |
|
|
console.log("form finish"); |
|
|
console.log("form finish"); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const nvrUpdate = (params) => { |
|
|
const nvrUpdate = (params) => { |
|
|
return new Promise((resolved, rejected) => { |
|
|
return new Promise((resolved, rejected) => { |
|
|
ajax |
|
|
ajax |
|
|
@ -420,11 +351,13 @@ function OutNvrMgm(props) { |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const handleAdd = () => { |
|
|
const handleAdd = () => { |
|
|
setEditStatus(false); |
|
|
setEditStatus(false); |
|
|
form.resetFields(); |
|
|
form.resetFields(); |
|
|
setEditModalVisible(true); |
|
|
setEditModalVisible(true); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const handleRoadChange = (v) => { |
|
|
const handleRoadChange = (v) => { |
|
|
ajax.getRoadInfo({ road_id: v }).then((e) => { |
|
|
ajax.getRoadInfo({ road_id: v }).then((e) => { |
|
|
if (e.status == 20000) { |
|
|
if (e.status == 20000) { |
|
|
@ -433,6 +366,7 @@ function OutNvrMgm(props) { |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const handleOperaChange = (id) => { |
|
|
const handleOperaChange = (id) => { |
|
|
// let roadSelect = document.querySelectorAll('.fenceModal .road-selector .ant-select-selection-item') |
|
|
// let roadSelect = document.querySelectorAll('.fenceModal .road-selector .ant-select-selection-item') |
|
|
// if (roadSelect.length) { |
|
|
// if (roadSelect.length) { |
|
|
@ -447,6 +381,7 @@ function OutNvrMgm(props) { |
|
|
setRoadData(data); |
|
|
setRoadData(data); |
|
|
}); |
|
|
}); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const handleSubmit = () => { |
|
|
const handleSubmit = () => { |
|
|
if (editStatus) { |
|
|
if (editStatus) { |
|
|
// 编辑 |
|
|
// 编辑 |
|
|
@ -464,12 +399,6 @@ function OutNvrMgm(props) { |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
useEffect(() => { |
|
|
|
|
|
getData(); |
|
|
|
|
|
getCascaderList(); |
|
|
|
|
|
getOperatorData(); |
|
|
|
|
|
getDeviceType(); |
|
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<> |
|
|
<> |
|
|
@ -478,7 +407,7 @@ function OutNvrMgm(props) { |
|
|
<div className="title">查询条件</div> |
|
|
<div className="title">查询条件</div> |
|
|
<div className="form-Wrap"> |
|
|
<div className="form-Wrap"> |
|
|
<div className="yisa-search"> |
|
|
<div className="yisa-search"> |
|
|
<label>设备名称</label> |
|
|
|
|
|
|
|
|
<label>视频设备名称</label> |
|
|
<Input |
|
|
<Input |
|
|
className="form-con" |
|
|
className="form-con" |
|
|
placeholder="请输入设备名称" |
|
|
placeholder="请输入设备名称" |
|
|
@ -493,38 +422,34 @@ function OutNvrMgm(props) { |
|
|
<Select |
|
|
<Select |
|
|
className="form-con" |
|
|
className="form-con" |
|
|
placeholder="请选择" |
|
|
placeholder="请选择" |
|
|
|
|
|
options={storeData || []} |
|
|
value={formData.operator} |
|
|
value={formData.operator} |
|
|
options={storeData} |
|
|
|
|
|
onChange={(v) => setFormData({ ...formData, operator: v })} |
|
|
onChange={(v) => setFormData({ ...formData, operator: v })} |
|
|
/> |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
<div className="yisa-search"> |
|
|
<div className="yisa-search"> |
|
|
<label>路段名称</label> |
|
|
|
|
|
<Input |
|
|
|
|
|
|
|
|
<label>车场名称</label> |
|
|
|
|
|
<Select |
|
|
className="form-con" |
|
|
className="form-con" |
|
|
placeholder="请输入路段名称" |
|
|
|
|
|
|
|
|
placeholder="请选择" |
|
|
|
|
|
options={storeData || []} |
|
|
value={formData.road_name} |
|
|
value={formData.road_name} |
|
|
onChange={(e) => |
|
|
|
|
|
setFormData({ ...formData, road_name: e.target.value }) |
|
|
|
|
|
} |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div className="yisa-search"> |
|
|
|
|
|
<label>地址</label> |
|
|
|
|
|
<Input |
|
|
|
|
|
className="form-con" |
|
|
|
|
|
placeholder="请输入地址" |
|
|
|
|
|
value={formData.address} |
|
|
|
|
|
onChange={(e) => |
|
|
|
|
|
setFormData({ ...formData, address: e.target.value }) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
onChange={(v) => setFormData({ ...formData, road_name: v })} |
|
|
/> |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
<div className="form-btn"> |
|
|
<div className="form-btn"> |
|
|
<Button className="reset" onClick={() => formReset()}> |
|
|
|
|
|
|
|
|
<Button |
|
|
|
|
|
className="reset" |
|
|
|
|
|
onClick={() => setFormData(defaultData)} |
|
|
|
|
|
> |
|
|
重置 |
|
|
重置 |
|
|
</Button> |
|
|
</Button> |
|
|
<Button className="submit" type="primary" onClick={getSearchData}> |
|
|
|
|
|
|
|
|
<Button |
|
|
|
|
|
className="submit" |
|
|
|
|
|
type="primary" |
|
|
|
|
|
onClick={handleSearch} |
|
|
|
|
|
loading={loading} |
|
|
|
|
|
> |
|
|
查询 |
|
|
查询 |
|
|
</Button> |
|
|
</Button> |
|
|
</div> |
|
|
</div> |
|
|
@ -550,31 +475,19 @@ function OutNvrMgm(props) { |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<ResultFlowResult |
|
|
<ResultFlowResult |
|
|
ajaxLoad={ajaxLoading} |
|
|
|
|
|
resultData={resultData.data ? resultData.data : []} |
|
|
|
|
|
|
|
|
ajaxLoad={tabLoading} |
|
|
|
|
|
resultData={resultData?.list || []} |
|
|
> |
|
|
> |
|
|
<Table |
|
|
<Table |
|
|
bordered |
|
|
|
|
|
|
|
|
// bordered |
|
|
className="yisa-table" |
|
|
className="yisa-table" |
|
|
dataSource={resultData.data} |
|
|
|
|
|
columns={handleColumns()} |
|
|
|
|
|
scroll={{ y: 660 }} |
|
|
|
|
|
// rowKey={record => record.cap_id + "_" + record.bk_id} |
|
|
|
|
|
|
|
|
rowKey={(row) => row.id} |
|
|
|
|
|
dataSource={resultData?.list || []} |
|
|
|
|
|
columns={tableColumns} |
|
|
pagination={false} |
|
|
pagination={false} |
|
|
loading={ajaxLoading} |
|
|
|
|
|
/> |
|
|
|
|
|
<Pagination |
|
|
|
|
|
className="pagination-common" |
|
|
|
|
|
showSizeChanger |
|
|
|
|
|
showQuickJumper |
|
|
|
|
|
showTotal={() => `共 ${resultData.total_records} 条`} |
|
|
|
|
|
total={resultData.total_records} |
|
|
|
|
|
current={lastFormData.pn} |
|
|
|
|
|
pageSize={lastFormData.length} |
|
|
|
|
|
pageSizeOptions={pageSizeOptions} |
|
|
|
|
|
onChange={changePn} |
|
|
|
|
|
onShowSizeChange={changeLength} |
|
|
|
|
|
|
|
|
loading={tabLoading} |
|
|
/> |
|
|
/> |
|
|
|
|
|
<Pagination {...paginationProps} className="pagination-common" /> |
|
|
</ResultFlowResult> |
|
|
</ResultFlowResult> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
fengxiang
2 years ago