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 "../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" },
];
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 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]);
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 (
{r.name}
);
},
},
{
title: "SIP地址",
dataIndex: "owner",
},
{
title: "操作",
width: "20%",
dataIndex: "",
render: (_, row) => {
return (
);
},
},
];
//获取表格属性设置
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);
}
//条件赛选样式
const screen = {
width: 193,
marginRight: 20,
marginBottom: 16,
color: "rgba(0, 0, 0, 0.65)",
};
return (
<>
NVR管理
对NVR（网络硬盘录像机）设备节点的管理
{
equipmentGetNvr();
}}
/>
筛选条件
设备列表
s)}
dataSource={equipmentWarehouseNvr.data}
bordered={false}
empty="暂无数据"
style={{
padding: "0px 20px",
}}
pagination={false}
/>
共{equipmentWarehouseNvr.total}个设备
{
setQuery({ limit: pageSize, page: currentPage - 1 });
}}
/>
{setup ? (
{
setSetup(false);
attribute(venderList);
}}
/>
) : (
""
)}
{sideSheet ? (
{
setSideSheet(false);
}}
/>
) : (
[]
)}
);
};
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 || {},
};
}
export default connect(mapStateToProps)(NvrHeader);