lixiaobang
/
TransFlow
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

bug修改

This commit is contained in:
qiudan 2023-10-31 15:34:09 +08:00
parent 33ea88f35e
commit 4f12905530
14 changed files with 857 additions and 692 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/VideoWeb/Build/APP.data.unityweb
View File

Binary file not shown.

BIN
public/VideoWeb/Build/APP.framework.js.unityweb
View File

Binary file not shown.

BIN
public/VideoWeb/Build/APP.wasm.unityweb
View File

Binary file not shown.

2
public/VideoWeb/index.html
View File

@ -38,7 +38,7 @@
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
// var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var warningBanner = document.querySelector("#unity-warning");
var black = document.querySelector("#black");
// Shows a temporary message banner/ribbon for a few seconds, or

41
src/components/chart/lineChart.vue
View File

@ -25,6 +25,18 @@
export default {
name: 'lineChart', //折线图组件
props: {
itemData: {
type: Object,
default() {
return {};
}
},
originalDataArr: {
type: Array,
default() {
return [];
}
},
list: {
type: Array,
default() {
@ -78,6 +90,7 @@ export default {
};
},
created() {
// console.log(this.componentName + '-' + JSON.stringify(this.itemData));
// console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
},
@ -237,18 +250,32 @@ export default {
});
series[0].data = mapNR1;
} else if (title === '速度') {
let unit = 'km/h';
if (this.originalDataArr.length > 0) {
if (this.originalDataArr[0].speed >= 0) {
unit = 'km/h';
} else {
unit = 'pix/s';
}
}
this.tooltip = {
formatter: '{a} {b}:{c}km/h',
formatter: `{a} {b}:{c}${unit}`,
show: true,
confine: true
};
this.name = 'km/h';
// console.log("newVal",newVal)
this.name = unit;
// console.log(this.status + '-速度-' + JSON.stringify(newVal));
series[0].data = newVal.map((val) => {
if (val.speed == -1) {
return '-';
}
return val.speed;
});
} else if (title === '流量') {
this.name = '辆/10秒';
this.name = '辆';
if (this.status != '实时触发') {
this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
}
series[0].data = newVal.map((ele) => {
return ele.in_flow + ele.out_flow;
});
@ -268,6 +295,9 @@ export default {
});
} else if (title === '排队数') {
this.name = '辆';
if (this.status != '实时触发') {
this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
}
series[0].data = newVal.map((val) => {
// return val.n_queue;
if (timeMode == '固定间隔') {
@ -278,6 +308,9 @@ export default {
});
} else if (title === '检测数') {
this.name = '辆';
if (this.status != '实时触发') {
this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
}
series[0].data = newVal.map((val) => {
if (timeMode == '固定间隔') {
return val.ave_stay;

884
src/components/sensorFusion/echartsLine.vue
View File

@ -1,456 +1,480 @@
<template>
<div :id="echartsRef" ref="echartsLine"></div>
<div :id="echartsRef" ref="echartsLine"></div>
</template>
<script>
export default {
name: "echartsLine", //折线图组件
props: {
intersectionName: {
type: Array,
default() {
return [];
},
name: 'echartsLine', //折线图组件
props: {
itemData: {
type: Object,
default() {
return {};
}
},
intersectionName: {
type: Array,
default() {
return [];
}
},
chatShowType: {
type: String
},
echartsRef: {
type: String
},
//时间模式
timeMode: {
type: String
},
componentType: {
type: String
}, //组件类型
dataList: {
type: Array,
default() {
return [];
}
}, //表格数据
flowType: {
type: String
} //流量类型
},
chatShowType: {
type: String,
data() {
return {
chart: null,
chartData: {
yData: [],
xData: []
}, //表格数据
seriesList: [], //类型数组
typeData: [],
title: ''
};
},
echartsRef: {
type: String,
},
//时间模式
timeMode: {
type: String,
},
componentType: {
type: String,
}, //组件类型
dataList: {
type: Array,
default() {
return [];
},
}, //表格数据
flowType: {
type: String,
}, //流量类型
},
data() {
return {
chart: null,
chartData: {
yData: [],
xData: [],
}, //表格数据
seriesList: [], //类型数组
typeData: [],
title:'',
};
},
created() {
},
created() {},
methods: {
//传值对应字段返回相应字段数组
extractKeyValues(arr, key) {
return arr.map((item) => item[key]);
},
//数据判断处理
dataProcessing(val) {
if (val.length > 10) {
val = val.slice(-10);
}
if (val != null) {
if (this.timeMode == "实时触发") {
if (this.componentType == "车头时距") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "headway");
} else if (this.componentType == "流量") {
if (this.flowType == "入流") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "in_flow");
} else if (this.flowType == "出流") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "out_flow");
methods: {
//传值对应字段返回相应字段数组
extractKeyValues(arr, key) {
return arr.map((item) => item[key]);
},
//数据判断处理
dataProcessing(val) {
if (val.length > 10) {
val = val.slice(-10);
}
} else if (this.componentType == "速度") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "speed");
} else if (this.componentType == "类型") {
this.chartData.xData = this.extractKeyValues(val, "time");
let seriesArr = this.extractKeyValues(val, "type_data");
const transformedData = [];
for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i]; //quantity
const valueList = seriesArr.map((arr) => arr[i].value);
transformedData.push({
name: item.name,
value: valueList,
});
if (val != null) {
if (this.timeMode == '实时触发') {
if (this.componentType == '车头时距') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'headway');
} else if (this.componentType == '流量') {
if (this.flowType == '入流') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'in_flow');
} else if (this.flowType == '出流') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'out_flow');
}
} else if (this.componentType == '速度') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'speed');
} else if (this.componentType == '类型') {
this.chartData.xData = this.extractKeyValues(val, 'time');
let seriesArr = this.extractKeyValues(val, 'type_data');
const transformedData = [];
for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i]; //quantity
const valueList = seriesArr.map((arr) => arr[i].value);
transformedData.push({
name: item.name,
value: valueList
});
}
const totalCountList = transformedData[0].value.map((_, i) => {
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
});
transformedData.push({
name: '总数',
value: totalCountList
});
this.seriesList = transformedData;
} else if (this.componentType == '检测数') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'n_stay');
} else if (this.componentType == '排队数') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'n_queue');
}
} else if (this.timeMode == '固定时刻') {
if (this.componentType == '车头时距') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'headway');
} else if (this.componentType == '流量') {
if (this.flowType == '入流') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'in_flow');
} else if (this.flowType == '出流') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'out_flow');
}
} else if (this.componentType == '速度') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'speed');
} else if (this.componentType == '类型') {
this.chartData.xData = this.extractKeyValues(val, 'time');
let seriesArr = this.extractKeyValues(val, 'type_data');
const transformedData = [];
for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i];
const valueList = seriesArr.map((arr) => arr[i].quantity);
transformedData.push({
name: item.name,
value: valueList
});
}
const totalCountList = transformedData[0].value.map((_, i) => {
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
});
transformedData.push({
name: '总数',
value: totalCountList
});
this.seriesList = transformedData;
} else if (this.componentType == '检测数') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'n_stay');
} else if (this.componentType == '排队数') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'n_queue');
}
} else if (this.timeMode == '固定间隔') {
if (this.componentType == '车头时距') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'ave_headway');
} else if (this.componentType == '流量') {
if (this.flowType == '入流') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'in_flow');
} else if (this.flowType == '出流') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'out_flow');
}
} else if (this.componentType == '速度') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'speed');
} else if (this.componentType == '类型') {
this.chartData.xData = this.extractKeyValues(val, 'time');
let seriesArr = this.extractKeyValues(val, 'type_data');
const transformedData = [];
for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i];
const valueList = seriesArr.map((arr) => arr[i].quantity);
transformedData.push({
name: item.name,
value: valueList
});
}
const totalCountList = transformedData[0].value.map((_, i) => {
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
});
transformedData.push({
name: '总数',
value: totalCountList
});
this.seriesList = transformedData;
} else if (this.componentType == '延误') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'ave_delay');
} else if (this.componentType == '检测数') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'ave_stay');
} else if (this.componentType == '排队数') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'ave_queue');
}
}
} else {
return false;
}
const totalCountList = transformedData[0].value.map((_, i) => {
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
});
transformedData.push({
name: "总数",
value: totalCountList,
});
this.seriesList = transformedData;
} else if (this.componentType == "检测数") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "n_stay");
} else if (this.componentType == "排队数") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "n_queue");
}
} else if (this.timeMode == "固定时刻") {
if (this.componentType == "车头时距") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "headway");
} else if (this.componentType == "流量") {
if (this.flowType == "入流") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "in_flow");
} else if (this.flowType == "出流") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "out_flow");
},
//初始化表格
initEcharts() {
if (this.componentType == '流量') {
this.title = '辆';
if (this.timeMode != '实时触发') {
this.title = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
}
} else if (this.componentType == '速度') {
if (this.dataList.length > 0) {
// console.log(this.dataList[0].originalSpeed,'速度速度速度速度')
if (this.dataList[0].originalSpeed >= 0) {
this.title = 'km/h';
} else {
this.title = 'pix/s';
}
}
} else if (this.componentType == '排队数') {
this.title = '辆';
if (this.timeMode != '实时触发') {
this.title = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
}
} else if (this.componentType == '检测数') {
this.title = '辆';
if (this.timeMode != '实时触发') {
this.title = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
}
} else if (this.componentType == '延误') {
this.title = '秒';
} else if (this.componentType == '拥堵') {
this.title = '秒';
} else if (this.componentType == '车头时距') {
this.title = '秒';
} else {
this.title = '';
}
} else if (this.componentType == "速度") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "speed");
} else if (this.componentType == "类型") {
this.chartData.xData = this.extractKeyValues(val, "time");
let seriesArr = this.extractKeyValues(val, "type_data");
const transformedData = [];
for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i];
const valueList = seriesArr.map((arr) => arr[i].quantity);
transformedData.push({
name: item.name,
value: valueList,
});
// let slicedData = [];
// if (data != undefined && data.length > 5) {
// slicedData =data.slice(-5); // 保留最后的 10 条数据
// } else {
// slicedData = data; // 如果数据不足 10 条，则保留全部数据
// }
if (this.componentType == '类型') {
this.typeData.push({ type_data: this.dataList[0].type_data, time: this.dataList[0].time });
this.dataProcessing(this.typeData);
} else {
this.dataProcessing(this.dataList);
}
const totalCountList = transformedData[0].value.map((_, i) => {
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
});
transformedData.push({
name: "总数",
value: totalCountList,
});
this.seriesList = transformedData;
} else if (this.componentType == "检测数") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "n_stay");
} else if (this.componentType == "排队数") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "n_queue");
}
} else if (this.timeMode == "固定间隔") {
if (this.componentType == "车头时距") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "ave_headway");
} else if (this.componentType == "流量") {
if (this.flowType == "入流") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "in_flow");
} else if (this.flowType == "出流") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "out_flow");
// let myChart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
// if (myChart == null) {
// myChart = this.$echarts.init(document.getElementById(this.echartsRef));
// }
let myChart = this.chart;
// let myChart = this.$echarts.init(document.getElementById('echartsLine'));
var seriesList = [];
var color = ['#0CD2E6', '#3751E6', '#FFC722', 'rgb(255,115,38)'];
if (this.componentType == '类型') {
for (let i = 0; i < this.seriesList.length; i++) {
seriesList.push({
name: this.seriesList[i].name,
type: 'line',
data: this.seriesList[i].value,
symbolSize: 8, //标记的大小
lineStyle: {
color: color[i],
width: 3,
shadowColor: 'rgba(255,115,38,0.17)', //设置折线阴影
shadowBlur: 5,
shadowOffsetY: 9
},
itemStyle: {
//折线拐点标志的样式
color: color[i],
borderColor: color[i],
borderWidth: 2
},
smooth: 0.4,
emphasis: {
scale: 1.5
}
});
}
} else {
seriesList = [
{
// name: '流量_1-zone2-曲线图-实时触发',
type: 'line',
data: this.chartData.yData.reverse(),
symbolSize: 8, //标记的大小
lineStyle: {
color: 'rgb(255,115,38)',
width: 3,
shadowColor: 'rgba(255,115,38,0.17)', //设置折线阴影
shadowBlur: 5,
shadowOffsetY: 9
},
itemStyle: {
//折线拐点标志的样式
color: 'rgb(255,115,38)',
borderColor: 'rgb(255,115,38)',
borderWidth: 2
},
smooth: 0.4,
emphasis: {
scale: 1.5
}
}
];
}
} else if (this.componentType == "速度") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "speed");
} else if (this.componentType == "类型") {
this.chartData.xData = this.extractKeyValues(val, "time");
let seriesArr = this.extractKeyValues(val, "type_data");
const transformedData = [];
for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i];
const valueList = seriesArr.map((arr) => arr[i].quantity);
transformedData.push({
name: item.name,
value: valueList,
});
}
const totalCountList = transformedData[0].value.map((_, i) => {
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
let option = {
grid: {
top: '25%',
left: '5%',
right: '5%',
bottom: '8%',
containLabel: true
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(1, 13, 19, 0.5)',
borderWidth: 1,
axisPointer: {
type: 'shadow'
// label: {
// show: true,
// },
},
textStyle: {
color: 'rgba(212, 232, 254, 1)'
// fontSize: fontChart(0.24),
},
extraCssText: 'z-index:2'
},
legend: {
left: 'center',
top: 0,
left: '10%',
// itemWidth: 15,
// itemHeight: 10,
// itemGap: 15,
// borderRadius: 4,
textStyle: {
color: '#000',
fontSize: 14,
fontWeight: 400
}
// data: [
// {
// name: '流量_1-zone2-曲线图-实时触发',
// icon: 'circle'
// }
// ]
},
xAxis: {
type: 'category',
data: this.chartData.xData.reverse(),
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#393939' //X轴文字颜色
}
}
},
yAxis: [
{
type: 'value',
name: this.title,
nameTextStyle: {
color: '#000',
fontFamily: 'Alibaba PuHuiTi',
fontSize: 14,
fontWeight: 600
// padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
},
nameGap: 30, // 表现为上下位置
axisLine: {
show: true,
lineStyle: {
color: '#eeeeee'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#393939',
fontSize: 14
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(131,101,101,0.2)',
type: 'dashed'
}
}
}
],
series: seriesList
};
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
});
transformedData.push({
name: "总数",
value: totalCountList,
});
this.seriesList = transformedData;
} else if (this.componentType == "延误") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "ave_delay");
} else if (this.componentType == "检测数") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "ave_stay");
} else if (this.componentType == "排队数") {
this.chartData.xData = this.extractKeyValues(val, "time");
this.chartData.yData = this.extractKeyValues(val, "ave_queue");
}
}
} else {
return false;
}
},
//初始化表格
initEcharts() {
if (this.componentType == '流量') {
this.title = '辆/10秒'
}else if (this.componentType == '车头时距') {
this.title = '秒'
}else{
this.title = ''
}
// let slicedData = [];
// if (data != undefined && data.length > 5) {
// slicedData =data.slice(-5); // 保留最后的 10 条数据
// } else {
// slicedData = data; // 如果数据不足 10 条，则保留全部数据
// }
if (this.componentType == "类型") {
this.typeData.push({ type_data: this.dataList[0].type_data,time:this.dataList[0].time });
this.dataProcessing(this.typeData);
} else {
this.dataProcessing(this.dataList);
}
// let myChart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
// if (myChart == null) {
// myChart = this.$echarts.init(document.getElementById(this.echartsRef));
// }
let myChart = this.chart;
// let myChart = this.$echarts.init(document.getElementById('echartsLine'));
var seriesList = [];
var color = ["#0CD2E6", "#3751E6", "#FFC722", "rgb(255,115,38)"];
if (this.componentType == "类型") {
for (let i = 0; i < this.seriesList.length; i++) {
seriesList.push({
name: this.seriesList[i].name,
type: "line",
data: this.seriesList[i].value,
symbolSize: 8, //标记的大小
lineStyle: {
color: color[i],
width: 3,
shadowColor: "rgba(255,115,38,0.17)", //设置折线阴影
shadowBlur: 5,
shadowOffsetY: 9,
},
itemStyle: {
//折线拐点标志的样式
color: color[i],
borderColor: color[i],
borderWidth: 2,
},
smooth: 0.4,
emphasis: {
scale: 1.5,
},
});
}
} else {
seriesList = [
{
// name: '流量_1-zone2-曲线图-实时触发',
type: "line",
data: this.chartData.yData.reverse(),
symbolSize: 8, //标记的大小
lineStyle: {
color: "rgb(255,115,38)",
width: 3,
shadowColor: "rgba(255,115,38,0.17)", //设置折线阴影
shadowBlur: 5,
shadowOffsetY: 9,
},
itemStyle: {
//折线拐点标志的样式
color: "rgb(255,115,38)",
borderColor: "rgb(255,115,38)",
borderWidth: 2,
},
smooth: 0.4,
emphasis: {
scale: 1.5,
},
},
];
}
let option = {
grid: {
top: "25%",
left: "5%",
right: "5%",
bottom: "8%",
containLabel: true,
},
tooltip: {
trigger: "axis",
backgroundColor: "rgba(1, 13, 19, 0.5)",
borderWidth: 1,
axisPointer: {
type: "shadow",
// label: {
// show: true,
// },
},
textStyle: {
color: "rgba(212, 232, 254, 1)",
// fontSize: fontChart(0.24),
},
extraCssText: "z-index:2",
},
legend: {
left: "center",
top: 0,
left: "10%",
// itemWidth: 15,
// itemHeight: 10,
// itemGap: 15,
// borderRadius: 4,
textStyle: {
color: "#000",
fontSize: 14,
fontWeight: 400,
},
// data: [
// {
// name: '流量_1-zone2-曲线图-实时触发',
// icon: 'circle'
// }
// ]
},
xAxis: {
type: "category",
data: this.chartData.xData.reverse(),
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: "#393939", //X轴文字颜色
},
},
},
yAxis: [
{
type: "value",
name: this.title,
nameTextStyle: {
color: "#000",
fontFamily: "Alibaba PuHuiTi",
fontSize: 14,
fontWeight: 600,
// padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
},
nameGap: 30, // 表现为上下位置
axisLine: {
show: true,
lineStyle: {
color: "#eeeeee",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "#393939",
fontSize: 14,
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(131,101,101,0.2)",
type: "dashed",
},
},
},
],
series: seriesList,
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
},
},
mounted() {
let that = this;
const $dom = document.getElementById(this.echartsRef);
$dom.style.width = "440px";
$dom.style.height = "260px";
setTimeout(() => {
that.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(
document.getElementById(this.echartsRef)
);
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
that.initEcharts();
});
}, 300);
},
watch: {
intersectionName: {
handler: function (oldValues, newValues) {
this.$nextTick(() => {
this.initEcharts();
});
},
},
chatShowType: {
handler: function (oldValues, newValues) {},
},
componentType: {
handler: function (oldValues, newValues) {},
},
dataList: {
handler: function (oldValues, newValues) {
this.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(
document.getElementById(this.echartsRef)
);
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
this.initEcharts();
});
},
},
echartsRef: {
handler: function (oldValues, newValues) {
console.log("old", oldValues);
console.log("newV", newValues);
mounted() {
let that = this;
const $dom = document.getElementById(this.echartsRef);
$dom.style.width = '440px';
$dom.style.height = '260px';
setTimeout(() => {
that.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(
document.getElementById(this.echartsRef)
);
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
that.initEcharts();
});
that.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
that.initEcharts();
});
}, 300);
},
},
},
watch: {
intersectionName: {
handler: function (oldValues, newValues) {
this.$nextTick(() => {
this.initEcharts();
});
}
},
chatShowType: {
handler: function (oldValues, newValues) {}
},
componentType: {
handler: function (oldValues, newValues) {}
},
dataList: {
handler: function (oldValues, newValues) {
this.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
this.initEcharts();
});
}
},
echartsRef: {
handler: function (oldValues, newValues) {
console.log('old', oldValues);
console.log('newV', newValues);
let that = this;
setTimeout(() => {
that.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
that.initEcharts();
});
}, 300);
}
}
}
};
</script>
<style lang="less" scoped>
#echartsLine {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
</style>

3
src/components/sensorFusion/echartsPie.vue
View File

@ -56,9 +56,6 @@ export default {
initEcharts() {
let seriesData = null;
let myChart = this.chart;
console.log('initEcharts',this.dataList)
if (this.timeMode == "实时触发") {
seriesData = null;
this.renameField(this.dataList[0].type_data, "quantity", "value");

98
src/components/target/typeChart.vue
View File

@ -214,19 +214,21 @@
</div>
</div>
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
<tableShow :msg="newDataArr" :triggerType="triggerType" />
<tableShow :msg="newDataArrAbs" :triggerType="triggerType" />
</div>
<div v-if="pageType == '区域'">
<regionTable :msg="newDataArr" :triggerType="triggerType" />
<regionTable :msg="newDataArrAbs" :triggerType="triggerType" />
</div>
</div>
<div class="border" v-if="echartArr.includes('曲线图')">
<detailDialog />
<lineChart
:componentName="componentName"
:itemData="itemData"
:originalDataArr="newDataArr"
:chartName="chartName"
:pageType="pageType"
:list="newDataArr"
:list="newDataArrAbs"
:status="triggerType"
:title="title"
:typeValue="typeValue"
@ -239,7 +241,7 @@
:componentName="componentName"
:chartName="chartName"
:pageType="pageType"
:list="newDataArr"
:list="newDataArrAbs"
:status="triggerType"
:title="title"
:typeValue="typeValue"
@ -253,7 +255,7 @@
:componentName="componentName"
:chartName="chartName"
:pageType="pageType"
:list="newDataArr"
:list="newDataArrAbs"
:status="triggerType"
:title="title"
:typeValue="typeValue"
@ -265,7 +267,7 @@
:componentName="componentName"
:chartName="chartName"
:pageType="pageType"
:list="newDataArr"
:list="newDataArrAbs"
:status="triggerType"
:title="title"
:typeValue="typeValue"
@ -277,7 +279,7 @@
<thermalChart
:componentName="componentName"
:pageType="pageType"
:list="newDataArr"
:list="newDataArrAbs"
:status="triggerType"
:title="title"
:typeValue="typeValue"
@ -298,7 +300,18 @@ import regionTable from '../chart/regionTable.vue';
import thermalChart from '../chart/thermalChart.vue';
export default {
name: 'typeChart', //类型组件
props: ['typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName', 'startEndData'],
props: [
'typeValue',
'itemData',
'pageType',
'triggerType',
'dataArr',
'echartArr',
'componentName',
'title',
'chartName',
'startEndData'
],
components: {
lineChart,
barChart,
@ -330,13 +343,13 @@ export default {
methods: {
// 计算类型数量的总和
getDataArr(val) {
console.log('getDataArr', val);
// console.log('getDataArr', val);
this.newDataArr = val;
this.getNewQueue(this.newDataArr);
},
//周期统计实时累计数据
getcycleAccumulateDataArr(val) {
console.log('getcycleAccumulateDataArr', val);
// console.log('getcycleAccumulateDataArr', val);
this.cycleAccumulateDataArr = val;
this.getNewQueue2(this.cycleAccumulateDataArr);
},
@ -390,7 +403,70 @@ export default {
},
computed: {
// 获取类型的总数量
// 处理数据图表数据-1需要改成‘-’
newDataArrAbs() {
// console.log('newDataArrAbs1', this.newDataArr);
let arr = [];
if (this.newDataArr.length > 0) {
let newlist = JSON.parse(JSON.stringify(this.newDataArr));
for (const item of newlist) {
if (!isNaN(item.speed) && (item.speed !== -1 || item.speed === 0)) {
item.speed = Math.abs(item.speed);
} else {
item.speed = '-';
}
if (!isNaN(item.flow) && (item.headway !== -1 || item.headway === 0)) {
item.flow = item.flow;
} else {
item.flow = '-';
}
if (!isNaN(item.headway) && (item.headway !== -1 || item.headway === 0)) {
item.headway = item.headway;
} else {
item.headway = '-';
}
if (!isNaN(item.n_stay) && (item.n_stay !== -1 || item.n_stay === 0)) {
item.n_stay = item.n_stay;
} else {
item.n_stay = '-';
}
if (!isNaN(item.n_queue) && (item.n_queue !== -1 || item.n_queue === 0)) {
item.n_queue = item.n_queue;
} else {
item.n_queue = '-';
}
if (!isNaN(item.ave_queue) && (item.ave_queue !== -1 || item.ave_queue === 0)) {
item.n_queue = item.ave_queue;
} else {
item.ave_queue = '-';
}
if (!isNaN(item.ave_delay) && (item.ave_delay !== -1 || item.ave_delay === 0)) {
item.ave_delay = item.ave_delay;
} else {
item.ave_delay = '-';
}
if (!isNaN(item.in_spd) && (item.in_spd !== -1 || item.in_spd === 0)) {
item.in_spd = item.in_spd;
} else {
item.in_spd = '-';
}
if (!isNaN(item.out_spd) && (item.out_spd !== -1 || item.out_spd === 0)) {
item.out_spd = item.out_spd;
} else {
item.out_spd = '-';
}
arr.push(Object.assign({}, item));
}
}
// console.log('triggerType',this.triggerType)
// console.log('newDataArrAbs2', arr);
return arr;
}
},
mounted() {},
watch: {

86
src/views/AnalysisMain.vue
View File

@ -239,14 +239,14 @@ export default {
//离开当前页面后执行
destroyed: function () {
// console.log("离开当前页")
// //console.log("离开当前页")
// client.end();
},
created() {
this.getVideoList();
},
mounted() {
console.log(localStorage.getItem('roleName'), 'session存储');
//console.log(localStorage.getItem('roleName'), 'session存储');
if (localStorage.getItem('roleName') == '系统管理员') {
this.disable = false;
} else {
@ -260,7 +260,7 @@ export default {
if (newVal) {
newVal.forEach((item) => {
if (item.status == '加载中') {
console.log('加载中', item);
//console.log('加载中', item);
setTimeout(() => {
this.getVideoList();
}, 10000);
@ -291,14 +291,14 @@ export default {
}
})
.catch((err) => {
console.log(err);
//console.log(err);
});
},
changeChepai() {},
//传输视频源类型
SetVideoMode(val) {
getSetVideoMode({ Mode: val }).then((res) => {
console.log('res', res);
//console.log('res', res);
});
},
changeRadio() {
@ -307,21 +307,21 @@ export default {
//获取视频源类型
getVideoType() {
getVideoMode().then((res) => {
console.log('res', res.data.data);
//console.log('res', res.data.data);
this.videoTypeForm.videoType = res.data.data;
});
},
/** 创建mqtt */
createMqtt() {
console.log('this.videoTypeForm.videoType', this.videoTypeForm.videoType);
//console.log('this.videoTypeForm.videoType', this.videoTypeForm.videoType);
//创建链接，接收数据
if (this.videoTypeForm.videoType == '实时视频') {
this.topicSends = ['hert', 'img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'Contorl_server'];
console.log('this.videoTypeForm.videoType', this.videoTypeForm.videoType);
//console.log('this.videoTypeForm.videoType', this.videoTypeForm.videoType);
window.PubScribe(this.topicSends, -1, this.realInfo, false, 'videoId');
window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: 'all' }));
} else if (this.videoTypeForm.videoType == '离线视频') {
console.log('this.videoTypeForm.videoType', this.videoTypeForm.videoType);
//console.log('this.videoTypeForm.videoType', this.videoTypeForm.videoType);
this.topicSends = ['VideoStatusData'];
window.PubScribe(this.topicSends, '001', this.realInfo, false, 'videoId');
}
@ -335,7 +335,7 @@ export default {
},
/** 实时数据分类 */
realInfo(topic, message) {
// console.log("topic",topic)
// //console.log("topic",topic)
switch (topic) {
// 接收托片
case 'img0':
@ -355,7 +355,7 @@ export default {
// var newArr = []
//msg为转换后的JSON数据
if (msg.rate == 'low') {
// console.log('msg', msg);
// //console.log('msg', msg);
if (this.videoList.length != 0) {
for (let i = 0; i < this.videoList.length; i++) {
if (msg.id == this.videoList[i].id) {
@ -399,7 +399,7 @@ export default {
// }
// this.imgUrl3 = 'data:image/png;base64,' + msg.pic;
// console.log("imageUrl", imageUrl)
// //console.log("imageUrl", imageUrl)
} catch (error) {}
break;
case 'hert':
@ -408,7 +408,7 @@ export default {
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// console.log("hert", msg) //msg为转换后的JSON数据
// //console.log("hert", msg) //msg为转换后的JSON数据
if (msg == '') {
}
} catch (error) {}
@ -419,7 +419,7 @@ export default {
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log('VideoStatusData', msg); //msg为转换后的JSON数据
//console.log('VideoStatusData', msg); //msg为转换后的JSON数据
this.changeStatus(msg);
} catch (error) {}
break;
@ -437,7 +437,7 @@ export default {
this.videoList[i].numSatus = parseFloat(numSatusN.toFixed(2));
} else if (msg.type == 'video_analyzed' && msg.video_id == this.videoList[i].id) {
//已分析
console.log('已分析');
//console.log('已分析');
this.videoList[i].videoAnalysisStatus = '已分析';
var ip = window.location.host;
var ipData = 'http://' + ip.split(':')[0];
@ -445,11 +445,11 @@ export default {
this.videoList[i].img = ipData + msg.pic_path;
} else if (msg.type == 'video_analyse_unusual' && msg.video_id == this.videoList[i].id) {
//分析异常
console.log('分析异常');
//console.log('分析异常');
this.videoList[i].videoAnalysisStatus = '分析异常';
} else if (msg.type == 'video_loading' && msg.video_id == this.videoList[i].id) {
//分析异常
console.log('加载中');
//console.log('加载中');
this.videoList[i].videoAnalysisStatus = '加载中';
}
}
@ -503,10 +503,10 @@ export default {
informationInfo(data, item) {
if (data == '新增') {
var random = this.generateMixed(3);
console.log('random', random);
// console.log("this.file",this.file)
//console.log('random', random);
// //console.log("this.file",this.file)
// this.file = undefined
console.log('this.$refs.inputer', this.$refs.inputer);
//console.log('this.$refs.inputer', this.$refs.inputer);
(this.form = {
radio: '',
videoName: '视频' + random,
@ -519,7 +519,7 @@ export default {
}
},
open(item) {
console.log('item', item);
//console.log('item', item);
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -527,7 +527,7 @@ export default {
})
.then(() => {
getDeleteShipjk({ VideoId: item }).then((res) => {
console.log('res', res);
//console.log('res', res);
this.$message({
type: 'success',
message: '删除成功!'
@ -543,7 +543,7 @@ export default {
});
},
openRight(item) {
console.log('item', item);
//console.log('item', item);
startVideoAnalysis(item.id).then((res) => {
//
if (res.data.msg == '请求成功') {
@ -569,7 +569,7 @@ export default {
//
commit(form) {
console.log('form', form);
//console.log('form', form);
let formData = new FormData();
formData.append('VideoName', form.videoName);
formData.append('VideoType', this.videoTypeForm.videoType);
@ -585,7 +585,7 @@ export default {
url: serverUrl.dataUrl,
data: formData
}).then((res) => {
console.log('提交按钮', res);
//console.log('提交按钮', res);
if (res.data.msg == '添加成功') {
this.$message({
message: res.data.msg,
@ -623,7 +623,7 @@ export default {
applicationBtn() {
// this.createMqtt()
getApplication().then((res) => {
console.log('res', res);
//console.log('res', res);
if (res.data.code == 200) {
const loading = this.$loading({
lock: true,
@ -653,7 +653,7 @@ export default {
//停止
stopAlgorithmBtn() {
getStopAlgorithm().then((res) => {
console.log('res', res);
//console.log('res', res);
if (res.data.code == 200) {
this.getVideoList();
this.$message({
@ -671,7 +671,7 @@ export default {
},
load(event) {
let size = null;
console.log(this.file, 'this.file.size');
//console.log(this.file, 'this.file.size');
if (this.file == undefined) {
this.$message.warning('请上传文件!!!');
} else {
@ -702,7 +702,7 @@ export default {
background: 'rgba(0, 0, 0, 0.7)'
});
console.log('loadingN', loadingN.text);
//console.log('loadingN', loadingN.text);
let count = arrFile.length;
let filename = this.file.name + '~' + this.guid();
for (var i = 0; i < count; i++) {
@ -755,7 +755,7 @@ export default {
}
})
.catch((e) => {
console.log(e);
//console.log(e);
});
}
this.clearShownWarnings();
@ -763,13 +763,13 @@ export default {
}
},
goToPage(videoAnalysisStatus, id, num, name, type, status, msg, videoPath) {
console.log('id', id);
console.log('num', num);
console.log('name', name);
console.log('type', type);
console.log('status', status);
console.log('msg', msg);
console.log('videoAnalysisStatus', videoAnalysisStatus);
//console.log('id', id);
//console.log('num', num);
//console.log('name', name);
//console.log('type', type);
//console.log('status', status);
//console.log('msg', msg);
//console.log('videoAnalysisStatus', videoAnalysisStatus);
if (type == '离线视频') {
if (videoAnalysisStatus != '已分析') {
} else if (videoAnalysisStatus == '已分析') {
@ -804,7 +804,7 @@ export default {
//获取视频数据
getVideoList() {
getGetShipjk().then((res) => {
console.log('res', res);
//console.log('res', res);
if (res.data.msg == '成功') {
// if(val=='重启'){
setTimeout(() => {
@ -820,7 +820,7 @@ export default {
} else {
this.SetVideoMode(this.videoTypeForm.videoType);
}
// console.log("this.videoTypeForm.videoType",this.videoTypeForm.videoType)
// //console.log("this.videoTypeForm.videoType",this.videoTypeForm.videoType)
var arr = [];
var ip = window.location.host;
var ipData = 'http://' + ip.split(':')[0];
@ -866,7 +866,7 @@ export default {
}
});
this.videoList = arr;
console.log('arrarrarrarr', this.videoList);
//console.log('arrarrarrarr', this.videoList);
if (this.videoList.length == '0') {
this.videoTypeShow = true;
} else {
@ -874,7 +874,7 @@ export default {
}
//图片更新
let highPicList = sessionStorage.getItem('highPicList') ? JSON.parse(sessionStorage.getItem('highPicList')) : [];
console.log(highPicList, 'highPicList');
//console.log(highPicList, 'highPicList');
if (this.videoList.length != 0 && highPicList.length > 0) {
for (let i = 0; i < this.videoList.length; i++) {
for (let j = 0; j < highPicList.length; j++) {
@ -889,10 +889,10 @@ export default {
},
handleRemove(file, fileList) {
console.log(file, fileList);
//console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
//console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(

2
src/views/bounced/analysisConfiguration.vue
View File

@ -1458,7 +1458,7 @@ export default {
// 测试：订阅本机IP
// host: host,
// port: port,
// host:"172.16.1.168:10086",
// host:"ç",
keepalive: 60, // 心跳时间，默认60s，设置为0禁用
username: "admin", // 用户名（可选）
password: "123456", // 密码（可选）

2
src/views/bounced/analysisPreview.vue
View File

@ -67,7 +67,7 @@ export default {
// const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
var ip = window.location.host.split(":")[0];
console.log("ip",ip)
const host = `ws://${ip}:10087`;
const host = `ws://${ip}:10087`;
// const host = 'ws://172.16.1.168:10087/';
const options = {

55
src/views/bounced/dataBoard.vue
View File

@ -25,6 +25,7 @@
<typeChart
ref="typeChartRef"
v-if="o.timeMode === '实时触发'"
:itemData="o"
:pageType="o.graphicType"
:triggerType="o.timeMode"
:componentName="o.componentName"
@ -38,6 +39,7 @@
<typeChart
ref="typeChartRef1"
v-if="o.timeMode === '固定时刻'"
:itemData="o"
:pageType="o.graphicType"
:triggerType="o.timeMode"
:componentName="o.componentName"
@ -54,6 +56,7 @@
ref="typeChartRef2"
style="width: 100%"
v-if="o.timeMode === '固定间隔'"
:itemData="o"
:pageType="o.graphicType"
:triggerType="o.timeMode"
:componentName="o.componentName"
@ -172,7 +175,7 @@ export default {
// },
created() {
// this.getNew()
// console.log("cycleHistoryData",this.cycleHistoryData)
// //console.log("cycleHistoryData",this.cycleHistoryData)
},
methods: {
// 手风琴下拉切换
@ -188,7 +191,7 @@ export default {
// this.idVal = ;
getComponentSection({ VideoId: this.$route.query.id, Number: 10 }).then((res) => {
if (res.data.code == 200) {
console.log(res.data.data, '组件的数据');
//console.log(res.data.data, '组件的数据');
this.componentList = res.data.data;
this.siftData();
}
@ -200,7 +203,7 @@ export default {
this.sectionData = [];
this.classify = [];
this.componentList.forEach((val) => {
// console.log("val",val)
// //console.log("val",val)
this.sectionArr.push(val.combinationName);
this.sectionArr = Array.from(new Set(this.sectionArr));
});
@ -225,7 +228,7 @@ export default {
},
// 组件图标点击下拉事件
sectionHandle(i) {
let sections = document.querySelectorAll('.section');
// let sections = document.querySelectorAll('.section');
let sectionBox = document.querySelectorAll('.sectionBox');
let downPulls1 = document.querySelectorAll('.downPull1');
// 断面的小图标
@ -293,12 +296,12 @@ export default {
},
componentList: {
handler(newVal) {
console.log('componentList', newVal);
//console.log('componentList', newVal);
if (newVal != undefined && newVal.length != 0) {
newVal.forEach((ele) => {
if (ele.timeMode == '固定间隔' && this.$route.query.type == '实时视频') {
console.log('实时视频', '固定间隔');
//console.log('实时视频', '固定间隔');
this.$nextTick(() => {
// var thatNN = this;
ele.cycleStatisticsData.forEach((item) => {
@ -308,13 +311,13 @@ export default {
});
if (this.$refs.typeChartRef2 != undefined) {
// // 轮循固定时刻生成的各类组件
console.log('轮循固定时刻生成的各类组件')
//console.log('轮循固定时刻生成的各类组件')
this.getRef(this.$refs.typeChartRef2, ele.timeMode);
}
});
}
if (ele.timeMode == '固定时刻' && this.$route.query.type == '实时视频') {
console.log('实时视频', '固定时刻');
//console.log('实时视频', '固定时刻');
this.$nextTick(() => {
ele.cycleTimeData.forEach((item) => {
if (item.type_data != null) {
@ -396,8 +399,8 @@ export default {
cycleHistoryData: {
handler(newVal) {
// debugger
console.log('历史', newVal);
// console.log("历史",oldVal)
//console.log('历史', newVal);
// //console.log("历史",oldVal)
if (newVal != undefined) {
// newVal.forEach(ele => {
if (newVal.CycleStatisticsData) {
@ -460,9 +463,9 @@ export default {
// 处理过的触发数据
triggerListData: {
handler(newVal) {
// console.log("newVal",newVal,'流量数据')
// //console.log("newVal",newVal,'流量数据')
this.triggerList = newVal;
// console.log("oldVal",oldVal)
// //console.log("oldVal",oldVal)
// 触发数据
var _this = this;
if (newVal.length != 0 && _this.sectionData) {
@ -472,8 +475,8 @@ export default {
}
newVal.forEach((item) => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '实时触发') {
// console.log(ele.analogAreaComponentId, 'analogAreaComponentId');
// console.log(item.component_id, 'component_id');
// //console.log(ele.analogAreaComponentId, 'analogAreaComponentId');
// //console.log(item.component_id, 'component_id');
if (ele.trigger.length == 10) {
ele.trigger.pop();
}
@ -494,7 +497,7 @@ export default {
_this.$nextTick(() => {
if (_this.$refs.typeChartRef != undefined) {
for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
// //console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
let itemTypeChart = _this.$refs.typeChartRef[i];
if (itemTypeChart.dataArr != undefined && itemTypeChart.dataArr.length != 0) {
if (itemTypeChart.echartArr.includes('时间曲线图')) {
@ -549,7 +552,7 @@ export default {
cycleTimeData: {
handler(newVal) {
// 监听到打印固定时刻数据
// console.log(newVal, '固定时刻数据');
// //console.log(newVal, '固定时刻数据');
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
var thatN = this;
@ -576,7 +579,7 @@ export default {
// thatN.$nextTick(() => {
if (thatN.$refs.typeChartRef1 != undefined) {
// console.log("thatN.$refs.typeChartRef1",thatN.$refs.typeChartRef1)
// //console.log("thatN.$refs.typeChartRef1",thatN.$refs.typeChartRef1)
// 轮循固定时刻生成的各类组件
for (let i = 0; i < thatN.$refs.typeChartRef1.length; i++) {
let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i];
@ -654,7 +657,7 @@ export default {
// // ele.cycleTimeData.unshift(item);
// // _thatN.$nextTick(() => {
// if (_thatN.$refs.typeChartRef1 != undefined) {
// // console.log("thatN.$refs.typeChartRef1",_thatN.$refs.typeChartRef1)
// // //console.log("thatN.$refs.typeChartRef1",_thatN.$refs.typeChartRef1)
// // 轮循固定时刻生成的各类组件
// for (let i = 0; i < _thatN.$refs.typeChartRef1.length; i++) {
// let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i]
@ -697,7 +700,7 @@ export default {
//固定间隔
cycleStatisticsData: {
handler(newVal) {
console.log('固定间隔', newVal);
//console.log('固定间隔', newVal);
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
var that = this;
that.classify.forEach((ele, index) => {
@ -741,13 +744,13 @@ export default {
if (itemTypeChartRef2.echartArr.includes('表格')) {
that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr);
}
// console.log(item,'组件数据');
// //console.log(item,'组件数据');
if (
itemTypeChartRef2.echartArr.includes('直方图') &&
itemTypeChartRef2.$refs.barChartRef.drawBar
) {
// 数据改变重新渲染柱状图
// console.log(item, '组件');
// //console.log(item, '组件');
itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0]);
}
if (
@ -786,7 +789,7 @@ export default {
// if (_that.$refs.typeChartRef2 != undefined) {
// for (let i = 0; i < _that.$refs.typeChartRef2.length; i++) {
// let itemTypeChartRef2 = _that.$refs.typeChartRef2[i];
// // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
// // //console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
// if (itemTypeChartRef2.length != 0 && itemTypeChartRef2.dataArr != undefined && itemTypeChartRef2.dataArr.length != 0) {
// // this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
// if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
@ -795,10 +798,10 @@ export default {
// if (itemTypeChartRef2.echartArr.includes('数值')) {
// _that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr)
// }
// // console.log(item,'组件数据');
// // //console.log(item,'组件数据');
// if (itemTypeChartRef2.echartArr.includes('直方图') && itemTypeChartRef2.$refs.barChartRef.drawBar) {
// // 数据改变重新渲染柱状图
// // console.log(item, '组件');
// // //console.log(item, '组件');
// itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
// }
// if (itemTypeChartRef2.echartArr.includes('饼状图') && itemTypeChartRef2.$refs.pieChartRef.drawPie) {
@ -827,7 +830,7 @@ export default {
//周期统计实时累计数据主题
cycleAccumulateData: {
handler(newVal) {
console.log('周期统计实时累计数据主题', newVal);
//console.log('周期统计实时累计数据主题', newVal);
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
var that = this;
that.classify.forEach((ele, index) => {
@ -858,7 +861,7 @@ export default {
itemTypeChartRef2.dataArr != undefined &&
itemTypeChartRef2.dataArr.length != 0
) {
console.log('itemTypeChartRef2.echartArr',itemTypeChartRef2.echartArr)
//console.log('itemTypeChartRef2.echartArr',itemTypeChartRef2.echartArr)
if (itemTypeChartRef2.echartArr.includes('数值')) {
//只需要修改数值组件
that.$refs.typeChartRef2[i].getcycleAccumulateDataArr([item]);

191
src/views/index.vue
View File

@ -919,7 +919,7 @@ export default {
//离开当前页面后执行
destroyed: function () {
//console.log("离开当前页")
////console.log("离开当前页")
// client.publish('msg_stream',JSON.stringify({"msg_flag":-1}))
//client.end();
},
@ -993,7 +993,7 @@ export default {
},
//场景选择
sceneChange(val) {
console.log(val, '车道场景选择');
//console.log(val, '车道场景选择');
if (val != 1) {
this.perception.place = '0';
}
@ -1092,7 +1092,7 @@ export default {
'TargetAnalysisStatusData',
'TrafficAnalysisStatusData',
//目标数量
'simulator_target-' + this.$route.query.id
// 'simulator_target-' + this.$route.query.id
];
window.PubScribe(this.topicSends, '001', this.realInfo);
setTimeout(() => {
@ -1120,7 +1120,7 @@ export default {
'img7',
'Contorl_server',
//目标数量
'simulator_target-' + this.$route.query.id
// 'simulator_target-' + this.$route.query.id
];
window.PubScribe(this.topicSends, this.number, this.realInfo, false, this.$route.query.id);
}
@ -1131,7 +1131,7 @@ export default {
//获取视频分析，交通分析状态数据
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;
@ -1169,9 +1169,9 @@ export default {
});
},
getInterface(data1, data2, data3) {
console.log('data1', data1); //接口组件id
console.log('data2', data2); //组件id
console.log('data3', data2); //类型
//console.log('data1', data1); //接口组件id
//console.log('data2', data2); //组件id
//console.log('data3', data2); //类型
this.data1 = data1;
this.data2 = data2;
this.data3 = data3;
@ -1183,14 +1183,14 @@ export default {
getJierfData()
.then((res) => {
this.interfaceOptions = res.data.data;
console.log('this.interfaceOptions', this.interfaceOptions);
//console.log('this.interfaceOptions', this.interfaceOptions);
})
.catch((err) => {
_this.$message.error(err.msg);
});
},
handleInterfaceOptions(val) {
console.log('val', val);
//console.log('val', val);
var startSectionIdArr = [];
var startSectionNameArr = [];
val.forEach((item) => {
@ -1239,8 +1239,8 @@ export default {
window.publish('GetCycleHistory', 'Get-' + this.$route.query.id);
},
getZhuanFaMQTT(topic, msg) {
// console.log("topic",topic)
// console.log("msg",msg)
// //console.log("topic",topic)
// //console.log("msg",msg)
window.publish(topic, msg);
},
//分析视频按钮
@ -1271,7 +1271,7 @@ export default {
trafficAnalysisBtn() {
startTrafficAnalysis(this.$route.query.id).then((res) => {
//
console.log('res.data', res.data.data);
//console.log('res.data', res.data.data);
if (res.data.code == 200) {
this.$message({
message: res.data.msg,
@ -1325,15 +1325,15 @@ export default {
analysisData() {
var ip = window.location.host.split(':')[0];
// var ip = '172.16.1.168'; //http://172.16.1.168
console.log('ip', ip);
//console.log('ip', ip);
getAnalysisData(this.$route.query.id, ip).then((res) => {
console.log('res.data.data视频分析结果', res.data.data);
//console.log('res.data.data视频分析结果', res.data.data);
// if(res.data.data.TrafficAnalysisStatus=='分析异常'){
// this.videoAnalysisStatus = '分析异常'
// }else {
console.log('this.videoAnalysisStatusNew', res.data.data.trafficAnalysisStatus);
//console.log('this.videoAnalysisStatusNew', res.data.data.trafficAnalysisStatus);
this.videoAnalysisStatusNew = res.data.data.trafficAnalysisStatus;
console.log('this.videoAnalysisStatusNew', this.videoAnalysisStatusNew);
//console.log('this.videoAnalysisStatusNew', this.videoAnalysisStatusNew);
var numSatusNew = '';
this.analysis.videoTotalFrames = Number(res.data.data.videoTotalFrames);
if (res.data.data.trafficFrameNumber == '') {
@ -1358,16 +1358,16 @@ export default {
this.imageUrlToBase64(res.data.data.picPath);
});
// this.OnSceneN()
console.log(this.analysis, ' this.analysis');
//console.log(this.analysis, ' this.analysis');
},
//分析结束传参
postTraffic() {
var ip = window.location.host.split(':')[0];
// var ip = '172.16.1.168'; //http://172.16.1.168:5000
console.log('ip', ip);
//console.log('ip', ip);
getAnalysisData(this.$route.query.id, ip).then((res) => {
console.log('res.data.data', res.data.data);
//console.log('res.data.data', res.data.data);
this.analysis.trafficAnalysisPath1 = res.data.data.trafficAnalysisPath1;
this.analysis.trafficAnalysisPath2 = res.data.data.trafficAnalysisPath2;
document
@ -1393,7 +1393,7 @@ export default {
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// console.log(msg, 'msg接受一张高频图片');
// //console.log(msg, 'msg接受一张高频图片');
// document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
if (msg.rate == 'high') {
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
@ -1456,12 +1456,13 @@ export default {
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = [];
const msgN = JSON.parse(temp);
// console.log("msgN",msgN)
// //console.log("msgN",msgN)
this.triggerData = msgN;
if (temp.length != 0) {
for (let i = 0; i < msgN.length; i++) {
if (msgN[i].event != 'empty') {
detId.push(msgN[i].det_id);
// detId.push(msgN[i].det_id);
detId.push(msgN[i]);
}
}
document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId));
@ -1470,67 +1471,66 @@ export default {
break;
case 'trigger-' + this.$route.query.id:
try {
// console.log("trigger_msgN",message)
// //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)
// //console.log("trigger_msgN",msgN)
// msgN.forEach(item => {
// console.log("item.name",item.name)
// //console.log("item.name",item.name)
// })
this.triggerListData = msgN;
} catch (error) {}
break;
case 'cycle_time-' + this.$route.query.id:
try {
// console.log("trigger_msgN",message)
// //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('固定时刻', msgN);
//console.log('固定时刻', msgN);
this.cycleTimeData = msgN;
} catch (error) {}
break;
case 'cycle_history-' + this.$route.query.id:
try {
// console.log("trigger_msgN",message)
// //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('历史数据', msgN);
//console.log('历史数据', msgN);
this.cycleHistoryData = msgN;
} catch (error) {}
break;
case 'cycle_statistics-' + this.$route.query.id:
try {
// console.log("trigger_msgN",message)
// //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("固定间隔",msgN)
//console.log("cycle_statistics-固定间隔1",temp)
// //console.log("cycle_statistics-固定间隔2",msgN)
this.cycleStatisticsData = msgN;
// this.cycleStatisticsData = msgN;
} catch (error) {}
break;
case 'cycle_accumulate-' + this.$route.query.id:
try {
//周期统计实时累计数据主题
// console.log("trigger_msgN",message)
// //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('周期统计实时累计数据主题', msgN);
//console.log('cycle_accumulate-周期统计实时累计数据主题', msgN);
this.cycleAccumulateData = msgN;
} catch (error) {}
break;
@ -1540,7 +1540,7 @@ export default {
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// console.log("VideoStatusData", msg) //msg为转换后的JSON数据
// //console.log("VideoStatusData", msg) //msg为转换后的JSON数据
this.changeStatus(msg);
} catch (error) {}
break;
@ -1550,7 +1550,7 @@ export default {
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log(msg, '目标监测');
//console.log(msg, '目标监测');
this.targetAnalysisStatusData = msg;
} catch (error) {}
break;
@ -1560,7 +1560,7 @@ export default {
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log(msg, '交通分析');
//console.log(msg, '交通分析');
this.trafficAnalysisStatusData = msg;
} catch (error) {}
break;
@ -1570,6 +1570,7 @@ export default {
const u8arr = new Uint8Array(message);
const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp);
//console.log('simulator_target-目标数量', msg);
document.getElementById('mapModule').contentWindow.getTargetNumber(JSON.stringify(msg));
} catch (error) {}
break;
@ -1577,10 +1578,10 @@ export default {
this.receiveNews = '';
},
// handleClick(tab, event) {
// console.log(tab, event);
// //console.log(tab, event);
// },
changeCompany(val) {
console.log('val', val);
//console.log('val', val);
if (val == '小时') {
this.max = '24';
this.componentForm.cycleInterval = 1;
@ -1604,11 +1605,11 @@ export default {
this.videoAnalysisStatus = '已分析';
this.numSatus = 100;
//已分析
console.log('已分析');
//console.log('已分析');
this.postTraffic();
} else if (msg.type == 'traffic_analyse_unusual' && msg.video_id == this.$route.query.id) {
//分析异常
console.log('分析异常');
//console.log('分析异常');
this.videoAnalysisStatus = '分析异常';
}
},
@ -1641,18 +1642,18 @@ export default {
},
// //新增组件根据组件id获取单个组件数据
getSingleComponentIdN(id, type, name) {
console.log('id', id);
console.log('type', type);
console.log('name', name);
//console.log('id', id);
//console.log('type', type);
//console.log('name', name);
this.closeEditShow = false;
this.closeComponentShow = true;
this.componentId = id;
this.componentForm.componentType = type;
this.componentTitle = type;
getComponentData({ AnalogAreaComponentId: id }).then((res) => {
console.log('res', res);
//console.log('res', res);
if (res.data.code == 200) {
console.log('res', res.data.data);
//console.log('res', res.data.data);
this.component = true;
if (res.data.data.company != '') {
this.componentForm.company = res.data.data.company;
@ -1662,10 +1663,10 @@ export default {
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);
//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);
//console.log('this.componentForm.timeMode', this.componentForm.timeMode);
this.componentForm.timeMode = '固定间隔';
} else {
this.componentForm.timeMode = '实时触发';
@ -1696,12 +1697,12 @@ export default {
// this.componentForm.typeFiltering = res.data.data.typeFiltering
// this.componentForm.type = res.data.data.type
if (res.data.data.startSectionIds != '') {
console.log('startSectionIds', res.data.data.startSectionIds);
//console.log('startSectionIds', res.data.data.startSectionIds);
var startSectionIdArr = [];
var startSectionArr = [];
startSectionIdArr = res.data.data.startSectionIds.split(',');
console.log('this.sectionals', this.sectionals);
console.log('startSectionIdArr', startSectionIdArr);
//console.log('this.sectionals', this.sectionals);
//console.log('startSectionIdArr', startSectionIdArr);
startSectionIdArr.forEach((item) => {
this.sectionals.forEach((items) => {
if (item == items.graphicId) {
@ -1718,12 +1719,12 @@ export default {
this.componentForm.startSection = startSectionArr;
}
if (res.data.data.endSectionIds != '') {
console.log('endSectionIds', res.data.data.endSectionIds);
//console.log('endSectionIds', res.data.data.endSectionIds);
var endSectionIdArr = [];
var endSectionArr = [];
endSectionIdArr = res.data.data.endSectionIds.split(',');
console.log('this.sectionals', this.sectionals);
console.log('endSectionIdArr', endSectionIdArr);
//console.log('this.sectionals', this.sectionals);
//console.log('endSectionIdArr', endSectionIdArr);
endSectionIdArr.forEach((item) => {
this.sectionals.forEach((items) => {
if (item == items.graphicId) {
@ -1753,13 +1754,13 @@ export default {
} else {
// this.componentForm.type = ["机动车", "非机动车", "行人"];
}
console.log('this.componentForm', this.componentForm);
//console.log('this.componentForm', this.componentForm);
}
});
},
//修改模拟区组件、图形
getSimulationAreaEdit(id, type, componentType, name, number) {
console.log('number', number);
//console.log('number', number);
this.numberNew = number;
if (type == '图形') {
this.form.id = id;
@ -1800,9 +1801,9 @@ export default {
this.componentForm.componentType = componentType;
this.componentTitle = componentType;
getComponentData({ AnalogAreaComponentId: id }).then((res) => {
console.log('res', res);
//console.log('res', res);
if (res.data.code == 200) {
console.log('res', res.data.data);
//console.log('res', res.data.data);
this.component = true;
if (res.data.data.company != '') {
this.componentForm.company = res.data.data.company;
@ -1839,12 +1840,12 @@ export default {
this.componentForm.presentationForm = res.data.data.presentationForm;
// this.componentForm.type = res.data.data.type
if (res.data.data.startSectionIds != '') {
console.log('startSectionIds', res.data.data.startSectionIds);
//console.log('startSectionIds', res.data.data.startSectionIds);
var startSectionIdArr = [];
var startSectionArr = [];
startSectionIdArr = res.data.data.startSectionIds.split(',');
console.log('this.sectionals', this.sectionals);
console.log('startSectionIdArr', startSectionIdArr);
//console.log('this.sectionals', this.sectionals);
//console.log('startSectionIdArr', startSectionIdArr);
startSectionIdArr.forEach((item) => {
this.sectionals.forEach((items) => {
if (item == items.graphicId) {
@ -1855,12 +1856,12 @@ export default {
});
}
if (res.data.data.endSectionIds != '') {
console.log('endSectionIds', res.data.data.endSectionIds);
//console.log('endSectionIds', res.data.data.endSectionIds);
var endSectionIdArr = [];
var endSectionArr = [];
endSectionIdArr = res.data.data.endSectionIds.split(',');
console.log('this.sectionals', this.sectionals);
console.log('endSectionIdArr', endSectionIdArr);
//console.log('this.sectionals', this.sectionals);
//console.log('endSectionIdArr', endSectionIdArr);
endSectionIdArr.forEach((item) => {
this.sectionals.forEach((items) => {
if (item == items.graphicId) {
@ -1891,7 +1892,7 @@ export default {
//获取所有断面数据
getAllSectionalData(VideoId) {
getSectionalData({ VideoId: VideoId }).then((res) => {
console.log('res', res);
//console.log('res', res);
if (res.data.code == 200) {
this.sectionals = res.data.data;
}
@ -1908,10 +1909,10 @@ export default {
return type;
},
getFigureD(item, index, indexNew) {
console.log('图形类型', item);
console.log('初始图形名称', index);
//console.log('图形类型', item);
//console.log('初始图形名称', index);
this.startFigureName = index;
console.log('图形位置', indexNew);
//console.log('图形位置', indexNew);
this.dialogFormVisible = true;
this.switchValue = 0;
this.typeCheckList = [
@ -1940,12 +1941,12 @@ export default {
//双击图形修改图形名称弹框
getModifyTheNameN(data, number) {
this.orderShow = true;
console.log('data', data);
console.log('number', number);
//console.log('data', data);
//console.log('number', number);
this.numberNew = number;
var arr = [];
arr = data.split(',');
console.log('arr', arr);
//console.log('arr', arr);
this.form.id = arr[0];
// this.form.name = arr[1];
// this.form.type = arr[2];
@ -1982,7 +1983,7 @@ export default {
},
//新增、编辑图形确认按钮
onSubmit(form) {
console.log('form', form);
//console.log('form', form);
//新增
if (
this.switchValue == 1 &&
@ -2062,7 +2063,7 @@ export default {
url: serverUrl.addFigure,
data: formData
}).then((res) => {
console.log('res', res);
//console.log('res', res);
if (res.data.code == 200) {
this.$message({
@ -2180,7 +2181,7 @@ export default {
url: serverUrl.editFigure,
data: formData
}).then((res) => {
console.log('res', res);
//console.log('res', res);
if (res.data.code == 200) {
this.$message({
message: res.data.msg,
@ -2194,9 +2195,9 @@ export default {
// duration: 0
// });
// }, 5000);
console.log('startFigureName', this.startFigureName);
//console.log('startFigureName', this.startFigureName);
document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));
console.log('this.numberNew', this.numberNew);
//console.log('this.numberNew', this.numberNew);
if (form.type == '断面') {
document
.getElementById('mapModule')
@ -2225,7 +2226,7 @@ export default {
},
//编辑组件
onSubmitComponent(componentForm) {
console.log(componentForm, 'ffffffffff');
//console.log(componentForm, 'ffffffffff');
if (componentForm.timeMode != '实时触发' && componentForm.company == '') {
this.$message.warning('请选择必选项');
return false;
@ -2277,7 +2278,7 @@ export default {
formData.append('presentationForm', '矩阵图');
} else if (componentForm.componentType == '类型') {
console.log(componentForm.type, 'componentForm.type');
//console.log(componentForm.type, 'componentForm.type');
//名称
formData.append('componentName', componentForm.componentName);
//单位
@ -2309,7 +2310,7 @@ export default {
url: serverUrl.editComponent,
data: formData
}).then((res) => {
console.log('res', res);
//console.log('res', res);
if (res.data.code == 200) {
this.$message({
message: res.data.msg,
@ -2331,7 +2332,7 @@ export default {
},
//新增编辑组件取消
closeComponent(componentForm) {
console.log('componentForm', componentForm);
//console.log('componentForm', componentForm);
this.component = false;
let formData = new FormData();
@ -2384,7 +2385,7 @@ export default {
url: serverUrl.editComponent,
data: formData
}).then((res) => {
console.log('res', res);
//console.log('res', res);
if (res.data.code == 200) {
this.$message({
@ -2409,7 +2410,7 @@ export default {
},
//新增、编辑图形取消按钮
closeFigure(form) {
console.log('form', form);
//console.log('form', form);
if (form.id != '') {
this.dialogFormVisible = false;
document.getElementById('mapModule').contentWindow.closeEdit(JSON.stringify(form.type + ',' + form.id));
@ -2428,7 +2429,7 @@ export default {
}
},
closeComponentForm(componentForm) {
console.log('111', componentForm);
//console.log('111', componentForm);
if (this.closeComponentShow == false) {
this.component = false;
document.getElementById('mapModule').contentWindow.editComponent('');
@ -2447,7 +2448,7 @@ export default {
},
//改变起点
handleCheckedStartSection(value) {
console.log('改变起点', value);
//console.log('改变起点', value);
var startSectionIdArr = [];
var startSectionNameArr = [];
value.forEach((item) => {
@ -2465,7 +2466,7 @@ export default {
},
//改变终点
handleCheckedendSection(value) {
console.log('改变终点', value);
//console.log('改变终点', value);
var endSectionIdArr = [];
var endSectionNameArr = [];
value.forEach((item) => {
@ -2475,8 +2476,8 @@ export default {
endSectionNameArr.push(items.graphicName);
let newendSectionId = endSectionIdArr.join(',');
let newEndSectionName = endSectionNameArr.join(',');
console.log('newendSectionId', newendSectionId);
console.log('newEndSectionName', newEndSectionName);
//console.log('newendSectionId', newendSectionId);
//console.log('newEndSectionName', newEndSectionName);
this.componentForm.endSectionIds = newendSectionId;
this.componentForm.endSectionNames = newEndSectionName;
}
@ -2485,14 +2486,14 @@ export default {
},
//修改展现形式
handlePresentation(value) {
console.log('展现形式', value);
//console.log('展现形式', value);
let presentation = value.join(',');
this.componentForm.presentationForm = presentation;
console.log('this.componentForm.presentationForm', this.componentForm.presentationForm);
//console.log('this.componentForm.presentationForm', this.componentForm.presentationForm);
},
//类型数据
handleTypeData(value) {
console.log('类型数据', value);
//console.log('类型数据', value);
let type = value.join(',');
this.componentForm.typeData = type;
},
@ -2504,7 +2505,7 @@ export default {
handleSearch() {
this.modelOthers = true;
this.$refs.htModels.finbBox(this.inputVal);
console.log(this.$refs.htModels, 'asdasdasd');
//console.log(this.$refs.htModels, 'asdasdasd');
this.inputVal = '';
},
handleRow(val) {
@ -2518,7 +2519,7 @@ export default {
methods: ''
}).then((res) => {
this.weatherItem = res.data.lives[0];
console.log(this.weatherItem, 'asdsads');
//console.log(this.weatherItem, 'asdsads');
});
}
},

185
src/views/sensorFusion/index.vue
View File

@ -602,6 +602,7 @@
></el-empty>
<chartsLine
:echartsRef="'echartsLine' + e.duocgqrhpzId"
:itemData="e"
style="width: 100%; height: 100%"
:intersectionName="intersectionName"
:chatShowType="chatShowType"
@ -621,6 +622,7 @@
></el-empty>
<chartsLine
:echartsRef="'echartsLine' + e.duocgqrhpzId"
:itemData="e"
style="width: 100%; height: 100%"
:intersectionName="intersectionName"
:chatShowType="chatShowType"
@ -640,6 +642,7 @@
<chartsLine
:echartsRef="'echartsLine' + e.duocgqrhpzId"
style="width: 100%; height: 100%"
:itemData="e"
:intersectionName="intersectionName"
:chatShowType="chatShowType"
:timeMode="'固定间隔'"
@ -1256,8 +1259,8 @@
<img src="@/assets/img/AnalysisMain/add.png" style="height: 60%; width: 4%; cursor: pointer" />
</div> -->
<el-button size="medium" style="width: 100%" type="primary" plain @click="addParentNode"
><i class="el-icon-plus" style="font-size: 18px"></i></el-button
>
><i class="el-icon-plus" style="font-size: 18px"></i
></el-button>
<span slot="footer" class="dialog-footer" style="display: flex; justify-content: center">
<!-- <el-button type="primary" @click="centerDialogVisible = false">取消</el-button> -->
<el-button @click="addSuccess" type="primary">关闭</el-button>
@ -1774,7 +1777,7 @@ export default {
// this.addTriggerDataField(this.intersectionList);
//mqtt订阅
this.getMqtt();
console.log(this.intersectionList, 'this.intersectionList');
//console.log(this.intersectionList, 'this.intersectionList');
//开发路口默认展开第一个
if (this.intersectionList.length > 0) {
let children = this.intersectionList[0].children || [];
@ -1789,7 +1792,7 @@ export default {
// }
// }
// }
// console.log(this.intersectionName, 'intersectionName');
// //console.log(this.intersectionName, 'intersectionName');
});
},
//每个都添加option
@ -1834,7 +1837,7 @@ export default {
for (let i = 0; i < this.threeData.length; i++) {
this.addParentSort = this.threeData[i].sort;
}
console.log(this.threeData, 'this.threeData');
//console.log(this.threeData, 'this.threeData');
} else {
this.$message.warning(res.data.msg);
}
@ -1907,7 +1910,7 @@ export default {
},
//折叠面板点击展开事件
handleCollapseChange(val) {
console.log(val, '折叠面板展开事件', this.intersectionName);
//console.log(val, '折叠面板展开事件', this.intersectionName);
this.intersectionName = val;
},
handleNodeClick(nodeData) {},
@ -1964,7 +1967,7 @@ export default {
allowDrop(draggingNode, dropNode, type) {
//注掉的是同级拖拽
if (draggingNode.level === dropNode.level) {
console.log('拖拽');
//console.log('拖拽');
return type === 'prev' || type === 'next';
} else {
// 不同级进行处理
@ -1998,7 +2001,7 @@ export default {
}
})
.catch((err) => {
console.log(err);
//console.log(err);
});
},
//将子组件得名称统一
@ -2062,7 +2065,7 @@ export default {
key.data = key.data.filter((d) => d.videoName != '数值');
});
});
console.log(this.addChildThreeData, ' this.addChildThreeData');
//console.log(this.addChildThreeData, ' this.addChildThreeData');
});
this.addThreeNodeData.data = data;
this.addThreeNodeData.node = node;
@ -2192,14 +2195,14 @@ export default {
//给节点赋值
this.addThreeChildData.data = data;
this.addThreeChildData.node = node;
console.log(this.addThreeChildData.data, 'this.addThreeChildData.node', this.addThreeChildData.node);
//console.log(this.addThreeChildData.data, 'this.addThreeChildData.node', this.addThreeChildData.node);
},
//最子节点添加
addChildNode() {
this.checkDataList = [];
//给添加多选的赋值
console.log(this.checkDataList, 'this.checkDataList');
//console.log(this.checkDataList, 'this.checkDataList');
let params = {
ParentId: '',
Name: '',
@ -2270,7 +2273,7 @@ export default {
}
})
.catch((err) => {
console.log(err);
//console.log(err);
});
// }
},
@ -2299,7 +2302,7 @@ export default {
}
})
.catch((err) => {
console.log(err);
//console.log(err);
});
})
.catch(() => {
@ -2339,7 +2342,7 @@ export default {
},
//普通输入框添加节点
addThreeNode() {
console.log(this.addThreeNodeData.data, 'this.addThreeNodeData.data');
//console.log(this.addThreeNodeData.data, 'this.addThreeNodeData.data');
let params = {
ParentId: '',
Name: '',
@ -2386,13 +2389,13 @@ export default {
}
})
.catch((err) => {
console.log(err);
//console.log(err);
});
}
},
// //获得焦点
focus(event) {
// console.log(event);
// //console.log(event);
event.currentTarget.select();
},
//修改功能 inp
@ -2401,7 +2404,7 @@ export default {
},
//失去焦点后
alters(node, data) {
console.log(data.label, '失去焦点');
//console.log(data.label, '失去焦点');
data.showInput = false;
const label = document.getElementById(data.duocgqrhpzId);
const changeinput = document.querySelector('.input' + data.duocgqrhpzId);
@ -2424,11 +2427,11 @@ export default {
}
})
.catch((err) => {
console.log(err);
//console.log(err);
});
},
alter(node, data) {
console.log(data, '编辑', this.threeData);
//console.log(data, '编辑', this.threeData);
data.showInput = true;
const label = document.getElementById(data.duocgqrhpzId);
const changeinput = document.querySelector('.input' + data.duocgqrhpzId);
@ -2444,42 +2447,53 @@ export default {
//鼠标悬浮
showTooltip(id) {
// const hover = document.querySelector('.hovered' + id);
const title = document.querySelector('.tooltip' + id);
this.$nextTick(() => {
title.style.position = 'absolute';
title.style.display = 'block';
title.style.backgroundColor = '#f7f7f7';
title.style.border = '1px solid #ccc';
});
if (id) {
const title = document.querySelector('.tooltip' + id);
this.$nextTick(() => {
title.style.position = 'absolute';
title.style.display = 'block';
title.style.backgroundColor = '#f7f7f7';
title.style.border = '1px solid #ccc';
});
}
},
//鼠标移出
hideTooltip(id) {
const title = document.querySelector('.tooltip' + id);
this.$nextTick(() => {
// this.hovered = false;
title.style.display = 'none';
});
// const title = document.querySelector('.tooltip' + id);
if (id) {
const title = document.querySelector('.tooltip' + id);
this.$nextTick(() => {
// this.hovered = false;
title.style.display = 'none';
});
}
},
//二级鼠标悬浮
showCardtip(id) {
// const hover = document.querySelector('.hovered' + id);
const title = document.querySelector('.cardTitle1' + id);
this.$nextTick(() => {
title.style.position = 'absolute';
title.style.display = 'block';
title.style.backgroundColor = '#f7f7f7';
title.style.border = '1px solid #ccc';
// title.style.top = '120px';
title.style.width = '110px';
});
if (id) {
const title = document.querySelector('.cardTitle1' + id);
this.$nextTick(() => {
title.style.position = 'absolute';
title.style.display = 'block';
title.style.backgroundColor = '#f7f7f7';
title.style.border = '1px solid #ccc';
// title.style.top = '120px';
title.style.width = '110px';
});
}
},
//二级鼠标移出
hideCardtip(id) {
const title = document.querySelector('.cardTitle1' + id);
this.$nextTick(() => {
// this.hovered = false;
title.style.display = 'none';
});
if (id) {
const title = document.querySelector('.cardTitle1' + id);
this.$nextTick(() => {
// this.hovered = false;
title.style.display = 'none';
});
}
},
//单选按钮选择事件
@ -2490,7 +2504,7 @@ export default {
// this.chatShowIndex = index;
let count = index - 1;
let elements = document.querySelectorAll('[class^="echarts"]');
let echarts = document.querySelector('.echarts' + count);
// let echarts = document.querySelector('.echarts' + count);
elements.forEach((element) => {
this.setZIndex(element, count);
});
@ -2514,7 +2528,7 @@ export default {
// this.getSensorFusionData();
// })
// .catch((err) => {
// console.log(err);
// //console.log(err);
// });
},
//确认按钮
@ -2752,19 +2766,19 @@ export default {
//mqtt订阅
realInfo(topic, message, videoId) {
let dataList = this.intersectionList;
// console.log(topic, message, 'mqtt数据', videoId);
// //console.log(topic, message, 'mqtt数据', videoId);
for (let i = 0; i < this.topicVideoIdList.length; i++) {
switch (topic) {
// 接收托片
case 'trigger-' + this.topicVideoIdList[i].videoId:
try {
// console.log("trigger_msgN",message)
// //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(msgN,'msgN');
// //console.log(msgN,'msgN');
for (let j = 0; j < msgN.length; j++) {
const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
@ -2803,7 +2817,8 @@ export default {
n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue,
occ: msgN[j].occ,
speed: newSpeed
speed: newSpeed,
originalSpeed: msgN[j].speed
});
// }
//卡片区
@ -2856,7 +2871,8 @@ export default {
n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue,
occ: msgN[j].occ,
speed: newSpeed
speed: newSpeed,
originalSpeed: msgN[j].speed
});
} else if (msgN[j].component_type == '速度') {
//卡片区
@ -2876,6 +2892,7 @@ export default {
this.addOrUpdateArrayItem(this.triggerSpeedData, {
time: msgN[j].time,
speed: newSpeed,
originalSpeed: msgN[j].speed,
avg: msgN[j].avg,
max: msgN[j].max,
med: msgN[j].med,
@ -2897,7 +2914,8 @@ export default {
n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue,
occ: msgN[j].occ,
speed: newSpeed
speed: newSpeed,
originalSpeed: msgN[j].speed
});
} else if (msgN[j].component_type == '类型') {
let map = {
@ -2941,7 +2959,8 @@ export default {
n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue,
occ: msgN[j].occ,
speed: newSpeed
speed: newSpeed,
originalSpeed: msgN[j].speed
});
} else if (msgN[j].component_type == '检测数') {
let map = {
@ -2982,7 +3001,8 @@ export default {
n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue,
occ: msgN[j].occ,
speed: newSpeed
speed: newSpeed,
originalSpeed: msgN[j].speed
});
} else if (msgN[j].component_type == '排队数') {
let map = {
@ -3018,7 +3038,8 @@ export default {
n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue,
occ: msgN[j].occ,
speed: newSpeed
speed: newSpeed,
originalSpeed: msgN[j].speed
});
} else if (msgN[j].component_type == 'OD') {
//图表区
@ -3039,14 +3060,14 @@ export default {
break;
case 'cycle_time-' + this.topicVideoIdList[i].videoId:
try {
// console.log("trigger_msgN",message)
// //console.log("trigger_msgN",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msgN = JSON.parse(temp);
console.log('固定时刻', msgN);
//console.log('固定时刻', msgN);
for (let j = 0; j < msgN.length; j++) {
const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
let newSpeed = '-';
if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
@ -3066,7 +3087,8 @@ export default {
n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue,
occ: msgN[j].occ,
speed: newSpeed
speed: newSpeed,
originalSpeed: msgN[j].speed
};
this.$nextTick(() => {
this.timeDataCharts(
@ -3088,7 +3110,7 @@ export default {
msgN[j].component_id,
map
);
console.log(this.intersectionList, 'this.intersectionList');
//console.log(this.intersectionList, 'this.intersectionList');
});
} else if (msgN[j].component_type == '速度') {
//卡片区
@ -3117,7 +3139,8 @@ export default {
n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue,
occ: msgN[j].occ,
speed: newSpeed
speed: newSpeed,
originalSpeed: msgN[j].speed
};
this.$nextTick(() => {
this.timeDataCharts(
@ -3154,7 +3177,8 @@ export default {
n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue,
occ: msgN[j].occ,
speed: newSpeed
speed: newSpeed,
originalSpeed: msgN[j].speed
};
this.$nextTick(() => {
this.timeDataCharts(
@ -3188,16 +3212,16 @@ export default {
break;
case 'cycle_statistics-' + this.topicVideoIdList[i].videoId:
try {
// console.log("trigger_msgN",message)
// //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('固定间隔', msgN, this.topicVideoIdList[i].videoId);
//console.log('固定间隔', msgN, this.topicVideoIdList[i].videoId);
// this.cycleStatisticsData = msgN;
for (let j = 0; j < msgN.length; j++) {
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
let newSpeed = '-';
if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
newSpeed = Math.abs(msgN[j].speed);
@ -3216,7 +3240,8 @@ export default {
n_stay: msgN[j].ave_stay,
n_queue: msgN[j].ave_queue,
occ: msgN[j].occ,
speed: newSpeed
speed: newSpeed,
originalSpeed: msgN[j].speed
};
this.$nextTick(() => {
this.cycleStatisticsDataCharts(
@ -3266,7 +3291,8 @@ export default {
ave_stay: msgN[j].ave_stay,
ave_queue: msgN[j].ave_queue,
occ: msgN[j].occ,
speed: newSpeed
speed: newSpeed,
originalSpeed: msgN[j].speed
};
this.$nextTick(() => {
this.cycleStatisticsDataCharts(
@ -3303,7 +3329,8 @@ export default {
ave_stay: msgN[j].ave_stay,
ave_queue: msgN[j].ave_queue,
occ: msgN[j].occ,
speed: newSpeed
speed: newSpeed,
originalSpeed: msgN[j].speed
};
this.$nextTick(() => {
this.cycleStatisticsDataCharts(
@ -3340,7 +3367,8 @@ export default {
ave_stay: msgN[j].ave_stay,
ave_queue: msgN[j].ave_queue,
occ: msgN[j].occ,
speed: newSpeed
speed: newSpeed,
originalSpeed: msgN[j].speed
};
this.$nextTick(() => {
this.cycleStatisticsDataCharts(
@ -3376,7 +3404,8 @@ export default {
ave_stay: msgN[j].ave_stay,
ave_queue: msgN[j].ave_queue,
occ: msgN[j].occ,
speed: newSpeed
speed: newSpeed,
originalSpeed: msgN[j].speed
};
this.$nextTick(() => {
this.cycleStatisticsDataCharts(
@ -3408,7 +3437,8 @@ export default {
ave_stay: msgN[j].ave_stay,
ave_queue: msgN[j].ave_queue,
occ: msgN[j].occ,
speed: newSpeed
speed: newSpeed,
originalSpeed: msgN[j].speed
};
this.$nextTick(() => {
this.cycleStatisticsDataCharts(
@ -3440,7 +3470,8 @@ export default {
ave_stay: msgN[j].ave_stay,
ave_queue: msgN[j].ave_queue,
occ: msgN[j].occ,
speed: newSpeed
speed: newSpeed,
originalSpeed: msgN[j].speed
};
this.$nextTick(() => {
this.cycleStatisticsDataCharts(
@ -3472,16 +3503,16 @@ export default {
break;
case 'cycle_accumulate-' + this.topicVideoIdList[i].videoId:
try {
// console.log("trigger_msgN",message)
// //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('固定间隔cycle_accumulate', msgN);
// //console.log('固定间隔cycle_accumulate', msgN);
// this.cycleStatisticsData = msgN;
for (let j = 0; j < msgN.length; j++) {
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
let newSpeed = '-';
if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
newSpeed = Math.abs(msgN[j].speed);
@ -3601,7 +3632,7 @@ export default {
chartsPie, //饼图
chartsBar, //柱状图
MeanValue, //均值图
thermalOD, //OD
thermalOD //OD
}
};
</script>