修改

src/apps/xxscreen/views/xxscreen.js

@@ -6,6 +6,7 @@ import ProgressBar from '@/common/components/progress.vue';
 import openImg from '@/common/components/openImg.vue';
 import openVideo from '@/common/components/openVideo.vue';
 import iframes from '@/common/components/iframe.vue';
+import iframes1 from '@/common/components/iframe1.vue';
 import xxModule from '../components/xxmodule.vue';
 import xxModule1 from '../components/xxmodule1.vue';
 import xxModule2 from '../components/xxmodule2.vue';
@@ -23,6 +24,7 @@ import api from '../api';
         echarts,
         openImg,
         iframes,
+        iframes1,
         openVideo,
         xxModule,
         xxModule1,

src/apps/xxscreen/views/xxscreen.scss

@@ -120,7 +120,7 @@
 }
 
 .main .monitor-video .content-box .img {
-    width: 100%;
+    width: 98%;
     height: 125px;
     margin-bottom: 2px;
 }

src/apps/xxscreen/views/xxscreen.vue

@@ -21,20 +21,22 @@
                         监控数据
                     </div>
                     <div class="content-box">
-                        <div v-if="monitor" class="img" @click="clickMonitor()">
-                            <img :src="monitor.img" alt="">
+                        <div v-if="monitor" class="img">
+                            <iframes1  :url="monitor.url" />
                         </div>
-                        <div v-if="monitor1" class="img" @click="clickMonitor1()">
-                            <img :src="monitor1.img" alt="">
+                        <div v-if="monitor1" class="img">
+                            <iframes1  :url="monitor1.url" />
                         </div>
-                        <div v-if="monitor2" class="img" @click="clickMonitor2()">
-                            <img :src="monitor2.img" alt="">
+                        <div v-if="monitor2" class="img">
+                            <iframes1  :url="monitor2.url" />
                         </div>
-                        <div v-if="monitor3" class="img" @click="clickMonitor3()">
-                            <img :src="monitor3.img" alt="">
+                        <div v-if="monitor3" class="img">
+
+                            <iframes1  :url="monitor3.url" />
                         </div>
-                        <div v-if="monitor4" class="img" @click="clickMonitor4()">
-                            <img :src="monitor4.img" alt="">
+                        <div v-if="monitor4" class="img">
+                            <iframes1  :url="monitor4.url" />
+
                         </div>
                     </div>
                 </div>
@@ -78,20 +80,25 @@
                         监控数据
                     </div>
                     <div class="content-box">
-                        <div v-if="monitor5" class="img" @click="clickMonitor5()">
-                            <img :src="monitor5.img" alt="">
+                        <div v-if="monitor5" class="img">
+                            <iframes1  :url="monitor5.url" />
+
                         </div>
-                        <div v-if="monitor6" class="img" @click="clickMonitor6()">
-                            <img :src="monitor6.img" alt="">
+                        <div v-if="monitor6" class="img">
+                            <iframes1  :url="monitor6.url" />
+
                         </div>
-                        <div v-if="monitor7" class="img" @click="clickMonitor7()">
-                            <img :src="monitor7.img" alt="">
+                        <div v-if="monitor7" class="img">
+                            <iframes1  :url="monitor7.url" />
+
                         </div>
-                        <div v-if="monitor8" class="img" @click="clickMonitor8()">
-                            <img :src="monitor8.img" alt="">
+                        <div v-if="monitor8" class="img">
+                            <iframes1  :url="monitor8.url" />
+
                         </div>
-                        <div v-if="monitor9" class="img" @click="clickMonitor9()">
-                            <img :src="monitor9.img" alt="">
+                        <div v-if="monitor9" class="img">
+                            <iframes1  :url="monitor9.url" />
+
                         </div>
                     </div>
                 </div>

src/common/components/iframe1.vue

@@ -0,0 +1,66 @@
+<template>
+    <iframe :src="url"  width="100%" height="100%" frameborder="3" />
+
+</template>
+
+<script>
+export default {
+    props: {
+        url: {
+            type: String,
+            default: '',
+        },
+        visible: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    created() {
+        console.log(this.url, this.visible, 11111111111111111111111);
+    },
+
+    methods: {
+        closeClick() {
+            // 子组件可以使用 $emit 触发父组件的自定义事件
+            this.$emit('closeClick');
+        },
+    },
+};
+</script>
+<style lang="css" scoped>
+.iframe-box {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 99999;
+}
+
+.iframe-box .iframe-info {
+    width: 80%;
+    height: 80%;
+    position: relative;
+    z-index: 2;
+    margin: 0 auto;
+
+}
+
+.iframe-box .iframe-info img {
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    z-index: 1;
+    top: 7%;
+    right: -10px;
+}
+
+.iframe-box .iframe-info iframe {
+    margin-top: 5%;
+    background-color: #fff;
+}
+</style>