web
7 天以前 57a0e64f1617aabcad385b67cc6fc9fee8062a4b
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="m-item" v-for="(x,i) in showList" :key="i">
                <div class="vbox">
                <div class="name">{{x.name}}</div>
                <VideoPlayer :item="x" />
                <div class="btnlist">
                    <el-button size="large">泵房水浸报警</el-button>
                    <el-button size="large">控制柜闪灯报警</el-button>
                    <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;