From ec2b6fd849af4d2f32bbb331557077ef3d5d8fb0 Mon Sep 17 00:00:00 2001 From: wenlele Date: Tue, 14 Jun 2022 15:30:27 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=BA=A7=E8=81=94=E6=91=84?= =?UTF-8?q?=E5=83=8F=E5=A4=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../equipmentWarehouse/actions/camera.js | 24 + .../components/cameraModal.jsx | 19 +- .../components/cascadeCamera.jsx | 249 ++-- .../components/nvrCamera.jsx | 82 +- .../components/sideSheet.jsx | 20 +- .../equipmentWarehouse/containers/camera.jsx | 1316 ++++++++--------- .../equipmentWarehouse/containers/nvr.jsx | 59 +- .../web/client/src/utils/webapi.js | 2 + 8 files changed, 909 insertions(+), 862 deletions(-) diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js index 2f5c892..dd35adf 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js +++ b/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: "" }, //添加级联摄像头 + }); +} diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx index ba3cf9f..91bccc3 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx +++ b/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 ? ( - + ) : clickNum == 3 ? ( ) : ( - + )} diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx index 725c1be..2ffe25d 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx +++ b/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 { IconEdit,IconPlayCircle } from '@douyinfe/semi-icons'; +import { Form, Row, Col } from "@douyinfe/semi-ui"; + 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, - 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' - } - ])//内存卡列表 - 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,() => ({//传给父组件方法 + id: 5, + value: "128g", + }, + { + id: 6, + value: "256g", + }, + { + id: 7, + value: ">256g", + }, + ]; + + useImperativeHandle(dRef, () => ({ + //传给父组件方法 //子组件暴露给父组件的方法 - cascadeCameraForm : form.current.validate, - resetCascadeCamera : form.current.reset, - setNVRcameraList : setNVRcameraList, - setNvrCheckList : setNvrCheckList, - setIsAllChoose : setIsAllChoose, - })) + cascadeCameraForm: form.current.validate, + resetCascadeCamera: form.current.reset, + })); return ( <> -
{console.log(values);setEquipmentNum(values.equipmentNum)}} - getFormApi={formApi => form.current = formApi}> + labelPosition="left" + labelAlign="left" + labelWidth="115px" + onValueChange={(values) => { + console.log(values); + + }} + getFormApi={(formApi) => (form.current = formApi)} + > - + - - {memoryList.map((item,index)=>( - {item.value} - ))} + + + 上级域 + - - {memoryList.map((item,index)=>( - {item.value} + + {sip.map((item, index) => ( + + {item.streamid} + ))} - - {NVRcameraList.length>0?
- allChoose(e)} - aria-label="全选"> - 全选 - -
:''} - - - - { - setNvrCheckList(nvrCheck); - console.log('11111111111',nvrCheck); - if(NVRcameraList.length==nvrCheck.length){ - setIsAllChoose(true) - } - else{ - setIsAllChoose(false) - } - }}> - {NVRcameraList.length>0?NVRcameraList.map((item,index)=>( - - -
-
通道名称：{item.change?inputchange(e,index)} onBlur={()=>nvronBlur(index)}>:item.name}
-
- NvrChangeName(e,index)}/> -
-
-
设备编号：{item.number}
-
- playVideo(e)}/> - toggle(e,index)} - aria-label="单选" - > - 云台支持 - -
- - } - style={{width:280,border:'1px solid #F9F9F9',}}> - - - )):''} -
@@ -189,4 +120,4 @@ function mapStateToProps(state) { }; } -export default connect(mapStateToProps)(cascadeCamera); \ No newline at end of file +export default connect(mapStateToProps)(cascadeCamera); diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx index 664180c..464c3af 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx +++ b/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; - setNVRcameraList(NvrchangeList); - e.stopPropagation(); + if (!cameraDataNvr || cameraData.name == name) { + NvrchangeList[index].change = true; + 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 }) { allChoose(e)} aria-label="全选" > @@ -189,7 +244,10 @@ function nvrCamera({ dispatch, actions, nvrRef }) { } }} > -
+
{NVRcameraList.length > 0 ? NVRcameraList.map((item, index) => (
NvrChangeName(e, index)} + onClick={(e) => + NvrChangeName(e, index, item.name) + } />
- 设备编号：{item.parent} + 设备编号：{item.streamid}
toggle(e, index)} aria-label="单选" > diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx index 7bd5b36..cdd3a65 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx +++ b/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: "江西省-南昌市-南昌县", - difference: "difference", - }, + { name: "行政区划：", key: "regionCode" }, { 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) {
{nvrDetails @@ -235,7 +232,8 @@ function SideSheets(props) {
{nvrDetails @@ -311,7 +309,7 @@ function SideSheets(props) { - {nvrDetails[item.key]} + {`${nvrDetails[item.key]},${nvrDetails.longitude}`}
); @@ -339,7 +337,7 @@ function SideSheets(props) { - {item.key == "type" + {item.key == "type" ? accessType.find( (v) => v.key == nvrDetails.type ).name diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx index a9addd4..1a06f1e 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx @@ -2,16 +2,16 @@ import React, { useState, useEffect, useRef } from "react"; import { connect } from "react-redux"; import moment from "moment"; import { - Button, - Form, - Input, - Row, - Table, - Pagination, - Popover, - Tag, - Skeleton, - Popconfirm, + Button, + Form, + Input, + Row, + Table, + Pagination, + Popover, + Tag, + Skeleton, + Popconfirm, } from "@douyinfe/semi-ui"; import { SimpleFileDownButton } from "$components"; import "../style.less"; @@ -23,477 +23,477 @@ import { skeletonScreen } from "../components/skeletonScreen"; import { accessType } from "./nvr"; const CameraHeader = (props) => { - const { dispatch, actions, user, loading, equipmentWarehouseCamera } = props; - const [cameraModal, setCameraModal] = useState(false); - const [modalName, setModalName] = useState(""); - const [setup, setSetup] = useState(false); - const [sideSheet, setSideSheet] = useState(false); - const [cameraSetup, setcameraSetup] = useState(false); - const [setupp, setSetupp] = useState([]); - const [venderList, setvenderList] = useState([]); //厂商信息 - const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 - const [search, setearch] = useState({}); //搜索条件 - const [rowId, setRowId] = useState(); //表格数据id - const [cameraData, setCameraData] = useState({}); //表格数据id + const { dispatch, actions, user, loading, equipmentWarehouseCamera } = props; + const [cameraModal, setCameraModal] = useState(false); + const [modalName, setModalName] = useState(""); + const [setup, setSetup] = useState(false); + const [sideSheet, setSideSheet] = useState(false); + const [cameraSetup, setcameraSetup] = useState(false); + const [setupp, setSetupp] = useState([]); + const [venderList, setvenderList] = useState([]); //厂商信息 + const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 + const [search, setearch] = useState({}); //搜索条件 + const [rowId, setRowId] = useState(); //表格数据id + const [cameraData, setCameraData] = useState({}); //表格数据id - const { equipmentWarehouse } = actions; - const api = useRef(); - const CAMERAS = "cameras"; + const { equipmentWarehouse } = actions; + const api = useRef(); + const CAMERAS = "cameras"; - useEffect(() => { - dispatch(actions.equipmentWarehouse.getVender()).then((res) => { - setvenderList(res.payload.data); - attribute(res.payload.data); - }); - //初始化表格显示设置 - localStorage.getItem(CAMERAS) == null - ? localStorage.setItem( - CAMERAS, - JSON.stringify(["state", "type", "manufactor"]) - ) - : ""; - console.log(equipmentWarehouseCamera); - }, []); + useEffect(() => { + dispatch(actions.equipmentWarehouse.getVender()).then((res) => { + setvenderList(res.payload.data); + attribute(res.payload.data); + }); + //初始化表格显示设置 + localStorage.getItem(CAMERAS) == null + ? localStorage.setItem( + CAMERAS, + JSON.stringify(["state", "type", "manufactor"]) + ) + : ""; + console.log(equipmentWarehouseCamera); + }, []); - useEffect(() => { - equipmentGetCamera(); - }, [query, search]); + useEffect(() => { + equipmentGetCamera(); + }, [query, search]); - function equipmentGetCamera() { - dispatch(equipmentWarehouse.getCamera({ ...query, ...search })); - } + function equipmentGetCamera () { + dispatch(equipmentWarehouse.getCamera({ ...query, ...search })); + } + const equipmentStatus = { ON: "在线", ONLINE: "在线", OFF: "离线", Alarmed: "未知状态" } + const columns = [ + { + title: "序号", + render: (text, record, index) => { + return index + 1; + }, + }, + { + title: "设备名称", + dataIndex: "name", + render: (text, record, index) => { + return ( +
+ + {record.name} +
+ ); + }, + }, - const columns = [ - { - title: "序号", - render: (text, record, index) => { - return index + 1; - }, - }, - { - title: "设备名称", - dataIndex: "name", - render: (text, record, index) => { - return ( -
- - {record.name} -
- ); - }, - }, + { + title: "操作", + width: "20%", + dataIndex: "", + render: (_, row) => { + console.log(row); + return ( +
+ + + {row.forbidden ? ( + + ) : ( + { + dispatch( + equipmentWarehouse.putForbidden( + { + cameraId: row.id, + forbidden: !row.forbidden, + }, + row.forbidden + ) + ).then(() => { + equipmentGetCamera(); + }); + }} + > + + + )} - { - title: "操作", - width: "20%", - dataIndex: "", - render: (_, row) => { - console.log(row); - return ( -
- - - {row.forbidden ? ( - - ) : ( - { - dispatch( - equipmentWarehouse.putForbidden( - { - cameraId: row.id, - forbidden: !row.forbidden, - }, - row.forbidden - ) - ).then(() => { - equipmentGetCamera(); - }); - }} - > - - - )} + { + dispatch( + equipmentWarehouse.delCamera(row.id) + ).then(() => { + equipmentGetCamera(); + }); + }} + > + + +
+ ); + }, + }, + ]; - { - dispatch( - equipmentWarehouse.delCamera(row.id ) - ).then(() => { - equipmentGetCamera(); - }); - }} - > - - -
- ); - }, - }, - ]; + //获取表格属性设置 + function attribute (data) { + const arr = localStorage.getItem(CAMERAS) + ? JSON.parse(localStorage.getItem(CAMERAS)) + : []; - //获取表格属性设置 - function attribute(data) { - const arr = localStorage.getItem(CAMERAS) - ? JSON.parse(localStorage.getItem(CAMERAS)) - : []; + const column = [ + { + title: "设备厂家", + dataIndex: "venderId", + key: "manufactor", + render: (_, r, index) => { + let manufactorName = data.find((item) => item.id == r.venderId); + return manufactorName ? manufactorName.name : ""; + }, + }, + { + title: "接入类型", + dataIndex: "cameraAbility.type", + key: "type", + render: (_, r, index) => { + let access = accessType.find((item) => item.key == r.type); + return access ? access.name : ""; + }, + }, + { + title: "设备状态", + dataIndex: "channelCount", + key: "state", + }, + { + title: "云台支持", + dataIndex: "cloudControl", + key: "support", + render: (text, r, index) => { + return r.cloudControl ? "支持" : "不支持"; + }, - const column = [ - { - title: "设备厂家", - dataIndex: "venderId", - key: "manufactor", - render: (_, r, index) => { - let manufactorName = data.find((item) => item.id == r.venderId); - return manufactorName ? manufactorName.name : ""; - }, - }, - { - title: "接入类型", - dataIndex: "cameraAbility.type", - key: "type", - render: (_, r, index) => { - let access = accessType.find((item) => item.key == r.type); - return access ? access.name : ""; - }, - }, - { - title: "设备状态", - dataIndex: "channelCount", - key: "state", - }, - { - title: "云台支持", - dataIndex: "cloudControl", - key: "support", - render: (text, r, index) => { - return r.cloudControl ? "支持" : "不支持"; - }, - - }, - { - title: "内存卡信息", - dataIndex: "memoryCard", - key: "memoryCard", - }, - { - title: "设备创建时间", - dataIndex: "createTime", - key: "time", - render: (text, r, index) => { - return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS"); - }, - }, - { - title: "设备添加账号", - dataIndex: "size", - key: "account", - }, - { - title: "项目名称", - dataIndex: "updateTime", - key: "name", - 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" - ); - }); - }, - }, - { - title: "pcode", - dataIndex: "updateTime", - key: "pcode", - 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" - ); - }); - }, - }, - { - title: "结构物", - dataIndex: "", - key: "structure", - render: (_, r, index) => { - return r.station.length == 0 - ? "" - : station(r.station[0].structure.name, r.station, "structure.name"); - }, - }, - { - title: "测点", - dataIndex: "updateTime", - key: "measuringPoint", - render: (_, r, index) => { - return r.station.length == 0 - ? "" - : station(r.station[0].name, r.station, "name"); - }, - }, - { - title: "监测因素", - dataIndex: "updateTime", - key: "factor", - render: (_, r, index) => { - return r.station.length == 0 - ? "" - : station(r.station[0].factor.name, r.station, "factor.name"); - }, - }, - ]; - for (let i = 0; i < arr.length; i++) { - let colum = column.filter((item) => { - return item.key === arr[i]; - }); - columns.splice(i + 2, 0, colum[0]); + }, + { + title: "内存卡信息", + dataIndex: "memoryCard", + key: "memoryCard", + }, + { + title: "设备创建时间", + dataIndex: "createTime", + key: "time", + render: (text, r, index) => { + return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS"); + }, + }, + { + title: "设备添加账号", + dataIndex: "size", + key: "account", + }, + { + title: "项目名称", + dataIndex: "updateTime", + key: "name", + 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" + ); + }); + }, + }, + { + title: "pcode", + dataIndex: "updateTime", + key: "pcode", + 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" + ); + }); + }, + }, + { + title: "结构物", + dataIndex: "", + key: "structure", + render: (_, r, index) => { + return r.station.length == 0 + ? "" + : station(r.station[0].structure.name, r.station, "structure.name"); + }, + }, + { + title: "测点", + dataIndex: "updateTime", + key: "measuringPoint", + render: (_, r, index) => { + return r.station.length == 0 + ? "" + : station(r.station[0].name, r.station, "name"); + }, + }, + { + title: "监测因素", + dataIndex: "updateTime", + key: "factor", + render: (_, r, index) => { + return r.station.length == 0 + ? "" + : station(r.station[0].factor.name, r.station, "factor.name"); + }, + }, + ]; + for (let i = 0; i < arr.length; i++) { + let colum = column.filter((item) => { + return item.key === arr[i]; + }); + columns.splice(i + 2, 0, colum[0]); + } + setSetupp(columns); } - setSetupp(columns); - } - //表格请求数据中station属性数据的展示 - function station(first, whole, name) { - return ( - - {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
{names}
; - })} - - } - > - {first}... - - ); - } - //条件赛选样式 - const screen = { - width: 193, - marginRight: 20, - marginBottom: 16, - color: "rgba(0, 0, 0, 0.65)", - }; + //表格请求数据中station属性数据的展示 + function station (first, whole, name) { + return ( + + {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
{names}
; + })} + + } + > + {first}... + + ); + } + //条件赛选样式 + const screen = { + width: 193, + marginRight: 20, + marginBottom: 16, + color: "rgba(0, 0, 0, 0.65)", + }; - return ( - <> -
-
+ return ( + <> +
+
-
-
- 筛选条件 -
-
-
console.log(values)} - // onValueChange={values=>console.log(values)} - getFormApi={(formApi) => (api.current = formApi)} - layout="horizontal" - style={{ position: "relative", width: "100%", flex: 1 }} - > - - - {accessType.map((item) => { - return ( - - {item.name} - - ); - })} - - - {venderList.map((item) => { - return ( - - {item.name} - - ); - })} - - - 在线 - 离线 - - {/* + 筛选条件 +
+
+ console.log(values)} + // onValueChange={values=>console.log(values)} + getFormApi={(formApi) => (api.current = formApi)} + layout="horizontal" + style={{ position: "relative", width: "100%", flex: 1 }} + > + + + {accessType.map((item) => { + return ( + + {item.name} + + ); + })} + + + {venderList.map((item) => { + return ( + + {item.name} + + ); + })} + + + 在线 + 离线 + + {/* { 飞尚科技2 */} - -
- - -
-
-
-
-
-
- 设备列表 -
-
- - -
-
- - s)} - dataSource={equipmentWarehouseCamera.data} - bordered={false} - empty="暂无数据" - style={{ - padding: "0px 20px", - }} - pagination={false} - /> - -
- - 共{equipmentWarehouseCamera.total}个设备 - - { - setQuery({ limit: pageSize, page: currentPage - 1 }); - }} - /> -
+ +
+ + +
+ + +
+
+
+ 设备列表 +
+
+ + +
+
+ +
s)} + dataSource={equipmentWarehouseCamera.data} + bordered={false} + empty="暂无数据" + style={{ + padding: "0px 20px", + }} + pagination={false} + /> + +
+ + 共{equipmentWarehouseCamera.total}个设备 + + { + setQuery({ limit: pageSize, page: currentPage - 1 }); + }} + /> +
- {setup ? ( - { - setSetup(false); - attribute(venderList); - setcameraSetup(false); - }} - /> - ) : ( - "" - )} + {setup ? ( + { + setSetup(false); + attribute(venderList); + setcameraSetup(false); + }} + /> + ) : ( + "" + )} - {sideSheet ? ( - { - setSideSheet(false); - setcameraSetup(false); - }} - /> - ) : ( - [] - )} - + {sideSheet ? ( + { + setSideSheet(false); + setcameraSetup(false); + }} + /> + ) : ( + [] + )} + - {cameraModal ? ( - { - setCameraModal(false); - setCameraData({}); - equipmentGetCamera(); - }} - modalName={modalName} - /> - ) : ( - "" - )} - - ); + {cameraModal ? ( + { + setCameraModal(false); + setCameraData({}); + equipmentGetCamera(); + }} + modalName={modalName} + /> + ) : ( + "" + )} + + ); }; -function mapStateToProps(state) { - const { auth, global, members, equipmentWarehouseCamera } = state; - return { - loading: - equipmentWarehouseCamera.isRequesting && !equipmentWarehouseCamera.data, - user: auth.user, - actions: global.actions, - members: members.data, - equipmentWarehouseCamera: equipmentWarehouseCamera.data || [], - }; +function mapStateToProps (state) { + const { auth, global, members, equipmentWarehouseCamera } = state; + return { + loading: + equipmentWarehouseCamera.isRequesting && !equipmentWarehouseCamera.data, + user: auth.user, + actions: global.actions, + members: members.data, + equipmentWarehouseCamera: equipmentWarehouseCamera.data || [], + }; } export default connect(mapStateToProps)(CameraHeader); diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx index 5746439..4114ff7 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx +++ b/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 ( -
- - {r.name} -
- ); + return r.name; }, }, { 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 ( +
+ + {status ? equipmentStatus[status.online] : ""} +
+ ); + }, }, { title: "创建时间", @@ -601,7 +620,7 @@ const NvrHeader = (props) => { ) : ( [] )} - { // dispatch(push('/equipmentWarehouse/camera')); setReminder(false) }} - /> + /> */} ); diff --git a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js b/code/VideoAccess-VCMP/web/client/src/utils/webapi.js index 72a302d..0631522 100644 --- a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js +++ b/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" , //添加级联摄像头 };