bug修改
This commit is contained in:
parent
af5e7b9d7c
commit
5458c18ab1
|
@ -111,8 +111,44 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
drawLine(newVal, title, timeMode) {
|
||||
// console.log('newVal == ', newVal)
|
||||
//过滤重复的 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 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);
|
||||
if (myChart == null) {
|
||||
myChart = this.$echarts.init(this.$refs.lineChart);
|
||||
|
@ -125,6 +161,7 @@ export default {
|
|||
}
|
||||
|
||||
// myChart.showLoading() //开启loading
|
||||
let series = this.getMessage(newVal, title, timeMode) || []
|
||||
let option = {
|
||||
legend: {},
|
||||
grid: {
|
||||
|
@ -180,7 +217,7 @@ export default {
|
|||
}
|
||||
}
|
||||
],
|
||||
series: this.getMessage(newVal, title, timeMode)
|
||||
series: series
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', function () {
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>当前数据时间:{{ time }}</div>
|
||||
<div id="thermalChart" ref="thermalChart" style="width: 705px; height: 300px"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -7,7 +10,8 @@ export default {
|
|||
name: 'thermalChart', //热点图组件
|
||||
data() {
|
||||
return {
|
||||
thermalChartData: []
|
||||
thermalChartData: [],
|
||||
time: '',
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
|
@ -29,13 +33,13 @@ export default {
|
|||
default() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
// status: {
|
||||
// type: String
|
||||
// },
|
||||
// componentName: {
|
||||
// type: String
|
||||
// },
|
||||
componentName: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//处理od组件数据
|
||||
|
@ -53,7 +57,7 @@ export default {
|
|||
// 数组去重
|
||||
|
||||
// od图的数据
|
||||
chartData.push([i, j, item[j].quantity]);
|
||||
chartData.push([j, i, item[j].quantity]);
|
||||
// console.log([i,j,item[j].val]);
|
||||
}
|
||||
}
|
||||
|
@ -87,6 +91,14 @@ export default {
|
|||
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 option = {
|
||||
dataZoom: [
|
||||
|
@ -109,9 +121,9 @@ export default {
|
|||
},
|
||||
animation: false,
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '8%',
|
||||
bottom: '8%',
|
||||
left: '0%',
|
||||
right: '11%',
|
||||
bottom: '11%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
|
@ -124,12 +136,16 @@ export default {
|
|||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 40
|
||||
rotate: 0
|
||||
},
|
||||
splitArea: {
|
||||
show: true
|
||||
},
|
||||
name: "起点",
|
||||
nameTextStyle:{
|
||||
verticalAlign:'top',
|
||||
padding:[8,0,0,0]
|
||||
}
|
||||
// name: "镇街",
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
|
@ -141,12 +157,17 @@ export default {
|
|||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 40
|
||||
rotate: 0
|
||||
},
|
||||
splitArea: {
|
||||
show: true
|
||||
},
|
||||
name: "终点",
|
||||
nameLocation:'end',
|
||||
nameTextStyle:{
|
||||
verticalAlign:'bottom',
|
||||
padding:[0,40,0,0]
|
||||
}
|
||||
// name: "",
|
||||
},
|
||||
visualMap: {
|
||||
min: 1,
|
||||
|
@ -193,13 +214,15 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
this.drawThermalChart()
|
||||
this.drawThermalChart();
|
||||
},
|
||||
watch: {
|
||||
list: {
|
||||
handler: function (newval, oldVal) {
|
||||
if (newval && newval.length > 0) {
|
||||
// console.log('OD',newval)
|
||||
this.$nextTick(() => {
|
||||
this.time = newval[0].time
|
||||
this.drawThermalChart(newval[0].ob_data, this.startEndData);
|
||||
});
|
||||
}
|
||||
|
|
|
@ -114,7 +114,7 @@ export default {
|
|||
yData = [];
|
||||
let targetTime = '';
|
||||
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 != '类型') {
|
||||
//类型种类特殊不能去除时间重复项,不走下面去重逻辑
|
||||
|
|
|
@ -57,7 +57,7 @@ export default {
|
|||
start.push(item[j].start);
|
||||
// 数组去重
|
||||
// od图的数据
|
||||
chartData.push([i, j, item[j].quantity]);
|
||||
chartData.push([j, i, item[j].quantity]);
|
||||
// console.log([i,j,item[j].val]);
|
||||
}
|
||||
}
|
||||
|
@ -67,16 +67,61 @@ export default {
|
|||
// this.thermalChartData = 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() {
|
||||
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 == '实时触发') {
|
||||
let dataOd = [];
|
||||
if (this.dataList.length > 0) {
|
||||
for (let i = 0; i < this.dataList.length; i++) {
|
||||
dataOd.push(this.dataList[i].ob_data);
|
||||
if (filterDataList.length > 0 && filterDataList[0].ob_data) {
|
||||
dataOd.push(filterDataList[0].ob_data);
|
||||
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 == '固定时刻') {
|
||||
let dataOd = [];
|
||||
// for (let i = 0; i < this.dataList.length; i++) {
|
||||
|
@ -85,11 +130,12 @@ export default {
|
|||
// }
|
||||
// if (this.dataList[0][0] == undefined) {
|
||||
// for (let i = 0; i < this.dataList.length; i++) {
|
||||
if (this.dataList.length > 0 && this.dataList[0].ob_data) {
|
||||
dataOd.push(this.dataList[0].ob_data);
|
||||
if (filterDataList.length > 0 && filterDataList[0].ob_data) {
|
||||
dataOd.push(filterDataList[0].ob_data);
|
||||
dataList = this.ODhanlde(dataOd);
|
||||
}
|
||||
|
||||
dataList = this.ODhanlde(dataOd);
|
||||
|
||||
// }
|
||||
// } else {
|
||||
// dataOd.push(this.dataList[0][0].ob_data);
|
||||
|
@ -103,10 +149,11 @@ export default {
|
|||
// }
|
||||
// if (this.dataList[0][0] == undefined) {
|
||||
// for (let i = 0; i < this.dataList.length; i++) {
|
||||
if (this.dataList.length > 0 && this.dataList[0].ob_data) {
|
||||
dataOd.push(this.dataList[0].ob_data);
|
||||
}
|
||||
if (filterDataList.length > 0 && filterDataList[0].ob_data) {
|
||||
dataOd.push(filterDataList[0].ob_data);
|
||||
dataList = this.ODhanlde(dataOd);
|
||||
}
|
||||
|
||||
// }
|
||||
// } else {
|
||||
// dataOd.push(this.dataList[0][0].ob_data);
|
||||
|
@ -114,12 +161,13 @@ export default {
|
|||
// }
|
||||
}
|
||||
let myChart = this.chart;
|
||||
let startName =[],endName=[]
|
||||
let startName = [],
|
||||
endName = [];
|
||||
if (this.startName) {
|
||||
startName = this.startName.split(',')
|
||||
startName = this.startName.split(',');
|
||||
}
|
||||
if (this.endName) {
|
||||
endName = this.endName.split(',')
|
||||
endName = this.endName.split(',');
|
||||
}
|
||||
if (dataList) {
|
||||
let option = {
|
||||
|
|
|
@ -40,13 +40,13 @@
|
|||
<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">
|
||||
<span style="font-size: 26px; font-weight: bold">
|
||||
<span v-if="(latestDataArr.speed && latestDataArr.speed != -1) || latestDataArr.speed === 0">
|
||||
{{ Math.abs(latestDataArr.speed) }}
|
||||
</span>
|
||||
<span v-else> - </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">
|
||||
{{ latestDataArr.speed > 0 || latestDataArr.speed === 0 ? 'km/h' : 'pix/s' }}
|
||||
</span>
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
import mqtt from "mqtt";
|
||||
import Vue from 'vue'
|
||||
import moment from 'moment';
|
||||
|
||||
var vm = new Vue();
|
||||
var ip = window.location.host.split(":")[0];
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
|
@ -85,7 +87,8 @@ class mqttHandle {
|
|||
// this._client.subscribe('detection0', { qos: 0 });
|
||||
});
|
||||
this.mqttClient.on('reconnect', (error) => {
|
||||
console.log('正在重连')
|
||||
console.log('正在重连-系统时间', moment().format('YYYY-MM-DD HH:mm:ss'))
|
||||
|
||||
})
|
||||
|
||||
this.mqttClient.on("error", (error) => {
|
||||
|
|
|
@ -20,8 +20,9 @@
|
|||
<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="平均Cpu利用率:">{{ performance.averageCpuUtilization }}</el-form-item>
|
||||
<el-form-item label="Cpu利用率:"><span v-for="s in performance.cpuUtilization"
|
||||
:key="s">{{ s +'%'}} | </span> </el-form-item>
|
||||
<el-form-item label="Cpu利用率:"
|
||||
><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.cpuName }}</el-form-item>
|
||||
<el-form-item label="Gpu利用率:">{{ performance.gpuUtilization }}</el-form-item>
|
||||
|
@ -49,7 +50,6 @@
|
|||
</el-table-column>
|
||||
</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>
|
||||
|
@ -61,29 +61,19 @@
|
|||
</el-form>
|
||||
|
||||
<el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%">
|
||||
<el-table-column prop="connect" label="连接">
|
||||
</el-table-column>
|
||||
<el-table-column prop="IP" label="IP地址">
|
||||
</el-table-column>
|
||||
<el-table-column prop="connect" label="连接"> </el-table-column>
|
||||
<el-table-column prop="IP" label="IP地址"> </el-table-column>
|
||||
<el-table-column prop="acceptor" label="接受">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.occupancy }}K
|
||||
</template>
|
||||
<template slot-scope="scope"> {{ scope.row.occupancy }}K </template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalReceived" label="收到的总数">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.total }}GB
|
||||
</template>
|
||||
<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>
|
||||
<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>
|
||||
<template slot-scope="scope"> {{ scope.row.total }}MB </template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
@ -99,7 +89,7 @@ export default {
|
|||
version: '',
|
||||
currentTime: '',
|
||||
startTime: '',
|
||||
runTime: '',
|
||||
runTime: ''
|
||||
},
|
||||
performance: {
|
||||
runTime: '',
|
||||
|
@ -112,7 +102,7 @@ export default {
|
|||
memoryUsage: '',
|
||||
totalMemory: '',
|
||||
virtualMemoryUsed: '',
|
||||
totalVirtualMemory: '',
|
||||
totalVirtualMemory: ''
|
||||
},
|
||||
mountingPointTable: [
|
||||
// {
|
||||
|
@ -128,9 +118,9 @@ export default {
|
|||
DNS: '',
|
||||
VPNvisit: '',
|
||||
serverVPN: '',
|
||||
serverVPNOpen: '',
|
||||
serverVPNOpen: ''
|
||||
},
|
||||
networkStatus: [
|
||||
// networkStatus: [
|
||||
// {
|
||||
// connect: '2016-05-02',
|
||||
// IP: '王小虎',
|
||||
|
@ -139,71 +129,74 @@ export default {
|
|||
// transmission: '上海市普陀区金沙江路 1518 弄',
|
||||
// transmissionTotal: '上海市普陀区金沙江路 1518 弄',
|
||||
// },
|
||||
]
|
||||
}
|
||||
// ]
|
||||
messageTimer: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.createMqtt()
|
||||
this.createMqtt();
|
||||
// setTimeout(() => {
|
||||
// this.createMqtt()
|
||||
// }, 3000);
|
||||
},
|
||||
mounted() {
|
||||
|
||||
window.setInterval( () => { //每隔30秒自动请求一次方法 this.getdata() ,保证数据实时的更新
|
||||
this.publishClient()
|
||||
}, 1000 * 5 )
|
||||
this.publishClient();
|
||||
this.messageTimer = setInterval(() => {
|
||||
//每隔30秒自动请求一次方法 this.getdata() ,保证数据实时的更新
|
||||
this.publishClient();
|
||||
}, 1000 * 5);
|
||||
},
|
||||
methods: {
|
||||
/** 创建mqtt */
|
||||
createMqtt() {
|
||||
window.publish('Contorl_client',JSON.stringify({"type":"getStatus"}));
|
||||
// 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"}));
|
||||
window.publish('Contorl_client', JSON.stringify({ type: 'getStatus' }));
|
||||
},
|
||||
/** 实时数据分类 */
|
||||
realInfo(topic, message) {
|
||||
// console.log("topic",topic)
|
||||
switch (topic) {
|
||||
case "Contorl_server":
|
||||
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的错误提示数据
|
||||
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
|
||||
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) {
|
||||
|
||||
}
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
@ -249,6 +249,7 @@ export default {
|
|||
if (item.children && item.children.length > 0) {
|
||||
item.children.forEach((cItem) => {
|
||||
if (cItem.timeMode == timeMode) {
|
||||
// console.log('cItem', cItem);
|
||||
//找出对应timeMode的mqtt数据
|
||||
tempNewVal.forEach((nItem) => {
|
||||
if (cItem.analogAreaComponentId == nItem.component_id) {
|
||||
|
@ -264,9 +265,19 @@ export default {
|
|||
} else {
|
||||
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]]);
|
||||
}
|
||||
} else {
|
||||
this.$set(cItem, updateKey, [nItem, ...cItem[updateKey]]);
|
||||
}
|
||||
|
||||
// cItem[updateKey].unshift(nItem);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
@ -354,7 +354,9 @@
|
|||
</div>
|
||||
</el-form-item>
|
||||
<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 label="起点:" :required="true" v-if="componentForm.componentType == 'OD'">
|
||||
<el-checkbox-group v-model="componentForm.startSection" @change="handleCheckedStartSection">
|
||||
|
@ -1521,12 +1523,12 @@ export default {
|
|||
var detId = [];
|
||||
const msgN = JSON.parse(temp);
|
||||
// console.log('实时触发trigger-', msgN[0].time,'-',msgN[0].frame);
|
||||
// //console.log("trigger_msgN",msgN)
|
||||
// console.log("trigger_msgN",msgN)
|
||||
// msgN.forEach(item => {
|
||||
// //console.log("item.name",item.name)
|
||||
// })
|
||||
// for (const item of msgN) {
|
||||
// if (item.component_name == '车头时距_4') {
|
||||
// if (item.component_name == 'OD_0') {
|
||||
// console.log('源头实时触发trigger-', item);
|
||||
// }
|
||||
// }
|
||||
|
@ -1551,7 +1553,7 @@ export default {
|
|||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
var detId = [];
|
||||
const msgN = JSON.parse(temp);
|
||||
console.log('历史数据源头', msgN);
|
||||
// console.log('历史数据源头', msgN);
|
||||
this.cycleHistoryData = msgN;
|
||||
} catch (error) {}
|
||||
break;
|
||||
|
@ -1563,6 +1565,11 @@ export default {
|
|||
var detId = [];
|
||||
const msgN = JSON.parse(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;
|
||||
} catch (error) {}
|
||||
break;
|
||||
|
@ -1738,7 +1745,7 @@ export default {
|
|||
this.componentId = id;
|
||||
this.componentForm.componentType = type;
|
||||
this.componentTitle = type;
|
||||
getComponentData({ AnalogAreaComponentId: id }).then((res) => {
|
||||
getComponentData({ AnalogAreaComponentId: id }).then(async(res) => {
|
||||
//console.log('res', res);
|
||||
if (res.data.code == 200) {
|
||||
//console.log('res', res.data.data);
|
||||
|
@ -1781,7 +1788,7 @@ export default {
|
|||
this.componentForm.endValue = res.data.data.endValue;
|
||||
this.componentForm.startValue = res.data.data.startValue;
|
||||
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.type = res.data.data.type
|
||||
if (res.data.data.startSectionIds != '') {
|
||||
|
@ -1894,7 +1901,7 @@ export default {
|
|||
this.componentId = id;
|
||||
this.componentForm.componentType = componentType;
|
||||
this.componentTitle = componentType;
|
||||
getComponentData({ AnalogAreaComponentId: id }).then((res) => {
|
||||
getComponentData({ AnalogAreaComponentId: id }).then(async(res) => {
|
||||
//console.log('res', res);
|
||||
if (res.data.code == 200) {
|
||||
//console.log('res', res.data.data);
|
||||
|
@ -1933,6 +1940,7 @@ export default {
|
|||
this.componentForm.startValue = res.data.data.startValue;
|
||||
this.componentForm.presentationForm = res.data.data.presentationForm;
|
||||
// this.componentForm.type = res.data.data.type
|
||||
await this.getAllSectionalData(this.$route.query.id);
|
||||
if (res.data.data.startSectionIds != '') {
|
||||
//console.log('startSectionIds', res.data.data.startSectionIds);
|
||||
var startSectionIdArr = [];
|
||||
|
@ -1985,7 +1993,7 @@ export default {
|
|||
},
|
||||
//获取所有断面数据
|
||||
getAllSectionalData(VideoId) {
|
||||
getSectionalData({ VideoId: VideoId }).then((res) => {
|
||||
return getSectionalData({ VideoId: VideoId }).then((res) => {
|
||||
//console.log('res', res);
|
||||
if (res.data.code == 200) {
|
||||
this.sectionals = res.data.data;
|
||||
|
|
|
@ -613,7 +613,7 @@
|
|||
<div :class="'echarts' + b" v-for="(e, b) in o.children" :key="b">
|
||||
<div
|
||||
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">
|
||||
<span class="titleIcon"></span>
|
||||
|
@ -668,7 +668,7 @@
|
|||
</div>
|
||||
<div
|
||||
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">
|
||||
<span class="titleIcon"></span>
|
||||
|
@ -780,7 +780,7 @@
|
|||
</div>
|
||||
<div
|
||||
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">
|
||||
<span class="titleIcon"></span>
|
||||
|
@ -870,7 +870,7 @@
|
|||
</div>
|
||||
<div
|
||||
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">
|
||||
<span class="titleIcon"></span>
|
||||
|
@ -912,7 +912,7 @@
|
|||
</div>
|
||||
<div
|
||||
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">
|
||||
<span class="titleIcon"></span>
|
||||
|
@ -3083,7 +3083,8 @@ export default {
|
|||
// );
|
||||
// });
|
||||
let carTou = {
|
||||
ob_data: msgN[j].ob_data
|
||||
ob_data: msgN[j].ob_data,
|
||||
time: msgN[j].time,
|
||||
};
|
||||
this.$nextTick(() => {
|
||||
this.triggerDataCharts(
|
||||
|
|
Loading…
Reference in New Issue