|
<template>
<div class="page-main">
<t-button-group class="top-btn">
<t-button v-for="(item,index) in sceneList" :key="index"
:value="item.monitorSceneId"
:color="item.monitorSceneId === selectedMonitorScene ? 'primary' : 'secondary'"
@click="tabClick(item.monitorSceneId)">{{ item.monitorSceneName }}</t-button>
</t-button-group>
<div class="page-top">
<span>风场:</span>
<t-select v-model="gateFieldData" clearable @change="getSceneList()">
<t-option v-for="(item,index) in organizationList" :key="index" :value="item.organizationId">{{ item.monitorSceneTypeName }}</t-option>
</t-select>
</div>
<div class="page-bottom">
<!-- <div v-for="(item,index) in videoList" :key="index">
<t-card class="card-video">
<img :src="item.url" class="card-image">
<div slot="foot" class="bottom">
<span v-tooltip="item.videoDetail">{{ item.videoDetail.content | handleText }}</span>
<div style="margin-left:auto">
<t-button v-tooltip="item.options1" class="bottom-btn" @click="goDistinguishRecord(item.videoId)">
<t-icon size="16" icon="image-outline"></t-icon>
</t-button>
<t-button v-tooltip="item.options2" class="bottom-btn" @click="handleReview(item.videoId)">
<t-icon size="16" icon="piechart-outline"></t-icon>
</t-button>
<t-button v-tooltip="item.options3" class="bottom-btn">
<t-icon size="16" icon="arrow-expand-all-outline"></t-icon>
</t-button>
</div>
</div>
</t-card>
</div> -->
<div style="width:400px;margin:24px 24px 0 0;">
<!-- <video id="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered"
controls autoplay preload="auto" width="640" height="360"
data-setup="{ "html5" : { "nativeTextTracks" : false } }">
<source src="rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1" type="rtmp/flv" />
</video> -->
</div>
</div>
<t-pager :page-size="videoPageSize" :current="videoCurrent" :total="videoTotal" :sizer-range="[ 5, 10, 20, 30 ]" class="pager" show-elevator @on-change="onChangeGate"></t-pager>
<replay-dialog :list="replayList" />
</div>
</template>
<script>
import sysapi from '@/api/videoSurveillance'
import commonapi from '@/api/common'
import ReplayDialog from './components/rtmpVideoPlay'
import VideoPlayer from '@/components/VideoPlayer'
import videojs from 'video.js'
window.videojs = videojs
require('videojs-flash')
require('videojs-playlist')
require('video.js/dist/lang/zh-CN.js')
require('video.js/dist/video-js.min.css')
const defaultPlayerOptions = {
controls: true,
autoplay: false,
muted: false,
language: 'zh-CN',
fluid: true,
// liveui: true,
controlBar: {
children: [
{name: 'playToggle'}, // 播放按钮
{name: 'currentTimeDisplay'}, // 当前已播放时间
{name: 'progressControl'}, // 播放进度条
{name: 'durationDisplay'}, // 总时间
{ // 倍数播放
name: 'playbackRateMenuButton',
playbackRates: [0.5, 1, 1.5, 2, 2.5]
},
{
name: 'volumePanel', // 音量控制
inline: false // 不使用水平方式
},
{name: 'FullscreenToggle'} // 全屏
]
}
}
export default {
components: { ReplayDialog, VideoPlayer },
filters: {
handleText (value) {
if (!value) return ''
if (value.length > 13) {
return value.slice(0, 13) + '...'
}
return value
}
},
data () {
const playerOptions = Object.assign({}, defaultPlayerOptions, this.options)
return {
playerOptions,
videoCurrent: 1, // 大门分页数据
videoPageSize: 10, // 大门分页数据
videoTotal: 100, // 大门分页总数
tabId: 1,
paramsObj: { // 接口请求数据
page: 0,
limit: 10
},
organizationList: [], // 风场数据
gateFieldData: 101101,
videoList: [],
sceneList: [], // 场景列表
totalList: [], // 所有风场数据列表
selectedMonitorScene: '',
showReplayDialog: true,
replayList: []
}
},
mounted () {
// var myButton = videojs.player.controlBar.addChild('button', {
// text: 'Press me'
// // other options
// })
// myButton.addClass('html-classname')
this.getWindFiledList() // 获取风场列表
this.handleReview()
},
methods: {
// 获取场景列表
getSceneList() {
this.sceneList = []
for (let i = 0; i < this.totalList.length; i++) {
if (this.totalList[i].organizationId === this.gateFieldData) {
this.sceneList.push(this.totalList[i])
}
}
const {a, b} = this.totalList[0]
console.log(this.totalList[0]);
console.log(a, b)
},
async handleReview (id) {
// const res = await sysapi.getVideoPlayBack(id)
// console.log(res)
this.replayList = [{
fileName: '12月14 16:55',
fileId: 'ai-video_5A02296PAKA885B-video20201214165526.mp4',
fileType: 'video/mp4'
}, {
fileName: '12月14 16:56',
fileId: 'ai-video_5A02296PAKA885B-video20201214165527.mp4',
fileType: 'video/mp4'
}, {
fileName: '12月14 16:57',
fileId: 'ai-video_5A02296PAKA885B-video20201214165528.mp4',
fileType: 'video/mp4'
}, {
fileName: '12月14 16:58',
fileId: 'ai-video_5A02296PAKA885B-video20201214165529.mp4',
fileType: 'video/mp4'
}, {
fileName: '12月14 16:59',
fileId: 'ai-video_5A02296PAKA885B-video20201214165530.mp4',
fileType: 'video/mp4'
}, {
fileName: '12月14 17:00',
fileId: 'ai-video_5A02296PAKA885B-video20201214165531.mp4',
fileType: 'video/mp4'
}]
this.replayList = [{
sources: [{
src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
type: 'video/mp4'
}]
}, {
sources: [{
src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
type: 'video/mp4'
}]
}]
},
async tabClick (id) {
this.selectedMonitorScene = id
this.paramsObj.page = 0
this.videoList = []
this.tabId = id
this.videoCurrent = 1
this.getVideoSurveillanceData(id)
},
getWindFiledList () {
sysapi.getMonitorScene().then(resp => {
let arr = resp.data.data
this.totalList = arr
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
if (arr[i].monitorSceneTypeName === arr[j].monitorSceneTypeName) {
++i
}
}
this.organizationList.push(arr[i])
}
console.log(this.organizationList)
}, err => {
this.$Message.danger('获取风场列表失败！')
console.log(err)
})
},
// 获得风场大门数据
getVideoSurveillanceData (id) {
if (this.videoList.length <= 10) {
this.paramsObj.page = this.videoCurrent
sysapi.getVideoSurveillanceData({ params: {monitorSceneId: id} }).then(res => {
console.log(res)
})
}
},
// 进入识别记录界面
goDistinguishRecord (id) {
this.$router.push({ path: '/videoSurveillance/distinguishRecord', query: { videoId: id } })
},
// 风场大门分页
onChangeGate (val) {
this.videoList = []
this.videoCurrent = val
this.getVideoSurveillanceData()
}
}
}
</script>
<style lang="scss" scoped>
.page-main {
padding: 30px 24px 24px 24px;
.top-btn {
float: right;
}
.page-bottom {
display: flex;
width: 100%;
flex-wrap: wrap;
margin-left: -24px;
.card-video-first,
.card-video {
width: 354px;
height: 240px;
margin-top: 20px;
.card-image {
width: 100%;
height: 100%;
}
.bottom {
padding: 0 12px;
display: flex;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
height: 40px;
color: #fff;
font-size: 14px;
.bottom-btn {
color: #fff;
border: none;
padding: 0 !important;
&:hover {
color: #0089d4;
}
}
}
}
.card-video {
.card-footer {
padding: 0px 0 0 24px !important;
background: none;
width: 100%;
position: absolute;
border-top: none;
bottom: 0px;
}
.card-block,
.card-video-block {
margin-left: 24px;
padding: 0 !important;
}
}
}
.pager {
margin-right: auto;
margin: 21px 0px 24px 0;
float: right;
}
.btn-primary,
.radio-group-button .form-radio:checked,
.radio-group-button .form-radio[checked] {
color: #0089d4;
background-color: #fff;
border: 1px solid #0089d4;
}
.btn-secondary,
.radio-group-button .form-radio,
.checkbox-group--button .form-checkbox .form-checkbox__inner,
.btn-dashed-secondary,
.btn-outline-secondary {
background: none;
}
}
</style>
|
