20 changed files with 354 additions and 86 deletions
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 347 B |
|
After Width: | Height: | Size: 325 B |
|
After Width: | Height: | Size: 411 B |
|
After Width: | Height: | Size: 321 B |
|
After Width: | Height: | Size: 27 KiB |
@ -0,0 +1,39 @@ |
|||
import React, { useEffect, useRef } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Col } from '@douyinfe/semi-ui'; |
|||
import { VideoPlay } from "$components"; |
|||
import { useState } from 'react'; |
|||
|
|||
|
|||
const Container = ({ videoObj }) => { |
|||
const [videoWidth, setVideoWidth] = useState() |
|||
const [videoHeight, setVideoHeight] = useState() |
|||
useEffect(() => { |
|||
setVideoWidth(document.getElementById('videoo').clientWidth) |
|||
setVideoHeight(document.getElementById('videoo').clientHeight) |
|||
}, []) |
|||
|
|||
return ( |
|||
<div style={{ width: videoWidth || '100%', height: videoHeight || '100%', border: ' 1px solid #D9D9D9', }}> |
|||
{/* <VideoPlay sizeWh={{ |
|||
width: 600, |
|||
height: 400, |
|||
parentWidth: 600, |
|||
parentHeight: 400, |
|||
}} |
|||
videoObj={videoObj} |
|||
height={400} |
|||
local={true} /> */} |
|||
|
|||
</div> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth } = state; |
|||
return { |
|||
user: auth.user, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Container) |
|||
@ -0,0 +1,49 @@ |
|||
import React, { useEffect, useRef } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Col } from '@douyinfe/semi-ui'; |
|||
import Container from "./container"; |
|||
|
|||
|
|||
const VideoCard = ({ data, pageSize = 9 }) => { |
|||
|
|||
let span = 8 |
|||
if (pageSize === 1) { |
|||
span = 24 |
|||
} |
|||
|
|||
if (pageSize === 4) { |
|||
span = 12 |
|||
} |
|||
|
|||
let rowsCount = 2 |
|||
if (pageSize == 1) { |
|||
rowsCount = 1 |
|||
} |
|||
|
|||
if (pageSize == 9) { |
|||
rowsCount = 3 |
|||
} |
|||
let cheight = Math.floor(100 / rowsCount) + "%" |
|||
|
|||
return ( |
|||
<> |
|||
<Col span={6} style={{ height: cheight, }}> |
|||
<div id="videoo" style={{ width: '100%', height: '100%', }}> |
|||
<Container |
|||
videoObj={data} |
|||
/> |
|||
</div> |
|||
|
|||
</Col> |
|||
</> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth } = state; |
|||
return { |
|||
user: auth.user, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(VideoCard) |
|||
@ -1,91 +1,260 @@ |
|||
import React, { useEffect } from 'react'; |
|||
import React, { useEffect, useRef } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { TreeSelect, Tree } from '@douyinfe/semi-ui'; |
|||
import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row } from '@douyinfe/semi-ui'; |
|||
import './videoScreen.less' |
|||
import VideoCard from './videoCard' |
|||
|
|||
|
|||
const VideoScreen = (props) => { |
|||
|
|||
const treeData = [{ |
|||
label: '全部', |
|||
value: '全部', |
|||
key: '0', |
|||
children: [{ |
|||
label: '公司', |
|||
value: '公司', |
|||
key: '0-1', |
|||
children: [ |
|||
{ |
|||
label: '大门', |
|||
value: '大门', |
|||
key: '0-1-1', |
|||
}, { |
|||
label: '机房', |
|||
value: '机房', |
|||
key: '0-1-2', |
|||
}, { |
|||
label: '后门', |
|||
value: '后门', |
|||
key: '0-1-3', |
|||
}, |
|||
] |
|||
}, { |
|||
label: '外部', |
|||
value: '外部', |
|||
key: '0-2', |
|||
children: [ |
|||
{ |
|||
label: '门口', |
|||
value: '门口', |
|||
key: '0-2-1', |
|||
}, |
|||
] |
|||
}] |
|||
}] |
|||
const api = useRef(); |
|||
|
|||
const treeData = [{ |
|||
label: '全部', |
|||
value: '全部', |
|||
key: '0', |
|||
children: [{ |
|||
label: '公司', |
|||
value: '公司', |
|||
key: '0-1', |
|||
children: [ |
|||
{ |
|||
label: '大门', |
|||
value: '大门', |
|||
key: '0-1-1', |
|||
}, { |
|||
label: '机房', |
|||
value: '机房', |
|||
key: '0-1-2', |
|||
}, { |
|||
label: '后门', |
|||
value: '后门', |
|||
key: '0-1-3', |
|||
}, |
|||
] |
|||
}, { |
|||
label: '外部', |
|||
value: '外部', |
|||
key: '0-2', |
|||
children: [ |
|||
{ |
|||
label: '门口', |
|||
value: '门口', |
|||
key: '0-2-1', |
|||
}, |
|||
] |
|||
}] |
|||
}] |
|||
|
|||
//条件赛选样式 |
|||
const screen = { |
|||
width: 193, |
|||
marginRight: 20, |
|||
marginBottom: 16, |
|||
color: "#fff", |
|||
}; |
|||
|
|||
return ( |
|||
<> |
|||
{/* 头部标题及搜索 */} |
|||
<div>智慧小蓝视频融合监管中心</div> |
|||
<div> |
|||
<div style={{ width: 200, }}> |
|||
<div>查询： |
|||
<TreeSelect |
|||
style={{ width: 150 }} |
|||
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} |
|||
treeData={treeData} |
|||
placeholder="请选择" |
|||
multiple={true} |
|||
defaultValue={['全部']} |
|||
maxTagCount={1} |
|||
onChange={(e) => { |
|||
console.log(e) |
|||
}} |
|||
/> |
|||
</div> |
|||
const data = [{ |
|||
channelNo: 1, |
|||
content: ['5442542542', '452345', '234524525'], |
|||
serialNo: "G75922040", |
|||
type: "yingshi", |
|||
yingshiToken: "at.02vgv9vn19rek6hh6a9k35r61rf2orw5-6pmmn2tu6v-040zcc8-xj4tdjtau" |
|||
},] |
|||
|
|||
<Tree |
|||
treeData={treeData} |
|||
defaultExpandAll |
|||
style={{ width: 150 }} |
|||
/> |
|||
</div> |
|||
<div style={{flex: 1}}> |
|||
return ( |
|||
<> |
|||
<div |
|||
className='KJBlue' |
|||
style={{ |
|||
width: '100%', height: '100%', |
|||
background: 'url(/assets/images/application/background.png) 100% 100%', |
|||
backgroundSize: '100% 100%', |
|||
color: '#FFFFFF', |
|||
position: 'absolute', minWidth: 1000, |
|||
}}> |
|||
{/* 头部标题 */} |
|||
<div style={{ |
|||
width: '100%', height: 80, |
|||
textAlign: 'center', |
|||
}}> |
|||
<div style={{ |
|||
height: 80, |
|||
padding: '0 10px', |
|||
display: 'inline-block', |
|||
fontSize: '36px', |
|||
fontFamily: 'SourceHanSansCN - Heavy, SourceHanSansCN', |
|||
fontWeight: 800, |
|||
color: '#FFFFFF', |
|||
lineHeight: '70px', |
|||
letterSpacing: '5px', |
|||
background: 'url(/assets/images/application/titleBottom.png) 100% 100%', |
|||
backgroundSize: '100% 100%', |
|||
}} > 智慧小蓝视频融合监管中心</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div style={{ |
|||
height: "calc(100% - 112px)", margin: '16px', display: 'flex', |
|||
}}> |
|||
<div style={{ width: 300, height: "100%", border: '2px solid #003D9E', }}> |
|||
<div>查询： |
|||
<TreeSelect |
|||
style={{ width: 150, }} |
|||
dropdownStyle={{ maxHeight: 300, overflow: 'auto', color: '#FFFFFF', }} |
|||
treeData={treeData} |
|||
placeholder="请选择" |
|||
multiple={true} |
|||
defaultValue={['全部']} |
|||
maxTagCount={1} |
|||
onChange={(e) => { |
|||
console.log(e) |
|||
}} |
|||
/> |
|||
</div> |
|||
|
|||
<Tree |
|||
multiple |
|||
treeData={treeData} |
|||
defaultExpandAll |
|||
style={{ width: 150, color: '#FFFFFF' }} |
|||
/> |
|||
</div> |
|||
<div style={{ |
|||
flex: 1, marginLeft: '10px', border: '2px solid #003D9E', |
|||
}}> |
|||
<div style={{ display: 'flex', }}> |
|||
<div style={{ flex: 1, marginTop: '10px', }}> |
|||
<Form |
|||
onSubmit={(values) => console.log(values)} |
|||
// onValueChange={values=>console.log(values)} |
|||
getFormApi={(formApi) => (api.current = formApi)} |
|||
layout="horizontal" |
|||
style={{ position: "relative", width: "100%", flex: 1 }} |
|||
> |
|||
<Form.Input label="设备搜索：" field="keyword" maxLength="36" placeholder="请输入设备名称" labelPosition="left" style={screen} /> |
|||
{/* <Form.Select |
|||
label="状态查询：" |
|||
labelPosition="left" |
|||
field="state" |
|||
style={screen} |
|||
placeholder="全部" |
|||
showClear |
|||
> |
|||
<Form.Select.Option value="ON">在线</Form.Select.Option> |
|||
<Form.Select.Option value="OFF">离线</Form.Select.Option> |
|||
<Form.Select.Option value="UNKONW">未知</Form.Select.Option> |
|||
<Form.Select.Option value="DISABLED">禁用</Form.Select.Option> |
|||
</Form.Select> |
|||
*/} |
|||
</Form> |
|||
</div> |
|||
<div |
|||
style={{ |
|||
marginTop: '10px', |
|||
// width: 150, |
|||
// display: "flex", |
|||
// justifyContent: "flex-end", |
|||
// alignItems: "flex-end", |
|||
}} |
|||
> |
|||
<Button |
|||
theme="solid" |
|||
type="primary" |
|||
style={{ width: 65, height: 30, borderRadius: 3, marginRight: 16, }} |
|||
onClick={() => { |
|||
// api.current.validate().then((v) => { |
|||
// setSearch(v); |
|||
// setQuery({ limit: 10, page: 0 }) |
|||
// }); |
|||
}} |
|||
> |
|||
搜索 |
|||
</Button> |
|||
{/* <Button |
|||
theme="light" |
|||
type="primary" |
|||
style={{ |
|||
width: 65, |
|||
height: 30, |
|||
backGround: "#FFFFFF", |
|||
borderRadius: 3, |
|||
border: "1px solid #D9D9D9", |
|||
marginBottom: 20, |
|||
}} |
|||
onClick={() => { |
|||
api.current.reset(); |
|||
// setSearch({}); |
|||
// setQuery({ limit: 10, page: 0 }) |
|||
}} |
|||
> |
|||
重置 |
|||
</Button> */} |
|||
</div> |
|||
</div> |
|||
<div style={{ display: 'flex', height: '100%' }}> |
|||
{/* 视频 */} |
|||
<div style={{ flex: 1, height: '100%' }}> |
|||
<Row style={{ height: `calc( 100% - 160px )` }}> |
|||
{data.map((v, index) => { |
|||
return <VideoCard key={'VideoCard' + index} data={v} /> |
|||
})} |
|||
</Row> |
|||
</div> |
|||
{/* 视频设置 */} |
|||
<div style={{ |
|||
width: 64, height: 476, background: ' #01185F', boxShadow: 'inset 0px 0px 5px 1px rgba(28,96,254,0.4000)', borderRadius: ' 1px', textAlign: 'center', |
|||
}}> |
|||
{[{ img: 'gongge', value: '宫格设置', screen: [{ img: 'screen1', value: '单屏' }, { img: 'screen4', value: '4分屏' }, { img: 'screen6', value: '6分屏' }, { img: 'screen12', value: '12分屏' },] }, |
|||
{ img: 'polling', value: '轮询设置' }, |
|||
{ img: 'back', value: '背投' }, |
|||
{ img: 'monitor', value: '监控地图' },].map((v, index) => { |
|||
return <div key={index}> |
|||
<Popover |
|||
position='left' |
|||
// trigger='click' |
|||
content={() => { |
|||
switch (v.value) { |
|||
case '宫格设置': |
|||
return <div style={{ height: 69, background: '#01185F', boxShadow: ' inset 0px 0px 5px 1px rgba(28,96,254,0.2500)', display: 'flex', justifyContent: 'space-evenly', alignItems: 'center' }}> |
|||
{v.screen.map((item) => { |
|||
return <div key={item.img}> |
|||
<img src={`/assets/images/application/${item.img}.png`} alt="" style={{ width: 40, height: 40, }} /> |
|||
<div style={{ width: 40, fontWeight: 400, color: ' #D9D9D9', fontSize: 12, textAlign: 'center' }}>{item.value}</div> |
|||
</div> |
|||
})} |
|||
</div> |
|||
case '轮询设置': |
|||
return <div style={{ height: 48, background: '#01185F', boxShadow: ' inset 0px 0px 5px 1px rgba(28,96,254,0.2500)', color: ' #D9D9D9', display: 'flex', justifyContent: 'space-evenly', alignItems: 'center' }}> |
|||
<Switch onChange={(v, e) => console.log(v)} aria-label="a switch for demo" style={{ border: ' 1px solid #D9D9D9', }} /> |
|||
轮询间隔 |
|||
<Input style={{ width: 80, color: ' #D9D9D9', border: ' 1px solid #D9D9D9', }} defaultValue='1' /> |
|||
分钟 |
|||
</div> |
|||
default: |
|||
break; |
|||
} |
|||
}} |
|||
> |
|||
<img src={`/assets/images/application/${v.img}.png`} alt="" style={{ width: 54, height: 54, margin: '20px 0 0px 10px' }} /> |
|||
</Popover> |
|||
<div style={{ width: 32, marginLeft: 16 }}>{v.value}</div> |
|||
</div> |
|||
})} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div > |
|||
</> |
|||
|
|||
</> |
|||
) |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth } = state; |
|||
return { |
|||
user: auth.user, |
|||
}; |
|||
const { auth } = state; |
|||
return { |
|||
user: auth.user, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(VideoScreen) |
|||
|
|||
@ -0,0 +1,18 @@ |
|||
.KJBlue { |
|||
.semi-tree-option, |
|||
.semi-icon, |
|||
.semi-form-field-label-text { |
|||
color: #fff; |
|||
} |
|||
.semi-checkbox-inner-display { |
|||
//树状多选框 |
|||
border: 1px solid #fff; |
|||
} |
|||
input { |
|||
background: #01185f; |
|||
box-shadow: inset 0px 0px 5px 1px rgba(28, 96, 254, 0.4); |
|||
} |
|||
input::placeholder { |
|||
color: #fff; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue