首页样式

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

@@ -0,0 +1,384 @@
+<template>
+	<div class="trend-card">近三天报警趋势</div>
+
+	<div class="home_count">
+		<div class="ant-card-body">
+			<div class="card-left">
+				<img src="/src/assets/images/home/06.png" class="right-img" />
+				<div class="left-title">前天</div>
+			</div>
+			<div class="card-right">
+				<div class="echart" id="echart1"></div>
+			</div>
+		</div>
+		<div class="ant-card-body">
+			<div class="card-left">
+				<img src="/src/assets/images/home/07.png" class="right-img" />
+				<div class="left-title">昨天</div>
+			</div>
+			<div class="card-right">
+				<div class="echart" id="echart2"></div>
+			</div>
+		</div>
+		<div class="ant-card-body">
+			<div class="card-left">
+				<img src="/src/assets/images/home/08.png" class="right-img" />
+				<div class="left-title">今天</div>
+			</div>
+			<div class="card-right">
+				<div class="echart" id="echart3"></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup name="SysTrendCard">
+	import * as echarts from 'echarts'
+
+	onMounted(() => {
+		getEcharts1()
+		getEcharts2()
+		getEcharts3()
+	})
+	const getEcharts1 = () => {
+		let Echarts = echarts.init(document.getElementById('echart1'))
+		const option = {
+			tooltip: {
+				trigger: 'axis',
+				axisPointer: {
+					type: 'cross',
+					crossStyle: {
+						color: '#999'
+					}
+				}
+			},
+			grid: {
+				left: '0',
+				top: '15px',
+				right: '0',
+				bottom: '15px',
+				containLabel: true
+			},
+			xAxis: {
+				type: 'category',
+				data: [
+					'00:00-03:00',
+					'03:00-06:00',
+					'06:00-09:00',
+					'09:00-12:00',
+					'12:00-15:00',
+					'15:00-18:00',
+					'18:00-21:00',
+					'21:00-24:00'
+				],
+
+				axisPointer: {
+					type: 'shadow'
+				},
+				axisLabel: {
+					//展示角度
+					rotate: 40,
+					color: '#666',
+					show: false // 不显示坐标标签
+				},
+				axisLine: {
+					show: false, // 不显示坐标标签
+					lineStyle: {
+						color: '#ddd'
+					}
+				}
+			},
+			yAxis: {
+				type: 'value',
+				minInterval: 1,
+				axisLabel: {
+					show: false // 不显示 y 轴的数值
+				},
+				splitLine: {
+					lineStyle: {
+						type: 'dashed',
+						color: '#eee'
+					}
+				}
+			},
+			series: [
+				{
+					name: '报警次数',
+					data: [12, 34, 41, 5, 28, 19, 4, 36],
+					type: 'line',
+					smooth: true,
+					showSymbol: false,
+					itemStyle: {
+						normal: {
+							lineStyle: {
+								width: 1,
+								color: '#6c2bfb'
+							}
+						}
+					},
+					areaStyle: {
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+							{
+								offset: 0,
+								color: '#8249fa'
+							},
+							{
+								offset: 1,
+								color: '#fff'
+							}
+						])
+					}
+				}
+			]
+		}
+		// 绘制图表
+		Echarts.setOption(option)
+		// 自适应大小
+		window.onresize = () => {
+			Echarts.resize()
+		}
+	}
+
+	const getEcharts2 = () => {
+		let Echarts = echarts.init(document.getElementById('echart2'))
+		const option = {
+			tooltip: {
+				trigger: 'axis',
+				axisPointer: {
+					type: 'cross',
+					crossStyle: {
+						color: '#999'
+					}
+				}
+			},
+			grid: {
+				left: '0',
+				top: '15px',
+				right: '0',
+				bottom: '15px',
+				containLabel: true
+			},
+			xAxis: {
+				type: 'category',
+				data: [
+					'00:00-03:00',
+					'03:00-06:00',
+					'06:00-09:00',
+					'09:00-12:00',
+					'12:00-15:00',
+					'15:00-18:00',
+					'18:00-21:00',
+					'21:00-24:00'
+				],
+				axisPointer: {
+					type: 'shadow'
+				},
+				axisLabel: {
+					//展示角度
+					rotate: 40,
+					color: '#666',
+					show: false // 不显示坐标标签
+				},
+				axisLine: {
+					show: false, // 不显示坐标标签
+					lineStyle: {
+						color: '#ddd'
+					}
+				}
+			},
+			yAxis: {
+				type: 'value',
+				minInterval: 1,
+				axisLabel: {
+					show: false // 不显示 y 轴的数值
+				},
+				splitLine: {
+					lineStyle: {
+						type: 'dashed',
+						color: '#eee'
+					}
+				}
+			},
+			series: [
+				{
+					name: '报警次数',
+					data: [6, 64, 34, 10, 30, 21, 49, 14],
+					type: 'line',
+					smooth: true,
+					showSymbol: false,
+					itemStyle: {
+						normal: {
+							lineStyle: {
+								width: 1,
+								color: '#3175fb'
+							}
+						}
+					},
+					areaStyle: {
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+							{
+								offset: 0,
+								color: '#96b8fa'
+							},
+							{
+								offset: 1,
+								color: '#fff'
+							}
+						])
+					}
+				}
+			]
+		}
+		// 绘制图表
+		Echarts.setOption(option)
+		// 自适应大小
+		window.onresize = () => {
+			Echarts.resize()
+		}
+	}
+	const getEcharts3 = () => {
+		let Echarts = echarts.init(document.getElementById('echart3'))
+		const option = {
+			tooltip: {
+				trigger: 'axis',
+				axisPointer: {
+					type: 'cross',
+					crossStyle: {
+						color: '#999'
+					}
+				}
+			},
+			grid: {
+				left: '0',
+				top: '15px',
+				right: '0',
+				bottom: '15px',
+				containLabel: true
+			},
+			xAxis: {
+				type: 'category',
+				data: [
+					'00:00-03:00',
+					'03:00-06:00',
+					'06:00-09:00',
+					'09:00-12:00',
+					'12:00-15:00',
+					'15:00-18:00',
+					'18:00-21:00',
+					'21:00-24:00'
+				],
+				axisPointer: {
+					type: 'shadow'
+				},
+				axisLabel: {
+					//展示角度
+					rotate: 40,
+					color: '#666',
+					show: false // 不显示坐标标签
+				},
+				axisLine: {
+					show: false, // 不显示坐标标签
+					lineStyle: {
+						color: '#ddd'
+					}
+				}
+			},
+			yAxis: {
+				type: 'value',
+				minInterval: 1,
+				axisLabel: {
+					show: false // 不显示 y 轴的数值
+				},
+				splitLine: {
+					lineStyle: {
+						type: 'dashed',
+						color: '#eee'
+					}
+				}
+			},
+			series: [
+				{
+					name: '报警次数',
+					data: [10, 25, 51, 3, 4, 0, 0, 0],
+					type: 'line',
+					smooth: true,
+					showSymbol: false,
+					itemStyle: {
+						normal: {
+							lineStyle: {
+								width: 1,
+								color: '#3ac9a2'
+							}
+						}
+					},
+					areaStyle: {
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+							{
+								offset: 0,
+								color: '#4ef6f5'
+							},
+							{
+								offset: 1,
+								color: '#fff'
+							}
+						])
+					}
+				}
+			]
+		}
+		// 绘制图表
+		Echarts.setOption(option)
+		// 自适应大小
+		window.onresize = () => {
+			Echarts.resize()
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.trend-card {
+		width: 100%;
+		padding: 15px 25px;
+		background: #ffffff;
+	}
+
+	.home_count {
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+
+		.ant-card-body {
+			flex: 1;
+			width: 100%;
+			height: 250px;
+			padding: 0 20px;
+			margin-bottom: 10px;
+			box-sizing: border-box;
+			background-color: #ffffff;
+			border-radius: 5px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			.card-left {
+				width: 10%;
+				text-align: center;
+				.left-title {
+					padding-top: 5px;
+				}
+			}
+
+			.card-right {
+				width: 90%;
+				height: 100%;
+				.echart {
+					height: 100%;
+				}
+			}
+		}
+		.ant-card-body:nth-child(5n) {
+			margin-right: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,133 @@
+<template>
+	<div class="home_count">
+		<div class="warning-title">
+			<div>报警管理</div>
+			<a-button type="link" @click="leaveFor('/motoring/report')">更多</a-button>
+		</div>
+		<a-table :columns="columns" :data-source="dataSource" size="small" :pagination="false" :scroll="{ y: 260 }">
+			<template #bodyCell="{ column, record }">
+				<template v-if="column.dataIndex === 'state'">
+					<span>
+						<a-tag :color="record.state == '1' ? '#cd201f' : record.state == '2' ? '#2db7f5' : '#87d068'">
+							{{ record.stateVlaue }}
+						</a-tag>
+					</span>
+				</template>
+				<template v-if="column.dataIndex === 'action'">
+					<a-button type="link" size="small">编辑</a-button>
+					<a-divider type="vertical" />
+					<a-popconfirm title="删除此数据？" @confirm="deleteData(record)">
+						<a-button type="link" danger size="small">删除</a-button>
+					</a-popconfirm>
+					<a-divider type="vertical" />
+					<a-button type="link" size="small">记录</a-button>
+				</template>
+			</template>
+		</a-table>
+	</div>
+</template>
+
+<script setup name="SysWarningCard">
+	import bizIndexApi from '@/api/biz/bizIndexApi'
+	import router from '@/router'
+	const detailRef = ref()
+	const columns = [
+		{
+			title: '时间',
+			dataIndex: 'createTime',
+			ellipsis: true
+		},
+		{
+			title: '名称',
+			dataIndex: 'title',
+			ellipsis: true
+		},
+		{
+			title: '报警原因',
+			dataIndex: 'reason',
+			ellipsis: true
+		},
+		{
+			title: '状态',
+			dataIndex: 'state',
+			ellipsis: true
+		},
+		{
+			title: '操作',
+			dataIndex: 'action',
+			align: 'center',
+			width: '200px'
+		}
+	]
+	const dataSource = ref([
+		{
+			createTime: '2024-09-28 07:03:24',
+			title: 'ABSL-1超低温冰箱',
+			reason: '温度异常',
+			state: '1',
+			stateVlaue: '异常'
+		},
+		{
+			createTime: '2024-09-28 09:21:51',
+			title: 'ABSL-2超低温冰箱',
+			reason: '温度异常',
+			state: '1',
+			stateVlaue: '异常'
+		},
+		{
+			createTime: '2024-09-28 11:06:20',
+			title: 'ABSL-3超低温冰箱',
+			reason: '温度异常',
+			state: '1',
+			stateVlaue: '异常'
+		},
+		{
+			createTime: '2024-09-28 11:54:19',
+			title: 'ABSL-4超低温冰箱',
+			reason: '温度异常',
+			state: '1',
+			stateVlaue: '异常'
+		},
+		{
+			createTime: '2024-09-28 16:17:36',
+			title: 'ABSL-5超低温冰箱',
+			reason: '温度异常',
+			state: '1',
+			stateVlaue: '异常'
+		},
+		{
+			createTime: '2024-09-28 19:35:58',
+			title: 'ABSL-6超低温冰箱',
+			reason: '温度异常',
+			state: '1',
+			stateVlaue: '异常'
+		}
+	])
+	const apiLoading = ref(false)
+	onMounted(() => {})
+	const leaveFor = (url = '/') => {
+		router.replace({
+			path: url
+		})
+	}
+
+	// 删除
+	const deleteData = (record) => {
+		console.log(record.title, 'params')
+	}
+</script>
+
+<style lang="less" scoped>
+	.home_count {
+		width: 100%;
+		padding: 15px 25px;
+		background-color: #ffffff;
+
+		.warning-title {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 10px;
+		}
+	}
+</style>

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

@@ -4,9 +4,9 @@
 			<!-- 顶部数据统计 -->
 			<sys-count-card class="mb-2" />
 			<!-- 近三天报警趋势 -->
-			<sys-biz-data-card class="mb-2" />
+			<sys-trend-card class="mb-2" />
 			<!-- 报警管理 -->
-			<sys-op-data-card class="mb-2" />
+			<sys-warning-card class="mb-2" />
 		</a-col>
 	</a-row>
 </template>

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

@@ -1,5 +1,5 @@
 <template>
-	<div>监控管理</div>
+	<div>报警管理</div>
 </template>
 <script setup>
 	onMounted(() => {})