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.
605 lines
34 KiB
605 lines
34 KiB
import React, { useState, useEffect } from "react";
|
|
import { connect } from "react-redux";
|
|
import { SideSheet, Tabs, TabPane, Button } from "@douyinfe/semi-ui";
|
|
import copy from "copy-to-clipboard";
|
|
import moment from "moment";
|
|
import PerfectScrollbar from "perfect-scrollbar";
|
|
|
|
let projectScrollbar;
|
|
let equipmentScrollbar;
|
|
|
|
function SideSheets (props) {
|
|
const {
|
|
dispatch,
|
|
actions,
|
|
user,
|
|
loading,
|
|
visible,
|
|
close,
|
|
cameraSetup,
|
|
rowId,
|
|
venderList,
|
|
accessType,
|
|
} = props;
|
|
const { equipmentWarehouse } = actions;
|
|
const [clickStyle, setclickStyle] = useState();
|
|
const [nvrDetails, setNvrDetails] = useState({ station: [] });
|
|
const [highStandard, setHighStandard] = useState(true);
|
|
const [solid, setSolid] = useState("solid");
|
|
const [light, setLight] = useState("light");
|
|
const list = ["项目名称", "关联结构物", "关联测点", "关联监测因素"];
|
|
const information = {
|
|
nvr: [
|
|
{
|
|
name: "基础信息",
|
|
basics: [
|
|
{ name: "设备名称：", key: "name" },
|
|
{ name: "设备编号：", key: "serialNo" },
|
|
{ name: "接入方式：", key: "accessWay" },
|
|
{ name: "厂商：", key: "venderId" },
|
|
{ name: "添加账号：", key: "createUser" },
|
|
{ name: "添加时间：", key: "createTime" },
|
|
{ name: "行政区划：", key: "regionCode" },
|
|
{
|
|
name: "设备安装位置：",
|
|
key: "latitude",
|
|
difference: "line",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "接入信息",
|
|
access: [
|
|
{ name: "SIP服务编号：", key: "Serial" },
|
|
{ name: "SIP域：", key: "Realm" },
|
|
{ name: "SIP端口号：", key: "ListenAddr" },
|
|
{ name: "通道数量：", key: "channelCount", difference: "difference" },
|
|
{ name: "心跳周期：", key: "Expires" },
|
|
{ name: "最大心跳次数：", key: "RemoveBanInterval" },
|
|
{ name: "注册密码：", key: "Password" },
|
|
{ name: "注册有效期：", key: "" },
|
|
{ name: "接入识别模块：", key: "" },
|
|
],
|
|
},
|
|
{
|
|
name: "摄像头信息",
|
|
CameraInformation: [
|
|
{
|
|
name: "通道1",
|
|
value1: "145641201564-1",
|
|
value2: "哦哦哦我我我喔噢喔喔我",
|
|
},
|
|
{
|
|
name: "通道2",
|
|
value1: "145641201564-2",
|
|
value2: "哦哦哦哦哦噢噢欧欧哦",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
camera: [
|
|
{
|
|
name: "基础信息",
|
|
basics: [
|
|
{ name: "设备名称：", key: "name" },
|
|
{
|
|
name: "SIP编号/设备编号：",
|
|
key: nvrDetails.serialNo ? "serialNo" : "sip",
|
|
},
|
|
{ name: "接入方式：", key: "type" },
|
|
{ name: "厂商：", key: "venderId" },
|
|
{ name: "添加账号：", key: "createUser" },
|
|
{ name: "添加时间：", key: "createTime" },
|
|
{
|
|
name: "设备安装位置：",
|
|
key: "latitude",
|
|
difference: "line",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "复制直播地址",
|
|
liveBroadcast: [
|
|
{ name: "HLS地址", key: "hls" },
|
|
{ name: "FLV地址", key: "flv" },
|
|
{ name: "RTMP地址", key: "rtmp" },
|
|
{ name: "EZOPEN地址", key: "ezopen" },
|
|
{ name: "ONVIF地址", key: "onvif" },
|
|
],
|
|
},
|
|
{
|
|
name: "复制回收地址",
|
|
recovery: [
|
|
{ name: "云储存地址", key: "cloud" },
|
|
{ name: "本地储存地址", key: "local" },
|
|
],
|
|
},
|
|
],
|
|
};
|
|
const styles = {
|
|
width: 180,
|
|
height: 64,
|
|
textAlign: "center",
|
|
background: "url(/assets/images/background/backGround.png)",
|
|
backgroundSize: "100% 100%",
|
|
padding: "12px 17px 12px 17px",
|
|
margin: "30px 0 0 10px",
|
|
lineHeight: "24px",
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
display: "-webkit-box",
|
|
WebkitLineClamp: "2",
|
|
WebkitBoxOrient: "vertical",
|
|
zIndex: 5,
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
dispatch(
|
|
equipmentWarehouse[cameraSetup ? "getCameraDetails" : "getNvrDetails"](
|
|
rowId
|
|
)
|
|
).then((res) => {
|
|
setNvrDetails(res.payload.data);
|
|
console.log(res.payload.data);
|
|
projectScrollbar = new PerfectScrollbar("#project_information", {
|
|
suppressScrollX: true,
|
|
});
|
|
equipmentScrollbar = new PerfectScrollbar("#equipment_information", {
|
|
suppressScrollX: true,
|
|
});
|
|
|
|
});
|
|
}, []);
|
|
|
|
|
|
useEffect(() => {
|
|
const domProject = document.getElementById("project_information");
|
|
if (domProject && projectScrollbar) {
|
|
projectScrollbar.update();
|
|
}
|
|
const domEquipment = document.getElementById("equipment_information");
|
|
if (domEquipment && equipmentScrollbar) {
|
|
equipmentScrollbar.update();
|
|
}
|
|
});
|
|
|
|
const statusNvr = nvrDetails.gbNvr
|
|
const statusCamera = nvrDetails.gbCamera
|
|
function colorStatus (data) {
|
|
switch (data) {
|
|
case "ON":
|
|
return "green"
|
|
case "ONLINE":
|
|
return "green"
|
|
case "OFF":
|
|
return "grey"
|
|
default:
|
|
return "blue"
|
|
}
|
|
}
|
|
return (
|
|
<SideSheet
|
|
visible={visible}
|
|
title={cameraSetup ?
|
|
<><img src={`/assets/images/background/${nvrDetails.forbidden ? "red" : colorStatus(statusNvr ? statusNvr.online : "")}.png`} style={{ marginRight: "10px" }} />污水管理出出口</>
|
|
: <><img src={`/assets/images/background/${colorStatus(statusCamera ? statusCamera.online : "")}.png`} style={{ marginRight: "10px" }} />智慧设备NVR</>
|
|
}
|
|
style={{ background: "#F9FBFF" }}
|
|
size="large"
|
|
onCancel={() => {
|
|
close();
|
|
}}
|
|
>
|
|
<Tabs type="line">
|
|
<TabPane tab="项目信息" itemKey="1">
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-evenly",
|
|
}}
|
|
>
|
|
{list.map((item, index) => {
|
|
return (
|
|
<div
|
|
style={{
|
|
lineHeight: "32px",
|
|
background: "#1859C1",
|
|
color: "#FFFFFF",
|
|
borderRadius: 3,
|
|
textAlign: "center",
|
|
width: 200,
|
|
margin: "12px 8px",
|
|
}}
|
|
key={item}
|
|
>
|
|
<img
|
|
src={`/assets/images/background/projectIcon${index}.png`}
|
|
style={{ marginRight: 10 }}
|
|
/>
|
|
{item}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<div
|
|
id="project_information"
|
|
style={{
|
|
height: document.body.clientHeight - 182,
|
|
position: "relative",
|
|
}}
|
|
>
|
|
{nvrDetails
|
|
? nvrDetails.station.length == 0
|
|
? ""
|
|
: nvrDetails.station.map((item, index) => {
|
|
return item.structure.projects.map((v, i) => {
|
|
return (
|
|
<div
|
|
key={v.name}
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-evenly",
|
|
}}
|
|
>
|
|
<div style={styles}>{v.name}</div>
|
|
<div style={styles}>{item.structure.name}</div>
|
|
<div style={styles}>{item.name}</div>
|
|
<div style={styles}>{item.factor.name}</div>
|
|
</div>
|
|
);
|
|
});
|
|
})
|
|
: ""}
|
|
</div>
|
|
</TabPane>
|
|
<TabPane tab="设备信息" itemKey="2">
|
|
<div
|
|
id="equipment_information"
|
|
style={{
|
|
height: document.body.clientHeight - 126,
|
|
position: "relative",
|
|
}}
|
|
>
|
|
{nvrDetails
|
|
? (cameraSetup ? information.camera : information.nvr).map(
|
|
(item, index) => {
|
|
let str = [];
|
|
if (index > 0) {
|
|
str.push(
|
|
<img
|
|
src="/assets/images/background/straightline.png"
|
|
key={"img" + index}
|
|
alt="无法显示"
|
|
style={{
|
|
width: 872,
|
|
display: "block",
|
|
marginTop: 24,
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
str.push(
|
|
<div
|
|
key={"name" + index}
|
|
style={{
|
|
fontWeight: "400",
|
|
color: "#1859C1",
|
|
margin: "15px 0 12px 40px",
|
|
}}
|
|
>
|
|
{item.name}
|
|
{cameraSetup ? (
|
|
index == 1 ? (
|
|
<div
|
|
style={{
|
|
display: "inline-block",
|
|
float: "right",
|
|
marginRight: 20,
|
|
}}
|
|
>
|
|
<Button style={{ marginRight: 20 }} theme={solid} onClick={() => {
|
|
setHighStandard(true)
|
|
setSolid("solid")
|
|
setLight("light")
|
|
}}>
|
|
高清
|
|
</Button>
|
|
<Button theme={light} onClick={() => {
|
|
setHighStandard(false)
|
|
setSolid("light")
|
|
setLight("solid")
|
|
}}>标清</Button>
|
|
</div>
|
|
) : (
|
|
""
|
|
)
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
);
|
|
//基础信息
|
|
if (index == 0) {
|
|
item.basics.map((item, index) => {
|
|
if (item.difference == "line") {
|
|
str.push(
|
|
<div
|
|
key={"basics" + index}
|
|
style={{ marginTop: 14 }}
|
|
>
|
|
<span
|
|
style={{
|
|
width: 150,
|
|
display: "inline-block",
|
|
textAlign: "right",
|
|
fontWeight: "400",
|
|
color: "rgba(0, 0, 0, 0.45)",
|
|
}}
|
|
>
|
|
{item.name}
|
|
</span>
|
|
<span
|
|
style={{ fontWeight: "400", color: " #34383E" }}
|
|
>
|
|
{nvrDetails.latitude ? `${nvrDetails[item.key]},${nvrDetails.longitude}` : "未知"}
|
|
</span>
|
|
</div>
|
|
);
|
|
} else {
|
|
str.push(
|
|
<div
|
|
key={"basics" + index}
|
|
style={{
|
|
width: "50%",
|
|
display: "inline-block",
|
|
marginTop: 20,
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
width: 150,
|
|
display: "inline-block",
|
|
textAlign: "right",
|
|
fontWeight: "400",
|
|
color: "rgba(0, 0, 0, 0.45)",
|
|
}}
|
|
>
|
|
{item.name}
|
|
</span>
|
|
<span
|
|
style={{ fontWeight: "400", color: " #34383E" }}
|
|
>
|
|
{item.key == "type"
|
|
? nvrDetails.type ? accessType.find(
|
|
(v) => v.key == nvrDetails.type
|
|
).name : ""
|
|
: item.key == "venderId"
|
|
? nvrDetails.venderId ? venderList.find(
|
|
(v) => v.id == nvrDetails.venderId
|
|
).name : "未知"
|
|
: item.key == "createUser"
|
|
? nvrDetails.createUser ? nvrDetails.createUser.namePresent : ""
|
|
: item.key == "createTime"
|
|
? moment(nvrDetails.createTime).format(
|
|
"YYYY-MM-DD HH:MM:SS"
|
|
)
|
|
: nvrDetails[item.key]}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
return str;
|
|
});
|
|
}
|
|
//接入信息/复制直播地址
|
|
if (index == 1) {
|
|
(cameraSetup ? item.liveBroadcast : item.access).map(
|
|
(item, index) => {
|
|
if (cameraSetup) {
|
|
nvrDetails.videoUrl ? nvrDetails.videoUrl.liveUrl ?
|
|
str.push(
|
|
<div
|
|
key={"liveBroadcast" + index}
|
|
style={{
|
|
width: 120,
|
|
height: 130,
|
|
display: "inline-block",
|
|
borderRadius: 4,
|
|
border: "1px solid #D9D9D9",
|
|
margin: "20px 0 0 40px",
|
|
textAlign: "center",
|
|
color: clickStyle == item.name ? "white" : "",
|
|
background:
|
|
clickStyle == item.name ? "#1859C1" : "",
|
|
}}
|
|
onClick={() => {
|
|
if (highStandard) {
|
|
copy(nvrDetails.videoUrl.liveUrl.hd[item.key]);
|
|
} else {
|
|
copy(nvrDetails.videoUrl.liveUrl.sd[item.key]);
|
|
}
|
|
|
|
setclickStyle(item.name);
|
|
}}
|
|
>
|
|
<img
|
|
src={`/assets/images/background/${clickStyle == item.name
|
|
? "sewage_camera2"
|
|
: "sewage_camera1"
|
|
}.png`}
|
|
style={{ margin: "20px 0 8px 0" }}
|
|
/>
|
|
<div>
|
|
{item.name}
|
|
<img
|
|
src={`/assets/images/background/${clickStyle == item.name
|
|
? "copy2"
|
|
: "copy1"
|
|
}.png`}
|
|
style={{
|
|
paddingBottom: 10,
|
|
display: "inline-block",
|
|
width: 10,
|
|
height: 20,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : "" : "";
|
|
} else {
|
|
str.push(
|
|
<div
|
|
key={"access" + index}
|
|
style={{
|
|
width: "50%",
|
|
display: "inline-block",
|
|
marginTop: 20,
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
width: 150,
|
|
display: "inline-block",
|
|
textAlign: "right",
|
|
fontWeight: "400",
|
|
color: "rgba(0, 0, 0, 0.45)",
|
|
}}
|
|
>
|
|
{item.name}
|
|
</span>
|
|
<span
|
|
style={{
|
|
fontWeight: "400",
|
|
color: " #34383E",
|
|
}}
|
|
>
|
|
{item.difference == "difference" ? nvrDetails[item.key] : nvrDetails.accessInfo ? nvrDetails.accessInfo[item.key] : ""}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
return str;
|
|
}
|
|
);
|
|
}
|
|
//摄像头信息/复制回收地址
|
|
if (index == 2) {
|
|
(cameraSetup ? item.recovery : nvrDetails.camera ? nvrDetails.camera : []).map(
|
|
(item, index) => {
|
|
if (cameraSetup) {
|
|
nvrDetails.videoUrl?nvrDetails.videoUrl.replayUrl?
|
|
str.push(
|
|
<div
|
|
key={"liveBroadcast" + index}
|
|
style={{
|
|
width: 120,
|
|
height: 130,
|
|
display: "inline-block",
|
|
borderRadius: 4,
|
|
border: "1px solid #D9D9D9",
|
|
margin: "20px 0 0 40px",
|
|
textAlign: "center",
|
|
color: clickStyle == item.name ? "white" : "",
|
|
background:
|
|
clickStyle == item.name ? "#1859C1" : "",
|
|
}}
|
|
onClick={() => {
|
|
copy(nvrDetails.videoUrl.replayUrl[item.key]);
|
|
// alert("复制成功");
|
|
setclickStyle(item.name);
|
|
}}
|
|
>
|
|
<img
|
|
src={`/assets/images/background/${clickStyle == item.name
|
|
? "store2"
|
|
: "store1"
|
|
}.png`}
|
|
style={{ margin: "20px 0 8px 0" }}
|
|
/>
|
|
<div>
|
|
{item.name}
|
|
<img
|
|
src={`/assets/images/background/${clickStyle == item.name
|
|
? "copy2"
|
|
: "copy1"
|
|
}.png`}
|
|
style={{
|
|
paddingBottom: 10,
|
|
display: "inline-block",
|
|
width: 10,
|
|
height: 20,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
):"":"";
|
|
} else {
|
|
str.push(
|
|
<div
|
|
key={"access" + index}
|
|
style={{
|
|
width: "40%",
|
|
display: "inline-block",
|
|
borderRadius: 4,
|
|
border: "1px solid rgba(151, 151, 151, 0.2)",
|
|
margin: "16px 0 0 36px",
|
|
color: "rgba(0, 0, 0, 0.85)",
|
|
fontWeight: "400",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
padding: "8px 10px",
|
|
borderBottom:
|
|
"1px solid rgba(151, 151, 151, 0.2)",
|
|
}}
|
|
>
|
|
<img
|
|
src={`/assets/images/background/camera.png`}
|
|
style={{ marginRight: 10 }}
|
|
/>
|
|
<div
|
|
style={{
|
|
display: "inline-block",
|
|
}}
|
|
>
|
|
{item.channelName}
|
|
</div>
|
|
</div>
|
|
<p style={{ margin: "16px 0 0 32px " }}>
|
|
{item.id}
|
|
</p>
|
|
<p style={{ margin: "16px 0 20px 32px " }}>
|
|
{item.name}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
return str;
|
|
}
|
|
);
|
|
}
|
|
|
|
return str;
|
|
}
|
|
)
|
|
: ""}
|
|
</div>
|
|
</TabPane>
|
|
</Tabs>
|
|
</SideSheet>
|
|
);
|
|
}
|
|
|
|
function mapStateToProps (state) {
|
|
const { auth, global, members } = state;
|
|
return {
|
|
loading: members.isRequesting,
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
global: global,
|
|
members: members.data,
|
|
};
|
|
}
|
|
export default connect(mapStateToProps)(SideSheets);
|
|
|