From 931c45da112caf2b2cd61a5b901c0dc894e609ee Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Thu, 22 Jan 2026 15:53:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A6=85=E9=81=93296?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bigScreen/tcerp/tcBigScreen.vue  | 1068 ++++++++++++++++++++
 src/views/bigScreen/tcerp/tcBigScreen2.vue |   25 +
 2 files changed, 1093 insertions(+)
 create mode 100644 src/views/bigScreen/tcerp/tcBigScreen.vue
 create mode 100644 src/views/bigScreen/tcerp/tcBigScreen2.vue

diff --git a/src/views/bigScreen/tcerp/tcBigScreen.vue b/src/views/bigScreen/tcerp/tcBigScreen.vue
new file mode 100644
index 00000000..66835de4
--- /dev/null
+++ b/src/views/bigScreen/tcerp/tcBigScreen.vue
@@ -0,0 +1,1068 @@
+<template>
+	<div class="dashboard">
+			<!-- 头部区域 -->
+			<div class="header">
+				<div class="title">
+					<i class="fas fa-industry"></i> 车间大屏监控系统
+				</div>
+				<div class="time-date">
+					<div class="time" id="current-time">{{ currentTime }}</div>
+					<div class="date" id="current-date">{{ currentDate }}{{currentWeek}}</div>
+				</div>
+				<div class="update-indicator">
+					<span class="pulse"></span>
+					数据实时更新
+				</div>
+			</div>
+			
+			<!-- 监控视频区域 -->
+			<div class="card video-monitoring">
+				<div class="card-header">
+					<div class="card-title">
+						<i class="fas fa-video card-icon"></i>
+						车间实时监控
+					</div>
+					<div class="status-badge statusrunning">4个摄像头在线</div>
+				</div>
+				<div class="video-container">
+					<div class="video-feed" id="video-feed">
+						<div class="simulated-movement"></div>
+						<div class="video-overlay"></div>
+						<div class="video-camera-name" id="camera-name">{{ currentCameraName }}</div>
+						<div class="video-time" id="video-time">00:00:00</div>
+					</div>
+					<div class="camera-controls">
+						<button class="camera-btn" id="camera-prev" title="上一个摄像头">
+							<i class="fas fa-chevron-left"></i>
+						</button>
+						<button class="camera-btn" id="camera-play" title="播放/暂停">
+							<i class="fas fa-pause"></i>
+						</button>
+						<button class="camera-btn" id="camera-next" title="下一个摄像头">
+							<i class="fas fa-chevron-right"></i>
+						</button>
+					</div>
+				</div>
+				<div class="camera-list" id="camera-list">
+					<!-- 摄像头列表将通过JS动态生成 -->
+					 <div v-for="(item,index) in cameras" :key="item.id" :class="bindBtnClass('camera',item.active)" @click="switchCamera(index)">摄像头 {{ item.id }}</div>
+				</div>
+			</div>
+			
+			<!-- 设备状态信息 -->
+			<div class="card equipment-status">
+				<div class="card-header">
+					<div class="card-title">
+						<i class="fas fa-cogs card-icon"></i>
+						设备状态监控
+					</div>
+					<div class="status-badge statusrunning">运行正常</div>
+				</div>
+				<div class="equipment-list" id="equipment-list">
+					<div class="equipment-item" v-for="item in equipmentData" :key='item.id'>
+						<div class="equipment-icon">
+							<i class="fas fa-cut"></i>
+						</div>
+						<div class="equipment-info">
+							<h4>{{item.name}}</h4>
+							<p>设备编号: MACH-{{ String(item.id).padStart(3, '0') }}</p>
+						</div>
+						<div :class="bindBtnClass('equipment',item.status)">{{ item.statusText}}</div>
+					</div>
+				</div>
+			</div>
+			
+			<!-- 产品M9102生产合格统计表 -->
+			<div class="card production-stats">
+				<div class="card-header">
+					<div class="card-title">
+						<i class="fas fa-chart-line card-icon"></i>
+						产品M9102生产统计
+					</div>
+					<div class="status-badge statuswarning">今日合格率 98.2%</div>
+				</div>
+				<div class="stats-container">
+					<div class="stats-overview">
+						<div class="stat-box">
+							<div class="stat-label">生产总数</div>
+							<div class="stat-value" id="total-production">1,850</div>
+							<div class="stat-label">今日</div>
+						</div>
+						<div class="stat-box">
+							<div class="stat-label">合格数量</div>
+							<div class="stat-value" id="qualified-count">1,817</div>
+							<div class="stat-label">今日</div>
+						</div>
+						<div class="stat-box">
+							<div class="stat-label">不合格</div>
+							<div class="stat-value" id="unqualified-count">33</div>
+							<div class="stat-label">今日</div>
+						</div>
+					</div>
+					<div class="chart-container">
+						<div ref="lineChart" style="height: 20vh;"></div>
+					</div>
+				</div>
+			</div>
+			
+			<!-- 人员在岗信息 -->
+			<div class="card personnel-info">
+				<div class="card-header">
+					<div class="card-title">
+						<i class="fas fa-users card-icon"></i>
+						人员在岗信息
+					</div>
+					<div class="status-badge statusrunning">在岗: 24/30</div>
+				</div>
+				<div class="personnel-list" id="personnel-list">
+					<!-- 人员列表将通过JS动态生成 -->
+					<div class="personnel-item" v-for="item in personnelData" :key="item.id">
+						<div class="personnel-avatar">{{ item.name }}</div>
+						<div class="personnel-details">
+							<h4>{{item.name}}</h4>
+							<p>{{ item.position}} | {{ item.department }}</p>
+						</div>
+						<div class="personnel-status status-online"></div>
+					</div>
+				</div>
+			</div>
+			
+			<!-- 车间在制品统计 -->
+			<div class="card wip-stats">
+				<div class="card-header">
+					<div class="card-title">
+						<i class="fas fa-boxes card-icon"></i>
+						车间在制品统计
+					</div>
+					<div class="status-badge statuswarning">需优先处理: 5件</div>
+				</div>
+				<div class="wip-container">
+					<div class="wip-summary">
+						<div class="wip-total">
+							<div class="stat-label">在制品总数</div>
+							<div class="wip-total-value">{{wipTotal}}</div>
+							<div class="stat-label">当前车间</div>
+						</div>
+					</div>
+					<div class="wip-details" id="wip-details">
+						<div class="wip-item" v-for="item in wipData" :key="item.stage">
+							<div class="wip-item-title">{{item.stage}}</div>
+							<div class="wip-item-value" :style="{'color':item.color}">{{item.count}}</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+</template>
+<script>
+import * as echarts from "echarts";
+import scEcharts from '@/components/scEcharts';
+import config from "@/config";
+import "animate.css";
+import baseUrl from "@/config";
+
+export default {
+	components: {
+		scEcharts
+	},
+	data() {
+		return {
+			currentTime: "",
+			currentWeek: "",
+			currentDate:"",
+			currentCameraName:"主生产线 - 摄像头01",
+			productionChart:null,
+			wipTotal:0,
+			currentCameraIndex:0,
+			isVideoPlaying:true,
+			equipmentData :[
+				{ id: 1, name: "CNC数控机床", status: "running", statusText: "运行中", icon: "fas fa-cog" },
+				{ id: 2, name: "激光切割机", status: "running", statusText: "运行中", icon: "fas fa-cut" },
+				{ id: 3, name: "注塑机", status: "warning", statusText: "待维护", icon: "fas fa-industry" },
+				{ id: 4, name: "喷涂设备", status: "running", statusText: "运行中", icon: "fas fa-spray-can" },
+				{ id: 5, name: "装配机器人", status: "running", statusText: "运行中", icon: "fas fa-robot" },
+				{ id: 6, name: "质检仪器", status: "idle", statusText: "待机中", icon: "fas fa-search" }
+			],
+			cameras:[
+				{ id: 1, name: "主生产线 - 摄像头01", color: "#00b4ff", active: true },
+            	{ id: 2, name: "装配区 - 摄像头02", color: "#00c853", active: false },
+            	{ id: 3, name: "质检区 - 摄像头03", color: "#ffc107", active: false },
+            	{ id: 4, name: "仓储区 - 摄像头04", color: "#9c27b0", active: false }
+			],
+			personnelData:[
+				{ id: 1, name: "张明", position: "操作工", department: "加工车间", status: "online" },
+				{ id: 2, name: "李华", position: "技术员", department: "技术部", status: "online" },
+				{ id: 3, name: "王强", position: "质检员", department: "质检部", status: "online" },
+				{ id: 4, name: "刘芳", position: "班组长", department: "装配车间", status: "online" },
+				{ id: 5, name: "陈伟", position: "维修工", department: "设备部", status: "offline" },
+				{ id: 6, name: "赵静", position: "操作工", department: "加工车间", status: "online" }
+			],
+			wipData:[
+				{ stage: "原材料", count: 42, color: "#00b4ff" },
+				{ stage: "粗加工", count: 35, color: "#0080ff" },
+				{ stage: "精加工", count: 28, color: "#00c853" },
+				{ stage: "CNC", count: 31, color: "#ffc107" },
+				{ stage: "电加工线割", count: 12, color: "#ff9800" },
+				{ stage: "电加工穿孔", count: 8, color: "#9c27b0" }
+			],
+			statuses : ["running", "warning", "error", "idle"],
+			statusTexts : ["运行中", "待维护", "故障中", "待机中"],
+			productionData:[240, 260, 255, 280, 270, 265, 285],
+			qualifiedData : [235, 255, 250, 275, 265, 260, 280],
+			days : ['10/25', '10/26', '10/27', '10/28', '10/29', '10/30', '今日'],
+			dayArr:[],
+		};
+	},
+	mounted() {
+		let that = this;
+		that.showTime();
+		that.timerTime = setInterval(() => {
+			that.showTime();
+		}, 1000);
+		that.initProductionChart();
+		
+		// 每5秒更新一次数据
+		// setInterval(that.updateData(), 5000);
+		let dayArr = [];
+		let nowDate = new Date();
+		for(let i=6;i>-1;i--){
+			let date = new Date(nowDate.getTime()-i*24*60*60*1000);
+			let day = date.getDate();
+			dayArr.push(day);
+		}
+		that.dayArr = dayArr;
+		let total = that.wipData.reduce((sum, item) => sum + item.count, 0);
+		that.wipTotal = total;
+		console.log('that.wipTotal',that.wipTotal)
+		// 添加一些动画效果
+		let cards = document.querySelectorAll('.card');
+		cards.forEach((card, index) => {
+			card.style.opacity = '0';
+			card.style.transform = 'translateY(20px)';
+			
+			setTimeout(() => {
+				card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+				card.style.opacity = '1';
+				card.style.transform = 'translateY(0)';
+			}, index * 100);
+		});
+		document.getElementById('camera-prev').addEventListener('click', () => {
+            let newIndex = that.currentCameraIndex - 1;
+            if (newIndex < 0) newIndex = that.cameras.length - 1;
+            that.switchCamera(newIndex);
+        });
+        
+        document.getElementById('camera-next').addEventListener('click', () => {
+            let newIndex = that.currentCameraIndex + 1;
+            if (newIndex >= that.cameras.length) newIndex = 0;
+            that.switchCamera(newIndex);
+        });
+        
+        document.getElementById('camera-play').addEventListener('click', () => {
+            let playBtn = document.getElementById('camera-play');
+            let movementDot = document.querySelector('.simulated-movement');
+            
+            that.isVideoPlaying = !that.isVideoPlaying;
+            
+            if (that.isVideoPlaying) {
+                playBtn.innerHTML = '<i class="fas fa-pause"></i>';
+                movementDot.style.animationPlayState = 'running';
+            } else {
+                playBtn.innerHTML = '<i class="fas fa-play"></i>';
+                movementDot.style.animationPlayState = 'paused';
+            }
+        });
+		// 创建模拟视频背景
+		that.createVideoBackground();
+	},
+	methods: {
+		bindBtnClass(type,index) {
+			let classInfo = {};
+			if(type=='equipment'){
+				classInfo = { statusbadge: true,statusrunning: false,statuswarning:false,statuserror:false,statusidle:false };
+				if (index == 'running') {
+					classInfo.statusrunning = true;
+					classInfo.statuswarning = false;
+					classInfo.statusidle = false;
+					classInfo.statuserror = false;
+				}else if(index=='warning'){
+					classInfo.statuswarning = true;
+					classInfo.statusrunning = false;
+					classInfo.statusidle = false;
+					classInfo.statuserror = false;
+				}else if(index=='idle'){
+					classInfo.statusidle = true;
+					classInfo.statusrunning = false;
+					classInfo.statuswarning = false;
+					classInfo.statuserror = false;
+				}else if(index=='error'){
+					classInfo.statuserror = true;
+					classInfo.statusrunning = false;
+					classInfo.statuswarning = false;
+					classInfo.statusidle = false;
+				}
+			}else if(type=='camera'){
+				classInfo = { 'camera-item': true,active: false};
+				if (index) {
+					classInfo.active = true;
+				}
+			}
+			return classInfo;
+		},
+		//时间
+		showTime() {
+			this.currentTime = this.$TOOL.dateFormat(new Date(), "hh:mm:ss");
+			this.currentWeek = this.$TOOL.dateFormat(new Date(), "week");
+			this.currentDate = this.$TOOL.dateFormat(new Date(),"yyyy年MM月dd日");
+		},
+        // 切换摄像头
+		switchCamera(index) {
+			this.cameras.forEach((item,ind)=>{
+				item.active = false;
+				if(index==ind){
+					item.active = true
+					this.currentCameraIndex = item.id;
+					this.currentCameraName = item.name;
+				}
+			})
+            // 更新模拟移动点的颜色
+            let movementDot = document.querySelector('.simulated-movement');
+            movementDot.style.backgroundColor = this.cameras[index].color;
+            movementDot.style.boxShadow = `0 0 10px ${this.cameras[index].color}`;
+        },
+        
+		initProductionChart() {
+           	const chartDom = this.$refs.lineChart;
+			const myChart = echarts.init(chartDom);
+			const option = {
+				tooltip: {
+					trigger: 'axis'
+				},
+				  legend: {
+						data: ['生产数', '合格数']
+					},
+				xAxis: {
+					type: 'category',
+					data: this.days,
+					splitLine:{
+						show:true
+					},
+					axisTick:{
+						show:false,
+					}
+				},
+				yAxis: {
+					type: 'value',
+					min:230,
+				},
+				series: [
+					{
+						name: '生产数',
+						type: 'line',
+						areaStyle: {},
+						data: this.productionData,
+						smooth: true // 可以让线条更平滑
+					},
+					{
+						name: '合格数',
+						type: 'line',
+						 areaStyle: {},
+						data: this.qualifiedData,
+						smooth: true // 可以让线条更平滑
+					}
+				]
+			};
+			myChart.setOption(option);
+        },
+        
+        // 模拟实时数据更新
+		updateData() {
+            // 随机更新设备状态
+            let randomIndex = Math.floor(Math.random() * this.equipmentData.length);
+            let statuses = ["running", "warning", "error", "idle"];
+            let statusTexts = ["运行中", "待维护", "故障中", "待机中"];
+            let randomStatus = Math.floor(Math.random() * 4);
+            
+            // 只偶尔更新一台设备的状态
+            if (Math.random() > 0.7) {
+                this.equipmentData[randomIndex].status = statuses[randomStatus];
+                this.equipmentData[randomIndex].statusText = statusTexts[randomStatus];
+                renderEquipmentList();
+            }
+            
+            // 更新生产统计数字
+            let total = parseInt(document.getElementById('total-production').textContent.replace(',', ''));
+            let qualified = parseInt(document.getElementById('qualified-count').textContent.replace(',', ''));
+            let unqualified = parseInt(document.getElementById('unqualified-count').textContent.replace(',', ''));
+            
+            // 随机增加一些生产数据
+            let newTotal = total + Math.floor(Math.random() * 5);
+            let newQualified = qualified + Math.floor(Math.random() * 4);
+            let newUnqualified = unqualified + Math.floor(Math.random() * 2);
+            
+            document.getElementById('total-production').textContent = newTotal.toLocaleString();
+            document.getElementById('qualified-count').textContent = newQualified.toLocaleString();
+            document.getElementById('unqualified-count').textContent = newUnqualified.toLocaleString();
+            
+            // 更新在制品数据
+            let wipItems = document.querySelectorAll('.wip-item-value');
+            wipItems.forEach((item, index) => {
+                if (index < this.wipData.length) {
+                    let current = this.wipData[index].count;
+                    let change = Math.floor(Math.random() * 3) - 1; // -1, 0, 1
+                    let newValue = Math.max(0, current + change);
+                    this.wipData[index].count = newValue;
+                    item.textContent = newValue;
+                }
+            });
+            
+            // 更新在制品总数
+            let newWipTotal = this.wipData.reduce((sum, item) => sum + item.count, 0);
+            document.getElementById('wip-total').textContent = newWipTotal;
+            
+            // 更新图表数据
+            if (productionChart) {
+                let lastDataIndex = productionChart.data.datasets[0].data.length - 1;
+                let lastValue = productionChart.data.datasets[0].data[lastDataIndex];
+                let newValue = lastValue + Math.floor(Math.random() * 5) - 2;
+                productionChart.data.datasets[0].data[lastDataIndex] = newValue;
+                productionChart.data.datasets[1].data[lastDataIndex] = newValue - Math.floor(Math.random() * 3);
+                productionChart.update();
+            }
+        },
+        
+        // 创建模拟视频背景
+		createVideoBackground() {
+            let videoFeed = document.getElementById('video-feed');
+            
+            // 添加网格线
+            for (let i = 0; i < 10; i++) {
+                let line = document.createElement('div');
+                line.style.position = 'absolute';
+                line.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
+                
+                if (i < 5) {
+                    // 垂直线
+                    line.style.width = '1px';
+                    line.style.height = '100%';
+                    line.style.left = `${(i + 1) * 20}%`;
+                    line.style.top = '0';
+                } else {
+                    // 水平线
+                    line.style.width = '100%';
+                    line.style.height = '1px';
+                    line.style.top = `${(i - 4) * 20}%`;
+                    line.style.left = '0';
+                }
+                
+                videoFeed.appendChild(line);
+            }
+        },
+		//屏幕监听
+		addListener() {
+			let that = this;
+			window.addEventListener("resize", function () {
+			});
+		},
+		deepCopy(obj) {
+			return JSON.parse(JSON.stringify(obj));
+		},
+	},
+};
+</script>
+<style scoped>
+ * {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: 'Roboto', sans-serif;
+	background-color: #0a1a2d;
+	color: #e0f0ff;
+	overflow: hidden;
+	height: 100vh;
+	padding: 10px;
+}
+        
+.dashboard {
+	display: grid;
+	color: #e0f0ff;
+	height: 100vh;
+	font-family: 'Roboto', sans-serif;
+	background-color: #0a1a2d;
+	grid-template-columns: 1.2fr 1fr 1fr 1fr;
+	grid-template-rows: auto 1fr 1fr;
+	gap: 15px;
+	height: 100%;
+	width: 100%;
+	padding: 10px;
+}
+
+.header {
+	grid-column: 1 / span 4;
+	background: linear-gradient(90deg, #0a1a2d 0%, #0c2340 50%, #0a1a2d 100%);
+	border-radius: 12px;
+	padding: 15px 30px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border: 1px solid #1a3a5f;
+	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+	position: relative;
+}
+
+.header::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 3px;
+	background: linear-gradient(90deg, #00b4ff, #0080ff, #00b4ff);
+}
+
+.title {
+	font-family: 'Orbitron', sans-serif;
+	font-size: 2.5rem;
+	background: linear-gradient(to right, #00b4ff, #0080ff);
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+	letter-spacing: 1px;
+	text-shadow: 0 0 10px rgba(0, 180, 255, 0.3);
+}
+
+.time-date {
+	text-align: right;
+}
+
+.time {
+	font-family: 'Orbitron', sans-serif;
+	font-size: 1.8rem;
+	color: #00b4ff;
+	margin-bottom: 5px;
+}
+
+.date {
+	font-size: 1.1rem;
+	color: #a0c8ff;
+}
+
+.card {
+	background: rgba(16, 36, 54, 0.8);
+	border-radius: 12px;
+	padding: 20px;
+	border: 1px solid #1a3a5f;
+	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+	transition: transform 0.3s ease, box-shadow 0.3s ease;
+	overflow: hidden;
+	position: relative;
+}
+
+.card:hover {
+	transform: translateY(-5px);
+	box-shadow: 0 8px 20px rgba(0, 100, 255, 0.2);
+}
+
+.card-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 15px;
+	padding-bottom: 10px;
+	border-bottom: 1px solid #1a3a5f;
+}
+
+.card-title {
+	font-size: 1.4rem;
+	font-weight: 500;
+	color: #00b4ff;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.card-icon {
+	font-size: 1.6rem;
+}
+
+.statusbadge {
+	padding: 5px 12px;
+	border-radius: 20px;
+	font-size: 0.85rem;
+	font-weight: 500;
+}
+        
+.statusrunning {
+	background-color: rgba(0, 200, 83, 0.2);
+	color: #00c853;
+}
+
+.statuswarning {
+	background-color: rgba(255, 193, 7, 0.2);
+	color: #ffc107;
+}
+
+.statuserror {
+	background-color: rgba(244, 67, 54, 0.2);
+	color: #f44336;
+}
+
+.statusidle {
+	background-color: rgba(158, 158, 158, 0.2);
+	color: #9e9e9e;
+}
+
+/* 监控视频区域 */
+.video-monitoring {
+	grid-column: 1;
+	grid-row: 2 / span 2;
+}
+
+.video-container {
+	height: calc(100% - 80px);
+	position: relative;
+	border-radius: 8px;
+	overflow: hidden;
+	background-color: #000;
+	border: 1px solid #1a3a5f;
+}
+
+.video-placeholder {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	background: linear-gradient(45deg, #0a1a2d, #0c2340);
+	position: relative;
+}
+
+.video-placeholder i {
+	font-size: 4rem;
+	color: #00b4ff;
+	margin-bottom: 20px;
+}
+
+.video-placeholder p {
+	font-size: 1.2rem;
+	color: #a0c8ff;
+	text-align: center;
+}
+
+.camera-controls {
+	position: absolute;
+	bottom: 10px;
+	left: 0;
+	right: 0;
+	display: flex;
+	justify-content: center;
+	gap: 10px;
+	z-index: 10;
+}
+
+.camera-btn {
+	background: rgba(0, 180, 255, 0.8);
+	border: none;
+	color: white;
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	transition: all 0.3s ease;
+}
+
+.camera-btn:hover {
+	background: rgba(0, 180, 255, 1);
+	transform: scale(1.1);
+}
+
+.camera-list {
+	display: flex;
+	justify-content: center;
+	gap: 10px;
+	margin-top: 15px;
+	flex-wrap: wrap;
+}
+
+.camera-item {
+	padding: 6px 12px;
+	background: rgba(26, 58, 95, 0.5);
+	border-radius: 20px;
+	font-size: 0.85rem;
+	cursor: pointer;
+	transition: all 0.3s ease;
+}
+
+.camera-item.active {
+	background: #00b4ff;
+	color: white;
+}
+
+.camera-item:hover {
+	background: rgba(0, 180, 255, 0.7);
+}
+
+/* 设备状态区域 */
+.equipment-status {
+	grid-column: 2 / span 3;
+	grid-row: 2;
+}
+
+.equipment-list {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 15px;
+}
+
+.equipment-item {
+	background: rgba(26, 58, 95, 0.5);
+	border-radius: 8px;
+	padding: 15px;
+	display: flex;
+	align-items: center;
+	gap: 15px;
+	border-left: 4px solid #00b4ff;
+}
+
+.equipment-icon {
+	font-size: 2rem;
+	color: #00b4ff;
+}
+
+.equipment-info h4 {
+	font-size: 1.1rem;
+	margin-bottom: 5px;
+}
+
+.equipment-info p {
+	font-size: 0.9rem;
+	color: #a0c8ff;
+}
+
+/* 生产合格统计表 */
+.production-stats {
+	grid-column: 2;
+	grid-row: 3;
+}
+
+.stats-container {
+	display: flex;
+	flex-direction: column;
+	height: calc(100% - 80px);
+}
+
+.stats-overview {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 15px;
+}
+
+.stat-box {
+	background: rgba(26, 58, 95, 0.5);
+	border-radius: 10px;
+	padding: 10px;
+	text-align: center;
+	flex: 1;
+	margin: 0 5px;
+}
+
+.stat-value {
+	font-size: 1.8rem;
+	font-weight: 700;
+	color: #00b4ff;
+	margin: 5px 0;
+}
+
+.stat-label {
+	font-size: 0.9rem;
+	color: #a0c8ff;
+}
+
+.chart-container {
+	flex-grow: 1;
+	position: relative;
+}
+
+/* 人员在岗信息 */
+.personnel-info {
+	grid-column: 3;
+	grid-row: 3;
+}
+
+.personnel-list {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	max-height: 400px;
+	overflow-y: auto;
+	padding-right: 5px;
+}
+
+.personnel-list::-webkit-scrollbar {
+	width: 6px;
+}
+
+.personnel-list::-webkit-scrollbar-thumb {
+	background-color: #1a3a5f;
+	border-radius: 3px;
+}
+
+.personnel-item {
+	background: rgba(26, 58, 95, 0.5);
+	border-radius: 8px;
+	padding: 12px;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.personnel-avatar {
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	background: linear-gradient(135deg, #00b4ff, #0080ff);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: 700;
+	color: white;
+}
+
+.personnel-details h4 {
+	font-size: 1rem;
+	margin-bottom: 3px;
+}
+
+.personnel-details p {
+	font-size: 0.85rem;
+	color: #a0c8ff;
+}
+
+.personnel-status {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	margin-left: auto;
+}
+.status-badge {
+    padding: 5px 12px;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 500;
+}
+.status-online {
+	background-color: #00c853;
+	box-shadow: 0 0 8px #00c853;
+}
+
+.status-offline {
+	background-color: #f44336;
+}
+
+/* 车间在制品统计 */
+.wip-stats {
+	grid-column: 4;
+	grid-row: 3;
+}
+
+.wip-container {
+	display: flex;
+	flex-direction: column;
+	height: calc(100% - 80px);
+}
+
+.wip-summary {
+	display: flex;
+	margin-bottom: 15px;
+}
+
+.wip-total {
+	background: rgba(26, 58, 95, 0.5);
+	border-radius: 10px;
+	padding: 15px;
+	flex: 1;
+	text-align: center;
+}
+
+.wip-total-value {
+	font-size: 2.5rem;
+	font-weight: 700;
+	color: #00b4ff;
+	margin: 10px 0;
+}
+
+.wip-details {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 12px;
+}
+
+.wip-item {
+	background: rgba(26, 58, 95, 0.5);
+	border-radius: 8px;
+	padding: 12px;
+}
+
+.wip-item-title {
+	font-size: 0.9rem;
+	color: #a0c8ff;
+	margin-bottom: 5px;
+}
+
+.wip-item-value {
+	font-size: 1.4rem;
+	font-weight: 600;
+	color: #e0f0ff;
+}
+
+/* 数据更新提示 */
+.update-indicator {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	font-size: 0.8rem;
+	color: #00b4ff;
+	display: flex;
+	align-items: center;
+	gap: 5px;
+}
+
+.pulse {
+	width: 8px;
+	height: 8px;
+	background-color: #00b4ff;
+	border-radius: 50%;
+	animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+	0% { opacity: 1; }
+	50% { opacity: 0.3; }
+	100% { opacity: 1; }
+}
+
+/* 响应式调整 */
+@media (max-width: 1600px) {
+	.dashboard {
+		grid-template-columns: 1fr 1fr 1fr;
+		grid-template-rows: auto 1fr 1fr 1fr;
+	}
+	
+	.header {
+		grid-column: 1 / span 3;
+	}
+	
+	.video-monitoring {
+		grid-column: 1 / span 3;
+		grid-row: 2;
+		height: 300px;
+	}
+	
+	.equipment-status {
+		grid-column: 1 / span 3;
+		grid-row: 3;
+	}
+	
+	.production-stats {
+		grid-column: 1;
+		grid-row: 4;
+	}
+	
+	.personnel-info {
+		grid-column: 2;
+		grid-row: 4;
+	}
+	
+	.wip-stats {
+		grid-column: 3;
+		grid-row: 4;
+	}
+}
+
+@media (max-width: 1200px) {
+	.dashboard {
+		grid-template-columns: 1fr;
+		grid-template-rows: auto;
+	}
+	
+	.header,
+	.video-monitoring,
+	.equipment-status,
+	.production-stats,
+	.personnel-info,
+	.wip-stats {
+		grid-column: 1;
+	}
+	
+	.video-monitoring {
+		height: 400px;
+	}
+	
+	.equipment-list {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+/* 模拟监控视频样式 */
+.video-feed {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+.video-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.7) 100%);
+	pointer-events: none;
+}
+
+.video-time {
+	position: absolute;
+	bottom: 10px;
+	left: 10px;
+	color: white;
+	font-size: 0.9rem;
+	font-family: 'Orbitron', sans-serif;
+}
+
+.video-camera-name {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	color: white;
+	background: rgba(0, 0, 0, 0.5);
+	padding: 5px 10px;
+	border-radius: 4px;
+	font-size: 0.9rem;
+}
+
+.simulated-movement {
+	position: absolute;
+	width: 20px;
+	height: 20px;
+	background-color: #ff0000;
+	border-radius: 50%;
+	animation: moveAround 10s infinite linear;
+	opacity: 0.8;
+	box-shadow: 0 0 10px #ff0000;
+}
+
+@keyframes moveAround {
+	0% { top: 20%; left: 15%; }
+	25% { top: 60%; left: 80%; }
+	50% { top: 80%; left: 30%; }
+	75% { top: 40%; left: 10%; }
+	100% { top: 20%; left: 15%; }
+}
+</style>
diff --git a/src/views/bigScreen/tcerp/tcBigScreen2.vue b/src/views/bigScreen/tcerp/tcBigScreen2.vue
new file mode 100644
index 00000000..fd071cd0
--- /dev/null
+++ b/src/views/bigScreen/tcerp/tcBigScreen2.vue
@@ -0,0 +1,25 @@
+<template>
+	<iframe
+		src="http://49.232.14.174:2256/media/default/test.html"
+		frameborder="0"
+		allowfullscreen>
+	</iframe>
+</template>
+<script>
+
+export default {
+	data() {
+		return {};
+	},
+	mounted() {
+		
+	},
+};
+</script>
+<style scoped>
+	 iframe {
+		width: 100%;
+		height: 100%;
+		border: none; /* 可选，去掉边框 */
+	}
+</style>