From 7f98f145d43272ed8d51dbb4c203b0c9fc23aa0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Mon, 3 Nov 2025 10:17:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(websocket):=20=E6=B7=BB=E5=8A=A0WebSocket?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=9B=91=E6=8E=A7=E9=A1=B5=E9=9D=A2=E5=92=8C?=
 =?UTF-8?q?=E4=BB=A3=E7=90=86=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增WebSocket数据监控页面，包含四种图表展示实时数据，支持数据类型切换
更新vue.config.js添加WebSocket代理配置
添加IDE配置文件到.gitignore
---
 .gitignore                            |   2 +
 apps/l2/src/views/l2/socket/index.vue | 637 ++++++++++++++++++++++++++
 apps/l2/vue.config.js                 |  11 +-
 3 files changed, 649 insertions(+), 1 deletion(-)
 create mode 100644 apps/l2/src/views/l2/socket/index.vue

diff --git a/.gitignore b/.gitignore
index 78aadb2..4a95601 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,8 @@
 node_modules
 .pnp
 .pnp.js
+.idea
+.vscode
 
 # Turbo
 .turbo
diff --git a/apps/l2/src/views/l2/socket/index.vue b/apps/l2/src/views/l2/socket/index.vue
new file mode 100644
index 0000000..78e592f
--- /dev/null
+++ b/apps/l2/src/views/l2/socket/index.vue
@@ -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>
\ No newline at end of file
diff --git a/apps/l2/vue.config.js b/apps/l2/vue.config.js
index 4e8e21d..fd96f0f 100644
--- a/apps/l2/vue.config.js
+++ b/apps/l2/vue.config.js
@@ -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
   },