-
-
+
- {{ n.name }}
+ {{ n.name }}
{{ n.quantity }}
@@ -34,27 +34,19 @@
流量
- {{
- typeValue.flow
- }}
+ {{ typeValue.flow }}
车头时距
- {{
- typeValue.heavy
- }}
+ {{ typeValue.heavy }}
排队数
- {{
- typeValue.n_queue
- }}
+ {{ typeValue.n_queue }}
检测数
- {{
- typeValue.n_stay
- }}
+ {{ typeValue.n_stay }}
-
-
-
{{ this.chartName+ '-' + this.componentName + '-' + '表格'}}
+
+
+ {{ this.chartName + '-' + this.componentName + '-' + '表格' }}
{{ typeValue.time }}
@@ -87,28 +80,56 @@
-
+
-
+
-
-
+
-
+
\ No newline at end of file
+
diff --git a/src/views/bounced/dataBoard.vue b/src/views/bounced/dataBoard.vue
index bf705e56..38b75598 100644
--- a/src/views/bounced/dataBoard.vue
+++ b/src/views/bounced/dataBoard.vue
@@ -429,10 +429,8 @@ export default {
ele.trigger.pop();
} else {
// 该时间的触发数据
- if (item.type_data != null) {
- // console.log(item,'461461');
- this.typeValue = item;
- }
+ this.typeValue = item;
+
ele.trigger.unshift(item);
}
}
@@ -460,10 +458,10 @@ export default {
if (ele.cycleTimeData.length == 10) {
ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0);
} else {
- if (item.type_data != null) {
- // 周期时刻的类型数据
- this.typeCycleTimeData = item;
- }
+ // if (item.type_data != null) {
+ // 周期时刻的类型数据
+ this.typeCycleTimeData = item;
+ // }
ele.cycleTimeData.unshift(item);
}
}
diff --git a/src/views/index.vue b/src/views/index.vue
index 9b2cfee6..3e1800dd 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -15,12 +15,17 @@
v-if="videoUnityShow"
>
-
-
+
-
+
@@ -32,8 +37,16 @@
- 交通分析
+ 交通分析
-
+
@@ -80,31 +93,42 @@
{{ item }}
-
+
-
-
-
-
+
+
+
+
-
+
-
-
+ "
+ >
+
-
-
-
+
+
+
@@ -207,8 +228,8 @@ export default {
dialogFormVisible: false,
areaComponent: false,
indexModule: false,
- disabledTrafficAnalysis:true,
- disabledVideoAnalysis:false,
+ disabledTrafficAnalysis: true,
+ disabledVideoAnalysis: false,
//判断模拟区，画布区
numberNew: 1,
speed: false,
@@ -276,11 +297,10 @@ export default {
componentType: '',
typeFiltering: '',
typeData: [],
- FlowType:'出流'
-
+ FlowType: '出流'
},
// typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'],
- typeData:['机动车','非机动车','行人'],
+ typeData: ['机动车', '非机动车', '行人'],
//展现形式
presentation: ['数值', '表格', '时间曲线图', '均值图'],
trackForm: {
@@ -328,29 +348,29 @@ export default {
analysisConfigurationdata: {},
//触发数据
triggerData: [],
- triggerListData:[],
+ triggerListData: [],
//周期时刻
- cycleTimeData:[],
+ cycleTimeData: [],
//周期统计
- cycleStatistics:[],
+ cycleStatistics: [],
//视频类型
videoType: '',
videoAnalysisShow: false,
trafficAnalysisShow: false,
//控制unity展示
- videoUnityShow:true,
- videoAnalysisSta:'',
- analysis:{
- trafficAnalysisPath1:'',
- trafficAnalysisPath2:'',
- videoAnalysisPath:'',
- videoName:'',
- videoPath:'',
- videoTotalFrames:'',
- videoType:'实时视频'
+ videoUnityShow: true,
+ videoAnalysisSta: '',
+ analysis: {
+ trafficAnalysisPath1: '',
+ trafficAnalysisPath2: '',
+ videoAnalysisPath: '',
+ videoName: '',
+ videoPath: '',
+ videoTotalFrames: '',
+ videoType: '实时视频'
},
- description:'请等待排队',
- ipData:''
+ description: '请等待排队',
+ ipData: ''
};
},
@@ -361,8 +381,8 @@ export default {
//client.end();
},
created() {
- window.OnScene = this.OnSceneN;
- this.getAllSectionalData(this.$route.query.id);
+ window.OnScene = this.OnSceneN;
+ this.getAllSectionalData(this.$route.query.id);
this.VideoId = this.$route.query.id;
this.number = this.$route.query.num;
this.titName = this.$route.query.name;
@@ -371,9 +391,9 @@ export default {
// window.getModifyTheName = this.getModifyTheNameN;
window.getSingleComponentId = this.getSingleComponentIdN;
window.getSimulationAreaEdit = this.getSimulationAreaEdit;
-
- window.delSuccess= this.delSuccess;
-
+
+ window.delSuccess = this.delSuccess;
+
// console.log("id",id)
// console.log("num",num)
// console.log("name",name)
@@ -383,31 +403,36 @@ export default {
if (this.$route.query.type == '实时视频') {
this.videoAnalysisShow = false;
this.trafficAnalysisShow = false;
-
+
this.createMqtt();
-
+
// document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
- } else if (this.$route.query.type == '离线视频'){
+ } else if (this.$route.query.type == '离线视频') {
this.videoAnalysisShow = true;
this.trafficAnalysisShow = true;
- this.getAnalysisStatus()
+ this.getAnalysisStatus();
// this.createMqtt();
// if(this.$route.query.status=='未分析'){
// }
// if(this.$route.query.status=='未分析'){
// // document.getElementById('mapModule').contentWindow.lixianVideo("实时视频");
// }else{
- // }
+ // }
}
},
- mounted() {
-
- },
+ mounted() {},
methods: {
/** 创建mqtt */
createMqtt() {
//创建链接，接收数据
- this.topicSends = ['stream' + this.number, 'trajectory' + this.number, 'detection' + this.number,'trigger-'+ this.$route.query.id,'cycle_time-'+ this.$route.query.id,'cycle_statistics-'+ this.$route.query.id];
+ this.topicSends = [
+ 'stream' + this.number,
+ 'trajectory' + this.number,
+ 'detection' + this.number,
+ 'trigger-' + this.$route.query.id,
+ 'cycle_time-' + this.$route.query.id,
+ 'cycle_statistics-' + this.$route.query.id
+ ];
window.PubScribe(this.topicSends, this.number, this.realInfo);
// mqtt = mqttConfig;
/*mqtt = new mqttConfig(this.topicSends);
@@ -436,34 +461,34 @@ export default {
});*/
},
//获取视频分析，交通分析状态数据
- getAnalysisStatus(){
+ getAnalysisStatus() {
getVideoStatus(this.$route.query.id).then(res => {
- console.log("res.data",res.data)
+ console.log('res.data', res.data);
//视频分析状态
- if(res.data.data.videoAnalysisStatus == '未分析'){
- this.disabledTrafficAnalysis= true
- this.videoUnityShow = true
- this.analysisData()
- }else if(res.data.data.videoAnalysisStatus == '分析中'){
- this.disabledVideoAnalysis= true
- this.videoUnityShow = false
- setTimeout(() => {
- this.getAnalysisStatus()
- }, 5000);
- }else if(res.data.data.videoAnalysisStatus == '已分析'){
- this.videoUnityShow = true
- this.videoAnalysisSta = res.data.data.videoAnalysisStatus
- this.disabledTrafficAnalysis= false
- this.analysisData()
- //交通分析状态
- }else if(res.data.data.trafficAnalysisStatus=='未分析'){
- this.disabledVideoAnalysis= true
- }else if(res.data.data.trafficAnalysisStatus=='分析中'){
- this.disabledVideoAnalysis= true
- this.disabledTrafficAnalysis= true
- }else if(res.data.data.videoAnalysisStatus == '已分析'||res.data.data.trafficAnalysisStatus == '已分析'){
- this.disabledVideoAnalysis= false
- this.disabledTrafficAnalysis= true
+ if (res.data.data.videoAnalysisStatus == '未分析') {
+ this.disabledTrafficAnalysis = true;
+ this.videoUnityShow = true;
+ this.analysisData();
+ } else if (res.data.data.videoAnalysisStatus == '分析中') {
+ this.disabledVideoAnalysis = true;
+ this.videoUnityShow = false;
+ setTimeout(() => {
+ this.getAnalysisStatus();
+ }, 5000);
+ } else if (res.data.data.videoAnalysisStatus == '已分析') {
+ this.videoUnityShow = true;
+ this.videoAnalysisSta = res.data.data.videoAnalysisStatus;
+ this.disabledTrafficAnalysis = false;
+ this.analysisData();
+ //交通分析状态
+ } else if (res.data.data.trafficAnalysisStatus == '未分析') {
+ this.disabledVideoAnalysis = true;
+ } else if (res.data.data.trafficAnalysisStatus == '分析中') {
+ this.disabledVideoAnalysis = true;
+ this.disabledTrafficAnalysis = true;
+ } else if (res.data.data.videoAnalysisStatus == '已分析' || res.data.data.trafficAnalysisStatus == '已分析') {
+ this.disabledVideoAnalysis = false;
+ this.disabledTrafficAnalysis = true;
}
});
},
@@ -471,56 +496,56 @@ export default {
videoAnalysisBtn() {
startVideoAnalysis(this.$route.query.id).then(res => {
//
- if(res.data.msg=='请求成功'){
+ if (res.data.msg == '请求成功') {
this.$message({
- message: '启动成功',
- type: 'success'
- });
- setTimeout(() => {
- this.getAnalysisStatus()
- }, 5000);
+ message: '启动成功',
+ type: 'success'
+ });
+ setTimeout(() => {
+ this.getAnalysisStatus();
+ }, 5000);
// if(this.videoAnalysisSta=='已分析'){
// }else if(this.videoAnalysisSta=='分析中'){
// this.description = '正在分析中'
// setTimeout(() => {
// this.getAnalysisStatus()
- // }, 5000);
+ // }, 5000);
// }else if(this.videoAnalysisSta=='未分析'){
- // }
- }
+ // }
+ }
});
},
//交通分析
trafficAnalysisBtn() {
startTrafficAnalysis(this.$route.query.id).then(res => {
//
- console.log("res.data",res.data.data)
- if (res.data.code == 200) {
- this.$message({
- message: res.data.msg,
- type: 'success'
- });
- document.getElementById('mapModule').contentWindow.addColor()
- }else{
- this.$message({
- message: res.data.msg,
- type: 'warning'
- });
- }
+ console.log('res.data', res.data.data);
+ if (res.data.code == 200) {
+ this.$message({
+ message: res.data.msg,
+ type: 'success'
+ });
+ document.getElementById('mapModule').contentWindow.addColor();
+ } else {
+ this.$message({
+ message: res.data.msg,
+ type: 'warning'
+ });
+ }
});
},
//获取视频分析结果
- analysisData(){
- getAnalysisData(this.$route.query.id).then(res => {
- console.log("res.data.data",res.data.data)
- this.analysis.trafficAnalysisPath1 = res.data.data.trafficAnalysisPath1
- this.analysis.trafficAnalysisPath2 = res.data.data.trafficAnalysisPath2
- this.analysis.videoAnalysisPath = res.data.data.videoAnalysisPath
- this.analysis.videoName = res.data.data.videoName
- this.analysis.videoPath = res.data.data.videoPath
- this.analysis.videoTotalFrames = res.data.data.videoTotalFrames
- this.analysis.videoType=this.$route.query.type
+ analysisData() {
+ getAnalysisData(this.$route.query.id).then(res => {
+ console.log('res.data.data', res.data.data);
+ this.analysis.trafficAnalysisPath1 = res.data.data.trafficAnalysisPath1;
+ this.analysis.trafficAnalysisPath2 = res.data.data.trafficAnalysisPath2;
+ this.analysis.videoAnalysisPath = res.data.data.videoAnalysisPath;
+ this.analysis.videoName = res.data.data.videoName;
+ this.analysis.videoPath = res.data.data.videoPath;
+ this.analysis.videoTotalFrames = res.data.data.videoTotalFrames;
+ this.analysis.videoType = this.$route.query.type;
});
},
//停止订阅mqtt
@@ -534,7 +559,7 @@ export default {
realInfo(topic, message) {
switch (topic) {
// 接收托片
- case 'img'+this.number:
+ case 'img' + this.number:
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
@@ -542,7 +567,7 @@ export default {
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// console.log("msg",msg)
// document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
-
+
if (msg.rate == 'high') {
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
} else {
@@ -551,7 +576,7 @@ export default {
} catch (error) {}
break;
// 树结构
- case 'stream'+this.number:
+ case 'stream' + this.number:
try {
const utf8decoder1 = new TextDecoder();
const u8arr = new Uint8Array(message);
@@ -562,7 +587,7 @@ export default {
} catch (error) {}
break;
// 控制台输出
- case 'trajectory'+this.number:
+ case 'trajectory' + this.number:
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
@@ -573,7 +598,7 @@ export default {
} catch (error) {}
break;
// 触发
- case 'detection'+this.number:
+ case 'detection' + this.number:
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
@@ -588,41 +613,38 @@ export default {
}
document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId));
}
- } catch (error) {}
- break;
- case 'trigger-'+this.$route.query.id:
- try {
- // console.log("trigger_msgN",message)
+ } catch (error) {}
+ break;
+ case 'trigger-' + this.$route.query.id:
+ try {
+ // console.log("trigger_msgN",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = [];
const msgN = JSON.parse(temp);
- console.log("trigger_msgN",msgN)
this.triggerListData = msgN;
} catch (error) {}
break;
- case 'cycle_time-'+this.$route.query.id:
- try {
- // console.log("trigger_msgN",message)
+ case 'cycle_time-' + this.$route.query.id:
+ try {
+ // console.log("trigger_msgN",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = [];
const msgN = JSON.parse(temp);
- // console.log("trigger_msgN",msgN)
this.cycleTimeData = msgN;
} catch (error) {}
break;
- case 'cycle_statistics-'+this.$route.query.id:
- try {
- // console.log("trigger_msgN",message)
+ case 'cycle_statistics-' + this.$route.query.id:
+ try {
+ // console.log("trigger_msgN",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = [];
const msgN = JSON.parse(temp);
- // console.log("trigger_msgN",msgN)
this.cycleStatistics = msgN;
} catch (error) {}
break;
@@ -643,23 +665,25 @@ export default {
//初始化unity
OnSceneN() {
var ip = window.location.host;
- this.ipData = "http://"+ip.split(":")[0]+':5000'
- // document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
- document.getElementById('mapModule').contentWindow.getIpData('http://172.16.1.168:5000');
- if(this.$route.query.type=='离线视频'){
- document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
- }
- document.getElementById('mapModule').contentWindow.postVideoId(JSON.stringify(this.$route.query.id+ ',' +this.$route.query.type));
+ this.ipData = 'http://' + ip.split(':')[0] + ':5000';
+ // document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
+ document.getElementById('mapModule').contentWindow.getIpData('http://172.16.1.168:5000');
+ if (this.$route.query.type == '离线视频') {
+ document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
+ }
+ document
+ .getElementById('mapModule')
+ .contentWindow.postVideoId(JSON.stringify(this.$route.query.id + ',' + this.$route.query.type));
},
//删除图形成功获取数据
- delSuccess(){
- if(this.$route.query.type=='离线视频'){
- this.$message({
- type: "warning",
- message: "请点击交通分析，获取最新数据！",
- showClose: true,
- duration:0,
- });
+ delSuccess() {
+ if (this.$route.query.type == '离线视频') {
+ this.$message({
+ type: 'warning',
+ message: '请点击交通分析，获取最新数据！',
+ showClose: true,
+ duration: 0
+ });
}
},
// //新增组件根据组件id获取单个组件数据
@@ -682,14 +706,14 @@ export default {
this.componentForm.componentName = res.data.data.componentName;
if (res.data.data.timeMode != '') {
this.componentForm.timeMode = res.data.data.timeMode;
- }else{
- console.log("this.componentForm.timeMode",this.componentForm.timeMode);
- console.log("this.componentForm.componentType",this.componentForm.componentType);
- if(this.componentForm.componentType=='延误'||this.componentForm.componentType=='拥堵'){
- console.log("this.componentForm.timeMode",this.componentForm.timeMode);
- this.componentForm.timeMode = '周期统计'
- }else{
- this.componentForm.timeMode = '触发'
+ } else {
+ console.log('this.componentForm.timeMode', this.componentForm.timeMode);
+ console.log('this.componentForm.componentType', this.componentForm.componentType);
+ if (this.componentForm.componentType == '延误' || this.componentForm.componentType == '拥堵') {
+ console.log('this.componentForm.timeMode', this.componentForm.timeMode);
+ this.componentForm.timeMode = '周期统计';
+ } else {
+ this.componentForm.timeMode = '触发';
}
}
this.componentForm.componentParameterId = res.data.data.componentParameterId;
@@ -786,12 +810,12 @@ export default {
}
if (res.data.data.timeMode != '') {
this.componentForm.timeMode = res.data.data.timeMode;
- }else{
- if(this.componentForm.componentType=='延误'||this.componentForm.componentType=='拥堵'){
- this.componentForm.timeMode = '周期统计'
- }else{
- this.componentForm.timeMode = '触发'
- }
+ } else {
+ if (this.componentForm.componentType == '延误' || this.componentForm.componentType == '拥堵') {
+ this.componentForm.timeMode = '周期统计';
+ } else {
+ this.componentForm.timeMode = '触发';
+ }
}
this.componentForm.componentName = res.data.data.componentName;
this.componentForm.componentParameterId = res.data.data.componentParameterId;
@@ -945,7 +969,7 @@ export default {
message: res.data.msg,
type: 'success'
});
- // setTimeout(() => {
+ // setTimeout(() => {
// this.$message({
// type: "warning",
// message: "请点击交通分析，获取最新数据！",
@@ -953,12 +977,14 @@ export default {
// duration:0,
// });
// }, 3000);
-
+
document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));
- document.getElementById('mapModule').contentWindow.postFigureName(
+ document
+ .getElementById('mapModule')
+ .contentWindow.postFigureName(
JSON.stringify(res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew)
);
-
+
this.dialogFormVisible = false;
} else {
this.$message({
@@ -1002,12 +1028,12 @@ export default {
message: res.data.msg,
type: 'success'
});
- setTimeout(() => {
+ setTimeout(() => {
this.$message({
- type: "warning",
- message: "请点击交通分析，获取最新数据！",
- showClose: true,
- duration:0,
+ type: 'warning',
+ message: '请点击交通分析，获取最新数据！',
+ showClose: true,
+ duration: 0
});
}, 5000);
console.log('startFigureName', this.startFigureName);
@@ -1047,8 +1073,7 @@ export default {
formData.append('endValue', componentForm.endValue);
formData.append('startValue', componentForm.startValue);
formData.append('timeMode', componentForm.timeMode);
-
-
+
formData.append('presentationForm', '矩阵图');
} else if (componentForm.componentType == '类型') {
//名称
@@ -1075,7 +1100,7 @@ export default {
formData.append('startValue', componentForm.startValue);
formData.append('timeMode', componentForm.timeMode);
formData.append('presentationForm', componentForm.presentationForm);
- formData.append('flowType', componentForm.FlowType);
+ formData.append('flowType', componentForm.FlowType);
}
axios({
method: 'post',