<template>
|
<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>
|
<div class="flex flex-wrap items-center gap-4">
|
<el-form-item label="时间范围" class="!mb-0">
|
<el-date-picker
|
v-model="queryParams.times"
|
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
:shortcuts="defaultShortcuts"
|
class="!w-240px"
|
end-placeholder="结束日期"
|
start-placeholder="开始日期"
|
type="daterange"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
@change="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="时间间隔" class="!mb-0">
|
<el-select
|
v-model="queryParams.interval"
|
class="!w-120px"
|
placeholder="间隔类型"
|
@change="handleQuery"
|
>
|
<el-option
|
v-for="dict in getIntDictOptions(DICT_TYPE.DATE_INTERVAL)"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</div>
|
</div>
|
</template>
|
<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>
|
|
<script lang="ts" setup>
|
import * as echarts from 'echarts/core'
|
import { LineChart } from 'echarts/charts'
|
import { CanvasRenderer } from 'echarts/renderers'
|
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
|
import { UniversalTransition } from 'echarts/features'
|
import {
|
StatisticsApi,
|
IotStatisticsDeviceMessageSummaryByDateRespVO,
|
IotStatisticsDeviceMessageReqVO
|
} from '@/api/iot/statistics'
|
import { formatDate, beginOfDay, endOfDay, defaultShortcuts } from '@/utils/formatTime'
|
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
/** 消息趋势统计卡片 */
|
defineOptions({ name: 'MessageTrendCard' })
|
|
const messageChartRef = ref()
|
const loading = ref(false)
|
const messageData = ref<IotStatisticsDeviceMessageSummaryByDateRespVO[]>([])
|
|
const queryParams = reactive<IotStatisticsDeviceMessageReqVO>({
|
interval: 1, // DAY, 日
|
times: [
|
// 默认显示最近一周的数据
|
formatDate(beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7))),
|
formatDate(endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24)))
|
]
|
}) // 查询参数
|
|
// 是否有数据
|
const hasData = computed(() => {
|
return messageData.value && messageData.value.length > 0
|
})
|
|
// 处理查询操作
|
const handleQuery = () => {
|
fetchMessageData()
|
}
|
|
// 获取消息统计数据
|
const fetchMessageData = async () => {
|
loading.value = true
|
try {
|
messageData.value = await StatisticsApi.getDeviceMessageSummaryByDate(queryParams)
|
|
// 使用 nextTick 确保数据更新后重新渲染图表
|
await nextTick()
|
initChart()
|
} catch (error) {
|
console.error('获取消息统计数据失败:', error)
|
messageData.value = []
|
} finally {
|
loading.value = false
|
}
|
}
|
|
// 初始化图表
|
const initChart = () => {
|
// 检查是否有数据可以绘制
|
if (!hasData.value) return
|
// 确保 DOM 元素存在且已渲染
|
if (!messageChartRef.value) {
|
console.warn('图表 DOM 元素不存在')
|
return
|
}
|
|
// 配置图表
|
echarts.use([
|
LineChart,
|
CanvasRenderer,
|
GridComponent,
|
LegendComponent,
|
TooltipComponent,
|
UniversalTransition
|
])
|
try {
|
const chart = echarts.init(messageChartRef.value)
|
chart.setOption({
|
tooltip: {
|
trigger: 'axis',
|
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
borderColor: '#E5E7EB',
|
textStyle: {
|
color: '#374151'
|
}
|
},
|
legend: {
|
data: ['上行消息量', '下行消息量'],
|
textStyle: {
|
color: '#374151',
|
fontWeight: 500
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: messageData.value.map((item) => item.time),
|
axisLine: {
|
lineStyle: {
|
color: '#E5E7EB'
|
}
|
},
|
axisLabel: {
|
color: '#6B7280'
|
}
|
},
|
yAxis: {
|
type: 'value',
|
axisLine: {
|
lineStyle: {
|
color: '#E5E7EB'
|
}
|
},
|
axisLabel: {
|
color: '#6B7280'
|
},
|
splitLine: {
|
lineStyle: {
|
color: '#F3F4F6'
|
}
|
}
|
},
|
series: [
|
{
|
name: '上行消息量',
|
type: 'line',
|
smooth: true,
|
data: messageData.value.map((item) => item.upstreamCount),
|
itemStyle: {
|
color: '#3B82F6'
|
},
|
lineStyle: {
|
width: 2
|
},
|
areaStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: 'rgba(59, 130, 246, 0.2)' },
|
{ offset: 1, color: 'rgba(59, 130, 246, 0)' }
|
])
|
}
|
},
|
{
|
name: '下行消息量',
|
type: 'line',
|
smooth: true,
|
data: messageData.value.map((item) => item.downstreamCount),
|
itemStyle: {
|
color: '#10B981'
|
},
|
lineStyle: {
|
width: 2
|
},
|
areaStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: 'rgba(16, 185, 129, 0.2)' },
|
{ offset: 1, color: 'rgba(16, 185, 129, 0)' }
|
])
|
}
|
}
|
]
|
})
|
return chart
|
} catch (error) {
|
console.error('初始化图表失败:', error)
|
return null
|
}
|
}
|
|
/** 组件挂载时初始化 */
|
onMounted(() => {
|
fetchMessageData()
|
})
|
</script>
|
