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

镜像联调

release_1.3.0
deartibers 3 years ago
parent
8374ffd4ee
commit
ab36628c9b
1 changed files with 260 additions and 87 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. 239
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx

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

@ -16,6 +16,9 @@ const MirroringDetail = (props) => {
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('')
const [editNum, setEditNum] = useState(1000)
const [labelEditNum, setLabelEditNum] = useState(1000)
const [comingVisible, setComingVisible] = useState(false) const [comingVisible, setComingVisible] = useState(false)
const [treeData, setTreeData] = useState([//树形控件数据 const [treeData, setTreeData] = useState([//树形控件数据
{ {
@ -29,6 +32,7 @@ const MirroringDetail = (props) => {
const [plainOptions, setPlainOptions] = useState([]);//摄像头选择 const [plainOptions, setPlainOptions] = useState([]);//摄像头选择
const [checkedList, setCheckedList] = useState([]);//选中的摄像头列表 const [checkedList, setCheckedList] = useState([]);//选中的摄像头列表
const [mykeyword, setMykeyword] = useState('');//摄像头搜索 const [mykeyword, setMykeyword] = useState('');//摄像头搜索
const [allCameraList, setAllCameraList] = useState([])//标签组的摄像头列表
const [showCameraList, setShowCameraList] = useState([])//展示的摄像头列表 const [showCameraList, setShowCameraList] = useState([])//展示的摄像头列表
const [saveShowList, setSaveShowList] = useState([])//展示的摄像头列表 const [saveShowList, setSaveShowList] = useState([])//展示的摄像头列表
const [addCamera, setAddCamera] = useState(false);//添加视频弹框 const [addCamera, setAddCamera] = useState(false);//添加视频弹框
@ -36,6 +40,7 @@ const MirroringDetail = (props) => {
const [addScreen, setAddScreen] = useState(false)//筛选项设置弹框 const [addScreen, setAddScreen] = useState(false)//筛选项设置弹框
const [addLabel, setAddLabel] = useState(false)//标签组设置弹框 const [addLabel, setAddLabel] = useState(false)//标签组设置弹框
const [filterGroup, setFilterGroup] = useState([])//筛选项数据 const [filterGroup, setFilterGroup] = useState([])//筛选项数据
const [addLabelNum, setAddLabelNum] = useState(0)//标签组添加
function onCheckAllChange (e) {//全选 function onCheckAllChange (e) {//全选
if (e.target.checked) { if (e.target.checked) {
@ -56,13 +61,36 @@ const MirroringDetail = (props) => {
let resList = res.payload.data let resList = res.payload.data
let optionsList = [] let optionsList = []
for (let i = 0; i < resList.length; i++) { for (let i = 0; i < resList.length; i++) {
if (resList[i].type == 'yingshi') {
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,
channelNo: resList[i].channelNo,
content: resList[i].cameraRemarks.map(v => v.remark),
serialNo: resList[i].serialNo,
type: resList[i].type,
yingshiToken: resList[i].secretYingshi.token
}) })
} }
else {
optionsList.push({
label: resList[i].name,
value: resList[i].id,
extra: 'DID:' + resList[i].gbCamera.did || '',
did: resList[i].gbCamera.did || '',
id: resList[i].id,
channelNo: resList[i].channelNo,
content: resList[i].cameraRemarks.map(v => v.remark),
serialNo: resList[i].serialNo,
type: resList[i].type,
yingshiToken: null
})
}
}
setAllCameraList(optionsList)
setShowCameraList(optionsList) setShowCameraList(optionsList)
setPlainOptions(optionsList) setPlainOptions(optionsList)
}); });
@ -414,7 +442,15 @@ const MirroringDetail = (props) => {
label: plainOptions[q].label, label: plainOptions[q].label,
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:{
channelNo: plainOptions[q].channelNo,
content: plainOptions[q].content,
serialNo: plainOptions[q].serialNo,
type: plainOptions[q].type,
yingshiToken:plainOptions[q].yingshiToken,
id:plainOptions[q].id,
}
}) })
} }
else { else {
@ -424,7 +460,15 @@ const MirroringDetail = (props) => {
label: plainOptions[q].label, label: plainOptions[q].label,
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:{
channelNo: plainOptions[q].channelNo,
content: plainOptions[q].content,
serialNo: plainOptions[q].serialNo,
type: plainOptions[q].type,
yingshiToken:plainOptions[q].yingshiToken,
id:plainOptions[q].id,
}
}] }]
} }
} }
@ -447,17 +491,33 @@ const MirroringDetail = (props) => {
label: plainOptions[q].label, label: plainOptions[q].label,
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:{
channelNo: plainOptions[q].channelNo,
content: plainOptions[q].content,
serialNo: plainOptions[q].serialNo,
type: plainOptions[q].type,
yingshiToken:plainOptions[q].yingshiToken,
id:plainOptions[q].id,
}
}) })
} }
else { else {
let mainKey = mainData[index].key let mainKey = mainData[index].children[j].key
let thekeyarr = mainKey.split('-') let thekeyarr = mainKey.split('-')
mainData[index].children[j].children = [{ mainData[index].children[j].children = [{
label: plainOptions[q].label, label: plainOptions[q].label,
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:{
channelNo: plainOptions[q].channelNo,
content: plainOptions[q].content,
serialNo: plainOptions[q].serialNo,
type: plainOptions[q].type,
yingshiToken:plainOptions[q].yingshiToken,
id:plainOptions[q].id,
}
}] }]
} }
} }
@ -484,17 +544,33 @@ const MirroringDetail = (props) => {
label: plainOptions[q].label, label: plainOptions[q].label,
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:{
channelNo: plainOptions[q].channelNo,
content: plainOptions[q].content,
serialNo: plainOptions[q].serialNo,
type: plainOptions[q].type,
yingshiToken:plainOptions[q].yingshiToken,
id:plainOptions[q].id,
}
}) })
} }
else { else {
let mainKey = mainData[index].key let mainKey = mainData[index].children[j].children[k].key
let thekeyarr = mainKey.split('-') let thekeyarr = mainKey.split('-')
mainData[index].children[j].children[k].children = [{ mainData[index].children[j].children[k].children = [{
label: plainOptions[q].label, label: plainOptions[q].label,
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:{
channelNo: plainOptions[q].channelNo,
content: plainOptions[q].content,
serialNo: plainOptions[q].serialNo,
type: plainOptions[q].type,
yingshiToken:plainOptions[q].yingshiToken,
id:plainOptions[q].id,
}
}] }]
} }
} }
@ -512,9 +588,81 @@ const MirroringDetail = (props) => {
setMykeyword('') setMykeyword('')
setAddCameraKey(''); setAddCameraKey('');
} }
function addScreenGroup () { function addScreenGroup () {//筛选项组设置弹框
setAddScreen(true) setAddScreen(true)
} }
function addLabelGroup (index) {//标签组弹框
setAddLabelNum(index)
setAddLabel(true)
}
function toAddScreen () {//添加筛选项
let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
if (filterGroupList.length == 0) {
filterGroupList.push({
name: '我的筛选项组0',
num: 0,
forbidden: true,
filters: []
})
}
else if (filterGroupList.length < 5) {
filterGroupList.push({
name: '我的筛选项组' + (filterGroupList[filterGroupList.length - 1].num + 1),
num: filterGroupList[filterGroupList.length - 1].num + 1,
forbidden: true,
filters: []
})
}
setFilterGroup(filterGroupList)
}
function switchOnChange (val, index) {//筛选项是否禁用
let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
filterGroupList[index].forbidden = val
setFilterGroup(filterGroupList)
}
function screenDel (index) {//筛选项删除
let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
filterGroupList.splice(index, 1)
setFilterGroup(filterGroupList)
}
function toEditscreen (val, index) {//编辑筛选项名称
let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
filterGroupList[index].name = val
setFilterGroup(filterGroupList)
}
function toAddLabel () {//添加标签组
let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
if (filterGroupList[addLabelNum].filters.length == 0) {
filterGroupList[addLabelNum].filters.push({
name: '标签组0',
num: 0,
cameraIds: []
})
}
else {
filterGroupList[addLabelNum].filters.push({
name: '标签组' + (filterGroupList[addLabelNum].filters[filterGroupList[addLabelNum].filters.length - 1].num + 1),
num: filterGroupList[addLabelNum].filters[filterGroupList[addLabelNum].filters.length - 1].num + 1,
cameraIds: []
})
}
setFilterGroup(filterGroupList)
}
function labelDel (index) {//标签组删除
let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
filterGroupList[addLabelNum].filters.splice(index, 1)
setFilterGroup(filterGroupList)
}
function addFiltersCamera (val, index) {
let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
filterGroupList[addLabelNum].filters[index].cameraIds = val
setFilterGroup(filterGroupList)
}
function toEditLabel (val, index) {
let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
filterGroupList[addLabelNum].filters[index].name = val
setFilterGroup(filterGroupList)
}
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={{
@ -697,7 +845,7 @@ const MirroringDetail = (props) => {
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<div style={{ fontSize: 14, color: '#F9F9F9' }}>筛选项组设置</div> <div style={{ fontSize: 14, color: '#F9F9F9' }}>筛选项组设置</div>
<div style={{ fontSize: 18, backgroundImage: 'url(/assets/images/imageImg/numBg.png)', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: 54, height: 21, marginLeft: 7, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#FFFFFF' }}> <div style={{ fontSize: 18, backgroundImage: 'url(/assets/images/imageImg/numBg.png)', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: 54, height: 21, marginLeft: 7, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#FFFFFF' }}>
1/5 {filterGroup.length}/5
</div> </div>
</div> </div>
<div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddScreen(false); setAddLabel(false); }}> <div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddScreen(false); setAddLabel(false); }}>
@ -709,38 +857,45 @@ const MirroringDetail = (props) => {
</div> </div>
</div> </div>
<div style={{ display: 'flex', height: 41, justifyContent: 'flex-end', alignItems: 'center', borderBottom: '1px solid rgba(226,226,226,0.5)' }}> <div style={{ display: 'flex', height: 41, justifyContent: 'flex-end', alignItems: 'center', borderBottom: '1px solid rgba(226,226,226,0.5)' }}>
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 2, display: 'flex' }} onClick={() => { }}> <div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 2, display: 'flex' }} onClick={toAddScreen}>
<img <img
src="/assets/images/imageImg/addtext.png" src="/assets/images/imageImg/addtext.png"
alt="设置" alt="设置"
style={{ width: '100%' }} style={{ width: '100%' }}
/> />
</div> </div>
<div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12, marginRight: 12, cursor: 'pointer' }} onClick={() => { }}> <div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12, marginRight: 12, cursor: 'pointer' }} onClick={toAddScreen}>
添加筛选项 添加筛选项
</div> </div>
</div> </div>
<div style={{ borderLeft: '1px solid rgba(226,226,226,0.5)', height: '100%' }} className="myScreen"> <div style={{ borderLeft: '1px solid rgba(226,226,226,0.5)', height: '100%' }} className="myScreen">
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center',borderBottom: '1px solid rgba(226,226,226,0.5)', }}> {
filterGroup.map((item, index) => {
return (
<div key={index} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid rgba(226,226,226,0.5)', }}>
<div style={{ display: 'flex', height: 44, alignItems: 'center', }}> <div style={{ display: 'flex', height: 44, alignItems: 'center', }}>
<div style={{ marginLeft: 20, color: 'rgba(0,0,0,0.65)' }}> <div style={{ marginLeft: 20, color: 'rgba(0,0,0,0.65)' }}>
我的筛选项八个字 {
editNum == item.num ? (
<Input value={item.name} onBlur={() => { setEditNum(1000) }} onChange={(value) => toEditscreen(value, index)} style={{ width: 120 }} maxLength={8} className='inputpadding' size='small'></Input>
) : (item.name)
}
</div> </div>
<div style={{width: 12, height: 12, cursor: 'pointer',marginLeft:10,display:'flex'}}> <div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 10, display: 'flex' }} onClick={() => { setEditNum(item.num) }}>
<img <img
src="/assets/images/imageImg/nodeEdit.png" src="/assets/images/imageImg/nodeEdit.png"
alt="设置" alt="设置"
style={{ width: '100%' }} style={{ width: '100%' }}
/> />
</div> </div>
<div style={{width: 12, height: 12, cursor: 'pointer',marginLeft:4,display:'flex'}}> <div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 4, display: 'flex' }} onClick={() => { screenDel(index) }}>
<img <img
src="/assets/images/imageImg/nodeDel.png" src="/assets/images/imageImg/nodeDel.png"
alt="设置" alt="设置"
style={{ width: '100%' }} style={{ width: '100%' }}
/> />
</div> </div>
<div style={{width: 12, height: 12, cursor: 'pointer',marginLeft:4,display:'flex'}} onClick={()=>{setAddLabel(true)}}> <div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 4, display: 'flex' }} onClick={() => { addLabelGroup(index) }}>
<img <img
src="/assets/images/imageImg/install.png" src="/assets/images/imageImg/install.png"
alt="设置" alt="设置"
@ -749,9 +904,11 @@ const MirroringDetail = (props) => {
</div> </div>
</div> </div>
<div style={{ marginRight: 12 }}> <div style={{ marginRight: 12 }}>
<Switch onChange={(v, e) => console.log(v)} size="small" aria-label="是否禁用"></Switch> <Switch checked={item.forbidden} onChange={(v, e) => switchOnChange(v, index)} size="small" aria-label="是否禁用"></Switch>
</div> </div>
</div> </div>
)
})}
</div> </div>
</div> </div>
) : ('')} ) : ('')}
@ -768,29 +925,38 @@ const MirroringDetail = (props) => {
</div> </div>
</div> </div>
<div style={{ display: 'flex', height: 41, justifyContent: 'flex-end', alignItems: 'center', borderBottom: '1px solid rgba(226,226,226,0.5)' }}> <div style={{ display: 'flex', height: 41, justifyContent: 'flex-end', alignItems: 'center', borderBottom: '1px solid rgba(226,226,226,0.5)' }}>
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 2, display: 'flex' }} onClick={() => { }}> <div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 2, display: 'flex' }} onClick={toAddLabel}>
<img <img
src="/assets/images/imageImg/addtext.png" src="/assets/images/imageImg/addtext.png"
alt="设置" alt="设置"
style={{ width: '100%' }} style={{ width: '100%' }}
/> />
</div> </div>
<div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12, marginRight: 12, cursor: 'pointer' }} onClick={() => { }}> <div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12, marginRight: 12, cursor: 'pointer' }} onClick={toAddLabel}>
添加标签组 添加标签组
</div> </div>
</div> </div>
<div style={{ borderLeft: '1px solid rgba(226,226,226,0.5)', height: '100%' }}> <div style={{ borderLeft: '1px solid rgba(226,226,226,0.5)', height: 'calc(100% - 154px)', overflowY: 'auto', }}>
<div style={{borderBottom: '1px solid rgba(226,226,226,0.5)',}}> {
filterGroup[addLabelNum].filters.map((item, index) => {
return (
<div key={index} style={{ borderBottom: '1px solid rgba(226,226,226,0.5)', }}>
<div style={{ display: 'flex', margin: '12px 0px 12px 20px', alignItems: 'center', }}> <div style={{ display: 'flex', margin: '12px 0px 12px 20px', alignItems: 'center', }}>
<div style={{color: 'rgba(0,0,0,0.65)'}}>标签组六个字</div> <div style={{ color: 'rgba(0,0,0,0.65)' }}>
<div style={{width: 12, height: 12, cursor: 'pointer',marginLeft:10,display:'flex'}}> {
labelEditNum == item.num ? (
<Input value={item.name} onBlur={() => { setLabelEditNum(1000) }} onChange={(value) => toEditLabel(value, index)} style={{ width: 120 }} maxLength={8} className='inputpadding' size='small'></Input>
) : (item.name)
}
</div>
<div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 10, display: 'flex' }} onClick={() => { setLabelEditNum(item.num) }}>
<img <img
src="/assets/images/imageImg/nodeEdit.png" src="/assets/images/imageImg/nodeEdit.png"
alt="设置" alt="设置"
style={{ width: '100%' }} style={{ width: '100%' }}
/> />
</div> </div>
<div style={{width: 12, height: 12, cursor: 'pointer',marginLeft:4,display:'flex'}}> <div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 4, display: 'flex' }} onClick={() => { labelDel(index) }}>
<img <img
src="/assets/images/imageImg/nodeDel.png" src="/assets/images/imageImg/nodeDel.png"
alt="设置" alt="设置"
@ -798,22 +964,29 @@ const MirroringDetail = (props) => {
/> />
</div> </div>
</div> </div>
<div style={{padding:'0px 10px 10px'}}> <div style={{ padding: '0px 20px 10px 10px' }}>
<Select multiple style={{ width: '244px' }} defaultValue={['abc','hotsoon', 'jianying']} maxTagCount={2} size='large'> <Select multiple value={item.cameraIds} style={{ width: '234px' }} onChange={(val) => { addFiltersCamera(val, index) }} maxTagCount={2} size='large'>
<Select.Option value='abc'>抖音1111111111</Select.Option> {
<Select.Option value='hotsoon'>火山222222222</Select.Option> allCameraList.map((itm, idx) => {
<Select.Option value='jianying'>剪映</Select.Option> return (
<Select.Option value='xigua'>西瓜视频</Select.Option> <Select.Option value={itm.id} key={idx}>{itm.label}</Select.Option>
)
})
}
</Select> </Select>
</div> </div>
</div> </div>
)
})
}
</div> </div>
</div> </div>
) : ('') ) : ('')
} }
</div> </div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<VideoScreen /> <VideoScreen treeData={treeData}/>
</div> </div>
</div> </div>
<Modal <Modal

Write Preview
Loading…
Cancel
Save