首页样式

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

@@ -0,0 +1,110 @@
+<template>
+	<div class="home_count">
+		<div class="ant-card-body">
+			<div class="card-left">
+				<div class="left-title">监控点总数</div>
+				<div class="left-count">{{ dataSource.jkdzs }}</div>
+			</div>
+			<div class="card-right">
+				<img src="/src/assets/images/home/01.png" class="right-img" />
+			</div>
+		</div>
+		<div class="ant-card-body">
+			<div class="card-left">
+				<div class="left-title">正常</div>
+				<div class="left-count">{{ dataSource.zc }}</div>
+			</div>
+			<div class="card-right">
+				<img src="/src/assets/images/home/02.png" class="right-img" />
+			</div>
+		</div>
+		<div class="ant-card-body">
+			<div class="card-left">
+				<div class="left-title">超限</div>
+				<div class="left-count">{{ dataSource.cx }}</div>
+			</div>
+			<div class="card-right">
+				<img src="/src/assets/images/home/03.png" class="right-img" />
+			</div>
+		</div>
+		<div class="ant-card-body">
+			<div class="card-left">
+				<div class="left-title">断线</div>
+				<div class="left-count">{{ dataSource.dx }}</div>
+			</div>
+			<div class="card-right">
+				<img src="/src/assets/images/home/04.png" class="right-img" />
+			</div>
+		</div>
+		<div class="ant-card-body">
+			<div class="card-left">
+				<div class="left-title">闲置维修</div>
+				<div class="left-count">{{ dataSource.xzwx }}</div>
+			</div>
+			<div class="card-right">
+				<img src="/src/assets/images/home/05.png" class="right-img" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup name="SysCountCard">
+	import indexApi from '@/api/sys/indexApi'
+
+	const apiLoading = ref(false)
+	const dataSource = ref({
+		jkdzs: 673,
+		zc: 136,
+		cx: 351,
+		dx: 94,
+		xzwx: 92
+	})
+	onMounted(() => {
+		apiLoading.value = true
+	})
+</script>
+
+<style lang="less" scoped>
+	.home_count {
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+
+		.ant-card-body {
+			flex: 0 0 calc(20% - 10px);
+			width: 100%;
+			height: 150px;
+			margin-bottom: 10px;
+			box-sizing: border-box;
+			background-color: #ffffff;
+			border-radius: 5px;
+			display: flex;
+			justify-content: center;
+
+			.card-left {
+				width: 50%;
+				padding: 30px 10px 20px 30px;
+				.left-title {
+					font-size: 16px;
+				}
+				.left-count {
+					padding-top: 10px;
+					font-size: 30px;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+			}
+
+			.card-right {
+				width: 50%;
+				padding-top: 10px;
+				text-align: center;
+			}
+		}
+		.ant-card-body:nth-child(5n) {
+			margin-right: 0;
+		}
+	}
+</style>

snowy-admin-web/src/views/index/index.vue

@@ -1,39 +1,16 @@
 <template>
 	<a-row :gutter="10">
-		<a-col :span="16" :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
-			<!-- 人员信息 -->
-			<sys-user-info-card class="mb-2" />
-			<!-- 业务数据 -->
+		<a-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+			<!-- 顶部数据统计 -->
+			<sys-count-card class="mb-2" />
+			<!-- 近三天报警趋势 -->
 			<sys-biz-data-card class="mb-2" />
-			<!-- 运维一览 -->
+			<!-- 报警管理 -->
 			<sys-op-data-card class="mb-2" />
-			<a-row :gutter="10">
-				<!-- 访问记录 -->
-				<a-col :span="12" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-					<sys-vis-log-card class="mb-2" />
-				</a-col>
-				<!-- 操作记录 -->
-				<a-col :span="12" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-					<sys-op-log-card class="mb-2" />
-				</a-col>
-			</a-row>
-		</a-col>
-		<a-col :span="8" :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
-			<!-- 轮播图 -->
-			<biz-slideshow-card :config="slideshowConfig" class="mb-2" />
-			<!-- 基础工具 -->
-			<sys-tool-data-card class="mb-2" />
-			<!-- 周访问量 -->
-			<sys-vis-chart-data-card />
 		</a-col>
 	</a-row>
 </template>
 
-<script setup name="indexHome">
-	// 轮播图配置
-	const slideshowConfig = {
-		options: {
-			place: 'BACK_SYS_INDEX'
-		}
-	}
-</script>
+<script setup name="indexHome"></script>
+
+<style lang="less" scoped></style>