free-sun
/
FS-IOT
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

nvr table

release_0.0.2
yuan_yi 3 years ago
parent
28e2133a7c
commit
8a9b814ea6
1 changed files with 458 additions and 458 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 916
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

916
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
View File

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

Write Preview
Loading…
Cancel
Save