'保安项目提交'

src/views/homeMy/components/dialog/spxlDialog.vue

@@ -0,0 +1,123 @@
+<!--
+ * @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>