125 lines
3.1 KiB
Plaintext
125 lines
3.1 KiB
Plaintext
<template>
|
|
<div class="center-column">
|
|
<!-- 视频播放组件 -->
|
|
<MonitorView ref="monitor" init="5" style="width:300rpx;height:200rpx;margin-top: 20rpx;"
|
|
@onTel="handleTelEvent" />
|
|
|
|
<!-- 云台控制组件 -->
|
|
<!-- <MonitorControlView ref="control" init="5" style="width:300rpx;height:300rpx;margin-top: 20rpx;" /> -->
|
|
|
|
<!-- 功能按钮 -->
|
|
<div class="button-group">
|
|
<button @click="switchDisplay(0)">原图</button>
|
|
<button @click="switchDisplay(1)">四分屏</button>
|
|
<button @click="switchDisplay(2)">180°全景</button>
|
|
<button @click="switchDisplay(3)">360°全景</button>
|
|
<button @click="switchDisplay(4)">环状全景</button>
|
|
|
|
<button @click="startAlarm">开启手动报警</button>
|
|
<button @click="stopAlarm">停止手动报警</button>
|
|
|
|
<button @click="flipImage(0)">左右翻转</button>
|
|
<button @click="flipImage(1)">上下翻转</button>
|
|
<button @click="flipImage(2)">中心翻转</button>
|
|
<button @click="flipImage(3)">顺时针90°</button>
|
|
<button @click="flipImage(4)">逆时针90°</button>
|
|
<button @click="flipImage(5)">逆时针180°</button>
|
|
<button @click="flipImage(6)">不翻转</button>
|
|
|
|
<button @click="resumeOrPause">暂停/继续</button>
|
|
<button @click="changeQuality">切换清晰度</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
phoneNumber: "1234567890",
|
|
isAlarming: false,
|
|
};
|
|
},
|
|
onLoad() {
|
|
// 全局事件监听
|
|
const globalEvent = uni.requireNativePlugin("globalEvent");
|
|
globalEvent.addEventListener("myEvent", (e) => {
|
|
console.log("myEvent", e);
|
|
uni.showToast({
|
|
title: "myEvent: " + JSON.stringify(e),
|
|
duration: 2000,
|
|
});
|
|
});
|
|
},
|
|
methods: {
|
|
handleTelEvent(event) {
|
|
console.log("Tel event detail:", event.detail);
|
|
|
|
},
|
|
|
|
// 切换播放模式
|
|
switchDisplay(mode) {
|
|
// console.log("Tel event detail:", event.detail);
|
|
this.$refs.monitor.switchDisplayModeFragment(mode);
|
|
},
|
|
|
|
// 手动报警
|
|
startAlarm() {
|
|
this.isAlarming = true;
|
|
this.$refs.monitor.startOrStopManualAlarm(this.isAlarming, (res) => {
|
|
console.log("startAlarm callback:", res);
|
|
});
|
|
},
|
|
stopAlarm() {
|
|
this.isAlarming = false;
|
|
this.$refs.monitor.startOrStopManualAlarm(this.isAlarming, (res) => {
|
|
console.log("stopAlarm callback:", res);
|
|
});
|
|
},
|
|
|
|
// 翻转图像
|
|
flipImage(type) {
|
|
this.$refs.monitor.changeImageSwitch(type, (res) => {
|
|
console.log("flipImage callback:", res);
|
|
});
|
|
},
|
|
|
|
// 暂停或继续
|
|
resumeOrPause() {
|
|
this.$refs.monitor.resumeOrPause();
|
|
},
|
|
|
|
// 切换清晰度
|
|
changeQuality() {
|
|
this.$refs.monitor.changeQuality();
|
|
},
|
|
|
|
// 测试按钮
|
|
test() {
|
|
this.$refs.monitor.test();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.center-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
/* height: 100vh; */
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.button-group button {
|
|
margin: 5rpx;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
</style> |