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 flex-row">
					告警级别分布
					<el-radio-group v-model="searchType" size="small" @change="onSearchTypeChange">
						<el-radio-button label="">全部告警</el-radio-button>
						<el-radio-button label="1">已关闭告警</el-radio-button>
						<el-radio-button label="2">未关闭告警</el-radio-button>
					</el-radio-group>
				</div>
				<Chart :height="chartHeight" ref="chart1"></Chart>
			</div>
			<div class="chart-item" style="flex: 1.5">
				<div class="chart-title flex-row">
					告警趋势
					<el-radio-group v-model="intervalType" size="small" @change="onIntervalTypeChange">
						<el-radio-button label="1">小时</el-radio-button>
						<el-radio-button label="2">天</el-radio-button>
						<el-radio-button label="3">月</el-radio-button>
					</el-radio-group>
				</div>
				<Chart :height="chartHeight" ref="chart2"></Chart>
			</div>
		</div>
		<div class="chart-wrapper">
			<div class="chart-item mb-0" style="flex: 1; margin-bottom: 0">
				<div class="chart-title flex-row">
					处理状态
					<el-date-picker
						v-model="statusDateRange"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:disabled-date="disabledDate"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						size="small"
						@change="onStatusDateChange"
						style="max-width: 200px"
					/>
				</div>
				<Chart :height="chartHeight" ref="chart3"></Chart>
			</div>
			<div class="chart-item" style="flex: 1.5; margin-bottom: 0">
				<div class="chart-title">设备告警TOP10</div>
				<Chart :height="chartHeight" ref="chart4"></Chart>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, getCurrentInstance } from 'vue'
import api from '/@/api/alarm'
import Chart from '/@/components/chart/index.vue'
import { getBarRowOption, getLineOption, getPieOption } from '/@/components/chart/options'
import dayjs from 'dayjs'
import { useThemeChangeFunc } from '/@/hooks/useCommon'

const chartHeight = 'calc(50vh - 168px)'

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

// 查询类型：不传为 全部告警 1已关闭告警 2未关闭告警
const searchType = ref('')
// 统计间隔：1小时 2天 3月
const intervalType = ref('1')
// 处理状态时间范围
const statusDateRange = ref([dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')])

// 禁用未来日期
const disabledDate = (time: Date) => {
	return time.getTime() > Date.now()
}

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
		})
		getOverviewData()
	},
	{
		immediate: true,
	}
)

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

const onIntervalTypeChange = () => {
	// 告警趋势 intervalType 统计间隔：1小时 2天 3月
	api.dashboard.getAnalyzeTrend({ intervalType: intervalType.value }).then((res: any) => {
		const resData = Object.values(res || []) as any[]
		const legend = Object.keys(res || []).map((item) => alarmTypeMap[item])
		// console.log(resData)
		chart2.value?.draw(
			getLineOption({
				legend,
				datas: resData.map((arr: any) => arr.map((item: any) => item.alarmCount)),
				xAxis: resData?.[0]?.map((item: any) => item.alarmDate),
			})
		)
	})
}

const onSearchTypeChange = () => {
	// 告警级别分布
	api.dashboard
		.getAlarmLevel({
			searchType: searchType.value,
			startDate: dayjs().subtract(20, 'year').format('YYYY-MM-DD'),
			endDate: dayjs().format('YYYY-MM-DD'),
		})
		.then((res: any) => {
			const resData = res || []
			const total = resData.reduce((a: any, b: any) => a + b.alarmCount, 0)
			chart1.value?.draw(
				getPieOption({
					radius: ['45%', '60%'],
					center: ['32%', '50%'],
					legend: {
						orient: 'vertical',
						top: 'center',
						left: '55%',
					},
					total,
					data: resData.map((item: any) => {
						if (total === 0) {
							return {
								name: item.levelName + ' ' + item.alarmCount,
								value: item.alarmCount,
							}
						}
						return {
							name: item.levelName + ' ' + item.alarmCount + ' (' + ((item.alarmCount / total) * 100).toFixed(2) + '%)',
							value: item.alarmCount,
						}
					}),
				})
			)
		})
}

const onStatusDateChange = () => {
	getAlarmStatusData()
}

const getAlarmStatusData = () => {
	// 处理状态
	api.dashboard
		.getAlarmStatus({
			startDate: statusDateRange.value[0],
			endDate: statusDateRange.value[1],
		})
		.then((res: any) => {
			const statusMap = {
				0: '未处理',
				1: '已处理',
				2: '已忽略',
			}

			const resData = res || []
			const total = resData.reduce((a: any, b: any) => a + b.alarmCount, 0)
			chart3.value?.draw(
				getPieOption({
					total,
					radius: ['45%', '60%'],
					center: ['32%', '50%'],
					legend: {
						orient: 'vertical',
						top: 'center',
						left: '55%',
					},
					centerText: '总计',
					data: resData.map((item: any) => {
						const name = statusMap[item.status as keyof typeof statusMap]
						if (total == 0) {
							return { name: name + ' ' + item.alarmCount, value: item.alarmCount }
						}
						return { name: name + ' ' + item.alarmCount + ' (' + ((item.alarmCount / total) * 100).toFixed(2) + '%)', value: item.alarmCount }
					}),
				})
			)
		})
}

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
	})
	onSearchTypeChange()
	onIntervalTypeChange()
	// 获取处理状态数据
	getAlarmStatusData()
	api.dashboard.getDeviceAlarmTop10().then((res: any) => {
		const list = res || []
		const chartData = getBarRowOption({
			data: list.map((item: any) => item.alarmCount),
			xAxis: list.map((item: any) => item.deviceName),
			// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
			// xAxis: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
		})
		chart4.value.draw(chartData)
	})
}

useThemeChangeFunc(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>