diff --git a/.env.development b/.env.development
index 71917fc..e900b3e 100644
--- a/.env.development
+++ b/.env.development
@@ -3,9 +3,9 @@ NODE_ENV = 'development'
 
 # 本地环境接口地址(/api/index.ts文件中使用)
 # VITE_API_URL = 'http://121.196.214.246/api'
-# VITE_API_URL = 'http://182.90.224.147:100'
+VITE_API_URL = 'http://182.90.224.147:100'
 # VITE_API_URL = 'http://192.168.34.221:12360'
-VITE_API_URL = 'http://192.168.34.221:30002'
+# VITE_API_URL = 'http://192.168.34.221:30002'
 
 
 # 上传
diff --git a/src/assets/images/concreteMonitor/earlyBg.png b/src/assets/images/concreteMonitor/earlyBg.png
new file mode 100644
index 0000000..12cbd63
Binary files /dev/null and b/src/assets/images/concreteMonitor/earlyBg.png differ
diff --git a/src/assets/images/concreteMonitor/listBg.png b/src/assets/images/concreteMonitor/listBg.png
new file mode 100644
index 0000000..18cdc29
Binary files /dev/null and b/src/assets/images/concreteMonitor/listBg.png differ
diff --git a/src/assets/images/concreteMonitor/realtimeBg.png b/src/assets/images/concreteMonitor/realtimeBg.png
new file mode 100644
index 0000000..ba1eb3e
Binary files /dev/null and b/src/assets/images/concreteMonitor/realtimeBg.png differ
diff --git a/src/assets/images/concreteMonitor/warnBg.png b/src/assets/images/concreteMonitor/warnBg.png
new file mode 100644
index 0000000..80e83f8
Binary files /dev/null and b/src/assets/images/concreteMonitor/warnBg.png differ
diff --git a/src/assets/images/unloadPlatform/runIcon1.png b/src/assets/images/unloadPlatform/runIcon1.png
new file mode 100644
index 0000000..d9f213b
Binary files /dev/null and b/src/assets/images/unloadPlatform/runIcon1.png differ
diff --git a/src/assets/images/unloadPlatform/runIcon2.png b/src/assets/images/unloadPlatform/runIcon2.png
new file mode 100644
index 0000000..d7f68ae
Binary files /dev/null and b/src/assets/images/unloadPlatform/runIcon2.png differ
diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts
index 181f53b..137ce9d 100644
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@@ -163,6 +163,16 @@ export const staticRouter: RouteRecordRaw[] = [
 				name: "混凝土拌合站",
 				component: () => import("@/views/sevenLargeScreen/largeMachinery/concreteMixingPlant/index.vue")
 			},
+			{
+				path: "/concreteMonitor",
+				name: "混凝土测温",
+				component: () => import("@/views/sevenLargeScreen/qualityControl/concreteMonitor/index.vue")
+			},
+			{
+				path: "/unloadPlatform",
+				name: "卸料平台",
+				component: () => import("@/views/sevenLargeScreen/largeMachinery/unloadPlatform/index.vue")
+			}
 		],
 		meta: {
 			title: "七参数大屏"
diff --git a/src/views/sevenLargeScreen/indexL.vue b/src/views/sevenLargeScreen/indexL.vue
index 91b43d3..70f0a8f 100644
--- a/src/views/sevenLargeScreen/indexL.vue
+++ b/src/views/sevenLargeScreen/indexL.vue
@@ -181,6 +181,10 @@ let menuList = ref([
 			{
 				menuName: "质量管理",
 				companyPath: "/qualityManagement"
+			},
+			{
+				menuName: "混凝土测温",
+				companyPath: "/concreteMonitor"
 			}
 		]
 	},
@@ -218,6 +222,10 @@ let menuList = ref([
 				menuName: "混凝土拌合站",
 				companyPath: "/concreteMixingPlant"
 			},
+			{
+				menuName: "卸料平台",
+				companyPath: "/unloadPlatform"
+			}
 		]
 	},
 
diff --git a/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/bottomCenter.vue b/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/bottomCenter.vue
new file mode 100644
index 0000000..de763d3
--- /dev/null
+++ b/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/bottomCenter.vue
@@ -0,0 +1,16 @@
+<template>
+	<Card title="实时告警">
+		<div class="unload-platform-content"></div>
+	</Card>
+</template>
+
+<script setup lang="ts">
+import Card from "@/components/card.vue";
+</script>
+
+<style scoped lang="scss">
+.unload-platform-content {
+	width: 100%;
+	height: 100%;
+}
+</style>
diff --git a/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/bottomLeft.vue b/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/bottomLeft.vue
new file mode 100644
index 0000000..4f2990e
--- /dev/null
+++ b/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/bottomLeft.vue
@@ -0,0 +1,274 @@
+<template>
+	<Card title="运行设备状态">
+		<div class="run-dev-state">
+			<div class="dev-state-icon">
+				<div class="common-icon">
+					<div class="text">正常</div>
+					<div class="num">1024</div>
+				</div>
+				<div class="warn-icon">
+					<div class="text">告警</div>
+					<div class="num">1024</div>
+				</div>
+			</div>
+			<div id="runDeviceState" ref="runDeviceState" style="width: 100%; height: 100%"></div>
+		</div>
+	</Card>
+</template>
+
+<script lang="ts" setup>
+import { GlobalStore } from "@/stores";
+import { getAirQualityStatisticsApi } from "@/api/modules/headNoise";
+import * as echarts from "echarts";
+import { onMounted, reactive, ref } from "vue";
+import Card from "@/components/card.vue";
+const store = GlobalStore();
+const airType = ref(1);
+// 选中
+let checked = ref(1);
+
+let max = ref(0 as any);
+
+const airTypeEchart = ref(["装载重量报警", "装载重量预警"]);
+const airTypeData = ref([712, 465]);
+
+const option = ref(null as any);
+function initOption() {
+	airTypeData.value.map(item => {
+		max.value = max.value + item;
+	});
+	option.value = {
+		grid: {
+			left: "5%",
+			right: "5%",
+			bottom: "50%",
+			top: "15%",
+			containLabel: true
+		},
+		// backgroundColor: '#101129',
+		xAxis: {
+			show: false,
+			type: "value",
+			max: max.value
+		},
+		yAxis: [
+			{
+				type: "category",
+				inverse: true,
+				axisLabel: {
+					show: true,
+					inside: true,
+					verticalAlign: "bottom",
+					padding: [0, 0, 5, 5],
+					lineHeight: "40",
+					textStyle: {
+						color: "#FFFFFF",
+						fontSize: "14"
+					}
+					// formatter: function (val, index) {
+					// 	console.log("val", val, index);
+					// 	return val;
+					// }
+				},
+				splitLine: {
+					show: false
+				},
+				axisTick: {
+					show: false
+				},
+				axisLine: {
+					show: false
+				},
+				data: airTypeEchart.value
+			},
+			{
+				inverse: true,
+				axisTick: "none",
+				axisLine: "none",
+				axisLabel: {
+					inside: true,
+					verticalAlign: "bottom",
+					padding: [0, 0, 5, 0],
+					lineHeight: "40",
+					textStyle: {
+						color: "#FFFFFF",
+						fontSize: "12",
+						rich: {
+							name: {
+								color: "#65D7F9"
+							},
+							value: {}
+						}
+					},
+					formatter: function (val, index) {
+						// console.log("val", val, index);
+						let valuePercent = ((airTypeData.value[index] / max.value) * 100).toFixed(2);
+						return "{value|" + val + "}" + "{name|" + "(" + valuePercent + "%)" + "}";
+					}
+				},
+				data: airTypeData.value
+			},
+			{
+				type: "category",
+				inverse: true,
+				axisTick: "none",
+				axisLine: "none",
+				show: true,
+				data: airTypeData.value
+			}
+		],
+		series: [
+			{
+				type: "bar",
+				showBackground: true,
+				backgroundStyle: {
+					color: "#14346c",
+					borderRadius: 30
+				},
+				label: {
+					show: false,
+					// position:'right',
+					// formatter:'{@score}%',
+					textStyle: {
+						color: "#03fcfe",
+						fontSize: "12"
+					}
+				},
+				itemStyle: {
+					normal: {
+						barBorderRadius: 10,
+						color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+							{
+								offset: 0,
+								color: "#194077"
+							},
+							{
+								offset: 1,
+								color: "#4CC4F8"
+							}
+						])
+					}
+				},
+				barWidth: 3,
+				data: airTypeData.value
+			},
+			{
+				name: "内圆",
+				type: "scatter",
+				stack: "圆",
+				yAxisIndex: 0,
+				data: airTypeData.value, //小白点，数据静态
+				label: false,
+				symbolSize: 2,
+				itemStyle: {
+					normal: {
+						borderColor: "#fff",
+						borderWidth: 4,
+						color: "#fff",
+						opacity: 1
+					}
+				},
+				z: 3
+			},
+			{
+				name: "内圆框",
+				type: "scatter",
+				stack: "圆",
+				yAxisIndex: 0,
+				data: [0, 0, 0, 0], //小白点外圈，数据静态
+				label: false,
+				symbolSize: 15,
+				itemStyle: {
+					normal: {
+						borderColor: "#4CC4F8",
+						borderWidth: 2,
+						color: "#14346c",
+						opacity: 1
+					}
+				},
+				z: 2
+			}
+		]
+	};
+	drawChart();
+}
+
+function drawChart() {
+	let chartDom = document.getElementById("runDeviceState");
+	if (chartDom) {
+		chartDom.removeAttribute("_echarts_instance_");
+	}
+	let runDeviceState = echarts.init(document.getElementById("runDeviceState"));
+	runDeviceState.setOption(option.value);
+	// window.onresize = function () {
+	//   myEchart.resize();
+	// }
+}
+onMounted(async () => {
+	initOption();
+});
+</script>
+
+<style lang="scss" scoped>
+.run-dev-state {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	.dev-state-icon {
+		width: 100%;
+		height: 22%;
+		padding-top: 5%;
+		display: flex;
+		justify-content: space-around;
+		.common-icon {
+			width: 35%;
+			height: 100%;
+			margin-left: 4%;
+			background: url("@/assets/images/unloadPlatform/runIcon1.png") no-repeat;
+			background-size: 100% 100%;
+			.text {
+				transform: skew(-10deg);
+				margin-left: 58%;
+				margin-top: 13%;
+				font-size: 18px;
+				font-family: OPPOSans-Medium, OPPOSans;
+				color: #ffffff;
+			}
+			.num {
+				transform: skew(-10deg);
+				font-size: 22px;
+				margin-left: 58%;
+				font-family: D-DIN-DIN-Bold, D-DIN-DIN;
+				font-weight: bold;
+				background: linear-gradient(252deg, #ffffff 0%, #96aadb 100%);
+				-webkit-background-clip: text;
+				-webkit-text-fill-color: transparent;
+			}
+		}
+		.warn-icon {
+			width: 35%;
+			height: 100%;
+			background: url("@/assets/images/unloadPlatform/runIcon2.png") no-repeat;
+			background-size: 100% 100%;
+			.text {
+				transform: skew(-10deg);
+				margin-left: 58%;
+				margin-top: 13%;
+				font-size: 18px;
+				font-family: OPPOSans-Medium, OPPOSans;
+				color: #ffffff;
+			}
+			.num {
+				transform: skew(-10deg);
+				font-size: 22px;
+				margin-left: 58%;
+				font-family: D-DIN-DIN-Bold, D-DIN-DIN;
+				font-weight: bold;
+				background: linear-gradient(252deg, #ffffff 0%, #6fb1e0 100%);
+				-webkit-background-clip: text;
+				-webkit-text-fill-color: transparent;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/bottomRight.vue b/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/bottomRight.vue
new file mode 100644
index 0000000..5548780
--- /dev/null
+++ b/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/bottomRight.vue
@@ -0,0 +1,16 @@
+<template>
+	<Card title="历史载重">
+		<div class="unload-platform-content"></div>
+	</Card>
+</template>
+
+<script setup lang="ts">
+import Card from "@/components/card.vue";
+</script>
+
+<style scoped lang="scss">
+.unload-platform-content {
+	width: 100%;
+	height: 100%;
+}
+</style>
diff --git a/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/index.vue b/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/index.vue
new file mode 100644
index 0000000..d824032
--- /dev/null
+++ b/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/index.vue
@@ -0,0 +1,84 @@
+<template>
+	<div class="distribution-box">
+		<div class="top">
+			<div class="topLeft">
+				<TopLeft></TopLeft>
+			</div>
+			<div class="topCenter">
+				<TopCenter></TopCenter>
+			</div>
+			<div class="topRight">
+				<TopRight></TopRight>
+			</div>
+		</div>
+		<div class="bottom">
+			<div class="bottomLeft">
+				<BottomLeft></BottomLeft>
+			</div>
+			<div class="bottomCenter">
+				<BottomCenter></BottomCenter>
+			</div>
+			<div class="bottomRight">
+				<BottomRight></BottomRight>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import TopLeft from "@/views/sevenLargeScreen/largeMachinery/unloadPlatform/topLeft.vue";
+import TopCenter from "@/views/sevenLargeScreen/largeMachinery/unloadPlatform/topCenter.vue";
+import TopRight from "@/views/sevenLargeScreen/largeMachinery/unloadPlatform/topRight.vue";
+import BottomLeft from "@/views/sevenLargeScreen/largeMachinery/unloadPlatform/bottomLeft.vue";
+import BottomCenter from "@/views/sevenLargeScreen/largeMachinery/unloadPlatform/bottomCenter.vue";
+import BottomRight from "@/views/sevenLargeScreen/largeMachinery/unloadPlatform/bottomRight.vue";
+</script>
+
+<style lang="scss" scoped>
+.distribution-box {
+	width: 100%;
+	height: 102%;
+	.top {
+		height: 47.5%;
+		display: flex;
+		margin-bottom: 1%;
+		.topLeft {
+			width: 26%;
+			// background-color: orchid;
+		}
+		.topCenter {
+			margin: 0% 1%;
+			width: 45%;
+			:deep(.h-card) {
+				.content {
+					margin-top: 2% !important;
+				}
+			}
+		}
+		.topRight {
+			width: 26%;
+		}
+	}
+	.bottom {
+		height: 47.5%;
+		display: flex;
+		position: relative;
+
+		.bottomLeft {
+			width: 26%;
+		}
+		.bottomCenter {
+			margin: 0% 1%;
+			width: 45%;
+			:deep(.h-card) {
+				.content {
+					margin-top: 2% !important;
+				}
+			}
+		}
+		.bottomRight {
+			width: 26%;
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/topCenter.vue b/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/topCenter.vue
new file mode 100644
index 0000000..ef92c8f
--- /dev/null
+++ b/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/topCenter.vue
@@ -0,0 +1,16 @@
+<template>
+	<Card title="实时监测">
+		<div class="unload-platform-content"></div>
+	</Card>
+</template>
+
+<script setup lang="ts">
+import Card from "@/components/card.vue";
+</script>
+
+<style scoped lang="scss">
+.unload-platform-content {
+	width: 100%;
+	height: 100%;
+}
+</style>
diff --git a/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/topLeft.vue b/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/topLeft.vue
new file mode 100644
index 0000000..b7e9a7d
--- /dev/null
+++ b/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/topLeft.vue
@@ -0,0 +1,261 @@
+<template>
+	<Card title="设备列表">
+		<div class="device-list">
+			<div class="list-content">
+				<div class="tab-list">
+					<div style="width: 50%">设备名称</div>
+					<div style="width: 20%">最大载重(t)</div>
+					<div style="width: 30%">状态</div>
+				</div>
+				<el-scrollbar class="list-box">
+					<div v-for="(item, index) in list" class="listStyle" :key="item.id">
+						<!-- <div style="width: 5%">{{ index + 1 }}</div> -->
+						<div style="width: 50%">{{ item.devName }}</div>
+						<div style="width: 20%">{{ item.maxPayload }}</div>
+						<div style="width: 30%">{{ item.devState }}</div>
+					</div>
+					<div class="not-data" v-if="list.length == 0">
+						<img src="@/assets/images/noData.png" alt="" />
+						<p>暂无数据</p>
+					</div>
+				</el-scrollbar>
+			</div>
+		</div>
+	</Card>
+</template>
+
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import { reactive, ref, onMounted } from "vue";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+let showDialog = ref(false as any);
+let rangeTime = ref("" as any);
+const list = reactive([
+	{
+		id: 1,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 2,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 3,
+		devName: "卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 4,
+		devName: "盛达公馆12#楼",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 5,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 6,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 7,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+
+	{
+		id: 8,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 9,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 10,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 11,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 12,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 13,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 14,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 15,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 16,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 17,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 18,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 19,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 20,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 21,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 22,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	},
+	{
+		id: 23,
+		devName: "4#楼栋单元卸料平台",
+		maxPayload: 93,
+		devState: "正常"
+	}
+]);
+
+onMounted(async () => {});
+</script>
+
+<style lang="scss" scoped>
+// 选择框样式
+:deep(.el-input__wrapper) {
+	width: 100%;
+	height: 1%;
+	background: #0d2956;
+}
+:deep(.el-range-separator) {
+	color: #ccc;
+	font-size: 10px;
+}
+:deep(.el-range-input) {
+	color: #ccc;
+	font-size: 10px;
+}
+.device-list {
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 2%;
+	padding-top: 3%;
+	position: relative;
+	.list-content {
+		height: 95%;
+		width: 100%;
+		// background: url("@/assets/images/cardImg.png") no-repeat;
+		// background-size: 100% 100%;
+		.tab-list {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			height: 12%;
+			background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
+			background-size: 100% 100%;
+			// position: absolute;
+			left: 75.5%;
+			top: 75%;
+			color: #ccc;
+			font-size: 14px;
+			// justify-content: space-around;
+			div {
+				text-align: center;
+				white-space: nowrap;
+			}
+		}
+		.list-box {
+			height: 96%;
+			.list-style:nth-child(even) {
+				background: rgba(39, 88, 192, 0.06);
+			}
+			.listStyle {
+				display: flex;
+				align-items: center;
+				color: #fff;
+				font-size: 12px;
+				line-height: 45px;
+				div {
+					text-align: center;
+					white-space: nowrap;
+				}
+			}
+			.listStyle:hover {
+				background: #091f3f;
+			}
+		}
+	}
+}
+.not-data {
+	top: 73%;
+	width: 12%;
+	left: 44%;
+	position: absolute;
+	img {
+		width: 40%;
+		margin: 5% 30%;
+	}
+	p {
+		color: #fff;
+		font-size: calc(100vw * 14 / 1920);
+		margin: -6% 37%;
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/topRight.vue b/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/topRight.vue
new file mode 100644
index 0000000..693a21d
--- /dev/null
+++ b/src/views/sevenLargeScreen/largeMachinery/unloadPlatform/topRight.vue
@@ -0,0 +1,16 @@
+<template>
+	<Card title="载重比分析">
+		<div class="unload-platform-content"></div>
+	</Card>
+</template>
+
+<script setup lang="ts">
+import Card from "@/components/card.vue";
+</script>
+
+<style scoped lang="scss">
+.unload-platform-content {
+	width: 100%;
+	height: 100%;
+}
+</style>
diff --git a/src/views/sevenLargeScreen/qualityControl/concreteMonitor/index.vue b/src/views/sevenLargeScreen/qualityControl/concreteMonitor/index.vue
new file mode 100644
index 0000000..51dd78a
--- /dev/null
+++ b/src/views/sevenLargeScreen/qualityControl/concreteMonitor/index.vue
@@ -0,0 +1,82 @@
+<template>
+	<!-- 混凝土测温 -->
+	<div class="concrete-monitor">
+		<div class="left">
+			<div class="leftTop"><LeftTop /></div>
+			<div class="leftBottom"><LeftBottom /></div>
+		</div>
+		<div class="right">
+			<div class="rightTop"><RightTop /></div>
+			<div class="rightBottom"><RightBottom /></div>
+		</div>
+	</div>
+</template>
+
+<script>
+import LeftTop from "@/views/sevenLargeScreen/qualityControl/concreteMonitor/leftTop.vue";
+import LeftBottom from "@/views/sevenLargeScreen/qualityControl/concreteMonitor/leftBottom.vue";
+import RightTop from "@/views/sevenLargeScreen/qualityControl/concreteMonitor/rightTop.vue";
+import RightBottom from "@/views/sevenLargeScreen/qualityControl/concreteMonitor/rightBottom.vue";
+export default {
+	components: {
+		LeftTop,
+		LeftBottom,
+		RightTop,
+		RightBottom
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.concrete-monitor {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	&::-webkit-scrollbar {
+		display: none; //隐藏滚动条
+	}
+	.left {
+		width: 80%;
+		height: 100%;
+		margin-right: 1%;
+		.leftTop {
+			height: 50%;
+			margin-bottom: 2%;
+			:deep(.h-card) {
+				.content {
+					margin-top: 1% !important;
+				}
+			}
+		}
+		.leftBottom {
+			height: 48%;
+			:deep(.h-card) {
+				.content {
+					margin-top: 1% !important;
+				}
+			}
+		}
+	}
+	.right {
+		width: 40%;
+		height: 100%;
+		.rightTop {
+			height: 29%;
+			:deep(.h-card) {
+				.content {
+					margin-top: 1.5% !important;
+				}
+			}
+		}
+		.rightBottom {
+			margin-top: 6%;
+			height: 70%;
+			:deep(.h-card) {
+				.content {
+					margin-top: 2% !important;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/qualityControl/concreteMonitor/leftBottom.vue b/src/views/sevenLargeScreen/qualityControl/concreteMonitor/leftBottom.vue
new file mode 100644
index 0000000..716a6cb
--- /dev/null
+++ b/src/views/sevenLargeScreen/qualityControl/concreteMonitor/leftBottom.vue
@@ -0,0 +1,437 @@
+<template>
+	<Card title="监测曲线">
+		<div class="concrete-bottom-left">
+			<div class="choice-right">
+				<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">温度</div>
+				<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">温差</div>
+				<div class="month selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">降温速度</div>
+			</div>
+
+			<div class="concrete-content">
+				<div class="select-right">
+					<el-date-picker v-model="selectTime" type="date" size="small" />
+				</div>
+				<div id="concreteLine" ref="concreteLine" 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, 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("" as any);
+// Y轴数据
+// let yData1 = ref([
+// 	["2023-9-19 05:15:00", 12],
+// 	["2023-9-19 15:15:00", 200],
+// 	["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]
+// ]);
+
+// 图表数据项
+let option = ref(null as any);
+// 选中
+// let rangeTime = ref("");
+let selectPoint = ref(1);
+let selectTime = ref("2023-09-01");
+
+// 选中
+let checked = ref(1);
+function getNowData(type: any) {
+	checked.value = type;
+	// 初始化option
+	// drawChart();
+}
+function getWeekData(type: any) {
+	checked.value = type;
+	// 初始化option
+	// drawChart();
+}
+function getMonthData(type: any) {
+	checked.value = type;
+	// 初始化option
+	// drawChart();
+}
+
+let typeList = ref([
+	{
+		value: 1,
+		dayType: "表面温度",
+		typeUnit: "℃"
+	},
+	{
+		value: 2,
+		dayType: "中上层温度",
+		typeUnit: "℃"
+	},
+	{
+		value: 3,
+		dayType: "中层温度",
+		typeUnit: "℃"
+	},
+	{
+		value: 4,
+		dayType: "中下层温度",
+		typeUnit: "℃"
+	},
+	{
+		value: 5,
+		dayType: "底层温度",
+		typeUnit: "℃"
+	}
+]);
+
+// 时间轴起止时间
+let startValue = ref("2023-9-19 05:15:00" as any);
+let endValue = ref("2023-9-21 05:15:00" as any);
+
+function selectChange(e: any) {
+	console.log("当前日期", e);
+	drawChart();
+}
+
+function initOption() {
+	option.value = {
+		// backgroundColor: '#071c3a',
+		legend: {
+			align: "left",
+			top: "5%",
+			left: "2%",
+			textStyle: {
+				color: "#FFFFFF",
+				fontSize: 14,
+				padding: [0, 0, 0, 10]
+			},
+			icon: "rect",
+			itemGap: 25,
+			itemWidth: 10,
+			itemHeight: 10
+		},
+		// 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: any) {
+				// console.log("tooltip", params);
+				let currentInnerHtml = "";
+				let nowTime = params[0].axisValueLabel;
+				for (let index = 0; index < params.length; index++) {
+					let pointType = params[index].seriesName;
+					let pointValue = params[index].data[1];
+					let currentTypeData = typeList.value.filter((item: any) => {
+						return item.dayType === params[index].seriesName;
+					});
+					let unit = currentTypeData[0].typeUnit;
+					// console.log(unit, "单位");
+					currentInnerHtml = currentInnerHtml + "</br>" + params[index].marker + pointType + " " + pointValue + unit;
+				}
+				return nowTime + currentInnerHtml;
+			}
+		},
+		grid: {
+			top: "20%",
+			left: "5%",
+			right: "3%",
+			bottom: "10%"
+			// containLabel: true
+		},
+		xAxis: [
+			{
+				type: "category",
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				splitArea: {
+					// show: true,
+					color: "#f00",
+					lineStyle: {
+						color: "#f00"
+					}
+				},
+				axisLabel: {
+					color: "#fff"
+					// formatter: function (value: any) {
+					// 	//需要的时间格式
+					// 	let t_date = new Date(value);
+					// 	let nowMinutes: any = t_date.getMinutes();
+					// 	if (nowMinutes < 10) {
+					// 		nowMinutes = "0" + nowMinutes;
+					// 	}
+					// 	let nowSeconds: any = t_date.getSeconds();
+					// 	if (nowSeconds < 10) {
+					// 		nowSeconds = "0" + nowSeconds;
+					// 	}
+					// 	return (
+					// 		[t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join("-") +
+					// 		" " +
+					// 		[t_date.getHours(), nowMinutes, nowSeconds].join(":")
+					// 	);
+					// }
+				},
+				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",
+				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: false,
+		// 	// 	smooth: true, //是否平滑
+		// 	// 	name: "监测点001",
+		// 	// 	type: "line",
+		// 	// 	showSymbol: false,
+		// 	// 	color: "#4AC0F3",
+		// 	// 	data: yData1.value
+		// 	// }
+		// ]
+	};
+
+	for (let i = 0; i < typeList.value.length; i++) {
+		// 根据点位的种类画图(立杆倾斜,水平位移,立杆轴力,地基沉降)
+
+		// 测试点位数据[x,y]
+		let data = [
+			["00:00", 42 * 2 * (i + 1)],
+			["02:00", 24 * 2 * (i + 1)],
+			["04:00", 35 * 2 * (i + 1)],
+			["06:00", 30 * 2 * (i + 1)],
+			["08:00", 20 * 2 * (i + 1)],
+			["10:00", 50 * 2 * (i + 1)],
+			["12:00", 24 * 2 * (i + 1)],
+			["14:00", 30 * 2 * (i + 1)],
+			["16:00", 55 * 2 * (i + 1)],
+			["18:00", 30 * 2 * (i + 1)],
+			["20:00", 30 * 2 * (i + 1)],
+			["22:00", 30 * 2 * (i + 1)],
+			["24:00", 30 * 2 * (i + 1)]
+		];
+		let lineObj = {
+			smooth: true, //是否平滑
+			name: typeList.value[i].dayType,
+			type: "line",
+			showSymbol: true,
+			symbol: "emptyCircle",
+			symbolSize: 6,
+			// color: "#4AC",
+			data: data
+		};
+		option.value.series.push(lineObj);
+	}
+}
+
+function drawChart() {
+	initOption();
+	// console.log("绘制前数据", option.value);
+	let chartDom = document.getElementById("concreteLine");
+	if (chartDom) {
+		chartDom.removeAttribute("_echarts_instance_");
+	}
+	let concreteLine = echarts.init(document.getElementById("concreteLine"));
+	concreteLine.setOption(option.value);
+}
+
+onMounted(async () => {
+	drawChart();
+});
+
+// 即时销毁事件总线派发，否则会执行两次mitts.on造成不必要的内存浪费 7.14 by CJP
+onBeforeUnmount(async () => {
+	mitts.off("devSn");
+});
+</script>
+
+<style lang="scss" scoped>
+.concrete-bottom-left {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	.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%;
+		}
+	}
+	.concrete-content {
+		height: 100%;
+		background: url("@/assets/images/cardImg.png") no-repeat;
+		background-size: 100% 100%;
+		position: relative;
+		.select-right {
+			position: absolute;
+			display: flex;
+			right: 22%;
+			width: 10%;
+			top: 5%;
+			z-index: 9;
+		}
+	}
+}
+
+.choice-right {
+	width: 25%;
+	display: flex;
+	position: absolute;
+	z-index: 99;
+	color: #fff;
+	font-size: 10px;
+	text-align: center;
+	line-height: 20px;
+	right: -6%;
+	top: 5%;
+	.selected {
+		height: 5%;
+		background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
+		background-size: 100% 100%;
+		cursor: pointer;
+	}
+	.day {
+		padding: 0 5%;
+		margin-right: 4%;
+		z-index: 99;
+	}
+	.week {
+		padding: 0 5%;
+		margin-right: 4%;
+		z-index: 99;
+	}
+	.month {
+		padding: 0 5%;
+		z-index: 99;
+	}
+	.active {
+		background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
+		background-size: 100% 100%;
+	}
+}
+
+: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/qualityControl/concreteMonitor/leftTop.vue b/src/views/sevenLargeScreen/qualityControl/concreteMonitor/leftTop.vue
new file mode 100644
index 0000000..e77bbd8
--- /dev/null
+++ b/src/views/sevenLargeScreen/qualityControl/concreteMonitor/leftTop.vue
@@ -0,0 +1,330 @@
+<template>
+	<Card title="实时监测">
+		<div class="pit-top-left">
+			<div class="select-right">
+				<el-select v-model="selectDay" style="width: 85%" size="small">
+					<el-option v-for="(item, index) in dayList" :key="index" :label="item.dayType" :value="item.value" />
+				</el-select>
+			</div>
+			<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/concreteMonitor/realtimeBg.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"
+					>
+						<div class="triangle"></div>
+						<div class="dialog-title">{{ item.pointName }}</div>
+						<div class="dialog-text" style="color: #ec6266; display: flex">
+							<div class="text-icon">
+								<el-icon><Warning /></el-icon>
+							</div>
+							<div class="text-detail">发廊: 环表温差 小于10</div>
+						</div>
+						<div class="dialog-text">表层温度：18.88°C</div>
+						<div class="dialog-text">中上层温度：43°C</div>
+						<div class="dialog-text">中层温度：12.88°C</div>
+						<div class="dialog-text">中下层温度：20°C</div>
+						<div class="dialog-text">底层温度：20°C</div>
+						<div class="close-icon" @click="closeDialog">
+							<el-icon><Close /></el-icon>
+						</div>
+						<div class="open-history" @click="openHistoryDialog">
+							<div class="history-text">历史数据</div>
+							<div class="history-icon">
+								<el-icon><CaretRight /></el-icon>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="dialog-style">
+				<point-history-dialog ref="historyRef"></point-history-dialog>
+			</div>
+		</div>
+	</Card>
+</template>
+
+<script setup lang="ts">
+import pointHistoryDialog from "@/views/sevenLargeScreen/qualityControl/concreteMonitor/point-history-dialog.vue";
+import Card from "@/components/card.vue";
+import { reactive, ref, onMounted } from "vue";
+// 打开点位详情弹窗
+const historyRef = ref();
+const openHistoryDialog = () => {
+	closeDialog();
+	historyRef.value.openDialog();
+	// console.log(historyRef.value);
+};
+
+// 当前对应的种类
+let selectDay = ref(1);
+let dayList = ref([
+	{
+		value: 1,
+		dayType: "桩基-灌注桩1"
+	},
+	{
+		value: 2,
+		dayType: "桩基-灌注桩2"
+	},
+	{
+		value: 3,
+		dayType: "桩基-灌注桩3"
+	},
+	{
+		value: 4,
+		dayType: "桩基-灌注桩4"
+	}
+]);
+
+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: "测温-大波浪1"
+	},
+	{
+		id: 2,
+		alarmState: 2,
+		xMap: 120,
+		yMap: 70,
+		pointName: "测温-大波浪2"
+	},
+	{
+		id: 3,
+		alarmState: 1,
+		xMap: 180,
+		yMap: 90,
+		pointName: "测温-大波浪3"
+	},
+	{
+		id: 4,
+		alarmState: 3,
+		xMap: 80,
+		yMap: 100,
+		pointName: "测温-大波浪4"
+	}
+]);
+</script>
+
+<style scoped lang="scss">
+:deep(.el-input__wrapper) {
+	background: #112d59;
+}
+:deep(.el-input__inner) {
+	color: #fff;
+}
+:deep(.el-select .el-input .el-select__caret) {
+	color: #fff;
+}
+.item-dialog {
+	width: 25%;
+	padding: 3% 1% 0 1%;
+	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%;
+		font-size: 14px;
+	}
+	.dialog-time {
+		margin-top: 4%;
+		width: 100%;
+		text-align: right;
+	}
+	.dialog-text {
+		margin-top: 5%;
+		letter-spacing: 0.5px;
+		font-size: 14px;
+		.text-icon {
+			margin-right: 3%;
+		}
+		.text-detail {
+		}
+	}
+	.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;
+	}
+	.close-icon {
+		position: absolute;
+		right: 5%;
+		top: 3%;
+		cursor: pointer;
+		color: #ffffff;
+		font-size: 14px;
+	}
+	.open-history {
+		display: flex;
+		align-items: center;
+		position: absolute;
+		right: 5%;
+		top: 13%;
+		cursor: pointer;
+		color: #65d7f9;
+		font-size: 14px;
+		.history-icon {
+			margin-top: 3%;
+			font-size: 14px;
+		}
+	}
+}
+.changeColor1 {
+	background: #48da39;
+}
+.changeColor2 {
+	background: #eea959;
+}
+.changeColor3 {
+	background: #ec6266;
+}
+.pit-top-left {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	.select-right {
+		position: absolute;
+		right: 0%;
+		width: 11%;
+		top: -11%;
+		z-index: 9;
+	}
+	.point-map {
+		width: 82%;
+		height: 100%;
+		margin: 0 auto;
+		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: 6%;
+		position: absolute;
+		right: 0%;
+		top: 5%;
+		.common {
+			display: flex;
+			align-items: center;
+			.background {
+				width: 10px;
+				height: 10px;
+				margin-right: 20%;
+				background: #48da39;
+			}
+			.state-text {
+				color: #ffffff;
+				font-size: 14px;
+			}
+		}
+		.warn {
+			display: flex;
+			align-items: center;
+			margin-top: 30%;
+			.background {
+				width: 10px;
+				height: 10px;
+				margin-right: 20%;
+				background: #eea959;
+			}
+			.state-text {
+				color: #ffffff;
+				font-size: 14px;
+			}
+		}
+		.control {
+			display: flex;
+			align-items: center;
+			margin-top: 30%;
+			.background {
+				width: 10px;
+				height: 10px;
+				margin-right: 20%;
+				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/qualityControl/concreteMonitor/point-history-dialog.vue b/src/views/sevenLargeScreen/qualityControl/concreteMonitor/point-history-dialog.vue
new file mode 100644
index 0000000..7c3aad8
--- /dev/null
+++ b/src/views/sevenLargeScreen/qualityControl/concreteMonitor/point-history-dialog.vue
@@ -0,0 +1,374 @@
+<template>
+	<div class="list-detail" v-if="showDialog" @click="handleClick">
+		<div class="dialog-content">
+			<div class="dialog-title">
+				<div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div>
+				<div class="title-text">
+					<i>{{ dialogTitle }}</i>
+				</div>
+			</div>
+			<div class="edge-bottom-right">
+				<div class="time-range">
+					<el-date-picker
+						v-model="rangeTime"
+						type="daterange"
+						range-separator="至"
+						start-placeholder="开始日期"
+						end-placeholder="结束日期"
+						value-format="YYYY-MM-DD"
+						:clearable="false"
+						size="small"
+						style="width: 55%"
+					/>
+				</div>
+				<div class="list-content">
+					<div class="tab-list">
+						<div>序号</div>
+						<div>测温孔</div>
+						<div>表层温度(°C)</div>
+						<div>中上层温度(°C)</div>
+						<div>中层温度(°C)</div>
+						<div>中下层温度(°C)</div>
+						<div>底层温度(°C)</div>
+						<div>状态</div>
+						<div>时间</div>
+					</div>
+
+					<el-scrollbar class="list-box">
+						<div v-for="(item, index) in list" class="listStyle" :key="item.id">
+							<div>{{ index + 1 }}</div>
+							<div>{{ item.thermometerHole }}</div>
+							<div>{{ item.surfaceTp }}</div>
+							<div>{{ item.upMiddleTp }}</div>
+							<div>{{ item.middleTp }}</div>
+							<div>{{ item.middleDownTp }}</div>
+							<div>{{ item.bottomTp }}</div>
+							<div :style="{ color: item.state == 1 ? '#EC6266' : '#FFFFFF' }">
+								{{ item.state == 0 ? "正常" : "告警" }}
+							</div>
+							<div>{{ item.time }}</div>
+						</div>
+						<div class="not-data" v-if="list.length == 0">
+							<img src="@/assets/images/noData.png" alt="" />
+							<p>暂无数据</p>
+						</div>
+					</el-scrollbar>
+				</div>
+			</div>
+			<div class="close-icon" @click="showDialog = false">
+				<el-icon><Close /></el-icon>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, onMounted } from "vue";
+import { GlobalStore } from "@/stores";
+let showDialog = ref(false as any);
+
+function handleClick(event: any) {
+	console.log("点击", event.target.className);
+	if (event.target.className == "list-detail") {
+		showDialog.value = false;
+	}
+}
+// let dialogIndex = ref(null as any);
+let dialogTitle = ref("" as any);
+function openDialog() {
+	// console.log(type);
+	// dialogIndex.value = type;
+	showDialog.value = true;
+	dialogTitle.value = "历史测温记录";
+}
+
+// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
+defineExpose({
+	openDialog
+});
+let rangeTime = ref("" as any);
+const list = reactive([
+	{
+		id: 1,
+		thermometerHole: "测温-大波浪",
+		surfaceTp: "18.88",
+		upMiddleTp: "18.88",
+		middleTp: "18.88",
+		middleDownTp: "18.88",
+		bottomTp: "18.88",
+		state: 0,
+		time: "2023-01-01 12:00:00"
+	},
+	{
+		id: 2,
+		thermometerHole: "测温-大波浪",
+		surfaceTp: "17.75",
+		upMiddleTp: "17.75",
+		middleTp: "17.75",
+		middleDownTp: "17.75",
+		bottomTp: "17.75",
+		state: 1,
+		time: "2023-01-01 12:00:00"
+	},
+	{
+		id: 3,
+		thermometerHole: "测温-大波浪",
+		surfaceTp: "12.43",
+		upMiddleTp: "12.43",
+		middleTp: "12.43",
+		middleDownTp: "12.43",
+		bottomTp: "12.43",
+		state: 1,
+		time: "2023-01-01 12:00:00"
+	},
+	{
+		id: 4,
+		thermometerHole: "测温-001",
+		surfaceTp: "19.75",
+		upMiddleTp: "19.75",
+		middleTp: "19.75",
+		middleDownTp: "19.75",
+		bottomTp: "19.75",
+		state: 0,
+		time: "2023-01-01 12:00:00"
+	},
+	{
+		id: 5,
+		thermometerHole: "测温-大波浪",
+		surfaceTp: "18.88",
+		upMiddleTp: "18.88",
+		middleTp: "18.88",
+		middleDownTp: "18.88",
+		bottomTp: "18.88",
+		state: 0,
+		time: "2023-01-01 12:00:00"
+	},
+	{
+		id: 6,
+		thermometerHole: "测温-大波浪",
+		surfaceTp: "18.88",
+		upMiddleTp: "18.88",
+		middleTp: "18.88",
+		middleDownTp: "18.88",
+		bottomTp: "18.88",
+		state: 0,
+		time: "2023-01-01 12:00:00"
+	},
+	{
+		id: 7,
+		thermometerHole: "测温-大波浪",
+		surfaceTp: "18.88",
+		upMiddleTp: "18.88",
+		middleTp: "18.88",
+		middleDownTp: "18.88",
+		bottomTp: "18.88",
+		state: 0,
+		time: "2023-01-01 12:00:00"
+	},
+
+	{
+		id: 8,
+		thermometerHole: "测温-大波浪",
+		surfaceTp: "18.88",
+		upMiddleTp: "18.88",
+		middleTp: "18.88",
+		middleDownTp: "18.88",
+		bottomTp: "18.88",
+		state: 0,
+		time: "2023-01-01 12:00:00"
+	},
+	{
+		id: 9,
+		thermometerHole: "测温-大波浪",
+		surfaceTp: "18.88",
+		upMiddleTp: "18.88",
+		middleTp: "18.88",
+		middleDownTp: "18.88",
+		bottomTp: "18.88",
+		state: 0,
+		time: "2023-01-01 12:00:00"
+	},
+	{
+		id: 10,
+		thermometerHole: "测温-大波浪",
+		surfaceTp: "18.88",
+		upMiddleTp: "18.88",
+		middleTp: "18.88",
+		middleDownTp: "18.88",
+		bottomTp: "18.88",
+		state: 0,
+		time: "2023-01-01 12:00:00"
+	},
+	{
+		id: 11,
+		thermometerHole: "测温-大波浪",
+		surfaceTp: "18.88",
+		upMiddleTp: "18.88",
+		middleTp: "18.88",
+		middleDownTp: "18.88",
+		bottomTp: "18.88",
+		state: 0,
+		time: "2023-01-01 12:00:00"
+	},
+	{
+		id: 12,
+		thermometerHole: "测温-大波浪",
+		surfaceTp: "18.88",
+		upMiddleTp: "18.88",
+		middleTp: "18.88",
+		middleDownTp: "18.88",
+		bottomTp: "18.88",
+		state: 0,
+		time: "2023-01-01 12:00:00"
+	}
+]);
+
+onMounted(async () => {});
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-input__wrapper) {
+	width: 100%;
+	height: 1%;
+	padding-left: 5%;
+	background: #0d2956;
+}
+:deep(.el-range-separator) {
+	color: #ccc;
+	font-size: 10px;
+}
+:deep(.el-range-input) {
+	color: #ccc;
+	font-size: 10px;
+}
+.list-detail {
+	position: absolute;
+	width: 150%;
+	height: 260%;
+	top: -60%;
+	left: 0%;
+	background: rgba(7, 28, 49, 0.5);
+	z-index: 20;
+	.dialog-content {
+		position: absolute;
+		box-sizing: border-box;
+		padding: 1%;
+		left: 17%;
+		top: 21%;
+		width: 70%;
+		height: 50%;
+		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
+		background-size: 100% 100%;
+		z-index: 21;
+		.political-outlook {
+			height: 95%;
+		}
+		.dialog-article {
+			height: 95%;
+		}
+		.close-icon {
+			position: absolute;
+			right: 3%;
+			top: 3%;
+			cursor: pointer;
+			color: #ffffff;
+			font-size: 18px;
+		}
+		.dialog-title {
+			color: #ffffff;
+			font-weight: bold;
+			font-size: 18px;
+			font-family: "OPPOSans-Bold";
+			display: flex;
+			align-items: center;
+			.title-img {
+				width: 3%;
+				height: 3%;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.title-text {
+				margin-left: 1%;
+			}
+		}
+	}
+}
+.notoDta {
+	top: 73%;
+	width: 12%;
+	left: 44%;
+	position: absolute;
+	img {
+		width: 40%;
+		margin: 5% 30%;
+	}
+	p {
+		color: #fff;
+		font-size: 14px;
+		margin: -6% 37%;
+	}
+}
+.edge-bottom-right {
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 2%;
+	position: relative;
+	.time-range {
+		position: absolute;
+		left: 3%;
+		top: 3%;
+	}
+	.list-content {
+		height: 89%;
+		width: 100%;
+		margin-top: 3%;
+		// background: url("@/assets/images/cardImg.png") no-repeat;
+		// background-size: 100% 100%;
+		.tab-list {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			height: 10%;
+			background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
+			background-size: 100% 100%;
+			// position: absolute;
+			left: 75.5%;
+			top: 75%;
+			color: #ccc;
+			font-size: 14px;
+			line-height: 30px;
+			// justify-content: space-around;
+			div {
+				text-align: center;
+				white-space: nowrap;
+				width: 14%;
+			}
+		}
+		.list-box {
+			height: 87%;
+			.list-style:nth-child(even) {
+				background: rgba(39, 88, 192, 0.06);
+			}
+			.listStyle {
+				display: flex;
+				align-items: center;
+				color: #fff;
+				height: 8%;
+				font-size: 12px;
+				line-height: 24px;
+				div {
+					text-align: center;
+					white-space: nowrap;
+					width: 14%;
+				}
+			}
+			.listStyle:hover {
+				background: #091f3f;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/qualityControl/concreteMonitor/rightBottom.vue b/src/views/sevenLargeScreen/qualityControl/concreteMonitor/rightBottom.vue
new file mode 100644
index 0000000..08292be
--- /dev/null
+++ b/src/views/sevenLargeScreen/qualityControl/concreteMonitor/rightBottom.vue
@@ -0,0 +1,235 @@
+<template>
+	<Card title="实时告警">
+		<div class="concrete-right-bottom">
+			<div class="top-data">
+				<div class="data-left">告警: <span class="num">12</span>次</div>
+				<div class="data-right">预警: <span class="num">3</span>次</div>
+			</div>
+			<div class="monitor-list">
+				<el-scrollbar style="height: 100%">
+					<div class="monitor-item" v-for="item in list" :key="item.id">
+						<div class="item-top">
+							<div class="top-title">混凝土监测</div>
+							<div class="top-state" :style="{ background: formworkOption[item.monitorType].color }">
+								<div>
+									{{ formworkOption[item.monitorType].label }}
+								</div>
+							</div>
+						</div>
+						<div class="item-bottom">
+							<div class="bottom-text">浇筑体升温: 大于5</div>
+							<div class="bottom-text">实时值: 7.12</div>
+							<div class="bottom-text">2023.06.08 12:00:00</div>
+						</div>
+					</div>
+				</el-scrollbar>
+			</div>
+		</div>
+	</Card>
+</template>
+
+<script setup lang="ts">
+import Card from "@/components/card.vue";
+import { reactive, ref, onMounted } from "vue";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+
+let formworkOption = ref([
+	{
+		value: 0,
+		label: "告警",
+		color: "#EC6266"
+	},
+	{
+		value: 1,
+		label: "预警",
+		color: "#EEA959"
+	}
+]);
+
+const list = reactive([
+	{
+		id: 1,
+		monitorTitle: "混凝土监测",
+		monitorType: 0,
+		temperate: "大于5",
+		realtimeValue: "7.12",
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 2,
+		monitorTitle: "混凝土监测",
+		monitorType: 0,
+		temperate: "大于5",
+		realtimeValue: "7.12",
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 3,
+		monitorTitle: "混凝土监测",
+		monitorType: 1,
+		temperate: "大于5",
+		realtimeValue: "7.12",
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 4,
+		monitorTitle: "混凝土监测",
+		monitorType: 1,
+		temperate: "大于5",
+		realtimeValue: "7.12",
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 5,
+		monitorTitle: "混凝土监测",
+		monitorType: 0,
+		temperate: "大于5",
+		realtimeValue: "7.12",
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 6,
+		monitorTitle: "混凝土监测",
+		monitorType: 0,
+		temperate: "大于5",
+		realtimeValue: "7.12",
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 7,
+		monitorTitle: "混凝土监测",
+		monitorType: 0,
+		temperate: "大于5",
+		realtimeValue: "7.12",
+		monitorTime: "2023.06.08 12:00:00"
+	},
+
+	{
+		id: 8,
+		monitorTitle: "混凝土监测",
+		monitorType: 0,
+		temperate: "大于5",
+		realtimeValue: "7.12",
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 9,
+		monitorTitle: "混凝土监测",
+		monitorType: 0,
+		temperate: "大于5",
+		realtimeValue: "7.12",
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 10,
+		monitorTitle: "混凝土监测",
+		monitorType: 0,
+		temperate: "大于5",
+		realtimeValue: "7.12",
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 11,
+		monitorTitle: "混凝土监测",
+		monitorType: 0,
+		temperate: "大于5",
+		realtimeValue: "7.12",
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 12,
+		monitorTitle: "混凝土监测",
+		monitorType: 0,
+		temperate: "大于5",
+		realtimeValue: "7.12",
+		monitorTime: "2023.06.08 12:00:00"
+	}
+]);
+</script>
+
+<style scoped lang="scss">
+.concrete-right-bottom {
+	width: 100%;
+	height: 100%;
+	.top-data {
+		width: 100%;
+		height: 11%;
+		padding-top: 6%;
+		display: flex;
+		.num {
+			font-size: 20px;
+			font-family: OPPOSans-Bold, OPPOSans;
+			font-weight: bold;
+			color: #ffffff;
+			padding: 0% 5%;
+		}
+		.data-left {
+			box-sizing: border-box;
+			width: 45%;
+			margin-left: 3%;
+			font-size: 16px;
+			padding-top: 1%;
+			padding-left: 15%;
+			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+			color: #ffffff;
+			background: url("@/assets/images/concreteMonitor/warnBg.png") no-repeat;
+			background-size: 100% 100%;
+		}
+		.data-right {
+			box-sizing: border-box;
+			width: 45%;
+			margin-left: 3%;
+			font-size: 16px;
+			padding-top: 1%;
+			padding-left: 15%;
+			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+			color: #ffffff;
+			background: url("@/assets/images/concreteMonitor/earlyBg.png") no-repeat;
+			background-size: 100% 100%;
+		}
+	}
+	.monitor-list {
+		width: 100%;
+		height: 70%;
+		margin-top: 5%;
+		.monitor-item {
+			width: 94%;
+			margin: auto;
+			padding-bottom: 2%;
+			margin-bottom: 3%;
+			background: url("@/assets/images/concreteMonitor/listBg.png") no-repeat;
+			background-size: 100% 100%;
+			.item-top {
+				display: flex;
+				align-items: center;
+				padding-top: 3%;
+				padding-left: 3%;
+				.top-title {
+					font-size: 16px;
+					color: #fff;
+				}
+				.top-state {
+					padding: 0% 1%;
+					font-size: 12px;
+					margin-left: 2%;
+					color: #fff;
+					background: #ec6266;
+					border-radius: 2px 2px 2px 2px;
+				}
+			}
+			.item-bottom {
+				display: flex;
+				justify-content: space-between;
+				margin-left: 3%;
+				margin-top: 2%;
+				margin-right: 6%;
+				.bottom-text {
+					font-size: 12px;
+					color: #a1accb;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/qualityControl/concreteMonitor/rightTop.vue b/src/views/sevenLargeScreen/qualityControl/concreteMonitor/rightTop.vue
new file mode 100644
index 0000000..6d25e5c
--- /dev/null
+++ b/src/views/sevenLargeScreen/qualityControl/concreteMonitor/rightTop.vue
@@ -0,0 +1,79 @@
+<template>
+	<Card title="混凝土统计">
+		<div class="concrete-left-bottom">
+			<div class="concrete-total">
+				<div class="text">混凝土总数</div>
+				<div class="num">365</div>
+			</div>
+			<div class="concrete-alarm">
+				<div class="text">正在告警</div>
+				<div class="num">136</div>
+			</div>
+		</div>
+	</Card>
+</template>
+
+<script setup lang="ts">
+import Card from "@/components/card.vue";
+</script>
+
+<style scoped lang="scss">
+.concrete-left-bottom {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	.concrete-total {
+		left: 20%;
+		top: 20%;
+		text-align: center;
+		position: absolute;
+		width: 20%;
+		height: 60%;
+		background: url("@/assets/images/aIEarlyWarning/monthWarn.png") no-repeat;
+		background-size: 100% 100%;
+
+		.text {
+			margin-top: 15%;
+			font-size: calc(100vw * 16 / 1920);
+			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+			font-weight: 500;
+			color: #65d7f9;
+		}
+		.num {
+			margin-top: 10%;
+			font-weight: bold;
+			font-family: sadigitalNumber;
+			font-size: calc(100vw * 24 / 1920);
+			background: linear-gradient(180deg, #65d7f9 0%, #ffffff 100%);
+			-webkit-background-clip: text;
+			-webkit-text-fill-color: transparent;
+		}
+	}
+	.concrete-alarm {
+		right: 20%;
+		bottom: 20%;
+		text-align: center;
+		position: absolute;
+		width: 20%;
+		height: 60%;
+		background: url("@/assets/images/aIEarlyWarning/weekWarn.png") no-repeat;
+		background-size: 100% 100%;
+		.text {
+			margin-top: 10%;
+			font-size: calc(100vw * 16 / 1920);
+			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+			font-weight: 500;
+			color: rgba(255, 255, 255, 0.85);
+		}
+		.num {
+			margin-top: 10%;
+			font-family: sadigitalNumber;
+			font-weight: bold;
+			font-size: calc(100vw * 24 / 1920);
+			background-image: linear-gradient(180deg, #dad8b4 0%, #f4d065 100%);
+			background-clip: text;
+			-webkit-text-fill-color: transparent;
+		}
+	}
+}
+</style>