From ae2d855c89ca722ac7309fdf1aa6ceed370e3b95 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期一, 11 十月 2021 20:22:30 +0800
Subject: [PATCH] 监控ui
---
src/components/wasmPlayer/index.vue | 87 ++++++++++++++++++++++++++++++++++++++++---
1 files changed, 80 insertions(+), 7 deletions(-)
diff --git a/src/components/wasmPlayer/index.vue b/src/components/wasmPlayer/index.vue
index 9d6c06c..db673dc 100644
--- a/src/components/wasmPlayer/index.vue
+++ b/src/components/wasmPlayer/index.vue
@@ -13,14 +13,18 @@
v-loading="videoLoading"
element-loading-background="rgba(0, 0, 0, 0.8)"
style="position: unset !important"
- ></div>
- <canvas
+ ></div>
+ <canvas
ref="playCanvas"
id="paly-canvas"
width="960"
height="540"
></canvas>
</div>
+
+ <transition name="fade">
+ <div class="popuptext" id="myPopup" v-if="fullScreenNotice">璧勬簮涓嬭浇涓�,璇风◢鍚�...</div>
+ </transition>
<!-- 鎺у埗鏉� -->
<section
@@ -194,6 +198,8 @@
isEmptyUrl: false,
videoLoading: false,
loadUrl:'',
+ isFullScreen:false,
+ fullScreenNotice:false
}
},
watch: {
@@ -485,15 +491,44 @@
},
fullScreen() {
- this.player.fullscreen()
+ if(!this.isFullScreen){
+ this.player.fullscreen()
+ }
+ else{
+ this.player.exitfullscreen()
+ }
+ this.isFullScreen = !this.isFullScreen
},
async downLoad() {
- this.$notify.info({
+ if (!this.loadUrl) {
+ this.$notify.info({
title: '娑堟伅',
- message: '璧勬簮涓嬭浇涓�,璇风◢鍚�...'
+ message:'涓嬭浇澶辫触锛屾棤鏁堢殑瑙嗛鍦板潃'
});
- let url = 'http:/'+this.loadUrl.substring(10)
+ return
+ }
+
+ if (this.isFullScreen) {
+ /* const screen = this.player.webglPlayer.canvas.parentNode
+ var p = document.createElement("p");
+ var txt = document.createTextNode("璧勬簮涓嬭浇涓�,璇风◢鍚�...");
+ p.appendChild(txt);
+ p.classList.add("downloadNotice");
+ screen.appendChild(p); */
+ this.fullScreenNotice = true
+ setTimeout(()=>{this.fullScreenNotice = false},2000);}
+
+ else {
+ this.$notify.info({
+ title: '娑堟伅',
+ message:`璧勬簮涓嬭浇涓�,璇风◢鍚�...`
+ });
+ }
+
+ let url = 'http://'+window.location.host+this.loadUrl
+
+ // let url = "http://localhost:8080/httpImage/192.168.20.189:6700/283,2f49bf283ad7?collection=2021-09-28-DSVAD010120190703-video"
let name = url.substring(url.lastIndexOf("/") + 1)
let responsePromise = await fetch(url)
let blob = await responsePromise.blob()
@@ -557,7 +592,7 @@
position: absolute;
bottom: 0;
left: 0;
- z-index: 2147483648;
+ z-index: 100;
width: 100%;
height: 40px;
line-height: 40px;
@@ -782,4 +817,42 @@
font-size: 14px;
color: #fff;
}
+
+.downloadNotice {
+ position: absolute;
+ height: 200px;
+ width: 200px;
+ background-color: pink;
+}
+
+ .popuptext {
+ /* display:none; */
+ height: 50px;
+ line-height: 50px;
+ font-size: 20px;
+ background-color: #555;
+ opacity: .8;
+ color: #fff;
+ text-align: center;
+ border-radius: 25px;
+ position: relative;
+ top: 30px;
+ z-index: 1;
+}
+
+ .fade-enter{
+ opacity: 0;
+ }
+ .fade-enter-active{
+ transition: opacity .5s;
+ }
+ .fade-leave-to{
+ opacity: 0;
+ }
+ .fade-leave-active{
+ transition: opacity 3s;
+ }
+ .canvasDiv .el-loading-mask {
+ z-index: 1000 !important;
+ }
</style>
--
Gitblit v1.8.0