jfcloud-coldchain/snowy-admin-web/src/components/HomeCard/SysCountCard/index.vue

<template>
	<div class="home_count">
		<div class="ant-card-body">
			<div class="card-left">
				<img src="/src/assets/images/home/02.png" class="left-img" />
				<div class="row">
					<div class="label">超低温冰箱</div>
					<div class="value">{{ data.deviceCount || 0 }}</div>
				</div>
			</div>
			<div class="card-right">
				<div class="row row1">
					<div class="row-img">
						<img src="/src/assets/images/home/normal.png" />
					</div>

					<div class="label">正常</div>
					<div class="value">{{ data.onlineDeviceCount || 0 }}</div>
				</div>
				<div class="row row2">
					<div class="row-img">
						<img src="/src/assets/images/home/offline.png" />
					</div>
					<div class="label">离线</div>
					<div class="value">{{ data.offlineDeviceCount || 0 }}</div>
				</div>
			</div>
		</div>

		<div class="ant-card-body">
			<div class="card-left">
				<img src="/src/assets/images/home/03.png" class="left-img" />
				<div class="row">
					<div class="label">监测点位</div>
					<div class="value">{{ data.sensorCount || 0 }}</div>
				</div>
			</div>
			<div class="card-right">
				<div class="row row1">
					<div class="row-img">
						<img src="/src/assets/images/home/use.png" />
					</div>

					<div class="label">已使用</div>
					<div class="value">{{ data.usedSensorCount || 0 }}</div>
				</div>
				<div class="row row2">
					<img src="/src/assets/images/home/not1.png" class="row-img2" />
					<div class="label">未使用</div>
					<div class="value">{{ data.unusedSensorCount || 0 }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="SysCountCard">
	import homeApi from '@/api/basicset/homeApi'

	const data = ref({})
	onMounted(() => {
		loadData()
	})

	const loadData = () => {
		homeApi.monitorDeviceCount().then((res) => {
			data.value = res
		})
	}
</script>

<style lang="less" scoped>
	.home_count {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.ant-card-body {
			width: calc(50% - 10px);
			height: 150px;
			margin-bottom: 10px;
			box-sizing: border-box;
			background-color: #ffffff;
			border-radius: 10px;
			display: flex;
			box-shadow: 5px 5px 10px 5px rgba(135, 134, 134, 0.4);
			.card-left {
				width: 35%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding-left: 20px;

				.left-img {
					width: 100px;
					height: 100px;
				}

				.row {
					width: calc(100% - 130px);
					padding: 0 10px;
					text-align: center;
					.label {
						font-size: 18px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.value {
						padding-top: 10px;
						font-size: 45px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}

			.card-right {
				width: 65%;
				height: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.row {
					width: calc(50% - 30px);
					height: 60%;
					padding: 0 20px;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					border-radius: 15px;
					div {
						color: #ffffff;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.row-img {
						width: 50px;
						height: 50px;
						line-height: 40px;
						border-radius: 50%;
						text-align: center;
						border: 3px solid #ffffff;
						img {
							width: 35px;
							height: 35px;
						}
					}
					.row-img2 {
						width: 50px;
						height: 50px;
					}

					.label {
						margin: 0 10px;
						font-size: 16px;
					}
					.value {
						width: calc(50% - 20px);
						font-size: 22px;
					}
				}
				.row1 {
					background-color: #1da7ff;
				}
				.row2 {
					background-color: #a4a4a4;
				}
			}
		}
	}
</style>