admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

flx:企业视频监控大屏新增分页功能

Browse Source
This commit is contained in:
Rain_ 2025-12-11 10:06:27 +08:00
parent 169107dd52
commit d354d72a0f
12 changed files with 323 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/videoSurveillance/page-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/assets/images/videoSurveillance/page-icon_active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/images/videoSurveillance/page-icon_down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 335 B

BIN
src/assets/images/videoSurveillance/page-icon_up.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 336 B

56
src/assets/js/http.js
View File

@ -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:28890/' //郭圣雄本地
// 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.155:19111/' //彭洁本地
// axios.defaults.baseURL = 'http://182.90.224.237:51234/' //郭圣雄远程
// axios.defaults.baseURL = 'http://jxj.zhgdyun.com:61212/' //彭洁远程
// axios.defaults.baseURL ='http://101.43.164.214:45020/' //沈阳和盈
// axios.defaults.baseURL ='http://183.249.224.118:9000/' //嘉兴王江泾公用码头
// 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:8099/'//中建四局(沙湖)线上（最新）地址
// axios.defaults.baseURL = 'http://jxj.zhgdyun.com:15551/'//测试地址
// axios.defaults.baseURL = 'http://47.93.215.234:9809/'//鞍钢正式地址(弃用)
// axios.defaults.baseURL = 'http://42.180.188.17:9809/' //鞍钢正式地址
// axios.defaults.baseURL = 'http://47.93.215.234:11211/'//鞍钢测试地址(弃用)
// axios.defaults.baseURL = 'http://42.180.188.17:11211/' //鞍钢测试地址
// axios.defaults.baseURL = 'http://8.136.222.164:8808/' //中科安信正式地址
// axios.defaults.baseURL = 'http://1.13.185.209:9820/' //中科佳成正式地址
// axios.defaults.baseURL = 'http://192.168.9.249:9820/' //四川网城正式地址
// axios.defaults.baseURL = 'http://jxj.zhgdyun.com:34568/' //四川网城外网映射地址
// axios.defaults.baseURL = 'http://192.168.110.220:9809/' //同济正式地址
// axios.defaults.baseURL = 'http://192.168.100.4:9809/' //乌丹(合肥启程)新正式地址
// axios.defaults.baseURL = "http://jxj.zhgdyun.com:18000"; //包头化工
// axios.defaults.baseURL = "http://222.80.185.228:6090"; //木垒
// axios.defaults.baseURL = "https://zm.zhgdyun.com:11111";
// axios.defaults.baseURL = "http://121.37.106.37:9809";
// axios.defaults.baseURL = "http://139.9.66.234:20628";
// axios.defaults.baseURL = "http://jxj.zhgdyun.com:9500";
// axios.defaults.baseURL = "http://jxj.zhgdyun.com:21000"; // 潮州
// axios.defaults.baseURL = "http://gszhdz.crpower.com.cn:9809/"; // 敦煌
axios.defaults.baseURL = "http://192.168.34.221:19112/"; //郭圣雄本地
// axios.defaults.baseURL = 'http://192.168.34.155:19111/' //彭洁本地
// axios.defaults.baseURL = 'http://182.90.224.237:51234/' //郭圣雄远程
// axios.defaults.baseURL = 'http://jxj.zhgdyun.com:61212/' //彭洁远程
// axios.defaults.baseURL ='http://101.43.164.214:45020/' //沈阳和盈
// axios.defaults.baseURL ='http://183.249.224.118:9000/' //嘉兴王江泾公用码头
// 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:8099/'//中建四局(沙湖)线上（最新）地址
// axios.defaults.baseURL = 'http://jxj.zhgdyun.com:15551/'//测试地址
// axios.defaults.baseURL = 'http://47.93.215.234:9809/'//鞍钢正式地址(弃用)
// axios.defaults.baseURL = 'http://42.180.188.17:9809/' //鞍钢正式地址
// axios.defaults.baseURL = 'http://47.93.215.234:11211/'//鞍钢测试地址(弃用)
// axios.defaults.baseURL = 'http://42.180.188.17:11211/' //鞍钢测试地址
// axios.defaults.baseURL = 'http://8.136.222.164:8808/' //中科安信正式地址
// axios.defaults.baseURL = 'http://1.13.185.209:9820/' //中科佳成正式地址
// axios.defaults.baseURL = 'http://192.168.9.249:9820/' //四川网城正式地址
// axios.defaults.baseURL = 'http://jxj.zhgdyun.com:34568/' //四川网城外网映射地址
// axios.defaults.baseURL = 'http://192.168.110.220:9809/' //同济正式地址
// axios.defaults.baseURL = 'http://192.168.100.4:9809/' //乌丹(合肥启程)新正式地址
// axios.defaults.baseURL = "http://jxj.zhgdyun.com:18000"; //包头化工
// axios.defaults.baseURL = "http://222.80.185.228:6090"; //木垒
// axios.defaults.baseURL = "https://zm.zhgdyun.com:11111";
// axios.defaults.baseURL = "http://121.37.106.37:9809";
// axios.defaults.baseURL = "http://139.9.66.234:20628";
// axios.defaults.baseURL = "http://jxj.zhgdyun.com:9500";
// axios.defaults.baseURL = "http://jxj.zhgdyun.com:21000"; // 潮州
axios.defaults.baseURL = "http://gszhdz.crpower.com.cn:9809/"; // 敦煌
// axios.defaults.baseURL = "https://gszhdz.crpower.com.cn:9807/"; // 敦煌
} else if (process.env.NODE_ENV == "debug") {
axios.defaults.baseURL = "https://www.ceshi.com";

145
src/components/videoModule/isc_plugin/isc_plugin.vue
View File

@ -1,15 +1,25 @@
<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>
<script>
let closeVideo=null
import {
OpenVideo,
unInitObjPlugin,
InitObjPlugin, hidePluginWindow, showPluginWindow, resizeFn, isLoadPlugin, setWidthAndHeight, setOffset
InitObjPlugin, hidePluginWindow,getCurrentLayout, showPluginWindow, closeAllVideo, cuttingPartWindow, resizeFn, isLoadPlugin, setWidthAndHeight, setOffset
} from "./video_isc_plugin.js";
export default {
props: ["devList", "type", 'isIframe'],
props: ["devList", "type", 'isIframe', "devListAll"],
watch: {
//监听value的变化，进行相应的操作即可
devList: function (a, b) {
@ -38,20 +48,19 @@ export default {
},
},
computed: {
isExpand() {
return this.$store.state.isExpand;
}
},
data() {
return {
layout: ''
layout: '',
pageNo: 1,
pageBtn: false,
}
},
created() {
if(this.$route.path.indexOf("/companyAdmin/videoSurveillance") != -1) {
this.pageBtn = true;
}
if (COMPANY == 'xingxuan') { setWidthAndHeight(633, 381); }
this.$EventBus.$on("controlVideoShowOrHide", (data) => {
console.log('controlVideoShowOrHide', data)
if (data == 'hide') {
@ -93,7 +102,18 @@ export default {
// this.devList,layout
// );
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() {
@ -101,8 +121,56 @@ export default {
unInitObjPlugin();
},
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>
<style lang="scss" scoped>
@ -110,4 +178,57 @@ export default {
width: 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>

108
src/components/videoModule/isc_plugin/isc_plugin_h5.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="player-main">
<div id="player-main" :class="{'player-main1': pageBtn}">
<div id="player"></div>
<!-- 为每个窗口添加控制按钮容器 -->
<div
@ -97,6 +97,14 @@
></div>
</el-tooltip>
</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>
@ -111,7 +119,7 @@ import reloadImg from "@/assets/images/iscImage/reload.png";
import moment from "moment";
export default {
name: "hik",
props: ["devList", "type", "isIframe", "shrinkCloseFlag"],
props: ["devList", "type", "isIframe", "shrinkCloseFlag", "devListAll"],
data() {
return {
// 监控点编码
@ -135,6 +143,8 @@ export default {
isFullScreen: false,
isFullScreenAll: false,
randomNumber: "",
pageNo: 1,
pageBtn: false,
};
},
watch: {
@ -207,6 +217,11 @@ export default {
this.onTwoSubmit(this.numCount);
},
},
created() {
if(this.$route.path.indexOf("/companyAdmin/videoSurveillance") != -1) {
this.pageBtn = true;
}
},
mounted() {
this.devH5List = this.devList.map((item, index) => ({
...item,
@ -217,19 +232,44 @@ export default {
this.initPlayer();
},
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() {
// 调用播放器API停止所有实时播放
this.player.JS_StopRealPlayAll().then(
() => {
// 重置播放速率为0
this.playback.rate = 0;
console.log("stopAllPlay success");
// 遍历所有设备，清理对应的DOM元素
this.devH5List.forEach((item, index) => {
// 查找视频播放容器
const wnd = document.querySelector(`#player #player-container-${index}`);
if (wnd) {
// 移除控制栏的显示样式
const controls = document.getElementById(`controls-${index + 1}`);
if (controls) {
controls.classList.remove("video-controls_flex");
}
// 查找并移除播放器中的图片元素（封面或占位图）
const findIndex = Array.from(wnd.childNodes).findIndex(
(item) => item.localName == "img" || item.className == "classImg"
);
@ -238,6 +278,7 @@ export default {
}
}
});
// 清空设备列表
this.devH5List = [];
},
(e) => {
@ -775,6 +816,15 @@ export default {
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>
@ -784,6 +834,54 @@ export default {
}
</style>
<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) {
color: rgba(255, 255, 255, 0.5);
font-size: 16px;
@ -907,9 +1005,13 @@ export default {
}
}
#player-main {
width: 100%;
width: calc(100%);
height: 100%;
}
.player-main1 {
width: calc(100% - 16px) !important;
position: relative;
}
#player {
width: 100%;
height: calc(100% - 40px);

19
src/components/videoModule/isc_plugin/video_isc_plugin.js
View File

@ -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)
getPubKey(function () {
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
@ -506,4 +506,21 @@ export function setOffset(l, t) {
export function setWidthAndHeight(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;
}

12
src/components/videoModule/videoModule.vue
View File

@ -1,6 +1,6 @@
<template>
<!-- 下拉框选择视频，需传入视频列表 -->
<div class="fullHeight videoOverview" id="videoOverview">
<div class="fullHeight videoOverview" id="videoOverview" :class="{'videoOverview1': pageBtn}">
<!-- <div v-show="showPlaybacks" class="videoTop">
<span
class="videoType"
@ -36,6 +36,7 @@
:type="type"
:isIframe="isIframe"
:devList="devList"
:devListAll="devListAll"
v-if="isWindows() && $store.state.forceH5Play == 0"
:class="{
isDockingToWoer: isDockingToWoer,
@ -49,6 +50,7 @@
:type="type"
:isIframe="isIframe"
:devList="devList"
:devListAll="devListAll"
:shrinkCloseFlag="shrinkCloseFlag"
:class="{
isDockingToWoer: isDockingToWoer,
@ -337,6 +339,7 @@ export default {
"xxx",
"showPlayback",
"shrinkCloseFlag",
"devListAll"
],
components: {
ysyPlayAndPlayback,
@ -410,12 +413,16 @@ export default {
isFullScreen: false,
select: 1,
layoutOptions: [],
pageBtn: false,
};
},
destroy() {
hidePluginWindow();
},
created() {
if(this.$route.path.indexOf("/companyAdmin/videoSurveillance") != -1) {
this.pageBtn = true;
}
this.layoutOptions = [
{
value: 1,
@ -923,6 +930,9 @@ export default {
</script>
<style lang="less" scoped>
@import "./videoModule.less";
.videoOverview1 {
width: calc(100% - 32px) !important;
}
.isDockingToWoer {
position: relative;
left: 58px;

24
src/views/companyAdmin/companyBigScreen/videoSurveillance/areaTree.vue
View File

@ -12,7 +12,7 @@
<div
class="top-container"
:class="{
treeBox_scroll1: (!isWindows() || $store.state.forceH5Play == 1),
treeBox_scroll1: !isWindows() || $store.state.forceH5Play == 1,
treeBox_scroll2: (!isWindows() || $store.state.forceH5Play == 1) && isDragging,
}"
>
@ -133,7 +133,7 @@
</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-text">云台</div>
<div
@ -251,7 +251,7 @@ export default {
this.videoConfigInfo = res.result;
if (type == "all") {
if ((!isWindows() || $store.state.forceH5Play == 1)) {
if (!isWindows() || $store.state.forceH5Play == 1) {
this.$emit(
"playParams",
itemList.filter((item, index) => index < 16)
@ -347,6 +347,7 @@ export default {
console.log("resultList", resultList, this.treeData);
this.videoConfigInfo = resultList[0].projectVideoConfig;
// this.getProjectVideoConfigList(resultList[0]);
const resultListAll = this.recursiveFilterList(this.treeData, 10000);
this.$emit(
"playParams",
@ -357,6 +358,14 @@ export default {
// videoType: item.projectVideoConfig.videoType,
// 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 = []) {
return dataList.reduce((prev, cur) => {
console.log("当前的列表", cur);
// console.log("当前的列表", cur);
if (resultList.length >= rountCount) return prev;
if (cur.children && cur.children.length > 0) {
this.recursiveFilterList(cur.children, rountCount, resultList);
@ -399,6 +408,7 @@ export default {
const resultList = this.recursiveFilterList(dataList, 16);
console.log("resultList", resultList, dataList);
this.videoConfigInfo = resultList[0].projectVideoConfig;
const resultListAll = this.recursiveFilterList(dataList, 10000);
// this.getProjectVideoConfigList(resultList[0]);
this.$emit(
"playParams",
@ -409,6 +419,12 @@ export default {
// videoType: item.projectVideoConfig.videoType,
// projectSn: item.projectVideoConfig.projectSn,
};
}),
resultListAll.map((item) => {
return {
...item.videoItem,
...item.projectVideoConfig,
};
})
);
},

7
src/views/companyAdmin/companyBigScreen/videoSurveillance/videoLargeScreen.vue
View File

@ -15,6 +15,7 @@
<videoModule
class="playVideoBox"
:value="devList"
:devListAll="devListAll"
:shrinkCloseFlag="shrinkCloseFlag"
:type="'company'"
:class="isExpand ? '' : 'big'"
@ -47,6 +48,7 @@ export default {
isDockingToWoer: false,
selectPlayVideoInfo: {},
shrinkCloseFlag: false,
devListAll: [],
};
},
mounted() {
@ -64,9 +66,12 @@ export default {
this.isExpand = !this.isExpand;
this.$store.commit("setIsExpand", this.isExpand);
},
getPlayParams(data) {
getPlayParams(data, dataAll) {
console.log("playVideo.vue拿到设备列表", data);
this.devList = data;
if(dataAll) {
this.devListAll = dataAll;
}
},
shrinkCloseChange(val) {
this.shrinkCloseFlag = val;

4
src/views/equipmentCenter/videoManage/videoConfig.vue
View File

@ -1081,12 +1081,12 @@
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item> -->
<div class="message-tip">
<!-- <div class="message-tip">
<i class="el-icon-warning"></i>
<div>
无插件播放集成海康h5Player视频播放器，h5player是一个基于HTML5的流式网络视频播放器无需安装浏览器插件即可通过websocket协议向媒体服务取流播放多种格式的音视频流。
</div>
</div>
</div> -->
</template>
<el-form-item v-if="videoType == '7'" label="ip">
<el-input