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

bug修改

This commit is contained in:
qiudan 2023-12-21 17:09:06 +08:00
parent af5e7b9d7c
commit 5458c18ab1
10 changed files with 361 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/newchart/lineChart.vue
View File

@ -111,8 +111,44 @@ export default {
}, },
methods: { methods: {
drawLine(newVal, title, timeMode) { //过滤重复的 time 字段，保留每个 time 最后一个对象
// console.log('newVal == ', newVal) filteredArrayFun(originalArray, targetTime) {
// 过滤重复的 time 字段
let uniqueArray = originalArray.reduce((accumulator, currentValue) => {
const existingItemIndex = accumulator.findIndex((item) => item.time === currentValue.time);
if (existingItemIndex === -1) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
// 确保 targetTime 是有效的日期字符串
const targetDate = targetTime ? new Date(targetTime) : null;
// 过滤比目标时间小的对象
if (targetDate) {
uniqueArray = uniqueArray.filter((item) => new Date(item.time) > targetDate);
}
// 按照时间从小到大排序
// const sortedArray = uniqueArray.sort((a, b) => {
// const dateA = new Date(a.time);
// const dateB = new Date(b.time);
// return dateA - dateB;
// });
return uniqueArray;
},
drawLine(nnewVal, title, timeMode) {
// console.log('newVal == ', nnewVal)
// let targetTime = '';
// if (nnewVal.length > 0) {
// targetTime = nnewVal[nnewVal.length - 1].time;
// }
// let newVal = this.filteredArrayFun(nnewVal,targetTime);
let newVal = nnewVal
let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart); let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
if (myChart == null) { if (myChart == null) {
myChart = this.$echarts.init(this.$refs.lineChart); myChart = this.$echarts.init(this.$refs.lineChart);
@ -125,6 +161,7 @@ export default {
} }
// myChart.showLoading()　　//开启loading // myChart.showLoading()　　//开启loading
let series = this.getMessage(newVal, title, timeMode) || []
let option = { let option = {
legend: {}, legend: {},
grid: { grid: {
@ -180,7 +217,7 @@ export default {
} }
} }
], ],
series: this.getMessage(newVal, title, timeMode) series: series
}; };
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', function () { window.addEventListener('resize', function () {

51
src/components/newchart/thermalChart.vue
View File

@ -1,5 +1,8 @@
<template> <template>
<div>
<div>当前数据时间：{{ time }}</div>
<div id="thermalChart" ref="thermalChart" style="width: 705px; height: 300px"></div> <div id="thermalChart" ref="thermalChart" style="width: 705px; height: 300px"></div>
</div>
</template> </template>
<script> <script>
@ -7,7 +10,8 @@ export default {
name: 'thermalChart', //热点图组件 name: 'thermalChart', //热点图组件
data() { data() {
return { return {
thermalChartData: [] thermalChartData: [],
time: '',
}; };
}, },
created() {}, created() {},
@ -29,13 +33,13 @@ export default {
default() { default() {
return {}; return {};
} }
} },
// status: { // status: {
// type: String // type: String
// }, // },
// componentName: { componentName: {
// type: String type: String
// }, }
}, },
methods: { methods: {
//处理od组件数据 //处理od组件数据
@ -53,7 +57,7 @@ export default {
// 数组去重 // 数组去重
// od图的数据 // od图的数据
chartData.push([i, j, item[j].quantity]); chartData.push([j, i, item[j].quantity]);
// console.log([i,j,item[j].val]); // console.log([i,j,item[j].val]);
} }
} }
@ -87,6 +91,14 @@ export default {
startEndEnd = startEnd.end.split(','); startEndEnd = startEnd.end.split(',');
} }
} }
// console.log('title', this.title);
// console.log('componentName', this.componentName);
// console.log('odData', odData);
// console.log('startEnd', startEnd);
// console.log('x-startEndStart', startEndStart);
// console.log('y-startEndEnd', startEndEnd);
// console.log('series', this.ODhanlde(odData));
let myChart = this.$echarts.init(this.$refs.thermalChart); let myChart = this.$echarts.init(this.$refs.thermalChart);
let option = { let option = {
dataZoom: [ dataZoom: [
@ -109,9 +121,9 @@ export default {
}, },
animation: false, animation: false,
grid: { grid: {
left: '3%', left: '0%',
right: '8%', right: '11%',
bottom: '8%', bottom: '11%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
@ -124,12 +136,16 @@ export default {
}, },
axisLabel: { axisLabel: {
interval: 0, interval: 0,
rotate: 40 rotate: 0
}, },
splitArea: { splitArea: {
show: true show: true
},
name: "起点",
nameTextStyle:{
verticalAlign:'top',
padding:[8,0,0,0]
} }
// name: "镇街",
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
@ -141,12 +157,17 @@ export default {
}, },
axisLabel: { axisLabel: {
interval: 0, interval: 0,
rotate: 40 rotate: 0
}, },
splitArea: { splitArea: {
show: true show: true
},
name: "终点",
nameLocation:'end',
nameTextStyle:{
verticalAlign:'bottom',
padding:[0,40,0,0]
} }
// name: "",
}, },
visualMap: { visualMap: {
min: 1, min: 1,
@ -193,13 +214,15 @@ export default {
} }
}, },
mounted() { mounted() {
this.drawThermalChart() this.drawThermalChart();
}, },
watch: { watch: {
list: { list: {
handler: function (newval, oldVal) { handler: function (newval, oldVal) {
if (newval && newval.length > 0) { if (newval && newval.length > 0) {
// console.log('OD',newval)
this.$nextTick(() => { this.$nextTick(() => {
this.time = newval[0].time
this.drawThermalChart(newval[0].ob_data, this.startEndData); this.drawThermalChart(newval[0].ob_data, this.startEndData);
}); });
} }

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

@ -114,7 +114,7 @@ export default {
yData = []; yData = [];
let targetTime = ''; let targetTime = '';
if (this.chartData.xData.length > 0) { if (this.chartData.xData.length > 0) {
targetTime = this.chartData.xData[this.chartData.xData.length - 1]; targetTime = this.chartData.xData[this.chartData.xData.length - 1].time;
} }
if (this.componentType != '类型') { if (this.componentType != '类型') {
//类型种类特殊不能去除时间重复项，不走下面去重逻辑 //类型种类特殊不能去除时间重复项，不走下面去重逻辑

76
src/components/sensorFusion/thermalOD.vue
View File

@ -57,7 +57,7 @@ export default {
start.push(item[j].start); start.push(item[j].start);
// 数组去重 // 数组去重
// od图的数据 // od图的数据
chartData.push([i, j, item[j].quantity]); chartData.push([j, i, item[j].quantity]);
// console.log([i,j,item[j].val]); // console.log([i,j,item[j].val]);
} }
} }
@ -67,16 +67,61 @@ export default {
// this.thermalChartData = chartData // this.thermalChartData = chartData
return chartData; return chartData;
}, },
//去除时间重复项
//过滤重复的 time 字段，保留每个 time 最后一个对象
filteredArrayFun(originalArray, targetTime) {
// 过滤重复的 time 字段
let uniqueArray = originalArray.reduce((accumulator, currentValue) => {
const existingItemIndex = accumulator.findIndex((item) => item.time === currentValue.time);
if (existingItemIndex === -1) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
// 确保 targetTime 是有效的日期字符串
const targetDate = targetTime ? new Date(targetTime) : null;
// 过滤比目标时间小的对象
if (targetDate) {
uniqueArray = uniqueArray.filter((item) => new Date(item.time) > targetDate);
}
// 按照时间从小到大排序
const sortedArray = uniqueArray.sort((a, b) => {
const dateA = new Date(a.time);
const dateB = new Date(b.time);
return dateA - dateB;
});
return sortedArray;
},
initEcharts() { initEcharts() {
let dataList = null; let dataList = null;
// let targetTime = '';
// if (this.dataList.length > 0) {
// targetTime = this.dataList[this.dataList.length - 1].time;
// }
// let filterDataList = this.filteredArrayFun(this.dataList, targetTime);
let filterDataList = this.dataList
// console.log('实时触发-OD组件获取到的数据', this.dataList);
// console.log('实时触发-OD组件获取到的过滤数据', filterDataList);
if (this.timeMode == '实时触发') { if (this.timeMode == '实时触发') {
let dataOd = []; let dataOd = [];
if (this.dataList.length > 0) { if (filterDataList.length > 0 && filterDataList[0].ob_data) {
for (let i = 0; i < this.dataList.length; i++) { dataOd.push(filterDataList[0].ob_data);
dataOd.push(this.dataList[i].ob_data);
dataList = this.ODhanlde(dataOd); dataList = this.ODhanlde(dataOd);
} }
}
// if (filterDataList.length > 0) {
// for (let i = 0; i < filterDataList.length; i++) {
// dataOd.push(filterDataList[i].ob_data);
// dataList = this.ODhanlde(dataOd);
// }
// }
} else if (this.timeMode == '固定时刻') { } else if (this.timeMode == '固定时刻') {
let dataOd = []; let dataOd = [];
// for (let i = 0; i < this.dataList.length; i++) { // for (let i = 0; i < this.dataList.length; i++) {
@ -85,11 +130,12 @@ export default {
// } // }
// if (this.dataList[0][0] == undefined) { // if (this.dataList[0][0] == undefined) {
// for (let i = 0; i < this.dataList.length; i++) { // for (let i = 0; i < this.dataList.length; i++) {
if (this.dataList.length > 0 && this.dataList[0].ob_data) { if (filterDataList.length > 0 && filterDataList[0].ob_data) {
dataOd.push(this.dataList[0].ob_data); dataOd.push(filterDataList[0].ob_data);
dataList = this.ODhanlde(dataOd);
} }
dataList = this.ODhanlde(dataOd);
// } // }
// } else { // } else {
// dataOd.push(this.dataList[0][0].ob_data); // dataOd.push(this.dataList[0][0].ob_data);
@ -103,10 +149,11 @@ export default {
// } // }
// if (this.dataList[0][0] == undefined) { // if (this.dataList[0][0] == undefined) {
// for (let i = 0; i < this.dataList.length; i++) { // for (let i = 0; i < this.dataList.length; i++) {
if (this.dataList.length > 0 && this.dataList[0].ob_data) { if (filterDataList.length > 0 && filterDataList[0].ob_data) {
dataOd.push(this.dataList[0].ob_data); dataOd.push(filterDataList[0].ob_data);
}
dataList = this.ODhanlde(dataOd); dataList = this.ODhanlde(dataOd);
}
// } // }
// } else { // } else {
// dataOd.push(this.dataList[0][0].ob_data); // dataOd.push(this.dataList[0][0].ob_data);
@ -114,12 +161,13 @@ export default {
// } // }
} }
let myChart = this.chart; let myChart = this.chart;
let startName =[],endName=[] let startName = [],
endName = [];
if (this.startName) { if (this.startName) {
startName = this.startName.split(',') startName = this.startName.split(',');
} }
if (this.endName) { if (this.endName) {
endName = this.endName.split(',') endName = this.endName.split(',');
} }
if (dataList) { if (dataList) {
let option = { let option = {

4
src/components/target/newtypeChart.vue
View File

@ -40,13 +40,13 @@
<span style="font-size: 15px">速度</span><br /> <span style="font-size: 15px">速度</span><br />
<!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> --> <!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> -->
<span style="font-size: 30px; font-weight: bold"> <span style="font-size: 26px; font-weight: bold">
<span v-if="(latestDataArr.speed && latestDataArr.speed != -1) || latestDataArr.speed === 0"> <span v-if="(latestDataArr.speed && latestDataArr.speed != -1) || latestDataArr.speed === 0">
{{ Math.abs(latestDataArr.speed) }} {{ Math.abs(latestDataArr.speed) }}
</span> </span>
<span v-else> - </span> <span v-else> - </span>
</span> </span>
<span style="font-size: 20px; font-weight: 200"> <span style="font-size: 14px; font-weight: 200">
<span v-if="(latestDataArr.speed && latestDataArr.speed != -1) || latestDataArr.speed === 0"> <span v-if="(latestDataArr.speed && latestDataArr.speed != -1) || latestDataArr.speed === 0">
{{ latestDataArr.speed > 0 || latestDataArr.speed === 0 ? 'km/h' : 'pix/s' }} {{ latestDataArr.speed > 0 || latestDataArr.speed === 0 ? 'km/h' : 'pix/s' }}
</span> </span>

5
src/utils/mqttConfig.js
View File

@ -1,5 +1,7 @@
import mqtt from "mqtt"; import mqtt from "mqtt";
import Vue from 'vue' import Vue from 'vue'
import moment from 'moment';
var vm = new Vue(); var vm = new Vue();
var ip = window.location.host.split(":")[0]; var ip = window.location.host.split(":")[0];
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
@ -85,7 +87,8 @@ class mqttHandle {
// this._client.subscribe('detection0', { qos: 0 }); // this._client.subscribe('detection0', { qos: 0 });
}); });
this.mqttClient.on('reconnect', (error) => { this.mqttClient.on('reconnect', (error) => {
console.log('正在重连') console.log('正在重连-系统时间', moment().format('YYYY-MM-DD HH:mm:ss'))
}) })
this.mqttClient.on("error", (error) => { this.mqttClient.on("error", (error) => {

111
src/views/StateOperation.vue
View File

@ -20,8 +20,9 @@
<el-form :model="performance" label-position="left" label-width="200px" style="width: 70%"> <el-form :model="performance" label-position="left" label-width="200px" style="width: 70%">
<!-- <el-form-item label="正常运行时长：">{{ performance.runTime }}</el-form-item> --> <!-- <el-form-item label="正常运行时长：">{{ performance.runTime }}</el-form-item> -->
<el-form-item label="平均Cpu利用率：">{{ performance.averageCpuUtilization }}</el-form-item> <el-form-item label="平均Cpu利用率：">{{ performance.averageCpuUtilization }}</el-form-item>
<el-form-item label="Cpu利用率："><span v-for="s in performance.cpuUtilization" <el-form-item label="Cpu利用率："
:key="s">{{ s +'%'}} | </span> </el-form-item> ><span v-for="s in performance.cpuUtilization" :key="s">{{ s + '%' }} | </span>
</el-form-item>
<el-form-item label="Cpu温度：">{{ performance.cpuTemperature }}</el-form-item> <el-form-item label="Cpu温度：">{{ performance.cpuTemperature }}</el-form-item>
<el-form-item label="Cpu名称：">{{ performance.cpuName }}</el-form-item> <el-form-item label="Cpu名称：">{{ performance.cpuName }}</el-form-item>
<el-form-item label="Gpu利用率：">{{ performance.gpuUtilization }}</el-form-item> <el-form-item label="Gpu利用率：">{{ performance.gpuUtilization }}</el-form-item>
@ -49,7 +50,6 @@
</el-table-column> </el-table-column>
</el-table> --> </el-table> -->
<h1 class="mar-top20">系统网络状态</h1> <h1 class="mar-top20">系统网络状态</h1>
<el-form :model="networkStatus" label-position="left" label-width="200px" style="width: 70%"> <el-form :model="networkStatus" label-position="left" label-width="200px" style="width: 70%">
<el-form-item label="互联网接入：">{{ networkStatus.internetAccess }}</el-form-item> <el-form-item label="互联网接入：">{{ networkStatus.internetAccess }}</el-form-item>
@ -61,29 +61,19 @@
</el-form> </el-form>
<el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%"> <el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%">
<el-table-column prop="connect" label="连接"> <el-table-column prop="connect" label="连接"> </el-table-column>
</el-table-column> <el-table-column prop="IP" label="IP地址"> </el-table-column>
<el-table-column prop="IP" label="IP地址">
</el-table-column>
<el-table-column prop="acceptor" label="接受"> <el-table-column prop="acceptor" label="接受">
<template slot-scope="scope"> <template slot-scope="scope"> {{ scope.row.occupancy }}K </template>
{{ scope.row.occupancy }}K
</template>
</el-table-column> </el-table-column>
<el-table-column prop="totalReceived" label="收到的总数"> <el-table-column prop="totalReceived" label="收到的总数">
<template slot-scope="scope"> <template slot-scope="scope"> {{ scope.row.total }}GB </template>
{{ scope.row.total }}GB
</template>
</el-table-column> </el-table-column>
<el-table-column prop="transmission" label="传输"> <el-table-column prop="transmission" label="传输">
<template slot-scope="scope"> <template slot-scope="scope"> {{ scope.row.total }}Kb/s </template>
{{ scope.row.total }}Kb/s
</template>
</el-table-column> </el-table-column>
<el-table-column prop="transmissionTotal" label="传输的总数"> <el-table-column prop="transmissionTotal" label="传输的总数">
<template slot-scope="scope"> <template slot-scope="scope"> {{ scope.row.total }}MB </template>
{{ scope.row.total }}MB
</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
@ -99,7 +89,7 @@ export default {
version: '', version: '',
currentTime: '', currentTime: '',
startTime: '', startTime: '',
runTime: '', runTime: ''
}, },
performance: { performance: {
runTime: '', runTime: '',
@ -112,7 +102,7 @@ export default {
memoryUsage: '', memoryUsage: '',
totalMemory: '', totalMemory: '',
virtualMemoryUsed: '', virtualMemoryUsed: '',
totalVirtualMemory: '', totalVirtualMemory: ''
}, },
mountingPointTable: [ mountingPointTable: [
// { // {
@ -128,9 +118,9 @@ export default {
DNS: '', DNS: '',
VPNvisit: '', VPNvisit: '',
serverVPN: '', serverVPN: '',
serverVPNOpen: '', serverVPNOpen: ''
}, },
networkStatus: [ // networkStatus: [
// { // {
// connect: '2016-05-02', // connect: '2016-05-02',
// IP: '王小虎', // IP: '王小虎',
@ -139,71 +129,74 @@ export default {
// transmission: '上海市普陀区金沙江路 1518 弄', // transmission: '上海市普陀区金沙江路 1518 弄',
// transmissionTotal: '上海市普陀区金沙江路 1518 弄', // transmissionTotal: '上海市普陀区金沙江路 1518 弄',
// }, // },
] // ]
} messageTimer: null
};
}, },
created() { created() {
this.createMqtt() this.createMqtt();
// setTimeout(() => { // setTimeout(() => {
// this.createMqtt() // this.createMqtt()
// }, 3000); // }, 3000);
}, },
mounted() { mounted() {
this.publishClient();
window.setInterval( () => { //每隔30秒自动请求一次方法 this.getdata() ，保证数据实时的更新 this.messageTimer = setInterval(() => {
this.publishClient() //每隔30秒自动请求一次方法 this.getdata() ，保证数据实时的更新
}, 1000 * 5 ) this.publishClient();
}, 1000 * 5);
}, },
methods: { methods: {
/** 创建mqtt */ /** 创建mqtt */
createMqtt() { createMqtt() {
window.publish('Contorl_client',JSON.stringify({"type":"getStatus"})); // window.publish('Contorl_client', JSON.stringify({ type: 'getStatus' }));
//创建链接，接收数据 //创建链接，接收数据
var topicSends = ['Contorl_server']; var topicSends = ['Contorl_server'];
window.PubScribe(topicSends, -1, this.realInfo); window.PubScribe(topicSends, -1, this.realInfo);
}, },
publishClient() { publishClient() {
window.publish('Contorl_client',JSON.stringify({"type":"getStatus"})); window.publish('Contorl_client', JSON.stringify({ type: 'getStatus' }));
}, },
/** 实时数据分类 */ /** 实时数据分类 */
realInfo(topic, message) { realInfo(topic, message) {
// console.log("topic",topic) // console.log("topic",topic)
switch (topic) { switch (topic) {
case "Contorl_server": case 'Contorl_server':
try { try {
// console.log("message",message) // console.log("message",message)
const utf8decoder = new TextDecoder() const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message) const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// console.log("msg",msg) // console.log("msg",msg)
this.runningState.currentTime = msg.now_time this.runningState.currentTime = msg.now_time;
this.runningState.startTime = msg.starttime this.runningState.startTime = msg.starttime;
this.runningState.runTime = msg.uptime this.runningState.runTime = msg.uptime;
//平均Cpu利用率 //平均Cpu利用率
this.performance.averageCpuUtilization = msg.cpu_Average+'%' this.performance.averageCpuUtilization = msg.cpu_Average + '%';
this.performance.cpuUtilization = msg.cpu_Every this.performance.cpuUtilization = msg.cpu_Every;
this.performance.cpuTemperature = msg.cpu_Temperature+"°C" this.performance.cpuTemperature = msg.cpu_Temperature + '°C';
this.performance.cpuName = msg.cpu_Name this.performance.cpuName = msg.cpu_Name;
this.performance.gpuUtilization = msg.gpu_Average+'%' this.performance.gpuUtilization = msg.gpu_Average + '%';
this.performance.gpuTemperature = msg.gpu_Temperature+"°C" this.performance.gpuTemperature = msg.gpu_Temperature + '°C';
var newmemoryUsed = msg.memory_used/1024/1024/1024 var newmemoryUsed = msg.memory_used / 1024 / 1024 / 1024;
this.performance.memoryUsage = msg.memory_percent+'%'+' | '+ newmemoryUsed.toFixed(2)+'GB' this.performance.memoryUsage = msg.memory_percent + '%' + ' | ' + newmemoryUsed.toFixed(2) + 'GB';
var totalMemoryN = msg.memory_total/1024/1024/1024 var totalMemoryN = msg.memory_total / 1024 / 1024 / 1024;
this.performance.totalMemory = totalMemoryN.toFixed(2)+'GB' this.performance.totalMemory = totalMemoryN.toFixed(2) + 'GB';
var newswapUsed = msg.swap_used/1024/1024/1024 var newswapUsed = msg.swap_used / 1024 / 1024 / 1024;
this.performance.virtualMemoryUsed = msg.swap_percent+'%' +' | '+ newswapUsed.toFixed(2)+'GB' this.performance.virtualMemoryUsed = msg.swap_percent + '%' + ' | ' + newswapUsed.toFixed(2) + 'GB';
var totalVirtualMemoryN = msg.swap_total/1024/1024/1024 var totalVirtualMemoryN = msg.swap_total / 1024 / 1024 / 1024;
this.performance.totalVirtualMemory = totalVirtualMemoryN.toFixed(2)+'GB' this.performance.totalVirtualMemory = totalVirtualMemoryN.toFixed(2) + 'GB';
} catch (error) { } catch (error) {}
}
break; break;
} }
}
}, },
beforeDestroy() {
clearInterval(this.messageTimer);
this.messageTimer = null;
} }
} };
</script> </script>
<style scoped> <style scoped>

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

@ -249,6 +249,7 @@ export default {
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
item.children.forEach((cItem) => { item.children.forEach((cItem) => {
if (cItem.timeMode == timeMode) { if (cItem.timeMode == timeMode) {
// console.log('cItem', cItem);
//找出对应timeMode的mqtt数据 //找出对应timeMode的mqtt数据
tempNewVal.forEach((nItem) => { tempNewVal.forEach((nItem) => {
if (cItem.analogAreaComponentId == nItem.component_id) { if (cItem.analogAreaComponentId == nItem.component_id) {
@ -264,9 +265,19 @@ export default {
} else { } else {
nItem.time = nItem.time.split('.')[0]; nItem.time = nItem.time.split('.')[0];
} }
// cItem[updateKey].unshift(nItem); if (this.$route.query.type == '离线视频') {
if (
cItem[updateKey].length == 0 ||
(cItem[updateKey].length > 0 && nItem.time != cItem[updateKey][0].time)
) {
this.$set(cItem, updateKey, [nItem, ...cItem[updateKey]]); this.$set(cItem, updateKey, [nItem, ...cItem[updateKey]]);
} }
} else {
this.$set(cItem, updateKey, [nItem, ...cItem[updateKey]]);
}
// cItem[updateKey].unshift(nItem);
}
}); });
} }
}); });

24
src/views/index.vue
View File

@ -354,7 +354,9 @@
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="" v-if="componentForm.componentType == 'OD'"> <el-form-item label="" v-if="componentForm.componentType == 'OD'">
<div style="color:red;line-height: normal;">注意：OD组件消耗性能极高，可能会造成分析延迟，（起点个数*终点个数）值不要太大!</div> <div style="color: red; line-height: normal">
注意：OD组件消耗性能较大，可能会造成分析延迟，请不要勾选太多选项!
</div>
</el-form-item> </el-form-item>
<el-form-item label="起点：" :required="true" v-if="componentForm.componentType == 'OD'"> <el-form-item label="起点：" :required="true" v-if="componentForm.componentType == 'OD'">
<el-checkbox-group v-model="componentForm.startSection" @change="handleCheckedStartSection"> <el-checkbox-group v-model="componentForm.startSection" @change="handleCheckedStartSection">
@ -1521,12 +1523,12 @@ export default {
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
// console.log('实时触发trigger-', msgN[0].time,'-',msgN[0].frame); // console.log('实时触发trigger-', msgN[0].time,'-',msgN[0].frame);
// //console.log("trigger_msgN",msgN) // console.log("trigger_msgN",msgN)
// msgN.forEach(item => { // msgN.forEach(item => {
// //console.log("item.name",item.name) // //console.log("item.name",item.name)
// }) // })
// for (const item of msgN) { // for (const item of msgN) {
// if (item.component_name == '车头时距_4') { // if (item.component_name == 'OD_0') {
// console.log('源头实时触发trigger-', item); // console.log('源头实时触发trigger-', item);
// } // }
// } // }
@ -1551,7 +1553,7 @@ export default {
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
console.log('历史数据源头', msgN); // console.log('历史数据源头', msgN);
this.cycleHistoryData = msgN; this.cycleHistoryData = msgN;
} catch (error) {} } catch (error) {}
break; break;
@ -1563,6 +1565,11 @@ export default {
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
// console.log("cycle_statistics-固定间隔",temp) // console.log("cycle_statistics-固定间隔",temp)
// for (const item of msgN) {
// if (item.component_name == 'OD_0') {
// console.log('源头固定间隔cycle_statistics-', item);
// }
// }
this.cycleStatisticsData = msgN; this.cycleStatisticsData = msgN;
} catch (error) {} } catch (error) {}
break; break;
@ -1738,7 +1745,7 @@ export default {
this.componentId = id; this.componentId = id;
this.componentForm.componentType = type; this.componentForm.componentType = type;
this.componentTitle = type; this.componentTitle = type;
getComponentData({ AnalogAreaComponentId: id }).then((res) => { getComponentData({ AnalogAreaComponentId: id }).then(async(res) => {
//console.log('res', res); //console.log('res', res);
if (res.data.code == 200) { if (res.data.code == 200) {
//console.log('res', res.data.data); //console.log('res', res.data.data);
@ -1781,7 +1788,7 @@ export default {
this.componentForm.endValue = res.data.data.endValue; this.componentForm.endValue = res.data.data.endValue;
this.componentForm.startValue = res.data.data.startValue; this.componentForm.startValue = res.data.data.startValue;
this.componentForm.presentationForm = res.data.data.presentationForm; this.componentForm.presentationForm = res.data.data.presentationForm;
this.getAllSectionalData(this.$route.query.id); await this.getAllSectionalData(this.$route.query.id);
// this.componentForm.typeFiltering = res.data.data.typeFiltering // this.componentForm.typeFiltering = res.data.data.typeFiltering
// this.componentForm.type = res.data.data.type // this.componentForm.type = res.data.data.type
if (res.data.data.startSectionIds != '') { if (res.data.data.startSectionIds != '') {
@ -1894,7 +1901,7 @@ export default {
this.componentId = id; this.componentId = id;
this.componentForm.componentType = componentType; this.componentForm.componentType = componentType;
this.componentTitle = componentType; this.componentTitle = componentType;
getComponentData({ AnalogAreaComponentId: id }).then((res) => { getComponentData({ AnalogAreaComponentId: id }).then(async(res) => {
//console.log('res', res); //console.log('res', res);
if (res.data.code == 200) { if (res.data.code == 200) {
//console.log('res', res.data.data); //console.log('res', res.data.data);
@ -1933,6 +1940,7 @@ export default {
this.componentForm.startValue = res.data.data.startValue; this.componentForm.startValue = res.data.data.startValue;
this.componentForm.presentationForm = res.data.data.presentationForm; this.componentForm.presentationForm = res.data.data.presentationForm;
// this.componentForm.type = res.data.data.type // this.componentForm.type = res.data.data.type
await this.getAllSectionalData(this.$route.query.id);
if (res.data.data.startSectionIds != '') { if (res.data.data.startSectionIds != '') {
//console.log('startSectionIds', res.data.data.startSectionIds); //console.log('startSectionIds', res.data.data.startSectionIds);
var startSectionIdArr = []; var startSectionIdArr = [];
@ -1985,7 +1993,7 @@ export default {
}, },
//获取所有断面数据 //获取所有断面数据
getAllSectionalData(VideoId) { getAllSectionalData(VideoId) {
getSectionalData({ VideoId: VideoId }).then((res) => { return getSectionalData({ VideoId: VideoId }).then((res) => {
//console.log('res', res); //console.log('res', res);
if (res.data.code == 200) { if (res.data.code == 200) {
this.sectionals = res.data.data; this.sectionals = res.data.data;

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

@ -613,7 +613,7 @@
<div :class="'echarts' + b" v-for="(e, b) in o.children" :key="b"> <div :class="'echarts' + b" v-for="(e, b) in o.children" :key="b">
<div <div
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
v-show="e.presentationForm == '时间曲线图' && o.selectOption == b + 1" v-if="e.presentationForm == '时间曲线图' && o.selectOption == b + 1"
> >
<div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box"> <div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
<span class="titleIcon"></span> <span class="titleIcon"></span>
@ -668,7 +668,7 @@
</div> </div>
<div <div
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
v-show="e.presentationForm == '表格' && o.selectOption == b + 1" v-if="e.presentationForm == '表格' && o.selectOption == b + 1"
> >
<div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box"> <div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
<span class="titleIcon"></span> <span class="titleIcon"></span>
@ -780,7 +780,7 @@
</div> </div>
<div <div
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
v-show="e.presentationForm == '饼状图' && o.selectOption == b + 1" v-if="e.presentationForm == '饼状图' && o.selectOption == b + 1"
> >
<div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box"> <div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
<span class="titleIcon"></span> <span class="titleIcon"></span>
@ -870,7 +870,7 @@
</div> </div>
<div <div
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
v-show="e.presentationForm == '均值图' && o.selectOption == b + 1" v-if="e.presentationForm == '均值图' && o.selectOption == b + 1"
> >
<div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box"> <div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
<span class="titleIcon"></span> <span class="titleIcon"></span>
@ -912,7 +912,7 @@
</div> </div>
<div <div
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
v-show="e.presentationForm == '矩阵图' && o.selectOption == b + 1" v-if="e.presentationForm == '矩阵图' && o.selectOption == b + 1"
> >
<div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box"> <div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
<span class="titleIcon"></span> <span class="titleIcon"></span>
@ -3083,7 +3083,8 @@ export default {
// ); // );
// }); // });
let carTou = { let carTou = {
ob_data: msgN[j].ob_data ob_data: msgN[j].ob_data,
time: msgN[j].time,
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.triggerDataCharts( this.triggerDataCharts(