Skip to content

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

大屏问题修改

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