diff --git a/src/assets/images/construction/Group 4413.png b/src/assets/images/construction/Group 4413.png
new file mode 100644
index 00000000..e6006658
Binary files /dev/null and b/src/assets/images/construction/Group 4413.png differ
diff --git a/src/assets/images/construction/Group 4558.png b/src/assets/images/construction/Group 4558.png
new file mode 100644
index 00000000..acb70690
Binary files /dev/null and b/src/assets/images/construction/Group 4558.png differ
diff --git a/src/assets/images/construction/Group 45582.png b/src/assets/images/construction/Group 45582.png
new file mode 100644
index 00000000..f60141a1
Binary files /dev/null and b/src/assets/images/construction/Group 45582.png differ
diff --git a/src/assets/images/construction/Group 4709.png b/src/assets/images/construction/Group 4709.png
new file mode 100644
index 00000000..e668dbf2
Binary files /dev/null and b/src/assets/images/construction/Group 4709.png differ
diff --git a/src/assets/images/construction/Group 5550.png b/src/assets/images/construction/Group 5550.png
new file mode 100644
index 00000000..ee899102
Binary files /dev/null and b/src/assets/images/construction/Group 5550.png differ
diff --git a/src/assets/images/construction/Group 5600.png b/src/assets/images/construction/Group 5600.png
new file mode 100644
index 00000000..60d6b89a
Binary files /dev/null and b/src/assets/images/construction/Group 5600.png differ
diff --git a/src/assets/images/construction/形状结合.png b/src/assets/images/construction/形状结合.png
new file mode 100644
index 00000000..fa9045fd
Binary files /dev/null and b/src/assets/images/construction/形状结合.png differ
diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts
index 361ceda4..e0b4ba2e 100644
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@@ -97,6 +97,11 @@ export const staticRouter: RouteRecordRaw[] = [
 			// 	name: "工程概况-1",
 			// 	component: () => import("@/views/sevenLargeScreen/comprehensiveManage/projectOverview/indexer.vue")
 			// },
+			{
+				path: "/projectioter",
+				name: "双碳管理",
+				component: () => import("@/views/sevenLargeScreen/constructionview/index.vue")
+			},
 			{
 				path: "/smartPartyBuilding",
 				name: "智慧党建",
diff --git a/src/stores/modules/publicdata.ts b/src/stores/modules/publicdata.ts
new file mode 100644
index 00000000..25950851
--- /dev/null
+++ b/src/stores/modules/publicdata.ts
@@ -0,0 +1,20 @@
+import { defineStore, createPinia } from "pinia"
+
+
+export const PublicDataer = defineStore({
+    id: "PublicDataer",
+
+    // 数据
+    state: (): PublicDataer => ({
+        //  数据
+        construction: false
+    }),
+
+    // 方法
+    actions: {
+        async ConstructionSwitch() {
+            this.construction = !this.construction;
+        }
+    }
+
+})
diff --git a/src/views/sevenLargeScreen/constructionview/components/BottomLeft.vue b/src/views/sevenLargeScreen/constructionview/components/BottomLeft.vue
new file mode 100644
index 00000000..3a95e6d6
--- /dev/null
+++ b/src/views/sevenLargeScreen/constructionview/components/BottomLeft.vue
@@ -0,0 +1,590 @@
+<template>
+	<div class="bottomleft-box">
+		<div class="bole-left">
+			<div v-if="reload" id="btlTypeone" style="width: 100%; height: 100%"></div>
+		</div>
+		<div class="bole-right">
+			<div class="bol-title">
+				<div class="bol-item"></div>
+			</div>
+			<div class="bol-statis">
+				<div class="bolst-box">
+					<div class="bst-left">累计减碳量</div>
+					<div class="bst-con">
+						<div class="bstc-item">1</div>
+						<div class="bstc-item">0</div>
+						<div class="bstc-item">4</div>
+						<div class="bstc-item">7</div>
+						<div class="bstc-itemer">.</div>
+						<div class="bstc-item">4</div>
+						<div class="bstc-item">7</div>
+					</div>
+					<div class="bst-right">tC02</div>
+				</div>
+			</div>
+			<div class="bol-echer">
+				<div v-if="reload" id="bolecherTypeone" style="width: 100%; height: 100%"></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+
+<script setup lang="ts">
+import * as echarts from "echarts";
+import { reactive, ref, onMounted, onBeforeUnmount, nextTick } from "vue";
+const reload = ref(false);
+
+onMounted(() => {
+	reload.value = true;
+	nextTick(() => {
+		getlttopContainercoss();
+		getlttopbolecher();
+	});
+});
+
+// 树状图
+const lineX = reactive(["1号", "2号", "3号", "4号", "5号", "6号", "7号"]);
+const dataone = reactive([200, 150, 146, 120, 140, 160, 50]);
+const datatwo = reactive([150, 140, 130, 110, 150, 160, 20]);
+
+const getlttopContainercoss = () => {
+	const chartContainer = echarts.init(document.getElementById("btlTypeone"));
+	const option = {
+		// 提示框
+		tooltip: {
+			//触发类型
+			trigger: "axis",
+			// 提示框的背景颜色
+			backgroundColor: "rgba(173, 198, 255, 0.50)",
+			// 提示框边框厚度
+			borderWidth: 0,
+			// 提示款边框颜色
+			borderColor: "#ccc",
+			// 提示框字体颜色
+			textStyle: {
+				color: "#fff"
+			},
+			// 选中数据时x-y轴样式
+			axisPointer: {
+				type: "cross",
+				// 小方块
+				label: {
+					// 小方块背景颜色
+					backgroundColor: "#6a7985"
+					// backgroundColor: '#e10602'
+					// 小方块字体颜色
+					// color: '#e10602'
+				}
+			}
+		},
+		legend: {
+			// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+			//字体样式
+			textStyle: {
+				color: "#fff",
+				fontSize: 14,
+				padding: [0, 0, 0, 10] // 调整文字与色块之间的距离，这里设置为10像素
+			},
+			//图标形状
+			icon: "roundRect",
+			orient: "horizontal",
+			itemWidth: 22,
+			itemHeight: 10,
+			right: "10%",
+			top: 0
+		},
+		grid: {
+			left: "3%",
+			right: "4%",
+			bottom: "3%",
+			containLabel: true
+		},
+		xAxis: [
+			{
+				// 单位
+				name: "dkjflk",
+				type: "category",
+				boundaryGap: true,
+				data: ["2023-10", "2023-12", "2024-2", "2024-4", "2024-6", "2024-8", "2024-10"],
+				axisTick: {
+					show: false
+					// length:7
+				},
+				axisLine: {
+					lineStyle: {
+						color: "rgba(32, 121, 160, 0.3)"
+					}
+				},
+				axisLabel: {
+					color: "#fff",
+					margin: 10
+				},
+				nameTextStyle: {
+					color: "#7AADFF ",
+					fontSize: 8
+				},
+				splitLine: {
+					lineStyle: {
+						color: "rgba(255,255,255,0.08)"
+					}
+				}
+			}
+		],
+		yAxis: [
+			{
+				type: "value",
+				min: 0, // 设置y轴最小值
+				max: 100, // 设置y轴最大值
+				interval: 20, // 设置间隔为20
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "rgba(32, 121, 160, 0.3)"
+					}
+				},
+				axisTick: {
+					show: false
+				},
+
+				axisLabel: {
+					color: "#fff",
+					margin: 10,
+					formatter: function (value) {
+						return value + " %"; // 在每个标签后加上百分号
+					}
+				},
+				splitLine: {
+					lineStyle: {
+						color: "rgba(32, 121, 160, 0.3)"
+					}
+				},
+				splitArea: {
+					areaStyle: {
+						color: "rgba(2, 29, 159, 0.7)"
+					}
+				}
+			}
+		],
+		series: [
+			{
+				name: "生活区",
+				type: "line",
+				stack: "Total",
+				areaStyle: {},
+				// 鼠标在图例上的效果
+				emphasis: {
+					// 选中这条数据，隐藏其他数据
+					// focus: 'series'
+				},
+				data: [0, 0, 0, 0, 0, 0, 0],
+				// 折线变得圆滑
+				smooth: true,
+				// 把点去掉
+				showSymbol: false,
+				// 折线颜色
+				lineStyle: {
+					width: 3,
+					color: "#a07b3f"
+					// color: '#1e1e1e'
+				},
+				// 标头-颜色
+				itemStyle: {
+					color: "#a07b3f"
+					// color: '#1e1e1e'
+				},
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{
+							offset: 0,
+							color: "rgba(50, 197, 255, 0.4)"
+						},
+						{
+							offset: 1,
+							color: "rgba(55, 167, 232, 0.4)"
+						}
+					])
+				}
+			},
+			{
+				name: "展馆区",
+				type: "line",
+				stack: "Total",
+				areaStyle: {},
+				emphasis: {
+					// focus: 'series'
+				},
+				data: [0, 0, 12, 0, 50, 40, 0],
+				// 折线变得圆滑
+				smooth: true,
+				// 把点去掉
+				showSymbol: false,
+				lineStyle: {
+					width: 3,
+					color: "#5392b2"
+				},
+				itemStyle: {
+					color: "#5392b2"
+				},
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{
+							offset: 0,
+							color: "rgba(50, 197, 255, 0.4)"
+						},
+						{
+							offset: 1,
+							color: "rgba(55, 167, 232, 0.4)"
+						}
+					])
+				}
+			},
+			{
+				name: "施工区",
+				type: "line",
+				stack: "Total",
+				areaStyle: {},
+				// 鼠标在图例上的效果
+				emphasis: {
+					// 选中这条数据，隐藏其他数据
+					// focus: 'series'
+				},
+				data: [60, 48, 20, 40, 40, 30, 0],
+				// 折线变得圆滑
+				smooth: true,
+				// 把点去掉
+				showSymbol: false,
+				// 折线颜色
+				lineStyle: {
+					width: 3,
+					color: "#32C5FF"
+					// color: '#1e1e1e'
+				},
+				// 标头-颜色
+				itemStyle: {
+					color: "#32C5FF"
+					// color: '#1e1e1e'
+				},
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{
+							offset: 0,
+							color: "rgba(50, 197, 255, 0.4)"
+						},
+						{
+							offset: 1,
+							color: "rgba(55, 167, 232, 0.4)"
+						}
+					])
+				}
+			},
+			{
+				name: "办公区",
+				type: "line",
+				stack: "Total",
+				areaStyle: {},
+				emphasis: {
+					// focus: 'series'
+				},
+				data: [20, 20, 10, 20, 5, 19, 0],
+				// 折线变得圆滑
+				smooth: true,
+				// 把点去掉
+				showSymbol: false,
+				lineStyle: {
+					width: 3,
+					color: "#0368FF"
+				},
+				itemStyle: {
+					color: "#0368FF"
+				},
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{
+							offset: 0,
+							color: "rgba(50, 197, 255, 0.4)"
+						},
+						{
+							offset: 1,
+							color: "rgba(55, 167, 232, 0.4)"
+						}
+					])
+				}
+			}
+		]
+	};
+	chartContainer.setOption(option);
+};
+
+const devicenet = reactive([
+	{
+		a: "光伏发电",
+		b: 300,
+		c: 4
+	},
+	{
+		a: "绿色建材",
+		b: 250,
+		c: 25
+	},
+	{
+		a: "垃圾资源化",
+		b: 430,
+		c: 0
+	},
+	{
+		a: "专陪减碳",
+		b: 350,
+		c: 0
+	}
+]);
+const getlttopbolecher = () => {
+	// 在线设备
+	let online = devicenet.map(v => Number(v.b));
+	let bartitle = devicenet.map(v => v.a);
+	const chartContainer = echarts.init(document.getElementById("bolecherTypeone"));
+	const option = {
+		tooltip: {
+			trigger: "axis",
+			axisPointer: {
+				type: "shadow"
+			}
+		},
+		grid: {
+			top: "1%",
+			left: "3%",
+			right: "10%",
+			bottom: "3%",
+			containLabel: true
+		},
+		xAxis: {
+			name: "tCO2", //红色箭头效果
+			type: "value",
+			axisTick: {
+				show: false
+				// length:7
+			},
+			axisLine: {
+				lineStyle: {
+					color: "#15396f"
+				}
+			},
+			axisLabel: {
+				color: "#fff",
+				margin: 15
+			},
+			nameTextStyle: {
+				color: "#fff", // 字体颜色
+				fontSize: 15, // 字体大小
+				// fontWeight: "bold", // 字体粗细
+				align: "center" // 对齐方式
+				// lineHeight: 20 // 行高
+			},
+			splitLine: {
+				lineStyle: {
+					color: "#15396f"
+				}
+			}
+		},
+		yAxis: {
+			type: "category",
+			data: ["光伏发电", "绿色建材", "垃圾资源化", "装配式减碳"],
+			axisLine: {
+				show: true,
+				lineStyle: {
+					color: "#15396f"
+				}
+			},
+			axisTick: {
+				show: false
+			},
+
+			axisLabel: {
+				color: "#fff",
+				fontSize: 14, // 设置文字大小为14
+				margin: 10
+			},
+			splitLine: {
+				lineStyle: {
+					color: "#15396f"
+				}
+			},
+			splitArea: {
+				areaStyle: {
+					color: "#15396f"
+				}
+			}
+		},
+		series: [
+			{
+				name: "",
+				type: "bar",
+				data: [300, 280, 450, 380],
+				barWidth: 5,
+				itemStyle: {
+					normal: {
+						color: {
+							type: "linear",
+							x: 0,
+							y: 0,
+							x2: 1,
+							y2: 0,
+							colorStops: [
+								{
+									offset: 0,
+									color: "rgba(74, 181, 232, 0)" // 渐变起始颜色
+								},
+								{
+									offset: 1,
+									color: "rgba(74, 181, 232, 1)" // 渐变结束颜色
+								}
+							],
+							global: false // 缺省为 false
+						}
+					}
+				}
+			}
+		],
+		graphic: [
+			{
+				type: "image",
+				z: 100,
+				style: {
+					image: "http://jxj.zhgdyun.com:15551/image/6721eaf401fdb41366cc19c7.png", // 图片URL
+					width: 30,
+					height: 30
+				},
+				position: [310, 11] // 第一个柱子的位置
+			},
+			{
+				type: "image",
+				z: 100,
+				style: {
+					image: "http://jxj.zhgdyun.com:15551/image/6721eaf401fdb41366cc19c7.png", // 图片URL
+					width: 30,
+					height: 30
+				},
+				position: [350, 59] // 第一个柱子的位置
+			},
+			{
+				type: "image",
+				z: 100,
+				style: {
+					image: "http://jxj.zhgdyun.com:15551/image/6721eaf401fdb41366cc19c7.png", // 图片URL
+					width: 30,
+					height: 30
+				},
+				position: [246, 105] // 第一个柱子的位置
+			},
+			{
+				type: "image",
+				z: 100,
+				style: {
+					image: "http://jxj.zhgdyun.com:15551/image/6721eaf401fdb41366cc19c7.png", // 图片URL
+					width: 30,
+					height: 30
+				},
+				position: [260, 154] // 第一个柱子的位置
+			}
+		]
+	};
+	chartContainer.setOption(option);
+};
+</script>
+
+<style lang="scss" scoped>
+.bottomleft-box {
+	width: 96%;
+	height: 94%;
+	// background: red;
+	display: flex;
+	padding: 12px;
+
+	.bole-left {
+		flex: 1;
+		// background: skyblue;
+	}
+
+	.bole-right {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		// background: skyblue;
+
+		.bol-title {
+			width: 100%;
+			height: 18px;
+			margin-top: 10px;
+			display: flex;
+			justify-content: center;
+			.bol-item {
+				width: 90%;
+				height: 21px;
+				background: url("@/assets/images/construction/Group 4413.png") no-repeat;
+				background-size: 100% 100%;
+			}
+		}
+
+		.bol-statis {
+			margin: 20px 0 30px;
+
+			// background: skyblue;
+			display: flex;
+			justify-content: center;
+
+			.bolst-box {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				.bst-left,
+				.bst-right {
+					font-family: OPPOSans, OPPOSans;
+					font-weight: 400;
+					font-size: 14px;
+					color: #ffffff;
+				}
+
+				.bst-con {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+					.bstc-item {
+						width: 26px;
+						height: 32px;
+						background: rgba(39, 88, 192, 0.1);
+						box-shadow: inset 0px 0px 1px 1px #051220;
+						border-radius: 0px 0px 0px 0px;
+						border: 1px solid rgba(39, 88, 192, 0.6);
+						font-family: OPPOSans, OPPOSans;
+						font-weight: 400;
+						font-size: 14px;
+						color: #ffffff;
+						font-family: Let "s go Digital, Let" s go Digital;
+						font-weight: 400;
+						font-size: 26px;
+						color: #4ac0f3;
+						// line-height: 30px;
+						letter-spacing: 2px;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						margin: 0 6px;
+					}
+
+					.bstc-itemer {
+						color: #ffffff;
+						font-size: 20px;
+						font-weight: 700;
+					}
+				}
+			}
+		}
+
+		.bol-echer {
+			flex: 1;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/constructionview/components/BottomRight.vue b/src/views/sevenLargeScreen/constructionview/components/BottomRight.vue
new file mode 100644
index 00000000..4398083d
--- /dev/null
+++ b/src/views/sevenLargeScreen/constructionview/components/BottomRight.vue
@@ -0,0 +1,380 @@
+<template>
+	<div class="botright-box">
+		<div class="botrbox">
+			<div class="botbox-item">
+				<div class="botboxitem-one">
+					<div class="boxionitile">实际碳排放</div>
+					<div class="bstc-item">1</div>
+					<div class="bstc-item">0</div>
+					<div class="bstc-item">4</div>
+					<div class="bstc-itemer">.</div>
+					<div class="bstc-item">7</div>
+					<div class="bstc-item">4</div>
+					<div class="bstc-item">7</div>
+					<div class="boxionitile">tC02</div>
+				</div>
+
+				<div class="botboxitem-one">
+					<div class="boxionitile">实际碳排放</div>
+					<div class="bstc-item">1</div>
+					<div class="bstc-item">0</div>
+					<div class="bstc-item">4</div>
+					<div class="bstc-itemer">.</div>
+					<div class="bstc-item">7</div>
+					<div class="bstc-item">4</div>
+					<div class="bstc-item">7</div>
+					<div class="boxionitile">tC02</div>
+				</div>
+			</div>
+		</div>
+		<div class="botrstatic">
+			<div class="botrstic-one">范围一 1.05%</div>
+			<div class="botrstic-one">范围二 1.05%</div>
+			<div class="botrstic-one">范围三 1.05%</div>
+			<div class="botrstic-two">范围一 1.05%</div>
+			<div class="botrstic-two">范围二 1.05%</div>
+			<div class="botrstic-two">范围三 1.05%</div>
+		</div>
+		<div class="botrcon">
+			<div v-if="reload" id="botrcontainercoss" style="width:100%;height:100%"></div>
+		</div>
+	</div>
+</template>
+
+
+<script setup lang="ts">
+import * as echarts from "echarts";
+import { reactive, ref, onMounted, onBeforeUnmount, nextTick } from "vue";
+const reload = ref(false);
+
+onMounted(() => {
+	console.log("===============执行右下角==================");
+	reload.value = true;
+	nextTick(() => {
+		getlttopContainercoss();
+	});
+});
+
+// 树状图
+let y = reactive([150, 230, 224, 218, 135, 147, 260]);
+let x = reactive(["2023-10", "2023-12", "2024-2", "2024-4", "2024-6", "2024-8", "2024-10"]);
+
+const getlttopContainercoss = () => {
+	const chartContainer = echarts.init(document.getElementById("botrcontainercoss"));
+	const option = {
+		// 提示框
+		tooltip: {
+			//触发类型
+			trigger: "axis",
+			// 提示框的背景颜色
+			backgroundColor: "rgba(173, 198, 255, 0.50)",
+
+			// 提示框边框厚度
+			borderWidth: 0,
+			// 提示款边框颜色
+			borderColor: "#ccc",
+			// 提示框字体颜色
+			textStyle: {
+				color: "#fff"
+			},
+			// 选中数据时x-y轴样式
+			axisPointer: {
+				type: "cross",
+				// 小方块
+				label: {
+					// 小方块背景颜色
+					backgroundColor: "#6a7985"
+					// backgroundColor: '#e10602'
+					// 小方块字体颜色
+					// color: '#e10602'
+				}
+			}
+		},
+		toolbox: {
+			// feature: {
+			// 	dataView: { show: true, readOnly: false },
+			// 	magicType: { show: true, type: ["line", "bar"] },
+			// 	restore: { show: true },
+			// 	saveAsImage: { show: true }
+			// }
+		},
+		grid: {
+			// top:"3%",
+			left: "3%",
+			right: "4%",
+			bottom: "3%",
+			containLabel: true
+		},
+
+		xAxis: {
+			type: "category",
+			data: x,
+			boundaryGap: true,
+			axisTick: {
+				show: false
+				// length:7
+			},
+			axisLine: {
+				lineStyle: {
+					color: "rgba(32, 121, 160, 0.3)"
+				}
+			},
+			axisLabel: {
+				color: "#fff",
+				margin: 10
+			},
+			nameTextStyle: {
+				color: "#7AADFF ",
+				fontSize: 8
+			},
+			splitLine: {
+				lineStyle: {
+					color: "rgba(255,255,255,0.08)"
+				}
+			}
+		},
+		yAxis: [
+			{
+				type: "value",
+				splitNumber: 5,
+				axisLine: {
+					show: false,
+					lineStyle: {
+						color: "rgba(32, 121, 160, 0.3)"
+					}
+				},
+				axisTick: {
+					show: false
+				},
+				axisLabel: {
+					color: "#fff",
+					margin: 10
+				},
+				splitLine: {
+					lineStyle: {
+						color: "rgba(32, 121, 160, 0.3)"
+					}
+				},
+				splitArea: {
+					areaStyle: {
+						color: "rgba(2, 29, 159, 0.7)"
+					}
+				},
+				name: "排放量tCO2", // 添加单位名称
+				nameLocation: "end", // 将单位名称放在y轴的最上面
+				nameTextStyle: {
+					color: "#fff", // 设置单位名称的颜色
+					fontSize: 14 // 设置单位名称的字体大小
+				}
+			}
+			// {
+			// 	type: "value",
+			// 	name: "Temperature",
+			// 	min: 0,
+			// 	max: 25,
+			// 	interval: 5,
+			// 	axisLabel: {
+			// 		formatter: "{value} °C"
+			// 	}
+			// }
+		],
+		series: [
+			{
+				name: "施工区",
+				type: "bar",
+				tooltip: {
+					valueFormatter: function (value) {
+						return (value as number) + "辆";
+					}
+				},
+				itemStyle: {
+					color: {
+						type: "linear",
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [
+							{ offset: 0, color: "#71d7e5" }, // 渐变开始颜色
+							{ offset: 0.5, color: "#71d7e5" }, // 渐变中间颜色
+							{ offset: 1, color: "#71d7e5" } // 渐变结束颜色
+						]
+					},
+					barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
+				},
+				barWidth: "15%", // 设置柱子宽度为50%
+				data: [35, 50, 75, 40, 30, 0, 0]
+			},
+			{
+				name: "办公区",
+				type: "bar",
+				tooltip: {
+					valueFormatter: function (value) {
+						return (value as number) + " 辆";
+					}
+				},
+				itemStyle: {
+					color: {
+						type: "linear",
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [
+							{ offset: 0, color: "#fda52e" }, // 渐变开始颜色
+							{ offset: 0.5, color: "#fda52e" }, // 渐变中间颜色
+							{ offset: 1, color: "#fda52e" } // 渐变结束颜色
+						]
+					},
+					barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
+				},
+				barWidth: "15%", // 设置柱子宽度为50%
+
+				data: [50, 40, 20, 30, 45, 0, 0]
+			},
+			{
+				name: "实测值",
+				type: "line",
+
+				yAxisIndex: 0,
+				itemStyle: {
+					color: "#d38c30" // 设置线条颜色为蓝色
+				},
+				symbol: "image://http://jxj.zhgdyun.com:15551/image/6721ed8901fdb41366cc19c8.png", // 设置节点为图片
+				symbolSize: 30, // 设置图片大小
+				// smooth: true,
+				// showSymbol: false,
+				data: [50, 40, 20, 30, 45, 0, 0]
+			},
+			{
+				name: "预测值",
+				type: "line",
+				yAxisIndex: 0,
+				itemStyle: {
+					color: "#7ec4d5" // 设置线条颜色为红色
+				},
+				lineStyle: {
+					type: "dashed" // 设置线条为虚线
+				},
+				symbol: "image://http://jxj.zhgdyun.com:15551/image/6721eaf401fdb41366cc19c7.png", // 设置节点为图片
+				symbolSize: 30, // 设置图片大小
+				// smooth: true,
+				// showSymbol: false,
+				data: [35, 50, 75, 40, 30, 0, 0]
+			}
+		]
+	};
+	chartContainer.setOption(option);
+};
+</script>
+
+<style lang="scss" scoped>
+.botright-box {
+	width: 96%;
+	height: 94%;
+	// background: red;
+	display: flex;
+	padding: 12px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+
+	.botrbox {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		// background: skyblue;
+
+		.botbox-item {
+			width: 80%;
+			display: flex;
+			justify-content: space-between;
+
+			.botboxitem-one {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				.boxionitile {
+					font-family: OPPOSans, OPPOSans;
+					font-weight: 400;
+					font-size: 14px;
+					color: #ffffff;
+				}
+
+				.bstc-item {
+					width: 26px;
+					height: 32px;
+					background: rgba(39, 88, 192, 0.1);
+					box-shadow: inset 0px 0px 1px 1px #051220;
+					border-radius: 0px 0px 0px 0px;
+					border: 1px solid rgba(39, 88, 192, 0.6);
+					font-family: OPPOSans, OPPOSans;
+					font-weight: 400;
+					font-size: 14px;
+					color: #ffffff;
+					font-family: Let "s go Digital, Let" s go Digital;
+					font-weight: 400;
+					font-size: 26px;
+					color: #4ac0f3;
+					// line-height: 30px;
+					letter-spacing: 2px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					margin: 0 6px;
+				}
+
+				.bstc-itemer {
+					color: #ffffff;
+					font-size: 20px;
+					font-weight: 700;
+				}
+			}
+		}
+	}
+
+	.botrstatic {
+		height: 32px;
+		margin: 20px 0;
+		// background: skyblue;
+		display: flex;
+		align-items: center;
+		justify-content: space-evenly;
+
+		.botrstic-two,
+		.botrstic-one {
+			width: 120px;
+			height: 31px;
+
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			font-family: PangMenZhengDao, PangMenZhengDao;
+			font-weight: 400;
+			font-size: 15px;
+			color: rgba(255, 255, 255, 0.6);
+			// line-height: 19px;
+			letter-spacing: 1px;
+			text-shadow: 0px 4px 4px #01131f;
+		}
+
+		.botrstic-one {
+			background: url("@/assets/images/construction/Group 45582.png") no-repeat;
+			background-size: 100% 100%;
+		}
+
+		.botrstic-two {
+			background: url("@/assets/images/construction/Group 4558.png") no-repeat;
+			background-size: 100% 100%;
+		}
+	}
+
+	.botrcon {
+		flex: 1;
+		// background: skyblue;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/constructionview/components/TopCenter.vue b/src/views/sevenLargeScreen/constructionview/components/TopCenter.vue
new file mode 100644
index 00000000..32bbb15f
--- /dev/null
+++ b/src/views/sevenLargeScreen/constructionview/components/TopCenter.vue
@@ -0,0 +1,423 @@
+<template>
+	<div class="topCenterion">
+		<div class="tp-left">
+			<div v-if="reload" id="lefttTypeone" style="width: 100%; height: 97%"></div>
+
+			<div class="item-title">
+				<p></p>分区用电占比
+			</div>
+		</div>
+
+		<div class="tp-right">
+			<div class="tpright-title">
+				<div class="tr-itone">能源类型</div>
+				<div class="tr-ittwo">
+					今日用量
+					<p>kw-h</p>
+				</div>
+				<div class="tr-itthere">
+					当月总用量
+					<p>kw-h</p>
+				</div>
+			</div>
+			<div class="tprig-item statichead">
+				<div class="tr-itone">
+					<div class="tr-itonitem">1号配电房<br>2号表用电</div>
+				</div>
+				<div class="tr-ittwo">97.40</div>
+				<div class="tr-itthere">274207.20</div>
+			</div>
+
+			<div class="tprig-item">
+				<div class="tr-itone">
+					<div class="tr-itonitem">办公区</div>
+				</div>
+				<div class="tr-ittwo">--</div>
+				<div class="tr-itthere">62641.30</div>
+			</div>
+			<div class="tprig-item">
+				<div class="tr-itone">
+					<div class="tr-itonitem">生活区</div>
+				</div>
+				<div class="tr-ittwo">247.00</div>
+				<div class="tr-itthere">373150.00</div>
+			</div>
+			<div class="tprig-item">
+				<div class="tr-itone">
+					<div class="tr-itonitem">加工厂</div>
+				</div>
+				<div class="tr-ittwo">--</div>
+				<div class="tr-itthere">18908.00</div>
+			</div>
+			<div class="tprig-item">
+				<div class="tr-itone">
+					<div class="tr-itonitem">加工厂</div>
+				</div>
+				<div class="tr-ittwo">--</div>
+				<div class="tr-itthere">18908.00</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+
+<script setup lang="ts">
+import * as echarts from "echarts";
+import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
+import { datas } from "../../../../enums/company/SetpsEnum";
+
+const reload = ref(false);
+
+onMounted(() => {
+	reload.value = true;
+	nextTick(() => {
+		drawEcharter();
+	});
+});
+
+function drawEcharter() {
+	let echartsTest = echarts.init(document.getElementById("lefttTypeone"));
+	let option = {
+		tooltip: {
+			trigger: "item",
+			backgroundColor: "#000000",
+			borderColor: "#000000",
+			formatter: function (params) {
+				console.log(params.seriesName, "当前图例");
+				// let result = " " + params.marker + params.name + " : " + params.value;
+				// if (params.seriesName == "数据主体") {
+				// 	return result;
+				// }
+
+				return `${params.seriesName} `;
+			},
+			textStyle: {
+				color: "#FFFFFF"
+			}
+		},
+		title: {
+			text: 933085,
+			subtext: "总用电 kw/h",
+			x: "48%",
+			y: "60%",
+			textAlign: "center",
+			textStyle: {
+				fontWeight: 400,
+				fontSize: 24,
+				color: "#FFFFFF",
+				fontFamily: "sadigitalNumber"
+			},
+			subtextStyle: {
+				fontWeight: 400,
+				fontSize: 12,
+				color: "#A1ACCB"
+				// fontFamily: "Source Han Sans CN"
+			}
+		},
+		legend: {
+			left: "13%",
+			top: "15%",
+			data: ["办公区", "展馆区", "施工区", "生活区"],
+			itemGap: 14,
+			itemWidth: 12, // 设置宽度
+			itemHeight: 12, // 设置高度
+			textStyle: {
+				color: "#fff",
+				fontSize: 16,
+				padding: [0, 0, 0, 10] // 调整文字与色块之间的距离，这里设置为10像素
+			}
+		},
+		series: [
+			{
+				name: "",
+				type: "gauge",
+				center: ["48%", "65%"],
+				radius: "98%",
+				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: "pie",
+				color: ["#82fbea"],
+				selectedMode: "single",
+				radius: ["50%", "55%"],
+				center: ["48%", "65%"],
+				label: {
+					show: false,
+					position: "inner",
+					fontSize: 14
+				},
+				labelLine: {
+					show: false
+				},
+				data: [
+					{ value: 160, name: "", itemStyle: { color: "#09255c" } },
+					{ value: 240, name: "", itemStyle: { color: "#82fbea" } }
+				]
+			},
+			{
+				name: "展馆区",
+				type: "pie",
+				color: ["#6375c7"],
+				selectedMode: "single",
+				radius: ["59%", "64%"],
+				center: ["48%", "65%"],
+				label: {
+					show: false,
+					position: "inner",
+					fontSize: 14
+				},
+				labelLine: {
+					show: false
+				},
+				data: [
+					{ value: 100, name: "", itemStyle: { color: "#09255c" } },
+					{ value: 300, name: "", itemStyle: { color: "#6375c7" } }
+				]
+			},
+			{
+				name: "施工区",
+				type: "pie",
+				color: ["#4cc4f8"],
+				selectedMode: "single",
+				radius: ["68%", "73%"],
+				center: ["48%", "65%"],
+				label: {
+					show: false,
+					position: "inner",
+					fontSize: 14
+				},
+				labelLine: {
+					show: false
+				},
+				data: [
+					{ value: 50, name: "", itemStyle: { color: "#09255c" } },
+					{ value: 350, name: "办公区", itemStyle: { color: "#4cc4f8" } }
+				]
+			},
+			{
+				name: "生活区",
+				type: "pie",
+				color: ["#eea959"],
+				selectedMode: "single",
+				radius: ["77%", "82%"],
+				center: ["48%", "65%"],
+				label: {
+					show: false,
+					position: "inner",
+					fontSize: 14
+				},
+				labelLine: {
+					show: false
+				},
+				data: [
+					{ value: 30, name: "", itemStyle: { color: "#09255c" } },
+					{ value: 370, name: "", itemStyle: { color: "#eea959" } }
+				]
+			}
+		]
+	};
+	echartsTest.setOption(option, true);
+}
+</script>
+
+<style lang="scss" scoped>
+.topCenterion {
+	width: 96% !important;
+	height: 94%;
+	// background: red;
+	display: flex;
+	padding: 12px;
+
+	.tp-left {
+		width: 235px;
+		height: 100%;
+		margin-bottom: 10px;
+		// background: skyblue;
+		position: relative;
+
+		.item-title {
+			position: absolute;
+			top: 10px;
+			left: 20px;
+			font-family: OPPOSans, OPPOSans;
+			font-weight: 500;
+			font-size: 16px;
+			color: #ffffff;
+			line-height: 19px;
+			text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
+			display: flex;
+			align-items: center;
+
+			p {
+				margin: 0;
+				padding: 0;
+				display: block;
+				margin-top: 2px;
+				margin-right: 10px;
+				transform: rotate(137deg); /* 旋转90度 */
+				width: 8px;
+				height: 8px;
+				background: linear-gradient(180deg, #65d7f9 0%, #82fbea 100%);
+			}
+		}
+	}
+
+	.tp-right {
+		flex: 1;
+		height: 100%;
+		// background: skyblue;
+
+		display: flex;
+		flex-direction: column;
+
+		.tpright-title,
+		.tprig-item {
+			width: 100%;
+			flex: 1;
+			display: flex;
+
+			.tr-itone {
+				flex: 5;
+			}
+
+			.tr-ittwo {
+				flex: 2;
+				// background: skyblue;
+			}
+
+			.tr-itthere {
+				flex: 3;
+				// background: skyblue;
+			}
+		}
+		.tpright-title {
+			// background: skyblue;
+			border: 1px solid #00366b;
+			font-family: PingFang SC, PingFang SC;
+			font-weight: 800;
+			font-size: 14px;
+			color: #04abff;
+
+			p {
+				margin: 0;
+				padding: 0;
+			}
+			.tr-itone {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			.tr-ittwo {
+				border-left: 1px solid #00366b;
+				border-right: 1px solid #00366b;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+			}
+
+			.tr-itthere {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+
+		.tprig-item {
+			// background: yellow;
+			background: rgba(1, 128, 254, 0.1);
+
+			margin-bottom: 10px;
+
+			border: 1px solid #012549;
+			font-family: PingFang SC, PingFang SC;
+			font-weight: 500;
+			font-size: 14px;
+			color: #e2f9ff;
+
+			.tr-itone {
+				.tr-itonitem {
+					width: 80%;
+					height: 80%;
+					background: skyblue;
+					background: url("@/assets/images/construction/形状结合.png") no-repeat;
+					background-size: 100% 100%;
+
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+			}
+
+			.tr-itone,
+			.tr-itthere,
+			.tr-ittwo {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.tr-ittwo {
+				border-left: 1px solid #012549;
+				border-right: 1px solid #012549;
+			}
+
+			&:last-child {
+				margin-bottom: 0 !important;
+			}
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/constructionview/components/TopLeft.vue b/src/views/sevenLargeScreen/constructionview/components/TopLeft.vue
new file mode 100644
index 00000000..9f57518e
--- /dev/null
+++ b/src/views/sevenLargeScreen/constructionview/components/TopLeft.vue
@@ -0,0 +1,907 @@
+<template>
+	<div class="lefttop">
+		<div class="lt-top">
+			<div v-if="reload" id="lttopContainercoss" style="width:100%;height:100%"></div>
+		</div>
+		<div class="lt-bottom">
+			<div class="lib-item">
+				<div v-if="reload" id="lttTypeone" style="width: 100%; height: 100%"></div>
+			</div>
+			<div class="lib-itemer">
+				<div v-if="reload" id="lttTypeoneer" style="width: 100%; height: 100%"></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+
+<script setup lang="ts">
+import * as echarts from "echarts";
+import { reactive, ref, onMounted, onBeforeUnmount, nextTick } from "vue";
+const reload = ref(false);
+
+onMounted(() => {
+	reload.value = true;
+	nextTick(() => {
+		getlttopContainercoss();
+		drawEchart();
+		drawEcharter();
+	});
+});
+
+// 树状图
+let y = reactive([150, 230, 224, 218, 135, 147, 260]);
+let x = reactive(["2023-10", "2023-12", "2024-2", "2024-4", "2024-6", "2024-8", "2024-10"]);
+
+const getlttopContainercoss = () => {
+	const chartContainer = echarts.init(document.getElementById("lttopContainercoss"));
+	const option = {
+		// 提示框
+		tooltip: {
+			//触发类型
+			trigger: "axis",
+			// 提示框的背景颜色
+			backgroundColor: "rgba(173, 198, 255, 0.50)",
+			// 提示框边框厚度
+			borderWidth: 0,
+			// 提示款边框颜色
+			borderColor: "#ccc",
+			// 提示框字体颜色
+			textStyle: {
+				color: "#fff"
+			},
+			// 选中数据时x-y轴样式
+			axisPointer: {
+				type: "cross",
+				// 小方块
+				label: {
+					// 小方块背景颜色
+					backgroundColor: "#6a7985"
+					// backgroundColor: '#e10602'
+					// 小方块字体颜色
+					// color: '#e10602'
+				}
+			}
+		},
+		toolbox: {
+			// feature: {
+			// 	dataView: { show: true, readOnly: false },
+			// 	magicType: { show: true, type: ["line", "bar"] },
+			// 	restore: { show: true },
+			// 	saveAsImage: { show: true }
+			// }
+		},
+		grid: {
+			left: "3%",
+			right: "4%",
+			bottom: "3%",
+			containLabel: true
+		},
+		legend: {
+			// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+			//字体样式
+			textStyle: {
+				color: "#fff",
+				fontSize: 14,
+				padding: [0, 0, 0, 10] // 调整文字与色块之间的距离，这里设置为10像素
+			},
+			//图标形状
+			icon: "roundRect",
+			orient: "horizontal",
+			itemWidth: 22,
+			itemHeight: 10,
+			top: 0
+			// data: ["超速车辆"]
+		},
+		xAxis: {
+			type: "category",
+			data: x,
+			boundaryGap: false,
+			axisTick: {
+				show: false
+				// length:7
+			},
+			axisLine: {
+				lineStyle: {
+					color: "rgba(32, 121, 160, 0.3)"
+				}
+			},
+			axisLabel: {
+				color: "#fff",
+				margin: 10
+			},
+			nameTextStyle: {
+				color: "#7AADFF ",
+				fontSize: 8
+			},
+			splitLine: {
+				lineStyle: {
+					color: "rgba(255,255,255,0.08)"
+				}
+			}
+		},
+		yAxis: [
+			{
+				type: "value",
+				splitNumber: 5,
+				axisLine: {
+					show: false,
+					lineStyle: {
+						color: "rgba(32, 121, 160, 0.3)"
+					}
+				},
+				axisTick: {
+					show: false
+				},
+				axisLabel: {
+					color: "#fff",
+					margin: 10
+				},
+				splitLine: {
+					lineStyle: {
+						color: "rgba(32, 121, 160, 0.3)"
+					}
+				},
+				splitArea: {
+					areaStyle: {
+						color: "rgba(2, 29, 159, 0.7)"
+					}
+				},
+				name: "tCO2", // 添加单位名称
+				nameLocation: "end", // 将单位名称放在y轴的最上面
+				nameTextStyle: {
+					color: "#fff", // 设置单位名称的颜色
+					fontSize: 14 // 设置单位名称的字体大小
+				}
+			}
+			// {
+			// 	type: "value",
+			// 	name: "Temperature",
+			// 	min: 0,
+			// 	max: 25,
+			// 	interval: 5,
+			// 	axisLabel: {
+			// 		formatter: "{value} °C"
+			// 	}
+			// }
+		],
+		series: [
+			{
+				name: "施工区",
+				stack: "total", // 设置堆叠组名
+				type: "bar",
+				tooltip: {
+					valueFormatter: function (value) {
+						return (value as number) + "tCO2";
+					}
+				},
+				itemStyle: {
+					color: {
+						type: "linear",
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [
+							{ offset: 0, color: "#74d5e7" }, // 渐变开始颜色
+							{ offset: 0.5, color: "#74d5e7" }, // 渐变中间颜色
+							{ offset: 1, color: "#74d5e7" } // 渐变结束颜色
+						]
+					}
+					// barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
+				},
+				barWidth: "22%", // 设置柱子宽度为50%
+
+				data: [40, 30, 28, 40, 65, 0, 0]
+			},
+			{
+				name: "生活区",
+				stack: "total", // 设置堆叠组名
+				type: "bar",
+				tooltip: {
+					valueFormatter: function (value) {
+						return (value as number) + "tCO2";
+					}
+				},
+				itemStyle: {
+					color: {
+						type: "linear",
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [
+							{ offset: 0, color: "#c3c684" }, // 渐变开始颜色
+							{ offset: 0.5, color: "#c3c684" }, // 渐变中间颜色
+							{ offset: 1, color: "#c3c684" } // 渐变结束颜色
+						]
+					}
+					// barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
+				},
+				barWidth: "22%", // 设置柱子宽度为50%
+
+				data: [5, 0, 8, 5, 0, 0, 0]
+			},
+			{
+				name: "办公区",
+				stack: "total", // 设置堆叠组名
+				type: "bar",
+				tooltip: {
+					valueFormatter: function (value) {
+						return (value as number) + "tCO2";
+					}
+				},
+				itemStyle: {
+					color: {
+						type: "linear",
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [
+							{ offset: 0, color: "#ffa52e" }, // 渐变开始颜色
+							{ offset: 0.5, color: "#ffa52e" }, // 渐变中间颜色
+							{ offset: 1, color: "#ffa52e" } // 渐变结束颜色
+						]
+					}
+					// barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
+				},
+				barWidth: "22%", // 设置柱子宽度为50%
+
+				data: [5, 22, 8, 40, 15, 0, 0]
+			},
+			{
+				name: "展馆区",
+				stack: "total", // 设置堆叠组名
+				type: "bar",
+				tooltip: {
+					valueFormatter: function (value) {
+						return (value as number) + "tCO2";
+					}
+				},
+				itemStyle: {
+					color: {
+						type: "linear",
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [
+							{ offset: 0, color: "#81f279" }, // 渐变开始颜色
+							{ offset: 0.5, color: "#81f279" }, // 渐变中间颜色
+							{ offset: 1, color: "#81f279" } // 渐变结束颜色
+						]
+					},
+					barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
+				},
+				barWidth: "22%", // 设置柱子宽度为50%
+
+				data: [0, 10, 5, 30, 15, 0, 0]
+			},
+			{
+				name: "实测值",
+				type: "line",
+				yAxisIndex: 0,
+				itemStyle: {
+					color: "#d38c30" // 设置线条颜色为蓝色
+				},
+				symbol: "image://http://jxj.zhgdyun.com:15551/image/6721ed8901fdb41366cc19c8.png", // 设置节点为图片
+				symbolSize: 30, // 设置图片大小
+				data: [50, 40, 20, 30, 45, 0, 0]
+			},
+			{
+				name: "预测值",
+				type: "line",
+				yAxisIndex: 0,
+				itemStyle: {
+					color: "#7ec4d5" // 设置线条颜色为红色
+				},
+				lineStyle: {
+					type: "dashed" // 设置线条为虚线
+				},
+				symbol: "image://http://jxj.zhgdyun.com:15551/image/6721eaf401fdb41366cc19c7.png", // 设置节点为图片
+				symbolSize: 30, // 设置图片大小
+				data: [35, 50, 75, 40, 30, 0, 0]
+			}
+		]
+	};
+	chartContainer.setOption(option);
+};
+
+// 圆形图
+let dataList = ref([
+	{
+		value: 38,
+		show: true,
+		name: "玻璃幕墙",
+		itemStyle: {
+			normal: {
+				color: "#82FBEA",
+				borderWidth: 20
+			}
+		}
+	},
+	{
+		value: 46,
+		show: true,
+		name: "钢材",
+		itemStyle: {
+			normal: {
+				color: "#EEA959",
+				borderWidth: 20
+			}
+		}
+	},
+	{
+		value: 30,
+		show: true,
+		name: "钢筋",
+		itemStyle: {
+			normal: {
+				color: "#4CC4F8"
+			}
+		}
+	},
+	{
+		value: 30,
+		show: true,
+		name: "混凝土",
+		itemStyle: {
+			normal: {
+				color: "#E0D838"
+			}
+		}
+	},
+	{
+		value: 8,
+		show: true,
+		name: "砂浆",
+		itemStyle: {
+			normal: {
+				color: "#EC6266"
+			}
+		}
+	},
+	{
+		value: 32,
+		show: true,
+		name: "加气砖",
+		itemStyle: {
+			normal: {
+				color: "#6375C7"
+			}
+		}
+	}
+]);
+
+function drawEchart() {
+	let max = 0;
+	dataList.value.map(item => {
+		max = max + item.value;
+	});
+	let echartsTest = echarts.init(document.getElementById("lttTypeone"));
+	let option = {
+		tooltip: {
+			trigger: "item",
+			backgroundColor: "#000000",
+			borderColor: "#000000",
+			formatter: function (params) {
+				// console.log(params.seriesName, "当前图例");
+				let result = " " + params.marker + params.name + " : " + params.value;
+				if (params.seriesName == "数据主体") {
+					return result;
+				}
+			},
+			textStyle: {
+				color: "#FFFFFF"
+			}
+		},
+		title: {
+			text: max,
+			subtext: "建材生产总数",
+			x: "47%",
+			y: "35%",
+			textAlign: "center",
+			textStyle: {
+				color: "#fff",
+				fontSize: 20,
+				fontWeight: "normal",
+				fontFamily: "sadigitalNumber",
+				// lineHeight: 35
+			},
+			subtextStyle: {
+				color: "#ccc",
+				fontSize: 12,
+				fontWeight: "normal"
+			}
+		},
+		// legend: {
+		// 	selectedMode: false, // 取消图例上的点击事件
+		// 	icon: "rect",
+		// 	type: "plain",
+		//     // type: "scroll", // 设置为滚动类型
+		// 	orient: "vertical",
+		// 	left: "52%",
+		// 	top: "8%",
+		// 	align: "left",
+		// 	itemGap: 14,
+		// 	itemWidth: 8, // 设置宽度
+		// 	itemHeight: 7, // 设置高度
+		// 	symbolKeepAspect: false,
+		// 	textStyle: {
+		// 		color: "#000",
+		// 		rich: {
+		// 			name: {
+		// 				width: 190,
+		// 				verticalAlign: "right",
+		// 				fontSize: 14,
+		// 				color: "#FFFFFF",
+		// 				padding: [0, 0, 0, 10]
+		// 			},
+		// 			value: {
+		// 				align: "left",
+		// 				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;
+		// 					return "{name|" + data + "}" + "{value|" + value + "}";
+		// 				}
+		// 			}
+		// 		}
+		// 	}
+		// },
+		series: [
+			// 外侧光线
+			{
+				name: "",
+				type: "gauge",
+				center: ["50%", "50%"],
+				radius: "90%",
+				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%", "50%"],
+				radius: "77%",
+				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: 1,
+										color: "#52bef0"
+									},
+									{
+										offset: 0,
+										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: ["58%", "64%"],
+				center: ["50%", "50%"],
+				hoverAnimation: true,
+				itemStyle: {
+					borderRadius: 10,
+					borderWidth: 10
+				},
+				label: {
+					show: false,
+					position: "center"
+				},
+				emphasis: {
+					label: {
+						show: false
+					}
+				},
+				labelLine: {
+					show: false
+				},
+				data: dataList.value
+			},
+			{
+				name: "最内圆",
+				type: "pie",
+				radius: ["52%", "54%"],
+				center: ["50%", "50%"],
+				label: {
+					show: false
+				},
+
+				data: Pie()
+			}
+		]
+	};
+	echartsTest.setOption(option, true);
+}
+
+function drawEcharter() {
+	let max = 0;
+	dataList.value.map(item => {
+		max = max + item.value;
+	});
+	let echartsTest = echarts.init(document.getElementById("lttTypeoneer"));
+	let option = {
+		tooltip: {
+			trigger: "item",
+			backgroundColor: "#000000",
+			borderColor: "#000000",
+			formatter: function (params) {
+				// console.log(params.seriesName, "当前图例");
+				let result = " " + params.marker + params.name + " : " + params.value;
+				if (params.seriesName == "数据主体") {
+					return result;
+				}
+			},
+			textStyle: {
+				color: "#FFFFFF"
+			}
+		},
+		title: {
+			text: max,
+			subtext: "建材运输总数",
+			x: "24%",
+			y: "35%",
+			textAlign: "center",
+			textStyle: {
+				color: "#fff",
+				fontSize: 20,
+				fontWeight: "normal",
+				fontFamily: "sadigitalNumber",
+				// lineHeight: 35
+			},
+			subtextStyle: {
+				color: "#ccc",
+				fontSize: 12,
+				fontWeight: "normal"
+			}
+		},
+		legend: {
+			selectedMode: false, // 取消图例上的点击事件
+			icon: "rect",
+			type: "scroll",
+			orient: "vertical",
+			left: "52%",
+			top: "8%",
+			align: "left",
+			itemGap: 14,
+			itemWidth: 8, // 设置宽度
+			itemHeight: 7, // 设置高度
+			symbolKeepAspect: false,
+			textStyle: {
+				color: "#000",
+				rich: {
+					name: {
+						width: 100,
+						verticalAlign: "right",
+						fontSize: 14,
+						color: "#FFFFFF",
+						padding: [0, 0, 0, 10]
+					},
+					value: {
+						align: "left",
+						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;
+							return "{name|" + data + "}" + "{value|" + value + "}";
+						}
+					}
+				}
+			}
+		},
+		series: [
+			// 外侧光线
+			{
+				name: "",
+				type: "gauge",
+				center: ["25%", "52%"],
+				radius: "90%",
+				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: ["25%", "52%"],
+				radius: "77%",
+				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: 1,
+										color: "#52bef0"
+									},
+									{
+										offset: 0,
+										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: ["58%", "64%"],
+				center: ["25%", "52%"],
+				hoverAnimation: true,
+				itemStyle: {
+					borderRadius: 10,
+					borderWidth: 10
+				},
+				label: {
+					show: false,
+					position: "center"
+				},
+				emphasis: {
+					label: {
+						show: false
+					}
+				},
+				labelLine: {
+					show: false
+				},
+				data: dataList.value
+			},
+			{
+				name: "最内圆",
+				type: "pie",
+				radius: ["52%", "54%"],
+				center: ["25%", "52%"],
+				label: {
+					show: false
+				},
+
+				data: Pie()
+			}
+		]
+	};
+	echartsTest.setOption(option, true);
+}
+
+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;
+}
+</script>
+
+<style lang="scss" scoped>
+.lefttop {
+	width: 96%;
+	height: 94%;
+	// background: red;
+	display: flex;
+	flex-direction: column;
+	padding: 12px;
+
+	.lt-top {
+		width: 100%;
+		height: 200px;
+		margin-bottom: 10px;
+		// background: skyblue;
+	}
+
+	.lt-bottom {
+		width: 100%;
+		flex: 1;
+		display: flex;
+
+		.lib-item {
+			flex: 1;
+			// background: skyblue;
+		}
+
+		.lib-itemer {
+			flex: 2;
+			// background: skyblue;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/constructionview/components/TopRight.vue b/src/views/sevenLargeScreen/constructionview/components/TopRight.vue
new file mode 100644
index 00000000..be5c2fdb
--- /dev/null
+++ b/src/views/sevenLargeScreen/constructionview/components/TopRight.vue
@@ -0,0 +1,346 @@
+<template>
+	<div class="topright-box">
+		<div class="tr-top">
+			<div v-if="reload" id="torgContainercoss" style="width:100%;height:100%"></div>
+		</div>
+
+		<div class="tr-bottom">
+			<div class="trbot-item">
+				<p>展厅</p>
+				<p>11.90</p>
+				<p>tCO2</p>
+			</div>
+			<div class="trbot-item">
+				<p>办公区</p>
+				<p>29.56</p>
+				<p>tCO2</p>
+			</div>
+			<div class="trbot-item">
+				<p>生活区</p>
+				<p>94.85</p>
+				<p>tCO2</p>
+			</div>
+			<div class="trbot-item">
+				<p>施工区</p>
+				<p>336.35</p>
+				<p>tCO2</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+
+<script setup lang="ts">
+import * as echarts from "echarts";
+import { reactive, ref, onMounted, onBeforeUnmount, nextTick } from "vue";
+const reload = ref(false);
+
+onMounted(() => {
+	reload.value = true;
+	nextTick(() => {
+		getlrigContainercoss();
+	});
+});
+
+// 树状图
+let y = reactive([150, 230, 224, 218, 135, 147, 260]);
+let x = reactive(["2023-10", "2023-12", "2024-2", "2024-4", "2024-6", "2024-8", "2024-10"]);
+
+const getlrigContainercoss = () => {
+	const chartContainer = echarts.init(document.getElementById("torgContainercoss"));
+	const option = {
+		// 提示框
+		tooltip: {
+			//触发类型
+			trigger: "axis",
+			// 提示框的背景颜色
+			backgroundColor: "rgba(173, 198, 255, 0.50)",
+			// 提示框边框厚度
+			borderWidth: 0,
+			// 提示款边框颜色
+			borderColor: "#ccc",
+			// 提示框字体颜色
+			textStyle: {
+				color: "#fff"
+			},
+			// 选中数据时x-y轴样式
+			axisPointer: {
+				type: "cross",
+				// 小方块
+				label: {
+					// 小方块背景颜色
+					backgroundColor: "#6a7985"
+					// backgroundColor: '#e10602'
+					// 小方块字体颜色
+					// color: '#e10602'
+				}
+			}
+		},
+		toolbox: {
+			// feature: {
+			// 	dataView: { show: true, readOnly: false },
+			// 	magicType: { show: true, type: ["line", "bar"] },
+			// 	restore: { show: true },
+			// 	saveAsImage: { show: true }
+			// }
+		},
+		grid: {
+			left: "3%",
+			right: "4%",
+			bottom: "3%",
+			containLabel: true
+		},
+		legend: {
+			// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+			//字体样式
+			textStyle: {
+				color: "#fff",
+				fontSize: 14,
+				padding: [0, 0, 0, 10] // 调整文字与色块之间的距离，这里设置为10像素
+			},
+			//图标形状
+			icon: "roundRect",
+			orient: "horizontal",
+			itemWidth: 22,
+			itemHeight: 10,
+			top: 0
+			// data: ["超速车辆"]
+		},
+		xAxis: {
+			type: "category",
+			data: x,
+			boundaryGap: false,
+			axisTick: {
+				show: false
+				// length:7
+			},
+			axisLine: {
+				lineStyle: {
+					color: "rgba(32, 121, 160, 0.3)"
+				}
+			},
+			axisLabel: {
+				color: "#fff",
+				margin: 10
+			},
+			nameTextStyle: {
+				color: "#7AADFF ",
+				fontSize: 8
+			},
+			splitLine: {
+				lineStyle: {
+					color: "rgba(255,255,255,0.08)"
+				}
+			}
+		},
+		yAxis: [
+			{
+				type: "value",
+				splitNumber: 5,
+				axisLine: {
+					show: false,
+					lineStyle: {
+						color: "rgba(32, 121, 160, 0.3)"
+					}
+				},
+				axisTick: {
+					show: false
+				},
+				axisLabel: {
+					color: "#fff",
+					margin: 10
+				},
+				splitLine: {
+					lineStyle: {
+						color: "rgba(32, 121, 160, 0.3)"
+					}
+				},
+				splitArea: {
+					areaStyle: {
+						color: "rgba(2, 29, 159, 0.7)"
+					}
+				},
+				name: "tCO2", // 添加单位名称
+				nameLocation: "end", // 将单位名称放在y轴的最上面
+				nameTextStyle: {
+					color: "#fff", // 设置单位名称的颜色
+					fontSize: 14 // 设置单位名称的字体大小
+				}
+			}
+		],
+		series: [
+			{
+				name: "施工区",
+				stack: "total", // 设置堆叠组名
+				type: "bar",
+				tooltip: {
+					valueFormatter: function (value) {
+						return (value as number) + "tCO2";
+					}
+				},
+				itemStyle: {
+					color: {
+						type: "linear",
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [
+							{ offset: 0, color: "#74d5e7" }, // 渐变开始颜色
+							{ offset: 0.5, color: "#74d5e7" }, // 渐变中间颜色
+							{ offset: 1, color: "#74d5e7" } // 渐变结束颜色
+						]
+					}
+					// barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
+				},
+				barWidth: "22%", // 设置柱子宽度为50%
+
+				data: [40, 30, 28, 40, 65, 0, 0]
+			},
+			{
+				name: "办公区",
+				stack: "total", // 设置堆叠组名
+				type: "bar",
+				tooltip: {
+					valueFormatter: function (value) {
+						return (value as number) + "tCO2";
+					}
+				},
+				itemStyle: {
+					color: {
+						type: "linear",
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [
+							{ offset: 0, color: "#ffa52e" }, // 渐变开始颜色
+							{ offset: 0.5, color: "#ffa52e" }, // 渐变中间颜色
+							{ offset: 1, color: "#ffa52e" } // 渐变结束颜色
+						]
+					}
+					// barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
+				},
+				barWidth: "22%", // 设置柱子宽度为50%
+
+				data: [40, 48, 52, 28, 25, 0, 0]
+			},
+			{
+				name: "展馆区",
+				stack: "total", // 设置堆叠组名
+				type: "bar",
+				tooltip: {
+					valueFormatter: function (value) {
+						return (value as number) + "tCO2";
+					}
+				},
+				itemStyle: {
+					color: {
+						type: "linear",
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [
+							{ offset: 0, color: "#81f279" }, // 渐变开始颜色
+							{ offset: 0.5, color: "#81f279" }, // 渐变中间颜色
+							{ offset: 1, color: "#81f279" } // 渐变结束颜色
+						]
+					},
+					barBorderRadius: [5, 5, 0, 0] // 设置柱体圆角，左上和右上为10px
+				},
+				barWidth: "22%", // 设置柱子宽度为50%
+
+				data: [20, 15, 25, 40, 22, 0, 0]
+			},
+			{
+				name: "实测值",
+				type: "line",
+				yAxisIndex: 0,
+				itemStyle: {
+					color: "#d38c30" // 设置线条颜色为蓝色
+				},
+				symbol: "image://http://jxj.zhgdyun.com:15551/image/6721ed8901fdb41366cc19c8.png", // 设置节点为图片
+				symbolSize: 30, // 设置图片大小
+				data: [50, 40, 20, 30, 45, 0, 0]
+			},
+			{
+				name: "预测值",
+				type: "line",
+				yAxisIndex: 0,
+				itemStyle: {
+					color: "#7ec4d5" // 设置线条颜色为红色
+				},
+				lineStyle: {
+					type: "dashed" // 设置线条为虚线
+				},
+				symbol: "image://http://jxj.zhgdyun.com:15551/image/6721eaf401fdb41366cc19c7.png", // 设置节点为图片
+				symbolSize: 30, // 设置图片大小
+				// 把点去掉
+				data: [35, 50, 75, 40, 30, 0, 0]
+			}
+		]
+	};
+	chartContainer.setOption(option);
+};
+</script>
+
+<style lang="scss" scoped>
+.topright-box {
+	width: 96%;
+	height: 94%;
+	// background: red;
+	display: flex;
+	flex-direction: column;
+	padding: 12px;
+
+	.tr-top {
+		width: 100%;
+		height: 200px;
+		margin-bottom: 10px;
+		// background: skyblue;
+	}
+
+	.tr-bottom {
+		width: 100%;
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: space-evenly;
+
+		.trbot-item {
+			width: 140px;
+			height: 140px;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+
+			background: url("@/assets/images/construction/Group 4709.png") no-repeat;
+			background-size: 100% 100%;
+
+			p {
+				margin: 0;
+				padding: 0;
+
+				&:nth-child(1),
+				&:nth-child(3) {
+					font-family: Source Han Sans CN, Source Han Sans CN;
+					font-weight: 400;
+					font-size: 12px;
+					color: #a0b8e5;
+				}
+				&:nth-child(2) {
+					font-family: D-DIN-DIN, D-DIN-DIN;
+					font-weight: bold;
+					font-size: 14px;
+					line-height: 16px;
+					text-stroke: 0px #ffffff;
+					color: #ffffff;
+					margin: 4px 0;
+				}
+			}
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/constructionview/index.vue b/src/views/sevenLargeScreen/constructionview/index.vue
new file mode 100644
index 00000000..a180b154
--- /dev/null
+++ b/src/views/sevenLargeScreen/constructionview/index.vue
@@ -0,0 +1,123 @@
+<template>
+	<div class="safe-education">
+		<div class="top">
+			<div class="topLeft itembox">
+				<div class="title-speed">建材生产与运输阶段碳排放</div>
+				<div class="title-con">
+					<TopLeft />
+				</div>
+			</div>
+			<div class="topCenter itembox">
+				<div class="title-speed">低碳技术应用碳减量</div>
+				<div class="title-con">
+					<TopCenter />
+				</div>
+			</div>
+			<div class="topRight itembox">
+				<div class="title-speed">施工阶段碳排放</div>
+				<div class="title-con">
+					<TopRight />
+				</div>
+			</div>
+		</div>
+		<div class="bottom">
+			<div class="bottomLeft itembox">
+				<div class="title-speed">原始数据动态监测</div>
+				<div class="title-con">
+					<BottomLeft />
+				</div>
+			</div>
+			<div class="bottomRight itembox">
+				<div class="title-speed">项目总体碳排放</div>
+				<div class="title-con">
+					<BottomRight />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import TopLeft from "./components/TopLeft.vue";
+import TopCenter from "./components/TopCenter.vue";
+import TopRight from "./components/TopRight.vue";
+import BottomLeft from "./components/BottomLeft.vue";
+import BottomRight from "./components/BottomRight.vue";
+</script>
+
+<style lang="scss" scoped>
+.safe-education {
+	width: 100%;
+	height: 100%;
+
+	.itembox {
+		display: flex;
+		flex-direction: column;
+
+		.title-speed {
+			height: 40px;
+			line-height: 40px;
+			padding-left: 35px;
+			background: url("@/assets/images/titleBig.webp") no-repeat;
+			background-size: 100% 100%;
+			// margin-left: 50px;
+			font-family: OPPOSansH;
+			font-weight: 400;
+			color: #ffffff;
+			margin-bottom: 5px;
+			font-size: 16px;
+		}
+
+		.title-con {
+			width: 100%;
+			flex: 1;
+			background: url("@/assets/images/cardImg.png") no-repeat;
+			background-size: 100% 100%;
+			// background: skyblue;
+		}
+	}
+
+	.top {
+		width: 100%;
+		height: 52%;
+		display: flex;
+		.topLeft {
+			width: 33.5%;
+			// background: skyblue;
+			// background-color: orchid;
+		}
+		.topCenter {
+			margin: 0% 1%;
+			width: 33%;
+		}
+		.topRight {
+			width: 33%;
+		}
+	}
+	.bottom {
+		width: 100%;
+		height: 46%;
+		margin-top: 1%;
+		margin-bottom: 1%;
+		display: flex;
+		.bottomLeft {
+			width: 49%;
+			margin-right: 1%;
+			:deep(.h-card) {
+				.content {
+					margin-top: 2% !important;
+				}
+			}
+		}
+		.bottomRight {
+			width: 50%;
+			:deep(.h-card) {
+				.content {
+					margin-top: 1% !important;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/indexL.vue b/src/views/sevenLargeScreen/indexL.vue
index d1876864..60e094a8 100644
--- a/src/views/sevenLargeScreen/indexL.vue
+++ b/src/views/sevenLargeScreen/indexL.vue
@@ -279,6 +279,10 @@ let menuList = ref([
 				menuName: "智慧党建",
 				companyPath: "/smartPartyBuilding"
 			},
+			{
+				menuName: "双碳管理",
+				companyPath: "/projectioter"
+			},
 			// {
 			// 	menuName: "工程概况-1",
 			// 	companyPath: "/projectOverviewer"