diff --git a/.env.production b/.env.production
index 2dfffdf..be8c8f9 100644
--- a/.env.production
+++ b/.env.production
@@ -23,7 +23,7 @@ NODE_ENV = "production"
 # VITE_API_URL = 'http://182.90.224.237:15551'
 # agjt
 # VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
-VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
+# VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
 # 苏立信/重庆市南岸区
 # VITE_API_URL = 'http://101.43.164.214:11111'
 # 中科安信
@@ -54,5 +54,6 @@ VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
 # VITE_API_URL = 'http://121.37.106.37:9820'
 # VITE_API_URL = 'http://121.37.106.37:9809'
 # 打包
+VITE_API_URL =''
 VITE_ULD_API_URL = 'http://jxj.zhgdyun.com:8012/onlinePreview?url='
 
diff --git a/src/api/modules/shieldMachine.ts b/src/api/modules/shieldMachine.ts
new file mode 100644
index 0000000..1735acd
--- /dev/null
+++ b/src/api/modules/shieldMachine.ts
@@ -0,0 +1,23 @@
+// 盾构机接口API
+import http from "@/api";
+const BASEURL = import.meta.env.VITE_API_URL;
+
+// 大屏数据统计
+export const getShieldMachineData = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/tunnelBoringMachineCurrentData/getStatData`, params, { headers: { noLoading: true } });
+};
+
+// 盾构机报警信息
+export const getShieldMachineAlarm = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/tunnelBoringMachineAlarm/getNewAlarm`, params, { headers: { noLoading: true } });
+};
+
+// 盾构机详情
+export const getShieldMachineDetail = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/tunnelBoringMachine/queryById`, params, { headers: { noLoading: true } });
+};
+
+// 盾构机列表
+export const getShieldMachineList = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/tunnelBoringMachine/list`, params, { headers: { noLoading: true } });
+};
diff --git a/src/assets/images/shieldMachine/c-t-b-d-bg.png b/src/assets/images/shieldMachine/c-t-b-d-bg.png
new file mode 100644
index 0000000..8fc98c6
Binary files /dev/null and b/src/assets/images/shieldMachine/c-t-b-d-bg.png differ
diff --git a/src/assets/images/shieldMachine/c-t-b-i-bg.png b/src/assets/images/shieldMachine/c-t-b-i-bg.png
new file mode 100644
index 0000000..a59f123
Binary files /dev/null and b/src/assets/images/shieldMachine/c-t-b-i-bg.png differ
diff --git a/src/assets/images/shieldMachine/c-t-b-s-bg.png b/src/assets/images/shieldMachine/c-t-b-s-bg.png
new file mode 100644
index 0000000..796ced9
Binary files /dev/null and b/src/assets/images/shieldMachine/c-t-b-s-bg.png differ
diff --git a/src/assets/images/shieldMachine/c-t-b-w-bg.png b/src/assets/images/shieldMachine/c-t-b-w-bg.png
new file mode 100644
index 0000000..0e5252d
Binary files /dev/null and b/src/assets/images/shieldMachine/c-t-b-w-bg.png differ
diff --git a/src/assets/images/shieldMachine/c-t-bg-a.png b/src/assets/images/shieldMachine/c-t-bg-a.png
new file mode 100644
index 0000000..88128b8
Binary files /dev/null and b/src/assets/images/shieldMachine/c-t-bg-a.png differ
diff --git a/src/assets/images/shieldMachine/c-t-bg-bak.png b/src/assets/images/shieldMachine/c-t-bg-bak.png
new file mode 100644
index 0000000..40cdec1
Binary files /dev/null and b/src/assets/images/shieldMachine/c-t-bg-bak.png differ
diff --git a/src/assets/images/shieldMachine/c-t-bg.gif b/src/assets/images/shieldMachine/c-t-bg.gif
new file mode 100644
index 0000000..b848217
Binary files /dev/null and b/src/assets/images/shieldMachine/c-t-bg.gif differ
diff --git a/src/assets/images/shieldMachine/c-t-bg.png b/src/assets/images/shieldMachine/c-t-bg.png
new file mode 100644
index 0000000..da905aa
Binary files /dev/null and b/src/assets/images/shieldMachine/c-t-bg.png differ
diff --git a/src/assets/images/shieldMachine/c-t-d-bg.png b/src/assets/images/shieldMachine/c-t-d-bg.png
new file mode 100644
index 0000000..50616f0
Binary files /dev/null and b/src/assets/images/shieldMachine/c-t-d-bg.png differ
diff --git a/src/assets/images/shieldMachine/c-t-i-bg.png b/src/assets/images/shieldMachine/c-t-i-bg.png
new file mode 100644
index 0000000..b9fe6e7
Binary files /dev/null and b/src/assets/images/shieldMachine/c-t-i-bg.png differ
diff --git a/src/assets/images/shieldMachine/c-t-l-1.png b/src/assets/images/shieldMachine/c-t-l-1.png
new file mode 100644
index 0000000..585e986
Binary files /dev/null and b/src/assets/images/shieldMachine/c-t-l-1.png differ
diff --git a/src/assets/images/shieldMachine/c-t-l-2.png b/src/assets/images/shieldMachine/c-t-l-2.png
new file mode 100644
index 0000000..14b659a
Binary files /dev/null and b/src/assets/images/shieldMachine/c-t-l-2.png differ
diff --git a/src/assets/images/shieldMachine/c-t-l-3.png b/src/assets/images/shieldMachine/c-t-l-3.png
new file mode 100644
index 0000000..8543d83
Binary files /dev/null and b/src/assets/images/shieldMachine/c-t-l-3.png differ
diff --git a/src/assets/images/shieldMachine/c-t-t-bg.png b/src/assets/images/shieldMachine/c-t-t-bg.png
new file mode 100644
index 0000000..ccc2565
Binary files /dev/null and b/src/assets/images/shieldMachine/c-t-t-bg.png differ
diff --git a/src/assets/images/shieldMachine/l-b-t-bg.png b/src/assets/images/shieldMachine/l-b-t-bg.png
new file mode 100644
index 0000000..bba880d
Binary files /dev/null and b/src/assets/images/shieldMachine/l-b-t-bg.png differ
diff --git a/src/assets/images/shieldMachine/l-t-bg.png b/src/assets/images/shieldMachine/l-t-bg.png
new file mode 100644
index 0000000..3283ea6
Binary files /dev/null and b/src/assets/images/shieldMachine/l-t-bg.png differ
diff --git a/src/assets/images/shieldMachine/l-t-bg2.png b/src/assets/images/shieldMachine/l-t-bg2.png
new file mode 100644
index 0000000..c1e1a45
Binary files /dev/null and b/src/assets/images/shieldMachine/l-t-bg2.png differ
diff --git a/src/assets/images/shieldMachine/r-b-i-bg.png b/src/assets/images/shieldMachine/r-b-i-bg.png
new file mode 100644
index 0000000..1fb7064
Binary files /dev/null and b/src/assets/images/shieldMachine/r-b-i-bg.png differ
diff --git a/src/assets/images/shieldMachine/r-t-c-bg.png b/src/assets/images/shieldMachine/r-t-c-bg.png
new file mode 100644
index 0000000..b955524
Binary files /dev/null and b/src/assets/images/shieldMachine/r-t-c-bg.png differ
diff --git a/src/assets/images/shieldMachine/r-t-ic.png b/src/assets/images/shieldMachine/r-t-ic.png
new file mode 100644
index 0000000..942cfdb
Binary files /dev/null and b/src/assets/images/shieldMachine/r-t-ic.png differ
diff --git a/src/components/LazyImage.vue b/src/components/LazyImage.vue
new file mode 100644
index 0000000..0fec7f2
--- /dev/null
+++ b/src/components/LazyImage.vue
@@ -0,0 +1,60 @@
+<template>
+	<div class="lazy-image">
+		<img :src="currentSrc" :style="imageStyle" @load="handleImageLoaded" />
+	</div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+
+const props = defineProps({
+	// 预加载图片
+	placeholder: {
+		type: String,
+		required: true
+	},
+	// 实际展示图片
+	src: {
+		type: String,
+		required: true
+	},
+	// 图片样式
+	imageStyle: {
+		type: Object,
+		default: () => ({})
+	}
+});
+
+const isLoaded = ref(false);
+const currentSrc = computed(() => (isLoaded.value ? props.src : props.placeholder));
+
+const handleImageLoaded = () => {
+	// 如果当前显示的是占位图，则开始加载实际图片
+	if (!isLoaded.value) {
+		const img = new Image();
+		img.onload = () => {
+			isLoaded.value = true;
+		};
+		img.src = props.src;
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.lazy-image {
+	display: inline-block;
+
+	img {
+		display: block;
+		width: 100%;
+		height: 100%;
+		transition: all 0.3s ease;
+		user-drag: none;
+		-webkit-user-drag: none;
+		user-select: none;
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+}
+</style>
diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts
index d2142a8..f06c487 100644
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@@ -32,6 +32,11 @@ export const staticRouter: RouteRecordRaw[] = [
 		// component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
 		// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
 		children: [
+			{
+				path: "/shieldMachine",
+				name: "盾构机监测",
+				component: () => import("@/views/sevenLargeScreen/shieldMachine/index.vue")
+			},
 			{
 				path: "/headNoise",
 				name: "扬尘噪声",
diff --git a/src/views/sevenLargeScreen/shieldMachine/centerTop.vue b/src/views/sevenLargeScreen/shieldMachine/centerTop.vue
new file mode 100644
index 0000000..39199e5
--- /dev/null
+++ b/src/views/sevenLargeScreen/shieldMachine/centerTop.vue
@@ -0,0 +1,765 @@
+<template>
+	<div class="centerTop">
+		<Card title="盾构机监测">
+			<!-- 添加背景和箭头 -->
+			<div class="bg-container-wrapper">
+				<div class="bg-container">
+					<div class="main-bg">
+						<LazyImage :placeholder="placeholderImg" :src="srcImg" />
+						<!-- :imageStyle="{ width: '100px', height: '100px' }" -->
+					</div>
+
+					<div class="arrow-bg"></div>
+
+					<div class="data-boxes">
+						<!-- 刀盘数据卡片 -->
+						<div class="data-box cutter-data">
+							<div class="data-group">
+								<div class="data-item">
+									<div class="box-title">刀盘扭矩(KN·m)</div>
+									<div class="box-value">{{ dataInfo.cutterheadTorque }}</div>
+								</div>
+								<div class="data-item">
+									<div class="box-title">刀盘转速(r/min)</div>
+									<div class="box-value">{{ dataInfo.cutterheadSpeed }}</div>
+								</div>
+							</div>
+						</div>
+
+						<!-- 贯入度 -->
+						<div class="data-box penetration">
+							<div class="data-item">
+								<div class="box-title">贯入度(mm/r)</div>
+								<div class="box-value">{{ dataInfo.penetration }}</div>
+							</div>
+						</div>
+
+						<!-- 推进数据卡片 -->
+						<div class="data-box thrust-data">
+							<div class="data-group">
+								<div class="data-item">
+									<div class="box-title">总推力(KN)</div>
+									<div class="box-value">{{ dataInfo.totalThrust }}</div>
+								</div>
+								<div class="data-item">
+									<div class="box-title">总推进泵压力(bar)</div>
+									<div class="box-value">{{ dataInfo.totalPropulsion }}</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<!-- 司机信息卡片 -->
+					<div v-show="currentIndex === 0" class="info-card driver-info">
+						<div class="card-header">
+							<span class="title">司机信息</span>
+							<span class="close-btn" @click="currentIndex = -1">×</span>
+						</div>
+						<div class="carousel-wrapper">
+							<el-carousel
+								:autoplay="true"
+								trigger="click"
+								indicator-position="none"
+								:loop="true"
+								height="240px"
+								class="driver-carousel"
+							>
+								<el-carousel-item v-for="driver in driverList" :key="driver.id">
+									<div class="info-item">
+										<div class="basic-info">
+											<img class="avatar" :src="BASEURL + '/image/' + driver.fieldAcquisitionUrl" />
+											<div class="right-info">
+												<div class="info-row">
+													<span class="name">{{ driver.workerName }}</span>
+													<span class="value">{{ driver.sex === 1 ? "男" : "女" }}</span>
+												</div>
+												<div class="info-row">
+													<span class="value">{{ driver.teamName }}</span>
+												</div>
+												<div class="info-row">
+													<span class="value">{{ driver.phoneNumber }}</span>
+												</div>
+											</div>
+										</div>
+										<div class="info-content">
+											<div class="info-row bg">
+												<span class="label">身份证号：</span>
+												<span class="value">{{ driver.idCard }}</span>
+											</div>
+											<div class="info-row bg">
+												<span class="label">年龄：</span>
+												<span class="value">{{ driver.age }}</span>
+											</div>
+											<!-- <div class="info-row bg">
+												<span class="label">工作年限：</span>
+												<span class="value">{{ driver.workYears }}年</span>
+											</div> -->
+											<div class="info-row bg">
+												<span class="label">特种设备操作证编号：</span>
+												<span class="value">{{ driver.specialCertificateNumber }}</span>
+											</div>
+										</div>
+									</div>
+								</el-carousel-item>
+							</el-carousel>
+						</div>
+					</div>
+
+					<!-- 油缸详情卡片 -->
+					<div v-show="currentIndex === 1" class="info-card cylinder-info">
+						<div class="card-header">
+							<span class="title">油缸详情</span>
+							<span class="close-btn" @click="currentIndex = -1">×</span>
+						</div>
+						<div class="cylinder-content">
+							<div v-for="item in cylinderData" :key="item.group" class="cylinder-group">
+								<div class="group-item">
+									<div class="group-name">{{ item.group }}组</div>
+									<div class="group-data">位移(mm): {{ item.displacement }}</div>
+								</div>
+								<div class="group-item pressure">
+									<div class="group-data">压力(bar): {{ item.pressure }}</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<!-- 舱压详情卡片 -->
+					<div v-show="currentIndex === 2" class="info-card pressure-info">
+						<div class="card-header">
+							<span class="title">舱压详情</span>
+							<span class="close-btn" @click="currentIndex = -1">×</span>
+						</div>
+						<div class="pressure-content">
+							<div v-for="item in pressureData" :key="item.name" class="pressure-group">
+								<div class="group-item">
+									<div class="group-name">{{ item.name }}</div>
+									<div class="group-data">压力(bar): {{ item.value }}</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<!-- 添加切换按钮 -->
+				<div class="switch-buttons">
+					<div
+						v-for="(item, index) in buttons"
+						:key="index"
+						:class="['btn', { active: currentIndex === index }]"
+						@click="switchCard(index)"
+					>
+						{{ item.name }}
+					</div>
+				</div>
+			</div>
+			<template #custom>
+				<div class="custom">
+					<el-scrollbar height="100%" wrap-class="scrollbar-wrapper-horizontal" :horizontal="true">
+						<div class="alarm-indicators">
+							<div v-for="item in alarmItems" :key="item.name" :class="['alarm-item', statusTypeMap[item.type]]">
+								<div class="alarm-content">
+									<span class="name">{{ item.alarmType }}</span>
+									<span class="status">{{ statusMap[item.type] }}</span>
+								</div>
+							</div>
+						</div>
+					</el-scrollbar>
+				</div>
+			</template>
+		</Card>
+	</div>
+</template>
+
+<script setup>
+import LazyImage from "@/components/LazyImage.vue";
+import Card from "@/components/card.vue";
+import { ref } from "vue";
+import { ALARM_ITEMS, INITIAL_CYLINDER_DATA, INITIAL_PRESSURE_DATA } from "./constants/shieldMachine";
+import { getShieldMachineAlarm, getShieldMachineDetail } from "@/api/modules/shieldMachine";
+import placeholderImg from "@/assets/images/shieldMachine/c-t-bg.png";
+import srcImg from "@/assets/images/shieldMachine/c-t-bg.gif";
+
+const BASEURL = import.meta.env.VITE_API_URL;
+
+// 类型， red 红色预警 yellow 黄色预警 normal 正常
+const statusMap = {
+	normal: "正常",
+	red: "红色预警",
+	yellow: "黄色预警"
+};
+const statusTypeMap = {
+	normal: "success",
+	red: "danger",
+	yellow: "warning"
+};
+
+// 司机列表
+const driverList = ref([]);
+
+//将方法暴露给父组件
+defineExpose({
+	// 初始化数据
+	initData: (data, shieldMachineData) => {
+		getAlarmData(shieldMachineData.devSn);
+		getShieldMachineDetailData(shieldMachineData.id);
+		dataInfo.value = data;
+		cylinderData.value = [
+			{ group: "A", displacement: data.cylinderDisplacementA, pressure: data.cylinderPressureA },
+			{ group: "B", displacement: data.cylinderDisplacementB, pressure: data.cylinderPressureB },
+			{ group: "C", displacement: data.cylinderDisplacementC, pressure: data.cylinderPressureC },
+			{ group: "D", displacement: data.cylinderDisplacementD, pressure: data.cylinderPressureD },
+			{ group: "E", displacement: data.cylinderDisplacementE, pressure: data.cylinderPressureE },
+			{ group: "F", displacement: data.cylinderDisplacementF, pressure: data.cylinderPressureF }
+		];
+		pressureData.value = [
+			{ name: "正上", value: data.upCabinPressure },
+			{ name: "左上", value: data.leftUpCabinPressure },
+			{ name: "左中", value: data.leftCenterCabinPressure },
+			{ name: "左下", value: data.leftBelowCabinPressure },
+			{ name: "右上", value: data.rightUpCabinPressure },
+			{ name: "右中", value: data.rightCenterCabinPressure },
+			{ name: "右下", value: data.rightBelowCabinPressure }
+		];
+	}
+});
+
+const getAlarmData = shieldMachineDevSN => {
+	getShieldMachineAlarm({ devSn: shieldMachineDevSN }).then(res => {
+		console.log(res);
+		alarmItems.value = res.result;
+	});
+};
+
+const getShieldMachineDetailData = shieldMachineId => {
+	getShieldMachineDetail({ id: shieldMachineId }).then(res => {
+		console.log(res);
+		driverList.value = res.result?.treuckDriverList || [];
+	});
+};
+
+const currentIndex = ref(-1);
+const buttons = ref([{ name: "司机信息" }, { name: "油缸详情" }, { name: "舱压详情" }]);
+
+const switchCard = index => {
+	currentIndex.value = index;
+};
+
+const dataInfo = ref({});
+
+// 报警状态数据
+const alarmItems = ref(ALARM_ITEMS);
+
+// 油缸数据
+const cylinderData = ref(INITIAL_CYLINDER_DATA);
+
+// 舱压数据
+const pressureData = ref(INITIAL_PRESSURE_DATA);
+</script>
+
+<style lang="scss" scoped>
+.centerTop {
+	width: 100%;
+	height: 100%;
+}
+
+::v-deep .h-card .content {
+	height: 76.5%;
+	margin-top: 1.8%;
+}
+
+::v-deep .h-card {
+	position: relative;
+}
+.bg-container-wrapper {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+.bg-container {
+	position: relative;
+
+	width: 100%;
+	height: 100%;
+
+	.main-bg {
+		position: absolute;
+		top: 100px;
+		right: 0;
+		width: 758px;
+		height: 442px;
+		// background: url("@/assets/images/shieldMachine/c-t-bg.png") no-repeat;
+		// background-size: 100% 100%;
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.arrow-bg {
+		position: absolute;
+		bottom: 100px;
+		right: 88px;
+		width: 270px;
+		height: 100px;
+		// width: 100%;
+		// height: 30%;
+		background: url("@/assets/images/shieldMachine/c-t-bg-a.png") no-repeat;
+		background-size: 100% 100%;
+	}
+}
+
+.switch-buttons {
+	position: absolute;
+	right: 0;
+	top: 20px;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+
+	.btn {
+		width: 18px;
+		background: linear-gradient(90deg, #2758c0 0%, rgba(39, 88, 192, 0) 100%);
+		color: #fff;
+		cursor: pointer;
+		writing-mode: vertical-lr;
+		text-align: center;
+		font-size: 12px;
+		padding: 6px 2px;
+		letter-spacing: 2px;
+
+		&.active {
+			background: linear-gradient(90deg, #4e87ea 0%, rgba(39, 88, 192, 0) 100%);
+		}
+
+		&:hover {
+			opacity: 0.8;
+		}
+	}
+}
+.custom {
+	position: relative;
+	margin-top: 1.8%;
+	height: 17%;
+	background: url("@/assets/images/cardImg.png") no-repeat;
+	background-size: 100% 100%;
+	::v-deep .el-scrollbar__view {
+		height: 100%;
+	}
+
+	.alarm-indicators {
+		display: flex;
+		flex-wrap: nowrap;
+		height: 100%;
+		align-items: center;
+		gap: 20px;
+		padding: 15px 20px;
+		box-sizing: border-box;
+
+		.alarm-item {
+			position: relative;
+			padding: 8px 12px;
+			box-sizing: border-box;
+			min-width: 150px;
+			height: 104px;
+			// 不同状态的边框颜色
+			&.danger {
+				border-color: #ff4d4f;
+				background: url("@/assets/images/shieldMachine/c-t-b-d-bg.png") no-repeat;
+				background-size: 100% 100%;
+				.alarm-content {
+					.status {
+						color: #ff4d4f;
+					}
+				}
+			}
+
+			&.warning {
+				border-color: #faad14;
+				background: url("@/assets/images/shieldMachine/c-t-b-w-bg.png") no-repeat;
+				background-size: 100% 100%;
+				.alarm-content {
+					.status {
+						color: #faad14;
+					}
+				}
+			}
+
+			&.success {
+				border-color: #52c41a;
+				background: url("@/assets/images/shieldMachine/c-t-b-s-bg.png") no-repeat;
+				background-size: 100% 100%;
+				.alarm-content {
+					.status {
+						color: #52c41a;
+					}
+				}
+			}
+
+			&.disabled {
+				border-color: #d9d9d9;
+				background: url("@/assets/images/shieldMachine/c-t-b-i-bg.png") no-repeat;
+				background-size: 100% 100%;
+				.alarm-content {
+					.status {
+						color: #d9d9d9;
+					}
+				}
+			}
+
+			.alarm-content {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				height: 70%;
+				// align-items: center;
+				gap: 10px;
+
+				.name {
+					color: #fff;
+					font-size: 14px;
+				}
+
+				.status {
+					color: #fff;
+					font-size: 12px;
+				}
+			}
+		}
+	}
+}
+
+.info-card {
+	position: absolute;
+	top: 45px;
+	right: 65px;
+	padding: 15px;
+	background: rgba(0, 28, 65, 0.9);
+	border: 1px solid rgba(0, 147, 255, 0.3);
+	box-shadow: 0 0 10px rgba(0, 147, 255, 0.1);
+	color: #fff;
+
+	.card-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding-bottom: 10px;
+		margin-bottom: 10px;
+		border-bottom: 1px dashed rgba(0, 147, 255, 0.3);
+
+		.title {
+			font-size: 16px;
+			font-weight: bold;
+			color: #fff;
+		}
+
+		.close-btn {
+			width: 20px;
+			height: 20px;
+			line-height: 20px;
+			text-align: center;
+			cursor: pointer;
+			color: rgba(255, 255, 255, 0.7);
+			font-size: 20px;
+
+			&:hover {
+				color: #fff;
+			}
+		}
+	}
+
+	.info-item {
+		.basic-info {
+			display: flex;
+			gap: 10px;
+			margin-bottom: 15px;
+
+			.avatar {
+				width: 80px;
+				height: 100px;
+				object-fit: cover;
+				border: 1px solid rgba(0, 147, 255, 0.5);
+			}
+
+			.right-info {
+				flex: 1;
+				.info-row {
+					margin-bottom: 8px;
+					font-size: 14px;
+				}
+			}
+		}
+
+		.info-content {
+			.info-row {
+				margin-bottom: 8px;
+				font-size: 14px;
+			}
+		}
+
+		.info-row {
+			.name {
+				color: #00a3ff;
+				font-size: 24px;
+				font-weight: bold;
+				margin-right: 10px;
+			}
+			.label {
+				color: #919dbd;
+				margin-right: 5px;
+				display: inline-block;
+			}
+
+			.value {
+				color: #ffffff;
+			}
+			&.bg {
+				background: url("@/assets/images/shieldMachine/c-t-i-bg.png") no-repeat;
+				background-size: 100% 100%;
+				padding: 4px 10px;
+			}
+		}
+	}
+}
+
+.cylinder-info,
+.pressure-info {
+	.data-item {
+		margin-bottom: 15px;
+		display: flex;
+		align-items: center;
+
+		.label {
+			color: rgba(255, 255, 255, 0.7);
+			margin-right: 10px;
+		}
+
+		.value {
+			color: #00a3ff;
+			font-size: 20px;
+			font-weight: bold;
+		}
+	}
+}
+
+.pressure-gauge {
+	width: 200px;
+	height: 200px;
+	margin: 20px auto;
+	// 这里可以添加压力表的样式
+}
+
+.data-boxes {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+
+	.data-box {
+		position: absolute;
+		padding: 8px 12px;
+		background: url("@/assets/images/shieldMachine/c-t-t-bg.png") no-repeat;
+		background-size: 100% 100%;
+		color: #fff;
+
+		&::before {
+			content: "";
+			position: absolute;
+		}
+
+		.data-group {
+			display: flex;
+			gap: 20px;
+		}
+
+		.data-item {
+			.box-title {
+				font-size: 14px;
+				color: rgba(255, 255, 255, 0.8);
+				margin-bottom: 4px;
+			}
+
+			.box-value {
+				font-size: 20px;
+				color: #00a3ff;
+				font-weight: bold;
+			}
+		}
+	}
+
+	// 刀盘数据卡片位置
+	.cutter-data {
+		top: 15%;
+		left: 3%;
+
+		&::before {
+			left: 50%;
+			transform: translateX(-50%);
+			bottom: -50%;
+			width: 100px;
+			height: 20px;
+			background: url("@/assets/images/shieldMachine/c-t-l-1.png") no-repeat;
+			background-size: 100% 100%;
+		}
+	}
+
+	// 贯入度位置
+	.penetration {
+		top: 60%;
+		left: 5%;
+
+		&::before {
+			left: 50%;
+			top: -120%;
+			width: 110px;
+			height: 65px;
+			background: url("@/assets/images/shieldMachine/c-t-l-2.png") no-repeat;
+			background-size: 100% 100%;
+		}
+	}
+
+	// 推进数据卡片位置
+	.thrust-data {
+		bottom: 5%;
+		left: 15%;
+
+		&::before {
+			left: 20%;
+			top: -120%;
+			width: 110px;
+			height: 65px;
+			background: url("@/assets/images/shieldMachine/c-t-l-3.png") no-repeat;
+			background-size: 100% 100%;
+		}
+	}
+}
+
+.cylinder-info {
+	min-width: 300px;
+
+	.cylinder-content {
+		.cylinder-group {
+			margin-bottom: 15px;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			.group-item {
+				display: flex;
+				align-items: center;
+				height: 32px;
+				margin-bottom: 4px;
+				padding: 0 10px;
+				// background: rgba(0, 71, 147, 0.3);
+				// border: 1px dashed rgba(0, 147, 255, 0.3);
+				background: url("@/assets/images/shieldMachine/c-t-i-bg.png") no-repeat;
+				background-size: 100% 100%;
+				&.pressure {
+					padding-left: 50px; // 压力数据左侧留出更多空间
+				}
+
+				.group-name {
+					min-width: 40px;
+					color: #00a3ff;
+					font-weight: bold;
+				}
+
+				.group-data {
+					flex: 1;
+					color: #fff;
+					font-size: 14px;
+
+					// 数值部分使用等宽字体，保证对齐
+					font-family: "Courier New", Courier, monospace;
+				}
+			}
+		}
+	}
+}
+
+.pressure-info {
+	min-width: 300px;
+
+	.pressure-content {
+		.pressure-group {
+			margin-bottom: 8px;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			.group-item {
+				display: flex;
+				align-items: center;
+				height: 32px;
+				padding: 0 10px;
+				// background: rgba(0, 71, 147, 0.3);
+				// border: 1px dashed rgba(0, 147, 255, 0.3);
+				background: url("@/assets/images/shieldMachine/c-t-i-bg.png") no-repeat;
+				background-size: 100% 100%;
+				position: relative;
+				.group-name {
+					min-width: 40px;
+					color: #00a3ff;
+					font-weight: bold;
+				}
+
+				.group-data {
+					flex: 1;
+					color: #fff;
+					font-size: 14px;
+					font-family: "Courier New", Courier, monospace; // 使用等宽字体
+				}
+			}
+		}
+	}
+}
+.scrollbar-wrapper-horizontal {
+	overflow-x: auto;
+	white-space: nowrap;
+}
+
+.driver-info {
+	width: 300px;
+
+	.carousel-wrapper {
+		height: 240px;
+	}
+}
+
+.driver-carousel {
+	:deep(.el-carousel__container) {
+		height: 320px;
+	}
+
+	:deep(.el-carousel__arrow) {
+		background-color: rgba(0, 147, 255, 0.3);
+		border: 1px solid rgba(0, 147, 255, 0.5);
+
+		&:hover {
+			background-color: rgba(0, 147, 255, 0.5);
+		}
+	}
+}
+
+.info-item {
+	height: 100%;
+
+	.basic-info {
+		margin-bottom: 15px;
+		// ... existing styles ...
+	}
+
+	.info-content {
+		.info-row {
+			margin-bottom: 10px;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/shieldMachine/constants/shieldMachine.js b/src/views/sevenLargeScreen/shieldMachine/constants/shieldMachine.js
new file mode 100644
index 0000000..5227da1
--- /dev/null
+++ b/src/views/sevenLargeScreen/shieldMachine/constants/shieldMachine.js
@@ -0,0 +1,27 @@
+// 报警状态数据
+export const ALARM_ITEMS = [
+	{ name: "舱压", status: "报警", type: "danger" },
+	{ name: "注浆状态", status: "报警", type: "danger" },
+	{ name: "刀盘垂直偏差", status: "报警", type: "warning" },
+	{ name: "盾尾水平偏差", status: "报警", type: "success" },
+	{ name: "盾尾垂直偏差", status: "未连接", type: "disabled" },
+	{ name: "刀盘扭矩", status: "报警", type: "danger" },
+	{ name: "刀盘转速", status: "报警", type: "danger" },
+	{ name: "刀盘刀具磨损", status: "报警", type: "danger" },
+];
+
+// 初始油缸数据
+export const INITIAL_CYLINDER_DATA = [
+	{ group: "A", displacement: 1751.96, pressure: 119.54 },
+	{ group: "B", displacement: 1751.96, pressure: 119.54 },
+	{ group: "C", displacement: 1751.96, pressure: 119.54 },
+	{ group: "D", displacement: 1751.96, pressure: 119.54 }
+];
+
+// 初始舱压数据
+export const INITIAL_PRESSURE_DATA = Array(8)
+	.fill(null)
+	.map((_, index) => ({
+		group: index + 1,
+		pressure: 119.54
+	}));
diff --git a/src/views/sevenLargeScreen/shieldMachine/index.vue b/src/views/sevenLargeScreen/shieldMachine/index.vue
new file mode 100644
index 0000000..7390fb5
--- /dev/null
+++ b/src/views/sevenLargeScreen/shieldMachine/index.vue
@@ -0,0 +1,147 @@
+<template>
+	<div class="projectContent">
+		<div class="left">
+			<LeftTop class="leftTop" ref="leftTopRef"></LeftTop>
+			<LeftBottom class="leftBottom" ref="leftBottomRef"></LeftBottom>
+		</div>
+		<div class="center">
+			<div class="centerTopSelect">
+				<el-select v-model="shieldMachineDevSN" placeholder="请选择盾构机" @change="handleChange">
+					<el-option v-for="item in shieldMachineList" :key="item.id" :label="item.devName" :value="item.devSn"></el-option>
+				</el-select>
+			</div>
+			<centerTop class="centerTop" ref="centerTopRef"></centerTop>
+		</div>
+		<div class="right">
+			<rightTop class="rightTop" ref="rightTopRef"></rightTop>
+			<rightBottom class="rightBottom" ref="rightBottomRef"></rightBottom>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import LeftTop from "./leftTop.vue";
+import LeftBottom from "./leftBottom.vue";
+import CenterTop from "./centerTop.vue";
+import RightTop from "./rightTop.vue";
+import RightBottom from "./rightBottom.vue";
+import { getShieldMachineData, getShieldMachineList } from "@/api/modules/shieldMachine";
+
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+const leftTopRef = ref();
+const leftBottomRef = ref();
+const centerTopRef = ref();
+const rightTopRef = ref();
+const rightBottomRef = ref();
+//定时器
+const interval = ref(null);
+//定时调用
+const startInterval = async () => {
+	interval.value = setInterval(() => {
+		getData();
+	}, 20 * 1000);
+};
+
+const shieldMachineList = ref([]);
+const shieldMachineDevSN = ref(null);
+const shieldMachineData = ref(null);
+
+const getData = async () => {
+	const res = await getShieldMachineData({ deviceSn: shieldMachineDevSN.value, projectSn: store.sn });
+	leftTopRef.value.initData(res.result);
+	leftBottomRef.value.initData(res.result);
+	centerTopRef.value.initData(res.result.tunnelBoringMachineCurrentDataVo, shieldMachineData.value);
+	rightTopRef.value.initData(res.result.tunnelBoringMachineCurrentDataVo);
+	rightBottomRef.value.initData(res.result.tunnelBoringMachineCurrentDataVo);
+};
+
+const getList = async () => {
+	const res = await getShieldMachineList({ projectSn: store.sn });
+	shieldMachineList.value = res.result;
+	if (shieldMachineList.value.length > 0) {
+		shieldMachineData.value = shieldMachineList.value[0];
+		shieldMachineDevSN.value = shieldMachineData.value.devSn;
+		getData();
+	}
+};
+
+const handleChange = () => {
+	shieldMachineData.value = shieldMachineList.value.find(item => item.devSn === shieldMachineDevSN.value);
+	getData();
+};
+// 在组件销毁时清除 interval
+const destroyInterval = () => {
+	if (interval.value) {
+		clearInterval(interval.value);
+	}
+};
+// 在组件销毁时调用 destroyInterval 方法清除 interval
+onBeforeUnmount(() => {
+	destroyInterval();
+});
+window.onbeforeunload = () => {
+	destroyInterval();
+};
+onMounted(async () => {
+	// getData();
+	getList();
+	startInterval();
+});
+</script>
+<style lang="scss" scoped>
+.projectContent {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	.left {
+		width: 26%;
+		.leftTop {
+			height: 48.5%;
+			margin-bottom: 3%;
+		}
+		.leftBottom {
+			height: 48.5%;
+		}
+	}
+	.center {
+		position: relative;
+		width: 46%;
+		margin: 0 1%;
+		.centerTopSelect {
+			position: absolute;
+			top: 0;
+			right: 0;
+			z-index: 100;
+		}
+
+		.centerTop {
+			height: 97%;
+			margin-bottom: 3%;
+		}
+	}
+	.right {
+		width: 26%;
+
+		.rightTop {
+			height: 48.5%;
+			margin-bottom: 3%;
+		}
+		.rightBottom {
+			height: 48.5%;
+		}
+	}
+}
+
+::v-deep .el-input__wrapper {
+	background: #112d59;
+}
+::v-deep .el-input__inner {
+	color: #fff;
+}
+::v-deep .el-select .el-input .el-select__caret {
+	color: #fff;
+}
+</style>
diff --git a/src/views/sevenLargeScreen/shieldMachine/leftBottom.vue b/src/views/sevenLargeScreen/shieldMachine/leftBottom.vue
new file mode 100644
index 0000000..9597500
--- /dev/null
+++ b/src/views/sevenLargeScreen/shieldMachine/leftBottom.vue
@@ -0,0 +1,416 @@
+<template>
+	<div class="leftBottom">
+		<Card title="掘进进度">
+			<div class="flex pd20">
+				<div class="stat-cards">
+					<div class="stat-card">
+						<div class="stat-title">当日推进环数</div>
+						<div class="stat-value">{{ dataInfo.numberByDay || 0 }}环</div>
+					</div>
+					<div class="stat-card">
+						<div class="stat-title">当月推进环数</div>
+						<div class="stat-value">{{ dataInfo.numberByMonth || 0 }}环</div>
+					</div>
+				</div>
+
+				<!-- 进度仪表盘 -->
+				<div class="gauge-chart">
+					<div class="gauge">
+						<!-- 仪表盘SVG将在JS中生成 -->
+					</div>
+				</div>
+			</div>
+			<!-- 折线图 -->
+			<div class="line-chart">
+				<!-- 折线图将在JS中生成 -->
+			</div>
+		</Card>
+	</div>
+</template>
+
+<script setup>
+import * as echarts from "echarts";
+import Card from "@/components/card.vue";
+import { ref, onMounted } from "vue";
+
+let dataInfo = ref({});
+
+const initData = data => {
+	dataInfo.value = {
+		completeRatio: data.completeRatio,
+		numberByDay: data.numberByDay,
+		numberByMonth: data.numberByMonth,
+		tunnelBoringMachineStats: data.tunnelBoringMachineStats
+	};
+	let xData = [];
+	let seriesData = [];
+	dataInfo.value.tunnelBoringMachineStats.forEach(item => {
+		xData.push(item.createTime);
+		seriesData.push(item.number);
+	});
+	initGauge();
+	initLineChart(xData, seriesData);
+};
+defineExpose({
+	initData
+});
+onMounted(async () => {
+	initLineChart();
+});
+
+// 使用 ECharts 绘制仪表盘
+function initGauge() {
+	let demoData = {
+		name: "进度完成占比",
+		value: dataInfo.value.completeRatio
+	};
+	const gaugeChart = echarts.init(document.querySelector(".gauge"));
+	const option = {
+		graphic: {
+			type: "text",
+			left: "28%",
+			top: "80%",
+			style: {
+				text: demoData.name,
+				textAlign: "center",
+				fill: "#9db5e2",
+				fontSize: 14
+			}
+		},
+		title: {
+			text: "{num|" + demoData.value + "%}",
+			x: "50%",
+			y: "53%",
+			textAlign: "center",
+			textStyle: {
+				rich: {
+					num: {
+						fontWeight: "500",
+						color: "#F8F8FA",
+						fontFamily: "微软雅黑",
+						fontSize: 20
+					}
+				}
+			}
+		},
+		series: [
+			{
+				type: "gauge",
+				radius: "96%", // 1行3个
+				center: ["50%", "70%"],
+				splitNumber: 10,
+				// min: 0,
+				max: 100,
+				startAngle: 180,
+				endAngle: 0,
+				z: 99,
+				// 线
+				axisLine: {
+					lineStyle: {
+						width: 1,
+						color: [[1, "rgba(255,255,255,0)"]]
+					},
+					detail: {
+						formatter: "{value}"
+					},
+					data: [
+						{
+							value: 50,
+							name: "SCORE"
+						}
+					]
+				},
+				//刻度标签。
+				axisTick: {
+					show: true,
+					splitNumber: 6, //刻度的段落数
+					lineStyle: {
+						// color: "#02C2A2",
+						color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+							{
+								offset: 0,
+								color: "#111c3d"
+							},
+							{
+								offset: 0.4,
+								color: "#1f2a47"
+							},
+							{
+								offset: 1,
+								color: "#fcfdfd"
+							}
+						]),
+						width: 8, //刻度的宽度
+						// shadowColor: "#67FFFC",
+						shadowColor: "#576481",
+						shadowBlur: 2
+					},
+					length: 2 //刻度的长度
+				},
+				splitLine: {
+					//文字和刻度的偏移量
+					show: true,
+					length: 0, //长度
+					lineStyle: {
+						color: "#02C2A2",
+						width: 2
+					}
+				},
+				// //刻度线文字
+				axisLabel: {
+					show: false,
+					color: "#02C2A2",
+					fontSize: 12,
+					distance: -20
+				},
+				data: [
+					{
+						value: demoData.value,
+						name: "SCORE",
+						itemStyle: {
+							color: "#02C3A2"
+						}
+					}
+				],
+				pointer: {
+					show: false,
+					length: "12%",
+					radius: "50%",
+					width: 10, //指针粗细
+					offsetCenter: [0, -273]
+				},
+				detail: {
+					show: false
+				},
+				title: {
+					// 仪表盘标题。
+					show: false
+				}
+			},
+			{
+				name: demoData.name,
+				type: "pie",
+				radius: ["65%", "87%"],
+				center: ["50%", "70%"],
+				startAngle: 180,
+				endAngle: 0,
+				color: [
+					{
+						type: "linear",
+						x: 1,
+						y: 0,
+						x2: 0,
+						y2: 0,
+						colorStops: [
+							{
+								offset: 0,
+								color: "#3270F2" // 0% 处的颜色
+							},
+							{
+								offset: 0.5,
+								color: "#64BDEB" // 0% 处的颜色
+							},
+							{
+								offset: 1,
+								color: "#76F5BD" // 100% 处的颜色
+							}
+						]
+					},
+					"transparent"
+				],
+				hoverAnimation: true,
+				legendHoverLink: false,
+				z: 10,
+				labelLine: {
+					normal: {
+						show: false
+					}
+				},
+				data: [
+					{
+						value: (50 * (demoData.value + 10)) / 100
+					},
+					{
+						value: 100 - (50 * (demoData.value + 10)) / 100
+					}
+				]
+			},
+			{
+				type: "pie",
+				hoverAnimation: false,
+				label: {
+					show: false
+				},
+				center: ["50%", "70%"],
+				radius: ["0%", "60%"],
+				startAngle: 180,
+				data: [
+					{
+						value: 100,
+						itemStyle: {
+							normal: {
+								color: {
+									type: "radial",
+									x: 0.5,
+									y: 0.5,
+									r: 0.5,
+									colorStops: [
+										{ offset: 0, color: "#00C2EB" },
+										{ offset: 1, color: "#094461" }
+									]
+								},
+								opacity: 0.2
+							}
+						}
+					},
+					{
+						value: 100,
+						color: "transparent"
+					}
+				]
+			}
+		]
+	};
+	gaugeChart.setOption(option);
+}
+
+// 使用 ECharts 绘制折线图
+function initLineChart(xData, seriesData) {
+	const lineChart = echarts.init(document.querySelector(".line-chart"));
+	const option = {
+		grid: {
+			top: 10,
+			left: 50,
+			right: 40,
+			bottom: 40
+		},
+		xAxis: {
+			type: "category",
+			data: xData,
+			axisLine: {
+				lineStyle: {
+					color: "#294D99"
+				}
+			},
+			axisLabel: {
+				show: true,
+				textStyle: {
+					color: "#FFFFFF" //X轴的数据字体颜色
+				}
+			}
+		},
+
+		yAxis: {
+			type: "value",
+
+			splitLine: {
+				lineStyle: {
+					color: "rgba(255, 255, 255, 0.1)"
+				}
+			},
+			axisLine: {
+				lineStyle: {
+					color: "#294D99"
+				}
+			},
+			axisLabel: {
+				show: true,
+				textStyle: {
+					color: "#FFFFFF" //Y轴的数据字体颜色
+				}
+			}
+		},
+		series: [
+			{
+				data: seriesData,
+				type: "line",
+				smooth: true,
+				symbol: "circle",
+				symbolSize: 8,
+				itemStyle: {
+					color: "#00e4ff"
+				},
+				lineStyle: {
+					color: "#00e4ff",
+					width: 3
+				},
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{
+							offset: 0,
+							color: "rgba(0, 228, 255, 0.3)"
+						},
+						{
+							offset: 1,
+							color: "rgba(0, 228, 255, 0)"
+						}
+					])
+				}
+			}
+		]
+	};
+	lineChart.setOption(option);
+}
+</script>
+
+<style lang="scss" scoped>
+.leftBottom {
+	width: 100%;
+	height: 100%;
+}
+// ::v-deep .h-card .content {
+// 	height: 80%;
+// }
+::v-deep .h-card {
+	position: relative;
+}
+.flex {
+	display: flex;
+	align-items: center;
+	gap: 20px;
+}
+.pd20 {
+	padding: 20px;
+}
+.stat-cards {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+.stat-card {
+	width: 205px;
+	padding: 10px 12px;
+	background-image: url("@/assets/images/shieldMachine/l-b-t-bg.png");
+	background-size: 100% 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.stat-title {
+	font-size: 14px;
+	color: #ffffff;
+}
+
+.stat-value {
+	font-size: 16px;
+	color: #65d7f9;
+}
+
+.gauge-chart {
+	text-align: center;
+}
+
+.gauge {
+	width: 200px;
+	height: 120px;
+	margin: 0 auto;
+}
+
+.line-chart {
+	// height: 300px;
+	// background: rgba(255, 255, 255, 0.05);
+	// border-radius: 8px;
+	height: calc(100% - 120px - 40px);
+}
+</style>
diff --git a/src/views/sevenLargeScreen/shieldMachine/leftTop.vue b/src/views/sevenLargeScreen/shieldMachine/leftTop.vue
new file mode 100644
index 0000000..ad52155
--- /dev/null
+++ b/src/views/sevenLargeScreen/shieldMachine/leftTop.vue
@@ -0,0 +1,122 @@
+<template>
+	<div class="leftTop">
+		<Card title="盾构机状态">
+			<div class="shieldMachineStatus">
+				<div class="shieldMachineStatusItem">
+					<div class="shieldMachineStatusItemTitle">隧道总环数</div>
+					<div class="shieldMachineStatusItemValue">{{ dataInfo.totalNumber || 0 }}</div>
+				</div>
+				<div class="shieldMachineStatusItem">
+					<div class="shieldMachineStatusItemTitle">隧道总里程</div>
+					<div class="shieldMachineStatusItemValue">{{ dataInfo.totalMileage || 0 }}</div>
+				</div>
+				<div class="shieldMachineStatusItem">
+					<div class="shieldMachineStatusItemTitle">当前环数</div>
+					<div class="shieldMachineStatusItemValue">{{ dataInfo.currentNumber || 0 }}</div>
+				</div>
+				<div class="shieldMachineStatusItem">
+					<div class="shieldMachineStatusItemTitle">当前进度</div>
+					<div class="shieldMachineStatusItemValue">{{ dataInfo.totalLength || 0 }}m</div>
+				</div>
+			</div>
+		</Card>
+	</div>
+</template>
+
+<script setup>
+import Card from "@/components/card.vue";
+import { ref } from "vue";
+
+let dataInfo = ref({});
+
+const initData = data => {
+	dataInfo.value = {
+		totalNumber: data.totalNumber,
+		totalMileage: data.totalMileage,
+		currentNumber: data.tunnelBoringMachineCurrentDataVo?.currentNumber,
+		totalLength: data.totalLength
+	};
+};
+defineExpose({
+	initData
+});
+</script>
+
+<style lang="scss" scoped>
+.leftTop {
+	width: 100%;
+	height: 100%;
+}
+// ::v-deep .h-card .content {
+// 	height: 80%;
+// }
+::v-deep .h-card {
+	position: relative;
+}
+.shieldMachineStatus {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+.shieldMachineStatusItem {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	background-image: url("@/assets/images/shieldMachine/l-t-bg.png");
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
+	width: 180px;
+	height: 180px;
+	&:nth-child(1) {
+		position: absolute;
+		top: 10px;
+		left: 10px;
+	}
+	&:nth-child(2) {
+		position: absolute;
+		top: 10px;
+		right: 100px;
+		// background-image: url("@/assets/images/shieldMachine/l-t-bg2.png");
+	}
+	&:nth-child(3) {
+		position: absolute;
+		bottom: 10px;
+		left: 38%;
+		transform: translateX(-50%);
+	}
+	&:nth-child(4) {
+		position: absolute;
+		bottom: 10px;
+		right: 10px;
+		// background-image: url("@/assets/images/shieldMachine/l-t-bg2.png");
+	}
+	.shieldMachineStatusItemTitle {
+		font-weight: 500;
+		font-size: 14px;
+		color: #ffffff;
+		line-height: 16px;
+	}
+
+	.shieldMachineStatusItemValue {
+		font-family: DINPro, DINPro;
+		font-weight: bold;
+		font-size: 32px;
+		line-height: 38px;
+		background: linear-gradient(90deg, #ffffff 0%, #65d7f9 100%);
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		&.total {
+			background: linear-gradient(90deg, #ffffff 0%, #a6bded 100%);
+			-webkit-background-clip: text;
+			-webkit-text-fill-color: transparent;
+		}
+
+		&.current {
+			background: linear-gradient(90deg, #fbf2c9 0%, #f2da8c 100%);
+			-webkit-background-clip: text;
+			-webkit-text-fill-color: transparent;
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/shieldMachine/rightBottom.vue b/src/views/sevenLargeScreen/shieldMachine/rightBottom.vue
new file mode 100644
index 0000000..a8ebfba
--- /dev/null
+++ b/src/views/sevenLargeScreen/shieldMachine/rightBottom.vue
@@ -0,0 +1,113 @@
+<template>
+	<div class="rightBottom">
+		<Card title="注浆控制">
+			<div class="grouting-container">
+				<div v-for="(item, index) in dataInfo" :key="index" class="grouting-item">
+					<div class="item-content">
+						<div class="name">{{ item.label }}</div>
+						<div class="data">
+							<div>压力:{{ item.value }}bar</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</Card>
+	</div>
+</template>
+
+<script setup>
+import Card from "@/components/card.vue";
+import { ref } from "vue";
+
+let dataInfo = ref({});
+
+const initData = data => {
+	dataInfo.value = [
+		{
+			label: "左上",
+			value: data.leftUpGroutingPressure || 0
+		},
+		{
+			label: "右上",
+			value: data.rightUpGroutingPressure || 0
+		},
+		{
+			label: "左中",
+			value: data.leftCenterGroutingPressure || 0
+		},
+		{
+			label: "右中",
+			value: data.rightCenterGroutingPressure || 0
+		},
+		{
+			label: "左下",
+			value: data.leftBelowGroutingPressure || 0
+		},
+		{
+			label: "右下",
+			value: data.rightBelowGroutingPressure || 0
+		}
+	];
+};
+defineExpose({
+	initData
+});
+</script>
+
+<style lang="scss" scoped>
+.rightBottom {
+	width: 100%;
+	height: 100%;
+}
+// ::v-deep .h-card .content {
+// 	height: 80%;
+// }
+
+::v-deep .h-card {
+	position: relative;
+}
+
+.grouting-container {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 30px;
+	padding: 30px 20px;
+}
+
+.grouting-item {
+	// background: rgba(0, 60, 161, 0.3);
+	// border: 1px solid #0066cc;
+	background-image: url("@/assets/images/shieldMachine/r-b-i-bg.png");
+	background-size: 100% 100%;
+	// padding: 12px;
+	border-radius: 4px;
+}
+
+.item-content {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	// align-items: center;
+	// gap: 15px;
+}
+
+.name {
+	width: 100%;
+	height: 28px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 16px;
+	color: #4488ff;
+	background: #103052;
+}
+
+.data {
+	color: #fff;
+	font-size: 14px;
+	height: 50px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+</style>
diff --git a/src/views/sevenLargeScreen/shieldMachine/rightTop.vue b/src/views/sevenLargeScreen/shieldMachine/rightTop.vue
new file mode 100644
index 0000000..2f9a4b5
--- /dev/null
+++ b/src/views/sevenLargeScreen/shieldMachine/rightTop.vue
@@ -0,0 +1,187 @@
+<template>
+	<div class="rightTop">
+		<Card title="导向系统">
+			<div class="guidance-system">
+				<div class="deviation-values">
+					<div
+						class="item"
+						v-for="item in deviationValues"
+						:key="item.label"
+						:class="{ active: deviationActive === item.label }"
+						@click="deviationActive = item.label"
+					>
+						<span class="label">{{ item.label }}</span>
+						<span class="value">{{ item.value }}mm/s</span>
+					</div>
+				</div>
+
+				<div class="radar-info">
+					<!-- <div class="left-radar">
+						<img src="@/assets/images/shieldMachine/r-t-ic.png" alt="radar" />
+					</div> -->
+					<div class="right-info">
+						<div class="angle-card" v-for="item in radarInfo" :key="item.label">
+							<div class="angle-info">
+								<div class="title">{{ item.label }}</div>
+								<div class="value">{{ item.value }}°</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</Card>
+	</div>
+</template>
+
+<script setup>
+import Card from "@/components/card.vue";
+import { ref } from "vue";
+
+const initData = data => {
+	deviationValues.value = [
+		{ label: "垂直偏差趋势", value: data.verticalDeviation },
+		{ label: "水平偏差趋势", value: data.horizontalDeviation }
+	];
+	radarInfo.value = [
+		{ label: "俯仰角", value: data.pitchAngle },
+		{ label: "滚动角", value: data.rollPosition }
+	];
+};
+defineExpose({
+	initData
+});
+
+const deviationActive = ref("垂直偏差趋势");
+const deviationValues = ref([
+	{ label: "垂直偏差趋势", value: "5mm/s" },
+	{ label: "水平偏差趋势", value: "-mm/s" }
+]);
+
+const radarInfo = ref([
+	{ label: "俯仰角", value: "-0.8°" },
+	{ label: "滚动角", value: "0.03°" }
+]);
+</script>
+
+<style lang="scss" scoped>
+.rightTop {
+	width: 100%;
+	height: 100%;
+}
+
+.guidance-system {
+	display: flex;
+	// justify-content: space-between;
+	flex-direction: column;
+	padding: 0 20px;
+	height: 100%;
+	color: #fff;
+	box-sizing: border-box;
+
+	.deviation-values {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		padding: 0 10px;
+		border-bottom: 1px solid #6281a8;
+		box-sizing: border-box;
+		gap: 80px;
+		height: 70px;
+
+		.item {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			padding-left: 10px;
+			padding-right: 10px;
+			box-sizing: border-box;
+			border-bottom: 1px solid transparent;
+			.label {
+				font-size: 12px;
+				color: #809aab;
+				line-height: 17px;
+			}
+			.value {
+				font-weight: 500;
+				font-size: 20px;
+				color: #50ff01;
+				line-height: 28px;
+			}
+			&.active {
+				background: linear-gradient(1deg, rgba(255, 149, 0, 0.2) 0%, rgba(203, 136, 63, 0) 100%);
+				border-bottom: 1px solid #ff7200;
+				.label {
+					color: #bae7ff;
+				}
+				.value {
+					color: #ffba4a;
+				}
+			}
+		}
+	}
+
+	.radar-info {
+		display: flex;
+		justify-content: space-between;
+		.left-radar {
+			position: relative;
+			flex: 1;
+
+			img {
+				width: 100%;
+				height: auto;
+				user-select: none;
+				-webkit-user-drag: none;
+			}
+		}
+
+		.right-info {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			gap: 20px;
+			margin: 16px;
+			flex: 1;
+
+			.angle-card {
+				position: relative;
+				width: 100%;
+				height: 120px;
+				background: url("@/assets/images/shieldMachine/r-t-c-bg.png") no-repeat center center;
+				background-size: 100% 100%;
+				img {
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+				}
+
+				.angle-info {
+					position: absolute;
+					top: 50%;
+					left: 10%;
+					transform: translate(-50%, -50%);
+					text-align: center;
+
+					.title {
+						font-size: 16px;
+						margin-bottom: 5px;
+					}
+
+					.value {
+						font-size: 24px;
+						color: #00ffff;
+					}
+				}
+			}
+		}
+	}
+}
+
+// ::v-deep .h-card .content {
+// 	height: 80%;
+// }
+::v-deep .h-card {
+	position: relative;
+}
+</style>