Skip to content

N
Nei_Meng_An_Jian_4
Commit 9a6a060e authored by Kimber's avatar Kimber
Browse files
Options

'up'

parent f8c51df7
Expand all Show whitespace changes
Inline Side-by-side
Showing with 299 additions and 46 deletions
package-lock.json
View file @ 9a6a060e
This diff is collapsed.
src/components/EZUIKitJs/config.js 0 → 100644
View file @ 9a6a060e
/**
* Created by jiachenpan on 16/11/18.
*/
const Config = {
'锡林矿业':{
info:{
appKey:'633c50cf44844aa7978dc6bb933bb633',
appSecret:'95945f6db98a3b2e22fec288d427cbcf',
},
list:[
{
name:'东乌测试',
channel:'1.hd.live',
id:'E83231214',
captcha:'WDZKDB',
idName:'ysOpenDevice',
remark:'无',
},
],
},
};
export function getVideoInfo(key){
return Config[key];
}
\ No newline at end of file
src/components/EZUIKitJs/index.vue 0 → 100644
View file @ 9a6a060e
<!--
/**
* 荧石云播放器组件
* @param: {Object} opts [top, left, eventOutClose(事件超出容器后关闭, 默认false), showCloseBtn(默认false)]
* @example1:
npm install --save-dev ezuikit-js
1, 引入
import EZUIKitJs from '@/components/EZUIKitJs'
2, 注册
export default {
components: {
EZUIKitJs,
},
}
3, 创建
<EZUIKitJs ref="EZUIKit" selectSeat="right" autoPlayer="true"/>
* @author: Kimber
* @createtime: 2021/11/30(周二)
*/
-->
<template>
<div class="cv-inbox">
<div class="vi-select" v-if="selectSeat!=='none'" :class="{'dir-right':selectSeat==='right'}">
<el-select v-model="videoIndex" class="cus-select" placeholder="请选择视频" size="small" @change="selectVideo" label="操作">
<el-option v-for="(obj, index) in videoList" :label="obj.name" :value="index"></el-option>
</el-select>
</div>
<div class="cv-inbody">
<div class="EZUIKit-video" id="video-container"></div>
</div>
</div>
</template>
<script>
import EZUIKit from "ezuikit-js";
import axios from 'axios';
import { getVideoInfo } from './config'
const request = axios.create({});
request.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
export default {
name: "EZUIKit",
data() {
return {
videoIndex:0,
videoList:[],
}
},
props: {
selectSeat: String,
autoPlayer: String,
},
mounted(){
this.videoContainer = this.$el.querySelector("#video-container");
var configInfo = getVideoInfo(this.$store.state.user.user.username);
this.info = configInfo.info;
this.videoList = configInfo.list;
if(this.autoPlayer !== 'false'){
// 播放视频
this.selectVideo(this.videoIndex);
};
// setTimeout(()=>{
// player.stop(); // 方法调用示例，10秒后关闭视频
// },10000)
},
methods: {
/**
* 获取Token
* @param: {Object} item
* @return:
* @author: Kimber
* @updatetime:
* @createtime: 2021/11/23(周二)
*/
playerVideo(item){
if(this.videoContainer.firstElementChild){
this.videoContainer.innerHTML = '';
setTimeout(() => {
this.createVideo(item);
}, 500);
}else{
this.createVideo(item);
};
},
createVideo(item){
this.getAccessToken(this.info.appKey, this.info.appSecret).then(accessToken => {
var url = this.getUrl(item);
this.player = new EZUIKit.EZUIKitPlayer({
autoplay: true,
id: "video-container",
accessToken:accessToken,
url: url,
template: "standard", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
// 视频上方头部控件
//header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
//plugin: ['talk'], // 加载插件，talk-对讲
// 视频下方底部控件
// footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
// audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
// openSoundCallBack: data => console.log("开启声音回调", data),
// closeSoundCallBack: data => console.log("关闭声音回调", data),
// startSaveCallBack: data => console.log("开始录像回调", data),
// stopSaveCallBack: data => console.log("录像回调", data),
// capturePictureCallBack: data => console.log("截图成功回调", data),
// fullScreenCallBack: data => console.log("全屏回调", data),
// getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
});
})
},
/**
* 获取Token
* @param: {String} appKey
* @param: {String} appSecret
* @example1: getAccessToken('appKey', 'appSecret').then(accessToken => {});
* @return:
* @author: Kimber
* @updatetime:
* @createtime: 2021/9/1
*/
getAccessToken(appKey, appSecret){
var dataJson = 'appKey='+appKey+'&appSecret='+appSecret;
return request.post("https://open.ys7.com/api/lapp/token/get", dataJson).then(res=>{
var data = res.data || {};
if (data['code'] == '200') {
return data['data']['accessToken']
}else{
return null
}
}).catch(err=>{
console.log(err);
return err
})
},
getUrl(item){
var captcha = item.captcha ? item.captcha + '@' : '';
var id = item.id || this.info.id;
return 'ezopen://'+captcha+'open.ys7.com/'+id+'/'+item.channel;
},
// 视频选择事件
selectVideo(index){
var item = this.videoList[index];
this.playerVideo(item)
},
// 视频选择事件
playVideoName(key){
var configInfo = getVideoInfo(key);
if(configInfo && configInfo.info){
this.info = configInfo.info;
this.videoList = configInfo.list;
var item = this.videoList[0];
this.playerVideo(item)
}else{
this.videoContainer.innerHTML = '';
};
},
}
};
</script>
<style lang="scss">
.cv-inbox{
position:relative;height:100%;width:100%;display:flex;flex-direction:column;
.vi-select{
.cus-select{
margin:5px;
input{display:inline-block;width:150px;border:1px solid #d0d2ff;background-color:#014468;
color:#d0d2ff;font-size:12px;
}
.el-input{}
.el-input__inner{
height:20px;line-height:20px
}
.el-input__suffix-inner{
.el-select__caret{line-height:20px}
}
}
}
.dir-right{text-align:right;}
.cv-inbody{
flex:1;position:relative;
.EZUIKit-video{
background-color:#01050f;
position:absolute;top:0;left:0;height:100%;width:100%;
iframe{height:100%;width:100%;}
}
}
}
</style>
src/components/base/BaseLeft.vue
View file @ 9a6a060e
......@@ -79,11 +79,19 @@
<svg t="1637996328836" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3046" width="32" height="32"><path d="M758.826667 660.096l102.549333 262.058667h-54.421333l-24.085334-63.296h-107.584l-22.784 63.296h-54.464l102.549334-262.058667h58.24z m-29.12 40.512h-1.258667c0 1.706667-0.874667 5.056-2.538667 10.133333-1.706667 6.762667-2.965333 11.392-3.797333 13.930667-0.832 1.706667-12.245333 33.770667-34.176 96.213333h84.8c-22.784-63.296-34.581333-95.765333-35.413333-97.472a175.936 175.936 0 0 1-7.616-22.805333z m160.789333 221.568V660.096h50.624v262.058667h-50.624z m-378.517333-29.482667c-207.850667 0-376.96-170.773333-376.96-380.693333 0-209.877333 169.109333-380.650667 376.96-380.650667 207.872 0 376.981333 170.752 376.981333 380.650667a34.176 34.176 0 0 0 68.309333 0c0-247.530667-199.744-448.938667-445.269333-448.938667S66.730667 264.469333 66.730667 512c0 247.552 199.722667 448.96 445.248 448.96a34.133333 34.133333 0 0 0 0-68.266667z m190.762666-461.525333l-245.269333-139.136c-15.658667-8.704-31.317333-13.909333-46.101333-13.909333-33.045333 0-67.84 24.341333-67.84 78.272v279.146666c0 54.826667 33.898667 78.293333 67.84 78.293334 14.784 0 30.442667-4.330667 46.101333-13.909334l245.269333-139.157333c27.84-15.616 44.352-39.082667 44.352-64.341333 0.021333-26.090667-16.512-49.6-44.352-65.258667" fill="#02fcfe" p-id="3047"></path></svg>
</div>
</div>
<div class="base_left_box_line">
<div class="title">视频监控 <span class="position_look" @click="onClickVideo">更多</span></div>
<div class="base_left_box_line video-item">
<!--
<div class="title">视频监控<span class="position_look" @click="onClickVideo">更多</span></div>
<div class="palyer2" v-loading="loading">
<LivePlayer v-if="isVideoUrl" ref="player2" :videoUrl="videoUrl" live />
<LivePlayer v-else ref="player2" live />
</div> -->
<div class="title">视频监控<span class="position_look">更多</span></div>
<div class="palyer2">
<div class="video">
<EZUIKitJs ref="EZUIKit" selectSeat="none" autoPlayer="false"/>
</div>
</div>
</div>
</div>
......@@ -91,10 +99,11 @@
</template>
<script>
import LivePlayer from '@liveqing/liveplayer'
//import LivePlayer from '@liveqing/liveplayer'
import eventBus from '@/utils/eventbus'
import { randNum } from '@/utils'
import { grouptree, start } from '@/api'
import EZUIKitJs from '@/components/EZUIKitJs'
import mixin_index from '@/mixins'
......@@ -114,7 +123,8 @@ export default {
},
components: {
LivePlayer,
//LivePlayer,
EZUIKitJs
},
mounted() {
......@@ -213,6 +223,11 @@ export default {
computed: {
compony_info() {
var compony_info = this.$store.state.compony_info;
if(compony_info && compony_info.name){
this.$refs.EZUIKit.playVideoName(compony_info.name);
};
return this.$store.state.compony_info
},
},
......@@ -234,6 +249,7 @@ export default {
.base-left {
color: #fff;
.base_left_box {
position:relative;display:flex;flex-direction:column;
padding: 2vh;
padding-top: 4vh;
height: 80vh;
......@@ -249,20 +265,19 @@ export default {
}
.base_left_box_line {
line-height: 1.5;
margin-top: 1vh;
line-height:1.5;
margin-top:1vh;
.title {
position: relative;
color: #02fcfe;
font-size: 1vw;
position:relative;
color:#02fcfe;
font-size:1vw;
.position_look {
position: absolute;
right: 0;
color: #10a1f2;
font-size: 0.8vw;
cursor: pointer;
position:absolute;
right:0;
color:#10a1f2;
font-size:0.8vw;
cursor:pointer;
}
}
......@@ -279,10 +294,15 @@ export default {
color: #10a1f2;
cursor: pointer;
}
}
.video-item{
flex:1;display:flex;flex-direction:column;
.palyer2 {
height: auto;
margin-top: 0.5vh;
flex:1;position:relative;
.video{
position:absolute;top:0;left:0;height:100%;width:100%;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment