|
|
@ -1,30 +1,96 @@ |
|
|
import React, { useEffect, useState, useRef } from 'react'; |
|
|
import React, { useEffect, useState, useRef } from 'react'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { connect } from 'react-redux'; |
|
|
import '../style.less' |
|
|
import '../style.less' |
|
|
import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxGroup, Select } from "@douyinfe/semi-ui" |
|
|
import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxGroup, Select, Toast,Button } from "@douyinfe/semi-ui" |
|
|
import VideoScreen from '../components/videoScreen'; |
|
|
import VideoScreen from '../components/videoScreen'; |
|
|
|
|
|
import { set } from 'nprogress'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const MirroringDetail = (props) => { |
|
|
const MirroringDetail = (props) => { |
|
|
const { history, dispatch, actions, user, loading, StatusPushList } = props; |
|
|
const { history, dispatch, actions, user, loading, StatusPushList } = props; |
|
|
const { openness } = actions; |
|
|
const { openness } = actions; |
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
let search=props.location.search |
|
|
let search = props.location.search |
|
|
let result = search.slice(1) |
|
|
let result = search.slice(1) |
|
|
let searcharr=result.split('&') |
|
|
let searcharr = result.split('&') |
|
|
if(searcharr.length==1){ |
|
|
if (searcharr.length == 1) { |
|
|
setTemplate(searcharr[0].split('=')[1])//主题颜色 |
|
|
setTemplate(searcharr[0].split('=')[1])//主题颜色 |
|
|
} |
|
|
} |
|
|
else{ |
|
|
else { |
|
|
setTemplate(searcharr[0].split('=')[1])//主题颜色 |
|
|
setTemplate(searcharr[0].split('=')[1])//主题颜色 |
|
|
setMirrorId(searcharr[2].split('=')[1])//id |
|
|
dispatch(openness.getMirrorDetail(searcharr[1].split('=')[1])).then((res) => { |
|
|
|
|
|
let filterGrouplist = res.payload.data.filterGroup |
|
|
|
|
|
for (let i = 0; i < filterGrouplist.length; i++) { |
|
|
|
|
|
filterGrouplist[i].num = i |
|
|
|
|
|
if (filterGrouplist[i].filters.length > 0) { |
|
|
|
|
|
for (let j = 0; j < filterGrouplist[i].filters.length; j++) { |
|
|
|
|
|
filterGrouplist[i].filters[j].num = j |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
setFilterGroup(filterGrouplist); |
|
|
|
|
|
setMirrorId(res.payload.data.id);//id |
|
|
|
|
|
setShowHeader(res.payload.data.showHeader); |
|
|
|
|
|
setHeaderName(res.payload.data.title); |
|
|
|
|
|
let mytreeData = res.payload.data.tree |
|
|
|
|
|
for (let i = 0; i < mytreeData.length; i++) {//第一层 |
|
|
|
|
|
mytreeData[i].value = mytreeData[i].key |
|
|
|
|
|
for (let j = 0; j < mytreeData[i].children.length; j++) {//第二层 |
|
|
|
|
|
mytreeData[i].children[j].value = mytreeData[i].children[j].key |
|
|
|
|
|
if (mytreeData[i].children[j].camera) { |
|
|
|
|
|
if (mytreeData[i].children[j].camera.type == 'yingshi') { |
|
|
|
|
|
mytreeData[i].children[j].camera.content = mytreeData[i].children[j].camera.cameraRemarks.map(v => v.remark), |
|
|
|
|
|
mytreeData[i].children[j].camera.yingshiToken = mytreeData[i].children[j].camera.secretYingshi.token |
|
|
|
|
|
} |
|
|
|
|
|
else { |
|
|
|
|
|
mytreeData[i].children[j].camera.content = mytreeData[i].children[j].camera.cameraRemarks.map(v => v.remark), |
|
|
|
|
|
mytreeData[i].children[j].camera.yingshiToken = null |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
else { |
|
|
|
|
|
for (let k = 0; k < mytreeData[i].children[j].children.length; k++) {//第三层 |
|
|
|
|
|
mytreeData[i].children[j].children[k].value = mytreeData[i].children[j].children[k].key |
|
|
|
|
|
if (mytreeData[i].children[j].children[k].camera) { |
|
|
|
|
|
if (mytreeData[i].children[j].children[k].camera.type == 'yingshi') { |
|
|
|
|
|
mytreeData[i].children[j].children[k].camera.content = mytreeData[i].children[j].children[k].camera.cameraRemarks.map(v => v.remark), |
|
|
|
|
|
mytreeData[i].children[j].children[k].camera.yingshiToken = mytreeData[i].children[j].children[k].camera.secretYingshi.token |
|
|
|
|
|
} |
|
|
|
|
|
else { |
|
|
|
|
|
mytreeData[i].children[j].children[k].camera.content = mytreeData[i].children[j].children[k].camera.cameraRemarks.map(v => v.remark), |
|
|
|
|
|
mytreeData[i].children[j].children[k].camera.yingshiToken = null |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
else { |
|
|
|
|
|
for (let l = 0; l < mytreeData[i].children[j].children[k].children.length; l++) { |
|
|
|
|
|
mytreeData[i].children[j].children[k].children[l].value = mytreeData[i].children[j].children[k].children[l].key |
|
|
|
|
|
if (mytreeData[i].children[j].children[k].children[l].camera) { |
|
|
|
|
|
if (mytreeData[i].children[j].children[k].children[l].camera.type == 'yingshi') { |
|
|
|
|
|
mytreeData[i].children[j].children[k].children[l].camera.content = mytreeData[i].children[j].children[k].children[l].camera.cameraRemarks.map(v => v.remark), |
|
|
|
|
|
mytreeData[i].children[j].children[k].children[l].camera.yingshiToken = mytreeData[i].children[j].children[k].children[l].camera.secretYingshi.token |
|
|
|
|
|
} |
|
|
|
|
|
else { |
|
|
|
|
|
mytreeData[i].children[j].children[k].children[l].camera.content = mytreeData[i].children[j].children[k].children[l].camera.cameraRemarks.map(v => v.remark), |
|
|
|
|
|
mytreeData[i].children[j].children[k].children[l].camera.yingshiToken = null |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
setTreeData(mytreeData); |
|
|
|
|
|
}) |
|
|
} |
|
|
} |
|
|
equipmentGetCamera(); |
|
|
equipmentGetCamera(); |
|
|
}, []); |
|
|
}, []); |
|
|
const [showHeader,setShowHeader] = useState(false)//是否展示头部 |
|
|
const [hasModify, sethasModify] = useState(false)//有没有进行修改 |
|
|
const [mirrorId,setMirrorId] = useState(null)//id |
|
|
const [showHeader, setShowHeader] = useState(false)//是否展示头部 |
|
|
|
|
|
const [mirrorId, setMirrorId] = useState(null)//id |
|
|
|
|
|
const [backVisible, setBackVisible] = useState(false)//返回上一页是否修改过 |
|
|
|
|
|
|
|
|
const [template,setTemplate] = useState('')//主题颜色 |
|
|
|
|
|
|
|
|
const [template, setTemplate] = useState('')//主题颜色 |
|
|
const [chooseNum, setChooseNum] = useState(0);//当前选择tab |
|
|
const [chooseNum, setChooseNum] = useState(0);//当前选择tab |
|
|
const [chooseList, setChooseList] = useState(['节点', '样式', '功能']); |
|
|
const [chooseList, setChooseList] = useState(['节点', '样式', '功能']); |
|
|
const [editKey, setEditKey] = useState('') |
|
|
const [editKey, setEditKey] = useState('') |
|
|
@ -117,20 +183,53 @@ const MirroringDetail = (props) => { |
|
|
setIndeterminate(!!checkedList.length && checkedList.length < showCameraList.length); |
|
|
setIndeterminate(!!checkedList.length && checkedList.length < showCameraList.length); |
|
|
setCheckall(checkedList.length === showCameraList.length); |
|
|
setCheckall(checkedList.length === showCameraList.length); |
|
|
} |
|
|
} |
|
|
function topublish(publish){//编辑镜像信息 |
|
|
function topublish (publish) {//编辑镜像信息 |
|
|
let mirrordata={ |
|
|
let filterGroupnum=0 |
|
|
mirrorId:mirrorId, |
|
|
let cantopublish=true |
|
|
template:template, |
|
|
for (let i = 0; i < filterGroup.length; i++) { |
|
|
title:headerName, |
|
|
for (let j = 0; j < filterGroup.length; j++) { |
|
|
showHeader:showHeader, |
|
|
if(filterGroup[i].name==filterGroup[j].name){ |
|
|
publish:publish, |
|
|
filterGroupnum++ |
|
|
tree:treeData, |
|
|
} |
|
|
filterGroup:filterGroup |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
if(filterGroupnum>filterGroup.length){ |
|
|
|
|
|
cantopublish=false |
|
|
|
|
|
let opts = { |
|
|
|
|
|
content: '筛选项名称不能重复，请修改', |
|
|
|
|
|
duration: 3, |
|
|
|
|
|
}; |
|
|
|
|
|
Toast.error(opts) |
|
|
|
|
|
}else{ |
|
|
|
|
|
for (let k = 0; k < filterGroup.length; k++) { |
|
|
|
|
|
let filtersarr=[] |
|
|
|
|
|
for (let l = 0; l < filterGroup[k].filters.length; l++) { |
|
|
|
|
|
filtersarr.push(filterGroup[k].filters[l].name) |
|
|
|
|
|
} |
|
|
|
|
|
if(Array.from(new Set(filtersarr)).length<filterGroup[k].filters.length){ |
|
|
|
|
|
cantopublish=false |
|
|
|
|
|
Toast.error({ |
|
|
|
|
|
content: '标签组名称不能重复，请修改', |
|
|
|
|
|
duration: 3, |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
if(cantopublish){ |
|
|
|
|
|
let mirrordata = { |
|
|
|
|
|
mirrorId: mirrorId, |
|
|
|
|
|
template: template, |
|
|
|
|
|
title: headerName, |
|
|
|
|
|
showHeader: showHeader, |
|
|
|
|
|
publish: publish, |
|
|
|
|
|
tree: treeData, |
|
|
|
|
|
filterGroup: filterGroup |
|
|
} |
|
|
} |
|
|
dispatch(openness.putMirror(mirrordata)).then((res) => { |
|
|
dispatch(openness.putMirror(mirrordata)).then((res) => { |
|
|
console.log('res',res); |
|
|
history.goBack() |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
function nodeDelete (item) {//删除树状子节点 |
|
|
function nodeDelete (item) {//删除树状子节点 |
|
|
let mainData = JSON.parse(JSON.stringify(treeData)) |
|
|
let mainData = JSON.parse(JSON.stringify(treeData)) |
|
|
let nodeKeyArr = item.key.split('-') |
|
|
let nodeKeyArr = item.key.split('-') |
|
|
@ -183,6 +282,7 @@ const MirroringDetail = (props) => { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
sethasModify(true) |
|
|
setAddCamera(false) |
|
|
setAddCamera(false) |
|
|
setTreeData(mainData) |
|
|
setTreeData(mainData) |
|
|
} |
|
|
} |
|
|
@ -240,6 +340,7 @@ const MirroringDetail = (props) => { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
sethasModify(true) |
|
|
setTreeData(mainData) |
|
|
setTreeData(mainData) |
|
|
} |
|
|
} |
|
|
function changeLable (value, item) {//编辑摄像头名称 |
|
|
function changeLable (value, item) {//编辑摄像头名称 |
|
|
@ -270,6 +371,7 @@ const MirroringDetail = (props) => { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
sethasModify(true) |
|
|
setTreeData(mainData) |
|
|
setTreeData(mainData) |
|
|
} |
|
|
} |
|
|
function lableBlur () { |
|
|
function lableBlur () { |
|
|
@ -277,7 +379,6 @@ const MirroringDetail = (props) => { |
|
|
} |
|
|
} |
|
|
function cameraAdd (item) {//添加摄像头 |
|
|
function cameraAdd (item) {//添加摄像头 |
|
|
let myplainOptions = JSON.parse(JSON.stringify(plainOptions)) |
|
|
let myplainOptions = JSON.parse(JSON.stringify(plainOptions)) |
|
|
for (let i = 0; i < myplainOptions.length; i++) {//摄像头列表 |
|
|
|
|
|
for (let j = 0; j < treeData.length; j++) {//第一级 |
|
|
for (let j = 0; j < treeData.length; j++) {//第一级 |
|
|
if (treeData[j].children) {//有没有子集 |
|
|
if (treeData[j].children) {//有没有子集 |
|
|
for (let k = 0; k < treeData[j].children.length; k++) {//第二级 |
|
|
for (let k = 0; k < treeData[j].children.length; k++) {//第二级 |
|
|
@ -286,20 +387,25 @@ const MirroringDetail = (props) => { |
|
|
if (treeData[j].children[k].children[l].children) {//有没有子集 |
|
|
if (treeData[j].children[k].children[l].children) {//有没有子集 |
|
|
for (let p = 0; p < treeData[j].children[k].children[l].children.length; p++) { |
|
|
for (let p = 0; p < treeData[j].children[k].children[l].children.length; p++) { |
|
|
if (treeData[j].children[k].children[l].children[p].cameraId) { |
|
|
if (treeData[j].children[k].children[l].children[p].cameraId) { |
|
|
|
|
|
for (let i = 0; i < myplainOptions.length; i++) { |
|
|
if (myplainOptions[i].value == treeData[j].children[k].children[l].children[p].cameraId) { |
|
|
if (myplainOptions[i].value == treeData[j].children[k].children[l].children[p].cameraId) { |
|
|
myplainOptions.splice(i, 1) |
|
|
myplainOptions.splice(i, 1) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
else if (treeData[j].children[k].children[l].cameraId) {//有没有摄像头 |
|
|
else if (treeData[j].children[k].children[l].cameraId) {//有没有摄像头 |
|
|
|
|
|
for (let i = 0; i < myplainOptions.length; i++) { |
|
|
if (myplainOptions[i].value == treeData[j].children[k].children[l].cameraId) { |
|
|
if (myplainOptions[i].value == treeData[j].children[k].children[l].cameraId) { |
|
|
myplainOptions.splice(i, 1) |
|
|
myplainOptions.splice(i, 1) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
else if (treeData[j].children[k].cameraId) {//有没有摄像头 |
|
|
else if (treeData[j].children[k].cameraId) {//有没有摄像头 |
|
|
|
|
|
for (let i = 0; i < myplainOptions.length; i++) { |
|
|
if (myplainOptions[i].value == treeData[j].children[k].cameraId) { |
|
|
if (myplainOptions[i].value == treeData[j].children[k].cameraId) { |
|
|
myplainOptions.splice(i, 1) |
|
|
myplainOptions.splice(i, 1) |
|
|
} |
|
|
} |
|
|
@ -396,7 +502,7 @@ const MirroringDetail = (props) => { |
|
|
</div> |
|
|
</div> |
|
|
</Popconfirm> |
|
|
</Popconfirm> |
|
|
{ |
|
|
{ |
|
|
(item.children && item.children.length > 0 && item.children[0].cameraId) || keyArr.length > 2||item.cameraId ? ('') : ( |
|
|
(item.children && item.children.length > 0 && item.children[0].cameraId) || keyArr.length > 2 || item.cameraId ? ('') : ( |
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => nodeAdd(item)}> |
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => nodeAdd(item)}> |
|
|
<img |
|
|
<img |
|
|
src="/assets/images/imageImg/nodeadd.png" |
|
|
src="/assets/images/imageImg/nodeadd.png" |
|
|
@ -411,8 +517,13 @@ const MirroringDetail = (props) => { |
|
|
) |
|
|
) |
|
|
}; |
|
|
}; |
|
|
function toback () {//返回上一个页面 |
|
|
function toback () {//返回上一个页面 |
|
|
|
|
|
if (hasModify) { |
|
|
|
|
|
setBackVisible(true) |
|
|
|
|
|
} |
|
|
|
|
|
else { |
|
|
history.goBack() |
|
|
history.goBack() |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
function tochange (index) {//节点样式功能切换 |
|
|
function tochange (index) {//节点样式功能切换 |
|
|
setChooseNum(index); |
|
|
setChooseNum(index); |
|
|
setAddCamera(false); |
|
|
setAddCamera(false); |
|
|
@ -438,6 +549,7 @@ const MirroringDetail = (props) => { |
|
|
key: '0', |
|
|
key: '0', |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
sethasModify(true) |
|
|
setTreeData(mainData) |
|
|
setTreeData(mainData) |
|
|
} |
|
|
} |
|
|
function searchCamera () {//查询摄像头 |
|
|
function searchCamera () {//查询摄像头 |
|
|
@ -611,7 +723,7 @@ const MirroringDetail = (props) => { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
console.log('mainDatamainDatamainData',mainData); |
|
|
sethasModify(true) |
|
|
setTreeData(mainData); |
|
|
setTreeData(mainData); |
|
|
setAddCamera(false); |
|
|
setAddCamera(false); |
|
|
setMykeyword('') |
|
|
setMykeyword('') |
|
|
@ -642,22 +754,64 @@ const MirroringDetail = (props) => { |
|
|
filters: [] |
|
|
filters: [] |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
sethasModify(true) |
|
|
setFilterGroup(filterGroupList) |
|
|
setFilterGroup(filterGroupList) |
|
|
} |
|
|
} |
|
|
|
|
|
function toChangeScreen (num, name) {//筛选项去重 |
|
|
|
|
|
let samenum = 0 |
|
|
|
|
|
for (let i = 0; i < filterGroup.length; i++) { |
|
|
|
|
|
if (filterGroup[i].name == name) { |
|
|
|
|
|
samenum++ |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
if (samenum > 1) { |
|
|
|
|
|
let opts = { |
|
|
|
|
|
content: '筛选项名称不能重复，请修改', |
|
|
|
|
|
duration: 3, |
|
|
|
|
|
}; |
|
|
|
|
|
Toast.error(opts) |
|
|
|
|
|
setEditNum(num) |
|
|
|
|
|
} |
|
|
|
|
|
else { |
|
|
|
|
|
setEditNum(1000) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
function toChangeLabel (num, name, index) {//标签组去重 |
|
|
|
|
|
let samenum = 0 |
|
|
|
|
|
for (let i = 0; i < filterGroup[index].filters.length; i++) { |
|
|
|
|
|
if (filterGroup[index].filters[i].name == name) { |
|
|
|
|
|
samenum++ |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
if (samenum > 1) { |
|
|
|
|
|
let opts = { |
|
|
|
|
|
content: '标签组名称不能重复，请修改', |
|
|
|
|
|
duration: 3, |
|
|
|
|
|
}; |
|
|
|
|
|
Toast.error(opts) |
|
|
|
|
|
setLabelEditNum(num) |
|
|
|
|
|
} |
|
|
|
|
|
else { |
|
|
|
|
|
setLabelEditNum(1000) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
function switchOnChange (val, index) {//筛选项是否禁用 |
|
|
function switchOnChange (val, index) {//筛选项是否禁用 |
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
filterGroupList[index].forbidden = val |
|
|
filterGroupList[index].forbidden = val |
|
|
setFilterGroup(filterGroupList) |
|
|
setFilterGroup(filterGroupList) |
|
|
|
|
|
sethasModify(true) |
|
|
} |
|
|
} |
|
|
function screenDel (index) {//筛选项删除 |
|
|
function screenDel (index) {//筛选项删除 |
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
filterGroupList.splice(index, 1) |
|
|
filterGroupList.splice(index, 1) |
|
|
setFilterGroup(filterGroupList) |
|
|
setFilterGroup(filterGroupList) |
|
|
|
|
|
sethasModify(true) |
|
|
} |
|
|
} |
|
|
function toEditscreen (val, index) {//编辑筛选项名称 |
|
|
function toEditscreen (val, index) {//编辑筛选项名称 |
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
filterGroupList[index].name = val |
|
|
filterGroupList[index].name = val |
|
|
setFilterGroup(filterGroupList) |
|
|
setFilterGroup(filterGroupList) |
|
|
|
|
|
sethasModify(true) |
|
|
} |
|
|
} |
|
|
function toAddLabel () {//添加标签组 |
|
|
function toAddLabel () {//添加标签组 |
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
@ -675,29 +829,33 @@ const MirroringDetail = (props) => { |
|
|
cameraIds: [] |
|
|
cameraIds: [] |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
sethasModify(true) |
|
|
setFilterGroup(filterGroupList) |
|
|
setFilterGroup(filterGroupList) |
|
|
} |
|
|
} |
|
|
function labelDel (index) {//标签组删除 |
|
|
function labelDel (index) {//标签组删除 |
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
filterGroupList[addLabelNum].filters.splice(index, 1) |
|
|
filterGroupList[addLabelNum].filters.splice(index, 1) |
|
|
setFilterGroup(filterGroupList) |
|
|
setFilterGroup(filterGroupList) |
|
|
|
|
|
sethasModify(true) |
|
|
} |
|
|
} |
|
|
function addFiltersCamera (val, index) { |
|
|
function addFiltersCamera (val, index) {//标签组添加摄像头 |
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
filterGroupList[addLabelNum].filters[index].cameraIds = val |
|
|
filterGroupList[addLabelNum].filters[index].cameraIds = val |
|
|
setFilterGroup(filterGroupList) |
|
|
setFilterGroup(filterGroupList) |
|
|
|
|
|
sethasModify(true) |
|
|
} |
|
|
} |
|
|
function toEditLabel (val, index) { |
|
|
function toEditLabel (val, index) {//标签组名称修改 |
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
filterGroupList[addLabelNum].filters[index].name = val |
|
|
filterGroupList[addLabelNum].filters[index].name = val |
|
|
setFilterGroup(filterGroupList) |
|
|
setFilterGroup(filterGroupList) |
|
|
|
|
|
sethasModify(true) |
|
|
} |
|
|
} |
|
|
return ( |
|
|
return ( |
|
|
<div style={{ background: 'rgb(246, 250, 255)', height: '100%', width: '100%' }}> |
|
|
<div style={{ background: 'rgb(246, 250, 255)', height: '100%', width: '100%' }}> |
|
|
<div style={{ |
|
|
<div style={{ |
|
|
height: 64, background: "url(/assets/images/imageImg/banner.png)", backgroundSize: "100% 100%", display: 'flex', alignItems: 'center', justifyContent: 'space-between' |
|
|
height: 64, background: "url(/assets/images/imageImg/banner.png)", backgroundSize: "100% 100%", display: 'flex', alignItems: 'center', justifyContent: 'space-between' |
|
|
}}> |
|
|
}}> |
|
|
<div style={{ display: 'flex',alignItems: 'center' }}> |
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
<div style={{ width: 20, height: 20, marginLeft: 19, cursor: 'pointer' }} onClick={toback}> |
|
|
<div style={{ width: 20, height: 20, marginLeft: 19, cursor: 'pointer' }} onClick={toback}> |
|
|
<img |
|
|
<img |
|
|
src="/assets/images/imageImg/toback.png" |
|
|
src="/assets/images/imageImg/toback.png" |
|
|
@ -708,7 +866,7 @@ const MirroringDetail = (props) => { |
|
|
{ |
|
|
{ |
|
|
editHeaderName ? ( |
|
|
editHeaderName ? ( |
|
|
<div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}> |
|
|
<div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}> |
|
|
<Input value={headerName} onBlur={() => { setEditHeaderName(false) }} onChange={(value) => setHeaderName(value)} style={{ width: 200,color: 'rgba(255,255,255,0.9)',background: 'rgba(0,0,0,0.2)' }} maxLength={20} className='inputpadding'></Input> |
|
|
<Input value={headerName} onBlur={() => { setEditHeaderName(false) }} onChange={(value) => setHeaderName(value)} style={{ width: 200, color: 'rgba(255,255,255,0.9)', background: 'rgba(0,0,0,0.2)' }} maxLength={20} className='inputpadding'></Input> |
|
|
</div> |
|
|
</div> |
|
|
) : ( |
|
|
) : ( |
|
|
<div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}> |
|
|
<div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}> |
|
|
@ -716,7 +874,7 @@ const MirroringDetail = (props) => { |
|
|
</div> |
|
|
</div> |
|
|
) |
|
|
) |
|
|
} |
|
|
} |
|
|
<div style={{ width: 12, height: 12, marginLeft: 8, marginTop: 1, cursor: 'pointer',display:'flex' }} onClick={changeHeaderName}> |
|
|
<div style={{ width: 12, height: 12, marginLeft: 8, marginTop: 1, cursor: 'pointer', display: 'flex' }} onClick={changeHeaderName}> |
|
|
<img |
|
|
<img |
|
|
src="/assets/images/imageImg/nameChange.png" |
|
|
src="/assets/images/imageImg/nameChange.png" |
|
|
alt="设置" |
|
|
alt="设置" |
|
|
@ -725,21 +883,21 @@ const MirroringDetail = (props) => { |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div style={{ display: 'flex', }}> |
|
|
<div style={{ display: 'flex', }}> |
|
|
<div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }} onClick={()=>{setVideoPlay(!videoPlay)}}> |
|
|
<div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }} onClick={() => { setVideoPlay(!videoPlay) }}> |
|
|
<img |
|
|
<img |
|
|
src="/assets/images/imageImg/generate.png" |
|
|
src="/assets/images/imageImg/generate.png" |
|
|
alt="设置" |
|
|
alt="设置" |
|
|
style={{ width: '100%' }} |
|
|
style={{ width: '100%' }} |
|
|
/> |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
<div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }} onClick={()=>{topublish(false)}}> |
|
|
<div style={{ width: 22, height: 22, marginRight: 30, cursor: hasModify ? 'pointer' : 'not-allowed' }} onClick={() => { hasModify ? topublish(false) : '' }}> |
|
|
<img |
|
|
<img |
|
|
src="/assets/images/imageImg/save.png" |
|
|
src="/assets/images/imageImg/save.png" |
|
|
alt="设置" |
|
|
alt="设置" |
|
|
style={{ width: '100%' }} |
|
|
style={{ width: '100%' }} |
|
|
/> |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
<div style={{ width: 22, height: 22, marginRight: 44, cursor: 'pointer' }} onClick={()=>{topublish(true)}}> |
|
|
<div style={{ width: 22, height: 22, marginRight: 44, cursor: 'pointer' }} onClick={() => { topublish(true) }}> |
|
|
<img |
|
|
<img |
|
|
src="/assets/images/imageImg/upload.png" |
|
|
src="/assets/images/imageImg/upload.png" |
|
|
alt="设置" |
|
|
alt="设置" |
|
|
@ -848,7 +1006,7 @@ const MirroringDetail = (props) => { |
|
|
<div style={{ display: chooseNum == "1" ? "block" : "none", fontSize: 12 }} className="hasHeader"> |
|
|
<div style={{ display: chooseNum == "1" ? "block" : "none", fontSize: 12 }} className="hasHeader"> |
|
|
<div style={{ height: 41, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(226,226,226,0.2)' }}> |
|
|
<div style={{ height: 41, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(226,226,226,0.2)' }}> |
|
|
<div style={{ marginLeft: 20 }}>header</div> |
|
|
<div style={{ marginLeft: 20 }}>header</div> |
|
|
<div style={{ marginRight: 13 }}><Switch onChange={(v, e) => setShowHeader(v)} size="small" aria-label="是否有头部"></Switch></div> |
|
|
<div style={{ marginRight: 13 }}><Switch checked={showHeader} onChange={(v, e) => setShowHeader(v)} size="small" aria-label="是否有头部"></Switch></div> |
|
|
</div> |
|
|
</div> |
|
|
<div style={{ height: 41, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(226,226,226,0.2)', cursor: 'pointer' }} onClick={() => { setComingVisible(true) }}> |
|
|
<div style={{ height: 41, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(226,226,226,0.2)', cursor: 'pointer' }} onClick={() => { setComingVisible(true) }}> |
|
|
<div style={{ marginLeft: 20 }}>自定义样式</div> |
|
|
<div style={{ marginLeft: 20 }}>自定义样式</div> |
|
|
@ -914,7 +1072,7 @@ const MirroringDetail = (props) => { |
|
|
<div style={{ marginLeft: 20, color: 'rgba(0,0,0,0.65)' }}> |
|
|
<div style={{ marginLeft: 20, color: 'rgba(0,0,0,0.65)' }}> |
|
|
{ |
|
|
{ |
|
|
editNum == item.num ? ( |
|
|
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> |
|
|
<Input value={item.name} onBlur={() => { toChangeScreen(item.num, item.name) }} onChange={(value) => toEditscreen(value, index)} style={{ width: 120 }} maxLength={8} className='inputpadding' size='small'></Input> |
|
|
) : (item.name) |
|
|
) : (item.name) |
|
|
} |
|
|
} |
|
|
</div> |
|
|
</div> |
|
|
@ -982,7 +1140,7 @@ const MirroringDetail = (props) => { |
|
|
<div style={{ color: 'rgba(0,0,0,0.65)' }}> |
|
|
<div style={{ color: 'rgba(0,0,0,0.65)' }}> |
|
|
{ |
|
|
{ |
|
|
labelEditNum == item.num ? ( |
|
|
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> |
|
|
<Input value={item.name} onBlur={() => { toChangeLabel(item.num, item.name, addLabelNum) }} onChange={(value) => toEditLabel(value, index)} style={{ width: 120 }} maxLength={8} className='inputpadding' size='small'></Input> |
|
|
) : (item.name) |
|
|
) : (item.name) |
|
|
} |
|
|
} |
|
|
</div> |
|
|
</div> |
|
|
@ -1023,7 +1181,7 @@ const MirroringDetail = (props) => { |
|
|
} |
|
|
} |
|
|
</div> |
|
|
</div> |
|
|
<div style={{ flex: 1 }}> |
|
|
<div style={{ flex: 1 }}> |
|
|
<VideoScreen treeData={treeData} headerName={headerName} showHeader={showHeader} filterGroup={filterGroup} template={template} videoPlay={videoPlay}/> |
|
|
<VideoScreen treeData={treeData} headerName={headerName} showHeader={showHeader} filterGroup={filterGroup} template={template} videoPlay={videoPlay} /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<Modal |
|
|
<Modal |
|
|
@ -1035,6 +1193,7 @@ const MirroringDetail = (props) => { |
|
|
width={610} |
|
|
width={610} |
|
|
onCancel={() => { |
|
|
onCancel={() => { |
|
|
setComingVisible(false) |
|
|
setComingVisible(false) |
|
|
|
|
|
history.goBack() |
|
|
}} |
|
|
}} |
|
|
okText="确定" |
|
|
okText="确定" |
|
|
cancelText="取消" |
|
|
cancelText="取消" |
|
|
@ -1042,6 +1201,34 @@ const MirroringDetail = (props) => { |
|
|
> |
|
|
> |
|
|
开发中，敬请期待~ |
|
|
开发中，敬请期待~ |
|
|
</Modal> |
|
|
</Modal> |
|
|
|
|
|
<Modal |
|
|
|
|
|
title="提醒" |
|
|
|
|
|
visible={backVisible} |
|
|
|
|
|
width={610} |
|
|
|
|
|
onCancel={() => { |
|
|
|
|
|
setBackVisible(false) |
|
|
|
|
|
}} |
|
|
|
|
|
// okText="确定" |
|
|
|
|
|
// cancelText="取消" |
|
|
|
|
|
closeOnEsc={true} |
|
|
|
|
|
footer={ |
|
|
|
|
|
<div> |
|
|
|
|
|
<Button type="primary" onClick={() => { |
|
|
|
|
|
history.goBack() |
|
|
|
|
|
}}> |
|
|
|
|
|
取消 |
|
|
|
|
|
</Button> |
|
|
|
|
|
<Button theme='solid' type="primary" onClick={() => { |
|
|
|
|
|
topublish(false) |
|
|
|
|
|
setBackVisible(false) |
|
|
|
|
|
}}> |
|
|
|
|
|
确定 |
|
|
|
|
|
</Button> |
|
|
|
|
|
</div> |
|
|
|
|
|
} |
|
|
|
|
|
> |
|
|
|
|
|
是否保存修改？~ |
|
|
|
|
|
</Modal> |
|
|
</div> |
|
|
</div> |
|
|
) |
|
|
) |
|
|
} |
|
|
} |
|
|
|
