zhgdyun/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/rightCenter.vue

<template>
	<div class="leftTop">
		<Card title="各企业本周数据统计">
			<el-carousel @change="onChange" indicator-position="none" style="width: 100%; height: 100%">
				<el-carousel-item v-for="item in enterpriseInfo.dataList" :key="item.enterpriseId" style="width: 100%; height: 100%">
					<div class="box-content">
						<div class="top-content">
							<div class="top-content-left text-ellipsis">{{ item.enterpriseName }}</div>
							<div class="top-content-right" style="text-align: right">
								<div class="line1" style="display: flex; justify-content: flex-end">
									<span style="margin-left: 15px">事故报警总数</span>
									<div class="numberCard" v-for="(ele, i) in `${enterpriseInfo.dataInfo.emergencyNum}`" :key="i">
										{{ ele }}
									</div>
								</div>
							</div>
						</div>
						<div class="bottom-content">
							<div class="top-data-item">
								<span>在场人员总数</span>
								<span>{{ enterpriseInfo.dataInfo.highWorkerNumThisWeek }}/{{ enterpriseInfo.dataInfo.inServiceNum }}</span>
							</div>
							<div class="top-data-item">
								<span>企业安全分</span>
								<span>{{ enterpriseInfo.dataInfo.safeScore }}</span>
							</div>
							<div class="top-data-item">
								<span>安全隐患总数</span>
								<span>{{ enterpriseInfo.dataInfo.securityNum }}</span>
							</div>
							<div class="top-data-item">
								<span>质量隐患总数</span>
								<span>{{ enterpriseInfo.dataInfo.qualityNum }}</span>
							</div>
							<div class="top-data-item">
								<span>特种作业数量</span>
								<span>{{ enterpriseInfo.dataInfo.specialNum }}</span>
							</div>
							<div class="top-data-item">
								<span>培训未通过率</span>
								<span>{{ enterpriseInfo.dataInfo.trainNotPassRadio }}%</span>
							</div>
						</div>
					</div>
				</el-carousel-item>
			</el-carousel>
		</Card>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { getEnterpriseInfoListApi, getStatsEnterpriseWeekApi } from "@/api/modules/agjtOverviewApi";
import { onMounted, ref, reactive } from "vue";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
const projectData = ref({
	totalProjectDay: "180"
});
const enterpriseInfo = reactive({
	dataList: [] as any[],
	dataInfo: {
		emergencyNum: 0
	} as any
});

const onChange = (event: any) => {
	const enterpriseId = enterpriseInfo.dataList[event].enterpriseId;
	getStatsEnterpriseWeek(true, enterpriseId);
};
// 获取企业数据统计
const getEnterpriseInfoList = async (showLoading: boolean) => {
	const res: any = await getEnterpriseInfoListApi(
		{
			projectSn: store.sn,
			enterpriseName: "",
			enterpriseTypeId: "",
			userEnterpriseId: ""
		},
		showLoading
	);
	enterpriseInfo.dataList = res.result;
	const enterpriseId = res.result.length > 0 && res.result[0].enterpriseId;
	getStatsEnterpriseWeek(false, enterpriseId);
};
const getStatsEnterpriseWeek = async (showLoading: boolean, enterpriseId: string) => {
	const res: any = await getStatsEnterpriseWeekApi(
		{
			projectSn: store.sn,
			enterpriseId: enterpriseId
		},
		showLoading
	);
	enterpriseInfo.dataInfo = res.result;
};
const setIntervalFn = (showLoading: boolean) => {
	getEnterpriseInfoList(showLoading);
};

onMounted(async () => {
	setIntervalFn(false);
	// setInterval(() => {
	// 	setIntervalFn(true);
	// }, 30000);
});
</script>

<style lang="scss" scoped>
.text-ellipsis {
	font-size: 16px;
	color: #fff;
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}
.leftTop {
	width: 100%;
	height: 100%;

	.box-content {
		.top-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 4%;
			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;
				}
			}

			&-left {
				font-family: ABeeZee, ABeeZee;
				font-weight: 400;
				font-size: 16px !important;
				color: #ffffff;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}

		.bottom-content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 10px;
			margin: 0 6%;
			margin-top: 3%;

			.top-data-item {
				width: 125px;
				height: 51px;
				background: url("@/assets/images/comprehensiveManage/bgOne.png") no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				padding: 2% 0;
				padding-left: 8%;
				margin-bottom: 8%;

				span:nth-child(1) {
					font-size: 13px;
					color: #fff;
					font-family: ABeeZee-Regular;
					margin-bottom: 1%;
				}

				span:nth-child(2) {
					font-size: 24px;
					color: #65d7f9;
					font-family: ABeeZee-Regular;
				}
			}
		}
	}
}

.line1 {
	color: #fff;
	padding-top: 5px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	line-height: 30px;
	height: 30px;
	font-size: 16px;

	.numberCard {
		font-size: 26px;
		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%;
	}
}

::v-deep .h-card .content {
	height: 80%;
}

::v-deep .el-carousel__container {
	height: 100%;
}

:deep() {
	.el-carousel__indicator--horizontal .el-carousel__button {
		width: 10px;
		height: 10px;
		background: #a8c3dd;
		border: 1px solid #a8c3dd;
		border-radius: 50%;
		opacity: 0.3;
	}

	.el-carousel__indicator--horizontal.is-active .el-carousel__button {
		width: 10px;
		height: 10px;
		background: #4ac0f3;
		border: 1px solid #4ac0f3;
		border-radius: 50%;
		opacity: 1;
	}

	.el-carousel__arrow--left {
		// top: 70px;
		left: -8px;
		font-size: 15px;
	}
	.el-carousel__arrow--right {
		// top: 70px;
		right: -8px;
		font-size: 15px;
	}
}
</style>