|
|
@ -13,6 +13,7 @@ const MirroringDetail = (props) => { |
|
|
|
}, []); |
|
|
|
// const = useRef(0) |
|
|
|
|
|
|
|
const [themeColor,setThemeColor] = useState('')//主题颜色 |
|
|
|
const [chooseNum, setChooseNum] = useState(0);//当前选择tab |
|
|
|
const [chooseList, setChooseList] = useState(['节点', '样式', '功能']); |
|
|
|
const [editKey, setEditKey] = useState('') |
|
|
@ -41,7 +42,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 +71,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 +85,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, |
|
|
@ -101,6 +107,7 @@ const MirroringDetail = (props) => { |
|
|
|
setCheckall(checkedList.length === showCameraList.length); |
|
|
|
} |
|
|
|
useEffect(() => { |
|
|
|
setThemeColor('blue')//主题颜色 |
|
|
|
equipmentGetCamera(); |
|
|
|
}, []); |
|
|
|
function nodeDelete (item) {//删除树状子节点 |
|
|
@ -443,13 +450,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:{ |
|
|
|
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, |
|
|
|
yingshiToken: plainOptions[q].yingshiToken, |
|
|
|
id: plainOptions[q].id, |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
@ -461,13 +468,13 @@ const MirroringDetail = (props) => { |
|
|
|
value: (Number(thekeyarr[0])) + '-0', |
|
|
|
key: (Number(thekeyarr[0])) + '-0', |
|
|
|
cameraId: plainOptions[q].value, |
|
|
|
videoData:{ |
|
|
|
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, |
|
|
|
yingshiToken: plainOptions[q].yingshiToken, |
|
|
|
id: plainOptions[q].id, |
|
|
|
} |
|
|
|
}] |
|
|
|
} |
|
|
@ -492,13 +499,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:{ |
|
|
|
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, |
|
|
|
yingshiToken: plainOptions[q].yingshiToken, |
|
|
|
id: plainOptions[q].id, |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
@ -510,13 +517,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:{ |
|
|
|
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, |
|
|
|
yingshiToken: plainOptions[q].yingshiToken, |
|
|
|
id: plainOptions[q].id, |
|
|
|
} |
|
|
|
}] |
|
|
|
} |
|
|
@ -545,13 +552,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:{ |
|
|
|
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, |
|
|
|
yingshiToken: plainOptions[q].yingshiToken, |
|
|
|
id: plainOptions[q].id, |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
@ -563,13 +570,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:{ |
|
|
|
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, |
|
|
|
yingshiToken: plainOptions[q].yingshiToken, |
|
|
|
id: plainOptions[q].id, |
|
|
|
} |
|
|
|
}] |
|
|
|
} |
|
|
@ -668,7 +675,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 +683,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,7 +703,7 @@ 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="设置" |
|
|
@ -986,7 +1001,7 @@ const MirroringDetail = (props) => { |
|
|
|
} |
|
|
|
</div> |
|
|
|
<div style={{ flex: 1 }}> |
|
|
|
<VideoScreen treeData={treeData}/> |
|
|
|
<VideoScreen treeData={treeData} headerName={headerName} filterGroup={filterGroup} themeColor={themeColor} videoPlay={videoPlay}/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<Modal |
|
|
|