admin-ui/src/views/iot/iotmanager/dashboard.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">{{ $t('message.dashboard.'+v.num3) }}</div>
						</div>
					</div>
					<div class="divider"></div>
					<div class="card-bottom">
						<div class="flex" style="gap: 10px">
							<img src="/@/assets/ok.svg" v-if="k < 2" alt="" class="icon" />
							<img src="/@/assets/date.svg" v-else alt="" class="icon" />
							<span class="info" :style="{ color: v.title1_bgcolor }">{{ $t('message.dashboard.'+v.title1) }}</span>
							<div class="num">{{ v.num1 }}</div>
						</div>
						<div class="split"></div>
						<div class="flex" style="gap: 10px">
							<img src="/@/assets/stop.svg" v-if="k < 2" alt="" class="icon" />
							<img src="/@/assets/today.svg" v-else alt="" class="icon" />
							<span class="info" :style="{ color: v.title2_bgcolor }">{{ $t('message.dashboard.'+v.title2) }}</span>
							<div class="num">{{ v.num2 }}</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<div class="chart-wrapper">
			<div class="chart-item" style="flex: 2">
				<div class="chart-title">{{ t('message.dashboard.设备消息') }}</div>
				<VueUiXy :dataset="dataset" :config="config" />
			</div>
			<div class="chart-item">
				<div class="chart-title">{{ t('message.dashboard.warningType') }}</div>
				<VueUiDonut :dataset="pieDataset" :config="pieConfig" />
			</div>
		</div>
		<AlarmList></AlarmList>
	</div>
</template>

<script lang="ts" setup>
import { toRefs, reactive, onMounted, ref, watch, nextTick, onActivated, getCurrentInstance, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { VueUiXy, VueUiDonut } from 'vue-data-ui'
import 'vue-data-ui/style.css'
import { getLineData, getPieData } from '/@/utils/dataUiOptions'
import api from '/@/api/datahub'
import dayjs from 'dayjs'
import AlarmList from '/@/views/iot/alarm/list/index.vue'
import { useThemeChange } from '/@/hooks/useCommon'
import { store } from '/@/store/index';

import { useI18n } from 'vue-i18n'

const { t } = useI18n()

// 页面是显示状态
let isActice = true

//#region 线图

// 获取默认图形配置数据
const chartData = getLineData({
	xAxis: [],
	legend: [t('message.dashboard.messageCount'), t('message.dashboard.warningCount')],
	datas: [[], []],
})

const config = ref<any>(chartData.config)
const dataset = ref<any[]>(chartData.dataset)

//#endregion

//#region 饼图

// 获取默认图形配置数据
const pieData = getPieData({
	legend: [' '],
	datas: [[]],
})

const pieConfig = ref<any>(pieData.config)
const pieDataset = ref<any[]>(pieData.dataset)

// 监听暗黑模式变化，将 vue-data-ui 的 config 传进来，就能自动更新主题
useThemeChange([config, pieConfig])

//#endregion

onUnmounted(() => {
	isActice = false
})

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] = t('message.dashboard.'+item.label)
		})

		// 预警类型需要类型返回后才能请求
		getDeviceAlarmLevelCount()
	},
	{
		immediate: true,
	}
)

watch(() => store.state.themeConfig.themeConfig.globalI18n, (globalI18n) => {
	if(globalI18n) {
		// 更新圖表數據的圖例
		dataset.value[0].name = t('message.dashboard.messageCount')
		dataset.value[1].name = t('message.dashboard.warningCount')
		// 更新餅圖數據 - 重新生成圖例標籤
		if (pieDataset.value && pieDataset.value.length > 0) {
			// 更新 alarmTypeMap 中的翻譯
			alarm_type.value.forEach((item: any) => {
					alarmTypeMap[item.value] = t('message.dashboard.'+item.label)
			})
			
			// 重新調用API獲取最新數據並重新渲染
			getDeviceAlarmLevelCount()
		}
	}
});

const editDicRef = ref()
const detailRef = ref()
const router = useRouter()
const state = reactive({
	loading: false,
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 20,
			status: '',
			dateRange: [],
		},
	},
	homeOne: [
		{
			allnum: 0,
			num1: 0,
			num2: 0,
			// num3: t('message.dashboard.product'),
			num3: '产品',
			num4: 'icon-zidingyibuju',
			color1: '#6690F9',
			color2: '--el-color-warning-lighter',
			color3: '--el-color-warning',
			icoimg: 'dashboard-icon1.svg',
			title1: '启用',
			title2: '停用',
			title1_bgcolor: '#3cd357',
			title2_bgcolor: '#FFBB73',
		},
		{
			allnum: 0,
			num1: 0,
			num2: 0,
			// num3: t('message.dashboard.onlineDevice'),
			num3: '在线设备',
			num4: 'icon-putong',
			color1: '#FF6462',
			color2: '--next-color-primary-lighter',
			color3: '--el-color-primary',
			icoimg: 'dashboard-icon2.svg',
			title1: '启用',
			title2: '停用',
			title1_bgcolor: '#3cd357',
			title2_bgcolor: '#FFBB73',
		},
		{
			allnum: 0,
			num1: 0,
			num2: 0,
			// num3: t('message.dashboard.deviceMessage'),
			num3: '设备消息',
			num4: 'icon-shidu',
			color1: '#6690F9',
			color2: '--el-color-success-lighter',
			color3: '--el-color-success',
			icoimg: 'dashboard-icon3.svg',
			title1: "本月",
			title2: "今日",
			title1_bgcolor: '#4285F4',
			title2_bgcolor: '#FFBB73',
		},
		{
			allnum: 0,
			num1: 0,
			num2: 0,
			// num3: t('message.dashboard.deviceWarning'),
			num3: '设备警告',
			num4: 'icon-zaosheng',
			color1: '#6690F9',
			color2: '--el-color-warning-lighter',
			color3: '--el-color-warning',
			icoimg: 'dashboard-icon4.svg',
			title1: '本月',
			title2: '今日',
			title1_bgcolor: '#4285F4',
			title2_bgcolor: '#FFBB73',
		},
	],
	myCharts: [],
	charts: {
		theme: '',
		bgColor: '',
		color: '#303133',
	},
})

const { loading, tableData, homeOne } = toRefs(state)

// 定时获取设备，在线信息，告警数量更新
const getOverviewData = () => {
	getProductCount()
	getDeviceDataTotalCount()
	getDeviceDataTotalCountMonth()
	getDeviceDataTotalCountDay()
	getDeviceOnlineOfflineCount()
	getDeviceAlarmLevelCountYear()
	getDeviceAlarmLevelCountMonth()
	getDeviceAlarmLevelCountDay()
	// 图形数据
	getDeviceDataCount()
}

// 普通数据3秒更新
const intervalTimeLong = 3000

function loopRquest(fun: Function, timeLong?: number) {
	setTimeout(() => {
		isActice && fun()
	}, timeLong || intervalTimeLong)
}

// 获取告警告警数量和消息数量绘图
function getDeviceDataCount() {
	// 获取年度消息，年度告警数量
	Promise.all([api.iotManage.deviceDataCount('year'), api.iotManage.deviceAlertCountByYearMonth(dayjs().format('YYYY'))])
		.then(([msg, alarm]: any) => {
			const msgArr = msg?.data || []
			const alarmArr = alarm?.data || []

			const dataNull = new Array(12).fill(0)
			const month = dataNull.map((_, i) => i + 1)

			const list1 = [...dataNull]
			const list2 = [...dataNull]

			msgArr.forEach((item: any) => {
				list1[item.Title - 1] = item.Value
			})
			alarmArr.forEach((item: any) => {
				list2[item.Title - 1] = item.Value
			})

			const chartData = getLineData({
				xAxis: month,
				legend: [t('message.dashboard.messageCount'), t('message.dashboard.warningCount')],
				datas: [list1, list2],
			})

			config.value = chartData.config
			dataset.value = chartData.dataset
		})
		// .finally(() => loopRquest(getDeviceDataCount, 60000))
}

// 获取告警告警数量和消息数量绘图
function getDeviceAlarmLevelCount() {
	// 按告警级别统计 绘制饼图
	api.iotManage
		.deviceAlarmLevelCount('year', dayjs().format('YYYY'))
		.then((res: any) => {
			const list = (res.data || []).sort((a: any, b: any) => b.Title - a.Title)

			if (list.length) {
				const pieData = getPieData({
					legend: list.map((item: any) => alarmTypeMap[item.Title]),
					types: list.map((item: any) => item.Title),
					datas: list.map((item: any) => [item.Value]),
					totalText: t('message.dashboard.total')
				})
				pieConfig.value = pieData.config
				pieDataset.value = pieData.dataset
			}
		})
		.finally(() => loopRquest(getDeviceAlarmLevelCount, 60000))
}

// 产品数量
function getProductCount() {
	api.iotManage
		.productCount()
		.then((res: any) => {
			state.homeOne[0].allnum = res.total
			state.homeOne[0].num1 = res.enable
			state.homeOne[0].num2 = res.disable
		})
		.finally(() => loopRquest(getProductCount))
}

// 设备数据总数
function getDeviceDataTotalCount() {
	api.iotManage
		.deviceDataTotalCount('year')
		.then((res: any) => {
			state.homeOne[2].allnum = res.number
		})
		.finally(() => loopRquest(getDeviceDataTotalCount))
}

// 设备数据总数-月
function getDeviceDataTotalCountMonth() {
	api.iotManage
		.deviceDataTotalCount('month')
		.then((res: any) => {
			state.homeOne[2].num1 = res.number
		})
		.finally(() => loopRquest(getDeviceDataTotalCountMonth))
}

// 设备数据总数-月
function getDeviceDataTotalCountDay() {
	api.iotManage
		.deviceDataTotalCount('day')
		.then((res: any) => {
			state.homeOne[2].num2 = res.number
		})
		.finally(() => loopRquest(getDeviceDataTotalCountDay))
}

// 设备数量
function getDeviceOnlineOfflineCount() {
	api.iotManage
		.deviceOnlineOfflineCount()
		.then((res: any) => {
			state.homeOne[1].allnum = res.online
			state.homeOne[1].num1 = res.total - res.disable
			state.homeOne[1].num2 = res.disable
		})
		.finally(() => loopRquest(getDeviceOnlineOfflineCount))
}

// 告警数量-年
function getDeviceAlarmLevelCountYear() {
	api.iotManage
		.deviceAlarmLevelCount('year', dayjs().format('YYYY'))
		.then((res: any) => {
			const list = res.data || []
			const total = list.reduce((a: any, b: any) => a + b.Value, 0)
			state.homeOne[3].allnum = total
		})
		.finally(() => loopRquest(getDeviceAlarmLevelCountYear))
}

// 告警数量-月
function getDeviceAlarmLevelCountMonth() {
	api.iotManage
		.deviceAlarmLevelCount('month', dayjs().format('M'))
		.then((res: any) => {
			const total = (res.data || []).reduce((a: any, b: any) => a + b.Value, 0)
			state.homeOne[3].num1 = total
		})
		.finally(() => loopRquest(getDeviceAlarmLevelCountMonth))
}

// 告警数量-日
function getDeviceAlarmLevelCountDay() {
	api.iotManage
		.deviceAlarmLevelCount('day', dayjs().format('D'))
		.then((res: any) => {
			const total = (res.data || []).reduce((a: any, b: any) => a + b.Value, 0)
			state.homeOne[3].num2 = total
		})
		.finally(() => loopRquest(getDeviceAlarmLevelCountDay))
}

const getAlarmList = () => {
	api.iotManage.getAlarmList(state.tableData.param).then((res: any) => {
		state.tableData.data = res.list
		state.tableData.total = res.Total
	})
}
//打开详情页
const onOpenDetailDic = (row: any) => {
	detailRef.value.openDialog(row)
}
// 打开修改产品弹窗
const onOpenEditDic = (row: any) => {
	editDicRef.value.openDialog(row)
}
// 告警信息-更多信息
const toMore = () => {
	router.push({ path: '/iotmanager/alarm/log' })
}
// 页面加载时
onMounted(() => {
	getOverviewData()
	getAlarmList()
})
</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>