2023022802
This commit is contained in:
parent
6fc3855ff1
commit
c52cffbddd
|
|
@ -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-card :body-style="{ padding: '0px' }" class="card" >
|
||||
<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" :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,8 +157,8 @@ export default {
|
|||
formLabelWidth: '120px',
|
||||
formLabelWidth: '200px',
|
||||
videoTypeForm:{
|
||||
// videoType:'实时视频'
|
||||
videoType:'离线视频'
|
||||
videoType:'实时视频'
|
||||
// videoType:'离线视频'
|
||||
},
|
||||
videoList:[],
|
||||
fullscreenLoading: false,
|
||||
|
|
@ -165,30 +166,36 @@ export default {
|
|||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log("dialogFormVisible",this.dialogFormVisible)
|
||||
// console.log("11111111", this.getIPAddress())
|
||||
|
||||
|
||||
this.getVideoList()
|
||||
this.createMqtt()
|
||||
|
||||
},
|
||||
|
||||
//离开当前页面后执行
|
||||
destroyed: function () {
|
||||
// console.log("离开当前页")
|
||||
// client.end();
|
||||
},
|
||||
created() {
|
||||
this.getVideoList()
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
console.log("dialogFormVisible",this.dialogFormVisible)
|
||||
// console.log("11111111", this.getIPAddress())
|
||||
|
||||
|
||||
this.createMqtt()
|
||||
|
||||
},
|
||||
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,7 +267,8 @@ 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{
|
||||
|
|
|
|||
Loading…
Reference in New Issue