style:设备运行参数分析-图表效果优化

main
黄伟杰 3 weeks ago
parent d7fcc01b69
commit 5a42cca0c7

@ -59,7 +59,13 @@
/>
<div v-loading="chartLoading">
<el-empty v-if="!selectedParam" description="请选择左侧参数" />
<EChart v-else :key="chartRenderKey" :options="chartOption" height="70vh" />
<el-empty v-else-if="chartState === 'empty'" description="暂无数据" />
<EChart
v-else-if="chartState === 'ready'"
:key="chartRenderKey"
:options="chartOption"
height="70vh"
/>
</div>
</ContentWrap>
</el-col>
@ -120,6 +126,7 @@ const selectedModelId = ref<number | undefined>(undefined)
const selectedParam = ref<DeviceTreeNode | null>(null)
const chartLoading = ref(false)
const chartState = ref<'idle' | 'loading' | 'empty' | 'ready'>('idle')
const chartXAxis = ref<string[]>([])
const chartSeries = ref<{ name: string; data: Array<number | null> }[]>([])
const chartRenderKey = ref(0)
@ -251,6 +258,7 @@ const loadTree = async () => {
selectedParam.value = null
selectedDeviceId.value = undefined
selectedModelId.value = undefined
chartState.value = 'idle'
chartXAxis.value = []
chartSeries.value = []
}
@ -300,6 +308,7 @@ const fetchChart = async () => {
return date.includes(':') ? date : `${date} ${suffix}`
}
chartState.value = 'loading'
chartLoading.value = true
resetChartData()
try {
@ -313,6 +322,7 @@ const fetchChart = async () => {
if (!rows.length) {
chartXAxis.value = []
chartSeries.value = []
chartState.value = 'empty'
return
}
@ -356,8 +366,11 @@ const fetchChart = async () => {
const values = keys.map((k) => toNumber(firstRow[k]))
chartSeries.value = [{ name: param?.label || '参数', data: values }]
}
chartState.value = chartXAxis.value.length && chartSeries.value.length ? 'ready' : 'empty'
} catch {
message.error('获取图表数据失败')
chartState.value = 'idle'
} finally {
chartLoading.value = false
}

Loading…
Cancel
Save