diff --git a/server/app.js b/server/app.js
index 90f1b11..e1b2314 100644
--- a/server/app.js
+++ b/server/app.js
@@ -813,7 +813,8 @@ app.get('/api/screens', async (req, res) => {
     { id: 2, name: '订单大屏', path: '/dashboard/order', status: 'stopped', createTime: '2026-05-11 14:30:00' },
     { id: 3, name: '成本大屏', path: '/dashboard/cost', status: 'running', createTime: '2026-05-12 09:00:00' },
     { id: 4, name: '能源大屏', path: '/dashboard/energy', status: 'running', createTime: '2026-05-13 11:00:00' },
-    { id: 5, name: '酸轧数据大屏', path: '/dashboard/acid-rolling', status: 'running', createTime: '2026-05-14 08:00:00' }
+    { id: 5, name: '酸轧数据大屏', path: '/dashboard/acid-rolling', status: 'running', createTime: '2026-05-14 08:00:00' },
+    { id: 6, name: '异常钢卷大屏', path: '/abnormal-coil', status: 'running', createTime: '2026-06-03 10:00:00' }
   ]
   sendResponse(res, screens)
 })
@@ -849,7 +850,8 @@ const mockMenuList = [
     { id: 25, path: 'acid-rolling', name: 'AcidRolling', component: 'views/screens/acid-rolling/index.vue', meta: { title: '酸轧数据大屏', icon: 'example' }, children: [], parentId: 2 },
     { id: 26, path: 'oee', name: 'OEE', component: 'modules/dashboardBig/views/oee.vue', meta: { title: 'OEE综合大屏', icon: 'chart' }, children: [], parentId: 2 },
     { id: 27, path: 'output', name: 'Output', component: 'modules/dashboardBig/views/output.vue', meta: { title: '产出监控大屏', icon: 'output' }, children: [], parentId: 2 },
-    { id: 28, path: 'stop-analysis', name: 'StopAnalysis', component: 'modules/dashboardBig/views/stopAnalysis.vue', meta: { title: '停机分析大屏', icon: 'stop' }, children: [], parentId: 2 }
+    { id: 28, path: 'stop-analysis', name: 'StopAnalysis', component: 'modules/dashboardBig/views/stopAnalysis.vue', meta: { title: '停机分析大屏', icon: 'stop' }, children: [], parentId: 2 },
+    { id: 29, path: 'abnormal-coil', name: 'AbnormalCoil', component: 'views/screens/abnormal-coil/index.vue', meta: { title: '异常钢卷大屏', icon: 'example' }, children: [], parentId: 2 }
   ], parentId: 0 },
   { id: 3, path: '/screen-manage', name: 'ScreenManage', component: '', meta: { title: '大屏管理', icon: 'pie-chart' }, children: [
     { id: 31, path: '', name: 'ScreenList', component: 'views/screens/list.vue', meta: { title: '大屏列表', icon: 'list' }, children: [], parentId: 3 },
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 0b8e684..90875bf 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -46,7 +46,8 @@ const iconMap = {
   'output': PieChart,
   'stop': Bell,
   'sales': Coin,
-  'heatmap': Monitor
+  'heatmap': Monitor,
+  'warning': Bell
 }
 
 const getIcon = (iconName) => {
@@ -63,6 +64,7 @@ const menuItems = [
   { path: '/dashboard/output', meta: { title: '产出监控大屏', icon: 'output' } },
   { path: '/dashboard/stop-analysis', meta: { title: '停机分析大屏', icon: 'stop' } },
   { path: '/dashboard/acid-rolling', meta: { title: '酸轧数据大屏', icon: 'example' } },
+  { path: '/scrap-coil', meta: { title: '次品钢卷大屏', icon: 'warning' } },
   { path: '/warehouse-overview', meta: { title: '库区总览大屏', icon: 'example' } },
   { path: '/wip', meta: { title: 'WIP在产大屏', icon: 'monitor' } }
 ]
diff --git a/src/router/index.js b/src/router/index.js
index 3812f50..67c617f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -79,6 +79,12 @@ export const constantRoutes = [
     name: 'SalesHeatmap',
     component: () => import('@/views/screens/sales-heatmap/index.vue'),
     meta: { title: '销售热力地图大屏' }
+  },
+  {
+    path: '/scrap-coil',
+    name: 'ScrapCoil',
+    component: () => import('@/views/screens/scrap-coil/index.vue'),
+    meta: { title: '次品钢卷大屏' }
   }
 ]
 
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index 1111cf7..2326790 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -57,7 +57,8 @@ function loadComponent(componentPath) {
     'modules/dashboardBig/views/oee': () => import('@/modules/dashboardBig/views/oee.vue'),
     'modules/dashboardBig/views/output': () => import('@/modules/dashboardBig/views/output.vue'),
     'modules/dashboardBig/views/stopAnalysis': () => import('@/modules/dashboardBig/views/stopAnalysis.vue'),
-    'screens/acid-rolling/index': () => import('@/views/screens/acid-rolling/index.vue')
+    'screens/acid-rolling/index': () => import('@/views/screens/acid-rolling/index.vue'),
+    'screens/scrap-coil/index': () => import('@/views/screens/scrap-coil/index.vue')
   }
   return componentMap[path] || (() => import('@/views/screens/acid-rolling/index.vue'))
 }
diff --git a/src/views/screens/scrap-coil/index.vue b/src/views/screens/scrap-coil/index.vue
new file mode 100644
index 0000000..b3904d6
--- /dev/null
+++ b/src/views/screens/scrap-coil/index.vue
@@ -0,0 +1,1048 @@
+<template>
+  <div class="scrap-coil-screen">
+    <!-- 全屏动态背景 -->
+    <div class="dynamic-bg">
+      <div class="grid-container">
+        <div class="grid-lines horizontal"></div>
+        <div class="grid-lines vertical"></div>
+      </div>
+      <div class="scan-laser">
+        <div class="laser-beam"></div>
+        <div class="laser-glow"></div>
+      </div>
+      <div class="particles-container">
+        <div v-for="i in 20" :key="i" class="particle" :style="getParticleStyle(i)"></div>
+      </div>
+      <div class="glow-globe globe-1"></div>
+      <div class="glow-globe globe-2"></div>
+      <div class="glow-globe globe-3"></div>
+    </div>
+
+    <!-- 四角装饰 -->
+    <div class="corner-decor corner-tl"></div>
+    <div class="corner-decor corner-tr"></div>
+    <div class="corner-decor corner-bl"></div>
+    <div class="corner-decor corner-br"></div>
+    <div class="side-light side-light-left"></div>
+    <div class="side-light side-light-right"></div>
+
+    <div class="scale-wrapper" :style="scaleWrapperStyle">
+      <div class="screen-content">
+        <!-- 头部标题 -->
+        <header class="screen-header">
+          <dv-border-box-1 class="title-border">
+            <div class="title-box">
+              <span class="title-icon">
+                <svg viewBox="0 0 24 24" width="22" height="22" color="#f0ad4e">
+                  <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
+                  <circle cx="12" cy="12" r="5" fill="none" stroke="currentColor" stroke-width="0.5" opacity="0.15"/>
+                  <path d="M12,12 L12,3 A9,9 0 0,1 21,12 Z" fill="currentColor" opacity="0.2">
+                    <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="3s" repeatCount="indefinite"/>
+                  </path>
+                  <circle cx="12" cy="12" r="1.5" fill="#f0ad4e" opacity="0.9"/>
+                  <circle cx="12" cy="12" r="3" fill="none" stroke="#f0ad4e" stroke-width="0.5" opacity="0.3">
+                    <animate attributeName="r" values="3;6;3" dur="2s" repeatCount="indefinite"/>
+                    <animate attributeName="opacity" values="0.3;0;0.3" dur="2s" repeatCount="indefinite"/>
+                  </circle>
+                </svg>
+              </span>
+              <h1 class="screen-title">次品钢卷大屏</h1>
+              <span class="subtitle">Scrap Coil Dashboard</span>
+              <span class="live-indicator">
+                <span class="live-dot"></span>
+                <span class="live-text">实时</span>
+              </span>
+              <span class="clock-text">{{ currentDate }}</span>
+              <div class="time-filter">
+                <span
+                  class="filter-btn"
+                  :class="{ active: timeRange === 'day' }"
+                  @click="timeRange = 'day'; fetchData()"
+                >本日</span>
+                <span
+                  class="filter-btn"
+                  :class="{ active: timeRange === 'week' }"
+                  @click="timeRange = 'week'; fetchData()"
+                >本周</span>
+                <span
+                  class="filter-btn"
+                  :class="{ active: timeRange === 'month' }"
+                  @click="timeRange = 'month'; fetchData()"
+                >本月</span>
+              </div>
+            </div>
+          </dv-border-box-1>
+        </header>
+
+        <!-- 主内容 -->
+        <main class="screen-body">
+          <!-- KPI 行 -->
+          <div class="kpi-row">
+            <div class="kpi-card" v-for="k in kpiList" :key="k.label">
+              <div class="kpi-label">{{ k.label }}</div>
+              <div class="kpi-value" :style="{ color: k.color }">{{ k.value }}</div>
+              <div class="kpi-unit">{{ k.unit }}</div>
+            </div>
+          </div>
+
+          <!-- 图表行 -->
+          <dv-border-box-8 :reverse="true" class="charts-container">
+            <div class="charts-row">
+              <dv-border-box-8 :reverse="true" class="chart-panel">
+                <div class="chart-inner-wrap">
+                  <div class="chart-inner">
+                    <div class="panel-header">
+                      <span class="panel-dot"></span>
+                      <span class="panel-title">品质状态分布</span>
+                    </div>
+                    <div class="chart-body">
+                      <dv-active-ring-chart :config="qualityRingConfig" style="width:100%;height:100%" />
+                    </div>
+                  </div>
+                </div>
+              </dv-border-box-8>
+              <dv-border-box-8 :reverse="true" class="chart-panel chart-panel-wide">
+                <div class="chart-inner-wrap">
+                  <div class="chart-inner">
+                    <div class="panel-header">
+                      <span class="panel-dot"></span>
+                      <span class="panel-title">各工序次品分布</span>
+                    </div>
+                    <div ref="processBarRef" class="chart-body chart-body-bar"></div>
+                  </div>
+                </div>
+              </dv-border-box-8>
+            </div>
+          </dv-border-box-8>
+
+          <!-- 次品钢卷列表 -->
+          <dv-border-box-8 :reverse="true" class="table-container">
+            <div class="table-wrap">
+              <div class="panel-header">
+                <span class="panel-dot"></span>
+                <span class="panel-title">次品钢卷明细</span>
+                <span class="panel-count">共 {{ scrapList.length }} 卷</span>
+              </div>
+              <div
+                class="table-scroll"
+                ref="tableScrollRef"
+                @mousedown="onDragStart"
+              >
+                <table class="scrap-table">
+                  <thead>
+                    <tr>
+                      <th>钢卷号</th>
+                      <th>产品名称</th>
+                      <th>规格</th>
+                      <th>重量(kg)</th>
+                      <th>品质</th>
+                      <th>时间</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="(item, i) in scrapList" :key="i" @click="showDetail(item, i)">
+                      <td class="col-coil-no">{{ item.currentCoilNo || '-' }}</td>
+                      <td>{{ item.itemName || '-' }}</td>
+                      <td class="col-spec">{{ item.specification || '-' }}</td>
+                      <td class="col-weight">{{ item.netWeight || '-' }}</td>
+                      <td>
+                        <span class="quality-badge" :class="qualityClass(item.qualityStatus)">{{ item.qualityStatus || '-' }}</span>
+                      </td>
+                      <td class="col-time">{{ formatTime(item.createTime) }}</td>
+                    </tr>
+                    <tr v-if="scrapList.length === 0">
+                      <td colspan="6" class="list-empty">暂无数据</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </dv-border-box-8>
+
+          <!-- 详情弹窗 -->
+          <div v-if="detailItem" class="detail-overlay" @click.self="closeDetail">
+            <div class="detail-panel">
+              <div class="detail-header">
+                <span class="detail-header-dot"></span>
+                <span>钢卷详情</span>
+                <span class="detail-close" @click="closeDetail">✕</span>
+              </div>
+              <div class="detail-body">
+                <div class="detail-row">
+                  <span class="detail-label">钢卷号</span>
+                  <span class="detail-value code">{{ detailItem.currentCoilNo || '-' }}</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">产品名称</span>
+                  <span class="detail-value">{{ detailItem.itemName || '-' }}</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">材质</span>
+                  <span class="detail-value">{{ detailItem.material || '-' }}</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">规格</span>
+                  <span class="detail-value">{{ detailItem.specification || '-' }}</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">重量</span>
+                  <span class="detail-value code">{{ detailItem.netWeight || '-' }} kg</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">品质状态</span>
+                  <span class="detail-value">
+                    <span class="quality-badge" :class="qualityClass(detailItem.qualityStatus)">{{ detailItem.qualityStatus || '-' }}</span>
+                  </span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">状态</span>
+                  <span class="detail-value">{{ statusLabel(detailItem.status) }}</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">创建时间</span>
+                  <span class="detail-value code">{{ formatTime(detailItem.createTime) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </main>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { listMaterialCoil } from '@/api/wip'
+
+const currentDate = ref('')
+const scaleRatio = ref(1)
+const timeRange = ref('day')
+const scrapList = ref([])
+const loading = ref(false)
+let timeInterval = null
+let dataInterval = null
+
+// KPI 数据
+const kpiList = ref([
+  { label: '次品总数', value: 0, unit: '卷', color: '#f0ad4e' },
+  { label: '待收卷', value: 0, unit: '卷', color: '#ff6b6b' },
+  { label: '已收卷', value: 0, unit: '卷', color: '#00ff88' },
+  { label: '总重量', value: '0', unit: 'kg', color: '#00d4ff' }
+])
+
+const chartColors = ['#f0ad4e', '#ff6b6b', '#7c63ff', '#00d4ff', '#00ff88', '#ff85c0']
+
+// 图表 refs
+const processBarRef = ref(null)
+let processBarChart = null
+
+// 品质状态环形图（假数据）
+const qualityRingConfig = computed(() => ({
+  data: [
+    { name: '合格', value: 58 },
+    { name: '次品', value: 28 },
+    { name: '待判定', value: 14 }
+  ],
+  color: chartColors,
+  radius: '50%',
+  activeRadius: '58%',
+  lineWidth: 18,
+  activeTimeGap: 3000,
+  digitalFlopStyle: { fontSize: 12, fill: '#f0ad4e' },
+  digitalFlopToFixed: 0,
+  showOriginValue: true,
+  numToFixed: 0,
+  textColor: 'rgba(255,255,255,0.7)'
+}))
+
+const handleResize = () => {
+  processBarChart?.resize()
+}
+
+// 工序分布柱状图（假数据）
+const updateProcessBar = () => {
+  if (!processBarChart) return
+  const mockData = [
+    { name: '酸轧', count: 45 },
+    { name: '连退', count: 32 },
+    { name: '镀锌', count: 28 },
+    { name: '精整', count: 21 },
+    { name: '冷轧', count: 15 },
+    { name: '热轧', count: 12 },
+    { name: '退火', count: 8 },
+    { name: '酸洗', count: 6 }
+  ]
+  processBarChart.setOption({
+    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, backgroundColor: 'rgba(10,20,40,0.9)', borderColor: '#1e3a5f', textStyle: { color: '#fff' } },
+    grid: { left: 10, right: 20, top: 8, bottom: 20, containLabel: true },
+    xAxis: { type: 'category', data: mockData.map(d => d.name), axisLabel: { color: 'rgba(255,255,255,0.6)', fontSize: 10, interval: 0, rotate: 20 }, axisLine: { lineStyle: { color: 'rgba(0,212,255,0.1)' } }, axisTick: { show: false } },
+    yAxis: { type: 'value', splitLine: { lineStyle: { color: 'rgba(0,212,255,0.08)' } }, axisLabel: { color: 'rgba(255,255,255,0.5)', fontSize: 10 } },
+    series: [{
+      type: 'bar',
+      barWidth: 18,
+      data: mockData.map((d, i) => ({
+        value: d.count,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: chartColors[i % chartColors.length] },
+            { offset: 1, color: chartColors[(i + 1) % chartColors.length] }
+          ]),
+          borderRadius: [4, 4, 0, 0]
+        }
+      })),
+      label: {
+        show: true,
+        position: 'top',
+        color: 'rgba(255,255,255,0.6)',
+        fontSize: 10,
+        formatter: (p) => p.value > 0 ? p.value : ''
+      }
+    }]
+  })
+}
+
+// 初始化图表
+const initCharts = () => {
+  if (processBarRef.value && !processBarChart) {
+    processBarChart = echarts.init(processBarRef.value, null, { renderer: 'canvas' })
+    updateProcessBar()
+  }
+}
+
+// 表格轮播
+const tableScrollRef = ref(null)
+let carouselRafId = null
+
+const startCarousel = () => {
+  const el = tableScrollRef.value
+  if (!el) return
+  pauseCarousel()
+  const step = () => {
+    const maxScroll = el.scrollHeight - el.clientHeight
+    if (maxScroll > 0) {
+      if (el.scrollTop >= maxScroll - 1) {
+        el.scrollTop = 0
+      } else {
+        el.scrollTop += Math.min(20 / 60, maxScroll - el.scrollTop)
+      }
+    }
+    carouselRafId = requestAnimationFrame(step)
+  }
+  carouselRafId = requestAnimationFrame(step)
+}
+
+const pauseCarousel = () => {
+  if (carouselRafId) {
+    cancelAnimationFrame(carouselRafId)
+    carouselRafId = null
+  }
+}
+
+// 拖拽滚动
+let dragActive = false
+let dragStartY = 0
+let dragStartScroll = 0
+let dragClickOnly = true
+let resumeTimer = null
+
+const onDragStart = (e) => {
+  const el = tableScrollRef.value
+  if (!el) return
+  pauseCarousel()
+  if (resumeTimer) { clearTimeout(resumeTimer); resumeTimer = null }
+  dragActive = true
+  dragClickOnly = true
+  dragStartY = e.clientY
+  dragStartScroll = el.scrollTop
+  document.addEventListener('mousemove', onDragMove)
+  document.addEventListener('mouseup', onDragEnd)
+}
+
+const onDragMove = (e) => {
+  if (!dragActive) return
+  const el = tableScrollRef.value
+  if (!el) return
+  const dy = e.clientY - dragStartY
+  if (Math.abs(dy) > 5) dragClickOnly = false
+  el.scrollTop = Math.max(0, Math.min(
+    el.scrollHeight - el.clientHeight,
+    dragStartScroll - dy
+  ))
+}
+
+const onDragEnd = () => {
+  dragActive = false
+  document.removeEventListener('mousemove', onDragMove)
+  document.removeEventListener('mouseup', onDragEnd)
+  resumeTimer = setTimeout(() => { startCarousel() }, 4000)
+}
+
+// 品质状态 CSS 类
+const qualityClass = (status) => {
+  if (!status) return 'qlty-unknown'
+  if (['合格', 'A', '1', '一级品'].includes(status)) return 'qlty-ok'
+  if (['不合格', '次品', 'C'].includes(status)) return 'qlty-bad'
+  if (['B', '待判定'].includes(status)) return 'qlty-pending'
+  return 'qlty-unknown'
+}
+
+// 状态文本
+const statusLabel = (status) => {
+  if (status === 1 || status === 2) return '已收卷'
+  return '待收卷'
+}
+
+// 详情
+const detailItem = ref(null)
+
+const showDetail = (item, index) => {
+  if (!dragClickOnly) return
+  pauseCarousel()
+  if (resumeTimer) { clearTimeout(resumeTimer); resumeTimer = null }
+  detailItem.value = item
+}
+
+const closeDetail = () => {
+  detailItem.value = null
+  setTimeout(() => startCarousel(), 300)
+}
+
+// 时间范围
+const getTimeStart = () => {
+  const now = new Date()
+  const y = now.getFullYear()
+  const m = now.getMonth()
+  const d = now.getDate()
+  if (timeRange.value === 'day') {
+    return new Date(y, m, d).getTime()
+  }
+  if (timeRange.value === 'week') {
+    const day = now.getDay()
+    const diff = (day === 0 ? 6 : day - 1)
+    const mon = new Date(y, m, d)
+    mon.setDate(d - diff)
+    return mon.getTime()
+  }
+  return new Date(y, m, 1).getTime()
+}
+
+// 格式化时间
+const formatTime = (t) => {
+  if (!t) return '-'
+  const d = new Date(t)
+  const pad = (n) => String(n).padStart(2, '0')
+  return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
+}
+
+// 获取数据
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const params = {
+      pageNum: 1,
+      pageSize: 5000,
+      dataType: 1,
+      OnlyScrap: true
+    }
+
+    const res = await listMaterialCoil(params)
+    const rows = res?.rows || []
+
+    // 时间过滤
+    const startTs = getTimeStart()
+    const filtered = rows.filter(r => {
+      const t = r.createTime ? new Date(r.createTime).getTime() : 0
+      return t >= startTs
+    })
+
+    scrapList.value = filtered
+
+    // 计算 KPI
+    const total = filtered.length
+    const weight = filtered.reduce((s, r) => s + (Number(r.netWeight) || 0), 0)
+    kpiList.value = [
+      { label: '次品总数', value: total, unit: '卷', color: '#f0ad4e' },
+      { label: '待收卷', value: filtered.filter(r => r.status === 0 || r.status == null).length, unit: '卷', color: '#ff6b6b' },
+      { label: '已收卷', value: filtered.filter(r => r.status === 1 || r.status === 2).length, unit: '卷', color: '#00ff88' },
+      { label: '总重量', value: weight.toFixed(1), unit: 'kg', color: '#00d4ff' }
+    ]
+
+  } catch (e) {
+    console.error('获取次品钢卷数据失败:', e)
+  } finally {
+    loading.value = false
+    nextTick(() => startCarousel())
+  }
+}
+
+// 缩放
+const scaleWrapperStyle = computed(() => ({
+  transform: `scale(${scaleRatio.value})`
+}))
+
+const getParticleStyle = (index) => ({
+  left: `${Math.random() * 100}%`,
+  animationDelay: `${index * 0.4}s`,
+  animationDuration: `${8 + Math.random() * 6}s`
+})
+
+const updateScale = () => {
+  scaleRatio.value = Math.min(window.innerWidth / 1920, window.innerHeight / 1080)
+}
+
+const updateTime = () => {
+  const now = new Date()
+  currentDate.value = now.toLocaleString('zh-CN', {
+    year: 'numeric', month: '2-digit', day: '2-digit',
+    hour: '2-digit', minute: '2-digit', second: '2-digit'
+  })
+}
+
+// 生命周期
+onMounted(() => {
+  updateScale()
+  updateTime()
+  timeInterval = setInterval(updateTime, 1000)
+  window.addEventListener('resize', updateScale)
+  window.addEventListener('resize', handleResize)
+  fetchData()
+  dataInterval = setInterval(fetchData, 45000)
+  nextTick(() => {
+    initCharts()
+    startCarousel()
+  })
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateScale)
+  window.removeEventListener('resize', handleResize)
+  if (timeInterval) { clearInterval(timeInterval); timeInterval = null }
+  if (dataInterval) { clearInterval(dataInterval); dataInterval = null }
+  pauseCarousel()
+  if (resumeTimer) { clearTimeout(resumeTimer); resumeTimer = null }
+  dragActive = false
+  document.removeEventListener('mousemove', onDragMove)
+  document.removeEventListener('mouseup', onDragEnd)
+  if (processBarChart) { processBarChart.dispose(); processBarChart = null }
+})
+</script>
+
+<style lang="scss" scoped>
+.scrap-coil-screen {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(135deg, #050a15 0%, #0a1428 50%, #0d1b34 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  margin: 0;
+  position: relative;
+}
+
+/* ========== 四角装饰 ========== */
+.corner-decor {
+  position: absolute;
+  z-index: 5;
+  pointer-events: none;
+}
+.corner-decor.corner-tl {
+  top: 20px; left: 20px;
+  border-top: 2px solid rgba(240, 173, 78, 0.35);
+  border-left: 2px solid rgba(240, 173, 78, 0.35);
+  width: 40px; height: 40px;
+}
+.corner-decor.corner-tr {
+  top: 20px; right: 20px;
+  border-top: 2px solid rgba(240, 173, 78, 0.35);
+  border-right: 2px solid rgba(240, 173, 78, 0.35);
+  width: 40px; height: 40px;
+}
+.corner-decor.corner-bl {
+  bottom: 20px; left: 20px;
+  border-bottom: 2px solid rgba(240, 173, 78, 0.35);
+  border-left: 2px solid rgba(240, 173, 78, 0.35);
+  width: 40px; height: 40px;
+}
+.corner-decor.corner-br {
+  bottom: 20px; right: 20px;
+  border-bottom: 2px solid rgba(240, 173, 78, 0.35);
+  border-right: 2px solid rgba(240, 173, 78, 0.35);
+  width: 40px; height: 40px;
+}
+
+/* 侧边光柱 */
+.side-light {
+  position: absolute;
+  top: 0; width: 1px; height: 100%;
+  z-index: 4;
+  pointer-events: none;
+}
+.side-light-left {
+  left: 0;
+  background: linear-gradient(to bottom, transparent, rgba(240, 173, 78, 0.08), rgba(240, 173, 78, 0.15), rgba(240, 173, 78, 0.08), transparent);
+  box-shadow: 0 0 30px rgba(240, 173, 78, 0.08);
+}
+.side-light-right {
+  right: 0;
+  background: linear-gradient(to bottom, transparent, rgba(240, 173, 78, 0.08), rgba(240, 173, 78, 0.15), rgba(240, 173, 78, 0.08), transparent);
+  box-shadow: 0 0 30px rgba(240, 173, 78, 0.08);
+}
+
+.scale-wrapper {
+  width: 1920px;
+  height: 1080px;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transform-origin: center center;
+}
+
+.screen-content {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  padding: 14px 18px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.screen-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+}
+
+/* ========== 动态背景 ========== */
+.dynamic-bg {
+  position: absolute; top: 0; left: 0;
+  width: 100%; height: 100%;
+  pointer-events: none; overflow: hidden; z-index: 0;
+}
+.grid-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+.grid-lines { position: absolute; width: 100%; height: 100%; opacity: 0.08; }
+.grid-lines.horizontal {
+  background: repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(240, 173, 78, 0.12) 60px, rgba(240, 173, 78, 0.12) 61px);
+  animation: gridMoveH 24s linear infinite;
+}
+.grid-lines.vertical {
+  background: repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(240, 173, 78, 0.12) 60px, rgba(240, 173, 78, 0.12) 61px);
+  animation: gridMoveV 24s linear infinite;
+}
+@keyframes gridMoveH { 0% { transform: translateY(0); } 100% { transform: translateY(60px); } }
+@keyframes gridMoveV { 0% { transform: translateX(0); } 100% { transform: translateX(60px); } }
+
+.scan-laser { position: absolute; left: -5%; width: 110%; height: 2px; animation: laserScan 6s ease-in-out infinite; z-index: 1; }
+.laser-beam {
+  position: absolute; top: 0; left: 0; width: 100%; height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(240, 173, 78, 0.01), rgba(240, 173, 78, 0.6), #f0ad4e, #f0ad4e, rgba(240, 173, 78, 0.6), rgba(240, 173, 78, 0.01), transparent);
+  box-shadow: 0 0 4px rgba(240, 173, 78, 0.3), 0 0 12px rgba(240, 173, 78, 0.2), 0 0 30px rgba(240, 173, 78, 0.1);
+}
+.laser-glow {
+  position: absolute; top: -30px; left: 0; width: 100%; height: 62px;
+  background: linear-gradient(to bottom, transparent, rgba(240, 173, 78, 0.06), rgba(240, 173, 78, 0.15), rgba(240, 173, 78, 0.06), transparent);
+  pointer-events: none;
+}
+@keyframes laserScan { 0% { top: -2%; opacity: 0; } 5% { opacity: 1; } 45% { opacity: 1; } 50% { opacity: 0.3; } 55% { opacity: 1; } 95% { opacity: 1; } 100% { top: 102%; opacity: 0; } }
+
+.particles-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+.particle {
+  position: absolute; width: 5px; height: 5px;
+  background: radial-gradient(circle, #f0ad4e 0%, rgba(240, 173, 78, 0.4) 50%, transparent 100%);
+  border-radius: 50%;
+  animation: particleFloat 12s ease-in-out infinite;
+  box-shadow: 0 0 6px #f0ad4e, 0 0 16px rgba(240, 173, 78, 0.4);
+}
+@keyframes particleFloat {
+  0%,100% { top: 100%; transform: translateX(0) scale(0.3); opacity: 0; }
+  10% { top: 85%; transform: translateX(0) scale(1); opacity: 1; }
+  50% { top: 45%; transform: translateX(25px) scale(1.2); }
+  85% { opacity: 0.6; top: 10%; transform: translateX(-15px) scale(0.7); }
+  100% { top: -5%; opacity: 0; }
+}
+
+.glow-globe { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.2; animation: globePulse 8s ease-in-out infinite; }
+.glow-globe.globe-1 { width: 350px; height: 350px; background: radial-gradient(circle, rgba(240, 173, 78, 0.3) 0%, transparent 70%); top: 15%; right: 15%; }
+.glow-globe.globe-2 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(255, 107, 107, 0.25) 0%, transparent 70%); bottom: 20%; left: 8%; animation-delay: 2.5s; }
+.glow-globe.globe-3 { width: 280px; height: 280px; background: radial-gradient(circle, rgba(0, 255, 136, 0.15) 0%, transparent 70%); top: 45%; left: 50%; transform: translate(-50%,-50%); animation-delay: 5s; }
+@keyframes globePulse { 0%,100% { transform: scale(1); opacity: 0.2; } 50% { transform: scale(1.25); opacity: 0.35; } }
+
+/* ========== 头部标题 ========== */
+.screen-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 10;
+}
+.title-border { flex: 1; }
+.title-box {
+  padding: 10px 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  background: rgba(10, 20, 40, 0.8);
+}
+.title-icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
+.screen-title {
+  font-size: 28px;
+  color: #f0ad4e;
+  margin: 0;
+  text-shadow: 0 0 20px rgba(240, 173, 78, 0.8), 0 0 40px rgba(240, 173, 78, 0.4);
+  letter-spacing: 6px;
+  font-weight: bold;
+}
+.subtitle { font-size: 12px; color: #6a8cb5; letter-spacing: 1px; }
+.live-indicator {
+  display: flex; align-items: center; gap: 5px;
+  margin-left: auto; padding: 2px 10px;
+  border: 1px solid rgba(0, 255, 136, 0.3); border-radius: 12px;
+  background: rgba(0, 255, 136, 0.08);
+}
+.live-dot {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: #00ff88;
+  box-shadow: 0 0 6px #00ff88, 0 0 12px rgba(0, 255, 136, 0.4);
+  animation: liveDotPulse 1.5s ease-in-out infinite;
+}
+@keyframes liveDotPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
+.live-text { font-size: 11px; color: #00ff88; letter-spacing: 1px; }
+.clock-text { font-size: 14px; color: #f0ad4e; font-family: 'Courier New', monospace; letter-spacing: 1px; margin-left: 4px; }
+.time-filter { display: flex; align-items: center; gap: 4px; margin-left: 16px; }
+.filter-btn {
+  padding: 3px 12px; font-size: 12px;
+  color: rgba(255, 255, 255, 0.4);
+  border: 1px solid rgba(240, 173, 78, 0.15);
+  border-radius: 4px; cursor: pointer;
+  transition: all 0.25s ease;
+  letter-spacing: 1px; user-select: none;
+}
+.filter-btn:hover {
+  color: rgba(255, 255, 255, 0.7);
+  border-color: rgba(240, 173, 78, 0.3);
+  background: rgba(240, 173, 78, 0.06);
+}
+.filter-btn.active {
+  color: #f0ad4e;
+  border-color: #f0ad4e;
+  background: rgba(240, 173, 78, 0.1);
+  box-shadow: 0 0 10px rgba(240, 173, 78, 0.15);
+}
+
+/* ========== KPI 行 ========== */
+.kpi-row {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.kpi-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px 6px 8px;
+  background: rgba(10, 20, 40, 0.6);
+  border: 1px solid rgba(240, 173, 78, 0.12);
+  border-radius: 6px;
+  gap: 2px;
+}
+.kpi-label {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.55);
+  letter-spacing: 1px;
+}
+.kpi-value {
+  font-size: 28px;
+  font-weight: bold;
+  font-family: 'Courier New', monospace;
+  text-shadow: 0 0 12px currentColor;
+  line-height: 1.2;
+}
+.kpi-unit {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.3);
+  letter-spacing: 1px;
+}
+
+/* ========== 图表行 ========== */
+.charts-container {
+  flex: 0 0 240px;
+  min-height: 0;
+  position: relative;
+  width: 100%;
+}
+.charts-row {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  gap: 8px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+.chart-panel {
+  flex: 0 0 30%;
+  background: rgba(10, 20, 40, 0.5);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.chart-panel-wide {
+  flex: 1;
+}
+.chart-inner-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.chart-inner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 10px 10px 6px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.panel-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  margin-bottom: 6px;
+}
+.panel-dot {
+  width: 3px;
+  height: 12px;
+  background: #f0ad4e;
+  border-radius: 2px;
+  box-shadow: 0 0 6px rgba(240, 173, 78, 0.5);
+}
+.panel-title {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.85);
+  letter-spacing: 1px;
+}
+.chart-body {
+  flex: 1;
+  min-height: 0;
+}
+.chart-body-bar {
+  width: 100%;
+  height: 100%;
+}
+
+/* ========== 表格列表 ========== */
+.scrap-coil-screen .table-container {
+  background: transparent;
+}
+.table-container {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+.table-wrap {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 10px 10px 6px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.panel-count {
+  margin-left: auto;
+  font-size: 11px;
+  color: rgba(240, 173, 78, 0.5);
+  font-family: 'Courier New', monospace;
+}
+.table-scroll {
+  flex: 1;
+  overflow: hidden;
+  cursor: grab;
+  user-select: none;
+  position: relative;
+}
+.table-scroll:active { cursor: grabbing; }
+
+.scrap-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+.scrap-table thead { position: sticky; top: 0; z-index: 2; }
+.scrap-table th {
+  padding: 6px 10px;
+  text-align: left;
+  font-weight: 500;
+  color: rgba(240, 173, 78, 0.7);
+  font-size: 11px;
+  letter-spacing: 0.5px;
+  background: rgba(10, 20, 40, 0.95);
+  border-bottom: 1px solid rgba(240, 173, 78, 0.12);
+  white-space: nowrap;
+  background: rgba(10, 20, 40, 0.4);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+.scrap-table td {
+  padding: 5px 10px;
+  border-bottom: 1px solid rgba(240, 173, 78, 0.06);
+  color: rgba(255, 255, 255, 0.75);
+  white-space: nowrap;
+  background: rgba(10, 20, 40, 0.4);
+}
+.scrap-table tbody tr {
+  transition: background 0.2s ease;
+  cursor: pointer;
+}
+.scrap-table tbody tr:hover { background: rgba(240, 173, 78, 0.06); }
+.scrap-table tbody tr:active { background: rgba(240, 173, 78, 0.1); }
+
+.col-coil-no {
+  font-family: 'Courier New', monospace;
+  color: #f0ad4e !important;
+  font-size: 12px;
+}
+.col-spec {
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+  color: rgba(0, 212, 255, 0.6) !important;
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.col-weight {
+  font-family: 'Courier New', monospace;
+  text-align: right !important;
+}
+.col-time {
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+
+/* 品质标签 */
+.quality-badge {
+  display: inline-block;
+  font-size: 11px;
+  padding: 1px 8px;
+  border-radius: 3px;
+  letter-spacing: 0.5px;
+}
+.qlty-ok {
+  color: #00ff88;
+  background: rgba(0, 255, 136, 0.1);
+  border: 1px solid rgba(0, 255, 136, 0.2);
+}
+.qlty-bad {
+  color: #ff6b6b;
+  background: rgba(255, 107, 107, 0.1);
+  border: 1px solid rgba(255, 107, 107, 0.2);
+}
+.qlty-pending {
+  color: #f0ad4e;
+  background: rgba(240, 173, 78, 0.1);
+  border: 1px solid rgba(240, 173, 78, 0.2);
+}
+.qlty-unknown {
+  color: rgba(255, 255, 255, 0.4);
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.list-empty {
+  text-align: center;
+  padding: 20px !important;
+  color: rgba(255, 255, 255, 0.25);
+  font-size: 14px;
+  letter-spacing: 2px;
+}
+
+/* ========== 详情弹窗 ========== */
+.detail-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.detail-panel {
+  width: 420px;
+  background: rgba(10, 20, 40, 0.95);
+  border: 1px solid rgba(240, 173, 78, 0.25);
+  border-radius: 8px;
+  box-shadow: 0 0 40px rgba(240, 173, 78, 0.15), 0 0 80px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+}
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 20px;
+  border-bottom: 1px solid rgba(240, 173, 78, 0.12);
+  font-size: 15px;
+  color: rgba(255, 255, 255, 0.9);
+}
+.detail-header-dot {
+  width: 4px; height: 16px;
+  background: #f0ad4e;
+  border-radius: 2px;
+  box-shadow: 0 0 8px rgba(240, 173, 78, 0.5);
+}
+.detail-close {
+  margin-left: auto;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 16px;
+  transition: color 0.2s;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+.detail-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
+.detail-body {
+  padding: 16px 20px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.detail-row {
+  display: flex;
+  align-items: center;
+  padding: 6px 0;
+  border-bottom: 1px solid rgba(240, 173, 78, 0.04);
+}
+.detail-row:last-child { border-bottom: none; }
+.detail-label {
+  flex: 0 0 80px;
+  font-size: 12px;
+  color: rgba(240, 173, 78, 0.6);
+  letter-spacing: 1px;
+}
+.detail-value {
+  flex: 1;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.85);
+}
+.detail-value.code {
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+}
+
+</style>