feat: 优化告警统计样式

src/components/chart/options.ts

@@ -50,7 +50,8 @@ export function getPieOption({ data = [] as any[],
   radius = ['30%', '50%'],
   center = ['50%', '55%'],
   legend = { bottom: '5%', left: 'center', top: '0' } as any,
-  total = 0
+  total = 0,
+  centerText = '告警总数'
 }) {
   return {
     // tooltip: {
@@ -88,7 +89,7 @@ export function getPieOption({ data = [] as any[],
           fontSize: 14,
           color: getTheme() === 'dark' ? '#fff' : '#333',
           position: "center",
-          formatter: `{a|${total} }\n{b|告警总数}`,
+          formatter: `{a|${total} }\n{b|${centerText || '告警总数'}}`,
           rich: {
             a: {
               color: getTheme() === 'dark' ? '#fff' : '#333',
@@ -475,7 +476,7 @@ export function getBarRowOption({
       formatter: "{b}: <b>{c}%</b>"
     },
     legend: { left: 'center', bottom: 0, data: legend },
-    grid: { top: 10, bottom: 10, left: 5, right: 20, containLabel: true },
+    grid: { top: 10, bottom: 0, left: 5, right: 20, containLabel: true },
     color: ['#2578f2', '#a1c7f8'],
     xAxis: {
       type: 'value',

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

@@ -23,7 +23,7 @@
 						<el-radio-button label="2">未关闭告警</el-radio-button>
 					</el-radio-group>
 				</div>
-				<Chart height="250px" ref="chart1"></Chart>
+				<Chart :height="chartHeight" ref="chart1"></Chart>
 			</div>
 			<div class="chart-item" style="flex: 1.5">
 				<div class="chart-title flex-row">
@@ -34,11 +34,11 @@
 						<el-radio-button label="3">月</el-radio-button>
 					</el-radio-group>
 				</div>
-				<Chart height="250px" ref="chart2"></Chart>
+				<Chart :height="chartHeight" ref="chart2"></Chart>
 			</div>
 		</div>
 		<div class="chart-wrapper">
-			<div class="chart-item" style="flex: 1">
+			<div class="chart-item mb-0" style="flex: 1; margin-bottom: 0">
 				<div class="chart-title flex-row">
 					处理状态
 					<el-date-picker
@@ -55,26 +55,26 @@
 						style="max-width: 200px"
 					/>
 				</div>
-				<Chart height="300px" ref="chart3"></Chart>
+				<Chart :height="chartHeight" ref="chart3"></Chart>
 			</div>
-			<div class="chart-item" style="flex: 1.5">
+			<div class="chart-item" style="flex: 1.5; margin-bottom: 0">
 				<div class="chart-title">设备告警TOP10</div>
-				<Chart height="300px" ref="chart4"></Chart>
+				<Chart :height="chartHeight" 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 { reactive, ref, watch, getCurrentInstance } from 'vue'
 import api from '/@/api/alarm'
-import AlarmList from '/@/views/iot/alarm/list/index.vue'
 import Chart from '/@/components/chart/index.vue'
-import { getBarOption, getBarRowOption, getLineOption, getPie2Option, getPie3Option, getPie4Option, getPieOption } from '/@/components/chart/options'
+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()
@@ -85,10 +85,7 @@ 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 statusDateRange = ref([dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')])
 
 // 禁用未来日期
 const disabledDate = (time: Date) => {
@@ -171,7 +168,7 @@ const onSearchTypeChange = () => {
 					legend: {
 						orient: 'vertical',
 						top: 'center',
-						right: 5,
+						left: '60%',
 					},
 					total,
 					data: resData.map((item: any) => ({
@@ -204,8 +201,16 @@ const getAlarmStatusData = () => {
 			const resData = res || []
 			const total = resData.reduce((a: any, b: any) => a + b.alarmCount, 0)
 			chart3.value?.draw(
-				getPie3Option({
+				getPieOption({
 					total,
+					radius: ['45%', '60%'],
+					center: ['32%', '50%'],
+					legend: {
+						orient: 'vertical',
+						top: 'center',
+						left: '60%',
+					},
+					centerText: '总计',
 					data: resData.map((item: any) => ({ name: statusMap[item.status as keyof typeof statusMap], value: item.alarmCount })),
 				})
 			)
@@ -227,8 +232,10 @@ const getOverviewData = () => {
 	api.dashboard.getDeviceAlarmTop10().then((res: any) => {
 		const list = res || []
 		const chartData = getBarRowOption({
-			data: [list.map((item: any) => item.alarmCount)],
+			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)
 	})

src/views/iot/device/instance/component/chart.vue

@@ -49,8 +49,8 @@
 							v-loading="historyLoading"
 							:max-height="isFullscreen ? 'calc(100vh - 250px)' : 'calc(90vh - 300px)'"
 						>
-							<el-table-column prop="ts" label="时间" align="center" />
-							<el-table-column prop="value" label="属性值" align="center" />
+							<el-table-column prop="dataTime" label="时间" align="center" />
+							<el-table-column prop="dataValue" label="属性值" align="center" />
 							<el-table-column prop="unit" label="数据单位" align="center">
 								<template #default>{{ data.unit }}</template>
 							</el-table-column>
@@ -240,7 +240,7 @@ const fetchHistoryData = () => {
 	api.device
 		.getDeviceAttributesHistoryList(historyParams)
 		.then((res: any) => {
-			historyData.value = res.List
+			historyData.value = res.list
 			totalItems.value = res.Total
 		})
 		.catch(() => {