VUE父子组件之间的相互调用
父组件：
<template> <!-- 保持与设计稿同样比例，保证页面能完全显示，但是四周可能存在留白 --> <div class="wrapper"> <div class="container"> <div :style="marginStyle"> <div style="position: relative;"> <div class="dashboard-container" style="width: 1920px;height: 1080px;" :style="transformStyle"> <div class="border-container"> <topLayer ref="topLayer" @triggerBrotherMethods="exit"></topLayer> </div> <div class="dataview-container"> <!-- 上半部分 --> <!-- <div style=""> </div> --> <a-row> <!-- 左边部分 --> <a-col :span="14"> <monitorVideo ref="monitorVideo" v-if=suspectNo :suspectNo="suspectNo" :cameras="cameras" ></monitorVideo> </a-col> <!-- 右边部分 --> <a-col :span="10"> <monitorData ref="monitorData" v-if=suspectNo :suspectNo="suspectNo"></monitorData> </a-col> </a-row> <!-- 下半部分 --> <a-row style="height: 40%;"> <a-col :span="6"> <behaviorAnalysis ref="behaviorAnalysis" v-if=suspectNo :suspectNo="suspectNo"></behaviorAnalysis> </a-col> <a-col :span="6"> <sleepAnalysis ref="sleepAnalysis" v-if=suspectNo :suspectNo="suspectNo"></sleepAnalysis> </a-col> <a-col :span="6"> <recentlyAnalysis ref="recentlyAnalysis" v-if=suspectNo :suspectNo="suspectNo"></recentlyAnalysis> </a-col> <a-col :span="6"> <warnMessage ref="warnMessage" v-if=suspectNo :suspectNo="suspectNo"></warnMessage> </a-col> </a-row> </div> </div> </div> </div> </div> </div> </template>
<script>
import {getComputedStyle} from "@/utils/util";
import {debounce} from "lodash";
import topLayer from '@/views/trzhkh/wiseCare/modules/topLayer'
import monitorVideo from '@/views/trzhkh/wiseCare/modules/monitorVideo'
import monitorData from '@/views/trzhkh/wiseCare/modules/monitorData'
import behaviorAnalysis from '@/views/trzhkh/wiseCare/modules/behaviorAnalysis'
import warnMessage from '@/views/trzhkh/wiseCare/modules/warnMessage'
import sleepAnalysis from '@/views/trzhkh/wiseCare/modules/sleepAnalysis'
import recentlyAnalysis from '@/views/trzhkh/wiseCare/modules/recentlyAnalysis'
export default {
name: "wiseCare",
components: {
topLayer,
monitorVideo,
monitorData,
behaviorAnalysis,
warnMessage,
sleepAnalysis,
recentlyAnalysis
},
data() {
return {
scaleX: 1,
scaleY: 1,
marginXHorizontal: 0,
marginYHorizontal: 0,
suspectNo: '',
cameras: ''
};
},
mounted() {
this.init();
this.suspectNo = this.$route.query.suspectNo; //接收参数
this.cameras = this.$route.query.cameras;
var suspectNo = this.suspectNo;
console.log("接受参数留置人员编号11---", this.cameras)
},
computed: {
transformStyle: function() {
return {
transform: `scale(${this.scaleX}, ${this.scaleY}) translate3d(0.001%, 0.001%, 0)`
};
},
marginStyle: function() {
return {
margin: `${this.marginYHorizontal}px ${this.marginXHorizontal}px`
};
}
},
methods: {
// 子组件2中click事件
triggerBrotherMethods() {
// 父组件通过$ref调用子组件1中的事件方法
this.$refs.borther[1].bortherMethods()
},
init() {
this.listenResize();
},
initData() {
this.scaleX = 1;
this.scaleY = 1;
this.marginXHorizontal = 0;
this.marginYHorizontal = 0;
},
initScale() {
this.initData();
// return;
let $container = document.querySelector('.container');
let containerWidth = getComputedStyle($container, 'width').replace("px", "");
let containerHeight = getComputedStyle($container, 'height').replace("px", "");
containerWidth = Number(containerWidth);
containerHeight = Number(containerHeight);
containerWidth = isNaN(containerWidth) ? 0 : containerWidth;
containerHeight = isNaN(containerHeight) ? 0 : containerHeight;
let defaultHeight = 1080;
let defaultWidth = 1920;
// sacle 缩放比例。
let scale = 1;
let scaleY = containerHeight / defaultHeight;
let scaleX = containerWidth / defaultWidth;
if (containerHeight < defaultHeight) {
scale = containerHeight / defaultHeight;
this.scaleX = scaleX;
this.scaleY = scaleY;
this.$bus.$emit('getScale', {
scaleX,
scaleY
});
// console.log("height", scale);
}
// 然后 width
else if (containerWidth < defaultWidth) {
scale = containerWidth / defaultWidth;
this.scaleX = scaleX;
this.scaleY = scaleY;
this.$bus.$emit('getScale', {
scaleX,
scaleY
});
// console.log("width", scale);
} else if (containerHeight > defaultHeight && containerWidth > defaultWidth) {
// let h = containerHeight / defaultHeight;
// let w = containerWidth / defaultWidth;
// scale = w;
this.scaleX = containerWidth / defaultWidth;
this.scaleY = containerHeight / defaultHeight;
this.$bus.$emit('getScale', {
scaleX,
scaleY
});
}
// scale = Math.min.apply(null, [this.scaleY, this.scaleX]);
let marginWidth = defaultWidth * this.scaleX;
if (containerWidth > marginWidth) {
marginWidth = (containerWidth - marginWidth) / 2;
this.marginXHorizontal = marginWidth;
}
let marginHeight = defaultHeight * this.scaleY;
if (containerHeight > marginHeight) {
marginHeight = (containerHeight - marginHeight) / 2;
this.marginYHorizontal = marginHeight;
}
},
listenResize() {
this.initScale();
window.addEventListener('resize', debounce(() => {
this.initScale();
}, 300));
}
},
destroyed() {}
}
</script>
<style lang="less">
@fontColor: #f2b61b;
.wrapper {
position: relative;
height: 100%;
width: 100%;
position: relative;
// background-size: 100% 100%;
}
.container {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.dashboard-container {
position: relative;
user-select: none;
width: 100%;
height: 100%;
transform-origin: 0 0;
transition: all .3s linear;
overflow: hidden;
background: transparent url(~@/assets/images/dataview/dataview-bg.png) center top no-repeat;
background-size: 100% 100%;
}
.top {
position: absolute;
margin-left: 20px;
top: 47px;
width: 1920px;
height: 67px;
/*background: transparent url(~@/assets/border-big.png) center top no-repeat;*/
}
@keyframes jumpLine1 {
0% {
transform: translate(10px, 0px);
}
100% {
transform: translate(190px, 0px);
}
}
@keyframes jumpLine2 {
0% {
transform: translate(0px, 0px);
}
100% {
transform: translate(-180px, 0px);
}
}
@keyframes bounce {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
.dataview-container {
box-sizing: border-box;
margin-top: 110px;
height: calc(100% - 110px);
// display: flex;
// flex-direction: row;
padding: 0 30px;
}
.pannel-title {
padding: 5px 0 0 60px;
color: @fontColor;
font-size: 18px;
}
.content-container {
padding: 30px 20px;
}
.scroll-warp {
overflow: hidden;
}
</style>
子组件1
<template> <div class="monitor-area"> <div class="monitor-area-top">编号:{{bodyAnalysis.suspectNo}}</div> <div class="monitor-content"> <div class="left"> <!-- <div class="information-area" v-for="(item, index) in items"> <div class="information-area-top">{{item.name}}</div> <div class="information-area-bottom">{{item.value}}</div> </div> --> <div class="information-area"> <div class="information-area-top">性别：</div> <div class="information-area-bottom">{{bodyAnalysis.sex}}</div> </div> <div class="information-area"> <div class="information-area-top">既往病史：</div> <div class="information-area-bottom">{{bodyAnalysis.medicalHistory}}</div> </div> <div class="information-area"> <div class="information-area-top">入所日期：</div> <div class="information-area-bottom">{{bodyAnalysis.beginTime}}</div> </div> <div class="information-area"> <div class="information-area-top">已留置：</div> <div class="information-area-bottom">{{bodyAnalysis.beginBetweenDay}}天</div> </div> <div class="information-area"> <div class="information-area-top">职级：</div> <div class="information-area-bottom">{{bodyAnalysis.dutiesLeval}}</div> </div> <div class="information-area"> <div class="information-area-top">当前留置室：</div> <div class="information-area-bottom">{{bodyAnalysis.roomName}}</div> </div> <!-- <div class="information-area"> <div class="information-area-top">已谈话次数：</div> <div class="information-area-bottom">{{bodyAnalysis.talkNum}}次</div> </div> --> <div class="information-area"> <div class="information-area-top">已延期天数：</div> <div class="information-area-bottom">{{bodyAnalysis.timeOutDay}}</div> </div> </div> <!-- 监控视频部分 --> <div class="right"> <div class="monitor-video-area"> <hk-video :cameraIndexCodeProp="devicesCode" ></hk-video> </div> <div class="monitor-video-area"> </div> </div> </div> </div> </template> <script> import { getBodyAnalysis } from '@/api/wiseCare.js' import HkVideo from './hkVideo' import { getAction, postFormAction, postAction} from '@/api/manage' export default { components: { HkVideo }, props: { suspectNo: String, cameras: String }, data() { return { bodyAnalysis: {}, devicesCode: this.cameras } }, computed: {}, created() {}, mounted() { // this.init() this.bodySignAnalysis(); }, methods: { bortherMethods() { // 子组件事件方法 this.$refs.hkVideo.destroyedView() }, //请求体征分析留置对象信息********************************************************、、 async bodySignAnalysis() { this.loading = true; var that = this; var suspectNo= this.suspectNo; const params = { 'suspectNo': suspectNo }; // getAction('/objAnalysis/getLienObjBySuspectNo', params) // .then(res => { // if (res.success) { // let result = res.result || [] // this.bodyAnalysis = result; // console.log("-----请求体征分析------", this.bodyAnalysis); // } // }) // .finally(() => { // this.loading = false // }) try { const res = await getBodyAnalysis(params) if (res.success) { that.bodyAnalysis = res.result; console.log("-----请求体征分析------", res.result); } } catch (e) { this.loading = false } }, }, } </script> <style lang="less"> // 监控区域 .monitor-area { width: 1128px; height: 630px; background-size: 100% 630px; margin-left: 20px; // background-color: green; background-image: url('~@/assets/images/wiseCare/monitor_background.png'); background-repeat: no-repeat; .monitor-area-top { font-size: 32px; padding-left: 5%; font-family: Microsoft YaHei; font-weight: 400; color: #F4C021; line-height: 82px; } .monitor-content { display: flex; height: 700px; // 左边 .left { .information-area { min-width: 130px; min-height: 50px; padding: 12px 10px; padding-left: 15px; font-size: 14px; background-size: 100% 100%; background-repeat: no-repeat; background-image: url('~@/assets/images/wiseCare/behavior_analysis_content_bg.png'); .information-area-top { color: #04EEFE; } .information-area-bottom { color: #21FE04; } } } .information-area:not(:first-child) { margin-top: 10px; } //右边 .right { width: 80%; // background-color: #04EEFE; } .monitor-video-area { margin-left: 20px; // width: 50%; // height: 200px; // background-color: #05347D; } } } </style>
子组件2
<template> <div class="top-layer"> <span class="top-layer-title">智慧看护对象数据看板</span> <span class="top-layer-date">{{ date }}</span> <span class="top-layer-user"> 当前登陆人：管理员 </span> <div class="top-layer-home"> <div class="top-layer-home-outline"></div> <div class="top-layer-home-inline"></div> <div class="top-layer-home-house" title="点击返回业务系统" @click="toHome()"></div> </div> <div class="top-layer-back"> <div class="top-layer-back-outline"></div> <div class="top-layer-back-inline"></div> <div class="top-layer-back-text" title="点击退出系统" @click="exit()">返回</div> </div> </div> </template> <script> export default { components: {}, data() { return { description: '大屏顶部', date: null, } }, computed: {}, created() { this.setDate() }, mounted() {}, methods: { setDate() { setInterval(() => { this.date = this.$dayjs().format('YYYY年MM月DD日 HH:mm') }) }, /*****退出******/ exit(){ this.$router.back() this.$emit('clickBrotherBtn', true) }, /*****回到主页******/ toHome(){ this.$router.push({ path: "/trzhkh/obj/modules/TbObjectManage" }).catch(()=>{ console.log('跳转首页出错') }) } }, } </script> <style lang="less"> @fontColor: #00fbff; #rotateAnimate() { .outline { background: url('~@/assets/images/dataview/home-outline.png') no-repeat center center; background-size: 100% 100%; -webkit-animation: changeright 6s linear infinite; animation: changeright 6s linear infinite; } .inline { background: url('~@/assets/images/dataview/home-inline.png') no-repeat center center; background-size: 100% 100%; -webkit-animation: changeleft 6s linear infinite; animation: changeleft 6s linear infinite; } .house { } } .top-layer { height: calc(100vh * 0.15); width: 100%; position: absolute; left: 0; top: 0; background: url('~@/assets/images/dataview/toplayer-bg.png') no-repeat center center; background-size: 100% 100%; display: flex; justify-content: center; align-items: center; &-title { position: absolute; top: 5%; left: 43%; font-size: 26px; color: @fontColor; z-index: 3; cursor: pointer; } &-date { position: absolute; top: 17%; left: 18%; color: @fontColor; font-size: 17px; } &-home { position: absolute; top: 10%; left: 6%; width: 70px; height: 70px; z-index: 3; &-outline { width: 100%; height: 100%; #rotateAnimate.outline(); } &-inline { position: absolute; top: 5%; left: 7%; width: 90%; height: 90%; #rotateAnimate.inline(); } &-house { position: absolute; top: 34%; left: 37%; width: 20px; height: 20px; background: url('~@/assets/images/dataview/home.png') no-repeat center center; background-size: 100% 100%; cursor: pointer; } } &-user { position: absolute; top: 17%; right: 18%; font-size: 17px; color: @fontColor; } &-back { position: absolute; top: 10%; right: 6%; width: 70px; height: 70px; z-index: 3; &-outline { width: 100%; height: 100%; #rotateAnimate.outline(); } &-inline { position: absolute; top: 5%; left: 7%; width: 90%; height: 90%; #rotateAnimate.inline(); } &-text { position: absolute; top: 34%; left: 32%; color: @fontColor; cursor: pointer; } } @keyframes changeright { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @keyframes changeleft { 0% { transform: rotate(0deg); } 50% { transform: rotate(-180deg); } 100% { transform: rotate(-360deg); } } } </style>
子组件3
<template>
<div>
<!--视频窗口展示-->
<div id="playWnd" class="playWnd" style=""></div>
</div>
</template>
<script>
import constant from '../../../../utils/constant.js'
import {
watch
} from 'less';
import moment from 'moment'
// let divWidth = 930; // 容器宽
// let divHeight = 450; // 容器高
//声明公用变量
let initCount = 0; // 初始化重试次数,3次失败则报错
let oWebControl; // 页面控制对象
let pubKey = '';
export default {
name: 'hkVideo',
data() {
return { // 视频播放
cameraIndexCode: this.cameraIndexCodeProp, // 摄像头的code, 我是父页面传过来的
key: '',
HKIP: '',
Port: '',
secret: '',
screenWidth: document.body.clientWidth, //浏览器宽度
screenHeight: document.body.clientHeight //浏览器高度
}
},
props: {
cameraIndexCodeProp: Array,
}, // 接收父页面传来的参数
mounted() {
console.log("----222-----",this.cameraIndexCodeProp)
const that = this
window.onresize = () => {
return (() => {
//根据窗口变化调整视频窗口大小
window.screenWidth = document.body.clientWidth;
that.screenWidth = 0.46 * window.screenWidth;
window.screenHeight = document.body.clientHeight;
that.screenHeight = 0.48 * window.screenHeight;
console.log("窗口变化宽度", document.body.clientWidth);
console.log("窗口变化高度", document.body.clientHeight);
if (oWebControl != null) {
this.destroyedView();
setTimeout(this.initView, 500);
oWebControl.JS_Resize(that.screenWidth, that.screenHeight);
//this.setWndCover();
}
})()
}
// // 有摄像头 code, 才加载, 另外因为我每次只显示一个, 所以显示之前要把之前显示的摄像头销毁, 所以加了 oWebControl == null 的判断.
// if(this.cameraIndexCode && oWebControl == null){
// this.initView();
// }else{
// // 如果 code 不为空, 则先销毁现有摄像头, 再去加载新的摄像头
// this.destroyedView();
// setTimeout(this.initView, 1000);
// }
},
created() {
this.getHK()
// if(this.HKinfo.key){
// this.key = this.HKinfo.key
// this.secret = this.HKinfo.secret
// this.Port = this.HKinfo.HKPort
// this.HKIP = this.HKinfo.HKIP
// // 有摄像头 code, 才加载, 另外因为我每次只显示一个, 所以显示之前要把之前显示的摄像头销毁, 所以加了 oWebControl == null 的判断.
// if(this.cameraIndexCode.length>0 && oWebControl == null){
// this.initView();
// }else{
// // 如果 code 不为空, 则先销毁现有摄像头, 再去加载新的摄像头
// this.destroyedView();
// setTimeout(this.initView, 1000);
// }
// }else{
// this.getHK()
// }
},
computed: {
// ...mapGetters(['HKinfo'])
},
methods: {
async getHK() {
// this.key = '29305541'
// this.secret = 'quaMHuWIp05r9by98sMM'
// this.Port = '2443'
// this.HKIP = '113.125.113.194'
//公共页面引入，避免多端更改
const configValue = constant.HK_config
this.key = configValue.key
this.secret = configValue.secret
this.Port = configValue.HKPort
this.HKIP = configValue.HKIP
this.initView();
// const info = await this.$store.dispatch('GetHKinfo')
// if(info){
// const k = info.find(item=>item.value==='AppKey')
// const i = info.find(item=>item.value==='IP')
// const s = info.find(item=>item.value==='APPsecret')
// const p = info.find(item=>item.value==='Port')
// this.key = k.code
// this.secret = s.code
// this.Port = p.code
// this.HKIP = i.code
// // 有摄像头 code, 才加载, 另外因为我每次只显示一个, 所以显示之前要把之前显示的摄像头销毁, 所以加了 oWebControl == null 的判断.
// if(this.cameraIndexCode.length>0 && oWebControl == null){
// this.initView();
// }else{
// // 如果 code 不为空, 则先销毁现有摄像头, 再去加载新的摄像头
// this.destroyedView();
// setTimeout(this.initView, 1000);
// }
// }
},
// 创建播放实例, 这里不用改
initPlugin() { // 初始化播放插件, 相当于准备播放环境(不是重点, 但要记着这是每次加载的第一步, 不然切换画面会有坑)
const _this = this;
window.screenWidth = document.body.clientWidth;
let divWidth = 0.46 * window.screenWidth; //容器宽度
window.screenHeight = document.body.clientHeight;
let divHeight = 0.48 * window.screenHeight; //容器高度
//let divWidth = 930;
//let divHeight = 450; //容器高度
oWebControl = new WebControl({
szPluginContainer: "playWnd", // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: function() { // 创建WebControl实例成功
oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
}).then(function() { // 启动插件服务成功
oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
cbIntegrationCallBack: _this.cbIntegrationCallBack
});
oWebControl.JS_CreateWnd("playWnd", divWidth, divHeight).then(
function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
_this.init(); // 创建播放实例成功后初始化
});
}, function() { // 启动插件服务失败
});
},
cbConnectError: function() { // 创建WebControl实例失败
oWebControl = null;
// publicUtils.notify('warn', "插件未启动，正在尝试启动，请稍候...");
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
initCount++;
if (initCount < 3) {
setTimeout(function() {
this.initPlugin();
}, 3000)
} else {
// publicUtils.notify('error', "插件启动失败，请检查插件是否安装！");
}
},
cbConnectClose: function(bNormalClose) {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
if (!bNormalClose) {
// publicUtils.notify('error', "视屏链接异常中断！");
}
oWebControl = null;
}
});
},
//初始化, 主要改这里
init() {
const _this = this;
window.screenWidth = document.body.clientWidth;
let divWidth = 0.46 * window.screenWidth; //容器宽度
window.screenHeight = document.body.clientHeight;
let divHeight = 0.48 * window.screenHeight; //容器高度
this.getPubKey(function() {
// 请自行修改以下变量值
let appkey = _this.key //综合安防管理平台提供的appkey，必填
let secret = _this.setEncrypt(_this.secret); //综合安防管理平台提供的secret，必填
let ip = _this.HKIP; //综合安防管理平台IP地址，必填
let playMode = 0; //初始播放模式：0-预览，1-回放
let port = Number(_this.Port); //综合安防管理平台端口，若启用HTTPS协议，默认443
let snapDir = "D:\\SnapDir"; //抓图存储路径
let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
let layout = "2x2"; //playMode指定模式的布局
let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
let encryptedFields = 'secret'; //加密字段，默认加密领域为secret
let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
let showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
let buttonIDs = "0,16,256,257,259,513,514,516,517,768,769"; //自定义工具条按钮
let toolBarButtonIDs = "4096,2304,4098,4099"; //自定义工具栏按钮
// 请自行修改以上变量值
oWebControl.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: appkey, //API网关提供的appkey
secret: secret, //API网关提供的secret
ip: ip, //API网关IP地址
playMode: playMode, //播放模式（决定显示预览还是回放界面）
port: port, //端口
snapDir: snapDir, //抓图存储路径
videoDir: videoDir, //紧急录像或录像剪辑存储路径
layout: layout, //布局
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
encryptedFields: encryptedFields, //加密字段
showToolbar: showToolbar, //是否显示工具栏
showSmart: showSmart, //是否显示智能信息
buttonIDs: buttonIDs, //自定义工具条按钮
toolBarButtonIDs: toolBarButtonIDs, //自定义工具栏按钮
})
}).then(function(oData) {
oWebControl.JS_Resize(divWidth, divHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
});
});
},
//获取公钥, 不用改
getPubKey(callback) {
oWebControl.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024
})
}).then(function(oData) {
console.log(oData);
if (oData.responseMsg.data) {
pubKey = oData.responseMsg.data;
callback()
}
})
},
//RSA加密, 不用改
setEncrypt(value) {
let encrypt = new JSEncrypt();
encrypt.setPublicKey(pubKey);
return encrypt.encrypt(value);
},
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
setWndCover() {
let iWidth = $(window).width();
let iHeight = $(window).height();
let oDivRect = $("#playWnd").get(0).getBoundingClientRect();
let iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
let iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
let iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
let iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
iCoverLeft = (iCoverLeft > 1000) ? 1000 : iCoverLeft;
iCoverTop = (iCoverTop > 600) ? 600 : iCoverTop;
iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight;
iCoverBottom = (iCoverBottom > 600) ? 600 : iCoverBottom;
oWebControl.JS_RepairPartWindow(0, 0, 1001, 600); // 多1个像素点防止还原后边界缺失一个像素条
if (iCoverLeft != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
}
if (iCoverTop != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
}
if (iCoverRight != 0) {
oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600);
}
if (iCoverBottom != 0) {
oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom);
}
},
//视频预览功能, 就设置 cameraIndexCode 就行了
startPreview() {
let _this = this;
let cameraIndexCode = _this.cameraIndexCode; //获取输入的监控点编号值，必填
let streamMode = 0; //主子码流标识：0-主码流，1-子码流
let transMode = 1; //传输协议：0-UDP，1-TCP
let gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
let wndId = 0; //播放窗口序号（在2x2以上布局下可指定播放窗口）
const cameraList = []
// cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
// cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
console.log("------startPreview----------",cameraIndexCode)
for (let i = 0, j = cameraIndexCode.length; i < j; i++) {
let curCode = cameraIndexCode[i].indexCode
curCode = curCode.replace(/(^\s*)/g, "");
curCode = curCode.replace(/(\s*$)/g, "");
cameraList.push({
cameraIndexCode: curCode, //监控点编号
streamMode: streamMode, //主子码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
wndId: i + 1 //可指定播放窗口
})
}
oWebControl.JS_RequestInterface({
funcName: "startMultiPreviewByCameraIndexCode",
argument: {
list: cameraList
}
})
},
initView() {
// 先准备环境, 环境准备好才能加载, 所以给了个延迟, 用 Promise 同步执行, 加载不出来.只能用此下策, 有空再优化
if (this.cameraIndexCode) {
this.initPlugin();
setTimeout(this.startPreview, 1000);
}
},
//停止全部预览
stopAllPreview() {
oWebControl.JS_RequestInterface({
funcName: "stopAllPreview"
})
},
//销毁插件实例
destroyedView() {
console.log("---------destroyedView---------")
if (oWebControl != null) {
this.stopAllPreview();
oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
oWebControl.JS_Disconnect().then(function() { // 断开与插件服务连接成功
},
function() { // 断开与插件服务连接失败
});
}
},
},
destroyed() {
this.destroyedView();
}
}
</script>
<style scoped>
html,
body {
padding: 0;
margin: 0;
}
.playWnd {
/*width: 500px; !*播放容器的宽和高设定*!*/
/*height: 300px;*/
}
.operate {
margin-top: 24px;
}
.operate::after {
content: '';
display: block;
clear: both;
}
.module {
float: left;
width: 340px;
/*min-height: 320px;*/
margin-left: 16px;
padding: 16px 8px;
box-sizing: border-box;
border: 1px solid #e5e5e5;
}
.module .item {
margin-bottom: 4px;
}
.module input[type="text"] {
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
margin-left: 0;
width: 150px;
min-height: 20px;
}
.module .btn {
min-width: 80px;
min-height: 24px;
margin-top: 100px;
margin-left: 80px;
}
</style>
