'保安项目提交'

src/components/videoDialog/index.vue

@@ -0,0 +1,95 @@
+<!--
+ * @Author: your name
+ * @Date: 2023-02-09 14:04:11
+ * @LastEditTime: 2023-03-06 10:46:07
+ * @LastEditors: your name
+ * @Description: In User Settings Edit
+ * @FilePath: \lz_web_new\src\components\videoDialog\index.vue
+-->
+<template>
+  <div class="videoBox1" v-if="isShowVideo">
+    <div class="BoxCnt">
+      <div class="header" @click="closeVideo">
+        <el-icon :size="22"><CircleClose /></el-icon>
+      </div>
+      <div class="movie">
+        <iframe
+          :src="txtUrl.src"
+          frameborder="0"
+          width="100%"
+          height="100%"
+        ></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import emitter from "@/utils/eventBus.js";
+import { http } from "@/api/service";
+const player = ref(null);
+const splitNum = ref(1);
+const isShowVideo = ref(false);
+const data = ref(null);
+const videoUrl = ref(null);
+const txtUrl = ref({
+  src: ""
+});
+onMounted(() => {
+  emitter.on("openGzyVideo", (res) => {
+    isShowVideo.value = true;
+    data.value = res;
+    getUrl(res);
+  });
+});
+onUnmounted(() => {
+  emitter.off("openGzyVideo");
+});
+function getUrl(item) {
+  let params = {
+    cameraIndexCode: item.sbbh
+  };
+
+  http.getSpWs(params).then((res) => {
+    txtUrl.value.src = "http://80.75.112.18:56233?ws=" + res.url;
+  });
+}
+function closeVideo() {
+    emitter.off("openGzyVideo");
+  isShowVideo.value = false;
+}
+</script>
+
+<style lang="scss" scoped>
+.videoBox1 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 999;
+}
+.BoxCnt {
+  position: absolute;
+  width: 990px;
+  height: 80vh;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  .header {
+    width: 100%;
+    height: 30px;
+    text-align: right;
+    font-size: 20px;
+    cursor: pointer;
+  }
+  .movie {
+    width: 990px;
+    height: 628px;
+  }
+}
+</style>