<template>
|
<div class="main">
|
<div class="main_header">
|
<!-- <div class="header_item">
|
<span class="header_label">视频名称：</span>
|
<el-input v-model="search.videoName" :size="size" clearable placeholder="请输入视频名称"></el-input>
|
</div> -->
|
<div class="header_item">
|
<span class="header_label">视频编码：</span>
|
<el-input v-model="search.deviceNum" :size="size" clearable placeholder="请输入视频编码"></el-input>
|
</div>
|
<!-- <div class="header_item">
|
<span class="header_label">视频类别：</span>
|
<el-select v-model="search.videoType" placeholder="请选择视频类别" clearable>
|
<el-option
|
v-for="item in optionsType"
|
:key="item.dictId"
|
:label="item.dictName"
|
:value="item.dictId">
|
</el-option>
|
</el-select>
|
</div> -->
|
<div class="header_item">
|
<el-button icon="el-icon-search" v-if="showButton('search')" @click="searchButtonInfo(true)">查询</el-button>
|
<!-- <el-button class="search_btn" icon="el-icon-plus" v-if="showButton('insert')" @click="insertProp">新增</el-button> -->
|
</div>
|
</div>
|
<div class="main_content" style="overflow: auto;margin: 0 24px 50px;">
|
<div class="video_content">
|
<div :id="'video_items'+(index+1)" v-for="(item,index) in dataPaths" class="video_item_style" :key="index">
|
<!-- <div class="video_names_title">{{item.deviceNum}}</div> -->
|
</div>
|
</div>
|
</div>
|
<!-- <div class="main_footer">
|
<el-pagination
|
background
|
@current-change="changePageNum"
|
@size-change="changePageSize"
|
:current-page="pageNum"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
import EZUIKit from 'ezuikit-js';
|
import 'video.js/dist/video-js.min.css'
|
import "videojs-contrib-hls";
|
import { buttonPinia } from '../../../pinia/index';
|
import { changeSize } from '../../../plugins/public'; // 导入节流、动态切换组件尺寸方法
|
export default {
|
name:'sceneVideo',
|
data() {
|
return {
|
size: changeSize(), // 组件尺寸
|
pageNum: 1,
|
pageSize: 10,
|
logname:false,//获取坐标弹框
|
lng:"",//经度
|
lat:"",//纬度
|
keyword:"",//关键字
|
location:"",//地区
|
search:{},//查询条件
|
total: 0,
|
loading: false,
|
dataPaths:[],//地址信息
|
asyncTitle: true, // 对话框title 新增：true 修改：false
|
asyncVisible: false, // 添加 修改对话框
|
ruleForm: {
|
}, // 按钮表单
|
rules: {
|
videoSn: [{
|
required: true,
|
message: '请输入设备ID',
|
trigger: 'blur'
|
}],
|
videoName: [{
|
required: true,
|
message: '请输入视频名称',
|
trigger: 'blur'
|
}],
|
videoType: [{
|
required: true,
|
message: '请选择视频类别',
|
trigger: 'change'
|
}],
|
videoPath: [{
|
required: true,
|
message: '请输入视频地址',
|
trigger: 'blur'
|
}],
|
},
|
optionsType:[],//设备类型
|
video:null,
|
videoConfig:{
|
autoplay:true,
|
playbackRates: [0.5, 1, 1.5, 2],
|
bigPlayButton: false,
|
textTrackDisplay: false,
|
posterImage: true,
|
errorDisplay: false,
|
controls: true,
|
muted: true,
|
preload: 'auto'
|
}
|
}
|
},
|
watch: {
|
asyncVisible(bol) {
|
if(!bol) {
|
this.ruleForm = {};
|
this.$refs.ruleForm.resetFields();
|
}
|
}
|
},
|
mounted() {
|
const that = this;
|
// 根据窗口大小动态修改组件尺寸
|
window.onresize = () => {
|
that.size = changeSize();
|
}
|
that.openFullScreen()
|
},
|
methods: {
|
//销毁初始化
|
clearInit(){
|
this.dataPaths.forEach((item, index) => {
|
let div = document.getElementById(`video_shows${index +1}`)
|
div.remove()
|
})
|
},
|
//增加转圈圈
|
openFullScreen() {
|
const loading = this.$loading({
|
lock: true,
|
text: 'Loading',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
});
|
setTimeout(() => {
|
loading.close();
|
}, 3000);
|
},
|
// 查询按钮列表信息
|
searchButtonInfo(bol) {
|
if(bol) {
|
this.dataPaths.forEach((item, index) => {
|
let div = document.getElementById(`video_shows${index +1}`)
|
div.remove()
|
})
|
}
|
let params ={
|
types:2,//安全：1；现场：2
|
}
|
this.dataPaths = []
|
this.loading = true;
|
this.$api.Device.searchDeviceInfo(params).then((res) => {
|
if(res.statusMsg === 'ok') {
|
res.data.map(item=>{
|
this.dataPaths.push({
|
channelNo:item.channelNo,
|
deviceNum:item.deviceNum,
|
videoPath:item.videoPath,
|
})
|
return this.dataPaths
|
})
|
const formData = new FormData();
|
formData.set('channelNo', this.dataPaths[0].channelNo);
|
formData.set('deviceNum', this.dataPaths[0].deviceNum);
|
formData.set('types', 2);
|
this.$api.Device.backVideosUrlList(formData).then(resUrl=>{
|
this.dataPaths.map(item=>{
|
item.accessToken = resUrl.data
|
})
|
})
|
setTimeout(() => {
|
this.showVideo()
|
},3000)
|
}
|
this.loading = false;
|
this.openFullScreen()
|
})
|
},
|
//遍历创建视频实例
|
showVideo(){
|
this.dataPaths.forEach((item,index)=>{
|
let name = `video_items${index + 1}`
|
this.createVideo(item.videoPath,name,index+1,item.accessToken)
|
})
|
},
|
//视频初始化
|
createVideo(url,name,idx,accessToken){
|
this.$nextTick(()=>{
|
this.createElement(url,name,idx,accessToken)
|
// this.video = videojs(`video_shows${idx}`,this.videoConfig)
|
this.video = new EZUIKit.EZUIKitPlayer({
|
id: `video_shows${idx}`, // 视频容器ID
|
accessToken:accessToken,
|
url: url,
|
height:300,
|
audio:0,
|
template:'standard',
|
header:[],
|
fullScreenCallBack:(data) =>console.log(data,'全屏按钮')
|
// footer:['fullScreen','hd']
|
})
|
})
|
},
|
//创建video标签
|
createElement(url,name,idx,accessToken){
|
let div = document.getElementById(name)
|
let div1 = document.createElement('div')
|
div1.id = `video_shows${idx}`
|
div1.accessToken = accessToken
|
div1.url = url
|
// video.classList.add("video-js", "vjs-default-skin", "video")
|
// video.classList.add("video-js", "vjs-default-skin", "vjs-big-play-centered")
|
// video.style = 'width:100%;height:100%'
|
// let source = document.createElement('source')
|
// source.src = url
|
// source.accessToken = accessToken
|
// source.type = 'application/x-mpegURL'
|
// video.appendChild(source)
|
div.appendChild(div1)
|
},
|
// 判断按钮权限信息
|
showButton(str) {
|
const pinia = buttonPinia();
|
return pinia.$state.buttonInfo.includes(str);
|
},
|
},
|
// 离开页面后销毁播放器实例
|
beforeDestroy() {
|
this.video = null
|
this.dataPaths.forEach((item, index) => {
|
let div = document.getElementById(`video_shows${index +1}`)
|
div.remove()
|
})
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../../style/layout-main.scss';
|
|
.video_content{
|
display: flex;
|
flex-wrap: wrap;
|
|
.video_item_style{
|
width: 23.2%;
|
height: 300px;
|
margin: 0.5%;
|
position: relative;
|
|
.video_names_title{
|
padding-left: 40px;
|
position: absolute;
|
top: 15px;
|
left: 0px;
|
z-index: 999;
|
color: rgba(255, 255, 255, 1);
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
width: 150px!important;
|
display: inline-block;
|
&::before{
|
content: '';
|
width: 18px;
|
height: 17px;
|
background: url("../../../assets/video_icons.png") no-repeat;
|
position: absolute;
|
top: 0px;
|
left: 10px;
|
z-index: 999;
|
}
|
}
|
}
|
}
|
|
|
.map-box {
|
height: 500px;
|
|
.map-search {
|
display: flex;
|
margin: 10px;
|
justify-content: space-between;
|
padding: 0 15px;
|
|
.label {
|
// width: 100px;
|
text-align: right;
|
color: #fff;
|
flex-grow: 0;
|
flex-shrink: 0;
|
}
|
|
.search-item {
|
display: flex;
|
align-items: center;
|
}
|
}
|
}
|
.get_point{
|
/deep/.el-dialog__body{
|
overflow: hidden;
|
}
|
}
|
::v-deep .el-input .el-input__inner{
|
background-color: transparent!important;
|
border: 1px solid rgba(49, 105, 215, 0.5)!important;
|
color: #fff;
|
}
|
</style>
|
