|
|
|
@ -3,95 +3,103 @@ import { connect } from 'react-redux'; |
|
|
|
import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Pagination, Checkbox } from '@douyinfe/semi-ui'; |
|
|
|
import './videoScreen.less' |
|
|
|
import VideoCard from './videoCard' |
|
|
|
import { version } from 'less'; |
|
|
|
|
|
|
|
|
|
|
|
const VideoScreen = (props) => { |
|
|
|
const treeData = [ |
|
|
|
{ |
|
|
|
label: '公司', |
|
|
|
value: '公司', |
|
|
|
key: '0-1', |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
label: '大门', |
|
|
|
value: '大门', |
|
|
|
key: '0-1-1', |
|
|
|
videoData: { |
|
|
|
channelNo: 1, |
|
|
|
content: ['5442542542', '452345', '234524525'], |
|
|
|
serialNo: "F61504020", |
|
|
|
type: "yingshi", |
|
|
|
yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk" |
|
|
|
} |
|
|
|
}, { |
|
|
|
label: '机房', |
|
|
|
value: '机房', |
|
|
|
key: '0-1-2', |
|
|
|
videoData: { |
|
|
|
channelNo: 3, |
|
|
|
content: ['5442542542', '452345', '234524525'], |
|
|
|
serialNo: "F61504020", |
|
|
|
type: "yingshi", |
|
|
|
yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk" |
|
|
|
} |
|
|
|
}, { |
|
|
|
label: '后门', |
|
|
|
value: '后门', |
|
|
|
key: '0-1-3', |
|
|
|
videoData: { |
|
|
|
channelNo: 2, |
|
|
|
content: ['5442542542', '452345', '234524525'], |
|
|
|
serialNo: "F61504020", |
|
|
|
type: "yingshi", |
|
|
|
yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk" |
|
|
|
} |
|
|
|
}, |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '外部', |
|
|
|
value: '外部', |
|
|
|
key: '0-2', |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
label: '水库', |
|
|
|
value: '水库', |
|
|
|
key: '0-2-1', |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
label: '房子', |
|
|
|
value: '房子', |
|
|
|
key: '0-2-1-1', |
|
|
|
videoData: { |
|
|
|
channelNo: null, |
|
|
|
content: ['5442542542', '452345', '234524525'], |
|
|
|
serialNo: "G56384764", |
|
|
|
type: "yingshi", |
|
|
|
yingshiToken: "at.c7dnknnvd4irh8zddul3dgkpb4f3oz83-4n6u7zv8st-1gxz7ny-lgffyh25z", |
|
|
|
} |
|
|
|
}, |
|
|
|
] |
|
|
|
}, |
|
|
|
] |
|
|
|
}, { |
|
|
|
label: '外', |
|
|
|
value: '外', |
|
|
|
key: '0-3', |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
label: '库', |
|
|
|
value: '库', |
|
|
|
key: '0-3-1', |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
label: '子', |
|
|
|
value: '子', |
|
|
|
key: '0-3-1-1', |
|
|
|
}, |
|
|
|
] |
|
|
|
}, |
|
|
|
] |
|
|
|
}] |
|
|
|
const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, showHeader }) => { |
|
|
|
console.log({ 视频: treeData }); |
|
|
|
console.log(filterGroup); |
|
|
|
console.log(headerName); |
|
|
|
console.log(videoPlay); |
|
|
|
console.log(template); |
|
|
|
console.log(showHeader); |
|
|
|
|
|
|
|
// const treeData = [ |
|
|
|
// { |
|
|
|
// label: '公司', |
|
|
|
// value: '公司', |
|
|
|
// key: '524252542', |
|
|
|
// children: [ |
|
|
|
// { |
|
|
|
// label: '大门', |
|
|
|
// value: '大门', |
|
|
|
// key: '2451245', |
|
|
|
// videoData: { |
|
|
|
// channelNo: 1, |
|
|
|
// content: ['5442542542', '452345', '234524525'], |
|
|
|
// serialNo: "F61504020", |
|
|
|
// type: "yingshi", |
|
|
|
// yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk" |
|
|
|
// } |
|
|
|
// }, { |
|
|
|
// label: '机房', |
|
|
|
// value: '机房', |
|
|
|
// key: '54252542', |
|
|
|
// videoData: { |
|
|
|
// channelNo: 3, |
|
|
|
// content: ['5442542542', '452345', '234524525'], |
|
|
|
// serialNo: "F61504020", |
|
|
|
// type: "yingshi", |
|
|
|
// yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk" |
|
|
|
// } |
|
|
|
// }, { |
|
|
|
// label: '后门', |
|
|
|
// value: '后门', |
|
|
|
// key: '52425425642', |
|
|
|
// videoData: { |
|
|
|
// channelNo: 2, |
|
|
|
// content: ['5442542542', '452345', '234524525'], |
|
|
|
// serialNo: "F61504020", |
|
|
|
// type: "yingshi", |
|
|
|
// yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk" |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// ] |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// label: '外部', |
|
|
|
// value: '外部', |
|
|
|
// key: '25425425', |
|
|
|
// children: [ |
|
|
|
// { |
|
|
|
// label: '水库', |
|
|
|
// value: '水库', |
|
|
|
// key: '2542542542542', |
|
|
|
// children: [ |
|
|
|
// { |
|
|
|
// label: '房子', |
|
|
|
// value: '房子', |
|
|
|
// key: '2542542542542', |
|
|
|
// videoData: { |
|
|
|
// channelNo: null, |
|
|
|
// content: ['5442542542', '452345', '234524525'], |
|
|
|
// serialNo: "G56384764", |
|
|
|
// type: "yingshi", |
|
|
|
// yingshiToken: "at.c7dnknnvd4irh8zddul3dgkpb4f3oz83-4n6u7zv8st-1gxz7ny-lgffyh25z", |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// ] |
|
|
|
// }, |
|
|
|
// ] |
|
|
|
// }, { |
|
|
|
// label: '外', |
|
|
|
// value: '外', |
|
|
|
// key: '0-3', |
|
|
|
// children: [ |
|
|
|
// { |
|
|
|
// label: '库', |
|
|
|
// value: '库', |
|
|
|
// key: '0-3-1', |
|
|
|
// children: [ |
|
|
|
// { |
|
|
|
// label: '子', |
|
|
|
// value: '子', |
|
|
|
// key: '0-3-1-1', |
|
|
|
// }, |
|
|
|
// ] |
|
|
|
// }, |
|
|
|
// ] |
|
|
|
// }] |
|
|
|
|
|
|
|
const [pageSize, setPageSize] = useState(4) //每页视频数量 |
|
|
|
const [queryData, setQueryData] = useState([{ label: '全部', value: '全部', key: '0' }]) //查询树状数据 |
|
|
|
@ -99,64 +107,101 @@ const VideoScreen = (props) => { |
|
|
|
const [playData, setPlayData] = useState([]) //视频数据 |
|
|
|
const [queryValue, setQueryValue] = useState(['全部']) //查询条件 |
|
|
|
const [leftValue, setLeftValue] = useState(treeData.map(v => v.value)) //树状被选中的视频 |
|
|
|
const [selectAll, setSelectAll] = useState(true) //全选 |
|
|
|
|
|
|
|
const api = useRef(); |
|
|
|
const chooseAll = useRef(true); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
console.log(45464); |
|
|
|
let query = [] |
|
|
|
treeData?.map(v => [ |
|
|
|
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); |
|
|
|
}, []) |
|
|
|
setQueryData([{ label: '全部', value: '全部', key: '00', children: query }]) |
|
|
|
let values = treeData.map(v => v.value) |
|
|
|
videoData(treeData, values) |
|
|
|
setLefTtree(treeData) |
|
|
|
setLeftValue(treeData.map(v => v.value)) |
|
|
|
}, [treeData]) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
console.log(queryValue); |
|
|
|
if (treeData && queryValue.includes('全部')) { |
|
|
|
console.log(54254); |
|
|
|
setLefTtree(treeData) |
|
|
|
|
|
|
|
let values = treeData.map(v => v.value) |
|
|
|
videoData(treeData, values) |
|
|
|
} else { |
|
|
|
console.log(3); |
|
|
|
let leftData = [] |
|
|
|
queryValue.map(item => { |
|
|
|
leftData.push(treeData?.find(({ value }) => item == value)) |
|
|
|
}) //获取左侧树状数据 |
|
|
|
console.log(leftData); |
|
|
|
setLefTtree(leftData) |
|
|
|
videoData(treeData, queryValue) |
|
|
|
} |
|
|
|
}, [queryValue]) //查询参数改变时 |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
let playVideo = [] |
|
|
|
const playVideoData = (data) => { |
|
|
|
// console.log(data); |
|
|
|
data.map(v => { |
|
|
|
if (v.videoData) playVideo.push(v) |
|
|
|
if (v.children) playVideoData(v.children) |
|
|
|
const videoPlay = (data, values) => { |
|
|
|
data?.map(v => { |
|
|
|
if (values?.find(vv => vv == v.value)) { |
|
|
|
if (v.camera) playVideo.push(v) |
|
|
|
if (v.children) { |
|
|
|
v.children.map(vv => { |
|
|
|
if (vv.camera) playVideo.push(vv) |
|
|
|
if (vv.children) { |
|
|
|
vv.children.map(c => { |
|
|
|
if (c.camera) playVideo.push(c) |
|
|
|
if (c.children) { |
|
|
|
vv.children.map(cc => { |
|
|
|
if (c.camera) playVideo.push(cc) |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
playVideoData(leftData) |
|
|
|
setPlayData(playVideo) |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
if (v.children) { |
|
|
|
videoPlay(v.children, leftValue) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
videoPlay(leftTree, leftValue) |
|
|
|
console.log(playVideo); |
|
|
|
setPlayData(playVideo); |
|
|
|
|
|
|
|
for (let v of treeData) { //判断是否全选 |
|
|
|
if (!leftValue.includes(v.value)) { |
|
|
|
setSelectAll(false) |
|
|
|
return |
|
|
|
} else { |
|
|
|
setSelectAll(true) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}, [queryData, queryValue, leftValue]) |
|
|
|
|
|
|
|
}, [leftValue]) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
}, []) |
|
|
|
|
|
|
|
//确定查询条件下视频总数 |
|
|
|
const videoData = (d, v) => { |
|
|
|
let playVideo = [] |
|
|
|
let videos = v.map(item => d.find(vv => vv.value == item)) |
|
|
|
const playVideoData = (data) => { |
|
|
|
data.map(c => { |
|
|
|
if (c.videoData) playVideo.push(c) |
|
|
|
if (c.children) playVideoData(c.children) |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
playVideoData(videos) |
|
|
|
setPlayData(playVideo) |
|
|
|
} |
|
|
|
|
|
|
|
//搜索条件赛选样式 |
|
|
|
const screen = { width: 193, marginRight: 20, marginBottom: 16, color: "#fff", }; |
|
|
|
|
|
|
|
//宫格设置点击 |
|
|
|
const flipScreens = (data) => { |
|
|
|
@ -179,7 +224,7 @@ const VideoScreen = (props) => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
console.log(queryValue); |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<div |
|
|
|
@ -192,7 +237,7 @@ const VideoScreen = (props) => { |
|
|
|
// minWidth: 1000, |
|
|
|
}}> |
|
|
|
{/* 头部标题 */} |
|
|
|
<div style={{ |
|
|
|
{showHeader ? <div style={{ |
|
|
|
width: '100%', height: 80, |
|
|
|
textAlign: 'center', |
|
|
|
}}> |
|
|
|
@ -208,24 +253,24 @@ const VideoScreen = (props) => { |
|
|
|
letterSpacing: '5px', |
|
|
|
background: 'url(/assets/images/application/titleBottom.png) 100% 100%', |
|
|
|
backgroundSize: '100% 100%', |
|
|
|
}} > 智慧小蓝视频融合监管中心</div> |
|
|
|
</div> |
|
|
|
}} >{headerName}</div> |
|
|
|
</div> : ""} |
|
|
|
|
|
|
|
|
|
|
|
<div style={{ |
|
|
|
height: "calc(100% - 116px)", margin: '16px', display: 'flex', |
|
|
|
height: `calc(100% - ${showHeader ? 80 : 0}px)`, padding: '8px', display: 'flex', |
|
|
|
}}> |
|
|
|
<div style={{ width: 300, height: "100%", border: '2px solid #003D9E', position: 'relative' }}> |
|
|
|
<div style={{ width: 300, height: "100%", border: '2px solid #003D9E', position: 'relative', padding: 5 }}> |
|
|
|
<div>查询： |
|
|
|
<TreeSelect |
|
|
|
style={{ width: 150, }} |
|
|
|
style={{ width: 230, border: '1px solid rgba(255, 255, 255, 0.488)' }} |
|
|
|
dropdownStyle={{ maxHeight: 300, overflow: 'auto', color: '#FFFFFF', }} |
|
|
|
treeData={queryData} |
|
|
|
placeholder="请选择" |
|
|
|
multiple={true} |
|
|
|
defaultValue={['全部']} |
|
|
|
value={queryValue} |
|
|
|
maxTagCount={1} |
|
|
|
onChange={(e) => { |
|
|
|
console.log(e) |
|
|
|
setQueryValue(e) |
|
|
|
}} |
|
|
|
/> |
|
|
|
@ -234,22 +279,30 @@ const VideoScreen = (props) => { |
|
|
|
<Tree |
|
|
|
multiple |
|
|
|
treeData={leftTree} |
|
|
|
defaultExpandAll |
|
|
|
value={leftValue} |
|
|
|
blockNode={false} |
|
|
|
onChange={(e) => { |
|
|
|
console.log(e); |
|
|
|
// console.log(e); |
|
|
|
setLeftValue(e) |
|
|
|
}} |
|
|
|
onSelect={(e) => { |
|
|
|
console.log(e); |
|
|
|
// console.log(e); |
|
|
|
}} |
|
|
|
style={{ width: 150, color: '#FFFFFF' }} |
|
|
|
/> |
|
|
|
<Checkbox defaultChecked onChange={checked => console.log(checked)} aria-label="Checkbox 示例" style={{ position: 'absolute', right: 0, bottom: 60 }}>全选</Checkbox> |
|
|
|
<Checkbox |
|
|
|
checked={selectAll} |
|
|
|
onChange={checked => { |
|
|
|
setSelectAll(!selectAll) |
|
|
|
chooseAll.current = !chooseAll.current |
|
|
|
}} |
|
|
|
ria-label="Checkbox 示例" |
|
|
|
style={{ position: 'absolute', right: 10, bottom: 10 }} |
|
|
|
> |
|
|
|
全选</Checkbox> |
|
|
|
</div> |
|
|
|
<div style={{ |
|
|
|
flex: 1, marginLeft: '10px', border: '2px solid #003D9E', |
|
|
|
flex: 1, marginLeft: '4px', border: '2px solid #003D9E', |
|
|
|
}}> |
|
|
|
<div style={{ display: 'flex', }}> |
|
|
|
<div style={{ flex: 1, marginTop: '10px', }}> |
|
|
|
@ -260,7 +313,19 @@ const VideoScreen = (props) => { |
|
|
|
layout="horizontal" |
|
|
|
style={{ position: "relative", width: "100%", flex: 1 }} |
|
|
|
> |
|
|
|
<Form.Input label="设备搜索：" field="keyword" maxLength="36" placeholder="请输入设备名称" labelPosition="left" style={screen} /> |
|
|
|
<Form.Input label={<span style={{ marginRight: -14, display: 'inline-block' }}>设备搜索:</span>} field="keyword" maxLength="36" placeholder="请输入设备名称" labelPosition="left" style={{ width: 125, color: "#fff", }} /> |
|
|
|
{filterGroup?.map(v => { |
|
|
|
return <Form.Select |
|
|
|
label={<span style={{ marginRight: -14, display: 'inline-block' }} title={v.name}>我的...:</span>} |
|
|
|
labelPosition="left" |
|
|
|
field={"field" + v.num} |
|
|
|
style={{ width: 75, color: "#fff", background: "#01185f", boxShadow: " inset 0px 0px 5px 1px rgba(28, 96, 254, 0.4)" }} |
|
|
|
placeholder="全部" |
|
|
|
showClear |
|
|
|
> |
|
|
|
{v.filters.map(vv => <Form.Select.Option value={vv.num}>{vv.name}</Form.Select.Option>)} |
|
|
|
</Form.Select> |
|
|
|
})} |
|
|
|
{/* <Form.Select |
|
|
|
label="状态查询：" |
|
|
|
labelPosition="left" |
|
|
|
@ -289,7 +354,7 @@ const VideoScreen = (props) => { |
|
|
|
<Button |
|
|
|
theme="solid" |
|
|
|
type="primary" |
|
|
|
style={{ width: 65, height: 30, borderRadius: 3, marginRight: 16, }} |
|
|
|
style={{ width: 48, height: 30, borderRadius: 3, marginRight: 8, }} |
|
|
|
onClick={() => { |
|
|
|
// api.current.validate().then((v) => { |
|
|
|
// setSearch(v); |
|
|
|
@ -324,8 +389,8 @@ const VideoScreen = (props) => { |
|
|
|
{/* 视频 */} |
|
|
|
<div style={{ flex: 1, height: '100%' }}> |
|
|
|
<Row style={{ height: `calc( 100% - 160px )` }}> |
|
|
|
{playData?.map((v, index) => { |
|
|
|
return <VideoCard key={'VideoCard' + index} data={v} pageSize={pageSize} /> |
|
|
|
{playData?.map(v => { |
|
|
|
return <VideoCard key={'VideoCard' + v.key} data={v} pageSize={pageSize} /> |
|
|
|
})} |
|
|
|
</Row> |
|
|
|
<div |
|
|
|
@ -336,10 +401,10 @@ const VideoScreen = (props) => { |
|
|
|
}} |
|
|
|
> |
|
|
|
<span style={{ lineHeight: "30px" }}> |
|
|
|
共{10}个设备 |
|
|
|
共{playData.length}个设备 |
|
|
|
</span> |
|
|
|
<Pagination |
|
|
|
total={100} |
|
|
|
{playData.length > 0 ? <Pagination |
|
|
|
total={playData.length} |
|
|
|
|
|
|
|
// currentPage={1} |
|
|
|
style={{ color: 'white' }} |
|
|
|
@ -347,7 +412,7 @@ const VideoScreen = (props) => { |
|
|
|
// setQuery({ limit: pageSize, page: currentPage - 1 }); |
|
|
|
// page.current = currentPage - 1 |
|
|
|
}} |
|
|
|
/> |
|
|
|
/> : ""} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{/* 视频设置 */} |
|
|
|
|
