zhgdlarge/src/views/agjtLiveScreen/liveScreen/centerBottomLeft.vue

<template>
	<div class="centerBottomLeft">
		<Card title="劳务实名制">
			<div class="mainContainer">
				<div class="topBox">
					<div class="topInner1">
						<div class="innerText">
							<div>今日出勤总人数</div>
							<div>{{lwInfo2.presencePersonTotal || 0}}</div>
						</div>
					</div>
					<div class="topInner2">
						<div class="innerText">
							<div>在册人数</div>
							<div>{{lwInfo2.totalPerson || 0}}</div>
						</div>
					</div>
				</div>
				<div class="bottomBox" v-if="lwInfo2.list && lwInfo2.list.length > 0">
					<el-scrollbar style="height:101.5%">
						<div class="listItem" v-for="(item,i) in lwInfo2.list" :key="i">
							<div class="itemInfo1">
								<div style="width:50px;text-align:center">{{i + 1}}</div>
								<div>{{item.name}}</div>
							</div>
							<div class="itemInfo2">{{item.attendancePersonTotal}}/{{item.totalPerson}}</div>
						</div>
					</el-scrollbar>
				</div>
				<div class="not-data" v-else>
					<img src="@/assets/images/noData.png" alt="" />
					<p>暂无数据</p>
				</div>
			</div>
		</Card>
	</div>
</template>

<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";
import { COMPANY } from "@/config/config";
//引入现场大屏API
import { 
	getEnterpriseIdApi,
	selectPersonTypeAndEduStatisticsApi,
	selectWorkerTeamAndDepartmentStatisticsApi,
 } from "@/api/modules/agjtLiveApi";
const store = GlobalStore();
const BASEURL = import.meta.env.VITE_API_URL

//获取劳务实名制信息
const lwInfo1 = ref({} as any)
const lwInfo2 = ref({} as any)
async function getLwInfo() {
	//获取企业Id
	await getEnterpriseIdApi().then(res => {
		let data = {
			projectSn: '',
		}
		if(BASEURL == 'http://182.90.224.237:51234' || BASEURL == 'http://192.168.34.221:9111') data.projectSn = 'BD3137498CB84BF0969979E0342CDBCA'
		if(BASEURL == 'http://42.180.188.17:9809' || BASEURL == 'http://42.180.188.17:11211') data.projectSn = '471568F45EB247A3912A0D10EA1BFCEB'
		selectPersonTypeAndEduStatisticsApi({
			enterpriseId: res.result.id,
			projectSn: data.projectSn,
		}).then(res1 => {
			if(res1.success){
				if(res1.result){
					lwInfo1.value = res1.result.personType
				}
			}
		})
		selectWorkerTeamAndDepartmentStatisticsApi({
			projectSn: data.projectSn,
		}).then(res2 => {
			if(res2.success){
				if(res2.result){
					lwInfo2.value = res2.result
				}
			}
		})
	});
};

//父组件调用需要无感刷新的方法
const centerBottomLeftMethod = async () => {
	getLwInfo()
}

//将方法暴露给父组件
defineExpose({
	centerBottomLeftMethod
})

onMounted( async () => {
	getLwInfo()
});

</script>

<style lang="scss" scoped>
.centerBottomLeft {
	width: 100%;
	height: 100%;
	.mainContainer{
		width: calc(100% - 20px);
		padding: 0 10px;
		height: 100%;
		.topBox{
			width:100%;
			// padding: 0 50px;
			height: 25%;
			display: flex;
			justify-content: space-around;
			.topInner1{
				width: 40%;
				height: 100%;
				background-color: #fff;
				background: url("@/assets/images/comprehensiveManage/project9.png") no-repeat;
				background-size: 100% 100%;
				.innerText{
					color: #fff;
					float: right;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 15px;
					transform: translateY(15px);
					font-style: italic;
				}
			}
			.topInner2{
				width: 40%;
				height: 100%;
				background-color: #fff;
				background: url("@/assets/images/comprehensiveManage/project12.png") no-repeat;
				background-size: 100% 100%;
				.innerText{
					color: #fff;
					float: right;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 15px;
					transform: translateX(-25px) translateY(15px);
					font-style: italic;
				}
			}
		}
		.bottomBox{
			// width:calc(100% - 20px);
			width: 100%;
			height: calc(75% - 5px);
			// border: 1px solid white;
			// display: flex;
			// flex-direction: column;
			// justify-content: space-around;
			.listItem{
				width: 100%;
				height: 52px;
				margin-bottom: 10px;
				background-color: rgba($color: #062d5a, $alpha: 0.7);
				font-size: 18px;
				color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2px solid;
  				// border-image: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) 1;
  				border-image: linear-gradient(to right, transparent 0%, #0674e8, rgba(0,0,0,0.1)) 0.5;
  				// background-size: 100% 100%;
				background-position: left center;


				.itemInfo1{
					width: auto;
					display: flex;
				}
				.itemInfo2{
					width: auto;
					margin-right: 15px;
				}
			}
		}
	}
}
::v-deep .h-card .content {
	height: 80%;
	margin-top: 4%;
}
.not-data {
	top: 50%;
	width: 30%;
	left: 35%;
	position: absolute;
	text-align: center;
	img {
		width: 50%;
	}
	p {
		color: #fff;
		font-size: 14px;
	}
}
</style>