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
Unified 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 { Button, Checkbox, Modal } from "@douyinfe/semi-ui";
import React from "react"; import React from "react";
const ReminderBox = ({title, wait, toadd,visible,onOk}) => { const ReminderBox = ({ title, wait, toadd, visible, onOk }) => {
return ( return (
<Modal <Modal
title={ title={
<div style={{ fontSize: 14, lineHeight: "35px", marginLeft: 16 }}> <div style={{ fontSize: 14, lineHeight: "35px", marginLeft: 16 }}>
{title} {title}
</div> </div>
} }
icon={ icon={
<img <img
src="../../assets/images/logo/figure.png" src="../../assets/images/logo/figure.png"
style={{ width: 50, height: 50 }} style={{ width: 40, height: 40 }}
/> />
} }
footer={ footer={
<div <div
style={{ style={{
width: "100%", width: "100%",
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
}} }}
> >
<Checkbox <Checkbox
onChange={(checked) => console.log(checked)} onChange={(checked) => console.log(checked)}
aria-label="Checkbox 示例" aria-label="Checkbox 示例"
style={{ width: 100 }} style={{ width: 100 }}
> >
不在提醒 不在提醒
</Checkbox> </Checkbox>
<div> <div>
<Button>{wait}</Button> <Button>{wait}</Button>
<Button theme="solid" onClick={onOk()}>{toadd}</Button> <Button theme="solid" onClick={() => {
</div> onOk()
</div> }}>{toadd}</Button>
} </div>
// visible={false} </div>
visible={visible} }
></Modal> // visible={true}
); visible={visible}
></Modal>
);
}; };
export default ReminderBox; 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: "" }, //添加级联摄像头 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 CascadeCamera from "./cascadeCamera";
import "./cameraModal.less"; import "./cameraModal.less";
function cameraModal(props) { function cameraModal (props) {
const { const {
dispatch, dispatch,
actions, actions,
modalName, modalName,
visible, visible,
close, close,
venderList, venderList,
CameraKind, CameraKind,
CameraAbility, CameraAbility,
cameraData, //修改时传来的值 cameraData, //修改时传来的值
} = props; modify,
const { equipmentWarehouse } = actions; parentCamera
const fluoriteRef = useRef(); } = props;
const ipcRef = useRef(); const { equipmentWarehouse } = actions;
const cascadeRef = useRef(); const fluoriteRef = useRef();
const nvrRef = useRef(); const ipcRef = useRef();
const [isloading, setloading] = useState(false); //是否显示loading const cascadeRef = useRef();
const [loadingTip, setloadingTip] = useState("获取中...请稍后..."); //loading tip的值 const nvrRef = useRef();
const [okText, setokText] = useState("确定"); //ok弹框text 右边 const [isloading, setloading] = useState(false); //是否显示loading
const [cancelText, setcancelText] = useState("取消"); //取消弹框text 左边 const [loadingTip, setloadingTip] = useState("获取中...请稍后..."); //loading tip的值
const [clickNum, setclickNum] = useState( const [okText, setokText] = useState("确定"); //ok弹框text 右边
cameraData.type == "yingshi" const [cancelText, setcancelText] = useState("取消"); //取消弹框text 左边
? 1
: cameraData.type == "ipc"
? 3
: cameraData.type == "nvr"
? 2
: cameraData.type == "cascade"
? 4
: 1
); //点击的第几个
useEffect(() => { const [clickNum, setclickNum] = useState(
dispatch(equipmentWarehouse.getCameraKind()); cameraData.type == "yingshi"
dispatch(equipmentWarehouse.getAbility()); ? 1
cameraData.type == "nvr" ? setcameraList(cameraList.slice(1, 4)) : ""; : cameraData.type == "ipc"
}, []); ? 3
const cameraList = [ : cameraData.type == "nvr"
//循环摄像头列表 ? 2
{ : cameraData.type == "cascade"
id: 1, ? 4
img: "/assets/images/background/ysy.png", : 1
title: "萤石云平台摄像头", ); //点击的第几个
text: "通过萤石云平台rtmp地址配置完成推流的平台摄像头。",
}, useEffect(() => {
{ dispatch(equipmentWarehouse.getCameraKind());
id: 3, dispatch(equipmentWarehouse.getAbility());
img: "/assets/images/background/ipc.png", cameraData.type == "nvr" ? setcameraList(cameraList.slice(1, 4)) : "";
title: "IPC网络摄像头", }, []);
text: "通过网络与监控设备直连完成视频流推送的摄像头设备", const cameraList = [
}, //循环摄像头列表
{ {
id: 4, id: 1,
img: "/assets/images/background/cascade.png", img: "/assets/images/background/ysy.png",
title: "级联摄像头", title: "萤石云平台摄像头",
text: "通过GB/T28181协议级联的平台摄像头，常用于平台对接推送", text: "通过萤石云平台rtmp地址配置完成推流的平台摄像头。",
}, },
{ {
id: 2, id: 3,
img: "/assets/images/background/nvr.png", img: "/assets/images/background/ipc.png",
title: "NVR摄像头", title: "IPC网络摄像头",
text: "通过连接NVR(网络硬盘录像机)进行视频流推送的摄像头", text: "通过网络与监控设备直连完成视频流推送的摄像头设备",
}, },
]; {
const [showcameraList, setcameraList] = useState(cameraList.slice(0, 3)); //轮播图 id: 4,
function handleOk() { img: "/assets/images/background/cascade.png",
//点击弹框确定 右边按钮 title: "级联摄像头",
if (clickNum == 1) { text: "通过GB/T28181协议级联的平台摄像头，常用于平台对接推送",
//萤石云平台摄像头 },
fluoriteRef.current.fluoriteCameraForm().then((values) => { {
values = JSON.parse(JSON.stringify(values)); id: 2,
values.longitude = values.position.split(",")[0]; img: "/assets/images/background/nvr.png",
values.latitude = values.position.split(",")[1]; title: "NVR摄像头",
delete values.position; text: "通过连接NVR(网络硬盘录像机)进行视频流推送的摄像头",
if (cameraData.id) { },
values.id = cameraData.id; ];
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) { function handleAfterClose () {
onReset(); //在关闭之后
} }
}); function handleCancel () {
}); onReset();
} else if (clickNum == 2) { //点击弹框取消 左边按钮
//NVR摄像头 }
let data = nvrRef.current.NVRcameraList.map((v) => { function handleChoose (id) {
return { streamid: v.streamid, name: v.name, cloudControl: v.support }; //选择摄像头接入类型
}); if (!modify) {
dispatch( setclickNum(id);
equipmentWarehouse.postCameraNvr({
serialNo: nvrRef.current.equipmentNum,
data: data,
})
).then((res) => {
if (res.success) {
onReset();
} }
});
} else if (clickNum == 3) { }
//IPC网络摄像头 function turnLift () {
ipcRef.current.ipcCameraForm().then((values) => { //轮播图向左
values = JSON.parse(JSON.stringify(values)); if (!modify) {
values.longitude = values.position.split(",")[0]; setcameraList(cameraList.slice(0, 3));
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();
}
});
});
} }
} function turnRight () {
function handleAfterClose() { //轮播图向右
//在关闭之后 if (!modify) {
} setcameraList(cameraList.slice(1, 4));
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 onReset () {
//重置 if (clickNum == 1) {
function reset() { fluoriteRef.current.resetFluoriteCamera();
if (clickNum == 1) { fluoriteRef.current.toempty();
fluoriteRef.current.resetFluoriteCamera(); close();
fluoriteRef.current.toempty(); } else if (clickNum == 3) {
} else if (clickNum == 3) { ipcRef.current.resetIpcCamera();
ipcRef.current.resetIpcCamera(); ipcRef.current.toempty();
ipcRef.current.toempty(); close();
} else if (clickNum == 4) { } else if (clickNum == 4) {
cascadeRef.current.resetCascadeCamera(); cascadeRef.current.resetCascadeCamera();
} else { close();
nvrRef.current.resetFluoriteCamera(); } 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() { function toTest () {
if (clickNum == 1) { if (clickNum == 1) {
fluoriteRef.current fluoriteRef.current
.fluoriteCameraForm() .fluoriteCameraForm()
.then((values) => { .then((values) => {
//表单校验成功 //表单校验成功
console.log("111111111", values); console.log("111111111", values);
}) })
.catch((errors) => { .catch((errors) => {
//表单校验失败 //表单校验失败
console.log("errors", errors); console.log("errors", errors);
}); });
} else if (clickNum == 3) { } else if (clickNum == 3) {
ipcRef.current ipcRef.current
.ipcCameraForm() .ipcCameraForm()
.then((values) => { .then((values) => {
//表单校验成功 //表单校验成功
console.log("111111111", values); console.log("111111111", values);
}) })
.catch((errors) => { .catch((errors) => {
//表单校验失败 //表单校验失败
console.log("errors", errors); console.log("errors", errors);
}); });
} else if (clickNum == 4) { } else if (clickNum == 4) {
cascadeRef.current cascadeRef.current
.cascadeCameraForm() .cascadeCameraForm()
.then((values) => { .then((values) => {
//表单校验成功 //表单校验成功
let chooseList = []; let chooseList = [];
let nvrCameraList = [ let nvrCameraList = [
{ {
id: 10, id: 10,
name: "南昌县1", name: "南昌县1",
number: "111111111111111111", number: "111111111111111111",
support: false, support: false,
change: false, change: false,
}, },
{ {
id: 20, id: 20,
name: "南昌县2", name: "南昌县2",
number: "222222222222222222", number: "222222222222222222",
support: false, support: false,
change: false, change: false,
}, },
{ {
id: 30, id: 30,
name: "南昌县3", name: "南昌县3",
number: "333333333333333333", number: "333333333333333333",
support: false, support: false,
change: false, change: false,
}, },
{ {
id: 40, id: 40,
name: "南昌县4", name: "南昌县4",
number: "444444444444444444", number: "444444444444444444",
support: false, support: false,
change: false, change: false,
}, },
]; ];
cascadeRef.current.setNVRcameraList(nvrCameraList); cascadeRef.current.setNVRcameraList(nvrCameraList);
for (let index = 0; index < nvrCameraList.length; index++) { for (let index = 0; index < nvrCameraList.length; index++) {
chooseList.push(nvrCameraList[index].id); chooseList.push(nvrCameraList[index].id);
} }
cascadeRef.current.setNvrCheckList(chooseList); cascadeRef.current.setNvrCheckList(chooseList);
cascadeRef.current.setIsAllChoose(true); cascadeRef.current.setIsAllChoose(true);
}) })
.catch((errors) => { .catch((errors) => {
//表单校验失败 //表单校验失败
console.log("errors", errors); console.log("errors", errors);
}); });
}
} }
}
return ( return (
<> <>
<Modal <Modal
title={modalName == "add" ? "添加摄像头" : "修改摄像头"} title={modalName == "add" ? "添加摄像头" : "修改摄像头"}
okText={okText} okText={okText}
cancelText={cancelText} //取消按钮 cancelText={cancelText} //取消按钮
visible={visible} visible={visible}
onOk={handleOk} onOk={handleOk}
width={966} width={966}
afterClose={handleAfterClose} afterClose={handleAfterClose}
onCancel={handleCancel} 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,
}}
> >
接入类型 <Spin tip={loadingTip} spinning={isloading}>
</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)}
>
<div <div
style={{ style={{ marginLeft: "-24px", marginRight: "-24px", marginTop: 8 }}
marginTop: 5,
height: 65,
width: 116,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
> >
<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>
<div <div
style={{ style={{
marginTop: 2, height: 30,
fontSize: 14, marginLeft: "-24px",
color: "rgba(0, 0, 0, 0.85)", 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>
<div <div>
style={{ {clickNum == 1 ? (
width: 210, <FluoriteCamera
height: 34, cRef={fluoriteRef}
marginTop: 9, CameraKind={CameraKind}
fontSize: 12, CameraAbility={CameraAbility}
color: "rgba(0, 0, 0, 0.45)", cameraData={cameraData}
textAlign: "center", />
}} ) : clickNum == 2 ? (
> <NvrCamera nvrRef={nvrRef} cameraData={cameraData} />
{item.text} ) : clickNum == 3 ? (
<IpcCamera
aRef={ipcRef}
CameraKind={CameraKind}
CameraAbility={CameraAbility}
venderList={venderList}
cameraData={cameraData}
/>
) : (
<CascadeCamera dRef={cascadeRef} cameraData={cameraData} parentCamera={parentCamera} />
)}
</div> </div>
{clickNum === item.id ? ( </Spin>
<div </Modal>
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>
</>
);
} }
function mapStateToProps(state) { function mapStateToProps (state) {
const { auth, global, members, CameraKind, CameraAbility } = state; const { auth, global, members, CameraKind, CameraAbility } = state;
return { return {
loading: members.isRequesting, loading: members.isRequesting,
user: auth.user, user: auth.user,
actions: global.actions, actions: global.actions,
CameraKind: CameraKind.data || [], CameraKind: CameraKind.data || [],
CameraAbility: CameraAbility.data || [], CameraAbility: CameraAbility.data || [],
}; };
} }
export default connect(mapStateToProps)(cameraModal); 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 { Form, Row, Col } from "@douyinfe/semi-ui";
import "./cameraModal.less"; import "./cameraModal.less";
function cascadeCamera({ dRef, dispatch, actions ,cameraData}) { function cascadeCamera ({ dRef, dispatch, actions, cameraData ,parentCamera}) {
const form = useRef(); const form = useRef();
const { equipmentWarehouse } = actions; const { equipmentWarehouse } = actions;
const [sip, setSip] = useState([]); const [sip, setSip] = useState([]);
useEffect(() => { useEffect(() => {
dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => { dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => {
console.log(res) setSip(res.payload.data);
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, () => ({ //内存卡列表
//传给父组件方法 const memoryList = [
//子组件暴露给父组件的方法 {
cascadeCameraForm: form.current.validate, id: 1,
resetCascadeCamera: form.current.reset, value: "8g",
})); },
return ( {
<> id: 2,
<Form value: "16g",
allowEmpty },
labelPosition="left" {
labelAlign="left" id: 3,
labelWidth="115px" value: "32g",
onValueChange={(values) => { },
console.log(values); {
id: 4,
value: "64g",
},
{
id: 5,
value: "128g",
},
{
id: 6,
value: "256g",
},
{
id: 7,
value: ">256g",
},
];
}} useImperativeHandle(dRef, () => ({
getFormApi={(formApi) => (form.current = formApi)} //传给父组件方法
> //子组件暴露给父组件的方法
<Row> cascadeCameraForm: form.current.validate,
<Col span={12}> resetCascadeCamera: form.current.reset,
<Form.Input }));
field="externalDomain" return (
label="外域名称:" <>
initValue={cameraData.externalDomain||""}v <Form
placeholder="请输入外域名称" allowEmpty
style={{ width: 307 }} labelPosition="left"
rules={[{ required: true, message: "请输入外域名称" }]} labelAlign="left"
/> labelWidth="115px"
</Col> onValueChange={(values) => {
<Col span={12}> console.log(values);
<Form.Select
label="级联方式:" }}
field="cascadeType" getFormApi={(formApi) => (form.current = formApi)}
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编号" }]}
> >
{sip.map((item, index) => ( <Row>
<Form.Select.Option key={index} value={item.sipip}> <Col span={12}>
{item.sipip} <Form.Input
</Form.Select.Option> field="externalDomain"
))} label="外域名称:"
</Form.Select> initValue={cameraData.externalDomain || ""} v
</Col> placeholder="请输入外域名称"
</Row> style={{ width: 307 }}
</Form> 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) { function mapStateToProps (state) {
const { auth, global, members } = state; const { auth, global, members } = state;
return { return {
loading: members.isRequesting, loading: members.isRequesting,
user: auth.user, user: auth.user,
actions: global.actions, actions: global.actions,
members: members.data, members: members.data,
}; };
} }
export default connect(mapStateToProps)(cascadeCamera); 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 [search, setearch] = useState({}); //搜索条件
const [rowId, setRowId] = useState(); //表格数据id const [rowId, setRowId] = useState(); //表格数据id
const [cameraData, setCameraData] = useState({}); //表格数据 const [cameraData, setCameraData] = useState({}); //表格数据
const [modify, setModify] = useState(false); //修改
const [parentCamera, setParentCamera] = useState(""); //级联摄像头父级设备
const { equipmentWarehouse } = actions; const { equipmentWarehouse } = actions;
const api = useRef(); const api = useRef();
const searchb = useRef(search) const searchb = useRef(search)
@ -42,6 +44,8 @@ const CameraHeader = (props) => {
const CAMERAS = "cameras"; const CAMERAS = "cameras";
useEffect(() => { useEffect(() => {
console.log(props)
dispatch(actions.equipmentWarehouse.getVender()).then((res) => { dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
setvenderList(res.payload.data); setvenderList(res.payload.data);
attribute(res.payload.data); attribute(res.payload.data);
@ -53,7 +57,6 @@ const CameraHeader = (props) => {
JSON.stringify(["state", "type", "manufactor"]) JSON.stringify(["state", "type", "manufactor"])
) )
: ""; : "";
console.log(equipmentWarehouseCamera);
}, []); }, []);
useEffect(() => { useEffect(() => {
@ -89,14 +92,14 @@ const CameraHeader = (props) => {
} else { } else {
setearch({ ...searchb.current, externalDomain: row.externalDomain }) setearch({ ...searchb.current, externalDomain: row.externalDomain })
} }
deviceClickb.current=false deviceClickb.current = false
} else { } else {
if (row.type == "nvr") { if (row.type == "nvr") {
setearch({ ...searchb.current, nvrId: null }) setearch({ ...searchb.current, nvrId: null })
} else { } else {
setearch({ ...searchb.current, externalDomain: null }) setearch({ ...searchb.current, externalDomain: null })
} }
deviceClickb.current=true deviceClickb.current = true
} }
}} }}
> >
@ -118,8 +121,19 @@ const CameraHeader = (props) => {
<Button <Button
theme="borderless" theme="borderless"
onClick={() => { onClick={() => {
setCameraModal(true);
setCameraData(row); 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) => { render: (_, r, index) => {
return r.station.length == 0 return r.station.length == 0
? "" ? ""
: r.station.map((item, index) => { : station(r, "name", _, "projects")
return item.structure.projects.length == 0
? ""
: station(
r.station[0].structure.projects[0].name,
item.structure.projects,
"name"
);
});
}, },
}, },
{ {
@ -308,15 +314,7 @@ const CameraHeader = (props) => {
render: (_, r, index) => { render: (_, r, index) => {
return r.station.length == 0 return r.station.length == 0
? "" ? ""
: r.station.map((item, index) => { : station(r, "url", _, "projects")
return item.structure.projects.length == 0
? ""
: station(
r.station[0].structure.projects[0].url,
item.structure.projects,
"url"
);
});
}, },
}, },
{ {
@ -326,7 +324,7 @@ const CameraHeader = (props) => {
render: (_, r, index) => { render: (_, r, index) => {
return r.station.length == 0 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) => { render: (_, r, index) => {
return r.station.length == 0 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) => { render: (_, r, index) => {
return r.station.length == 0 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属性数据的展示 //表格请求数据中station属性数据的展示
function station (first, whole, name) { function station (r, name, data, projects, exhibition) {
return ( return <Popover
<Popover key="updateTime"
key="updateTime" position="top"
position="top" content={
content={ <article style={{ padding: 12 }}>
<article style={{ padding: 12 }}> {projects == "projects" ?
{whole.map((v, index) => { r.station.map((v) => v.structure.projects.length == 0 ? "" : v.structure.projects.map((item, index) => <div key={index}>{item[name]}</div>))
let names = ""; : r.station.map((v, index) => <div key={index}>{exhibition == "structure" ? v.structure.name : exhibition == "point" ? v.name : v.factor.name}</div>)
switch (name) { }
case "name": </article>
names = v[name]; }
break; >
case "url": <Tag>{projects == "projects" && r.station[0].structure.projects.length > 0 ? r.station[0].structure.projects[0][name] : data}...</Tag>
names = v[name]; </Popover>
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>
);
} }
//条件赛选样式 //条件赛选样式
const screen = { const screen = {
@ -724,10 +705,15 @@ const CameraHeader = (props) => {
visible={true} visible={true}
venderList={venderList} venderList={venderList}
cameraData={cameraData} cameraData={cameraData}
modify={modify}
parentCamera={parentCamera}
close={() => { close={() => {
setCameraModal(false); setCameraModal(false);
setCameraData({}); setCameraData({});
setModify(false)
setParentCamera("")
equipmentGetCamera(); equipmentGetCamera();
}} }}
modalName={modalName} 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 [search, setearch] = useState({}); //搜索条件
const [rowId, setRowId] = useState(); //表格数据id const [rowId, setRowId] = useState(); //表格数据id
const [reminder, setReminder] = useState(true); //提醒弹框 const [reminder, setReminder] = useState(false); //提醒弹框
const api = useRef(); const api = useRef();
const SETUPS = "setups"; const SETUPS = "setups";
@ -56,7 +56,6 @@ const NvrHeader = (props) => {
JSON.stringify(["manufactor", "passageway", "port", "state"]) JSON.stringify(["manufactor", "passageway", "port", "state"])
) )
: ""; : "";
// ;
}, []); }, []);
useEffect(() => { useEffect(() => {
@ -218,18 +217,9 @@ const NvrHeader = (props) => {
dataIndex: "", dataIndex: "",
key: "name", key: "name",
render: (_, r, index) => { render: (_, r, index) => {
console.log(r)
return r.station.length == 0 return r.station.length == 0
? "" ? ""
: r.station.map((item, index) => { : station(r, "name", "projects")
return item.structure.projects.length == 0
? ""
: station(
r.station[0].structure.projects[0].name,
item.structure.projects,
"name"
);
});
}, },
}, },
{ {
@ -239,15 +229,7 @@ const NvrHeader = (props) => {
render: (_, r, index) => { render: (_, r, index) => {
return r.station.length == 0 return r.station.length == 0
? "" ? ""
: r.station.map((item, index) => { : station(r, "url", "projects")
return item.structure.projects.length == 0
? ""
: station(
r.station[0].structure.projects[0].url,
item.structure.projects,
"url"
);
});
}, },
}, },
{ {
@ -257,7 +239,7 @@ const NvrHeader = (props) => {
render: (_, r, index) => { render: (_, r, index) => {
return r.station.length == 0 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属性数据的展示 //表格请求数据中station属性数据的展示
function station (first, whole, name) { function station (r, name, projects) {
return ( return <Popover
<Popover key="updateTime"
key="updateTime" position="top"
position="top" content={
content={ <article style={{ padding: 12 }}>
<article style={{ padding: 12 }}> {projects == "projects" ?
{whole.map((v, index) => { r.station.map((v) => v.structure.projects.length == 0 ? "" : v.structure.projects.map((item, index) => <div key={index}>{item[name]}</div>))
let names = ""; : r.station.map((v, index) => <div key={index}>{v.structure[name]}</div>)
switch (name) { }
case "name": </article>
names = v[name]; }
break; >
case "url": <Tag>{projects == "projects" ? r.station[0].structure.projects[0][name] : r.station[0].structure[name]}...</Tag>
names = v[name]; </Popover>
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>
);
} }
//条件赛选样式 //条件赛选样式
@ -621,16 +586,16 @@ const NvrHeader = (props) => {
) : ( ) : (
[] []
)} )}
{/* <ReminderBox <ReminderBox
title="是否继续添加NVR摄像头？" title="是否继续添加NVR摄像头？"
wait="再等等" wait="再等等"
toadd="去添加" toadd="去添加"
visible={reminder} visible={reminder}
onOk={()=>{ onOk={() => {
// dispatch(push('/equipmentWarehouse/camera')); dispatch(push('/equipmentWarehouse/camera/:addNvr=true'));
setReminder(false) setReminder(false)
}} }}
/> */} />
</div> </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摄像头 postCameraNvr: "camera/create/nvr", //记录NVR摄像头
getCascadeSIP: "camera/sip_list/cascade", //获取级联摄像头sip列表 getCascadeSIP: "camera/sip_list/cascade", //获取级联摄像头sip列表
postAddCascade: "camera/create/cascade", //添加级联摄像头 postAddCascade: "camera/create/cascade", //添加级联摄像头
getParentCamera:"camera/cascade_device", //获取级联摄像头父级设备
}; };

Write Preview
Loading…
Cancel
Save