From a0382618885943d5db6409ad664394fc1d9c5e75 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:51:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=9B=91=E6=8E=A7):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=BF=87=E7=A8=8B=E8=B7=9F=E8=B8=AA=E7=BB=84=E4=BB=B6=E5=8F=8A?=
 =?UTF-8?q?=E4=B8=BB=E9=A1=B5=E9=9D=A2=E9=9B=86=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加TrackMeasure组件用于展示过程跟踪数据，包括入口、炉温、涂层和出口数据的实时监控图表
组件支持WebSocket连接、数据实时更新、图表切换和响应式布局
在主页面中集成该组件并设置相关数据绑定
---
 apps/l2/src/components/TrackMeasure/index.vue | 489 ++++++++++++++++++
 apps/l2/src/views/index.vue                   |  14 +-
 2 files changed, 502 insertions(+), 1 deletion(-)
 create mode 100644 apps/l2/src/components/TrackMeasure/index.vue

diff --git a/apps/l2/src/components/TrackMeasure/index.vue b/apps/l2/src/components/TrackMeasure/index.vue
new file mode 100644
index 0000000..37a31a5
--- /dev/null
+++ b/apps/l2/src/components/TrackMeasure/index.vue
@@ -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>
\ No newline at end of file
diff --git a/apps/l2/src/views/index.vue b/apps/l2/src/views/index.vue
index 0c8c2c5..1a00498 100644
--- a/apps/l2/src/views/index.vue
+++ b/apps/l2/src/views/index.vue
@@ -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: [