This commit is contained in:
alwayssuper 2025-02-28 15:20:28 +08:00
parent 4547fbf2ce
commit 5137b4a4cb
2 changed files with 94 additions and 45 deletions

View File

@ -1,10 +1,44 @@
import request from '@/config/axios' import request from '@/config/axios'
/** 统计数据类型 */
export interface IotStatisticsSummaryRespVO {
productCategoryCount: number
productCount: number
deviceCount: number
deviceMessageCount: number
productCategoryTodayCount: number
productTodayCount: number
deviceTodayCount: number
deviceMessageTodayCount: number
deviceOnlineCount: number
deviceOfflineCount: number
deviceInactiveCount: number
productCategoryDeviceCounts: Record<string, number>
}
/** 消息统计数据类型 */
export interface IotStatisticsDeviceMessageSummaryRespVO {
upstreamCounts: Record<number, number>
downstreamCounts: Record<number, number>
}
// IoT 数据统计 API // IoT 数据统计 API
export const ProductCategoryApi = { export const ProductCategoryApi = {
// 查询首页所需数据统计信息 // 查询IoT基础数据统计
getIotMainStats: async (params: any) => { getIotStatisticsSummary: async () => {
return await request.get({ url: `/iot/statistics/main`, params }) return await request.get<IotStatisticsSummaryRespVO>({
} url: `/iot/statistics/get-summary`
})
},
// 查询IoT上下行消息数据统计
getIotStatisticsDeviceMessageSummary: async (params: {
startTime: number
endTime: number
}) => {
return await request.get<IotStatisticsDeviceMessageSummaryRespVO>({
url: `/iot/statistics/get-log-summary`,
params
})
}
} }

View File

@ -10,11 +10,11 @@
<span class="text-gray-500 text-base font-medium">品类数量</span> <span class="text-gray-500 text-base font-medium">品类数量</span>
<Icon icon="ep:menu" class="text-[32px] text-blue-400" /> <Icon icon="ep:menu" class="text-[32px] text-blue-400" />
</div> </div>
<span class="text-3xl font-bold text-gray-700">{{ statsData.categoryTotal }}</span> <span class="text-3xl font-bold text-gray-700">{{ statsData.productCategoryCount }}</span>
<el-divider class="my-2" /> <el-divider class="my-2" />
<div class="flex justify-between items-center text-gray-400 text-sm"> <div class="flex justify-between items-center text-gray-400 text-sm">
<span>今日新增</span> <span>今日新增</span>
<span class="text-green-500"> {{ statsData.categoryTodayTotal }}</span> <span class="text-green-500"> {{ statsData.productCategoryTodayCount }}</span>
</div> </div>
</div> </div>
</el-card> </el-card>
@ -26,11 +26,11 @@
<span class="text-gray-500 text-base font-medium">产品数量</span> <span class="text-gray-500 text-base font-medium">产品数量</span>
<Icon icon="ep:box" class="text-[32px] text-orange-400" /> <Icon icon="ep:box" class="text-[32px] text-orange-400" />
</div> </div>
<span class="text-3xl font-bold text-gray-700">{{ statsData.productTotal }}</span> <span class="text-3xl font-bold text-gray-700">{{ statsData.productCount }}</span>
<el-divider class="my-2" /> <el-divider class="my-2" />
<div class="flex justify-between items-center text-gray-400 text-sm"> <div class="flex justify-between items-center text-gray-400 text-sm">
<span>今日新增</span> <span>今日新增</span>
<span class="text-green-500"> {{ statsData.productTodayTotal }}</span> <span class="text-green-500"> {{ statsData.productTodayCount }}</span>
</div> </div>
</div> </div>
</el-card> </el-card>
@ -42,11 +42,11 @@
<span class="text-gray-500 text-base font-medium">设备数量</span> <span class="text-gray-500 text-base font-medium">设备数量</span>
<Icon icon="ep:cpu" class="text-[32px] text-purple-400" /> <Icon icon="ep:cpu" class="text-[32px] text-purple-400" />
</div> </div>
<span class="text-3xl font-bold text-gray-700">{{ statsData.deviceTotal }}</span> <span class="text-3xl font-bold text-gray-700">{{ statsData.deviceCount }}</span>
<el-divider class="my-2" /> <el-divider class="my-2" />
<div class="flex justify-between items-center text-gray-400 text-sm"> <div class="flex justify-between items-center text-gray-400 text-sm">
<span>今日新增</span> <span>今日新增</span>
<span class="text-green-500"> {{ statsData.deviceTodayTotal }}</span> <span class="text-green-500"> {{ statsData.deviceTodayCount }}</span>
</div> </div>
</div> </div>
</el-card> </el-card>
@ -58,11 +58,11 @@
<span class="text-gray-500 text-base font-medium">物模型消息</span> <span class="text-gray-500 text-base font-medium">物模型消息</span>
<Icon icon="ep:message" class="text-[32px] text-teal-400" /> <Icon icon="ep:message" class="text-[32px] text-teal-400" />
</div> </div>
<span class="text-3xl font-bold text-gray-700">{{ statsData.reportTotal }}</span> <span class="text-3xl font-bold text-gray-700">{{ statsData.deviceMessageCount }}</span>
<el-divider class="my-2" /> <el-divider class="my-2" />
<div class="flex justify-between items-center text-gray-400 text-sm"> <div class="flex justify-between items-center text-gray-400 text-sm">
<span>今日新增</span> <span>今日新增</span>
<span class="text-green-500"> {{ statsData.reportTodayTotal }}</span> <span class="text-green-500"> {{ statsData.deviceMessageTodayCount }}</span>
</div> </div>
</div> </div>
</el-card> </el-card>
@ -152,7 +152,7 @@ import { TooltipComponent, LegendComponent, TitleComponent, ToolboxComponent, Gr
import { PieChart, LineChart, GaugeChart } from 'echarts/charts' import { PieChart, LineChart, GaugeChart } from 'echarts/charts'
import { LabelLayout, UniversalTransition } from 'echarts/features' import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers' import { CanvasRenderer } from 'echarts/renderers'
import { ProductCategoryApi } from '@/api/iot/statistics' import { ProductCategoryApi,IotStatisticsSummaryRespVO, IotStatisticsDeviceMessageSummaryRespVO} from '@/api/iot/statistics'
import { formatDate } from '@/utils/formatTime' import { formatDate } from '@/utils/formatTime'
import { Icon } from '@/components/Icon' import { Icon } from '@/components/Icon'
@ -187,20 +187,27 @@ const chartDeviceOffline = ref()
const chartDeviceActive = ref() const chartDeviceActive = ref()
const chartMsgStat = ref() const chartMsgStat = ref()
const statsData = ref({
categoryTotal: 0, //
productTotal: 0, const statsData = ref<IotStatisticsSummaryRespVO>({
deviceTotal: 0, productCategoryCount: 0,
reportTotal: 0, productCount: 0,
categoryTodayTotal: 0, deviceCount: 0,
productTodayTotal: 0, deviceMessageCount: 0,
deviceTodayTotal: 0, productCategoryTodayCount: 0,
reportTodayTotal: 0, productTodayCount: 0,
onlineTotal: 0, deviceTodayCount: 0,
offlineTotal: 0, deviceMessageTodayCount: 0,
neverOnlineTotal: 0, deviceOnlineCount: 0,
deviceStatsOfCategory: [], deviceOfflineCount: 0,
reportDataStats: [] deviceInactiveCount: 0,
productCategoryDeviceCounts: {}
})
//
const messageStats = ref<IotStatisticsDeviceMessageSummaryRespVO>({
upstreamCounts: {},
downstreamCounts: {}
}) })
/** 处理快捷时间范围选择 */ /** 处理快捷时间范围选择 */
@ -250,8 +257,15 @@ const handleDateRangeChange = (value: [Date, Date] | null) => {
/** 获取统计数据 */ /** 获取统计数据 */
const getStats = async () => { const getStats = async () => {
const res = await ProductCategoryApi.getIotMainStats(queryParams) //
statsData.value = res const summaryRes = await ProductCategoryApi.getIotStatisticsSummary()
statsData.value = summaryRes
//
const messageRes = await ProductCategoryApi.getIotStatisticsDeviceMessageSummary(queryParams)
messageStats.value = messageRes
//
initCharts() initCharts()
} }
@ -290,19 +304,22 @@ const initCharts = () => {
labelLine: { labelLine: {
show: false show: false
}, },
data: statsData.value.deviceStatsOfCategory data: Object.entries(statsData.value.productCategoryDeviceCounts).map(([name, value]) => ({
name,
value
}))
} }
] ]
}) })
// 线 // 线
initGaugeChart(chartDeviceOnline.value, statsData.value.onlineTotal, '#0d9') initGaugeChart(chartDeviceOnline.value, statsData.value.deviceOnlineCount, '#0d9')
// 线 // 线
initGaugeChart(chartDeviceOffline.value, statsData.value.offlineTotal, '#f50') initGaugeChart(chartDeviceOffline.value, statsData.value.deviceOfflineCount, '#f50')
// //
initGaugeChart(chartDeviceActive.value, statsData.value.neverOnlineTotal, '#05b') initGaugeChart(chartDeviceActive.value, statsData.value.deviceInactiveCount, '#05b')
// //
initMessageChart() initMessageChart()
@ -317,7 +334,7 @@ const initGaugeChart = (el: any, value: number, color: string) => {
startAngle: 360, startAngle: 360,
endAngle: 0, endAngle: 0,
min: 0, min: 0,
max: statsData.value.deviceTotal || 100, // 使 max: statsData.value.deviceCount || 100, // 使
progress: { progress: {
show: true, show: true,
width: 12, width: 12,
@ -356,18 +373,16 @@ const initGaugeChart = (el: any, value: number, color: string) => {
/** 初始化消息统计图表 */ /** 初始化消息统计图表 */
const initMessageChart = () => { const initMessageChart = () => {
const xdata: string[] = [] const timestamps = Array.from(
const upData: string[] = [] new Set([
const downData: string[] = [] ...Object.keys(messageStats.value.upstreamCounts),
...Object.keys(messageStats.value.downstreamCounts)
])
).sort()
statsData.value.deviceUpMessageStats.forEach((msg) => { const xdata = timestamps.map(ts => formatDate(Number(ts), 'YYYY-MM-DD HH:mm'))
xdata.push(formatDate(msg.time, 'YYYY-MM-DD HH:mm')) const upData = timestamps.map(ts => messageStats.value.upstreamCounts[Number(ts)] || 0)
upData.push(msg.data) const downData = timestamps.map(ts => messageStats.value.downstreamCounts[Number(ts)] || 0)
})
statsData.value.deviceDownMessageStats.forEach((msg) => {
downData.push(msg.data)
})
echarts.init(chartMsgStat.value).setOption({ echarts.init(chartMsgStat.value).setOption({
tooltip: { tooltip: {