|
|
|
@ -9,22 +9,87 @@ const MirroringDetail = (props) => { |
|
|
|
const { history, dispatch, actions, user, loading, StatusPushList } = props; |
|
|
|
const { openness } = actions; |
|
|
|
useEffect(() => { |
|
|
|
let search=props.location.search |
|
|
|
let search = props.location.search |
|
|
|
let result = search.slice(1) |
|
|
|
let searcharr=result.split('&') |
|
|
|
if(searcharr.length==1){ |
|
|
|
let searcharr = result.split('&') |
|
|
|
if (searcharr.length == 1) { |
|
|
|
setTemplate(searcharr[0].split('=')[1])//主题颜色 |
|
|
|
} |
|
|
|
else{ |
|
|
|
else { |
|
|
|
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(); |
|
|
|
}, []); |
|
|
|
const [showHeader,setShowHeader] = useState(false)//是否展示头部 |
|
|
|
const [mirrorId,setMirrorId] = useState(null)//id |
|
|
|
|
|
|
|
const [template,setTemplate] = useState('')//主题颜色 |
|
|
|
const [hasModify, sethasModify] = useState(false)//有没有进行修改 |
|
|
|
const [showHeader, setShowHeader] = useState(false)//是否展示头部 |
|
|
|
const [mirrorId, setMirrorId] = useState(null)//id |
|
|
|
const [backVisible, setBackVisible] = useState(false)//返回上一页是否修改过 |
|
|
|
|
|
|
|
|
|
|
|
const [template, setTemplate] = useState('')//主题颜色 |
|
|
|
const [chooseNum, setChooseNum] = useState(0);//当前选择tab |
|
|
|
const [chooseList, setChooseList] = useState(['节点', '样式', '功能']); |
|
|
|
const [editKey, setEditKey] = useState('') |
|
|
|
@ -117,18 +182,18 @@ const MirroringDetail = (props) => { |
|
|
|
setIndeterminate(!!checkedList.length && checkedList.length < showCameraList.length); |
|
|
|
setCheckall(checkedList.length === showCameraList.length); |
|
|
|
} |
|
|
|
function topublish(publish){//编辑镜像信息 |
|
|
|
let mirrordata={ |
|
|
|
mirrorId:mirrorId, |
|
|
|
template:template, |
|
|
|
title:headerName, |
|
|
|
showHeader:showHeader, |
|
|
|
publish:publish, |
|
|
|
tree:treeData, |
|
|
|
filterGroup:filterGroup |
|
|
|
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); |
|
|
|
history.goBack() |
|
|
|
}) |
|
|
|
} |
|
|
|
function nodeDelete (item) {//删除树状子节点 |
|
|
|
@ -183,6 +248,7 @@ const MirroringDetail = (props) => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
sethasModify(true) |
|
|
|
setAddCamera(false) |
|
|
|
setTreeData(mainData) |
|
|
|
} |
|
|
|
@ -240,6 +306,7 @@ const MirroringDetail = (props) => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
sethasModify(true) |
|
|
|
setTreeData(mainData) |
|
|
|
} |
|
|
|
function changeLable (value, item) {//编辑摄像头名称 |
|
|
|
@ -270,6 +337,7 @@ const MirroringDetail = (props) => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
sethasModify(true) |
|
|
|
setTreeData(mainData) |
|
|
|
} |
|
|
|
function lableBlur () { |
|
|
|
@ -277,29 +345,33 @@ const MirroringDetail = (props) => { |
|
|
|
} |
|
|
|
function cameraAdd (item) {//添加摄像头 |
|
|
|
let myplainOptions = JSON.parse(JSON.stringify(plainOptions)) |
|
|
|
for (let i = 0; i < myplainOptions.length; i++) {//摄像头列表 |
|
|
|
for (let j = 0; j < treeData.length; j++) {//第一级 |
|
|
|
if (treeData[j].children) {//有没有子集 |
|
|
|
for (let k = 0; k < treeData[j].children.length; k++) {//第二级 |
|
|
|
if (treeData[j].children[k].children) {//有没有子集 |
|
|
|
for (let l = 0; l < treeData[j].children[k].children.length; l++) {//第三级 |
|
|
|
if (treeData[j].children[k].children[l].children) {//有没有子集 |
|
|
|
for (let p = 0; p < treeData[j].children[k].children[l].children.length; p++) { |
|
|
|
if (treeData[j].children[k].children[l].children[p].cameraId) { |
|
|
|
for (let j = 0; j < treeData.length; j++) {//第一级 |
|
|
|
if (treeData[j].children) {//有没有子集 |
|
|
|
for (let k = 0; k < treeData[j].children.length; k++) {//第二级 |
|
|
|
if (treeData[j].children[k].children) {//有没有子集 |
|
|
|
for (let l = 0; l < treeData[j].children[k].children.length; l++) {//第三级 |
|
|
|
if (treeData[j].children[k].children[l].children) {//有没有子集 |
|
|
|
for (let p = 0; p < treeData[j].children[k].children[l].children.length; p++) { |
|
|
|
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) { |
|
|
|
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) { |
|
|
|
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) { |
|
|
|
myplainOptions.splice(i, 1) |
|
|
|
} |
|
|
|
@ -396,7 +468,7 @@ const MirroringDetail = (props) => { |
|
|
|
</div> |
|
|
|
</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)}> |
|
|
|
<img |
|
|
|
src="/assets/images/imageImg/nodeadd.png" |
|
|
|
@ -411,7 +483,12 @@ const MirroringDetail = (props) => { |
|
|
|
) |
|
|
|
}; |
|
|
|
function toback () {//返回上一个页面 |
|
|
|
history.goBack() |
|
|
|
if (hasModify) { |
|
|
|
setBackVisible(true) |
|
|
|
} |
|
|
|
else { |
|
|
|
history.goBack() |
|
|
|
} |
|
|
|
} |
|
|
|
function tochange (index) {//节点样式功能切换 |
|
|
|
setChooseNum(index); |
|
|
|
@ -438,6 +515,7 @@ const MirroringDetail = (props) => { |
|
|
|
key: '0', |
|
|
|
}) |
|
|
|
} |
|
|
|
sethasModify(true) |
|
|
|
setTreeData(mainData) |
|
|
|
} |
|
|
|
function searchCamera () {//查询摄像头 |
|
|
|
@ -611,7 +689,7 @@ const MirroringDetail = (props) => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
console.log('mainDatamainDatamainData',mainData); |
|
|
|
sethasModify(true) |
|
|
|
setTreeData(mainData); |
|
|
|
setAddCamera(false); |
|
|
|
setMykeyword('') |
|
|
|
@ -642,22 +720,26 @@ const MirroringDetail = (props) => { |
|
|
|
filters: [] |
|
|
|
}) |
|
|
|
} |
|
|
|
sethasModify(true) |
|
|
|
setFilterGroup(filterGroupList) |
|
|
|
} |
|
|
|
function switchOnChange (val, index) {//筛选项是否禁用 |
|
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
|
filterGroupList[index].forbidden = val |
|
|
|
setFilterGroup(filterGroupList) |
|
|
|
sethasModify(true) |
|
|
|
} |
|
|
|
function screenDel (index) {//筛选项删除 |
|
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
|
filterGroupList.splice(index, 1) |
|
|
|
setFilterGroup(filterGroupList) |
|
|
|
sethasModify(true) |
|
|
|
} |
|
|
|
function toEditscreen (val, index) {//编辑筛选项名称 |
|
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
|
filterGroupList[index].name = val |
|
|
|
setFilterGroup(filterGroupList) |
|
|
|
sethasModify(true) |
|
|
|
} |
|
|
|
function toAddLabel () {//添加标签组 |
|
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
|
@ -675,29 +757,33 @@ const MirroringDetail = (props) => { |
|
|
|
cameraIds: [] |
|
|
|
}) |
|
|
|
} |
|
|
|
sethasModify(true) |
|
|
|
setFilterGroup(filterGroupList) |
|
|
|
} |
|
|
|
function labelDel (index) {//标签组删除 |
|
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
|
filterGroupList[addLabelNum].filters.splice(index, 1) |
|
|
|
setFilterGroup(filterGroupList) |
|
|
|
sethasModify(true) |
|
|
|
} |
|
|
|
function addFiltersCamera (val, index) { |
|
|
|
function addFiltersCamera (val, index) {//标签组添加摄像头 |
|
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
|
filterGroupList[addLabelNum].filters[index].cameraIds = val |
|
|
|
setFilterGroup(filterGroupList) |
|
|
|
sethasModify(true) |
|
|
|
} |
|
|
|
function toEditLabel (val, index) { |
|
|
|
function toEditLabel (val, index) {//标签组名称修改 |
|
|
|
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) |
|
|
|
filterGroupList[addLabelNum].filters[index].name = val |
|
|
|
setFilterGroup(filterGroupList) |
|
|
|
sethasModify(true) |
|
|
|
} |
|
|
|
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',alignItems: 'center' }}> |
|
|
|
<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" |
|
|
|
@ -708,7 +794,7 @@ const MirroringDetail = (props) => { |
|
|
|
{ |
|
|
|
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> |
|
|
|
<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 }}> |
|
|
|
@ -716,7 +802,7 @@ const MirroringDetail = (props) => { |
|
|
|
</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 |
|
|
|
src="/assets/images/imageImg/nameChange.png" |
|
|
|
alt="设置" |
|
|
|
@ -725,21 +811,21 @@ const MirroringDetail = (props) => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<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 |
|
|
|
src="/assets/images/imageImg/generate.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</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 |
|
|
|
src="/assets/images/imageImg/save.png" |
|
|
|
alt="设置" |
|
|
|
style={{ width: '100%' }} |
|
|
|
/> |
|
|
|
</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 |
|
|
|
src="/assets/images/imageImg/upload.png" |
|
|
|
alt="设置" |
|
|
|
@ -848,7 +934,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) => 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 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> |
|
|
|
@ -1023,7 +1109,7 @@ const MirroringDetail = (props) => { |
|
|
|
} |
|
|
|
</div> |
|
|
|
<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> |
|
|
|
<Modal |
|
|
|
@ -1042,6 +1128,23 @@ const MirroringDetail = (props) => { |
|
|
|
> |
|
|
|
开发中，敬请期待~ |
|
|
|
</Modal> |
|
|
|
<Modal |
|
|
|
title="提醒" |
|
|
|
visible={backVisible} |
|
|
|
onOk={() => { |
|
|
|
topublish(false) |
|
|
|
setBackVisible(false) |
|
|
|
}} |
|
|
|
width={610} |
|
|
|
onCancel={() => { |
|
|
|
setBackVisible(false) |
|
|
|
}} |
|
|
|
okText="确定" |
|
|
|
cancelText="取消" |
|
|
|
closeOnEsc={true} |
|
|
|
> |
|
|
|
是否保存修改？~ |
|
|
|
</Modal> |
|
|
|
</div> |
|
|
|
) |
|
|
|
} |
|
|
|
|
