import React, { useState, useRef, useEffect } from "react"; import { connect } from "react-redux"; import { Modal, Spin } from "@douyinfe/semi-ui"; import { IconChevronLeft, IconChevronRight } from "@douyinfe/semi-icons"; import FluoriteCamera from "./fluoriteCamera"; import NvrCamera from "./nvrCamera"; import IpcCamera from "./ipcCamera"; import CascadeCamera from "./cascadeCamera"; import "./cameraModal.less"; 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 左边 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(); } }); }); } } function handleAfterClose () { //在关闭之后 } function handleCancel () { onReset(); //点击弹框取消 左边按钮 } function handleChoose (id) { //选择摄像头接入类型 if (!modify) { setclickNum(id); } } function turnLift () { //轮播图向左 if (!modify) { setcameraList(cameraList.slice(0, 3)); } } function turnRight () { //轮播图向右 if (!modify) { 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 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); }); } } return ( <>
接入类型
{showcameraList.map((item, index) => (
handleChoose(item.id)} > {modify ? item.id == clickNum ? "" :
: ""}
设置
{item.title}
{item.text}
{clickNum === item.id ? (
1
) : ( "" )}
))}
配置属性
{clickNum !== 2 ? (
1 重置
1 测试
) : ( "" )}
{clickNum == 1 ? ( ) : clickNum == 2 ? ( ) : clickNum == 3 ? ( ) : ( )}
); } 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);