<template>
|
<div>
|
<div class="control-body" style="margin-left: 20px">
|
<div style="height: 140px; position: relative">
|
<div class="control-title">方向控制</div>
|
<div class="margin20">
|
<div class="fx">
|
<div class="b-item">
|
<div :class="{'b-item-item': true, icon: true, bgc: this.command === 'LEFT_UP'}" @mousedown="setCameraCommand('LEFT_UP', 0)" @mouseup="setCameraCommand('LEFT_UP', 1)"><i class="el-icon-top-left"></i></div>
|
</div>
|
<div class="b-item">
|
<div :class="{'b-item-item': true, icon: true, bgc: this.command === 'UP'}" @mousedown="setCameraCommand('UP', 0)" @mouseup="setCameraCommand('UP', 1)"><i class="el-icon-top"></i></div>
|
</div>
|
<div class="b-item">
|
<div :class="{'b-item-item': true, icon: true, bgc: this.command === 'RIGHT_UP'}" @mousedown="setCameraCommand('RIGHT_UP', 0)" @mouseup="setCameraCommand('RIGHT_UP', 1)"><i class="el-icon-top-right"></i></div>
|
</div>
|
</div>
|
<div class="fx">
|
<div class="b-item">
|
<div :class="{'b-item-item': true, icon: true, bgc: this.command === 'LEFT'}" @mousedown="setCameraCommand('LEFT', 0)" @mouseup="setCameraCommand('LEFT', 1)"><i class="el-icon-back"></i></div>
|
</div>
|
<div class="b-item">
|
<div style="min-width: 54px;user-select: none;"> </div>
|
</div>
|
<div class="b-item">
|
<div :class="{'b-item-item': true, icon: true, bgc: this.command === 'RIGHT'}" @mousedown="setCameraCommand('RIGHT', 0)" @mouseup="setCameraCommand('RIGHT', 1)"><i class="el-icon-right"></i></div>
|
</div>
|
</div>
|
<div class="fx">
|
<div class="b-item">
|
<div :class="{'b-item-item': true, icon: true, bgc: this.command === 'LEFT_DOWN'}" @mousedown="setCameraCommand('LEFT_DOWN', 0)" @mouseup="setCameraCommand('LEFT_DOWN', 1)"><i class="el-icon-bottom-left"></i></div>
|
</div>
|
<div class="b-item">
|
<div :class="{'b-item-item': true, icon: true, bgc: this.command === 'DOWN'}" @mousedown="setCameraCommand('DOWN', 0)" @mouseup="setCameraCommand('DOWN', 1)"><i class="el-icon-bottom"></i></div>
|
</div>
|
<div class="b-item">
|
<div :class="{'b-item-item': true, icon: true, bgc: this.command === 'RIGHT_DOWN'}" @mousedown="setCameraCommand('RIGHT_DOWN', 0)" @mouseup="setCameraCommand('RIGHT_DOWN', 1)"><i class="el-icon-bottom-right"></i></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="height: 50px; position: relative">
|
<div class="control-title">焦距控制</div>
|
<div class="margin20">
|
<div class="fx">
|
<div class="b-item">
|
<div :class="{'b-item-item': true, bgc: this.command === 'ZOOM_IN'}" @mousedown="setCameraCommand('ZOOM_IN', 0)" @mouseup="setCameraCommand('ZOOM_IN', 1)">焦距变大</div>
|
</div>
|
<div class="b-item">
|
<div :class="{'b-item-item': true, bgc: this.command === 'ZOOM_OUT'}" @mousedown="setCameraCommand('ZOOM_OUT', 0)" @mouseup="setCameraCommand('ZOOM_OUT', 1)">焦距变小</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="height: 50px; position: relative">
|
<div class="control-title">焦点控制</div>
|
<div class="margin20">
|
<div class="fx">
|
<div class="b-item">
|
<div :class="{'b-item-item': true, bgc: this.command === 'FOCUS_NEAR'}" @mousedown="setCameraCommand('FOCUS_NEAR', 0)" @mouseup="setCameraCommand('FOCUS_NEAR', 1)">焦点前移</div>
|
</div>
|
<div class="b-item">
|
<div :class="{'b-item-item': true, bgc: this.command === 'FOCUS_FAR'}" @mousedown="setCameraCommand('FOCUS_FAR', 0)" @mouseup="setCameraCommand('FOCUS_FAR', 1)">焦点后移</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="height: 50px; position: relative">
|
<div class="control-title">光圈控制</div>
|
<div class="margin20">
|
<div class="fx">
|
<div class="b-item">
|
<div :class="{'b-item-item': true, bgc: this.command === 'IRIS_ENLARGE'}" @mousedown="setCameraCommand('IRIS_ENLARGE', 0)" @mouseup="setCameraCommand('IRIS_ENLARGE', 1)">光圈扩大</div>
|
</div>
|
<div class="b-item">
|
<div :class="{'b-item-item': true, bgc: this.command === 'IRIS_REDUCE'}" @mousedown="setCameraCommand('IRIS_REDUCE', 0)" @mouseup="setCameraCommand('IRIS_REDUCE', 1)">光圈缩小</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import '@/assets/text/fonts.css'
|
import { setCameraCommand } from '@/api/camear'
|
|
export default {
|
name: 'ControllerVideoWeb',
|
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: 700px;
|
}
|
.margin20 {
|
margin-left: 20px;
|
}
|
/* 针对手机屏幕的样式 */
|
@media (max-width: 768px) {
|
.control-body {
|
width: 90vw;
|
}
|
.control-title {
|
display: none;
|
}
|
.margin20 {
|
margin-left: 0px;
|
}
|
}
|
.fx {
|
display: flex;justify-content: center;align-items: center;height: 35px;margin-bottom: 8px;
|
}
|
.b-item {
|
margin-right: 8px;
|
}
|
.b-item-item {
|
padding: 10px;
|
background-color: #eaeaea;
|
border-radius: 4px;
|
user-select: none;
|
}
|
.b-item-item:hover {
|
cursor: pointer;
|
background-color: #409EFF;
|
}
|
.icon {
|
min-width: 34px;
|
}
|
.bgc {
|
background-color: #409EFF;
|
}
|
</style>
|
