free-sun
/
FS-IOT
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

镜像页面添加摄像头

release_1.3.0
deartibers 2 years ago
parent
b19ac3ded2
commit
e7599f76d0
2 changed files with 297 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 368
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx
  2. 8
      code/VideoAccess-VCMP/web/client/src/sections/openness/style.less

368
code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx
View File

@ -22,23 +22,49 @@ const MirroringDetail = (props) => {
key: '0', key: '0',
}, },
]); ]);
const searchData = useRef({})//摄像头查询条件 const [indeterminate, setIndeterminate] = useState(false);//全选
const [search, setSearch] = useState({}); //搜索条件
const [indeterminate, setIndeterminate] = useState(true);//全选
const [checkAll, setCheckall] = useState(false);//全选是否 const [checkAll, setCheckall] = useState(false);//全选是否
const onCheckAllChange = (e) => {//全选 const [plainOptions, setPlainOptions] = useState([]);//摄像头选择
console.log(e); const [checkedList, setCheckedList] = useState([]);//选中的摄像头列表
setCheckedList(e.target.checked ? plainOptions : []); const [mykeyword, setMykeyword] = useState('');//摄像头搜索
const [showCameraList, setShowCameraList] = useState([])//展示的摄像头列表
const [addCamera, setAddCamera] = useState(false);//添加视频弹框
const [addCameraKey, setAddCameraKey] = useState('');//添加视频弹框
function onCheckAllChange (e) {//全选
if (e.target.checked) {
let mycheckList = []
for (let i = 0; i < showCameraList.length; i++) {
mycheckList.push(showCameraList[i].value)
}
setCheckedList(mycheckList)
}
else {
setCheckedList([])
}
setIndeterminate(false); setIndeterminate(false);
setCheckall(e.target.checked); setCheckall(e.target.checked);
}; }
const equipmentGetCamera = () => { function equipmentGetCamera () {//查询摄像头
searchData.current = { ...search } dispatch(openness.getCamera()).then((res) => {
dispatch(openness.getCamera(searchData.current)).then((res) => { let resList = res.payload.data.data
// limits.current = res.payload.data.data.length let optionsList = []
console.log(res.payload.data.data); for (let i = 0; i < resList.length; i++) {
optionsList.push({
label: resList[i].name,
value: resList[i].id,
extra: 'DID:' + resList[i].gbCamera.did || '',
})
}
setShowCameraList(optionsList)
setPlainOptions(optionsList)
}); });
} }
function onChange (checkedList) {//摄像头选择
setCheckedList(checkedList);
setIndeterminate(!!checkedList.length && checkedList.length < showCameraList.length);
setCheckall(checkedList.length === showCameraList.length);
}
useEffect(() => { useEffect(() => {
equipmentGetCamera(); equipmentGetCamera();
}, []); }, []);
@ -86,7 +112,7 @@ const MirroringDetail = (props) => {
if (nodeKeyArr.length == 1) { if (nodeKeyArr.length == 1) {
for (let index = 0; index < mainData.length; index++) { for (let index = 0; index < mainData.length; index++) {
if (mainData[index].key == item.key) { if (mainData[index].key == item.key) {
if (mainData[index].children && mainData[index].children > 0) { if (mainData[index].children && mainData[index].children.length > 0) {
let mainKey = mainData[index].children[mainData[index].children.length - 1].key let mainKey = mainData[index].children[mainData[index].children.length - 1].key
let thekeyarr = mainKey.split('-') let thekeyarr = mainKey.split('-')
mainData[index].children.push({ mainData[index].children.push({
@ -108,25 +134,27 @@ const MirroringDetail = (props) => {
} }
} else if (nodeKeyArr.length == 2) { } else if (nodeKeyArr.length == 2) {
for (let index = 0; index < mainData.length; index++) { for (let index = 0; index < mainData.length; index++) {
for (let j = 0; j < mainData[index].children.length; j++) { if (mainData[index].children) {
if (mainData[index].children[j].key == item.key) { for (let j = 0; j < mainData[index].children.length; j++) {
if (mainData[index].children[j].children && mainData[index].children[j].children.length > 0) { if (mainData[index].children[j].key == item.key) {
let mainKey = mainData[index].children[j].children[mainData[index].children[j].children.length - 1].key if (mainData[index].children[j].children && mainData[index].children[j].children.length > 0) {
let thekeyarr = mainKey.split('-') let mainKey = mainData[index].children[j].children[mainData[index].children[j].children.length - 1].key
mainData[index].children[j].children.push({ let thekeyarr = mainKey.split('-')
label: '三级节点' + (Number(thekeyarr[2]) + 2), mainData[index].children[j].children.push({
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1), label: '三级节点' + (Number(thekeyarr[2]) + 2),
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1), 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 else {
let thekeyarr = mainKey.split('-') let mainKey = mainData[index].children[j].key
mainData[index].children[j].children = [{ let thekeyarr = mainKey.split('-')
label: '三级节点1', mainData[index].children[j].children = [{
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0', label: '三级节点1',
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0', value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
}] key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
}]
}
} }
} }
} }
@ -135,8 +163,6 @@ const MirroringDetail = (props) => {
setTreeData(mainData) setTreeData(mainData)
} }
function changeLable (value, item) {//编辑摄像头名称 function changeLable (value, item) {//编辑摄像头名称
console.log('valvalval', value);
console.log('itemitem', item);
let mainData = JSON.parse(JSON.stringify(treeData)) let mainData = JSON.parse(JSON.stringify(treeData))
let nodeKeyArr = item.key.split('-') let nodeKeyArr = item.key.split('-')
if (nodeKeyArr.length == 1) { if (nodeKeyArr.length == 1) {
@ -170,7 +196,43 @@ const MirroringDetail = (props) => {
setEditKey('') setEditKey('')
} }
function cameraAdd (item) {//添加摄像头 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) {
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) {//有没有摄像头
if (myplainOptions[i].value == treeData[j].children[k].children[l].cameraId) {
myplainOptions.splice(i, 1)
}
}
}
}
else if (treeData[j].children[k].cameraId) {//有没有摄像头
if (myplainOptions[i].value == treeData[j].children[k].cameraId) {
myplainOptions.splice(i, 1)
}
}
}
}
}
}
console.log('myplainOptionsmyplainOptions', myplainOptions);
setCheckedList([])
setShowCameraList(myplainOptions)
setAddCamera(true)
setAddCameraKey(item.key)
} }
const renderLabel = (label, item) => {//树状展示 const renderLabel = (label, item) => {//树状展示
let keyArr = item.key.split('-') let keyArr = item.key.split('-')
@ -218,7 +280,7 @@ const MirroringDetail = (props) => {
} }
<div style={{ display: 'flex', paddingRight: 13 }}> <div style={{ display: 'flex', paddingRight: 13 }}>
{ {
!item.children || item.children < 1 ? ( (!item.children || item.children.length < 1 || item.children[0].cameraId) && !item.cameraId ? (
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => cameraAdd(item)}> <div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => cameraAdd(item)}>
<img <img
src="/assets/images/imageImg/nodeCamera.png" src="/assets/images/imageImg/nodeCamera.png"
@ -228,13 +290,17 @@ const MirroringDetail = (props) => {
</div> </div>
) : ('') ) : ('')
} }
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => { setEditKey(item.key) }}> {
<img item.cameraId ? ('') : (
src="/assets/images/imageImg/nodeEdit.png" <div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => { setEditKey(item.key) }}>
alt="编辑" <img
style={{ width: '100%' }} src="/assets/images/imageImg/nodeEdit.png"
/> alt="编辑"
</div> style={{ width: '100%' }}
/>
</div>
)
}
<Popconfirm <Popconfirm
title="删除节点也会删除节点下的从属节点和视频，是否继续？" title="删除节点也会删除节点下的从属节点和视频，是否继续？"
arrowPointAtCenter={false} arrowPointAtCenter={false}
@ -250,7 +316,7 @@ const MirroringDetail = (props) => {
</div> </div>
</Popconfirm> </Popconfirm>
{ {
keyArr.length > 2 ? ('') : ( keyArr.length > 2||(item.children&&item.children[0].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"
@ -290,6 +356,129 @@ const MirroringDetail = (props) => {
} }
setTreeData(mainData) setTreeData(mainData)
} }
function searchCamera () {//查询摄像头
if (mykeyword !== '') {
console.log('111111111', mykeyword);
}
else {
console.log('22222222222', mykeyword);
// setShowCameraList(plainOptions)
}
}
function finishAdd () {//完成添加摄像头
console.log('checkedList', checkedList);
let mainData = JSON.parse(JSON.stringify(treeData))
let nodeKeyArr = addCameraKey.split('-')
if (nodeKeyArr.length == 1) {
for (let q = 0; q < plainOptions.length; q++) {
for (let w = 0; w < checkedList.length; w++) {
if (plainOptions[q].value == checkedList[w]) {
for (let index = 0; index < mainData.length; index++) {
if (mainData[index].key == addCameraKey) {
if (mainData[index].children && mainData[index].children.length > 0) {
let mainKey = mainData[index].children[mainData[index].children.length - 1].key
let thekeyarr = mainKey.split('-')
mainData[index].children.push({
label: plainOptions[q].label,
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
cameraId: plainOptions[q].value
})
}
else {
let mainKey = mainData[index].key
let thekeyarr = mainKey.split('-')
mainData[index].children = [{
label: plainOptions[q].label,
value: (Number(thekeyarr[0])) + '-0',
key: (Number(thekeyarr[0])) + '-0',
cameraId: plainOptions[q].value
}]
}
}
}
}
}
}
} else if (nodeKeyArr.length == 2) {
for (let q = 0; q < plainOptions.length; q++) {
for (let w = 0; w < checkedList.length; w++) {
if (plainOptions[q].value == checkedList[w]) {
for (let index = 0; index < mainData.length; index++) {//第一级
if (mainData[index].children) {//有没有子集
for (let j = 0; j < mainData[index].children.length; j++) {//第二级
if (mainData[index].children[j].key == addCameraKey) {
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: plainOptions[q].label,
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
})
}
else {
let mainKey = mainData[index].key
let thekeyarr = mainKey.split('-')
mainData[index].children[j].children = [{
label: plainOptions[q].label,
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
cameraId: plainOptions[q].value
}]
}
}
}
}
}
}
}
}
} else if (nodeKeyArr.length == 3) {
for (let q = 0; q < plainOptions.length; q++) {
for (let w = 0; w < checkedList.length; w++) {
if (plainOptions[q].value == checkedList[w]) {
for (let index = 0; index < mainData.length; index++) {//第一级
if (mainData[index].children) {//有没有子集
for (let j = 0; j < mainData[index].children.length; j++) {//第二级
if (mainData[index].children[j].children) {//有没有子集
for (let k = 0; k < mainData[index].children[j].children.length; k++) {//第三级
if (mainData[index].children[j].children[k].key == addCameraKey) {
if (mainData[index].children[j].children[k].children && mainData[index].children[j].children[k].children.length > 0) {
let mainKey = mainData[index].children[j].children[k].children[mainData[index].children[j].children[k].children.length - 1].key
let thekeyarr = mainKey.split('-')
mainData[index].children[j].children[k].children.push({
label: plainOptions[q].label,
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
})
}
else {
let mainKey = mainData[index].key
let thekeyarr = mainKey.split('-')
mainData[index].children[j].children[k].children = [{
label: plainOptions[q].label,
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
}]
}
}
}
}
}
}
}
}
}
}
}
setTreeData(mainData);
setAddCamera(false);
setAddCameraKey('');
}
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={{
@ -331,7 +520,7 @@ const MirroringDetail = (props) => {
</div> </div>
</div> </div>
</div> </div>
<div style={{display:'flex',height:'100%'}}> <div style={{ display: 'flex', height: 'calc(100% - 64px)', }}>
<div style={{ height: "100%", width: 200, background: '#FFFFFF' }}> <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%' }}> <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) => { {chooseList.map((item, index) => {
@ -346,7 +535,7 @@ const MirroringDetail = (props) => {
})} })}
</div> </div>
{/* 节点 */} {/* 节点 */}
<div style={{ display: chooseNum == "0" ? "block" : "none", }}> <div style={{ display: chooseNum == "0" ? "block" : "none",height:'100%' }}>
<div style={{ height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgb(246, 250, 255)', cursor: 'pointer' }} onClick={addMainNode}> <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 }}> <div style={{ width: 20, height: 20 }}>
<img <img
@ -359,54 +548,75 @@ const MirroringDetail = (props) => {
增加主要节点 增加主要节点
</div> </div>
</div> </div>
{/* <div > */}
<Tree <Tree
style={{height: 'calc(100% - 89px)',overflowY: 'auto',}}
treeData={treeData} treeData={treeData}
renderLabel={renderLabel} renderLabel={renderLabel}
/> />
{/* </div> */}
</div> </div>
{/* 添加视频 */} {/* 添加视频 */}
<div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 200 }}> {addCamera ? (
<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={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 200, background: '#FFFFFF' }}>
<div style={{ fontSize: 14, color: '#F9F9F9' }}>添加视频</div> <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={{ width: 16, height: 16, cursor: 'pointer' }}> <div style={{ fontSize: 14, color: '#F9F9F9' }}>添加视频</div>
<img <div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddCamera(false); setAddCameraKey('') }}>
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 <img
src="/assets/images/imageImg/find.png" src="/assets/images/imageImg/close.png"
alt="设置" alt="设置"
style={{ width: '100%' }} style={{ width: '100%' }}
/> />
</div> </div>
</div> </div>
<div style={{ display: 'flex' }}> <div style={{ borderBottom: '1px solid rgba(226,226,226,0.5)', background: '#FFFFFF' }}>
<div> <div style={{ display: 'flex', padding: "8px 10px 10px 10px", alignItems: 'center' }}>
<Checkbox <div style={{ fontSize: 12 }}>摄像头名称</div>
indeterminate={indeterminate} <div>
onChange={onCheckAllChange} <Input
checked={checkAll} style={{ width: 140, marginLeft: 10 }}
aria-label="Checkbox 示例" value={mykeyword}
> onChange={(value) => { setMykeyword(value) }}
全选 placeholder="请输入摄像头名称"
</Checkbox> showClear>
</Input>
</div>
<div style={{ width: 32, height: 32, cursor: 'pointer' }} onClick={searchCamera}>
<img
src="/assets/images/imageImg/find.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
</div> </div>
<div> <div style={{ display: 'flex', marginBottom: 9, justifyContent: 'space-between' }}>
<Checkbox onChange={checked => console.log(checked)} aria-label="Checkbox 示例">隐藏添加过的</Checkbox> <div style={{ marginLeft: 20 }}>
<Checkbox
indeterminate={indeterminate}
onChange={onCheckAllChange}
checked={checkAll}
aria-label="全选"
>
全选
</Checkbox>
</div>
<div style={{ marginRight: 20, color: '#1859C1', cursor: 'pointer' }} onClick={finishAdd}>
完成
</div>
</div> </div>
</div> </div>
<div style={{ padding: '10px 20px', overflowY: 'scroll', height: 'calc(100% - 193px)' }}>
<CheckboxGroup
style={{ marginTop: 6 }}
className='my_CheckboxGroup'
options={showCameraList}
value={checkedList}
onChange={onChange}
aria-label="text"
/>
</div>
</div> </div>
</div> ) : ('')}
{/* 样式 */} {/* 样式 */}
<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)' }}>
@ -425,7 +635,7 @@ const MirroringDetail = (props) => {
</div> </div>
</div> </div>
</div> </div>
<div style={{flex:1}}> <div style={{ flex: 1 }}>
</div> </div>
</div> </div>
<Modal <Modal

8
code/VideoAccess-VCMP/web/client/src/sections/openness/style.less
View File

@ -9,6 +9,14 @@
padding: 0px; padding: 0px;
} }
} }
.my_CheckboxGroup{
.semi-checkbox-addon{
font-size: 12px;
}
.semi-checkbox-extra{
font-size: 12px;
}
}
.hasHeader{ .hasHeader{
.semi-switch-checked{ .semi-switch-checked{
background-color:#2F53EA background-color:#2F53EA

Write Preview
Loading…
Cancel
Save