diff --git a/apps/hand-factory/api/pocket/deviceEnum.js b/apps/hand-factory/api/pocket/deviceEnum.js
index f0399da..6b52c18 100644
--- a/apps/hand-factory/api/pocket/deviceEnum.js
+++ b/apps/hand-factory/api/pocket/deviceEnum.js
@@ -3,7 +3,8 @@ import request from '@/utils/request'
 export function listDeviceEnumAll() {
   return request({
     url: '/api/deviceEnum/all',
-    method: 'get'
+    method: 'get',
+    baseUrl: 'http://140.143.206.120:10082/prod-api'
   })
 }
 
diff --git a/apps/hand-factory/api/pocket/deviceFieldMeta.js b/apps/hand-factory/api/pocket/deviceFieldMeta.js
index 9d6f05d..b59c298 100644
--- a/apps/hand-factory/api/pocket/deviceFieldMeta.js
+++ b/apps/hand-factory/api/pocket/deviceFieldMeta.js
@@ -3,7 +3,8 @@ import request from '@/utils/request'
 export function getDeviceFieldMetaAll() {
   return request({
     url: '/api/deviceFieldMeta/all',
-    method: 'get'
+    method: 'get',
+    baseUrl: 'http://140.143.206.120:10082/prod-api'
   })
 }
 
diff --git a/apps/hand-factory/api/pocket/deviceSnapshot.js b/apps/hand-factory/api/pocket/deviceSnapshot.js
index 18866cc..d87940e 100644
--- a/apps/hand-factory/api/pocket/deviceSnapshot.js
+++ b/apps/hand-factory/api/pocket/deviceSnapshot.js
@@ -5,7 +5,8 @@ export function listDeviceSnapshotLatest(params) {
   return request({
     url: '/api/deviceSnapshot/latest',
     method: 'get',
-    params
+    params,
+    baseUrl: 'http://140.143.206.120:10082/prod-api'
   })
 }
 
@@ -14,7 +15,8 @@ export function listDeviceSnapshotRange(params) {
   return request({
     url: '/api/deviceSnapshot/range',
     method: 'get',
-    params
+    params,
+    baseUrl: 'http://140.143.206.120:10082/prod-api'
   })
 }
 
diff --git a/apps/hand-factory/components/lines/zinc1.vue b/apps/hand-factory/components/lines/zinc1.vue
index 9c3fc99..4d82438 100644
--- a/apps/hand-factory/components/lines/zinc1.vue
+++ b/apps/hand-factory/components/lines/zinc1.vue
@@ -19,7 +19,12 @@
       <text class="refresh-icon" :class="{ rotating: isRefreshing }">⟳</text>
     </view>
 
-    <scroll-view scroll-y class="scroll-container" v-if="currentTab === 1" @scroll="onScroll">
+    <!-- Tab1：实时监控 -->
+    <scroll-view
+      scroll-y
+      class="scroll-container"
+      v-if="currentTab === 1"
+    >
       <!-- 顶部状态栏 -->
       <view class="status-bar">
         <view class="status-item">
@@ -36,50 +41,213 @@
           <text class="status-label">设备数</text>
           <text class="status-value">{{ deviceDefs.length }}</text>
         </view>
+        <view class="status-divider"></view>
+        <view class="status-item status-toggle" @click="toggleChartPause">
+          <text class="status-label">折线图</text>
+          <text
+            class="status-value status-time"
+            :class="isChartPaused ? 'status-异常' : 'status-通畅'"
+          >
+            {{ isChartPaused ? '已暂停刷新' : '实时刷新中' }}
+          </text>
+        </view>
       </view>
 
-
-
-      <view v-for="dev in deviceDefs" :key="'device_' + dev.deviceCode" :id="'device-' + dev.deviceCode" class="device-section">
-        <view class="section-title">{{ dev.desc }}（{{ dev.deviceCode }}）</view>
-
-        <view v-if="fieldTrendMap[dev.deviceCode]">
-          <view v-for="fieldName in (dev.paramFields || [])" :key="dev.deviceCode + '_' + fieldName" class="field-chart-container">
-            <view v-if="fieldTrendMap[dev.deviceCode][fieldName]">
-              <view class="chart-header">
-                <text class="chart-title">{{ getFieldLabel(fieldName) }}</text>
-                <text class="chart-unit">{{ getFieldUnit(fieldName) }}</text>
-              </view>
-
-              <view class="chart-box">
-                <qiun-data-charts type="line" :chartData="toLineChart(fieldTrendMap[dev.deviceCode][fieldName], fieldName)" :opts="lineChartOpts" />
-              </view>
-
-              <view class="stats-grid">
-                <view class="stat-item"><text class="stat-label">AVG</text><text class="stat-value">{{ formatNum(fieldTrendMap[dev.deviceCode][fieldName].avg) }}</text></view>
-                <view class="stat-item"><text class="stat-label">MAX</text><text class="stat-value">{{ formatNum(fieldTrendMap[dev.deviceCode][fieldName].max) }}</text></view>
-                <view class="stat-item"><text class="stat-label">MIN</text><text class="stat-value">{{ formatNum(fieldTrendMap[dev.deviceCode][fieldName].min) }}</text></view>
-                <view class="stat-item"><text class="stat-label">LAST</text><text class="stat-value">{{ formatNum(fieldTrendMap[dev.deviceCode][fieldName].last) }}</text></view>
-              </view>
-            </view>
-
-            <view v-else class="placeholder-box">
-              <text class="placeholder-text">等待 {{ getFieldLabel(fieldName) }} 数据...</text>
-            </view>
+      <!-- 实时数据卡片 + 统计图（按酸轧页风格，不按设备分块） -->
+      <view class="section">
+        <view class="section-title">入口段（实时）</view>
+        <view class="metrics-grid-3">
+          <view class="metric-box" v-for="it in entryMetrics" :key="'entry_' + it.field">
+            <text class="metric-name">{{ it.label || getFieldLabel(it.field) }}</text>
+            <text class="metric-value">{{ getRealtimeValueBySource('ENTRY', it.field) }}</text>
+            <text class="metric-unit">{{ it.unit || getFieldUnit(it.field) }}</text>
           </view>
         </view>
+        <view class="chart-box">
+          <qiun-data-charts type="line" :chartData="toGroupLineChart('entry')" :opts="lineChartOpts" />
+        </view>
+      </view>
 
-        <view v-else class="placeholder-box">
-          <text class="placeholder-text">等待 {{ dev.desc }} 数据...（滚动到此处加载）</text>
+      <view class="section">
+        <view class="section-title">退火炉段（实时）</view>
+        <view class="metrics-grid-3">
+          <view class="metric-box" v-for="it in furnaceMetrics" :key="'furnace_' + it.field">
+            <text class="metric-name">{{ it.label || getFieldLabel(it.field) }}</text>
+            <text class="metric-value">{{ getRealtimeValueBySource('FURNACE', it.field) }}</text>
+            <text class="metric-unit">{{ it.unit || getFieldUnit(it.field) }}</text>
+          </view>
+        </view>
+        <view class="chart-box">
+          <qiun-data-charts type="line" :chartData="toGroupLineChart('furnace')" :opts="lineChartOpts" />
+        </view>
+      </view>
+
+      <view class="section">
+        <view class="section-title">后处理/涂层段（实时）</view>
+        <view class="metrics-grid-3">
+          <view class="metric-box" v-for="it in coatMetrics" :key="'coat_' + it.field">
+            <text class="metric-name">{{ it.label || getFieldLabel(it.field) }}</text>
+            <text class="metric-value">{{ getRealtimeValueBySource('COAT', it.field) }}</text>
+            <text class="metric-unit">{{ it.unit || getFieldUnit(it.field) }}</text>
+          </view>
+        </view>
+        <view class="chart-box">
+          <qiun-data-charts type="line" :chartData="toGroupLineChart('coat')" :opts="lineChartOpts" />
+        </view>
+      </view>
+
+      <view class="section">
+        <view class="section-title">出口段（实时）</view>
+        <view class="metrics-grid-3">
+          <view class="metric-box" v-for="it in exitMetrics" :key="'exit_' + it.field">
+            <text class="metric-name">{{ it.label || getFieldLabel(it.field) }}</text>
+            <text class="metric-value">{{ getRealtimeValueBySource('EXIT', it.field) }}</text>
+            <text class="metric-unit">{{ it.unit || getFieldUnit(it.field) }}</text>
+          </view>
+        </view>
+        <view class="chart-box">
+          <qiun-data-charts type="line" :chartData="toGroupLineChart('exit')" :opts="lineChartOpts" />
         </view>
       </view>
     </scroll-view>
+
+    <!-- 生产统计 / 实绩 -->
+    <scroll-view scroll-y class="scroll-container" v-if="currentTab === 2">
+      <view class="section">
+        <view class="section-title">当前生产情况</view>
+        <view class="chart-box" v-if="currentPlan">
+          <view class="stats-table">
+            <view class="stats-header">
+              <text class="stats-col">当前钢卷</text>
+              <text class="stats-col">钢种</text>
+              <text class="stats-col">规格 (厚×宽)</text>
+              <text class="stats-col">计划长度</text>
+              <text class="stats-col">计划重量</text>
+            </view>
+            <view class="stats-row">
+              <text class="stats-col">{{ currentPlan.exitMatId || '—' }}</text>
+              <text class="stats-col">{{ currentPlan.steelGrade || '—' }}</text>
+              <text class="stats-col">
+                {{ formatNum(currentPlan.exitThickness) }} × {{ formatNum(currentPlan.exitWidth) }}
+              </text>
+              <text class="stats-col">{{ formatNum(currentPlan.exitLength) }}</text>
+              <text class="stats-col">{{ formatNum(currentPlan.exitWeight) }}</text>
+            </view>
+          </view>
+          <view class="history-tip" v-if="!currentPlan">
+            <text>暂无当前生产计划数据。</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="section">
+        <view class="section-title">生产实绩汇总</view>
+        <view class="overview-grid" v-if="reportSummary">
+          <view class="overview-card">
+            <text class="overview-label">钢卷总数</text>
+            <text class="overview-value">{{ reportSummary.coilCount || 0 }}</text>
+            <text class="overview-unit">卷</text>
+          </view>
+          <view class="overview-card">
+            <text class="overview-label">总实际重量</text>
+            <text class="overview-value">{{ formatNum(reportSummary.totalActualWeight) }}</text>
+            <text class="overview-unit">t</text>
+          </view>
+          <view class="overview-card">
+            <text class="overview-label">成材率</text>
+            <text class="overview-value">
+              {{ reportSummary.yieldRate != null ? (reportSummary.yieldRate * 100).toFixed(1) : '—' }}
+            </text>
+            <text class="overview-unit">%</text>
+          </view>
+        </view>
+        <view class="chart-box" v-else>
+          <text class="placeholder-text">暂无实绩汇总数据。</text>
+        </view>
+      </view>
+
+      <view class="section">
+        <view class="section-title">生产实绩明细</view>
+        <view class="stats-table" v-if="reportDetails && reportDetails.length">
+          <view class="stats-header">
+            <text class="stats-col">成品卷号</text>
+            <text class="stats-col">原料卷号</text>
+            <text class="stats-col">班/组</text>
+            <text class="stats-col">规格 (厚×宽)</text>
+            <text class="stats-col">长度/重量</text>
+          </view>
+          <view
+            class="stats-row"
+            v-for="item in reportDetails"
+            :key="item.exitMatId + '_' + item.onlineTime"
+          >
+            <text class="stats-col">{{ item.exitMatId }}</text>
+            <text class="stats-col">{{ item.entryMatId }}</text>
+            <text class="stats-col">{{ item.groupNo || '—' }}/{{ item.shiftNo || '—' }}</text>
+            <text class="stats-col">
+              {{ formatNum(item.exitThickness) }} × {{ formatNum(item.exitWidth) }}
+            </text>
+            <text class="stats-col">
+              {{ formatNum(item.exitLength) }} m / {{ formatNum(item.actualWeight) }} t
+            </text>
+          </view>
+        </view>
+        <view class="chart-box" v-else>
+          <text class="placeholder-text">暂无生产明细记录。</text>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 停机统计 / 停机记录 -->
+    <scroll-view scroll-y class="scroll-container" v-if="currentTab === 3">
+      <view class="section">
+        <view class="section-title">停机记录</view>
+        <!-- 月份选择器 -->
+        <view class="stoppage-filter">
+          <picker mode="date" fields="month" :value="stoppageMonth" @change="onStoppageMonthChange">
+            <view class="stoppage-month-btn">
+              <text class="stoppage-month-text">{{ stoppageMonthLabel }}</text>
+            </view>
+          </picker>
+        </view>
+        <view class="stats-table" v-if="stoppageList && stoppageList.length">
+          <view class="stats-header">
+            <text class="stats-col">开始时间</text>
+            <text class="stats-col">结束时间</text>
+            <text class="stats-col">持续时间</text>
+            <text class="stats-col">区域/设备</text>
+            <text class="stats-col">原因</text>
+          </view>
+          <view
+            class="stats-row"
+            v-for="item in stoppageList"
+            :key="item.stopid"
+          >
+            <text class="stats-col">{{ item.startDate }}</text>
+            <text class="stats-col">{{ item.endDate }}</text>
+            <text class="stats-col">{{ item.duration }}</text>
+            <text class="stats-col">
+              {{ item.area || '—' }}/{{ item.seton || '—' }}
+            </text>
+            <text class="stats-col">{{ item.remark || '—' }}</text>
+          </view>
+        </view>
+        <view class="chart-box" v-else>
+          <text class="placeholder-text">暂无停机记录。</text>
+        </view>
+      </view>
+    </scroll-view>
+
   </view>
 </template>
 
 <script>
 import { listDeviceEnumAll } from '@/api/pocket/deviceEnum'
 import { getDeviceFieldMetaAll } from '@/api/pocket/deviceFieldMeta'
+import { listDeviceSnapshotLatest } from '@/api/pocket/deviceSnapshot'
+import { getCurrentPlan, getCurrentProcess } from '@/api/business/dashboard'
+import { getReportSummary, getReportDetails } from '@/api/business/report'
+import { listStoppage } from '@/api/business/stoppage'
 import { createMeasureSocket } from '@/utils/socketMeasure'
 
 export default {
@@ -87,11 +255,15 @@ export default {
     return {
       currentTab: 1,
       tabData: [
-        { text: '实时监控', value: 1 }
+        { text: '实时监控', value: 1 },
+        { text: '生产统计', value: 2 },
+        { text: '停机统计', value: 3 }
       ],
       isRefreshing: false,
       isConnected: false,
       lastUpdateTime: '—',
+      // 折线图实时刷新开关（避免查看某个点时被新数据刷掉）
+      isChartPaused: false,
 
       // socket最新消息
       latestMeasure: null,
@@ -108,6 +280,55 @@ export default {
       // 懒加载：已订阅的设备列表
       subscribedDeviceCodes: [],
 
+      // 实时数据卡片定义（按酸轧页组织，不按设备分块）
+      entryMetrics: [
+        { field: 'entryCoilId', label: '入口卷号', unit: '' },
+        { field: 'stripLocation', label: '带钢位置', unit: 'm' },
+        { field: 'stripSpeed', label: '带钢速度', unit: 'm/min' },
+        { field: 'tensionPorBr1', label: '入口张力 POR-BR1', unit: 'daN' },
+        { field: 'tensionBr1Br2', label: '张力 BR1-BR2', unit: 'daN' },
+        { field: 'tensionBr2Br3', label: '张力 BR2-BR3', unit: 'daN' }
+      ],
+      furnaceMetrics: [
+        { field: 'phFurnaceTemperatureActual', label: 'PH炉温', unit: '℃' },
+        { field: 'rtf1FurnaceTemperatureActual', label: 'RTF1炉温', unit: '℃' },
+        { field: 'potTemperature', label: '锌锅温度', unit: '℃' },
+        { field: 'potPower', label: '锌锅功率', unit: '' }
+      ],
+      coatMetrics: [
+        { field: 'avrCoatingWeightTop', label: '上层平均涂层重量', unit: 'g/m²' },
+        { field: 'avrCoatingWeightBottom', label: '下层平均涂层重量', unit: 'g/m²' },
+        { field: 'airKnifePressure', label: '气刀压力', unit: '' },
+        { field: 'stripSpeedTmExit', label: 'TM出口速度', unit: 'm/min' }
+      ],
+      exitMetrics: [
+        { field: 'tensionBr8Br9', label: '张力 BR8-BR9', unit: 'daN' },
+        { field: 'tensionBr9Tr', label: '张力 BR9-TR', unit: 'daN' },
+        { field: 'speedExitSection', label: '出口速度', unit: 'm/min' },
+        { field: 'coilLength', label: '钢卷长度', unit: 'm' }
+      ],
+
+      // 前端历史缓存（打开页面即可出趋势）
+      chartMaxPoints: 60,
+      chartSeries: {
+        entry: { time: [], stripSpeed: [], tensionPorBr1: [], tensionBr1Br2: [], tensionBr2Br3: [] },
+        furnace: { time: [], phFurnaceTemperatureActual: [], rtf1FurnaceTemperatureActual: [], potTemperature: [] },
+        coat: { time: [], avrCoatingWeightTop: [], avrCoatingWeightBottom: [], airKnifePressure: [], stripSpeedTmExit: [] },
+        exit: { time: [], tensionBr8Br9: [], tensionBr9Tr: [], speedExitSection: [] }
+      },
+
+      // 生产统计（实绩）
+      currentPlan: null,
+      currentProcess: null,
+      reportSummary: null,
+      reportDetails: [],
+      reportLoading: false,
+
+      // 停机记录
+      stoppageList: [],
+      stoppageLoading: false,
+      stoppageMonth: '', // yyyy-MM
+
       lineChartOpts: {
         color: ['#0066cc', '#409eff', '#66b1ff', '#a0cfff', '#d9ecff', '#ecf5ff'],
         padding: [15, 15, 0, 15],
@@ -129,32 +350,71 @@ export default {
 
       socketClient: null,
       fieldTrendSocket: null,
-      fieldTrendSubscribed: false,
-      subscribedDeviceCodes: []
+      fieldTrendSubscribed: false
     }
   },
 
   mounted() {
     this.initSocket()
 
-    Promise.all([this.loadDeviceDefs(), this.loadFieldMeta()]).then(() => {
-      // 页面初始化完成后，默认订阅首屏设备（懒加载）
-      this.$nextTick(() => {
-        this.updateVisibleDeviceSubscriptions()
-      })
-    })
+    Promise.all([this.loadDeviceDefs(), this.loadFieldMeta(), this.loadHistoryForCharts()]).then(() => {})
 
     this.updateLastTime()
+
+    // 周期性从后端快照刷新折线图数据（降低刷新频率，避免频繁打断用户查看）
+    // 这里用 60 秒刷一次，后端快照是每 5 分钟一条，折线图变化会比较平滑
+    this._historyTimer = setInterval(() => {
+      if (!this.isChartPaused) {
+        this.loadHistoryForCharts()
+      }
+    }, 60 * 1000)
+  },
+
+  computed: {
+    stoppageMonthLabel() {
+      if (!this.stoppageMonth) return '选择月份'
+      const parts = (this.stoppageMonth || '').split('-')
+      if (parts.length < 2) return this.stoppageMonth
+      const [y, m] = parts
+      return `${y}年${m}月`
+    }
+  },
+
+  watch: {
+    currentTab(newVal) {
+      if (newVal === 2) {
+        this.loadReportData()
+      } else if (newVal === 3) {
+        // 默认当前月
+        if (!this.stoppageMonth) {
+          const now = new Date()
+          const y = now.getFullYear()
+          const m = String(now.getMonth() + 1).padStart(2, '0')
+          this.stoppageMonth = `${y}-${m}`
+        }
+        this.loadStoppageData()
+      }
+    }
   },
 
   beforeDestroy() {
     if (this.socketClient) this.socketClient.close()
     if (this.fieldTrendSocket) this.fieldTrendSocket.close()
+    if (this._historyTimer) {
+      clearInterval(this._historyTimer)
+      this._historyTimer = null
+    }
   },
 
   methods: {
     async loadDeviceDefs() {
       const res = await listDeviceEnumAll()
+      // 打印响应，排查是否拿到 data 数组（避免页面空白）
+      try {
+                console.log(res)
+      } catch (e) {
+        // ignore
+      }
       this.deviceDefs = (res && res.data) || []
 
 
@@ -162,9 +422,82 @@ export default {
 
     async loadFieldMeta() {
       const res = await getDeviceFieldMetaAll()
+      // 打印响应，排查字段元数据是否加载成功
+      try {
+        const keys = res && res.data && typeof res.data === 'object' ? Object.keys(res.data).length : -1
+        console.log('[resp]/api/deviceFieldMeta/all:', {
+          code: res && res.code,
+          msg: res && res.msg,
+          dataType: res && res.data ? Object.prototype.toString.call(res.data) : 'null',
+          keyCount: keys
+        })
+      } catch (e) {
+        // ignore
+      }
       this.fieldMeta = (res && res.data) || {}
     },
 
+    // 加载历史快照，填充折线图的“历史部分”
+    async loadHistoryForCharts() {
+      try {
+        // 使用设备快照作为折线图唯一数据源，避免每条 socket 消息都触发重绘
+        // 每次加载前先清空本地缓存，防止重复累加
+        this.chartSeries = {
+          entry: { time: [], stripSpeed: [], tensionPorBr1: [], tensionBr1Br2: [], tensionBr2Br3: [] },
+          furnace: { time: [], phFurnaceTemperatureActual: [], rtf1FurnaceTemperatureActual: [], potTemperature: [] },
+          coat: { time: [], avrCoatingWeightTop: [], avrCoatingWeightBottom: [], airKnifePressure: [], stripSpeedTmExit: [] },
+          exit: { time: [], tensionBr8Br9: [], tensionBr9Tr: [], speedExitSection: [] }
+        }
+
+        const limit = this.chartMaxPoints
+        const tasks = []
+
+        const deviceMap = {
+          entry: { deviceCode: 'POR1', fields: ['stripSpeed', 'tensionPorBr1', 'tensionBr1Br2', 'tensionBr2Br3'] },
+          furnace: {
+            deviceCode: 'FUR2',
+            fields: ['phFurnaceTemperatureActual', 'rtf1FurnaceTemperatureActual', 'potTemperature']
+          },
+          coat: {
+            deviceCode: 'COAT',
+            fields: ['avrCoatingWeightTop', 'avrCoatingWeightBottom', 'airKnifePressure', 'stripSpeedTmExit']
+          },
+          exit: { deviceCode: 'TR', fields: ['tensionBr8Br9', 'tensionBr9Tr', 'speedExitSection'] }
+        }
+
+        Object.keys(deviceMap).forEach((group) => {
+          const cfg = deviceMap[group]
+          tasks.push(
+            listDeviceSnapshotLatest({ limit, deviceCode: cfg.deviceCode })
+              .then((res) => {
+                const rows = (res && res.data) || []
+                // 按时间升序
+                const list = rows.slice().reverse()
+                list.forEach((row) => {
+                  const t = (row.createTime || '').slice(11, 19) // HH:mm:ss
+                  let snap = {}
+                  try {
+                    snap = row.snapshotData ? JSON.parse(row.snapshotData) : {}
+                  } catch (e) {
+                    snap = {}
+                  }
+                  const values = {}
+                  cfg.fields.forEach((f) => {
+                    values[f] = snap[f]
+                  })
+                  this.pushSeries(group, t, values)
+                })
+              })
+              .catch(() => {})
+          )
+        })
+
+        await Promise.all(tasks)
+      } catch (e) {
+        // ignore
+      }
+    },
+
     initSocket() {
       // 实时测量数据 WebSocket
       this.socketClient = createMeasureSocket({
@@ -181,10 +514,24 @@ export default {
         },
         onMessage: (data) => {
           try {
-            this.latestMeasure = JSON.parse(data)
+            // 兼容字符串 / 已解析对象两种情况，并打日志方便排查
+            let payload = null
+            if (typeof data === 'string') {
+              payload = JSON.parse(data)
+            } else if (data && typeof data === 'object') {
+              // uni 有时会包一层 { data: 'xxx' }
+              if (typeof data.data === 'string') {
+                payload = JSON.parse(data.data)
+              } else {
+                payload = data
+              }
+            }
+            if (!payload) return
+            this.latestMeasure = payload
+            // 实时卡片仍然使用最新测量值，折线图改为走后端快照，避免高频刷新
             this.updateLastTime()
           } catch (e) {
-            // ignore
+            console.error('解析 track_measure 数据失败:', e, data)
           }
         }
       })
@@ -225,6 +572,76 @@ export default {
       this.fieldTrendSocket.connect()
     },
 
+    // 加载生产统计 / 实绩数据
+    async loadReportData() {
+      if (this.reportLoading) return
+      this.reportLoading = true
+      try {
+        // 当前计划 & 当前工艺
+        try {
+          const planRes = await getCurrentPlan()
+          this.currentPlan = (planRes && planRes.data) || null
+        } catch (e) {
+          this.currentPlan = null
+        }
+        try {
+          const procRes = await getCurrentProcess()
+          this.currentProcess = (procRes && procRes.data) || null
+        } catch (e) {
+          this.currentProcess = null
+        }
+
+        // 实绩汇总 & 明细：不传筛选条件，后端按默认时间范围处理
+        try {
+          const sumRes = await getReportSummary({})
+          this.reportSummary = sumRes || null
+        } catch (e) {
+          this.reportSummary = null
+        }
+        try {
+          const detRes = await getReportDetails({})
+          this.reportDetails = (detRes && Array.isArray(detRes) ? detRes : []) || []
+        } catch (e) {
+          this.reportDetails = []
+        }
+      } finally {
+        this.reportLoading = false
+      }
+    },
+
+    // 加载停机记录
+    async loadStoppageData() {
+      if (this.stoppageLoading) return
+      this.stoppageLoading = true
+      try {
+        // 计算当月起止日期（yyyy-MM-dd）
+        const month = this.stoppageMonth
+        let startDate = ''
+        let endDate = ''
+        if (month) {
+          const [y, m] = month.split('-').map((s) => Number(s))
+          const first = new Date(y, m - 1, 1)
+          const last = new Date(y, m, 0)
+          const pad = (n) => String(n).padStart(2, '0')
+          startDate = `${first.getFullYear()}-${pad(first.getMonth() + 1)}-${pad(first.getDate())}`
+          endDate = `${last.getFullYear()}-${pad(last.getMonth() + 1)}-${pad(last.getDate())}`
+        }
+        const res = await listStoppage({ startDate, endDate })
+        this.stoppageList = (res && res.data) || []
+      } catch (e) {
+        this.stoppageList = []
+      } finally {
+        this.stoppageLoading = false
+      }
+    },
+
+    onStoppageMonthChange(e) {
+      // e.detail.value 为 yyyy-MM-dd，这里截取前 7 位当作月份
+      const v = e.detail && e.detail.value
+      this.stoppageMonth = v ? v.slice(0, 7) : ''
+      this.loadStoppageData()
+    },
+
     // 滚动事件：节流触发订阅更新
     onScroll() {
       if (this._scrollTimer) return
@@ -311,34 +728,116 @@ export default {
       }
     },
 
+    // 根据 sourceType + 字段名取实时值（不按设备分块）
+    getRealtimeValueBySource(sourceType, field) {
+      const m = this.latestMeasure || {}
+      let msg = {}
+      switch (sourceType) {
+        case 'ENTRY':
+          msg = m.appMeasureEntryMessage || {}
+          break
+        case 'FURNACE':
+          msg = m.appMeasureFurnaceMessage || {}
+          break
+        case 'COAT':
+          msg = m.appMeasureCoatMessage || {}
+          break
+        case 'EXIT':
+          msg = m.appMeasureExitMessage || {}
+          break
+        default:
+          msg = {}
+      }
+      const v = msg ? msg[field] : null
+      if (typeof v === 'string') return v || '—'
+      return this.formatValue(v)
+    },
+
+    // 追加一帧到前端历史缓存（用于统计折线图）
+    appendChartPoint(payload) {
+      const now = new Date()
+      const hh = String(now.getHours()).padStart(2, '0')
+      const mm = String(now.getMinutes()).padStart(2, '0')
+      const ss = String(now.getSeconds()).padStart(2, '0')
+      const t = `${hh}:${mm}:${ss}`
+
+      const entry = payload.appMeasureEntryMessage || {}
+      const furnace = payload.appMeasureFurnaceMessage || {}
+      const coat = payload.appMeasureCoatMessage || {}
+      const exit = payload.appMeasureExitMessage || {}
+
+      this.pushSeries('entry', t, {
+        stripSpeed: entry.stripSpeed,
+        tensionPorBr1: entry.tensionPorBr1,
+        tensionBr1Br2: entry.tensionBr1Br2,
+        tensionBr2Br3: entry.tensionBr2Br3
+      })
+
+      this.pushSeries('furnace', t, {
+        phFurnaceTemperatureActual: furnace.phFurnaceTemperatureActual,
+        rtf1FurnaceTemperatureActual: furnace.rtf1FurnaceTemperatureActual,
+        potTemperature: furnace.potTemperature
+      })
+
+      this.pushSeries('coat', t, {
+        avrCoatingWeightTop: coat.avrCoatingWeightTop,
+        avrCoatingWeightBottom: coat.avrCoatingWeightBottom,
+        airKnifePressure: coat.airKnifePressure,
+        stripSpeedTmExit: coat.stripSpeedTmExit
+      })
+
+      this.pushSeries('exit', t, {
+        tensionBr8Br9: exit.tensionBr8Br9,
+        tensionBr9Tr: exit.tensionBr9Tr,
+        speedExitSection: exit.speedExitSection
+      })
+    },
+
+    pushSeries(group, time, values) {
+      const g = this.chartSeries[group]
+      if (!g) return
+      g.time.push(time)
+      Object.keys(values).forEach((k) => {
+        if (!g[k]) return
+        const raw = values[k]
+        const num = raw === null || raw === undefined || raw === '' ? null : Number(raw)
+        g[k].push(Number.isFinite(num) ? num : null)
+      })
+      if (g.time.length > this.chartMaxPoints) {
+        g.time.shift()
+        Object.keys(values).forEach((k) => {
+          if (g[k] && g[k].length > this.chartMaxPoints) g[k].shift()
+        })
+      }
+    },
+
+    // 生成多序列折线图数据
+    toGroupLineChart(group) {
+      const g = this.chartSeries[group]
+      if (!g) return { categories: [], series: [] }
+      const seriesKeys = Object.keys(g).filter((k) => k !== 'time')
+      return {
+        categories: g.time || [],
+        series: seriesKeys.map((k) => ({
+          name: this.getFieldLabel(k),
+          data: g[k] || []
+        }))
+      }
+    },
+
+    // 切换折线图实时刷新状态
+    toggleChartPause() {
+      this.isChartPaused = !this.isChartPaused
+    },
+
     formatNum(v) {
       if (v === null || v === undefined || Number.isNaN(Number(v))) return '—'
       return Number(v).toFixed(2)
     },
 
-    // 根据 DeviceEnum.sourceType 决定取哪个 message
-    pickSourceMsg(dev) {
-      const m = this.latestMeasure || {}
-      if (!dev || !dev.sourceType) return {}
-      switch (dev.sourceType) {
-        case 'ENTRY':
-          return m.appMeasureEntryMessage || {}
-        case 'FURNACE':
-          return m.appMeasureFurnaceMessage || {}
-        case 'COAT':
-          return m.appMeasureCoatMessage || {}
-        case 'EXIT':
-          return m.appMeasureExitMessage || {}
-        default:
-          return {}
-      }
-    },
+    // 不再按设备分块展示：pickSourceMsg/getRealtimeFieldValue 已弃用
 
-    getRealtimeFieldValue(dev, field) {
-      const msg = this.pickSourceMsg(dev)
-      const v = msg ? msg[field] : null
-      return this.formatValue(v)
-    },
+    // 快捷导航（已移除）
 
 
 
@@ -457,6 +956,86 @@ export default {
   }
 }
 
+/* 快速导航菜单（固定在左下角，模仿 acidity.vue） */
+.nav-menu-fixed {
+  position: fixed;
+  left: 32rpx;
+  bottom: 120rpx;
+  z-index: 998;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12rpx;
+}
+
+.nav-toggle {
+  width: 96rpx;
+  height: 96rpx;
+  background: #409eff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 20rpx rgba(64, 158, 255, 0.4);
+  transition: all 0.3s ease;
+
+  &:active {
+    opacity: 0.8;
+    transform: scale(0.95);
+  }
+}
+
+.nav-toggle-icon {
+  font-size: 48rpx;
+  color: #fff;
+  display: block;
+  line-height: 1;
+}
+
+.nav-items {
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+  animation: slideUp 0.3s ease;
+  max-height: 60vh;
+  overflow: auto;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.nav-item {
+  background: #fff;
+  border: 2rpx solid #409eff;
+  border-radius: 8rpx;
+  padding: 16rpx 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.2);
+  transition: all 0.2s ease;
+
+  &:active {
+    background: #f0f9ff;
+    transform: scale(0.95);
+  }
+}
+
+.nav-label {
+  font-size: 26rpx;
+  color: #409eff;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
 @keyframes rotate {
   from {
     transform: rotate(0deg);
@@ -471,6 +1050,19 @@ export default {
   padding: 24rpx;
 }
 
+.placeholder-box {
+  background: #fff;
+  border: 1rpx dashed #dcdfe6;
+  border-radius: 12rpx;
+  padding: 28rpx 20rpx;
+  margin-bottom: 18rpx;
+}
+
+.placeholder-text {
+  font-size: 24rpx;
+  color: #909399;
+}
+
 .status-bar {
   display: flex;
   align-items: center;
@@ -696,27 +1288,25 @@ export default {
 }
 
 .overview-card {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: #fff;
   border-radius: 12rpx;
   padding: 32rpx 24rpx;
   text-align: center;
-  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+  border: 1rpx solid #e4e7ed;
 }
 
 .overview-card:nth-child(2) {
-  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-  box-shadow: 0 4rpx 12rpx rgba(245, 87, 108, 0.3);
+  background: #fff;
 }
 
 .overview-card:nth-child(3) {
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-  box-shadow: 0 4rpx 12rpx rgba(79, 172, 254, 0.3);
+  background: #fff;
 }
 
 .overview-label {
   display: block;
   font-size: 24rpx;
-  color: rgba(255, 255, 255, 0.9);
+  color: #909399;
   margin-bottom: 16rpx;
 }
 
@@ -724,17 +1314,35 @@ export default {
   display: block;
   font-size: 48rpx;
   font-weight: 700;
-  color: #fff;
+  color: #303133;
   line-height: 1.2;
 }
 
 .overview-unit {
   display: block;
   font-size: 22rpx;
-  color: rgba(255, 255, 255, 0.8);
+  color: #909399;
   margin-top: 8rpx;
 }
 
+.stoppage-filter {
+  margin: 0 0 20rpx 0;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.stoppage-month-btn {
+  padding: 12rpx 24rpx;
+  border-radius: 999rpx;
+  border: 1rpx solid #dcdfe6;
+  background: #fff;
+}
+
+.stoppage-month-text {
+  font-size: 24rpx;
+  color: #606266;
+}
+
 .status-distribution {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
diff --git a/apps/hand-factory/utils/socketMeasure.js b/apps/hand-factory/utils/socketMeasure.js
index 1e69db4..d3f2a09 100644
--- a/apps/hand-factory/utils/socketMeasure.js
+++ b/apps/hand-factory/utils/socketMeasure.js
@@ -16,38 +16,58 @@ export function createMeasureSocket({
 
   const wsBase = (config.wsUrl || config.baseUrl || '').replace(/^http/, 'ws')
   const url = `${wsBase}/websocket?type=${type}`
-	console.log(url)
-	
+  console.log(url)
+
   function connect() {
     manualClose = false
-    // socket = new WebSocket(url)
-		socket = uni.connectSocket({
-			url,
-			success() {
-				console.log('连接成功')
-			}
-		})
-		
-		console.log(socket)
-    socket.onOpen = () => {
-			console.log('连接成功')
-      onOpen && onOpen()
-    }
 
-    socket.onMessage = (evt) => {
-      onMessage && onMessage(evt.data)
-    }
-
-    socket.onError = (err) => {
+    // 使用 uni.connectSocket 建立连接（部分运行环境可能不支持 WebSocket，会直接抛异常）
+    try {
+      socket = uni.connectSocket({
+        url,
+        success() {
+          console.log('connectSocket 调用成功，等待 onOpen 回调')
+        },
+        fail(err) {
+          console.error('connectSocket 调用失败:', err)
+          onError && onError(err)
+        }
+      })
+    } catch (err) {
+      console.error('connectSocket 执行异常（可能环境不支持 WebSocket）:', err)
       onError && onError(err)
+      return
     }
 
-    socket.onClose = (evt) => {
+    if (!socket) {
+      console.error('connectSocket 未返回有效 socketTask')
+      return
+    }
+
+    // 正确的事件注册方式：socketTask.onOpen / onMessage / onError / onClose
+    socket.onOpen((res) => {
+      console.log('WebSocket 已打开', res)
+      onOpen && onOpen(res)
+    })
+
+    socket.onMessage((evt) => {
+      // H5 为 evt.data，小程序为 evt.data，统一兼容
+      const data = evt && (evt.data || evt)
+      onMessage && onMessage(data)
+    })
+
+    socket.onError((err) => {
+      console.error('WebSocket 发生错误:', err)
+      onError && onError(err)
+    })
+
+    socket.onClose((evt) => {
+      console.log('WebSocket 已关闭', evt)
       onClose && onClose(evt)
       if (!manualClose) {
         setTimeout(connect, 3000)
       }
-    }
+    })
   }
 
   function close() {
@@ -59,11 +79,18 @@ export function createMeasureSocket({
   }
 
   function send(data) {
-    if (socket && socket.readyState === WebSocket.OPEN) {
-      socket.send(JSON.stringify(data));
-    } else {
-      console.error('WebSocket is not open. Cannot send message.');
+    if (!socket) {
+      console.error('WebSocket 未初始化，无法发送消息')
+      return
     }
+
+    // uni-app 的 socketTask.send 使用对象形式
+    socket.send({
+      data: JSON.stringify(data),
+      fail(err) {
+        console.error('发送 WebSocket 消息失败:', err)
+      }
+    })
   }
 
   return { connect, close, send }
diff --git a/apps/l2/package.json b/apps/l2/package.json
index 70ec1d2..9cd3aa8 100644
--- a/apps/l2/package.json
+++ b/apps/l2/package.json
@@ -54,6 +54,7 @@
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "splitpanes": "2.4.1",
+    "three": "^0.158.0",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
diff --git a/apps/l2/public/models/光整机.glb b/apps/l2/public/models/光整机.glb
new file mode 100644
index 0000000..ef64514
Binary files /dev/null and b/apps/l2/public/models/光整机.glb differ
diff --git a/apps/l2/public/models/剪切机.glb b/apps/l2/public/models/剪切机.glb
new file mode 100644
index 0000000..ebeb20b
Binary files /dev/null and b/apps/l2/public/models/剪切机.glb differ
diff --git a/apps/l2/public/models/卷取机.glb b/apps/l2/public/models/卷取机.glb
new file mode 100644
index 0000000..68f156c
Binary files /dev/null and b/apps/l2/public/models/卷取机.glb differ
diff --git a/apps/l2/public/models/夹送矫直机.glb b/apps/l2/public/models/夹送矫直机.glb
new file mode 100644
index 0000000..40f20e6
Binary files /dev/null and b/apps/l2/public/models/夹送矫直机.glb differ
diff --git a/apps/l2/public/models/开卷机.glb b/apps/l2/public/models/开卷机.glb
new file mode 100644
index 0000000..a5d23e3
Binary files /dev/null and b/apps/l2/public/models/开卷机.glb differ
diff --git a/apps/l2/public/models/拉轿机.glb b/apps/l2/public/models/拉轿机.glb
new file mode 100644
index 0000000..aeeb1ec
Binary files /dev/null and b/apps/l2/public/models/拉轿机.glb differ
diff --git a/apps/l2/public/models/清洗段.glb b/apps/l2/public/models/清洗段.glb
new file mode 100644
index 0000000..8113074
Binary files /dev/null and b/apps/l2/public/models/清洗段.glb differ
diff --git a/apps/l2/public/models/炉火段.glb b/apps/l2/public/models/炉火段.glb
new file mode 100644
index 0000000..5461ad1
Binary files /dev/null and b/apps/l2/public/models/炉火段.glb differ
diff --git a/apps/l2/public/models/锌锅.glb b/apps/l2/public/models/锌锅.glb
new file mode 100644
index 0000000..9a2645f
Binary files /dev/null and b/apps/l2/public/models/锌锅.glb differ
diff --git a/apps/l2/src/config/productionLine.js b/apps/l2/src/config/productionLine.js
new file mode 100644
index 0000000..d1920a6
--- /dev/null
+++ b/apps/l2/src/config/productionLine.js
@@ -0,0 +1,278 @@
+// 产线配置数据（替代后端 API）
+// 轨道节点配置说明：
+//   trackNodes: 轨道节点数组，按顺序连接
+//     每个节点包含：
+//       id: 节点唯一标识
+//       name: 节点名称（可选，用于显示）
+//       position: { x, y, z } 节点位置坐标
+//       width: 轨道宽度（可选，默认1.2）
+//       waypoints: 中间路径点数组（可选），用于定义从该节点到下一个节点的中间转弯点
+//         每个waypoint包含：{ x, y, z } 位置坐标
+//         示例：waypoints: [{ x: 10, y: 0.5, z: 5 }, { x: 15, y: 0.5, z: 5 }]
+//         轨道会依次经过：节点 -> waypoint1 -> waypoint2 -> ... -> 下一个节点
+export const productionLineConfig = {
+    name: "产线展示",
+    description: "基于节点的轨道系统，可手动调节每个节点的位置和高度。",
+    // 运动扁钢（压钢带）参数
+    steelFlow: {
+        count: 4,          // 扁钢数量（同时在轨道上运动的条数）
+        length: 8,       // 每条扁钢长度（沿轨道方向）
+        widthRatio: 0.85,  // 扁钢宽度=轨道宽度*比例
+        thickness: 0.10,   // 扁钢厚度
+        speed: 6           // 运动速度（数值越大越快）
+    },
+    // 轨道节点配置 - 按顺序连接，轨道会平滑通过这些节点
+    // 可以在节点之间添加 waypoints 来定义中间转弯点
+    trackNodes: [
+        { id: "node_1", name: "起点", position: { x: 5.0, y: 5.0, z: 0.0 }, width: 1.8 },
+        { id: "node_2", name: "1#开卷机后", position: { x: 23.0, y: 5.2, z: 0.0 }, width: 1.2 },
+        { id: "node_3", name: "2#开卷机前", position: { x: 28.0, y: 5.2, z: 0.0 }, width: 1.2 },
+        { id: "node_4", name: "2#开卷机后", position: { x: 42.0, y: 5.2, z: 0.0 }, width: 1.2 },
+        {
+            id: "node_5",
+            name: "夹送矫直前",
+            position: { x: 46, y: 6.0, z: 0.0 },
+            width: 1.2,
+            // 示例：从上一个节点到当前节点，经过多个转弯点
+            // waypoints: [
+            //     { x: -13.0, y: 3.0, z: 0.0 },  // 第一个转弯点
+            //     { x: -12.5, y: 4.5, z: 0.0 }  // 第二个转弯点
+            // ]
+        },
+        { id: "node_6", name: "夹送矫直后", position: { x:55.0, y: 5.5, z: 0.0 }, width: 1.2 },
+        {
+            id: "node_7",
+            name: "清洗段前",
+            position: { x: 64, y: 2, z: 1.6 },
+            width: 1.2,
+            // 从清洗段前到清洗段后的中间转弯点
+            // 轨道会依次经过：node_7 -> waypoint1 -> waypoint2 -> ... -> node_8
+            waypoints: [
+                // 在这里添加转弯点，例如：
+                { x: 70, y: 2.0, z: 0.0 },   // 转弯点1
+                { x: 72, y: 2.0, z: 13.0 },   // 转弯点2
+                // { x: 90, y: 0.6, z: 12.0 }  // 转弯点3
+            ]
+        },
+        {
+            id: "node_8",
+            name: "清洗段后",
+            position: { x: 92, y: 0.6, z: 13.6 },
+            width: 1.2,
+            // 示例：清洗段内部可能有多次转弯
+             waypoints: [
+                //  { x: -2.0, y: 0.6, z: 5.0 },   // 转弯点1
+                //  { x: 0.0, y: 0.6, z: 9.0 },   // 转弯点2
+                //  { x: 1.0, y: 0.6, z: 11.5 }   // 转弯点3
+             ]
+        },
+        { id: "node_9", name: "炉火段前", position: { x:92, y:3, z: 2.2 }, width: 1.2 },
+        { id: "node_10", name: "炉火段后", position: { x: 92, y: 3, z: 2.2 }, width: 1.2,
+        waypoints: [
+             { x: 92.0, y:5, z: 0.0 },   // 转弯点1
+             { x: 92.0, y: 5, z: -10.0 },   // 转弯点2
+            //  { x: 1.0, y: 0.6, z: 11.5 }   // 转弯点3
+         ]
+    },
+        { id: "node_11", name: "锌锅前", position: { x: 109, y: 3, z: -10.0 }, width: 1.2 },
+        { id: "node_12", name: "锌锅后", position: { x: 109, y:7, z: 4.0 }, width: 1.2,
+        waypoints: [
+            { x: 109.0, y: 5, z: 13.0 },   // 转弯点1
+        ]
+
+    },
+        { id: "node_13", name: "光整机前",position: { x: 127.0, y: 5, z: 15.0 },  width: 1.2 },
+        { id: "node_14", name: "光整机后", position: { x: 130.0, y: 5, z: 15.0 }, width: 1.2 },
+        { id: "node_15", name: "拉矫机前", position: { x: 134.0, y: 7, z: 15.0 }, width: 1.2 },
+        { id: "node_16", name: "拉矫机后", position: { x: 142.0, y: 7, z: 15.0 }, width: 1.2 },
+        { id: "node_17", name: "剪切机前", position: { x:148.0, y: 5, z: 15.0 }, width: 1.2 },
+        { id: "node_18", name: "剪切机后", position: { x: 158.0, y: 5, z: 15.0 }, width: 1.2 },
+        { id: "node_19", name: "卷取机前", position: { x: 160.0, y: 7, z: 15.0 }, width: 1.2 },
+        { id: "node_20", name: "终点", position: { x: 165.0, y: 7, z: 15.0 }, width: 1.2 },
+        { id: "node_21", name: "结束", position: { x: 170.0, y: 2, z: 15.0 }, width: 1.2 },
+    ],
+    // 设备配置（独立于轨道）
+    models: [
+        // 入口段（示例：开卷机可复用两次）
+        {
+            id: "unjcoiler_1",
+            name: "1#开卷机",
+            deviceCode: "POR1",
+            file: "/models/开卷机.glb",
+            position: { x: -24.0, y: 0.0, z: 0.0 },
+            io: {
+                entryDir: "-x",
+                exitDir: "+x",
+                leadOut:2,
+                leadIn: 0,
+                entryOffset: { y: 0 },
+                exitOffset: { y: 1.2 },
+                conveyor: { enabled: true, yOffset: 5.5, width: 1.2 }
+            }
+        },
+        {
+            id: "unjcoiler_2",
+            name: "2#开卷机",
+            deviceCode: "POR2",
+            file: "/models/开卷机.glb",
+            position: { x: -18.0, y: 0.0, z: 0.0 },
+            io: {
+                entryDir: "-x",
+                exitDir: "+x",
+                leadOut: 6,
+                leadIn: 1,
+                entryOffset: { y: 0.2 },
+                exitOffset: { y: 0.2 },
+                conveyor: { enabled: true, yOffset: 5.5, width: 1.2 }
+            }
+        },
+
+        // 夹送矫直
+        {
+            id: "pinch_leveler",
+            name: "夹送矫直机",
+            // 暂无对应的实时设备编码，可后续按需补充
+            file: "/models/夹送矫直机.glb",
+            position: { x: -12.0, y: 0.0, z: 0.0 },
+            rotation: { x: 0.0, y: 3.1415926, z: 0.0 },
+            io: {
+                entryDir: "-x",
+                exitDir: "+x",
+                leadOut: 0,
+                leadIn: 2.0,
+                entryOffset: { y: 0.25 },
+                exitOffset: { y: 0.25 },
+                rampLength: 0,
+                conveyor: { enabled: true, yOffset: 6, width: 1.2 }
+            }
+        },
+
+        // 清洗/炉火
+        {
+            id: "clean",
+            name: "清洗段",
+            deviceCode: "CLEAN",
+            file: "/models/清洗段.glb",
+            position: { x: -6, y: 0.0, z: 5.6 },
+            io: {
+                entryDir: "-x",
+                exitDir: "+x",
+                leadOut: 8.0,
+                leadIn: 0,
+                entryOffset: { y: 0, z:-4},
+                exitOffset: { y: 0, z: 8 },
+                rampLength: 4.0,
+                conveyor: { enabled: false, yOffset: 0.6, zOffset: 0, width: 1.2 }
+            }
+        },
+        {
+            id: "furnace",
+            name: "炉火段",
+            deviceCode: "FUR1",
+            file: "/models/炉火段.glb",
+            position: { x: 0.0, y: 0.0, z: 2.2 },
+            io: {
+                entryDir: "-x",
+                exitDir: "+x",
+                leadOut: 2.0,
+                leadIn: 2.0,
+                entryOffset: { y: 0.25 },
+                exitOffset: { y: 0.25 },
+                rampLength: 3.5,
+                conveyor: { enabled: true, yOffset: 0.25, width: 1.2 }
+            }
+        },
+
+        // 锌锅/后处理
+        {
+            id: "pot",
+            name: "锌锅",
+            deviceCode: "POT",
+            file: "/models/锌锅.glb",
+            position: { x: 6.0, y: 0.0, z: 0.0 },
+            io: {
+                entryDir: "-x",
+                exitDir: "+z",
+                leadOut: 1.8,
+                leadIn: 2.2,
+                entryOffset: { y: 0.35 },
+                exitOffset: { y: 0.35, x: -0.6 },
+                rampLength: 3.0,
+                conveyor: { enabled: true, yOffset: 0.35, width: 1.2 }
+            }
+        },
+        {
+            id: "skinpass",
+            name: "光整机",
+            deviceCode: "TM",
+            file: "/models/光整机.glb",
+            position: { x: 6.0, y: 0.0, z: 18.0 },
+            rotation: { x: 0.0, y: Math.PI / 2, z: 0.0 },
+            io: {
+                entryDir: "-z",
+                exitDir: "+z",
+                leadOut: 2.2,
+                leadIn: 2.2,
+                entryOffset: { y: 0.25 },
+                exitOffset: { y: 0.25 },
+                rampLength: 3.5,
+                conveyor: { enabled: true, yOffset: 0.25, width: 1.2 }
+            }
+        },
+        {
+            id: "bridle",
+            name: "拉矫机",
+            deviceCode: "TL",
+            file: "/models/拉轿机.glb",
+            rotation: { x: 0.0, y: Math.PI / 2, z: 0.0 },
+            position: { x: 8.0, y: 0.0, z: 15.0 },
+            io: {
+                entryDir: "-z",
+                exitDir: "+x",
+                leadOut: 2.0,
+                leadIn: 2.0,
+                entryOffset: { y: 0.25 },
+                exitOffset: { y: 0.25 },
+                rampLength: 3.0,
+                conveyor: { enabled: true, yOffset: 0.25, width: 1.2 }
+            }
+        },
+
+        // 剪切/卷取
+        {
+            id: "shear",
+            name: "剪切机",
+            deviceCode: "EXC",
+            file: "/models/剪切机.glb",
+            position: { x: 16.0, y: 0.0, z: 15.0 },
+            rotation: { x: 0.0, y: Math.PI / 2, z: 0.0 },
+            io: {
+                entryDir: "-x",
+                exitDir: "+x",
+                leadOut: 2.0,
+                leadIn: 2.0,
+                entryOffset: { y: 0.3 },
+                exitOffset: { y: 0.3 },
+                rampLength: 3.0,
+                conveyor: { enabled: true, yOffset: 0.3, width: 1.2 }
+            }
+        },
+        {
+            id: "coiler",
+            name: "卷取机",
+            deviceCode: "TR",
+            file: "/models/卷取机.glb",
+            position: { x: 24.0, y: 0.0, z: 22.0 },
+            rotation: { x: 0.0, y: Math.PI / 2, z: 0.0 },
+            io: {
+                entryDir: "-x",
+                exitDir: "+x",
+                leadOut: 2.0,
+                leadIn: 2.0,
+                entryOffset: { y: 0.3 },
+                exitOffset: { y: 0.3 },
+                conveyor: { enabled: true, yOffset: 0.3, width: 1.2 }
+            }
+        },
+    ]
+}
diff --git a/apps/l2/src/views/components/CurrentTime.vue b/apps/l2/src/views/components/CurrentTime.vue
index 3a6565e..ebe8bfd 100644
--- a/apps/l2/src/views/components/CurrentTime.vue
+++ b/apps/l2/src/views/components/CurrentTime.vue
@@ -57,7 +57,7 @@ $theme-text-gray: #a1a6af;
 // 仅维护组件自身样式，无定位属性
 .current-time {
   padding: 1.2vw 1.8vw;
-  background: white;
+  background: rgba(255, 255, 255, 0.4);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(167, 172, 180, 0.3);
   border-radius: 8px;
@@ -91,4 +91,4 @@ $theme-text-gray: #a1a6af;
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/l2/src/views/index.vue b/apps/l2/src/views/index.vue
index d6e6273..6b7b24e 100644
--- a/apps/l2/src/views/index.vue
+++ b/apps/l2/src/views/index.vue
@@ -1,13 +1,9 @@
 <template>
   <div class="industrial-dashboard">
-    <!-- Header: 系统标题和当前时间 -->
-    <div class="dashboard-header">
-      <div class="header-left">
-        <h1 class="system-title">生产监控大屏</h1>
-        <p class="system-subtitle">实时生产数据与设备状态</p>
-      </div>
-      <div class="header-right">
-        <CurrentTime />
+    <!-- 顶部：产线三维展示（时间显示放入3D组件内部） -->
+    <div class="production-line-section">
+      <div class="production-line-view">
+        <ProductionLine />
       </div>
     </div>
 
@@ -82,9 +78,9 @@
             <span>系统告警信息</span>
             <el-badge :value="alarmData.length" class="alarm-badge" v-if="alarmData.length > 0"></el-badge>
           </div>
-          <MiniTable 
+          <MiniTable
             v-loading="tableLoading"
-            :columns="alarmColumns" 
+            :columns="alarmColumns"
             :data="alarmData"
             :highlightOnRowClick="true"
             tableHeight="280px"
@@ -96,7 +92,7 @@
           <div slot="header" class="card-header">
             <span>换辊信息</span>
           </div>
-          <MiniTable 
+          <MiniTable
             v-loading="rollHistoryLoading"
             :columns="rollHistoryColumns"
             :data="rollHistoryData"
@@ -116,7 +112,7 @@
               <i class="el-icon-arrow-right"></i>
             </el-button>
           </div>
-          <MiniTable 
+          <MiniTable
             v-loading="planLoading"
             :columns="planColumns"
             :data="planData"
@@ -137,7 +133,7 @@
               <i class="el-icon-arrow-right"></i>
             </el-button>
           </div>
-          <TrackMeasure 
+          <TrackMeasure
             v-loading="measureLoading"
             :columns="measureColumns"
             :data="measureData"
@@ -155,9 +151,9 @@
             <span>快速访问</span>
           </div>
           <div class="quick-access-grid">
-            <div 
-              class="access-item" 
-              v-for="(card, index) in featureCards" 
+            <div
+              class="access-item"
+              v-for="(card, index) in featureCards"
               :key="index"
               @click="$router.push(card.path)"
             >
@@ -177,14 +173,14 @@
       </el-col>
     </el-row>
   </div>
-</template> 
+</template>
 
 <script>
-import CurrentTime from "./components/CurrentTime.vue";
 import HomeMain from "./components/HomeMain.vue";
 import MiniTable from "./components/MiniTable.vue";
+import ProductionLine from "./l2/productLine/ProductLine.vue";
 // 引入日志API / 生产相关API
-import { getLogDataPage } from "@/api/l2/log"; 
+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";
@@ -192,7 +188,7 @@ import { getCurrentProducingPlan, getCurrentProcessParams } from "@/api/business
 
 export default {
   name: "Index",
-  components: { CurrentTime, HomeMain, MiniTable, TrackMeasure },
+  components: { HomeMain, MiniTable, TrackMeasure, ProductionLine },
   data() {
     return {
       // KPI指标数据
@@ -431,30 +427,16 @@ $theme-text-gray: #c9cdcf;
   min-height: calc(100vh - 60px);
 }
 
-/* 仪表板头部 */
-.dashboard-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+/* 顶部产线展示区 */
+.production-line-section {
   margin-bottom: 20px;
-  padding: 20px;
-  background: #ffffff; // 简洁白色背景，避免低级渐变色
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 
-  .header-left {
-    .system-title {
-      color: #000;
-      font-size: 28px;
-      font-weight: 600;
-      margin: 0 0 8px 0;
-    }
-
-    .system-subtitle {
-      color: #000;
-      font-size: 14px;
-      margin: 0;
-    }
+  .production-line-view {
+    background: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    padding: 0;
+    overflow: hidden;
   }
 }
 
@@ -707,4 +689,4 @@ $theme-text-gray: #c9cdcf;
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/l2/src/views/l2/productLine/ProductLine.vue b/apps/l2/src/views/l2/productLine/ProductLine.vue
new file mode 100644
index 0000000..544a834
--- /dev/null
+++ b/apps/l2/src/views/l2/productLine/ProductLine.vue
@@ -0,0 +1,1390 @@
+<template>
+  <div class="production-line-page">
+    <div class="viewer-container">
+      <div ref="threeContainer" class="three-container"></div>
+
+      <!-- 设备实时数据面板：左上角，点击 3D 设备后展示 -->
+      <div v-if="selectedDevicePanel" class="device-info-panel">
+        <div class="device-info-header">
+          <div class="device-main-name">{{ selectedDevicePanel.name }}</div>
+          <div class="device-sub-info">
+            <span class="device-code">代号：{{ selectedDevicePanel.code }}</span>
+            <span class="device-mat">钢卷：{{ selectedDevicePanel.matId }}</span>
+          </div>
+        </div>
+        <div class="device-info-body">
+          <div v-if="!selectedDevicePanel.data.length" class="device-info-empty">
+            暂无实时数据
+          </div>
+          <div v-else class="device-info-list">
+            <div v-for="item in selectedDevicePanel.data" :key="item.label" class="device-info-row">
+              <span class="device-info-label">{{ item.label }}</span>
+              <span class="device-info-value">
+                {{ item.value }}<span v-if="item.unit" class="device-info-unit"> {{ item.unit }}</span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 时间显示：放在3D视图上层 -->
+      <div class="time-panel">
+        <CurrentTime />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+import { productionLineConfig } from '@/config/productionLine.js'
+import wsManager from '@/utils/websocketManager'
+import { getTrackMatPosition } from '@/api/l2/track'
+import CurrentTime from '@/views/components/CurrentTime.vue'
+
+// 设备元数据（与轨迹页面保持一致，用于解析实时数据字段）
+const DEVICE_META = {
+  POR1: { sectionType: 'ENTRY', sourceType: 'ENTRY', paramFields: ['tensionPorBr1', 'stripSpeed'] },
+  POR2: { sectionType: 'ENTRY', sourceType: 'ENTRY', paramFields: ['tensionPorBr2', 'stripSpeed'] },
+  WELDER: { sectionType: 'ENTRY', sourceType: 'ENTRY', paramFields: ['weldStatus'] },
+  ENL1: { sectionType: 'PROCESS', sourceType: 'ENTRY', paramFields: ['celLength', 'celCapacity', 'tensionCel', 'celLengthMax', 'celLengthMin', 'bR4or5toBR6Tension'] },
+  ENL2: { sectionType: 'PROCESS', sourceType: 'ENTRY', paramFields: ['celLength', 'celCapacity', 'tensionCel', 'celLengthMax', 'celLengthMin', 'bR4or5toBR6Tension'] },
+  ENL3: { sectionType: 'PROCESS', sourceType: 'ENTRY', paramFields: ['celLength', 'celCapacity', 'tensionCel', 'celLengthMax', 'celLengthMin', 'bR4or5toBR6Tension'] },
+
+  CLEAN: { sectionType: 'PROCESS', sourceType: 'FURNACE', paramFields: ['cleaningVoltage', 'cleaningCurrent', 'alkaliConcentration', 'alkaliTemperature'] },
+  FUR1: { sectionType: 'PROCESS', sourceType: 'FURNACE', paramFields: ['phfExitStripTemp', 'potTemperature', 'gasConsumption'] },
+  FUR2: { sectionType: 'PROCESS', sourceType: 'FURNACE', paramFields: ['rtfExitStripTemp', 'zincPotPower'] },
+  FUR3: { sectionType: 'PROCESS', sourceType: 'FURNACE', paramFields: ['jcsExitStripTemp', 'coolingTowerStripTemp'] },
+  FUR4: { sectionType: 'PROCESS', sourceType: 'FURNACE', paramFields: ['scsExitStripTemp'] },
+  POT: { sectionType: 'PROCESS', sourceType: 'COAT', paramFields: ['scsExitStripTemp'] },
+  TOWER: { sectionType: 'PROCESS', sourceType: 'COAT', paramFields: ['scsExitStripTemp'] },
+  TM: { sectionType: 'PROCESS', sourceType: 'COAT', paramFields: ['tensionBr5Tm', 'stripSpeedTmExit'] },
+  TL: { sectionType: 'PROCESS', sourceType: 'COAT', paramFields: ['tlElongation', 'tensionTlBr7'] },
+  COAT: {
+    sectionType: 'PROCESS',
+    sourceType: 'COAT',
+    paramFields: [
+      'avrCoatingWeightTop', 'stdCoatingWeightTop', 'maxCoatingWeightTop', 'minCoatingWeightTop',
+      'avrCoatingWeightBottom', 'stdCoatingWeightBottom', 'maxCoatingWeightBottom', 'minCoatingWeightBottom',
+      'airKnifePressure', 'airKnifeFlow', 'airKnifeGap', 'stripSpeedTmExit', 'tensionBr8Tm',
+      'tensionTmBr9', 'tensionBr8Br9', 'tmMask', 'tmElongation', 'rollForceOperator', 'rollForceDrive',
+      'motorTorque', 'bendingForce', 'antiCrimpingRollMesh', 'billyRollMesh',
+      'tensionTlBr10Br11', 'tensionBr9toBr10Br11', 'tlFlag', 'tlElongation', 'levelingUnit1Mesh', 'levelingUnit2Mesh',
+      'antiCrossBowUnitMesh', 'tensionBr10Br11toBr12', 'stripSpeedAfp', 'stripTempAfp'
+    ]
+  },
+
+  CXL1: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: ['cxlLength', 'cxlCapacity', 'tensionCxl'] },
+  CXL2: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: ['cxlLength', 'cxlCapacity', 'tensionCxl'] },
+  TR: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: ['coilLength', 'speedExitSection', 'tensionBr9Tr'] },
+  EXC: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: [] },
+  WEIGHT: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: [] }
+}
+
+const PARAM_LABELS = {
+  tensionPorBr1: '开卷张力1#',
+  tensionPorBr2: '开卷张力2#',
+  stripSpeed: '带钢速度',
+  weldStatus: '焊机状态',
+  celLength: '入口活套位置',
+  celCapacity: '入口活套套量',
+  tensionCel: '入口活套张力',
+  celLengthMax: '入口活套最大长度',
+  celLengthMin: '入口活套最小长度',
+  bR4or5toBR6Tension: 'BR4/5到BR6张力',
+  cleaningVoltage: '清洗电压',
+  cleaningCurrent: '清洗电流',
+  alkaliConcentration: '碱液浓度',
+  alkaliTemperature: '碱液温度',
+  phfExitStripTemp: 'PH炉出口温度',
+  potTemperature: '锌锅温度',
+  gasConsumption: '燃气消耗',
+  rtfExitStripTemp: 'RTF炉出口温度',
+  zincPotPower: '锌锅功率',
+  jcsExitStripTemp: 'JCS出口温度',
+  coolingTowerStripTemp: '冷却塔温度',
+  scsExitStripTemp: 'SCS出口温度',
+  tensionBr5Tm: 'BR5-TM张力',
+  stripSpeedTmExit: 'TM出口速度',
+  tmElongation: '光整延伸率',
+  tensionTlBr7: 'TL-BR7张力',
+  tensionTlBr10Br11: 'TL-BR10/11张力',
+  tlElongation: '拉矫延伸率',
+  tlFlag: '拉矫机投用标志',
+  cxlLength: '出口活套位置',
+  cxlCapacity: '出口活套套量',
+  tensionCxl: '出口活套张力',
+  coilLength: '钢卷长度',
+  speedExitSection: '出口段速度',
+  tensionBr9Tr: 'BR9-TR张力',
+  tensionBr8Tm: 'BR8-TM张力',
+  tensionTmBr9: 'TM-BR9张力',
+  tensionBr8Br9: 'BR8-BR9张力',
+  tensionBr9toBr10Br11: 'BR9-BR10/11张力',
+  tensionBr10Br11toBr12: 'BR10/11-BR12张力',
+  avrCoatingWeightTop: '顶部平均涂层重量',
+  stdCoatingWeightTop: '顶部标准涂层重量',
+  maxCoatingWeightTop: '顶部最大涂层重量',
+  minCoatingWeightTop: '顶部最小涂层重量',
+  avrCoatingWeightBottom: '底部平均涂层重量',
+  stdCoatingWeightBottom: '底部标准涂层重量',
+  maxCoatingWeightBottom: '底部最大涂层重量',
+  minCoatingWeightBottom: '底部最小涂层重量',
+  airKnifePressure: '气刀压力',
+  airKnifeFlow: '气刀流量',
+  airKnifeGap: '气刀间隙',
+  tmMask: 'TM掩码',
+  rollForceOperator: '操作侧辊压力',
+  rollForceDrive: '驱动侧辊压力',
+  motorTorque: '电机扭矩',
+  bendingForce: '总弯曲力',
+  antiCrimpingRollMesh: '防卷翘辊网距',
+  billyRollMesh: 'Billy Roll网距',
+  levelingUnit1Mesh: '矫直单元1网距',
+  levelingUnit2Mesh: '矫直单元2网距',
+  antiCrossBowUnitMesh: '防横弯单元网距',
+  stripSpeedAfp: 'AFP段钢带速度',
+  stripTempAfp: 'AFP段钢带温度'
+}
+
+const FIELD_ALIASES = {
+  phfExitStripTemp: ['phFurnaceTemperatureActual', 'phFurnaceTemperature'],
+  rtfExitStripTemp: ['nof1FurnaceTemperatureActual', 'nof1FurnaceTemperatureSet'],
+  jcsExitStripTemp: ['jcsExitStripTemp'],
+  scsExitStripTemp: ['scsExitStripTemp'],
+  potTemperature: ['potTemperature'],
+  zincPotPower: ['zincPotPower'],
+  gasConsumption: ['gasConsumption'],
+  coolingTowerStripTemp: ['coolingTowerTemperature', 'coolingTowerStripTemp'],
+  cleaningVoltage: ['cleaningVoltage'],
+  cleaningCurrent: ['cleaningCurrent'],
+  alkaliConcentration: ['alkaliConcentration'],
+  alkaliTemperature: ['alkaliTemperature']
+}
+
+// 炉火段专用字段（直接使用 appMeasureFurnaceMessage 的真实字段）
+const FURNACE_PARAM_LABELS = {
+  phFurnaceTemperatureActual: 'PH炉实际温度',
+  phFurnaceTemperatureSet: 'PH炉设定温度',
+  nof1FurnaceTemperatureActual: 'NOF1实际温度',
+  nof1FurnaceTemperatureSet: 'NOF1设定温度',
+  nof1FurnaceTemperatureControlOutput: 'NOF1温度控制输出',
+  nof2FurnaceTemperatureActual: 'NOF2实际温度',
+  nof2FurnaceTemperatureSet: 'NOF2设定温度',
+  nof3FurnaceTemperatureActual: 'NOF3实际温度',
+  nof3FurnaceTemperatureSet: 'NOF3设定温度',
+  nof4FurnaceTemperatureActual: 'NOF4实际温度',
+  nof4FurnaceTemperatureSet: 'NOF4设定温度',
+  nof5FurnaceTemperatureActual: 'NOF5实际温度',
+  nof5FurnaceTemperatureSet: 'NOF5设定温度',
+  rtf1FurnaceTemperatureActual: 'RTF1实际温度',
+  rtf1FurnaceTemperatureSet: 'RTF1设定温度',
+  rtf2FurnaceTemperatureActual: 'RTF2实际温度',
+  rtf2FurnaceTemperatureSet: 'RTF2设定温度',
+  sfFurnaceTemperatureActual: 'SF实际温度',
+  sfFurnaceTemperatureSet: 'SF设定温度',
+  tdsFurnaceTemperatureActual: 'TDS实际温度',
+  tdsFurnaceTemperatureSet: 'TDS设定温度',
+  jcf1FurnaceTemperatureActual: 'JCF1实际温度',
+  jcf1FurnaceTemperatureSet: 'JCF1设定温度',
+  jcf2FurnaceTemperatureActual: 'JCF2实际温度',
+  jcf2FurnaceTemperatureSet: 'JCF2设定温度',
+  lbzFurnaceTemperatureActual: 'LBZ实际温度',
+  lbzFurnaceTemperatureSet: 'LBZ设定温度',
+  lthFurnaceTemperatureActual: 'LTH实际温度',
+  lthFurnaceTemperatureSet: 'LTH设定温度'
+}
+
+const FURNACE_FIELD_UNITS = {
+  phFurnaceTemperatureActual: '℃',
+  phFurnaceTemperatureSet: '℃',
+  nof1FurnaceTemperatureActual: '℃',
+  nof1FurnaceTemperatureSet: '℃',
+  nof1FurnaceTemperatureControlOutput: '%',
+  nof2FurnaceTemperatureActual: '℃',
+  nof2FurnaceTemperatureSet: '℃',
+  nof3FurnaceTemperatureActual: '℃',
+  nof3FurnaceTemperatureSet: '℃',
+  nof4FurnaceTemperatureActual: '℃',
+  nof4FurnaceTemperatureSet: '℃',
+  nof5FurnaceTemperatureActual: '℃',
+  nof5FurnaceTemperatureSet: '℃',
+  rtf1FurnaceTemperatureActual: '℃',
+  rtf1FurnaceTemperatureSet: '℃',
+  rtf2FurnaceTemperatureActual: '℃',
+  rtf2FurnaceTemperatureSet: '℃',
+  sfFurnaceTemperatureActual: '℃',
+  sfFurnaceTemperatureSet: '℃',
+  tdsFurnaceTemperatureActual: '℃',
+  tdsFurnaceTemperatureSet: '℃',
+  jcf1FurnaceTemperatureActual: '℃',
+  jcf1FurnaceTemperatureSet: '℃',
+  jcf2FurnaceTemperatureActual: '℃',
+  jcf2FurnaceTemperatureSet: '℃',
+  lbzFurnaceTemperatureActual: '℃',
+  lbzFurnaceTemperatureSet: '℃',
+  lthFurnaceTemperatureActual: '℃',
+  lthFurnaceTemperatureSet: '℃'
+}
+
+export default {
+  name: 'ProductionLine',
+  components: { CurrentTime },
+  computed: {
+    modelNames() {
+      return this.productionLineData.models.map(m => m.name).join('\n')
+    }
+  },
+  data() {
+    return {
+      productionLineData: {
+        name: '',
+        description: '',
+        models: []
+      },
+      scene: null,
+      camera: null,
+      renderer: null,
+      controls: null,
+      models: [],
+      raycaster: new THREE.Raycaster(),
+      mouse: new THREE.Vector2(),
+      targetPosition: null,
+      targetLookAt: null,
+      animationId: null,
+      productionLineGroup: null,
+      connectorsGroup: null,
+      clock: null,
+      flow: {
+        movers: [],
+        pathPoints: [],
+        segments: [],
+        totalLength: 0,
+        progress: 0,
+        speed: 6,
+        curve: null,
+        trackWidth: 1.2
+      },
+      mousePosition: '未检测',
+      mousePositionLocal: '未检测',
+      clickPosition: '未点击',
+      clickPositionLocal: '未点击',
+      cameraPosition: '未初始化',
+      groundPlane: null,
+      productionLineGroupOffset: { x: 0, z: 0 }, // 设备组的偏移量
+
+      // ===== 实时数据相关（与轨迹页面对齐的精简版本） =====
+      socketStatus: {
+        measure: false,
+        matmap: false
+      },
+      // WebSocket 推送的物料映射（包含设备中文名/代号）
+      matMapList: [],
+      // 实时测量数据（按照分段拆分）
+      realtimeData: {
+        entry: null,
+        furnace: null,
+        coat: null,
+        exit: null
+      },
+      // 当前在 3D 场景中选中的设备（通过点击获得）
+      selectedDevicePanel: null // { name, code, matId, data: [{label, value, unit}] }
+    }
+  },
+  methods: {
+    // ======= 实时数据基础工具 =======
+    getRealtimeSourceData(deviceId) {
+      const sourceType = DEVICE_META[deviceId]?.sourceType
+      if (!sourceType) return null
+      if (sourceType === 'ENTRY') return this.realtimeData.entry
+      if (sourceType === 'FURNACE') return this.realtimeData.furnace
+      if (sourceType === 'COAT') return this.realtimeData.coat
+      if (sourceType === 'EXIT') return this.realtimeData.exit
+      return null
+    },
+    getFieldValueWithAlias(source, field) {
+      if (!source) return null
+      if (FIELD_ALIASES[field]) {
+        for (const alias of FIELD_ALIASES[field]) {
+          if (alias in source) return source[alias]
+        }
+      }
+      if (field in source) return source[field]
+      const lower = field.charAt(0).toLowerCase() + field.slice(1)
+      if (lower in source) return source[lower]
+      return null
+    },
+    getFieldUnit(field) {
+      const unitMap = {
+        stripSpeed: 'm/min',
+        stripSpeedTmExit: 'm/min',
+        stripSpeedAfp: 'm/min',
+        celLength: 'm',
+        cxlLength: 'm',
+        celCapacity: '%',
+        cxlCapacity: '%',
+        tensionPorBr1: 'daN',
+        tensionPorBr2: 'daN',
+        tensionBr5Tm: 'daN',
+        tensionTlBr7: 'daN',
+        tensionCxl: 'daN',
+        coilLength: 'm',
+        speedExitSection: 'm/min',
+        tlElongation: '%',
+        tmElongation: '%',
+        cleaningVoltage: 'V',
+        cleaningCurrent: 'A',
+        alkaliConcentration: 'g/L',
+        alkaliTemperature: '℃',
+        phfExitStripTemp: '℃',
+        rtfExitStripTemp: '℃',
+        jcsExitStripTemp: '℃',
+        scsExitStripTemp: '℃',
+        potTemperature: '℃',
+        zincPotPower: 'kW',
+        gasConsumption: 'm³/h'
+      }
+      return unitMap[field] || ''
+    },
+    // 开卷机/活套等需要判断卷号是否匹配
+    matchReel(deviceId) {
+      if (!['POR1', 'POR2', 'ENL1', 'ENL2', 'CXL1', 'CXL2'].includes(deviceId)) return true
+      if (!this.realtimeData.entry) return false
+      const reel = this.realtimeData.entry.payOffReelNumber
+      if ((deviceId === 'POR1' || deviceId === 'ENL1' || deviceId === 'CXL1') && reel === 1) return true
+      if ((deviceId === 'POR2' || deviceId === 'ENL2' || deviceId === 'CXL2') && reel === 2) return true
+      return false
+    },
+    formatValue(value) {
+      if (value === null || value === undefined) return '--'
+      if (typeof value === 'number') return value.toFixed(2)
+      return value
+    },
+    buildDeviceRealtimeData(deviceId) {
+      // 特例：炉火段（FUR1）直接把 appMeasureFurnaceMessage 里的所有关键温度字段完整展示
+      if (deviceId === 'FUR1') {
+        const src = this.realtimeData.furnace
+        if (!src) return []
+        const furnaceFields = [
+          'phFurnaceTemperatureActual', 'phFurnaceTemperatureSet',
+          'nof1FurnaceTemperatureActual', 'nof1FurnaceTemperatureSet', 'nof1FurnaceTemperatureControlOutput',
+          'nof2FurnaceTemperatureActual', 'nof2FurnaceTemperatureSet',
+          'nof3FurnaceTemperatureActual', 'nof3FurnaceTemperatureSet',
+          'nof4FurnaceTemperatureActual', 'nof4FurnaceTemperatureSet',
+          'nof5FurnaceTemperatureActual', 'nof5FurnaceTemperatureSet',
+          'rtf1FurnaceTemperatureActual', 'rtf1FurnaceTemperatureSet',
+          'rtf2FurnaceTemperatureActual', 'rtf2FurnaceTemperatureSet',
+          'sfFurnaceTemperatureActual', 'sfFurnaceTemperatureSet',
+          'tdsFurnaceTemperatureActual', 'tdsFurnaceTemperatureSet',
+          'jcf1FurnaceTemperatureActual', 'jcf1FurnaceTemperatureSet',
+          'jcf2FurnaceTemperatureActual', 'jcf2FurnaceTemperatureSet',
+          'lbzFurnaceTemperatureActual', 'lbzFurnaceTemperatureSet',
+          'lthFurnaceTemperatureActual', 'lthFurnaceTemperatureSet'
+        ]
+        const rows = []
+        furnaceFields.forEach(field => {
+          const v = src[field]
+          if (v === null || v === undefined || v === '') return
+          rows.push({
+            label: FURNACE_PARAM_LABELS[field] || field,
+            value: this.formatValue(v),
+            unit: FURNACE_FIELD_UNITS[field] || '℃'
+          })
+        })
+        return rows
+      }
+
+      const meta = DEVICE_META[deviceId]
+      if (!meta) return []
+      if (!this.matchReel(deviceId)) return []
+      const source = this.getRealtimeSourceData(deviceId)
+      if (!source) return []
+      const rows = []
+      meta.paramFields.forEach(field => {
+        const v = this.getFieldValueWithAlias(source, field)
+        if (v !== null && v !== undefined && v !== '') {
+          rows.push({
+            label: PARAM_LABELS[field] || field,
+            value: this.formatValue(v),
+            unit: this.getFieldUnit(field)
+          })
+        }
+      })
+      return rows
+    },
+    // ======= WebSocket 初始化 & 数据处理 =======
+    initRealtime() {
+      // 测量数据
+      wsManager.connect('track_measure', {
+        onMessage: this.processMeasureData,
+        onOpen: () => {
+          this.socketStatus.measure = true
+          console.log('[ProductLine] track_measure 已连接')
+        },
+        onError: () => {
+          this.socketStatus.measure = false
+          console.warn('[ProductLine] track_measure 连接出错')
+        },
+        onClose: () => {
+          this.socketStatus.measure = false
+          console.log('[ProductLine] track_measure 已关闭')
+        }
+      })
+
+      // 物料映射（包含设备中文名/代号，用来从 3D 设备名反查）
+      wsManager.connect('track_matmap', {
+        onMessage: this.processMatmapData,
+        onOpen: () => {
+          this.socketStatus.matmap = true
+          console.log('[ProductLine] track_matmap 已连接')
+        },
+        onError: () => {
+          this.socketStatus.matmap = false
+          console.warn('[ProductLine] track_matmap 连接出错')
+        },
+        onClose: () => {
+          this.socketStatus.matmap = false
+          console.log('[ProductLine] track_matmap 已关闭')
+        }
+      })
+    },
+    disconnectRealtime() {
+      // 与轨迹页保持一致，统一关闭当前页面建立的连接
+      wsManager.disconnectAll && wsManager.disconnectAll()
+    },
+    processMeasureData(data) {
+      if (data.appMeasureEntryMessage) {
+        this.$set(this.realtimeData, 'entry', data.appMeasureEntryMessage)
+      }
+      if (data.appMeasureFurnaceMessage) {
+        this.$set(this.realtimeData, 'furnace', data.appMeasureFurnaceMessage)
+      }
+      if (data.appMeasureCoatMessage) {
+        this.$set(this.realtimeData, 'coat', data.appMeasureCoatMessage)
+      }
+      if (data.appMeasureExitMessage) {
+        this.$set(this.realtimeData, 'exit', data.appMeasureExitMessage)
+      }
+    },
+    processMatmapData(data) {
+      console.log('[ProductLine] 收到 track_matmap 消息:', data)
+      if (Array.isArray(data)) {
+        this.matMapList = data
+      } else if (data && Array.isArray(data.matMapList)) {
+        this.matMapList = data.matMapList
+      }
+      if (this.matMapList && this.matMapList.length) {
+        console.log(
+          '[ProductLine] matMapList 调试列表, 共',
+          this.matMapList.length,
+          '条:',
+          this.matMapList.map(d => ({
+            cn: d.positionNameCn,
+            en: d.positionNameEn,
+            matId: d.matId
+          }))
+        )
+      } else {
+        console.warn('[ProductLine] matMapList 仍为空，后端可能尚未推送物料映射')
+      }
+    },
+    updateSelectedDeviceFromModel(modelInfo) {
+      if (!modelInfo || !modelInfo.name) {
+        this.selectedDevicePanel = null
+        return
+      }
+      console.log('[ProductLine] 点击 3D 设备:', {
+        modelName: modelInfo.name,
+        deviceCode: modelInfo.deviceCode,
+        rawInfo: modelInfo
+      })
+      // 优先通过 deviceCode（后端设备代号，如 POR1、CLEAN 等）精确匹配
+      let matched = null
+      if (modelInfo.deviceCode) {
+        matched = this.matMapList.find(item => item.positionNameEn === modelInfo.deviceCode)
+        console.log('[ProductLine] 按 deviceCode 匹配结果:', matched)
+      }
+      // 兜底：再尝试用中文名称匹配
+      if (!matched) {
+        matched = this.matMapList.find(item => item.positionNameCn === modelInfo.name)
+        console.log('[ProductLine] 按中文名称匹配结果:', matched)
+      }
+      if (!matched) {
+        console.warn('[ProductLine] 未匹配到设备，对应 3D 设备信息:', modelInfo)
+        this.selectedDevicePanel = {
+          name: modelInfo.name,
+          code: '未匹配到设备',
+          matId: '-',
+          data: []
+        }
+        return
+      }
+      const deviceId = matched.positionNameEn
+      const rows = this.buildDeviceRealtimeData(deviceId)
+      this.selectedDevicePanel = {
+        // 名称以 3D 产线自身命名为准（例如：剪切机），
+        // 避免后端把同一位置命名为“卸卷小车”等带来歧义
+        name: modelInfo.name,
+        code: deviceId || '-',
+        matId: matched.matId || '-',
+        data: rows
+      }
+    },
+    // 调试：如果 WebSocket 没有推送 matMapList，就从接口拉一次打印出来
+    async fetchMatMapOnceForDebug() {
+      try {
+        const res = await getTrackMatPosition()
+        const list = (res && res.data && res.data.matMapList) || []
+        console.log(
+          '[ProductLine] 调试 API getTrackMatPosition 返回 matMapList, 共',
+          list.length,
+          '条:',
+          list.map(d => ({
+            cn: d.positionNameCn,
+            en: d.positionNameEn,
+            matId: d.matId
+          }))
+        )
+        if (!this.matMapList.length && list.length) {
+          this.matMapList = list
+        }
+      } catch (e) {
+        console.error('[ProductLine] 调试拉取 matMapList 失败:', e)
+      }
+    },
+
+    cancelAutoFocus() {
+      // 用户开始手动操作时，取消自动镜头飞行，避免“强行控制视角”
+      this.targetPosition = null
+      this.targetLookAt = null
+    },
+    initThree() {
+      this.scene = new THREE.Scene()
+      this.scene.background = new THREE.Color(0xf0f0f0)
+
+      const container = this.$refs.threeContainer
+      if (!container) return
+
+      const width = container.clientWidth || 1
+      const height = container.clientHeight || 1
+
+      // 初始视角：略微拉近，俯视整条产线
+      this.camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 2000)
+      this.camera.position.set(0, 12, 32)
+      this.camera.lookAt(0, 4, 0)
+
+      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false })
+      this.renderer.setPixelRatio(window.devicePixelRatio || 1)
+      this.renderer.setSize(width, height, false)
+      this.renderer.shadowMap.enabled = true
+      this.renderer.toneMapping = THREE.ACESFilmicToneMapping
+      this.renderer.toneMappingExposure = 1.25
+      container.appendChild(this.renderer.domElement)
+
+      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
+      this.controls.enableDamping = true
+      this.controls.dampingFactor = 0.05
+
+      const ambientLight = new THREE.AmbientLight(0xffffff, 1.1)
+      this.scene.add(ambientLight)
+
+      const hemiLight = new THREE.HemisphereLight(0xffffff, 0x666666, 0.9)
+      hemiLight.position.set(0, 50, 0)
+      this.scene.add(hemiLight)
+
+      const keyLight = new THREE.DirectionalLight(0xffffff, 1.2)
+      keyLight.position.set(30, 40, 20)
+      keyLight.castShadow = true
+      this.scene.add(keyLight)
+
+      const fillLight = new THREE.DirectionalLight(0xffffff, 0.8)
+      fillLight.position.set(-30, 25, -20)
+      this.scene.add(fillLight)
+
+      const rimLight = new THREE.DirectionalLight(0xffffff, 0.6)
+      rimLight.position.set(0, 30, -50)
+      this.scene.add(rimLight)
+
+      const topPoint = new THREE.PointLight(0xffffff, 0.9, 300)
+      topPoint.position.set(0, 35, 0)
+      this.scene.add(topPoint)
+
+      const planeGeometry = new THREE.PlaneGeometry(200, 60)
+      // 水泥地面：使用简单噪声贴图模拟质感
+      const concreteTex = (() => {
+        const canvas = document.createElement('canvas')
+        canvas.width = 512
+        canvas.height = 512
+        const ctx = canvas.getContext('2d')
+        ctx.fillStyle = '#bdbdbd'
+        ctx.fillRect(0, 0, canvas.width, canvas.height)
+        // speckles
+        for (let i = 0; i < 22000; i++) {
+          const x = (Math.random() * canvas.width) | 0
+          const y = (Math.random() * canvas.height) | 0
+          const v = 150 + (Math.random() * 80) | 0
+          const a = 0.08 + Math.random() * 0.12
+          ctx.fillStyle = `rgba(${v},${v},${v},${a})`
+          ctx.fillRect(x, y, 1, 1)
+        }
+        // subtle trowel strokes
+        ctx.globalAlpha = 0.08
+        ctx.strokeStyle = '#9e9e9e'
+        for (let i = 0; i < 18; i++) {
+          ctx.beginPath()
+          const y = 20 + i * 28 + (Math.random() * 10 - 5)
+          ctx.moveTo(0, y)
+          ctx.bezierCurveTo(140, y + (Math.random() * 20 - 10), 320, y + (Math.random() * 20 - 10), 512, y)
+          ctx.stroke()
+        }
+        ctx.globalAlpha = 1
+        const tex = new THREE.CanvasTexture(canvas)
+        tex.wrapS = THREE.RepeatWrapping
+        tex.wrapT = THREE.RepeatWrapping
+        tex.repeat.set(4, 1.5)
+        tex.minFilter = THREE.LinearMipMapLinearFilter
+        tex.magFilter = THREE.LinearFilter
+        tex.generateMipmaps = true
+        tex.anisotropy = 8
+        return tex
+      })()
+
+      const planeMaterial = new THREE.MeshStandardMaterial({
+        // 浅灰蓝水泥
+        color: 0xd9e3ee,
+        map: concreteTex,
+        roughness: 0.95,
+        metalness: 0.0
+      })
+      const plane = new THREE.Mesh(planeGeometry, planeMaterial)
+      plane.rotation.x = -Math.PI / 2
+      plane.position.y = -0.55
+      plane.receiveShadow = true
+      this.scene.add(plane)
+      this.groundPlane = plane // 保存引用用于坐标检测
+
+      // 移除棋盘格网格（GridHelper），保持室内水泥地观感
+
+      // 添加室内感背景：浅灰色内侧立方体作为围墙与顶面
+      const roomSize = { x: 220, y: 80, z: 120 }
+      const roomGeom = new THREE.BoxGeometry(roomSize.x, roomSize.y, roomSize.z)
+      const roomMat = new THREE.MeshStandardMaterial({
+        color: 0xf5f5f5,
+        roughness: 0.9,
+        metalness: 0.0,
+        side: THREE.BackSide // 仅显示内侧
+      })
+      const room = new THREE.Mesh(roomGeom, roomMat)
+      // 轻微抬高，避免与地面重叠产生闪烁（Z-fighting）
+      room.position.set(0, roomSize.y / 2 - 0.45, 0)
+      room.receiveShadow = false
+      room.castShadow = false
+      this.scene.add(room)
+
+      // 工厂内支撑柱（方形，避开产线中轴）
+      const pillarMat = new THREE.MeshStandardMaterial({ color: 0xdadada, roughness: 0.8, metalness: 0.05 })
+      const pillarSize = { x: 1.2, z: 1.2, y: roomSize.y - 2 }
+      // 放置在四角，远离中轴，避免挡视线
+      const pillarPositions = [
+        { x: -90, z: -45 }, { x: 90, z: -45 },
+        { x: -90, z: 45 }, { x: 90, z: 45 }
+      ]
+      pillarPositions.forEach(p => {
+        const geom = new THREE.BoxGeometry(pillarSize.x, pillarSize.y, pillarSize.z)
+        const mesh = new THREE.Mesh(geom, pillarMat)
+        mesh.position.set(p.x, pillarSize.y / 2 - 0.5, p.z)
+        mesh.castShadow = true
+        mesh.receiveShadow = true
+        this.scene.add(mesh)
+      })
+
+      // 轻微雾化，增强室内深度感
+      this.scene.fog = new THREE.Fog(0xf0f0f0, 120, 260)
+    },
+
+    async loadModels() {
+      try {
+        // 使用本地配置替代 API 调用
+        const data = productionLineConfig
+        this.productionLineData = data
+
+        const loader = new GLTFLoader()
+        const productionLineGroup = new THREE.Group()
+        this.productionLineGroup = productionLineGroup
+        this.scene.add(productionLineGroup)
+
+        const defaultConfig = {
+          gapAfter: 3.5,
+          rotateY: 0,
+          yOffset: 0,
+          zOffset: 0
+        }
+
+        const deviceLayoutConfig = {
+          pinch_leveler: {
+            rotateY: Math.PI / 2,
+            gapAfter: 16.0
+          },
+          clean: {
+            zOffset: 0,
+            gapAfter: 10.0
+          }
+        }
+
+        let cursorX = 0
+
+        // 加载设备模型
+        for (let i = 0; i < data.models.length; i++) {
+          const modelInfo = data.models[i]
+          const cfg = { ...defaultConfig, ...(deviceLayoutConfig[modelInfo.id] || {}) }
+
+          try {
+            const gltf = await new Promise((resolve, reject) => {
+              loader.load(modelInfo.file, resolve, undefined, reject)
+            })
+
+            const model = gltf.scene
+            model.userData.isClickable = true
+            model.userData.info = modelInfo
+
+            model.position.set(0, 0, 0)
+
+            if (modelInfo.rotation) model.rotation.set(modelInfo.rotation.x ?? 0, modelInfo.rotation.y ?? 0, modelInfo.rotation.z ?? 0)
+            model.rotation.y += cfg.rotateY
+
+            if (modelInfo.scale) model.scale.set(modelInfo.scale.x ?? 1, modelInfo.scale.y ?? 1, modelInfo.scale.z ?? 1)
+            else model.scale.set(1, 1, 1)
+
+            const box = new THREE.Box3().setFromObject(model)
+            const size = new THREE.Vector3()
+            const center = new THREE.Vector3()
+            box.getSize(size)
+            box.getCenter(center)
+
+            const widthX = Math.max(2.5, size.x)
+            const centerX = cursorX + widthX / 2
+            const y = (modelInfo.position?.y ?? 0) + cfg.yOffset
+            const z = (modelInfo.position?.z ?? 0) + cfg.zOffset
+            const minY = box.min.y
+            model.position.set(centerX - center.x, y - minY, z - center.z)
+
+            model.traverse((obj) => { if (obj.isMesh) { obj.castShadow = true; obj.receiveShadow = true } })
+
+            productionLineGroup.add(model)
+            this.models.push(model)
+            model.userData.info = modelInfo
+
+            const label = this.createLabel(modelInfo.name)
+            label.position.set(centerX, y + 2, z)
+            productionLineGroup.add(label)
+
+            cursorX += widthX + cfg.gapAfter
+          } catch (error) {
+            console.warn(`无法加载模型 ${modelInfo.file}:`, error)
+            continue
+          }
+        }
+
+        const wholeBox = new THREE.Box3().setFromObject(productionLineGroup)
+        const wholeCenter = new THREE.Vector3()
+        wholeBox.getCenter(wholeCenter)
+        productionLineGroup.position.x -= wholeCenter.x
+        productionLineGroup.position.z -= wholeCenter.z
+        // 保存偏移量，用于坐标转换
+        this.productionLineGroupOffset = { x: wholeCenter.x, z: wholeCenter.z }
+
+        // 构建基于节点的轨道
+        this.buildTrackFromNodes()
+
+        this.controls.target.set(0, 0, 0)
+        this.controls.update()
+      } catch (error) {
+        console.error('加载产线数据失败:', error)
+      }
+    },
+
+    createLabel(text, scale = 1.0) {
+      const canvas = document.createElement('canvas')
+      const context = canvas.getContext('2d')
+      canvas.width = 256; canvas.height = 64
+      context.fillStyle = 'rgba(0, 0, 0, 0.7)'; context.fillRect(0, 0, canvas.width, canvas.height)
+      context.fillStyle = 'white'; context.font = '24px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'
+      context.fillText(text, canvas.width / 2, canvas.height / 2)
+      const texture = new THREE.CanvasTexture(canvas)
+      const spriteMaterial = new THREE.SpriteMaterial({ map: texture })
+      const sprite = new THREE.Sprite(spriteMaterial)
+      sprite.scale.set(2 * scale, 0.5 * scale, 1)
+      return sprite
+    },
+
+    getIOPoints(model) {
+      const info = model.userData.info || {}
+      const box = new THREE.Box3().setFromObject(model)
+      const center = new THREE.Vector3()
+      box.getCenter(center)
+      const entryDir = info.io?.entryDir || '+x'
+      const exitDir = info.io?.exitDir || '+x'
+      const entryOffset = info.io?.entryOffset || { x: 0, y: 0, z: 0 }
+      const exitOffset = info.io?.exitOffset || { x: 0, y: 0, z: 0 }
+
+      const facePoint = (dir) => {
+        const dirMap = {
+          '+x': new THREE.Vector3(box.max.x, center.y, center.z),
+          '-x': new THREE.Vector3(box.min.x, center.y, center.z),
+          '+z': new THREE.Vector3(center.x, center.y, box.max.z),
+          '-z': new THREE.Vector3(center.x, center.y, box.min.z)
+        }
+        return dirMap[dir] ? dirMap[dir].clone() : new THREE.Vector3(center.x, center.y, center.z)
+      }
+
+      const entry = facePoint(entryDir).add(new THREE.Vector3(entryOffset.x || 0, entryOffset.y || 0, entryOffset.z || 0))
+      const exit = facePoint(exitDir).add(new THREE.Vector3(exitOffset.x || 0, exitOffset.y || 0, exitOffset.z || 0))
+      const dirVec = (dir) => {
+        const map = { '+x': new THREE.Vector3(1, 0, 0), '-x': new THREE.Vector3(-1, 0, 0), '+z': new THREE.Vector3(0, 0, 1), '-z': new THREE.Vector3(0, 0, -1) }
+        return map[dir] ? map[dir].clone() : new THREE.Vector3(1, 0, 0)
+      }
+
+      return {
+        entry,
+        exit,
+        entryDir: dirVec(entryDir),
+        exitDir: dirVec(exitDir),
+        info
+      }
+    },
+
+    createSmoothConnector(points, width = 1.1, thickness = 0.22) {
+      // 扁平钢带轨道：圆角矩形截面沿曲线挤出
+      if (!points || points.length < 2) return null
+
+      const curve = new THREE.CatmullRomCurve3(points)
+      const steps = Math.max(40, points.length * 20)
+
+      // 圆角矩形截面（在 XY 平面），挤出方向由 extrudePath 决定
+      const w = Math.max(0.1, width)
+      const t = Math.max(0.05, thickness)
+      const r = Math.min(w, t) * 0.35
+
+      const shape = new THREE.Shape()
+      shape.moveTo(-w / 2 + r, -t / 2)
+      shape.lineTo(w / 2 - r, -t / 2)
+      shape.quadraticCurveTo(w / 2, -t / 2, w / 2, -t / 2 + r)
+      shape.lineTo(w / 2, t / 2 - r)
+      shape.quadraticCurveTo(w / 2, t / 2, w / 2 - r, t / 2)
+      shape.lineTo(-w / 2 + r, t / 2)
+      shape.quadraticCurveTo(-w / 2, t / 2, -w / 2, t / 2 - r)
+      shape.lineTo(-w / 2, -t / 2 + r)
+      shape.quadraticCurveTo(-w / 2, -t / 2, -w / 2 + r, -t / 2)
+
+      const geom = new THREE.ExtrudeGeometry(shape, {
+        steps,
+        bevelEnabled: false,
+        extrudePath: curve
+      })
+
+      const mat = new THREE.MeshStandardMaterial({
+        color: 0x6f8fc7, // 更像钢材的浅蓝灰
+        metalness: 0.55,
+        roughness: 0.35
+      })
+      const mesh = new THREE.Mesh(geom, mat)
+      mesh.castShadow = true
+      mesh.receiveShadow = true
+      return mesh
+    },
+
+    buildTrackFromNodes() {
+      if (!this.productionLineGroup) return
+
+      const data = productionLineConfig
+      if (!data.trackNodes || data.trackNodes.length < 2) {
+        console.warn('轨道节点配置不足，至少需要2个节点')
+        return
+      }
+      if (this.connectorsGroup) {
+        this.productionLineGroup.remove(this.connectorsGroup)
+        this.connectorsGroup = null
+      }
+      if (this.flow.movers && this.flow.movers.length) {
+        this.flow.movers.forEach(m => this.productionLineGroup.remove(m))
+        this.flow.movers = []
+      }
+
+      const connectorsGroup = new THREE.Group()
+      const pathPoints = []
+
+      // 构建完整路径：节点 + waypoints（中间路径点）
+      const allPathPoints = []
+
+      for (let i = 0; i < data.trackNodes.length; i++) {
+        const node = data.trackNodes[i]
+        const pos = node.position
+
+        // 添加当前节点
+        const nodePoint = new THREE.Vector3(pos.x, pos.y, pos.z)
+        allPathPoints.push(nodePoint)
+
+        // 如果当前节点有 waypoints，添加这些中间路径点
+        // waypoints 定义从当前节点到下一个节点的中间路径
+        if (node.waypoints && Array.isArray(node.waypoints)) {
+          node.waypoints.forEach(waypoint => {
+            const wp = new THREE.Vector3(waypoint.x, waypoint.y, waypoint.z)
+            allPathPoints.push(wp)
+          })
+        }
+      }
+
+      // 构建平滑轨道（使用所有路径点）
+      const defaultWidth = data.trackNodes[0]?.width || 1.2
+      const trackThickness = data.trackThickness ?? 0.18
+      const trackMesh = this.createSmoothConnector(allPathPoints, defaultWidth, trackThickness)
+      if (trackMesh) {
+        connectorsGroup.add(trackMesh)
+      }
+      // 保存曲线用于“钢带运动”动画
+      this.flow.curve = new THREE.CatmullRomCurve3(allPathPoints)
+      this.flow.totalLength = this.flow.curve.getLength()
+      this.flow.trackWidth = defaultWidth
+      this.flow.trackThickness = trackThickness
+
+      // 为每个节点添加可视化标记
+      data.trackNodes.forEach((node, index) => {
+        const marker = this.createNodeMarker(node, index)
+        if (marker) connectorsGroup.add(marker)
+      })
+
+      // 为waypoints添加可视化标记（可选，用于调试）
+      data.trackNodes.forEach((node, nodeIndex) => {
+        if (node.waypoints && Array.isArray(node.waypoints)) {
+          node.waypoints.forEach((waypoint, wpIndex) => {
+            const wpMarker = this.createWaypointMarker(waypoint, nodeIndex, wpIndex)
+            if (wpMarker) connectorsGroup.add(wpMarker)
+          })
+        }
+      })
+
+      // 设置路径点（用于物料流动）
+      pathPoints.push(...allPathPoints.map(p => p.clone()))
+
+      this.productionLineGroup.add(connectorsGroup)
+      this.connectorsGroup = connectorsGroup
+      this.setupFlow(pathPoints)
+    },
+
+    createNodeMarker(node, index) {
+      // 创建节点标记（红色 sphere）
+      const geometry = new THREE.SphereGeometry(0.15, 8, 8)
+      const material = new THREE.MeshStandardMaterial({
+        color: 0xff0000,
+        emissive: 0x330000,
+        metalness: 0.3,
+        roughness: 0.7
+      })
+      const marker = new THREE.Mesh(geometry, material)
+      const pos = node.position
+      marker.position.set(pos.x, pos.y, pos.z)
+      marker.userData.isNodeMarker = true
+      marker.userData.nodeInfo = node
+      marker.userData.nodeIndex = index
+
+      // 添加标签
+      if (node.name) {
+        const label = this.createLabel(`${index + 1}: ${node.name}`)
+        label.position.set(pos.x, pos.y + 0.5, pos.z)
+        return new THREE.Group().add(marker).add(label)
+      }
+
+      return marker
+    },
+
+    createWaypointMarker(waypoint, nodeIndex, wpIndex) {
+      // 创建waypoint标记（黄色 sphere，稍小一些）
+      const geometry = new THREE.SphereGeometry(0.1, 8, 8)
+      const material = new THREE.MeshStandardMaterial({
+        color: 0xffff00,
+        emissive: 0x333300,
+        metalness: 0.3,
+        roughness: 0.7
+      })
+      const marker = new THREE.Mesh(geometry, material)
+      marker.position.set(waypoint.x, waypoint.y, waypoint.z)
+      marker.userData.isWaypointMarker = true
+      marker.userData.waypointInfo = waypoint
+      marker.userData.nodeIndex = nodeIndex
+      marker.userData.waypointIndex = wpIndex
+
+      // 添加标签
+      const label = this.createLabel(`WP${wpIndex + 1}`, 0.3)
+      label.position.set(waypoint.x, waypoint.y + 0.3, waypoint.z)
+      return new THREE.Group().add(marker).add(label)
+    },
+
+    setupFlow(pathPoints) {
+      this.flow.pathPoints = pathPoints
+      this.flow.segments = []
+      this.flow.progress = 0
+
+      if (!pathPoints || pathPoints.length < 2) return
+
+      // 清理旧的 movers
+      if (this.flow.movers && this.flow.movers.length) {
+        this.flow.movers.forEach(m => this.productionLineGroup?.remove(m))
+      }
+      this.flow.movers = []
+
+      // 从配置读取扁钢参数
+      const cfg = productionLineConfig.steelFlow || {}
+      const count = Math.max(1, cfg.count || 1)
+      const moverLen = cfg.length ?? 3.2
+      const moverThk = cfg.thickness ?? 0.10
+      const moverWid = Math.max(0.4, (this.flow.trackWidth || 1.2) * (cfg.widthRatio ?? 0.85))
+      this.flow.speed = cfg.speed ?? this.flow.speed
+      // 抬高钢带，避免与轨道穿模（按轨道厚度 + 钢带厚度）
+      const lift = ((this.flow.trackThickness ?? 0.18) / 2) + (moverThk / 2) + 0.03
+      this.flow.steelLift = lift
+
+      // 如果已有曲线（节点轨道），使用曲线长度作为总长度
+      if (this.flow.curve) {
+        this.flow.totalLength = this.flow.curve.getLength()
+      } else {
+        this.flow.totalLength = 0
+      }
+
+      for (let i = 0; i < pathPoints.length - 1; i++) {
+        const start = pathPoints[i]
+        const end = pathPoints[i + 1]
+        const length = start.distanceTo(end)
+        this.flow.segments.push({ start, end, length })
+        if (!this.flow.curve) this.flow.totalLength += length
+      }
+
+      // 生成多条“扁平钢带片”
+      const geom = new THREE.BoxGeometry(moverLen, moverThk, moverWid)
+      for (let i = 0; i < count; i++) {
+        const mat = new THREE.MeshStandardMaterial({
+          color: 0xb0b6bf,
+          metalness: 0.82,
+          roughness: 0.22,
+          emissive: 0x111111,
+          emissiveIntensity: 0.25
+        })
+        const mover = new THREE.Mesh(geom, mat)
+        mover.castShadow = true
+        mover.receiveShadow = true
+        this.productionLineGroup.add(mover)
+        this.flow.movers.push(mover)
+      }
+    },
+
+    focusOnObject(targetObject) {
+      const box = new THREE.Box3().setFromObject(targetObject)
+      const center = new THREE.Vector3()
+      box.getCenter(center)
+      const size = new THREE.Vector3()
+      box.getSize(size)
+
+      const maxDim = Math.max(size.x, size.y, size.z)
+      const cameraDistance = maxDim * 2.0
+
+      const worldCenter = center
+
+      const offset = new THREE.Vector3(0, maxDim * 0.4, cameraDistance)
+      this.targetPosition = worldCenter.clone().add(offset)
+      this.targetLookAt = worldCenter
+    },
+
+    getWorldPositionFromMouse(event) {
+      const container = this.$refs.threeContainer
+      if (!container || !this.camera || !this.groundPlane) return null
+
+      const rect = container.getBoundingClientRect()
+      const mouse = new THREE.Vector2()
+      mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
+      mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1
+
+      const raycaster = new THREE.Raycaster()
+      raycaster.setFromCamera(mouse, this.camera)
+
+      const intersects = raycaster.intersectObject(this.groundPlane)
+      if (intersects.length > 0) {
+        return intersects[0].point
+      }
+      return null
+    },
+
+    formatPosition(pos, showLocal = false) {
+      if (!pos) return '未检测'
+      if (showLocal) {
+        // 显示相对于设备组的本地坐标（配置文件中使用的坐标）
+        const localX = pos.x + this.productionLineGroupOffset.x
+        const localZ = pos.z + this.productionLineGroupOffset.z
+        return `x: ${localX.toFixed(2)}, y: ${pos.y.toFixed(2)}, z: ${localZ.toFixed(2)}`
+      }
+      // 显示世界坐标
+      return `x: ${pos.x.toFixed(2)}, y: ${pos.y.toFixed(2)}, z: ${pos.z.toFixed(2)}`
+    },
+
+    onCanvasMouseMove(event) {
+      const worldPos = this.getWorldPositionFromMouse(event)
+      if (worldPos) {
+        this.mousePosition = this.formatPosition(worldPos, false)
+        this.mousePositionLocal = this.formatPosition(worldPos, true)
+      }
+    },
+
+    onCanvasClick(event) {
+      const container = this.$refs.threeContainer
+      const rect = container.getBoundingClientRect()
+      this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
+      this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1
+
+      // 获取点击位置的世界坐标
+      const worldPos = this.getWorldPositionFromMouse(event)
+      if (worldPos) {
+        this.clickPosition = this.formatPosition(worldPos, false)
+        this.clickPositionLocal = this.formatPosition(worldPos, true)
+        // 在控制台输出本地坐标（配置文件使用的坐标），方便复制
+        const localX = worldPos.x + this.productionLineGroupOffset.x
+        const localZ = worldPos.z + this.productionLineGroupOffset.z
+        console.log(`点击位置坐标（配置文件用）: { x: ${localX.toFixed(2)}, y: ${worldPos.y.toFixed(2)}, z: ${localZ.toFixed(2)} }`)
+      }
+
+      this.raycaster.setFromCamera(this.mouse, this.camera)
+
+      const intersects = this.raycaster.intersectObjects(this.models, true)
+
+      if (intersects.length > 0) {
+        let clickedObject = intersects[0].object
+        while (clickedObject && !clickedObject.userData.isClickable) {
+          clickedObject = clickedObject.parent
+        }
+        if (clickedObject) {
+          console.log('Clicked on:', clickedObject.userData.info.name)
+          // 聚焦镜头
+          this.focusOnObject(clickedObject)
+          // 同步更新左上角设备实时数据面板
+          this.updateSelectedDeviceFromModel(clickedObject.userData.info)
+        }
+      }
+    },
+
+    animate() {
+      this.animationId = requestAnimationFrame(this.animate)
+
+      const delta = this.clock ? this.clock.getDelta() : 0
+      if (this.flow.movers && this.flow.movers.length && this.flow.totalLength > 0) {
+        this.flow.progress = (this.flow.progress + this.flow.speed * delta) % this.flow.totalLength
+        if (this.flow.curve) {
+          // 沿曲线运动 + 自动朝向切线（多条扁钢等间距分布）
+          const baseU = this.flow.progress / this.flow.totalLength
+          const qAxis = new THREE.Vector3(1, 0, 0)
+          const now = performance.now()
+          const count = this.flow.movers.length
+          for (let i = 0; i < count; i++) {
+            const u = (baseU + i / count) % 1
+            const p = this.flow.curve.getPointAt(u)
+            const tangent = this.flow.curve.getTangentAt(u).normalize()
+            const q = new THREE.Quaternion().setFromUnitVectors(qAxis, tangent)
+            const mover = this.flow.movers[i]
+            mover.position.copy(p)
+            mover.position.y += (this.flow.steelLift || 0)
+            mover.quaternion.copy(q)
+            // 轻微“滚动高亮”增强运动感（错相）
+            mover.material.emissiveIntensity = 0.18 + 0.12 * Math.sin(now * 0.006 + i)
+          }
+        } else if (this.flow.segments.length > 0) {
+          // 回退：线段插值
+          let remain = this.flow.progress
+          for (let i = 0; i < this.flow.segments.length; i++) {
+            const seg = this.flow.segments[i]
+            if (remain <= seg.length) {
+              const t = seg.length === 0 ? 0 : remain / seg.length
+              this.flow.movers[0].position.lerpVectors(seg.start, seg.end, t)
+              break
+            }
+            remain -= seg.length
+          }
+        }
+      }
+
+      if (this.targetPosition && this.targetLookAt) {
+        const alpha = 0.05
+        this.camera.position.lerp(this.targetPosition, alpha)
+        this.controls.target.lerp(this.targetLookAt, alpha)
+
+        if (this.camera.position.distanceTo(this.targetPosition) < 0.1) {
+          this.targetPosition = null
+          this.targetLookAt = null
+        }
+      }
+
+      // 更新相机位置显示
+      if (this.camera) {
+        const pos = this.camera.position
+        this.cameraPosition = `x: ${pos.x.toFixed(2)}, y: ${pos.y.toFixed(2)}, z: ${pos.z.toFixed(2)}`
+      }
+
+      this.controls.update()
+      this.renderer.render(this.scene, this.camera)
+    },
+
+    handleResize() {
+      const container = this.$refs.threeContainer
+      if (container && this.camera && this.renderer) {
+        const width = container.clientWidth || 1
+        const height = container.clientHeight || 1
+        this.camera.aspect = width / height
+        this.camera.updateProjectionMatrix()
+        this.renderer.setSize(width, height, false)
+      }
+    }
+  },
+  async mounted() {
+    this.initThree()
+    await this.loadModels()
+    this.clock = new THREE.Clock()
+    this.animate = this.animate.bind(this)
+    this.animate()
+    // 初始化实时数据 WebSocket（测量 + 物料映射）
+    this.initRealtime()
+    // 若 WebSocket 短时间内无物料映射推送，从接口拉一次做调试
+    setTimeout(() => {
+      if (!this.matMapList.length) {
+        this.fetchMatMapOnceForDebug()
+      }
+    }, 2000)
+
+    // 确保窗口大小正确
+    this.$nextTick(() => {
+      this.handleResize()
+      window.addEventListener('resize', this.handleResize)
+    })
+
+    this.$refs.threeContainer.addEventListener('click', this.onCanvasClick)
+    this.$refs.threeContainer.addEventListener('mousemove', this.onCanvasMouseMove)
+
+    // OrbitControls 开始交互（拖拽/缩放/平移）时，取消自动聚焦动画
+    if (this.controls) {
+      this.controls.addEventListener('start', this.cancelAutoFocus)
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+    this.disconnectRealtime()
+    const container = this.$refs.threeContainer
+    if (container) {
+      container.removeEventListener('click', this.onCanvasClick)
+      container.removeEventListener('mousemove', this.onCanvasMouseMove)
+    }
+    if (this.controls) {
+      this.controls.removeEventListener('start', this.cancelAutoFocus)
+    }
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId)
+    }
+    if (this.renderer) {
+      this.renderer.dispose()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.production-line-page { padding: 20px; height: 100%; display: flex; flex-direction: column; }
+.page-title { font-size: 28px; margin-bottom: 20px; color: #2c3e50; }
+.viewer-container { flex: 1; min-height: 500px; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); overflow: hidden; margin-bottom: 20px; position: relative; }
+.three-container { position: absolute; inset: 0; width: 100%; height: 100%; }
+.time-panel { position: absolute; top: 18px; right: 18px; z-index: 110; }
+.device-info-panel {
+  position: absolute;
+  top: 18px;
+  left: 18px;
+  z-index: 120;
+  min-width: 280px;
+  max-width: 360px;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
+  backdrop-filter: blur(10px);
+  padding: 12px 14px 10px;
+  font-family: 'SF Mono', 'Courier New', monospace;
+}
+.device-info-header {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  padding-bottom: 6px;
+  margin-bottom: 8px;
+}
+.device-main-name {
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+.device-sub-info {
+  margin-top: 4px;
+  font-size: 11px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  opacity: 0.85;
+}
+.device-code,
+.device-mat {
+  white-space: nowrap;
+}
+.device-info-body {
+  max-height: 220px;
+  overflow-y: auto;
+}
+.device-info-empty {
+  font-size: 12px;
+  color: #ddd;
+  text-align: center;
+  padding: 12px 4px 6px;
+}
+.device-info-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: 12px;
+  row-gap: 2px;
+}
+.device-info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.device-info-label {
+  color: #b0bec5;
+  margin-right: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.device-info-value {
+  color: #ffd54f;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.device-info-unit {
+  color: #cfd8dc;
+  font-weight: 400;
+}
+.coordinate-panel { position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.75); color: white; padding: 12px 16px; border-radius: 6px; font-family: 'Courier New', monospace; font-size: 12px; z-index: 100; min-width: 280px; backdrop-filter: blur(4px); }
+.coord-item { margin-bottom: 8px; display: flex; align-items: center; }
+.coord-item:last-child { margin-bottom: 0; }
+.coord-label { color: #aaa; margin-right: 8px; min-width: 80px; }
+.coord-value { color: #4CAF50; font-weight: bold; }
+.coord-hint { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.2); color: #aaa; font-size: 11px; }
+.description-panel { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
+.description-panel h2 { color: #2c3e50; margin-bottom: 15px; font-size: 22px; }
+.description-content { color: #555; line-height: 1.8; }
+.description-content pre { white-space: pre-wrap; font-family: 'Avenir', Helvetica, Arial, sans-serif; margin: 0; }
+.models-panel { margin-top: 16px; }
+.models-panel h3 { margin: 0 0 8px; font-size: 16px; color: #2c3e50; }
+.models-content { color: #555; line-height: 1.6; }
+.models-content pre { white-space: pre-wrap; font-family: 'Avenir', Helvetica, Arial, sans-serif; margin: 0; }
+</style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cd8391c..687eb0f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,6 +83,9 @@ importers:
       splitpanes:
         specifier: 2.4.1
         version: 2.4.1
+      three:
+        specifier: ^0.158.0
+        version: 0.158.0
       vue:
         specifier: 2.6.12
         version: 2.6.12
@@ -14235,6 +14238,10 @@ packages:
       webpack: 4.47.0
     dev: true
 
+  /three@0.158.0:
+    resolution: {integrity: sha512-TALj4EOpdDPF1henk2Q+s17K61uEAAWQ7TJB68nr7FKxqwyDr3msOt5IWdbGm4TaWKjrtWS8DJJWe9JnvsWOhQ==}
+    dev: false
+
   /three@0.180.0:
     resolution: {integrity: sha512-o+qycAMZrh+TsE01GqWUxUIKR1AL0S8pq7zDkYOQw8GqfX8b8VoCKYUoHbhiX5j+7hr8XsuHDVU6+gkQJQKg9w==}
     dev: false