fix:对接监控

web

7 天以前 57a0e64f1617aabcad385b67cc6fc9fee8062a4b

fix:对接监控

 .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'

 .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

 .gitignore

@@ -1,2 +1,3 @@
node_modules
.idea/
dist/

 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(() => {

 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;