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.
867 lines
33 KiB
867 lines
33 KiB
import React, { useState, useEffect, useRef } from "react";
|
|
import { connect } from "react-redux";
|
|
import moment from "moment";
|
|
import qs from "qs";
|
|
import {
|
|
Button,
|
|
Form,
|
|
Table,
|
|
Pagination,
|
|
Popover,
|
|
Tag,
|
|
Skeleton,
|
|
Popconfirm,
|
|
Row,
|
|
} from "@douyinfe/semi-ui";
|
|
import { SimpleFileDownButton, VideoPlayModal } from "$components";
|
|
import "../style.less";
|
|
import CameraModal from "../components/cameraModal";
|
|
import RemarksModal from "../components/remarksModal";
|
|
import Setup from "../components/setup";
|
|
import SideSheets from "../components/sideSheet";
|
|
import { skeletonScreen } from "../components/skeletonScreen";
|
|
import { accessType } from "./nvr";
|
|
|
|
const CameraHeader = (props) => {
|
|
const { dispatch, actions, user, loading, equipmentWarehouseCamera } = props;
|
|
const [cameraModal, setCameraModal] = useState(false);
|
|
const [remarksModal,setRemarksModal] = useState(false);
|
|
const [videoPlay, setVideoPlay] = useState(false);
|
|
const [modalName, setModalName] = useState("");
|
|
const [setup, setSetup] = useState(false);
|
|
const [sideSheet, setSideSheet] = useState(false);
|
|
const [cameraSetup, setcameraSetup] = useState(false);
|
|
const [setupp, setSetupp] = useState([]);
|
|
const [venderList, setvenderList] = useState([]); //厂商信息
|
|
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
|
|
const [search, setSearch] = useState({}); //搜索条件
|
|
const [rowId, setRowId] = useState(); //表格数据id
|
|
const [cameraData, setCameraData] = useState({}); //表格传递数据
|
|
const [modify, setModify] = useState(false); //修改
|
|
const [parentCamera, setParentCamera] = useState(""); //级联摄像头父级设备
|
|
const [addNvr, setAddNvr] = useState(false); //nvr页面传递参数打开NVR摄像头添加弹框
|
|
const [nvrNumber, setNvrNumber] = useState();
|
|
const [videoObj, setVideoObj] = useState(); //播放条件
|
|
const [axyData, setAxyData] = useState();
|
|
const [cameraRemarks, setCameraRemarks] = useState([]);//备注
|
|
const { equipmentWarehouse } = actions;
|
|
const api = useRef();
|
|
const searchData = useRef({})
|
|
const limits = useRef(); //每页实际条数
|
|
const page = useRef(query.page);
|
|
const deviceClickb = useRef(true)
|
|
const CAMERAS = "cameras";
|
|
|
|
useEffect(() => {
|
|
//安心云传参
|
|
let isAxyData = props.location.search
|
|
if (isAxyData) {
|
|
setAxyData(qs.parse(isAxyData.slice(1)))
|
|
setCameraModal(true)
|
|
}
|
|
//NVR传来的参数
|
|
if (props.location.query) {
|
|
setAddNvr(props.location.query.addNvr)
|
|
setNvrNumber(props.location.query.serialNo)
|
|
setCameraModal(true);
|
|
}
|
|
dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
|
|
setvenderList(res.payload.data);
|
|
attribute(res.payload.data);
|
|
});
|
|
//初始化表格显示设置
|
|
localStorage.getItem(CAMERAS) == null
|
|
? localStorage.setItem(
|
|
CAMERAS,
|
|
JSON.stringify(["state", "type", "manufactor"])
|
|
)
|
|
: "";
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
equipmentGetCamera();
|
|
}, [query, search]);
|
|
|
|
const equipmentGetCamera = () => {
|
|
searchData.current = { ...query, ...search }
|
|
dispatch(equipmentWarehouse.getCamera(searchData.current)).then((res) => {
|
|
limits.current = res.payload.data.data.length
|
|
});
|
|
}
|
|
function equipmentStatus (data) {
|
|
switch (data) {
|
|
case "ON":
|
|
return "在线"
|
|
case "ONLINE":
|
|
return "在线"
|
|
case "OFF":
|
|
return "离线"
|
|
default:
|
|
return "未知"
|
|
}
|
|
}
|
|
|
|
function colorStatus (data) {
|
|
switch (data) {
|
|
case "ON":
|
|
return "#04B234"
|
|
case "ONLINE":
|
|
return "#04B234"
|
|
case "OFF":
|
|
return "rgba(0, 0, 0, 0.45)"
|
|
default:
|
|
return "#1859C1"
|
|
}
|
|
}
|
|
const columns = [
|
|
{
|
|
title: "序号",
|
|
dataIndex: "",
|
|
render: (text, r, index) => {
|
|
return index + 1;
|
|
},
|
|
},
|
|
{
|
|
title: "设备名称",
|
|
dataIndex: "name",
|
|
render: (_, row) => {
|
|
return (
|
|
<div>
|
|
{row.name}
|
|
<span style={{ color: "#1859C1" }}
|
|
onClick={() => {
|
|
if (deviceClickb.current) {
|
|
if (row.type == "nvr") {
|
|
setSearch({ ...search, nvrId: row.nvr.id })
|
|
} else {
|
|
setSearch({ ...search, externalDomain: row.externalDomain })
|
|
}
|
|
deviceClickb.current = false
|
|
} else {
|
|
if (row.type == "nvr") {
|
|
setSearch({ ...search, nvrId: null })
|
|
} else {
|
|
setSearch({ ...search, externalDomain: null })
|
|
}
|
|
deviceClickb.current = true
|
|
}
|
|
}}
|
|
>
|
|
{row.type == "nvr" ? `@${row.nvr.name}` : row.type == "cascade" ? `@${row.externalDomain}` : ""}
|
|
</span>
|
|
</div >
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: "操作",
|
|
width: "20%",
|
|
dataIndex: "",
|
|
render: (_, row) => {
|
|
return (
|
|
<div style={{ display: "flex" }}>
|
|
<Button
|
|
theme="borderless"
|
|
onClick={() => {
|
|
setCameraData(row);
|
|
if (row.type == "cascade") {
|
|
dispatch(equipmentWarehouse.getParentCamera({ cameraSerialNo: row.serialNo })).then((res) => {
|
|
setParentCamera(res.payload.data.topSerialNo)
|
|
if (res.success) {
|
|
setCameraModal(true);
|
|
setModify(true)
|
|
}
|
|
})
|
|
} else {
|
|
setCameraModal(true);
|
|
setModify(true)
|
|
}
|
|
}}
|
|
>
|
|
修改
|
|
|
|
</Button>
|
|
<Button
|
|
theme="borderless"
|
|
onClick={() => {
|
|
setSideSheet(true);
|
|
setcameraSetup(true);
|
|
setRowId(row.id);
|
|
}}
|
|
>
|
|
查看
|
|
</Button>
|
|
<Button
|
|
theme="borderless"
|
|
onClick={() => {
|
|
let data = row?.cameraRemarks.map((item)=>item.remark)
|
|
if (row.type == "yingshi") {
|
|
setVideoObj({
|
|
type: row.type,
|
|
serialNo: row.serialNo,
|
|
yingshiToken: row.secretYingshi?.token,
|
|
playUrlSd: row.gbCamera?.playUrl?.liveUrl?.sd?.ezopen,
|
|
playUrlHd: row.gbCamera?.playUrl?.liveUrl?.hd?.ezopen,
|
|
content:data,
|
|
})
|
|
} else {
|
|
setVideoObj({
|
|
type: row.type,
|
|
audio: false,
|
|
serialNo: row.serialNo,
|
|
topSerialNo: row.topSerialNo,
|
|
playUrlSd: row.gbCamera?.playUrl?.liveUrl?.sd["WS-RAW"],
|
|
content:data,
|
|
})
|
|
}
|
|
setVideoPlay(true)
|
|
|
|
}}
|
|
>
|
|
播放
|
|
</Button>
|
|
{row.forbidden ? (
|
|
<Button
|
|
theme="borderless"
|
|
onClick={() => {
|
|
dispatch(
|
|
equipmentWarehouse.putForbidden(
|
|
{
|
|
cameraId: row.id,
|
|
forbidden: !row.forbidden,
|
|
},
|
|
row.forbidden
|
|
)
|
|
).then(() => {
|
|
dispatch(equipmentWarehouse.getCamera(searchData.current))
|
|
});
|
|
}}
|
|
>
|
|
启用
|
|
</Button>
|
|
) : (
|
|
<Popconfirm
|
|
title="禁用后下级业务系统将无法获取该视频流的所有信息。"
|
|
arrowPointAtCenter={false}
|
|
showArrow={true}
|
|
position="topRight"
|
|
onConfirm={() => {
|
|
dispatch(
|
|
equipmentWarehouse.putForbidden(
|
|
{
|
|
cameraId: row.id,
|
|
forbidden: !row.forbidden,
|
|
},
|
|
row.forbidden
|
|
)
|
|
).then(() => {
|
|
dispatch(equipmentWarehouse.getCamera(searchData.current))
|
|
});
|
|
}}
|
|
>
|
|
<Button theme="borderless">禁用</Button>
|
|
</Popconfirm>
|
|
)}
|
|
|
|
<Popconfirm
|
|
title="删除后设备视频流会被中断，是否确定删除？"
|
|
arrowPointAtCenter={false}
|
|
showArrow={true}
|
|
position="topRight"
|
|
onConfirm={() => {
|
|
dispatch(
|
|
equipmentWarehouse.delCamera(row.id)
|
|
).then(() => {
|
|
if (page.current > 0 && limits.current < 2) {
|
|
setQuery({ limit: 10, page: page.current - 1 })
|
|
} else {
|
|
setQuery({ limit: 10, page: page.current })
|
|
}
|
|
});
|
|
}}
|
|
>
|
|
<Button theme="borderless">删除</Button>
|
|
</Popconfirm>
|
|
<Button
|
|
theme="borderless"
|
|
onClick={() => {
|
|
setCameraRemarks(row.cameraRemarks||[])
|
|
setRowId(row.id);
|
|
setRemarksModal(true)
|
|
}}
|
|
>
|
|
备注
|
|
</Button>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
|
|
//获取表格属性设置
|
|
function attribute (data) {
|
|
const arr = localStorage.getItem(CAMERAS)
|
|
? JSON.parse(localStorage.getItem(CAMERAS))
|
|
: [];
|
|
|
|
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: "cameraAbility.type",
|
|
key: "type",
|
|
render: (_, r, index) => {
|
|
let access = accessType.find((item) => item.key == r.type);
|
|
return access ? access.name : "";
|
|
},
|
|
},
|
|
{
|
|
title: "设备状态",
|
|
dataIndex: "channelCount",
|
|
key: "state",
|
|
render: (_, r, index) => {
|
|
let status = r.gbCamera;
|
|
return (
|
|
<div>
|
|
<span
|
|
style={{
|
|
width: 8,
|
|
height: 8,
|
|
display: "inline-block",
|
|
borderRadius: "50%",
|
|
backgroundColor: r.forbidden ? "red" : status ? colorStatus(status.online) : "",
|
|
margin: "0 8px 0 0",
|
|
}}
|
|
/>
|
|
{r.forbidden ? "禁用" : status ? equipmentStatus(status.online) : ""}
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: "云台支持",
|
|
dataIndex: "cloudControl",
|
|
key: "support",
|
|
render: (text, r, index) => {
|
|
return r.cloudControl ? "支持" : "不支持";
|
|
},
|
|
|
|
},
|
|
{
|
|
title: "内存卡信息",
|
|
dataIndex: "memoryCard",
|
|
key: "memoryCard",
|
|
},
|
|
{
|
|
title: "设备创建时间",
|
|
dataIndex: "createTime",
|
|
key: "time",
|
|
render: (_, r, index) => {
|
|
return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS");
|
|
},
|
|
},
|
|
{
|
|
title: "设备添加账号",
|
|
dataIndex: "size",
|
|
key: "account",
|
|
render: (text, r, index) => {
|
|
return r.createUser?.namePresent
|
|
},
|
|
},
|
|
{
|
|
title: "项目名称",
|
|
dataIndex: "updateTime",
|
|
key: "name",
|
|
render: (_, r, index) => {
|
|
return r.station.length == 0
|
|
? ""
|
|
: station(r, "name", _, "projects")
|
|
},
|
|
},
|
|
{
|
|
title: "pcode",
|
|
dataIndex: "updateTime",
|
|
key: "pcode",
|
|
render: (_, r, index) => {
|
|
return r.station.length == 0
|
|
? ""
|
|
: station(r, "url", _, "projects")
|
|
},
|
|
},
|
|
{
|
|
title: "结构物",
|
|
dataIndex: "",
|
|
key: "structure",
|
|
render: (_, r, index) => {
|
|
return r.station.length == 0
|
|
? ""
|
|
: station(r, "name", r.station[0].structure.name, _, "structure")
|
|
},
|
|
},
|
|
{
|
|
title: "测点",
|
|
dataIndex: "updateTime",
|
|
key: "measuringPoint",
|
|
render: (_, r, index) => {
|
|
return r.station.length == 0
|
|
? ""
|
|
: station(r, "name", r.station[0].name, _, "point")
|
|
},
|
|
},
|
|
{
|
|
title: "监测因素",
|
|
dataIndex: "updateTime",
|
|
key: "factor",
|
|
render: (_, r, index) => {
|
|
return r.station.length == 0
|
|
? ""
|
|
: station(r, "name", r.station[0].factor.name)
|
|
},
|
|
},
|
|
];
|
|
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);
|
|
}
|
|
|
|
//表格请求数据中station属性数据的展示
|
|
function station (r, name, data, projects, exhibition) {
|
|
let datas = []
|
|
if (projects == "projects") {
|
|
r.station.map((v) => {
|
|
if (v.structure.projects.length > 0) {
|
|
v.structure.projects.map((item) => datas.push(item[name]))
|
|
}
|
|
})
|
|
} else {
|
|
r.station.map((v) => {
|
|
if (exhibition == "structure") {
|
|
datas.push(v.structure.name)
|
|
} else {
|
|
if (exhibition == "point") {
|
|
datas.push(v.name)
|
|
} else {
|
|
datas.push(v.factor.name)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
let dataSet = [...(new Set(datas))]
|
|
return dataSet.length > 0 ? <Popover
|
|
key="updateTime"
|
|
position="top"
|
|
content={dataSet.length > 1 ?
|
|
<article style={{ padding: 12 }}>
|
|
{dataSet.map((v, index) => <div key={index}>{v}</div>)}
|
|
</article>
|
|
: ""
|
|
}
|
|
>
|
|
<Tag>{dataSet.length > 1 ? `${dataSet[0]}...` : dataSet.length > 0 ? dataSet[0] : ""}</Tag>
|
|
</Popover> : ""
|
|
|
|
}
|
|
//条件赛选样式
|
|
const screen = {
|
|
width: 193,
|
|
marginRight: 20,
|
|
marginBottom: 16,
|
|
color: "rgba(0, 0, 0, 0.65)",
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div style={{ position: "" }}>
|
|
<video
|
|
id="cameraBanner"
|
|
autoPlay
|
|
loop
|
|
muted
|
|
style={{ width: "100%", objectFit: "cover", height: 171 }}
|
|
src="/assets/video/camera_banner.mp4"
|
|
type="video/mp4"
|
|
/>
|
|
<div style={{ position: "absolute", top: 12 }}>
|
|
<div
|
|
style={{
|
|
fontSize: 22,
|
|
paddingTop: 15,
|
|
marginLeft: 21,
|
|
}}
|
|
>
|
|
摄像头管理
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: 14,
|
|
paddingTop: 18,
|
|
marginLeft: 20,
|
|
}}
|
|
>
|
|
对监控摄像设备设备添加、修改、删除的硬件管理页面。
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: 14,
|
|
marginTop: 28,
|
|
marginLeft: 21,
|
|
width: 89,
|
|
height: 32,
|
|
lineHeight: 32 + "px",
|
|
textAlign: "center",
|
|
backgroundColor: "#D9EAFF",
|
|
color: "#1859C1",
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() => {
|
|
setModalName("add");
|
|
setCameraModal(true);
|
|
}}
|
|
>
|
|
添加摄像头
|
|
</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"
|
|
maxLength="36"
|
|
placeholder="请输入设备名称"
|
|
labelPosition="left"
|
|
style={screen}
|
|
/>
|
|
<Form.Select
|
|
label="接入类型："
|
|
labelPosition="left"
|
|
field="type"
|
|
style={screen}
|
|
placeholder="全部"
|
|
showClear
|
|
>
|
|
{accessType.map((item) => {
|
|
return (
|
|
<Form.Select.Option key={item.key} value={item.key}>
|
|
{item.name}
|
|
</Form.Select.Option>
|
|
);
|
|
})}
|
|
</Form.Select>
|
|
<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="state"
|
|
style={screen}
|
|
placeholder="全部"
|
|
showClear
|
|
>
|
|
<Form.Select.Option value="ON">在线</Form.Select.Option>
|
|
<Form.Select.Option value="OFF">离线</Form.Select.Option>
|
|
<Form.Select.Option value="UNKONW">未知</Form.Select.Option>
|
|
<Form.Select.Option value="DISABLED">禁用</Form.Select.Option>
|
|
</Form.Select>
|
|
{/* <Form.Select
|
|
label="关联项目："
|
|
labelPosition="left"
|
|
field="type3"
|
|
style={screen}
|
|
placeholder="全部"
|
|
showClear
|
|
>
|
|
<Form.Select.Option value="智慧环保">
|
|
飞尚科技1
|
|
</Form.Select.Option>
|
|
<Form.Select.Option value="智慧水务">
|
|
飞尚科技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) => {
|
|
setSearch(v);
|
|
setQuery({ limit: 10, page: 0 })
|
|
});
|
|
}}
|
|
>
|
|
搜素
|
|
</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();
|
|
setSearch({});
|
|
setQuery({ limit: 10, page: 0 })
|
|
}}
|
|
>
|
|
重置
|
|
</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);
|
|
setcameraSetup(true);
|
|
}}
|
|
>
|
|
<img
|
|
src="/assets/images/background/setup.png"
|
|
alt="设置"
|
|
style={{ width: 18, height: 18 }}
|
|
/>
|
|
</Button>
|
|
<SimpleFileDownButton src="camera/export" />
|
|
</div>
|
|
</div>
|
|
<Skeleton
|
|
loading={loading}
|
|
active={true}
|
|
placeholder={skeletonScreen()}
|
|
>
|
|
<Table
|
|
columns={setupp.filter((s) => s)}
|
|
dataSource={equipmentWarehouseCamera.data}
|
|
bordered={false}
|
|
empty="暂无数据"
|
|
style={{
|
|
padding: "0px 20px",
|
|
}}
|
|
pagination={false}
|
|
/>
|
|
</Skeleton>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "flex-end",
|
|
padding: "20px 20px",
|
|
}}
|
|
>
|
|
<span style={{ lineHeight: "30px" }}>
|
|
共{equipmentWarehouseCamera.total}个设备
|
|
</span>
|
|
<Pagination
|
|
className="22"
|
|
total={equipmentWarehouseCamera.total}
|
|
showSizeChanger
|
|
currentPage={query.page + 1}
|
|
pageSizeOpts={[10, 20, 30, 40]}
|
|
onChange={(currentPage, pageSize) => {
|
|
setQuery({ limit: pageSize, page: currentPage - 1 });
|
|
page.current = currentPage - 1
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{setup ? (
|
|
<Setup
|
|
visible={true}
|
|
CAMERAS={CAMERAS}
|
|
cameraSetup={cameraSetup}
|
|
close={() => {
|
|
setSetup(false);
|
|
attribute(venderList);
|
|
setcameraSetup(false);
|
|
}}
|
|
/>
|
|
) : (
|
|
""
|
|
)}
|
|
|
|
{sideSheet ? (
|
|
<SideSheets
|
|
visible={true}
|
|
rowId={rowId}
|
|
venderList={venderList}
|
|
accessType={accessType}
|
|
cameraSetup={cameraSetup}
|
|
close={() => {
|
|
setSideSheet(false);
|
|
setcameraSetup(false);
|
|
}}
|
|
/>
|
|
) : (
|
|
[]
|
|
)}
|
|
</div>
|
|
|
|
{cameraModal ? (
|
|
<CameraModal
|
|
visible={true}
|
|
venderList={venderList}
|
|
cameraData={cameraData}
|
|
modify={modify}
|
|
addNvr={addNvr}
|
|
nvrNumber={nvrNumber}
|
|
parentCamera={parentCamera}
|
|
axyData={axyData}
|
|
close={() => {
|
|
setCameraModal(false);
|
|
setCameraData({});
|
|
setModify(false)
|
|
setParentCamera("")
|
|
setAddNvr(false)
|
|
setNvrNumber("")
|
|
setAxyData("")
|
|
equipmentGetCamera()
|
|
}}
|
|
modalName={modalName}
|
|
/>
|
|
) : (
|
|
""
|
|
)}
|
|
{videoPlay ?
|
|
<VideoPlayModal
|
|
visible={true}
|
|
videoObj={videoObj}
|
|
close={() => {
|
|
setVideoPlay(false)
|
|
}} />
|
|
: ""
|
|
}
|
|
{
|
|
remarksModal?
|
|
<RemarksModal
|
|
visible={true}
|
|
rowId={rowId}
|
|
cameraRemarks={cameraRemarks}
|
|
close={() => {
|
|
setRemarksModal(false);
|
|
setRowId();
|
|
equipmentGetCamera();
|
|
}} >
|
|
</RemarksModal>:''
|
|
}
|
|
</>
|
|
);
|
|
};
|
|
|
|
function mapStateToProps (state) {
|
|
const { auth, global, members, equipmentWarehouseCamera } = state;
|
|
return {
|
|
loading:
|
|
equipmentWarehouseCamera.isRequesting && !equipmentWarehouseCamera.data,
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
members: members.data,
|
|
equipmentWarehouseCamera: equipmentWarehouseCamera.data || [],
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(CameraHeader);
|
|
|