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 () {

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

@ -1,5 +1,8 @@
<template> <template>
<div id="thermalChart" ref="thermalChart" style="width: 705px; height: 300px"></div> <div>
<div>当前数据时间：{{ time }}</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() {},
@ -24,18 +28,18 @@ export default {
title: { title: {
type: String type: String
}, },
startEndData:{ startEndData: {
type:Object, type: Object,
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,14 +214,16 @@ 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.drawThermalChart(newval[0].ob_data,this.startEndData); this.time = newval[0].time
this.drawThermalChart(newval[0].ob_data, this.startEndData);
}); });
} }
}, },
@ -211,7 +234,7 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped>
.a{ .a {
color: rgba(120, 0, 0, 0.5); color: rgba(120, 0, 0, 0.5);
} }
</style> </style>

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 != '类型') {
//类型种类特殊不能去除时间重复项，不走下面去重逻辑 //类型种类特殊不能去除时间重复项，不走下面去重逻辑

82
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 = [],
if(this.startName){ endName = [];
startName = this.startName.split(',') if (this.startName) {
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) => {

349
src/views/StateOperation.vue
View File

@ -1,38 +1,39 @@
<template> <template>
<div class="content-box"> <div class="content-box">
<div class="container"> <div class="container">
<!-- <p>主体页面 1 - 2 </p> <!-- <p>主体页面 1 - 2 </p>
<div class="test-div"> <div class="test-div">
<i class="el-icon-edit"></i> <i class="el-icon-edit"></i>
<i class="el-icon-share"></i> <i class="el-icon-share"></i>
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> --> </div> -->
<h1>运行状态</h1> <h1>运行状态</h1>
<el-form :model="runningState" label-position="left" label-width="200px" style="width:70%"> <el-form :model="runningState" label-position="left" label-width="200px" style="width: 70%">
<el-form-item label="类型：">{{ runningState.type }}</el-form-item> <el-form-item label="类型：">{{ runningState.type }}</el-form-item>
<el-form-item label="版本：">{{ runningState.version }}</el-form-item> <el-form-item label="版本：">{{ runningState.version }}</el-form-item>
<el-form-item label="当前系统时间：">{{ runningState.currentTime }}</el-form-item> <el-form-item label="当前系统时间：">{{ runningState.currentTime }}</el-form-item>
<el-form-item label="开始运行时间：">{{ runningState.startTime }}</el-form-item> <el-form-item label="开始运行时间：">{{ runningState.startTime }}</el-form-item>
<el-form-item label="正常运行时长：">{{ runningState.runTime }}</el-form-item> <el-form-item label="正常运行时长：">{{ runningState.runTime }}</el-form-item>
</el-form> </el-form>
<h1 class="mar-top20">系统性能状态</h1> <h1 class="mar-top20">系统性能状态</h1>
<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 label="Cpu温度：">{{ performance.cpuTemperature }}</el-form-item> </el-form-item>
<el-form-item label="Cpu名称：">{{ performance.cpuName }}</el-form-item> <el-form-item label="Cpu温度：">{{ performance.cpuTemperature }}</el-form-item>
<el-form-item label="Gpu利用率：">{{ performance.gpuUtilization }}</el-form-item> <el-form-item label="Cpu名称：">{{ performance.cpuName }}</el-form-item>
<el-form-item label="Gpu温度：">{{ performance.gpuTemperature }}</el-form-item> <el-form-item label="Gpu利用率：">{{ performance.gpuUtilization }}</el-form-item>
<el-form-item label="使用的内存：">{{ performance.memoryUsage }}</el-form-item> <el-form-item label="Gpu温度：">{{ performance.gpuTemperature }}</el-form-item>
<el-form-item label="内存总数：">{{ performance.totalMemory }}</el-form-item> <el-form-item label="使用的内存：">{{ performance.memoryUsage }}</el-form-item>
<el-form-item label="已使用虚拟内存：">{{ performance.virtualMemoryUsed }}</el-form-item> <el-form-item label="内存总数：">{{ performance.totalMemory }}</el-form-item>
<el-form-item label="虚拟内存总计：">{{ performance.totalVirtualMemory }}</el-form-item> <el-form-item label="已使用虚拟内存：">{{ performance.virtualMemoryUsed }}</el-form-item>
</el-form> <el-form-item label="虚拟内存总计：">{{ performance.totalVirtualMemory }}</el-form-item>
</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="mountingPoint" label="安装点"> <el-table-column prop="mountingPoint" label="安装点">
</el-table-column> </el-table-column>
<el-table-column prop="equipmentName" label="设备名称"> <el-table-column prop="equipmentName" label="设备名称">
@ -49,173 +50,165 @@
</el-table-column> </el-table-column>
</el-table> --> </el-table> -->
<h1 class="mar-top20">系统网络状态</h1>
<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.internetDelay }}</el-form-item>
<el-form-item label="DNS访问：">{{ networkStatus.DNS }}</el-form-item>
<el-form-item label="本地VPN访问：">{{ networkStatus.VPNvisit }}</el-form-item>
<el-form-item label="服务器VPN访问：">{{ networkStatus.serverVPN }}</el-form-item>
<el-form-item label="服务器VPN访问：">{{ networkStatus.serverVPNOpen }}</el-form-item>
</el-form>
<h1 class="mar-top20">系统网络状态</h1> <el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%">
<el-form :model="networkStatus" label-position="left" label-width="200px" style="width:70%"> <el-table-column prop="connect" label="连接"> </el-table-column>
<el-form-item label="互联网接入：">{{ networkStatus.internetAccess }}</el-form-item> <el-table-column prop="IP" label="IP地址"> </el-table-column>
<el-form-item label="互联网延迟：">{{ networkStatus.internetDelay }}</el-form-item> <el-table-column prop="acceptor" label="接受">
<el-form-item label="DNS访问：">{{ networkStatus.DNS }}</el-form-item> <template slot-scope="scope"> {{ scope.row.occupancy }}K </template>
<el-form-item label="本地VPN访问：">{{ networkStatus.VPNvisit }}</el-form-item> </el-table-column>
<el-form-item label="服务器VPN访问：">{{ networkStatus.serverVPN }}</el-form-item> <el-table-column prop="totalReceived" label="收到的总数">
<el-form-item label="服务器VPN访问：">{{ networkStatus.serverVPNOpen }}</el-form-item> <template slot-scope="scope"> {{ scope.row.total }}GB </template>
</el-form> </el-table-column>
<el-table-column prop="transmission" label="传输">
<el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%"> <template slot-scope="scope"> {{ scope.row.total }}Kb/s </template>
<el-table-column prop="connect" label="连接"> </el-table-column>
</el-table-column> <el-table-column prop="transmissionTotal" label="传输的总数">
<el-table-column prop="IP" label="IP地址"> <template slot-scope="scope"> {{ scope.row.total }}MB </template>
</el-table-column> </el-table-column>
<el-table-column prop="acceptor" label="接受"> </el-table>
<template slot-scope="scope"> </div>
{{ scope.row.occupancy }}K
</template>
</el-table-column>
<el-table-column prop="totalReceived" label="收到的总数">
<template slot-scope="scope">
{{ scope.row.total }}GB
</template>
</el-table-column>
<el-table-column prop="transmission" label="传输">
<template slot-scope="scope">
{{ scope.row.total }}Kb/s
</template>
</el-table-column>
<el-table-column prop="transmissionTotal" label="传输的总数">
<template slot-scope="scope">
{{ scope.row.total }}MB
</template>
</el-table-column>
</el-table>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
runningState: { runningState: {
type: '', type: '',
version: '', version: '',
currentTime: '', currentTime: '',
startTime: '', startTime: '',
runTime: '', runTime: ''
}, },
performance: { performance: {
runTime: '', runTime: '',
averageCpuUtilization: '', averageCpuUtilization: '',
cpuUtilization: '', cpuUtilization: '',
cpuTemperature: '', cpuTemperature: '',
cpuName: '', cpuName: '',
gpuUtilization: '', gpuUtilization: '',
gpuTemperature: '', gpuTemperature: '',
memoryUsage: '', memoryUsage: '',
totalMemory: '', totalMemory: '',
virtualMemoryUsed: '', virtualMemoryUsed: '',
totalVirtualMemory: '', totalVirtualMemory: ''
}, },
mountingPointTable: [ mountingPointTable: [
// { // {
// mountingPoint: '2016-05-02', // mountingPoint: '2016-05-02',
// equipmentName: '王小虎', // equipmentName: '王小虎',
// occupancy: '上海市普陀区金沙江路 1518 弄', // occupancy: '上海市普陀区金沙江路 1518 弄',
// total: '上海市普陀区金沙江路 1518 弄', // total: '上海市普陀区金沙江路 1518 弄',
// }, // },
], ],
networkStatus: { networkStatus: {
internetAccess: '', internetAccess: '',
internetDelay: '', internetDelay: '',
DNS: '', DNS: '',
VPNvisit: '', VPNvisit: '',
serverVPN: '', serverVPN: '',
serverVPNOpen: '', serverVPNOpen: ''
}, },
networkStatus: [ // networkStatus: [
// { // {
// connect: '2016-05-02', // connect: '2016-05-02',
// IP: '王小虎', // IP: '王小虎',
// acceptor: '上海市普陀区金沙江路 1518 弄', // acceptor: '上海市普陀区金沙江路 1518 弄',
// totalReceived: '上海市普陀区金沙江路 1518 弄', // totalReceived: '上海市普陀区金沙江路 1518 弄',
// transmission: '上海市普陀区金沙江路 1518 弄', // transmission: '上海市普陀区金沙江路 1518 弄',
// transmissionTotal: '上海市普陀区金沙江路 1518 弄', // transmissionTotal: '上海市普陀区金沙江路 1518 弄',
// }, // },
] // ]
} messageTimer: null
}, };
created() {
this.createMqtt()
// setTimeout(() => {
// this.createMqtt()
// }, 3000);
},
mounted() {
window.setInterval( () => { //每隔30秒自动请求一次方法 this.getdata() ，保证数据实时的更新
this.publishClient()
}, 1000 * 5 )
},
methods: {
/** 创建mqtt */
createMqtt() {
window.publish('Contorl_client',JSON.stringify({"type":"getStatus"}));
//创建链接，接收数据
var topicSends = ['Contorl_server'];
window.PubScribe(topicSends,-1,this.realInfo);
},
publishClient(){
window.publish('Contorl_client',JSON.stringify({"type":"getStatus"}));
},
/** 实时数据分类 */
realInfo(topic, message) {
// console.log("topic",topic)
switch (topic) {
case "Contorl_server":
try {
// console.log("message",message)
const utf8decoder = new TextDecoder()
const u8arr = new Uint8Array(message)
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// console.log("msg",msg)
this.runningState.currentTime = msg.now_time
this.runningState.startTime = msg.starttime
this.runningState.runTime = msg.uptime
//平均Cpu利用率
this.performance.averageCpuUtilization = msg.cpu_Average+'%'
this.performance.cpuUtilization = msg.cpu_Every
this.performance.cpuTemperature = msg.cpu_Temperature+"°C"
this.performance.cpuName = msg.cpu_Name
this.performance.gpuUtilization = msg.gpu_Average+'%'
this.performance.gpuTemperature = msg.gpu_Temperature+"°C"
var newmemoryUsed = msg.memory_used/1024/1024/1024
this.performance.memoryUsage = msg.memory_percent+'%'+' | '+ newmemoryUsed.toFixed(2)+'GB'
var totalMemoryN = msg.memory_total/1024/1024/1024
this.performance.totalMemory = totalMemoryN.toFixed(2)+'GB'
var newswapUsed = msg.swap_used/1024/1024/1024
this.performance.virtualMemoryUsed = msg.swap_percent+'%' +' | '+ newswapUsed.toFixed(2)+'GB'
var totalVirtualMemoryN = msg.swap_total/1024/1024/1024
this.performance.totalVirtualMemory = totalVirtualMemoryN.toFixed(2)+'GB'
} catch (error) {
}
break;
}
}, },
} created() {
} this.createMqtt();
// setTimeout(() => {
// this.createMqtt()
// }, 3000);
},
mounted() {
this.publishClient();
this.messageTimer = setInterval(() => {
//每隔30秒自动请求一次方法 this.getdata() ，保证数据实时的更新
this.publishClient();
}, 1000 * 5);
},
methods: {
/** 创建mqtt */
createMqtt() {
// window.publish('Contorl_client', JSON.stringify({ type: 'getStatus' }));
//创建链接，接收数据
var topicSends = ['Contorl_server'];
window.PubScribe(topicSends, -1, this.realInfo);
},
publishClient() {
window.publish('Contorl_client', JSON.stringify({ type: 'getStatus' }));
},
/** 实时数据分类 */
realInfo(topic, message) {
// console.log("topic",topic)
switch (topic) {
case 'Contorl_server':
try {
// console.log("message",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// console.log("msg",msg)
this.runningState.currentTime = msg.now_time;
this.runningState.startTime = msg.starttime;
this.runningState.runTime = msg.uptime;
//平均Cpu利用率
this.performance.averageCpuUtilization = msg.cpu_Average + '%';
this.performance.cpuUtilization = msg.cpu_Every;
this.performance.cpuTemperature = msg.cpu_Temperature + '°C';
this.performance.cpuName = msg.cpu_Name;
this.performance.gpuUtilization = msg.gpu_Average + '%';
this.performance.gpuTemperature = msg.gpu_Temperature + '°C';
var newmemoryUsed = msg.memory_used / 1024 / 1024 / 1024;
this.performance.memoryUsage = msg.memory_percent + '%' + ' | ' + newmemoryUsed.toFixed(2) + 'GB';
var totalMemoryN = msg.memory_total / 1024 / 1024 / 1024;
this.performance.totalMemory = totalMemoryN.toFixed(2) + 'GB';
var newswapUsed = msg.swap_used / 1024 / 1024 / 1024;
this.performance.virtualMemoryUsed = msg.swap_percent + '%' + ' | ' + newswapUsed.toFixed(2) + 'GB';
var totalVirtualMemoryN = msg.swap_total / 1024 / 1024 / 1024;
this.performance.totalVirtualMemory = totalVirtualMemoryN.toFixed(2) + 'GB';
} catch (error) {}
break;
}
}
},
beforeDestroy() {
clearInterval(this.messageTimer);
this.messageTimer = null;
}
};
</script> </script>
<style scoped> <style scoped>
.test-div i { .test-div i {
font-size: 25px; font-size: 25px;
} }
.el-form-item { .el-form-item {
margin-bottom: 0px; margin-bottom: 0px;
} }
.mar-top20 { .mar-top20 {
margin-top: 20px; margin-top: 20px;
} }
</style> </style>

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,8 +265,18 @@ export default {
} else { } else {
nItem.time = nItem.time.split('.')[0]; nItem.time = nItem.time.split('.')[0];
} }
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]]);
}
} else {
this.$set(cItem, updateKey, [nItem, ...cItem[updateKey]]);
}
// cItem[updateKey].unshift(nItem); // cItem[updateKey].unshift(nItem);
this.$set(cItem, updateKey, [nItem, ...cItem[updateKey]]);
} }
}); });
} }

26
src/views/index.vue
View File

@ -353,8 +353,10 @@
</el-slider> </el-slider>
</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(