From e19dcbcf017744b1fceb0b29f423aab9c2786e6f Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 23 三月 2022 02:34:21 +0800
Subject: [PATCH] 修改wasm player 播放按钮
---
src/components/wasmPlayer/wasm/player.js | 81 ++----
src/pages/cameraVideo/index/Video.vue | 333 +++++++++++-------------
src/components/wasmPlayer/index.vue | 340 ++++++++++----------------
3 files changed, 314 insertions(+), 440 deletions(-)
diff --git a/src/components/wasmPlayer/index.vue b/src/components/wasmPlayer/index.vue
index db673dc..43aca2c 100644
--- a/src/components/wasmPlayer/index.vue
+++ b/src/components/wasmPlayer/index.vue
@@ -1,85 +1,50 @@
<template>
<div class="video-player">
- <canvas
- v-show="showArea"
- id="area-canvas"
- ref="areaCanvas"
- width="960"
- height="540"
- ></canvas>
+ <canvas v-show="showArea" id="area-canvas" ref="areaCanvas" width="960" height="540"></canvas>
<div class="container" id="videoPlayer">
<div class="canvasDiv">
<div
v-loading="videoLoading"
element-loading-background="rgba(0, 0, 0, 0.8)"
style="position: unset !important"
- ></div>
- <canvas
- ref="playCanvas"
- id="paly-canvas"
- width="960"
- height="540"
- ></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>
+
+ <transition name="fade">
+ <div class="popuptext" id="myPopup" v-if="fullScreenNotice">璧勬簮涓嬭浇涓�,璇风◢鍚�...</div>
+ </transition>
<!-- 鎺у埗鏉� -->
- <section
- class="jsmodern-video-panel"
- :style="{ display: isStream ? 'none' : 'block' }"
- >
+ <section class="jsmodern-video-panel" :style="{ display: isStream ? 'none' : 'block' }">
<!-- 鎾斁/鏆傚仠 -->
- <b
- :class="
- playerStatus == 0 ? 'jsmodern-video-play' : 'jsmodern-video-pause'
- "
- @click="playVideo"
- ></b>
+ <b :class="playerStatus == 0 ? 'jsmodern-video-play' : 'jsmodern-video-pause'" @click="playVideo"></b>
<!-- 鏃堕棿 -->
- <span class="jsmodern-video-start" ref="timeLabel"
- >00:00:00/00:00:00</span
- >
+ <span class="jsmodern-video-start" ref="timeLabel">00:00:00/00:00:00</span>
<!-- 杩涘害鏉� -->
<div>
- <input
- class="jsmodern-video-linebox"
- ref="timeTrack"
- type="range"
- value="0"
- />
+ <input class="jsmodern-video-linebox" ref="timeTrack" type="range" value="0" />
</div>
<!-- 澹伴煶 -->
- <b class="jsmodern-video-volume"></b>
+ <!-- <b class="jsmodern-video-volume"></b> -->
<!-- <div class="jsmodern-video-volumebox">
<div class="jsmodern-video-volumeline"></div>
<b class="jsmodern-video-volumedot"></b>
</div> -->
<!-- 鍏ㄥ睆 -->
- <b
- class="jsmodern-video-fullin"
- @click="fullScreen"
- :disable="false"
- ></b>
+ <b class="jsmodern-video-fullin" @click="fullScreen" :disable="false"></b>
<!-- 涓嬭浇 -->
- <i
- class="el-icon-download jsmodern-video-download"
- @click="downLoad"
- ></i>
+ <i class="el-icon-download jsmodern-video-download" @click="downLoad" v-show="!isStream"></i>
</section>
<!-- 澶ф挱鏀炬寜閽� -->
<div v-show="!isStream">
- <span class="video-btn" v-show="playerStatus == 0" @click="playVideo"
- ><img src="./wasm/img/bo1.png"
- /></span>
+ <span class="video-btn" v-show="playerStatus == 0" @click="playVideo"><img src="./wasm/img/bo1.png"/></span>
<!-- 涓婁竴涓� -->
<span class="video-prve" v-show="showPrev">
@@ -106,68 +71,65 @@
/*
2021.09.22 娣诲姞澶氫釜褰曞儚鍦板潃鐨勫鐞�, 涓庡綍鍍忔ā鍧楃害瀹�, 鐢� || 鍒嗗壊澶氫釜瑙嗛鍦板潃, 鍓嶇澶勭悊鎾斁.
*/
-import { Player } from './wasm/player'
-import VideoRuleData from '@/Pool/VideoRuleData'
-import { getAllPolygon } from '@/api/polygon'
+import { Player } from "./wasm/player"
+import VideoRuleData from "@/Pool/VideoRuleData"
+import { getAllPolygon } from "@/api/polygon"
export default {
- name: 'CameraPlayer',
+ name: "CameraPlayer",
props: {
videoUrl: {
type: String,
// default: "ws://192.168.1.182:10101/ws"
- default: `${location.protocol === 'https' ? 'wss' : 'ws'}://${
- location.host
- }/ws`,
+ default: `${location.protocol === "https" ? "wss" : "ws"}://${location.host}/ws`
},
cameraName: {
type: String,
- default: '',
+ default: ""
},
cameraID: {
type: String,
- default: 'C4668FD0-3CAE-C31F-C21E-28B7001243C4',
+ default: "C4668FD0-3CAE-C31F-C21E-28B7001243C4"
},
rtspUrl: {
type: String,
- default:
- 'rtsp://admin:a1234567@192.168.1.201:554/h264/ch1/main/av_stream',
+ default: "rtsp://admin:a1234567@192.168.1.201:554/h264/ch1/main/av_stream"
},
isRunning: {
type: Boolean,
- default: false,
+ default: false
},
isGb: {
type: Boolean,
- default: false,
+ default: false
},
showArea: {
type: Boolean,
- default: false,
+ default: false
},
isStream: {
type: Boolean,
- default: true,
+ default: true
},
autoPlay: {
type: Boolean,
- default: false,
+ default: false
},
preload: {
type: Boolean,
- default: true,
- },
+ default: true
+ }
},
computed: {
poster() {
- return '/images/player/player_poster.gif?t=' + Math.random()
+ return "/images/player/player_poster.gif?t=" + Math.random()
},
showPrev() {
return this.playerIndex - 1 >= 0
},
showNext() {
return this.playerIndex + 1 < this.videoUrls.length
- },
+ }
},
data() {
return {
@@ -179,7 +141,7 @@
line: [],
rect: [], // {id:'uuid', name: '鐭╁舰1', location: [{ x: 20, y: 30 }, { x: 20, y: 60 }, { x: 100, y: 60 }, { x: 100, y: 30 }] }
arrow: [],
- polygon: [],
+ polygon: []
},
//showProportion: 3.2,
//showProportionY: 3.58,
@@ -197,9 +159,9 @@
playerIndex: 0,
isEmptyUrl: false,
videoLoading: false,
- loadUrl:'',
- isFullScreen:false,
- fullScreenNotice:false
+ loadUrl: "",
+ isFullScreen: false,
+ fullScreenNotice: false
}
},
watch: {
@@ -213,7 +175,7 @@
this.playVideo()
})
}
- },
+ }
},
mounted() {
this.player = new Player()
@@ -224,18 +186,18 @@
this.playVideo()
this.$nextTick(() => {
this.canvas = this.$refs.areaCanvas
- this.ctx = this.canvas.getContext('2d')
+ this.ctx = this.canvas.getContext("2d")
this.ctx.lineWidth = 1
this.initArea()
})
} else {
// 褰曞儚URL澶勭悊, 鍙兘瀛樺湪澶氫釜褰曞儚鍦板潃
- if (this.videoUrl === '') {
+ if (this.videoUrl === "") {
this.playerStatus = -1
return
}
- this.videoUrls = this.videoUrl.split('||')
+ this.videoUrls = this.videoUrl.split("||")
if (this.autoPlay || this.preload) {
this.playVideo()
@@ -252,47 +214,26 @@
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
let _this = this // 闆嗗悎涓亶鍘嗛渶瑕佸皢this杞瓨涓�涓嬩娇鐢�
_this.canvasData.line.forEach(function(v, i) {
- _this.ctx.strokeStyle = 'yellow'
+ _this.ctx.strokeStyle = "yellow"
_this.ctx.beginPath()
- _this.ctx.moveTo(
- v.location[0].x / _this.showProportion,
- v.location[0].y / _this.showProportion
- )
- _this.ctx.lineTo(
- v.location[1].x / _this.showProportion,
- v.location[1].y / _this.showProportion
- )
+ _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
+ _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion)
_this.ctx.stroke()
- _this.canvas.style.cursor = 'default'
+ _this.canvas.style.cursor = "default"
})
_this.canvasData.rect.forEach(function(v, i) {
- _this.ctx.strokeStyle = 'yellow'
+ _this.ctx.strokeStyle = "yellow"
_this.ctx.beginPath()
- _this.ctx.moveTo(
- v.location[0].x / _this.showProportion,
- v.location[0].y / _this.showProportion
- )
- _this.ctx.lineTo(
- v.location[1].x / _this.showProportion,
- v.location[1].y / _this.showProportion
- )
- _this.ctx.lineTo(
- v.location[2].x / _this.showProportion,
- v.location[2].y / _this.showProportion
- )
- _this.ctx.lineTo(
- v.location[3].x / _this.showProportion,
- v.location[3].y / _this.showProportion
- )
- _this.ctx.lineTo(
- v.location[0].x / _this.showProportion,
- v.location[0].y / _this.showProportion
- )
+ _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
+ _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion)
+ _this.ctx.lineTo(v.location[2].x / _this.showProportion, v.location[2].y / _this.showProportion)
+ _this.ctx.lineTo(v.location[3].x / _this.showProportion, v.location[3].y / _this.showProportion)
+ _this.ctx.lineTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
_this.ctx.stroke()
- _this.canvas.style.cursor = 'default'
+ _this.canvas.style.cursor = "default"
})
_this.canvasData.arrow.forEach(function(v, i) {
- _this.ctx.strokeStyle = 'yellow'
+ _this.ctx.strokeStyle = "yellow"
_this.drawArrow(
_this.ctx,
v.location[0].x / _this.showProportion,
@@ -301,44 +242,28 @@
v.location[1].y / _this.showProportion,
20,
30,
- 'yellow'
+ "yellow"
)
- _this.canvas.style.cursor = 'default'
+ _this.canvas.style.cursor = "default"
})
_this.canvasData.polygon.forEach(function(v, i) {
if (v.location.length === 0) {
return
}
- _this.ctx.strokeStyle = 'yellow'
+ _this.ctx.strokeStyle = "yellow"
_this.ctx.beginPath()
- _this.ctx.moveTo(
- v.location[0].x / _this.showProportion,
- v.location[0].y / _this.showProportionY
- )
+ _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportionY)
for (let i = 1; i < v.location.length; i++) {
- _this.ctx.lineTo(
- v.location[i].x / _this.showProportion,
- v.location[i].y / _this.showProportionY
- )
+ _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportionY)
}
_this.ctx.closePath()
_this.ctx.stroke()
- _this.canvas.style.cursor = 'default'
+ _this.canvas.style.cursor = "default"
})
},
// 绠ご缁樺埗鍑芥暟
- drawArrow(
- ctx,
- fromX,
- fromY,
- toX,
- toY,
- theta = 30,
- headlen = 10,
- width = 1,
- color = 'yellow'
- ) {
+ drawArrow(ctx, fromX, fromY, toX, toY, theta = 30, headlen = 10, width = 1, color = "yellow") {
// ctx锛欳anvas缁樺浘鐜
// fromX, fromY锛氳捣鐐瑰潗鏍囷紙涔熷彲浠ユ崲鎴恜1锛屽彧涓嶈繃瀹冩槸涓�涓暟缁勶級
// toX, toY锛氱粓鐐瑰潗鏍� (涔熷彲浠ユ崲鎴恜2锛屽彧涓嶈繃瀹冩槸涓�涓暟缁�)
@@ -382,10 +307,10 @@
// 鍥炴樉鍥惧舰澶囨敞
showRemarks(x, y, remarks) {
this.ctx.moveTo(x, y - 10) // 鍥犱负鏀惧ぇ涔嬪悗鏄痽-20锛屾墍浠ョ缉灏忕増鐨勪负y-10
- this.ctx.fillStyle = 'green' // 璁剧疆濉厖棰滆壊涓虹豢鑹�
+ this.ctx.fillStyle = "green" // 璁剧疆濉厖棰滆壊涓虹豢鑹�
this.ctx.font = '10px "寰蒋闆呴粦"' // 璁剧疆瀛椾綋
- this.ctx.textBaseline = 'bottom' // 璁剧疆瀛椾綋搴曠嚎瀵归綈缁樺埗鍩虹嚎
- this.ctx.textAlign = 'left' // 璁剧疆瀛椾綋瀵归綈鐨勬柟寮�
+ this.ctx.textBaseline = "bottom" // 璁剧疆瀛椾綋搴曠嚎瀵归綈缁樺埗鍩虹嚎
+ this.ctx.textAlign = "left" // 璁剧疆瀛椾綋瀵归綈鐨勬柟寮�
this.ctx.fillText(remarks, x, y - 10) // 濉厖鏂囧瓧
},
getCanvasData(data) {
@@ -399,7 +324,6 @@
setWidthHeight() {
this.canvasWidth = this.$refs.videoPlayer.offsetWidth
this.canvasHeight = this.$refs.videoPlayer.offsetHeight
- console.log(this.canvasWidth, this.canvasHeight)
},
async initArea() {
if (!this.showCanvas) {
@@ -407,7 +331,7 @@
}
const res = await getAllPolygon({
- cameraId: this.TreeDataPool.selectedNode.id,
+ cameraId: this.TreeDataPool.selectedNode.id
})
this.canvasData.line = res.data.line
this.canvasData.rect = res.data.rect
@@ -416,15 +340,15 @@
this.clickSelect(this.canvasData)
},
initAlgoDataWebScoket() {
- if (typeof WebSocket === 'undefined') {
- console.log('error,鎮ㄧ殑娴忚鍣ㄤ笉鏀寔socket')
+ if (typeof WebSocket === "undefined") {
+ console.log("error,鎮ㄧ殑娴忚鍣ㄤ笉鏀寔socket")
} else {
this.algoDataSocket = new WebSocket()
this.algoDataSocket.onopen = () => {
- console.log('socket杩炴帴鎴愬姛')
+ console.log("socket杩炴帴鎴愬姛")
}
this.algoDataSocket.onerror = () => {
- console.log('杩炴帴閿欒')
+ console.log("杩炴帴閿欒")
}
this.algoDataSocket.onmessage = (msg) => {
console.log(msg)
@@ -432,14 +356,14 @@
}
},
playVideo() {
- if (this.isStream && this.rtspUrl == '') {
+ if (this.isStream && this.rtspUrl == "") {
return
}
- let payload = ''
- let url = ''
+ let payload = ""
+ let url = ""
if (this.isStream) {
- if (this.cameraID == '') {
+ if (this.cameraID == "") {
this.cameraID = this.getUuid()
}
@@ -447,12 +371,12 @@
cameraID: this.cameraID,
rtspUrl: this.rtspUrl,
isRunning: this.isRunning,
- isGb28181: this.isGb,
+ isGb28181: this.isGb
})
url = this.videoUrl
} else {
- url = '/httpImage/' + this.videoUrls[this.playerIndex]
+ url = "/httpImage/" + this.videoUrls[this.playerIndex]
}
this.videoLoading = true
@@ -482,7 +406,7 @@
},
setPlayerStatus(stat) {
this.videoLoading = false
- this.playerStatus = stat
+ this.playerStatus = 1
},
stopVideo() {
if (this.player.hPlayer == 0) return
@@ -491,54 +415,54 @@
},
fullScreen() {
- if(!this.isFullScreen){
- this.player.fullscreen()
- }
- else{
- this.player.exitfullscreen()
+ if (!this.isFullScreen) {
+ this.player.fullscreen()
+ } else {
+ this.player.exitfullscreen()
}
this.isFullScreen = !this.isFullScreen
},
async downLoad() {
if (!this.loadUrl) {
- this.$notify.info({
- title: '娑堟伅',
- message:'涓嬭浇澶辫触锛屾棤鏁堢殑瑙嗛鍦板潃'
- });
+ this.$notify.info({
+ title: "娑堟伅",
+ message: "涓嬭浇澶辫触锛屾棤鏁堢殑瑙嗛鍦板潃"
+ })
return
}
if (this.isFullScreen) {
- /* const screen = this.player.webglPlayer.canvas.parentNode
+ /* 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:`璧勬簮涓嬭浇涓�,璇风◢鍚�...`
- });
- }
+ 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://" + 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 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()
let objectURL = window.URL.createObjectURL(blob)
- let a = document.createElement('a')
+ let a = document.createElement("a")
a.href = objectURL
a.download = name
a.click()
a.remove()
- /* let url = 'http:/'+this.loadUrl.substring(10)
+ /* let url = 'http:/'+this.loadUrl.substring(10)
let link = document.createElement("a"); //鍒涘缓a鏍囩
let name = url.substring(url.lastIndexOf("/") + 1)
link.style.display = "none"; //浣垮叾闅愯棌
@@ -546,7 +470,6 @@
link.setAttribute("download", name); //璁剧疆涓嬭浇灞炴�� 浠ュ強鏂囦欢鍚�
document.body.appendChild(link); //a鏍囩鎻掕嚦椤甸潰涓�
link.click(); //寮哄埗瑙﹀彂a鏍囩浜嬩欢 */
-
},
playPrev() {
@@ -559,8 +482,8 @@
this.playerIndex++
this.player.stop()
this.playVideo()
- },
- },
+ }
+ }
}
</script>
@@ -617,9 +540,9 @@
background: rgba(255, 255, 255, 0.25);
border-radius: 3px;
width: 460px;
- width: -webkit-calc(100% - 260px);
- width: -moz-calc(100% - 260px);
- width: calc(100% - 260px);
+ width: -webkit-calc(100% - 215px);
+ width: -moz-calc(100% - 215px);
+ width: calc(100% - 215px);
float: left;
margin: 19px 0 0 65px;
position: relative;
@@ -771,7 +694,6 @@
margin-top: 7px;
margin-left: -12px;
}
-
}
.video-player:hover {
@@ -825,34 +747,34 @@
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;
+.popuptext {
+ /* display:none; */
+ height: 50px;
+ line-height: 50px;
+ font-size: 20px;
+ background-color: #555;
+ opacity: 0.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;
- }
+.fade-enter {
+ opacity: 0;
+}
+.fade-enter-active {
+ transition: opacity 0.5s;
+}
+.fade-leave-to {
+ opacity: 0;
+}
+.fade-leave-active {
+ transition: opacity 3s;
+}
+.canvasDiv .el-loading-mask {
+ z-index: 1000 !important;
+}
</style>
diff --git a/src/components/wasmPlayer/wasm/player.js b/src/components/wasmPlayer/wasm/player.js
index 307117f..787e02c 100644
--- a/src/components/wasmPlayer/wasm/player.js
+++ b/src/components/wasmPlayer/wasm/player.js
@@ -1,5 +1,5 @@
-import { PCMPlayer } from './pcm-player'
-import { WebGLPlayer } from './webgl'
+import { PCMPlayer } from "./pcm-player"
+import { WebGLPlayer } from "./webgl"
export function Player() {
this.hPlayer = 0
@@ -10,7 +10,7 @@
this.timeLabel = null
this.timeTrack = null
this.CurPos = 0
- this.displayDuration = '00:00:00'
+ this.displayDuration = "00:00:00"
this.pcmPlayer = null
this.webglPlayer = null
@@ -24,14 +24,7 @@
}
}
-Player.prototype.play = function(
- url,
- canvas,
- isStream,
- timeTrack,
- timeLabel,
- payload
-) {
+Player.prototype.play = function(url, canvas, isStream, timeTrack, timeLabel, payload) {
if (this.hPlayer != 0) return
this.MediaName = url
@@ -48,50 +41,48 @@
This.seek(This.timeTrack.value)
}
- this.TurboWorker = new Worker('/libs/wasmPlayer/turbo.js')
+ this.TurboWorker = new Worker("/libs/wasmPlayer/turbo.js")
this.hPlayer = 1
this.PlayOrPause = 1
this.TurboWorker.onmessage = function(evt) {
switch (evt.data.command) {
- case 'initialized': {
+ case "initialized": {
This.TurboWorker.postMessage({
- command: 'play',
+ command: "play",
media_name: url,
other: isStream,
- payload: payload,
+ payload: payload
})
break
}
- case 'create_video': {
+ case "create_video": {
This.VideoParam = evt.data.param //{duration:xxx,width:xxx,height:xxx}
This.webglPlayer = new WebGLPlayer(This.canvas)
if (This.timeTrack) {
This.timeTrack.min = 0
This.timeTrack.max = This.VideoParam.duration
This.timeTrack.value = 0
- This.displayDuration = This.formatTime(
- This.VideoParam.duration / 1000
- )
+ This.displayDuration = This.formatTime(This.VideoParam.duration / 1000)
}
This.startTrackTimer()
This.statusCallback(0)
break
}
- case 'create_audio': {
+ case "create_audio": {
This.AudioParam = evt.data.param //{channel:Channel,sample_rate:SampleRate}
This.pcmPlayer = new PCMPlayer({
- encoding: '16bitInt',
+ encoding: "16bitInt",
channels: This.AudioParam.channel,
sampleRate: This.AudioParam.sample_rate,
- flushingTime: 5000,
+ flushingTime: 5000
})
This.statusCallback(1)
break
}
- case 'deliver_video': {
+ case "deliver_video": {
if (!This.isStream && This.preload && This.preloadFlag == 0) {
This.preloadFlag = 1
This.pause()
@@ -100,24 +91,20 @@
//sample:{time_stamp:xxx,data:xxx}
This.CurPos = evt.data.sample.time_stamp
- This.webglPlayer.renderFrame(
- evt.data.sample.buf,
- This.VideoParam.width,
- This.VideoParam.height
- )
+ This.webglPlayer.renderFrame(evt.data.sample.buf, This.VideoParam.width, This.VideoParam.height)
break
}
- case 'deliver_audio': {
+ case "deliver_audio": {
//sample:{time_stamp:xxx,data:xxx}
This.pcmPlayer.play(evt.data.sample.buf)
break
}
- case 'play_failed': {
+ case "play_failed": {
This.statusCallback(-1)
This.stop()
break
}
- case 'play_end': {
+ case "play_end": {
if (This.loop) {
This.seek(0)
}
@@ -133,19 +120,19 @@
Player.prototype.pause = function() {
if (this.hPlayer == 0 || this.PlayOrPause == 0) return
this.PlayOrPause = 0
- this.TurboWorker.postMessage({ command: 'pause' })
+ this.TurboWorker.postMessage({ command: "pause" })
}
Player.prototype.resume = function() {
if (this.hPlayer == 0 || this.PlayOrPause == 1) return
this.PlayOrPause = 1
- this.TurboWorker.postMessage({ command: 'resume' })
+ this.TurboWorker.postMessage({ command: "resume" })
}
Player.prototype.stop = function() {
if (this.hPlayer == 0) return
this.hPlayer = 0
- this.TurboWorker.postMessage({ command: 'stop' })
+ this.TurboWorker.postMessage({ command: "stop" })
this.stopTrackTimer()
if (this.pcmPlayer) {
this.pcmPlayer.destroy()
@@ -156,15 +143,15 @@
Player.prototype.seek = function(ms) {
if (this.hPlayer == 0) return
- this.TurboWorker.postMessage({ command: 'seek', pos: ms })
+ this.TurboWorker.postMessage({ command: "seek", pos: ms })
if (this.pcmPlayer != null) {
this.pcmPlayer.destroy()
this.pcmPlayer = new PCMPlayer({
- encoding: '16bitInt',
+ encoding: "16bitInt",
channels: this.AudioParam.channel,
sampleRate: this.AudioParam.sample_rate,
- flushingTime: 5000,
+ flushingTime: 5000
})
}
}
@@ -177,15 +164,12 @@
if (this.webglPlayer) this.webglPlayer.exitfullscreen()
}
-
Player.prototype.startTrackTimer = function() {
var This = this
this.trackTimer = setInterval(function() {
if (This.timeTrack) This.timeTrack.value = This.CurPos
- if (This.timeLabel)
- This.timeLabel.innerHTML =
- This.formatTime(This.CurPos / 1000) + '/' + This.displayDuration
+ if (This.timeLabel) This.timeLabel.innerHTML = This.formatTime(This.CurPos / 1000) + "/" + This.displayDuration
}, 500)
}
@@ -197,16 +181,9 @@
}
Player.prototype.formatTime = function(s) {
- var h =
- Math.floor(s / 3600) < 10
- ? '0' + Math.floor(s / 3600)
- : Math.floor(s / 3600)
- var m =
- Math.floor((s / 60) % 60) < 10
- ? '0' + Math.floor((s / 60) % 60)
- : Math.floor((s / 60) % 60)
- var s =
- Math.floor(s % 60) < 10 ? '0' + Math.floor(s % 60) : Math.floor(s % 60)
+ var h = Math.floor(s / 3600) < 10 ? "0" + Math.floor(s / 3600) : Math.floor(s / 3600)
+ var m = Math.floor((s / 60) % 60) < 10 ? "0" + Math.floor((s / 60) % 60) : Math.floor((s / 60) % 60)
+ var s = Math.floor(s % 60) < 10 ? "0" + Math.floor(s % 60) : Math.floor(s % 60)
- return h + ':' + m + ':' + s
+ return h + ":" + m + ":" + s
}
diff --git a/src/pages/cameraVideo/index/Video.vue b/src/pages/cameraVideo/index/Video.vue
index 1becda1..9f4f0f3 100644
--- a/src/pages/cameraVideo/index/Video.vue
+++ b/src/pages/cameraVideo/index/Video.vue
@@ -5,19 +5,24 @@
<div class="monitoring-video" ref="monitorVideo">
<div class="monitoring-video-guid">
<span
- :class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
+ :class="guid === 1 ? 'iconfont icongongge1 activegongge' : 'iconfont icongongge1'"
@click="setGuid(1)"
></span>
<span
- :class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
+ :class="guid === 2 ? 'iconfont icongongge activegongge' : 'iconfont icongongge'"
@click="setGuid(2)"
></span>
<span
- :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
+ :class="guid === 3 ? 'iconfont icongongge2 activegongge' : 'iconfont icongongge2'"
@click="setGuid(3)"
></span>
- <el-tooltip v-if="TreeDataPool.selectedNode.id" :content="`${showArea?'闅愯棌鍖哄煙':'鏌ョ湅鍖哄煙'}`" placement="bottom" popper-class="atooltip">
- <span :class="showArea?'activegongge':''" class="iconfont iconquyu" @click="toggleShowArea"></span>
+ <el-tooltip
+ v-if="TreeDataPool.selectedNode.id"
+ :content="`${showArea ? '闅愯棌鍖哄煙' : '鏌ョ湅鍖哄煙'}`"
+ placement="bottom"
+ popper-class="atooltip"
+ >
+ <span :class="showArea ? 'activegongge' : ''" class="iconfont iconquyu" @click="toggleShowArea"></span>
</el-tooltip>
<!-- <span
v-if="TreeDataPool.selectedNode.id"
@@ -37,10 +42,7 @@
</el-tooltip>-->
</div>
<div class="fixedRatioBox">
- <div
- :class="guid === 1 ? 'video-main-box' : 'video-main-box-side'"
- v-if="visibilityState"
- >
+ <div :class="guid === 1 ? 'video-main-box' : 'video-main-box-side'" v-if="visibilityState">
<VideoItem
v-for="(item, index) in TreeDataPool.videoArr"
:key="index"
@@ -65,15 +67,14 @@
<video-photo ref="photoview" @addToBase="toAdd"></video-photo>
</div>
</div>
-
</div>
</template>
<script>
-import VideoItem from "../components/VideoItem";
-import VideoTask from "../components/VideoTask";
-import VideoPhoto from "../components/VideoPhoto";
-import { getCameraPlayList } from "@/api/trackCamera";
+import VideoItem from "../components/VideoItem"
+import VideoTask from "../components/VideoTask"
+import VideoPhoto from "../components/VideoPhoto"
+import { getCameraPlayList } from "@/api/trackCamera"
export default {
name: "Video",
@@ -82,7 +83,7 @@
VideoTask,
VideoPhoto
},
- data () {
+ data() {
return {
guid: 1,
center: "",
@@ -94,74 +95,62 @@
tracePubUrl: `${location.protocol === "https" ? "wss" : "ws"}://${location.host}/track`,
websocket: null,
visibilityState: true,
- showArea: false,
- };
+ showArea: false
+ }
},
- created () {
- console.log("befor created")
- // this.TreeDataPool.clean();
- // this.TreeDataPool.fetchTreeData();
- // this.guid = sessionStorage.guid ? Number(sessionStorage.guid) : this.guid;
+ created() {
this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndex
? Number(sessionStorage.activeIndex)
- : this.TreeDataPool.activeVideoIndex;
- this.getActiveIndex();
- this.TreeDataPool.readonly = true;
- this.TreeDataPool.gbReadonly = true;
- this.TreeDataPool.multiple = false;
-
- console.log("created")
+ : this.TreeDataPool.activeVideoIndex
+ this.getActiveIndex()
+ this.TreeDataPool.readonly = true
+ this.TreeDataPool.gbReadonly = true
+ this.TreeDataPool.multiple = false
},
- mounted () {
- document.addEventListener("visibilitychange", this.visibilitychange, false);
+ mounted() {
+ document.addEventListener("visibilitychange", this.visibilitychange, false)
this.$nextTick(() => {
- window.addEventListener("resize", this.resizeMonitorTask);
+ window.addEventListener("resize", this.resizeMonitorTask)
//this.getRightWidth();
- this.resizeMonitorTask();
+ this.resizeMonitorTask()
})
- this.getCenter();
- this.blackAngWhite();
- this.VideoPhotoData.queryTagList();
-
- let list = this.TreeDataPool.localVedioList.filter(i => {
- return i.progress == 100;
- })
- // console.log(list, '宸插畬鎴愮殑鏈湴瑙嗛', this.TreeDataPool.localVedioList)
- this.TreeDataPool.localVedioList = list;
+ this.getCenter()
+ this.blackAngWhite()
+ this.VideoPhotoData.queryTagList()
},
- beforeDestroy () {
- window.removeEventListener("resize", this.getRightWidth);
- this.CardList.details = [];
- window.clearInterval(this.trackTimer);
+ beforeDestroy() {
+ window.removeEventListener("resize", this.getRightWidth)
+ this.CardList.details = []
+ window.clearInterval(this.trackTimer)
if (this.websocket) {
- this.websocket.close();
+ this.websocket.close()
}
},
watch: {
- "TreeDataPool.videoArr": function (newArry) {
- console.log('newArry', newArry)
- const cameras = this.filterNodes(newArry);
- this.getActiveIndex();
- this.$refs.taskview.showTasks(cameras);
- this.$refs.photoview.showCapture(cameras);
+ "TreeDataPool.videoArr": function(newArry) {
+ console.log("newArry", newArry)
+ const cameras = this.filterNodes(newArry)
+ this.getActiveIndex()
+ this.$refs.taskview.showTasks(cameras)
+ this.$refs.photoview.showCapture(cameras)
},
- "VideoPhotoData.selectBlacks": function (value) {
- this.blackAngWhite();
+ "VideoPhotoData.selectBlacks": function(value) {
+ this.blackAngWhite()
},
- "VideoPhotoData.selectWhites": function (value) {
- this.blackAngWhite();
+ "VideoPhotoData.selectWhites": function(value) {
+ this.blackAngWhite()
},
- "TreeDataPool.showTreeBox" (value) {
- this.getRightWidth();
+ "TreeDataPool.showTreeBox"(value) {
+ this.getRightWidth()
}
},
methods: {
- handleTrack () {
- this.track = !this.track;
+ handleTrack() {
+ this.track = !this.track
if (!this.track) {
- window.clearInterval(this.trackTimer);
- this.websocket.close();
- return;
+ window.clearInterval(this.trackTimer)
+ this.websocket.close()
+ return
}
this.$notify({
@@ -175,16 +164,16 @@
if (!useWebSocket) {
this.trackTimer = window.setInterval(() => {
_this.tracking()
- }, 5 * 1000);
+ }, 5 * 1000)
} else {
this.initTrackWebsocket()
this.trackTimer = window.setInterval(() => {
_this.videoItemMonitor()
- }, 1 * 1000);
+ }, 1 * 1000)
}
},
- videoItemMonitor () {
- this.websocket.send("ping");
+ videoItemMonitor() {
+ this.websocket.send("ping")
let cache = this.traceCache
// 閬嶅巻褰撴湡鎾斁鐨勬憚鍍忔満, 鎸夌閫掑噺鎽勫儚鏈轰汉鍛樺瓨鍦ㄦ椂闂达紝涓�0鏃跺垹闄わ紝鎽勫儚鏈轰汉鍛樹负绌烘椂鍏抽棴
@@ -196,18 +185,17 @@
for (var person in cache[camera]) {
cache[camera][person]--
if (cache[camera][person] < 0) {
- delete (cache[camera][person])
+ delete cache[camera][person]
}
}
-
} else {
- delete (cache[camera])
+ delete cache[camera]
this.closePlayer(camera)
}
}
},
- initTrackWebsocket () {
- if (typeof (WebSocket) === "undefined") {
+ initTrackWebsocket() {
+ if (typeof WebSocket === "undefined") {
alert("鎮ㄧ殑娴忚鍣ㄤ笉鏀寔socket")
} else {
// 瀹炰緥鍖杝ocket
@@ -217,21 +205,21 @@
this.websocket.onmessage = this.recvieTrackMessage
}
},
- websocketonopen () { //杩炴帴寤虹珛涔嬪悗鎵цsend鏂规硶鍙戦�佹暟鎹�
+ websocketonopen() {
+ //杩炴帴寤虹珛涔嬪悗鎵цsend鏂规硶鍙戦�佹暟鎹�
this.websocket.send("sub")
},
- tracking () {
- getCameraPlayList().then(data => {
+ tracking() {
+ getCameraPlayList().then((data) => {
if (data && data.length) {
- data.forEach(ins => {
+ data.forEach((ins) => {
let newCamera = this.TreeDataPool.getCameraInfoById(ins.NewCameraId)
if (!newCamera) {
- console.log("鏈煡鎵惧埌鎽勫儚鏈猴細", ins.NewCameraId);
+ console.log("鏈煡鎵惧埌鎽勫儚鏈猴細", ins.NewCameraId)
return
}
if (ins.IsNew) {
this.newPlayerInViewBox(newCamera)
-
} else {
this.replacePlayer(newCamera, ins.OldCameraId)
}
@@ -239,7 +227,7 @@
}
})
},
- recvieTrackMessage (e) {
+ recvieTrackMessage(e) {
let dataJson = JSON.parse(e.data)
let cache = this.traceCache
let camera = dataJson.camera
@@ -265,12 +253,12 @@
// 鎵惧埌涓婁竴涓憚鍍忔満, 鍒ゆ柇鎽勫儚鏈洪噷鏄惁杩樻湁鍏朵粬浜�, 鏈�:鏂板紑鎾斁鍣� 娌℃湁:鍒囨崲
console.log("last camera:", cam, Object.keys(cache[cam]).length)
if (Object.keys(cache[cam]).length > 2) {
- delete (cache[cam][person])
+ delete cache[cam][person]
this.newPlayerInViewBox(camera)
return
} else {
this.replacePlayer(camera, cam)
- delete (cache[cam])
+ delete cache[cam]
return
}
}
@@ -279,19 +267,16 @@
// 鏈彂鐜版挱鏀捐褰�
this.newPlayerInViewBox(camera)
},
- newPlayerInViewBox (id) {
+ newPlayerInViewBox(id) {
// 鏂板鎾斁绐楀彛
let camera = this.TreeDataPool.getCameraInfoById(id)
- let emptyIndex = -1;
- let exist = false;
+ let emptyIndex = -1
+ let exist = false
for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
// eslint-disable-next-line
- if (
- this.TreeDataPool.videoArr[i] === "" ||
- this.TreeDataPool.videoArr[i] === undefined
- ) {
+ if (this.TreeDataPool.videoArr[i] === "" || this.TreeDataPool.videoArr[i] === undefined) {
if (emptyIndex === -1) {
- emptyIndex = i;
+ emptyIndex = i
}
} else {
if (this.TreeDataPool.videoArr[i].id === camera.id) {
@@ -300,10 +285,10 @@
}
}
if (!exist && emptyIndex !== -1) {
- this.TreeDataPool.setVideoArr(emptyIndex, camera, this);
+ this.TreeDataPool.setVideoArr(emptyIndex, camera, this)
}
},
- replacePlayer (id, oldCameraId) {
+ replacePlayer(id, oldCameraId) {
let camera = this.TreeDataPool.getCameraInfoById(id)
// console.log("update:", camera.name)
// 鏇挎崲鎾斁鍣�
@@ -312,9 +297,10 @@
if (
this.TreeDataPool.videoArr[i] &&
this.TreeDataPool.videoArr[i] !== undefined &&
- this.TreeDataPool.videoArr[i] !== "") {
+ this.TreeDataPool.videoArr[i] !== ""
+ ) {
if (this.TreeDataPool.videoArr[i].id === oldCameraId) {
- this.TreeDataPool.setVideoArr(i, camera, this);
+ this.TreeDataPool.setVideoArr(i, camera, this)
return true
}
}
@@ -322,102 +308,103 @@
return false
},
- closePlayer (id) {
+ closePlayer(id) {
for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
// eslint-disable-next-line
if (
this.TreeDataPool.videoArr[i] &&
this.TreeDataPool.videoArr[i] !== undefined &&
- this.TreeDataPool.videoArr[i] !== "") {
+ this.TreeDataPool.videoArr[i] !== ""
+ ) {
if (this.TreeDataPool.videoArr[i].id === id) {
- this.TreeDataPool.setVideoArr(i, undefined, this);
+ this.TreeDataPool.setVideoArr(i, undefined, this)
return true
}
}
}
},
- visibilitychange () {
+ visibilitychange() {
switch (document.visibilityState) {
case "hidden":
- this.visibilityState = false;
- break;
+ this.visibilityState = false
+ break
case "visible":
- this.visibilityState = true;
- break;
+ this.visibilityState = true
+ break
}
},
- blackAngWhite () {
+ blackAngWhite() {
if (this.VideoPhotoData.selectBlacks.length > 0) {
for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
//this.VideoPhotoData.whiteList[i].disabled = true
- this.$set(this.VideoPhotoData.whiteList[i], 'disabled', true)
+ this.$set(this.VideoPhotoData.whiteList[i], "disabled", true)
}
}
if (this.VideoPhotoData.selectBlacks.length == 0) {
for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
//this.VideoPhotoData.whiteList[i].disabled = false
- this.$set(this.VideoPhotoData.whiteList[i], 'disabled', false)
+ this.$set(this.VideoPhotoData.whiteList[i], "disabled", false)
}
}
if (this.VideoPhotoData.selectWhites.length > 0) {
for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
- // this.VideoPhotoData.blackList[i].disabled = true
- this.$set(this.VideoPhotoData.blackList[i], 'disabled', true)
+ // this.VideoPhotoData.blackList[i].disabled = true
+ this.$set(this.VideoPhotoData.blackList[i], "disabled", true)
}
}
if (this.VideoPhotoData.selectWhites.length == 0) {
for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
- //this.VideoPhotoData.blackList[i].disabled = false
- this.$set(this.VideoPhotoData.blackList[i], 'disabled', false)
+ //this.VideoPhotoData.blackList[i].disabled = false
+ this.$set(this.VideoPhotoData.blackList[i], "disabled", false)
}
}
},
- closeWindow (index) {
- this.CardList.addBaseList.splice(index, 1);
+ closeWindow(index) {
+ this.CardList.addBaseList.splice(index, 1)
},
- getVideoHeight () {
- let h = this.$refs.monitorVideo.offsetHeight;
- this.$refs.monitorTask.style.height = h + 'px';
+ getVideoHeight() {
+ let h = this.$refs.monitorVideo.offsetHeight
+ this.$refs.monitorTask.style.height = h + "px"
},
- resizeMonitorTask () {
- this.getRightWidth();
- this.getVideoHeight();
+ resizeMonitorTask() {
+ this.getRightWidth()
+ this.getVideoHeight()
},
- getRightWidth () {
- let w = this.$refs.videoRight.offsetWidth;
+ getRightWidth() {
+ let w = this.$refs.videoRight.offsetWidth
// console.log("w鏄細", w,this.$refs.monitorVideo.offsetWidth);
- this.$refs.monitorTask.style.width = (w - this.$refs.monitorVideo.offsetWidth - 40) + 'px'
+ this.$refs.monitorTask.style.width = w - this.$refs.monitorVideo.offsetWidth - 40 + "px"
// console.log("鍙充晶浠诲姟鐨勫搴︼細", this.$refs.monitorTask.style.width)
},
- filterNodes (selectArry) {
- let nodes = [];
- selectArry.forEach(i => {
+ filterNodes(selectArry) {
+ let nodes = []
+ selectArry.forEach((i) => {
if (i && nodes.indexOf(i.id) < 0) {
- nodes.push(i.id);
+ nodes.push(i.id)
}
- });
- return nodes;
+ })
+ return nodes
},
- videoItemClick (index) {
- this.TreeDataPool.activeVideoIndex = index;
- this.TreeDataPool.activeForceChoose = true;
+ videoItemClick(index) {
+ this.TreeDataPool.activeVideoIndex = index
+ this.TreeDataPool.activeForceChoose = true
},
- toAdd (item) {
+ toAdd(item) {
this.CardList.addBaseList.push(item)
},
- getCenter () {
+ getCenter() {
this.center = {
x: document.documentElement.clientWidth / 2 - 250,
y: document.documentElement.clientHeight / 2 - 200
- };
+ }
},
- resizeWidth (w) {
- this.defaultWidth = w;
+ resizeWidth(w) {
+ this.defaultWidth = w
},
- resizeHeight (h) {
- this.defaultHeight = h;
+ resizeHeight(h) {
+ this.defaultHeight = h
},
- saveAddBase (item, index) {
+ saveAddBase(item, index) {
if (this.VideoPhotoData.selectBlacks.length === 0 && this.VideoPhotoData.selectWhites.length === 0) {
this.$notify({
title: "娉ㄦ剰",
@@ -427,7 +414,7 @@
return
}
let res = this.VideoPhotoData.addBase(item)
- res.then(data => {
+ res.then((data) => {
console.log("then", data)
if (data.success) {
this.$notify({
@@ -442,77 +429,65 @@
type: "error"
})
}
- this.CardList.addBaseList.splice(index, 1);
+ this.CardList.addBaseList.splice(index, 1)
this.VideoPhotoData.selectBlacks = []
this.VideoPhotoData.selectWhites = []
})
},
- getActiveIndex () {
- this.TreeDataPool.videoArr.length = Math.pow(this.guid, 2);
- let nullVideoIndex = "";
+ getActiveIndex() {
+ this.TreeDataPool.videoArr.length = Math.pow(this.guid, 2)
+ let nullVideoIndex = ""
for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
// eslint-disable-next-line
- if (
- this.TreeDataPool.videoArr[i] === "" ||
- this.TreeDataPool.videoArr[i] === undefined
- ) {
- nullVideoIndex = i;
+ if (this.TreeDataPool.videoArr[i] === "" || this.TreeDataPool.videoArr[i] === undefined) {
+ nullVideoIndex = i
} else {
- nullVideoIndex = "";
+ nullVideoIndex = ""
}
}
if (
this.TreeDataPool.activeVideoIndex !== "" &&
- this.TreeDataPool.activeVideoIndex <
- this.TreeDataPool.videoArr.length - 1
+ this.TreeDataPool.activeVideoIndex < this.TreeDataPool.videoArr.length - 1
) {
- return this.TreeDataPool.activeVideoIndex;
+ return this.TreeDataPool.activeVideoIndex
} else {
if (nullVideoIndex === "") {
- this.TreeDataPool.activeVideoIndex =
- this.TreeDataPool.videoArr.length - 1;
+ this.TreeDataPool.activeVideoIndex = this.TreeDataPool.videoArr.length - 1
} else {
- this.TreeDataPool.activeVideoIndex = nullVideoIndex;
+ this.TreeDataPool.activeVideoIndex = nullVideoIndex
}
}
},
- setGuid (value) {
- clearTimeout(this.trackTimer);
+ setGuid(value) {
+ clearTimeout(this.trackTimer)
if (value < this.guid && this.TreeDataPool.activeVideoIndex > value) {
// eslint-disable-next-line
- for (
- let i = this.TreeDataPool.activeVideoIndex - 1;
- i < this.TreeDataPool.videoArr.length;
- i++
- ) {
+ for (let i = this.TreeDataPool.activeVideoIndex - 1; i < this.TreeDataPool.videoArr.length; i++) {
// eslint-disable-next-line
- if (
- this.TreeDataPool.videoArr[i] &&
- this.TreeDataPool.videoArr[i]["isPlaying"]
- ) {
- this.TreeDataPool.videoArr[i]["isPlaying"] = false;
+ if (this.TreeDataPool.videoArr[i] && this.TreeDataPool.videoArr[i]["isPlaying"]) {
+ this.TreeDataPool.videoArr[i]["isPlaying"] = false
}
}
}
- this.guid = value;
- sessionStorage.guid = this.guid;
- sessionStorage.activeIndex = this.TreeDataPool.activeVideoIndex;
- this.getActiveIndex();
+ this.guid = value
+ sessionStorage.guid = this.guid
+ sessionStorage.activeIndex = this.TreeDataPool.activeVideoIndex
+ this.getActiveIndex()
},
- toggleShowArea () {
- this.showArea = !this.showArea;
+ toggleShowArea() {
+ this.showArea = !this.showArea
}
},
- destroyed () {
- window.removeEventListener("resize", this.getRightWidth);
- this.CardList.details = [];
- this.CardList.addBaseList = [];
- this.VideoPhotoData.selectBlacks = [];
- this.VideoPhotoData.selectWhites = [];
+ destroyed() {
+ window.removeEventListener("resize", this.getRightWidth)
+ this.CardList.details = []
+ this.CardList.addBaseList = []
+ this.VideoPhotoData.selectBlacks = []
+ this.VideoPhotoData.selectWhites = []
//this.TreeDataPool.treeActiveName = "camera";
}
-};
+}
</script>
<style lang="scss">
--
Gitblit v1.8.0