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.
444 lines
11 KiB
444 lines
11 KiB
import React, { useState, useEffect } from "react";
|
|
import { connect } from "react-redux";
|
|
import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui";
|
|
import "../style.less";
|
|
import NvrModal from "../components/nvrModal";
|
|
import Setup from "../components/setup";
|
|
import SideSheets from "../components/sideSheet";
|
|
|
|
const NvrHeader = (props) => {
|
|
const { dispatch, actions, user, loading } = props;
|
|
const [setup, setSetup] = useState(false);
|
|
const [sideSheet, setSideSheet] = useState(false);
|
|
const [setupp, setSetupp] = useState([]);
|
|
const SETUPS = "setups";
|
|
const [venderList,setvenderList] =useState([]);
|
|
useEffect(() => {
|
|
dispatch(actions.equipmentWarehouse.getVender()).then(res => {
|
|
setvenderList(res.payload.data)
|
|
})
|
|
}, [])
|
|
|
|
const columns = [
|
|
{
|
|
title: "序号",
|
|
|
|
render: (text, record, index) => {
|
|
return index + 1;
|
|
},
|
|
},
|
|
{
|
|
title: "设备名称",
|
|
// dataIndex: "name",///
|
|
width: 200,
|
|
background: "red",
|
|
render: (text, record, index) => {
|
|
return (
|
|
<div>
|
|
<span
|
|
style={{
|
|
backgroundColor: record.avatarBg,
|
|
width: "10px",
|
|
height: "10px",
|
|
borderRadius: "50%",
|
|
display: "inline-block",
|
|
marginRight: "10px",
|
|
}}
|
|
/>
|
|
{record.name}
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: "SIP地址",
|
|
dataIndex: "owner",
|
|
},
|
|
{
|
|
title: "操作",
|
|
width: "20%",
|
|
dataIndex: "",
|
|
render: (_, row) => {
|
|
// console.log(row);
|
|
return (
|
|
<>
|
|
<Button theme="borderless">
|
|
<NvrModal nvrData={row} modalName="revise" venderList={venderList}/>
|
|
</Button>
|
|
<Button
|
|
theme="borderless"
|
|
onClick={() => {
|
|
setSideSheet(true);
|
|
}}
|
|
>
|
|
查看
|
|
</Button>
|
|
<Button theme="borderless">删除</Button>
|
|
</>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
|
|
useEffect(() => {
|
|
attribute();
|
|
}, []);
|
|
//获取表格属性设置
|
|
function attribute() {
|
|
const arr = localStorage.getItem(SETUPS)
|
|
? JSON.parse(localStorage.getItem(SETUPS))
|
|
: [];
|
|
|
|
const column = [
|
|
{
|
|
title: "设备厂家",
|
|
dataIndex: "size",
|
|
key: "a",
|
|
},
|
|
{
|
|
title: "添加张账号",
|
|
dataIndex: "size",
|
|
key: "b",
|
|
},
|
|
{
|
|
title: "通道数",
|
|
dataIndex: "size",
|
|
key: "c",
|
|
},
|
|
{
|
|
title: "端口",
|
|
dataIndex: "size",
|
|
key: "d",
|
|
},
|
|
{
|
|
title: "设备状态",
|
|
dataIndex: "size",
|
|
key: "e",
|
|
},
|
|
{
|
|
title: "创建时间",
|
|
dataIndex: "size",
|
|
key: "f",
|
|
},
|
|
{
|
|
title: "项目名称",
|
|
dataIndex: "size",
|
|
key: "g",
|
|
},
|
|
{
|
|
title: "things名称",
|
|
dataIndex: "updateTime",
|
|
key: "h",
|
|
},
|
|
{
|
|
title: "things数量",
|
|
dataIndex: "updateTime",
|
|
key: "i",
|
|
},
|
|
];
|
|
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 data = [
|
|
{
|
|
key: "1",
|
|
name: "智能设备NVR1",
|
|
nameIconSrc: "12",
|
|
size: "飞尚科技1",
|
|
owner: "192.168.1.1",
|
|
updateTime: "5000",
|
|
avatarBg: "red",
|
|
},
|
|
{
|
|
key: "2",
|
|
name: "智能设备NVR2",
|
|
nameIconSrc: "8",
|
|
size: "飞尚科技2",
|
|
owner: "192.168.1.3",
|
|
updateTime: "5001",
|
|
avatarBg: "green",
|
|
},
|
|
{
|
|
key: "3",
|
|
name: "智能设备NVR3",
|
|
nameIconSrc: "9",
|
|
size: "飞尚科技3",
|
|
owner: "192.168.1.2",
|
|
updateTime: "5002",
|
|
avatarBg: "green",
|
|
},
|
|
];
|
|
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} />
|
|
</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)}
|
|
// labelPosition='top'
|
|
layout="horizontal"
|
|
style={{ position: "relative", width: "100%", flex: 1 }}
|
|
>
|
|
<Form.Input
|
|
field="设备搜索："
|
|
placeholder="请输入设备名称"
|
|
labelPosition="left"
|
|
style={screen}
|
|
/>
|
|
<Form.Select
|
|
label="厂家筛选："
|
|
labelPosition="left"
|
|
style={screen}
|
|
field="type1"
|
|
placeholder="全部"
|
|
>
|
|
<Form.Select.Option value="f1">飞尚科技1</Form.Select.Option>
|
|
<Form.Select.Option value="f2">飞尚科技2</Form.Select.Option>
|
|
</Form.Select>
|
|
<Form.Select
|
|
label="状态查询："
|
|
labelPosition="left"
|
|
field="type2"
|
|
style={screen}
|
|
placeholder="全部"
|
|
>
|
|
<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"
|
|
style={screen}
|
|
placeholder="全部"
|
|
>
|
|
<Form.Select.Option value="oper ">飞尚科技1</Form.Select.Option>
|
|
<Form.Select.Option value="r">飞尚科技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,
|
|
}}
|
|
>
|
|
搜素
|
|
</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",
|
|
}}
|
|
>
|
|
<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>
|
|
<Table
|
|
columns={setupp}
|
|
dataSource={data}
|
|
pagination={false}
|
|
bordered={false}
|
|
empty="暂无数据"
|
|
style={{
|
|
padding: "0px 20px",
|
|
}}
|
|
/>
|
|
{setup ? (
|
|
<Setup
|
|
visible={true}
|
|
SETUPS={SETUPS}
|
|
close={() => {
|
|
setSetup(false);
|
|
attribute();
|
|
// setEditData(null)
|
|
}}
|
|
// reportType={reportType}
|
|
// editData={editData}
|
|
/>
|
|
) : (
|
|
""
|
|
)}
|
|
|
|
{sideSheet ? (
|
|
<SideSheets
|
|
visible={true}
|
|
close={() => {
|
|
setSideSheet(false);
|
|
}}
|
|
/>
|
|
) : (
|
|
[]
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
function mapStateToProps(state) {
|
|
const { auth, global, members } = state;
|
|
return {
|
|
loading: members.isRequesting,
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
members: members.data,
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(NvrHeader);
|
|
|