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
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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 347
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx

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

@ -1,7 +1,7 @@
import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'react-redux';
import '../style.less'
import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxGroup,Select } from "@douyinfe/semi-ui"
import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxGroup, Select } from "@douyinfe/semi-ui"
import VideoScreen from '../components/videoScreen';
@ -16,6 +16,9 @@ const MirroringDetail = (props) => {
const [chooseNum, setChooseNum] = useState(0);//当前选择tab
const [chooseList, setChooseList] = useState(['节点', '样式', '功能']);
const [editKey, setEditKey] = useState('')
const [editNum, setEditNum] = useState(1000)
const [labelEditNum, setLabelEditNum] = useState(1000)
const [comingVisible, setComingVisible] = useState(false)
const [treeData, setTreeData] = useState([//树形控件数据
{
@ -29,13 +32,15 @@ const MirroringDetail = (props) => {
const [plainOptions, setPlainOptions] = useState([]);//摄像头选择
const [checkedList, setCheckedList] = useState([]);//选中的摄像头列表
const [mykeyword, setMykeyword] = useState('');//摄像头搜索
const [allCameraList, setAllCameraList] = useState([])//标签组的摄像头列表
const [showCameraList, setShowCameraList] = useState([])//展示的摄像头列表
const [saveShowList, setSaveShowList] = useState([])//展示的摄像头列表
const [addCamera, setAddCamera] = useState(false);//添加视频弹框
const [addCameraKey, setAddCameraKey] = useState('');//添加视频弹框
const [addScreen, setAddScreen] = useState(false)//筛选项设置弹框
const [addLabel, setAddLabel] = useState(false)//标签组设置弹框
const [filterGroup,setFilterGroup] = useState([])//筛选项数据
const [filterGroup, setFilterGroup] = useState([])//筛选项数据
const [addLabelNum, setAddLabelNum] = useState(0)//标签组添加
function onCheckAllChange (e) {//全选
if (e.target.checked) {
@ -56,13 +61,36 @@ const MirroringDetail = (props) => {
let resList = res.payload.data
let optionsList = []
for (let i = 0; i < resList.length; i++) {
optionsList.push({
label: resList[i].name,
value: resList[i].id,
extra: 'DID:' + resList[i].gbCamera.did || '',
did: resList[i].gbCamera.did || ''
})
if (resList[i].type == 'yingshi') {
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: 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)
setPlainOptions(optionsList)
});
@ -414,7 +442,15 @@ const MirroringDetail = (props) => {
label: plainOptions[q].label,
value: (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 {
@ -424,7 +460,15 @@ const MirroringDetail = (props) => {
label: plainOptions[q].label,
value: (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,
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
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 {
let mainKey = mainData[index].key
let mainKey = mainData[index].children[j].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
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,
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
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 {
let mainKey = mainData[index].key
let mainKey = mainData[index].children[j].children[k].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
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('')
setAddCameraKey('');
}
function addScreenGroup () {
function addScreenGroup () {//筛选项组设置弹框
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 (
<div style={{ background: 'rgb(246, 250, 255)', height: '100%', width: '100%' }}>
<div style={{
@ -697,10 +845,10 @@ const MirroringDetail = (props) => {
<div style={{ display: 'flex' }}>
<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' }}>
1/5
{filterGroup.length}/5
</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); }}>
<img
src="/assets/images/imageImg/close.png"
alt="设置"
@ -709,56 +857,65 @@ const MirroringDetail = (props) => {
</div>
</div>
<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
src="/assets/images/imageImg/addtext.png"
alt="设置"
style={{ width: '100%' }}
/>
</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 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)', }}>
<div style={{ display: 'flex',height:44, alignItems: 'center', }}>
<div style={{marginLeft:20,color: 'rgba(0,0,0,0.65)'}}>
我的筛选项八个字
</div>
<div style={{width: 12, height: 12, cursor: 'pointer',marginLeft:10,display:'flex'}}>
<img
src="/assets/images/imageImg/nodeEdit.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
<div style={{width: 12, height: 12, cursor: 'pointer',marginLeft:4,display:'flex'}}>
<img
src="/assets/images/imageImg/nodeDel.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
<div style={{width: 12, height: 12, cursor: 'pointer',marginLeft:4,display:'flex'}} onClick={()=>{setAddLabel(true)}}>
<img
src="/assets/images/imageImg/install.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
</div>
<div style={{marginRight:12}}>
<Switch onChange={(v, e) => console.log(v)} size="small" aria-label="是否禁用"></Switch>
</div>
</div>
{
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={{ 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 style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 10, display: 'flex' }} onClick={() => { setEditNum(item.num) }}>
<img
src="/assets/images/imageImg/nodeEdit.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
<div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 4, display: 'flex' }} onClick={() => { screenDel(index) }}>
<img
src="/assets/images/imageImg/nodeDel.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
<div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 4, display: 'flex' }} onClick={() => { addLabelGroup(index) }}>
<img
src="/assets/images/imageImg/install.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
</div>
<div style={{ marginRight: 12 }}>
<Switch checked={item.forbidden} onChange={(v, e) => switchOnChange(v, index)} size="small" aria-label="是否禁用"></Switch>
</div>
</div>
)
})}
</div>
</div>
) : ('')}
{ addLabel?(
<div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 464, background: '#FFFFFF', zIndex: 120 }}>
{addLabel ? (
<div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 464, background: '#FFFFFF', zIndex: 120 }}>
<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={{ fontSize: 14, color: '#F9F9F9' }}>筛选项组设置</div>
<div style={{ fontSize: 14, color: '#F9F9F9' }}>筛选项组设置</div>
<div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddLabel(false); }}>
<img
src="/assets/images/imageImg/close.png"
@ -768,52 +925,68 @@ const MirroringDetail = (props) => {
</div>
</div>
<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
src="/assets/images/imageImg/addtext.png"
alt="设置"
style={{ width: '100%' }}
/>
</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 style={{ borderLeft: '1px solid rgba(226,226,226,0.5)', height: '100%' }}>
<div style={{borderBottom: '1px solid rgba(226,226,226,0.5)',}}>
<div style={{display:'flex',margin:'12px 0px 12px 20px',alignItems: 'center',}}>
<div style={{color: 'rgba(0,0,0,0.65)'}}>标签组六个字</div>
<div style={{width: 12, height: 12, cursor: 'pointer',marginLeft:10,display:'flex'}}>
<img
src="/assets/images/imageImg/nodeEdit.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
<div style={{width: 12, height: 12, cursor: 'pointer',marginLeft:4,display:'flex'}}>
<img
src="/assets/images/imageImg/nodeDel.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
</div>
<div style={{padding:'0px 10px 10px'}}>
<Select multiple style={{ width: '244px' }} defaultValue={['abc','hotsoon', 'jianying']} maxTagCount={2} size='large'>
<Select.Option value='abc'>抖音1111111111</Select.Option>
<Select.Option value='hotsoon'>火山222222222</Select.Option>
<Select.Option value='jianying'>剪映</Select.Option>
<Select.Option value='xigua'>西瓜视频</Select.Option>
</Select>
</div>
</div>
<div style={{ borderLeft: '1px solid rgba(226,226,226,0.5)', height: 'calc(100% - 154px)', overflowY: 'auto', }}>
{
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={{ color: 'rgba(0,0,0,0.65)' }}>
{
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
src="/assets/images/imageImg/nodeEdit.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
<div style={{ width: 12, height: 12, cursor: 'pointer', marginLeft: 4, display: 'flex' }} onClick={() => { labelDel(index) }}>
<img
src="/assets/images/imageImg/nodeDel.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
</div>
<div style={{ padding: '0px 20px 10px 10px' }}>
<Select multiple value={item.cameraIds} style={{ width: '234px' }} onChange={(val) => { addFiltersCamera(val, index) }} maxTagCount={2} size='large'>
{
allCameraList.map((itm, idx) => {
return (
<Select.Option value={itm.id} key={idx}>{itm.label}</Select.Option>
)
})
}
</Select>
</div>
</div>
)
})
}
</div>
</div>
):('')
) : ('')
}
</div>
<div style={{ flex: 1 }}>
<VideoScreen />
<VideoScreen treeData={treeData}/>
</div>
</div>
<Modal

Write Preview
Loading…
Cancel
Save