123 lines
2.6 KiB
Vue
123 lines
2.6 KiB
Vue
<!--
|
|
* @Author: your name
|
|
* @Date: 2024-01-09 16:56:12
|
|
* @LastEditTime: 2024-01-09 17:11:04
|
|
* @LastEditors: Please set LastEditors
|
|
* @Description: In User Settings Edit
|
|
* @FilePath: \mosty-nc-zhpcs-web\src\views\normalization\componentNc\cards\spxl\component\spxlDialog.vue
|
|
-->
|
|
<template>
|
|
<div class="boxPlay flex pt2 2 pl2 pr2" :class="props.fps > 2 ? 'flex-warp' : ''">
|
|
<div class="playCnt">
|
|
<div class="close_box pointer" @click="handelClose">
|
|
<el-icon :size="20" color="#fff">
|
|
<Close></Close>
|
|
</el-icon>
|
|
</div>
|
|
<ul class="video_box flex just-between flex-warp" v-loading="loading">
|
|
<li class="video_item" v-for="item in props.list" :key="item" :class="changeHeight(props.list)">
|
|
<VideoPay :sbbh="item.sxtid" v-if="item.sxtid"> </VideoPay>
|
|
<!-- <img style="width: 100%; height: 100%" :src="require('@/assets/images/default_video.png')" v-else/> -->
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import VideoPay from "@/components/wsVideoSenior/wsIframe/index"; //ws播放高阶
|
|
import emitter from "@/utils/eventBus.js";
|
|
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
|
|
import {
|
|
onMounted,
|
|
defineProps,
|
|
defineEmits,
|
|
ref,
|
|
onUnmounted,
|
|
watch,
|
|
onBeforeUnmount
|
|
} from "vue";
|
|
const props = defineProps({
|
|
list: Array,
|
|
fps: Number,
|
|
modelValue: Boolean
|
|
});
|
|
const emits = defineEmits(["update:modelValue"]);
|
|
function handelClose() {
|
|
emits("update:modelValue", false);
|
|
}
|
|
// 改变高度
|
|
const changeHeight = (val) => {
|
|
let len = val.length;
|
|
switch (len) {
|
|
case 1:
|
|
return 'oneItem';
|
|
case 2:
|
|
return 'twoItem';
|
|
case 3:
|
|
case 4:
|
|
return 'moreItem';
|
|
}
|
|
}
|
|
onMounted(() => { });
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.boxPlay {
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: calc(33% - 35px);
|
|
width: 1200px;
|
|
height: 780px;
|
|
top: 100px;
|
|
z-index: 11;
|
|
background: #000;
|
|
|
|
.playCnt {
|
|
width: 100%;
|
|
height: 100%;
|
|
// background: url("~@/assets/images/langVideo.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.close_box {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 20px;
|
|
color: white;
|
|
}
|
|
|
|
.video_box {
|
|
width: 100%;
|
|
margin-top: 5px;
|
|
height: calc(100% - 42px);
|
|
|
|
.video_item {
|
|
height: 100%;
|
|
width: 100%;
|
|
border: 1px solid #03438b;
|
|
}
|
|
|
|
.oneItem {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.oneItem {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.twoItem {
|
|
height: 100%;
|
|
width: 49.5%;
|
|
}
|
|
|
|
.moreItem {
|
|
height: calc((100% / 2) - 6px);
|
|
width: 49.5%;
|
|
}
|
|
}
|
|
}
|
|
</style> |