xiaomeng
/
wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

pull/117/head
孙萌 2024-02-27 18:18:44 +08:00
parent 8fb445e873
commit f957c1bfa2
16 changed files with 541 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/index.js
View File

@ -379,7 +379,14 @@ selFsTime(data) {
loadHistorydata(data) {
return sendPostRequest(`/load/historydata`, data)
},
//摄像头操作开始
cameraStart(cameraSerialNumber,cameraChannelNumber,num) {
return sendPostRequest(`/camera/start?cameraid=${cameraSerialNumber}&channelid=${cameraChannelNumber}&direction=${num}`)
},
//摄像头操作结束
cameraStop(cameraSerialNumber,cameraChannelNumber,num) {
return sendPostRequest(`/camera/stop?cameraid=${cameraSerialNumber}&channelid=${cameraChannelNumber}&direction=${num}`)
},
//二维码溯源
//查看农事作物信息
getAgriculturalInformation(data) {

116
src/assets/css/main.css
View File

@ -1978,13 +1978,118 @@
.realTime .page-content .realTime-bottom .left-view > div {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.realTime .page-content .realTime-bottom .left-view > div .video-js {
width: 100%;
width: calc(100% - 400px);
height: 100%;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control {
width: 400px;
display: flex;
height: 100%;
padding: 60px 0;
flex-direction: column;
align-items: center;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big {
width: 230px;
height: 230px;
background: url(../img/video-control.png) no-repeat center;
background-size: 100% 100%;
position: relative;
overflow: hidden;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big > div {
width: 230px;
height: 230px;
position: relative;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big > div:active .arrow {
background: url(../img/control-arrow-active.png) no-repeat center;
background-size: 100% 100%;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big > div .arrow {
width: 43px;
height: 26px;
transform: rotate(135deg);
background: url(../img/control-arrow.png) no-repeat center;
background-size: 100% 100%;
position: absolute;
top: 16px;
left: 7px;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big .top {
transform: rotate(-135deg);
position: absolute;
bottom: 70.5%;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big .bottom {
transform: rotate(45deg);
position: absolute;
top: 71%;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big .left {
transform: rotate(135deg);
position: absolute;
right: 70.5%;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big .right {
transform: rotate(-45deg);
position: absolute;
left: 70.5%;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 30px;
grid-column-gap: 30px;
margin-top: 41px;
width: 310px;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn > div {
width: 140px;
height: 40px;
background: #0294E2;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn > div:active {
background: #22B2FF;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn > div > img {
margin-right: 12px;
width: 22px;
height: auto;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn > div > div {
white-space: nowrap;
width: 40px;
}
.realTime .page-content .realTime-bottom .right {
width: calc(100% - 35%);
min-width: 230px;
@ -3532,7 +3637,8 @@
color: #606266;
}
.el-button--primary.el-button span, .el-button--success.el-button span {
.el-button--primary.el-button span,
.el-button--success.el-button span {
color: #fff;
}
@ -3557,7 +3663,8 @@
margin-top: 20px;
}
.el-pagination .btn-prev .el-icon, .el-pagination .btn-next .el-icon {
.el-pagination .btn-prev .el-icon,
.el-pagination .btn-next .el-icon {
color: #333;
}
@ -3574,7 +3681,8 @@
font-weight: 700;
}
.el-pagination__total, .el-pagination__jump {
.el-pagination__total,
.el-pagination__jump {
color: #fff;
}

2
src/assets/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

384
src/assets/css/main.scss
View File

File diff suppressed because one or more lines are too long

BIN
src/assets/img/control-arrow-active.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/img/control-arrow.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/img/video-control.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
src/assets/img/video-icon0.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 240 B

BIN
src/assets/img/video-icon1.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 B

BIN
src/assets/img/video-icon2.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 B

BIN
src/assets/img/video-icon3.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 240 B

BIN
src/assets/img/video-icon4.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 677 B

BIN
src/assets/img/video-icon5.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 603 B

BIN
src/assets/img/video-icon6.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 214 B

BIN
src/assets/img/video-icon7.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 228 B

178
src/views/page/videoMonitoring.vue
View File

@ -1,36 +1,80 @@
<template>
<div class="formula realTime videoMonitoring">
<div class="formula realTime videoMonitoring" @mouseup="upEnd()">
<div class="page-content new-data">
<div class="table-title">
<img src="../../assets/image/real-time.png" alt="" />
{{deviceTypeName}}—视频监控<span class="outline" v-if="deviceState == 0">(设备离线)</span>
{{ deviceTypeName }}—视频监控<span class="outline" v-if="deviceState == 0">(设备离线)</span>
</div>
<div class="flex-list realTime-bottom videoMonitoring-monitor">
<div class="left-view" v-if="deviceName != 30">
<div ref="monitor" class="monitor" id="monitor">
<!-- <video ref="videoPlayer" class="video-js" id="video-js"></video> -->
<div ref="videoPlayer" class="video-js" id="video-js"></div>
<div class="video-control">
<div class="video-btn-big">
<div class="top" @mousedown="downStart(0)">
<div class="arrow"></div>
</div>
<div class="bottom" @mousedown="downStart(1)">
<div class="arrow"></div>
</div>
<div class="left" @mousedown="downStart(2)">
<div class="arrow"></div>
</div>
<div class="right" @mousedown="downStart(3)">
<div class="arrow"></div>
</div>
</div>
<div class="video-btn">
<div @mousedown="downStart(4)"><img src="../../assets/img/video-icon0.png" alt="">
<div>左上 </div>
</div>
<div @mousedown="downStart(6)"><img src="../../assets/img/video-icon1.png" alt="">
<div>右上 </div>
</div>
<div @mousedown="downStart(5)"><img src="../../assets/img/video-icon2.png" alt="">
<div>左下 </div>
</div>
<div @mousedown="downStart(7)"><img src="../../assets/img/video-icon3.png" alt="">
<div>右下 </div>
</div>
<div @mousedown="downStart(8)"><img src="../../assets/img/video-icon4.png" alt="">
<div>放大+</div>
</div>
<div @mousedown="downStart(9)"><img src="../../assets/img/video-icon5.png" alt="">
<div>缩小-</div>
</div>
<div @mousedown="downStart(10)"><img src="../../assets/img/video-icon6.png" alt="">
<div>近焦距</div>
</div>
<div @mousedown="downStart(11)"><img src="../../assets/img/video-icon7.png" alt="">
<div>远焦距</div>
</div>
</div>
</div>
</div>
</div>
<div></div>
</div>
</div>
</div>
</template>
<script>
import EZUIKit from 'ezuikit-js';
import videojs from 'video.js';
</template>
<script>
import EZUIKit from 'ezuikit-js';
import videojs from 'video.js';
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
export default {
data(){
import axios from 'axios';
export default {
data() {
return {
deviceTypeName:'',
deviceName:'',
deviceState:1,
deviceTypeName: '',
deviceName: '',
deviceState: 1,
statusInterval: null,//status状态的Interval
player: null,
url: '',
nowNum: -1,
}
},
watch: {
@ -66,22 +110,81 @@ import video_zhCN from 'video.js/dist/lang/zh-CN.json'
}
clearInterval(this.statusInterval) && this.statusInterval
},
mounted(){
mounted() {
const that = this;
const store = this.$store.state
this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
this.deviceState = store.equipmentList[this.indexs - 1].deviceState
setTimeout(() => {
that.dataInit();
}, 0);
this.deviceState = store.equipmentList[this.indexs - 1].deviceState
setTimeout(() => {
that.dataInit();
}, 0);
},
methods: {
downStart(num) {
const store = this.$store.state
const that = this
console.log('start');
this.nowNum = num
var nowDevice = store.equipmentList[this.indexs - 1]
// var data = {
// accessToken: this.accesstoken,
// deviceSerial: nowDevice.cameraSerialNumber,
// channelNo: nowDevice.cameraChannelNumber,
// direction: num,
// speed: 1,
// }
// var header={
// 'Content-Type': 'application/x-www-form-urlencoded',
// }
// axios.post('https://open.ys7.com/api/lapp/device/ptz/start',data,header)
// .then(response => {
// console.log(response.data);
// })
// .catch(error => {
// console.error(error);
// });
this.api.cameraStart(nowDevice.cameraSerialNumber,nowDevice.cameraChannelNumber,num).then(res => {
setTimeout(() => {
that.upEnd()
}, 10000);
})
},
upEnd() {
const store = this.$store.state
const that = this
var num = this.nowNum
var nowDevice = store.equipmentList[this.indexs - 1]
console.log('end');
// var data = {
// accessToken: this.accesstoken,
// deviceSerial: nowDevice.cameraSerialNumber,
// channelNo: nowDevice.cameraChannelNumber,
// direction: num,
// speed: 1,
// }
// var header={
// 'Content-Type': 'application/x-www-form-urlencoded',
// }
// axios.post('https://open.ys7.com/api/lapp/device/ptz/stop',data,header)
// .then(response => {
// console.log(response.data);
// })
// .catch(error => {
// console.error(error);
// });
if (num != -1) {
this.api.cameraStop(nowDevice.cameraSerialNumber, nowDevice.cameraChannelNumber, num).then(res => {
this.nowNum=-1
})
}
},
methods:{
createVideoNew(accessToken) {
// divW和divH是获取了父级宽高 使播放容器能铺满div
let divW = this.$refs.monitor.clientWidth
let divH = this.$refs.monitor.clientHeight
let divW = this.$refs.videoPlayer.clientWidth
let divH = this.$refs.videoPlayer.clientHeight
this.player = new EZUIKit.EZUIKitPlayer({
id: 'video-js', // 视频容器ID
accessToken: accessToken,
@ -95,29 +198,28 @@ import video_zhCN from 'video.js/dist/lang/zh-CN.json'
height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
})
},
dataInit(){
dataInit() {
const store = this.$store.state
var nowDevice = store.equipmentList[this.indexs - 1]
var data2 = {
cameraid: nowDevice.cameraSerialNumber,
channelid: nowDevice.cameraChannelNumber
}
cameraid: nowDevice.cameraSerialNumber,
channelid: nowDevice.cameraChannelNumber
}
if (!this.player) {
this.api.getGethls(data2).then(res => {
// console.log(res.data, 11);
if (res.data.code == 200) {
this.url = res.data.data.ezopen
this.createVideoNew(res.data.data.accesstoken)
}
})
}
this.api.getGethls(data2).then(res => {
// console.log(res.data, 11);
if (res.data.code == 200) {
this.url = res.data.data.ezopen
this.accesstoken = res.data.data.accesstoken
this.createVideoNew(res.data.data.accesstoken)
}
})
}
},
},
}
</script>
<style lang="scss">
</style>
}
</script>
<style lang="scss"></style>