admin-ui/src/views/iot/alarm/dashboard/index.vue

<template>
	<div class="home-container">
		<el-row :gutter="15" class="home-card-one mb15">
			<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(v, k) in homeOne" :key="k">
				<div class="home-card-top-part">
					<div class="top">
						<img :src="'/imgs/' + v.icoimg" class="icoimg" />
						<div class="card-right">
							<span class="font30">{{ v.allnum }}</span>
							<div class="label">{{ v.num3 }}</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<div class="chart-wrapper">
			<div class="chart-item" style="flex: 1">
				<div class="chart-title">告警级别分布</div>
				<Chart height="300px" ref="chart1"></Chart>
			</div>
			<div class="chart-item" style="flex: 1.5">
				<div class="chart-title">告警趋势</div>
				<Chart height="300px" ref="chart2"></Chart>
			</div>
		</div>
		<div class="chart-wrapper">
			<div class="chart-item" style="flex: 1">
				<div class="chart-title">处理状态</div>
				<Chart height="300px" ref="chart3"></Chart>
			</div>
			<div class="chart-item" style="flex: 1.5">
				<div class="chart-title">设备告警TOP10</div>
				<Chart height="300px" ref="chart4"></Chart>
			</div>
		</div>
		<AlarmList></AlarmList>
	</div>
</template>

<script lang="ts" setup>
import { toRefs, reactive, onMounted, ref, watch, nextTick, onActivated, getCurrentInstance, onUnmounted } from 'vue'
import 'vue-data-ui/style.css'
import api from '/@/api/alarm'
import AlarmList from '/@/views/iot/alarm/list/index.vue'
import { useThemeChange } from '/@/hooks/useCommon'
import Chart from '/@/components/chart/index.vue'
import { getLineOption } from '/@/components/chart/options'
import dayjs from 'dayjs'

const chart1 = ref()
const chart2 = ref()
const chart3 = ref()
const chart4 = ref()

const { proxy } = getCurrentInstance() as any
const { alarm_type } = proxy.useDict('alarm_type')
const alarmTypeMap: any = {}

// 监听告警类型是否获取成功
watch(
	() => alarm_type.value,
	(list) => {
		if (!list.length) return
		list.forEach((item: any) => {
			alarmTypeMap[item.value] = item.label
		})
	},
	{
		immediate: true,
	}
)

const homeOne = reactive([
	{
		allnum: 0,
		num3: '告警总数',
		icoimg: 'dashboard-icon1.svg',
	},
	{
		allnum: 0,
		num3: '已关闭告警数',
		icoimg: 'dashboard-icon2.svg',
	},
	{
		allnum: 0,
		num3: '未关闭告警数',
		icoimg: 'dashboard-icon3.svg',
	},
	{
		allnum: 0,
		num3: '平均处理时长MTTR',
		icoimg: 'dashboard-icon4.svg',
	},
])

const getOverviewData = () => {
	// 顶部统计数据
	api.dashboard.getTotalAlarmStatistics().then((res: any) => {
		homeOne[0].allnum = res.alarmTotalCount
		homeOne[1].allnum = res.closeAlarmCount
		homeOne[2].allnum = res.unCloseAlarmCount
		homeOne[3].allnum = res.averageDealTime
	})
	// 告警级别分布
	api.dashboard
		.getAlarmLevel({
			searchType: null,
			startDate: dayjs().startOf('month').format('YYYY-MM-DD'),
			endDate: dayjs().endOf('month').format('YYYY-MM-DD'),
		})
		.then((res: any) => {
			const resData = res || [
				{
					alarmCount: 2548,
					alarmLevel: '1',
					levelName: '超紧急',
				},
				{
					alarmCount: 0,
					alarmLevel: '2',
					levelName: '紧急',
				},
				{
					alarmCount: 0,
					alarmLevel: '3',
					levelName: '严重',
				},
				{
					alarmCount: 0,
					alarmLevel: '4',
					levelName: '一般',
				},
				{
					alarmCount: 0,
					alarmLevel: '5',
					levelName: '提醒',
				},
			]
			console.log(resData)
		})
	// 告警趋势 intervalType 统计间隔：1小时 2天 3月
	api.dashboard.getAnalyzeTrend({ intervalType: 2 }).then((res: any) => {
		const resData = res || []
		console.log(resData)
	})
	// 处理状态
	api.dashboard
		.getAlarmStatus({
			startDate: dayjs().startOf('month').format('YYYY-MM-DD'),
			endDate: dayjs().endOf('month').format('YYYY-MM-DD'),
		})
		.then((res: any) => {
			const resData = res || [
				{
					alarmCount: 4,
					status: '1',
				},
				{
					alarmCount: 2544,
					status: '0',
				},
				{
					alarmCount: 0,
					status: '2',
				},
			]
			console.log(resData)
		})
	api.dashboard.getDeviceAlarmTop10().then((res: any) => {
		const list = res || []
		const chartData = getLineOption({
			datas: [list.map((item: any) => item.alarmCount)],
			xAxis: list.map((item: any) => item.deviceName),
			legend: ['告警设备top10'],
		})
		chart4.value.draw(chartData)
	})
}

// 页面加载时
onMounted(() => {
	getOverviewData()
})
</script>

<style scoped lang="scss">
$homeNavLengh: 8;

.chart-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 16px;

	.chart-item {
		background-color: var(--el-color-white);
		padding: 12px 15px;
		border-radius: 8px;
		margin-bottom: 16px;
		flex: 1;
		min-width: 200px;
	}

	.chart-title {
		font-size: 15px;
		font-weight: bold;
		padding-left: 5px;
	}
}

.home-card-top-part {
	background-color: var(--el-color-white);
	border-radius: 8px;
	padding: 20px 20px;

	.top {
		display: flex;
		justify-content: space-around;
		overflow: hidden;
		align-items: center;
	}

	.icoimg {
		width: 54px !important;
		height: 54px !important;
		margin-right: 12px;
	}

	.label {
		font-size: 14px;
		font-weight: 500;
	}

	.divider {
		border-top: 1px solid var(--el-border-color-light);
		margin: 12px 0 15px;
	}

	.card-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		white-space: nowrap;
		line-height: 1;
		height: 54px;

		.font30 {
			color: #4285f4;
			font-weight: bold;
			font-size: 30px;
		}
	}

	.card-bottom {
		font-size: 12px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		gap: 12px;
		white-space: nowrap;

		.split {
			border-right: 1px solid var(--el-border-color-light);
			height: 20px;
		}

		.icon {
			width: 17px;
			height: 17px;
		}

		.info {
			font-size: 12px;
			font-weight: 500;
		}
	}
}

.home-container {
	overflow: hidden;

	.home-card-one,
	.home-card-two,
	.home-card-three {
		.icoimg {
			width: 75px;
			height: 75px;
		}

		.title_status {
			width: 7px;
			height: 7px;
			background: #c1bbbb;
			border-radius: 50px;
			margin-right: 5px;
		}

		.home-card-item,
		.home-card-top {
			width: 100%;
			border-radius: 8px;
			transition: all ease 0.3s;
			padding: 10px 20px;
			overflow: hidden;
			background: var(--el-color-white);
			color: var(--el-text-color-primary);

			// border: 1px solid var(--next-border-color-light);
			&:hover {
				// box-shadow: 0 2px 12px var(--next-color-dark-hover);
				transition: all ease 0.3s;
			}

			&-icon {
				width: 70px;
				height: 70px;
				border-radius: 100%;
				flex-shrink: 1;

				i {
					color: var(--el-text-color-placeholder);
				}
			}

			&-title {
				font-size: 15px;
				font-weight: bold;
				height: 30px;
			}
		}
	}

	.home-card-three {
		.home-card-item-title {
			display: flex;
			justify-content: space-between;
			// span:nth-child(2) {
			// 	color: #409eff;
			// }
		}
	}

	.home-card-one {
		@for $i from 0 through 3 {
			.home-one-animation#{$i} {
				opacity: 0;
				animation-name: error-num;
				animation-duration: 0.5s;
				animation-fill-mode: forwards;
				animation-delay: calc($i/10) + s;
			}
		}
	}

	.home-card-two,
	.home-card-three {
		.home-card-top {
			height: 250px;

			.box-card {
				padding: 15px 20px 20px 10px;

				p {
					margin-bottom: 10px;
				}

				&-item {
					margin-bottom: 10px;
				}
			}
		}

		.home-card-item,
		.home-card-top {
			width: 100%;
			overflow: hidden;

			.home-monitor {
				height: 100%;

				.flex-warp-item {
					width: 25%;
					height: 111px;
					display: flex;

					.flex-warp-item-box {
						margin: auto;
						text-align: center;
						color: var(--el-text-color-primary);
						display: flex;
						border-radius: 5px;
						background: var(--next-bg-color);
						cursor: pointer;
						transition: all 0.3s ease;

						&:hover {
							background: var(--el-color-primary-light-9);
							transition: all 0.3s ease;
						}
					}

					@for $i from 0 through $homeNavLengh {
						.home-animation#{$i} {
							opacity: 0;
							animation-name: error-num;
							animation-duration: 0.5s;
							animation-fill-mode: forwards;
							animation-delay: calc($i/10) + s;
						}
					}
				}
			}
		}
	}

	.text-info {
		color: #23c6c8;
	}

	.text-danger {
		color: #ed5565;
	}

	.git-res {
		margin-top: 20px;
	}

	.git-res .el-link {
		margin-right: 30px;
	}

	ul,
	li {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.product {
		margin-top: 50px;

		h3 {
			margin-bottom: 15px;
		}
	}

	.product li {
		margin-bottom: 20px;
		float: left;
		width: 150px;
	}

	.box-card.xx {
		margin-top: 20px;
	}
}

.home-card-item.chart {
	padding: 10px !important;
}
</style>