505 lines
15 KiB
Vue
505 lines
15 KiB
Vue
<script lang="ts">
|
||
export default {
|
||
name: 'editvideo' //控制摄像机
|
||
};
|
||
</script>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from "vue";
|
||
import { ElMessageBox, ElMessage } from "element-plus";
|
||
import axios from 'axios';
|
||
import JessibucaPlayer from '@/components/jessibuca/index1.vue'
|
||
import { useUserStore } from '@/store/modules/user';
|
||
const userStore = useUserStore();
|
||
const videoUrl = ref("")
|
||
const props = defineProps({
|
||
rowInfo: {
|
||
required: false,
|
||
type: Object,
|
||
default: false
|
||
},
|
||
online: {
|
||
required: false,
|
||
type: String,
|
||
default: false
|
||
},
|
||
|
||
});
|
||
const controSpeed = ref(100) // 摄像头转动速度默认值 30
|
||
function ptzCamera(command: any) { // 监控视频控制方法
|
||
isGaoliang.value = command
|
||
if (props.online != "1") {
|
||
return
|
||
}
|
||
if (channelId.value == "" || channelId.value == undefined) {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: '暂时无法调试，请先检查视频监控是否正常！',
|
||
})
|
||
return
|
||
}
|
||
axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
|
||
if (res.data.data == "0") {
|
||
axios.post(userStore.webApiMonitorUrl + '/api/ptz/control/' + deviceId.value + '/' + channelId.value + '?command=' + command +
|
||
'&horizonSpeed=' + controSpeed.value + '&verticalSpeed=' + controSpeed.value + '&zoomSpeed=' + controSpeed.value, {}).then((res: any) => { })
|
||
}
|
||
})
|
||
|
||
}
|
||
function condensationChang(command: any) { // 光聚方法
|
||
if (props.online != "1") {
|
||
return
|
||
}
|
||
if (channelId.value == "" || channelId.value == undefined) {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: '暂时无法调试，请先检查视频监控是否正常！',
|
||
})
|
||
return
|
||
}
|
||
// 近（42H ） 66 远（41H） 65
|
||
const cmdCode = ref()
|
||
if (command == '加') {
|
||
cmdCode.value = 65
|
||
isGaoliang.value = '65'
|
||
} else if (command == '减') {
|
||
cmdCode.value = 66
|
||
isGaoliang.value = '66'
|
||
}
|
||
axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
|
||
if (res.data.data == "0") {
|
||
axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=' + cmdCode.value + '¶meter1=80¶meter2=0&combindCode2=0', {}).then((res: any) => { })
|
||
}
|
||
})
|
||
|
||
}
|
||
function apertureChang(command: any) { // 光圈方法
|
||
if (props.online != "1") {
|
||
return
|
||
}
|
||
if (channelId.value == "" || channelId.value == undefined) {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: '暂时无法调试，请先检查视频监控是否正常！',
|
||
})
|
||
return
|
||
}
|
||
// 缩小（48H ） 72 放大（44H） 70
|
||
const cmdCode = ref(72)
|
||
if (command == '加') {
|
||
cmdCode.value = 70
|
||
isGaoliang.value = '70'
|
||
} else if (command == '减') {
|
||
cmdCode.value = 72
|
||
isGaoliang.value = '72'
|
||
}
|
||
axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
|
||
if (res.data.data == "0") {
|
||
axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=' + cmdCode.value + '¶meter1=0¶meter2=80&combindCode2=0', {}).then((res: any) => { })
|
||
}
|
||
})
|
||
}
|
||
function videoRefresh() {
|
||
videoUrl.value = videoUrl.value + '?Math=' + Math.random()
|
||
}
|
||
const deviceId = ref("")
|
||
const channelId = ref("")
|
||
const videofmp4 = ref('')
|
||
onMounted(() => {
|
||
if (props.rowInfo.deviceId == undefined) {
|
||
deviceId.value = props.rowInfo.deviceid
|
||
channelId.value = props.rowInfo.channelid
|
||
} else {
|
||
deviceId.value = props.rowInfo.deviceId
|
||
channelId.value = props.rowInfo.channelId
|
||
}
|
||
axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + deviceId.value + '/' + channelId.value, {}).then((ress: any) => {
|
||
if (ress.data.data != undefined) {
|
||
videoUrl.value = ress.data.data.ws_flv
|
||
videofmp4.value = ress.data.data.fmp4
|
||
}
|
||
}).catch(function (error: any) {
|
||
})
|
||
})
|
||
const isGaoliang: any = ref("")
|
||
function quxiao() {
|
||
isGaoliang.value = ''
|
||
}
|
||
</script>
|
||
<template>
|
||
<div class="editvideo-box">
|
||
<div style="width: 98%; height: 650px; margin: auto;">
|
||
<JessibucaPlayer :isClose="false" :_uid="'editvideo1'" :visible.sync="true" :videoUrl="videoUrl"
|
||
:videofmp4="videofmp4" :hasAudio="true" fluent autoplay live></JessibucaPlayer>
|
||
</div>
|
||
<div class="Camera-buttons-box1">
|
||
<div class="Camera-buttons-box">
|
||
<div class="Camera-left-button1" @mousedown="ptzCamera('up')" @mouseup="ptzCamera('stop')"></div>
|
||
<div class="Camera-left-button2" @mousedown="ptzCamera('upright')" @mouseup="ptzCamera('stop')"></div>
|
||
<div class="Camera-left-button3" @mousedown="ptzCamera('right')" @mouseup="ptzCamera('stop')"></div>
|
||
<div class="Camera-left-button4" @mousedown="ptzCamera('downright')" @mouseup="ptzCamera('stop')"></div>
|
||
<div class="Camera-left-button5" @mousedown="ptzCamera('down')" @mouseup="ptzCamera('stop')"></div>
|
||
<div class="Camera-left-button6" @mousedown="ptzCamera('downleft')" @mouseup="ptzCamera('stop')"></div>
|
||
<div class="Camera-left-button7" @mousedown="ptzCamera('left')" @mouseup="ptzCamera('stop')"></div>
|
||
<div class="Camera-left-button8" @mousedown="ptzCamera('upleft')" @mouseup="ptzCamera('stop')"></div>
|
||
<div class="Camera-left-button9" @click="videoRefresh"></div>
|
||
</div>
|
||
<div>
|
||
<div class="focallengthbox">
|
||
<div class="focallength1" :class="{ 'gaolaing': isGaoliang == 'zoomout' }"
|
||
@mousedown="ptzCamera('zoomout')" @mouseup="ptzCamera('stop')">
|
||
<img src="@/assets/videoimg/left.png" style="width:8px;height:12px" alt="">
|
||
</div>
|
||
<div class="focallength2">缩放</div>
|
||
<div class="focallength1" :class="{ 'gaolaing': isGaoliang == 'zoomin' }"
|
||
@mousedown="ptzCamera('zoomin')" @mouseup="ptzCamera('stop')">
|
||
<img src="@/assets/videoimg/right.png" style="width:8px;height:12px" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="focallengthbox">
|
||
<div class="focallength1" :class="{ 'gaolaing': isGaoliang == '66' }"
|
||
@mousedown="condensationChang('减')" @mouseup="quxiao">
|
||
<img src="@/assets/videoimg/left.png" style="width:8px;height:12px" alt="">
|
||
</div>
|
||
<div class="focallength2">光聚</div>
|
||
<div class="focallength1" :class="{ 'gaolaing': isGaoliang == '65' }"
|
||
@mousedown="condensationChang('加')" @mouseup="quxiao">
|
||
<img src="@/assets/videoimg/right.png" style="width:8px;height:12px" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="focallengthbox">
|
||
<div class="focallength1" :class="{ 'gaolaing': isGaoliang == '72' }"
|
||
@mousedown="apertureChang('减')" @mouseup="quxiao">
|
||
<img src="@/assets/videoimg/left.png" style="width:8px;height:12px" alt="">
|
||
</div>
|
||
<div class="focallength2">光圈</div>
|
||
<div class="focallength1" :class="{ 'gaolaing': isGaoliang == '70' }"
|
||
@mousedown="apertureChang('加')" @mouseup="quxiao">
|
||
<img src="@/assets/videoimg/right.png" style="width:8px;height:12px" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
<style scoped lang="scss">
|
||
.Camera-buttons-box1 {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.Camera-buttons-box {
|
||
position: relative;
|
||
width: 180px;
|
||
height: 165px;
|
||
// margin-top: 20px;
|
||
// margin-left: 50px;
|
||
// margin-bottom: 10px;
|
||
// display: flex;
|
||
// flex-wrap: wrap;
|
||
// justify-content: center;
|
||
}
|
||
|
||
.Camera-left-button1 {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 29px;
|
||
left: 65px;
|
||
width: 44px;
|
||
height: 35px;
|
||
background: url(@/assets/navigation/sxj_01.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.Camera-left-button2 {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 33px;
|
||
left: 100px;
|
||
width: 44px;
|
||
height: 44px;
|
||
background: url(@/assets/navigation/sxj_02.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.Camera-left-button3 {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 65px;
|
||
left: 116px;
|
||
width: 34px;
|
||
height: 44px;
|
||
background: url(@/assets/navigation/sxj_03.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.Camera-left-button4 {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 100px;
|
||
left: 103px;
|
||
width: 44px;
|
||
height: 44px;
|
||
background: url(@/assets/navigation/sxj_04.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.Camera-left-button5 {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 117px;
|
||
left: 70px;
|
||
width: 44px;
|
||
height: 34px;
|
||
background: url(@/assets/navigation/sxj_05.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.Camera-left-button6 {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 103px;
|
||
left: 35px;
|
||
width: 43px;
|
||
height: 44px;
|
||
background: url(@/assets/navigation/sxj_06.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.Camera-left-button7 {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 69px;
|
||
left: 28px;
|
||
width: 35px;
|
||
height: 44px;
|
||
background: url(@/assets/navigation/sxj_07.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.Camera-left-button8 {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 35px;
|
||
left: 33px;
|
||
width: 43px;
|
||
height: 43px;
|
||
background: url(@/assets/navigation/sxj_08.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.Camera-left-button9 {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 63px;
|
||
left: 63px;
|
||
width: 54px;
|
||
height: 54px;
|
||
background: url(@/assets/navigation/sxj_09.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.Camera-left-button1:hover {
|
||
background: url(@/assets/navigation/sxj_01.png) no-repeat center center;
|
||
background: url(@/assets/navigation/sxj_011.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.Camera-left-button2:hover {
|
||
background: url(@/assets/navigation/sxj_02.png) no-repeat center center;
|
||
background: url(@/assets/navigation/sxj_022.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.Camera-left-button3:hover {
|
||
background: url(@/assets/navigation/sxj_03.png) no-repeat center center;
|
||
background: url(@/assets/navigation/sxj_033.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.Camera-left-button4:hover {
|
||
background: url(@/assets/navigation/sxj_04.png) no-repeat center center;
|
||
background:url(@/assets/navigation/sxj_044.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.Camera-left-button5:hover {
|
||
background: url(@/assets/navigation/sxj_05.png) no-repeat center center;
|
||
background: url(@/assets/navigation/sxj_055.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.Camera-left-button6:hover {
|
||
background: url(@/assets/navigation/sxj_06.png) no-repeat center center;
|
||
background: url(@/assets/navigation/sxj_066.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.Camera-left-button7:hover {
|
||
background: url(@/assets/navigation/sxj_07.png) no-repeat center center;
|
||
background: url(@/assets/navigation/sxj_077.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.Camera-left-button8:hover {
|
||
background: url(@/assets/navigation/sxj_08.png) no-repeat center center;
|
||
background: url(@/assets/navigation/sxj_088.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.Camera-left-button9:hover {
|
||
background: url(@/assets/navigation/sxj_09.png) no-repeat center center;
|
||
background: url(@/assets/navigation/sxj_099.png) no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.gaolaing {
|
||
background: rgba(50, 177, 245, 0.4)
|
||
}
|
||
|
||
.focallengthbox {
|
||
display: flex;
|
||
// padding-left: 40px;
|
||
padding-top: 5px;
|
||
|
||
.focallength1 {
|
||
border: 1px solid rgba(50, 177, 245, 0.4);
|
||
width: 30px;
|
||
height: 30px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.focallength2 {
|
||
pointer-events: none;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
border-top: 1px solid rgba(50, 177, 245, 0.4);
|
||
border-bottom: 1px solid rgba(50, 177, 245, 0.4);
|
||
width: 120px;
|
||
height: 30px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #B5D7FF;
|
||
}
|
||
}
|
||
|
||
.Camera-left-buttons {
|
||
position: relative;
|
||
width: 156px;
|
||
height: 156px;
|
||
margin-right: 10px;
|
||
|
||
.Camera-left-input {
|
||
width: 130px;
|
||
height: 36px;
|
||
}
|
||
|
||
.Camera-left-button {
|
||
position: absolute;
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
|
||
.img {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
|
||
.Camera1 {
|
||
top: 16px;
|
||
left: 16px;
|
||
}
|
||
|
||
.Camera2 {
|
||
top: 0px;
|
||
left: 54px;
|
||
}
|
||
|
||
.Camera3 {
|
||
top: 16px;
|
||
right: 16px;
|
||
}
|
||
|
||
.Camera4 {
|
||
top: 54px;
|
||
left: 0px;
|
||
}
|
||
|
||
.Camera5 {
|
||
top: 54px;
|
||
left: 54px;
|
||
}
|
||
|
||
.Camera6 {
|
||
top: 54px;
|
||
right: 0px;
|
||
}
|
||
|
||
.Camera7 {
|
||
bottom: 16px;
|
||
left: 16px;
|
||
}
|
||
|
||
.Camera8 {
|
||
bottom: 0px;
|
||
left: 54px;
|
||
}
|
||
|
||
.Camera9 {
|
||
bottom: 16px;
|
||
right: 16px;
|
||
}
|
||
|
||
.Camera-left-button:hover {
|
||
// background-color: rgba(33, 191, 149, 0.2);
|
||
}
|
||
}
|
||
|
||
.Camera-right-buttons {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
width: 102px;
|
||
height: 156px;
|
||
|
||
.buttonurl-box {
|
||
width: 100%;
|
||
height: 48px;
|
||
// background-color: rgba(53, 222, 176,0.4);
|
||
border: 1px solid rgba(0, 249, 162, 1);
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
|
||
.buttonurl-imgbox {
|
||
width: 50%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.buttonurl-imgbox:hover {
|
||
background-color: rgba(33, 191, 149, 0.2);
|
||
}
|
||
}
|
||
}
|
||
</style>
|