From e12fa4c39a043b46d0f3335d71e6c3bde0ac547b Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Fri, 23 Jan 2026 18:04:12 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=A4=A7=E5=B1=8F=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/remaining.ts               |   12 +
 src/views/report/dashboardList/index.vue      |  338 +++++
 .../dashboardPage/dashboard8/Dashboard8.vue   |  194 +++
 .../dashboard8/components/DashboardHeader.vue |  158 +++
 .../dashboard8/components/DayCapacity.vue     |  243 ++++
 .../dashboard8/components/EnergyTrend.vue     |  156 +++
 .../dashboard8/components/MonthCapacity.vue   |  243 ++++
 .../dashboard8/components/OpsTrend.vue        |  272 ++++
 .../dashboard8/components/QualityTrend.vue    |  156 +++
 .../dashboard8/components/RealAlarm.vue       |  205 +++
 .../dashboard8/components/TaskBoard.vue       |  296 ++++
 .../dashboard8/components/TodayOps.vue        |  202 +++
 .../dashboard8/components/WeekTrend.vue       |  182 +++
 .../dashboardPage/dashboard8/dashboard8.html  | 1243 +++++++++++++++++
 .../report/dashboardPage/dashboard8/utils.ts  |   57 +
 15 files changed, 3957 insertions(+)
 create mode 100644 src/views/report/dashboardList/index.vue
 create mode 100644 src/views/report/dashboardPage/dashboard8/Dashboard8.vue
 create mode 100644 src/views/report/dashboardPage/dashboard8/components/DashboardHeader.vue
 create mode 100644 src/views/report/dashboardPage/dashboard8/components/DayCapacity.vue
 create mode 100644 src/views/report/dashboardPage/dashboard8/components/EnergyTrend.vue
 create mode 100644 src/views/report/dashboardPage/dashboard8/components/MonthCapacity.vue
 create mode 100644 src/views/report/dashboardPage/dashboard8/components/OpsTrend.vue
 create mode 100644 src/views/report/dashboardPage/dashboard8/components/QualityTrend.vue
 create mode 100644 src/views/report/dashboardPage/dashboard8/components/RealAlarm.vue
 create mode 100644 src/views/report/dashboardPage/dashboard8/components/TaskBoard.vue
 create mode 100644 src/views/report/dashboardPage/dashboard8/components/TodayOps.vue
 create mode 100644 src/views/report/dashboardPage/dashboard8/components/WeekTrend.vue
 create mode 100644 src/views/report/dashboardPage/dashboard8/dashboard8.html
 create mode 100644 src/views/report/dashboardPage/dashboard8/utils.ts

diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index fdb8c006..383bfe5c 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -599,6 +599,18 @@ const remainingRouter: AppRouteRecordRaw[] = [
     ]
   },
 
+  {
+    path: '/iot/report/dashboardPage/Dashboard8',
+    component: () => import('@/views/report/dashboardPage/dashboard8/Dashboard8.vue'),
+    name: 'IotReportDashboard8',
+    meta: {
+      title: '智能制造产线任务总览',
+      hidden: true,
+      noTagsView: true,
+      canTo: true
+    }
+  },
+
   {
     path: '/:pathMatch(.*)*',
     component: () => import('@/views/Error/404.vue'),
diff --git a/src/views/report/dashboardList/index.vue b/src/views/report/dashboardList/index.vue
new file mode 100644
index 00000000..b97115e6
--- /dev/null
+++ b/src/views/report/dashboardList/index.vue
@@ -0,0 +1,338 @@
+<template>
+  <ContentWrap>
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="80px"
+    >
+      <el-form-item label="名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="queryParams.remark"
+          placeholder="请输入备注"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="启用状态" prop="state">
+        <el-select
+          v-model="queryParams.state"
+          placeholder="请选择启用状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getStrDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="openCreateDialog">
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button @click="handleQuery">
+          <Icon icon="ep:search" class="mr-5px" /> 搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon icon="ep:refresh" class="mr-5px" /> 重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <ContentWrap>
+    <div class="dashboard-card-list">
+      <el-empty v-if="!loading && list.length === 0" description="暂无数据" />
+      <el-row v-else :gutter="16">
+        <el-col
+          v-for="item in list"
+          :key="item.id"
+          :xl="6"
+          :lg="8"
+          :md="12"
+          :sm="24"
+          :xs="24"
+          class="mb-16px"
+        >
+          <el-card shadow="hover" class="dashboard-card" :body-style="{ padding: '0' }">
+            <div class="dashboard-card-image-wrapper">
+              <img
+                class="dashboard-card-image"
+                :src="item.indexImage || defaultImage"
+                alt="封面图"
+              />
+              <div class="dashboard-card-state">
+                <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="item.state" />
+              </div>
+            </div>
+            <div class="dashboard-card-body">
+              <div class="dashboard-card-main">
+                <div class="dashboard-card-title" :title="item.name">
+                  {{ item.name || '-' }}
+                </div>
+                <div class="dashboard-card-remark" :title="item.remark">
+                  {{ item.remark || '暂无描述' }}
+                </div>
+              </div>
+              <div class="dashboard-card-actions">
+                <el-button type="primary" text @click="handlePreview(item)">
+                  <Icon icon="ep:arrow-right" class="mr-5px" /> 预览
+                </el-button>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <Pagination
+        v-if="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+  </ContentWrap>
+
+  <el-dialog v-model="createDialogVisible" title="新增数据大屏" width="600px">
+    <el-form :model="createForm" ref="createFormRef" label-width="80px">
+      <el-form-item label="名称">
+        <el-input v-model="createForm.name" placeholder="请输入名称" />
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="createForm.remark" placeholder="请输入备注" />
+      </el-form-item>
+      <el-form-item label="启用状态">
+        <el-select v-model="createForm.state" placeholder="请选择启用状态" class="!w-240px">
+          <el-option
+            v-for="dict in getStrDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="图片路径">
+        <el-input v-model="createForm.indexImage" placeholder="请输入图片路径" />
+      </el-form-item>
+      <el-form-item label="路由路径">
+        <el-input v-model="createForm.route" placeholder="请输入路由路径" />
+      </el-form-item>
+      <el-form-item label="内容">
+        <el-input
+          v-model="createForm.content"
+          type="textarea"
+          :rows="4"
+          placeholder="请输入内容"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="createDialogVisible = false">取 消</el-button>
+      <el-button type="primary" :loading="createLoading" @click="submitCreate">
+        确 定
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
+import request from '@/config/axios'
+import defaultImage from '@/assets/imgs/logo.png'
+
+defineOptions({ name: 'DashboardList' })
+
+const { push } = useRouter()
+
+interface DashboardItem {
+  id: number
+  name: string
+  remark: string
+  state: string
+  indexImage?: string
+  route?: string
+}
+
+const loading = ref(false)
+const list = ref<DashboardItem[]>([])
+const total = ref(0)
+
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined as string | undefined,
+  remark: undefined as string | undefined,
+  state: undefined as string | undefined
+})
+
+const queryFormRef = ref()
+
+const createDialogVisible = ref(false)
+const createLoading = ref(false)
+const createFormRef = ref()
+const createForm = reactive({
+  name: '',
+  remark: '',
+  state: '',
+  indexImage: '',
+  route: '',
+  content: ''
+})
+
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await request.get({
+      url: '/mes/goview/page',
+      params: queryParams
+    })
+    list.value = (data?.list || []) as DashboardItem[]
+    total.value = data?.total || 0
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+const resetQuery = () => {
+  queryFormRef.value?.resetFields?.()
+  handleQuery()
+}
+
+const handlePreview = (item: DashboardItem) => {
+  if (!item.route) {
+    useMessage().error('未配置预览路由')
+    return
+  }
+  const path = item.route.startsWith('/') ? item.route : `/${item.route}`
+  push(path)
+}
+
+const resetCreateForm = () => {
+  createForm.name = ''
+  createForm.remark = ''
+  createForm.state = ''
+  createForm.indexImage = ''
+  createForm.route = ''
+  createForm.content = ''
+}
+
+const openCreateDialog = () => {
+  resetCreateForm()
+  createDialogVisible.value = true
+}
+
+const submitCreate = async () => {
+  if (!createForm.name) {
+    useMessage().error('名称不能为空')
+    return
+  }
+  createLoading.value = true
+  try {
+    await request.post({
+      url: '/mes/goview/create',
+      data: createForm
+    })
+    useMessage().success('新增成功')
+    createDialogVisible.value = false
+    handleQuery()
+  } finally {
+    createLoading.value = false
+  }
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style scoped>
+.dashboard-card-list {
+  min-height: 200px;
+}
+
+.dashboard-card {
+  display: flex;
+  flex-direction: column;
+}
+
+.dashboard-card-image-wrapper {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%;
+  overflow: hidden;
+}
+
+.dashboard-card-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background-color: #0f172a;
+}
+
+.dashboard-card-state {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+}
+
+.dashboard-card-body {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+}
+
+.dashboard-card-main {
+  min-width: 0;
+}
+
+.dashboard-card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dashboard-card-remark {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dashboard-card-actions {
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+}
+
+.dashboard-card-menu {
+  min-width: 120px;
+}
+</style>
diff --git a/src/views/report/dashboardPage/dashboard8/Dashboard8.vue b/src/views/report/dashboardPage/dashboard8/Dashboard8.vue
new file mode 100644
index 00000000..5c1e3c66
--- /dev/null
+++ b/src/views/report/dashboardPage/dashboard8/Dashboard8.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="dashboard-container">
+    <div class="bg-grid"></div>
+    <div class="bg-scan"><div class="scan-line"></div></div>
+
+    <DashboardHeader />
+
+    <main>
+      <div class="layout">
+        <!-- 第一行 -->
+        <el-row :gutter="10" class="row-1">
+          <el-col :span="12">
+            <!-- 产线任务看板 -->
+            <TaskBoard />
+          </el-col>
+          <el-col :span="6">
+            <!-- 日产能达成情况 -->
+            <DayCapacity />
+          </el-col>
+          <el-col :span="6">
+            <!-- 月产能达成情况 -->
+            <MonthCapacity />
+          </el-col>
+        </el-row>
+
+        <!-- 第二行 -->
+        <el-row :gutter="10" class="row-2">
+          <el-col :span="9">
+            <!-- 周生产趋势 -->
+            <WeekTrend />
+          </el-col>
+          <el-col :span="8">
+            <!-- 开机率/稼动率趋势 -->
+            <OpsTrend />
+          </el-col>
+          <el-col :span="7">
+            <!-- 今日开机率/稼动率 -->
+            <TodayOps />
+          </el-col>
+        </el-row>
+
+        <!-- 第三行 -->
+        <el-row :gutter="10" class="row-3">
+          <el-col :span="8">
+            <!-- 成品检合格率趋势图 -->
+            <QualityTrend />
+          </el-col>
+          <el-col :span="8">
+            <!-- 实时报警信息 -->
+            <RealAlarm />
+          </el-col>
+          <el-col :span="8">
+            <!-- 能耗周趋势 -->
+            <EnergyTrend />
+          </el-col>
+        </el-row>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DashboardHeader from './components/DashboardHeader.vue'
+import TaskBoard from './components/TaskBoard.vue'
+import DayCapacity from './components/DayCapacity.vue'
+import MonthCapacity from './components/MonthCapacity.vue'
+import WeekTrend from './components/WeekTrend.vue'
+import OpsTrend from './components/OpsTrend.vue'
+import TodayOps from './components/TodayOps.vue'
+import QualityTrend from './components/QualityTrend.vue'
+import RealAlarm from './components/RealAlarm.vue'
+import EnergyTrend from './components/EnergyTrend.vue'
+</script>
+
+<style scoped>
+/* Define CSS Variables locally for this dashboard */
+.dashboard-container {
+  --bg: #050816;
+  --bg-deep: #020617;
+  --card-bg: rgba(15, 23, 42, 0.86);
+  --border: rgba(56, 189, 248, 0.35);
+  --text: #e5f0ff;
+  --muted: #94a3b8;
+  --primary: #38bdf8;
+  --accent: #22d3ee;
+  --blue: #1e90ff;
+  --green: #22c55e;
+  --purple: #8b5cf6;
+  --warn: #f59e0b;
+  --danger: #ef4444;
+  --gap: 10px;
+  --header-h: 86px;
+
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft Yahei", Arial, sans-serif;
+  color: var(--text);
+  background-color: var(--bg-deep);
+  background-image:
+    radial-gradient(circle at 20% 0, rgba(56, 189, 248, 0.26) 0, transparent 48%),
+    radial-gradient(circle at 80% 110%, rgba(129, 140, 248, 0.22) 0, transparent 52%),
+    linear-gradient(135deg, #020617 0%, #020617 45%, #020617 100%);
+}
+
+.bg-grid {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image: linear-gradient(rgba(15,23,42,0.8) 1px, transparent 1px),
+                    linear-gradient(90deg, rgba(15,23,42,0.8) 1px, transparent 1px);
+  background-size: 70px 70px;
+  opacity: 0.55;
+  z-index: 0;
+}
+
+.bg-scan {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.scan-line {
+  position: absolute;
+  top: -40%;
+  left: 0;
+  width: 100%;
+  height: 40%;
+  background: radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.38), transparent 70%);
+  opacity: 0.5;
+  filter: blur(32px);
+  animation: scanDown 16s linear infinite;
+}
+
+@keyframes scanDown {
+  0% { transform: translateY(-100%); }
+  100% { transform: translateY(260%); }
+}
+
+main {
+  flex: 1;
+  padding: 8px var(--gap) var(--gap);
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  min-height: 0;
+}
+
+.layout {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  max-width: 1920px;
+  margin: 0 auto;
+  width: 100%; /* Ensure full width */
+  min-height: 0;
+}
+
+.row-1, .row-2, .row-3 {
+  flex: 1 1 0; /* Ensure equal height distribution */
+  min-height: 0;
+  overflow: hidden; /* Prevent content from expanding the row */
+}
+
+/* Ensure el-col takes full height */
+:deep(.el-col) {
+  height: 100%;
+}
+
+/* Ensure card takes full height and ignores inline flex styles */
+:deep(.card) {
+  height: 100% !important;
+  flex: none !important;
+  box-sizing: border-box; /* Ensure padding/border doesn't add to height */
+}
+
+/* Fix chart containers if they are not sizing correctly */
+:deep(.chart), :deep(.echarts) {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+@media (max-width: 1366px) {
+  /* Adjust if needed, but flex: 1 should handle it automatically */
+}
+</style>
diff --git a/src/views/report/dashboardPage/dashboard8/components/DashboardHeader.vue b/src/views/report/dashboardPage/dashboard8/components/DashboardHeader.vue
new file mode 100644
index 00000000..7bde15b7
--- /dev/null
+++ b/src/views/report/dashboardPage/dashboard8/components/DashboardHeader.vue
@@ -0,0 +1,158 @@
+<template>
+  <header>
+    <div class="header-inner">
+      <div class="title-wrap">
+        <div class="title-mark">
+          <Icon icon="fa-solid:microchip" class="title-mark-icon" />
+        </div>
+        <div>
+          <div class="title">智能制造产线任务总览</div>
+          <div class="sub-title">INTELLIGENT MANUFACTURING REAL-TIME DASHBOARD</div>
+        </div>
+      </div>
+      <div class="header-right">
+        <span class="chip">
+          <Icon icon="fa-regular:clock" class="chip-icon" />
+          <span>{{ timeStr }}</span>
+        </span>
+        <span class="chip chip-strong">
+          <Icon icon="fa-solid:circle-nodes" class="chip-icon" />
+          <span>当前在线产线 <strong>10</strong> 条</span>
+        </span>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const timeStr = ref('')
+let timer: number | undefined
+
+const updateTime = () => {
+  const d = new Date()
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  const h = String(d.getHours()).padStart(2, '0')
+  const mi = String(d.getMinutes()).padStart(2, '0')
+  const s = String(d.getSeconds()).padStart(2, '0')
+  timeStr.value = `${y}-${m}-${day} ${h}:${mi}:${s}`
+}
+
+onMounted(() => {
+  updateTime()
+  timer = window.setInterval(updateTime, 1000)
+})
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+})
+</script>
+
+<style scoped>
+header {
+  height: var(--header-h);
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 24px;
+  background:
+    linear-gradient(to bottom, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.85)),
+    radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.22), transparent 60%);
+  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
+  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.9);
+}
+
+.header-inner {
+  max-width: 1920px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.title-mark {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  border: 1px solid rgba(56, 189, 248, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.35), transparent 70%);
+  box-shadow: 0 0 24px rgba(56, 189, 248, 0.55);
+}
+
+.title-mark-icon {
+  color: var(--accent);
+  font-size: 20px;
+}
+
+.title {
+  font-size: 32px;
+  font-weight: 900;
+  letter-spacing: 4px;
+  background: linear-gradient(to bottom, #e0f2fe, #60a5fa);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0 0 20px rgba(56, 189, 248, 0.65);
+}
+
+.sub-title {
+  font-size: 12px;
+  color: var(--muted);
+  margin-top: 3px;
+  letter-spacing: 2px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.chip {
+  border-radius: 999px;
+  border: 1px solid rgba(148, 163, 184, 0.5);
+  padding: 4px 10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(15, 23, 42, 0.75);
+}
+
+.chip-icon {
+  color: var(--accent);
+}
+
+.chip-strong {
+  border-color: rgba(56, 189, 248, 0.8);
+  background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.35), transparent 70%);
+  color: #e0f2fe;
+}
+
+@media (max-width: 1600px) {
+  .title {
+    font-size: 26px;
+  }
+}
+
+@media (max-width: 1366px) {
+  .title {
+    font-size: 22px;
+    letter-spacing: 3px;
+  }
+}
+</style>
diff --git a/src/views/report/dashboardPage/dashboard8/components/DayCapacity.vue b/src/views/report/dashboardPage/dashboard8/components/DayCapacity.vue
new file mode 100644
index 00000000..f8a0d240
--- /dev/null
+++ b/src/views/report/dashboardPage/dashboard8/components/DayCapacity.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title">
+        <span class="card-title-icon">
+          <Icon icon="fa-solid:sun" />
+        </span>
+        <span>日产能达成情况</span>
+      </div>
+      <span class="tag">当日维度</span>
+    </div>
+    <div class="card-body">
+      <div class="card-body-row">
+        <div class="card-body-col" style="flex: 0 0 52%;">
+          <div ref="chartRef" class="chart"></div>
+        </div>
+        <div class="card-body-col">
+          <div class="metrics-grid">
+            <div class="metric-card">
+              <div class="metric-label">排产单数量</div>
+              <div class="metric-value" ref="dayOrderEl"></div>
+              <div class="metric-extra"><span>单</span><span>含加急 4 单</span></div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-label">排产数量</div>
+              <div class="metric-value" ref="dayPlanEl"></div>
+              <div class="metric-extra"><span>件</span><span>含三班倒</span></div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-label">待生产数量</div>
+              <div class="metric-value warn" ref="dayPendingEl"></div>
+              <div class="metric-extra"><span>件</span><span>预计 4 小时内完成</span></div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-label">产能达成率</div>
+              <div class="metric-value accent" ref="dayRateEl"></div>
+              <div class="metric-extra"><span>目标 ≥ 80%</span><span>状态：良好</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import * as echarts from 'echarts'
+import { colors, animateCount, style } from '../utils'
+
+const day = { orders: 36, plan: 18000, pending: 3200, rate: 82.2 }
+
+const chartRef = ref<HTMLElement | null>(null)
+const dayOrderEl = ref<HTMLElement | null>(null)
+const dayPlanEl = ref<HTMLElement | null>(null)
+const dayPendingEl = ref<HTMLElement | null>(null)
+const dayRateEl = ref<HTMLElement | null>(null)
+
+let chart: echarts.ECharts | null = null
+
+const initChart = () => {
+  if (!chartRef.value) return
+  chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
+  chart.setOption({
+    backgroundColor: 'transparent',
+    tooltip: { trigger: 'item' },
+    legend: { bottom: '0%', left: 'center', textStyle: style.legendText },
+    series: [
+      {
+        type: 'pie',
+        radius: ['60%', '82%'],
+        center: ['50%', '55%'],
+        label: { show: false },
+        emphasis: { scale: false },
+        data: [
+          { value: day.plan - day.pending, name: '已排产', itemStyle: { color: colors.cyan } },
+          { value: day.pending, name: '待生产', itemStyle: { color: 'rgba(15,23,42,0.8)' } }
+        ]
+      }
+    ]
+  })
+}
+
+const resizeHandler = () => {
+  chart?.resize()
+}
+
+onMounted(() => {
+  initChart()
+  animateCount(dayOrderEl.value, day.orders, '', 900)
+  animateCount(dayPlanEl.value, day.plan, '', 900)
+  animateCount(dayPendingEl.value, day.pending, '', 900)
+  animateCount(dayRateEl.value, day.rate, '%', 900)
+  window.addEventListener('resize', resizeHandler)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resizeHandler)
+  chart?.dispose()
+})
+</script>
+
+<style scoped>
+.card {
+  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
+  border-radius: 10px;
+  border: 1px solid rgba(30,64,175,0.85);
+  box-shadow:
+    0 18px 45px rgba(15,23,42,0.95),
+    0 0 0 1px rgba(15,23,42,1),
+    inset 0 0 0 1px rgba(56,189,248,0.05);
+  padding: 10px 10px 10px 10px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.card::before,
+.card::after {
+  content: "";
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  border-radius: 2px;
+  border: 1px solid rgba(56,189,248,0.75);
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.card::before {
+  top: -1px;
+  left: -1px;
+  border-right: none;
+  border-bottom: none;
+}
+
+.card::after {
+  right: -1px;
+  bottom: -1px;
+  border-left: none;
+  border-top: none;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #e5f0ff;
+}
+
+.card-title-icon {
+  color: #22d3ee;
+}
+
+.card-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.card-body-row {
+  flex: 1;
+  display: flex;
+  gap: 8px;
+  min-height: 0;
+}
+
+.card-body-col {
+  flex: 1;
+  min-height: 0;
+}
+
+.tag {
+  border-radius: 999px;
+  padding: 2px 6px;
+  font-size: 10px;
+  border: 1px solid rgba(148,163,184,0.4);
+  color: #94a3b8;
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-auto-rows: 1fr;
+  gap: 6px;
+}
+
+.metric-card {
+  background: radial-gradient(circle at 0 0, rgba(56,189,248,0.16), transparent 70%);
+  border-radius: 8px;
+  border: 1px solid rgba(30,64,175,0.9);
+  padding: 6px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.metric-label {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.metric-value {
+  font-size: 20px;
+  font-weight: 800;
+  color: #e5f0ff;
+}
+
+.metric-value.accent { color: #22d3ee; }
+.metric-value.warn { color: #f59e0b; }
+.metric-value.ok { color: #22c55e; }
+
+.metric-extra {
+  font-size: 11px;
+  color: #94a3b8;
+  display: flex;
+  justify-content: space-between;
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+  min-height: 180px;
+}
+
+@media (max-width: 1600px) {
+  .chart { min-height: 160px; }
+}
+</style>
diff --git a/src/views/report/dashboardPage/dashboard8/components/EnergyTrend.vue b/src/views/report/dashboardPage/dashboard8/components/EnergyTrend.vue
new file mode 100644
index 00000000..156e192a
--- /dev/null
+++ b/src/views/report/dashboardPage/dashboard8/components/EnergyTrend.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title">
+        <span class="card-title-icon">
+          <Icon icon="fa-solid:bolt" />
+        </span>
+        <span>能耗周趋势</span>
+      </div>
+      <span class="tag">本周能耗对比</span>
+    </div>
+    <div class="card-body">
+      <div id="chart-energy" class="chart"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import * as echarts from 'echarts'
+import { useChart, colors, style } from '../utils'
+
+const { init } = useChart('chart-energy')
+
+const energyDays = ['周一','周二','周三','周四','周五','周六','周日']
+const energyUse = [520, 540, 580, 610, 640, 590, 560]
+const energyStd = [500, 520, 540, 560, 580, 560, 540]
+
+onMounted(() => {
+  const chart = init()
+  if (!chart) return
+
+  chart.setOption({
+    backgroundColor: 'transparent',
+    tooltip: { trigger: 'axis' },
+    legend: { top: 0, right: 0, textStyle: style.legendText },
+    grid: { top: '20%', left: '6%', right: '6%', bottom: '10%', containLabel: true },
+    xAxis: { type: 'category', data: energyDays, axisLine: style.axisLine, axisLabel: style.axisLabel },
+    yAxis: { type: 'value', axisLine: { show: false }, axisLabel: style.axisLabel, splitLine: style.splitLine },
+    series: [
+      {
+        name: '实际能耗(kWh)',
+        type: 'bar',
+        barWidth: 16,
+        itemStyle: {
+          borderRadius: [4,4,0,0],
+          color: new echarts.graphic.LinearGradient(0,0,0,1,[
+            { offset: 0, color: colors.danger },
+            { offset: 1, color: 'rgba(239,68,68,0.10)' }
+          ])
+        },
+        data: energyUse
+      },
+      {
+        name: '基准能耗(kWh)',
+        type: 'line',
+        smooth: true,
+        showSymbol: false,
+        lineStyle: { width: 2, color: colors.green },
+        data: energyStd
+      }
+    ]
+  })
+})
+</script>
+
+<style scoped>
+.card {
+  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
+  border-radius: 10px;
+  border: 1px solid rgba(30,64,175,0.85);
+  box-shadow:
+    0 18px 45px rgba(15,23,42,0.95),
+    0 0 0 1px rgba(15,23,42,1),
+    inset 0 0 0 1px rgba(56,189,248,0.05);
+  padding: 10px 10px 10px 10px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.card::before,
+.card::after {
+  content: "";
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  border-radius: 2px;
+  border: 1px solid rgba(56,189,248,0.75);
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.card::before {
+  top: -1px;
+  left: -1px;
+  border-right: none;
+  border-bottom: none;
+}
+
+.card::after {
+  right: -1px;
+  bottom: -1px;
+  border-left: none;
+  border-top: none;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #e5f0ff;
+}
+
+.card-title-icon {
+  color: #22d3ee;
+}
+
+.card-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tag {
+  border-radius: 999px;
+  padding: 2px 6px;
+  font-size: 10px;
+  border: 1px solid rgba(148,163,184,0.4);
+  color: #94a3b8;
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+  min-height: 180px;
+}
+
+@media (max-width: 1600px) {
+  .chart { min-height: 160px; }
+}
+</style>
diff --git a/src/views/report/dashboardPage/dashboard8/components/MonthCapacity.vue b/src/views/report/dashboardPage/dashboard8/components/MonthCapacity.vue
new file mode 100644
index 00000000..82c10cb8
--- /dev/null
+++ b/src/views/report/dashboardPage/dashboard8/components/MonthCapacity.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title">
+        <span class="card-title-icon">
+          <Icon icon="fa-solid:moon" />
+        </span>
+        <span>月产能达成情况</span>
+      </div>
+      <span class="tag">当月累计</span>
+    </div>
+    <div class="card-body">
+      <div class="card-body-row">
+        <div class="card-body-col" style="flex: 0 0 52%;">
+          <div ref="chartRef" class="chart"></div>
+        </div>
+        <div class="card-body-col">
+          <div class="metrics-grid">
+            <div class="metric-card">
+              <div class="metric-label">排产单数量</div>
+              <div class="metric-value" ref="monthOrderEl"></div>
+              <div class="metric-extra"><span>单</span><span>同比 +8.6%</span></div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-label">排产数量</div>
+              <div class="metric-value" ref="monthPlanEl"></div>
+              <div class="metric-extra"><span>件</span><span>较计划 +3.2%</span></div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-label">待生产数量</div>
+              <div class="metric-value warn" ref="monthPendingEl"></div>
+              <div class="metric-extra"><span>件</span><span>剩余 5 天完成</span></div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-label">产能达成率</div>
+              <div class="metric-value accent" ref="monthRateEl"></div>
+              <div class="metric-extra"><span>目标 ≥ 85%</span><span>接近预期</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import * as echarts from 'echarts'
+import { colors, animateCount, style } from '../utils'
+
+const month = { orders: 158, plan: 420000, pending: 75600, rate: 82.0 }
+
+const chartRef = ref<HTMLElement | null>(null)
+const monthOrderEl = ref<HTMLElement | null>(null)
+const monthPlanEl = ref<HTMLElement | null>(null)
+const monthPendingEl = ref<HTMLElement | null>(null)
+const monthRateEl = ref<HTMLElement | null>(null)
+
+let chart: echarts.ECharts | null = null
+
+const initChart = () => {
+  if (!chartRef.value) return
+  chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
+  chart.setOption({
+    backgroundColor: 'transparent',
+    tooltip: { trigger: 'item' },
+    legend: { bottom: '0%', left: 'center', textStyle: style.legendText },
+    series: [
+      {
+        type: 'pie',
+        radius: ['60%', '82%'],
+        center: ['50%', '55%'],
+        label: { show: false },
+        emphasis: { scale: false },
+        data: [
+          { value: month.plan - month.pending, name: '已完成', itemStyle: { color: colors.green } },
+          { value: month.pending, name: '待生产', itemStyle: { color: 'rgba(15,23,42,0.8)' } }
+        ]
+      }
+    ]
+  })
+}
+
+const resizeHandler = () => {
+  chart?.resize()
+}
+
+onMounted(() => {
+  initChart()
+  animateCount(monthOrderEl.value, month.orders, '', 900)
+  animateCount(monthPlanEl.value, month.plan, '', 900)
+  animateCount(monthPendingEl.value, month.pending, '', 900)
+  animateCount(monthRateEl.value, month.rate, '%', 900)
+  window.addEventListener('resize', resizeHandler)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resizeHandler)
+  chart?.dispose()
+})
+</script>
+
+<style scoped>
+.card {
+  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
+  border-radius: 10px;
+  border: 1px solid rgba(30,64,175,0.85);
+  box-shadow:
+    0 18px 45px rgba(15,23,42,0.95),
+    0 0 0 1px rgba(15,23,42,1),
+    inset 0 0 0 1px rgba(56,189,248,0.05);
+  padding: 10px 10px 10px 10px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.card::before,
+.card::after {
+  content: "";
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  border-radius: 2px;
+  border: 1px solid rgba(56,189,248,0.75);
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.card::before {
+  top: -1px;
+  left: -1px;
+  border-right: none;
+  border-bottom: none;
+}
+
+.card::after {
+  right: -1px;
+  bottom: -1px;
+  border-left: none;
+  border-top: none;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #e5f0ff;
+}
+
+.card-title-icon {
+  color: #22d3ee;
+}
+
+.card-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.card-body-row {
+  flex: 1;
+  display: flex;
+  gap: 8px;
+  min-height: 0;
+}
+
+.card-body-col {
+  flex: 1;
+  min-height: 0;
+}
+
+.tag {
+  border-radius: 999px;
+  padding: 2px 6px;
+  font-size: 10px;
+  border: 1px solid rgba(148,163,184,0.4);
+  color: #94a3b8;
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-auto-rows: 1fr;
+  gap: 6px;
+}
+
+.metric-card {
+  background: radial-gradient(circle at 0 0, rgba(56,189,248,0.16), transparent 70%);
+  border-radius: 8px;
+  border: 1px solid rgba(30,64,175,0.9);
+  padding: 6px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.metric-label {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.metric-value {
+  font-size: 20px;
+  font-weight: 800;
+  color: #e5f0ff;
+}
+
+.metric-value.accent { color: #22d3ee; }
+.metric-value.warn { color: #f59e0b; }
+.metric-value.ok { color: #22c55e; }
+
+.metric-extra {
+  font-size: 11px;
+  color: #94a3b8;
+  display: flex;
+  justify-content: space-between;
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+  min-height: 180px;
+}
+
+@media (max-width: 1600px) {
+  .chart { min-height: 160px; }
+}
+</style>
diff --git a/src/views/report/dashboardPage/dashboard8/components/OpsTrend.vue b/src/views/report/dashboardPage/dashboard8/components/OpsTrend.vue
new file mode 100644
index 00000000..277c305b
--- /dev/null
+++ b/src/views/report/dashboardPage/dashboard8/components/OpsTrend.vue
@@ -0,0 +1,272 @@
+<template>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title">
+        <span class="card-title-icon">
+          <Icon icon="fa-solid:wave-square" />
+        </span>
+        <span>开机率/稼动率趋势</span>
+      </div>
+      <div class="ops-header-right">
+        <div class="tabs">
+          <button
+            v-for="line in opsLines"
+            :key="line.name"
+            type="button"
+            class="tab-btn"
+            :class="{ active: currentLine === line.name }"
+            @click="updateOps(line.name)"
+          >
+            {{ line.name }}
+          </button>
+        </div>
+        <span class="tag">{{ summary }}</span>
+      </div>
+    </div>
+    <div class="card-body">
+      <div ref="chartRef" class="chart"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import * as echarts from 'echarts'
+import { colors, style } from '../utils'
+
+const opsDays: string[] = []
+for (let i = 7; i > 0; i--) {
+  const d = new Date()
+  d.setDate(d.getDate() - i)
+  opsDays.push(`${d.getMonth() + 1}-${d.getDate()}`)
+}
+
+const opsLines = [
+  { name: '产线A', run: [85, 87, 84, 89, 88, 86, 85], avail: [78, 82, 80, 84, 83, 81, 79] },
+  { name: '产线B', run: [83, 84, 82, 86, 85, 84, 83], avail: [76, 78, 77, 80, 79, 78, 77] },
+  { name: '产线C', run: [88, 90, 89, 91, 92, 90, 89], avail: [82, 84, 83, 86, 87, 85, 84] },
+  { name: '产线D', run: [80, 82, 81, 83, 84, 82, 81], avail: [72, 74, 73, 76, 77, 75, 74] },
+  { name: '产线E', run: [86, 87, 86, 88, 89, 87, 86], avail: [79, 81, 80, 82, 83, 81, 80] },
+  { name: '产线F', run: [90, 92, 91, 93, 94, 92, 91], avail: [84, 86, 85, 87, 88, 86, 85] }
+]
+
+const currentLine = ref(opsLines[0].name)
+const summary = ref('')
+const chartRef = ref<HTMLElement | null>(null)
+let chart: echarts.ECharts | null = null
+
+const avg = (arr: number[]) => {
+  return Math.round((arr.reduce((s, v) => s + v, 0) / arr.length) * 10) / 10
+}
+
+const updateOps = (lineName: string) => {
+  currentLine.value = lineName
+  const item = opsLines.find((x) => x.name === lineName) || opsLines[0]
+  summary.value = `${item.name} · 开机率均值 ${avg(item.run)}% · 稼动率均值 ${avg(item.avail)}%`
+
+  if (!chart) return
+  chart.setOption({
+    xAxis: { data: opsDays },
+    series: [{ data: item.run }, { data: item.avail }]
+  })
+}
+
+const initChart = () => {
+  if (!chartRef.value) return
+  chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
+  chart.setOption({
+    backgroundColor: 'transparent',
+    tooltip: { trigger: 'axis' },
+    legend: { top: 0, right: 0, textStyle: style.legendText },
+    grid: { top: '22%', left: '6%', right: '6%', bottom: '10%', containLabel: true },
+    xAxis: { type: 'category', data: opsDays, axisLine: style.axisLine, axisLabel: style.axisLabel },
+    yAxis: [
+      {
+        type: 'value',
+        name: '开机率(%)',
+        max: 100,
+        nameTextStyle: { color: '#a8b7d8', fontSize: 12 },
+        axisLabel: style.axisLabel,
+        splitLine: style.splitLine
+      },
+      {
+        type: 'value',
+        name: '稼动率(%)',
+        max: 100,
+        nameTextStyle: { color: '#a8b7d8', fontSize: 12 },
+        axisLabel: style.axisLabel,
+        splitLine: { show: false }
+      }
+    ],
+    series: [
+      {
+        name: '开机率',
+        type: 'line',
+        smooth: true,
+        showSymbol: false,
+        yAxisIndex: 0,
+        lineStyle: { width: 2, color: colors.blue },
+        itemStyle: { color: colors.blue },
+        data: []
+      },
+      {
+        name: '稼动率',
+        type: 'line',
+        smooth: true,
+        showSymbol: false,
+        yAxisIndex: 1,
+        lineStyle: { width: 2, color: colors.green },
+        itemStyle: { color: colors.green },
+        data: []
+      }
+    ]
+  })
+  updateOps(currentLine.value)
+}
+
+const resizeHandler = () => {
+  chart?.resize()
+}
+
+onMounted(() => {
+  initChart()
+  window.addEventListener('resize', resizeHandler)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resizeHandler)
+  chart?.dispose()
+})
+</script>
+
+<style scoped>
+.card {
+  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
+  border-radius: 10px;
+  border: 1px solid rgba(30,64,175,0.85);
+  box-shadow:
+    0 18px 45px rgba(15,23,42,0.95),
+    0 0 0 1px rgba(15,23,42,1),
+    inset 0 0 0 1px rgba(56,189,248,0.05);
+  padding: 10px 10px 10px 10px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.card::before,
+.card::after {
+  content: "";
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  border-radius: 2px;
+  border: 1px solid rgba(56,189,248,0.75);
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.card::before {
+  top: -1px;
+  left: -1px;
+  border-right: none;
+  border-bottom: none;
+}
+
+.card::after {
+  right: -1px;
+  bottom: -1px;
+  border-left: none;
+  border-top: none;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #e5f0ff;
+}
+
+.card-title-icon {
+  color: #22d3ee;
+}
+
+.card-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tag {
+  border-radius: 999px;
+  padding: 2px 6px;
+  font-size: 10px;
+  border: 1px solid rgba(148,163,184,0.4);
+  color: #94a3b8;
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+  min-height: 180px;
+}
+
+@media (max-width: 1600px) {
+  .chart { min-height: 160px; }
+}
+
+.ops-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+.tabs {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.tab-btn {
+  cursor: pointer;
+  user-select: none;
+  border-radius: 999px;
+  border: 1px solid rgba(148, 163, 184, 0.55);
+  background: rgba(2, 6, 23, 0.28);
+  color: var(--muted);
+  padding: 3px 8px;
+  font-size: 10px;
+  line-height: 1;
+  transition: border-color 0.25s, box-shadow 0.25s, color 0.25s, background 0.25s;
+}
+
+.tab-btn:hover {
+  border-color: rgba(56, 189, 248, 0.9);
+  color: #e0f2fe;
+}
+
+.tab-btn.active {
+  border-color: rgba(34, 211, 238, 0.9);
+  color: #e0f2fe;
+  box-shadow: 0 0 14px rgba(34, 211, 238, 0.45);
+  background: radial-gradient(circle at 0 0, rgba(34, 211, 238, 0.32), rgba(2, 6, 23, 0.2) 60%);
+}
+</style>
diff --git a/src/views/report/dashboardPage/dashboard8/components/QualityTrend.vue b/src/views/report/dashboardPage/dashboard8/components/QualityTrend.vue
new file mode 100644
index 00000000..8f732241
--- /dev/null
+++ b/src/views/report/dashboardPage/dashboard8/components/QualityTrend.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title">
+        <span class="card-title-icon">
+          <Icon icon="fa-solid:check-double" />
+        </span>
+        <span>成品检合格率趋势图</span>
+      </div>
+      <span class="tag">按天统计（全产线）</span>
+    </div>
+    <div class="card-body">
+      <div id="chart-quality" class="chart"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import * as echarts from 'echarts'
+import { useChart, colors, style } from '../utils'
+
+const { init } = useChart('chart-quality')
+
+const last7Days: string[] = []
+for (let i = 6; i >= 0; i--) {
+  const d = new Date()
+  d.setDate(d.getDate() - i)
+  last7Days.push(`${d.getMonth() + 1}-${d.getDate()}`)
+}
+
+const passRate = [98.5, 99.2, 97.8, 98.9, 99.0, 98.2, 99.5]
+
+onMounted(() => {
+  const chart = init()
+  if (!chart) return
+
+  chart.setOption({
+    backgroundColor: 'transparent',
+    tooltip: { trigger: 'axis' },
+    grid: { top: '18%', left: '6%', right: '6%', bottom: '10%', containLabel: true },
+    xAxis: { type: 'category', data: last7Days, axisLine: style.axisLine, axisLabel: style.axisLabel },
+    yAxis: { type: 'value', min: 96, max: 100, axisLine: { show: false }, axisLabel: style.axisLabel, splitLine: style.splitLine },
+    series: [{
+      name: '合格率',
+      type: 'bar',
+      barWidth: '45%',
+      itemStyle: {
+        borderRadius: [6, 6, 0, 0],
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: colors.purple },
+          { offset: 1, color: 'rgba(139,92,246,0.10)' }
+        ])
+      },
+      data: passRate,
+      markLine: {
+        symbol: ['none', 'none'],
+        label: { show: true, color: '#fff', fontSize: 12, formatter: '平均 {c}%' },
+        lineStyle: { color: colors.cyan, width: 2, type: 'dashed' },
+        data: [{ type: 'average', name: '平均值' }]
+      }
+    }]
+  })
+})
+</script>
+
+<style scoped>
+.card {
+  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
+  border-radius: 10px;
+  border: 1px solid rgba(30,64,175,0.85);
+  box-shadow:
+    0 18px 45px rgba(15,23,42,0.95),
+    0 0 0 1px rgba(15,23,42,1),
+    inset 0 0 0 1px rgba(56,189,248,0.05);
+  padding: 10px 10px 10px 10px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.card::before,
+.card::after {
+  content: "";
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  border-radius: 2px;
+  border: 1px solid rgba(56,189,248,0.75);
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.card::before {
+  top: -1px;
+  left: -1px;
+  border-right: none;
+  border-bottom: none;
+}
+
+.card::after {
+  right: -1px;
+  bottom: -1px;
+  border-left: none;
+  border-top: none;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #e5f0ff;
+}
+
+.card-title-icon {
+  color: #22d3ee;
+}
+
+.card-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tag {
+  border-radius: 999px;
+  padding: 2px 6px;
+  font-size: 10px;
+  border: 1px solid rgba(148,163,184,0.4);
+  color: #94a3b8;
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+  min-height: 180px;
+}
+
+@media (max-width: 1600px) {
+  .chart { min-height: 160px; }
+}
+</style>
diff --git a/src/views/report/dashboardPage/dashboard8/components/RealAlarm.vue b/src/views/report/dashboardPage/dashboard8/components/RealAlarm.vue
new file mode 100644
index 00000000..c41113eb
--- /dev/null
+++ b/src/views/report/dashboardPage/dashboard8/components/RealAlarm.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title">
+        <span class="card-title-icon">
+          <Icon icon="fa-solid:bell" />
+        </span>
+        <span>实时报警信息</span>
+      </div>
+      <span class="tag">滚动展示</span>
+    </div>
+    <div class="card-body">
+      <ul ref="listRef" class="alarm-list">
+        <li
+          v-for="(a, index) in alarms"
+          :key="index"
+          class="alarm-item"
+          :class="[a.type, { 'animating-out': index === 0 && isAnimating }]"
+          :title="a.msg"
+        >
+          <span class="alarm-time">[{{ a.time }}]</span>
+          <span class="alarm-msg">{{ a.msg }}</span>
+          <span class="alarm-level">{{ a.level }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const alarms = ref([
+  { time: '08:12:03', level: '严重', type: 'danger', msg: '产线B-包装工位异常停机' },
+  { time: '08:15:27', level: '严重', type: 'danger', msg: '产线C-温控传感器漂移' },
+  { time: '08:20:10', level: '警告', type: 'warn', msg: '产线A-物料待料' },
+  { time: '08:35:42', level: '提示', type: 'safe', msg: '产线E-设备保养提醒' },
+  { time: '08:40:18', level: '提示', type: 'safe', msg: '产线F-成品抽检合格' },
+  { time: '09:02:56', level: '严重', type: 'danger', msg: '产线D-站点扫码失败' },
+  { time: '09:15:12', level: '警告', type: 'warn', msg: '产线H-人员到岗不足' },
+  { time: '09:26:33', level: '警告', type: 'warn', msg: '产线I-实时能耗升高' },
+  { time: '09:37:05', level: '严重', type: 'danger', msg: '产线G-夹具寿命告警' },
+  { time: '09:45:21', level: '警告', type: 'warn', msg: '产线J-物流滞后' }
+])
+
+const isAnimating = ref(false)
+const listRef = ref<HTMLElement | null>(null)
+let timer: ReturnType<typeof setInterval> | null = null
+
+onMounted(() => {
+  timer = setInterval(() => {
+    isAnimating.value = true
+    setTimeout(() => {
+      const first = alarms.value.shift()
+      if (first) {
+        alarms.value.push(first)
+      }
+      isAnimating.value = false
+    }, 360)
+  }, 3000)
+})
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+})
+</script>
+
+<style scoped>
+.card {
+  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
+  border-radius: 10px;
+  border: 1px solid rgba(30,64,175,0.85);
+  box-shadow:
+    0 18px 45px rgba(15,23,42,0.95),
+    0 0 0 1px rgba(15,23,42,1),
+    inset 0 0 0 1px rgba(56,189,248,0.05);
+  padding: 10px 10px 10px 10px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.card::before,
+.card::after {
+  content: "";
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  border-radius: 2px;
+  border: 1px solid rgba(56,189,248,0.75);
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.card::before {
+  top: -1px;
+  left: -1px;
+  border-right: none;
+  border-bottom: none;
+}
+
+.card::after {
+  right: -1px;
+  bottom: -1px;
+  border-left: none;
+  border-top: none;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #e5f0ff;
+}
+
+.card-title-icon {
+  color: #22d3ee;
+}
+
+.card-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden; /* Ensure list stays within */
+}
+
+.tag {
+  border-radius: 999px;
+  padding: 2px 6px;
+  font-size: 10px;
+  border: 1px solid rgba(148,163,184,0.4);
+  color: #94a3b8;
+}
+
+.alarm-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  height: 100%;
+  overflow: hidden;
+}
+
+.alarm-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 8px;
+  border-radius: 6px;
+  background: rgba(15,23,42,0.92);
+  border: 1px solid rgba(30,64,175,0.9);
+  font-size: 11px;
+  color: #e5f0ff;
+  transition: background 0.3s, box-shadow 0.3s;
+  flex-shrink: 0; /* Prevent shrinking */
+}
+
+.alarm-item.danger { border-left: 3px solid #ef4444; box-shadow: 0 0 18px rgba(239,68,68,0.4); }
+.alarm-item.warn { border-left: 3px solid #f59e0b; box-shadow: 0 0 14px rgba(245,158,11,0.35); }
+.alarm-item.safe { border-left: 3px solid #22c55e; box-shadow: 0 0 12px rgba(34,197,94,0.35); }
+
+.alarm-time {
+  width: 64px;
+  flex: 0 0 auto;
+  color: #94a3b8;
+}
+
+.alarm-msg {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.alarm-level {
+  flex: 0 0 auto;
+  border-radius: 999px;
+  padding: 2px 6px;
+  border: 1px solid rgba(148,163,184,0.6);
+  font-size: 10px;
+}
+
+/* Animation class */
+.animating-out {
+  transition: all 0.35s;
+  transform: translateY(-48px);
+  opacity: 0;
+}
+</style>
diff --git a/src/views/report/dashboardPage/dashboard8/components/TaskBoard.vue b/src/views/report/dashboardPage/dashboard8/components/TaskBoard.vue
new file mode 100644
index 00000000..d8048d39
--- /dev/null
+++ b/src/views/report/dashboardPage/dashboard8/components/TaskBoard.vue
@@ -0,0 +1,296 @@
+<template>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title">
+        <span class="card-title-icon">
+          <Icon icon="fa-solid:table-list" />
+        </span>
+        <span>产线任务看板</span>
+      </div>
+      <div class="legend-inline">
+        <span class="tag">实时刷新 · 滚动展示</span>
+        <span class="dot" style="background: var(--green);"></span> 已完成
+        <span class="dot" style="background: var(--warn);"></span> 进度偏低
+      </div>
+    </div>
+    <div class="card-body">
+      <div class="table-shell">
+        <table class="task-table">
+          <thead>
+            <tr>
+              <th>产线名称</th>
+              <th>排产单</th>
+              <th>产品名称</th>
+              <th>计划数量</th>
+              <th>完工数量</th>
+              <th>完工率</th>
+            </tr>
+          </thead>
+          <tbody ref="tbodyRef">
+            <tr v-for="(r, index) in tasks" :key="index">
+              <td>{{ r.line }}</td>
+              <td :style="{ color: colors.cyan }">{{ r.order }}</td>
+              <td :title="r.product">{{ r.product }}</td>
+              <td>{{ r.plan }}</td>
+              <td>{{ r.done }}</td>
+              <td>
+                <div style="display:flex; flex-direction:column; gap:4px; align-items:center;">
+                  <div class="progress-bar">
+                    <div class="progress-fill" :style="{ width: getRate(r) + '%', background: getRateColor(r) }"></div>
+                  </div>
+                  <span :style="{ color: getRateColor(r), fontWeight: 700 }">{{ getRate(r) }}%</span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const colors = {
+  blue: '#1e90ff',
+  cyan: '#22d3ee',
+  green: '#22c55e',
+  purple: '#8b5cf6',
+  warn: '#f59e0b',
+  danger: '#ef4444'
+}
+
+const tasks = [
+  { line: '产线A', order: 'ORD-2025121701', product: '智能模组X1', plan: 1200, done: 1080 },
+  { line: '产线B', order: 'ORD-2025121702', product: '高密电芯M2', plan: 1500, done: 1120 },
+  { line: '产线C', order: 'ORD-2025121703', product: '组装组件A5', plan: 800, done: 760 },
+  { line: '产线D', order: 'ORD-2025121704', product: '精密外壳S7', plan: 600, done: 480 },
+  { line: '产线E', order: 'ORD-2025121705', product: '控制板K9', plan: 900, done: 855 },
+  { line: '产线F', order: 'ORD-2025121706', product: '电源模组P3', plan: 1100, done: 990 },
+  { line: '产线G', order: 'ORD-2025121707', product: '线束套件W4', plan: 700, done: 560 },
+  { line: '产线H', order: 'ORD-2025121708', product: '散热组件H2', plan: 650, done: 559 },
+  { line: '产线I', order: 'ORD-2025121709', product: '传感器C8', plan: 500, done: 450 },
+  { line: '产线J', order: 'ORD-2025121710', product: '整机Z3', plan: 1000, done: 800 }
+]
+
+const getRate = (r: any) => Math.round((r.done / r.plan) * 100)
+
+const getRateColor = (r: any) => {
+  const rate = getRate(r)
+  if (rate < 50) return colors.danger
+  else if (rate < 90) return colors.warn
+  return colors.green
+}
+
+const tbodyRef = ref<HTMLElement | null>(null)
+let scrollTimer: number | undefined
+
+const setBodyHeight = () => {
+  if (!tbodyRef.value) return
+  // Wait for render
+  setTimeout(() => {
+    if (!tbodyRef.value) return
+    const sample = tbodyRef.value.querySelector('tr') as HTMLElement | null
+    const rh = sample ? sample.getBoundingClientRect().height : 40
+    tbodyRef.value.style.height = `${Math.round(rh * 6)}px`
+  }, 100)
+}
+
+const startScroll = () => {
+  scrollTimer = window.setInterval(() => {
+    if (!tbodyRef.value) return
+    const first = tbodyRef.value.firstElementChild as HTMLElement | null
+    if (!first) return
+    first.style.transition = 'all 0.35s'
+    first.style.transform = 'translateY(-48px)'
+    first.style.opacity = '0'
+    window.setTimeout(() => {
+      if (!tbodyRef.value) return
+      first.style.transition = 'none'
+      first.style.transform = 'translateY(0)'
+      first.style.opacity = '1'
+      tbodyRef.value.appendChild(first)
+    }, 360)
+  }, 5000)
+}
+
+onMounted(() => {
+  setBodyHeight()
+  startScroll()
+  window.addEventListener('resize', setBodyHeight)
+})
+
+onUnmounted(() => {
+  if (scrollTimer) clearInterval(scrollTimer)
+  window.removeEventListener('resize', setBodyHeight)
+})
+</script>
+
+<style scoped>
+.card {
+  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
+  border-radius: 10px;
+  border: 1px solid rgba(30,64,175,0.85);
+  box-shadow:
+    0 18px 45px rgba(15,23,42,0.95),
+    0 0 0 1px rgba(15,23,42,1),
+    inset 0 0 0 1px rgba(56,189,248,0.05);
+  padding: 10px 10px 10px 10px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.card::before,
+.card::after {
+  content: "";
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  border-radius: 2px;
+  border: 1px solid rgba(56,189,248,0.75);
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.card::before {
+  top: -1px;
+  left: -1px;
+  border-right: none;
+  border-bottom: none;
+}
+
+.card::after {
+  right: -1px;
+  bottom: -1px;
+  border-left: none;
+  border-top: none;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #e5f0ff;
+}
+
+.card-title-icon {
+  color: #22d3ee;
+}
+
+.card-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.legend-inline {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 10px;
+  color: #94a3b8;
+}
+
+.tag {
+  border-radius: 999px;
+  padding: 2px 6px;
+  font-size: 10px;
+  border: 1px solid rgba(148,163,184,0.4);
+  color: #94a3b8;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+/* Scoped styles specific to this component but we expect common styles from parent */
+.table-shell {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.task-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0 5px;
+  table-layout: fixed;
+  font-size: 12px;
+}
+
+.task-table thead {
+  background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.18), transparent 70%);
+}
+
+.task-table thead th {
+  padding: 6px 4px;
+  color: var(--accent);
+  font-weight: 600;
+  text-align: center;
+  border-bottom: 1px solid rgba(51, 65, 85, 0.9);
+}
+
+.task-table tbody {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+}
+
+.task-table thead tr,
+.task-table tbody tr {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+}
+
+.task-table tbody td {
+  padding: 6px 4px;
+  text-align: center;
+  color: var(--text);
+  background: rgba(15, 23, 42, 0.88);
+  border-radius: 4px;
+  border: 1px solid rgba(30, 64, 175, 0.7);
+}
+
+.task-table tbody tr:nth-child(even) td {
+  background: rgba(15, 23, 42, 0.96);
+}
+
+.task-table tbody tr:hover td {
+  border-color: rgba(56, 189, 248, 0.95);
+  box-shadow: 0 0 14px rgba(56, 189, 248, 0.45);
+}
+
+.progress-bar {
+  height: 6px;
+  background: rgba(15, 23, 42, 1);
+  border-radius: 999px;
+  overflow: hidden;
+  border: 1px solid rgba(148, 163, 184, 0.45);
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 999px;
+  transition: width 0.4s ease-out;
+}
+</style>
diff --git a/src/views/report/dashboardPage/dashboard8/components/TodayOps.vue b/src/views/report/dashboardPage/dashboard8/components/TodayOps.vue
new file mode 100644
index 00000000..b8e098ab
--- /dev/null
+++ b/src/views/report/dashboardPage/dashboard8/components/TodayOps.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title">
+        <span class="card-title-icon">
+          <Icon icon="fa-solid:gauge-high" />
+        </span>
+        <span>今日开机率/稼动率</span>
+      </div>
+      <span class="chip">{{ currentLineName }}</span>
+    </div>
+    <div class="card-body">
+      <div id="chart-today" class="chart"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useChart, colors } from '../utils'
+
+const { init, instance } = useChart('chart-today')
+
+const lineMetrics = [
+  { name: '产线A', run: 88, avail: 82 },
+  { name: '产线B', run: 86, avail: 80 },
+  { name: '产线C', run: 90, avail: 84 },
+  { name: '产线D', run: 85, avail: 79 },
+  { name: '产线E', run: 87, avail: 81 },
+  { name: '产线F', run: 92, avail: 86 }
+]
+
+const currentLineName = ref(lineMetrics[0].name)
+let timer: ReturnType<typeof setInterval> | null = null
+let currentLineIndex = 0
+
+const gaugeOption = (run: number, avail: number) => {
+  return {
+    backgroundColor: 'transparent',
+    tooltip: { show: true },
+    series: [
+      {
+        type: 'gauge',
+        center: ['50%', '60%'],
+        startAngle: 200,
+        endAngle: -20,
+        min: 0,
+        max: 100,
+        splitNumber: 10,
+        radius: '88%',
+        axisLine: { lineStyle: { width: 8, color: [[1, 'rgba(30,144,255,0.18)']] } },
+        axisTick: { show: false },
+        splitLine: { show: false },
+        axisLabel: { show: false },
+        pointer: { show: false },
+        progress: { show: true, width: 8, itemStyle: { color: colors.blue } },
+        detail: { formatter: '{value}%', color: '#fff', fontSize: 26, offsetCenter: ['0%', '-5%'] },
+        title: { show: true, color: '#a8b7d8', fontSize: 12, offsetCenter: ['0%', '-25%'] },
+        data: [{ value: run, name: '开机率' }]
+      },
+      {
+        type: 'gauge',
+        center: ['50%', '60%'],
+        startAngle: 200,
+        endAngle: -20,
+        min: 0,
+        max: 100,
+        radius: '68%',
+        axisLine: { lineStyle: { width: 8, color: [[1, 'rgba(16,185,129,0.18)']] } },
+        axisTick: { show: false },
+        splitLine: { show: false },
+        axisLabel: { show: false },
+        pointer: { show: false },
+        progress: { show: true, width: 8, itemStyle: { color: colors.green } },
+        detail: { formatter: '{value}%', color: '#fff', fontSize: 20, offsetCenter: ['0%', '45%'] },
+        title: { show: true, color: '#a8b7d8', fontSize: 12, offsetCenter: ['0%', '25%'] },
+        data: [{ value: avail, name: '稼动率' }]
+      }
+    ]
+  }
+}
+
+onMounted(() => {
+  const chart = init()
+  if (!chart) return
+
+  // Initial render
+  chart.setOption(gaugeOption(lineMetrics[0].run, lineMetrics[0].avail))
+
+  // Start rotation
+  timer = setInterval(() => {
+    currentLineIndex = (currentLineIndex + 1) % lineMetrics.length
+    const item = lineMetrics[currentLineIndex]
+    currentLineName.value = item.name
+    
+    // Update chart
+    const c = instance()
+    if (c) {
+      c.setOption(gaugeOption(item.run, item.avail))
+    }
+  }, 3000)
+})
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+})
+</script>
+
+<style scoped>
+.card {
+  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
+  border-radius: 10px;
+  border: 1px solid rgba(30,64,175,0.85);
+  box-shadow:
+    0 18px 45px rgba(15,23,42,0.95),
+    0 0 0 1px rgba(15,23,42,1),
+    inset 0 0 0 1px rgba(56,189,248,0.05);
+  padding: 10px 10px 10px 10px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.card::before,
+.card::after {
+  content: "";
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  border-radius: 2px;
+  border: 1px solid rgba(56,189,248,0.75);
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.card::before {
+  top: -1px;
+  left: -1px;
+  border-right: none;
+  border-bottom: none;
+}
+
+.card::after {
+  right: -1px;
+  bottom: -1px;
+  border-left: none;
+  border-top: none;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #e5f0ff;
+}
+
+.card-title-icon {
+  color: #22d3ee;
+}
+
+.card-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.chip {
+  border-radius: 999px;
+  border: 1px solid rgba(148,163,184,0.5);
+  padding: 4px 10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(15,23,42,0.75);
+  color: #94a3b8;
+  font-size: 12px;
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+  min-height: 180px;
+}
+
+@media (max-width: 1600px) {
+  .chart { min-height: 160px; }
+}
+</style>
diff --git a/src/views/report/dashboardPage/dashboard8/components/WeekTrend.vue b/src/views/report/dashboardPage/dashboard8/components/WeekTrend.vue
new file mode 100644
index 00000000..7bcd1f72
--- /dev/null
+++ b/src/views/report/dashboardPage/dashboard8/components/WeekTrend.vue
@@ -0,0 +1,182 @@
+<template>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title">
+        <span class="card-title-icon">
+          <Icon icon="fa-solid:chart-line" />
+        </span>
+        <span>周生产趋势</span>
+      </div>
+      <div class="legend-inline">
+        <span class="dot" style="background: var(--accent);"></span> 产量
+        <span class="dot" style="background: var(--purple);"></span> 计划
+      </div>
+    </div>
+    <div class="card-body">
+      <div ref="chartRef" class="chart"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import * as echarts from 'echarts'
+import { colors, style } from '../utils'
+
+const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+const weekPlan = [2600, 2800, 3000, 3100, 3200, 2900, 2700]
+const weekReal = [2550, 2750, 2950, 3050, 3180, 2850, 2680]
+
+const chartRef = ref<HTMLElement | null>(null)
+let chart: echarts.ECharts | null = null
+
+const initChart = () => {
+  if (!chartRef.value) return
+  chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
+  chart.setOption({
+    backgroundColor: 'transparent',
+    tooltip: { trigger: 'axis' },
+    legend: { top: 0, right: 0, textStyle: style.legendText },
+    grid: { top: '20%', left: '6%', right: '6%', bottom: '10%', containLabel: true },
+    xAxis: { type: 'category', data: weekDays, axisLine: style.axisLine, axisLabel: style.axisLabel },
+    yAxis: { type: 'value', axisLine: style.axisLine, axisLabel: style.axisLabel, splitLine: style.splitLine },
+    series: [
+      {
+        name: '计划产量',
+        type: 'line',
+        smooth: true,
+        showSymbol: false,
+        lineStyle: { width: 2, color: colors.purple },
+        data: weekPlan
+      },
+      {
+        name: '实际产量',
+        type: 'line',
+        smooth: true,
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        lineStyle: { width: 3, color: colors.cyan },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(34,211,238,0.28)' },
+            { offset: 1, color: 'rgba(15,23,42,0.8)' }
+          ])
+        },
+        data: weekReal
+      }
+    ]
+  })
+}
+
+const resizeHandler = () => {
+  chart?.resize()
+}
+
+onMounted(() => {
+  initChart()
+  window.addEventListener('resize', resizeHandler)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resizeHandler)
+  chart?.dispose()
+})
+</script>
+
+<style scoped>
+.card {
+  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
+  border-radius: 10px;
+  border: 1px solid rgba(30,64,175,0.85);
+  box-shadow:
+    0 18px 45px rgba(15,23,42,0.95),
+    0 0 0 1px rgba(15,23,42,1),
+    inset 0 0 0 1px rgba(56,189,248,0.05);
+  padding: 10px 10px 10px 10px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.card::before,
+.card::after {
+  content: "";
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  border-radius: 2px;
+  border: 1px solid rgba(56,189,248,0.75);
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.card::before {
+  top: -1px;
+  left: -1px;
+  border-right: none;
+  border-bottom: none;
+}
+
+.card::after {
+  right: -1px;
+  bottom: -1px;
+  border-left: none;
+  border-top: none;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #e5f0ff;
+}
+
+.card-title-icon {
+  color: #22d3ee;
+}
+
+.card-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.legend-inline {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 10px;
+  color: #94a3b8;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+  min-height: 180px;
+}
+
+@media (max-width: 1600px) {
+  .chart { min-height: 160px; }
+}
+</style>
diff --git a/src/views/report/dashboardPage/dashboard8/dashboard8.html b/src/views/report/dashboardPage/dashboard8/dashboard8.html
new file mode 100644
index 00000000..b5fd6196
--- /dev/null
+++ b/src/views/report/dashboardPage/dashboard8/dashboard8.html
@@ -0,0 +1,1243 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>智能制造产线可视化看板</title>
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --bg: #050816;
+            --bg-deep: #020617;
+            --card-bg: rgba(15, 23, 42, 0.86);
+            --border: rgba(56, 189, 248, 0.35);
+            --text: #e5f0ff;
+            --muted: #94a3b8;
+            --primary: #38bdf8;
+            --accent: #22d3ee;
+            --blue: #1e90ff;
+            --green: #22c55e;
+            --purple: #8b5cf6;
+            --warn: #f59e0b;
+            --danger: #ef4444;
+            --gap: 10px;
+            --header-h: 86px;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft Yahei", Arial, sans-serif;
+            color: var(--text);
+            background-color: var(--bg-deep);
+            background-image:
+                radial-gradient(circle at 20% 0, rgba(56, 189, 248, 0.26) 0, transparent 48%),
+                radial-gradient(circle at 80% 110%, rgba(129, 140, 248, 0.22) 0, transparent 52%),
+                linear-gradient(135deg, #020617 0%, #020617 45%, #020617 100%);
+        }
+
+        .bg-grid {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            background-image: linear-gradient(rgba(15,23,42,0.8) 1px, transparent 1px),
+                              linear-gradient(90deg, rgba(15,23,42,0.8) 1px, transparent 1px);
+            background-size: 70px 70px;
+            opacity: 0.55;
+            z-index: 0;
+        }
+
+        .bg-scan {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            pointer-events: none;
+            z-index: 0;
+        }
+
+        .scan-line {
+            position: absolute;
+            top: -40%;
+            left: 0;
+            width: 100%;
+            height: 40%;
+            background: radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.38), transparent 70%);
+            opacity: 0.5;
+            filter: blur(32px);
+            animation: scanDown 16s linear infinite;
+        }
+
+        @keyframes scanDown {
+            0% { transform: translateY(-100%); }
+            100% { transform: translateY(260%); }
+        }
+
+        header {
+            height: var(--header-h);
+            position: relative;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 24px;
+            background:
+                linear-gradient(to bottom, rgba(15,23,42,0.95), rgba(15,23,42,0.85)),
+                radial-gradient(circle at 50% 0, rgba(56,189,248,0.22), transparent 60%);
+            border-bottom: 1px solid rgba(148,163,184,0.35);
+            box-shadow: 0 10px 35px rgba(15,23,42,0.9);
+        }
+
+        .header-inner {
+            max-width: 1920px;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .title-wrap {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .title-mark {
+            width: 42px;
+            height: 42px;
+            border-radius: 50%;
+            border: 1px solid rgba(56,189,248,0.75);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: radial-gradient(circle at 30% 30%, rgba(56,189,248,0.35), transparent 70%);
+            box-shadow: 0 0 24px rgba(56,189,248,0.55);
+        }
+
+        .title-mark i {
+            color: var(--accent);
+            font-size: 20px;
+        }
+
+        .title {
+            font-size: 32px;
+            font-weight: 900;
+            letter-spacing: 4px;
+            background: linear-gradient(to bottom, #e0f2fe, #60a5fa);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-shadow: 0 0 20px rgba(56,189,248,0.65);
+        }
+
+        .sub-title {
+            font-size: 12px;
+            color: var(--muted);
+            margin-top: 3px;
+            letter-spacing: 2px;
+        }
+
+        .header-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            font-size: 12px;
+            color: var(--muted);
+        }
+
+        .chip {
+            border-radius: 999px;
+            border: 1px solid rgba(148,163,184,0.5);
+            padding: 4px 10px;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            background: rgba(15,23,42,0.75);
+        }
+
+        .chip i {
+            color: var(--accent);
+        }
+
+        .chip-strong {
+            border-color: rgba(56,189,248,0.8);
+            background: radial-gradient(circle at 0 0, rgba(56,189,248,0.35), transparent 70%);
+            color: #e0f2fe;
+        }
+
+        .tabs {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            flex-wrap: wrap;
+            justify-content: flex-end;
+        }
+
+        .tab-btn {
+            cursor: pointer;
+            user-select: none;
+            border-radius: 999px;
+            border: 1px solid rgba(148,163,184,0.55);
+            background: rgba(2, 6, 23, 0.28);
+            color: var(--muted);
+            padding: 3px 8px;
+            font-size: 10px;
+            line-height: 1;
+            transition: border-color 0.25s, box-shadow 0.25s, color 0.25s, background 0.25s;
+        }
+
+        .tab-btn:hover {
+            border-color: rgba(56,189,248,0.9);
+            color: #e0f2fe;
+        }
+
+        .tab-btn.active {
+            border-color: rgba(34,211,238,0.9);
+            color: #e0f2fe;
+            box-shadow: 0 0 14px rgba(34,211,238,0.45);
+            background: radial-gradient(circle at 0 0, rgba(34,211,238,0.32), rgba(2,6,23,0.2) 60%);
+        }
+
+        main {
+            flex: 1;
+            padding: 8px var(--gap) var(--gap);
+            position: relative;
+            z-index: 1;
+            display: flex;
+            flex-direction: column;
+            gap: var(--gap);
+            min-height: 0;
+        }
+
+        .layout {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: var(--gap);
+            max-width: 1920px;
+            margin: 0 auto;
+            min-height: 0;
+        }
+
+        .row {
+            display: flex;
+            gap: var(--gap);
+            min-height: 0;
+        }
+
+        .row-1 { flex: 0 0 36%; }
+        .row-2 { flex: 0 0 32%; }
+        .row-3 { flex: 0 0 32%; }
+
+        .card {
+            background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
+            border-radius: 10px;
+            border: 1px solid rgba(30,64,175,0.85);
+            box-shadow:
+                0 18px 45px rgba(15,23,42,0.95),
+                0 0 0 1px rgba(15,23,42,1),
+                inset 0 0 0 1px rgba(56,189,248,0.05);
+            padding: 10px 10px 10px 10px;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .card::before,
+        .card::after {
+            content: "";
+            position: absolute;
+            width: 13px;
+            height: 13px;
+            border-radius: 2px;
+            border: 1px solid rgba(56,189,248,0.75);
+            opacity: 0.6;
+        }
+
+        .card::before {
+            top: -1px;
+            left: -1px;
+            border-right: none;
+            border-bottom: none;
+        }
+
+        .card::after {
+            right: -1px;
+            bottom: -1px;
+            border-left: none;
+            border-top: none;
+        }
+
+        .card-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 8px;
+            padding-bottom: 4px;
+            border-bottom: 1px solid rgba(41, 54, 95, 0.9);
+        }
+
+        .card-title {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 15px;
+            font-weight: 700;
+        }
+
+        .card-title i {
+            color: var(--accent);
+        }
+
+        .card-sub {
+            font-size: 11px;
+            color: var(--muted);
+        }
+
+        .card-body {
+            flex: 1;
+            min-height: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .card-body-row {
+            flex: 1;
+            display: flex;
+            gap: 8px;
+            min-height: 0;
+        }
+
+        .card-body-col {
+            flex: 1;
+            min-height: 0;
+        }
+
+        .chart {
+            width: 100%;
+            height: 100%;
+            min-height: 240px;
+        }
+
+        .table-shell {
+            flex: 1;
+            min-height: 0;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .task-table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0 5px;
+            table-layout: fixed;
+            font-size: 12px;
+        }
+
+        .task-table thead {
+            background: radial-gradient(circle at 0 0, rgba(56,189,248,0.18), transparent 70%);
+        }
+
+        .task-table thead th {
+            padding: 6px 4px;
+            color: var(--accent);
+            font-weight: 600;
+            text-align: center;
+            border-bottom: 1px solid rgba(51,65,85,0.9);
+        }
+
+        .task-table tbody {
+            display: block;
+            width: 100%;
+            overflow: hidden;
+        }
+
+        .task-table thead tr,
+        .task-table tbody tr {
+            display: table;
+            width: 100%;
+            table-layout: fixed;
+        }
+
+        .task-table tbody td {
+            padding: 6px 4px;
+            text-align: center;
+            color: var(--text);
+            background: rgba(15,23,42,0.88);
+            border-radius: 4px;
+            border: 1px solid rgba(30,64,175,0.7);
+        }
+
+        .task-table tbody tr:nth-child(even) td {
+            background: rgba(15,23,42,0.96);
+        }
+
+        .task-table tbody tr:hover td {
+            border-color: rgba(56,189,248,0.95);
+            box-shadow: 0 0 14px rgba(56,189,248,0.45);
+        }
+
+        .progress-bar {
+            height: 6px;
+            background: rgba(15,23,42,1);
+            border-radius: 999px;
+            overflow: hidden;
+            border: 1px solid rgba(148,163,184,0.45);
+        }
+
+        .progress-fill {
+            height: 100%;
+            border-radius: 999px;
+            transition: width 0.4s ease-out;
+        }
+
+        .metrics-grid {
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            grid-auto-rows: 1fr;
+            gap: 6px;
+        }
+
+        .metric-card {
+            background: radial-gradient(circle at 0 0, rgba(56,189,248,0.16), transparent 70%);
+            border-radius: 8px;
+            border: 1px solid rgba(30,64,175,0.9);
+            padding: 6px 8px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .metric-label {
+            font-size: 11px;
+            color: var(--muted);
+        }
+
+        .metric-value {
+            font-size: 20px;
+            font-weight: 800;
+        }
+
+        .metric-value.accent { color: var(--accent); }
+        .metric-value.warn { color: var(--warn); }
+        .metric-value.ok { color: var(--green); }
+
+        .metric-extra {
+            font-size: 11px;
+            color: var(--muted);
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .alarm-list {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        .alarm-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 7px 8px;
+            border-radius: 6px;
+            background: rgba(15,23,42,0.92);
+            border: 1px solid rgba(30,64,175,0.9);
+            font-size: 11px;
+            transition: background 0.3s, box-shadow 0.3s;
+        }
+
+        .alarm-item.danger { border-left: 3px solid var(--danger); box-shadow: 0 0 18px rgba(239,68,68,0.4); }
+        .alarm-item.warn { border-left: 3px solid var(--warn); box-shadow: 0 0 14px rgba(245,158,11,0.35); }
+        .alarm-item.safe { border-left: 3px solid var(--green); box-shadow: 0 0 12px rgba(34,197,94,0.35); }
+
+        .alarm-time {
+            width: 64px;
+            flex: 0 0 auto;
+            color: var(--muted);
+        }
+
+        .alarm-msg {
+            flex: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .alarm-level {
+            flex: 0 0 auto;
+            border-radius: 999px;
+            padding: 2px 6px;
+            border: 1px solid rgba(148,163,184,0.6);
+            font-size: 10px;
+        }
+
+        .tag {
+            border-radius: 999px;
+            padding: 2px 6px;
+            font-size: 10px;
+            border: 1px solid rgba(148,163,184,0.4);
+            color: var(--muted);
+        }
+
+        .legend-inline {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 10px;
+            color: var(--muted);
+        }
+
+        .dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+        }
+
+        @media (max-width: 1600px) {
+            .title { font-size: 26px; }
+            .chart { min-height: 220px; }
+        }
+
+        @media (max-width: 1366px) {
+            .row-1 { flex-basis: 38%; }
+            .row-2 { flex-basis: 30%; }
+            .row-3 { flex-basis: 32%; }
+            .title { font-size: 22px; letter-spacing: 3px; }
+        }
+    </style>
+</head>
+<body>
+    <div class="bg-grid"></div>
+    <div class="bg-scan"><div class="scan-line"></div></div>
+
+    <header>
+        <div class="header-inner">
+            <div class="title-wrap">
+                <div class="title-mark">
+                    <i class="fa-solid fa-microchip"></i>
+                </div>
+                <div>
+                    <div class="title">智能制造产线任务总览</div>
+                    <div class="sub-title">INTELLIGENT MANUFACTURING REAL-TIME DASHBOARD</div>
+                </div>
+            </div>
+            <div class="header-right">
+                <span class="chip">
+                    <i class="fa-regular fa-clock"></i>
+                    <span id="now-time"></span>
+                </span>
+                <span class="chip chip-strong">
+                    <i class="fa-solid fa-circle-nodes"></i>
+                    <span>当前在线产线 <strong id="stat-line-online">10</strong> 条</span>
+                </span>
+            </div>
+        </div>
+    </header>
+
+    <main>
+        <div class="layout">
+            <!-- 第一行 -->
+            <section class="row row-1">
+                <!-- 产线任务看板 -->
+                <div class="card" style="flex: 2.1;">
+                    <div class="card-header">
+                        <div class="card-title">
+                            <i class="fa-solid fa-table-list"></i>
+                            <span>产线任务看板</span>
+                        </div>
+                        <div class="legend-inline">
+                            <span class="tag">实时刷新 · 滚动展示</span>
+                            <span class="dot" style="background: var(--green);"></span> 已完成
+                            <span class="dot" style="background: var(--warn);"></span> 进度偏低
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <div class="table-shell">
+                            <table class="task-table">
+                                <thead>
+                                    <tr>
+                                        <th>产线名称</th>
+                                        <th>排产单</th>
+                                        <th>产品名称</th>
+                                        <th>计划数量</th>
+                                        <th>完工数量</th>
+                                        <th>完工率</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="task-body"></tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 日产能达成情况 -->
+                <div class="card" style="flex: 1;">
+                    <div class="card-header">
+                        <div class="card-title">
+                            <i class="fa-solid fa-sun"></i>
+                            <span>日产能达成情况</span>
+                        </div>
+                        <span class="tag">当日维度</span>
+                    </div>
+                    <div class="card-body">
+                        <div class="card-body-row">
+                            <div class="card-body-col" style="flex: 0 0 52%;">
+                                <div id="chart-day" class="chart"></div>
+                            </div>
+                            <div class="card-body-col">
+                                <div class="metrics-grid">
+                                    <div class="metric-card">
+                                        <div class="metric-label">排产单数量</div>
+                                        <div class="metric-value" id="day-order"></div>
+                                        <div class="metric-extra"><span>单</span><span id="day-order-extra"></span></div>
+                                    </div>
+                                    <div class="metric-card">
+                                        <div class="metric-label">排产数量</div>
+                                        <div class="metric-value" id="day-plan"></div>
+                                        <div class="metric-extra"><span>件</span><span id="day-plan-extra"></span></div>
+                                    </div>
+                                    <div class="metric-card">
+                                        <div class="metric-label">待生产数量</div>
+                                        <div class="metric-value warn" id="day-pending"></div>
+                                        <div class="metric-extra"><span>件</span><span id="day-pending-extra"></span></div>
+                                    </div>
+                                    <div class="metric-card">
+                                        <div class="metric-label">产能达成率</div>
+                                        <div class="metric-value accent" id="day-rate"></div>
+                                        <div class="metric-extra"><span>目标 ≥ 80%</span><span id="day-rate-extra"></span></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 月产能达成情况 -->
+                <div class="card" style="flex: 1;">
+                    <div class="card-header">
+                        <div class="card-title">
+                            <i class="fa-solid fa-moon"></i>
+                            <span>月产能达成情况</span>
+                        </div>
+                        <span class="tag">当月累计</span>
+                    </div>
+                    <div class="card-body">
+                        <div class="card-body-row">
+                            <div class="card-body-col" style="flex: 0 0 52%;">
+                                <div id="chart-month" class="chart"></div>
+                            </div>
+                            <div class="card-body-col">
+                                <div class="metrics-grid">
+                                    <div class="metric-card">
+                                        <div class="metric-label">排产单数量</div>
+                                        <div class="metric-value" id="month-order"></div>
+                                        <div class="metric-extra"><span>单</span><span id="month-order-extra"></span></div>
+                                    </div>
+                                    <div class="metric-card">
+                                        <div class="metric-label">排产数量</div>
+                                        <div class="metric-value" id="month-plan"></div>
+                                        <div class="metric-extra"><span>件</span><span id="month-plan-extra"></span></div>
+                                    </div>
+                                    <div class="metric-card">
+                                        <div class="metric-label">待生产数量</div>
+                                        <div class="metric-value warn" id="month-pending"></div>
+                                        <div class="metric-extra"><span>件</span><span id="month-pending-extra"></span></div>
+                                    </div>
+                                    <div class="metric-card">
+                                        <div class="metric-label">产能达成率</div>
+                                        <div class="metric-value accent" id="month-rate"></div>
+                                        <div class="metric-extra"><span>目标 ≥ 85%</span><span id="month-rate-extra"></span></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- 第二行 -->
+            <section class="row row-2">
+                <!-- 周生产趋势 -->
+                <div class="card" style="flex: 1.2;">
+                    <div class="card-header">
+                        <div class="card-title">
+                            <i class="fa-solid fa-chart-line"></i>
+                            <span>周生产趋势</span>
+                        </div>
+                        <div class="legend-inline">
+                            <span class="dot" style="background: var(--accent);"></span> 产量
+                            <span class="dot" style="background: var(--purple);"></span> 计划
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <div id="chart-week" class="chart"></div>
+                    </div>
+                </div>
+
+                <!-- 开机率/稼动率趋势 -->
+                <div class="card" style="flex: 1;">
+                    <div class="card-header">
+                        <div class="card-title">
+                            <i class="fa-solid fa-wave-square"></i>
+                            <span>开机率/稼动率趋势</span>
+                        </div>
+                        <div style="display:flex; align-items:center; gap: 8px; justify-content:flex-end; flex-wrap:wrap;">
+                            <div class="tabs" id="ops-tabs"></div>
+                            <span class="tag" id="ops-summary">历史七天（不含当天）</span>
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <div id="chart-ops" class="chart"></div>
+                    </div>
+                </div>
+
+                <!-- 今日开机率/稼动率（轮播） -->
+                <div class="card" style="flex: 0.9;">
+                    <div class="card-header">
+                        <div class="card-title">
+                            <i class="fa-solid fa-gauge-high"></i>
+                            <span>今日开机率/稼动率</span>
+                        </div>
+                        <span class="chip" id="today-line-chip">产线A</span>
+                    </div>
+                    <div class="card-body">
+                        <div id="chart-today" class="chart"></div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- 第三行 -->
+            <section class="row row-3">
+                <!-- 成品检合格率趋势图 -->
+                <div class="card" style="flex: 1;">
+                    <div class="card-header">
+                        <div class="card-title">
+                            <i class="fa-solid fa-check-double"></i>
+                            <span>成品检合格率趋势图</span>
+                        </div>
+                        <span class="tag">按天统计（全产线）</span>
+                    </div>
+                    <div class="card-body">
+                        <div id="chart-quality" class="chart"></div>
+                    </div>
+                </div>
+
+                <!-- 实时报警信息 -->
+                <div class="card" style="flex: 1;">
+                    <div class="card-header">
+                        <div class="card-title">
+                            <i class="fa-solid fa-bell"></i>
+                            <span>实时报警信息</span>
+                        </div>
+                        <span class="tag">滚动展示</span>
+                    </div>
+                    <div class="card-body">
+                        <ul id="alarm-list" class="alarm-list"></ul>
+                    </div>
+                </div>
+
+                <!-- 能耗 -->
+                <div class="card" style="flex: 1;">
+                    <div class="card-header">
+                        <div class="card-title">
+                            <i class="fa-solid fa-bolt"></i>
+                            <span>能耗周趋势</span>
+                        </div>
+                        <span class="tag">本周能耗对比</span>
+                    </div>
+                    <div class="card-body">
+                        <div id="chart-energy" class="chart"></div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </main>
+
+    <script>
+        const charts = {};
+
+        const style = {
+            axisLine: { lineStyle: { color: 'rgba(148,163,184,0.45)' } },
+            axisLabel: { color: '#a8b7d8', fontSize: 12 },
+            splitLine: { lineStyle: { color: 'rgba(30,64,175,0.55)', type: 'dashed' } },
+            legendText: { color: '#e5f0ff', fontSize: 12 }
+        };
+
+        const colors = {
+            blue: '#1e90ff',
+            cyan: '#22d3ee',
+            green: '#22c55e',
+            purple: '#8b5cf6',
+            warn: '#f59e0b',
+            danger: '#ef4444'
+        };
+
+        function initChart(id) {
+            const el = document.getElementById(id);
+            if (!el) return null;
+            const c = echarts.init(el, 'dark', { renderer: 'canvas', backgroundColor: 'transparent' });
+            charts[id] = c;
+            return c;
+        }
+
+        function animateCount(el, target, suffix, duration) {
+            const start = 0;
+            const t0 = performance.now();
+            function step(t) {
+                const p = Math.min(1, (t - t0) / duration);
+                const v = start + (target - start) * p;
+                const out = Number.isInteger(target) ? Math.round(v) : Math.round(v * 10) / 10;
+                el.textContent = suffix ? `${out}${suffix}` : `${out}`;
+                if (p < 1) requestAnimationFrame(step);
+            }
+            requestAnimationFrame(step);
+        }
+
+        function updateTime() {
+            const el = document.getElementById('now-time');
+            const d = new Date();
+            const y = d.getFullYear();
+            const m = String(d.getMonth() + 1).padStart(2, '0');
+            const day = String(d.getDate()).padStart(2, '0');
+            const h = String(d.getHours()).padStart(2, '0');
+            const mi = String(d.getMinutes()).padStart(2, '0');
+            const s = String(d.getSeconds()).padStart(2, '0');
+            el.textContent = `${y}-${m}-${day} ${h}:${mi}:${s}`;
+        }
+
+        updateTime();
+        setInterval(updateTime, 1000);
+
+        const tasks = [
+            { line: '产线A', order: 'ORD-2025121701', product: '智能模组X1', plan: 1200, done: 1080 },
+            { line: '产线B', order: 'ORD-2025121702', product: '高密电芯M2', plan: 1500, done: 1120 },
+            { line: '产线C', order: 'ORD-2025121703', product: '组装组件A5', plan: 800,  done: 760 },
+            { line: '产线D', order: 'ORD-2025121704', product: '精密外壳S7', plan: 600,  done: 480 },
+            { line: '产线E', order: 'ORD-2025121705', product: '控制板K9',   plan: 900,  done: 855 },
+            { line: '产线F', order: 'ORD-2025121706', product: '电源模组P3', plan: 1100, done: 990 },
+            { line: '产线G', order: 'ORD-2025121707', product: '线束套件W4', plan: 700,  done: 560 },
+            { line: '产线H', order: 'ORD-2025121708', product: '散热组件H2', plan: 650,  done: 559 },
+            { line: '产线I', order: 'ORD-2025121709', product: '传感器C8',   plan: 500,  done: 450 },
+            { line: '产线J', order: 'ORD-2025121710', product: '整机Z3',     plan: 1000, done: 800 }
+        ];
+
+        function renderTaskTable() {
+            const tbody = document.getElementById('task-body');
+            tbody.innerHTML = '';
+            tasks.forEach((r) => {
+                const rate = Math.round((r.done / r.plan) * 100);
+                let rateColor = colors.green;
+                if (rate < 50) rateColor = colors.danger; else if (rate < 90) rateColor = colors.warn;
+                const tr = document.createElement('tr');
+                tr.innerHTML = `
+                    <td>${r.line}</td>
+                    <td style="color:${colors.cyan}">${r.order}</td>
+                    <td title="${r.product}">${r.product}</td>
+                    <td>${r.plan}</td>
+                    <td>${r.done}</td>
+                    <td>
+                        <div style="display:flex; flex-direction:column; gap:4px; align-items:center;">
+                            <div class="progress-bar">
+                                <div class="progress-fill" style="width:${rate}%; background:${rateColor};"></div>
+                            </div>
+                            <span style="color:${rateColor}; font-weight:700;">${rate}%</span>
+                        </div>
+                    </td>
+                `;
+                tbody.appendChild(tr);
+            });
+            const sample = tbody.querySelector('tr');
+            const rh = sample ? sample.getBoundingClientRect().height : 40;
+            tbody.style.height = `${Math.round(rh * 8)}px`;
+        }
+
+        function startTaskScroll() {
+            const tbody = document.getElementById('task-body');
+            setInterval(() => {
+                const first = tbody.firstElementChild;
+                if (!first) return;
+                first.style.transition = 'all 0.35s';
+                first.style.transform = 'translateY(-48px)';
+                first.style.opacity = '0';
+                setTimeout(() => {
+                    first.style.transition = 'none';
+                    first.style.transform = 'translateY(0)';
+                    first.style.opacity = '1';
+                    tbody.appendChild(first);
+                }, 360);
+            }, 5000);
+        }
+
+        renderTaskTable();
+        startTaskScroll();
+
+        const day = { orders: 36, plan: 18000, pending: 3200, rate: 82.2 };
+        animateCount(document.getElementById('day-order'), day.orders, '', 900);
+        animateCount(document.getElementById('day-plan'), day.plan, '', 900);
+        animateCount(document.getElementById('day-pending'), day.pending, '', 900);
+        animateCount(document.getElementById('day-rate'), day.rate, '%', 900);
+        document.getElementById('day-order-extra').textContent = '含加急 4 单';
+        document.getElementById('day-plan-extra').textContent = '含三班倒';
+        document.getElementById('day-pending-extra').textContent = '预计 4 小时内完成';
+        document.getElementById('day-rate-extra').textContent = '状态：良好';
+
+        const month = { orders: 158, plan: 420000, pending: 75600, rate: 82.0 };
+        animateCount(document.getElementById('month-order'), month.orders, '', 900);
+        animateCount(document.getElementById('month-plan'), month.plan, '', 900);
+        animateCount(document.getElementById('month-pending'), month.pending, '', 900);
+        animateCount(document.getElementById('month-rate'), month.rate, '%', 900);
+        document.getElementById('month-order-extra').textContent = '同比 +8.6%';
+        document.getElementById('month-plan-extra').textContent = '较计划 +3.2%';
+        document.getElementById('month-pending-extra').textContent = '剩余 5 天完成';
+        document.getElementById('month-rate-extra').textContent = '接近预期';
+
+        const chartDay = initChart('chart-day');
+        chartDay.setOption({
+            tooltip: { trigger: 'item' },
+            series: [{
+                type: 'pie',
+                radius: ['60%', '82%'],
+                center: ['50%', '55%'],
+                label: { show: false },
+                emphasis: { scale: false },
+                data: [
+                    { value: day.plan - day.pending, name: '已排产', itemStyle: { color: colors.cyan } },
+                    { value: day.pending, name: '待生产', itemStyle: { color: 'rgba(15,23,42,0.8)' } }
+                ]
+            }]
+        });
+
+        const chartMonth = initChart('chart-month');
+        chartMonth.setOption({
+            tooltip: { trigger: 'item' },
+            series: [{
+                type: 'pie',
+                radius: ['60%', '82%'],
+                center: ['50%', '55%'],
+                label: { show: false },
+                emphasis: { scale: false },
+                data: [
+                    { value: month.plan - month.pending, name: '已完成', itemStyle: { color: colors.green } },
+                    { value: month.pending, name: '待生产', itemStyle: { color: 'rgba(15,23,42,0.8)' } }
+                ]
+            }]
+        });
+
+        const chartWeek = initChart('chart-week');
+        const weekDays = ['周一','周二','周三','周四','周五','周六','周日'];
+        const weekPlan = [2600, 2800, 3000, 3100, 3200, 2900, 2700];
+        const weekReal = [2550, 2750, 2950, 3050, 3180, 2850, 2680];
+        chartWeek.setOption({
+            tooltip: { trigger: 'axis' },
+            legend: { top: 0, right: 0, textStyle: style.legendText },
+            grid: { top: '20%', left: '6%', right: '6%', bottom: '10%', containLabel: true },
+            xAxis: { type: 'category', data: weekDays, axisLine: style.axisLine, axisLabel: style.axisLabel },
+            yAxis: { type: 'value', axisLine: style.axisLine, axisLabel: style.axisLabel, splitLine: style.splitLine },
+            series: [
+                {
+                    name: '计划产量',
+                    type: 'line',
+                    smooth: true,
+                    showSymbol: false,
+                    lineStyle: { width: 2, color: colors.purple },
+                    data: weekPlan
+                },
+                {
+                    name: '实际产量',
+                    type: 'line',
+                    smooth: true,
+                    showSymbol: true,
+                    symbol: 'circle',
+                    symbolSize: 6,
+                    lineStyle: { width: 3, color: colors.cyan },
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(34,211,238,0.28)' },
+                            { offset: 1, color: 'rgba(15,23,42,0.8)' }
+                        ])
+                    },
+                    data: weekReal
+                }
+            ]
+        });
+
+        const chartOps = initChart('chart-ops');
+        const opsDays = [];
+        for (let i = 7; i > 0; i--) {
+            const d = new Date();
+            d.setDate(d.getDate() - i);
+            opsDays.push(`${d.getMonth() + 1}-${d.getDate()}`);
+        }
+
+        const opsLines = [
+            { name: '产线A', run: [85, 87, 84, 89, 88, 86, 85], avail: [78, 82, 80, 84, 83, 81, 79] },
+            { name: '产线B', run: [83, 84, 82, 86, 85, 84, 83], avail: [76, 78, 77, 80, 79, 78, 77] },
+            { name: '产线C', run: [88, 90, 89, 91, 92, 90, 89], avail: [82, 84, 83, 86, 87, 85, 84] },
+            { name: '产线D', run: [80, 82, 81, 83, 84, 82, 81], avail: [72, 74, 73, 76, 77, 75, 74] },
+            { name: '产线E', run: [86, 87, 86, 88, 89, 87, 86], avail: [79, 81, 80, 82, 83, 81, 80] },
+            { name: '产线F', run: [90, 92, 91, 93, 94, 92, 91], avail: [84, 86, 85, 87, 88, 86, 85] }
+        ];
+
+        function avg(arr) {
+            return Math.round((arr.reduce((s, v) => s + v, 0) / arr.length) * 10) / 10;
+        }
+
+        function setOpsSummary(lineName, runArr, availArr) {
+            const el = document.getElementById('ops-summary');
+            if (!el) return;
+            el.textContent = `${lineName} · 开机率均值 ${avg(runArr)}% · 稼动率均值 ${avg(availArr)}%`;
+        }
+
+        function setOpsActiveTab(lineName) {
+            const wrap = document.getElementById('ops-tabs');
+            if (!wrap) return;
+            [...wrap.querySelectorAll('.tab-btn')].forEach((btn) => {
+                btn.classList.toggle('active', btn.dataset.line === lineName);
+            });
+        }
+
+        function updateOps(lineName) {
+            const item = opsLines.find((x) => x.name === lineName) || opsLines[0];
+            if (!chartOps) return;
+            chartOps.setOption({
+                xAxis: { data: opsDays },
+                series: [
+                    { data: item.run },
+                    { data: item.avail }
+                ]
+            });
+            setOpsActiveTab(item.name);
+            setOpsSummary(item.name, item.run, item.avail);
+        }
+
+        chartOps.setOption({
+            tooltip: { trigger: 'axis' },
+            legend: { top: 0, right: 0, textStyle: style.legendText },
+            grid: { top: '22%', left: '6%', right: '6%', bottom: '10%', containLabel: true },
+            xAxis: { type: 'category', data: opsDays, axisLine: style.axisLine, axisLabel: style.axisLabel },
+            yAxis: [
+                { type: 'value', name: '开机率(%)', max: 100, nameTextStyle: { color: '#a8b7d8', fontSize: 12 }, axisLabel: style.axisLabel, splitLine: style.splitLine },
+                { type: 'value', name: '稼动率(%)', max: 100, nameTextStyle: { color: '#a8b7d8', fontSize: 12 }, axisLabel: style.axisLabel, splitLine: { show: false } }
+            ],
+            series: [
+                { name: '开机率', type: 'line', smooth: true, showSymbol: false, yAxisIndex: 0, lineStyle: { width: 2, color: colors.blue }, itemStyle: { color: colors.blue }, data: [] },
+                { name: '稼动率', type: 'line', smooth: true, showSymbol: false, yAxisIndex: 1, lineStyle: { width: 2, color: colors.green }, itemStyle: { color: colors.green }, data: [] }
+            ]
+        });
+
+        const opsTabs = document.getElementById('ops-tabs');
+        if (opsTabs) {
+            opsTabs.innerHTML = '';
+            opsLines.forEach((l) => {
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.className = 'tab-btn';
+                btn.dataset.line = l.name;
+                btn.textContent = l.name;
+                btn.addEventListener('click', () => updateOps(l.name));
+                opsTabs.appendChild(btn);
+            });
+        }
+
+        updateOps(opsLines[0].name);
+
+        const chartToday = initChart('chart-today');
+        const lineMetrics = [
+            { name: '产线A', run: 88, avail: 82 },
+            { name: '产线B', run: 86, avail: 80 },
+            { name: '产线C', run: 90, avail: 84 },
+            { name: '产线D', run: 85, avail: 79 },
+            { name: '产线E', run: 87, avail: 81 },
+            { name: '产线F', run: 92, avail: 86 }
+        ];
+        let currentLine = 0;
+
+        function gaugeOption(run, avail) {
+            return {
+                tooltip: { show: true },
+                series: [
+                    {
+                        type: 'gauge',
+                        center: ['50%', '60%'],
+                        startAngle: 200,
+                        endAngle: -20,
+                        min: 0,
+                        max: 100,
+                        splitNumber: 10,
+                        radius: '88%',
+                        axisLine: { lineStyle: { width: 8, color: [[1, 'rgba(30,144,255,0.18)']] } },
+                        axisTick: { show: false },
+                        splitLine: { show: false },
+                        axisLabel: { show: false },
+                        pointer: { show: false },
+                        progress: { show: true, width: 8, itemStyle: { color: colors.blue } },
+                        detail: { formatter: '{value}%', color: '#fff', fontSize: 26, offsetCenter: ['0%', '18%'] },
+                        title: { show: true, color: '#a8b7d8', fontSize: 12, offsetCenter: ['0%', '-10%'] },
+                        data: [{ value: run, name: '开机率' }]
+                    },
+                    {
+                        type: 'gauge',
+                        center: ['50%', '60%'],
+                        startAngle: 200,
+                        endAngle: -20,
+                        min: 0,
+                        max: 100,
+                        radius: '68%',
+                        axisLine: { lineStyle: { width: 8, color: [[1, 'rgba(16,185,129,0.18)']] } },
+                        axisTick: { show: false },
+                        splitLine: { show: false },
+                        axisLabel: { show: false },
+                        pointer: { show: false },
+                        progress: { show: true, width: 8, itemStyle: { color: colors.green } },
+                        detail: { formatter: '{value}%', color: '#fff', fontSize: 20, offsetCenter: ['0%', '52%'] },
+                        title: { show: true, color: '#a8b7d8', fontSize: 12, offsetCenter: ['0%', '24%'] },
+                        data: [{ value: avail, name: '稼动率' }]
+                    }
+                ]
+            };
+        }
+
+        chartToday.setOption(gaugeOption(lineMetrics[0].run, lineMetrics[0].avail));
+        document.getElementById('today-line-chip').textContent = lineMetrics[0].name;
+
+        setInterval(() => {
+            currentLine = (currentLine + 1) % lineMetrics.length;
+            const item = lineMetrics[currentLine];
+            document.getElementById('today-line-chip').textContent = item.name;
+            chartToday.setOption(gaugeOption(item.run, item.avail));
+        }, 3000);
+
+        const chartQuality = initChart('chart-quality');
+        const last7Days = [];
+        for (let i = 6; i >= 0; i--) {
+            const d = new Date();
+            d.setDate(d.getDate() - i);
+            last7Days.push(`${d.getMonth() + 1}-${d.getDate()}`);
+        }
+        const passRate = [98.5, 99.2, 97.8, 98.9, 99.0, 98.2, 99.5];
+        chartQuality.setOption({
+            tooltip: { trigger: 'axis' },
+            grid: { top: '18%', left: '6%', right: '6%', bottom: '10%', containLabel: true },
+            xAxis: { type: 'category', data: last7Days, axisLine: style.axisLine, axisLabel: style.axisLabel },
+            yAxis: { type: 'value', min: 96, max: 100, axisLine: { show: false }, axisLabel: style.axisLabel, splitLine: style.splitLine },
+            series: [{
+                name: '合格率',
+                type: 'bar',
+                barWidth: '45%',
+                itemStyle: {
+                    borderRadius: [6, 6, 0, 0],
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: colors.purple },
+                        { offset: 1, color: 'rgba(139,92,246,0.10)' }
+                    ])
+                },
+                data: passRate,
+                markLine: {
+                    symbol: ['none', 'none'],
+                    label: { show: true, color: '#fff', fontSize: 12, formatter: '平均 {c}%' },
+                    lineStyle: { color: colors.cyan, width: 2, type: 'dashed' },
+                    data: [{ type: 'average', name: '平均值' }]
+                }
+            }]
+        });
+
+        const alarms = [
+            { time: '08:12:03', level: '严重', type: 'danger', msg: '产线B-包装工位异常停机' },
+            { time: '08:15:27', level: '严重', type: 'danger', msg: '产线C-温控传感器漂移' },
+            { time: '08:20:10', level: '警告', type: 'warn', msg: '产线A-物料待料' },
+            { time: '08:35:42', level: '提示', type: 'safe', msg: '产线E-设备保养提醒' },
+            { time: '08:40:18', level: '提示', type: 'safe', msg: '产线F-成品抽检合格' },
+            { time: '09:02:56', level: '严重', type: 'danger', msg: '产线D-站点扫码失败' },
+            { time: '09:15:12', level: '警告', type: 'warn', msg: '产线H-人员到岗不足' },
+            { time: '09:26:33', level: '警告', type: 'warn', msg: '产线I-实时能耗升高' },
+            { time: '09:37:05', level: '严重', type: 'danger', msg: '产线G-夹具寿命告警' },
+            { time: '09:45:21', level: '警告', type: 'warn', msg: '产线J-物流滞后' }
+        ];
+
+        function renderAlarms() {
+            const ul = document.getElementById('alarm-list');
+            ul.innerHTML = '';
+            alarms.forEach((a) => {
+                const li = document.createElement('li');
+                li.className = `alarm-item ${a.type}`;
+                li.title = a.msg;
+                li.innerHTML = `<span class="alarm-time">[${a.time}]</span><span class="alarm-msg">${a.msg}</span><span class="alarm-level">${a.level}</span>`;
+                ul.appendChild(li);
+            });
+        }
+
+        renderAlarms();
+
+        setInterval(() => {
+            const ul = document.getElementById('alarm-list');
+            const first = ul.firstElementChild;
+            if (!first) return;
+            first.style.transition = 'all 0.35s';
+            first.style.transform = 'translateY(-48px)';
+            first.style.opacity = '0';
+            setTimeout(() => {
+                first.style.transition = 'none';
+                first.style.transform = 'translateY(0)';
+                first.style.opacity = '1';
+                ul.appendChild(first);
+            }, 360);
+        }, 3000);
+
+        const chartEnergy = initChart('chart-energy');
+        const energyDays = ['周一','周二','周三','周四','周五','周六','周日'];
+        const energyUse = [520, 540, 580, 610, 640, 590, 560];
+        const energyStd = [500, 520, 540, 560, 580, 560, 540];
+        chartEnergy.setOption({
+            tooltip: { trigger: 'axis' },
+            legend: { top: 0, right: 0, textStyle: style.legendText },
+            grid: { top: '20%', left: '6%', right: '6%', bottom: '10%', containLabel: true },
+            xAxis: { type: 'category', data: energyDays, axisLine: style.axisLine, axisLabel: style.axisLabel },
+            yAxis: { type: 'value', axisLine: { show: false }, axisLabel: style.axisLabel, splitLine: style.splitLine },
+            series: [
+                {
+                    name: '实际能耗(kWh)',
+                    type: 'bar',
+                    barWidth: 16,
+                    itemStyle: {
+                        borderRadius: [4,4,0,0],
+                        color: new echarts.graphic.LinearGradient(0,0,0,1,[
+                            { offset: 0, color: colors.danger },
+                            { offset: 1, color: 'rgba(239,68,68,0.10)' }
+                        ])
+                    },
+                    data: energyUse
+                },
+                {
+                    name: '基准能耗(kWh)',
+                    type: 'line',
+                    smooth: true,
+                    showSymbol: false,
+                    lineStyle: { width: 2, color: colors.green },
+                    data: energyStd
+                }
+            ]
+        });
+
+        window.addEventListener('resize', () => {
+            Object.values(charts).forEach((c) => c && c.resize());
+            setTimeout(() => { renderTaskTable(); }, 120);
+        });
+    </script>
+</body>
+</html>
+
diff --git a/src/views/report/dashboardPage/dashboard8/utils.ts b/src/views/report/dashboardPage/dashboard8/utils.ts
new file mode 100644
index 00000000..2ba468b1
--- /dev/null
+++ b/src/views/report/dashboardPage/dashboard8/utils.ts
@@ -0,0 +1,57 @@
+import { onUnmounted } from 'vue'
+import * as echarts from 'echarts'
+
+export const colors = {
+  blue: '#1e90ff',
+  cyan: '#22d3ee',
+  green: '#22c55e',
+  purple: '#8b5cf6',
+  warn: '#f59e0b',
+  danger: '#ef4444'
+}
+
+export const style = {
+  axisLine: { lineStyle: { color: 'rgba(148,163,184,0.45)' } },
+  axisLabel: { color: '#a8b7d8', fontSize: 12 },
+  splitLine: { lineStyle: { color: 'rgba(30,64,175,0.55)', type: 'dashed' } },
+  legendText: { color: '#e5f0ff', fontSize: 12 }
+}
+
+export function animateCount(el: HTMLElement | null, target: number, suffix: string, duration: number) {
+  if (!el) return
+  const start = 0
+  const t0 = performance.now()
+  const step = (t: number) => {
+    const p = Math.min(1, (t - t0) / duration)
+    const v = start + (target - start) * p
+    const out = Number.isInteger(target) ? Math.round(v) : Math.round(v * 10) / 10
+    el.textContent = suffix ? `${out}${suffix}` : `${out}`
+    if (p < 1) requestAnimationFrame(step)
+  }
+  requestAnimationFrame(step)
+}
+
+export function useChart(domId: string) {
+  let chart: echarts.ECharts | null = null
+
+  const init = () => {
+    const el = document.getElementById(domId)
+    if (!el) return null
+    chart = echarts.init(el, 'dark', { renderer: 'canvas' })
+    return chart
+  }
+
+  const resize = () => {
+    chart?.resize()
+  }
+
+  onUnmounted(() => {
+    chart?.dispose()
+  })
+
+  return {
+    init,
+    resize,
+    instance: () => chart
+  }
+}