DeXun/klp-mono
9
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(监控): 添加过程跟踪组件及主页面集成

Browse Source 
添加TrackMeasure组件用于展示过程跟踪数据，包括入口、炉温、涂层和出口数据的实时监控图表
组件支持WebSocket连接、数据实时更新、图表切换和响应式布局
在主页面中集成该组件并设置相关数据绑定
This commit is contained in:
砂糖
2025-11-03 10:51:46 +08:00
parent 7f98f145d4
commit a038261888
2 changed files with 502 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

489
apps/l2/src/components/TrackMeasure/index.vue Normal file
View File

@@ -0,0 +1,489 @@
<template>
<div class="process-monitor">
<!-- 控制区 -->
<div class="control-bar">
<div class="chart-selector">
<label>图表视图：</label>
<select v-model="currentChart" @change="handleChartChange">
<option v-for="chart in chartTypes" :key="chart.value" :value="chart.value">
{{ chart.label }}
</option>
</select>
</div>
<div class="connection-status" :class="{ connected: isConnected }">
连接状态：{{ isConnected ? '已连接' : '连接中...' }}
</div>
</div>
<!-- 图表展示区 -->
<div class="chart-container">
<h3 class="chart-title">{{ currentChartLabel }}</h3>
<div ref="chartDom" class="chart"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'ProcessTrackMonitor',
data() {
return {
// WebSocket相关（固定为track_measure）
socket: null,
isConnected: false,
// 图表相关
chartTypes: [
{ value: 'entry', label: '入口数据监控' },
{ value: 'furnace', label: '炉温数据监控' },
{ value: 'coat', label: '涂层数据监控' },
{ value: 'exit', label: '出口数据监控' }
],
currentChart: 'entry', // 默认显示入口数据图表
chartInstance: null, // 当前图表实例
// 图表数据存储
chartData: {
entry: {
time: [],
tensionPorBr1: [],
tensionBr1Br2: [],
tensionBr2Br3: [],
stripSpeed: []
},
furnace: {
time: [],
phFurnaceTemperatureActual: [],
nof1FurnaceTemperatureActual: [],
nof1FurnaceTemperatureSet: []
},
coat: {
time: [],
avrCoatingWeightTop: [],
avrCoatingWeightBottom: [],
airKnifePressure: [],
stripSpeedTmExit: []
},
exit: {
time: [],
tensionBr8Br9: [],
tensionBr9Tr: [],
speedExitSection: []
}
},
maxDataPoints: 30 // 最多显示的数据点数量
};
},
computed: {
// 当前图表标题
currentChartLabel() {
const chart = this.chartTypes.find(item => item.value === this.currentChart);
return chart ? chart.label : '';
}
},
mounted() {
// 初始化图表
this.initChart();
// 建立WebSocket连接（固定为track_measure）
this.connectWebSocket();
// 监听窗口大小变化
window.addEventListener('resize', this.handleWindowResize);
},
unmounted() {
// 清理资源
this.disconnectWebSocket();
this.destroyChart();
window.removeEventListener('resize', this.handleWindowResize);
},
methods: {
// 初始化当前图表
initChart() {
// 先销毁已有实例
this.destroyChart();
// 初始化新图表
if (this.$refs.chartDom) {
this.chartInstance = echarts.init(this.$refs.chartDom);
this.chartInstance.setOption(this.getChartOption());
}
},
// 根据当前图表类型获取配置
getChartOption() {
const baseOption = {
backgroundColor: 'transparent',
tooltip: { trigger: 'axis' },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
boundaryGap: false,
data: this.chartData[this.currentChart].time,
axisLine: { lineStyle: { color: '#666' } },
axisLabel: { color: '#b0b0b0' }
},
yAxis: {
type: 'value',
axisLine: { lineStyle: { color: '#666' } },
axisLabel: { color: '#b0b0b0' },
splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
}
};
// 不同图表的系列配置
switch (this.currentChart) {
case 'entry':
return {
...baseOption,
legend: {
data: ['入口张力1', '入口张力2', '入口张力3', '带钢速度'],
textStyle: { color: '#e0e0e0' }
},
series: [
{ name: '入口张力1', type: 'line', data: this.chartData.entry.tensionPorBr1, smooth: true, lineStyle: { width: 2 } },
{ name: '入口张力2', type: 'line', data: this.chartData.entry.tensionBr1Br2, smooth: true, lineStyle: { width: 2 } },
{ name: '入口张力3', type: 'line', data: this.chartData.entry.tensionBr2Br3, smooth: true, lineStyle: { width: 2 } },
{ name: '带钢速度', type: 'line', data: this.chartData.entry.stripSpeed, smooth: true, lineStyle: { width: 2 } }
]
};
case 'furnace':
return {
...baseOption,
legend: {
data: ['PH炉实际温度', 'NOF1炉实际温度', 'NOF1炉设定温度'],
textStyle: { color: '#e0e0e0' }
},
series: [
{ name: 'PH炉实际温度', type: 'line', data: this.chartData.furnace.phFurnaceTemperatureActual, smooth: true, lineStyle: { width: 2 } },
{ name: 'NOF1炉实际温度', type: 'line', data: this.chartData.furnace.nof1FurnaceTemperatureActual, smooth: true, lineStyle: { width: 2 } },
{ name: 'NOF1炉设定温度', type: 'line', data: this.chartData.furnace.nof1FurnaceTemperatureSet, smooth: true, lineStyle: { width: 2, type: 'dashed' } }
]
};
case 'coat':
return {
...baseOption,
legend: {
data: ['顶部平均涂层重量', '底部平均涂层重量', '气刀压力', '出口速度'],
textStyle: { color: '#e0e0e0' }
},
series: [
{ name: '顶部平均涂层重量', type: 'line', data: this.chartData.coat.avrCoatingWeightTop, smooth: true, lineStyle: { width: 2 } },
{ name: '底部平均涂层重量', type: 'line', data: this.chartData.coat.avrCoatingWeightBottom, smooth: true, lineStyle: { width: 2 } },
{ name: '气刀压力', type: 'line', data: this.chartData.coat.airKnifePressure, smooth: true, lineStyle: { width: 2 } },
{ name: '出口速度', type: 'line', data: this.chartData.coat.stripSpeedTmExit, smooth: true, lineStyle: { width: 2 } }
]
};
case 'exit':
return {
...baseOption,
legend: {
data: ['出口张力1', '出口张力2', '出口速度'],
textStyle: { color: '#e0e0e0' }
},
series: [
{ name: '出口张力1', type: 'line', data: this.chartData.exit.tensionBr8Br9, smooth: true, lineStyle: { width: 2 } },
{ name: '出口张力2', type: 'line', data: this.chartData.exit.tensionBr9Tr, smooth: true, lineStyle: { width: 2 } },
{ name: '出口速度', type: 'line', data: this.chartData.exit.speedExitSection, smooth: true, lineStyle: { width: 2 } }
]
};
default:
return baseOption;
}
},
// 处理窗口大小变化
handleWindowResize() {
if (this.chartInstance) {
this.chartInstance.resize();
}
},
// 销毁当前图表
destroyChart() {
if (this.chartInstance) {
this.chartInstance.dispose();
this.chartInstance = null;
}
},
// 建立WebSocket连接（固定连接track_measure）
connectWebSocket() {
// 先断开现有连接
this.disconnectWebSocket();
this.isConnected = false;
const url = 'ws://140.143.206.120:18081/websocket?type=track_measure';
try {
this.socket = new WebSocket(url);
this.socket.onopen = () => {
console.log('WebSocket连接已建立（track_measure）');
this.isConnected = true;
};
this.socket.onmessage = (event) => {
this.processData(event.data);
};
this.socket.onerror = (error) => {
console.error('WebSocket错误:', error);
this.isConnected = false;
};
this.socket.onclose = (event) => {
console.log(`WebSocket连接已关闭: ${event.code} - ${event.reason}`);
this.isConnected = false;
// 自动重连（非主动关闭）
if (event.code !== 1000) {
setTimeout(() => this.connectWebSocket(), 3000);
}
};
} catch (error) {
console.error('建立WebSocket连接失败:', error);
setTimeout(() => this.connectWebSocket(), 3000);
}
},
// 断开WebSocket连接
disconnectWebSocket() {
if (this.socket) {
this.socket.close(1000, '主动关闭');
this.socket = null;
}
},
// 处理图表切换
handleChartChange() {
this.initChart();
},
// 处理接收到的数据
processData(data) {
try {
const parsedData = JSON.parse(data);
this.processTrackMeasureData(parsedData);
} catch (error) {
console.error('数据解析错误:', error);
}
},
// 处理track_measure类型数据
processTrackMeasureData(data) {
// 获取当前时间标签（分:秒.毫秒）
const now = new Date();
const timeLabel = `${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}.${now.getMilliseconds().toString().slice(0, 2)}`;
// 处理入口数据
if (data.appMeasureEntryMessage) {
this.addDataPoint('entry', timeLabel, {
tensionPorBr1: data.appMeasureEntryMessage.tensionPorBr1,
tensionBr1Br2: data.appMeasureEntryMessage.tensionBr1Br2,
tensionBr2Br3: data.appMeasureEntryMessage.tensionBr2Br3,
stripSpeed: data.appMeasureEntryMessage.stripSpeed
});
}
// 处理炉温数据
if (data.appMeasureFurnaceMessage) {
this.addDataPoint('furnace', timeLabel, {
phFurnaceTemperatureActual: data.appMeasureFurnaceMessage.phFurnaceTemperatureActual,
nof1FurnaceTemperatureActual: data.appMeasureFurnaceMessage.nof1FurnaceTemperatureActual,
nof1FurnaceTemperatureSet: data.appMeasureFurnaceMessage.nof1FurnaceTemperatureSet
});
}
// 处理涂层数据
if (data.appMeasureCoatMessage) {
this.addDataPoint('coat', timeLabel, {
avrCoatingWeightTop: data.appMeasureCoatMessage.avrCoatingWeightTop,
avrCoatingWeightBottom: data.appMeasureCoatMessage.avrCoatingWeightBottom,
airKnifePressure: data.appMeasureCoatMessage.airKnifePressure,
stripSpeedTmExit: data.appMeasureCoatMessage.stripSpeedTmExit
});
}
// 处理出口数据
if (data.appMeasureExitMessage) {
this.addDataPoint('exit', timeLabel, {
tensionBr8Br9: data.appMeasureExitMessage.tensionBr8Br9,
tensionBr9Tr: data.appMeasureExitMessage.tensionBr9Tr,
speedExitSection: data.appMeasureExitMessage.speedExitSection
});
}
// 更新当前显示的图表
this.updateCurrentChart();
},
// 添加数据点到对应图表数据
addDataPoint(chartType, time, values) {
// 添加时间标签
this.chartData[chartType].time.push(time);
// 添加各项数据
Object.keys(values).forEach(key => {
if (this.chartData[chartType][key] !== undefined) {
this.chartData[chartType][key].push(values[key]);
}
});
// 保持数据点数量在maxDataPoints以内
if (this.chartData[chartType].time.length > this.maxDataPoints) {
this.chartData[chartType].time.shift();
Object.keys(values).forEach(key => {
if (this.chartData[chartType][key] !== undefined) {
this.chartData[chartType][key].shift();
}
});
}
},
// 更新当前显示的图表
updateCurrentChart() {
if (this.chartInstance) {
this.chartInstance.setOption({
xAxis: { data: this.chartData[this.currentChart].time },
series: this.getSeriesData()
});
}
},
// 获取当前图表的系列数据
getSeriesData() {
switch (this.currentChart) {
case 'entry':
return [
{ data: this.chartData.entry.tensionPorBr1 },
{ data: this.chartData.entry.tensionBr1Br2 },
{ data: this.chartData.entry.tensionBr2Br3 },
{ data: this.chartData.entry.stripSpeed }
];
case 'furnace':
return [
{ data: this.chartData.furnace.phFurnaceTemperatureActual },
{ data: this.chartData.furnace.nof1FurnaceTemperatureActual },
{ data: this.chartData.furnace.nof1FurnaceTemperatureSet }
];
case 'coat':
return [
{ data: this.chartData.coat.avrCoatingWeightTop },
{ data: this.chartData.coat.avrCoatingWeightBottom },
{ data: this.chartData.coat.airKnifePressure },
{ data: this.chartData.coat.stripSpeedTmExit }
];
case 'exit':
return [
{ data: this.chartData.exit.tensionBr8Br9 },
{ data: this.chartData.exit.tensionBr9Tr },
{ data: this.chartData.exit.speedExitSection }
];
default:
return [];
}
}
}
};
</script>
<style scoped>
.process-monitor {
padding: 20px;
font-family: Arial, sans-serif;
background-color: #3f4449;
color: #e0e0e0;
}
.control-bar {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.chart-selector {
padding: 10px;
background-color: #4a4f55;
border-radius: 4px;
display: flex;
align-items: center;
}
.chart-selector label {
margin-right: 10px;
color: #e0e0e0;
}
.chart-selector select {
padding: 5px 10px;
border: 1px solid #5d6268;
border-radius: 4px;
background-color: #555a60;
color: #e0e0e0;
cursor: pointer;
}
.connection-status {
padding: 8px 10px;
border-radius: 4px;
background-color: #4a4f55;
color: #ffd700;
margin-left: auto;
}
.connection-status.connected {
color: #32cd32;
}
.chart-container {
background-color: #4a4f55;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
padding: 15px;
}
.chart-title {
margin-top: 0;
color: #f0f0f0;
font-size: 18px;
border-bottom: 1px solid #5d6268;
padding-bottom: 10px;
margin-bottom: 15px;
}
.chart {
width: 100%;
height: 400px; /* 增大图表高度提升可读性 */
}
/* 响应式调整 */
@media (max-width: 768px) {
.control-bar {
flex-direction: column;
align-items: flex-start;
}
.connection-status {
margin-left: 0;
width: 100%;
text-align: center;
}
.chart {
height: 300px;
}
}
</style>

14
apps/l2/src/views/index.vue
View File

@@ -47,6 +47,17 @@
/>
</el-card>
</el-col>
<el-col :span="24">
<el-card>
<div slot="header"><span>过程跟踪</span></div>
<TrackMeasure
v-loading="measureLoading"
:columns="measureColumns"
:data="measureData"
tableHeight="300px"
/>
</el-card>
</el-col>
</el-row>
</div>
</template>
@@ -59,10 +70,11 @@ import MiniTable from "./components/MiniTable.vue";
import { getLogDataPage } from "@/api/l2/log";
import { getRollHistorytList } from '@/api/l2/roller'
import { listPlan } from "@/api/l2/plan";
import TrackMeasure from "@/components/TrackMeasure/index.vue";
export default {
name: "Index",
components: { CurrentTime, HomeMain, MiniTable },
components: { CurrentTime, HomeMain, MiniTable, TrackMeasure },
data() {
return {
featureCards: [