<script setup>
|
import {getVideoList} from '@/api/screen/video.js'
|
import VideoPlayer from "@/components/VideoPlayer/VideoPlayer.vue";
|
import {ref, onMounted} from "vue";
|
|
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="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>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.monitor{
|
width: 100%;
|
height: 100%;
|
.list{
|
height: 100%;
|
padding: 0.5rem;
|
display: flex;
|
gap: 1rem;
|
.m-item{
|
width: 50%;
|
height: 100%;
|
background: #000;
|
position: relative;
|
display: flex;
|
align-items: center;
|
.vbox{
|
width: 100%;
|
height: 65%;
|
}
|
.name{
|
position: absolute;
|
right: 0;
|
top: 0;
|
z-index: 100;
|
color: #fff;
|
padding: 0.5rem 2rem;
|
background: rgba(0, 0, 0, 0.5);
|
}
|
.btnlist{
|
position: absolute;
|
left: 0;
|
bottom: 3rem;
|
width: 100%;
|
text-align: center;
|
:deep(.el-button){
|
margin: 0 3rem;
|
background: red;
|
border-color: red;
|
color: #fff;
|
font-size: 1.5rem;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
