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

镜像服务联调

release_1.3.0
deartibers 3 years ago
parent
057ae2ed92
commit
5b98b9e395
2 changed files with 43 additions and 32 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. 4
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroring.jsx
  2. 71
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx

4
code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroring.jsx
View File

@ -18,10 +18,6 @@ const Mirroring = (props) => {
title: '黑色（深灰）', title: '黑色（深灰）',
img: '/assets/images/imageImg/text.png', img: '/assets/images/imageImg/text.png',
color: 'blue' color: 'blue'
}, {
title: '灰色',
img: '/assets/images/imageImg/text.png',
color: 'blue'
}, },
]); ]);
const myCustomList = useRef([ const myCustomList = useRef([

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

@ -13,6 +13,7 @@ const MirroringDetail = (props) => {
}, []); }, []);
// const = useRef(0) // const = useRef(0)
const [themeColor,setThemeColor] = 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('')
@ -41,7 +42,12 @@ const MirroringDetail = (props) => {
const [addLabel, setAddLabel] = useState(false)//标签组设置弹框 const [addLabel, setAddLabel] = useState(false)//标签组设置弹框
const [filterGroup, setFilterGroup] = useState([])//筛选项数据 const [filterGroup, setFilterGroup] = useState([])//筛选项数据
const [addLabelNum, setAddLabelNum] = useState(0)//标签组添加 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) {//全选 function onCheckAllChange (e) {//全选
if (e.target.checked) { if (e.target.checked) {
let mycheckList = [] let mycheckList = []
@ -65,7 +71,7 @@ const MirroringDetail = (props) => {
optionsList.push({ optionsList.push({
label: resList[i].name, label: resList[i].name,
value: resList[i].id, value: resList[i].id,
extra: 'DID:' + resList[i].gbCamera.did || '', extra: 'DID:' + (resList[i].gbCamera.did || ''),
did: resList[i].gbCamera.did || '', did: resList[i].gbCamera.did || '',
id: resList[i].id, id: resList[i].id,
channelNo: resList[i].channelNo, channelNo: resList[i].channelNo,
@ -79,7 +85,7 @@ const MirroringDetail = (props) => {
optionsList.push({ optionsList.push({
label: resList[i].name, label: resList[i].name,
value: resList[i].id, value: resList[i].id,
extra: 'DID:' + resList[i].gbCamera.did || '', extra: 'DID:' + (resList[i].gbCamera.did || ''),
did: resList[i].gbCamera.did || '', did: resList[i].gbCamera.did || '',
id: resList[i].id, id: resList[i].id,
channelNo: resList[i].channelNo, channelNo: resList[i].channelNo,
@ -101,6 +107,7 @@ const MirroringDetail = (props) => {
setCheckall(checkedList.length === showCameraList.length); setCheckall(checkedList.length === showCameraList.length);
} }
useEffect(() => { useEffect(() => {
setThemeColor('blue')//主题颜色
equipmentGetCamera(); equipmentGetCamera();
}, []); }, []);
function nodeDelete (item) {//删除树状子节点 function nodeDelete (item) {//删除树状子节点
@ -443,13 +450,13 @@ const MirroringDetail = (props) => {
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1), value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1), key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
cameraId: plainOptions[q].value, cameraId: plainOptions[q].value,
videoData:{ videoData: {
channelNo: plainOptions[q].channelNo, channelNo: plainOptions[q].channelNo,
content: plainOptions[q].content, content: plainOptions[q].content,
serialNo: plainOptions[q].serialNo, serialNo: plainOptions[q].serialNo,
type: plainOptions[q].type, type: plainOptions[q].type,
yingshiToken:plainOptions[q].yingshiToken, yingshiToken: plainOptions[q].yingshiToken,
id:plainOptions[q].id, id: plainOptions[q].id,
} }
}) })
} }
@ -461,13 +468,13 @@ const MirroringDetail = (props) => {
value: (Number(thekeyarr[0])) + '-0', value: (Number(thekeyarr[0])) + '-0',
key: (Number(thekeyarr[0])) + '-0', key: (Number(thekeyarr[0])) + '-0',
cameraId: plainOptions[q].value, cameraId: plainOptions[q].value,
videoData:{ videoData: {
channelNo: plainOptions[q].channelNo, channelNo: plainOptions[q].channelNo,
content: plainOptions[q].content, content: plainOptions[q].content,
serialNo: plainOptions[q].serialNo, serialNo: plainOptions[q].serialNo,
type: plainOptions[q].type, type: plainOptions[q].type,
yingshiToken:plainOptions[q].yingshiToken, yingshiToken: plainOptions[q].yingshiToken,
id:plainOptions[q].id, id: plainOptions[q].id,
} }
}] }]
} }
@ -492,13 +499,13 @@ const MirroringDetail = (props) => {
value: (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), key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1),
cameraId: plainOptions[q].value, cameraId: plainOptions[q].value,
videoData:{ videoData: {
channelNo: plainOptions[q].channelNo, channelNo: plainOptions[q].channelNo,
content: plainOptions[q].content, content: plainOptions[q].content,
serialNo: plainOptions[q].serialNo, serialNo: plainOptions[q].serialNo,
type: plainOptions[q].type, type: plainOptions[q].type,
yingshiToken:plainOptions[q].yingshiToken, yingshiToken: plainOptions[q].yingshiToken,
id:plainOptions[q].id, id: plainOptions[q].id,
} }
}) })
} }
@ -510,13 +517,13 @@ const MirroringDetail = (props) => {
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0', value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0', key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
cameraId: plainOptions[q].value, cameraId: plainOptions[q].value,
videoData:{ videoData: {
channelNo: plainOptions[q].channelNo, channelNo: plainOptions[q].channelNo,
content: plainOptions[q].content, content: plainOptions[q].content,
serialNo: plainOptions[q].serialNo, serialNo: plainOptions[q].serialNo,
type: plainOptions[q].type, type: plainOptions[q].type,
yingshiToken:plainOptions[q].yingshiToken, yingshiToken: plainOptions[q].yingshiToken,
id:plainOptions[q].id, 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), 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), key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-' + (Number(thekeyarr[3]) + 1),
cameraId: plainOptions[q].value, cameraId: plainOptions[q].value,
videoData:{ videoData: {
channelNo: plainOptions[q].channelNo, channelNo: plainOptions[q].channelNo,
content: plainOptions[q].content, content: plainOptions[q].content,
serialNo: plainOptions[q].serialNo, serialNo: plainOptions[q].serialNo,
type: plainOptions[q].type, type: plainOptions[q].type,
yingshiToken:plainOptions[q].yingshiToken, yingshiToken: plainOptions[q].yingshiToken,
id:plainOptions[q].id, id: plainOptions[q].id,
} }
}) })
} }
@ -563,13 +570,13 @@ const MirroringDetail = (props) => {
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-0', value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-0',
key: (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, cameraId: plainOptions[q].value,
videoData:{ videoData: {
channelNo: plainOptions[q].channelNo, channelNo: plainOptions[q].channelNo,
content: plainOptions[q].content, content: plainOptions[q].content,
serialNo: plainOptions[q].serialNo, serialNo: plainOptions[q].serialNo,
type: plainOptions[q].type, type: plainOptions[q].type,
yingshiToken:plainOptions[q].yingshiToken, yingshiToken: plainOptions[q].yingshiToken,
id:plainOptions[q].id, id: plainOptions[q].id,
} }
}] }]
} }
@ -668,7 +675,7 @@ const MirroringDetail = (props) => {
<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', }}> <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"
@ -676,10 +683,18 @@ const MirroringDetail = (props) => {
style={{ width: '100%' }} style={{ width: '100%' }}
/> />
</div> </div>
<div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}> {
智慧小蓝智慧排涝视频融合系统 editHeaderName ? (
</div> <div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}>
<div style={{ width: 12, height: 12, marginLeft: 8, marginTop: 1, cursor: 'pointer' }}> <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 <img
src="/assets/images/imageImg/nameChange.png" src="/assets/images/imageImg/nameChange.png"
alt="设置" alt="设置"
@ -688,7 +703,7 @@ 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' }}> <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="设置"
@ -986,7 +1001,7 @@ const MirroringDetail = (props) => {
} }
</div> </div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<VideoScreen treeData={treeData}/> <VideoScreen treeData={treeData} headerName={headerName} filterGroup={filterGroup} themeColor={themeColor} videoPlay={videoPlay}/>
</div> </div>
</div> </div>
<Modal <Modal

Write Preview
Loading…
Cancel
Save