diff --git a/src/assets/images/foundationPitMonitor/pointPic.png b/src/assets/images/foundationPitMonitor/pointPic.png
new file mode 100644
index 0000000..4674e36
Binary files /dev/null and b/src/assets/images/foundationPitMonitor/pointPic.png differ
diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts
index 55f1e18..43e74e1 100644
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@@ -117,6 +117,11 @@ export const staticRouter: RouteRecordRaw[] = [
 				path: "/toxicGasMonitor",
 				name: "有毒气体监测",
 				component: () => import("@/views/sevenLargeScreen/safetyManagement/toxicGasMonitor/index.vue")
+			},
+			{
+				path: "/foundationPitMonitor",
+				name: "基坑监测",
+				component: () => import("@/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/index.vue")
 			}
 		],
 		meta: {
diff --git a/src/views/sevenLargeScreen/indexL.vue b/src/views/sevenLargeScreen/indexL.vue
index ed3249b..f08286f 100644
--- a/src/views/sevenLargeScreen/indexL.vue
+++ b/src/views/sevenLargeScreen/indexL.vue
@@ -131,7 +131,6 @@ let menuList = ref([
 		moduleName: "劳务管理",
 		modulePath: "/laborManagement"
 	},
-
 	{
 		moduleName: "安全管理",
 		modulePath: "/securityManagement",
@@ -140,6 +139,10 @@ let menuList = ref([
 				menuName: "安全管理",
 				companyPath: "/securityManagement"
 			},
+			{
+				companyPath: "/foundationPitMonitor",
+				menuName: "基坑监测"
+			},
 			{
 				menuName: "临边防护",
 				companyPath: "/edgeProtection"
diff --git a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/index.vue b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/index.vue
new file mode 100644
index 0000000..45b3e77
--- /dev/null
+++ b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/index.vue
@@ -0,0 +1,111 @@
+<template>
+	<div class="pit-box">
+		<div class="pit-content">
+			<div class="pit-left">
+				<div class="left-top">
+					<div class="top-left">
+						<TopLeft></TopLeft>
+					</div>
+					<div class="top-right">
+						<TopRight></TopRight>
+					</div>
+				</div>
+				<div class="left-bottom">
+					<LeftBottom></LeftBottom>
+				</div>
+			</div>
+			<div class="pit-right">
+				<div class="right-first">
+					<RightFirst></RightFirst>
+				</div>
+				<div class="right-second">
+					<RightSecond></RightSecond>
+				</div>
+				<div class="right-third">
+					<RightThird></RightThird>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import TopLeft from "@/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/topLeft.vue";
+import TopRight from "@/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/topRight.vue";
+import LeftBottom from "@/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/leftBottom.vue";
+import RightFirst from "@/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightFirst.vue";
+import RightSecond from "@/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightSecond.vue";
+import RightThird from "@/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightThird.vue";
+
+export default {
+	components: { TopLeft, TopRight, LeftBottom, RightFirst, RightSecond, RightThird }
+};
+</script>
+
+<style lang="scss" scoped>
+.pit-box {
+	width: 100%;
+	height: 100%;
+	.pit-content {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		.pit-left {
+			width: 50%;
+			margin-right: 1%;
+			.left-top {
+				width: 100%;
+				height: 50%;
+				margin-bottom: 1%;
+				display: flex;
+				justify-content: space-between;
+				.top-left {
+					width: 49%;
+					margin-right: 1%;
+				}
+				.top-right {
+					width: 49%;
+				}
+			}
+			.left-bottom {
+				width: 100%;
+				height: 50%;
+				:deep(.h-card) {
+					.content {
+						margin-top: 1% !important;
+					}
+				}
+			}
+		}
+		.pit-right {
+			width: 50%;
+			.right-first {
+				height: 30%;
+				:deep(.h-card) {
+					.content {
+						margin-top: 1% !important;
+					}
+				}
+			}
+			.right-second {
+				height: 30%;
+				margin-top: 4%;
+				:deep(.h-card) {
+					.content {
+						margin-top: 1% !important;
+					}
+				}
+			}
+			.right-third {
+				height: 30%;
+				margin-top: 4%;
+				:deep(.h-card) {
+					.content {
+						margin-top: 1% !important;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/leftBottom.vue b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/leftBottom.vue
new file mode 100644
index 0000000..8a2056e
--- /dev/null
+++ b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/leftBottom.vue
@@ -0,0 +1,394 @@
+<template>
+	<Card title="土地深层水平位移监测">
+		<div class="pit-left-bottom">
+			<div class="methane-content">
+				<div class="select-right">
+					<el-form-item label="测点编号">
+						<el-select v-model="selectPoint" style="width: 75%" size="small">
+							<el-option v-for="(item, index) in pointList" :key="index" :label="item.dayType" :value="item.value" />
+						</el-select>
+					</el-form-item>
+					<!-- <el-form-item label="次数">
+						<el-select v-model="selectTime" style="width: 70%" size="small">
+							<el-option v-for="(item, index) in timeList" :key="index" :label="item.dayType" :value="item.value" />
+						</el-select>
+					</el-form-item> -->
+					<div class="check-time">监测时间: {{ checkTime }}</div>
+				</div>
+				<div id="pitLeftBottom" ref="pitLeftBottom" style="width: 100%; height: 100%"></div>
+			</div>
+		</div>
+	</Card>
+</template>
+
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import symbolIcon from "@/assets/images/toxicGasMonitor/lineIcon.png";
+import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
+
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+import * as echarts from "echarts";
+// import { getSelectDataListApi } from "@/api/modules/distribution";
+// import Card from "@/components/card.vue";
+import { GlobalStore } from "@/stores";
+import mitts from "@/utils/bus"; //兄弟组件传值
+let checkTime = ref("2023-08-23 19:08:26" as any);
+const store = GlobalStore();
+// x轴
+
+// 图表数据项
+let option = ref(null as any);
+// 选中
+let selectPoint = ref(1);
+let selectTime = ref(1);
+
+// 当前对应的种类
+// let nowType = ref("温度");
+let pointList = ref([
+	{
+		value: 1,
+		dayType: "基坑监测点001"
+	},
+	{
+		value: 2,
+		dayType: "基坑监测点002"
+	},
+	{
+		value: 3,
+		dayType: "基坑监测点003"
+	},
+	{
+		value: 4,
+		dayType: "基坑监测点004"
+	}
+]);
+
+let timeList = ref([
+	{
+		value: 1,
+		dayType: "1次"
+	},
+	{
+		value: 2,
+		dayType: "2次"
+	},
+	{
+		value: 3,
+		dayType: "3次"
+	}
+]);
+
+function initOption() {
+	option.value = {
+		legend: {
+			show: true,
+			bottom: "3%",
+			icon: "rect",
+			itemWidth: 10,
+			itemHeight: 10,
+			itemGap: 55,
+			textStyle: {
+				color: "#FFFFFF"
+			}
+		},
+		tooltip: {
+			trigger: "axis",
+			backgroundColor: "rgba(0, 0, 0, 0.9)",
+			borderColor: "#010306",
+			textStyle: {
+				color: "#FFFFFF"
+			},
+			axisPointer: {
+				lineStyle: {
+					color: {
+						type: "linear",
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [
+							{
+								offset: 0,
+								color: "rgba(0, 255, 233,0)"
+							},
+							{
+								offset: 0.5,
+								color: "rgba(255, 255, 255,1)"
+							},
+							{
+								offset: 1,
+								color: "rgba(0, 255, 233,0)"
+							}
+						],
+						global: false
+					}
+				}
+			},
+			formatter: function (params) {
+				// console.log("tooltip", params);
+				let currentInnerHtml = "";
+				for (let index = 0; index < params.length; index++) {
+					let nowTime = params[index].seriesName;
+					let displace = params[index].data[0];
+					let deepHeight = params[index].data[1];
+					let stateText = "正常";
+					let markLine = params[index].marker;
+					if (displace > 40 || displace < -40) {
+						stateText = "异常";
+					}
+					currentInnerHtml =
+						currentInnerHtml +
+						checkTime.value +
+						"<br/>" +
+						"第" +
+						nowTime +
+						"<br/>" +
+						markLine +
+						"状态: " +
+						stateText +
+						"<br/>" +
+						"位移: " +
+						displace +
+						"mm" +
+						"<br/>" +
+						"深度: " +
+						" " +
+						deepHeight +
+						"m" +
+						"<br/>" +
+						"<br/>";
+				}
+				return currentInnerHtml;
+			}
+		},
+		grid: {
+			top: "25%",
+			left: "8%",
+			right: "12%",
+			bottom: "20%"
+			// containLabel: true
+		},
+		xAxis: [
+			{
+				type: "value", // 设置 X 轴为数值轴
+				name: "位移（mm）", // 设置 X 轴的名称，表示位移
+				position: "top",
+				nameLocation: "end", // 设置 X 轴名称的位置
+				nameGap: 20, // 设置 X 轴名称与轴线的距离
+				inverse: false, // 不反转 X 轴
+				nameTextStyle: {
+					// align: "right", // 将 Y 轴名称文字右对齐
+					// verticalAlign: "middle", // 将 Y 轴名称文字垂直居中
+					// padding: [0, 0, 0, 10], // 设置名称文字的内边距，调整位置
+					color: "#fff"
+					// nameLocation: "start"
+				},
+				min: -60,
+				max: 60,
+				splitNumber: 3,
+				splitLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				axisLabel: {
+					show: true,
+					margin: 20,
+					textStyle: {
+						color: "#fff"
+					}
+				},
+				axisTick: {
+					show: true
+				}
+			}
+		],
+
+		yAxis: [
+			{
+				position: "left",
+				type: "value", // 设置 Y 轴为数值轴
+				name: "深度（m）", // 设置 Y 轴的名称，表示深度
+				nameLocation: "end", // 设置 Y 轴名称的位置
+				nameGap: 25, // 设置 Y 轴名称与轴线的距离
+				inverse: true, // 反转 Y 轴，使其变为第四象限坐标系
+				nameTextStyle: {
+					color: "#fff",
+					verticalAlign: "middle",
+					padding: [0, 760, 0, 0] // 设置名称文字的内边距，调整位置
+				},
+				alignTicks: true,
+				// min: 0,
+				// max: 140,
+				splitNumber: 3,
+				splitLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				axisLabel: {
+					show: true,
+					textStyle: {
+						color: "#fff"
+					}
+				},
+				axisTick: {
+					show: true
+				}
+			}
+		],
+		series: [
+			{
+				color: "#4AC0F3",
+				name: "1次",
+				type: "line", // 设置系列类型为折线图
+				data: [
+					[-48, 1],
+					[-25, 2],
+					[23, 5],
+					[42, 3],
+					[51, 6]
+				], // 调整数据点的 x 坐标为负数，使其显示在第四象限
+				markLine: {
+					// 添加 MarkLine 组件配置
+					data: [
+						// { type: 'average', name: '平均值' }, // 平均值标注线
+						{ xAxis: 40, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
+						{ xAxis: 60, name: "控制值", lineStyle: { color: "#EEA959" } }, // 自定义阈值标注线
+						{ xAxis: -40, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
+						{ xAxis: -60, name: "控制值", lineStyle: { color: "#EEA959" } } // 自定义阈值标注线
+					],
+					label: {
+						normal: {
+							color: "inherit",
+							fontSize: 14,
+							position: "insideEndBottom",
+							distance: [0, -25],
+							formatter: function (params) {
+								return params.name + "（" + params.value + "）";
+							}
+						}
+					}
+				},
+				smooth: true // 设置线条平滑显示
+			},
+			{
+				color: "#81F279",
+				name: "2次",
+				type: "line", // 设置系列类型为折线图
+				data: [
+					[-48, 1],
+					[-37, 2],
+					[25, 5],
+					[43, 3],
+					[51, 6]
+				], // 调整数据点的 x 坐标为负数，使其显示在第四象限
+				smooth: true // 设置线条平滑显示
+			},
+			{
+				color: "#6375C7",
+				name: "3次",
+				type: "line", // 设置系列类型为折线图
+				data: [
+					[-48, 1],
+					[-45, 2],
+					[23, 5],
+					[45, 3],
+					[52, 6]
+				], // 调整数据点的 x 坐标为负数，使其显示在第四象限
+				smooth: true // 设置线条平滑显示
+			}
+		]
+	};
+}
+
+function drawChart() {
+	initOption();
+	// console.log("绘制前数据", yData.value);
+	let pitLeftBottom = echarts.init(document.getElementById("pitLeftBottom"));
+	pitLeftBottom.setOption(option.value);
+}
+
+//获取当前时间-24小时
+// function generateTimes() {
+// 	let timeArrays = new Array(24).fill("");
+// 	timeArrays.forEach((item, index) => (timeArrays[index] = (index < 10 ? "0" + index : index) + ":00"));
+// 	return timeArrays;
+// }
+
+onMounted(async () => {
+	drawChart();
+});
+
+// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
+onBeforeUnmount(async () => {
+	mitts.off("devSn");
+});
+</script>
+
+<style lang="scss" scoped>
+.pit-left-bottom {
+	width: 100%;
+	height: 100%;
+	.title {
+		height: 10%;
+		line-height: 33px;
+		text-align: left;
+		font-size: calc(100vw * 18 / 1920);
+		color: #ffffff;
+		background: url("@/assets/images/titleBig.webp") no-repeat;
+		background-size: 100% 100%;
+		i {
+			font-family: OPPOSansH;
+			margin-left: 6%;
+		}
+	}
+	.methane-content {
+		height: 100%;
+		background: url("@/assets/images/cardImg.png") no-repeat;
+		background-size: 100% 100%;
+		position: relative;
+		.select-right {
+			position: absolute;
+			display: flex;
+			right: -3%;
+			width: 50%;
+			top: 5%;
+			z-index: 9;
+			.check-time {
+				color: #ffffff;
+				font-size: 12px;
+				margin-top: 1%;
+			}
+		}
+	}
+}
+:deep(.el-input__wrapper) {
+	background: #112d59;
+	padding-left: 10%;
+}
+:deep(.el-input__inner) {
+	color: #fff;
+}
+:deep(.el-select .el-input .el-select__caret) {
+	color: #fff;
+}
+:deep(.el-form-item--default .el-form-item__label) {
+	color: #fff;
+	font-size: 12px;
+}
+</style>
diff --git a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightFirst.vue b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightFirst.vue
new file mode 100644
index 0000000..4980139
--- /dev/null
+++ b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightFirst.vue
@@ -0,0 +1,425 @@
+<template>
+	<Card title="锚杆内力监测">
+		<div class="pit-right-first">
+			<div class="pit-content">
+				<div class="select-right">
+					<div style="width: 33%; margin-right: 5%">
+						<el-date-picker
+							v-model="rangeTime"
+							type="datetimerange"
+							range-separator="至"
+							start-placeholder="开始时间"
+							end-placeholder="结束时间"
+							:clearable="false"
+							size="small"
+							@change="selectRangeTime"
+						/>
+					</div>
+					<el-select v-model="selectPoint" style="width: 15%; margin-right: 5%" size="small">
+						<el-option v-for="(item, index) in pointList" :key="index" :label="item.dayType" :value="item.value" />
+					</el-select>
+					<el-select v-model="selectTime" style="width: 15%" size="small">
+						<el-option v-for="(item, index) in timeList" :key="index" :label="item.dayType" :value="item.value" />
+					</el-select>
+				</div>
+				<div id="pitRightFirst" ref="pitRightFirst" style="width: 100%; height: 100%"></div>
+			</div>
+		</div>
+	</Card>
+</template>
+
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
+
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+import * as echarts from "echarts";
+// import { getSelectDataListApi } from "@/api/modules/distribution";
+// import Card from "@/components/card.vue";
+import { GlobalStore } from "@/stores";
+import mitts from "@/utils/bus"; //兄弟组件传值
+const store = GlobalStore();
+// x轴
+let twenty_four_time = ref([] as any);
+// Y轴单位
+let unit = ref("内力(kN)" as any);
+// Y轴数据
+let yData1 = ref([
+	["2023-9-19 05:15:00", 12],
+	["2023-9-19 15:15:00", 160],
+	["2023-9-19 17:15:00", 50],
+	["2023-9-19 19:15:00", 24],
+	["2023-9-20 05:15:00", 30],
+	["2023-9-20 15:15:00", 60]
+] as any);
+
+// 图表数据项
+let option = ref(null as any);
+// 选中
+let rangeTime = ref("");
+let selectPoint = ref(1);
+let selectTime = ref(1);
+
+// 当前对应的种类
+// let nowType = ref("温度");
+let pointList = ref([
+	{
+		value: 1,
+		dayType: "基坑监测点001"
+	},
+	{
+		value: 2,
+		dayType: "基坑监测点002"
+	},
+	{
+		value: 3,
+		dayType: "基坑监测点003"
+	},
+	{
+		value: 4,
+		dayType: "基坑监测点004"
+	}
+]);
+
+let timeList = ref([
+	{
+		value: 1,
+		dayType: "本次内力"
+	},
+	{
+		value: 2,
+		dayType: "本次变化"
+	}
+]);
+
+// 时间轴起止时间
+let startValue = ref("2023-9-19 05:15:00" as any);
+let endValue = ref("2023-9-21 05:15:00" as any);
+
+function selectRangeTime(e: any) {
+	console.log("选择时间", e);
+	startValue.value = e[0];
+	endValue.value = e[1];
+	drawChart();
+}
+
+function initOption() {
+	option.value = {
+		// backgroundColor: '#071c3a',
+		dataZoom: [
+			{
+				// orient: "vertical", //水平显示
+				type: "slider",
+				show: true, //显示滚动条
+				height: 0,
+				// startValue: startValue.value, //起始值
+				// endValue: endValue.value, //结束值
+				start: 0,
+				end: 35,
+				showDetail: false,
+				bottom: "8%",
+				moveHandleStyle: {
+					color: "#4AC0F3"
+				},
+				backgroundColor: "#193C8D"
+			}
+		],
+		tooltip: {
+			trigger: "axis",
+			backgroundColor: "rgba(0, 0, 0, 0.9)",
+			borderColor: "#010306",
+			textStyle: {
+				color: "#FFFFFF"
+			},
+			axisPointer: {
+				lineStyle: {
+					color: {
+						type: "linear",
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [
+							{
+								offset: 0,
+								color: "rgba(0, 255, 233,0)"
+							},
+							{
+								offset: 0.5,
+								color: "rgba(255, 255, 255,1)"
+							},
+							{
+								offset: 1,
+								color: "rgba(0, 255, 233,0)"
+							}
+						],
+						global: false
+					}
+				}
+			},
+			formatter: function (params) {
+				// console.log("tooltip", params);
+				let currentMarker = "";
+				let currentState = "";
+				if (params[0].value[1] > 150 || params[0].value[1] < -150) {
+					currentState = "超出报警值";
+					currentMarker = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#f00;"> </span>`;
+				} else {
+					currentMarker = params[0].marker;
+					currentState = "正常";
+				}
+				return (
+					params[0].axisValueLabel +
+					params[0].name +
+					"<br/>" +
+					"分类:" +
+					// params[0].seriesName +
+					"本次内力" +
+					"<br/>" +
+					currentMarker +
+					// params[0].marker +
+					"状态:" +
+					currentState +
+					"<br/>" +
+					params[0].seriesName +
+					":" +
+					params[0].value[1] +
+					"kN"
+				);
+			}
+		},
+		grid: {
+			top: "35%",
+			left: "7%",
+			right: "3%",
+			bottom: "20%"
+			// containLabel: true
+		},
+		xAxis: [
+			{
+				type: "time",
+				minInterval: 3600 * 1000 * 6,
+				min: startValue.value,
+				max: endValue.value,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				splitArea: {
+					// show: true,
+					color: "#f00",
+					lineStyle: {
+						color: "#f00"
+					}
+				},
+				axisLabel: {
+					color: "#fff",
+					formatter: function (value) {
+						//在这里写你需要的时间格式
+						let t_date = new Date(value);
+						return (
+							[t_date.getMonth() + 1, t_date.getDate()].join("-") +
+							" " +
+							[t_date.getHours(), t_date.getMinutes()].join(":") +
+							"0:00"
+						);
+					}
+				},
+				splitLine: {
+					show: false
+				},
+				boundaryGap: false
+				// data: twenty_four_time.value
+			}
+		],
+
+		yAxis: [
+			{
+				name: unit.value,
+				nameGap: 25,
+				nameTextStyle: {
+					align: "right", // 将 Y 轴名称文字右对齐
+					verticalAlign: "middle", // 将 Y 轴名称文字垂直居中
+					padding: [0, 5, 0, 0], // 设置名称文字的内边距，调整位置
+					color: "#fff",
+					nameLocation: "start"
+				},
+				type: "value",
+				min: -300,
+				max: 300,
+				splitNumber: 3,
+				splitLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				axisLabel: {
+					show: true,
+					margin: 20,
+					textStyle: {
+						color: "#fff"
+					}
+				},
+				axisTick: {
+					show: true
+				}
+			}
+		],
+		series: [
+			{
+				showAllSymbol: true,
+				// symbol: `image://${symbolIcon2}`,
+				// symbol: "circle",
+				symbolSize: 8,
+				smooth: true, //是否平滑
+				name: "基坑监测点001",
+				type: "line",
+				// symbol: "emptyCircle",
+				color: "#4AC0F3",
+				data: yData1.value,
+				markLine: {
+					// 添加 MarkLine 组件配置
+					data: [
+						// { type: 'average', name: '平均值' }, // 平均值标注线
+						{ yAxis: 250, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
+						{ yAxis: 150, name: "控制值", lineStyle: { color: "#EEA959" } }, // 自定义阈值标注线
+						{ yAxis: -250, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
+						{ yAxis: -150, name: "控制值", lineStyle: { color: "#EEA959" } } // 自定义阈值标注线
+					],
+					label: {
+						normal: {
+							// color: function (params) {
+							// 	console.log(params, "特殊值");
+							// 	// return params.lineStyle.color;
+							// },
+							color: "inherit",
+							fontSize: 14,
+							position: "insideEndBottom",
+							distance: [15, -15],
+							formatter: function (params) {
+								return params.value;
+							}
+						}
+					}
+				}
+			}
+		]
+	};
+}
+
+// function countTime() {
+// 	// 设置起始时间和结束时间
+// 	let startDate = new Date("2023-09-18T18:02:00");
+// 	let endDate = new Date("2023-09-21T19:02:00");
+// 	// 存放小时数
+// 	let timeData = [];
+// 	// 返回特定小时数
+// 	const hours = [0, 6, 12, 18]; // 0时、6时、12时、18时
+// 	for (let i = 0; i < 72; i++) {
+// 		// 每次循环，将时间递增一小时
+// 		const date = new Date(startDate);
+// 		date.setHours(startDate.getHours() + i);
+
+// 		// 仅将特定小时数进行处理
+// 		if (hours.includes(date.getHours())) {
+// 			// 格式化为mm-dd hh:00:00格式
+// 			const month = ("0" + (date.getMonth() + 1)).slice(-2);
+// 			const day = ("0" + date.getDate()).slice(-2);
+// 			const hour = ("0" + date.getHours()).slice(-2);
+// 			const formattedTime = `2023-${month}-${day} ${hour}:00:00`;
+// 			timeData.push(formattedTime);
+// 			// console.log(formattedTime, "时间");
+// 		}
+// 		// 超过结束时间，退出循环
+// 		if (date >= endDate) {
+// 			break;
+// 		}
+// 	}
+// 	twenty_four_time.value = timeData;
+// 	drawChart();
+// }
+
+function drawChart() {
+	initOption();
+	// console.log("绘制前数据", yData.value);
+	let pitRightFirst = echarts.init(document.getElementById("pitRightFirst"));
+	pitRightFirst.setOption(option.value);
+}
+
+//获取当前时间-24小时
+// function generateTimes() {
+// 	let timeArrays = new Array(24).fill("");
+// 	timeArrays.forEach((item, index) => (timeArrays[index] = (index < 10 ? "0" + index : index) + ":00"));
+// 	return timeArrays;
+// }
+
+onMounted(async () => {
+	drawChart();
+});
+
+// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
+onBeforeUnmount(async () => {
+	mitts.off("devSn");
+});
+</script>
+
+<style lang="scss" scoped>
+.pit-right-first {
+	width: 100%;
+	height: 100%;
+	.title {
+		height: 10%;
+		line-height: 33px;
+		text-align: left;
+		font-size: calc(100vw * 18 / 1920);
+		color: #ffffff;
+		background: url("@/assets/images/titleBig.webp") no-repeat;
+		background-size: 100% 100%;
+		i {
+			font-family: OPPOSansH;
+			margin-left: 6%;
+		}
+	}
+	.pit-content {
+		height: 100%;
+		background: url("@/assets/images/cardImg.png") no-repeat;
+		background-size: 100% 100%;
+		position: relative;
+		.select-right {
+			position: absolute;
+			display: flex;
+			right: -25%;
+			width: 100%;
+			top: 5%;
+			z-index: 9;
+		}
+	}
+}
+:deep(.el-input__wrapper) {
+	background: #112d59;
+}
+:deep(.el-input__inner) {
+	color: #fff;
+}
+:deep(.el-select .el-input .el-select__caret) {
+	color: #fff;
+}
+:deep(.el-date-editor) {
+	width: 100%;
+}
+:deep(.el-range-separator) {
+	color: #fff;
+}
+:deep(.el-date-editor .el-range-input) {
+	color: #fff;
+}
+</style>
diff --git a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightSecond.vue b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightSecond.vue
new file mode 100644
index 0000000..5366d4a
--- /dev/null
+++ b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightSecond.vue
@@ -0,0 +1,425 @@
+<template>
+	<Card title="立柱竖向位移监测">
+		<div class="pit-right-first">
+			<div class="pit-content">
+				<div class="select-right">
+					<div style="width: 33%; margin-right: 5%">
+						<el-date-picker
+							v-model="rangeTime"
+							type="datetimerange"
+							range-separator="至"
+							start-placeholder="开始时间"
+							end-placeholder="结束时间"
+							:clearable="false"
+							size="small"
+							@change="selectRangeTime"
+						/>
+					</div>
+					<el-select v-model="selectPoint" style="width: 15%; margin-right: 5%" size="small">
+						<el-option v-for="(item, index) in pointList" :key="index" :label="item.dayType" :value="item.value" />
+					</el-select>
+					<el-select v-model="selectTime" style="width: 15%" size="small">
+						<el-option v-for="(item, index) in timeList" :key="index" :label="item.dayType" :value="item.value" />
+					</el-select>
+				</div>
+				<div id="pitRightSecond" ref="pitRightSecond" style="width: 100%; height: 100%"></div>
+			</div>
+		</div>
+	</Card>
+</template>
+
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
+
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+import * as echarts from "echarts";
+// import { getSelectDataListApi } from "@/api/modules/distribution";
+// import Card from "@/components/card.vue";
+import { GlobalStore } from "@/stores";
+import mitts from "@/utils/bus"; //兄弟组件传值
+const store = GlobalStore();
+// x轴
+let twenty_four_time = ref([] as any);
+// Y轴单位
+let unit = ref("位移(mm)" as any);
+// Y轴数据
+let yData1 = ref([
+	["2023-9-19 05:15:00", 12],
+	["2023-9-19 15:15:00", 16],
+	["2023-9-19 17:15:00", 5],
+	["2023-9-19 19:15:00", 14],
+	["2023-9-20 05:15:00", 10],
+	["2023-9-20 15:15:00", 40]
+] as any);
+
+// 图表数据项
+let option = ref(null as any);
+// 选中
+let rangeTime = ref("");
+let selectPoint = ref(1);
+let selectTime = ref(1);
+
+// 当前对应的种类
+// let nowType = ref("温度");
+let pointList = ref([
+	{
+		value: 1,
+		dayType: "基坑监测点001"
+	},
+	{
+		value: 2,
+		dayType: "基坑监测点002"
+	},
+	{
+		value: 3,
+		dayType: "基坑监测点003"
+	},
+	{
+		value: 4,
+		dayType: "基坑监测点004"
+	}
+]);
+
+let timeList = ref([
+	{
+		value: 1,
+		dayType: "本次内力"
+	},
+	{
+		value: 2,
+		dayType: "本次变化"
+	}
+]);
+
+// 时间轴起止时间
+let startValue = ref("2023-9-19 05:15:00" as any);
+let endValue = ref("2023-9-21 05:15:00" as any);
+
+function selectRangeTime(e: any) {
+	console.log("选择时间", e);
+	startValue.value = e[0];
+	endValue.value = e[1];
+	drawChart();
+}
+
+function initOption() {
+	option.value = {
+		// backgroundColor: '#071c3a',
+		dataZoom: [
+			{
+				// orient: "vertical", //水平显示
+				type: "slider",
+				show: true, //显示滚动条
+				height: 0,
+				// startValue: startValue.value, //起始值
+				// endValue: endValue.value, //结束值
+				start: 0,
+				end: 35,
+				showDetail: false,
+				bottom: "8%",
+				moveHandleStyle: {
+					color: "#4AC0F3"
+				},
+				backgroundColor: "#193C8D"
+			}
+		],
+		tooltip: {
+			trigger: "axis",
+			backgroundColor: "rgba(0, 0, 0, 0.9)",
+			borderColor: "#010306",
+			textStyle: {
+				color: "#FFFFFF"
+			},
+			axisPointer: {
+				lineStyle: {
+					color: {
+						type: "linear",
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [
+							{
+								offset: 0,
+								color: "rgba(0, 255, 233,0)"
+							},
+							{
+								offset: 0.5,
+								color: "rgba(255, 255, 255,1)"
+							},
+							{
+								offset: 1,
+								color: "rgba(0, 255, 233,0)"
+							}
+						],
+						global: false
+					}
+				}
+			},
+			formatter: function (params) {
+				// console.log("tooltip", params);
+				let currentMarker = "";
+				let currentState = "";
+				if (params[0].value[1] > 15 || params[0].value[1] < -15) {
+					currentState = "超出报警值";
+					currentMarker = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#f00;"> </span>`;
+				} else {
+					currentMarker = params[0].marker;
+					currentState = "正常";
+				}
+				return (
+					params[0].axisValueLabel +
+					params[0].name +
+					"<br/>" +
+					"分类:" +
+					// params[0].seriesName +
+					"本次内力" +
+					"<br/>" +
+					currentMarker +
+					// params[0].marker +
+					"状态:" +
+					currentState +
+					"<br/>" +
+					params[0].seriesName +
+					":" +
+					params[0].value[1] +
+					"mm"
+				);
+			}
+		},
+		grid: {
+			top: "35%",
+			left: "7%",
+			right: "3%",
+			bottom: "20%"
+			// containLabel: true
+		},
+		xAxis: [
+			{
+				type: "time",
+				minInterval: 3600 * 1000 * 6,
+				min: startValue.value,
+				max: endValue.value,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				splitArea: {
+					// show: true,
+					color: "#f00",
+					lineStyle: {
+						color: "#f00"
+					}
+				},
+				axisLabel: {
+					color: "#fff",
+					formatter: function (value) {
+						//在这里写你需要的时间格式
+						let t_date = new Date(value);
+						return (
+							[t_date.getMonth() + 1, t_date.getDate()].join("-") +
+							" " +
+							[t_date.getHours(), t_date.getMinutes()].join(":") +
+							"0:00"
+						);
+					}
+				},
+				splitLine: {
+					show: false
+				},
+				boundaryGap: false
+				// data: twenty_four_time.value
+			}
+		],
+
+		yAxis: [
+			{
+				name: unit.value,
+				nameGap: 25,
+				nameTextStyle: {
+					align: "right", // 将 Y 轴名称文字右对齐
+					verticalAlign: "middle", // 将 Y 轴名称文字垂直居中
+					// padding: [0, 0, 0, 0], // 设置名称文字的内边距，调整位置
+					color: "#fff",
+					nameLocation: "start"
+				},
+				type: "value",
+				min: -30,
+				max: 30,
+				splitNumber: 3,
+				splitLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				axisLabel: {
+					show: true,
+					margin: 20,
+					textStyle: {
+						color: "#fff"
+					}
+				},
+				axisTick: {
+					show: true
+				}
+			}
+		],
+		series: [
+			{
+				showAllSymbol: true,
+				// symbol: `image://${symbolIcon2}`,
+				// symbol: "circle",
+				symbolSize: 8,
+				smooth: true, //是否平滑
+				name: "基坑监测点001",
+				type: "line",
+				// symbol: "emptyCircle",
+				color: "#4AC0F3",
+				data: yData1.value,
+				markLine: {
+					// 添加 MarkLine 组件配置
+					data: [
+						// { type: 'average', name: '平均值' }, // 平均值标注线
+						{ yAxis: 25, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
+						{ yAxis: 15, name: "控制值", lineStyle: { color: "#EEA959" } }, // 自定义阈值标注线
+						{ yAxis: -25, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
+						{ yAxis: -15, name: "控制值", lineStyle: { color: "#EEA959" } } // 自定义阈值标注线
+					],
+					label: {
+						normal: {
+							// color: function (params) {
+							// 	console.log(params, "特殊值");
+							// 	// return params.lineStyle.color;
+							// },
+							color: "inherit",
+							fontSize: 14,
+							position: "insideEndBottom",
+							distance: [15, -15],
+							formatter: function (params) {
+								return params.value;
+							}
+						}
+					}
+				}
+			}
+		]
+	};
+}
+
+// function countTime() {
+// 	// 设置起始时间和结束时间
+// 	let startDate = new Date("2023-09-18T18:02:00");
+// 	let endDate = new Date("2023-09-21T19:02:00");
+// 	// 存放小时数
+// 	let timeData = [];
+// 	// 返回特定小时数
+// 	const hours = [0, 6, 12, 18]; // 0时、6时、12时、18时
+// 	for (let i = 0; i < 72; i++) {
+// 		// 每次循环，将时间递增一小时
+// 		const date = new Date(startDate);
+// 		date.setHours(startDate.getHours() + i);
+
+// 		// 仅将特定小时数进行处理
+// 		if (hours.includes(date.getHours())) {
+// 			// 格式化为mm-dd hh:00:00格式
+// 			const month = ("0" + (date.getMonth() + 1)).slice(-2);
+// 			const day = ("0" + date.getDate()).slice(-2);
+// 			const hour = ("0" + date.getHours()).slice(-2);
+// 			const formattedTime = `2023-${month}-${day} ${hour}:00:00`;
+// 			timeData.push(formattedTime);
+// 			// console.log(formattedTime, "时间");
+// 		}
+// 		// 超过结束时间，退出循环
+// 		if (date >= endDate) {
+// 			break;
+// 		}
+// 	}
+// 	twenty_four_time.value = timeData;
+// 	drawChart();
+// }
+
+function drawChart() {
+	initOption();
+	// console.log("绘制前数据", yData.value);
+	let pitRightSecond = echarts.init(document.getElementById("pitRightSecond"));
+	pitRightSecond.setOption(option.value);
+}
+
+//获取当前时间-24小时
+// function generateTimes() {
+// 	let timeArrays = new Array(24).fill("");
+// 	timeArrays.forEach((item, index) => (timeArrays[index] = (index < 10 ? "0" + index : index) + ":00"));
+// 	return timeArrays;
+// }
+
+onMounted(async () => {
+	drawChart();
+});
+
+// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
+onBeforeUnmount(async () => {
+	mitts.off("devSn");
+});
+</script>
+
+<style lang="scss" scoped>
+.pit-right-first {
+	width: 100%;
+	height: 100%;
+	.title {
+		height: 10%;
+		line-height: 33px;
+		text-align: left;
+		font-size: calc(100vw * 18 / 1920);
+		color: #ffffff;
+		background: url("@/assets/images/titleBig.webp") no-repeat;
+		background-size: 100% 100%;
+		i {
+			font-family: OPPOSansH;
+			margin-left: 6%;
+		}
+	}
+	.pit-content {
+		height: 100%;
+		background: url("@/assets/images/cardImg.png") no-repeat;
+		background-size: 100% 100%;
+		position: relative;
+		.select-right {
+			position: absolute;
+			display: flex;
+			right: -25%;
+			width: 100%;
+			top: 5%;
+			z-index: 9;
+		}
+	}
+}
+:deep(.el-input__wrapper) {
+	background: #112d59;
+}
+:deep(.el-input__inner) {
+	color: #fff;
+}
+:deep(.el-select .el-input .el-select__caret) {
+	color: #fff;
+}
+:deep(.el-date-editor) {
+	width: 100%;
+}
+:deep(.el-range-separator) {
+	color: #fff;
+}
+:deep(.el-date-editor .el-range-input) {
+	color: #fff;
+}
+</style>
diff --git a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightThird.vue b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightThird.vue
new file mode 100644
index 0000000..f04cc94
--- /dev/null
+++ b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightThird.vue
@@ -0,0 +1,425 @@
+<template>
+	<Card title="地下水位监测">
+		<div class="pit-right-first">
+			<div class="pit-content">
+				<div class="select-right">
+					<div style="width: 33%; margin-right: 5%">
+						<el-date-picker
+							v-model="rangeTime"
+							type="datetimerange"
+							range-separator="至"
+							start-placeholder="开始时间"
+							end-placeholder="结束时间"
+							:clearable="false"
+							size="small"
+							@change="selectRangeTime"
+						/>
+					</div>
+					<el-select v-model="selectPoint" style="width: 15%; margin-right: 5%" size="small">
+						<el-option v-for="(item, index) in pointList" :key="index" :label="item.dayType" :value="item.value" />
+					</el-select>
+					<el-select v-model="selectTime" style="width: 15%" size="small">
+						<el-option v-for="(item, index) in timeList" :key="index" :label="item.dayType" :value="item.value" />
+					</el-select>
+				</div>
+				<div id="pitRightThird" ref="pitRightThird" style="width: 100%; height: 100%"></div>
+			</div>
+		</div>
+	</Card>
+</template>
+
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
+
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+import * as echarts from "echarts";
+// import { getSelectDataListApi } from "@/api/modules/distribution";
+// import Card from "@/components/card.vue";
+import { GlobalStore } from "@/stores";
+import mitts from "@/utils/bus"; //兄弟组件传值
+const store = GlobalStore();
+// x轴
+let twenty_four_time = ref([] as any);
+// Y轴单位
+let unit = ref("位移(mm)" as any);
+// Y轴数据
+let yData1 = ref([
+	["2023-9-19 05:15:00", 12],
+	["2023-9-19 15:15:00", 160],
+	["2023-9-19 17:15:00", 50],
+	["2023-9-19 19:15:00", 24],
+	["2023-9-20 05:15:00", 30],
+	["2023-9-20 15:15:00", 60]
+] as any);
+
+// 图表数据项
+let option = ref(null as any);
+// 选中
+let rangeTime = ref("");
+let selectPoint = ref(1);
+let selectTime = ref(1);
+
+// 当前对应的种类
+// let nowType = ref("温度");
+let pointList = ref([
+	{
+		value: 1,
+		dayType: "基坑监测点001"
+	},
+	{
+		value: 2,
+		dayType: "基坑监测点002"
+	},
+	{
+		value: 3,
+		dayType: "基坑监测点003"
+	},
+	{
+		value: 4,
+		dayType: "基坑监测点004"
+	}
+]);
+
+let timeList = ref([
+	{
+		value: 1,
+		dayType: "本次内力"
+	},
+	{
+		value: 2,
+		dayType: "本次变化"
+	}
+]);
+
+// 时间轴起止时间
+let startValue = ref("2023-9-19 05:15:00" as any);
+let endValue = ref("2023-9-21 05:15:00" as any);
+
+function selectRangeTime(e: any) {
+	console.log("选择时间", e);
+	startValue.value = e[0];
+	endValue.value = e[1];
+	drawChart();
+}
+
+function initOption() {
+	option.value = {
+		// backgroundColor: '#071c3a',
+		dataZoom: [
+			{
+				// orient: "vertical", //水平显示
+				type: "slider",
+				show: true, //显示滚动条
+				height: 0,
+				// startValue: startValue.value, //起始值
+				// endValue: endValue.value, //结束值
+				start: 0,
+				end: 35,
+				showDetail: false,
+				bottom: "8%",
+				moveHandleStyle: {
+					color: "#4AC0F3"
+				},
+				backgroundColor: "#193C8D"
+			}
+		],
+		tooltip: {
+			trigger: "axis",
+			backgroundColor: "rgba(0, 0, 0, 0.9)",
+			borderColor: "#010306",
+			textStyle: {
+				color: "#FFFFFF"
+			},
+			axisPointer: {
+				lineStyle: {
+					color: {
+						type: "linear",
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [
+							{
+								offset: 0,
+								color: "rgba(0, 255, 233,0)"
+							},
+							{
+								offset: 0.5,
+								color: "rgba(255, 255, 255,1)"
+							},
+							{
+								offset: 1,
+								color: "rgba(0, 255, 233,0)"
+							}
+						],
+						global: false
+					}
+				}
+			},
+			formatter: function (params) {
+				// console.log("tooltip", params);
+				let currentMarker = "";
+				let currentState = "";
+				if (params[0].value[1] > 150 || params[0].value[1] < -150) {
+					currentState = "超出报警值";
+					currentMarker = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#f00;"> </span>`;
+				} else {
+					currentMarker = params[0].marker;
+					currentState = "正常";
+				}
+				return (
+					params[0].axisValueLabel +
+					params[0].name +
+					"<br/>" +
+					"分类:" +
+					// params[0].seriesName +
+					"本次内力" +
+					"<br/>" +
+					currentMarker +
+					// params[0].marker +
+					"状态:" +
+					currentState +
+					"<br/>" +
+					params[0].seriesName +
+					":" +
+					params[0].value[1] +
+					"kN"
+				);
+			}
+		},
+		grid: {
+			top: "35%",
+			left: "7%",
+			right: "3%",
+			bottom: "20%"
+			// containLabel: true
+		},
+		xAxis: [
+			{
+				type: "time",
+				minInterval: 3600 * 1000 * 6,
+				min: startValue.value,
+				max: endValue.value,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				splitArea: {
+					// show: true,
+					color: "#f00",
+					lineStyle: {
+						color: "#f00"
+					}
+				},
+				axisLabel: {
+					color: "#fff",
+					formatter: function (value) {
+						//在这里写你需要的时间格式
+						let t_date = new Date(value);
+						return (
+							[t_date.getMonth() + 1, t_date.getDate()].join("-") +
+							" " +
+							[t_date.getHours(), t_date.getMinutes()].join(":") +
+							"0:00"
+						);
+					}
+				},
+				splitLine: {
+					show: false
+				},
+				boundaryGap: false
+				// data: twenty_four_time.value
+			}
+		],
+
+		yAxis: [
+			{
+				name: unit.value,
+				nameGap: 25,
+				nameTextStyle: {
+					align: "right", // 将 Y 轴名称文字右对齐
+					verticalAlign: "middle", // 将 Y 轴名称文字垂直居中
+					// padding: [0, 5, 0, 0], // 设置名称文字的内边距，调整位置
+					color: "#fff",
+					nameLocation: "start"
+				},
+				type: "value",
+				min: -300,
+				max: 300,
+				splitNumber: 3,
+				splitLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				axisLabel: {
+					show: true,
+					margin: 20,
+					textStyle: {
+						color: "#fff"
+					}
+				},
+				axisTick: {
+					show: true
+				}
+			}
+		],
+		series: [
+			{
+				showAllSymbol: true,
+				// symbol: `image://${symbolIcon2}`,
+				// symbol: "circle",
+				symbolSize: 8,
+				smooth: true, //是否平滑
+				name: "基坑监测点001",
+				type: "line",
+				// symbol: "emptyCircle",
+				color: "#4AC0F3",
+				data: yData1.value,
+				markLine: {
+					// 添加 MarkLine 组件配置
+					data: [
+						// { type: 'average', name: '平均值' }, // 平均值标注线
+						{ yAxis: 250, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
+						{ yAxis: 150, name: "控制值", lineStyle: { color: "#EEA959" } }, // 自定义阈值标注线
+						{ yAxis: -250, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
+						{ yAxis: -150, name: "控制值", lineStyle: { color: "#EEA959" } } // 自定义阈值标注线
+					],
+					label: {
+						normal: {
+							// color: function (params) {
+							// 	console.log(params, "特殊值");
+							// 	// return params.lineStyle.color;
+							// },
+							color: "inherit",
+							fontSize: 14,
+							position: "insideEndBottom",
+							distance: [15, -15],
+							formatter: function (params) {
+								return params.value;
+							}
+						}
+					}
+				}
+			}
+		]
+	};
+}
+
+// function countTime() {
+// 	// 设置起始时间和结束时间
+// 	let startDate = new Date("2023-09-18T18:02:00");
+// 	let endDate = new Date("2023-09-21T19:02:00");
+// 	// 存放小时数
+// 	let timeData = [];
+// 	// 返回特定小时数
+// 	const hours = [0, 6, 12, 18]; // 0时、6时、12时、18时
+// 	for (let i = 0; i < 72; i++) {
+// 		// 每次循环，将时间递增一小时
+// 		const date = new Date(startDate);
+// 		date.setHours(startDate.getHours() + i);
+
+// 		// 仅将特定小时数进行处理
+// 		if (hours.includes(date.getHours())) {
+// 			// 格式化为mm-dd hh:00:00格式
+// 			const month = ("0" + (date.getMonth() + 1)).slice(-2);
+// 			const day = ("0" + date.getDate()).slice(-2);
+// 			const hour = ("0" + date.getHours()).slice(-2);
+// 			const formattedTime = `2023-${month}-${day} ${hour}:00:00`;
+// 			timeData.push(formattedTime);
+// 			// console.log(formattedTime, "时间");
+// 		}
+// 		// 超过结束时间，退出循环
+// 		if (date >= endDate) {
+// 			break;
+// 		}
+// 	}
+// 	twenty_four_time.value = timeData;
+// 	drawChart();
+// }
+
+function drawChart() {
+	initOption();
+	// console.log("绘制前数据", yData.value);
+	let pitRightThird = echarts.init(document.getElementById("pitRightThird"));
+	pitRightThird.setOption(option.value);
+}
+
+//获取当前时间-24小时
+// function generateTimes() {
+// 	let timeArrays = new Array(24).fill("");
+// 	timeArrays.forEach((item, index) => (timeArrays[index] = (index < 10 ? "0" + index : index) + ":00"));
+// 	return timeArrays;
+// }
+
+onMounted(async () => {
+	drawChart();
+});
+
+// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
+onBeforeUnmount(async () => {
+	mitts.off("devSn");
+});
+</script>
+
+<style lang="scss" scoped>
+.pit-right-first {
+	width: 100%;
+	height: 100%;
+	.title {
+		height: 10%;
+		line-height: 33px;
+		text-align: left;
+		font-size: calc(100vw * 18 / 1920);
+		color: #ffffff;
+		background: url("@/assets/images/titleBig.webp") no-repeat;
+		background-size: 100% 100%;
+		i {
+			font-family: OPPOSansH;
+			margin-left: 6%;
+		}
+	}
+	.pit-content {
+		height: 100%;
+		background: url("@/assets/images/cardImg.png") no-repeat;
+		background-size: 100% 100%;
+		position: relative;
+		.select-right {
+			position: absolute;
+			display: flex;
+			right: -25%;
+			width: 100%;
+			top: 5%;
+			z-index: 9;
+		}
+	}
+}
+:deep(.el-input__wrapper) {
+	background: #112d59;
+}
+:deep(.el-input__inner) {
+	color: #fff;
+}
+:deep(.el-select .el-input .el-select__caret) {
+	color: #fff;
+}
+:deep(.el-date-editor) {
+	width: 100%;
+}
+:deep(.el-range-separator) {
+	color: #fff;
+}
+:deep(.el-date-editor .el-range-input) {
+	color: #fff;
+}
+</style>
diff --git a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/topLeft.vue b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/topLeft.vue
new file mode 100644
index 0000000..8079330
--- /dev/null
+++ b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/topLeft.vue
@@ -0,0 +1,238 @@
+<template>
+	<Card title="点位图">
+		<div class="pit-top-left">
+			<div class="point-state-top">
+				<div class="common">
+					<div class="background"></div>
+					<div class="state-text">正常</div>
+				</div>
+				<div class="warn">
+					<div class="background"></div>
+					<div class="state-text">超出报警值</div>
+				</div>
+				<div class="control">
+					<div class="background"></div>
+					<div class="state-text">超出控制值</div>
+				</div>
+			</div>
+			<div class="point-map">
+				<img src="@/assets/images/foundationPitMonitor/pointPic.png" alt="" />
+				<div class="point-list" v-for="item in list" :key="item.id">
+					<div
+						class="point-item"
+						:class="
+							item.alarmState == 1
+								? 'changeColor1'
+								: item.alarmState == 2
+								? 'changeColor2'
+								: item.alarmState == 3
+								? 'changeColor3'
+								: ''
+						"
+						:style="{
+							left: item.xMap + 'px',
+							top: item.yMap + 'px'
+						}"
+						@click="openDialog(item)"
+					></div>
+					<div
+						class="item-dialog"
+						:style="{
+							left: item.xMap + 20 + 'px',
+							top: item.yMap - 10 + 'px'
+						}"
+						v-if="item.id === currentIndex && showDialog"
+						@click="closeDialog"
+					>
+						<div class="triangle"></div>
+						<div class="dialog-title">{{ item.pointName }}</div>
+						<div class="dialog-text">监测类型:地下水位</div>
+						<div class="dialog-text">单次变化值:0.56mm</div>
+						<div class="dialog-text">累计变化值:2.04mm</div>
+						<div class="dialog-text">变化速率:0.96mm/d</div>
+						<div class="dialog-text">采集时间:2023-01-01 15:00:00</div>
+						<div style="border-bottom: 1px solid rgba(255, 255, 255, 0.2); margin-top: 5%"></div>
+						<div class="dialog-text">当前累计变化值为2.04mm,超过报警值10mm,偏差为39.1mm</div>
+					</div>
+				</div>
+			</div>
+			<div class="check-time">已安全监测: 2065天19时30分28秒</div>
+		</div>
+	</Card>
+</template>
+
+<script setup lang="ts">
+import Card from "@/components/card.vue";
+import { reactive, ref, onMounted } from "vue";
+let currentIndex = ref(1 as any);
+let showDialog = ref(false as any);
+function openDialog(item: any) {
+	currentIndex.value = item.id;
+	showDialog.value = true;
+}
+function closeDialog() {
+	showDialog.value = false;
+	console.log("点击");
+}
+const list = reactive([
+	{
+		id: 1,
+		alarmState: 1,
+		xMap: 150,
+		yMap: 70,
+		pointName: "基坑监测点001"
+	},
+	{
+		id: 2,
+		alarmState: 2,
+		xMap: 120,
+		yMap: 70,
+		pointName: "基坑监测点002"
+	},
+	{
+		id: 3,
+		alarmState: 1,
+		xMap: 180,
+		yMap: 90,
+		pointName: "基坑监测点003"
+	},
+	{
+		id: 4,
+		alarmState: 3,
+		xMap: 80,
+		yMap: 100,
+		pointName: "基坑监测点004"
+	}
+]);
+</script>
+
+<style scoped lang="scss">
+.item-dialog {
+	width: 189px;
+	padding: 2%;
+	left: 100%;
+	top: -40%;
+	z-index: 10;
+	color: #ffffff;
+	font-size: 12px;
+	opacity: 0.8;
+	background-color: #000000;
+	position: absolute;
+	.dialog-title {
+		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+		padding-bottom: 2%;
+	}
+	.dialog-time {
+		margin-top: 4%;
+		width: 100%;
+		text-align: right;
+	}
+	.dialog-text {
+		margin-top: 5%;
+		letter-spacing: 0.5px;
+	}
+	.triangle {
+		position: absolute;
+		width: 0;
+		height: 0;
+		left: -4%;
+		top: 5%;
+		border-top: 8px solid transparent;
+		border-bottom: 8px solid transparent;
+		border-right: 12px solid #000000;
+	}
+}
+.changeColor1 {
+	background: #48da39;
+}
+.changeColor2 {
+	background: #eea959;
+}
+.changeColor3 {
+	background: #ec6266;
+}
+.pit-top-left {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	.point-map {
+		width: 80%;
+		height: 70%;
+		margin: 0 auto;
+		margin-top: 5%;
+		position: relative;
+		img {
+			width: 100%;
+			height: 100%;
+		}
+		.point-list {
+			.point-item {
+				width: 20px;
+				height: 20px;
+				cursor: pointer;
+				border-radius: 50%;
+				position: absolute;
+			}
+		}
+	}
+	.point-state-top {
+		width: 100%;
+		display: flex;
+		padding-top: 5%;
+		margin-left: 5%;
+		.common {
+			width: 25%;
+			display: flex;
+			align-items: center;
+			.background {
+				width: 10px;
+				height: 10px;
+				margin-right: 15%;
+				background: #48da39;
+			}
+			.state-text {
+				color: #ffffff;
+				font-size: 14px;
+			}
+		}
+		.warn {
+			width: 30%;
+			display: flex;
+			align-items: center;
+			.background {
+				width: 10px;
+				height: 10px;
+				margin-right: 15%;
+				background: #eea959;
+			}
+			.state-text {
+				color: #ffffff;
+				font-size: 14px;
+			}
+		}
+		.control {
+			width: 30%;
+			display: flex;
+			align-items: center;
+			.background {
+				width: 10px;
+				height: 10px;
+				margin-right: 15%;
+				background: #ec6266;
+			}
+			.state-text {
+				color: #ffffff;
+				font-size: 14px;
+			}
+		}
+	}
+	.check-time {
+		width: 100%;
+		text-align: center;
+		font-size: 16px;
+		margin-top: 3%;
+		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+		color: #ffffff;
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/topRight.vue b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/topRight.vue
new file mode 100644
index 0000000..ea63211
--- /dev/null
+++ b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/topRight.vue
@@ -0,0 +1,406 @@
+<template>
+	<Card title="近30天报警情况统计">
+		<div class="load-top-right">
+			<div id="pitWeekWarn" style="width: 100%; height: 100%"></div>
+		</div>
+	</Card>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import * as echarts from "echarts";
+import Card from "@/components/card.vue";
+import { GlobalStore } from "@/stores";
+import { noop } from "@vueuse/core";
+const store = GlobalStore();
+const airType = ref(1);
+// 选中
+let checked = ref(1);
+function getNowData(type: any) {
+	checked.value = type;
+	// 初始化option
+	// initOption();
+}
+function getWeekData(type: any) {
+	checked.value = type;
+	// 初始化option
+	// initOption();
+}
+function getMonthData(type: any) {
+	checked.value = type;
+	// 初始化option
+	// initOption();
+}
+let rangeTime = ref("" as any);
+let dataList = ref([
+	{
+		value: 25,
+		show: true,
+		name: "超出控制值",
+
+		itemStyle: {
+			normal: {
+				color: "#EC6266",
+				borderWidth: 20
+			}
+		}
+	},
+	{
+		value: 75,
+		show: true,
+		name: "超出报警值",
+		itemStyle: {
+			normal: {
+				color: "#EEA959",
+				borderWidth: 20
+			}
+		}
+	}
+]);
+function Pie() {
+	let dataArr = [];
+	for (let i = 0; i < 150; i++) {
+		if (i % 2 === 0) {
+			dataArr.push({
+				name: (i + 1).toString(),
+				value: 10,
+				itemStyle: {
+					normal: {
+						color: "#7cf4f1",
+						borderWidth: 0,
+						borderColor: "#7f6546"
+					}
+				}
+			});
+		} else {
+			dataArr.push({
+				name: (i + 1).toString(),
+				value: 10,
+				itemStyle: {
+					normal: {
+						color: "rgba(0,0,0,0)",
+						borderWidth: 0,
+						borderColor: "rgba(0,0,0,0)"
+					}
+				}
+			});
+		}
+	}
+	return dataArr;
+}
+
+onMounted(() => {
+	drawEchart();
+});
+
+function drawEchart() {
+	let max = 0;
+	dataList.value.map(item => {
+		max = max + item.value;
+	});
+	let echartsTest = echarts.init(document.getElementById("pitWeekWarn"));
+	let option = {
+		tooltip: {
+			trigger: "item",
+			backgroundColor: "rgba(0, 0, 0, 0.9)",
+			borderColor: "#010306",
+			textStyle: {
+				color: "#FFFFFF"
+			},
+			formatter: function (params) {
+				// console.log(params.seriesName, "当前图例");
+				let result = " " + params.marker + params.name + " : " + params.value;
+				if (params.seriesName == "数据主体") {
+					return result;
+				}
+			}
+		},
+		title: {
+			text: max,
+			subtext: "风险总数",
+			x: "55%",
+			y: "26%",
+			textAlign: "right",
+			textStyle: {
+				color: "#fff",
+				fontSize: 26,
+				fontWeight: "normal",
+				fontFamily: "sadigitalNumber",
+				lineHeight: 50
+			},
+			subtextStyle: {
+				color: "#ccc",
+				fontSize: 14,
+				fontWeight: "normal"
+			}
+		},
+		legend: {
+			selectedMode: false, // 取消图例上的点击事件
+			icon: "rect",
+			type: "plain",
+			orient: "vertical",
+			left: "center",
+			bottom: "10%",
+			itemGap: 20,
+			itemWidth: 10, // 设置宽度
+			itemHeight: 10, // 设置高度
+			symbolKeepAspect: false,
+			textStyle: {
+				fontSize: 14,
+				color: "#FFFFFF",
+				rich: {
+					name: {
+						width: 110,
+						verticalAlign: "left"
+					},
+					value: {
+						width: 110,
+						fontSize: 14,
+						color: "#FFFFFF"
+					}
+				}
+			},
+			data: dataList.value.map(item => {
+				if (item.show) {
+					return item.name;
+				}
+			}),
+			formatter: function (data: any) {
+				if (dataList.value && dataList.value.length) {
+					for (let i = 0; i < dataList.value.length; i++) {
+						if (data === dataList.value[i].name) {
+							let value = dataList.value[i].value;
+							let valuePercent = ((dataList.value[i].value / max) * 100).toFixed(2);
+							return "{name| " + data + "}" + "{value|     " + value + "个}" + valuePercent + "%";
+						}
+					}
+				}
+			}
+		},
+		series: [
+			// 外侧光线
+			{
+				name: "",
+				type: "gauge",
+				center: ["50%", "37%"],
+				radius: "55%",
+				startAngle: 235,
+				endAngle: -50,
+				min: 0,
+				max: 100,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 2,
+						color: [
+							[
+								100 / 100,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 0,
+										color: "#526277"
+									},
+									{
+										offset: 0.25,
+										color: "rgba(4, 14, 54,0.4)"
+									},
+									{
+										offset: 0.7,
+										color: "rgba(4, 14, 54,0.4)"
+									},
+									{
+										offset: 1,
+										color: "#526277"
+									}
+								])
+							],
+							[1, "rgba(255,255,255,0)"]
+						]
+					}
+				},
+
+				axisTick: {
+					show: 0
+				},
+				splitLine: {
+					show: 0
+				},
+				axisLabel: {
+					show: 0
+				},
+				pointer: {
+					show: 0
+				},
+				detail: {
+					show: 0
+				}
+			},
+			{
+				name: "",
+				type: "gauge",
+				center: ["50%", "37%"],
+				radius: "47%",
+				startAngle: 245,
+				endAngle: -115,
+				min: 0,
+				max: 100,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 2,
+						color: [
+							[
+								200 / 100,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 0.8,
+										color: "#52bef0"
+									},
+									{
+										offset: 0.5,
+										color: "#13356b"
+									}
+								])
+							],
+							[1, "rgba(255,255,255,0)"]
+						]
+					}
+				},
+
+				axisTick: {
+					show: 0
+				},
+				splitLine: {
+					show: 0
+				},
+				axisLabel: {
+					show: 0
+				},
+				pointer: {
+					show: 0
+				},
+				detail: {
+					show: 0
+				}
+			},
+			{
+				name: "数据主体",
+				type: "pie",
+				radius: ["37%", "40%"],
+				center: ["50%", "37%"],
+				hoverAnimation: true,
+				itemStyle: {
+					borderRadius: 10,
+					borderWidth: 10
+				},
+				label: {
+					show: false,
+					position: "center"
+				},
+				emphasis: {
+					label: {
+						show: false
+					}
+				},
+				labelLine: {
+					show: false
+				},
+				data: dataList.value
+			},
+			{
+				type: "pie",
+				radius: ["32%", "33%"],
+				center: ["50%", "37%"],
+				label: {
+					show: false
+				},
+				data: Pie()
+			}
+		]
+	};
+	echartsTest.setOption(option, true);
+}
+</script>
+
+<style lang="scss" scoped>
+.load-top-right {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+.num {
+	width: 66px;
+	text-align: center;
+	font-family: sadigitalNumber;
+	font-size: calc(100vw * 24 / 1920);
+	color: #fff;
+	position: absolute;
+	top: 45%;
+	left: 18%;
+	z-index: 9;
+}
+// .styleImg {
+// 	left: 6%;
+// 	top: 17%;
+// 	width: 40%;
+// 	position: absolute;
+// 	height: 60%;
+// 	background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
+// 	background-size: cover;
+// }
+.select-right {
+	width: 35%;
+	display: flex;
+	position: absolute;
+	z-index: 10;
+	color: #fff;
+	font-size: 10px;
+	text-align: center;
+	line-height: 20px;
+	right: -1%;
+	top: 5%;
+	.selected {
+		height: 5%;
+		background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
+		background-size: 100% 100%;
+		cursor: pointer;
+	}
+	.day {
+		padding: 0 6%;
+		margin-right: 5%;
+		z-index: 99;
+	}
+	.week {
+		padding: 0 6%;
+		margin-right: 5%;
+		z-index: 99;
+	}
+	.month {
+		padding: 0 6%;
+		z-index: 99;
+	}
+	.active {
+		background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
+		background-size: 100% 100%;
+	}
+}
+.time {
+	position: absolute;
+	z-index: 999;
+	left: 37%;
+	margin-top: -18%;
+}
+::v-deep .el-input__wrapper {
+	width: 85%;
+	height: 0%;
+	background: #0d2956;
+}
+::v-deep .el-range-separator {
+	color: #ccc;
+	font-size: 10px;
+}
+::v-deep .el-range-input {
+	color: #ccc;
+	font-size: 10px;
+}
+</style>