diff --git a/src/api/modules/agjtLiveApi.ts b/src/api/modules/agjtLiveApi.ts
index 571b686f..42c77c81 100644
--- a/src/api/modules/agjtLiveApi.ts
+++ b/src/api/modules/agjtLiveApi.ts
@@ -41,7 +41,8 @@ export const configWeekVideoListApi = (params: {}, noLoading: boolean) => {
 
 //获取劳务实名制信息API---上
 export const selectPersonTypeAndEduStatisticsApi = (params: {}, noLoading: boolean) => {
-	return http.post(BASEURL + `/xmgl/workerInfo/selectPersonTypeAndEduStatistics`, params, { headers: { noLoading: noLoading } });
+	// return http.post(BASEURL + `/xmgl/workerInfo/selectPersonTypeAndEduStatistics`, params, { headers: { noLoading: noLoading } });
+	return http.post(BASEURL + `/xmgl/workerAttendance/selectEnterpriseAttendanceCount`, params, { headers: { noLoading: noLoading } });
 };
 
 //获取劳务实名制信息API---下
@@ -59,6 +60,11 @@ export const securityPageApi = (params: {}, noLoading: boolean) => {
 	return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/page`, params, { headers: { noLoading: noLoading } });
 };
 
+// 获取安全评分数据API
+export const getStatScoreApi = (params: {}, showLoading: boolean) => {
+	return http.get(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/getStatScore`, params, { headers: { noLoading: showLoading } });
+};
+
 //获取应急记录信息API
 export const emergencyPageApi = (params: {}, noLoading: boolean) => {
 	// return http.get(BASEURL + `/xmgl/xzEmergencyRecord/page`, params, { headers: { noLoading: noLoading } });
diff --git a/src/assets/images/agjtLive/top-bg.png b/src/assets/images/agjtLive/top-bg.png
new file mode 100644
index 00000000..95b18d37
Binary files /dev/null and b/src/assets/images/agjtLive/top-bg.png differ
diff --git a/src/views/agjtLiveScreen/liveScreen/centerBottomLeft.vue b/src/views/agjtLiveScreen/liveScreen/centerBottomLeft.vue
index a592c8fa..d5addf11 100644
--- a/src/views/agjtLiveScreen/liveScreen/centerBottomLeft.vue
+++ b/src/views/agjtLiveScreen/liveScreen/centerBottomLeft.vue
@@ -5,14 +5,14 @@
 				<div class="topBox">
 					<div class="topInner1">
 						<div class="innerText">
-							<div>今日出勤总人数</div>
-							<div>{{lwInfo2.presencePersonTotal || 0}}</div>
+							<div>今日出勤人数</div>
+							<div>{{lwInfo2.attendancePersonTotal || 0}}</div>
 						</div>
 					</div>
 					<div class="topInner2">
 						<div class="innerText">
-							<div>在册人数</div>
-							<div>{{lwInfo2.totalPerson || 0}}</div>
+							<div style="transform:translateX(20px)">实时在场人数</div>
+							<div>{{lwInfo2.presencePersonTotal || 0}}</div>
 						</div>
 					</div>
 				</div>
@@ -25,7 +25,8 @@
 										<div style="width:50px;text-align:center">{{i + 1}}</div>
 										<div>{{item.name}}</div>
 									</div>
-									<div class="itemInfo2">{{item.attendancePersonTotal}}/{{item.totalPerson}}</div>
+									<!-- <div class="itemInfo2">{{item.attendancePersonTotal}}/{{item.totalPerson}}</div> -->
+									<div class="itemInfo2">{{item.attendancePersonTotal}}/{{item.presencePersonTotal}}</div>
 								</div>
 							</el-scrollbar>
 						</div>
@@ -46,7 +47,7 @@
 											<div style="width:50px;text-align:center">{{i + 1}}</div>
 											<div>{{item.name}}</div>
 										</div>
-										<div class="itemInfo2">{{item.attendancePersonTotal}}/{{item.totalPerson}}</div>
+										<div class="itemInfo2">{{item.attendancePersonTotal}}/{{item.presencePersonTotal}}</div>
 									</div>
 							</div>
 						</vue3-seamless-scroll>
@@ -93,21 +94,20 @@ const BASEURL = import.meta.env.VITE_API_URL
 const lwInfo1 = ref({} as any)
 const lwInfo2 = ref({} as any)
 async function getLwInfo() {
-		// let data = {
-		// 	projectSn: store.sn,
-		// }
 		// selectPersonTypeAndEduStatisticsApi({
-		// 	projectSn: data.projectSn,
+		// 	projectSn: store.sn,
 		// },true).then(res1 => {
 		// 	if(res1.success){
 		// 		if(res1.result){
-		// 			lwInfo1.value = res1.result.personType
+		// 			lwInfo1.value = res1.result
+		// 			// console.log(lwInfo1.value)
 		// 		}
 		// 	}
 		// })
 		selectWorkerTeamAndDepartmentStatisticsApi({
 			projectSn: store.sn,
 		},true).then(res2 => {
+			console.log(res2)
 			if(res2.success){
 				if(res2.result){
 					lwInfo2.value = res2.result
diff --git a/src/views/agjtLiveScreen/liveScreen/centerTop.vue b/src/views/agjtLiveScreen/liveScreen/centerTop.vue
index 925b9bcc..32ce2602 100644
--- a/src/views/agjtLiveScreen/liveScreen/centerTop.vue
+++ b/src/views/agjtLiveScreen/liveScreen/centerTop.vue
@@ -18,7 +18,7 @@
 				</el-carousel>
 			</div> -->
 			<div class="videoBox" v-if="showVideo == 2" @mouseenter="showChangeVideo = true" @mouseleave="showChangeVideo = false">
-				<video :src="BASEURL + '/image/' + projectData.videoUrl" class="videos" autoplay controls loop></video>
+				<video id="myVideo" :src="BASEURL + '/image/' + projectData.videoUrl" class="videos" autoplay controls loop></video>
 			</div>
 		</Card>
 		<setVideoDialog ref="partyBuildRef" @updateConfig="updateConfig"></setVideoDialog>
@@ -99,6 +99,10 @@ const configWeekVideoListFn = async () => {
 		if(res.result.length != 0 && today == 6) projectData.value.videoUrl = res.result[0].sat
 	}
 };
+function playVideo(){
+	let video: any = document.getElementById("myVideo");
+  video.play();
+}
 // const getVideoList = async () => {
 // 	let res: any = await selectLiveVideoListApi({
 // 		projectSn: store.sn
@@ -132,7 +136,8 @@ defineExpose({
 onMounted(async () => {
 	// if (COMPANY !== "agjt") showVideo.value = 2;
 	// await getVideoList();
-	await configWeekVideoListFn(true); 
+	await configWeekVideoListFn(); 
+	// playVideo()
 });
 </script>
 
diff --git a/src/views/agjtLiveScreen/liveScreen/index.vue b/src/views/agjtLiveScreen/liveScreen/index.vue
index 6a3e3e8d..e21a5b52 100644
--- a/src/views/agjtLiveScreen/liveScreen/index.vue
+++ b/src/views/agjtLiveScreen/liveScreen/index.vue
@@ -19,6 +19,7 @@
 		</div>
 		<div class="right">
 			<rightTop class="rightTop" ref="rightTopRef"></rightTop>
+			<rightCenter class="rightCenter" ref="rightCenterRef"></rightCenter>
 			<rightBottom class="rightBottom" ref="rightBottomRef"></rightBottom>
 		</div>
 	</div>
@@ -32,6 +33,7 @@ import centerTop from "@/views/agjtLiveScreen/liveScreen/centerTop.vue";
 import centerBottomLeft from "@/views/agjtLiveScreen/liveScreen/centerBottomLeft.vue";
 import centerBottomRight from "@/views/agjtLiveScreen/liveScreen/centerBottomRight.vue";
 import rightTop from "@/views/agjtLiveScreen/liveScreen/rightTop.vue";
+import rightCenter from "@/views/agjtLiveScreen/liveScreen/rightCenter.vue";
 import rightBottom from "@/views/agjtLiveScreen/liveScreen/rightBottom.vue";
 import { GlobalStore } from "@/stores";
 import { getWorkerStatisticsCountApi, getProjectDetail } from "@/api/modules/projectOverview";
@@ -82,6 +84,7 @@ const centerTopRef = ref();
 const centerBottomLeftRef = ref();
 const centerBottomRightRef = ref();
 const rightTopRef = ref();
+const rightCenterRef = ref();
 const rightBottomRef = ref();
 const excuteCount = ref(0)
 const callChildFn = async () => {
@@ -95,6 +98,7 @@ const callChildFn = async () => {
 		centerBottomLeftRef.value.centerBottomLeftMethod()
 		centerBottomRightRef.value.centerBottomRightMethod()
 		rightTopRef.value.rightTopMethod()
+		rightCenterRef.value.rightCenterMethod()
 		rightBottomRef.value.rightBottomMethod()
 	})
 }
@@ -171,8 +175,12 @@ onMounted( async () => {
 		.rightTop {
 			height: 32%;
 		}
+		.rightCenter {
+			height: 33%;
+			margin: 3% 0 3% 0;
+		}
 		.rightBottom {
-			height: 78.636%;
+			height: 35.25%;
 			margin: 3% 0 0 0;
 		}
 	}
diff --git a/src/views/agjtLiveScreen/liveScreen/leftBottom.vue b/src/views/agjtLiveScreen/liveScreen/leftBottom.vue
index f299cbae..829fcd07 100644
--- a/src/views/agjtLiveScreen/liveScreen/leftBottom.vue
+++ b/src/views/agjtLiveScreen/liveScreen/leftBottom.vue
@@ -46,6 +46,7 @@ async function getSpecialInfo() {
 				if (res.result.total) {
 					// innerPie.value[0].value = res.result.total.running
 					// innerPie.value[1].value = res.result.total.complete
+					innerPie.value = []
 					innerPie.value.push({ value: res.result.total.running, name: "进行中" });
 					innerPie.value.push({ value: res.result.total.complete, name: "已完成" });
 				}
@@ -59,6 +60,10 @@ async function getSpecialInfo() {
 						value:item.num
 					})
 				});
+				// 获取你要清除的图表实例
+				let chart = echarts.init(document.getElementById('pieEchart'));
+				// 使用 clear() 方法清除已绘制的图表
+				chart.clear();
 				drawPie();
 			}
 		}
diff --git a/src/views/agjtLiveScreen/liveScreen/rightBottom.vue b/src/views/agjtLiveScreen/liveScreen/rightBottom.vue
index 128ebc8d..3e516257 100644
--- a/src/views/agjtLiveScreen/liveScreen/rightBottom.vue
+++ b/src/views/agjtLiveScreen/liveScreen/rightBottom.vue
@@ -2,7 +2,7 @@
 	<div class="rightBottom">
 		<Card title="安全待办">
 			<div class="mainContainer" v-if="securityData.length">
-				<el-scrollbar style="height:102.5%">
+				<el-scrollbar style="height:107%">
 					<div class="itemBox" v-for="(item,i) in securityData" :key="i">
 						<!-- <div class="itemLine1">{{item.dangerItemContent}}</div>
 						<div class="itemLine2">
@@ -104,7 +104,7 @@ onMounted( async () => {
 			border: 1px solid #0c58a2;
 			color: #fff;
 			padding: 5px 10px;
-			margin-bottom: 10px;
+			margin-bottom: 12px;
   			box-shadow: inset 0 0 8px 2px rgba($color: #0c58a2, $alpha: 1.0); /* 使用box-shadow属性添加发光效果，参数分别代表向内扩散、水平偏移、垂直偏移、模糊半径、阴影尺寸和颜色 */
 			// box-shadow: inset 0 0 5px 2px rgba(255, 255, 255, 0.7); /* 向内发光效果 */
 			.itemLine1{
diff --git a/src/views/agjtLiveScreen/liveScreen/rightCenter.vue b/src/views/agjtLiveScreen/liveScreen/rightCenter.vue
new file mode 100644
index 00000000..061e73f2
--- /dev/null
+++ b/src/views/agjtLiveScreen/liveScreen/rightCenter.vue
@@ -0,0 +1,199 @@
+<template>
+	<div class="rightCenter">
+		<Card title="应急记录">
+			<div class="mainContainer" v-if="emergencyData.length != 0">
+				<el-scrollbar style="height:102.5%">
+					<div class="itemBox" v-for="(item,i) in emergencyData" :key="i">
+						<div class="itemLeft">
+							<div style="font-size:24px;transform:translateY(-3px)">⚠</div>
+							<div style="margin-left:5px">事项</div>
+						</div>
+						<div class="itemRight">
+							<div class="rightCenter">
+								<div class="overHiddenText" style="width:50%">{{item.emergencyTypeName || '--'}}</div>
+								<div class="overHiddenText" style="width:50%;float:right">应急责任人：{{item.emergencyManager || '--'}}</div>
+							</div>
+							<div class="rightCenter">
+								<div style="" class="rcInner1 overHiddenText">报警人：{{item.alarmPersonName || '--'}}</div>
+								<div style="" class="rcInner2 overHiddenText">所属企业：{{item.enterpriseName || '--'}}</div>
+							</div>
+							<div class="rightBottom">
+								<div class="rbInner1">处置状态：{{
+									item.dispositionStatus == 1 ? '待救援' : 
+									item.dispositionStatus == 2 ? '救援中' : 
+									item.dispositionStatus == 3 ? '已救援' : '--'
+								}}</div>
+								<div class="rbInner2" v-if="item.dispositionStatus == 3">处置报告：
+									<span style="cursor:pointer" @click="downloadReport(item.disposalReport)">下载</span>
+								</div>
+								<div class="rbInner3">{{item.updateDate || '--'}}</div>
+							</div>
+						</div>
+					</div>
+				</el-scrollbar>
+			</div>
+			<div class="not-data" v-else>
+				<img src="@/assets/images/noData.png" alt="" />
+				<p>暂无数据</p>
+			</div>
+		</Card>
+	</div>
+</template>
+
+<script setup lang="ts">
+import Card from "@/components/card.vue";
+import { onMounted, ref } from "vue";
+import { GlobalStore } from "@/stores";
+import * as echarts from "echarts";
+import { COMPANY } from "@/config/config";
+//引入现场大屏API
+import { 
+	emergencyPageApi
+ } from "@/api/modules/agjtLiveApi";
+const store = GlobalStore();
+const BASEURL = import.meta.env.VITE_API_URL
+
+//获取应急记录信息
+const emergencyData = ref([] as any)
+async function getEmergencyDataData() {
+	let data = {
+		page: 1,
+		pageSize: 9999,
+		// inDispositionStatus: '',  // 数据类型：字符串，1：待救援、2：救援中、3：已救援
+	}
+	await emergencyPageApi(data,true).then(res => {
+		if(res.success){
+			emergencyData.value = res.result.records
+		}
+	});
+};
+
+function downloadReport(row){
+	const url = row && row != "null" && JSON.parse(row)[0].url;
+        const fileName = row && row != "null" && JSON.parse(row)[0].name;
+        if (!url) {
+            this.$message.warning('暂无下载文件');
+            return
+        }
+        fetch(url)
+            .then(response => response.blob())
+            .then(blob => {
+                const link = document.createElement('a');
+                link.href = URL.createObjectURL(blob);
+                link.download = fileName;
+                link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
+                link.click();
+            });
+}
+
+//测试方法，对接口时改成相应的方法注释
+const rightCenterMethod = async () => {
+	getEmergencyDataData()
+}
+//将方法暴露给父组件
+defineExpose({
+	rightCenterMethod
+})
+
+onMounted(async () => {
+	getEmergencyDataData()
+});
+</script>
+
+<style lang="scss" scoped>
+.rightCenter {
+	width: 100%;
+	height: 100%;
+	.mainContainer{
+		width: calc(100% - 20px);
+		height: calc(100% - 17px);
+		padding: 10px 10px;
+		.itemBox{
+			width: 100%;
+			height: 65px;
+			color: #fff;
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 12px;
+			.itemLeft{
+				width: 15%;
+				height: 100%;
+				border-left: 2px solid #f73758;
+				background-color: rgba($color: darkred, $alpha: 0.4);
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+			}
+			.itemRight{
+				height: calc(100% - 10px);
+				width: calc(83% - 10px);
+				padding: 5px 5px;
+				// background-color: rgba($color: #a85454, $alpha: 0.3);
+				background: repeating-linear-gradient(100deg, rgba(200,10,10,0.1), rgba(200,10,10,0.1) 20px, rgba(0,0,0,0) 20px, rgba(0,0,0,0) 40px), 
+							linear-gradient(to bottom, rgba(200,10,10,0.2), rgba(200,10,10,0.3));
+  				background-size: 100% 100%, 100% 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				.rightTop{
+					height: 30%;
+					width: 100%;
+					display: flex;
+					justify-content: space-between;
+				}
+				.rightCenter{
+					height: 30%;
+					width: 100%;
+					display: flex;
+					justify-content: flex-end;
+					.rcInner1{
+						width: 50%;
+					}
+					.rcInner2{
+						width: 50%;
+					}
+				}
+				.rightBottom{
+					color: #19bfef;
+					height: 30%;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					// transform: translateY(-3px);
+					.rbInner1{}
+					.rbInner2{}
+					.rbInner3{
+						font-style: italic;
+					}
+				}
+			}
+		}
+	}
+}
+.overHiddenText{
+	white-space: nowrap; /* 防止文字换行 */
+	overflow: hidden; /* 超出部分隐藏 */
+	text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
+::v-deep .h-card .content {
+	height: 80%;
+}
+::v-deep .h-card {
+	position: relative;
+}
+.not-data {
+	top: 40%;
+	width: 30%;
+	left: 35%;
+	position: absolute;
+	text-align: center;
+	img {
+		width: 50%;
+	}
+	p {
+		color: #fff;
+		font-size: 14px;
+	}
+}
+</style>
diff --git a/src/views/agjtLiveScreen/liveScreen/rightTop.vue b/src/views/agjtLiveScreen/liveScreen/rightTop.vue
index 34a17317..94c00427 100644
--- a/src/views/agjtLiveScreen/liveScreen/rightTop.vue
+++ b/src/views/agjtLiveScreen/liveScreen/rightTop.vue
@@ -1,40 +1,54 @@
 <template>
 	<div class="rightTop">
-		<Card title="应急记录">
-			<div class="mainContainer" v-if="emergencyData.length != 0">
-				<el-scrollbar style="height:104.5%">
-					<div class="itemBox" v-for="(item,i) in emergencyData" :key="i">
-						<div class="itemLeft">
-							<div style="font-size:24px;transform:translateY(-3px)">⚠</div>
-							<div style="margin-left:5px">事项</div>
-						</div>
-						<div class="itemRight">
-							<div class="rightTop">
-								<div class="overHiddenText" style="width:50%">{{item.emergencyTypeName || '--'}}</div>
-								<div class="overHiddenText" style="width:50%;float:right">应急责任人：{{item.emergencyManager || '--'}}</div>
-							</div>
-							<div class="rightCenter">
-								<div style="" class="rcInner1 overHiddenText">报警人：{{item.alarmPersonName || '--'}}</div>
-								<div style="" class="rcInner2 overHiddenText">所属企业：{{item.enterpriseName || '--'}}</div>
-							</div>
-							<div class="rightBottom">
-								<div class="rbInner1">处置状态：{{
-									item.dispositionStatus == 1 ? '待救援' : 
-									item.dispositionStatus == 2 ? '救援中' : 
-									item.dispositionStatus == 3 ? '已救援' : '--'
-								}}</div>
-								<div class="rbInner2" v-if="item.dispositionStatus == 3">处置报告：
-									<span style="cursor:pointer" @click="downloadReport(item.disposalReport)">下载</span>
-								</div>
-								<div class="rbInner3">{{item.updateDate || '--'}}</div>
-							</div>
-						</div>
+		<Card title="企业安全评分">
+			<div class="mainContainer">
+				
+
+				<div class="content-div aq">
+					<div id="waterAq" style="width: 80%; height: 80%; transform: translateY(45px)"></div>
+					<span style="transform: translateY(33px)">安全隐患治理</span>
+				</div>
+				<div class="content-div wd">
+					<div id="waterWd" style="width: 80%; height: 80%; transform: translateY(45px)"></div>
+					<span style="transform: translateY(33px)">危大工程</span>
+				</div>
+				<div class="content-div jy">
+					<div id="waterJy" style="width: 80%; height: 80%; transform: translateY(45px)"></div>
+					<span style="transform: translateY(33px)">安全教育</span>
+				</div>
+				<div class="content-div fx">
+					<div id="waterFx" style="width: 80%; height: 80%; transform: translateY(45px)"></div>
+					<span style="transform: translateY(33px)">风险管理</span>
+				</div>
+				<div class="content-div zn">
+					<div id="waterZn" style="width: 80%; height: 80%; transform: translateY(45px)"></div>
+					<span style="transform: translateY(33px)">AI警报</span>
+				</div>
+
+
+				<div :class="['score-div', statScore.total >= 80 ? 'scoreBg1' : statScore.total >= 60 ? 'scoreBg2' : 'scoreBg3']">
+					<div class="score-part">
+						<span>{{ statScore.total }}</span>
+						<span>分</span>
 					</div>
-				</el-scrollbar>
-			</div>
-			<div class="not-data" v-else>
-				<img src="@/assets/images/noData.png" alt="" />
-				<p>暂无数据</p>
+					<div class="scoreInner scoreTextBg1" v-if="statScore.total >= 80">
+						<span style="font-size: 12px;transform:translateY(20px)">安全评分</span>
+						<div class="scoreReview">优秀</div>
+						<div class="scoreStar"></div>
+					</div>
+					<div class="scoreInner scoreTextBg2" v-if="statScore.total >= 60 && statScore.total < 80">
+						<span style="font-size: 12px;transform:translateY(20px)">安全评分</span>
+						<div class="scoreReview">一般</div>
+						<div class="scoreStar"></div>
+					</div>
+					<div class="scoreInner scoreTextBg3" v-if="statScore.total < 60">
+						<span style="font-size: 12px;transform:translateY(20px)">安全评分</span>
+						<div class="scoreReview">差</div>
+						<div class="scoreStar"></div>
+					</div>
+				</div>
+
+
 			</div>
 		</Card>
 	</div>
@@ -45,50 +59,285 @@ import Card from "@/components/card.vue";
 import { onMounted, ref } from "vue";
 import { GlobalStore } from "@/stores";
 import * as echarts from "echarts";
+import "echarts-liquidfill";
 import { COMPANY } from "@/config/config";
 //引入现场大屏API
 import { 
-	emergencyPageApi
+	emergencyPageApi,
+	getStatScoreApi
  } from "@/api/modules/agjtLiveApi";
 const store = GlobalStore();
 const BASEURL = import.meta.env.VITE_API_URL
 
-//获取应急记录信息
-const emergencyData = ref([] as any)
-async function getEmergencyDataData() {
-	let data = {
-		page: 1,
-		pageSize: 9999,
-		// inDispositionStatus: '',  // 数据类型：字符串，1：待救援、2：救援中、3：已救援
-	}
-	await emergencyPageApi(data,true).then(res => {
-		if(res.success){
-			emergencyData.value = res.result.records
-		}
-	});
-};
-
-function downloadReport(row){
-	const url = row && row != "null" && JSON.parse(row)[0].url;
-        const fileName = row && row != "null" && JSON.parse(row)[0].name;
-        if (!url) {
-            this.$message.warning('暂无下载文件');
-            return
-        }
-        fetch(url)
-            .then(response => response.blob())
-            .then(blob => {
-                const link = document.createElement('a');
-                link.href = URL.createObjectURL(blob);
-                link.download = fileName;
-                link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
-                link.click();
-            });
+//绘画安全隐患治理水波图
+function drawAqWater() {
+	type EChartsOption = echarts.EChartsOption;
+	var chartDom = document.getElementById("waterAq")!;
+	var myChart = echarts.init(chartDom);
+	var option: EChartsOption;
+	// 配置项
+	option = {
+		series: [
+			{
+				type: "liquidFill", //设置图表类型
+				data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
+				waveAnimation: true, //是否开启水波动画,
+				amplitude: 15, // 设置振幅，值越大波形越尖
+				waveLength: 150, //水波的长度，值越大水波越长
+				shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+				direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
+				radius: "60%", // 设置图的大小  默认为50%
+				color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
+				center: ["50%", "50%"], //中心点的位置1E90FF
+				animationEasing: "easeOut",
+				outline: {
+					borderDistance: 4, // 外边框距离
+					itemStyle: {
+						borderWidth: 2, // 外边框宽度
+						borderColor: "#156ACF" // 外边框颜色
+					}
+				},
+				backgroundStyle: {
+					color: "rgba(0,0,0,0)" // 背景色
+				},
+				label: {
+					normal: {
+						formatter: function () {
+							return statScore.value.hiddenDangerScore + "分";
+						},
+						textStyle: {
+							color: "#fff",
+							insideColor: "#fff",
+							fontSize: 12
+						}
+					}
+				}
+			}
+		]
+	};
+	// 使用配置项设置图表
+	myChart.setOption(option);
 }
+//绘画危大工程水波图
+function drawWdWater() {
+	type EChartsOption = echarts.EChartsOption;
+	var chartDom = document.getElementById("waterWd")!;
+	var myChart = echarts.init(chartDom);
+	var option: EChartsOption;
+	// 配置项
+	option = {
+		series: [
+			{
+				type: "liquidFill", //设置图表类型
+				data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
+				waveAnimation: true, //是否开启水波动画,
+				amplitude: 15, // 设置振幅，值越大波形越尖
+				waveLength: 150, //水波的长度，值越大水波越长
+				shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+				direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
+				radius: "60%", // 设置图的大小  默认为50%
+				color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
+				center: ["50%", "50%"], //中心点的位置1E90FF
+				animationEasing: "easeOut",
+				outline: {
+					borderDistance: 4, // 外边框距离
+					itemStyle: {
+						borderWidth: 2, // 外边框宽度
+						borderColor: "#156ACF" // 外边框颜色
+					}
+				},
+				backgroundStyle: {
+					color: "rgba(0,0,0,0)" // 背景色
+				},
+				label: {
+					normal: {
+						formatter: function () {
+							return statScore.value.dangerEngScore + "分";
+						},
+						textStyle: {
+							color: "#fff",
+							insideColor: "#fff",
+							fontSize: 12
+						}
+					}
+				}
+			}
+		]
+	};
+	// 使用配置项设置图表
+	myChart.setOption(option);
+}
+//绘画安全隐患治理水波图
+function drawJyWater() {
+	type EChartsOption = echarts.EChartsOption;
+	var chartDom = document.getElementById("waterJy")!;
+	var myChart = echarts.init(chartDom);
+	var option: EChartsOption;
+	// 配置项
+	option = {
+		series: [
+			{
+				type: "liquidFill", //设置图表类型
+				data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
+				waveAnimation: true, //是否开启水波动画,
+				amplitude: 15, // 设置振幅，值越大波形越尖
+				waveLength: 150, //水波的长度，值越大水波越长
+				shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+				direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
+				radius: "60%", // 设置图的大小  默认为50%
+				color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
+				center: ["50%", "50%"], //中心点的位置1E90FF
+				animationEasing: "easeOut",
+				outline: {
+					borderDistance: 4, // 外边框距离
+					itemStyle: {
+						borderWidth: 2, // 外边框宽度
+						borderColor: "#156ACF" // 外边框颜色
+					}
+				},
+				backgroundStyle: {
+					color: "rgba(0,0,0,0)" // 背景色
+				},
+				label: {
+					normal: {
+						formatter: function () {
+							// return statScore.value + "分"
+							return "30分";
+						},
+						textStyle: {
+							color: "#fff",
+							insideColor: "#fff",
+							fontSize: 12
+						}
+					}
+				}
+			}
+		]
+	};
+	// 使用配置项设置图表
+	myChart.setOption(option);
+}
+//绘画安全隐患治理水波图
+function drawFxWater() {
+	type EChartsOption = echarts.EChartsOption;
+	var chartDom = document.getElementById("waterFx")!;
+	var myChart = echarts.init(chartDom);
+	var option: EChartsOption;
+	// 配置项
+	option = {
+		series: [
+			{
+				type: "liquidFill", //设置图表类型
+				data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
+				waveAnimation: true, //是否开启水波动画,
+				amplitude: 15, // 设置振幅，值越大波形越尖
+				waveLength: 150, //水波的长度，值越大水波越长
+				shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+				direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
+				radius: "60%", // 设置图的大小  默认为50%
+				color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
+				center: ["50%", "50%"], //中心点的位置1E90FF
+				animationEasing: "easeOut",
+				outline: {
+					borderDistance: 4, // 外边框距离
+					itemStyle: {
+						borderWidth: 2, // 外边框宽度
+						borderColor: "#156ACF" // 外边框颜色
+					}
+				},
+				backgroundStyle: {
+					color: "rgba(0,0,0,0)" // 背景色
+				},
+				label: {
+					normal: {
+						formatter: function () {
+							return statScore.value.riskScore + "分";
+						},
+						textStyle: {
+							color: "#fff",
+							insideColor: "#fff",
+							fontSize: 12
+						}
+					}
+				}
+			}
+		]
+	};
+	// 使用配置项设置图表
+	myChart.setOption(option);
+}
+//绘画安全隐患治理水波图
+function drawZnWater() {
+	type EChartsOption = echarts.EChartsOption;
+	var chartDom = document.getElementById("waterZn")!;
+	var myChart = echarts.init(chartDom);
+	var option: EChartsOption;
+	// 配置项
+	option = {
+		series: [
+			{
+				type: "liquidFill", //设置图表类型
+				data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
+				waveAnimation: true, //是否开启水波动画,
+				amplitude: 15, // 设置振幅，值越大波形越尖
+				waveLength: 150, //水波的长度，值越大水波越长
+				shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+				direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
+				radius: "60%", // 设置图的大小  默认为50%
+				color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
+				center: ["50%", "50%"], //中心点的位置1E90FF
+				animationEasing: "easeOut",
+				outline: {
+					borderDistance: 4, // 外边框距离
+					itemStyle: {
+						borderWidth: 2, // 外边框宽度
+						borderColor: "#156ACF" // 外边框颜色
+					}
+				},
+				backgroundStyle: {
+					color: "rgba(0,0,0,0)" // 背景色
+				},
+				label: {
+					normal: {
+						formatter: function () {
+							return statScore.value.aiScore + "分";
+						},
+						textStyle: {
+							color: "#fff",
+							insideColor: "#fff",
+							fontSize: 12
+						}
+					}
+				}
+			}
+		]
+	};
+	// 使用配置项设置图表
+	myChart.setOption(option);
+}
+let statScore = ref({
+	dangerEngScore: 0,
+	hiddenDangerScore: 0,
+	aiScore: 0,
+	riskScore: 0,
+	total: 0,
+	lastMonthTotal: 0
+} as any);
+//获取centerTop底部按钮显示数据
+const getStatScore = async (showLoading: boolean) => {
+	const res = await getStatScoreApi({ projectSn: store.sn }, showLoading);
+	statScore.value = res.result;
+
+	drawAqWater();
+	drawWdWater();
+	drawJyWater();
+	drawFxWater();
+	drawZnWater();
+};
 
 //测试方法，对接口时改成相应的方法注释
 const rightTopMethod = async () => {
-	getEmergencyDataData()
+	getStatScore(true)
 }
 //将方法暴露给父组件
 defineExpose({
@@ -96,11 +345,31 @@ defineExpose({
 })
 
 onMounted(async () => {
-	getEmergencyDataData()
+	getStatScore(true)
 });
 </script>
 
 <style lang="scss" scoped>
+
+.scoreBg1 {
+	background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 60px);
+}
+.scoreBg2 {
+	background-image: radial-gradient(circle, rgb(255, 175, 0) 0px, rgba(255, 255, 255, 0) 60px);
+}
+.scoreBg3 {
+	background-image: radial-gradient(circle, rgb(200, 46, 56) 0px, rgba(255, 255, 255, 0) 60px);
+}
+.scoreTextBg1 {
+	background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 30px);
+}
+.scoreTextBg2 {
+	background-image: radial-gradient(circle, rgb(255, 175, 0) 0px, rgba(255, 255, 255, 0) 30px);
+}
+.scoreTextBg3 {
+	background-image: radial-gradient(circle, rgb(200, 46, 56) 0px, rgba(255, 255, 255, 0) 30px);
+}
+
 .rightTop {
 	width: 100%;
 	height: 100%;
@@ -108,67 +377,141 @@ onMounted(async () => {
 		width: calc(100% - 20px);
 		height: calc(100% - 20px);
 		padding: 10px 10px;
-		.itemBox{
-			width: 100%;
-			height: 65px;
-			color: #fff;
-			display: flex;
-			justify-content: space-between;
-			margin-bottom: 10px;
-			.itemLeft{
-				width: 15%;
-				height: 100%;
-				border-left: 2px solid #f73758;
-				background-color: rgba($color: darkred, $alpha: 0.4);
-				display: flex;
-				justify-content: center;
-				align-items: center;
+		background-image: url("@/assets/images/commandScreen/top-bg.png");
+		// background-position: center;
+		background-position: 49% 15%;
+		background-repeat: no-repeat;
+		background-size: auto 130%;
 
-			}
-			.itemRight{
-				height: calc(100% - 10px);
-				width: calc(83% - 10px);
-				padding: 5px 5px;
-				// background-color: rgba($color: #a85454, $alpha: 0.3);
-				background: repeating-linear-gradient(100deg, rgba(200,10,10,0.1), rgba(200,10,10,0.1) 20px, rgba(0,0,0,0) 20px, rgba(0,0,0,0) 40px), 
-							linear-gradient(to bottom, rgba(200,10,10,0.2), rgba(200,10,10,0.3));
-  				background-size: 100% 100%, 100% 100%;
-				display: flex;
-				flex-direction: column;
-				justify-content: space-between;
-				.rightTop{
-					height: 30%;
-					width: 100%;
-					display: flex;
-					justify-content: space-between;
-				}
-				.rightCenter{
-					height: 30%;
-					width: 100%;
-					display: flex;
-					justify-content: flex-end;
-					.rcInner1{
-						width: 50%;
-					}
-					.rcInner2{
-						width: 50%;
-					}
-				}
-				.rightBottom{
-					color: #19bfef;
-					height: 30%;
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					// transform: translateY(-3px);
-					.rbInner1{}
-					.rbInner2{}
-					.rbInner3{
-						font-style: italic;
-					}
+		.content-div {
+			width: 30%;
+			height: 30%;
+			position: absolute;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			color: #fff;
+			transform: translateX(0)
+		}
+
+		.aq {
+			// left: 40px;
+			// top: 180px;
+			left: 0%;
+			top: 45%;
+		}
+
+		.wd {
+			// left: 200px;
+			// top: 80px;
+			left: 12%;
+			top: 20%;
+		}
+
+		.jy {
+			// left: 400px;
+			// top: 5px;
+			left: 35%;
+			top: 0%;
+		}
+
+		.fx {
+			// right: 180px;
+			// top: 80px;
+			right: 12%;
+			top: 20%;
+		}
+
+		.zn {
+			// right: 40px;
+			// top: 180px;
+			right: 0%;
+			top: 45%;
+		}
+
+		.count-div {
+			width: 60%;
+			color: white;
+			position: absolute;
+			// bottom: 95px;
+			// left: 170px;
+			bottom: 19%;
+			left: 18%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			
+			&-item {
+				font-size: 14px;
+
+				> span:nth-child(2) {
+					color: #2983e1;
 				}
 			}
 		}
+
+		.score-div {
+			color: white;
+			position: absolute;
+			// bottom: 210px;
+			// left: 383px;
+			width: 30%;
+			height: 55%;
+			// bottom: 30%;
+			left: 35.5%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			transform: translateY(45px) translateX(-2px);
+			.score-part {
+				margin-top: 50px;
+				
+				span:nth-child(1) {
+					font-size: 36px;
+				}
+
+				span:nth-child(2) {
+					font-size: 18px;
+				}
+			}
+
+			> span {
+				color: white;
+				font-size: 18px;
+			}
+			.scoreInner {
+				text-align: center;
+				// margin-top: -10px;
+				width: 90%;
+				// height: 100px;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				transform: translateY(-15px);
+				// background-color: red;
+				.scoreReview {
+					opacity: 0.7;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					height: 50px;
+					transform: translateY(5px);
+					// background-color: blue;
+				}
+				.scoreStar {
+					// background-color: purple;
+					// margin-top: 20px;
+					width: 28%;
+					height: 40px;
+					background: url("@/assets/images/green_flag_bg.png") no-repeat;
+					background-size: 100% 100%;
+
+					transform: translateY(-30px);
+				}
+			}
+		}
+		
 	}
 }
 .overHiddenText{