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
|
||||
.pnp
|
||||
.pnp.js
|
||||
.idea
|
||||
.vscode
|
||||
|
||||
# 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: {
|
||||
['^' + 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
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user