From 57a0e64f1617aabcad385b67cc6fc9fee8062a4b Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期六, 12 四月 2025 18:07:26 +0800
Subject: [PATCH] fix:对接监控
---
.env.development | 2
.gitignore | 1
src/components/VideoPlayer/VideoPlayer.vue | 52 ++++++++++++++++---------
.env.production | 2
src/views/screen/monitor/index.vue | 38 +++++++++++++------
5 files changed, 62 insertions(+), 33 deletions(-)
diff --git a/.env.development b/.env.development
index 7199d89..69f13e0 100644
--- a/.env.development
+++ b/.env.development
@@ -9,6 +9,6 @@
VITE_APP_IMG_BASEURL='http://192.168.0.200:8036/upload'
# 南京接口
- # VITE_APP_PUBLIC_REQUEST_API = 'http://113.250.189.120:8036'
+ # VITE_APP_PUBLIC_REQUEST_API = 'http://113.250.189.120:8038'
#后端本地
VITE_APP_PUBLIC_REQUEST_API = 'http://192.168.0.200:8038'
diff --git a/.env.production b/.env.production
index f57c2c3..4c73bdd 100644
--- a/.env.production
+++ b/.env.production
@@ -9,6 +9,6 @@
VITE_APP_IMG_BASEURL = 'http://113.250.189.120:8036/upload'
# 南京管理系统/开发环境
- VITE_APP_PUBLIC_REQUEST_API = 'http://113.250.189.120:8036'
+ VITE_APP_PUBLIC_REQUEST_API = 'http://127.0.0.1:8038'
# 是否在打包时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip
diff --git a/.gitignore b/.gitignore
index 944c283..f022a67 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
node_modules
.idea/
+dist/
\ No newline at end of file
diff --git a/src/components/VideoPlayer/VideoPlayer.vue b/src/components/VideoPlayer/VideoPlayer.vue
index fa912f6..ee5f2a8 100644
--- a/src/components/VideoPlayer/VideoPlayer.vue
+++ b/src/components/VideoPlayer/VideoPlayer.vue
@@ -18,6 +18,10 @@
item: {
type: Object,
default: {}
+ },
+ autoPlay: {
+ type: Boolean,
+ default: false
}
});
@@ -67,32 +71,42 @@
showPause.value = false;
}
-const init = () => {
- videojsb.value = new window.Jessibuca(
- Object.assign({
- container: videoRef.value,
- isResize: true,
+// 实例化dom节点
+const initDom = async () => {
+ videojsb.value = new window.Jessibuca(
+ Object.assign({
+ container: videoRef.value,
+ isResize: true,
isFullResize: true,
- text: '',
+ text: '',
videoBuffer: 2,
- loadingText: '加载中...',
- useMSE: true,
+ loadingText: '加载中...',
+ useMSE: true,
useWCS: true,
autoWasm: true,
- // debug: true,
+ // debug: true,
supportDblclickFullscreen: false,
- operateBtns: {
- fullscreen: true,
- play: false,
- audio: true,
- recorder: false,
- },
+ operateBtns: {
+ fullscreen: true,
+ play: false,
+ audio: true,
+ recorder: false,
+ },
controlAutoHide: true,
- forceNoOffscreen: true,
- isNotMute: false,
+ forceNoOffscreen: true,
+ isNotMute: false,
heartTimeoutReplay:false,
- })
- );
+ })
+ );
+}
+
+// 初始化
+const init = async () => {
+ await initDom()
+ // 自动播放
+ if(props.autoPlay && props.item.deviceId && props.item.channelId) {
+ handlePlayer()
+ }
};
onMounted(() => {
diff --git a/src/views/screen/monitor/index.vue b/src/views/screen/monitor/index.vue
index 1297fd2..ff9198f 100644
--- a/src/views/screen/monitor/index.vue
+++ b/src/views/screen/monitor/index.vue
@@ -1,24 +1,32 @@
<script setup>
import {getVideoList} from '@/api/screen/video.js'
import VideoPlayer from "@/components/VideoPlayer/VideoPlayer.vue";
-import {ref} from "vue";
+import {ref, onMounted} from "vue";
-const showList = ref([
- { id: 0, name: '监控1' },
- { id: 2, name: '监控2' },
-])
+const showList = ref([])
+const getList = () => {
+ getVideoList({pointId: '1904415927038406657'}).then(res => {
+ showList.value = res.data
+ })
+}
+
+onMounted(() => {
+ getList()
+})
</script>
<template>
<div class="monitor">
<div class="list">
- <div class="m-item" v-for="(x,i) in showList" :key="x">
- <div class="name">{{x.name}}</div>
- <VideoPlayer :item="x" />
- <div class="btnlist">
- <el-button size="large">泵房水浸报警</el-button>
- <el-button size="large">控制柜闪灯报警</el-button>
+ <div class="m-item" v-for="(x,i) in showList" :key="i">
+ <div class="vbox">
+ <div class="name">{{x.name}}</div>
+ <VideoPlayer :item="x" auto-play />
+ <!-- <div class="btnlist">-->
+ <!-- <el-button size="large">泵房水浸报警</el-button>-->
+ <!-- <el-button size="large">控制柜闪灯报警</el-button>-->
+ <!-- </div>-->
</div>
</div>
</div>
@@ -37,8 +45,14 @@
.m-item{
width: 50%;
height: 100%;
- background: rgb(158, 183, 111);
+ background: #000;
position: relative;
+ display: flex;
+ align-items: center;
+ .vbox{
+ width: 100%;
+ height: 65%;
+ }
.name{
position: absolute;
right: 0;
--
Gitblit v1.9.3