yangsen
3 years ago
10 changed files with 148 additions and 17 deletions
@ -0,0 +1,3 @@ |
|||
export default { |
|||
navigationBarTitleText: '视频监控' |
|||
} |
@ -0,0 +1,85 @@ |
|||
import React, { useState, useEffect } from 'react' |
|||
import Taro from '@tarojs/taro' |
|||
import { View, Image, Input, Picker, LivePlayer } from '@tarojs/components' |
|||
import request from '@/services/request' |
|||
import './index.scss' |
|||
import '../patrolView/index.scss' |
|||
import patrolIcon from '../../static/img/patrolView/patrol.svg' |
|||
import patrolActiveIcon from '../../static/img/patrolView/patrol-active.svg' |
|||
import conserveIcon from '../../static/img/patrolView/conserve.svg' |
|||
import conserveActiveIcon from '../../static/img/patrolView/conserve-active.svg' |
|||
import chevronDown from '../../static/img/patrolView/chevron-down.png' |
|||
import searchIcon from '../../static/img/patrolView/search.png' |
|||
|
|||
function Index() { |
|||
const [isBus, setIsBus] = useState(true) |
|||
const [filterText, setFilterText] = useState('') |
|||
const [videoList, setVideoList] = useState([]) |
|||
|
|||
useEffect(() => { |
|||
getVideoList() |
|||
}, []) |
|||
|
|||
const getVideoList = () => { |
|||
let nextVideoList = [] |
|||
for (let i = 0; i < 10; i++) { |
|||
nextVideoList.push({ title: '视频' + i, url: '链接' + i }) |
|||
} |
|||
setVideoList(nextVideoList) |
|||
} |
|||
|
|||
const onTypeChange = bool => { |
|||
setIsBus(bool) |
|||
} |
|||
|
|||
const handleConfirm = e => { |
|||
|
|||
} |
|||
|
|||
const handleInput = e => { |
|||
|
|||
} |
|||
|
|||
return ( |
|||
<View> |
|||
<View className='type-box'> |
|||
<View className='item' onClick={() => onTypeChange(true)}> |
|||
<Image className='type-img' src={isBus ? patrolActiveIcon : patrolIcon} /> |
|||
<View style={{ color: isBus ? '#346FC2' : '#999999' }}>公交</View> |
|||
</View> |
|||
<View className='line'></View> |
|||
<View className='item' onClick={() => onTypeChange(false)}> |
|||
<Image className='type-img' src={isBus ? conserveIcon : conserveActiveIcon} /> |
|||
<View style={{ color: isBus ? '#999999' : '#346FC2' }}>道路</View> |
|||
</View> |
|||
</View> |
|||
<View className='filter-box'> |
|||
<View className='filter-item'> |
|||
<View style={{ float: 'left', marginLeft: '20rpx', color: '#333' }}>路段:</View> |
|||
<Picker> |
|||
<View className='filter-name'>{'请选择'}</View> |
|||
<Image className='filter-img' src={chevronDown} /> |
|||
</Picker> |
|||
</View> |
|||
<View class='head-search'> |
|||
<Image className='search-img' src={searchIcon} /> |
|||
<Input class='heard-search-input' value={filterText} placeholder='请输入道路名称' onConfirm={handleConfirm} onInput={handleInput} /> |
|||
</View> |
|||
</View> |
|||
<View className='video-box'> |
|||
{ |
|||
videoList && videoList.map(v => { |
|||
return ( |
|||
<View className='video-card'> |
|||
<View className='title'>{v.title}</View> |
|||
<LivePlayer className='video' src={v.url} mode='live' /> |
|||
</View> |
|||
) |
|||
}) |
|||
} |
|||
</View> |
|||
</View> |
|||
) |
|||
} |
|||
|
|||
export default Index |
@ -0,0 +1,28 @@ |
|||
page { |
|||
background-color: #f6f6f6; |
|||
|
|||
.video-box { |
|||
padding-top: 180px; |
|||
|
|||
.video-card { |
|||
background-color: #fff; |
|||
height: 488px; |
|||
margin-bottom: 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: left; |
|||
|
|||
.title { |
|||
height: 88px; |
|||
margin-left: 30px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.video { |
|||
height: 400px; |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
Loading…
Reference in new issue