From 2ee5827a20258931a776bf58569d2e86f52a39ff Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Thu, 13 Jun 2024 16:53:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9E=8D=E9=92=A2=E9=9B=86=E5=9B=A2?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E7=9C=8B=E6=9D=BF=E5=86=85=E5=AE=B9=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=B7=BB=E5=8A=A0=E4=BB=A5=E5=8F=8A=E5=90=88=E5=B9=B6?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   4 +-
 .../images/comprehensiveManage/bgOne.png      | Bin 0 -> 2825 bytes
 src/config/config.ts                          |   4 +-
 src/routers/modules/staticRouter.ts           |   4 +-
 .../projectOverview/centerBottom.vue          | 540 ++++++++-------
 .../projectOverview/centerTop.vue             |  22 +-
 .../projectOverview/rightBottom.vue           | 613 ++++--------------
 .../projectOverview/rightCenter.vue           | 434 ++++---------
 .../projectOverview/rightTop.vue              | 423 ++++++++----
 9 files changed, 866 insertions(+), 1178 deletions(-)
 create mode 100644 src/assets/images/comprehensiveManage/bgOne.png

diff --git a/.env.development b/.env.development
index 64850b1..add0c2f 100644
--- a/.env.development
+++ b/.env.development
@@ -5,7 +5,7 @@ NODE_ENV = 'development'
 # 后端本地
 # VITE_API_URL = 'http://192.168.34.221:19111'
 # VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
-VITE_API_URL = 'http://182.90.224.237:51234'  #雄哥远程
+# VITE_API_URL = 'http://182.90.224.237:51234'  #雄哥远程
 # VITE_API_URL = 'http://192.168.34.221:28889'
 # VITE_API_URL = 'http://121.196.214.246/api'
 # VITE_API_URL = 'http://jxj.zhgdyun.com:100'
@@ -24,7 +24,7 @@ VITE_API_URL = 'http://182.90.224.237:51234'  #雄哥远程
 # VITE_API_URL = 'http://182.90.224.237:15551'
 # agjt
 # VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
-# VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
+VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
 # VITE_API_URL = 'http://jxj.zhgdyun.com:19812'
 # 苏立信
 # VITE_API_URL = 'http://101.43.164.214:11111'
diff --git a/src/assets/images/comprehensiveManage/bgOne.png b/src/assets/images/comprehensiveManage/bgOne.png
new file mode 100644
index 0000000000000000000000000000000000000000..68dc3dc16d249e029f984d74edcccbf53fc50e69
GIT binary patch
literal 2825
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
V^LhubOBDWXK{l2S7EC-j^?&YD`Q88k

literal 0
HcmV?d00001

diff --git a/src/config/config.ts b/src/config/config.ts
index d22b957..eb4fc23 100644
--- a/src/config/config.ts
+++ b/src/config/config.ts
@@ -29,8 +29,8 @@ export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL;
 // export const COMPANY: string = "as"; //鞍山项目
 // export const COMPANY: string = "agjt"; //鞍钢集团
 // export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏
-export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
-// export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏
+// export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
+export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏
 // export const COMPANY: string = "slx"; //苏立信项目
 // export const COMPANY: string = "hfqc"; //合肥启程项目
 // export const COMPANY: string = "jsyc"; // 江苏盐城项目
diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts
index 5eddd10..21fc8fd 100644
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@@ -25,9 +25,9 @@ export const staticRouter: RouteRecordRaw[] = [
 		path: "/large",
 		name: "大屏",
 		// // component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
-		component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
+		// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
 		// component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏
-		// component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
+		component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
 		// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
 		children: [
 			{
diff --git a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/centerBottom.vue b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/centerBottom.vue
index 72a7ada..483ee92 100644
--- a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/centerBottom.vue
+++ b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/centerBottom.vue
@@ -1,63 +1,106 @@
 <template>
 	<div class="leftTop">
-		<Card title="进度概况">
-			<div class="progressContent">
-				<div style="display: flex; padding: 2% 1%; color: #fff; font-size: 16px">
-					<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 1%"></div>
-					<div><i>倒计时</i></div>
-				</div>
-				<div class="totalDay">
-					<div style="line-height: 45px">
-						项目总天数
-						<span v-if="!projectData?.totalProjectDay" class="dayImg">0</span>
-						<span v-else class="dayImg" v-for="item in projectData?.totalProjectDay" :key="item">{{ item }}</span>
-						<!-- <span class="dayImg">0</span>
-						<span class="dayImg">4</span>
-						<span class="dayImg">7</span> -->
-						<span style="margin-left: 4%">天</span>
+		<Card :title="activeTab == 0 ? '人员情况' : '三色评价'">
+			<div class="top-content">
+				<span :class="activeTab == 0 ? 'active' : ''" @click="activeTab = 0">人员情况</span>
+				<span :class="activeTab == 1 ? 'active' : ''" @click="activeTab = 1">三色评价</span>
+			</div>
+			<div class="box-content" v-show="activeTab == 0">
+				<div class="member-top-data">
+					<div class="top-data-item">
+						<span>未履职人员</span>
+						<span>12/2500</span>
+					</div>
+					<div class="top-data-item">
+						<span>项目经理</span>
+						<span>12/25</span>
+					</div>
+					<div class="top-data-item">
+						<span>安全员</span>
+						<span>12/25</span>
+					</div>
+					<div class="top-data-item">
+						<span>质量员</span>
+						<span>12/25</span>
+					</div>
+					<div class="top-data-item">
+						<span>监理</span>
+						<span>5/5</span>
 					</div>
 				</div>
-				<div class="residueDay">
-					<div style="line-height: 45px">
-						项目剩余天数
-						<span v-if="!projectData?.surplusDay" class="dayImg">0</span>
-						<span v-else class="dayImg" v-for="item in projectData?.surplusDay" :key="item">{{ item }}</span>
-						<!-- <span class="dayImg">2</span>
-						<span class="dayImg">8</span>
-						<span class="dayImg">6</span> -->
-						<span style="margin-left: 4%">天</span>
-					</div>
-				</div>
-				<div style="display: flex; margin-top: 4%; margin-left: 2%; color: #fff; font-size: 16px; width: 30%">
-					<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 1%"></div>
-					<div><i>里程碑</i></div>
-				</div>
-				<el-scrollbar style="width: 94%; margin: 3% 0% 0% 3%; height: 30%" v-if="progressList.length > 0">
-					<div class="progressData">
-						<div class="data" v-for="item in progressList" :key="item.id">
-							<div v-if="item.status == 0" class="text" :title="item.name">{{ item.name }}</div>
-							<img v-if="item.status == 0" src="@/assets/images/comprehensiveManage/project7.png" alt="" />
-							<div
-								v-if="item.status == 1"
-								style="color: #fff; font-size: 18px; margin-top: -5%"
-								:title="item.name"
-								class="statusImg1"
-							>
-								<div class="stage-name">{{ item.name }}</div>
-								<div v-if="item.status == 1" class="statusImg"></div>
-							</div>
-							<img
-								v-if="item.status == 1"
-								style="width: 40px; margin-top: 1%"
-								src="@/assets/images/comprehensiveManage/project11.png"
-								alt=""
-							/>
+				<div class="member-bottom-table">
+					<div class="list-content">
+						<div class="tab-list">
+							<div>企业名称</div>
+							<div>未履职人数</div>
+							<div>项目经理</div>
+							<div>安全员</div>
+							<div>质量员</div>
+							<div>监理</div>
 						</div>
+						<el-scrollbar class="list-box">
+							<div
+								v-for="(item, index) in list"
+								class="listStyle"
+								:key="item.id"
+							>
+								<!-- <div style="width: 5%">{{ index + 1 }}</div> -->
+								<div>{{ item.waterMeterName || "" }}</div>
+								<div>{{ item.waterTonnage || 0 }}</div>
+								<div>{{ item.waterTonnage || 0 }}</div>
+								<div>{{ item.waterTonnage || 0 }}</div>
+								<div>{{ item.waterTonnage || 0 }}</div>
+								<div>{{ item.waterTonnage || 0 }}</div>
+							</div>
+						</el-scrollbar>
+					</div>
+					<div class="not-data" v-if="list.length == 0">
+						<img src="@/assets/images/noData.png" alt="" />
+						<p>暂无数据</p>
+					</div>
+				</div>
+			</div>
+			<div class="box-content" v-show="activeTab == 1">
+				<div class="remark-top-data">
+					<div class="top-data-item">
+						<span>低风险</span>
+						<span>1200</span>
+					</div>
+					<div class="top-data-item">
+						<span>中风险</span>
+						<span>25</span>
+					</div>
+					<div class="top-data-item">
+						<span>高风险</span>
+						<span>0</span>
+					</div>
+				</div>
+				<div class="remark-bottom-table">
+					<div class="list-content">
+						<div class="tab-list">
+							<div>企业名称</div>
+							<div>高风险人数</div>
+							<div>中风险人数</div>
+							<div>低风险人数</div>
+						</div>
+						<el-scrollbar class="list-box">
+							<div
+								v-for="(item, index) in list"
+								class="listStyle"
+								:key="item.id"
+							>
+								<!-- <div style="width: 5%">{{ index + 1 }}</div> -->
+								<div>{{ item.waterMeterName || "" }}</div>
+								<div>{{ item.waterTonnage || 0 }}</div>
+								<div>{{ item.waterTonnage || 0 }}</div>
+								<div>{{ item.waterTonnage || 0 }}</div>
+							</div>
+						</el-scrollbar>
+					</div>
+					<div class="not-data" v-if="list.length == 0">
+						<img src="@/assets/images/noData.png" alt="" />
+						<p>暂无数据</p>
 					</div>
-				</el-scrollbar>
-				<div class="notoDta" v-else>
-					<img src="@/assets/images/noData.png" alt="" />
-					<div>暂无数据</div>
 				</div>
 			</div>
 		</Card>
@@ -67,193 +110,220 @@
 <script setup lang="ts">
 import Card from "@/components/card.vue";
 import { ref, watch, onMounted } from "vue";
-import { getStageOption } from "@/api/modules/projectOverview";
 import { GlobalStore } from "@/stores";
 const store = GlobalStore();
-const progressList = ref([
-	// {
-	// 	name: "施工证获取",
-	// 	status: 0
-	// },
-	// {
-	// 	name: "土方开挖",
-	// 	status: 0
-	// },
-	// {
-	// 	name: "桩基",
-	// 	status: 0
-	// },
-	// {
-	// 	name: "支护开始",
-	// 	status: 0
-	// },
-	// {
-	// 	name: "垫层完成",
-	// 	status: 0
-	// },
-	// {
-	// 	name: "正负零",
-	// 	status: 0
-	// },
-	// {
-	// 	name: "工程达到预售条件",
-	// 	status: 0
-	// }
-] as any);
-// ts
-type Props = {
-	projectData?: any; // 传入项目信息
-};
-// withDefaults 定义默认值(传入的数据类型同默认值)
-const props = withDefaults(defineProps<Props>(), {
-	projectData: {}
-});
-// 项目信息
-const projectData = ref({} as any);
-
-watch(
-	() => props.projectData,
-	newVal => {
-		// console.log(newVal, "newVal");
-		if (newVal) {
-			// props.xData = newVal;
-			projectData.value = newVal;
-			console.log("当前阶段", projectData.value);
-			console.log("当前阶段", progressList.value);
-			if (progressList.value.length > 0 && projectData.value.constructionStage) {
-				progressList.value[projectData.value.constructionStage - 1].status = 1;
-			}
-		}
-	}
-);
-
-//获取里程碑option
-const getProgressOption = async () => {
-	const res: any = await getStageOption({ dictionaryEncoding: "project_construction_stage", projectSn: store.sn });
-	if (res.result.length > 0) {
-		let newArray = res.result.map((item: any) => {
-			return {
-				name: item.name,
-				status: 0
-			};
-		});
-		progressList.value = newArray;
-		console.log(projectData.value, "里程碑option", res);
-		if (projectData.value?.constructionStage) {
-			progressList.value[projectData.value.constructionStage - 1].status = 1;
-		}
-	}
-};
-//将方法暴露给父组件
-defineExpose({
-	getProgressOption
-})
-onMounted( async () => {
-	getProgressOption();
-});
+const activeTab = ref(0);
+const list = ref([
+	{waterMeterName: 123,waterTonnage:456},
+	{waterMeterName: 123,waterTonnage:456},
+	{waterMeterName: 123,waterTonnage:456},
+	{waterMeterName: 123,waterTonnage:456}
+]) as any;
+onMounted(async () => {});
 </script>
 
 <style lang="scss" scoped>
-.el-scrollbar__wrap {
-	overflow-x: auto;
-	height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
-}
-
-.el-scrollbar {
-	background: url("@/assets/images/comprehensiveManage/project4.png") no-repeat;
-	background-size: 100% 40%;
-	background-position-y: 30%;
-}
-
 .leftTop {
 	width: 100%;
 	height: 100%;
-}
-.progressContent {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	.totalDay {
-		width: 40%;
-		float: left;
-		color: #ccc;
-		font-size: 16px;
-		margin-left: 15%;
-	}
-	.residueDay {
-		width: 40%;
-		float: right;
-		color: #ccc;
-		font-size: 16px;
-		margin-right: 5%;
-	}
-	.dayImg {
-		margin-left: 2%;
-		font-size: 26px;
-		display: inline-block;
-		width: 35px;
-		height: 45px;
-		font-family: sadigitalNumber;
-		background: url("@/assets/images/comprehensiveManage/project1.png") no-repeat;
-		background-size: 100% 100%;
-		text-align: center;
-		color: #4ac0f3;
-	}
-	.progressData {
-		// position: absolute;
-		// bottom: 3%;
-		// left: 3%;
-		width: 100%;
-		height: 30%;
+	.top-content {
+		width: 18%;
+		position: absolute;
+		top: 3%;
+		right: 0px;
 		display: flex;
-		cursor: pointer;
-		text-align: center;
-		// background: url("@/assets/images/comprehensiveManage/project4.png") no-repeat;
-		// background-size: 100% 40%;
-		// background-position-y: 30%;
-		// .stage-bg {
-		// 	height: 50%;
-		// 	position: absolute;
-		// 	img {
-		// 		width: 100%;
-		// 		height: 100%;
-		// 	}
-		// }
-		.data {
-			color: #ccc;
-			font-size: 15px;
-			padding-left: 4%;
-			padding-right: 1%;
-			z-index: 1;
-			.text {
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
+		align-items: center;
+		justify-content: space-between;
+		span {
+			font-family: ABeeZee, ABeeZee;
+			font-weight: normal;
+			font-size: 16px;
+			color: rgba(255, 255, 255, 0.6);
+			letter-spacing: 1px;
+			text-shadow: 0px 4px 4px #14346c;
+			text-align: center;
+			font-style: italic;
+			text-transform: none;
+			cursor: pointer;
+		}
+		.active {
+			color: #ffffff;
+		}
+	}
+	.box-content {
+		width: 100%;
+		height: 100%;
+		padding-top: 1%;
+		.remark-top-data{
+			display: flex;
+			align-items: center;
+			justify-content: space-around;
+			margin-bottom: 2%;
+			.top-data-item {
+				width: 135px;
+				height: 51px;
+				background: url("@/assets/images/comprehensiveManage/bgOne.png") no-repeat;
+				background-size: 100% 100%;
+				display: flex;
+				flex-direction: column;
+				padding: 0.5% 0;
+				padding-left: 2%;
+				span:nth-child(1) {
+					font-size: 16px;
+					color: #fff;
+					font-family: ABeeZee-Regular;
+					margin-bottom: 1%;
+				}
+				span:nth-child(2) {
+					font-size: 24px;
+					color: #65d7f9;
+					font-family: ABeeZee-Regular;
+				}
 			}
-			img {
-				width: 20px;
-				margin-top: 18%;
-				margin-left: 15%;
+			.top-data-item:not(:last-child) {
+				margin-right: 2%;
 			}
 		}
-		.statusImg {
-			position: absolute;
-			top: 190%;
-			left: -10%;
-			width: 120px;
-			height: 1px;
-			background: url("@/assets/images/comprehensiveManage/project6.png") no-repeat;
-			background-size: 100% 100%;
-		}
-		.statusImg1 {
+		.remark-bottom-table {
+			height: 62%;
+			box-sizing: border-box;
+			margin: 0 2%;
 			position: relative;
-			background: url("@/assets/images/comprehensiveManage/project5.png") no-repeat;
-			background-size: 100% 100%;
-			.stage-name {
-				text-align: center;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
+			.list-content {
+				height: 95%;
+				width: 100%;
+				.tab-list {
+					display: flex;
+					align-items: center;
+					width: 100%;
+					height: 31px;
+					background: rgba(0,122,255,0.19);
+					// position: absolute;
+					left: 75.5%;
+					top: 75%;
+					color: #ccc;
+					font-size: 16px;
+					// justify-content: space-around;
+					div {
+						width: 25%;
+						text-align: center;
+						white-space: nowrap;
+					}
+				}
+				.list-box {
+					height: 82%;
+					.listStyle {
+						display: flex;
+						align-items: center;
+						color: #fff;
+						font-size: 14px;
+						line-height: 30px;
+						margin-top: 0.5%;
+						cursor: pointer;
+						background: rgba(0,122,255,0.06);
+						div {
+							width: 25%;
+							text-align: center;
+							white-space: nowrap;
+						}
+					}
+					.listStyle:hover {
+						background: rgba(0,122,255,0.43);
+					}
+				}
+			}
+		}
+		.member-top-data {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-bottom: 2%;
+			.top-data-item {
+				width: 135px;
+				height: 51px;
+				background: url("@/assets/images/comprehensiveManage/bgOne.png") no-repeat;
+				background-size: 100% 100%;
+				display: flex;
+				flex-direction: column;
+				padding: 0.5% 0;
+				padding-left: 2%;
+				span:nth-child(1) {
+					font-size: 16px;
+					color: #fff;
+					font-family: ABeeZee-Regular;
+					margin-bottom: 1%;
+				}
+				span:nth-child(2) {
+					font-size: 24px;
+					color: #65d7f9;
+					font-family: ABeeZee-Regular;
+				}
+			}
+			.top-data-item:not(:last-child) {
+				margin-right: 2%;
+			}
+		}
+		.member-bottom-table {
+			height: 62%;
+			box-sizing: border-box;
+			margin: 0 2%;
+			position: relative;
+			.list-content {
+				height: 95%;
+				width: 100%;
+				.tab-list {
+					display: flex;
+					align-items: center;
+					width: 100%;
+					height: 31px;
+					background: rgba(0,122,255,0.19);
+					// position: absolute;
+					left: 75.5%;
+					top: 75%;
+					color: #ccc;
+					font-size: 16px;
+					// justify-content: space-around;
+					div {
+						width: 17%;
+						text-align: center;
+						white-space: nowrap;
+					}
+				}
+				.list-box {
+					height: 82%;
+					.listStyle {
+						display: flex;
+						align-items: center;
+						color: #fff;
+						font-size: 14px;
+						line-height: 30px;
+						margin-top: 0.5%;
+						cursor: pointer;
+						background: rgba(0,122,255,0.06);
+						div {
+							width: 17%;
+							text-align: center;
+							white-space: nowrap;
+						}
+					}
+					.listStyle:hover {
+						background: rgba(0,122,255,0.43);
+					}
+				}
+			}
+		}
+		.not-data {
+			top: 40%;
+			width: 30%;
+			left: 35%;
+			position: absolute;
+			text-align: center;
+			img {
+				width: 50%;
+			}
+			p {
+				color: #fff;
+				font-size: 14px;
 			}
 		}
 	}
@@ -262,18 +332,4 @@ onMounted( async () => {
 	height: 80%;
 	margin-top: 1.8%;
 }
-.notoDta {
-	bottom: 10%;
-	width: 20%;
-	left: 35%;
-	text-align: center;
-	position: absolute;
-	img {
-		width: 40%;
-	}
-	div {
-		color: #fff;
-		font-size: 14px;
-	}
-}
 </style>
diff --git a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/centerTop.vue b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/centerTop.vue
index af99f54..70c22f8 100644
--- a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/centerTop.vue
+++ b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/centerTop.vue
@@ -1,9 +1,19 @@
 <template>
 	<div class="leftTop">
 		<Card title="安全教育">
-			<div class="video-config"></div>
+			<div class="video-config">
+				<el-icon class="config-icon" color="#57BCE8" size="24"><Setting /></el-icon>
+				<div class="dialog-content" v-show="false">
+					<div class="dialog-title">
+						<div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div>
+						<div class="title-text">
+							<i>配置视频</i>
+						</div>
+					</div>
+				</div>
+			</div>
 			<div class="href-content" v-if="showVideo == 1">
-				<el-carousel indicator-position="none" height="450px" style="width: 76%;">
+				<el-carousel indicator-position="none" height="450px" style="width: 100%;">
 					<el-carousel-item v-for="(item, index) in videoList" :key="item.id">
 						<ckplayerComp
 								:name="index"
@@ -255,6 +265,14 @@ onMounted(async () => {
 	width: 100%;
 	height: 100%;
 	position: relative;
+	.video-config{
+		position: absolute;
+		top: 1.5%;
+		right: 1%;
+		.config-icon{
+			cursor: pointer;
+		}
+	}
 	.videoBox {
 		width: 100%;
 		height: 100%;
diff --git a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/rightBottom.vue b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/rightBottom.vue
index 7b73cb6..319f9e2 100644
--- a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/rightBottom.vue
+++ b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/rightBottom.vue
@@ -1,35 +1,30 @@
 <template>
 	<div class="leftTop">
-		<Card title="环境监测">
-			<div class="box">
-				<div id="echartsHjjc" ref="leftTopEcharts" style="width: 100%; height: 100%"></div>
-				<div class="footerData">{{ analysisData }}</div>
-				<div class="colour">
-					<div class="colour_content">
-						<div class="bg" style="background: #65d7f9; border-top-left-radius: 8px; border-bottom-left-radius: 8px"></div>
-						<div class="size">优</div>
+		<Card title="安全质量隐患报告">
+			<div class="box-content">
+				<el-scrollbar class="list-box">
+					<div v-for="(item, index) in list" class="listStyle" :key="item.id">
+						<div>外墙、顶板、底板出现贯通性裂缝</div>
+						<div>
+							<span>整改结果：</span>
+							<span>已逾期</span>
+						</div>
+						<div>
+							<div>
+								<span>整改结果：</span>
+								<span>已逾期</span>
+							</div>
+							<div>
+								<span>整改结果：</span>
+								<span>已逾期</span>
+							</div>
+							<div>
+								<span>整改结果：</span>
+								<span>已逾期</span>
+							</div>
+						</div>
 					</div>
-					<div class="colour_content">
-						<div class="bg" style="background: #ffbb38"></div>
-						<div class="size">良</div>
-					</div>
-					<div class="colour_content">
-						<div class="bg" style="background: #fe7a18"></div>
-						<div class="size">轻度污染</div>
-					</div>
-					<div class="colour_content">
-						<div class="bg" style="background: #7718fe"></div>
-						<div class="size">中度污染</div>
-					</div>
-					<div class="colour_content">
-						<div class="bg" style="background: #890ea1"></div>
-						<div class="size">重度污染</div>
-					</div>
-					<div class="colour_content">
-						<div class="bg" style="background: #970c0c; border-top-right-radius: 8px; border-bottom-right-radius: 8px"></div>
-						<div class="size">严重污染</div>
-					</div>
-				</div>
+				</el-scrollbar>
 			</div>
 		</Card>
 	</div>
@@ -42,489 +37,103 @@ import { ref, onMounted, reactive } from "vue";
 import * as echarts from "echarts";
 import Card from "@/components/card.vue";
 const store = GlobalStore();
-const analysisData = ref(10 as any);
-const posCenter = ref(["50%", "64%"]);
-
-function drawChart() {
-	let leftTopEcharts = echarts.init(document.getElementById("echartsHjjc"));
-	let option = {
-		series: [
-			{
-				// 外围刻度
-				type: "gauge",
-				radius: "100%",
-				center: posCenter.value,
-				splitNumber: 10,
-				min: 0,
-				max: 500,
-				startAngle: 180,
-				endAngle: 0,
-				axisLine: {
-					show: true,
-					lineStyle: {
-						width: 18,
-						shadowBlur: 0,
-						color: [
-							[
-								1,
-								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-									// {
-									// 	offset: 0,
-									// 	color: "rgba(151, 12, 12, 1)"
-									// },
-									// {
-									// 	offset: 0.2,
-									// 	color: "rgba(137, 14, 161, 1)"
-									// },
-									// {
-									// 	offset: 0.4,
-									// 	color: "rgba(119, 24, 254, 1)"
-									// },
-									// {
-									// 	offset: 0.5,
-									// 	color: "rgba(254, 122, 24, 1)"
-									// },
-									// {
-									// 	offset: 0.8,
-									// 	color: "rgba(255, 187, 56, 1)"
-									// },
-									// {
-									// 	offset: 1,
-									// 	color: "rgba(101, 215, 249, 1)"
-									// }
-									{
-										offset: 0,
-										color: "rgba(101, 215, 249, 1)"
-									},
-									{
-										offset: 0.2,
-										color: "rgba(255, 187, 56, 1)"
-									},
-									{
-										offset: 0.4,
-										color: "rgba(254, 122, 24, 1)"
-									},
-									{
-										offset: 0.5,
-										color: "rgba(119, 24, 254, 1)"
-									},
-									{
-										offset: 0.8,
-										color: "rgba(137, 14, 161, 1)"
-									},
-									{
-										offset: 1,
-										color: "rgba(151, 12, 12, 1)"
-									}
-								])
-							]
-						]
-					}
-				},
-				axisTick: {
-					show: false
-				},
-				splitLine: {
-					show: false
-				},
-				axisLabel: {
-					show: true,
-					color: "#fff",
-					fontSize: 10,
-					distance: -40
-				},
-				pointer: {
-					show: 0
-				}
-			},
-			{
-				// 内侧指针、数值显示
-				name: "",
-				type: "gauge",
-				radius: "95%",
-				center: posCenter.value,
-				startAngle: 180,
-				endAngle: 0,
-				min: 0, //最小刻度
-				max: 500, //最大刻度
-				splitNumber: 100, //刻度数量
-				axisLine: {
-					show: false
-				},
-				axisLabel: {
-					show: false
-				}, //刻度标签。
-				axisTick: {
-					show: false
-				}, //刻度样式
-				splitLine: {
-					show: true,
-					length: 5,
-					lineStyle: {
-						color: "#87E0FB",
-						width: 1
-					}
-				},
-				detail: {
-					show: false
-				},
-				itemStyle: {
-					normal: {
-						color: "#fff"
-					}
-				},
-				data: [
-					{
-						value: analysisData.value
-					}
-				],
-				z: 9
-			},
-			// 第三个圆
-			{
-				type: "gauge",
-				radius: "70%",
-				center: posCenter.value,
-				splitNumber: 4,
-				min: 0,
-				max: 100,
-				startAngle: 180,
-				endAngle: 0,
-				axisLine: {
-					show: true,
-					lineStyle: {
-						width: 2,
-						shadowBlur: 0,
-						color: [
-							[
-								1,
-								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-									{
-										offset: 0,
-										color: "rgb(1,192,229)"
-									},
-									{
-										offset: 1,
-										color: "#87E0FB "
-									}
-								])
-							]
-						]
-					}
-				},
-				axisTick: {
-					show: false
-				},
-				splitLine: {
-					show: false
-				},
-				axisLabel: {
-					show: false
-				},
-				pointer: {
-					show: 0
-				},
-				detail: {
-					show: 0
-				}
-			},
-			// 第二个圆
-			{
-				type: "gauge",
-				radius: "45%",
-				center: posCenter.value,
-				splitNumber: 4,
-				min: 0,
-				max: 100,
-				startAngle: 180,
-				endAngle: 0,
-				axisLine: {
-					show: true,
-					lineStyle: {
-						width: 2,
-						shadowBlur: 0,
-						color: [
-							[
-								1,
-								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-									{
-										offset: 0,
-										color: "rgb(1,192,229)"
-									},
-									{
-										offset: 1,
-										color: "#87E0FB "
-									}
-								])
-							]
-						]
-					}
-				},
-				axisTick: {
-					show: false
-				},
-				splitLine: {
-					show: false
-				},
-				axisLabel: {
-					show: false
-				},
-				pointer: {
-					show: 0
-				},
-				detail: {
-					show: 0
-				}
-			},
-			// 第一个圆
-			{
-				type: "gauge",
-				radius: "25%",
-				center: posCenter.value,
-				splitNumber: 4,
-				min: 0,
-				max: 100,
-				startAngle: 180,
-				endAngle: 0,
-
-				axisLine: {
-					show: true,
-					lineStyle: {
-						width: 200,
-						shadowBlur: 0,
-						color: [
-							[
-								1,
-								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-									{
-										offset: 1,
-										color: "rgba(135, 224, 251, 0.2)"
-									},
-									{
-										offset: 0.2,
-										color: "rgba(135, 224, 251, 0.7)"
-									}
-								])
-							],
-							[1, "transparent"]
-						]
-					}
-				},
-				axisTick: {
-					show: false
-				},
-				splitLine: {
-					show: false
-				},
-				axisLabel: {
-					show: false
-				},
-				pointer: {
-					show: 0
-				},
-				detail: {
-					show: 0
-				}
-			},
-			{
-				type: "gauge",
-				radius: "70%",
-				center: posCenter.value,
-				splitNumber: 0, //刻度数量
-				startAngle: 180,
-				endAngle: 0,
-
-				axisLine: {
-					show: true,
-					lineStyle: {
-						width: 26,
-						color: [
-							[
-								analysisData.value / 500,
-								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-									{
-										offset: 0.5,
-										color: "rgba(135, 224, 251, 1)"
-									},
-									{
-										offset: 1,
-										color: "#fff"
-									}
-								])
-							],
-							[1, "transparent"]
-						]
-					}
-				},
-				//分隔线样式。
-				splitLine: {
-					show: false
-				},
-				axisLabel: {
-					show: false
-				},
-				axisTick: {
-					show: false
-				},
-				pointer: {
-					show: false
-				},
-				title: {
-					show: false
-				},
-				//仪表盘详情，用于显示数据。
-				detail: {
-					show: false
-				},
-				data: [
-					{
-						value: analysisData.value,
-						itemStyle: {
-							color: "red"
-						}
-					}
-				]
-			},
-			{
-				//指针外环
-				type: "pie",
-				hoverAnimation: false,
-				legendHoverLink: false,
-				center: posCenter.value,
-				radius: ["8%", "6%"],
-				// width:5,
-				z: 10,
-				label: {
-					normal: {
-						show: false
-					}
-				},
-				labelLine: {
-					normal: {
-						show: false
-					}
-				},
-				data: [
-					{
-						value: analysisData.value,
-						itemStyle: {
-							normal: {
-								color: "#87E0FB"
-							}
-						}
-					}
-				]
-			},
-			{
-				//指针内环
-				type: "pie",
-				hoverAnimation: false,
-				legendHoverLink: false,
-				center: posCenter.value,
-				radius: ["-2%", "4%"],
-				z: 10,
-
-				axisLine: {
-					show: true
-				},
-				label: {
-					normal: {
-						show: false
-					}
-				},
-				labelLine: {
-					normal: {
-						show: false
-					}
-				},
-
-				data: [
-					{
-						value: analysisData.value,
-						itemStyle: {
-							normal: {
-								color: "rgba(7, 31, 60) "
-							}
-						}
-					}
-				]
-			}
-		]
-	};
-	leftTopEcharts.setOption(option);
-	// window.addEventListener("resize", () => {
-	// 	console.log(666)
-	// 	leftTopEcharts.resize();
-	// })
-	// window.onresize = function () {
-	//   myEchart.resize();
-	// }
-}
-//获取环境监测数据
-const getList = async () => {
-	const res = await getCurrentDayAirQualityApi({ projectSn: store.sn });
-	console.log("获取环境监测数据", res);
-	if (res.result) {
-		analysisData.value = res.result.analysisData;
-	}
-	drawChart();
-};
-//将方法暴露给父组件
-defineExpose({
-	getList
-})
-onMounted( async () => {
-	getList();
-	// drawChart();
-});
+const list = ref([
+	{ waterMeterName: 123, waterTonnage: 456 },
+	{ waterMeterName: 123, waterTonnage: 456 },
+	{ waterMeterName: 123, waterTonnage: 456 },
+	{ waterMeterName: 123, waterTonnage: 456 }
+]) as any;
+onMounted(async () => {});
 </script>
 
 <style lang="scss" scoped>
 .leftTop {
 	width: 100%;
 	height: 100%;
-}
-.box {
-	width: 100%;
-	height: 100%;
-	position: relative;
-}
-.footerData {
-	position: absolute;
-	top: 69%;
-	left: 48%;
-	font-family: sadigitalNumber;
-	font-size: 14px;
-	color: #fff;
-}
-.colour {
-	position: absolute;
-	bottom: 0;
-	width: 100%;
-	font-size: 10px;
-	left: 8%;
-	top: 80%;
-	color: #fff;
-
-	.colour_content {
-		width: 14%;
-		text-align: center;
-		float: left;
-
-		.bg {
-			width: 100%;
-			height: 8px;
-			margin-bottom: 10px;
+	.box-content {
+		width: 100%;
+		height: 100%;
+		padding-top: 1%;
+		.list-box {
+			height: 94%;
+			padding: 5px 24px;
+			.listStyle {
+				display: flex;
+				flex-direction: column;
+				background: rgba(9, 30, 62, 0.5);
+				box-shadow: 0px 3px 4px 0px rgba(17, 141, 255, 0.5), inset 0px 0px 10px 0px #118dff;
+				border-radius: 0px 0px 0px 0px;
+				border: 1px solid;
+				opacity: 0.7;
+				border-image: linear-gradient(359deg, rgba(17, 141, 255, 1), rgba(17, 141, 255, 0)) 1 1;
+				padding: 9px 13px;
+				margin-bottom: 10px;
+				> div:nth-child(1) {
+					font-family: ABeeZee, ABeeZee;
+					font-weight: 400;
+					font-size: 16px;
+					color: #ffffff;
+					line-height: 16px;
+					font-style: normal;
+					text-transform: none;
+					margin-bottom: 5px;
+				}
+				> div:nth-child(2) {
+					font-family: ABeeZee, ABeeZee;
+					font-weight: 400;
+					font-size: 13px;
+					color: #ffffff;
+					font-style: normal;
+					text-transform: none;
+					margin-bottom: 5px;
+					> span:nth-child(2) {
+						color: #01e1ff;
+					}
+				}
+				> div:nth-child(3) {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					margin-bottom: 2px;
+					> div:nth-child(1) {
+						font-family: ABeeZee, ABeeZee;
+						font-weight: 400;
+						font-size: 13px;
+						color: #ffffff;
+						font-style: normal;
+						text-transform: none;
+						> span:nth-child(2) {
+							color: #01e1ff;
+						}
+					}
+					> div:not(:nth-child(1)) {
+						font-family: ABeeZee, ABeeZee;
+						font-weight: 400;
+						font-size: 13px;
+						color: #8893a1;
+						font-style: normal;
+						text-transform: none;
+					}
+				}
+			}
 		}
-
-		.size {
-			width: 100%;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
+		.not-data {
+			top: 40%;
+			width: 30%;
+			left: 35%;
+			position: absolute;
+			text-align: center;
+			img {
+				width: 50%;
+			}
+			p {
+				color: #fff;
+				font-size: 14px;
+			}
 		}
 	}
 }
+
 ::v-deep .h-card .content {
 	height: 80%;
 }
diff --git a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/rightCenter.vue b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/rightCenter.vue
index 28ee866..641e2e2 100644
--- a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/rightCenter.vue
+++ b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/rightCenter.vue
@@ -1,7 +1,47 @@
 <template>
 	<div class="leftTop">
-		<Card title="质量管理">
-			<div id="echartsQuity" style="width: 100%; height: 100%"></div>
+		<Card title="各企业本周数据统计">
+			<el-carousel style="width: 100%;height: 100%;">
+				<el-carousel-item v-for="item in 4" :key="item" style="width: 100%; height: 100%">
+					<div class="box-content">
+						<div class="top-content">
+							<div class="top-content-left">辽宁五寰科技有限公司{{ item }}</div>
+							<div class="top-content-right" style="text-align: right">
+								事故报警总数
+								<span v-if="!projectData?.totalProjectDay" class="dayImg">0</span>
+								<span v-else class="dayImg" v-for="item in projectData?.totalProjectDay" :key="item">{{ item }}</span>
+								<!-- <span style="margin-left: 4%">天</span> -->
+							</div>
+						</div>
+						<div class="bottom-content">
+							<div class="top-data-item">
+								<span>入场人员总数</span>
+								<span>12/2500</span>
+							</div>
+							<div class="top-data-item">
+								<span>企业安全分</span>
+								<span>85</span>
+							</div>
+							<div class="top-data-item">
+								<span>安全隐患总数</span>
+								<span>12</span>
+							</div>
+							<div class="top-data-item">
+								<span>质量隐患总数</span>
+								<span>12</span>
+							</div>
+							<div class="top-data-item">
+								<span>特种作业数量</span>
+								<span>60</span>
+							</div>
+							<div class="top-data-item">
+								<span>培训未通过率</span>
+								<span>30%</span>
+							</div>
+						</div>
+					</div>
+				</el-carousel-item>
+			</el-carousel>
 		</Card>
 	</div>
 </template>
@@ -11,314 +51,104 @@ import Card from "@/components/card.vue";
 import { onMounted, ref } from "vue";
 import { GlobalStore } from "@/stores";
 const store = GlobalStore();
-import * as echarts from "echarts";
-import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
-
-let questionTotal = ref(0 as any);
-let dataList = ref([
-	{
-		value: 30,
-		show: true,
-		name: "未整改质量问题",
-		itemStyle: {
-			normal: {
-				color: "#4CC4F8",
-				borderWidth: 20
-			}
-		}
-	},
-	{
-		value: 70,
-		show: true,
-		name: "已整改质量问题",
-		itemStyle: {
-			normal: {
-				color: "#82FBEA",
-				borderWidth: 20
-			}
-		}
-	}
-]);
-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 echartsTest = echarts.init(document.getElementById("echartsQuity"));
-	let option = {
-		tooltip: {
-			trigger: "item"
-		},
-		title: {
-			text: questionTotal.value,
-			subtext: "质量问题数",
-			x: "24%",
-			y: "center",
-			textAlign: "center",
-			textStyle: {
-				color: "#fff",
-				fontSize: 26,
-				fontWeight: "normal",
-				// align: "center",
-				// width: "200px",
-				fontFamily: "sadigitalNumber"
-			},
-			subtextStyle: {
-				color: "#ccc",
-				fontSize: 12,
-				fontWeight: "normal"
-				// align: "center",
-			}
-		},
-		legend: {
-			selectedMode: false, // 取消图例上的点击事件
-			icon: "rect",
-			type: "plain",
-			orient: "vertical",
-			left: "50%",
-			top: "40%",
-			align: "left",
-			itemGap: 30,
-			itemWidth: 8, // 设置宽度
-			itemHeight: 7, // 设置高度
-			symbolKeepAspect: false,
-			textStyle: {
-				color: "#000",
-				rich: {
-					name: {
-						verticalAlign: "right",
-						align: "left",
-						fontSize: 14,
-						color: "#FFFFFF"
-					},
-					value: {
-						align: "left",
-						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 (var i = 0; i < dataList.value.length; i++) {
-						if (data === dataList.value[i].name) {
-							var value = dataList.value[i].value;
-							var percentage = value + "%";
-							return "{name| " + data + "}  {gap|       }" + "{value|" + value + " " + "}";
-						}
-					}
-				}
-			}
-		},
-		series: [
-			// 外侧光线
-			{
-				name: "",
-				type: "gauge",
-				center: ["25%", "55%"],
-				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%", "55%"],
-				radius: "80%",
-				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: [65, 75],
-				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: ["57", "60"],
-				center: ["25%", "55%"],
-				label: {
-					show: false
-				},
-
-				data: Pie()
-			}
-		]
-	};
-	echartsTest.setOption(option, true);
-	// window.addEventListener("resize", () => {
-	// 	console.log(666)
-	// 	echartsTest.resize();
-	// })
-}
-//获取质量管理
-// const safeData = ref(null as any);
-const qualityInfo = async () => {
-	const res: any = await selectQualityStatisticsApi({ projectSn: store.sn });
-	dataList.value[0].value = res.result.total.rectificationNum;
-	dataList.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum;
-	questionTotal.value = res.result.total.totalNum;
-	drawEchart();
-};
-//将方法暴露给父组件
-defineExpose({
-	qualityInfo
-})
-onMounted( async () => {
-	qualityInfo();
+const projectData = ref({
+	totalProjectDay: "180"
 });
+onMounted(() => {});
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .leftTop {
 	width: 100%;
 	height: 100%;
+	.box-content {
+		.top-content {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin: 0 4%;
+			padding-top: 3%;
+			> div {
+				width: 45%;
+				line-height: 32px;
+				font-size: 14px;
+				color: #fff;
+				.dayImg {
+					margin-left: 2%;
+					font-size: 26px;
+					display: inline-block;
+					width: 29px;
+					height: 32px;
+					font-family: sadigitalNumber;
+					background: url("@/assets/images/comprehensiveManage/project1.png") no-repeat;
+					background-size: 100% 100%;
+					text-align: center;
+					color: #4ac0f3;
+				}
+			}
+			&-left {
+				font-family: ABeeZee, ABeeZee;
+				font-weight: 400;
+				font-size: 16px !important;
+				color: #ffffff;
+				text-align: left;
+				font-style: normal;
+				text-transform: none;
+			}
+		}
+		.bottom-content {
+			display: grid;
+			grid-template-columns: repeat(3, 1fr);
+			grid-gap: 10px;
+			margin: 0 6%;
+			margin-top: 3%;
+			.top-data-item {
+				width: 125px;
+				height: 51px;
+				background: url("@/assets/images/comprehensiveManage/bgOne.png") no-repeat;
+				background-size: 100% 100%;
+				display: flex;
+				flex-direction: column;
+				padding: 2% 0;
+				padding-left: 8%;
+				margin-bottom: 8%;
+				span:nth-child(1) {
+					font-size: 13px;
+					color: #fff;
+					font-family: ABeeZee-Regular;
+					margin-bottom: 1%;
+				}
+				span:nth-child(2) {
+					font-size: 24px;
+					color: #65d7f9;
+					font-family: ABeeZee-Regular;
+				}
+			}
+		}
+	}
 }
 ::v-deep .h-card .content {
 	height: 80%;
 }
+::v-deep .el-carousel__container {
+	height: 100%;
+}
+:deep(){
+	.el-carousel__indicator--horizontal .el-carousel__button {
+        width: 10px;
+        height: 10px;
+        background: #A8C3DD;
+        border: 1px solid #A8C3DD;
+        border-radius: 50%;
+        opacity: 0.3;
+    }
+    .el-carousel__indicator--horizontal.is-active .el-carousel__button{
+        width: 10px;
+        height: 10px;
+        background: #4AC0F3;
+        border: 1px solid #4AC0F3;
+        border-radius: 50%;
+        opacity: 1;
+    }
+}
 </style>
diff --git a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/rightTop.vue b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/rightTop.vue
index 3276064..fa713a3 100644
--- a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/rightTop.vue
+++ b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/rightTop.vue
@@ -1,7 +1,31 @@
 <template>
 	<div class="leftTop">
-		<Card title="安全管理">
-			<div id="echartsSafe" style="width: 100%; height: 100%"></div>
+		<Card title="隐患智能统计分析">
+			<div class="box-content">
+				<div class="contentTop contentMiddle">
+					<div class="ctHead">
+						<div>
+							质量重大隐患超期未整改<text>{{ overdueMajorDangerCount }}</text
+							>个，占比<text>{{ overdueMajorDangerRate }}%</text>
+						</div>
+					</div>
+					<div class="cmHead">
+						<div>
+							安全重大隐患未销项<text>{{ majorDangerCount }}</text
+							>个，占比<text>{{ majorDangerRate }}%</text>
+						</div>
+					</div>
+					<div class="ctContent" style="position: relative">
+						<div id="echartsSafe" style="width: 100%; height: 100%;"></div>
+						<div class="safetext1" v-if="dataList.length != 0">状态统计（较昨日）</div>
+						<div class="safetext2" v-if="dataList.length != 0">风险统计（较昨日）</div>
+						<div class="notoDta" v-if="dataList.length == 0">
+							<img src="@/assets/images/noData.png" alt="" />
+							<p>暂无数据</p>
+						</div>
+					</div>
+				</div>
+			</div>
 		</Card>
 	</div>
 </template>
@@ -10,18 +34,24 @@
 import Card from "@/components/card.vue";
 import { onMounted, ref } from "vue";
 import { GlobalStore } from "@/stores";
-const store = GlobalStore();
-import { getProjectInspectRecordCountApi } from "@/api/modules/projectOverview";
 import * as echarts from "echarts";
-const echartsTest = ref();
+const store = GlobalStore();
 let questionTotal = ref(0 as any);
-
+const echartsTest = ref();
+const majorDangerCount = ref(0 as any);
+const majorDangerRate = ref(0 as any);
+const overdueMajorDangerCount = ref(0 as any);
+const overdueMajorDangerRate = ref(0 as any);
 let dataList = ref([
 	{
+		enumType: "",
 		value: 30,
 		show: true,
-		name: "未整改安全问题",
-
+		name: "重大隐患",
+		greatFaultLevelNumJzrRate: "",
+		rectificationNum: "",
+		rectificationNumJzrRate: "",
+		rectificationName: "",
 		itemStyle: {
 			normal: {
 				color: "#EC6266",
@@ -30,9 +60,14 @@ let dataList = ref([
 		}
 	},
 	{
+		enumType: "",
 		value: 70,
 		show: true,
-		name: "已整改安全问题",
+		name: "一般隐患",
+		greatFaultLevelNumJzrRate: "",
+		rectificationNum: "",
+		rectificationNumJzrRate: "",
+		rectificationName: "",
 		itemStyle: {
 			normal: {
 				color: "#6375C7",
@@ -41,7 +76,7 @@ let dataList = ref([
 		}
 	}
 ]);
-function Pie() {
+const Pie = () => {
 	let dataArr = [];
 	for (var i = 0; i < 150; i++) {
 		if (i % 2 === 0) {
@@ -72,18 +107,19 @@ function Pie() {
 	}
 	return dataArr;
 }
-
-function drawEchart() {
+const drawEchart = () => {
 	echartsTest.value = echarts.init(document.getElementById("echartsSafe"));
 	let option = {
+		animation: false, // 取消动画
 		tooltip: {
-			trigger: "item"
+			trigger: "item",
+			// position: ['50%','50%']
 		},
 		title: {
-			text: questionTotal.value,
-			subtext: "安全问题数",
-			x: "24%",
-			y: "center",
+			text: 100,
+			subtext: "累计隐患总数",
+			x: "17%",
+			y: "36%",
 			textAlign: "center",
 			textStyle: {
 				color: "#fff",
@@ -94,63 +130,158 @@ function drawEchart() {
 			},
 			subtextStyle: {
 				color: "#ccc",
-				fontSize: 12,
+				fontSize: 10,
 				fontWeight: "normal"
 				// align: "center"
 			}
 		},
-		legend: {
-			selectedMode: false, // 取消图例上的点击事件
-			icon: "rect",
-			type: "plain",
-			orient: "vertical",
-			left: "50%",
-			top: "40%",
-			align: "left",
-			itemGap: 30,
-			itemWidth: 8, // 设置宽度
-			itemHeight: 7, // 设置高度
-			symbolKeepAspect: false,
-			textStyle: {
-				color: "#000",
-				rich: {
-					name: {
-						verticalAlign: "right",
-						align: "left",
-						fontSize: 14,
-						color: "#FFFFFF"
-					},
-					value: {
-						align: "left",
-						fontSize: 14,
-						color: "#FFFFFF"
+		legend: [
+			{
+				title: "风险图",
+				selectedMode: true, // 取消图例上的点击事件
+				icon: "rect",
+				type: "plain",
+				orient: "vertical",
+				right: "0%",
+				top: "25%",
+				align: "left",
+				itemGap: 14,
+				itemWidth: 8, // 设置宽度
+				itemHeight: 7, // 设置高度
+				symbolKeepAspect: false,
+				textStyle: {
+					color: "#000",
+					rich: {
+						name: {
+							verticalAlign: "right",
+							align: "left",
+							fontSize: 10,
+							color: "#FFFFFF"
+						},
+						value: {
+							align: "left",
+							fontSize: 14,
+							color: "#FFFFFF"
+						},
+						color1: {
+							align: "left",
+							fontSize: 14,
+							color: "#0063C4"
+						},
+						color2: {
+							align: "left",
+							fontSize: 14,
+							color: "#D81E06"
+						},
+						value1: {
+							align: "left",
+							fontSize: 12,
+							color: "#FFFFFF"
+						}
+					}
+				},
+				data: dataList.value.map((item, index) => {
+					if (item.show && index != 4) {
+						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) {
+								if (data == "无") return;
+								let value = dataList.value[i].value;
+								const greatFaultLevelNumJzrRate = Number(dataList.value[i].greatFaultLevelNumJzrRate);
+								let percentage =
+									greatFaultLevelNumJzrRate >= 0
+										? greatFaultLevelNumJzrRate + "%"
+										: greatFaultLevelNumJzrRate.toString().substr(1) + "%";
+
+								const templateString = greatFaultLevelNumJzrRate > 0 ? `color1|↑` : "color2|↓";
+								return "{name| " + data + "}  {gap|  }" + `{value|${value}} {${templateString}} {value1|${percentage}}`;
+							}
+						}
 					}
 				}
 			},
-			data: dataList.value.map(item => {
-				if (item.show) {
-					return item.name;
-				}
-			}),
-			formatter: function (data) {
-				if (dataList.value && dataList.value.length) {
-					for (var i = 0; i < dataList.value.length; i++) {
-						if (data === dataList.value[i].name) {
-							var value = dataList.value[i].value;
-							var percentage = value + "%";
-							return "{name| " + data + "}  {gap|       }" + "{value|" + value + " " + "}";
+			{
+				name: "状态统计（较昨日）",
+				selectedMode: false, // 取消图例上的点击事件
+				icon: "none",
+				type: "plain",
+				orient: "vertical",
+				left: "35%",
+				top: "25%",
+				align: "left",
+				itemGap: 14,
+				itemWidth: 8, // 设置宽度
+				itemHeight: 7, // 设置高度
+				symbolKeepAspect: false,
+				textStyle: {
+					color: "#000",
+					rich: {
+						name: {
+							verticalAlign: "right",
+							align: "left",
+							fontSize: 10,
+							color: "#FFFFFF"
+						},
+						value: {
+							align: "left",
+							fontSize: 14,
+							color: "#FFFFFF"
+						},
+						color1: {
+							align: "left",
+							fontSize: 14,
+							color: "#0063C4"
+						},
+						color2: {
+							align: "left",
+							fontSize: 14,
+							color: "#D81E06"
+						},
+						value1: {
+							align: "left",
+							fontSize: 12,
+							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].rectificationNum;
+								let rectificationName = dataList.value[i].rectificationName;
+								const rectificationNumJzrRate = Number(dataList.value[i].rectificationNumJzrRate);
+								let percentage =
+									rectificationNumJzrRate >= 0
+										? rectificationNumJzrRate.toFixed(2) + "%"
+										: rectificationNumJzrRate.toFixed(2).toString().substr(1) + "%";
+								const templateString = rectificationNumJzrRate > 0 ? `color1|↑` : "color2|↓";
+								// ↓
+								return (
+									"{name| " + rectificationName + "}  {gap|  }" + `{value|${value}} {${templateString}} {value1|${percentage}}`
+								);
+							}
 						}
 					}
 				}
 			}
-		},
+		],
 		series: [
 			// 外侧光线
 			{
 				name: "",
 				type: "gauge",
-				center: ["25%", "55%"],
-				radius: "90%",
+				center: ["18%", "52%"],
+				radius: "88%",
 				startAngle: 235,
 				endAngle: -50,
 				min: 0,
@@ -205,7 +336,7 @@ function drawEchart() {
 			{
 				name: "",
 				type: "gauge",
-				center: ["25%", "55%"],
+				center: ["18%", "52%"],
 				radius: "80%",
 				startAngle: 245,
 				endAngle: -115,
@@ -254,7 +385,7 @@ function drawEchart() {
 				name: "",
 				type: "pie",
 				radius: [65, 75],
-				center: ["25%", "55%"],
+				center: ["18%", "52%"],
 				hoverAnimation: true,
 				itemStyle: {
 					borderRadius: 10,
@@ -277,7 +408,7 @@ function drawEchart() {
 			{
 				type: "pie",
 				radius: ["57", "60"],
-				center: ["25%", "55%"],
+				center: ["18%", "52%"],
 				label: {
 					show: false
 				},
@@ -285,80 +416,124 @@ function drawEchart() {
 			}
 		]
 	};
-// 	let option = {
-//   tooltip: {
-//     trigger: 'item'
-//   },
-//   legend: {
-//     top: '5%',
-//     left: 'center'
-//   },
-//   series: [
-//     {
-//       name: 'Access From',
-//       type: 'pie',
-//       radius: ['40%', '70%'],
-//       avoidLabelOverlap: false,
-//       label: {
-//         show: false,
-//         position: 'center'
-//       },
-//       emphasis: {
-//         label: {
-//           show: true,
-//           fontSize: 40,
-//           fontWeight: 'bold'
-//         }
-//       },
-//       labelLine: {
-//         show: false
-//       },
-//       data: [
-//         { value: 1048, name: 'Search Engine' },
-//         { value: 735, name: 'Direct' },
-//         { value: 580, name: 'Email' },
-//         { value: 484, name: 'Union Ads' },
-//         { value: 300, name: 'Video Ads' }
-//       ]
-//     }
-//   ]
-// };
 	echartsTest.value.setOption(option, true);
 	window.addEventListener("resize", () => {
-		console.log(echartsTest)
 		echartsTest.value.resize();
-	})
-}
+	});
 
-//获取安全管理
-// const safeData = ref(null as any);
-const getSafeInfo = async () => {
-	const res: any = await getProjectInspectRecordCountApi({ projectSn: store.sn });
-	// console.log("获取安全管理", res);
-	// safeData.value = res.result;
-	dataList.value[0].value = res.result.rectificationNum;
-	dataList.value[1].value = res.result.totalNum - res.result.rectificationNum;
-	questionTotal.value = res.result.totalNum;
-	drawEchart();
-};
-//将方法暴露给父组件
-defineExpose({
-	getSafeInfo
-})
+	//图例点击事件
+	// echartsTest.value.on("legendselectchanged", (params: any) => {
+	// 	echartsTest.value.setOption({
+	// 		legend: { selected: { [params.name]: true } }
+	// 	});
+
+	// 	emits("openDialog", {
+	// 		index: 7,
+	// 		title: params.name + "超期未整改",
+	// 		majorInfo: {
+	// 			isOverdueRectification: 1,
+	// 			isNotQualified: 0,
+	// 			enumType: dataList.value.find(item => item.name == params.name)?.enumType,
+	// 			inspectStartTime: dateRange.value[0],
+	// 			inspectEndTime: dateRange.value[1]
+	// 		}
+	// 	});
+	// });
+}
 onMounted(async () => {
-	await getSafeInfo();
-	// window.onresize = function(){
-	// 	if(echartsTest.value){
-	// 		echartsTest.value.resize();
-	// 	}
-	// }
+	drawEchart();
 });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.safetext1 {
+	position: absolute;
+	top: 6%;
+	color: white;
+	left: 42%;
+}
+.safetext2 {
+	position: absolute;
+	top: 6%;
+	color: white;
+	right: 3%;
+}
 .leftTop {
 	width: 100%;
 	height: 100%;
+	.box-content {
+		height: 100%;
+		.contentTop {
+			margin-top: 10px;
+			width: 100%;
+			height: 100%;
+
+			.ctHead {
+				background-color: #002f69;
+				padding-bottom: 5px;
+				color: #fff;
+				height: 13%;
+				font-size: 16px;
+				display: flex;
+				justify-content: center;
+				align-items: flex-end;
+				cursor: pointer;
+
+				text {
+					font-size: 24px;
+					color: #fc4c4c;
+				}
+			}
+
+			.ctContent {
+				height: 68%;
+				// background-color: darkred;
+			}
+		}
+
+		.contentMiddle {
+			width: 100%;
+			height: 100%;
+
+			.cmHead {
+				background-color: #002f69;
+				padding-bottom: 5px;
+				color: #fff;
+				height: 13%;
+				font-size: 16px;
+				display: flex;
+				justify-content: center;
+				align-items: flex-end;
+				margin-top: 1%;
+				cursor: pointer;
+
+				text {
+					font-size: 24px;
+					color: #0db027;
+				}
+			}
+		}
+	}
+}
+.notoDta {
+	top: 25%;
+	width: 50%;
+	// left: 40%;
+	position: absolute;
+	text-align: center;
+	left: 50%;
+	transform: translateX(-50%);
+
+	img {
+		width: 40%;
+		margin: 5% 30%;
+	}
+
+	p {
+		color: #fff;
+		font-size: calc(100vw * 14 / 1920);
+		margin: -6% 30%;
+	}
 }
 ::v-deep .h-card .content {
 	height: 80%;