feat:完成现场大屏左上角承包商信息轮播开发

src/api/modules/agjtLiveApi.ts

@@ -21,6 +21,10 @@ export const countTaskProgressApi = (params: {}, noLoading: boolean) => {
 export const countProjectEnterpriseApi = (params: {}, noLoading: boolean) => {
 	return http.post(BASEURL + `/xmgl/projectEnterprise/list`, params, { headers: { noLoading: noLoading } });
 };
+//获取承包商进度列表API
+export const countProcessApi = (params: {}, noLoading: boolean) => {
+	return http.get(BASEURL + `/xmgl/xzTaskProgress/list?projectSn=`+params.projectSn+`&orderBy=`+params.orderBy, );
+};
 
 //获取企业信息API
 export const getEnterpriseInfoByIdApi = (params: {}, noLoading: boolean) => {

src/views/agjtLiveScreen/liveScreen/centerBottomLeft.vue

@@ -100,14 +100,12 @@ async function getLwInfo() {
 		// 	if(res1.success){
 		// 		if(res1.result){
 		// 			lwInfo1.value = res1.result
-		// 			// console.log(lwInfo1.value)
 		// 		}
 		// 	}
 		// })
 		selectWorkerTeamAndDepartmentStatisticsApi({
 			projectSn: store.sn,
 		},true).then(res2 => {
-			console.log(res2)
 			if(res2.success){
 				if(res2.result){
 					lwInfo2.value = res2.result

src/views/agjtLiveScreen/liveScreen/centerTop.vue

@@ -126,7 +126,7 @@ function playVideo(){
 
 //测试方法，对接口时改成相应的方法注释
 const centerTopMethod = async () => {
-	console.log("centerTopMethod")
+	
 }
 //将方法暴露给父组件
 defineExpose({

src/views/agjtLiveScreen/liveScreen/leftBottom.vue

@@ -192,7 +192,6 @@ function drawPie() {
 
 //测试方法，对接口时改成相应的方法注释
 const leftBottomMethod = async () => {
-	// console.log("leftBottomMethod");
 	getSpecialInfo()
 };
 //将方法暴露给父组件

src/views/agjtLiveScreen/liveScreen/leftTop.vue

@@ -1,10 +1,11 @@
 <template>
 	<div class="leftTop">
-		<Card title="承包商项目信息">
+		<Card title="总包单位信息轮播">
+			<!-- <el-carousel style="width: 110%;transform:translateX(-4.5%) translateY(-5%);" :autoplay="false" indicator-position="none"  -->
 			<el-carousel style="width: 110%;transform:translateX(-4.5%) translateY(-5%);" :autoplay="true" :interval="10000" indicator-position="none" 
 			v-if="cbsProjectInfo && cbsProjectInfo.length>0">
 				<el-carousel-item style="height:100%" v-for="(item,i) in cbsProjectInfo" :key="i">
-					<div class="mainContainer" style="transform:translateX(5%) translateY(5%)">
+					<div class="mainContainer" style="transform:translateX(5%) translateY(5%)" v-if="item.lbType == 1">
 						<div class="lineBox">
 							<span class="aLine" style="width:auto;margin-left: 5%;">承包商名称：</span>
 							<span class="cLine">{{item.projectEnterprise.cbsName || '--'}}</span>
@@ -66,6 +67,76 @@
 							</div>
 						</div>
 					</div>
+					<div class="mainContainer" style="transform:translateX(5%) translateY(5%)" v-else>
+						<div>
+							<span>承包商名称：</span>
+							<span>{{item.name || '--'}}</span>
+						</div>
+						<div class="cbProcess" v-if="item.processList.length > 3">
+							<!-- v-if="listData.length>0" :list="listData"  -->
+							<vue3-seamless-scroll
+								v-if="item.processList.length > 0"
+								:list="item.processList"
+								:speed="1"
+								:limitScrollNum="3"
+								:step="0.3"
+								:hover="true"
+								class="scroll"
+							>
+								<div class="pItem" v-for="(item2, i) in item.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">{{ item2.taskName }}</div>
+											<div class="prtRight">{{ item2.progressRatio }}%</div>
+										</div>
+										<div class="prBottom">
+											<div class="processLineBg">
+												<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item2.progressRatio + '%' }">
+													<div class="processLineBtn"></div>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</vue3-seamless-scroll>
+						</div>
+						<div class="cbProcess" v-else-if="item.processList.length == 0">
+							<div class="processNotDta" v-if="item.processList.length == 0">
+								<img src="@/assets/images/noData.png" alt="" />
+								<p>暂无数据</p>
+							</div>
+						</div>
+						<div class="cbProcess" v-else>
+							<div class="pItem" v-for="(item2, i) in item.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">{{ item2.taskName }}</div>
+										<div class="prtRight">{{ item2.progressRatio }}%</div>
+									</div>
+									<div class="prBottom">
+										<div class="processLineBg">
+											<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item2.progressRatio + '%' }">
+												<div class="processLineBtn"></div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<!-- </vue3-seamless-scroll> -->
+						</div>
+
+
+					</div>
 				</el-carousel-item>
 			</el-carousel>
 			<div class="not-data" v-else>
@@ -81,33 +152,77 @@ import Card from "@/components/card.vue";
 import { GlobalStore } from "@/stores";
 import { ref, onMounted, watch } from "vue";
 import { COMPANY } from "@/config/config";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 //引入现场大屏API
 import { 
 	getEnterpriseIdApi,
 	getEnterpriseInfoByIdApi,
 	countProjectEnterpriseApi,
+	countProcessApi,
  } from "@/api/modules/agjtLiveApi";
 const store = GlobalStore();
 const BASEURL = import.meta.env.VITE_API_URL
 
 const cbsProjectInfo = ref({} as any)
 async function getCbsProjectInfo() {
-	let data = {
+	let data1 = {
 		page:1,
     pageSize:999,
     projectSn:store.sn,
     isCountMainEnterprise:1
 	}
-	await countProjectEnterpriseApi(data,true).then(res => {
+	let peList:any = []
+	await countProjectEnterpriseApi(data1,true).then((res:any) => {
 		if(res.success){
-			if(res.result.records){
+			if(res.result && res.result.records){
-				cbsProjectInfo.value = res.result.records
+				peList = res.result.records
+				peList.map((item: any) => {
+					item.lbType = 1
+				})
 			}
 		}
 	});
+	let data2 = {
+    projectSn:store.sn,
+		orderBy: 1
+	}
+	let pList:any = []
+	await countProcessApi(data2,true).then((res:any) => {
+		if(res.success){
+			pList = res.result
+		}
+	})
+	cbsProjectInfo.value = []
+	peList.map((item: any,i: any) => {
+		cbsProjectInfo.value.push(item)
+		let processList = pList.filter((item2: any) => item2.enterpriseId == item.id) || []
+		if(processList.length>3){
+			let tempList:any = []
+			// cbsProjectInfo.value.map((item3:any,i:any) => {
+			processList.map((item3:any,i:any) => {
+				tempList.push(item3)
+				if((i+1)%3 == 0){
+					cbsProjectInfo.value.push({
+						id: item.id,
+						name: item.projectEnterprise.cbsName,
+						lbType: 2,
+						processList: tempList
+					})
+					tempList = []
+				}
+			})
+		}else{
+			cbsProjectInfo.value.push({
+				id: item.id,
+				name: item.projectEnterprise.cbsName,
+				lbType: 2,
+				processList: processList
+			})
+		}
+	})
+	console.log('cbsProjectInfo',cbsProjectInfo.value)
 };
 // async function getCbsProjectInfo() {
-// 	console.log("BASEURL===>",BASEURL)
 // 	//获取企业Id
 // 	await getEnterpriseIdApi().then(res => {
 // 		if(res.success){
@@ -168,7 +283,7 @@ onMounted( async () => {
 .leftTop {
 	width: 100%;
 	height: 100%;
-		overflow: hidden;
+	overflow: hidden;
 	.mainContainer{
 		width: calc(100% - 20px);
 		height: calc(80% - 20px);
@@ -196,31 +311,225 @@ onMounted( async () => {
 				word-wrap: break-word;
 			}
 		}
+		.cbProcess {
+			padding-top: 5px;
+			height: calc(100% - 55px);
+			// width: calc(100% - 55px);
+			overflow: hidden;
+			// background-color: #fff;
+			.pItem {
+				width: 85%;
+				height: 55px;
+				display: flex;
+				// background-color: #fff;
+				font-size: 13px;
+				color: #fff;
+				.pLeft {
+					width: 20%;
+					height: 55px;
+					display: flex;
+					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;
+						justify-content: space-between;
+						height: 30px;
+						.prtLeft {
+							display: flex;
+							justify-content: center;
+							align-items: flex-end;
+						}
+						.prtRight {
+							display: flex;
+							justify-content: center;
+							align-items: flex-end;
+						}
+					}
+					.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%);
+							// }
+						}
+					}
+				}
+			}
+		}
 	}
 
+	.notoDta {
+		top: 38%;
+		width: 50%;
+		// left: 40%;
+		position: absolute;
+		text-align: center;
+		left: 50%;
+		transform: translateX(-50%);
 
+		img {
+			width: 40%;
+			margin: 5% 30%;
+		}
 
-	// .projectInfo {
+		p {
-	// 	width: 100%;
+			color: #fff;
-	// 	height: 100%;
+			font-size: calc(100vw * 14 / 1920);
-	// 	color: #fff;
+			margin: -6% 30%;
-	// 	padding: 2% 0 0 4%;
+		}
+	}
 
-	// 	div {
-	// 		width: 95%;
-	// 		height: 12%;
-	// 		font-size: 15px;
-	// 		white-space: nowrap; //单行
-	// 		overflow: hidden;
-	// 		text-overflow: ellipsis;
-	// 		span {
-	// 			margin-right: 3%;
-	// 			color: #ccc;
-	// 		}
-	// 	}
-	// }
 }
+.scroll {
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+}
+.processNotDta {
+	top: 25%;
+	width: 40%;
+	// left: 40%;
+	position: absolute;
+	text-align: center;
+	left: 45%;
+	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%);
+}
 ::v-deep .h-card .content {
 	height: 80%;
 }