haozq
/
lj-zhgd-htweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

施工管控

This commit is contained in:
cwchen 2024-08-22 17:08:15 +08:00
parent 157a826585
commit da61132e87
1 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/views/construction/manage/realTimeManage/realTimeManage.vue
View File

@ -49,12 +49,19 @@
<!-- 视频 --> <!-- 视频 -->
<div class="center"> <div class="center">
<div class="change-box layout"> <div class="change-box layout">
<el-button type="primary" plain>1</el-button> <el-button type="primary" plain @click="changePlayVideo(1)">1</el-button>
<el-button type="primary" plain>4</el-button> <el-button type="primary" plain @click="changePlayVideo(4)">4</el-button>
</div> </div>
<!-- 球机视频 --> <!-- 球机视频 -->
<div class="video-box"> <div class="video-box layout">
<video id="videoPlayer1" class="ball-content" autoplay="autoplay" loop="loop" muted controls="controls"></video> <video v-if="boxNum == 1 || boxNum == 4" id="videoPlayer1" :class="classStyle" autoplay="autoplay" loop="loop"
muted controls="controls"></video>
<video v-if="boxNum == 4" id="videoPlayer2" :class="classStyle" autoplay="autoplay" loop="loop" muted
controls="controls"></video>
<video v-if="boxNum == 4" id="videoPlayer3" :class="classStyle" autoplay="autoplay" loop="loop" muted
controls="controls"></video>
<video v-if="boxNum == 4" id="videoPlayer4" :class="classStyle" autoplay="autoplay" loop="loop" muted
controls="controls"></video>
</div> </div>
<!-- 违章识别 --> <!-- 违章识别 -->
<div class="vio-box"> <div class="vio-box">
@ -129,7 +136,10 @@ export default {
loading: false, loading: false,
//预警滚动是否有数据 //预警滚动是否有数据
isHasData: true, isHasData: true,
busy: true busy: true,
// 窗口数量
boxNum: 1,
classStyle: 'ball-content'
}; };
}, },
created() { created() {
@ -262,8 +272,15 @@ export default {
// 轮播图切换时触发 // 轮播图切换时触发
loadVioInfos(newIndex, oldIndex) { loadVioInfos(newIndex, oldIndex) {
this.loadPhotosById(newIndex); this.loadPhotosById(newIndex);
// alert(newIndex) },
// alert(oldIndex) // 切换播放窗口
changePlayVideo(type) {
this.boxNum = type;
if (type == 1) {
this.classStyle = 'ball-content'
} else {
this.classStyle = 'ball-content-4'
}
}, },
//给梳妆街头不同层级设置不同的icon //给梳妆街头不同层级设置不同的icon
renderContent(h, { node, data }) { renderContent(h, { node, data }) {
@ -497,6 +514,9 @@ export default {
.video-box { .video-box {
width: 100%; width: 100%;
height: calc(100% - 275px); height: calc(100% - 275px);
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
} }
.ball-content { .ball-content {
@ -506,6 +526,13 @@ export default {
object-fit: fill; object-fit: fill;
} }
.ball-content-4 {
width: 49.5%;
height: 49%;
pointer-events: none;
object-fit: fill;
}
.vio-box { .vio-box {
width: 100%; width: 100%;
height: 200px; height: 200px;