From 5fb65ada8ccc28eabf823b284de70fbd3ca1f41e Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 28 九月 2021 18:29:36 +0800
Subject: [PATCH] 抓拍大图层级修复v1
---
src/components/wasmPlayer/index.vue | 66 ++++++++++++++++++++++++++++++---
1 files changed, 60 insertions(+), 6 deletions(-)
diff --git a/src/components/wasmPlayer/index.vue b/src/components/wasmPlayer/index.vue
index 2053aa8..0dcf7f5 100644
--- a/src/components/wasmPlayer/index.vue
+++ b/src/components/wasmPlayer/index.vue
@@ -13,8 +13,8 @@
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"
@@ -63,6 +63,12 @@
@click="fullScreen"
:disable="false"
></b>
+
+ <!-- 涓嬭浇 -->
+ <i
+ class="el-icon-download jsmodern-video-download"
+ @click="downLoad"
+ ></i>
</section>
<!-- 澶ф挱鏀炬寜閽� -->
@@ -187,6 +193,8 @@
playerIndex: 0,
isEmptyUrl: false,
videoLoading: false,
+ loadUrl:'',
+ isFullScreen:false
}
},
watch: {
@@ -464,6 +472,8 @@
}
this.playerStatus = this.player.PlayOrPause
+
+ this.loadUrl = url
},
setPlayerStatus(stat) {
this.videoLoading = false
@@ -476,7 +486,42 @@
},
fullScreen() {
- this.player.fullscreen()
+ if(!this.isFullScreen){
+ this.player.fullscreen()
+ }
+ else{
+ this.player.exitfullscreen()
+ }
+ this.isFullScreen = !this.isFullScreen
+ },
+
+ async downLoad() {
+ 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"
+ console.log(url);
+ let name = url.substring(url.lastIndexOf("/") + 1)
+ let responsePromise = await fetch(url)
+ let blob = await responsePromise.blob()
+ let objectURL = window.URL.createObjectURL(blob)
+ let a = document.createElement('a')
+ a.href = objectURL
+ a.download = name
+ a.click()
+ a.remove()
+ /* let url = 'http:/'+this.loadUrl.substring(10)
+ let link = document.createElement("a"); //鍒涘缓a鏍囩
+ let name = url.substring(url.lastIndexOf("/") + 1)
+ link.style.display = "none"; //浣垮叾闅愯棌
+ link.href = url; //璧嬩簣鏂囦欢涓嬭浇鍦板潃
+ link.setAttribute("download", name); //璁剧疆涓嬭浇灞炴�� 浠ュ強鏂囦欢鍚�
+ document.body.appendChild(link); //a鏍囩鎻掕嚦椤甸潰涓�
+ link.click(); //寮哄埗瑙﹀彂a鏍囩浜嬩欢 */
+
},
playPrev() {
@@ -547,9 +592,9 @@
background: rgba(255, 255, 255, 0.25);
border-radius: 3px;
width: 460px;
- width: -webkit-calc(100% - 220px);
- width: -moz-calc(100% - 220px);
- width: calc(100% - 220px);
+ width: -webkit-calc(100% - 260px);
+ width: -moz-calc(100% - 260px);
+ width: calc(100% - 260px);
float: left;
margin: 19px 0 0 65px;
position: relative;
@@ -693,6 +738,15 @@
opacity: 0.5;
cursor: default;
}
+
+ .el-icon-download {
+ font-size: 24px;
+ width: 18px;
+ height: 18px;
+ margin-top: 7px;
+ margin-left: -12px;
+ }
+
}
.video-player:hover {
--
Gitblit v1.8.0