添加级联摄像头

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

@@ -125,3 +125,27 @@ export function postCameraNvr(data) {
       msg: { option: "" }, //记录NVR摄像头
     });
 }
+
+export function getCascadeSIP() {
+  return (dispatch) =>
+    basicAction({
+      type: "get",
+      dispatch: dispatch,
+      actionType: "GET_CASCADE_SIP",
+      url: `${ApiTable.getCascadeSIP}`,
+      msg: { option: "" }, //获取级联摄像头sip列表
+    });
+}
+
+
+export function postAddCascade(data) {
+  return (dispatch) =>
+    basicAction({
+      type: "post",
+      dispatch: dispatch,
+      data,
+      actionType: "POST_ADD_CASCADE",
+      url: `${ApiTable.postAddCascade}`,
+      msg: { option: "" }, //添加级联摄像头
+    });
+}

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

@@ -44,6 +44,7 @@ function cameraModal(props) {
   useEffect(() => {
     dispatch(equipmentWarehouse.getCameraKind());
     dispatch(equipmentWarehouse.getAbility());
+    cameraData.type == "nvr" ? setcameraList(cameraList.slice(1, 4)) : "";
   }, []);
   const cameraList = [
     //循环摄像头列表
@@ -124,8 +125,16 @@ function cameraModal(props) {
         });
       });
     } else if (clickNum == 4) {
-      console.log("44444444444444");
+      //级联摄像头
-      close();
+      cascadeRef.current.cascadeCameraForm().then((values) => {
+        console.log(values);
+        dispatch(equipmentWarehouse.postAddCascade(values)).then((res) => {
+          console.log(res);
+          if (res.success) {
+            onReset();
+          }
+        });
+      });
     }
   }
   function handleAfterClose() {
@@ -157,6 +166,7 @@ function cameraModal(props) {
       ipcRef.current.toempty();
       close();
     } else if (clickNum == 4) {
+      cascadeRef.current.resetCascadeCamera();
       close();
     } else {
       nvrRef.current.resetFluoriteCamera();
@@ -172,6 +182,7 @@ function cameraModal(props) {
       ipcRef.current.resetIpcCamera();
       ipcRef.current.toempty();
     } else if (clickNum == 4) {
+      cascadeRef.current.resetCascadeCamera();
     } else {
       nvrRef.current.resetFluoriteCamera();
     }
@@ -459,7 +470,7 @@ function cameraModal(props) {
                 cameraData={cameraData}
               />
             ) : clickNum == 2 ? (
-              <NvrCamera nvrRef={nvrRef} />
+              <NvrCamera nvrRef={nvrRef} cameraData={cameraData} />
             ) : clickNum == 3 ? (
               <IpcCamera
                 aRef={ipcRef}
@@ -469,7 +480,7 @@ function cameraModal(props) {
                 cameraData={cameraData}
               />
             ) : (
-              <CascadeCamera dRef={cascadeRef} />
+              <CascadeCamera dRef={cascadeRef} cameraData={cameraData} />
             )}
           </div>
         </Spin>

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

@@ -1,179 +1,110 @@
-import React, { useState ,useRef,useEffect,useImperativeHandle} from 'react'
+import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
 import { connect } from "react-redux";
-import { Form,Row,Col,CheckboxGroup, Checkbox,Radio,Input } from '@douyinfe/semi-ui';
+import { Form, Row, Col } from "@douyinfe/semi-ui";
-import { IconEdit,IconPlayCircle } from '@douyinfe/semi-icons';
+
 import "./cameraModal.less";
-function cascadeCamera({dRef}){
+function cascadeCamera({ dRef, dispatch, actions }) {
   const form = useRef();
-  const [memoryList,setMemoryList] = useState([
+  const { equipmentWarehouse } = actions;
+  const [sip, setSip] = useState([]);
+
+  useEffect(() => {
+    dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => {
+      console.log(res)
+      setSip(res.payload.data);
+    });
+  }, []);
+
+  //内存卡列表
+  const memoryList = [
+    {
+      id: 1,
+      value: "8g",
+    },
+    {
+      id: 2,
+      value: "16g",
+    },
+    {
+      id: 3,
+      value: "32g",
+    },
+    {
+      id: 4,
+      value: "64g",
+    },
     {
-      id:1,
+      id: 5,
-      value:'8g'
+      value: "128g",
-    },{
+    },
-      id:2,
+    {
-      value:'16g'
+      id: 6,
-    },{
+      value: "256g",
-      id:3,
+    },
-      value:'32g'
+    {
-    },{
+      id: 7,
-      id:4,
+      value: ">256g",
-      value:'64g'
+    },
-    },{
+  ];
-      id:5,
+
-      value:'128g'
+  useImperativeHandle(dRef, () => ({
-    },{
+    //传给父组件方法
-      id:6,
-      value:'256g'
-    },{
-      id:7,
-      value:'>256g'
-    }
-  ])//内存卡列表
-  const [nvrCheckList, setNvrCheckList] = useState([]);//nvr视频流多选
-  const [NVRcameraList,setNVRcameraList]=useState([])//nvr视频流列表
-  const [isAllChoose,setIsAllChoose]=useState(false)//全选
-  const [equipmentNum,setEquipmentNum]=useState('')//nvr视频编号
-  function NvrChangeName(e,index){//nvr摄像头视频流获取修改名称
-    let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList))
-    NvrchangeList[index].change=true
-    setNVRcameraList(NvrchangeList)
-    e.stopPropagation()
-  }
-  function nvronBlur(index){//nvr摄像头名称修改失去焦点
-    let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList))
-    NvrchangeList[index].change=false
-    setNVRcameraList(NvrchangeList)
-  }
-  function inputchange(e,index){//nvr摄像头名称修改
-    let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList))
-    NvrchangeList[index].name=e
-    setNVRcameraList(NvrchangeList)
-  } 
-  function toggle(e,index){//nvr云台支持
-    let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList))
-    NvrchangeList[index].support=e.target.checked
-    setNVRcameraList(NvrchangeList)
-    e.stopPropagation()
-  }
-  function allChoose(e){//全选/全不选
-    let chooseList=[]
-    if(NVRcameraList.length==nvrCheckList.length){
-      setNvrCheckList([])
-      setIsAllChoose(false)
-    }
-    else{
-      for (let index = 0; index < NVRcameraList.length; index++) {
-        chooseList.push(NVRcameraList[index].id)
-      }
-      setNvrCheckList(chooseList)
-      setIsAllChoose(true)
-    }
-  }
-  function playVideo(e) {//nvr播放视频
-    console.log('22222222222222222');
-    e.stopPropagation()
-  }
-  useImperativeHandle(dRef,() => ({//传给父组件方法
     //子组件暴露给父组件的方法
-    cascadeCameraForm : form.current.validate,
+    cascadeCameraForm: form.current.validate,
-    resetCascadeCamera : form.current.reset,
+    resetCascadeCamera: form.current.reset,
-    setNVRcameraList : setNVRcameraList,
+  }));
-    setNvrCheckList : setNvrCheckList,
-    setIsAllChoose : setIsAllChoose,
-  }))
   return (
     <>
       <Form
         allowEmpty
-        labelPosition='left'
+        labelPosition="left"
-        labelAlign='left'
+        labelAlign="left"
-        labelWidth= '115px'
+        labelWidth="115px"
-        onValueChange={values=>{console.log(values);setEquipmentNum(values.equipmentNum)}}
+        onValueChange={(values) => {
-        getFormApi={formApi => form.current = formApi}>
+          console.log(values);
+          
+        }}
+        getFormApi={(formApi) => (form.current = formApi)}
+      >
         <Row>
           <Col span={12}>
-            <Form.Input field='foreignDomainName' label='外域名称:' initValue={''} placeholder='请输入外域名称' style={{ width:307 }}
+            <Form.Input
-            rules={[
+              field="externalDomain"
-              { required: true, message: '请输入外域名称' }
+              label="外域名称:"
-            ]}/>
+              initValue={""}v
+              placeholder="请输入外域名称"
+              style={{ width: 307 }}
+              rules={[{ required: true, message: "请输入外域名称" }]}
+            />
           </Col>
           <Col span={12}>
-            <Form.Select label="级联方式:" field='cascadeMode' placeholder='请选择级联方式' style={{ width:307 }}
+            <Form.Select
-            rules={[
+              label="级联方式:"
-              { required: true, message: '请选择输入级联方式' }
+              field="cascadeType"
-            ]}>
+              initValue="上级域"
-              {memoryList.map((item,index)=>(
+              style={{ width: 307 }}
-                <Form.Select.Option key={index} value={item.id}>{item.value}</Form.Select.Option>
+              rules={[{ required: true, message: "请选择输入级联方式" }]}
-              ))}
+            >
+              <Form.Select.Option value="上级域">
+                上级域
+              </Form.Select.Option>
             </Form.Select>
           </Col>
           <Col span={12}>
-            <Form.Select label="SIP编号:" field='sipNum' placeholder='请选择SIP编号' style={{ width:307 }}
+            <Form.Select
-            rules={[
+              label="SIP编号:"
-              { required: true, message: '请选择SIP编号' }
+              field="sip"
-            ]}>
+              placeholder="请选择SIP编号"
-              {memoryList.map((item,index)=>(
+              style={{ width: 307 }}
-                <Form.Select.Option key={index} value={item.id}>{item.value}</Form.Select.Option>
+              rules={[{ required: true, message: "请选择SIP编号" }]}
+            >
+              {sip.map((item, index) => (
+                <Form.Select.Option key={index} value={item.streamid}>
+                  {item.streamid}
+                </Form.Select.Option>
               ))}
             </Form.Select>
           </Col>
-          <Col span={24}>
-            {NVRcameraList.length>0?<div style={{display: 'flex',alignItems: 'center',justifyContent: 'flex-end',marginRight:19}}>
-              <Radio 
-                checked={isAllChoose}
-                mode="advanced"
-                onChange={e=>allChoose(e)}
-                aria-label="全选">
-                全选
-              </Radio>
-            </div>:''} 
-            </Col>
-        </Row>
-        <Row>
-          <CheckboxGroup type='pureCard' direction='vertical' aria-label="视频流获取" 
-          value={nvrCheckList}
-            onChange={(nvrCheck) => {
-              setNvrCheckList(nvrCheck);
-              console.log('11111111111',nvrCheck);
-              if(NVRcameraList.length==nvrCheck.length){
-                setIsAllChoose(true)
-              }
-              else{
-                setIsAllChoose(false)
-              }
-          }}>
-          {NVRcameraList.length>0?NVRcameraList.map((item,index)=>(
-            <Col key={index} span={12} style={{display:'flex',justifyContent:'center',marginTop:12}}>
-                <Checkbox value={item.id} 
-                extra={
-                  <div>
-                    <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',height:30}}>
-                      <div>通道名称：{item.change?<Input autofocus style={{width:100}} value={item.name} onChange={e=>inputchange(e,index)} onBlur={()=>nvronBlur(index)}></Input>:item.name}</div>
-                      <div style={{display:'flex',alignItems:'center'}}>
-                        <IconEdit 
-                        style={{fontSize:16,marginLeft:18,cursor: "pointer",color:'#1859C1'}}
-                        onClick={e=>NvrChangeName(e,index)}/>
-                      </div>
-                    </div>
-                    <div style={{marginTop:8,width:246}}>设备编号：{item.number}</div>
-                    <div style={{marginTop:12,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
-                      <IconPlayCircle size='extra-large' style={{color:'#1859C1',}} onClick={e=>playVideo(e)}/>
-                      <Radio 
-                          checked={item.support}
-                          mode="advanced"
-                          onChange={e=>toggle(e,index)}
-                          aria-label="单选"
-                      >
-                          云台支持
-                      </Radio>
-                    </div>
-                  </div>
-                } 
-                style={{width:280,border:'1px solid #F9F9F9',}}>
-                </Checkbox>
-            </Col>
-          )):''}
-          </CheckboxGroup>
         </Row>
       </Form>
     </>

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

@@ -13,10 +13,12 @@ import {
 import { IconEdit, IconPlayCircle } from "@douyinfe/semi-icons";
 import "./cameraModal.less";
 import PerfectScrollbar from "perfect-scrollbar";
+import { isIndexed } from "immutable";
 
 let equipmentScrollbar;
-function nvrCamera({ dispatch, actions, nvrRef }) {
+function nvrCamera({ dispatch, actions, nvrRef, cameraData }) {
   const { equipmentWarehouse } = actions;
+  const cameraDataNvr = cameraData.nvr || "";
   const form = useRef();
   const [nvrCheckList, setNvrCheckList] = useState([]); //nvr视频流多选
   const [NVRcameraList, setNVRcameraList] = useState([]); //nvr视频流列表
@@ -36,12 +38,54 @@ function nvrCamera({ dispatch, actions, nvrRef }) {
       equipmentScrollbar.update();
     }
   });
-  function NvrChangeName(e, index) {
+  useEffect(() => {
+    cameraDataNvr
+      ? dispatch(
+          equipmentWarehouse.getVideoStreaming({
+            streamId: cameraDataNvr.serialNo,
+          })
+        ).then((res) => {
+          let oneData = res.payload.data[0];
+
+          let modifyData = res.payload.data.find(
+            (item) => item.camera.name == cameraData.name
+          );
+          console.log(oneData);
+          console.log(modifyData);
+          let data = res.payload.data.map((item, index) => {
+            if (index == 0) {
+              item = modifyData;
+            }
+            if (
+              item.camera
+                ? item.camera.name == cameraData.name && index > 0
+                : index < 0
+            ) {
+              item = oneData;
+            }
+            item.change = false;
+            item.support = false;
+            if (item.camera) {
+              item.name = item.camera.name;
+            }
+
+            return item;
+          });
+          console.log(data);
+          setNVRcameraList(data);
+
+          setNvrCheckList([data[0].id]);
+        })
+      : "";
+  }, []);
+  function NvrChangeName(e, index, name) {
     //nvr摄像头视频流获取修改名称
     let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList));
-    NvrchangeList[index].change = true;
+    if (!cameraDataNvr || cameraData.name == name) {
-    setNVRcameraList(NvrchangeList);
+      NvrchangeList[index].change = true;
-    e.stopPropagation();
+      setNVRcameraList(NvrchangeList);
+      e.stopPropagation();
+    }
   }
   function nvronBlur(index) {
     //nvr摄像头名称修改失去焦点
@@ -58,7 +102,9 @@ function nvrCamera({ dispatch, actions, nvrRef }) {
   }
   function toggle(e, index) {
     //nvr云台支持
+    console.log(e)
     let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList));
+    console.log(NvrchangeList)
     NvrchangeList[index].support = e.target.checked;
     setNVRcameraList(NvrchangeList);
     e.stopPropagation();
@@ -112,11 +158,18 @@ function nvrCamera({ dispatch, actions, nvrRef }) {
     console.log("22222222222222222");
     e.stopPropagation();
   }
+  function onDisabled(name) {
+    if ((cameraDataNvr && cameraData.name == name) || !cameraDataNvr) {
+      return false;
+    } else {
+      return true;
+    }
+  }
   useImperativeHandle(nvrRef, () => ({
     //传给父组件方法
     //aa即为子组件暴露给父组件的方法
     resetFluoriteCamera: form.current.reset,
-    equipmentNum: equipmentNum,
+    equipmentNum: cameraDataNvr ? cameraDataNvr.serialNo : equipmentNum,
     NVRcameraList: NVRcameraList.filter((v) =>
       nvrCheckList.some((e) => e == v.id)
     ),
@@ -138,7 +191,8 @@ function nvrCamera({ dispatch, actions, nvrRef }) {
             field="serialNo"
             maxLength="39"
             label="设备编号:"
-            initValue={""}
+            disabled={cameraDataNvr ? true : false}
+            initValue={cameraDataNvr ? cameraDataNvr.serialNo : ""}
             placeholder="请输入设备编号"
             style={{ width: 307 }}
             rules={[
@@ -164,6 +218,7 @@ function nvrCamera({ dispatch, actions, nvrRef }) {
               <Radio
                 checked={isAllChoose}
                 mode="advanced"
+                disabled={cameraDataNvr ? true : false}
                 onChange={(e) => allChoose(e)}
                 aria-label="全选"
               >
@@ -189,7 +244,10 @@ function nvrCamera({ dispatch, actions, nvrRef }) {
               }
             }}
           >
-            <div id="video_streaming" style={{ maxHeight: 300,position: "relative"}}>
+            <div
+              id="video_streaming"
+              style={{ maxHeight: 300, position: "relative" }}
+            >
               {NVRcameraList.length > 0
                 ? NVRcameraList.map((item, index) => (
                     <Col
@@ -203,6 +261,7 @@ function nvrCamera({ dispatch, actions, nvrRef }) {
                     >
                       <Checkbox
                         value={item.id}
+                        disabled={onDisabled(item.name)}
                         extra={
                           <div>
                             <div
@@ -240,12 +299,14 @@ function nvrCamera({ dispatch, actions, nvrRef }) {
                                     cursor: "pointer",
                                     color: "#1859C1",
                                   }}
-                                  onClick={(e) => NvrChangeName(e, index)}
+                                  onClick={(e) =>
+                                    NvrChangeName(e, index, item.name)
+                                  }
                                 />
                               </div>
                             </div>
                             <div style={{ marginTop: 8, width: 246 }}>
-                              设备编号：{item.parent}
+                              设备编号：{item.streamid}
                             </div>
                             <div
                               style={{
@@ -263,6 +324,7 @@ function nvrCamera({ dispatch, actions, nvrRef }) {
                               <Radio
                                 checked={item.support}
                                 mode="advanced"
+                                disabled={onDisabled(item.name)}
                                 onChange={(e) => toggle(e, index)}
                                 aria-label="单选"
                               >

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

@@ -37,14 +37,10 @@ function SideSheets(props) {
           { name: "厂商：", key: "venderId" },
           { name: "添加账号：", key: "createUser" },
           { name: "添加时间：", key: "createTime" },
-          {
+          { name: "行政区划：", key: "regionCode" },
-            name: "行政区别：",
-            key: "江西省-南昌市-南昌县",
-            difference: "difference",
-          },
           {
             name: "设备安装位置：",
-            key: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
+            key: "latitude",
             difference: "line",
           },
         ],
@@ -94,7 +90,7 @@ function SideSheets(props) {
           { name: "添加时间：", key: "createTime" },
           {
             name: "设备安装位置：",
-            key: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
+            key: "latitude",
             difference: "line",
           },
         ],
@@ -206,7 +202,8 @@ function SideSheets(props) {
           <div
             id="project_information"
             style={{
-              height: document.body.clientHeight - 182,position: "relative"
+              height: document.body.clientHeight - 182,
+              position: "relative",
             }}
           >
             {nvrDetails
@@ -235,7 +232,8 @@ function SideSheets(props) {
           <div
             id="equipment_information"
             style={{
-              height: document.body.clientHeight - 126,position: "relative"
+              height: document.body.clientHeight - 126,
+              position: "relative",
             }}
           >
             {nvrDetails
@@ -311,7 +309,7 @@ function SideSheets(props) {
                               <span
                                 style={{ fontWeight: "400", color: " #34383E" }}
                               >
-                                {nvrDetails[item.key]}
+                                {`${nvrDetails[item.key]},${nvrDetails.longitude}`}
                               </span>
                             </div>
                           );

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
-import { push } from 'react-router-redux';
+import { push } from "react-router-redux";
 import moment from "moment";
 import {
   Button,
@@ -42,8 +42,6 @@ const NvrHeader = (props) => {
   const [rowId, setRowId] = useState(); //表格数据id
   const [load, setLoad] = useState(); //骨架屏是否显现
   const [reminder, setReminder] = useState(true); //提醒弹框
-
-
   const api = useRef();
   const SETUPS = "setups";
 
@@ -69,6 +67,19 @@ const NvrHeader = (props) => {
   function equipmentGetNvr() {
     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",
+  };
   const columns = [
     {
       title: "序号",
@@ -80,26 +91,16 @@ const NvrHeader = (props) => {
       title: "设备名称",
       dataIndex: "name",
       render: (text, r, index) => {
-        return (
+        return r.name;
-          <div>
-            <span
-              style={{
-                backgroundColor: r.avatarBg,
-                width: "10px",
-                height: "10px",
-                borderRadius: "50%",
-                display: "inline-block",
-                marginRight: "10px",
-              }}
-            />
-            {r.name}
-          </div>
-        );
       },
     },
     {
       title: "SIP地址",
       dataIndex: "owner",
+      render: (text, r, index) => {
+        let sipState = r.gbNvr;
+        return sipState ? sipState.sipip : "";
+      },
     },
     {
       title: "操作",
@@ -186,6 +187,24 @@ const NvrHeader = (props) => {
         title: "设备状态",
         dataIndex: "size",
         key: "state",
+        render: (_, r, index) => {
+          let status = r.gbNvr;
+          return (
+            <div>
+              <span
+                style={{
+                  width: 8,
+                  height: 8,
+                  display: "inline-block",
+                  borderRadius: "50%",
+                  backgroundColor: colorStatus[status.online],
+                  margin: "0 8px 0 0",
+                }}
+              />
+              {status ? equipmentStatus[status.online] : ""}
+            </div>
+          );
+        },
       },
       {
         title: "创建时间",
@@ -601,7 +620,7 @@ const NvrHeader = (props) => {
         ) : (
           []
         )}
-        <ReminderBox
+        {/* <ReminderBox
           title="是否继续添加NVR摄像头？"
           wait="再等等"
           toadd="去添加"
@@ -610,7 +629,7 @@ const NvrHeader = (props) => {
             // dispatch(push('/equipmentWarehouse/camera'));
             setReminder(false)
           }}
-        />
+        /> */}
       </div>
     </>
   );

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

@@ -27,6 +27,8 @@ export const ApiTable = {
   postCameraIpc: "camera/create/ipc", //创建IPC摄像头
   getVideoStreaming:"camera/nvr_stream",  //获取NVR视频流
   postCameraNvr:"camera/create/nvr",  //记录NVR摄像头
+  getCascadeSIP:"camera/sip_list/cascade",  //获取级联摄像头sip列表
+  postAddCascade:"camera/create/cascade" ,  //添加级联摄像头
 
 };