Browse Source

判断是否编辑过

release_1.3.0
deartibers 3 years ago
parent
commit
ef6020e48a
  1. 12
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroring.jsx
  2. 165
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx

12
code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroring.jsx

@ -15,11 +15,11 @@ const Mirroring = (props) => {
img: '/assets/images/imageImg/textblue.png', img: '/assets/images/imageImg/textblue.png',
color: 'blue' color: 'blue'
}, { }, {
title: '白', title: '静谧白',
img: '/assets/images/imageImg/textwhite.png', img: '/assets/images/imageImg/textwhite.png',
color: 'white' color: 'white'
}, { }, {
title: '黑色(深灰)', title: '神秘黑',
img: '/assets/images/imageImg/textblack.png', img: '/assets/images/imageImg/textblack.png',
color: 'black' color: 'black'
}, },
@ -44,10 +44,8 @@ const Mirroring = (props) => {
function todetail (color) {// function todetail (color) {//
dispatch(push('/mirroring_detail'+'?template='+color)); dispatch(push('/mirroring_detail'+'?template='+color));
} }
function tomirrordetail(mid){ function tomirrordetail(mid,template){
dispatch(openness.getMirrorDetail(mid)).then((res) => { dispatch(push('/mirroring_detail'+'?template='+template+'&mid='+mid));
// dispatch(push('/mirroring_detail'+'?id='+item.id+'&template='+item.template))
})
} }
function todelete (id) {// function todelete (id) {//
dispatch(openness.delMirror(id)).then((res) => { dispatch(openness.delMirror(id)).then((res) => {
@ -207,7 +205,7 @@ const Mirroring = (props) => {
src={item.template == 'blue' ? '/assets/images/imageImg/textblue.png' : item.template == 'black' ? '/assets/images/imageImg/textblack.png' : '/assets/images/imageImg/textwhite.png'} src={item.template == 'blue' ? '/assets/images/imageImg/textblue.png' : item.template == 'black' ? '/assets/images/imageImg/textblack.png' : '/assets/images/imageImg/textwhite.png'}
alt="设置" alt="设置"
style={{ width: 330, height: 153, cursor: 'pointer' }} style={{ width: 330, height: 153, cursor: 'pointer' }}
onClick={() => {tomirrordetail(item.mid)}} onClick={() => {tomirrordetail(item.mid,item.template)}}
/> />
<div style={{ color: '#2F2F2F', fontSize: 16, width: 300, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}> <div style={{ color: '#2F2F2F', fontSize: 16, width: 300, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>
{item.title} {item.title}

165
code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx

@ -9,22 +9,87 @@ 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,18 +182,18 @@ 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 mirrordata = {
mirrorId:mirrorId, mirrorId: mirrorId,
template:template, template: template,
title:headerName, title: headerName,
showHeader:showHeader, showHeader: showHeader,
publish:publish, publish: publish,
tree:treeData, tree: treeData,
filterGroup:filterGroup 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) {//
@ -183,6 +248,7 @@ const MirroringDetail = (props) => {
} }
} }
} }
sethasModify(true)
setAddCamera(false) setAddCamera(false)
setTreeData(mainData) setTreeData(mainData)
} }
@ -240,6 +306,7 @@ const MirroringDetail = (props) => {
} }
} }
} }
sethasModify(true)
setTreeData(mainData) setTreeData(mainData)
} }
function changeLable (value, item) {// function changeLable (value, item) {//
@ -270,6 +337,7 @@ const MirroringDetail = (props) => {
} }
} }
} }
sethasModify(true)
setTreeData(mainData) setTreeData(mainData)
} }
function lableBlur () { function lableBlur () {
@ -277,7 +345,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 +353,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 +468,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 +483,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 +515,7 @@ const MirroringDetail = (props) => {
key: '0', key: '0',
}) })
} }
sethasModify(true)
setTreeData(mainData) setTreeData(mainData)
} }
function searchCamera () {// function searchCamera () {//
@ -611,7 +689,7 @@ const MirroringDetail = (props) => {
} }
} }
} }
console.log('mainDatamainDatamainData',mainData); sethasModify(true)
setTreeData(mainData); setTreeData(mainData);
setAddCamera(false); setAddCamera(false);
setMykeyword('') setMykeyword('')
@ -642,22 +720,26 @@ const MirroringDetail = (props) => {
filters: [] filters: []
}) })
} }
sethasModify(true)
setFilterGroup(filterGroupList) setFilterGroup(filterGroupList)
} }
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 +757,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 +794,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 +802,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 +811,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 +934,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>
@ -1023,7 +1109,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
@ -1042,6 +1128,23 @@ const MirroringDetail = (props) => {
> >
开发中敬请期待~ 开发中敬请期待~
</Modal> </Modal>
<Modal
title="提醒"
visible={backVisible}
onOk={() => {
topublish(false)
setBackVisible(false)
}}
width={610}
onCancel={() => {
setBackVisible(false)
}}
okText="确定"
cancelText="取消"
closeOnEsc={true}
>
是否保存修改~
</Modal>
</div> </div>
) )
} }

Loading…
Cancel
Save