flx:企业视频监控大屏新增分页功能
This commit is contained in:
parent
169107dd52
commit
d354d72a0f
BIN
src/assets/images/videoSurveillance/page-icon.png
Normal file
BIN
src/assets/images/videoSurveillance/page-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/images/videoSurveillance/page-icon_active.png
Normal file
BIN
src/assets/images/videoSurveillance/page-icon_active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/videoSurveillance/page-icon_down.png
Normal file
BIN
src/assets/images/videoSurveillance/page-icon_down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 335 B |
BIN
src/assets/images/videoSurveillance/page-icon_up.png
Normal file
BIN
src/assets/images/videoSurveillance/page-icon_up.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 336 B |
@ -181,34 +181,34 @@ if (process.env.NODE_ENV == "development") {
|
|||||||
// axios.defaults.baseURL = 'http://192.168.34.221:28889/' //郭圣雄本地
|
// axios.defaults.baseURL = 'http://192.168.34.221:28889/' //郭圣雄本地
|
||||||
// axios.defaults.baseURL = 'http://192.168.34.221:28890/' //郭圣雄本地
|
// axios.defaults.baseURL = 'http://192.168.34.221:28890/' //郭圣雄本地
|
||||||
// axios.defaults.baseURL = "http://192.168.34.221:9111/"; //郭圣雄本地
|
// axios.defaults.baseURL = "http://192.168.34.221:9111/"; //郭圣雄本地
|
||||||
axios.defaults.baseURL = "http://192.168.34.221:19112/"; //郭圣雄本地
|
axios.defaults.baseURL = "http://192.168.34.221:19112/"; //郭圣雄本地
|
||||||
// axios.defaults.baseURL = 'http://192.168.34.155:19111/' //彭洁本地
|
// axios.defaults.baseURL = 'http://192.168.34.155:19111/' //彭洁本地
|
||||||
// axios.defaults.baseURL = 'http://182.90.224.237:51234/' //郭圣雄远程
|
// axios.defaults.baseURL = 'http://182.90.224.237:51234/' //郭圣雄远程
|
||||||
// axios.defaults.baseURL = 'http://jxj.zhgdyun.com:61212/' //彭洁远程
|
// axios.defaults.baseURL = 'http://jxj.zhgdyun.com:61212/' //彭洁远程
|
||||||
// axios.defaults.baseURL ='http://101.43.164.214:45020/' //沈阳和盈
|
// axios.defaults.baseURL ='http://101.43.164.214:45020/' //沈阳和盈
|
||||||
// axios.defaults.baseURL ='http://183.249.224.118:9000/' //嘉兴王江泾公用码头
|
// axios.defaults.baseURL ='http://183.249.224.118:9000/' //嘉兴王江泾公用码头
|
||||||
// axios.defaults.baseURL = 'http://101.43.164.214:11111/' // 百色三标段项目
|
// axios.defaults.baseURL = 'http://101.43.164.214:11111/' // 百色三标段项目
|
||||||
// axios.defaults.baseURL = 'http://125.88.207.86:8088/'//中建四局线上(最新)地址
|
// axios.defaults.baseURL = 'http://125.88.207.86:8088/'//中建四局线上(最新)地址
|
||||||
// axios.defaults.baseURL = 'http://125.88.207.86:8099/'//中建四局(沙湖)线上(最新)地址
|
// axios.defaults.baseURL = 'http://125.88.207.86:8099/'//中建四局(沙湖)线上(最新)地址
|
||||||
// axios.defaults.baseURL = 'http://jxj.zhgdyun.com:15551/'//测试地址
|
// axios.defaults.baseURL = 'http://jxj.zhgdyun.com:15551/'//测试地址
|
||||||
// axios.defaults.baseURL = 'http://47.93.215.234:9809/'//鞍钢正式地址(弃用)
|
// axios.defaults.baseURL = 'http://47.93.215.234:9809/'//鞍钢正式地址(弃用)
|
||||||
// axios.defaults.baseURL = 'http://42.180.188.17:9809/' //鞍钢正式地址
|
// axios.defaults.baseURL = 'http://42.180.188.17:9809/' //鞍钢正式地址
|
||||||
// axios.defaults.baseURL = 'http://47.93.215.234:11211/'//鞍钢测试地址(弃用)
|
// axios.defaults.baseURL = 'http://47.93.215.234:11211/'//鞍钢测试地址(弃用)
|
||||||
// axios.defaults.baseURL = 'http://42.180.188.17:11211/' //鞍钢测试地址
|
// axios.defaults.baseURL = 'http://42.180.188.17:11211/' //鞍钢测试地址
|
||||||
// axios.defaults.baseURL = 'http://8.136.222.164:8808/' //中科安信正式地址
|
// axios.defaults.baseURL = 'http://8.136.222.164:8808/' //中科安信正式地址
|
||||||
// axios.defaults.baseURL = 'http://1.13.185.209:9820/' //中科佳成正式地址
|
// axios.defaults.baseURL = 'http://1.13.185.209:9820/' //中科佳成正式地址
|
||||||
// axios.defaults.baseURL = 'http://192.168.9.249:9820/' //四川网城正式地址
|
// axios.defaults.baseURL = 'http://192.168.9.249:9820/' //四川网城正式地址
|
||||||
// axios.defaults.baseURL = 'http://jxj.zhgdyun.com:34568/' //四川网城外网映射地址
|
// axios.defaults.baseURL = 'http://jxj.zhgdyun.com:34568/' //四川网城外网映射地址
|
||||||
// axios.defaults.baseURL = 'http://192.168.110.220:9809/' //同济正式地址
|
// axios.defaults.baseURL = 'http://192.168.110.220:9809/' //同济正式地址
|
||||||
// axios.defaults.baseURL = 'http://192.168.100.4:9809/' //乌丹(合肥启程)新正式地址
|
// axios.defaults.baseURL = 'http://192.168.100.4:9809/' //乌丹(合肥启程)新正式地址
|
||||||
// axios.defaults.baseURL = "http://jxj.zhgdyun.com:18000"; //包头化工
|
// axios.defaults.baseURL = "http://jxj.zhgdyun.com:18000"; //包头化工
|
||||||
// axios.defaults.baseURL = "http://222.80.185.228:6090"; //木垒
|
// axios.defaults.baseURL = "http://222.80.185.228:6090"; //木垒
|
||||||
// axios.defaults.baseURL = "https://zm.zhgdyun.com:11111";
|
// axios.defaults.baseURL = "https://zm.zhgdyun.com:11111";
|
||||||
// axios.defaults.baseURL = "http://121.37.106.37:9809";
|
// axios.defaults.baseURL = "http://121.37.106.37:9809";
|
||||||
// axios.defaults.baseURL = "http://139.9.66.234:20628";
|
// axios.defaults.baseURL = "http://139.9.66.234:20628";
|
||||||
// axios.defaults.baseURL = "http://jxj.zhgdyun.com:9500";
|
// axios.defaults.baseURL = "http://jxj.zhgdyun.com:9500";
|
||||||
// axios.defaults.baseURL = "http://jxj.zhgdyun.com:21000"; // 潮州
|
// axios.defaults.baseURL = "http://jxj.zhgdyun.com:21000"; // 潮州
|
||||||
// axios.defaults.baseURL = "http://gszhdz.crpower.com.cn:9809/"; // 敦煌
|
axios.defaults.baseURL = "http://gszhdz.crpower.com.cn:9809/"; // 敦煌
|
||||||
// axios.defaults.baseURL = "https://gszhdz.crpower.com.cn:9807/"; // 敦煌
|
// axios.defaults.baseURL = "https://gszhdz.crpower.com.cn:9807/"; // 敦煌
|
||||||
} else if (process.env.NODE_ENV == "debug") {
|
} else if (process.env.NODE_ENV == "debug") {
|
||||||
axios.defaults.baseURL = "https://www.ceshi.com";
|
axios.defaults.baseURL = "https://www.ceshi.com";
|
||||||
|
|||||||
@ -1,15 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="playWnd"></div>
|
<div class="paly-box">
|
||||||
|
<div id="playWnd"></div>
|
||||||
|
<div class="bg-001" v-if="pageBtn">
|
||||||
|
<div :class="{'page-box1': pageNo > 1}" @click="onPageClick('up')">
|
||||||
|
<div class="page-up"></div>
|
||||||
|
</div>
|
||||||
|
<div :class="{'page-box1': pageNo < pageSizeFlag}" @click="onPageClick('next')">
|
||||||
|
<div class="page-down"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
let closeVideo=null
|
let closeVideo=null
|
||||||
import {
|
import {
|
||||||
OpenVideo,
|
OpenVideo,
|
||||||
unInitObjPlugin,
|
unInitObjPlugin,
|
||||||
InitObjPlugin, hidePluginWindow, showPluginWindow, resizeFn, isLoadPlugin, setWidthAndHeight, setOffset
|
InitObjPlugin, hidePluginWindow,getCurrentLayout, showPluginWindow, closeAllVideo, cuttingPartWindow, resizeFn, isLoadPlugin, setWidthAndHeight, setOffset
|
||||||
} from "./video_isc_plugin.js";
|
} from "./video_isc_plugin.js";
|
||||||
export default {
|
export default {
|
||||||
props: ["devList", "type", 'isIframe'],
|
props: ["devList", "type", 'isIframe', "devListAll"],
|
||||||
watch: {
|
watch: {
|
||||||
//监听value的变化,进行相应的操作即可
|
//监听value的变化,进行相应的操作即可
|
||||||
devList: function (a, b) {
|
devList: function (a, b) {
|
||||||
@ -38,20 +48,19 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
isExpand() {
|
|
||||||
return this.$store.state.isExpand;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
layout: ''
|
layout: '',
|
||||||
|
pageNo: 1,
|
||||||
|
pageBtn: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
if(this.$route.path.indexOf("/companyAdmin/videoSurveillance") != -1) {
|
||||||
|
this.pageBtn = true;
|
||||||
|
}
|
||||||
if (COMPANY == 'xingxuan') { setWidthAndHeight(633, 381); }
|
if (COMPANY == 'xingxuan') { setWidthAndHeight(633, 381); }
|
||||||
|
|
||||||
this.$EventBus.$on("controlVideoShowOrHide", (data) => {
|
this.$EventBus.$on("controlVideoShowOrHide", (data) => {
|
||||||
console.log('controlVideoShowOrHide', data)
|
console.log('controlVideoShowOrHide', data)
|
||||||
if (data == 'hide') {
|
if (data == 'hide') {
|
||||||
@ -93,7 +102,18 @@ export default {
|
|||||||
// this.devList,layout
|
// this.devList,layout
|
||||||
// );
|
// );
|
||||||
if (this.devList.length > 0) {
|
if (this.devList.length > 0) {
|
||||||
isLoadPlugin(this.devList, this.layout)
|
isLoadPlugin(this.devList, this.layout);
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// setTimeout(() => {
|
||||||
|
// const playWnd = document.getElementById('playWnd');
|
||||||
|
// console.log(7777, playWnd, playWnd.offsetWidth, playWnd.offsetHeight)
|
||||||
|
// const iHeight = 50;
|
||||||
|
// const iWidth = 200;
|
||||||
|
// const iTop = playWnd.offsetHeight - iHeight;
|
||||||
|
// const iLeft = (playWnd.offsetWidth / 2) - iWidth;
|
||||||
|
// cuttingPartWindow(iLeft, iTop, iWidth, iHeight)
|
||||||
|
// }, 500)
|
||||||
|
// })
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@ -101,8 +121,56 @@ export default {
|
|||||||
unInitObjPlugin();
|
unInitObjPlugin();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
async onPageClick(type) {
|
||||||
|
const data = await getCurrentLayout();
|
||||||
|
// console.log("data11", data);
|
||||||
|
if(data.responseMsg.msg == "success") {
|
||||||
|
const dataInfo = JSON.parse(data.responseMsg.data);
|
||||||
|
console.log("data11", dataInfo);
|
||||||
|
this.layout = dataInfo.layout;
|
||||||
|
}
|
||||||
|
if(type == "up") {
|
||||||
|
if(this.pageNo <= 1) return;
|
||||||
|
this.pageNo -= 1;
|
||||||
|
} else if(type == "next") {
|
||||||
|
console.log("pageNo", this.pageSizeFlag);
|
||||||
|
if(this.pageNo >= this.pageSizeFlag) return;
|
||||||
|
this.pageNo += 1;
|
||||||
|
}
|
||||||
|
const dataList = this.pageList;
|
||||||
|
closeAllVideo();
|
||||||
|
isLoadPlugin(dataList, this.layout);
|
||||||
|
console.log("dataList", dataList, this.layout);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
pageList() {
|
||||||
|
const pageSize = this.numCount;
|
||||||
|
return this.devListAll.slice((this.pageNo - 1) * pageSize, this.pageNo * pageSize)
|
||||||
|
},
|
||||||
|
numCount() {
|
||||||
|
const numCountList = this.layout.match(/\d+(\.\d+)?/g);
|
||||||
|
if(!(numCountList instanceof Array)) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
return numCountList.reduce((prev, item) => {
|
||||||
|
if(prev == 0) {
|
||||||
|
return parseInt(item)
|
||||||
|
} else {
|
||||||
|
return prev * parseInt(item)
|
||||||
|
}
|
||||||
|
}, 0)
|
||||||
|
},
|
||||||
|
pageSizeFlag() {
|
||||||
|
|
||||||
|
console.log("aassss", this.devListAll.length, this.numCount)
|
||||||
|
|
||||||
}
|
return this.devListAll.length / (this.numCount)
|
||||||
|
},
|
||||||
|
isExpand() {
|
||||||
|
return this.$store.state.isExpand;
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -110,4 +178,57 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
.paly-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.bg-001 {
|
||||||
|
height: 100%;
|
||||||
|
background: #001e53;
|
||||||
|
position: absolute;
|
||||||
|
right: -16px;
|
||||||
|
top: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
> div {
|
||||||
|
height: 50%;
|
||||||
|
background: rgba(86, 188, 251, 0.2);
|
||||||
|
// pointer-events: none;
|
||||||
|
cursor: not-allowed;
|
||||||
|
> div {
|
||||||
|
width: 16px;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url("~@/assets/images/videoSurveillance/page-icon.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.page-down {
|
||||||
|
background-image: url("~@/assets/images/videoSurveillance/page-icon_active.png");
|
||||||
|
}
|
||||||
|
> div::after {
|
||||||
|
content: "";
|
||||||
|
width: 9px;
|
||||||
|
height: 11px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> div:first-child > div::after {
|
||||||
|
background-image: url("~@/assets/images/videoSurveillance/page-icon_up.png");
|
||||||
|
bottom: 35px;
|
||||||
|
}
|
||||||
|
> div:last-child > div::after {
|
||||||
|
background-image: url("~@/assets/images/videoSurveillance/page-icon_down.png");
|
||||||
|
top: 35px;
|
||||||
|
}
|
||||||
|
.page-box1 {
|
||||||
|
background: rgba(86, 188, 251, 0.4);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="player-main">
|
<div id="player-main" :class="{'player-main1': pageBtn}">
|
||||||
<div id="player"></div>
|
<div id="player"></div>
|
||||||
<!-- 为每个窗口添加控制按钮容器 -->
|
<!-- 为每个窗口添加控制按钮容器 -->
|
||||||
<div
|
<div
|
||||||
@ -97,6 +97,14 @@
|
|||||||
></div>
|
></div>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="bg-001" v-if="pageBtn">
|
||||||
|
<div :class="{'page-box1': pageNo > 1}" @click="onPageClick('up')">
|
||||||
|
<div class="page-up"></div>
|
||||||
|
</div>
|
||||||
|
<div :class="{'page-box1': pageNo < pageSizeFlag}" @click="onPageClick('next')">
|
||||||
|
<div class="page-down"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -111,7 +119,7 @@ import reloadImg from "@/assets/images/iscImage/reload.png";
|
|||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
export default {
|
export default {
|
||||||
name: "hik",
|
name: "hik",
|
||||||
props: ["devList", "type", "isIframe", "shrinkCloseFlag"],
|
props: ["devList", "type", "isIframe", "shrinkCloseFlag", "devListAll"],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 监控点编码
|
// 监控点编码
|
||||||
@ -135,6 +143,8 @@ export default {
|
|||||||
isFullScreen: false,
|
isFullScreen: false,
|
||||||
isFullScreenAll: false,
|
isFullScreenAll: false,
|
||||||
randomNumber: "",
|
randomNumber: "",
|
||||||
|
pageNo: 1,
|
||||||
|
pageBtn: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@ -207,6 +217,11 @@ export default {
|
|||||||
this.onTwoSubmit(this.numCount);
|
this.onTwoSubmit(this.numCount);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
if(this.$route.path.indexOf("/companyAdmin/videoSurveillance") != -1) {
|
||||||
|
this.pageBtn = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.devH5List = this.devList.map((item, index) => ({
|
this.devH5List = this.devList.map((item, index) => ({
|
||||||
...item,
|
...item,
|
||||||
@ -217,19 +232,44 @@ export default {
|
|||||||
this.initPlayer();
|
this.initPlayer();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
onPageClick(type) {
|
||||||
|
if(type == "up") {
|
||||||
|
if(this.pageNo <= 1) return;
|
||||||
|
this.pageNo -= 1;
|
||||||
|
} else if(type == "next") {
|
||||||
|
console.log("pageNo", this.pageSizeFlag);
|
||||||
|
if(this.pageNo >= this.pageSizeFlag) return;
|
||||||
|
this.pageNo += 1;
|
||||||
|
}
|
||||||
|
const dataList = this.pageList;
|
||||||
|
this.devH5List = dataList.map((item, index) => ({
|
||||||
|
...item,
|
||||||
|
eIndex: index,
|
||||||
|
}));
|
||||||
|
this.devH5List.forEach((item) => {
|
||||||
|
this.play(item,item.eIndex);
|
||||||
|
})
|
||||||
|
console.log("dataList", dataList, this.pageNo);
|
||||||
|
},
|
||||||
// 关闭所有视频
|
// 关闭所有视频
|
||||||
stopAllPlay() {
|
stopAllPlay() {
|
||||||
|
// 调用播放器API停止所有实时播放
|
||||||
this.player.JS_StopRealPlayAll().then(
|
this.player.JS_StopRealPlayAll().then(
|
||||||
() => {
|
() => {
|
||||||
|
// 重置播放速率为0
|
||||||
this.playback.rate = 0;
|
this.playback.rate = 0;
|
||||||
console.log("stopAllPlay success");
|
console.log("stopAllPlay success");
|
||||||
|
// 遍历所有设备,清理对应的DOM元素
|
||||||
this.devH5List.forEach((item, index) => {
|
this.devH5List.forEach((item, index) => {
|
||||||
|
// 查找视频播放容器
|
||||||
const wnd = document.querySelector(`#player #player-container-${index}`);
|
const wnd = document.querySelector(`#player #player-container-${index}`);
|
||||||
if (wnd) {
|
if (wnd) {
|
||||||
|
// 移除控制栏的显示样式
|
||||||
const controls = document.getElementById(`controls-${index + 1}`);
|
const controls = document.getElementById(`controls-${index + 1}`);
|
||||||
if (controls) {
|
if (controls) {
|
||||||
controls.classList.remove("video-controls_flex");
|
controls.classList.remove("video-controls_flex");
|
||||||
}
|
}
|
||||||
|
// 查找并移除播放器中的图片元素(封面或占位图)
|
||||||
const findIndex = Array.from(wnd.childNodes).findIndex(
|
const findIndex = Array.from(wnd.childNodes).findIndex(
|
||||||
(item) => item.localName == "img" || item.className == "classImg"
|
(item) => item.localName == "img" || item.className == "classImg"
|
||||||
);
|
);
|
||||||
@ -238,6 +278,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
// 清空设备列表
|
||||||
this.devH5List = [];
|
this.devH5List = [];
|
||||||
},
|
},
|
||||||
(e) => {
|
(e) => {
|
||||||
@ -775,6 +816,15 @@ export default {
|
|||||||
return find ? find.videoName : "";
|
return find ? find.videoName : "";
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
pageList() {
|
||||||
|
const pageSize = this.numCount * this.numCount;
|
||||||
|
return this.devListAll.slice((this.pageNo - 1) * pageSize, this.pageNo * pageSize)
|
||||||
|
},
|
||||||
|
pageSizeFlag() {
|
||||||
|
console.log("aassss", this.devListAll.length, (this.numCount * this.numCount))
|
||||||
|
|
||||||
|
return this.devListAll.length / (this.numCount * this.numCount)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@ -784,6 +834,54 @@ export default {
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.bg-001 {
|
||||||
|
height: 100%;
|
||||||
|
background: #001e53;
|
||||||
|
position: absolute;
|
||||||
|
right: -16px;
|
||||||
|
top: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
> div {
|
||||||
|
height: 50%;
|
||||||
|
background: rgba(86, 188, 251, 0.2);
|
||||||
|
// pointer-events: none;
|
||||||
|
cursor: not-allowed;
|
||||||
|
> div {
|
||||||
|
width: 16px;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url("~@/assets/images/videoSurveillance/page-icon.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.page-down {
|
||||||
|
background-image: url("~@/assets/images/videoSurveillance/page-icon_active.png");
|
||||||
|
}
|
||||||
|
> div::after {
|
||||||
|
content: "";
|
||||||
|
width: 9px;
|
||||||
|
height: 11px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> div:first-child > div::after {
|
||||||
|
background-image: url("~@/assets/images/videoSurveillance/page-icon_up.png");
|
||||||
|
bottom: 35px;
|
||||||
|
}
|
||||||
|
> div:last-child > div::after {
|
||||||
|
background-image: url("~@/assets/images/videoSurveillance/page-icon_down.png");
|
||||||
|
top: 35px;
|
||||||
|
}
|
||||||
|
.page-box1 {
|
||||||
|
background: rgba(86, 188, 251, 0.4);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
:deep(.classImg) {
|
:deep(.classImg) {
|
||||||
color: rgba(255, 255, 255, 0.5);
|
color: rgba(255, 255, 255, 0.5);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@ -907,9 +1005,13 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
#player-main {
|
#player-main {
|
||||||
width: 100%;
|
width: calc(100%);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
.player-main1 {
|
||||||
|
width: calc(100% - 16px) !important;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
#player {
|
#player {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 40px);
|
height: calc(100% - 40px);
|
||||||
|
|||||||
@ -266,7 +266,7 @@ export function InitObjPlugin(appkey, secret, ip, port, type, videoData, layout)
|
|||||||
|
|
||||||
}
|
}
|
||||||
//初始化
|
//初始化
|
||||||
function init(videoData) {
|
export function init(videoData) {
|
||||||
console.log(222222222222, videoData)
|
console.log(222222222222, videoData)
|
||||||
getPubKey(function () {
|
getPubKey(function () {
|
||||||
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||||||
@ -506,4 +506,21 @@ export function setOffset(l, t) {
|
|||||||
export function setWidthAndHeight(width, height) {
|
export function setWidthAndHeight(width, height) {
|
||||||
oWebControl.JS_Resize(width, height);
|
oWebControl.JS_Resize(width, height);
|
||||||
|
|
||||||
|
}
|
||||||
|
// JS_CuttingPartWindow
|
||||||
|
export function cuttingPartWindow(iLeft, iTop, iWidth, iHeight) {
|
||||||
|
oWebControl.JS_CuttingPartWindow(iLeft, iTop, iWidth, iHeight)
|
||||||
|
}
|
||||||
|
// 关闭所有视频
|
||||||
|
export function closeAllVideo() {
|
||||||
|
oWebControl.JS_RequestInterface({
|
||||||
|
funcName: "stopAllPreview"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 获取当前布局
|
||||||
|
export const getCurrentLayout = async () => {
|
||||||
|
const data = await oWebControl.JS_RequestInterface({
|
||||||
|
funcName: "getLayout"
|
||||||
|
});
|
||||||
|
return data;
|
||||||
}
|
}
|
||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 下拉框选择视频,需传入视频列表 -->
|
<!-- 下拉框选择视频,需传入视频列表 -->
|
||||||
<div class="fullHeight videoOverview" id="videoOverview">
|
<div class="fullHeight videoOverview" id="videoOverview" :class="{'videoOverview1': pageBtn}">
|
||||||
<!-- <div v-show="showPlaybacks" class="videoTop">
|
<!-- <div v-show="showPlaybacks" class="videoTop">
|
||||||
<span
|
<span
|
||||||
class="videoType"
|
class="videoType"
|
||||||
@ -36,6 +36,7 @@
|
|||||||
:type="type"
|
:type="type"
|
||||||
:isIframe="isIframe"
|
:isIframe="isIframe"
|
||||||
:devList="devList"
|
:devList="devList"
|
||||||
|
:devListAll="devListAll"
|
||||||
v-if="isWindows() && $store.state.forceH5Play == 0"
|
v-if="isWindows() && $store.state.forceH5Play == 0"
|
||||||
:class="{
|
:class="{
|
||||||
isDockingToWoer: isDockingToWoer,
|
isDockingToWoer: isDockingToWoer,
|
||||||
@ -49,6 +50,7 @@
|
|||||||
:type="type"
|
:type="type"
|
||||||
:isIframe="isIframe"
|
:isIframe="isIframe"
|
||||||
:devList="devList"
|
:devList="devList"
|
||||||
|
:devListAll="devListAll"
|
||||||
:shrinkCloseFlag="shrinkCloseFlag"
|
:shrinkCloseFlag="shrinkCloseFlag"
|
||||||
:class="{
|
:class="{
|
||||||
isDockingToWoer: isDockingToWoer,
|
isDockingToWoer: isDockingToWoer,
|
||||||
@ -337,6 +339,7 @@ export default {
|
|||||||
"xxx",
|
"xxx",
|
||||||
"showPlayback",
|
"showPlayback",
|
||||||
"shrinkCloseFlag",
|
"shrinkCloseFlag",
|
||||||
|
"devListAll"
|
||||||
],
|
],
|
||||||
components: {
|
components: {
|
||||||
ysyPlayAndPlayback,
|
ysyPlayAndPlayback,
|
||||||
@ -410,12 +413,16 @@ export default {
|
|||||||
isFullScreen: false,
|
isFullScreen: false,
|
||||||
select: 1,
|
select: 1,
|
||||||
layoutOptions: [],
|
layoutOptions: [],
|
||||||
|
pageBtn: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
destroy() {
|
destroy() {
|
||||||
hidePluginWindow();
|
hidePluginWindow();
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
if(this.$route.path.indexOf("/companyAdmin/videoSurveillance") != -1) {
|
||||||
|
this.pageBtn = true;
|
||||||
|
}
|
||||||
this.layoutOptions = [
|
this.layoutOptions = [
|
||||||
{
|
{
|
||||||
value: 1,
|
value: 1,
|
||||||
@ -923,6 +930,9 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import "./videoModule.less";
|
@import "./videoModule.less";
|
||||||
|
.videoOverview1 {
|
||||||
|
width: calc(100% - 32px) !important;
|
||||||
|
}
|
||||||
.isDockingToWoer {
|
.isDockingToWoer {
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 58px;
|
left: 58px;
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
<div
|
<div
|
||||||
class="top-container"
|
class="top-container"
|
||||||
:class="{
|
:class="{
|
||||||
treeBox_scroll1: (!isWindows() || $store.state.forceH5Play == 1),
|
treeBox_scroll1: !isWindows() || $store.state.forceH5Play == 1,
|
||||||
treeBox_scroll2: (!isWindows() || $store.state.forceH5Play == 1) && isDragging,
|
treeBox_scroll2: (!isWindows() || $store.state.forceH5Play == 1) && isDragging,
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
@ -133,7 +133,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="control_main" v-if="(!isWindows() || $store.state.forceH5Play == 1)">
|
<div class="control_main" v-if="!isWindows() || $store.state.forceH5Play == 1">
|
||||||
<div class="header-box header_gauge">
|
<div class="header-box header_gauge">
|
||||||
<div class="header-text">云台</div>
|
<div class="header-text">云台</div>
|
||||||
<div
|
<div
|
||||||
@ -251,7 +251,7 @@ export default {
|
|||||||
|
|
||||||
this.videoConfigInfo = res.result;
|
this.videoConfigInfo = res.result;
|
||||||
if (type == "all") {
|
if (type == "all") {
|
||||||
if ((!isWindows() || $store.state.forceH5Play == 1)) {
|
if (!isWindows() || $store.state.forceH5Play == 1) {
|
||||||
this.$emit(
|
this.$emit(
|
||||||
"playParams",
|
"playParams",
|
||||||
itemList.filter((item, index) => index < 16)
|
itemList.filter((item, index) => index < 16)
|
||||||
@ -347,6 +347,7 @@ export default {
|
|||||||
console.log("resultList", resultList, this.treeData);
|
console.log("resultList", resultList, this.treeData);
|
||||||
this.videoConfigInfo = resultList[0].projectVideoConfig;
|
this.videoConfigInfo = resultList[0].projectVideoConfig;
|
||||||
// this.getProjectVideoConfigList(resultList[0]);
|
// this.getProjectVideoConfigList(resultList[0]);
|
||||||
|
const resultListAll = this.recursiveFilterList(this.treeData, 10000);
|
||||||
|
|
||||||
this.$emit(
|
this.$emit(
|
||||||
"playParams",
|
"playParams",
|
||||||
@ -357,6 +358,14 @@ export default {
|
|||||||
// videoType: item.projectVideoConfig.videoType,
|
// videoType: item.projectVideoConfig.videoType,
|
||||||
// projectSn: item.projectVideoConfig.projectSn,
|
// projectSn: item.projectVideoConfig.projectSn,
|
||||||
};
|
};
|
||||||
|
}),
|
||||||
|
resultListAll.map((item) => {
|
||||||
|
return {
|
||||||
|
...item.videoItem,
|
||||||
|
...item.projectVideoConfig,
|
||||||
|
// videoType: item.projectVideoConfig.videoType,
|
||||||
|
// projectSn: item.projectVideoConfig.projectSn,
|
||||||
|
};
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -378,7 +387,7 @@ export default {
|
|||||||
},
|
},
|
||||||
recursiveFilterList(dataList, rountCount = 4, resultList = []) {
|
recursiveFilterList(dataList, rountCount = 4, resultList = []) {
|
||||||
return dataList.reduce((prev, cur) => {
|
return dataList.reduce((prev, cur) => {
|
||||||
console.log("当前的列表", cur);
|
// console.log("当前的列表", cur);
|
||||||
if (resultList.length >= rountCount) return prev;
|
if (resultList.length >= rountCount) return prev;
|
||||||
if (cur.children && cur.children.length > 0) {
|
if (cur.children && cur.children.length > 0) {
|
||||||
this.recursiveFilterList(cur.children, rountCount, resultList);
|
this.recursiveFilterList(cur.children, rountCount, resultList);
|
||||||
@ -399,6 +408,7 @@ export default {
|
|||||||
const resultList = this.recursiveFilterList(dataList, 16);
|
const resultList = this.recursiveFilterList(dataList, 16);
|
||||||
console.log("resultList", resultList, dataList);
|
console.log("resultList", resultList, dataList);
|
||||||
this.videoConfigInfo = resultList[0].projectVideoConfig;
|
this.videoConfigInfo = resultList[0].projectVideoConfig;
|
||||||
|
const resultListAll = this.recursiveFilterList(dataList, 10000);
|
||||||
// this.getProjectVideoConfigList(resultList[0]);
|
// this.getProjectVideoConfigList(resultList[0]);
|
||||||
this.$emit(
|
this.$emit(
|
||||||
"playParams",
|
"playParams",
|
||||||
@ -409,6 +419,12 @@ export default {
|
|||||||
// videoType: item.projectVideoConfig.videoType,
|
// videoType: item.projectVideoConfig.videoType,
|
||||||
// projectSn: item.projectVideoConfig.projectSn,
|
// projectSn: item.projectVideoConfig.projectSn,
|
||||||
};
|
};
|
||||||
|
}),
|
||||||
|
resultListAll.map((item) => {
|
||||||
|
return {
|
||||||
|
...item.videoItem,
|
||||||
|
...item.projectVideoConfig,
|
||||||
|
};
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|||||||
@ -15,6 +15,7 @@
|
|||||||
<videoModule
|
<videoModule
|
||||||
class="playVideoBox"
|
class="playVideoBox"
|
||||||
:value="devList"
|
:value="devList"
|
||||||
|
:devListAll="devListAll"
|
||||||
:shrinkCloseFlag="shrinkCloseFlag"
|
:shrinkCloseFlag="shrinkCloseFlag"
|
||||||
:type="'company'"
|
:type="'company'"
|
||||||
:class="isExpand ? '' : 'big'"
|
:class="isExpand ? '' : 'big'"
|
||||||
@ -47,6 +48,7 @@ export default {
|
|||||||
isDockingToWoer: false,
|
isDockingToWoer: false,
|
||||||
selectPlayVideoInfo: {},
|
selectPlayVideoInfo: {},
|
||||||
shrinkCloseFlag: false,
|
shrinkCloseFlag: false,
|
||||||
|
devListAll: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -64,9 +66,12 @@ export default {
|
|||||||
this.isExpand = !this.isExpand;
|
this.isExpand = !this.isExpand;
|
||||||
this.$store.commit("setIsExpand", this.isExpand);
|
this.$store.commit("setIsExpand", this.isExpand);
|
||||||
},
|
},
|
||||||
getPlayParams(data) {
|
getPlayParams(data, dataAll) {
|
||||||
console.log("playVideo.vue拿到设备列表", data);
|
console.log("playVideo.vue拿到设备列表", data);
|
||||||
this.devList = data;
|
this.devList = data;
|
||||||
|
if(dataAll) {
|
||||||
|
this.devListAll = dataAll;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
shrinkCloseChange(val) {
|
shrinkCloseChange(val) {
|
||||||
this.shrinkCloseFlag = val;
|
this.shrinkCloseFlag = val;
|
||||||
|
|||||||
@ -1081,12 +1081,12 @@
|
|||||||
<el-radio :label="0">否</el-radio>
|
<el-radio :label="0">否</el-radio>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</el-form-item> -->
|
</el-form-item> -->
|
||||||
<div class="message-tip">
|
<!-- <div class="message-tip">
|
||||||
<i class="el-icon-warning"></i>
|
<i class="el-icon-warning"></i>
|
||||||
<div>
|
<div>
|
||||||
无插件播放集成海康h5Player视频播放器,h5player是一个基于HTML5的流式网络视频播放器无需安装浏览器插件即可通过websocket协议向媒体服务取流播放多种格式的音视频流。
|
无插件播放集成海康h5Player视频播放器,h5player是一个基于HTML5的流式网络视频播放器无需安装浏览器插件即可通过websocket协议向媒体服务取流播放多种格式的音视频流。
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</template>
|
</template>
|
||||||
<el-form-item v-if="videoType == '7'" label="ip">
|
<el-form-item v-if="videoType == '7'" label="ip">
|
||||||
<el-input
|
<el-input
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user