From fae45959eda57c85eb3a9440eb95d7eb6540e14d Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Tue, 27 Jan 2026 18:02:30 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=A4=A7=E5=B1=8F=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/dashboard/index.ts                    |  106 +-
 .../dashboard1/components/DeviceOverview.vue  |  114 +-
 .../dashboard1/components/EventReminder.vue   |  244 +++-
 .../dashboard1/components/TaskList.vue        |  164 ++-
 .../dashboard1/{Dashboard8.vue => index.vue}  |    0
 .../dashboardPage/dashboard8/dashboard8.html  | 1243 -----------------
 .../dashboard8/{Dashboard8.vue => index.vue}  |    0
 7 files changed, 501 insertions(+), 1370 deletions(-)
 rename src/views/report/dashboardPage/dashboard1/{Dashboard8.vue => index.vue} (100%)
 delete mode 100644 src/views/report/dashboardPage/dashboard8/dashboard8.html
 rename src/views/report/dashboardPage/dashboard8/{Dashboard8.vue => index.vue} (100%)

diff --git a/src/api/dashboard/index.ts b/src/api/dashboard/index.ts
index adc744c3..2a3aaa09 100644
--- a/src/api/dashboard/index.ts
+++ b/src/api/dashboard/index.ts
@@ -1,47 +1,89 @@
 import request from '@/config/axios'
+
 export interface DashboardProductVO {
-  taskItems: ItemVO[] 
-  planItems: ItemVO[] 
+	taskItems: ItemVO[]
+	planItems: ItemVO[]
 }
 
 export interface ItemVO {
-  key: string 
-  label: string 
-  value: number 
+	key: string
+	label: string
+	value: number
 }
 
 export interface DeviceStatusVO {
-  key: string 
-  label: string 
-  value: number
-  level: string 
+	key: string
+	label: string
+	value: number
+	level: string
 }
 
+export interface TaskStatisticsData {
+	deviceInspection: number
+	deviceInspectionProportion: string
+	moldInspection: number
+	moldInspectionProportion: string
+	deviceMaintenance: number
+	deviceMaintenanceProportion: string
+	moldMaintenance: number
+	moldMaintenanceProportion: string
+	deviceRepair: number
+	deviceRepairProportion: string
+	moldRepair: number
+	moldRepairProportion: string
+}
+
+export interface TaskStatisticsResponse {
+	code: number
+	status: number
+	data: TaskStatisticsData
+	msg: string
+}
+
+export interface DashboardTaskItem {
+	code: string
+	name: string
+	type: string
+	finishStatus: string
+	resultStatus: number
+}
+
+export interface DashboardTaskListResponse {
+	code: number
+	status: number
+	data: DashboardTaskItem[]
+	msg: string
+}
 
 // 编码生成记录 API
 export const DashboardApi = {
-  // 查询编码生成记录分页
-  getProduction: async (params: any) => {
-    return await request.get({ url: `/mes/dashboard/getProduction`, params })
-  },
-getPlan: async () => {
-    return await request.get({ url: `/mes/dashboard/getPlan` })
-  },
-  getDevice: async () => {
-    return await request.get({ url: `/mes/dashboard/getDevice` })
-  },
-  getMold: async () => {
-    return await request.get({ url: `/mes/dashboard/getMold` })
-  },
-  getTodoList: async () => {
-    return await request.get({ url: `/mes/dashboard/getTodoList` })
-  },
-  getDeviceOperationalStatus: async () => {
-    return await request.get({ url: `/iot/device/getDeviceOperationalStatus` })
-  },
-  getDeviceRepairLineOptions: async () => {
-    return await request.get({ url: `/mes/dashboard/getDeviceRepairLineOptions` })
-  },
-
+	// 查询编码生成记录分页
+	getProduction: async (params: any) => {
+		return await request.get({ url: `/mes/dashboard/getProduction`, params })
+	},
+	getPlan: async () => {
+		return await request.get({ url: `/mes/dashboard/getPlan` })
+	},
+	getDevice: async () => {
+		return await request.get({ url: `/mes/dashboard/getDevice` })
+	},
+	getMold: async () => {
+		return await request.get({ url: `/mes/dashboard/getMold` })
+	},
+	getTodoList: async () => {
+		return await request.get({ url: `/mes/dashboard/getTodoList` })
+	},
+	getDeviceOperationalStatus: async () => {
+		return await request.get({ url: `/iot/device/getDeviceOperationalStatus` })
+	},
+	getDeviceRepairLineOptions: async () => {
+		return await request.get({ url: `/mes/dashboard/getDeviceRepairLineOptions` })
+	},
+	getTaskStatistics: async () => {
+		return await request.get<TaskStatisticsResponse>({ url: `/mes/dashboard/getTaskStatistics` })
+	},
+	getAllTaskList: async () => {
+		return await request.get<DashboardTaskListResponse>({ url: `/mes/dashboard/getAllTaskList` })
+	}
 }
 
diff --git a/src/views/report/dashboardPage/dashboard1/components/DeviceOverview.vue b/src/views/report/dashboardPage/dashboard1/components/DeviceOverview.vue
index 860ab372..f2fd3737 100644
--- a/src/views/report/dashboardPage/dashboard1/components/DeviceOverview.vue
+++ b/src/views/report/dashboardPage/dashboard1/components/DeviceOverview.vue
@@ -18,14 +18,28 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
 import { colors } from '../utils'
+import { DashboardApi } from '@/api/dashboard'
 
-const overviewItems = [
-  { key: 'device', label: '设备数量', value: '987,965', percent: 78, color: colors.cyan },
-  { key: 'running', label: '运行数量', value: '30', percent: 66, color: colors.blue },
-  { key: 'idle', label: '待机数量', value: '2', percent: 42, color: colors.warn },
-  { key: 'alarm', label: '报警数量', value: '10', percent: 58, color: colors.danger }
-]
+type OverviewItemKey = 'device' | 'running' | 'idle' | 'alarm' | 'utilization' | 'faultRate'
+
+interface OverviewItem {
+  key: OverviewItemKey
+  label: string
+  value: string
+  percent: number
+  color: string
+}
+
+const overviewItems = ref<OverviewItem[]>([
+  { key: 'device', label: '设备数量', value: '0', percent: 0, color: colors.cyan },
+  { key: 'running', label: '运行数量', value: '0', percent: 0, color: colors.blue },
+  { key: 'idle', label: '待机数量', value: '0', percent: 0, color: colors.warn },
+  { key: 'alarm', label: '报警数量', value: '0', percent: 0, color: colors.danger },
+  { key: 'utilization', label: '稼动率', value: '0%', percent: 0, color: colors.green },
+  { key: 'faultRate', label: '故障率', value: '0%', percent: 0, color: colors.purple }
+])
 
 const getGaugeStyle = (percent: number, color: string) => {
   const p = Math.max(0, Math.min(100, percent))
@@ -33,6 +47,92 @@ const getGaugeStyle = (percent: number, color: string) => {
     background: `conic-gradient(${color} ${p * 3.6}deg, rgba(148,163,184,0.18) 0deg)`
   }
 }
+
+const formatNumber = (value: number | string | undefined | null) => {
+  const n = Number(value ?? 0)
+  if (!Number.isFinite(n)) return '0'
+  return n.toLocaleString('zh-CN')
+}
+
+const calcPercent = (part: number, total: number) => {
+  if (!total || total <= 0 || !Number.isFinite(part)) return 0
+  const raw = (part / total) * 100
+  return Math.max(0, Math.min(100, Math.round(raw)))
+}
+
+const loadOverview = async () => {
+  try {
+    const res: any = await DashboardApi.getDeviceOperationalStatus()
+    const data = (res && typeof res === 'object' ? (res.data ?? res) : {}) as any
+
+    const totalDevices = Number(data.totalDevices ?? 0)
+    const runningCount = Number(data.runningCount ?? 0)
+    const standbyCount = Number(data.standbyCount ?? 0)
+    const faultCount = Number(data.faultCount ?? 0)
+    const warningCount = Number(data.warningCount ?? 0)
+
+    const utilizationRateRaw = String(data.utilizationRate ?? '0')
+    const faultRateRaw = String(data.faultRate ?? '0')
+
+    const utilizationPercent = Number.parseFloat(utilizationRateRaw.replace('%', '')) || 0
+    const faultPercent = Number.parseFloat(faultRateRaw.replace('%', '')) || 0
+
+    const alarmCount = faultCount + warningCount
+
+    overviewItems.value = overviewItems.value.map((item) => {
+      if (item.key === 'device') {
+        return {
+          ...item,
+          value: formatNumber(totalDevices),
+          percent: calcPercent(totalDevices, totalDevices || 1)
+        }
+      }
+      if (item.key === 'running') {
+        return {
+          ...item,
+          value: formatNumber(runningCount),
+          percent: calcPercent(runningCount, totalDevices)
+        }
+      }
+      if (item.key === 'idle') {
+        return {
+          ...item,
+          value: formatNumber(standbyCount),
+          percent: calcPercent(standbyCount, totalDevices)
+        }
+      }
+      if (item.key === 'alarm') {
+        return {
+          ...item,
+          value: formatNumber(alarmCount),
+          percent: calcPercent(alarmCount, totalDevices)
+        }
+      }
+      if (item.key === 'utilization') {
+        const p = Math.max(0, Math.min(100, Math.round(utilizationPercent)))
+        return {
+          ...item,
+          value: utilizationRateRaw.includes('%') ? utilizationRateRaw : `${utilizationPercent.toFixed(2)}%`,
+          percent: p
+        }
+      }
+      if (item.key === 'faultRate') {
+        const p = Math.max(0, Math.min(100, Math.round(faultPercent)))
+        return {
+          ...item,
+          value: faultRateRaw.includes('%') ? faultRateRaw : `${faultPercent.toFixed(2)}%`,
+          percent: p
+        }
+      }
+      return item
+    })
+  } catch (e) {
+  }
+}
+
+onMounted(() => {
+  loadOverview()
+})
 </script>
 
 <style scoped>
@@ -105,7 +205,7 @@ const getGaugeStyle = (percent: number, color: string) => {
 
 .overview-body {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 12px;
 }
 
diff --git a/src/views/report/dashboardPage/dashboard1/components/EventReminder.vue b/src/views/report/dashboardPage/dashboard1/components/EventReminder.vue
index a8f8c7ad..d666b15c 100644
--- a/src/views/report/dashboardPage/dashboard1/components/EventReminder.vue
+++ b/src/views/report/dashboardPage/dashboard1/components/EventReminder.vue
@@ -1,9 +1,17 @@
 <template>
   <div class="card">
-    <div class="panel-title">
-      <span class="title-dot"></span>
-      <span>事件提醒</span>
-    </div>
+	<div class="panel-title">
+	  <div class="panel-title-left">
+		<span class="title-dot"></span>
+		<span>事件提醒</span>
+	  </div>
+	  <div class="panel-title-right">
+		<el-radio-group v-model="mode" size="small">
+		  <el-radio-button label="device">设备</el-radio-button>
+		  <el-radio-button label="mold">模具</el-radio-button>
+		</el-radio-group>
+	  </div>
+	</div>
     <div class="panel-body body">
       <div class="event-list">
         <div v-for="item in eventItems" :key="item.key" class="event-row">
@@ -24,77 +32,142 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 import * as echarts from 'echarts'
+import { DashboardApi, TaskStatisticsData } from '@/api/dashboard'
 import { colors } from '../utils'
 
+interface EventItem {
+	key: string
+	name: string
+	count: number
+	percent: number
+	color: string
+}
+
 const chartRef = ref<HTMLElement | null>(null)
 let chart: echarts.ECharts | null = null
-
-const eventItems = [
-  { key: 'check', name: '点检', count: 1, percent: 30, color: colors.cyan },
-  { key: 'maintain', name: '保养', count: 1, percent: 42, color: colors.warn },
-  { key: 'repair', name: '维修', count: 1, percent: 20, color: colors.danger }
-]
+const mode = ref<'device' | 'mold'>('device')
+const eventItems = ref<EventItem[]>([])
+const rawStats = ref<TaskStatisticsData | null>(null)
+let switchTimer: number | undefined
 
 const render = () => {
-  if (!chart) return
-  const percentMap = Object.fromEntries(eventItems.map((i) => [i.name, i.percent])) as Record<string, number>
-  chart.setOption({
-    backgroundColor: 'transparent',
-    tooltip: { trigger: 'item' },
-    legend: {
-      orient: 'vertical',
-      right: 10,
-      top: 'center',
-      icon: 'circle',
-      itemWidth: 10,
-      itemHeight: 10,
-      itemGap: 14,
-      selectedMode: false,
-      textStyle: {
-        rich: {
-          percent: { fontSize: 18, fontWeight: 900, color: '#e5f0ff', lineHeight: 20 },
-          name: { fontSize: 12, fontWeight: 700, color: 'rgba(148,163,184,0.95)', lineHeight: 16 }
-        }
-      },
-      formatter: (name: string) => `{percent|${percentMap[name] ?? 0}%}\n{name|${name}}`
-    },
-    series: [
-      {
-        type: 'pie',
-        radius: ['48%', '70%'],
-        center: ['35%', '50%'],
-        avoidLabelOverlap: true,
-        label: { show: false },
-        labelLine: { show: false },
-        padAngle: 2,
-        itemStyle: { borderRadius: 8, borderWidth: 6, borderColor: 'rgba(2,6,23,0.9)' },
-        emphasis: { scale: false },
-        data: [
-          { value: 30, name: '点检', itemStyle: { color: colors.cyan } },
-          { value: 42, name: '保养', itemStyle: { color: colors.warn } },
-          { value: 20, name: '维修', itemStyle: { color: colors.danger } }
-        ]
-      }
-    ]
-  })
+	if (!chart) return
+	const items = eventItems.value
+	const percentMap = Object.fromEntries(items.map((i) => [i.name, i.percent])) as Record<string, number>
+	const seriesData = items.map((i) => ({ value: i.count, name: i.name, itemStyle: { color: i.color } }))
+	chart.setOption({
+		backgroundColor: 'transparent',
+		tooltip: { trigger: 'item' },
+		legend: {
+			orient: 'vertical',
+			right: 10,
+			top: 'center',
+			icon: 'circle',
+			itemWidth: 10,
+			itemHeight: 10,
+			itemGap: 14,
+			textStyle: {
+				rich: {
+					percent: { fontSize: 18, fontWeight: 900, color: '#e5f0ff', lineHeight: 20 },
+					name: { fontSize: 12, fontWeight: 700, color: 'rgba(148,163,184,0.95)', lineHeight: 16 }
+				}
+			},
+			formatter: (name: string) => `{percent|${percentMap[name] ?? 0}%}\n{name|${name}}`
+		},
+		series: [
+			{
+				type: 'pie',
+				radius: ['48%', '70%'],
+				center: ['35%', '50%'],
+				avoidLabelOverlap: true,
+				label: { show: false },
+				labelLine: { show: false },
+				padAngle: 2,
+				itemStyle: { borderRadius: 8, borderWidth: 6, borderColor: 'rgba(2,6,23,0.9)' },
+				emphasis: { scale: false },
+				data: seriesData
+			}
+		]
+	})
 }
 
+const applyTaskStatistics = (data: TaskStatisticsData) => {
+	rawStats.value = data
+	const isDevice = mode.value === 'device'
+	const inspection = Number(isDevice ? data.deviceInspection : data.moldInspection) || 0
+	const maintenance = Number(isDevice ? data.deviceMaintenance : data.moldMaintenance) || 0
+	const repair = Number(isDevice ? data.deviceRepair : data.moldRepair) || 0
+	const total = inspection + maintenance + repair
+	const toPercent = (value: number) => (total > 0 ? Math.round((value / total) * 100) : 0)
+	eventItems.value = [
+		{
+			key: 'check',
+			name: '点检',
+			count: inspection,
+			percent: toPercent(inspection),
+			color: colors.cyan
+		},
+		{
+			key: 'maintain',
+			name: '保养',
+			count: maintenance,
+			percent: toPercent(maintenance),
+			color: colors.warn
+		},
+		{
+			key: 'repair',
+			name: '维修',
+			count: repair,
+			percent: toPercent(repair),
+			color: colors.danger
+		}
+	]
+	render()
+}
+
+const loadTaskStatistics = async () => {
+	try {
+		const res = await DashboardApi.getTaskStatistics()
+		const payload = (res && typeof res === 'object' && 'data' in res ? (res as any).data : res) as
+			| TaskStatisticsData
+			| null
+		if (!payload) return
+		applyTaskStatistics(payload)
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+watch(mode, () => {
+	if (!rawStats.value) return
+	applyTaskStatistics(rawStats.value)
+})
+
 const resize = () => {
-  chart?.resize()
+	chart?.resize()
 }
 
 onMounted(() => {
-  if (!chartRef.value) return
-  chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
-  render()
-  window.addEventListener('resize', resize)
+	if (!chartRef.value) return
+	chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
+	render()
+	loadTaskStatistics()
+	switchTimer = window.setInterval(() => {
+		if (!rawStats.value) return
+		mode.value = mode.value === 'device' ? 'mold' : 'device'
+	}, 10000)
+	window.addEventListener('resize', resize)
 })
 
 onUnmounted(() => {
-  window.removeEventListener('resize', resize)
-  chart?.dispose()
+	window.removeEventListener('resize', resize)
+	if (switchTimer) {
+		clearInterval(switchTimer)
+		switchTimer = undefined
+	}
+	chart?.dispose()
 })
 </script>
 
@@ -142,14 +215,51 @@ onUnmounted(() => {
 }
 
 .panel-title {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
-  font-size: 16px;
-  font-weight: 900;
-  color: #e5f0ff;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 10px;
+	padding: 10px 12px;
+	border-bottom: 1px solid rgba(41, 54, 95, 0.9);
+	font-size: 16px;
+	font-weight: 900;
+	color: #e5f0ff;
+}
+
+.panel-title-left {
+	display: inline-flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.panel-title-right {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 2px 4px;
+	border-radius: 999px;
+	border: 1px solid rgba(56, 189, 248, 0.5);
+	background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.18), transparent 70%);
+}
+
+.panel-title-right :deep(.el-radio-group) {
+	background: transparent;
+}
+
+.panel-title-right :deep(.el-radio-button__inner) {
+	border: none;
+	box-shadow: none;
+	background: transparent;
+	color: rgba(148, 163, 184, 0.95);
+	padding: 4px 10px;
+	font-size: 12px;
+}
+
+.panel-title-right :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
+	background: rgba(15, 23, 42, 0.9);
+	color: #e5f0ff;
+	box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.85);
+	border-radius: 999px;
 }
 
 .title-dot {
diff --git a/src/views/report/dashboardPage/dashboard1/components/TaskList.vue b/src/views/report/dashboardPage/dashboard1/components/TaskList.vue
index d8a12131..31ec0f45 100644
--- a/src/views/report/dashboardPage/dashboard1/components/TaskList.vue
+++ b/src/views/report/dashboardPage/dashboard1/components/TaskList.vue
@@ -8,21 +8,46 @@
       <table class="task-table">
         <thead>
           <tr>
-            <th>时间</th>
-            <th>类型</th>
-            <th>设备</th>
-            <th>责任人</th>
-            <th>状态</th>
+			<th>编号</th>
+			<th>名称</th>
+			<th>类型</th>
+			<th>完成状态</th>
+			<th>结果</th>
           </tr>
         </thead>
-        <tbody>
-          <tr v-for="row in taskRows" :key="row.id" :class="row.status">
-            <td>{{ row.time }}</td>
-            <td>{{ row.type }}</td>
-            <td>{{ row.device }}</td>
-            <td>{{ row.owner }}</td>
-            <td class="status-cell" :style="{ color: row.color }">{{ row.statusLabel }}</td>
-          </tr>
+        <tbody ref="tbodyRef">
+		  <tr v-for="row in taskRows" :key="row.id">
+			<td>{{ row.code }}</td>
+			<td>{{ row.name }}</td>
+			<td>{{ row.type }}</td>
+			<td>
+			  <el-tag
+				v-if="row.finishStatusLabel"
+				class="status-tag"
+				size="small"
+				:disable-transitions="true"
+				:hit="false"
+				:round="true"
+				:type="row.finishStatusType || 'info'"
+			  >
+				{{ row.finishStatusLabel }}
+			  </el-tag>
+			</td>
+			<td class="status-cell">
+			  <el-tag
+				v-if="row.resultStatusLabel !== '-'"
+				class="status-tag"
+				size="small"
+				:disable-transitions="true"
+				:hit="false"
+				:round="true"
+				:type="row.resultStatusType || 'info'"
+			  >
+				{{ row.resultStatusLabel }}
+			  </el-tag>
+			  <span v-else>-</span>
+			</td>
+		  </tr>
         </tbody>
       </table>
     </div>
@@ -30,16 +55,106 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { DashboardApi, DashboardTaskItem } from '@/api/dashboard'
 import { colors } from '../utils'
 
-const taskRows = [
-  { id: 1, time: '10:20', type: '点检', device: '1号装配机', owner: 'XXX', status: 'ok', statusLabel: '正常', color: colors.cyan },
-  { id: 2, time: '10:25', type: '点检', device: '1号装配机', owner: 'XXX', status: 'ok', statusLabel: '正常', color: colors.cyan },
-  { id: 3, time: '10:30', type: '维修', device: '1号装配机', owner: 'XXX', status: 'danger', statusLabel: '维修', color: colors.danger },
-  { id: 4, time: '10:35', type: '保养', device: '1号装配机', owner: 'XXX', status: 'ok', statusLabel: '保养', color: colors.warn },
-  { id: 5, time: '10:40', type: '点检', device: '1号装配机', owner: 'XXX', status: 'ok', statusLabel: '正常', color: colors.cyan },
-  { id: 6, time: '10:45', type: '点检', device: '1号装配机', owner: 'XXX', status: 'ok', statusLabel: '正常', color: colors.cyan }
-]
+interface TaskRow {
+	id: string
+	code: string
+	name: string
+	type: string
+	finishStatusLabel: string
+	resultStatusLabel: string
+	finishStatusType: '' | 'success' | 'warning' | 'danger' | 'info'
+	resultStatusType: '' | 'success' | 'warning' | 'danger' | 'info'
+}
+
+const taskRows = ref<TaskRow[]>([])
+const tbodyRef = ref<HTMLElement | null>(null)
+let scrollTimer: number | undefined
+
+const mapItemToRow = (item: DashboardTaskItem, index: number): TaskRow => {
+	const resultStatus = Number(item.resultStatus) || 0
+	const finishCode = String(item.finishStatus ?? '').trim()
+	let finishStatusLabel = item.finishStatus
+	let finishStatusType: TaskRow['finishStatusType'] = ''
+	if (finishCode === '0') finishStatusLabel = '待完成'
+	else if (finishCode === '1') finishStatusLabel = '已完成'
+	else if (finishCode === '2') finishStatusLabel = '已取消'
+	if (finishCode === '0') finishStatusType = 'warning'
+	else if (finishCode === '1') finishStatusType = 'success'
+	else if (finishCode === '2') finishStatusType = 'info'
+	let resultStatusLabel = '-'
+	let resultStatusType: TaskRow['resultStatusType'] = ''
+	if (resultStatus === 1) {
+		resultStatusLabel = '通过'
+		resultStatusType = 'success'
+	} else if (resultStatus === 2) {
+		resultStatusLabel = '不通过'
+		resultStatusType = 'danger'
+	}
+	return {
+		id: `${item.code || 'task'}-${index}`,
+		code: item.code,
+		name: item.name,
+		type: item.type,
+		finishStatusLabel,
+		resultStatusLabel,
+		finishStatusType,
+		resultStatusType
+	}
+}
+
+const loadTaskList = async () => {
+	try {
+		const res = await DashboardApi.getAllTaskList()
+		const payload = (res && typeof res === 'object' && 'data' in res ? (res as any).data : res) as
+			| DashboardTaskItem[]
+			| null
+		if (!payload || !Array.isArray(payload)) {
+			taskRows.value = []
+			return
+		}
+		taskRows.value = payload.map(mapItemToRow)
+	} catch (error) {
+		console.error(error)
+		taskRows.value = []
+	}
+}
+
+const startAutoScroll = () => {
+	if (!tbodyRef.value) return
+	const rows = tbodyRef.value.querySelectorAll('tr')
+	if (!rows || rows.length <= 8) return
+	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(-36px)'
+		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(async () => {
+	await loadTaskList()
+	startAutoScroll()
+})
+
+onUnmounted(() => {
+	if (scrollTimer) {
+		clearInterval(scrollTimer)
+		scrollTimer = undefined
+	}
+})
 </script>
 
 <style scoped>
@@ -149,4 +264,11 @@ const taskRows = [
 .status-cell {
   font-weight: 800;
 }
+
+.status-tag {
+	min-width: 60px;
+	text-align: center;
+	border-radius: 999px;
+	padding: 0 10px;
+}
 </style>
diff --git a/src/views/report/dashboardPage/dashboard1/Dashboard8.vue b/src/views/report/dashboardPage/dashboard1/index.vue
similarity index 100%
rename from src/views/report/dashboardPage/dashboard1/Dashboard8.vue
rename to src/views/report/dashboardPage/dashboard1/index.vue
diff --git a/src/views/report/dashboardPage/dashboard8/dashboard8.html b/src/views/report/dashboardPage/dashboard8/dashboard8.html
deleted file mode 100644
index b5fd6196..00000000
--- a/src/views/report/dashboardPage/dashboard8/dashboard8.html
+++ /dev/null
@@ -1,1243 +0,0 @@
-<!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/Dashboard8.vue b/src/views/report/dashboardPage/dashboard8/index.vue
similarity index 100%
rename from src/views/report/dashboardPage/dashboard8/Dashboard8.vue
rename to src/views/report/dashboardPage/dashboard8/index.vue