2023022802

src/views/AnalysisMain.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="content-box">
     <!-- v-if="videoTypeShow" -->
-   <div class="videoTypeBox" v-if="videoTypeShow">
+   <div class="videoTypeBox" >
     <el-form :inline="true" :model="videoTypeForm" class="demo-form-inline" >
      <el-form-item label="视频源类型：" >
             <el-radio-group v-model="videoTypeForm.videoType">
@@ -13,8 +13,8 @@
   </div>
   <div>
     <el-row>
-  <el-col :span="6" v-for="(item, index) in videoList" :key="item.id" :offset="index > 0 ? 0 : 0" >
+  <el-col :span="6" v-for="(item, index) in videoList" :key="item.id" :offset="index > 0 ? 0 : 0"  ref="typeCard">
-    <el-card :body-style="{ padding: '0px' }" class="card" >
+    <el-card :body-style="{ padding: '0px' }" class="card" :loading="loading">
         <div class="type">
             <img src="@/assets/img/AnalysisMain/leftTop.png" alt="" v-if="item.type=='实时视频'">
             <img src="@/assets/img/AnalysisMain/leftTop2.png" alt="" v-if="item.type=='离线视频'">
@@ -132,6 +132,7 @@ import mqttConfig from "@/utils/mqttConfig.js";
 var mqtt; //mqtt 处理对象（全局变量）
 var client;
 const os = require('os');
+
 export default {
   data(){
     return{
@@ -156,39 +157,45 @@ export default {
         formLabelWidth: '120px',
         formLabelWidth: '200px',
         videoTypeForm:{
-            // videoType:'实时视频'
+            videoType:'实时视频'
-             videoType:'离线视频'
+            //  videoType:'离线视频'
         },
         videoList:[],
          fullscreenLoading: false,
          ip:'',
 
     }
+  },
+ 
+   //离开当前页面后执行
+destroyed: function () {
+//  console.log("离开当前页")
+//   client.end();
+},
+created() {
+this.getVideoList()
+ 
+   
 },
   mounted() {
     console.log("dialogFormVisible",this.dialogFormVisible)
     //  console.log("11111111", this.getIPAddress())
   
  
-    this.getVideoList()
    this.createMqtt()
       
-  },
-   //离开当前页面后执行
-destroyed: function () {
-//  console.log("离开当前页")
-//   client.end();
   },
   methods: {
          /** 创建mqtt */
     createMqtt() {
       //创建链接，接收数据
       if(this.videoTypeForm.videoType=='实时视频'){
+        console.log("this.videoTypeForm.videoType",this.videoTypeForm.videoType)
          window.PubScribe(null,-1,this.realInfo);
       }else if(this.videoTypeForm.videoType=='离线视频'){
         console.log("this.videoTypeForm.videoType",this.videoTypeForm.videoType)
          this.topicSends = ['VideoStatusData'];
-            window.PubScribe(this.topicSends,-1, this.realInfo);
+            window.PubScribe(this.topicSends,'1', this.realInfo);
       }
 
     },
@@ -260,6 +267,7 @@ destroyed: function () {
               const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
               const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
               console.log("VideoStatusData", msg)   //msg为转换后的JSON数据
+              this.changeStatus(msg)
              
               
           } catch (error) {
@@ -268,6 +276,34 @@ destroyed: function () {
           break;
       }
       this.receiveNews = "";
+    },
+    changeStatus(msg){
+        for (let i = 0; i < this.videoList.length; i++) {
+          //分析中
+            if(msg.type=='video_under_analysis'&&msg.video_id==this.videoList[i].id){
+                this.videoList[i].videoAnalysisStatus = '分析中'
+                 var numSatus= msg.number_frames/msg.total_frames*100
+                 var loadingcard =  this.$loading({
+                      lock: true,
+                      text: parseInt(numSatus)+'%',
+                      target: '.el-card',
+                      spinner: 'el-icon-loading',
+                      background: 'rgba(0, 0, 0, 0.7)'
+                    });
+            }else if(msg.type=='video_analyzed'&&msg.video_id==this.videoList[i].id){
+                //已分析
+                console.log("已分析")
+                this.videoList[i].videoAnalysisStatus = '已分析'
+                loadingcard.close();
+                // v-loading="loading"  shadow="hover" element-loading-background="rgba(0, 0, 0, 0)"
+            }else if(msg.type=='video_analyse_unusual'&&msg.video_id==this.videoList[i].id){
+                //分析异常
+                 console.log("分析异常")
+                 this.videoList[i].videoAnalysisStatus = '分析异常'
+                  loadingcard.close();
+            }  
+        }
+            
     },
      informationInfo(data,item) {
         console.log("data",data)
@@ -498,8 +534,18 @@ destroyed: function () {
         getGetShipjk().then(res=>{
             console.log("res",res)
             if(res.data.msg=='成功'){
+               if(res.data.data.length!=0){
+                    this.videoTypeForm.videoType = res.data.data[0].videoType
+                    if(this.videoTypeForm.videoType=='离线视频'){
+                        this.createMqtt()
+                    }
                     
+                }else{
+
+                }
+                  console.log("this.videoTypeForm.videoType",this.videoTypeForm.videoType)
                 var arr = [];
+                
                 res.data.data.forEach((item)=>{
                         arr.push({
                               id:  item.videoId,  
@@ -512,10 +558,13 @@ destroyed: function () {
                               img: require('@/assets/img/AnalysisMain/img1.png'),
                               trafficAnalysisStatus:item.trafficAnalysisStatus,
                             videoAnalysisStatus:item.videoAnalysisStatus,
+                            numberFrames:item.numberFrames,
+                            totalFrames:item.totalFrames,
                             });
                         }) 
                 this.videoList=arr
-                this.videoTypeForm.videoType = this.videoList[0].type
+                
+                
                 if(this.videoList.length=='0'){
                     this.videoTypeShow = true
                 }else{