From e64d92cc6450d83d970c1ca13f1d0a43562d83a9 Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Wed, 12 Jun 2024 18:15:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B9=E7=9B=AE=E7=9C=8B=E6=9D=BF?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E9=A1=B5=E9=9D=A2=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectOverview/leftBottom.vue            | 224 +++++++++++++-----
 .../projectOverview/leftCenter.vue            |  28 +--
 2 files changed, 173 insertions(+), 79 deletions(-)

diff --git a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftBottom.vue b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftBottom.vue
index 887e602..275e8a9 100644
--- a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftBottom.vue
+++ b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftBottom.vue
@@ -1,18 +1,36 @@
 <template>
 	<div class="leftTop">
-		<Card title="智能设备">
-			<div class="deviceData">
-				<div class="deviceDataA">
-					<div class="num">
-						<i>{{ statisticsCount.devcount.ufaceDevNum || 0 }}</i>
+		<Card title="进度概况">
+			<div class="box-content">
+				<div class="top-content">
+					<div class="top-content-left">
+						项目总进度
+						<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 class="top-content-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 class="text">实名制设备数</div>
 				</div>
-				<div class="deviceDataB">
-					<div class="num">
-						<i>{{ statisticsCount.devcount.environmentDevNum || 0 }}</i>
+				<div class="bottom-content">
+					<div class="bottom-content-item" v-for="(item,index) in topRank" :key="index">
+						<div class="item-one-style" :class="'item-one-style' + (index + 1)">Top{{ index + 1 }}</div>
+						<div class="item-two-style">
+							<div class="two-part-one">
+								<span>{{item.name}}</span>
+								<span>{{item.percent || 0}}%</span>
+							</div>
+							<div class="two-part-two">
+								<div class="bg-progress"></div>
+								<div class="finished-progress" :class="'finished-progress' + (index + 1)" :style="{width: item.percent + '%'}"></div>
+								<div class="finished-point" :class="'finished-point' + (index + 1)" :style="{left: item.percent + '%'}"></div>
+							</div>
+						</div>
 					</div>
-					<div class="text">环境设备数</div>
 				</div>
 			</div>
 		</Card>
@@ -32,21 +50,27 @@ const props = withDefaults(defineProps<Props>(), {
 		devcount: {}
 	}
 });
-// 人员概况数据
-const statisticsCount = ref({
-	devcount: {}
-} as any);
-
-watch(
-	() => props.statisticsCount,
-	newVal => {
-		// console.log(newVal, "newVal");
-		if (newVal) {
-			// props.xData = newVal;
-			statisticsCount.value = newVal;
-		}
+const projectData = ref({
+	totalProjectDay: "180"
+});
+const topRank = ref([
+	{
+		name: "广东省某某科技有限公司(东北厂区)",
+		percent: 70
+	},
+	{
+		name: "广州市某公司名称(东北厂区)",
+		percent: 65
+	},
+	{
+		name: "企业名称(东北厂区)",
+		percent: 60
+	},
+	{
+		name: "这里是第四名企业名称(东北厂区)",
+		percent: 55
 	}
-);
+])
 </script>
 
 <style lang="scss" scoped>
@@ -54,39 +78,127 @@ watch(
 	width: 100%;
 	height: 100%;
 	display: flex;
-
-	.deviceData {
-		width: 100%;
-		height: 100%;
-		display: flex;
-
-		.deviceDataA {
-			width: 40%;
-			height: 85%;
-			background: url("@/assets/images/comprehensiveManage/project13.png") no-repeat;
-			background-size: 100% 100%;
-			margin: 4% 5%;
-			color: #fff;
-			text-align: center;
+	.box-content {
+		.top-content {
+			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;
+				}
+			}
 		}
-		.deviceDataB {
-			width: 40%;
-			height: 85%;
-			background: url("@/assets/images/comprehensiveManage/project13.png") no-repeat;
-			background-size: 100% 100%;
-			margin: 4% 5%;
-			color: #fff;
-			text-align: center;
-		}
-		.num {
-			margin-top: 30%;
-			font-size: 32px;
-			font-weight: bold;
-		}
-		.text {
-			font-size: 14px;
-
-			color: #ccc;
+		.bottom-content {
+			margin: 0 2%;
+			margin-top: 6%;
+			&-item:not(:last-child){
+				margin-bottom: 3%;
+			}
+			&-item {
+				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;
+					display: flex;
+					flex-direction: column;
+					color: white;
+					margin-left: 2%;
+					.two-part-one {
+						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;
+						}
+						> span:nth-child(2) {
+							font-family: ABeeZee, ABeeZee;
+							font-weight: 400;
+							font-size: 18px;
+							color: #eaeef5;
+						}
+					}
+					.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;
+						}
+					}
+				}
+			}
 		}
 	}
 }
diff --git a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftCenter.vue b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftCenter.vue
index 4ef713e..f341e47 100644
--- a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftCenter.vue
+++ b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftCenter.vue
@@ -6,8 +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>
@@ -21,7 +20,7 @@
 import Card from "@/components/card.vue";
 import { GlobalStore } from "@/stores";
 import { COMPANY } from "@/config/config";
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, nextTick } from "vue";
 import { getPersonTypeAndEduStatisticsApi } from "@/api/modules/labor";
 import * as echarts from "echarts";
 const store = GlobalStore();
@@ -165,6 +164,9 @@ const drawOneEchart = () => {
 		// 控制台输出点击的数据的信息
 		console.log(params);
 		showOne.value = false;
+		nextTick(() => {
+			drawTwoEchart();
+		})
 		// 您可以在这里添加您的逻辑代码
 		// 例如：弹出自定义的对话框或者执行其他操作
 	});
@@ -467,29 +469,9 @@ const drawTwoEchart = () => {
 		console.log(echartsOne);
 		echartsOne.resize();
 	});
-	//图例点击事件
-	// echartsTest.value.on("legendselectchanged", (params: any) => {
-	// 	console.log(emits);
-	// 	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 () => {
 	drawOneEchart();
-	drawTwoEchart();
 });
 </script>