submit

src/components/HkwsVideo/iframe.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="divPluginIframe">
+    <div class="divPluginIframe">
         <a :href="iframeSrc" target="_blank" v-if="state">若监控无法播放请点击此处</a> 
         <iframe :src="iframeSrc" frameborder="0" @load="iframeLoaded"></iframe>
     </div>
@@ -35,15 +35,16 @@
             szPort= "",            // protocol port
             szUsername= "",     // device username
             szPassword= "", // device password  
+            state=true
         }){
-            this.state=true
+            this.state=state
             this.iframeSrc=`${streamServeUrl}?name=${szUsername}&pwd=${szPassword}&ip=${szIP}&port=${szPort}`
         }
     }
  }
 </script>
 <style lang="scss" scoped>
-#divPluginIframe {
+.divPluginIframe {
     width: 100%;
     height: 65%;
     box-sizing: border-box;

src/config/index.js

@@ -4,8 +4,8 @@ module.exports = {
     * 服务API地址
     */
     serverUrl: 'http://113.141.93.143:1688', // 正式环境
-    devServerUrl: 'http://113.141.93.143:1688', // 开发环境
-    // devServerUrl: 'http://192.168.3.5:1688/', // 开发环境 qu
+    // devServerUrl: 'http://113.141.93.143:1688', // 开发环境
+    devServerUrl: 'http://192.168.3.5:1688/', // 开发环境 qu
     mqttUrl: 'ws://113.141.93.143:8894/mqtt', // mqtt地址
     /**
     * websocket 地址

src/views/home/components/SensorInfoStatistics.vue

@@ -365,9 +365,13 @@
         right: 10px;
         bottom: 0;
         background-color: rgba(222, 229, 236, 0.45);
+        display: flex;
+        justify-content: center;
+        align-items: center;
         .video-dialog-container{
-            width: 654px;
-            height: 644px;
+            width: 860px;
+            height: 70%;
+            max-width: 80%;
             background-color: #051933;
             border-radius: 20px;
             margin: 20px auto;

src/views/particulars/video.vue

@@ -23,11 +23,12 @@
                 </div>
                 <div class="lf-container"> 
                     <div class="video-container">
-                        <div class="item" v-for="(item,index) in dataList" :key="index" @click="showVideo(item)">
-                            <video src="https://www.runoob.com/try/demo_source/movie.mp4" poster="./images/video.png">
+                        <div class="item" v-for="(item,index) in dataList" :key="index" @click="showVideo(item)" :data="item">
+                            <!-- <video src="https://www.runoob.com/try/demo_source/movie.mp4" poster="./images/video.png">
                                 <source src="movie.mp4"  type="video/mp4">
-                            </video>
-                            <p>{{NumConvertLM(item.goafOrebelt)}}-{{item.goafOrebody}}-{{item.goafOreheight}}-{{item.goafName}}</p>
+                            </video> -->
+                            <HkwsVideo :ref="'HkwsVideo'+item.goafDevId"></HkwsVideo>
+                            <p style="cursor:pointer;">{{NumConvertLM(item.goafOrebelt)}}-{{item.goafOrebody}}-{{item.goafOreheight}}-{{item.goafName}}</p>
                         </div>
                     </div>
                     <div class="el-pagination-wrap">
@@ -139,6 +140,18 @@ import { NumConvertLM } from '@/utils'
                 const dataList = data.filter((item) => item.goafDevTypename.includes('摄像头'))
                 this.dataList = dataList.filter((item, index) => index >= start && index < end)
                 this.total = dataList.length
+                this.$nextTick(()=>{
+                    this.dataList.forEach((item)=>{
+                        this.$refs['HkwsVideo'+item.goafDevId][0].loadData({
+                            streamServeUrl:item.goafDevSocketAddr,
+                            szIP: item.goafDevIp,    // protocol ip
+                            szPort: item.goafDevPort,            // protocol port
+                            szUsername:item.goafDevAccount,     // device username
+                            szPassword: item.goafDevPwd, // device password    
+                            state:false    
+                        })
+                    })
+                })
             })
         },
         showVideo(item){
@@ -264,8 +277,9 @@ import { NumConvertLM } from '@/utils'
         bottom: 0;
         background-color: rgba(222, 229, 236, 0.45);
         .video-dialog-container{
-            width: 654px;
-            height: 535px;
+            width: 860px;
+            height: 70%;
+            max-width: 80%;
             background-color: #051933;
             border-radius: 20px;
             margin: 20px auto;

vue.config.js

@@ -3,7 +3,7 @@ const path = require('path')
 
 module.exports = defineConfig({
   publicPath: './',
-  outputDir: 'dist',
+  outputDir: 'goaf_bigScreen',
   assetsDir: 'static',
   transpileDependencies: true,
   productionSourceMap: false,