从安心云四个摄像头的添加跳转到视频平台对应的摄像头添加 50%

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

@@ -23,7 +23,8 @@ function cameraModal (props) {
         modify,
         parentCamera,
         addNvr,
-        nvrNumber
+        nvrNumber,
+        axyData,
     } = props;
     const { equipmentWarehouse } = actions;
     const fluoriteRef = useRef();
@@ -51,6 +52,9 @@ function cameraModal (props) {
         dispatch(equipmentWarehouse.getCameraKind());
         dispatch(equipmentWarehouse.getAbility());
         cameraData.type == "nvr" || addNvr ? setcameraList(cameraList.slice(1, 4)) : "";
+        // if(){
+            
+        // }
     }, []);
     const cameraList = [
         //循环摄像头列表

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx

@@ -52,6 +52,7 @@ function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber }
                     streamId: cameraDataNvr.serialNo,
                 })
             ).then((res) => {
+                console.log(res)
                 let oneData = res.payload.data[0];
                 let modifyData = res.payload.data.find(
                     (item) => item.camera == null ? false : item.camera.name == cameraData.name
@@ -67,8 +68,8 @@ function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber }
                     ) {
                         item = oneData;
                     }
-                    item.change = false;
-                    item.support = false;
+                    // item.change = false;
+                    // item.support = false;
                     if (item.camera) {
                         item.name = item.camera.name;
                     }

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx

@@ -16,7 +16,6 @@ function SideSheets (props) {
         loading,
         visible,
         close,
-        SETUPS,
         cameraSetup,
         rowId,
         venderList,
@@ -24,7 +23,7 @@ function SideSheets (props) {
     } = props;
     const { equipmentWarehouse } = actions;
     const [clickStyle, setclickStyle] = useState();
-    const [nvrDetails, setNvrDetails] = useState("");
+    const [nvrDetails, setNvrDetails] = useState({ station: [] });
     const list = ["项目名称", "关联结构物", "关联测点", "关联监测因素"];
     const information = {
         nvr: [
@@ -131,6 +130,7 @@ function SideSheets (props) {
         zIndex: 5,
     };
 
+
     useEffect(() => {
         dispatch(
             equipmentWarehouse[cameraSetup ? "getCameraDetails" : "getNvrDetails"](
@@ -160,10 +160,28 @@ function SideSheets (props) {
             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 ? "污水管理出出口" : "智慧设备NVR"}
+            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={() => {
@@ -209,24 +227,26 @@ function SideSheets (props) {
                         }}
                     >
                         {nvrDetails
-                            ? 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>
-                                    );
-                                });
-                            })
+                            ? 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>
@@ -311,7 +331,7 @@ function SideSheets (props) {
                                                         <span
                                                             style={{ fontWeight: "400", color: " #34383E" }}
                                                         >
-                                                            {`${nvrDetails[item.key]},${nvrDetails.longitude}`}
+                                                            {nvrDetails.latitude ? `${nvrDetails[item.key]},${nvrDetails.longitude}` : "未知"}
                                                         </span>
                                                     </div>
                                                 );
@@ -340,17 +360,15 @@ function SideSheets (props) {
                                                             style={{ fontWeight: "400", color: " #34383E" }}
                                                         >
                                                             {item.key == "type"
-                                                                ? accessType.find(
+                                                                ? nvrDetails.type ? accessType.find(
                                                                     (v) => v.key == nvrDetails.type
-                                                                ).name
+                                                                ).name : ""
                                                                 : item.key == "venderId"
-                                                                    ? nvrDetails.venderId
-                                                                        ? venderList.find(
-                                                                            (v) => v.id == nvrDetails.venderId
-                                                                        ).name
-                                                                        : ""
+                                                                    ? nvrDetails.venderId ? venderList.find(
+                                                                        (v) => v.id == nvrDetails.venderId
+                                                                    ).name : "未知"
                                                                     : item.key == "createUser"
-                                                                        ? nvrDetails.createUser.namePresent
+                                                                        ? nvrDetails.createUser ? nvrDetails.createUser.namePresent : ""
                                                                         : item.key == "createTime"
                                                                             ? moment(nvrDetails.createTime).format(
                                                                                 "YYYY-MM-DD HH:MM:SS"
@@ -385,7 +403,6 @@ function SideSheets (props) {
                                                             }}
                                                             onClick={() => {
                                                                 copy(item.name);
-                                                                // alert("复制成功");
                                                                 setclickStyle(item.name);
                                                             }}
                                                         >
@@ -440,7 +457,7 @@ function SideSheets (props) {
                                                                     color: " #34383E",
                                                                 }}
                                                             >
-                                                                {item.difference == "difference" ? nvrDetails[item.key] : nvrDetails.accessInfo[item.key]}
+                                                                {item.difference == "difference" ? nvrDetails[item.key] : nvrDetails.accessInfo ? nvrDetails.accessInfo[item.key] : ""}
                                                             </span>
                                                         </div>
                                                     );
@@ -451,7 +468,7 @@ function SideSheets (props) {
                                     }
                                     //摄像头信息/复制回收地址
                                     if (index == 2) {
-                                        (cameraSetup ? item.recovery : nvrDetails.camera).map(
+                                        (cameraSetup ? item.recovery : nvrDetails.camera ? nvrDetails.camera : []).map(
                                             (item, index) => {
                                                 if (cameraSetup) {
                                                     str.push(

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
 import moment from "moment";
+import qs from "qs";
 import {
     Button,
     Form,
@@ -25,6 +26,7 @@ import { accessType } from "./nvr";
 const CameraHeader = (props) => {
     const { dispatch, actions, user, loading, equipmentWarehouseCamera } = props;
     const [cameraModal, setCameraModal] = useState(false);
+    const [videoPlay, setVideoPlay] = useState(false);
     const [modalName, setModalName] = useState("");
     const [setup, setSetup] = useState(false);
     const [sideSheet, setSideSheet] = useState(false);
@@ -39,6 +41,7 @@ const CameraHeader = (props) => {
     const [parentCamera, setParentCamera] = useState(""); //级联摄像头父级设备
     const [addNvr, setAddNvr] = useState(false); //nvr页面传递参数打开NVR摄像头添加弹框
     const [nvrNumber, setNvrNumber] = useState();
+    const [axyData, setAxyData] = useState();
     const { equipmentWarehouse } = actions;
     const api = useRef();
     const searchb = useRef(search)
@@ -47,13 +50,19 @@ const CameraHeader = (props) => {
 
     useEffect(() => {
         console.log(props)
+        //安心云传参
+        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);
@@ -74,8 +83,31 @@ const CameraHeader = (props) => {
     function equipmentGetCamera () {
         dispatch(equipmentWarehouse.getCamera({ ...query, ...search }));
     }
-    const equipmentStatus = { ON: "在线", ONLINE: "在线", OFF: "离线", Alarmed: "未知状态" }
+    function equipmentStatus (data) {
+        switch (data) {
+            case "ON":
+                return "在线"
+            case "ONLINE":
+                return "在线"
+            case "OFF":
+                return "离线"
+            default:
+                return "未知"
+        }F
+    }
 
+    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: "序号",
@@ -123,6 +155,7 @@ const CameraHeader = (props) => {
             width: "20%",
             dataIndex: "",
             render: (_, row) => {
+                console.log(row)
                 return (
                     <div style={{ display: "flex" }}>
                         <Button
@@ -144,7 +177,20 @@ const CameraHeader = (props) => {
                             }}
                         >
                             修改
+
                         </Button>
+
+                        {/* <Button onClick={() => {     //aa开始为true
+                                 if(aa){
+                                    显示注记的方法
+                                    aa=false
+                                 }else{
+                                    隐藏注记的方法
+                                    aa=true
+                                 }
+                            }}>
+                                {aa?"显示注记":"隐藏注记"}    
+                            </Button> */}
                         <Button
                             theme="borderless"
                             onClick={() => {
@@ -158,7 +204,8 @@ const CameraHeader = (props) => {
                         <Button
                             theme="borderless"
                             onClick={() => {
-                                setRowId(row.id);
+                                // setRowId(row.id);
+                                setVideoPlay(true)
                             }}
                         >
                             播放
@@ -256,6 +303,24 @@ const CameraHeader = (props) => {
                 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: "云台支持",
@@ -696,6 +761,7 @@ const CameraHeader = (props) => {
                     addNvr={addNvr}
                     nvrNumber={nvrNumber}
                     parentCamera={parentCamera}
+                    axyData={axyData}
                     close={() => {
                         setCameraModal(false);
                         setCameraData({});
@@ -703,6 +769,7 @@ const CameraHeader = (props) => {
                         setParentCamera("")
                         setAddNvr(false)
                         setNvrNumber("")
+                        setAxyData("")
                         equipmentGetCamera();
                     }}
                     modalName={modalName}
@@ -710,8 +777,13 @@ const CameraHeader = (props) => {
             ) : (
                 ""
             )}
-            {
-                // <VideoPlayModal visible={true} />
+            {videoPlay ?
+                <VideoPlayModal
+                    visible={true}
+                    close={() => {
+                        setVideoPlay(false)
+                    }} />
+                : ""
             }
         </>
     );

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

@@ -45,7 +45,6 @@ const NvrHeader = (props) => {
     const nvrRef = useRef();  //获取子组件的设备编号
 
     useEffect(() => {
-        console.log(props)
         dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
             setvenderList(res.payload.data);
             attribute(res.payload.data);
@@ -67,28 +66,31 @@ const NvrHeader = (props) => {
         dispatch(equipmentWarehouse.getNvr({ ...query, ...search }));
     }
 
-    const equipmentStatus = {
-        ON: "在线",
-        ONLINE: "在线",
-        OFF: "离线",
-        Alarmed: "未知",
-    };
-
-    const colorStatus = {
-        ON: "#04B234",
-        ONLINE: "#04B234",
-        OFF: "rgba(0, 0, 0, 0.45)",
-        Alarmed: "#1859C1",
-    };
-    // function colorStatus (data) {
-    //     switch (data) {
-    //         case ON || ONLINE:
-    //             break;
-    //         default:
-    //             break;
-    //     }
+    function equipmentStatus (data) {
+        switch (data) {
+            case "ON":
+                return "在线"
+            case "ONLINE":
+                return "在线"
+            case "OFF":
+                return "离线"
+            default:
+                return "未知"
+        }F
+    }
 
-    // }
+    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: "序号",
@@ -205,11 +207,11 @@ const NvrHeader = (props) => {
                                     height: 8,
                                     display: "inline-block",
                                     borderRadius: "50%",
-                                    backgroundColor: colorStatus[status.online],
+                                    backgroundColor: status ?colorStatus(status.online):"",
                                     margin: "0 8px 0 0",
                                 }}
                             />
-                            {status ? equipmentStatus[status.online] : ""}
+                            {status ? equipmentStatus(status.online) : ""}
                         </div>
                     );
                 },

code/VideoAccess-VCMP/web/package.json

@@ -64,6 +64,7 @@
       "moment": "^2.29.3",
       "npm": "^7.20.6",
       "perfect-scrollbar": "^1.5.5",
+      "qs": "^6.10.5",
       "screenfull": "5.2.0",
       "socket.io-client": "^4.5.0",
       "socket.io-parser": "^4.2.0",