<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_item'+(index+1)" v-for="(item,index) in dataPath" class="video_item_style" :key="index">
|
<!-- <div class="video_names_title">{{item.deviceNum}}-{{item.channelNo}}</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> -->
|
<el-dialog
|
class="prop_dialog"
|
:title="asyncTitle ? '新增监控设备' : '修改监控设备'"
|
:close-on-click-modal="false"
|
:visible.sync="asyncVisible"
|
width="35%">
|
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="rule_form">
|
<el-form-item label="设备ID：" prop="videoSn">
|
<el-input v-model="ruleForm.videoSn" :size="size" clearable placeholder="请输入设备ID"></el-input>
|
</el-form-item>
|
<el-form-item label="视频名称：" prop="videoName">
|
<el-input v-model="ruleForm.videoName" :size="size" clearable placeholder="请输入视频名称"></el-input>
|
</el-form-item>
|
<el-form-item label="视频类别：" prop="videoType">
|
<el-select v-model="ruleForm.videoType" placeholder="请选择视频类别">
|
<el-option
|
v-for="item in optionsType"
|
:key="item.dictId"
|
:label="item.dictName"
|
:value="item.dictId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="视频地址：" prop="videoPath">
|
<el-input v-model="ruleForm.videoPath" :size="size" type="textarea" :rows="2" clearable placeholder="请输入视频地址"></el-input>
|
</el-form-item>
|
<el-form-item label="经纬度：" required="true">
|
<div style="display:flex">
|
<el-input v-model="ruleForm.longitude" :size="size" clearable placeholder="请输入经度" style="width:35%;margin-right:20px"></el-input>
|
<el-input v-model="ruleForm.latitude" :size="size" clearable placeholder="请输入纬度" style="width:35%;margin-right:20px"></el-input>
|
<el-button style="width:30%;display:inline-block;margin-top:5px" @click.passive="logname = true" icon="el-icon-map-location">拾取坐标</el-button>
|
</div>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="asyncVisible = false">取 消</el-button>
|
<el-button class="submit_btn" @click="asyncTitle ? submitInsert() : submitUpdate()">提 交</el-button>
|
</div>
|
</el-dialog>
|
<!-- 拾取坐标弹框 -->
|
<el-dialog
|
class="prop_dialog get_point"
|
title="拾取坐标"
|
append-to-body
|
:visible.sync="logname"
|
width="35%">
|
<div class="rule-form map-box">
|
<div class="map-search" style="background-color: rgba(57,181,254,0.3);line-height:40px;border-radius:4px">
|
<div class="search-item">
|
<span class="label">经度：</span>
|
<span style="color:#FFFFFF;">{{lng}}</span>
|
</div>
|
<div class="search-item">
|
<span class="label">纬度：</span>
|
<span style="color:#FFFFFF;">{{lat}}</span>
|
</div>
|
</div>
|
<div class="map-search">
|
<div class="search-item">
|
<span class="label">关键字：</span>
|
<el-input v-model="keyword" clearable size="small" placeholder="请输入关键字" />
|
</div>
|
<div class="search-item">
|
<span class="label">地区：</span>
|
<el-input v-model="location" clearable size="small" placeholder="请输入地区" />
|
</div>
|
</div>
|
<select-map
|
:center="{lng: 117.041871, lat: 39.420278}"
|
:zoom="15"
|
:longitude.sync="lng"
|
:latitude.sync="lat"
|
:location.sync="location"
|
:keyword.sync="keyword"
|
></select-map>
|
</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="submitMapInfo" class="submit_btn">提交</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</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 SelectMap from '@/components/selectMap/index.vue';
|
import { changeSize } from '../../../plugins/public'; // 导入节流、动态切换组件尺寸方法
|
export default {
|
components:{
|
SelectMap
|
},
|
name:'safeVideo',
|
data() {
|
return {
|
size: changeSize(), // 组件尺寸
|
pageNum: 1,
|
pageSize: 10,
|
logname:false,//获取坐标弹框
|
lng:"",//经度
|
lat:"",//纬度
|
keyword:"",//关键字
|
location:"",//地区
|
search:{},//查询条件
|
total: 0,
|
loading: false,
|
dataPath:[],//地址信息
|
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.getAllTypes()
|
that.openFullScreen()
|
},
|
methods: {
|
// 提交选择经纬度信息
|
submitMapInfo() {
|
this.logname = false
|
this.$set(this.ruleForm, 'longitude', this.lng)
|
this.$set(this.ruleForm, 'latitude', this.lat)
|
},
|
//获取尺寸配筋转向等信息
|
getAllTypes(){
|
let params = {
|
pageNum: 1,
|
pageSize: 100000000,
|
dictType:12
|
}
|
this.$api.Dictionary.searchDictionary(params).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.optionsType = res.data.list
|
}else{
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
},
|
//增加转圈圈
|
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.dataPath.forEach((item, index) => {
|
let div = document.getElementById(`video_show${index +1}`)
|
div.remove()
|
})
|
}
|
let params ={
|
types:1,//安全：1；现场：2
|
}
|
this.dataPath = []
|
this.loading = true;
|
this.$api.Device.searchDeviceInfo(params).then((res) => {
|
if(res.statusMsg === 'ok') {
|
res.data.map(item=>{
|
this.dataPath.push({
|
channelNo:item.channelNo,
|
deviceNum:item.deviceNum,
|
videoPath:item.videoPath,
|
})
|
return this.dataPath
|
})
|
const formData = new FormData();
|
formData.set('channelNo', this.dataPath[0].channelNo);
|
formData.set('deviceNum', this.dataPath[0].deviceNum);
|
formData.set('types', 1);
|
this.$api.Device.backVideosUrlList(formData).then(resUrl=>{
|
this.dataPath.map(item=>{
|
item.accessToken = resUrl.data
|
})
|
})
|
setTimeout(() => {
|
this.showVideo()
|
},3000)
|
}
|
this.loading = false;
|
this.openFullScreen()
|
})
|
},
|
//销毁初始化
|
clearInit(){
|
this.dataPath.forEach((item, index) => {
|
let div = document.getElementById(`video_show${index +1}`)
|
div.remove()
|
})
|
},
|
//遍历创建视频实例
|
showVideo(){
|
this.dataPath.forEach((item,index)=>{
|
let name = `video_item${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 = new EZUIKit.EZUIKitPlayer({
|
id: `video_show${idx}`, // 视频容器ID
|
accessToken:accessToken,
|
url: url,
|
height:300,
|
autoplay:true,
|
audio:0,
|
template:'standard',
|
header:[],
|
// footer:['fullScreen','hd']
|
})
|
})
|
},
|
//创建video标签
|
createElement(url,name,idx,accessToken){
|
let div = document.getElementById(name)
|
let div1 = document.createElement('div')
|
div1.id = `video_show${idx}`
|
div1.accessToken = accessToken
|
div1.url = url
|
div.appendChild(div1)
|
},
|
// 判断按钮权限信息
|
showButton(str) {
|
const pinia = buttonPinia();
|
return pinia.$state.buttonInfo.includes(str);
|
},
|
},
|
// 离开页面后销毁播放器实例
|
beforeDestroy() {
|
this.video = null
|
this.dataPath.forEach((item, index) => {
|
let div = document.getElementById(`video_show${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>
|
