|
|
|
@ -1,324 +1,334 @@ |
|
|
|
import React, { useState, useEffect, useRef } from "react"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import moment from "moment"; |
|
|
|
import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui"; |
|
|
|
import { |
|
|
|
Button, |
|
|
|
Form, |
|
|
|
Input, |
|
|
|
Row, |
|
|
|
Table, |
|
|
|
Pagination, |
|
|
|
Skeleton, |
|
|
|
} from "@douyinfe/semi-ui"; |
|
|
|
import "../style.less"; |
|
|
|
import NvrModal from "../components/nvrModal"; |
|
|
|
import Setup from "../components/setup"; |
|
|
|
import SideSheets from "../components/sideSheet"; |
|
|
|
|
|
|
|
export const accessType = [ |
|
|
|
{ name: "萤石云平台摄像头", key: "yingshi" }, |
|
|
|
{ name: "NVR摄像头", key: "nvr" }, |
|
|
|
{ name: "IPC 网络摄像头", key: "ipc" }, |
|
|
|
{ name: "级联摄像头", key: "cascade" }, |
|
|
|
{ name: "萤石云平台摄像头", key: "yingshi" }, |
|
|
|
{ name: "NVR摄像头", key: "nvr" }, |
|
|
|
{ name: "IPC 网络摄像头", key: "ipc" }, |
|
|
|
{ name: "级联摄像头", key: "cascade" }, |
|
|
|
]; |
|
|
|
|
|
|
|
const NvrHeader = (props) => { |
|
|
|
const { dispatch, actions, user, loading, equipmentWarehouseNvr } = props; |
|
|
|
const { equipmentWarehouse } = actions; |
|
|
|
const [setup, setSetup] = useState(false); |
|
|
|
const [sideSheet, setSideSheet] = useState(false); |
|
|
|
const [setupp, setSetupp] = useState([]); |
|
|
|
const [venderList, setvenderList] = useState([]); //厂商信息 |
|
|
|
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 |
|
|
|
const [search, setearch] = useState({}); //搜索条件 |
|
|
|
const [rowId, setRowId] = useState(); //表格数据id |
|
|
|
const { dispatch, actions, user, loading, equipmentWarehouseNvr } = props; |
|
|
|
const { equipmentWarehouse } = actions; |
|
|
|
// const [loading, setLoading] = useState(false); |
|
|
|
const [setup, setSetup] = useState(false); |
|
|
|
const [sideSheet, setSideSheet] = useState(false); |
|
|
|
const [setupp, setSetupp] = useState([]); |
|
|
|
const [venderList, setvenderList] = useState([]); //厂商信息 |
|
|
|
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 |
|
|
|
const [search, setearch] = useState({}); //搜索条件 |
|
|
|
const [rowId, setRowId] = useState(); //表格数据id |
|
|
|
|
|
|
|
const api = useRef(); |
|
|
|
const SETUPS = "setups"; |
|
|
|
const api = useRef(); |
|
|
|
const SETUPS = "setups"; |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
dispatch(actions.equipmentWarehouse.getVender()).then((res) => { |
|
|
|
setvenderList(res.payload.data); |
|
|
|
attribute(res.payload.data); |
|
|
|
}); |
|
|
|
//初始化表格显示设置 |
|
|
|
localStorage.getItem(SETUPS) == null |
|
|
|
? localStorage.setItem( |
|
|
|
SETUPS, |
|
|
|
JSON.stringify(["manufactor", "passageway", "port", "state"]) |
|
|
|
) |
|
|
|
: ""; |
|
|
|
// ; |
|
|
|
}, []); |
|
|
|
useEffect(() => { |
|
|
|
equipmentGetNvr(); |
|
|
|
}, [query, search]); |
|
|
|
useEffect(() => { |
|
|
|
dispatch(actions.equipmentWarehouse.getVender()).then((res) => { |
|
|
|
setvenderList(res.payload.data); |
|
|
|
attribute(res.payload.data); |
|
|
|
}); |
|
|
|
//初始化表格显示设置 |
|
|
|
localStorage.getItem(SETUPS) == null |
|
|
|
? localStorage.setItem( |
|
|
|
SETUPS, |
|
|
|
JSON.stringify(["manufactor", "passageway", "port", "state"]) |
|
|
|
) |
|
|
|
: ""; |
|
|
|
// ; |
|
|
|
}, []); |
|
|
|
useEffect(() => { |
|
|
|
equipmentGetNvr(); |
|
|
|
}, [query, search]); |
|
|
|
|
|
|
|
function equipmentGetNvr() { |
|
|
|
dispatch(equipmentWarehouse.getNvr({ ...query, ...search })); |
|
|
|
} |
|
|
|
const columns = [ |
|
|
|
{ |
|
|
|
title: "序号", |
|
|
|
render: (text, record, index) => { |
|
|
|
return index + 1; |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "设备名称", |
|
|
|
dataIndex: "name", |
|
|
|
render: (text, r, index) => { |
|
|
|
return ( |
|
|
|
<div> |
|
|
|
<span |
|
|
|
style={{ |
|
|
|
backgroundColor: r.avatarBg, |
|
|
|
width: "10px", |
|
|
|
height: "10px", |
|
|
|
borderRadius: "50%", |
|
|
|
display: "inline-block", |
|
|
|
marginRight: "10px", |
|
|
|
}} |
|
|
|
/> |
|
|
|
{r.name} |
|
|
|
</div> |
|
|
|
); |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "SIP地址", |
|
|
|
dataIndex: "owner", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "操作", |
|
|
|
width: "20%", |
|
|
|
dataIndex: "", |
|
|
|
render: (_, row) => { |
|
|
|
return ( |
|
|
|
<div style={{ display: "flex" }}> |
|
|
|
<Button theme="borderless"> |
|
|
|
<NvrModal |
|
|
|
nvrData={row} |
|
|
|
modalName="revise" |
|
|
|
venderList={venderList} |
|
|
|
close={() => { |
|
|
|
equipmentGetNvr(); |
|
|
|
}} |
|
|
|
/> |
|
|
|
</Button> |
|
|
|
<Button |
|
|
|
theme="borderless" |
|
|
|
onClick={() => { |
|
|
|
setSideSheet(true); |
|
|
|
setRowId(row.id); |
|
|
|
}} |
|
|
|
> |
|
|
|
查看 |
|
|
|
</Button> |
|
|
|
<Button |
|
|
|
theme="borderless" |
|
|
|
onClick={() => { |
|
|
|
dispatch(equipmentWarehouse.delNvr(row.id)).then(() => { |
|
|
|
equipmentGetNvr(); |
|
|
|
}); |
|
|
|
}} |
|
|
|
> |
|
|
|
删除 |
|
|
|
</Button> |
|
|
|
</div> |
|
|
|
); |
|
|
|
}, |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
//获取表格属性设置 |
|
|
|
function attribute(data) { |
|
|
|
const arr = localStorage.getItem(SETUPS) |
|
|
|
? JSON.parse(localStorage.getItem(SETUPS)) |
|
|
|
: []; |
|
|
|
|
|
|
|
function equipmentGetNvr () { |
|
|
|
dispatch(equipmentWarehouse.getNvr({ ...query, ...search })); |
|
|
|
} |
|
|
|
const columns = [ |
|
|
|
const column = [ |
|
|
|
{ |
|
|
|
title: "序号", |
|
|
|
render: (text, record, index) => { |
|
|
|
return index + 1; |
|
|
|
}, |
|
|
|
title: "设备厂家", |
|
|
|
dataIndex: "venderId", |
|
|
|
key: "manufactor", |
|
|
|
render: (_, r, index) => { |
|
|
|
let manufactorName = data.find((item) => item.id == r.venderId); |
|
|
|
return manufactorName ? manufactorName.name : ""; |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "设备名称", |
|
|
|
dataIndex: "name", |
|
|
|
render: (text, r, index) => { |
|
|
|
return ( |
|
|
|
<div> |
|
|
|
<span |
|
|
|
style={{ |
|
|
|
backgroundColor: r.avatarBg, |
|
|
|
width: "10px", |
|
|
|
height: "10px", |
|
|
|
borderRadius: "50%", |
|
|
|
display: "inline-block", |
|
|
|
marginRight: "10px", |
|
|
|
}} |
|
|
|
/> |
|
|
|
{r.name} |
|
|
|
</div> |
|
|
|
); |
|
|
|
}, |
|
|
|
title: "添加账号", |
|
|
|
dataIndex: "createUserId", |
|
|
|
key: "accountNumber", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "SIP地址", |
|
|
|
dataIndex: "owner", |
|
|
|
title: "通道数", |
|
|
|
dataIndex: "channelCount", |
|
|
|
key: "passageway", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "操作", |
|
|
|
width: "20%", |
|
|
|
dataIndex: "", |
|
|
|
render: (_, row) => { |
|
|
|
return ( |
|
|
|
<div style={{ display: "flex" }}> |
|
|
|
<Button theme="borderless"> |
|
|
|
<NvrModal |
|
|
|
nvrData={row} |
|
|
|
modalName="revise" |
|
|
|
venderList={venderList} |
|
|
|
close={() => { |
|
|
|
equipmentGetNvr(); |
|
|
|
}} |
|
|
|
/> |
|
|
|
</Button> |
|
|
|
<Button |
|
|
|
theme="borderless" |
|
|
|
onClick={() => { |
|
|
|
setSideSheet(true); |
|
|
|
setRowId(row.id); |
|
|
|
}} |
|
|
|
> |
|
|
|
查看 |
|
|
|
</Button> |
|
|
|
<Button |
|
|
|
theme="borderless" |
|
|
|
onClick={() => { |
|
|
|
dispatch(equipmentWarehouse.delNvr(row.id)); |
|
|
|
equipmentGetNvr(); |
|
|
|
}} |
|
|
|
> |
|
|
|
删除 |
|
|
|
</Button> |
|
|
|
</div> |
|
|
|
); |
|
|
|
}, |
|
|
|
title: "端口", |
|
|
|
dataIndex: "port", |
|
|
|
key: "port", |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
//获取表格属性设置 |
|
|
|
function attribute (data) { |
|
|
|
const arr = localStorage.getItem(SETUPS) |
|
|
|
? JSON.parse(localStorage.getItem(SETUPS)) |
|
|
|
: []; |
|
|
|
|
|
|
|
const column = [ |
|
|
|
{ |
|
|
|
title: "设备厂家", |
|
|
|
dataIndex: "venderId", |
|
|
|
key: "manufactor", |
|
|
|
render: (_, r, index) => { |
|
|
|
let manufactorName = data.find((item) => item.id == r.venderId); |
|
|
|
return manufactorName ? manufactorName.name : ""; |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "添加账号", |
|
|
|
dataIndex: "createUserId", |
|
|
|
key: "accountNumber", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "通道数", |
|
|
|
dataIndex: "channelCount", |
|
|
|
key: "passageway", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "端口", |
|
|
|
dataIndex: "port", |
|
|
|
key: "port", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "设备状态", |
|
|
|
dataIndex: "size", |
|
|
|
key: "state", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "创建时间", |
|
|
|
dataIndex: "createTime", |
|
|
|
key: "time", |
|
|
|
render: (text, r, index) => { |
|
|
|
return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS"); |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "项目名称", |
|
|
|
dataIndex: "", |
|
|
|
key: "name", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "pcode", |
|
|
|
dataIndex: "", |
|
|
|
key: "pcode", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "结构物", |
|
|
|
dataIndex: "", |
|
|
|
key: "structure", |
|
|
|
}, |
|
|
|
]; |
|
|
|
for (let i = 0; i < arr.length; i++) { |
|
|
|
let colum = column.filter((item) => { |
|
|
|
return item.key === arr[i]; |
|
|
|
}); |
|
|
|
columns.splice(i + 2, 0, colum[0]); |
|
|
|
} |
|
|
|
setSetupp(columns); |
|
|
|
} |
|
|
|
{ |
|
|
|
title: "设备状态", |
|
|
|
dataIndex: "size", |
|
|
|
key: "state", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "创建时间", |
|
|
|
dataIndex: "createTime", |
|
|
|
key: "time", |
|
|
|
render: (text, r, index) => { |
|
|
|
return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS"); |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "项目名称", |
|
|
|
dataIndex: "", |
|
|
|
key: "name", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "pcode", |
|
|
|
dataIndex: "", |
|
|
|
key: "pcode", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "结构物", |
|
|
|
dataIndex: "", |
|
|
|
key: "structure", |
|
|
|
}, |
|
|
|
]; |
|
|
|
for (let i = 0; i < arr.length; i++) { |
|
|
|
let colum = column.filter((item) => { |
|
|
|
return item.key === arr[i]; |
|
|
|
}); |
|
|
|
columns.splice(i + 2, 0, colum[0]); |
|
|
|
} |
|
|
|
setSetupp(columns); |
|
|
|
} |
|
|
|
|
|
|
|
//条件赛选样式 |
|
|
|
const screen = { |
|
|
|
width: 193, |
|
|
|
marginRight: 20, |
|
|
|
marginBottom: 16, |
|
|
|
color: "rgba(0, 0, 0, 0.65)", |
|
|
|
}; |
|
|
|
//条件赛选样式 |
|
|
|
const screen = { |
|
|
|
width: 193, |
|
|
|
marginRight: 20, |
|
|
|
marginBottom: 16, |
|
|
|
color: "rgba(0, 0, 0, 0.65)", |
|
|
|
}; |
|
|
|
|
|
|
|
return ( |
|
|
|
<> |
|
|
|
<div style={{ position: "" }}> |
|
|
|
<video |
|
|
|
id="nvrBanner" |
|
|
|
autoPlay |
|
|
|
loop |
|
|
|
muted |
|
|
|
style={{ width: "100%", objectFit: "cover", height: 171 }} |
|
|
|
src="/assets/video/nvr_banner.mp4" |
|
|
|
type="video/mp4" |
|
|
|
/> |
|
|
|
<div style={{ position: "absolute", top: 12 }}> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
fontSize: 22, |
|
|
|
paddingTop: 15, |
|
|
|
marginLeft: 21, |
|
|
|
}} |
|
|
|
> |
|
|
|
NVR管理 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
fontSize: 14, |
|
|
|
paddingTop: 18, |
|
|
|
marginLeft: 20, |
|
|
|
}} |
|
|
|
> |
|
|
|
对NVR（网络硬盘录像机）设备节点的管理 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
fontSize: 14, |
|
|
|
marginTop: 28, |
|
|
|
marginLeft: 21, |
|
|
|
width: 89, |
|
|
|
height: 32, |
|
|
|
lineHeight: "32px", |
|
|
|
textAlign: "center", |
|
|
|
backgroundColor: "#D9EAFF", |
|
|
|
color: "#1859C1", |
|
|
|
cursor: "pointer", |
|
|
|
}} |
|
|
|
> |
|
|
|
<NvrModal |
|
|
|
modalName="add" |
|
|
|
venderList={venderList} |
|
|
|
close={() => { |
|
|
|
equipmentGetNvr(); |
|
|
|
}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<div style={{ position: "" }}> |
|
|
|
<video |
|
|
|
id="nvrBanner" |
|
|
|
autoPlay |
|
|
|
loop |
|
|
|
muted |
|
|
|
style={{ width: "100%", objectFit: "cover", height: 171 }} |
|
|
|
src="/assets/video/nvr_banner.mp4" |
|
|
|
type="video/mp4" |
|
|
|
/> |
|
|
|
<div style={{ position: "absolute", top: 12 }}> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
fontSize: 22, |
|
|
|
paddingTop: 15, |
|
|
|
marginLeft: 21, |
|
|
|
}} |
|
|
|
> |
|
|
|
NVR管理 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
fontSize: 14, |
|
|
|
paddingTop: 18, |
|
|
|
marginLeft: 20, |
|
|
|
}} |
|
|
|
> |
|
|
|
对NVR（网络硬盘录像机）设备节点的管理 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
width: "100%", |
|
|
|
background: "#FFFFFF", |
|
|
|
borderRadius: 3, |
|
|
|
padding: "8px 20px", |
|
|
|
marginTop: 20, |
|
|
|
fontSize: 14, |
|
|
|
marginTop: 28, |
|
|
|
marginLeft: 21, |
|
|
|
width: 89, |
|
|
|
height: 32, |
|
|
|
lineHeight: "32px", |
|
|
|
textAlign: "center", |
|
|
|
backgroundColor: "#D9EAFF", |
|
|
|
color: "#1859C1", |
|
|
|
cursor: "pointer", |
|
|
|
}} |
|
|
|
> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
height: 22, |
|
|
|
fontSize: 16, |
|
|
|
fontFamily: "PingFangSC-Medium, PingFang SC", |
|
|
|
fontWeight: "bold", |
|
|
|
color: " rgba(0, 0, 0, 0.85)", |
|
|
|
lineHeight: "22px", |
|
|
|
marginBottom: 16, |
|
|
|
}} |
|
|
|
> |
|
|
|
<NvrModal |
|
|
|
modalName="add" |
|
|
|
venderList={venderList} |
|
|
|
close={() => { |
|
|
|
equipmentGetNvr(); |
|
|
|
}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
width: "100%", |
|
|
|
background: "#FFFFFF", |
|
|
|
borderRadius: 3, |
|
|
|
padding: "8px 20px", |
|
|
|
marginTop: 20, |
|
|
|
}} |
|
|
|
> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
height: 22, |
|
|
|
fontSize: 16, |
|
|
|
fontFamily: "PingFangSC-Medium, PingFang SC", |
|
|
|
fontWeight: "bold", |
|
|
|
color: " rgba(0, 0, 0, 0.85)", |
|
|
|
lineHeight: "22px", |
|
|
|
marginBottom: 16, |
|
|
|
}} |
|
|
|
> |
|
|
|
筛选条件 |
|
|
|
</div> |
|
|
|
<div style={{ display: "flex" }}> |
|
|
|
<Form |
|
|
|
onSubmit={(values) => console.log(values)} |
|
|
|
// onValueChange={values=>console.log(values)} |
|
|
|
getFormApi={(formApi) => (api.current = formApi)} |
|
|
|
layout="horizontal" |
|
|
|
style={{ position: "relative", width: "100%", flex: 1 }} |
|
|
|
> |
|
|
|
<Form.Input |
|
|
|
label="设备搜索：" |
|
|
|
field="keyword" |
|
|
|
placeholder="请输入设备名称" |
|
|
|
labelPosition="left" |
|
|
|
style={screen} |
|
|
|
/> |
|
|
|
<Form.Select |
|
|
|
label="厂家筛选：" |
|
|
|
labelPosition="left" |
|
|
|
style={screen} |
|
|
|
field="venderId" |
|
|
|
placeholder="全部" |
|
|
|
showClear |
|
|
|
> |
|
|
|
筛选条件 |
|
|
|
</div> |
|
|
|
<div style={{ display: "flex" }}> |
|
|
|
<Form |
|
|
|
onSubmit={(values) => console.log(values)} |
|
|
|
// onValueChange={values=>console.log(values)} |
|
|
|
getFormApi={(formApi) => (api.current = formApi)} |
|
|
|
layout="horizontal" |
|
|
|
style={{ position: "relative", width: "100%", flex: 1 }} |
|
|
|
> |
|
|
|
<Form.Input |
|
|
|
label="设备搜索：" |
|
|
|
field="keyword" |
|
|
|
placeholder="请输入设备名称" |
|
|
|
labelPosition="left" |
|
|
|
style={screen} |
|
|
|
/> |
|
|
|
<Form.Select |
|
|
|
label="厂家筛选：" |
|
|
|
labelPosition="left" |
|
|
|
style={screen} |
|
|
|
field="venderId" |
|
|
|
placeholder="全部" |
|
|
|
showClear |
|
|
|
> |
|
|
|
{venderList.map((item) => { |
|
|
|
return ( |
|
|
|
<Form.Select.Option key={item.id} value={item.id}> |
|
|
|
{item.name} |
|
|
|
</Form.Select.Option> |
|
|
|
); |
|
|
|
})} |
|
|
|
</Form.Select> |
|
|
|
<Form.Select |
|
|
|
label="状态查询：" |
|
|
|
labelPosition="left" |
|
|
|
field="type2" |
|
|
|
style={screen} |
|
|
|
placeholder="全部" |
|
|
|
showClear |
|
|
|
> |
|
|
|
<Form.Select.Option value="yes">在线</Form.Select.Option> |
|
|
|
<Form.Select.Option value="no">离线</Form.Select.Option> |
|
|
|
</Form.Select> |
|
|
|
{/* <Form.Select |
|
|
|
{venderList.map((item) => { |
|
|
|
return ( |
|
|
|
<Form.Select.Option key={item.id} value={item.id}> |
|
|
|
{item.name} |
|
|
|
</Form.Select.Option> |
|
|
|
); |
|
|
|
})} |
|
|
|
</Form.Select> |
|
|
|
<Form.Select |
|
|
|
label="状态查询：" |
|
|
|
labelPosition="left" |
|
|
|
field="type2" |
|
|
|
style={screen} |
|
|
|
placeholder="全部" |
|
|
|
showClear |
|
|
|
> |
|
|
|
<Form.Select.Option value="yes">在线</Form.Select.Option> |
|
|
|
<Form.Select.Option value="no">离线</Form.Select.Option> |
|
|
|
</Form.Select> |
|
|
|
{/* <Form.Select |
|
|
|
label="关联项目：" |
|
|
|
labelPosition="left" |
|
|
|
field="type3" |
|
|
|
@ -333,179 +343,197 @@ const NvrHeader = (props) => { |
|
|
|
飞尚科技2 |
|
|
|
</Form.Select.Option> |
|
|
|
</Form.Select> */} |
|
|
|
</Form> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
width: 150, |
|
|
|
display: "flex", |
|
|
|
justifyContent: "flex-end", |
|
|
|
alignItems: "flex-end", |
|
|
|
}} |
|
|
|
> |
|
|
|
<Button |
|
|
|
theme="solid" |
|
|
|
type="primary" |
|
|
|
style={{ |
|
|
|
width: 65, |
|
|
|
height: 30, |
|
|
|
borderRadius: 3, |
|
|
|
marginBottom: 20, |
|
|
|
marginRight: 20, |
|
|
|
}} |
|
|
|
onClick={() => { |
|
|
|
api.current.validate().then((v) => { |
|
|
|
setearch(v); |
|
|
|
}); |
|
|
|
equipmentGetNvr(); |
|
|
|
}} |
|
|
|
> |
|
|
|
搜素 |
|
|
|
</Button> |
|
|
|
<Button |
|
|
|
theme="light" |
|
|
|
type="primary" |
|
|
|
style={{ |
|
|
|
width: 65, |
|
|
|
height: 30, |
|
|
|
backGround: "#FFFFFF", |
|
|
|
borderRadius: 3, |
|
|
|
border: "1px solid #D9D9D9", |
|
|
|
marginBottom: 20, |
|
|
|
}} |
|
|
|
> |
|
|
|
重置 |
|
|
|
</Button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ background: "#FFFFFF", marginTop: 5 }}> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
width: "100%", |
|
|
|
display: "flex", |
|
|
|
justifyContent: "space-between", |
|
|
|
padding: "13px 20px", |
|
|
|
}} |
|
|
|
</Form> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
width: 150, |
|
|
|
display: "flex", |
|
|
|
justifyContent: "flex-end", |
|
|
|
alignItems: "flex-end", |
|
|
|
}} |
|
|
|
> |
|
|
|
<Button |
|
|
|
theme="solid" |
|
|
|
type="primary" |
|
|
|
style={{ |
|
|
|
width: 65, |
|
|
|
height: 30, |
|
|
|
borderRadius: 3, |
|
|
|
marginBottom: 20, |
|
|
|
marginRight: 20, |
|
|
|
}} |
|
|
|
onClick={() => { |
|
|
|
api.current.validate().then((v) => { |
|
|
|
setearch(v); |
|
|
|
}); |
|
|
|
equipmentGetNvr(); |
|
|
|
}} |
|
|
|
> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
width: 64, |
|
|
|
height: 22, |
|
|
|
fontSize: 16, |
|
|
|
fontfAmily: "PingFangSC-Medium, PingFang SC", |
|
|
|
fontWeight: "bold", |
|
|
|
color: "rgba(0, 0, 0, 0.85)", |
|
|
|
lineHeight: "22px", |
|
|
|
}} |
|
|
|
> |
|
|
|
设备列表 |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<Button |
|
|
|
style={{ |
|
|
|
width: 32, |
|
|
|
height: 32, |
|
|
|
background: "#D9D9D9", |
|
|
|
borderadius: 3, |
|
|
|
marginRight: 20, |
|
|
|
}} |
|
|
|
type="primary" |
|
|
|
key="primary" |
|
|
|
onClick={() => { |
|
|
|
setSetup(true); |
|
|
|
}} |
|
|
|
> |
|
|
|
<img |
|
|
|
src="/assets/images/background/setup.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: 18, height: 18 }} |
|
|
|
/> |
|
|
|
</Button> |
|
|
|
<Button |
|
|
|
style={{ |
|
|
|
width: 65, |
|
|
|
height: 32, |
|
|
|
background: "#FFFFFF", |
|
|
|
borderRadius: 3, |
|
|
|
border: "1px solid #1859C1", |
|
|
|
}} |
|
|
|
> |
|
|
|
导出 |
|
|
|
</Button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
搜素 |
|
|
|
</Button> |
|
|
|
<Button |
|
|
|
theme="light" |
|
|
|
type="primary" |
|
|
|
style={{ |
|
|
|
width: 65, |
|
|
|
height: 30, |
|
|
|
backGround: "#FFFFFF", |
|
|
|
borderRadius: 3, |
|
|
|
border: "1px solid #D9D9D9", |
|
|
|
marginBottom: 20, |
|
|
|
}} |
|
|
|
onClick={() => { |
|
|
|
api.current.reset(); |
|
|
|
setearch({}); |
|
|
|
equipmentGetNvr(); |
|
|
|
}} |
|
|
|
> |
|
|
|
重置 |
|
|
|
</Button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ background: "#FFFFFF", marginTop: 5 }}> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
width: "100%", |
|
|
|
display: "flex", |
|
|
|
justifyContent: "space-between", |
|
|
|
padding: "13px 20px", |
|
|
|
}} |
|
|
|
> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
width: 64, |
|
|
|
height: 22, |
|
|
|
fontSize: 16, |
|
|
|
fontfAmily: "PingFangSC-Medium, PingFang SC", |
|
|
|
fontWeight: "bold", |
|
|
|
color: "rgba(0, 0, 0, 0.85)", |
|
|
|
lineHeight: "22px", |
|
|
|
}} |
|
|
|
> |
|
|
|
设备列表 |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<Button |
|
|
|
style={{ |
|
|
|
width: 32, |
|
|
|
height: 32, |
|
|
|
background: "#D9D9D9", |
|
|
|
borderadius: 3, |
|
|
|
marginRight: 20, |
|
|
|
}} |
|
|
|
type="primary" |
|
|
|
key="primary" |
|
|
|
onClick={() => { |
|
|
|
setSetup(true); |
|
|
|
}} |
|
|
|
> |
|
|
|
<img |
|
|
|
src="/assets/images/background/setup.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: 18, height: 18 }} |
|
|
|
/> |
|
|
|
</Button> |
|
|
|
<Button |
|
|
|
style={{ |
|
|
|
width: 65, |
|
|
|
height: 32, |
|
|
|
background: "#FFFFFF", |
|
|
|
borderRadius: 3, |
|
|
|
border: "1px solid #1859C1", |
|
|
|
}} |
|
|
|
> |
|
|
|
导出 |
|
|
|
</Button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<Skeleton |
|
|
|
loading={loading} |
|
|
|
placeholder={ |
|
|
|
<Table |
|
|
|
columns={setupp.filter(s => s)} |
|
|
|
dataSource={equipmentWarehouseNvr.data} |
|
|
|
bordered={false} |
|
|
|
empty="暂无数据" |
|
|
|
style={{ |
|
|
|
padding: "0px 20px", |
|
|
|
}} |
|
|
|
pagination={false} |
|
|
|
columns={setupp.filter((s) => s)} |
|
|
|
dataSource={[{ name: "" },{ key: "" },{ name: "" },{ name: "" },{ name: "" },{ name: "" },{ name: "" }]} |
|
|
|
pagination={false} |
|
|
|
style={{ background: "rgba(217, 216, 216, 1)" }} |
|
|
|
empty="" |
|
|
|
/> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
display: "flex", |
|
|
|
justifyContent: "flex-end", |
|
|
|
padding: "20px 20px", |
|
|
|
}} |
|
|
|
> |
|
|
|
<span style={{ lineHeight: "30px" }}> |
|
|
|
共{equipmentWarehouseNvr.total}个设备 |
|
|
|
</span> |
|
|
|
<Pagination |
|
|
|
total={equipmentWarehouseNvr.total} |
|
|
|
showSizeChanger |
|
|
|
currentPage={query.page + 1} |
|
|
|
pageSizeOpts={[10, 20, 30, 40]} |
|
|
|
onChange={(currentPage, pageSize) => { |
|
|
|
setQuery({ limit: pageSize, page: currentPage - 1 }); |
|
|
|
}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
} |
|
|
|
> |
|
|
|
<Table |
|
|
|
columns={setupp.filter((s) => s)} |
|
|
|
dataSource={equipmentWarehouseNvr.data} |
|
|
|
bordered={false} |
|
|
|
empty="暂无数据" |
|
|
|
style={{ |
|
|
|
padding: "0px 20px", |
|
|
|
}} |
|
|
|
pagination={false} |
|
|
|
/> |
|
|
|
</Skeleton> |
|
|
|
|
|
|
|
{setup ? ( |
|
|
|
<Setup |
|
|
|
visible={true} |
|
|
|
SETUPS={SETUPS} |
|
|
|
close={() => { |
|
|
|
setSetup(false); |
|
|
|
attribute(venderList); |
|
|
|
}} |
|
|
|
/> |
|
|
|
) : ( |
|
|
|
"" |
|
|
|
)} |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
display: "flex", |
|
|
|
justifyContent: "flex-end", |
|
|
|
padding: "20px 20px", |
|
|
|
}} |
|
|
|
> |
|
|
|
<span style={{ lineHeight: "30px" }}> |
|
|
|
共{equipmentWarehouseNvr.total}个设备 |
|
|
|
</span> |
|
|
|
<Pagination |
|
|
|
total={equipmentWarehouseNvr.total} |
|
|
|
showSizeChanger |
|
|
|
currentPage={query.page + 1} |
|
|
|
pageSizeOpts={[10, 20, 30, 40]} |
|
|
|
onChange={(currentPage, pageSize) => { |
|
|
|
setQuery({ limit: pageSize, page: currentPage - 1 }); |
|
|
|
}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
{sideSheet ? ( |
|
|
|
<SideSheets |
|
|
|
visible={true} |
|
|
|
rowId={rowId} |
|
|
|
accessType={accessType} |
|
|
|
venderList={venderList} |
|
|
|
close={() => { |
|
|
|
setSideSheet(false); |
|
|
|
}} |
|
|
|
/> |
|
|
|
) : ( |
|
|
|
[] |
|
|
|
)} |
|
|
|
</div> |
|
|
|
</> |
|
|
|
); |
|
|
|
}; |
|
|
|
{setup ? ( |
|
|
|
<Setup |
|
|
|
visible={true} |
|
|
|
SETUPS={SETUPS} |
|
|
|
close={() => { |
|
|
|
setSetup(false); |
|
|
|
attribute(venderList); |
|
|
|
}} |
|
|
|
/> |
|
|
|
) : ( |
|
|
|
"" |
|
|
|
)} |
|
|
|
|
|
|
|
{sideSheet ? ( |
|
|
|
<SideSheets |
|
|
|
visible={true} |
|
|
|
rowId={rowId} |
|
|
|
accessType={accessType} |
|
|
|
venderList={venderList} |
|
|
|
close={() => { |
|
|
|
setSideSheet(false); |
|
|
|
}} |
|
|
|
/> |
|
|
|
) : ( |
|
|
|
[] |
|
|
|
)} |
|
|
|
</div> |
|
|
|
</> |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
function mapStateToProps (state) { |
|
|
|
const { auth, global, members, equipmentWarehouseNvr } = state; |
|
|
|
return { |
|
|
|
loading: members.isRequesting, |
|
|
|
user: auth.user, |
|
|
|
actions: global.actions, |
|
|
|
members: members.data, |
|
|
|
equipmentWarehouseNvr: equipmentWarehouseNvr.data || {}, |
|
|
|
}; |
|
|
|
function mapStateToProps(state) { |
|
|
|
const { auth, global, members, equipmentWarehouseNvr } = state; |
|
|
|
return { |
|
|
|
loading: equipmentWarehouseNvr.isRequesting, |
|
|
|
user: auth.user, |
|
|
|
actions: global.actions, |
|
|
|
members: members.data, |
|
|
|
equipmentWarehouseNvr: equipmentWarehouseNvr.data || {}, |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
export default connect(mapStateToProps)(NvrHeader); |
|
|
|
|
