fix: 优化告警统计显示

src/views/iot/alarm/dashboard/copy.vue

@@ -1,447 +0,0 @@
-<template>
-	<div class="page">
-		<div class="flex-row" style="gap: 12px">
-			<el-card shadow="nover">
-				<div class="title flex-row">
-					<div class="">
-						今日告警 <el-tag size="small">{{ todayCount.currentDayCount }}</el-tag>
-					</div>
-					<div>
-						本月告警 <el-tag size="small">{{ todayCount.currentMonthCount }}</el-tag>
-					</div>
-				</div>
-				<VueUiXy v-if="dataset?.length" :config="config" :dataset="dataset" />
-				<VueUiSkeleton v-else :config="{ type: 'bar' }" />
-			</el-card>
-			<el-card shadow="nover">
-				<div class="title">告警设备top10</div>
-				<VueUiXy v-if="dataset2?.length" :config="config2" :dataset="dataset2" />
-				<VueUiSkeleton v-else :config="{ type: 'bar' }" />
-			</el-card>
-			<el-card shadow="nover">
-				<div class="title">最新告警</div>
-				<el-table class="flex1" :data="alarmNewList" border style="width: 100%" size="small">
-					<el-table-column prop="createdAt" label="告警日期" width="140" align="center" />
-					<el-table-column prop="status" :formatter="(row:any) => (row.status ? '已处理' : '未处理')" label="告警状态" width="70" align="center" />
-					<el-table-column prop="level" label="告警等级" :formatter="(row:any) => typeFormat(row.level)" width="100" align="center" />
-					<el-table-column prop="ruleName" label="告警说明" show-overflow-tooltip aign="center" />
-				</el-table>
-			</el-card>
-		</div>
-		<div class="flex-row" style="gap: 12px">
-			<el-card shadow="nover">
-				<div class="title">
-					告警统计
-					<el-date-picker
-						v-model="dateRange"
-						type="daterange"
-						range-separator="至"
-						start-placeholder="开始日期"
-						end-placeholder="结束日期"
-						@change="getAlarmStatistics"
-						format="YYYY-MM-DD"
-						value-format="YYYY-MM-DD"
-						size="small"
-						style="max-width: 200px"
-						:clearable="false"
-						:disabledDate="disabledDate"
-					/>
-				</div>
-				<VueUiXy v-if="dataset4?.length" :config="config4" :dataset="dataset4" />
-				<VueUiSkeleton v-else :config="{ type: 'bar' }" />
-			</el-card>
-			<el-card shadow="nover">
-				<div class="title">告警增长趋势</div>
-				<VueUiXy v-if="dataset5?.length" :config="config5" :dataset="dataset5" />
-				<VueUiSkeleton v-else :config="{ type: 'donut' }" />
-			</el-card>
-			<el-card shadow="nover">
-				<div class="title">
-					部门告警分析
-					<el-date-picker
-						v-model="deptAlarmDate"
-						type="daterange"
-						range-separator="至"
-						start-placeholder="开始日期"
-						end-placeholder="结束日期"
-						@change="getDeptAlarm"
-						format="YYYY-MM-DD"
-						value-format="YYYY-MM-DD"
-						size="small"
-						style="max-width: 200px"
-						:clearable="false"
-						:disabledDate="disabledDate"
-					/>
-				</div>
-				<VueUiXy v-if="dataset6?.length" :config="config6" :dataset="dataset6" />
-				<VueUiSkeleton v-else :config="{ type: 'bar' }" />
-			</el-card>
-		</div>
-		<div class="flex-row" style="gap: 12px">
-			<el-card shadow="nover">
-				<div class="title">
-					告警状态
-					<el-date-picker
-						v-model="alarmStatusDate"
-						type="daterange"
-						range-separator="至"
-						start-placeholder="开始日期"
-						end-placeholder="结束日期"
-						@change="getAlarmStatus"
-						format="YYYY-MM-DD"
-						value-format="YYYY-MM-DD"
-						size="small"
-						style="max-width: 200px"
-						:clearable="false"
-						:disabledDate="disabledDate"
-					/>
-				</div>
-				<VueUiDonut v-if="dataset7?.length" :config="config7" :dataset="dataset7" />
-				<VueUiSkeleton v-else :config="{ type: 'donut' }" />
-			</el-card>
-			<el-card shadow="nover">
-				<div class="title">
-					告警等级
-					<el-date-picker
-						v-model="alarmLevelDate"
-						type="daterange"
-						range-separator="至"
-						start-placeholder="开始日期"
-						end-placeholder="结束日期"
-						format="YYYY-MM-DD"
-						value-format="YYYY-MM-DD"
-						@change="getAlarmLevel"
-						size="small"
-						style="max-width: 200px"
-						:clearable="false"
-						:disabledDate="disabledDate"
-					/>
-				</div>
-				<VueUiXy v-if="dataset9?.length" :config="config9" :dataset="dataset9" />
-				<VueUiSkeleton v-else :config="{ type: 'bar' }" />
-			</el-card>
-			<el-card shadow="nover">
-				<div class="title">
-					告警类型
-					<el-date-picker
-						v-model="alarmTypeDate"
-						type="daterange"
-						range-separator="至"
-						start-placeholder="开始日期"
-						end-placeholder="结束日期"
-						format="YYYY-MM-DD"
-						value-format="YYYY-MM-DD"
-						@change="getAlarmType"
-						size="small"
-						style="max-width: 200px"
-						:clearable="false"
-						:disabledDate="disabledDate"
-					/>
-				</div>
-				<VueUiDonut v-if="dataset8?.length" :config="config8" :dataset="dataset8" />
-				<VueUiSkeleton v-else :config="{ type: 'donut' }" />
-			</el-card>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { unref, reactive, getCurrentInstance, ref } from 'vue'
-import { VueUiXy, VueUiDonut, VueUiSkeleton } from 'vue-data-ui'
-import 'vue-data-ui/style.css'
-import { getBarData, getPieSmallData } from '/@/utils/dataUiOptions'
-import api from '/@/api/alarm'
-import { useThemeChange } from '/@/hooks/useCommon'
-import dayjs from 'dayjs'
-
-const { proxy } = getCurrentInstance() as any
-const { alarm_type } = proxy.useDict('alarm_type')
-
-const disabledDate = (time: any) => time.getTime() > Date.now()
-
-function typeFormat(type: string) {
-	return proxy.selectDictLabel(unref(alarm_type), type)
-}
-
-const config = ref<any>({})
-const config2 = ref<any>({})
-const config4 = ref<any>({})
-const config5 = ref<any>({})
-const config6 = ref<any>({})
-const config7 = ref<any>({})
-const config8 = ref<any>({})
-const config9 = ref<any>({})
-const dataset = ref<any[]>([])
-const dataset2 = ref<any[]>([])
-const dataset4 = ref<any[]>([])
-const dataset5 = ref<any[]>([])
-const dataset6 = ref<any[]>([])
-const dataset7 = ref<any[]>([])
-const dataset8 = ref<any[]>([])
-const dataset9 = ref<any[]>([])
-
-// 监听暗黑模式变化，将 vue-data-ui 的 config 传进来，就能自动更新主题
-useThemeChange([config, config2, config4, config5, config6, config7, config8, config9])
-
-const todayCount = reactive({
-	currentDayCount: '-',
-	currentMonthCount: '-',
-})
-
-const alarmNewList = ref<any[]>([])
-
-const defaultDateRange = [dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
-const dateRange = ref([...defaultDateRange])
-const analyzeTrendDate = ref(dayjs().format('YYYY-MM'))
-const deptAlarmDate = ref([...defaultDateRange])
-const alarmStatusDate = ref([...defaultDateRange])
-const alarmTypeDate = ref([...defaultDateRange])
-const alarmLevelDate = ref([...defaultDateRange])
-
-getData()
-
-function getData() {
-	// 今日告警信息
-	api.dashboard.getCurrentDayInfo().then((res: any) => {
-		const list = res?.data.alarmList || []
-		todayCount.currentDayCount = res?.data?.currentDayCount
-		todayCount.currentMonthCount = res?.data?.currentMonthCount
-
-		const chartData = getBarData({
-			xAxis: list.map((item: any) => item.alarmDate),
-			legend: ['今日告警'],
-			datas: [list.map((item: any) => item.alarmCount)],
-			width: 300,
-			height: 300,
-			colors: ['#4B79F2'],
-			modulo: 3,
-			responsive: true,
-		})
-		config.value = chartData.config
-		dataset.value = chartData.dataset
-	})
-	// 最新告警
-	api.dashboard.getAlarmNewList().then((res: any) => {
-		alarmNewList.value = res || []
-	})
-	// 告警统计
-	getAlarmStatistics()
-	// 告警趋势统计
-	getAnalyzeTrend()
-	// 部门告警统计
-	getDeptAlarm()
-	// 告警状态统计
-	getAlarmStatus()
-	// 告警类型统计
-	getAlarmType()
-	// 告警等级统计
-	getAlarmLevel()
-	// 告警设备top10
-	api.dashboard.getDeviceAlarmTop10().then((res: any) => {
-		const list = res || []
-		const chartData = getBarData({
-			xAxis: list.map((item: any) => item.deviceName),
-			legend: ['告警设备top10'],
-			datas: [list.map((item: any) => item.alarmCount)],
-			colors: ['#FF7D5C'],
-			responsive: true,
-		})
-		config2.value = chartData.config
-		dataset2.value = chartData.dataset
-	})
-}
-
-function getAlarmStatistics() {
-	api.dashboard
-		.getAlarmStatistics({
-			startDate: dateRange.value[0],
-			endDate: dateRange.value[1],
-		})
-		.then((res: any) => {
-			const list = res || []
-			const chartData = getBarData({
-				xAxis: list.map((item: any) => item.alarmDate),
-				legend: ['告警统计'],
-				datas: [list.map((item: any) => item.alarmCount || 0)],
-				modulo: 3,
-				colors: ['#5AD8A6'],
-				responsive: true,
-			})
-			config4.value = chartData.config
-			dataset4.value = chartData.dataset
-		})
-}
-
-function getAnalyzeTrend() {
-	api.dashboard
-		.getAnalyzeTrend({
-			searchMonth: analyzeTrendDate.value,
-		})
-		.then((res: any) => {
-			const list = res || []
-			const chartData = getBarData({
-				xAxis: list.map((item: any) => item.month),
-				legend: ['部门告警'],
-				datas: [list.map((item: any) => item.alarmCount)],
-				modulo: 5,
-				colors: ['#FFB64D'],
-				responsive: true,
-			})
-			config5.value = chartData.config
-			dataset5.value = chartData.dataset
-		})
-}
-
-function getDeptAlarm() {
-	api.dashboard
-		.getDeptAlarm({
-			startDate: deptAlarmDate.value[0],
-			endDate: deptAlarmDate.value[1],
-		})
-		.then((res: any) => {
-			const list = res || []
-			const chartData = getBarData({
-				xAxis: list.map((item: any) => item.deptName),
-				legend: ['部门告警'],
-				datas: [list.map((item: any) => item.alarmCount)],
-				modulo: 5,
-				colors: ['#5B8FF9'],
-				responsive: true,
-			})
-			config6.value = chartData.config
-			dataset6.value = chartData.dataset
-		})
-}
-
-function getAlarmStatus() {
-	api.dashboard
-		.getAlarmStatus({
-			startDate: alarmStatusDate.value[0],
-			endDate: alarmStatusDate.value[1],
-		})
-		.then((res: any) => {
-			const list = res || []
-			const chartData = getPieSmallData({
-				legend: list.map((item: any) => (item.status === '1' ? '已处理' : '未处理')),
-				datas: list.map((item: any) => [item.alarmCount]),
-				colors: ['#5AD8A6', '#E86452'],
-				responsive: true,
-			})
-			config7.value = chartData.config
-			dataset7.value = chartData.dataset
-		})
-}
-
-function getAlarmType() {
-	api.dashboard
-		.getAlarmType({
-			startDate: alarmTypeDate.value[0],
-			endDate: alarmTypeDate.value[1],
-		})
-		.then((res: any) => {
-			const list = res || []
-			const chartData = getPieSmallData({
-				legend: list.map((item: any) => (item.alarmType === '1' ? '规则告警' : '自助上报告警')),
-				datas: list.map((item: any) => [item.alarmCount]),
-				colors: ['#7453E5', '#FFB64D'],
-				responsive: true,
-			})
-			config8.value = chartData.config
-			dataset8.value = chartData.dataset
-		})
-}
-
-function getAlarmLevel() {
-	api.dashboard
-		.getAlarmLevel({
-			startDate: alarmLevelDate.value[0],
-			endDate: alarmLevelDate.value[1],
-		})
-		.then((res: any) => {
-			const list = res || []
-			const chartData = getBarData({
-				xAxis: list.map((item: any) => item.levelName),
-				legend: ['告警等级'],
-				datas: [list.map((item: any) => item.alarmCount)],
-				modulo: 3,
-				colors: ['#269A99'],
-				responsive: true,
-			})
-			config9.value = chartData.config
-			dataset9.value = chartData.dataset
-		})
-}
-</script>
-
-<style scoped lang="scss">
-.page {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	gap: 12px;
-
-	.vue-ui-skeleton {
-		height: 100%;
-
-		& ::v-deep > svg {
-			height: 100%;
-		}
-	}
-
-	.title {
-		font-size: 14px;
-		color: #333;
-		font-weight: 500;
-		line-height: 1;
-		height: 24px;
-		min-height: 24px;
-		margin-bottom: 6px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.flex-row {
-		flex: 1;
-
-		.el-card {
-			height: 100%;
-			flex: 1;
-			// overflow: hidden;
-			box-sizing: border-box;
-
-			& ::v-deep .el-card__body {
-				padding: 1.5vh 1vw;
-				// gap: 10px;
-				height: 100%;
-				display: flex;
-				flex-direction: column;
-				justify-content: space-between;
-				// overflow: hidden;
-
-				.vue-ui-xy,
-				.vue-ui-donut,
-				.vue-ui-skeleton {
-					// flex: 1 !important;
-					height: calc(100% - 30px) !important;
-					// overflow: auto;
-					// display: flex;
-					// flex-direction: column;
-					// justify-content: center;
-					// align-items: center;
-					&-svg {
-						height: 100%;
-					}
-					.vue-data-ui-fulscreen--off {
-						height: 100%;
-					}
-				}
-
-				.vue-ui-skeleton {
-					overflow: hidden;
-				}
-			}
-		}
-	}
-}
-</style>

src/views/iot/alarm/dashboard/index.vue

@@ -168,13 +168,21 @@ const onSearchTypeChange = () => {
 					legend: {
 						orient: 'vertical',
 						top: 'center',
-						left: '60%',
+						left: '55%',
 					},
 					total,
-					data: resData.map((item: any) => ({
-						name: item.levelName + ' ' + item.alarmCount + ' (' + ((item.alarmCount / total) * 100).toFixed(2) + '%)',
-						value: item.alarmCount,
-					})),
+					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,
+						}
+					}),
 				})
 			)
 		})
@@ -208,10 +216,16 @@ const getAlarmStatusData = () => {
 					legend: {
 						orient: 'vertical',
 						top: 'center',
-						left: '60%',
+						left: '55%',
 					},
 					centerText: '总计',
-					data: resData.map((item: any) => ({ name: statusMap[item.status as keyof typeof statusMap], value: item.alarmCount })),
+					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 }
+					}),
 				})
 			)
 		})