|
|
@ -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'; |
|
|
|
|
|
|
|
|
|
|
@ -16,6 +16,9 @@ const MirroringDetail = (props) => { |
|
|
|
const [chooseNum, setChooseNum] = useState(0);//当前选择tab |
|
|
|
const [chooseList, setChooseList] = useState(['节点', '样式', '功能']); |
|
|
|
const [editKey, setEditKey] = useState('') |
|
|
|
const [editNum, setEditNum] = useState(1000) |
|
|
|
const [labelEditNum, setLabelEditNum] = useState(1000) |
|
|
|
|
|
|
|
const [comingVisible, setComingVisible] = useState(false) |
|
|
|
const [treeData, setTreeData] = useState([//树形控件数据 |
|
|
|
{ |
|
|
@ -29,9 +32,15 @@ const MirroringDetail = (props) => { |
|
|
|
const [plainOptions, setPlainOptions] = useState([]);//摄像头选择 |
|
|
|
const [checkedList, setCheckedList] = useState([]);//选中的摄像头列表 |
|
|
|
const [mykeyword, setMykeyword] = useState('');//摄像头搜索 |
|
|
|
const [allCameraList, setAllCameraList] = 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([])//筛选项数据 |
|
|
|
const [addLabelNum, setAddLabelNum] = useState(0)//标签组添加 |
|
|
|
|
|
|
|
function onCheckAllChange (e) {//全选 |
|
|
|
if (e.target.checked) { |
|
|
@ -48,16 +57,40 @@ 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 || '', |
|
|
|
}) |
|
|
|
if (resList[i].type == 'yingshi') { |
|
|
|
optionsList.push({ |
|
|
|
label: resList[i].name, |
|
|
|
value: resList[i].id, |
|
|
|
extra: 'DID:' + resList[i].gbCamera.did || '', |
|
|
|
did: resList[i].gbCamera.did || '', |
|
|
|
id: resList[i].id, |
|
|
|
channelNo: resList[i].channelNo, |
|
|
|
content: resList[i].cameraRemarks.map(v => v.remark), |
|
|
|
serialNo: resList[i].serialNo, |
|
|
|
type: resList[i].type, |
|
|
|
yingshiToken: resList[i].secretYingshi.token |
|
|
|
}) |
|
|
|
} |
|
|
|
else { |
|
|
|
optionsList.push({ |
|
|
|
label: resList[i].name, |
|
|
|
value: resList[i].id, |
|
|
|
extra: 'DID:' + resList[i].gbCamera.did || '', |
|
|
|
did: resList[i].gbCamera.did || '', |
|
|
|
id: resList[i].id, |
|
|
|
channelNo: resList[i].channelNo, |
|
|
|
content: resList[i].cameraRemarks.map(v => v.remark), |
|
|
|
serialNo: resList[i].serialNo, |
|
|
|
type: resList[i].type, |
|
|
|
yingshiToken: null |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
setAllCameraList(optionsList) |
|
|
|
setShowCameraList(optionsList) |
|
|
|
setPlainOptions(optionsList) |
|
|
|
}); |
|
|
@ -80,32 +113,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 +280,8 @@ const MirroringDetail = (props) => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
console.log('myplainOptionsmyplainOptions', myplainOptions); |
|
|
|
setCheckedList([]) |
|
|
|
setSaveShowList(myplainOptions) |
|
|
|
setShowCameraList(myplainOptions) |
|
|
|
setAddCamera(true) |
|
|
|
setAddCameraKey(item.key) |
|
|
@ -318,7 +368,7 @@ const MirroringDetail = (props) => { |
|
|
|
</div> |
|
|
|
</Popconfirm> |
|
|
|
{ |
|
|
|
keyArr.length > 2||(item.children&&item.children[0].cameraId) ? ('') : ( |
|
|
|
(item.children && item.children.length > 0 && item.children[0].cameraId) || keyArr.length > 2 ? ('') : ( |
|
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => nodeAdd(item)}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nodeadd.png" |
|
|
@ -336,7 +386,11 @@ const MirroringDetail = (props) => { |
|
|
|
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 +414,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) { |
|
|
@ -384,7 +442,15 @@ const MirroringDetail = (props) => { |
|
|
|
label: plainOptions[q].label, |
|
|
|
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1), |
|
|
|
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1), |
|
|
|
cameraId: plainOptions[q].value |
|
|
|
cameraId: plainOptions[q].value, |
|
|
|
videoData:{ |
|
|
|
channelNo: plainOptions[q].channelNo, |
|
|
|
content: plainOptions[q].content, |
|
|
|
serialNo: plainOptions[q].serialNo, |
|
|
|
type: plainOptions[q].type, |
|
|
|
yingshiToken:plainOptions[q].yingshiToken, |
|
|
|
id:plainOptions[q].id, |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
else { |
|
|
@ -394,7 +460,15 @@ const MirroringDetail = (props) => { |
|
|
|
label: plainOptions[q].label, |
|
|
|
value: (Number(thekeyarr[0])) + '-0', |
|
|
|
key: (Number(thekeyarr[0])) + '-0', |
|
|
|
cameraId: plainOptions[q].value |
|
|
|
cameraId: plainOptions[q].value, |
|
|
|
videoData:{ |
|
|
|
channelNo: plainOptions[q].channelNo, |
|
|
|
content: plainOptions[q].content, |
|
|
|
serialNo: plainOptions[q].serialNo, |
|
|
|
type: plainOptions[q].type, |
|
|
|
yingshiToken:plainOptions[q].yingshiToken, |
|
|
|
id:plainOptions[q].id, |
|
|
|
} |
|
|
|
}] |
|
|
|
} |
|
|
|
} |
|
|
@ -417,17 +491,33 @@ const MirroringDetail = (props) => { |
|
|
|
label: plainOptions[q].label, |
|
|
|
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1), |
|
|
|
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1), |
|
|
|
cameraId: plainOptions[q].value |
|
|
|
cameraId: plainOptions[q].value, |
|
|
|
videoData:{ |
|
|
|
channelNo: plainOptions[q].channelNo, |
|
|
|
content: plainOptions[q].content, |
|
|
|
serialNo: plainOptions[q].serialNo, |
|
|
|
type: plainOptions[q].type, |
|
|
|
yingshiToken:plainOptions[q].yingshiToken, |
|
|
|
id:plainOptions[q].id, |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
else { |
|
|
|
let mainKey = mainData[index].key |
|
|
|
let mainKey = mainData[index].children[j].key |
|
|
|
let thekeyarr = mainKey.split('-') |
|
|
|
mainData[index].children[j].children = [{ |
|
|
|
label: plainOptions[q].label, |
|
|
|
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0', |
|
|
|
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0', |
|
|
|
cameraId: plainOptions[q].value |
|
|
|
cameraId: plainOptions[q].value, |
|
|
|
videoData:{ |
|
|
|
channelNo: plainOptions[q].channelNo, |
|
|
|
content: plainOptions[q].content, |
|
|
|
serialNo: plainOptions[q].serialNo, |
|
|
|
type: plainOptions[q].type, |
|
|
|
yingshiToken:plainOptions[q].yingshiToken, |
|
|
|
id:plainOptions[q].id, |
|
|
|
} |
|
|
|
}] |
|
|
|
} |
|
|
|
} |
|
|
@ -454,17 +544,33 @@ const MirroringDetail = (props) => { |
|
|
|
label: plainOptions[q].label, |
|
|
|
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-' + (Number(thekeyarr[3]) + 1), |
|
|
|
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-' + (Number(thekeyarr[3]) + 1), |
|
|
|
cameraId: plainOptions[q].value |
|
|
|
cameraId: plainOptions[q].value, |
|
|
|
videoData:{ |
|
|
|
channelNo: plainOptions[q].channelNo, |
|
|
|
content: plainOptions[q].content, |
|
|
|
serialNo: plainOptions[q].serialNo, |
|
|
|
type: plainOptions[q].type, |
|
|
|
yingshiToken:plainOptions[q].yingshiToken, |
|
|
|
id:plainOptions[q].id, |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
else { |
|
|
|
let mainKey = mainData[index].key |
|
|
|
let mainKey = mainData[index].children[j].children[k].key |
|
|
|
let thekeyarr = mainKey.split('-') |
|
|
|
mainData[index].children[j].children[k].children = [{ |
|
|
|
label: plainOptions[q].label, |
|
|
|
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-0', |
|
|
|
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-0', |
|
|
|
cameraId: plainOptions[q].value |
|
|
|
cameraId: plainOptions[q].value, |
|
|
|
videoData:{ |
|
|
|
channelNo: plainOptions[q].channelNo, |
|
|
|
content: plainOptions[q].content, |
|
|
|
serialNo: plainOptions[q].serialNo, |
|
|
|
type: plainOptions[q].type, |
|
|
|
yingshiToken:plainOptions[q].yingshiToken, |
|
|
|
id:plainOptions[q].id, |
|
|
|
} |
|
|
|
}] |
|
|
|
} |
|
|
|
} |
|
|
@ -479,8 +585,84 @@ const MirroringDetail = (props) => { |
|
|
|
} |
|
|
|
setTreeData(mainData); |
|
|
|
setAddCamera(false); |
|
|
|
setMykeyword('') |
|
|
|
setAddCameraKey(''); |
|
|
|
} |
|
|
|
function addScreenGroup () {//筛选项组设置弹框 |
|
|
|
setAddScreen(true) |
|
|
|
} |
|
|
|
function addLabelGroup (index) {//标签组弹框 |
|
|
|
setAddLabelNum(index) |
|
|
|
setAddLabel(true) |
|
|
|
} |
|
|
|
function toAddScreen () {//添加筛选项 |
|
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
|
if (filterGroupList.length == 0) { |
|
|
|
filterGroupList.push({ |
|
|
|
name: '我的筛选项组0', |
|
|
|
num: 0, |
|
|
|
forbidden: true, |
|
|
|
filters: [] |
|
|
|
}) |
|
|
|
} |
|
|
|
else if (filterGroupList.length < 5) { |
|
|
|
filterGroupList.push({ |
|
|
|
name: '我的筛选项组' + (filterGroupList[filterGroupList.length - 1].num + 1), |
|
|
|
num: filterGroupList[filterGroupList.length - 1].num + 1, |
|
|
|
forbidden: true, |
|
|
|
filters: [] |
|
|
|
}) |
|
|
|
} |
|
|
|
setFilterGroup(filterGroupList) |
|
|
|
} |
|
|
|
function switchOnChange (val, index) {//筛选项是否禁用 |
|
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
|
filterGroupList[index].forbidden = val |
|
|
|
setFilterGroup(filterGroupList) |
|
|
|
} |
|
|
|
function screenDel (index) {//筛选项删除 |
|
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
|
filterGroupList.splice(index, 1) |
|
|
|
setFilterGroup(filterGroupList) |
|
|
|
} |
|
|
|
function toEditscreen (val, index) {//编辑筛选项名称 |
|
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
|
filterGroupList[index].name = val |
|
|
|
setFilterGroup(filterGroupList) |
|
|
|
} |
|
|
|
function toAddLabel () {//添加标签组 |
|
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
|
if (filterGroupList[addLabelNum].filters.length == 0) { |
|
|
|
filterGroupList[addLabelNum].filters.push({ |
|
|
|
name: '标签组0', |
|
|
|
num: 0, |
|
|
|
cameraIds: [] |
|
|
|
}) |
|
|
|
} |
|
|
|
else { |
|
|
|
filterGroupList[addLabelNum].filters.push({ |
|
|
|
name: '标签组' + (filterGroupList[addLabelNum].filters[filterGroupList[addLabelNum].filters.length - 1].num + 1), |
|
|
|
num: filterGroupList[addLabelNum].filters[filterGroupList[addLabelNum].filters.length - 1].num + 1, |
|
|
|
cameraIds: [] |
|
|
|
}) |
|
|
|
} |
|
|
|
setFilterGroup(filterGroupList) |
|
|
|
} |
|
|
|
function labelDel (index) {//标签组删除 |
|
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
|
filterGroupList[addLabelNum].filters.splice(index, 1) |
|
|
|
setFilterGroup(filterGroupList) |
|
|
|
} |
|
|
|
function addFiltersCamera (val, index) { |
|
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
|
filterGroupList[addLabelNum].filters[index].cameraIds = val |
|
|
|
setFilterGroup(filterGroupList) |
|
|
|
} |
|
|
|
function toEditLabel (val, index) { |
|
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
|
filterGroupList[addLabelNum].filters[index].name = val |
|
|
|
setFilterGroup(filterGroupList) |
|
|
|
} |
|
|
|
return ( |
|
|
|
<div style={{ background: 'rgb(246, 250, 255)', height: '100%', width: '100%' }}> |
|
|
|
<div style={{ |
|
|
@ -506,6 +688,13 @@ const MirroringDetail = (props) => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', }}> |
|
|
|
<div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/generate.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/save.png" |
|
|
@ -537,7 +726,7 @@ const MirroringDetail = (props) => { |
|
|
|
})} |
|
|
|
</div> |
|
|
|
{/* 节点 */} |
|
|
|
<div style={{ display: chooseNum == "0" ? "block" : "none",height:'100%' }}> |
|
|
|
<div style={{ display: chooseNum == "0" ? "block" : "none", height: '100%' }}> |
|
|
|
<div style={{ height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgb(246, 250, 255)', cursor: 'pointer' }} onClick={addMainNode}> |
|
|
|
<div style={{ width: 20, height: 20 }}> |
|
|
|
<img |
|
|
@ -550,20 +739,19 @@ const MirroringDetail = (props) => { |
|
|
|
增加主要节点 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{/* <div > */} |
|
|
|
<Tree |
|
|
|
style={{height: 'calc(100% - 89px)',overflowY: 'auto',}} |
|
|
|
style={{ height: 'calc(100% - 89px)', overflowY: 'auto' }} |
|
|
|
treeData={treeData} |
|
|
|
expandAll |
|
|
|
renderLabel={renderLabel} |
|
|
|
/> |
|
|
|
{/* </div> */} |
|
|
|
</div> |
|
|
|
{/* 添加视频 */} |
|
|
|
{addCamera ? ( |
|
|
|
<div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 200, background: '#FFFFFF' }}> |
|
|
|
<div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 200, background: '#FFFFFF', zIndex: 1 }}> |
|
|
|
<div style={{ background: 'linear-gradient(180deg, #1859C1 0%, #2C66E7 100%)', display: 'flex', height: 49, padding: '0px 12px 0px 10px', alignItems: 'center', justifyContent: 'space-between', }}> |
|
|
|
<div style={{ fontSize: 14, color: '#F9F9F9' }}>添加视频</div> |
|
|
|
<div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddCamera(false); setAddCameraKey('') }}> |
|
|
|
<div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddCamera(false); setAddCameraKey(''); setMykeyword('') }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/close.png" |
|
|
|
alt="设置" |
|
|
@ -579,7 +767,7 @@ const MirroringDetail = (props) => { |
|
|
|
style={{ width: 140, marginLeft: 10 }} |
|
|
|
value={mykeyword} |
|
|
|
onChange={(value) => { setMykeyword(value) }} |
|
|
|
placeholder="请输入摄像头名称" |
|
|
|
placeholder="摄像头名称或DID" |
|
|
|
showClear> |
|
|
|
</Input> |
|
|
|
</div> |
|
|
@ -607,7 +795,7 @@ const MirroringDetail = (props) => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ padding: '10px 20px', overflowY: 'scroll', height: 'calc(100% - 193px)' }}> |
|
|
|
<div style={{ padding: '10px 20px', overflowY: 'scroll', height: 'calc(100% - 193px)', borderLeft: '1px solid rgba(226,226,226,0.5)' }}> |
|
|
|
<CheckboxGroup |
|
|
|
style={{ marginTop: 6 }} |
|
|
|
className='my_CheckboxGroup' |
|
|
@ -636,9 +824,169 @@ const MirroringDetail = (props) => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{/* 功能 */} |
|
|
|
<div style={{ display: chooseNum == "2" ? "block" : "none", fontSize: 12 }}> |
|
|
|
<div style={{ height: 40, display: 'flex', padding: '0px 12px 0px 20px', alignItems: 'center', justifyContent: 'space-between', background: 'rgb(246, 250, 255)', cursor: 'pointer' }} onClick={addScreenGroup}> |
|
|
|
<div style={{ marginLeft: 9, fontSize: 15, color: 'rgba(0,0,0,0.65)' }}> |
|
|
|
筛选项组 |
|
|
|
</div> |
|
|
|
<div style={{ width: 16, height: 16 }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/toright.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{addScreen ? ( |
|
|
|
<div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 200, background: '#FFFFFF', zIndex: 1 }}> |
|
|
|
<div style={{ background: 'linear-gradient(180deg, #1859C1 0%, #2C66E7 100%)', display: 'flex', height: 49, padding: '0px 12px 0px 10px', alignItems: 'center', justifyContent: 'space-between', }}> |
|
|
|
<div style={{ display: 'flex' }}> |
|
|
|
<div style={{ fontSize: 14, color: '#F9F9F9' }}>筛选项组设置</div> |
|
|
|
<div style={{ fontSize: 18, backgroundImage: 'url(/assets/images/imageImg/numBg.png)', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: 54, height: 21, marginLeft: 7, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#FFFFFF' }}> |
|
|
|
{filterGroup.length}/5 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddScreen(false); setAddLabel(false); }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/close.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', height: 41, justifyContent: 'flex-end', alignItems: 'center', borderBottom: '1px solid rgba(226,226,226,0.5)' }}> |
|
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 2, display: 'flex' }} onClick={toAddScreen}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/addtext.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12, marginRight: 12, cursor: 'pointer' }} onClick={toAddScreen}> |
|
|
|
添加筛选项 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ borderLeft: '1px solid rgba(226,226,226,0.5)', height: '100%' }} className="myScreen"> |
|
|
|
{ |
|
|
|
filterGroup.map((item, index) => { |
|
|
|
return ( |
|
|
|
<div key={index} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid rgba(226,226,226,0.5)', }}> |
|
|
|
<div style={{ display: 'flex', height: 44, alignItems: 'center', }}> |
|
|
|
<div style={{ marginLeft: 20, color: 'rgba(0,0,0,0.65)' }}> |
|
|
|
{ |
|
|
|
editNum == item.num ? ( |
|
|
|
<Input value={item.name} onBlur={() => { setEditNum(1000) }} onChange={(value) => toEditscreen(value, index)} style={{ width: 120 }} maxLength={8} className='inputpadding' size='small'></Input> |
|
|
|
) : (item.name) |
|
|
|
} |
|
|
|
</div> |
|
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 10, display: 'flex' }} onClick={() => { setEditNum(item.num) }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nodeEdit.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 4, display: 'flex' }} onClick={() => { screenDel(index) }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nodeDel.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 4, display: 'flex' }} onClick={() => { addLabelGroup(index) }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/install.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ marginRight: 12 }}> |
|
|
|
<Switch checked={item.forbidden} onChange={(v, e) => switchOnChange(v, index)} size="small" aria-label="是否禁用"></Switch> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
})} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : ('')} |
|
|
|
{addLabel ? ( |
|
|
|
<div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 464, background: '#FFFFFF', zIndex: 120 }}> |
|
|
|
<div style={{ background: 'linear-gradient(180deg, #1859C1 0%, #2C66E7 100%)', display: 'flex', height: 49, padding: '0px 12px 0px 10px', alignItems: 'center', justifyContent: 'space-between', }}> |
|
|
|
<div style={{ fontSize: 14, color: '#F9F9F9' }}>筛选项组设置</div> |
|
|
|
<div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddLabel(false); }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/close.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', height: 41, justifyContent: 'flex-end', alignItems: 'center', borderBottom: '1px solid rgba(226,226,226,0.5)' }}> |
|
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 2, display: 'flex' }} onClick={toAddLabel}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/addtext.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12, marginRight: 12, cursor: 'pointer' }} onClick={toAddLabel}> |
|
|
|
添加标签组 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ borderLeft: '1px solid rgba(226,226,226,0.5)', height: 'calc(100% - 154px)', overflowY: 'auto', }}> |
|
|
|
{ |
|
|
|
filterGroup[addLabelNum].filters.map((item, index) => { |
|
|
|
return ( |
|
|
|
<div key={index} style={{ borderBottom: '1px solid rgba(226,226,226,0.5)', }}> |
|
|
|
<div style={{ display: 'flex', margin: '12px 0px 12px 20px', alignItems: 'center', }}> |
|
|
|
<div style={{ color: 'rgba(0,0,0,0.65)' }}> |
|
|
|
{ |
|
|
|
labelEditNum == item.num ? ( |
|
|
|
<Input value={item.name} onBlur={() => { setLabelEditNum(1000) }} onChange={(value) => toEditLabel(value, index)} style={{ width: 120 }} maxLength={8} className='inputpadding' size='small'></Input> |
|
|
|
) : (item.name) |
|
|
|
} |
|
|
|
</div> |
|
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 10, display: 'flex' }} onClick={() => { setLabelEditNum(item.num) }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nodeEdit.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 4, display: 'flex' }} onClick={() => { labelDel(index) }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nodeDel.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ padding: '0px 20px 10px 10px' }}> |
|
|
|
<Select multiple value={item.cameraIds} style={{ width: '234px' }} onChange={(val) => { addFiltersCamera(val, index) }} maxTagCount={2} size='large'> |
|
|
|
{ |
|
|
|
allCameraList.map((itm, idx) => { |
|
|
|
return ( |
|
|
|
<Select.Option value={itm.id} key={idx}>{itm.label}</Select.Option> |
|
|
|
) |
|
|
|
}) |
|
|
|
} |
|
|
|
</Select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : ('') |
|
|
|
} |
|
|
|
</div> |
|
|
|
<div style={{ flex: 1 }}> |
|
|
|
<VideoScreen/> |
|
|
|
<VideoScreen treeData={treeData}/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<Modal |
|
|
|