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

级联摄像头的修改，表格项目信息

release_0.0.2
wenlele 3 years ago
parent
acc1f98e13
commit
4cb212cbcf
7 changed files with 730 additions and 744 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 80
      code/VideoAccess-VCMP/web/client/src/components/reminderBox.jsx
  2. 12
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js
  3. 960
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx
  4. 220
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx
  5. 104
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
  6. 95
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
  7. 1
      code/VideoAccess-VCMP/web/client/src/utils/webapi.js

80
code/VideoAccess-VCMP/web/client/src/components/reminderBox.jsx
View File

@ -1,45 +1,47 @@
import { Button, Checkbox, Modal } from "@douyinfe/semi-ui";
import React from "react";
const ReminderBox = ({title, wait, toadd,visible,onOk}) => {
return (
<Modal
title={
<div style={{ fontSize: 14, lineHeight: "35px", marginLeft: 16 }}>
{title}
</div>
}
icon={
<img
src="../../assets/images/logo/figure.png"
style={{ width: 50, height: 50 }}
/>
}
footer={
<div
style={{
width: "100%",
display: "flex",
justifyContent: "space-between",
}}
>
<Checkbox
onChange={(checked) => console.log(checked)}
aria-label="Checkbox 示例"
style={{ width: 100 }}
>
不在提醒
</Checkbox>
<div>
<Button>{wait}</Button>
<Button theme="solid" onClick={onOk()}>{toadd}</Button>
</div>
</div>
}
// visible={false}
visible={visible}
></Modal>
);
const ReminderBox = ({ title, wait, toadd, visible, onOk }) => {
return (
<Modal
title={
<div style={{ fontSize: 14, lineHeight: "35px", marginLeft: 16 }}>
{title}
</div>
}
icon={
<img
src="../../assets/images/logo/figure.png"
style={{ width: 40, height: 40 }}
/>
}
footer={
<div
style={{
width: "100%",
display: "flex",
justifyContent: "space-between",
}}
>
<Checkbox
onChange={(checked) => console.log(checked)}
aria-label="Checkbox 示例"
style={{ width: 100 }}
>
不在提醒
</Checkbox>
<div>
<Button>{wait}</Button>
<Button theme="solid" onClick={() => {
onOk()
}}>{toadd}</Button>
</div>
</div>
}
// visible={true}
visible={visible}
></Modal>
);
};
export default ReminderBox;

12
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js
View File

@ -149,3 +149,15 @@ export function postAddCascade(data) {
msg: { option: "" }, //添加级联摄像头
});
}
export function getParentCamera(query) {
return (dispatch) =>
basicAction({
type: "get",
dispatch: dispatch,
query,
actionType: "GET_PARENT_CASCADE",
url: `${ApiTable.getParentCamera}`,
msg: { option: "" }, //获取级联摄像头父级设备
});
}

960
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx
View File

@ -8,495 +8,515 @@ import IpcCamera from "./ipcCamera";
import CascadeCamera from "./cascadeCamera";
import "./cameraModal.less";
function cameraModal(props) {
const {
dispatch,
actions,
modalName,
visible,
close,
venderList,
CameraKind,
CameraAbility,
cameraData, //修改时传来的值
} = props;
const { equipmentWarehouse } = actions;
const fluoriteRef = useRef();
const ipcRef = useRef();
const cascadeRef = useRef();
const nvrRef = useRef();
const [isloading, setloading] = useState(false); //是否显示loading
const [loadingTip, setloadingTip] = useState("获取中...请稍后..."); //loading tip的值
const [okText, setokText] = useState("确定"); //ok弹框text 右边
const [cancelText, setcancelText] = useState("取消"); //取消弹框text 左边
const [clickNum, setclickNum] = useState(
cameraData.type == "yingshi"
? 1
: cameraData.type == "ipc"
? 3
: cameraData.type == "nvr"
? 2
: cameraData.type == "cascade"
? 4
: 1
); //点击的第几个
function cameraModal (props) {
const {
dispatch,
actions,
modalName,
visible,
close,
venderList,
CameraKind,
CameraAbility,
cameraData, //修改时传来的值
modify,
parentCamera
} = props;
const { equipmentWarehouse } = actions;
const fluoriteRef = useRef();
const ipcRef = useRef();
const cascadeRef = useRef();
const nvrRef = useRef();
const [isloading, setloading] = useState(false); //是否显示loading
const [loadingTip, setloadingTip] = useState("获取中...请稍后..."); //loading tip的值
const [okText, setokText] = useState("确定"); //ok弹框text 右边
const [cancelText, setcancelText] = useState("取消"); //取消弹框text 左边
useEffect(() => {
dispatch(equipmentWarehouse.getCameraKind());
dispatch(equipmentWarehouse.getAbility());
cameraData.type == "nvr" ? setcameraList(cameraList.slice(1, 4)) : "";
}, []);
const cameraList = [
//循环摄像头列表
{
id: 1,
img: "/assets/images/background/ysy.png",
title: "萤石云平台摄像头",
text: "通过萤石云平台rtmp地址配置完成推流的平台摄像头。",
},
{
id: 3,
img: "/assets/images/background/ipc.png",
title: "IPC网络摄像头",
text: "通过网络与监控设备直连完成视频流推送的摄像头设备",
},
{
id: 4,
img: "/assets/images/background/cascade.png",
title: "级联摄像头",
text: "通过GB/T28181协议级联的平台摄像头，常用于平台对接推送",
},
{
id: 2,
img: "/assets/images/background/nvr.png",
title: "NVR摄像头",
text: "通过连接NVR(网络硬盘录像机)进行视频流推送的摄像头",
},
];
const [showcameraList, setcameraList] = useState(cameraList.slice(0, 3)); //轮播图
function handleOk() {
//点击弹框确定 右边按钮
if (clickNum == 1) {
//萤石云平台摄像头
fluoriteRef.current.fluoriteCameraForm().then((values) => {
values = JSON.parse(JSON.stringify(values));
values.longitude = values.position.split(",")[0];
values.latitude = values.position.split(",")[1];
delete values.position;
if (cameraData.id) {
values.id = cameraData.id;
const [clickNum, setclickNum] = useState(
cameraData.type == "yingshi"
? 1
: cameraData.type == "ipc"
? 3
: cameraData.type == "nvr"
? 2
: cameraData.type == "cascade"
? 4
: 1
); //点击的第几个
useEffect(() => {
dispatch(equipmentWarehouse.getCameraKind());
dispatch(equipmentWarehouse.getAbility());
cameraData.type == "nvr" ? setcameraList(cameraList.slice(1, 4)) : "";
}, []);
const cameraList = [
//循环摄像头列表
{
id: 1,
img: "/assets/images/background/ysy.png",
title: "萤石云平台摄像头",
text: "通过萤石云平台rtmp地址配置完成推流的平台摄像头。",
},
{
id: 3,
img: "/assets/images/background/ipc.png",
title: "IPC网络摄像头",
text: "通过网络与监控设备直连完成视频流推送的摄像头设备",
},
{
id: 4,
img: "/assets/images/background/cascade.png",
title: "级联摄像头",
text: "通过GB/T28181协议级联的平台摄像头，常用于平台对接推送",
},
{
id: 2,
img: "/assets/images/background/nvr.png",
title: "NVR摄像头",
text: "通过连接NVR(网络硬盘录像机)进行视频流推送的摄像头",
},
];
const [showcameraList, setcameraList] = useState(cameraList.slice(0, 3)); //轮播图
function handleOk () {
//点击弹框确定 右边按钮
if (clickNum == 1) {
//萤石云平台摄像头
fluoriteRef.current.fluoriteCameraForm().then((values) => {
values = JSON.parse(JSON.stringify(values));
values.longitude = values.position.split(",")[0];
values.latitude = values.position.split(",")[1];
delete values.position;
if (cameraData.id) {
values.id = cameraData.id;
}
dispatch(equipmentWarehouse.postCameraYingshi(values)).then((res) => {
if (res.success) {
onReset();
}
});
});
} else if (clickNum == 2) {
//NVR摄像头
let data = nvrRef.current.NVRcameraList.map((v) => {
return { streamid: v.streamid, name: v.name, cloudControl: v.support };
});
dispatch(
equipmentWarehouse.postCameraNvr({
serialNo: nvrRef.current.equipmentNum,
data: data,
})
).then((res) => {
if (res.success) {
onReset();
}
});
} else if (clickNum == 3) {
//IPC网络摄像头
ipcRef.current.ipcCameraForm().then((values) => {
values = JSON.parse(JSON.stringify(values));
values.longitude = values.position.split(",")[0];
values.latitude = values.position.split(",")[1];
delete values.position;
if (cameraData.id) {
values.id = cameraData.id;
}
console.log(values);
dispatch(equipmentWarehouse.postCameraIpc(values)).then((res) => {
if (res.success) {
onReset();
}
});
});
} else if (clickNum == 4) {
//级联摄像头
cascadeRef.current.cascadeCameraForm().then((values) => {
console.log(values);
dispatch(equipmentWarehouse.postAddCascade(values)).then((res) => {
console.log(res);
if (res.success) {
onReset();
}
});
});
}
dispatch(equipmentWarehouse.postCameraYingshi(values)).then((res) => {
if (res.success) {
onReset();
}
});
});
} else if (clickNum == 2) {
//NVR摄像头
let data = nvrRef.current.NVRcameraList.map((v) => {
return { streamid: v.streamid, name: v.name, cloudControl: v.support };
});
dispatch(
equipmentWarehouse.postCameraNvr({
serialNo: nvrRef.current.equipmentNum,
data: data,
})
).then((res) => {
if (res.success) {
onReset();
}
function handleAfterClose () {
//在关闭之后
}
function handleCancel () {
onReset();
//点击弹框取消 左边按钮
}
function handleChoose (id) {
//选择摄像头接入类型
if (!modify) {
setclickNum(id);
}
});
} else if (clickNum == 3) {
//IPC网络摄像头
ipcRef.current.ipcCameraForm().then((values) => {
values = JSON.parse(JSON.stringify(values));
values.longitude = values.position.split(",")[0];
values.latitude = values.position.split(",")[1];
delete values.position;
if (cameraData.id) {
values.id = cameraData.id;
}
function turnLift () {
//轮播图向左
if (!modify) {
setcameraList(cameraList.slice(0, 3));
}
console.log(values);
dispatch(equipmentWarehouse.postCameraIpc(values)).then((res) => {
if (res.success) {
onReset();
}
});
});
} else if (clickNum == 4) {
//级联摄像头
cascadeRef.current.cascadeCameraForm().then((values) => {
console.log(values);
dispatch(equipmentWarehouse.postAddCascade(values)).then((res) => {
console.log(res);
if (res.success) {
onReset();
}
});
});
}
}
function handleAfterClose() {
//在关闭之后
}
function handleCancel() {
onReset();
//点击弹框取消 左边按钮
}
function handleChoose(id) {
//选择摄像头接入类型
setclickNum(id);
}
function turnLift() {
//轮播图向左
setcameraList(cameraList.slice(0, 3));
}
function turnRight() {
//轮播图向右
setcameraList(cameraList.slice(1, 4));
}
function onReset() {
if (clickNum == 1) {
fluoriteRef.current.resetFluoriteCamera();
fluoriteRef.current.toempty();
close();
} else if (clickNum == 3) {
ipcRef.current.resetIpcCamera();
ipcRef.current.toempty();
close();
} else if (clickNum == 4) {
cascadeRef.current.resetCascadeCamera();
close();
} else {
nvrRef.current.resetFluoriteCamera();
close();
function turnRight () {
//轮播图向右
if (!modify) {
setcameraList(cameraList.slice(1, 4));
}
}
}
//重置
function reset() {
if (clickNum == 1) {
fluoriteRef.current.resetFluoriteCamera();
fluoriteRef.current.toempty();
} else if (clickNum == 3) {
ipcRef.current.resetIpcCamera();
ipcRef.current.toempty();
} else if (clickNum == 4) {
cascadeRef.current.resetCascadeCamera();
} else {
nvrRef.current.resetFluoriteCamera();
function onReset () {
if (clickNum == 1) {
fluoriteRef.current.resetFluoriteCamera();
fluoriteRef.current.toempty();
close();
} else if (clickNum == 3) {
ipcRef.current.resetIpcCamera();
ipcRef.current.toempty();
close();
} else if (clickNum == 4) {
cascadeRef.current.resetCascadeCamera();
close();
} else {
nvrRef.current.resetFluoriteCamera();
close();
}
}
//重置
function reset () {
if (clickNum == 1) {
fluoriteRef.current.resetFluoriteCamera();
fluoriteRef.current.toempty();
} else if (clickNum == 3) {
ipcRef.current.resetIpcCamera();
ipcRef.current.toempty();
} else if (clickNum == 4) {
cascadeRef.current.resetCascadeCamera();
} else {
nvrRef.current.resetFluoriteCamera();
}
}
}
function toTest() {
if (clickNum == 1) {
fluoriteRef.current
.fluoriteCameraForm()
.then((values) => {
//表单校验成功
console.log("111111111", values);
})
.catch((errors) => {
//表单校验失败
console.log("errors", errors);
});
} else if (clickNum == 3) {
ipcRef.current
.ipcCameraForm()
.then((values) => {
//表单校验成功
console.log("111111111", values);
})
.catch((errors) => {
//表单校验失败
console.log("errors", errors);
});
} else if (clickNum == 4) {
cascadeRef.current
.cascadeCameraForm()
.then((values) => {
//表单校验成功
let chooseList = [];
let nvrCameraList = [
{
id: 10,
name: "南昌县1",
number: "111111111111111111",
support: false,
change: false,
},
{
id: 20,
name: "南昌县2",
number: "222222222222222222",
support: false,
change: false,
},
{
id: 30,
name: "南昌县3",
number: "333333333333333333",
support: false,
change: false,
},
{
id: 40,
name: "南昌县4",
number: "444444444444444444",
support: false,
change: false,
},
];
cascadeRef.current.setNVRcameraList(nvrCameraList);
for (let index = 0; index < nvrCameraList.length; index++) {
chooseList.push(nvrCameraList[index].id);
}
cascadeRef.current.setNvrCheckList(chooseList);
cascadeRef.current.setIsAllChoose(true);
})
.catch((errors) => {
//表单校验失败
console.log("errors", errors);
});
function toTest () {
if (clickNum == 1) {
fluoriteRef.current
.fluoriteCameraForm()
.then((values) => {
//表单校验成功
console.log("111111111", values);
})
.catch((errors) => {
//表单校验失败
console.log("errors", errors);
});
} else if (clickNum == 3) {
ipcRef.current
.ipcCameraForm()
.then((values) => {
//表单校验成功
console.log("111111111", values);
})
.catch((errors) => {
//表单校验失败
console.log("errors", errors);
});
} else if (clickNum == 4) {
cascadeRef.current
.cascadeCameraForm()
.then((values) => {
//表单校验成功
let chooseList = [];
let nvrCameraList = [
{
id: 10,
name: "南昌县1",
number: "111111111111111111",
support: false,
change: false,
},
{
id: 20,
name: "南昌县2",
number: "222222222222222222",
support: false,
change: false,
},
{
id: 30,
name: "南昌县3",
number: "333333333333333333",
support: false,
change: false,
},
{
id: 40,
name: "南昌县4",
number: "444444444444444444",
support: false,
change: false,
},
];
cascadeRef.current.setNVRcameraList(nvrCameraList);
for (let index = 0; index < nvrCameraList.length; index++) {
chooseList.push(nvrCameraList[index].id);
}
cascadeRef.current.setNvrCheckList(chooseList);
cascadeRef.current.setIsAllChoose(true);
})
.catch((errors) => {
//表单校验失败
console.log("errors", errors);
});
}
}
}
return (
<>
<Modal
title={modalName == "add" ? "添加摄像头" : "修改摄像头"}
okText={okText}
cancelText={cancelText} //取消按钮
visible={visible}
onOk={handleOk}
width={966}
afterClose={handleAfterClose}
onCancel={handleCancel}
>
<Spin tip={loadingTip} spinning={isloading}>
<div
style={{ marginLeft: "-24px", marginRight: "-24px", marginTop: 8 }}
>
<div
style={{
marginLeft: 29,
color: "#1859C1",
fontSize: 14,
fontWeight: 500,
}}
return (
<>
<Modal
title={modalName == "add" ? "添加摄像头" : "修改摄像头"}
okText={okText}
cancelText={cancelText} //取消按钮
visible={visible}
onOk={handleOk}
width={966}
afterClose={handleAfterClose}
onCancel={handleCancel}
>
接入类型
</div>
<div
style={{
marginTop: 5,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<IconChevronLeft
style={{
color: "rgba(0, 0, 0, 0.45)",
fontSize: 16,
marginLeft: 29,
cursor: "pointer",
}}
onClick={turnLift}
/>
<div
style={{ display: "flex", alignItems: "center", height: 146 }}
>
{showcameraList.map((item, index) => (
<div
key={item.id}
style={{
width: 266,
height: 146,
marginRight: 12,
border:
clickNum === item.id
? "1px solid #1859C1"
: "1px solid #F9F9F9",
borderRadius: 3,
display: "flex",
flexDirection: "column",
alignItems: "center",
cursor: "pointer",
position: "relative",
}}
onClick={() => handleChoose(item.id)}
>
<Spin tip={loadingTip} spinning={isloading}>
<div
style={{
marginTop: 5,
height: 65,
width: 116,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
style={{ marginLeft: "-24px", marginRight: "-24px", marginTop: 8 }}
>
<img src={item.img} alt="设置" />
<div
style={{
marginLeft: 29,
color: "#1859C1",
fontSize: 14,
fontWeight: 500,
}}
>
接入类型
</div>
<div
style={{
marginTop: 5,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<IconChevronLeft
style={{
color: "rgba(0, 0, 0, 0.45)",
fontSize: 16,
marginLeft: 29,
cursor: "pointer",
}}
onClick={turnLift}
/>
<div
style={{ display: "flex", alignItems: "center", height: 146 }}
>
{showcameraList.map((item, index) => (
<div
key={item.id}
style={{
width: 266,
height: 146,
marginRight: 12,
border:
clickNum === item.id
? "1px solid #1859C1"
: "1px solid #F9F9F9",
borderRadius: 3,
display: "flex",
flexDirection: "column",
alignItems: "center",
cursor: "pointer",
position: "relative",
}}
onClick={() => handleChoose(item.id)}
>
{modify ? item.id == clickNum ? "" : <div style={{
width: 266,
height: 146,
borderRadius: 3,
backgroundColor: "rgba(151, 151, 151, 0.1)",
position: "absolute",
top: 0,
}}></div> : ""}
<div
style={{
marginTop: 5,
height: 65,
width: 116,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<img src={item.img} alt="设置" />
</div>
<div
style={{
marginTop: 2,
fontSize: 14,
color: "rgba(0, 0, 0, 0.85)",
}}
>
{item.title}
</div>
<div
style={{
width: 210,
height: 34,
marginTop: 9,
fontSize: 12,
color: "rgba(0, 0, 0, 0.45)",
textAlign: "center",
}}
>
{item.text}
</div>
{clickNum === item.id ? (
<div
style={{
position: "absolute",
top: "-3px",
right: "-5px",
}}
>
<img
src="/assets/images/background/topchoose.png"
alt="1"
/>
</div>
) : (
""
)}
</div>
))}
</div>
<IconChevronRight
style={{
color: "rgba(0, 0, 0, 0.45)",
fontSize: 16,
marginRight: 18,
cursor: "pointer",
}}
onClick={turnRight}
/>
</div>
</div>
<div
style={{
marginTop: 2,
fontSize: 14,
color: "rgba(0, 0, 0, 0.85)",
}}
style={{
height: 30,
marginLeft: "-24px",
marginRight: "-24px",
marginTop: 48,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
{item.title}
<div
style={{
marginLeft: 29,
color: "#1859C1",
fontSize: 14,
fontWeight: 500,
}}
>
配置属性
</div>
{clickNum !== 2 ? (
<div style={{ display: "flex", marginRight: 43 }}>
<div
style={{
height: 30,
width: 64,
border: "1px solid #D9D9D9",
borderRadius: "3px",
color: "rgba(0, 0, 0, 0.65)",
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
marginRight: 16,
}}
onClick={reset}
>
<img
src="/assets/images/background/Reset.png"
alt="1"
style={{ marginRight: 4 }}
/>
重置
</div>
<div
style={{
height: 30,
width: 64,
border: "1px solid #1859C1",
borderRadius: "3px",
color: "#1859C1",
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
}}
onClick={toTest}
>
<img
src="/assets/images/background/test.png"
alt="1"
style={{ marginRight: 4 }}
/>
测试
</div>
</div>
) : (
""
)}
</div>
<div
style={{
width: 210,
height: 34,
marginTop: 9,
fontSize: 12,
color: "rgba(0, 0, 0, 0.45)",
textAlign: "center",
}}
>
{item.text}
<div>
{clickNum == 1 ? (
<FluoriteCamera
cRef={fluoriteRef}
CameraKind={CameraKind}
CameraAbility={CameraAbility}
cameraData={cameraData}
/>
) : clickNum == 2 ? (
<NvrCamera nvrRef={nvrRef} cameraData={cameraData} />
) : clickNum == 3 ? (
<IpcCamera
aRef={ipcRef}
CameraKind={CameraKind}
CameraAbility={CameraAbility}
venderList={venderList}
cameraData={cameraData}
/>
) : (
<CascadeCamera dRef={cascadeRef} cameraData={cameraData} parentCamera={parentCamera} />
)}
</div>
{clickNum === item.id ? (
<div
style={{
position: "absolute",
top: "-3px",
right: "-5px",
}}
>
<img
src="/assets/images/background/topchoose.png"
alt="1"
/>
</div>
) : (
""
)}
</div>
))}
</div>
<IconChevronRight
style={{
color: "rgba(0, 0, 0, 0.45)",
fontSize: 16,
marginRight: 18,
cursor: "pointer",
}}
onClick={turnRight}
/>
</div>
</div>
<div
style={{
height: 30,
marginLeft: "-24px",
marginRight: "-24px",
marginTop: 48,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<div
style={{
marginLeft: 29,
color: "#1859C1",
fontSize: 14,
fontWeight: 500,
}}
>
配置属性
</div>
{clickNum !== 2 ? (
<div style={{ display: "flex", marginRight: 43 }}>
<div
style={{
height: 30,
width: 64,
border: "1px solid #D9D9D9",
borderRadius: "3px",
color: "rgba(0, 0, 0, 0.65)",
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
marginRight: 16,
}}
onClick={reset}
>
<img
src="/assets/images/background/Reset.png"
alt="1"
style={{ marginRight: 4 }}
/>
重置
</div>
<div
style={{
height: 30,
width: 64,
border: "1px solid #1859C1",
borderRadius: "3px",
color: "#1859C1",
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
}}
onClick={toTest}
>
<img
src="/assets/images/background/test.png"
alt="1"
style={{ marginRight: 4 }}
/>
测试
</div>
</div>
) : (
""
)}
</div>
<div>
{clickNum == 1 ? (
<FluoriteCamera
cRef={fluoriteRef}
CameraKind={CameraKind}
CameraAbility={CameraAbility}
cameraData={cameraData}
/>
) : clickNum == 2 ? (
<NvrCamera nvrRef={nvrRef} cameraData={cameraData} />
) : clickNum == 3 ? (
<IpcCamera
aRef={ipcRef}
CameraKind={CameraKind}
CameraAbility={CameraAbility}
venderList={venderList}
cameraData={cameraData}
/>
) : (
<CascadeCamera dRef={cascadeRef} cameraData={cameraData} />
)}
</div>
</Spin>
</Modal>
</>
);
</Spin>
</Modal>
</>
);
}
function mapStateToProps(state) {
const { auth, global, members, CameraKind, CameraAbility } = state;
return {
loading: members.isRequesting,
user: auth.user,
actions: global.actions,
CameraKind: CameraKind.data || [],
CameraAbility: CameraAbility.data || [],
};
function mapStateToProps (state) {
const { auth, global, members, CameraKind, CameraAbility } = state;
return {
loading: members.isRequesting,
user: auth.user,
actions: global.actions,
CameraKind: CameraKind.data || [],
CameraAbility: CameraAbility.data || [],
};
}
export default connect(mapStateToProps)(cameraModal);

220
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx
View File

@ -3,122 +3,122 @@ import { connect } from "react-redux";
import { Form, Row, Col } from "@douyinfe/semi-ui";
import "./cameraModal.less";
function cascadeCamera({ dRef, dispatch, actions ,cameraData}) {
const form = useRef();
const { equipmentWarehouse } = actions;
const [sip, setSip] = useState([]);
function cascadeCamera ({ dRef, dispatch, actions, cameraData ,parentCamera}) {
const form = useRef();
const { equipmentWarehouse } = actions;
const [sip, setSip] = useState([]);
useEffect(() => {
dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => {
console.log(res)
setSip(res.payload.data);
});
}, []);
useEffect(() => {
dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => {
setSip(res.payload.data);
});
//内存卡列表
const memoryList = [
{
id: 1,
value: "8g",
},
{
id: 2,
value: "16g",
},
{
id: 3,
value: "32g",
},
{
id: 4,
value: "64g",
},
{
id: 5,
value: "128g",
},
{
id: 6,
value: "256g",
},
{
id: 7,
value: ">256g",
},
];
}, []);
useImperativeHandle(dRef, () => ({
//传给父组件方法
//子组件暴露给父组件的方法
cascadeCameraForm: form.current.validate,
resetCascadeCamera: form.current.reset,
}));
return (
<>
<Form
allowEmpty
labelPosition="left"
labelAlign="left"
labelWidth="115px"
onValueChange={(values) => {
console.log(values);
//内存卡列表
const memoryList = [
{
id: 1,
value: "8g",
},
{
id: 2,
value: "16g",
},
{
id: 3,
value: "32g",
},
{
id: 4,
value: "64g",
},
{
id: 5,
value: "128g",
},
{
id: 6,
value: "256g",
},
{
id: 7,
value: ">256g",
},
];
}}
getFormApi={(formApi) => (form.current = formApi)}
>
<Row>
<Col span={12}>
<Form.Input
field="externalDomain"
label="外域名称:"
initValue={cameraData.externalDomain||""}v
placeholder="请输入外域名称"
style={{ width: 307 }}
rules={[{ required: true, message: "请输入外域名称" }]}
/>
</Col>
<Col span={12}>
<Form.Select
label="级联方式:"
field="cascadeType"
initValue={cameraData.cascadeType||"上级域"}
style={{ width: 307 }}
rules={[{ required: true, message: "请选择输入级联方式" }]}
>
<Form.Select.Option value="上级域">
上级域
</Form.Select.Option>
</Form.Select>
</Col>
<Col span={12}>
<Form.Select
label="SIP编号:"
field="sip"
initValue={cameraData.cascadeType||""}
placeholder="请选择SIP编号"
style={{ width: 307 }}
rules={[{ required: true, message: "请选择SIP编号" }]}
useImperativeHandle(dRef, () => ({
//传给父组件方法
//子组件暴露给父组件的方法
cascadeCameraForm: form.current.validate,
resetCascadeCamera: form.current.reset,
}));
return (
<>
<Form
allowEmpty
labelPosition="left"
labelAlign="left"
labelWidth="115px"
onValueChange={(values) => {
console.log(values);
}}
getFormApi={(formApi) => (form.current = formApi)}
>
{sip.map((item, index) => (
<Form.Select.Option key={index} value={item.sipip}>
{item.sipip}
</Form.Select.Option>
))}
</Form.Select>
</Col>
</Row>
</Form>
</>
);
<Row>
<Col span={12}>
<Form.Input
field="externalDomain"
label="外域名称:"
initValue={cameraData.externalDomain || ""} v
placeholder="请输入外域名称"
style={{ width: 307 }}
rules={[{ required: true, message: "请输入外域名称" }]}
/>
</Col>
<Col span={12}>
<Form.Select
label="级联方式:"
field="cascadeType"
initValue={cameraData.cascadeType || "上级域"}
style={{ width: 307 }}
rules={[{ required: true, message: "请选择输入级联方式" }]}
>
<Form.Select.Option value="上级域">
上级域
</Form.Select.Option>
</Form.Select>
</Col>
<Col span={12}>
<Form.Select
label="SIP编号:"
field="sip"
initValue={parentCamera || ""}
placeholder="请选择SIP编号"
style={{ width: 307 }}
rules={[{ required: true, message: "请选择SIP编号" }]}
>
{sip.map((item, index) => (
<Form.Select.Option key={index} value={item.sipip}>
{item.sipip}
</Form.Select.Option>
))}
</Form.Select>
</Col>
</Row>
</Form>
</>
);
}
function mapStateToProps(state) {
const { auth, global, members } = state;
return {
loading: members.isRequesting,
user: auth.user,
actions: global.actions,
members: members.data,
};
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)(cascadeCamera);

104
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
View File

@ -35,6 +35,8 @@ const CameraHeader = (props) => {
const [search, setearch] = useState({}); //搜索条件
const [rowId, setRowId] = useState(); //表格数据id
const [cameraData, setCameraData] = useState({}); //表格数据
const [modify, setModify] = useState(false); //修改
const [parentCamera, setParentCamera] = useState(""); //级联摄像头父级设备
const { equipmentWarehouse } = actions;
const api = useRef();
const searchb = useRef(search)
@ -42,6 +44,8 @@ const CameraHeader = (props) => {
const CAMERAS = "cameras";
useEffect(() => {
console.log(props)
dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
setvenderList(res.payload.data);
attribute(res.payload.data);
@ -53,7 +57,6 @@ const CameraHeader = (props) => {
JSON.stringify(["state", "type", "manufactor"])
)
: "";
console.log(equipmentWarehouseCamera);
}, []);
useEffect(() => {
@ -89,14 +92,14 @@ const CameraHeader = (props) => {
} else {
setearch({ ...searchb.current, externalDomain: row.externalDomain })
}
deviceClickb.current=false
deviceClickb.current = false
} else {
if (row.type == "nvr") {
setearch({ ...searchb.current, nvrId: null })
} else {
setearch({ ...searchb.current, externalDomain: null })
}
deviceClickb.current=true
deviceClickb.current = true
}
}}
>
@ -118,8 +121,19 @@ const CameraHeader = (props) => {
<Button
theme="borderless"
onClick={() => {
setCameraModal(true);
setCameraData(row);
if (row.type == "cascade") {
dispatch(equipmentWarehouse.getParentCamera({ cameraSerialNo: row.serialNo })).then((res) => {
setParentCamera(res.payload.data.sipip)
if (res.success) {
setCameraModal(true);
setModify(true)
}
})
} else {
setCameraModal(true);
setModify(true)
}
}}
>
修改
@ -290,15 +304,7 @@ const CameraHeader = (props) => {
render: (_, r, index) => {
return r.station.length == 0
? ""
: r.station.map((item, index) => {
return item.structure.projects.length == 0
? ""
: station(
r.station[0].structure.projects[0].name,
item.structure.projects,
"name"
);
});
: station(r, "name", _, "projects")
},
},
{
@ -308,15 +314,7 @@ const CameraHeader = (props) => {
render: (_, r, index) => {
return r.station.length == 0
? ""
: r.station.map((item, index) => {
return item.structure.projects.length == 0
? ""
: station(
r.station[0].structure.projects[0].url,
item.structure.projects,
"url"
);
});
: station(r, "url", _, "projects")
},
},
{
@ -326,7 +324,7 @@ const CameraHeader = (props) => {
render: (_, r, index) => {
return r.station.length == 0
? ""
: station(r.station[0].structure.name, r.station, "structure.name");
: station(r, "name", r.station[0].structure.name, _, "structure")
},
},
{
@ -336,7 +334,7 @@ const CameraHeader = (props) => {
render: (_, r, index) => {
return r.station.length == 0
? ""
: station(r.station[0].name, r.station, "name");
: station(r, "name", r.station[0].name, _, "point")
},
},
{
@ -346,7 +344,7 @@ const CameraHeader = (props) => {
render: (_, r, index) => {
return r.station.length == 0
? ""
: station(r.station[0].factor.name, r.station, "factor.name");
: station(r, "name", r.station[0].factor.name)
},
},
];
@ -360,39 +358,22 @@ const CameraHeader = (props) => {
}
//表格请求数据中station属性数据的展示
function station (first, whole, name) {
return (
<Popover
key="updateTime"
position="top"
content={
<article style={{ padding: 12 }}>
{whole.map((v, index) => {
let names = "";
switch (name) {
case "name":
names = v[name];
break;
case "url":
names = v[name];
break;
case "structure.name":
names = v.structure.name;
break;
case "factor.name":
names = v.factor.name;
break;
default:
break;
}
return <div key={index}>{names}</div>;
})}
</article>
}
>
<Tag>{first}...</Tag>
</Popover>
);
function station (r, name, data, projects, exhibition) {
return <Popover
key="updateTime"
position="top"
content={
<article style={{ padding: 12 }}>
{projects == "projects" ?
r.station.map((v) => v.structure.projects.length == 0 ? "" : v.structure.projects.map((item, index) => <div key={index}>{item[name]}</div>))
: r.station.map((v, index) => <div key={index}>{exhibition == "structure" ? v.structure.name : exhibition == "point" ? v.name : v.factor.name}</div>)
}
</article>
}
>
<Tag>{projects == "projects" && r.station[0].structure.projects.length > 0 ? r.station[0].structure.projects[0][name] : data}...</Tag>
</Popover>
}
//条件赛选样式
const screen = {
@ -724,10 +705,15 @@ const CameraHeader = (props) => {
visible={true}
venderList={venderList}
cameraData={cameraData}
modify={modify}
parentCamera={parentCamera}
close={() => {
setCameraModal(false);
setCameraData({});
setModify(false)
setParentCamera("")
equipmentGetCamera();
}}
modalName={modalName}
/>
@ -735,7 +721,7 @@ const CameraHeader = (props) => {
""
)}
{
<VideoPlayModal visible={true} />
// <VideoPlayModal visible={true} />
}
</>
);

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

@ -40,7 +40,7 @@ const NvrHeader = (props) => {
const [search, setearch] = useState({}); //搜索条件
const [rowId, setRowId] = useState(); //表格数据id
const [reminder, setReminder] = useState(true); //提醒弹框
const [reminder, setReminder] = useState(false); //提醒弹框
const api = useRef();
const SETUPS = "setups";
@ -56,7 +56,6 @@ const NvrHeader = (props) => {
JSON.stringify(["manufactor", "passageway", "port", "state"])
)
: "";
// ;
}, []);
useEffect(() => {
@ -218,18 +217,9 @@ const NvrHeader = (props) => {
dataIndex: "",
key: "name",
render: (_, r, index) => {
console.log(r)
return r.station.length == 0
? ""
: r.station.map((item, index) => {
return item.structure.projects.length == 0
? ""
: station(
r.station[0].structure.projects[0].name,
item.structure.projects,
"name"
);
});
: station(r, "name", "projects")
},
},
{
@ -239,15 +229,7 @@ const NvrHeader = (props) => {
render: (_, r, index) => {
return r.station.length == 0
? ""
: r.station.map((item, index) => {
return item.structure.projects.length == 0
? ""
: station(
r.station[0].structure.projects[0].url,
item.structure.projects,
"url"
);
});
: station(r, "url", "projects")
},
},
{
@ -257,7 +239,7 @@ const NvrHeader = (props) => {
render: (_, r, index) => {
return r.station.length == 0
? ""
: station(r.station[0].structure.name, r.station, "structure.name");
: station(r, "name")
},
},
];
@ -271,39 +253,22 @@ const NvrHeader = (props) => {
}
//表格请求数据中station属性数据的展示
function station (first, whole, name) {
return (
<Popover
key="updateTime"
position="top"
content={
<article style={{ padding: 12 }}>
{whole.map((v, index) => {
let names = "";
switch (name) {
case "name":
names = v[name];
break;
case "url":
names = v[name];
break;
case "structure.name":
names = v.structure.name;
break;
case "factor.name":
names = v.factor.name;
break;
default:
break;
}
return <div key={index}>{names}</div>;
})}
</article>
}
>
<Tag>{first}...</Tag>
</Popover>
);
function station (r, name, projects) {
return <Popover
key="updateTime"
position="top"
content={
<article style={{ padding: 12 }}>
{projects == "projects" ?
r.station.map((v) => v.structure.projects.length == 0 ? "" : v.structure.projects.map((item, index) => <div key={index}>{item[name]}</div>))
: r.station.map((v, index) => <div key={index}>{v.structure[name]}</div>)
}
</article>
}
>
<Tag>{projects == "projects" ? r.station[0].structure.projects[0][name] : r.station[0].structure[name]}...</Tag>
</Popover>
}
//条件赛选样式
@ -621,16 +586,16 @@ const NvrHeader = (props) => {
) : (
[]
)}
{/* <ReminderBox
title="是否继续添加NVR摄像头？"
wait="再等等"
toadd="去添加"
visible={reminder}
onOk={()=>{
// dispatch(push('/equipmentWarehouse/camera'));
setReminder(false)
}}
/> */}
<ReminderBox
title="是否继续添加NVR摄像头？"
wait="再等等"
toadd="去添加"
visible={reminder}
onOk={() => {
dispatch(push('/equipmentWarehouse/camera/:addNvr=true'));
setReminder(false)
}}
/>
</div>
</>
);

1
code/VideoAccess-VCMP/web/client/src/utils/webapi.js
View File

@ -30,6 +30,7 @@ export const ApiTable = {
postCameraNvr: "camera/create/nvr", //记录NVR摄像头
getCascadeSIP: "camera/sip_list/cascade", //获取级联摄像头sip列表
postAddCascade: "camera/create/cascade", //添加级联摄像头
getParentCamera:"camera/cascade_device", //获取级联摄像头父级设备
};

Write Preview
Loading…
Cancel
Save