flx：对接总览大屏审批数据汇总数据看板审批数据汇总和进度概况轮询

2024-06-17 18:16:19 +08:00 · 2024-06-17 18:16:19 +08:00 · b81ae01ab6
commit b81ae01ab6
parent 255fdd1d6e
7 changed files with 614 additions and 249 deletions
--- a/.env.development
+++ b/.env.development
@ -3,8 +3,8 @@ NODE_ENV = 'development'

 # 本地环境接口地址(/api/index.ts文件中使用)
 # 后端本地
-# VITE_API_URL = 'http://192.168.34.221:19111'
-VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
+VITE_API_URL = 'http://192.168.34.155:19111'
+# VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
 # 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'
--- a/src/api/modules/agjtOverviewApi.ts
+++ b/src/api/modules/agjtOverviewApi.ts
@ -15,3 +15,12 @@ export const videoHkVqdcountQualityApi = (params: {}, showLoading: boolean) => {
 export const videoFullCountFullApi = (params: {}, showLoading: boolean) => {
 	return http.post(BASEURL + `/xmgl/xzHikvisionVideoFull/countFull`, params, { headers: { noLoading: showLoading } });
 };
+
+// 审批数据汇总
+export const getStatByStateApi = (params: {}, showLoading: boolean) => {
+	return http.get(BASEURL + `/xmgl/xzFlow/getStatByState`, params, { headers: { noLoading: showLoading } });
+};
+
+export const getStatDetailByStateApi = (params: {}, showLoading: boolean) => {
+	return http.get(BASEURL + `/xmgl/xzFlow/getStatDetailByState`, params, { headers: { noLoading: showLoading } });
+};
--- a/src/config/config.ts
+++ b/src/config/config.ts
@ -29,9 +29,9 @@ 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 = "agjtCommand"; //鞍钢集团指挥部大屏
 // export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏
-// export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览
+export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览
 // export const COMPANY: string = "slx"; //苏立信项目
 // export const COMPANY: string = "hfqc"; //合肥启程项目
 // export const COMPANY: string = "jsyc"; // 江苏盐城项目
--- 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/overviewScreen/indexCommand.vue"), //总览大屏
+		component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏
 		// component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
 		// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
 		children: [
--- a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftBottom.vue
+++ b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftBottom.vue
@ -1,92 +1,140 @@
+s
 <template>
-	<div class="leftTop">
-		<Card title="进度概况">
-			<div class="box-content">
-				<div class="top-content">
-					<div class="top-content-left">
-						项目总进度
-						<span v-if="!projectData?.totalProgress" class="dayImg">0</span>
-						<span v-else class="dayImg" v-for="item in projectData?.totalProgress" :key="item">{{ item }}</span>
-						<span style="margin-left: 4%">%</span>
+	<div class="leftBottom">
+		<div class="content" style="backgound: black">
+			<Card title="进度概况">
+				<div class="cbLine1">
+					<div style="display: flex">
+						<span>项目总进度:</span>
+						<div class="numberCard" v-for="(item, i) in projectTotalProgress" :key="i">
+							{{ item }}
+						</div>
+						<span style="margin-left: 5px">%</span>
 					</div>
-					<div class="top-content-right">
-						项目剩余天数
-						<span v-if="!projectData?.projectRestDayNum" class="dayImg">0</span>
-						<span v-else class="dayImg" v-for="item in projectData?.projectRestDayNum" :key="item">{{ item }}</span>
-						<span style="margin-left: 4%">天</span>
+					<div style="display: flex">
+						<span style="margin-left: 15px">项目剩余天数</span>
+						<div class="numberCard" v-for="(item, i) in projectSurplusDayNum" :key="i">
+							{{ item }}
+						</div>
+						<span style="margin-left: 5px">天</span>
 					</div>
 				</div>
-				<div class="bottom-content">
-					<el-scrollbar class="list-box">
-						<div class="bottom-content-item" v-for="(item, index) in topRank" :key="index">
-							<div v-if="index < 2" class="item-one-style" :class="'item-one-style' + (index + 1)">Top{{ index + 1 }}</div>
-							<div v-else class="item-one-style item-one-style3">Top{{ index + 1 }}</div>
-							<div class="item-two-style">
-								<div class="two-part-one">
-									<span>{{ item.enterpriseName }}</span>
-									<span>{{ item.changeAfter || 0 }}%</span>
+				<div class="cbProcess" v-if="processList.length >= 5">
+					<!-- v-if="listData.length>0" :list="listData"  -->
+					<vue3-seamless-scroll
+						v-if="processList.length > 0"
+						:list="processList"
+						:speed="1"
+						:limitScrollNum="5"
+						:step="0.3"
+						:hover="true"
+						class="scroll"
+					>
+						<div class="pItem" v-for="(item, i) in processList" :key="i">
+							<div class="pLeft">
+								<span :class="['plInner', 'plBgc' + ((i + 1) % 12)]">
+									<span style="margin-left: 10px">Top{{ i + 1 }}</span>
+								</span>
+							</div>
+							<div class="pRight">
+								<div class="prTop">
+									<div class="prtLeft">{{ item.enterpriseName }}</div>
+									<div class="prtRight">{{ item.changeAfter }}%</div>
 								</div>
-								<div class="two-part-two">
-									<div class="bg-progress"></div>
-									<div
-										v-if="index < 2"
-										class="finished-progress"
-										:class="'finished-progress' + (index + 1)"
-										:style="{ width: item.changeAfter + '%' }"
-									></div>
-									<div
-										v-else
-										class="finished-progress finished-progress3"
-										:style="{ width: item.changeAfter + '%' }"
-									></div>
-									<div class="finished-point" :class="'finished-point' + (index + 1)" :style="{ left: item.changeAfter + '%' }"></div>
+								<div class="prBottom">
+									<div class="processLineBg">
+										<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item.changeAfter + '%' }">
+											<div class="processLineBtn"></div>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
-					</el-scrollbar>
+					</vue3-seamless-scroll>
 				</div>
+				<div class="cbProcess" v-else-if="processList.length == 0">
+					<div class="notoDta" v-if="processList.length == 0">
+						<img src="@/assets/images/noData.png" alt="" />
+						<p>暂无数据</p>
+					</div>
+				</div>
+				<div class="cbProcess" v-else>
+					<!-- v-if="listData.length>0" :list="listData"  -->
+					<!-- <vue3-seamless-scroll 
+							v-if="processList.length>0" :list="processList" 
+								:speed="1" :limitScrollNum="5" :step="0.3" :hover="true" class="scroll"> -->
+					<div class="pItem" v-for="(item, i) in processList" :key="i">
+						<div class="pLeft">
+							<span :class="['plInner', 'plBgc' + ((i + 1) % 12)]">
+								<span style="margin-left: 10px">Top{{ i + 1 }}</span>
+							</span>
+						</div>
+						<div class="pRight">
+							<div class="prTop">
+								<div class="prtLeft">{{ item.enterpriseName }}</div>
+								<div class="prtRight">{{ item.changeAfter }}%</div>
+							</div>
+							<div class="prBottom">
+								<div class="processLineBg">
+									<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item.changeAfter + '%' }">
+										<div class="processLineBtn"></div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- </vue3-seamless-scroll> -->
+				</div>
+			</Card>
+		</div>
+		<!-- <div class="content">
+			<div class="centerBottom">
+				<div class="cbTop"></div>
 			</div>
-		</Card>
+		</div> -->
 	</div>
 </template>

 <script setup lang="ts">
+import { onMounted, ref } from "vue";
 import Card from "@/components/card.vue";
-import { ref, onMounted, watch } from "vue";
+import * as echarts from "echarts";
+// import ECharts from "vue-echarts";
 import { getCountTaskProgressApi, queryCountEnterpriseApi } from "@/api/modules/agjtCommandApi";
+// import type { TabsPaneContext, ElMessageBox } from "element-plus";
+// import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 import { GlobalStore } from "@/stores";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 const store = GlobalStore();
-const projectData = ref({
-	totalProgress: "180",
-	projectRestDayNum: "180"
-});
-const topRank = ref([
-	{
-		enterpriseName: "广东省某某科技有限公司(东北厂区)",
-		changeAfter: 70
-	},
-	{
-		enterpriseName: "广州市某公司名称(东北厂区)",
-		changeAfter: 65
-	},
-	{
-		enterpriseName: "企业名称(东北厂区)",
-		changeAfter: 60
-	},
-	{
-		enterpriseName: "这里是第四名企业名称(东北厂区)",
-		changeAfter: 55
-	},
-	{
-		enterpriseName: "这里是第四名企业名称(东北厂区)",
-		changeAfter: 55
-	},
-	{
-		enterpriseName: "这里是第四名企业名称(东北厂区)",
-		changeAfter: 55
-	}
-]);
-// 项目进度情况
+// const activeName = ref("总包出勤情况分析");
+// const activeIndex = ref("0" as any);
+//进度数据
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+let listData = ref([
+	{ a: "新地能源工程技术有限公司", b: "54" },
+	{ a: "中冶沈勘秦皇岛工程设计研究总院有限公司", b: "23" },
+	{ a: "鞍山电力实业有限公司", b: "49" },
+	{ a: "鞍钢矿业资源利用（鞍山）有限公司", b: "35" },
+	{ a: "上海建工五建集团有限公司", b: "34" },
+	{ a: "辽宁普凡建设有限公司", b: "67" },
+	{ a: "沈阳隆基电磁科技股份有限公司", b: "56" },
+	{ a: "中国科学院过程工程研究所", b: "78" },
+	{ a: "宏大爆破工程集团有限责任公司", b: "45" },
+	{ a: "鞍钢集团矿业设计研究院有限公司", b: "23" },
+	{ a: "辽宁电力能源发展集团监理有限公司鞍山分公司", b: "69" },
+	{ a: "辽宁五寰特种材料与智能装备产业技术研究院有限公司", b: "27" },
+	{ a: "中铝山东工程技术有限公司", b: "59" },
+	{ a: "中国华冶科工集团有限公司", b: "14" },
+	{ a: "沈阳岩土工程技术测试开发有限公司", b: "38" },
+	{ a: "永明项目管理有限公司", b: "41" }
+] as any);
+
+// 进度情况分析
+// 项目总进度
+let projectTotalProgress = ref("" as any);
+// 项目剩余天数
+let projectSurplusDayNum = ref({} as any);
+// 获取项目总进度/项目剩余天数
 const getCountTaskProgress = async (showLoading: boolean) => {
 	const res: any = await getCountTaskProgressApi(
 		{
@ -95,11 +143,13 @@ const getCountTaskProgress = async (showLoading: boolean) => {
 		showLoading
 	);
 	if (res.result) {
-		console.log(res.result, "项目剩余天数");
-		projectData.value.totalProgress = res.result.projectTotalProgress + "";
-		projectData.value.projectRestDayNum = res.result.projectSurplusDayNum + "";
+		console.log("项目总进度/项目剩余天数", res);
+		projectTotalProgress.value = res.result.projectTotalProgress + "";
+		projectSurplusDayNum.value = res.result.projectSurplusDayNum + "";
 	}
 };
+// 总包进度列表
+let processList = ref([] as any);
 // 获取总包进度列表
 const queryCountEnterprise = async (showLoading: boolean) => {
 	const res: any = await queryCountEnterpriseApi(
@ -110,143 +160,164 @@ const queryCountEnterprise = async (showLoading: boolean) => {
 		showLoading
 	);
 	if (res.result) {
-		console.log(res.result, "总包项目进度");
-		topRank.value = res.result;
+		console.log("总包进度列表", res);
+		processList.value = res.result;
+		// processList.value = [
+		// 	{
+		// 		enterpriseName: "广东省某某科技有限公司(东北厂区)",
+		// 		changeAfter: 70
+		// 	},
+		// 	{
+		// 		enterpriseName: "广州市某公司名称(东北厂区)",
+		// 		changeAfter: 65
+		// 	},
+		// 	{
+		// 		enterpriseName: "企业名称(东北厂区)",
+		// 		changeAfter: 60
+		// 	},
+		// 	{
+		// 		enterpriseName: "这里是第四名企业名称(东北厂区)",
+		// 		changeAfter: 55
+		// 	}
+		// ];
 	}
 };
-onMounted(() => {
-	getCountTaskProgress(true);
-	queryCountEnterprise(true);
+
+const setIntervalFn = (showLoading: boolean) => {
+	getCountTaskProgress(showLoading);
+	queryCountEnterprise(showLoading);
+};
+onMounted(async () => {
+	setIntervalFn(false);
+	// 定时三十秒刷新
+	setInterval(() => {
+		setIntervalFn(true);
+	}, 30000);
 });
 </script>

 <style lang="scss" scoped>
-.leftTop {
-	width: 100%;
+:deep(.h-card .content) {
+	height: 79%;
+	padding: 10px 10px;
+	margin-top: 1%;
+	overflow: hidden;
+}
+.leftBottom {
+	// background: url("@/assets/images/commandScreen/card-left-bottom.png") no-repeat;
+	// background-size: 100% 100%;
 	height: 100%;
-	display: flex;
-	.box-content {
+
+	.content {
+		// background-color: darkred;
 		height: 100%;
-		.top-content {
+		// background: url("@/assets/images/overviewScreen/card-content.png") no-repeat;
+		// background-size: 100% 100%;
+		margin-top: 11px;
+		// margin: 10px 20px;
+		position: relative;
+
+		.cbLine1 {
+			color: #fff;
+			padding-top: 5px;
 			display: flex;
-			align-items: center;
 			justify-content: space-between;
-			margin: 0 2%;
-			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;
-				}
+			align-items: center;
+			line-height: 30px;
+			height: 30px;
+			font-size: 15px;
+
+			.numberCard {
+				font-size: 15px;
+				padding: 0 8px;
+				margin-left: 3px;
+				font-weight: bold;
+				color: #47bcec;
+				background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
+				background-size: 100% 100%;
 			}
 		}
-		.bottom-content {
-			margin: 0 2%;
-			margin-top: 6%;
-			height: 66%;
-			.list-box{
-				height: 100%;
-			}
-			&-item:not(:last-child) {
-				margin-bottom: 3%;
-			}
-			&-item {
+
+		.cbProcess {
+			// padding-top: 5px;
+			// height: calc(100% - 55px);
+			overflow: hidden;
+
+			// background-color: #fff;
+			.pItem {
+				width: 100%;
+				height: 55px;
 				display: flex;
-				align-items: center;
-				.item-one-style {
-					width: 60px;
-					height: 20px;
-					font-family: ABeeZee, ABeeZee;
-					font-weight: 400;
-					font-size: 14px;
-					color: #e3e9f3;
-					border-radius: 10px;
-					line-height: 20px;
-					text-align: center;
-				}
-				.item-one-style1 {
-					background: linear-gradient(90deg, #e24a3b 0%, rgba(226, 74, 59, 0) 100%);
-				}
-				.item-one-style2 {
-					background: linear-gradient(90deg, #c9b217 0%, rgba(201, 178, 23, 0) 100%);
-				}
-				.item-one-style3 {
-					background: linear-gradient(90deg, #3877f2 0%, rgba(56, 119, 242, 0) 100%);
-				}
-				.item-one-style4 {
-					background: linear-gradient(90deg, #3877f2 0%, rgba(56, 119, 242, 0) 100%);
-				}
-				.item-two-style {
-					flex: 1;
+				// background-color: #fff;
+				font-size: 13px;
+				color: #fff;
+
+				.pLeft {
+					width: 20%;
+					height: 55px;
 					display: flex;
-					flex-direction: column;
-					color: white;
-					margin-left: 2%;
-					.two-part-one {
+					justify-content: center;
+					align-items: center;
+
+					.plInner {
+						width: 80px;
+						// text-align: center;
+						line-height: 30px;
+						// background-color: darkred;
+						border-radius: 100px;
+					}
+				}
+
+				.pRight {
+					width: 80%;
+					height: 55px;
+
+					.prTop {
+						// background-color: darkblue;
 						display: flex;
-						align-items: center;
 						justify-content: space-between;
-						> span:nth-child(1) {
-							font-family: ABeeZee, ABeeZee;
-							font-weight: 400;
-							font-size: 14px;
-							color: #e3e9f3;
+						height: 30px;
+
+						.prtLeft {
+							display: flex;
+							justify-content: center;
+							align-items: flex-end;
 						}
-						> span:nth-child(2) {
-							font-family: ABeeZee, ABeeZee;
-							font-weight: 400;
-							font-size: 18px;
-							color: #eaeef5;
+
+						.prtRight {
+							display: flex;
+							justify-content: center;
+							align-items: flex-end;
 						}
 					}
-					.two-part-two {
-						position: relative;
-						.bg-progress {
-							position: absolute;
-							top: 3px;
-							left: 0;
-							width: 100%;
-							height: 3px;
-							background: #ffffff;
-							opacity: 0.2;
-						}
-						.finished-progress {
-							position: absolute;
-							top: 3px;
-							left: 0;
-							height: 3px;
-							z-index: 10;
-						}
-						.finished-progress1 {
-							background: linear-gradient(270deg, #e24a3b 0%, rgba(226, 74, 59, 0) 100%);
-						}
-						.finished-progress2 {
-							background: linear-gradient(270deg, #c9b217 0%, rgba(201, 178, 23, 0) 100%);
-						}
-						.finished-progress3 {
-							background: linear-gradient(270deg, #3877f2 0%, rgba(56, 119, 242, 0) 100%);
-						}
-						.finished-progress4 {
-							background: linear-gradient(270deg, #3877f2 0%, rgba(56, 119, 242, 0) 100%);
-						}
-						.finished-point {
-							position: absolute;
-							top: 1px;
-							width: 3px;
-							height: 7px;
-							background: #ffffff;
+
+					.prBottom {
+						// background-color: purple;
+						height: 15px;
+
+						.processLineBg {
+							background-color: rgba(50, 50, 50, 0.5);
+
+							// transform: scaleX(-1);
+							.processLine {
+								margin-top: 10px;
+								// padding-top: 10px;
+								height: 5px;
+								display: flex;
+								justify-content: flex-end;
+
+								.processLineBtn {
+									width: 3px;
+									height: 9px;
+									background: #fff;
+									transform: translateY(-2px);
+								}
+							}
+
+							// .plBgc1{
+							// 	background: rgb(150,0,0);
+							// 	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(150,0,0,1) 100%);
+							// }
 						}
 					}
 				}
@ -254,7 +325,151 @@ onMounted(() => {
 		}
 	}
 }
-::v-deep .h-card .content {
-	height: 80%;
+
+.scroll {
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+}
+
+.notoDta {
+	top: 35%;
+	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%;
+	}
+}
+
+.plBgc1 {
+	background: rgb(139, 0, 0);
+	background: linear-gradient(90deg, rgba(139, 0, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
+}
+
+.plBtnBgc1 {
+	background: rgb(139, 0, 0);
+	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 0, 1) 100%);
+}
+
+.plBgc2 {
+	background: rgb(155, 155, 0);
+	background: linear-gradient(90deg, rgba(155, 155, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
+}
+
+.plBtnBgc2 {
+	background: rgb(155, 155, 0);
+	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(155, 155, 0, 1) 100%);
+}
+
+.plBgc3 {
+	background: rgb(0, 0, 139);
+	background: linear-gradient(90deg, rgba(0, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
+}
+
+.plBtnBgc3 {
+	background: rgb(0, 0, 139);
+	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 0, 139, 1) 100%);
+}
+
+.plBgc4 {
+	background: rgb(139, 0, 139);
+	background: linear-gradient(90deg, rgba(139, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
+}
+
+.plBtnBgc4 {
+	background: rgb(139, 0, 139);
+	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 139, 1) 100%);
+}
+
+.plBgc5 {
+	background: rgb(72, 61, 139);
+	background: linear-gradient(90deg, rgba(72, 61, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
+}
+
+.plBtnBgc5 {
+	background: rgb(72, 61, 139);
+	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(72, 61, 139, 1) 100%);
+}
+
+.plBgc6 {
+	background: rgb(0, 206, 209);
+	background: linear-gradient(90deg, rgba(0, 206, 209, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
+}
+
+.plBtnBgc6 {
+	background: rgb(0, 206, 209);
+	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 206, 209, 1) 100%);
+}
+
+.plBgc7 {
+	background: rgb(47, 79, 79);
+	background: linear-gradient(90deg, rgba(47, 79, 79, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
+}
+
+.plBtnBgc7 {
+	background: rgb(47, 79, 79);
+	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(47, 79, 79, 1) 100%);
+}
+
+.plBgc8 {
+	background: rgb(0, 100, 0);
+	background: linear-gradient(90deg, rgba(0, 100, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
+}
+
+.plBtnBgc8 {
+	background: rgb(0, 100, 0);
+	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 100, 0, 1) 100%);
+}
+
+.plBgc9 {
+	background: rgb(189, 183, 107);
+	background: linear-gradient(90deg, rgba(189, 183, 107, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
+}
+
+.plBtnBgc9 {
+	background: rgb(189, 183, 107);
+	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(189, 183, 107, 1) 100%);
+}
+
+.plBgc10 {
+	background: rgb(255, 140, 0);
+	background: linear-gradient(90deg, rgba(255, 140, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
+}
+
+.plBtnBgc10 {
+	background: rgb(255, 140, 0);
+	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(255, 140, 0, 1) 100%);
+}
+
+.plBgc11 {
+	background: rgb(233, 150, 122);
+	background: linear-gradient(90deg, rgba(233, 150, 122, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
+}
+
+.plBtnBgc11 {
+	background: rgb(233, 150, 122);
+	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(233, 150, 122, 1) 100%);
+}
+
+.plBgc0 {
+	background: rgb(0, 139, 139);
+	background: linear-gradient(90deg, rgba(0, 139, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
+}
+
+.plBtnBgc0 {
+	background: rgb(0, 139, 139);
+	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 139, 139, 1) 100%);
 }
 </style>
--- a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftCenter.vue
+++ b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftCenter.vue
@ -6,7 +6,7 @@
 				<div id="echartsDataCountOne" style="width: 100%; height: 100%"></div>
 			</div>
 			<div class="box-content" v-show="!showOne">
-				<div class="change-echart" @click="showOne = true;">
+				<div class="change-echart" @click="showOne = true">
 					<el-icon color="#54B5E9" size="22"><ArrowLeft /></el-icon>
 					<span>返回</span>
 				</div>
@ -20,7 +20,8 @@
 import Card from "@/components/card.vue";
 import { GlobalStore } from "@/stores";
 import { COMPANY } from "@/config/config";
-import { ref, onMounted, nextTick } from "vue";
+import { ref, onMounted, nextTick, reactive } from "vue";
+import { getStatByStateApi, getStatDetailByStateApi } from "@/api/modules/agjtOverviewApi";
 import { getPersonTypeAndEduStatisticsApi } from "@/api/modules/labor";
 import * as echarts from "echarts";
 const store = GlobalStore();
@ -101,6 +102,17 @@ let dataList = ref([
 		}
 	}
 ]);
+const stateInfo = reactive({
+	dataInfo: {
+		passed: 0,
+		rejected: 0,
+		underApproval: 0
+	},
+	dataDetail: {
+		num: 0,
+		name: "待审批"
+	}
+});
 // 审批数据汇总图形
 const drawOneEchart = () => {
 	const echartsOne = echarts.init(document.getElementById("echartsDataCountOne"));
@ -113,14 +125,16 @@ const drawOneEchart = () => {
 			{
 				name: "Access From",
 				type: "pie",
-				radius: ["40%", "70%"],
+				top: "2%",
+				radius: ["35%", "60%"],
 				avoidLabelOverlap: false,
+				minAngle: 35,
 				label: {
 					padding: [0, -50],
 					lineHeight: 30,
 					color: "#0FD4F1",
 					show: true,
-					position: "outside", // 标签位置，'outside' 表示标签在扇形外侧
+					// position: "outside", // 标签位置，'outside' 表示标签在扇形外侧
 					formatter: "{c|{c}}\n{b|{b}}", // 标签文本格式器，{b} 显示名称，{c} 数据值
 					rich: {
 						b: {
@ -146,9 +160,9 @@ const drawOneEchart = () => {
 					length2: 80 // 第二段标签线长度，默认为长度
 				},
 				data: [
-					{ value: 1048, name: "审批中" },
-					{ value: 735, name: "已驳回" },
-					{ value: 580, name: "已通过" }
+					{ value: stateInfo.dataInfo.underApproval, name: "审批中" },
+					{ value: stateInfo.dataInfo.rejected, name: "已驳回" },
+					{ value: stateInfo.dataInfo.passed, name: "已通过" }
 				]
 			}
 		]
@ -161,14 +175,19 @@ const drawOneEchart = () => {

 	//图例点击事件
 	// 为饼图添加点击事件
-	echartsOne.on("click", function (params:any) {
+	echartsOne.on("click", function (params: any) {
 		// 控制台输出点击的数据的信息
-		console.log(params,666);
+		console.log(params, 666);
 		typeData.value = params.data;
 		showOne.value = false;
+		const obj = {
+			审批中: "RUNNING",
+			已驳回: "REFUSE",
+			已通过: "PASS"
+		} as any;
 		nextTick(() => {
-			drawTwoEchart();
-		})
+			getStatDetailByState(false, obj[params.name]);
+		});
 		// 您可以在这里添加您的逻辑代码
 		// 例如：弹出自定义的对话框或者执行其他操作
 	});
@ -183,8 +202,8 @@ const drawTwoEchart = () => {
 			trigger: "item"
 		},
 		title: {
-			text: typeData.value.value,
-			subtext: typeData.value.name,
+			text: stateInfo.dataDetail.num,
+			subtext: stateInfo.dataDetail.name,
 			x: "29%",
 			y: "40%",
 			textAlign: "center",
@ -208,23 +227,26 @@ const drawTwoEchart = () => {
 				title: "风险图",
 				selectedMode: true, // 取消图例上的点击事件
 				icon: "circle",
-				type: "plain",
+				// type: "plain",
 				orient: "vertical",
-				right: "10%",
-				top: "22%",
+				type: "scroll", //legend要多，进行分页处理
+				right: "3%",
+				top: "20%",
+				// bottom: "12%",
 				align: "left",
-				itemGap: 14,
-				itemWidth: 8, // 设置宽度
-				itemHeight: 15, // 设置高度
+				itemGap: 10,
+				itemWidth: 30, // 设置宽度
+				itemHeight: 9, // 设置高度
 				symbolKeepAspect: false,
 				textStyle: {
+					width: 150,
 					color: "#000",
 					rich: {
 						name: {
 							align: "left",
 							fontSize: 14,
-							color: "#9BB7D4",
-							width: 60
+							color: "#9BB7D4"
+							// width: 60
 						},
 						value: {
 							align: "left",
@ -249,11 +271,7 @@ const drawTwoEchart = () => {
 							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) + "%";
+								let percentage = dataList.value[i].percentage + "%";
 								return "{name| " + data + "}  {gap|  }" + `{value|${value}} {gap|  } {value1|${percentage}}`;
 							}
 						}
@ -472,8 +490,64 @@ const drawTwoEchart = () => {
 		echartsOne.resize();
 	});
 };
-onMounted(async () => {
+// 获取审批数据汇总
+const getStatByState = async (showLoading: boolean) => {
+	const res: any = await getStatByStateApi(
+		{
+			projectSn: store.sn
+		},
+		showLoading
+	);
+	if (res.result) {
+		console.log("审批数据汇总", res);
+		stateInfo.dataInfo = res.result;
+	}
 	drawOneEchart();
+};
+// 获取审批数据汇总详情
+const getStatDetailByState = async (showLoading: boolean, state: string) => {
+	const res: any = await getStatDetailByStateApi(
+		{
+			projectSn: store.sn,
+			state: state
+		},
+		showLoading
+	);
+	if (res.result) {
+		console.log("审批数据汇总详情", res);
+		stateInfo.dataDetail = res.result[0];
+		const colorList = ["#59F7CA", "#62F2F8", "#F2BA48", "#81C4E5", "#FDFDFC"];
+		dataList.value = res.result
+			.map((item: any, index: number) => {
+				if (index == 0) return;
+				return {
+					enumType: "",
+					percentage: item.ratio,
+					value: item.num,
+					show: true,
+					name: item.name,
+					greatFaultLevelNumJzrRate: "",
+					rectificationNum: "",
+					rectificationNumJzrRate: "",
+					rectificationName: "",
+					itemStyle: {
+						color: colorList[index]
+					}
+				};
+			})
+			.filter((item: any) => item);
+	}
+	drawTwoEchart();
+};
+const setIntervalFn = (showLoading: boolean) => {
+	getStatByState(showLoading);
+};
+onMounted(async () => {
+	setIntervalFn(false);
+	// 定时三十秒刷新
+	setInterval(() => {
+		setIntervalFn(true);
+	}, 30000);
 });
 </script>

--- a/src/views/overviewScreen/commandCenter/leftBottom.vue
+++ b/src/views/overviewScreen/commandCenter/leftBottom.vue
@ -126,6 +126,7 @@ import { onMounted, ref, reactive, nextTick } from "vue";
 import Card from "@/components/card.vue";
 import * as echarts from "echarts";
 // import ECharts from "vue-echarts";
+import { getStatByStateApi, getStatDetailByStateApi } from "@/api/modules/agjtOverviewApi";
 import { getPersonTypeAndEduStatisticsApi, getCountTaskProgressApi, queryCountEnterpriseApi } from "@/api/modules/agjtCommandApi";
 // import type { TabsPaneContext, ElMessageBox } from "element-plus";
 // import * as ElementPlusIconsVue from "@element-plus/icons-vue";
@ -162,6 +163,17 @@ const getPersonTypeAndEduStatistics = async (showLoading: boolean) => {
 const drawInfo = reactive({
 	isFlag: false
 });
+const stateInfo = reactive({
+	dataInfo: {
+		passed: 0,
+		rejected: 0,
+		underApproval: 0
+	},
+	dataDetail: {
+		num: 0,
+		name: "待审批"
+	}
+});
 //绘画柱状图
 function drawBar() {
 	console.log("---------------------bar--------");
@ -176,14 +188,15 @@ function drawBar() {
 			{
 				name: "Access From",
 				type: "pie",
-				radius: ["40%", "70%"],
+				radius: ["35%", "60%"],
 				avoidLabelOverlap: false,
+				minAngle: 35,
 				label: {
 					padding: [0, -50],
 					lineHeight: 30,
 					color: "#0FD4F1",
 					show: true,
-					position: "outside", // 标签位置，'outside' 表示标签在扇形外侧
+					// position: "outside", // 标签位置，'outside' 表示标签在扇形外侧
 					formatter: "{c|{c}}\n{b|{b}}", // 标签文本格式器，{b} 显示名称，{c} 数据值
 					rich: {
 						b: {
@ -209,9 +222,9 @@ function drawBar() {
 					length2: 80 // 第二段标签线长度，默认为长度
 				},
 				data: [
-					{ value: 1048, name: "审批中" },
-					{ value: 735, name: "已驳回" },
-					{ value: 580, name: "已通过" }
+					{ value: stateInfo.dataInfo.underApproval, name: "审批中" },
+					{ value: stateInfo.dataInfo.rejected, name: "已驳回" },
+					{ value: stateInfo.dataInfo.passed, name: "已通过" }
 				]
 			}
 		]
@ -225,8 +238,13 @@ function drawBar() {
 	echartsTest.on("click", (params: any) => {
 		console.log(params, params.name);
 		drawInfo.isFlag = true;
+		const obj = {
+			审批中: "RUNNING",
+			已驳回: "REFUSE",
+			已通过: "PASS"
+		} as any;
 		nextTick(() => {
-			drawBar2();
+			getStatDetailByState(false, obj[params.name]);
 		});
 		// echartsTest.setOption({
 		// 	legend: { selected: { [params.name]: true } }
@ -318,8 +336,8 @@ function drawBar2() {
 			trigger: "item"
 		},
 		title: {
-			text: "9900",
-			subtext: "待审批",
+			text: stateInfo.dataDetail.num,
+			subtext: stateInfo.dataDetail.name,
 			x: "29%",
 			y: "40%",
 			textAlign: "center",
@ -343,23 +361,26 @@ function drawBar2() {
 				title: "风险图",
 				selectedMode: true, // 取消图例上的点击事件
 				icon: "circle",
-				type: "plain",
+				// type: "plain",
 				orient: "vertical",
-				right: "10%",
-				top: "22%",
+				type: "scroll", //legend要多，进行分页处理
+				right: "2%",
+				top: "20%",
+				// bottom: "12%",
 				align: "left",
-				itemGap: 14,
-				itemWidth: 8, // 设置宽度
-				itemHeight: 15, // 设置高度
+				itemGap: 10,
+				itemWidth: 30, // 设置宽度
+				itemHeight: 9, // 设置高度
 				symbolKeepAspect: false,
 				textStyle: {
+					width: 150,
 					color: "#000",
 					rich: {
 						name: {
 							align: "left",
 							fontSize: 14,
-							color: "#9BB7D4",
-							width: 60
+							color: "#9BB7D4"
+							// width: 60
 						},
 						value: {
 							align: "left",
@ -384,11 +405,7 @@ function drawBar2() {
 							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) + "%";
+								let percentage = dataList.value[i].percentage + "%";
 								return "{name| " + data + "}  {gap|  }" + `{value|${value}} {gap|  } {value1|${percentage}}`;
 							}
 						}
@ -682,8 +699,58 @@ const queryCountEnterprise = async (showLoading: boolean) => {
 		// ];
 	}
 };
-const setIntervalFn = (showLoading: boolean) => {
+
+// 获取审批数据汇总
+const getStatByState = async (showLoading: boolean) => {
+	const res: any = await getStatByStateApi(
+		{
+			projectSn: store.sn
+		},
+		showLoading
+	);
+	if (res.result) {
+		console.log("审批数据汇总", res);
+		stateInfo.dataInfo = res.result;
+	}
 	drawBar();
+};
+// 获取审批数据汇总详情
+const getStatDetailByState = async (showLoading: boolean, state: string) => {
+	const res: any = await getStatDetailByStateApi(
+		{
+			projectSn: store.sn,
+			state: state
+		},
+		showLoading
+	);
+	if (res.result) {
+		console.log("审批数据汇总详情", res);
+		stateInfo.dataDetail = res.result[0];
+		const colorList = ["#59F7CA", "#62F2F8", "#F2BA48", "#81C4E5", "#FDFDFC"];
+		dataList.value = res.result
+			.map((item: any, index: number) => {
+				if (index == 0) return;
+				return {
+					enumType: "",
+					percentage: item.ratio,
+					value: item.num,
+					show: true,
+					name: item.name,
+					greatFaultLevelNumJzrRate: "",
+					rectificationNum: "",
+					rectificationNumJzrRate: "",
+					rectificationName: "",
+					itemStyle: {
+						color: colorList[index]
+					}
+				};
+			})
+			.filter((item: any) => item);
+	}
+	drawBar2();
+};
+const setIntervalFn = (showLoading: boolean) => {
+	getStatByState(showLoading);
 	getPersonTypeAndEduStatistics(showLoading);
 	getCountTaskProgress(showLoading);
 	queryCountEnterprise(showLoading);