pull/185/head
sunmeng 2024-11-07 11:01:11 +08:00
parent c47442967a
commit f063fea835
18 changed files with 645 additions and 3 deletions

View File

@ -1,5 +1,5 @@
<template>
<div id="app">
<div id="app" :class="isMobile?'mobile':''">
<router-view />
</div>
</template>
@ -7,6 +7,7 @@
export default {
data(){
return {
isMobile:false
}
},
created(){
@ -16,6 +17,15 @@
window.addEventListener("beforeunload",()=>{ //vuexsessionStorage
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})
if (
navigator.userAgent.match(
/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i
)
) {
this.isMobile=true
} else {
this.isMobile=false
}
},
mounted(){
let inputList = document.querySelectorAll('input');
@ -56,6 +66,12 @@ input::-webkit-inner-spin-button {
min-height: 900px;
width: 100vw;
height: 100vh;
&.mobile{
min-width: unset;
min-height: unset;
width: auto;
height: auto;
}
}
@font-face {
font-family: Oswald;

Binary file not shown.

After

Width:  |  Height:  |  Size: 589 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 487 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 713 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 501 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 312 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 362 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 356 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 438 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 367 KiB

View File

@ -5,8 +5,8 @@ const baseSize = 100;
function setRem() {
// 当前页面宽度相对于 1920宽的缩放比例可根据自己需要修改。
const scale = window.innerWidth / 1920;
// 设置页面根节点字体大小“Math.min(scale, 2)” 指最高放大比例为2可根据实际业务需求调整
document.documentElement.style.fontSize = baseSize * scale + "px";
}

View File

@ -29,6 +29,11 @@ const routes = [
name: 'largeScreen',
component: () => import('../views/page/largeScreen.vue')
},
{
path: '/videoLive',
name: 'videoLive',
component: () => import('../views/videoLive.vue')
},
{
path: '/largeScreen1',
name: 'largeScreen1',

View File

@ -0,0 +1,621 @@
<template>
<div class="videoLive">
<div class="center">
<div class="video_live monitor" ref="monitor">
<img v-if="imgUrl" class="video-js" :src="imgUrl" alt="">
<div v-if="!imgUrl" ref="videoPlayer" class="video-js">
<div id="video-js"></div>
</div>
</div>
<div class="skills">
<div class="left">
<img src="../assets/wx/direction_keys.png" mode=""></img>
<div :class="directionFlag == 0 ? 'left_arrow_item_act' : 'left_arrow_item'"
@touchstart.stop.prevent='touchstart(2)' @touchend.stop.prevent='touchend(2)'>
</div>
<div :class="directionFlag == 1 ? 'right_arrow_item_act' : 'right_arrow_item'"
@touchstart.stop.prevent='touchstart(3)' @touchend.stop.prevent='touchend(3)'>
</div>
<div :class="directionFlag == 2 ? 'up_arrow_item_act' : 'up_arrow_item'"
@touchstart.stop.prevent='touchstart(0)' @touchend.stop.prevent='touchend(0)'>
</div>
<div :class="directionFlag == 3 ? 'down_arrow_item_act' : 'down_arrow_item'"
@touchstart.stop.prevent='touchstart(1)' @touchend.stop.prevent='touchend(1)'>
</div>
</div>
<div class="right">
<div class="right_item">
<div :class="flag1 ? 'add_act' : 'add'" @touchstart.stop.prevent='touchstart(10)'
@touchend.stop.prevent='touchend(10)'>
</div>
<div class="focus">
焦距
</div>
<div :class="flag1 ? 'subtract' : 'subtract_act'" @touchstart.stop.prevent='touchstart(11)'
@touchend.stop.prevent='touchend(11)'>
</div>
</div>
<div class="right_item">
<div :class="flag2 ? 'add_act' : 'add'" @touchstart.stop.prevent='touchstart(8)'
@touchend.stop.prevent='touchend(8)'>
</div>
<div class="focus">
缩放
</div>
<div :class="flag2 ? 'subtract' : 'subtract_act'" @touchstart.stop.prevent='touchstart(9)'
@touchend.stop.prevent='touchend(9)'>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import EZUIKit from 'ezuikit-js';
export default {
data() {
return {
//
background: {
backgroundColor: '#24B383',
},
directionFlag: 5,
flag1: true,
flag2: true,
cameraid: '',
channelid: '',
accesstoken: '',
src: '',
url:'',
imgUrl:'',
player: null,
};
},
mounted() {
// console.log(options,'00');
// this.cameraSerialNumber = options.cameraSerialNumber;
// this.cameraChannelNumber = options.cameraChannelNumber
// this.getVideoData(this.cameraSerialNumber, this.cameraChannelNumber)
var router = this.$route.query
if (router.token && router.userid) {
localStorage.setItem('token', router.token)
this.cameraid = router.cameraSerialNumber;
this.channelid = router.cameraChannelNumber
this.getVideoData(cameraid, channelid)
return
}
},
beforeDestroy() {
const that = this;
//
if (this.player) {
// this.player.dispose();
this.player.stop()
this.player.destroy()
this.player = null
}
clearInterval(this.statusInterval) && this.statusInterval
},
methods: {
//
getVideoData(cameraid, channelid) {
var data2 = {
cameraid: cameraid,
channelid: channelid
}
this.api.getGethls(data2).then(res => {
// console.log(res.data, 11);
if (res.data.code == 200) {
this.url = res.data.data.ezopen
this.imgUrl=''
this.createVideoNew(res.data.data.accesstoken)
} else {
this.imgUrl=require('../assets/wx/videoLive.png')
}
})
},
createVideoNew(accessToken) {
// divWdivH 使div
let divW = this.$refs.videoPlayer.clientWidth
let divH = this.$refs.videoPlayer.clientHeight
this.player = new EZUIKit.EZUIKitPlayer({
id: 'video-js', // ID
accessToken: accessToken,
url: this.url,
// urlezopen://open.ys7.com/G39444019/1.live .live GitHub
// simple-; standard-; security-; voice-; GitHub
template: 'security',
useHardDev: true,// 7.7.x 2023.11.7 7.7.6
// plugin: ["talk"], // talk-
width: divW, // 1920 px
height: divH, // 1080 px
})
window.onresize = () => {
this.player.reSize(
this.$refs.videoPlayer.clientWidth,
this.$refs.videoPlayer.clientHeight
);
};
},
touchstart(num) {
const that = this
if (num == 2) {
this.directionFlag = 0;
} else if (num == 3) {
this.directionFlag = 1;
} else if (num == 0) {
this.directionFlag = 2;
} else if (num == 1) {
this.directionFlag = 3;
} else if (num == 10) {
this.flag1 = true;
} else if (num == 11) {
this.flag1 = false;
} else if (num == 8) {
this.flag2 = true;
} else if (num == 9) {
this.flag2 = false;
}
// let that = this;
// uni.request({
// url: 'https://open.ys7.com/api/lapp/device/ptz/start',
// method: 'POST',
// data:{
// accessToken: that.accesstoken,
// deviceSerial: that.cameraSerialNumber,
// channelNo: that.cameraChannelNumber,
// direction:num,
// speed: 1,
// },
// header: {
// 'Content-Type': 'application/x-www-form-urlencoded',
// },
// success: (res) => {
// // console.log(res);
// }
// });
this.api.cameraStart(this.cameraid, this.channelid, num).then(res => {
setTimeout(() => {
that.touchend(num)
}, 10000);
})
// this.$http({
// url: this.api.camera_start + '?cameraid=' + this.cameraSerialNumber + '&channelid=' + this.cameraChannelNumber + '&direction=' + num,
// method: 'POST',
// }).then(res=>{
// })
},
touchend(num) {
this.directionFlag = 5
// let that = this;
// uni.request({
// url:'https://open.ys7.com/api/lapp/device/ptz/stop',
// method: 'POST',
// data:{
// accessToken: that.accesstoken,
// deviceSerial: that.cameraSerialNumber,
// channelNo: that.cameraChannelNumber,
// direction:num,
// speed: 1,
// },
// header: {
// 'Content-Type': 'application/x-www-form-urlencoded',
// },
// success: (res) => {
// // console.log(res);
// }
// })
if (num != -1) {
this.api.cameraStop(this.cameraid, this.channelid, num).then(res => {
this.nowNum = -1
})
}
// this.$http({
// url: this.api.camera_stop + '?cameraid=' + this.cameraSerialNumber + '&channelid=' + this.cameraChannelNumber + '&direction=' + num,
// method: 'POST',
// }).then(res=>{
// })
},
}
}
</script>
<style lang="scss" scoped>
.videoLive {
width: 7.5rem;
min-height: 100vh;
background-color: #F5F6FA;
.center {
.video_live {
width: 7.5rem;
height: 9.7rem;
>img {
width: 100%;
height: 100%;
}
>div{
width: 100%;
height: 100%;
}
}
.skills {
width: 100%;
box-sizing: border-box;
padding: .61rem 0 0 .4rem;
display: flex;
.left {
width: 3.4rem;
height: 3.4rem;
position: relative;
margin-right: .6rem;
.left_arrow,
.right_arrow {
width: .15rem;
height: .28rem;
}
.up_arrow,
.down_arrow {
width: .27rem;
height: .15rem;
}
//
.left_arrow_item {
width: .51rem;
height: .51rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 1.45rem;
left: .29rem;
}
.left_arrow_item_act {
width: .51rem;
height: .51rem;
background: #24B383;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 1.45rem;
left: .29rem;
}
.left_arrow_item::after {
content: '';
width: .15rem;
height: .28rem;
background: url('../assets/wx/left_arrow.png') center no-repeat;
background-size: .15rem .28rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.left_arrow_item_act::after {
content: '';
width: .15rem;
height: .28rem;
background: url('../assets/wx/left_arrow_act.png') center no-repeat;
background-size: .15rem .28rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
//
.right_arrow_item {
width: .51rem;
height: .51rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 1.45rem;
right: .29rem;
}
.right_arrow_item_act {
width: .51rem;
height: .51rem;
background: #24B383;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 1.45rem;
right: .29rem;
}
.right_arrow_item::after {
content: '';
width: .15rem;
height: .28rem;
background: url('../assets/wx/right_arrow.png') center no-repeat;
background-size: .15rem .28rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.right_arrow_item_act::after {
content: '';
width: .15rem;
height: .28rem;
background: url('../assets/wx/right_arrow_act.png') center no-repeat;
background-size: .15rem .28rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
//
.up_arrow_item {
width: .51rem;
height: .51rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: .29rem;
left: 1.46rem;
}
.up_arrow_item_act {
width: .51rem;
height: .51rem;
background: #24B383;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: .29rem;
left: 1.46rem;
}
.up_arrow_item::after {
content: '';
width: .27rem;
height: .15rem;
background: url('../assets/wx/up_arrow.png') center no-repeat;
background-size: .27rem .15rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.up_arrow_item_act::after {
content: '';
width: .27rem;
height: .15rem;
background: url('../assets/wx/up_arrow_act.png') center no-repeat;
background-size: .27rem .15rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
//
.down_arrow_item {
width: .51rem;
height: .51rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: .28rem;
left: 1.46rem;
}
.down_arrow_item_act {
width: .51rem;
height: .51rem;
background: #24B383;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: .28rem;
left: 1.46rem;
}
.down_arrow_item::after {
content: '';
width: .27rem;
height: .15rem;
background: url('../assets/wx/down_arrow.png') center no-repeat;
background-size: .27rem .15rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.down_arrow_item_act::after {
content: '';
width: .27rem;
height: .15rem;
background: url('../assets/wx/down_arrow_act.png') center no-repeat;
background-size: .27rem .15rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
>img {
width: 100%;
height: 100%;
}
}
.right {
box-sizing: border-box;
padding-top: .1rem;
display: flex;
flex-direction: column;
justify-content: center;
.right_item {
width: 2.4rem;
height: .8rem;
background: #EFFAF6;
border: .02rem solid rgba(36, 179, 131, 0.35);
border-radius: .4rem;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: .07rem;
margin-bottom: .4rem;
.add {
width: .66rem;
height: .66rem;
background: #EFFAF6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.add_act {
width: .66rem;
height: .66rem;
background: #24B383;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.add::after {
content: '';
width: .38rem;
height: .38rem;
background: url('../assets/wx/add.png') center no-repeat;
background-size: .38rem .38rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.add_act::after {
content: '';
width: .38rem;
height: .38rem;
background: url('../assets/wx/add_act.png') center no-repeat;
background-size: .38rem .38rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.focus {
font-size: .3rem;
font-family: PingFang SC;
font-weight: bold;
color: #24B383;
}
.subtract {
width: .66rem;
height: .66rem;
background: #EFFAF6;
border: .02rem solid rgba(36, 179, 131, 0.35);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.subtract_act {
width: .66rem;
height: .66rem;
background: #24B383;
border: .02rem solid rgba(36, 179, 131, 0.35);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.subtract::after {
content: '';
width: .38rem;
height: .08rem;
background: url('../assets/wx/subtract.png') center no-repeat;
background-size: .38rem .08rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.subtract_act::after {
content: '';
width: .38rem;
height: .08rem;
background: url('../assets/wx/subtract_act.png') center no-repeat;
background-size: .38rem .08rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}
}
}
</style>