diff --git a/code/VideoAccess-VCMP/web/.vscode/settings.json b/code/VideoAccess-VCMP/web/.vscode/settings.json index f5f67f5..d365bb1 100644 --- a/code/VideoAccess-VCMP/web/.vscode/settings.json +++ b/code/VideoAccess-VCMP/web/.vscode/settings.json @@ -1,4 +1,4 @@ // 将设置放入此文件中以覆盖默认值和用户设置。 { - "editor.fontSize": 16, + "editor.fontSize": 12, } \ No newline at end of file diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/Reset.png b/code/VideoAccess-VCMP/web/client/assets/images/background/Reset.png new file mode 100644 index 0000000..daa37b8 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/background/Reset.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/cascade.png b/code/VideoAccess-VCMP/web/client/assets/images/background/cascade.png new file mode 100644 index 0000000..4ea4de5 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/background/cascade.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/formchoose.png b/code/VideoAccess-VCMP/web/client/assets/images/background/formchoose.png new file mode 100644 index 0000000..6dc2dfe Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/background/formchoose.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/ipc.png b/code/VideoAccess-VCMP/web/client/assets/images/background/ipc.png new file mode 100644 index 0000000..e5efb11 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/background/ipc.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/nvr.png b/code/VideoAccess-VCMP/web/client/assets/images/background/nvr.png new file mode 100644 index 0000000..d9cb1e3 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/background/nvr.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/test.png b/code/VideoAccess-VCMP/web/client/assets/images/background/test.png new file mode 100644 index 0000000..48096a0 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/background/test.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/topchoose.png b/code/VideoAccess-VCMP/web/client/assets/images/background/topchoose.png new file mode 100644 index 0000000..44c8165 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/background/topchoose.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/ysy.png b/code/VideoAccess-VCMP/web/client/assets/images/background/ysy.png new file mode 100644 index 0000000..243d245 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/background/ysy.png differ 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 new file mode 100644 index 0000000..0d19d87 --- /dev/null +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx @@ -0,0 +1,202 @@ +import React, { useState ,useRef} from 'react' +import { Modal,Form,Row,Col,Spin,Notification,Button } from '@douyinfe/semi-ui'; +import { IconChevronLeft,IconChevronRight } from '@douyinfe/semi-icons'; +function nvrModal(props){ + const {modalName,visible,close}=props + const form = useRef(); + // const [visible, setVisible] = useState(false);//是否显示弹框 + const [isloading,setloading] = useState(false);//是否显示loading + const [loadingTip,setloadingTip] = useState('获取中...请稍后...');//loading tip的值 + const [step,setstep] = useState(0)//第几步 + const [okText,setokText] = useState('测试校验')//ok弹框text 右边 + const [cancelText,setcancelText] = useState('取消')//取消弹框text 左边 + const opts ={//添加完成确认后通知 + title:'Hi', + content:'添加成功', + duration:3 + } + const [clickNum,setclickNum] = useState(1);//点击的第几个 + const cameraList=[//循环摄像头列表 + { + id:1, + img:'/assets/images/background/ysy.png', + title:'萤石云平台摄像头', + text:'通过萤石云平台rtmp地址配置完成推流的平台摄像头。' + },{ + id:2, + img:'/assets/images/background/nvr.png', + title:'NVR摄像头', + text:'通过连接NVR(网络硬盘录像机)进行视频流推送的摄像头' + },{ + id:3, + img:'/assets/images/background/ipc.png', + title:'IPC网络摄像头', + text:'通过网络与监控设备直连完成视频流推送的摄像头设备' + },{ + id:4, + img:'/assets/images/background/cascade.png', + title:'级联摄像头', + text:'通过GB/T28181协议级联的平台摄像头，常用于平台对接推送' + }, + ] + const [showcameraList,setcameraList]=useState(cameraList.slice(0,3)); + function handleOk() {//点击弹框确定 右边按钮 + if(step==0){ + form.current.validate() + .then(values=>{//表单校验成功 + setloading(true); + setTimeout(() => { + setloadingTip('...接受成功') + setTimeout(()=>{ + setloadingTip('已完成') + setTimeout(() => { + setstep(1); + setokText('确认'); + setcancelText('上一步'); + setloading(false); + }, 2000); + },2000) + }, 2000); + }) + .catch(errors=>{//表单校验失败 + console.log('errors',errors); + }) + + } + else{ + Notification.success(opts) + // setVisible(false); + close(); + } + } + function handleAfterClose(){//在关闭之后 + setstep(0); + setokText('测试校验'); + setcancelText('取消'); + } + function handleCancel() {//点击弹框取消 左边按钮 + if(step==0){ + // setVisible(false); + close(); + } + else{ + setstep(0); + setokText('测试校验'); + setcancelText('取消'); + } + } + function handleLocation(){//高德经纬度 + console.log('handleLocationhandleLocation'); + } + function handleChoose(id){//选择摄像头接入类型 + setclickNum(id); + } + function turnLift(){ + setcameraList(cameraList.slice(0,3)) + } + function turnRight(){ + setcameraList(cameraList.slice(1,4)) + } + return ( + <> + {/*
{modalName=='add'?'添加NVR':'修改'}
*/} + + +
+
接入类型
+
+ +
+ {showcameraList.map((item,index)=>( +
handleChoose(item.id)}> +
+ 设置 +
+
{item.title}
+
{item.text}
+ {clickNum===item.id?
+ 1 +
:''} +
+ ))} +
+ +
+
+
+
配置属性
+
+
+ 1 + 重置 +
+
+ 1 + 测试 +
+
+
+ + + + ); +} + +export default nvrModal \ No newline at end of file diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx index d2c111f..a36e2eb 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx @@ -8,65 +8,117 @@ import { } from "@douyinfe/semi-ui"; function Setup(props) { - const { dispatch, actions, user, loading, visible, close, editData } = props; + const { dispatch, actions, user, loading, visible, close, SETUPS } = props; + const [checkeds, setCheckeds] = useState([]); + const [check, setCheck] = useState([]); + + + + + const checkboxcss = { width: "21%", height: 16, marginBottom: "20px" }; + + useEffect(() => { + //获取是否勾选信息 + const ISgetItem = localStorage.getItem(SETUPS); + setCheck(ISgetItem ? JSON.parse(ISgetItem):[]); + }, []); + return ( { + localStorage.setItem(SETUPS, JSON.stringify(checkeds)); close(); }} onCancel={() => { close(); }} > -
{ + setCheckeds(checked); }} > -
- 设备信息 -
- { - console.log(checked); +
-
-
-
项目信息
- { - console.log(checked); + > +
+ 设备信息 +
+
+ + 设备厂家 + + + 添加账号 + + + 通道数 + + + 端口 + + + 设备状态 + + + 创建时间 + +
+
+ +
-
+ > +
+ 项目信息 +
+
+ + 项目名称 + + + things名称 + + + things数量 + +
+
+ ); } 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 new file mode 100644 index 0000000..2eb8d1f --- /dev/null +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx @@ -0,0 +1,74 @@ +import React, { useState, useEffect } from "react"; +import { SideSheet, Tabs, TabPane } from "@douyinfe/semi-ui"; + +function SideSheets(props) { + const { dispatch, actions, user, loading, visible, close, SETUPS } = props; + const [checkeds, setCheckeds] = useState([]); + const [check, setCheck] = useState([]); + const list = [ + { name: "1111", a: "a", b: "B", c: "C", d: "C" }, + { name: "2222", a: "a", b: "B", c: "C", d: "C" }, + { name: "3333", a: "a", b: "B", c: "C", d: "C" }, + { name: "4444", a: "a", b: "B", c: "C", d: "C" }, + ]; + const styles = { + width: 180, + textAlign: "center", + background: "#FFFFFF", + padding: "12px 17px", + margin: "30px 0 0 10px", + lineHeight: "20px", + + }; + + useEffect(() => {}, []); + + return ( + { + close(); + }} + > + + + {list.map((item) => { + return ( +
+
+ {item.name} +
+
{item.a}
+
{item.b}
+
{item.c}
+
{item.d}
+
+ ); + })} + + + 快速起步 + + + + ); +} + +export default SideSheets; 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 b735465..050cba6 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,57 +2,72 @@ import React, { useState, useEffect } from "react"; import { connect } from "react-redux"; import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui"; import "../style.less"; +import CameraModal from "../components/cameraModal"; const CameraHeader = (props) => { + const [cameraModal,setCameraModal] = useState(false) + const [modalName,setModalName] = useState('') return ( <>
+ {cameraModal? + { + setCameraModal(false); + // setEditData(null) + }} + modalName={modalName} />:''} ); }; 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 eee289b..6663347 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 @@ -4,20 +4,19 @@ import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui"; import "../style.less"; import NvrModal from "../components/nvrModal"; import Setup from "../components/setup"; +import SideSheets from "../components/sideSheet"; const NvrHeader = (props) => { const { dispatch, actions, user, loading } = props; const [setup, setSetup] = useState(false); + const [sideSheet, setSideSheet] = useState(false); + const [setupp, setSetupp] = useState([]); + const SETUPS = "setups"; - const screen = { - width: 193, - marginRight: 20, - marginBottom: 16, - color: "rgba(0, 0, 0, 0.65)", - }; const columns = [ { title: "序号", + render: (text, record, index) => { return index + 1; }, @@ -36,29 +35,19 @@ const NvrHeader = (props) => { width: "10px", height: "10px", borderRadius: "50%", - display: "inline-block",marginRight:"10px" - }} /> + display: "inline-block", + marginRight: "10px", + }} + /> {record.name} ); }, }, - { - title: "设备厂家", - dataIndex: "size", - }, { title: "SIP地址", dataIndex: "owner", }, - { - title: "端口号", - dataIndex: "updateTime", - }, - { - title: "通道数", - dataIndex: "nameIconSrc", - }, { title: "操作", width: "20%", @@ -67,14 +56,96 @@ const NvrHeader = (props) => { // console.log(row); return ( <> - - + + ); }, }, ]; + + useEffect(() => { + attribute(); + }, []); + //获取表格属性设置 + function attribute() { + const arr = localStorage.getItem(SETUPS) + ? JSON.parse(localStorage.getItem(SETUPS)) + : []; + + const column = [ + { + title: "设备厂家", + dataIndex: "size", + key: "a", + }, + { + title: "添加张账号", + dataIndex: "size", + key: "b", + }, + { + title: "通道数", + dataIndex: "size", + key: "c", + }, + { + title: "端口", + dataIndex: "size", + key: "d", + }, + { + title: "设备状态", + dataIndex: "size", + key: "e", + }, + { + title: "创建时间", + dataIndex: "size", + key: "f", + }, + { + title: "项目名称", + dataIndex: "size", + key: "g", + }, + { + title: "things名称", + dataIndex: "updateTime", + key: "h", + }, + { + title: "things数量", + dataIndex: "updateTime", + key: "i", + }, + ]; + 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); + } + + const screen = { + width: 193, + marginRight: 20, + marginBottom: 16, + color: "rgba(0, 0, 0, 0.65)", + }; + const data = [ { key: "1", @@ -295,7 +366,7 @@ const NvrHeader = (props) => { }} > 设置 @@ -314,18 +385,22 @@ const NvrHeader = (props) => { {setup ? ( { setSetup(false); + attribute(); // setEditData(null) }} // reportType={reportType} @@ -334,6 +409,17 @@ const NvrHeader = (props) => { ) : ( "" )} + + {sideSheet ? ( + { + setSideSheet(false); + }} + /> + ) : ( + [] + )} );