|
|
@ -9,10 +9,22 @@ const MirroringDetail = (props) => { |
|
|
|
const { history, dispatch, actions, user, loading, StatusPushList } = props; |
|
|
|
const { openness } = actions; |
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
let search=props.location.search |
|
|
|
let result = search.slice(1) |
|
|
|
let searcharr=result.split('&') |
|
|
|
if(searcharr.length==1){ |
|
|
|
setTemplate(searcharr[0].split('=')[1])//主题颜色 |
|
|
|
} |
|
|
|
else{ |
|
|
|
setTemplate(searcharr[0].split('=')[1])//主题颜色 |
|
|
|
setMirrorId(searcharr[2].split('=')[1])//id |
|
|
|
} |
|
|
|
equipmentGetCamera(); |
|
|
|
}, []); |
|
|
|
// const = useRef(0) |
|
|
|
|
|
|
|
const [showHeader,setShowHeader] = useState(false)//是否展示头部 |
|
|
|
const [mirrorId,setMirrorId] = useState(null)//id |
|
|
|
|
|
|
|
const [template,setTemplate] = useState('')//主题颜色 |
|
|
|
const [chooseNum, setChooseNum] = useState(0);//当前选择tab |
|
|
|
const [chooseList, setChooseList] = useState(['节点', '样式', '功能']); |
|
|
|
const [editKey, setEditKey] = useState('') |
|
|
@ -41,7 +53,12 @@ const MirroringDetail = (props) => { |
|
|
|
const [addLabel, setAddLabel] = useState(false)//标签组设置弹框 |
|
|
|
const [filterGroup, setFilterGroup] = useState([])//筛选项数据 |
|
|
|
const [addLabelNum, setAddLabelNum] = useState(0)//标签组添加 |
|
|
|
|
|
|
|
const [headerName, setHeaderName] = useState('我的镜像服务01');//添加视频弹框 |
|
|
|
const [editHeaderName, setEditHeaderName] = useState(false)//是否设置头部名称 |
|
|
|
const [videoPlay, setVideoPlay] = useState(false);//视频预览 |
|
|
|
function changeHeaderName () {//修改头部名称 |
|
|
|
setEditHeaderName(true) |
|
|
|
} |
|
|
|
function onCheckAllChange (e) {//全选 |
|
|
|
if (e.target.checked) { |
|
|
|
let mycheckList = [] |
|
|
@ -65,7 +82,7 @@ const MirroringDetail = (props) => { |
|
|
|
optionsList.push({ |
|
|
|
label: resList[i].name, |
|
|
|
value: resList[i].id, |
|
|
|
extra: 'DID:' + resList[i].gbCamera.did || '', |
|
|
|
extra: 'DID:' + (resList[i].gbCamera.did || ''), |
|
|
|
did: resList[i].gbCamera.did || '', |
|
|
|
id: resList[i].id, |
|
|
|
channelNo: resList[i].channelNo, |
|
|
@ -79,7 +96,7 @@ const MirroringDetail = (props) => { |
|
|
|
optionsList.push({ |
|
|
|
label: resList[i].name, |
|
|
|
value: resList[i].id, |
|
|
|
extra: 'DID:' + resList[i].gbCamera.did || '', |
|
|
|
extra: 'DID:' + (resList[i].gbCamera.did || ''), |
|
|
|
did: resList[i].gbCamera.did || '', |
|
|
|
id: resList[i].id, |
|
|
|
channelNo: resList[i].channelNo, |
|
|
@ -100,9 +117,20 @@ const MirroringDetail = (props) => { |
|
|
|
setIndeterminate(!!checkedList.length && checkedList.length < showCameraList.length); |
|
|
|
setCheckall(checkedList.length === showCameraList.length); |
|
|
|
} |
|
|
|
useEffect(() => { |
|
|
|
equipmentGetCamera(); |
|
|
|
}, []); |
|
|
|
function topublish(publish){//编辑镜像信息 |
|
|
|
let mirrordata={ |
|
|
|
mirrorId:mirrorId, |
|
|
|
template:template, |
|
|
|
title:headerName, |
|
|
|
showHeader:showHeader, |
|
|
|
publish:publish, |
|
|
|
tree:treeData, |
|
|
|
filterGroup:filterGroup |
|
|
|
} |
|
|
|
dispatch(openness.putMirror(mirrordata)).then((res) => { |
|
|
|
console.log('res',res); |
|
|
|
}) |
|
|
|
} |
|
|
|
function nodeDelete (item) {//删除树状子节点 |
|
|
|
let mainData = JSON.parse(JSON.stringify(treeData)) |
|
|
|
let nodeKeyArr = item.key.split('-') |
|
|
@ -368,7 +396,7 @@ const MirroringDetail = (props) => { |
|
|
|
</div> |
|
|
|
</Popconfirm> |
|
|
|
{ |
|
|
|
(item.children && item.children.length > 0 && item.children[0].cameraId) || keyArr.length > 2 ? ('') : ( |
|
|
|
(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)}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nodeadd.png" |
|
|
@ -443,13 +471,13 @@ const MirroringDetail = (props) => { |
|
|
|
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1), |
|
|
|
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1), |
|
|
|
cameraId: plainOptions[q].value, |
|
|
|
videoData:{ |
|
|
|
camera: { |
|
|
|
channelNo: plainOptions[q].channelNo, |
|
|
|
content: plainOptions[q].content, |
|
|
|
serialNo: plainOptions[q].serialNo, |
|
|
|
type: plainOptions[q].type, |
|
|
|
yingshiToken:plainOptions[q].yingshiToken, |
|
|
|
id:plainOptions[q].id, |
|
|
|
yingshiToken: plainOptions[q].yingshiToken, |
|
|
|
id: plainOptions[q].id, |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
@ -461,13 +489,13 @@ const MirroringDetail = (props) => { |
|
|
|
value: (Number(thekeyarr[0])) + '-0', |
|
|
|
key: (Number(thekeyarr[0])) + '-0', |
|
|
|
cameraId: plainOptions[q].value, |
|
|
|
videoData:{ |
|
|
|
camera: { |
|
|
|
channelNo: plainOptions[q].channelNo, |
|
|
|
content: plainOptions[q].content, |
|
|
|
serialNo: plainOptions[q].serialNo, |
|
|
|
type: plainOptions[q].type, |
|
|
|
yingshiToken:plainOptions[q].yingshiToken, |
|
|
|
id:plainOptions[q].id, |
|
|
|
yingshiToken: plainOptions[q].yingshiToken, |
|
|
|
id: plainOptions[q].id, |
|
|
|
} |
|
|
|
}] |
|
|
|
} |
|
|
@ -492,13 +520,13 @@ const MirroringDetail = (props) => { |
|
|
|
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, |
|
|
|
videoData:{ |
|
|
|
camera: { |
|
|
|
channelNo: plainOptions[q].channelNo, |
|
|
|
content: plainOptions[q].content, |
|
|
|
serialNo: plainOptions[q].serialNo, |
|
|
|
type: plainOptions[q].type, |
|
|
|
yingshiToken:plainOptions[q].yingshiToken, |
|
|
|
id:plainOptions[q].id, |
|
|
|
yingshiToken: plainOptions[q].yingshiToken, |
|
|
|
id: plainOptions[q].id, |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
@ -510,13 +538,13 @@ const MirroringDetail = (props) => { |
|
|
|
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0', |
|
|
|
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0', |
|
|
|
cameraId: plainOptions[q].value, |
|
|
|
videoData:{ |
|
|
|
camera: { |
|
|
|
channelNo: plainOptions[q].channelNo, |
|
|
|
content: plainOptions[q].content, |
|
|
|
serialNo: plainOptions[q].serialNo, |
|
|
|
type: plainOptions[q].type, |
|
|
|
yingshiToken:plainOptions[q].yingshiToken, |
|
|
|
id:plainOptions[q].id, |
|
|
|
yingshiToken: plainOptions[q].yingshiToken, |
|
|
|
id: plainOptions[q].id, |
|
|
|
} |
|
|
|
}] |
|
|
|
} |
|
|
@ -545,13 +573,13 @@ const MirroringDetail = (props) => { |
|
|
|
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, |
|
|
|
videoData:{ |
|
|
|
camera: { |
|
|
|
channelNo: plainOptions[q].channelNo, |
|
|
|
content: plainOptions[q].content, |
|
|
|
serialNo: plainOptions[q].serialNo, |
|
|
|
type: plainOptions[q].type, |
|
|
|
yingshiToken:plainOptions[q].yingshiToken, |
|
|
|
id:plainOptions[q].id, |
|
|
|
yingshiToken: plainOptions[q].yingshiToken, |
|
|
|
id: plainOptions[q].id, |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
@ -563,13 +591,13 @@ const MirroringDetail = (props) => { |
|
|
|
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, |
|
|
|
videoData:{ |
|
|
|
camera: { |
|
|
|
channelNo: plainOptions[q].channelNo, |
|
|
|
content: plainOptions[q].content, |
|
|
|
serialNo: plainOptions[q].serialNo, |
|
|
|
type: plainOptions[q].type, |
|
|
|
yingshiToken:plainOptions[q].yingshiToken, |
|
|
|
id:plainOptions[q].id, |
|
|
|
yingshiToken: plainOptions[q].yingshiToken, |
|
|
|
id: plainOptions[q].id, |
|
|
|
} |
|
|
|
}] |
|
|
|
} |
|
|
@ -583,6 +611,7 @@ const MirroringDetail = (props) => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
console.log('mainDatamainDatamainData',mainData); |
|
|
|
setTreeData(mainData); |
|
|
|
setAddCamera(false); |
|
|
|
setMykeyword('') |
|
|
@ -668,7 +697,7 @@ const MirroringDetail = (props) => { |
|
|
|
<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={{ display: 'flex',alignItems: 'center' }}> |
|
|
|
<div style={{ width: 20, height: 20, marginLeft: 19, cursor: 'pointer' }} onClick={toback}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/toback.png" |
|
|
@ -676,10 +705,18 @@ const MirroringDetail = (props) => { |
|
|
|
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' }}> |
|
|
|
{ |
|
|
|
editHeaderName ? ( |
|
|
|
<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> |
|
|
|
</div> |
|
|
|
) : ( |
|
|
|
<div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}> |
|
|
|
{headerName} |
|
|
|
</div> |
|
|
|
) |
|
|
|
} |
|
|
|
<div style={{ width: 12, height: 12, marginLeft: 8, marginTop: 1, cursor: 'pointer',display:'flex' }} onClick={changeHeaderName}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nameChange.png" |
|
|
|
alt="设置" |
|
|
@ -688,21 +725,21 @@ const MirroringDetail = (props) => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', }}> |
|
|
|
<div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }}> |
|
|
|
<div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }} onClick={()=>{setVideoPlay(!videoPlay)}}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/generate.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }}> |
|
|
|
<div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }} onClick={()=>{topublish(false)}}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/save.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ width: 22, height: 22, marginRight: 44, cursor: 'pointer' }}> |
|
|
|
<div style={{ width: 22, height: 22, marginRight: 44, cursor: 'pointer' }} onClick={()=>{topublish(true)}}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/upload.png" |
|
|
|
alt="设置" |
|
|
@ -811,7 +848,7 @@ const MirroringDetail = (props) => { |
|
|
|
<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 style={{ marginRight: 13 }}><Switch onChange={(v, e) => setShowHeader(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> |
|
|
@ -986,7 +1023,7 @@ const MirroringDetail = (props) => { |
|
|
|
} |
|
|
|
</div> |
|
|
|
<div style={{ flex: 1 }}> |
|
|
|
<VideoScreen treeData={treeData}/> |
|
|
|
<VideoScreen treeData={treeData} headerName={headerName} showHeader={showHeader} filterGroup={filterGroup} template={template} videoPlay={videoPlay}/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<Modal |
|
|
|