submit

public/index.html

@@ -13,10 +13,10 @@
     </noscript>
     <script src="./js/jquery-3.1.1.min.js"></script>
     <!-- 海康威视 -->
-    <script src="./hkws/encryption/AES.js"></script>
+    <!-- <script src="./hkws/encryption/AES.js"></script>
     <script src="./hkws/encryption/cryptico.min.js"></script>
     <script src="./hkws/encryption/crypto-3.1.2.min.js"></script>
-    <script id="videonode" src="./hkws/webVideoCtrl.js"></script>
+    <script id="videonode" src="./hkws/webVideoCtrl.js"></script> -->
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>

src/components/HkwsVideo/iframe.vue

@@ -0,0 +1,62 @@
+<template>
+    <div id="divPluginIframe">
+        <a :href="iframeSrc" target="_blank">若监控无法播放请点击此处</a> 
+        <iframe :src="iframeSrc" frameborder="0" @load="iframeLoaded"></iframe>
+    </div>
+
+</template>
+<script>
+ export default {
+    name:'HkwsVideoiframe',
+    data(){
+        return{
+            iframeSrc:"",
+            oPlugin:{
+                iWidth: 650,             // plugin width
+                iHeight: 450             // plugin height                
+            },
+            oLiveView:{
+                iProtocol: 1,            // protocol 1：http, 2:https
+                szIP: "",    // protocol ip
+                szPort: "",            // protocol port
+                szUsername: "",     // device username
+                szPassword: "", // device password
+                iStreamType: 1,          // stream 1：main stream  2：sub-stream  3：third stream  4：transcode stream
+                iChannelID: 1,           // channel no
+                bZeroChannel: false      // zero channel
+            }
+        }
+    },
+    methods: {
+        loadData({
+            streamServeUrl="",        // 监控视频地址
+            szIP= "",    // protocol ip
+            szPort= "",            // protocol port
+            szUsername= "",     // device username
+            szPassword= "", // device password  
+        }){
+            this.iframeSrc=`${streamServeUrl}?name=${szUsername}&pwd=${szPassword}&ip=${szIP}&port=${szPort}`
+        }
+    }
+ }
+</script>
+<style lang="scss" scoped>
+#divPluginIframe {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border: 0;
+    position: relative;
+    padding: 0 20px;
+    a{
+        color: #f0e4e4;
+        &:hover{
+            color: #409eff;
+        }
+    }
+    iframe{
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

src/components/HkwsVideo/index.vue

@@ -24,7 +24,7 @@ import { ElMessage, ElLoading } from 'element-plus'
         }
     },
     created() {
-        this.initPlugin()
+        // this.initPlugin()
     },
     methods: {
         initPlugin(){
@@ -70,7 +70,7 @@ import { ElMessage, ElLoading } from 'element-plus'
                     });
                 }
             });
-        }
+        },        
     },
     unmounted() {
         var szDeviceIdentify = this.oLiveView.szIP + "_" +this.oLiveView.szPort;

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/mixins/mqtt.js

@@ -37,7 +37,7 @@ export default {
           password: 'houyaf1!'
         }  
         const ocId=this.user.ocId
-        const  subscribeList=[`topic/goaf/waring/person/${ocId}`,`topic/goaf/waring/sensor/${ocId}`,`topic/goaf/fill/scale/${ocId}`]
+        const  subscribeList=[`topic/goaf/waring/person/${ocId}`,`topic/goaf/waring/sensor/${ocId}`,`topic/goaf/fill/scale/${ocId}`,`topic/goaf/waring/camera/${ocId}`]
         const client = mqtt.connect(config.mqttUrl, options)
         client.on('connect', function() {
           client.subscribe(subscribeList, function(err) {

src/views/home/components/SensorInfoStatistics.vue

@@ -1,23 +1,61 @@
 <template>
-    <div class="item">
+    <div class="item SensorInfoStatistics">
         <div class="title">
             <span class="name">传感器实时信息统计</span>
             <span class="number">{{total}}</span>
         </div>
         <div class="container">
-            <div id="sensor-info-chart" v-if="status"></div>   
+            <!-- <div id="sensor-info-chart" v-if="status"></div>    -->
+            <div class="warn-item" @click="showWarnModel">
+                <div class="tag" v-if="warnInfo.goafName">{{NumConvertLM(warnInfo.goafOrebelt)}}-{{warnInfo.goafOrebody}}-{{warnInfo.goafOreheight}}-{{warnInfo.goafName}}</div>
+            </div>
         </div>
+        <div class="video-dialog" v-if="videoDialogVisible">
+             <div class="header">
+                <div class="name"><span v-if="warnInfo.goafName">{{NumConvertLM(warnInfo.goafOrebelt)}}-{{warnInfo.goafOrebody}}-{{warnInfo.goafOreheight}}-</span>{{warnInfo.goafName}}报警监控</div>
+                <div class="close" @click="videoDialogVisible=false"><el-icon><Close /></el-icon></div>
+             </div>
+            <!-- <video :src="video.src" id="video" controls></video> -->
+            <div class="demo-image__preview" v-if="capturePhotos.length>0">
+                <el-image
+                    style="width: 100px; height: 100px"
+                    :src="capturePhotos[0]"
+                    :zoom-rate="1.2"
+                    :preview-src-list="capturePhotos"
+                    :initial-index="4"
+                fit="cover"
+                />
+            </div> 
+            <HkwsVideo ref="HkwsVideo"></HkwsVideo>           
+        </div> 
     </div>
 </template>
     <script>
      import * as echarts from 'echarts';
      import { goafdevstatis} from '@/api/goaf/sensor'
+     import { NumConvertLM } from '@/utils'
+     import HkwsVideo from '@/components/HkwsVideo/iframe.vue'
       export default {
         name:"SensorInfoStatistics",
+        components:{
+            HkwsVideo
+        },        
         data(){
             return{
                 status:true,
+                warn_status:0,
                 total:0,
+                videoDialogVisible:false,
+                warnInfo:{
+                    "goafOrebody": "",
+                    "goafOrebelt": "",
+                    "goafOreheight": "",
+                    "fileUrl": "",
+                    "goafDevIp": "",
+                    "ocId": undefined,
+                    "goafName": ""
+                },
+                capturePhotos:[],
                 option :{
                     title:[
                         {
@@ -157,69 +195,80 @@
             }
         },
         created(){
-            this.$nextTick(()=>{
-                this.reload()
-            })
+            // this.$nextTick(()=>{
+            //     this.reload()
+            // })
         },        
         methods:{
+            NumConvertLM,
             init(){
-                var chartDom = document.getElementById('sensor-info-chart');
-                var myChart = echarts.init(chartDom);
-                this.option && myChart.setOption(this.option);      
-                myChart.on('click', (params)=> {
-                    // console.log("SensorInfoStatistics",params)
-                    this.$router.push({
-                        path: '/particulars/sensor',
-                        query: {
-                            id: '1'
-                        }
-                    })
-                });                   
+                // var chartDom = document.getElementById('sensor-info-chart');
+                // var myChart = echarts.init(chartDom);
+                // this.option && myChart.setOption(this.option);      
+                // myChart.on('click', (params)=> {
+                //     // console.log("SensorInfoStatistics",params)
+                //     this.$router.push({
+                //         path: '/particulars/sensor',
+                //         query: {
+                //             id: '1'
+                //         }
+                //     })
+                // });                   
             }
             ,reload(){      
                 this.$nextTick(()=>{
                     this.goafdevstatis()
                 })                 
-            },            
+            },  
+            warn(data){
+                this.warnInfo=data
+                $('.SensorInfoStatistics').find('.warn-item').addClass('warning')
+            },  
+            showWarnModel(){
+                this.videoDialogVisible=true
+                this.capturePhotos=[this.warnInfo.fileUrl]
+                if(this.isNull(this.warnInfo.goafDevSocketAddr)){
+                    console.error('未配置推流地址')
+                    return
+                }
+                if(this.isNull(this.warnInfo.goafDevIp)){
+                    console.error('未配置设备IP')
+                    return
+                }    
+                if(this.isNull(this.warnInfo.goafDevPort)){
+                    console.error('未配置设备端口')
+                    return
+                }
+                if(this.isNull(this.warnInfo.goafDevAccount)){
+                    console.error('未配置设备账号')
+                    return
+                }      
+                if(this.isNull(this.warnInfo.goafDevPwd)){
+                    console.error('未配置设备密码')
+                    return
+                }                 
+                this.$nextTick(()=>{
+                    this.$refs.HkwsVideo.loadData({
+                        streamServeUrl:this.warnInfo.goafDevSocketAddr,
+                        szIP: this.warnInfo.goafDevIp,    // protocol ip
+                        szPort: this.warnInfo.goafDevPort,            // protocol port
+                        szUsername:this.warnInfo.goafDevAccount,     // device username
+                        szPassword: this.warnInfo.goafDevPwd, // device password        
+                    })
+                })
+            },    
             goafdevstatis(){
                 let   option  =JSON.parse(JSON.stringify(this.option))
                 goafdevstatis().then((res)=>{
-                    this.total=res.data.goafDevTotalNum
-                    // let pressureSensorNum=res.data.pressureSensorNum
-                    // let displacementSensorNum=res.data.displacementSensorNum
-                    // let harmfulGasSensorNum=res.data.harmfulGasSensorNum
-
-                    // let pressureSensorOnlineNum=res.data.pressureSensorOnlineNum
-                    // let displacementSensorOnlineNum=res.data.displacementSensorOnlineNum
-                    // let harmfulGasSensorOnlineNum=res.data.harmfulGasSensorOnlineNum               
-
-                    // option.series[0].data[0].value=pressureSensorNum-pressureSensorOnlineNum
-                    // option.series[0].data[1].value=pressureSensorOnlineNum
-   
-                    // option.series[1].data[0].value=displacementSensorNum-displacementSensorOnlineNum
-                    // option.series[1].data[1].value=displacementSensorOnlineNum
-                    
-                    // option.series[2].data[0].value=harmfulGasSensorNum-harmfulGasSensorOnlineNum
-                    // option.series[2].data[1].value=displacementSensorNum-displacementSensorOnlineNu
-                    
-                    // if(!this.myChart){
-                    //     var chartDom = document.getElementById('sensor-status-chart');
-                    //     var myChart = echarts.init(chartDom);
-                    //     this.myChart=myChart 
-                    // }        
-                    // this.myChart.setOption(option);  
-                    // this.myChart.on('click', (params)=> {
-                    //     this.$router.push({
-                    //         path: '/particulars/sensor',
-                    //         query: {
-                    //             id: '0'
-                    //         }
-                    //     })
-                    // }); 
-                                    
+                    this.total=res.data.goafDevTotalNum                                   
                 })
-            }
-            
+            },
+            isNull(val){
+                if(val===undefined||val==="undefined"&&val===null&&val===""){
+                    return true
+                }
+                return false
+            },            
         },
         destroyed() {
             this.status=false
@@ -234,4 +283,94 @@
             height: 100%;
         }    
     }
+    .demo-image__preview{
+        padding:0 0  10px 20px;
+    }
+    .video-dialog{
+        position: fixed;
+        z-index: 9999;
+        left: 10px;
+        top: 0;
+        right: 10px;
+        bottom: 0;
+        background-color: rgba(5, 25, 51, 0.98);
+        .name{
+            color: #fff;
+            font-size: 20px;
+            line-height:1 ;  
+            text-indent: 20px;        
+        }
+        .header{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .close{
+                height: 50px;
+                line-height: 50px;
+                display: inline-block;
+                padding: 10px 20px;
+                cursor: pointer;
+                color: #fff;
+                font-size: 36px;
+            }
+        }
+        #video{
+            display: block;
+            width: 80%;
+            max-height: 80vh;
+            box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
+            margin: 10px auto;
+        }        
+    }
+    .warn-item{
+        width: 100px;
+        height: 100px;
+        position: relative;
+        margin-left: 10px;
+        display: none;
+        .tag{
+            width: 120px;
+            display: inline-block;
+            background: #21649c;
+            overflow:hidden; 
+            text-overflow:ellipsis; 
+            white-space:nowrap; 
+            color: #fff;
+            text-align: center;
+            z-index: 9;
+            position: absolute;
+            bottom: -6px;
+            font-size: 12px;
+        }   
+        &::after{
+            display: block;
+            content: "";
+            height: 60%;
+            width: 60%;
+            border-radius: 50% 50% 10% 10%;
+            position: absolute;
+            transform: translate(-50%,-50%);
+            left: 50%;
+            top: 50%;
+            z-index: 9;
+            background-image: radial-gradient(#dee7f6, #797878);
+            box-shadow: 0 0 20px #fff;
+        }             
+    }
+
+  /*动画*/
+.warning {
+  display: block;
+  &::after{
+    background-image: radial-gradient(yellow,red);
+    animation: twinkle 0.5s infinite alternate;
+    box-shadow: 0 0 20px red;
+  }
+}
+
+@keyframes twinkle {
+    0% {opacity: 0.9;}
+    50% {opacity: 0.5;}
+    100% {opacity: 0;}
+}
     </style>

src/views/home/index.vue

@@ -121,25 +121,29 @@ import {
             }
             let data=message?JSON.parse(Uint8ArrayToString(message)):''
             this.$nextTick(()=>{
-                if(topic==="topic/goaf/waring/person"){
+                if(topic.includes("topic/goaf/waring/person")){
                     goafhdangerstatis({
                         hdangerType:0
                     }).then((res)=>{
                         this.$refs['warning-statistics'].loadData(res.data)
                     })  
                     this.$refs['check-warn-report'].load()   
-                }else if(topic==="topic/goaf/waring/sensor"){
+                }else if(topic.includes("topic/goaf/waring/sensor")){
                     goafhdangerstatis({
                         hdangerType:1
                     }).then((res)=>{
                         this.$refs['sensor-warning-statistics'].loadData(res.data)
                     }) 
                     this.$refs['sensor-warning-info'].load()     
-                }else if(topic==="topic/goaf/fill/scale"){
+                }else if(topic.includes("topic/goaf/fill/scale")){
                     // console.log('填充信息改变',{data})
                     this.$refs.map.updateMapLayers(data.mapId)
+                }else if(topic.includes("topic/goaf/waring/camera")){
+                        /**更新chart */
+                    this.$refs['sensor-info-statistics'].warn(data);
                 }
                 
+                
                 if(data.topictype==='add'){
                     this.$refs.map.updateLayerState(data.layerId)
                 }else if(data.topictype==="completed"){

src/views/particulars/video.vue

@@ -42,12 +42,12 @@
                 <div class="close" @click="videoDialogVisible=false"><el-icon><Close /></el-icon></div>
              </div>
             <!-- <video :src="video.src" id="video" controls></video> -->
-            <HkwsVideo></HkwsVideo>
+            <HkwsVideo ref="HkwsVideo"></HkwsVideo>
         </div>    
     </div>
 </template>
 <script>
-import HkwsVideo from '@/components/HkwsVideo'
+import HkwsVideo from '@/components/HkwsVideo/iframe'
 import {  getGoafBaseInfo } from '@/api/goaf/info'
  export default {
     name:"particulars_video",
@@ -122,11 +122,36 @@ import {  getGoafBaseInfo } from '@/api/goaf/info'
 
         },
         showVideo(item){
-            this.video={
-                src:'https://www.runoob.com/try/demo_source/movie.mp4',
-                name:"{Ⅲ号-770-32008}：封堵口"
-            }
-            this.videoDialogVisible=true;
+                if(this.isNull(item.goafDevSocketAddr)){
+                    console.error('未配置推流地址')
+                    return
+                }
+                if(this.isNull(item.goafDevIp)){
+                    console.error('未配置设备IP')
+                    return
+                }    
+                if(this.isNull(item.goafDevPort)){
+                    console.error('未配置设备端口')
+                    return
+                }
+                if(this.isNull(item.goafDevAccount)){
+                    console.error('未配置设备账号')
+                    return
+                }      
+                if(this.isNull(item.goafDevPwd)){
+                    console.error('未配置设备密码')
+                    return
+                }    
+                this.videoDialogVisible=true;             
+                this.$nextTick(()=>{
+                    this.$refs.HkwsVideo.loadData({
+                        streamServeUrl:item.goafDevSocketAddr,
+                        szIP: item.goafDevIp,    // protocol ip
+                        szPort: item.goafDevPort,            // protocol port
+                        szUsername:item.goafDevAccount,     // device username
+                        szPassword: item.goafDevPwd, // device password        
+                    })
+                })
         },
         changeArea(type) {
             const goafs = this.deeepClone(this.goafList)
@@ -165,6 +190,12 @@ import {  getGoafBaseInfo } from '@/api/goaf/info'
             }
             this.$forceUpdate()
         },  
+        isNull(val){
+            if(val===undefined||val==="undefined"&&val===null&&val===""){
+                return true
+            }
+            return false
+        },
         unique(arr = [], name = 'name') {
             const res = new Map()
             return arr.filter((item) => !res.has(item[name]) && res.set(item[name], 1))