From da055eab8af8aa8e85d610ef5b377035e87fc193 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Sat, 9 May 2026 14:06:32 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=B4=81=E5=87=80=E8=BD=A6?=
 =?UTF-8?q?=E9=97=B4=E7=9C=8B=E6=9D=BF=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E6=94=B9=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bigScreen/bxerp/jiejingdept.vue  | 1997 +++++++----------
 src/views/bigScreen/bxerp/jiejingdept2.vue | 1316 ++++++-----
 src/views/bigScreen/bxerp/xibodept.vue     | 2296 ++++++++++++++++----
 3 files changed, 3347 insertions(+), 2262 deletions(-)

diff --git a/src/views/bigScreen/bxerp/jiejingdept.vue b/src/views/bigScreen/bxerp/jiejingdept.vue
index e327c47a..ce2cb6ea 100644
--- a/src/views/bigScreen/bxerp/jiejingdept.vue
+++ b/src/views/bigScreen/bxerp/jiejingdept.vue
@@ -1,1226 +1,863 @@
 <template>
-	<el-container class="dashboard">
-		<el-header class="header">
-			<div class="title">洁净车间看板</div>
-			<div class="timer">{{ currentDay }} {{ currentTime }}</div>
-		</el-header>
-		<el-main>
-			<el-row>
-				<el-col :span="6">
-					<div class="leftBlock">
-						<div style="height: 50vh;position: relative;">
-							<dv-border-box-1>
-								<div class="chartBlockTitle">车间各工段生产产品数</div>
-								<div id="chartLeft1" style="width:90%;height:40vh;margin:0 auto;"></div>
-							</dv-border-box-1>
-						</div>
-						<div style="height: 40vh;" class="mat-panel-wrap">
-							<dv-border-box-1>
-								<div class="mat-inner">
-									<div class="mat-header">
-										<div class="mat-title">
-											<span class="mat-title-bar"></span>
-											<span class="mat-title-icon">📦</span>
-											产品统计
-										</div>
-									</div>
-									<div class="mat-body">
-										<div v-for="group in materialsList" :key="group.type" class="mat-group">
-											<div class="mat-group-label" :style="{ borderLeftColor: group.color }">
-												<span>{{ group.type }}</span>
-											</div>
-											<div class="mat-row" v-for="item in group.list" :key="item">
-												<span class="mat-name">{{ item }}</span>
-											</div>
-										</div>
-									</div>
-								</div>
-							</dv-border-box-1>
-						</div>
-					</div>
-				</el-col>
-				<el-col :span="12">
-					<el-row>
-						<el-col :span="6" class="numBlock">
-							<dv-border-box-12>
-								<div class="numBlock_title">今日工序报工量</div>
-								<div class="numBlock_value">245</div>
-							</dv-border-box-12>
-						</el-col>
-						<el-col :span="6" class="numBlock">
-							<dv-border-box-12>
-								<div class="numBlock_title">在产产品数</div>
-								<div class="numBlock_value">2</div>
-							</dv-border-box-12>
-						</el-col>
-						<el-col :span="6" class="numBlock">
-							<dv-border-box-12>
-								<div class="numBlock_title">本月完工工单</div>
-								<div class="numBlock_value">20</div>
-							</dv-border-box-12>
-						</el-col>
-						<el-col :span="6" class="numBlock">
-							<dv-border-box-12>
-								<div class="numBlock_title">本月计划产量</div>
-								<div class="numBlock_value">2465</div>
-							</dv-border-box-12>
-						</el-col>
-					</el-row>
-					<div class="middleBlock">
-						<div style="height: 38vh;">
-							<dv-border-box-1>
-								<div class="chartBlockTitle">车间工段任务展示</div>
-								<dv-scroll-board :config="config_middle_top" class="middleTableBlock1"/>
-							</dv-border-box-1>
-						</div>
-						<div style="height: 41vh;" class="eq-panel">
-							<dv-border-box-1>
-								<div class="eq-inner">
-									<div class="eq-header">
-										<div class="eq-title">
-											<span class="eq-title-bar"></span>
-											<span class="eq-title-icon">⚡</span>
-											拉丝设备集群 · 实时状态
-										</div>
-										<div class="eq-online-badge">在线 {{ onlineCount }}/{{ equipmentList.length }}</div>
-									</div>
-									<div class="eq-grid" ref="eqGrid">
-										<div
-											v-for="(item, idx) in scrollItems"
-											:key="idx"
-											class="eq-card"
-											:class="item.isRunning ? 'eq-card--run' : 'eq-card--stop'"
-										>
-											<div class="eq-card-name">{{ item.name }}</div>
-											<div class="eq-card-center">
-												<span class="eq-dot" :class="item.isRunning ? 'eq-dot--green' : 'eq-dot--red'"></span>
-												<span class="eq-card-state" :class="item.isRunning ? 'state-run' : 'state-stop'">
-													{{ item.running_state_text }}
-												</span>
-											</div>
-											<div class="eq-card-sub">{{ item.isRunning ? item.number : '待机中' }}</div>
-										</div>
-									</div>
-									<div class="eq-footer">
-										<span class="eq-foot-item">
-											<span class="eq-dot eq-dot--green eq-dot--sm"></span>运行中 · {{ onlineCount }}台
-										</span>
-										<span class="eq-foot-item">
-											<span class="eq-dot eq-dot--red eq-dot--sm"></span>停机/维护 · {{ equipmentList.length - onlineCount }}台
-										</span>
-										<span class="eq-foot-update">⏱ last update: {{ lastUpdateText }}</span>
-									</div>
-								</div>
-							</dv-border-box-1>
-						</div>
-					</div>
-				</el-col>
-				<el-col :span="6">
-					<div class="rightBlock">
-						<div style="height: 55vh;" class="perf-panel">
-							<dv-border-box-1>
-								<div class="perf-inner">
-									<div class="perf-header">
-										<div class="perf-title">
-											<span class="perf-title-bar"></span>
-											<span class="perf-title-icon">👥</span>
-											人员月产量 
-										</div>
-										<div class="perf-unit">单位: 件</div>
-									</div>
-									<div class="perf-list" ref="perfList">
-										<div class="perf-row" v-for="(item, idx) in scrollPerfItems" :key="idx">
-											<div class="perf-avatar">{{ item.name ? item.name.charAt(0) : '?' }}</div>
-											<div class="perf-name">{{ item.name }}</div>
-											<div class="perf-count">
-												<span class="perf-num">{{ item.count }}</span>
-												<span class="perf-unit-sm">件</span>
-											</div>
-										</div>
-									</div>
-									<div class="perf-footer">
-										<span class="perf-lightning">⚡</span>
-										标兵: {{ topPerson }}
-									</div>
-								</div>
-							</dv-border-box-1>
-						</div>
-						<div style="height: 35vh;">
-							<dv-border-box-1>
-								<div class="chartBlockTitle">车间整体产品统计</div>
-								<scEcharts :option="chartOption2" style="height: 27.5vh;width: 90%;left: 5%;"/>
-							</dv-border-box-1>
-						</div>
-					</div>
-				</el-col>
-			</el-row>
-		</el-main>
-	</el-container>
+  <div class="page">
+    <div class="grid-bg"></div>
+
+    <!-- ─── HEADER ─── -->
+    <header>
+      <div class="header-left">
+        <div>
+          <div class="datetime">{{ currentDay }} {{ currentTime }}</div>
+          <div style="display:flex;align-items:center;gap:6px;margin-top:4px">
+            <div class="status-dot"></div>
+            <span class="status-label">系统运行中</span>
+          </div>
+        </div>
+      </div>
+      <div class="header-title">洁 净 车 间 看 板</div>
+      <div class="header-right">
+        <!-- <span class="shift-badge">白班</span> -->
+        <div class="user-badge">
+          <div class="user-avatar">张</div>
+          <span style="font-size:13px">张三</span>
+        </div>
+      </div>
+    </header>
+
+    <!-- ─── KPI ROW ─── -->
+    <div class="kpi-row">
+      <div class="kpi-card cyan">
+        <div class="corner-deco corner-tl"></div><div class="corner-deco corner-br"></div>
+        <div class="kpi-icon">📦</div>
+        <div class="kpi-label">今日工序报工量</div>
+        <div class="kpi-value">3470</div>
+        <div class="kpi-trend up">↑ 较昨日 +12.4%</div>
+        <div class="kpi-progress"><div class="kpi-progress-fill" style="width:86%"></div></div>
+      </div>
+      <div class="kpi-card teal">
+        <div class="corner-deco corner-tl"></div><div class="corner-deco corner-br"></div>
+        <div class="kpi-icon">✅</div>
+        <div class="kpi-label">产品合格率</div>
+        <div class="kpi-value">98.6<span style="font-size:0.55em">%</span></div>
+        <div class="kpi-trend up">↑ 较上周 +0.3%</div>
+        <div class="kpi-progress"><div class="kpi-progress-fill" style="width:98.6%"></div></div>
+      </div>
+      <div class="kpi-card amber">
+        <div class="corner-deco corner-tl"></div><div class="corner-deco corner-br"></div>
+        <div class="kpi-icon">🎯</div>
+        <div class="kpi-label">今日目标完成率</div>
+        <div class="kpi-value">86<span style="font-size:0.55em">%</span></div>
+        <div class="kpi-trend neutral">目标 4000件</div>
+        <div class="kpi-progress"><div class="kpi-progress-fill" style="width:86%"></div></div>
+      </div>
+      <div class="kpi-card blue">
+        <div class="corner-deco corner-tl"></div><div class="corner-deco corner-br"></div>
+        <div class="kpi-icon">⚙️</div>
+        <div class="kpi-label">设备综合利用率</div>
+        <div class="kpi-value">91<span style="font-size:0.55em">%</span></div>
+        <div class="kpi-trend up">↑ 较昨日 +2.1%</div>
+        <div class="kpi-progress"><div class="kpi-progress-fill" style="width:91%"></div></div>
+      </div>
+      <div class="kpi-card coral">
+        <div class="corner-deco corner-tl"></div><div class="corner-deco corner-br"></div>
+        <div class="kpi-icon">⚠️</div>
+        <div class="kpi-label">今日故障次数</div>
+        <div class="kpi-value">2</div>
+        <div class="kpi-trend down">↑ 较昨日 +1次</div>
+        <div class="kpi-progress"><div class="kpi-progress-fill" style="width:20%"></div></div>
+      </div>
+    </div>
+
+    <!-- ─── MAIN GRID ─── -->
+    <div class="main-grid">
+
+      <!-- LEFT: Donut + Target -->
+      <div class="panel">
+        <div class="scan-line"></div>
+        <div class="corner-deco corner-tl"></div><div class="corner-deco corner-br"></div>
+        <div class="panel-title">产品种类占比</div>
+
+        <div class="donut-wrap">
+          <div id="donutChart" style="width:100%;height:100%"></div>
+          <div class="donut-center">
+            <div class="donut-center-num">3470</div>
+            <div class="donut-center-label">总产量</div>
+          </div>
+        </div>
+
+        <div style="margin-top:4px">
+          <div class="legend-row" v-for="item in donutLegend" :key="item.name">
+            <div class="legend-dot" :style="{background: item.color}"></div>
+            <span class="legend-name">{{ item.name }}</span>
+            <span class="legend-pct">{{ item.pct }}</span>
+            <span class="legend-val">{{ item.val }}</span>
+          </div>
+        </div>
+
+        <div class="target-section">
+          <div class="panel-title" style="margin-top:1vh;margin-bottom:0.8vh">今日生产进度</div>
+          <div class="target-header"><span>已完成 3470件</span><span>目标 4000件</span></div>
+          <div class="target-bar"><div class="target-fill" style="width:86.75%"></div></div>
+          <div class="target-header"><span>班次进度</span><span>当前班 74%</span></div>
+          <div class="target-bar"><div class="target-fill" style="width:74%;background:linear-gradient(90deg,#ffc107,#ff9800)"></div></div>
+          <div class="target-header"><span>周计划</span><span>本周 62%</span></div>
+          <div class="target-bar"><div class="target-fill" style="width:62%;background:linear-gradient(90deg,#bb86fc,#4fc3f7)"></div></div>
+        </div>
+      </div>
+
+      <!-- CENTER: Realtime Chart -->
+      <div class="panel panel-flex">
+        <div class="corner-deco corner-tl"></div><div class="corner-deco corner-tr"></div>
+        <div class="corner-deco corner-bl"></div><div class="corner-deco corner-br"></div>
+        <div class="panel-title">
+          设备实时检测曲线
+          <span style="color:#00e5ff;font-size:11px;margin-left:4px">{{ activeWorkstation }}</span>
+          <div class="panel-badge">每5s采集 · 实时更新</div>
+        </div>
+
+        <div class="chart-toolbar">
+          <div
+            v-for="ws in workstations"
+            :key="ws"
+            class="device-tab"
+            :class="{ active: activeWorkstation === ws }"
+            @click="switchWorkstation(ws)"
+          >{{ ws }}</div>
+          <span class="chart-info">实时刷新 ● LIVE</span>
+        </div>
+
+        <div class="realtime-wrap">
+          <div id="realtimeChart" style="width:100%;height:100%"></div>
+        </div>
+
+        <div class="chart-stats">
+          <div class="chart-stat">
+            <div class="chart-stat-label">当前值</div>
+            <div class="chart-stat-val" style="color:#00e5ff">{{ rtStats.current }}</div>
+          </div>
+          <div class="chart-stat">
+            <div class="chart-stat-label">均值</div>
+            <div class="chart-stat-val" style="color:#1de9b6">{{ rtStats.avg }}</div>
+          </div>
+          <div class="chart-stat">
+            <div class="chart-stat-label">峰值</div>
+            <div class="chart-stat-val" style="color:#ffc107">{{ rtStats.max }}</div>
+          </div>
+          <div class="chart-stat">
+            <div class="chart-stat-label">谷值</div>
+            <div class="chart-stat-val" style="color:#5a8a9f">{{ rtStats.min }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- RIGHT: Personnel -->
+      <div class="panel">
+        <div class="corner-deco corner-tl"></div><div class="corner-deco corner-br"></div>
+        <div class="panel-title">
+          人员周产量
+          <div class="panel-badge" style="margin-left:auto">本周排行</div>
+        </div>
+
+        <div class="person-row" v-for="(p, i) in persons" :key="p.name">
+          <div class="person-meta">
+            <span class="person-name" style="display:flex;align-items:center;gap:6px">
+              <span :style="{fontFamily:'monospace',fontSize:'10px',color:i<3?p.color:'#3a6070',width:'16px',display:'inline-block'}">{{ String(i+1).padStart(2,'0') }}</span>
+              {{ p.name }}
+            </span>
+            <span class="person-val" :style="{color: p.color}">{{ p.val }}</span>
+          </div>
+          <div class="person-bar">
+            <div class="person-fill" :style="{width:(p.val/maxPersonVal*100)+'%',background:p.color,opacity:i===0?1:0.7}"></div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <!-- ─── BOTTOM ROW ─── -->
+    <div class="bottom-grid">
+
+      <!-- Equipment Status -->
+      <div class="panel">
+        <div class="corner-deco corner-tl"></div><div class="corner-deco corner-br"></div>
+        <div class="panel-title">设备运行状态</div>
+        <table class="equip-table">
+          <thead>
+            <tr>
+              <th>设备名称</th>
+              <th>状态</th>
+              <th>利用率</th>
+              <th>今日产量</th>
+              <th>运行时长</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="eq in equipments" :key="eq.name">
+              <td style="color:#00e5ff">{{ eq.name }}</td>
+              <td>
+                <span class="status-tag" :class="eq.statusClass">
+                  <span class="status-dot-sm" :class="eq.dotClass"></span>{{ eq.statusText }}
+                </span>
+              </td>
+              <td>
+                <div style="display:inline-flex;align-items:center;gap:4px">
+                  <div class="util-bar"><div class="util-fill" :style="{width:eq.util+'%',background:eq.utilColor}"></div></div>
+                  {{ eq.util }}%
+                </div>
+              </td>
+              <td :style="{color: eq.statusClass==='status-err'?'#ff6b6b':'#cce8f4'}">{{ eq.output }}</td>
+              <td style="color:#5a8a9f">{{ eq.duration }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Hourly Output Chart -->
+      <div class="panel panel-flex">
+        <div class="corner-deco corner-tl"></div><div class="corner-deco corner-br"></div>
+        <div class="panel-title">今日每小时产量</div>
+        <div class="hourly-wrap">
+          <div id="hourlyChart" style="width:100%;height:100%"></div>
+        </div>
+      </div>
+
+      <!-- Stock List -->
+      <div class="panel">
+        <div class="corner-deco corner-tl"></div><div class="corner-deco corner-br"></div>
+        <div class="panel-title">
+          库存列表
+          <div class="panel-badge" style="margin-left:auto">实时库存</div>
+        </div>
+        <table class="equip-table">
+          <thead>
+            <tr>
+              <th>物料名称</th>
+              <th>工段</th>
+              <th>库存量</th>
+              <th>状态</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="s in stockList" :key="s.name">
+              <td style="color:#cce8f4">{{ s.name }}</td>
+              <td style="color:#5a8a9f">{{ s.dept }}</td>
+              <td style="font-family:'Orbitron',monospace" :style="{color: s.statusColor}">{{ s.count }}</td>
+              <td>
+                <span class="status-tag" :class="s.statusClass">
+                  <span class="status-dot-sm" :class="s.dotClass"></span>{{ s.statusText }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+    </div>
+  </div>
 </template>
 
 <script>
-import * as echarts from "echarts";
-import { runningStateEnum } from "@/utils/enum.js";
-import scScrollTavle from "@/components/scScrollTable.vue";
-import { name } from "babylonjs-gui";
-function deepCopy(obj) {
-	return JSON.parse(JSON.stringify(obj));
-}
-const myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
-export default {
-	components: { scScrollTavle },
-	data() {
-		return {
-      		runningStateEnum,
-			basicOption: {
-				backgroundColor: "",
-				tooltip: {
-					trigger: "axis",
-				},
-				legend: {
-					icon: "stack",
-					right: 0,
-				},
-				grid: {
-					left: "3%",
-					right: "2%",
-					bottom: "3%",
-					containLabel: true,
-				},
-				xAxis: {
-					type: "category",
-					boundaryGap: true,
-					data: [],
-					nameTextStyle: {
-						color: "#ffffff",
-					},
-					axisLabel: {
-						color: "#ffffff",
-					},
-				},
-				yAxis: {
-					name: "",
-					type: "value",
-					nameTextStyle: {
-						color: "#ffffff",
-					},
-					axisLabel: {
-						color: "#ffffff",
-					},
-				},
-				series: [
-					{
-						name: "",
-						type: "bar",
-						barWidth: 30,
-						label: {
-							show: true,
-							position: "top",
-							color: "#fff",
-						},
-						itemStyle: {
-							borderRadius: [5, 5, 0, 0],
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-								{offset: 0,color: "#00aaff"},
-								{offset: 1,color: "#0033ff"},
-							]),
-						},
-						data: [1,2,3,4,5,6,7],
-					},
-				],
-			},
-			chartOption1:{
-				 color: ['#2f89cf'],
-				tooltip: {
-					trigger: 'axis', 
-					axisPointer: { 
-						type: 'shadow'
-					}
-				},
-				grid: {
-					left: "0%",
-					top: "10px",
-					right: "0%", 
-					bottom: "4%", 
-					containLabel: true 
-				},
-				xAxis: {
-						type: 'category',
-						data: [], // 类目数据
-						axisTick: {
-							alignWithLabel: true // 刻度线与标签对齐
-						},
-						axisLabel: {
-							color: "rgb(255,255,255)",
-							fontSize: "8", 
-						},
-						axisLine: {
-							show: false
-						}
-					},
-				yAxis: {
-					type: 'value', 
-					axisLabel: {
-					color: "rgba(255,255,255,.6)",
-					fontSize: "12"
-					},
-				},
-				// 系列配置
-				series: {
-					name: 'Direct',
-					type: 'bar', 
-					barWidth: '15',
-					data: [],
-					itemStyle: {
-						barBorderRadius: 5 
-					}
-				}
-			},
-			chartOption2: {
-				grid: {
-					top: "10%", 
-					left: "10%",
-					bottom: "5%",
-					containLabel: true 
-				},
-				xAxis: {
-					// show: false 
-					splitLine: {
-					    show:false
-					},
-				},
-				// Y 轴配置，包含两个 Y 轴，一个用于显示类目，一个用于显示数值
-				yAxis: [
-				{
-					axisLine: {
-						show: false 
-					},
-					axisTick: {
-						show: false 
-					},
-					axisLabel: {
-						color: "#fff" 
-					},
-					splitLine: {
-					    show:false
-					},
-					type: 'category', 
-					inverse: true, // 反转坐标轴
-					data: [] 
-				},
-				{
-					show: false, 
-					axisLine: {
-						show: false 
-					},
-					axisTick: {
-						show: false 
-					},
-					splitLine: {
-					    show:false
-					},
-					axisLabel: { 
-						textStyle: {
-							fontSize: 12,
-							color: "#fff" 
-						}
-					},
-					inverse: true, // 反转坐标轴
-					data: [], 
-				}
-				],
-				// 一个柱状图，一个边框
-				series: [
-					{
-						name: '柱状图',
-						type: 'bar', 
-						data: [], 
-						yAxisIndex: 0, 
-						barCategoryGap: 50, 
-						barWidth: 10,
-						label: {
-							show: true,
-							position: "right",
-							color: "#fff",
-						},
-						itemStyle: {
-							normal: {
-								barBorderRadius: 5,
-								color: function (params) { 
-									return myColor[params.dataIndex%5];
-								}
-							},
-							label: { 
-								normal: {
-									// show: true, 
-									position: "outside",
-									color: "#fff",
-									// formatter: "{a}"
-								}
-							}
-						},
-					},
-					{
-						name: "框", 
-						type: "bar", 
-						barCategoryGap: 50,
-						barWidth: 12,
-						itemStyle: { 
-							color: "none",
-							shadowColor: '#999', // 阴影颜色
-							shadowBlur: 3, // 阴影模糊
-							shadowOffsetX: 0, // 阴影水平偏移
-							shadowOffsetY: 0, // 阴影垂直偏移 
-							borderColor: "rgba(153,153,153,0.6)", // 边框颜色
-							borderWidth: 0.5, 
-							barBorderRadius: 5,
-							
-						},
-						yAxisIndex: 1, 
-						data: [] 
-					}
-				]
-			},
-			tableHeight: 100,
-			speed: 2000,
-			time: null,
-			deptId: "",
-			dayInterval: null,
-			chartInterval2: null,
-			state_: {
-				10: '完好',
-				20: '限用',
-				30: '在修',
-				40: '禁用',
-			},
-			configData:{
-				header:['物料名称','批次号','数量'],
-				headerBGC:'#0a3f44',
-				headerHeight:40,
-				align:'center',
-				data:[],
-				waitTime:1000,
-			},
-			configData1:{
-				headerBGC:'#0a3f44',
-				header:['产出名称','规格','型号','开始时间','结束时间','完成进度','产量','状态'],
-				headerHeight:40,
-				data:[]
-			},
-			chartLeft1Data: { names: ['拉单丝', '一次复丝', '二次复丝'], values: [320, 280, 195] },
-			config_left2:{
-				data:[],
-				digitalFlopStyle: {
-					fontSize: 16,
-					fill: '#fff'
-				}
-			},
-			config_middle_top:{
-				rowNum:10,
-				headerBGC: 'rgba(47,102,107,.34)',
-				oddRowBGC: 'rgba(0,0,0,0)',
-				evenRowBGC: 'rgba(0,0,0,0)',
-			    header: ['任务编号', '产出产品', '任务量', '合格数'],
-				data: []
-			},
-			equipmentList: [],
-			lastUpdateSeconds: 0,
-			lastUpdateInterval: null,
-			scrollTimer: null,
-			performanceList: [],
-			materialsList: [
-				{type: '倒像器', color: '#53c6f3', list: [],img:'public/img/bx/dxq2.png'}, 
-				{type: '直板',  color: '#c8ff50', list: [],img:'public/img/bx/zb2.png'}, 
-				{type: '光锥',  color: '#ff9d3e', list: [],img:'public/img/bx/gz2.png'}
-			],
-			perfScrollTimer: null,
-			currentTime: "",
-			currentDay: "",
-			today: "",
-			end_time:'',
-			start_time:'',
-			deptName:"拉丝排板班组",
-			// mgroups:['洗棒','捆棒','拉单丝','排一次棒','一次复丝','排二次棒','二次复丝'],
-			mgroups:['拉单丝','一次复丝','二次复丝'],
-		};
-	},
-	computed: {
-		onlineCount() {
-			return this.equipmentList.filter(e => e.isRunning).length;
-		},
-		lastUpdateText() {
-			return this.lastUpdateSeconds > 0 ? `${this.lastUpdateSeconds}s前` : '刚刚';
-		},
-		// 渲染两份，用于无缝滚动
-		scrollItems() {
-			if (this.equipmentList.length === 0) return [];
-			return [...this.equipmentList, ...this.equipmentList];
-		},
-		// 全员按 count 降序排列
-		sortedPerfList() {
-			return [...this.performanceList]
-				.sort((a, b) => b.count - a.count);
-		},
-		// 渲染两份，用于无缝滚动
-		scrollPerfItems() {
-			if (!this.sortedPerfList.length) return [];
-			return [...this.sortedPerfList, ...this.sortedPerfList];
-		},
-		// 标兵 = 产量最多的人
-		topPerson() {
-			if (!this.performanceList.length) return '-';
-			return [...this.performanceList]
-				.sort((a, b) => b.count - a.count)[0]?.name || '-';
-		},
-		materialsGroups() {
-			if (this.equipmentList.length === 0) return [];
-			console.log(this.equipmentList);
-			return [...this.equipmentList];
-			
-		},
-	},
-	mounted() {
-		let that = this;
-		//洗棒、捆棒、拉丝 ：洗棒、捆棒、拉单丝、排一次棒、一次复丝、排二次棒、二次复丝
-		this.showTime();
-		this.dayInterval = setInterval(() => {
-			this.showTime();
-		}, 1000);
-		that.mgroupsforEach();
-		that.getEquipment();
-		that.getMgroups();
-		that.$nextTick(() => { that.renderChartLeft1(); });
-		//每个人日生产量：个人绩效
-		// that.getEveryoneCount();
-		that.materialAll();
-		let date = new Date();
-		let year = date.getFullYear();
-		let month = date.getMonth() + 1;
-		console.log(new Date(year, month, 0).getDate())
-	},
-	methods: {
-		getMondayOfCurrentWeek() {
-			let today = new Date();
-			let days = [];
-			for (let i = 6; i >= 0; i--) {
-				let date = new Date(today);
-				date.setDate(today.getDate() - i);
-				days.push(date.toISOString().split('T')[0]); // 格式化为 YYYY-MM-DD
-			}
-			return days;
-		},
-		//时间
-		showTime() {
-			this.currentTime = this.$TOOL.dateFormat(new Date(), "hh:mm:ss");
-			this.currentDay = this.$TOOL.dateFormat(
-				new Date(),
-				"yyyy年MM月dd日"
-			);
-		},
-		setChart(name, option = null) {
-			var myChart = echarts.getInstanceByDom(document.getElementById(name));
-			if (myChart == undefined) {
-				myChart = echarts.init(document.getElementById(name), "dark", {
-					renderer: "svg",
-				});
-			}
-			if (option == null) {
-				option = Object.assign({}, this.basicOption);
-			}
-			setTimeout(() => {
-				try {
-					myChart.setOption(option);
-				} catch (error) {}
-			}, 500);
-			return myChart;
-		},
-		getMgroups(){
-			let that = this;
-			let params = {page: 0,query:" { id, name }"};
-			that.$API.mtm.mgroup.list.req(params).then((res) => {
-				that.performanceList = [];
-				that.materialsList[0].list = [];
-				that.materialsList[1].list = [];
-				that.materialsList[2].list = [];
-				res.forEach((item)=>{
-					let index = that.mgroups.indexOf(item.name);
-				    if(index>-1){
-						//车间库存
-						that.getmgroupMaterial(item.id,item.name,index);
-						//员工生产统计
-						that.getEveryoneCount(item.id,item.name)
-					}
-				})
-			})
-		},
-		mgroupsforEach(){
-			let that = this;
-			that.mgroups.forEach((item)=>{
-				 that.getMtask1(item);
-			})
-		},
-		//任务进度
-		getMtask1(name) {
-			let that = this;
-			let params = {
-				state: 20,mgroup__name: name,page:0,
-				query: " { id, material_out_name, number, count, count_ok }"
-			};
-			that.config_middle_top.data = [];
-			that.$API.pm.mtask.list.req(params).then((res) => {
-				if(res.length>0){
-					res.forEach((item) => {
-						let arr = [];
-						arr[0] = item.number;
-						arr[1] = item.material_out_name;
-						arr[2] = item.count;
-						arr[3] = item.count_ok;
-						// arr[4] = item.count_ok/item.count*100+'%';
-						that.config_middle_top.data.push(arr);
-					})
-				}
-			});
-		},
-		//库存统计列表
-		getmgroupMaterial(id,name,index) {
-			let that = this;
-			let params = { tag: 'done',page:0,mgroup: id };
-			that.$API.wpm.wmaterial.list.req(params).then((res) => {
-				let count = 0;
-				res.forEach((item) => {
-				    count += Number(item.count);
-				})
-				if (!that.chartLeft1Data.names[index]) {
-					that.chartLeft1Data.names[index] = name;
-					that.chartLeft1Data.values[index] = count;
-				} else {
-					that.chartLeft1Data.values[index] = count;
-				}
-				// that.renderChartLeft1();
-			})
-		},
-		renderChartLeft1() {
-			let that = this;
-			let myChart = echarts.getInstanceByDom(document.getElementById('chartLeft1'));
-			if (!myChart) {
-				myChart = echarts.init(document.getElementById('chartLeft1'));
-			}
-			let option = {
-				backgroundColor: 'transparent',
-				grid: { left: '2%', right: '15%', top: '8%', bottom: '5%', containLabel: true },
-				xAxis: { type: 'value', axisLabel: { color: '#fff', fontSize: 12 }, splitLine: { lineStyle: { color: 'rgba(255,255,255,0.08)' } } },
-				yAxis: { type: 'category', data: that.chartLeft1Data.names, axisLabel: { color: '#fff', fontSize: 14 }, axisLine: { show: false }, axisTick: { show: false } },
-				series: [{
-					type: 'bar', data: that.chartLeft1Data.values,
-					barWidth: 18,
-					label: { show: true, position: 'right', color: '#fff', fontSize: 14, fontWeight: 'bold' },
-					itemStyle: {
-						borderRadius: [0, 6, 6, 0],
-						color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-							{ offset: 0, color: '#0a5a8a' },
-							{ offset: 1, color: '#00c8ff' },
-						]),
-					},
-				}],
-			};
-			myChart.setOption(option);
-		},
-		//车间设备列表
-		getEquipment() {
-			let that = this;
-			let params = { page: 0, belong_dept__name: '拉丝排板班组' };
-			that.equipmentList = [];
-			clearInterval(that.lastUpdateInterval);
-			that.lastUpdateSeconds = 0;
-			that.$API.em.equipment.list.req(params).then((res) => {
-				if (res.length > 0) {
-					res.forEach((item) => {
-						that.equipmentList.push({
-							id: item.id,
-							name: item.name,
-							number: item.number,
-							running_state_text: runningStateEnum[item.running_state]?.text || '未知',
-							mgroup_name: item.mgroup_name,
-							isRunning: item.running_state == 10,
-						});
-					});
-				}
-				that.lastUpdateSeconds = 0;
-				that.lastUpdateInterval = setInterval(() => {
-					that.lastUpdateSeconds++;
-				}, 1000);
-				that.$nextTick(() => { that.startAutoScroll(); });
-			});
-		},
-		startPerfScroll() {
-			const that = this;
-			clearInterval(this.perfScrollTimer);
-			this.$nextTick(() => {
-				const el = that.$refs.perfList;
-				if (!el) return;
-				const halfHeight = el.scrollHeight / 2;
-				if (halfHeight <= el.clientHeight + 1) return;
-				that.perfScrollTimer = setInterval(() => {
-					el.scrollTop += 1;
-					if (el.scrollTop >= halfHeight) {
-						el.scrollTop = 0;
-					}
-				}, 40);
-			});
-		},
-		startAutoScroll() {
-			const that = this;
-			clearInterval(this.scrollTimer);
-			this.$nextTick(() => {
-				const el = that.$refs.eqGrid;
-				if (!el) return;
-				// scrollItems 已是两倍，halfHeight 即一份的高度
-				const halfHeight = el.scrollHeight / 2;
-				// 一份内容就能装下，无需滚动
-				if (halfHeight <= el.clientHeight + 1) return;
-				that.scrollTimer = setInterval(() => {
-					el.scrollTop += 1;
-					// 滚完第一份时瞬间归零，视觉无缝
-					if (el.scrollTop >= halfHeight) {
-						el.scrollTop = 0;
-					}
-				}, 40);
-			});
-		},
-		//每个人日产量
-		getEveryoneCount(id,name){
-			let that = this;
-			let date = new Date();
-			let year = date.getFullYear();
-			let month = date.getMonth() + 1;
-			let days = new Date(year, month,0).getDate();
-			let start_date = year + "-" + month + "-01";
-			let end_date = year + "-" + month + "-" + days;
-			let params = {
-				query: {start_date:start_date,end_date:end_date,mgroup_name:name},
-			};
-			let exceStr = "";
-			if(name=='拉单丝'){
-				exceStr = "product_defect_lds";
-			}else if(name=='排一次棒'||name=='一次复丝'||name=='排二次棒'||name=='二次复丝'){
-				exceStr = "product_defect_jjcj";
-			}
-			this.$API.bi.dataset.exec.req(exceStr, params).then((res) => {
-				if(res.data2.ds0.length > 0){
-					res.data2.ds0.forEach(item => {
-						const itemName = item.员工;
-						const count = Number(item.总切片数) || 0;
-						const existing = that.performanceList.find(p => p.name === itemName);
-						if (existing) {
-							existing.count += count;
-						} else {
-							that.performanceList.push({ name: itemName, count });
-						}
-						const matName = item.物料名;
-						let index = matName.indexOf('倒像器') > -1 ? 0: matName.indexOf('直板') > -1 ?1 : 2;
-						const matExisting = that.materialsList[index].list.find(m => m === matName);
-						if (matExisting) {
-						} else {
-							that.materialsList[index].list.push(matName);
-						}
-					});
-					console.log('that.materialsList',that.materialsList);
-				}
-				that.$nextTick(() => { that.startPerfScroll(); });
-			});
-		},
-		//车间整体产品统计
-		materialAll(){
-			let that = this;
-			let obj = {};
-			that.$API.bi.dataset.exec.req("materialCount", obj).then((res) => {
-				if (res.data2.ds0&&res.data2.ds0.length>0) {
-					let arrs = res.data2.ds0;
-					let list = arrs.filter((item) => {
-						return item.dept_name == that.deptName1||item.dept_name == that.deptName2||item.dept_name == that.deptName3;
-					});
-					let namelist = [],valuelist = [],values=[];
-					if(list.length>0){
-						list.forEach((item) => {
-							let index = namelist.indexOf(item.material_name);
-							if(index==-1){
-								namelist.push(item.material_name);
-								valuelist.push(item.count);
-								values.push(item.count);
-							}
-						})
-					}
-					let maxNum = valuelist.sort((a, b) => b - a)[0]+2;
-					let arr = [];
-					valuelist.forEach((item)=>{
-					    arr.push(maxNum)
-					})
-					that.chartOption2.yAxis[0].data = namelist;
-					that.chartOption2.yAxis[1].data = valuelist;
-					that.chartOption2.series[0].data = valuelist;
-					that.chartOption2.series[1].data = arr;
+import * as echarts from 'echarts';
 
-					namelist.forEach((item,index)=>{
-						let obj = {};
-						obj.name = item;
-						obj.value = valuelist[index];
-						that.config_left2.data.push(obj);
-					})
-				}
-			});
-		},
-	},
+export default {
+  name: 'JiejingDept',
+  data() {
+    return {
+      currentTime: '',
+      currentDay: '',
+      dayInterval: null,
+      rtInterval: null,
+      rtChart: null,
+      charts: [],
+      rtLabels: [],
+      rtValues: [],
+      rtStats: { current: '24.3', avg: '22.1', max: '29.7', min: '16.2' },
+
+      activeWorkstation: '拉单丝',
+      workstations: ['拉单丝', '一次复丝', '二次复丝', '洗棒'],
+
+      donutLegend: [
+        { name: '倒像器', color: '#4fc3f7', pct: '41.0%', val: 1423 },
+        { name: '直板',   color: '#69f0ae', pct: '27.7%', val: 960 },
+        { name: '光锥',   color: '#ffc107', pct: '20.6%', val: 714 },
+        { name: '其他',   color: '#ff6b6b', pct: '9.8%',  val: 340 },
+        { name: '光棒',   color: '#bb86fc', pct: '0.9%',  val: 33 },
+      ],
+
+      persons: [
+        { name: '张三', val: 920, color: '#4fc3f7' },
+        { name: '李四', val: 796, color: '#ff6b6b' },
+        { name: '王五', val: 734, color: '#00e5ff' },
+        { name: '赵六', val: 661, color: '#ffc107' },
+        { name: '钱七', val: 594, color: '#bb86fc' },
+        { name: '孙八', val: 508, color: '#4fc3f7' },
+        { name: '周九', val: 438, color: '#ff6b6b' },
+        { name: '吴十', val: 360, color: '#69f0ae' },
+      ],
+
+      equipments: [
+        { name: '拉单丝-01',   statusClass: 'status-run',  statusText: '运行中', dotClass: 'run-dot',  util: 94, utilColor: '#1de9b6', output: 924, duration: '7h12m' },
+        { name: '拉单丝-02',   statusClass: 'status-run',  statusText: '运行中', dotClass: 'run-dot',  util: 88, utilColor: '#1de9b6', output: 876, duration: '7h08m' },
+        { name: '一次复丝-01', statusClass: 'status-idle', statusText: '待机',   dotClass: 'idle-dot', util: 71, utilColor: '#ffc107', output: 712, duration: '5h45m' },
+        { name: '二次复丝-01', statusClass: 'status-run',  statusText: '运行中', dotClass: 'run-dot',  util: 95, utilColor: '#1de9b6', output: 958, duration: '7h15m' },
+        { name: '洗棒-01',     statusClass: 'status-err',  statusText: '故障',   dotClass: 'err-dot',  util: 32, utilColor: '#ff6b6b', output: 324, duration: '2h41m' },
+      ],
+
+      stockList: [
+        { name: '倒像器毛坯',   dept: '拉单丝',   count: 1423, statusClass: 'status-run',  statusText: '充足', dotClass: 'run-dot',  statusColor: '#1de9b6' },
+        { name: '直板半成品',   dept: '一次复丝', count: 960,  statusClass: 'status-run',  statusText: '充足', dotClass: 'run-dot',  statusColor: '#1de9b6' },
+        { name: '光锥坯料',     dept: '二次复丝', count: 714,  statusClass: 'status-run',  statusText: '正常', dotClass: 'run-dot',  statusColor: '#4fc3f7' },
+        { name: '光棒原材料',   dept: '洗棒',     count: 128,  statusClass: 'status-idle', statusText: '偏低', dotClass: 'idle-dot', statusColor: '#ffc107' },
+        { name: '倒像器成品',   dept: '拉单丝',   count: 836,  statusClass: 'status-run',  statusText: '充足', dotClass: 'run-dot',  statusColor: '#1de9b6' },
+        { name: '直板成品',     dept: '一次复丝', count: 54,   statusClass: 'status-err',  statusText: '告急', dotClass: 'err-dot',  statusColor: '#ff6b6b' },
+        { name: '光锥成品',     dept: '二次复丝', count: 392,  statusClass: 'status-run',  statusText: '正常', dotClass: 'run-dot',  statusColor: '#4fc3f7' },
+      ],
+    };
+  },
+  computed: {
+    maxPersonVal() {
+      return Math.max(...this.persons.map(p => p.val));
+    },
+  },
+  mounted() {
+    this.showTime();
+    this.dayInterval = setInterval(this.showTime, 1000);
+    this.$nextTick(() => {
+      this.initDonut();
+      this.initRealtime();
+      this.initHourly();
+    });
+    window.addEventListener('resize', this.resizeCharts);
+  },
+  beforeDestroy() {
+    clearInterval(this.dayInterval);
+    clearInterval(this.rtInterval);
+    window.removeEventListener('resize', this.resizeCharts);
+    this.charts.forEach(c => c && c.dispose());
+  },
+  methods: {
+    showTime() {
+      const now = new Date();
+      const pad = n => String(n).padStart(2, '0');
+      this.currentTime = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
+      this.currentDay = `${now.getFullYear()}年${pad(now.getMonth() + 1)}月${pad(now.getDate())}日`;
+    },
+
+    switchWorkstation(ws) {
+      this.activeWorkstation = ws;
+    },
+
+    resizeCharts() {
+      this.charts.forEach(c => c && c.resize());
+    },
+
+    initDonut() {
+      const el = document.getElementById('donutChart');
+      if (!el) return;
+      const chart = echarts.init(el);
+      this.charts.push(chart);
+      chart.setOption({
+        backgroundColor: 'transparent',
+        tooltip: {
+          backgroundColor: '#071e32',
+          borderColor: '#00e5ff',
+          borderWidth: 1,
+          textStyle: { color: '#cce8f4' },
+          formatter: params => `${params.name}: ${params.value}件 (${params.percent.toFixed(1)}%)`,
+        },
+        series: [{
+          type: 'pie',
+          radius: ['68%', '85%'],
+          data: this.donutLegend.map(d => ({
+            name: d.name, value: d.val,
+            itemStyle: { color: d.color },
+          })),
+          label: { show: false },
+          itemStyle: { borderWidth: 2, borderColor: '#041525' },
+        }],
+      });
+    },
+
+    initRealtime() {
+      const el = document.getElementById('realtimeChart');
+      if (!el) return;
+
+      const pad = n => String(n).padStart(2, '0');
+      const base = new Date();
+      base.setHours(0, 12, 0, 0);
+      for (let i = 0; i < 80; i++) {
+        const t = new Date(base.getTime() + i * 18000);
+        this.rtLabels.push(`${pad(t.getHours())}:${pad(t.getMinutes())}:${pad(t.getSeconds())}`);
+        const noise = Math.sin(i * 0.4) * 3 + Math.sin(i * 0.7) * 2 + Math.sin(i * 0.13) * 4 + (Math.random() - 0.5) * 2;
+        this.rtValues.push(parseFloat((22 + noise).toFixed(1)));
+      }
+      this.calcRtStats();
+
+      this.rtChart = echarts.init(el);
+      this.charts.push(this.rtChart);
+      this.rtChart.setOption({
+        backgroundColor: 'transparent',
+        animation: false,
+        grid: { left: '3%', right: '3%', top: '8%', bottom: '15%', containLabel: true },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: '#071e32',
+          borderColor: '#00e5ff',
+          borderWidth: 1,
+          textStyle: { color: '#00e5ff' },
+          axisPointer: { lineStyle: { color: 'rgba(0,229,255,0.3)' } },
+        },
+        xAxis: {
+          type: 'category',
+          data: this.rtLabels,
+          boundaryGap: false,
+          axisLabel: { color: '#3a6070', fontSize: 9, interval: 9 },
+          axisLine: { lineStyle: { color: 'rgba(0,229,255,0.1)' } },
+          splitLine: { lineStyle: { color: 'rgba(0,229,255,0.05)' } },
+        },
+        yAxis: {
+          type: 'value',
+          min: 5, max: 35,
+          axisLabel: { color: '#3a6070', fontSize: 9 },
+          axisLine: { lineStyle: { color: 'rgba(0,229,255,0.1)' } },
+          splitLine: { lineStyle: { color: 'rgba(0,229,255,0.06)' } },
+        },
+        series: [{
+          type: 'line',
+          data: this.rtValues,
+          smooth: 0.4,
+          symbol: 'none',
+          lineStyle: { color: '#00e5ff', width: 1.5 },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(0,229,255,0.12)' },
+              { offset: 1, color: 'rgba(0,229,255,0.01)' },
+            ]),
+          },
+        }],
+      });
+
+      this.rtInterval = setInterval(() => {
+        const newVal = parseFloat((22 + Math.sin(Date.now() * 0.001) * 3 + (Math.random() - 0.5) * 3).toFixed(1));
+        this.rtValues.push(newVal);
+        this.rtValues.shift();
+        const now = new Date();
+        this.rtLabels.push(`${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`);
+        this.rtLabels.shift();
+        this.calcRtStats();
+        this.rtChart.setOption({
+          xAxis: { data: this.rtLabels },
+          series: [{ data: this.rtValues }],
+        });
+      }, 1000);
+    },
+
+    calcRtStats() {
+      const vals = this.rtValues;
+      if (!vals.length) return;
+      const current = vals[vals.length - 1];
+      const avg = (vals.reduce((a, b) => a + b, 0) / vals.length).toFixed(1);
+      const max = Math.max(...vals).toFixed(1);
+      const min = Math.min(...vals).toFixed(1);
+      this.rtStats = {
+        current: typeof current === 'number' ? current.toFixed(1) : current,
+        avg, max, min,
+      };
+    },
+
+    initHourly() {
+      const el = document.getElementById('hourlyChart');
+      if (!el) return;
+      const hours = ['8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时'];
+      const vals = [312, 428, 445, 410, 180, 430, 452, 441, 372];
+      const chart = echarts.init(el);
+      this.charts.push(chart);
+      chart.setOption({
+        backgroundColor: 'transparent',
+        animation: false,
+        grid: { left: '3%', right: '3%', top: '8%', bottom: '10%', containLabel: true },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: '#071e32',
+          borderColor: '#00e5ff',
+          borderWidth: 1,
+          textStyle: { color: '#cce8f4' },
+          formatter: params => `${params[0].axisValue}: ${params[0].value}件`,
+        },
+        xAxis: {
+          type: 'category',
+          data: hours,
+          axisLabel: { color: '#3a6070', fontSize: 10 },
+          axisLine: { lineStyle: { color: 'rgba(0,229,255,0.1)' } },
+          splitLine: { show: false },
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: { color: '#3a6070', fontSize: 9 },
+          axisLine: { lineStyle: { color: 'rgba(0,229,255,0.1)' } },
+          splitLine: { lineStyle: { color: 'rgba(0,229,255,0.06)' } },
+        },
+        series: [{
+          type: 'bar',
+          data: vals.map((v, i) => ({
+            value: v,
+            itemStyle: {
+              color: i === vals.length - 1 ? 'rgba(0,229,255,0.7)' : 'rgba(0,229,255,0.25)',
+              borderColor: i === vals.length - 1 ? '#00e5ff' : 'rgba(0,229,255,0.4)',
+              borderWidth: 1,
+              borderRadius: [3, 3, 0, 0],
+            },
+          })),
+        }],
+      });
+    },
+  },
 };
 </script>
+
 <style scoped>
-@font-face {
-	font-family: "myfont";
-	/* 字体名称 */
-	src: url("../../../utils/youShe.ttf");
-	/* 字体文件相对路径 */
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
+
+/* ─── PAGE ROOT: flex column, strict 100vh ─── */
+.page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 0 1vw 0.5vh;
+  font-family: 'Noto Sans SC', 'Microsoft Yahei', sans-serif;
+  background: #020d1a;
+  color: #cce8f4;
+  background-image:
+    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(0,80,120,0.3) 0%, transparent 70%),
+    linear-gradient(180deg, #020d1a 0%, #031422 100%);
 }
 
-.dashboard {
-	background-image: url("/public/img/photon_bg.png");
-	color: #fff;
-	font-family: "Microsoft Yahei" !important;
-	background-size: cover;
+.grid-bg {
+  position: fixed; inset: 0;
+  background-image:
+    linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px);
+  background-size: 40px 40px;
+  pointer-events: none;
+  z-index: 0;
 }
 
-.header {
-	/* background: url("/public/img/head_bg.png"); */
-	background: url("/public/img/header_bgv.png");
-	border-bottom: none;
-	background-size: 100% 100%;
-	display: block;
-	height: 8vh;
-	color: rgb(149, 255, 255);
-	font-family: "Microsoft Yahei";
-	text-align: center;
-	padding: 12px 0px;
-}
-.header > .title {
-	font-weight: bold;
-	font-family: "myfont";
-	font-size: 32px;
-	font-size:4vh;
-	letter-spacing: 10px;
-}
-.header > .timer {
-	font-size: 14px;
-	margin-top: 18px;
-	position: absolute;
-	top: 5px;
-	left: 20px;
-}
-.numBlock{
-	height: 10vh;
-}
-.numBlock_title{
-	height: 4vh;
-	width: 100%;
-	font-size: 1.5vh;
-	line-height: 4vh;
-	text-align: center;
-}
-.numBlock_value{
-	height:6vh;
-	width: 100%;
-	line-height: 5vh;
-	text-align: center;
-	font-size: 3vh;
-	font-family: "myfont";
-}
-/* ===== 产品统计面板 ===== */
-.mat-panel-wrap { position: relative; }
-
-.mat-inner {
-	position: absolute;
-	inset: 2.5%;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
+/* ─── HEADER ─── */
+header {
+  flex-shrink: 0;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  padding: 0.8vh 0.5vw 0.6vh;
+  border-bottom: 1px solid rgba(0,229,255,0.07);
+  margin-bottom: 0.8vh;
 }
 
-.mat-header {
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-	height: 4vh;
-	padding: 0 1.2vh;
-	border-bottom: 1px solid rgba(83, 198, 243, 0.25);
-}
-.mat-title {
-	display: flex;
-	align-items: center;
-	gap: 0.4vh;
-	font-size: 1.5vh;
-	font-weight: 600;
-	color: #e0f4ff;
-}
-.mat-title-bar {
-	display: inline-block;
-	width: 3px;
-	height: 1.6vh;
-	background: #00b4ff;
-	border-radius: 2px;
-	margin-right: 2px;
-}
-.mat-title-icon { font-style: normal; font-size: 1.4vh; }
+.header-left { display: flex; align-items: center; }
+.datetime { font-family: 'Orbitron', monospace; font-size: 1.1vh; color: #5a8a9f; letter-spacing: 1px; }
+.status-dot { width: 0.8vh; height: 0.8vh; border-radius: 50%; background: #1de9b6; box-shadow: 0 0 8px #1de9b6; animation: pulse 2s infinite; }
+.status-label { font-size: 1vh; color: #1de9b6; letter-spacing: 1px; }
 
-.mat-body {
-	flex: 1;
-	overflow-y: auto;
-	padding: 0.5vh 0.8vh;
-	display: flex;
-	flex-direction: column;
-	gap: 1vh;
+.header-title {
+  text-align: center;
+  font-family: 'Orbitron', monospace;
+  font-size: 2.2vw;
+  font-weight: 900;
+  letter-spacing: 0.5vw;
+  color: #00e5ff;
+  text-shadow: 0 0 30px rgba(0,229,255,0.5), 0 0 60px rgba(0,229,255,0.2);
+  position: relative;
 }
-.mat-body::-webkit-scrollbar { width: 2px; }
-.mat-body::-webkit-scrollbar-thumb { background: rgba(83, 198, 243, 0.3); border-radius: 2px; }
-
-.mat-group { display: flex; flex-direction: column; gap: 0.35vh; }
-
-.mat-group-label {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 0.25vh 0.6vh;
-	margin-bottom: 0.15vh;
-	border-left: 2.5px solid;
-	background: rgba(255, 255, 255, 0.04);
-	border-radius: 0 0.4vh 0.4vh 0;
-	font-size: 1.25vh;
-	font-weight: 600;
-	color: rgba(220, 240, 255, 0.9);
+.header-title::before, .header-title::after {
+  content: '';
+  position: absolute; top: 50%;
+  width: 2vw; height: 1px;
+  background: linear-gradient(90deg, transparent, #00e5ff);
 }
-.mat-group-total {
-	font-size: 1.3vh;
-	font-weight: 700;
-	font-family: "myfont", "Microsoft Yahei";
+.header-title::before { right: calc(100% + 0.8vw); }
+.header-title::after  { left:  calc(100% + 0.8vw); background: linear-gradient(90deg, #00e5ff, transparent); }
+
+.header-right { display: flex; align-items: center; justify-content: flex-end; gap: 1vw; }
+.user-badge {
+  display: flex; align-items: center; gap: 0.5vw;
+  background: #071e32; border: 1px solid rgba(0,229,255,0.18);
+  border-radius: 2vh; padding: 0.3vh 1vw 0.3vh 0.5vw;
+  font-size: 1.2vh;
+}
+.user-avatar {
+  width: 2.4vh; height: 2.4vh; border-radius: 50%;
+  background: linear-gradient(135deg, #00e5ff, #1de9b6);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 1vh; font-weight: 700; color: #020d1a;
+}
+.shift-badge {
+  font-size: 1vh; color: #ffc107; border: 1px solid rgba(255,193,7,0.3);
+  border-radius: 4px; padding: 0.2vh 0.6vw; letter-spacing: 1px;
 }
 
-.mat-row {    
-	width: 100%;
-    text-align: left;
-	font-size: 1.1vh;
-	color: rgba(180, 215, 240, 0.75);
-	padding: 0.1vh 1vw;
-	
-}
-.mat-name {
-	width: 9vh;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	flex-shrink: 0;
-}
-.mat-bar-wrap {
-	flex: 1;
-	height: 0.7vh;
-	background: rgba(255, 255, 255, 0.08);
-	border-radius: 1vh;
-	overflow: hidden;
-}
-.mat-bar {
-	display: block;
-	height: 100%;
-	border-radius: 1vh;
-	opacity: 0.75;
-	transition: width 0.6s ease;
-}
-.mat-count {
-	flex-shrink: 0;
-	width: 4vh;
-	text-align: right;
-	font-weight: 700;
-	font-family: "myfont", "Microsoft Yahei";
-	font-size: 1.3vh;
-	color: #c8ff50;
-}
-.middleTableBlock1{
-	width:94%;
-	height:31vh;
-	position: absolute;
-	left: 4%
-}
-.middleTableBlock2{
-	width:94%;
-	height:34vh;
-	position: absolute;
-	left: 4%
-}
-.chartBlockTitle{
-	width: 90%;
-	height: 5vh;
-	margin: auto;
-	line-height: 6vh;
-	border-radius: 10px;
-	text-align: left;
-	padding-left: 10px;
-	font-size: 1.6vh;
-    font-weight: 600;
-	border-bottom: 1px solid rgb(83 198 243);
+/* ─── KPI ROW ─── */
+.kpi-row {
+  flex-shrink: 0;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 0.7vw;
+  margin-bottom: 0.8vh;
 }
 
-/* ===== 设备卡片面板 ===== */
-.eq-panel { position: relative; }
+.kpi-card {
+  background: #071e32;
+  border: 1px solid rgba(0,229,255,0.18);
+  border-radius: 8px;
+  padding: 1.2vh 1.2vw;
+  position: relative;
+  overflow: hidden;
+  transition: border-color 0.3s;
+}
+.kpi-card::before {
+  content: '';
+  position: absolute; top: 0; left: 0; right: 0; height: 2px;
+}
+.kpi-card.cyan::before  { background: linear-gradient(90deg, transparent, #00e5ff, transparent); }
+.kpi-card.teal::before  { background: linear-gradient(90deg, transparent, #1de9b6, transparent); }
+.kpi-card.amber::before { background: linear-gradient(90deg, transparent, #ffc107, transparent); }
+.kpi-card.coral::before { background: linear-gradient(90deg, transparent, #ff6b6b, transparent); }
+.kpi-card.blue::before  { background: linear-gradient(90deg, transparent, #4fc3f7, transparent); }
+.kpi-card:hover { border-color: rgba(0,229,255,0.4); }
 
-/* dv-border-box-1 内层弹性布局，严格撑满边框内部 */
-.eq-inner {
-	position: absolute;
-	inset: 2.5%;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
+.kpi-icon {
+  width: 3.2vh; height: 3.2vh; border-radius: 6px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 1.6vh; margin-bottom: 0.7vh;
+}
+.kpi-card.cyan  .kpi-icon { background: rgba(0,229,255,0.1); }
+.kpi-card.teal  .kpi-icon { background: rgba(29,233,182,0.1); }
+.kpi-card.amber .kpi-icon { background: rgba(255,193,7,0.1); }
+.kpi-card.coral .kpi-icon { background: rgba(255,107,107,0.1); }
+.kpi-card.blue  .kpi-icon { background: rgba(79,195,247,0.1); }
+
+.kpi-label { font-size: 1vh; color: #5a8a9f; letter-spacing: 1px; margin-bottom: 0.4vh; }
+.kpi-value {
+  font-family: 'Orbitron', monospace;
+  font-size: 2.6vh; font-weight: 700;
+  line-height: 1; margin-bottom: 0.5vh;
+}
+.kpi-card.cyan  .kpi-value { color: #00e5ff; }
+.kpi-card.teal  .kpi-value { color: #1de9b6; }
+.kpi-card.amber .kpi-value { color: #ffc107; }
+.kpi-card.coral .kpi-value { color: #ff6b6b; }
+.kpi-card.blue  .kpi-value { color: #4fc3f7; }
+
+.kpi-trend { font-size: 1vh; display: flex; align-items: center; gap: 4px; }
+.kpi-trend.up      { color: #1de9b6; }
+.kpi-trend.down    { color: #ff6b6b; }
+.kpi-trend.neutral { color: #5a8a9f; }
+
+.kpi-progress {
+  position: absolute; bottom: 0; left: 0; right: 0;
+  height: 3px; background: rgba(255,255,255,0.05);
+  border-radius: 0 0 8px 8px;
+}
+.kpi-progress-fill { height: 100%; border-radius: 0 0 8px 8px; }
+.cyan  .kpi-progress-fill { background: #00e5ff; }
+.teal  .kpi-progress-fill { background: #1de9b6; }
+.amber .kpi-progress-fill { background: #ffc107; }
+.coral .kpi-progress-fill { background: #ff6b6b; }
+.blue  .kpi-progress-fill { background: #4fc3f7; }
+
+/* ─── MAIN GRID: fills remaining height ─── */
+.main-grid {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 22vw 1fr 23vw;
+  gap: 0.7vw;
+  margin-bottom: 0.8vh;
 }
 
-.eq-header {
-	flex-shrink: 0;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 0 1.2vh;
-	height: 4vh;
-	border-bottom: 1px solid rgba(83, 198, 243, 0.25);
-}
-.eq-title {
-	display: flex;
-	align-items: center;
-	gap: 0.4vh;
-	font-size: 1.5vh;
-	font-weight: 600;
-	color: #e0f4ff;
-}
-.eq-title-bar {
-	display: inline-block;
-	width: 3px;
-	height: 1.6vh;
-	background: #00b4ff;
-	border-radius: 2px;
-	margin-right: 2px;
-}
-.eq-title-icon { font-style: normal; color: #ff9d3e; font-size: 1.4vh; }
-.eq-online-badge { font-size: 1.2vh; color: rgba(180, 230, 255, 0.7); }
-
-/* 卡片网格 — flex:1 填充剩余空间，overflow hidden 由 JS 控制滚动 */
-.eq-grid {
-	flex: 1;
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-	align-content: start;
-	gap: 0.5vh;
-	padding: 0.5vh 0.8vh;
-	overflow: hidden;    /* JS 滚动，隐藏滚动条 */
-	overflow-y: hidden;
+/* ─── PANELS ─── */
+.panel {
+  background: #071e32;
+  border: 1px solid rgba(0,229,255,0.18);
+  border-radius: 8px;
+  padding: 1.2vh 1.2vw;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  height: 100%;
 }
 
-.eq-card {
-	background: rgba(8, 25, 45, 0.85);
-	border-radius: 0.8vh;
-	border: 1px solid rgba(40, 80, 120, 0.5);
-	padding: 0.4vh 0.3vh;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 0.3vh;
-}
-.eq-card--run {
-	border-color: rgba(0, 200, 100, 0.35);
-	box-shadow: inset 0 0 8px rgba(0, 200, 100, 0.06);
-}
-.eq-card--stop {
-	border-color: rgba(80, 90, 110, 0.45);
+/* Center & hourly chart panels use flex column so charts can flex-grow */
+.panel-flex {
+  display: flex;
+  flex-direction: column;
 }
 
-.eq-card-name {
-	font-size: 1.05vh;
-	color: rgba(180, 220, 255, 0.9);
-	background: rgba(0, 55, 100, 0.55);
-	padding: 0.1vh 0.6vh;
-	border-radius: 0.4vh;
-	border: 1px solid rgba(80, 160, 220, 0.3);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	max-width: 95%;
+.panel-title {
+  flex-shrink: 0;
+  font-size: 1.1vh;
+  color: #00e5ff;
+  letter-spacing: 2px;
+  margin-bottom: 1vh;
+  display: flex;
+  align-items: center;
+  gap: 0.5vw;
 }
-.eq-card-center {
-	display: flex;
-	align-items: center;
-	gap: 0.5vh;
-}
-.eq-card-state {
-	font-size: 1.5vh;
-	font-weight: bold;
-}
-.state-run  { color: #00e676; }
-.state-stop { color: #ff5252; }
-
-.eq-card-sub {
-	font-size: 0.9vh;
-	color: rgba(140, 195, 225, 0.55);
+.panel-title::before {
+  content: '';
+  width: 3px; height: 1.4vh;
+  background: #00e5ff;
+  border-radius: 2px;
+  box-shadow: 0 0 8px #00e5ff;
+  flex-shrink: 0;
 }
 
-/* 指示点 */
-.eq-dot {
-	display: inline-block;
-	border-radius: 50%;
-	flex-shrink: 0;
-	width: 1.1vh;
-	height: 1.1vh;
-}
-.eq-dot--green {
-	background: #00e676;
-	box-shadow: 0 0 5px #00e676, 0 0 12px rgba(0, 230, 118, 0.5);
-	animation: pulse-green 2s ease-in-out infinite;
-}
-.eq-dot--red {
-	background: #ff5252;
-	box-shadow: 0 0 5px #ff5252, 0 0 10px rgba(255, 82, 82, 0.45);
-}
-.eq-dot--sm { width: 0.8vh; height: 0.8vh; }
-
-@keyframes pulse-green {
-	0%, 100% { box-shadow: 0 0 4px #00e676, 0 0 10px rgba(0,230,118,0.4); }
-	50%       { box-shadow: 0 0 8px #00e676, 0 0 18px rgba(0,230,118,0.75); }
+.panel-badge {
+  margin-left: auto;
+  font-size: 0.9vh; color: #5a8a9f;
+  background: #0a2540;
+  border: 1px solid rgba(0,229,255,0.07);
+  border-radius: 4px; padding: 0.2vh 0.5vw;
+  white-space: nowrap;
 }
 
-/* 底栏 */
-.eq-footer {
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-	padding: 0 1.2vh;
-	height: 3.5vh;
-	border-top: 1px solid rgba(83, 198, 243, 0.2);
-	gap: 2vh;
+/* ─── DONUT ─── */
+.donut-wrap { position: relative; width: 16vh; height: 16vh; margin: 0 auto 1vh; flex-shrink: 0; }
+.donut-center {
+  position: absolute; inset: 0;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  pointer-events: none;
 }
-.eq-foot-item {
-	display: flex;
-	align-items: center;
-	gap: 0.5vh;
-	font-size: 1.1vh;
-	color: rgba(180, 220, 255, 0.8);
+.donut-center-num { font-family: 'Orbitron', monospace; font-size: 1.8vh; color: #00e5ff; }
+.donut-center-label { font-size: 0.9vh; color: #5a8a9f; margin-top: 2px; }
+
+.legend-row {
+  display: flex; align-items: center; gap: 0.4vw;
+  padding: 0.45vh 0;
+  border-bottom: 1px solid rgba(0,229,255,0.07);
+  font-size: 1.1vh;
 }
-.eq-foot-update {
-	margin-left: auto;
-	font-size: 1.05vh;
-	color: rgba(120, 175, 215, 0.55);
+.legend-row:last-child { border-bottom: none; }
+.legend-dot { width: 0.7vh; height: 0.7vh; border-radius: 2px; flex-shrink: 0; }
+.legend-name { flex: 1; color: #5a8a9f; }
+.legend-pct { color: #cce8f4; font-weight: 500; }
+.legend-val { color: #5a8a9f; font-size: 1vh; width: 3vw; text-align: right; }
+
+/* ─── TARGET PROGRESS ─── */
+.target-section { margin-top: 0.8vh; }
+.target-header { display: flex; justify-content: space-between; margin-bottom: 0.4vh; font-size: 1vh; color: #5a8a9f; }
+.target-bar { height: 0.6vh; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; margin-bottom: 0.8vh; }
+.target-fill {
+  height: 100%; border-radius: 3px;
+  background: linear-gradient(90deg, #00e5ff, #1de9b6);
+  position: relative; overflow: hidden;
+  transition: width 1.5s ease;
+}
+.target-fill::after {
+  content: '';
+  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+  animation: shimmer 2s infinite;
 }
 
-/* ===== 人员日产量 TOP5 ===== */
-.perf-panel { position: relative; }
+/* ─── REALTIME CHART ─── */
+.chart-toolbar {
+  flex-shrink: 0;
+  display: flex; align-items: center; gap: 0.5vw;
+  margin-bottom: 0.8vh;
+}
+.device-tab {
+  padding: 0.3vh 0.7vw; border-radius: 4px; cursor: pointer;
+  border: 1px solid rgba(0,229,255,0.07);
+  color: #5a8a9f; font-size: 1vh; letter-spacing: 1px;
+  transition: all 0.2s; white-space: nowrap;
+}
+.device-tab.active {
+  background: rgba(0,229,255,0.15); border-color: #00e5ff; color: #00e5ff;
+}
+.chart-info { margin-left: auto; color: #3a6070; font-size: 0.9vh; letter-spacing: 1px; }
 
-.perf-inner {
-	position: absolute;
-	inset: 2.5%;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
+/* realtime wrap grows to fill center panel */
+.realtime-wrap { flex: 1; min-height: 0; position: relative; }
+
+.chart-stats {
+  flex-shrink: 0;
+  display: grid; grid-template-columns: repeat(4, 1fr);
+  gap: 0.5vw; margin-top: 0.8vh;
+}
+.chart-stat {
+  background: #0a2540; border-radius: 6px;
+  padding: 0.6vh 0.5vw; text-align: center;
+}
+.chart-stat-label { font-size: 0.9vh; color: #5a8a9f; margin-bottom: 0.3vh; }
+.chart-stat-val { font-family: 'Orbitron', monospace; font-size: 1.3vh; }
+
+/* ─── PERSONNEL ─── */
+.person-row { margin-bottom: 0.9vh; }
+.person-meta { display: flex; justify-content: space-between; margin-bottom: 0.3vh; font-size: 1.1vh; }
+.person-name { color: #cce8f4; }
+.person-val { font-family: 'Orbitron', monospace; font-size: 1.1vh; }
+.person-bar { height: 0.7vh; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
+.person-fill { height: 100%; border-radius: 4px; }
+
+/* ─── BOTTOM GRID: fixed height ─── */
+.bottom-grid {
+  flex-shrink: 0;
+  height: 26vh;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0.7vw;
 }
 
-.perf-header {
-	flex-shrink: 0;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	height: 4vh;
-	padding: 0 1vh;
-	border-bottom: 1px solid rgba(83, 198, 243, 0.2);
+/* ─── EQUIPMENT TABLE ─── */
+.equip-table { width: 100%; border-collapse: collapse; font-size: 1.1vh; }
+.equip-table th {
+  color: #5a8a9f; font-weight: 400; letter-spacing: 1px;
+  padding: 0.5vh 0.5vw; border-bottom: 1px solid rgba(0,229,255,0.07);
+  text-align: left; font-size: 0.9vh;
 }
-.perf-title {
-	display: flex;
-	align-items: center;
-	gap: 0.5vh;
-	font-size: 1.5vh;
-	font-weight: 600;
-	color: #e0f4ff;
-}
-.perf-title-bar {
-	display: inline-block;
-	width: 3px;
-	height: 1.8vh;
-	background: #00b4ff;
-	border-radius: 2px;
-}
-.perf-title-icon { font-style: normal; font-size: 1.4vh; }
-.perf-unit { font-size: 1.2vh; color: rgba(180, 220, 255, 0.55); }
+.equip-table td { padding: 0.6vh 0.5vw; border-bottom: 1px solid rgba(0,229,255,0.07); }
+.equip-table tr:last-child td { border-bottom: none; }
+.equip-table tr:hover td { background: rgba(0,229,255,0.07); }
 
-/* 列表区 */
-.perf-list {
-	flex: 1;
-	overflow: hidden;   /* JS 控制滚动，隐藏滚动条 */
-	padding: 0 1vh;
+.status-tag {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 0.2vh 0.5vw; border-radius: 4px; font-size: 0.9vh;
 }
-.perf-row {
-	display: flex;
-	align-items: center;
-	gap: 1.2vh;
-	height: 5.2vh;      /* 固定行高，保证无缝滚动节奏一致 */
-	border-bottom: 1px solid rgba(83, 198, 243, 0.12);
-	flex-shrink: 0;
-}
-
-/* 头像圆圈 */
-.perf-avatar {
-	flex-shrink: 0;
-	width: 3.6vh;
-	height: 3.6vh;
-	border-radius: 50%;
-	background: linear-gradient(135deg, #1a6fa8 0%, #0d4a7a 100%);
-	border: 1.5px solid rgba(100, 180, 255, 0.5);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 1.5vh;
-	font-weight: 600;
-	color: #b8e0ff;
-}
-
-.perf-name {
-	flex: 1;
-	font-size: 1.6vh;
-	color: rgba(210, 235, 255, 0.9);
-}
-
-.perf-count {
-	display: flex;
-	align-items: baseline;
-	gap: 0.3vh;
-}
-.perf-num {
-	font-size: 2.4vh;
-	font-weight: 700;
-	color: #c8ff50;
-	font-family: "myfont", "Microsoft Yahei";
-	letter-spacing: 1px;
-}
-.perf-unit-sm {
-	font-size: 1.1vh;
-	color: rgba(180, 220, 160, 0.7);
-}
-
-/* 底部标兵栏 */
-.perf-footer {
-	flex-shrink: 0;
-	height: 4vh;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 0.6vh;
-	background: rgba(15, 40, 65, 0.8);
-	border-radius: 2vh;
-	font-size: 1.35vh;
-	color: rgba(200, 230, 255, 0.85);
-	border: 1px solid rgba(60, 120, 180, 0.3);
-	margin-top: 0.5vh;
-}
-.perf-lightning {
-	font-style: normal;
-	color: #ff9d3e;
-	font-size: 1.4vh;
+.status-run  { background: rgba(29,233,182,0.12); color: #1de9b6; border: 1px solid rgba(29,233,182,0.3); }
+.status-idle { background: rgba(255,193,7,0.12);  color: #ffc107; border: 1px solid rgba(255,193,7,0.3); }
+.status-err  { background: rgba(255,107,107,0.12); color: #ff6b6b; border: 1px solid rgba(255,107,107,0.3); }
+.status-dot-sm { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
+.run-dot  { background: #1de9b6; box-shadow: 0 0 4px #1de9b6; animation: pulse 2s infinite; }
+.idle-dot { background: #ffc107; }
+.err-dot  { background: #ff6b6b; box-shadow: 0 0 4px #ff6b6b; animation: pulse 1s infinite; }
+
+.util-bar { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; width: 4vw; display: inline-block; overflow: hidden; vertical-align: middle; }
+.util-fill { height: 100%; border-radius: 2px; }
+
+/* ─── HOURLY CHART: grows in panel-flex ─── */
+.hourly-wrap { flex: 1; min-height: 0; position: relative; }
+
+
+/* ─── CORNER DECORATIONS ─── */
+.corner-deco {
+  position: absolute; width: 12px; height: 12px;
+  border-color: #00e5ff; opacity: 0.5;
+}
+.corner-tl { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
+.corner-tr { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }
+.corner-bl { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }
+.corner-br { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }
+
+/* ─── SCAN LINE ─── */
+.scan-line {
+  position: absolute; left: 0; right: 0; height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.2), transparent);
+  animation: scan 4s linear infinite; pointer-events: none;
 }
 
+@keyframes scan    { from { top: 0; } to { top: 100%; } }
+@keyframes pulse   { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
+@keyframes shimmer { to { left: 200%; } }
 </style>
diff --git a/src/views/bigScreen/bxerp/jiejingdept2.vue b/src/views/bigScreen/bxerp/jiejingdept2.vue
index 09749d03..d4a4bce7 100644
--- a/src/views/bigScreen/bxerp/jiejingdept2.vue
+++ b/src/views/bigScreen/bxerp/jiejingdept2.vue
@@ -1,725 +1,625 @@
 <template>
-	<el-container class="dashboard">
-		<el-header class="header">
-			<div class="title">洁净车间看板</div>
-			<div class="timer">{{ currentDay }} {{ currentTime }}</div>
-		</el-header>
-		<el-main>
-			<el-row style="margin-bottom: 1vh;">
-				<el-col :span="3" class="numBlock">
-					<dv-border-box-12>
-						<div class="numBlock_title">本月产量</div>
-						<div class="numBlock_value">123</div>
-					</dv-border-box-12>
-				</el-col>
-				<el-col :span="3" class="numBlock">
-					<dv-border-box-12>
-						<div class="numBlock_title">今日产量</div>
-						<div class="numBlock_value">123</div>
-					</dv-border-box-12>
-				</el-col>
-				<el-col :span="3" class="numBlock">
-					<dv-border-box-12>
-						<div class="numBlock_title">今日工序报工量</div>
-						<div class="numBlock_value">123</div>
-					</dv-border-box-12>
-				</el-col>
-				<el-col :span="3" class="numBlock">
-					<dv-border-box-12>
-						<div class="numBlock_title">在产产品数</div>
-						<div class="numBlock_value">123</div>
-					</dv-border-box-12>
-				</el-col>
-				<el-col :span="3" class="numBlock">
-					<dv-border-box-12>
-						<div class="numBlock_title">本月完工工单</div>
-						<div class="numBlock_value">123</div>
-					</dv-border-box-12>
-				</el-col>
-				<el-col :span="3" class="numBlock">
-					<dv-border-box-12>
-						<div class="numBlock_title">本月计划产量</div>
-						<div class="numBlock_value">123</div>
-					</dv-border-box-12>
-				</el-col>
-				<el-col :span="3" class="numBlock">
-					<dv-border-box-12>
-						<div class="numBlock_title">本月产量</div>
-						<div class="numBlock_value">123</div>
-					</dv-border-box-12>
-				</el-col>
-				<el-col :span="3" class="numBlock">
-					<dv-border-box-12>
-						<div class="numBlock_title">本月产量</div>
-						<div class="numBlock_value">123</div>
-					</dv-border-box-12>
-				</el-col>
-			</el-row>
-			<el-row>
-				<el-col :span="6">
-					<div class="leftBlock">
-						<el-row style="margin-bottom: 1vh;">
-							<el-col :span="12" class="numBlock">
-								<dv-border-box-12>
-									<div class="numBlock_title">在制工序数</div>
-									<div class="numBlock_value">123</div>
-								</dv-border-box-12>
-							</el-col>
-							<el-col :span="12" class="numBlock">
-								<dv-border-box-12>
-									<div class="numBlock_title">今日完成工序</div>
-									<div class="numBlock_value">123</div>
-								</dv-border-box-12>
-							</el-col>
-						</el-row>
-						<div style="height: 34vh;position: relative;">
-							<dv-border-box-1>
-								<div class="chartBlockTitle">车间各工段生产产品数</div>
-								<dv-capsule-chart :config="config_left1" class="leftChartBlock1"/>
-							</dv-border-box-1>
-						</div>
-						<div style="height: 34vh;">
-							<dv-border-box-1>
-								<div class="chartBlockTitle">产品占比</div>
-								<dv-active-ring-chart :config="config_left2" class="leftChartBlock2"/>
-							</dv-border-box-1>
-						</div>
-					</div>
-				</el-col>
-				<el-col :span="12">
-					<div class="middleBlock">
-						<div style="height: 38vh;">
-							<dv-border-box-1>
-								<div class="chartBlockTitle">车间工段任务展示</div>
-								<dv-scroll-board :config="config_middle_top" class="middleTableBlock1"/>
-							</dv-border-box-1>
-						</div>
-						<div style="height: 41vh;">
-							<dv-border-box-1>
-								<div class="chartBlockTitle">设备列表</div>
-								<dv-scroll-board :config="config_middle_bottom" class="middleTableBlock2"/>
-							</dv-border-box-1>
-						</div>
-					</div>
-				</el-col>
-				<el-col :span="6">
-					<div class="rightBlock">
-						<el-row style="margin-bottom: 1vh;">
-							<el-col :span="12" class="numBlock">
-								<dv-border-box-12>
-									<div class="numBlock_title">在制工单数</div>
-									<div class="numBlock_value">123</div>
-								</dv-border-box-12>
-							</el-col>
-							<el-col :span="12" class="numBlock">
-								<dv-border-box-12>
-									<div class="numBlock_title">本月交付数</div>
-									<div class="numBlock_value">123</div>
-								</dv-border-box-12>
-							</el-col>
-						</el-row>
-						<div style="height: 34vh;">
-							<dv-border-box-1>
-								<div class="chartBlockTitle">每个人日产量</div>
-								<dv-scroll-board :config="config_right_top" style="height: 27.5vh;width: 90%;left: 5%;"/>
-								<!-- <scEcharts :option="chartOption1" style="height: 27.5vh;width: 90%;left: 5%;"/> -->
-							</dv-border-box-1>
-						</div>
-						<div style="height: 34vh;">
-							<dv-border-box-1>
-								<div class="chartBlockTitle">车间整体产品统计</div>
-								<scEcharts :option="chartOption2" style="height: 27.5vh;width: 90%;left: 5%;"/>
-							</dv-border-box-1>
-						</div>
-					</div>
-				</el-col>
-			</el-row>
-		</el-main>
-	</el-container>
+  <div class="page">
+    <div class="grid-bg"></div>
+
+    <!-- ─── HEADER ─── -->
+    <header>
+      <div class="hdr-left">
+        <div class="datetime">{{ currentDay }} {{ currentTime }}</div>
+        <div class="sys-status">
+          <div class="pulse-dot"></div>
+          <span class="sys-label">系统运行中</span>
+        </div>
+      </div>
+      <div class="hdr-title">排 板 车 间 看 板</div>
+      <div class="hdr-right">
+        <!-- <span class="shift-badge">白班</span> -->
+        <div class="user-badge">
+          <div class="user-av">张</div>
+          <span>张三</span>
+        </div>
+      </div>
+    </header>
+
+    <!-- ─── KPI ROW ─── -->
+    <div class="kpi-row">
+      <div class="kpi cc">
+        <div class="kpi-top"><div class="kpi-icon">📦</div><span class="kpi-unit">件</span></div>
+        <div class="kpi-label">今日报工量</div>
+        <div class="kpi-val">2840</div>
+        <div class="kpi-sub up">↑ 较昨日 +8.2%</div>
+        <div class="kpi-prog"><div class="kpi-prog-fill" style="width:79%"></div></div>
+      </div>
+      <div class="kpi ct">
+        <div class="kpi-top"><div class="kpi-icon">✅</div><span class="kpi-unit">%</span></div>
+        <div class="kpi-label">产品合格率</div>
+        <div class="kpi-val">97.8</div>
+        <div class="kpi-sub up">↑ 较上周 +0.5%</div>
+        <div class="kpi-prog"><div class="kpi-prog-fill" style="width:97.8%"></div></div>
+      </div>
+      <div class="kpi ca">
+        <div class="kpi-top"><div class="kpi-icon">🎯</div><span class="kpi-unit">%</span></div>
+        <div class="kpi-label">今日目标完成率</div>
+        <div class="kpi-val">79</div>
+        <div class="kpi-sub neutral">目标 3600 件</div>
+        <div class="kpi-prog"><div class="kpi-prog-fill" style="width:79%"></div></div>
+      </div>
+      <div class="kpi cb">
+        <div class="kpi-top"><div class="kpi-icon">⚙️</div><span class="kpi-unit">%</span></div>
+        <div class="kpi-label">设备综合利用率</div>
+        <div class="kpi-val">88</div>
+        <div class="kpi-sub up">↑ 较昨日 +1.4%</div>
+        <div class="kpi-prog"><div class="kpi-prog-fill" style="width:88%"></div></div>
+      </div>
+      <div class="kpi cr">
+        <div class="kpi-top"><div class="kpi-icon">⚠️</div><span class="kpi-unit">次</span></div>
+        <div class="kpi-label">今日故障次数</div>
+        <div class="kpi-val">1</div>
+        <div class="kpi-sub down">↑ 较昨日 +1 次</div>
+        <div class="kpi-prog"><div class="kpi-prog-fill" style="width:10%"></div></div>
+      </div>
+    </div>
+
+    <!-- ─── MAIN GRID ─── -->
+    <div class="main-grid">
+
+      <!-- LEFT: Donut + Progress -->
+      <div class="panel">
+        <div class="scan"></div>
+        <div class="corner tl"></div><div class="corner br"></div>
+        <div class="ptitle">产品种类占比</div>
+
+        <div class="donut-wrap">
+          <div id="donutChart" style="width:100%;height:100%"></div>
+          <div class="donut-ctr">
+            <div class="donut-num">2840</div>
+            <div class="donut-lbl">总产量</div>
+          </div>
+        </div>
+
+        <div>
+          <div class="leg-row" v-for="item in donutLegend" :key="item.name">
+            <div class="leg-dot" :style="{background: item.color}"></div>
+            <span class="leg-name">{{ item.name }}</span>
+            <span class="leg-pct">{{ item.pct }}</span>
+            <span class="leg-val">{{ item.val }}</span>
+          </div>
+        </div>
+
+        <div class="prog-section">
+          <div class="ptitle" style="margin-top:1vh">生产进度</div>
+          <div class="prog-hdr"><span>今日完成 2840</span><span>目标 3600</span></div>
+          <div class="prog-bar"><div class="prog-fill" style="width:78.9%;background:linear-gradient(90deg,#00e5ff,#1de9b6)"></div></div>
+          <div class="prog-hdr"><span>班次进度</span><span>68%</span></div>
+          <div class="prog-bar"><div class="prog-fill" style="width:68%;background:linear-gradient(90deg,#ffc107,#ff9800)"></div></div>
+          <div class="prog-hdr"><span>本周计划</span><span>55%</span></div>
+          <div class="prog-bar" style="margin-bottom:0"><div class="prog-fill" style="width:55%;background:linear-gradient(90deg,#bb86fc,#4fc3f7)"></div></div>
+        </div>
+      </div>
+
+      <!-- CENTER: Personnel 2-col + Weekly Trend -->
+      <div class="panel panel-flex">
+        <div class="corner tl"></div><div class="corner tr"></div>
+        <div class="corner bl"></div><div class="corner br"></div>
+        <div class="ptitle">人员周产量<div class="pbadge">本周排行 TOP 10</div></div>
+
+        <div class="person-grid">
+          <div class="p-row" v-for="(p, i) in persons" :key="p.name">
+            <div class="p-meta">
+              <div class="p-left">
+                <span class="p-rank" :style="{color: i<3 ? rankColors[i] : '#3a6070'}">{{ String(i+1).padStart(2,'0') }}</span>
+                <div class="p-av" :style="{background: p.color+'22', color: p.color, border: '1px solid '+p.color+'44'}">{{ p.av }}</div>
+                <span class="p-name">{{ p.name }}</span>
+              </div>
+              <span class="p-val" :style="{color: p.color}">{{ p.val }}</span>
+            </div>
+            <div class="p-bar">
+              <div class="p-fill" :style="{width:(p.val/maxPersonVal*100)+'%', background: p.color, opacity: i===0?0.9:0.6}"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="ptitle" style="margin-top:1.2vh;flex-shrink:0">本周每日产量趋势（前三名）</div>
+        <div class="trend-wrap">
+          <div id="trendChart" style="width:100%;height:100%"></div>
+        </div>
+      </div>
+
+      <!-- RIGHT: Equipment + Summary -->
+      <div class="panel panel-flex">
+        <div class="corner tl"></div><div class="corner br"></div>
+        <div class="ptitle">
+          设备运行状态
+          <div class="pbadge">{{ currentTime }} 更新</div>
+        </div>
+
+        <div style="flex:1;overflow-y:auto">
+          <table class="eq-table">
+            <thead>
+              <tr><th>设备</th><th>状态</th><th>利用率</th><th>今日产量</th><th>时长</th></tr>
+            </thead>
+            <tbody>
+              <tr v-for="eq in equipments" :key="eq.name">
+                <td style="color:#00e5ff;font-family:Orbitron,monospace;font-size:1vh">{{ eq.name }}</td>
+                <td>
+                  <span class="stag" :class="eq.stClass">
+                    <span class="sdot" :class="eq.dotClass"></span>{{ eq.statusText }}
+                  </span>
+                </td>
+                <td>
+                  <div class="ubar"><div class="ufill" :style="{width:eq.util+'%',background:eq.utilColor}"></div></div>
+                  <span :style="{fontSize:'0.9vh',color:eq.utilColor}">{{ eq.util }}%</span>
+                </td>
+                <td :style="{color:eq.stClass==='s-err'?'#ff6b6b':'#cce8f4',fontFamily:'Orbitron,monospace',fontSize:'1vh'}">{{ eq.output }}</td>
+                <td style="color:#5a8a9f;font-size:0.9vh">{{ eq.duration }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="eq-summary">
+          <div class="eq-sum-card">
+            <div class="eq-sum-label">运行中</div>
+            <div class="eq-sum-val" style="color:#1de9b6">{{ runCount }}</div>
+          </div>
+          <div class="eq-sum-card">
+            <div class="eq-sum-label">待机</div>
+            <div class="eq-sum-val" style="color:#ffc107">{{ idleCount }}</div>
+          </div>
+          <div class="eq-sum-card">
+            <div class="eq-sum-label">故障</div>
+            <div class="eq-sum-val" style="color:#ff6b6b">{{ errCount }}</div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <!-- ─── BOTTOM 2-COL ─── -->
+    <div class="bottom-grid">
+
+      <!-- Hourly Chart -->
+      <div class="panel panel-flex">
+        <div class="corner tl"></div><div class="corner br"></div>
+        <div class="ptitle">今日每小时产量<div class="pbadge">当前 16 时</div></div>
+        <div class="hourly-wrap">
+          <div id="hourlyChart" style="width:100%;height:100%"></div>
+        </div>
+      </div>
+
+      <!-- Stock List -->
+      <div class="panel">
+        <div class="corner tl"></div><div class="corner br"></div>
+        <div class="ptitle">
+          库存列表
+          <div class="pbadge">实时库存</div>
+        </div>
+        <table class="eq-table">
+          <thead>
+            <tr><th>物料名称</th><th>工段</th><th>库存量</th><th>状态</th></tr>
+          </thead>
+          <tbody>
+            <tr v-for="s in stockList" :key="s.name">
+              <td style="color:#cce8f4">{{ s.name }}</td>
+              <td style="color:#5a8a9f">{{ s.dept }}</td>
+              <td style="font-family:'Orbitron',monospace" :style="{color: s.statusColor}">{{ s.count }}</td>
+              <td>
+                <span class="stag" :class="s.stClass">
+                  <span class="sdot" :class="s.dotClass"></span>{{ s.statusText }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+    </div>
+  </div>
 </template>
 
 <script>
-import * as echarts from "echarts";
-import { runningStateEnum } from "@/utils/enum.js";
-import scScrollTavle from "@/components/scScrollTable.vue";
-import { name } from "babylonjs-gui";
-function deepCopy(obj) {
-	return JSON.parse(JSON.stringify(obj));
-}
-const myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
-export default {
-	components: { scScrollTavle },
-	data() {
-		return {
-      		runningStateEnum,
-			basicOption: {
-				backgroundColor: "",
-				tooltip: {
-					trigger: "axis",
-				},
-				legend: {
-					icon: "stack",
-					right: 0,
-				},
-				grid: {
-					left: "3%",
-					right: "2%",
-					bottom: "3%",
-					containLabel: true,
-				},
-				xAxis: {
-					type: "category",
-					boundaryGap: true,
-					data: [],
-					nameTextStyle: {
-						color: "#ffffff",
-					},
-					axisLabel: {
-						color: "#ffffff",
-					},
-				},
-				yAxis: {
-					name: "",
-					type: "value",
-					nameTextStyle: {
-						color: "#ffffff",
-					},
-					axisLabel: {
-						color: "#ffffff",
-					},
-				},
-				series: [
-					{
-						name: "",
-						type: "bar",
-						barWidth: 30,
-						label: {
-							show: true,
-							position: "top",
-							color: "#fff",
-						},
-						itemStyle: {
-							borderRadius: [5, 5, 0, 0],
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-								{offset: 0,color: "#00aaff"},
-								{offset: 1,color: "#0033ff"},
-							]),
-						},
-						data: [1,2,3,4,5,6,7],
-					},
-				],
-			},
-			chartOption1:{
-				 color: ['#2f89cf'],
-				tooltip: {
-					trigger: 'axis', 
-					axisPointer: { 
-						type: 'shadow'
-					}
-				},
-				grid: {
-					left: "0%",
-					top: "10px",
-					right: "0%", 
-					bottom: "4%", 
-					containLabel: true 
-				},
-				xAxis: {
-						type: 'category',
-						data: [], // 类目数据
-						axisTick: {
-							alignWithLabel: true // 刻度线与标签对齐
-						},
-						axisLabel: {
-							color: "rgb(255,255,255)",
-							fontSize: "8", 
-						},
-						axisLine: {
-							show: false
-						}
-					},
-				yAxis: {
-					type: 'value', 
-					axisLabel: {
-					color: "rgba(255,255,255,.6)",
-					fontSize: "12"
-					},
-				},
-				// 系列配置
-				series: {
-					name: 'Direct',
-					type: 'bar', 
-					barWidth: '15',
-					data: [],
-					itemStyle: {
-						barBorderRadius: 5 
-					}
-				}
-			},
-			chartOption2: {
-				grid: {
-					top: "10%", 
-					left: "10%",
-					bottom: "5%",
-					containLabel: true 
-				},
-				xAxis: {
-					// show: false 
-					splitLine: {
-					    show:false
-					},
-				},
-				// Y 轴配置，包含两个 Y 轴，一个用于显示类目，一个用于显示数值
-				yAxis: [
-				{
-					axisLine: {
-						show: false 
-					},
-					axisTick: {
-						show: false 
-					},
-					axisLabel: {
-						color: "#fff" 
-					},
-					splitLine: {
-					    show:false
-					},
-					type: 'category', 
-					inverse: true, // 反转坐标轴
-					data: [] 
-				},
-				{
-					show: false, 
-					axisLine: {
-						show: false 
-					},
-					axisTick: {
-						show: false 
-					},
-					splitLine: {
-					    show:false
-					},
-					axisLabel: { 
-						textStyle: {
-							fontSize: 12,
-							color: "#fff" 
-						}
-					},
-					inverse: true, // 反转坐标轴
-					data: [], 
-				}
-				],
-				// 一个柱状图，一个边框
-				series: [
-					{
-						name: '柱状图',
-						type: 'bar', 
-						data: [], 
-						yAxisIndex: 0, 
-						barCategoryGap: 50, 
-						barWidth: 10,
-						label: {
-							show: true,
-							position: "right",
-							color: "#fff",
-						},
-						itemStyle: {
-							normal: {
-								barBorderRadius: 5,
-								color: function (params) { 
-									return myColor[params.dataIndex%5];
-								}
-							},
-							label: { 
-								normal: {
-									// show: true, 
-									position: "outside",
-									color: "#fff",
-									// formatter: "{a}"
-								}
-							}
-						},
-					},
-					{
-						name: "框", 
-						type: "bar", 
-						barCategoryGap: 50,
-						barWidth: 12,
-						itemStyle: { 
-							color: "none",
-							shadowColor: '#999', // 阴影颜色
-							shadowBlur: 3, // 阴影模糊
-							shadowOffsetX: 0, // 阴影水平偏移
-							shadowOffsetY: 0, // 阴影垂直偏移 
-							borderColor: "rgba(153,153,153,0.6)", // 边框颜色
-							borderWidth: 0.5, 
-							barBorderRadius: 5,
-							
-						},
-						yAxisIndex: 1, 
-						data: [] 
-					}
-				]
-			},
-			tableHeight: 100,
-			speed: 2000,
-			time: null,
-			deptId: "",
-			dayInterval: null,
-			chartInterval2: null,
-			state_: {
-				10: '完好',
-				20: '限用',
-				30: '在修',
-				40: '禁用',
-			},
-			configData:{
-				header:['物料名称','批次号','数量'],
-				headerBGC:'#0a3f44',
-				headerHeight:40,
-				align:'center',
-				data:[],
-				waitTime:1000,
-			},
-			configData1:{
-				headerBGC:'#0a3f44',
-				header:['产出名称','规格','型号','开始时间','结束时间','完成进度','产量','状态'],
-				headerHeight:40,
-				data:[]
-			},
-			config_left1:{
-				data:[
-					{name:'排一次棒',value:0},
-					{name:'排二次棒',value:0},
-					{name:'切丝',value:0},
-					{name:'排板',value:0},
-				],
-				showValue: true
-			} ,
-			config_left2:{
-				data:[],
-				digitalFlopStyle: {
-					fontSize: 16,
-					fill: '#fff'
-				}
-			},
-			config_middle_top:{
-				rowNum:10,
-				headerBGC: 'rgba(47,102,107,.34)',
-				oddRowBGC: 'rgba(0,0,0,0)',
-				evenRowBGC: 'rgba(0,0,0,0)',
-			    header: ['任务编号', '产出产品', '任务量', '合格数'],
-				data: []
-			},
-			config_middle_bottom:{
-				rowNum:10,
-				headerBGC: 'rgba(0,0,0,0)',
-				oddRowBGC: 'rgba(0,0,0,0)',
-				evenRowBGC: 'rgba(0,0,0,0)',
-				header: ['设备名称','设备位号','设备状态','运行状态','所在工段'],
-				data: []
-			},
-			config_right_top:{
-				rowNum:10,
-				headerBGC: 'rgba(47,102,107,.34)',
-				oddRowBGC: 'rgba(0,0,0,0)',
-				evenRowBGC: 'rgba(0,0,0,0)',
-				header: ['工段','姓名','生产数','合格数','不合格数'],
-				data: []
-			},
-			currentTime: "",
-			currentDay: "",
-			today: "",
-			end_time:'',
-			start_time:'',
-			mgroups:['排一次棒','排二次棒','切丝','排板'],
-		};
-	},
-	mounted() {
-		let that = this;
-		//排棒、切丝、排板 ：排一次棒、排二次棒、切丝、排板
-		this.showTime();
-		this.dayInterval = setInterval(() => {
-			this.showTime();
-		}, 1000);
-		that.mgroupsforEach();
-		that.getMgroups();
-		//每个人日生产量：个人绩效
-		// that.getEveryoneCount(that.deptName1);
-		// that.getEveryoneCount(that.deptName2);
-		// that.getEveryoneCount(that.deptName3);
-		that.materialAll();
-	},
-	methods: {
-		getMondayOfCurrentWeek() {
-			let today = new Date();
-			let days = [];
-			for (let i = 6; i >= 0; i--) {
-				let date = new Date(today);
-				date.setDate(today.getDate() - i);
-				days.push(date.toISOString().split('T')[0]); // 格式化为 YYYY-MM-DD
-			}
-			return days;
-		},
-		//时间
-		showTime() {
-			this.currentTime = this.$TOOL.dateFormat(new Date(), "hh:mm:ss");
-			this.currentDay = this.$TOOL.dateFormat(
-				new Date(),
-				"yyyy年MM月dd日"
-			);
-		},
-		setChart(name, option = null) {
-			var myChart = echarts.getInstanceByDom(document.getElementById(name));
-			if (myChart == undefined) {
-				myChart = echarts.init(document.getElementById(name), "dark", {
-					renderer: "svg",
-				});
-			}
-			if (option == null) {
-				option = Object.assign({}, this.basicOption);
-			}
-			setTimeout(() => {
-				try {
-					myChart.setOption(option);
-				} catch (error) {}
-			}, 500);
-			return myChart;
-		},
-		getMgroups(){
-			let that = this;
-			let params = {page: 0,query:" { id, name }"};
-			that.$API.mtm.mgroup.list.req(params).then((res) => {
-				res.forEach((item)=>{
-					let index = that.mgroups.indexOf(item.name);
-				    if(index>-1){
-						that.getmgroupMaterial(item.id,item.name,index);
-					}
-				})
-			})
-		},
-		mgroupsforEach(){
-			let that = this;
-			that.mgroups.forEach((item)=>{
-				 that.getEquipment(item);
-				 that.getMtask1(item);
-			})
-		},
-		//任务进度
-		getMtask1(name) {
-			let that = this;
-			let params = {
-				state: 20,mgroup__name: name,page:0,
-				query: " { id, material_out_name, number, count, count_ok }"
-			};
-			that.config_middle_top.data = [];
-			that.$API.pm.mtask.list.req(params).then((res) => {
-				if(res.length>0){
-					res.forEach((item) => {
-						let arr = [];
-						arr[0] = item.number;
-						arr[1] = item.material_out_name;
-						arr[2] = item.count;
-						arr[3] = item.count_ok;
-						// arr[4] = item.count_ok/item.count*100+'%';
-						that.config_middle_top.data.push(arr);
-					})
-				}
-			});
-		},
-		//库存统计列表
-		getmgroupMaterial(id,name,index) {
-			let that = this;
-			let params = { tag: 'done',page:0,mgroup: id };
-			that.$API.wpm.wmaterial.list.req(params).then((res) => {
-				let count = 0;
-				res.forEach((item) => {
-				    count += Number(item.count);
-				})
-				that.config_left1.data[index].value = count;
-			})
-		},
-		//车间设备列表
-		getEquipment(name) {
-			let that = this;
-			let params = {page: 0, mgroup__name:name,
-				// query: " { id, name, number, model, state ,mgroup_name }"
-			};
-			that.config_middle_bottom.data = [];
-			that.$API.em.equipment.list.req(params).then((res) => {
-			    if(res.length>0){
-					res.forEach((item) => {
-						let arr = [];
-					    let state_ = that.state_[item.state];
-						let running_state_ = runningStateEnum[item.running_state]?.text;
-						arr[0] = item.name;
-						arr[1] = item.number;
-						arr[2] = state_;
-						arr[3] = running_state_;
-						arr[4] = item.mgroup_name;
-						that.config_middle_bottom.data.push(arr);
-					})
-				}
-			})
-		},
-		//每个人日产量
-		getEveryoneCount(deptName){
-			let that = this;
-			that.config_right_top.data = [];
-			let date = that.$TOOL.dateFormat(new Date(), "yyyy-MM-dd");
-			let params = {
-				// query: {start_date:date,end_date:date,dept_name:that.deptName},
-				query: {start_date:'2025-05-04',end_date:'2025-05-04',dept_name:deptName},
-			};
-			this.$API.bi.dataset.exec.req("performance", params).then((res) => {
-				if(res.data2.ds0.length>0){
-					res.data2.ds0.forEach((item)=>{
-						let arr = [];
-						arr[0] = item.工段;
-						arr[1] = item.操作人;
-						arr[2] = item.生产数;
-						arr[3] = item.合格数;
-						arr[4] = item.不合格数;
-						that.config_right_top.data.push(arr);
-					})
-				}
-			});
-		},
-		//车间整体产品统计
-		materialAll(){
-			let that = this;
-			let obj = {};
-			that.$API.bi.dataset.exec.req("materialCount", obj).then((res) => {
-				if (res.data2.ds0&&res.data2.ds0.length>0) {
-					let arrs = res.data2.ds0;
-					let list = arrs.filter((item) => {
-						return item.dept_name == that.deptName1||item.dept_name == that.deptName2||item.dept_name == that.deptName3;
-					});
-					let namelist = [],valuelist = [],values=[];
-					if(list.length>0){
-						list.forEach((item) => {
-							let index = namelist.indexOf(item.material_name);
-							if(index==-1){
-								namelist.push(item.material_name);
-								valuelist.push(item.count);
-								values.push(item.count);
-							}
-						})
-					}
-					let maxNum = valuelist.sort((a, b) => b - a)[0]+2;
-					let arr = [];
-					valuelist.forEach((item)=>{
-					    arr.push(maxNum)
-					})
-					that.chartOption2.yAxis[0].data = namelist;
-					that.chartOption2.yAxis[1].data = valuelist;
-					that.chartOption2.series[0].data = valuelist;
-					that.chartOption2.series[1].data = arr;
+import * as echarts from 'echarts';
 
-					namelist.forEach((item,index)=>{
-						let obj = {};
-						obj.name = item;
-						obj.value = valuelist[index];
-						that.config_left2.data.push(obj);
-					})
-				}
-			});
-		},
-	},
+export default {
+  name: 'JiejingDept2',
+  data() {
+    return {
+      currentTime: '',
+      currentDay: '',
+      dayInterval: null,
+      charts: [],
+
+      rankColors: ['#ffd700', '#c0c0c0', '#cd7f32'],
+
+      donutLegend: [
+        { name: '倒像器', color: '#4fc3f7', pct: '38.5%', val: 1093 },
+        { name: '直板',   color: '#69f0ae', pct: '29.2%', val: 829  },
+        { name: '光锥',   color: '#ffc107', pct: '19.8%', val: 562  },
+        { name: '其他',   color: '#ff6b6b', pct: '10.6%', val: 301  },
+        { name: '光棒',   color: '#bb86fc', pct:  '1.9%', val:  55  },
+      ],
+
+      persons: [
+        { name: '张三', val: 860, color: '#4fc3f7', av: '张' },
+        { name: '李四', val: 742, color: '#ff6b6b', av: '李' },
+        { name: '王五', val: 698, color: '#00e5ff', av: '王' },
+        { name: '赵六', val: 631, color: '#ffc107', av: '赵' },
+        { name: '钱七', val: 570, color: '#bb86fc', av: '钱' },
+        { name: '孙八', val: 488, color: '#4fc3f7', av: '孙' },
+        { name: '周九', val: 412, color: '#ff6b6b', av: '周' },
+        { name: '吴十', val: 344, color: '#69f0ae', av: '吴' },
+        { name: '郑十一', val: 295, color: '#ffc107', av: '郑' },
+        { name: '冯十二', val: 260, color: '#bb86fc', av: '冯' },
+      ],
+
+      equipments: [
+        { name: '排板-01', stClass: 's-run',  statusText: '运行中', dotClass: 'rdot', util: 92, utilColor: '#1de9b6', output: 768, duration: '7h20m' },
+        { name: '排板-02', stClass: 's-run',  statusText: '运行中', dotClass: 'rdot', util: 85, utilColor: '#1de9b6', output: 694, duration: '7h05m' },
+        { name: '排板-03', stClass: 's-idle', statusText: '待机',   dotClass: 'idot', util: 68, utilColor: '#ffc107', output: 543, duration: '5h30m' },
+        { name: '切丝-01', stClass: 's-run',  statusText: '运行中', dotClass: 'rdot', util: 94, utilColor: '#1de9b6', output: 510, duration: '7h18m' },
+        { name: '切丝-02', stClass: 's-err',  statusText: '故障',   dotClass: 'edot', util: 28, utilColor: '#ff6b6b', output: 215, duration: '2h10m' },
+        { name: '排二-01', stClass: 's-run',  statusText: '运行中', dotClass: 'rdot', util: 80, utilColor: '#1de9b6', output: 630, duration: '6h50m' },
+      ],
+
+      stockList: [
+        { name: '排板毛坯',     dept: '排一次棒', count: 1093, stClass: 's-run',  statusText: '充足', dotClass: 'rdot', statusColor: '#1de9b6' },
+        { name: '直板半成品',   dept: '排二次棒', count: 829,  stClass: 's-run',  statusText: '充足', dotClass: 'rdot', statusColor: '#1de9b6' },
+        { name: '光锥坯料',     dept: '切丝',     count: 562,  stClass: 's-run',  statusText: '正常', dotClass: 'rdot', statusColor: '#4fc3f7' },
+        { name: '倒像器成品',   dept: '排板',     count: 143,  stClass: 's-idle', statusText: '偏低', dotClass: 'idot', statusColor: '#ffc107' },
+        { name: '直板成品',     dept: '排一次棒', count: 748,  stClass: 's-run',  statusText: '充足', dotClass: 'rdot', statusColor: '#1de9b6' },
+        { name: '光棒原材料',   dept: '排板',     count: 47,   stClass: 's-err',  statusText: '告急', dotClass: 'edot', statusColor: '#ff6b6b' },
+        { name: '光锥成品',     dept: '切丝',     count: 388,  stClass: 's-run',  statusText: '正常', dotClass: 'rdot', statusColor: '#4fc3f7' },
+      ],
+    };
+  },
+  computed: {
+    maxPersonVal() {
+      return Math.max(...this.persons.map(p => p.val));
+    },
+    runCount()  { return this.equipments.filter(e => e.stClass === 's-run').length; },
+    idleCount() { return this.equipments.filter(e => e.stClass === 's-idle').length; },
+    errCount()  { return this.equipments.filter(e => e.stClass === 's-err').length; },
+  },
+  mounted() {
+    this.showTime();
+    this.dayInterval = setInterval(this.showTime, 1000);
+    this.$nextTick(() => {
+      this.initDonut();
+      this.initTrend();
+      this.initHourly();
+    });
+    window.addEventListener('resize', this.resizeCharts);
+  },
+  beforeDestroy() {
+    clearInterval(this.dayInterval);
+    window.removeEventListener('resize', this.resizeCharts);
+    this.charts.forEach(c => c && c.dispose());
+  },
+  methods: {
+    showTime() {
+      const now = new Date();
+      const pad = n => String(n).padStart(2, '0');
+      this.currentTime = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
+      this.currentDay = `${now.getFullYear()}年${pad(now.getMonth() + 1)}月${pad(now.getDate())}日`;
+    },
+
+    resizeCharts() {
+      this.charts.forEach(c => c && c.resize());
+    },
+
+    initDonut() {
+      const el = document.getElementById('donutChart');
+      if (!el) return;
+      const chart = echarts.init(el);
+      this.charts.push(chart);
+      chart.setOption({
+        backgroundColor: 'transparent',
+        tooltip: {
+          backgroundColor: '#071e32', borderColor: '#00e5ff', borderWidth: 1,
+          textStyle: { color: '#cce8f4' },
+          formatter: p => `${p.name}: ${p.value}件 (${p.percent.toFixed(1)}%)`,
+        },
+        series: [{
+          type: 'pie',
+          radius: ['70%', '86%'],
+          data: this.donutLegend.map(d => ({ name: d.name, value: d.val, itemStyle: { color: d.color } })),
+          label: { show: false },
+          itemStyle: { borderWidth: 2, borderColor: '#071e32' },
+        }],
+      });
+    },
+
+    initTrend() {
+      const el = document.getElementById('trendChart');
+      if (!el) return;
+      const chart = echarts.init(el);
+      this.charts.push(chart);
+      const days = ['周一', '周二', '周三', '周四', '周五', '周六', '今日'];
+      chart.setOption({
+        backgroundColor: 'transparent',
+        animation: false,
+        grid: { left: '3%', right: '4%', top: '18%', bottom: '12%', containLabel: true },
+        legend: {
+          top: 4, textStyle: { color: '#5a8a9f', fontSize: 10 },
+          itemWidth: 10, itemHeight: 4, padding: [0, 0, 0, 0],
+        },
+        tooltip: {
+          trigger: 'axis', backgroundColor: '#071e32', borderColor: '#00e5ff', borderWidth: 1,
+          textStyle: { color: '#cce8f4' },
+          axisPointer: { lineStyle: { color: 'rgba(0,229,255,0.3)' } },
+        },
+        xAxis: {
+          type: 'category', data: days, boundaryGap: false,
+          axisLabel: { color: '#3a6070', fontSize: 9 },
+          axisLine: { lineStyle: { color: 'rgba(0,229,255,0.1)' } },
+          splitLine: { lineStyle: { color: 'rgba(0,229,255,0.05)' } },
+        },
+        yAxis: {
+          type: 'value', min: 500, max: 1000,
+          axisLabel: { color: '#3a6070', fontSize: 9 },
+          axisLine: { lineStyle: { color: 'rgba(0,229,255,0.1)' } },
+          splitLine: { lineStyle: { color: 'rgba(0,229,255,0.05)' } },
+        },
+        series: [
+          { name: '张三', type: 'line', data: [760, 820, 700, 860, 790, 840, 860], borderColor: '#4fc3f7', lineStyle: { color: '#4fc3f7', width: 1.5 }, itemStyle: { color: '#4fc3f7' }, symbolSize: 4, smooth: 0.4 },
+          { name: '李四', type: 'line', data: [680, 710, 740, 720, 760, 742, 742], borderColor: '#ff6b6b', lineStyle: { color: '#ff6b6b', width: 1.5 }, itemStyle: { color: '#ff6b6b' }, symbolSize: 4, smooth: 0.4 },
+          { name: '王五', type: 'line', data: [640, 660, 680, 670, 698, 690, 698], borderColor: '#00e5ff', lineStyle: { color: '#00e5ff', width: 1.5 }, itemStyle: { color: '#00e5ff' }, symbolSize: 4, smooth: 0.4 },
+        ],
+      });
+    },
+
+    initHourly() {
+      const el = document.getElementById('hourlyChart');
+      if (!el) return;
+      const chart = echarts.init(el);
+      this.charts.push(chart);
+      const hours = ['8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时'];
+      const vals  = [268, 382, 410, 375, 160, 395, 418, 402, 330];
+      chart.setOption({
+        backgroundColor: 'transparent',
+        animation: false,
+        grid: { left: '3%', right: '3%', top: '8%', bottom: '10%', containLabel: true },
+        tooltip: {
+          trigger: 'axis', backgroundColor: '#071e32', borderColor: '#00e5ff', borderWidth: 1,
+          textStyle: { color: '#cce8f4' }, displayColors: false,
+          formatter: p => `${p[0].axisValue}：${p[0].value} 件`,
+        },
+        xAxis: {
+          type: 'category', data: hours,
+          axisLabel: { color: '#3a6070', fontSize: 10 },
+          axisLine: { lineStyle: { color: 'rgba(0,229,255,0.1)' } },
+          splitLine: { show: false },
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: { color: '#3a6070', fontSize: 9 },
+          axisLine: { lineStyle: { color: 'rgba(0,229,255,0.1)' } },
+          splitLine: { lineStyle: { color: 'rgba(0,229,255,0.06)' } },
+        },
+        series: [{
+          type: 'bar',
+          data: vals.map((v, i) => ({
+            value: v,
+            itemStyle: {
+              color: i === vals.length - 1 ? 'rgba(0,229,255,0.75)' : 'rgba(0,229,255,0.2)',
+              borderColor: i === vals.length - 1 ? '#00e5ff' : 'rgba(0,229,255,0.4)',
+              borderWidth: 1, borderRadius: [4, 4, 0, 0],
+            },
+          })),
+        }],
+      });
+    },
+  },
 };
 </script>
+
 <style scoped>
-@font-face {
-	font-family: "myfont";
-	/* 字体名称 */
-	src: url("../../../utils/youShe.ttf");
-	/* 字体文件相对路径 */
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
+
+/* ─── PAGE ROOT ─── */
+.page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 0 1vw 0.5vh;
+  font-family: 'Noto Sans SC', 'Microsoft Yahei', sans-serif;
+  background: #020d1a;
+  color: #cce8f4;
+  background-image:
+    radial-gradient(ellipse 80% 35% at 50% 0%, rgba(0,80,120,0.28) 0%, transparent 65%),
+    linear-gradient(180deg, #020d1a 0%, #031422 100%);
+}
+.grid-bg {
+  position: fixed; inset: 0; pointer-events: none; z-index: 0;
+  background-image:
+    linear-gradient(rgba(0,229,255,0.025) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0,229,255,0.025) 1px, transparent 1px);
+  background-size: 44px 44px;
 }
 
-.dashboard {
-	background-image: url("/public/img/photon_bg.png");
-	color: #fff;
-	font-family: "Microsoft Yahei" !important;
-	background-size: cover;
+/* ─── HEADER ─── */
+header {
+  flex-shrink: 0;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  padding: 0.8vh 0.5vw 0.6vh;
+  border-bottom: 1px solid rgba(0,229,255,0.07);
+  margin-bottom: 0.8vh;
+}
+.hdr-left { display: flex; flex-direction: column; gap: 0.3vh; }
+.datetime { font-family: 'Orbitron', monospace; font-size: 1.1vh; color: #5a8a9f; letter-spacing: 1px; }
+.sys-status { display: flex; align-items: center; gap: 6px; }
+.pulse-dot { width: 0.7vh; height: 0.7vh; border-radius: 50%; background: #1de9b6; box-shadow: 0 0 7px #1de9b6; animation: pulse 2s infinite; }
+.sys-label { font-size: 1vh; color: #1de9b6; letter-spacing: 1px; }
+
+.hdr-title {
+  text-align: center;
+  font-family: 'Orbitron', monospace;
+  font-size: 2.2vw; font-weight: 900; letter-spacing: 0.5vw;
+  color: #00e5ff;
+  text-shadow: 0 0 28px rgba(0,229,255,0.45), 0 0 55px rgba(0,229,255,0.18);
+  position: relative;
+}
+.hdr-title::before, .hdr-title::after {
+  content: ''; position: absolute; top: 50%;
+  width: 2vw; height: 1px;
+  background: linear-gradient(90deg, transparent, #00e5ff);
+}
+.hdr-title::before { right: calc(100% + 0.8vw); }
+.hdr-title::after  { left:  calc(100% + 0.8vw); background: linear-gradient(90deg, #00e5ff, transparent); }
+
+.hdr-right { display: flex; align-items: center; justify-content: flex-end; gap: 1vw; }
+.shift-badge { font-size: 1vh; color: #ffc107; border: 1px solid rgba(255,193,7,0.3); border-radius: 4px; padding: 0.2vh 0.6vw; letter-spacing: 1px; }
+.user-badge { display: flex; align-items: center; gap: 0.5vw; background: #071e32; border: 1px solid rgba(0,229,255,0.17); border-radius: 2vh; padding: 0.3vh 1vw 0.3vh 0.5vw; font-size: 1.2vh; }
+.user-av { width: 2.4vh; height: 2.4vh; border-radius: 50%; background: linear-gradient(135deg, #00e5ff, #1de9b6); display: flex; align-items: center; justify-content: center; font-size: 1vh; font-weight: 700; color: #020d1a; }
+
+/* ─── KPI ROW ─── */
+.kpi-row {
+  flex-shrink: 0;
+  display: grid; grid-template-columns: repeat(5, 1fr);
+  gap: 0.7vw; margin-bottom: 0.8vh;
+}
+.kpi {
+  background: #071e32; border: 1px solid rgba(0,229,255,0.17); border-radius: 8px;
+  padding: 1.1vh 1.2vw; position: relative; overflow: hidden;
+  transition: border-color .25s, transform .2s;
+}
+.kpi:hover { border-color: rgba(0,229,255,0.38); transform: translateY(-1px); }
+.kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
+.cc::before { background: linear-gradient(90deg, transparent, #00e5ff, transparent); }
+.ct::before { background: linear-gradient(90deg, transparent, #1de9b6, transparent); }
+.ca::before { background: linear-gradient(90deg, transparent, #ffc107, transparent); }
+.cb::before { background: linear-gradient(90deg, transparent, #4fc3f7, transparent); }
+.cr::before { background: linear-gradient(90deg, transparent, #ff6b6b, transparent); }
+
+.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6vh; }
+.kpi-icon { width: 2.8vh; height: 2.8vh; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.4vh; }
+.cc .kpi-icon { background: rgba(0,229,255,0.1); }   .ct .kpi-icon { background: rgba(29,233,182,0.1); }
+.ca .kpi-icon { background: rgba(255,193,7,0.1); }   .cb .kpi-icon { background: rgba(79,195,247,0.1); }
+.cr .kpi-icon { background: rgba(255,107,107,0.1); }
+.kpi-unit { font-size: 0.9vh; color: #3a6070; }
+
+.kpi-label { font-size: 0.9vh; color: #5a8a9f; letter-spacing: .8px; margin-bottom: 0.3vh; }
+.kpi-val { font-family: 'Orbitron', monospace; font-size: 2.5vh; font-weight: 700; line-height: 1; margin-bottom: 0.5vh; }
+.cc .kpi-val { color: #00e5ff; } .ct .kpi-val { color: #1de9b6; } .ca .kpi-val { color: #ffc107; }
+.cb .kpi-val { color: #4fc3f7; } .cr .kpi-val { color: #ff6b6b; }
+.kpi-sub { font-size: 0.9vh; display: flex; align-items: center; gap: 3px; }
+.up { color: #1de9b6; } .down { color: #ff6b6b; } .neutral { color: #5a8a9f; }
+.kpi-prog { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.04); border-radius: 0 0 8px 8px; }
+.kpi-prog-fill { height: 100%; border-radius: 0 0 8px 8px; }
+.cc .kpi-prog-fill { background: #00e5ff; } .ct .kpi-prog-fill { background: #1de9b6; }
+.ca .kpi-prog-fill { background: #ffc107; } .cb .kpi-prog-fill { background: #4fc3f7; }
+.cr .kpi-prog-fill { background: #ff6b6b; }
+
+/* ─── MAIN GRID ─── */
+.main-grid {
+  flex: 1; min-height: 0;
+  display: grid; grid-template-columns: 22vw 1fr 25vw;
+  gap: 0.7vw; margin-bottom: 0.8vh;
 }
 
-.header {
-	/* background: url("/public/img/head_bg.png"); */
-	background: url("/public/img/header_bgv.png");
-	border-bottom: none;
-	background-size: 100% 100%;
-	display: block;
-	height: 8vh;
-	color: rgb(149, 255, 255);
-	font-family: "Microsoft Yahei";
-	text-align: center;
-	padding: 12px 0px;
+/* ─── PANELS ─── */
+.panel {
+  background: #071e32; border: 1px solid rgba(0,229,255,0.17);
+  border-radius: 8px; padding: 1.2vh 1.2vw;
+  position: relative; overflow: hidden;
+  box-sizing: border-box; height: 100%;
 }
-.header > .title {
-	font-weight: bold;
-	font-family: "myfont";
-	font-size: 32px;
-	font-size:4vh;
-	letter-spacing: 10px;
+.panel-flex { display: flex; flex-direction: column; }
+
+.ptitle {
+  flex-shrink: 0;
+  font-size: 1.05vh; color: #00e5ff; letter-spacing: 2px;
+  margin-bottom: 0.9vh; display: flex; align-items: center; gap: 0.5vw;
 }
-.header > .timer {
-	font-size: 14px;
-	margin-top: 18px;
-	position: absolute;
-	top: 5px;
-	left: 20px;
+.ptitle::before { content: ''; width: 3px; height: 1.3vh; background: #00e5ff; border-radius: 2px; box-shadow: 0 0 7px #00e5ff; flex-shrink: 0; }
+.pbadge { margin-left: auto; font-size: 0.9vh; color: #5a8a9f; background: #0a2540; border: 1px solid rgba(0,229,255,0.07); border-radius: 4px; padding: 0.2vh 0.5vw; white-space: nowrap; }
+
+/* corner & scan */
+.corner { position: absolute; width: 11px; height: 11px; border-color: #00e5ff; opacity: .45; }
+.tl { top:0; left:0; border-top:1px solid; border-left:1px solid; }
+.tr { top:0; right:0; border-top:1px solid; border-right:1px solid; }
+.bl { bottom:0; left:0; border-bottom:1px solid; border-left:1px solid; }
+.br { bottom:0; right:0; border-bottom:1px solid; border-right:1px solid; }
+.scan { position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(0,229,255,0.15),transparent); animation:scan 5s linear infinite; pointer-events:none; }
+
+/* ─── DONUT ─── */
+.donut-wrap { position: relative; width: 15vh; height: 15vh; margin: 0 auto 0.8vh; flex-shrink: 0; }
+.donut-ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
+.donut-num { font-family: 'Orbitron', monospace; font-size: 1.7vh; color: #00e5ff; }
+.donut-lbl { font-size: 0.9vh; color: #5a8a9f; margin-top: 2px; }
+
+.leg-row { display: flex; align-items: center; gap: 0.4vw; padding: 0.4vh 0; border-bottom: 1px solid rgba(0,229,255,0.07); font-size: 1.05vh; }
+.leg-row:last-child { border-bottom: none; }
+.leg-dot { width: 0.7vh; height: 0.7vh; border-radius: 2px; flex-shrink: 0; }
+.leg-name { flex: 1; color: #5a8a9f; }
+.leg-pct { color: #cce8f4; font-weight: 500; min-width: 3.5vw; text-align: right; }
+.leg-val { color: #3a6070; font-size: 0.95vh; min-width: 2.5vw; text-align: right; }
+
+/* ─── PROGRESS ─── */
+.prog-section { margin-top: 0.5vh; }
+.prog-hdr { display: flex; justify-content: space-between; margin-bottom: 0.4vh; font-size: 0.95vh; color: #5a8a9f; }
+.prog-bar { height: 0.6vh; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; margin-bottom: 0.8vh; }
+.prog-fill { height: 100%; border-radius: 3px; position: relative; overflow: hidden; }
+.prog-fill::after { content: ''; position: absolute; top: 0; left: -100%; width: 55%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); animation: shimmer 2.5s infinite; }
+
+/* ─── PERSONNEL ─── */
+.person-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5vh 1.5vw; flex-shrink: 0; }
+.p-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35vh; }
+.p-left { display: flex; align-items: center; gap: 0.4vw; }
+.p-rank { font-family: 'Orbitron', monospace; font-size: 0.85vh; width: 1.6vh; text-align: center; flex-shrink: 0; }
+.p-av { width: 2vh; height: 2vh; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9vh; font-weight: 700; flex-shrink: 0; }
+.p-name { font-size: 1.1vh; color: #cce8f4; }
+.p-val { font-family: 'Orbitron', monospace; font-size: 1.1vh; }
+.p-bar { height: 0.55vh; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
+.p-fill { height: 100%; border-radius: 3px; }
+
+/* trend wrap grows */
+.trend-wrap { flex: 1; min-height: 0; position: relative; }
+
+/* ─── EQUIPMENT TABLE ─── */
+.eq-table { width: 100%; border-collapse: collapse; font-size: 1.05vh; }
+.eq-table th { color: #3a6070; font-weight: 400; letter-spacing: .8px; padding: 0.5vh 0.4vw; border-bottom: 1px solid rgba(0,229,255,0.07); text-align: left; font-size: 0.85vh; }
+.eq-table td { padding: 0.6vh 0.4vw; border-bottom: 1px solid rgba(0,229,255,0.07); vertical-align: middle; }
+.eq-table tr:last-child td { border-bottom: none; }
+.eq-table tr:hover td { background: rgba(0,229,255,0.06); }
+
+.stag { display: inline-flex; align-items: center; gap: 3px; padding: 0.2vh 0.4vw; border-radius: 4px; font-size: 0.85vh; white-space: nowrap; }
+.s-run  { background: rgba(29,233,182,0.1);  color: #1de9b6; border: 1px solid rgba(29,233,182,0.28); }
+.s-idle { background: rgba(255,193,7,0.1);   color: #ffc107; border: 1px solid rgba(255,193,7,0.28); }
+.s-err  { background: rgba(255,107,107,0.1); color: #ff6b6b; border: 1px solid rgba(255,107,107,0.28); }
+.sdot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
+.rdot { background: #1de9b6; box-shadow: 0 0 4px #1de9b6; animation: pulse 2s infinite; }
+.idot { background: #ffc107; }
+.edot { background: #ff6b6b; box-shadow: 0 0 4px #ff6b6b; animation: pulse 1s infinite; }
+.ubar { height: 0.4vh; background: rgba(255,255,255,0.05); border-radius: 2px; width: 4vw; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 0.3vw; }
+.ufill { height: 100%; border-radius: 2px; }
+
+/* equipment summary cards */
+.eq-summary {
+  flex-shrink: 0;
+  display: grid; grid-template-columns: repeat(3, 1fr);
+  gap: 0.5vw; margin-top: 0.8vh;
 }
-.numBlock{
-	height: 10vh;
-}
-.numBlock_title{
-	height: 4vh;
-	width: 100%;
-	font-size: 1.5vh;
-	line-height: 4vh;
-	text-align: center;
-}
-.numBlock_value{
-	height:6vh;
-	width: 100%;
-	line-height: 5vh;
-	text-align: center;
-	font-size: 3vh;
-	font-family: "myfont";
-}
-.leftChartBlock1{
-	width: 90%;
-	height: 28vh;
-	z-index: 999;
-	left: 5%;
-	border-radius: 3vh;
-}
-.leftChartBlock2{
-	width:100%;
-	height: 28vh;
-}
-.middleTableBlock1{
-	width:94%;
-	height:31vh;
-	position: absolute;
-	left: 4%
-}
-.middleTableBlock2{
-	width:94%;
-	height:34vh;
-	position: absolute;
-	left: 4%
-}
-.chartBlockTitle{
-	width: 90%;
-	height: 5vh;
-	margin: auto;
-	line-height: 6vh;
-	border-radius: 10px;
-	text-align: left;
-	padding-left: 10px;
-	font-size: 1.6vh;
-    font-weight: 600;
-	border-bottom: 1px solid rgb(83 198 243);
+.eq-sum-card { background: #0a2540; border-radius: 6px; padding: 0.7vh 0.5vw; text-align: center; }
+.eq-sum-label { font-size: 0.85vh; color: #5a8a9f; margin-bottom: 0.3vh; }
+.eq-sum-val { font-family: 'Orbitron', monospace; font-size: 1.8vh; }
+
+/* ─── BOTTOM GRID ─── */
+.bottom-grid {
+  flex-shrink: 0; height: 26vh;
+  display: grid; grid-template-columns: 1fr 30vw;
+  gap: 0.7vw;
 }
+
+/* hourly chart grows in panel-flex */
+.hourly-wrap { flex: 1; min-height: 0; position: relative; }
+
+
+@keyframes scan    { from { top: 0; } to { top: 100%; } }
+@keyframes pulse   { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
+@keyframes shimmer { to { left: 200%; } }
 </style>
diff --git a/src/views/bigScreen/bxerp/xibodept.vue b/src/views/bigScreen/bxerp/xibodept.vue
index a7f4a153..16f6dd23 100644
--- a/src/views/bigScreen/bxerp/xibodept.vue
+++ b/src/views/bigScreen/bxerp/xibodept.vue
@@ -1,402 +1,1950 @@
 <template>
-  <el-container class="dashboard">
-    <el-header class="header">
-      <div class="title">洗棒大屏</div>
-      <div class="timer">{{ currentDay }} {{ currentTime }}</div>
-    </el-header>
-    <el-main style="padding:6px;overflow:hidden">
-      <el-row style="height:92vh">
-        <!-- 左栏：产品已完成数 + 产品种类占比 -->
-        <el-col :span="6" style="height:100%;display:flex;flex-direction:column;gap:6px;padding-right:3px">
-          <div style="height:12vh">
-            <dv-border-box-12 style="height:100%">
-              <div class="numBlock_title">产品已完成数</div>
-              <div class="numBlock_value">{{ finishedCount }}</div>
-            </dv-border-box-12>
-          </div>
-          <div style="flex:1;position:relative">
-            <dv-border-box-1 style="height:100%">
-              <div class="chartBlockTitle">产品种类占比</div>
-              <dv-active-ring-chart :config="config_ring" style="height:calc(100% - 5vh);width:100%"/>
-            </dv-border-box-1>
-          </div>
-        </el-col>
-
-        <!-- 中栏：设备实时曲线轮播 -->
-        <el-col :span="12" style="height:100%;padding:0 3px">
-          <dv-border-box-1 style="height:100%;display:flex;flex-direction:column">
-            <div class="chartBlockTitle">
-              设备实时曲线
-              <span class="eq-name-badge">{{ currentEqName }}</span>
-              <span class="interval-tip">每5s采集 · 每20s切换</span>
-            </div>
-            <div class="eq-dots">
-              <span
-                v-for="(eq, i) in equipmentList"
-                :key="eq.id"
-                class="eq-dot"
-                :class="{ active: i === currentEqIndex }"
-              ></span>
-            </div>
-            <scEcharts :option="chartOption_curve" style="flex:1;width:96%;margin:0 2%"/>
-            <div class="curve-stats">
-              <span>当前值：<em class="val-cur">{{ curStat.cur }}</em></span>
-              <span>最大值：<em class="val-max">{{ curStat.max }}</em></span>
-              <span>最小值：<em class="val-min">{{ curStat.min }}</em></span>
-              <span>采集点：<em class="val-cur">{{ curStat.count }}</em></span>
-            </div>
-          </dv-border-box-1>
-        </el-col>
-
-        <!-- 右栏：人员周产量 -->
-        <el-col :span="6" style="height:100%;padding-left:3px">
-          <dv-border-box-1 style="height:100%;display:flex;flex-direction:column">
-            <div class="chartBlockTitle">人员周产量</div>
-            <scEcharts :option="chartOption_right" style="flex:1;width:96%;margin:0 2%"/>
-          </dv-border-box-1>
-        </el-col>
-      </el-row>
-    </el-main>
-  </el-container>
+	<el-container class="dashboard">
+		<el-header class="header">
+			<div class="title">洁净车间看板</div>
+			<div class="timer">{{ currentDay }} {{ currentTime }}</div>
+		</el-header>
+		<el-main>
+			<el-row>
+				<el-col :span="6">
+					<div class="leftBlock">
+						<div style="height: 50vh;position: relative;">
+							<dv-border-box-1>
+								<div class="chartBlockTitle">车间各工段生产产品数</div>
+								<div id="chartLeft1" style="width:90%;height:40vh;margin:0 auto;"></div>
+							</dv-border-box-1>
+						</div>
+						<div style="height: 40vh;" class="mat-panel-wrap">
+							<dv-border-box-1>
+								<div class="mat-inner">
+									<div class="mat-header">
+										<div class="mat-title">
+											<span class="mat-title-bar"></span>
+											<span class="mat-title-icon">📦</span>
+											产品统计
+										</div>
+									</div>
+									<div class="mat-body">
+										<div v-for="group in materialsList" :key="group.type" class="mat-group">
+											<div class="mat-group-label" :style="{ borderLeftColor: group.color }">
+												<span>{{ group.type }}</span>
+											</div>
+											<div class="mat-row" v-for="item in group.list" :key="item">
+												<span class="mat-name">{{ item }}</span>
+											</div>
+										</div>
+									</div>
+								</div>
+							</dv-border-box-1>
+						</div>
+					</div>
+				</el-col>
+				<el-col :span="12">
+					<el-row>
+						<el-col :span="6" class="numBlock">
+							<dv-border-box-12>
+								<div class="numBlock_title">今日工序报工量</div>
+								<div class="numBlock_value">245</div>
+							</dv-border-box-12>
+						</el-col>
+						<el-col :span="6" class="numBlock">
+							<dv-border-box-12>
+								<div class="numBlock_title">在产产品数</div>
+								<div class="numBlock_value">2</div>
+							</dv-border-box-12>
+						</el-col>
+						<el-col :span="6" class="numBlock">
+							<dv-border-box-12>
+								<div class="numBlock_title">本月完工工单</div>
+								<div class="numBlock_value">20</div>
+							</dv-border-box-12>
+						</el-col>
+						<el-col :span="6" class="numBlock">
+							<dv-border-box-12>
+								<div class="numBlock_title">本月计划产量</div>
+								<div class="numBlock_value">2465</div>
+							</dv-border-box-12>
+						</el-col>
+					</el-row>
+					<div class="middleBlock">
+						<div style="height: 38vh;">
+							<dv-border-box-1>
+								<div class="chartBlockTitle">车间工段任务展示</div>
+								<dv-scroll-board :config="config_middle_top" class="middleTableBlock1"/>
+							</dv-border-box-1>
+						</div>
+						<div style="height: 41vh;" class="eq-panel">
+							<dv-border-box-1>
+								<div class="eq-inner">
+									<div class="eq-header">
+										<div class="eq-title">
+											<span class="eq-title-bar"></span>
+											<span class="eq-title-icon">⚡</span>
+											拉丝设备集群 · 实时状态
+										</div>
+										<div class="eq-online-badge">在线 {{ onlineCount }}/{{ equipmentList.length }}</div>
+									</div>
+									<div class="eq-grid" ref="eqGrid">
+										<div
+											v-for="(item, idx) in scrollItems"
+											:key="idx"
+											class="eq-card"
+											:class="item.isRunning ? 'eq-card--run' : 'eq-card--stop'"
+										>
+											<div class="eq-card-name">{{ item.name }}</div>
+											<div class="eq-card-center">
+												<span class="eq-dot" :class="item.isRunning ? 'eq-dot--green' : 'eq-dot--red'"></span>
+												<span class="eq-card-state" :class="item.isRunning ? 'state-run' : 'state-stop'">
+													{{ item.running_state_text }}
+												</span>
+											</div>
+											<div class="eq-card-sub">{{ item.isRunning ? item.number : '待机中' }}</div>
+										</div>
+									</div>
+									<div class="eq-footer">
+										<span class="eq-foot-item">
+											<span class="eq-dot eq-dot--green eq-dot--sm"></span>运行中 · {{ onlineCount }}台
+										</span>
+										<span class="eq-foot-item">
+											<span class="eq-dot eq-dot--red eq-dot--sm"></span>停机/维护 · {{ equipmentList.length - onlineCount }}台
+										</span>
+										<span class="eq-foot-update">⏱ last update: {{ lastUpdateText }}</span>
+									</div>
+								</div>
+							</dv-border-box-1>
+						</div>
+					</div>
+				</el-col>
+				<el-col :span="6">
+					<div class="rightBlock">
+						<div style="height: 55vh;" class="perf-panel">
+							<dv-border-box-1>
+								<div class="perf-inner">
+									<div class="perf-header">
+										<div class="perf-title">
+											<span class="perf-title-bar"></span>
+											<span class="perf-title-icon">👥</span>
+											人员月产量 
+										</div>
+										<div class="perf-unit">单位: 件</div>
+									</div>
+									<div class="perf-list" ref="perfList">
+										<div class="perf-row" v-for="(item, idx) in scrollPerfItems" :key="idx">
+											<div class="perf-avatar">{{ item.name ? item.name.charAt(0) : '?' }}</div>
+											<div class="perf-name">{{ item.name }}</div>
+											<div class="perf-count">
+												<span class="perf-num">{{ item.count }}</span>
+												<span class="perf-unit-sm">件</span>
+											</div>
+										</div>
+									</div>
+									<div class="perf-footer">
+										<span class="perf-lightning">⚡</span>
+										标兵: {{ topPerson }}
+									</div>
+								</div>
+							</dv-border-box-1>
+						</div>
+						<div style="height: 35vh;">
+							<dv-border-box-1>
+								<div class="chartBlockTitle">车间整体产品统计</div>
+								<scEcharts :option="chartOption2" style="height: 27.5vh;width: 90%;left: 5%;"/>
+							</dv-border-box-1>
+						</div>
+					</div>
+				</el-col>
+			</el-row>
+		</el-main>
+	</el-container>
 </template>
 
 <script>
-const myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
-
+import * as echarts from "echarts";
+import { runningStateEnum } from "@/utils/enum.js";
+import scScrollTavle from "@/components/scScrollTable.vue";
+import { name } from "babylonjs-gui";
+function deepCopy(obj) {
+	return JSON.parse(JSON.stringify(obj));
+}
+const myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
 export default {
-  name: 'XiboDept',
-  data() {
-    return {
-      currentTime: '',
-      currentDay: '',
-      dayInterval: null,
+	components: { scScrollTavle },
+	data() {
+		return {
+      		runningStateEnum,
+			basicOption: {
+				backgroundColor: "",
+				tooltip: {
+					trigger: "axis",
+				},
+				legend: {
+					icon: "stack",
+					right: 0,
+				},
+				grid: {
+					left: "3%",
+					right: "2%",
+					bottom: "3%",
+					containLabel: true,
+				},
+				xAxis: {
+					type: "category",
+					boundaryGap: true,
+					data: [],
+					nameTextStyle: {
+						color: "#ffffff",
+					},
+					axisLabel: {
+						color: "#ffffff",
+					},
+				},
+				yAxis: {
+					name: "",
+					type: "value",
+					nameTextStyle: {
+						color: "#ffffff",
+					},
+					axisLabel: {
+						color: "#ffffff",
+					},
+				},
+				series: [
+					{
+						name: "",
+						type: "bar",
+						barWidth: 30,
+						label: {
+							show: true,
+							position: "top",
+							color: "#fff",
+						},
+						itemStyle: {
+							borderRadius: [5, 5, 0, 0],
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+								{offset: 0,color: "#00aaff"},
+								{offset: 1,color: "#0033ff"},
+							]),
+						},
+						data: [1,2,3,4,5,6,7],
+					},
+				],
+			},
+			chartOption1:{
+				 color: ['#2f89cf'],
+				tooltip: {
+					trigger: 'axis', 
+					axisPointer: { 
+						type: 'shadow'
+					}
+				},
+				grid: {
+					left: "0%",
+					top: "10px",
+					right: "0%", 
+					bottom: "4%", 
+					containLabel: true 
+				},
+				xAxis: {
+						type: 'category',
+						data: [], // 类目数据
+						axisTick: {
+							alignWithLabel: true // 刻度线与标签对齐
+						},
+						axisLabel: {
+							color: "rgb(255,255,255)",
+							fontSize: "8", 
+						},
+						axisLine: {
+							show: false
+						}
+					},
+				yAxis: {
+					type: 'value', 
+					axisLabel: {
+					color: "rgba(255,255,255,.6)",
+					fontSize: "12"
+					},
+				},
+				// 系列配置
+				series: {
+					name: 'Direct',
+					type: 'bar', 
+					barWidth: '15',
+					data: [],
+					itemStyle: {
+						barBorderRadius: 5 
+					}
+				}
+			},
+			chartOption2: {
+				grid: {
+					top: "10%", 
+					left: "10%",
+					bottom: "5%",
+					containLabel: true 
+				},
+				xAxis: {
+					// show: false 
+					splitLine: {
+					    show:false
+					},
+				},
+				// Y 轴配置，包含两个 Y 轴，一个用于显示类目，一个用于显示数值
+				yAxis: [
+				{
+					axisLine: {
+						show: false 
+					},
+					axisTick: {
+						show: false 
+					},
+					axisLabel: {
+						color: "#fff" 
+					},
+					splitLine: {
+					    show:false
+					},
+					type: 'category', 
+					inverse: true, // 反转坐标轴
+					data: [] 
+				},
+				{
+					show: false, 
+					axisLine: {
+						show: false 
+					},
+					axisTick: {
+						show: false 
+					},
+					splitLine: {
+					    show:false
+					},
+					axisLabel: { 
+						textStyle: {
+							fontSize: 12,
+							color: "#fff" 
+						}
+					},
+					inverse: true, // 反转坐标轴
+					data: [], 
+				}
+				],
+				// 一个柱状图，一个边框
+				series: [
+					{
+						name: '柱状图',
+						type: 'bar', 
+						data: [], 
+						yAxisIndex: 0, 
+						barCategoryGap: 50, 
+						barWidth: 10,
+						label: {
+							show: true,
+							position: "right",
+							color: "#fff",
+						},
+						itemStyle: {
+							normal: {
+								barBorderRadius: 5,
+								color: function (params) { 
+									return myColor[params.dataIndex%5];
+								}
+							},
+							label: { 
+								normal: {
+									// show: true, 
+									position: "outside",
+									color: "#fff",
+									// formatter: "{a}"
+								}
+							}
+						},
+					},
+					{
+						name: "框", 
+						type: "bar", 
+						barCategoryGap: 50,
+						barWidth: 12,
+						itemStyle: { 
+							color: "none",
+							shadowColor: '#999', // 阴影颜色
+							shadowBlur: 3, // 阴影模糊
+							shadowOffsetX: 0, // 阴影水平偏移
+							shadowOffsetY: 0, // 阴影垂直偏移 
+							borderColor: "rgba(153,153,153,0.6)", // 边框颜色
+							borderWidth: 0.5, 
+							barBorderRadius: 5,
+							
+						},
+						yAxisIndex: 1, 
+						data: [] 
+					}
+				]
+			},
+			tableHeight: 100,
+			speed: 2000,
+			time: null,
+			deptId: "",
+			dayInterval: null,
+			chartInterval2: null,
+			state_: {
+				10: '完好',
+				20: '限用',
+				30: '在修',
+				40: '禁用',
+			},
+			configData:{
+				header:['物料名称','批次号','数量'],
+				headerBGC:'#0a3f44',
+				headerHeight:40,
+				align:'center',
+				data:[],
+				waitTime:1000,
+			},
+			configData1:{
+				headerBGC:'#0a3f44',
+				header:['产出名称','规格','型号','开始时间','结束时间','完成进度','产量','状态'],
+				headerHeight:40,
+				data:[]
+			},
+			chartLeft1Data: { names: ['拉单丝', '一次复丝', '二次复丝'], values: [320, 280, 195] },
+			config_left2:{
+				data:[],
+				digitalFlopStyle: {
+					fontSize: 16,
+					fill: '#fff'
+				}
+			},
+			config_middle_top:{
+				rowNum:10,
+				headerBGC: 'rgba(47,102,107,.34)',
+				oddRowBGC: 'rgba(0,0,0,0)',
+				evenRowBGC: 'rgba(0,0,0,0)',
+			    header: ['任务编号', '产出产品', '任务量', '合格数'],
+				data: []
+			},
+			equipmentList: [],
+			lastUpdateSeconds: 0,
+			lastUpdateInterval: null,
+			scrollTimer: null,
+			performanceList: [],
+			materialsList: [
+				{type: '倒像器', color: '#53c6f3', list: [],img:'public/img/bx/dxq2.png'}, 
+				{type: '直板',  color: '#c8ff50', list: [],img:'public/img/bx/zb2.png'}, 
+				{type: '光锥',  color: '#ff9d3e', list: [],img:'public/img/bx/gz2.png'}
+			],
+			perfScrollTimer: null,
+			currentTime: "",
+			currentDay: "",
+			today: "",
+			end_time:'',
+			start_time:'',
+			deptName:"拉丝排板班组",
+			// mgroups:['洗棒','捆棒','拉单丝','排一次棒','一次复丝','排二次棒','二次复丝'],
+			mgroups:['拉单丝','一次复丝','二次复丝'],
+		};
+	},
+	computed: {
+		onlineCount() {
+			return this.equipmentList.filter(e => e.isRunning).length;
+		},
+		lastUpdateText() {
+			return this.lastUpdateSeconds > 0 ? `${this.lastUpdateSeconds}s前` : '刚刚';
+		},
+		// 渲染两份，用于无缝滚动
+		scrollItems() {
+			if (this.equipmentList.length === 0) return [];
+			return [...this.equipmentList, ...this.equipmentList];
+		},
+		// 全员按 count 降序排列
+		sortedPerfList() {
+			return [...this.performanceList]
+				.sort((a, b) => b.count - a.count);
+		},
+		// 渲染两份，用于无缝滚动
+		scrollPerfItems() {
+			if (!this.sortedPerfList.length) return [];
+			return [...this.sortedPerfList, ...this.sortedPerfList];
+		},
+		// 标兵 = 产量最多的人
+		topPerson() {
+			if (!this.performanceList.length) return '-';
+			return [...this.performanceList]
+				.sort((a, b) => b.count - a.count)[0]?.name || '-';
+		},
+		materialsGroups() {
+			if (this.equipmentList.length === 0) return [];
+			console.log(this.equipmentList);
+			return [...this.equipmentList];
+			
+		},
+	},
+	mounted() {
+		let that = this;
+		//洗棒、捆棒、拉丝 ：洗棒、捆棒、拉单丝、排一次棒、一次复丝、排二次棒、二次复丝
+		this.showTime();
+		this.dayInterval = setInterval(() => {
+			this.showTime();
+		}, 1000);
+		that.mgroupsforEach();
+		that.getEquipment();
+		that.getMgroups();
+		that.$nextTick(() => { that.renderChartLeft1(); });
+		//每个人日生产量：个人绩效
+		// that.getEveryoneCount();
+		that.materialAll();
+		let date = new Date();
+		let year = date.getFullYear();
+		let month = date.getMonth() + 1;
+		console.log(new Date(year, month, 0).getDate())
+	},
+	methods: {
+		getMondayOfCurrentWeek() {
+			let today = new Date();
+			let days = [];
+			for (let i = 6; i >= 0; i--) {
+				let date = new Date(today);
+				date.setDate(today.getDate() - i);
+				days.push(date.toISOString().split('T')[0]); // 格式化为 YYYY-MM-DD
+			}
+			return days;
+		},
+		//时间
+		showTime() {
+			this.currentTime = this.$TOOL.dateFormat(new Date(), "hh:mm:ss");
+			this.currentDay = this.$TOOL.dateFormat(
+				new Date(),
+				"yyyy年MM月dd日"
+			);
+		},
+		setChart(name, option = null) {
+			var myChart = echarts.getInstanceByDom(document.getElementById(name));
+			if (myChart == undefined) {
+				myChart = echarts.init(document.getElementById(name), "dark", {
+					renderer: "svg",
+				});
+			}
+			if (option == null) {
+				option = Object.assign({}, this.basicOption);
+			}
+			setTimeout(() => {
+				try {
+					myChart.setOption(option);
+				} catch (error) {}
+			}, 500);
+			return myChart;
+		},
+		getMgroups(){
+			let that = this;
+			let params = {page: 0,query:" { id, name }"};
+			that.$API.mtm.mgroup.list.req(params).then((res) => {
+				that.performanceList = [];
+				that.materialsList[0].list = [];
+				that.materialsList[1].list = [];
+				that.materialsList[2].list = [];
+				res.forEach((item)=>{
+					let index = that.mgroups.indexOf(item.name);
+				    if(index>-1){
+						//车间库存
+						that.getmgroupMaterial(item.id,item.name,index);
+						//员工生产统计
+						that.getEveryoneCount(item.id,item.name)
+					}
+				})
+			})
+		},
+		mgroupsforEach(){
+			let that = this;
+			that.mgroups.forEach((item)=>{
+				 that.getMtask1(item);
+			})
+		},
+		//任务进度
+		getMtask1(name) {
+			let that = this;
+			let params = {
+				state: 20,mgroup__name: name,page:0,
+				query: " { id, material_out_name, number, count, count_ok }"
+			};
+			that.config_middle_top.data = [];
+			that.$API.pm.mtask.list.req(params).then((res) => {
+				if(res.length>0){
+					res.forEach((item) => {
+						let arr = [];
+						arr[0] = item.number;
+						arr[1] = item.material_out_name;
+						arr[2] = item.count;
+						arr[3] = item.count_ok;
+						// arr[4] = item.count_ok/item.count*100+'%';
+						that.config_middle_top.data.push(arr);
+					})
+				}
+			});
+		},
+		//库存统计列表
+		getmgroupMaterial(id,name,index) {
+			let that = this;
+			let params = { tag: 'done',page:0,mgroup: id };
+			that.$API.wpm.wmaterial.list.req(params).then((res) => {
+				let count = 0;
+				res.forEach((item) => {
+				    count += Number(item.count);
+				})
+				if (!that.chartLeft1Data.names[index]) {
+					that.chartLeft1Data.names[index] = name;
+					that.chartLeft1Data.values[index] = count;
+				} else {
+					that.chartLeft1Data.values[index] = count;
+				}
+				// that.renderChartLeft1();
+			})
+		},
+		renderChartLeft1() {
+			let that = this;
+			let myChart = echarts.getInstanceByDom(document.getElementById('chartLeft1'));
+			if (!myChart) {
+				myChart = echarts.init(document.getElementById('chartLeft1'));
+			}
+			let option = {
+				backgroundColor: 'transparent',
+				grid: { left: '2%', right: '15%', top: '8%', bottom: '5%', containLabel: true },
+				xAxis: { type: 'value', axisLabel: { color: '#fff', fontSize: 12 }, splitLine: { lineStyle: { color: 'rgba(255,255,255,0.08)' } } },
+				yAxis: { type: 'category', data: that.chartLeft1Data.names, axisLabel: { color: '#fff', fontSize: 14 }, axisLine: { show: false }, axisTick: { show: false } },
+				series: [{
+					type: 'bar', data: that.chartLeft1Data.values,
+					barWidth: 18,
+					label: { show: true, position: 'right', color: '#fff', fontSize: 14, fontWeight: 'bold' },
+					itemStyle: {
+						borderRadius: [0, 6, 6, 0],
+						color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+							{ offset: 0, color: '#0a5a8a' },
+							{ offset: 1, color: '#00c8ff' },
+						]),
+					},
+				}],
+			};
+			myChart.setOption(option);
+		},
+		//车间设备列表
+		getEquipment() {
+			let that = this;
+			let params = { page: 0, belong_dept__name: '拉丝排板班组' };
+			that.equipmentList = [];
+			clearInterval(that.lastUpdateInterval);
+			that.lastUpdateSeconds = 0;
+			that.$API.em.equipment.list.req(params).then((res) => {
+				if (res.length > 0) {
+					res.forEach((item) => {
+						that.equipmentList.push({
+							id: item.id,
+							name: item.name,
+							number: item.number,
+							running_state_text: runningStateEnum[item.running_state]?.text || '未知',
+							mgroup_name: item.mgroup_name,
+							isRunning: item.running_state == 10,
+						});
+					});
+				}
+				that.lastUpdateSeconds = 0;
+				that.lastUpdateInterval = setInterval(() => {
+					that.lastUpdateSeconds++;
+				}, 1000);
+				that.$nextTick(() => { that.startAutoScroll(); });
+			});
+		},
+		startPerfScroll() {
+			const that = this;
+			clearInterval(this.perfScrollTimer);
+			this.$nextTick(() => {
+				const el = that.$refs.perfList;
+				if (!el) return;
+				const halfHeight = el.scrollHeight / 2;
+				if (halfHeight <= el.clientHeight + 1) return;
+				that.perfScrollTimer = setInterval(() => {
+					el.scrollTop += 1;
+					if (el.scrollTop >= halfHeight) {
+						el.scrollTop = 0;
+					}
+				}, 40);
+			});
+		},
+		startAutoScroll() {
+			const that = this;
+			clearInterval(this.scrollTimer);
+			this.$nextTick(() => {
+				const el = that.$refs.eqGrid;
+				if (!el) return;
+				// scrollItems 已是两倍，halfHeight 即一份的高度
+				const halfHeight = el.scrollHeight / 2;
+				// 一份内容就能装下，无需滚动
+				if (halfHeight <= el.clientHeight + 1) return;
+				that.scrollTimer = setInterval(() => {
+					el.scrollTop += 1;
+					// 滚完第一份时瞬间归零，视觉无缝
+					if (el.scrollTop >= halfHeight) {
+						el.scrollTop = 0;
+					}
+				}, 40);
+			});
+		},
+		//每个人日产量
+		getEveryoneCount(id,name){
+			let that = this;
+			let date = new Date();
+			let year = date.getFullYear();
+			let month = date.getMonth() + 1;
+			let days = new Date(year, month,0).getDate();
+			let start_date = year + "-" + month + "-01";
+			let end_date = year + "-" + month + "-" + days;
+			let params = {
+				query: {start_date:start_date,end_date:end_date,mgroup_name:name},
+			};
+			let exceStr = "";
+			if(name=='拉单丝'){
+				exceStr = "product_defect_lds";
+			}else if(name=='排一次棒'||name=='一次复丝'||name=='排二次棒'||name=='二次复丝'){
+				exceStr = "product_defect_jjcj";
+			}
+			this.$API.bi.dataset.exec.req(exceStr, params).then((res) => {
+				if(res.data2.ds0.length > 0){
+					res.data2.ds0.forEach(item => {
+						const itemName = item.员工;
+						const count = Number(item.总切片数) || 0;
+						const existing = that.performanceList.find(p => p.name === itemName);
+						if (existing) {
+							existing.count += count;
+						} else {
+							that.performanceList.push({ name: itemName, count });
+						}
+						const matName = item.物料名;
+						let index = matName.indexOf('倒像器') > -1 ? 0: matName.indexOf('直板') > -1 ?1 : 2;
+						const matExisting = that.materialsList[index].list.find(m => m === matName);
+						if (matExisting) {
+						} else {
+							that.materialsList[index].list.push(matName);
+						}
+					});
+					console.log('that.materialsList',that.materialsList);
+				}
+				that.$nextTick(() => { that.startPerfScroll(); });
+			});
+		},
+		//车间整体产品统计
+		materialAll(){
+			let that = this;
+			let obj = {};
+			that.$API.bi.dataset.exec.req("materialCount", obj).then((res) => {
+				if (res.data2.ds0&&res.data2.ds0.length>0) {
+					let arrs = res.data2.ds0;
+					let list = arrs.filter((item) => {
+						return item.dept_name == that.deptName1||item.dept_name == that.deptName2||item.dept_name == that.deptName3;
+					});
+					let namelist = [],valuelist = [],values=[];
+					if(list.length>0){
+						list.forEach((item) => {
+							let index = namelist.indexOf(item.material_name);
+							if(index==-1){
+								namelist.push(item.material_name);
+								valuelist.push(item.count);
+								values.push(item.count);
+							}
+						})
+					}
+					let maxNum = valuelist.sort((a, b) => b - a)[0]+2;
+					let arr = [];
+					valuelist.forEach((item)=>{
+					    arr.push(maxNum)
+					})
+					that.chartOption2.yAxis[0].data = namelist;
+					that.chartOption2.yAxis[1].data = valuelist;
+					that.chartOption2.series[0].data = valuelist;
+					that.chartOption2.series[1].data = arr;
 
-      // 产品已完成数
-      finishedCount: 0,
-
-      // 产品种类占比
-      config_ring: {
-        data: [],
-        digitalFlopStyle: { fontSize: 14, fill: '#fff' },
-      },
-
-      // 设备列表 & 轮播状态
-      equipmentList: [],
-      currentEqIndex: 0,
-      chartDataMap: {},
-      cdInterval: null,
-      carouselInterval: null,
-
-      // 折线图（设备曲线）
-      chartOption_curve: {
-        backgroundColor: '',
-        tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
-        grid: { left: '4%', right: '4%', top: '8%', bottom: '12%', containLabel: true },
-        xAxis: {
-          type: 'category',
-          data: [],
-          boundaryGap: false,
-          axisLabel: { color: '#7ecfcf', fontSize: 9 },
-          axisLine: { lineStyle: { color: 'rgba(83,198,243,0.3)' } },
-          splitLine: { show: false },
-        },
-        yAxis: {
-          type: 'value',
-          axisLabel: { color: '#7ecfcf', fontSize: 10 },
-          splitLine: { lineStyle: { color: 'rgba(83,198,243,0.1)', type: 'dashed' } },
-        },
-        series: [{
-          type: 'line',
-          data: [],
-          smooth: true,
-          lineStyle: { color: '#00e5ff', width: 2 },
-          itemStyle: { color: '#00e5ff' },
-          symbol: 'none',
-          areaStyle: {
-            color: {
-              type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
-              colorStops: [
-                { offset: 0, color: 'rgba(0,229,255,0.3)' },
-                { offset: 1, color: 'rgba(0,229,255,0)' },
-              ],
-            },
-          },
-        }],
-      },
-
-      // 曲线统计信息
-      curStat: { cur: '--', max: '--', min: '--', count: 0 },
-
-      // 人员周产量（模拟数据）
-      chartOption_right: {
-        backgroundColor: '',
-        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
-        grid: { top: '2%', left: '2%', right: '14%', bottom: '2%', containLabel: true },
-        xAxis: {
-          type: 'value',
-          axisLabel: { color: '#7ecfcf', fontSize: 9 },
-          splitLine: { lineStyle: { color: 'rgba(83,198,243,0.1)', type: 'dashed' } },
-        },
-        yAxis: {
-          type: 'category',
-          inverse: true,
-          data: ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十'],
-          axisLabel: { color: '#aef', fontSize: 10 },
-          axisLine: { show: false },
-          axisTick: { show: false },
-        },
-        series: [{
-          type: 'bar',
-          barWidth: 14,
-          data: [920, 796, 734, 661, 594, 508, 438, 360],
-          itemStyle: {
-            borderRadius: [0, 4, 4, 0],
-            color: (params) => myColor[params.dataIndex % 5],
-          },
-          label: { show: true, position: 'right', color: '#fff', fontSize: 10 },
-        }],
-      },
-    };
-  },
-  computed: {
-    currentEqName() {
-      return this.equipmentList[this.currentEqIndex]?.name || '--';
-    },
-  },
-  mounted() {
-    this.showTime();
-    this.dayInterval = setInterval(this.showTime, 1000);
-    this.getFinishedCount();
-    this.getMaterialRatio();
-    this.initEquipmentCurve();
-  },
-  beforeUnmount() {
-    clearInterval(this.dayInterval);
-    clearInterval(this.cdInterval);
-    clearInterval(this.carouselInterval);
-  },
-  methods: {
-    showTime() {
-      this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss');
-      this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日');
-    },
-
-    async getFinishedCount() {
-      try {
-        const mgroups = await this.$API.mtm.mgroup.list.req({
-          belong_dept__name: '拉丝排板班组',
-          page: 0,
-        });
-        if (!mgroups || mgroups.length === 0) return;
-        let total = 0;
-        for (const mg of mgroups) {
-          const res = await this.$API.wpm.wmaterial.list.req({
-            tag: 'done',
-            page_size: 1,
-            mgroup: mg.id,
-          });
-          total += res.count || 0;
-        }
-        this.finishedCount = total;
-      } catch (e) {
-        console.error('getFinishedCount error', e);
-      }
-    },
-
-    getMaterialRatio() {
-      this.$API.bi.dataset.exec.req('materialCount', {}).then((res) => {
-        if (!res.data2?.ds0?.length) return;
-        const list = res.data2.ds0.filter(
-          (item) => item.dept_name === '拉丝排板班组'
-        );
-        const nameMap = {};
-        list.forEach((item) => {
-          nameMap[item.material_name] =
-            (nameMap[item.material_name] || 0) + (item.count || 0);
-        });
-        this.config_ring.data = Object.entries(nameMap).map(([name, value]) => ({
-          name,
-          value,
-        }));
-      });
-    },
-
-    async initEquipmentCurve() {
-      try {
-        const res = await this.$API.em.equipment.list.req({
-          belong_dept__name: '拉丝排板班组',
-          page: 0,
-        });
-        this.equipmentList = (res || []).filter((eq) => eq.cd_req_addr);
-        if (this.equipmentList.length === 0) return;
-        this.equipmentList.forEach((eq) => {
-          this.chartDataMap[eq.id] = [];
-        });
-        this.startCdPoll();
-        this.startCarousel();
-      } catch (e) {
-        console.error('initEquipmentCurve error', e);
-      }
-    },
-
-    startCdPoll() {
-      if (this.cdInterval) clearInterval(this.cdInterval);
-      this.pollOnce();
-      this.cdInterval = setInterval(this.pollOnce, 5000);
-    },
-
-    pollOnce() {
-      const eq = this.equipmentList[this.currentEqIndex];
-      if (!eq) return;
-      this.$API.em.cd.req({ method: eq.cd_req_addr }).then((res) => {
-        let numVal;
-        if (typeof res === 'number') {
-          numVal = res;
-        } else if (typeof res === 'object' && res !== null) {
-          const first = Object.values(res)[0];
-          numVal = parseFloat(first);
-        }
-        if (isNaN(numVal)) return;
-        const time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss');
-        const points = this.chartDataMap[eq.id];
-        points.push({ time, value: numVal });
-        if (points.length > 60) points.shift();
-        this.refreshChart(points);
-      }).catch((e) => console.warn('cd poll error:', e));
-    },
-
-    refreshChart(points) {
-      this.chartOption_curve.xAxis.data = points.map((p) => p.time);
-      this.chartOption_curve.series[0].data = points.map((p) => p.value);
-      if (points.length > 0) {
-        const values = points.map((p) => p.value);
-        this.curStat = {
-          cur: values[values.length - 1].toFixed(2),
-          max: Math.max(...values).toFixed(2),
-          min: Math.min(...values).toFixed(2),
-          count: values.length,
-        };
-      }
-    },
-
-    startCarousel() {
-      if (this.carouselInterval) clearInterval(this.carouselInterval);
-      this.carouselInterval = setInterval(() => {
-        this.currentEqIndex =
-          (this.currentEqIndex + 1) % this.equipmentList.length;
-        this.curStat = { cur: '--', max: '--', min: '--', count: 0 };
-        this.startCdPoll();
-        const eq = this.equipmentList[this.currentEqIndex];
-        this.refreshChart(this.chartDataMap[eq.id]);
-      }, 20000);
-    },
-  },
+					namelist.forEach((item,index)=>{
+						let obj = {};
+						obj.name = item;
+						obj.value = valuelist[index];
+						that.config_left2.data.push(obj);
+					})
+				}
+			});
+		},
+	},
 };
 </script>
-
 <style scoped>
 @font-face {
-  font-family: 'myfont';
-  src: url('../../../utils/youShe.ttf');
+	font-family: "myfont";
+	/* 字体名称 */
+	src: url("../../../utils/youShe.ttf");
+	/* 字体文件相对路径 */
 }
+
 .dashboard {
-  background-image: url('/public/img/photon_bg.png');
-  background-size: cover;
-  color: #fff;
-  font-family: 'Microsoft Yahei' !important;
+	background-image: url("/public/img/photon_bg.png");
+	color: #fff;
+	font-family: "Microsoft Yahei" !important;
+	background-size: cover;
 }
+
 .header {
-  background: url('/public/img/header_bgv.png');
-  background-size: 100% 100%;
-  height: 8vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  border-bottom: none;
+	/* background: url("/public/img/head_bg.png"); */
+	background: url("/public/img/header_bgv.png");
+	border-bottom: none;
+	background-size: 100% 100%;
+	display: block;
+	height: 8vh;
+	color: rgb(149, 255, 255);
+	font-family: "Microsoft Yahei";
+	text-align: center;
+	padding: 12px 0px;
 }
-.title {
-  font-family: 'myfont';
-  font-size: 4vh;
-  font-weight: bold;
-  color: rgb(149, 255, 255);
-  letter-spacing: 10px;
+.header > .title {
+	font-weight: bold;
+	font-family: "myfont";
+	font-size: 32px;
+	font-size:4vh;
+	letter-spacing: 10px;
 }
-.timer {
-  position: absolute;
-  left: 20px;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 14px;
-  color: rgb(149, 255, 255);
+.header > .timer {
+	font-size: 14px;
+	margin-top: 18px;
+	position: absolute;
+	top: 5px;
+	left: 20px;
 }
-.numBlock_title {
-  height: 4vh;
-  width: 100%;
-  font-size: 1.5vh;
-  line-height: 4vh;
-  text-align: center;
+.numBlock{
+	height: 10vh;
 }
-.numBlock_value {
-  height: 6vh;
-  width: 100%;
-  line-height: 6vh;
-  text-align: center;
-  font-size: 3.5vh;
-  font-family: 'myfont';
-  color: #00e5ff;
+.numBlock_title{
+	height: 4vh;
+	width: 100%;
+	font-size: 1.5vh;
+	line-height: 4vh;
+	text-align: center;
 }
-.chartBlockTitle {
-  width: 90%;
-  height: 5vh;
-  margin: auto;
-  line-height: 6vh;
-  text-align: left;
-  padding-left: 10px;
-  font-size: 1.6vh;
-  font-weight: 600;
-  border-bottom: 1px solid rgb(83 198 243);
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.numBlock_value{
+	height:6vh;
+	width: 100%;
+	line-height: 5vh;
+	text-align: center;
+	font-size: 3vh;
+	font-family: "myfont";
 }
-.eq-name-badge {
-  font-size: 1.4vh;
-  color: #00e5ff;
-  font-weight: bold;
+/* ===== 产品统计面板 ===== */
+.mat-panel-wrap { position: relative; }
+
+.mat-inner {
+	position: absolute;
+	inset: 2.5%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
 }
-.interval-tip {
-  font-size: 1.1vh;
-  color: rgba(149,255,255,0.5);
-  margin-left: auto;
+
+.mat-header {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	height: 4vh;
+	padding: 0 1.2vh;
+	border-bottom: 1px solid rgba(83, 198, 243, 0.25);
 }
-.eq-dots {
-  display: flex;
-  gap: 6px;
-  padding: 4px 16px;
+.mat-title {
+	display: flex;
+	align-items: center;
+	gap: 0.4vh;
+	font-size: 1.5vh;
+	font-weight: 600;
+	color: #e0f4ff;
 }
+.mat-title-bar {
+	display: inline-block;
+	width: 3px;
+	height: 1.6vh;
+	background: #00b4ff;
+	border-radius: 2px;
+	margin-right: 2px;
+}
+.mat-title-icon { font-style: normal; font-size: 1.4vh; }
+
+.mat-body {
+	flex: 1;
+	overflow-y: auto;
+	padding: 0.5vh 0.8vh;
+	display: flex;
+	flex-direction: column;
+	gap: 1vh;
+}
+.mat-body::-webkit-scrollbar { width: 2px; }
+.mat-body::-webkit-scrollbar-thumb { background: rgba(83, 198, 243, 0.3); border-radius: 2px; }
+
+.mat-group { display: flex; flex-direction: column; gap: 0.35vh; }
+
+.mat-group-label {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.25vh 0.6vh;
+	margin-bottom: 0.15vh;
+	border-left: 2.5px solid;
+	background: rgba(255, 255, 255, 0.04);
+	border-radius: 0 0.4vh 0.4vh 0;
+	font-size: 1.25vh;
+	font-weight: 600;
+	color: rgba(220, 240, 255, 0.9);
+}
+.mat-group-total {
+	font-size: 1.3vh;
+	font-weight: 700;
+	font-family: "myfont", "Microsoft Yahei";
+}
+
+.mat-row {    
+	width: 100%;
+    text-align: left;
+	font-size: 1.1vh;
+	color: rgba(180, 215, 240, 0.75);
+	padding: 0.1vh 1vw;
+	
+}
+.mat-name {
+	width: 9vh;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	flex-shrink: 0;
+}
+.mat-bar-wrap {
+	flex: 1;
+	height: 0.7vh;
+	background: rgba(255, 255, 255, 0.08);
+	border-radius: 1vh;
+	overflow: hidden;
+}
+.mat-bar {
+	display: block;
+	height: 100%;
+	border-radius: 1vh;
+	opacity: 0.75;
+	transition: width 0.6s ease;
+}
+.mat-count {
+	flex-shrink: 0;
+	width: 4vh;
+	text-align: right;
+	font-weight: 700;
+	font-family: "myfont", "Microsoft Yahei";
+	font-size: 1.3vh;
+	color: #c8ff50;
+}
+.middleTableBlock1{
+	width:94%;
+	height:31vh;
+	position: absolute;
+	left: 4%
+}
+.middleTableBlock2{
+	width:94%;
+	height:34vh;
+	position: absolute;
+	left: 4%
+}
+.chartBlockTitle{
+	width: 90%;
+	height: 5vh;
+	margin: auto;
+	line-height: 6vh;
+	border-radius: 10px;
+	text-align: left;
+	padding-left: 10px;
+	font-size: 1.6vh;
+    font-weight: 600;
+	border-bottom: 1px solid rgb(83 198 243);
+}
+
+/* ===== 设备卡片面板 ===== */
+.eq-panel { position: relative; }
+
+/* dv-border-box-1 内层弹性布局，严格撑满边框内部 */
+.eq-inner {
+	position: absolute;
+	inset: 2.5%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.eq-header {
+	flex-shrink: 0;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0 1.2vh;
+	height: 4vh;
+	border-bottom: 1px solid rgba(83, 198, 243, 0.25);
+}
+.eq-title {
+	display: flex;
+	align-items: center;
+	gap: 0.4vh;
+	font-size: 1.5vh;
+	font-weight: 600;
+	color: #e0f4ff;
+}
+.eq-title-bar {
+	display: inline-block;
+	width: 3px;
+	height: 1.6vh;
+	background: #00b4ff;
+	border-radius: 2px;
+	margin-right: 2px;
+}
+.eq-title-icon { font-style: normal; color: #ff9d3e; font-size: 1.4vh; }
+.eq-online-badge { font-size: 1.2vh; color: rgba(180, 230, 255, 0.7); }
+
+/* 卡片网格 — flex:1 填充剩余空间，overflow hidden 由 JS 控制滚动 */
+.eq-grid {
+	flex: 1;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	align-content: start;
+	gap: 0.5vh;
+	padding: 0.5vh 0.8vh;
+	overflow: hidden;    /* JS 滚动，隐藏滚动条 */
+	overflow-y: hidden;
+}
+
+.eq-card {
+	background: rgba(8, 25, 45, 0.85);
+	border-radius: 0.8vh;
+	border: 1px solid rgba(40, 80, 120, 0.5);
+	padding: 0.4vh 0.3vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 0.3vh;
+}
+.eq-card--run {
+	border-color: rgba(0, 200, 100, 0.35);
+	box-shadow: inset 0 0 8px rgba(0, 200, 100, 0.06);
+}
+.eq-card--stop {
+	border-color: rgba(80, 90, 110, 0.45);
+}
+
+.eq-card-name {
+	font-size: 1.05vh;
+	color: rgba(180, 220, 255, 0.9);
+	background: rgba(0, 55, 100, 0.55);
+	padding: 0.1vh 0.6vh;
+	border-radius: 0.4vh;
+	border: 1px solid rgba(80, 160, 220, 0.3);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 95%;
+}
+.eq-card-center {
+	display: flex;
+	align-items: center;
+	gap: 0.5vh;
+}
+.eq-card-state {
+	font-size: 1.5vh;
+	font-weight: bold;
+}
+.state-run  { color: #00e676; }
+.state-stop { color: #ff5252; }
+
+.eq-card-sub {
+	font-size: 0.9vh;
+	color: rgba(140, 195, 225, 0.55);
+}
+
+/* 指示点 */
 .eq-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: rgba(83, 198, 243, 0.25);
-  border: 1px solid rgba(83, 198, 243, 0.5);
-  display: inline-block;
+	display: inline-block;
+	border-radius: 50%;
+	flex-shrink: 0;
+	width: 1.1vh;
+	height: 1.1vh;
 }
-.eq-dot.active {
-  background: #00e5ff;
-  box-shadow: 0 0 6px #00e5ff;
+.eq-dot--green {
+	background: #00e676;
+	box-shadow: 0 0 5px #00e676, 0 0 12px rgba(0, 230, 118, 0.5);
+	animation: pulse-green 2s ease-in-out infinite;
 }
-.curve-stats {
-  display: flex;
-  gap: 20px;
-  padding: 4px 16px 8px;
-  font-size: 1.2vh;
-  color: #7ecfcf;
-  border-top: 1px solid rgba(83, 198, 243, 0.2);
+.eq-dot--red {
+	background: #ff5252;
+	box-shadow: 0 0 5px #ff5252, 0 0 10px rgba(255, 82, 82, 0.45);
 }
-.curve-stats em { font-style: normal; font-weight: bold; }
-.val-cur { color: #00e5ff; }
-.val-max { color: #F8B448; }
-.val-min { color: #56D0E3; }
+.eq-dot--sm { width: 0.8vh; height: 0.8vh; }
+
+@keyframes pulse-green {
+	0%, 100% { box-shadow: 0 0 4px #00e676, 0 0 10px rgba(0,230,118,0.4); }
+	50%       { box-shadow: 0 0 8px #00e676, 0 0 18px rgba(0,230,118,0.75); }
+}
+
+/* 底栏 */
+.eq-footer {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	padding: 0 1.2vh;
+	height: 3.5vh;
+	border-top: 1px solid rgba(83, 198, 243, 0.2);
+	gap: 2vh;
+}
+.eq-foot-item {
+	display: flex;
+	align-items: center;
+	gap: 0.5vh;
+	font-size: 1.1vh;
+	color: rgba(180, 220, 255, 0.8);
+}
+.eq-foot-update {
+	margin-left: auto;
+	font-size: 1.05vh;
+	color: rgba(120, 175, 215, 0.55);
+}
+
+/* ===== 人员日产量 TOP5 ===== */
+.perf-panel { position: relative; }
+
+.perf-inner {
+	position: absolute;
+	inset: 2.5%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.perf-header {
+	flex-shrink: 0;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: 4vh;
+	padding: 0 1vh;
+	border-bottom: 1px solid rgba(83, 198, 243, 0.2);
+}
+.perf-title {
+	display: flex;
+	align-items: center;
+	gap: 0.5vh;
+	font-size: 1.5vh;
+	font-weight: 600;
+	color: #e0f4ff;
+}
+.perf-title-bar {
+	display: inline-block;
+	width: 3px;
+	height: 1.8vh;
+	background: #00b4ff;
+	border-radius: 2px;
+}
+.perf-title-icon { font-style: normal; font-size: 1.4vh; }
+.perf-unit { font-size: 1.2vh; color: rgba(180, 220, 255, 0.55); }
+
+/* 列表区 */
+.perf-list {
+	flex: 1;
+	overflow: hidden;   /* JS 控制滚动，隐藏滚动条 */
+	padding: 0 1vh;
+}
+.perf-row {
+	display: flex;
+	align-items: center;
+	gap: 1.2vh;
+	height: 5.2vh;      /* 固定行高，保证无缝滚动节奏一致 */
+	border-bottom: 1px solid rgba(83, 198, 243, 0.12);
+	flex-shrink: 0;
+}
+
+/* 头像圆圈 */
+.perf-avatar {
+	flex-shrink: 0;
+	width: 3.6vh;
+	height: 3.6vh;
+	border-radius: 50%;
+	background: linear-gradient(135deg, #1a6fa8 0%, #0d4a7a 100%);
+	border: 1.5px solid rgba(100, 180, 255, 0.5);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.5vh;
+	font-weight: 600;
+	color: #b8e0ff;
+}
+
+.perf-name {
+	flex: 1;
+	font-size: 1.6vh;
+	color: rgba(210, 235, 255, 0.9);
+}
+
+.perf-count {
+	display: flex;
+	align-items: baseline;
+	gap: 0.3vh;
+}
+.perf-num {
+	font-size: 2.4vh;
+	font-weight: 700;
+	color: #c8ff50;
+	font-family: "myfont", "Microsoft Yahei";
+	letter-spacing: 1px;
+}
+.perf-unit-sm {
+	font-size: 1.1vh;
+	color: rgba(180, 220, 160, 0.7);
+}
+
+/* 底部标兵栏 */
+.perf-footer {
+	flex-shrink: 0;
+	height: 4vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.6vh;
+	background: rgba(15, 40, 65, 0.8);
+	border-radius: 2vh;
+	font-size: 1.35vh;
+	color: rgba(200, 230, 255, 0.85);
+	border: 1px solid rgba(60, 120, 180, 0.3);
+	margin-top: 0.5vh;
+}
+.perf-lightning {
+	font-style: normal;
+	color: #ff9d3e;
+	font-size: 1.4vh;
+}
+
 </style>
+<!-- <template>
+	<el-container class="dashboard">
+		<el-header class="header">
+			<div class="title">洁净车间看板</div>
+			<div class="timer">{{ currentDay }} {{ currentTime }}</div>
+		</el-header>
+		<el-main>
+			<el-row style="margin-bottom: 1vh;">
+				<el-col :span="3" class="numBlock">
+					<dv-border-box-12>
+						<div class="numBlock_title">本月产量</div>
+						<div class="numBlock_value">123</div>
+					</dv-border-box-12>
+				</el-col>
+				<el-col :span="3" class="numBlock">
+					<dv-border-box-12>
+						<div class="numBlock_title">今日产量</div>
+						<div class="numBlock_value">123</div>
+					</dv-border-box-12>
+				</el-col>
+				<el-col :span="3" class="numBlock">
+					<dv-border-box-12>
+						<div class="numBlock_title">今日工序报工量</div>
+						<div class="numBlock_value">123</div>
+					</dv-border-box-12>
+				</el-col>
+				<el-col :span="3" class="numBlock">
+					<dv-border-box-12>
+						<div class="numBlock_title">在产产品数</div>
+						<div class="numBlock_value">123</div>
+					</dv-border-box-12>
+				</el-col>
+				<el-col :span="3" class="numBlock">
+					<dv-border-box-12>
+						<div class="numBlock_title">本月完工工单</div>
+						<div class="numBlock_value">123</div>
+					</dv-border-box-12>
+				</el-col>
+				<el-col :span="3" class="numBlock">
+					<dv-border-box-12>
+						<div class="numBlock_title">本月计划产量</div>
+						<div class="numBlock_value">123</div>
+					</dv-border-box-12>
+				</el-col>
+				<el-col :span="3" class="numBlock">
+					<dv-border-box-12>
+						<div class="numBlock_title">本月产量</div>
+						<div class="numBlock_value">123</div>
+					</dv-border-box-12>
+				</el-col>
+				<el-col :span="3" class="numBlock">
+					<dv-border-box-12>
+						<div class="numBlock_title">本月产量</div>
+						<div class="numBlock_value">123</div>
+					</dv-border-box-12>
+				</el-col>
+			</el-row>
+			<el-row>
+				<el-col :span="6">
+					<div class="leftBlock">
+						<el-row style="margin-bottom: 1vh;">
+							<el-col :span="12" class="numBlock">
+								<dv-border-box-12>
+									<div class="numBlock_title">在制工序数</div>
+									<div class="numBlock_value">123</div>
+								</dv-border-box-12>
+							</el-col>
+							<el-col :span="12" class="numBlock">
+								<dv-border-box-12>
+									<div class="numBlock_title">今日完成工序</div>
+									<div class="numBlock_value">123</div>
+								</dv-border-box-12>
+							</el-col>
+						</el-row>
+						<div style="height: 34vh;position: relative;">
+							<dv-border-box-1>
+								<div class="chartBlockTitle">车间各工段生产产品数</div>
+								<dv-capsule-chart :config="config_left1" class="leftChartBlock1"/>
+							</dv-border-box-1>
+						</div>
+						<div style="height: 34vh;">
+							<dv-border-box-1>
+								<div class="chartBlockTitle">产品占比</div>
+								<dv-active-ring-chart :config="config_left2" class="leftChartBlock2"/>
+							</dv-border-box-1>
+						</div>
+					</div>
+				</el-col>
+				<el-col :span="12">
+					<div class="middleBlock">
+						<div style="height: 38vh;">
+							<dv-border-box-1>
+								<div class="chartBlockTitle">车间工段任务展示</div>
+								<dv-scroll-board :config="config_middle_top" class="middleTableBlock1"/>
+							</dv-border-box-1>
+						</div>
+						<div style="height: 41vh;">
+							<dv-border-box-1>
+								<div class="chartBlockTitle">设备列表</div>
+								<dv-scroll-board :config="config_middle_bottom" class="middleTableBlock2"/>
+							</dv-border-box-1>
+						</div>
+					</div>
+				</el-col>
+				<el-col :span="6">
+					<div class="rightBlock">
+						<el-row style="margin-bottom: 1vh;">
+							<el-col :span="12" class="numBlock">
+								<dv-border-box-12>
+									<div class="numBlock_title">在制工单数</div>
+									<div class="numBlock_value">123</div>
+								</dv-border-box-12>
+							</el-col>
+							<el-col :span="12" class="numBlock">
+								<dv-border-box-12>
+									<div class="numBlock_title">本月交付数</div>
+									<div class="numBlock_value">123</div>
+								</dv-border-box-12>
+							</el-col>
+						</el-row>
+						<div style="height: 34vh;">
+							<dv-border-box-1>
+								<div class="chartBlockTitle">每个人日产量</div>
+								<dv-scroll-board :config="config_right_top" style="height: 27.5vh;width: 90%;left: 5%;"/>
+							</dv-border-box-1>
+						</div>
+						<div style="height: 34vh;">
+							<dv-border-box-1>
+								<div class="chartBlockTitle">车间整体产品统计</div>
+								<scEcharts :option="chartOption2" style="height: 27.5vh;width: 90%;left: 5%;"/>
+							</dv-border-box-1>
+						</div>
+					</div>
+				</el-col>
+			</el-row>
+		</el-main>
+	</el-container>
+</template> -->
+
+<!-- <script>
+import * as echarts from "echarts";
+import { runningStateEnum } from "@/utils/enum.js";
+import scScrollTavle from "@/components/scScrollTable.vue";
+import { name } from "babylonjs-gui";
+function deepCopy(obj) {
+	return JSON.parse(JSON.stringify(obj));
+}
+const myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
+export default {
+	components: { scScrollTavle },
+	data() {
+		return {
+      		runningStateEnum,
+			basicOption: {
+				backgroundColor: "",
+				tooltip: {
+					trigger: "axis",
+				},
+				legend: {
+					icon: "stack",
+					right: 0,
+				},
+				grid: {
+					left: "3%",
+					right: "2%",
+					bottom: "3%",
+					containLabel: true,
+				},
+				xAxis: {
+					type: "category",
+					boundaryGap: true,
+					data: [],
+					nameTextStyle: {
+						color: "#ffffff",
+					},
+					axisLabel: {
+						color: "#ffffff",
+					},
+				},
+				yAxis: {
+					name: "",
+					type: "value",
+					nameTextStyle: {
+						color: "#ffffff",
+					},
+					axisLabel: {
+						color: "#ffffff",
+					},
+				},
+				series: [
+					{
+						name: "",
+						type: "bar",
+						barWidth: 30,
+						label: {
+							show: true,
+							position: "top",
+							color: "#fff",
+						},
+						itemStyle: {
+							borderRadius: [5, 5, 0, 0],
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+								{offset: 0,color: "#00aaff"},
+								{offset: 1,color: "#0033ff"},
+							]),
+						},
+						data: [1,2,3,4,5,6,7],
+					},
+				],
+			},
+			chartOption1:{
+				 color: ['#2f89cf'],
+				tooltip: {
+					trigger: 'axis', 
+					axisPointer: { 
+						type: 'shadow'
+					}
+				},
+				grid: {
+					left: "0%",
+					top: "10px",
+					right: "0%", 
+					bottom: "4%", 
+					containLabel: true 
+				},
+				xAxis: {
+						type: 'category',
+						data: [], // 类目数据
+						axisTick: {
+							alignWithLabel: true // 刻度线与标签对齐
+						},
+						axisLabel: {
+							color: "rgb(255,255,255)",
+							fontSize: "8", 
+						},
+						axisLine: {
+							show: false
+						}
+					},
+				yAxis: {
+					type: 'value', 
+					axisLabel: {
+					color: "rgba(255,255,255,.6)",
+					fontSize: "12"
+					},
+				},
+				// 系列配置
+				series: {
+					name: 'Direct',
+					type: 'bar', 
+					barWidth: '15',
+					data: [],
+					itemStyle: {
+						barBorderRadius: 5 
+					}
+				}
+			},
+			chartOption2: {
+				grid: {
+					top: "10%", 
+					left: "10%",
+					bottom: "5%",
+					containLabel: true 
+				},
+				xAxis: {
+					// show: false 
+					splitLine: {
+					    show:false
+					},
+				},
+				// Y 轴配置，包含两个 Y 轴，一个用于显示类目，一个用于显示数值
+				yAxis: [
+				{
+					axisLine: {
+						show: false 
+					},
+					axisTick: {
+						show: false 
+					},
+					axisLabel: {
+						color: "#fff" 
+					},
+					splitLine: {
+					    show:false
+					},
+					type: 'category', 
+					inverse: true, // 反转坐标轴
+					data: [] 
+				},
+				{
+					show: false, 
+					axisLine: {
+						show: false 
+					},
+					axisTick: {
+						show: false 
+					},
+					splitLine: {
+					    show:false
+					},
+					axisLabel: { 
+						textStyle: {
+							fontSize: 12,
+							color: "#fff" 
+						}
+					},
+					inverse: true, // 反转坐标轴
+					data: [], 
+				}
+				],
+				// 一个柱状图，一个边框
+				series: [
+					{
+						name: '柱状图',
+						type: 'bar', 
+						data: [], 
+						yAxisIndex: 0, 
+						barCategoryGap: 50, 
+						barWidth: 10,
+						label: {
+							show: true,
+							position: "right",
+							color: "#fff",
+						},
+						itemStyle: {
+							normal: {
+								barBorderRadius: 5,
+								color: function (params) { 
+									return myColor[params.dataIndex%5];
+								}
+							},
+							label: { 
+								normal: {
+									// show: true, 
+									position: "outside",
+									color: "#fff",
+									// formatter: "{a}"
+								}
+							}
+						},
+					},
+					{
+						name: "框", 
+						type: "bar", 
+						barCategoryGap: 50,
+						barWidth: 12,
+						itemStyle: { 
+							color: "none",
+							shadowColor: '#999', // 阴影颜色
+							shadowBlur: 3, // 阴影模糊
+							shadowOffsetX: 0, // 阴影水平偏移
+							shadowOffsetY: 0, // 阴影垂直偏移 
+							borderColor: "rgba(153,153,153,0.6)", // 边框颜色
+							borderWidth: 0.5, 
+							barBorderRadius: 5,
+							
+						},
+						yAxisIndex: 1, 
+						data: [] 
+					}
+				]
+			},
+			tableHeight: 100,
+			speed: 2000,
+			time: null,
+			deptId: "",
+			dayInterval: null,
+			chartInterval2: null,
+			state_: {
+				10: '完好',
+				20: '限用',
+				30: '在修',
+				40: '禁用',
+			},
+			configData:{
+				header:['物料名称','批次号','数量'],
+				headerBGC:'#0a3f44',
+				headerHeight:40,
+				align:'center',
+				data:[],
+				waitTime:1000,
+			},
+			configData1:{
+				headerBGC:'#0a3f44',
+				header:['产出名称','规格','型号','开始时间','结束时间','完成进度','产量','状态'],
+				headerHeight:40,
+				data:[]
+			},
+			config_left1:{
+				data:[
+					{name:'排一次棒',value:0},
+					{name:'排二次棒',value:0},
+					{name:'切丝',value:0},
+					{name:'排板',value:0},
+				],
+				showValue: true
+			} ,
+			config_left2:{
+				data:[],
+				digitalFlopStyle: {
+					fontSize: 16,
+					fill: '#fff'
+				}
+			},
+			config_middle_top:{
+				rowNum:10,
+				headerBGC: 'rgba(47,102,107,.34)',
+				oddRowBGC: 'rgba(0,0,0,0)',
+				evenRowBGC: 'rgba(0,0,0,0)',
+			    header: ['任务编号', '产出产品', '任务量', '合格数'],
+				data: []
+			},
+			config_middle_bottom:{
+				rowNum:10,
+				headerBGC: 'rgba(0,0,0,0)',
+				oddRowBGC: 'rgba(0,0,0,0)',
+				evenRowBGC: 'rgba(0,0,0,0)',
+				header: ['设备名称','设备位号','设备状态','运行状态','所在工段'],
+				data: []
+			},
+			config_right_top:{
+				rowNum:10,
+				headerBGC: 'rgba(47,102,107,.34)',
+				oddRowBGC: 'rgba(0,0,0,0)',
+				evenRowBGC: 'rgba(0,0,0,0)',
+				header: ['工段','姓名','生产数','合格数','不合格数'],
+				data: []
+			},
+			currentTime: "",
+			currentDay: "",
+			today: "",
+			end_time:'',
+			start_time:'',
+			mgroups:['排一次棒','排二次棒','切丝','排板'],
+		};
+	},
+	mounted() {
+		let that = this;
+		//排棒、切丝、排板 ：排一次棒、排二次棒、切丝、排板
+		this.showTime();
+		this.dayInterval = setInterval(() => {
+			this.showTime();
+		}, 1000);
+		that.mgroupsforEach();
+		that.getMgroups();
+		//每个人日生产量：个人绩效
+		// that.getEveryoneCount(that.deptName1);
+		// that.getEveryoneCount(that.deptName2);
+		// that.getEveryoneCount(that.deptName3);
+		that.materialAll();
+	},
+	methods: {
+		getMondayOfCurrentWeek() {
+			let today = new Date();
+			let days = [];
+			for (let i = 6; i >= 0; i--) {
+				let date = new Date(today);
+				date.setDate(today.getDate() - i);
+				days.push(date.toISOString().split('T')[0]); // 格式化为 YYYY-MM-DD
+			}
+			return days;
+		},
+		//时间
+		showTime() {
+			this.currentTime = this.$TOOL.dateFormat(new Date(), "hh:mm:ss");
+			this.currentDay = this.$TOOL.dateFormat(
+				new Date(),
+				"yyyy年MM月dd日"
+			);
+		},
+		setChart(name, option = null) {
+			var myChart = echarts.getInstanceByDom(document.getElementById(name));
+			if (myChart == undefined) {
+				myChart = echarts.init(document.getElementById(name), "dark", {
+					renderer: "svg",
+				});
+			}
+			if (option == null) {
+				option = Object.assign({}, this.basicOption);
+			}
+			setTimeout(() => {
+				try {
+					myChart.setOption(option);
+				} catch (error) {}
+			}, 500);
+			return myChart;
+		},
+		getMgroups(){
+			let that = this;
+			let params = {page: 0,query:" { id, name }"};
+			that.$API.mtm.mgroup.list.req(params).then((res) => {
+				res.forEach((item)=>{
+					let index = that.mgroups.indexOf(item.name);
+				    if(index>-1){
+						that.getmgroupMaterial(item.id,item.name,index);
+					}
+				})
+			})
+		},
+		mgroupsforEach(){
+			let that = this;
+			that.mgroups.forEach((item)=>{
+				 that.getEquipment(item);
+				 that.getMtask1(item);
+			})
+		},
+		//任务进度
+		getMtask1(name) {
+			let that = this;
+			let params = {
+				state: 20,mgroup__name: name,page:0,
+				query: " { id, material_out_name, number, count, count_ok }"
+			};
+			that.config_middle_top.data = [];
+			that.$API.pm.mtask.list.req(params).then((res) => {
+				if(res.length>0){
+					res.forEach((item) => {
+						let arr = [];
+						arr[0] = item.number;
+						arr[1] = item.material_out_name;
+						arr[2] = item.count;
+						arr[3] = item.count_ok;
+						// arr[4] = item.count_ok/item.count*100+'%';
+						that.config_middle_top.data.push(arr);
+					})
+				}
+			});
+		},
+		//库存统计列表
+		getmgroupMaterial(id,name,index) {
+			let that = this;
+			let params = { tag: 'done',page:0,mgroup: id };
+			that.$API.wpm.wmaterial.list.req(params).then((res) => {
+				let count = 0;
+				res.forEach((item) => {
+				    count += Number(item.count);
+				})
+				that.config_left1.data[index].value = count;
+			})
+		},
+		//车间设备列表
+		getEquipment(name) {
+			let that = this;
+			let params = {page: 0, mgroup__name:name,
+				// query: " { id, name, number, model, state ,mgroup_name }"
+			};
+			that.config_middle_bottom.data = [];
+			that.$API.em.equipment.list.req(params).then((res) => {
+			    if(res.length>0){
+					res.forEach((item) => {
+						let arr = [];
+					    let state_ = that.state_[item.state];
+						let running_state_ = runningStateEnum[item.running_state]?.text;
+						arr[0] = item.name;
+						arr[1] = item.number;
+						arr[2] = state_;
+						arr[3] = running_state_;
+						arr[4] = item.mgroup_name;
+						that.config_middle_bottom.data.push(arr);
+					})
+				}
+			})
+		},
+		//每个人日产量
+		getEveryoneCount(deptName){
+			let that = this;
+			that.config_right_top.data = [];
+			let date = that.$TOOL.dateFormat(new Date(), "yyyy-MM-dd");
+			let params = {
+				// query: {start_date:date,end_date:date,dept_name:that.deptName},
+				query: {start_date:'2025-05-04',end_date:'2025-05-04',dept_name:deptName},
+			};
+			this.$API.bi.dataset.exec.req("performance", params).then((res) => {
+				if(res.data2.ds0.length>0){
+					res.data2.ds0.forEach((item)=>{
+						let arr = [];
+						arr[0] = item.工段;
+						arr[1] = item.操作人;
+						arr[2] = item.生产数;
+						arr[3] = item.合格数;
+						arr[4] = item.不合格数;
+						that.config_right_top.data.push(arr);
+					})
+				}
+			});
+		},
+		//车间整体产品统计
+		materialAll(){
+			let that = this;
+			let obj = {};
+			that.$API.bi.dataset.exec.req("materialCount", obj).then((res) => {
+				if (res.data2.ds0&&res.data2.ds0.length>0) {
+					let arrs = res.data2.ds0;
+					let list = arrs.filter((item) => {
+						return item.dept_name == that.deptName1||item.dept_name == that.deptName2||item.dept_name == that.deptName3;
+					});
+					let namelist = [],valuelist = [],values=[];
+					if(list.length>0){
+						list.forEach((item) => {
+							let index = namelist.indexOf(item.material_name);
+							if(index==-1){
+								namelist.push(item.material_name);
+								valuelist.push(item.count);
+								values.push(item.count);
+							}
+						})
+					}
+					let maxNum = valuelist.sort((a, b) => b - a)[0]+2;
+					let arr = [];
+					valuelist.forEach((item)=>{
+					    arr.push(maxNum)
+					})
+					that.chartOption2.yAxis[0].data = namelist;
+					that.chartOption2.yAxis[1].data = valuelist;
+					that.chartOption2.series[0].data = valuelist;
+					that.chartOption2.series[1].data = arr;
+
+					namelist.forEach((item,index)=>{
+						let obj = {};
+						obj.name = item;
+						obj.value = valuelist[index];
+						that.config_left2.data.push(obj);
+					})
+				}
+			});
+		},
+	},
+};
+</script>
+<style scoped>
+@font-face {
+	font-family: "myfont";
+	/* 字体名称 */
+	src: url("../../../utils/youShe.ttf");
+	/* 字体文件相对路径 */
+}
+
+.dashboard {
+	background-image: url("/public/img/photon_bg.png");
+	color: #fff;
+	font-family: "Microsoft Yahei" !important;
+	background-size: cover;
+}
+
+.header {
+	/* background: url("/public/img/head_bg.png"); */
+	background: url("/public/img/header_bgv.png");
+	border-bottom: none;
+	background-size: 100% 100%;
+	display: block;
+	height: 8vh;
+	color: rgb(149, 255, 255);
+	font-family: "Microsoft Yahei";
+	text-align: center;
+	padding: 12px 0px;
+}
+.header > .title {
+	font-weight: bold;
+	font-family: "myfont";
+	font-size: 32px;
+	font-size:4vh;
+	letter-spacing: 10px;
+}
+.header > .timer {
+	font-size: 14px;
+	margin-top: 18px;
+	position: absolute;
+	top: 5px;
+	left: 20px;
+}
+.numBlock{
+	height: 10vh;
+}
+.numBlock_title{
+	height: 4vh;
+	width: 100%;
+	font-size: 1.5vh;
+	line-height: 4vh;
+	text-align: center;
+}
+.numBlock_value{
+	height:6vh;
+	width: 100%;
+	line-height: 5vh;
+	text-align: center;
+	font-size: 3vh;
+	font-family: "myfont";
+}
+.leftChartBlock1{
+	width: 90%;
+	height: 28vh;
+	z-index: 999;
+	left: 5%;
+	border-radius: 3vh;
+}
+.leftChartBlock2{
+	width:100%;
+	height: 28vh;
+}
+.middleTableBlock1{
+	width:94%;
+	height:31vh;
+	position: absolute;
+	left: 4%
+}
+.middleTableBlock2{
+	width:94%;
+	height:34vh;
+	position: absolute;
+	left: 4%
+}
+.chartBlockTitle{
+	width: 90%;
+	height: 5vh;
+	margin: auto;
+	line-height: 6vh;
+	border-radius: 10px;
+	text-align: left;
+	padding-left: 10px;
+	font-size: 1.6vh;
+    font-weight: 600;
+	border-bottom: 1px solid rgb(83 198 243);
+}
+</style> -->