yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: iothome

pull/764/head
alwayssuper 2025-04-16 10:47:29 +08:00
parent 89a8b25f17
commit d246c780e4
6 changed files with 384 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/api/iot/statistics/index.ts
View File

@ -23,6 +23,7 @@ interface TimeValueItem {
/** IoT 消息统计数据类型 */
export interface IotStatisticsDeviceMessageSummaryRespVO {
statType: number
upstreamCounts: TimeValueItem[]
downstreamCounts: TimeValueItem[]
}

27
src/views/iot/home/components/ComparisonCard.vue
View File

@ -1,17 +1,19 @@
<template>
<el-card class="stat-card" shadow="never">
<el-card class="stat-card" shadow="never" :loading="loading">
<div class="flex flex-col">
<div class="flex justify-between items-center mb-1">
<span class="text-gray-500 text-base font-medium">{{ title }}</span>
<Icon :icon="icon" class="text-[32px]" :class="iconColor" />
<Icon :icon="icon" :class="`text-[32px] ${iconColor}`" />
</div>
<span class="text-3xl font-bold text-gray-700">
{{ value }}
<span v-if="value === -1">--</span>
<span v-else>{{ value }}</span>
</span>
<el-divider class="my-2" />
<div class="flex justify-between items-center text-gray-400 text-sm">
<span>今日新增</span>
<span class="text-green-500">+{{ todayCount }}</span>
<span class="text-green-500" v-if="todayCount !== -1">+{{ todayCount }}</span>
<span v-else>--</span>
</div>
</div>
</el-card>
@ -28,6 +30,21 @@ const props = defineProps({
value: propTypes.number.def(0).isRequired,
todayCount: propTypes.number.def(0).isRequired,
icon: propTypes.string.def('').isRequired,
iconColor: propTypes.string.def('')
iconColor: propTypes.string.def(''),
loading: {
type: Boolean,
default: false
}
})
</script>
<style lang="scss" scoped>
.stat-card {
transition: all 0.3s;
&:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgb(0 0 0 / 8%);
}
}
</style>

44
src/views/iot/home/components/DeviceCountCard.vue
View File

@ -1,11 +1,17 @@
<template>
<el-card class="chart-card" shadow="never">
<el-card class="chart-card" shadow="never" :loading="loading">
<template #header>
<div class="flex items-center">
<span class="text-base font-medium text-gray-600">设备数量统计</span>
</div>
</template>
<div ref="deviceCountChartRef" class="h-[240px]"></div>
<div v-if="loading && !hasData" class="h-[240px] flex justify-center items-center">
<el-empty description="加载中..." />
</div>
<div v-else-if="!hasData" class="h-[240px] flex justify-center items-center">
<el-empty description="暂无数据" />
</div>
<div v-else ref="deviceCountChartRef" class="h-[240px]"></div>
</el-card>
</template>
@ -16,6 +22,7 @@ import { CanvasRenderer } from 'echarts/renderers'
import { TooltipComponent, LegendComponent } from 'echarts/components'
import { LabelLayout } from 'echarts/features'
import { IotStatisticsSummaryRespVO } from '@/api/iot/statistics'
import type { PropType } from 'vue'
/** 设备数量统计卡片 */
defineOptions({ name: 'DeviceCountCard' })
@ -24,15 +31,37 @@ const props = defineProps({
statsData: {
type: Object as PropType<IotStatisticsSummaryRespVO>,
required: true
},
loading: {
type: Boolean,
default: false
}
})
const deviceCountChartRef = ref()
// 是否有数据
const hasData = computed(() => {
if (!props.statsData) return false
const categories = Object.entries(props.statsData.productCategoryDeviceCounts || {})
return categories.length > 0 && props.statsData.deviceCount !== -1
})
// 初始化图表
const initChart = () => {
// 如果没有数据，则不初始化图表
if (!hasData.value) return
// 确保 DOM 元素存在且已渲染
if (!deviceCountChartRef.value) {
console.warn('图表DOM元素不存在')
return
}
echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout])
try {
const chart = echarts.init(deviceCountChartRef.value)
chart.setOption({
tooltip: {
@ -73,15 +102,26 @@ const initChart = () => {
}
]
})
return chart
} catch (error) {
console.error('初始化图表失败:', error)
return null
}
}
// 监听数据变化
watch(() => props.statsData, () => {
// 使用 nextTick 确保 DOM 已更新
nextTick(() => {
initChart()
})
}, { deep: true })
// 组件挂载时初始化图表
onMounted(() => {
// 使用 nextTick 确保 DOM 已更新
nextTick(() => {
initChart()
})
})
</script>

47
src/views/iot/home/components/DeviceStateCountCard.vue
View File

@ -1,11 +1,17 @@
<template>
<el-card class="chart-card" shadow="never">
<el-card class="chart-card" shadow="never" :loading="loading">
<template #header>
<div class="flex items-center">
<span class="text-base font-medium text-gray-600">设备状态统计</span>
</div>
</template>
<el-row class="h-[240px]">
<div v-if="loading && !hasData" class="h-[240px] flex justify-center items-center">
<el-empty description="加载中..." />
</div>
<div v-else-if="!hasData" class="h-[240px] flex justify-center items-center">
<el-empty description="暂无数据" />
</div>
<el-row v-else class="h-[240px]">
<el-col :span="8" class="flex flex-col items-center">
<div ref="deviceOnlineCountChartRef" class="h-[160px] w-full"></div>
<div class="text-center mt-2">
@ -33,6 +39,7 @@ import * as echarts from 'echarts/core'
import { GaugeChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { IotStatisticsSummaryRespVO } from '@/api/iot/statistics'
import type { PropType } from 'vue'
/** 设备状态统计卡片 */
defineOptions({ name: 'DeviceStateCountCard' })
@ -41,6 +48,10 @@ const props = defineProps({
statsData: {
type: Object as PropType<IotStatisticsSummaryRespVO>,
required: true
},
loading: {
type: Boolean,
default: false
}
})
@ -48,10 +59,23 @@ const deviceOnlineCountChartRef = ref()
const deviceOfflineChartRef = ref()
const deviceActiveChartRef = ref()
// 是否有数据
const hasData = computed(() => {
if (!props.statsData) return false
return props.statsData.deviceCount !== -1
})
// 初始化仪表盘图表
const initGaugeChart = (el: any, value: number, color: string) => {
// 确保 DOM 元素存在且已渲染
if (!el) {
console.warn('图表DOM元素不存在')
return
}
echarts.use([GaugeChart, CanvasRenderer])
try {
const chart = echarts.init(el)
chart.setOption({
series: [
@ -95,17 +119,36 @@ const initGaugeChart = (el: any, value: number, color: string) => {
}
]
})
return chart
} catch (error) {
console.error('初始化图表失败:', error)
return null
}
}
// 初始化所有图表
const initCharts = () => {
// 如果没有数据，则不初始化图表
if (!hasData.value) return
// 使用 nextTick 确保 DOM 已更新
nextTick(() => {
// 在线设备统计
if (deviceOnlineCountChartRef.value) {
initGaugeChart(deviceOnlineCountChartRef.value, props.statsData.deviceOnlineCount, '#0d9')
}
// 离线设备统计
if (deviceOfflineChartRef.value) {
initGaugeChart(deviceOfflineChartRef.value, props.statsData.deviceOfflineCount, '#f50')
}
// 待激活设备统计
if (deviceActiveChartRef.value) {
initGaugeChart(deviceActiveChartRef.value, props.statsData.deviceInactiveCount, '#05b')
}
})
}
// 监听数据变化
watch(() => props.statsData, () => {

71
src/views/iot/home/components/MessageTrendCard.vue
View File

@ -1,8 +1,13 @@
<template>
<el-card class="chart-card" shadow="never">
<el-card class="chart-card" shadow="never" :loading="loading">
<template #header>
<div class="flex items-center justify-between">
<span class="text-base font-medium text-gray-600">上下行消息量统计</span>
<span class="text-base font-medium text-gray-600">
上下行消息量统计
<span class="text-sm text-gray-400 ml-2">
{{ props.messageStats.statType === 1 ? '(按天)' : '(按小时)' }}
</span>
</span>
<div class="flex items-center space-x-2">
<el-radio-group v-model="timeRange" @change="handleTimeRangeChange">
<el-radio-button label="8h">最近8小时</el-radio-button>
@ -21,7 +26,13 @@
</div>
</div>
</template>
<div ref="messageChartRef" class="h-[300px]"></div>
<div v-if="loading && !hasData" class="h-[300px] flex justify-center items-center">
<el-empty description="加载中..." />
</div>
<div v-else-if="!hasData" class="h-[300px] flex justify-center items-center">
<el-empty description="暂无数据" />
</div>
<div v-else ref="messageChartRef" class="h-[300px]"></div>
</el-card>
</template>
@ -43,6 +54,10 @@ const props = defineProps({
messageStats: {
type: Object as PropType<IotStatisticsDeviceMessageSummaryRespVO>,
required: true
},
loading: {
type: Boolean,
default: false
}
})
@ -52,6 +67,20 @@ const timeRange = ref('7d')
const dateRange = ref<any>(null)
const messageChartRef = ref()
// 是否有数据
const hasData = computed(() => {
if (!props.messageStats) return false
const upstreamCounts = Array.isArray(props.messageStats.upstreamCounts)
? props.messageStats.upstreamCounts
: []
const downstreamCounts = Array.isArray(props.messageStats.downstreamCounts)
? props.messageStats.downstreamCounts
: []
return upstreamCounts.length > 0 || downstreamCounts.length > 0
})
// TODO @super：这个的计算，看看能不能结合 dayjs 简化。因为 1h、24h、7d 感觉是比较标准的。如果没有，抽到 utils/formatTime.ts 作为一个工具方法
// 处理快捷时间范围选择
const handleTimeRangeChange = (range: string) => {
@ -84,6 +113,15 @@ const initChart = () => {
UniversalTransition
])
// 检查是否有数据可以绘制
if (!hasData.value) return
// 确保 DOM 元素存在且已渲染
if (!messageChartRef.value) {
console.warn('图表DOM元素不存在')
return
}
// 检查数据格式并转换
const upstreamCounts = Array.isArray(props.messageStats.upstreamCounts)
@ -117,9 +155,19 @@ const initChart = () => {
timestamps = []
}
console.log('时间戳:', timestamps)
// 准备数据
const xdata = timestamps.map((ts) => formatDate(dayjs(ts).toDate(), 'YYYY-MM-DD HH:mm'))
// 准备数据 - 根据 statType 确定时间格式
const xdata = timestamps.map((ts) => {
// 根据 statType 选择合适的格式
if (props.messageStats.statType === 1) {
// 日级别统计 - 使用 YYYY-MM-DD 格式
return formatDate(dayjs(ts).toDate(), 'YYYY-MM-DD')
} else {
// 小时级别统计 - 使用 YYYY-MM-DD HH:mm 格式
return formatDate(dayjs(ts).toDate(), 'YYYY-MM-DD HH:mm')
}
})
let upData: number[] = []
let downData: number[] = []
@ -155,7 +203,9 @@ const initChart = () => {
// 配置图表
try {
const chart = echarts.init(messageChartRef.value)
chart.setOption({
tooltip: {
trigger: 'axis',
@ -246,19 +296,30 @@ const initChart = () => {
}
]
})
return chart
} catch (error) {
console.error('初始化图表失败:', error)
return null
}
}
// 监听数据变化
watch(
() => props.messageStats,
() => {
// 使用 nextTick 确保 DOM 已更新
nextTick(() => {
initChart()
})
},
{ deep: true }
)
// 组件挂载时初始化图表
onMounted(() => {
// 使用 nextTick 确保 DOM 已更新
nextTick(() => {
initChart()
})
})
</script>

54
src/views/iot/home/index.vue
View File

@ -8,6 +8,7 @@
:todayCount="statsData.productCategoryTodayCount"
icon="ep:menu"
iconColor="text-blue-400"
:loading="loading"
/>
</el-col>
<el-col :span="6">
@ -17,6 +18,7 @@
:todayCount="statsData.productTodayCount"
icon="ep:box"
iconColor="text-orange-400"
:loading="loading"
/>
</el-col>
<el-col :span="6">
@ -26,6 +28,7 @@
:todayCount="statsData.deviceTodayCount"
icon="ep:cpu"
iconColor="text-purple-400"
:loading="loading"
/>
</el-col>
<el-col :span="6">
@ -35,6 +38,7 @@
:todayCount="statsData.deviceMessageTodayCount"
icon="ep:message"
iconColor="text-teal-400"
:loading="loading"
/>
</el-col>
</el-row>
@ -42,10 +46,10 @@
<!-- 第二行：图表行 -->
<el-row :gutter="16" class="mb-4">
<el-col :span="12">
<DeviceCountCard :statsData="statsData" />
<DeviceCountCard :statsData="statsData" :loading="loading" />
</el-col>
<el-col :span="12">
<DeviceStateCountCard :statsData="statsData" />
<DeviceStateCountCard :statsData="statsData" :loading="loading" />
</el-col>
</el-row>
@ -55,6 +59,7 @@
<MessageTrendCard
:messageStats="messageStats"
@time-range-change="handleTimeRangeChange"
:loading="loading"
/>
</el-col>
</el-row>
@ -68,7 +73,7 @@ import {
IotStatisticsSummaryRespVO,
ProductCategoryApi
} from '@/api/iot/statistics'
import { formatDate } from '@/utils/formatTime'
import { getHoursAgo } from '@/utils/formatTime'
import ComparisonCard from './components/ComparisonCard.vue'
import DeviceCountCard from './components/DeviceCountCard.vue'
import DeviceStateCountCard from './components/DeviceStateCountCard.vue'
@ -79,11 +84,9 @@ defineOptions({ name: 'IoTHome' })
// TODO @super：使用下 Echart 组件，参考 yudao-ui-admin-vue3/src/views/mall/home/components/TradeTrendCard.vue 等
const timeRange = ref('7d') // 修改默认选择为近一周
const dateRange = ref<[Date, Date] | null>(null)
const queryParams = reactive({
startTime: Date.now() - 7 * 24 * 60 * 60 * 1000, // 设置默认开始时间为 7 天前
startTime: getHoursAgo( 7 * 24 ), // 设置默认开始时间为 7 天前
endTime: Date.now() // 设置默认结束时间为当前时间
})
@ -91,26 +94,30 @@ const queryParams = reactive({
// 基础统计数据
// TODO @super：初始为 -1，然后界面展示先是加载中？试试用 cursor 改哈
const statsData = ref<IotStatisticsSummaryRespVO>({
productCategoryCount: 0,
productCount: 0,
deviceCount: 0,
deviceMessageCount: 0,
productCategoryTodayCount: 0,
productTodayCount: 0,
deviceTodayCount: 0,
deviceMessageTodayCount: 0,
deviceOnlineCount: 0,
deviceOfflineCount: 0,
deviceInactiveCount: 0,
productCategoryCount: -1,
productCount: -1,
deviceCount: -1,
deviceMessageCount: -1,
productCategoryTodayCount: -1,
productTodayCount: -1,
deviceTodayCount: -1,
deviceMessageTodayCount: -1,
deviceOnlineCount: -1,
deviceOfflineCount: -1,
deviceInactiveCount: -1,
productCategoryDeviceCounts: {}
})
// 消息统计数据
const messageStats = ref<IotStatisticsDeviceMessageSummaryRespVO>({
upstreamCounts: {},
downstreamCounts: {}
statType: 0,
upstreamCounts: [],
downstreamCounts: []
})
// 加载状态
const loading = ref(true)
/** 处理时间范围变化 */
const handleTimeRangeChange = (params: { startTime: number; endTime: number }) => {
queryParams.startTime = params.startTime
@ -120,12 +127,17 @@ const handleTimeRangeChange = (params: { startTime: number; endTime: number }) =
/** 获取统计数据 */
const getStats = async () => {
loading.value = true
try {
// 获取基础统计数据
statsData.value = await ProductCategoryApi.getIotStatisticsSummary()
// 获取消息统计数据
messageStats.value = await ProductCategoryApi.getIotStatisticsDeviceMessageSummary(queryParams)
console.log('statsData', statsData.value)
console.log('messageStats', messageStats.value)
} catch (error) {
console.error('获取统计数据出错:', error)
} finally {
loading.value = false
}
}
/** 初始化 */