diff --git a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomLeft.vue b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomLeft.vue
index eab60fcd..4a798ee3 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomLeft.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomLeft.vue
@@ -1,7 +1,7 @@
 <template>
 	<Card title="员工关怀">
 		<div class="bottom-left">
-			<!-- <div class="list-content">
+			<div class="list-content">
 				<div class="list-detail" v-for="item in list" :key="item.id">
 					<div class="detail-pic">
 						<img src="@/assets/images/smartPartyBuilding/testPic.png" alt="" />
@@ -11,7 +11,7 @@
 						<div class="time">{{ item.grossTime }}</div>
 					</div>
 				</div>
-			</div> -->
+			</div>
 		</div>
 	</Card>
 </template>
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomRight.vue b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomRight.vue
index a50e2561..5b1decc8 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomRight.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomRight.vue
@@ -1,7 +1,7 @@
 <template>
 	<Card title="学习讲话">
 		<div class="bottom-left">
-			<!-- <div class="list-content">
+			<div class="list-content">
 				<div class="list-detail" v-for="item in list" :key="item.id">
 					<div class="detail-pic">
 						<img src="@/assets/images/smartPartyBuilding/testPic.png" alt="" />
@@ -11,7 +11,7 @@
 						<div class="time">{{ item.grossTime }}</div>
 					</div>
 				</div>
-			</div> -->
+			</div>
 		</div>
 	</Card>
 </template>
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftCenter.vue b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftCenter.vue
index 7b1088fb..9b08699e 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftCenter.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftCenter.vue
@@ -1,11 +1,386 @@
 <template>
 	<Card title="政治面貌">
-		<div class="bottom-center">111</div>
+		<div class="leftBottomBox">
+			<div id="politicalOutlook" style="width: 100%; height: 100%"></div>
+		</div>
 	</Card>
 </template>
+
 <script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import * as echarts from "echarts";
 import Card from "@/components/card.vue";
-import symbolIcon from "@/assets/images/lineSymbol.png";
-import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+const airType = ref(1);
+let rangeTime = ref("" as any);
+let dataList = ref([
+	{
+		value: 37,
+		show: true,
+		name: "中共党员",
+
+		itemStyle: {
+			normal: {
+				color: "#82FBEA",
+				borderWidth: 20
+			}
+		}
+	},
+	{
+		value: 74,
+		show: true,
+		name: "中共预备党员",
+		itemStyle: {
+			normal: {
+				color: "#EEC459",
+				borderWidth: 20
+			}
+		}
+	},
+	{
+		value: 73,
+		show: true,
+		name: "共青团员",
+		itemStyle: {
+			normal: {
+				color: "#65D7F9"
+			}
+		}
+	}
+]);
+function Pie() {
+	let dataArr = [];
+	for (var i = 0; i < 150; i++) {
+		if (i % 2 === 0) {
+			dataArr.push({
+				name: (i + 1).toString(),
+				value: 10,
+				itemStyle: {
+					normal: {
+						color: "#7cf4f1",
+						borderWidth: 0,
+						borderColor: "#7f6546"
+					}
+				}
+			});
+		} else {
+			dataArr.push({
+				name: (i + 1).toString(),
+				value: 10,
+				itemStyle: {
+					normal: {
+						color: "rgba(0,0,0,0)",
+						borderWidth: 0,
+						borderColor: "rgba(0,0,0,0)"
+					}
+				}
+			});
+		}
+	}
+	return dataArr;
+}
+
+onMounted(() => {
+	drawEchart();
+});
+
+function drawEchart() {
+	let max = 0;
+	dataList.value.map(item => {
+		max = max + item.value;
+	});
+	let echartsTest = echarts.init(document.getElementById("politicalOutlook"));
+	let option = {
+		tooltip: {
+			trigger: "item"
+		},
+		title: {
+			text: max,
+			subtext: "总数",
+			x: "23%",
+			y: "41%",
+			textAlign: "center",
+			textStyle: {
+				color: "#fff",
+				fontSize: 22,
+				fontWeight: "normal",
+				textAlign: "left",
+				fontFamily: "sadigitalNumber"
+			},
+			subtextStyle: {
+				color: "#ccc",
+				fontSize: 14,
+				lineHeight: 30
+			}
+		},
+		legend: {
+			selectedMode: false, // 取消图例上的点击事件
+			icon: "rect",
+			type: "plain",
+			orient: "vertical",
+			left: "50%",
+			top: "30%",
+			align: "left",
+			itemGap: 30,
+			itemWidth: 8, // 设置宽度
+			itemHeight: 7, // 设置高度
+			symbolKeepAspect: false,
+			textStyle: {
+				color: "#000",
+				rich: {
+					name: {
+						verticalAlign: "right",
+						align: "left",
+						width: 120,
+						fontSize: 14,
+						color: "#FFFFFF"
+					},
+					value: {
+						align: "left",
+						width: 50,
+						fontSize: 14,
+						color: "#FFFFFF"
+					}
+				}
+			},
+			data: dataList.value.map(item => {
+				if (item.show) {
+					return item.name;
+				}
+			}),
+			formatter: function (data) {
+				if (dataList.value && dataList.value.length) {
+					for (let i = 0; i < dataList.value.length; i++) {
+						if (data === dataList.value[i].name) {
+							let value = dataList.value[i].value;
+							let percentage = value + "%";
+							return "{name| " + data + "}" + "{value| " + value + "}" + "{value| " + percentage + "}";
+						}
+					}
+				}
+			}
+		},
+		series: [
+			// 外侧光线
+			{
+				name: "",
+				type: "gauge",
+				center: ["25%", "55%"],
+				radius: "80%",
+				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: "#52bef0"
+									},
+									{
+										offset: 1,
+										color: "rgba(54, 128, 174,0.4)"
+									}
+								])
+							],
+							[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%", "55%"],
+				radius: "71%",
+				startAngle: 245,
+				endAngle: -115,
+				min: 0,
+				max: 100,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 2,
+						color: [
+							[
+								200 / 100,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 0.8,
+										color: "#52bef0"
+									},
+									{
+										offset: 0.5,
+										color: "#13356b"
+									}
+								])
+							],
+							[1, "rgba(255,255,255,0)"]
+						]
+					}
+				},
+
+				axisTick: {
+					show: 0
+				},
+				splitLine: {
+					show: 0
+				},
+				axisLabel: {
+					show: 0
+				},
+				pointer: {
+					show: 0
+				},
+				detail: {
+					show: 0
+				}
+			},
+			{
+				name: "",
+				type: "pie",
+				radius: ["60", "65"],
+				center: ["25%", "55%"],
+				hoverAnimation: true,
+				itemStyle: {
+					borderRadius: 10,
+					borderWidth: 10
+				},
+				label: {
+					show: false,
+					position: "center"
+				},
+				emphasis: {
+					label: {
+						show: false
+					}
+				},
+				labelLine: {
+					show: false
+				},
+				data: dataList.value
+			},
+			{
+				type: "pie",
+				radius: ["53", "55"],
+				center: ["25%", "55%"],
+				label: {
+					show: false
+				},
+
+				data: Pie()
+			}
+		]
+	};
+	echartsTest.setOption(option, true);
+}
 </script>
-<style lang="scss" scoped></style>
+
+<style lang="scss" scoped>
+.leftBottomBox {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+.num {
+	width: 66px;
+	text-align: center;
+	font-family: sadigitalNumber;
+	font-size: calc(100vw * 24 / 1920);
+	color: #fff;
+	position: absolute;
+	top: 45%;
+	left: 18%;
+	z-index: 9;
+}
+// .styleImg {
+// 	left: 6%;
+// 	top: 17%;
+// 	width: 40%;
+// 	position: absolute;
+// 	height: 60%;
+// 	background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
+// 	background-size: cover;
+// }
+.rightHeader {
+	width: 65%;
+	display: flex;
+	position: absolute;
+	z-index: 99;
+	color: #fff;
+	font-size: 10px;
+	text-align: center;
+	line-height: 2.5vh;
+	left: 34%;
+	top: 23%;
+	.Selected {
+		height: 5%;
+		background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
+		background-size: 100% 100%;
+		cursor: pointer;
+	}
+	.day {
+		height: 5%;
+		width: 15%;
+		margin-right: 5%;
+		z-index: 99;
+		margin-top: -17%;
+		cursor: pointer;
+	}
+	.year {
+		height: 5%;
+		width: 15%;
+		margin-right: 8%;
+		z-index: 99;
+		margin-top: -17%;
+		cursor: pointer;
+	}
+	.active {
+		height: 5%;
+		background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
+		background-size: 100% 100%;
+	}
+}
+.time {
+	position: absolute;
+	z-index: 999;
+	left: 37%;
+	margin-top: -18%;
+}
+::v-deep .el-input__wrapper {
+	width: 85%;
+	height: 0%;
+	background: #0d2956;
+}
+::v-deep .el-range-separator {
+	color: #ccc;
+	font-size: 10px;
+}
+::v-deep .el-range-input {
+	color: #ccc;
+	font-size: 10px;
+}
+</style>
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftTop.vue b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftTop.vue
index 309e967f..7f9e34f0 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftTop.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftTop.vue
@@ -1,11 +1,284 @@
 <template>
 	<Card title="学习强国">
-		<div class="bottom-center">111</div>
+		<div class="box">
+			<div id="learnStrongCountry" ref="learnStrongCountry" 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";
-import symbolIcon from "@/assets/images/lineSymbol.png";
-import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+import firstIcon from "@/assets/images/loadometerManage/first.png";
+import secondIcon from "@/assets/images/loadometerManage/second.png";
+import thirdIcon from "@/assets/images/loadometerManage/third.png";
+import fourthIcon from "@/assets/images/loadometerManage/fourth.png";
+
+const store = GlobalStore();
+const airType = ref(1);
+// 选中
+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();
+}
+const airTypeEchart = ref(["李涵", "陈光铭", "李强", "马小星"]);
+const airTypeData = ref([18249, 17688, 16119, 13161]);
+const option = reactive({
+	grid: {
+		left: "0%",
+		right: "0%",
+		bottom: "0%",
+		top: "5%",
+		containLabel: true
+	},
+	// backgroundColor: '#101129',
+	xAxis: {
+		show: false,
+		type: "value",
+		max: 20000
+	},
+	yAxis: [
+		{
+			type: "category",
+			inverse: true,
+			axisLabel: {
+				show: true,
+				inside: true,
+				verticalAlign: "bottom",
+				padding: [0, 0, 8, 30],
+				lineHeight: "20",
+				textStyle: {
+					color: "#FFFFFF",
+					fontSize: "14"
+				}
+			},
+			splitLine: {
+				show: false
+			},
+			axisTick: {
+				show: false
+			},
+			axisLine: {
+				show: false
+			},
+			data: airTypeEchart.value
+		},
+		{
+			inverse: true,
+			axisTick: "none",
+			axisLine: "none",
+			axisLabel: {
+				inside: true,
+				padding: [0, 0, 26, 40],
+				lineHeight: "20",
+				textStyle: {
+					color: "#FFFFFF",
+					fontSize: "12"
+				},
+				formatter: function (val: any, index: any) {
+					if (index < 3) {
+						return `{color1|${val}}`;
+					} else {
+						return `{color2|${val}}`;
+					}
+				},
+				rich: {
+					color1: {
+						color: "#EEA959"
+					},
+					color2: {
+						color: "#A0B8E5"
+					}
+				}
+			},
+			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
+			},
+			barGap: "-100%",
+			label: {
+				normal: {
+					color: "#FFFFFF",
+					show: true,
+					position: [0, "-24px"],
+					textStyle: {
+						fontSize: 16
+					},
+					formatter: function (a) {
+						let num = "";
+						let str = "";
+						if (a.dataIndex + 1 < 10) {
+							// num = "No." + (a.dataIndex + 1);
+						} else {
+							// num = a.dataIndex + 1;
+						}
+						if (a.dataIndex === 0) {
+							str = `{color1|${num}}`;
+						} else if (a.dataIndex === 1) {
+							str = `{color2|${num}}`;
+						} else if (a.dataIndex === 2) {
+							str = `{color3|${num}}`;
+						} else {
+							str = `{color4|${a.dataIndex + 1}}`;
+						}
+						return str;
+					},
+					rich: {
+						color1: {
+							width: 30,
+							height: 20,
+							backgroundColor: {
+								image: firstIcon
+							}
+						},
+						color2: {
+							width: 30,
+							height: 20,
+							backgroundColor: {
+								image: secondIcon
+							}
+						},
+						color3: {
+							width: 30,
+							height: 20,
+							backgroundColor: {
+								image: thirdIcon
+							}
+						},
+						color4: {
+							align: "center",
+							color: "#FFFFFF",
+							backgroundColor: {
+								image: fourthIcon
+							}
+						}
+					}
+				}
+			},
+			itemStyle: {
+				normal: {
+					barBorderRadius: 10,
+					color: (val: any) => {
+						if (val.dataIndex < 3) {
+							let topColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+								{
+									offset: 0,
+									color: "rgba(238, 169, 89, 0)"
+								},
+								{
+									offset: 1,
+									color: "rgba(238, 169, 89, 1)"
+								}
+							]);
+							return topColor;
+						} else {
+							let nowColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+								{
+									offset: 0,
+									color: "#194077"
+								},
+								{
+									offset: 1,
+									color: "#4CC4F8"
+								}
+							]);
+							return nowColor;
+						}
+					}
+				}
+			},
+			barWidth: 2,
+			data: airTypeData.value
+		},
+		{
+			name: "内圆",
+			type: "scatter",
+			stack: "圆",
+			yAxisIndex: 0,
+			data: airTypeData.value, //小白点，数据静态
+			label: false,
+			symbolSize: 2,
+			itemStyle: {
+				normal: {
+					borderColor: "#fff",
+					borderWidth: 3,
+					color: "#fff",
+					opacity: 1
+				}
+			},
+			z: 3
+		},
+		{
+			name: "内圆框",
+			type: "scatter",
+			stack: "圆",
+			yAxisIndex: 0,
+			data: [0, 0, 0, 0, 0, 0, 0, 0, 0], //小白点外圈，数据静态
+			label: false,
+			symbolSize: 12,
+			itemStyle: {
+				normal: {
+					borderColor: "#FFFFFF",
+					borderWidth: 1,
+					color: "#14346c"
+				}
+			},
+			z: 2
+		}
+	]
+});
+function drawChart() {
+	let chartDom = document.getElementById("learnStrongCountry");
+	if (chartDom) {
+		chartDom.removeAttribute("_echarts_instance_");
+	}
+	let learnStrongCountry = echarts.init(document.getElementById("learnStrongCountry"));
+	learnStrongCountry.setOption(option);
+	// window.onresize = function () {
+	//   myEchart.resize();
+	// }
+}
+onMounted(async () => {
+	drawChart();
+});
 </script>
-<style lang="scss" scoped></style>
+
+<style lang="scss" scoped>
+.box {
+	width: 100%;
+	height: 100%;
+	padding-top: 2%;
+	padding-left: 3%;
+	position: relative;
+}
+</style>
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/rightTop.vue b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/rightTop.vue
index a87f7927..9f7c3c8d 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/rightTop.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/rightTop.vue
@@ -1,7 +1,7 @@
 <template>
 	<Card title="党建新闻">
 		<div class="bottom-left">
-			<!-- <div class="list-content">
+			<div class="list-content">
 				<div class="list-detail" v-for="item in list" :key="item.id">
 					<div class="detail-pic">
 						<img src="@/assets/images/smartPartyBuilding/testPic.png" alt="" />
@@ -11,7 +11,7 @@
 						<div class="time">{{ item.grossTime }}</div>
 					</div>
 				</div>
-			</div> -->
+			</div>
 		</div>
 	</Card>
 </template>
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/topCenter.vue b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/topCenter.vue
index 4d2fbe5e..1478ed21 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/topCenter.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/topCenter.vue
@@ -1,16 +1,70 @@
 <template>
-	<Card title="宣传视频">
-		<div class="top-center">111</div>
-	</Card>
+	<div class="leftTop">
+		<Card title="宣传视频">
+			<div class="videoBox">
+				<video src="" class="videos" autoplay controls loop></video>
+			</div>
+		</Card>
+		<div class="select-right">
+			<el-select v-model="devValue" class="m-2" placeholder="请选择" size="small" @change="selectChange">
+				<el-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
+			</el-select>
+		</div>
+	</div>
 </template>
-<script lang="ts" setup>
+
+<script setup lang="ts">
 import Card from "@/components/card.vue";
-import symbolIcon from "@/assets/images/lineSymbol.png";
 import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+import mitts from "@/utils/bus"; //兄弟组件传值
+import { GlobalStore } from "@/stores";
+let devValue = ref(1 as any);
+let noiseList = ref([
+	{
+		value: 1,
+		label: "党建视频"
+	},
+	{
+		value: 10051,
+		label: "党建新闻"
+	}
+]);
+function selectChange(e: any) {
+	console.log(e, "选择");
+}
 </script>
+
 <style lang="scss" scoped>
-.top-center {
+.leftTop {
 	width: 100%;
 	height: 100%;
+	position: relative;
+	.videoBox {
+		width: 100%;
+		height: 100%;
+		.videos {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.select-right {
+		position: absolute;
+		right: 3%;
+		width: 13%;
+		top: 2%;
+		z-index: 9;
+	}
+}
+:deep(.h-card .content) {
+	background: none;
+}
+:deep(.el-input__wrapper) {
+	background: #112d59;
+}
+:deep(.el-input__inner) {
+	color: #fff;
+}
+:deep(.el-select .el-input .el-select__caret) {
+	color: #fff;
 }
 </style>
diff --git a/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/index.vue b/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/index.vue
index d5f8fc2d..47ab4b51 100644
--- a/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/index.vue
+++ b/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/index.vue
@@ -10,7 +10,7 @@
 			<div class="topRight">
 				<TopRight></TopRight>
 			</div>
-		</div> 
+		</div>
 		<div class="bottom">
 			<div class="bottomLeft">
 				<BottomLeft></BottomLeft>
diff --git a/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/topLeft.vue b/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/topLeft.vue
index ff5e81e4..49353c18 100644
--- a/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/topLeft.vue
+++ b/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/topLeft.vue
@@ -1,13 +1,6 @@
 <template>
 	<Card title="供应商排名">
 		<div class="box">
-			<!-- <div class="selectRight">
-				<div class="rightHeader">
-					<div class="day Selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">24时</div>
-					<div class="week Selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">7日</div>
-					<div class="month Selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">30日</div>
-				</div>
-			</div> -->
 			<div id="supplierRank" ref="supplierRank" style="width: 100%; height: 100%"></div>
 		</div>
 	</Card>