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