|
|
|
@ -1,12 +1,13 @@ |
|
|
|
import React, { useEffect, useRef, useState } from 'react'; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row } from '@douyinfe/semi-ui'; |
|
|
|
import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Pagination, Checkbox } from '@douyinfe/semi-ui'; |
|
|
|
import './videoScreen.less' |
|
|
|
import VideoCard from './videoCard' |
|
|
|
|
|
|
|
|
|
|
|
const VideoScreen = (props) => { |
|
|
|
const treeData = [{ |
|
|
|
const treeData = [ |
|
|
|
{ |
|
|
|
label: '公司', |
|
|
|
value: '公司', |
|
|
|
key: '0-1', |
|
|
|
@ -20,7 +21,7 @@ const VideoScreen = (props) => { |
|
|
|
content: ['5442542542', '452345', '234524525'], |
|
|
|
serialNo: "F61504020", |
|
|
|
type: "yingshi", |
|
|
|
yingshiToken: "at.7pl4c5orb9fpndtlbjpsn5m11szujnf7-1laxxre0ob-010o8fw-kqeuwthva" |
|
|
|
yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk" |
|
|
|
} |
|
|
|
}, { |
|
|
|
label: '机房', |
|
|
|
@ -31,22 +32,23 @@ const VideoScreen = (props) => { |
|
|
|
content: ['5442542542', '452345', '234524525'], |
|
|
|
serialNo: "F61504020", |
|
|
|
type: "yingshi", |
|
|
|
yingshiToken: "at.7pl4c5orb9fpndtlbjpsn5m11szujnf7-1laxxre0ob-010o8fw-kqeuwthva" |
|
|
|
yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk" |
|
|
|
} |
|
|
|
}, { |
|
|
|
label: '后门', |
|
|
|
value: '后门', |
|
|
|
key: '0-1-3', |
|
|
|
videoData: { |
|
|
|
channelNo: 1, |
|
|
|
channelNo: 2, |
|
|
|
content: ['5442542542', '452345', '234524525'], |
|
|
|
serialNo: "F61504020", |
|
|
|
type: "yingshi", |
|
|
|
yingshiToken: "at.7pl4c5orb9fpndtlbjpsn5m11szujnf7-1laxxre0ob-010o8fw-kqeuwthva" |
|
|
|
yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk" |
|
|
|
} |
|
|
|
}, |
|
|
|
] |
|
|
|
}, { |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '外部', |
|
|
|
value: '外部', |
|
|
|
key: '0-2', |
|
|
|
@ -61,11 +63,11 @@ const VideoScreen = (props) => { |
|
|
|
value: '房子', |
|
|
|
key: '0-2-1-1', |
|
|
|
videoData: { |
|
|
|
channelNo: 1, |
|
|
|
channelNo: null, |
|
|
|
content: ['5442542542', '452345', '234524525'], |
|
|
|
serialNo: "F61504020", |
|
|
|
serialNo: "G56384764", |
|
|
|
type: "yingshi", |
|
|
|
yingshiToken: "at.7pl4c5orb9fpndtlbjpsn5m11szujnf7-1laxxre0ob-010o8fw-kqeuwthva", |
|
|
|
yingshiToken: "at.c7dnknnvd4irh8zddul3dgkpb4f3oz83-4n6u7zv8st-1gxz7ny-lgffyh25z", |
|
|
|
} |
|
|
|
}, |
|
|
|
] |
|
|
|
@ -93,10 +95,10 @@ const VideoScreen = (props) => { |
|
|
|
|
|
|
|
const [pageSize, setPageSize] = useState(4) //每页视频数量 |
|
|
|
const [queryData, setQueryData] = useState([{ label: '全部', value: '全部', key: '0' }]) //查询树状数据 |
|
|
|
const [leftTree, setLefTtree] = useState([{ label: '全部', value: '全部', key: '0', children: treeData}]) //左侧树状数据 |
|
|
|
const [leftTree, setLefTtree] = useState(treeData) //左侧树状数据 |
|
|
|
const [playData, setPlayData] = useState([]) //视频数据 |
|
|
|
const [queryValue, setQueryValue] = useState(['全部']) //查询条件 |
|
|
|
const [leftValue, setLeftValue] = useState() // |
|
|
|
const [leftValue, setLeftValue] = useState(treeData.map(v => v.value)) //树状被选中的视频 |
|
|
|
|
|
|
|
const api = useRef(); |
|
|
|
|
|
|
|
@ -106,28 +108,53 @@ const VideoScreen = (props) => { |
|
|
|
query.push({ label: v.label, value: v.value, key: v.key }) |
|
|
|
]) |
|
|
|
setQueryData([{ label: '全部', value: '全部', key: '0', children: query }]) |
|
|
|
let playVideo = [] |
|
|
|
const playVideoData = (data) => { |
|
|
|
// console.log(data); |
|
|
|
data.map(v => { |
|
|
|
if (v.videoData) playVideo.push(v) |
|
|
|
if (v.children) playVideoData(v.children) |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
playVideoData(treeData) |
|
|
|
setPlayData(playVideo) |
|
|
|
// console.log(playVideo); |
|
|
|
}, []) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (treeData && queryValue.includes('全部')) { |
|
|
|
setLefTtree(treeData) |
|
|
|
|
|
|
|
} else { |
|
|
|
let leftData = [] |
|
|
|
queryValue.map(item => leftData.push(treeData?.find(({ value }) => item == value))) //获取左侧树状数据 |
|
|
|
setLefTtree([{ label: '全部', value: '全部', key: '0', children: leftData }]) |
|
|
|
queryValue.map(item => { |
|
|
|
leftData.push(treeData?.find(({ value }) => item == value)) |
|
|
|
}) //获取左侧树状数据 |
|
|
|
console.log(leftData); |
|
|
|
setLefTtree(leftData) |
|
|
|
let playVideo = [] |
|
|
|
const playVideoData = (data) => { |
|
|
|
// console.log(data); |
|
|
|
data.map(v => { |
|
|
|
if (v.videoData) playVideo.push(v) |
|
|
|
if (v.children) playVideoData(v.children) |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
playVideoData(leftData) |
|
|
|
setPlayData(playVideo) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}, [queryData, queryValue]) |
|
|
|
}, [queryData, queryValue, leftValue]) |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
setLeftValue() |
|
|
|
}, []) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//搜索条件赛选样式 |
|
|
|
const screen = { width: 193, marginRight: 20, marginBottom: 16, color: "#fff", }; |
|
|
|
|
|
|
|
@ -162,7 +189,7 @@ const VideoScreen = (props) => { |
|
|
|
background: 'url(/assets/images/application/background.png) 100% 100%', |
|
|
|
backgroundSize: '100% 100%', |
|
|
|
color: '#FFFFFF', |
|
|
|
position: 'absolute', minWidth: 1000, |
|
|
|
// minWidth: 1000, |
|
|
|
}}> |
|
|
|
{/* 头部标题 */} |
|
|
|
<div style={{ |
|
|
|
@ -185,9 +212,9 @@ const VideoScreen = (props) => { |
|
|
|
</div> |
|
|
|
|
|
|
|
<div style={{ |
|
|
|
height: "calc(100% - 112px)", margin: '16px', display: 'flex', |
|
|
|
height: "calc(100% - 116px)", margin: '16px', display: 'flex', |
|
|
|
}}> |
|
|
|
<div style={{ width: 300, height: "100%", border: '2px solid #003D9E', }}> |
|
|
|
<div style={{ width: 300, height: "100%", border: '2px solid #003D9E', position: 'relative' }}> |
|
|
|
<div>查询： |
|
|
|
<TreeSelect |
|
|
|
style={{ width: 150, }} |
|
|
|
@ -208,7 +235,7 @@ const VideoScreen = (props) => { |
|
|
|
multiple |
|
|
|
treeData={leftTree} |
|
|
|
defaultExpandAll |
|
|
|
defaultValue={['公司','外部']} |
|
|
|
value={leftValue} |
|
|
|
blockNode={false} |
|
|
|
onChange={(e) => { |
|
|
|
console.log(e); |
|
|
|
@ -219,6 +246,7 @@ const VideoScreen = (props) => { |
|
|
|
}} |
|
|
|
style={{ width: 150, color: '#FFFFFF' }} |
|
|
|
/> |
|
|
|
<Checkbox defaultChecked onChange={checked => console.log(checked)} aria-label="Checkbox 示例" style={{ position: 'absolute', right: 0, bottom: 60 }}>全选</Checkbox> |
|
|
|
</div> |
|
|
|
<div style={{ |
|
|
|
flex: 1, marginLeft: '10px', border: '2px solid #003D9E', |
|
|
|
@ -292,15 +320,35 @@ const VideoScreen = (props) => { |
|
|
|
</Button> */} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', height: `calc( 100% - 160px )` }}> |
|
|
|
<div style={{ display: 'flex', height: '100%' }}> |
|
|
|
{/* 视频 */} |
|
|
|
<div style={{ flex: 1, height: '100%' }}> |
|
|
|
<Row style={{ height: '100%' }}> |
|
|
|
{/* {data.map((v, index) => { |
|
|
|
console.log(v); |
|
|
|
<Row style={{ height: `calc( 100% - 160px )` }}> |
|
|
|
{playData?.map((v, index) => { |
|
|
|
return <VideoCard key={'VideoCard' + index} data={v} pageSize={pageSize} /> |
|
|
|
})} */} |
|
|
|
})} |
|
|
|
</Row> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
display: "flex", |
|
|
|
justifyContent: 'space-between', |
|
|
|
padding: "10px", |
|
|
|
}} |
|
|
|
> |
|
|
|
<span style={{ lineHeight: "30px" }}> |
|
|
|
共{10}个设备 |
|
|
|
</span> |
|
|
|
<Pagination |
|
|
|
total={100} |
|
|
|
|
|
|
|
// currentPage={1} |
|
|
|
style={{ color: 'white' }} |
|
|
|
onChange={(currentPage, pageSize) => { |
|
|
|
// setQuery({ limit: pageSize, page: currentPage - 1 }); |
|
|
|
// page.current = currentPage - 1 |
|
|
|
}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{/* 视频设置 */} |
|
|
|
<div style={{ |
|
|
|
@ -313,7 +361,6 @@ const VideoScreen = (props) => { |
|
|
|
return <div key={index}> |
|
|
|
<Popover |
|
|
|
position='left' |
|
|
|
trigger='click' |
|
|
|
content={() => { |
|
|
|
switch (v.value) { |
|
|
|
case '宫格设置': |
