From 390e05f999295d2d7408e1716a39d4ae70448c73 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Fri, 12 Jun 2026 15:23:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E8=BD=A6=E9=97=B4=E7=9C=8B=E6=9D=BF?=
 =?UTF-8?q?=E5=85=AC=E5=85=B1=E6=A8=A1=E6=9D=BF=E5=88=9D=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bigScreen/gxerp/index_com.vue | 894 ++++++++++++++++++++++++
 1 file changed, 894 insertions(+)
 create mode 100644 src/views/bigScreen/gxerp/index_com.vue

diff --git a/src/views/bigScreen/gxerp/index_com.vue b/src/views/bigScreen/gxerp/index_com.vue
new file mode 100644
index 00000000..7237e412
--- /dev/null
+++ b/src/views/bigScreen/gxerp/index_com.vue
@@ -0,0 +1,894 @@
+<template>
+	<el-container class="dashboard">
+		<!-- Header -->
+		<el-header class="dash-header">
+			<div class="dash-header-side dash-header-left">
+				<span class="header-tag">PHOTON · {{ mgroupName }}</span>
+				<span class="header-status"><i class="led-dot"></i>实时数据</span>
+			</div>
+			<div class="dash-header-center">
+				<div class="dash-title">{{ mgroupName }}工段生产数据看板</div>
+				<div class="dash-title-deco"><span></span><i></i><span></span></div>
+			</div>
+			<div class="dash-header-side dash-header-right">
+				<div class="dash-day">{{ currentDay }}</div>
+				<div class="dash-time">{{ currentTime }}</div>
+			</div>
+		</el-header>
+
+		<el-main class="dash-main">
+			<!-- KPI Cards -->
+			<div class="kpi-row">
+				<div class="kpi-card kpi-c1">
+					<div class="kpi-meta">
+						<div class="kpi-label">日投产量</div>
+						<div class="kpi-sub">DAILY INPUT</div>
+					</div>
+					<div class="kpi-value">{{ sctj.rtcs }}</div>
+					<div class="kpi-bar"></div>
+				</div>
+				<div class="kpi-card kpi-c2">
+					<div class="kpi-meta">
+						<div class="kpi-label">日加工数</div>
+						<div class="kpi-sub">PROCESSED</div>
+					</div>
+					<div class="kpi-value">{{ sctj.rjgs }}</div>
+					<div class="kpi-bar"></div>
+				</div>
+				<div class="kpi-card kpi-c3">
+					<div class="kpi-meta">
+						<div class="kpi-label">加工前不良</div>
+						<div class="kpi-sub">PRE-DEFECT</div>
+					</div>
+					<div class="kpi-value">{{ sctj.rjgqbls }}</div>
+					<div class="kpi-bar"></div>
+				</div>
+				<div class="kpi-card kpi-c4">
+					<div class="kpi-meta">
+						<div class="kpi-label">日合格数</div>
+						<div class="kpi-sub">QUALIFIED</div>
+					</div>
+					<div class="kpi-value">{{ sctj.rhgs }}</div>
+					<div class="kpi-bar"></div>
+				</div>
+				<div class="kpi-card kpi-c5">
+					<div class="kpi-meta">
+						<div class="kpi-label">日不合格数</div>
+						<div class="kpi-sub">REJECTED</div>
+					</div>
+					<div class="kpi-value">{{ sctj.rbhgs }}</div>
+					<div class="kpi-bar"></div>
+				</div>
+			</div>
+
+			<!-- Top row: 2 panels -->
+			<el-row :gutter="12" type="flex" class="row-top">
+				<el-col :span="12" class="col-full">
+					<div class="panel">
+						<div class="panel-head">
+							<span class="panel-title">设备状态</span>
+							<div class="panel-states">
+								<span class="state-chip s-run"><i></i>运行<em>{{ hh.yx }}</em></span>
+								<span class="state-chip s-idle"><i></i>未运行<em>{{ hh.wyx }}</em></span>
+								<span class="state-chip s-err"><i></i>故障<em>{{ hh.gz }}</em></span>
+							</div>
+						</div>
+						<div class="panel-body" id="scrollContainer">
+							<dv-scroll-board :config="configDataEq" class="board" />
+						</div>
+						<i class="corner tl"></i><i class="corner tr"></i>
+						<i class="corner bl"></i><i class="corner br"></i>
+					</div>
+				</el-col>
+				<el-col :span="12" class="col-full">
+					<div class="panel">
+						<div class="panel-head">
+							<span class="panel-title">昨日损耗分析</span>
+							<span class="panel-sub">LOSS ANALYSIS</span>
+						</div>
+						<div class="panel-body chart-body" id="chart2"></div>
+						<i class="corner tl"></i><i class="corner tr"></i>
+						<i class="corner bl"></i><i class="corner br"></i>
+					</div>
+				</el-col>
+			</el-row>
+
+			<!-- Bottom row: 2 panels -->
+			<el-row :gutter="12" type="flex" class="row-bottom">
+				<el-col :span="12" class="col-full">
+					<div class="panel">
+						<div class="panel-head">
+							<span class="panel-title">生产统计</span>
+							<span class="panel-sub">DAILY STATISTICS</span>
+						</div>
+						<div class="panel-body">
+							<dv-scroll-board :config="configDatas" class="board" />
+						</div>
+						<i class="corner tl"></i><i class="corner tr"></i>
+						<i class="corner bl"></i><i class="corner br"></i>
+					</div>
+				</el-col>
+				<el-col :span="12" class="col-full">
+					<div class="panel">
+						<div class="panel-head">
+							<span class="panel-title">车间库存</span>
+							<span class="panel-sub">INVENTORY</span>
+						</div>
+						<div class="panel-body">
+							<dv-scroll-board :config="configDataInm" class="board" />
+						</div>
+						<i class="corner tl"></i><i class="corner tr"></i>
+						<i class="corner bl"></i><i class="corner br"></i>
+					</div>
+				</el-col>
+			</el-row>
+		</el-main>
+	</el-container>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import scScrollTavle from "@/components/scScrollTable.vue";
+function deepCopy(obj) {
+	return JSON.parse(JSON.stringify(obj));
+}
+export default {
+	components: { scScrollTavle },
+	data() {
+		return {
+			pieOption: {
+				backgroundColor: "",
+				tooltip: { trigger: 'item' },
+				legend: {
+					icon: "stack",
+					right: 10,
+					orient: 'vertical',
+					itemWidth: 10,
+					itemHeight: 10,
+					textStyle: { color: '#c8f2ff', fontSize: 11 },
+				},
+				series: {
+					name: '不合格占比',
+					type: 'pie',
+					radius: ['35%', '65%'],
+					center: ['38%', '52%'],
+					itemStyle: {
+						borderColor: 'rgba(3, 22, 26, 0.8)',
+						borderWidth: 2,
+					},
+					label: { show: false },
+					labelLine: { show: false },
+					data: []
+				}
+			},
+			tableHeight: 100,
+			speed: 2000,
+			time: null,
+			hh: {
+				yx: 0,
+				wyx: 0,
+				gz: 0,
+			},
+			sctj: {
+				rtcs: 0,
+				rjgs: 0,
+				rjgqbls: 0,
+				rhgs: 0,
+				rbhgs: 0,
+			},
+			dayInterval: null,
+			chartInterval2: null,
+			//库存
+			configDataInm: {
+				header: ['物料名称', '批次号', '数量', '生产中'],
+				headerBGC: 'rgba(0, 229, 255, 0.16)',
+				oddRowBGC: 'rgba(0, 229, 255, 0.04)',
+				evenRowBGC: 'rgba(0, 229, 255, 0.10)',
+				headerHeight: 38,
+				rowNum: 8,
+				align: 'center',
+				data: [],
+				waitTime: 1500,
+			},
+			//设备
+			configDataEq: {
+				headerBGC: 'rgba(0, 229, 255, 0.16)',
+				oddRowBGC: 'rgba(0, 229, 255, 0.04)',
+				evenRowBGC: 'rgba(0, 229, 255, 0.10)',
+				header: ['设备名称', '设备编号', '设备状态', '物料数量'],
+				headerHeight: 38,
+				rowNum: 8,
+				align: 'center',
+				data: []
+			},
+			//生产统计
+			configDatas: {
+				headerBGC: 'rgba(0, 229, 255, 0.16)',
+				oddRowBGC: 'rgba(0, 229, 255, 0.04)',
+				evenRowBGC: 'rgba(0, 229, 255, 0.10)',
+				header: ['日期', '加工数', '合格数', '不合格数'],
+				headerHeight: 38,
+				rowNum: 7,
+				align: 'center',
+				data: []
+			},
+			page: 1,
+			currentTime: "",
+			currentDay: "",
+			mgroupName: "",
+			mgroupId: "",
+			today: "",
+			end_time: '',
+			start_time: '',
+			daysList: [],
+		};
+	},
+	mounted() {
+		let that = this;
+		let arr = this.$route.path.split("/");
+		that.mgroup_code = arr[2];
+		that.page = 1;
+		that.getMgroups(this.mgroup_code);
+		that.configDataInm.data = [];
+		//表格table的高度
+		this.tableHeight = document.getElementById("scrollContainer").clientHeight;
+		this.showTime();
+		this.dayInterval = setInterval(() => {
+			this.showTime();
+		}, 1000);
+		//近七天的日期数组
+		let daysArr = this.getMondayOfCurrentWeek();
+		this.daysArr = daysArr;
+		let xAxisData = [];
+		daysArr.forEach((item) => {
+			let dates = item.split('-');
+			let obj = dates[1] + '-' + dates[2];
+			xAxisData.push(obj);
+			let dayitem = Number(dates[2]);
+			that.daysList.push(dayitem);
+		})
+		that.today = new Date().toISOString().split('T')[0];
+		that.yesterday = new Date(new Date().getTime() - 24 * 60 * 60 * 1000).toISOString().split('T')[0];
+		this.xAxisData = xAxisData;
+		let startDate = new Date(daysArr[0]).getTime() - (1000 * 60 * 60 * 24);
+		let endDate = new Date(daysArr[6]).getTime() + (1000 * 60 * 60 * 24);
+		let start_time = this.$TOOL.dateFormat(new Date(startDate), "yyyy-MM-dd");
+		let end_time = this.$TOOL.dateFormat(new Date(endDate), "yyyy-MM-dd");
+		this.start_time = start_time;
+		this.end_time = end_time;
+	},
+	beforeDestroy() {
+		if (this.dayInterval) clearInterval(this.dayInterval);
+		if (this.chartInterval2) clearInterval(this.chartInterval2);
+	},
+	methods: {
+		getMgroups(code){
+			let that = this;
+			that.$API.mtm.mgroup.list.req({page:0,code}).then((res) => {
+				that.mgroupName = res[0].name;
+				that.mgroupId = res[0].id;
+				this.$nextTick(() => {
+					that.getEqState(that.mgroupId);
+					this.getMaterials(that.page);
+					this.getProductLine();
+					this.getCountnotok();
+				})
+			});
+		},
+		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]);
+			}
+			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) {
+			let dom = document.getElementById(name);
+			if (!dom) return null;
+			var myChart = echarts.getInstanceByDom(dom);
+			if (myChart == undefined) {
+				myChart = echarts.init(dom, "dark", {
+					renderer: "svg",
+				});
+			}
+			if (option == null) {
+				option = Object.assign({}, this.barOption);
+			}
+			setTimeout(() => {
+				try {
+					myChart.setOption(option);
+				} catch (error) { }
+			}, 500);
+			return myChart;
+		},
+		//生产统计
+		getProductLine() {
+			let that = this;
+			let obj = {
+				query: { start_date: that.start_time, end_date: that.end_time, mgroup_name: that.mgroupName },
+			};
+			that.$API.bi.dataset.exec.req("lineDay", obj).then((res) => {
+				let list = res.data2.ds0;
+				if (list.length > 0) {
+					list.forEach((item) => {
+						let dateNow = new Date().getDate();
+						if (item.日 == dateNow) {
+							that.sctj.rtcs = item.总重量;
+							that.sctj.rjgs = item.生产数;
+							that.sctj.rjgqbls = item.生产数 - item.不合格数 - item.合格数;
+							that.sctj.rhgs = item.合格数;
+							that.sctj.rbhgs = item.不合格数;
+						}
+						let arr = [];
+						arr[0] = item.年 + '-' + item.月 + '-' + item.日;
+						arr[1] = item.生产数;
+						arr[2] = item.合格数;
+						arr[3] = item.不合格数;
+						that.configDatas.data.push(arr);
+					});
+				}
+			});
+		},
+		//不合格分布
+		getCountnotok() {
+			let that = this;
+			let obj = { 
+				query: { start_date: that.yesterday, end_date: that.yesterday,mgroup_name:that.mgroupName } 
+			};
+			that.$API.bi.dataset.exec.req('notok_dis', obj).then((res) => {
+				let seriesData = [];
+				if (res.data2.ds0) {
+					res.data2.ds0.forEach((item) => {
+						let obj = {};
+						obj.name = item.不合格项;
+						obj.value = item.数量;
+						seriesData.push(obj);
+					})
+				}
+				that.pieOption.series.data = seriesData;
+				let index2 = 0;
+				let chart2 = this.setChart("chart2", that.pieOption);
+				if (!chart2) return;
+				this.chartInterval2 = setInterval(function () {
+					if (index2 < seriesData.length) {
+						chart2.dispatchAction({ type: "downplay", seriesIndex: 0 });
+						chart2.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: index2 });
+						chart2.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: index2 });
+						index2++;
+					} else {
+						index2 = 0;
+					}
+				}, 3000);
+			})
+		},
+		//设备状态
+		getEqState(id) {
+			let that = this;
+			that.$API.wpm.ana.equipLastMlog.req({ mgroup: id }).then((res) => {
+				that.hh.yx += res.运行;
+				that.hh.wyx += res.未运行;
+				that.hh.gz += res.故障;
+				if (res.rows.length > 0) {
+					res.rows.forEach((item) => {
+						let arr = [];
+						arr[0] = item.name;
+						arr[1] = item.number;
+						if (item.mstate == '运行') {
+							arr[2] = '<span style="color:#00e5ff">● 运行中</span>';
+						} else if (item.mstate == '未运行') {
+							arr[2] = '<span style="color:#45b076">● 未运行</span>';
+						} else if (item.mstate == '故障') {
+							arr[2] = '<span style="color:#de3c36">● 故障</span>';
+						}
+						arr[3] = item.t_count_use ? item.t_count_use : 0;
+						that.configDataEq.data.push(arr);
+					});
+				}
+			});
+		},
+		//库存统计列表
+		getMaterials(page) {
+			let that = this;
+			let query = '{ material_name, batch, count, count_working }';
+			that.$API.wpm.wmaterial.list.req({ page: page, page_size: 500, mgroup: that.mgroupId, query: query }).then((res) => {
+				if (res.results.length > 0) {
+					res.results.forEach((item) => {
+						let arr = [];
+						arr[0] = item.material_name;
+						arr[1] = item.batch;
+						arr[2] = item.count;
+						arr[3] = item.count_working;
+						that.configDataInm.data.push(arr);
+					})
+				}
+			})
+		},
+	},
+};
+</script>
+
+<style scoped>
+@font-face {
+	font-family: "myfont";
+	src: url("../../../utils/youShe.ttf");
+}
+
+.dashboard,
+.dashboard * {
+	box-sizing: border-box;
+}
+
+.dashboard {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+	background: #00181c url("/public/img/photon_bg.png") center / cover no-repeat;
+	color: #fff;
+	font-family: "Microsoft Yahei" !important;
+}
+
+.dashboard::before {
+	content: "";
+	position: absolute;
+	inset: 0;
+	background:
+		radial-gradient(ellipse at 20% 0%, rgba(0, 229, 255, 0.10), transparent 55%),
+		radial-gradient(ellipse at 80% 100%, rgba(0, 122, 153, 0.18), transparent 55%);
+	pointer-events: none;
+	z-index: 0;
+}
+
+/* ============= Header ============= */
+.dash-header {
+	position: relative;
+	z-index: 1;
+	flex: 0 0 72px !important;
+	height: 72px !important;
+	padding: 0 24px !important;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background: url("/public/img/photon_header.png") center / 100% 100% no-repeat;
+}
+
+.dash-header-side {
+	flex: 0 0 280px;
+	display: flex;
+	align-items: center;
+	gap: 14px;
+}
+
+.dash-header-right {
+	justify-content: flex-end;
+}
+
+.dash-header-center {
+	flex: 1;
+	text-align: center;
+}
+
+.dash-title {
+	font-family: "myfont", "Microsoft Yahei";
+	font-size: 30px;
+	font-weight: bold;
+	letter-spacing: 8px;
+	background: linear-gradient(180deg, #ffffff 0%, #b9fbff 55%, #00d4ff 100%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	text-shadow: 0 0 22px rgba(0, 212, 255, 0.45);
+	line-height: 1;
+}
+
+.dash-title-deco {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 10px;
+	margin-top: 6px;
+}
+
+.dash-title-deco span {
+	display: inline-block;
+	width: 90px;
+	height: 1px;
+	background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.7), transparent);
+}
+
+.dash-title-deco i {
+	display: inline-block;
+	width: 6px;
+	height: 6px;
+	background: #00e5ff;
+	transform: rotate(45deg);
+	box-shadow: 0 0 8px #00e5ff;
+}
+
+.header-tag {
+	font-size: 12px;
+	letter-spacing: 2px;
+	padding: 4px 10px;
+	border: 1px solid rgba(0, 229, 255, 0.45);
+	color: #95ffff;
+	background: rgba(0, 229, 255, 0.06);
+	font-weight: bold;
+}
+
+.header-status {
+	font-size: 13px;
+	color: #95ffff;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.led-dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: #18f1a4;
+	box-shadow: 0 0 8px #18f1a4;
+	animation: led-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes led-pulse {
+
+	0%,
+	100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.35;
+	}
+}
+
+.dash-day {
+	font-size: 14px;
+	color: #c8f2ff;
+	letter-spacing: 1px;
+}
+
+.dash-time {
+	font-family: "myfont", "Microsoft Yahei";
+	font-size: 22px;
+	color: #fff;
+	letter-spacing: 3px;
+	text-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
+}
+
+/* ============= Main ============= */
+.dash-main {
+	position: relative;
+	z-index: 1;
+	flex: 1 1 0 !important;
+	min-height: 0;
+	padding: 10px !important;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	overflow: hidden;
+}
+
+/* ============= KPI Strip ============= */
+.kpi-row {
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	gap: 10px;
+	flex: 0 0 92px;
+	min-height: 0;
+}
+
+.kpi-card {
+	position: relative;
+	padding: 10px 16px;
+	background: linear-gradient(135deg, rgba(0, 60, 80, 0.55) 0%, rgba(3, 22, 26, 0.7) 100%);
+	border: 1px solid rgba(0, 229, 255, 0.22);
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	overflow: hidden;
+}
+
+.kpi-card::before {
+	content: "";
+	position: absolute;
+	inset: 0;
+	background: radial-gradient(circle at 100% 0%, rgba(0, 229, 255, 0.16), transparent 60%);
+	pointer-events: none;
+}
+
+.kpi-card::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 3px;
+	height: 100%;
+	background: #00e5ff;
+	box-shadow: 0 0 10px #00e5ff;
+}
+
+.kpi-meta {
+	z-index: 1;
+}
+
+.kpi-label {
+	font-size: 15px;
+	letter-spacing: 2px;
+	color: #d8f6ff;
+	font-weight: 500;
+}
+
+.kpi-sub {
+	font-size: 10px;
+	letter-spacing: 2px;
+	color: rgba(149, 255, 255, 0.45);
+	margin-top: 4px;
+}
+
+.kpi-value {
+	font-family: "myfont", "Microsoft Yahei";
+	font-size: 34px;
+	font-weight: bold;
+	letter-spacing: 1px;
+	z-index: 1;
+	line-height: 1;
+}
+
+.kpi-bar {
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	height: 2px;
+	width: 100%;
+}
+
+.kpi-c1 .kpi-value {
+	color: #95ffff;
+	text-shadow: 0 0 14px rgba(0, 229, 255, 0.55);
+}
+
+.kpi-c1::after {
+	background: #00e5ff;
+	box-shadow: 0 0 10px #00e5ff;
+}
+
+.kpi-c1 .kpi-bar {
+	background: linear-gradient(90deg, #00e5ff, transparent);
+}
+
+.kpi-c2 .kpi-value {
+	color: #c5ff7a;
+	text-shadow: 0 0 14px rgba(170, 255, 102, 0.55);
+}
+
+.kpi-c2::after {
+	background: #aaff66;
+	box-shadow: 0 0 10px #aaff66;
+}
+
+.kpi-c2 .kpi-bar {
+	background: linear-gradient(90deg, #aaff66, transparent);
+}
+
+.kpi-c3 .kpi-value {
+	color: #ffd87a;
+	text-shadow: 0 0 14px rgba(255, 200, 80, 0.55);
+}
+
+.kpi-c3::after {
+	background: #ffb74d;
+	box-shadow: 0 0 10px #ffb74d;
+}
+
+.kpi-c3 .kpi-bar {
+	background: linear-gradient(90deg, #ffb74d, transparent);
+}
+
+.kpi-c4 .kpi-value {
+	color: #7af0a8;
+	text-shadow: 0 0 14px rgba(45, 210, 140, 0.55);
+}
+
+.kpi-c4::after {
+	background: #2dd28c;
+	box-shadow: 0 0 10px #2dd28c;
+}
+
+.kpi-c4 .kpi-bar {
+	background: linear-gradient(90deg, #2dd28c, transparent);
+}
+
+.kpi-c5 .kpi-value {
+	color: #ff8a8a;
+	text-shadow: 0 0 14px rgba(255, 107, 107, 0.55);
+}
+
+.kpi-c5::after {
+	background: #ff6b6b;
+	box-shadow: 0 0 10px #ff6b6b;
+}
+
+.kpi-c5 .kpi-bar {
+	background: linear-gradient(90deg, #ff6b6b, transparent);
+}
+
+/* ============= Content Rows ============= */
+.row-top,
+.row-bottom {
+	display: flex;
+	min-height: 0;
+	margin: 0 !important;
+}
+
+.row-top {
+	flex: 1.15 1 0;
+}
+
+.row-bottom {
+	flex: 1 1 0;
+}
+
+.col-full {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+/* ============= Panel ============= */
+.panel {
+	position: relative;
+	height: 100%;
+	background: linear-gradient(180deg, rgba(10, 63, 68, 0.45) 0%, rgba(3, 22, 26, 0.65) 100%);
+	border: 1px solid rgba(0, 229, 255, 0.18);
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.panel-head {
+	position: relative;
+	height: 36px;
+	flex: 0 0 36px;
+	padding: 0 12px;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	background: linear-gradient(90deg, rgba(0, 229, 255, 0.16) 0%, rgba(0, 229, 255, 0.02) 60%, rgba(0, 229, 255, 0.08) 100%);
+	border-bottom: 1px solid rgba(0, 229, 255, 0.18);
+}
+
+.panel-head::before {
+	content: "";
+	width: 4px;
+	height: 16px;
+	background: linear-gradient(180deg, #00e5ff, #007a99);
+	box-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
+}
+
+.panel-title {
+	font-size: 16px;
+	font-weight: 600;
+	color: #fff;
+	letter-spacing: 2px;
+}
+
+.panel-sub {
+	font-size: 11px;
+	letter-spacing: 2px;
+	color: rgba(149, 255, 255, 0.5);
+	font-weight: 300;
+}
+
+.panel-states {
+	margin-left: auto;
+	display: flex;
+	gap: 6px;
+}
+
+.state-chip {
+	font-size: 12px;
+	padding: 2px 8px;
+	display: flex;
+	align-items: center;
+	gap: 5px;
+	background: rgba(255, 255, 255, 0.04);
+	border: 1px solid rgba(255, 255, 255, 0.08);
+	color: #d8f6ff;
+}
+
+.state-chip i {
+	width: 7px;
+	height: 7px;
+	border-radius: 50%;
+	display: inline-block;
+}
+
+.state-chip em {
+	font-style: normal;
+	font-weight: bold;
+	color: #fff;
+	margin-left: 3px;
+}
+
+.s-run i {
+	background: #00a3f5;
+	box-shadow: 0 0 6px #00a3f5;
+}
+
+.s-idle i {
+	background: #45b076;
+	box-shadow: 0 0 6px #45b076;
+}
+
+.s-err i {
+	background: #de3c36;
+	box-shadow: 0 0 6px #de3c36;
+}
+
+.panel-body {
+	flex: 1 1 0;
+	min-height: 0;
+	padding: 8px;
+	position: relative;
+	overflow: hidden;
+}
+
+.chart-body {
+	padding: 4px;
+}
+
+.board {
+	width: 100%;
+	height: 100%;
+}
+
+/* ============= Corner brackets ============= */
+.corner {
+	position: absolute;
+	width: 12px;
+	height: 12px;
+	border-color: #00e5ff;
+	border-style: solid;
+	pointer-events: none;
+	z-index: 2;
+}
+
+.corner.tl {
+	top: -1px;
+	left: -1px;
+	border-width: 2px 0 0 2px;
+}
+
+.corner.tr {
+	top: -1px;
+	right: -1px;
+	border-width: 2px 2px 0 0;
+}
+
+.corner.bl {
+	bottom: -1px;
+	left: -1px;
+	border-width: 0 0 2px 2px;
+}
+
+.corner.br {
+	bottom: -1px;
+	right: -1px;
+	border-width: 0 2px 2px 0;
+}
+</style>