|
|
|
@ -2,458 +2,462 @@ 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 VideoScreen from '../components/videoScreen' |
|
|
|
|
|
|
|
const MirroringDetail = (props) => { |
|
|
|
const { history, dispatch, actions, user, loading, StatusPushList } = props; |
|
|
|
const { openness } = actions; |
|
|
|
useEffect(() => { |
|
|
|
const { history, dispatch, actions, user, loading, StatusPushList } = props; |
|
|
|
const { openness } = actions; |
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
}, []); |
|
|
|
// const = useRef(0) |
|
|
|
}, []); |
|
|
|
// const = useRef(0) |
|
|
|
|
|
|
|
const [chooseNum, setChooseNum] = useState(0);//当前选择tab |
|
|
|
const [chooseList, setChooseList] = useState(['节点', '样式', '功能']); |
|
|
|
const [editKey, setEditKey] = useState('') |
|
|
|
const [comingVisible, setComingVisible] = useState(false) |
|
|
|
const [treeData, setTreeData] = useState([//树形控件数据 |
|
|
|
{ |
|
|
|
label: '主要节点1', |
|
|
|
value: '0', |
|
|
|
key: '0', |
|
|
|
}, |
|
|
|
]); |
|
|
|
const searchData = useRef({})//摄像头查询条件 |
|
|
|
const [search, setSearch] = useState({}); //搜索条件 |
|
|
|
const [indeterminate, setIndeterminate] = useState(true);//全选 |
|
|
|
const [checkAll, setCheckall] = useState(false);//全选是否 |
|
|
|
const onCheckAllChange = (e) => {//全选 |
|
|
|
console.log(e); |
|
|
|
setCheckedList(e.target.checked ? plainOptions : []); |
|
|
|
setIndeterminate(false); |
|
|
|
setCheckall(e.target.checked); |
|
|
|
}; |
|
|
|
const equipmentGetCamera = () => { |
|
|
|
searchData.current = { ...search } |
|
|
|
dispatch(openness.getCamera(searchData.current)).then((res) => { |
|
|
|
// limits.current = res.payload.data.data.length |
|
|
|
console.log(res.payload.data.data); |
|
|
|
}); |
|
|
|
} |
|
|
|
useEffect(() => { |
|
|
|
equipmentGetCamera(); |
|
|
|
}, []); |
|
|
|
function nodeDelete (item) {//删除树状子节点 |
|
|
|
let mainData = JSON.parse(JSON.stringify(treeData)) |
|
|
|
let nodeKeyArr = item.key.split('-') |
|
|
|
if (nodeKeyArr.length == 1) { |
|
|
|
mainData.splice( |
|
|
|
mainData.indexOf(mainData.find(function (element) { |
|
|
|
return element.key === item.key |
|
|
|
})), 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) |
|
|
|
const [chooseNum, setChooseNum] = useState(0);//当前选择tab |
|
|
|
const [chooseList, setChooseList] = useState(['节点', '样式', '功能']); |
|
|
|
const [editKey, setEditKey] = useState('') |
|
|
|
const [comingVisible, setComingVisible] = useState(false) |
|
|
|
const [treeData, setTreeData] = useState([//树形控件数据 |
|
|
|
{ |
|
|
|
label: '主要节点1', |
|
|
|
value: '0', |
|
|
|
key: '0', |
|
|
|
}, |
|
|
|
]); |
|
|
|
const searchData = useRef({})//摄像头查询条件 |
|
|
|
const [search, setSearch] = useState({}); //搜索条件 |
|
|
|
const [indeterminate, setIndeterminate] = useState(true);//全选 |
|
|
|
const [checkAll, setCheckall] = useState(false);//全选是否 |
|
|
|
const onCheckAllChange = (e) => {//全选 |
|
|
|
console.log(e); |
|
|
|
setCheckedList(e.target.checked ? plainOptions : []); |
|
|
|
setIndeterminate(false); |
|
|
|
setCheckall(e.target.checked); |
|
|
|
}; |
|
|
|
const equipmentGetCamera = () => { |
|
|
|
searchData.current = { ...search } |
|
|
|
dispatch(openness.getCamera(searchData.current)).then((res) => { |
|
|
|
// limits.current = res.payload.data.data.length |
|
|
|
console.log(res.payload.data.data); |
|
|
|
}); |
|
|
|
} |
|
|
|
useEffect(() => { |
|
|
|
equipmentGetCamera(); |
|
|
|
}, []); |
|
|
|
function nodeDelete (item) {//删除树状子节点 |
|
|
|
let mainData = JSON.parse(JSON.stringify(treeData)) |
|
|
|
let nodeKeyArr = item.key.split('-') |
|
|
|
if (nodeKeyArr.length == 1) { |
|
|
|
mainData.splice( |
|
|
|
mainData.indexOf(mainData.find(function (element) { |
|
|
|
return element.key === item.key |
|
|
|
})), 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) |
|
|
|
} |
|
|
|
} 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) |
|
|
|
} |
|
|
|
} 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) |
|
|
|
} |
|
|
|
} |
|
|
|
} 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) |
|
|
|
} |
|
|
|
} |
|
|
|
} 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) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
setTreeData(mainData) |
|
|
|
} |
|
|
|
function nodeAdd (item) {//添加树状子节点 |
|
|
|
let mainData = JSON.parse(JSON.stringify(treeData)) |
|
|
|
let nodeKeyArr = item.key.split('-') |
|
|
|
if (nodeKeyArr.length == 1) { |
|
|
|
for (let index = 0; index < mainData.length; index++) { |
|
|
|
if (mainData[index].key == item.key) { |
|
|
|
if (mainData[index].children && mainData[index].children > 0) { |
|
|
|
let mainKey = mainData[index].children[mainData[index].children.length - 1].key |
|
|
|
let thekeyarr = mainKey.split('-') |
|
|
|
mainData[index].children.push({ |
|
|
|
label: '二级节点' + (Number(thekeyarr[1]) + 2), |
|
|
|
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1), |
|
|
|
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1), |
|
|
|
}) |
|
|
|
} |
|
|
|
else { |
|
|
|
let mainKey = mainData[index].key |
|
|
|
let thekeyarr = mainKey.split('-') |
|
|
|
mainData[index].children = [{ |
|
|
|
label: '二级节点1', |
|
|
|
value: (Number(thekeyarr[0])) + '-0', |
|
|
|
key: (Number(thekeyarr[0])) + '-0', |
|
|
|
}] |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
setTreeData(mainData) |
|
|
|
} |
|
|
|
function nodeAdd (item) {//添加树状子节点 |
|
|
|
let mainData = JSON.parse(JSON.stringify(treeData)) |
|
|
|
let nodeKeyArr = item.key.split('-') |
|
|
|
if (nodeKeyArr.length == 1) { |
|
|
|
for (let index = 0; index < mainData.length; index++) { |
|
|
|
if (mainData[index].key == item.key) { |
|
|
|
if (mainData[index].children && mainData[index].children > 0) { |
|
|
|
let mainKey = mainData[index].children[mainData[index].children.length - 1].key |
|
|
|
let thekeyarr = mainKey.split('-') |
|
|
|
mainData[index].children.push({ |
|
|
|
label: '二级节点' + (Number(thekeyarr[1]) + 2), |
|
|
|
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1), |
|
|
|
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1), |
|
|
|
}) |
|
|
|
} |
|
|
|
else { |
|
|
|
let mainKey = mainData[index].key |
|
|
|
let thekeyarr = mainKey.split('-') |
|
|
|
mainData[index].children = [{ |
|
|
|
label: '二级节点1', |
|
|
|
value: (Number(thekeyarr[0])) + '-0', |
|
|
|
key: (Number(thekeyarr[0])) + '-0', |
|
|
|
}] |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (nodeKeyArr.length == 2) { |
|
|
|
for (let index = 0; index < mainData.length; index++) { |
|
|
|
for (let j = 0; j < mainData[index].children.length; j++) { |
|
|
|
if (mainData[index].children[j].key == item.key) { |
|
|
|
if (mainData[index].children[j].children && mainData[index].children[j].children.length > 0) { |
|
|
|
let mainKey = mainData[index].children[j].children[mainData[index].children[j].children.length - 1].key |
|
|
|
let thekeyarr = mainKey.split('-') |
|
|
|
mainData[index].children[j].children.push({ |
|
|
|
label: '三级节点' + (Number(thekeyarr[2]) + 2), |
|
|
|
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1), |
|
|
|
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1), |
|
|
|
}) |
|
|
|
} |
|
|
|
else { |
|
|
|
let mainKey = mainData[index].children[j].key |
|
|
|
let thekeyarr = mainKey.split('-') |
|
|
|
mainData[index].children[j].children = [{ |
|
|
|
label: '三级节点1', |
|
|
|
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0', |
|
|
|
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0', |
|
|
|
}] |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (nodeKeyArr.length == 2) { |
|
|
|
for (let index = 0; index < mainData.length; index++) { |
|
|
|
for (let j = 0; j < mainData[index].children.length; j++) { |
|
|
|
if (mainData[index].children[j].key == item.key) { |
|
|
|
if (mainData[index].children[j].children && mainData[index].children[j].children.length > 0) { |
|
|
|
let mainKey = mainData[index].children[j].children[mainData[index].children[j].children.length - 1].key |
|
|
|
let thekeyarr = mainKey.split('-') |
|
|
|
mainData[index].children[j].children.push({ |
|
|
|
label: '三级节点' + (Number(thekeyarr[2]) + 2), |
|
|
|
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1), |
|
|
|
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1), |
|
|
|
}) |
|
|
|
} |
|
|
|
else { |
|
|
|
let mainKey = mainData[index].children[j].key |
|
|
|
let thekeyarr = mainKey.split('-') |
|
|
|
mainData[index].children[j].children = [{ |
|
|
|
label: '三级节点1', |
|
|
|
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0', |
|
|
|
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0', |
|
|
|
}] |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
setTreeData(mainData) |
|
|
|
} |
|
|
|
function changeLable (value, item) {//编辑摄像头名称 |
|
|
|
console.log('valvalval', value); |
|
|
|
console.log('itemitem', item); |
|
|
|
let mainData = JSON.parse(JSON.stringify(treeData)) |
|
|
|
let nodeKeyArr = item.key.split('-') |
|
|
|
if (nodeKeyArr.length == 1) { |
|
|
|
for (let index = 0; index < mainData.length; index++) { |
|
|
|
if (mainData[index].key == item.key) { |
|
|
|
mainData[index].label = value |
|
|
|
} |
|
|
|
} |
|
|
|
setTreeData(mainData) |
|
|
|
} |
|
|
|
function changeLable (value, item) {//编辑摄像头名称 |
|
|
|
console.log('valvalval', value); |
|
|
|
console.log('itemitem', item); |
|
|
|
let mainData = JSON.parse(JSON.stringify(treeData)) |
|
|
|
let nodeKeyArr = item.key.split('-') |
|
|
|
if (nodeKeyArr.length == 1) { |
|
|
|
for (let index = 0; index < mainData.length; index++) { |
|
|
|
if (mainData[index].key == item.key) { |
|
|
|
mainData[index].label = value |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (nodeKeyArr.length == 2) { |
|
|
|
for (let index = 0; index < mainData.length; index++) { |
|
|
|
for (let j = 0; j < mainData[index].children.length; j++) { |
|
|
|
if (mainData[index].children[j].key == item.key) { |
|
|
|
mainData[index].children[j].label = value |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (nodeKeyArr.length == 2) { |
|
|
|
for (let index = 0; index < mainData.length; index++) { |
|
|
|
for (let j = 0; j < mainData[index].children.length; j++) { |
|
|
|
if (mainData[index].children[j].key == item.key) { |
|
|
|
mainData[index].children[j].label = value |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (nodeKeyArr.length == 3) { |
|
|
|
for (let index = 0; index < mainData.length; index++) { |
|
|
|
for (let j = 0; j < mainData[index].children.length; j++) { |
|
|
|
for (let k = 0; k < mainData[index].children[j].children.length; k++) { |
|
|
|
if (mainData[index].children[j].children[k].key == item.key) { |
|
|
|
mainData[index].children[j].children[k].label = value |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (nodeKeyArr.length == 3) { |
|
|
|
for (let index = 0; index < mainData.length; index++) { |
|
|
|
for (let j = 0; j < mainData[index].children.length; j++) { |
|
|
|
for (let k = 0; k < mainData[index].children[j].children.length; k++) { |
|
|
|
if (mainData[index].children[j].children[k].key == item.key) { |
|
|
|
mainData[index].children[j].children[k].label = value |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
setTreeData(mainData) |
|
|
|
} |
|
|
|
function lableBlur () { |
|
|
|
setEditKey('') |
|
|
|
} |
|
|
|
function cameraAdd (item) {//添加摄像头 |
|
|
|
} |
|
|
|
} |
|
|
|
setTreeData(mainData) |
|
|
|
} |
|
|
|
function lableBlur () { |
|
|
|
setEditKey('') |
|
|
|
} |
|
|
|
function cameraAdd (item) {//添加摄像头 |
|
|
|
|
|
|
|
} |
|
|
|
const renderLabel = (label, item) => {//树状展示 |
|
|
|
let keyArr = item.key.split('-') |
|
|
|
return ( |
|
|
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}> |
|
|
|
{ |
|
|
|
keyArr.length == 1 ? ( |
|
|
|
<div style={{ display: 'flex' }}> |
|
|
|
<div style={{ width: 13, height: 10 }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/folder.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ marginLeft: 8, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> |
|
|
|
{ |
|
|
|
editKey == item.key ? ( |
|
|
|
<Input value={label} onBlur={lableBlur} onChange={(value) => changeLable(value, item)} style={{ width: 65 }} className='inputpadding' size='small'></Input> |
|
|
|
) : |
|
|
|
( |
|
|
|
<Typography.Text |
|
|
|
ellipsis={{ showTooltip: true }} |
|
|
|
> |
|
|
|
{label} |
|
|
|
</Typography.Text>) |
|
|
|
} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : ( |
|
|
|
<div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> |
|
|
|
{ |
|
|
|
editKey == item.key ? ( |
|
|
|
<Input value={label} onBlur={lableBlur} onChange={(value) => changeLable(value, item)} style={{ width: 65 }} className='inputpadding' size='small'></Input> |
|
|
|
) : |
|
|
|
( |
|
|
|
<Typography.Text |
|
|
|
ellipsis={{ showTooltip: true }} |
|
|
|
> |
|
|
|
{label} |
|
|
|
</Typography.Text>) |
|
|
|
} |
|
|
|
</div> |
|
|
|
) |
|
|
|
} |
|
|
|
<div style={{ display: 'flex', paddingRight: 13 }}> |
|
|
|
{ |
|
|
|
!item.children || item.children < 1 ? ( |
|
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => cameraAdd(item)}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nodeCamera.png" |
|
|
|
alt="添加摄像头" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
) : ('') |
|
|
|
} |
|
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => { setEditKey(item.key) }}> |
|
|
|
} |
|
|
|
const renderLabel = (label, item) => {//树状展示 |
|
|
|
let keyArr = item.key.split('-') |
|
|
|
return ( |
|
|
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}> |
|
|
|
{ |
|
|
|
keyArr.length == 1 ? ( |
|
|
|
<div style={{ display: 'flex' }}> |
|
|
|
<div style={{ width: 13, height: 10 }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nodeEdit.png" |
|
|
|
alt="编辑" |
|
|
|
style={{ width: '100%' }} |
|
|
|
src="/assets/images/imageImg/folder.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<Popconfirm |
|
|
|
title="删除节点也会删除节点下的从属节点和视频，是否继续？" |
|
|
|
arrowPointAtCenter={false} |
|
|
|
showArrow={true} |
|
|
|
position="topRight" |
|
|
|
onConfirm={() => nodeDelete(item)}> |
|
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nodeDel.png" |
|
|
|
alt="删除" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</Popconfirm> |
|
|
|
{ |
|
|
|
keyArr.length > 2 ? ('') : ( |
|
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => nodeAdd(item)}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nodeadd.png" |
|
|
|
alt="添加子节点" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
) |
|
|
|
} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
}; |
|
|
|
function toback () {//返回上一个页面 |
|
|
|
history.goBack() |
|
|
|
} |
|
|
|
function tochange (index) {//节点样式功能切换 |
|
|
|
setChooseNum(index) |
|
|
|
} |
|
|
|
function addMainNode () {//增加主要节点 |
|
|
|
let mainData = JSON.parse(JSON.stringify(treeData)) |
|
|
|
if (mainData.length > 0) { |
|
|
|
let mainKey = mainData[mainData.length - 1].key |
|
|
|
mainKey = Number(mainKey) + 2 |
|
|
|
mainData.push({ |
|
|
|
label: '主要节点' + mainKey, |
|
|
|
value: String(mainKey - 1), |
|
|
|
key: String(mainKey - 1), |
|
|
|
}) |
|
|
|
} |
|
|
|
else { |
|
|
|
mainData.push({ |
|
|
|
label: '主要节点1', |
|
|
|
value: '0', |
|
|
|
key: '0', |
|
|
|
}) |
|
|
|
} |
|
|
|
setTreeData(mainData) |
|
|
|
} |
|
|
|
return ( |
|
|
|
<div style={{ background: 'rgb(246, 250, 255)', height: '100%', width: '100%' }}> |
|
|
|
<div style={{ |
|
|
|
height: 64, background: "url(/assets/images/imageImg/banner.png)", backgroundSize: "100% 100%", display: 'flex', alignItems: 'center', justifyContent: 'space-between' |
|
|
|
}}> |
|
|
|
<div style={{ display: 'flex', }}> |
|
|
|
<div style={{ width: 20, height: 20, marginLeft: 19, cursor: 'pointer' }} onClick={toback}> |
|
|
|
</div> |
|
|
|
<div style={{ marginLeft: 8, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> |
|
|
|
{ |
|
|
|
editKey == item.key ? ( |
|
|
|
<Input value={label} onBlur={lableBlur} onChange={(value) => changeLable(value, item)} style={{ width: 65 }} className='inputpadding' size='small'></Input> |
|
|
|
) : |
|
|
|
( |
|
|
|
<Typography.Text |
|
|
|
ellipsis={{ showTooltip: true }} |
|
|
|
> |
|
|
|
{label} |
|
|
|
</Typography.Text>) |
|
|
|
} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : ( |
|
|
|
<div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> |
|
|
|
{ |
|
|
|
editKey == item.key ? ( |
|
|
|
<Input value={label} onBlur={lableBlur} onChange={(value) => changeLable(value, item)} style={{ width: 65 }} className='inputpadding' size='small'></Input> |
|
|
|
) : |
|
|
|
( |
|
|
|
<Typography.Text |
|
|
|
ellipsis={{ showTooltip: true }} |
|
|
|
> |
|
|
|
{label} |
|
|
|
</Typography.Text>) |
|
|
|
} |
|
|
|
</div> |
|
|
|
) |
|
|
|
} |
|
|
|
<div style={{ display: 'flex', paddingRight: 13 }}> |
|
|
|
{ |
|
|
|
!item.children || item.children < 1 ? ( |
|
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => cameraAdd(item)}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/toback.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
src="/assets/images/imageImg/nodeCamera.png" |
|
|
|
alt="添加摄像头" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}> |
|
|
|
智慧小蓝智慧排涝视频融合系统 |
|
|
|
</div> |
|
|
|
<div style={{ width: 12, height: 12, marginLeft: 8, marginTop: 1, cursor: 'pointer' }}> |
|
|
|
</div> |
|
|
|
) : ('') |
|
|
|
} |
|
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => { setEditKey(item.key) }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nodeEdit.png" |
|
|
|
alt="编辑" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<Popconfirm |
|
|
|
title="删除节点也会删除节点下的从属节点和视频，是否继续？" |
|
|
|
arrowPointAtCenter={false} |
|
|
|
showArrow={true} |
|
|
|
position="topRight" |
|
|
|
onConfirm={() => nodeDelete(item)}> |
|
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nodeDel.png" |
|
|
|
alt="删除" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</Popconfirm> |
|
|
|
{ |
|
|
|
keyArr.length > 2 ? ('') : ( |
|
|
|
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => nodeAdd(item)}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nameChange.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
src="/assets/images/imageImg/nodeadd.png" |
|
|
|
alt="添加子节点" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', }}> |
|
|
|
<div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }}> |
|
|
|
</div> |
|
|
|
) |
|
|
|
} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
}; |
|
|
|
function toback () {//返回上一个页面 |
|
|
|
history.goBack() |
|
|
|
} |
|
|
|
function tochange (index) {//节点样式功能切换 |
|
|
|
setChooseNum(index) |
|
|
|
} |
|
|
|
function addMainNode () {//增加主要节点 |
|
|
|
let mainData = JSON.parse(JSON.stringify(treeData)) |
|
|
|
if (mainData.length > 0) { |
|
|
|
let mainKey = mainData[mainData.length - 1].key |
|
|
|
mainKey = Number(mainKey) + 2 |
|
|
|
mainData.push({ |
|
|
|
label: '主要节点' + mainKey, |
|
|
|
value: String(mainKey - 1), |
|
|
|
key: String(mainKey - 1), |
|
|
|
}) |
|
|
|
} |
|
|
|
else { |
|
|
|
mainData.push({ |
|
|
|
label: '主要节点1', |
|
|
|
value: '0', |
|
|
|
key: '0', |
|
|
|
}) |
|
|
|
} |
|
|
|
setTreeData(mainData) |
|
|
|
} |
|
|
|
return ( |
|
|
|
<div style={{ background: 'rgb(246, 250, 255)', height: '100%', width: '100%' }}> |
|
|
|
<div style={{ |
|
|
|
height: 64, background: "url(/assets/images/imageImg/banner.png)", backgroundSize: "100% 100%", display: 'flex', alignItems: 'center', justifyContent: 'space-between' |
|
|
|
}}> |
|
|
|
<div style={{ display: 'flex', }}> |
|
|
|
<div style={{ width: 20, height: 20, marginLeft: 19, cursor: 'pointer' }} onClick={toback}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/toback.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}> |
|
|
|
智慧小蓝智慧排涝视频融合系统 |
|
|
|
</div> |
|
|
|
<div style={{ width: 12, height: 12, marginLeft: 8, marginTop: 1, cursor: 'pointer' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nameChange.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', }}> |
|
|
|
<div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/save.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ width: 22, height: 22, marginRight: 44, cursor: 'pointer' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/upload.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', height: '100%' }}> |
|
|
|
<div style={{ height: "100%", width: 200, background: '#FFFFFF' }}> |
|
|
|
<div style={{ display: 'flex', height: 49, background: '#1859C1', border: '1px solid #1859C1', color: 'rgba(255,255,255,0.65)', fontSize: 14, width: '100%' }}> |
|
|
|
{chooseList.map((item, index) => { |
|
|
|
return ( |
|
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '33.3333%', cursor: 'pointer' }} |
|
|
|
key={index} |
|
|
|
className={index == chooseNum ? 'onchoose' : ''} |
|
|
|
onClick={() => tochange(index)} > |
|
|
|
{item} |
|
|
|
</div> |
|
|
|
) |
|
|
|
})} |
|
|
|
</div> |
|
|
|
{/* 节点 */} |
|
|
|
<div style={{ display: chooseNum == "0" ? "block" : "none", }}> |
|
|
|
<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 |
|
|
|
src="/assets/images/imageImg/save.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
src="/assets/images/imageImg/addMainNodes.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ width: 22, height: 22, marginRight: 44, cursor: 'pointer' }}> |
|
|
|
</div> |
|
|
|
<div style={{ marginLeft: 9, fontSize: 15, color: 'rgba(0,0,0,0.65)' }}> |
|
|
|
增加主要节点 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<Tree |
|
|
|
treeData={treeData} |
|
|
|
renderLabel={renderLabel} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
{/* 添加视频 */} |
|
|
|
<div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 200 }}> |
|
|
|
<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' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/upload.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
src="/assets/images/imageImg/close.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{display:'flex',height:'100%'}}> |
|
|
|
<div style={{ height: "100%", width: 200, background: '#FFFFFF' }}> |
|
|
|
<div style={{ display: 'flex', height: 49, background: '#1859C1', border: '1px solid #1859C1', color: 'rgba(255,255,255,0.65)', fontSize: 14, width: '100%' }}> |
|
|
|
{chooseList.map((item, index) => { |
|
|
|
return ( |
|
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '33.3333%', cursor: 'pointer' }} |
|
|
|
key={index} |
|
|
|
className={index == chooseNum ? 'onchoose' : ''} |
|
|
|
onClick={() => tochange(index)} > |
|
|
|
{item} |
|
|
|
</div> |
|
|
|
) |
|
|
|
})} |
|
|
|
</div> |
|
|
|
{/* 节点 */} |
|
|
|
<div style={{ display: chooseNum == "0" ? "block" : "none", }}> |
|
|
|
<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 |
|
|
|
src="/assets/images/imageImg/addMainNodes.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ marginLeft: 9, fontSize: 15, color: 'rgba(0,0,0,0.65)' }}> |
|
|
|
增加主要节点 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ borderBottom: '1px solid rgba(226,226,226,0.5)', background: '#FFFFFF' }}> |
|
|
|
<div style={{ display: 'flex', padding: "8px 10px 10px 10px", alignItems: 'center' }}> |
|
|
|
<div style={{ fontSize: 12 }}>摄像头名称</div> |
|
|
|
<div> |
|
|
|
<Input placeholder='请输入摄像头名称' style={{ width: 140, marginLeft: 10 }}></Input> |
|
|
|
</div> |
|
|
|
<Tree |
|
|
|
treeData={treeData} |
|
|
|
renderLabel={renderLabel} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
{/* 添加视频 */} |
|
|
|
<div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 200 }}> |
|
|
|
<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' }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/close.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ borderBottom: '1px solid rgba(226,226,226,0.5)', background: '#FFFFFF' }}> |
|
|
|
<div style={{ display: 'flex', padding: "8px 10px 10px 10px", alignItems: 'center' }}> |
|
|
|
<div style={{ fontSize: 12 }}>摄像头名称</div> |
|
|
|
<div> |
|
|
|
<Input placeholder='请输入摄像头名称' style={{ width: 140, marginLeft: 10 }}></Input> |
|
|
|
</div> |
|
|
|
<div style={{ width: 32, height: 32 }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/find.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex' }}> |
|
|
|
<div> |
|
|
|
<Checkbox |
|
|
|
indeterminate={indeterminate} |
|
|
|
onChange={onCheckAllChange} |
|
|
|
checked={checkAll} |
|
|
|
aria-label="Checkbox 示例" |
|
|
|
> |
|
|
|
全选 |
|
|
|
</Checkbox> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<Checkbox onChange={checked => console.log(checked)} aria-label="Checkbox 示例">隐藏添加过的</Checkbox> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ width: 32, height: 32 }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/find.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{/* 样式 */} |
|
|
|
<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={{ marginLeft: 20 }}>header</div> |
|
|
|
<div style={{ marginRight: 13 }}><Switch onChange={(v, e) => console.log(v)} size="small" aria-label="是否有头部"></Switch></div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex' }}> |
|
|
|
<div> |
|
|
|
<Checkbox |
|
|
|
indeterminate={indeterminate} |
|
|
|
onChange={onCheckAllChange} |
|
|
|
checked={checkAll} |
|
|
|
aria-label="Checkbox 示例" |
|
|
|
> |
|
|
|
全选 |
|
|
|
</Checkbox> |
|
|
|
</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={{ marginLeft: 20 }}>自定义样式</div> |
|
|
|
<div style={{ marginRight: 13, width: 9, height: 5, display: 'flex', alignItems: 'center', }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/down.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<Checkbox onChange={checked => console.log(checked)} aria-label="Checkbox 示例">隐藏添加过的</Checkbox> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{flex:1}}> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{/* 样式 */} |
|
|
|
<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={{ marginLeft: 20 }}>header</div> |
|
|
|
<div style={{ marginRight: 13 }}><Switch onChange={(v, e) => console.log(v)} size="small" aria-label="是否有头部"></Switch></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={{ marginLeft: 20 }}>自定义样式</div> |
|
|
|
<div style={{ marginRight: 13, width: 9, height: 5, display: 'flex', alignItems: 'center', }}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/down.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ flex: 1,height:'100%'}}> |
|
|
|
|
|
|
|
<VideoScreen /> |
|
|
|
|
|
|
|
</div> |
|
|
|
<Modal |
|
|
|
title="提醒" |
|
|
|
visible={comingVisible} |
|
|
|
onOk={() => { |
|
|
|
setComingVisible(false) |
|
|
|
}} |
|
|
|
width={610} |
|
|
|
onCancel={() => { |
|
|
|
setComingVisible(false) |
|
|
|
}} |
|
|
|
okText="确定" |
|
|
|
cancelText="取消" |
|
|
|
closeOnEsc={true} |
|
|
|
> |
|
|
|
开发中，敬请期待~ |
|
|
|
</Modal> |
|
|
|
</div> |
|
|
|
) |
|
|
|
</div> |
|
|
|
<Modal |
|
|
|
title="提醒" |
|
|
|
visible={comingVisible} |
|
|
|
onOk={() => { |
|
|
|
setComingVisible(false) |
|
|
|
}} |
|
|
|
width={610} |
|
|
|
onCancel={() => { |
|
|
|
setComingVisible(false) |
|
|
|
}} |
|
|
|
okText="确定" |
|
|
|
cancelText="取消" |
|
|
|
closeOnEsc={true} |
|
|
|
> |
|
|
|
开发中，敬请期待~ |
|
|
|
</Modal> |
|
|
|
</div> |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
function mapStateToProps (state) { |
|
|
|
const { auth, global } = state; |
|
|
|
return { |
|
|
|
user: auth.user, |
|
|
|
actions: global.actions, |
|
|
|
}; |
|
|
|
const { auth, global } = state; |
|
|
|
return { |
|
|
|
user: auth.user, |
|
|
|
actions: global.actions, |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
export default connect(mapStateToProps)(MirroringDetail); |
|
|
|
|
