diff --git a/code/VideoAccess-VCMP/web/client/assets/images/imageImg/addtext.png b/code/VideoAccess-VCMP/web/client/assets/images/imageImg/addtext.png new file mode 100644 index 0000000..32444fe Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/imageImg/addtext.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/imageImg/delete.png b/code/VideoAccess-VCMP/web/client/assets/images/imageImg/delete.png new file mode 100644 index 0000000..2ccf9bd Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/imageImg/delete.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/imageImg/generate.png b/code/VideoAccess-VCMP/web/client/assets/images/imageImg/generate.png new file mode 100644 index 0000000..1784b7c Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/imageImg/generate.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/imageImg/install.png b/code/VideoAccess-VCMP/web/client/assets/images/imageImg/install.png new file mode 100644 index 0000000..b7784fb Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/imageImg/install.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/imageImg/numBg.png b/code/VideoAccess-VCMP/web/client/assets/images/imageImg/numBg.png new file mode 100644 index 0000000..9275e73 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/imageImg/numBg.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/imageImg/save.png b/code/VideoAccess-VCMP/web/client/assets/images/imageImg/save.png index 632ec53..e974d2e 100644 Binary files a/code/VideoAccess-VCMP/web/client/assets/images/imageImg/save.png and b/code/VideoAccess-VCMP/web/client/assets/images/imageImg/save.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/imageImg/toright.png b/code/VideoAccess-VCMP/web/client/assets/images/imageImg/toright.png new file mode 100644 index 0000000..63e389c Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/imageImg/toright.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/imageImg/upload.png b/code/VideoAccess-VCMP/web/client/assets/images/imageImg/upload.png index 49331c8..8eab869 100644 Binary files a/code/VideoAccess-VCMP/web/client/assets/images/imageImg/upload.png and b/code/VideoAccess-VCMP/web/client/assets/images/imageImg/upload.png differ diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js b/code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js index 248e8a1..c388c3e 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js +++ b/code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js @@ -13,4 +13,15 @@ export function getCamera(query) { msg: { option: "获取摄像头列表信息" }, reducer: { name: "equipmentWarehouseCamera", params: { noClear: true } }, }); +} +export function getCameraListAll() {//获取摄像头能力列表 + return (dispatch) => + basicAction({ + type: "get", + dispatch: dispatch, + actionType: "GET_CAMERA_LIST_ALL", + url: `${ApiTable.getCameraListAll}`, + msg: { option: "" }, + reducer: { name: "" }, + }); } \ No newline at end of file diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx b/code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx index 906f219..c6a9c8c 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx @@ -1,7 +1,7 @@ import React, { useEffect, useState, useRef } from 'react'; import { connect } from 'react-redux'; import '../style.less' -import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxGroup } from "@douyinfe/semi-ui" +import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxGroup,Select } from "@douyinfe/semi-ui" import VideoScreen from '../components/videoScreen'; @@ -30,8 +30,12 @@ const MirroringDetail = (props) => { const [checkedList, setCheckedList] = useState([]);//选中的摄像头列表 const [mykeyword, setMykeyword] = useState('');//摄像头搜索 const [showCameraList, setShowCameraList] = useState([])//展示的摄像头列表 + const [saveShowList, setSaveShowList] = useState([])//展示的摄像头列表 const [addCamera, setAddCamera] = useState(false);//添加视频弹框 const [addCameraKey, setAddCameraKey] = useState('');//添加视频弹框 + const [addScreen, setAddScreen] = useState(false)//筛选项设置弹框 + const [addLabel, setAddLabel] = useState(false)//标签组设置弹框 + const [filterGroup,setFilterGroup] = useState([])//筛选项数据 function onCheckAllChange (e) {//全选 if (e.target.checked) { @@ -48,14 +52,15 @@ const MirroringDetail = (props) => { setCheckall(e.target.checked); } function equipmentGetCamera () {//查询摄像头 - dispatch(openness.getCamera()).then((res) => { - let resList = res.payload.data.data + dispatch(openness.getCameraListAll()).then((res) => { + let resList = res.payload.data let optionsList = [] for (let i = 0; i < resList.length; i++) { optionsList.push({ label: resList[i].name, value: resList[i].id, extra: 'DID:' + resList[i].gbCamera.did || '', + did: resList[i].gbCamera.did || '' }) } setShowCameraList(optionsList) @@ -80,32 +85,49 @@ const MirroringDetail = (props) => { })), 1) } else if (nodeKeyArr.length == 2) { for (let index = 0; index < mainData.length; index++) { - mainData[index].children.splice( - mainData[index].children.indexOf(mainData[index].children.find(function (element) { - return element.key === item.key - })), 1) + if (mainData[index].children) { + for (let j = 0; j < mainData[index].children.length; j++) { + if (item.key == mainData[index].children[j].key) { + mainData[index].children.splice(j, 1) + } + } + } } } else if (nodeKeyArr.length == 3) { for (let j = 0; j < mainData.length; j++) { - for (let i = 0; i < mainData[j].children.length; i++) { - mainData[j].children[i].children.splice( - mainData[j].children[i].children.indexOf(mainData[j].children[i].children.find(function (element) { - return element.key === item.key - })), 1) + if (mainData[j].children) { + for (let i = 0; i < mainData[j].children.length; i++) { + if (mainData[j].children[i].children) { + for (let k = 0; k < mainData[j].children[i].children.length; k++) { + if (item.key == mainData[j].children[i].children[k].key) { + mainData[j].children[i].children.splice(k, 1) + } + } + } + + } } } } else if (nodeKeyArr.length == 4) { for (let k = 0; k < mainData.length; k++) { - for (let j = 0; j < mainData[k].children.length; j++) { - for (let i = 0; i < mainData[k].children[j].children.length; i++) { - mainData[k].children[j].children[i].children.splice( - mainData[k].children[j].children[i].children.indexOf(mainData[k].children[j].children[i].children.find(function (element) { - return element.key === item.key - })), 1) + if (mainData[k].children) { + for (let j = 0; j < mainData[k].children.length; j++) { + if (mainData[k].children[j].children) { + for (let i = 0; i < mainData[k].children[j].children.length; i++) { + if (mainData[k].children[j].children[i].children) { + for (let w = 0; w < mainData[k].children[j].children[i].children.length; w++) { + if (item.key == mainData[k].children[j].children[i].children[w].key) { + mainData[k].children[j].children[i].children.splice(w, 1) + } + } + } + } + } } } } } + setAddCamera(false) setTreeData(mainData) } function nodeAdd (item) {//添加树状子节点 @@ -230,8 +252,8 @@ const MirroringDetail = (props) => { } } } - console.log('myplainOptionsmyplainOptions', myplainOptions); setCheckedList([]) + setSaveShowList(myplainOptions) setShowCameraList(myplainOptions) setAddCamera(true) setAddCameraKey(item.key) @@ -318,7 +340,7 @@ const MirroringDetail = (props) => { { - keyArr.length > 2||(item.children&&item.children[0].cameraId) ? ('') : ( + (item.children && item.children.length > 0 && item.children[0].cameraId) || keyArr.length > 2 ? ('') : (
nodeAdd(item)}> { history.goBack() } function tochange (index) {//节点样式功能切换 - setChooseNum(index) + setChooseNum(index); + setAddCamera(false); + setMykeyword(''); + setAddScreen(false); + setAddLabel(false); } function addMainNode () {//增加主要节点 let mainData = JSON.parse(JSON.stringify(treeData)) @@ -360,15 +386,19 @@ const MirroringDetail = (props) => { } function searchCamera () {//查询摄像头 if (mykeyword !== '') { - console.log('111111111', mykeyword); + let myfindList = [] + for (let index = 0; index < showCameraList.length; index++) { + if (showCameraList[index].label.indexOf(mykeyword) != -1 || showCameraList[index].did.indexOf(mykeyword) != -1) { + myfindList.push(showCameraList[index]) + } + } + setShowCameraList(myfindList); } else { - console.log('22222222222', mykeyword); - // setShowCameraList(plainOptions) + setShowCameraList(saveShowList); } } function finishAdd () {//完成添加摄像头 - console.log('checkedList', checkedList); let mainData = JSON.parse(JSON.stringify(treeData)) let nodeKeyArr = addCameraKey.split('-') if (nodeKeyArr.length == 1) { @@ -479,8 +509,12 @@ const MirroringDetail = (props) => { } setTreeData(mainData); setAddCamera(false); + setMykeyword('') setAddCameraKey(''); } + function addScreenGroup () { + setAddScreen(true) + } return (
{
+
+ 设置 +
{ })}
{/* 节点 */} -
+
{ 增加主要节点
- {/*
*/} - {/*
*/}
{/* 添加视频 */} {addCamera ? ( -
+
添加视频
-
{ setAddCamera(false); setAddCameraKey('') }}> +
{ setAddCamera(false); setAddCameraKey(''); setMykeyword('') }}> 设置 { style={{ width: 140, marginLeft: 10 }} value={mykeyword} onChange={(value) => { setMykeyword(value) }} - placeholder="请输入摄像头名称" + placeholder="摄像头名称或DID" showClear>
@@ -607,7 +647,7 @@ const MirroringDetail = (props) => {
-
+
{
+ {/* 功能 */} +
+
+
+ 筛选项组 +
+
+ 设置 +
+
+
+ {addScreen ? ( +
+
+
+
筛选项组设置
+
+ 1/5 +
+
+
{ setAddScreen(false);setAddLabel(false); }}> + 设置 +
+
+
+
{ }}> + 设置 +
+
{ }}> + 添加筛选项 +
+
+
+
+
+
+ 我的筛选项八个字 +
+
+ 设置 +
+
+ 设置 +
+
{setAddLabel(true)}}> + 设置 +
+
+
+ console.log(v)} size="small" aria-label="是否禁用"> +
+
+
+
+ ) : ('')} + { addLabel?( +
+
+
筛选项组设置
+
{ setAddLabel(false); }}> + 设置 +
+
+
+
{ }}> + 设置 +
+
{ }}> + 添加标签组 +
+
+
+
+
+
标签组六个字
+
+ 设置 +
+
+ 设置 +
+
+
+ +
+
+
+
+ ):('') + }
- +