From 578ced4860bf300c7406d82b58c31f42b2e7a9e1 Mon Sep 17 00:00:00 2001
From: X_Rian <904416525@qq.com>
Date: Thu, 31 Oct 2024 15:30:06 +0800
Subject: [PATCH] =?UTF-8?q?flx:=E6=96=B0=E5=A2=9E=E6=9C=88=E4=BB=BD?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../civilizedConstruction/rightBottom.vue     | 168 +++++++++++++-----
 1 file changed, 128 insertions(+), 40 deletions(-)

diff --git a/src/views/sevenLargeScreen/largeMachinery/civilizedConstruction/rightBottom.vue b/src/views/sevenLargeScreen/largeMachinery/civilizedConstruction/rightBottom.vue
index 6242f8a..dfa673a 100644
--- a/src/views/sevenLargeScreen/largeMachinery/civilizedConstruction/rightBottom.vue
+++ b/src/views/sevenLargeScreen/largeMachinery/civilizedConstruction/rightBottom.vue
@@ -1,34 +1,60 @@
 <template>
 	<Card title="承包商考核">
-		<div class="leftBox">
-			<div @click="particularDetail({
-				typeUnit: 2,
-				title: 'EPC'
-			})">
-				<img src="@/assets/images/bthgIcon/civilizedConstruction_icon1.png" alt="">
-				<div>
-					<div>EPC</div>
-					<div>{{ rankEnterpriseInfo.epc && rankEnterpriseInfo.epc.enterpriseName }}</div>
+		<div class="main_box">
+			<div class="right-top_header">
+				<div class="right-top_header_left">
+					<div
+						@click="onContractorClick(item)"
+						:class="{ active: contractorAssessmentInfo.id == item.id }"
+						v-for="item in contractorAssessmentList"
+						:key="item.id"
+					>
+						{{ item.contractorAssessmentName }}
+					</div>
 				</div>
 			</div>
-			<div @click="particularDetail({
-				typeUnit: 1,
-				title: '监理单位'
-			})">
-				<img src="@/assets/images/bthgIcon/civilizedConstruction_icon2.png" alt="">
-				<div>
-					<div>监理单位</div>
-					<div>{{ rankEnterpriseInfo.supervisor && rankEnterpriseInfo.supervisor.enterpriseName }}</div>
+			<div class="leftBox">
+				<div
+					@click="
+						particularDetail({
+							typeUnit: 2,
+							title: 'EPC'
+						})
+					"
+				>
+					<img src="@/assets/images/bthgIcon/civilizedConstruction_icon1.png" alt="" />
+					<div>
+						<div>EPC</div>
+						<div>{{ rankEnterpriseInfo.epc && rankEnterpriseInfo.epc.enterpriseName }}</div>
+					</div>
 				</div>
-			</div>
-			<div @click="particularDetail({
-				typeUnit: 3,
-				title: '施工单位'
-			})">
-				<img src="@/assets/images/bthgIcon/civilizedConstruction_icon3.png" alt="">
-				<div>
-					<div>施工单位</div>
-					<div>{{ rankEnterpriseInfo.construction && rankEnterpriseInfo.construction.enterpriseName }}</div>
+				<div
+					@click="
+						particularDetail({
+							typeUnit: 1,
+							title: '监理单位'
+						})
+					"
+				>
+					<img src="@/assets/images/bthgIcon/civilizedConstruction_icon2.png" alt="" />
+					<div>
+						<div>监理单位</div>
+						<div>{{ rankEnterpriseInfo.supervisor && rankEnterpriseInfo.supervisor.enterpriseName }}</div>
+					</div>
+				</div>
+				<div
+					@click="
+						particularDetail({
+							typeUnit: 3,
+							title: '施工单位'
+						})
+					"
+				>
+					<img src="@/assets/images/bthgIcon/civilizedConstruction_icon3.png" alt="" />
+					<div>
+						<div>施工单位</div>
+						<div>{{ rankEnterpriseInfo.construction && rankEnterpriseInfo.construction.enterpriseName }}</div>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -50,23 +76,40 @@ const particularDetail = (obj: any) => {
 		type: 1,
 		typeUnit: obj.typeUnit,
 		title: obj.title,
-		rankEnterpriseInfo: rankEnterpriseInfo.value,
+		rankEnterpriseInfo: rankEnterpriseInfo.value
 	});
 };
 
+const contractorAssessmentList = ref([
+	{
+		id: 1,
+		contractorAssessmentName: "本月"
+	},
+	{
+		id: 2,
+		contractorAssessmentName: "上月"
+	}
+]);
+const contractorAssessmentInfo = ref({ id: 1 });
+
+const onContractorClick = (row: any) => {
+	contractorAssessmentInfo.value.id = row.id;
+	getHomePageRankEnterprise();
+};
+
 const rankEnterpriseInfo = ref({} as any);
 const getHomePageRankEnterprise = () => {
 	let data = {
-        projectSn: store.sn,
-        type: 1
-      };
-      getHomePageRankEnterpriseApi(data).then((res: any) => {
-        if (res.code == 200) {
-          rankEnterpriseInfo.value = res.result;
-          console.log('承包商考核排名', res);
-        }
-      });
-}
+		projectSn: store.sn,
+		type: contractorAssessmentInfo.value.id
+	};
+	getHomePageRankEnterpriseApi(data).then((res: any) => {
+		if (res.code == 200) {
+			rankEnterpriseInfo.value = res.result;
+			console.log("承包商考核排名", res);
+		}
+	});
+};
 
 onMounted(() => {
 	getHomePageRankEnterprise();
@@ -74,14 +117,52 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+.main_box {
+	width: 100%;
+	height: 100%;
+}
+.right-top_header {
+	width: calc(100% - 32px);
+	height: calc(20% - 24px);
+	padding: 12px 16px;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	position: relative;
+	.right-top_header_left {
+		display: flex;
+		> div {
+			border: 1px solid #0056a8;
+			padding: 2px 6px;
+			font-size: 12px;
+			color: #0056a8;
+			cursor: pointer;
+			position: relative;
+		}
+		> div:not(:first-child) {
+			margin-left: 10px;
+		}
+		> div.active {
+			background-color: #0056a8;
+			color: white;
+		}
+		.el-icon-close {
+			position: absolute;
+			font-size: 8px;
+			top: -1px;
+			right: -1px;
+			background-color: #ff0000;
+		}
+	}
+}
 .leftBox {
-	width: calc( 100% - 24px);
-	height: calc(100% - 32px);
+	width: calc(100% - 32px);
+	height: calc(80% - 12px);
 	position: relative;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	padding: 12px 16px;
+	padding: 0 16px 12px;
 	color: white;
 	> div {
 		width: 32%;
@@ -107,6 +188,13 @@ onMounted(() => {
 			> div:last-child {
 				margin-top: 4px;
 				font-size: 16px;
+				padding: 0 12px;
+				word-break: break-all;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 1;
+				overflow: hidden;
 			}
 		}
 	}