.env.development

@@ -6,9 +6,9 @@
    VITE_APP_ENV = 'development'

# 图片地址
    VITE_APP_IMG_BASEURL='http://192.168.0.200:8036/upload'
    VITE_APP_IMG_BASEURL='/api/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'
    VITE_APP_PUBLIC_REQUEST_API = '/api'

 .env.production

@@ -6,9 +6,9 @@
    VITE_APP_ENV = 'production'

# 图片地址
    VITE_APP_IMG_BASEURL = 'http://113.250.189.120:8036/upload'
    VITE_APP_IMG_BASEURL = '/api/upload'

# 南京管理系统/开发环境
    VITE_APP_PUBLIC_REQUEST_API = 'http://113.250.189.120:8036'
    VITE_APP_PUBLIC_REQUEST_API = '/api'
# 是否在打包时开启压缩，支持 gzip 和 brotli
    VITE_BUILD_COMPRESS = gzip

 .gitignore

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

 index.html

@@ -9,7 +9,7 @@
  <link rel="icon" href="/favicon.ico">
  <title>南京康尼地铁泵站监测服务系统</title>
  <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
    <script type="text/javascript" src="./public/jessibuca.js"></script>
    <script type="text/javascript" src="/jessibuca.js"></script>

  <style>
    html,

 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.pointName}}</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;

 vite.config.js

@@ -30,10 +30,10 @@
      open: true,
      proxy: {
        // https://cn.vitejs.dev/config/#server-proxy
        '/dev-api': {
          target: 'http://localhost:8080',
        '/api': {
          target: 'http://192.168.0.200:8038',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api/, '')
          rewrite: (p) => p.replace(/^\/api/, '')
        }
      }
    },