feat(websocket): 添加WebSocket数据监控页面和代理配置
新增WebSocket数据监控页面，包含四种图表展示实时数据，支持数据类型切换 更新vue.config.js添加WebSocket代理配置 添加IDE配置文件到.gitignore
This commit is contained in:
砂糖
2
.gitignore
vendored
2
.gitignore
vendored
@@ -4,6 +4,8 @@
|
|||||||
node_modules
|
node_modules
|
||||||
.pnp
|
.pnp
|
||||||
.pnp.js
|
.pnp.js
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
|
||||||
# Turbo
|
# Turbo
|
||||||
.turbo
|
.turbo
|
||||||
|
|||||||
637
apps/l2/src/views/l2/socket/index.vue
Normal file
637
apps/l2/src/views/l2/socket/index.vue
Normal file
@@ -0,0 +1,637 @@
|
|||||||
|
<template>
|
||||||
|
<div class="socket-monitor">
|
||||||
|
<!-- 类型选择器 -->
|
||||||
|
<div class="type-selector">
|
||||||
|
<label>数据类型：</label>
|
||||||
|
<select v-model="currentType" @change="handleTypeChange">
|
||||||
|
<option v-for="type in types" :key="type" :value="type">{{ type }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 连接状态指示 -->
|
||||||
|
<div class="connection-status" :class="{ connected: isConnected }">
|
||||||
|
连接状态：{{ isConnected ? '已连接' : '连接中...' }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 图表区域 - 仅在track_measure类型时显示 -->
|
||||||
|
<div v-if="currentType === 'track_measure'" class="charts-container">
|
||||||
|
<div class="chart-group">
|
||||||
|
<h3>入口数据监控</h3>
|
||||||
|
<div ref="entryChart" class="chart"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-group">
|
||||||
|
<h3>炉温数据监控</h3>
|
||||||
|
<div ref="furnaceChart" class="chart"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-group">
|
||||||
|
<h3>涂层数据监控</h3>
|
||||||
|
<div ref="coatChart" class="chart"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-group">
|
||||||
|
<h3>出口数据监控</h3>
|
||||||
|
<div ref="exitChart" class="chart"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 其他类型提示 -->
|
||||||
|
<div v-else class="other-type-info">
|
||||||
|
选择 "track_measure" 类型以查看数据图表
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 原始数据展示区 -->
|
||||||
|
<div class="raw-data">
|
||||||
|
<h3>原始数据</h3>
|
||||||
|
<pre>{{ formattedRawData }}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'SocketMonitor',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
socket: null,
|
||||||
|
types: [
|
||||||
|
'alarm',
|
||||||
|
'track_position',
|
||||||
|
'calc_setup_result',
|
||||||
|
'track_measure',
|
||||||
|
'track_signal',
|
||||||
|
'track_matmap'
|
||||||
|
],
|
||||||
|
currentType: 'track_measure',
|
||||||
|
isConnected: false,
|
||||||
|
rawData: null,
|
||||||
|
// 图表实例
|
||||||
|
entryChart: null,
|
||||||
|
furnaceChart: null,
|
||||||
|
coatChart: null,
|
||||||
|
exitChart: 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: {
|
||||||
|
formattedRawData() {
|
||||||
|
if (!this.rawData) return '等待接收数据...';
|
||||||
|
try {
|
||||||
|
return JSON.stringify(JSON.parse(this.rawData), null, 2);
|
||||||
|
} catch (e) {
|
||||||
|
return this.rawData;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 初始化为track_measure时直接初始化图表
|
||||||
|
if (this.currentType === 'track_measure') {
|
||||||
|
this.initCharts();
|
||||||
|
}
|
||||||
|
this.connectWebSocket();
|
||||||
|
window.addEventListener('resize', this.handleWindowResize);
|
||||||
|
},
|
||||||
|
updated() {
|
||||||
|
// 当组件更新且类型为track_measure时，确保图表已初始化
|
||||||
|
if (this.currentType === 'track_measure' && !this.entryChart) {
|
||||||
|
this.initCharts();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unmounted() {
|
||||||
|
this.disconnectWebSocket();
|
||||||
|
this.destroyCharts();
|
||||||
|
window.removeEventListener('resize', this.handleWindowResize);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 初始化所有图表
|
||||||
|
initCharts() {
|
||||||
|
// 先销毁可能存在的旧实例
|
||||||
|
this.destroyCharts();
|
||||||
|
|
||||||
|
// 确保DOM元素存在再初始化
|
||||||
|
if (this.$refs.entryChart) {
|
||||||
|
this.entryChart = echarts.init(this.$refs.entryChart);
|
||||||
|
this.entryChart.setOption(this.getEntryChartOption());
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.$refs.furnaceChart) {
|
||||||
|
this.furnaceChart = echarts.init(this.$refs.furnaceChart);
|
||||||
|
this.furnaceChart.setOption(this.getFurnaceChartOption());
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.$refs.coatChart) {
|
||||||
|
this.coatChart = echarts.init(this.$refs.coatChart);
|
||||||
|
this.coatChart.setOption(this.getCoatChartOption());
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.$refs.exitChart) {
|
||||||
|
this.exitChart = echarts.init(this.$refs.exitChart);
|
||||||
|
this.exitChart.setOption(this.getExitChartOption());
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 入口数据图表配置
|
||||||
|
getEntryChartOption() {
|
||||||
|
return {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: { trigger: 'axis' },
|
||||||
|
legend: {
|
||||||
|
data: ['入口张力1', '入口张力2', '入口张力3', '带钢速度'],
|
||||||
|
textStyle: { color: '#e0e0e0' }
|
||||||
|
},
|
||||||
|
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: [],
|
||||||
|
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)' } }
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{ name: '入口张力1', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
|
||||||
|
{ name: '入口张力2', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
|
||||||
|
{ name: '入口张力3', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
|
||||||
|
{ name: '带钢速度', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 炉温数据图表配置
|
||||||
|
getFurnaceChartOption() {
|
||||||
|
return {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: { trigger: 'axis' },
|
||||||
|
legend: {
|
||||||
|
data: ['PH炉实际温度', 'NOF1炉实际温度', 'NOF1炉设定温度'],
|
||||||
|
textStyle: { color: '#e0e0e0' }
|
||||||
|
},
|
||||||
|
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: [],
|
||||||
|
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)' } }
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{ name: 'PH炉实际温度', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
|
||||||
|
{ name: 'NOF1炉实际温度', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
|
||||||
|
{ name: 'NOF1炉设定温度', type: 'line', data: [], smooth: true, lineStyle: { width: 2, type: 'dashed' } }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 涂层数据图表配置
|
||||||
|
getCoatChartOption() {
|
||||||
|
return {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: { trigger: 'axis' },
|
||||||
|
legend: {
|
||||||
|
data: ['顶部平均涂层重量', '底部平均涂层重量', '气刀压力', '出口速度'],
|
||||||
|
textStyle: { color: '#e0e0e0' }
|
||||||
|
},
|
||||||
|
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: [],
|
||||||
|
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)' } }
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{ name: '顶部平均涂层重量', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
|
||||||
|
{ name: '底部平均涂层重量', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
|
||||||
|
{ name: '气刀压力', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
|
||||||
|
{ name: '出口速度', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 出口数据图表配置
|
||||||
|
getExitChartOption() {
|
||||||
|
return {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: { trigger: 'axis' },
|
||||||
|
legend: {
|
||||||
|
data: ['出口张力1', '出口张力2', '出口速度'],
|
||||||
|
textStyle: { color: '#e0e0e0' }
|
||||||
|
},
|
||||||
|
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: [],
|
||||||
|
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)' } }
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{ name: '出口张力1', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
|
||||||
|
{ name: '出口张力2', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
|
||||||
|
{ name: '出口速度', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
handleWindowResize() {
|
||||||
|
if (this.entryChart) this.entryChart.resize();
|
||||||
|
if (this.furnaceChart) this.furnaceChart.resize();
|
||||||
|
if (this.coatChart) this.coatChart.resize();
|
||||||
|
if (this.exitChart) this.exitChart.resize();
|
||||||
|
},
|
||||||
|
|
||||||
|
destroyCharts() {
|
||||||
|
if (this.entryChart) {
|
||||||
|
this.entryChart.dispose();
|
||||||
|
this.entryChart = null;
|
||||||
|
}
|
||||||
|
if (this.furnaceChart) {
|
||||||
|
this.furnaceChart.dispose();
|
||||||
|
this.furnaceChart = null;
|
||||||
|
}
|
||||||
|
if (this.coatChart) {
|
||||||
|
this.coatChart.dispose();
|
||||||
|
this.coatChart = null;
|
||||||
|
}
|
||||||
|
if (this.exitChart) {
|
||||||
|
this.exitChart.dispose();
|
||||||
|
this.exitChart = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
connectWebSocket() {
|
||||||
|
this.disconnectWebSocket();
|
||||||
|
|
||||||
|
this.isConnected = false;
|
||||||
|
const url = `ws://140.143.206.120:18081/websocket?type=${this.currentType}`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
this.socket = new WebSocket(url);
|
||||||
|
|
||||||
|
this.socket.onopen = () => {
|
||||||
|
console.log('WebSocket连接已建立');
|
||||||
|
this.isConnected = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.socket.onmessage = (event) => {
|
||||||
|
this.rawData = event.data;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
disconnectWebSocket() {
|
||||||
|
if (this.socket) {
|
||||||
|
this.socket.close(1000, '主动关闭');
|
||||||
|
this.socket = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 修复核心：切换类型时重新初始化图表
|
||||||
|
handleTypeChange() {
|
||||||
|
this.rawData = null;
|
||||||
|
this.resetChartData();
|
||||||
|
|
||||||
|
// 如果切换到track_measure类型，需要重新初始化图表
|
||||||
|
if (this.currentType === 'track_measure') {
|
||||||
|
// 确保DOM更新后再初始化图表（使用$nextTick）
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initCharts();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 切换到其他类型时销毁图表
|
||||||
|
this.destroyCharts();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.connectWebSocket();
|
||||||
|
},
|
||||||
|
|
||||||
|
resetChartData() {
|
||||||
|
this.chartData = {
|
||||||
|
entry: { time: [], tensionPorBr1: [], tensionBr1Br2: [], tensionBr2Br3: [], stripSpeed: [] },
|
||||||
|
furnace: { time: [], phFurnaceTemperatureActual: [], nof1FurnaceTemperatureActual: [], nof1FurnaceTemperatureSet: [] },
|
||||||
|
coat: { time: [], avrCoatingWeightTop: [], avrCoatingWeightBottom: [], airKnifePressure: [], stripSpeedTmExit: [] },
|
||||||
|
exit: { time: [], tensionBr8Br9: [], tensionBr9Tr: [], speedExitSection: [] }
|
||||||
|
};
|
||||||
|
|
||||||
|
this.updateCharts();
|
||||||
|
},
|
||||||
|
|
||||||
|
processData(data) {
|
||||||
|
try {
|
||||||
|
const parsedData = JSON.parse(data);
|
||||||
|
|
||||||
|
if (this.currentType === 'track_measure') {
|
||||||
|
this.processTrackMeasureData(parsedData);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('数据解析错误:', error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
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.updateCharts();
|
||||||
|
},
|
||||||
|
|
||||||
|
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]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
updateCharts() {
|
||||||
|
if (this.entryChart) {
|
||||||
|
this.entryChart.setOption({
|
||||||
|
xAxis: { data: this.chartData.entry.time },
|
||||||
|
series: [
|
||||||
|
{ data: this.chartData.entry.tensionPorBr1 },
|
||||||
|
{ data: this.chartData.entry.tensionBr1Br2 },
|
||||||
|
{ data: this.chartData.entry.tensionBr2Br3 },
|
||||||
|
{ data: this.chartData.entry.stripSpeed }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.furnaceChart) {
|
||||||
|
this.furnaceChart.setOption({
|
||||||
|
xAxis: { data: this.chartData.furnace.time },
|
||||||
|
series: [
|
||||||
|
{ data: this.chartData.furnace.phFurnaceTemperatureActual },
|
||||||
|
{ data: this.chartData.furnace.nof1FurnaceTemperatureActual },
|
||||||
|
{ data: this.chartData.furnace.nof1FurnaceTemperatureSet }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.coatChart) {
|
||||||
|
this.coatChart.setOption({
|
||||||
|
xAxis: { data: this.chartData.coat.time },
|
||||||
|
series: [
|
||||||
|
{ data: this.chartData.coat.avrCoatingWeightTop },
|
||||||
|
{ data: this.chartData.coat.avrCoatingWeightBottom },
|
||||||
|
{ data: this.chartData.coat.airKnifePressure },
|
||||||
|
{ data: this.chartData.coat.stripSpeedTmExit }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.exitChart) {
|
||||||
|
this.exitChart.setOption({
|
||||||
|
xAxis: { data: this.chartData.exit.time },
|
||||||
|
series: [
|
||||||
|
{ data: this.chartData.exit.tensionBr8Br9 },
|
||||||
|
{ data: this.chartData.exit.tensionBr9Tr },
|
||||||
|
{ data: this.chartData.exit.speedExitSection }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 样式保持不变 */
|
||||||
|
.socket-monitor {
|
||||||
|
padding: 20px;
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background-color: #3f4449;
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-selector {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #4a4f55;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-selector select {
|
||||||
|
margin-left: 10px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border: 1px solid #5d6268;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #555a60;
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-status {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #4a4f55;
|
||||||
|
color: #ffd700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-status.connected {
|
||||||
|
background-color: #4a4f55;
|
||||||
|
color: #32cd32;
|
||||||
|
}
|
||||||
|
|
||||||
|
.charts-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-group {
|
||||||
|
background-color: #4a4f55;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-group h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
color: #f0f0f0;
|
||||||
|
font-size: 16px;
|
||||||
|
border-bottom: 1px solid #5d6268;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.other-type-info {
|
||||||
|
text-align: center;
|
||||||
|
padding: 50px;
|
||||||
|
background-color: #4a4f55;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: #b0b0b0;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.raw-data {
|
||||||
|
background-color: #4a4f55;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 15px;
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.raw-data h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
color: #f0f0f0;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-bottom: 1px solid #5d6268;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.raw-data pre {
|
||||||
|
margin: 0;
|
||||||
|
font-family: monospace;
|
||||||
|
color: #b0b0b0;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.raw-data::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.raw-data::-webkit-scrollbar-track {
|
||||||
|
background: #555a60;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.raw-data::-webkit-scrollbar-thumb {
|
||||||
|
background: #6d7278;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.raw-data::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #858a90;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -39,7 +39,16 @@ module.exports = {
|
|||||||
pathRewrite: {
|
pathRewrite: {
|
||||||
['^' + process.env.VUE_APP_BASE_API]: ''
|
['^' + process.env.VUE_APP_BASE_API]: ''
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
// 新增WebSocket代理配置
|
||||||
|
// '/ws-api': { // 匹配前端WebSocket连接的路径（如ws://localhost:80/ws-api）
|
||||||
|
// target: '140.143.206.120:8089', // 目标WebSocket服务地址
|
||||||
|
// ws: true, // 启用WebSocket代理
|
||||||
|
// changeOrigin: true, // 改变请求源，解决跨域问题
|
||||||
|
// pathRewrite: {
|
||||||
|
// '^/ws-api': '' // 如果目标服务不需要路径前缀，可移除
|
||||||
|
// }
|
||||||
|
// }
|
||||||
},
|
},
|
||||||
disableHostCheck: true
|
disableHostCheck: true
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user