Skip to content

W
web-project
Commit 972a7c56 authored by 张伯涛's avatar 张伯涛
Browse files
Options

大屏问题修改

parent 492cc354
Hide whitespace changes
Inline Side-by-side
Showing with 113 additions and 86 deletions
src/components/screenDisplay.vue
View file @ 972a7c56
...@@ -508,16 +508,20 @@ import AMapLoader from "@amap/amap-jsapi-loader"; ...@@ -508,16 +508,20 @@ import AMapLoader from "@amap/amap-jsapi-loader";
</vue3ScrollSeamless> </vue3ScrollSeamless>
</div> </div>
</div> </div>
<div class="videoInfo" v-show="videoOpen"> <div v-show="videoOpen">
<div class="alarmInfo_header"> <div class="thirdLeftLayerDialog">
<div class="alarmInfo_title">{{stationName}}</div> <div class="videoInfo" ref="myDialogContainer">
<div v-if="showVideoClose === true" class="alarmInfo_close" @click="handleVideoClose">X</div> <div class="alarmInfo_header">
</div> <div class="alarmInfo_title">{{stationName}}</div>
<div v-if="videoAllLoading" class="videoLoading-overlayAll"> <div v-if="showVideoClose === true" class="alarmInfo_close" @click="handleVideoClose">X</div>
<div class="videoLoading-spinner"></div> </div>
<p> 视频加载中，请稍后......</p> <div v-if="videoAllLoading" class="videoLoading-overlayAll">
<div class="videoLoading-spinner"></div>
<p> 视频加载中，请稍后......</p>
</div>
<video-components-two @initSuccessAll="handleInitSuccessAll" :divWidth="divDialogWidth" :divHeight="divDialogHeight" :queryParams="queryParamsAll" :stopParams="stopParamsAll"/>
</div>
</div> </div>
<video-components-two @initSuccessAll="handleInitSuccessAll" :queryParams="queryParamsAll" :stopParams="stopParamsAll"/>
</div> </div>
<div class="alarmInfo" v-if="open"> <div class="alarmInfo" v-if="open">
<div class="alarmInfo_header"> <div class="alarmInfo_header">
...@@ -3130,12 +3134,19 @@ export default defineComponent({ ...@@ -3130,12 +3134,19 @@ export default defineComponent({
this.divWidth = container.offsetWidth *0.9; // 获取元素的宽度，包括元素的padding，不包括border、margin和滚动条 this.divWidth = container.offsetWidth *0.9; // 获取元素的宽度，包括元素的padding，不包括border、margin和滚动条
this.divHeight = container.offsetHeight *0.8; // 获取元素的宽度，包括元素的padding，不包括border、margin和滚动条 this.divHeight = container.offsetHeight *0.8; // 获取元素的宽度，包括元素的padding，不包括border、margin和滚动条
}, },
getDivDialogWidth() {
console.log('22222222222222222222222222222222222222',window.innerWidth)
console.log('22222222222222222222222222222222222222',window.innerHeight)
this.divDialogWidth = window.innerWidth *0.9; // 获取元素的宽度，包括元素的padding，不包括border、margin和滚动条
this.divDialogHeight = window.innerHeight *0.8; // 获取元素的宽度，包括元素的padding，不包括border、margin和滚动条
},
// 更多视频 // 更多视频
moreVideo() { moreVideo() {
this.videoOpen = true this.videoOpen = true
this.videoAllLoading = true this.videoAllLoading = true
this.queryParams = '' this.queryParams = ''
this.stopParams += 1 this.stopParams += 1
this.getDivDialogWidth()
this.queryParamsAll = JSON.stringify(this.VideoInfo.playVideoList) this.queryParamsAll = JSON.stringify(this.VideoInfo.playVideoList)
}, },
// 关闭更多视频弹窗 // 关闭更多视频弹窗
...@@ -4386,6 +4397,17 @@ export default defineComponent({ ...@@ -4386,6 +4397,17 @@ export default defineComponent({
bottom: 5px; bottom: 5px;
/*border: rgba(129, 210, 230, 0.5) solid 1px;*/ /*border: rgba(129, 210, 230, 0.5) solid 1px;*/
} }
.thirdLeftLayerDialog{
z-index: 11;
position: absolute;
width: 100%;
height: 100%;
/* background: linear-gradient(to bottom, rgba(29, 70, 128, 0.5), rgba(29, 70, 128, 0.9), rgba(29, 70, 128, 0.5)); */
/*background: linear-gradient(318deg,#1d4680 0%, #0d174c);*/
top: 5px;
left: 5px;
bottom: 5px;
}
.noVideoData{ .noVideoData{
color: white; color: white;
text-align: center; text-align: center;
......
src/components/videoComponentsTwo.vue
View file @ 972a7c56
<template> <template>
<!-- <el-card>--> <!-- <el-card>-->
<!-- <div class="div-dropdown text-center">--> <!-- <div class="div-dropdown text-center">-->
<!-- <el-row>--> <!-- <el-row>-->
<!-- <el-col :span="7">--> <!-- <el-col :span="7">-->
<!-- <span>换热站&nbsp;:&nbsp;</span>--> <!-- <span>换热站&nbsp;:&nbsp;</span>-->
<!-- <el-cascader :options="VideoInfo.selectOptions" v-model="VideoInfo.value" :props="props"--> <!-- <el-cascader :options="VideoInfo.selectOptions" v-model="VideoInfo.value" :props="props"-->
<!-- collapse-tags clearable :show-all-levels="false" filterable placeholder="请选择" style=""--> <!-- collapse-tags clearable :show-all-levels="false" filterable placeholder="请选择" style=""-->
<!-- :change="getVideoFromVideoList(VideoInfo.value)" @visible-change="visibleCascader" />--> <!-- :change="getVideoFromVideoList(VideoInfo.value)" @visible-change="visibleCascader" />-->
<!-- </el-col>--> <!-- </el-col>-->
<!-- <el-col :span="10">--> <!-- <el-col :span="10">-->
<!-- </el-col>--> <!-- </el-col>-->
<!-- <el-col :span="7">--> <!-- <el-col :span="7">-->
<!-- <el-row>--> <!-- <el-row>-->
<!-- <el-col :span="6">--> <!-- <el-col :span="6">-->
<!-- </el-col>--> <!-- </el-col>-->
<!-- <el-col :span="18">--> <!-- <el-col :span="18">-->
<!-- <el-button id="startPlay" class="el-button-button" type="primary" :span="6">--> <!-- <el-button id="startPlay" class="el-button-button" type="primary" :span="6">-->
<!-- 显示视频</el-button>--> <!-- 显示视频</el-button>-->
<!-- <el-button id="stopPlay" class="el-button-button" type="primary" :span="6"--> <!-- <el-button id="stopPlay" class="el-button-button" type="primary" :span="6"-->
<!-- @click="autoColBoxShow = !autoColBoxShow">隐藏视频</el-button>--> <!-- @click="autoColBoxShow = !autoColBoxShow">隐藏视频</el-button>-->
<!-- <el-button id="down" class="el-button-button" type="primary" :span="6"--> <!-- <el-button id="down" class="el-button-button" type="primary" :span="6"-->
<!-- @click="down">下载插件</el-button>--> <!-- @click="down">下载插件</el-button>-->
<!-- </el-col>--> <!-- </el-col>-->
<!-- </el-row>--> <!-- </el-row>-->
<!-- </el-col>--> <!-- </el-col>-->
<!-- </el-row>--> <!-- </el-row>-->
<!-- </div>--> <!-- </div>-->
<!-- &lt;!&ndash; <div>--> <!-- &lt;!&ndash; <div>-->
<!-- 点击此处前往海康平台下载视频播放插件--> <!-- 点击此处前往海康平台下载视频播放插件-->
<!--</div> &ndash;&gt;--> <!--</div> &ndash;&gt;-->
<!-- </el-card>--> <!-- </el-card>-->
<div class="videoPlayer" id="playWnd"> <div class="videoPlayerDialog" id="playWndDialog">
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.videoPlayer { .videoPlayerDialog {
margin: 2% 0 0 2%; margin: 2% 0 0 5%;
// width: 1200px; // width: 1200px;
/*播放容器的宽和高设定*/ /*播放容器的宽和高设定*/
...@@ -97,6 +97,14 @@ const pProps = defineProps({ ...@@ -97,6 +97,14 @@ const pProps = defineProps({
type: String, type: String,
required: true, required: true,
}, },
divWidth: {
type: Number,
required: true,
},
divHeight: {
type: Number,
required: true,
},
stopParams: { stopParams: {
type: Number, type: Number,
required: true, required: true,
...@@ -106,9 +114,8 @@ const pProps = defineProps({ ...@@ -106,9 +114,8 @@ const pProps = defineProps({
//声明公用变量 //声明公用变量
var initCount = 0; var initCount = 0;
var pubKey = ''; var pubKey = '';
// var playWnd_width = window.innerWidth - 800; var playWnd_width = pProps.divWidth;
var playWnd_width = window.innerWidth - 200; var playWnd_height = pProps.divHeight;
var playWnd_height = window.innerHeight - 220;
var oWebControl; var oWebControl;
var videoIp="218.69.97.198";; var videoIp="218.69.97.198";;
var videoPort=1443; var videoPort=1443;
...@@ -129,12 +136,7 @@ function down(){ ...@@ -129,12 +136,7 @@ function down(){
window.open(filepath); window.open(filepath);
} }
function resetVideoWidth(){ function resetVideoWidth(){
var menuWidth=localStorage.getItem("tabWidth");
if(!menuWidth || menuWidth ==='' || !Number(menuWidth)){
playWnd_width = window.innerWidth - 200;
}else{
playWnd_width = window.innerWidth - Number(menuWidth);
}
console.log('playVW',playWnd_width); console.log('playVW',playWnd_width);
} }
...@@ -272,17 +274,16 @@ function getVideoFromVideoList(value) { ...@@ -272,17 +274,16 @@ function getVideoFromVideoList(value) {
onUnmounted(() => { onUnmounted(() => {
hidePlay(); hidePlay();
}) })
const emit = defineEmits(['initSuccessAll']) const emit = defineEmits(['initSuccess'])
// 创建播放实例 // 创建播放实例
function initPlugin() { function initPlugin() {
oWebControl = new WebControl({ oWebControl = new WebControl({
szPluginContainer: "playWnd", // 指定容器id szPluginContainer: "playWndDialog", // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值 iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15900, iServicePortEnd: 15900,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: function () { // 创建WebControl实例成功 cbConnectSuccess: function () { // 创建WebControl实例成功
console.log('创建成功2222222222222222') console.log('创建成功')
emit('initSuccessAll')
oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务 oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死 dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
}).then(function () { // 启动插件服务成功 }).then(function () { // 启动插件服务成功
...@@ -290,18 +291,19 @@ function initPlugin() { ...@@ -290,18 +291,19 @@ function initPlugin() {
cbIntegrationCallBack: cbIntegrationCallBack cbIntegrationCallBack: cbIntegrationCallBack
}); });
oWebControl.JS_CreateWnd("playWnd", playWnd_width, playWnd_height).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定 oWebControl.JS_CreateWnd("playWndDialog", pProps.divWidth, pProps.divHeight).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
init(); // 创建播放实例成功后初始化 init(); // 创建播放实例成功后初始化
}); });
}, function () { // 启动插件服务失败 }, function () { // 启动插件服务失败
}); });
//playVideo() //playVideo()
setTimeout(() => playVideoByVideoList(VideoInfo.playVideoList), 2000) setTimeout(() => playVideoByVideoList(VideoInfo.playVideoList), 2000)
setTimeout(() => emit('initSuccessAll'), 1000)
}, },
cbConnectError: function () { // 创建WebControl实例失败 cbConnectError: function () { // 创建WebControl实例失败
console.log('创建失败') console.log('创建失败')
oWebControl = null; oWebControl = null;
$("#playWnd").html("插件未启动，正在尝试启动，请稍候..."); $("#playWndDialog").html("插件未启动，正在尝试启动，请稍候...");
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序 WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
initCount++; initCount++;
if (initCount < 3) { if (initCount < 3) {
...@@ -309,7 +311,7 @@ function initPlugin() { ...@@ -309,7 +311,7 @@ function initPlugin() {
initPlugin(); initPlugin();
}, 3000) }, 3000)
} else { } else {
$("#playWnd").html("插件启动失败，请检查插件是否安装！"); $("#playWndDialog").html("插件启动失败，请检查插件是否安装！");
} }
}, },
cbConnectClose: function (bNormalClose) { cbConnectClose: function (bNormalClose) {
...@@ -317,7 +319,7 @@ function initPlugin() { ...@@ -317,7 +319,7 @@ function initPlugin() {
// JS_Disconnect正常断开：bNormalClose = true // JS_Disconnect正常断开：bNormalClose = true
console.log("cbConnectClose"); console.log("cbConnectClose");
oWebControl = null; oWebControl = null;
$("#playWnd").html("插件未启动，正在尝试启动，请稍候..."); $("#playWndDialog").html("插件未启动，正在尝试启动，请稍候...");
WebControl.JS_WakeUp("VideoWebPlugin://"); WebControl.JS_WakeUp("VideoWebPlugin://");
initCount++; initCount++;
if (initCount < 3) { if (initCount < 3) {
...@@ -325,7 +327,7 @@ function initPlugin() { ...@@ -325,7 +327,7 @@ function initPlugin() {
initPlugin(); initPlugin();
}, 3000) }, 3000)
} else { } else {
$("#playWnd").html("插件启动失败，请检查插件是否安装！"); $("#playWndDialog").html("插件启动失败，请检查插件是否安装！");
} }
} }
}); });
...@@ -402,7 +404,7 @@ function init() { ...@@ -402,7 +404,7 @@ function init() {
buttonIDs: buttonIDs //自定义工具条按钮 buttonIDs: buttonIDs //自定义工具条按钮
}) })
}).then(function (oData) { }).then(function (oData) {
oWebControl.JS_Resize(playWnd_width, playWnd_height); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 oWebControl.JS_Resize(pProps.divWidth, pProps.divHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
}); });
}); });
} }
...@@ -434,7 +436,7 @@ function setEncrypt(value) { ...@@ -434,7 +436,7 @@ function setEncrypt(value) {
$(window).resize(function () { $(window).resize(function () {
resetVideoWidth(); resetVideoWidth();
if (oWebControl != null) { if (oWebControl != null) {
oWebControl.JS_Resize(playWnd_width, playWnd_height); oWebControl.JS_Resize(pProps.divWidth, pProps.divHeight);
setWndCover(); setWndCover();
} }
}); });
...@@ -442,7 +444,7 @@ $(window).resize(function () { ...@@ -442,7 +444,7 @@ $(window).resize(function () {
function resizeVideo() { function resizeVideo() {
resetVideoWidth(); resetVideoWidth();
if (oWebControl != null) { if (oWebControl != null) {
oWebControl.JS_Resize(playWnd_width, playWnd_height); oWebControl.JS_Resize(pProps.divWidth, pProps.divHeight);
setWndCover(); setWndCover();
} }
} }
...@@ -451,7 +453,7 @@ function resizeVideo() { ...@@ -451,7 +453,7 @@ function resizeVideo() {
$(window).scroll(function () { $(window).scroll(function () {
resetVideoWidth(); resetVideoWidth();
if (oWebControl != null) { if (oWebControl != null) {
oWebControl.JS_Resize(playWnd_width, playWnd_height); oWebControl.JS_Resize(pProps.divWidth, pProps.divHeight);
setWndCover(); setWndCover();
} }
}); });
...@@ -460,30 +462,30 @@ $(window).scroll(function () { ...@@ -460,30 +462,30 @@ $(window).scroll(function () {
function setWndCover() { function setWndCover() {
var iWidth = $(window).width(); var iWidth = $(window).width();
var iHeight = $(window).height(); var iHeight = $(window).height();
var oDivRect = $("#playWnd").get(0).getBoundingClientRect(); var oDivRect = $("#playWndDialog").get(0).getBoundingClientRect();
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0; var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0; var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0; var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0; var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
iCoverLeft = (iCoverLeft > playWnd_width) ? playWnd_width : iCoverLeft; iCoverLeft = (iCoverLeft > pProps.divWidth) ? pProps.divWidth : iCoverLeft;
iCoverTop = (iCoverTop > playWnd_height) ? playWnd_height : iCoverTop; iCoverTop = (iCoverTop > pProps.divHeight) ? pProps.divHeight : iCoverTop;
iCoverRight = (iCoverRight > playWnd_width) ? playWnd_width : iCoverRight; iCoverRight = (iCoverRight > pProps.divWidth) ? pProps.divWidth : iCoverRight;
iCoverBottom = (iCoverBottom > playWnd_height) ? playWnd_height : iCoverBottom; iCoverBottom = (iCoverBottom > pProps.divHeight) ? pProps.divHeight : iCoverBottom;
oWebControl.JS_RepairPartWindow(0, 0, playWnd_width + 1, playWnd_height); // 多1个像素点防止还原后边界缺失一个像素条 oWebControl.JS_RepairPartWindow(0, 0, pProps.divWidth + 1, pProps.divHeight); // 多1个像素点防止还原后边界缺失一个像素条
if (iCoverLeft != 0) { if (iCoverLeft != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, playWnd_height); oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, pProps.divHeight);
} }
if (iCoverTop != 0) { if (iCoverTop != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, playWnd_width + 1, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条 oWebControl.JS_CuttingPartWindow(0, 0, pProps.divWidth + 1, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
} }
if (iCoverRight != 0) { if (iCoverRight != 0) {
oWebControl.JS_CuttingPartWindow(playWnd_width - iCoverRight, 0, iCoverRight, playWnd_height); oWebControl.JS_CuttingPartWindow(pProps.divWidth - iCoverRight, 0, iCoverRight, pProps.divHeight);
} }
if (iCoverBottom != 0) { if (iCoverBottom != 0) {
oWebControl.JS_CuttingPartWindow(0, playWnd_height - iCoverBottom, playWnd_width, iCoverBottom); oWebControl.JS_CuttingPartWindow(0, pProps.divHeight - iCoverBottom, pProps.divWidth, iCoverBottom);
} }
} }
...@@ -636,15 +638,18 @@ function playVideotest(cameraIndexCode) { ...@@ -636,15 +638,18 @@ function playVideotest(cameraIndexCode) {
watch( watch(
() => pProps.queryParams, () => pProps.queryParams,
async (newData) => { async (newData) => {
const params = JSON.parse(pProps.queryParams) if(pProps.queryParams) {
// const params = ['31c0d567dd1944d5b4ea3eddf94f740b'] const params = JSON.parse(pProps.queryParams)
if(params && params.length > 0) { // const params = ['31c0d567dd1944d5b4ea3eddf94f740b']
await initIp();//ip if(params && params.length > 0) {
initPlugin(); hidePlay();
showPlay() await initIp();//ip
console.log('params',params) initPlugin();
console.log(' window.innerWidth', window.innerWidth) showPlay()
getVideoFromVideoList(params) getVideoFromVideoList(params)
}
}else {
hidePlay();
} }
} }
) )
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment