<template>
|
<div>
|
<div class="control-body">
|
<div style="height: 140px; position: relative">
|
<div class="margin20">
|
<div class="fx">
|
<div class="b-item">
|
<div :class="{'b-item-item': true, 'icon-lt': true, bgc: this.command === 'LEFT_UP'}" @touchstart="setCameraCommand('LEFT_UP', 0)" @touchend="setCameraCommand('LEFT_UP', 1)"> </div>
|
</div>
|
<div class="b-item">
|
<div :class="{'b-item-item': true, 'icon-t': true, bgc: this.command === 'UP'}" @touchstart="setCameraCommand('UP', 0)" @touchend="setCameraCommand('UP', 1)"> </div>
|
</div>
|
<div class="b-item">
|
<div :class="{'b-item-item': true, icon: true, bgc: this.command === 'RIGHT_UP'}" @touchstart="setCameraCommand('RIGHT_UP', 0)" @touchend="setCameraCommand('RIGHT_UP', 1)"> </div>
|
</div>
|
</div>
|
<div class="fx">
|
<div class="b-item">
|
<div :class="{'b-item-item': true, 'icon-l': true, bgc: this.command === 'LEFT'}" @touchstart="setCameraCommand('LEFT', 0)" @touchend="setCameraCommand('LEFT', 1)"> </div>
|
</div>
|
<div class="b-item">
|
<div style="min-width: 65px; user-select: none;"> </div>
|
</div>
|
<div class="b-item">
|
<div :class="{'b-item-item': true, 'icon-r': true, bgc: this.command === 'RIGHT'}" @touchstart="setCameraCommand('RIGHT', 0)" @touchend="setCameraCommand('RIGHT', 1)"> </div>
|
</div>
|
</div>
|
<div class="fx">
|
<div class="b-item">
|
<div :class="{'b-item-item': true, 'icon-lb': true, bgc: this.command === 'LEFT_DOWN'}" @touchstart="setCameraCommand('LEFT_DOWN', 0)" @touchend="setCameraCommand('LEFT_DOWN', 1)"> </div>
|
</div>
|
<div class="b-item">
|
<div :class="{'b-item-item': true, 'icon-bo': true, bgc: this.command === 'DOWN'}" @touchstart="setCameraCommand('DOWN', 0)" @touchend="setCameraCommand('DOWN', 1)"> </div>
|
</div>
|
<div class="b-item">
|
<div :class="{'b-item-item': true, 'icon-rb': true, bgc: this.command === 'RIGHT_DOWN'}" @touchstart="setCameraCommand('RIGHT_DOWN', 0)" @touchend="setCameraCommand('RIGHT_DOWN', 1)"> </div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="height: 60px;margin-top: 30px; position: relative">
|
<div class="margin20">
|
<div class="fx">
|
<div class="b-item">
|
<div :class="{'b-item-item-other': true, bgc: this.command === 'ZOOM_IN'}" @touchstart="setCameraCommand('ZOOM_IN', 0)" @touchend="setCameraCommand('ZOOM_IN', 1)">焦距变大</div>
|
</div>
|
<div class="b-item">
|
<div :class="{'b-item-item-other': true, bgc: this.command === 'ZOOM_OUT'}" @touchstart="setCameraCommand('ZOOM_OUT', 0)" @touchend="setCameraCommand('ZOOM_OUT', 1)">焦距变小</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="height: 60px; position: relative">
|
<div class="margin20">
|
<div class="fx">
|
<div class="b-item">
|
<div :class="{'b-item-item-other': true, bgc: this.command === 'FOCUS_NEAR'}" @touchstart="setCameraCommand('FOCUS_NEAR', 0)" @touchend="setCameraCommand('FOCUS_NEAR', 1)">焦点前移</div>
|
</div>
|
<div class="b-item">
|
<div :class="{'b-item-item-other': true, bgc: this.command === 'FOCUS_FAR'}" @touchstart="setCameraCommand('FOCUS_FAR', 0)" @touchend="setCameraCommand('FOCUS_FAR', 1)">焦点后移</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="height: 60px; position: relative">
|
<div class="margin20">
|
<div class="fx">
|
<div class="b-item">
|
<div :class="{'b-item-item-other': true, bgc: this.command === 'IRIS_ENLARGE'}" @touchstart="setCameraCommand('IRIS_ENLARGE', 0)" @touchend="setCameraCommand('IRIS_ENLARGE', 1)">光圈扩大</div>
|
</div>
|
<div class="b-item">
|
<div :class="{'b-item-item-other': true, bgc: this.command === 'IRIS_REDUCE'}" @touchstart="setCameraCommand('IRIS_REDUCE', 0)" @touchend="setCameraCommand('IRIS_REDUCE', 1)">光圈缩小</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { setCameraCommand } from '@/api/camear'
|
|
export default {
|
name: 'ControllerVideoWx',
|
props: {
|
indexCode: {
|
required: true,
|
type: String
|
}
|
},
|
data () {
|
return {
|
command: ''
|
}
|
},
|
methods: {
|
setCameraCommand (command, startOrEnd) {
|
const formData = {
|
indexCode: this.indexCode,
|
action: startOrEnd, // 0开始 1结束
|
command: command
|
}
|
this.command = command
|
setCameraCommand(formData).then(res => {
|
if (startOrEnd === 0) {
|
this.$notify({
|
title: '提示',
|
dangerouslyUseHTMLString: true,
|
message: '开始设置云台操作',
|
type: 'success'
|
})
|
} else if (startOrEnd === 1) {
|
this.$notify({
|
title: '提示',
|
dangerouslyUseHTMLString: true,
|
message: '结束云台操作，稍等一下，设置正在应用中...',
|
type: 'success'
|
})
|
}
|
}).finally(() => {
|
if (startOrEnd === 1) {
|
this.command = ''
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.control-title {
|
position: absolute;
|
top: 0px;
|
left: 5px
|
}
|
.control-body {
|
width: 350px;
|
height: 400px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
/* 设置背景图片 */
|
background-image: url('../assets/bg.png');
|
background-repeat: no-repeat;
|
background-size: cover;
|
background-position: center;
|
}
|
/* 针对手机屏幕的样式 */
|
@media (max-width: 768px) {
|
.control-body {
|
width: 90vw;
|
/* 设置背景图片 */
|
background-image: url('../assets/bg.png');
|
background-repeat: no-repeat;
|
background-size: cover;
|
background-position: center;
|
}
|
.control-title {
|
display: none;
|
}
|
.margin20 {
|
margin-left: 0px;
|
}
|
}
|
.fx {
|
display: flex;justify-content: center;align-items: center;height: 50px;margin-bottom: 5px;
|
}
|
.b-item {
|
margin: 5px;
|
opacity: 0.7;
|
}
|
.b-item-item {
|
width: 65px;
|
height: 50px;
|
background-color: #f8f2d1;
|
border-radius: 8px;
|
user-select: none;
|
}
|
.b-item-item-other {
|
width: 102px;
|
height: 50px;
|
background-color: #f8f2d1;
|
border-radius: 8px;
|
user-select: none;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.icon {
|
min-width: 34px;
|
background-image: url("../assets/fx.png");
|
background-repeat: no-repeat;
|
background-size: contain;
|
background-position: center;
|
background-size: 42% 42%;
|
}
|
.icon-lt {
|
background-image: url("../assets/lt.png");
|
background-repeat: no-repeat;
|
background-size: contain;
|
background-size: 85% 85%;
|
background-position: center;
|
transform-origin: center center;
|
}
|
.icon-t {
|
background-image: url("../assets/top.png");
|
background-repeat: no-repeat;
|
background-size: contain;
|
background-size: 60% 60%;
|
background-position: center;
|
transform-origin: center center;
|
}
|
.icon-l {
|
background-image: url("../assets/left.png");
|
background-repeat: no-repeat;
|
background-size: contain;
|
background-size: 60% 60%;
|
background-position: center;
|
transform-origin: center center;
|
}
|
.icon-r {
|
background-image: url("../assets/right.png");
|
background-repeat: no-repeat;
|
background-size: contain;
|
background-size: 60% 60%;
|
background-position: center;
|
transform-origin: center center;
|
}
|
.icon-lb {
|
background-image: url("../assets/lb.png");
|
background-repeat: no-repeat;
|
background-size: contain;
|
background-size: 85% 85%;
|
background-position: center;
|
transform-origin: center center;
|
}
|
.icon-bo {
|
background-image: url("../assets/bottom.png");
|
background-repeat: no-repeat;
|
background-size: contain;
|
background-size: 60% 60%;
|
background-position: center;
|
transform-origin: center center;
|
}
|
.icon-rb {
|
background-image: url("../assets/rb.png");
|
background-repeat: no-repeat;
|
background-size: contain;
|
background-size: 85% 85%;
|
background-position: center;
|
transform-origin: center center;
|
}
|
.bgc {
|
background-color: #409EFF;
|
}
|
</style>
|
